/* tractorsupply-skin.css (WSM6-5249): homedepot-skin.css with the Tractor Supply token block
   (recon 2026-10-16: red #a02817, ink #222, cream #f9f6f2, Roboto UI, Zilla Slab heads) and the
   TSC header/footer overrides at the end. CONCEPT DEMO, not affiliated with Tractor Supply Co. */
/* =============================================================== RE-SKIN HERE
   The second retailer skin, and the proof that the seam is real: this file is
   basspro-skin.css with a different token block and eight retuned rules. Every
   rule under "layout" is byte-identical, because layout is not retailer-specific
   — the chrome, the palette and the shape language are.

   Values here come from a design-token extraction of a public storefront (type,
   colour and layout only), read live with a WebKit browser on 2026-08-10:
   brand #F96302 (--sui-palette-brand-400), ink #202020, body #333, muted
   #757575, rule #BFBFBF, success #0D864C, danger #B72020, focus #EBB821, a
   Helvetica Neue stack throughout, and a SQUARE shape language — the 44px CTA
   comes back at border-radius 2px where Bass Pro's was a 4px pill and its
   search box a 20px one. That squareness is most of what makes this read as a
   hardware store rather than an outfitter, so it is a token, not an accident.

   NO WEBFONT. The extraction found a Helvetica Neue stack, which every device
   already has, so these pages load zero font files where the Bass Pro pages
   load three families. One less round trip on a page whose argument is speed.

   CONCEPT DEMO. Not affiliated with, endorsed by, or produced by The Home
   Depot. No trademark, logo or photography of theirs appears here.
   ------------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --ink: #222222;
  --ink-2: #333333;
  --orange: #a02817;
  --orange-d: #922415;
  --charcoal: #5a3a21;
  --yellow: #ffe905;
  --green: #576446;
  --red: #da3832;
  --link: #a02817;
  --surface: #f9f6f2;
  --line: #d8d8d8;
  --rule: #e6e6e6;
  --muted: #727272;
  --r-card: 4px;
  --r-btn: 20px;
  --r-pill: 20px;
  --font-ui: Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-btn: Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Zilla Slab", Georgia, serif;

  /* ---- PartsLogic theme. Sixteen values, and the widget is theirs. ---- */
  --pl-ink: var(--ink);
  --pl-muted: var(--muted);
  --pl-surface: #fff;
  --pl-surface-2: var(--surface);
  --pl-line: var(--line);
  --pl-accent: var(--orange);
  --pl-cta-bg: var(--orange);
  --pl-cta-ink: #fff;
  --pl-ok: var(--green);
  --pl-warn: var(--red);
  --pl-link: var(--link);
  --pl-radius: var(--r-card);
  --pl-radius-pill: var(--r-pill);
  --pl-font: var(--font-ui);
  --pl-font-head: var(--font-display);
  --pl-head-tracking: 0;
}

/* ------------------------------------------------------------------- base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--ink-2);
  font: 400 14px/21px var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 700; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 16px; }
img { max-width: 100%; }

/* ----------------------------------------------------------------- chrome */
.bps { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); background: #fff; }
.promo { order: 1; background: var(--orange); color: #fff; }
.util  { order: 2; border-bottom: 1px solid var(--line); }
.mainbar { order: 3; }
.mainnav { order: 4; border-top: 1px solid var(--line); }

.promo .wrap { position: relative; display: flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 44px; }
.promo p { margin: 0; font: 400 14px/20px var(--font-ui); text-align: center; }
.promo b { font-weight: 700; }
.promo .sep { opacity: .7; margin: 0 8px; }
.promo .x {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; background: none; color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer; opacity: .95;
}

.util .wrap { display: flex; align-items: center; gap: 24px; min-height: 38px; }
.util .store, .util .ship { display: flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--ink); }
.util .ship b { color: var(--green); font-weight: 700; }
/* min-width:0 + its own scroller, the same answer .mainnav below already gives
   the same problem: a flex item defaults to an auto content minimum, so seven
   nowrap links next to a store name of unknown length pushed the DOCUMENT to
   1325px at a 1280 viewport (caught live). Now the strip scrolls inside itself
   and the page never does, whatever a store is called. */
.util .ulinks { margin-left: auto; display: flex; gap: 20px; white-space: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.util .ulinks::-webkit-scrollbar { height: 0; }
.util a { color: var(--ink); }
.util .ulinks a { color: var(--ink); }
.util svg { width: 16px; height: 16px; color: var(--orange); }

.mainbar .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 76px; padding-top: 8px; padding-bottom: 8px; }
/* The wordmark is TEXT in a box, not an image: an orange square with the name
   set white, bold and tight inside it. Nothing of theirs is downloaded. */
.wordmark {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: var(--r-btn);
  background: var(--orange); color: #fff;
  display: grid; place-content: center; text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; line-height: 1.06; letter-spacing: -.02em; text-transform: uppercase;
}
.wordmark:hover { text-decoration: none; }
.burger { display: none; flex: 0 0 auto; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; padding: 8px; }
.burger span { display: block; height: 3px; background: var(--ink); border-radius: 1px; margin: 4px 0; }
/* Square search box with an orange submit block on the end — the shape that
   most distinguishes this header from the outfitter's rounded pill. */
.hsearch { flex: 1 1 320px; min-width: 0; display: flex; border: 1px solid var(--ink); border-radius: var(--r-btn); overflow: hidden; }
.hsearch input {
  flex: 1 1 auto; min-width: 0; height: 42px; border: 0;
  background: #fff; color: var(--ink);
  font: 400 16px/20px var(--font-ui); padding: 0 12px;
}
.hsearch input:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }
.hsearch button {
  flex: 0 0 auto; width: 52px; height: 42px; border: 0; cursor: pointer;
  background: var(--orange) no-repeat center / 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
  font-size: 0; color: transparent;
}
.hicons { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; margin-left: auto; }
.hicons a { position: relative; display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink); }
.hicons svg { width: 28px; height: 28px; }
.hicons .cnt {
  position: absolute; top: 4px; right: 2px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--orange); color: #fff;
  font: 700 12px/20px var(--font-ui); text-align: center;
}

.mainnav .wrap { display: flex; align-items: center; gap: 4px; justify-content: space-between; overflow-x: auto; scrollbar-width: none; }
.mainnav .wrap::-webkit-scrollbar { height: 0; }
.mainnav a {
  flex: 0 0 auto; display: flex; align-items: center; min-height: 42px; padding: 0 10px;
  font: 400 15px/20px var(--font-ui); color: var(--ink); white-space: nowrap;
}
.mainnav a.here { font-weight: 700; box-shadow: inset 0 -3px 0 var(--orange); }

/* The footer is a LIGHT slab here, where the outfitter's was a dark green one:
   the extraction found no dark footer surface anywhere on the source. */
.foot { color: var(--muted); font-size: 12px; padding: 18px 0 6px; line-height: 1.6; }
.bpfoot { background: var(--surface); color: var(--ink); padding: 28px 0 16px; margin-top: 28px; border-top: 3px solid var(--orange); }
.bpfoot a { color: var(--ink); }
.fcols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
.fcols h3 { font: 700 15px/22px var(--font-ui); margin: 0 0 8px; }
.fcols ul { list-style: none; margin: 0; padding: 0; }
.fcols li { margin: 0 0 6px; }
.fcols a { font: 400 14px/20px var(--font-ui); }
.ftag { display: flex; align-items: center; gap: 12px; margin: 24px 0 12px; padding-top: 18px; border-top: 1px solid var(--rule); }
.ftag .mark { flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--r-btn); background: var(--orange); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 10px; line-height: 1.06; letter-spacing: -.02em; text-transform: uppercase; display: grid; place-content: center; text-align: center; }
.ftag p { margin: 0; font: 700 16px/22px var(--font-ui); }
.flegal { margin: 14px 0 0; font-size: 12px; line-height: 20px; color: var(--muted); }
.flegal a { color: var(--muted); }
.fpl { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* -------------------------------------------------------------- crumb/head */
/* Slash-separated rather than chevroned, which is what the source ships. */
.crumb { padding: 14px 0 2px; font: 400 14px/21px var(--font-ui); color: var(--ink-2); }
.crumb a { color: var(--ink-2); }
.crumb a:hover { text-decoration: underline; }
.crumb .sep { color: var(--muted); margin: 0 4px; }
.phead { padding: 12px 0 4px; }
.phead h1 { font: 700 30px/37px var(--font-ui); color: var(--ink); }
.phead p { margin: 6px 0 0; color: var(--muted); max-width: 66ch; }

/* ------------------------------------------------------------- PDP layout */
/* Gallery left, buy column right. One grid, one column on the phone. The buy
   column is where PartsLogic lives — the Select Vehicle box is a card in it,
   and when a truck is chosen the fitted result grows down from there. Product
   first, fit second, exactly as the real retailers do it. */
.pdp { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 8px 0 8px; }

.gal { display: grid; grid-template-columns: 1fr; gap: 12px; align-content: start; }
.gmain {
  position: relative; border: 1px solid var(--line); border-radius: var(--r-card);
  background: #fff; aspect-ratio: 1 / 1; overflow: hidden;
  display: grid; place-items: center;
}
.gmain img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 18px; }  /* same aspect-ratio percentage-height trap as .tile .shot img */
.gbadge {
  position: absolute; left: 12px; top: 12px; z-index: 1;
  background: var(--orange); color: #fff; font: 700 11px/1 var(--font-ui);
  letter-spacing: .04em; text-transform: uppercase; padding: 7px 9px; border-radius: var(--r-btn);
}
.gthumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.gthumbs button {
  flex: 0 0 auto; width: 64px; height: 64px; padding: 4px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-btn); background: #fff;
}
.gthumbs button[aria-current="true"] { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.gthumbs img { width: 100%; height: 100%; object-fit: contain; }

.buy { display: grid; grid-template-columns: 1fr; gap: 12px; align-content: start; }
.buy .brandlink { font: 700 13px/1 var(--font-ui); letter-spacing: .02em; text-transform: uppercase; color: var(--link); }
.buy h1 { font: 400 28px/34px var(--font-ui); color: var(--ink); }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price .amt { font: 700 28px/1 var(--font-ui); color: var(--ink); }
.price .from { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.skuline { font-size: 12px; color: var(--muted); }
.fulfil {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-card); background: #fff;
  font-size: 13px; line-height: 18px;
}
.fulfil svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--orange); margin-top: 1px; }
.fulfil b { color: var(--ink); }
.fulfil .free { color: var(--green); font-weight: 700; }

/* The Select Vehicle card. A framed slot; the widget's own entry ("Will It Fit
   My Vehicle?") is the heading, so the host adds a chrome cap and border and
   nothing else. The whole shopping experience mounts inside #pl-vehicle. */
.vbox { border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; }
.vbox .cap {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  background: var(--orange); color: #fff; font: 700 14px/1 var(--font-btn);
  letter-spacing: 0; text-transform: none;
}
.vbox .cap svg { width: 18px; height: 18px; }
.vbox .pad { padding: 14px; }
#pl-vehicle { min-height: 40px; }

.details { border-top: 1px solid var(--line); padding: 26px 0 6px; }
.details h2 { font: 700 22px/28px var(--font-ui); margin: 0 0 12px; color: var(--ink); }
.details .lede { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 78ch; }
.details p { margin: 0; font: 400 15px/24px var(--font-ui); color: var(--ink-2); }
.details .feat { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; max-width: 70ch; }
.details .feat li { position: relative; padding-left: 26px; font-size: 14px; line-height: 21px; }
.details .feat li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-11'/%3E%3C/svg%3E") center/12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-11'/%3E%3C/svg%3E") center/12px no-repeat;
}
.rmark { color: var(--muted); font-size: .8em; vertical-align: super; }

/* ------------------------------------------------------------- PLP layout */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 16px 0 8px; }
.tile { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: #fff; color: var(--ink); transition: box-shadow .15s ease, border-color .15s ease; }
/* min-height:0 or the flex item's auto content minimum lets a taller-than-4:3
   source (360x360, 360x309) win over the aspect-ratio and shove that tile's
   text 28-66px below its row-mates. object-fit:contain letterboxes instead. */
.tile .shot { position: relative; aspect-ratio: 4 / 3; min-height: 0; background: #fff; display: grid; place-items: center; border-bottom: 1px solid var(--line); }
/* ABSOLUTE, not a percentage. No percentage height resolves against a parent
   whose own height came from aspect-ratio — height:100% AND max-height:100%
   both fall back to auto — so the image drew at its intrinsic ratio and
   overflowed the box: 7px on a 4:3 source, 74px on a square one, straight over
   that tile's name. An absolutely positioned box sizes off the containing
   block's USED height, which is definite whatever produced it, so inset:0 plus
   object-fit:contain letterboxes correctly for any shape the supplier ships. */
.tile .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.tile .badge { position: absolute; z-index: 1; left: 10px; top: 10px; background: var(--orange); color: #fff; font: 700 10px/1 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; padding: 6px 8px; border-radius: var(--r-btn); }
.tile .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tile .brand { font: 700 11px/1 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.tile .name { font: 400 16px/21px var(--font-ui); color: var(--ink); }
.tile .from { margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--muted); }
.tile .from b { color: var(--ink); font: 700 18px/1 var(--font-ui); }
.tile .cta { margin-top: 8px; font: 700 13px/1 var(--font-btn); color: var(--link); }

/* The catalogue splits into named sections (the product lines, then everything
   else), and the least-populated fifty-odd categories fold into one expander
   rather than fifty tiles nobody scrolls to. */
.secttl { font: 700 22px/28px var(--font-ui); margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink); }
.secttl .n { font: 400 13px/1 var(--font-ui); color: var(--muted); margin-left: 10px; }
.tail summary { cursor: pointer; font: 700 14px/1 var(--font-btn); color: var(--link); padding: 12px 0; }
.tailgrid { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 10px; }
.tailgrid a { display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 12px; border: 1px solid var(--rule); border-radius: var(--r-btn); background: #fff; color: var(--ink); font-size: 13px; }
.tailgrid a:hover { border-color: var(--orange); text-decoration: none; }
.tailgrid b { color: var(--muted); font-weight: 400; font-size: 12px; }

/* A LIVE tile is an <a>: it hovers, it has a cursor, it goes somewhere real.
   A DECORATIVE tile is a <div>: real catalogue data drawn in the grid so the
   category looks like a category, with no link, no cursor and no pointer
   events, because there is no page behind it yet. Nothing on this page
   navigates nowhere. */
a.tile:hover { border-color: var(--orange); box-shadow: 0 4px 14px rgba(32, 32, 32, .12); text-decoration: none; }
a.tile:hover .cta { text-decoration: underline; }
div.tile { pointer-events: none; }
div.tile .shot img { opacity: .92; }
div.tile .cta { color: var(--muted); font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* -------------------------------------------------------------------- phone */
@media (max-width: 759px) {
  .util { order: 4; border-top: 1px solid var(--line); border-bottom: 0; }
  .mainbar { order: 3; }
  .mainnav { order: 5; }
  .util .wrap { flex-direction: column; align-items: stretch; gap: 0; }
  .util .store, .util .ship { min-height: 40px; }
  .util .ship { order: -1; border-bottom: 1px solid var(--line); }
  .util .ulinks { display: none; }
  .promo p { font-size: 13px; }
  .burger { display: block; }
  .wordmark { width: 48px; height: 48px; font-size: 10px; }
  .mainbar .wrap { min-height: 64px; gap: 8px; }
  .hsearch { flex: 1 0 100%; order: 3; }
  .hicons { gap: 6px; }
  .hicons svg { width: 26px; height: 26px; }
  .buy h1 { font-size: 24px; line-height: 30px; }
  .phead h1 { font-size: 24px; line-height: 30px; }
}

/* ------------------------------------------------------------------ desktop */
@media (min-width: 760px) {
  .wrap { padding: 0 24px; }
  .fcols { grid-template-columns: repeat(4, 1fr); }
  .grid { grid-template-columns: repeat(3, 1fr); }
  /* Gallery gets a thumbnail rail to the left of the hero once there is room. */
  .gal { grid-template-columns: 72px 1fr; }
  .gthumbs { flex-direction: column; order: -1; flex-wrap: nowrap; }
}
@media (min-width: 980px) {
  /* Two columns: gallery and buy. The buy column is generous so the fitted
     result has room to breathe when it grows in. */
  .pdp { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; }
}
@media (min-width: 1040px) { .grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- Tractor Supply overrides ---------------------------------------------- */
body { background: #fff; font-family: var(--font-ui); }
.promo { background: #6f1b10; }
.promo .wrap { justify-content: space-between; padding: 6px 16px; min-height: 40px; }
.promo p { font: 400 14px/20px var(--font-ui); text-align: left; }
.promo b { font-size: 16px; }
.promo .plinks { display: flex; gap: 28px; }
.promo .plinks a { color: #fff; font-size: 13px; }
.promo .x { display: none; }
.mainbar .wrap { gap: 22px; min-height: 80px; flex-wrap: nowrap; }
.wordmark { width: auto; height: auto; background: none; color: var(--ink); display: flex; align-items: center; gap: 6px; text-transform: uppercase; }
.wordmark .tb { display: grid; place-items: center; width: 40px; height: 40px; background: var(--orange); color: #fff; border-radius: 4px;
  font: italic 900 17px/1 var(--font-display); transform: skewX(-6deg); letter-spacing: -.03em; }
.wordmark .tn { font: 800 19px/.95 var(--font-display); letter-spacing: -.01em; color: #1a1a1a; }
.tstore, .tdeliver { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--ink); white-space: nowrap; }
.tstore b, .tdeliver b { font-size: 13px; }
.tstore svg, .tdeliver svg { width: 30px; height: 30px; color: #1a1a1a; }
.hsearch { flex: 1 1 360px; border: 1px solid #8a8a8a; border-radius: 24px; background: #fff; overflow: visible; --v2-mic-right: 52px; }
.hsearch input { height: 44px; border-radius: 24px; padding: 0 12px 0 44px; background: transparent no-repeat 16px center / 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E"); }
.hsearch input:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.hsearch button { width: 48px; background-color: transparent; border-radius: 0 24px 24px 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a02817' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.hicons { gap: 22px; }
.hicons a { color: #1a1a1a; }
.hicons .tsign { display: flex; width: auto; gap: 8px; align-items: center; font-size: 13px; line-height: 17px; white-space: nowrap; }
.hicons .tsign svg { width: 30px; height: 30px; color: var(--orange); }
.hicons .tsign em { font-style: normal; color: var(--orange); font-size: 12px; font-weight: 700; }
.mainnav { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mainnav a { font: 400 14px/20px var(--font-ui); color: #1a1a1a; }
.mainnav a.here { font-weight: 700; box-shadow: inset 0 -3px 0 var(--orange); }
h1, h2, h3, .phead h1, .buy h1, .plf-h, .details h2 { font-family: var(--font-display); font-weight: 700; }
.phead { text-align: center; padding: 26px 0 8px; }
.phead h1 { font: 700 34px/1.15 var(--font-display); }
.phead p { margin: 6px auto 0; }
.crumb { font-size: 13px; }
.crumb a { color: #444; }
.buy .brandlink { font: 400 14px/1 var(--font-display); text-transform: none; letter-spacing: 0; text-decoration: underline; color: var(--orange); }
.buy h1 { font: 700 26px/1.25 var(--font-display); }
.price .amt { font: 700 30px/1 var(--font-ui); }
.price .amt sup { font-size: 15px; vertical-align: 12px; margin-left: 1px; }
.tsc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tsc-card { position: relative; border: 1px solid #8a8a8a; border-radius: 4px; padding: 12px 14px; font-size: 13px; color: #444; }
.tsc-card b { display: flex; align-items: center; gap: 6px; font-size: 15px; color: #1a1a1a; margin-bottom: 4px; }
.tsc-card svg { width: 22px; height: 22px; }
.tsc-card.on { border: 2px solid var(--orange); }
.tsc-card.on::after { content: "\2713"; position: absolute; top: 0; right: 0; width: 22px; height: 22px; background: var(--orange); color: #fff;
  font-size: 12px; display: grid; place-items: center; clip-path: polygon(0 0, 100% 0, 100% 100%); padding: 0 0 8px 8px; }
.tsc-qty { display: flex; align-items: center; gap: 14px; }
.tsc-qty .q { display: flex; align-items: center; gap: 10px; font-size: 22px; color: #444; }
.tsc-qty .q span { display: grid; place-items: center; width: 52px; height: 34px; border: 1px solid #bbb; border-radius: 4px; font-size: 14px; }
.tbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 26px; background: var(--orange); color: #fff;
  border-radius: 20px; font: 700 15px/1 var(--font-ui); text-decoration: none; }
.tbtn:hover { background: var(--orange-d); text-decoration: none; }
.tsc-qty .tbtn { flex: 1 1 auto; }
.tsc-club { display: flex; align-items: center; gap: 12px; background: #f4f1ed; border-radius: 4px; padding: 12px 14px; font-size: 13px; }
.tsc-club i { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--orange); }
.vbox { border-color: var(--line); border-radius: 4px; }
.vbox .cap { background: #f4f1ed; color: #1a1a1a; font-family: var(--font-display); font-size: 17px; }
.details h2 { font-size: 22px; color: var(--orange); box-shadow: inset 0 -3px 0 var(--orange); display: inline-block; padding: 0 12px 8px; }
.tsc-mail { background: #f4f1ed; margin-top: 36px; }
.tsc-mail .wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; }
.tsc-mail p { margin: 0 12px 0 0; font-size: 13px; line-height: 18px; }
.tsc-mail p b { font: 700 16px/22px var(--font-display); }
.tsc-mail .tf { flex: 1 1 140px; border: 1px solid #8a8a8a; border-radius: 4px; padding: 9px 10px; color: #777; background: #fff; font-size: 14px; }
.tsc-mail .tf-w { flex-basis: 260px; }
.bpfoot.tsc-foot { background: #6f1b10; color: #fff; border-top: 0; margin-top: 0; }
.tsc-foot a, .tsc-foot .flegal, .tsc-foot .flegal a, .tsc-foot .fpl { color: #f1e6e3; }
.tsc-foot .fcols h3 { font: 700 20px/28px var(--font-display); color: #fff; }
@media (max-width: 759px) {
  .promo .plinks, .tstore, .tdeliver, .hicons .tsign span { display: none; }
  .mainbar .wrap { flex-wrap: wrap; gap: 10px; min-height: 0; }
  .wordmark { margin: 0 auto; }
  .hsearch { order: 9; flex-basis: 100%; }
  .phead h1 { font-size: 26px; }
  .tsc-cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 760px) { .fcols { grid-template-columns: repeat(4, 1fr); } }