/* ==========================================================================
   GEARPIMP — Inner pages
   Components for About, Services, Shop, Product, Cart, Checkout, Account,
   Contact, FAQ, Journal, Testimonials, Legal and utility pages.
   Loaded after style.css; homepage sections are not touched here.
   ========================================================================== */

/* ---------- Page hero ---------- */
.page-hero{
  position:relative; overflow:hidden; isolation:isolate;
  background: var(--ink); color: var(--paper);
  padding-block: clamp(4.5rem, 9vw, 8rem) clamp(3.5rem, 7vw, 6rem);
}
.page-hero::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(55% 80% at 88% 10%, rgba(200,27,176,.30) 0%, rgba(200,27,176,0) 65%),
    radial-gradient(45% 70% at 5% 100%, rgba(138,10,130,.28) 0%, rgba(138,10,130,0) 70%);
}
.page-hero::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.35;
  background-image: linear-gradient(rgba(250,247,251,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(250,247,251,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 90% at 70% 30%, #000 0%, transparent 75%);
          mask-image: radial-gradient(70% 90% at 70% 30%, #000 0%, transparent 75%);
}
.page-hero .container{ position:relative; }
.page-hero-inner{ display:grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: var(--sp-8); align-items:end; }
.page-hero-title{ font-size: clamp(2.6rem, 5.6vw, 5.2rem); line-height:1.02; letter-spacing:-0.035em; margin-top: var(--sp-4); max-width: 16ch; }
.page-hero-title em{ font-style:normal; background: linear-gradient(120deg, #f3b8ea 0%, #c81bb0 60%, #ea5be1 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.page-hero .lede{ color: var(--paper-70); margin-top: var(--sp-5); max-width: 54ch; }
.page-hero-aside{ border-left:1px solid var(--line-dark); padding-left: var(--sp-6); display:flex; flex-direction:column; gap: var(--sp-4); }
.page-hero-aside p{ color: var(--paper-70); font-size: var(--fs-sm); }
.page-hero-links{ display:flex; flex-wrap:wrap; gap: var(--sp-2); }
.page-hero-links a{
  font-size: var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line-dark); border-radius:999px; padding: 8px 14px; color: var(--paper-70);
  transition: all .3s var(--ease);
}
.page-hero-links a:hover{ border-color: var(--purple-light); color: var(--paper); background: rgba(200,27,176,.14); }
.page-hero--compact{ padding-block: clamp(3.5rem, 6vw, 5rem) clamp(2.5rem, 4.5vw, 3.5rem); }
.page-hero--compact .page-hero-title{ font-size: clamp(2.3rem, 4.4vw, 3.8rem); }
.page-hero--image .page-hero-media{
  position:absolute; inset:0 0 0 auto; width: 48%; z-index:-1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
.page-hero--image .page-hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.55; filter: saturate(.85) contrast(1.05); }
.page-hero--image .page-hero-aside{
  border:1px solid var(--line-dark); border-radius: 14px; padding: var(--sp-6);
  background: rgba(23,10,31,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.breadcrumb span[aria-current]{ color: var(--paper); }

/* ---------- Section heads & utilities ---------- */
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: var(--sp-6); margin-bottom: var(--sp-7); flex-wrap:wrap; }
.section-head .h1, .section-head .h2{ margin-top: var(--sp-3); max-width: 20ch; }
.section-head .lede{ max-width: 44ch; }
.section-head--center{ flex-direction:column; align-items:center; text-align:center; }
.section-head--center .h1, .section-head--center .h2{ margin-inline:auto; }
.text-muted{ color: var(--ink-70); }
.stack-sm > * + *{ margin-top: var(--sp-3); }
.stack > * + *{ margin-top: var(--sp-5); }
.hp-field{ position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden; }
.pill{ display:inline-flex; align-items:center; gap:6px; font-size: .7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding: 5px 11px; border-radius:999px; background: var(--paper-soft); color: var(--purple); }
.pill--dark{ background: rgba(250,247,251,.1); color: var(--paper); }
.pill--success{ background: rgba(92,122,82,.14); color: var(--success); }
.icon{ flex-shrink:0; }

/* ---------- Pillars band ---------- */
.pillars{ display:grid; grid-template-columns: repeat(4, 1fr); border-block:1px solid var(--line-light); }
.pillar{ padding: var(--sp-6) var(--sp-5); border-right:1px solid var(--line-light); display:flex; flex-direction:column; gap: var(--sp-3); }
.pillar:last-child{ border-right:0; }
.pillar-icon{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--paper-soft); color: var(--purple); }
.pillar h3{ font-size: 1.05rem; }
.pillar p{ font-size: var(--fs-sm); color: var(--ink-70); }
.section-dark .pillars{ border-color: var(--line-dark); }
.section-dark .pillar{ border-color: var(--line-dark); }
.section-dark .pillar p{ color: var(--paper-70); }
.section-dark .pillar-icon{ background: rgba(250,247,251,.08); color: #ea5be1; }

/* ---------- Media frame (offset brand block behind an image) ---------- */
.media-frame{ position:relative; padding: 0 7% 7% 0; }
.media-frame::before{
  content:''; position:absolute; inset: 9% 0 0 9%; z-index:0;
  background: var(--gradient-brand); opacity:.9;
  clip-path: polygon(10% 0%, 100% 0%, 100% 88%, 90% 100%, 0% 100%, 0% 12%);
}
.media-frame .gear-art{ position:relative; z-index:1; aspect-ratio: 4/5; box-shadow: 0 30px 60px rgba(23,10,31,.2); }
.media-frame--wide .gear-art{ aspect-ratio: 4/3; }
.media-frame .gear-art img{ transition: transform 1.2s var(--ease); }
.media-frame:hover .gear-art img{ transform: scale(1.04); }

/* ---------- Split feature ---------- */
.feature-split{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2.5rem, 7vw, 7rem); align-items:center; }
.feature-split--reverse > :first-child{ order:2; }
.feature-body .num-index{ display:block; font-size: clamp(2.8rem, 5vw, 4.5rem); line-height:1; opacity:.18; }
.feature-body .h2{ margin-top: var(--sp-3); }
.feature-body .lede{ margin-top: var(--sp-4); }

/* ---------- Check list ---------- */
.check-list{ display:grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.check-list li{ display:flex; gap: var(--sp-3); align-items:flex-start; color: var(--ink-70); }
.check-list li .icon{ margin-top:2px; width:22px; height:22px; padding:3px; border-radius:50%; background: rgba(138,10,130,.1); color: var(--purple); }
.section-dark .check-list li{ color: var(--paper-70); }
.section-dark .check-list li .icon{ background: rgba(234,91,225,.16); color:#ea5be1; }

/* ---------- Process steps ---------- */
.process{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); counter-reset: step; position:relative; }
.process-step{ position:relative; padding-top: var(--sp-7); }
.process-step::before{
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position:absolute; top:0; left:0; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size: .85rem;
  background: var(--paper); border:1px solid rgba(138,10,130,.35); color: var(--purple);
  z-index:1;
}
.process-step::after{ content:''; position:absolute; top:22px; left:52px; right: calc(var(--sp-5) * -1 + 8px); height:1px; background: linear-gradient(90deg, rgba(138,10,130,.4), rgba(138,10,130,.08)); }
.process-step:last-child::after{ display:none; }
.process-step h4{ font-family: var(--font-display); font-size: 1.05rem; margin-top: var(--sp-2); }
.process-step p{ font-size: var(--fs-sm); color: var(--ink-70); margin-top: var(--sp-2); }
.process--compact{ margin-top: var(--sp-6); grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-5); }
.process--compact .process-step{ padding-top:0; padding-left: 56px; }
.process--compact .process-step::after{ display:none; }
.process--compact .process-step h4{ margin-top: 10px; }
.section-dark .process-step::before{ background: var(--ink); border-color: rgba(234,91,225,.5); color:#ea5be1; }
.section-dark .process-step p{ color: var(--paper-70); }

/* ---------- Service quick nav ---------- */
.chip-nav{
  position:sticky; top: calc(var(--gp-header-height, 76px) - 1px); z-index:50;
  background: rgba(250,247,251,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line-light);
}
body:not(.header-pinned) .chip-nav{ top:0; }
.chip-nav ~ section[id]{ scroll-margin-top: calc(var(--gp-header-height, 76px) + 64px); }
.chip-nav-inner{ display:flex; gap: var(--sp-2); overflow-x:auto; padding-block: var(--sp-3); scrollbar-width:none; }
.chip-nav-inner::-webkit-scrollbar{ display:none; }
.chip{
  flex-shrink:0; display:inline-flex; align-items:center; gap: 8px;
  padding: 9px 16px; border-radius:999px; border:1px solid var(--line-light);
  font-size: var(--fs-sm); font-weight:600; color: var(--ink-70); background: var(--paper);
  transition: all .25s var(--ease); white-space:nowrap;
}
.chip:hover{ border-color: var(--ink); color: var(--ink); }
.chip.active, .chip[aria-pressed="true"]{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip .chip-num{ font-size: .7rem; opacity:.55; font-weight:700; }

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; overflow:hidden; isolation:isolate;
  background: var(--ink); color: var(--paper); border-radius: 18px;
  padding: clamp(2.5rem, 6vw, 5rem);
  display:grid; grid-template-columns: minmax(0,1.3fr) auto; gap: var(--sp-6); align-items:center;
}
.cta-band::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(60% 120% at 100% 0%, rgba(200,27,176,.45) 0%, rgba(200,27,176,0) 60%), radial-gradient(40% 90% at 0% 100%, rgba(138,10,130,.35) 0%, rgba(138,10,130,0) 70%);
}
.cta-band .h2{ max-width: 18ch; }
.cta-band .lede{ color: var(--paper-70); margin-top: var(--sp-4); }
.cta-band-actions{ display:flex; flex-direction:column; gap: var(--sp-3); min-width: 240px; }
.cta-band-actions .btn{ justify-content:center; }
.cta-band .btn-primary{ background: var(--gradient-brand); border-color: transparent; color: var(--paper); box-shadow: 0 14px 34px rgba(138,10,130,.4); }
.cta-band .btn-primary:hover{ background: var(--gradient-brand); color: var(--paper); border-color: transparent; }
.cta-band .btn-outline{ color: var(--paper); border-color: rgba(250,247,251,.5); }
.cta-band .btn-outline:hover{ background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ---------- Cards ---------- */
.card{
  background:#fff; border:1px solid var(--line-light); border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 24px 48px rgba(23,10,31,.06);
}
.card--soft{ background: var(--paper-soft); border-color: transparent; box-shadow:none; }
.card-title{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:700; }
.card-dark{
  position:relative; overflow:hidden; isolation:isolate;
  background: var(--ink); color: var(--paper); border-radius: 14px; padding: clamp(1.75rem, 3vw, 2.75rem);
}
.card-dark::before{ content:''; position:absolute; inset:0; z-index:-1; background: radial-gradient(70% 70% at 100% 0%, rgba(200,27,176,.35) 0%, rgba(200,27,176,0) 70%); }

/* ---------- Forms ---------- */
.form-group label{ font-weight:700; letter-spacing:.1em; color: var(--ink-70); }
.form-group .req{ color: var(--purple); }
.form-control{
  background:#fff; border:1px solid rgba(23,10,31,.16); border-radius: 8px;
  padding: 0.85rem 1rem; min-height: 52px; font-size: 1rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-control:hover{ border-color: rgba(23,10,31,.3); }
.form-control:focus{ outline:none; border-color: var(--purple); box-shadow: 0 0 0 4px rgba(138,10,130,.12); }
.form-control[aria-invalid="true"]{ border-color: var(--error); box-shadow: 0 0 0 4px rgba(168,63,52,.1); }
select.form-control{
  appearance:none; -webkit-appearance:none; padding-right: 2.75rem; cursor:pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23170a1f' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 1rem center;
}
textarea.form-control{ min-height: 150px; }
.field-hint{ font-size: var(--fs-xs); color: var(--ink-50); margin-top: 6px; }
.field-error{ font-size: var(--fs-xs); color: var(--error); margin-top: 6px; font-weight:600; }
.form-note{ font-size: var(--fs-xs); color: var(--ink-50); margin-top: var(--sp-4); }
.form-note a{ text-decoration: underline; }
.checkbox-row{ display:flex; gap: var(--sp-3); align-items:flex-start; font-size: var(--fs-sm); color: var(--ink-70); cursor:pointer; }
.checkbox-row input{ margin-top:3px; width:18px; height:18px; accent-color: var(--purple); flex-shrink:0; }
.checkbox-row a{ text-decoration: underline; }
.form-actions{ display:flex; align-items:center; gap: var(--sp-5); flex-wrap:wrap; margin-top: var(--sp-2); }
.form-fieldset{ border:0; margin-top: var(--sp-2); }
.form-fieldset[hidden]{ display:none; }
.form-fieldset legend{ font-family: var(--font-display); font-weight:700; font-size: 1.05rem; margin-bottom: var(--sp-4); display:flex; align-items:center; gap: var(--sp-2); }

.alert{ display:flex; gap: var(--sp-3); align-items:flex-start; padding: var(--sp-4) var(--sp-5); border-radius: 10px; font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
.alert .icon{ margin-top:1px; }
.alert strong{ display:block; font-size: .95rem; margin-bottom:2px; }
.alert--success{ background: rgba(92,122,82,.1); color: #3f5a37; border:1px solid rgba(92,122,82,.28); }
.alert--error{ background: rgba(168,63,52,.08); color: var(--error); border:1px solid rgba(168,63,52,.25); }
.alert--info{ background: var(--paper-soft); color: var(--ink-70); border:1px solid rgba(138,10,130,.15); }

/* Radio option cards */
.option-cards{ display:grid; gap: var(--sp-3); }
.option-card{ position:relative; display:flex; gap: var(--sp-4); align-items:flex-start; padding: var(--sp-4) var(--sp-5); border:1px solid rgba(23,10,31,.16); border-radius: 10px; background:#fff; cursor:pointer; transition: border-color .2s, box-shadow .2s, background .2s; }
.option-card:hover{ border-color: rgba(23,10,31,.35); }
.option-card input{ position:absolute; opacity:0; pointer-events:none; }
.option-card-radio{ width:20px; height:20px; border-radius:50%; border:1.5px solid rgba(23,10,31,.35); flex-shrink:0; margin-top:2px; position:relative; transition: border-color .2s; }
.option-card-radio::after{ content:''; position:absolute; inset:4px; border-radius:50%; background: var(--purple); transform: scale(0); transition: transform .2s var(--ease); }
.option-card input:checked ~ .option-card-radio{ border-color: var(--purple); }
.option-card input:checked ~ .option-card-radio::after{ transform: scale(1); }
.option-card:has(input:checked){ border-color: var(--purple); box-shadow: 0 0 0 3px rgba(138,10,130,.1); background: #fdfbfe; }
.option-card input:focus-visible ~ .option-card-radio{ box-shadow: 0 0 0 4px rgba(138,10,130,.2); }
.option-card strong{ display:block; font-size: .98rem; }
.option-card span.option-desc{ font-size: var(--fs-sm); color: var(--ink-70); }

/* ---------- Contact ---------- */
.contact-layout{ display:grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items:start; }
.contact-methods{ display:grid; gap: var(--sp-2); margin-top: var(--sp-6); }
.contact-method{ display:flex; gap: var(--sp-4); align-items:center; padding: var(--sp-4); border-radius: 10px; border:1px solid var(--line-dark); transition: all .3s var(--ease); }
a.contact-method:hover{ border-color: rgba(234,91,225,.6); background: rgba(250,247,251,.05); transform: translateX(4px); }
.contact-method-icon{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: rgba(250,247,251,.08); color:#ea5be1; flex-shrink:0; }
.contact-method small{ display:block; font-size: .7rem; letter-spacing:.14em; text-transform:uppercase; color: var(--paper-70); font-weight:700; }
.contact-method span{ font-family: var(--font-display); font-weight:600; font-size: 1.02rem; word-break: break-word; }
.contact-aside{ position:sticky; top: calc(var(--gp-header-height, 76px) + var(--sp-5)); display:grid; gap: var(--sp-5); }
.subject-tabs{ display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }

/* ---------- FAQ ---------- */
.faq-layout{ display:grid; grid-template-columns: 260px minmax(0,1fr); gap: clamp(2rem, 5vw, 5rem); align-items:start; }
.faq-sidebar{ position:sticky; top: calc(var(--gp-header-height, 76px) + var(--sp-5)); display:grid; gap: var(--sp-5); }
.faq-sidebar nav{ display:grid; gap:2px; }
.faq-sidebar nav button{ text-align:left; padding: 10px 14px; border-radius: 8px; font-size: var(--fs-sm); font-weight:600; color: var(--ink-70); display:flex; justify-content:space-between; transition: all .2s; }
.faq-sidebar nav button:hover{ background: var(--paper-soft); color: var(--ink); }
.faq-sidebar nav button.active{ background: var(--ink); color: var(--paper); }
.faq-sidebar nav button .count{ font-size: .75rem; opacity:.55; }
.faq-search{ position:relative; }
.faq-search .icon{ position:absolute; left: 1rem; top:50%; transform: translateY(-50%); color: var(--ink-50); }
.faq-search .form-control{ padding-left: 2.75rem; }
.faq-group{ margin-bottom: var(--sp-8); }
.faq-group-title{ display:flex; align-items:center; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom:1px solid var(--ink); margin-bottom: 0 !important; }
.faq-empty{ display:none; padding: var(--sp-7) 0; text-align:center; color: var(--ink-70); }
.faq-empty.show{ display:block; }
.accordion-trigger{ gap: var(--sp-4); }
.accordion-trigger:hover{ color: var(--purple); }
.accordion-icon{ width:30px; height:30px; border-radius:50%; border:1px solid var(--line-light); display:inline-flex; align-items:center; justify-content:center; font-family: var(--font-body); font-weight:500; font-size: 1.1rem; transition: transform .3s var(--ease), background .3s, color .3s, border-color .3s; }
.accordion-item.open .accordion-icon{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.accordion-panel-inner a{ text-decoration: underline; color: var(--purple); }
.accordion-panel-inner p + p{ margin-top: var(--sp-3); }

/* ---------- Journal ---------- */
.journal-featured{ display:grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items:center; margin-bottom: var(--sp-9); }
.journal-featured .gear-art{ aspect-ratio: 5/4; border-radius: 14px; }
.journal-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7) var(--sp-6); }
.journal-card{ display:flex; flex-direction:column; }
.journal-card .gear-art{ aspect-ratio: 4/3; border-radius: 12px; margin-bottom: var(--sp-5); }
.journal-card .gear-art img, .journal-featured .gear-art img{ transition: transform .9s var(--ease); }
.journal-card:hover .gear-art img, .journal-featured:hover .gear-art img{ transform: scale(1.05); }
.journal-meta{ display:flex; align-items:center; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-50); text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.journal-meta .dot{ width:3px; height:3px; border-radius:50%; background: currentColor; }
.journal-card h3{ font-size: 1.35rem; margin-top: var(--sp-3); line-height:1.2; transition: color .2s; }
.journal-card:hover h3{ color: var(--purple); }
.journal-card p{ color: var(--ink-70); margin-top: var(--sp-3); font-size: var(--fs-sm); }
.journal-card .btn-text{ margin-top: var(--sp-4); align-self:flex-start; }
.journal-filters{ display:flex; gap: var(--sp-2); flex-wrap:wrap; margin-bottom: var(--sp-7); }

.article-hero{ padding-block: clamp(4rem, 8vw, 7rem) 0; }
.article-hero .page-hero-title{ max-width: 22ch; }
.article-cover{ margin-top: clamp(-5rem, -6vw, -3rem); position:relative; z-index:2; }
.article-cover .gear-art{ aspect-ratio: 21/9; border-radius: 16px; box-shadow: 0 40px 80px rgba(23,10,31,.25); }
.article-hero-spacer{ height: clamp(5rem, 8vw, 7rem); }
.article-layout{ display:grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(2.5rem, 6vw, 6rem); align-items:start; }
.prose{ max-width: 70ch; font-size: 1.08rem; line-height:1.8; color: #2c1d35; }
.prose > * + *{ margin-top: 1.25em; }
.prose h2{ font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: 2em; line-height:1.2; }
.prose h3{ font-size: 1.25rem; margin-top: 1.8em; }
.prose ul{ list-style: none; display:grid; gap: .6em; }
.prose ul li{ position:relative; padding-left: 1.6em; }
.prose ul li::before{ content:''; position:absolute; left:0; top:.72em; width:8px; height:8px; border-radius:50%; background: var(--gradient-brand); }
.prose blockquote{ border-left:3px solid var(--purple); padding: var(--sp-2) 0 var(--sp-2) var(--sp-5); font-family: var(--font-display); font-size: 1.35rem; line-height:1.45; color: var(--ink); font-weight:500; }
.prose a{ color: var(--purple); text-decoration: underline; }
.prose .lead{ font-size: 1.25rem; color: var(--ink); line-height:1.65; }
.article-aside{ position:sticky; top: calc(var(--gp-header-height, 76px) + var(--sp-5)); display:grid; gap: var(--sp-5); }
.share-row{ display:flex; gap: var(--sp-2); }

/* ---------- Testimonials page ---------- */
.testimonial-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.testimonial-grid .testimonial-card-v2{ flex:initial; background:#fff; }
.testimonial-grid .testimonial-card-v2:nth-child(1){ grid-column: span 2; }
.testimonial-grid .testimonial-card-v2:nth-child(1) .quote-text{ font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height:1.4; font-weight:500; }

/* ---------- Legal ---------- */
.legal-layout{ display:grid; grid-template-columns: 250px minmax(0,1fr); gap: clamp(2rem, 6vw, 6rem); align-items:start; }
.legal-toc{ position:sticky; top: calc(var(--gp-header-height, 76px) + var(--sp-5)); }
.legal-toc h4{ font-family: var(--font-body); font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.14em; color: var(--purple); margin-bottom: var(--sp-3); }
.legal-toc ol{ list-style:none; display:grid; gap:2px; counter-reset: toc; }
.legal-toc a{ display:block; padding: 7px 0 7px 14px; border-left:2px solid var(--line-light); font-size: var(--fs-sm); color: var(--ink-70); transition: all .2s; }
.legal-toc a:hover, .legal-toc a.active{ color: var(--ink); border-color: var(--purple); }
.legal-updated{ font-size: var(--fs-xs); color: var(--ink-50); margin-top: var(--sp-5); }
.legal-review{ margin-bottom: var(--sp-7); }

/* ---------- Shop extras ---------- */
.category-chips{ margin-bottom: var(--sp-6); }
.shop-hero-count{ font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem); font-weight:700; line-height:1; }

/* ---------- Product detail ---------- */
.pdp-hero{ background: var(--ink); padding-block: var(--sp-5); }
.pdp-hero .breadcrumb{ margin-bottom:0; }
.pdp-gallery-main{ border-radius: 14px; overflow:hidden; background: var(--paper-soft); }
.pdp-gallery-main .gear-art img{ transition: transform .6s var(--ease), object-position .6s var(--ease); }
.pdp-thumbs{ display:block; }
.pdp-thumbs-viewport{ border-radius:10px; }
.pdp-thumb-track{ display:block; width:100%; }
.pdp-thumb-page{ min-width:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-3); }
.pdp-thumb-page:last-child{ margin-bottom:0; }
.pdp-thumbs.is-paginated .pdp-thumbs-viewport{ overflow:hidden; }
.pdp-thumbs.is-paginated .pdp-thumb-track{ display:flex; transition:transform .35s var(--ease); }
.pdp-thumbs.is-paginated .pdp-thumb-page{ flex:0 0 100%; margin:0; }
.pdp-thumbs .thumb-wrap{ border-radius: 10px; overflow:hidden; border:2px solid transparent; opacity:.6; transition: opacity .2s, border-color .2s; background:none; padding:0; }
.pdp-thumbs .thumb-wrap:hover{ opacity:.9; }
.pdp-thumbs .thumb-wrap.active{ border-color: var(--purple); opacity:1; }
.pdp-thumbs .thumb-wrap .gear-art{ pointer-events:none; }
.pdp-thumbs .thumb-wrap:focus-visible{ outline-offset:-3px; z-index:1; }
.pdp-gallery-pagination{ display:none; justify-content:center; align-items:center; gap:var(--sp-4); margin-top:var(--sp-4); }
.pdp-thumbs.is-paginated .pdp-gallery-pagination{ display:flex; }
.pdp-gallery-page-btn{ min-width:88px; min-height:40px; padding:8px 14px; border:1px solid var(--line-light); border-radius:999px; font-size:var(--fs-xs); font-weight:700; transition:background .2s,color .2s,border-color .2s,opacity .2s; }
.pdp-gallery-page-btn:hover:not(:disabled){ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.pdp-gallery-page-btn:disabled{ opacity:.4; cursor:not-allowed; }
.pdp-gallery-page-status{ min-width:7ch; text-align:center; font-size:var(--fs-xs); color:var(--ink-70); font-variant-numeric:tabular-nums; }
.pdp-gallery-more{ display:flex; align-items:center; justify-content:center; gap:var(--sp-2); width:max-content; margin:var(--sp-3) auto 0; color:var(--purple); font-size:var(--fs-xs); font-weight:700; }
.pdp-gallery-more:hover{ text-decoration:underline; text-underline-offset:3px; }
.pdp-title{ font-size: clamp(2rem, 3.4vw, 3rem); margin-top: var(--sp-2); line-height:1.05; }
.pdp-tags{ display:flex; gap: var(--sp-2); flex-wrap:wrap; }
.pdp-lede{ color: var(--ink-70); margin-top: var(--sp-4); }
.pdp-meta-list{ margin-block: var(--sp-5); }
.pdp-meta-list dd{ font-weight:600; }
.pdp-actions .btn{ flex:1; justify-content:center; min-height:56px; }
.qty-control-lg{ border-radius: 8px; }
.qty-control-lg button:disabled{ opacity:.3; cursor:not-allowed; }
.pdp-assurances{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-6); }
.pdp-assurance{ display:flex; flex-direction:column; gap: 6px; padding: var(--sp-4); border-radius: 10px; background: var(--paper-soft); font-size: var(--fs-xs); color: var(--ink-70); }
.pdp-assurance .icon{ color: var(--purple); }
.pdp-assurance strong{ font-size: .82rem; color: var(--ink); }
.pdp-secondary-actions button, .pdp-secondary-actions a{ font-weight:600; }
.pdp-secondary-actions button.active{ color: var(--purple); }
.pdp-enquire-note{ margin-top: var(--sp-4); }
.pdp-details{ margin-top: var(--sp-7); }

.pdp-gallery-main, .pdp-thumbs, .pdp-info{ position:relative; top:auto; }
@media (min-width:1025px){
  .pdp-gallery{ position:sticky; top: calc(var(--gp-header-height, 76px) + var(--sp-5)); align-self:start; }
}
.site-header.scrolled .main-nav .nav-link.active{ color:#f08de6; }
.site-header.scrolled .main-nav .nav-link.active::after{ background:#f08de6; }

/* ---------- Cart & checkout ---------- */
.checkout-progress{ display:flex; align-items:center; gap: var(--sp-3); margin-top: var(--sp-5); font-size: var(--fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--paper-70); flex-wrap:wrap; }
.checkout-progress span{ display:inline-flex; align-items:center; gap: 8px; }
.checkout-progress span b{ width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line-dark); font-size:.7rem; }
.checkout-progress span.done b, .checkout-progress span.current b{ background: var(--gradient-brand); border-color: transparent; color: var(--paper); }
.checkout-progress span.current{ color: var(--paper); }
.checkout-progress i{ width: 28px; height:1px; background: var(--line-dark); }
.summary-box{ border-radius: 14px; position:sticky; top: calc(var(--gp-header-height, 76px) + var(--sp-5)); }
.summary-box .cart-line{ align-items:center; }
.summary-box .cart-line .gear-art{ width:64px; height:64px; border-radius:8px; flex-shrink:0; position:relative; }
.summary-trust{ display:grid; gap: var(--sp-2); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top:1px solid var(--line-light); }
.summary-trust div{ display:flex; gap: var(--sp-3); align-items:center; font-size: var(--fs-xs); color: var(--ink-70); }
.summary-trust .icon{ color: var(--purple); }
.cart-product .gear-art{ border-radius: 10px; overflow:hidden; position:relative; }
.cart-table-row .qty-control{ border-radius: 6px; }
.checkout-step{ background:#fff; border:1px solid var(--line-light); border-radius: 14px; padding: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: var(--sp-5); }
.checkout-step h3{ font-size: 1.25rem; }
.checkout-signin{ margin-bottom: var(--sp-5); }

/* Order confirmation */
.line-thumb{ width:64px; height:64px; border-radius:8px; overflow:hidden; position:relative; flex-shrink:0; display:block; }
.line-thumb .gear-art{ position:absolute; inset:0; }
.confirm-hero{ text-align:center; }
.confirm-hero .page-hero-title{ margin-inline:auto; }
.confirm-hero .lede{ margin-inline:auto; }
.confirm-badge{ width:84px; height:84px; margin: 0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--gradient-brand); color: var(--paper); box-shadow: 0 0 0 10px rgba(200,27,176,.14), 0 20px 50px rgba(138,10,130,.45); }
.confirm-badge .icon{ width:38px; height:38px; }
.empty-card .confirm-badge .icon{ width:34px; height:34px; margin:0; color:#fff; opacity:1; }
.confirm-grid{ display:grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: var(--sp-6); align-items:start; }
.detail-list{ display:grid; gap: var(--sp-3); }
.detail-list div{ display:flex; justify-content:space-between; gap: var(--sp-4); font-size: var(--fs-sm); padding-bottom: var(--sp-3); border-bottom:1px solid var(--line-light); }
.detail-list dt{ color: var(--ink-50); }
.detail-list dd{ font-weight:600; text-align:right; }
.next-steps{ display:grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.next-steps li{ display:flex; gap: var(--sp-4); }
.next-steps li b{ width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background: var(--paper-soft); color: var(--purple); font-family: var(--font-display); font-size:.85rem; }
.next-steps p{ font-size: var(--fs-sm); color: var(--ink-70); }

/* ---------- Account ---------- */
.auth-wrap{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); border-radius: 18px; overflow:hidden; box-shadow: 0 40px 80px rgba(23,10,31,.12); border:1px solid var(--line-light); background:#fff; }
.auth-visual{ position:relative; min-height: 560px; color: var(--paper); display:flex; flex-direction:column; justify-content:flex-end; padding: clamp(2rem, 4vw, 3rem); isolation:isolate; }
.auth-visual .gear-art{ position:absolute; inset:0; z-index:-2; }
.auth-visual::before{ content:''; position:absolute; inset:0; z-index:-1; background: linear-gradient(0deg, rgba(23,10,31,.96) 0%, rgba(23,10,31,.82) 45%, rgba(58,15,69,.45) 100%); }
.auth-visual .check-list li{ color: var(--paper-70); }
.auth-visual .check-list li .icon{ background: rgba(234,91,225,.2); color:#ea5be1; }
.auth-form-side{ padding: clamp(2rem, 4vw, 3.5rem); }
.auth-tabs{ margin-bottom: var(--sp-6); }
.auth-tabs button{ font-size: var(--fs-sm); }
.password-field{ position:relative; }
.password-field .form-control{ padding-right: 4.5rem; }
.password-toggle{ position:absolute; right: 10px; top:50%; transform: translateY(-50%); font-size: var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--purple); padding: 6px 8px; }

.dashboard{ display:grid; grid-template-columns: 270px minmax(0,1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items:start; }
.dash-nav{ position:sticky; top: calc(var(--gp-header-height, 76px) + var(--sp-5)); background:#fff; border:1px solid var(--line-light); border-radius: 14px; padding: var(--sp-4); }
.dash-user{ display:flex; gap: var(--sp-3); align-items:center; padding: var(--sp-3) var(--sp-3) var(--sp-5); border-bottom:1px solid var(--line-light); margin-bottom: var(--sp-3); }
.dash-avatar{ width:48px; height:48px; border-radius:50%; background: var(--gradient-brand); color: var(--paper); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; font-size: 1.1rem; flex-shrink:0; }
.dash-user strong{ display:block; font-size: .98rem; }
.dash-user small{ font-size: var(--fs-xs); color: var(--ink-50); word-break: break-all; }
.dash-nav a, .dash-nav button{ display:flex; align-items:center; gap: var(--sp-3); width:100%; padding: 11px var(--sp-3); border-radius: 8px; font-size: var(--fs-sm); font-weight:600; color: var(--ink-70); transition: all .2s; }
.dash-nav a:hover, .dash-nav button:hover{ background: var(--paper-soft); color: var(--ink); }
.dash-nav a.active{ background: var(--ink); color: var(--paper); }
.dash-panel + .dash-panel{ margin-top: var(--sp-6); }
.dash-stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.dash-stat{ padding: var(--sp-5); border-radius: 12px; background:#fff; border:1px solid var(--line-light); }
.dash-stat b{ display:block; font-family: var(--font-display); font-size: 2rem; line-height:1.1; }
.dash-stat span{ font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.1em; color: var(--ink-50); font-weight:700; }
.dash-stat a{ font-size: var(--fs-xs); font-weight:700; color: var(--purple); display:inline-block; margin-top: var(--sp-2); }
.order-table{ width:100%; border-collapse:collapse; font-size: var(--fs-sm); }
.order-table th{ text-align:left; font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.1em; color: var(--ink-50); padding: 0 var(--sp-3) var(--sp-3); border-bottom:1px solid var(--ink); font-weight:700; }
.order-table td{ padding: var(--sp-4) var(--sp-3); border-bottom:1px solid var(--line-light); vertical-align:top; }
.order-table td:first-child, .order-table th:first-child{ padding-left:0; }
.status-badge{ display:inline-flex; font-size: .7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding: 4px 10px; border-radius:999px; background: var(--paper-soft); color: var(--purple); white-space:nowrap; }
.empty-card{ text-align:center; padding: var(--sp-8) var(--sp-5); }
.empty-card .icon{ width:44px; height:44px; margin: 0 auto var(--sp-4); color: var(--purple); opacity:.6; }

/* ---------- Search / wishlist / 404 ---------- */
.search-hero-form{ display:flex; gap: var(--sp-3); margin-top: var(--sp-6); max-width: 640px; }
.search-hero-form .field{ position:relative; flex:1; }
.search-hero-form .icon{ position:absolute; left: 1.1rem; top:50%; transform: translateY(-50%); color: var(--ink-50); }
.search-hero-form input{ width:100%; min-height:58px; border-radius: 10px; border:0; padding: 0 1rem 0 3rem; font-size: 1.05rem; background: var(--paper); color: var(--ink); }
.search-hero-form input:focus{ outline:none; box-shadow: 0 0 0 4px rgba(200,27,176,.35); }
.search-hero-form .btn{ min-height:58px; border-radius:10px; }
.page-hero .search-hero-form .btn-primary{ background: var(--gradient-brand); border-color: transparent; color: var(--paper); }
.suggestion-row{ display:flex; gap: var(--sp-2); flex-wrap:wrap; margin-top: var(--sp-5); align-items:center; }
.suggestion-row > span{ font-size: var(--fs-xs); color: var(--paper-70); text-transform:uppercase; letter-spacing:.1em; font-weight:700; margin-right: var(--sp-2); }
.error-code{ font-family: var(--font-display); font-weight:800; font-size: clamp(6rem, 18vw, 13rem); line-height:.9; letter-spacing:-0.05em; background: linear-gradient(120deg, #f3b8ea 0%, #c81bb0 55%, #3a0f45 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- Small pieces ---------- */
p.h1, p.h2, p.h3, p.h4, div.h4{ font-family: var(--font-display); font-weight:600; line-height:1.12; letter-spacing:-0.02em; }
[hidden]{ display:none !important; }
.filter-list label .filter-count{ margin-left:auto; font-size: .75rem; color: var(--ink-50); }
.shop-sourcing-card{ margin-top: var(--sp-6); padding: var(--sp-5); }
.category-chips{ padding-top:0; margin-bottom: var(--sp-5); }
@media (min-width:1201px){ .shop-layout .product-grid:not(.list-view){ grid-template-columns: repeat(3, 1fr); } }
@media (min-width:901px){
  .category-chips{ flex-wrap:wrap; overflow:visible; }
  .shop-filters{ position:sticky; top: calc(var(--gp-header-height, 76px) + var(--sp-5)); max-height: calc(100vh - var(--gp-header-height, 76px) - var(--sp-7)); overflow-y:auto; padding-right: var(--sp-3); scrollbar-width: none; }
  .shop-filters::-webkit-scrollbar{ display:none; }
}
.subject-tabs .chip{ cursor:pointer; }
.subject-tabs .chip:has(input:focus-visible){ outline:2px solid var(--purple); outline-offset:2px; }
.journal-card h3 a{ color: inherit; }
.journal-subscribe{ display:flex; gap: var(--sp-2); }
.journal-subscribe input{ flex:1; min-width:0; min-height:44px; border-radius: 8px; border:1px solid var(--line-dark); background: rgba(250,247,251,.06); color: var(--paper); padding: 0 14px; font-size: 16px; }
.journal-subscribe input::placeholder{ color: rgba(250,247,251,.5); }
.journal-subscribe input:focus{ outline:none; border-color: var(--purple-light); }
.journal-subscribe .btn{ border-radius: 8px; }
.journal-subscribe-note{ font-size: var(--fs-xs); color: var(--paper-70); min-height: 1em; }
.pdp-thumbs .thumb-more{ display:flex; align-items:center; justify-content:center; text-align:center; background: var(--paper-soft); border:1px dashed rgba(138,10,130,.35); opacity:1; }
.pdp-thumbs .thumb-more span{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size: .72rem; font-weight:700; color: var(--purple); letter-spacing:.04em; }
.pdp-thumbs .thumb-more:hover{ background: #ead9ef; }
@media (prefers-reduced-motion:reduce){
  .pdp-thumbs.is-paginated .pdp-thumb-track,.pdp-thumbs .thumb-wrap,.pdp-gallery-page-btn{ transition:none; }
}
.pdp-meta-list dd a{ text-decoration: underline; text-underline-offset: 3px; }
.legal-toc nav{ display:block; }
.card-dark .eyebrow, .cta-band .eyebrow{ color:#ea5be1; }
.faq-empty.show{ display:block; }

/* ---------- Scroll reveal for inner pages ---------- */
@media (prefers-reduced-motion: no-preference){
  .js .reveal-up{ opacity:0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .js .reveal-up.is-visible{ opacity:1; transform:none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .process{ grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-7); }
  .process-step:nth-child(2)::after{ display:none; }
  .journal-grid{ grid-template-columns: repeat(2, 1fr); }
  .pdp-assurances{ grid-template-columns: 1fr; }
  .pdp-assurance{ flex-direction:row; align-items:center; gap: var(--sp-3); }
}
@media (max-width:1024px){
  .page-hero-inner{ grid-template-columns: 1fr; gap: var(--sp-6); }
  .page-hero-aside{ border-left:0; padding-left:0; border-top:1px solid var(--line-dark); padding-top: var(--sp-5); }
  .page-hero--image .page-hero-aside{ padding: var(--sp-5); border-top:1px solid var(--line-dark); }
  .page-hero--image .page-hero-media{ width:100%; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.6) 0%, #000 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,.6) 0%, #000 100%); }
  .page-hero--image .page-hero-media img{ opacity:.28; }
  .pillars{ grid-template-columns: repeat(2, 1fr); }
  .pillar:nth-child(2){ border-right:0; }
  .pillar:nth-child(-n+2){ border-bottom:1px solid var(--line-light); }
  .section-dark .pillar:nth-child(-n+2){ border-color: var(--line-dark); }
  .feature-split, .contact-layout, .faq-layout, .journal-featured, .article-layout, .legal-layout, .dashboard, .confirm-grid{ grid-template-columns: 1fr; }
  .feature-split--reverse > :first-child{ order:0; }
  .contact-aside, .faq-sidebar, .article-aside, .legal-toc, .dash-nav, .summary-box{ position:static; }
  .cta-band{ grid-template-columns: 1fr; }
  .cta-band-actions{ flex-direction:row; flex-wrap:wrap; min-width:0; }
  .auth-wrap{ grid-template-columns: 1fr; }
  .auth-visual{ min-height: 280px; }
  .legal-toc{ display:none; }
  .faq-sidebar nav{ display:flex; overflow-x:auto; gap: var(--sp-2); scrollbar-width:none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .faq-sidebar nav::-webkit-scrollbar{ display:none; }
  .faq-sidebar nav button{ flex-shrink:0; border:1px solid var(--line-light); border-radius:999px; padding: 8px 14px; white-space:nowrap; gap: 8px; }
  .faq-sidebar nav button.active{ border-color: var(--ink); }
  .dash-nav{ display:flex; gap: var(--sp-2); overflow-x:auto; padding: var(--sp-2); scrollbar-width:none; }
  .dash-nav::-webkit-scrollbar{ display:none; }
  .dash-user{ display:none; }
  .dash-nav a, .dash-nav button{ width:auto; white-space:nowrap; flex-shrink:0; }
}
@media (max-width:900px){
  .testimonial-grid{ grid-template-columns: 1fr; }
  .testimonial-grid .testimonial-card-v2:nth-child(1){ grid-column:auto; }
  .process--compact{ grid-template-columns: 1fr; }
}
@media (max-width:640px){
  .page-hero{ padding-block: 3.5rem 3rem !important; }
  .page-hero--compact{ padding-block: 2.75rem 2.25rem !important; }
  .page-hero-title{ font-size: clamp(2.2rem, 10vw, 2.8rem); letter-spacing:-0.03em; }
  .page-hero--compact .page-hero-title{ font-size: clamp(2rem, 9vw, 2.5rem); }
  .page-hero .lede{ font-size: 1rem; }
  .pillars{ grid-template-columns: 1fr 1fr; }
  .pillar{ padding: var(--sp-5) var(--sp-4); }
  .pillar h3{ font-size: .95rem; }
  .pillar p{ font-size: .8rem; }
  .process{ grid-template-columns: 1fr; row-gap: var(--sp-5); }
  .process-step{ padding-top:0; padding-left: 60px; min-height:44px; }
  .process-step::after{ display:none; }
  .process-step h4{ margin-top: 10px; }
  .media-frame{ padding: 0 6% 6% 0; }
  .journal-grid{ grid-template-columns: 1fr; gap: var(--sp-7); }
  .journal-featured{ margin-bottom: var(--sp-8); }
  .cta-band{ border-radius: 14px; padding: 2.25rem 1.5rem; }
  .cta-band-actions{ flex-direction:column; }
  .cta-band-actions .btn{ width:100%; }
  .card{ padding: 1.4rem; border-radius: 12px; }
  .dash-stats{ grid-template-columns: 1fr 1fr; }
  .dash-stats .dash-stat:last-child{ grid-column: 1 / -1; }
  .order-table thead{ display:none; }
  .order-table, .order-table tbody, .order-table tr, .order-table td{ display:block; width:100%; }
  .order-table tr{ padding: var(--sp-4) 0; border-bottom:1px solid var(--line-light); }
  .order-table td{ border:0; padding: 3px 0; display:flex; justify-content:space-between; gap: var(--sp-4); }
  .order-table td::before{ content: attr(data-label); font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color: var(--ink-50); font-weight:700; }
  .search-hero-form{ flex-direction:column; }
  .article-cover .gear-art{ aspect-ratio: 4/3; border-radius: 12px; }
  .prose{ font-size: 1rem; }
  .prose .lead{ font-size: 1.1rem; }
  .auth-form-side{ padding: 1.5rem; }
  .auth-wrap{ border-radius: 14px; }
  .checkout-step{ padding: 1.25rem; }
  .option-card{ padding: var(--sp-4); }
  .checkout-progress i{ width:14px; }
  .chip-nav-inner{ margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
}

@media (max-width: 640px){
  .category-grid{
    grid-template-columns:minmax(0, 1fr);
    grid-auto-rows:auto;
    grid-auto-flow:row;
  }
  .category-card,
  .category-card.large{
    display:block;
    grid-column:span 1;
    grid-row:auto;
    min-height:0;
    height:auto;
    aspect-ratio:auto;
  }
  .category-card .gear-art.photo{
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    aspect-ratio:auto;
    transform:none;
  }
  .category-card .gear-art.photo picture,
  .category-card .gear-art.photo img,
  .intro-media-main.gear-art.photo picture,
  .intro-media-main.gear-art.photo img{
    position:static;
    display:block;
    width:100%;
    height:auto !important;
    object-fit:contain;
    transform:none;
  }
  .category-card .category-card-body{
    position:absolute;
    inset:auto 0 0;
  }
  .intro-media-visual{
    aspect-ratio:auto;
    padding:0;
  }
  .intro-media-main{
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    aspect-ratio:auto;
    overflow:visible;
    clip-path:none;
  }
  .intro-media-visual .gear-art{
    height:auto;
  }
}