/* ═══════════════════════════════════════════════════════════
   Céleste Beauty — Growth Tier Template
   Palette: Midnight Navy #1A2B5E + Pale Aqua #8DC8D0
   Typography: Playfair Display + DM Sans
   ═══════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────── */
:root {
  --clr-primary:      #1A2B5E;
  --clr-primary-l:    #2D4A8E;
  --clr-accent:       #8DC8D0;
  --clr-accent-d:     #4A9BAB;
  --clr-bg:           #F8FAFD;
  --clr-dark:         #090D1A;
  --clr-text:         #1A2035;
  --clr-muted:        #64748B;
  --clr-border:       #E2E8F0;
  --clr-surface:      #EEF4F8;
  --clr-white:        #ffffff;
  --clr-star:         #D4A853;

  --ff-display:  'Playfair Display', Georgia, serif;
  --ff-body:     'DM Sans', system-ui, sans-serif;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  24px;
  --radius-xl:  40px;

  --shadow-sm:  0 1px 4px rgba(26,43,94,.08);
  --shadow-md:  0 4px 20px rgba(26,43,94,.12);
  --shadow-lg:  0 12px 48px rgba(26,43,94,.18);

  --transition: 0.28s cubic-bezier(.4,0,.2,1);
  --container:  1240px;
  --header-h:   72px;
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--ff-body); color: var(--clr-text); background: var(--clr-bg); line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; }
fieldset { border: none; }

/* ── Utilities ─────────────────────────────────────────── */
.container { max-width: var(--container); margin-inline: auto; padding-inline: 1.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.skip-link { position: absolute; top: -100%; left: 1rem; background: var(--clr-accent); color: var(--clr-dark); padding: .5rem 1rem; border-radius: var(--radius-sm); font-weight: 600; z-index: 9999; transition: top .2s; color: oklch(from var(--clr-accent) clamp(0, (0.57 - l) * 1000, 1) 0 0); }
.skip-link:focus { top: 1rem; }

/* ── Focus Visible ─────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--clr-accent-d); outline-offset: 3px; border-radius: 3px; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--clr-accent-d); outline-offset: 3px; }
.btn:focus-visible { outline: 2px solid var(--clr-accent-d); outline-offset: 4px; box-shadow: 0 0 0 4px rgba(74,155,171,.2); }
.eyebrow { display: block; font-family: var(--ff-body); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--clr-accent-d); margin-bottom: .5rem; }
.eyebrow--light { color: var(--clr-accent); color: oklch(from var(--clr-accent) max(l, 0.68) c h); }
.section-title { font-family: var(--ff-display); font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.2; color: var(--clr-primary); }
.section-title--light { color: var(--clr-white); }
.section-subtitle { color: var(--clr-muted); margin-top: .6rem; max-width: 56ch; }
.section-head { margin-bottom: 2.5rem; }
.section-head--light .section-title { color: var(--clr-white); }

/* ── Buttons ────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.75rem; border-radius: var(--radius-xl); font-size: .9rem; font-weight: 600; letter-spacing: .02em; transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition); white-space: nowrap; }
.btn--primary { background: var(--clr-primary); color: var(--clr-white); }
.btn--primary:hover { background: var(--clr-primary-l); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn--accent { background: var(--clr-accent); color: var(--clr-dark); color: oklch(from var(--clr-accent) clamp(0, (0.57 - l) * 1000, 1) 0 0); }
.btn--accent:hover { background: var(--clr-accent-d); color: var(--clr-white); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--clr-primary); border: 2px solid var(--clr-primary); }
.btn--outline:hover { background: var(--clr-primary); color: var(--clr-white); }
.btn--ghost { background: transparent; color: var(--clr-muted); border: 1.5px solid var(--clr-border); }
.btn--ghost:hover { border-color: var(--clr-primary); color: var(--clr-primary); }
.btn--cart { background: var(--clr-primary); color: var(--clr-white); padding: .6rem 1.25rem; font-size: .82rem; border-radius: var(--radius-sm); width: 100%; justify-content: center; }
.btn--cart:hover { background: var(--clr-accent-d); transform: translateY(-1px); }
.btn--full { width: 100%; justify-content: center; }
.btn--magnetic { position: relative; overflow: hidden; }

/* ── Scroll Progress ────────────────────────────────────── */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--clr-accent); z-index: 9998; transition: width .1s; }

/* ── Header ─────────────────────────────────────────────── */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: var(--header-h); display: flex; align-items: center; transition: background var(--transition), backdrop-filter var(--transition), box-shadow var(--transition); }
.site-header--transparent { background: transparent; }
.site-header.scrolled, .site-header--light { background: var(--background, rgba(248,250,253,.92)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--clr-border); }
.header__inner { display: flex; align-items: center; gap: 2rem; width: 100%; }
.header__logo img { height: 36px; width: auto; }
.header__nav { margin-inline-start: auto; }
.header__nav ul { display: flex; gap: 2rem; }
.header__nav a { font-size: .875rem; font-weight: 500; color: var(--clr-primary); position: relative; padding-bottom: 2px; }
.header__nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--clr-accent); transition: width var(--transition); }
.header__nav a:hover::after, .header__nav a[aria-current="page"]::after { width: 100%; }
.header__actions { display: flex; align-items: center; gap: 1rem; margin-inline-start: 1.5rem; }
.header__cart-btn { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background var(--transition); color: var(--clr-primary); }
.header__cart-btn:hover { background: var(--clr-surface); }
.cart-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding-inline: 4px; background: var(--clr-accent); color: var(--clr-dark); font-size: .65rem; font-weight: 700; border-radius: 999px; display: flex; align-items: center; justify-content: center; transition: transform .2s; color: oklch(from var(--clr-accent) clamp(0, (0.57 - l) * 1000, 1) 0 0); }
.header__menu-btn { display: none; flex-direction: column; gap: 5px; width: 36px; height: 36px; align-items: center; justify-content: center; }
.header__menu-btn span { display: block; width: 22px; height: 2px; background: var(--clr-primary); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }
.header__menu-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__menu-btn.is-open span:nth-child(2) { opacity: 0; }
.header__menu-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero (Split) ───────────────────────────────────────── */
.hero { display: grid; grid-template-columns: 44% 56%; min-height: 100svh; padding-top: var(--header-h); background: var(--wb-dark-surface, var(--clr-dark)); overflow: hidden; }
.hero__text-panel { display: flex; flex-direction: column; justify-content: center; padding: 6rem 5% 6rem 6%; gap: 1.25rem; }
.hero__eyebrow { display: inline-block; background: var(--background, rgba(141,200,208,.15)); color: var(--clr-accent); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: .35rem .85rem; border-radius: var(--radius-xl); border: 1px solid rgba(141,200,208,.3); width: fit-content; }
.hero__title-prefix { font-family: var(--ff-display); font-style: italic; font-size: clamp(1.4rem, 2.5vw, 2rem); color: var(--clr-accent); line-height: 1; }
.hero__title { font-family: var(--ff-display); font-size: clamp(2.8rem, 5.5vw, 4.5rem); line-height: 1.05; color: var(--clr-white); letter-spacing: -.02em; }
.hero__subtitle { color: var(--wb-on-dark, rgba(255,255,255,.72)); font-size: 1.05rem; max-width: 38ch; line-height: 1.7; }
.hero__cta-wrap { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; }
.hero__trust { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; }
.hero__trust span { display: flex; align-items: center; gap: .5rem; color: var(--wb-on-dark, rgba(255,255,255,.55)); font-size: .8rem; }
.hero__trust svg { color: var(--clr-accent); flex-shrink: 0; }
.hero__image-panel { position: relative; overflow: hidden; }
.hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero__badge-float { position: absolute; bottom: 10%; right: 8%; background: var(--clr-white); border-radius: var(--radius-md); padding: 1rem 1.25rem; display: flex; flex-direction: column; align-items: center; box-shadow: var(--shadow-lg); }
.hero__badge-label { font-family: var(--ff-display); font-size: 1rem; color: var(--clr-primary); font-weight: 700; }
.hero__badge-sub { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--clr-accent-d); }

/* ── Page Hero (inner pages) ────────────────────────────── */
.page-hero { position: relative; padding-top: var(--header-h); height: 260px; display: flex; align-items: flex-end; overflow: hidden; background: var(--wb-dark-surface, var(--clr-dark)); }
.page-hero__bg { position: absolute; inset: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.page-hero__content { position: relative; padding-bottom: 2.5rem; }
.page-hero__title { font-family: var(--ff-display); font-size: clamp(2rem, 4vw, 3rem); color: var(--clr-white); }
.page-hero__subtitle { color: rgba(255,255,255,.7); margin-top: .4rem; }

/* ── Breadcrumbs ────────────────────────────────────────── */
.breadcrumbs { padding: .875rem 0; border-bottom: 1px solid var(--clr-border); background: var(--surface, var(--clr-white)); }
.breadcrumbs ol { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.breadcrumbs li { font-size: .8rem; color: var(--clr-muted); }
.breadcrumbs li:not(:last-child)::after { content: '/'; margin-inline-start: .5rem; }
.breadcrumbs a { color: var(--clr-primary); }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs--page { margin-top: var(--header-h); }

/* ── Categories ─────────────────────────────────────────── */
.categories { padding: 5rem 0; background: var(--clr-bg); content-visibility: auto; contain-intrinsic-size: auto 500px; }
.categories__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
/* display:contents for both [data-list] and plain div after conversion */
.categories__grid > [data-list],
.categories__grid > div { display: contents; }
.category-card { display: flex; flex-direction: column; border-radius: var(--radius-md); overflow: hidden; position: relative; aspect-ratio: 3/4; background: var(--clr-surface); transition: transform var(--transition), box-shadow var(--transition); }
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.category-card__img-wrap { position: absolute; inset: 0; overflow: hidden; }
.category-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.category-card:hover .category-card__img-wrap img { transform: scale(1.07); }
.category-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(9,13,26,.75) 40%, transparent 100%); display: flex; align-items: flex-end; justify-content: space-between; padding: 1.25rem; }
.category-card__name { font-family: var(--ff-display); font-size: 1.1rem; color: var(--clr-white); font-weight: 700; }
.category-card__arrow { color: var(--clr-accent); font-size: 1.2rem; transform: translateX(0); transition: transform var(--transition); }
.category-card:hover .category-card__arrow { transform: translateX(4px); }

/* ── Products Grid ──────────────────────────────────────── */
.products { padding: 5rem 0; background: var(--clr-white); content-visibility: auto; contain-intrinsic-size: auto 600px; }
.products--related { background: var(--clr-bg); }
.products__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.products__grid--wide { grid-template-columns: repeat(4, 1fr); }
/* display:contents for both selectors */
.products__grid > [data-list],
.products__grid > div,
.products__grid--wide > [data-list],
.products__grid--wide > div { display: contents; }
.products__cta { text-align: center; margin-top: 3rem; }
.products__empty { text-align: center; padding: 4rem 2rem; }
.products__empty h3 { font-family: var(--ff-display); font-size: 1.4rem; color: var(--clr-primary); margin-block: .75rem .5rem; }
.products__empty p { color: var(--clr-muted); margin-bottom: 1.5rem; }

/* Product Card */
.product-card { background: var(--surface, var(--clr-white)); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--clr-border); transition: box-shadow var(--transition), transform var(--transition); display: flex; flex-direction: column; }
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.product-card__img-wrap { display: block; position: relative; overflow: hidden; aspect-ratio: 4/5; background: var(--clr-surface); }
.product-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.product-card:hover .product-card__img-wrap img { transform: scale(1.05); }
.product-card__quick-view { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(26,43,94,.92); color: var(--clr-white); display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem; font-size: .8rem; font-weight: 600; letter-spacing: .05em; transform: translateY(100%); transition: transform var(--transition); }
.product-card:hover .product-card__quick-view { transform: translateY(0); }
.product-card__info { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.product-card__cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--clr-accent-d); font-weight: 600; }
.product-card__title { font-family: var(--ff-display); font-size: 1rem; color: var(--clr-primary); }
.product-card__title a:hover { color: var(--clr-accent-d); }
.product-card__price { display: flex; align-items: baseline; gap: .5rem; }
.product-card__price-current { font-weight: 700; color: var(--clr-primary); font-size: .95rem; }
.product-card__price-original { color: var(--clr-muted); font-size: .8rem; text-decoration: line-through; }
.product-card__swatches { display: flex; gap: .4rem; margin-top: .25rem; }
.swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; transition: border-color var(--transition); cursor: pointer; }
.swatch:hover, .swatch--active { border-color: var(--clr-primary); outline: 2px solid var(--clr-white); outline-offset: 1px; }

/* ── Quick View Modal ───────────────────────────────────── */
.quick-view-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.quick-view-modal[hidden] { display: none; }
.quick-view-modal__backdrop { position: absolute; inset: 0; background: rgba(9,13,26,.65); backdrop-filter: blur(4px); }
.quick-view-modal__panel { position: relative; background: var(--clr-white); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; max-width: 780px; width: 100%; box-shadow: var(--shadow-lg); max-height: 90svh; overflow-y: auto; }
.quick-view-modal__close { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; border-radius: 50%; background: var(--clr-surface); display: flex; align-items: center; justify-content: center; z-index: 1; transition: background var(--transition); }
.quick-view-modal__close:hover { background: var(--clr-border); }
.quick-view-modal__img-wrap img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; }
.quick-view-modal__info { padding: 2rem; display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
.quick-view-modal__cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--clr-accent-d); font-weight: 600; }
.quick-view-modal__title { font-family: var(--ff-display); font-size: 1.5rem; color: var(--clr-primary); line-height: 1.2; }
.quick-view-modal__price { font-size: 1.2rem; font-weight: 700; color: var(--clr-primary); }
.quick-view-modal__detail-link { color: var(--clr-accent-d); font-size: .85rem; font-weight: 600; margin-top: .5rem; }
.quick-view-modal__detail-link:hover { text-decoration: underline; }

/* ── Testimonials ───────────────────────────────────────── */
.testimonials { padding: 5rem 0; background: var(--clr-primary); content-visibility: auto; contain-intrinsic-size: auto 400px; }
.testimonials__track { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 1rem; margin-top: 1rem; }
.testimonials__track::-webkit-scrollbar { display: none; }
.testimonials__list { display: flex; gap: 1.5rem; width: max-content; }
/* display:contents for testimonials list */
.testimonials__list > [data-list],
.testimonials__list > div { display: contents; }
.testimonial-card { background: var(--background, rgba(255,255,255,.08)); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-md); padding: 1.75rem; width: 340px; flex-shrink: 0; scroll-snap-align: start; transition: background var(--transition); }
.testimonial-card:hover { background: var(--background, rgba(255,255,255,.12)); }
.testimonial-card__stars { color: var(--clr-star); font-size: 1.1rem; margin-bottom: .75rem; }
.testimonial-card__quote { font-family: var(--ff-display); font-style: italic; color: rgba(255,255,255,.9); font-size: 1rem; line-height: 1.65; margin-bottom: 1.25rem; }
.testimonial-card__author { display: flex; align-items: center; gap: .75rem; }
.testimonial-card__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--clr-accent); }
.testimonial-card__name { display: block; font-weight: 600; color: var(--clr-white); font-size: .9rem; }
.testimonial-card__role { font-size: .75rem; color: rgba(255,255,255,.55); }
.testimonials__dots { display: flex; gap: .5rem; justify-content: center; margin-top: 1.5rem; }
.testimonials__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--background, rgba(255,255,255,.3)); border: none; transition: background var(--transition), transform var(--transition); }
.testimonials__dot.is-active { background: var(--clr-accent); transform: scale(1.3); }

/* ── FAQs ───────────────────────────────────────────────── */
.faqs { padding: 5rem 0; background: var(--clr-bg); content-visibility: auto; contain-intrinsic-size: auto 400px; }
.faqs__inner { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; align-items: start; }
.faqs__items > [data-list],
.faqs__items > div { display: contents; }
.faq-item { border-bottom: 1px solid var(--clr-border); }
.faq-item__trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; text-align: left; font-weight: 500; color: var(--clr-primary); font-size: .95rem; }
.faq-item__trigger:hover { color: var(--clr-accent-d); }
.faq-item__icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--clr-border); display: flex; align-items: center; justify-content: center; transition: background var(--transition), border-color var(--transition); }
.faq-item__trigger[aria-expanded="true"] .faq-item__icon { background: var(--clr-accent); border-color: var(--clr-accent); }
.faq-item__trigger[aria-expanded="true"] .faq-plus-v { transform: scaleY(0); }
.faq-plus-v { transition: transform var(--transition); transform-origin: center; }
.faq-item__panel { padding-bottom: 1.1rem; }
.faq-item__panel p { color: var(--clr-muted); font-size: .9rem; line-height: 1.7; }

/* ── Policies ───────────────────────────────────────────── */
.policies { padding: 4rem 0; background: var(--clr-surface); content-visibility: auto; contain-intrinsic-size: auto 300px; }
.policies__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.policies__grid > [data-list],
.policies__grid > div { display: contents; }
.policy-card { background: var(--surface, var(--clr-white)); border-radius: var(--radius-md); padding: 1.75rem; border: 1px solid var(--clr-border); transition: box-shadow var(--transition); }
.policy-card:hover { box-shadow: var(--shadow-md); }
.policy-card__icon { width: 52px; height: 52px; background: var(--clr-surface); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--clr-accent-d); }
.policy-card__title { font-family: var(--ff-display); font-size: 1rem; color: var(--clr-primary); margin-bottom: .4rem; }
.policy-card__content { color: var(--clr-muted); font-size: .85rem; line-height: 1.6; }
.policies--checkout .policies__grid { grid-template-columns: repeat(3, 1fr); }

/* ── Contact ────────────────────────────────────────────── */
.contact { padding: 5.5rem 0; background: var(--wb-dark-surface, var(--clr-dark)); content-visibility: auto; contain-intrinsic-size: auto 500px; }
.contact__inner { display: grid; grid-template-columns: 1fr 1.3fr; gap: 5rem; align-items: start; }
.contact__details { display: flex; flex-direction: column; gap: .9rem; margin-block: 1.5rem; }
.contact__details li { display: flex; align-items: flex-start; gap: .85rem; color: var(--wb-on-dark, rgba(255,255,255,.7)); font-size: .9rem; }
.contact__details svg { color: var(--clr-accent); flex-shrink: 0; margin-top: 2px; }
.contact__map-link { color: var(--clr-accent); color: oklch(from var(--clr-accent) max(l, 0.68) c h); font-size: .875rem; font-weight: 600; }
.contact__map-link:hover { text-decoration: underline; }
.contact__form { display: flex; flex-direction: column; gap: 1.25rem; }

/* Forms */
.form-row { display: grid; gap: 1.25rem; }
.form-row--2 { grid-template-columns: 1fr 1fr; }
.form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-label { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.8); letter-spacing: .03em; }
.contact__form .form-input { background: var(--background, rgba(255,255,255,.08)); border: 1.5px solid rgba(255,255,255,.18); color: var(--clr-white); border-radius: var(--radius-sm); padding: .75rem 1rem; font-size: .9rem; transition: border-color var(--transition), background var(--transition); }
.contact__form .form-input::placeholder { color: var(--wb-on-dark, rgba(255,255,255,.35)); }
.contact__form .form-input:focus { outline: none; border-color: var(--clr-accent); background: var(--background, rgba(255,255,255,.12)); }
.form-textarea { resize: vertical; min-height: 120px; }

/* Page form inputs (checkout/cart) */
.form-label { font-size: .8rem; font-weight: 600; color: var(--clr-text); letter-spacing: .03em; }
.form-input { background: var(--clr-white); border: 1.5px solid var(--clr-border); color: var(--clr-text); border-radius: var(--radius-sm); padding: .75rem 1rem; font-size: .9rem; transition: border-color var(--transition); }
.form-input:focus { outline: none; border-color: var(--clr-accent-d); box-shadow: 0 0 0 3px rgba(141,200,208,.18); }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231A2B5E' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.form-label__optional { color: var(--clr-muted); font-weight: 400; }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer { background: var(--clr-dark); padding-top: 4rem; }
.footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; }
.footer__brand p.footer__tagline { font-family: var(--ff-display); font-size: 1.1rem; color: var(--clr-white); margin-top: .75rem; }
.footer__desc { color: var(--wb-on-dark, rgba(255,255,255,.5)); font-size: .82rem; line-height: 1.7; margin-top: .4rem; max-width: 28ch; }
.footer__col-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--clr-accent); margin-bottom: 1rem; }
.footer__links li { margin-bottom: .55rem; }
.footer__links a { color: var(--wb-on-dark, rgba(255,255,255,.6)); font-size: .875rem; transition: color var(--transition); }
.footer__links a:hover { color: var(--clr-accent); }
.footer__social { display: flex; gap: .75rem; }
.footer__social-link { width: 38px; height: 38px; border-radius: 50%; background: var(--background, rgba(255,255,255,.08)); display: flex; align-items: center; justify-content: center; color: var(--wb-on-dark, rgba(255,255,255,.7)); transition: background var(--transition), color var(--transition); }
.footer__social-link:hover { background: var(--clr-accent); color: var(--clr-dark); color: oklch(from var(--clr-accent) clamp(0, (0.57 - l) * 1000, 1) 0 0); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 1.25rem 0; }
.footer__bottom p { color: var(--wb-on-dark, rgba(255,255,255,.4)); font-size: .8rem; text-align: center; }

/* ── Cart Drawer ─────────────────────────────────────────── */
.cart-drawer { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.cart-drawer:not([hidden]) { pointer-events: auto; }
.cart-drawer__backdrop { position: absolute; inset: 0; background: rgba(9,13,26,.55); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--transition); }
.cart-drawer:not([hidden]) .cart-drawer__backdrop { opacity: 1; }
.cart-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); background: var(--surface, var(--clr-white)); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); box-shadow: var(--shadow-lg); }
.cart-drawer:not([hidden]) .cart-drawer__panel { transform: translateX(0); }
.cart-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--clr-border); }
.cart-drawer__title { font-family: var(--ff-display); font-size: 1.1rem; color: var(--clr-primary); }
.cart-drawer__count { font-size: .9rem; color: var(--clr-muted); }
.cart-drawer__close { width: 34px; height: 34px; border-radius: 50%; background: var(--clr-surface); display: flex; align-items: center; justify-content: center; transition: background var(--transition); }
.cart-drawer__close:hover { background: var(--clr-border); }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }
.cart-drawer__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: .75rem; color: var(--clr-muted); text-align: center; padding: 2rem; }
.cart-drawer__empty svg { color: var(--clr-border); }
.cart-drawer__foot { padding: 1.25rem 1.5rem; border-top: 1px solid var(--clr-border); display: flex; flex-direction: column; gap: .75rem; }
.cart-drawer__total-row { display: flex; justify-content: space-between; font-weight: 700; color: var(--clr-primary); font-size: 1rem; margin-bottom: .25rem; }
.drawer-item { display: grid; grid-template-columns: 72px 1fr auto; gap: .75rem; align-items: start; padding-block: .875rem; border-bottom: 1px solid var(--clr-border); }
.drawer-item:last-child { border-bottom: none; }
.drawer-item__img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); background: var(--clr-surface); }
.drawer-item__title { font-weight: 600; font-size: .875rem; color: var(--clr-primary); }
.drawer-item__price { font-size: .85rem; color: var(--clr-muted); }
.drawer-item__remove { color: var(--clr-muted); transition: color var(--transition); }
.drawer-item__remove:hover { color: #e53e3e; }

/* ── Cart Page ───────────────────────────────────────────── */
.cart-page { padding: 3rem 0 5rem; background: var(--clr-bg); min-height: 60svh; }
.cart-page__title { font-family: var(--ff-display); font-size: 2rem; color: var(--clr-primary); margin-bottom: 2rem; }
.cart-page__empty { display: flex; justify-content: center; }
.empty-state { text-align: center; padding: 4rem 2rem; }
.empty-state__icon { color: var(--clr-border); margin: 0 auto 1.25rem; }
.empty-state h2 { font-family: var(--ff-display); font-size: 1.6rem; color: var(--clr-primary); margin-bottom: .5rem; }
.empty-state p { color: var(--clr-muted); margin-bottom: 1.5rem; }
.cart-page__layout { display: grid; grid-template-columns: 1fr 340px; gap: 2.5rem; align-items: start; }
.cart-page__items-head { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 1rem; padding-bottom: .75rem; border-bottom: 2px solid var(--clr-border); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--clr-muted); }
.cart-page__items { min-height: 200px; }
.cart-item { display: grid; grid-template-columns: 100px 1fr 1fr 1fr auto; gap: 1rem; align-items: center; padding-block: 1.25rem; border-bottom: 1px solid var(--clr-border); }
.cart-item__img-wrap img { width: 100px; height: 100px; object-fit: cover; border-radius: var(--radius-sm); background: var(--clr-surface); }
.cart-item__title { font-weight: 600; font-size: .9rem; color: var(--clr-primary); }
.cart-item__price { font-size: .9rem; color: var(--clr-text); }
.cart-item__original { color: var(--clr-muted); font-size: .8rem; display: block; }
.cart-item__qty { display: flex; align-items: center; gap: .5rem; }
.qty-btn { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--clr-border); display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: border-color var(--transition), background var(--transition); }
.qty-btn:hover { border-color: var(--clr-primary); background: var(--clr-surface); }
.qty-val { font-weight: 600; min-width: 24px; text-align: center; }
.cart-item__line-total { font-weight: 700; font-size: .9rem; }
.cart-item__remove { color: var(--clr-muted); transition: color var(--transition); }
.cart-item__remove:hover { color: #e53e3e; }
.cart-summary { background: var(--clr-white); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: 1.75rem; position: sticky; top: calc(var(--header-h) + 1rem); }
.cart-summary__title { font-family: var(--ff-display); font-size: 1.1rem; color: var(--clr-primary); margin-bottom: 1.25rem; }
.cart-summary__rows { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; }
.cart-summary__row { display: flex; justify-content: space-between; font-size: .9rem; color: var(--clr-muted); }
.cart-summary__row--total { font-weight: 700; color: var(--clr-primary); font-size: 1rem; padding-top: .75rem; border-top: 1px solid var(--clr-border); }
.cart-summary__row--discount { color: #22c55e; }
.cart-summary > .btn { margin-bottom: .75rem; }
.cart-summary__trust { display: flex; align-items: center; gap: .5rem; color: var(--clr-muted); font-size: .78rem; margin-top: .75rem; justify-content: center; }

/* ── Checkout Page ──────────────────────────────────────── */
.checkout-page { padding: 3rem 0 5rem; background: var(--clr-bg); min-height: 60svh; }
.checkout-page__head { margin-bottom: 2rem; }
.checkout-page__title { font-family: var(--ff-display); font-size: 2rem; color: var(--clr-primary); }
.checkout-page__subtitle { color: var(--clr-muted); margin-top: .35rem; }
.checkout-progress { margin-bottom: 2.5rem; }
.checkout-progress ol { display: flex; align-items: flex-start; max-width: 360px; }
.checkout-progress__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.checkout-progress__step:not(:last-child)::after { content: ''; position: absolute; top: 13px; left: 50%; width: 100%; height: 2px; background: var(--clr-border); }
.checkout-progress__step--completed::after { background: var(--clr-accent-d) !important; }
.checkout-progress__circle { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--clr-border); background: var(--clr-white); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: var(--clr-muted); position: relative; z-index: 1; }
.checkout-progress__step--completed .checkout-progress__circle { background: var(--clr-accent-d); border-color: var(--clr-accent-d); color: var(--clr-white); }
.checkout-progress__step--active .checkout-progress__circle { background: var(--clr-primary); border-color: var(--clr-primary); color: var(--clr-white); }
.checkout-progress__label { font-size: .72rem; text-align: center; white-space: nowrap; color: var(--clr-muted); font-weight: 500; }
.checkout-progress__step--active .checkout-progress__label { color: var(--clr-primary); font-weight: 700; }
.checkout-page__layout { display: grid; grid-template-columns: 1fr 360px; gap: 3rem; align-items: start; }
.checkout-fieldset { margin-bottom: 2rem; }
.checkout-fieldset__legend { font-family: var(--ff-display); font-size: 1rem; color: var(--clr-primary); font-weight: 700; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--clr-border); width: 100%; display: block; }
.checkout-methods { display: flex; flex-direction: column; gap: .75rem; }
.checkout-method { display: flex; align-items: center; gap: 1rem; border: 1.5px solid var(--clr-border); border-radius: var(--radius-md); padding: 1rem 1.25rem; cursor: pointer; transition: border-color var(--transition); }
.checkout-method--active, .checkout-method:has(input:checked) { border-color: var(--clr-primary); background: var(--clr-surface); }
.checkout-method input { accent-color: var(--clr-primary); }
.checkout-method__info { flex: 1; }
.checkout-method__name { display: block; font-weight: 600; font-size: .9rem; color: var(--clr-primary); }
.checkout-method__detail { display: block; font-size: .78rem; color: var(--clr-muted); }
.checkout-method__price { font-weight: 700; font-size: .9rem; color: var(--clr-primary); white-space: nowrap; }
.checkout-method__badge { background: var(--clr-accent); color: var(--clr-dark); font-size: .68rem; font-weight: 700; padding: .2rem .5rem; border-radius: var(--radius-sm); color: oklch(from var(--clr-accent) clamp(0, (0.57 - l) * 1000, 1) 0 0); }
.checkout-trust { margin-block: 1.25rem; }
.trust-signals { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.trust-signals__item { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--clr-muted); }
.trust-signals__item svg { color: var(--clr-accent-d); }
.checkout-page__submit { margin-top: 1.5rem; padding: 1rem 2rem; font-size: 1rem; }
.checkout-summary { background: var(--clr-white); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: 1.75rem; position: sticky; top: calc(var(--header-h) + 1rem); }
.checkout-summary__title { font-family: var(--ff-display); font-size: 1.1rem; color: var(--clr-primary); margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--clr-border); }
.checkout-summary__items { display: flex; flex-direction: column; gap: .875rem; margin-bottom: 1.25rem; }
.checkout-summary-item { display: grid; grid-template-columns: 56px 1fr auto; gap: .75rem; align-items: center; }
.checkout-summary-item img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); background: var(--clr-surface); }
.checkout-summary-item__title { font-size: .85rem; font-weight: 600; color: var(--clr-primary); }
.checkout-summary-item__qty { font-size: .75rem; color: var(--clr-muted); }
.checkout-summary-item__price { font-weight: 700; font-size: .85rem; white-space: nowrap; }
.checkout-summary__total-row { display: flex; justify-content: space-between; font-weight: 700; color: var(--clr-primary); font-size: 1.05rem; padding-top: .875rem; border-top: 1px solid var(--clr-border); }
.checkout-summary__total { color: var(--clr-accent-d); }

/* ── Product Detail ─────────────────────────────────────── */
.product-detail { padding: 3rem 0 4rem; background: var(--clr-white); }
.product-detail__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.product-gallery { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.product-gallery__main img { width: 100%; border-radius: var(--radius-md); background: var(--clr-surface); }
.product-gallery__thumbs { display: flex; gap: .75rem; margin-top: .875rem; }
.gallery-thumb { border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; transition: border-color var(--transition); flex-shrink: 0; }
.gallery-thumb:hover, .gallery-thumb--active { border-color: var(--clr-accent-d); }
.gallery-thumb img { width: 68px; height: 68px; object-fit: cover; }
.product-info__cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--clr-accent-d); font-weight: 700; }
.product-info__title { font-family: var(--ff-display); font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--clr-primary); line-height: 1.15; margin-block: .5rem .25rem; }
.product-info__rating { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.stars { color: var(--clr-star); }
.rating-count { font-size: .8rem; color: var(--clr-muted); }
.product-info__price-wrap { margin-bottom: 1rem; }
.product-info__price { font-size: 1.6rem; font-weight: 700; color: var(--clr-primary); }
.product-info__desc { color: var(--clr-muted); font-size: .9rem; line-height: 1.75; margin-bottom: 1.25rem; }
.product-info__desc ul { padding-inline-start: 1.25rem; margin-top: .5rem; display: flex; flex-direction: column; gap: .3rem; }
.product-info__desc li { list-style: disc; }
.variant-selectors { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.variant-selector__label { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--clr-text); margin-bottom: .5rem; display: block; }
.variant-selector__options { display: flex; gap: .5rem; flex-wrap: wrap; }
.variant-chip { display: block; }
.variant-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.variant-chip span { display: flex; align-items: center; justify-content: center; min-width: 48px; padding: .35rem .75rem; border: 1.5px solid var(--clr-border); border-radius: var(--radius-sm); font-size: .82rem; font-weight: 500; color: var(--clr-text); cursor: pointer; transition: border-color var(--transition), background var(--transition); }
.variant-chip:has(input:checked) span, .variant-chip--active span { border-color: var(--clr-primary); background: var(--clr-primary); color: var(--clr-white); }
.variant-chip span:hover { border-color: var(--clr-accent-d); }
.product-info__qty-row { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.5rem; }
.qty-selector { display: flex; align-items: center; gap: .5rem; border: 1.5px solid var(--clr-border); border-radius: var(--radius-sm); padding: .35rem .75rem; }
.qty-selector__btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--clr-primary); transition: background var(--transition); border-radius: 4px; }
.qty-selector__btn:hover { background: var(--clr-surface); }
.qty-selector__input { width: 40px; text-align: center; font-weight: 700; font-size: .9rem; border: none; background: none; color: var(--clr-primary); }
.product-info__atc-form { flex: 1; }
.product-info__atc-btn { padding: .85rem 2rem; font-size: .95rem; width: 100%; justify-content: center; }
.product-info__trust { display: flex; flex-direction: column; gap: .6rem; padding: 1rem; background: var(--clr-surface); border-radius: var(--radius-md); }
.trust-item { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--clr-muted); }
.trust-item svg { color: var(--clr-accent-d); flex-shrink: 0; }
.sticky-atc { display: none; }

/* ── Reviews ────────────────────────────────────────────── */
.reviews { padding: 4rem 0; background: var(--clr-bg); }
.reviews-summary { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--clr-border); }
.reviews-summary__score { display: flex; flex-direction: column; align-items: center; }
.reviews-summary__avg { font-family: var(--ff-display); font-size: 3rem; font-weight: 700; color: var(--clr-primary); line-height: 1; }
.reviews-summary__stars { color: var(--clr-star); font-size: 1.1rem; }
.reviews-summary__count { font-size: .75rem; color: var(--clr-muted); }
.reviews-list { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2.5rem; }
.review-item { background: var(--clr-white); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: 1.5rem; }
.review-item__head { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; flex-wrap: wrap; }
.review-author { font-weight: 700; font-size: .9rem; color: var(--clr-primary); }
.review-stars { color: var(--clr-star); }
.review-date { font-size: .75rem; color: var(--clr-muted); margin-inline-start: auto; }
.review-title { display: block; font-weight: 600; color: var(--clr-text); margin-bottom: .35rem; }
.review-body { color: var(--clr-muted); font-size: .875rem; line-height: 1.7; }
.review-form-placeholder { background: var(--clr-white); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: 2rem; }
.review-form__title { font-family: var(--ff-display); font-size: 1.2rem; color: var(--clr-primary); margin-bottom: 1.25rem; }
.review-form__fields { display: flex; flex-direction: column; gap: 1rem; }
.review-form__stars { display: flex; gap: .35rem; }
.star-btn { font-size: 1.5rem; color: var(--clr-border); transition: color var(--transition); }
.star-btn:hover { color: var(--clr-star); }

/* ── Products Page Filter ────────────────────────────────── */
.products-page__filter-bar { padding: 1.25rem 0; background: var(--clr-white); border-bottom: 1px solid var(--clr-border); }
.filter-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.filter-bar__chips { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.filter-chip { padding: .4rem 1rem; border-radius: var(--radius-xl); font-size: .8rem; font-weight: 500; border: 1.5px solid var(--clr-border); color: var(--clr-muted); transition: border-color var(--transition), color var(--transition), background var(--transition); }
.filter-chip:hover { border-color: var(--clr-accent-d); color: var(--clr-accent-d); }
.filter-chip--active { background: var(--clr-primary); border-color: var(--clr-primary); color: var(--clr-white); }
.sort-select { padding: .45rem 2.5rem .45rem 1rem; border: 1.5px solid var(--clr-border); border-radius: var(--radius-sm); font-size: .82rem; color: var(--clr-text); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-color: var(--surface, var(--clr-white)); transition: border-color var(--transition); }
.sort-select:focus { outline: none; border-color: var(--clr-accent-d); }

/* ── Hero CSS Entrance (above-fold, no GSAP dependency) ─── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero__eyebrow   { animation: fadeIn .7s ease both; animation-delay: .05s; }
.hero__title-prefix { animation: fadeInUp .7s ease both; animation-delay: .1s; }
.hero__title     { animation: fadeInUp .9s ease both; animation-delay: .25s; }
.hero__subtitle  { animation: fadeInUp .8s ease both; animation-delay: .45s; }
.hero__cta-wrap  { animation: fadeInUp .7s ease both; animation-delay: .65s; }
.hero__trust     { animation: fadeIn .7s ease both; animation-delay: .85s; }
.hero__img       { animation: fadeIn 1.2s ease both; animation-delay: .1s; }
.hero__badge-float { animation: fadeInUp .8s cubic-bezier(.34,1.56,.64,1) both; animation-delay: 1.05s; }

/* FAQ smooth panel (height transition) */
.faq-item__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; overflow: hidden; padding-bottom: 0; }
.faq-item__panel.is-open { grid-template-rows: 1fr; }
.faq-item__panel > * { min-height: 0; padding-bottom: 1.1rem; }

/* Back-to-top button */
.back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 44px; height: 44px; border-radius: 50%; background: var(--clr-primary); color: var(--clr-white); display: flex; align-items: center; justify-content: center; z-index: 700; opacity: 0; transform: translateY(12px); transition: opacity var(--transition), transform var(--transition), background var(--transition); pointer-events: none; box-shadow: var(--shadow-md); }
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--clr-accent-d); }
@media (max-width: 768px) { .back-to-top { bottom: 5rem; } }

/* ── Reduced Motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ══════════════════════════ RESPONSIVE ══════════════════════════ */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero__text-panel { padding: calc(var(--header-h) + 3rem) 5% 3rem; }
  .hero__image-panel { height: 55vw; }
  .categories__grid { grid-template-columns: repeat(2, 1fr); }
  .products__grid--wide { grid-template-columns: repeat(3, 1fr); }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .contact__inner { grid-template-columns: 1fr; gap: 3rem; }
  .product-detail__inner { gap: 2.5rem; }
  .checkout-page__layout { grid-template-columns: 1fr 300px; gap: 2rem; }
  .cart-page__layout { grid-template-columns: 1fr 300px; }
}

@media (max-width: 768px) {
  :root { --header-h: 64px; }
  .header__nav { position: fixed; top: var(--header-h); left: 0; right: 0; background: var(--clr-white); padding: 1.5rem; border-bottom: 1px solid var(--clr-border); transform: translateY(-105%); transition: transform var(--transition); z-index: 800; box-shadow: var(--shadow-md); }
  .header__nav.is-open { transform: translateY(0); }
  .header__nav ul { flex-direction: column; gap: 1.25rem; }
  .header__nav a { font-size: 1rem; }
  .header__menu-btn { display: flex; }
  .products__grid, .products__grid--wide { grid-template-columns: repeat(2, 1fr); }
  .categories__grid { grid-template-columns: repeat(2, 1fr); }
  .policies__grid { grid-template-columns: 1fr; }
  .faqs__inner { grid-template-columns: 1fr; gap: 2rem; }
  .product-detail__inner { grid-template-columns: 1fr; }
  .product-gallery { position: static; }
  .cart-page__layout { grid-template-columns: 1fr; }
  .checkout-page__layout { grid-template-columns: 1fr; }
  .checkout-summary { position: static; order: -1; }
  .form-row--3 { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .quick-view-modal__panel { grid-template-columns: 1fr; }
  .quick-view-modal__img-wrap img { min-height: 260px; }
  .cart-item { grid-template-columns: 72px 1fr auto; }
  .cart-item__qty, .cart-item__line-total { display: none; }
  .cart-page__items-head { display: none; }
  .hero__image-panel { height: 70vw; }
  /* Sticky ATC — mobile only */
  .sticky-atc { position: fixed; bottom: 0; left: 0; right: 0; padding: .875rem 1rem; background: var(--clr-white); border-top: 1px solid var(--clr-border); z-index: 800; display: flex; align-items: center; justify-content: space-between; gap: 1rem; transform: translateY(100%); transition: transform .3s; box-shadow: 0 -4px 20px rgba(26,43,94,.12); }
  .sticky-atc.visible { transform: translateY(0); }
  .sticky-atc__info { display: flex; flex-direction: column; }
  .sticky-atc__title { font-weight: 700; font-size: .875rem; color: var(--clr-primary); }
  .sticky-atc__price { font-size: .8rem; color: var(--clr-muted); }
  .sticky-atc__btn { flex-shrink: 0; }
}

@media (max-width: 480px) {
  .products__grid, .products__grid--wide { grid-template-columns: repeat(2, 1fr); gap: .875rem; }
  .categories__grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .form-row--2 { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .hero__cta-wrap { flex-direction: column; }
  .trust-signals { flex-direction: column; gap: .75rem; }
}

/* Hide wire:loading elements before Livewire mounts (mirrors Livewire's runtime CSS) */
[wire\:loading],
[wire\:loading\.delay],
[wire\:loading\.inline-block],
[wire\:loading\.inline] { display: none; }

/* ===== MOTION — GSAP REPLACEMENT (CSS-native reveals) =====
   Resting state for every selector below is fully visible at rule level
   (no rule-level opacity:0 anywhere in this file) — a browser that supports
   neither prefers-reduced-motion nor view() timelines still renders full
   content. Everything past this point is additive polish only. */

@media (prefers-reduced-motion: no-preference) {

  @keyframes wbRevealUp {
    from { opacity: 0; transform: translateY(40px); }
    /* `to` intentionally omits `transform` — see
       les-filling-view-animation-outranks-hover-and-inline-transform. */
    to { opacity: 1; }
  }
  @keyframes wbRevealUpSmall {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; }
  }
  @keyframes wbRevealLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; }
  }
  @keyframes wbRevealRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; }
  }

  /* ---- Above-the-fold entrances (page-hero inner pages + product detail) ----
     These never used ScrollTrigger — GSAP fired them once on DOMContentLoaded
     with a short delay, so a plain wall-clock animation reproduces them exactly. */
  .page-hero__content {
    animation: wbRevealUpSmall .8s cubic-bezier(.16,1,.3,1) .2s both;
  }
  .product-gallery {
    animation: wbRevealUpSmall .8s cubic-bezier(.16,1,.3,1) .1s both;
  }
  .product-info {
    animation: wbRevealUpSmall .8s cubic-bezier(.16,1,.3,1) .25s both;
  }
}

/* ---- Scroll-driven reveals (replaces every ScrollTrigger tween) ----
   Scoped to browsers that both allow motion AND support scroll-driven
   animations; everywhere else the elements above are simply visible with
   no reveal, which is the correct fallback, not a regression. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .category-card {
      animation: wbRevealUp .7s cubic-bezier(.16,1,.3,1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    .category-card:nth-child(2) { animation-range: entry 8% entry 68%; }
    .category-card:nth-child(3) { animation-range: entry 16% entry 76%; }
    .category-card:nth-child(n+4) { animation-range: entry 24% entry 84%; }

    .product-card {
      animation: wbRevealUp .65s cubic-bezier(.16,1,.3,1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 62%;
    }
    .product-card:nth-child(2) { animation-range: entry 8% entry 70%; }
    .product-card:nth-child(3) { animation-range: entry 16% entry 78%; }
    .product-card:nth-child(4) { animation-range: entry 24% entry 86%; }
    .product-card:nth-child(n+5) { animation-range: entry 32% entry 94%; }

    .testimonials .section-head--light {
      animation: wbRevealUp .7s cubic-bezier(.16,1,.3,1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }

    .policy-card {
      animation: wbRevealUpSmall .6s cubic-bezier(.16,1,.3,1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 68%;
    }
    .policy-card:nth-child(2) { animation-range: entry 9% entry 77%; }
    .policy-card:nth-child(3) { animation-range: entry 18% entry 86%; }
    .policy-card:nth-child(n+4) { animation-range: entry 27% entry 95%; }

    .contact__info {
      animation: wbRevealLeft .8s cubic-bezier(.16,1,.3,1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 65%;
    }
    .contact__form-wrap {
      animation: wbRevealRight .8s cubic-bezier(.16,1,.3,1) both;
      animation-timeline: view();
      animation-range: entry 8% entry 73%;
    }

    .faqs__header {
      animation: wbRevealLeft .7s cubic-bezier(.16,1,.3,1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 65%;
    }
  }
}

/* WoBooks empty-image guard (theme:editor-compliance --fix --scope=img-empty-guard):
   image_url('') renders <img src=""> until the owner uploads a photo — hide it
   instead of leaking the browser's broken-image icon + alt text onto the page. */
img[src=""], img:not([src]) { display: none !important; }

/* Palette roles (BrandColourRoles, 2026-10-06): brand-coloured text on a band this theme draws dark keeps a lightness floor; text on a brand fill follows the fill. */
:where(.site-footer) .footer__col-title { color: oklch(from var(--clr-accent) max(l, 0.75) c h); }

/* Own contrast (Weave item 54, theme:palette-stress --heal): with no palette, these read 4.5:1 on the theme's own
   backgrounds; each was proven by rendering the page. The palette block (html:root) still overrides the tokens. */
:root {
  --clr-accent-d: #277d8c; /* was #4A9BAB */
}
.footer__bottom p { color: oklch(from var(--wb-on-dark, rgba(255,255,255,.4)) calc(l + 0.02) c h / calc(min(1, alpha + 0.06))); }

/* phone-header-fit: at phone width a real business name fills the logo, so the brand truncates
   before it can push the menu toggle off-screen, and the toggle stays pinned right. */
@media (max-width: 768px) {
  .header__logo { flex-shrink: 1; min-width: 0; }
  .header__logo .wb-header-brand { max-width: 100% !important; }
  .header__actions { flex-shrink: 0; }
}
/* /phone-header-fit */
/* phone-menu-fit: translateY(-105%) from top: var(--header-h) leaves the closed panel's last
   ~56px over the header bar, on top (z 800) and opaque to taps, so tapping the toggle hit the
   hidden menu instead. Closed, the panel is hidden; visibility flips at the right end of the slide. */
@media (max-width: 768px) {
  .header__nav { visibility: hidden; transition: transform var(--transition), visibility var(--transition); }
  .header__nav.is-open { visibility: visible; }
}
/* /phone-menu-fit */

/* Weave item 59 (by hand): the header is transparent over the dark hero until it scrolls (.scrolled turns it light),
   and the phone menu is a white panel, so the navy brand and links get a lightness floor only on the unscrolled
   header, the links only where they sit in it (desktop). The heal had floored every nav link: it renders one state. */
.site-header:not(.scrolled):not(.site-header--light) .wb-header-brand { color: oklch(from var(--clr-primary) max(l, 0.626) c h / alpha); }
@media (min-width: 769px) {
  .site-header:not(.scrolled):not(.site-header--light) .header__nav a { color: oklch(from var(--clr-primary) max(l, 0.626) c h / alpha); }
}
/* The contact form sits on the dark band; the checkout pages' .form-label rule above overrode its light labels. */
.contact__form .form-label { color: rgba(255,255,255,.8); }

/* Guarded contrast (Skin & Skeleton S2, theme:palette-stress --heal --guarded): text that read in the owner's
   colours but not once a colour was darkened to read on the page. Each bound was proven by rendering the page with no
   palette, with each stress palette as picked, and with its guarded and readable versions: none got worse. */
:where([data-section="hero"]) .hero__title-prefix { color: oklch(from var(--clr-accent) max(l, 0.606) c h / alpha); }