/* ============================================================================
   Hippy Trippy skin. Linked LAST and only by the HT build (NEXT_PUBLIC_STORE=ht);
   the default build never references this file.

   The colours and font FAMILIES of the HT build are already rewritten before
   this file is read (src/lib/store/ht-map.json: purple -> black, HH yellow ->
   #F2FF00, cream -> white, Outfit/Figtree -> Gowun Batang, Montserrat/Impact/
   Anton -> Alfa Slab One). This file adds what a colour table cannot say:

     1. the two HT font faces
     2. page: no background picture
     3. type roles: display face for headings, nav, buttons, prices; never bold
     4. shape: square cards, tiles, images; 1px black hairlines; no drop shadows
     5. chrome: black announce bar with yellow text, black header, yellow footer
     6. home (direction D)
     7. product card
     8. collection page
     9. product page
    10. cart drawer, checkout hand-off, account
    11. "where it fits" block of the product page (HT copy has no inline styles)

   Every rule is scoped under [data-store="ht"] (the attribute is on <html>), so
   each selector outranks the rule it corrects whatever the order of the links.
   Measured values: HT/migration-2026-10-08/recon/design-tokens.json.
   Palette: #000000 black, #FFFFFF white, #F2FF00 neon yellow, #F3F3F3 card grey.
   ============================================================================ */

/* ── 1. Font faces ────────────────────────────────────────────────────────── */

/* Gowun Batang (text): Regular 400 and Bold 700, latin + latin-ext, from Google Fonts,
   SIL Open Font License 1.1 (public/ht/fonts/OFL.txt). */
@font-face {
  font-family: "Gowun Batang";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/ht/fonts/gowun-batang-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Gowun Batang";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/ht/fonts/gowun-batang-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Gowun Batang";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/ht/fonts/gowun-batang-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Gowun Batang";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/ht/fonts/gowun-batang-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Alfa Slab One (display) has ONE weight. The theme asks for 700-900 on most headings; with
   the stock 400-only declaration a browser would smear a fake bold over it. Declared here
   for the whole 100-900 range, the single real face answers every weight and nothing is
   synthesised. Same self-hosted files the theme already ships (public/theme-generated/fonts). */
@font-face {
  font-family: "Alfa Slab One";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/theme-generated/fonts/alfa-slab-one-0cd44f08-6NUQ8FmMKwSEKjnm5-4v-4Jh2dxhe_escmAm9w.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Alfa Slab One";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/theme-generated/fonts/alfa-slab-one-f45be765-6NUQ8FmMKwSEKjnm5-4v-4Jh2dJhe_escmA.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 2. Page ──────────────────────────────────────────────────────────────── */

/* second guard against a fake bold (inherited by everything) */
[data-store="ht"] {
  font-synthesis-weight: none;
}

/* the theme paints an illustrated tile on <body> and on .background-image, both !important */
[data-store="ht"] body,
[data-store="ht"] .background-image {
  background-image: none !important;
  background-color: #ffffff !important;
}

/* ── 3. Type roles ────────────────────────────────────────────────────────── */

/* headings: display face, one weight. Headings that the theme styles as small text
   (.h4/.h5 accordion and FAQ titles) stay in the text face. */
[data-store="ht"] :is(h1, h2, h3):not(.h4, .h5, .h6),
[data-store="ht"] :is(.h0, .h1, .h2, .h3) {
  font-family: "Alfa Slab One", serif;
  font-weight: 400;
}

/* questions, card titles and long labels: text face (an FAQ in slab capitals is unreadable).
   `html[data-store]` on purpose: the same weight as the heading rule above, so these, being
   later, win even where the element is an <h3>. */
html[data-store="ht"] .faq-block_title,
html[data-store="ht"] .accordion__title,
html[data-store="ht"] .hh-d .hh-d__name,
html[data-store="ht"] .hh-d__acc summary,
html[data-store="ht"] .hh-d__acc h3,
html[data-store="ht"] .hh-home-faq__items summary,
html[data-store="ht"] .pd-seo-intro__body :is(h2, h3, h4),
html[data-store="ht"] .rte :is(h3, h4),
html[data-store="ht"] .hhd-foot__legal-tx :is(h3, h6) {
  font-family: "Gowun Batang", serif;
  font-weight: 700;
}

/* section titles: upper case */
[data-store="ht"] .hh-d__h2,
[data-store="ht"] .hh-d__promise-h,
[data-store="ht"] .hh-d__rev-n,
[data-store="ht"] .hh-d__panel-t,
[data-store="ht"] .hh-d__sub-h,
[data-store="ht"] .collection__title h2,
[data-store="ht"] .collection__title .title,
[data-store="ht"] .updated-featured-products_title,
[data-store="ht"] .dz-rr__title,
[data-store="ht"] .dz-faq-collection .faq_title,
[data-store="ht"] .hh-home-faq__title,
[data-store="ht"] .pd-seo-intro__heading,
[data-store="ht"] .bundle-title,
[data-store="ht"] .hhd-foot__col h2,
[data-store="ht"] .hhd-mmenu__grp h2 {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* direction-D headings were tracked tight for a geometric sans */
[data-store="ht"] .hh-d :is(h1, h2, h3),
[data-store="ht"] .hh-d__ban-h,
[data-store="ht"] .hh-d__price,
[data-store="ht"] .hh-d__stack-sum-row--total strong {
  letter-spacing: 0;
}

/* prices and buttons: display face */
[data-store="ht"] .hh-d__price,
[data-store="ht"] .hh-d__mini-p,
[data-store="ht"] .hh-d__stack-sum-row--total strong,
[data-store="ht"] .hh-d__ban-h,
[data-store="ht"] .hh-d__eyebrow,
[data-store="ht"] .hh-d__pill,
[data-store="ht"] .hh-d__cta,
[data-store="ht"] .hh-d__buy,
[data-store="ht"] .hh-d__more,
[data-store="ht"] .hh-d__brand-t,
[data-store="ht"] .hh-d__sub-form button,
[data-store="ht"] .hhd-nav__cats a,
[data-store="ht"] .hhd-nav__deals > button,
[data-store="ht"] .hhd-nav__deals > a,
[data-store="ht"] .hhd-cart,
[data-store="ht"] .upc__price-val,
[data-store="ht"] .dz-checkout-btn,
[data-store="ht"] .dz-lm__btn,
[data-store="ht"] .hh-handoff__btn,
[data-store="ht"] .hhrv__btn {
  font-family: "Alfa Slab One", serif;
  font-weight: 400;
}

/* ── 4. Shape: square, hairline, flat ─────────────────────────────────────── */

/* cards, tiles, section frames and images are square (buttons keep 12-17px, pills stay pills) */
[data-store="ht"] .hh-d {
  --d-r: 0px;
}
html[data-store="ht"] {
  --dz-r-card: 0px;
}
/* (#product-grid re-declares the radius for phones with an id selector) */
[data-store="ht"] .updated-product-card,
[data-store="ht"] #product-grid .updated-product-card {
  --upc-radius: 0px;
}
[data-store="ht"] .hh-d__stack,
[data-store="ht"] .hh-d__stack-item,
[data-store="ht"] .hh-d__stack-row,
[data-store="ht"] .hh-d__stack-row img,
[data-store="ht"] .hh-d__stack-sum,
[data-store="ht"] .hh-d__cat-pic,
[data-store="ht"] .hh-d__mini-i,
[data-store="ht"] .hh-d__mini-i img,
[data-store="ht"] .hh-d__sub-band,
[data-store="ht"] .hh-d__chip,
[data-store="ht"] .hh-handoff,
[data-store="ht"] .hh-handoff__error,
[data-store="ht"] .breadcrumps,
[data-store="ht"] .collection,
[data-store="ht"] .pcats,
[data-store="ht"] .pcats__card,
[data-store="ht"] .faq-block,
[data-store="ht"] .dz-fr,
[data-store="ht"] .dz-sheet__panel,
[data-store="ht"] .dz-faq-collection.faq-section > .page-width,
[data-store="ht"] .dz-ck-pay,
[data-store="ht"] .dz-ck-bump,
[data-store="ht"] .dz-ck-sum,
[data-store="ht"] .dz-ck-mini,
[data-store="ht"] .dz-ck-card,
[data-store="ht"] #ContactForm,
[data-store="ht"] .product-information-container,
[data-store="ht"] .product-boxes-container,
[data-store="ht"] .product-information,
[data-store="ht"] .product-review,
[data-store="ht"] .product-review_image-container img,
[data-store="ht"] .bundle-product_container,
[data-store="ht"] .variants-slider,
[data-store="ht"] .pdp-dose__card,
[data-store="ht"] .pdp-cmp__wrap,
[data-store="ht"] .pdp-trip__card,
[data-store="ht"] .lab-report_product_section,
[data-store="ht"] .hhrv-card,
[data-store="ht"] .hhrv-card__photo img,
[data-store="ht"] .card--card,
[data-store="ht"] .card--standard .card__inner,
[data-store="ht"] .card .card__inner .card__media,
[data-store="ht"] .media > *:not(.zoom):not(.deferred-media__poster-button),
[data-store="ht"] .product-media-container.media-fit-cover .media,
[data-store="ht"] .product-media-container.media-fit-cover .product__modal-opener,
[data-store="ht"] .video video,
[data-store="ht"] .ts-two-blocks_item img,
[data-store="ht"] .updated-featured-collection img,
[data-store="ht"] #product-grid .updated-product-card .upc__image,
[data-store="ht"] [class*="section-"][class*="-padding"] {
  border-radius: 0 !important;
}

/* no drop shadows anywhere (focus rings and inset input borders of the theme are left alone) */
[data-store="ht"] .updated-product-card:hover,
[data-store="ht"] #dozo-cart-drawer-root.is-open,
[data-store="ht"] .dz-checkout-btn,
[data-store="ht"] .dz-ck-submit,
[data-store="ht"] .dz-reminder,
[data-store="ht"] .dz-cart-item__gift-ribbon,
[data-store="ht"] .dz-ck-item__ribbon,
[data-store="ht"] .pcats__card:hover,
[data-store="ht"] .dz-fr,
[data-store="ht"] .pg-arrow,
[data-store="ht"] .hhd-nav__pop,
[data-store="ht"] .hh-d__arrow,
[data-store="ht"] .hh-home .dz-promo__cta,
[data-store="ht"] .updated-featured-products_button {
  box-shadow: none !important;
}
[data-store="ht"] .hh-d__ban-art img,
[data-store="ht"] .pdp-dose__pill,
[data-store="ht"] .pdp-dose__drops {
  filter: none !important;
}
[data-store="ht"] .updated-product-card:hover {
  transform: none;
}

/* hairlines the colour table left as a faint tint become the 1px black line */
[data-store="ht"] .breadcrumps {
  border: 1px solid #000000;
}
[data-store="ht"] .pcats {
  border: 1px solid #000000;
}
[data-store="ht"] .dz-ch__strip-wrap {
  border-top-color: #000000;
  border-bottom-color: #000000;
}
[data-store="ht"] .hhrv-card {
  border: 1px solid #000000;
}

/* ── 5. Chrome ────────────────────────────────────────────────────────────── */

/* 5.1 announce bar: black, yellow text */
[data-store="ht"] .hhd-announce {
  background: #000000;
  color: #f2ff00;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
[data-store="ht"] .hhd-announce__msg {
  color: #f2ff00;
}
[data-store="ht"] .hhd-announce__nav a,
[data-store="ht"] .hhd-announce__nav a:visited {
  color: #ffffff;
}
[data-store="ht"] .hhd-announce__nav a:hover {
  color: #f2ff00;
}

/* 5.2 wordmark: the HT logo is white bubble lettering, so it always sits on a black plate.
   On the black header the plate disappears; on the yellow footer and the white checkout
   head it is the lockup. The peace-sign tile beside it is already black with a yellow sign. */
[data-store="ht"] .hhd-wm {
  background: #000000;
  padding: 4px 10px;
  gap: 8px !important;
}
/* neither part may give way: in the narrow footer column the peace sign was squeezed to 0 */
[data-store="ht"] .hhd-wm > svg,
[data-store="ht"] .hhd-wm__tx {
  flex: 0 0 auto;
}
[data-store="ht"] .hhd-wm__tx {
  font-size: 0 !important; /* no stray line box around the image */
  line-height: 0;
}
/* the image carries its size inline (the map entry of chrome/wordmark.tsx) */
[data-store="ht"] .hhd-wm img {
  display: block;
  max-width: none;
}

/* 5.3 header: black bar; white text and hairlines; yellow for hover, deals and the cart.
   The direction-D header reads its colours from custom properties declared on .hhd-hdr,
   so they are re-declared here; literals the stylesheet had to type (:visited) follow below. */
[data-store="ht"] .hhd-hdr {
  --d-bg: #000000;
  --d-ink: #ffffff;
  --d-line: #ffffff;
  --d-soft: #ffffff;
  --d-muted: #404040;
  --d-purple: #f2ff00;
  border-bottom: 1px solid #000000;
}
[data-store="ht"] .hhd-search {
  border-radius: 12px;
}
[data-store="ht"] .hhd-search input {
  color: #000000;
}
[data-store="ht"] .hhd-cart,
[data-store="ht"] .hhd-cart:hover,
[data-store="ht"] .hhd-cart:visited {
  background: #f2ff00;
  color: #000000;
}
[data-store="ht"] #cart-icon-bubble.hhd-cart:not([data-cart-count="0"]) .cart-count-bubble {
  background: #000000;
  color: #f2ff00;
}
[data-store="ht"] .hhd-nav__cats a,
[data-store="ht"] .hhd-nav__deals > button,
[data-store="ht"] .hhd-nav__deals > a {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px;
}
[data-store="ht"] .hhd-nav__cats a:visited {
  color: #ffffff;
}
[data-store="ht"] .hhd-nav__cats a:hover {
  color: #f2ff00;
}
/* the Deals menu is a white panel with a black hairline, like the HT mega menu */
[data-store="ht"] .hhd-nav__pop {
  --d-bg: #ffffff;
  --d-ink: #000000;
  --d-line: #000000;
  --d-soft: #f2ff00;
  --d-purple: #000000;
  border-radius: 0;
}
[data-store="ht"] .hhd-nav__pop a {
  border-radius: 0;
}
/* mobile menu: black panel, white links (HT: full-screen black menu) */
[data-store="ht"] .hhd-mmenu a:visited {
  color: #ffffff;
}
[data-store="ht"] .hhd-hdr a:focus-visible,
[data-store="ht"] .hhd-hdr button:focus-visible,
[data-store="ht"] .hhd-hdr input:focus-visible {
  outline-color: #f2ff00;
}

/* 5.4 reward bar: a white track with a black hairline (HT progress bar) */
[data-store="ht"] .hhd-bar__track {
  background: #ffffff;
  border: 1px solid #000000;
  height: 8px;
}
[data-store="ht"] .hhd-bar__fill {
  top: -1px;
  left: -1px;
  height: 8px;
}

/* 5.5 footer: yellow, black text and hairlines */
[data-store="ht"] .hhd-foot {
  --d-soft: #f2ff00;
  --d-line: #000000;
  --d-muted: #000000;
  --d-purple: #000000;
  background: #f2ff00;
  border-top: 1px solid #000000;
}
[data-store="ht"] .hhd-foot__col a:visited {
  color: #000000;
}
[data-store="ht"] .hhd-foot__col a:hover,
[data-store="ht"] .hhd-foot__legal-tx a:hover {
  text-decoration: underline;
}
[data-store="ht"] .hhd-foot__col h2 {
  font-size: 15px;
}
/* the logo lockup (sign + lettering) is 216px wide and does not shrink: keep its column that wide */
@media (min-width: 901px) {
  [data-store="ht"] .hhd-foot__top {
    grid-template-columns: minmax(220px, 1fr) minmax(0, 3.4fr);
  }
}
/* the theme's bare `footer` rule (older footer sections) keeps the same look */
[data-store="ht"] footer {
  border-top-color: #000000;
}

/* 5.6 checkout head and foot */
[data-store="ht"] .dz-ck .hhd-ckfoot a:visited {
  color: #404040;
}

/* ── 6. Home (direction D) ────────────────────────────────────────────────── */

/* hero tiles read yellow / white / black; each one framed */
[data-store="ht"] .hh-d__ban {
  border: 1px solid #000000;
}
/* primary buttons: black with a yellow label */
[data-store="ht"] .hh-d a.hh-d__pill,
[data-store="ht"] .hh-d__pill,
[data-store="ht"] .hh-d a.hh-d__cta,
[data-store="ht"] .hh-d__cta {
  background: #000000;
  color: #f2ff00;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
[data-store="ht"] .hh-d__cta {
  border-radius: 12px;
}
/* on the black tile the button turns over: yellow with a black label */
[data-store="ht"] .hh-d__ban--ink .hh-d__pill {
  background: #f2ff00;
  color: #000000;
}
[data-store="ht"] .hh-d__buy {
  background: #000000;
  color: #f2ff00;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
[data-store="ht"] .hh-d a.hh-d__more,
[data-store="ht"] .hh-d__more {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 13px;
}
[data-store="ht"] .hh-d__stack,
[data-store="ht"] .hh-d__vid {
  border: 1px solid #000000;
}
[data-store="ht"] .hh-d__cat-pic {
  background: #ffffff;
}
[data-store="ht"] .hh-d__chip--deal,
[data-store="ht"] .hh-d__chip--new {
  color: #f2ff00;
}
/* slider arrows: black square-ish buttons, white glyph */
[data-store="ht"] .hh-d__arrow {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
  border-radius: 13px;
}
/* signup band: black, yellow headline, yellow button */
[data-store="ht"] .hh-d__sub-h {
  color: #f2ff00;
}
[data-store="ht"] .hh-d__sub-form button {
  background: #f2ff00;
  color: #000000;
  text-transform: uppercase;
}
[data-store="ht"] .hh-d__sub-form input {
  border-radius: 12px;
}
[data-store="ht"] .hh-d a:focus-visible,
[data-store="ht"] .hh-d button:focus-visible {
  outline-color: #000000;
}

/* ── 7. Product card (collection grid, cart page, product page rows) ─────── */

/* HT cards are white with a black hairline and black type; the picture tile stays yellow.
   Hover keeps the theme's turn-over: the whole card goes yellow. */
[data-store="ht"] .updated-product-card {
  background: #ffffff;
  border: 1px solid #000000;
  /* the theme sets its heading family on the whole card (title, rating line, badges); in the
     display slab that is unreadable and overflows, so the card is set in the text face and
     only the price keeps the display face (section 3) */
  font-family: "Gowun Batang", serif;
}
[data-store="ht"] .updated-featured-products_text {
  font-family: "Gowun Batang", serif;
}
[data-store="ht"] .updated-product-card:hover {
  background: #f2ff00;
  border-color: #000000;
}
[data-store="ht"] .updated-product-card .upc__title {
  color: #000000;
  font-family: "Gowun Batang", serif;
  font-weight: 700;
}
[data-store="ht"] .updated-product-card .upc__meta,
[data-store="ht"] .updated-product-card .upc__price-val {
  color: #000000;
}
[data-store="ht"] .updated-product-card .upc__price-from {
  color: #404040;
}
[data-store="ht"] .updated-product-card .upc__ico svg {
  --fill-0: #000000;
  --stroke-0: #000000;
}
/* collection grid: second price line and the "+" button were drawn for a dark card */
[data-store="ht"] #shopify-section-template--product-grid #product-grid .updated-product-card .upc__price-was,
[data-store="ht"] #shopify-section-template--product-grid #product-grid .updated-product-card:hover .upc__price-was {
  color: rgba(0, 0, 0, 0.55);
}
[data-store="ht"] #shopify-section-template--product-grid #product-grid .updated-product-card .upc__price-save,
[data-store="ht"] #shopify-section-template--product-grid #product-grid .updated-product-card:hover .upc__price-save {
  color: #000000;
  background: #f2ff00;
  padding: 0 4px;
}
[data-store="ht"] #shopify-section-template--product-grid #product-grid .updated-product-card:hover .upc__price-save {
  background: #000000;
  color: #f2ff00;
}
[data-store="ht"] #shopify-section-template--product-grid #product-grid .updated-product-card .upc__add {
  background: #000000;
  color: #f2ff00;
}

/* ── 8. Collection page ───────────────────────────────────────────────────── */

/* "Load more": black with a yellow label */
html[data-store="ht"] body.gradient div.shopify-section .dz-lm__btn,
html[data-store="ht"] body.gradient .dz-lm__btn,
[data-store="ht"] .dz-lm__btn {
  background: #000000;
  border-color: #000000;
  color: #f2ff00;
  border-radius: 12px;
}
[data-store="ht"] .dz-lm__btn:hover {
  background: #000000;
}
[data-store="ht"] .dz-lm__bar {
  background: #ffffff;
  border: 1px solid #000000;
}
/* links in the SEO text: black, underlined, yellow marker on hover only */
[data-store="ht"] .pd-seo-intro__body a {
  background: transparent;
  color: #000000;
  text-decoration: underline;
}
[data-store="ht"] .pd-seo-intro__body a:hover {
  background: #f2ff00;
}

/* ── 9. Product page ──────────────────────────────────────────────────────── */

/* white-on-yellow hover labels of two theme buttons were unreadable already */
[data-store="ht"] .products_button:hover,
[data-store="ht"] .products_button:active,
[data-store="ht"] .button_updated:hover,
[data-store="ht"] .button_updated:active {
  color: #000000;
}
[data-store="ht"] .hhrv__btn {
  color: #f2ff00;
  border-radius: 12px;
}

/* ── 10. Cart drawer, hand-off, account ───────────────────────────────────── */

/* drawer: solid black hairlines, grey picture wells, Checkout black with a yellow label */
[data-store="ht"] #dozo-cart-drawer-root {
  --dz-r-card: 0px;
  --dz-line: #000000;
  --dz-line-strong: #000000;
  --dz-cta-shadow: none;
  --dz-accent: #000000;
  --dz-accent-hover: #1f1f1f;
  --dz-on-accent: #f2ff00;
}
[data-store="ht"] .dz-cart-item__image-wrap,
[data-store="ht"] .dz-ck-item__img,
[data-store="ht"] .dz-ac-thumb,
[data-store="ht"] .dz-ac-item__img {
  background: #f3f3f3;
}
/* hand-off panel on /checkout */
[data-store="ht"] .hh-handoff__btn {
  border-radius: 17px;
  text-transform: uppercase;
}
[data-store="ht"] .hh-handoff--quiet {
  border: 1px solid #000000;
}
/* account: a black page after the colour table; cards need a visible edge */
[data-store="ht"] .dz-ac {
  --ac-line: rgba(255, 255, 255, 0.45);
  --ac-line-strong: #ffffff;
  --ac-radius: 0px;
  --ac-radius-sm: 0px;
}
[data-store="ht"] .dz-ac-card,
[data-store="ht"] .dz-ac-list {
  border: 1px solid #ffffff;
}

/* ── 11. "Where it fits" block of the product page ────────────────────────── */

/* HH's copy styles this block with inline style attributes; HT's copy is plain
   <h2>/<p>/<a>, so the same shape comes from here. Inline styles, where present, still win. */
[data-store="ht"] .dozo-where-fits h2 {
  font-size: 2.4rem;
  line-height: 1.15;
  margin: 0 0 12px;
  text-transform: uppercase;
}
[data-store="ht"] .dozo-where-fits p {
  margin: 0 0 14px;
  line-height: 1.6;
}
[data-store="ht"] .dozo-where-fits p a {
  color: #000000;
  font-weight: 700;
  text-decoration: underline;
}
[data-store="ht"] .dozo-where-fits > a {
  display: inline-block;
  background: #000000;
  color: #f2ff00;
  padding: 12px 26px;
  border-radius: 12px;
  font-family: "Alfa Slab One", serif;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
}
[data-store="ht"] .dozo-where-fits ul {
  margin: 0 0 14px;
  padding-left: 1.2em;
  list-style: disc;
}