/* ============================================================
   PINE & PADDLE — "OUTFITTER" THEME · THE OFFER LANDER
   A direct-response storefront in the DMS-funnel tradition:

   · WHITE ground; product photos are cleaned once at import time
     (Admin > Batch Photos trims each onto the white stage) and
     served as plain fast resizes — no per-request processing.
   · Heavy CONDENSED CAPS headings (Oswald — already global),
     Inter for body/UI. No extra font loads at all.
   · ONE campaign FOREST for the offer chrome: the offer banner,
     big offer type, selected toggles and the member column —
     matched to the brand's earthy artwork instead of ad-blue.
   · OUTLINED rectangle CTAs (thin ink borders, square corners);
     the buy path itself is solid ink.
   · Offer-led sections: deal tiles with real from-prices, a
     tabbed product finder (CSS-only), a member-vs-guest table.
     Every number on the page is live store math — the layout
     borrows the funnel pattern, never the claims.

   Loaded AFTER site.css; everything scoped to body.t-of so the
   other themes are untouched. Admin pages never get this class.
   Motion is transform/opacity only and frozen under
   prefers-reduced-motion.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
body.t-of {
  --ink: #111214;           /* near-black */
  --white: #ffffff;
  --gray: #f2f3f5;          /* product-media athletic gray */
  --gray-2: #e8eaed;
  --panel: #f7f8f9;
  --line: #d9dce0;          /* hairline */
  --line-ink: #111214;      /* outlined CTAs / labels */

  --accent: #2e4426;        /* campaign forest as big TEXT (~10:1 on white) */
  --accent-band: #42563d;   /* offer banner ground (bold white copy on it) */
  --accent-lt: #d3ddc8;     /* selected toggle / member column (ink text) */

  /* Remap the shared component tokens so everything re-skins */
  --bg: var(--white);
  --bg-2: var(--gray);
  --bg-3: var(--gray-2);
  --surface: var(--white);
  --surface-2: var(--panel);
  --text: var(--ink);
  --muted: #43464c;         /* ~9:1 on white */
  --muted-2: #5f636b;       /* ~5.6:1 on white — smallest AA text */
  --red: #3f6032;           /* legacy accent usages → readable forest */
  --red-glow: #2e4426;      /* hover: darker, never lighter */
  --rust: #3f6032;
  --pine: #43464c;
  --sage: #43464c;
  --amber: #7a5a04;
  --ok: #1e6b2e;
  --warn: #b3400a;          /* low-stock — real signals only */

  --radius: 2px;            /* squared, printed */
  --radius-lg: 4px;
  --shadow: 0 12px 32px -22px rgba(17, 18, 20, .4);
  --display: "Oswald", "Arial Narrow", sans-serif;
  --stencil: "Oswald", "Arial Narrow", sans-serif;

  background: var(--white);
  color: var(--ink);
}
body.t-of ::selection { background: var(--accent-lt); color: var(--ink); }

/* ---------- 2. Backdrop — plain white ---------- */
body.t-of .sitebg { display: none; }
body.t-of::before, body.t-of::after { content: none; }

/* ---------- 3. Type — heavy condensed caps ---------- */
body.t-of .of-h2,
body.t-of .section__title,
body.t-of .newsletter h2,
body.t-of .modal__info h2,
body.t-of .auth__title,
body.t-of .giveaway__title,
body.t-of .launch-banner__title,
body.t-of .store-empty h3,
body.t-of .listing__head h1,
body.t-of .listing__head h2,
body.t-of .dept__title {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; color: var(--ink);
}
body.t-of .of-h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.08;
  text-align: center; margin: 0 0 .5rem;
}
body.t-of .of-sub { text-align: center; color: var(--ink); margin: 0 0 1.4rem; font-size: .98rem; }
body.t-of .of-sub strong { font-weight: 700; }
body.t-of .section__title { font-size: clamp(1.4rem, 2.6vw, 2rem); }
body.t-of .section__eyebrow,
body.t-of .hero__eyebrow,
body.t-of .filters__group h4,
body.t-of .shop__sort label,
body.t-of .cart-suggest h5 {
  font-family: var(--stencil); text-transform: uppercase; letter-spacing: .18em;
  color: var(--muted-2); font-weight: 600; font-size: .72rem;
}
body.t-of .section__eyebrow::before { background: var(--ink); border-radius: 0; height: 2px; width: 20px; box-shadow: none; }
body.t-of .section__head { border-bottom: none; }
body.t-of .section__link {
  color: var(--ink); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em;
  font-family: var(--display); border-bottom: 2px solid var(--ink); padding-bottom: .1rem;
}
body.t-of .section__link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- 4. Buttons — outlined rectangles; solid ink buy path ---------- */
body.t-of .btn {
  border-radius: var(--radius);
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: .1em; font-weight: 600; font-size: .9rem;
}
body.t-of .btn--primary {
  background: var(--ink); background-image: none;
  color: #fff; border: 1.5px solid var(--ink); box-shadow: none;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
body.t-of .btn--primary::before, body.t-of .btn--primary::after { content: none; }
body.t-of .btn--primary:hover:not(:disabled) {
  background: #2c2e33; border-color: #2c2e33; color: #fff; transform: none; filter: none; box-shadow: none;
}
body.t-of .btn--primary:active:not(:disabled) { transform: translateY(1px); }
body.t-of .btn--buynow {
  background: #fff; color: var(--ink); border: 1.5px solid var(--ink); box-shadow: none;
  transition: background .15s ease, color .15s ease;
}
body.t-of .btn--buynow:hover:not(:disabled) { background: var(--ink); color: #fff; transform: none; filter: none; }
body.t-of .btn--ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--radius); }
body.t-of .btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: none; }
body.t-of .btn.is-added { background: var(--ok); border-color: var(--ok); color: #fff; }
body.t-of .of-btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--ink); border: 1.5px solid var(--ink);
  padding: .9rem 1.6rem; min-height: 48px;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
body.t-of .of-btn-outline:hover { background: var(--ink); color: #fff; }
body.t-of .of-btn-solid {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; border: 1.5px solid var(--ink);
  padding: .9rem 1.6rem; min-height: 48px;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
body.t-of .of-btn-solid:hover { background: #fff; color: var(--ink); }
body.t-of .of-btn-wide { width: min(100%, 30rem); margin: 0 auto; display: flex; }
body.t-of .icon-btn { color: var(--ink); border-radius: var(--radius); }
body.t-of .icon-btn:hover { background: var(--gray); color: var(--ink); }
body.t-of .cart-count { background: var(--ink); color: #fff; font-weight: 700; }

/* ---------- 5. Announcement bar — thin, black ---------- */
body.t-of .announce {
  background: var(--ink); color: #fff; border-bottom: none;
  font-family: "Inter", system-ui, sans-serif; font-weight: 500;
  letter-spacing: .01em; text-transform: none;
}
body.t-of .announce__msg:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 6. Header — minimal white ---------- */
body.t-of .header { background: #fff; backdrop-filter: none; border-bottom: 1px solid var(--line); }
body.t-of .header.scrolled { background: #fff; border-bottom-color: var(--line); box-shadow: 0 4px 16px -12px rgba(17, 18, 20, .35); }
body.t-of .nav__link {
  color: var(--ink); font-family: var(--display); text-transform: uppercase;
  letter-spacing: .1em; font-weight: 600; font-size: .82rem;
}
body.t-of .nav__link::after { background: var(--ink); height: 2px; border-radius: 0; }
body.t-of .nav__link:hover { color: var(--ink); }
body.t-of .nav__link--admin { color: var(--accent); }
body.t-of .logo__k1 {
  color: var(--ink); font-family: var(--display); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 760px) {
  body.t-of .logo__k1 { font-size: 1.02rem; letter-spacing: .04em; }
  body.t-of .logo__sub { letter-spacing: .2em; }
}
/* Small phones (≤360px): this theme's wider display logo pushed the header
   past the viewport — the menu button ended up off-screen. The tagline line
   goes (it also wrapped to two lines at this width) and the lockup tightens,
   so every header control stays reachable. */
@media (max-width: 360px) {
  body.t-of .logo__k1 { font-size: .92rem; letter-spacing: .02em; }
  body.t-of .logo__sub { display: none; }
  body.t-of .header__actions { gap: 0; }
  body.t-of .header__inner { padding-left: .6rem; padding-right: .6rem; }
}
body.t-of .logo__k1 span { color: var(--ink); }
body.t-of .logo__sub { color: var(--muted-2); letter-spacing: .3em; }
body.t-of .searchbar { background: #fff; border-color: var(--line); }
body.t-of .searchbar__inner input { background: var(--gray); border: 1px solid var(--line); color: var(--ink); border-radius: var(--radius); }
body.t-of .searchbar__inner input::placeholder { color: var(--muted-2); }
body.t-of .searchbar__inner input:focus { border-color: var(--ink); }
body.t-of .searchbar kbd { border-color: var(--line); color: var(--muted-2); background: var(--gray); }

body.t-of .mobilemenu { background: #fff; border-left: 1px solid var(--line); }
body.t-of .mobilemenu__links a {
  color: var(--ink); font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
}
body.t-of .mobilemenu__foot { color: var(--muted); border-top: 1px solid var(--line); }
body.t-of .mobilebar { background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 18px -14px rgba(17, 18, 20, .3); }
body.t-of .mobilebar__item { color: var(--muted); }
body.t-of .mobilebar__item:hover { color: var(--ink); }
body.t-of .theme-preview-bar { background: var(--ink); color: #fff; }
body.t-of .theme-preview-bar a { color: var(--accent-lt); }
body.t-of .skip-link { background: var(--ink); color: #fff; }

/* ---------- 7. The offer banner — campaign blue, vertical side labels ---------- */
body.t-of .of-offerbar {
  position: relative; background: var(--accent-band); color: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 1.3rem 3.4rem; text-align: center;
}
body.t-of .of-offerbar__side {
  position: absolute; top: 50%; font-family: "Inter", system-ui, sans-serif;
  font-size: .6rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .9); white-space: nowrap;
}
body.t-of .of-offerbar__side--l { left: .5rem; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; }
body.t-of .of-offerbar__side--r { right: .5rem; transform: translateY(-50%); writing-mode: vertical-rl; }
body.t-of .of-offerbar__big {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.5rem, 4.6vw, 2.6rem); line-height: 1.05; letter-spacing: .02em; margin: 0 0 .3rem;
}
body.t-of .of-offerbar__link {
  color: #fff; font-family: var(--display); font-weight: 600; font-size: .9rem;
  text-transform: uppercase; letter-spacing: .12em;
  text-decoration: underline; text-underline-offset: 4px;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .4rem;
}

/* ---------- 8. Hero — massive condensed type; photo optional ---------- */
body.t-of .of-hero { position: relative; overflow: hidden; background: #fff; }
body.t-of .of-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
body.t-of .of-hero__bg--mob { display: none; }
body.t-of .of-hero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 11, 13, .2), rgba(10, 11, 13, .08) 38%, rgba(10, 11, 13, .12) 58%, rgba(10, 11, 13, .68) 100%);
}
body.t-of .of-hero__content {
  position: relative; max-width: 860px; margin: 0 auto; width: 100%;
  padding: clamp(2.8rem, 8vw, 5rem) 1.5rem clamp(2.4rem, 6vw, 4rem); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
body.t-of .of-hero--photo { min-height: min(72vh, 680px); display: flex; align-items: flex-end; }
body.t-of .of-hero__eyebrow {
  font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: .66rem;
  letter-spacing: .26em; text-transform: uppercase; color: var(--accent);
}
body.t-of .of-hero__title {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(3.2rem, 14vw, 5.8rem); line-height: .94; letter-spacing: .01em;
  color: var(--ink); margin: 0;
}
body.t-of .of-hero__pill {
  display: inline-block; background: var(--accent-band); color: #fff;
  font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: .92rem;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .45rem 1.1rem; border-radius: 999px;
}
body.t-of .of-hero__sub {
  color: var(--muted); font-size: clamp(.98rem, 1.5vw, 1.12rem);
  line-height: 1.55; max-width: 34rem; margin: 0; font-weight: 500;
}
body.t-of .of-hero__ctas { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; margin-top: .2rem; }
body.t-of .of-hero__ctas .btn { min-width: 12.5rem; }
body.t-of .of-hero__proof {
  font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin: .3rem 0 0;
}
@media (max-width: 600px) {
  body.t-of .of-hero__ctas { flex-direction: column; align-items: stretch; width: min(100%, 22rem); }
  body.t-of .of-hero__proof { max-width: 20rem; line-height: 1.8; }
}
/* flat fallback (no photo yet): pure white, the type IS the hero */
body.t-of .of-hero--flat { background: #fff; border-bottom: 1px solid var(--line); }
/* on-photo: white type over the shade */
body.t-of .of-hero--photo .of-hero__eyebrow { color: #fff; opacity: .92; }
body.t-of .of-hero--photo .of-hero__title { color: #fff; text-shadow: 0 2px 26px rgba(0, 0, 0, .45); }
body.t-of .of-hero--photo .of-hero__sub { color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .5); font-weight: 600; }
body.t-of .of-hero--photo .of-hero__proof { color: rgba(255, 255, 255, .88); }
body.t-of .of-hero--photo .of-btn-solid { background: #fff; border-color: #fff; color: var(--ink); }
body.t-of .of-hero--photo .of-btn-solid:hover { background: transparent; color: #fff; }
body.t-of .of-hero--photo .of-btn-outline {
  background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
body.t-of .of-hero--photo .of-btn-outline:hover { background: #fff; color: var(--ink); }

/* ---------- 9. Deal tiles — photo on white, ink name band, live price ----------
   The band is the theme's signature move: the photo stays clean on its white
   stage, the category name sits on a solid ink bar (readable over ANY photo),
   and the price row below never collides with anything by construction. */
body.t-of .of-deals__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; max-width: 980px; margin: 0 auto; }
body.t-of .of-deal {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); color: var(--ink); overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
body.t-of .of-deal:hover { border-color: var(--ink); box-shadow: var(--shadow); transform: translateY(-2px); }
body.t-of .of-deal__media { display: block; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
body.t-of .of-deal__media img {
  width: 100%; height: 100%; object-fit: contain; padding: .25rem;
  background: #fff; transform: scale(1.18); transition: transform .35s ease;
}
body.t-of .of-deal:hover .of-deal__media img { transform: scale(1.24); }
body.t-of .of-deal__band {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  background: var(--ink); color: #fff; padding: .6rem .8rem;
}
body.t-of .of-deal__bandname {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: .84rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.t-of .of-deal__arrow { flex: 0 0 auto; font-size: 1rem; line-height: 1; transition: transform .18s ease; }
body.t-of .of-deal:hover .of-deal__arrow { transform: translateX(4px); }
body.t-of .of-deal__meta {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .55rem .8rem .65rem;
}
body.t-of .of-deal__meta strong { font-family: var(--display); font-weight: 700; letter-spacing: .03em; font-size: 1.05rem; }
body.t-of .of-deal__meta em {
  font-style: normal; font-size: .6rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); background: var(--accent-lt);
  padding: .24rem .45rem; white-space: nowrap;
}
body.t-of .of-deal__meta strong s { color: var(--muted-2); font-size: .85rem; margin-right: .3rem; }
@media (max-width: 760px) {
  body.t-of .of-deal__bandname { font-size: .7rem; letter-spacing: .08em; }
  body.t-of .of-deal__meta { flex-direction: column; align-items: flex-start; gap: .35rem; }
  body.t-of .of-deal__meta strong { font-size: 1rem; white-space: nowrap; }
  body.t-of .of-deal__meta em { font-size: .56rem; padding: .2rem .35rem; }
}
/* kit variant: white ruled card with its own stacked layout */
body.t-of .of-deal--kit { border: 1.5px solid var(--ink); padding: 1rem 1.1rem; gap: .5rem; }
body.t-of .of-deal--kit:hover { transform: none; box-shadow: none; }
body.t-of .of-deal__name {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; font-size: 1.1rem; color: var(--ink);
}
body.t-of .of-deal__kititems { color: var(--muted); font-size: .85rem; line-height: 1.45; }
body.t-of .of-deal--kit .of-deal__meta { padding: 0; flex-direction: column; align-items: flex-start; gap: .15rem; }
body.t-of .of-deal--kit .of-deal__meta em { color: var(--ok); background: transparent; padding: 0; }

/* ---------- 10. Product finder — CSS-only tabs ---------- */
body.t-of .of-finder__tabs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem;
  max-width: 760px; margin: 0 auto 1.6rem;
}
@media (min-width: 761px) { body.t-of .of-finder__tabs { grid-template-columns: repeat(4, 1fr); } }
body.t-of .of-finder__tab { position: relative; display: flex; }
body.t-of .of-finder__tab input { position: absolute; opacity: 0; inset: 0; }
body.t-of .of-finder__tab span {
  display: flex; flex: 1; align-items: center; justify-content: center; min-height: 48px;
  background: var(--panel); color: var(--muted); cursor: pointer;
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: .82rem; text-align: center; padding: .4rem .6rem;
  border: 1px solid transparent; transition: background .15s ease, color .15s ease;
}
body.t-of .of-finder__tab:hover span { color: var(--ink); }
body.t-of .of-finder__tab:has(input:checked) span { background: var(--accent-lt); color: var(--ink); }
body.t-of .of-finder__tab:has(input:focus-visible) span { outline: 3px solid var(--accent); outline-offset: 2px; }
body.t-of .of-finder__panel { max-width: 900px; margin: 0 auto; }
/* modern browsers: show only the checked panel; without :has all panels stack */
@supports selector(:has(input)) {
  body.t-of .of-finder__panel { display: none; }
  body.t-of .of-finder:has(#of-f-tees:checked) #of-fp-tees,
  body.t-of .of-finder:has(#of-f-hoodies:checked) #of-fp-hoodies,
  body.t-of .of-finder:has(#of-f-longsleeve:checked) #of-fp-longsleeve,
  body.t-of .of-finder:has(#of-f-hats:checked) #of-fp-hats,
  body.t-of .of-finder:has(#of-f-outerwear:checked) #of-fp-outerwear,
  body.t-of .of-finder:has(#of-f-accessories:checked) #of-fp-accessories { display: block; }
}
body.t-of .of-finder__name {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  text-align: center; margin: 0 0 1.1rem; color: var(--ink);
}
body.t-of .of-finder__body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.2rem; align-items: center; margin-bottom: 1.2rem; }
body.t-of .of-finder__media { display: block; background: #fff; }
body.t-of .of-finder__media img { width: 100%; height: auto; max-height: 420px; object-fit: contain; background: #fff; }
body.t-of .of-finder__feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
body.t-of .of-finder__feats li {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; font-size: .84rem; color: var(--ink); line-height: 1.3;
}
body.t-of .of-check {
  flex: 0 0 auto; width: 20px; height: 20px; padding: 2px;
  color: var(--accent); background: var(--accent-lt); border-radius: 50%;
}
@media (max-width: 760px) {
  body.t-of .of-finder__body { grid-template-columns: 1.1fr 1fr; gap: .8rem; }
  body.t-of .of-finder__feats { gap: .8rem; }
  body.t-of .of-finder__feats li { font-size: .72rem; }
}

/* ---------- 11. Big offer band — blue type on white ---------- */
body.t-of .of-bigoffer {
  text-align: center; padding: clamp(2.4rem, 6vw, 4rem) 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fdfdfd, var(--gray));
}
body.t-of .of-bigoffer__pill { margin-bottom: .2rem; }
body.t-of .of-bigoffer__big {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.7rem, 5.2vw, 3rem); line-height: 1.05; letter-spacing: .02em;
  color: var(--accent); margin: 0; max-width: 22ch;
}
body.t-of .of-bigoffer__note {
  font-family: "Inter", system-ui, sans-serif; font-size: .82rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem;
}

/* ---------- 12. Review cards — creator-card style, real only ---------- */
body.t-of .of-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 1100px; margin: 0 auto; }
body.t-of .of-review {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.2rem 1.3rem; margin: 0; display: flex; flex-direction: column; gap: .55rem;
}
body.t-of .of-review__head { display: flex; align-items: center; gap: .7rem; }
body.t-of .of-review__head span { display: flex; flex-direction: column; }
body.t-of .of-review__head strong { color: var(--ink); font-weight: 700; font-size: .92rem; }
body.t-of .of-review__head small { color: var(--muted-2); font-size: .74rem; }
body.t-of .of-review__avatar {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-band); color: #fff; display: flex !important;
  align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 1.2rem;
}
body.t-of .of-review__stars { color: #8a6a12; letter-spacing: .1em; font-size: .9rem; }
body.t-of .of-review blockquote { font-size: .95rem; line-height: 1.55; color: var(--ink); margin: 0; border: none; padding: 0; }
body.t-of .of-review__prod {
  color: var(--accent); font-weight: 600; font-size: .84rem;
  display: inline-flex; align-items: center; min-height: 44px;
}
body.t-of .of-review__prod:hover { text-decoration: underline; }
@media (max-width: 760px) { body.t-of .of-reviews__grid { grid-template-columns: 1fr; } }

/* ---------- 13. Collections grid — photo + outlined label ---------- */
body.t-of .of-collections__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem .8rem;
  max-width: 980px; margin: 0 auto;
}
body.t-of .of-col {
  display: flex; flex-direction: column; color: var(--ink);
  border: 1px solid var(--line); background: #fff; overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
body.t-of .of-col:hover { border-color: var(--ink); box-shadow: var(--shadow); }
body.t-of .of-col { overflow: hidden; }
body.t-of .of-col img {
  width: 100%; height: 150px; object-fit: contain; background: #fff;
  padding: .2rem; transform: scale(1.16); transition: transform .25s ease;
}
@media (max-width: 760px) { body.t-of .of-col img { height: 110px; } }
body.t-of .of-col:hover img { transform: scale(1.22); }
body.t-of .of-col__label {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 44px; border-top: 1px solid var(--line); padding: .35rem .65rem; flex: 1;
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; font-size: .74rem; line-height: 1.25; text-align: left;
}
body.t-of .of-col__label::after { content: "→"; flex: 0 0 auto; transition: transform .18s ease; }
@media (max-width: 760px) { body.t-of .of-col__label { font-size: .64rem; letter-spacing: .05em; padding: .35rem .5rem; } }
body.t-of .of-col:hover .of-col__label::after { transform: translateX(3px); }

/* ---------- 14. Member comparison table — every row true ---------- */
body.t-of .of-compare { max-width: 780px; margin-left: auto; margin-right: auto; }
body.t-of .of-compare__wrap { overflow-x: auto; margin-bottom: 1.4rem; }
body.t-of .of-compare__table { width: 100%; border-collapse: collapse; font-size: .9rem; }
body.t-of .of-compare__table th, body.t-of .of-compare__table td { padding: .85rem .7rem; border-bottom: 1px solid var(--line); }
body.t-of .of-compare__table thead th {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; font-size: .8rem; text-align: center; border-bottom: 2px solid var(--ink);
}
body.t-of .of-compare__table tbody th { text-align: left; font-weight: 500; color: var(--ink); line-height: 1.4; }
body.t-of .of-compare__table td { text-align: center; font-weight: 700; font-size: 1.05rem; width: 5.5rem; }
body.t-of .of-compare__crew { background: var(--accent-lt); }
body.t-of .of-yes { color: var(--ok); }
body.t-of .of-no { color: var(--muted-2); font-weight: 500; }
body.t-of .of-compare__math th { font-weight: 700; }
body.t-of .of-compare__math td { font-family: var(--display); font-size: 1.15rem; white-space: nowrap; }
body.t-of .of-compare__math td:last-child { color: var(--muted-2); }

/* ---------- 14b. Rewards explainer — black band, ruled rows ---------- */
body.t-of .of-works {
  background: var(--ink); color: #fff; text-align: center;
  padding: clamp(2.6rem, 6vw, 4.5rem) 1.5rem;
  display: flex; flex-direction: column; align-items: center;
}
body.t-of .of-works__title {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: clamp(1.6rem, 4.4vw, 2.5rem); line-height: 1.1;
  color: #fff; margin: 0 0 .8rem;
}
body.t-of .of-works__lead { color: rgba(255, 255, 255, .85); max-width: 40rem; margin: 0 0 1.6rem; line-height: 1.6; }
body.t-of .of-works__row {
  max-width: 40rem; width: 100%; padding: 1.35rem 0; text-align: left;
  border-top: 1px solid rgba(255, 255, 255, .22);
  display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.1rem; align-items: start;
}
body.t-of .of-works__num {
  grid-row: 1 / span 2; min-width: 2.5rem; padding-top: .1rem;
  font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1;
  color: var(--accent-lt);
}
body.t-of .of-works__row h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.02rem;
  color: #fff; margin: 0; text-transform: uppercase; letter-spacing: .08em;
}
body.t-of .of-works__row p { color: rgba(255, 255, 255, .78); line-height: 1.6; margin: 0; font-size: .95rem; }
body.t-of .of-works__cta { margin-top: 1.5rem; background: #fff; border-color: #fff; color: var(--ink); }
body.t-of .of-works__cta:hover { background: transparent; color: #fff; }

/* ---------- 14c. Values — light band, accordion rows ---------- */
body.t-of .of-values__list { max-width: 760px; margin: 1.2rem auto 0; }
body.t-of .of-values__list details {
  background: var(--panel); border: none; border-bottom: 2px solid #fff;
  border-radius: 0; box-shadow: none; padding: 1.05rem 1.1rem;
}
body.t-of .of-values__list summary {
  font-family: var(--display); font-weight: 600; color: var(--ink);
  text-transform: uppercase; letter-spacing: .05em; font-size: 1rem;
  cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  list-style: none; min-height: 32px;
}
body.t-of .of-values__list summary::-webkit-details-marker { display: none; }
body.t-of .of-values__list details p { color: var(--muted); padding-top: .7rem; line-height: 1.65; }
body.t-of .of-values__list details a { color: var(--accent); font-weight: 600; }
body.t-of .of-values__list details[open] .of-faq__chev { transform: rotate(90deg); }

/* ---------- 15. FAQ — thin-ruled list ---------- */
body.t-of .of-faq__list { max-width: 760px; margin: 1.4rem auto 0; border-top: 2px solid var(--ink); }
body.t-of .of-faq__list details {
  background: transparent; border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; box-shadow: none; padding: 1.05rem .2rem;
}
body.t-of .of-faq__list summary {
  font-family: "Inter", system-ui, sans-serif; font-weight: 600; color: var(--ink);
  cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; list-style: none;
  min-height: 28px;
}
body.t-of .of-faq__list summary::-webkit-details-marker { display: none; }
body.t-of .of-faq__chev { color: var(--ink); font-size: 1.3rem; transition: transform .2s; }
body.t-of .of-faq__list details[open] .of-faq__chev { transform: rotate(90deg); }
body.t-of .of-faq__list details p { color: var(--muted); padding-top: .7rem; line-height: 1.65; }
body.t-of .of-faq__list details a { color: var(--accent); font-weight: 600; }

/* ---------- 16. Product cards (grids/related) ---------- */
body.t-of .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; overflow: hidden; transition: box-shadow .18s ease, border-color .18s ease; }
body.t-of .card::before, body.t-of .card::after { content: none; }
body.t-of .card:hover, body.t-of .card:focus-within { transform: none; border-color: var(--ink); box-shadow: var(--shadow); }
body.t-of .card:hover .card__media img { transform: scale(1.03); }
body.t-of .card__media { background: #fff; border-bottom: 1px solid var(--line); }
body.t-of .card__media img { background: #fff; transition: transform .3s ease; }
body.t-of .card__brand { color: var(--muted-2); text-transform: uppercase; letter-spacing: .14em; font-size: .64rem; }
body.t-of .card__name { font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: .95rem; text-transform: none; letter-spacing: 0; }
body.t-of .card__name, body.t-of .card__name-link,
body.t-of .card__name-link:visited, body.t-of .card__name-link h3 { color: var(--ink); }
body.t-of .card__name-link:hover { color: var(--accent); }
body.t-of .card__price strong { color: var(--ink); font-family: var(--display); font-weight: 700; }
body.t-of .card__price s { color: var(--muted-2); }
body.t-of .card__save { background: var(--accent); color: #fff; border: none; border-radius: 2px; font-weight: 700; }
body.t-of .card__ship { color: var(--ok); font-weight: 600; }
body.t-of .card__drop { color: var(--accent); }
body.t-of .card__quick { background: var(--ink); color: #fff; border: none; border-radius: 2px; backdrop-filter: none; }
body.t-of .card__quick:hover { background: #2c2e33; color: #fff; }
body.t-of .card__wish { background: rgba(255, 255, 255, .95); border: 1px solid var(--line); color: var(--ink); border-radius: 50%; }
body.t-of .card__wish.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
body.t-of .stars { color: #8a6a12; }
body.t-of .stock--low { color: var(--warn); }
body.t-of .badge { border-radius: 2px; border: none; font-family: var(--display); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
body.t-of .badge--new { background: var(--ink); color: #fff; }
body.t-of .badge--sale { background: var(--accent); color: #fff; }
body.t-of .card__soldout { background: rgba(17, 18, 20, .85); color: #fff; border: none; }
body.t-of .card__qadd-l { color: var(--muted-2); }
body.t-of .card__sizes { color: var(--muted-2); font-size: .8rem; }
body.t-of .card__size { border: 1px solid var(--ink); background: #fff; color: var(--ink); border-radius: 2px; font-weight: 600; }
body.t-of .card__size:hover:not(:disabled) { background: var(--ink); color: #fff; }
body.t-of .card__size:disabled, body.t-of .card__size.is-oos { border-color: var(--line); color: var(--muted-2); }
body.t-of .card__swatch { border: 1px solid rgba(17, 18, 20, .3); }
body.t-of .cat-card { background: var(--gray); border: none; border-radius: var(--radius-lg); box-shadow: none; }
body.t-of .cat-card::before { content: none; }
body.t-of .cat-card:hover { transform: none; box-shadow: var(--shadow); }
body.t-of .cat-card__overlay { background: linear-gradient(180deg, transparent 40%, rgba(17, 18, 20, .72)); }
body.t-of .cat-card__name { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
body.t-of .cat-card--plain .cat-card__name { color: var(--ink); }
body.t-of .cat-card__blurb { color: var(--muted); }
body.t-of .cat-card--photo .cat-card__blurb { color: rgba(255, 255, 255, .88); }
body.t-of .cat-card__count { color: var(--muted-2); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 700; }

/* ---------- 17. Shop chrome — filters, sort, chips ---------- */
body.t-of .filters { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; }
body.t-of .filters__group { border-bottom: 1px solid var(--line); }
body.t-of .check input, body.t-of .price-range input[type=range] { accent-color: var(--ink); }
body.t-of .shop__bar { border-bottom: 2px solid var(--ink); }
body.t-of .shop__count { color: var(--muted); font-weight: 600; }
body.t-of .shop__sort select, body.t-of .listing__sort select { background: #fff; border: 1.5px solid var(--ink); color: var(--ink); border-radius: 2px; font-weight: 600; }
body.t-of .shop__sort select:focus { border-color: var(--accent); }
body.t-of .price-range__labels { color: var(--muted-2); }
body.t-of .empty, body.t-of .store-empty { color: var(--muted); }
body.t-of .section--shop { background: transparent; }
body.t-of .chip {
  border-radius: 2px; border: 1.5px solid var(--ink); background: #fff; color: var(--ink);
  font-family: "Inter", system-ui, sans-serif; text-transform: none; letter-spacing: 0; font-weight: 600;
  min-height: 44px; display: inline-flex; align-items: center;
}
body.t-of .chip:hover { color: var(--ink); border-color: var(--ink); background: var(--gray); }
body.t-of .chip--on { color: var(--ink); background: var(--accent-lt); border-color: var(--ink); font-weight: 700; }
body.t-of .listing__intro { color: var(--muted); }
body.t-of .crumbs, body.t-of .pd-crumbs { color: var(--muted-2); }
body.t-of .crumbs a:hover, body.t-of .pd-crumbs a:hover { color: var(--accent); }
body.t-of .shop-trust { border: 1px solid var(--line); background: #fff; border-radius: var(--radius-lg); }
body.t-of .shop-trust svg { color: var(--ink); }
body.t-of .dept { border-bottom: 1px solid var(--line); }
body.t-of .dept__blurb { color: var(--muted); }
body.t-of .dept__more { color: var(--accent); font-weight: 700; }
body.t-of .listing-journal { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }

/* Mobile: the filter panel is a real bottom sheet (CSS-only; the "Done"
   button inside the outfitter home markup closes it). */
@media (max-width: 760px) {
  body.t-of .filters {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 520;
    display: block; margin: 0; border-radius: 0;   /* squared, like the drawers */
    border: 1px solid var(--line); border-bottom: none;
    max-height: 74vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 1rem 1.2rem calc(1rem + env(safe-area-inset-bottom));
    transform: translateY(108%); transition: transform .28s ease;
    box-shadow: 0 -18px 50px -20px rgba(17, 18, 20, .5);
    pointer-events: none; visibility: hidden;
  }
  body.t-of .filters.open { transform: none; pointer-events: auto; visibility: visible; }
  body.t-of .filters::before {
    content: ""; display: block; width: 44px; height: 4px; border-radius: 2px;
    background: var(--line); margin: 0 auto .9rem;
  }
  body.t-of .of-filters-close { display: block; width: 100%; margin-top: .4rem; }
}
body.t-of .of-filters-close { display: none; }

/* ---------- 18. Product page — the money page ---------- */
body.t-of .pd-main { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
body.t-of .pd-main img { background: #fff; }
body.t-of .pd-thumb { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
body.t-of .pd-thumb img { background: #fff; }
body.t-of .pd-thumb.active, body.t-of .pd-thumb:hover { border-color: var(--ink); border-width: 2px; }
body.t-of .pd-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.12; }
body.t-of .pd-price strong { font-family: var(--display); font-weight: 700; }
body.t-of .pd-price .price-was { color: var(--muted-2); }
body.t-of .pd-price__badge { background: var(--accent); color: #fff; border-radius: 2px; font-weight: 700; }
body.t-of .pd-ship { color: var(--muted); }
body.t-of .pd-ship strong { color: var(--ink); }
body.t-of .pdp-points a { color: var(--accent); }
body.t-of .bnpl { color: var(--muted-2); }
body.t-of .pd-stock.in { color: var(--ok); }
body.t-of .pd-stock.out { color: var(--warn); }
body.t-of .pd-delivery strong { color: var(--ink); }
body.t-of .opt__label { color: var(--ink); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; }
body.t-of .opt__guide {
  color: var(--accent); font-weight: 600; text-decoration: underline; text-transform: none; letter-spacing: 0;
  text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center;
}
body.t-of .opt-btn {
  border: 1.5px solid var(--ink); background: #fff; color: var(--ink);
  border-radius: var(--radius); min-width: 48px; min-height: 44px; font-weight: 600;
}
body.t-of .opt-btn:hover { background: var(--gray); }
body.t-of .opt-btn.is-on { border-color: var(--ink); background: var(--ink); color: #fff; }
body.t-of .opt-btn.is-oos { color: var(--muted-2); background: var(--gray); border-color: var(--line); }
body.t-of .opt-btn.is-oos.is-on { border-color: var(--muted-2); background: var(--gray); color: var(--muted-2); }
body.t-of .swatch { outline-color: var(--line); }
body.t-of .swatch.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
body.t-of .pd-wish { color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; gap: .3rem; }
body.t-of .pd-wish:hover { color: var(--accent); }
body.t-of .pd-express-note { color: var(--muted-2); }
body.t-of .pd-promise__line { color: var(--muted); }
body.t-of .pd-promise__line strong { color: var(--ink); }
body.t-of .pd-promise__line svg { color: var(--ink); }
body.t-of .pd-perks__link { color: var(--accent); }
body.t-of .pd-notify { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
body.t-of .pd-notify input { background: #fff; border: 1.5px solid var(--ink); color: var(--ink); border-radius: var(--radius); }
body.t-of .pd-drop { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
body.t-of .pd-drop__label { color: var(--accent); }
body.t-of .pd-drop__countdown { color: var(--ink); font-family: var(--display); font-weight: 700; }
body.t-of .pd-fabric, body.t-of .pd-care { background: transparent; border: none; }
body.t-of .fitments__label {
  font-family: var(--stencil); text-transform: uppercase; letter-spacing: .16em;
  color: var(--muted-2); font-weight: 600;
}
body.t-of .pd-fabric__row { border-bottom: 1px solid var(--line); }
body.t-of .pd-fabric__row dt { color: var(--muted-2); }
body.t-of .pd-fabric__row dd { color: var(--ink); font-weight: 600; }
body.t-of .pd-care__list { color: var(--muted); }
body.t-of .pd-zoomhint { background: var(--ink); color: #fff; border-radius: 2px; }
body.t-of .pd-lightbox { background: rgba(17, 18, 20, .94); }
body.t-of .pd-urgency__bar { background: var(--gray-2); }
body.t-of .pd-urgency__bar span { background: var(--accent); }
body.t-of .pd-urgency small { color: var(--warn); }
body.t-of .specs li { border-bottom: 1px solid var(--line); }
body.t-of .specs li span { color: var(--muted-2); font-family: var(--stencil); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; }
body.t-of .specs li strong { font-weight: 600; }
body.t-of .pd-h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
body.t-of .pd-desc p { color: var(--muted); }
body.t-of .pd-desc a { color: var(--accent); }

/* Spec/fit/care accordions (markup is theme-gated in Product.cshtml). */
body.t-of .of-acc { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); padding: 0; margin-top: .8rem; }
body.t-of .of-acc + .of-acc { border-top: none; margin-top: 0; }
body.t-of .of-acc summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .95rem .1rem; min-height: 44px;
  font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink); font-size: .9rem;
}
body.t-of .of-acc summary::-webkit-details-marker { display: none; }
body.t-of .of-acc summary::after { content: "+"; color: var(--ink); font-size: 1.25rem; font-weight: 500; line-height: 1; }
body.t-of .of-acc[open] summary::after { content: "–"; }
body.t-of .of-acc > *:not(summary) { padding-bottom: 1rem; }
body.t-of .of-acc .fitments__label { display: none; }
body.t-of .of-acc .pd-fabric, body.t-of .of-acc .pd-care { margin: 0; }
body.t-of .pd-specs > .pd-h2 { display: none; }
body.t-of .pd-specs .of-acc { margin-top: 0; }

/* Reviews on the PDP */
body.t-of .pd-reviews__avg { color: var(--muted); }
body.t-of .review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
body.t-of .review__stars { color: #8a6a12; }
body.t-of .review blockquote { color: var(--ink); }
body.t-of .review figcaption { color: var(--muted-2); }
body.t-of .review figcaption strong { color: var(--ink); }
body.t-of .review-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
body.t-of .pd-reviews__note { color: var(--muted); }
body.t-of .pd-reviews__note a { color: var(--accent); }

/* Size-guide + fit-recommender dialogs */
body.t-of .pd-sizeguide__card, body.t-of .fitrec__card {
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: 0 30px 80px -30px rgba(17, 18, 20, .6);
}
body.t-of .pd-sizeguide__table th { background: var(--ink); color: #fff; }
body.t-of .pd-sizeguide__table td, body.t-of .pd-sizeguide__table th { border-color: var(--line); }
body.t-of .pd-sizeguide__note, body.t-of .pd-sizeguide__guarantee { color: var(--muted); }
body.t-of .pd-sizeguide__more a { color: var(--accent); }
body.t-of .pd-sizeguide__close, body.t-of .fitrec__close { background: #fff; border: 1px solid var(--line); color: var(--ink); border-radius: 50%; min-width: 44px; min-height: 44px; }
body.t-of .fitrec__lead { color: var(--muted); }
body.t-of .fitrec__field input, body.t-of .fitrec__field select { background: #fff; border: 1.5px solid var(--ink); color: var(--ink); border-radius: var(--radius); }
body.t-of .fitrec__result { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }

/* Sticky mobile buy bar */
body.t-of .pd-sticky { background: rgba(255, 255, 255, .98); backdrop-filter: blur(8px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -18px rgba(17, 18, 20, .45); }
body.t-of .pd-sticky__thumb { background: #fff; border: 1px solid var(--line); }
body.t-of .pd-sticky__name { color: var(--muted); }
body.t-of .pd-sticky__price { color: var(--ink); font-family: var(--display); font-weight: 700; }


/* ---------- 18b. PDP below the buy button — "THE MANIFEST" ----------
   .pd-delivery / .pd-cutoff / .pd-ship / .pd-promise are siblings that can't be
   reparented (the markup is shared by five themes), so they're welded into one
   ruled document by hairlines and shared alignment rather than by a fill — the
   .pd-info flex gap would stripe any background. Zero boxes, zero radii, zero
   dashes. The multi-buy band is the ONE fill, and it closes the region.
   The delivery DATE is the only thing promoted; everything else is demoted. */

/* --- every box in the region, gone --------------------------------------- */
body.t-of .pd-promise,
body.t-of .pd-multibuy,
body.t-of .bnpl { background: none; border: 0; border-radius: 0; padding: 0; }

/* --- the decorative glyphs ------------------------------------------------
   Hidden deliberately, not by oversight. The region now carries ONE label
   device — the Oswald micro-cap (kicker / returns lead-in / colophon) — and an
   icon column beside it would be a second label system in a 32px row. */
body.t-of .pd-multibuy__icon,
body.t-of .pd-cutoff__icon,
body.t-of .pd-promise__line svg { display: none; }

/* --- 1 · ARRIVES — the region's headline ---------------------------------- */
body.t-of .pd-delivery { margin: 0; color: var(--muted); }
body.t-of .pd-delivery:empty { display: none; }   /* empty until JS fills it */
body.t-of .pd-delivery__lead {
  display: block;
  font-family: var(--stencil); font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  font-size: .64rem; line-height: 1.4; color: var(--muted-2);
  margin-bottom: .1rem;
}
body.t-of .pd-delivery strong {
  display: block;
  font-family: var(--display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.06;
  font-size: clamp(1.05rem, 4.6vw, 1.32rem); color: var(--ink);
}

/* --- 2 · the cutoff — a real dispatch fact, plainly set -------------------
   Both <strong>s stay the SAME colour and weight 500 on purpose: this is a
   dispatch cutoff, not a sale timer. Do not tint it. */
body.t-of .pd-cutoff {
  display: block; margin: 0; border: 0;
  font-size: .74rem; line-height: 1.5; font-weight: 400; color: var(--muted-2);
}
body.t-of .pd-cutoff[hidden] { display: none; }  /* ships hidden; beats the rule above */
body.t-of .pd-cutoff strong { color: var(--muted-2); font-weight: 500; }

/* --- 3 · the shipping row ------------------------------------------------
   :not(.pdp-points) matters — the rewards line carries BOTH classes. */
body.t-of .pd-ship:not(.pdp-points) { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--muted); }
body.t-of .pd-ship:not(.pdp-points) strong { color: var(--ink); font-weight: 600; }

/* --- 4 · dispatch promise → fine print under SHIPPING --------------------- */
body.t-of .pd-promise__line:nth-child(1) { font-size: .74rem; line-height: 1.5; color: var(--muted-2); }
body.t-of .pd-promise__line:nth-child(1) strong { color: var(--muted); font-weight: 600; }

/* --- 5 · RETURNS — its own copy becomes the label ------------------------- */
body.t-of .pd-promise__line:nth-child(2) { font-size: .82rem; line-height: 1.5; color: var(--muted); }
body.t-of .pd-promise__line:nth-child(2) strong {
  display: block;
  font-family: var(--stencil); font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  font-size: .64rem; line-height: 1.4; color: var(--muted-2);
  margin-bottom: .12rem;
}

/* --- 6 · the colophon ----------------------------------------------------- */
body.t-of .pd-promise__line:nth-child(3) {
  display: block; text-align: center;
  font-family: var(--stencil); font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em;
  font-size: .64rem; line-height: 1.4; color: var(--muted-2);
}

/* --- 7 · rewards — the quietest row --------------------------------------- */
body.t-of .pdp-points { margin: 0; font-size: .74rem; line-height: 1.5; color: var(--muted-2); }
body.t-of .pdp-points strong { color: var(--muted); font-weight: 600; }

/* --- 8 · THE OFFER — the only fill in the region -------------------------- */
body.t-of .pd-multibuy {
  position: relative; display: block;
  background: var(--accent-band); color: #fff;
  border: 0; border-radius: 0;
  padding: .78rem .9rem .82rem; min-height: 52px;
  font-size: .9rem; font-weight: 400;
}
body.t-of .pd-multibuy__head {
  display: block;
  font-family: var(--display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; line-height: 1.15;
  font-size: 1rem; color: #fff;
}
body.t-of .pd-multibuy__head strong { color: #fff; font-weight: inherit; }
body.t-of .pd-multibuy__body {
  display: block; margin-top: .18rem;
  font-size: .76rem; line-height: 1.45; color: rgba(255, 255, 255, .88);
}
body.t-of .pd-multibuy__cta {
  display: inline-flex; align-items: center; min-height: 44px; margin: -.15rem 0 -.3rem;
  font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; font-size: .78rem;
  color: var(--accent-lt);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: color .15s ease;
}
body.t-of .pd-multibuy__cta:hover { color: #fff; }
/* The whole band is the tap target — safe only while this stays the single
   interactive element inside .pd-multibuy. */
body.t-of .pd-multibuy__cta::after { content: ""; position: absolute; inset: 0; }
body.t-of .pd-multibuy:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }

/* --- 9 · meta cluster ----------------------------------------------------- */
body.t-of .bnpl { display: block; font-size: .74rem; line-height: 1.45; color: var(--muted-2); }
body.t-of .bnpl strong { color: var(--muted); font-weight: 600; }

/* --- 10 · save for later — a quiet text link, never a third CTA ------------
   font-size: 0 eats the bare ♥ text node without touching shared markup;
   gap: 0 removes the phantom space it leaves behind. */
body.t-of .pd-wish {
  align-self: start; gap: 0; font-size: 0;
  min-height: 44px; padding: .5rem 0; margin: 0;
}
body.t-of .pd-wish > span {
  font-family: var(--stencil); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .7rem; color: var(--muted-2);
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
body.t-of .pd-wish:hover > span,
body.t-of .pd-wish.is-on > span { color: var(--accent); text-decoration-color: var(--accent); }

/* --- 11 · in-sentence links (WCAG 2.5.8 inline-text exception) ------------- */
body.t-of .pdp-points a,
body.t-of .pd-perks__link {
  color: var(--accent); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  padding: .45rem 0; margin: -.45rem 0;
}
body.t-of .pd-info :is(a, button):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  body.t-of .pd-multibuy__cta,
  body.t-of .pd-wish > span { transition: none; }
}

/* --- 12 · DESKTOP keeps the ruled language without the weld ---------------- */
@media (min-width: 761px) {
  body.t-of .pd-promise {
    display: flex; flex-direction: column; gap: .5rem;
    margin: .9rem 0 .2rem; padding: .8rem 0;
    border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line);
  }
}

/* Mobile PDP: the buy decision fits one 375px screen —
   photo (capped), name, price, size, Add to Cart, in that order. */
@media (max-width: 760px) {
  body.t-of .announce { font-size: .72rem; line-height: 1.3; height: auto; min-height: 0; }
  body.t-of .announce__msg {
    padding: .3rem .8rem; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 100%; display: block;
  }
  body.t-of .header__inner { padding-top: .45rem; padding-bottom: .45rem; }
  body.t-of .pd-crumbs { display: none; }
  body.t-of .pd { padding-top: .4rem; }
  body.t-of .pd-grid { gap: 1rem; }
  body.t-of .pd-gallery { position: relative; top: 0; margin-bottom: .35rem; }
  body.t-of .pd-main { aspect-ratio: auto; height: min(30vh, 240px); }
  /* the swipe strip overlays the photo's white margin instead of stacking
     below it — keeps Add to Cart inside the first screen even with a gallery */
  body.t-of .pd-thumbs {
    position: absolute; left: .4rem; right: .4rem; bottom: .4rem; z-index: 2;
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; padding-bottom: 0; margin: 0;
  }
  body.t-of .pd-thumbs::-webkit-scrollbar { display: none; }
  body.t-of .pd-thumb {
    flex: 0 0 auto; width: 48px; height: 48px; scroll-snap-align: start;
    background: rgba(255, 255, 255, .94);
  }
  body.t-of .pd-info { gap: .3rem; }
  body.t-of .pd-title { margin: 0; font-size: 1.35rem; }
  body.t-of .pd-price { margin: 0; }
  body.t-of .pd-price strong { font-size: 1.45rem; }
  body.t-of .pd-stock { margin: 0; font-size: .82rem; }
  body.t-of .opt { margin: .15rem 0 0; }
  body.t-of .opt__label {
    display: flex; align-items: center; gap: .55rem; flex-wrap: nowrap;
    font-size: .78rem; margin-bottom: .3rem; min-height: 24px;
  }
  body.t-of .opt__guide {
    font-size: .76rem; white-space: nowrap;
    min-height: 44px; padding: .6rem .2rem; margin: -.6rem 0;
  }
  body.t-of .opt-btn { min-height: 44px; min-width: 46px; padding: .5rem .7rem; }
  body.t-of .pd-express-note { font-size: .68rem; margin: 0; }
  body.t-of .pd-info > * { order: 20; }
  body.t-of .pd-info > .card__brand { display: none; }
  body.t-of .pd-info > .pd-title { order: 2; font-size: 1.42rem; }
  body.t-of .pd-info > .card__rating { order: 3; }
  body.t-of .pd-info > .pd-price { order: 4; }
  body.t-of .pd-price strong { font-size: 1.4rem; }
  body.t-of .pd-info > .pd-stock { order: 5; }
  body.t-of .pd-info > .pd-options { order: 6; margin: .2rem 0 .1rem; }
  body.t-of .pd-info > .pd-actions { order: 7; }
  body.t-of .pd-info > .pd-drop { order: 6; }
  /* THE MANIFEST, welded and sequenced. .pd-promise becomes display:contents
     HERE ONLY, so its three lines become direct flex items of .pd-info and can
     be interleaved between the shipping row and the rewards row. `>` still
     walks the real DOM, so `.pd-info > *` can never reach them. */
  body.t-of .pd-promise { display: contents; }

  /* ARRIVES opens the manifest on the theme's own 2px section rule. */
  body.t-of .pd-info > .pd-delivery {
    order: 8; margin-top: .55rem; padding: .62rem 0 .1rem;
    border-top: 2px solid var(--ink);
  }
  /* Out of stock / drop / JS off: .pd-delivery is absent or empty, so the
     manifest opens on the shipping row instead. */
  body.t-of .pd-info:not(:has(.pd-delivery:not(:empty))) > .pd-ship:not(.pdp-points) {
    margin-top: .55rem; padding-top: .62rem; border-top: 2px solid var(--ink);
  }
  /* the cutoff hangs off ARRIVES as a footnote — no rule, no label */
  body.t-of .pd-info > .pd-cutoff { order: 9; margin-top: -.15rem; padding: 0 0 .1rem .9rem; border: 0; }
  body.t-of .pd-info > .pd-ship:not(.pdp-points) {
    order: 10; padding: .45rem 0 .15rem; border-top: 1px solid var(--line);
  }
  /* the 1–2 day dispatch promise is fine print under the row it belongs to */
  body.t-of .pd-info > .pd-promise > .pd-promise__line:nth-child(1) {
    order: 11; margin-top: -.15rem; padding: 0 0 .1rem .9rem; border: 0;
  }
  body.t-of .pd-info > .pd-promise > .pd-promise__line:nth-child(2) {
    order: 12; padding: .45rem 0 .15rem; border-top: 1px solid var(--line);
  }
  /* rewards closes the manifest */
  body.t-of .pd-info > .pdp-points {
    order: 13; padding: .45rem 0 .5rem;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  /* the offer band, held apart by white space alone */
  body.t-of .pd-info > .pd-multibuy { order: 14; margin-top: .75rem; }
  body.t-of .pd-info > .bnpl       { order: 15; margin-top: .6rem; }
  body.t-of .pd-info > .pd-viewers { order: 16; }
  body.t-of .pd-info > .pd-wish    { order: 17; }
  body.t-of .pd-info > .pd-promise > .pd-promise__line:nth-child(3) { order: 18; margin-top: .3rem; }
  body.t-of .pd-info > .pd-notify  { order: 19; }
  body.t-of .pd-info > .pd-fabric { order: 21; }
  body.t-of .pd-info > .pd-care { order: 22; }
  body.t-of .pd-info > .of-acc { order: 21; }
  body.t-of .pd-actions .btn { min-height: 48px; }
}

/* ---------- 19. Cart drawer ---------- */
body.t-of .cart { background: #fff; border-left: 1px solid var(--line); box-shadow: -18px 0 50px -26px rgba(17, 18, 20, .5); }
body.t-of .cart__head { border-bottom: 2px solid var(--ink); }
body.t-of .cart__head h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
body.t-of .cart-item { border-bottom: 1px solid var(--line); }
body.t-of .cart-item img { background: #fff; border: 1px solid var(--line); }
body.t-of .cart-item__info h4 a:hover { color: var(--accent); }
body.t-of .cart-item__info strong { font-family: var(--display); font-weight: 700; }
body.t-of .cart-item__brand, body.t-of .cart-item__unit, body.t-of .cart-item__rm { color: var(--muted-2); }
body.t-of .qty { border: 1.5px solid var(--ink); border-radius: 2px; background: #fff; }
body.t-of .qty button { color: var(--muted); width: 44px; height: 44px; font-size: 1.1rem; }
body.t-of .qty button:hover { background: var(--gray); color: var(--ink); }
body.t-of .cart__foot { border-top: 2px solid var(--ink); background: var(--panel); }
body.t-of .cart__row strong { font-family: var(--display); font-weight: 700; }
body.t-of .cart__note { color: var(--muted-2); }
body.t-of .ship-msg { color: var(--muted); }
body.t-of .ship-msg strong { color: var(--accent); }
body.t-of .ship-track { background: var(--gray-2); border: none; height: 6px; border-radius: 3px; }
body.t-of .ship-fill { background: var(--accent); }
body.t-of .ship-bar--done { color: var(--ok); }
body.t-of .cart-suggest {
  background: none; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; padding: .9rem 0 0;
}
body.t-of .cart-suggest__img { border-radius: 0; }
body.t-of .resume-bar { background: var(--ink); color: #fff; }
body.t-of .resume-bar a { color: var(--accent-lt); }
body.t-of .overlay { background: rgba(17, 18, 20, .45); }

/* ============================================================
   20. CHECKOUT — "THE RUNNING ORDER"
   Same system as 18b (THE MANIFEST): every box deleted, each section opened
   on a 2px ink rule under an Oswald micro-cap, rows separated by hairlines,
   ONE thing promoted (the total) with its supporting facts demoted.

   TWO fills, and they never sit near each other:
     · the solid-ink pay button (form + sticky bar) — the buy path
     · ONE forest band on free shipping, and only in the genuinely EARNED
       state (.co-freeship--won, set by renderTotals()). The progress state
       stays a quiet ruled row, so the band can never carry the exit link.

   20a is UNSCOPED on purpose: .checkout__summary is reused 8x across
   CheckoutSuccess/Lakes/GiftCards, and .co-totals/.co-row/.co-item by
   CheckoutSuccess. Everything structural lives in 20b behind
   body.t-of.co-focus — a class only Checkout.cshtml sets.
   ============================================================ */

/* ---------- 20a. shared checkout surfaces (also used post-purchase) ---------- */
body.t-of .checkout__summary { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; }
body.t-of .co-row--total { border-top: 2px solid var(--ink); font-family: var(--display); font-weight: 700; }
body.t-of .co-divider { color: var(--muted-2); }
body.t-of .co-divider::before, body.t-of .co-divider::after { background: var(--line); }
body.t-of .co-express__note { color: var(--muted-2); }
body.t-of .checkout input, body.t-of .checkout select, body.t-of .checkout textarea {
  background: #fff; border: 1.5px solid var(--ink); color: var(--ink); border-radius: var(--radius);
}
body.t-of .checkout input::placeholder { color: var(--muted-2); }
body.t-of .checkout input:focus, body.t-of .checkout select:focus { border-color: var(--accent); }
body.t-of .co-coupon__msg { color: var(--muted); }
body.t-of .pay-badge { border: 1px solid var(--line); background: #fff; border-radius: 2px; color: var(--muted); }
body.t-of .footer__secure { color: var(--muted-2); }
/* the frosted-glass pay bar was the most imported-looking effect on the page */
body.t-of .co-stickybar {
  background: #fff; border-top: 2px solid var(--ink);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ---------- 20b. the document (Checkout.cshtml only) ---------- */

/* --- 0 - every box on the money page, gone (content is never deleted) ----- */
body.t-of.co-focus .checkout__summary,
body.t-of.co-focus .checkout__form,
body.t-of.co-focus .co-insure,
body.t-of.co-focus .co-bump,
body.t-of.co-focus .co-coupon__use,
body.t-of.co-focus .pay-method {
  background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none;
}
body.t-of.co-focus .co-item__img,
body.t-of.co-focus .co-bump__media img { border-radius: 0; border: 1px solid var(--line); background: #fff; }
body.t-of.co-focus .co-insure:has(input:checked) { background: none; border: 0; }
body.t-of.co-focus .co-insure:hover { border: 0; }

/* --- glyphs: the 14 emoji ride .emoji-deco (already hidden in this theme) --- */
body.t-of.co-focus .co-insure__title svg { display: none; }
body.t-of.co-focus .co-codes summary::before { content: none; }
body.t-of.co-focus .co-codes summary::after  { content: "+"; color: var(--ink); font-size: 1.25rem; font-weight: 500; line-height: 1; }
body.t-of.co-focus .co-codes[open] summary::after { content: "\2013"; }

/* --- 1 - one heading system: the Oswald micro-cap over a 2px ink rule ----- */
body.t-of.co-focus .checkout__inner > .section__title { letter-spacing: .06em; margin-bottom: 1.1rem; }
body.t-of.co-focus .checkout__summary > h3,
body.t-of.co-focus .checkout__form > h3 {
  font-family: var(--stencil); font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  font-size: .66rem; line-height: 1.4; color: var(--muted-2);
  margin: 0 0 .5rem; padding-top: .58rem;
  border-top: 2px solid var(--ink);
}
body.t-of.co-focus .checkout__form > h3.checkout__h--sub { margin-top: 1.4rem; }

/* --- 2 - the error state, moved to 23j: the same #ff8a80-on-peach leak
   ships on /contact, /careers, /track, /returns and both account pages, so
   scoping the cure to the checkout page was the wrong blast radius. -------- */

/* --- 3 - express lane: fast, but OUTLINED. Only one solid-ink CTA. -------- */
body.t-of.co-focus .co-express { max-width: none; margin: 0 0 1rem; text-align: left; }
body.t-of.co-focus #exBtn { min-height: 52px; letter-spacing: .12em; }
body.t-of.co-focus .co-express__note { text-align: left; font-size: .74rem; line-height: 1.45; }
body.t-of.co-focus .co-divider {
  max-width: none; margin: 0 0 1.2rem;
  font-family: var(--stencil); font-weight: 600; letter-spacing: .18em; font-size: .64rem;
}

/* --- 4 - the item ledger: one hairline per row, so nothing ever doubles --- */
body.t-of.co-focus .co-items { gap: 0; margin-bottom: 0; }
body.t-of.co-focus .co-item {
  align-items: center; gap: .65rem; padding: .55rem 0; min-height: 44px;
  border-bottom: 1px solid var(--line); font-size: .88rem; color: var(--ink);
}
body.t-of.co-focus .co-item__img { width: 40px; height: 40px; object-fit: cover; }
body.t-of.co-focus .co-qty {
  font-family: var(--display); font-weight: 600; font-size: .84rem;
  letter-spacing: 0; color: var(--muted-2); font-variant-numeric: tabular-nums;
}
body.t-of.co-focus .co-name { color: var(--ink); line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
body.t-of.co-focus .co-variant {
  display: block; margin-top: .08rem; font-style: normal;
  font-size: .72rem; letter-spacing: .04em; color: var(--muted-2);
}
body.t-of.co-focus .co-price {
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  letter-spacing: 0; color: var(--ink);
}
body.t-of.co-focus .co-empty { color: var(--muted); font-size: .88rem; padding: .8rem 0; }
body.t-of.co-focus .co-empty a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--accent); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

/* --- 5 - codes drawer: the accordion language used elsewhere in this theme - */
body.t-of.co-focus .co-codes { margin: 0; border-bottom: 1px solid var(--line); }
body.t-of.co-focus .co-codes summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 48px; padding: .75rem 0; color: var(--ink);
  font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; font-size: .78rem;
}
body.t-of.co-focus .co-codes summary:hover { color: var(--accent); }
body.t-of.co-focus .co-codes[open] { padding-bottom: .6rem; }
body.t-of.co-focus .co-coupon { gap: .45rem; margin: .35rem 0 .2rem; }
body.t-of.co-focus .co-coupon input { border-radius: 0; padding: .7rem .75rem; min-height: 48px; }
body.t-of.co-focus .co-coupon .btn { border-radius: 0; min-height: 48px; padding: .7rem 1rem; font-size: .76rem; }
body.t-of.co-focus .co-coupon__msg { margin: .3rem 0 .55rem; font-size: .78rem; line-height: 1.45; }
body.t-of.co-focus .co-coupon__msg.ok { color: var(--ok); font-weight: 600; }
body.t-of.co-focus .co-coupon__msg.warn { color: var(--warn); font-weight: 600; }
/* Both status paragraphs ship empty and still reserved ~34px each, which is
   what opened the two dead gaps inside the drawer. Collapsed with height, not
   display:none — the element has to stay rendered for aria-live to announce. */
body.t-of.co-focus .co-coupon__msg:empty { margin: 0; height: 0; overflow: hidden; }
body.t-of.co-focus .co-coupon__hint { font-size: .78rem; color: var(--muted-2); margin: .1rem 0 .45rem; }
/* the dashed sage pill — the same treatment deleted from the product page,
   shipping twice here (WELCOME10 and every Trail Points chip) */
body.t-of.co-focus .co-coupon__use {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .45rem 0; margin: -.45rem 0;
  font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; font-size: .76rem;
  color: var(--accent);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: color .15s ease;
}
body.t-of.co-focus .co-coupon__use:hover { background: none; color: var(--ink); }
body.t-of.co-focus .co-coupon__use:disabled { color: var(--muted-2); text-decoration: none; }

/* --- 6 - free shipping: real StoreConfig math, two explicit states.
   The old rule painted #fff on --accent-lt (#d3ddc8) = 1.40:1, so the whole
   offer was effectively invisible. Only the EARNED state gets a fill. ------ */
body.t-of.co-focus .co-freeship {
  background: none; border: 0; border-radius: 0;
  margin: 0; padding: .55rem 0 .6rem; border-bottom: 1px solid var(--line);
  font-size: .8rem; line-height: 1.5; color: var(--muted);
}
body.t-of.co-focus .co-freeship strong { color: var(--ink); font-weight: 700; }
body.t-of.co-focus .co-freeship a {
  display: inline-block; color: var(--muted-2); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px;
  padding: .45rem 0; margin: -.45rem 0;
  transition: color .15s ease, text-decoration-color .15s ease;
}
body.t-of.co-focus .co-freeship a:hover { color: var(--ink); text-decoration-color: var(--ink); }
/* Block, not flex. The banner's content is mixed inline ("<strong>FREE
   shipping unlocked</strong> — applied at checkout."); flex would promote the
   <strong> to a flex item and swallow the space before the em dash. */
body.t-of.co-focus .co-freeship--won {
  display: block;
  margin: .7rem 0 .75rem; padding: .78rem .9rem .8rem;
  background: var(--accent-band); color: #fff;        /* 7.9:1 */
  border: 0; border-radius: 0;
  font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  font-size: .82rem; line-height: 1.25;
}
body.t-of.co-focus .co-freeship--won strong { color: #fff; font-weight: 700; }

/* --- 7 - the two add-ons are ledger rows, never offers -------------------- */
body.t-of.co-focus .co-insure,
body.t-of.co-focus .co-bump {
  gap: .7rem; margin: 0; padding: .6rem 0; min-height: 56px;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .15s ease;
}
body.t-of.co-focus .co-insure input { width: 20px; height: 20px; border-radius: 0; accent-color: var(--accent); }
body.t-of.co-focus .co-insure:has(input:checked) { box-shadow: inset 2px 0 0 var(--ink); padding-left: .7rem; }
body.t-of.co-focus .co-insure__title { gap: 0; font-size: .9rem; font-weight: 600; color: var(--ink); }
body.t-of.co-focus .co-insure__body small { font-size: .74rem; line-height: 1.45; color: var(--muted-2); }
body.t-of.co-focus .co-insure__price {
  align-self: center; font-family: var(--display); font-weight: 600;
  font-size: .95rem; letter-spacing: 0; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
body.t-of.co-focus .co-bump__media img { width: 44px; height: 44px; object-fit: cover; }
body.t-of.co-focus .co-bump__body { gap: .06rem; font-size: .88rem; }
body.t-of.co-focus .co-bump__body strong { color: var(--ink); font-weight: 600; }
body.t-of.co-focus .co-bump__body span { font-size: .76rem; color: var(--muted-2); }
body.t-of.co-focus .co-bump__body em { color: var(--accent); font-weight: 600; font-style: normal; }
body.t-of.co-focus .co-bump__add { border-radius: 0; min-height: 44px; padding: .5rem .9rem; font-size: .74rem; letter-spacing: .1em; }
body.t-of.co-focus .co-bump__done { color: var(--accent); font-weight: 600; font-size: .86rem; }

/* --- 8 - the ledger. The total is the page's one promoted number. -------- */
body.t-of.co-focus .co-totals {
  gap: 0; margin-top: .1rem; padding-top: .55rem;
  border-top: 2px solid var(--ink);
}
body.t-of.co-focus .co-row {
  align-items: baseline; padding: .36rem 0;
  font-family: var(--stencil); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .68rem; color: var(--muted);
}
/* :not() is REQUIRED — `.co-row + .co-row` outranks `.co-row--total`, so
   without it the total loses its 2px ink rule. */
body.t-of.co-focus .co-row + .co-row:not(.co-row--total) { border-top: 1px solid var(--line); }
body.t-of.co-focus .co-row > span { flex: 1 1 auto; padding-right: .8rem; }
body.t-of.co-focus .co-row strong {
  flex: none; white-space: nowrap;
  font-family: var(--display); font-weight: 600; font-size: .96rem;
  letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums;
}
/* site.css `.co-row strong` (0,1,1) has always beaten `.co-discount` (0,1,0),
   so the saving has never once rendered in the success colour on any theme.
   Do NOT add a `.co-row:not(...) strong` colour rule — it re-breaks this. */
body.t-of.co-focus .co-row strong.co-discount { color: var(--accent); }
body.t-of.co-focus .co-row--total {
  margin-top: .3rem; padding: .55rem 0 0;
  border-top: 2px solid var(--ink);
  font-size: .8rem; letter-spacing: .14em; color: var(--ink);
}
body.t-of.co-focus .co-row--total > span { flex: none; padding-right: .9rem; }
body.t-of.co-focus .co-row--total strong {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.85rem, 8.5vw, 2.3rem); line-height: .95;
  letter-spacing: .005em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* --- 9 - the form. Fields KEEP their box: Oswald caps is the device for
   structure and numbers, Inter is the device for entry. Uppercasing
   "Phone (optional — delivery updates only)" would wrap to two shouty lines. */
body.t-of.co-focus .checkout__form.admin-form { gap: .9rem; }
body.t-of.co-focus .checkout .field input,
body.t-of.co-focus .checkout .field select {
  border: 1.5px solid var(--ink); border-radius: 0; background: #fff;
  padding: .72rem .8rem; min-height: 48px;
}
/* :user-invalid, NOT :invalid — seven fields are required and :invalid would
   paint the whole form red on first paint. */
body.t-of.co-focus .checkout .field input:user-invalid,
body.t-of.co-focus .checkout .field select:user-invalid { border-color: var(--warn); border-width: 2px; }
body.t-of.co-focus .checkout .field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px #fff inset; -webkit-text-fill-color: var(--ink);
}
body.t-of.co-focus .checkout .btn { border-radius: 0; }
body.t-of.co-focus #coPlace { min-height: 54px; margin-top: .35rem; font-size: .95rem; letter-spacing: .12em; }
body.t-of.co-focus .co-bnpl { margin: .6rem 0 0; }

/* --- 10 - the colophon: six centred paragraphs become one document -------- */
body.t-of.co-focus .pay-methods {
  justify-content: flex-start; gap: .12rem .75rem;
  margin: 1rem 0 0; padding-top: .6rem; border-top: 2px solid var(--ink);
}
body.t-of.co-focus .pay-method,
body.t-of.co-focus .pay-method--wallet,
body.t-of.co-focus .pay-method--bnpl {
  font-family: var(--stencil); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .62rem; color: var(--muted-2);
}
body.t-of.co-focus .pay-method--wallet { color: var(--muted); }
body.t-of.co-focus .checkout__assure,
body.t-of.co-focus .checkout__note { text-align: left; margin: 0; }
/* ARRIVES — promoted exactly as the product page promotes its delivery date */
body.t-of.co-focus .checkout__assure--eta {
  margin-top: .9rem; padding: .6rem 0 .1rem;
  border-top: 2px solid var(--ink);
  font-weight: 400; font-size: .8rem; line-height: 1.5; color: var(--muted-2);
}
body.t-of.co-focus .checkout__assure-lead {
  display: block;
  font-family: var(--stencil); font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  font-size: .64rem; line-height: 1.4; color: var(--muted-2); margin-bottom: .1rem;
}
body.t-of.co-focus .checkout__assure--eta strong {
  display: block;
  font-family: var(--display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.06;
  font-size: clamp(1.05rem, 4.6vw, 1.32rem); color: var(--ink);
}
/* The security note hangs off the arrival block as a footnote. The left rule
   is what makes the indent read as deliberate rather than as a stray margin —
   without it the paragraph just looks misaligned against every other line. */
body.t-of.co-focus .checkout__note--secure {
  margin: .1rem 0 .55rem; padding: .1rem 0 .1rem .8rem;
  border-left: 1px solid var(--line);
  font-size: .74rem; line-height: 1.5; color: var(--muted-2);
}
body.t-of.co-focus .checkout__note code { background: var(--panel); border-radius: 0; padding: .05rem .25rem; }
body.t-of.co-focus .checkout__assure--trust {
  padding: .5rem 0 .55rem; border-top: 1px solid var(--line);
  font-weight: 400; font-size: .8rem; line-height: 1.5; color: var(--muted);
}
body.t-of.co-focus .checkout__note--help {
  padding: .5rem 0 .1rem; border-top: 1px solid var(--line);
  font-size: .74rem; line-height: 1.5; color: var(--muted-2);
}
body.t-of.co-focus .checkout__assure a {
  color: var(--accent); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  padding: .45rem 0; margin: -.45rem 0;
}
body.t-of.co-focus .checkout__note a {
  display: inline-block; color: var(--muted); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px;
  padding: .45rem 0; margin: -.45rem 0;
  transition: color .15s ease, text-decoration-color .15s ease;
}
body.t-of.co-focus .checkout__note a:hover { color: var(--accent); text-decoration-color: var(--accent); }
body.t-of.co-focus .checkout__back {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: 1rem; padding: .5rem 0;
  font-family: var(--stencil); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; color: var(--muted-2);
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
body.t-of.co-focus .checkout__back:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* --- 11 - the sticky bar carries the live total for the whole scroll ------ */
body.t-of.co-focus .co-stickybar__total { padding-right: .85rem; border-right: 1px solid var(--line); }
body.t-of.co-focus .co-stickybar__total span {
  font-family: var(--stencil); font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; font-size: .6rem; color: var(--muted-2);
}
body.t-of.co-focus .co-stickybar__total strong {
  font-family: var(--display); font-weight: 700; font-size: 1.35rem;
  letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums;
}
body.t-of.co-focus .co-stickybar .btn { border-radius: 0; min-height: 48px; letter-spacing: .1em; }

@media (prefers-reduced-motion: reduce) {
  body.t-of.co-focus .co-insure,
  body.t-of.co-focus .co-bump,
  body.t-of.co-focus .co-coupon__use,
  body.t-of.co-focus .co-freeship a,
  body.t-of.co-focus .checkout__note a,
  body.t-of.co-focus .checkout__back { transition: none; }
}

@media (max-width: 760px) {
  /* --co-pad couples the band's full-bleed to the page gutter. Change the
     custom property, never the padding, or the band mis-hangs. */
  body.t-of.co-focus .checkout { --co-pad: 1.15rem; padding: 1.2rem var(--co-pad) 6.2rem; }
  body.t-of.co-focus .co-freeship--won {
    margin-left: calc(-1 * var(--co-pad)); margin-right: calc(-1 * var(--co-pad));
    padding-left: var(--co-pad); padding-right: var(--co-pad);
  }
  body.t-of.co-focus .checkout__grid { gap: 1.4rem; }
  /* State + ZIP belong on one line; targeted by :has() so inserting a field
     can never silently mis-span a column. */
  body.t-of.co-focus .checkout .admin-form__grid { grid-template-columns: 1.15fr 1fr; gap: .9rem .7rem; }
  body.t-of.co-focus .checkout .admin-form__grid > .field:has(input[name="ShipCity"]),
  body.t-of.co-focus .checkout .admin-form__grid > .field:has(input[name="ShipCountry"]) { grid-column: 1 / -1; }
  body.t-of.co-focus .checkout__summary,
  body.t-of.co-focus .checkout__form { padding: 0; }
  body.t-of.co-focus .co-coupon__use { min-height: 44px; padding: .45rem 0; }
}

@media (min-width: 761px) {
  body.t-of.co-focus .checkout { max-width: 940px; }
  body.t-of.co-focus .checkout__grid { gap: 2.4rem; }
  body.t-of.co-focus .checkout__summary { position: sticky; top: 90px; }
  body.t-of.co-focus .co-freeship--won { margin-left: 0; margin-right: 0; }
}

/* ---------- 21. Quick view, auth, misc dialogs ---------- */
body.t-of .modal__panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 30px 80px -30px rgba(17, 18, 20, .55); }
body.t-of .modal__close { background: #fff; border: 1px solid var(--line); color: var(--ink); border-radius: 50%; }
body.t-of .modal__close:hover { background: var(--gray); }
body.t-of .modal__media { background: #fff; border-right: 1px solid var(--line); }
body.t-of .modal__media img { background: #fff; }
body.t-of .modal__stock.in { color: var(--ok); }
body.t-of .modal__stock.out { color: var(--warn); }
body.t-of .auth__card, body.t-of .giveaway__card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); }
body.t-of .crewpop__backdrop { background: rgba(17, 18, 20, .5); }
body.t-of .crewpop__card { background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 80px -30px rgba(17, 18, 20, .5); border-radius: var(--radius-lg); }
/* The base card is dark and hardcodes its title/input to white — repaint
   every piece for the light card so nothing renders white-on-white. */
body.t-of .crewpop__eyebrow { color: var(--muted-2); }
body.t-of .crewpop__card h3 {
  color: var(--ink); font-family: var(--display); font-weight: 700; letter-spacing: .03em;
}
body.t-of .crewpop__card > p { color: var(--muted); }
body.t-of .crewpop__form input {
  background: #fff; border: 1.5px solid var(--ink); color: var(--ink); border-radius: var(--radius);
}
body.t-of .crewpop__form input:focus { border-color: var(--accent); }
body.t-of .crewpop__form input::placeholder { color: var(--muted-2); }
body.t-of .crewpop__close { color: var(--muted); }
body.t-of .crewpop__close:hover { color: var(--ink); background: var(--gray); }
body.t-of .crewpop__no { color: var(--muted-2); }
body.t-of .crewpop__no:hover { color: var(--ink); }
body.t-of .spin__result { color: var(--ink); }
body.t-of .launch-banner { background: var(--accent-band); border-bottom: none; }
body.t-of .launch-banner__eyebrow { color: rgba(255, 255, 255, .85); letter-spacing: .24em; }
body.t-of .launch-banner__title { color: #fff; }
body.t-of .launch-banner__countdown { color: #fff; font-family: var(--display); font-weight: 700; }
body.t-of .launch-banner__msg { color: rgba(255, 255, 255, .88); }

/* ---------- 22. Newsletter — blue offer panel ---------- */
body.t-of .newsletter { background: var(--accent-band); border-top: none; border-bottom: none; }
body.t-of .newsletter h2 { color: #fff; }
body.t-of .newsletter p { color: rgba(255, 255, 255, .9); }
body.t-of .of-post__stamp {
  display: inline-block; background: #fff; color: var(--ink);
  font-family: var(--display); font-weight: 600; letter-spacing: .12em; font-size: .7rem;
  text-transform: uppercase; padding: .34rem .7rem .3rem; margin-bottom: .8rem; border-radius: 2px;
}
body.t-of .newsletter__form input { background: #fff; border: none; color: var(--ink); border-radius: var(--radius); }
body.t-of .newsletter__form input::placeholder { color: var(--muted-2); }
body.t-of .newsletter .btn--primary { background: var(--ink); border-color: var(--ink); color: #fff; }
body.t-of .newsletter .btn--primary:hover:not(:disabled) { background: #fff; border-color: #fff; color: var(--ink); }

/* ---------- 23. Footer — black, social row up top, ruled groups ---------- */
body.t-of .footer { background: var(--ink); border-top: none; color: rgba(255, 255, 255, .82); }
body.t-of .footer a { color: rgba(255, 255, 255, .82); }
body.t-of .footer a:hover { color: #fff; }
body.t-of .footer__col h4 {
  color: #fff; font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; font-size: .84rem;
}
body.t-of .footer__brand p { color: rgba(255, 255, 255, .6); }
body.t-of .footer__social { gap: 1.4rem; }
body.t-of .footer__social a {
  border: none; color: #fff; border-radius: 0;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
body.t-of .footer__social a svg { width: 22px; height: 22px; }
body.t-of .footer__social a:hover { background: transparent; color: var(--accent-lt); }
body.t-of .footer__bottom { border-top: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .55); }
body.t-of .footer .logo__k1 { color: #fff; }
body.t-of .footer .logo__k1 span { color: #fff; }
body.t-of .footer .logo__sub { color: rgba(255, 255, 255, .6); }
body.t-of .footer__pay { border-top: 1px solid rgba(255, 255, 255, .22); }
body.t-of .footer__secure { color: rgba(255, 255, 255, .6); }
body.t-of .pay-badge { border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: rgba(255, 255, 255, .85); }
@media (max-width: 760px) {
  body.t-of .footer__col { border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 1rem; }
  body.t-of .footer__col a { padding: .55rem 0; min-height: 44px; display: flex; align-items: center; }
}

/* ---------- 24. Toast, to-top, flash ---------- */
body.t-of .toast { background: var(--ink); color: #fff; border: none; border-left: 4px solid var(--accent-lt); border-radius: 2px; }
body.t-of .to-top { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 50%; box-shadow: var(--shadow); }
body.t-of .to-top:hover { background: var(--ink); color: #fff; }
body.t-of .admin__flash { border: 1px solid var(--line); background: #fff; color: var(--ink); }

/* ---------- 25. Focus & inputs ---------- */
body.t-of a:focus-visible,
body.t-of button:focus-visible,
body.t-of [tabindex]:focus-visible,
body.t-of label:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}
body.t-of input:focus-visible,
body.t-of select:focus-visible,
body.t-of textarea:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 1px;
}
body.t-of input, body.t-of select, body.t-of textarea { color: var(--ink); }
body.t-of .field input, body.t-of .field select, body.t-of .field textarea {
  background: #fff; border: 1.5px solid var(--ink); color: var(--ink);
}

/* ---------- 26. Motion discipline ---------- */
@media (prefers-reduced-motion: reduce) {
  body.t-of .card, body.t-of .card__media img, body.t-of .of-deal img,
  body.t-of .of-col img, body.t-of .btn--primary, body.t-of .btn--buynow,
  body.t-of .filters { transition: none; }
  body.t-of .card:hover .card__media img,
  body.t-of .of-deal:hover img, body.t-of .of-col:hover img { transform: none; }
}

/* ---------- 27. Responsive fine-tuning ---------- */
@media (max-width: 760px) {
  body.t-of .of-offerbar { padding: 1rem 2.4rem; }
  body.t-of .of-offerbar__side { font-size: .54rem; letter-spacing: .14em; }
  body.t-of .of-hero--photo { min-height: min(64vh, 560px); }
  body.t-of .of-hero__content { padding-bottom: 2rem; }
  body.t-of .of-deal { min-height: 205px; }
  body.t-of .of-deal img { padding: .8rem .8rem 3.8rem; }
  body.t-of .of-deal__meta strong { font-size: 1.05rem; }
  body.t-of .of-collections__grid { gap: .8rem .5rem; }
  body.t-of .of-col__label { font-size: .8rem; min-height: 44px; }
  body.t-of .of-compare__table { font-size: .82rem; }
  body.t-of .of-compare__table td { width: 4.2rem; }
}
@media (max-width: 760px) {
  body.t-of .of-hero--hasmob .of-hero__bg--desk { display: none; }
  body.t-of .of-hero__bg--mob { display: block; }
}

/* ---------- 21. Listing chrome — no emoji, nothing clipped ----------
   The shared listing markup carries emoji (category chips, the free-shipping
   card badge). They're full-colour glyphs that fight this theme's black /
   white / forest discipline, so the theme drops them and keeps the words. */
body.t-of .chip__icon,
body.t-of .card__ship-icon,
body.t-of .emoji-deco { display: none; }   /* decorative glyphs: this theme speaks in type, not emoji */
body.t-of .chip {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; font-size: .76rem; border-radius: 2px;
  border: 1.5px solid var(--line); color: var(--muted); background: #fff;
}
body.t-of .chip:hover { border-color: var(--ink); color: var(--ink); background: #fff; }
body.t-of .chip--on { background: var(--ink); border-color: var(--ink); color: #fff; }
/* The shared strip scrolls sideways on phones, which cuts a word mid-air with
   no visible affordance — it reads as a bug. Here it simply wraps. */
@media (max-width: 760px) {
  body.t-of .shop-trust {
    overflow-x: visible; flex-wrap: wrap; gap: .45rem 1rem;
    justify-content: center; text-align: center;
  }
  body.t-of .shop-trust li { white-space: normal; }
}

/* ---------- 22. Touch targets ----------
   Audited at 375px: the card wishlist button rendered 33x33 and the accordion
   rows 33px tall — both under a comfortable thumb target. Sized to 44px
   without changing how either looks at rest. */
body.t-of .card__wish { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
body.t-of .of-faq__list summary, body.t-of .of-values__list summary { min-height: 44px; }

/* Zero-result search: the last dashed box on the storefront. This theme states
   an empty result the way it states everything else — ruled, not outlined. */
body.t-of .listing__empty {
  background: none; border: 0; border-radius: 0;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line);
  padding: 2.2rem 1rem;
}
body.t-of .listing__empty h3 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink);
}

/* ============================================================
   23. THE REST OF THE SITE
   Everything the earlier passes never reached: the journal/lakes/gifts
   index, the "ways to earn" cells on careers/contact/wholesale/rewards,
   the FAQ accordion, and every form control outside checkout.

   The audit that produced this section found the same three tells on
   each of them — a rounded card, a colour emoji, and a tap target under
   44px — which is exactly the costume this theme took off everywhere
   else. Same cure: delete the box, keep the content, rule the rows.
   ============================================================ */

/* ---------- 23a. squared, everywhere ---------------------------------- */
/* Stragglers at 9-16px against a system whose radii are 2px and 4px. */
body.t-of .journal-card,
body.t-of .journal-article__cover,
body.t-of .journal-empty,
body.t-of .earn-card,
body.t-of .faq-item,
body.t-of .faq-trust,
body.t-of .builder__tile,
body.t-of .builder__card,
body.t-of .drops-how__step,
body.t-of .newsletter,
body.t-of .gc-chip,
body.t-of .pd-care,
body.t-of .pd-sticky__thumb,
body.t-of .skip-link,
body.t-of .mobilemenu__close,
body.t-of .gv-reward,
body.t-of kbd { border-radius: var(--radius); }

/* Form controls square up to match checkout. They were 9px on lakes,
   gift cards, ambassadors, careers, wholesale and contact — six pages
   disagreeing with the one page where a field actually costs money. */
body.t-of input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.t-of select,
body.t-of textarea { border-radius: var(--radius); }
body.t-of .field input,
body.t-of .field select,
body.t-of .field textarea,
body.t-of .admin-form input,
body.t-of .admin-form select,
body.t-of .admin-form textarea { border: 1.5px solid var(--ink); background: #fff; }
body.t-of .field input:focus,
body.t-of .field select:focus,
body.t-of .field textarea:focus { border-color: var(--accent); }
body.t-of .field > span { font-family: var(--stencil); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; color: var(--muted-2); }

/* ---------- 23b. the index: journal, lakes, gift guides ---------------- */
/* Twenty identical rounded cards is a wall, not an index. A field
   journal is a dated list — kicker, headline, dek, rule. The media
   column only appears when the entry actually has a cover image, so
   the lakes and gifts lists (which never do) stay flush left. */
body.t-of .journal-grid {
  display: block; max-width: 780px;
  border-top: 2px solid var(--ink);
}
body.t-of .journal-card {
  display: block; background: none; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--line);
  padding: 1.05rem 0; overflow: visible; transition: none;
}
body.t-of .journal-card:has(.journal-card__media) {
  display: grid; grid-template-columns: 92px 1fr; gap: 1rem; align-items: start;
}
body.t-of .journal-card:hover { transform: none; border-color: var(--line); }
body.t-of .journal-card:hover .journal-card__title { color: var(--accent); }
body.t-of .journal-card__media {
  aspect-ratio: 1; border: 1px solid var(--line); border-radius: 0; background: #fff;
}
body.t-of .journal-card__body { padding: 0; gap: .2rem; }
body.t-of .journal-card__date {
  font-family: var(--stencil); font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; font-size: .64rem; color: var(--muted-2);
}
body.t-of .journal-card__title {
  font-family: var(--display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.12;
  font-size: clamp(1.02rem, 3.6vw, 1.18rem); color: var(--ink);
  margin: .18rem 0 .1rem; transition: color .15s ease;
}
body.t-of .journal-card__excerpt { font-size: .88rem; line-height: 1.55; color: var(--muted); }
body.t-of .journal-card__read {
  display: inline-block; margin-top: .35rem;
  font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; color: var(--muted-2);
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
}
body.t-of .journal-card:hover .journal-card__read { color: var(--accent); text-decoration-color: var(--accent); }
body.t-of .journal-empty { background: none; border: 1px solid var(--line); border-style: solid; }
body.t-of .journal-empty a { color: var(--accent); }
/* Article pages inherit the same type, so an entry looks like its index row. */
body.t-of .journal-article__date {
  font-family: var(--stencil); font-weight: 600; letter-spacing: .16em; font-size: .68rem; color: var(--muted-2);
}
body.t-of .journal-article__cover { border: 1px solid var(--line); }

/* ---------- 23c. "ways to earn" cells --------------------------------- */
/* Four boxed cards with a colour emoji each, on careers, contact,
   wholesale and rewards. Now a spec sheet: rule, micro-cap, fact. */
body.t-of .earn-card {
  background: none; border: 0; border-radius: 0;
  border-top: 2px solid var(--ink);
  padding: .68rem 0 0; transition: none;
}
body.t-of .earn-card:hover { transform: none; border-color: var(--ink); }
body.t-of .earn-card h3 {
  font-family: var(--stencil); font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  font-size: .66rem; line-height: 1.4; color: var(--muted-2); margin: 0 0 .3rem;
}
body.t-of .earn-card p { font-size: .88rem; line-height: 1.55; color: var(--muted); }
body.t-of .earn-card a {
  display: inline-block; color: var(--accent); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  padding: .35rem 0; margin: -.35rem 0;
}
@media (max-width: 460px) { body.t-of .earn-grid { gap: .5rem; } }

/* ---------- 23d. FAQ — the accordion language used at checkout -------- */
body.t-of .faq-list { gap: 0; border-top: 2px solid var(--ink); }
body.t-of .faq-item { background: none; border: 0; border-bottom: 1px solid var(--line); }
body.t-of .faq-item > summary {
  min-height: 48px; padding: .85rem 0;
  font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; font-size: .84rem; line-height: 1.35; color: var(--ink);
}
body.t-of .faq-item > summary:hover { color: var(--accent); }
body.t-of .faq-item > summary::after { color: var(--ink); font-weight: 500; }
body.t-of .faq-item[open] > summary { color: var(--accent); }
body.t-of .faq-item__a { padding: 0 0 1rem; font-size: .9rem; line-height: 1.6; color: var(--muted); }
body.t-of .faq-item__a a,
body.t-of .faq-more a { color: var(--accent); text-decoration-color: var(--line); }
body.t-of .faq-trust {
  background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: .55rem 0; margin: .2rem 0 1.2rem; font-size: .84rem; color: var(--muted);
}

/* ---------- 23e. gift-card amounts: chips, not lozenges --------------- */
body.t-of .gc-chip {
  min-height: 44px; padding: .55rem 1.05rem;
  border: 1.5px solid var(--ink); background: #fff; color: var(--ink);
  font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; font-size: .88rem;
}
body.t-of .gc-chip:hover { border-color: var(--accent); color: var(--accent); }
body.t-of .gc-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
body.t-of .gc-perks p { font-size: .88rem; color: var(--muted); }

/* ---------- 23f. the 24px links -------------------------------------- */
/* "Shop all →", "Read the Field Journal →", "Shop the look →" — the
   links that carry a shopper from one section to the next were 24-25px
   tall. Padding gets them to 44 without moving them: the negative
   margin gives the extra height back to the layout. */
body.t-of .section__link,
body.t-of .dept__more {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .55rem 0; margin: -.55rem 0;
}
/* The rule under these links has to hug the text, so it moves from
   border-bottom (which the new padding would push 9px clear of the
   baseline) to text-decoration, which tracks the text itself. */
body.t-of .section__link {
  border-bottom: 0; padding-bottom: .55rem;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
body.t-of .section__link:hover { border-bottom-color: transparent; text-decoration-color: var(--accent); }
body.t-of .dept__more {
  text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--line); text-underline-offset: 4px;
}
body.t-of .dept__more:hover { text-decoration-color: var(--accent); }
body.t-of .card__name-link { display: block; }

/* ---------- 23g. the lake index --------------------------------------- */
/* 48 state headings, all of them the only sentence-case type left on the
   page. Same micro-cap over a hairline as every other index here. */
body.t-of .lakes-browse__group { margin-bottom: 1.15rem; }
body.t-of .lakes-jump a {
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  color: var(--ink); text-transform: uppercase; letter-spacing: .08em;
}
body.t-of .lakes-jump a:hover { border-color: var(--accent); color: var(--accent); }
body.t-of .lakes-browse__region {
  font-family: var(--stencil); font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  font-size: .66rem; color: var(--muted-2);
  margin: 0 0 .4rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line);
}
body.t-of .lakes-browse__lake {
  display: inline-block; color: var(--ink); font-size: .92rem;
  padding: .55rem 0; margin: -.55rem 1rem -.55rem 0;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px;
}
body.t-of .lakes-browse__lake:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ---------- 23h. remaining tap targets -------------------------------- */
/* The shop sort control and the "remember me" box were 36px and 16px. */
body.t-of .shop__sort select,
body.t-of .listing__sort select { min-height: 44px; }
/* The search field is a borderless 21px input inside the drop-down bar;
   the bar's max-height has to grow with it or the field gets clipped. */
body.t-of .searchbar input { min-height: 44px; }
body.t-of .searchbar.open { max-height: 104px; }
body.t-of .mobilemenu__foot a { display: flex; align-items: center; min-height: 44px; }
body.t-of .pd-perks__link { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 0; margin: -.5rem 0; }
body.t-of .of-hero__pill { border-radius: var(--radius); }
/* A 16px checkbox with no padded label is a 16x16 target. The label is
   the control (it wraps the input), so the height belongs on the label. */
body.t-of .check { min-height: 44px; }
body.t-of .check input[type="checkbox"] { width: 20px; height: 20px; border-radius: 0; }

/* ---------- 23i. trip & care guides ----------------------------------- */
/* Four boxed cards, each with a different coloured 4px cap bar driven by
   an inline --accent. Same index language as the journal, so a reader
   moving between the two never changes rooms. */
body.t-of .guides-grid { display: block; max-width: 780px; border-top: 2px solid var(--ink); }
body.t-of .guide {
  background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--line);
  min-height: 0; padding: 1.05rem 0; gap: .2rem; overflow: visible; transition: none;
}
body.t-of .guide::before { content: none; }
body.t-of .guide:hover { transform: none; border-color: var(--line); }
body.t-of .guide:hover h3 { color: var(--accent); }
body.t-of .guide__tag {
  font-family: var(--stencil); font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; font-size: .64rem; color: var(--muted-2);
}
body.t-of .guide h3 {
  font-family: var(--display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.12;
  font-size: clamp(1.02rem, 3.6vw, 1.18rem); color: var(--ink);
  margin: .18rem 0 .1rem; transition: color .15s ease;
}
body.t-of .guide__read {
  margin-top: .35rem;
  font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; color: var(--muted-2);
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
}
body.t-of .guide:hover .guide__read { color: var(--accent); text-decoration-color: var(--accent); }

/* ---------- 23j. the error banner, on every form ---------------------------
   site.css:1094 paints .auth__error #ff8a80 on rgba(179,90,52,.12) — a dark
   theme's colour on a light theme's pill. Measured 1.95:1 at 14.4px, on the
   element whose entire job is to tell a shopper what went wrong. The checkout
   page was cured last round; the same banner also renders on /contact,
   /careers, /track, /returns, /account/login and /account/register, where it
   stayed unreadable. Same treatment, now unscoped within the theme. */
body.t-of .auth__error {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-top: 2px solid var(--warn); border-bottom: 1px solid var(--warn);
  padding: .6rem 0; margin: 0 0 1.1rem;
  color: var(--warn); font-weight: 600; font-size: .88rem; line-height: 1.45;
}
body.t-of .auth__error a { color: var(--warn); text-decoration: underline; text-underline-offset: 3px; }
/* Focused programmatically when a server-side error comes back, so the ring
   must not read as another error. */
body.t-of .auth__error:focus { outline: 2px solid var(--ink); outline-offset: 3px; }
body.t-of .auth__error:focus:not(:focus-visible) { outline: none; }

/* ---------- 23k. low stock says the same thing in the same colour ---------
   "Only 6 left" is rust (--warn) on the shop card and in the cart, and was
   success-green on the product page — the one place the shopper is deciding.
   Product.cshtml emits .pd-stock.low for stock 1..6; site.js mirrors it when
   a variant is switched. */
body.t-of .pd-stock.low { color: var(--warn); }

/* ---------- 23l. the cart drawer's ledger and its empty state -------------
   The footer listed Subtotal and Shipping and then quoted "4 interest-free
   payments of $X" without ever printing the number X was a quarter of. The
   estimated total now sits between them, ruled off like the checkout total
   it previews — same hierarchy, so the two pages agree on which number is
   the answer. */
body.t-of .cart__row--total {
  margin-top: .45rem; padding-top: .45rem; border-top: 1px solid var(--line);
}
body.t-of .cart__row--total span {
  font-family: var(--stencil); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; font-size: .66rem; color: var(--muted-2);
}
body.t-of .cart__row--total strong { font-size: 1.35rem; color: var(--ink); }
body.t-of .cart__bnpl { font-size: .76rem; color: var(--muted-2); }

/* Empty drawer: .cart__empty is margin:auto centred inside an 790px body, so
   the whole message floated in the middle of 700px of white with the canoe
   glyph suppressed by this theme's no-emoji rule. Bring it to the top and
   give it the same eyebrow-over-rule the empty search result uses. */
body.t-of .cart__empty {
  margin: 0; align-items: flex-start; text-align: left;
  gap: .55rem; padding: 1.1rem 0 0; border-top: 2px solid var(--ink);
}
body.t-of .cart__empty p {
  font-family: var(--display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; font-size: 1.05rem; color: var(--ink);
  margin: 0;
}
body.t-of .cart__empty .btn { width: 100%; }

/* ============================================================
   24. THE RECEIPT — order confirmation
   The highest-emotion page in the store, and the last one still wearing the
   old costume: five stacked rounded cards, eight colour emoji, Inter heads,
   and FOUR solid-ink buttons competing on one screen (track, create account,
   three add-ons, continue shopping).

   Scoped to `.co-success`, which only Pages/CheckoutSuccess.cshtml sets.
   NOT to `.co-success__card` — Lakes reuses that class for its request form
   and must keep its card.
   ============================================================ */

body.t-of .co-success { max-width: 620px; margin: 0 auto; text-align: left; }

/* The green tick was the page's only circle. The order number is the news. */
body.t-of .co-success__badge { display: none; }
body.t-of .co-success > .section__title {
  text-align: left; font-size: clamp(1.5rem, 6.4vw, 2.1rem); line-height: 1.05; margin: 0 0 .4rem;
}
body.t-of .co-success__sub { text-align: left; font-size: .92rem; line-height: 1.55; color: var(--muted); margin: 0 0 1.4rem; }

/* Every panel becomes a section: 2px ink rule, Oswald micro-cap, content. */
body.t-of .co-success .co-success__card {
  max-width: none; margin: 0 0 1.5rem; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
body.t-of .co-success .co-success__card > h3 {
  font-family: var(--stencil); font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  font-size: .66rem; line-height: 1.4; color: var(--muted-2);
  margin: 0 0 .7rem; padding-top: .58rem; border-top: 2px solid var(--ink);
}
body.t-of .co-success .co-success__card > p { font-size: .9rem; line-height: 1.55; color: var(--muted); }
body.t-of .co-success .co-success__card > p strong { color: var(--ink); }

/* What happens next: a dated running order, not four emoji tiles. */
body.t-of .co-success .co-next { display: block; margin: 0 0 1.1rem; }
body.t-of .co-success .co-next__step {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  min-width: 0; padding: .6rem 0; border-bottom: 1px solid var(--line);
}
body.t-of .co-success .co-next__step strong {
  font-family: var(--stencil); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; color: var(--ink);
}
body.t-of .co-success .co-next__step small {
  display: block; text-align: right; font-size: .82rem; color: var(--muted); }

body.t-of .co-success .co-cardrow,
body.t-of .co-success .co-addon { border-top: 0; border-bottom: 1px solid var(--line); padding: .7rem 0; }
body.t-of .co-success .co-addon img { border-radius: 0; border: 1px solid var(--line); background: #fff; }
body.t-of .co-success .co-addon__body strong { font-size: .95rem; color: var(--ink); }
body.t-of .co-success .co-addon__deal { font-size: .82rem; color: var(--muted-2); }
body.t-of .co-success .co-addon__deal strong { color: var(--accent); }
body.t-of .co-success .co-cardrow code {
  font-family: var(--display); font-weight: 700; letter-spacing: .1em; color: var(--ink); }

body.t-of .co-success .co-ref input {
  border-radius: 0; border: 1.5px solid var(--ink); background: #fff; font-size: .84rem; }

/* ONE solid CTA on the page — the account, which is the only thing here the
   shopper can't already do. Everything else outlines. */
body.t-of .co-success .btn {
  border-radius: 0; background: none; color: var(--ink); border: 1.5px solid var(--ink);
  font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  min-height: 48px;
}
body.t-of .co-success .btn:hover { background: var(--panel); }
body.t-of .co-success .co-success__cta {
  background: var(--ink); color: #fff; border-color: var(--ink); width: 100%;
}
body.t-of .co-success .co-success__cta:hover { background: var(--accent); border-color: var(--accent); }
body.t-of .co-success .co-success__back {
  display: inline-flex; align-items: center; min-height: 44px;
  border: 0; padding: .5rem 0; font-size: .68rem; letter-spacing: .14em; color: var(--muted-2);
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
}
body.t-of .co-success .co-success__back:hover { background: none; color: var(--accent); text-decoration-color: var(--accent); }
body.t-of .co-success__help { font-size: .84rem; line-height: 1.55; color: var(--muted-2); }
body.t-of .co-success__help a,
body.t-of .co-success .co-success__card > p a {
  color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}

/* ============================================================
   25. THE ONES THE SWEEP MISSED
   A verification pass measured the rendered page rather than the tokens and
   found the tokens were right while hardcoded values walked straight past
   them: 999px pills, 50% circles, a 9px cart badge. Same for the 44px pass —
   it added 31 rules and still missed .icon-btn, i.e. the account, search,
   wishlist, cart and menu buttons and both drawer close buttons, on all 35
   pages (fixed at source in site.css so every theme benefits).
   ============================================================ */

/* ---------- 25a. radii the tokens never reached ---------- */
body.t-of .sg-units,
body.t-of .sg-cta,
body.t-of .sg-fit__card,
body.t-of .journal-article__cta,
body.t-of .trailpoints__track,
body.t-of .trailpoints__fill,
body.t-of .card__wish,
body.t-of .card__quick,
body.t-of .swatch,
body.t-of .card__swatch,
body.t-of .plp-dot,
body.t-of .cart-suggest__add,
body.t-of .cart-count,
body.t-of #cartCount,
body.t-of .of-check svg { border-radius: var(--radius); }
/* The filter sheet slides up from the bottom edge; a squared top matches the
   drawers rather than the rounded-sheet idiom this theme does not use. */
/* (the mobile filter sheet is .filters, squared in its own rule above) */
/* Latent: no product currently has a mixed-stock variant set, so this never
   renders today — but it is the only dashed border left in the stylesheet. */
body.t-of .opt-btn.is-oos { border-style: solid; }

/* ---------- 25b. the last of the 44px targets ---------- */
/* The swatch and the size chip keep their drawn size; the hit area grows past
   it, so the picker still reads as small squares while the thumb gets 44px. */
body.t-of .swatch,
body.t-of .plp-dot { position: relative; }
body.t-of .swatch::after,
body.t-of .plp-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}
body.t-of .chip { min-width: 44px; }
body.t-of .sg-units__btn { min-height: 44px; }
body.t-of .lake-near a,
body.t-of .lake-chip {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .5rem 0; margin: -.5rem 0;
}
@media (min-width: 761px) {
  body.t-of .nav__link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- 25c. headings the theme never named ---------- */
/* Every heading here is styled by class, so a heading whose class the theme
   does not name — or that has no class at all, like the <h3>s inside a journal
   article's body — fell through to the Inter body font. */
body.t-of .journal-article__title,
body.t-of .journal-article__body h2,
body.t-of .journal-article__body h3,
body.t-of .journal-article__body h4 {
  font-family: var(--display); font-weight: 700; letter-spacing: .01em;
}
body.t-of .journal-article__title { text-transform: uppercase; line-height: 1.08; }