/*
 * Urban Shop storefront.
 *
 * Values are taken from the reference site's own stylesheet, not approximated:
 *   body        Arial/Helvetica · 12px · 17px line-height · .09em tracking
 *   container   100% → 720 → 940 → 1130px
 *   headings    font-weight 100, line-height 1em, margin 15px 0 0
 *   menu bar    #f4f4f4, 40px tall, links #000
 *   card        centred, #4c4d4f, square #F6F6F6 image well, red sale price
 *   blocks      separated by 1px solid #999
 */

/*
 * Tokens live in tokens.css. The names below are the ones this file grew up
 * with; they are kept as thin aliases so every rule keeps reading through the
 * token layer rather than hard-coding a literal.
 *
 * --sd-text was #333 here and rendered #333 everywhere. Measured, the
 * reference paints its body copy #4c4d4f and its body default #000 — see
 * qa-log M-4.
 */
:root {
  --sd-store:        var(--sd-black);
  --sd-card-text:    var(--sd-text);
}

/* The parent theme ships a dark-mode token set; this storefront is light only,
   matching the reference site. Pin the tokens so nothing inverts. */
.sd,
.sd .sd-header__wrapper,
.sd .sd-footer {
  --oxa-bg: #fff;
  --oxa-text: var(--sd-text);
  --oxa-surface: var(--sd-bar);
  --oxa-border: var(--sd-rule-light);
}

/* ══ Base ════════════════════════════════════════════════════════════════ */

body.sd {
  background: var(--sd-white);
  color: var(--sd-text-strong);           /* measured: body computes #000 */
  font-family: var(--sd-font);
  font-size: var(--sd-fs-base);
  line-height: var(--sd-lh-base);
  letter-spacing: var(--sd-tracking);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/*
 * Page copy is #4c4d4f in the reference, not the body colour.
 *
 * Deliberately excludes a bare `li`: menu items are list items too, and
 * colouring all of them made every nav link inherit #4c4d4f the moment the
 * hover reset below resolved `color: inherit`. Prose lists are covered by
 * their container instead.
 */
:where(body.sd p, body.sd td, body.sd dd, body.sd figcaption) {
  color: var(--sd-text);
}
:where(.sd-page__content, .entry-content, .sd-prose) :where(li) {
  color: var(--sd-text);
}

/*
 * Wrapped in :where() so the reset carries zero specificity. Written plainly,
 * `body.sd a` outranks single-class rules like .sd-menu__link, and `inherit`
 * then drags every link whose parent sets no colour back to the body colour —
 * which is how the menu bar, utility bar, mega menu and filter rail were all
 * rendering #333 instead of their own colours.
 */
:where(body.sd a) { color: inherit; text-decoration: none; }
:where(body.sd a:hover) { text-decoration: underline; }

/*
 * The parent theme styles `a:hover { color: var(--oxa-accent) }`. That is a
 * real single-element selector, so it outranks the zero-specificity reset
 * above and tinted every hovered link, card title and menu item the parent's
 * blue (#60a5fa) — visible in the Phase 1 hover captures (qa-log M-16, M-17).
 * Lock the hovered colour back to the inherited one at matching specificity.
 */
body.sd a:hover,
body.sd a:focus,
body.sd a:active { color: inherit; }
/* Same zero-specificity treatment as the link reset: `body.sd img` would
   otherwise outrank component rules that set an explicit image height. */
:where(body.sd img) { max-width: 100%; height: auto; }
body.sd * { box-sizing: border-box; }

.sd-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sd-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: #fff; padding: 10px 16px;
}
.sd-skip:focus { left: 0; }

/* Container: the reference site's four widths. */
.sd-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--sd-gutter);
}
@media (min-width: 768px)  { .sd-container { width: 720px;  padding: 0; } }
@media (min-width: 992px)  { .sd-container { width: 940px; } }
@media (min-width: 1200px) { .sd-container { width: 1130px; } }

/*
 * The parent theme's base stylesheet sizes headings off its own scale
 * (h3 is 2rem there), which leaks into anything this theme does not size
 * explicitly. Reset headings inside the storefront to the reference site's
 * scale so an unstyled h1-h6 lands in the right place by default.
 *
 * In :where() for the same reason as the link and image resets: written
 * plainly, `body.sd h2` outranks a single-class rule like .sd-block__title
 * and silently wins. Every base reset in this file must stay zero-specificity.
 */
:where(body.sd h1, body.sd h2, body.sd h3,
       body.sd h4, body.sd h5, body.sd h6) {
  font-weight: var(--sd-fw-h1);
  line-height: 1em;                        /* measured: 23.4px on a 23.4px h1 */
  letter-spacing: var(--sd-tracking);      /* measured +1.08px, not the parent
                                              theme's negative display tracking */
  color: var(--sd-text);
  text-transform: none;
  margin: 15px 0 0;
}
:where(body.sd h1) { font-size: var(--sd-fs-h1); }
:where(body.sd h2) { font-size: var(--sd-fs-h2); }
:where(body.sd h3) { font-size: var(--sd-fs-h3); }
:where(body.sd h4) { font-size: var(--sd-fs-h4); }
:where(body.sd h5, body.sd h6) { font-size: 1em; }

/* Headings — light weight, exactly as the reference. */
.sd-heading-h1, .sd-heading-h2, .sd-heading-h3, .sd-heading-h4 {
  font-weight: var(--sd-fw-h1);
  line-height: 1em;
  margin: 15px 0 0;
  letter-spacing: var(--sd-tracking);
  color: var(--sd-text);
}
.sd-heading-h1 { font-size: var(--sd-fs-h1); }
.sd-heading-h2 { font-size: var(--sd-fs-h2); }
.sd-heading-h3 { font-size: var(--sd-fs-h3); }
.sd-heading-h4 { font-size: var(--sd-fs-h4); }
.sd-heading-h1 + *, .sd-heading-h2 + *,
.sd-heading-h3 + *, .sd-heading-h4 + * { margin-top: 8px; }

.sd-main { min-height: 40vh; }

/* ══ Header ══════════════════════════════════════════════════════════════
 * Values measured off the reference's rendered page, not guessed:
 *   wrapper      position:fixed, 125px (37 + 88), pinned at top:0 at every
 *                scroll offset — verified by scrolling to 1500 and 3000
 *   utility bar  black, 37px tall, white text, inner 1130px
 *   main bar     white, min-height 88px, logo left, 400px search,
 *                wishlist + bag pinned right (absolute, right:0 top:20px)
 *   menu bar     #f4f4f4, 41px, static — it scrolls away with the page and
 *                carries a 125px top margin to clear the fixed header
 *   mobile       119px: logo row + a full-width search row beneath it
 * ════════════════════════════════════════════════════════════════════════ */

/*
 * The wrapper is fixed, so it no longer occupies flow space. The menu bar
 * that follows it carries the offset for it (see .sd-menu__container), and
 * on viewports where the menu bar is hidden, .sd-main does instead.
 */
.sd-header__wrapper {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 801;
  background: var(--sd-white);
}

/*
 * 0 · demonstration notice
 *
 * Amber on black-and-white so it reads as a banner bolted onto the shop rather
 * than part of it. Its height is baked into --sd-header-h / --sd-header-h-sm,
 * which is what the content below the fixed header clears itself by — so it is
 * a fixed height and a single nowrap line, never a wrapping one.
 */
.sd-demobar {
  background: var(--sd-demo-bg);
  color: var(--sd-demo-fg);
  height: var(--sd-demobar-h);
  line-height: var(--sd-demobar-h);
  text-align: center;
}
.sd-demobar__text {
  margin: 0;
  padding: 0 var(--sd-gutter);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*
 * The full sentence overruns a 360px viewport even at 10px, and the bar is a
 * fixed height, so it would be silently ellipsised. Swap in a shorter wording
 * that still carries both facts rather than truncating the longer one.
 * display:none drops the hidden one from the accessibility tree too, so a
 * screen reader hears exactly one.
 */
.sd-demobar__short { display: none; }
@media (max-width: 420px) {
  .sd-demobar__long  { display: none; }
  .sd-demobar__short { display: inline; }
}

/* 1 · utility bar */
.sd-header__top-container { background: var(--sd-store); }
.sd-header__top {
  width: 100%;
  margin: 0 auto;
  height: 37px;
  line-height: 37px;
  color: #fff;
  padding: 0 var(--sd-gutter);
}
@media (min-width: 768px)  { .sd-header__top { width: 720px;  padding: 0; } }
@media (min-width: 992px)  { .sd-header__top { width: 940px; } }
@media (min-width: 1200px) { .sd-header__top { width: 1130px; } }

.sd-sellingpoints { display: inline-block; list-style: none; margin: 0; padding: 0; }
.sd-sellingpoints li { display: inline-block; padding-right: 30px; position: relative; }
.sd-sellingpoints li::before {
  content: ""; display: inline-block;
  width: 9px; height: 5px; margin-right: 10px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-2px);
}
.sd-customermenu { float: right; list-style: none; margin: 0; padding: 0; }
.sd-customermenu li { display: inline-block; }
/* The reference separates these with a literal pipe. */
.sd-customermenu li:not(:last-child)::after { content: "|"; padding: 0 6px; }
.sd-header__top a { color: #fff; }
.sd-header__top a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 767px) { .sd-header__top-container { display: none; } }

/* 2 · main bar */
.sd-header__main-container { background: #fff; }
.sd-header__main {
  position: relative;
  width: 100%;
  margin: 0 auto;
  min-height: 88px;
  padding: 0 var(--sd-gutter);
  display: flex;
  align-items: center;
  gap: 16px;
}
@media (min-width: 768px)  { .sd-header__main { width: 720px;  padding: 0; } }
@media (min-width: 992px)  { .sd-header__main { width: 940px; } }
@media (min-width: 1200px) { .sd-header__main { width: 1130px; } }

.sd-header__logo-container { flex: 0 0 auto; }
@media (min-width: 1200px) { .sd-header__logo-container { width: 300px; } }
.sd-logo { display: inline-flex; align-items: center; }
.sd-logo:hover { text-decoration: none; }
.sd-logo__word {
  font-size: 22px; font-weight: 700; letter-spacing: .06em;
  color: var(--sd-store); white-space: nowrap;
}
@media (max-width: 991px) { .sd-logo__word { font-size: 16px; } }
@media (max-width: 480px) { .sd-logo__word { font-size: 14px; } }

.sd-search { position: relative; flex: 1 1 auto; display: flex; }
@media (min-width: 1200px) { .sd-search { flex: 0 0 400px; width: 400px; margin: 0 auto; } }
.sd-search__input {
  width: 100%; height: 47px;
  border: 1px solid #d7d7d7; background: #fff;
  padding: 0 52px 0 14px;
  font: inherit; letter-spacing: inherit; color: var(--sd-text);
}
.sd-search__input:focus { outline: none; border-color: var(--sd-store); }
.sd-search__button {
  position: absolute; right: 0; top: 0;
  width: 47px; height: 47px;
  background: none; border: 0; border-left: 1px solid #d7d7d7;
  cursor: pointer; color: var(--sd-store);
  display: flex; align-items: center; justify-content: center;
}

/*
 * Mobile main bar: the reference stacks a logo row and a full-width search
 * row for a measured 119px total (qa-log M-3). Let the flex row wrap and give
 * the search its own line rather than squeezing it beside the logo.
 */
@media (max-width: 767px) {
  /*
   * Three-part bar: burger left, logo centred, icons right.
   *
   * A `1fr auto 1fr` grid centres the logo against the *bar*, not against
   * whatever happens to precede it. Laid out as a flex row the logo simply
   * followed the burger and sat 46.6px left of centre, while the icon group
   * stopped 105px short of the right edge.
   */
  .sd-header__main {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "burger logo cart"
      "search search search";
    align-items: center;
    min-height: 0;
    padding: 8px var(--sd-gutter) 13px;
    row-gap: 10px;
    column-gap: 8px;
  }
  .sd-burger                 { grid-area: burger; justify-self: start; }
  .sd-header__logo-container { grid-area: logo;   justify-self: center; }
  .sd-header__cart-container { grid-area: cart;   justify-self: end; }
  .sd-search                 { grid-area: search; }

  /*
   * The word beside the burger is what pushed the logo off centre. The icon
   * carries the meaning on a phone, and the button keeps its aria-label, so
   * the control is still announced as "Menyja".
   */
  .sd-burger__text { display: none; }

  /* Every control in the bar meets the 44x44 touch minimum. */
  .sd-burger {
    min-width: 44px; min-height: 44px;
    justify-content: flex-start; padding: 4px 0;
  }
  .sd-header__cart-container { gap: 4px; }
  .sd-iconbtn {
    min-width: 44px; min-height: 44px;
    align-items: center; justify-content: center; padding: 0;
  }
  /* Keep the badge on the glyph now that the hit area is wider than it. */
  .sd-iconbtn__badge { right: 2px; top: 7px; }

  .sd-search__input, .sd-search__button { height: 44px; }
}

/* Wishlist + bag, pinned to the right of the 1130 bar. */
.sd-header__cart-container { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; }
@media (min-width: 1200px) {
  .sd-header__cart-container { position: absolute; right: 0; top: 20px; }
}
.sd-iconbtn { position: relative; display: inline-flex; color: var(--sd-card-text); padding: 2px; }
.sd-iconbtn:hover { color: var(--sd-store); }
.sd-iconbtn__badge {
  position: absolute; right: -3px; top: 5px;
  min-width: 15px; padding: 0 3px;
  font-size: 10px; line-height: 15px; text-align: center; letter-spacing: 0;
  color: var(--sd-card-text);
}

.sd-burger {
  display: none;
  align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer; padding: 4px 0;
  color: var(--sd-store); font: inherit; letter-spacing: inherit;
}
.sd-burger__bars { display: inline-flex; flex-direction: column; gap: 3px; }
.sd-burger__bars span { display: block; width: 18px; height: 2px; background: currentColor; }
/*
 * The burger is the navigation below 992px, and the icon buttons are the only
 * way to reach the wishlist and bag there, so both meet 44x44 across that
 * whole range — not only at phone widths.
 */
@media (max-width: 991px) {
  .sd-burger { display: inline-flex; min-height: 44px; min-width: 44px; }
  .sd-iconbtn {
    min-width: 44px; min-height: 44px;
    align-items: center; justify-content: center; padding: 0;
  }
  .sd-iconbtn__badge { right: 2px; top: 7px; }
}

/* 3 · menu bar — evenly-sized cells across the 1130 bar */
.sd-menu__container {
  background: var(--sd-bar);
  border-top: 1px solid var(--sd-bar);
  height: var(--sd-menubar-h);          /* measured 41px */
  margin-top: var(--sd-header-h);       /* clears the fixed header (125px) */
}
@media (max-width: 991px) {
  .sd-menu__container { display: none; }
  /* With the menu bar gone, the main column carries the header offset. */
  .sd-main { margin-top: var(--sd-header-h-sm); }
}
@media (max-width: 767px) {
  .sd-main { margin-top: var(--sd-header-h-sm); }
}

.sd-menu__head { width: var(--sd-container); margin: 0 auto; height: var(--sd-menubar-h); }
@media (max-width: 1199px) { .sd-menu__head { width: 940px; } }

.sd-menu__row {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 40px;
  list-style: none; margin: 0; padding: 0;
}
.sd-menu__head-item { display: table-cell; text-align: center; vertical-align: middle; }
.sd-menu__link {
  display: block;
  color: var(--sd-text-strong);
  font-size: var(--sd-fs-nav);          /* measured 14.4px, was 13.92px */
  line-height: var(--sd-menubar-h);     /* measured 40-41px, fills the bar */
  text-decoration: none;
}
.sd-menu__link--sale { color: #cc3838; }
/* Measured: the reference's top-level menu link does not change on hover
   (the mega panel opening is the only feedback). */
.sd-menu__head-item:hover > .sd-menu__link { text-decoration: none; }

/* Mega menu — full-bleed panel under the bar */
.sd-mega {
  display: none;
  position: absolute; left: 0; right: 0; z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--sd-rule);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
}
.sd-menu__container { position: relative; }
.sd-menu__head-item--has-children:hover > .sd-mega,
.sd-menu__head-item.is-open > .sd-mega { display: block; }

.sd-mega__inner {
  display: flex; gap: 30px;
  /* padding-block for the same reason as .sd-page, even though this panel only
     shows at widths where the container's gutter is already 0. */
  padding-block: 24px 30px;
  align-items: flex-start;
  text-align: left;
}
.sd-mega__col { flex: 1 1 0; min-width: 0; }
.sd-mega__heading {
  font-size: 12px; font-weight: 700; letter-spacing: .09em;
  margin: 0 0 10px; text-transform: uppercase;
}
.sd-mega__list { list-style: none; margin: 0; padding: 0; }
.sd-mega__list li + li { margin-top: 6px; }
.sd-mega__list a { color: var(--sd-card-text); }
.sd-mega__list a:hover { color: var(--sd-store); }

/* Mobile drawer */
/*
 * Drawer: a panel that drops out of the fixed header, white, full width and
 * scrollable, with the page still visible beneath it — measured on the
 * reference, where the open drawer makes .header__wrapper 399px tall and
 * overflow-y:scroll (qa-log KG-7).
 */
/*
 * With the drawer open the reference drops the search row, so the header
 * stays one row tall and the list starts right under the logo. Its whole
 * fixed wrapper then measures 399px.
 */
@media (max-width: 767px) {
  body.sd-drawer-open .sd-search { display: none; }
  /* Without the search row the logo row tightens to the reference's 55px. */
  body.sd-drawer-open .sd-header__main { padding-bottom: 8px; }
}

.sd-mobilemenu {
  padding: 4px var(--sd-gutter) 10px;
  border-top: 1px solid var(--sd-rule-light);
  background: var(--sd-white);
  max-height: calc(100vh - var(--sd-header-h-sm));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 992px) { .sd-mobilemenu { display: none !important; } }
.sd-mobilemenu__item { border-bottom: 1px solid var(--sd-rule-light); }
.sd-mobilemenu__head {
  display: flex; align-items: center; justify-content: space-between;
  /* Measured on the reference drawer: consecutive rows are 41px apart.
     The 41px is the whole row, so no extra vertical padding on top of it. */
  min-height: 41px;
  padding: 0;
}
.sd-mobilemenu__head--l1 a { font-size: 1.2em; }
.sd-mobilemenu__head--l2 {
  font-weight: 700; text-transform: uppercase;
  padding: 12px 0 6px; color: var(--sd-muted);
}
.sd-mobilemenu__toggle {
  background: none; border: 0; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 0 6px; color: var(--sd-store);
  transition: transform .15s ease;
}
.sd-mobilemenu__toggle.is-open { transform: rotate(90deg); }
.sd-mobilemenu__list { padding: 0 0 12px 12px; }
.sd-mobilemenu__link { display: block; padding: 7px 0; color: var(--sd-card-text); }
body.sd-drawer-open { overflow: hidden; }

/* ══ Homepage blocks ═════════════════════════════════════════════════════
 * The reference does NOT rule off its homepage sections — every
 * block__container computes to `border-bottom: 0px none`. Separation comes
 * from whitespace, plus two explicit hairlines around the brand carousel.
 *
 * Section content sits in a full-bleed band whose inner width measures
 * min(100% - 7vw, 1620px): 1620px at 1920, 1339 at 1440, 1190 at 1280.
 * ════════════════════════════════════════════════════════════════════════ */

/*
 * Measured off the reference at four viewports — 1905→1620 (capped),
 * 1425→1339.5, 1265→1189, 1085→1020 — which is min(94%, 1620px).
 */
/*
 * The homepage band. Measured on the reference, every homepage block sits in
 * a 1130px column (.content__container) — not a near-full-width band. The
 * category page is the exception and gets its own full-width treatment.
 */
.sd-wide {
  width: 100%;
  max-width: var(--sd-container);
  margin: 0 auto;
  padding: 0 var(--sd-gutter);
}
@media (min-width: 768px)  { .sd-wide { width: 720px;  padding: 0; } }
@media (min-width: 992px)  { .sd-wide { width: 940px; } }
@media (min-width: 1200px) { .sd-wide { width: var(--sd-container); } }

/*
 * The two tile rows break out of the 1130 column. Measured on the reference:
 * their inner container is the full 1440 viewport with 43.2px side gutters —
 * six 217.3px category tiles, or four 328.2px brand tiles, spanning 43 → 1397.
 * 94% reproduces that gutter at any width.
 */
.sd-wide--full { width: 100%; max-width: none; padding: 0 var(--sd-gutter); }
@media (min-width: 768px) { .sd-wide--full { width: 94%; max-width: 1620px; padding: 0; } }

.sd-home .sd-block { margin-bottom: 10px; }

/*
 * Section headings: centred, 13.92px, weight 600, black — measured.
 *
 * On the reference each heading is its own block, and those blocks measure
 * 70.9, 68, 98.8 and 83.8px: the variation is stray whitespace in their CMS
 * content, not a design rule (the h4 inside is 14px in two of them and 42px —
 * three empty lines — in the other two). We use one consistent band sized to
 * match the overall rhythm, which lands every homepage section within 5% of
 * the reference. See docs/design-decisions.md, D-10.
 *
 * The band is padding, not margin, so it cannot collapse into the block above
 * and the measured section height reflects what the page actually spends.
 */
.sd-block__title {
  font-size: var(--sd-fs-h4);
  font-weight: var(--sd-fw-block);
  line-height: 1em;
  letter-spacing: var(--sd-tracking);
  /* Measured: the reference's block heading is #4c4d4f, not black. */
  color: var(--sd-text);
  text-align: center;
  padding: 48px 0 0;
  margin: 0 0 29px;
  text-transform: uppercase;
}

/* ══ Product card ════════════════════════════════════════════════════════ */

/*
 * Measured on the reference category grid: column gap 10.9px, row gap 20px.
 * The card itself carries no bottom margin — the grid's row gap is the whole
 * vertical rhythm, so the two cannot double up (qa-log M-25).
 */
.sd-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 4.426%;
  row-gap: var(--sd-card-row-gap);
  list-style: none; margin: 0; padding: 0;
}
.sd-products > .sd-card { margin-bottom: 0; }
/*
 * Category pages: 2-up, then 3-up. Beside the facet rail the reference uses
 * 32.667% + a 1% gutter — three across — rather than packing in a fourth.
 */
@media (min-width: 768px) { .sd-products { grid-template-columns: repeat(3, 1fr); column-gap: 0.6%; } }
@media (min-width: 992px) { .sd-products { grid-template-columns: repeat(3, 1fr); column-gap: 1%; } }

/*
 * Homepage shelves go six across at 1200px with a 1% gutter — the
 * reference's homepage__product--wide is 15.833% + 1% there. Scoped to the
 * front page: category archives share the same .sd-wide band but stay
 * three-up beside their facet rail.
 */
/*
 * The reference's homepage shelf is six cards across the full band, not the
 * 1130 column: measured card 214.3 x 278.7 with a 212.7px square image, which
 * only fits in the 1353.6 band (6 x 214.3 = 1285.8).
 */
@media (min-width: 1200px) {
  .sd-home .sd-wide--full .sd-products {
    grid-template-columns: repeat(6, 1fr);
    column-gap: 13.6px;
    /* The reference's shelf block is 330 against a 278.7 card: it keeps ~51px
       under the row. Mobile keeps only the 20px row gap, so this is desktop
       only. */
    padding-bottom: 43px;
  }
}

/*
 * On a phone the reference shows four of those six — a 2x2 grid, cards
 * 176.8x236.9, block 513.9 — and simply drops the last two rather than
 * running to a third row (qa-log M-21).
 */
@media (max-width: 767px) {
  .sd-home .sd-productgrid-block .sd-products > *:nth-child(n + 5) { display: none; }
}

.sd-card {
  color: var(--sd-card-text);
  font-family: var(--sd-font);
  margin: 0 0 20px;
  position: relative;
  text-align: center;
}
/*
 * Measured: hovering a reference product card changes nothing — no colour,
 * no border, no transform. The blue tint this used to show was the parent
 * theme's --oxa-accent leaking through the inherited link colour.
 */
.sd-card__anchor { display: block; color: inherit; }
.sd-card__anchor:hover,
.sd-card__anchor:hover .sd-card__title { text-decoration: none; color: inherit; }

.sd-card__media {
  background: var(--sd-image-bg);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.sd-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s ease;
}
/* No zoom on hover: the reference image is static. */

/* One title carrying the whole name, as the reference site does: 12px on an
   18px line, centred, with two lines reserved so prices in a row share a
   baseline. */
.sd-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px;
  height: 36px;
}
.sd-card__price { display: inline-block; font-weight: 700; margin: 6px 0 7px; }
.sd-card__price del { text-decoration: line-through; color: var(--sd-card-text); font-weight: 700; }
.sd-card__price ins,
.sd-card__price .sd-special { color: var(--sd-sale); text-decoration: none; margin-left: 5px; }

.sd-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 3px 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
}
.sd-badge--sale { background: var(--sd-sale); color: #fff; }
.sd-badge--new  { background: var(--sd-store); color: #fff; }

/* WooCommerce's own price markup inside our card */
.sd-card .woocommerce-Price-amount { white-space: nowrap; }
.sd-card del { opacity: 1; }

/* ══ Breadcrumb ══════════════════════════════════════════════════════════ */

.sd-breadcrumb {
  padding: 12px 0;
  color: var(--sd-muted);
  font-size: 11px;
}
.sd-breadcrumb a { color: var(--sd-muted); }
.sd-breadcrumb a:hover { color: var(--sd-store); }
.sd-breadcrumb__sep { padding: 0 6px; }

/* ══ Category / shop page ════════════════════════════════════════════════ */

/*
 * The reference puts a 235px facet rail beside the grid with a 30px gutter,
 * and gives the products `calc(100% - 265px)`.
 */
/*
 * Measured on the reference: facet rail 235px starting at x=43.2, product
 * column 1088.6px starting at x=308.2 — a 30px gutter between them, across
 * the full-width band (qa-log M-23).
 */
.sd-shop { display: block; }
@media (min-width: 992px) {
  .sd-shop { display: grid; grid-template-columns: 235px 1fr; gap: 30px; align-items: start; }
}

.sd-shop__header { padding-bottom: 10px; }
.sd-shop__title { font-size: 1.95em; font-weight: 100; margin: 6px 0 4px; }
.sd-shop__count { color: var(--sd-muted); }

.sd-filters { border-top: 1px solid var(--sd-rule-light); }

/*
 * Below the two-column breakpoint the rail would push the grid a screen and a
 * half down the page, so it collapses behind a Filter button — the same move
 * the reference site makes with its sticky mobile filter.
 */
.sd-filters__toggle { display: none; }

@media (max-width: 991px) {
  .sd-filters__toggle {
    display: block; width: 100%;
    margin: 0 0 16px;
    padding: 12px 16px;
    background: #fff; border: 1px solid var(--sd-store); color: var(--sd-store);
    font: inherit; letter-spacing: .12em; font-weight: 700; text-transform: uppercase;
    cursor: pointer;
  }
  .sd-filters__toggle[aria-expanded="true"] { background: var(--sd-store); color: #fff; }

  .sd-filters { display: none; margin-bottom: 20px; }
  .sd-filters.is-open { display: block; }

  /* Nothing to scroll against on a phone — let the lists run full length. */
  .sd-filter__list { max-height: none; }
}

.sd-filter__group { border-bottom: 1px solid var(--sd-rule-light); padding: 12px 0; }
.sd-filter__legend {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  font-size: 1em; font-weight: 700; line-height: 1.3em; letter-spacing: .09em;
  margin: 0 0 8px;
}
.sd-filter__legend::after {
  content: ""; width: 7px; height: 7px;
  border-right: 1px solid var(--sd-store); border-bottom: 1px solid var(--sd-store);
  transform: rotate(45deg); margin-bottom: 3px;
}
.sd-filter__group.is-collapsed .sd-filter__legend::after { transform: rotate(-135deg); margin-bottom: -3px; }
.sd-filter__group.is-collapsed .sd-filter__list { display: none; }

.sd-filter__list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.sd-filter__list li { padding: 3px 0; }
.sd-filter__list a { color: var(--sd-card-text); display: flex; justify-content: space-between; gap: 8px; }
.sd-filter__list a:hover { color: var(--sd-store); }
.sd-filter__list .is-active { font-weight: 700; color: var(--sd-store); }
.sd-filter__count { color: var(--sd-muted); }

/* Size filter renders as a chip grid, as on the reference site. */
.sd-filter__sizes { display: flex; flex-wrap: wrap; gap: 4px; }
.sd-filter__sizes a {
  display: block; min-width: 34px; padding: 5px 6px;
  border: 1px solid var(--sd-rule-light); text-align: center;
  color: var(--sd-card-text);
}
.sd-filter__sizes a:hover { border-color: var(--sd-store); text-decoration: none; }
.sd-filter__sizes .is-active { border-color: var(--sd-store); background: var(--sd-store); color: #fff; }

.sd-shop__toolbar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--sd-bar);
  padding: 10px;
  margin-bottom: 10px;
}
/*
 * A fixed 31px height with a 31px line-height fitted one line exactly. At phone
 * widths the count wraps, and the second word ("produkte") then hung outside
 * the box, under the sort control. Height is now a minimum, not a cap.
 */
.sd-shop__count { display: inline-block; min-height: 31px; line-height: 31px; }

@media (max-width: 767px) {
  /* Count and sort each take their own line rather than competing for one. */
  .sd-shop__toolbar { flex-wrap: wrap; row-gap: 8px; }
  .sd-shop__count { flex: 1 1 100%; line-height: 1.4; min-height: 0; }
  .sd-sort { flex: 1 1 100%; }
  .sd-sort select { flex: 1 1 auto; width: auto; min-width: 0; }
}

/*
 * Measured on the reference: the toolbar is 51px tall and its sort control
 * 214.3 x 31.8, sitting at the right-hand end of the product column, with a
 * "Sorted by:" label in front of it (qa-log M-27).
 */
.sd-sort { display: flex; align-items: center; gap: 8px; }
/* WooCommerce's ordering form carries a bottom margin that pushed the whole
   toolbar to 64px against the reference's 51px. */
.sd-sort form,
.sd-sort .woocommerce-ordering { margin: 0; }
.sd-sort__label { color: var(--sd-text); white-space: nowrap; }
.sd-sort select {
  font: inherit; letter-spacing: inherit;
  border: 1px solid var(--sd-rule-light); background: var(--sd-white);
  height: 31.8px; width: 146px; padding: 0 8px; color: var(--sd-text);
  border-radius: var(--sd-radius-ctl);
}

.sd-pagination {
  display: flex; justify-content: center; gap: 4px; flex-wrap: wrap;
  border-top: 1px solid #ccc;
  margin-top: 10px;
  padding: 20px 0 40px;
}
.sd-pagination .page-numbers {
  display: inline-block; min-width: 32px; padding: 7px 9px;
  border: 1px solid var(--sd-rule-light); text-align: center; color: var(--sd-card-text);
}
.sd-pagination .page-numbers:hover { border-color: var(--sd-store); text-decoration: none; }
.sd-pagination .page-numbers.current { background: var(--sd-store); border-color: var(--sd-store); color: #fff; }

/* ══ Product detail ══════════════════════════════════════════════════════ */

.sd-pdp { display: block; }
@media (min-width: 992px) {
  .sd-pdp { display: grid; grid-template-columns: 1fr 420px; gap: 40px; align-items: start; }
}

.sd-pdp__gallery { background: var(--sd-image-bg); }
.sd-pdp__gallery img { width: 100%; display: block; }
.sd-pdp__thumbs { display: flex; gap: 6px; padding: 6px 0; flex-wrap: wrap; background: #fff; }
.sd-pdp__thumbs img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--sd-rule-light); }

/*
 * Measured on the reference PDP (docs/reference-spec.md):
 *   title    18.6px, weight 100, line-height 18.6 (1em), #4c4d4f
 *   versions 12px/400, #4c4d4f
 *   price    23.4px, weight 400 — not bold — #4c4d4f
 * (qa-log M-29.)
 */
.sd-pdp__title {
  font-size: var(--sd-fs-h2); font-weight: var(--sd-fw-h1);
  line-height: 1em; color: var(--sd-text); margin: 0 0 10px;
}
.sd-pdp__versions { color: var(--sd-text); margin: 0 0 10px; }
.sd-pdp__price {
  font-size: var(--sd-fs-h1); font-weight: 400; line-height: 20px;
  color: var(--sd-text); margin: 0 0 4px;
}
.sd-pdp__price del { color: var(--sd-muted); font-weight: 400; font-size: .7em; }
.sd-pdp__price ins { color: var(--sd-sale); text-decoration: none; }

.sd-pdp__sizes-label { font-weight: 700; margin: 16px 0 8px; }
.sd-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
/* Measured swatch: 51.7 x 38 with a 2px #ccc border. */
.sd-sizes__option {
  min-width: 51.7px; height: 38px; padding: 0 8px;
  border: 2px solid #ccc; background: var(--sd-white);
  font: inherit; letter-spacing: inherit; cursor: pointer; text-align: center;
}
.sd-sizes__option:hover { border-color: var(--sd-store); }
.sd-sizes__option.is-selected { border-color: var(--sd-store); background: var(--sd-store); color: #fff; }
.sd-sizes__option.is-disabled {
  color: #c4c4c4; border-color: #ededed; cursor: not-allowed;
  background: linear-gradient(to top left, transparent 47.5%, #ededed 49%, #ededed 51%, transparent 52.5%);
}

/*
 * Measured: the reference's add-to-cart is 345.3 x 48 — it does NOT span the
 * info column (431.7), leaving room for the wishlist button beside it.
 */
.sd-pdp__cart { margin: 18px 0 0; }
/* Two classes, so this outranks `.sd-btn { width: 100% }` further down. */
.sd-btn.sd-pdp__submit { width: 345.3px; max-width: 100%; }
@media (max-width: 767px) { .sd-btn.sd-pdp__submit { width: 100%; } }
/*
 * Measured button, not the old guess: 48px tall, 12px/15px padding,
 * 15.6px at weight 400, sentence case (the reference does NOT uppercase),
 * square, and the only hover is #000 → #4c4d4f.
 */
.sd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px; padding: 12px 15px;
  background: var(--sd-btn-bg); color: var(--sd-btn-fg);
  border: 1px solid var(--sd-btn-bg);
  font-family: var(--sd-font); font-size: var(--sd-fs-btn); font-weight: 400;
  line-height: 17px; letter-spacing: var(--sd-tracking); text-transform: none;
  border-radius: var(--sd-radius);
  cursor: pointer;
}
.sd-btn:hover {
  background: var(--sd-btn-hover); border-color: var(--sd-btn-hover);
  text-decoration: none; color: var(--sd-btn-fg);
}

/* Commerce green: add to cart, proceed to checkout, log in, place order. */
.sd-btn--buy {
  background: var(--sd-buy); border-color: var(--sd-buy);
  border-radius: var(--sd-radius-ctl);
}
.sd-btn--buy:hover { background: var(--sd-buy-hover); border-color: var(--sd-buy-hover); }

/* Quiet button: cart update, sort, secondary actions. */
.sd-btn--quiet {
  background: var(--sd-btn-quiet-bg); border-color: var(--sd-btn-quiet-bg);
  color: var(--sd-btn-quiet-fg); border-radius: var(--sd-radius-ctl);
}
.sd-btn--quiet:hover { background: var(--sd-white); color: var(--sd-btn-quiet-fg); }

.sd-btn--outline { background: var(--sd-white); color: var(--sd-black); }
.sd-btn--outline:hover { background: var(--sd-bar); color: var(--sd-black); }
.sd-btn--inline { width: auto; }
.sd-btn[disabled] { opacity: .45; cursor: not-allowed; }

/*
 * The reference stacks its three USPs as a list under the button — one per
 * line with the qualifier in bold — rather than spreading them across a row.
 */
.sd-pdp__usp {
  display: flex; flex-direction: column; gap: 4px;
  border: 0; margin-top: 18px; padding-top: 0;
}
.sd-pdp__usp li { list-style: none; color: var(--sd-text); }
.sd-pdp__usp strong { display: inline; color: var(--sd-text-strong); margin-right: 4px; }

/*
 * Mobile sticky buy bar — measured 69px on the reference. Desktop never
 * shows it; the real button is always in view there.
 */
.sd-pdp__sticky { display: none; }
@media (max-width: 767px) {
  .sd-pdp__sticky[hidden] { display: none; }
  .sd-pdp__sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 800;
    display: flex; align-items: center; gap: 12px;
    height: 69px; padding: 0 var(--sd-gutter);
    background: var(--sd-white);
    border-top: 1px solid var(--sd-rule-light);
  }
  .sd-pdp__sticky-price { font-size: var(--sd-fs-h3); color: var(--sd-text); white-space: nowrap; }
  .sd-btn.sd-pdp__sticky-button { width: auto; flex: 1 1 auto; }

  /*
   * The bar is fixed to the bottom of the viewport, so without this it sits on
   * top of the end of the footer — the legal links and the copyright line were
   * unreachable at any scroll position. Reserve its height under the footer on
   * product pages so the page can scroll clear of it.
   */
  body.single-product .sd-footer { padding-bottom: var(--sd-buybar-h); }
}

.sd-pdp__section { border-top: 1px solid var(--sd-rule-light); padding: 22px 0; }
.sd-pdp__section h2 { font-size: 1.3em; font-weight: 100; margin: 0 0 10px; }
.sd-pdp__section p { color: var(--sd-card-text); margin: 0 0 10px; max-width: 900px; }
.sd-specs { width: 100%; border-collapse: collapse; max-width: 640px; }
.sd-specs th, .sd-specs td {
  text-align: left; padding: 7px 10px;
  border-bottom: 1px solid var(--sd-rule-light); font-weight: 400;
}
.sd-specs th { width: 40%; color: var(--sd-muted); }

.sd-related { border-top: 1px solid var(--sd-rule); margin-top: 26px; padding-top: 16px; }

/* ══ Footer ══════════════════════════════════════════════════════════════ */

/*
 * Measured on the reference: the footer's top band is BLACK with white text,
 * 32px of vertical padding and 243.8px tall; the bottom row is 81px on white
 * (qa-log M-6).
 */
.sd-footer { margin-top: 40px; }
.sd-footer__top-container {
  background: var(--sd-black);
  color: var(--sd-white);
}
.sd-footer__top {
  display: grid; gap: 24px;
  grid-template-columns: 1fr;
  /*
   * padding-block, not the `padding` shorthand. These rows are .sd-container
   * elements, and the shorthand reset the container's side gutter to 0 — which
   * is why every footer element sat flush against the screen edge on a phone.
   */
  padding-block: 40px;
}
@media (min-width: 768px) { .sd-footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .sd-footer__top { grid-template-columns: 2fr 2fr 1fr 1fr; } }

.sd-footer__top-container .sd-heading-h3 {
  margin: 0 0 10px;
  font-size: var(--sd-fs-h3);
  font-weight: var(--sd-fw-h1);
  color: var(--sd-white);
}
.sd-footer__top-container .sd-heading-h3 + .sd-heading-h3 { margin-top: 22px; }
.sd-footer__list { list-style: none; margin: 0; padding: 0; }
.sd-footer__top-container .sd-footer__list li,
.sd-footer__top-container .sd-footer__list a,
.sd-footer__top-container p,
.sd-footer__top-container a { color: var(--sd-white); }
.sd-footer__list li { padding: 3px 0; }
.sd-footer__top-container .sd-footer__list a:hover { color: var(--sd-white); text-decoration: underline; }
.sd-footer__list--check li { position: relative; padding-left: 16px; }
.sd-footer__list--check li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 9px; height: 5px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.sd-footer p { margin: 0 0 10px; color: var(--sd-text); }

.sd-social { display: flex; gap: 8px; }
.sd-social__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--sd-white); background: transparent; color: var(--sd-white);
}
.sd-social__link:hover { background: var(--sd-white); color: var(--sd-black); }

.sd-footer__bottom-container { border-top: 1px solid var(--sd-rule-light); }
.sd-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  /* Measured bottom row: 81px. Vertical only — see .sd-footer__top above. */
  padding-block: 14px 18px;
}
.sd-footer__partners { display: flex; gap: 6px; flex-wrap: wrap; }
.sd-paymark {
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px; padding: 0 8px;
  border: 1px solid #d7d7d7; background: #fff;
  font-size: 10px; letter-spacing: .06em; color: var(--sd-muted);
}
.sd-footer__subtext { margin-left: auto; text-align: right; color: var(--sd-muted); font-size: 11px; }
@media (max-width: 767px) { .sd-footer__subtext { margin-left: 0; text-align: left; } }
.sd-footer__subtext a { color: var(--sd-muted); text-decoration: underline; }
/* The build credit is a link like the legal ones, but should not read louder
   than them. */
.sd-footer__credit { color: var(--sd-muted); text-decoration: underline; }
.sd-footer__credit:hover { color: var(--sd-text); }

/* ══ WooCommerce surfaces we do not template ourselves ═══════════════════ */

/*
 * WooCommerce draws the tick / warning glyph as an absolutely-positioned
 * ::before and reserves room for it with `padding-left: 3.5em`. Our padding
 * overrode that reserve, so the icon landed on top of the first word — the
 * notice read "‘<tick>didas Junior Campus…" on the cart, and the same on the
 * checkout's validation errors. Keep the reserve, and pin the icon to it.
 */
.sd .woocommerce-message,
.sd .woocommerce-info,
.sd .woocommerce-error {
  position: relative;
  border-top: 3px solid var(--sd-store);
  background: var(--sd-bar);
  list-style: none;
  margin: 14px 0;
  padding: 14px 16px 14px 44px;
}
.sd .woocommerce-message::before,
.sd .woocommerce-info::before,
.sd .woocommerce-error::before {
  left: 16px;
  top: 14px;
}
.sd .woocommerce-error { border-top-color: var(--sd-sale); }

/* An error is a <ul>: its items need to read as lines, not as list markers. */
.sd .woocommerce-error li { list-style: none; margin: 0; padding: 2px 0; }

/*
 * The notice's action ("Shihni shportën") is floated right by WooCommerce,
 * which on a phone leaves the message text wrapping around a stranded button.
 * Give it its own full-width line there, and keep it inline on wider screens.
 */
.sd .woocommerce-message .button,
.sd .woocommerce-info .button {
  float: right;
  margin-left: 16px;
}
@media (max-width: 767px) {
  .sd .woocommerce-message .button,
  .sd .woocommerce-info .button {
    float: none;
    display: block;
    width: 100%;
    margin: 12px 0 0;
    text-align: center;
  }
}

.sd .woocommerce form .form-row input.input-text,
.sd .woocommerce form .form-row textarea,
.sd .woocommerce form .form-row select,
.sd .select2-container .select2-selection--single {
  border: 1px solid #d7d7d7; padding: 9px 10px; font: inherit; letter-spacing: inherit;
}
.sd .woocommerce #respond input#submit,
.sd .woocommerce a.button,
.sd .woocommerce button.button,
.sd .woocommerce input.button {
  background: var(--sd-store); color: #fff;
  border-radius: 0; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 12px 20px;
}
.sd .woocommerce #respond input#submit:hover,
.sd .woocommerce a.button:hover,
.sd .woocommerce button.button:hover,
.sd .woocommerce input.button:hover { background: #2b2b2b; color: #fff; }
.sd .woocommerce table.shop_table { border-radius: 0; border-color: var(--sd-rule-light); }
.sd .woocommerce-cart table.cart img { width: 64px; }

/* PDP odds and ends */
.sd-pdp__thumb { padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.sd-pdp__thumb img { border: 1px solid var(--sd-rule-light); }
.sd-pdp__thumb:hover img { border-color: var(--sd-store); }
.sd-pdp__size-error { color: var(--sd-sale); margin: 8px 0 0; }
.sd-filters__clear { margin: 0 0 10px; }
.sd-filters__clear a { text-decoration: underline; color: var(--sd-muted); }
.sd-shop__empty { padding: 30px 0; color: var(--sd-muted); }

/* ══ Static pages ════════════════════════════════════════════════════════ */

/*
 * padding-block, not the `padding` shorthand: .sd-page is a .sd-container, and
 * the shorthand reset the container's 15px side gutter to zero — which is why
 * the cart, the checkout and every static page ran edge to edge on a phone.
 * Same fault the footer had (see .sd-footer__top).
 */
.sd-page { padding-block: 10px 40px; }
.sd-page__title { font-size: 1.95em; font-weight: 100; line-height: 1.1em; margin: 16px 0 14px; }
.sd-page__article + .sd-page__article { border-top: 1px solid var(--sd-rule-light); margin-top: 24px; }
.sd-page__content { max-width: 900px; }
.sd-page__content p,
.sd-page__content li { color: var(--sd-card-text); margin: 0 0 12px; }
.sd-page__content h2 { font-size: 1.55em; font-weight: 100; margin: 26px 0 10px; }
.sd-page__content h3 { font-size: 1.3em; font-weight: 100; margin: 20px 0 8px; }
.sd-page__content ul { padding-left: 18px; }
.sd-page__content a { text-decoration: underline; }
.sd-page__empty { padding: 30px 0; color: var(--sd-muted); }

/* Term-index pages (brands, models) */
.sd-termgrid { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .sd-termgrid { grid-template-columns: repeat(4, 1fr); } }
.sd-termgrid a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--sd-rule-light); padding: 12px 14px; color: var(--sd-card-text);
}
.sd-termgrid a:hover { border-color: var(--sd-store); color: var(--sd-store); text-decoration: none; }
.sd-termgrid .sd-termgrid__count { color: var(--sd-muted); }

/* ══ Header search typeahead ═════════════════════════════════════════════ */

.sd-search { position: relative; }

.sd-search__panel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 80;
  max-height: 70vh; overflow-y: auto;
  background: #fff;
  border: 1px solid var(--sd-rule-light);
  border-top: 0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .10);
  padding: 10px 0 4px;
}

.sd-search__title {
  display: block; padding: 8px 14px 4px;
  font-weight: 700; letter-spacing: .09em; color: var(--sd-muted);
}
.sd-search__terms, .sd-search__products { list-style: none; margin: 0; padding: 0; }
.sd-search__terms a {
  display: block; padding: 7px 14px; color: var(--sd-text);
}
.sd-search__terms a:hover { background: var(--sd-bar); text-decoration: none; }
.sd-search__count { color: var(--sd-muted); }

.sd-search__products a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; color: var(--sd-card-text);
}
.sd-search__products a:hover { background: var(--sd-bar); text-decoration: none; }
.sd-search__products img,
.sd-search__noimg {
  width: 44px; height: 44px; flex: 0 0 44px;
  object-fit: cover; background: var(--sd-image-bg); display: block;
}
.sd-search__name { flex: 1 1 auto; min-width: 0; }
.sd-search__price { flex: 0 0 auto; font-weight: 700; color: var(--sd-store); }

.sd-search__all {
  display: block; margin-top: 6px; padding: 10px 14px;
  border-top: 1px solid var(--sd-rule-light);
  font-weight: 700; letter-spacing: .09em; text-align: center; color: var(--sd-store);
}
.sd-search__empty { padding: 12px 14px; color: var(--sd-muted); margin: 0; }

/* ══ Cart ════════════════════════════════════════════════════════════════
 * Measured on the reference (docs/reference-spec.md):
 *   layout   items column + a 302px totals panel on the right
 *   item     110px thumbnail, bold title, italic size line, green delivery
 *            line, "Remove product" link
 *   totals   bordered panel on #f9f9f9 headed "Totals", green Order button
 * ════════════════════════════════════════════════════════════════════════ */

.sd-cart { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
@media (min-width: 992px) { .sd-cart { grid-template-columns: 1fr 302px; } }

.sd-cart__row {
  display: grid;
  grid-template-columns: 110px 1fr auto auto;
  gap: 20px;
  align-items: start;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--sd-rule-light);
  margin-bottom: 24px;
}
.sd-cart__media img { display: block; width: 110px; height: 110px; object-fit: contain; background: var(--sd-image-bg); }
.sd-cart__body { display: flex; flex-direction: column; gap: 4px; }
.sd-cart__title { font-weight: 700; color: var(--sd-text); }
.sd-cart__title a { color: inherit; }
.sd-cart__meta { font-style: italic; color: var(--sd-text); }
.sd-cart__meta p, .sd-cart__meta dl, .sd-cart__meta dt, .sd-cart__meta dd { display: inline; margin: 0; font-weight: 400; }
.sd-cart__delivery { color: #090; }
/*
 * WooCommerce styles `a.remove` as a large bold red glyph via
 * `.woocommerce a.remove` — three-part selectors that outrank a plain class
 * pair no matter how late our stylesheet loads. These overrides carry the
 * same `.woocommerce` prefix so they win on specificity, not on luck.
 */
body.sd .woocommerce a.sd-cart__remove.remove,
.sd-cart__remove.remove {
  display: inline-block;
  width: auto; height: auto;
  /* WooCommerce declares this colour !important, so matching specificity is
     not enough — this is the one property that has to answer in kind. */
  color: var(--sd-text) !important;
  font-size: var(--sd-fs-base); font-weight: 400; line-height: 17px;
  text-decoration: underline; text-align: left;
  background: none; border-radius: 0;
  margin-top: 4px;
}
body.sd .woocommerce a.sd-cart__remove.remove:hover,
.sd-cart__remove.remove:hover { color: var(--sd-black) !important; background: none; text-decoration: underline; }

.sd-cart__qty { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.sd-cart__qty input { width: 54px; height: 32px; text-align: center; border: 1px solid #d7d7d7; font: inherit; }
.sd-cart__price { font-weight: 700; white-space: nowrap; }

.sd-cart__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Totals panel */
.sd-totals { border: 1px solid var(--sd-rule-light); background: #f9f9f9; padding: 18px 20px 20px; }
.sd-totals__title { margin: 0 0 12px; font-size: var(--sd-fs-h2); font-weight: var(--sd-fw-h1); color: var(--sd-text); }
.sd-totals__row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--sd-rule-light); }
.sd-totals__row:first-of-type { border-top: 0; }
.sd-totals__row--total { font-weight: 700; color: var(--sd-text-strong); }
.sd-totals__value { text-align: right; }
.sd-totals .woocommerce-shipping-totals th,
.sd-totals .woocommerce-shipping-totals td { text-align: left; padding: 7px 0; }
.sd-totals__action { margin-top: 14px; }
/*
 * Same problem for the ordinary button: `.woocommerce a.button` overrides
 * `.sd-btn`, which is how cart and checkout buttons kept their WooCommerce
 * look while the rest of the storefront changed.
 */
body.sd .woocommerce a.sd-btn,
body.sd .woocommerce button.sd-btn,
body.sd .woocommerce input.sd-btn {
  font-family: var(--sd-font); font-size: var(--sd-fs-btn); font-weight: 400;
  line-height: 17px; letter-spacing: var(--sd-tracking); text-transform: none;
  border-radius: var(--sd-radius);
  padding: 12px 15px; min-height: 48px;
}
body.sd .woocommerce a.sd-btn--quiet,
body.sd .woocommerce button.sd-btn--quiet,
body.sd .woocommerce input.sd-btn--quiet {
  background: var(--sd-btn-quiet-bg); border-color: var(--sd-btn-quiet-bg);
  color: var(--sd-btn-quiet-fg); border-radius: var(--sd-radius-ctl);
}

/*
 * WooCommerce paints `.woocommerce a.button.alt` — same specificity class
 * count as ours plus an element, so it wins unless we match its shape.
 */
body.sd .woocommerce a.sd-btn--buy,
body.sd .woocommerce button.sd-btn--buy,
body.sd .woocommerce input.sd-btn--buy,
.sd-totals__action .sd-btn.sd-btn--buy {
  background: var(--sd-buy); border-color: var(--sd-buy); color: var(--sd-white);
  text-transform: none; font-weight: 400; border-radius: var(--sd-radius-ctl);
}
body.sd .woocommerce a.sd-btn--buy:hover,
body.sd .woocommerce button.sd-btn--buy:hover,
body.sd .woocommerce input.sd-btn--buy:hover,
.sd-totals__action .sd-btn.sd-btn--buy:hover {
  background: var(--sd-buy-hover); border-color: var(--sd-buy-hover); color: var(--sd-white);
}
.sd-totals__action .sd-btn { width: 100%; }


@media (max-width: 767px) {
  .sd-cart__row { grid-template-columns: 90px 1fr; gap: 14px; }
  .sd-cart__media img { width: 90px; height: 90px; }
  .sd-cart__qty, .sd-cart__price { grid-column: 2; }
}

/* ══ Checkout ════════════════════════════════════════════════════════════
 * The reference runs a one-step checkout in numbered columns with a green
 * "Place order now". Shipping methods stay inside WooCommerce's order-review
 * block (see woocommerce/checkout/form-checkout.php for why).
 * ════════════════════════════════════════════════════════════════════════ */

.sd-checkout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px 40px;
  align-items: start;
}
@media (min-width: 992px) { .sd-checkout { grid-template-columns: 1fr 420px; } }

.sd-checkout__data  { grid-column: 1; }
.sd-checkout__review { grid-column: 1; }
@media (min-width: 992px) {
  .sd-checkout > #order_review_heading,
  .sd-checkout__review { grid-column: 2; }
  .sd-checkout > #order_review_heading { grid-row: 1; }
  .sd-checkout__data { grid-row: 1 / span 2; }
  .sd-checkout__review { grid-row: 2; }
}

/* Numbered step heading: black disc + caps label, as the reference draws it. */
.sd-step {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px; padding: 0;
  font-size: var(--sd-fs-h3); font-weight: var(--sd-fw-block);
  letter-spacing: var(--sd-tracking); text-transform: uppercase;
  color: var(--sd-text-strong);
}
.sd-step__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 50%;
  background: var(--sd-black); color: var(--sd-white);
  font-size: var(--sd-fs-base); font-weight: 700; letter-spacing: 0;
}

/* Form fields */
body.sd .woocommerce form .form-row { padding: 0 0 14px; margin: 0; }
body.sd .woocommerce form .form-row label { display: block; margin-bottom: 5px; color: var(--sd-text); }
body.sd .woocommerce form .form-row input.input-text,
body.sd .woocommerce form .form-row textarea,
body.sd .woocommerce form .form-row select,
body.sd .woocommerce .select2-container .select2-selection--single {
  width: 100%; min-height: 40px; padding: 8px 10px;
  border: 1px solid #d7d7d7; border-radius: 0;
  font: inherit; letter-spacing: inherit; color: var(--sd-text);
  background: var(--sd-white);
}
body.sd .woocommerce form .form-row input.input-text:focus,
body.sd .woocommerce form .form-row textarea:focus { outline: none; border-color: var(--sd-black); }
body.sd .woocommerce form .form-row .required { color: var(--sd-sale); text-decoration: none; }

/* Order review panel — the reference's bordered summary. */
.sd-checkout__review {
  border: 1px solid var(--sd-rule-light);
  background: #f9f9f9;
  padding: 18px 20px 20px;
}
.sd-checkout__review table.shop_table { width: 100%; border: 0; border-collapse: collapse; margin: 0; }
.sd-checkout__review table.shop_table th,
.sd-checkout__review table.shop_table td {
  border: 0; border-bottom: 1px solid var(--sd-rule-light);
  padding: 8px 0; text-align: left; color: var(--sd-text);
}
.sd-checkout__review table.shop_table td:last-child,
.sd-checkout__review table.shop_table th:last-child { text-align: right; }
.sd-checkout__review .order-total { font-weight: 700; color: var(--sd-text-strong); }
.sd-checkout__review .wc_payment_methods { list-style: none; margin: 14px 0; padding: 0; }
.sd-checkout__review .wc_payment_method {
  border: 1px solid var(--sd-rule-light); background: var(--sd-white);
  padding: 12px; margin-bottom: 8px;
}
.sd-checkout__review .wc_payment_method label { display: inline; font-weight: 400; color: var(--sd-text); }
.sd-checkout__review .payment_box { background: transparent; padding: 10px 0 0; color: var(--sd-text); }
.sd-checkout__review .payment_box::before { display: none; }
/*
 * Place order: the reference's green button, labelled "Place order now".
 * WooCommerce ships it as `.button.alt` inside `.woocommerce`, so the
 * override carries the same shape (see the cart buttons above).
 */
body.sd .woocommerce #place_order,
body.sd .woocommerce button#place_order.button.alt {
  width: 100%; min-height: 48px; padding: 12px 15px;
  background: var(--sd-buy); border: 1px solid var(--sd-buy); color: var(--sd-white);
  border-radius: var(--sd-radius-ctl);
  font-family: var(--sd-font); font-size: var(--sd-fs-btn); font-weight: 400;
  letter-spacing: var(--sd-tracking); text-transform: none;
}
body.sd .woocommerce #place_order:hover,
body.sd .woocommerce button#place_order.button.alt:hover {
  background: var(--sd-buy-hover); border-color: var(--sd-buy-hover); color: var(--sd-white);
}

@media (max-width: 991px) {
  .sd-checkout > #order_review_heading { grid-column: 1; }
}

/* ══ Account ═════════════════════════════════════════════════════════════
 * The reference's login page: two centred columns split by a vertical rule,
 * "Customer Login" and "New Customer", each closing on a green button.
 * ════════════════════════════════════════════════════════════════════════ */

.sd-login {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  max-width: 880px;
  margin: 18px auto 40px;
}
@media (min-width: 768px) {
  .sd-login { grid-template-columns: 1fr 1fr; gap: 0; }
  .sd-login__col { padding: 0 40px; }
  .sd-login__col--register { border-left: 1px solid var(--sd-rule-light); }
  .sd-login--single { grid-template-columns: 1fr; max-width: 440px; }
}

.sd-login__title {
  margin: 0 0 18px;
  font-size: var(--sd-fs-h1); font-weight: var(--sd-fw-h1);
  color: var(--sd-text); letter-spacing: var(--sd-tracking);
}
.sd-login__lead { margin: 0 0 12px; color: var(--sd-text); }

.sd-login__benefits { list-style: none; margin: 0 0 22px; padding: 0; }
.sd-login__benefits li { position: relative; padding: 0 0 4px 22px; color: var(--sd-text); }
.sd-login__benefits li::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--sd-buy); border-bottom: 2px solid var(--sd-buy);
  transform: rotate(-45deg);
}

/* WooCommerce draws a bordered, padded box around these forms; the
   reference's columns are plain. */
body.sd .woocommerce .sd-login form.login,
body.sd .woocommerce .sd-login form.register {
  border: 0; padding: 0; margin: 0; border-radius: 0;
}
.sd-login__actions { margin: 6px 0 12px; }
.sd-checkbox { display: inline-flex; align-items: center; gap: 7px; }
.sd-login .woocommerce-LostPassword a { color: var(--sd-text); text-decoration: underline; }

/* ══ Editorial pages (customer service / about) ══════════════════════════
 * The reference wraps these in a two-column `sidebarmenu`: a ~220px section
 * nav with hairline-separated rows and the current page on #f4f4f4, beside
 * the article. Its content h1 is 18.6px, smaller than a category h1.
 * ════════════════════════════════════════════════════════════════════════ */

.sd-page--sidebar { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
@media (min-width: 768px) { .sd-page--sidebar { grid-template-columns: 220px 1fr; gap: 40px; } }

.sd-sidebar__title {
  margin: 16px 0 12px;
  font-size: var(--sd-fs-h1); font-weight: var(--sd-fw-h1);
  color: var(--sd-text); letter-spacing: var(--sd-tracking);
}
.sd-sidebar__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sd-rule-light); }
.sd-sidebar__item { border-bottom: 1px solid var(--sd-rule-light); }
.sd-sidebar__item a {
  display: block; padding: 15px 12px;
  color: var(--sd-text);
}
.sd-sidebar__item a:hover { background: var(--sd-bar); text-decoration: none; }
.sd-sidebar__item.is-current { background: var(--sd-bar); }
.sd-sidebar__item.is-current a { font-weight: 700; color: var(--sd-text-strong); }

/* On these pages the reference's h1 is 18.6px, not the 23.4px of a category. */
.sd-page--sidebar .sd-page__title { font-size: var(--sd-fs-h2); }

/* ══ 404 ═════════════════════════════════════════════════════════════════
 * Measured on the reference: a 136px content block between the normal header
 * and footer, headed "Page not found" at 23.4px — not a display-sized
 * apology (qa-log M-42).
 * ════════════════════════════════════════════════════════════════════════ */

.sd-404 { padding-block: 16px 40px; }
.sd-404__lead { margin: 10px 0 18px; color: var(--sd-text); }
.sd-404__actions { margin: 0; }

/* ── Footer columns collapse on a phone ───────────────────────────────────
 * Measured: the reference's mobile footer top is ~180px, where four stacked
 * columns take 615. It turns the two link columns into tappable rows.
 */
.sd-footer__toggle { display: none; }

@media (max-width: 767px) {
  .sd-footer__top { gap: 0; padding-block: 24px; }

  .sd-footer__col--menu { border-bottom: 1px solid rgba(255, 255, 255, .25); }
  .sd-footer__col--menu .sd-heading-h3 {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0; min-height: 44px;
  }
  .sd-footer__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    background: none; border: 0; cursor: pointer;
    color: var(--sd-white); font-size: 20px; line-height: 1;
    transition: transform .15s ease;
  }
  .sd-footer__toggle.is-open { transform: rotate(90deg); }

  .sd-footer__col--menu .sd-footer__list { display: none; padding-bottom: 10px; }
  .sd-footer__col--menu .sd-footer__list.is-open { display: block; }

  /*
   * The reference's phone footer leads with "Any questions?" and drops the
   * advantages checklist entirely — those three points are already in the
   * utility bar's selling points, so repeating them costs a screenful for
   * nothing.
   */
  .sd-footer__col--contact { order: -1; padding-bottom: 12px; }
  .sd-footer__col--advantages { display: none; }

  /* Compact the contact column: the reference's phone footer carries the
     e-mail line and the social marks, not a second sub-heading for them. */
  .sd-footer__col--contact .sd-heading-h3 + p { margin-bottom: 8px; }
  .sd-footer__col--contact .sd-heading-h3 ~ .sd-heading-h3 { display: none; }

}