@charset "utf-8";

/*
Theme Name: Capsula - Women's Fashion Shop HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
   1.1 Typography
   1.2 Spacing & Grounds
   1.3 Section Titles
   1.4 Buttons & Links
   1.5 Forms
   1.6 Shared Pieces
   1.7 Illustrated Icons
2. Preloader
3. Header
   3.1 Top Bar
   3.2 Main Bar
   3.3 Menu Row
   3.4 Main Menu
   3.5 Home Mega Menu
   3.6 Sticky Header
   3.7 Search Panel
4. Offcanvas Menu
5. Custom Select
6. Language Picker
7. Components
   7.1 Accordion
   7.2 Product Cards
   7.3 Swatches & Size Chips
   7.4 Tabs
   7.5 Rails & Slider Controls
   7.6 Formats
   7.7 Voices
   7.8 Post Cards
   7.9 Amount Stepper
   7.10 Pagination
   7.11 Choice Cards
8. Home One
   8.1 Hero
   8.2 Service Strip
   8.3 Categories
   8.4 Shop By Mood
   8.5 The Capsule
   8.6 Quote
   8.7 The Edit
   8.8 Photo Band Pieces
9. Home Two
   9.1 Hero
   9.2 The Wall
   9.3 The Fitting Room
   9.4 New This Week
   9.5 Gift Card Band
   9.6 Rating Card
10. Home Three
   10.1 Boxed Layout
   10.2 Hero
   10.3 The Edit
   10.4 The Tape Measure
11. Inner Pages
   11.1 Shared Cards
   11.2 Team
   11.3 FAQ
12. Shop Pages
   12.1 Sidebar
   12.2 Shop Grid
   12.3 Bag & Wishlist
   12.4 Order Tracking
13. Capsula Pages
   13.1 Shop Filters
   13.2 Product Page
   13.3 Cart & Checkout
   13.4 Tables
   13.5 Stores
   13.6 Steps & Journey
   13.7 Story & Values
   13.8 Profile
   13.9 Account & Contact
   13.10 Coming Soon & Countdown
   13.11 Call To Action Splits
14. Feature Pages
   14.1 Shop Filters
   14.2 Capsule Builder
   14.3 Size Finder
   14.4 Tables Shared
   14.5 Gift Cards
   14.6 New In
   14.7 Delivery & Returns
   14.8 Click & Collect Strip
   14.9 Lookbook
   14.10 Quick View & Modals
   14.11 Account Capsule
15. Journal, Account & Contact
   15.1 Journal List
   15.2 Journal Post
   15.3 Account Forms
   15.4 Coming Soon & 404
16. Swatches
17. Subheader
18. Footer
*/

/*======================
1. General
========================*/
:root {
  /* brand (the base's own: white ground, black ink, the photography's pastel papers; peony added as the one accent) */
  --ca-night: #141414;
  --ca-night-rgb: 20, 20, 20;
  --ca-panel: #1F1E1F;
  --ca-shell: #FBF8F7;
  --ca-shell-rgb: 251, 248, 247;
  --ca-mist: #F7F6F5;
  --ca-mist-rgb: 247, 246, 245;
  --ca-blush: #F4DCE0;
  --ca-blush-rgb: 244, 220, 224;
  --ca-mint: #D5E8E3;
  --ca-mint-rgb: 213, 232, 227;
  --ca-peach: #F7DDB7;
  --ca-peach-rgb: 247, 221, 183;
  --ca-sky: #D9E7EE;
  --ca-lilac: #E7E0EF;
  --ca-accent: #C8285E;
  --ca-accent-rgb: 200, 40, 94;
  --ca-accent-light: #F27FA5;
  --ca-star: #F5B301;
  --ca-ok: #2F7A5B;
  --ca-error: #C23B2E;
  --ca-ink: #141414;
  --ca-ink-rgb: 20, 20, 20;
  --ca-line-dark: #CFCACB;
  /* semantic (the dark theme and the night bands swap these) */
  --ca-bg: #FFFFFF;
  --ca-bg-rgb: 255, 255, 255;
  --ca-surface: #FFFFFF;
  --ca-surface-rgb: 255, 255, 255;
  --ca-mist-bg: #F7F6F5;
  --ca-tile: #F4F3F2;
  --ca-tonal: rgba(20, 20, 20, 0.055);
  --ca-tonal-2: rgba(20, 20, 20, 0.1);
  --ca-heading: #141414;
  --ca-heading-rgb: 20, 20, 20;
  --ca-text: #66666B;
  --ca-muted: #6E6E73;
  --ca-line: #EAE7E6;
  --ca-line-2: #DCD8D7;
  --ca-accent-text: #C8285E;
  --ca-display: #C8285E;
  --ca-ok-text: #2F7A5B;
  --ca-error-text: #B8352A;
  --ca-on-accent: #FFFFFF;
  --ca-g-blush: #F4DCE0;
  --ca-g-mint: #D5E8E3;
  --ca-g-peach: #F7DDB7;
  --ca-g-sky: #D9E7EE;
  --ca-g-lilac: #E7E0EF;
  --ca-shadow: 0 18px 44px rgba(20, 20, 20, 0.07);
  --ca-shadow-lg: 0 30px 70px rgba(20, 20, 20, 0.14);
  --ca-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ca-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ca-radius: 4px;
  --ca-radius-lg: 14px;
  /* type */
  --ca-ff-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --ca-ff-head: 'Red Hat Display', 'Helvetica Neue', Arial, sans-serif;
  --ca-fs-display: clamp(44px, 5.6vw, 96px);
  --ca-fs-h1: clamp(38px, 3.8vw, 64px);
  --ca-fs-h2: clamp(30px, 3vw, 50px);
  --ca-fs-h3: clamp(20px, 1.45vw, 25px);
  --ca-fs-h4: 20px;
  --ca-fs-h5: 17px;
  --ca-fs-h6: 14px;
  /* WebGL colours (Tulle Layers: three pastel sheers; the footer garment: its two tones) */
  --gl-1: #F2C6CF;
  --gl-2: #BFDDD5;
  --gl-3: #F5D3A6;
  --gl-alpha: 0.55;
}
[data-theme="dark"] {
  --ca-bg: #121113;
  --ca-bg-rgb: 18, 17, 19;
  --ca-surface: #1C1A1D;
  --ca-surface-rgb: 28, 26, 29;
  --ca-mist-bg: #19181A;
  --ca-tile: #222024;
  --ca-tonal: rgba(255, 255, 255, 0.07);
  --ca-tonal-2: rgba(255, 255, 255, 0.12);
  --ca-heading: #F6F2F1;
  --ca-heading-rgb: 246, 242, 241;
  --ca-text: #C4BEBF;
  --ca-muted: #A8A1A3;
  --ca-line: rgba(255, 255, 255, 0.1);
  --ca-line-2: rgba(255, 255, 255, 0.18);
  --ca-accent-text: #F27FA5;
  --ca-display: #F27FA5;
  --ca-ok-text: #7FCFAA;
  --ca-error-text: #F29A8E;
  --ca-g-blush: #2A2024;
  --ca-g-mint: #1C2624;
  --ca-g-peach: #2B241D;
  --ca-g-sky: #1C2328;
  --ca-g-lilac: #24202B;
  --ca-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
  --ca-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.5);
  /* on the dark papers the sheers take the accent tones, faint, so they read as coloured tulle */
  --gl-1: #F27FA5;
  --gl-2: #7FCFAA;
  --gl-3: #F5B97A;
  --gl-alpha: 0.14;
}
/* bands that stay night in both themes */
.is-night {
  --ca-bg: #141414;
  --ca-bg-rgb: 20, 20, 20;
  --ca-heading: #FBF8F7;
  --ca-heading-rgb: 251, 248, 247;
  --ca-text: #CFC9CA;
  --ca-muted: #ABA5A7;
  --ca-line: rgba(255, 255, 255, 0.12);
  --ca-line-2: rgba(255, 255, 255, 0.22);
  --ca-accent-text: #F27FA5;
  --ca-display: #F27FA5;
  --ca-ok-text: #7FCFAA;
  --ca-error-text: #F29A8E;
  --ca-surface: #1F1E1F;
  --ca-surface-rgb: 31, 30, 31;
  --ca-tonal: rgba(255, 255, 255, 0.08);
  --ca-tonal-2: rgba(255, 255, 255, 0.14);
  --ca-tile: #1F1E1F;
  background-color: #141414;
  color: var(--ca-text);
}
[data-theme="dark"] .is-night {
  --ca-bg: #0C0B0D;
  --ca-surface: #19181A;
  --ca-tile: #19181A;
  background-color: #0C0B0D;
}
/* a light panel placed on a night band keeps its own ink */
.is-night .ca-on-light,
.ca-photo-band .ca-on-light {
  --ca-heading: #141414;
  --ca-heading-rgb: 20, 20, 20;
  --ca-text: #66666B;
  --ca-muted: #6E6E73;
  --ca-line: #EAE7E6;
  --ca-line-2: #DCD8D7;
  --ca-accent-text: #C8285E;
  --ca-display: #C8285E;
  --ca-ok-text: #2F7A5B;
  --ca-error-text: #B8352A;
  --ca-surface: #FFFFFF;
  --ca-tonal: rgba(20, 20, 20, 0.055);
  --ca-tonal-2: rgba(20, 20, 20, 0.1);
  color: var(--ca-text);
}
[data-theme="dark"] .is-night .ca-on-light,
[data-theme="dark"] .ca-photo-band .ca-on-light {
  --ca-heading: #F6F2F1;
  --ca-heading-rgb: 246, 242, 241;
  --ca-text: #C4BEBF;
  --ca-muted: #A8A1A3;
  --ca-line: rgba(255, 255, 255, 0.1);
  --ca-accent-text: #F27FA5;
  --ca-display: #F27FA5;
  --ca-surface: #1C1A1D;
  --ca-tonal: rgba(255, 255, 255, 0.07);
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--ca-bg);
  color: var(--ca-text);
  font-family: var(--ca-ff-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease;
}
body.oc-open,
body.qv-open {
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ca-ease), background-color 0.3s var(--ca-ease);
}
a:hover {
  color: var(--ca-accent-text);
}
b,
strong {
  font-weight: 500;
}
::selection {
  background: var(--ca-blush);
  color: var(--ca-ink);
}
:focus-visible {
  outline: 2px solid var(--ca-accent);
  outline-offset: 3px;
}

/*----- 1.1 Typography -----*/
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--ca-heading);
  font-family: var(--ca-ff-head);
  font-weight: 600;
  letter-spacing: -0.005em;
}
h1 {
  font-size: var(--ca-fs-h1);
  line-height: 1.04;
}
h2 {
  font-size: var(--ca-fs-h2);
  line-height: 1.06;
}
h3 {
  font-size: var(--ca-fs-h3);
  line-height: 1.25;
}
h4 {
  font-size: var(--ca-fs-h4);
  line-height: 1.3;
}
h5 {
  font-size: var(--ca-fs-h5);
  line-height: 1.35;
}
h6 {
  font-size: var(--ca-fs-h6);
  line-height: 1.4;
}
/* a heading at its outline level that looks like another level */
.ca-h2 {
  font-size: var(--ca-fs-h2);
  line-height: 1.06;
}
.ca-h3 {
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.15;
}
.ca-h4 {
  font-size: var(--ca-fs-h4);
  line-height: 1.3;
}
.ca-h5 {
  font-size: var(--ca-fs-h5);
  line-height: 1.35;
}
.ca-h6 {
  font-family: var(--ca-ff-body);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* the base's display voice: medium caps, the accent word in peony */
.ca-caps {
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
h1 em,
h2 em,
h3 em,
.ca-accent-word {
  font-style: normal;
  color: var(--ca-display);
}
p {
  margin: 0 0 18px;
}
p:last-child {
  margin-bottom: 0;
}
.ca-lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ca-text);
}
.ca-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ca-display {
  font-size: var(--ca-fs-display);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.ca-display .line,
.ca-title .line,
.hero-title .line {
  display: block;
  white-space: nowrap;
}

/*----- 1.2 Spacing & Grounds -----*/
.sec-pt-120 {
  padding-top: 120px;
}
.sec-pb-120 {
  padding-bottom: 120px;
}
.sec-pt-90 {
  padding-top: 90px;
}
.sec-pb-90 {
  padding-bottom: 90px;
}
.ca-bg-mist {
  background-color: var(--ca-mist-bg);
}
.ca-bg-surface {
  background-color: var(--ca-surface);
}
/* the photography's seamless papers as section grounds (tinted dark in the dark theme) */
.ca-bg-blush {
  background-color: var(--ca-g-blush);
}
.ca-bg-mint {
  background-color: var(--ca-g-mint);
}
.ca-bg-peach {
  background-color: var(--ca-g-peach);
}
.ca-bg-sky {
  background-color: var(--ca-g-sky);
}
.ca-bg-lilac {
  background-color: var(--ca-g-lilac);
}
/* the base's short rule between sections */
.ca-rule {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--ca-line-2);
  opacity: 1;
}
/* photo band: one style everywhere (cover photo under an ink wash from the copy's side, light copy) */
.ca-photo-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--ca-night);
  --ca-heading: #FBF8F7;
  --ca-text: rgba(251, 248, 247, 0.88);
  --ca-muted: rgba(251, 248, 247, 0.74);
  --ca-line: rgba(255, 255, 255, 0.22);
  --ca-accent-text: #F7A3BF;
  --ca-display: #F7A3BF;
  --ca-tonal: rgba(255, 255, 255, 0.12);
  --ca-tonal-2: rgba(255, 255, 255, 0.2);
  color: var(--ca-text);
}
.ca-photo-band > .band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ca-photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(20, 20, 20, 0.86) 0%, rgba(20, 20, 20, 0.62) 42%, rgba(20, 20, 20, 0.08) 100%);
}

/*----- 1.3 Section Titles -----*/
/* the base's head: caps title, a short rule under it when centred; the eyebrow carries the logo's peony tab */
.ca-title {
  margin-bottom: 56px;
}
.ca-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--ca-accent-text);
  font-family: var(--ca-ff-body);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ca-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 4px;
  border-radius: 4px;
  background: var(--ca-accent);
}
.is-night .ca-eyebrow::before,
.ca-photo-band .ca-eyebrow::before {
  background: var(--ca-accent-light);
}
.ca-title h2 {
  max-width: 820px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.ca-title .ca-lead {
  max-width: 600px;
  margin: 22px 0 0;
}
.ca-title.text-center h2,
.ca-title.text-center .ca-lead {
  margin-left: auto;
  margin-right: auto;
}
/* the base's short rule under a centred title: the logo's rule, tab and line */
.ca-title.text-center h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 22px auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ca-accent) 0 30%, transparent 30% 40%, var(--ca-heading) 40% 100%);
}
.ca-title.is-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.ca-title.is-split .ca-eyebrow {
  margin-bottom: 12px;
}
.ca-title .ca-btn,
.ca-title .ca-btns {
  margin-top: 30px;
}
.ca-title.is-split .ca-btn,
.ca-title.is-split .ca-btns {
  flex-shrink: 0;
  margin-top: 0;
}

/*----- 1.4 Buttons & Links -----*/
/* pills (the retail rule): ink by default, peony on hover; a peony variant for the shop's main action */
.ca-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--ca-night);
  color: #FFFFFF;
  font-family: var(--ca-ff-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.4s var(--ca-ease), color 0.4s var(--ca-ease), box-shadow 0.4s var(--ca-ease), transform 0.4s var(--ca-ease);
}
.ca-btn i {
  position: relative;
  font-size: 12px;
  transition: transform 0.45s var(--ca-ease), opacity 0.3s ease;
}
/* house physics: the arrow slides out and a twin slides in */
.ca-btn i.fa-arrow-right::after {
  content: "\f061";
  position: absolute;
  left: -22px;
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ca-btn:hover {
  background: var(--ca-accent);
  color: #FFFFFF;
  box-shadow: 0 14px 30px rgba(var(--ca-accent-rgb), 0.26);
  transform: translateY(-2px);
}
.ca-btn:hover i.fa-arrow-right {
  transform: translateX(22px);
}
.ca-btn:hover i.fa-arrow-right::after {
  opacity: 1;
}
.ca-btn:hover i.fa-arrow-right::before {
  opacity: 0;
}
[data-theme="dark"] .ca-btn:not(.is-accent):not(.is-tonal):not(.is-light),
.is-night .ca-btn:not(.is-accent):not(.is-tonal):not(.is-light) {
  background: #FBF8F7;
  color: var(--ca-ink);
}
[data-theme="dark"] .ca-btn:not(.is-accent):not(.is-tonal):not(.is-light):hover,
.is-night .ca-btn:not(.is-accent):not(.is-tonal):not(.is-light):hover {
  background: var(--ca-accent);
  color: #FFFFFF;
}
.ca-btn.is-accent {
  background: var(--ca-accent);
  color: var(--ca-on-accent);
}
.ca-btn.is-accent:hover {
  background: var(--ca-night);
  color: #FFFFFF;
  box-shadow: 0 14px 30px rgba(var(--ca-night-rgb), 0.22);
}
[data-theme="dark"] .ca-btn.is-accent:hover,
.is-night .ca-btn.is-accent:hover,
.ca-photo-band .ca-btn.is-accent:hover {
  background: #FBF8F7;
  color: var(--ca-ink);
}
/* tonal: a soft ink face with a peony icon (house taste: tonal, not outlined) */
.ca-btn.is-tonal {
  background: var(--ca-tonal);
  color: var(--ca-heading);
}
.ca-btn.is-tonal i {
  color: var(--ca-accent-text);
}
.ca-btn.is-tonal:hover {
  background: var(--ca-night);
  color: #FFFFFF;
  box-shadow: none;
}
.ca-btn.is-tonal:hover i {
  color: var(--ca-accent-light);
}
[data-theme="dark"] .ca-btn.is-tonal:hover,
.is-night .ca-btn.is-tonal:hover,
.ca-photo-band .ca-btn.is-tonal:hover {
  background: #FBF8F7;
  color: var(--ca-ink);
}
[data-theme="dark"] .ca-btn.is-tonal:hover i,
.is-night .ca-btn.is-tonal:hover i,
.ca-photo-band .ca-btn.is-tonal:hover i {
  color: var(--ca-accent);
}
/* on a photograph: white face, ink letters */
.ca-btn.is-light {
  background: #FFFFFF;
  color: var(--ca-ink);
}
.ca-btn.is-light:hover {
  background: var(--ca-accent);
  color: #FFFFFF;
}
.ca-btn.is-sm {
  height: 42px;
  padding: 0 20px;
  font-size: 12px;
}
.ca-btn.is-block {
  width: 100%;
}
.ca-btn:disabled,
.ca-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* the base's underlined text link, kept: caps with a short rule that grows */
.ca-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 5px;
  color: var(--ca-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ca-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ca-accent) 0 22%, var(--ca-heading) 22% 100%);
  transform-origin: left;
  transition: transform 0.45s var(--ca-ease);
}
.ca-link i {
  font-size: 11px;
  transition: transform 0.35s var(--ca-ease);
}
.ca-link:hover {
  color: var(--ca-accent-text);
}
.ca-link:hover::after {
  transform: scaleX(0.35);
}
.ca-link:hover i {
  transform: translateX(5px);
}
.ca-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/*----- 1.5 Forms -----*/
.ca-field {
  position: relative;
  margin-bottom: 20px;
}
.ca-field label,
.ca-label {
  display: block;
  margin-bottom: 8px;
  color: var(--ca-heading);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* tonal fields: a soft face, the peony ring only on focus */
.ca-input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 50px 0 22px;
  border: 1.5px solid transparent;
  border-radius: 30px;
  background: var(--ca-tonal);
  color: var(--ca-heading);
  font-family: var(--ca-ff-body);
  font-size: 16px;
  font-weight: 400;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
textarea.ca-input {
  height: 160px;
  padding-top: 16px;
  border-radius: 20px;
  resize: vertical;
}
.ca-input::placeholder {
  color: var(--ca-muted);
}
.ca-input:focus {
  border-color: var(--ca-accent);
  background: var(--ca-surface);
  box-shadow: 0 0 0 4px rgba(var(--ca-accent-rgb), 0.16);
  outline: 0;
}
.ca-input.is-invalid {
  border-color: var(--ca-error);
}
.ca-field > i {
  position: absolute;
  right: 22px;
  top: 47px;
  color: var(--ca-accent-text);
  font-size: 14px;
  pointer-events: none;
}
.ca-field.is-area > i {
  top: 50px;
}
.form-status {
  min-height: 0;
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--ca-muted);
}
.form-status:empty {
  margin: 0;
}
.form-status.is-ok {
  color: var(--ca-ok-text);
}
.form-status.is-error {
  color: var(--ca-error-text);
}
.ca-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  cursor: pointer;
}
.ca-check input {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 3px;
  accent-color: var(--ca-accent);
}

/*----- 1.6 Shared Pieces -----*/
/* buttons start bare; each control draws its own face */
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.ca-social {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ca-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ca-tonal);
  color: var(--ca-heading);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ca-ease);
}
.ca-social a:hover {
  background: var(--ca-accent);
  color: #FFFFFF;
  transform: translateY(-3px);
}
/* a round portrait beside a name */
.ca-face {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
/* overlapping faces + a count */
.ca-faces {
  display: flex;
  align-items: center;
}
.ca-faces img,
.ca-faces span {
  width: 44px;
  height: 44px;
  border: 3px solid var(--ca-bg);
  border-radius: 50%;
  object-fit: cover;
}
.ca-faces > * + * {
  margin-left: -13px;
}
.ca-faces span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ca-accent);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 500;
}
.rating-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ca-muted);
  font-size: 14px;
}
.rating-line b {
  color: var(--ca-heading);
  font-size: 15px;
}
.ca-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--ca-star);
  font-size: 12px;
}
.ca-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ca-ink);
  font-size: 20px;
  transition: transform 0.5s var(--ca-ease), background-color 0.4s ease, color 0.4s ease;
}
.ca-play i {
  margin-left: 4px;
}
.ca-play:hover {
  background: var(--ca-accent);
  color: #FFFFFF;
  transform: scale(1.08);
}
/* label / value rows (house taste: rows, not pill or icon-bullet lists) */
.ca-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 22px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ca-line);
}
.ca-rows li:first-child {
  border-top: 1px solid var(--ca-line);
}
.ca-rows li > span {
  color: var(--ca-muted);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ca-rows b {
  color: var(--ca-heading);
  font-size: 16px;
  font-weight: 500;
  text-align: right;
}
.ca-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 15px 24px;
  border-radius: 40px;
  background: var(--ca-night);
  color: #FBF8F7;
  font-size: 15px;
  line-height: 1.4;
  box-shadow: var(--ca-shadow-lg);
  transform: translate(-50%, 160%);
  transition: transform 0.5s var(--ca-ease);
}
.ca-toast > i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ca-accent);
  color: #FFFFFF;
  font-size: 12px;
}
.ca-toast small {
  display: block;
  color: rgba(251, 248, 247, 0.74);
  font-size: 13px;
}
.ca-toast a {
  margin-left: 6px;
  color: var(--ca-accent-light);
  font-weight: 500;
  white-space: nowrap;
}
.ca-toast.is-shown {
  transform: translate(-50%, 0);
}
.ca-back-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--ca-night);
  color: #FFFFFF;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s var(--ca-ease), background-color 0.3s ease;
}
[data-theme="dark"] .ca-back-top {
  background: #FBF8F7;
  color: var(--ca-ink);
}
.ca-back-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.ca-back-top:hover {
  background: var(--ca-accent);
  color: #FFFFFF;
}
/* WebGL layers sit under a section's content */
.ca-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease;
}
.ca-gl.is-on {
  opacity: 1;
}
/* widths in steps of five, for bars drawn from data (no inline styles) */
.is-w0 { width: 0%; }
.is-w5 { width: 5%; }
.is-w10 { width: 10%; }
.is-w15 { width: 15%; }
.is-w20 { width: 20%; }
.is-w25 { width: 25%; }
.is-w30 { width: 30%; }
.is-w35 { width: 35%; }
.is-w40 { width: 40%; }
.is-w45 { width: 45%; }
.is-w50 { width: 50%; }
.is-w55 { width: 55%; }
.is-w60 { width: 60%; }
.is-w65 { width: 65%; }
.is-w70 { width: 70%; }
.is-w75 { width: 75%; }
.is-w80 { width: 80%; }
.is-w85 { width: 85%; }
.is-w90 { width: 90%; }
.is-w95 { width: 95%; }
.is-w100 { width: 100%; }

/*----- 1.7 Illustrated Icons -----*/
.ca-ico {
  display: inline-flex;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}
.ca-ico img {
  width: 100%;
  height: 100%;
}
.ca-ico.is-sm {
  width: 44px;
  height: 44px;
}
.ca-ico.is-lg {
  width: 76px;
  height: 76px;
}
/* ink line art on a dark ground: the strokes turn light, the peony stays warm */
[data-theme="dark"] .ca-ico img:not([src$="-light.png"]),
[data-theme="dark"] img[src$="-ink.png"] {
  filter: invert(1) hue-rotate(180deg);
}

/*======================
2. Preloader
========================*/
/* Fold Up: a blush knit jumper on the shell panel folds itself - the sleeves in, the body halved, halved again - into
   a neat square whose top face carries the mark; the name rises under it and the panel lifts. The jumper is two halves
   of two quarters each, every piece with a front and a back face, so each fold turns real faces in 3D. */
.ca-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  background: #FBF8F7;
  overflow: hidden;
  --fg-w: 220px;
  --fg-knit: #F2C9D0;
  --fg-knit-2: #EDBCC5;
  --fg-in: #E3A9B4;
  --fg-rib: #E6B2BC;
}
.js .ca-preloader {
  display: flex;
}
.no-js .ca-preloader {
  display: none;
}
[data-theme="dark"] .ca-preloader {
  background: #121113;
}
.pre-stage {
  position: relative;
  width: calc(var(--fg-w) * 1.9);
  height: var(--fg-w);
  perspective: 1100px;
}
.fold-garment {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--fg-w);
  height: var(--fg-w);
  margin-left: calc(var(--fg-w) / -2);
  transform-style: preserve-3d;
}
.fg-half {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
}
.fg-left {
  left: 0;
  transform-origin: 100% 50%;
}
.fg-right {
  right: 0;
}
.fg-q,
.fg-sleeve {
  position: absolute;
  transform-style: preserve-3d;
}
.fg-q {
  left: 0;
  width: 100%;
  height: 50%;
}
.fg-q.is-top {
  top: 0;
}
.fg-q.is-bottom {
  top: 50%;
  transform-origin: 50% 0;
}
.fg-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* the knit: soft ribs and a little light from the upper left */
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 62%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 3px, rgba(160, 80, 100, 0.06) 3px 6px),
    var(--fg-knit);
}
.fg-face.is-back {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 3px, rgba(140, 60, 80, 0.07) 3px 6px),
    var(--fg-in);
}
.fg-q.is-bottom .fg-face.is-back {
  transform: rotateX(180deg);
}
.fg-q.is-top .fg-face.is-back,
.fg-sleeve .fg-face.is-back {
  transform: rotateY(180deg);
}
/* the neckline: a scoop cut from the two top quarters, with its rib */
.fg-q.is-top .fg-face.is-front::after {
  content: "";
  position: absolute;
  top: -1px;
  width: 46%;
  height: 26%;
  background: #FBF8F7;
  box-shadow: 0 3px 0 var(--fg-rib);
}
.fg-left .fg-q.is-top .fg-face.is-front::after {
  right: -1px;
  border-bottom-left-radius: 100% 100%;
}
.fg-right .fg-q.is-top .fg-face.is-front::after {
  left: -1px;
  border-bottom-right-radius: 100% 100%;
}
[data-theme="dark"] .fg-q.is-top .fg-face.is-front::after {
  background: #121113;
}
/* the ribbed hem */
.fg-q.is-bottom .fg-face.is-front::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16%;
  background: repeating-linear-gradient(90deg, var(--fg-rib) 0 3px, var(--fg-knit-2) 3px 6px);
}
/* the sleeves hang from the shoulders, each folding on its shoulder seam (they reach no lower than the chest, so
   once folded in they lie inside the top half and travel with it) */
.fg-sleeve {
  top: 3%;
  width: 92%;
  height: 46%;
}
.fg-left .fg-sleeve {
  right: 100%;
  transform-origin: 100% 50%;
}
.fg-right .fg-sleeve {
  left: 100%;
  transform-origin: 0 50%;
}
.fg-sleeve .fg-face {
  clip-path: polygon(100% 0, 100% 44%, 26% 100%, 0 82%);
}
.fg-right .fg-sleeve .fg-face {
  clip-path: polygon(0 0, 100% 82%, 74% 100%, 0 44%);
}
.fg-right .fg-sleeve .fg-face.is-back {
  clip-path: polygon(100% 0, 100% 44%, 26% 100%, 0 82%);
}
.fg-left .fg-sleeve .fg-face.is-back {
  clip-path: polygon(0 0, 100% 82%, 74% 100%, 0 44%);
}
/* the folded square's top face: the back of the left top quarter, the mark printed on it */
.fg-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  margin: -29% 0 0 -29%;
}
.fold-shadow {
  position: absolute;
  left: 50%;
  bottom: -26px;
  width: 64%;
  height: 22px;
  margin-left: -32%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120, 60, 76, 0.22), rgba(120, 60, 76, 0));
}
.pre-word {
  color: #141414;
  font-family: 'Red Hat Display', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.3em;
  margin-right: -0.3em;
  text-transform: uppercase;
}
[data-theme="dark"] .pre-word {
  color: #F6F2F1;
}

/*======================
3. Header
========================*/
/* Three headers. Style one (Home 1 + inner pages): the base's main header - the wordmark, a caps menu and the bag on
   white with a hairline under it; on Home 1 it lies over the hero until the page scrolls. Style two (Home 2): the
   boutique header - a blush information bar over the white bar. Style three (Home 3): the shop home's boxed header -
   a slim night bar, the logo centred between log-in and the bag, the menu on its own row. */
.ca-header {
  position: relative;
  z-index: 1000;
  --hd-bar: var(--ca-bg);
  --hd-ink: var(--ca-heading);
  --hd-hover: var(--ca-accent-text);
  --hd-icon: var(--ca-tonal);
}
.ca-header .wide {
  display: flex;
  align-items: center;
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 40px;
}
.ca-logo {
  display: inline-flex;
  flex-shrink: 0;
}
.ca-logo img {
  height: 30px;
  width: auto;
}
.ca-logo .logo-light,
[data-theme="dark"] .ca-logo .logo-main {
  display: none;
}
[data-theme="dark"] .ca-logo .logo-light {
  display: block;
}
.ca-logo.is-light img {
  display: block;
}

/*----- 3.1 Top Bar -----*/
.header-top {
  height: 42px;
  font-size: 13px;
  font-weight: 400;
  overflow: visible;
  transition: height 0.4s var(--ca-ease), opacity 0.3s ease;
}
.header-top .wide {
  justify-content: space-between;
  height: 100%;
  gap: 30px;
}
.header-top .top-left,
.header-top .top-right {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 26px;
  white-space: nowrap;
}
.header-top .top-right {
  justify-content: flex-end;
}
.header-top .top-center {
  white-space: nowrap;
}
.header-top i {
  margin-right: 6px;
  font-size: 12px;
}
.ca-open {
  display: inline-flex;
  align-items: center;
}
.ca-open::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}
.ca-open.is-open::before {
  opacity: 1;
  background: #2F9E6E;
  box-shadow: 0 0 0 3px rgba(47, 158, 110, 0.25);
}
/* style two: a blush information bar, ink letters */
.header-style-two .header-top {
  background: var(--ca-g-blush);
  color: var(--ca-heading);
}
.header-style-two .header-top a:hover {
  color: var(--ca-accent-text);
}
.header-style-two .header-top .ca-lang .lang-btn {
  background: rgba(20, 20, 20, 0.08);
  color: var(--ca-heading);
}
/* style three: a slim night bar */
.header-style-three .header-top {
  height: 38px;
  background: var(--ca-night);
  color: #E6E1E2;
}
.header-style-three .header-top .top-center b,
.header-style-two .header-top .top-center b {
  font-weight: 500;
}
.header-style-three .header-top .ca-open.is-open::before {
  background: #7FCFAA;
}
.header-style-three .header-top a:hover {
  color: var(--ca-accent-light);
}
.header-style-three .header-top .ca-lang .lang-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #FCFCF8;
}

/*----- 3.2 Main Bar -----*/
.header-main {
  position: relative;
  background: var(--hd-bar);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.header-main .wide {
  height: 92px;
  gap: 40px;
}
/* style one: the white bar with the base's hairline under it */
.header-style-one .header-main {
  border-bottom: 1px solid var(--ca-line);
}
/* Home 1: laid over the hero's pastel photograph until the page scrolls */
.header-style-one.is-over:not(.is-sticky) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  --hd-bar: transparent;
  --hd-icon: rgba(255, 255, 255, 0.72);
  --hd-ink: #141414;
}
.header-style-one.is-over:not(.is-sticky) .header-main {
  border-bottom-color: transparent;
}
.header-style-one.is-over:not(.is-sticky) .ca-logo .logo-light {
  display: none;
}
.header-style-one.is-over:not(.is-sticky) .ca-logo .logo-main {
  display: block;
}
.ca-header-spacer.is-over {
  display: none;
}
.header-style-two .header-main {
  border-bottom: 1px solid var(--ca-line);
}
/* style three: logo centred between the log-in link and the actions */
.header-style-three .header-main .wide {
  position: relative;
  height: 104px;
  justify-content: space-between;
}
.header-style-three .header-main .ca-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.header-style-three .header-main .ca-logo img {
  height: 36px;
}
.header-login {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--hd-ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.header-style-three .header-actions {
  margin-left: 0;
}
.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hd-icon);
  color: var(--hd-ink);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.header-icon:hover {
  background: var(--ca-accent);
  color: #FFFFFF;
}
.header-icon .count,
.header-bag .count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--ca-accent);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 19px;
  text-align: center;
}
.header-icon .count:empty,
.header-bag .count:empty {
  display: none;
}
/* the bag: the base's "Cart (n)" with a running total, the bag in a peony disc */
.header-bag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 8px;
  padding: 4px 18px 4px 4px;
  border-radius: 30px;
  background: var(--hd-icon);
  color: var(--hd-ink);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.header-bag .bag-ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ca-accent);
  color: #FFFFFF;
  font-size: 14px;
}
.header-bag .bag-ico .count {
  background: var(--ca-night);
}
.header-bag b {
  font-weight: 500;
  letter-spacing: 0.02em;
}
.header-bag:hover {
  background: var(--ca-night);
  color: #FFFFFF;
}
[data-theme="dark"] .header-bag:hover {
  background: #FBF8F7;
  color: var(--ca-ink);
}
.ca-theme-toggle .ti-sun,
[data-theme="dark"] .ca-theme-toggle .ti-moon {
  display: none;
}
[data-theme="dark"] .ca-theme-toggle .ti-sun {
  display: inline-block;
}
.ca-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 13px;
  border: 0;
  border-radius: 50%;
  background: var(--ca-night);
  cursor: pointer;
}
[data-theme="dark"] .ca-menu-toggle {
  background: #FBF8F7;
}
[data-theme="dark"] .ca-menu-toggle span {
  background: var(--ca-ink);
}
.ca-menu-toggle span {
  display: block;
  height: 1.5px;
  background: #FFFFFF;
  transition: width 0.3s var(--ca-ease);
}
.ca-menu-toggle span:nth-child(2) {
  width: 70%;
}
.ca-menu-toggle:hover span:nth-child(2) {
  width: 100%;
}

/*----- 3.3 Menu Row -----*/
/* style three's own row for the menu, centred under the logo */
.header-menu {
  background: var(--hd-bar);
  border-top: 1px solid var(--ca-line);
  border-bottom: 1px solid var(--ca-line);
}
.header-menu .wide {
  justify-content: center;
  height: 56px;
}

/*----- 3.4 Main Menu -----*/
.ca-nav {
  margin: 0 auto;
}
.ca-nav > ul {
  display: flex;
  align-items: center;
  gap: 38px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ca-nav li {
  position: relative;
}
.ca-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 34px 0;
  color: var(--hd-ink);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.header-menu .ca-nav > ul > li > a {
  padding: 18px 0;
}
.ca-nav > ul > li > a i {
  font-size: 8px;
  opacity: 0.6;
  transition: transform 0.3s var(--ca-ease);
}
/* hover and current by colour only, never underlined */
.ca-nav > ul > li:hover > a,
.ca-nav > ul > li.active > a {
  color: var(--hd-hover);
}
.ca-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
.ca-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -26px;
  z-index: 50;
  min-width: 250px;
  margin: 0;
  padding: 16px 0;
  list-style: none;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-surface);
  box-shadow: var(--ca-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ca-ease), transform 0.35s var(--ca-ease), visibility 0.3s;
}

/* a bridge over the gap, so the menu stays open while the pointer crosses it */
.ca-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.ca-nav li:hover > .sub-menu,
.ca-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ca-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 26px;
  color: var(--ca-heading);
  font-size: 15px;
  font-weight: 400;
  transition: color 0.3s var(--ca-ease), padding 0.35s var(--ca-ease);
}
.ca-nav .sub-menu a i {
  font-size: 9px;
  color: var(--ca-muted);
}
.ca-nav .sub-menu li:hover > a,
.ca-nav .sub-menu li.active > a {
  padding-left: 34px;
  color: var(--ca-accent-text);
}
.ca-nav .sub-menu .sub-menu {
  top: -16px;
  left: 100%;
}
.ca-nav .sub-menu .sub-menu::before {
  left: -12px;
  right: auto;
  top: 0;
  bottom: 0;
  width: 12px;
  height: auto;
}

/*----- 3.5 Home Mega Menu -----*/
.ca-nav .has-mega {
  position: static;
}
.ca-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 50;
  width: min(980px, calc(100vw - 60px));
  padding: 28px;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-surface);
  box-shadow: var(--ca-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s var(--ca-ease), transform 0.35s var(--ca-ease), visibility 0.3s;
}
.ca-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.ca-nav .has-mega:hover > .mega-menu,
.ca-nav .has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mega-card {
  display: block;
  color: var(--ca-heading);
}
.mega-card .shot {
  display: block;
  overflow: hidden;
  background: var(--ca-mist);
  box-shadow: 0 0 0 1px var(--ca-line);
}
.mega-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.7s var(--ca-ease);
}
.mega-card:hover img {
  transform: scale(1.04);
}
.mega-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
}
.mega-meta small {
  color: var(--ca-accent-text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mega-meta b {
  font-family: var(--ca-ff-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.mega-card.is-current b,
.mega-card:hover b {
  color: var(--ca-accent-text);
}

/*----- 3.6 Sticky Header -----*/
.ca-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  animation: ca-header-in 0.6s var(--ca-ease) both;
}
.ca-header.is-sticky .header-top {
  height: 0;
  opacity: 0;
  overflow: hidden;
}
.ca-header.is-sticky .header-main,
.ca-header.is-sticky .header-menu {
  box-shadow: 0 12px 34px rgba(var(--ca-ink-rgb), 0.1);
}
.ca-header.is-sticky .header-main .wide {
  height: 76px;
}
.ca-header.is-sticky .ca-nav > ul > li > a {
  padding: 26px 0;
}
.header-style-three.is-sticky .header-main {
  display: none;
}
.header-style-three.is-sticky .header-menu .ca-nav > ul > li > a {
  padding: 18px 0;
}
.ca-header-spacer {
  display: none;
}
.ca-header-spacer.is-on {
  display: block;
}
@keyframes ca-header-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/*----- 3.7 Search Panel -----*/
/* a full-width search under the header; results come from the shop's own data as you type */
.ca-search {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2200;
  padding: 30px 0 28px;
  background: var(--ca-surface);
  box-shadow: var(--ca-shadow-lg);
}
.ca-search[hidden] {
  display: none;
}
.search-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--ca-accent);
}
.search-form > i {
  color: var(--ca-accent-text);
  font-size: 20px;
}
.search-input {
  flex: 1;
  min-width: 0;
  height: 72px;
  border: 0;
  background: transparent;
  color: var(--ca-heading);
  font-family: var(--ca-ff-head);
  font-size: 30px;
  font-weight: 500;
}
.search-input:focus {
  outline: 0;
}
.search-input::placeholder {
  color: var(--ca-muted);
}
.search-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ca-tonal);
  color: var(--ca-heading);
  font-size: 16px;
  transition: transform 0.4s var(--ca-ease), background-color 0.3s ease;
}
.search-close:hover {
  background: var(--ca-accent);
  color: #FFFFFF;
  transform: rotate(90deg);
}
.ca-search .search-results {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 22px;
}
.search-results:empty {
  margin: 0;
}
.search-hit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-tonal);
  color: var(--ca-heading);
}
.search-hit img {
  width: 58px;
  height: 58px;
  border-radius: var(--ca-radius);
  background: var(--ca-mist);
  object-fit: cover;
}
.search-hit b {
  display: block;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
}
.search-hit small {
  color: var(--ca-accent-text);
  font-size: 13px;
}
.search-hit:hover {
  background: var(--ca-mist-bg);
  color: var(--ca-heading);
}
.search-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 6px;
  color: var(--ca-muted);
  font-size: 15px;
}

/*======================
4. Offcanvas Menu
========================*/
.ca-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background: var(--ca-surface);
  box-shadow: var(--ca-shadow-lg);
  transform: translateX(105%);
  transition: transform 0.6s var(--ca-ease);
  overflow-y: auto;
}
.ca-offcanvas.open {
  transform: none;
}
.ca-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(20, 20, 20, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.ca-offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  border-bottom: 1px solid var(--ca-line);
}
.offcanvas-head .ca-logo img {
  height: 28px;
}
.offcanvas-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--ca-tonal);
  color: var(--ca-heading);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--ca-ease);
}
.offcanvas-close:hover {
  background: var(--ca-accent);
  color: #FFFFFF;
  transform: rotate(90deg);
}
.offcanvas-nav {
  flex: 1;
  padding: 14px 32px 30px;
}
.oc-group {
  border-bottom: 1px solid var(--ca-line);
}
.oc-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--ca-heading);
  font-family: var(--ca-ff-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.oc-group > button i {
  color: var(--ca-accent-text);
  font-size: 12px;
  transition: transform 0.35s var(--ca-ease);
}
.oc-group.is-open > button i {
  transform: rotate(45deg);
}
.oc-group ul {
  display: none;
  padding: 0 0 16px;
}
.oc-group.is-open ul {
  display: block;
}
.oc-group ul a {
  display: block;
  padding: 7px 0 7px 16px;
  border-left: 2px solid var(--ca-line);
  color: var(--ca-text);
  font-size: 16.5px;
}
.oc-group ul a:hover,
.oc-group ul a.is-current {
  border-color: var(--ca-accent);
  color: var(--ca-accent-text);
}
.offcanvas-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 32px 34px;
}
.offcanvas-foot .label {
  color: var(--ca-accent);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.oc-phone {
  color: #FFFFFF;
  font-family: var(--ca-ff-head);
  font-size: 26px;
}
.oc-mail {
  color: var(--ca-text);
}
.oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.offcanvas-foot .header-icon {
  --hd-icon: rgba(255, 255, 255, 0.1);
  --hd-ink: #FFFFFF;
}

/*======================
5. Custom Select
========================*/
/* Native selects stay in the form (value, name, submit); a styled button and
   listbox are drawn over them and keep them in sync. */
.ca-select {
  position: relative;
}
.ca-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0 !important;
}
.ca-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 54px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: 30px;
  background: var(--ca-tonal);
  font-size: 15.5px;
  text-align: left;
  color: var(--ca-heading);
  transition: border-color 0.3s var(--ca-ease);
}
.ca-select.is-open .select-button,
.ca-select .select-button:hover {
  border-color: var(--ca-accent);
}
.ca-select .select-button .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ca-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--ca-accent-text);
  transition: transform 0.35s var(--ca-ease);
}
.ca-select.is-open .select-button i {
  transform: rotate(180deg);
}
.ca-select .select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  max-height: 340px;
  margin: 0;
  padding: 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  background-color: var(--ca-surface);
  border-top: 2px solid var(--ca-accent);
  box-shadow: var(--ca-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--ca-ease), transform 0.3s var(--ca-ease), visibility 0.3s;
}
.ca-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 8px);
  border-top: 0;
  border-bottom: 2px solid var(--ca-accent);
  transform: translateY(-10px);
}
.ca-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ca-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--ca-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ca-ease), color 0.2s var(--ca-ease);
}
.ca-select .select-option .option-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ca-accent-text);
}
.ca-select .select-option .option-meta.is-none {
  color: var(--ca-muted);
}
.ca-select .select-option.is-focused,
.ca-select .select-option:hover {
  background-color: var(--ca-tonal);
}
.ca-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.ca-select .select-option.is-selected {
  color: var(--ca-accent-text);
}
.ca-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--ca-accent-text);
}
.ca-select.is-compact .select-button {
  height: 46px;
  border: 0;
  border-radius: 23px;
  background: var(--ca-tonal);
  font-size: 14px;
  font-weight: 700;
}
.ca-bg-sky .ca-select .select-button,
.ca-bg-mist .ca-select .select-button {
  background: var(--ca-surface);
}

/*======================
6. Language Picker
========================*/
/* Language picker: a flag and a code; the menu lists the languages that read left to right and right to left.
   The demo copy stays in English, and a right-to-left language turns the layout around. */
.ca-lang {
  position: relative;
  flex-shrink: 0;
}
.ca-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-family: var(--ca-ff-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.ca-lang .lang-btn:hover,
.ca-lang .lang-btn[aria-expanded="true"] {
  background: #FFFFFF;
  color: var(--ca-night);
}
.ca-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.ca-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.ca-lang .flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.ca-lang.is-icon .lang-btn {
  height: 46px;
  padding: 0 15px;
  background: var(--ca-tonal);
  color: var(--ca-heading);
}
.ca-lang.is-icon .lang-btn:hover,
.ca-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--ca-night);
  color: #FFFFFF;
}
.ca-lang .lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border-radius: 2px;
  background: var(--ca-surface);
  box-shadow: var(--ca-shadow-lg);
  font-family: var(--ca-ff-body);
  text-align: start;
  white-space: normal;
}
.ca-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.ca-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.ca-lang .lang-menu[hidden] {
  display: none;
}
.ca-lang .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ca-muted);
}
.ca-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ca-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--ca-line);
}
.ca-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ca-heading);
  font-family: var(--ca-ff-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.ca-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ca-muted);
}
.ca-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--ca-accent-text);
  opacity: 0;
}
.ca-lang .lang-item:hover,
.ca-lang .lang-item[aria-pressed="true"] {
  background: var(--ca-tonal);
}
.ca-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.ca-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.ca-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--ca-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ca-muted);
}

/*======================
7. Components
========================*/
/*----- 7.1 Accordion -----*/
/* hairline rows, the question in the heading face, a tonal plus that turns peony */
.ca-accordion .acc-item {
  border-bottom: 1px solid var(--ca-line-2);
}
.ca-accordion .acc-item:first-child {
  border-top: 1px solid var(--ca-line-2);
}
.ca-accordion .acc-h {
  margin: 0;
  font-family: var(--ca-ff-head);
  letter-spacing: 0;
  text-transform: none;
}
.ca-accordion .acc-head {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 22px 4px;
  color: var(--ca-heading);
  font-family: var(--ca-ff-head);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}
.ca-accordion .acc-head i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--ca-tonal);
  color: var(--ca-accent-text);
  font-size: 12px;
  transition: transform 0.4s var(--ca-ease), background-color 0.3s ease, color 0.3s ease;
}
.ca-accordion .acc-item.is-open .acc-head i {
  transform: rotate(45deg);
  background: var(--ca-accent);
  color: #FFFFFF;
}
.ca-accordion .acc-body {
  padding: 0 60px 24px 4px;
  font-size: 16px;
}
.ca-accordion .acc-item.is-unmatched {
  display: none;
}

/*----- 7.2 Product Cards -----*/
/* the base's card: the piece on its own pastel tile, the name left and the price right. On hover the card lifts, the
   photo zooms and the size run slides up from the foot of the tile (the hover accent): the sizes left as buttons that
   go straight into the bag, the sold-out ones struck. */
.ca-card {
  position: relative;
  height: 100%;
  transition: transform 0.6s var(--ca-ease);
}
.ca-card:hover {
  transform: translateY(-6px);
}
.card-media {
  position: relative;
  overflow: hidden;
  background: var(--ca-tile);
  aspect-ratio: 4 / 5;
  isolation: isolate;
}
.is-tile-mist {
  background-color: #F4F3F2;
}
.is-tile-blush {
  background-color: #FAEDEF;
}
.is-tile-mint {
  background-color: #EAF3EF;
}
.is-tile-peach {
  background-color: #FBF0E0;
}
.is-tile-sky {
  background-color: #EAF1F5;
}
.is-tile-lilac {
  background-color: #F2EEF6;
}
[data-theme="dark"] .is-tile-mist,
[data-theme="dark"] .is-tile-blush,
[data-theme="dark"] .is-tile-mint,
[data-theme="dark"] .is-tile-peach,
[data-theme="dark"] .is-tile-sky,
[data-theme="dark"] .is-tile-lilac {
  background-color: #EDE9E8;
}
.card-img {
  display: block;
  height: 100%;
}
.card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 1.2s var(--ca-ease);
}
.ca-card:hover .card-img img {
  transform: scale(1.05);
}
.card-flag {
  position: absolute;
  left: 14px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 20px;
  background: #FFFFFF;
  color: var(--ca-ink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.card-flag {
  top: 14px;
}
.card-flag + .card-flag {
  top: 46px;
}
.card-flag.is-sale {
  background: var(--ca-accent);
  color: #FFFFFF;
}
.card-flag.is-out {
  background: var(--ca-night);
  color: #FFFFFF;
}
.card-flag[hidden] + .card-flag {
  top: 14px;
}
.card-tools {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ca-ink);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ca-ease), opacity 0.4s ease;
}
.card-tools .card-icon + .card-icon {
  opacity: 0;
  transform: translateX(8px);
}
.ca-card:hover .card-tools .card-icon + .card-icon,
.card-tools .card-icon:focus-visible {
  opacity: 1;
  transform: none;
}
.card-icon:hover {
  background: var(--ca-accent);
  color: #FFFFFF;
}
.card-icon.is-on {
  background: var(--ca-accent);
  color: #FFFFFF;
}
.card-icon.is-lg {
  width: 52px;
  height: 52px;
  background: var(--ca-tonal);
  color: var(--ca-heading);
  font-size: 17px;
}
/* the size run */
.size-run {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  padding: 10px 12px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 30px rgba(20, 20, 20, 0.12);
  opacity: 0;
  transform: translateY(calc(100% + 14px));
  transition: transform 0.6s var(--ca-ease), opacity 0.4s ease;
}
.ca-card:hover .size-run,
.size-run:focus-within {
  opacity: 1;
  transform: none;
}
.run-label {
  display: block;
  margin-bottom: 8px;
  color: #6E6E73;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}
.run-sizes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.run-sizes button {
  min-width: 38px;
  height: 34px;
  padding: 0 9px;
  border-radius: 20px;
  background: rgba(20, 20, 20, 0.06);
  color: #141414;
  font-size: 12.5px;
  font-weight: 500;
  transform: translateY(10px);
  opacity: 0;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.5s var(--ca-ease), opacity 0.4s ease;
}
.ca-card:hover .run-sizes button,
.size-run:focus-within .run-sizes button {
  transform: none;
  opacity: 1;
}
.run-sizes button:nth-child(2) { transition-delay: 0.04s; }
.run-sizes button:nth-child(3) { transition-delay: 0.08s; }
.run-sizes button:nth-child(4) { transition-delay: 0.12s; }
.run-sizes button:nth-child(5) { transition-delay: 0.16s; }
.run-sizes button:nth-child(6) { transition-delay: 0.2s; }
.run-sizes button:hover {
  background: #141414;
  color: #FFFFFF;
}
.run-sizes button.is-out {
  background: transparent;
  color: #9A9598;
  cursor: not-allowed;
}
.run-sizes button.is-out s {
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--ca-accent);
}
.card-body {
  padding-top: 16px;
}
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.card-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.card-title a:hover {
  color: var(--ca-accent-text);
}
.card-price {
  flex-shrink: 0;
  color: var(--ca-heading);
  font-family: var(--ca-ff-head);
  font-size: 16px;
  font-weight: 600;
}
.card-price s {
  margin-right: 4px;
  color: var(--ca-muted);
  font-weight: 500;
}
.card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
  color: var(--ca-muted);
  font-size: 13px;
}
.card-dots {
  display: inline-flex;
  gap: 5px;
}
.card-dots .dot,
.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.14);
}
.card-rate {
  margin-left: auto;
  color: var(--ca-heading);
}
.card-rate i {
  color: var(--ca-star);
  font-size: 11px;
}
.is-hidden,
.is-unmatched {
  display: none !important;
}

/*----- 7.3 Swatches & Size Chips -----*/
/* touch-sized: 46px size chips, 22px colour swatches (house retail rule) */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transition: box-shadow 0.3s ease;
}
.swatch-dot {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.16);
}
.swatch:hover {
  box-shadow: 0 0 0 1.5px var(--ca-line-2);
}
.swatch.is-active {
  box-shadow: 0 0 0 2px var(--ca-heading);
}
.size-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.size-chip {
  position: relative;
}
.size-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.size-chip label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 0 12px;
  border-radius: 30px;
  background: var(--ca-tonal);
  color: var(--ca-heading);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.size-chip label:hover {
  background: var(--ca-tonal-2);
}
.size-chip input:checked + label {
  background: var(--ca-night);
  color: #FFFFFF;
}
[data-theme="dark"] .size-chip input:checked + label {
  background: #FBF8F7;
  color: var(--ca-ink);
}
.size-chip input:focus-visible + label {
  box-shadow: 0 0 0 3px rgba(var(--ca-accent-rgb), 0.4);
}
.size-chip.is-out label {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ca-line);
  color: var(--ca-muted);
  text-decoration: line-through;
  text-decoration-color: var(--ca-accent);
  cursor: not-allowed;
}
/* the size the saved measurements suggest */
.size-chip.is-tip label::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--ca-bg);
  border-radius: 50%;
  background: var(--ca-accent);
}
.size-chip.is-sm label {
  min-width: 46px;
  height: 40px;
  font-size: 13px;
}
.size-chip.is-wide label {
  min-width: 76px;
}

/*----- 7.4 Tabs -----*/
.ca-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}
.ca-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: 30px;
  background: var(--ca-tonal);
  color: var(--ca-heading);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.ca-tabs button small {
  color: var(--ca-accent-text);
  font-size: 12px;
}
.ca-tabs button:hover {
  background: var(--ca-tonal-2);
}
.ca-tabs button.is-active {
  background: var(--ca-night);
  color: #FFFFFF;
}
.ca-tabs button.is-active small {
  color: var(--ca-accent-light);
}
[data-theme="dark"] .ca-tabs button.is-active {
  background: #FBF8F7;
  color: var(--ca-ink);
}
[data-theme="dark"] .ca-tabs button.is-active small {
  color: var(--ca-accent);
}
.ca-tabs.text-center,
.ca-tabs.is-center {
  justify-content: center;
}

/*----- 7.5 Rails & Slider Controls -----*/
.rail-arrows {
  display: flex;
  gap: 10px;
}
.rail-arrows button,
.hero-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--ca-tonal);
  color: var(--ca-heading);
  font-size: 15px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ca-ease), opacity 0.3s ease;
}
.rail-arrows button:hover,
.hero-arrow:hover {
  background: var(--ca-accent);
  color: #FFFFFF;
}
.rail-arrows .swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
}
.rail-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
}
.ca-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
}
.ca-dots .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 !important;
  border-radius: 50%;
  background: var(--ca-line-2);
  opacity: 1;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.ca-dots .swiper-pagination-bullet-active {
  background: var(--ca-accent);
  transform: scale(1.3);
}

/*----- 7.6 Formats -----*/
/* icon items on a night band: a line icon, a title, a sentence */
.ca-format {
  display: block;
  height: 100%;
  color: var(--ca-text);
}
.ca-format .ca-ico {
  margin-bottom: 18px;
  transition: transform 0.6s var(--ca-ease);
}
.format-title {
  margin-bottom: 10px;
  font-size: 22px;
}
.ca-format p {
  margin-bottom: 0;
  font-size: 16px;
}
.ca-format:hover .ca-ico {
  transform: translateY(-6px) rotate(-6deg);
}

/*----- 7.7 Voices -----*/
.ca-voice {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 34px;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-surface);
}
.ca-voice blockquote {
  margin: 16px 0 24px;
}
.ca-voice blockquote p {
  color: var(--ca-heading);
  font-family: var(--ca-ff-head);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}
.ca-voice figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ca-voice .voice-who {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.ca-voice figcaption b {
  color: var(--ca-heading);
  font-size: 15px;
  font-weight: 500;
}
.ca-voice figcaption a {
  color: var(--ca-accent-text);
  font-size: 13px;
}

/*----- 7.8 Post Cards -----*/
.ca-post {
  display: block;
}
.post-img {
  display: block;
  overflow: hidden;
  background: var(--ca-tile);
}
.post-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.2s var(--ca-ease);
}
.ca-post.is-tall .post-img img {
  aspect-ratio: 4 / 5;
}
.ca-post:hover .post-img img {
  transform: scale(1.05);
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  color: var(--ca-muted);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.post-meta span + span::before {
  content: "/";
  margin: 0 8px;
}
.post-title {
  margin: 8px 0 16px;
  font-size: clamp(19px, 1.4vw, 24px);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.post-title a:hover {
  color: var(--ca-accent-text);
}

/*----- 7.9 Amount Stepper -----*/
.ca-step {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 6px;
  border-radius: 30px;
  background: var(--ca-tonal);
}
.ca-step button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--ca-heading);
  font-size: 12px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.ca-step button:hover {
  background: var(--ca-accent);
  color: #FFFFFF;
}
.ca-step output {
  min-width: 44px;
  padding: 0 4px;
  color: var(--ca-heading);
  font-size: 16px;
  text-align: center;
  white-space: nowrap;
}
.ca-step.is-sm {
  height: 42px;
}
.ca-step.is-sm button {
  width: 32px;
  height: 32px;
}
.ca-step.is-sm output {
  min-width: 32px;
  font-size: 15px;
}

/*----- 7.10 Pagination -----*/
.ca-pages {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 60px;
}
.ca-pages a,
.ca-pages span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 10px;
  border-radius: 30px;
  background: var(--ca-tonal);
  color: var(--ca-heading);
  font-size: 15px;
}
.ca-pages a:hover,
.ca-pages .is-current {
  background: var(--ca-night);
  color: #FFFFFF;
}
[data-theme="dark"] .ca-pages a:hover,
[data-theme="dark"] .ca-pages .is-current {
  background: #FBF8F7;
  color: var(--ca-ink);
}

/*----- 7.11 Choice Cards -----*/
/* a radio or checkbox as a card (the input itself is visually hidden); the checked card turns ink */
.choice-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 16px 20px;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-tonal);
  color: var(--ca-heading);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-card b {
  display: block;
  font-weight: 500;
  line-height: 1.3;
}
.choice-card small {
  display: block;
  color: var(--ca-muted);
  font-size: 13.5px;
  line-height: 1.4;
}
.choice-card .ca-ico {
  width: 46px;
  height: 46px;
}
.choice-card:hover {
  box-shadow: inset 0 0 0 1.5px var(--ca-accent);
}
.choice-card.is-checked {
  background: var(--ca-night);
  color: #FFFFFF;
  --ca-muted: #BDB7B9;
}
.choice-card.is-checked .ca-ico img {
  filter: invert(1) hue-rotate(180deg);
}
[data-theme="dark"] .choice-card.is-checked {
  background: #FBF8F7;
  color: var(--ca-ink);
  --ca-muted: #6E6E73;
}
[data-theme="dark"] .choice-card.is-checked .ca-ico img {
  filter: none;
}
.choice-card:focus-within {
  box-shadow: 0 0 0 3px rgba(var(--ca-accent-rgb), 0.45);
}
.choice-card.is-slim {
  padding: 14px 18px;
}
/* a segmented switch (units) */
.seg-switch {
  display: inline-flex;
  padding: 4px;
  border-radius: 30px;
  background: var(--ca-tonal);
}
.seg-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.seg-switch label {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border-radius: 30px;
  color: var(--ca-heading);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.seg-switch input:checked + label {
  background: var(--ca-night);
  color: #FFFFFF;
}
[data-theme="dark"] .seg-switch input:checked + label {
  background: #FBF8F7;
  color: var(--ca-ink);
}
.seg-switch input:focus-visible + label {
  box-shadow: 0 0 0 3px rgba(var(--ca-accent-rgb), 0.4);
}
/* a meter with a fill */
.ca-meter {
  position: relative;
  height: 8px;
  border-radius: 6px;
  background: var(--ca-tonal);
  overflow: hidden;
}
.ca-meter .meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 6px;
  background: var(--ca-accent);
  transition: width 0.8s var(--ca-ease);
}

/*======================
8. Home One
========================*/
/* The base's main home: a full-bleed pastel hero with the header laid over it, the service strip, the category strip,
   the interactive links over a large photograph, the capsule (the scroll moment), a centred quote, the product rail,
   three tall photographs, a photo band and the journal. */

/*----- 8.1 Hero -----*/
.ca-hero {
  position: relative;
  overflow: clip;
}
.hero-one .swiper {
  height: clamp(640px, 100vh, 1000px);
}
.hero-one .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ca-blush);
}
.hero-one .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 30%;
}
/* the pastel paper lightens behind the copy */
.hero-one .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.38) 34%, rgba(255, 255, 255, 0) 58%);
  pointer-events: none;
}
.hero-one .container {
  position: relative;
  z-index: 2;
  padding-top: 90px;
}
.hero-copy {
  max-width: 640px;
}
.hero-one .hero-copy {
  --ca-heading: #141414;
  --ca-text: #3D3A3C;
  --ca-accent-text: #A81F4E;
}
.hero-one .hero-title {
  margin: 4px 0 26px;
  font-size: clamp(50px, 6.4vw, 112px);
  line-height: 0.95;
}
.hero-one .ca-lead {
  max-width: 470px;
  margin-bottom: 34px;
  font-size: 18.5px;
}
.hero-controls {
  position: absolute;
  right: max(16px, calc((100vw - 1320px) / 2 + 12px));
  bottom: 44px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-count {
  margin-right: 10px;
  color: #141414;
  font-family: var(--ca-ff-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.hero-count b {
  font-size: 22px;
}
.hero-one .hero-arrow {
  background: rgba(255, 255, 255, 0.86);
  color: #141414;
}
.hero-one .hero-arrow:hover {
  background: #141414;
  color: #FFFFFF;
}

/*----- 8.2 Service Strip -----*/
/* one strip with dividers under the hero (house rule: one bar, not floating cards) */
.ca-service-strip {
  border-bottom: 1px solid var(--ca-line);
}
.service-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.service-strip li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 30px 24px;
}
.service-strip li + li {
  border-left: 1px solid var(--ca-line);
}
.sv-copy b {
  display: block;
  color: var(--ca-heading);
  font-family: var(--ca-ff-head);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.sv-copy small {
  color: var(--ca-muted);
  font-size: 14px;
}

/*----- 8.3 Categories -----*/
.cat-tile {
  display: block;
  text-align: center;
}
.cat-img {
  display: block;
  overflow: hidden;
  background: var(--ca-tile);
}
.cat-img img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  transition: transform 1.1s var(--ca-ease);
}
.cat-tile:hover .cat-img img {
  transform: scale(1.06);
}
.cat-name {
  display: block;
  margin-top: 18px;
  color: var(--ca-heading);
  font-family: var(--ca-ff-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.cat-meta {
  display: block;
  margin-top: 4px;
  color: var(--ca-muted);
  font-size: 13.5px;
}
.cat-tile:hover .cat-name {
  color: var(--ca-accent-text);
}

/*----- 8.4 Shop By Mood -----*/
/* the base's interactive links: the names over the left of a large photograph that runs to the screen's edge */
.mood-wrap {
  position: relative;
  padding-left: max(16px, calc((100vw - 1320px) / 2 + 12px));
  padding-right: 0;
}
.mood-photo {
  position: relative;
  height: clamp(520px, 44vw, 760px);
  margin-left: 16%;
  overflow: hidden;
  background: var(--ca-g-mint);
}
.mood-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.mood-photo img.is-on {
  opacity: 1;
}
.mood-list {
  position: absolute;
  top: 50%;
  left: max(16px, calc((100vw - 1320px) / 2 + 12px));
  z-index: 2;
  transform: translateY(-50%);
}
.mood-list ul {
  margin: 4px 0 28px;
}
.mood-list li + li {
  margin-top: 6px;
}
.mood-list a {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding: 4px 14px 4px 0;
  color: #141414;
}
.mood-name {
  position: relative;
  font-family: var(--ca-ff-head);
  font-size: clamp(24px, 2.3vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  transition: color 0.3s ease, transform 0.5s var(--ca-ease);
}
.mood-list small {
  color: rgba(20, 20, 20, 0.62);
  font-size: 13px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.4s var(--ca-ease);
}
.mood-list a.is-active .mood-name,
.mood-list a:hover .mood-name {
  color: var(--ca-accent);
  transform: translateX(10px);
}
.mood-list a.is-active small,
.mood-list a:hover small {
  opacity: 1;
  transform: none;
}
.mood-list .ca-eyebrow {
  --ca-accent-text: #A81F4E;
}
.mood-list .ca-link {
  --ca-heading: #141414;
  color: #141414;
}
/* on the dark theme the names sit on a panel, half over the page and half over the photograph */
[data-theme="dark"] .mood-list {
  padding: 26px 28px;
  border-radius: var(--ca-radius-lg);
  background: rgba(28, 26, 29, 0.92);
}
[data-theme="dark"] .mood-list a {
  color: var(--ca-heading);
}
[data-theme="dark"] .mood-list small {
  color: var(--ca-muted);
}
[data-theme="dark"] .mood-list .ca-link {
  --ca-heading: #F6F2F1;
  color: #F6F2F1;
}

/*----- 8.5 The Capsule -----*/
.ca-capsule-moment {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.ca-capsule-moment h2 .line {
  display: block;
}
.cm-count {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}
.cm-count > b {
  min-width: 2ch;
  color: var(--ca-accent-text);
  font-family: var(--ca-ff-head);
  font-size: clamp(76px, 7vw, 120px);
  font-weight: 700;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.cm-count span {
  color: var(--ca-heading);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cm-readout .ca-rows {
  margin-bottom: 22px;
}
.cm-look {
  margin-bottom: 30px;
}
.cm-look .ca-label {
  margin-bottom: 10px;
}
.cm-look-imgs {
  display: flex;
  gap: 8px;
  min-height: 70px;
}
.cm-look-imgs img {
  width: 56px;
  height: 70px;
  border-radius: 6px;
  background: #FFFFFF;
  object-fit: cover;
}
.cm-look small {
  display: block;
  margin-top: 8px;
  color: var(--ca-muted);
  font-size: 13.5px;
}
.cm-rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.cm-slot {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.8);
}
.cm-piece {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(120, 60, 76, 0.12);
}
.cm-piece img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cm-piece small {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  padding: 3px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  color: #141414;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cm-piece:hover small {
  opacity: 1;
}
[data-theme="dark"] .cm-slot {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.1);
}

/*----- 8.6 Quote -----*/
.quote-box {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.quote-box .ca-voice {
  padding: 0;
  background: none;
}
.quote-box .ca-voice blockquote {
  margin: 22px 0 28px;
}
.quote-box .ca-voice blockquote p {
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.quote-box .ca-voice figcaption {
  justify-content: center;
}
.quote-box .ca-stars {
  font-size: 15px;
}
.quote-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--ca-line);
}

/*----- 8.7 The Edit -----*/
.edit-wrap {
  padding: 0 40px;
}
.edit-tile {
  position: relative;
  display: block;
  overflow: hidden;
}
.edit-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 1.2s var(--ca-ease);
}
.edit-tile:hover img {
  transform: scale(1.05);
}
.edit-tile.is-low {
  margin-top: 70px;
}
.et-copy {
  position: absolute;
  left: 22px;
  bottom: 22px;
  padding: 16px 22px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: #141414;
  transition: transform 0.5s var(--ca-ease);
}
.et-copy b {
  display: block;
  font-family: var(--ca-ff-head);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.et-copy small {
  color: #6E6E73;
  font-size: 13.5px;
}
.edit-tile:hover .et-copy {
  transform: translateY(-6px);
}

/*----- 8.8 Photo Band Pieces -----*/
.band-copy {
  max-width: 600px;
}
.band-copy h2 {
  margin-bottom: 20px;
}
.band-copy .ca-lead {
  margin-bottom: 32px;
}
.band-panel {
  padding: 32px 34px;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-surface);
  box-shadow: var(--ca-shadow-lg);
}
.band-panel h3 {
  margin-bottom: 16px;
  text-transform: uppercase;
}
.store-lines b {
  font-size: 14.5px;
}
.store-lines .is-open b {
  color: var(--ca-ok-text);
}
.ca-band-cta .band-copy {
  max-width: 640px;
}
/* a pastel call-to-action band, centred */
.ca-cta-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  text-align: center;
}
.ca-cta-band .band-copy {
  max-width: 680px;
  margin: 0 auto;
}

/*======================
9. Home Two
========================*/
/* The base's boutique home: a triptych hero, the peach band with its quote and the masonry wall of pieces, the fitting
   room (the scroll moment), new in by week, gift cards and reviews. */

/*----- 9.1 Hero -----*/
.hero-two .swiper {
  height: clamp(620px, 88vh, 920px);
}
.hero-two .swiper-slide {
  position: relative;
  overflow: hidden;
  background: var(--ca-bg);
}
.tri-photos {
  display: grid;
  grid-template-columns: 1fr 1.55fr 1fr;
  gap: 12px;
  height: 100%;
}
.tri-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.tri-card {
  position: absolute;
  left: 50%;
  bottom: 64px;
  z-index: 2;
  width: min(580px, calc(100% - 32px));
  padding: 36px 44px 40px;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-surface);
  box-shadow: var(--ca-shadow-lg);
  text-align: center;
  transform: translateX(-50%);
}
.tri-card .hero-title {
  margin: 4px 0 24px;
  font-size: clamp(38px, 3.8vw, 66px);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.tri-card .ca-btns {
  justify-content: center;
}
.hero-arrow.is-side {
  position: absolute;
  top: 46%;
  z-index: 5;
  background: #141414;
  color: #FFFFFF;
}
.hero-arrow.is-side.hero-prev {
  left: 28px;
}
.hero-arrow.is-side.hero-next {
  right: 28px;
}
.hero-arrow.is-side:hover {
  background: var(--ca-accent);
}
.hero-count.is-under {
  position: absolute;
  right: 28px;
  bottom: 22px;
  z-index: 5;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
}

/*----- 9.2 The Wall -----*/
/* the base's boutique band: the paper peach ground, a centred quote, then the pieces in three staggered columns */
.ca-wall {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.wall-quote {
  max-width: 760px;
  margin: 0 auto 70px;
  text-align: center;
}
.wall-mark {
  display: block;
  height: 54px;
  color: var(--ca-accent-text);
  font-family: var(--ca-ff-head);
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
}
.wall-quote h2 {
  margin: 10px 0 20px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.wall-who {
  display: block;
  margin-top: 18px;
  color: var(--ca-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wall-col.is-offset {
  padding-top: 90px;
}
.wall-item + .wall-item {
  margin-top: 34px;
}
.wall-item.is-tall .card-media {
  aspect-ratio: 3 / 4;
}
.wall-item.is-short .card-media {
  aspect-ratio: 1 / 1;
}
.wall-more {
  margin-top: 60px;
}

/*----- 9.3 The Fitting Room -----*/
/* each look behind a curtain on a brass rail; the curtain's pleats are a repeating shade in the collection's paper colour,
   so when the scroll draws it back (scaleX) the pleats bunch the way a real curtain gathers */
.fr-look {
  margin: 0;
}
.fr-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--ca-tile);
}
.fr-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.fr-rail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 14px;
  background: linear-gradient(180deg, #E9D3A1 0%, #C9A764 45%, #8F7240 100%);
  box-shadow: 0 3px 8px rgba(20, 20, 20, 0.18);
}
.fr-rings {
  position: absolute;
  inset: 2px 0 auto 0;
  height: 20px;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0 4px, #B8955A 4px 6px, rgba(0, 0, 0, 0) 6px) 0 0 / 24px 20px repeat-x;
}
.fr-curtain {
  position: absolute;
  top: 12px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  --cu: #F2C9D0;
  --cu-dark: #DFA8B3;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 30%, rgba(20, 20, 20, 0.06) 100%),
    repeating-linear-gradient(90deg, var(--cu) 0, var(--cu-dark) 13px, var(--cu) 26px);
  box-shadow: inset 0 -10px 18px rgba(20, 20, 20, 0.08);
}
.fr-curtain.is-peach {
  --cu: #F6D6AE;
  --cu-dark: #E3B98A;
}
.fr-curtain.is-mint {
  --cu: #CDE4DD;
  --cu-dark: #A9CDC2;
}
.fr-curtain.is-lilac {
  --cu: #E2D8EE;
  --cu-dark: #C7B7DC;
}
.fr-curtain.is-sky {
  --cu: #D3E3EC;
  --cu-dark: #B2CCDA;
}
.fr-tag {
  padding-top: 20px;
}
.fr-tag b {
  display: block;
  margin: 2px 0 4px;
  color: var(--ca-heading);
  font-family: var(--ca-ff-head);
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
}
.fr-tag small {
  display: block;
  margin-bottom: 14px;
  color: var(--ca-muted);
  font-size: 14px;
}

/*----- 9.4 New This Week -----*/
.week-summary b {
  color: var(--ca-accent-text);
}

/*----- 9.5 Gift Card Band -----*/
.gift-fan {
  position: relative;
  height: clamp(320px, 30vw, 460px);
}
.fan-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 66%;
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(20, 20, 20, 0.16);
  transition: transform 0.8s var(--ca-ease);
}
.fan-card > img:first-child {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}
.fan-logo {
  position: absolute;
  left: 9%;
  top: 12%;
  width: 34%;
}
.fan-card.is-blush {
  z-index: 3;
  transform: translate(-50%, -50%) rotate(-4deg);
}
.fan-card.is-mint {
  z-index: 2;
  transform: translate(-72%, -60%) rotate(-14deg);
}
.fan-card.is-peach {
  z-index: 1;
  transform: translate(-28%, -40%) rotate(8deg);
}
.gift-fan:hover .fan-card.is-mint {
  transform: translate(-80%, -66%) rotate(-18deg);
}
.gift-fan:hover .fan-card.is-peach {
  transform: translate(-20%, -34%) rotate(12deg);
}

/*----- 9.6 Rating Card -----*/
.rating-card {
  padding: 30px;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-surface);
}
.rc-avg {
  display: block;
  color: var(--ca-heading);
  font-family: var(--ca-ff-head);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
}
.rating-card .ca-stars {
  margin: 10px 0 12px;
  font-size: 15px;
}
.rating-card p {
  font-size: 15px;
}
.rc-split li {
  display: grid;
  grid-template-columns: 64px 1fr 40px;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-size: 13.5px;
}
.rc-split b {
  color: var(--ca-heading);
  font-weight: 500;
  text-align: right;
}

/*======================
10. Home Three
========================*/
/* The base's shop home, boxed: a slider inside the container with three collection tiles under it, the edit with its
   sidebar, the tape measure on the dress form (the scroll moment), a photo band, the finishing touches and questions. */

/*----- 10.1 Boxed Layout -----*/
body.is-boxed {
  background: var(--ca-g-blush);
}
body.is-boxed .main-root,
body.is-boxed .ca-footer {
  max-width: 1560px;
  margin-left: auto;
  margin-right: auto;
}
body.is-boxed .main-root {
  background: var(--ca-bg);
}

/*----- 10.2 Hero -----*/
.hero-three {
  padding-top: 30px;
}
.hero-box {
  position: relative;
}
.hero-three .swiper {
  height: clamp(460px, 40vw, 640px);
}
.hero-three .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--ca-g-sky);
}
.hero-three .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 30%;
}
.hero-three .hero-copy {
  position: relative;
  z-index: 2;
  max-width: 420px;
  margin-right: 9%;
  --ca-heading: #141414;
  --ca-text: #3D3A3C;
  --ca-accent-text: #A81F4E;
  color: var(--ca-text);
}
.hero-three .hero-title {
  margin: 4px 0 14px;
  font-size: clamp(54px, 6vw, 108px);
  line-height: 0.95;
}
.hero-three .hero-copy p {
  margin-bottom: 22px;
  font-size: 17px;
}
.hero-three .ca-link {
  --ca-heading: #141414;
}
.hero-arrow.is-line {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 60px;
  height: 60px;
  margin-top: -30px;
  background: transparent;
  color: #141414;
  font-size: 20px;
}
.hero-arrow.is-line.hero-prev {
  left: 20px;
}
.hero-arrow.is-line.hero-next {
  right: 20px;
}
.hero-arrow.is-line:hover {
  background: rgba(255, 255, 255, 0.86);
  color: var(--ca-accent);
}
.col-tiles {
  margin-top: 0;
  padding-top: 12px;
}
.col-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ca-tile);
}
.col-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.1s var(--ca-ease);
}
.col-tile:hover img {
  transform: scale(1.05);
}
.ct-copy {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 50px 22px 18px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 100%);
  color: #141414;
  text-align: right;
}
.ct-copy small {
  display: block;
  font-size: 14px;
}
.ct-copy b {
  font-family: var(--ca-ff-head);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/*----- 10.3 The Edit -----*/
.edit-side {
  padding: 34px 32px 38px;
  background: var(--ca-mist-bg);
}
.edit-side .side-search {
  margin-bottom: 34px;
}
.edit-side h3 {
  margin-bottom: 14px;
}
.edit-side .side-list {
  margin-bottom: 34px;
}
.side-gift {
  position: relative;
  display: block;
  margin-bottom: 34px;
  border-radius: var(--ca-radius-lg);
  overflow: hidden;
  background: var(--ca-g-blush);
}
.side-gift > img:first-child {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.9s var(--ca-ease);
}
.side-gift-logo {
  position: absolute;
  left: 8%;
  top: 10%;
  width: 34%;
}
.side-gift span {
  position: absolute;
  left: 8%;
  bottom: 10%;
  color: #141414;
}
.side-gift b {
  display: block;
  font-family: var(--ca-ff-head);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
}
.side-gift small {
  font-size: 13.5px;
}
.side-gift:hover > img:first-child {
  transform: scale(1.04);
}

/*----- 10.4 The Tape Measure -----*/
.ca-tape {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.ca-tape h2 .line {
  display: block;
}
.tm-stage {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
}
.tm-form {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(60, 90, 80, 0.18));
}
.tm-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tm-rows li {
  transition: background-color 0.4s ease;
}
.tm-rows b {
  font-family: var(--ca-ff-head);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tm-rows small {
  color: var(--ca-muted);
  font-family: var(--ca-ff-body);
  font-size: 13px;
  font-weight: 400;
}
.tm-rows li.is-now span,
.tm-rows li.is-done span {
  color: var(--ca-accent-text);
}
.tm-fits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 24px;
}
.tm-fits li {
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  text-align: center;
  transition: background-color 0.4s ease, transform 0.5s var(--ca-ease);
}
[data-theme="dark"] .tm-fits li {
  background: rgba(255, 255, 255, 0.06);
}
.tm-fits span {
  display: block;
  color: var(--ca-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tm-fits b {
  color: var(--ca-heading);
  font-family: var(--ca-ff-head);
  font-size: 30px;
  font-weight: 700;
}
.is-measured .tm-fits li {
  background: var(--ca-surface);
  transform: translateY(-4px);
}

/*======================
11. Inner Pages
========================*/
/*----- 11.1 Shared Cards -----*/
.post-quote {
  margin: 30px 0;
  padding: 28px 32px;
  border-left: 5px solid var(--ca-accent);
  border-radius: 0 14px 14px 0;
  background: var(--ca-mist-bg);
}
.post-quote p {
  color: var(--ca-heading);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.45;
}
.post-quote cite {
  display: block;
  margin-top: 12px;
  color: var(--ca-accent-text);
  font-style: normal;
  font-weight: 500;
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 0;
}

/*----- 11.2 Team -----*/
.team-card {
  height: 100%;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-surface);
  box-shadow: 0 0 0 1px var(--ca-line);
  overflow: hidden;
}
.tc-img {
  display: block;
  overflow: hidden;
}
.tc-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  object-position: center top;
  transform-origin: center top;
  transition: transform 0.8s var(--ca-ease);
}
.team-card:hover .tc-img img {
  transform: scale(1.05);
}
.tc-body {
  padding: 22px 24px 24px;
}
.tc-body h3 a:hover {
  color: var(--ca-accent-text);
}
.tc-role {
  display: block;
  color: var(--ca-accent-text);
  font-weight: 500;
}
.tc-since {
  display: block;
  margin: 4px 0 14px;
  color: var(--ca-muted);
  font-size: 14px;
}
.profile-photo {
  position: relative;
  border-radius: var(--ca-radius-lg);
  overflow: hidden;
}
.profile-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.9;
  object-fit: cover;
  object-position: center top;
}
.profile-rows {
  margin-top: 22px;
}

/*----- 11.3 FAQ -----*/
.faq-group + .faq-group {
  margin-top: 56px;
}
.faq-group h2 {
  margin-bottom: 18px;
}
.faq-group[hidden] {
  display: none;
}
.acc-item h3 {
  margin: 0;
  font-size: inherit;
}

/*======================
12. Shop Pages
========================*/
/*----- 12.1 Sidebar -----*/
.ca-sidebar,
.faq-side {
  display: grid;
  gap: 22px;
}
.side-widget {
  padding: 26px 24px;
  border-radius: var(--ca-radius-card);
  background: var(--ca-mist-bg);
}
.side-widget h2,
.side-widget .faq-label {
  display: block;
  margin-bottom: 16px;
}
.side-search {
  position: relative;
}
.side-search .ca-input {
  padding-right: 56px;
  background: var(--ca-surface);
}
.side-search button,
.side-search .search-ico {
  position: absolute;
  right: 6px;
  top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--ca-accent);
  color: #FFFFFF;
}
.side-search .search-ico {
  pointer-events: none;
}
.side-list li + li {
  border-top: 1px solid var(--ca-line);
}
.side-list a {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  color: var(--ca-heading);
  font-weight: 400;
}
.side-list a span {
  color: var(--ca-muted);
}
.side-list a:hover {
  color: var(--ca-accent-text);
}
.ca-range {
  width: 100%;
  accent-color: var(--ca-accent);
}
.side-recent li + li {
  margin-top: 14px;
}
.side-post {
  display: flex;
  align-items: center;
  gap: 14px;
}
.side-post img {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
}
.side-post small {
  display: block;
  color: var(--ca-accent-text);
  font-size: 13px;
  font-weight: 500;
}
.side-post b {
  color: var(--ca-heading);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}
.side-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.side-tags a {
  padding: 7px 13px;
  border-radius: 8px;
  background: var(--ca-surface);
  color: var(--ca-heading);
  font-size: 14px;
  font-weight: 400;
}
.side-tags a:hover {
  background: var(--ca-accent);
  color: #FFFFFF;
}
.side-cta {
  text-align: center;
}
.side-widget.is-night {
  background: var(--ca-night);
}
.side-cta img {
  width: 76px;
  margin-bottom: 10px;
}
.side-cta p {
  margin: 10px 0 18px;
}
.side-cta .oc-phone {
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 500;
}

/*----- 12.2 Shop Grid -----*/
.shop-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  padding: 12px 12px 12px 20px;
  border-radius: var(--ca-radius-card);
  background: var(--ca-mist-bg);
}
.shop-bar p {
  margin: 0;
  font-weight: 400;
}
.shop-bar b {
  color: var(--ca-heading);
  font-size: 20px;
  font-weight: 500;
}
.shop-sort {
  min-width: 220px;
}

/*----- 12.3 Bag & Wishlist -----*/
.cart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.cart-head h2 span {
  color: var(--ca-muted);
  font-size: 0.6em;
}
.bag-line {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px;
  border-radius: var(--ca-radius-card);
  background: var(--ca-surface);
  box-shadow: 0 0 0 1px var(--ca-line);
}
.bag-line + .bag-line {
  margin-top: 12px;
}
.bl-img {
  flex-shrink: 0;
  display: block;
  width: 96px;
  border-radius: 10px;
  background: #FFFFFF;
  overflow: hidden;
}
.bl-img img {
  display: block;
  width: 100%;
  aspect-ratio: 800 / 620;
  object-fit: cover;
}
.bl-body {
  flex: 1;
  min-width: 0;
}
.bl-name {
  font-size: 16.5px;
}
.bl-unit {
  display: block;
  color: var(--ca-muted);
  font-size: 13.5px;
}
.bl-sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--ca-accent-text);
  font-size: 12.5px;
  font-weight: 500;
}
.bl-total {
  min-width: 80px;
  color: var(--ca-heading);
  font-size: 17px;
  text-align: right;
}
.bl-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ca-tonal);
  color: var(--ca-muted);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.bl-remove:hover {
  background: var(--ca-error);
  color: #FFFFFF;
}
.coupon-form {
  margin-top: 28px;
}
.coupon-row {
  display: flex;
  gap: 10px;
  max-width: 460px;
}
.order-summary {
  position: sticky;
  top: 120px;
  padding: 28px;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-mist-bg);
}
.order-summary h2 {
  margin-bottom: 18px;
}
.order-summary .ca-btn {
  margin-top: 20px;
}
.summary-note {
  margin: 16px 0 0;
  color: var(--ca-muted);
  font-size: 14px;
}
.summary-note i {
  margin-right: 6px;
  color: var(--ca-accent-text);
}
.goal-bar {
  height: 10px;
  border-radius: 5px;
  background: var(--ca-tonal);
  overflow: hidden;
}
.goal-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 5px;
  background: var(--ca-accent);
  transition: width 0.6s var(--ca-ease);
}
.order-lines li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ca-line);
}
.ol-img {
  flex-shrink: 0;
  width: 56px;
  border-radius: 8px;
  background: #FFFFFF;
  overflow: hidden;
}
.ol-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.ol-name {
  flex: 1;
  color: var(--ca-heading);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
}
.ol-name small {
  display: block;
  color: var(--ca-muted);
  font-size: 12.5px;
  font-weight: 400;
}
.order-lines b {
  color: var(--ca-heading);
  font-size: 15px;
}
.order-done {
  max-width: 620px;
  margin: 0 auto;
  padding: 50px;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-mist-bg);
  text-align: center;
}
.order-done > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--ca-accent);
  color: #FFFFFF;
  font-size: 28px;
}
.order-done .ca-rows {
  margin: 24px 0 30px;
  text-align: left;
}

/*----- 12.4 Order Tracking -----*/
.track-card {
  padding: 34px;
  border-radius: var(--ca-radius-lg);
}
.track-card h2 {
  margin-bottom: 10px;
}
.track-facts {
  margin-top: 24px;
}
.track-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border-radius: var(--ca-radius-card);
  background: var(--ca-surface);
  box-shadow: 0 0 0 1px var(--ca-line);
  opacity: 0.55;
  transition: opacity 0.4s ease, background-color 0.4s ease;
}
.track-steps li + li {
  margin-top: 12px;
}
.track-steps img {
  width: 50px;
  height: 50px;
}
.track-steps b {
  display: block;
  color: var(--ca-heading);
  font-size: 17px;
}
.track-steps small {
  color: var(--ca-muted);
  font-size: 14px;
}
.track-steps li.is-done {
  opacity: 1;
}
.track-steps li.is-done::after {
  content: "\f00c";
  position: absolute;
  right: 20px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  border-radius: 50%;
  background: var(--ca-accent);
  color: #FFFFFF;
  font-family: "Font Awesome 6 Free";
  font-size: 12px;
  font-weight: 900;
}
.track-steps li.is-now {
  opacity: 1;
  background: var(--ca-night);
  box-shadow: none;
}
.track-steps li.is-now b {
  color: #FFFFFF;
}
.track-steps li.is-now small {
  color: rgba(255, 255, 255, 0.84);
}
.track-stage {
  margin-top: 20px;
  color: var(--ca-heading);
  font-size: 18px;
  font-weight: 500;
}

/*======================
13. Capsula Pages
========================*/
/* The niche pages: the shop's filters, the product page, checkout's steps and pickup, the strength calculator and
   table, the lab certificate, the finder, the stores, the farm journey; then the inner pages' own pieces. */

/*----- 13.1 Shop Filters -----*/
.shop-cats {
  margin-bottom: 50px;
}
.shop-side {
  position: sticky;
  top: 110px;
}
.side-search {
  position: relative;
  margin-bottom: 30px;
}
.side-search .ca-input {
  padding-right: 54px;
}
.side-search button {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ca-accent);
  color: #FFFFFF;
}
.side-block {
  padding: 22px 0;
  border-top: 1px solid var(--ca-line);
}
.side-block h2 {
  margin-bottom: 14px;
}
.side-block .ca-check + .ca-check {
  margin-top: 10px;
}
.side-block .ca-check small {
  color: var(--ca-muted);
}
.price-out {
  margin: 8px 0 0;
  font-size: 15px;
}
.price-out b {
  color: var(--ca-heading);
}
.side-promo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 30px;
  padding: 26px;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-night);
  color: #D1D0C3;
}
.side-promo img {
  width: 46px;
  margin-bottom: 10px;
}
.side-promo b {
  color: #FFFFFF;
  font-size: 19px;
  font-weight: 400;
}
.side-promo:hover {
  color: #F0B77A;
}
.ca-empty {
  padding: 70px 20px;
  text-align: center;
}
.ca-empty > i {
  display: block;
  margin-bottom: 18px;
  color: var(--ca-accent-text);
  font-size: 40px;
}
.ca-empty h2,
.ca-empty h3 {
  margin-bottom: 10px;
}
.ca-empty .ca-btn {
  margin-top: 14px;
}

/*----- 13.2 Product Page -----*/
.pp-gallery {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
}
.pp-main {
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.pp-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.pp-thumbs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pp-thumb {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ca-tile);
  opacity: 0.6;
  transition: opacity 0.3s ease, box-shadow 0.3s ease;
}
.pp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pp-thumb.is-active,
.pp-thumb:hover {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--ca-heading);
}
.pp-name {
  margin-bottom: 10px;
  font-size: clamp(30px, 2.6vw, 46px);
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.pp-rate {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 14.5px;
}
.pp-rate b {
  color: var(--ca-heading);
  font-weight: 500;
}
.pp-rate a {
  color: var(--ca-muted);
  text-decoration: underline;
}
.pp-price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--ca-line);
}
.pp-price b {
  color: var(--ca-heading);
  font-family: var(--ca-ff-head);
  font-size: 30px;
  font-weight: 700;
}
.pp-price span {
  color: var(--ca-muted);
  font-size: 13.5px;
}
.pp-row {
  margin-bottom: 24px;
}
.pp-row .ca-label {
  margin-bottom: 12px;
}
.pp-row .ca-label b {
  color: var(--ca-accent-text);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.pp-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.ca-link.is-quiet {
  padding-bottom: 2px;
  font-size: 12px;
}
.pp-stock {
  margin: 12px 0 2px;
  color: var(--ca-muted);
  font-size: 14px;
}
.pp-stock.is-low {
  color: var(--ca-accent-text);
  font-weight: 500;
}
.pp-tip {
  margin: 0;
  font-size: 14px;
}
.pp-tip a {
  color: var(--ca-accent-text);
  text-decoration: underline;
}
.pp-tip b {
  color: var(--ca-heading);
}
.pp-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
}
.pp-cart .ca-btn.is-disabled {
  opacity: 0.6;
  cursor: pointer;
}
.pp-facts {
  margin-bottom: 30px;
}
.pp-facts b {
  font-size: 14.5px;
  font-weight: 400;
}
.pp-collect {
  padding: 28px 30px;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-mist-bg);
}
.pp-collect h3 {
  margin-bottom: 14px;
  text-transform: uppercase;
}
.pp-collect h3 i {
  margin-right: 8px;
  color: var(--ca-accent-text);
}
.pk-list li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--ca-line-2);
}
.pk-store,
.pk-state {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.pk-state {
  text-align: right;
}
.pk-store b,
.pk-state b {
  color: var(--ca-heading);
  font-size: 15px;
  font-weight: 500;
}
.pk-list .is-rail .pk-state b {
  color: var(--ca-ok-text);
}
.pk-list .is-truck .pk-state b {
  color: var(--ca-accent-text);
}
.pk-list .is-out .pk-state b {
  color: var(--ca-error-text);
}
.pk-store small,
.pk-state small {
  color: var(--ca-muted);
  font-size: 13px;
}
.pk-note {
  margin: 12px 0 0;
  color: var(--ca-muted);
  font-size: 13.5px;
}
.tab-panel {
  padding-top: 10px;
}
.tab-panel h2 {
  margin-bottom: 16px;
}
.pp-steps {
  padding-left: 20px;
}
.pp-steps li + li {
  margin-top: 10px;
}
/*----- 13.3 Cart & Checkout -----*/
.cart-promo {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
  padding: 22px 26px;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-night);
  color: #D1D0C3;
}
.cart-promo span {
  display: flex;
  flex-direction: column;
}
.cart-promo b {
  color: #FFFFFF;
  font-weight: 400;
}
.cart-promo small {
  font-size: 14px;
}
.cart-promo > i {
  margin-left: auto;
  color: #F0B77A;
}
.cart-promo:hover {
  color: #D1D0C3;
}
.ship-goal {
  margin-bottom: 20px;
  font-size: 14.5px;
}
.ship-goal p {
  margin-bottom: 10px;
}
.summary-rows li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ca-line);
  font-size: 15.5px;
}
.summary-rows li[hidden] {
  display: none;
}
.summary-rows b {
  color: var(--ca-heading);
  font-weight: 400;
}
.summary-rows .is-total {
  border-bottom: 0;
  font-size: 18px;
}
.summary-rows .is-total b {
  font-weight: 500;
}
.order-summary .ca-btn {
  margin-top: 22px;
}
.summary-mode {
  margin: 14px 0 6px;
  padding: 10px 14px;
  border-radius: var(--ca-radius);
  background: var(--ca-tonal);
  color: var(--ca-heading);
  font-size: 14.5px;
}
/* the wizard's steps, as numbered tabs */
.step-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}
.step-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 20px 0 6px;
  border-radius: 30px;
  background: var(--ca-tonal);
  color: var(--ca-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.step-tabs button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ca-surface);
  letter-spacing: 0;
}
.step-tabs .is-active {
  background: var(--ca-night);
  color: #FFFFFF;
}
.step-tabs .is-active span {
  background: var(--ca-accent);
  color: #FFFFFF;
}
.step-tabs .is-done span {
  background: var(--ca-ok);
  color: #FFFFFF;
}
.checkout-step {
  margin: 0;
  padding: 0;
  border: 0;
}
.checkout-step legend {
  margin-bottom: 22px;
}
.choice-card.is-store {
  flex-direction: column;
  align-items: flex-start;
}
.choice-card.is-store small {
  display: block;
}
.pk-ready {
  margin-top: 8px;
}
.choice-card.is-store .pk-stock {
  color: var(--ca-ok-text);
}
.choice-card.is-short .pk-stock {
  color: var(--ca-error-text);
}
.choice-card.is-checked .pk-stock {
  color: #A9CF8E;
}
.choice-card.is-checked.is-short .pk-stock {
  color: #F09A88;
}

/*----- 13.4 Tables -----*/
/* data tables collapse their secondary columns on narrow screens instead of scrolling */
.table-wrap {
  border-radius: var(--ca-radius-lg);
  background: var(--ca-surface);
  box-shadow: var(--ca-shadow);
}
.ca-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.ca-table th,
.ca-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ca-line);
  text-align: left;
  vertical-align: middle;
}
.ca-table thead th {
  color: var(--ca-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ca-table tbody tr:last-child th,
.ca-table tbody tr:last-child td {
  border-bottom: 0;
}
.ca-table tbody th {
  font-weight: 400;
}
.ca-table th a {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ca-heading);
}
.ca-table th img {
  width: 48px;
  height: 56px;
  object-fit: cover;
  background: var(--ca-tile);
}
.ca-table th small,
.ca-table td small {
  display: block;
  color: var(--ca-muted);
  font-size: 13px;
}
.ca-table tr.is-hidden {
  display: none;
}
.ca-table [data-batch-open] {
  color: var(--ca-accent-text);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.ca-table tr.is-current th,
.ca-table tr.is-current td {
  background: rgba(var(--ca-accent-rgb), 0.12);
}
.lab-state {
  color: var(--ca-ok-text);
  font-weight: 500;
}
.lab-state.is-held {
  color: var(--ca-error-text);
}

/*----- 13.5 Stores -----*/
.store-card {
  height: 100%;
  overflow: hidden;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-surface);
  box-shadow: var(--ca-shadow);
}
.store-img {
  overflow: hidden;
}
.store-img img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 1.2s var(--ca-ease);
}
.store-card:hover .store-img img {
  transform: scale(1.04);
}
.store-body {
  padding: 28px;
}
.store-addr {
  margin: 6px 0 4px;
  color: var(--ca-muted);
  font-size: 15px;
}
.store-open {
  margin-bottom: 16px;
  color: var(--ca-muted);
  font-size: 14.5px;
}
.store-open i {
  font-size: 8px;
  vertical-align: 2px;
}
.is-open .store-open {
  color: var(--ca-ok-text);
}
.store-body .hours-list {
  margin: 18px 0;
}
.hours-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
  font-size: 14.5px;
}
.hours-list li i {
  flex: 1;
  border-bottom: 1px dotted var(--ca-line-2);
}
.hours-list li b {
  color: var(--ca-heading);
  font-weight: 400;
}
.hours-list li.is-today span,
.hours-list li.is-today b {
  color: var(--ca-accent-text);
  font-weight: 500;
}
.store-map {
  overflow: hidden;
  border-radius: var(--ca-radius);
  aspect-ratio: 16 / 9;
}
.store-map iframe,
.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/*----- 13.6 Steps & Journey -----*/
.how-step,
.journey-step {
  position: relative;
  height: 100%;
}
.how-step .ca-ico,
.journey-step .ca-ico {
  margin-bottom: 18px;
}
.how-step h3,
.journey-step h3 {
  margin-bottom: 10px;
  font-size: 22px;
}
.how-step p,
.journey-step p {
  font-size: 15.5px;
}
.js-no {
  position: absolute;
  right: 0;
  top: 0;
  color: var(--ca-line-2);
  font-family: var(--ca-ff-head);
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
}
.journey-row {
  position: relative;
}

/*----- 13.7 Story & Values -----*/
.story-photos {
  position: relative;
  padding: 0 0 60px 60px;
}
.sp-a {
  display: block;
  width: 78%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.sp-b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 10px solid var(--ca-bg);
}
.sp-badge {
  position: absolute;
  left: 0;
  top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--ca-accent);
  color: #FFFFFF;
  text-align: center;
}
.sp-badge b {
  font-family: var(--ca-ff-head);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
}
.sp-badge small {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ca-values .ca-title {
  margin-bottom: 0;
}

/*----- 13.8 Profile -----*/
.profile-skills {
  margin: 30px 0;
}
.profile-skills h3 {
  margin-bottom: 14px;
}
.skill-row {
  display: grid;
  grid-template-columns: 110px 1fr 30px;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  font-size: 15px;
}
.skill-row b {
  color: var(--ca-heading);
  font-weight: 400;
  text-align: right;
}

/*----- 13.9 Account & Contact -----*/
.acct-side {
  padding: 26px;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-mist-bg);
}
.acct-me {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 20px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ca-line-2);
}
.acct-me span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.acct-me b {
  color: var(--ca-heading);
  font-weight: 400;
}
.acct-me small {
  color: var(--ca-muted);
  font-size: 13px;
}
.acct-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--ca-radius);
  color: var(--ca-heading);
  font-size: 15.5px;
}
.acct-nav a i {
  width: 18px;
  color: var(--ca-accent-text);
}
.acct-nav a:hover,
.acct-nav a.is-current {
  background: var(--ca-surface);
  color: var(--ca-heading);
}
.acct-block + .acct-block {
  margin-top: 60px;
}
.acct-block h2 {
  margin-bottom: 22px;
}
.acct-orders li {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto auto auto;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ca-line);
  font-size: 15px;
}
.acct-orders li > span:nth-child(2) small {
  display: block;
  color: var(--ca-muted);
  font-size: 13px;
}
.acct-orders b {
  color: var(--ca-heading);
  font-weight: 400;
}
.acct-subs {
  margin-bottom: 26px;
}
.acct-sub {
  display: grid;
  grid-template-columns: 64px 1fr auto 190px auto;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ca-line);
}
.as-img {
  width: 64px;
  height: 72px;
  overflow: hidden;
  background: var(--ca-tile);
}
.as-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.as-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
.as-copy b {
  color: var(--ca-heading);
  font-weight: 400;
}
.as-copy small {
  color: var(--ca-muted);
  font-size: 13.5px;
}
.as-price {
  color: var(--ca-heading);
}
.as-actions {
  display: flex;
  gap: 8px;
}
.acct-sub.is-paused {
  opacity: 0.6;
}
.contact-card {
  height: 100%;
  padding: 32px;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-mist-bg);
}
.contact-card .ca-ico {
  margin-bottom: 16px;
}
.contact-card h3 {
  margin-bottom: 8px;
}
.contact-card p {
  margin-bottom: 8px;
}
.contact-card a {
  color: var(--ca-accent-text);
}
.cc-open {
  display: block;
  margin-top: 8px;
  color: var(--ca-muted);
  font-size: 14px;
}
.is-open .cc-open {
  color: var(--ca-ok-text);
}
.contact-panel {
  height: 100%;
  padding: 44px;
  border-radius: var(--ca-radius-lg);
}
.contact-panel .ca-title {
  margin-bottom: 30px;
}
.contact-map {
  height: 100%;
  min-height: 460px;
  overflow: hidden;
  border-radius: var(--ca-radius-lg);
}

/*----- 13.10 Coming Soon & Countdown -----*/
.bare-leaf {
  position: absolute;
  right: -6%;
  bottom: -12%;
  width: min(700px, 60vw);
  opacity: 0.1;
  transform: rotate(-20deg);
  pointer-events: none;
}
.ca-countdown {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.ca-countdown div {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 110px;
  padding: 18px 10px;
  border-radius: var(--ca-radius-lg);
  background: rgba(255, 255, 255, 0.06);
}
.ca-countdown b {
  color: var(--ca-heading);
  font-family: var(--ca-ff-head);
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ca-countdown small {
  margin-top: 6px;
  color: var(--ca-muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/*----- 13.11 Call To Action Splits -----*/
.ca-cta-split h2 {
  font-size: clamp(34px, 3.4vw, 58px);
  line-height: 1.06;
}
.ca-cta-split .ca-title {
  margin-bottom: 0;
}
.ca-cta-split .split-photo img {
  aspect-ratio: 3 / 2;
}

/*======================
14. Feature Pages
========================*/
/*----- 14.1 Shop Filters -----*/
.size-chips + .size-chips {
  margin-top: 8px;
}
.fam-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}
.fam-check {
  position: relative;
}
.fam-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.fam-check label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 30px;
  color: var(--ca-heading);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.fam-check label:hover {
  background: var(--ca-tonal);
}
.fam-check .dot {
  width: 18px;
  height: 18px;
}
.fam-check input:checked + label {
  background: var(--ca-tonal-2);
  font-weight: 500;
}
.fam-check input:checked + label .dot {
  box-shadow: 0 0 0 2px var(--ca-bg), 0 0 0 3.5px var(--ca-heading);
}
.fam-check input:focus-visible + label {
  box-shadow: 0 0 0 3px rgba(var(--ca-accent-rgb), 0.4);
}
.shop-side .ca-check small {
  display: block;
  color: var(--ca-muted);
  font-size: 12.5px;
}

/*----- 14.2 Capsule Builder -----*/
.cap-tabs {
  margin-bottom: 28px;
}
.cap-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.cap-pick {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
}
.cap-img {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 4 / 5;
  transition: box-shadow 0.3s ease;
}
.cap-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.9s var(--ca-ease);
}
.cap-pick:hover .cap-img img {
  transform: scale(1.05);
}
.cap-name {
  display: block;
  margin-top: 10px;
  color: var(--ca-heading);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}
.cap-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  color: var(--ca-muted);
  font-size: 12.5px;
}
.cap-meta .dot {
  width: 10px;
  height: 10px;
}
.cap-tick {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: transparent;
  font-size: 12px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--ca-ease);
}
.cap-pick:hover .cap-tick {
  color: #9A9598;
}
.cap-pick.is-on .cap-img {
  box-shadow: 0 0 0 3px var(--ca-accent);
}
.cap-pick.is-on .cap-tick {
  background: var(--ca-accent);
  color: #FFFFFF;
  transform: scale(1.08);
}
.cap-pick:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.cap-panel {
  position: sticky;
  top: 110px;
  padding: 32px 30px;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-g-blush);
}
.cap-count {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}
.cap-count > b {
  color: var(--ca-accent-text);
  font-family: var(--ca-ff-head);
  font-size: 84px;
  font-weight: 700;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.cap-count span {
  color: var(--ca-heading);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cap-rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.cap-slot {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  overflow: hidden;
}
[data-theme="dark"] .cap-slot {
  background: rgba(255, 255, 255, 0.06);
}
.cap-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slot-n {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(20, 20, 20, 0.3);
  font-family: var(--ca-ff-head);
  font-size: 14px;
  font-weight: 600;
}
[data-theme="dark"] .slot-n {
  color: rgba(255, 255, 255, 0.3);
}
.slot-x {
  position: absolute;
  top: 3px;
  right: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.75);
  color: #FFFFFF;
  font-size: 9px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cap-slot:hover .slot-x,
.slot-x:focus-visible {
  opacity: 1;
}
.cap-tip {
  margin-bottom: 16px;
  color: var(--ca-heading);
  font-size: 14.5px;
  font-weight: 500;
}
.cap-roles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 18px;
}
.cap-roles li {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 0;
  text-align: center;
}
.cap-roles li:first-child {
  border-top: 0;
}
.cap-roles span {
  font-size: 11px;
}
.cap-roles b {
  text-align: center;
}
.cap-prices .is-total b {
  color: var(--ca-accent-text);
  font-family: var(--ca-ff-head);
  font-size: 24px;
  font-weight: 700;
}
.cap-next,
.cap-clash {
  margin: 14px 0 0;
  font-size: 14px;
}
.cap-clash {
  color: var(--ca-muted);
}
.cap-panel .ca-btns {
  margin-top: 22px;
}
.cap-looks-h {
  margin-bottom: 18px;
  text-transform: uppercase;
}
.cap-looks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.cap-looks li {
  display: flex;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  background: var(--ca-surface);
}
.cap-looks img {
  flex: 1;
  min-width: 0;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  object-fit: cover;
}
.cap-looks .is-empty {
  grid-column: 1 / -1;
  padding: 24px;
  color: var(--ca-muted);
}

/*----- 14.3 Size Finder -----*/
.sf-card {
  padding: 34px 32px;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-g-mint);
}
.sf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.sf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid rgba(20, 20, 20, 0.08);
}
[data-theme="dark"] .sf-row {
  border-top-color: rgba(255, 255, 255, 0.08);
}
.sf-label label {
  display: block;
  color: var(--ca-heading);
  font-family: var(--ca-ff-head);
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
}
.sf-label small {
  display: block;
  max-width: 220px;
  color: var(--ca-muted);
  font-size: 13px;
  line-height: 1.4;
}
.ca-step.is-wide {
  flex-shrink: 0;
  background: var(--ca-surface);
}
.sf-input {
  width: 64px;
  border: 0;
  background: transparent;
  color: var(--ca-heading);
  font-family: var(--ca-ff-head);
  font-size: 22px;
  font-weight: 700;
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
}
.sf-input::-webkit-outer-spin-button,
.sf-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sf-input:focus {
  outline: 0;
}
.sf-unit {
  margin: 0 8px 0 4px;
  color: var(--ca-muted);
  font-size: 13px;
}
.sf-card .ca-btn {
  margin-top: 18px;
}
.sf-photo {
  margin: 24px 0 0;
}
.sf-photo img {
  display: block;
  width: 100%;
  border-radius: var(--ca-radius-lg);
}
.sf-photo figcaption {
  margin-top: 10px;
  color: var(--ca-muted);
  font-size: 13.5px;
}
.sf-overall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.sf-overall li {
  padding: 22px 20px;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-g-blush);
  text-align: center;
}
.sf-overall span {
  display: block;
  color: var(--ca-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sf-overall b {
  color: var(--ca-heading);
  font-family: var(--ca-ff-head);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.1;
}
.sf-sub {
  margin: 34px 0 14px;
  text-transform: uppercase;
}
.sf-table td {
  font-family: var(--ca-ff-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--ca-heading);
}
.sf-table th small {
  display: block;
  color: var(--ca-muted);
  font-family: var(--ca-ff-body);
  font-size: 12.5px;
  font-weight: 400;
}
.sf-table.is-small td {
  font-size: 16px;
}
.sf-table td.is-over {
  color: var(--ca-accent-text);
  font-size: 14px;
}
.size-table tr.is-hit th,
.size-table tr.is-hit td {
  background: rgba(var(--ca-accent-rgb), 0.1);
}
.sf-fits {
  margin-top: 26px;
}
.sf-fits b {
  font-size: 14.5px;
  font-weight: 400;
}
.sf-card.is-shoes {
  background: var(--ca-surface);
}
.sf-foot-out {
  margin: 0 0 18px;
  color: var(--ca-heading);
}
.sf-foot-out b {
  color: var(--ca-accent-text);
  font-family: var(--ca-ff-head);
  font-size: 26px;
  font-weight: 700;
}

/*----- 14.4 Tables Shared -----*/
.ca-table-wrap {
  border-radius: var(--ca-radius-lg);
  background: var(--ca-surface);
  box-shadow: var(--ca-shadow);
  overflow: hidden;
}
.ca-table th,
.ca-table td {
  padding: 14px 18px;
}

/*----- 14.5 Gift Cards -----*/
.gc-stage {
  position: sticky;
  top: 110px;
}
.gc-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 30px 60px rgba(20, 20, 20, 0.14);
  color: #141414;
}
.gc-card[data-design="ink"] {
  color: #FBF8F7;
}
.gc-card-img {
  display: block;
  width: 100%;
  height: auto;
}
.gc-logo {
  position: absolute;
  left: 7%;
  top: 9%;
  width: 30%;
}
.gc-amount {
  position: absolute;
  right: 7%;
  top: 7%;
  font-family: var(--ca-ff-head);
  font-size: clamp(30px, 3.4vw, 54px);
  font-weight: 700;
}
.gc-to,
.gc-msg,
.gc-from {
  position: absolute;
  left: 7%;
  right: 7%;
}
.gc-to {
  bottom: 30%;
  font-family: var(--ca-ff-head);
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 600;
  text-transform: uppercase;
}
.gc-msg {
  bottom: 15%;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.86;
}
.gc-from {
  bottom: 7%;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gc-summary {
  margin-top: 28px;
}
.gc-summary .is-total b {
  color: var(--ca-accent-text);
  font-family: var(--ca-ff-head);
  font-size: 22px;
  font-weight: 700;
}
.gc-block {
  margin: 0 0 26px;
  padding: 0;
  border: 0;
}
.gc-designs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.gc-design {
  position: relative;
  cursor: pointer;
  text-align: center;
}
.gc-design input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gc-design img {
  display: block;
  width: 100%;
  border-radius: 10px;
  transition: box-shadow 0.3s ease, transform 0.4s var(--ca-ease);
}
.gc-design span {
  display: block;
  margin-top: 6px;
  color: var(--ca-muted);
  font-size: 13px;
}
.gc-design.is-checked img {
  box-shadow: 0 0 0 3px var(--ca-heading);
  transform: translateY(-3px);
}
.gc-design:focus-within img {
  box-shadow: 0 0 0 3px rgba(var(--ca-accent-rgb), 0.5);
}
.gc-custom {
  margin-top: 16px;
  max-width: 320px;
}
.gc-post-note {
  color: var(--ca-muted);
  font-size: 14.5px;
}
.ca-field label small {
  color: var(--ca-muted);
  text-transform: none;
  letter-spacing: 0;
}
.balance-form .coupon-row {
  max-width: 520px;
}

/*----- 14.6 New In -----*/
.new-count {
  margin: 0;
  color: var(--ca-muted);
}
.new-count b {
  color: var(--ca-accent-text);
  font-family: var(--ca-ff-head);
  font-size: 28px;
}
.week-tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 44px;
}
.week-tabs button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 16px 18px;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-tonal);
  color: var(--ca-heading);
  text-align: left;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.week-tabs button b {
  font-family: var(--ca-ff-head);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}
.week-tabs button span {
  color: var(--ca-muted);
  font-size: 13px;
}
.week-tabs button small {
  margin-top: 6px;
  color: var(--ca-accent-text);
  font-family: var(--ca-ff-head);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.week-tabs button:hover {
  background: var(--ca-tonal-2);
}
.week-tabs button.is-active {
  background: var(--ca-night);
  color: #FFFFFF;
}
.week-tabs button.is-active span {
  color: #CFC9CA;
}
.week-tabs button.is-active small {
  color: var(--ca-accent-light);
}
[data-theme="dark"] .week-tabs button.is-active {
  background: #FBF8F7;
  color: var(--ca-ink);
}
[data-theme="dark"] .week-tabs button.is-active span {
  color: #6E6E73;
}
[data-theme="dark"] .week-tabs button.is-active small {
  color: var(--ca-accent);
}

/*----- 14.7 Delivery & Returns -----*/
.rates-now {
  margin-top: 30px;
}
.rates-aside {
  padding: 34px 32px;
  border-radius: var(--ca-radius-lg);
}
.rates-aside .ca-ico {
  margin-bottom: 18px;
}
.rates-aside h2 {
  margin-bottom: 12px;
  text-transform: uppercase;
}
.rates-aside p {
  margin-bottom: 22px;
}
.returns-card {
  padding: 36px 34px;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-surface);
  box-shadow: var(--ca-shadow);
}
.rt-last {
  display: block;
  margin-bottom: 18px;
  color: var(--ca-accent-text);
  font-family: var(--ca-ff-head);
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 700;
  line-height: 1.1;
}
.is-closed .rt-last {
  color: var(--ca-muted);
  text-decoration: line-through;
}
.rt-out {
  margin: 18px 0 0;
  color: var(--ca-heading);
}
.rt-sale {
  padding-bottom: 14px;
}

/*----- 14.8 Click & Collect Strip -----*/
.how-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ca-line);
  border-bottom: 1px solid var(--ca-line);
}
.how-strip li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 30px 24px;
}
.how-strip li + li {
  border-left: 1px solid var(--ca-line);
}
.how-strip b {
  display: block;
  margin-bottom: 4px;
  color: var(--ca-heading);
  font-family: var(--ca-ff-head);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
}
.how-strip small {
  color: var(--ca-muted);
  font-size: 14px;
  line-height: 1.5;
}

/*----- 14.9 Lookbook -----*/
.look-item {
  margin: 0;
}
.look-img {
  display: block;
  overflow: hidden;
  background: var(--ca-tile);
}
.look-img img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 1.2s var(--ca-ease);
}
.look-item:hover .look-img img {
  transform: scale(1.05);
}
.look-item figcaption {
  padding-top: 18px;
}
.look-col {
  display: block;
  color: var(--ca-accent-text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.look-item figcaption b {
  display: block;
  margin: 2px 0;
  color: var(--ca-heading);
  font-family: var(--ca-ff-head);
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
}
.look-item figcaption small {
  display: block;
  margin-bottom: 12px;
  color: var(--ca-muted);
  font-size: 14px;
}
.cl-look + .cl-look {
  margin-top: 90px;
}
.cl-look.is-flip > div:first-child {
  order: 2;
}
.cl-photo {
  margin: 0;
  overflow: hidden;
}
.cl-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
}
.cl-copy h2 {
  margin-bottom: 24px;
  text-transform: uppercase;
}
.cl-pieces li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(20, 20, 20, 0.1);
}
[data-theme="dark"] .cl-pieces li {
  border-top-color: rgba(255, 255, 255, 0.1);
}
.cl-pieces img {
  width: 64px;
  height: 80px;
  border-radius: 8px;
  background: #FFFFFF;
  object-fit: cover;
}
.cl-pieces span {
  flex: 1;
}
.cl-pieces b {
  display: block;
  color: var(--ca-heading);
  font-weight: 500;
}
.cl-pieces small {
  color: var(--ca-muted);
  font-size: 13.5px;
}
.cl-total {
  margin: 20px 0 0;
  color: var(--ca-heading);
}
.cl-total b {
  font-family: var(--ca-ff-head);
  font-size: 24px;
  font-weight: 700;
}

/*----- 14.10 Quick View & Modals -----*/
.ca-qv {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ca-qv[hidden] {
  display: none;
}
.qv-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.5);
}
.qv-box {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(940px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border-radius: 18px;
  background: var(--ca-surface);
  box-shadow: var(--ca-shadow-lg);
}
.qv-media {
  background: var(--ca-tile);
}
.qv-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: center top;
}
.qv-body {
  padding: 40px 36px;
}
.qv-title {
  margin-bottom: 8px;
  font-size: 30px;
  text-transform: uppercase;
}
.qv-price {
  margin-bottom: 22px;
}
.qv-price b {
  color: var(--ca-heading);
  font-family: var(--ca-ff-head);
  font-size: 24px;
  font-weight: 700;
}
.qv-price s {
  margin-left: 6px;
  color: var(--ca-muted);
}
.qv-row {
  margin-bottom: 22px;
}
.qv-row .ca-label {
  margin-bottom: 10px;
}
.qv-row .ca-label b {
  color: var(--ca-accent-text);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.qv-note {
  margin: 10px 0 0;
  color: var(--ca-muted);
  font-size: 14px;
}
.qv-note.is-low {
  color: var(--ca-accent-text);
  font-weight: 500;
}
.qv-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ca-tonal);
  color: var(--ca-heading);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--ca-ease);
}
.qv-close:hover {
  background: var(--ca-accent);
  color: #FFFFFF;
  transform: rotate(90deg);
}
.ca-modal .modal-content {
  position: relative;
  padding: 36px 34px;
  border: 0;
  border-radius: 18px;
  background: var(--ca-surface);
  color: var(--ca-text);
}
.ca-modal .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ca-modal .modal-head h2 {
  text-transform: uppercase;
}
.ca-modal .modal-head .qv-close {
  position: static;
}
.ca-modal h3 {
  margin: 26px 0 10px;
  text-transform: uppercase;
}
.ca-modal .ca-rows {
  margin-bottom: 26px;
}
.ca-modal .ca-rows b {
  font-size: 14.5px;
  font-weight: 400;
}

/*----- 14.11 Account Capsule -----*/
.acct-caps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 18px;
}
.acct-caps img {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  object-fit: cover;
}

/*======================
15. Journal, Account & Contact
========================*/
/*----- 15.1 Journal List -----*/
.blog-post.is-unmatched {
  display: none;
}
.bp-img {
  position: relative;
  display: block;
  overflow: hidden;
}
.bp-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.8s var(--ca-ease);
}
.blog-post:hover .bp-img img {
  transform: scale(1.04);
}
.bp-img.is-video .ca-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.bp-img.is-video .ca-play:hover {
  transform: translate(-50%, -50%) scale(1.06);
}
.bp-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}
.bp-gallery a:first-child {
  grid-row: span 2;
}
.bp-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
}
.bp-quote {
  margin: 0;
  padding: 50px 46px;
  background: var(--ca-night);
}
.bp-quote i {
  color: var(--ca-accent);
  font-size: 30px;
}
.bp-quote p {
  margin: 16px 0;
  color: #FFFFFF;
  font-family: var(--ca-ff-head);
  font-size: 26px;
  line-height: 1.35;
}
.bp-quote cite {
  color: var(--ca-accent);
  font-style: normal;
  font-weight: 500;
}
.bp-body {
  padding-top: 26px;
}
.bp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: 12px;
  color: var(--ca-muted);
  font-size: 14.5px;
}
.bp-meta i {
  margin-right: 7px;
  color: var(--ca-accent-text);
}
.bp-body h3 a:hover {
  color: var(--ca-accent-text);
}
.bp-body p {
  margin: 14px 0 18px;
}

/*----- 15.2 Journal Post -----*/
.post-hero {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 26px;
  object-fit: cover;
}
.post-article h2 {
  margin-bottom: 18px;
}
.post-article h3 {
  margin: 34px 0 12px;
}
.post-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 30px 0;
}
.post-pair img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.post-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--ca-line);
}
.post-tags .side-tags a {
  background: var(--ca-mist-bg);
}
.post-share {
  display: flex;
  gap: 8px;
}
.post-share a,
.post-share button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ca-tonal);
  color: var(--ca-heading);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.post-share a:hover,
.post-share button:hover,
.post-share button.is-done {
  background: var(--ca-night);
  color: #FFFFFF;
}
.author-box {
  display: flex;
  gap: 26px;
  margin-top: 50px;
  padding: 34px;
  background: var(--ca-mist-bg);
}
.author-box img {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ca-mist);
}
.author-box .ca-label {
  margin-bottom: 2px;
  color: var(--ca-accent-text);
}
.author-box p {
  margin: 8px 0 0;
}
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}
.post-nav a {
  padding: 22px 24px;
  background: var(--ca-tonal);
  color: var(--ca-heading);
}
.post-nav .pn-next {
  text-align: right;
}
.post-nav small {
  display: block;
  margin-bottom: 4px;
  color: var(--ca-accent-text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.post-nav b {
  font-family: var(--ca-ff-head);
  font-size: 18px;
  font-weight: 500;
}
.post-nav a:hover {
  background: var(--ca-night);
  color: #FFFFFF;
}
.comments {
  margin-top: 60px;
}
.comments h2 {
  margin-bottom: 20px;
}
.comment {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--ca-line);
}
.comment.is-reply {
  margin-left: 64px;
}
.comment b {
  color: var(--ca-heading);
}
.comment small {
  margin-left: 10px;
  color: var(--ca-muted);
}
.comment p {
  margin: 6px 0 8px;
}
.comment-form {
  margin-top: 50px;
}
.comment-form h2 {
  margin-bottom: 22px;
}

/*----- 15.3 Account Forms -----*/
.account-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: var(--ca-radius-lg);
  background: var(--ca-surface);
  box-shadow: var(--ca-shadow-lg);
  overflow: hidden;
}
.account-wrap.is-narrow {
  grid-template-columns: 1fr;
  max-width: 560px;
}
.account-side {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  overflow: hidden;
}
.account-side::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(36, 80, 26, 0.12) 0%, rgba(36, 80, 26, 0.92) 72%);
}
.as-copy {
  padding: 46px 44px;
}
.as-copy .ca-eyebrow {
  color: #FFFFFF;
}
.as-copy .ca-eyebrow i {
  color: var(--ca-accent);
}
.as-copy h2 {
  margin-bottom: 12px;
  font-size: clamp(30px, 2.6vw, 40px);
}
.as-copy .ca-faces {
  margin-top: 20px;
}
.as-copy .ca-faces img,
.as-copy .ca-faces span {
  border-color: var(--ca-night);
}
.account-form {
  padding: 50px 46px;
}
.account-form h2 {
  margin-bottom: 24px;
}
.pass-toggle {
  position: absolute;
  right: 12px;
  top: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--ca-accent-text);
}
.pass-meter {
  height: 4px;
  margin-top: 10px;
  background: var(--ca-line);
}
.pass-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ca-accent);
  transition: width 0.4s ease;
}
.pass-meter span[data-score="3"],
.pass-meter span[data-score="4"] {
  background: var(--ca-accent);
}
.pass-hint {
  display: block;
  margin-top: 6px;
  color: var(--ca-muted);
  font-size: 13.5px;
}
.account-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.account-row a,
.account-switch a {
  color: var(--ca-accent-text);
  font-weight: 500;
}
.account-form > .ca-check {
  margin-bottom: 22px;
}
.account-switch {
  margin: 18px 0 0;
  text-align: center;
}
.forgot-ico img {
  width: 72px;
  height: 72px;
  margin-bottom: 16px;
}
.contact-map {
  min-height: 560px;
}

/*----- 15.4 Coming Soon & 404 -----*/
.ca-bare-page {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 80px 20px;
  overflow: clip;
  text-align: center;
}
.bare-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
}
.bare-logo img {
  height: 44px;
}
.bare-inner .ca-eyebrow {
  align-items: center;
  margin-top: 50px;
}
.bare-inner .ca-eyebrow i {
  color: var(--ca-accent);
}
.bare-inner h1 {
  font-size: clamp(42px, 5vw, 76px);
  line-height: 1;
}
.bare-inner .ca-lead {
  margin: 22px 0 34px;
}
.bare-count .ca-countdown > div {
  background: rgba(255, 255, 255, 0.62);
}
[data-theme="dark"] .bare-count .ca-countdown > div {
  background: rgba(255, 255, 255, 0.06);
}
.bare-count .ca-countdown b {
  font-size: 40px;
}
.bare-news {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: min(520px, 100%);
  margin-top: 34px;
}
.bare-news .ca-input {
  flex: 1;
  min-width: 220px;
  padding-right: 20px;
  background: rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .bare-news .ca-input {
  background: rgba(255, 255, 255, 0.07);
}
.bare-news .form-status {
  flex-basis: 100%;
}
.bare-social {
  margin-top: 30px;
}
.error-code {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 40px 0 10px;
  color: var(--ca-heading);
  font-family: var(--ca-ff-head);
  font-weight: 700;
  font-size: clamp(120px, 16vw, 220px);
  line-height: 1;
}
.error-code img {
  width: clamp(110px, 14vw, 200px);
  height: auto;
  animation: ca-float 6s ease-in-out infinite;
}
/* the 404's hanger sways on its hook */
@keyframes ca-float {
  0%, 100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg) translateY(-6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .error-code img {
    animation: none;
  }
}
.do-no b {
  display: block;
  color: var(--ca-heading);
}
.do-no small {
  color: var(--ca-muted);
  font-size: 13px;
}
.do-state {
  justify-self: start;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--ca-accent);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
}
.do-state.is-done {
  background: var(--ca-mist-bg);
  color: var(--ca-accent-text);
}
.acct-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--ca-surface);
  box-shadow: 0 0 0 1px var(--ca-line);
}
.acct-sub + .acct-sub {
  margin-top: 10px;
}
.as-img {
  flex-shrink: 0;
  width: 64px;
  border-radius: 8px;
  background: var(--tile);
  overflow: hidden;
}
.as-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.as-freq select {
  height: 42px;
  min-width: 170px;
  padding-right: 18px;
}
.acct-sub.is-paused {
  opacity: 0.7;
}
.bp-img.is-audio {
  position: relative;
}
.bp-audio {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--ca-radius-lg);
  background: rgba(20, 20, 20, 0.86);
  color: #D1D0C3;
}
.bp-audio > i {
  color: #F0B77A;
  font-size: 20px;
}
.bp-audio span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.bp-audio b {
  color: #FFFFFF;
  font-weight: 400;
}
.bp-audio small {
  font-size: 13px;
}
.bp-audio .ca-play {
  width: 46px;
  height: 46px;
  margin-left: auto;
  font-size: 13px;
}
[data-theme="dark"] .error-code img {
  filter: invert(1) hue-rotate(180deg);
}

/*======================
16. Swatches
========================*/
/* generated from the data block: one class per colour name and per colour family */
.sw-black {
  background-color: #141414;
}
.sw-bleached-denim {
  background-color: #AFC3D6;
}
.sw-blush {
  background-color: #F1C9C9;
}
.sw-burgundy {
  background-color: #6E2232;
}
.sw-camel {
  background-color: #C49A6C;
}
.sw-champagne {
  background-color: #D9C3A5;
}
.sw-clay {
  background-color: #C0664B;
}
.sw-dusty-rose {
  background-color: #D9A5A0;
}
.sw-fam-berry {
  background-color: #7A2E40;
}
.sw-fam-blush {
  background-color: #F1C9C9;
}
.sw-fam-butter {
  background-color: #EBCB7E;
}
.sw-fam-lilac {
  background-color: #D3C6E3;
}
.sw-fam-mint {
  background-color: #B5D3C4;
}
.sw-fam-neutral {
  background-color: #E9E2D8;
}
.sw-fam-rust {
  background-color: #C8765C;
}
.sw-fam-sky {
  background-color: #C7DAEA;
}
.sw-gold {
  background-color: #C9A55C;
}
.sw-grey-marl {
  background-color: #B9B9BB;
}
.sw-ivory {
  background-color: #F4EFE6;
}
.sw-ivory-dot {
  background-color: #F1EEE7;
}
.sw-khaki {
  background-color: #A8A58C;
}
.sw-leaf-green {
  background-color: #6E8B4E;
}
.sw-leopard {
  background-color: #9C7350;
}
.sw-light-denim {
  background-color: #A9BFD3;
}
.sw-lilac {
  background-color: #C9B9DD;
}
.sw-mauve {
  background-color: #B39AA0;
}
.sw-mint {
  background-color: #A9CDB4;
}
.sw-mustard {
  background-color: #D2A23C;
}
.sw-navy-stripe {
  background-color: #2B3446;
}
.sw-nude {
  background-color: #E3C2A6;
}
.sw-oatmeal {
  background-color: #E3D6C4;
}
.sw-olive {
  background-color: #5E6A45;
}
.sw-pebble {
  background-color: #D9D2C7;
}
.sw-powder-blue {
  background-color: #BFD3E6;
}
.sw-rose {
  background-color: #E9A39A;
}
.sw-rose-floral {
  background-color: #E8C3C8;
}
.sw-rose-satin {
  background-color: #E3B3AA;
}
.sw-sage {
  background-color: #A9C4AE;
}
.sw-sand {
  background-color: #E8C9A0;
}
.sw-sea-mint {
  background-color: #9EC3BE;
}
.sw-sky {
  background-color: #CFE0EC;
}
.sw-tan {
  background-color: #B88A62;
}
.sw-terracotta {
  background-color: #B9563F;
}
.sw-watercolour {
  background-color: #CFE0E8;
}
.sw-white {
  background-color: #FFFFFF;
}

/*======================
17. Subheader
========================*/
/* Page titles: a band on one of the photography's pastel papers, the tulle layers drifting at its edges, the breadcrumb,
   the caps title and a lead. With a photo, the photo fills the right side and fades into the paper by a mask. */
.ca-subheader {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 110px 0 118px;
}
.ca-subheader .container {
  position: relative;
  z-index: 2;
}
.sub-copy {
  max-width: 640px;
}
.ca-subheader h1 {
  margin: 18px 0 18px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.ca-subheader .ca-lead {
  max-width: 540px;
  margin: 0;
  color: var(--ca-text);
}
.ca-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--ca-text);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ca-crumbs i {
  font-size: 8px;
  color: var(--ca-accent-text);
}
.ca-crumbs a:hover {
  color: var(--ca-accent-text);
}
.ca-crumbs span {
  color: var(--ca-heading);
}
.sub-photo {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  width: 50%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 34%, #000000 60%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 34%, #000000 60%);
}
.ca-subheader .ca-gl {
  z-index: 0;
}

/*======================
18. Footer
========================*/
/* The night footer (the base's black footer): the newsletter title on set lines beside the field and the garment on its
   hanger (dress, coat, jumpsuit), a hairline, the columns, the bottom bar. */
.ca-footer {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: var(--ca-text);
}
.footer-top {
  padding: 90px 0 64px;
}
.footer-title {
  font-size: clamp(32px, 3vw, 52px);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.footer-title .line {
  display: block;
  white-space: nowrap;
}
.footer-label {
  display: block;
  margin-bottom: 12px;
  color: var(--ca-heading);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.news-row {
  display: flex;
  gap: 10px;
}
.news-row .ca-input {
  flex: 1;
  min-width: 0;
  padding-right: 22px;
}
/* the garment on its hanger: a canvas drawn in the footer's own pastel tones */
.footer-garment {
  position: relative;
  height: 320px;
  margin-left: auto;
  max-width: 250px;
}
.footer-garment canvas {
  display: block;
  width: 100%;
  height: 100%;
  --gl-1: #F2C6CF;
  --gl-2: #BFDDD5;
  --gl-3: #F5D3A6;
}
.garment-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  color: var(--ca-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
.footer-widgets {
  padding: 64px 0 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.widget-about .ca-logo img {
  height: 30px;
}
.widget-about p {
  max-width: 380px;
  margin: 22px 0 24px;
  font-size: 15.5px;
}
.footer-head {
  margin-bottom: 22px;
}
.footer-links-list li + li {
  margin-top: 10px;
}
.footer-links-list a {
  font-size: 15.5px;
}
.footer-links-list a:hover {
  color: var(--ca-accent-text);
}
.footer-stores li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14.5px;
}
.footer-stores b {
  color: var(--ca-heading);
  font-weight: 500;
}
.footer-stores span {
  color: var(--ca-muted);
  text-align: right;
}
.footer-stores .is-open span {
  color: var(--ca-ok-text);
}
.footer-contact {
  margin-top: 18px;
}
.footer-contact li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}
.footer-contact li + li {
  margin-top: 8px;
}
.footer-contact i {
  width: 16px;
  color: var(--ca-accent-text);
}
.footer-bottom {
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 14px;
}
.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.footer-bottom p {
  margin: 0;
}
.footer-bottom a:hover {
  color: var(--ca-accent-text);
}
.footer-pay {
  display: flex;
  gap: 14px;
  font-size: 26px;
  color: var(--ca-muted);
}