/** Shopify CDN: Minification failed

Line 133:19 Unexpected "*"

**/
/* ============================================
   AnchorLabs Custom Styles
   Loads after base.css — overrides Dawn defaults
   ============================================ */

/* ------------------------------------------
   1. CSS Custom Properties
   ------------------------------------------ */
html {
  /* Reset Dawn's base.css `font-size: 62.5%` (which makes 1rem = 10px).
     This custom stylesheet was written assuming the browser default of 16px,
     so the 62.5% trick shrinks all rem-based typography to ~60% of intent. */
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

:root {
  --al-white: #FFFFFF;
  --al-black: #000000;
  --al-text: #111111;
  --al-text-secondary: #555555;
  --al-text-muted: #888888;
  --al-border: rgba(0, 0, 0, 0.08);
  --al-border-strong: rgba(0, 0, 0, 0.15);
  --al-accent-warm: #E8A94A;
  --al-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --al-section-spacing-mobile: 64px;
  --al-section-spacing-desktop: 120px;
  --al-page-padding: 20px;
}

@media screen and (min-width: 750px) {
  :root {
    --al-page-padding: 40px;
  }
}

/* ------------------------------------------
   2. Global Typography — Inter everywhere
   ------------------------------------------ */
body,
.shopify-section,
.shopify-section *,
button,
input,
select,
textarea {
  font-family: var(--al-font) !important;
}

body {
  color: var(--al-text) !important;
  background-color: var(--al-white) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.5 !important;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.hxl {
  font-family: var(--al-font) !important;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--al-text);
}

h1, .h1, .hxl {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 400;
}

h2, .h2 {
  font-size: clamp(1.75rem, 5vw, 2.8rem);
  font-weight: 400;
}

h3, .h3 {
  font-size: clamp(1.25rem, 3vw, 1.8rem);
  font-weight: 500;
}

p, .rte p {
  color: var(--al-text-secondary);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 300;
}

a {
  color: var(--al-text);
}

/* Remove Dawn's default text opacity */
body,
.color-scheme-1,
.color-scheme-2,
.color-scheme-3,
.color-scheme-4,
.color-scheme-5 {
  color: var(--al-text) !important;
}

/* ------------------------------------------
   3. Global Resets & Base Overrides
   ------------------------------------------ */

/* Remove Dawn gradients */
.gradient {
  background: var(--al-white) !important;
}

/* Page width */
.page-width {
  max-width: 1200px;
  padding-left: var(--al-page-padding);
  padding-right: var(--al-page-padding);
}

/* Section spacing */
.section-template--* + .section-template--*,
.shopify-section + .shopify-section {
  margin-top: 0;
}

/* Remove Dawn's default section padding behavior */
.section-padding {
  padding-top: 0;
  padding-bottom: 0;
}

/* ------------------------------------------
   4. Buttons
   ------------------------------------------ */
.al-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  font-family: var(--al-font) !important;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 48px;
  line-height: 1;
}

.al-btn--primary {
  background-color: var(--al-black);
  color: var(--al-white);
}

.al-btn--primary:hover {
  background-color: #333;
}

.al-btn--secondary {
  background-color: transparent;
  color: var(--al-white);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.al-btn--secondary:hover {
  border-color: var(--al-white);
}

.al-btn--secondary-dark {
  background-color: transparent;
  color: var(--al-text);
  border: 1px solid var(--al-border-strong);
}

.al-btn--secondary-dark:hover {
  border-color: var(--al-text);
}

.al-btn--full {
  width: 100%;
}

/* Override Dawn's button styles */
.button,
.shopify-challenge__button,
button.button {
  font-family: var(--al-font) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.8125rem;
  border-radius: 0;
  min-height: 48px;
}

/* ------------------------------------------
   5. Section Shared Styles
   ------------------------------------------ */
.al-section {
  padding: var(--al-section-spacing-mobile) 0;
}

@media screen and (min-width: 750px) {
  .al-section {
    padding: var(--al-section-spacing-desktop) 0;
  }
}

.al-section-kicker {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--al-text-muted);
  margin-bottom: 12px;
}

.al-section-heading {
  font-size: clamp(1.75rem, 5vw, 2.8rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--al-text);
  margin: 0 0 16px;
}

.al-section-heading--small {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--al-text);
  margin: 0 0 24px;
}

.al-section-sub {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--al-text-secondary);
  max-width: 520px;
}

.al-section-header {
  margin-bottom: 48px;
}

@media screen and (min-width: 750px) {
  .al-section-header {
    margin-bottom: 64px;
  }
}

.al-section-header--center {
  text-align: center;
}

.al-section-header--center .al-section-sub {
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------
   6. Hero Video Section — MOBILE CRITIQUE full-bleed
   ------------------------------------------ */
.al-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  max-height: 900px;
  overflow: hidden;
  background-color: var(--al-black, #0a0a0a);
  color: #fff;
}

.al-hero__video-wrapper {
  position: absolute;
  inset: 0;
}

.al-hero__video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.al-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0) 28%,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, 0.92) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Pill: "Made in Mumbai · Ships in 7 days" + green pulse dot */
.al-hero__pill {
  position: absolute;
  top: clamp(64px, 11vh, 104px);
  left: clamp(14px, 4vw, 24px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-weight: 500;
}
.al-hero__pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--al-good, #1aa260);
  box-shadow: 0 0 0 4px rgba(26, 162, 96, 0.18);
  flex-shrink: 0;
}

/* Body: eyebrow + display heading + sub + CTAs, pinned bottom */
.al-hero__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 clamp(14px, 4vw, 24px) clamp(22px, 4vh, 36px);
  color: #fff;
  width: 100%;
  max-width: 720px;
}

.al-hero__eyebrow {
  font-family: var(--al-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 10px;
  text-transform: none;
}

/* Hero heading is now a direct overlay on the video-wrapper (not inside the
   body container) — lives on top of the video itself. On mobile it sits at
   the bottom of the natural-aspect video; on desktop it floats above the
   body stack. */
.al-hero__display {
  position: absolute;
  left: clamp(14px, 4vw, 72px);
  right: clamp(14px, 4vw, 72px);
  bottom: 16px;
  z-index: 2;
  font-family: var(--al-font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 9vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0;
  color: #fff;
  max-width: 720px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
.al-hero__display em {
  font-style: italic;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.al-hero__sub {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  max-width: 340px;
  margin: 0 0 18px;
  font-weight: 300;
}

.al-hero__ctas {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.al-hero__cta-prim {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 22px;
  background: #fff;
  color: #000;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}
.al-hero__cta-prim:hover,
.al-hero__cta-prim:focus-visible { background: #f0ede5; transform: translateY(-1px); color: #000; }
.al-hero__cta-prim svg { transition: transform 0.2s ease; }
.al-hero__cta-prim:hover svg { transform: translateX(3px); }

.al-hero__cta-sec {
  height: 52px;
  width: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease;
}
.al-hero__cta-sec:hover,
.al-hero__cta-sec:focus-visible { background: rgba(255, 255, 255, 0.15); }

.al-hero__scroll-hint {
  position: absolute;
  left: clamp(14px, 4vw, 24px);
  bottom: clamp(90px, 12vh, 120px);
  z-index: 2;
  font-family: var(--al-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  pointer-events: none;
  user-select: none;
}

@media screen and (min-width: 750px) {
  .al-hero__display {
    max-width: 700px;
    /* Float above the body stack (sub + CTAs) on desktop. */
    bottom: 220px;
  }
  .al-hero__body { padding-bottom: 72px; padding-left: clamp(32px, 6vw, 72px); }
  .al-hero__pill { top: 110px; left: clamp(32px, 6vw, 72px); }
  .al-hero__scroll-hint { left: clamp(32px, 6vw, 72px); }
}

@media screen and (max-width: 749px) {
  /* Mobile hero: video at its NATURAL aspect at the top (fully visible, no
     crop). Pill and heading OVERLAY the video; body below is a compact
     black strip containing only subheading + CTAs — no wasted vertical
     space. */
  .al-hero {
    background-color: #0a0a0a;
    height: auto;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
  }
  .al-hero__video-wrapper {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1106 / 720;
    background-color: #000;
    overflow: hidden;
  }
  .al-hero__video-wrapper video {
    object-fit: contain;
    background-color: #000;
  }
  /* Scrim stays — helps the pill (top) and heading (bottom) read on the
     video. Inside video-wrapper, inset:0 fills the video area only. */
  .al-hero__scrim {
    display: block;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.45) 0%,
      transparent 28%,
      transparent 55%,
      rgba(0, 0, 0, 0.78) 100%
    );
  }
  .al-hero__scroll-hint { display: none; }
  /* Pill overlays the top-left of the video. */
  .al-hero__pill {
    top: 12px;
    left: 14px;
  }
  /* Heading overlays the bottom-left of the video. */
  .al-hero__display {
    bottom: 14px;
    left: 14px;
    right: 14px;
    font-size: clamp(2rem, 9.5vw, 2.8rem);
  }
  /* Body below the video holds only subheading + CTAs — compact. */
  .al-hero__body {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 14px 18px 22px;
    max-width: 100%;
  }
  .al-hero__sub { max-width: 100%; margin: 0 0 14px; }

  /* Align header items flush to page edges on mobile (Dawn's 3rem padding
     leaves hamburger + cart floating too far inward). */
  .header.page-width {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .header__heading-link {
    padding: 0.5rem !important;
  }
  /* Force logo to center regardless of Dawn's grid+auto column quirks. */
  .header {
    grid-template-columns: 1fr auto 1fr !important;
  }
  .header__heading,
  .header__heading-link {
    justify-self: center !important;
  }
}

/* ------------------------------------------
   7. Trust Bar — LIGHT minimalistic variant
   ------------------------------------------ */
.al-trust {
  background: #fff;
  color: var(--al-ink, #0e0e0e);
  padding: 40px 0 36px;
  border: none;
}

.al-trust__inner {
  padding: 0 var(--al-page-padding, 20px);
  max-width: 1200px;
  margin: 0 auto;
}

/* Legacy .al-trust__label (pre-step-header) kept as a fallback in case the
   schema still renders the raw text. Step-header is now the canonical path. */
.al-trust__label {
  font-family: var(--al-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 18px;
}

.al-trust__marquee {
  display: flex;
  gap: 14px;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 calc(var(--al-page-padding, 20px) * -1);
  padding: 0 var(--al-page-padding, 20px);
}
.al-trust__marquee::-webkit-scrollbar { display: none; }

.al-trust__card {
  flex: 0 0 auto;
  width: clamp(96px, 28vw, 124px);
  min-height: 88px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scroll-snap-align: start;
  background: transparent;
}

.al-trust__glyph {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--al-ink, #0e0e0e);
  line-height: 1;
  font-family: var(--al-font-mono);
  font-size: 11px;
  margin-bottom: 2px;
}
.al-trust__glyph svg { width: 100%; height: 100%; display: block; }

.al-trust__num {
  font-family: var(--al-font-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--al-ink, #0e0e0e);
  overflow-wrap: break-word;
}

.al-trust__desc {
  font-size: 9px;
  color: #666;
  line-height: 1.35;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Dots intentionally removed (user feedback — reads as a busy "scroll indicator"). */
.al-trust__dots { display: none; }

@media screen and (min-width: 750px) {
  .al-trust { padding: 40px 0 36px; }
  .al-trust__marquee {
    overflow: hidden;
    gap: 12px;
  }
  .al-trust__card {
    flex: 1 1 0;
    width: auto;
    min-height: 110px;
    padding: 14px 16px;
  }
  .al-trust__glyph { width: 24px; height: 24px; }
  .al-trust__num { font-size: 15px; }
  .al-trust__desc { font-size: 10.5px; }
}

/* ------------------------------------------
   8. Reveal Slider — MOBILE CRITIQUE bigger, labelled
   ------------------------------------------ */
.al-reveal {
  padding: var(--al-section-spacing-mobile, 64px) 0;
  background: #fff;
}
.al-reveal--critique { padding: 48px 0 56px; }

@media screen and (min-width: 750px) {
  .al-reveal { padding: var(--al-section-spacing-desktop, 120px) 0; }
  .al-reveal--critique { padding: 96px 0 112px; }
}

.al-reveal__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--al-page-padding, 20px);
}
.al-reveal__h2 { margin-bottom: 8px; }
.al-reveal__sub { max-width: 320px; margin-bottom: 22px; }

.al-reveal__slider {
  position: relative;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  height: 280px;
  border-radius: 14px;
}
/* Critique: aspect-ratio matches artwork so neither top nor bottom gets
   cropped at any viewport. 4:3 on mobile, wider 16:10 on desktop. */
.al-reveal--critique .al-reveal__slider {
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 560px;
}
@media screen and (min-width: 750px) {
  .al-reveal--critique .al-reveal__slider { aspect-ratio: 16 / 10; }
}

.al-reveal__before,
.al-reveal__after { width: 100%; height: 100%; }

.al-reveal__before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  clip-path: inset(0 50% 0 0);
  transition: clip-path 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.al-reveal--dragging .al-reveal__before { transition: none; }

.al-reveal__after { position: relative; z-index: 1; }

.al-reveal__before img,
.al-reveal__after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.al-reveal__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 3;
  width: 48px;
  transform: translateX(-50%);
  pointer-events: auto;
  transition: left 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.al-reveal--dragging .al-reveal__handle { transition: none; }

.al-reveal__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
  transform: translateX(-50%);
  pointer-events: none;
}

.al-reveal__handle-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
}

.al-reveal__handle-circle svg {
  width: 20px;
  height: 20px;
  color: #0a0a0a;
}

/* One-time handle hint animation (added by JS 600ms after intersect). */
@keyframes al-reveal-hint {
  0%, 100% { transform: translate(-50%, -50%); }
  25% { transform: translate(calc(-50% - 18px), -50%); }
  60% { transform: translate(calc(-50% + 18px), -50%); }
}
.al-reveal--hint .al-reveal__handle-circle {
  animation: al-reveal-hint 1200ms cubic-bezier(0.3, 0.5, 0.3, 1) 1;
}

.al-reveal__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-family: var(--al-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
}
.al-reveal__label {
  background: none;
  border: none;
  font: inherit;
  letter-spacing: inherit;
  padding: 6px 10px;
  margin: -6px -10px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.al-reveal__label:hover,
.al-reveal__label:focus-visible { background: rgba(0, 0, 0, 0.04); outline: none; }
.al-reveal__label--off { color: #888; }
.al-reveal__label--on {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--al-good, #1aa260);
  font-weight: 500;
}
.al-reveal__label-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(26, 162, 96, 0.18);
}

.al-reveal__haptic {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #666;
}
.al-reveal__haptic-glyph {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--al-font-mono);
  font-size: 10px;
  flex-shrink: 0;
  color: #0a0a0a;
}
.al-reveal__toggle {
  background: none;
  border: none;
  color: #0a0a0a;
  font-weight: 500;
  text-decoration: underline;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.al-reveal__toggle:hover,
.al-reveal__toggle:focus-visible { color: var(--al-good, #1aa260); }

/* ------------------------------------------
   9. Product Showcase
   ------------------------------------------ */
.al-products {
  padding: var(--al-section-spacing-mobile) 0;
}

@media screen and (min-width: 750px) {
  .al-products {
    padding: var(--al-section-spacing-desktop) 0;
  }
}

/* Category cards */
.al-products__categories {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 64px;
}

@media screen and (min-width: 750px) {
  .al-products__categories {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 80px;
  }
}

.al-category-card {
  border: 1px solid var(--al-border);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.al-category-card:hover {
  border-color: var(--al-border-strong);
}

.al-category-card__image {
  overflow: hidden;
  aspect-ratio: 4/3;
}

.al-category-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.al-category-card:hover .al-category-card__image img {
  transform: scale(1.02);
}

.al-category-card__content {
  padding: 24px;
}

.al-category-card__icon {
  width: 44px;
  height: 44px;
  color: var(--al-text);
  margin: 0 0 16px;
  transition: transform 0.3s ease;
}

.al-category-card__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.al-category-card:hover .al-category-card__icon {
  transform: translateY(-2px);
}

.al-category-card__label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--al-text-muted);
  margin: 0 0 8px;
}

.al-category-card__content h3 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.al-category-card__content p {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--al-text-secondary);
  line-height: 1.6;
  margin: 0 0 20px;
}

.al-category-card__price {
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.al-price--current {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--al-text);
}

.al-price--compare {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--al-text-muted);
  text-decoration: line-through;
}

.al-price--badge {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--al-text-muted);
}

/* Free shipping chip — sits next to the price tags on both product + category cards */
.al-price--shipping {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--al-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.al-price--shipping::before {
  content: "•";
  color: var(--al-border-strong);
  font-size: 1rem;
  line-height: 0;
}

/* Signature product container — mobile: vertical stack (was horizontal scroller) */
.al-products__scroll {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: visible;
}

.al-products__scroll::-webkit-scrollbar {
  display: none;
}

@media screen and (min-width: 750px) {
  .al-products__scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    overflow: visible;
  }
}

.al-product-card {
  flex: none;
  width: 100%;
  border: 1px solid var(--al-border);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

/* Shorter image on mobile so price + CTA sit close together above the fold */
@media screen and (max-width: 749px) {
  .al-product-card__image-wrap {
    aspect-ratio: 4 / 3;
  }
  .al-product-card__info {
    padding: 24px;
  }
}

.al-product-card:hover {
  border-color: var(--al-border-strong);
}

.al-product-card__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1;
  background: #f8f8f8;
}

/* Product card images — swap between on and sidebyside */
.al-product-card__img-on,
.al-product-card__img-sidebyside {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.al-product-card__img-sidebyside {
  opacity: 0;
}

/* Product card auto-cycling carousel (new — 1-3 images with crossfade + dot indicators) */
.al-product-card__carousel {
  position: absolute;
  inset: 0;
}

.al-product-card__carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Per-card zoom: honours inline --slide-scale var from Liquid (default 1 = no zoom).
     Use this when source images have more surrounding space than others so the product
     fills the card frame consistently. */
  transform: scale(var(--slide-scale, 1));
  transform-origin: center center;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.al-product-card__carousel-slide--active {
  opacity: 1;
}

/* Contain variant: when a slide uses object-fit: contain (source aspect doesn't
   match the card), the letterbox bars above/below use pure white so they blend
   into the site's white background. */
.al-product-card__carousel-slide--contain {
  background-color: #ffffff;
}

/* Left/right arrow buttons on the carousel — primary nav since swipe was
   removed. Small (34px), translucent dark pills overlaying the image. */
.al-product-card__carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(10, 10, 10, 0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.al-product-card__carousel-nav:hover,
.al-product-card__carousel-nav:focus-visible {
  background: rgba(10, 10, 10, 0.72);
  border-color: rgba(255, 255, 255, 0.6);
  outline: none;
}
.al-product-card__carousel-nav--prev { left: 10px; }
.al-product-card__carousel-nav--next { right: 10px; }
.al-product-card__carousel-nav svg { display: block; color: inherit; }

.al-product-card__carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 2;
  /* pointer-events enabled so dots are tappable (auto-advance killed). */
  pointer-events: auto;
}

/* 6px dot rendered inside a 28px hit-target so mobile taps are reliable
   without visibly ballooning the indicator. */
.al-product-card__carousel-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  position: relative;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.al-product-card__carousel-dot::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transition: background 0.25s ease, transform 0.25s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.al-product-card__carousel-dot:hover::after,
.al-product-card__carousel-dot:focus-visible::after {
  background: rgba(255, 255, 255, 0.85);
}
.al-product-card__carousel-dot--active::after {
  background: rgba(255, 255, 255, 0.98);
  transform: scale(1.25);
}

.al-product-card--compare .al-product-card__image-wrap {
  aspect-ratio: auto;
}

.al-product-card--compare .al-product-card__img-on {
  opacity: 0;
  position: absolute;
}

.al-product-card--compare .al-product-card__img-sidebyside {
  opacity: 1;
  position: relative;
}

.al-product-card__toggle {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--al-white);
  border: 1px solid var(--al-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: box-shadow 0.2s ease;
}

.al-product-card__toggle:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.al-product-card__toggle svg {
  width: 18px;
  height: 18px;
  color: var(--al-text);
}

.al-product-card__info {
  padding: 20px;
}

.al-product-card__info h4,
.al-product-card__title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--al-ink, #0a0a0a);
  background: transparent;
  padding: 0;
  border: none;
  display: block;
}

.al-product-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
}
.al-product-card__stars {
  display: inline-flex;
  gap: 1px;
}
.al-product-card__star {
  width: 14px;
  height: 14px;
}
.al-product-card__star--filled { color: #f5a623; }
.al-product-card__star--empty { color: rgba(0, 0, 0, 0.2); }
.al-product-card__review-count {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--al-text-muted);
  letter-spacing: 0;
}

.al-product-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
}

.al-product-card__actions {
  display: flex;
  gap: 8px;
}

.al-product-card__actions .al-btn {
  flex: 1;
  padding: 12px 8px;
  font-size: 0.6875rem;
  min-height: 44px;
}

.al-product-card__view3d {
  font-size: 0.6875rem !important;
}

/* ------------------------------------------
   10. How It Works
   ------------------------------------------ */
.al-how-it-works {
  padding: var(--al-section-spacing-mobile) 0;
  border-top: 1px solid var(--al-border);
}

@media screen and (min-width: 750px) {
  .al-how-it-works {
    padding: var(--al-section-spacing-desktop) 0;
  }
}

.al-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media screen and (min-width: 750px) {
  .al-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }
}

.al-step {
  position: relative;
}

@media screen and (max-width: 749px) {
  .al-step + .al-step {
    padding-top: 40px;
    border-top: 1px solid var(--al-border);
  }
}

.al-step__icon {
  margin-bottom: 20px;
}

.al-step__icon svg {
  width: 48px;
  height: 48px;
  stroke: var(--al-text);
  opacity: 0.35;
}

.al-step__number {
  font-size: 3rem;
  font-weight: 300;
  color: var(--al-text-muted);
  line-height: 1;
  opacity: 0.4;
}

.al-step__title {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--al-text);
  margin: 0 0 8px;
}

.al-step__desc {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--al-text-secondary);
  margin: 0;
}

/* ------------------------------------------
   11. Brand Story
   ------------------------------------------ */
.al-brand-story {
  padding: var(--al-section-spacing-mobile) 0;
}

@media screen and (min-width: 750px) {
  .al-brand-story {
    padding: var(--al-section-spacing-desktop) 0;
  }
}

.al-brand-story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media screen and (min-width: 750px) {
  .al-brand-story__grid {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
}

.al-brand-story__image img {
  width: 100%;
  display: block;
}

.al-brand-story__text {
  padding: 0;
}

@media screen and (min-width: 750px) {
  .al-brand-story__text {
    padding: 40px 0;
  }
}

.al-brand-story__text h2 {
  margin-bottom: 24px;
}

.al-brand-story__text p {
  margin: 0 0 16px;
}

.al-brand-story__stats {
  display: flex;
  gap: 32px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--al-border);
}

.al-stat__value {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--al-text);
  margin-bottom: 2px;
}

.al-stat__label {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--al-text-muted);
}

/* ------------------------------------------
   12. Specs Section
   ------------------------------------------ */
.al-specs {
  padding: var(--al-section-spacing-mobile) 0;
  border-top: 1px solid var(--al-border);
}

@media screen and (min-width: 750px) {
  .al-specs {
    padding: var(--al-section-spacing-desktop) 0;
  }
}

.al-specs__visual {
  margin: 0 auto 64px;
  max-width: 960px;
  padding: 48px 0;
  border-top: 1px solid var(--al-border);
  border-bottom: 1px solid var(--al-border);
}

.al-specs__box-diagram {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 16px;
  max-width: 720px;
  margin: 0 auto;
}

@media screen and (min-width: 750px) {
  .al-specs__box-diagram {
    gap: 48px 32px;
  }
}

.al-specs__box-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
}

.al-specs__box-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--al-text);
}

.al-specs__box-icon svg {
  width: 100%;
  height: 100%;
}

.al-specs__box-title {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--al-text);
  margin: 0 0 4px;
}

.al-specs__box-desc {
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--al-text-muted);
  margin: 0;
}

.al-specs__details {
  max-width: 560px;
  margin: 0 auto;
}

/* Category card minimal (no image) */
.al-category-card--minimal {
  text-decoration: none;
  color: inherit;
  display: block;
  border: 1px solid var(--al-border);
  transition: border-color 0.2s ease;
}

.al-category-card--minimal:hover {
  border-color: var(--al-border-strong);
}

.al-category-card--minimal .al-category-card__content {
  padding: 32px 24px;
}

.al-specs__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.al-specs__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--al-border);
}

.al-specs__item:first-child {
  border-top: 1px solid var(--al-border);
}

.al-specs__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--al-text-muted);
}

.al-specs__value {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--al-text);
}

.al-specs__box-title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--al-text-muted);
  margin: 40px 0 16px;
}

.al-specs__box-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.al-specs__box-list li {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--al-text-secondary);
  padding: 8px 0;
}

/* ------------------------------------------
   12b. 3D Previewer — Dark themed section
   ------------------------------------------ */
.al-prev {
  background: var(--al-white, #fff);
  color: var(--al-text, #0e0e0e);
  padding: 64px 0;
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .al-prev { padding: 100px 0; }
}

.al-prev__inner {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Steps */
.al-prev__step { display: none; }
.al-prev__step--active { display: block; }

.al-prev__header { text-align: center; margin-bottom: 40px; }
.al-prev__kicker { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--al-text-muted); margin: 0 0 12px; }
.al-prev__title { font-family: var(--al-font) !important; font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 600; color: var(--al-text); margin: 0 0 12px; letter-spacing: -0.02em; }
.al-prev__sub { font-size: 0.9375rem; font-weight: 400; color: var(--al-text-secondary); margin: 0; line-height: 1.5; }
.al-prev__label { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--al-text-muted); margin: 0 0 16px; }
.al-prev__hint { font-size: 0.75rem; font-weight: 400; color: var(--al-text-muted); margin: 12px 0 0; text-align: center; }

/* Buttons */
.al-prev__btn-solid { display: flex; align-items: center; justify-content: center; width: 100%; padding: 15px 24px; background: var(--al-black); color: var(--al-white); border: none; font-family: var(--al-font) !important; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background 0.2s; min-height: 50px; }
.al-prev__btn-solid:hover { background: #333; }
.al-prev__btn-outline { display: flex; align-items: center; justify-content: center; width: 100%; padding: 14px 24px; background: none; color: var(--al-text); border: 1px solid var(--al-border-strong); font-family: var(--al-font) !important; font-size: 0.875rem; font-weight: 400; cursor: pointer; transition: border-color 0.2s; min-height: 50px; }
.al-prev__btn-outline:hover { border-color: var(--al-text); }
.al-prev__btn-full { width: 100%; }

/* Divider (legacy — retained for crop step, no longer used on step 1) */
.al-prev__divider { display: flex; align-items: center; gap: 16px; margin: 32px 0; color: var(--al-text-muted); font-size: 0.75rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; }
.al-prev__divider::before, .al-prev__divider::after { content: ''; flex: 1; height: 1px; background: var(--al-border); }

/* Premade grid */
.al-prev__premade-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.al-prev__premade { background: none; border: 1px solid var(--al-border); padding: 0; cursor: pointer; overflow: hidden; transition: border-color 0.2s; text-align: center; }
.al-prev__premade:hover { border-color: var(--al-border-strong); }
.al-prev__premade img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.al-prev__premade-name { display: block; padding: 8px 4px 2px; font-family: var(--al-font) !important; font-size: 0.75rem; font-weight: 500; color: var(--al-text); }
.al-prev__premade-tag { display: block; padding: 0 4px 8px; font-family: var(--al-font) !important; font-size: 0.625rem; font-weight: 400; color: var(--al-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* Upload button — base styles; .al-prev__upload-btn--primary modifier sets the current (solid black) look. */
.al-prev__upload-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px 24px; background: var(--al-black); color: var(--al-white); border: none; font-family: var(--al-font) !important; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background 0.2s; min-height: 52px; }
.al-prev__upload-btn:hover { background: #333; }
.al-prev__upload-btn svg { stroke: var(--al-white); }
.al-prev__upload-input {
  position: absolute;
  opacity: 0;
  width: 0.1px;
  height: 0.1px;
  pointer-events: none;
}

/* ---- CROP STEP ---- */
.al-prev__ratio-pills { display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; }
.al-prev__pill { display: flex; align-items: center; gap: 6px; padding: 10px 20px; background: none; border: 1px solid var(--al-border-strong); color: var(--al-text-secondary); font-family: var(--al-font) !important; font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.2s; letter-spacing: 0.03em; }
.al-prev__pill svg { stroke: currentColor; }
.al-prev__pill--active { border-color: var(--al-black); color: var(--al-text); }
.al-prev__pill--active svg { stroke: var(--al-text); }

.al-prev__crop-container { position: relative; width: 100%; background: #111; overflow: hidden; touch-action: none; border: 1px solid var(--al-border-strong); }
.al-prev__crop-container canvas { display: block; width: 100%; }
.al-prev__crop-mask { position: absolute; inset: 0; cursor: move; }
.al-prev__crop-frame { position: absolute; border: 2px solid rgba(120,180,255,0.7); box-shadow: 0 0 0 9999px rgba(0,0,0,0.55); z-index: 2; }

/* Grid lines */
.al-prev__crop-grid { position: absolute; inset: 0; }
.al-prev__grid-line { position: absolute; background: rgba(120,180,255,0.2); }
.al-prev__grid-line--h1 { left: 0; right: 0; top: 33.33%; height: 1px; border-top: 1px dashed rgba(120,180,255,0.3); }
.al-prev__grid-line--h2 { left: 0; right: 0; top: 66.66%; height: 1px; border-top: 1px dashed rgba(120,180,255,0.3); }
.al-prev__grid-line--v1 { top: 0; bottom: 0; left: 33.33%; width: 1px; border-left: 1px dashed rgba(120,180,255,0.3); }
.al-prev__grid-line--v2 { top: 0; bottom: 0; left: 66.66%; width: 1px; border-left: 1px dashed rgba(120,180,255,0.3); }

/* Crop handles */
.al-prev__crop-handle { position: absolute; width: 12px; height: 12px; background: rgba(120,180,255,0.8); z-index: 3; }
.al-prev__crop-handle--tl { top: -1px; left: -1px; }
.al-prev__crop-handle--tr { top: -1px; right: -1px; }
.al-prev__crop-handle--bl { bottom: -1px; left: -1px; }
.al-prev__crop-handle--br { bottom: -1px; right: -1px; }

.al-prev__crop-actions { display: flex; gap: 12px; margin-top: 20px; }
.al-prev__crop-actions > * { flex: 1; }

/* ---- 3D PREVIEW STEP (Three.js WebGL) ---- */
.al-prev__3d-area {
  background: #f5f5f5;
  padding: 16px 16px 12px;
  margin-bottom: 16px;
}

/* Shorter canvas on mobile so the product name + price + light toggle +
   Add to Cart all fit inside one viewport (previously 400px pushed the
   add-to-cart off-screen on 390×844 phones). */
.al-prev__3d-canvas-wrap {
  position: relative;
  width: 100%;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 750px) {
  .al-prev__3d-canvas-wrap { height: 460px; }
  .al-prev__3d-area { padding: 24px 16px; margin-bottom: 20px; }
}

#prev3dCanvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  touch-action: none;
  cursor: grab;
}

#prev3dCanvas:active {
  cursor: grabbing;
}

.al-prev__3d-hint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.35);
  letter-spacing: 0.05em;
  margin: 0;
  pointer-events: none;
  white-space: nowrap;
}

/* Product info */
.al-prev__product-info { display: flex; flex-direction: column; gap: 12px; }
.al-prev__product-row { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; }
.al-prev__product-name { font-family: var(--al-font) !important; font-size: 1.25rem; font-weight: 500; color: var(--al-text); margin: 0; }
.al-prev__price-compare { font-size: 0.875rem; color: var(--al-text-muted); text-decoration: line-through; margin-right: 6px; }
.al-prev__price-current { font-size: 1.25rem; font-weight: 600; color: var(--al-text); margin-right: 8px; }
.al-prev__product-price { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Light toggle */
.al-prev__light-toggle { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: #f7f7f7; border: 1px solid var(--al-border); margin-bottom: 4px; }
.al-prev__toggle-title { font-family: var(--al-font) !important; font-size: 0.8125rem; font-weight: 500; color: var(--al-text); margin: 0 0 2px; text-transform: uppercase; letter-spacing: 0.05em; }
.al-prev__toggle-sub { font-size: 0.75rem; font-weight: 400; color: var(--al-text-muted); margin: 0; }

.al-prev__toggle-switch { background: none; border: none; cursor: pointer; padding: 4px; }
.al-prev__toggle-track { display: block; width: 44px; height: 24px; background: var(--al-border-strong); border-radius: 12px; position: relative; transition: background 0.2s; }
.al-prev__toggle-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--al-white); border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.al-prev__toggle-switch--on .al-prev__toggle-track { background: var(--al-black); }
.al-prev__toggle-switch--on .al-prev__toggle-thumb { transform: translateX(20px); background: var(--al-white); }

/* Image-adjustment sliders (custom uploads only — JS toggles `hidden`) */
.al-prev__sliders {
  padding: 14px 16px 12px;
  background: #f7f7f7;
  border: 1px solid var(--al-border);
  margin-bottom: 12px;
}
.al-prev__sliders[hidden] { display: none !important; }
.al-prev__sliders-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.al-prev__sliders-title {
  font-family: var(--al-font) !important;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--al-text);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.al-prev__sliders-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.al-prev__sliders-reset,
.al-prev__sliders-auto {
  background: none;
  border: 1px solid var(--al-border-strong);
  border-radius: 999px;
  color: var(--al-text);
  font-family: var(--al-font);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.al-prev__sliders-reset:hover,
.al-prev__sliders-reset:active,
.al-prev__sliders-auto:hover,
.al-prev__sliders-auto:active {
  background: var(--al-black);
  color: var(--al-white);
  border-color: var(--al-black);
}
/* Collapse/expand handle: always at the top of the panel. On tap, toggles
   the `is-minimized` class, which translates the panel down off-screen so
   only the handle remains visible at the bottom of the viewport. */
.al-prev__sliders-handle {
  display: block;
  width: 100%;
  padding: 6px 0 10px;
  margin: -10px 0 4px;
  background: none;
  border: 0;
  cursor: grab;
  touch-action: none;
}
.al-prev__sliders-handle:active { cursor: grabbing; }
.al-prev__sliders-handle-icon {
  display: block;
  width: 44px;
  height: 22px;
  margin: 0 auto;
  color: rgba(0, 0, 0, 0.45);
  transition: color 0.15s ease, transform 0.25s cubic-bezier(0.32, 0.72, 0.34, 1);
}
/* Chevron points UP when panel is expanded (tap/swipe down to close) and
   flips to point DOWN when minimized (tap/swipe up to open) — a live hint
   of the gesture direction that will open the other state. */
.al-prev__sliders.is-minimized .al-prev__sliders-handle-icon {
  transform: rotate(180deg);
}
.al-prev__sliders-handle:hover .al-prev__sliders-handle-icon,
.al-prev__sliders-handle:active .al-prev__sliders-handle-icon {
  color: rgba(0, 0, 0, 0.85);
}
.al-prev__slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}
.al-prev__slider-row label {
  width: 76px;
  flex-shrink: 0;
  font-family: var(--al-font);
  font-size: 0.78rem;
  color: var(--al-text);
  user-select: none;
}
.al-prev__slider-control {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 8px;
}
.al-prev__slider-step {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--al-border-strong);
  background: #fff;
  color: var(--al-text);
  font-family: var(--al-font);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.al-prev__slider-step:hover,
.al-prev__slider-step:active {
  background: var(--al-black);
  color: var(--al-white);
  border-color: var(--al-black);
}
.al-prev__slider-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 6px;
  background: var(--al-border-strong);
  border-radius: 3px;
  outline: none;
  margin: 0;
  cursor: pointer;
  /* Prevent page scroll while dragging slider horizontally on touch devices. */
  touch-action: pan-x;
}
.al-prev__slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--al-black);
  border: 2px solid var(--al-white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.32);
  cursor: pointer;
}
.al-prev__slider-row input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--al-black);
  border: 2px solid var(--al-white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.32);
  cursor: pointer;
}
.al-prev__slider-val {
  flex-shrink: 0;
  width: 34px;
  font-family: var(--al-font);
  font-size: 0.72rem;
  color: var(--al-text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* "Modify advanced" entry button — opens fullscreen where sliders live. */
.al-prev__modify-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--al-border-strong);
  border-radius: 999px;
  color: var(--al-text);
  font-family: var(--al-font);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: 12px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.al-prev__modify-btn[hidden] { display: none !important; }
.al-prev__modify-btn:hover,
.al-prev__modify-btn:active {
  background: var(--al-black);
  color: var(--al-white);
  border-color: var(--al-black);
}
.al-prev__modify-btn svg { flex-shrink: 0; }

/* Sliders sit inside the canvas wrap — hidden in the inline (non-fullscreen)
   view, overlay the canvas at the bottom when fullscreen. Dark styling because
   the fullscreen background is nearly black. */
.al-prev__3d-canvas-wrap .al-prev__sliders { display: none; }
.al-prev__3d-canvas-wrap--fullscreen .al-prev__sliders:not([hidden]) {
  display: block;
  position: absolute;
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
  left: 50%;
  transform: translate(-50%, 0);
  width: min(540px, calc(100vw - 32px));
  max-height: 50vh;
  overflow-y: auto;
  z-index: 6;
  padding: 8px 18px 16px;
  background: rgba(20, 20, 22, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  margin-bottom: 0;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0.34, 1);
}
/* Minimized: panel translates down so only the handle (top ~28px) peeks out at
   the bottom edge of the viewport. Sliders stop capturing pointer events. */
.al-prev__3d-canvas-wrap--fullscreen .al-prev__sliders.is-minimized {
  transform: translate(-50%, calc(100% - 28px));
}
.al-prev__3d-canvas-wrap--fullscreen .al-prev__sliders.is-minimized .al-prev__sliders-head,
.al-prev__3d-canvas-wrap--fullscreen .al-prev__sliders.is-minimized .al-prev__slider-row {
  pointer-events: none;
}
/* Make the handle's hit area bigger + fully clickable even when minimized. */
.al-prev__3d-canvas-wrap--fullscreen .al-prev__sliders.is-minimized .al-prev__sliders-handle {
  padding: 14px 0;
}
.al-prev__3d-canvas-wrap--fullscreen .al-prev__sliders-title { color: rgba(255, 255, 255, 0.95); }
.al-prev__3d-canvas-wrap--fullscreen .al-prev__sliders-reset,
.al-prev__3d-canvas-wrap--fullscreen .al-prev__sliders-auto {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.3);
}
.al-prev__3d-canvas-wrap--fullscreen .al-prev__sliders-reset:hover,
.al-prev__3d-canvas-wrap--fullscreen .al-prev__sliders-reset:active,
.al-prev__3d-canvas-wrap--fullscreen .al-prev__sliders-auto:hover,
.al-prev__3d-canvas-wrap--fullscreen .al-prev__sliders-auto:active {
  background: rgba(255, 255, 255, 0.95);
  color: #0a0a0a;
  border-color: rgba(255, 255, 255, 0.95);
}
.al-prev__3d-canvas-wrap--fullscreen .al-prev__sliders-handle-icon {
  color: rgba(255, 255, 255, 0.55);
}
.al-prev__3d-canvas-wrap--fullscreen .al-prev__sliders-handle:hover .al-prev__sliders-handle-icon,
.al-prev__3d-canvas-wrap--fullscreen .al-prev__sliders-handle:active .al-prev__sliders-handle-icon {
  color: rgba(255, 255, 255, 0.95);
}
.al-prev__3d-canvas-wrap--fullscreen .al-prev__slider-row label { color: rgba(255, 255, 255, 0.9); }
.al-prev__3d-canvas-wrap--fullscreen .al-prev__slider-row input[type="range"] { background: rgba(255, 255, 255, 0.25); }
.al-prev__3d-canvas-wrap--fullscreen .al-prev__slider-row input[type="range"]::-webkit-slider-thumb {
  background: #fff;
  border-color: #0a0a0a;
}
.al-prev__3d-canvas-wrap--fullscreen .al-prev__slider-row input[type="range"]::-moz-range-thumb {
  background: #fff;
  border-color: #0a0a0a;
}
.al-prev__3d-canvas-wrap--fullscreen .al-prev__slider-val { color: rgba(255, 255, 255, 0.8); }
.al-prev__3d-canvas-wrap--fullscreen .al-prev__slider-step {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.95);
}
.al-prev__3d-canvas-wrap--fullscreen .al-prev__slider-step:hover,
.al-prev__3d-canvas-wrap--fullscreen .al-prev__slider-step:active {
  background: rgba(255, 255, 255, 0.95);
  color: #0a0a0a;
  border-color: rgba(255, 255, 255, 0.95);
}

/* With sliders overlaid at the bottom, move the drag-hint to the top so it
   doesn't get covered. :has() gates this on sliders actually being visible. */
.al-prev__3d-canvas-wrap--fullscreen:has(.al-prev__sliders:not([hidden])) .al-prev__3d-hint {
  bottom: auto;
  top: max(14px, env(safe-area-inset-top, 14px));
}

/* Canvas stays full-viewport in fullscreen. The 3D camera's view offset is
   adjusted in JS (setViewOffset) when sliders are expanded so the model
   renders in the upper ~65% of the canvas instead of dead center — cleaner
   than shrinking the canvas, avoids visible black bars. */

/* Photo confirmation thumbnail (custom uploads only) */
.al-prev__photo-confirm {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #f7f7f7;
  border: 1px solid var(--al-border);
  margin-bottom: 12px;
}
.al-prev__photo-confirm img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: #eee;
}
.al-prev__photo-confirm-text {
  flex: 1;
  min-width: 0;
}
.al-prev__photo-confirm-title {
  font-family: var(--al-font) !important;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--al-text);
  margin: 0 0 2px;
}
.al-prev__photo-confirm-sub {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--al-text-secondary);
  margin: 0;
}

/* Add to Cart button on the 3D preview step */
.al-prev__btn-cart {
  margin-bottom: 8px;
  font-weight: 600;
}
.al-prev__btn-cart:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.al-prev__disclaimer {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--al-text-secondary);
  text-align: center;
  margin-top: 20px;
  padding: 14px 18px;
  border: 1px solid var(--al-border);
  background: #f7f7f7;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.01em;
}

.al-prev__disclaimer::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ------------------------------------------
   13. FAQ / Collapsible Content Overrides
   ------------------------------------------ */
.al-faq {
  padding: var(--al-section-spacing-mobile) 0;
}

@media screen and (min-width: 750px) {
  .al-faq {
    padding: var(--al-section-spacing-desktop) 0;
  }
}

/* Override Dawn's collapsible content styles */
.collapsible-content {
  background: var(--al-white) !important;
}

.collapsible-content__wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.collapsible-content summary {
  font-family: var(--al-font) !important;
  font-size: 1rem;
  font-weight: 500;
  color: var(--al-text);
  padding: 20px 0;
  border-bottom: 1px solid var(--al-border);
}

.collapsible-content .accordion__content {
  font-family: var(--al-font) !important;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--al-text-secondary);
  padding: 12px 0 24px;
}

/* ------------------------------------------
   14. Final CTA
   ------------------------------------------ */
.al-final-cta {
  padding: 80px 0;
  text-align: center;
  border-top: 1px solid var(--al-border);
}

@media screen and (min-width: 750px) {
  .al-final-cta {
    padding: 120px 0;
  }
}

.al-final-cta__heading {
  font-size: clamp(1.75rem, 5vw, 2.8rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--al-text);
  margin: 0 0 16px;
}

.al-final-cta__sub {
  font-size: 1rem;
  font-weight: 300;
  color: var(--al-text-secondary);
  margin: 0 auto 32px;
  max-width: 440px;
}

.al-final-cta__buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media screen and (max-width: 749px) {
  .al-final-cta__buttons {
    flex-direction: column;
    padding: 0 var(--al-page-padding);
  }
}

/* ------------------------------------------
   15. Header Overrides
   ------------------------------------------ */
.section-header {
  border-bottom: 1px solid var(--al-border);
}

.header-wrapper {
  background-color: var(--al-white) !important;
}

.header {
  padding: 8px 0;
}

@media screen and (min-width: 990px) {
  .header {
    padding: 10px 0;
  }
}

.header__heading-link {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header__heading-logo {
  max-width: 36px !important;
}

@media screen and (min-width: 750px) {
  .header__heading-logo {
    max-width: 40px !important;
  }
}

/* Nav link styles */
.header__menu-item,
.header__menu-item span {
  font-family: var(--al-font) !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--al-text) !important;
}

/* Remove underline animation */
.header__menu-item .header__active-menu-item {
  display: none;
}

/* Cart icon */
.header__icon {
  color: var(--al-text);
}

/* Mobile menu drawer */
.menu-drawer {
  background-color: var(--al-white) !important;
}

/* Kill the Dawn scrim-overlay pseudo-element on <header-drawer>. Dawn
   generates a 50%-black full-viewport scrim via `details[open] > summary::before`
   that can remain visible/clickable after the drawer starts closing, which
   makes the header menu reappear when tapping the blacked-out page area.
   We close via JS; the scrim adds no value and only causes the "black layer
   after tap" bug. Killed globally on our drawer tag. */
header-drawer > details > summary::before,
header-drawer > details[open] > summary::before,
menu-drawer > details > summary::before,
menu-drawer > details[open] > summary::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.menu-drawer__menu-item,
.menu-drawer .menu-drawer__menu-item.list-menu__item {
  font-family: var(--al-font) !important;
  font-size: 0.95rem !important;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.35;
  padding: 0.9rem 1.75rem !important;
  color: var(--al-text);
}

.menu-drawer__menu li + li .menu-drawer__menu-item {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.menu-drawer__menu-item:hover,
.menu-drawer__menu-item:focus {
  background-color: rgba(0, 0, 0, 0.03) !important;
  color: var(--al-text) !important;
}

/* ------------------------------------------
   16. Footer (al-footer custom)
   ------------------------------------------ */
.al-footer {
  background: var(--al-white);
  border-top: 1px solid var(--al-border);
  padding: 56px 0 24px;
  margin-top: 64px;
}

.al-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.al-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 24px;
}

@media screen and (min-width: 750px) {
  .al-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 48px;
  }
}

.al-footer__col--brand {
  grid-column: 1 / -1;
}

@media screen and (min-width: 750px) {
  .al-footer__col--brand {
    grid-column: auto;
  }
}

.al-footer__brand-link {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 12px;
}

.al-footer__brand-logo {
  width: 40px;
  height: auto;
  display: block;
}

.al-footer__brand-name {
  font-family: var(--al-font) !important;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--al-text);
}

.al-footer__tagline {
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--al-text-muted);
  margin: 0;
  max-width: 240px;
  line-height: 1.5;
}

.al-footer__heading {
  font-family: var(--al-font) !important;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--al-text);
  margin: 0 0 16px;
}

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

.al-footer__links a {
  font-family: var(--al-font) !important;
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--al-text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.al-footer__links a:hover {
  color: var(--al-text);
}

/* --- Email signup --- */
.al-footer__signup {
  border-top: 1px solid var(--al-border);
  border-bottom: 1px solid var(--al-border);
  padding: 32px 0;
}

.al-footer__signup-inner {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.al-footer__signup-label {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--al-text);
  margin: 0 0 16px;
}

.al-footer__signup-form {
  display: flex;
  gap: 8px;
}

.al-footer__signup-input {
  flex: 1;
  min-width: 0;
  font-family: var(--al-font) !important;
  font-size: 0.875rem;
  padding: 12px 14px;
  border: 1px solid var(--al-border-strong);
  background: var(--al-white);
  color: var(--al-text);
  border-radius: 0;
  outline: none;
  transition: border-color 0.15s;
}

.al-footer__signup-input:focus {
  border-color: var(--al-text);
}

.al-footer__signup-btn {
  font-family: var(--al-font) !important;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 20px;
  background: var(--al-black);
  color: var(--al-white);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.al-footer__signup-btn:hover {
  background: #333;
}

.al-footer__signup-success {
  font-size: 0.8125rem;
  color: var(--al-text);
  margin: 12px 0 0;
}

/* --- Bottom bar --- */
.al-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  flex-wrap: wrap;
  gap: 16px;
}

.al-footer__copy {
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--al-text-muted);
  margin: 0;
}

.al-footer__social {
  color: var(--al-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}

.al-footer__social:hover {
  color: var(--al-text);
  background: rgba(0, 0, 0, 0.04);
}

/* ------------------------------------------
   17. Product Page Overrides
   ------------------------------------------ */
.product__title {
  font-family: var(--al-font) !important;
  font-size: 1.75rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}

.product__text,
.product__description {
  font-family: var(--al-font) !important;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--al-text-secondary);
}

.price-item--regular,
.price-item--sale {
  font-family: var(--al-font) !important;
  font-size: 1.25rem;
  font-weight: 500;
}

.price-item--regular s {
  font-weight: 300;
  color: var(--al-text-muted);
}

/* Buy button */
.product-form__submit {
  font-family: var(--al-font) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  min-height: 52px;
  border-radius: 0 !important;
}

/* Product media */
.product__media-wrapper {
  border-radius: 0 !important;
}

/* ------------------------------------------
   18. Cart Drawer Overrides
   ------------------------------------------ */
.cart-drawer {
  background-color: var(--al-white) !important;
}

.cart-drawer__overlay {
  background-color: rgba(0, 0, 0, 0.4);
}

.drawer__heading {
  font-family: var(--al-font) !important;
  font-weight: 500;
}

.cart-item__name {
  font-family: var(--al-font) !important;
  font-weight: 400;
}

/* Cart checkout button */
.cart__ctas button,
.cart__ctas a {
  font-family: var(--al-font) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 0 !important;
}

/* Cart drawer inherits oversized heading scales from Dawn — explicit mobile
   sizes so product name doesn't wrap mid-word and totals don't look bloated.
   Selectors cover both the `<cart-drawer>` custom element and the `.cart-drawer`
   class because Dawn mixes them. */
@media screen and (max-width: 749px) {
  cart-drawer .drawer__inner,
  .cart-drawer .drawer__inner {
    padding: 0 1rem !important;
  }
  cart-drawer .drawer__heading,
  .cart-drawer .drawer__heading {
    font-size: 1.125rem !important;
    line-height: 1.2 !important;
    margin: 0 0 0.5rem !important;
  }
  cart-drawer .drawer__header,
  .cart-drawer .drawer__header {
    padding: 1rem 0 !important;
  }
  cart-drawer .cart-items th,
  .cart-drawer .cart-items th {
    font-size: 0.625rem !important;
    letter-spacing: 0.12em !important;
  }
  cart-drawer .cart-item__name,
  .cart-drawer .cart-item__name,
  .cart-drawer a.cart-item__name {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  cart-drawer .cart-item .price,
  .cart-drawer .cart-item .price,
  .cart-drawer .cart-item__totals .price,
  cart-drawer .cart-item__final-price,
  .cart-drawer .cart-item__final-price {
    font-size: 0.875rem !important;
  }
  cart-drawer .cart-item__media,
  .cart-drawer .cart-item__media {
    width: 104px !important;
    min-width: 104px !important;
  }
  cart-drawer .cart-item__image,
  .cart-drawer .cart-item__image {
    max-width: 104px !important;
    max-height: 104px !important;
  }
  /* The line-item price shown below the name (Dawn renders the price twice
     on mobile — again in the totals column). Hide the duplicate so only one
     right-aligned price shows, matches the header row. */
  cart-drawer .cart-item__price-wrapper,
  .cart-drawer .cart-item__price-wrapper {
    display: none !important;
  }
  /* Quantity: compact, not stretched across the full row. */
  cart-drawer .cart-item__quantity,
  .cart-drawer .cart-item__quantity {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  cart-drawer .quantity,
  .cart-drawer .quantity {
    width: 108px !important;
    min-height: 36px !important;
  }
  cart-drawer .quantity__button,
  .cart-drawer .quantity__button {
    width: 32px !important;
    min-width: 32px !important;
    font-size: 1rem !important;
  }
  cart-drawer .quantity__input,
  .cart-drawer .quantity__input {
    font-size: 0.875rem !important;
    min-width: 32px !important;
    padding: 0 !important;
  }
  cart-drawer .cart-remove-button,
  .cart-drawer .cart-remove-button {
    min-width: 36px !important;
    min-height: 36px !important;
    width: 36px !important;
    height: 36px !important;
  }
  cart-drawer .cart-remove-button .icon,
  cart-drawer .cart-remove-button svg,
  .cart-drawer .cart-remove-button svg {
    width: 14px !important;
    height: 14px !important;
  }
  cart-drawer .totals,
  .cart-drawer .totals {
    font-size: 0.8125rem !important;
  }
  cart-drawer .totals__total,
  cart-drawer .totals__total-value,
  .cart-drawer .totals__total,
  .cart-drawer .totals__total-value {
    font-size: 0.9375rem !important;
  }
  cart-drawer .tax-note,
  .cart-drawer .tax-note {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
  }
  cart-drawer .cart-drawer__footer,
  .cart-drawer__footer {
    padding: 0.875rem 1rem !important;
  }
  cart-drawer .cart__ctas .button,
  cart-drawer .cart__ctas button,
  cart-drawer .cart__ctas a,
  .cart-drawer .cart__ctas button,
  .cart-drawer .cart__ctas a {
    font-size: 0.8125rem !important;
    padding: 12px 16px !important;
    min-height: 0 !important;
  }
}

/* ------------------------------------------
   19. Sticky Mobile CTA — removed 2026-04-19.
   Redundant with the Signature card Add to Cart and the previewer's
   Upload Your Photo button. Bar markup removed from layout/theme.liquid
   and the init function stripped from anchorlabs-custom.js.
   ------------------------------------------ */

/* ------------------------------------------
   20. Scroll Animations — DISABLED 2026-04-19
   Reveal-on-scroll caused a noticeable "pop in" delay on mobile as users
   scrolled to each section. Elements now render visible immediately; the
   IntersectionObserver in anchorlabs-custom.js still toggles
   .al-animate--visible but it's now a no-op visually.
   ------------------------------------------ */
.al-animate,
.al-animate--stagger > * {
  opacity: 1;
  transform: none;
  transition: none;
}
.al-animate--visible,
.al-animate--stagger.al-animate--visible > * {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------
   21. Contact Form Overrides
   ------------------------------------------ */
.contact .field__input,
.contact .field__textarea {
  font-family: var(--al-font) !important;
  border-radius: 0;
}

.contact .button {
  border-radius: 0 !important;
}

/* ------------------------------------------
   22. Customer Account Page Overrides
   ------------------------------------------ */
.customer .field input,
.customer .field select {
  font-family: var(--al-font) !important;
  border-radius: 0;
}

/* ------------------------------------------
   23. Utility
   ------------------------------------------ */
.al-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.al-text-center { text-align: center; }
.al-text-left { text-align: left; }

/* ------------------------------------------
   Customer Reviews Section (al-reviews)
   ------------------------------------------ */
.al-reviews {
  padding: var(--al-section-spacing-mobile) 0;
  background-color: var(--al-white);
}

@media screen and (min-width: 750px) {
  .al-reviews {
    padding: var(--al-section-spacing-desktop) 0;
  }
}

.al-reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media screen and (min-width: 750px) {
  .al-reviews__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.al-reviews__card {
  position: relative;
  border: 1px solid var(--al-border);
  padding: 32px 28px 28px;
  margin: 0;
  background: var(--al-white);
  transition: border-color 0.2s ease, transform 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.al-reviews__card:hover {
  border-color: var(--al-border-strong);
}

@media screen and (min-width: 750px) {
  .al-reviews__card {
    padding: 36px 32px 32px;
  }
}

.al-reviews__mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.25rem;
  line-height: 0.5;
  color: var(--al-text);
  opacity: 0.12;
  margin-top: 8px;
  user-select: none;
  pointer-events: none;
}

.al-reviews__quote {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--al-text);
  margin: 0;
  letter-spacing: -0.005em;
  flex-grow: 1;
}

@media screen and (min-width: 750px) {
  .al-reviews__quote {
    font-size: 1.0625rem;
    line-height: 1.65;
  }
}

.al-reviews__attr {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--al-text-secondary);
  letter-spacing: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.al-reviews__name {
  color: var(--al-text);
  font-weight: 500;
}

.al-reviews__dot {
  color: var(--al-border-strong);
}

.al-reviews__loc {
  color: var(--al-text-muted);
}

/* ------------------------------------------
   Product-card + Previewer: timeline line
   (small under-price line stating production + shipping)
   ------------------------------------------ */
.al-product-card__timeline,
.al-prev__timeline {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--al-text-muted);
  letter-spacing: 0.02em;
  margin: 0 0 14px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 6px;
}

.al-product-card__timeline svg,
.al-prev__timeline svg {
  flex-shrink: 0;
  opacity: 0.85;
  color: var(--al-text-secondary);
}

.al-prev__timeline {
  color: rgba(255, 255, 255, 0.6);
  justify-content: center;
  margin: 0 0 12px;
  text-align: center;
}

.al-prev__timeline svg {
  color: rgba(255, 255, 255, 0.75);
}

/* Hide sections we don't use */
.shopify-section--announcement-bar {
  display: none !important;
}

/* ALHIDE selector: .al-section--reviews, [id*="__reviews"].shopify-section */
/* Stuck in Shopify customizer snapshot cache (Bug 3). Hidden here because
   CSS propagates reliably where template changes don't. Added 2026-04-17. */
.al-section--reviews,
[id*="__reviews"].shopify-section {
  display: none !important;
}

/* ------------------------------------------
   Previewer step 1: sample gallery
   2x2 grid (4 samples), square thumbs with warm-toned borders.
   Redesigned 2026-04-19 to match the site's white-background treatment.
   ------------------------------------------ */
.al-prev__samples { margin: 0 0 24px; }

.al-prev__samples-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 420px;
  margin: 0 auto;
}

.al-prev__sample {
  background: var(--al-white);
  border: 1px solid rgba(232, 169, 74, 0.25);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  text-align: center;
  display: block;
}
.al-prev__sample:hover {
  border-color: var(--al-accent-warm);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.al-prev__sample--loading {
  pointer-events: none;
}
.al-prev__sample--loading .al-prev__sample-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}
.al-prev__sample--loading .al-prev__sample-thumb::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: al-spin 0.8s linear infinite;
  z-index: 2;
}
@keyframes al-spin {
  to { transform: rotate(360deg); }
}

.al-prev__sample-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f5f5f5;
}
.al-prev__sample-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.al-prev__sample-name {
  display: block;
  padding: 8px 6px 10px;
  font-family: var(--al-font) !important;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--al-text-muted);
  letter-spacing: 0.02em;
}

/* Trust line — kept for legacy reference by other templates. Step 1 uses
   .al-prev__caption now. */
.al-prev__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--al-text-muted);
  margin: 16px 0 0;
  letter-spacing: 0.01em;
}
.al-prev__trust svg {
  flex-shrink: 0;
  color: var(--al-text-muted);
}

/* Step 1 caption under the Upload button — muted privacy line. */
.al-prev__caption {
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 400;
  font-style: italic;
  color: var(--al-text-muted);
  margin: 10px 0 0;
  letter-spacing: 0.01em;
}

/* Trust bar mobile: keep default 2x2 grid from the base rules above.
   (Earlier experimental horizontal-scroll override removed 2026-04-18.) */

/* ------------------------------------------
   Signature Collection heading
   Replaces .al-section-heading--small for this one heading — it needs to
   read as a section headline, not a subsection label.
   ------------------------------------------ */
.al-signature-heading-wrap {
  margin: 8px 0 28px;
  text-align: center;
  scroll-margin-top: 80px;
}
.al-signature-heading {
  font-family: var(--al-font-display, var(--al-font), 'Inter', sans-serif);
  font-size: clamp(1.75rem, 6.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--al-text);
  margin: 0;
  line-height: 1.05;
}
@media screen and (min-width: 750px) {
  .al-signature-heading-wrap {
    margin: 16px 0 32px;
  }
}

/* 3D previewer section heading — one heading + one sub, matched to the
   site's other headline treatments (redesigned 2026-04-19). */
.al-prev__section-heading-wrap {
  margin: 0 0 28px;
  text-align: center;
  scroll-margin-top: 80px;
}
.al-prev__section-heading {
  font-family: var(--al-font-display, var(--al-font), 'Inter', sans-serif);
  font-size: clamp(1.5rem, 5.5vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--al-text);
  margin: 0 0 10px;
  line-height: 1.15;
}
.al-prev__section-sub {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--al-text-secondary);
  margin: 0;
  line-height: 1.5;
}
@media screen and (min-width: 750px) {
  .al-prev__section-heading-wrap {
    margin: 0 0 40px;
  }
}

/* ------------------------------------------
   Customer account pages — Anchor Labs skin
   2026-04-18 site-wide restructure.
   ------------------------------------------ */
.al-account {
  max-width: 1080px;
  margin: 0 auto;
  font-family: var(--al-font, 'Inter', sans-serif);
  color: var(--al-text, #111);
}

.al-account__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 32px;
}

.al-account__eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(0,0,0,0.55);
  margin: 0 0 6px;
}

.al-account__title {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.al-account__logout {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(0,0,0,0.6);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 0;
  white-space: nowrap;
}
.al-account__logout:hover { color: #111; }

.al-account__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media screen and (min-width: 900px) {
  .al-account__body {
    grid-template-columns: 2fr 1fr;
    gap: 56px;
  }
}

.al-account__h2 {
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 20px;
}

.al-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.al-orders-table thead th {
  text-align: left;
  padding: 10px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0,0,0,0.55);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.al-orders-table tbody td {
  padding: 14px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  vertical-align: middle;
}
.al-orders-table tbody tr:last-child td {
  border-bottom: 0;
}
.al-orders-table a {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.al-orders-table__track {
  font-weight: 500;
}
.al-orders-table__pending {
  color: rgba(0,0,0,0.45);
  font-size: 0.82rem;
}

@media screen and (max-width: 749px) {
  .al-orders-table { font-size: 0.85rem; }
  .al-orders-table thead { display: none; }
  .al-orders-table, .al-orders-table tbody, .al-orders-table tr, .al-orders-table td {
    display: block;
    width: 100%;
  }
  .al-orders-table tr {
    border: 1px solid rgba(0,0,0,0.08);
    padding: 12px 14px;
    margin-bottom: 12px;
    border-radius: 4px;
  }
  .al-orders-table td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    border: 0;
  }
  .al-orders-table td::before {
    content: attr(data-label);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(0,0,0,0.5);
  }
}

.al-account__empty {
  padding: 40px 20px;
  text-align: center;
  border: 1px dashed rgba(0,0,0,0.12);
  border-radius: 4px;
}
.al-account__empty p {
  margin: 0 0 16px;
  color: rgba(0,0,0,0.55);
}

.al-account__details {
  font-size: 0.9rem;
  line-height: 1.55;
}
.al-account__address {
  color: rgba(0,0,0,0.7);
  margin-bottom: 14px;
}
.al-account__addresses-link {
  font-size: 0.85rem;
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------
   Public Order Tracking page (/pages/track-order)
   ------------------------------------------ */
.al-track {
  max-width: 520px;
  margin: 0 auto;
  padding: 32px 20px 64px;
  font-family: var(--al-font, 'Inter', sans-serif);
  color: var(--al-text, #111);
}
.al-track__eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(0,0,0,0.55);
  margin: 0 0 8px;
  text-align: center;
}
.al-track__title {
  font-size: clamp(1.75rem, 6vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 10px;
}
.al-track__sub {
  text-align: center;
  color: rgba(0,0,0,0.6);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 28px;
}
.al-track__form { display: grid; gap: 14px; }
.al-track__field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0,0,0,0.6);
  margin-bottom: 6px;
}
.al-track__field input {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
}
.al-track__field input:focus {
  outline: none;
  border-color: #111;
}
.al-track__submit {
  margin-top: 6px;
  padding: 14px;
  background: #111;
  color: #fff;
  border: 0;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
}
.al-track__submit:hover { background: #000; }
.al-track__hint {
  font-size: 0.82rem;
  color: rgba(0,0,0,0.55);
  text-align: center;
  margin-top: 20px;
}
.al-track__hint a {
  color: #111;
  text-decoration: underline;
}
.al-track__error {
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.35);
  color: #9e1c28;
  padding: 12px 14px;
  font-size: 0.9rem;
  border-radius: 3px;
  margin-bottom: 16px;
}

/* Cart mobile layout — wipe Dawn's 4-col grid cleanly and stack details
   vertically in the right column. Dawn's own mobile rules at
   component-cart-items.css:241-276 set grid-column/grid-row explicitly on
   details/quantity/totals referencing column lines 4-5; those carry over
   when we narrow the grid and cause overlap. `.cart-items .cart-item`
   selector raises specificity above Dawn's `.cart-item`. */
@media screen and (max-width: 749px) {
  .cart-items .cart-item {
    display: grid;
    grid-template: none;
    grid-template-columns: 88px 1fr;
    grid-auto-rows: auto;
    column-gap: 1.2rem;
    row-gap: 0.8rem;
    min-width: 0;
  }
  .cart-items .cart-item > * { min-width: 0; max-width: 100%; }

  .cart-items .cart-item__media {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 88px;
  }
  .cart-items .cart-item__media img,
  .cart-items .cart-item__media svg {
    width: 100%;
    max-width: 88px;
    height: auto;
  }

  .cart-items .cart-item__details {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .cart-items .cart-item__name {
    font-size: 1.4rem;
    line-height: 1.35;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .cart-items .cart-item__totals {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    text-align: left;
  }
  .cart-items .cart-item__price-wrapper,
  .cart-items .cart-item__price-wrapper * { word-break: normal; }

  .cart-items .cart-item__quantity {
    grid-column: 1 / -1;
    grid-row: 3;
    padding-left: 0;
  }
}

/* ============================================
   2026-04-18 Polish pass — shared infrastructure
   ============================================ */

/* ------------------------------------------
   A. Black highlight chip (reusable)
   Shared base — modifier classes (--lg / --xl / --trust) can be used
   standalone without also needing .al-chip--dark on the element.
   ------------------------------------------ */
.al-chip--dark,
.al-chip--dark--lg,
.al-chip--dark--xl,
.al-chip--dark--trust {
  display: inline-block;
  background: var(--al-black);
  color: var(--al-white);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
  text-transform: none;
  text-decoration: none;
}

.al-chip--dark {
  padding: 4px 10px;
  font-size: 0.92em;
  border-radius: 4px;
}

.al-chip--dark--lg {
  padding: 8px 16px;
  font-size: 1rem;
  border-radius: 5px;
}

.al-chip--dark--xl {
  padding: 10px 20px;
  font-size: 1.125rem;
  border-radius: 6px;
  font-weight: 600;
}

.al-chip--dark--trust {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 0.95rem;
  border-radius: 5px;
}

.al-chip--dark--trust svg {
  color: var(--al-white);
  flex-shrink: 0;
}

/* Previewer was previously dark-bg and inverted chips to white/black. As of
   2026-04-19 the previewer is white-bg, so chips use the base styling.
   Overrides retained only if a dark chip is reintroduced later. */

/* Green "save" chip for discount emphasis — positive / benefit framing. */
.al-chip--save {
  display: inline-block;
  padding: 4px 10px;
  background: var(--al-good, #1aa260);
  color: var(--al-white, #fff);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  border-radius: 4px;
  line-height: 1.3;
  text-transform: uppercase;
}

/* ------------------------------------------
   B. Trust bar — outlined box (black border + black text, no fill)
   ------------------------------------------ */
.al-trust__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--al-black);
  padding: 8px 14px;
  border: 1.5px solid var(--al-black);
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  line-height: 1.3;
  margin-bottom: 10px;
}

.al-trust__chip .al-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  color: var(--al-black);
}

.al-trust__chip .al-trust__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}

.al-trust__chip .al-trust__title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
}

@media screen and (max-width: 749px) {
  .al-trust__chip {
    font-size: 0.82rem;
    padding: 6px 10px;
    gap: 6px;
  }
  .al-trust__chip .al-trust__icon {
    width: 16px;
    height: 16px;
  }
}

/* ------------------------------------------
   C. Reveal slider — tighter spacing when subheading removed
   ------------------------------------------ */
.al-reveal .al-section-header {
  margin-bottom: 32px;
}

@media screen and (min-width: 750px) {
  .al-reveal .al-section-header {
    margin-bottom: 40px;
  }
}

.al-reveal .al-section-kicker {
  margin-bottom: 18px;
}

.al-reveal .al-section-heading {
  margin-bottom: 0;
}

/* ------------------------------------------
   D. 3D previewer — step 1 (choose)
   Previewer shell redesigned to white-bg on 2026-04-19. Sample grid is
   2-column (see .al-prev__samples-row above), upload button is solid black
   primary, privacy line is a muted italic caption.
   ------------------------------------------ */

/* Cart-note disclaimer under the Add to Cart button on custom orders */
.al-prev__cart-note {
  font-size: 0.8rem;
  color: var(--al-text-secondary);
  text-align: center;
  margin: 10px 0 14px;
  line-height: 1.4;
  font-weight: 400;
}

/* Center the upload button + caption block. */
.al-prev__options {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Primary upload button — full-width, black, same weight as Add to Cart. */
.al-prev__upload-btn--primary {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  background: var(--al-black) !important;
  color: var(--al-white) !important;
  border: none !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: 54px !important;
}

.al-prev__upload-btn--primary:hover {
  background: #222 !important;
}

/* ------------------------------------------
   E. Transition divider (previewer → signature)
   Full-width lines above and below the heading. Heading is larger than the
   Signature Collection heading below so the hierarchy reads "this is the
   main thing, signature collection is one option below".
   ------------------------------------------ */
.al-transition-divider {
  text-align: center;
  padding: 48px 0 32px;
  margin: 0 auto;
  max-width: 1200px;
}

.al-transition-divider__heading {
  display: block;
  margin: 18px auto;
  color: var(--al-black);
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.al-transition-divider__line {
  width: 0;
  height: 2px;
  background: var(--al-black);
  margin: 0 auto;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s;
}

.al-transition-divider.al-animate--visible .al-transition-divider__line {
  width: 92%;
}

@media screen and (min-width: 750px) {
  .al-transition-divider {
    padding: 72px 0 48px;
  }
  .al-transition-divider.al-animate--visible .al-transition-divider__line {
    width: 72%;
  }
}

/* ------------------------------------------
   F. Signature heading — secondary (smaller than the transition heading)
   Single line on mobile, no wrapping. Readable but clearly subordinate.
   ------------------------------------------ */
.al-signature-heading {
  display: inline-block;
  white-space: nowrap;
}

.al-signature-heading .al-chip--dark--xl {
  font-size: clamp(1rem, 3.6vw, 1.35rem);
  font-weight: 600;
  padding: 7px 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.al-signature-heading-wrap {
  margin-top: 8px !important;
  margin-bottom: 32px !important;
}

@media screen and (min-width: 750px) {
  .al-signature-heading-wrap {
    margin-top: 16px !important;
    margin-bottom: 40px !important;
  }
}

/* Signature product titles — chip wrapped */
.al-product-card__info h4 .al-chip--dark {
  font-size: 1.05rem;
  padding: 6px 12px;
}

/* Product card prices — current is large black text; compare is smaller + struck */
.al-product-card__price .al-price--current {
  color: var(--al-black);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.al-product-card__price .al-price--compare {
  color: var(--al-black);
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.6;
  text-decoration: line-through;
}

.al-product-card__price {
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}

/* Tappable carousel slide */
.al-product-card__carousel {
  cursor: zoom-in;
}

/* ------------------------------------------
   G. Specs section — "IN THE BOX" big-caps kicker, smaller heading,
   and always-side-by-side compact highlighted boxes (so the whole
   section fits on one mobile screen without scrolling).
   ------------------------------------------ */
.al-specs__kicker {
  font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--al-black) !important;
  margin: 0 0 8px !important;
  line-height: 1.05;
}

.al-specs__heading {
  font-size: clamp(0.95rem, 2.6vw, 1.1rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  color: var(--al-text-secondary);
  margin: 0 0 12px !important;
  text-transform: none;
}

.al-section-header--specs {
  margin-bottom: 24px !important;
  padding-top: 28px;
  border-top: 1px solid var(--al-black);
}

.al-specs .al-specs__visual {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--al-black);
  margin-bottom: 32px;
}

.al-specs__box-diagram {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto;
}

@media screen and (min-width: 750px) {
  .al-specs__box-diagram {
    gap: 20px;
  }
}

.al-specs__box-item--highlighted {
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 18px 12px;
  border-radius: 8px;
  text-align: center;
}

@media screen and (min-width: 750px) {
  .al-specs__box-item--highlighted {
    padding: 24px 18px;
  }
}

/* Shrink the original icon inside the compact box */
.al-specs__box-item--highlighted .al-specs__box-icon {
  width: 32px;
  height: 32px;
  margin: 0 auto 8px;
}

.al-specs__box-item--highlighted .al-specs__box-icon svg {
  width: 100%;
  height: 100%;
}

/* Spec box titles — compact chip, readable regardless of parent's tiny font */
.al-specs__box-title {
  font-size: 0.9rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--al-text);
  margin: 0 0 4px;
}

.al-specs__box-title .al-chip--dark--lg {
  font-size: 0.82rem;
  padding: 5px 10px;
  border-radius: 4px;
}

.al-specs__box-desc {
  font-size: 0.78rem;
  color: var(--al-text-muted);
  margin: 0;
}

/* Plain black labels + values in the spec list — no chip highlight */
.al-specs__list .al-specs__label {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--al-black) !important;
}

.al-specs__list .al-specs__value {
  font-size: 0.9rem !important;
  color: var(--al-black) !important;
  font-weight: 400;
  text-align: right;
}

/* ------------------------------------------
   H. FAQ — plain black bold question text (no chip)
   Scoped to .collapsible-content so product-page accordions aren't affected.
   ------------------------------------------ */
.collapsible-content .accordion details .accordion__title {
  color: var(--al-black) !important;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  margin: 0;
  letter-spacing: 0;
}

.collapsible-content .accordion summary .icon-caret {
  color: var(--al-text);
  flex-shrink: 0;
}

.collapsible-content .accordion summary {
  align-items: center;
}

.collapsible-content__heading {
  color: var(--al-black) !important;
  font-size: clamp(1.5rem, 5vw, 2.2rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

/* ------------------------------------------
   I. Add-to-cart green success state
   ------------------------------------------ */
.al-btn--added,
.al-btn--added:hover,
.al-btn--added:focus,
button.al-btn--added {
  background-color: #1aa260 !important;
  color: #ffffff !important;
  transition: background-color 0.25s ease;
}

.al-btn--added::before {
  content: "\2713\00a0";
  display: inline-block;
  margin-right: 2px;
  animation: al-check-pop 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes al-check-pop {
  0% { transform: scale(0.4); opacity: 0; }
  55% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.al-btn--error {
  background-color: #c0392b !important;
  color: #ffffff !important;
}

/* ------------------------------------------
   J. Photo lightbox (shared)
   ------------------------------------------ */
.al-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.al-lightbox.al-lightbox--open {
  display: flex;
  opacity: 1;
}

.al-lightbox__figure {
  position: relative;
  max-width: 92vw;
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.al-lightbox__img {
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.al-lightbox__close,
.al-lightbox__nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
  z-index: 2;
}

.al-lightbox__close:hover,
.al-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.25);
}

.al-lightbox__close {
  top: 16px;
  right: 16px;
}

.al-lightbox__nav--prev { left: 12px; top: 50%; transform: translateY(-50%); }
.al-lightbox__nav--next { right: 12px; top: 50%; transform: translateY(-50%); }

.al-lightbox__nav[hidden] { display: none; }

.al-lightbox__close svg,
.al-lightbox__nav svg { width: 20px; height: 20px; }

@media screen and (min-width: 750px) {
  .al-lightbox__close { top: 24px; right: 24px; width: 48px; height: 48px; }
  .al-lightbox__nav { width: 48px; height: 48px; }
  .al-lightbox__nav--prev { left: 24px; }
  .al-lightbox__nav--next { right: 24px; }
}

body.al-lightbox-open { overflow: hidden; }


/* ========================================================================
   MOBILE CRITIQUE — Global design system (Fraunces + step headers + display)
   ======================================================================== */

:root {
  --al-font-serif: 'Fraunces', Georgia, serif;
  --al-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --al-ink: #0e0e0e;
  --al-paper: #fafaf8;
  --al-mute: #6b6b68;
  --al-good: #1aa260;
  --al-warn: #b8860b;
  --al-bad: #c0392b;
  --al-dark-surface: #0a0a0a;
  --al-dark-border: rgba(255, 255, 255, 0.12);
  --al-dark-mute: rgba(255, 255, 255, 0.62);
  --al-dark-faint: rgba(255, 255, 255, 0.4);
}

/* Step header — replaces black-chip kickers site-wide. */
.al-step { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.al-step__num {
  font-family: var(--al-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
  white-space: nowrap;
}
.al-step__line { flex: 1; height: 1px; background: rgba(0, 0, 0, 0.12); }
.al-step--dark .al-step__num { color: rgba(255, 255, 255, 0.55); }
.al-step--dark .al-step__line { background: var(--al-dark-border); }

/* Display heading — Fraunces 32/400 with italic second clause. */
.al-display {
  font-family: var(--al-font-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 6vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
  color: currentColor;
}
/* Italic portion of display headings reads as the bold emphasis — darker
   than the first clause and weight 700. */
.al-display em { font-style: italic; color: var(--al-ink, #0a0a0a); font-weight: 700; }
.al-display--dark em { color: #fff; font-weight: 700; }

.al-display__sub {
  font-size: 13.5px;
  line-height: 1.5;
  color: #666;
  margin: 0 0 22px;
  max-width: 280px;
}
.al-display--dark + .al-display__sub,
.al-display__sub--dark { color: var(--al-dark-mute); }

/* ========================================================================
   MOBILE CRITIQUE — 3D Previewer step 1 (upload-first, LIGHT theme)
   ======================================================================== */
.al-prev__step--critique { padding: 48px 18px 36px; color: var(--al-text, #0e0e0e); }
.al-prev__step--critique .al-step { margin-bottom: 14px; }
.al-prev__step--critique .al-display { color: var(--al-text, #0e0e0e); margin-bottom: 6px; }
.al-prev__step--critique .al-display__sub { color: #666; max-width: 320px; margin-bottom: 22px; }

.al-prev__upload-zone {
  position: relative;
  border: 1px dashed rgba(0, 0, 0, 0.22);
  border-radius: 18px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  background: radial-gradient(120% 80% at 50% 0%, rgba(0, 0, 0, 0.03), transparent 60%);
  transition: border-color 0.2s ease, background-color 0.2s ease;
  margin-bottom: 14px;
  cursor: pointer;
}
.al-prev__upload-zone:hover,
.al-prev__upload-zone:focus-within { border-color: rgba(0, 0, 0, 0.45); }
/* While the user is dragging a file over the zone — clear visual target. */
.al-prev__upload-zone.is-dragging {
  border-color: rgba(0, 0, 0, 0.7);
  border-style: solid;
  background-color: rgba(0, 0, 0, 0.04);
}

.al-prev__upload-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--al-text, #0e0e0e);
}

.al-prev__upload-title { font-size: 15px; font-weight: 600; text-align: center; color: var(--al-text, #0e0e0e); }
.al-prev__upload-hint {
  font-size: 11.5px;
  color: #777;
  text-align: center;
  line-height: 1.4;
  margin: 0;
  max-width: 260px;
}

.al-prev__upload-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}
.al-prev__upload-action {
  flex: 1;
  padding: 11px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-align: center;
  background: #fff;
  color: var(--al-text, #0e0e0e);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.al-prev__upload-action:hover,
.al-prev__upload-action:focus-visible {
  background: #f4f3ee;
  border-color: rgba(0, 0, 0, 0.3);
}
.al-prev__step--critique .al-prev__upload-input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.al-prev__privacy {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #fafaf6;
  margin-bottom: 20px;
}
.al-prev__privacy-lock {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(26, 162, 96, 0.12);
  color: var(--al-good, #1aa260);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.al-prev__privacy-text { font-size: 12px; color: #444; line-height: 1.45; }
.al-prev__privacy-text strong { color: var(--al-text, #0e0e0e); font-weight: 600; }

.al-prev__sample-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #999;
  font-family: var(--al-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 10px 0 14px;
}
.al-prev__sample-divider-line { flex: 1; height: 1px; background: rgba(0, 0, 0, 0.1); }

.al-prev__samples--scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -18px;
  padding: 0 18px 4px;
}
.al-prev__samples--scroll::-webkit-scrollbar { display: none; }
.al-prev__samples--scroll .al-prev__sample {
  flex: 0 0 28%;
  min-width: 120px;
  scroll-snap-align: start;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--al-text, #0e0e0e);
  text-align: left;
  cursor: pointer;
}
.al-prev__samples--scroll .al-prev__sample-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: #222;
  position: relative;
}
.al-prev__samples--scroll .al-prev__sample-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.al-prev__samples--scroll .al-prev__sample-name {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-size: 10.5px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
/* Name is absolutely positioned over the thumb — keep the thumb itself a positioning root. */
.al-prev__samples--scroll .al-prev__sample { position: relative; }

@media screen and (min-width: 750px) {
  .al-prev__step--critique { padding: 72px 32px 64px; max-width: 640px; margin: 0 auto; }
  .al-prev__samples--scroll {
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding: 0;
  }
  .al-prev__samples--scroll .al-prev__sample { flex: none; min-width: 0; }
}

/* ========================================================================
   MOBILE CRITIQUE — Small floating "Customise" pill
   Small, quiet, bottom-right. No price, no large bar. Fades in after the
   user has scrolled past the hero; fades out when the Final CTA is in view.
   ======================================================================== */
.al-sticky-cta {
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom, 18px));
  right: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px 0 20px;
  background: #0a0a0a;
  color: #fff;
  border-radius: 999px;
  font-family: var(--al-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.al-sticky-cta:hover,
.al-sticky-cta:focus-visible {
  color: #fff;
  background: #1a1a1a;
  transform: translateY(-2px);
}
.al-sticky-cta--visible { opacity: 1; transform: none; pointer-events: auto; }
.al-sticky-cta--hidden { opacity: 0 !important; pointer-events: none; transform: translateY(12px); }

.al-sticky-cta__label { font-weight: 500; }
.al-sticky-cta__arrow { color: inherit; transition: transform 0.2s ease; }
.al-sticky-cta:hover .al-sticky-cta__arrow { transform: translateX(3px); }

/* Desktop: hide — the header + hero CTAs carry the weight on wider screens. */
@media screen and (min-width: 750px) {
  .al-sticky-cta { display: none; }
}

/* ========================================================================
   MOBILE CRITIQUE — Specs / In the Box (render + pinned dl)
   ======================================================================== */
.al-specs--critique { background: #fafaf6; padding: 56px 0 48px; }
.al-specs--critique .al-specs__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--al-page-padding, 20px);
}
.al-specs--critique .al-specs__h2 { margin-bottom: 6px; }
.al-specs--critique .al-specs__sub { color: #666; margin-bottom: 22px; max-width: 320px; }

/* In-the-Box render container: matches the product photo's aspect ratio
   (896 × 1195 ≈ 3:4) so the full LightBox + power adapter shot shows
   uncropped. Light beige background to blend with the photo's background. */
.al-specs__render {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 896 / 1195;
  margin: 0 auto 20px;
  background: #f4f3ee;
  border-radius: 14px;
  overflow: hidden;
}
.al-specs__render-frame {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
/* Pins: dark semi-transparent bg + thin white ring so they're readable on
   the light product photo. */
.al-specs__pin {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--al-font-mono);
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
/* Pin positions on the real IMG_3674 photo (896×1195): LightBox sits upper-
   left, power adapter sits mid-right with its coiled cable below. */
.al-specs__pin--1 { top: 30%; left: 30%; }
.al-specs__pin--2 { top: 43%; left: 71%; }

.al-specs__pin-legend {
  position: absolute;
  left: 14px;
  bottom: 12px;
  right: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--al-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.al-specs__pin-legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 6px;
  background: rgba(10, 10, 10, 0.82);
  color: #fff;
  border-radius: 999px;
  width: fit-content;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.al-specs__pin-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-size: 10px;
  font-weight: 600;
  color: #fff;
}

.al-specs__dl { margin: 0; }
.al-specs__row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  align-items: baseline;
}
.al-specs__dt {
  font-family: var(--al-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888;
  font-weight: 500;
  margin: 0;
}
.al-specs__dt-num { margin-right: 6px; color: #555; }
.al-specs__dd { margin: 0; color: #111; font-weight: 500; line-height: 1.4; font-size: 13px; }

@media screen and (min-width: 750px) {
  .al-specs--critique { padding: 96px 0 80px; }

  /* Two-column layout on desktop: heading spans full width on top, render
     image sits left, spec list sits right — so the portrait image doesn't
     dwarf the text stack on a wide viewport. */
  .al-specs--critique .al-specs__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 56px;
    row-gap: 0;
  }
  .al-specs--critique .al-step,
  .al-specs--critique .al-specs__h2,
  .al-specs--critique .al-specs__sub {
    grid-column: 1 / -1;
  }
  .al-specs--critique .al-specs__render {
    max-width: none;
    margin: 12px 0 0;
  }
  .al-specs--critique .al-specs__dl {
    align-self: start;
    margin-top: 12px;
  }

  .al-specs__row { grid-template-columns: 160px 1fr; padding: 16px 0; }
  .al-specs__dd { font-size: 15px; }
}

/* ========================================================================
   MOBILE CRITIQUE — FAQ (search + chip filters + first open)
   ======================================================================== */
.al-faq--critique { background: #fff; padding: 56px 0 48px; }
.al-faq__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--al-page-padding, 20px);
}
.al-faq__h2 { margin-bottom: 18px; }

.al-faq__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #f4f3ee;
  border-radius: 10px;
  margin-bottom: 12px;
}
.al-faq__search-icon { color: #777; flex-shrink: 0; }
.al-faq__search input {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: #111;
  flex: 1;
  outline: none;
  padding: 0;
  min-width: 0;
}
.al-faq__search input::placeholder { color: #777; }
.al-faq__search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.al-faq__tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.al-faq__tabs::-webkit-scrollbar { display: none; }
.al-faq__tab {
  flex: 0 0 auto;
  font-family: var(--al-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #444;
  background: #fff;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.al-faq__tab--on { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }

.al-faq__list { margin: 0; padding: 0; }
.al-faq__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 16px 0;
}
.al-faq__item[open] { padding-bottom: 10px; }

.al-faq__q {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: #0a0a0a;
  cursor: pointer;
  list-style: none;
}
.al-faq__q::-webkit-details-marker { display: none; }
.al-faq__q-text { flex: 1; }
.al-faq__q-toggle {
  font-family: var(--al-font-mono);
  font-size: 13px;
  color: #999;
  flex-shrink: 0;
  margin-top: 1px;
  font-weight: 400;
  transition: color 0.15s ease;
}
.al-faq__item[open] .al-faq__q-toggle { color: #0a0a0a; }

.al-faq__a {
  font-size: 12.5px;
  color: #555;
  line-height: 1.55;
  margin-top: 10px;
  padding-bottom: 6px;
}
.al-faq__a p { margin: 0 0 8px; }
.al-faq__a p:last-child { margin-bottom: 0; }

.al-faq__empty {
  text-align: center;
  color: #888;
  font-size: 12.5px;
  padding: 28px 0;
}

@media screen and (min-width: 750px) {
  .al-faq--critique { padding: 96px 0 80px; }
  .al-faq__tabs { overflow: visible; padding-bottom: 0; }
  .al-faq__q { font-size: 16px; }
  .al-faq__a { font-size: 14px; }
}

/* ========================================================================
   MOBILE CRITIQUE — Round 2 patches
   ======================================================================== */

/* Pill must stack BELOW the sticky header. Dawn's sticky header uses z-index
   3 — bumping it to 15 keeps the pill (z-index 3) from floating over it when
   the user scrolls. */
.shopify-section-header-sticky,
.shopify-section-header,
.header-wrapper,
.section-header-sticky,
sticky-header {
  z-index: 15 !important;
}
.al-hero__pill { z-index: 2; }

/* Hero: hide empty eyebrow paragraph so it doesn't leave a blank line. */
.al-hero__eyebrow:empty { display: none; }

/* Minimal section heading: renders the al-step-header snippet (small mono
   label + horizontal rule) as the section kicker for Signature Collection
   and Custom. Left-aligned, small — intentionally subdued so the product
   cards do the work. */
.al-signature-heading-wrap--minimal { text-align: left; margin-bottom: 20px; }
.al-signature-heading-wrap--minimal .al-step { margin-bottom: 0; }

/* Custom heading — generous breathing room between Ganpati's scroll row
   and the CUSTOM heading so the two groups read as distinct sections. */
.al-signature-heading-wrap--custom { margin-top: 72px; }
@media screen and (min-width: 750px) {
  .al-signature-heading-wrap--custom { margin-top: 112px; }
}

/* Custom group: single card inside a horizontal-scroll container — center it
   instead of leaving it hugging the left edge. */
.al-products__scroll--custom { justify-content: center; }

/* Section dividers — a thin top border on each major section (hero excluded)
   reinforces the minimalistic "line-between-sections" rhythm. */
.al-trust,
.al-reveal--critique,
.al-products,
.al-specs--critique,
.al-faq--critique,
.al-final-cta {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* ========================================================================
   MOBILE CRITIQUE — Back nav (customise page)
   ======================================================================== */
.al-back-nav {
  background: #0a0a0a;
  padding: 14px 18px 8px;
}
.al-back-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-family: var(--al-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.al-back-nav__btn:hover,
.al-back-nav__btn:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
  outline: none;
}
.al-back-nav__btn svg { color: inherit; }

@media screen and (min-width: 750px) {
  .al-back-nav { padding: 18px 32px 6px; }
}

/* Custom product card — plain black "Customise" CTA, full width on mobile. */
.al-product-card__customise {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Route-switching CSS removed — the customise flow lives on a real Shopify
   page (templates/page.customise.json) that the user creates in Admin. */

/* ========================================================================
   MOBILE CRITIQUE — 3D preview fullscreen mode
   Small top-right button expands the 3D canvas to cover the whole viewport
   so customers can actually inspect the piece (default 320px on mobile is
   too small to see detail).
   ======================================================================== */
.al-prev__3d-fullscreen {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #0a0a0a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.al-prev__3d-fullscreen:hover,
.al-prev__3d-fullscreen:focus-visible {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.3);
  outline: none;
}
.al-prev__3d-fullscreen-exit { display: none; }
.al-prev__3d-fullscreen[aria-pressed="true"] .al-prev__3d-fullscreen-enter { display: none; }
.al-prev__3d-fullscreen[aria-pressed="true"] .al-prev__3d-fullscreen-exit { display: block; }

/* Fullscreen state: the canvas wrap escapes its parent and covers the
   whole viewport. Dark background reads as "focused inspection mode". */
.al-prev__3d-canvas-wrap--fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100svh !important;
  z-index: 1000 !important;
  background: #0a0a0a !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.al-prev__3d-canvas-wrap--fullscreen .al-prev__3d-fullscreen {
  top: max(14px, env(safe-area-inset-top, 14px));
  right: max(14px, env(safe-area-inset-right, 14px));
  background: rgba(255, 255, 255, 0.95);
}
.al-prev__3d-canvas-wrap--fullscreen .al-prev__3d-hint {
  position: absolute;
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

/* Lock body scroll while fullscreen preview is open. */
body.al-prev-fullscreen-lock { overflow: hidden; }

/* Custom cart line-item thumbnail — cover-crop the uploaded photo. Width
   + height are driven by the orientation-aware rules below (160×120 /
   120×160), so no hard aspect-ratio here. */
.cart-item__image--custom {
  object-fit: cover;
  background: #f4f3ee;
}

/* Last-resort placeholder when BOTH the file-upload property and the
   variant's featured image are missing. Shows the product title so the
   user isn't looking at a blank white cell while the URL resolves. */
.cart-item__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f3ee;
  color: #0a0a0a;
  font-family: var(--al-font-mono, monospace);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
}
.cart-item__image--placeholder span { line-height: 1.2; }

/* ========================================================================
   AL: Orientation-aware cart thumbnails + stuck-drawer recovery
   ======================================================================== */

/* Mobile: size thumbs from the Orientation line-item property set by the
   3D previewer (Landscape 4:3 → 160×120, Portrait 3:4 → 120×160). */
@media screen and (max-width: 749px) {
  cart-drawer .cart-item__image[data-al-orient='landscape'],
  .cart-drawer .cart-item__image[data-al-orient='landscape'],
  .cart-items .cart-item__image[data-al-orient='landscape'] {
    width: 160px !important; height: 120px !important;
    max-width: 160px !important; max-height: 120px !important;
    object-fit: cover;
  }
  cart-drawer .cart-item__image[data-al-orient='portrait'],
  .cart-drawer .cart-item__image[data-al-orient='portrait'],
  .cart-items .cart-item__image[data-al-orient='portrait'] {
    width: 120px !important; height: 160px !important;
    max-width: 120px !important; max-height: 160px !important;
    object-fit: cover;
  }
  cart-drawer .cart-item__media[data-al-orient='landscape'],
  .cart-drawer .cart-item__media[data-al-orient='landscape'],
  .cart-items .cart-item__media[data-al-orient='landscape'] {
    width: 160px !important; min-width: 160px !important;
  }
  cart-drawer .cart-item__media[data-al-orient='portrait'],
  .cart-drawer .cart-item__media[data-al-orient='portrait'],
  .cart-items .cart-item__media[data-al-orient='portrait'] {
    width: 120px !important; min-width: 120px !important;
  }
}
@media screen and (min-width: 750px) {
  .cart-items .cart-item__media[data-al-orient='portrait'] { width: 120px; min-width: 120px; }
}

/* Stuck-drawer recovery — if onCartUpdate silently fails, the drawer can
   end up .is-empty with no items AND no close X. This keeps the header X
   visible so users always have a way out. */
cart-drawer.is-empty .drawer__header {
  display: flex !important;
  padding: 1rem 0 !important;
  position: relative;
  z-index: 2;
}
cart-drawer.is-empty .drawer__inner {
  grid-template-rows: auto 1fr !important;
}
cart-drawer.is-empty .cart-drawer__empty-content > .drawer__close {
  display: none;
}

/* Retry / reload banner shown by CartItems.showCartError() when both
   fetch attempts fail. */
.al-cart-error-banner {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1rem; margin: 1rem 0;
  border: 1px solid rgba(var(--color-foreground), 0.2);
  border-radius: 0.5rem;
  background: rgba(var(--color-foreground), 0.04);
  font-size: 0.875rem;
}
.al-cart-error-banner__message { margin: 0; }
.al-cart-error-banner__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.al-cart-error-banner__btn {
  padding: 0.5rem 1rem;
  border: 1px solid rgb(var(--color-foreground));
  background: transparent;
  color: rgb(var(--color-foreground));
  font-size: 0.875rem; cursor: pointer;
  border-radius: 0.25rem; min-height: 44px;
}
.al-cart-error-banner__btn--primary {
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
}

/* ========================================================================
   REVIEWS — Product-page display + Account-page submission form
   Storage: Shopify metaobject type `review` (see admin setup doc).
   ======================================================================== */

/* Product-page reviews section */
.al-reviews--pdp { background: #fff; padding: 56px 0; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.al-reviews__inner { max-width: 720px; margin: 0 auto; padding: 0 var(--al-page-padding, 20px); }

.al-reviews__summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 20px 0 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.al-reviews__summary-stars { display: inline-flex; gap: 2px; color: #f5b342; }
.al-reviews__star { width: 18px; height: 18px; display: block; }
.al-reviews__summary-meta { display: inline-flex; align-items: baseline; gap: 8px; }
.al-reviews__summary-avg {
  font-family: var(--al-font-serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--al-ink, #0a0a0a);
}
.al-reviews__summary-count { font-size: 13px; color: #666; }
.al-reviews__cta {
  margin-left: auto;
  padding: 10px 18px;
  background: var(--al-ink, #0a0a0a);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.al-reviews__cta:hover,
.al-reviews__cta:focus-visible { color: #fff; transform: translateY(-1px); }
.al-reviews__empty { font-size: 14px; color: #666; margin: 0; }
.al-reviews__empty a { color: var(--al-ink, #0a0a0a); text-decoration: underline; }

.al-reviews__list { list-style: none; padding: 0; margin: 0; }
.al-reviews__item {
  padding: 20px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.al-reviews__item:last-child { border-bottom: none; }
.al-reviews__item-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.al-reviews__item-stars { display: inline-flex; gap: 1px; color: #f5b342; }
.al-reviews__item-stars .al-reviews__star { width: 14px; height: 14px; }
.al-reviews__item-author {
  font-size: 13px;
  font-weight: 500;
  color: var(--al-ink, #0a0a0a);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.al-reviews__verified-badge {
  font-family: var(--al-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--al-good, #1aa260);
  background: rgba(26, 162, 96, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
}
.al-reviews__item-comment {
  font-size: 14px;
  line-height: 1.55;
  color: #333;
  margin: 4px 0 8px;
}
.al-reviews__item-date {
  font-family: var(--al-font-mono);
  font-size: 10.5px;
  color: #888;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media screen and (min-width: 750px) {
  .al-reviews--pdp { padding: 80px 0; }
  .al-reviews__inner { max-width: 860px; }
}

/* Account-page leave-review form */
.al-account__reviews { margin-top: 40px; }
.al-account__reviews-intro {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  margin: 0 0 20px;
}
.al-account__reviews-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.al-account__reviews-item { margin: 0; }

.al-review-form-wrap {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.al-review-form-wrap[open] { border-color: var(--al-ink, #0a0a0a); }

.al-review-form__toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
}
.al-review-form__toggle::-webkit-details-marker { display: none; }
.al-review-form__product { display: inline-flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.al-review-form__product img { border-radius: 4px; background: #f4f3ee; object-fit: cover; }
.al-review-form__product-title {
  font-weight: 500;
  color: var(--al-ink, #0a0a0a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.al-review-form__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--al-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #666;
  white-space: nowrap;
}
.al-review-form__chevron { transition: transform 0.2s ease; }
.al-review-form-wrap[open] .al-review-form__chevron { transform: rotate(180deg); }

.al-review-form {
  padding: 16px 16px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fafaf6;
}

.al-review-form__stars { border: none; padding: 0; margin: 0; }
.al-review-form__legend {
  font-family: var(--al-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 6px;
}
.al-review-form__stars-row { display: inline-flex; direction: rtl; gap: 2px; }
.al-review-form__stars-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.al-review-form__stars-row label {
  cursor: pointer;
  color: #ccc;
  padding: 4px;
  transition: color 0.15s ease;
}
.al-review-form__stars-row label svg { width: 28px; height: 28px; display: block; }
.al-review-form__stars-row input:checked ~ label,
.al-review-form__stars-row label:hover,
.al-review-form__stars-row label:hover ~ label { color: #f5b342; }
.al-review-form__stars-row input:focus-visible + label {
  outline: 2px solid var(--al-ink, #0a0a0a);
  outline-offset: 2px;
  border-radius: 4px;
}

.al-review-form__anon {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  background: #f9f8f4;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.35;
}
.al-review-form__anon input[type="checkbox"] {
  width: 18px; height: 18px; margin: 0; accent-color: var(--al-ink, #0a0a0a);
}
.al-review-form__anon-hint {
  grid-column: 2;
  font-size: 12px;
  color: #777;
}
.al-review-form__field[hidden] { display: none !important; }
.al-review-form__field { display: flex; flex-direction: column; gap: 6px; }
.al-review-form__field-label {
  font-family: var(--al-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #666;
}
.al-review-form__field-hint { text-transform: none; letter-spacing: 0; color: #999; font-family: inherit; }
.al-review-form__field input,
.al-review-form__field textarea {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  background: #fff;
  color: var(--al-ink, #0a0a0a);
  resize: vertical;
}
.al-review-form__field input:focus,
.al-review-form__field textarea:focus {
  outline: none;
  border-color: var(--al-ink, #0a0a0a);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
}

.al-review-form__actions { display: flex; justify-content: flex-end; }
.al-review-form__submit {
  padding: 11px 22px;
  background: var(--al-ink, #0a0a0a);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.2s ease;
}
.al-review-form__submit:hover,
.al-review-form__submit:focus-visible { transform: translateY(-1px); }
.al-review-form__submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.al-review-form__disclaimer {
  font-size: 11px;
  color: #888;
  line-height: 1.45;
  margin: 0;
}
.al-review-form__status-area:empty { display: none; }
.al-review-form__status-area {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12.5px;
}
.al-review-form__status-area--success { background: rgba(26, 162, 96, 0.1); color: var(--al-good, #1aa260); }
.al-review-form__status-area--error { background: rgba(192, 57, 43, 0.1); color: #c0392b; }

/* ========================================================================
   Product-card Expansion (Option C) — tap card → modal-like overlay
   with the full long-form description + Buy Now.
   ======================================================================== */

.al-product-card__expand {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 14px;
  background: rgba(6, 6, 8, 0.62);
  opacity: 0;
  transition: opacity 0.2s ease-out;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.al-product-card__expand.is-open {
  display: flex;
  opacity: 1;
}

.al-product-card__expand-content {
  position: relative;
  background: var(--al-white, #ffffff);
  border-radius: 16px;
  width: 100%;
  max-width: 680px;
  transform: scale(0.94);
  transition: transform 0.2s ease-out;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  margin: auto;
}
.al-product-card__expand.is-open .al-product-card__expand-content {
  transform: scale(1);
}

.al-product-card__expand-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #111;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.al-product-card__expand-close:hover,
.al-product-card__expand-close:active {
  background: #fff;
  transform: scale(1.05);
}
.al-product-card__expand-close svg {
  width: 20px;
  height: 20px;
}

/* Expansion gallery — CSS-toggled slide-show (not scroll-based).
   All slides absolute-stacked; only --active is visible via opacity.
   Nav buttons + dots positioned absolute on the wrapper, never scroll away. */
.al-product-card__expand-gallery {
  position: relative;
  width: 100%;
  aspect-ratio: var(--gallery-aspect, 4 / 3);
  background: #0a0a0a;
  overflow: hidden;
}

.al-product-card__expand-gallery-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.al-product-card__expand-gallery-slide--active {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}

.al-product-card__expand-body {
  padding: 24px 20px 28px;
}

/* Title + meta line now render at the TOP of the expansion body so the
   product hierarchy reads naturally: what you're looking at → rating →
   price → CTA → description → in-the-box. */
.al-product-card__expand-title {
  margin: 0 0 6px;
  font-family: var(--al-font-serif, 'Fraunces', Georgia, serif);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--al-text, #111);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.al-product-card__expand-meta {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--al-border, #e5e5e5);
  font-family: var(--al-font, 'Inter', sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--al-text-muted, #666);
}
/* Hide the long-description snippet's built-in title/meta header when it's
   rendered inside the expansion panel — we render those at the top of the
   body instead (ordered layout). The 3D previewer page still shows them. */
.al-product-card__expand .al-pdescr__header {
  display: none;
}

.al-product-card__expand-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  font-family: var(--al-font-serif, 'Fraunces', Georgia, serif);
}
.al-product-card__expand-price .al-price--current {
  font-size: 1.35rem;
  font-weight: 500;
}
.al-product-card__expand-price .al-price--compare {
  font-family: var(--al-font, 'Inter', sans-serif);
  font-size: 0.9rem;
  color: #999;
  text-decoration: line-through;
}
.al-product-card__expand-price .al-chip--save {
  font-family: var(--al-font, 'Inter', sans-serif);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--al-good, #1aa260);
  color: #fff;
}
.al-product-card__expand-price .al-price--shipping {
  font-family: var(--al-font, 'Inter', sans-serif);
  font-size: 11.5px;
  color: #666;
}

.al-product-card__expand-cta {
  margin-top: 18px;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--al-border, #e5e5e5);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.al-product-card__expand-form { margin: 0; }
.al-product-card__expand-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-family: var(--al-font, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  min-height: 48px;
  transition: background 0.15s ease, transform 0.1s ease;
}
.al-product-card__expand-buy:hover,
.al-product-card__expand-buy:active {
  background: #1a1a1a;
  transform: translateY(-1px);
}

.al-product-card__expand-alt {
  text-align: center;
  font-family: var(--al-font, 'Inter', sans-serif);
  font-size: 12.5px;
  color: #555;
  text-decoration: none;
  padding: 8px 0;
  transition: color 0.15s ease;
}
.al-product-card__expand-alt:hover { color: #111; text-decoration: underline; }

/* View in 3D button inside the expansion panel — full-width secondary-dark
   pill that matches the ATC button's height and shape so they read as a pair. */
.al-product-card__expand-3d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 22px;
  border-radius: 999px;
  min-height: 48px;
  font-family: var(--al-font, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
}

/* Expansion gallery prev/next nav buttons — absolute on wrapper, above slides */
.al-product-card__expand-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
  transition: background 0.15s ease, transform 0.1s ease;
}
.al-product-card__expand-gallery-nav:hover,
.al-product-card__expand-gallery-nav:active {
  background: #fff;
  transform: translateY(-50%) scale(1.05);
}
.al-product-card__expand-gallery-nav--prev { left: 12px; }
.al-product-card__expand-gallery-nav--next { right: 12px; }
.al-product-card__expand-gallery-nav svg { width: 18px; height: 18px; display: block; }

/* Dots indicator */
.al-product-card__expand-gallery-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.al-product-card__expand-gallery-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.al-product-card__expand-gallery-dot:hover { background: rgba(255, 255, 255, 0.85); }
.al-product-card__expand-gallery-dot--active {
  background: #fff;
  transform: scale(1.2);
}

/* In-the-Box photo section inside the expansion panel — sits below
   description; only renders when block.settings.inbox_image_url (or per-handle
   asset fallback) resolves and the card isn't a custom variant. */
.al-product-card__expand-inbox,
.al-prev-inbox {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--al-border, #e5e5e5);
}
.al-product-card__expand-inbox-title,
.al-prev-inbox__title {
  font-family: var(--al-font, 'Inter', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--al-text-muted, #555);
  margin: 0 0 12px;
}
.al-product-card__expand-inbox-img,
.al-prev-inbox__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #f5f5f5;
}
.al-product-card__expand-inbox-items,
.al-prev-inbox__items {
  margin: 12px 0 0;
  font-family: var(--al-font, 'Inter', sans-serif);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--al-text, #111);
}
/* Hide the duplicate "What's in the box" text from the long-description
   snippet — both the expansion panel and the 3D previewer render the items
   list as part of the In-the-Box block (below the photo) instead. */
.al-product-card__expand .al-pdescr__box,
.al-prev-description-block .al-pdescr__box {
  display: none;
}

/* Labeled In-the-Box variant (PDP only): numbered pins overlaid on the
   photo + legend chip row, matching the homepage al-specs layout. Pin
   positions come from inline `--pin1-top/left` / `--pin2-top/left` vars
   set per-product in sections/al-product-inbox.liquid. */
.al-prev-inbox--labeled .al-prev-inbox__frame {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #f4f3ee;
}
.al-prev-inbox--labeled .al-prev-inbox__frame .al-prev-inbox__img {
  border-radius: 0;
  margin: 0;
}
.al-prev-inbox__pin {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(20, 20, 22, 0.88);
  color: #fff;
  font-family: var(--al-font, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}
.al-prev-inbox__pin--1 {
  top: var(--pin1-top, 30%);
  left: var(--pin1-left, 30%);
}
.al-prev-inbox__pin--2 {
  top: var(--pin2-top, 43%);
  left: var(--pin2-left, 71%);
}
.al-prev-inbox__pin-legend {
  position: absolute;
  left: 12px;
  bottom: 12px;
  right: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--al-font, 'Inter', sans-serif);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 3;
}
.al-prev-inbox__pin-legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 6px;
  background: rgba(20, 20, 22, 0.78);
  color: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.al-prev-inbox__pin-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #0a0a0a;
  font-size: 11px;
  font-weight: 700;
}
.al-product-inbox-section {
  max-width: 680px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 750px) {
  .al-product-inbox-section { padding-left: 40px; padding-right: 40px; }
}

/* Sticky bottom-right ATC button inside the expansion panel — only visible
   while the main ATC is scrolled out of view (toggled via JS IntersectionObserver
   in al-product-showcase.liquid). Hidden entirely while the panel is closed. */
.al-product-card__expand-stickyatc {
  display: none;
}
.al-product-card__expand.is-open .al-product-card__expand-stickyatc {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--al-text, #111);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.34);
  z-index: 1010;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}
.al-product-card__expand.is-open .al-product-card__expand-stickyatc.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.al-product-card__expand.is-open .al-product-card__expand-stickyatc:hover,
.al-product-card__expand.is-open .al-product-card__expand-stickyatc:active {
  background: #000;
}
.al-product-card__expand-stickyatc svg {
  width: 24px;
  height: 24px;
}

/* Fullscreen image viewer (shared). Opens when user taps the active gallery
   image inside an expansion panel. Image starts at "fit" size (max 100vw
   × 100vh). Tap toggles to natural size and the surrounding scroller handles
   panning. The gallery slider's cursor is reset to zoom-in/out for desktop. */
.al-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.96);
  display: none;
  flex-direction: column;
}
.al-image-viewer.is-open { display: flex; }
.al-image-viewer__close {
  position: fixed;
  top: max(14px, env(safe-area-inset-top, 14px));
  right: max(14px, env(safe-area-inset-right, 14px));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s ease;
}
.al-image-viewer__close:hover,
.al-image-viewer__close:active {
  background: rgba(255, 255, 255, 0.32);
}
.al-image-viewer__close svg { width: 22px; height: 22px; }
/* Prev/next overlays on the viewer — solid-white pills so they stay visible
   on any underlying image content (previous semi-transparent bg disappeared
   against light photos). */
.al-image-viewer__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #0a0a0a;
  cursor: pointer;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.15s ease, transform 0.15s ease;
}
.al-image-viewer__nav:hover,
.al-image-viewer__nav:active {
  background: #fff;
  transform: translateY(-50%) scale(1.05);
}
.al-image-viewer__nav[hidden] { display: none; }
.al-image-viewer__nav--prev { left: max(14px, env(safe-area-inset-left, 14px)); }
.al-image-viewer__nav--next { right: max(14px, env(safe-area-inset-right, 14px)); }
.al-image-viewer__nav svg { width: 22px; height: 22px; }
.al-image-viewer__scroller {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 12px;
}
.al-image-viewer__img {
  display: block;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 120px);
  max-height: calc(100svh - 120px);
  margin: auto;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transform-origin: center center;
  /* We handle pinch/pan via pointer events; disable browser's default touch
     gestures on the image so they don't compete (page scroll, iOS double-tap
     zoom, Android image accessibility gesture). */
  touch-action: none;
  will-change: transform;
}
.al-image-viewer__img:active { cursor: grabbing; }
body.al-image-viewer-lock { overflow: hidden; }

/* Signal on the gallery slide that it's clickable. */
.al-product-card__expand-gallery-slide--active { cursor: zoom-in; }

/* Review row inside expansion — slightly larger stars than on the card,
   tighter link + full-row treatment. Reuses .al-product-card__stars styling. */
.al-product-card__expand-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 4px 0;
  text-decoration: none;
  color: var(--al-text, #111);
}
.al-product-card__expand-rating .al-product-card__star {
  width: 16px;
  height: 16px;
}
.al-product-card__expand-rating .al-product-card__star--filled {
  color: #f5a623;
}
.al-product-card__expand-rating .al-product-card__star--empty {
  color: #c8c8c5;
}
.al-product-card__expand-rating .al-product-card__review-count {
  font-family: var(--al-font, 'Inter', sans-serif);
  font-size: 12.5px;
  color: #666;
}
.al-product-card__expand-rating:hover .al-product-card__review-count {
  color: var(--al-ink, #111);
  text-decoration: underline;
}

/* Body-lock when panel is open */
body.al-card-expanded {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow-y: hidden;
}

@media screen and (min-width: 750px) {
  .al-product-card__expand { padding: 40px; }
  .al-product-card__expand-gallery-slide { aspect-ratio: 16 / 10; }
  .al-product-card__expand-body { padding: 32px 40px 36px; }
  .al-product-card__expand-buy,
  .al-product-card__expand-3d { width: auto; align-self: flex-start; min-width: 260px; }
}

/* ========================================================================
   Long-form product description snippet (al-product-long-description.liquid)
   Rendered inside the expansion panel AND on /pages/customise.
   ======================================================================== */

.al-pdescr {
  font-family: var(--al-font, 'Inter', sans-serif);
  color: var(--al-text, #111);
  line-height: 1.6;
}

.al-pdescr__header {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.al-pdescr__title {
  margin: 0 0 6px;
  font-family: var(--al-font-serif, 'Fraunces', Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--al-ink, #0e0e0e);
}

.al-pdescr__meta {
  margin: 0;
  font-family: var(--al-font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #777;
}

.al-pdescr__body { font-size: 14.5px; }
.al-pdescr__body p {
  margin: 0 0 14px;
  color: #333;
}
.al-pdescr__body strong { color: var(--al-ink, #0e0e0e); }

.al-pdescr__craft {
  font-family: var(--al-font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: #555 !important;
  padding: 10px 14px;
  background: #f7f7f5;
  border-radius: 6px;
}

.al-pdescr__box {
  margin: 20px 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: #f8f8f6;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.al-pdescr__box-title {
  margin: 0 0 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555 !important;
}
.al-pdescr__box-items {
  margin: 0 !important;
  font-size: 13.5px !important;
  color: #111 !important;
}

.al-pdescr__closer {
  margin-top: 20px !important;
  font-size: 12.5px !important;
  color: #666 !important;
}

/* ========================================================================
   Customise-page: dynamic description + FAQ below the 3D previewer
   ======================================================================== */

.al-prev-description-block {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}
.al-prev-description-block > [data-product-handle][hidden] { display: none; }

@media screen and (min-width: 750px) {
  .al-prev-description-block {
    padding: 48px 40px 64px;
  }
}