/*
 * Commerce Discovery — theme stylesheet.
 *
 * Authoring rules enforced throughout this file:
 *   - RTL is the authoring direction; every directional declaration uses logical
 *     properties (inset-inline-*, margin-inline-*, padding-inline-*, border-*-start/end,
 *     text-align: start/end). No physical `left`/`right` appears in a directional rule.
 *   - Brand values arrive only as `--cd-*` custom properties emitted from the brand preset.
 *   - Space for images, cards, panels and skeletons is reserved so layout does not shift.
 */

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

/*
 * The `hidden` attribute is the theme's single source of truth for whether a
 * panel, notice or control is present. A class rule that sets `display` would
 * otherwise outrank the user-agent `[hidden] { display: none }` rule, so it is
 * restated here at a weight no component rule can beat.
 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body.cd-body {
  margin: 0;
  background: var(--cd-color-bg, #f7f7fb);
  color: var(--cd-color-ink, #3a3a46);
  font-family: var(--cd-typography-body-family, sans-serif);
  font-weight: var(--cd-typography-body-weight, 400);
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: var(--cd-typography-heading-weight, 800);
  line-height: 1.2;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-inline-size: 100%; block-size: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

.cd-page { display: flow-root; min-block-size: 100vh; }

.cd-shell {
  inline-size: min(100% - 32px, 1280px);
  margin-inline: auto;
}

.cd-main { display: block; }

.cd-sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.cd-skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: 16px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--cd-color-pink-d, #c00068);
  color: #fff;
  border-end-start-radius: var(--cd-radius-sm, 11px);
  border-end-end-radius: var(--cd-radius-sm, 11px);
  font-weight: 700;
}
.cd-skip-link:focus { inset-block-start: 0; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--cd-focus-ring, 0 0 0 3px #fff, 0 0 0 5.5px #c00068);
  border-radius: 8px;
}

/* --------------------------------------------------------------- icons */

.cd-icon { inline-size: 1.5rem; block-size: 1.5rem; display: inline-block; color: currentColor; flex: 0 0 auto; }

.cd-icon-chip {
  inline-size: 2.75rem; block-size: 2.75rem;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  color: var(--cd-color-ink-2, #6b6b78);
  background: transparent;
  flex: 0 0 auto;
}
.cd-icon-chip > .cd-icon { inline-size: 1.25rem; block-size: 1.25rem; }

.cd-role-commerce  { color: var(--cd-color-pink-d,   #c00068); background: var(--cd-color-pink-xl,  #fdf1f7); }
.cd-role-discovery { color: var(--cd-color-teal-aa,  #00736b); background: var(--cd-color-teal-l,   #e0f6f4); }
.cd-role-trust     { color: var(--cd-color-green-aa, #4e7a1e); background: var(--cd-color-green-l,  #eef7df); }
.cd-role-benefit   { color: var(--cd-color-orange-d, #a85e00); background: var(--cd-color-orange-l, #fdeede); }
.cd-role-shipping  { color: var(--cd-color-teal-aa,  #00736b); background: var(--cd-color-teal-l,   #e0f6f4); }
.cd-role-utility   { color: var(--cd-color-ink,      #3a3a46); background: var(--cd-color-neutral-soft, #f1f1f6); }
.cd-role-warning   { color: var(--cd-color-orange-d, #a85e00); background: var(--cd-color-orange-l, #fdeede); }

.cd-icon-chip.is-active.cd-role-discovery { color: #fff; background: var(--cd-color-teal-aa, #00736b); }
.cd-icon-chip.is-active.cd-role-commerce  { color: #fff; background: var(--cd-color-pink, #e6007e); }
.cd-icon-chip.is-active.cd-role-utility   { color: #fff; background: var(--cd-color-ink, #3a3a46); }

/* ------------------------------------------------------------- buttons */

.cd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding-inline: 20px; padding-block: 10px;
  border: 1px solid transparent;
  border-radius: var(--cd-radius-sm, 11px);
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: var(--cd-typography-strong-weight, 700);
  font-size: 14.5px;
  text-align: center;
  transition: background-color .15s ease, color .15s ease;
}

.cd-btn--primary { background: var(--cd-color-pink, #e6007e); color: #fff; }
.cd-btn--primary:hover { background: var(--cd-color-pink-d, #c00068); }

.cd-btn--ghost {
  background: #fff;
  color: var(--cd-color-ink, #3a3a46);
  border-color: var(--cd-color-line-2, #e2e2ec);
}
.cd-btn--ghost:hover { background: var(--cd-color-neutral-soft, #f1f1f6); }

.cd-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: var(--cd-spacing-tap-min, 44px);
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding: 0; border: 0; background: transparent;
  position: relative;
}
.cd-iconbtn--static { cursor: default; }

.cd-chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding-inline: 16px; padding-block: 8px;
  border: 1px solid var(--cd-color-line-2, #e2e2ec);
  border-radius: 999px;
  background: #fff;
  font-size: 14px; font-weight: 600;
}
.cd-chip:hover { background: var(--cd-color-neutral-soft, #f1f1f6); }
.cd-chip--lg { font-size: 14.5px; }
/* The refinement row's "all" chip: the current view, stated rather than implied. */
.cd-chip.is-current {
  background: var(--cd-color-pink, #e6007e);
  border-color: var(--cd-color-pink, #e6007e);
  color: #fff; font-weight: 700;
}
.cd-chip.is-current:hover { background: var(--cd-color-pink-d, #c00068); border-color: var(--cd-color-pink-d, #c00068); }
.cd-chip__count { color: var(--cd-color-ink-2, #6b6b78); font-size: 12.5px; }

.cd-chiplist { display: flex; flex-wrap: wrap; gap: 10px; }

/* --------------------------------------------------------- price bidi */

.cd-price-iso,
.cd-price-iso .woocommerce-Price-amount,
.woocommerce-Price-amount {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* -------------------------------------------------------- service strip */

/*
 * One solid pink band, one centred line, benefits separated by a middot. The
 * separator is a generated `::before` on every item after the first, so it is
 * drawn rather than authored as content and never reaches the accessibility tree.
 */
.cd-service-strip {
  background: linear-gradient(90deg, var(--cd-color-pink, #e6007e), var(--cd-color-pink-d, #c00068));
  color: #fff;
}
.cd-service-strip__list {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  padding-block: 8px;
  gap: 0 10px;
}
.cd-service-strip__item { display: inline-flex; align-items: center; gap: 10px; }
.cd-service-strip__item + .cd-service-strip__item::before {
  content: "\00B7"; color: rgba(255, 255, 255, .62);
}
.cd-service-strip__text { font-size: 12.5px; font-weight: 500; color: #fff; letter-spacing: .1px; }

/* --------------------------------------------------------------- header */

/*
 * Sticky-state sentinel.
 *
 * The compact header state is driven by an IntersectionObserver on this element.
 * Chrome emits no intersection callbacks for a zero-area target, so the sentinel
 * needs a measurable height; the negative block-end margin cancels it again so no
 * visible layout height is added.
 */
.cd-header-anchor {
  block-size: 1px;
  margin-block-end: -1px;
  pointer-events: none;
}

.cd-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  background: #fff;
  border-block-end: 1px solid var(--cd-color-line, #ececf2);
}
.cd-header.is-stuck { box-shadow: var(--cd-shadow-sm, 0 3px 10px rgba(60,30,70,.07)); }

.cd-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding-block: 12px;
  transition: padding-block .15s ease;
}
.cd-header.is-stuck .cd-header__inner { padding-block: 7px; }

.cd-header__brand { display: flex; align-items: center; gap: 6px; }

.cd-logo { display: inline-flex; align-items: center; }

/*
 * WooCommerce ships `.woocommerce img { height: auto }` at specificity (0,1,1),
 * which outranks a single-class rule. Theme image sizing is therefore authored at
 * (0,2,0) or higher so the reserved dimensions survive on WooCommerce surfaces.
 */
.cd-header .cd-logo__img {
  block-size: var(--cd-spacing-header-logo, 46px);
  inline-size: auto;
  max-inline-size: none;
  transition: block-size .15s ease;
}
.cd-header.is-stuck .cd-logo__img { block-size: var(--cd-spacing-header-logo-c, 34px); }
.cd-logo__text { font-family: var(--cd-typography-heading-family, sans-serif); font-weight: 800; font-size: 20px; }

.cd-header__menu-toggle { display: none; }

.cd-header__utility { display: flex; align-items: center; gap: 0; }
.cd-header__search-toggle { display: none; }

/*
 * In the header the utility marks are bare glyphs on white, not tinted discs —
 * the approved composition reserves the filled chip for content surfaces. The
 * chip element stays so the icon keeps its sizing and role colour; only its own
 * background and footprint are dropped here.
 */
.cd-header__utility .cd-icon-chip {
  inline-size: auto; block-size: auto;
  background: transparent;
}
.cd-header__utility .cd-icon-chip > .cd-icon { inline-size: 1.35rem; block-size: 1.35rem; }
.cd-header__utility .cd-iconbtn { gap: 7px; }

/*
 * The account mark is inert, so it carries no tap target and can be compact.
 * The interactive controls beside it keep the full 44px minimum.
 */
.cd-header__account { min-inline-size: 0; padding-inline-end: 10px; }
.cd-header__account-label { font-size: 13.5px; font-weight: 500; color: var(--cd-color-ink-2, #6b6b78); white-space: nowrap; }

.cd-cart-toggle { position: relative; }
/*
 * The count sits on the corner of the glyph rather than inside the tap target,
 * which is why it is offset outwards. `is-filled` is the only pink state: an
 * empty cart must not advertise itself with the brand colour.
 */
.cd-cart-count {
  position: absolute;
  inset-block-start: -4px;
  inset-inline-start: -8px;
  min-inline-size: 16px;
  block-size: 16px;
  padding-inline: 4px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--cd-color-ink-3, #9a9aa8);
  color: #fff;
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cd-cart-count.is-filled { background: var(--cd-color-pink, #e6007e); }

/* ------------------------------------------------------------- search */

.cd-search {
  position: relative;
  display: flex; align-items: center;
  background: var(--cd-color-neutral-soft, #f1f1f6);
  border: 1px solid var(--cd-color-line-2, #e2e2ec);
  border-radius: 999px;
  padding-inline: 14px;
  min-block-size: var(--cd-spacing-tap-min, 44px);
}
.cd-search:focus-within { border-color: var(--cd-color-teal-aa, #00736b); background: #fff; }

.cd-search__icon { display: inline-flex; color: var(--cd-color-teal-aa, #00736b); }
.cd-search__icon .cd-icon { inline-size: 1.2rem; block-size: 1.2rem; }

.cd-search__input {
  flex: 1 1 auto; min-inline-size: 0;
  border: 0; background: transparent; outline: none;
  padding-inline: 10px; padding-block: 10px;
  font: inherit; font-size: 14.5px;
  text-align: start;
}
.cd-search__input::-webkit-search-cancel-button { display: none; }

.cd-search__clear, .cd-search__submit {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 34px; block-size: 34px;
  border: 0; background: transparent; border-radius: 999px;
  color: var(--cd-color-ink-2, #6b6b78);
}
.cd-search__submit { color: var(--cd-color-teal-aa, #00736b); }
.cd-search__clear .cd-icon, .cd-search__submit .cd-icon { inline-size: 1.15rem; block-size: 1.15rem; }

.cd-searchpanel {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  background: #fff;
  border-block-end: 1px solid var(--cd-color-line, #ececf2);
  box-shadow: var(--cd-shadow-lg, 0 8px 26px rgba(60,30,70,.10));
  max-block-size: min(70vh, 620px);
  overflow-y: auto;
  z-index: 70;
}
.cd-searchpanel__inner { padding-block: 18px 22px; display: grid; gap: 18px; }
.cd-searchpanel__title {
  font-size: 12.5px; font-weight: 800;
  color: var(--cd-color-ink-2, #6b6b78);
  margin-block-end: 10px;
}

.cd-searchpanel__cats { display: flex; flex-wrap: wrap; gap: 10px; }
.cd-searchpanel__cats a {
  display: inline-flex; align-items: center; gap: 7px;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding-inline: 14px;
  border: 1px solid var(--cd-color-line-2, #e2e2ec);
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
}

.cd-searchpanel__products { display: grid; gap: 6px; }
.cd-searchpanel__products a {
  display: flex; align-items: center; gap: 12px;
  min-block-size: 64px;
  padding-inline: 10px; padding-block: 8px;
  border-radius: var(--cd-radius-sm, 11px);
}
.cd-searchpanel__products a:hover { background: var(--cd-color-neutral-soft, #f1f1f6); }
.cd-searchpanel img.cd-searchpanel__thumb {
  inline-size: 48px; block-size: 48px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--cd-color-pink-xl, #fdf1f7);
  object-fit: contain;
}
.cd-searchpanel__ptext { display: grid; gap: 2px; min-inline-size: 0; }
.cd-searchpanel__pname { font-size: 14px; font-weight: 700; }
.cd-searchpanel__pprice { font-size: 13.5px; color: var(--cd-color-pink-d, #c00068); font-weight: 800; }

.cd-searchpanel__zero-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 800; font-size: 16px;
}
.cd-searchpanel__zero-term { color: var(--cd-color-ink-2, #6b6b78); }
.cd-searchpanel__zero-help { margin-block: 8px 12px; color: var(--cd-color-ink-2, #6b6b78); font-size: 14px; }
.cd-searchpanel__zero .cd-chiplist { margin-block-end: 14px; }

.cd-searchpanel__footer { border-block-start: 1px solid var(--cd-color-line, #ececf2); padding-block-start: 14px; }
.cd-searchpanel__total { font-variant-numeric: tabular-nums; }

/* skeleton rows reserve the same height as a real suggestion row */
.cd-sk-row { display: flex; align-items: center; gap: 12px; min-block-size: 64px; padding-inline: 10px; }
.cd-sk { display: block; border-radius: 8px; background: var(--cd-color-neutral-soft, #f1f1f6); }
.cd-sk--thumb { inline-size: 48px; block-size: 48px; flex: 0 0 auto; border-radius: 9px; }
.cd-sk-lines { display: grid; gap: 7px; flex: 1 1 auto; }
.cd-sk--line { block-size: 11px; inline-size: 62%; }
.cd-sk--short { inline-size: 32%; }

/* ---------------------------------------------------------------- nav */

/*
 * The discovery row is a single-row chip rail. It used to be a wrapping tab
 * strip; the rules that described that strip were removed rather than left to be
 * overridden, so the file states one intention rather than two.
 */
.cd-nav { border-block-start: 1px solid var(--cd-color-line, #ececf2); }
/* The rail rules live in the "Top category rail" block below. */

/* The chip rules live in the "Top category rail" block below. */

.cd-mega {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  background: #fff;
  border-block-end: 1px solid var(--cd-color-line, #ececf2);
  box-shadow: var(--cd-shadow-lg, 0 8px 26px rgba(60,30,70,.10));
  z-index: 65;
}
.cd-mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 26px;
  padding-block: 22px 26px;
}
.cd-mega__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; }
.cd-mega__col { min-inline-size: 0; }
.cd-mega__title { font-family: var(--cd-typography-heading-family, sans-serif); font-weight: 800; font-size: 13.5px; margin-block-end: 10px; }
/*
 * A column head that is itself a destination stays a heading first: same family,
 * weight and size as the column heads beside it, with the pink only on hover so
 * the row does not read as a list of links with one shouting.
 */
a.cd-mega__title { display: block; color: inherit; }
a.cd-mega__title:hover { color: var(--cd-color-pink-d, #c00068); }
.cd-mega__list { display: grid; gap: 2px; }
.cd-mega__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding-inline: 10px;
  border-radius: 9px;
  font-size: 14px;
}
.cd-mega__count { color: var(--cd-color-ink-2, #6b6b78); font-size: 12.5px; font-variant-numeric: tabular-nums; }
/*
 * The live navigation nests below the column head. Each further level steps in
 * behind a hairline on the inline-start edge and loses a little size, so depth
 * is legible in RTL and LTR without a new visual device — and a heading inside a
 * list is weighted rather than coloured, because it goes nowhere.
 */
.cd-mega__sublist {
  display: grid; gap: 2px;
  margin-inline-start: 10px;
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--cd-color-line, #ececf2);
}
.cd-mega__sublist a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-block-size: 38px;
  padding-inline: 10px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--cd-color-ink-2, #6b6b78);
}
.cd-mega__sublist .cd-mega__sublist a { min-block-size: 34px; font-size: 13px; }
.cd-mega__heading {
  display: flex; align-items: center;
  min-block-size: 38px;
  padding-inline: 10px;
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 700; font-size: 13.5px;
  color: var(--cd-color-ink, #3a3a46);
}
/*
 * The live navigation contains grouping wrappers that carry children and no
 * label of their own. They group and they show nothing, so they take no room —
 * otherwise the column would open with a blank row where the source has none.
 * The element stays in the document because it is still one navigation instance.
 */
.cd-mega__heading:empty, .cd-mega__title:empty { display: none; }

.cd-mega__feature {
  background: var(--cd-color-orange-l, #fdeede);
  border-radius: var(--cd-radius-lg, 16px);
  padding: 18px;
  display: grid; gap: 8px; align-content: start;
}
.cd-mega__feature-title { font-family: var(--cd-typography-heading-family, sans-serif); font-weight: 800; font-size: 14px; }
.cd-mega__feature-text { font-size: 13.5px; color: var(--cd-color-ink-2, #6b6b78); }

/* ------------------------------------------------------- mobile menu */

.cd-mobilemenu { position: fixed; inset: 0; z-index: 90; }
.cd-mobilemenu__dialog {
  position: absolute; inset: 0;
  background: #fff;
  display: flex; flex-direction: column;
}
.cd-mobilemenu__head {
  display: flex; align-items: center; gap: 8px;
  padding-inline: 16px; padding-block: 10px;
  border-block-end: 1px solid var(--cd-color-line, #ececf2);
}
.cd-mobilemenu__title { flex: 1 1 auto; font-family: var(--cd-typography-heading-family, sans-serif); font-weight: 800; font-size: 16px; }
.cd-mobilemenu__body { flex: 1 1 auto; overflow-y: auto; padding-inline: 8px; padding-block: 8px 24px; }
.cd-mobilemenu__row {
  inline-size: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-block-size: 52px;
  padding-inline: 14px;
  border: 0; background: transparent;
  border-radius: var(--cd-radius-sm, 11px);
  font-size: 15.5px; font-weight: 600;
  text-align: start;
}
.cd-mobilemenu__row:hover { background: var(--cd-color-neutral-soft, #f1f1f6); }
.cd-mobilemenu__row--all { color: var(--cd-color-pink-d, #c00068); font-weight: 700; }
.cd-mobilemenu__count { color: var(--cd-color-ink-2, #6b6b78); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- PLP */

.cd-plp { padding-block: 22px 40px; }
.cd-page-body { padding-block: 22px 40px; }

.cd-breadcrumb { margin-block-end: 12px; font-size: 13px; color: var(--cd-color-ink-2, #6b6b78); }
.cd-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cd-breadcrumb a { color: var(--cd-color-ink-2, #6b6b78); }
.cd-breadcrumb a:hover { color: var(--cd-color-pink-d, #c00068); }
.cd-crumb-sep { color: var(--cd-color-ink-3, #9a9aa8); }

.cd-plp__head { margin-block-end: 16px; }
.cd-plp__title { font-size: clamp(22px, 3vw, 30px); }
.cd-plp__term { color: var(--cd-color-pink-d, #c00068); }
.cd-plp__intro { margin-block-start: 8px; color: var(--cd-color-ink-2, #6b6b78); font-size: 14.5px; max-inline-size: 70ch; }
.cd-plp__subcats { margin-block: 12px 16px; }

/*
 * Toolbar.
 *
 * A bounded card at the top of the results column, as the approved reference has
 * it — not a rule under the page. It carries what is being shown, how it is
 * ordered and how it is laid out, in that order, with ordering and layout pushed
 * to the far end.
 */
.cd-plp__toolbar {
  display: flex; align-items: center; gap: 14px;
  min-block-size: 44px;
  margin-block-end: 12px;
  padding: 4px 16px;
  background: #fff;
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-lg, 16px);
  font-size: 13px; color: var(--cd-color-ink-2, #6b6b78);
}
.cd-plp__count { margin: 0; font-size: 13px; font-weight: 500; color: var(--cd-color-ink-2, #6b6b78); font-variant-numeric: tabular-nums; }

/* Ordering is WooCommerce's control; only its box is themed. */
.cd-plp__sort { margin-inline-start: auto; display: flex; align-items: center; gap: 7px; }
.cd-plp__sortlabel { font-size: 13px; font-weight: 500; color: var(--cd-color-ink-2, #6b6b78); white-space: nowrap; }
.cd-plp__sort form.woocommerce-ordering { margin: 0; }
.woocommerce .cd-plp__sort select.orderby,
.cd-plp__sort select.orderby {
  max-inline-size: none;
  min-block-size: 36px;
  padding-inline: 10px 26px;
  border: 1px solid var(--cd-color-line-2, #e2e2ec);
  border-radius: 999px;
  background: #fff;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--cd-color-ink, #3a3a46);
}

.cd-plp__view { display: flex; align-items: center; gap: 4px; }
.cd-plp__viewbtn {
  display: grid; place-items: center;
  inline-size: 32px; block-size: 32px;
  padding: 0; border: 0; border-radius: 9px;
  background: transparent;
  color: var(--cd-color-ink-3, #9a9aa8);
}
.cd-plp__viewbtn .cd-icon { inline-size: 1.05rem; block-size: 1.05rem; }
.cd-plp__viewbtn.is-active { color: var(--cd-color-pink, #e6007e); background: var(--cd-color-pink-xl, #fdf1f7); }

ul.products, .cd-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0; padding: 0; list-style: none;
}

/*
 * WooCommerce's default loop is a float grid: it sizes `li.product` to a
 * percentage, adds inline margins, and emits clearfix pseudo-elements. In a CSS
 * grid container those pseudo-elements become phantom cells and the percentage
 * width collapses the card. Both are neutralised here at matching specificity.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { content: none; display: none; }

/*
 * `.woocommerce ul.products li.product` is also what WooCommerce's small-screen
 * stylesheet uses to set `width: 48%`, so an equal-specificity override would be
 * decided by load order. The theme's own card class raises specificity above both.
 */
.woocommerce ul.products li.product.cd-card,
.woocommerce-page ul.products li.product.cd-card,
ul.products li.product.cd-card,
.woocommerce ul.products li.product,
ul.products li.product {
  inline-size: auto;
  max-inline-size: none;
  margin: 0;
  padding: 0;
  float: none;
  clear: none;
}

/* ------------------------------------------------------------ filters */

/*
 * Desktop: a 262px rail at the inline-start beside a fluid results column, per
 * the approved reference. The grid columns themselves are unchanged — the
 * results column is simply narrower, so the existing 4/3/2 rules still govern.
 */
.cd-plp__body { display: block; }
.cd-plp__body--filtered {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.cd-plp__results { min-inline-size: 0; }

/*
 * List view.
 *
 * The same cards, laid out along the inline axis instead of stacked. The photo
 * keeps its square so no image is re-cropped by the change, and the body spreads
 * into the freed width. Purely a layout swap — nothing is added or removed.
 */
.cd-plp__results--list ul.products,
.cd-plp__results--list .cd-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cd-plp__results--list li.cd-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); }
.cd-plp__results--list .cd-card__media { aspect-ratio: 1 / 1; }
.cd-plp__results--list .cd-card__body { padding: 14px 16px; gap: 7px; }
/*
 * List view has the freed width to carry a larger title, and no grid row to align
 * against — so the two lines are a cap here, not a reservation. The clamp is on the
 * anchor for the same blockification reason as the grid card.
 */
.woocommerce .cd-plp__results--list ul.products li.product .cd-card__name,
.cd-plp__results--list .cd-card__name { font-size: 15px; block-size: auto; max-block-size: 2.6em; }

.cd-plp__rail { min-inline-size: 0; }
.cd-plp__scrim { display: none; }

.cd-filters {
  display: grid; gap: 0;
  padding: 16px 18px;
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-lg, 16px);
  background: #fff;
  box-shadow: var(--cd-shadow-sm, 0 3px 10px rgba(60,30,70,.07));
}
.cd-filters__head { display: flex; align-items: baseline; gap: 10px; margin-block-end: 12px; }
.cd-filters__title { font-size: 16px; margin: 0; font-weight: var(--cd-typography-heading-weight, 800); }
.cd-filters__clear { margin-inline-start: auto; font-size: 12px; font-weight: 600; color: var(--cd-color-pink-d, #c00068); }
.cd-filters__close { display: none; }
.cd-filters__empty { margin: 0; font-size: 13px; color: var(--cd-color-ink-2, #6b6b78); }

/* Each group is separated by a rule, as the reference has it, not by a gap. */
.cd-filters__group {
  border: 0; border-block-start: 1px solid var(--cd-color-line, #ececf2);
  padding: 11px 0 4px; margin: 0; display: grid; gap: 2px;
}
.cd-filters__legend {
  padding: 0; margin-block-end: 5px;
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 700; font-size: 13.5px;
  color: var(--cd-color-ink, #3a3a46);
}
.cd-filters__option {
  display: flex; align-items: center; gap: 9px;
  min-block-size: 34px;
  font-size: 13px; color: var(--cd-color-ink-2, #6b6b78); cursor: pointer;
}
.cd-filters__option input { inline-size: 15px; block-size: 15px; accent-color: var(--cd-color-pink, #e6007e); }

/*
 * Price reads as a row of budget pills, as approved, rather than a stack of radio
 * rows. The radio itself is still the control — it is moved out of sight rather
 * than removed, so the group stays a real radio group for keyboard and assistive
 * technology, and the pill is only its label.
 */
.cd-filters__group--price { display: flex; flex-wrap: wrap; gap: 7px; padding-block-end: 12px; }
.cd-filters__group--price .cd-filters__legend { flex-basis: 100%; }
.cd-filters__group--price .cd-filters__option { min-block-size: 0; gap: 0; }
.cd-filters__group--price input {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0;
}
.cd-filters__group--price input + span {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid var(--cd-color-line-2, #e2e2ec);
  border-radius: 999px;
  font-size: 12.5px; font-weight: 500;
  white-space: nowrap;
}
.cd-filters__group--price input:checked + span {
  background: var(--cd-color-pink, #e6007e);
  border-color: var(--cd-color-pink, #e6007e);
  color: #fff; font-weight: 700;
}
.cd-filters__group--price input:focus-visible + span {
  box-shadow: var(--cd-focus-ring, 0 0 0 3px #fff, 0 0 0 5.5px #c00068);
}

.cd-filters__foot { display: grid; gap: 8px; margin-block-start: 14px; }
.cd-filters__apply { inline-size: 100%; border-radius: 999px; }
.cd-filters__reset { inline-size: 100%; text-align: center; border-radius: 999px; }
.cd-filters__trigger { display: none; }
.cd-filters__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 20px; block-size: 20px; margin-inline-start: 7px;
  border-radius: 999px; background: var(--cd-color-pink, #e6007e); color: #fff;
  font-size: 12px; font-weight: 700;
}

/* Applied-filter chips sit above the grid and each removes one dimension. */
.cd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 4px 14px; }
.cd-chips__label { font-size: 13px; font-weight: 700; color: var(--cd-color-ink-2, #6b6b78); }
.cd-chip--applied { display: inline-flex; align-items: center; gap: 7px; }
.cd-chip__x { font-weight: 700; }
.cd-chip--reset { text-decoration: underline; }

/* --------------------------------------------------------------- card */

li.cd-card {
  display: flex; flex-direction: column;
  background: var(--cd-color-card, #fff);
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-lg, 16px);
  overflow: hidden;
  box-shadow: var(--cd-shadow-sm, 0 3px 10px rgba(60,30,70,.07));
}

/*
 * Media stage: one fixed square on every card.
 *
 * The stage is sized by the card, never by the source image, so a wide photo and a tall
 * one produce the same card. `contain` inside it means nothing is cropped and nothing is
 * stretched; the inset is what stops a full-bleed product touching the card edge.
 *
 * The stage is a white recessed well (user-approved 2026-09-17, D312–D314). White,
 * because the catalogue's photos carry a baked-in white background: on a tinted stage
 * that read as a white square inside a pink square, and on white it merges to the rim.
 * The recess is drawn by `::after` ABOVE the image — a shadow underneath the picture
 * only ever showed in the padding ring, which made the ring look grey against the
 * photo's white; falling onto the picture edge it reads as a real well, lit from above.
 * The overlay takes no pointer events, so the media link, badge and heart behave as
 * before. The restrained brand border is what keeps the pink present without tinting.
 */
.cd-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  padding: 12px;
  margin: 8px;
  border-radius: 12px;
  /*
   * Lighter than the PDP well on purpose (TASK-0018, user's Variant B): the same
   * shadow and border that read right on a ~457px stage read heavy and saturated
   * on a ~225px card. Intensity only — geometry, hover target and the PDP are unchanged.
   */
  border: 1.5px solid rgba(230, 0, 126, .13);
  box-shadow: inset 0 0 0 1px rgba(60, 30, 70, .10);
  transition: border-color .18s ease;
}
.cd-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10.5px;
  pointer-events: none;
  z-index: 1;
  box-shadow:
    inset 0 4px 8px -2px rgba(60, 30, 70, .15),
    inset 0 1px 2px rgba(60, 30, 70, .10),
    inset 3px 0 6px -3px rgba(60, 30, 70, .07),
    inset -3px 0 6px -3px rgba(60, 30, 70, .07),
    inset 0 -1px 2px rgba(255, 255, 255, .95);
}
li.cd-card:hover .cd-card__media,
li.cd-card:focus-within .cd-card__media {
  border-color: rgba(230, 0, 126, .38);
}
/* Status and affordance sit above the recess overlay, and stay clickable. */
.cd-card__media .cd-badge,
.cd-card__wish {
  z-index: 2;
}
@media (max-width: 640px) {
  .cd-card__media {
    padding: 8px;
    margin: 6px;
    border-radius: 10px;
  }
  .cd-card__media::after {
    border-radius: 8.5px;
  }
}
.cd-card__medialink { display: block; block-size: 100%; }

/* Beats `.woocommerce ul.products li.product a img` (0,2,3). */
.woocommerce ul.products li.product .cd-card__media img,
.cd-card .cd-card__media img {
  inline-size: 100%; block-size: 100%;
  margin: 0;
  object-fit: contain;
  display: block;
  box-shadow: none;
}
/* Opposite corner to the badge, as approved: status on one side, affordance on the other. */
.cd-card__wish {
  position: absolute;
  inset-block-start: 9px;
  inset-inline-start: 9px;
  z-index: 2;
}
.cd-card__wish .cd-icon-chip {
  inline-size: 26px; block-size: 26px;
  background: #fff;
  color: var(--cd-color-ink-3, #9a9aa8);
  box-shadow: var(--cd-shadow-sm, 0 3px 10px rgba(60,30,70,.07));
}
.cd-card__wish .cd-icon-chip > .cd-icon { inline-size: .9rem; block-size: .9rem; }

/*
 * Card body density.
 *
 * The body used to reserve height it did not need: two title lines were held open
 * even for a one-line name, an empty rating row was reserved on every card, and
 * the padding and gaps were sized for a denser block of information than a real
 * product actually carries. On the real catalogue that read as a tall card with a
 * title, then a gap, then a price adrift at the bottom.
 *
 * Cards still align across a row: the grid stretches every item to the tallest in
 * the row, and the price is pinned to the body's end, so equal height comes from
 * the layout rather than from reserved emptiness inside each card.
 */
.cd-card__body { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px 10px; flex: 1 1 auto; }

/*
 * Title: exactly two lines, always.
 *
 * The clamp has to live on the anchor, not on the heading. The heading is a direct
 * flex item of `.cd-card__body`, and a flex item's display is blockified — Blink turns
 * the legacy `-webkit-box` into `flow-root`, which silently discards the line clamp.
 * The heading therefore reserved nothing and clamped nothing, so a title ran to one or
 * two lines as it pleased and the gap above the action swung by ~20px from card to
 * card across a row. The anchor is not a flex item, so the clamp survives there.
 *
 * The two lines are reserved rather than merely capped. Every card in a row is already
 * stretched to the tallest, so the slack of a short title has to go somewhere: reserved
 * in the title block it is the same on every card and the price and action line up
 * across the row, whereas leaving it above the action puts it in a different place on
 * every card, which is the ragged reading being repaired here.
 */
.cd-card__name {
  font-weight: 700;
  overflow: hidden;
}
/*
 * Beats `.woocommerce ul.products li.product h3` (0,2,3), which imposes `0.5em 0`
 * block padding — dead space directly under the image — and a `1em` font size that
 * overrode the card's own scale.
 */
.woocommerce ul.products li.product .cd-card__name,
.cd-card .cd-card__name {
  margin: 0; padding: 0;
  font-size: 13.5px; line-height: 1.3;
  block-size: 2.6em; /* two lines at the declared line-height */
}
.cd-card__name a {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/*
 * Rating slot. Structural, and present only when WooCommerce supplies a real rating —
 * with no data it is not rendered at all, so it occupies no height and needs no
 * placeholder. Nothing here fabricates stars or counts.
 */
.cd-card__rating { display: flex; align-items: center; gap: 6px; margin-block-start: 1px; }

/*
 * Optional slots. Both are absent unless the product genuinely supplies them, so the
 * card closes up around them rather than reserving space.
 *
 * The capability line states that something must be chosen before buying; the approved
 * board carries the same kind of line on its "requires selection" card.
 */
.cd-card__excerpt {
  margin: 0;
  font-size: 12px; line-height: 1.35;
  color: var(--cd-color-ink-2, #6b6b78);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cd-card__capability {
  margin: 0;
  font-size: 11.5px; font-weight: 600; line-height: 1.3;
  color: var(--cd-color-teal-aa, #00736b);
}
.cd-rating { display: inline-flex; gap: 1px; color: var(--cd-color-ink-3, #9a9aa8); }
.cd-rating .cd-icon { inline-size: 1rem; block-size: 1rem; }
.cd-rating .is-on { color: var(--cd-color-gold, #ffb800); }
.cd-card__reviews, .cd-card__rating-empty { font-size: 12.5px; color: var(--cd-color-ink-2, #6b6b78); }

/* Beats `.woocommerce ul.products li.product .price` (0,3,1). */
.woocommerce ul.products li.product .cd-card__price,
.woocommerce ul.products li.product .cd-card__price .price,
.cd-card__price {
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 800; font-size: 16px;
  color: var(--cd-color-pink-d, #c00068);
  /*
   * Sits directly under the title/rating, and only takes the remaining space when
   * the row's tallest card forces this one to stretch — so the price stays close
   * to the name on a normal card instead of being pushed to a distant baseline.
   */
  margin-block-start: 2px;
  margin-inline: 0; margin-block-end: 0;
}
.cd-card__price del { color: var(--cd-color-ink-3, #9a9aa8); font-weight: 400; font-size: 12.5px; margin-inline-start: 5px; }

/*
 * Sale presentation.
 *
 * WooCommerce already emits `<del>` for the regular price and `<ins>` for the sale
 * price; the theme only emphasises them. `text-decoration-line` is kept explicit on
 * `<ins>` because browsers underline it by default.
 */
.cd-card__price ins,
.cd-pdp__summary .price ins {
  text-decoration-line: none;
  font-weight: 800;
  color: var(--cd-color-pink-d, #c00068);
}
.cd-card__price del,
.cd-pdp__summary .price del {
  text-decoration-line: line-through;
  opacity: .85;
}

.cd-badge {
  display: inline-block;
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 800; font-size: 12px; line-height: 1;
  padding-block: 6px; padding-inline: 10px;
  border-radius: 999px;
}
.cd-badge--sale {
  background: var(--cd-color-pink-d, #c00068);
  color: #fff;
}
/*
 * Out-of-stock badge: neutral, not the commerce pink, because the state is
 * informational rather than promotional. `#6b6b78` on white is AA-safe.
 */
.cd-badge--oos {
  background: var(--cd-color-ink-2, #6b6b78);
  color: #fff;
}
/*
 * Every card badge occupies the same corner, whatever it says. The out-of-stock
 * badge previously had no placement of its own and fell through to the end of the
 * media box, which put the status under the photo instead of on it.
 */
.cd-card__media .cd-badge {
  position: absolute;
  inset-block-start: 9px;
  inset-inline-end: 9px;
  z-index: 2;
}

.cd-savings {
  margin-block: 4px 0;
  font-size: 13.5px; font-weight: 700;
  color: var(--cd-color-green-d, #1f7a4d);
  /* Keep the label and the isolated amount from being split by bidi reordering. */
  unicode-bidi: isolate;
}
.cd-savings__amount { unicode-bidi: isolate; }
.cd-savings .woocommerce-Price-amount { color: inherit; font-weight: 800; }

/*
 * Out-of-stock card.
 *
 * The approved decision desaturates the image rather than hiding the card, so the
 * product keeps its place in the grid and its card height is unchanged. The status
 * itself is carried by the badge text and the stock line, never by colour alone.
 */
/* Out-of-stock cards keep full colour; the badge and the stock line carry the status. */
.cd-oos-divider { grid-column: 1 / -1; list-style: none; margin: 18px 0 2px; padding: 14px 0 0; border-top: 1px solid var(--cd-color-line, #e6e2ea); }
.cd-oos-divider__text { margin: 0; font-size: 16px; font-weight: 800; color: var(--cd-color-ink-2, #6b6b78); }

/* WooCommerce's own out-of-stock stock line, on card and product page. */
.stock.out-of-stock {
  color: var(--cd-color-ink-2, #6b6b78);
  font-weight: 700;
}

.cd-pdp__summary .cd-savings { margin-block: 6px 0; font-size: 15px; }
/*
 * The summary is a grid, so a direct child is blockified and stretched. Keep the
 * badge at its own content width and at the inline start.
 */
.cd-pdp__summary .cd-badge {
  margin-block-end: 8px;
  inline-size: fit-content;
  justify-self: start;
  align-self: start;
}

/*
 * The body pill is pushed to the card's end so buttons line up across a row; the
 * small top padding keeps it off the price now that the body gaps are tight. The
 */
.cd-card__cta { margin-block-start: auto; padding-block-start: 8px; }

/* Beats `.woocommerce ul.products li.product .button` (0,3,1). */
.woocommerce ul.products li.product .cd-card__cta a.button,
.cd-card__cta .cd-btn,
.cd-card__cta a.button {
  inline-size: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding-inline: 16px; padding-block: 8px;
  margin: 0;
  border-radius: 999px;
  background: var(--cd-color-pink, #e6007e);
  color: #fff;
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 700; font-size: 13px;
  line-height: 1.25;
  text-align: center;
  border: 0;
}
.cd-card__cta a.button:hover { background: var(--cd-color-pink-d, #c00068); }
.cd-card__cta a.button.loading { opacity: .72; }

/*
 * The single CTA closes the card, directly under the price cluster. It is pushed to
 * the card's end so buttons line up across a row even when one title wraps to two
 * lines, and the small top padding keeps it off the price now that the body gaps
 * are tight.
 */

/*
 * Out-of-stock CTA. The rule above paints every card button in the commerce pink,
 * so the out-of-stock route to the product page needs equal specificity to opt
 * out of it: the card keeps one real, focusable CTA, but nothing on it reads as
 * an active purchase action.
 */
.woocommerce ul.products li.product .cd-card__cta a.button.cd-btn--ghost,
.cd-card__cta a.button.cd-btn--ghost {
  background: #fff;
  color: var(--cd-color-ink-2, #6b6b78);
  border: 1.5px solid var(--cd-color-ink-3, #9a9aa8);
  font-size: 12px; font-weight: 600;
}
.woocommerce ul.products li.product .cd-card__cta a.button.cd-btn--ghost:hover,
.cd-card__cta a.button.cd-btn--ghost:hover {
  background: var(--cd-color-neutral-soft, #f1f1f6);
  color: var(--cd-color-ink, #3a3a46);
}

/* WooCommerce's post-add "view cart" link is superseded by the mini-cart panel. */
.woocommerce ul.products li.product a.added_to_cart,
.cd-card__cta a.added_to_cart { display: none; }

/* ---------------------------------------------------------------- PDP */

.cd-pdp { padding-block: 22px 48px; }
.cd-pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

/*
 * Two-column placement.
 *
 * The three children are placed explicitly rather than auto-flowed. Auto-flow would put the
 * description in row 2 of column 1, but row 1's height is set by the *taller* of gallery and
 * summary — so the description would still wait for the purchase column, which is the exact
 * defect this replaces. Letting the summary span both rows makes row 1 the gallery's height
 * alone, so the description starts directly beneath the media whatever the summary does.
 *
 * `align-self: start` keeps each child at its natural height: when the purchase column is the
 * taller one it simply continues past the description instead of stretching it.
 *
 * The row template is the part that actually does the work, and it is not decorative. With
 * two intrinsic rows the grid distributes a spanning item's extra height across BOTH tracks,
 * so the tall summary inflated row 1 and pushed the description 434px below the gallery —
 * better than the old behaviour but still not "directly below the media". Making row 2
 * flexible changes the rule that applies: a spanning item that crosses a flexible track
 * contributes to that track's flex sizing instead of being distributed into the intrinsic
 * ones, so row 1 stays exactly the gallery's own height and every excess pixel of the
 * purchase column lands in row 2. Measured on the complex-personalization fixture, that is
 * the difference between a 434px gap and the intended 34px one.
 */
/*
 * Every rule is scoped to a grid that actually contains a description. The renderer prints
 * nothing when the field is empty, and an unscoped two-row template would still declare the
 * second row and its 34px gap for a product that has no section to put there — measured as
 * 30px of reserved emptiness on the no-description control. Scoped this way, such a product
 * falls back to plain auto-placement and the empty state keeps costing exactly nothing.
 */
@media (min-width: 900px) {
  .cd-pdp__grid:has(> .cd-pdp__description) { grid-template-rows: min-content 1fr; }
  .cd-pdp__grid:has(> .cd-pdp__description) > .cd-pdp__gallery     { grid-column: 1; grid-row: 1; }
  .cd-pdp__grid:has(> .cd-pdp__description) > .cd-pdp__description { grid-column: 1; grid-row: 2; align-self: start; }
  .cd-pdp__grid:has(> .cd-pdp__description) > .cd-pdp__summary     { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
}

/*
 * Media stage.
 *
 * The catalogue's real product files are opaque PNGs with a baked white background and
 * no alpha at all — measured on the three transferred products: 476×750, 590×750 and
 * 750×750, ratios 0.635 / 0.787 / 1.000. A square stage let each file's own ratio decide
 * what the component looked like: `contain` painted them 292, 362 and 460 wide inside the
 * same 460 box, so one product showed 84px of tint down each side, another 49px, and the
 * third covered the stage edge to edge as a plain white square. Three products, three
 * different-looking components, and a hard white rectangle cutting across the tint.
 *
 * Two things fix that, and neither touches a source file.
 *
 * The stage is landscape (5/4, following D06) and its padded content box is wider than
 * any of those ratios, so `contain` is bound by *height* for every one of them. Every
 * product therefore paints at the same height and is simply narrower or wider — one
 * media system, with the source file's proportions no longer setting the component's
 * apparent size.
 *
 * The fill is a white core that fades outward into the tint, sized so the core always
 * covers the painted image. A white-background file has nothing to cut against: its
 * edges land inside white and disappear, and the only visible transition is the stage's
 * own soft vignette. Nothing is cropped, nothing is scaled non-uniformly, and the rule
 * is general — no product id, slug or per-file case anywhere.
 */
.cd-pdp__gallery .woocommerce-product-gallery {
  inline-size: 100% !important; float: none !important;
  /* Centred in its column so the capped stage does not hug one edge. */
  margin: 0 auto !important;
  max-inline-size: 560px;
}
/*
 * Beats `.woocommerce div.product div.images .woocommerce-product-gallery__wrapper`
 * (0,4,2), which zeroes the padding — without the extra weight the stage has no inset
 * and the product bleeds to its edge. `grid-template-rows: minmax(0, 1fr)` is what makes
 * the row exactly the padded content box: an `auto` row is sized by the image and the
 * stage's own height stops constraining anything, which is how the image ended up 882px
 * tall inside a 448px stage.
 */
/*
 * The gallery stage is a square, globally (D317, user decision after the TASK-0017
 * four-product comparison): the tall, compact and multi-image subjects gain ~28% of
 * presence over 5:4, the wide subject is a tie, and the ~70px of extra first-screen
 * height on a phone was accepted. One ratio for every product — no per-product,
 * per-image-count or scripted switching — with `contain` still binding, so nothing
 * is cropped.
 *
 * Two elements can be the stage. Without FlexSlider (one image) the wrapper is the
 * stage and its own aspect-ratio rules. With FlexSlider (several images) the plugin
 * wraps the slides in `.flex-viewport` and writes the active slide's height onto it
 * as an inline style (`smoothHeight`); an inline value beats any stylesheet weight,
 * so `height: auto !important` is the only way source can hand the viewport back to
 * its aspect-ratio. That is the one `!important` here, and it exists for that reason.
 */
.woocommerce div.product .cd-pdp__gallery div.images .flex-viewport,
.cd-pdp__gallery .flex-viewport {
  aspect-ratio: 1 / 1;
  height: auto !important;
}
.woocommerce div.product .cd-pdp__gallery div.images .woocommerce-product-gallery__wrapper,
.cd-pdp__gallery .woocommerce-product-gallery__wrapper {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  border-radius: 14px;
  overflow: hidden;
  /*
   * Same white recessed well and brand border as the product card (D312 supersedes the
   * earlier pink radial fade here), so the grid and the product page frame the same
   * photo the same way. Geometry, `contain` and PhotoSwipe are untouched.
   */
  background: #fff;
  border: 1.5px solid rgba(230, 0, 126, .18);
  box-shadow: inset 0 0 0 1px rgba(60, 30, 70, .10);
}
.woocommerce div.product .cd-pdp__gallery div.images .woocommerce-product-gallery__wrapper::after,
.cd-pdp__gallery .woocommerce-product-gallery__wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12.5px;
  pointer-events: none;
  z-index: 1;
  box-shadow:
    inset 0 6px 12px -2px rgba(60, 30, 70, .22),
    inset 0 2px 3px rgba(60, 30, 70, .14),
    inset 4px 0 8px -4px rgba(60, 30, 70, .10),
    inset -4px 0 8px -4px rgba(60, 30, 70, .10),
    inset 0 -2px 3px rgba(255, 255, 255, .95);
}
/* The stage's padded content box is the frame the image is fitted into. */
.woocommerce div.product .cd-pdp__gallery .woocommerce-product-gallery__image,
.woocommerce div.product .cd-pdp__gallery .woocommerce-product-gallery__image > a,
.cd-pdp__gallery .woocommerce-product-gallery__image,
.cd-pdp__gallery .woocommerce-product-gallery__image > a {
  display: block; inline-size: 100%; block-size: 100%; margin: 0;
}
/*
 * Both axes are given, and `contain` is what makes that safe: it scales uniformly to the
 * larger fitting size, so the intrinsic ratio is preserved exactly and no part of the
 * product is cropped. `cover`, `fill` or a transform scale would each break one of those.
 */
.woocommerce div.product .cd-pdp__gallery .woocommerce-product-gallery__image img,
.cd-pdp .cd-pdp__gallery .woocommerce-product-gallery__image img {
  inline-size: 100%; block-size: 100%;
  object-fit: contain;
  display: block;
}
/*
 * The stage fills its column (TASK-0023, D324). Candidate-side CSS lays the gallery out
 * as a flex row above 900px so the thumbnail rail can sit beside the stage; the
 * single-image wrapper then became a flex item and shrank to the image's max-content
 * width — a 413px source drew a 310px stage, and even a 750px source reached only 457
 * of the 560px column. The stage is a fixed square that the image is fitted into, so
 * its width comes from the column, never from the file: `contain` keeps a small source
 * at its own size in the middle of the full stage, and nothing is upscaled by this.
 * Only the direct child is targeted — with several images FlexSlider owns the row and
 * the wrapper lives inside `.flex-viewport`.
 */
.woocommerce div.product .cd-pdp__gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper,
.cd-pdp__gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
  inline-size: 100%;
  flex: 1 1 100%;
  min-inline-size: 0;
}
/*
 * Several images: one slide at a time (TASK-0023, D323). Source owns the FlexSlider
 * layout so the visible picture, the active thumbnail and the PhotoSwipe index are the
 * same slide. FlexSlider's slide animation lays the slides out as a strip and moves the
 * strip with an inline `transform` and `width`; those are beaten only by `!important`,
 * and that is the sole reason for the two below. Inside the square stage every slide
 * shares the one grid cell, and every slide that is not `.flex-active-slide` is hidden
 * — `visibility` rather than `display`, so FlexSlider can still measure it, and hidden
 * slides take no pointer events and no focus. The rule keys off `.flex-viewport`, which
 * only exists once the slider is initialised, so a single-image page is untouched.
 */
.woocommerce div.product .cd-pdp__gallery .flex-viewport .woocommerce-product-gallery__wrapper,
.cd-pdp__gallery .flex-viewport .woocommerce-product-gallery__wrapper {
  transform: none !important;
  transition: none !important;
  inline-size: 100% !important;
  grid-template-columns: minmax(0, 1fr);
}
.woocommerce div.product .cd-pdp__gallery .flex-viewport .woocommerce-product-gallery__image,
.cd-pdp__gallery .flex-viewport .woocommerce-product-gallery__image {
  grid-column: 1;
  grid-row: 1;
}
.woocommerce div.product .cd-pdp__gallery .flex-viewport .woocommerce-product-gallery__image:not(.flex-active-slide),
.cd-pdp__gallery .flex-viewport .woocommerce-product-gallery__image:not(.flex-active-slide) {
  visibility: hidden;
  pointer-events: none;
}
/* Belt-and-braces: no gallery overlay may exceed its container's inline size. */
.cd-pdp .cd-pdp__gallery img.zoomImg { max-inline-size: 100%; }
.cd-pdp .cd-pdp__gallery .flex-control-thumbs img { aspect-ratio: 1 / 1; }
.cd-pdp__gallery .flex-control-thumbs { display: flex; gap: 10px; margin-block-start: 12px; padding: 0; list-style: none; flex-wrap: wrap; }
.cd-pdp__gallery .flex-control-thumbs li { inline-size: 74px; }
/* Beats `.woocommerce div.product div.images img` (0,2,3), which zeroes the shadow. */
.woocommerce div.product .cd-pdp__gallery .flex-control-thumbs img,
.cd-pdp__gallery .flex-control-thumbs img {
  background: #fff;
  border-radius: 8px;
  border: 1.5px solid rgba(230, 0, 126, .18);
  box-shadow:
    inset 0 2px 4px rgba(60, 30, 70, .16),
    inset 0 0 0 1px rgba(60, 30, 70, .09);
}

/*
 * Buy box.
 *
 * WooCommerce floats the summary and caps it at `width: 48%`
 * (`.woocommerce div.product div.summary`, 0,3,2). In this two-column grid that left the
 * whole buy box 292px wide inside a 608px column, next to a 560px media panel — which is
 * why the action read as a small detached pill and the column read as empty. The rule
 * below outweighs it (0,4,3) and lets the summary fill the column it was given.
 *
 * The column is a two-track grid so the price and the availability can share a line, as
 * both the desktop and mobile references show. Everything else spans both tracks; the
 * `order` values below are the approved hierarchy, and the default keeps any child not
 * named here — a plugin's, or one added later — after the named ones instead of
 * silently jumping to the top.
 */
.woocommerce div.product.cd-pdp__grid div.summary.cd-pdp__summary,
.cd-pdp__summary {
  float: none;
  inline-size: 100%;
  max-inline-size: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  column-gap: 12px;
  row-gap: 10px;
}
.cd-pdp__summary > * { order: 12; grid-column: 1 / -1; }
.cd-pdp__summary > .cd-badge { order: 1; justify-self: start; }
.cd-pdp__summary > .product_title { order: 2; }
.cd-pdp__summary > .cd-pdp__sku { order: 3; }
.cd-pdp__summary > .cd-pdp__ratingslot { order: 4; }
.cd-pdp__summary > .price { order: 5; grid-column: 1; }
.cd-pdp__summary > .stock { order: 6; grid-column: 2; align-self: center; justify-self: start; }
.cd-pdp__summary > .cd-savings { order: 7; }
.cd-pdp__summary > .woocommerce-product-details__short-description { order: 8; }
.cd-pdp__summary > form.cart,
.cd-pdp__summary > form.variations_form { order: 9; }
.cd-pdp__summary > .cd-pdp__wish { order: 10; }
.cd-pdp__summary > .cd-pdp__trust { order: 11; }
.cd-pdp__summary > .cd-branches { order: 13; }

/* The title leads the summary, as D06 shows. Fluid, so no product-specific sizing. */
.cd-pdp__summary .product_title {
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.18;
  margin: 0;
}

/*
 * Reserved rating slot. Empty it holds a hairline of height — enough that the price does
 * not sit hard against the title, small enough that it never reads as a blank row. It is
 * empty of content by design; nothing here draws a star, a score or a count.
 */
.cd-pdp__ratingslot:empty { min-block-size: 10px; }
.cd-pdp__ratingslot:not(:has(.woocommerce-product-rating)) { min-block-size: 10px; }

.cd-pdp__sku { font-size: 13px; color: var(--cd-color-ink-2, #6b6b78); margin: 0; }
.cd-pdp__sku-value { direction: ltr; unicode-bidi: isolate; display: inline-block; font-weight: 700; }

/* Supporting text, when the product genuinely has one. Subordinate to title and price. */
.cd-pdp__summary .woocommerce-product-details__short-description { margin: 0; }
.cd-pdp__summary .woocommerce-product-details__short-description p {
  margin: 0;
  font-size: 15px; line-height: 1.55;
  color: var(--cd-color-ink-2, #6b6b78);
}

/* Beats `.woocommerce div.product p.price` / `span.price` (0,2,2). */
.woocommerce div.product .cd-pdp__summary p.price,
.woocommerce div.product .cd-pdp__summary span.price,
.cd-pdp__summary .price {
  font-family: var(--cd-typography-heading-family, sans-serif);
  /* The commercial anchor: clearly the strongest thing under the title. */
  font-weight: 800; font-size: clamp(28px, 2.5vw, 36px);
  line-height: 1.1;
  color: var(--cd-color-pink-d, #c00068);
  margin: 0;
}
.cd-pdp__summary .stock {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700;
  color: var(--cd-color-green-aa, #4e7a1e);
}
.cd-pdp__summary .stock.out-of-stock { color: var(--cd-color-gray-aa, #6b6b78); }

/*
 * Desktop purchase block.
 *
 * Quantity and the primary action share a line inside one bordered panel, so the two
 * read as a single purchase unit — the mobile reference groups them exactly this way in
 * its sticky bar. Previously the quantity sat on its own row above the button as a small
 * bare input with nothing tying it to the action.
 *
 * Anything else WooCommerce or an extension puts in this form — the personalization
 * region, a variations table, an add-on total — spans both tracks above them.
 */
/*
 * The purchase block, following D06: a labelled quantity on its own row, then the
 * primary action spanning the block beneath it. The panel around the two is what makes
 * them read as one purchase unit — previously the quantity was a bare unlabelled input
 * with nothing tying it to the button below.
 *
 * Beats `.woocommerce div.product form.cart` (0,2,2), which carries a `2em` bottom
 * margin — that margin is what left a 40px void between the purchase block and the
 * secondary action, and a plain `.cd-pdp__summary form.cart` rule (0,2,1) loses to it.
 */
/*
 * The purchase area is layout, not a card.
 *
 * 0.13.8 wrapped the form in a white panel — border, 14px inset, 16px radius — to bind
 * the quantity and the action together while the quantity still spanned the column. Once
 * the quantity became compact and the unverified social slot collapsed, that panel framed
 * two small controls inside 608 × 191 of empty white and read as the dominant object in
 * the summary. The wrapper is gone: the row and the action sit directly in the buy-box
 * flow, and the action is strong on its own without a frame around it.
 *
 * WooCommerce still owns the form, its method, its fields and its submission — only the
 * surface it was given here is withdrawn.
 *
 * Beats `.woocommerce div.product form.cart` (0,2,2), which carries a `2em` bottom margin.
 */
.woocommerce div.product .cd-pdp__summary form.cart,
.cd-pdp__summary form.cart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  justify-items: stretch;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
/*
 * The supporting row: a compact quantity on the RTL primary side and the social-proof
 * slot beside it. Everything else in the form — the label, the personalization region, a
 * variations table, the action — spans both tracks.
 */
.cd-pdp__summary form.cart > * { grid-column: 1 / -1; }
.cd-pdp__summary form.cart > .quantity { grid-column: 1; justify-self: start; }
.cd-pdp__summary form.cart > .cd-pdp__social { grid-column: 2; justify-self: center; }
/* The line total sits on the far side, above the action: quantity | rating | total. */
.cd-pdp__summary form.cart > .cd-pdp__linetotal { grid-column: 3; justify-self: end; }
.cd-pdp__qtylabel {
  display: block;
  margin-block-end: -4px;
  font-size: 13.5px; font-weight: 700;
  color: var(--cd-color-ink-2, #6b6b78);
}

/*
 * Personalization container.
 *
 * A shell around the region WooCommerce Product Add-Ons injects into. It collapses to
 * nothing when the owner renders no fields, so a product without personalization shows
 * no panel, no heading and no gap — `:empty` plus `:not(:has(…))` covers both an
 * entirely empty wrapper and one holding only whitespace.
 *
 * The rules below are sized for the patterns verified on the real catalogue: required
 * markers, long Hebrew help text, selects with up to eighteen options, paid options
 * carrying an inline price modifier, a file upload, and the plugin's running total.
 * None of that behaviour is reimplemented here — only its presentation.
 */
.cd-pdp__personalization:empty { display: none; }
.cd-pdp__personalization {
  display: grid; gap: 14px;
  margin-block-end: 4px;
  padding: 14px 16px;
  background: var(--cd-color-pink-xl, #fdf1f7);
  border: 1px solid var(--cd-color-pink-l, #fde3f0);
  border-radius: var(--cd-radius-lg, 16px);
}
/* A wrapper holding no add-on block is dropped as well, not just a literally empty one. */
.cd-pdp__personalization:not(:has(.wc-pao-addon)):not(:has(.variations)) { display: none; }

.cd-pdp__personalization .wc-pao-addon-container { margin: 0; }
/*
 * The owner names an add-on with a `label` for a single field and with a `legend` inside
 * a `fieldset` for a group of options. Only the `label` was styled, so the checkbox
 * add-on's name fell back to the browser's default legend rendering — a different size,
 * a different weight and an inherited fieldset box around it. Both carry the same name
 * treatment now, and the fieldset itself is reset so no second frame appears inside the
 * section.
 */
.cd-pdp__personalization fieldset.wc-pao-fieldset {
  margin: 0; padding: 0; border: 0; min-inline-size: 0;
}
.cd-pdp__personalization .wc-pao-addon-name,
.cd-pdp__personalization legend.wc-pao-addon-name {
  display: block; margin-block-end: 4px; padding: 0;
  inline-size: 100%;
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 700; font-size: 14px;
  color: var(--cd-color-ink, #3a3a46);
}
/*
 * An add-on whose title the owner hides (`title_format=hide`) still renders its name,
 * as a `screen-reader-text` label so the field keeps an accessible name. That label
 * must not take the visible name treatment above: at 100% inline-size, absolutely
 * positioned inside the grid, it stretched to the grid width and pushed the page
 * wider than the viewport (F-B2-1). This restates WordPress's own screen-reader
 * clip contract for that one element — still in the DOM, still associated, never
 * part of the visible layout.
 */
.cd-pdp__personalization .wc-pao-addon-name.screen-reader-text,
.cd-pdp__summary label.wc-pao-addon-name.screen-reader-text {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  white-space: nowrap;
}
/*
 * An option row: the owner emits the control and its label as siblings, which read as
 * two disconnected things. They become one row here — the whole row is the visual target
 * and the tick sits against its wording, with the fee at the end.
 */
.cd-pdp__personalization .wc-pao-addon-wrap > div:has(> input[type="checkbox"]),
.cd-pdp__personalization .wc-pao-addon-wrap > div:has(> input[type="radio"]) {
  display: flex; align-items: center; gap: 10px;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding-inline: 12px;
  border: 1px solid var(--cd-color-line-2, #e2e2ec);
  border-radius: var(--cd-radius-sm, 11px);
  background: #fff;
}
.cd-pdp__personalization .wc-pao-addon-wrap > div > label {
  margin: 0;
  display: flex; align-items: center; gap: 8px; flex: 1 1 auto;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.cd-pdp__personalization .wc-pao-addon-description {
  margin-block-end: 7px;
  font-size: 12.5px; line-height: 1.45;
  color: var(--cd-color-ink-2, #6b6b78);
}
.cd-pdp__personalization .wc-pao-addon-field {
  inline-size: 100%; max-inline-size: none;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding-inline: 12px;
  border: 1px solid var(--cd-color-line-2, #e2e2ec);
  border-radius: var(--cd-radius-sm, 11px);
  background: #fff;
  font: inherit; font-size: 14px;
}
.cd-pdp__personalization textarea.wc-pao-addon-field { min-block-size: 84px; padding-block: 10px; line-height: 1.45; }
/*
 * Written at (0,3,1) to match the text-field rule in the summary block, which otherwise
 * wins and stretches a tick box across the column.
 */
.cd-pdp__summary .cd-pdp__personalization input[type="checkbox"].wc-pao-addon-field,
.cd-pdp__summary .cd-pdp__personalization input[type="radio"].wc-pao-addon-field,
.cd-pdp__personalization input[type="checkbox"].wc-pao-addon-field,
.cd-pdp__personalization input[type="radio"].wc-pao-addon-field {
  flex: 0 0 auto;
  inline-size: 19px; min-inline-size: 19px; max-inline-size: 19px;
  block-size: 19px; min-block-size: 19px;
  margin: 0; padding: 0;
  border: 0; background: none;
  accent-color: var(--cd-color-pink, #e6007e);
}
.cd-pdp__personalization input[type="file"].wc-pao-addon-field { padding-block: 10px; }
/* The plugin marks a required group; the marker must read as required, not decorative. */
.cd-pdp__personalization .wc-pao-required-addon .wc-pao-addon-name { color: var(--cd-color-ink, #3a3a46); }
.cd-pdp__personalization .wc-pao-addon-name .required { color: var(--cd-color-pink-d, #c00068); }
/*
 * Paid options and the plugin's running total.
 *
 * The fee is the owner's own `.wc-pao-addon-price` output — the theme neither computes
 * nor formats it, and shows it only where the owner already emitted it. It reads as a
 * small chip so a paid option is legible at a glance without competing with the price.
 */
.cd-pdp__personalization .wc-pao-addon-price {
  display: inline-block;
  margin-inline-start: 6px;
  padding-inline: 8px; padding-block: 2px;
  border-radius: 999px;
  background: var(--cd-color-pink-l, #fde3f0);
  font-weight: 700; font-size: 12.5px;
  color: var(--cd-color-pink-d, #c00068);
  white-space: nowrap;
}
.cd-pdp__personalization .wc-pao-addon-wrap > div > label .wc-pao-addon-price { margin-inline-start: auto; }
.cd-pdp__personalization #product-addons-total,
.cd-pdp__summary #product-addons-total {
  margin: 0; padding-block-start: 10px;
  border-block-start: 1px solid var(--cd-color-pink-l, #fde3f0);
  font-size: 13.5px;
}
/*
 * Quantity.
 *
 * WooCommerce's own control, unchanged: a single `input[type=number]` carrying its real
 * name, value, min and step. It ships no − / + buttons, and none are added here — that
 * would be new behaviour, not presentation. The input is sized to the action's height so
 * the two sit as a matched pair rather than a small box above a large button.
 */
.cd-pdp__summary .quantity { display: inline-flex; align-items: center; justify-self: start; }
.cd-pdp__summary .quantity input.qty {
  inline-size: 84px; min-block-size: 54px;
  padding-inline: 10px;
  text-align: center;
  border: 1px solid var(--cd-color-line-2, #e2e2ec);
  border-radius: var(--cd-radius-sm, 11px);
  font: inherit; font-weight: 800; font-size: 16px;
  background: #fff;
}

/*
 * Stepped quantity, per D06: one rounded field carrying − amount +. The class is added
 * by the script that inserts the buttons, so without script the plain input keeps its
 * own border and nothing looks half-built.
 */
.cd-pdp__summary .quantity.cd-qty--stepped {
  /*
   * Compact: sized to its own contents rather than the column. The full-width treatment
   * made a 577px control for a single digit and left the approved supporting slot beside
   * it with nowhere to go.
   */
  inline-size: auto;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--cd-color-line-2, #e2e2ec);
  border-radius: 999px;
  background: #fff;
}
.cd-pdp__summary .quantity.cd-qty--stepped input.qty {
  flex: 0 0 auto;
  /*
   * Room for three digits. The base field carries 10px of side padding and the browser's
   * spin arrows take another strip, which left about 11px for the number: one digit
   * showed, two were clipped. Padding and arrows go (the − / + buttons replace them).
   */
  inline-size: 60px; min-inline-size: 0;
  min-block-size: 38px;
  padding-inline: 0;
  border: 0; background: none;
  font-size: 16px;
  -moz-appearance: textfield;
  appearance: textfield;
}
.cd-pdp__summary .quantity.cd-qty--stepped input.qty::-webkit-outer-spin-button,
.cd-pdp__summary .quantity.cd-qty--stepped input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Line total: unit price × quantity, drawn beside the supporting row. */
.cd-pdp__linetotal {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  min-block-size: 49px;
  line-height: 1.2;
  text-align: end;
}
.cd-pdp__linetotal[hidden] { display: none; }
.cd-pdp__linetotal-label { font-size: 12.5px; font-weight: 700; color: var(--cd-color-ink-2, #6b6b78); }
.cd-pdp__linetotal-amount { font-size: 20px; font-weight: 800; color: var(--cd-color-pink-d, #c00068); white-space: nowrap; }
.cd-qty__btn {
  flex: 0 0 auto;
  inline-size: 38px; block-size: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 0; border-radius: 999px;
  background: var(--cd-color-pink-xl, #fdf1f7);
  color: var(--cd-color-pink-d, #c00068);
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-size: 20px; font-weight: 700; line-height: 1;
  cursor: pointer;
}

/*
 * Social-proof slot — reserved, and empty.
 *
 * `GOOGLE_REVIEWS_OWNER = NONE VERIFIED` still holds: nothing in the project, the
 * candidate or the legacy public storefront can supply a real score or count. So this
 * region carries no star, no score, no count, no review wording and no Google mark, and
 * makes no call. What it does carry is geometry — the same pill shape and height as the
 * quantity beside it — so the supporting row reads as a deliberate pair now and a real
 * owner has a defined place to land in later.
 *
 * It hugs its own width rather than filling the row: a full-width empty region would be
 * the very thing this version removes.
 */
.cd-pdp__social {
  display: flex; align-items: center; gap: 8px;
  min-inline-size: 190px;
  min-block-size: 49px;
  padding-inline: 14px;
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: 999px;
  background: var(--cd-color-neutral-soft, #f1f1f6);
  font-size: 13.5px; font-weight: 600;
  color: var(--cd-color-ink-2, #6b6b78);
}
/* Nothing to say (no plugin, no data, or below the owner's threshold): no empty pill. */
.cd-pdp__social:empty { display: none; }
.cd-qty__btn:hover { background: var(--cd-color-pink-l, #fde3f0); }
.cd-qty__btn:focus-visible { outline: 2px solid var(--cd-color-pink, #e6007e); outline-offset: 2px; }
/*
 * Beats `.woocommerce div.product form.cart .button` (0,3,2). WooCommerce's default
 * button colour is a purple that the approved direction explicitly supersedes, so
 * the primary action must resolve to the brand pink on every surface.
 */
.woocommerce div.product .cd-pdp__summary form.cart button.single_add_to_cart_button,
.cd-pdp__summary button.single_add_to_cart_button {
  /* Fills the rest of the purchase block beside the quantity, as the approved PDP shows. */
  inline-size: 100%;
  min-block-size: 54px;
  padding-inline: 26px; padding-block: 10px;
  border: 0; border-radius: 999px;
  background: var(--cd-color-pink, #e6007e);
  color: #fff;
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 700; font-size: 16.5px;
}
.woocommerce div.product .cd-pdp__summary form.cart button.single_add_to_cart_button:hover,
.cd-pdp__summary button.single_add_to_cart_button:hover { background: var(--cd-color-pink-d, #c00068); }
.cd-pdp__summary button.single_add_to_cart_button.loading { opacity: .72; }

/*
 * Variation selection.
 *
 * WooCommerce renders the selector as a table and the resolved variation as a
 * block it fills in after each change. Both are restyled as a stacked block so
 * the label, the control, the reset action and the resolved price read in
 * logical order in Hebrew RTL and stay usable at 360px. WooCommerce keeps
 * ownership of which options exist, which are selectable, which variation they
 * resolve to and what it costs.
 *
 * Authored above `.woocommerce div.product form.cart .variations …` (0,3,2).
 */
.woocommerce div.product .cd-pdp__summary form.variations_form { display: block; }
.woocommerce div.product .cd-pdp__summary table.variations,
.cd-pdp__summary table.variations {
  inline-size: 100%; margin: 0;
  border: 0; border-collapse: collapse;
}
.woocommerce div.product .cd-pdp__summary table.variations tbody,
.woocommerce div.product .cd-pdp__summary table.variations tr,
.woocommerce div.product .cd-pdp__summary table.variations th,
.woocommerce div.product .cd-pdp__summary table.variations td {
  display: block; inline-size: auto;
  padding: 0; border: 0;
  text-align: start;
}
.woocommerce div.product .cd-pdp__summary table.variations th.label label,
.cd-pdp__summary table.variations th.label label {
  display: block; margin-block-end: 6px;
  font-weight: 700; font-size: 14px;
  color: var(--cd-color-ink, #3a3a46);
}
.woocommerce div.product .cd-pdp__summary table.variations td.value select,
.cd-pdp__summary table.variations select {
  inline-size: 100%; max-inline-size: 320px;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding-inline: 12px;
  border: 1px solid var(--cd-color-line-2, #e2e2ec);
  border-radius: var(--cd-radius-sm, 11px);
  background: #fff;
  font: inherit; font-weight: 600;
}
.cd-pdp__summary table.variations select[aria-invalid="true"] {
  border-color: var(--cd-color-orange-d, #a85e00);
}
/*
 * Reset link. WooCommerce toggles its visibility, so it is laid out at a full tap
 * target and simply reserves that space while hidden — the row height never changes.
 */
.woocommerce div.product .cd-pdp__summary a.reset_variations,
.cd-pdp__summary a.reset_variations {
  display: inline-flex; align-items: center;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  font-size: 13.5px; font-weight: 700;
  color: var(--cd-color-ink-2, #6b6b78);
}

.cd-pdp__summary .single_variation_wrap { display: block; }
.cd-pdp__summary .woocommerce-variation.single_variation { display: grid; gap: 8px; }
.cd-pdp__summary .woocommerce-variation:empty { display: none; }
.cd-pdp__summary .woocommerce-variation-description p { margin: 0; font-size: 14px; color: var(--cd-color-ink-2, #6b6b78); }
.cd-pdp__summary .woocommerce-variation-add-to-cart {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-block-start: 12px;
}

/*
 * Missing-selection error. Matches the mini-cart notice treatment so the slice has
 * one error language, and takes its own row so the control row never reflows.
 */
.cd-pdp__variation-error {
  flex-basis: 100%; margin: 0;
  padding-inline: 12px; padding-block: 10px;
  border-radius: var(--cd-radius-sm, 11px);
  background: var(--cd-color-orange-l, #fdeede);
  color: var(--cd-color-orange-d, #a85e00);
  font-size: 13.5px; font-weight: 700;
}

/*
 * Product add-ons.
 *
 * Markup, field types, required state, validation and pricing all belong to the
 * Product Add-Ons extension. The theme only places its markup in the approved RTL
 * system and gives its controls the slice's tap target and focus treatment.
 */
.cd-pdp__summary .wc-pao-addons-container {
  display: grid; gap: 12px;
  inline-size: 100%;
}
.cd-pdp__summary .wc-pao-addon-container { display: grid; gap: 6px; }
.woocommerce div.product .cd-pdp__summary label.wc-pao-addon-name,
.cd-pdp__summary label.wc-pao-addon-name {
  display: block; margin: 0;
  font-weight: 700; font-size: 14px;
  color: var(--cd-color-ink, #3a3a46);
}
/* The extension marks a required field with an asterisk; keep it readable, not alarming. */
.cd-pdp__summary label.wc-pao-addon-name em.required {
  color: var(--cd-color-pink-d, #c00068);
  font-style: normal; font-weight: 800;
  margin-inline-start: 3px;
}
.cd-pdp__summary .wc-pao-addon-wrap { margin: 0; }
/*
 * Text-like fields only.
 *
 * Without the `:not()` guard this rule (0,3,1) also caught the checkbox and beat the
 * 18px rule below (0,2,0), rendering a tick box as a 320 x 44 white panel. The cap is
 * gone as well: the buy box is 608 wide, and a 320px field left the block looking
 * half-finished beside a full-width action.
 */
.woocommerce div.product .cd-pdp__summary select.wc-pao-addon-field,
.cd-pdp__summary select.wc-pao-addon-field,
.cd-pdp__summary .wc-pao-addon-wrap input.wc-pao-addon-field:not([type="checkbox"]):not([type="radio"]) {
  inline-size: 100%; max-inline-size: none;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding-inline: 12px;
  border: 1px solid var(--cd-color-line-2, #e2e2ec);
  border-radius: var(--cd-radius-sm, 11px);
  background: #fff;
  font: inherit; font-weight: 600;
}
.cd-pdp__summary .wc-pao-addon-field:focus-visible {
  outline: 3px solid var(--cd-color-teal-aa, #00736b);
  outline-offset: 2px;
}

/*
 * The extension's own validation notice, styled to match the slice's single error
 * language. Its text, its timing and which field it points at stay the extension's.
 */
.cd-pdp__summary .wc-pao-validation-notice {
  margin: 0;
  padding-inline: 12px; padding-block: 10px;
  border-radius: var(--cd-radius-sm, 11px);
  background: var(--cd-color-orange-l, #fdeede);
  color: var(--cd-color-orange-d, #a85e00);
  font-size: 13.5px; font-weight: 700;
}
/* The extension also prints an empty container that only fills in other cases. */
.cd-pdp__summary #required_addons_validation_message:empty { display: none; }
.cd-pdp__summary #product-addons-total:empty { display: none; }

/*
 * The extension's running order summary. It is a real breakdown of what the
 * selection costs, so it stays — but it is a secondary read next to the product
 * price, and its rows must not inherit the 26px primary price treatment.
 */
.cd-pdp__summary #product-addons-total .product-addon-totals {
  margin: 0; padding-block-start: 12px;
  border-block-start: 1px solid var(--cd-color-line, #ececf2);
}
.cd-pdp__summary #product-addons-total ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.cd-pdp__summary #product-addons-total li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0;
  font-size: 13.5px; color: var(--cd-color-ink-2, #6b6b78);
}
/* The extension supplies its own name/value separator; do not add a second one. */
.cd-pdp__summary #product-addons-total .wc-pao-addon-value { font-weight: 700; margin-inline-start: 4px; }
.cd-pdp__summary #product-addons-total li.wc-pao-subtotal-line {
  margin-block-start: 4px; padding-block-start: 8px;
  border-block-start: 1px solid var(--cd-color-line, #ececf2);
}
/* Beats `.woocommerce div.product .cd-pdp__summary p.price` (0,3,3 vs 0,3,2). */
.woocommerce div.product .cd-pdp__summary #product-addons-total p.price,
.cd-pdp__summary #product-addons-total p.price {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  inline-size: 100%; margin: 0;
  font-size: 15px; font-weight: 800;
  color: var(--cd-color-ink, #3a3a46);
}

/* Any other WooCommerce button rendered inside the slice inherits the brand primary. */
.woocommerce .cd-page .button.alt,
.woocommerce .cd-minicart .button { background: var(--cd-color-pink, #e6007e); color: #fff; }

/*
 * Wishlist, secondary — the labelled outline pill directly under the primary action, as
 * D06 shows. It spans the column like the action but reads clearly below it: outline
 * rather than filled, lighter type, and a pink hairline instead of a pink field.
 */
.cd-pdp__wish {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  inline-size: 100%;
  /* Thinner and lighter than the 54px filled action, so the two never read as a pair. */
  min-block-size: 44px;
  padding-inline: 18px;
  border: 1px solid var(--cd-color-pink-l, #fde3f0);
  border-radius: 999px;
  background: #fff;
  font-size: 14px; font-weight: 700;
  color: var(--cd-color-pink-d, #c00068);
}
.cd-pdp__wish .cd-icon-chip { inline-size: 1.55rem; block-size: 1.55rem; border: 0; background: none; }
.cd-pdp__wish .cd-icon-chip > .cd-icon { inline-size: 1.15rem; block-size: 1.15rem; }

/*
 * Service benefits, tied to the purchase block rather than drifting below it: the rule
 * above them is the join, and the spacing either side of it is deliberately short. The
 * items and their icons are the existing ones; no claim is added here.
 */
.cd-pdp__trust {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px; row-gap: 8px;
  margin-block-start: 2px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--cd-color-line, #ececf2);
}
.cd-pdp__trust li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; }
.cd-pdp__trust .cd-icon-chip { inline-size: 2.1rem; block-size: 2.1rem; }
.cd-pdp__trust .cd-icon-chip > .cd-icon { inline-size: 1.1rem; block-size: 1.1rem; }

/*
 * Full product description.
 *
 * A plain readable content section below the purchase composition — not a tab set and not
 * an accordion, because nothing in the approved evidence asks for one and a single
 * scrollable block is the simpler honest reading of existing copy.
 *
 * The measure is capped so long Hebrew paragraphs stay comfortable to read rather than
 * running the full page width, and everything the existing copy might already contain —
 * lists, sub-headings, links, images, tables — is constrained so it cannot overflow. The
 * section is not rendered at all when the field is empty, so there is no rule here for an
 * empty state: there is no empty state.
 */
/*
 * The section reads as a deliberate content module rather than raw body copy: a light card
 * surface on the page tint, the theme's existing large radius, a single hairline border and
 * no shadow — the personalization block next to it already carries a tint, so a second
 * tinted panel in the same viewport would compete with it instead of supporting it.
 *
 * The measure cap stays, but it is expressed as the smaller of 74ch and the column: inside
 * the media column 74ch is wider than the column itself, and an uncapped `max-inline-size`
 * would have no effect there while still governing on wider surfaces.
 */
.cd-pdp__description {
  margin-block-start: 0;
  padding: 26px 28px;
  background: var(--cd-color-card, #fff);
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-lg, 16px);
}
.cd-pdp__description-title {
  margin: 0 0 14px;
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 800; font-size: clamp(21px, 1.8vw, 26px);
  line-height: 1.25;
  color: var(--cd-color-ink, #3a3a46);
}
.cd-pdp__description-body {
  max-inline-size: min(74ch, 100%);
  font-size: 16px; line-height: 1.7;
  color: var(--cd-color-ink-2, #6b6b78);
}
.cd-pdp__description-body strong {
  font-weight: 700;
  color: var(--cd-color-ink, #3a3a46);
}
.cd-pdp__description-body > :first-child { margin-block-start: 0; }
.cd-pdp__description-body > :last-child { margin-block-end: 0; }
.cd-pdp__description-body p { margin-block: 0 14px; }
.cd-pdp__description-body h2,
.cd-pdp__description-body h3,
.cd-pdp__description-body h4 {
  margin-block: 22px 8px;
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 700; font-size: 17px;
  color: var(--cd-color-ink, #3a3a46);
}
.cd-pdp__description-body ul,
.cd-pdp__description-body ol { margin-block: 0 14px; padding-inline-start: 22px; }
.cd-pdp__description-body li { margin-block-end: 6px; }
.cd-pdp__description-body a {
  color: var(--cd-color-pink-d, #c00068);
  text-decoration: underline; text-underline-offset: 2px;
}
/* Existing embedded media must never exceed the column it sits in. */
.cd-pdp__description-body img,
.cd-pdp__description-body iframe,
.cd-pdp__description-body video {
  max-inline-size: 100%; block-size: auto;
  border-radius: var(--cd-radius-sm, 11px);
}
.cd-pdp__description-body table {
  inline-size: 100%; border-collapse: collapse;
  font-size: 14.5px;
}
.cd-pdp__description-body th,
.cd-pdp__description-body td {
  padding: 8px 10px;
  border: 1px solid var(--cd-color-line, #ececf2);
  text-align: start;
}
/* A wide table scrolls inside its own section rather than widening the page. */
.cd-pdp__description-body { overflow-x: auto; }

/*
 * Branch availability.
 *
 * The PDP summary is a grid, so a block child would stretch to the full column.
 * The disclosure button is sized to its own content; the panel below it is allowed
 * the full column width because the table needs it.
 */
.cd-branches { display: grid; gap: 10px; justify-items: start; margin-block-start: 4px; }
.cd-branches__toggle { justify-self: start; }

.cd-branches__panel {
  inline-size: 100%;
  padding: 12px;
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-sm, 11px);
  background: var(--cd-color-neutral-soft, #f1f1f6);
}

.cd-branches__note {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--cd-color-ink-2, #6b6b78);
}

/*
 * A narrow viewport must scroll the table inside its own panel rather than widen
 * the page, so the PDP never gains horizontal overflow.
 */
.cd-branches__table {
  inline-size: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--cd-radius-sm, 11px);
  overflow: hidden;
  font-size: 13.5px;
}
.cd-branches__table th,
.cd-branches__table td {
  padding: 9px 12px;
  text-align: start;
  border-block-end: 1px solid var(--cd-color-line, #ececf2);
}
.cd-branches__table thead th {
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--cd-color-ink-2, #6b6b78);
  background: var(--cd-color-neutral-soft, #f1f1f6);
}
.cd-branches__table tbody tr:last-child th,
.cd-branches__table tbody tr:last-child td { border-block-end: 0; }
.cd-branches__name { font-weight: 600; }

/*
 * Availability is stated in words in its own cell. Colour reinforces that text and
 * is never the only signal, so the state survives greyscale and colour blindness.
 */
.cd-branches__value { font-weight: 700; }
.cd-branches__value.is-in { color: var(--cd-color-green-aa, #4e7a1e); }
.cd-branches__value.is-out { color: var(--cd-color-gray-aa, #6b6b78); }

.cd-buybar { display: none; }

/* ----------------------------------------------------------- mini cart */

/*
 * Overlays sit below the WordPress admin bar when one is present, so evidence
 * captured in an authenticated session is not clipped by it.
 */
.cd-minicart { position: fixed; inset: 0; z-index: 100; }
.admin-bar .cd-minicart { inset-block-start: 32px; }
.cd-minicart__scrim { position: absolute; inset: 0; background: rgba(38,20,44,.42); }

@media (max-width: 782px) {
  .admin-bar .cd-minicart { inset-block-start: 46px; }
}

.cd-minicart__panel {
  --cd-out: 100%;
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(420px, 92vw);
  background: #fff;
  display: flex; flex-direction: column;
  box-shadow: var(--cd-shadow-lg, 0 8px 26px rgba(60,30,70,.10));
  transform: translateX(var(--cd-out));
  transition: transform .22s ease;
}
[dir="rtl"] .cd-minicart__panel { --cd-out: -100%; }
.cd-minicart.is-open .cd-minicart__panel { transform: translateX(0); }

.cd-minicart__grip { display: none; }

.cd-minicart__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-inline: 18px; padding-block: 12px;
  border-block-end: 1px solid var(--cd-color-line, #ececf2);
}
.cd-minicart__title { font-size: 17px; }

.cd-minicart__notice {
  display: flex; align-items: center; gap: 10px;
  margin-inline: 18px; margin-block-start: 14px;
  padding-inline: 12px; padding-block: 10px;
  border-radius: var(--cd-radius-sm, 11px);
  font-size: 14px; font-weight: 700;
}
.cd-minicart__notice--success { background: var(--cd-color-green-l, #eef7df); color: var(--cd-color-green-aa, #4e7a1e); }
.cd-minicart__notice--error { background: var(--cd-color-orange-l, #fdeede); color: var(--cd-color-orange-d, #a85e00); }
.cd-minicart__notice .cd-icon-chip { inline-size: 2rem; block-size: 2rem; }
.cd-minicart__notice .cd-icon-chip > .cd-icon { inline-size: 1.1rem; block-size: 1.1rem; }

.cd-minicart__body { flex: 1 1 auto; overflow-y: auto; padding-inline: 18px; padding-block: 14px; }

.cd-minicart__items { display: grid; gap: 12px; }
.cd-minicart__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding-block-end: 12px;
  border-block-end: 1px solid var(--cd-color-line, #ececf2);
}
.cd-minicart__thumb { inline-size: 64px; block-size: 64px; border-radius: 10px; overflow: hidden; background: var(--cd-color-pink-xl, #fdf1f7); }
.cd-minicart .cd-minicart__thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; display: block; }
.cd-minicart__meta { display: grid; gap: 4px; min-inline-size: 0; }
.cd-minicart__name { font-size: 14px; font-weight: 700; }
/* Chosen variation attributes, formatted by WooCommerce from the cart line. */
.cd-minicart__variation { font-size: 12.5px; font-weight: 600; color: var(--cd-color-ink-2, #6b6b78); }
.cd-minicart__line { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.cd-minicart__qty { color: var(--cd-color-ink-2, #6b6b78); }
.cd-minicart__price { font-weight: 800; color: var(--cd-color-pink-d, #c00068); }

.cd-minicart__summary { margin-block-start: 14px; padding-block-start: 12px; border-block-start: 1px solid var(--cd-color-line, #ececf2); }
.cd-minicart__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 800; }

.cd-minicart__empty { display: grid; gap: 10px; justify-items: center; text-align: center; padding-block: 30px; }
.cd-minicart__empty-title { font-family: var(--cd-typography-heading-family, sans-serif); font-weight: 800; font-size: 16px; }
.cd-minicart__empty-text { font-size: 14px; color: var(--cd-color-ink-2, #6b6b78); }

.cd-minicart__actions {
  display: grid; gap: 10px;
  padding-inline: 18px; padding-block: 14px;
  border-block-start: 1px solid var(--cd-color-line, #ececf2);
}

/* --------------------------------------------------------- bottom nav */

.cd-bottomnav { display: none; }

/* -------------------------------------------------------------- zero */

.cd-zero { display: grid; gap: 12px; justify-items: center; text-align: center; padding-block: 44px; }
.cd-zero__title { font-family: var(--cd-typography-heading-family, sans-serif); font-weight: 800; font-size: 20px; }
.cd-zero__help { color: var(--cd-color-ink-2, #6b6b78); font-size: 14.5px; }

.cd-plp__empty { display: grid; gap: 12px; justify-items: center; text-align: center; padding-block: 44px; }
.cd-plp__empty-title { font-family: var(--cd-typography-heading-family, sans-serif); font-weight: 800; font-size: 18px; }

/* ------------------------------------------------------------- footer */

/*
 * The approved footer is a dark block closing the page, not another white band.
 * Its own text colours are authored here rather than inherited, because every
 * ink token in the sheet is tuned for dark-on-light and would be unreadable here.
 */
.cd-footer { border-block-start: 0; background: var(--cd-color-ink, #3a3a46); color: #fff; }
.cd-footer__inner { padding-block: 26px; display: grid; gap: 20px; }
.cd-footer__name { font-size: 13.5px; color: #fff; font-weight: 700; }
.cd-footer__logo img { max-inline-size: 150px; block-size: auto; background: #fff; border-radius: 10px; padding: 6px; }
.cd-footer__tagline { margin-block-start: 10px; font-size: 13px; color: #c8c8d4; max-inline-size: 34ch; }

/*
 * The regions grid collapses to nothing when no footer menu is assigned, which is
 * the normal state until the site owner creates them. `:empty` keeps the gap from
 * being reserved for columns that do not exist.
 */
.cd-footer__regions {
  display: grid;
  gap: 20px 32px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.cd-footer__regions:empty { display: none; }
.cd-footer__heading { font-family: var(--cd-typography-heading-family, sans-serif); font-weight: 800; font-size: 14.5px; margin-block-end: 9px; color: #fff; }
.cd-footer__list { display: grid; gap: 6px; }
.cd-footer__list a { font-size: 13px; color: #c8c8d4; }
.cd-footer__list a:hover { color: #fff; }

.cd-footer__legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding-block-start: 12px;
  border-block-start: 1px solid #4c4c5a;
  font-size: 12px; color: #9a9aa8;
}
.cd-footer__privacy { color: #9a9aa8; }
.cd-footer__privacy:hover { color: #c8c8d4; }

/* ------------------------------------------------- generic page and 404 */

.cd-entry__title { font-family: var(--cd-typography-heading-family, sans-serif); font-weight: 800; font-size: 26px; line-height: 1.25; }
.cd-entry__head { margin-block-end: 16px; }
.cd-entry__media { margin: 0 0 20px; }
.cd-entry__media img { max-inline-size: 100%; block-size: auto; border-radius: var(--cd-radius-lg, 16px); }
.cd-entry__content { max-inline-size: 72ch; line-height: 1.7; }
.cd-entry__content > * + * { margin-block-start: 1em; }
.cd-entry__content img { max-inline-size: 100%; block-size: auto; }
.cd-entry__content :is(h2, h3, h4) { font-family: var(--cd-typography-heading-family, sans-serif); font-weight: 800; line-height: 1.3; }
.cd-entry__content h2 { font-size: 21px; }
.cd-entry__content h3 { font-size: 18px; }
/*
 * The global reset sets `list-style: none` on every ul/ol so navigation and card
 * grids need no per-component reset. Long-form content is the one place that is
 * wrong: legal clauses are cited by number, so an unnumbered ordered list is a
 * correctness defect, not a styling preference. Markers are restored inside this
 * boundary only.
 *
 * `list-style-position: outside` with logical padding keeps the marker in the
 * gutter on both sides, so Hebrew RTL indents correctly without a direction hack.
 */
.cd-entry__content :is(ul, ol) { padding-inline-start: 1.4em; list-style-position: outside; }
.cd-entry__content ul { list-style-type: disc; }
.cd-entry__content ol { list-style-type: decimal; }
.cd-entry__content ul ul { list-style-type: circle; }
.cd-entry__content ol ol { list-style-type: lower-alpha; }
.cd-entry__content li { margin-inline-start: 0; }
.cd-entry__content li + li { margin-block-start: .35em; }
.cd-entry__content li::marker { color: var(--cd-color-ink-2, #6b6b78); }

/* Optional effective-date line for the policy family. Rendered only when authored. */
.cd-entry__updated { margin: 0 0 18px; font-size: 13.5px; color: var(--cd-color-ink-2, #6b6b78); }

/*
 * Bounded callout for long-form content. Applied only where the source already
 * contains a corresponding block — the theme never invents one.
 */
.cd-entry__content .cd-callout {
  margin-block: 18px;
  padding: 14px 16px;
  border: 1px solid var(--cd-color-line, #ececf2);
  border-inline-start: 4px solid var(--cd-color-pink, #e6007e);
  border-radius: var(--cd-radius-md, 12px);
  background: var(--cd-color-neutral-soft, #f1f1f6);
}
.cd-entry__content table { inline-size: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.cd-entry__pages { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 24px; font-size: 13.5px; }

.cd-notfound__text { max-inline-size: 46ch; color: var(--cd-color-ink-2, #6b6b78); }
.cd-notfound__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

@media (min-width: 900px) {
  .cd-entry__title { font-size: 32px; }
}

/* ------------------------------------------------- WooCommerce notices */

/*
 * These three were previously `display: none` site-wide, which silently hid every
 * WooCommerce success, error and info message — including stock and coupon
 * failures the shopper has to read. They are restored and styled instead.
 *
 * WooCommerce owns the wording; the theme owns only how it looks. State is carried
 * by a bold label and an inline-start bar as well as colour, so it survives a
 * greyscale or colour-blind reading rather than depending on hue alone.
 */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
  display: block;
  margin-block-end: 16px;
  padding: 12px 14px;
  border: 1px solid var(--cd-color-line, #ececf2);
  border-inline-start: 4px solid var(--cd-color-gray-aa, #6b6b78);
  border-radius: var(--cd-radius-md, 12px);
  background: var(--cd-color-card, #fff);
  font-size: 14px;
  line-height: 1.55;
}

.woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) li { margin: 0; }

.woocommerce-notices-wrapper .woocommerce-message {
  border-inline-start-color: var(--cd-color-green-aa, #4e7a1e);
  background: var(--cd-color-green-soft, #f2f8ea);
}

.woocommerce-notices-wrapper .woocommerce-error {
  border-inline-start-color: var(--cd-color-error, #b3261e);
  background: var(--cd-color-error-soft, #fdf1f0);
}

.woocommerce-notices-wrapper .woocommerce-info {
  border-inline-start-color: var(--cd-color-info, #1f6feb);
  background: var(--cd-color-info-soft, #eff5fe);
}

/* --------------------------------------------------------- breakpoints */

@media (max-width: 1199px) {
  ul.products, .cd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cd-mega__inner { grid-template-columns: minmax(0, 1fr); }
  .cd-mega__feature { max-inline-size: 420px; }
}

@media (max-width: 899px) {
  ul.products, .cd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-pdp__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }

  /*
   * One column, so the single description node simply falls last in DOM order — after the
   * purchase flow, which is the conversion-first order the approved mobile frame shows. No
   * `order`, no second copy, no hidden duplicate: the desktop placement rules live in a
   * `min-width` query and are simply absent here.
   */
  .cd-pdp__description { padding: 20px 18px; }

  /*
   * The stage keeps its ratio and its core-to-edge relationship; only the inset shrinks,
   * so the product still reads at a usable size in a single-column mobile content width.
   */
  .woocommerce div.product .cd-pdp__gallery div.images .woocommerce-product-gallery__wrapper,
  .cd-pdp__gallery .woocommerce-product-gallery__wrapper { padding: 16px; }

  /*
   * Below the desktop rail breakpoint the same form becomes a bottom drawer —
   * but only when JavaScript is present to open it. Every rule that moves the
   * form off-screen is scoped to `.cd-js`, because the trigger, the scrim and
   * the close button are all script-driven. Without script the form stays in
   * flow, visible and submittable, which is what makes the GET fallback real
   * rather than theoretical.
   */
  .cd-plp__body--filtered { display: block; }
  .cd-js .cd-filters__trigger { display: inline-flex; }

  /*
   * The toolbar wraps rather than compressing: the count keeps its own row and
   * the filter, ordering and layout controls share the next one, so no control
   * is squeezed below its tap target at 390px.
   */
  .cd-plp__toolbar { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  .cd-plp__count { flex-basis: 100%; }
  .cd-plp__sort { margin-inline-start: auto; }
  .cd-plp__sort select.orderby,
  .woocommerce .cd-plp__sort select.orderby { font-size: 12.5px; min-block-size: 34px; }
  /* Layout choice is a desktop refinement; the phone grid is already one decision. */
  .cd-plp__view { display: none; }

  .cd-js .cd-plp__rail {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 101;
    max-block-size: 86vh;
    transform: translateY(100%);
    transition: transform .22s ease;
    background: #fff;
    border-start-start-radius: var(--cd-radius-lg, 16px);
    border-start-end-radius: var(--cd-radius-lg, 16px);
    box-shadow: 0 -10px 30px rgba(38, 20, 44, .18);
    display: flex; flex-direction: column;
  }
  .cd-js .cd-plp__rail.is-open { transform: translateY(0); }

  .cd-js .cd-plp__scrim { display: block; position: fixed; inset: 0; z-index: 100; background: rgba(38, 20, 44, .42); }

  .cd-filters {
    border: 0; border-radius: 0; padding: 16px;
    overflow-y: auto; min-block-size: 0; flex: 1 1 auto;
  }
  .cd-js .cd-filters__close {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 40px; block-size: 40px; border: 0; background: transparent;
    font-size: 24px; line-height: 1; cursor: pointer;
  }
  /* The apply/reset footer stays pinned and reachable above the sheet edge. */
  .cd-filters__foot {
    position: sticky; inset-block-end: 0;
    padding-block: 12px; margin-block-start: 4px;
    background: #fff;
    border-block-start: 1px solid var(--cd-color-line, #ececf2);
  }
  /*
   * The approved phone composition keeps the discovery row visible and lets it
   * scroll sideways, rather than folding it away entirely. The scrollbar is
   * suppressed because the row is short enough to read as swipeable, and
   * `overscroll-behavior-inline` stops the swipe from dragging the page with it.
   */
  .cd-nav__list {
    flex-wrap: nowrap;
    gap: 18px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .cd-nav__list::-webkit-scrollbar { display: none; }
  .cd-nav__link { white-space: nowrap; font-size: 13px; min-block-size: 40px; }

  /*
   * The mega panel is a desktop two-column layout; at this width it becomes a
   * single stacked column so the child list and the feature card cannot collide.
   */
  .cd-mega__inner { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 16px 18px; }
  .cd-mega__cols { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

@media (max-width: 599px) {
  .cd-shell { inline-size: min(100% - 24px, 1280px); }

  .cd-header__inner { grid-template-columns: auto auto; justify-content: space-between; gap: 8px; padding-block: 8px; }
  .cd-search { display: none; }
  /*
   * ...but the search toggle has to lead somewhere. While the overlay is open
   * the form returns as its own full-width row directly above the suggestions
   * panel, so the field can be focused and typed into. The closed header is
   * untouched.
   */
  .cd-search-open .cd-search { display: flex; grid-column: 1 / -1; }
  .cd-header__search-toggle { display: inline-flex; }

  /*
   * The mobile header carries only the menu, the logo, search and the cart.
   * Account and wishlist are reachable from the bottom navigation, so repeating
   * them here would both duplicate the affordance and overflow the header at 360px.
   */
  .cd-header__utility [data-cd-affordance="account"] { display: none; }
  .cd-logo__img, .cd-header .cd-logo__img { block-size: 34px; }

  /*
   * The approved phone composition keeps every benefit and lets the line wrap,
   * rather than truncating the list. Only the type shrinks.
   */
  .cd-service-strip__list { padding-block: 7px; padding-inline: 10px; line-height: 1.35; }
  .cd-service-strip__text { font-size: 10.5px; }

  ul.products, .cd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cd-card__body { padding: 11px; gap: 6px; }
  .cd-card__name { font-size: 13.5px; }
  .cd-card__price { font-size: 15.5px; }

  .cd-pdp__trust { grid-template-columns: minmax(0, 1fr); }

  .cd-page { padding-block-end: 152px; }

  /* mobile search panel becomes a full-height sheet under the header */
  .cd-searchpanel { max-block-size: calc(100vh - 100%); }

  /* mini cart becomes a bottom sheet */
  .cd-minicart__panel {
    inset-block-start: auto;
    inset-block-end: 0;
    inset-inline: 0;
    inline-size: auto;
    max-block-size: 86vh;
    border-start-start-radius: var(--cd-radius-lg, 16px);
    border-start-end-radius: var(--cd-radius-lg, 16px);
    transform: translateY(100%);
  }
  [dir="rtl"] .cd-minicart__panel { transform: translateY(100%); }
  .cd-minicart.is-open .cd-minicart__panel { transform: translateY(0); }
  .cd-minicart__grip {
    display: block;
    inline-size: 42px; block-size: 4px;
    margin-inline: auto; margin-block: 8px 2px;
    border-radius: 999px;
    background: var(--cd-color-line-2, #e2e2ec);
  }

  /* sticky buy bar on the PDP */
  .cd-buybar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 64px;
    z-index: 80;
    display: flex; align-items: center; gap: 12px;
    padding-inline: 14px; padding-block: 10px;
    background: #fff;
    border-block-start: 1px solid var(--cd-color-line, #ececf2);
    box-shadow: 0 -4px 16px rgba(60,30,70,.08);
  }
  .cd-buybar__price { font-family: var(--cd-typography-heading-family, sans-serif); font-weight: 800; font-size: 17px; color: var(--cd-color-pink-d, #c00068); white-space: nowrap; }
  .cd-buybar__qty { flex: 0 0 auto; }
  .cd-buybar__qty .quantity input.qty {
    inline-size: 64px; min-block-size: var(--cd-spacing-tap-min, 44px);
    text-align: center;
    border: 1px solid var(--cd-color-line-2, #e2e2ec);
    border-radius: var(--cd-radius-sm, 11px);
    font: inherit; font-weight: 700;
  }
  /*
   * The relocated quantity brings its steppers into the bar. Compacted here, because at
   * 390px the bar carries price, quantity and action on one line and the desktop sizing
   * squeezed the action down to 108px, wrapping its label onto two lines.
   */
  .cd-buybar__qty .quantity.cd-qty--stepped { gap: 0; padding: 3px; inline-size: auto; }
  .cd-buybar__qty .quantity.cd-qty--stepped input.qty {
    inline-size: 48px; min-inline-size: 0; min-block-size: 38px;
    padding-inline: 0;
    border: 0; font-size: 15px;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .cd-buybar__qty .quantity.cd-qty--stepped input.qty::-webkit-outer-spin-button,
  .cd-buybar__qty .quantity.cd-qty--stepped input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .cd-buybar__qty .cd-qty__btn { inline-size: 38px; block-size: 38px; font-size: 19px; }
  .cd-buybar__add { flex: 1 1 auto; min-inline-size: 150px; white-space: nowrap; }
  /*
   * The reserved social cell is a desktop composition device. It has no content, so on a
   * single-column mobile summary it would be a blank pill taking a whole row — exactly
   * the empty-panel reading this version removes. It is withdrawn here and returns the
   * moment a real owner gives it something to say.
   */
  .cd-pdp__social { display: none; }

  .woocommerce div.product .cd-pdp__summary form.cart,
  .cd-pdp__summary form.cart { display: none; }
  /*
   * The buy bar only covers the simple case, where the real quantity control is
   * relocated into it. A variable product has a required choice to make first and
   * no buy bar, so its form stays on the page rather than being hidden with it.
   */
  .woocommerce div.product .cd-pdp__summary form.variations_form,
  .cd-pdp__summary form.variations_form { display: block; }
  .cd-pdp__summary table.variations select { max-inline-size: none; }
  .cd-pdp__summary .woocommerce-variation-add-to-cart button.single_add_to_cart_button { flex: 1 1 auto; }
  /*
   * Same reasoning for a product with add-on fields: the required choice has to be
   * made on the page, so its form stays and no buy bar is rendered for it.
   *
   * `.cd-pdp--addons` sits on the page wrapper, which is an ancestor of `div.product`
   * rather than a descendant, so the selector has to be authored in that order and
   * carry one class more than the rule above it to win.
   *
   * The row wraps. Quantity and the action share a line, as M04 shows, but the
   * personalization region is a block of labelled fields, not a control that can sit
   * beside them — it takes the full width and the purchase line follows underneath.
   * `align-items: center` keeps the action at its own 50px height instead of being
   * stretched to the height of the fields above it.
   */
  .woocommerce .cd-pdp--addons.cd-pdp div.product .cd-pdp__summary form.cart,
  .cd-pdp--addons.cd-pdp .cd-pdp__summary form.cart {
    display: flex; flex-wrap: wrap; align-items: center;
  }
  .cd-pdp--addons .cd-pdp__summary form.cart .cd-pdp__personalization { flex: 1 0 100%; }
  .cd-pdp--addons .cd-pdp__summary select.wc-pao-addon-field { max-inline-size: none; }
  .cd-pdp--addons .cd-pdp__summary form.cart button.single_add_to_cart_button { flex: 1 1 auto; }

  /* bottom navigation */
  .cd-bottomnav {
    display: block;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 85;
    background: #fff;
    border-block-start: 1px solid var(--cd-color-line, #ececf2);
  }
  .cd-bottomnav__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cd-bottomnav__item {
    inline-size: 100%;
    display: grid; justify-items: center; gap: 1px;
    min-block-size: 62px;
    padding-block: 6px;
    border: 0; background: transparent;
  }
  .cd-bottomnav__item .cd-icon-chip { inline-size: 2.1rem; block-size: 2.1rem; }
  .cd-bottomnav__item .cd-icon-chip > .cd-icon { inline-size: 1.15rem; block-size: 1.15rem; }
  .cd-bottomnav__item--static { cursor: default; }
  .cd-bottomnav__label { font-size: 11px; font-weight: 700; color: var(--cd-color-ink-2, #6b6b78); }
  .cd-bottomnav__item.is-current .cd-bottomnav__label { color: var(--cd-color-ink, #3a3a46); }
}

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

/* ---------------------------------------------------------------- homepage */

/*
 * Homepage sections. Every colour, radius and shadow is a brand token, and the
 * responsive steps reuse the shell's existing ladder (>=1200 / <=1199 / <=899 /
 * <=599) rather than introducing a breakpoint system of their own.
 */

.cd-home { display: block; }
.cd-home > section { margin-block-start: 28px; }
.cd-home > section:first-child { margin-block-start: 0; }

/* section header: title plus optional "see all" link */
.cd-home-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-block-end: 14px;
}
.cd-home-head__title { margin: 0; font-size: 20px; font-weight: var(--cd-typography-heading-weight, 800); }
.cd-home-head__link { font-size: 14px; font-weight: 700; color: var(--cd-color-pink-d, #c00068); }
.cd-home-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cd-home-all { display: inline-flex; align-items: center; min-height: 36px; padding: 0 18px; border-radius: 999px; background: var(--cd-color-pink, #e6007e); color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; }
.cd-home-all:hover { background: var(--cd-color-pink-d, #c00068); }
.cd-home-all:focus-visible { outline: 2px solid var(--cd-color-pink, #e6007e); outline-offset: 2px; }
.cd-home-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cd-home-pill { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--cd-color-line, #e6e2ea); border-radius: 999px; background: #fff; color: var(--cd-color-ink, #1f1b24); font-size: 14px; font-weight: 700; text-decoration: none; }
.cd-home-pill:hover, .cd-home-pill:focus-visible { border-color: var(--cd-color-pink-d, #c00068); color: var(--cd-color-pink-d, #c00068); }
@media (max-width: 640px) { .cd-home-head { flex-wrap: wrap; gap: 10px; } .cd-home-pill, .cd-home-all { min-height: 44px; } }

/*
 * Gift finder. A bounded rounded card sitting inside the shell, not a full-bleed
 * band: the approved composition gives it the same card edge as the hero below it,
 * so the two read as one stack rather than as a band followed by a card.
 */
.cd-giftbar { background: transparent; border: 0; }
.cd-giftbar__inner {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 20px;
  margin-block: 18px;
  background: var(--cd-color-pink-xl, #fdf1f7);
  border: 1px solid var(--cd-color-pink-l, #fde3f0);
  border-radius: var(--cd-radius-lg, 16px);
}
.cd-giftbar__text { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 700; }
.cd-giftbar__cta { flex: none; margin-inline-start: auto; }

/*
 * Hero — the approved draft composition.
 *
 * A bounded card inside the shell, not a full-bleed band. The image surface sits
 * on the physical left and fades into the light side; the headline sits over that
 * light side; the four discovery controls are a translucent panel *inside* the
 * card, pinned to its inline-start corner. They belong to the card, not to a slide,
 * so they never move when the slide changes and they are never a row beneath it.
 *
 * Slides share one grid cell, so the card's height is the tallest slide and cannot
 * change when the active slide does. Only opacity transitions; no geometry moves.
 */
.cd-hero-band { padding-block: 4px 0; }

.cd-hero {
  position: relative;
  display: grid;
  min-block-size: 248px;
  background: var(--cd-color-card, #fff);
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-lg, 16px);
  box-shadow: var(--cd-shadow-sm, 0 3px 10px rgba(60,30,70,.07));
  overflow: hidden;
}

.cd-hero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: block;
  background: linear-gradient(115deg, #f2fbfa 0%, #fdf3f8 54%, #fff8ec 100%);
}
.cd-hero__slide--warm { background: linear-gradient(115deg, #fff6ea 0%, #fdf2f8 56%, #f4fbef 100%); }

/* Without scripting the first slide is the hero and the rest never paint. */
.cd-hero__slide:not(.is-active) { opacity: 0; visibility: hidden; pointer-events: none; }
.cd-hero__slide.is-active { opacity: 1; visibility: visible; }
.cd-hero[data-cd-hero-ready] .cd-hero__slide { transition: opacity 220ms ease; }

.cd-hero__body {
  position: relative; z-index: 3;
  padding: 20px 46px 0;
  max-inline-size: 58%;
}
.cd-hero__title { margin: 0; font-size: 28px; line-height: 1.15; font-weight: var(--cd-typography-heading-weight, 800); }
.cd-hero__text { margin-block-start: 7px; font-size: 13.5px; color: var(--cd-color-ink-2, #6b6b78); max-inline-size: 46ch; }

/* image surface: physical left, faded into the copy side */
.cd-hero__surface {
  position: absolute; inset-block: 0; left: 0; right: auto;
  inline-size: 66%; z-index: 1; overflow: hidden;
}
.cd-hero__photo {
  inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 38%;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 30%, rgba(0,0,0,.72) 56%, rgba(0,0,0,.28) 80%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 30%, rgba(0,0,0,.72) 56%, rgba(0,0,0,.28) 80%, transparent 100%);
}

/* second surface: token composition, the approved treatment for that slide */
.cd-hero__blm { position: absolute; border-radius: 50% 50% 47% 47%; opacity: .42; }
.cd-hero__blm--a { inline-size: 66px; block-size: 82px; left: 6%;  inset-block-start: 22px; background: var(--cd-color-pink, #e6007e); }
.cd-hero__blm--b { inline-size: 54px; block-size: 67px; left: 20%; inset-block-start: 58px; background: var(--cd-color-orange, #f7941e); }
.cd-hero__blm--c { inline-size: 60px; block-size: 74px; left: 33%; inset-block-start: 16px; background: var(--cd-color-gold, #ffb800); }
.cd-hero__streamer { position: absolute; block-size: 5px; border-radius: 999px; opacity: .3; }
.cd-hero__streamer--a { inline-size: 210px; left: 8%;  inset-block-start: 150px; background: var(--cd-color-pink, #e6007e); rotate: -8deg; }
.cd-hero__streamer--b { inline-size: 160px; left: 30%; inset-block-start: 176px; background: var(--cd-color-teal, #00a99d); rotate: 7deg; }

/*
 * The discovery panel. Inside the card, pinned to the inline-start corner, sized
 * so it never spans the full width and never becomes a separate section.
 */
.cd-hero__panel {
  position: absolute; z-index: 4;
  inset-block-end: 11px; inset-inline-start: 14px;
  inline-size: min(520px, 54%);
  padding: 7px;
  background: rgba(255, 255, 255, .58);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: var(--cd-radius-lg, 16px);
  box-shadow: 0 4px 18px rgba(60, 30, 70, .07);
}

/* manual controls only — no autoplay and no interval anywhere in this file */
.cd-hero__nav {
  position: absolute; inset-block-start: 50%; translate: 0 -50%; z-index: 5;
  display: grid; place-items: center;
  inline-size: 30px; block-size: 30px;
  background: var(--cd-color-card, #fff);
  border: 1px solid var(--cd-color-line-2, #e2e2ec);
  border-radius: 50%;
  box-shadow: var(--cd-shadow-sm, 0 3px 10px rgba(60,30,70,.07));
  font-size: 15px; line-height: 1; color: var(--cd-color-ink-2, #6b6b78);
}
.cd-hero__nav--prev { inset-inline-start: 12px; }
.cd-hero__nav--next { inset-inline-end: 12px; }
.cd-hero__nav:hover { border-color: var(--cd-color-pink-l, #fde3f0); }
.cd-hero__nav .cd-icon { inline-size: .95rem; block-size: .95rem; }
/* Mirrored for an LTR site, exactly as the rail controls are. */
[dir="ltr"] .cd-hero__nav .cd-icon { transform: scaleX(-1); }

/*
 * The global focus ring is a box-shadow applied through `:where(...)`, which
 * carries no specificity of its own. These controls set their own resting
 * box-shadow at the same specificity but later in the file, so without this they
 * would silently lose the ring and keyboard focus would be invisible on them.
 */
.cd-hero__nav:focus-visible,
.cd-hero__dotbtn:focus-visible {
  box-shadow: var(--cd-focus-ring, 0 0 0 3px #fff, 0 0 0 5.5px #c00068);
  border-radius: 999px;
}

.cd-hero__dots {
  position: absolute; z-index: 5;
  inset-block-start: 16px; inset-inline-start: 20px;
  display: flex; gap: 7px;
}
.cd-hero__dotbtn {
  inline-size: 8px; block-size: 8px; padding: 0;
  background: rgba(58, 58, 70, .20);
  border: 0; border-radius: 999px;
  transition: inline-size 160ms ease, background-color 160ms ease;
}
.cd-hero__dotbtn.is-active { inline-size: 22px; background: var(--cd-color-pink, #e6007e); }

.cd-hero__shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
/*
 * Tiles inside the translucent panel.
 *
 * Warm-tinted rather than near-white, with a restrained pink edge, so they read
 * as part of the hero surface instead of white cards resting on top of it. The
 * tint is kept light enough that the label and icon keep their full contrast —
 * the tile is a surface, not a colour.
 */
.cd-hero__shortcut {
  display: grid; justify-items: center; gap: 4px;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding: 6px 5px;
  background: linear-gradient(180deg, rgba(255, 252, 253, .92), rgba(253, 241, 247, .88));
  border: 1px solid rgba(230, 0, 126, .16);
  border-radius: var(--cd-radius-sm, 11px);
  box-shadow: 0 2px 7px rgba(60, 30, 70, .09);
  text-align: center;
}
.cd-hero__shortcut:hover {
  border-color: rgba(230, 0, 126, .34);
  background: linear-gradient(180deg, rgba(255, 252, 253, .97), rgba(253, 233, 243, .94));
}
.cd-hero__shortcut .cd-icon-chip { inline-size: 1.9rem; block-size: 1.9rem; }
.cd-hero__shortcut .cd-icon-chip > .cd-icon { inline-size: 1rem; block-size: 1rem; }
.cd-hero__shortcut-label { font-size: 11px; font-weight: 700; color: var(--cd-color-ink, #3a3a46); }

/*
 * Trust strip. Like the gift finder, the approved composition is a bounded card
 * inside the shell rather than a band spanning the viewport, and its items are
 * centred within their own column instead of being left-aligned in a row.
 */
.cd-trustband { background: transparent; border: 0; }
.cd-trust {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin-block: 0 26px; padding: 14px 18px; list-style: none;
  background: var(--cd-color-card, #fff);
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-lg, 16px);
}
.cd-trust li { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 13.5px; font-weight: 500; }

/* selected categories */
.cd-home-cats__list {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px;
  margin: 0; padding: 0; list-style: none;
}
.cd-home-cat { display: grid; justify-items: center; gap: 8px; text-align: center; }
/*
 * The ring and halo are not decoration. Category imagery is frequently a product
 * shot on white, and against a white page such a disc has no edge at all — the
 * category reads as a floating label. The tinted fill, the ring and the soft outer
 * halo give every disc a boundary regardless of what the image behind it looks like.
 */
.cd-home-cat__media {
  display: grid; place-items: center;
  inline-size: 100%; aspect-ratio: 1 / 1; max-inline-size: 118px;
  overflow: hidden; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, #fff 0 46%, var(--cd-color-pink-xl, #fdf1f7) 74%, #fbc9e0 100%);
  border: 2.5px solid #f9b8d6;
  box-shadow: 0 0 0 5px rgba(230, 0, 126, .13), var(--cd-shadow-sm, 0 3px 10px rgba(60,30,70,.07));
}
/*
 * The ring cycles through the brand palette in fours, as the approved reference
 * shows: a row of eight discs reads as a set rather than as eight of one thing.
 * The tint is carried by the ring and the outer halo only — the disc stays pale
 * behind the image so no category's artwork sits on a coloured field.
 */
.cd-home-cats__item:nth-child(4n+2) .cd-home-cat__media {
  background: radial-gradient(circle at 50% 42%, #fff 0 46%, var(--cd-color-teal-xl, #f0fbfa) 74%, #a9e5df 100%);
  border-color: #8fddd5;
  box-shadow: 0 0 0 5px rgba(0, 169, 157, .14), var(--cd-shadow-sm, 0 3px 10px rgba(60,30,70,.07));
}
.cd-home-cats__item:nth-child(4n+3) .cd-home-cat__media {
  background: radial-gradient(circle at 50% 42%, #fff 0 46%, var(--cd-color-green-l, #eef7df) 74%, #cbe89f 100%);
  border-color: #bcdf86;
  box-shadow: 0 0 0 5px rgba(140, 198, 63, .17), var(--cd-shadow-sm, 0 3px 10px rgba(60,30,70,.07));
}
.cd-home-cats__item:nth-child(4n) .cd-home-cat__media {
  background: radial-gradient(circle at 50% 42%, #fff 0 46%, var(--cd-color-orange-l, #fdeede) 74%, #fbcf95 100%);
  border-color: #f9c179;
  box-shadow: 0 0 0 5px rgba(247, 148, 30, .15), var(--cd-shadow-sm, 0 3px 10px rgba(60,30,70,.07));
}
.cd-home-cat__img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.cd-home-cat__placeholder { display: grid; place-items: center; }
.cd-home-cat__label { font-size: 13px; font-weight: 700; color: var(--cd-color-ink, #3a3a46); }

/* events */
.cd-home-events__list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
.cd-event {
  display: grid; align-content: start; gap: 6px;
  min-block-size: 132px; padding: 16px;
  border-radius: var(--cd-radius-lg, 16px);
  color: #fff;
}
.cd-event__title { margin: 0; font-size: 17px; font-weight: var(--cd-typography-heading-weight, 800); color: #fff; }
.cd-event__text { margin: 0; font-size: 13px; color: #fff; opacity: .94; }
.cd-event__cta {
  justify-self: start; margin-block-start: 6px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.94);
  font-size: 13px; font-weight: 700;
}
.cd-event--teal   { background: var(--cd-color-teal-aa, #00736b); }
.cd-event--teal   .cd-event__cta { color: var(--cd-color-teal-aa, #00736b); }
.cd-event--pink   { background: var(--cd-color-pink-d, #c00068); }
.cd-event--pink   .cd-event__cta { color: var(--cd-color-pink-d, #c00068); }
.cd-event--green  { background: var(--cd-color-green-aa, #4e7a1e); }
.cd-event--green  .cd-event__cta { color: var(--cd-color-green-aa, #4e7a1e); }
.cd-event--orange { background: var(--cd-color-orange-d, #a85e00); }
.cd-event--orange .cd-event__cta { color: var(--cd-color-orange-d, #a85e00); }

/* promo pair */
.cd-home-promos__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
.cd-home-promos__list--single { grid-template-columns: minmax(0, 1fr); }
.cd-promo {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 16px; border-radius: var(--cd-radius-lg, 16px); color: #fff;
}
.cd-promo--pink { background: var(--cd-color-pink-d, #c00068); }
.cd-promo--pink .cd-promo__cta { color: var(--cd-color-pink-d, #c00068); }
.cd-promo--teal { background: var(--cd-color-teal-aa, #00736b); }
.cd-promo--teal .cd-promo__cta { color: var(--cd-color-teal-aa, #00736b); }
.cd-promo__title { margin: 0; font-size: 16px; font-weight: var(--cd-typography-heading-weight, 800); color: #fff; }
.cd-promo__text { display: block; font-size: 13px; color: #fff; opacity: .94; }
.cd-promo__cta {
  flex: none; padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.94); font-size: 13px; font-weight: 700; white-space: nowrap;
}
.cd-promo .cd-icon-chip { background: rgba(255,255,255,.9); }

@media (max-width: 1199px) {
  .cd-home-cats__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cd-home-events__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-hero__title { font-size: 29px; }
}

@media (max-width: 899px) {
  /*
   * The approved phone reference keeps the gift finder and reflows it: the copy
   * stays on one row and the call to action drops to its own full-width row
   * beneath, rather than being squeezed beside the text or dropped entirely.
   */
  .cd-giftbar__inner { flex-wrap: wrap; gap: 10px; padding: 12px 14px; margin-block: 14px; }
  .cd-giftbar__cta { margin-inline-start: 0; flex-basis: 100%; text-align: center; }

  /*
   * Phone composition, as approved: the image becomes a band across the top, the
   * copy sits beneath it, and the discovery panel becomes a 2x2 grid at the foot
   * of the card. The panel stays inside the card at every width.
   */
  .cd-hero { min-block-size: 392px; }
  .cd-hero__surface {
    inset-block-start: 0; inset-block-end: auto;
    left: 0; right: 0; inline-size: 100%; block-size: 152px;
  }
  .cd-hero__photo {
    object-position: 50% 34%;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,.45) 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,.45) 84%, transparent 100%);
  }
  /*
   * The block-end padding reserves the discovery panel's own height inside the
   * copy flow. The panel is positioned, so it contributes no height of its own,
   * and without this the supporting line ran underneath it — measured at 14px of
   * overlap. The theme's tiles are taller than the static mockup's because they
   * carry the 44px minimum tap target, so the card grows past the mockup's 392px
   * when the copy needs it rather than clipping the sentence.
   */
  .cd-hero__body { padding: 162px 18px 150px; max-inline-size: 100%; }
  .cd-hero__title { font-size: 24px; }
  .cd-hero__text { font-size: 13px; max-inline-size: 100%; margin-block-start: 6px; }
  .cd-hero__panel { inset-inline: 10px; inline-size: auto; inset-block-end: 10px; }
  .cd-hero__shortcuts { grid-template-columns: 1fr 1fr; }
  .cd-hero__shortcut { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 6px; }
  .cd-hero__nav { inset-block-start: 76px; translate: 0 0; inline-size: 27px; block-size: 27px; font-size: 14px; }
  .cd-hero__dots { inset-block-start: 12px; inset-inline-start: 14px; }

  .cd-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 12px 14px; margin-block-end: 20px; }
  .cd-trust li { justify-content: flex-start; font-size: 12px; }

  /*
   * Native horizontal scrolling, not a JavaScript carousel: the row has to stay
   * usable with scripting disabled. `overscroll-behavior-inline` keeps the swipe
   * inside the row instead of dragging the page.
   */
  .cd-home-cats__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(96px, 1fr);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    padding-block-end: 6px;
  }
  .cd-home-cats__item { scroll-snap-align: start; }
  .cd-home-cat__media { max-inline-size: 88px; }

  .cd-home-promos__list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 599px) {
  .cd-home > section { margin-block-start: 22px; }
  .cd-hero__shortcuts { gap: 8px; }
  .cd-hero__shortcut { padding: 10px 4px; }
  .cd-hero__shortcut-label { font-size: 12px; }
  .cd-home-head__title { font-size: 18px; }
  .cd-promo { grid-template-columns: auto minmax(0, 1fr); }
  .cd-promo__cta { grid-column: 1 / -1; justify-self: start; }
}
/* ============================================ release surfaces (0.10.1) */

/*
 * Cart, contact and FAQ presentation.
 *
 * The cart rules style the real WooCommerce Cart Block. Everything here is
 * scoped under `.wp-block-woocommerce-cart` so no `wc-block-*` class is
 * restyled anywhere else, and nothing below changes block behaviour: WooCommerce
 * keeps ownership of line items, quantity, remove, coupon, totals, stock
 * validation and every notice message.
 */

/* --------------------------------------------------------------- cart */

.wp-block-woocommerce-cart { margin-block: 0; }

/*
 * The cart renders through the generic `page.php`, so the block lands inside
 * `.cd-entry__content` and inherits its 72ch reading measure — measured at
 * 686 px, which is exactly the width the cart root, its main column and its
 * sidebar were all pinned to. At that width WooCommerce's own flex sidebar
 * layout has no room to form two columns, so it wrapped into one and the block
 * internals pushed past their container at narrower windows.
 *
 * A reading measure is right for prose and wrong for a commerce layout, so it is
 * released here — on the cart route only, via WooCommerce's own body class, so
 * the legal/policy family and every other page keep their 72ch measure.
 *
 * Constraining the block itself instead does nothing: `max-inline-size: 100%`
 * of a 686 px ancestor is still 686 px. The ancestor is the constraint.
 */
body.woocommerce-cart .cd-entry__content { max-inline-size: none; }
.cd-page-body .wp-block-woocommerce-cart.alignwide { max-inline-size: 100%; }

.wp-block-woocommerce-cart .wc-block-cart__main,
.wp-block-woocommerce-cart .wc-block-cart__sidebar { padding: 0; }

.wp-block-woocommerce-cart .wc-block-cart-items { border-collapse: collapse; inline-size: 100%; }

.wp-block-woocommerce-cart .wc-block-cart-items__header {
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cd-color-ink-2, #6b6b78);
  text-transform: none;
  border-block-end: 1px solid var(--cd-color-line, #ececf2);
}

.wp-block-woocommerce-cart .wc-block-cart-items__row {
  border-block-end: 1px solid var(--cd-color-line, #ececf2);
}

/*
 * Reserved square media: the box is sized before the image loads, so a slow
 * thumbnail cannot shift the row and add layout instability.
 */
.wp-block-woocommerce-cart .wc-block-cart-item__image img {
  inline-size: 72px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--cd-radius-md, 12px);
  background: var(--cd-color-neutral-soft, #f1f1f6);
}

.wp-block-woocommerce-cart .wc-block-components-product-name {
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  color: var(--cd-color-ink, #1c1c22);
}

.wp-block-woocommerce-cart .wc-block-components-product-price { font-size: 13.5px; color: var(--cd-color-ink-2, #6b6b78); }

.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--cd-color-ink, #1c1c22);
}

/*
 * Touch targets. The block ships a 27px stepper, which is below the 44px minimum
 * the approved package requires, so the control box and both buttons are sized
 * up here rather than the control being replaced.
 */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
  min-block-size: var(--cd-spacing-tap-min, 44px);
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-md, 12px);
  background: var(--cd-color-card, #fff);
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector__input,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button {
  min-inline-size: var(--cd-spacing-tap-min, 44px);
  min-block-size: var(--cd-spacing-tap-min, 44px);
  font-size: 15px;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button { color: var(--cd-color-ink, #1c1c22); }

.wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--cd-spacing-tap-min, 44px);
  min-block-size: var(--cd-spacing-tap-min, 44px);
  color: var(--cd-color-ink-2, #6b6b78);
  text-decoration: underline;
  font-size: 13px;
}

.wp-block-woocommerce-cart .wc-block-cart-item__remove-link:hover { color: var(--cd-color-error, #b3261e); }

.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-sidebar {
  padding: 18px;
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-lg, 16px);
  background: var(--cd-color-card, #fff);
}

.wp-block-woocommerce-cart .wc-block-cart__totals-title {
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-size: 16px;
  font-weight: 800;
  color: var(--cd-color-ink, #1c1c22);
  text-transform: none;
  letter-spacing: 0;
}

.wp-block-woocommerce-cart .wc-block-components-totals-item { font-size: 14px; }
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item { font-size: 17px; font-weight: 800; }

/* Coupon disclosure - the block owns open/closed state; this is appearance only. */
.wp-block-woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-panel__button {
  min-block-size: var(--cd-spacing-tap-min, 44px);
  font-weight: 700;
  color: var(--cd-color-ink, #1c1c22);
}

.wp-block-woocommerce-cart .wc-block-components-text-input input {
  min-block-size: var(--cd-spacing-tap-min, 44px);
  border-radius: var(--cd-radius-md, 12px);
}

/* Checkout handoff. Destination stays exactly as WooCommerce set it. */
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
  inline-size: 100%;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  border-radius: var(--cd-radius-pill, 999px);
  background: var(--cd-color-pink, #e6007e);
  color: #fff;
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 800;
  font-size: 16px;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover { filter: brightness(0.95); }

/* Block-rendered notices: icon plus text, never colour alone. */
.wp-block-woocommerce-cart .wc-block-components-notice-banner {
  border-radius: var(--cd-radius-md, 12px);
  font-size: 14px;
}

.wp-block-woocommerce-cart .wc-block-cart__empty-cart__title {
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-size: 20px;
  font-weight: 800;
  color: var(--cd-color-ink, #1c1c22);
}

.wp-block-woocommerce-cart :is(a, button, input):focus-visible {
  outline: var(--cd-focus-ring, 2px solid #1c1c22);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ contact */

.cd-contact__intro { margin: 0 0 22px; color: var(--cd-color-ink-2, #6b6b78); }

.cd-contact__channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.cd-channel {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding: 14px;
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-lg, 16px);
  background: var(--cd-color-card, #fff);
}

.cd-channel__label { display: block; font-size: 12.5px; color: var(--cd-color-ink-2, #6b6b78); }
.cd-channel__value { display: block; font-weight: 800; }

/*
 * Namespaced away from `.cd-branches`, which the PDP branch-stock list already
 * owns with `justify-items: start`. Reusing that name shrink-wrapped these cards
 * and left a dead column on mobile; renaming removes the collision instead of
 * fighting the theme with an override.
 */
.cd-contactbranches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-items: stretch;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cd-contactbranch {
  inline-size: 100%;
  padding: 16px;
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-lg, 16px);
  background: var(--cd-color-card, #fff);
}

.cd-contactbranch__name { margin: 0 0 10px; font-size: 16px; font-weight: 800; }
.cd-contactbranch__row { margin: 0 0 6px; font-size: 13.5px; line-height: 1.6; }
.cd-contactbranch__row strong { font-weight: 700; }
.cd-contactbranch a { text-decoration: underline; }
.cd-contactbranch a:focus-visible { outline: var(--cd-focus-ring, 2px solid #1c1c22); outline-offset: 2px; }

/* ---------------------------------------------------------------- faq */

.cd-faq { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; max-inline-size: 72ch; }

.cd-faq__item {
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-lg, 16px);
  background: var(--cd-color-card, #fff);
}

/*
 * Native details/summary: the accordion opens with no JavaScript at all, and
 * several items can be open at once because no `name` attribute groups them.
 */
.cd-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding: 14px 16px;
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
}

.cd-faq__q::-webkit-details-marker { display: none; }

.cd-faq__q::after {
  content: '';
  inline-size: 10px;
  block-size: 10px;
  flex: none;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}

.cd-faq__item[open] > .cd-faq__q::after { transform: rotate(-135deg); }

.cd-faq__q:focus-visible {
  outline: var(--cd-focus-ring, 2px solid #1c1c22);
  outline-offset: -2px;
  border-radius: var(--cd-radius-lg, 16px);
}

.cd-faq__a { padding: 0 16px 16px; font-size: 14px; line-height: 1.7; color: var(--cd-color-ink-2, #6b6b78); }
.cd-faq__a p { margin: 0 0 .7em; }
.cd-faq__a p:last-child { margin-block-end: 0; }

@media (prefers-reduced-motion: reduce) {
  .cd-faq__q::after { transition: none; }
}

/* -------------------------------------------- release-surface breakpoints */

@media (max-width: 900px) {
  .cd-contact__channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-contactbranches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .cd-contact__channels { grid-template-columns: minmax(0, 1fr); }
  /* One deliberate full-width column - cards fill the shell gutters, no dead space. */
  .cd-contactbranches { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .wp-block-woocommerce-cart .wc-block-cart-item__image img { inline-size: 60px; }
}

/* ==========================================================================
   Selected-category compact hero
   ========================================================================== */

/*
 * Short by contract. The selected-category tier exists to give a category an
 * identity without pushing its products down the page, so this band is capped
 * rather than sized by its content, and it carries no call to action.
 */
/*
 * The band is a single surface with the copy laid over it, not a two-column grid
 * with a picture in the second column. The atmospheric layer sits on the physical
 * left and the copy is capped well short of it, so the two never meet regardless
 * of how long the category name or its description turns out to be.
 */
.cd-cathero {
  position: relative; overflow: hidden;
  margin-block: 12px 4px;
  min-block-size: 96px;
  background: linear-gradient(115deg, var(--cd-color-teal-xl, #f0fbfa), var(--cd-color-pink-xl, #fdf1f7));
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-lg, 16px);
}
.cd-cathero__body {
  position: relative; z-index: 3;
  padding: 20px 26px;
  max-inline-size: 62%;
}
.cd-cathero__title { margin: 0; font-size: 23px; line-height: 1.2; font-weight: var(--cd-typography-heading-weight, 800); }
.cd-cathero__intro { margin-block-start: 4px; font-size: 13.5px; color: var(--cd-color-ink-2, #6b6b78); max-inline-size: 52ch; }
.cd-cathero__intro p { margin: 0; }

.cd-cathero__surface { position: absolute; inset-block: 0; left: 0; right: auto; inline-size: 56%; z-index: 1; }
.cd-cathero__bok { position: absolute; border-radius: 999px; filter: blur(14px); opacity: .35; }
.cd-cathero__bok--a { inline-size: 120px; block-size: 120px; left: 6%;  inset-block-start: -30px; background: var(--cd-color-teal, #00a99d); }
.cd-cathero__bok--b { inline-size: 96px;  block-size: 96px;  left: 26%; inset-block-end: -34px;   background: var(--cd-color-pink, #e6007e); }
.cd-cathero__bok--c { inline-size: 84px;  block-size: 84px;  left: 44%; inset-block-start: -18px; background: var(--cd-color-gold, #ffb800); }
.cd-cathero__streamer {
  position: absolute; block-size: 5px; inline-size: 160px; border-radius: 999px;
  left: 10%; inset-block-end: 22px;
  background: var(--cd-color-orange, #f7941e); opacity: .3; rotate: -7deg;
}

/* ==========================================================================
   Footer social marks — placement approved, destinations unknown
   ========================================================================== */

/*
 * Marks, not links. Nothing is focusable and nothing navigates, because there is
 * no confirmed profile to navigate to.
 */
.cd-footer__social { display: flex; gap: 8px; margin-block-start: 14px; padding: 0; list-style: none; }
.cd-footer__socialmark {
  inline-size: 28px; block-size: 28px;
  border: 1px solid #5a5a68; border-radius: 999px;
}

/* ==========================================================================
   Floating support affordance — placement approved, destination unknown
   ========================================================================== */

/*
 * Outlined, never filled: it must read as secondary to a product's own primary
 * action. It clears the mobile bottom navigation and the safe area so it cannot
 * sit on top of a fixed control or a focused element.
 */
.cd-wa {
  position: fixed; z-index: 40;
  inset-block-end: calc(20px + env(safe-area-inset-bottom, 0px));
  inset-inline-start: 20px;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 15px;
  background: var(--cd-color-card, #fff);
  border: 1.5px solid var(--cd-color-teal, #00a99d);
  border-radius: 999px;
  box-shadow: var(--cd-shadow-lg, 0 8px 26px rgba(60,30,70,.10));
  color: var(--cd-color-teal-d, #008a80);
  font-size: 13px; font-weight: 600;
}
.cd-wa__mark { display: grid; place-items: center; color: var(--cd-color-teal-d, #008a80); }
.cd-wa__mark .cd-icon { inline-size: 1.05rem; block-size: 1.05rem; }
.cd-wa__label { font-family: var(--cd-typography-heading-family, sans-serif); line-height: 1; }

@media (max-width: 899px) {
  /*
   * On phones the surface becomes a band across the top and the copy sits beneath
   * it, matching how the homepage hero reflows at the same width.
   */
  .cd-cathero { min-block-size: 0; }
  .cd-cathero__surface { inset-block-start: 0; inset-block-end: auto; left: 0; right: 0; inline-size: 100%; block-size: 74px; }
  .cd-cathero__body { max-inline-size: 100%; padding: 86px 18px 16px; }
  .cd-cathero__title { font-size: 20px; }
  .cd-cathero__intro { font-size: 12.5px; max-inline-size: 100%; }

  /*
   * Clear the fixed bottom navigation, not just the viewport edge. The bar measures
   * 65.19px at 390px (64px of content plus its 1px top border), so a 64px offset left
   * the control overlapping it by about a pixel; 74px clears it with room to spare.
   */
  .cd-wa {
    inset-block-end: calc(74px + env(safe-area-inset-bottom, 0px));
    inset-inline-start: 12px;
    padding: 8px 13px; font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cd-hero[data-cd-hero-ready] .cd-hero__slide { transition: none; }
  .cd-hero__dotbtn { transition: none; }
}

/* --------------------------------------------------- product card state */

/*
 * The card carries a faint brand glow at rest and a slightly stronger one under
 * the pointer or keyboard focus. The alphas, blurs and offsets are the approved
 * Revision-2 interaction spec, re-tinted from the mockup pink to the brand token,
 * and the locked card's own neutral shadow is kept underneath both states.
 *
 * Both states paint the same geometry: the ring is drawn with `box-shadow` rather
 * than a border, and the lift is a transform, so nothing around the card moves
 * when the state changes and no row reflows. The
 * media stage is deliberately untouched — the fixed 1:1 geometry and the image
 * sizing above are the media contract, and this treatment never reaches into it.
 */
li.cd-card {
  box-shadow:
    0 0 0 1px rgba(230, 0, 126, .10),
    0 4px 14px rgba(230, 0, 126, .05),
    var(--cd-shadow-sm, 0 3px 10px rgba(60, 30, 70, .07));
  transition: box-shadow .18s ease, transform .18s ease;
}

li.cd-card:hover,
li.cd-card:focus-within {
  box-shadow:
    0 0 0 1px rgba(230, 0, 126, .28),
    0 8px 20px rgba(230, 0, 126, .13),
    var(--cd-shadow-sm, 0 3px 10px rgba(60, 30, 70, .07));
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  li.cd-card { transition: none; }
  li.cd-card:hover,
  li.cd-card:focus-within { transform: none; }
}

/* ---------------------------------------------- native editorial landing */

/*
 * The two native landing pages are ordinary page content rendered by `page.php`:
 * the shell, the header, the brand, the footer and the product cards are the ones
 * already approved, and this block only lays out the page body's own sections.
 * Every commerce row inside a landing is a WooCommerce shortcode rendering the
 * theme's own card, so nothing here restyles a product or duplicates the shell.
 */
.cd-landing__hero {
  background: linear-gradient(120deg, var(--cd-color-pink-xl, #fdf1f7), #f3ecff);
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-lg, 16px);
  padding: 30px 32px;
  margin-block-end: 8px;
}
.cd-landing__eyebrow {
  color: var(--cd-color-pink-d, #c00068);
  font-weight: 700; font-size: 13px; letter-spacing: .3px;
  margin: 0 0 8px;
}
.cd-landing__lead {
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-size: 26px; font-weight: 800; line-height: 1.25;
  margin: 0 0 10px;
}
.cd-landing__intro { font-size: 16px; line-height: 1.8; margin: 0 0 16px; max-inline-size: 62ch; }
.cd-landing__actions { margin: 0; }

.cd-landing__section { margin-block-start: 32px; }
.cd-landing__title {
  font-size: 22px; font-weight: 800; line-height: 1.3;
  margin: 0 0 6px;
}
.cd-landing__note { color: var(--cd-color-ink-2, #6b6b78); font-size: 13.5px; margin: 0 0 14px; }

.cd-landing__ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cd-landing__idea {
  background: var(--cd-color-pink-xl, #fdf1f7);
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-lg, 16px);
  padding: 18px 20px;
}
.cd-landing__ideatitle { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.cd-landing__idea p { margin: 0 0 10px; font-size: 14px; line-height: 1.7; color: var(--cd-color-ink-2, #6b6b78); }
.cd-landing__idealink { color: var(--cd-color-pink-d, #c00068); font-weight: 700; }

.cd-landing__steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  list-style: none; margin: 0; padding: 0; counter-reset: cd-landing-step;
}
.cd-landing__step {
  background: var(--cd-color-card, #fff);
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-lg, 16px);
  padding: 16px 18px;
}
/*
 * The number is generated from the list itself rather than typed into the copy,
 * so reordering the guidance can never leave a step labelled with someone
 * else's number.
 */
.cd-landing__step::before {
  counter-increment: cd-landing-step;
  content: counter(cd-landing-step);
  display: grid; place-items: center;
  inline-size: 30px; block-size: 30px;
  border-radius: 50%;
  background: var(--cd-color-pink, #e6007e); color: #fff;
  font-weight: 800; font-size: 14px;
  margin-block-end: 10px;
}
.cd-landing__steptitle { font-size: 16px; font-weight: 700; margin: 0 0 5px; }
.cd-landing__step p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--cd-color-ink-2, #6b6b78); }

.cd-landing__links { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 14px 0 0; padding: 0; }
.cd-landing__links a {
  display: inline-block;
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: 30px;
  padding: 8px 16px;
  font-size: 14px; font-weight: 600;
}
.cd-landing__links a:hover { border-color: var(--cd-color-pink, #e6007e); color: var(--cd-color-pink-d, #c00068); }

.cd-landing__cta {
  margin-block-start: 32px;
  background: linear-gradient(120deg, var(--cd-color-pink, #e6007e), var(--cd-color-pink-d, #c00068));
  border-radius: var(--cd-radius-lg, 16px);
  padding: 26px 32px;
  color: #fff; text-align: center;
}
.cd-landing__ctatitle { font-size: 21px; font-weight: 800; margin: 0 0 6px; color: #fff; }
.cd-landing__cta p { margin: 0 0 12px; opacity: .93; }
.cd-landing__cta .cd-btn--primary { background: #fff; color: var(--cd-color-pink-d, #c00068); }
.cd-landing__cta .cd-btn--primary:hover { background: var(--cd-color-pink-xl, #fdf1f7); }

@media (max-width: 899px) {
  .cd-landing__ideas { grid-template-columns: 1fr; }
  .cd-landing__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .cd-landing__hero { padding: 22px 20px; }
  .cd-landing__lead { font-size: 21px; }
  .cd-landing__intro { font-size: 15px; }
  .cd-landing__title { font-size: 19px; }
  .cd-landing__steps { grid-template-columns: 1fr; }
  .cd-landing__cta { padding: 22px 20px; }
}

/*
 * Theme tiles. A landing's discovery row names real categories and nothing else:
 * these categories carry no imagery of their own, and WooCommerce's own category
 * grid would fill the gap with five identical placeholder squares, which reads as
 * a broken gallery rather than as a choice. A titled tile says the same thing
 * honestly, and the row reflows by fitting whole tiles rather than by being told
 * how many columns each page has.
 */
.cd-landing__themes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 320px));
  justify-content: start;
  gap: 12px;
  list-style: none; margin: 0; padding: 0;
}
.cd-landing__themes a {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  min-block-size: 88px;
  padding: 14px 12px;
  background: linear-gradient(160deg, var(--cd-color-pink-xl, #fdf1f7), var(--cd-color-card, #fff));
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-lg, 16px);
  font-weight: 700; font-size: 14.5px; line-height: 1.45;
  box-shadow: 0 0 0 1px rgba(230, 0, 126, .07);
  transition: box-shadow .18s ease, transform .18s ease;
}
.cd-landing__themes a:hover,
.cd-landing__themes a:focus-visible {
  box-shadow: 0 0 0 1px rgba(230, 0, 126, .22), 0 0 14px rgba(230, 0, 126, .12);
  transform: translateY(-1px);
  color: var(--cd-color-pink-d, #c00068);
}

@media (prefers-reduced-motion: reduce) {
  .cd-landing__themes a { transition: none; }
  .cd-landing__themes a:hover,
  .cd-landing__themes a:focus-visible { transform: none; }
}

/*
 * The landing's own lists are layout, not prose. Generic page content gives every
 * list a marker and a text indent, which is right for editorial copy inside a page
 * and wrong for a tile grid or a numbered guide that draws its own numerals, so
 * these three opt back out at a specificity that actually reaches them.
 */
.cd-entry__content .cd-landing__themes,
.cd-entry__content .cd-landing__links,
.cd-entry__content .cd-landing__steps {
  padding-inline-start: 0;
  list-style: none;
}

/*
 * The reading measure above is what makes a policy page readable and what makes a
 * landing page wrong: at 72ch a four-column row of product cards is squeezed into
 * a column. A page assigned the landing template takes the shell width instead.
 */
.cd-entry__content--wide { max-inline-size: none; }

/* ==========================================================================
   Footer — structured global content (M7-C Step 1)
   ==========================================================================

   The footer stopped being a placeholder when the site gained structured global
   content. Everything below styles real data; every block still disappears when
   its data is absent, which is why there is no "empty state" styling here.
*/

.cd-footer__top {
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) 2.6fr;
  gap: 20px 32px;
  align-items: start;
}

.cd-footer__contact { display: grid; gap: 9px; margin-block-start: 16px; padding: 0; list-style: none; }
.cd-footer__contactrow { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: #c8c8d4; }
.cd-footer__contactrow b { display: block; color: #fff; font-weight: 700; font-size: 12.5px; }
.cd-footer__contactrow a { color: #c8c8d4; }
.cd-footer__contactrow a:hover { color: #fff; }
.cd-footer__contactico {
  flex: 0 0 auto;
  inline-size: 26px; block-size: 26px;
  border: 1px solid #5a5a68; border-radius: 999px;
  display: grid; place-items: center; color: #fff;
}
.cd-footer__contactico .cd-icon { inline-size: .85rem; block-size: .85rem; }
.cd-footer__tel {
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 800; font-size: 17px; color: #fff;
  direction: ltr; display: inline-block;
}
.cd-footer__branches { display: grid; gap: 2px; line-height: 1.7; }

/*
 * The heading is a real button so the mobile accordion is operable by keyboard and
 * announced correctly. On desktop CSS presents it as a plain heading: the control
 * remains in the DOM, but it is inert and the panel is always open, so there is one
 * markup structure rather than two.
 */
.cd-footer__toggle {
  inline-size: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0; margin: 0;
  background: none; border: 0;
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 800; font-size: 14.5px; color: #fff;
  text-align: start;
}
.cd-footer__toggle-mark {
  flex: 0 0 auto;
  inline-size: 10px; block-size: 10px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.cd-footer__toggle[aria-expanded="true"] .cd-footer__toggle-mark { transform: rotate(225deg); }
.cd-footer__toggle:focus-visible { box-shadow: var(--cd-focus-ring); border-radius: 6px; }

.cd-footer__channel {
  margin-block-start: 14px;
  display: inline-flex; align-items: center; gap: 9px;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding: 9px 13px;
  border: 1px solid #5a5a68; border-radius: var(--cd-radius-sm, 11px);
  font-size: 12.5px; font-weight: 700; color: #fff;
}
.cd-footer__channel:hover { border-color: #fff; }
.cd-footer__channel .cd-icon { inline-size: 1rem; block-size: 1rem; }

.cd-footer__pay { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.cd-footer__paymark {
  border: 1px solid #5a5a68; border-radius: 7px;
  padding: 5px 10px;
  font-size: 11.5px; font-weight: 700; color: #c8c8d4; letter-spacing: .02em;
}

/* Social marks became links once real destinations existed. */
.cd-footer__socialmark {
  display: grid; place-items: center;
  color: #c8c8d4;
}
.cd-footer__socialmark .cd-icon { inline-size: .8rem; block-size: .8rem; }
.cd-footer__socialmark:hover { color: #fff; border-color: #fff; }
.cd-footer__socialmark:focus-visible { box-shadow: var(--cd-focus-ring); }

/*
 * Accordion state. Closed is the default so a phone shows the brand and how to make
 * contact rather than four stacked link lists; desktop re-opens every panel below.
 */
.cd-footer__panel { display: none; padding-block-start: 9px; }
/*
 * The open state is keyed on the region, not on the toggle: the toggle lives inside its
 * heading, so an adjacent-sibling rule from the button can never reach the panel.
 */
.cd-footer__region[data-cd-open] .cd-footer__panel { display: block; }

@media (min-width: 900px) {
  .cd-footer__panel { display: block; padding-block-start: 0; }
  .cd-footer__toggle { pointer-events: none; margin-block-end: 9px; }
  .cd-footer__toggle-mark { display: none; }
}

@media (max-width: 899px) {
  .cd-footer__top { grid-template-columns: 1fr; }
  .cd-footer__regions { grid-template-columns: 1fr; gap: 4px; }
  .cd-footer__region { border-block-start: 1px solid #4c4c5a; padding-block: 4px; }
  /* Comfortable targets for both the toggle and every link inside an open panel. */
  .cd-footer__toggle { min-block-size: var(--cd-spacing-tap-min, 44px); }
  .cd-footer__list a { display: flex; align-items: center; min-block-size: 34px; }
}

/* ==========================================================================
   Accessibility entry point
   ==========================================================================

   A link to the site's accessibility statement, nothing more — no overlay and no
   compliance claim. Placed in the corner opposite the WhatsApp control so the two
   cannot overlap; the previous site maintained a CSS patch to keep them apart.
*/

.cd-a11y {
  position: fixed; z-index: 40;
  inset-block-end: calc(20px + env(safe-area-inset-bottom, 0px));
  inset-inline-end: 20px;
  inline-size: var(--cd-spacing-tap-min, 44px);
  block-size: var(--cd-spacing-tap-min, 44px);
  display: grid; place-items: center;
  background: var(--cd-color-card, #fff);
  border: 1.5px solid var(--cd-color-line-2, #e2e2ec);
  border-radius: 999px;
  box-shadow: var(--cd-shadow-lg, 0 8px 26px rgba(60,30,70,.10));
  color: var(--cd-color-ink-2, #6b6b78);
}
.cd-a11y:hover { color: var(--cd-color-pink-d, #c00068); border-color: var(--cd-color-pink-l, #fde3f0); }
.cd-a11y:focus-visible { box-shadow: var(--cd-focus-ring); }
.cd-a11y .cd-icon { inline-size: 1.15rem; block-size: 1.15rem; }

@media (max-width: 899px) {
  /* Same bottom-navigation clearance as the support control, for the same reason. */
  .cd-a11y {
    inset-block-end: calc(74px + env(safe-area-inset-bottom, 0px));
    inset-inline-end: 12px;
  }
}

/* ==========================================================================
   FAQ — one stored source, rendered as a native disclosure list
   ========================================================================== */

.cd-faq { margin-block-start: var(--cd-spacing-section, 28px); }
.cd-faq__title { font-size: 20px; margin-block-end: 12px; }
.cd-faq__list { display: grid; gap: 8px; }
.cd-faq__item {
  background: var(--cd-color-card, #fff);
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-sm, 11px);
}
.cd-faq__question {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding: 10px 14px;
  cursor: pointer; list-style: none;
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 700; font-size: 14.5px;
  color: var(--cd-color-ink, #3a3a46);
}
.cd-faq__question::-webkit-details-marker { display: none; }
.cd-faq__question:focus-visible { box-shadow: var(--cd-focus-ring); border-radius: var(--cd-radius-sm, 11px); }
.cd-faq__mark {
  flex: 0 0 auto;
  inline-size: 9px; block-size: 9px;
  border-inline-end: 2px solid var(--cd-color-ink-3, #9a9aa8);
  border-block-end: 2px solid var(--cd-color-ink-3, #9a9aa8);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.cd-faq__item[open] .cd-faq__mark { transform: rotate(225deg); }
.cd-faq__answer {
  padding: 0 14px 12px;
  font-size: 14px; line-height: 1.7;
  color: var(--cd-color-ink-2, #6b6b78);
}
.cd-faq__answer p { margin-block-end: 8px; }
.cd-faq__answer p:last-child { margin-block-end: 0; }

@media (prefers-reduced-motion: reduce) {
  .cd-footer__toggle-mark,
  .cd-faq__mark { transition: none; }
}

/* ==========================================================================
   Editorial article
   ========================================================================== */

.cd-article__header { margin-block-end: 14px; }
.cd-article__meta { font-size: 13px; color: var(--cd-color-ink-3, #9a9aa8); margin-block-start: 6px; }
.cd-article__media { margin: 0 0 18px; }
.cd-article__image { inline-size: 100%; block-size: auto; border-radius: var(--cd-radius-lg, 16px); }
.cd-article__content { line-height: 1.8; }
.cd-article__content img { max-inline-size: 100%; block-size: auto; border-radius: var(--cd-radius-sm, 11px); }
.cd-article__content h2 { font-size: 20px; margin-block: 20px 8px; }
.cd-article__content h3 { font-size: 17px; margin-block: 16px 6px; }
.cd-article__content p { margin-block-end: 12px; }
.cd-article__content ul,
.cd-article__content ol { margin-block-end: 12px; padding-inline-start: 20px; list-style: revert; }

/* ==========================================================================
   Top category rail — one row, scrolled rather than wrapped
   ==========================================================================

   The row used to wrap onto a second line as categories were added, which moved
   everything below it and made the header height depend on how many categories
   the shop happened to have. It now stays exactly one row and overflows
   sideways, so the header is a fixed shape whatever the catalogue does.

   Accent handling: each chip and its panel receive --cd-accent, --cd-accent-rgb
   and --cd-accent-ink from one chosen colour. Every state below is derived from
   those three, which is why an editor picks a colour rather than a palette.
*/

.cd-nav__inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

/*
 * The sprite's chevrons are physical, not logical: icon-chevron-start draws a
 * left-pointing mark and icon-chevron-end a right-pointing one, and neither
 * flips for writing direction. In RTL the rail begins at the right, so the
 * control that goes back sits on the right and must point right. The glyphs are
 * therefore chosen for the direction the site actually renders in, and mirrored
 * for an LTR site rather than being assumed.
 */
[dir="ltr"] .cd-nav__arrow .cd-icon { transform: scaleX(-1); }

.cd-nav__track {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow-x: auto;
  overflow-y: hidden;
  /*
   * Momentum and snap are left to the platform; nothing here blocks wheel or
   * drag. scroll-behavior is deliberately NOT declared here: as a CSS property
   * on this element it swallowed programmatic scrolls entirely, so the arrows
   * silently did nothing. The script asks for smoothness per call instead.
   */
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  /*
   * Snapping is what stops a category being sliced in half at the edge of the
   * track. Proximity rather than mandatory, so a deliberate free scroll is not
   * fought; the arrows below land on a chip boundary by construction.
   */
  scroll-snap-type: inline proximity;
  scroll-padding-inline: 4px;
}
.cd-nav__track::-webkit-scrollbar { display: none; }

/* The one rule that makes this a rail rather than a wrapping row. */
.cd-nav__list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  padding-block: 8px;
}

/*
 * Chips size to their own label. No per-category width is declared anywhere:
 * a longer category name simply makes a longer chip.
 */
.cd-nav__item { flex: 0 0 auto; scroll-snap-align: start; }

/*
 * The controls belong to the rail, so they wear the rail's shape: same pill
 * outline, same white surface, same restraint. They are given the secondary
 * teal rather than a category accent, because they steer the row and are not
 * one of the categories in it.
 */
.cd-nav__arrow {
  flex: 0 0 auto;
  inline-size: 34px; block-size: 34px;
  display: grid; place-items: center;
  border: 1px solid rgba(0, 169, 157, .40);
  border-radius: 999px;
  background: var(--cd-color-card, #fff);
  color: var(--cd-color-teal-d, #008a80);
  transition: color .16s ease, border-color .16s ease, background-color .16s ease,
              box-shadow .16s ease, opacity .16s ease;
}
.cd-nav__arrow:hover {
  border-color: rgba(0, 169, 157, .70);
  background: rgba(0, 169, 157, .06);
  box-shadow: 0 3px 12px rgba(0, 169, 157, .18);
}
.cd-nav__arrow:focus-visible { box-shadow: var(--cd-focus-ring); }
/*
 * Faded, not removed, and still not clickable at an edge — the control stays in
 * place so the rail does not change width as it reaches either end.
 */
.cd-nav__arrow[disabled] { opacity: .3; pointer-events: none; }

/* ------------------------------------------------------------ chip states */

/*
 * Default is restrained on purpose: twelve or more of these sit in one row, and
 * a row of saturated pills is noise rather than navigation. The accent shows up
 * on hover, on open, and on the current category.
 */
.cd-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  min-block-size: 38px;
  padding-inline: 14px;
  /*
   * The resting chip already wears its category's accent — a light outline and
   * accent label on a white surface. The states below differ by how much of that
   * accent is showing, not by whether it is there at all, so a rail at rest reads
   * as a set of categories rather than a row of grey pills.
   */
  border: 1px solid rgba(var(--cd-accent-rgb, 230 0 126) / .40);
  border-radius: 999px;
  background: var(--cd-color-card, #fff);
  /*
   * The outline carries the accent at rest; the label does not. Colouring both
   * made a row of fifteen chips read as fifteen calls to action. The accent
   * reaches the text on hover and stays there while the panel is open.
   */
  color: var(--cd-color-ink, #3a3a46);
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 600; font-size: 13.5px;
  white-space: nowrap;
  /*
   * Only colour, shadow and transform animate. Nothing that participates in
   * layout is transitioned, so no state can move the chip beside it.
   */
  transition: color .16s ease, border-color .16s ease, background-color .16s ease,
              box-shadow .16s ease, transform .16s ease;
}

.cd-nav__link:hover {
  color: var(--cd-accent-ink, var(--cd-color-ink, #3a3a46));
  border-color: rgba(var(--cd-accent-rgb, 230 0 126) / .70);
  background: rgba(var(--cd-accent-rgb, 230 0 126) / .06);
  box-shadow: 0 3px 12px rgba(var(--cd-accent-rgb, 230 0 126) / .18);
  transform: translateY(-1px);
}

/* Open is stronger than hover and persists while the panel is up. */
.cd-nav__link[aria-expanded="true"] {
  color: var(--cd-accent-ink, var(--cd-color-ink, #3a3a46));
  border-color: var(--cd-accent, #e6007e);
  background: rgba(var(--cd-accent-rgb, 230 0 126) / .13);
  box-shadow: 0 4px 14px rgba(var(--cd-accent-rgb, 230 0 126) / .22);
  transform: none;
}

/*
 * The current category stays marked after the pointer leaves — that is the
 * difference between "where the cursor is" and "where the customer is".
 */
.cd-nav__link.is-current {
  color: var(--cd-accent-ink, var(--cd-color-pink-d, #c00068));
  border-color: var(--cd-accent, #e6007e);
  background: rgba(var(--cd-accent-rgb, 230 0 126) / .16);
  font-weight: 700;
}

.cd-nav__link:focus-visible { box-shadow: var(--cd-focus-ring); }

.cd-nav__chev { inline-size: .95rem; block-size: .95rem; transition: transform .15s ease; }
.cd-nav__link[aria-expanded="true"] .cd-nav__chev { transform: rotate(180deg); }

/* ------------------------------------------------- mega menu item treatment */

/*
 * The old hover was a flat grey fill, which read the same on every category and
 * disappeared against the panel. Each row now takes the opened category's accent
 * and steps toward the reading direction, so the pointer's position is obvious
 * without turning every row into a button.
 */
.cd-mega__list a,
.cd-mega__sublist a {
  border-inline-start: 2px solid transparent;
  transition: background-color .14s ease, color .14s ease,
              border-color .14s ease, padding-inline-start .14s ease;
}

.cd-mega__list a:hover,
.cd-mega__sublist a:hover {
  background: rgba(var(--cd-accent-rgb, 230 0 126) / .07);
  color: var(--cd-accent-ink, var(--cd-color-ink, #3a3a46));
  border-inline-start-color: rgba(var(--cd-accent-rgb, 230 0 126) / .55);
  padding-inline-start: 14px;
}

.cd-mega__list a:focus-visible,
.cd-mega__sublist a:focus-visible {
  background: rgba(var(--cd-accent-rgb, 230 0 126) / .10);
  color: var(--cd-accent-ink, var(--cd-color-ink, #3a3a46));
  box-shadow: var(--cd-focus-ring);
}

/* Current beats hover, so the page you are on never looks like the row you are over. */
.cd-mega__list a[aria-current],
.cd-mega__sublist a[aria-current],
.cd-mega__list a.is-current,
.cd-mega__sublist a.is-current {
  background: rgba(var(--cd-accent-rgb, 230 0 126) / .14);
  color: var(--cd-accent-ink, var(--cd-color-ink, #3a3a46));
  border-inline-start-color: var(--cd-accent, #e6007e);
  font-weight: 700;
}

/* --------------------------------------------------- optional promo banner */

/*
 * The columns take a single 1fr track and every further child sizes to itself,
 * so a panel with no promo has no reserved column and no gap to explain.
 */
.cd-mega__inner {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: max-content;
}
.cd-mega__feature { inline-size: 300px; }

.cd-mega__promo {
  inline-size: 216px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.cd-mega__promo-img {
  inline-size: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--cd-radius-lg, 16px);
  display: block;
}
/*
 * The banner supports the navigation; it does not compete with it. Smaller than
 * the column heads, and quieter than the links.
 */
.cd-mega__promo-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--cd-color-ink, #3a3a46);
}
.cd-mega__promo-cta {
  font-size: 12.5px;
  color: var(--cd-accent-ink, var(--cd-color-pink-d, #c00068));
}
.cd-mega__promo-cta:focus-visible { box-shadow: var(--cd-focus-ring); border-radius: 6px; }

/* -------------------------------------------------------------- mobile rail */

@media (max-width: 899px) {
  .cd-nav__list { gap: 7px; padding-block: 7px; }
  /*
   * Swipe rather than arrows on a phone: the arrows would eat two tap targets'
   * worth of width to duplicate a gesture the platform already provides.
   */
  .cd-nav__arrow { display: none; }
  .cd-nav__track { scroll-snap-type: inline proximity; }
  .cd-nav__link { min-block-size: var(--cd-spacing-tap-min, 44px); font-size: 13px; }
  /* Never rendered on mobile, but belt and braces if a panel is ever reused. */
  .cd-mega__promo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-nav__link,
  .cd-mega__list a,
  .cd-mega__sublist a { transition: none; }
  .cd-nav__link:hover { transform: none; }
}

/* ==========================================================================
   Footer transition
   ==========================================================================

   The last promotional block used to butt straight into the dark footer, which
   read as a hard cut rather than the end of the page. This is spacing and one
   hairline — no gradient, no wave, no illustration, and no new content.
*/

.cd-footer {
  margin-block-start: 44px;
  border-block-start: 1px solid var(--cd-color-line, #ececf2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

@media (max-width: 899px) {
  .cd-footer { margin-block-start: 28px; }
}

/* The mobile accordion rows and their in-panel destination links are injected
   for both breakpoints; desktop never shows either, so its panel is exactly the
   tree the server sent. The server's own heading is never moved or replaced, so
   nothing here can cost a column its title. */
.cd-mega__row,
.cd-mega__all-item { display: none; }

/* ==========================================================================
   Mobile navigation and category correction
   ==========================================================================

   Four surfaces behaved as though a phone were a narrow desktop. Everything in
   this block is inside `@media (max-width: 899px)`, so desktop is untouched by
   construction rather than by inspection.
*/

@media (max-width: 899px) {

  /* ---------------------------------------------------- service strip ---
   *
   * The strip wrapped onto a second row on a phone, which pushed the header
   * down and made the band read as two half-empty lines. It is one row that
   * scrolls sideways instead. No marquee and no animation: a service strip that
   * moves on its own is unreadable and cannot be pointed at.
   */
  .cd-service-strip__list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    /* Breathing room at both ends so the first item never reads as clipped. */
    padding-inline: var(--cd-spacing-gutter, 18px);
  }
  .cd-service-strip__list::-webkit-scrollbar { display: none; }

  .cd-service-strip__item { flex: 0 0 auto; }
  .cd-service-strip__text { white-space: nowrap; }

  /* ------------------------------------------------ mega menu, mobile ---
   *
   * An accordion of rows, one card per expandable group, to the approved V2
   * reference. The previous pass made the panel a vertical flow, which was the
   * right shape but the wrong surface: a group read exactly like a leaf, and on
   * every group whose heading is a link the disclosure arrow landed on a
   * full-width row of its own underneath the label.
   *
   * Two decisions carry most of this block:
   *
   *   the row is one control — a grid of a flexible text cell and a fixed
   *   44x44 disclosure cell, so a label that needs a second line makes the row
   *   taller and cannot move the arrow anywhere;
   *
   *   state is carried by surface, border and mark together, never by colour
   *   alone, so open and closed stay distinguishable without colour vision.
   *
   * Geometry follows the reference: 56px rows, 16px side padding, 14px radius,
   * 8-12px between rows, 44px minimum for anything tappable.
   */
  .cd-mega__inner {
    display: block;
    padding-block: 8px 14px;
  }

  .cd-mega__cols {
    display: block;
    grid-template-columns: none;
  }

  /* The columns are the first accordion level. They are cards now, so the
     hairline that used to separate them would draw a second boundary around
     each one. */
  .cd-mega__col {
    border-block-start: 0;
    padding-block: 0;
    margin-block-end: 10px;
  }

  /* The server's heading is the desktop column title. At this width the
     injected row stands in its place. The panel is in the selector because
     `a.cd-mega__title` is more specific than a bare attribute, and a linked
     column head would otherwise stay visible under its own row. */
  .cd-mega [data-cd-mega-label] { display: none; }

  .cd-mega__row {
    inline-size: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cd-spacing-tap-min, 44px);
    align-items: center;
    gap: 10px;
    min-block-size: 56px;
    padding: 6px 16px;
    margin: 0;
    border: 1px solid var(--cd-color-line-2, #e2e2ec);
    border-radius: 14px;
    background: #fff;
    color: var(--cd-color-ink, #3a3a46);
    font-family: inherit;
    text-align: start;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
  }

  /* min-inline-size:0 is what actually lets the title wrap instead of forcing
     the track wider than its share and squeezing the fixed cell. */
  .cd-mega__row-text {
    min-inline-size: 0;
    display: grid;
    gap: 2px;
  }

  .cd-mega__row-title {
    font-family: var(--cd-typography-heading-family, sans-serif);
    font-weight: 800;
    font-size: 16px;
    line-height: 1.25;
    /* Two lines is the reference's limit. The full label stays in the
       accessible name either way, because the clamp is visual only. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .cd-mega__row-count {
    font-size: 13px;
    font-weight: 500;
    color: var(--cd-color-ink-2, #6b6b78);
  }

  /* A fixed square in its own track. Nothing the text does can reach it. */
  .cd-mega__row-mark {
    inline-size: var(--cd-spacing-tap-min, 44px);
    block-size: var(--cd-spacing-tap-min, 44px);
    display: grid;
    place-items: center;
    align-self: center;
  }
  /*
   * Physical borders, deliberately. A caret that means "this opens downward"
   * points down in Hebrew exactly as it does in English, so the one mark in this
   * component that could have been mirrored is the one that must not be: logical
   * borders would swing it sideways the moment the page is RTL.
   */
  .cd-mega__row-mark::before {
    content: '';
    inline-size: 9px;
    block-size: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform .18s ease;
  }
  .cd-mega__row[aria-expanded="true"] .cd-mega__row-mark::before {
    transform: translateY(3px) rotate(225deg);
  }

  .cd-mega__row[aria-expanded="true"] {
    background: rgba(var(--cd-accent-rgb, 230 0 126) / .07);
    border-color: rgba(var(--cd-accent-rgb, 230 0 126) / .55);
    color: var(--cd-accent-ink, var(--cd-color-pink-d, #c00068));
  }
  .cd-mega__row[aria-expanded="true"] .cd-mega__row-count { color: inherit; }

  .cd-mega__row:focus-visible {
    box-shadow: var(--cd-focus-ring);
    border-radius: 14px;
  }

  /* Closed by default; opened only by the group carrying the open flag. */
  [data-cd-mega-group] > .cd-mega__list,
  [data-cd-mega-group] > .cd-mega__sublist,
  [data-cd-mega-group] > .cd-mega__branch { display: none; }
  [data-cd-mega-group][data-cd-open] > .cd-mega__list,
  [data-cd-mega-group][data-cd-open] > .cd-mega__sublist,
  [data-cd-mega-group][data-cd-open] > .cd-mega__branch { display: block; }

  /*
   * What an open group reveals sits behind a guide on the inline-start edge —
   * the right-hand side in RTL, beside the row markers — so the contents read
   * as belonging to the row above them rather than as the next thing in the
   * list.
   */
  [data-cd-mega-group][data-cd-open] > .cd-mega__list,
  [data-cd-mega-group][data-cd-open] > .cd-mega__sublist {
    margin-block: 6px 12px;
    margin-inline: 8px 0;
    padding-inline-start: 12px;
    border-inline-start: 2px solid rgba(var(--cd-accent-rgb, 230 0 126) / .35);
  }

  /*
   * A nested group is the same control, one step quieter: no card of its own
   * until it opens, a lighter title, and its count cue held back until there is
   * something to count against. The disclosure cell is identical — depth
   * changes what a row looks like, never where its control is.
   */
  [data-cd-mega-level="2"] > .cd-mega__row,
  [data-cd-mega-level="3"] > .cd-mega__row,
  [data-cd-mega-level="4"] > .cd-mega__row {
    min-block-size: var(--cd-spacing-tap-min, 44px);
    padding-inline: 10px;
    border-color: transparent;
    background: none;
    border-radius: 12px;
  }
  [data-cd-mega-level="2"] > .cd-mega__row .cd-mega__row-title,
  [data-cd-mega-level="3"] > .cd-mega__row .cd-mega__row-title,
  [data-cd-mega-level="4"] > .cd-mega__row .cd-mega__row-title {
    font-size: 14px;
    font-weight: 700;
  }
  [data-cd-mega-level="2"] > .cd-mega__row[aria-expanded="false"] .cd-mega__row-count,
  [data-cd-mega-level="3"] > .cd-mega__row[aria-expanded="false"] .cd-mega__row-count,
  [data-cd-mega-level="4"] > .cd-mega__row[aria-expanded="false"] .cd-mega__row-count {
    display: none;
  }
  [data-cd-mega-level="2"] > .cd-mega__row[aria-expanded="true"],
  [data-cd-mega-level="3"] > .cd-mega__row[aria-expanded="true"],
  [data-cd-mega-level="4"] > .cd-mega__row[aria-expanded="true"] {
    border-color: rgba(var(--cd-accent-rgb, 230 0 126) / .55);
  }

  /*
   * Leaves are rows, not pills: full width, one tap target each, a small marker
   * at the inline-start edge for scanning. The desktop hover treatment steps the
   * padding as the pointer moves, which has no meaning on a touch screen and is
   * dropped here.
   */
  .cd-mega__list a,
  .cd-mega__sublist a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    min-block-size: var(--cd-spacing-tap-min, 44px);
    padding-inline: 6px;
    border-inline-start: 0;
    font-size: 14px;
    transition: background-color .14s ease, color .14s ease;
  }
  .cd-mega__list a:hover,
  .cd-mega__sublist a:hover { padding-inline-start: 6px; }

  .cd-mega__list a:not(.cd-mega__all)::before,
  .cd-mega__sublist a:not(.cd-mega__all)::before {
    content: '';
    flex: 0 0 auto;
    inline-size: 5px;
    block-size: 5px;
    border-radius: 50%;
    background: var(--cd-accent, #e6007e);
  }

  /* The number beside a leaf is a product count, which is not what this level
     of the navigation is about. It stays in the markup and out of the way. */
  .cd-mega__list .cd-mega__count,
  .cd-mega__sublist .cd-mega__count { display: none; }

  /*
   * The group's own page. A heading that is also a destination expands on tap
   * like every other row, so its destination is offered here instead of being
   * hidden inside a second meaning for the same tap.
   */
  .cd-mega__all-item { display: block; }
  .cd-mega__all {
    display: flex;
    align-items: center;
    min-block-size: var(--cd-spacing-tap-min, 44px);
    padding-inline: 6px;
    font-weight: 700;
    color: var(--cd-accent-ink, var(--cd-color-pink-d, #c00068));
  }

  /* -------------------------------------- category overview / intro card ---
   *
   * Below the navigation, full width, and only as tall as its content. The
   * desktop card is a fixed 300px column with align-content:start, which on a
   * phone became a tall empty beige block.
   *
   * The reference puts the mark beside the title rather than above it and gives
   * the action a row of its own, which is what turns a 300px column into a
   * ~120px summary. The markup is untouched: three grid areas do it.
   */
  .cd-mega__feature {
    inline-size: auto;
    margin-block-start: 12px;
    padding: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title mark"
      "text  mark"
      "cta   cta";
    align-items: center;
    gap: 4px 10px;
    block-size: auto;
    min-block-size: 0;
  }
  .cd-mega__feature > .cd-icon-chip {
    grid-area: mark;
    align-self: start;
    inline-size: 2.25rem;
    block-size: 2.25rem;
  }
  .cd-mega__feature-title { grid-area: title; align-self: end; font-size: 15px; }
  .cd-mega__feature-text {
    grid-area: text;
    align-self: start;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cd-mega__feature .cd-btn {
    grid-area: cta;
    inline-size: 100%;
    margin-block-start: 8px;
    min-block-size: var(--cd-spacing-tap-min, 44px);
    background: #fff;
  }

  /* ------------------------------- product-category archive refinements ---
   *
   * Subcategory pills now use the uniform adaptive two-row layout defined in the
   * C4 block near the end of this file (user-approved revision, 2026-09-22): they
   * wrap, cap at two rows when there are many, and reveal the rest behind an
   * inline "+N" toggle. The mobile-only horizontal scroller was retired there.
   * Only the compact pill geometry stays here.
   */

  /* Compact geometry, consistent with the accepted top rail. */
  .cd-plp__subcats .cd-chip--lg {
    min-block-size: 38px;
    padding-inline: 13px;
    font-size: 13px;
    white-space: nowrap;
  }

  /*
   * Counts are noise at this size. Hidden visually and left in the accessible
   * name, because the taxonomy data itself is not this unit's to change.
   */
  .cd-plp__subcats .cd-chip__count { display: none; }
}
/* ==========================================================================
   Slice A — wholesale, customer club, loyalty signup
   ==========================================================================

   Three content pages that need a little more than running text: a form, a
   benefit list and a call to action that has to be found. Everything below is
   built from tokens the design system already defines — there is no new colour,
   no new radius and no new type scale here, only an arrangement of the ones the
   storefront already uses.

   The classes are deliberately generic (`cd-slice-a__*`, `cd-benefit`,
   `cd-form__*`) rather than page-specific, because the same three shapes are
   what the remaining M7-C content slices will need.
*/

.cd-slice-a { display: grid; gap: 18px; }

.cd-slice-a__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 18px;
  align-items: start;
}

.cd-slice-a__card {
  background: var(--cd-color-card, #fff);
  border: 1px solid var(--cd-color-line-2, #e2e2ec);
  border-radius: var(--cd-radius-lg, 16px);
  padding: 22px;
  box-shadow: var(--cd-shadow-sm, 0 3px 10px rgba(60, 30, 70, .07));
}
.cd-slice-a__card + .cd-slice-a__card { margin-block-start: 18px; }
.cd-slice-a__card--accent {
  background: var(--cd-color-pink-xl, #fdf1f7);
  border-color: var(--cd-color-pink-l, #fde3f0);
}
.cd-slice-a__card--quiet {
  background: var(--cd-color-neutral-soft, #f1f1f6);
  box-shadow: none;
}

.cd-slice-a__card > h2 {
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 800;
  font-size: 21px;
  margin-block: 0 10px;
}
.cd-slice-a__card > h3 {
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 700;
  font-size: 16px;
  margin-block: 0 8px;
}
.cd-slice-a__card p { margin-block: 0 12px; }
.cd-slice-a__card p:last-child { margin-block-end: 0; }

.cd-slice-a__lede {
  font-size: 16px;
  color: var(--cd-color-ink-2, #6b6b78);
}

/* ------------------------------------------------------- benefit and steps */

.cd-benefits { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.cd-benefit {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.cd-benefit__mark {
  inline-size: 38px;
  block-size: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 800;
  font-size: 13px;
  color: var(--cd-color-pink-d, #c00068);
  background: var(--cd-color-pink-l, #fde3f0);
}
.cd-benefit--teal .cd-benefit__mark { color: var(--cd-color-teal-d, #008a80); background: var(--cd-color-teal-l, #e0f6f4); }
.cd-benefit--green .cd-benefit__mark { color: var(--cd-color-green-aa, #4e7a1e); background: var(--cd-color-green-l, #eef7df); }
.cd-benefit--orange .cd-benefit__mark { color: var(--cd-color-orange-d, #a85e00); background: var(--cd-color-orange-l, #fdeede); }

.cd-benefit__title {
  display: block;
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 700;
}
.cd-benefit__text { display: block; color: var(--cd-color-ink-2, #6b6b78); font-size: 14.5px; }

/* ------------------------------------------------------------------- forms */

/*
 * Contact Form 7 renders the controls; these rules give them the storefront's
 * geometry. Every field is labelled by a real <label> in the form template —
 * the legacy form had none, and a placeholder disappears the moment a visitor
 * starts typing.
 */
.cd-form__field { display: grid; gap: 6px; margin-block: 0 14px; }
.cd-form__field > label {
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 700;
  font-size: 14px;
}
.cd-form__req { color: var(--cd-color-pink-d, #c00068); }

.cd-slice-a .wpcf7-form-control.wpcf7-text,
.cd-slice-a .wpcf7-form-control.wpcf7-tel,
.cd-slice-a .wpcf7-form-control.wpcf7-email {
  inline-size: 100%;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding-inline: 12px;
  border: 1px solid var(--cd-color-line-2, #e2e2ec);
  border-radius: var(--cd-radius-sm, 11px);
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--cd-color-ink, #3a3a46);
}
.cd-slice-a .wpcf7-form-control:focus-visible {
  outline: 0;
  box-shadow: var(--cd-focus-ring);
}

.cd-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  font-size: 14px;
  color: var(--cd-color-ink-2, #6b6b78);
  margin-block: 0 14px;
}
.cd-slice-a .wpcf7-acceptance input[type="checkbox"] {
  inline-size: 22px;
  block-size: 22px;
  margin-block-start: 2px;
}

.cd-form__submit { margin-block: 0; }
.cd-slice-a .wpcf7-submit {
  inline-size: 100%;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding-inline: 22px;
  border: 0;
  border-radius: 999px;
  background: var(--cd-color-pink, #e6007e);
  color: #fff;
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
}
.cd-slice-a .wpcf7-spinner { margin-inline-start: 8px; }

/*
 * Contact Form 7's own response and validation output, given the storefront's
 * voice rather than the plugin's default. Nothing here changes what it says.
 */
.cd-slice-a .wpcf7-response-output {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: var(--cd-radius-sm, 11px);
  border: 1px solid var(--cd-color-line-2, #e2e2ec);
  font-size: 14px;
}
.cd-slice-a .wpcf7-not-valid-tip {
  color: var(--cd-color-pink-d, #c00068);
  font-size: 13px;
}

/* --------------------------------------------------------------------- CTA */

.cd-slice-a__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding-inline: 22px;
  border-radius: 999px;
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
}
.cd-slice-a__cta-note {
  margin-block: 10px 0;
  font-size: 13px;
  color: var(--cd-color-ink-3, #9a9aa8);
}

.cd-slice-a__note {
  font-size: 13.5px;
  color: var(--cd-color-ink-2, #6b6b78);
  background: var(--cd-color-teal-xl, #f0fbfa);
  border: 1px solid var(--cd-color-teal-l, #e0f6f4);
  border-radius: var(--cd-radius-sm, 11px);
  padding: 10px 14px;
}

@media (max-width: 899px) {
  /*
   * On a phone the enquiry form comes before the long advantage copy: someone
   * who arrived to register should not have to scroll past five selling points
   * to find the first field. `order` does it without a second markup shape,
   * so the reading order for assistive technology stays the document order.
   */
  .cd-slice-a__cols {
    grid-template-columns: minmax(0, 1fr);
    display: flex;
    flex-direction: column;
  }
  .cd-slice-a__cols > .cd-slice-a__action { order: -1; }

  .cd-slice-a__card { padding: 16px; border-radius: 14px; }
  .cd-slice-a__card > h2 { font-size: 18px; }
  .cd-slice-a__cta { inline-size: 100%; }
}

/* ==========================================================================
   All categories — the /כל-הקטגוריות/ index
   ==========================================================================
   One markup shape serves both widths. The server sends a complete, expanded
   outline of real links; on a phone the accordion collapses the nested regions
   and stands an injected disclosure row where the group heading was. Nothing
   here hides a destination that JavaScript would have to bring back: with
   scripting off, every category on the page is still a link.
   ========================================================================== */

.cd-allcats {
  display: grid;
  gap: 14px;
  margin-block-start: var(--cd-spacing-section, 28px);
}

.cd-allcats__group {
  background: var(--cd-color-card, #fff);
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-lg, 16px);
  padding: 16px 16px 14px;
  box-shadow: var(--cd-shadow-sm, 0 3px 10px rgba(60, 30, 70, .07));
}

.cd-allcats__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 0 0 12px;
  font-size: 19px;
  line-height: 1.3;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.cd-allcats__title-link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  color: inherit;
  text-decoration: none;
}

.cd-allcats__title-link:hover { color: var(--cd-color-pink-d, #c00068); }

.cd-allcats__count {
  font-family: var(--cd-typography-body-family, sans-serif);
  font-weight: var(--cd-typography-body-weight, 400);
  font-size: 12.5px;
  color: var(--cd-color-ink-2, #6b6b78);
  white-space: nowrap;
}

.cd-allcats__list,
.cd-allcats__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * The index sits inside generic page content, which gives every list a disc, a
 * text indent and a gap between items — right for editorial copy, wrong for a
 * row of chips. It opts back out at a specificity that actually reaches it, the
 * same way the landing lists already do.
 */
.cd-entry__content .cd-allcats__list,
.cd-entry__content .cd-allcats__sublist {
  list-style: none;
  padding-inline-start: 0;
}

.cd-entry__content .cd-allcats__sublist { padding-inline-start: 12px; }
.cd-entry__content .cd-allcats__item + .cd-allcats__item { margin-block-start: 0; }

.cd-allcats__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cd-allcats__item { min-inline-size: 0; }

.cd-allcats__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding-inline: 14px;
  border: 1px solid var(--cd-color-line-2, #e2e2ec);
  border-radius: var(--cd-radius-sm, 11px);
  background: #fff;
  text-decoration: none;
  font-size: 14.5px;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

.cd-allcats__link:hover { background: var(--cd-color-neutral-soft, #f1f1f6); }

/*
 * A third or fourth level is a refinement of the entry above it, so it is
 * indented and quieter rather than given the same weight. The block-start
 * margin is what separates it from its own parent's chip.
 */
.cd-allcats__sublist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-start: 6px;
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--cd-color-line, #ececf2);
}

.cd-allcats__sublist .cd-allcats__link {
  min-block-size: var(--cd-spacing-tap-min, 44px);
  font-size: 13.5px;
  background: var(--cd-color-neutral-soft, #f1f1f6);
  border-color: transparent;
}

.cd-allcats__sublist .cd-allcats__link:hover { background: var(--cd-color-line, #ececf2); }

.cd-allcats__item:has(> .cd-allcats__sublist) { flex-basis: 100%; }

.cd-allcats__group--leaf .cd-allcats__title { margin-block-end: 0; }

.cd-allcats__empty {
  padding: 16px;
  background: var(--cd-color-teal-xl, #f0fbfa);
  border: 1px solid var(--cd-color-teal-l, #e0f6f4);
  border-radius: var(--cd-radius-lg, 16px);
}

/* The injected disclosure row and its restated destination exist only at
   phone widths: on desktop the group heading is visible and is that link. */
.cd-allcats__row { display: none; }
.cd-allcats__all-item { display: none; }

@media (min-width: 900px) {
  .cd-allcats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .cd-allcats__group { padding: 20px 22px 18px; }
}

@media (max-width: 899px) {
  /*
   * The row replaces the heading rather than joining it: two controls that read
   * the same but do different things is the confusion the mega menu accordion
   * already solved, and this reuses that answer. The heading link is not lost —
   * the accordion re-offers it as «לכל …», the first entry inside what the row
   * opens.
   */
  .cd-allcats__group[data-cd-ac-group] > [data-cd-ac-label] { display: none; }

  .cd-allcats__group[data-cd-ac-group] > .cd-allcats__row { display: grid; }

  .cd-allcats__row {
    inline-size: 100%;
    grid-template-columns: minmax(0, 1fr) var(--cd-spacing-tap-min, 44px);
    align-items: center;
    gap: 8px;
    min-block-size: var(--cd-spacing-tap-min, 44px);
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
  }

  .cd-allcats__row-text { display: grid; gap: 2px; min-inline-size: 0; }

  .cd-allcats__row-title {
    font-family: var(--cd-typography-heading-family, sans-serif);
    font-weight: var(--cd-typography-heading-weight, 800);
    font-size: 17px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .cd-allcats__row-count {
    font-size: 12.5px;
    color: var(--cd-color-ink-2, #6b6b78);
  }

  /*
   * Drawn from two physical borders rather than from a character, because a
   * textual arrow is reordered by the bidi algorithm and ends up pointing the
   * wrong way in an RTL document.
   */
  .cd-allcats__row-mark {
    inline-size: var(--cd-spacing-tap-min, 44px);
    block-size: var(--cd-spacing-tap-min, 44px);
    position: relative;
  }

  .cd-allcats__row-mark::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 8px;
    block-size: 8px;
    margin: -6px 0 0 -4px;
    border-right: 2px solid var(--cd-color-ink-2, #6b6b78);
    border-bottom: 2px solid var(--cd-color-ink-2, #6b6b78);
    transform: rotate(45deg);
    transition: transform .15s ease;
  }

  .cd-allcats__group[data-cd-open] > .cd-allcats__row .cd-allcats__row-mark::before {
    transform: rotate(225deg);
    margin-block-start: -2px;
  }

  /* A region is closed until its own row opens it. Ancestors stay open. */
  .cd-allcats__group[data-cd-ac-group] > .cd-allcats__list { display: none; }
  .cd-allcats__group[data-cd-ac-group][data-cd-open] > .cd-allcats__list { display: flex; }

  .cd-allcats__item[data-cd-ac-group] > .cd-allcats__sublist { display: none; }
  .cd-allcats__item[data-cd-ac-group][data-cd-open] > .cd-allcats__sublist { display: flex; }
  .cd-allcats__item[data-cd-ac-group] > [data-cd-ac-label] { display: none; }
  .cd-allcats__item[data-cd-ac-group] > .cd-allcats__row { display: grid; }

  .cd-allcats__item[data-cd-ac-group] { flex-basis: 100%; }

  .cd-allcats__item[data-cd-ac-group] > .cd-allcats__row .cd-allcats__row-title {
    font-family: var(--cd-typography-body-family, sans-serif);
    font-weight: var(--cd-typography-strong-weight, 700);
    font-size: 14.5px;
  }

  .cd-allcats__list { gap: 6px; }
  .cd-allcats__list > .cd-allcats__item { flex-basis: 100%; }
  .cd-allcats__link { inline-size: 100%; }
  .cd-allcats__group { padding: 12px 14px; }
  .cd-allcats__title { font-size: 17px; }

  .cd-allcats__all-item { display: block; flex-basis: 100%; }

  .cd-allcats__all {
    display: inline-flex;
    align-items: center;
    inline-size: 100%;
    min-block-size: var(--cd-spacing-tap-min, 44px);
    padding-inline: 14px;
    border: 1px dashed var(--cd-color-line-2, #e2e2ec);
    border-radius: var(--cd-radius-sm, 11px);
    font-weight: var(--cd-typography-strong-weight, 700);
    color: var(--cd-color-pink-d, #c00068);
    text-decoration: none;
    overflow-wrap: anywhere;
  }
}

/* ==========================================================================
   Magazine — the /blog/ editorial index
   ==========================================================================
   One lead article, then a grid, then a pager. Cards with a real featured image
   show it; cards whose source article has none are given a deliberate text-first
   treatment rather than a substitute picture, because inventing one would be
   fabricating editorial content.
   ========================================================================== */

/*
 * The single column is minmax(0, 1fr) rather than 1fr, and every child is
 * allowed to shrink below its content. A grid child defaults to min-width:auto,
 * so the nowrap chip row below would otherwise widen the whole page instead of
 * scrolling inside its own box.
 */
.cd-mag {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cd-spacing-section, 28px);
}

.cd-mag > * { min-inline-size: 0; }

.cd-mag__filters { margin-block-start: 4px; min-inline-size: 0; }

.cd-mag__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cd-mag__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding-inline: 14px;
  border: 1px solid var(--cd-color-line-2, #e2e2ec);
  border-radius: var(--cd-radius-sm, 11px);
  background: #fff;
  color: inherit;
  text-decoration: none;
  font-size: 14.5px;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

.cd-mag__chip:hover { background: var(--cd-color-neutral-soft, #f1f1f6); }

.cd-mag__chip.is-current {
  background: var(--cd-color-pink, #e6007e);
  border-color: var(--cd-color-pink, #e6007e);
  color: #fff;
  font-weight: var(--cd-typography-strong-weight, 700);
}

.cd-mag__chip-count { font-size: 12.5px; color: var(--cd-color-ink-2, #6b6b78); }
.cd-mag__chip.is-current .cd-mag__chip-count { color: #fff; }

.cd-mag__count { margin: 0; font-size: 13.5px; color: var(--cd-color-ink-3, #9a9aa8); }

.cd-mag__lead,
.cd-mag__card {
  display: flex;
  flex-direction: column;
  background: var(--cd-color-card, #fff);
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-lg, 16px);
  overflow: hidden;
  box-shadow: var(--cd-shadow-sm, 0 3px 10px rgba(60, 30, 70, .07));
}

.cd-mag__lead { border-inline-start: 4px solid var(--cd-color-pink, #e6007e); }
.cd-mag__card:hover,
.cd-mag__lead:hover { box-shadow: var(--cd-shadow-lg, 0 8px 26px rgba(60, 30, 70, .10)); }

.cd-mag__media { display: block; background: var(--cd-color-neutral-soft, #f1f1f6); }

.cd-mag__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.cd-mag__lead .cd-mag__img { aspect-ratio: 16 / 9; }

.cd-mag__body { display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.cd-mag__lead .cd-mag__body { padding: 20px; }

.cd-mag__cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

.cd-mag__cat {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--cd-color-teal-l, #e0f6f4);
  color: var(--cd-color-teal-aa, #00736b);
  font-size: 12px;
  font-weight: var(--cd-typography-strong-weight, 700);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.cd-mag__cat:hover { background: var(--cd-color-teal-xl, #f0fbfa); }

.cd-mag__title { margin: 2px 0 0; line-height: 1.3; overflow-wrap: anywhere; }
.cd-mag__card .cd-mag__title { font-size: 17px; }
.cd-mag__lead .cd-mag__title { font-size: 23px; }
.cd-mag__title a { color: inherit; text-decoration: none; }
.cd-mag__title a:hover { color: var(--cd-color-pink-d, #c00068); }

.cd-mag__meta { margin: 0; font-size: 13px; color: var(--cd-color-ink-3, #9a9aa8); }
.cd-mag__excerpt { margin: 4px 0 0; color: var(--cd-color-ink-2, #6b6b78); }

.cd-mag__more {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  margin-block-start: auto;
  font-family: var(--cd-typography-heading-family, sans-serif);
  font-weight: var(--cd-typography-strong-weight, 700);
  font-size: 14.5px;
  color: var(--cd-color-pink-d, #c00068);
  text-decoration: none;
}

/*
 * A card with no source image is not a broken card. It is given the reading
 * measure and a quieter rule instead of a picture, so the row still scans.
 */
.cd-mag__card--text,
.cd-mag__lead--text { border-block-start: 3px solid var(--cd-color-teal-l, #e0f6f4); }
.cd-mag__card--text .cd-mag__excerpt,
.cd-mag__lead--text .cd-mag__excerpt { color: var(--cd-color-ink, #3a3a46); }

.cd-mag__grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }

.cd-mag__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cd-mag__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--cd-spacing-tap-min, 44px);
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding-inline: 12px;
  border: 1px solid var(--cd-color-line-2, #e2e2ec);
  border-radius: var(--cd-radius-sm, 11px);
  background: #fff;
  color: inherit;
  text-decoration: none;
  font-size: 14.5px;
}

.cd-mag__page:hover { background: var(--cd-color-neutral-soft, #f1f1f6); }

.cd-mag__page.is-current {
  background: var(--cd-color-pink, #e6007e);
  border-color: var(--cd-color-pink, #e6007e);
  color: #fff;
  font-weight: var(--cd-typography-strong-weight, 700);
}

.cd-mag__gap { color: var(--cd-color-ink-3, #9a9aa8); padding-inline: 2px; }

.cd-mag__empty {
  padding: 16px;
  background: var(--cd-color-teal-xl, #f0fbfa);
  border: 1px solid var(--cd-color-teal-l, #e0f6f4);
  border-radius: var(--cd-radius-lg, 16px);
}

/*
 * The index is page content, so the generic prose rules reach it: a disc on
 * every list, a text indent and a gap between items. All three are wrong for a
 * chip row and a pager, and are opted back out of the same way the landing and
 * all-categories lists already are.
 */
.cd-entry__content .cd-mag__chips {
  list-style: none;
  padding-inline-start: 0;
}

.cd-entry__content .cd-mag__chips li + li { margin-block-start: 0; }

@media (min-width: 900px) {
  .cd-mag__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .cd-mag__lead { flex-direction: row; align-items: stretch; }
  .cd-mag__lead .cd-mag__media { flex: 0 0 46%; display: grid; place-items: center; }
  /*
   * Bounded, and contained rather than covered. Editorial images here range
   * from wide photographs to tall product cut-outs on a transparent ground; an
   * unbounded height let one of those stretch the lead to three times the
   * height of the grid beside it, and cropping it to fit would be inventing a
   * composition the source never had.
   */
  .cd-mag__lead .cd-mag__img {
    inline-size: 100%;
    block-size: 100%;
    max-block-size: 380px;
    aspect-ratio: auto;
    object-fit: contain;
  }
  .cd-mag__lead .cd-mag__body { flex: 1 1 auto; justify-content: center; padding: 26px; }
  .cd-mag__lead .cd-mag__title { font-size: 27px; }
}

@media (max-width: 899px) {
  .cd-mag { gap: 20px; }
  .cd-mag__lead .cd-mag__title { font-size: 20px; }
  .cd-mag__chips { flex-wrap: nowrap; overflow-x: auto; padding-block-end: 4px; scroll-snap-type: x proximity; }
  .cd-mag__chips li { scroll-snap-align: start; flex: 0 0 auto; }
  .cd-mag__chip { white-space: nowrap; overflow-wrap: normal; }
}

/* ==========================================================================
   About — the /about-us/ composition
   ==========================================================================

   The About page is an ordinary WordPress page: every word, every image and the
   one call to action live in Page 175, where an editor can reach them. This
   block is presentation only. It adds no copy, no link and no image of its own,
   and it renders nothing unless the page body asks for it by class.

   The page is assigned the landing template, so `.cd-entry__content` drops its
   72ch reading measure and the composition gets the shell width. At the reading
   measure a three-photograph gallery and a pair of side-by-side sections are
   squeezed into a column, which is the same reason `page-landing.php` exists.

   Aspect handling is deliberate. The three photographs are natively 3:2
   (1200x800 and 1875x1251) and the approved composition preserves that, so the
   images are sized by width with `block-size: auto` and carry their intrinsic
   `width`/`height` attributes. Nothing here sets a fixed ratio or an
   `object-fit` crop: a photograph that is trimmed to fit a box is a different
   photograph, and this page may not change what its images show.
   ========================================================================== */

.cd-about { display: grid; gap: var(--cd-spacing-section, 28px); }

.cd-about__lede {
  max-inline-size: 60ch;
  font-size: 17px;
  line-height: 1.6;
}

/* --- the three photographs ------------------------------------------------ */

.cd-about__gallery {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.cd-about__shot {
  margin: 0;
  overflow: hidden;
  border-radius: var(--cd-radius-lg, 16px);
  background: var(--cd-color-neutral-soft, #f1f1f6);
  box-shadow: var(--cd-shadow-sm, 0 3px 10px rgba(60, 30, 70, .07));
}

/*
 * Width-driven, height intrinsic. The radius and shadow above are applied by
 * the frame, never baked into the file.
 */
.cd-about__shot img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-inline-size: 100%;
}

/* --- content blocks -------------------------------------------------------- */

.cd-about__card {
  max-inline-size: 70ch;
  padding: 20px;
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-lg, 16px);
  background: var(--cd-color-card, #fff);
  box-shadow: var(--cd-shadow-sm, 0 3px 10px rgba(60, 30, 70, .07));
}

.cd-about__card > p { margin: 0; }
.cd-about__card > p + p { margin-block-start: 12px; }

.cd-about__h2 {
  margin: 0 0 8px;
  font-size: 21px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/*
 * The five claims were five dashed sentences separated by line breaks. They are
 * a list, so they are marked up as one — which also means the generic page rule
 * would give them a disc and a text indent. These are cards in a grid rather
 * than running prose, so they opt back out at a specificity that reaches them.
 */
.cd-entry__content .cd-about__facts {
  margin: 14px 0 0;
  padding-inline-start: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.cd-about__facts li {
  margin: 0;
  padding: 12px 14px 12px 14px;
  padding-inline-start: 30px;
  position: relative;
  border: 1px solid var(--cd-color-teal-l, #e0f6f4);
  border-radius: var(--cd-radius-sm, 11px);
  background: var(--cd-color-teal-xl, #f0fbfa);
  overflow-wrap: anywhere;
}

.cd-about__facts li::before {
  content: "";
  position: absolute;
  inset-inline-start: 14px;
  inset-block-start: 20px;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--cd-color-teal-aa, #00736b);
}

.cd-about__two {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.cd-about__two .cd-about__card { max-inline-size: none; }

.cd-about__note {
  max-inline-size: 70ch;
  margin: 0;
  font-weight: var(--cd-typography-strong-weight, 700);
}

/* --- the one call to action ------------------------------------------------ */

.cd-about__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--cd-color-pink-l, #fde3f0);
  border-radius: var(--cd-radius-lg, 16px);
  background: var(--cd-color-pink-xl, #fdf1f7);
}

.cd-about__cta-text {
  margin: 0;
  max-inline-size: 56ch;
  overflow-wrap: anywhere;
}

/*
 * The button carries its own paragraph. Left bare on a line of its own,
 * wpautop wraps it in a <p> it never closes, and in this flex row that generated
 * wrapper became the button's containing block and shrank it. Authoring the
 * paragraph removes the guesswork.
 */
.cd-about__cta-actions { margin: 0; flex: 0 0 auto; }
.cd-about__cta-btn { flex: 0 0 auto; }

@media (min-width: 900px) {
  .cd-about__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .cd-about__shot--lead { grid-column: 1 / -1; }
  .cd-about__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-about__two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

@media (max-width: 899px) {
  .cd-about { gap: 22px; }
  .cd-about__lede { font-size: 16px; }
  .cd-about__card { padding: 16px; }
  .cd-about__cta { padding: 18px; }
  .cd-about__cta-actions { inline-size: 100%; }
  .cd-about__cta-btn { inline-size: 100%; }
}

/* ==========================================================================
   Wishlist — saved state, the list page and the status region
   ==========================================================================

   The hearts already had their approved placement and treatment: the card's
   corner chip and the PDP's outline pill. Nothing here moves or restyles either.
   What was missing was a saved state to show, because nothing was ever saved.

   Three states have to read apart, and hover is the one that usually collapses
   into "saved" by accident. So hover only warms the outline, and saved fills the
   chip with the brand pink and switches the icon to white — a change of fill,
   not of weight, which hover never does.

   Nothing is painted until the client has hydrated. `is-hydrated` is added once
   the real list is known, so a page can never flash a saved heart that turns out
   to be empty.
   ========================================================================== */

.cd-wish {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.cd-wish:focus-visible {
  outline: none;
  box-shadow: var(--cd-focus-ring, 0 0 0 3px #fff, 0 0 0 5.5px #c00068);
  border-radius: 999px;
}

/* --- the card heart, keeping its approved corner chip --------------------- */

.cd-card__wish.cd-wish {
  /* The chip is 26px; the control's hit area is the 44px the approved layout allows. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  inset-block-start: 0;
  inset-inline-start: 0;
}

.cd-card__wish.cd-wish:hover .cd-icon-chip { color: var(--cd-color-pink-d, #c00068); }

.cd-card__wish.cd-wish.is-saved .cd-icon-chip {
  background: var(--cd-color-pink, #e6007e);
  color: #fff;
}

/* --- the PDP heart, keeping its approved outline pill --------------------- */

.cd-pdp__wish.cd-wish { cursor: pointer; }
.cd-pdp__wish.cd-wish:hover { border-color: var(--cd-color-pink, #e6007e); }

.cd-pdp__wish.cd-wish.is-saved {
  background: var(--cd-color-pink-xl, #fdf1f7);
  border-color: var(--cd-color-pink, #e6007e);
}

.cd-pdp__wish.cd-wish.is-saved .cd-icon-chip {
  background: var(--cd-color-pink, #e6007e);
  color: #fff;
  border-radius: 999px;
}

/* --- the header count ------------------------------------------------------ */

.cd-header__wish { position: relative; }

.cd-wish-count {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-start: -2px;
  min-inline-size: 17px;
  block-size: 17px;
  padding-inline: 4px;
  border-radius: 999px;
  background: var(--cd-color-pink, #e6007e);
  color: #fff;
  font-size: 11px;
  line-height: 17px;
  text-align: center;
}

/* --- the status region ----------------------------------------------------- */

/*
 * One polite live region for the whole document, positioned clear of the mobile
 * bottom navigation so a confirmation never sits underneath it.
 */
.cd-wish-status {
  position: fixed;
  inset-block-end: 84px;
  inset-inline: 12px;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-inline: auto;
  max-inline-size: 420px;
  padding: 12px 16px;
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-lg, 16px);
  background: var(--cd-color-card, #fff);
  box-shadow: var(--cd-shadow-lg, 0 8px 26px rgba(60,30,70,.10));
}

.cd-wish-status__text { margin: 0; font-size: 14px; }

.cd-wish-status__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  color: var(--cd-color-pink-d, #c00068);
  font-weight: var(--cd-typography-strong-weight, 700);
  font-size: 14px;
}

/* --- the list page --------------------------------------------------------- */

.cd-wishlist__empty {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding-block: 32px;
  text-align: center;
}

.cd-wishlist__empty-title { margin: 0; font-size: 17px; }

.cd-wishlist__error { color: var(--cd-color-pink-d, #c00068); }

.cd-entry__content .cd-wishlist__grid {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}

.cd-wishlist__item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-lg, 16px);
  background: var(--cd-color-card, #fff);
}

.cd-wishlist__media {
  display: block;
  overflow: hidden;
  border-radius: var(--cd-radius-sm, 11px);
  background: var(--cd-color-neutral-soft, #f1f1f6);
}

.cd-wishlist__media img { display: block; inline-size: 100%; block-size: auto; }

.cd-wishlist__body { display: grid; gap: 8px; min-inline-size: 0; }

.cd-wishlist__name {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cd-wishlist__price { font-weight: var(--cd-typography-strong-weight, 700); }
.cd-wishlist__price del { color: var(--cd-color-ink-3, #9a9aa8); font-weight: 400; }

.cd-wishlist__stock { margin: 0; font-size: 13px; color: var(--cd-color-ink-2, #6b6b78); }

.cd-wishlist__remove { justify-self: start; }

@media (min-width: 700px) {
  .cd-entry__content .cd-wishlist__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .cd-entry__content .cd-wishlist__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cd-wish-status { inset-block-end: 24px; }
}

/* ==========================================================================
   Shipping — the Express policy note
   ==========================================================================

   One note under one shipping choice. It sits outside the rate's own label on
   purpose: a link inside the label would select the radio when clicked, and a
   customer reaching for the settlement list would silently change what they are
   buying.

   The link is a real 44px target even though it renders as inline text, because
   it is the only way to check whether your own town is covered before choosing.
   ========================================================================== */

.cd-ship-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 2px 0 8px;
  padding-inline-start: 26px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cd-color-ink-2, #6b6b78);
}

.cd-ship-note__text { overflow-wrap: anywhere; flex: 1 1 100%; }

.cd-ship-note__line { display: block; }

.cd-ship-note__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  color: var(--cd-color-pink-d, #c00068);
  font-weight: var(--cd-typography-strong-weight, 700);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.cd-ship-note__link:hover { color: var(--cd-color-pink, #e6007e); }

.cd-ship-note__link:focus-visible {
  outline: none;
  box-shadow: var(--cd-focus-ring, 0 0 0 3px #fff, 0 0 0 5.5px #c00068);
  border-radius: var(--cd-radius-sm, 11px);
}

@media (max-width: 899px) {
  .cd-ship-note { padding-inline-start: 0; }
}

/* ==========================================================================
   Checkout — the shipping component
   ==========================================================================

   One deliberate component rather than a dense technical list. Turquoise owns
   the grouping and the selected state; pink stays what it already is on this
   site — the colour of a link or an action, not of a container.

   Both colours come from the existing brand tokens. The turquoise here is the
   logo's own --cd-color-teal family, so nothing new was invented for it.

   The card is the target: the radio sits on the right in RTL, but the whole row
   is clickable and the selected state is carried by border, tint and a soft
   brand glow together, so it survives a colour-blind reading and a greyscale
   print alike. Borders are always present and only change colour, so selecting
   a card never shifts the layout.
   ========================================================================== */

.cd-ship-row > td { padding: 0; border: 0; }

/*
 * The review table is a two-column label/value grid. This component is not a
 * value, it is a control surface, so its row spans both columns.
 */
.cd-ship {
  --cd-ship-line: #9fe0da;
  --cd-ship-glow: 0 6px 22px rgba(0, 169, 157, .13);

  box-sizing: border-box;
  inline-size: 100%;
  padding: 18px 16px 16px;
  border: 1px solid var(--cd-ship-line);
  border-radius: var(--cd-radius-lg, 16px);
  background: var(--cd-color-card, #fff);
  box-shadow: var(--cd-ship-glow);
  text-align: right;
}

.cd-ship__heading {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  color: var(--cd-color-teal-aa, #00736b);
  font-family: var(--cd-typography-heading-family, "Heebo", sans-serif);
  font-size: 18px;
  font-weight: var(--cd-typography-heading-weight, 800);
  line-height: 1.3;
}

.cd-ship__heading-icon { display: inline-flex; }
.cd-ship__heading-icon .cd-icon { inline-size: 22px; block-size: 22px; }

/* ---------------------------------------------- the automatic free state */

.cd-ship__status {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 14px;
  padding: 11px 13px;
  border-radius: var(--cd-radius-sm, 11px);
  background: var(--cd-color-teal-l, #e0f6f4);
  color: var(--cd-color-teal-aa, #00736b);
  font-size: 14px;
  line-height: 1.5;
}

.cd-ship__status-title { font-weight: var(--cd-typography-strong-weight, 700); }

.cd-ship__status-note {
  font-size: 12.5px;
  font-weight: var(--cd-typography-body-weight, 400);
  opacity: .85;
}

/* ------------------------------------------------------------- the cards */

.cd-ship__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Rates that must exist for WooCommerce but must not be offered as a choice:
 * the free rate, and the four real pickup rates behind the branch selector.
 * Taken out of the flow rather than removed, so serialization is untouched.
 */
.cd-ship__native {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cd-ship-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 14px 12px;
  border: 1.5px solid var(--cd-color-line-2, #e2e2ec);
  border-radius: var(--cd-radius-lg, 16px);
  background: var(--cd-color-card, #fff);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.cd-ship-card:hover { border-color: var(--cd-ship-line); }

.cd-ship-card.is-selected {
  border-color: var(--cd-color-teal, #00a99d);
  background: var(--cd-color-teal-xl, #f0fbfa);
  box-shadow: 0 0 0 3px rgba(0, 169, 157, .12);
}

.cd-ship-card__control {
  display: flex;
  align-items: center;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding-block-start: 2px;
}

.cd-ship-card__control input[type="radio"] {
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  accent-color: var(--cd-color-pink, #e6007e);
  cursor: pointer;
}

.cd-ship-card__control input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: var(--cd-focus-ring, 0 0 0 3px #fff, 0 0 0 5.5px #c00068);
  border-radius: 50%;
}

/* The pickup group's state marker. The four real radios are off-screen. */
.cd-ship-card__dot {
  inline-size: 20px;
  block-size: 20px;
  border: 2px solid var(--cd-color-ink-3, #9a9aa8);
  border-radius: 50%;
  background: #fff;
}

.cd-ship-card__dot.is-on {
  border-color: var(--cd-color-pink, #e6007e);
  box-shadow: inset 0 0 0 4px var(--cd-color-pink, #e6007e);
}

.cd-ship-card__body { flex: 1 1 auto; min-inline-size: 0; }

.cd-ship-card__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  color: var(--cd-color-teal-aa, #00736b);
  font-family: var(--cd-typography-heading-family, "Heebo", sans-serif);
  font-size: 16px;
  font-weight: var(--cd-typography-heading-weight, 800);
  line-height: 1.35;
  cursor: pointer;
}

.cd-ship-card__icon { display: inline-flex; flex: 0 0 auto; }
.cd-ship-card__icon .cd-icon { inline-size: 20px; block-size: 20px; }
.cd-ship-card__title { overflow-wrap: anywhere; }

.cd-ship-card__price {
  margin: 0;
  color: var(--cd-color-teal-aa, #00736b);
  font-size: 16px;
  font-weight: var(--cd-typography-strong-weight, 700);
  line-height: 1.4;
}

.cd-ship-card__price .woocommerce-Price-amount { color: inherit; }

.cd-ship-card__meta {
  margin: 2px 0 0;
  color: var(--cd-color-ink-2, #6b6b78);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* --------------------------------------------- express eligibility state */

/*
 * Shown only while Express is the selected method. Two moods: a neutral
 * pending note while the address is still being typed, and a real error once
 * the customer has named a town the carrier does not reach.
 *
 * The error does not remove the card and does not switch the selection. It says
 * what is wrong and what to do about it, and Checkout refuses to complete until
 * one of those two things happens.
 */

.cd-ship-state {
  margin: 8px 0 0;
  padding: 9px 11px;
  border-radius: var(--cd-radius-sm, 11px);
  font-size: 13.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.cd-ship-state--pending {
  border: 1px solid var(--cd-color-line-2, #e2e2ec);
  background: var(--cd-color-neutral-soft, #f1f1f6);
  color: var(--cd-color-ink-2, #6b6b78);
}

.cd-ship-state--ineligible,
.cd-ship-state--unconfigured {
  border: 1px solid var(--cd-color-pink, #e6007e);
  background: var(--cd-color-pink-l, #fde3f0);
  color: var(--cd-color-pink-d, #c00068);
  font-weight: var(--cd-typography-strong-weight, 700);
}

/* The card itself takes the error border, so the state is legible at a glance. */
.cd-ship-card.is-invalid {
  border-color: var(--cd-color-pink, #e6007e);
  background: var(--cd-color-pink-xl, #fdf1f7);
  box-shadow: 0 0 0 3px rgba(230, 0, 126, .10);
}

/* ------------------------------------------------------- branch selector */

.cd-ship-branch {
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  margin-block-start: 10px;
  padding: 10px 12px;
  border: 1px solid var(--cd-color-line-2, #e2e2ec);
  border-radius: var(--cd-radius-sm, 11px);
  background: var(--cd-color-card, #fff);
  color: var(--cd-color-ink, #3a3a46);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  text-align: right;
  cursor: pointer;
}

.cd-ship-branch:focus-visible {
  outline: none;
  border-color: var(--cd-color-teal, #00a99d);
  box-shadow: var(--cd-focus-ring, 0 0 0 3px #fff, 0 0 0 5.5px #c00068);
}

/* ----------------------------------------------------- near-free nudge */

.cd-ship__nudge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px dashed var(--cd-color-pink, #e6007e);
  border-radius: var(--cd-radius-sm, 11px);
  background: var(--cd-color-pink-xl, #fdf1f7);
  color: var(--cd-color-pink-d, #c00068);
  font-size: 14px;
  font-weight: var(--cd-typography-strong-weight, 700);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.cd-ship__nudge-icon { display: inline-flex; flex: 0 0 auto; }
.cd-ship__nudge-icon .cd-icon { inline-size: 20px; block-size: 20px; }
.cd-ship__nudge-text { min-inline-size: 0; overflow-wrap: anywhere; }
.cd-ship__nudge .woocommerce-Price-amount { color: inherit; white-space: nowrap; }

/* ------------------------------------------- free-shipping progress bar */

.cd-fsbar__track {
  display: block;
  block-size: 8px;
  margin-block-start: 8px;
  border-radius: 999px;
  background: var(--cd-color-pink-l, #fde3f0);
  overflow: hidden;
}
.cd-fsbar__fill {
  display: block;
  block-size: 100%;
  border-radius: 999px;
  background: var(--cd-color-pink, #e6007e);
}
.cd-ship__nudge + .cd-fsbar__track { margin-block-start: 6px; }

.cd-fsbar {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--cd-color-pink-l, #fde3f0);
  border-radius: var(--cd-radius-sm, 11px);
  background: var(--cd-color-pink-xl, #fdf1f7);
  color: var(--cd-color-pink-d, #c00068);
  font-size: 14px;
  font-weight: var(--cd-typography-strong-weight, 700);
  line-height: 1.45;
}
.cd-fsbar__text { display: flex; align-items: center; gap: 8px; margin: 0; }
.cd-fsbar__icon { display: inline-flex; flex: 0 0 auto; }
.cd-fsbar__icon .cd-icon { inline-size: 20px; block-size: 20px; }
.cd-fsbar .woocommerce-Price-amount { color: inherit; white-space: nowrap; }
.cd-fsbar--met {
  border-color: #a8dcd2;
  background: #e8f6f3;
  color: #00574e;
}
.cd-fsbar--met .cd-fsbar__track { background: #cfe9e4; }
.cd-fsbar--met .cd-fsbar__fill { background: #007a6e; }

/* --------------------------------------------------- logistics notice */

.cd-ship-notice-row > td { padding: 0; border: 0; }

.cd-ship-notice {
  margin: 14px 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--cd-color-pink-l, #fde3f0);
  border-radius: var(--cd-radius-lg, 16px);
  background: var(--cd-color-pink-xl, #fdf1f7);
  text-align: right;
}

.cd-ship-notice__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--cd-color-ink, #3a3a46);
  font-family: var(--cd-typography-heading-family, "Heebo", sans-serif);
  font-size: 16px;
  font-weight: var(--cd-typography-heading-weight, 800);
  line-height: 1.3;
}

.cd-ship-notice__mark { display: inline-flex; color: var(--cd-color-pink, #e6007e); }
.cd-ship-notice__mark .cd-icon { inline-size: 20px; block-size: 20px; }

.cd-ship-notice__body {
  margin: 0;
  color: var(--cd-color-ink-2, #6b6b78);
  font-size: 14px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- coupon */

.woocommerce-checkout .checkout_coupon.cd-coupon {
  display: block !important;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--cd-color-line, #ececf2);
  border-radius: var(--cd-radius-lg, 16px);
  background: var(--cd-color-card, #fff);
  text-align: right;
}

.cd-coupon__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--cd-color-ink, #3a3a46);
  font-family: var(--cd-typography-heading-family, "Heebo", sans-serif);
  font-size: 16px;
  font-weight: var(--cd-typography-heading-weight, 800);
  line-height: 1.3;
}

.cd-coupon__title .cd-icon { inline-size: 20px; block-size: 20px; color: var(--cd-color-pink, #e6007e); }

.cd-coupon__row { display: flex; flex-wrap: wrap; gap: 10px; }

/*
 * WooCommerce ships .woocommerce button.button with its own background, which
 * outranks a two-class selector. Matched on specificity rather than beaten with
 * !important, so a later rule can still win the ordinary way.
 */
.woocommerce-checkout .cd-coupon .cd-coupon__row input.input-text {
  flex: 1 1 200px;
  min-inline-size: 0;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding: 10px 12px;
  border: 1px solid var(--cd-color-line-2, #e2e2ec);
  border-radius: var(--cd-radius-sm, 11px);
  font-family: inherit;
  font-size: 15px;
  text-align: right;
}

.woocommerce-checkout .cd-coupon .cd-coupon__row button.button {
  flex: 0 0 auto;
  min-block-size: var(--cd-spacing-tap-min, 44px);
  padding-inline: 22px;
  border: 0;
  border-radius: var(--cd-radius-sm, 11px);
  background: var(--cd-color-pink, #e6007e);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--cd-typography-strong-weight, 700);
  cursor: pointer;
}

.woocommerce-checkout .cd-coupon .cd-coupon__row button.button:hover { background: var(--cd-color-pink-d, #c00068); }

.woocommerce-checkout .cd-coupon .cd-coupon__row button.button:focus-visible {
  outline: none;
  box-shadow: var(--cd-focus-ring, 0 0 0 3px #fff, 0 0 0 5.5px #c00068);
}

@media (max-width: 899px) {
  .cd-ship { padding: 15px 13px 13px; }
  .cd-ship-card { padding: 12px; gap: 10px; }
  .cd-ship-card__head { font-size: 15px; }
  .cd-ship__nudge { font-size: 13.5px; }
  .woocommerce-checkout .cd-coupon .cd-coupon__row button.button { flex: 1 1 100%; }
}

/* ==========================================================================
   Checkout — address autocomplete (city / street)

   The combobox borrows the shipping component's vocabulary rather than
   inventing one: turquoise means "confirmed official value", pink means
   "an action, or something that needs you". A customer who has already used
   the shipping cards has learned this palette.

   The list is bounded and scrolls internally at every width. A long street
   result set must not push the rest of Checkout off the screen, which is the
   failure mode that makes autocomplete feel hostile on a phone.
   ========================================================================== */

.cd-addr {
	position: relative;
}

.cd-addr__list {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + 6px);
	z-index: 30;
	background: #fff;
	border: 1.25px solid var(--cd-color-line, #e2e2ec);
	border-radius: var(--cd-radius-sm, 11px);
	box-shadow: 0 10px 28px rgba(24, 24, 40, .14);
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Bounded on desktop, and never more than a third of a phone screen. */
	max-height: min(268px, 34vh);
}

.cd-addr__opt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1px;
	min-height: var(--cd-spacing-tap-min, 44px);
	padding: 8px 12px;
	border-bottom: 1px solid #f1f1f6;
	cursor: pointer;
}

.cd-addr__opt:last-child {
	border-bottom: 0;
}

.cd-addr__opt[aria-selected="true"],
.cd-addr__opt:hover {
	background: var(--cd-color-pink-xl, #fdf1f7);
	box-shadow: inset 3px 0 0 var(--cd-color-pink, #e6007e);
}

.cd-addr__name {
	font-size: 14.5px;
	line-height: 1.35;
}

.cd-addr__alias {
	font-size: 12px;
	color: var(--cd-color-teal-aa, #00736b);
}

.cd-addr__state {
	margin: 0;
	padding: 14px 12px;
	font-size: 13.5px;
	color: #6b6b7b;
}

.cd-addr__state--error {
	color: var(--cd-color-pink-d, #c00068);
	background: var(--cd-color-pink-xl, #fdf1f7);
}

/* A field holding a confirmed official value. */
.cd-addr input.is-chosen {
	background: var(--cd-color-teal-xl, #f0fbfa);
	border-color: var(--cd-color-teal, #00a99d);
	font-weight: 500;
}

.cd-addr input.is-manual {
	background: var(--cd-color-pink-xl, #fdf1f7);
	border-color: var(--cd-color-pink, #e6007e);
}

/*
 * A disabled address field has to LOOK unavailable, not merely be unavailable.
 *
 * `.cd-addr input:disabled` alone loses to WooCommerce's own
 * `.woocommerce form .form-row input.input-text`, so the street rendered
 * identically to the field above it — white, black text, inviting a customer to
 * type into something the browser would refuse. Matching Woo's specificity is
 * the fix; an `!important` would have been the shortcut.
 */
.woocommerce-checkout .cd-addr input.input-text:disabled,
.woocommerce-checkout .cd-addr input:disabled {
	background: #f2f2f7;
	border-color: #d6d6e0;
	color: #9a9aa8;
	cursor: not-allowed;
}

.woocommerce-checkout .cd-addr input:disabled::placeholder {
	color: #9a9aa8;
}

.cd-addr__chosen {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--cd-color-teal-aa, #00736b);
}

.cd-addr__chosen::before {
	content: "✓";
	margin-inline-end: 6px;
	font-weight: 700;
	color: var(--cd-color-teal-d, #008a80);
}

/* The manual-street route stays secondary until it is chosen. */
.cd-addr__manual-link,
.cd-addr__manual-back {
	display: inline-flex;
	align-items: center;
	min-height: var(--cd-spacing-tap-min, 44px);
	font-size: 13px;
	color: var(--cd-color-pink-d, #c00068);
	text-decoration: underline;
}

.cd-addr__manual-link:focus-visible,
.cd-addr__manual-back:focus-visible {
	outline: none;
	box-shadow: var(--cd-focus-ring, 0 0 0 3px #fff, 0 0 0 5.5px #c00068);
	border-radius: 4px;
}

.cd-addr-house-row input {
	max-width: 140px;
}

@media (max-width: 520px) {
	.cd-addr-house-row input {
		max-width: 120px;
	}
}

/* ===============================================================
 * TASK-0034 — M7-G pre-close QA repairs (user correction addendum, 2026-09-22)
 * Bounded, theme-owned visual corrections. No business-data change.
 * =============================================================== */

/* C5 — header search: the global :focus-visible pink ring (line ~81) fired on the
 * search input on click, drawing a redundant pink box over a field whose own focus
 * affordance is the container's `.cd-search:focus-within` teal border. Suppress the
 * inner ring; the accessible focus state stays on the container. */
.cd-search__input:focus-visible {
  box-shadow: none;
  border-radius: 0;
}

/* C2 — YITH "איסוף עצמי בלבד" (and any YITH badge): the plugin glues a hard-cornered
 * block to top/right of the media. Float it a little inside the right edge, rounded,
 * with a soft shadow — same badge data, refined presentation only. Card + PDP. */
.yith-wcbm-badge {
  /* RTL storefront: badge stays on the physical right edge (as YITH shipped it); physical top/right, not logical inline props (inline-end = left in RTL). */
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(60, 30, 70, .20) !important;
  padding-block: 4px !important;
  padding-inline: 12px !important;
  line-height: 1.25 !important;
  z-index: 6 !important;
}
.cd-card__media .yith-wcbm-badge {
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  font-size: 11.5px !important;
  padding-block: 3px !important;
  padding-inline: 10px !important;
}

/* C7 (2026-09-22) — on badged products YITH wraps the card image in
 * div.container-image-and-badge (block, full width, text-align:start), which in RTL
 * pushed the image off-centre while un-badged cards stay centred by .cd-card__medialink.
 * Centre the image inside that wrapper so badged and un-badged cards match. */
.cd-card__media .container-image-and-badge {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* C4 (revised 2026-09-22, user-approved) — category subcategory pills.
 * The first pass made every category a single horizontal scroll row, which hid the
 * overflow pills off-screen with no affordance. This replaces it with an adaptive
 * two-row wrap: few pills stay on one row with no control at all; many pills cap at
 * two rows and the remainder collapse behind an inline "+N" toggle that occupies a
 * single pill slot at the tail of row two (never a whole wasted row). The behaviour
 * is a pure enhancement driven by theme.js — with scripting off, every pill simply
 * wraps and stays reachable. */
.cd-plp__subcats .cd-chiplist {
  flex-wrap: wrap;
  align-items: center;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}
/* Overflow pills the layout collapses when capped to two rows. */
.cd-plp__subcats .cd-chiplist > li.is-cd-hidden { display: none; }
/* The injected toggle reads as a control, not a category: a dashed pink pill that
 * matches the pill geometry exactly so it sits inline without disturbing the grid. */
.cd-plp__subcats .cd-chip--more {
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  color: var(--cd-color-pink-d, #c00068);
  background: var(--cd-color-pink-xl, #fdf1f7);
  border-style: dashed;
  border-color: var(--cd-color-pink-d, #c00068);
  font-weight: 700;
}
.cd-plp__subcats .cd-chip--more:hover {
  background: var(--cd-color-pink-xl, #fdf1f7);
  filter: brightness(.97);
}
.cd-plp__subcats .cd-chip--more .cd-chip__chev {
  font-size: 10px;
  margin-inline-start: 1px;
}

/* ===================================================== fixed header buttons + seasonal page (0.30.12) */

/*
 * Two buttons stand before the rail and do not scroll with it: the permanent
 * "all categories" link and, when a published seasonal page is active, its button.
 * They keep their size; only the track scrolls, so the page never overflows
 * sideways. With no seasonal button the container holds one item and the track
 * takes the freed width.
 */
.cd-nav__inner { min-inline-size: 0; }
.cd-nav__fixed { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.cd-nav__fixedlink {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 38px; padding: 0 16px;
  border: 1px solid var(--cd-color-line-2, #e2e2ec); border-radius: 999px;
  font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; text-decoration: none;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.cd-nav__fixedlink--all { background: var(--cd-color-card, #fff); color: var(--cd-color-ink, #3a3a46); border-color: rgba(0, 169, 157, .40); }
.cd-nav__fixedlink:hover { box-shadow: 0 3px 12px rgba(60, 30, 70, .16); transform: translateY(-1px); }
.cd-nav__fixedlink:focus-visible { box-shadow: var(--cd-focus-ring, 0 0 0 3px #fff, 0 0 0 5.5px #c00068); outline: none; }
@media (max-width: 899px) {
  .cd-nav__inner { gap: 7px; }
  .cd-nav__fixed { gap: 6px; }
  .cd-nav__fixedlink { min-block-size: var(--cd-spacing-tap-min, 44px); padding: 0 11px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .cd-nav__fixedlink { transition: none; } .cd-nav__fixedlink:hover { transform: none; } }

.cd-season__hero { position: relative; margin-block: 8px 14px; border-radius: 16px; overflow: hidden; background: linear-gradient(115deg, #fdf3f8, #fff8ec); }
.cd-season__banner, .cd-season__img { display: block; inline-size: 100%; block-size: auto; }
/* A banner of any proportion never pushes the products below the fold. */
.cd-season__img { max-block-size: clamp(190px, 27vw, 360px); object-fit: cover; object-position: center; }
.cd-season__title { margin: 0; padding: 18px 22px; font-size: clamp(24px, 3.2vw, 38px); line-height: 1.2; font-weight: 800; color: var(--cd-color-ink, #3a3a46); }
.cd-season__hero.has-banner .cd-season__title { position: absolute; inset-inline: 0; inset-block-end: 0; background: linear-gradient(to top, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0)); padding-block-start: 38px; }
.cd-season__topics { margin-block: 6px 14px; }
.cd-season__empty { text-align: center; padding: 36px 12px; color: var(--cd-color-ink-2, #6b6b78); }
.cd-season__pager ul { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 22px 0; padding: 0; list-style: none; }
.cd-season__pager .page-numbers { display: inline-flex; min-inline-size: 38px; min-block-size: 38px; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid var(--cd-color-line-2, #e2e2ec); border-radius: 999px; text-decoration: none; color: inherit; }
.cd-season__pager .page-numbers.current { background: var(--cd-color-pink, #e6007e); border-color: var(--cd-color-pink, #e6007e); color: #fff; }

/* ---- Product reviews, back-in-stock, 0.30.18 ---- */
.cd-reviews { margin-block: 32px; }
.cd-reviews__title { margin: 0 0 16px; font-size: 22px; font-weight: 800; }
.cd-reviews__summary { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; padding: 16px; border: 1px solid var(--cd-color-line, #e6e2ea); border-radius: 16px; background: #fff; }
.cd-reviews__score { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 140px; }
.cd-reviews__avg { font-size: 40px; font-weight: 800; line-height: 1; }
.cd-reviews__count { font-size: 14px; color: var(--cd-color-ink-2, #6b6b78); }
.cd-reviews__bars { list-style: none; margin: 0; padding: 0; flex: 1 1 240px; display: grid; gap: 6px; }
.cd-reviews__bars li { display: grid; grid-template-columns: 34px 1fr 36px; align-items: center; gap: 8px; font-size: 13px; }
.cd-reviews__bar { display: block; height: 8px; border-radius: 99px; background: #eee9f2; overflow: hidden; }
.cd-reviews__bar > span { display: block; height: 100%; background: var(--cd-color-pink-d, #c00068); }
.cd-reviews__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.cd-review { padding: 14px 16px; border: 1px solid var(--cd-color-line, #e6e2ea); border-radius: 14px; background: #fff; }
.cd-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; }
.cd-review__author { font-weight: 800; }
.cd-review__verified { color: #0a7a3b; font-weight: 700; }
.cd-review__date { margin-inline-start: auto; color: var(--cd-color-ink-2, #6b6b78); }
.cd-review__text { margin-top: 8px; font-size: 15px; line-height: 1.6; }
.cd-review__text p { margin: 0 0 6px; }
.cd-reviews__more { margin-top: 12px; }
.cd-reviews__more > summary { display: inline-flex; cursor: pointer; list-style: none; }
.cd-reviews__more > summary::-webkit-details-marker { display: none; }
.cd-bis { margin-block: 12px; }
.cd-bis__text { margin: 0 0 8px; font-weight: 700; }
@media (max-width: 640px) { .cd-reviews__summary { padding: 12px; } .cd-reviews__more > summary { min-height: 44px; align-items: center; } }

/* ---- Mini-cart remove control, 0.30.24 ---- */
.cd-minicart__remove { cursor: pointer; text-decoration: none; color: inherit; }
.cd-minicart__remove:focus-visible { outline: 3px solid var(--cd-color-focus, #00aca6); outline-offset: 2px; border-radius: 12px; }
.cd-minicart__remove[aria-busy="true"] { opacity: .5; pointer-events: none; }

/* ---- Rail fills the row; "more" link stands apart, 0.30.24 ---- */
.cd-nav__list { justify-content: space-between; }
.cd-mega__list a.cd-mega__more,
.cd-mega__sublist a.cd-mega__more {
  margin-block-start: 6px;
  color: var(--cd-color-pink-d, #c00068);
  font-weight: 800;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding-inline: 12px;
  inline-size: fit-content;
}
.cd-mega__list a.cd-mega__more:hover,
.cd-mega__sublist a.cd-mega__more:hover { background: var(--cd-color-pink-xl, #fdf1f7); }

/* ---- Cart page: products total only, quantity box, guidance, 0.30.24 ---- */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector { inline-size: auto; min-inline-size: 0; flex-wrap: nowrap; }
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button { flex: 0 0 auto; }
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item { display: none; }
.wp-block-woocommerce-cart .wc-block-components-totals-item__label,
.wp-block-woocommerce-cart .wc-block-components-totals-item__value { font-weight: 800; font-size: 18px; }
.cd-cart-note { margin-block: 10px 0; font-size: 13px; line-height: 1.5; color: var(--cd-color-ink-2, #6b6b78); }
.cd-cart-min { margin-block: 0 10px; padding: 10px 12px; border: 1px solid #f1b9d6; border-radius: 12px; background: var(--cd-color-pink-xl, #fdf1f7); color: var(--cd-color-pink-d, #c00068); font-size: 14px; font-weight: 700; line-height: 1.5; }
.cd-cart-min[hidden] { display: none; }
.wp-block-woocommerce-cart .wc-block-cart__submit-button.cd-is-disabled { opacity: .45; cursor: not-allowed; pointer-events: auto; }
.wp-block-woocommerce-cart .wc-block-components-product-metadata,
.wp-block-woocommerce-cart .wc-block-components-product-details { min-inline-size: 0; overflow-wrap: anywhere; }

/* ---- Checkout note to guests, 0.30.24 ---- */
.cd-reg-note { display: flex; align-items: flex-start; gap: 10px; margin-block: 14px; padding: 10px 12px; border: 1px solid var(--cd-color-line, #ececf2); border-radius: 12px; background: var(--cd-color-neutral-soft, #f6f6fa); font-size: 13.5px; line-height: 1.5; }
.cd-reg-note[hidden] { display: none; }
.cd-reg-note__text { margin: 0; flex: 1 1 auto; }
.cd-reg-note__text a { color: var(--cd-color-pink-d, #c00068); font-weight: 700; }
.cd-reg-note__close { flex: 0 0 auto; min-inline-size: 44px; min-block-size: 44px; margin-block: -10px; margin-inline: -12px 0; border: 0; background: transparent; font-size: 20px; cursor: pointer; color: inherit; }
.wp-block-woocommerce-cart .wc-block-components-totals-shipping { display: none; }
.cd-cart-net { display: flex; justify-content: space-between; align-items: baseline; margin-block: 0 10px; padding-block: 10px; border-block-start: 1px solid var(--cd-color-line, #ececf2); font-size: 18px; font-weight: 800; }
.cd-cart-net[hidden] { display: none; }

/* ---- Checkout field instruction, 0.30.24 ---- */
.cd-field-hint { display: inline; font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--cd-color-ink-2, #6b6b78); }