/* ============================================================================
   PrestaChamps — "Champion" design system on hummingbird
   Loaded by core FrontController at priority 1000 (after theme.css).
   D1 = skin (white page / cream surfaces / ink / magenta, Poppins +
   Fraunces — WP14 flipped the ground: the page is white and the cards,
   bars and panels carry the cream that used to be the page) · D2 = dark ·
   D3 = header / filter / product-image logic.
   Docs: docs/01-DESIGN-SYSTEM.md — every custom class is prefixed .pc-
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Fraunces:ital,opsz,wght@1,9..144,400;1,9..144,500;1,9..144,600&display=swap');

/* ─────────────────────────── 0 · tokens ─────────────────────────── */
:root{
  --pc-ink:        #23204F;
  --pc-ink-2:      #262F5A;
  --pc-night:      #1B1839;
  --pc-magenta:    #E80D6E;
  --pc-magenta-dk: #C2005B;
  --pc-pink:       #F55F8D;
  --pc-blush:      #FBE9F1;
  --pc-lilac:      #EEECF7;
  --pc-cream:      #FAF7F0;
  --pc-sand:       #F3EEE3;
  --pc-mist:       #F4F5FA;  /* cool neutral — chrome that must not read beige */
  --pc-paper:      #FFFFFF;
  --pc-gold:       #F0B429;
  --pc-green:      #12805C;
  --pc-muted:      #6A6786;
  --pc-line:       rgba(35,32,79,.14);
  --pc-line-soft:  rgba(35,32,79,.08);

  --pc-r:     18px;
  --pc-r-tag: 18px 18px 18px 5px;
  --pc-r-sm:  10px 10px 10px 3px;

  --pc-shadow-card: 0 1px 2px rgba(35,32,79,.06), 0 12px 32px -18px rgba(35,32,79,.28);
  --pc-shadow-pop:  0 2px 6px rgba(35,32,79,.08), 0 24px 48px -20px rgba(35,32,79,.35);

  --pc-font: "Poppins", "Segoe UI", -apple-system, sans-serif;
  --pc-font-accent: "Fraunces", Georgia, serif;

  /* pastel tile rotation for product art (D3) */
  --pc-tile-1: #FBE3EC;
  --pc-tile-2: #E4F0E8;
  --pc-tile-3: #E3EDF8;
  --pc-tile-4: #F4E8D8;
  --pc-tile-5: #EFE7F6;
  --pc-tile-6: #FCEADC;

  /* Bootstrap 5.3 bridge — repaints everything that reads bs vars */
  --bs-primary: #E80D6E;
  --bs-primary-rgb: 232,13,110;
  --bs-secondary: #23204F;
  --bs-secondary-rgb: 35,32,79;
  --bs-body-bg: #FFFFFF;
  --bs-body-color: #23204F;
  --bs-body-font-family: var(--pc-font);
  --bs-link-color: #23204F;
  --bs-link-color-rgb: 35,32,79;
  --bs-link-hover-color: #E80D6E;
  --bs-link-hover-color-rgb: 232,13,110;
  --bs-border-color: rgba(35,32,79,.14);
  --bs-border-radius: 12px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 18px;
}

/* ─────────────────────────── 1 · base ─────────────────────────── */
body{
  font-family: var(--pc-font);
  background: var(--pc-paper);
  color: var(--pc-ink);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,.h1,.h2,.h3{
  font-family: var(--pc-font);
  color: var(--pc-ink);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}
/* accent italic word inside a headline */
.pc-ser{ font-family: var(--pc-font-accent); font-style: italic; font-weight: 500; letter-spacing: -.01em; }
.pc-mono{ font-family: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; }

a{ text-decoration: none; }
a:hover{ color: var(--pc-magenta); }

::selection{ background: var(--pc-magenta); color: #fff; }

/* primary buttons — kite corner, magenta */
.btn-primary, .btn-secondary{
  --bs-btn-bg: var(--pc-magenta);
  --bs-btn-border-color: var(--pc-magenta);
  --bs-btn-hover-bg: var(--pc-magenta-dk);
  --bs-btn-hover-border-color: var(--pc-magenta-dk);
  --bs-btn-active-bg: var(--pc-magenta-dk);
  --bs-btn-active-border-color: var(--pc-magenta-dk);
  --bs-btn-disabled-bg: #e8a9c6;
  --bs-btn-disabled-border-color: #e8a9c6;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
  --bs-btn-font-weight: 600;
  border-radius: var(--pc-r-tag);
  box-shadow: 0 10px 22px -12px rgba(232,13,110,.55);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn-primary:hover, .btn-secondary:hover{ transform: translateY(-1px); }
.btn-secondary{
  --bs-btn-bg: var(--pc-ink);
  --bs-btn-border-color: var(--pc-ink);
  --bs-btn-hover-bg: var(--pc-night);
  --bs-btn-hover-border-color: var(--pc-night);
  --bs-btn-active-bg: var(--pc-night);
  --bs-btn-active-border-color: var(--pc-night);
  box-shadow: none;
}
.btn-outline-primary{
  --bs-btn-color: var(--pc-ink);
  --bs-btn-border-color: var(--pc-ink);
  --bs-btn-hover-bg: var(--pc-ink);
  --bs-btn-hover-border-color: var(--pc-ink);
  --bs-btn-hover-color: var(--pc-cream);
  border-radius: var(--pc-r-tag);
}
.btn.disabled, .btn:disabled{ transform: none; }
/* the global a:hover magenta must never repaint a .btn label — bootstrap's
   own hover/active colors live in a cascade layer, which unlayered a:hover
   beats regardless of specificity (pink text on the pink checkout CTAs) */
a.btn:hover, a.btn:focus, .btn:hover{ color: var(--bs-btn-hover-color); }
a.btn:active, .btn:active, .btn.active, .btn.show{ color: var(--bs-btn-active-color); }

/* form controls */
.form-control, .form-select{
  border-color: var(--pc-line);
  border-radius: 12px;
  color: var(--pc-ink);
}
.form-control:focus, .form-select:focus{
  border-color: var(--pc-magenta);
  box-shadow: 0 0 0 .25rem rgba(232,13,110,.12);
}
.form-control{ padding: 9px 14px; }
.form-label{ font-weight: 600; font-size: 13.5px; color: var(--pc-ink); margin-bottom: 6px; }
.form-text{ font-size: 12px; color: var(--pc-muted); }
.form-check-input:checked{ background-color: var(--pc-magenta); border-color: var(--pc-magenta); }
.form-check-input:focus{ border-color: var(--pc-magenta); box-shadow: 0 0 0 .25rem rgba(232,13,110,.12); }

/* password field — one seamless pill: the visibility toggle sits INSIDE the
   field as a quiet icon square, not as a detached primary button */
.input-group.password-field{
  flex-wrap: nowrap; align-items: stretch;
  /* body-bg, not #fff: sibling .form-control fields read --bs-body-bg, and the
     password pill must match them inside the white checkout card */
  background: var(--bs-body-bg); border: 1px solid var(--pc-line); border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input-group.password-field:focus-within{
  border-color: var(--pc-magenta);
  box-shadow: 0 0 0 .25rem rgba(232,13,110,.12);
}
.input-group.password-field > .form-control{
  border: 0 !important; box-shadow: none !important; background: transparent;
  border-radius: 12px 0 0 12px;
}
.input-group.password-field > .btn{
  flex: none; width: 46px; margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; box-shadow: none;
  color: var(--pc-muted); border-radius: 0 11px 11px 0;
}
.input-group.password-field > .btn:hover,
.input-group.password-field > .btn:focus{ background: var(--pc-lilac); color: var(--pc-ink); transform: none; }
.input-group.password-field > .btn .material-icons{ font-size: 20px; }
/* password strength meter under the field */
.progress{ height: 6px; border-radius: 99px; background-color: var(--pc-sand); }
.password-requirements{ font-size: 12.5px; color: var(--pc-muted); }

/* modals (add-to-cart confirmation etc.) */
.modal-content{ border: 1px solid var(--pc-line-soft); border-radius: var(--pc-r); box-shadow: var(--pc-shadow-pop); }
.modal-header{ border-bottom-color: var(--pc-line-soft); }
.modal-footer{ border-top-color: var(--pc-line-soft); }
.blockcart-modal__title{ display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 0; }
.blockcart-modal__title-icon{ color: var(--pc-green); }

/* badges / flags */
.badge.bg-primary, .product-flag{ background: var(--pc-magenta) !important; border-radius: 7px; font-weight: 600; }

/* breadcrumb */
.breadcrumb{ --bs-breadcrumb-divider-color: var(--pc-muted); font-size: 13px; }
.breadcrumb .breadcrumb-item a{ color: var(--pc-muted); }
.breadcrumb .breadcrumb-item.active{ color: var(--pc-ink); font-weight: 600; }

/* shared shell (own container, independent of bootstrap widths) */
.pc-shell{ max-width: 1240px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 576px){ .pc-shell{ padding: 0 18px; } }

/* section kicker — "— 01 · CATALOGUE" (D1) */
.pc-kick{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--pc-magenta);
}
.pc-kick::before{ content: ""; width: 26px; height: 2px; background: var(--pc-magenta); }

/* generic inline svg icon */
.pc-ic{ width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7;
        stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pc-ic--s{ width: 15px; height: 15px; }

/* ─────────────────────────── 2 · promo bar (D3 logic · D1 skin) ─────────────────────────── */
.pc-promo{
  background: var(--pc-ink);
  color: rgba(255,255,255,.85);
  font-size: 12.5px;
  position: relative; z-index: 5;
}
/* the header rows need more room than the 1240px editorial measure —
   FR/ES strings run long — so all three header rows use a wider shell */
.pc-promo .pc-shell,
.pc-head .pc-shell{ max-width: 1400px; }
.pc-promo .pc-shell{
  display: flex; align-items: center; gap: 16px;
  min-height: 40px; padding-top: 4px; padding-bottom: 4px;
}
.pc-promo__brand{ display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: #fff; white-space: nowrap; }
.pc-promo__brand .pc-dot{ color: var(--pc-gold); }
.pc-promo__sale{
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  white-space: nowrap; margin: 0 auto;
}
.pc-promo__sale b{ color: var(--pc-gold); font-weight: 700; }
.pc-promo__sale > a{
  color: #fff; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.pc-promo__sale > a:hover{ color: var(--pc-gold); }
.pc-cd{ display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: #fff; }
.pc-cd i{
  font-style: normal; font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.13);
  border-radius: 6px; padding: 2px 7px; min-width: 27px; text-align: center;
}
.pc-promo__tools{ display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
/* banner disabled (pcpromobar): the sale zone's auto margins are gone, so the
   tools take their own — only when they directly follow the brand line */
.pc-promo__brand + .pc-promo__tools{ margin-left: auto; }
/* language + currency selects → quiet ghost pills on the dark bar */
.pc-promo__tools .form-select{
  appearance: none; -webkit-appearance: none;
  width: auto;
  background-color: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 99px;
  color: rgba(255,255,255,.92); font-size: 12px; font-weight: 600; line-height: 1.4;
  padding: 3px 26px 3px 12px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px;
  box-shadow: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.pc-promo__tools .form-select:hover{ background-color: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); }
.pc-promo__tools .form-select:focus{ outline: 0; border-color: rgba(255,255,255,.5); box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
/* native option list renders on white — keep it readable */
.pc-promo__tools .form-select option{ color: var(--pc-ink); background: #fff; }
/* mid-width squeeze: drop the decorative countdown digits first so the
   brand line + sale line + selectors share one row (they return ≥1400px) */
@media (min-width: 992px) and (max-width: 1399.98px){
  .pc-cd{ display: none; }
}
@media (max-width: 991.98px){
  .pc-promo__brand{ display: none; }
  /* pcpromobar disabled: no sale zone → the dark bar would sit empty; the
     partner line takes its place */
  .pc-promo:not(:has(.pc-promo__sale)) .pc-promo__brand{ display: inline-flex; }
  /* below the desktop range the sale zone may wrap again — centered rows
     beat the clipped nowrap overflow on narrow screens */
  .pc-promo__sale{ flex-wrap: wrap; white-space: normal; justify-content: center; row-gap: 2px; }
}
/* <768 the theme's responsive swap moves the lang/currency selects into the
   burger drawer (#_mobile_… placeholders in header.tpl) — hide the promo slot */
@media (max-width: 767.98px){
  .pc-promo__tools{ display: none; }
  /* phones + banner off: the brand line is the bar's only content — center
     it and let the long partner string wrap if it must */
  .pc-promo:not(:has(.pc-promo__sale)) .pc-promo__brand{
    margin: 0 auto; white-space: normal; text-align: center; justify-content: center;
  }
}
@media (max-width: 576px){
  .pc-promo .pc-shell{ justify-content: center; }
  /* phones: drop the countdown digits — sale text + link stay one clean row */
  .pc-cd{ display: none; }
}

/* ─────────────────────────── 3 · header (D3 two-row logic · D1 skin) ─────────────────────────── */
.header.js-sticky-header{
  position: sticky; top: 0; z-index: 1030;
  background: var(--pc-paper);
  box-shadow: none;
  transition: box-shadow .2s ease;
}
.header.pc-scrolled{ box-shadow: 0 6px 24px -14px rgba(35,32,79,.35); }
/* when sticky, the promo bar scrolls away: keep it out of the sticky box */
.header .pc-promo{ position: relative; }

.pc-head{ background: var(--pc-paper); border-bottom: 1px solid var(--pc-line-soft); }
.pc-head__row1{
  display: flex; align-items: center; gap: 26px;
  padding-top: 14px; padding-bottom: 14px;
}
.pc-head__logo{ flex: none; display: flex; align-items: center; }
.pc-head__logo img{ max-height: 46px; width: auto; display: block; }
.pc-head__logo .logo__link{ display: block; }
.pc-head__logo h1{ margin: 0; line-height: 0; }

/* — search pill (D3 scoped search, D1 sand fill + kite radius) — */
#_desktop_ps_searchbar{ flex: 1 1 auto; min-width: 0; margin: 0 !important; order: 1 !important; }
.pc-head__acts{ order: 2; }
.ps-searchbar{ position: relative; width: 100%; max-width: 440px; margin: 0 auto; }
.ps-searchbar__form{
  display: flex; align-items: center; gap: 0;
  background: var(--pc-sand);
  border: 1.5px solid var(--pc-line-soft);
  border-radius: var(--pc-r-tag);
  padding: 4px 5px 4px 0;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ps-searchbar__form:focus-within{
  background: #fff; border-color: var(--pc-magenta);
  box-shadow: 0 0 0 4px rgba(232,13,110,.10);
}
.ps-searchbar__magnifier{ display: none; }
.ps-searchbar__input.form-control{
  flex: 1 1 auto; min-width: 0;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  font-size: 14px; color: var(--pc-ink); padding: 8px 10px 8px 18px;
}
.ps-searchbar__input::placeholder{ color: var(--pc-muted); opacity: .85; }
.pc-search__go{
  flex: none; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pc-magenta); color: #fff;
  border: 0; border-radius: 50%;
  cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.pc-search__go:hover{ background: var(--pc-magenta-dk); transform: scale(1.04); }
.pc-search__go .material-icons{ font-size: 19px; }
/* stock theme absolutely-positions the clear button (right: 12px) — straight
   on top of the round magenta submit. Make it a normal flex item that sits
   just before the submit, and only show it while the pill is engaged: an X
   floating over the search icon on an idle header reads as a broken control. */
.ps-searchbar__clear.btn{
  /* transform:none too — the stock rule pairs top:50% with translateY(-50%),
     which keeps shifting the button up by half its height once it is static */
  position: static; transform: none; flex: none;
  width: 26px; height: 26px; min-width: 0; padding: 0; margin: 0 2px 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--pc-muted);
  transition: background .15s ease, color .15s ease;
}
.ps-searchbar__clear.btn:hover, .ps-searchbar__clear.btn:focus{
  background: var(--pc-blush); color: var(--pc-ink); box-shadow: none;
}
.ps-searchbar__clear .material-icons{ font-size: 17px; line-height: 1; }
.ps-searchbar__form:not(:focus-within) .ps-searchbar__clear{ display: none; }
/* autocomplete dropdown */
.ps-searchbar__dropdown{
  position: absolute; inset: calc(100% + 8px) 0 auto 0;
  background: #fff; border: 1px solid var(--pc-line-soft);
  border-radius: 14px; box-shadow: var(--pc-shadow-pop);
  overflow: hidden; z-index: 1040;
}
.ps-searchbar__result-link{ display: flex; align-items: center; gap: 12px; padding: 9px 14px; }
.ps-searchbar__result-link:hover{ background: var(--pc-blush); }
.ps-searchbar__result-image{ width: 40px; height: 40px; object-fit: cover; border-radius: 9px; background: var(--pc-sand); }
.ps-searchbar__result-name{ margin: 0; font-size: 13.5px; font-weight: 600; color: var(--pc-ink); }

/* — right action cluster: account · cart — */
.pc-head__acts{ flex: none; display: flex; align-items: center; gap: 6px; margin-left: auto; }
.pc-head__acts .header-block__action-btn{
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--pc-ink); font-weight: 600; font-size: 13px;
  padding: 8px 10px; border-radius: 12px;
  background: transparent; border: 0;
  transition: background .15s ease;
}
.pc-head__acts .header-block__action-btn:hover{ background: var(--pc-lilac); color: var(--pc-ink); }
.pc-head__acts .material-icons.header-block__icon{ font-size: 24px; color: var(--pc-ink); }
.pc-head__acts .header-block{ position: relative; }
.pc-head__acts .header-block__badge{
  position: absolute; top: 0; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pc-magenta); color: #fff;
  border-radius: 99px; font-size: 10.5px; font-weight: 700;
  border: 2px solid #fff;
}
/* two-line label (D3): small top line + bold bottom line */
.pc-hact__t{ display: none; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.pc-hact__t small{ font-size: 11px; font-weight: 500; color: var(--pc-muted); }
.pc-hact__t b{ font-size: 13px; font-weight: 700; color: var(--pc-ink); white-space: nowrap; }
@media (min-width: 1200px){ .pc-hact__t{ display: inline-flex; } }
/* cart pill */
.pc-head__acts .blockcart .header-block__action-btn{
  background: var(--pc-ink); color: #fff; border-radius: var(--pc-r-sm);
  padding: 9px 20px 9px 15px;
}
.pc-head__acts .blockcart .header-block__action-btn:hover{ background: var(--pc-night); color: #fff; }
.pc-head__acts .blockcart .material-icons.header-block__icon{ color: #fff; }
.pc-head__acts .blockcart .pc-hact__t small{ color: rgba(255,255,255,.65); }
.pc-head__acts .blockcart .pc-hact__t b{ color: #fff; }
.pc-head__acts .blockcart .header-block__badge{ border-color: var(--pc-ink); }
.pc-head__acts .header-block__title{ display: none !important; }

/* burger (mobile) */
.pc-burger{
  display: none; flex-direction: column; justify-content: center; gap: 4.5px;
  width: 42px; height: 42px; padding: 0 10px;
  background: transparent; border: 0; border-radius: 12px; cursor: pointer;
}
.pc-burger span{ display: block; height: 2px; border-radius: 2px; background: var(--pc-ink); transition: transform .2s ease, opacity .2s ease; }
.pc-burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.pc-burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.pc-burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

/* — row 2 · category nav + help chip (D3) — */
.pc-head__row2{ border-top: 1px solid var(--pc-line-soft); border-bottom: 1px solid var(--pc-line-soft); }
.pc-nav__wrap{ display: flex; align-items: stretch; gap: 14px; }
.pc-nav{ display: flex; align-items: stretch; gap: 2px; flex-wrap: wrap; }
.pc-nav > a{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 11px;
  font-size: 13.5px; font-weight: 600; color: var(--pc-ink);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
}
.pc-nav > a:hover{ color: var(--pc-magenta); border-bottom-color: var(--pc-magenta); }
.pc-nav__all{
  background: var(--pc-ink); color: #fff !important;
  border-radius: var(--pc-r-sm);
  /* center in the stretch row — fixed top/bottom margins sat the pill (and
     its text) ~4px lower than the plain links' text */
  align-self: center; margin: 0 10px 0 0;
  padding: 6px 15px !important; border-bottom: 0 !important;
}
.pc-nav__all:hover{ background: var(--pc-night); }
.pc-nav__all .material-icons{ font-size: 17px; }
.pc-nav__sale .pc-sale-chip{
  background: var(--pc-magenta); color: #fff;
  padding: 3px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 700;
}
.pc-nav__sale:hover{ border-bottom-color: transparent !important; }
.pc-help{
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 4px;
}
.pc-help__av{ width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--pc-sand); flex: none; box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(35,32,79,.18); }
.pc-help__av svg{ width: 100%; height: 100%; display: block; }
.pc-help__t{ display: flex; flex-direction: column; line-height: 1.3; }
.pc-help__t span{ font-size: 12px; font-weight: 700; color: var(--pc-ink); }
.pc-help__t b{ font-size: 11px; font-weight: 500; color: var(--pc-muted); white-space: nowrap; }
.pc-help:hover .pc-help__t span{ color: var(--pc-magenta); }

/* mid-width squeeze: keep the whole nav + help chip on one row in FR/ES */
@media (min-width: 992px) and (max-width: 1399.98px){
  .pc-nav > a{ padding: 12px 9px; font-size: 13px; }
  .pc-help__t b{ display: none; }
}

/* drawer chrome hidden on desktop */
.pc-drawer__top{ display: none; }

/* mobile behaviour: the nav row becomes a right-side DRAWER (a fixed
   overlay + sliding panel — it used to unfold in-flow and push the page) */
@media (max-width: 991.98px){
  .pc-head__row1{ gap: 12px; }
  .pc-burger{ display: inline-flex; margin-left: -10px; } /* first in row — icon aligns to the shell edge */
  .pc-head__row2{
    display: block; border-top: 0; border-bottom: 0;
    position: fixed; inset: 0; z-index: 1080;
    visibility: hidden; pointer-events: none;
    background: rgba(27,24,57,0);
    transition: background .28s ease, visibility 0s linear .28s;
  }
  .pc-head__row2.pc-open{
    visibility: visible; pointer-events: auto;
    background: rgba(27,24,57,.45);
    transition: background .28s ease;
  }
  .pc-nav__wrap{
    position: absolute; top: 0; left: 0; bottom: 0; /* burger moved left → drawer slides from the left too */
    width: min(320px, 86vw);
    display: flex; flex-direction: column; gap: 0;
    background: var(--pc-paper);
    border-radius: 0 16px 16px 0;
    box-shadow: 14px 0 44px rgba(35,32,79,.28);
    padding: 16px 18px 20px;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform .28s cubic-bezier(.22,.8,.36,1);
  }
  .pc-head__row2.pc-open .pc-nav__wrap{ transform: translateX(0); }
  body.pc-drawer-lock{ overflow: hidden; }

  .pc-drawer__top{
    display: flex; align-items: center; justify-content: space-between;
    padding: 2px 0 10px; margin-bottom: 4px;
    border-bottom: 1px solid var(--pc-line-soft);
  }
  .pc-drawer__title{
    font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--pc-magenta);
  }
  .pc-drawer__close{
    width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: var(--pc-cream); color: var(--pc-ink);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .pc-drawer__close:hover{ background: var(--pc-blush); color: var(--pc-magenta-dk); }

  .pc-nav{ flex-direction: column; gap: 0; padding: 8px 0 12px; }
  .pc-nav > a{ border-bottom: 0; margin: 0; padding: 11px 4px; font-size: 15px; }
  .pc-nav__all{ align-self: stretch; margin: 6px 0 8px; justify-content: center; }

  /* Dora help chip rides the drawer bottom (hidden elsewhere on mobile) */
  .pc-head__row2 .pc-help{
    display: inline-flex; margin: auto 0 0; padding-top: 16px;
    border-top: 1px solid var(--pc-line-soft);
  }
}
@media (max-width: 767.98px){
  .pc-head__logo img{ max-height: 38px; }
  .pc-head__row1{ padding-top: 10px; padding-bottom: 10px; }
  /* phones: the search trigger joins the account/cart cluster on the right —
     it takes the auto margin, the acts cluster gives its own up. The negative
     right margin eats the flex gap: the search glyph has no pill background,
     so without it the glyph-to-glyph distance reads far bigger than the rest
     of the cluster (user: "looks sooo far away") */
  .ps-searchbar--mobile{ order: 2; margin-left: auto; margin-right: -12px; }
  .pc-head__acts{ margin-left: 0; }
}
/* mobile search trigger styled like the other action buttons */
.ps-searchbar--mobile .header-block__action-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border-radius: 12px; color: var(--pc-ink);
  transition: background .15s ease;
}
.ps-searchbar--mobile .header-block__action-btn:hover{ background: var(--pc-lilac); color: var(--pc-ink); }
.pc-msearch__icon, .pc-msearch__icon svg{ display: block; }

/* lang/currency inside the burger drawer — the theme's #_desktop_→#_mobile_
   swap fills these placeholders <768px; the row stays empty (hidden) above */
.pc-nav__tools{ display: none; }
@media (max-width: 767.98px){
  .pc-nav__tools{ display: flex; gap: 10px; padding: 0 0 14px; }
  .pc-nav__tools > div{ flex: 1 1 0; min-width: 0; }
  .pc-nav__tools .ps-languageselector,
  .pc-nav__tools .ps-currencyselector{ width: 100%; }
  .pc-nav__tools .form-select{
    appearance: none; -webkit-appearance: none;
    width: 100%;
    background-color: #fff;
    border: 1.5px solid var(--pc-line);
    border-radius: 99px;
    color: var(--pc-ink); font-size: 13px; font-weight: 600; line-height: 1.4;
    padding: 8px 32px 8px 14px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2323204F' stroke-opacity='.6' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center; background-size: 10px 6px;
    box-shadow: none; cursor: pointer;
  }
}

/* hide leftover hummingbird top strip if any module still renders there */
.header-top{ display: none !important; }

/* cart badge sits on the pill corner; keep the small label on one line */
.pc-head__acts .blockcart .header-block__badge{ top: -6px; right: -6px; }
.pc-hact__t small{ white-space: nowrap; }

/* ─────────────────────────── 4 · footer (D1 dark indigo) ─────────────────────────── */
.footer{ margin-top: 0; }
footer#footer{ margin-top: 64px; }
.footer__before{
  background: var(--pc-ink);
  color: #fff;
  padding: 44px 0 40px;
}
.footer__main{
  background: var(--pc-ink);
  color: rgba(255,255,255,.72);
  padding: 50px 0 26px;
}
.footer__main a{ color: rgba(255,255,255,.72); }
.footer__main a:hover{ color: #fff; }
.footer__main h2, .footer__main .h6, .footer__main .footer__title, .footer__main p.h6{
  color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 14px;
}
.footer__before + .footer__main{ border-top: 1px solid rgba(255,255,255,.10); }

/* — newsletter band (D1 "Module drops … once a month") — */
.pc-newsband{ display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.pc-newsband__copy{ flex: 1 1 380px; }
.pc-newsband__copy h2{ color: #fff; font-size: clamp(20px, 2.4vw, 26px); margin: 0 0 8px; }
.pc-newsband__copy p{ color: rgba(255,255,255,.6); margin: 0; font-size: 14px; }
.pc-newsband__form{ flex: 1 1 420px; min-width: 0; }
.pc-newsband__form form{ display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.pc-newsband__form .input-group{ flex-wrap: nowrap; gap: 10px; }
.pc-newsband__form input[type="email"],
.pc-newsband__form input[type="text"]{
  flex: 1 1 240px; min-width: 0;
  background: rgba(255,255,255,.08) !important;
  border: 1.5px solid rgba(255,255,255,.18) !important;
  border-radius: var(--pc-r-sm) !important;
  color: #fff !important; padding: 12px 16px;
}
.pc-newsband__form input::placeholder{ color: rgba(255,255,255,.5); }
.pc-newsband__form .btn, .pc-newsband__form button[type="submit"]{
  background: var(--pc-magenta); border-color: var(--pc-magenta); color: #fff;
  border-radius: var(--pc-r-sm); font-weight: 600; padding: 11px 24px;
}
.pc-newsband__form .btn:hover, .pc-newsband__form button[type="submit"]:hover{ background: var(--pc-magenta-dk); }
.pc-newsband__form p, .pc-newsband__form .form-text, .pc-newsband__form small{
  color: rgba(255,255,255,.45) !important; font-size: 12px;
}
.pc-newsband__form h2, .pc-newsband__form .h6{ display: none; } /* module's own title — band already has one */
/* form hugs the right edge of the band; readable fine-print */
.pc-newsband__form .ps-emailsubscription{ margin-left: auto; max-width: 480px; }
.pc-news-fineprint{ color: rgba(255,255,255,.55); font-size: 12px; line-height: 1.55; margin: 10px 0 0; }
/* neutralise ps_emailsubscription's own card so it melts into the band */
.pc-newsband__form .ps-emailsubscription{ background: transparent !important; padding: 0 !important; }
.pc-newsband__form .ps-emailsubscription .container{ padding: 0; max-width: none; }
.pc-newsband__form .ps-emailsubscription .row{ margin: 0; --bs-gutter-x: 0; }
.pc-newsband__form .ps-emailsubscription p.h3{ display: none; }
.pc-newsband__form .ps-emailsubscription form{ width: 100%; max-width: none; flex: 1 1 auto; padding: 0; }

/* — brand column + link columns — */
.pc-footer__grid{ display: flex; gap: 56px; flex-wrap: wrap; }
.pc-footer__brand{ flex: 0 1 290px; min-width: 250px; }
.pc-footer__logo img{ height: 42px; width: auto; display: block; }
.pc-footer__blurb{ font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.6); margin: 18px 0 20px; }
.pc-footer__pay{ display: flex; gap: 8px; flex-wrap: wrap; }
.pc-footer__pay span{
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.22); border-radius: 6px; padding: 3px 9px;
}
.pc-footer__links{ flex: 1 1 540px; display: flex; flex-wrap: wrap; gap: 34px 48px; margin: 0; }
.pc-footer__links > *{ flex: 1 1 150px; min-width: 140px; }
.pc-footer__links ul{ list-style: none; margin: 0; padding: 0; }
.pc-footer__links li{ margin: 8px 0; }
.pc-footer__links a{ font-size: 13.5px; }
.footer__main-bottom{ margin-top: 30px; }

/* — legal row — */
.pc-footer__legal{
  margin-top: 44px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(255,255,255,.55);
}
.pc-footer__legal-links a{ color: rgba(255,255,255,.7); margin-left: 18px; font-size: 12.5px; }
.pc-footer__legal-links a:first-child{ margin-left: 0; }

/* phones: the link blocks collapse to accordions (theme behaviour <768) —
   stack them one per row, hairline-separated, instead of the 2-up shrink-wrap */
@media (max-width: 767.98px){
  .pc-footer__grid{ gap: 30px; }
  .pc-footer__links{ flex: 1 1 100%; flex-direction: column; gap: 0; }
  .pc-footer__links > *{ flex: none; width: 100%; min-width: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .pc-footer__links > *:first-child{ border-top: 1px solid rgba(255,255,255,.12); }
  .pc-footer__links .footer-block__title{ margin: 0; padding: 13px 0; }
  .pc-footer__links .footer-block__content{ padding-bottom: 12px; }
}

/* ─────────────────────────── 5 · product card (D3 image logic · D1 body) ─────────────────────────── */
.product-miniature{ height: 100%; }
.product-miniature__inner{
  position: relative;
  height: 100%; display: flex; flex-direction: column;
  background: var(--pc-cream);
  border: 1px solid var(--pc-line-soft);
  border-radius: var(--pc-r);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-miniature:hover .product-miniature__inner{
  transform: translateY(-3px);
  box-shadow: var(--pc-shadow-card);
  border-color: var(--pc-line);
}
/* — pastel media tile, rotating per position (D3) — */
.product-miniature__top{
  position: relative;
  background: var(--pc-tile-1);
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.products > *:nth-child(6n+2) .product-miniature__top{ background: var(--pc-tile-2); }
.products > *:nth-child(6n+3) .product-miniature__top{ background: var(--pc-tile-3); }
.products > *:nth-child(6n+4) .product-miniature__top{ background: var(--pc-tile-4); }
.products > *:nth-child(6n+5) .product-miniature__top{ background: var(--pc-tile-5); }
.products > *:nth-child(6n)   .product-miniature__top{ background: var(--pc-tile-6); }
.product-miniature__top img{
  display: block; margin: auto;
  width: 78%; height: 82%; object-fit: contain;
  mix-blend-mode: multiply; /* melts white box-shot backgrounds into the tile */
  transition: transform .25s ease;
}
.product-miniature:hover .product-miniature__top img{ transform: scale(1.045); }
/* hummingbird nests container > link > picture > img — every layer must fill and center,
   otherwise the 78%-wide img left-aligns inside <picture> */
.product-miniature__top .product-miniature__image-container,
.product-miniature__top a.product-miniature__image-link,
.product-miniature__top picture{
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
/* flags (−40% · New) */
.product-miniature .product-flags{
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: flex; gap: 6px; flex-direction: row; margin: 0; padding: 0;
}
.product-miniature .product-flag{
  background: var(--pc-magenta); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 99px; margin: 0; list-style: none;
}
.product-miniature .product-flag.new{ background: var(--pc-ink); }
.product-miniature .product-flag.discount,
.product-miniature .product-flag.discount-percentage{ background: var(--pc-magenta); }
/* quick view — hummingbird renders …__quickview-button (hover) + …__quickview-touch (coarse pointers).
   Reshape the theme's full-width slide-up bar into a white pill that fades in on hover. */
.product-miniature__quickview-button{
  top: auto; bottom: 12px; left: 50%; width: auto; margin: 0;
  padding: 8px 18px;
  background: #fff; color: var(--pc-ink); border: 0; border-radius: 99px;
  font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px;
  box-shadow: 0 10px 22px -10px rgba(35,32,79,.45);
  opacity: 0; pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
  z-index: 2;
}
.product-miniature__quickview-button .material-icons{ font-size: 17px; color: var(--pc-magenta); }
.product-miniature__inner:hover .product-miniature__quickview-button,
.product-miniature__inner:has(:focus-visible) .product-miniature__quickview-button,
.product-miniature__quickview-button:focus{
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.product-miniature__quickview-button:hover{ background: #fff; color: var(--pc-magenta); }
.product-miniature__quickview-touch{
  background: #fff; color: var(--pc-ink); border: 0; border-radius: 50%;
  box-shadow: 0 6px 16px -8px rgba(35,32,79,.5);
}
/* touch devices fire :hover on tap → the hover pill appeared NEXT TO the
   touch circle ("quick view twice"). Each pointer type gets exactly one. */
@media (hover: none), (pointer: coarse){
  .product-miniature__quickview-button{ display: none; }
}
@media (hover: hover) and (pointer: fine){
  .product-miniature__quickview-touch{ display: none; }
}
/* — body — */
.product-miniature__bottom{
  display: flex; flex-direction: column; flex: 1;
  padding: 13px 16px 16px;
}
.pc-card__cat{
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pc-muted); display: block; margin-bottom: 6px;
}
.product-miniature__title{
  display: block;
  font-size: 14.5px; font-weight: 700; color: var(--pc-ink); line-height: 1.35;
  margin-bottom: 4px;
}
.product-miniature__title:hover{ color: var(--pc-magenta); }
/* — rating pill on the tile (top-right) —
   The AJAX-injected review block floats over the image as a tiny white pill:
   "★ 4.7 (13)". The star sprite is hidden; custom.js copies the numeric
   grade out of the screen-reader sentence into a .pc-rate span. No words →
   nothing to translate, nothing to wrap; cards without reviews get no pill. */
.product-miniature .product-list-review{
  position: absolute; top: 10px; right: 10px; z-index: 2;
  /* baseline, not center: the star, grade and count are different font sizes —
     centering their boxes leaves the glyphs riding at different heights */
  align-items: baseline; column-gap: 4px; margin: 0;
  background: #fff; border-radius: 99px; padding: 5px 9px 4px;
  box-shadow: 0 6px 16px -8px rgba(35,32,79,.4);
}
/* the module injects an (empty) wrapper for every card — only show the pill
   once custom.js has a real grade to put in it (no ghost "★ ()" chips) */
.product-miniature .product-list-review:not(:has(.pc-rate)){ display: none; }
.product-miniature .product-list-review::before{ content: "★"; color: var(--pc-gold); font-size: 16px; line-height: 1; }
.product-miniature .product-list-review .grade-stars{ display: none; }
.product-miniature .pc-rate{ font-size: 12px; font-weight: 800; color: var(--pc-ink); line-height: 1; }
/* count: font-size 0 swallows the " review(s)" text node, the number span
   comes back wrapped in parentheses */
.product-miniature .product-list-comments-number{ font-size: 0; line-height: 1; color: var(--pc-muted); white-space: nowrap; }
.product-miniature .product-list-comments-number [data-ps-ref="number-value"]{ font-size: 11px; font-weight: 600; line-height: 1; }
.product-miniature .product-list-comments-number [data-ps-ref="number-value"]::before{ content: "("; }
.product-miniature .product-list-comments-number [data-ps-ref="number-value"]::after{ content: ")"; }
.pc-card__stock{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 500; color: var(--pc-green);
  margin: 2px 0 4px;
}
.pc-card__stock i{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pc-green); display: inline-block;
}
/* price row + round add button */
.product-miniature__prices{
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: auto; padding-top: 4px;
}
.product-miniature__price{ font-size: 17px; font-weight: 800; color: var(--pc-ink); letter-spacing: -.01em; }
.product-miniature__regular-price{
  font-size: 12.5px; color: var(--pc-muted); text-decoration: line-through; font-weight: 500;
}
.product-miniature__actions{ position: absolute; right: 14px; bottom: 14px; margin: 0; padding: 0; }
.product-miniature__prices{ padding-right: 60px; min-height: 40px; align-items: center; }
/* cards without a price row still reserve the button corner */
.product-miniature__bottom:not(:has(.product-miniature__prices)){ padding-bottom: 62px; }
.product-miniature__form{ display: flex; align-items: center; gap: 0; }
.product-miniature .quantity-button{ display: none; } /* qty lives on the product page */
.product-miniature__add.btn{
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  box-shadow: 0 8px 18px -10px rgba(232,13,110,.6);
}
.product-miniature__add .material-icons{ font-size: 19px; }
.product-miniature__add-text{ display: none; }
.product-miniature__details.btn{ font-size: 12.5px; padding: 8px 16px; border-radius: 99px; }

/* phones show two cards per row — compact the card internals so titles,
   prices and the corner button fit a ~170px-wide card */
@media (max-width: 576px){
  .product-miniature__bottom{ padding: 11px 12px 12px; }
  .pc-card__cat{ font-size: 9.5px; letter-spacing: .09em; margin-bottom: 4px; }
  .product-miniature__title{ font-size: 13px; }
  .pc-card__stock{ font-size: 11px; margin: 2px 0 4px; }
  .product-miniature__price{ font-size: 15px; }
  .product-miniature__regular-price{ font-size: 11.5px; }
  .product-miniature__actions{ right: 10px; bottom: 10px; }
  .product-miniature__add.btn{ width: 34px; height: 34px; }
  .product-miniature__add .material-icons{ font-size: 17px; }
  .product-miniature__prices{ padding-right: 48px; min-height: 34px; padding-top: 4px; }
  .product-miniature__bottom:not(:has(.product-miniature__prices)){ padding-bottom: 52px; }
  /* "See details" cards: the pill is wider than the corner allows next to a
     price — let it flow full-width under the price row instead */
  .product-miniature__bottom:has(.product-miniature__details) .product-miniature__prices{ padding-right: 0; min-height: 0; }
  .product-miniature__actions:has(.product-miniature__details){ position: static; margin-top: 9px; }
  .product-miniature__details.btn{ display: block; width: 100%; text-align: center; font-size: 12px; padding: 7px 12px; }
  .product-miniature .product-flags{ top: 8px; left: 8px; }
  .product-miniature .product-flag{ font-size: 10px; padding: 2px 7px; }
  /* rating pill: nudge tighter on ~170px tiles */
  .product-miniature .product-list-review{ top: 8px; right: 8px; padding: 3px 8px; }
  .product-miniature .product-list-review::before{ font-size: 14px; }
  .product-miniature .pc-rate{ font-size: 11px; }
  .product-miniature .product-list-comments-number [data-ps-ref="number-value"]{ font-size: 10px; }
}

/* ─────────────────────────── 6 · category / listing (D1 layout · D3 filter bar) ─────────────────────────── */
/* full-width listing shell */
.pc-listing{ padding-top: 8px; }

/* — editorial category header — */
.pc-cat-head{ margin: 0 0 8px; }
.pc-cat-head .pc-kick{ margin-bottom: 10px; }
.pc-cat-head__title{ font-size: clamp(30px, 4vw, 44px); margin: 4px 0 14px; }
.pc-cat-head__desc{
  color: var(--pc-muted); font-size: 14.5px; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 18px;
}
/* legacy landing-page markup inside old category descriptions: text only */
.pc-cat-head__desc img, .pc-cat-head__desc iframe, .pc-cat-head__desc .btn{ display: none !important; }
.pc-cat-head__desc *{ background: transparent !important; color: var(--pc-muted) !important; font-size: 14.5px !important; line-height: 1.7 !important; margin: 0 !important; padding: 0 !important; }

/* — rewritten category descriptions (docs/03-CONTENT-RULESET.md) —
   curated `.pc-desc` markup rendered as-is by category-header.tpl:
   a lead paragraph + an optional 2-col grid of kicker-headed pillars */
.pc-desc{ margin-bottom: 18px; } /* no width cap — full-width header (user request) */
.pc-desc__lead{ font-size: 16.5px; line-height: 1.65; color: var(--pc-muted); margin: 0; }
.pc-desc__lead b, .pc-desc__lead strong{ color: var(--pc-ink); font-weight: 600; }
.pc-desc__grid{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 34px; margin-top: 22px;
}
.pc-desc__item h3{
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pc-magenta); margin: 0 0 6px;
}
.pc-desc__item p{ font-size: 13.5px; line-height: 1.6; color: var(--pc-muted); margin: 0; }
@media (max-width: 767.98px){
  .pc-desc__lead{ font-size: 15px; }
  .pc-desc__grid{ grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
}

/* subcategory tiles — a proper collection row (the small outline chips read
   too weak between the description and the filter card) */
.subcategory{ margin: 22px 0 6px; }
.subcategory__list{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px; margin: 0;
}
.subcategory__link{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--pc-line-soft); border-radius: 14px;
  padding: 15px 16px 15px 18px;
  font-size: 14px; font-weight: 700; color: var(--pc-ink); line-height: 1.3;
  white-space: normal; min-width: 0; /* theme's nowrap chips blow the grid tracks past the viewport */
  transition: transform .15s ease, box-shadow .15s ease;
}
.subcategory__name{ white-space: normal; }
/* cool tint rotation — blush · lilac · mint · sky. NOT sand/cream: on the
   white page the beige tints read as dirty next to the pastels (PM) */
.subcategory__list a:nth-child(4n+1){ background: var(--pc-blush); }
.subcategory__list a:nth-child(4n+2){ background: var(--pc-lilac); }
.subcategory__list a:nth-child(4n+3){ background: var(--pc-tile-2); }
.subcategory__list a:nth-child(4n+4){ background: var(--pc-tile-3); }
.subcategory__link::after{
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2323204F' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/13px no-repeat;
  box-shadow: 0 1px 3px rgba(35,32,79,.12);
  transition: transform .15s ease;
}
.subcategory__link:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px rgba(35,32,79,.35);
  color: var(--pc-ink);
}
.subcategory__link:hover::after{ transform: translateX(2px); }
@media (max-width: 767.98px){
  .subcategory{ margin-top: 16px; }
  .subcategory__list{ grid-template-columns: 1fr 1fr; gap: 8px; }
  .subcategory__link{ font-size: 12.5px; padding: 11px 12px 11px 13px; border-radius: 12px; gap: 8px; }
  .subcategory__link::after{ width: 22px; height: 22px; background-size: 11px; }
}
.subcategory__thumbnail{ display: none; }

/* — horizontal filter bar v2 (D3) — one white card, two rows:
   row 1 · funnel label + facet pills + count/sort
   row 2 · active-filter chips + Clear all (#js-active-search-filters renders
           inside the card — see products-top.tpl / active-filters.tpl) — no
           more orphaned "Clear all" floating in dead space */
.pc-filterbar{
  display: flex; flex-direction: column;
  background: var(--pc-cream);
  border: 1px solid var(--pc-line-soft);
  border-radius: var(--pc-r);
  padding: 10px 14px;
  margin: 18px 0 16px;
  position: relative; z-index: 20;
}
.pc-filterbar__main{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pc-filterbar__label{
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pc-muted); padding-left: 4px;
}
.pc-filterbar__facets{ flex: 1 1 auto; min-width: 0; }
.pc-filterbar .search-filters{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-filterbar .left-block__title{ display: none !important; }
.pc-filterbar .accordion{ display: flex; gap: 8px; flex-wrap: wrap; border: 0; }
.pc-filterbar .accordion-item{ position: relative; border: 0 !important; background: transparent; }
.pc-filterbar .accordion-button{
  width: auto; background: var(--pc-paper); color: var(--pc-ink);
  border: 1.5px solid var(--pc-line); border-radius: 99px;
  font-size: 13px; font-weight: 600; padding: 7px 14px;
  box-shadow: none !important; display: inline-flex; align-items: center; gap: 7px;
}
.pc-filterbar .accordion-button::after{ width: 14px; height: 14px; background-size: 14px; }
.pc-filterbar .accordion-button:not(.collapsed){
  background: var(--pc-ink); color: #fff; border-color: var(--pc-ink);
}
.pc-filterbar .accordion-button:not(.collapsed)::after{ filter: brightness(0) invert(1); }
/* facet WITH active filters, collapsed: blush pill so the state stays visible
   (facets no longer auto-expand — see facets.tpl override) */
.pc-filterbar .accordion-button.pc-facet--active.collapsed{
  background: var(--pc-blush); border-color: var(--pc-magenta); color: var(--pc-magenta-dk);
}
/* dropdown panel */
.pc-filterbar .accordion-collapse{
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  min-width: 250px; max-height: 340px; overflow: auto;
  background: #fff; border: 1px solid var(--pc-line-soft);
  border-radius: 14px; box-shadow: var(--pc-shadow-pop);
}
.pc-filterbar .accordion-body{ padding: 10px 8px; margin: 0; list-style: none; }
.pc-filterbar .accordion-body li{ list-style: none; }
.pc-filterbar .search-filters__item{
  padding: 6px 10px; border-radius: 9px; font-size: 13.5px;
}
.pc-filterbar .search-filters__item:hover{ background: var(--pc-blush); }
.pc-filterbar .form-check-input:checked{ background-color: var(--pc-magenta); border-color: var(--pc-magenta); }
/* count + sort — always their own full-width row under the pills:
   count left, sort right (matching type so the two ends read as one row) */
.pc-filterbar__right{
  flex: none; width: 100%; margin-left: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-top: 1px solid var(--pc-line-soft);
  margin-top: 10px; padding-top: 10px;
}
.pc-filterbar__right:first-child{ border-top: 0; margin-top: 0; padding-top: 0; } /* no facets rendered */
.pc-filterbar__count{ font-size: 13px; font-weight: 600; color: var(--pc-muted); white-space: nowrap; padding-left: 4px; }
.pc-filterbar__sort{ display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.pc-filterbar .products__sort-label{ font-size: 13px; font-weight: 600; color: var(--pc-muted); white-space: nowrap; }
/* the sort control is a Bootstrap dropdown BUTTON (btn-outline-tertiary),
   not a <select> — dress it as the same pill as the facet buttons */
.pc-filterbar .products__sort-dropdown{ position: relative; }
.pc-filterbar .products__sort-dropdown-button{
  background: var(--pc-paper); color: var(--pc-ink);
  border: 1.5px solid var(--pc-line); border-radius: 99px;
  font-size: 13px; font-weight: 600; padding: 7px 14px;
  box-shadow: none !important; display: inline-flex; align-items: center; gap: 7px;
}
.pc-filterbar .products__sort-dropdown-button::after{
  content: ''; /* kill the theme's Material-icon glyph — bg chevron only */
  border: 0; width: 14px; height: 14px; margin: 0;
  /* the SAME chevron the facet pills use (hummingbird accordion icon) —
     the Bootstrap outlined-path chevron read as a doubled stroke */
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23363a41' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") center/14px no-repeat;
}
.pc-filterbar .products__sort-dropdown-button.show,
.pc-filterbar .products__sort-dropdown-button[aria-expanded="true"]{
  background: var(--pc-ink); color: #fff; border-color: var(--pc-ink);
}
.pc-filterbar .products__sort-dropdown-button.show::after,
.pc-filterbar .products__sort-dropdown-button[aria-expanded="true"]::after{ filter: brightness(0) invert(1); }
.pc-filterbar .products__sort-dropdown .dropdown-menu{
  min-width: 210px; border: 1px solid var(--pc-line-soft);
  border-radius: 14px; box-shadow: var(--pc-shadow-pop); padding: 8px;
}
.pc-filterbar .products__sort-dropdown .dropdown-item{
  border-radius: 9px; font-size: 13.5px; padding: 7px 10px;
}
.pc-filterbar .products__sort-dropdown .dropdown-item:hover{ background: var(--pc-blush); color: var(--pc-ink); }
.pc-filterbar .products__sort-dropdown .dropdown-item.current{ color: var(--pc-magenta-dk); font-weight: 600; }
/* row 2 · active-filter chips strip (inside the card) */
.pc-active{
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  border-top: 1px solid var(--pc-line-soft);
  margin-top: 10px; padding: 10px 4px 2px;
}
.pc-active__label{
  flex: none;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pc-muted);
}
.pc-active__list{ display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; }
.pc-active__list li{ list-style: none; }
/* one chip = one remove-link (hummingbird structure kept for its aria-label) */
.pc-active .filter-block{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--pc-blush); color: var(--pc-magenta-dk);
  border-radius: 99px; padding: 5px 9px 5px 13px; font-size: 12.5px; font-weight: 600;
  transition: background .15s ease;
}
.pc-active .filter-block:hover{ background: #F7D3E3; color: var(--pc-magenta-dk); }
.pc-active .filter-block .material-icons{ font-size: 15px; opacity: .7; }
.pc-active .filter-block:hover .material-icons{ opacity: 1; }
.pc-active__clear{
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--pc-muted); padding: 4px 6px;
  transition: color .15s ease;
}
.pc-active__clear:hover{ color: var(--pc-magenta); }
.pc-active__clear .material-icons{ font-size: 15px; }

/* phones: pills become one swipeable strip; panels become bottom sheets */
@media (max-width: 767.98px){
  .pc-filterbar{ padding: 10px 12px; }
  .pc-filterbar__label{ display: none; }
  .pc-filterbar__facets{ overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .pc-filterbar__facets::-webkit-scrollbar{ display: none; }
  .pc-filterbar .search-filters{ flex-wrap: nowrap; width: max-content; }
  .pc-filterbar .accordion{ flex-wrap: nowrap; }
  .pc-filterbar .accordion-button{ white-space: nowrap; }
  /* __right needs no override anymore — the full-width count/sort row is
     now the layout on every viewport */
  /* facet panel = bottom sheet — fixed escapes the strip's overflow clip
     (no transformed ancestor on listing pages, so fixed = viewport) */
  .pc-filterbar .accordion-collapse{
    position: fixed; top: auto; left: 10px; right: 10px; bottom: 10px;
    min-width: 0; max-height: 62vh; z-index: 1080;
    border-radius: 16px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .pc-filterbar .accordion-collapse::before{
    content: ""; display: block; width: 38px; height: 4px; border-radius: 99px;
    background: var(--pc-line); margin: 10px auto 0;
  }
  /* dim the page behind the sheet — a tap on the dim hits <body>, which the
     outside-click handler in custom.js treats as "close the panel".
     z-index 15, NOT above the bar: the sheet lives inside .pc-filterbar's
     stacking context (z-index 20), so a root-context overlay above 20 would
     cover the sheet itself and swallow its taps */
  body:has(.pc-filterbar .accordion-collapse.show)::after{
    content: ""; position: fixed; inset: 0; z-index: 15;
    background: rgba(27,24,57,.45);
  }
  .pc-active__clear{ margin-left: 0; }
}

/* — product grid: 4 across, responsive — */
/* one grid for EVERY product list — category (#products), featured, viewed
   products, category cross-sell… all render a bare `.products` wrapper.
   theme.css defines the same selector; this file loads after it and wins. */
.products{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1199.98px){
  .products{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px){
  .products{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* module product widgets ship their own .container — flatten it everywhere:
   it always sits inside an already-padded wrapper (.pc-shell, product page,
   cart footer), so keeping it means a double inset and a misaligned grid */
.module-products.container{ padding: 0; max-width: none; }
.module-products__list{ margin: 0; }

/* ── cross-card section alignment ──
   Cards in the same grid row share row tracks (subgrid): tile, eyebrow,
   title, variants, reviews, stock line, price and actions each start on a
   common row across the band — on every product list. Band spacing moves
   from row-gap to a card margin so the inner tracks stay gapless. */
@supports (grid-template-rows: subgrid){
  .products{ row-gap: 0; }
  .products > *{ margin-bottom: 20px; }
  /* rows: 1 tile · 2 eyebrow · 3 title · 4 variants · 5 stock ·
     6 price + button (shared row) · 7 phone-only stacked details pill */
  .products > .product-miniature{
    grid-row: span 7;
    display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr);
    height: auto;
    /* hummingbird makes cards inline-size query containers; that containment
       forbids subgrid on this element — drop it (its only @container rule is
       fully overridden by this file's compact-card styles anyway) */
    container-type: normal;
  }
  .product-miniature__inner{
    grid-row: span 7;
    display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr);
    gap: 0;
    height: auto;
  }
  .product-miniature__top{ grid-row: 1; }
  .product-miniature__bottom{
    grid-row: 2 / span 6;
    display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .product-miniature__infos{
    grid-row: 1 / span 5; grid-column: 1;
    display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .pc-card__cat{ grid-row: 1; }
  .product-miniature__title{ grid-row: 2; align-self: start; }
  .product-miniature__variants{ grid-row: 3; }
  .pc-card__stock{ grid-row: 4; align-self: start; }
  .product-miniature__prices{ grid-row: 5; margin-top: 0; align-self: center; }
  /* price and button genuinely share the row: actions overlaps infos' last
     track, right-aligned — no absolute corner, bands align both card types.
     grid-column pins it into the ONE real column — without it auto-placement
     invents an implicit second column and halves the text width */
  .product-miniature__actions{
    grid-row: 5; grid-column: 1; position: static;
    justify-self: end; align-self: center;
  }
  .product-miniature__bottom:not(:has(.product-miniature__prices)){ padding-bottom: 16px; }
  /* a "See details" pill beside a price needs a wider clear zone than the
     round cart button (phones stack the pill instead, see below) */
  @media (min-width: 577px){
    .product-miniature__bottom:has(.product-miniature__details) .product-miniature__prices{ padding-right: 116px; }
  }
  @media (max-width: 767.98px){
    .products > *{ margin-bottom: 12px; }
  }
  @media (max-width: 576px){
    /* phones: the "See details" pill rides the SAME shared row as the
       neighbours' price + cart button — one aligned row across the band */
    .product-miniature__bottom .product-miniature__actions:has(.product-miniature__details){
      grid-row: 5; margin-top: 0; align-self: center;
    }
    /* no price on the card → the pill fills the row */
    .product-miniature__bottom:not(:has(.product-miniature__prices)) .product-miniature__actions:has(.product-miniature__details){
      justify-self: stretch;
    }
    /* rare card with a price AND a pill: keep the pill compact beside it */
    .product-miniature__bottom:has(.product-miniature__prices) .product-miniature__details.btn{
      display: inline-flex; width: auto;
    }
  }
}
#products{ margin-top: 10px; }
/* listing pages: the theme's bottom inset under the grid is dead space —
   the pagination row carries its own air instead */
.center-column:has(#js-product-list){ padding-bottom: 0; }

/* pagination */
.pagination{ margin-top: 30px; margin-bottom: 8px; }
.pagination .page-link{
  border: 1.5px solid var(--pc-line); color: var(--pc-ink);
  border-radius: 10px !important; margin: 0 3px; font-weight: 600; font-size: 13.5px;
}
.pagination .page-item.active .page-link{
  background: var(--pc-magenta); border-color: var(--pc-magenta); color: #fff;
}

/* ─────────────────────────── 7 · product page (D1 buy column · D3 gallery) ─────────────────────────── */
.product__container{
  display: grid; grid-template-columns: 1.06fr .94fr;
  gap: 48px; align-items: start;
  margin-top: 14px;
}
@media (max-width: 991.98px){
  .product__container{ grid-template-columns: 1fr; gap: 28px; }
}
/* — gallery: clean rounded image, no tile behind it (fix round 2) — */
.product__carousel{
  background: transparent;
  border-radius: var(--pc-r);
  overflow: hidden;
  padding: 0;
}
.product__carousel .carousel-item img{ display: block; width: 100%; height: auto; border-radius: var(--pc-r); }
.product__carousel .product-flags{ position: absolute; top: 14px; left: 14px; z-index: 3; display: flex; gap: 6px; margin: 0; padding: 0; }
.product__zoom{
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--pc-ink); border: 1px solid var(--pc-line-soft);
  box-shadow: 0 4px 14px -6px rgba(35,32,79,.3);
}
.product__zoom:hover{ background: var(--pc-ink); color: #fff; }
.carousel-control-prev, .carousel-control-next{ opacity: 0; transition: opacity .15s ease; }
.product__carousel:hover .carousel-control-prev,
.product__carousel:hover .carousel-control-next{ opacity: .9; }
.product__thumbnails-list{ display: flex; gap: 10px; margin: 14px 0 0; padding: 0; flex-wrap: wrap; }
.product__thumbnail{
  width: 64px; height: 64px; padding: 4px;
  border: 1.5px solid var(--pc-line); border-radius: 12px;
  background: #fff; overflow: hidden; cursor: pointer;
  transition: border-color .15s ease;
}
.product__thumbnail:hover{ border-color: var(--pc-muted); }
/* active marker: .active only — the theme leaves aria-current="true" stuck on
   the FIRST thumb (never re-synced), keying on it doubled the pink border */
.product__thumbnail.active{ border-color: var(--pc-magenta); }
/* bootstrap .focus-ring paints its blue ring on plain :focus, so it lingered
   after every mouse click; keep it for keyboard only, in brand color */
.product__thumbnail{ --bs-focus-ring-color: rgba(232, 13, 110, .2); }
.product__thumbnail:focus:not(:focus-visible){ box-shadow: none; }
/* the theme ALSO outlines the selected img itself (.js-thumb-selected,
   2px primary, inset) — an inner second ring inside our button border */
.product__thumbnail .js-thumb{ outline: 0 !important; }
.product__thumbnail img{ width: 100%; height: 100%; object-fit: contain; }
/* — buy column (D1) — */
.product__right .pc-kick{ margin-bottom: 8px; }
.product__name{ font-size: clamp(26px, 3vw, 34px); margin: 2px 0 12px; }
.product__description-short{ color: var(--pc-muted); font-size: 14.5px; line-height: 1.7; }
.pc-usp{ list-style: none; margin: 16px 0 6px; padding: 0; }
.pc-usp li{
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 500; color: var(--pc-ink);
  margin: 8px 0;
}
.pc-usp li::before{
  content: "✓"; flex: none;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--pc-blush); color: var(--pc-magenta);
  font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.product__prices{ margin: 16px 0 4px; }
.product__price{ font-size: 34px; font-weight: 800; color: var(--pc-ink); letter-spacing: -.02em; }
.product__regular-price{ font-size: 15px; color: var(--pc-muted); text-decoration: line-through; font-weight: 500; }
.product__discount-percentage, .product__discount-amount{
  background: var(--pc-blush); color: var(--pc-magenta-dk) !important;
  border-radius: 99px; padding: 3px 11px; font-size: 12px; font-weight: 700;
}
.product__tax-infos{ font-size: 12px; color: var(--pc-muted); }
.product__actions{ margin-top: 14px; }
.product__actions-qty-add{ display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; margin-top: 10px; }
/* quantity stepper — one seamless white group: [−][value][+] */
.product__quantity .quantity-button__group{
  display: inline-flex; align-items: stretch; flex-wrap: nowrap; width: auto;
  height: 52px;
  background: #fff; border: 1.5px solid var(--pc-line);
  border-radius: 12px; overflow: hidden;
}
.product__quantity .quantity-button__group .btn{
  width: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 0; box-shadow: none;
  background: #fff; color: var(--pc-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.product__quantity .quantity-button__group .btn:hover{ background: var(--pc-lilac); color: var(--pc-ink); }
.product__quantity .quantity-button__group .btn .material-icons{ font-size: 18px; }
.product__quantity .quantity-button__group .form-control{
  width: 50px; flex: none; margin: 0; padding: 0;
  border: 0; border-radius: 0; box-shadow: none; outline: 0;
  background: #fff; text-align: center;
  font-size: 15px; font-weight: 700; color: var(--pc-ink);
}
.product__add-to-cart{ flex: 1 1 220px; }
.product__add-to-cart-button{
  width: 100%; padding: 14px 26px; font-size: 15px; font-weight: 700;
  border-radius: var(--pc-r-tag);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.product__availability-status{ font-size: 13px; font-weight: 600; display: inline-flex; gap: 7px; align-items: center; }
.product__minimal-quantity{ font-size: 12.5px; color: var(--pc-muted); }
/* — tabs (accordion as cards) — */
.product__bottom{ display: block; margin-top: 46px; }
.product__bottom-left{ width: 100%; }
.product__accordion .accordion-item{
  background: var(--pc-cream); border: 1px solid var(--pc-line-soft) !important;
  border-radius: 14px !important; margin-bottom: 12px; overflow: hidden;
}
.product__accordion .accordion-button{
  background: var(--pc-cream); color: var(--pc-ink);
  font-size: 15px; font-weight: 700; padding: 16px 20px;
  box-shadow: none !important;
}
.product__accordion .accordion-button:not(.collapsed){ color: var(--pc-magenta); }
.product__accordion .accordion-body{ padding: 4px 20px 22px; }
/* long-form description typography */
.product__description{ font-size: 14.5px; line-height: 1.75; color: var(--pc-ink-2); }
.product__description img{ max-width: 100%; height: auto; border-radius: 12px; }
.product__description h2, .product__description h3{ margin: 22px 0 10px; }
/* accessories / cross-sell */
.product-accessories{ margin-top: 46px; }
.product-accessories .section-title, .section-title{ font-size: 24px; margin-bottom: 18px; }
/* reviews (productcomments) — each comment on a white card, matching the accordion cards.
   NB: the item keeps py-3 (layered !important) → vertical padding stays 1rem; we only add inline padding. */
.product-comments-wrapper{ margin-top: 46px; }
#product-comments-list{ margin: 14px 0 0; padding: 0; list-style: none; }
.product-comment-list-item{
  background: var(--pc-cream); border: 1px solid var(--pc-line-soft);
  border-radius: 14px; padding-inline: 22px;
  margin-bottom: 12px; list-style: none;
}
#empty-product-comment{
  background: var(--pc-cream); border: 1px solid var(--pc-line-soft);
  border-radius: 14px; padding: 18px 22px;
}

/* ─────────────────────────── 8 · home page (D1 sections) ─────────────────────────── */
.pc-home{ overflow-x: clip; }
#index .center-column{ width: 100%; max-width: none; padding: 0; }
#index #wrapper{ padding-top: 0; }
.pc-sec-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.pc-sec-title{ font-size: clamp(24px, 2.6vw, 32px); margin: 8px 0 0; }
.pc-sec-accent{ color: var(--pc-magenta); }
.pc-more{ font-size: 13.5px; font-weight: 700; color: var(--pc-magenta-dk); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; border-bottom: 2px solid var(--pc-blush); padding-bottom: 2px; }
.pc-more:hover{ gap: 11px; color: var(--pc-magenta); }

/* — hero — */
.pc-hero{ padding: 58px 0 64px; }
.pc-hero__grid{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.pc-hero__title{ font-size: clamp(34px, 4.6vw, 56px); margin: 14px 0 18px; line-height: 1.08; }
.pc-hero__accent{ color: var(--pc-magenta); }
.pc-hero__lede{ color: var(--pc-muted); font-size: 16px; line-height: 1.7; max-width: 520px; margin: 0 0 26px; }
.pc-hero__cta{ display: flex; gap: 12px; flex-wrap: wrap; }
.pc-hero__cta .btn{ display: inline-flex; align-items: center; gap: 9px; }
.pc-hero__proofs{ list-style: none; display: flex; gap: 22px; flex-wrap: wrap; margin: 26px 0 0; padding: 0; }
.pc-hero__proofs li{ display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--pc-ink); }
.pc-hero__proofs .pc-ic{ width: 16px; height: 16px; color: var(--pc-green); }
.pc-hero__art{ position: relative; min-height: 440px; }
.pc-hero__patch{
  position: absolute; inset: 8% 0 10% 8%; border-radius: var(--pc-r-tag);
  background-image: radial-gradient(rgba(35,32,79,.16) 1.4px, transparent 1.4px);
  background-size: 20px 20px;
}
.pc-hero__ring{
  position: absolute; top: -34px; right: -6px; width: 180px; height: 180px;
  border-radius: 50%; border: 26px solid var(--pc-blush);
}
.pc-art-card{
  position: absolute; width: 300px; display: block;
  background: var(--pc-cream); border: 1px solid var(--pc-line);
  border-radius: var(--pc-r-tag); overflow: hidden; box-shadow: var(--pc-shadow-pop);
  transition: transform .2s ease;
}
.pc-art-card svg{ display: block; width: 100%; height: auto; }
.pc-art-card__meta{ padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-art-card__name{ font-size: 13.5px; font-weight: 600; color: var(--pc-ink); line-height: 1.3; }
.pc-art-card__price{ font-size: 15px; font-weight: 700; color: var(--pc-ink); white-space: nowrap; }
.pc-art-card--1{ top: 62px; right: 18px; transform: rotate(2.5deg); z-index: 3; }
.pc-art-card--1:hover{ transform: rotate(2.5deg) translateY(-4px); }
.pc-art-card--2{ top: 190px; left: -4px; transform: rotate(-3.5deg); z-index: 2; width: 264px; }
.pc-art-card--2:hover{ transform: rotate(-3.5deg) translateY(-4px); }
.pc-float-chip{
  position: absolute; z-index: 4;
  background: var(--pc-ink); color: #fff;
  font-size: 12.5px; font-weight: 600;
  padding: 9px 16px; border-radius: var(--pc-r-tag);
  box-shadow: var(--pc-shadow-pop);
  display: inline-flex; align-items: center; gap: 8px;
}
.pc-float-chip .pc-ic{ color: var(--pc-gold); }
.pc-float-chip--a{ top: 22px; left: 34px; transform: rotate(-2deg); }
.pc-float-chip--b{ bottom: 30px; right: 60px; background: var(--pc-magenta); transform: rotate(2deg); }
@media (max-width: 991.98px){
  .pc-hero{ padding: 36px 0 44px; }
  .pc-hero__grid{ grid-template-columns: 1fr; gap: 40px; }
  .pc-hero__art{ min-height: 400px; max-width: 460px; margin: 0 auto; width: 100%; }
}

/* — ticker — */
.pc-ticker{ border-top: 1px solid var(--pc-line-soft); border-bottom: 1px solid var(--pc-line-soft); overflow: hidden; background: var(--pc-cream); }
.pc-ticker__track{ display: flex; white-space: nowrap; width: max-content; animation: pc-tick 38s linear infinite; padding: 14px 0; }
.pc-ticker span{
  font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--pc-ink); padding: 0 26px;
  display: inline-flex; align-items: center; gap: 26px;
}
.pc-ticker i{ width: 7px; height: 7px; border-radius: 1px; background: var(--pc-magenta); transform: rotate(45deg); display: inline-block; }
@keyframes pc-tick{ to{ transform: translateX(-50%); } }

/* — stat band (D2 accent) — */
.pc-statband{ background: var(--pc-ink); color: #fff; }
.pc-statband__grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; padding-top: 54px; padding-bottom: 54px; }
.pc-stat{ border-left: 2px solid rgba(245,95,141,.4); padding-left: 22px; }
.pc-stat b{ font-size: clamp(32px, 3.4vw, 46px); font-weight: 700; line-height: 1; display: block; color: #fff; }
.pc-stat b i{ font-style: normal; color: var(--pc-pink); }
.pc-stat span{ display: block; margin-top: 9px; font-size: 13px; color: rgba(255,255,255,.62); letter-spacing: .04em; }
@media (max-width: 991.98px){ .pc-statband__grid{ grid-template-columns: repeat(2, 1fr); gap: 28px; padding-top: 38px; padding-bottom: 38px; } }

/* — catalogue tiles — */
.pc-goals{ padding: 80px 0 12px; }
.pc-goal-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pc-goal{
  position: relative; display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--pc-line); border-radius: var(--pc-r-tag);
  padding: 30px 26px 24px; min-height: 240px;
  background: var(--pc-cream); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pc-goal:hover{ transform: translateY(-4px); box-shadow: var(--pc-shadow-pop); }
/* tinted tiles keep the same hairline border as the white one — a mixed
   bordered/borderless band reads as a glitch (user WP8 feedback) */
.pc-goal--blush{ background: var(--pc-blush); }
.pc-goal--lilac{ background: var(--pc-lilac); }
.pc-goal--sand{ background: var(--pc-sand); }
.pc-goal__num{
  position: absolute; top: 8px; right: 16px;
  font-size: 62px; font-weight: 800; line-height: 1; color: rgba(35,32,79,.07);
}
.pc-goal__ic{
  width: 46px; height: 46px; border-radius: var(--pc-r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pc-ink); color: #fff; margin-bottom: 6px;
}
.pc-goal__ic--magenta{ background: var(--pc-magenta); }
.pc-goal__ic--gold{ background: var(--pc-gold); color: var(--pc-ink); }
.pc-goal h3{ font-size: 16.5px; margin: 0; }
.pc-goal p{ font-size: 13px; color: var(--pc-muted); line-height: 1.6; margin: 0; }
.pc-goal__foot{
  margin-top: auto; padding-top: 10px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--pc-ink);
}
.pc-goal:hover .pc-goal__foot{ color: var(--pc-magenta); }
@media (max-width: 1199.98px){ .pc-goal-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px){ .pc-goal-grid{ grid-template-columns: 1fr; } }

/* — featured modules — */
.pc-featured{ padding: 64px 0 8px; }
.pc-featured .featured-products{ margin: 0; }
.pc-featured .section-title{ display: none; } /* module's own H2 — pc-sec-head already titles it */
/* "All featured products" — header link covers it; hide the WRAPPER, not just
   the button, or its empty box keeps reserving space under the cards */
.pc-featured .module-products__buttons{ display: none; }

/* — services — */
.pc-services{ padding: 72px 0 8px; }
.pc-services__grid{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.pc-services__copy p{ color: var(--pc-muted); font-size: 14.5px; line-height: 1.7; margin: 14px 0 22px; max-width: 380px; }
.pc-services__copy .btn{ display: inline-flex; align-items: center; gap: 9px; }
.pc-services__phone{ display: block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--pc-ink); }
.pc-services__list{ display: flex; flex-direction: column; }
.pc-service{
  display: flex; align-items: center; gap: 20px;
  padding: 17px 6px; border-bottom: 1px solid var(--pc-line-soft);
  transition: background .15s ease;
}
.pc-service:first-child{ border-top: 1px solid var(--pc-line-soft); }
.pc-service:hover{ background: var(--pc-cream); border-radius: 10px; }
.pc-service__num{ flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--pc-magenta); }
.pc-service__body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-service__body b{ font-size: 14.5px; font-weight: 700; color: var(--pc-ink); }
.pc-service__body span{ font-size: 12.5px; color: var(--pc-muted); line-height: 1.55; }
.pc-service > .pc-ic{ flex: none; color: var(--pc-ink); transition: transform .15s ease, color .15s ease; }
.pc-service:hover > .pc-ic{ transform: translateX(4px); color: var(--pc-magenta); }
@media (max-width: 991.98px){ .pc-services__grid{ grid-template-columns: 1fr; gap: 30px; } }

/* — why band — light editorial section, same voice as the rest of the home — */
.pc-why{ padding: 82px 0 4px; }
.pc-why__title{ font-size: clamp(26px, 3vw, 38px); margin: 10px 0 36px; }
.pc-why__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pc-why__item{
  background: var(--pc-cream); border: 1px solid var(--pc-line-soft);
  border-radius: var(--pc-r-tag); padding: 28px 26px 26px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pc-why__item:hover{ transform: translateY(-4px); box-shadow: var(--pc-shadow-pop); }
.pc-why__item b{ display: block; color: var(--pc-ink); font-size: 15px; margin: 16px 0 8px; }
.pc-why__item p{ font-size: 13px; line-height: 1.65; color: var(--pc-muted); margin: 0; }
.pc-why__ic{
  width: 44px; height: 44px; border-radius: var(--pc-r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pc-blush); color: var(--pc-magenta);
}
/* pastel chip rotation echoes the product tiles */
.pc-why__item:nth-child(2) .pc-why__ic{ background: #E4F0E8; color: var(--pc-green); }
.pc-why__item:nth-child(3) .pc-why__ic{ background: var(--pc-lilac); color: var(--pc-ink); }
.pc-why__badges{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.pc-why__badges span{
  font-size: 12px; font-weight: 600; color: var(--pc-ink); background: var(--pc-cream);
  border: 1px solid var(--pc-line); border-radius: 99px; padding: 7px 15px;
}
.pc-why__badges i{ font-style: normal; color: var(--pc-gold); }
@media (max-width: 991.98px){ .pc-why__grid{ grid-template-columns: 1fr; gap: 14px; } }

/* phones: home section paddings are ZERO top and bottom (user rounds 2+3) —
   the only air between sections is the content's own margins
   (.pc-sec-head margin, card margin-bottom, statband's inner grid padding) */
@media (max-width: 767.98px){
  .pc-hero{ padding: 18px 0 14px; }
  .pc-goals{ padding: 0; }
  .pc-featured{ padding: 0; }
  .pc-services{ padding: 0; }
  .pc-why{ padding: 0; }
  .pc-why__title{ margin: 8px 0 22px; }
  .pc-why__badges{ margin-top: 22px; }
  .pc-sec-head{ margin-bottom: 18px; }
  .pc-statband__grid{ padding-top: 30px; padding-bottom: 30px; gap: 22px; }
  footer#footer{ margin-top: 40px; }
  .footer__before{ padding: 32px 0 28px; }
  .footer__main{ padding: 34px 0 20px; }
}

/* ─────────────────────────── 9 · cart & checkout (WP7) ─────────────────────────── */
/* Both pages sat on the cream body with no surfaces — everything below lifts
   the commerce panels onto white cards (same recipe as the product cards). */

/* — cart page — */
#cart .page-title-section{ font-size: clamp(24px, 3vw, 32px); margin: 6px 0 18px; }
#cart .cart-grid{ row-gap: 24px; }
#cart .cart-grid__products-details{
  background: var(--pc-cream);
  border: 1px solid var(--pc-line-soft);
  border-radius: var(--pc-r);
  box-shadow: var(--pc-shadow-card);
  padding: 6px 22px;
}
#cart .cart-overview > hr{ display: none; }
#cart .cart__item{ padding: 20px 0; }
/* WP15b: separator between items removed (PM) — whitespace + the support
   sub-card group things; a rule between the main items read as clutter. */
.product-line__img{
  width: 92px; height: 92px; object-fit: contain;
  background: var(--pc-sand); border-radius: 12px; padding: 8px;
}
.product-line__title{ font-weight: 700; color: var(--pc-ink); font-size: 14.5px; }
.product-line__title:hover{ color: var(--pc-magenta); }
.product-line__item-availability-message{ font-size: 12.5px; font-weight: 500; }
.product-line__item-price{ font-size: 13px; color: var(--pc-muted); font-weight: 600; }
.product-line__price{ font-size: 16px; font-weight: 800; color: var(--pc-ink); }
.js-remove-from-cart{
  font-size: 12.5px; font-weight: 600; color: var(--pc-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.js-remove-from-cart:hover{ color: var(--pc-magenta); }
#cart .cart__continue-shopping{ margin-top: 18px; }

/* cart-line quantity stepper — same seamless [−][n][+] group as the product
   page, scaled down to list size */
.product-line .quantity-button__group{
  display: inline-flex; align-items: stretch; flex-wrap: nowrap; width: auto;
  height: 42px;
  background: #fff; border: 1.5px solid var(--pc-line);
  border-radius: 10px; overflow: hidden;
}
.product-line .quantity-button__group .btn{
  width: 38px; margin: 0; padding: 0;
  border: 0; border-radius: 0; box-shadow: none;
  background: #fff; color: var(--pc-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.product-line .quantity-button__group .btn:hover{ background: var(--pc-lilac); color: var(--pc-ink); }
.product-line .quantity-button__group .btn .material-icons{ font-size: 16px; }
.product-line .quantity-button__group .form-control{
  width: 44px; flex: none; margin: 0; padding: 0;
  border: 0 !important; border-radius: 0; box-shadow: none !important;
  background: #fff; text-align: center;
  font-size: 14px; font-weight: 700; color: var(--pc-ink);
}

/* — order summary card (cart + checkout aside) — */
.cart-grid__aside-wrapper, .checkout-grid__aside-wrapper{
  background: var(--pc-cream);
  border: 1px solid var(--pc-line-soft);
  border-radius: var(--pc-r);
  box-shadow: var(--pc-shadow-card);
  padding: 22px 22px 20px;
}
@media (min-width: 992px){
  .cart-grid__aside-wrapper, .checkout-grid__aside-wrapper{ position: sticky; top: 88px; }
}
.cart-grid__aside-wrapper h2{ font-size: 19px; margin: 0 0 10px; }
.cart-grid__aside-wrapper > hr{ display: none; }
.cart-summary__line{
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 14px; padding: 5px 0;
}
.cart-summary__label{ color: var(--pc-muted); font-weight: 500; }
.cart-summary__value{ color: var(--pc-ink); font-weight: 600; }
/* stock border-block drew a second rule under the totals — top hairline only */
.cart-summary__total{ border-top: 1px solid var(--pc-line-soft); border-bottom: 0; margin: 10px 0 0; padding: 8px 0 0; }
.cart-summary__line--bold .cart-summary__label{ color: var(--pc-ink); font-weight: 700; }
.cart-summary__line--bold .cart-summary__value{ font-weight: 800; font-size: 16px; }
.cart-summary hr{ border-color: var(--pc-line); opacity: .35; }
/* promo code accordion → quiet hairline row (stock underlines the whole
   accordion wrapper too — kill it, the button's border-top is the only rule) */
.cart-voucher .accordion-item{ border: 0; background: transparent; }
.cart-voucher__accordion{ border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.cart-voucher .accordion-button{
  background: transparent; color: var(--pc-ink);
  font-size: 13.5px; font-weight: 700; padding: 14px 0 10px;
  box-shadow: none !important; border-top: 1px solid var(--pc-line-soft);
  border-radius: 0; margin-top: 6px;
}
.cart-voucher .accordion-button:not(.collapsed){ color: var(--pc-magenta); }
.cart-voucher .accordion-body{ padding: 0 0 12px; }
.cart-voucher__form{ display: flex; gap: 8px; }
.cart-voucher__form .js-voucher-input{ flex: 1 1 auto; min-width: 0; }
.cart-voucher__form .btn{ border-radius: 10px; font-size: 13px; padding: 8px 16px; box-shadow: none; }
/* checkout CTA */
.cart-summary__actions{ margin-top: 14px; }
.cart-summary__actions .btn{
  padding: 13px 24px; font-size: 15px; font-weight: 700;
  border-radius: var(--pc-r-tag);
}
#cart .cart-grid__footer{ margin-top: 44px; }

/* — checkout page — */
/* step rail — stock hummingbird lays each step out as a 25%-basis centered
   column with absolutely-positioned half-width connector lines behind the
   number (:before/:after at top:.6875rem). In our horizontal layout those
   lines strike through the labels and the 25% basis + gap forces a wrap —
   kill both stock pseudos, reset the basis, rebuild the connector inline. */
.checkout-steps{ padding: 16px 28px 14px; margin: 0 0 8px; }
.checkout-steps__desktop{ max-width: 1400px; }
.checkout-steps__list{
  display: flex; align-items: center; justify-content: center;
  gap: 10px 20px; flex-wrap: wrap;
  margin: 0; padding: 0; list-style: none;
}
.checkout-steps__step::before, .checkout-steps__step::after{ content: none; }
.checkout-steps__step{
  display: flex; align-items: center; gap: 9px;
  flex: 0 0 auto; position: static; text-align: left;
}
.checkout-steps__step + .checkout-steps__step::before{
  content: ""; position: static; flex: none; width: 26px; height: 1.5px;
  background: var(--pc-line); margin-right: 10px;
}
.checkout-steps__number{
  flex: none; width: 26px; height: 26px; margin: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1.5px solid var(--pc-line);
  font-size: 12.5px; font-weight: 700; color: var(--pc-muted);
}
.checkout-steps__step--current .checkout-steps__number{
  background: var(--pc-magenta); border-color: var(--pc-magenta); color: #fff;
}
.checkout-steps__step--success .checkout-steps__number{
  background: var(--pc-green); border-color: var(--pc-green); color: #fff;
}
.checkout-steps__btn{ padding: 0; font-size: 13.5px; font-weight: 600; color: var(--pc-muted); text-decoration: none; white-space: nowrap; }
.checkout-steps__btn.active, .checkout-steps__step--current .checkout-steps__btn,
.checkout-steps__step--success .checkout-steps__btn{ color: var(--pc-ink); }
.checkout-steps__btn:disabled{ color: var(--pc-muted); opacity: .55; }
.checkout-steps__title{ font-weight: 700; margin: 0; }
.checkout-steps__subtitle{ font-size: 12.5px; color: var(--pc-muted); margin: 0; }
/* step cards */
#checkout .checkout-grid{ margin-top: 10px; row-gap: 20px; }
#checkout section.step{
  background: var(--pc-cream);
  border: 1px solid var(--pc-line-soft);
  border-radius: var(--pc-r);
  box-shadow: var(--pc-shadow-card);
  padding: 24px 26px;
  margin-bottom: 14px;
}
#checkout .step__title hr{ display: none; }
#checkout .page-title-section{ font-size: 22px; margin: 0 0 10px; }
#checkout .step__title .h3{ font-size: 16.5px; margin: 0; color: var(--pc-muted); font-weight: 700; }
#checkout .step--unreachable{ box-shadow: none; padding: 16px 26px; }
/* new customer / sign in tabs */
#checkout .nav-underline{ gap: 22px; margin: 4px 0 18px; border-bottom: 1px solid var(--pc-line-soft); }
#checkout .nav-underline .nav-link{
  color: var(--pc-muted); font-weight: 600; font-size: 14px;
  padding: 6px 2px 10px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: none;
}
#checkout .nav-underline .nav-link:hover{ color: var(--pc-ink); }
#checkout .nav-underline .nav-link.active{ color: var(--pc-ink); border-bottom-color: var(--pc-magenta); }
#checkout .buttons-wrapper{ margin-top: 8px; }
#checkout .buttons-wrapper .btn-primary{ padding: 12px 28px; font-weight: 700; }
/* aside: order summary accordion inside the card */
#checkout .checkout__summary-accordion .accordion-item{ border: 0; background: transparent; }
#checkout .checkout__summary-accordion > .accordion-item > .accordion-header .accordion-button{
  background: transparent; color: var(--pc-ink);
  font-size: 19px; font-weight: 700; padding: 0 0 10px;
  box-shadow: none !important; border: 0;
}
#checkout .cart-summary__products-number{ font-size: 13px; font-weight: 600; color: var(--pc-muted); }
#checkout .cart-summary__products-accordion .accordion-button{
  font-size: 13px; font-weight: 700; color: var(--pc-magenta-dk);
  background: transparent; padding: 8px 0; box-shadow: none !important; border: 0;
}
.cart-summary-product__img{
  width: 56px; height: 56px; object-fit: contain;
  background: var(--pc-sand); border-radius: 10px; padding: 5px;
}
.cart-summary-product__link{ font-size: 13px; font-weight: 600; color: var(--pc-ink); }
.cart-summary-product__price .label, .cart-summary-product__quantity{ font-size: 12.5px; color: var(--pc-muted); }
.cart-summary-product__total{ font-size: 13.5px; font-weight: 700; }
/* phones */
@media (max-width: 576px){
  #cart .cart-grid__products-details{ padding: 2px 14px; }
  .product-line__img{ width: 72px; height: 72px; }
  .cart-grid__aside-wrapper, .checkout-grid__aside-wrapper{ padding: 18px 16px; }
  #checkout section.step{ padding: 18px 16px; }
  #checkout .step--unreachable{ padding: 14px 16px; }
  .checkout-steps{ padding: 12px 18px 0; }
}

/* toasts / notifications accents */
.toast{ border-radius: 14px; }

/* back-to-top + skip link keep bootstrap styling but branded */
.back-to-top-link.btn-primary, .skip-link.btn-primary{ border-radius: var(--pc-r-sm); }

/* ============================================================
   § WP11 · account + CMS pages — carded (were bare on cream)
   markup facts: every customer page = aside.account-menu--sidebar
   + section.page-content--customer; hub tiles = .account-menu--main
   > a.account-menu__link; auth pages = .login / .register-form /
   form.forgotten-password inside page-content--general.
   ============================================================ */

/* --- shared card shell --- */
.page-content--customer,
.login,
.register-form,
form.forgotten-password,
.contact-form,
#left-column .ps-contactinfo, /* scoped! ps_contactinfo renders in the FOOTER too */
.page-content--cms{
  background: var(--pc-cream);
  border: 1px solid var(--pc-line-soft);
  border-radius: 16px;
  padding: 26px 28px;
  box-shadow: 0 6px 18px -14px rgba(35,32,79,.25);
}

/* --- account hub tiles --- */
.account-menu--main{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.account-menu--main .account-menu__link{
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  background: var(--pc-cream);
  border: 1px solid var(--pc-line-soft); border-radius: 16px;
  padding: 20px 18px;
  font-size: 14.5px; font-weight: 700; color: var(--pc-ink); line-height: 1.35;
  transition: transform .15s ease, box-shadow .15s ease;
}
.account-menu--main .account-menu__link:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -14px rgba(35,32,79,.35);
  color: var(--pc-ink);
}
.account-menu--main .account-menu__icon{
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--pc-ink);
}
/* goal-tile tint rotation on the icon chips (paper card stays white) */
.account-menu--main .account-menu__link:nth-child(3n+1) .account-menu__icon{ background: var(--pc-blush); }
.account-menu--main .account-menu__link:nth-child(3n+2) .account-menu__icon{ background: var(--pc-lilac); }
.account-menu--main .account-menu__link:nth-child(3n+3) .account-menu__icon{ background: var(--pc-sand); }
.account-menu--main .account-menu__link--signout{ color: var(--pc-magenta-dk); }
.account-menu--main .account-menu__link--signout .account-menu__icon{
  background: var(--pc-blush); color: var(--pc-magenta-dk);
}

/* the hub page is a menu of cards, not content — no outer card behind it */
.page-content--customer:has(> .account-menu--main){
  background: transparent; border: 0; box-shadow: none; padding: 0;
}

/* --- sidebar menu --- */
.account-menu--sidebar{
  background: var(--pc-cream);
  border: 1px solid var(--pc-line-soft); border-radius: 16px;
  padding: 18px 14px;
  box-shadow: 0 6px 18px -14px rgba(35,32,79,.25);
}
.account-menu--sidebar .account-menu__title{
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pc-magenta);
  margin: 2px 0 10px; padding: 0 10px;
}
.account-menu--sidebar .account-menu__nav{ display: flex; flex-direction: column; gap: 2px; }
.account-menu--sidebar .account-menu__link{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--pc-ink);
}
.account-menu--sidebar .account-menu__link:hover{ background: var(--pc-blush); color: var(--pc-ink); }
.account-menu--sidebar .account-menu__icon{ font-size: 19px; color: var(--pc-muted); }
.account-menu--sidebar .account-menu__link:hover .account-menu__icon{ color: var(--pc-magenta-dk); }
.account-menu--sidebar .account-menu__link--signout,
.account-menu--sidebar .account-menu__link--signout .account-menu__icon{ color: var(--pc-magenta-dk); }

/* --- customer page furniture --- */
.account-menu__back.btn{
  background: var(--pc-cream); /* opaque, never see-through to the page (user request) */
  border-radius: 99px; font-size: 13px; font-weight: 600;
  padding: 7px 16px; margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.page--full-width .page-title-section{ margin-bottom: 14px; }

/* address tiles: tinted inner cards inside the white content card */
.address-card{
  background: var(--pc-paper);
  border: 1px solid var(--pc-line-soft); border-radius: 12px;
  padding: 16px;
}
.address-card--add-address{
  background: transparent; border: 1.5px dashed var(--pc-line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-weight: 700; color: var(--pc-ink);
  transition: border-color .15s ease, background .15s ease;
}
.address-card--add-address:hover{ background: var(--pc-blush); border-color: var(--pc-magenta); color: var(--pc-ink); }

/* legacy CMS bodies repeat their own h1 under the page title — hide the dupe */
.page-content--cms > h1.page-heading{ display: none; }

/* --- auth pages --- */
.login{ padding: 28px; background: var(--pc-cream); }
.login .btn-basic{ background: transparent; padding-left: 0; } /* plain link, no beige box */
.login hr{ margin: 22px 0; opacity: .5; }
.login__register-prompt .h4{ font-size: 15px; font-weight: 700; margin-bottom: 12px; }
form.forgotten-password .send-renew-password-link{ font-size: 14px; color: var(--pc-muted); }

/* --- CMS + contact --- */
.page-content--cms{ padding: 30px 32px; }
#left-column .ps-contactinfo{ padding: 22px 20px; }
#left-column .ps-contactinfo__title{ font-size: 15px; font-weight: 700; margin-bottom: 14px; }
#left-column .ps-contactinfo__item{ display: flex; gap: 10px; font-size: 13.5px; color: var(--pc-muted); }
#left-column .ps-contactinfo__item .material-icons{ color: var(--pc-magenta); font-size: 20px; }
#left-column .ps-contactinfo hr{ margin: 12px 0; opacity: .5; }

/* phones / tablets */
@media (max-width: 991.98px){
  .account-menu--sidebar{ margin-bottom: 16px; }
}
@media (max-width: 767.98px){
  .page-content--customer,
  .login, .register-form, form.forgotten-password,
  .contact-form, .page-content--cms{ padding: 18px 16px; }
  .account-menu--main{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .account-menu--main .account-menu__link{ padding: 14px 13px; font-size: 13px; gap: 10px; }
  .account-menu--main .account-menu__icon{ width: 36px; height: 36px; font-size: 19px; border-radius: 10px; }
}

/* ============================================================
   WP13 — product long-description system (pc-pdesc)
   Class-based twin of the category pc-desc: the HTML in
   ps_product_lang.description carries ONLY these classes, all
   color/spacing lives here (docs/03-CONTENT-RULESET.md).
   NO outer background — the copy sits directly on the cream
   description card; sub-cards go white, accent bands go night (WP14).
   ============================================================ */
.pc-pdesc{ color: var(--pc-muted); font-size: 15px; line-height: 1.65; }
.pc-pdesc h2{
  color: var(--pc-ink); font-size: clamp(26px, 3.6vw, 36px); line-height: 1.15;
  font-weight: 800; letter-spacing: -.01em; margin: 0 0 20px;
}
/* the italic slant eats the word space that follows it ("100-hour package"
   read as one word) — give it back a sliver of padding */
.pc-pdesc h2 em{ font-style: italic; padding-right: .14em; }
.pc-pdesc p{ margin: 0 0 16px; max-width: 70ch; }
.pc-pdesc p:last-child{ margin-bottom: 0; }
.pc-pdesc strong, .pc-pdesc b{ color: var(--pc-ink); font-weight: 700; }

/* numbered feature cards — cream on white (page-bg echo) */
.pc-pdesc__grid{
  /* 320px min → 3-across in the ~1250px description card (6 cards = 3+3,
     no orphan row); degrades to 2 / 1 columns on narrower screens */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px; margin: 30px 0 0;
}
.pc-pdesc__card{
  background: var(--pc-paper); border: 1px solid var(--pc-line-soft);
  border-radius: 14px; padding: 20px 20px 22px;
}
.pc-pdesc__num{
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--pc-blush); color: var(--pc-magenta-dk);
  font-size: 13px; font-weight: 800; margin: 0 0 18px;
}
.pc-pdesc__card h3{ color: var(--pc-ink); font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; }
.pc-pdesc__card p{ font-size: 13.5px; line-height: 1.6; margin: 0; }

/* dark accent bands (D2) — stats + CTA */
.pc-pdesc__band{
  background: radial-gradient(circle at 106% -34%, rgba(232,13,110,.55) 0%, rgba(232,13,110,0) 46%), var(--pc-night);
  border-radius: 16px; color: #fff; padding: 34px 36px; margin: 30px 0 0;
}
.pc-pdesc__band--stats{ display: flex; flex-wrap: wrap; gap: 36px; align-items: center; }
.pc-pdesc__stat{ flex: 0 1 200px; min-width: 170px; }
.pc-pdesc__stat b{ display: block; font-size: 52px; font-weight: 800; line-height: 1; color: #fff; letter-spacing: -.02em; }
.pc-pdesc__stat b i{ font-style: normal; color: var(--pc-magenta); }
.pc-pdesc__stat p{ font-size: 13px; line-height: 1.5; color: #B7AEDE; margin: 14px 0 0; }
.pc-pdesc__bars{ flex: 1 1 320px; display: flex; flex-direction: column; gap: 20px; }
.pc-pdesc__meter p{ font-size: 12.5px; color: #CFC7EE; margin: 0 0 8px; max-width: none; }
.pc-pdesc__bar{ display: flex; align-items: center; gap: 14px; }
.pc-pdesc__bar i{
  flex: 1; height: 11px; border-radius: 99px; overflow: hidden;
  background: rgba(255,255,255,.14); position: relative;
}
.pc-pdesc__bar i::before{
  content: ""; position: absolute; top: 0; bottom: 0; left: 0;
  border-radius: 99px; width: 88%; background: #8B81BD;
}
.pc-pdesc__bar--fast i::before{ width: 10%; background: linear-gradient(90deg, var(--pc-magenta), #F0568C); }
.pc-pdesc__bar span{ font-size: 12.5px; color: #CFC7EE; white-space: nowrap; min-width: 64px; text-align: right; }

/* alternating text/screenshot rows — DOM is always text-first,
   --rev flips it visually on desktop; mobile stacks text → image */
.pc-pdesc__split{ display: flex; flex-wrap: wrap; gap: 32px 40px; align-items: center; margin: 40px 0 0; }
.pc-pdesc__split--rev{ flex-direction: row-reverse; }
.pc-pdesc__txt{ flex: 1 1 320px; min-width: 260px; }
.pc-pdesc__txt h3{ color: var(--pc-ink); font-size: clamp(20px, 2.4vw, 25px); line-height: 1.25; font-weight: 800; margin: 0 0 12px; }
.pc-pdesc__shot{
  /* natural size, capped — never stretched to fill the flex column
     (a 240px phone mockup blown up to half the row looked huge) */
  flex: 0 1 auto; align-self: center; display: block;
  width: auto; height: auto; max-width: min(100%, 520px); max-height: 420px;
  object-fit: contain; margin-inline: auto;
  border-radius: 12px; border: 1px solid var(--pc-line-soft); background: var(--pc-paper);
}

/* video embed — same frame treatment as __shot */
.pc-pdesc__video{
  flex: 1 1 320px; min-width: 260px; aspect-ratio: 16 / 9;
  border-radius: 12px; border: 1px solid var(--pc-line-soft);
  overflow: hidden; background: var(--pc-ink);
}
.pc-pdesc__video iframe{ display: block; width: 100%; height: 100%; border: 0; }

/* checkmark feature lists */
.pc-pdesc ul{
  list-style: none; padding: 0; margin: 0 0 16px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 28px;
}
.pc-pdesc ul li{ position: relative; padding-left: 24px; font-size: 14px; line-height: 1.55; }
.pc-pdesc ul li::before{
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--pc-magenta); font-weight: 700;
}
.pc-pdesc__txt ul{ grid-template-columns: 1fr; }

/* small screenshot/thumbnail strip (e.g. pop-up type previews) */
.pc-pdesc__thumbs{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin: 30px 0 0;
}
.pc-pdesc__thumbs img{
  width: 100%; height: auto; display: block;
  border-radius: 10px; border: 1px solid var(--pc-line-soft); background: var(--pc-paper);
}

/* highlight callout — blush tint, magenta spine */
.pc-pdesc__note{
  background: var(--pc-blush); border: 1px solid var(--pc-line-soft);
  border-left: 3px solid var(--pc-magenta); border-radius: 14px;
  padding: 24px 26px; margin: 40px 0 0;
}
.pc-pdesc__kick{
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--pc-magenta-dk);
  background: var(--pc-paper); border-radius: 99px; padding: 5px 12px; margin: 0 0 12px;
}
.pc-pdesc__note p{ font-size: 14.5px; margin: 0; }

/* CTA band */
.pc-pdesc__band--cta{ text-align: center; }
.pc-pdesc__band--cta h3{
  color: #fff; font-size: clamp(20px, 2.4vw, 25px); line-height: 1.3;
  font-weight: 800; max-width: 26ch; margin: 0 auto 20px;
}
.pc-pdesc__cta{
  display: inline-block; background: var(--pc-magenta); color: #fff;
  font-weight: 700; font-size: 14.5px; text-decoration: none;
  padding: 13px 28px; border-radius: 99px; transition: background .18s ease;
}
.pc-pdesc__cta:hover, .pc-pdesc__cta:focus{ background: var(--pc-magenta-dk); color: #fff; text-decoration: none; }

/* closing note — cream card + inline-SVG avatar (never an <img> logo) */
.pc-pdesc__quote{
  background: var(--pc-paper); border: 1px solid var(--pc-line-soft); border-radius: 14px;
  padding: 26px 28px; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin: 30px 0 0;
}
.pc-pdesc__av{ flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%; overflow: hidden; display: block; }
.pc-pdesc__av svg{ display: block; width: 100%; height: 100%; }
.pc-pdesc__quote > div{ flex: 1 1 260px; }
.pc-pdesc__quote h3{ color: var(--pc-ink); font-size: 17px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; }
.pc-pdesc__quote p{ font-size: 14px; margin: 0; }

@media (max-width: 767.98px){
  .pc-pdesc__band{ padding: 26px 22px; }
  .pc-pdesc__stat b{ font-size: 42px; }
  .pc-pdesc__split{ gap: 18px; margin-top: 32px; }
  .pc-pdesc__split, .pc-pdesc__split--rev{ flex-direction: column; align-items: stretch; }
  .pc-pdesc__note{ padding: 20px 18px; margin-top: 32px; }
}

/* == WP15 : product page data sheet =================================
   The "Data sheet" accordion body zebra-striped its rows in grey; on the
   cream accordion card that read as a dirty slab. Rows now sit directly
   on the card with hairline separators. */
.product__accordion .accordion-body{ background: transparent; }
.product__accordion .details__list{ margin-bottom: 0; background: transparent; }  /* the UL itself painted the grey slab (#F8F9FA) */
.product__accordion .details__item{ background: transparent !important; }
.product__accordion .details__item + .details__item{ border-top: 1px solid var(--pc-line-soft); }

/* == WP15d : review modal cream sections + stars up top + availability ==== */
/* review modal: context + ratings band on cream (PM: "too white"); footer
   strip cream too, inputs stay on white */
#post-product-comment-modal .modal-body > .row:first-child{
  background: var(--pc-cream);
  border: 1px solid var(--pc-line-soft);
  border-radius: 14px;
  margin: 0 0 18px;
  padding: 14px 8px 8px;
}
#post-product-comment-modal .modal-footer{
  background: var(--pc-cream);
  border-top: 1px solid var(--pc-line-soft);
}

/* review stars live under the H1 (pc-rating-top in product.tpl); the copy the
   hook still prints in the additional-info zone is hidden so share stays put */
.pc-rating-top{ margin: 0 0 10px; }
.pc-rating-top .product-comments-additional-info{ margin: 0; }
.product__additional-info .product-comments-additional-info{ display: none; }

/* virtual products never run out: the orange "Product available for orders"
   status is noise — the green In-Stock stays. Product page + cart lines. */
.product__availability-status.text-warning{ display: none; }
#cart .product-line__item-availability-message.text-warning{ display: none; }

/* ------------------------------------------------------------------ */
/* WP16d: hummingbird's .btn-basic ghost buttons carry a white border  */
/* that is invisible on the stock white theme but reads as a washed-   */
/* out pill on our cream cards (login "Forgot your password?",         */
/* checkout "Billing address differs from shipping address"). They     */
/* are secondary text actions - render them as plain links.            */
.btn-basic {
  background: transparent;
  border-color: transparent;
}

.btn-basic:hover,
.btn-basic:focus {
  background: transparent;
  border-color: transparent;
  color: var(--pc-magenta, #E80D6E);
  text-decoration: underline;
}