/* ==========================================================================
   Nooki Pod — homepage
   Design tokens
   ========================================================================== */
:root {
  --cream: #f7f2e9;
  --cream-mid: #eeeae2;
  --cream-deep: #e2ded5;
  --grid-line: rgba(146, 120, 84, 0.16);
  --grid-line-soft: rgba(146, 120, 84, 0.09);
  --ink: #211d16;
  --ink-soft: #55503f;
  --walnut: #a9714a;
  --walnut-deep: #906d56;
  --peach: #f7d1b0;
  --gold: #d9a441;
  --paper-edge: #d8cdb8;

  --font-ui: "Poiret One", "Trebuchet MS", sans-serif;
  --container: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-color: var(--cream);
  background-image:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(to bottom, var(--grid-line-soft) 0 1px, transparent 1px 44px),
    linear-gradient(
      to bottom,
      var(--cream) 0,
      var(--cream) 30vh,
      var(--cream-mid) 110vh,
      var(--cream-mid) 190vh,
      var(--cream-deep) 260vh,
      var(--cream-deep) 320vh,
      var(--cream) 400vh,
      var(--cream) 100%
    );
}

@media (max-width: 640px) {
  body {
    /* half-size grid cells on mobile -- 44px squares read as oversized
       on a narrow screen */
    background-image:
      repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 22px),
      repeating-linear-gradient(to bottom, var(--grid-line-soft) 0 1px, transparent 1px 22px),
      linear-gradient(
        to bottom,
        var(--cream) 0,
        var(--cream) 30vh,
        var(--cream-mid) 110vh,
        var(--cream-mid) 190vh,
        var(--cream-deep) 260vh,
        var(--cream-deep) 320vh,
        var(--cream) 400vh,
        var(--cream) 100%
      );
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Background grid-paper wash lives on `body` itself (see above) so it
   spans the full scrollable document height -- an absolutely positioned
   overlay div here would size itself to the viewport only, not the page. */

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(20px, 4vw, 48px);
  background: linear-gradient(to bottom, rgba(247, 242, 233, 0.55), transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.icon-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
}

.cart-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-size: 0.65rem;
  line-height: 16px;
  text-align: center;
  font-family: var(--font-ui);
}

.icon-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

.site-header .logo {
  display: block;
  width: clamp(93px, 8.7vw, 128px);
  flex-shrink: 0;
}

.site-header .logo img {
  width: 100%;
  height: auto;
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* -------------------------------------------------------------------------
   Header search bar
   ------------------------------------------------------------------------- */
.search-bar {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  z-index: 28; /* below .site-header (30), above page content */
  /* Anchored under the search icon in the top-right, not centered over
     the page -- a centered bar sat on top of page content (product
     photos, the login/register form) in a lot of places. */
  padding: clamp(74px, 13vw, 96px) clamp(20px, 5vw, 40px) 0 0;
  background: transparent;
  pointer-events: none; /* the empty space around the line shouldn't
    block clicks on the page underneath; the form re-enables it */
}

.search-bar[hidden] {
  display: none;
}

.search-bar form {
  pointer-events: auto;
  width: min(280px, 60vw);
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 6px;
  background: var(--cream);
}

.search-bar input {
  flex: 1;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 2px 0;
  border: none;
  background: transparent;
  color: var(--ink);
  min-width: 0;
}

.search-bar input:focus {
  outline: none;
}

.search-bar input::placeholder {
  color: var(--ink-soft);
}

.search-bar button[type="submit"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.search-bar button[type="submit"] svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

/* Live results dropdown -- shows matching products as you type, so
   search lands you on a list to choose from rather than jumping
   straight into the first match's page. */
.search-results {
  pointer-events: auto;
  width: min(280px, 60vw);
  margin-left: auto;
  margin-top: 8px;
  background: var(--cream);
  border: 1px solid var(--paper-edge);
  border-radius: 12px;
  overflow: hidden;
}

.search-results[hidden] {
  display: none;
}

.search-results a {
  display: block;
  padding: 10px 14px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--paper-edge);
}

.search-results a:last-child {
  border-bottom: none;
}

.search-results a:hover {
  background: var(--cream-mid);
}

.search-bar__empty {
  pointer-events: auto;
  width: min(280px, 60vw);
  margin: 8px 0 0 auto;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.search-bar__empty[hidden] {
  display: none;
}

/* -------------------------------------------------------------------------
   Hamburger nav drawer
   ------------------------------------------------------------------------- */
.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 25; /* below .site-header (30) so the hamburger/logo/icons stay
    visible and clickable above the drawer instead of getting covered by
    it -- the drawer's own content still starts below the header thanks
    to its top padding. */
  background: var(--cream);
  width: min(420px, 92vw); /* a proper flyout panel on wider screens,
    instead of a full-width bar with the nav list stranded on the left
    and a big blank stripe of white next to it */
  padding: 90px 32px 40px;
  box-shadow: 4px 0 30px rgba(33, 29, 22, 0.12);
  height: 100vh;
  overflow-y: auto;
}

@media (max-width: 720px) {
  .nav-drawer {
    width: min(300px, 65vw); /* about half the screen, not full-width --
      the right side should stay visible, same idea as desktop */
    padding: 90px 28px 40px;
    box-shadow: 4px 0 30px rgba(33, 29, 22, 0.12);
  }
}

.nav-drawer[hidden] {
  display: none;
}

.nav-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 420px;
}

.nav-drawer__item {
  border-bottom: 1px solid var(--paper-edge);
}

.nav-drawer__item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 4px;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-drawer__item summary::-webkit-details-marker {
  display: none;
}

.nav-drawer__item summary::after {
  content: "+";
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}

.nav-drawer__item[open] summary::after {
  transform: rotate(45deg);
}

.nav-drawer__sublist {
  list-style: none;
  margin: 0;
  padding: 0 4px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nav-drawer__sublist a,
.nav-drawer__link {
  text-decoration: none;
  color: var(--ink);
  font-size: 0.95rem;
}

.nav-drawer__link {
  display: block;
  padding: 16px 4px;
  border-bottom: 1px solid var(--paper-edge);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}

@media (max-width: 720px) {
  .site-header {
    justify-content: flex-start;
    gap: 14px;
  }
  .site-header .logo {
    width: clamp(76px, 7.2vw, 104px); /* another ~10% smaller */
  }
  .header-icons {
    margin-left: auto;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  /* Most reliable layer: the real visible height in px, set by the
     inline script in <head> before first paint. Falls back to the vh/svh
     lines above if JS hasn't run yet or is unavailable. */
  height: var(--app-height, 100svh);
  min-height: 560px;
  overflow: hidden;
  background: linear-gradient(to bottom, #fed1aa 0%, #fed1aa 45%, #c19e87 100%);
}

/* Static fallback image -- see the markup comment in index.html for why
   this is sized against .hero-wrapper directly rather than #stage.
   object-position-x comes from --hero-fallback-pos-x, computed in the
   inline <head> script using the exact same crop math as the real
   #stage/canvas, so this lands in the same spot as the real hero
   instead of an approximated guess. Falls back to 50% (centered,
   matching the desktop default) if that script hasn't run. */
.hero-fallback-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-fallback-pos-x, 50%) center;
}

#stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  touch-action: pan-y; /* guarantee vertical page scroll always works over
    the hero on touch devices -- without this some mobile browsers can
    treat the pointer-event listeners on the canvas as capturing the
    gesture, which is what caused scrolling to get stuck at the hero */
}

#glcanvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

.hero-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.75);
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.hero-loading.hidden {
  opacity: 0;
}

.hero-title {
  position: absolute;
  top: clamp(50px, 10vh, 110px);
  right: clamp(10px, 3vw, 60px);
  width: clamp(320px, 90vw, 1260px);
  z-index: 5;
  pointer-events: none;
}

.hero-tagline {
  position: absolute;
  top: 85%;
  left: 62%;
  transform: translate(-50%, -50%);
  width: clamp(330px, 36vw, 480px);
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: hard-light;
}

@media (max-width: 720px) {
  #stage {
    /* Shift the walnut right within the frame so the crop favours the
       left shell (books/ladder) with just a sliver of the right shell,
       instead of a perfectly symmetric center crop. */
    left: 106%;
  }
  .hero-title {
    top: 90px;
    right: 16px;
    width: 80vw;
  }
  .hero-tagline {
    top: 90%;
    left: 40%;
    width: 60vw;
  }
}

/* ==========================================================================
   Shared section rhythm
   ========================================================================== */
.section {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 40px);
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Intro — "Une petite noix"
   ========================================================================== */
.intro {
  text-align: center;
  max-width: 1650px; /* wider than the shared .section container -- the
    pocket/stand illustrations need the extra room, this was silently
    capping them at ~558px each even after raising .format-card__art's
    own max-width */
}

.intro__arrow {
  width: 64px;
  margin: 0 auto 8px;
}

.intro__headline {
  width: min(560px, 80vw);
  margin: 0 auto 64px;
}

.formats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.2vw, 20px);
  max-width: 1550px;
  margin: 0 auto;
  align-items: start;
}

.format-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.format-card__cue {
  width: 40px;
  margin-bottom: 6px;
}

.format-card__label {
  width: 170px;
  margin-bottom: 18px;
  display: block;
}

a:has(> .format-card__label) {
  display: inline-block;
  line-height: 0; /* avoid extra inline gap under the image link */
}

.format-card__art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  max-width: 690px;
}

.format-card__art img {
  width: 100%;
  height: auto;
}

@media (max-width: 640px) {
  .formats {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .format-card__label {
    width: 144px; /* 170px * 0.85 */
  }
}

/* ==========================================================================
   Deux systèmes
   ========================================================================== */
.systems-intro {
  text-align: center;
}

.systems-intro__arrow {
  width: 56px;
  margin: 0 auto 8px;
}

.systems-intro__headline {
  width: min(620px, 84vw);
  margin: 0 auto;
}

.system-block {
  margin-top: clamp(40px, 8vw, 72px);
}

.system-block__transition {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.system-block__transition img {
  width: 48px;
}

.system-block__heading {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 44px;
}

.system-block__heading a {
  display: inline-block;
  line-height: 0;
}

.system-block__heading img {
  margin: 0 auto;
  width: min(320px, 70vw);
}

@media (max-width: 640px) {
  .system-block__heading img {
    width: min(161px, 35vw); /* another ~20% smaller on mobile */
  }
}

.system-block__product-label {
  text-align: center;
  margin-bottom: 20px;
}

.system-block__product-label img {
  margin: 0 auto;
  width: min(200px, 50vw);
}

.system-block__caption {
  text-align: center;
  margin: 0 auto 32px;
  width: min(640px, 88vw);
}

.system-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(20px, 5vw, 56px);
  align-items: center;
}

.system-row.is-reversed {
  grid-template-columns: 1.4fr 1fr;
}

.system-row.is-reversed .system-row__small {
  order: 2;
}

.system-row.is-reversed .system-row__big {
  order: 1;
}

.system-row__small,
.system-row__big {
  display: flex;
  align-items: center;
  justify-content: center;
}

.system-row__small img,
.system-row__big img {
  width: 100%;
  height: auto;
}

.system-row__small {
  max-width: 360px; /* 336px * 1.07 -- desktop furniture icons enlarged another 7% */
  margin: 0 auto;
}

@media (max-width: 640px) {
  .system-row__small {
    max-width: 274px; /* another 5% smaller on mobile */
  }
  .system-block__product-label {
    margin-bottom: 26px; /* more breathing room under ReadingNook/BubbleNook/DreamNook */
  }
  .system-block__product-label img {
    width: min(132px, 33vw); /* another ~20% smaller on mobile */
  }
  .product-card__name {
    font-size: 0.78rem; /* another ~20% smaller on mobile */
  }
}

.system-groups {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 6vw, 48px);
  margin-top: 28px;
}

@media (max-width: 720px) {
  .system-row,
  .system-row.is-reversed {
    grid-template-columns: 1fr;
  }
  .system-row.is-reversed .system-row__small {
    order: 0;
  }
  .system-row.is-reversed .system-row__big {
    order: 1;
  }
}

/* Lamp compatibility strip */
.lamp-strip {
  margin-top: clamp(56px, 10vw, 96px);
  text-align: center;
}

.lamp-strip__caption {
  width: min(846px, 76vw);
  margin: 0 auto 32px;
}

@media (max-width: 640px) {
  .lamp-strip__caption {
    width: min(1015px, 91vw); /* ~20% bigger on mobile -- was reading too small */
  }
}

.lamp-strip__art {
  width: min(520px, 80vw);
  margin: 0 auto;
}

/* CTA */
.cta {
  text-align: center;
  margin-top: clamp(56px, 10vw, 96px);
}

.cta__text {
  width: min(560px, 84vw);
  margin: 0 auto;
}

/* ==========================================================================
   Product grid
   ========================================================================== */
.shop {
  padding-top: clamp(24px, 5vw, 40px);
  max-width: 1650px; /* wider than the shared .section container so the
    product photos have more room to breathe */
}

.shop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 20px;
}

.shop__head--no-title {
  justify-content: flex-end;
}

.shop__head img {
  width: min(320px, 60vw);
}

.shop__nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.shop__nav button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: background 0.2s ease, color 0.2s ease;
}

.shop__nav button:hover {
  background: var(--ink);
  color: var(--cream);
}

.shop__nav svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.product-grid {
  display: flex;
  gap: clamp(18px, 3vw, 32px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.product-grid::-webkit-scrollbar {
  display: none;
}

.product-card {
  display: block;
  text-decoration: none;
  color: inherit;
  flex: 0 0 calc((100% - 2 * clamp(18px, 3vw, 32px)) / 3);
  scroll-snap-align: start;
}

.product-card__photo {
  border-radius: 18px;
  overflow: hidden;
  background: var(--cream-mid);
  margin-bottom: 14px;
  aspect-ratio: 4 / 5;
}

.product-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-card:hover .product-card__photo img {
  transform: scale(1.035);
}

.product-card__name {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.product-card__meta {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.product-card__price {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

@media (max-width: 760px) {
  .product-card {
    flex-basis: 68vw;
  }
}

/* ==========================================================================
   Collection pages (pocket.html / stand.html)
   ========================================================================== */
.collection-hero {
  text-align: center;
  padding-bottom: clamp(8px, 2vw, 16px);
  /* Clears the fixed/blurred .site-header -- the shared .section padding
     alone (min 48px) wasn't tall enough on mobile, so this breadcrumb
     and title were sitting underneath the header and unclickable. */
  padding-top: clamp(88px, 16vw, 120px);
}

.collection-hero__title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  margin: 6px 0 10px;
}

.collection-hero__subtitle {
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin: 0;
}

.collection-shop {
  max-width: 1400px;
  padding-top: 0;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 48px);
}

/* .product-card is normally a flex carousel item (see .shop above) --
   inside this grid it just needs to fill its own cell. */
.collection-grid .product-card {
  flex: unset;
  width: 100%;
}

/* "Slightly bigger than the homepage version," per spec -- same card,
   larger type. The photo itself is already bigger by virtue of having
   fewer, wider grid columns than the homepage's 3-up carousel. */
.product-card--lg .product-card__name {
  font-size: 1.3rem;
}

.product-card--lg .product-card__meta {
  font-size: 0.95rem;
}

.product-card--lg .product-card__price {
  font-size: 1.15rem;
}

/* ==========================================================================
   Product detail pages (product-*.html)
   ========================================================================== */
.product-detail-wrap {
  /* Same fixed-header clearance as .collection-hero above -- this was
     the "Accueil" breadcrumb link the frosted header was covering. */
  padding-top: clamp(88px, 16vw, 120px);
  /* This page was still capped at the site's normal 1180px reading
     width (inherited from .section), which is exactly why the product
     photo could never get anywhere near "fills half the screen" no
     matter how big .product-detail__main was told to be -- its column
     was 65% of 1180px, not 65% of the actual viewport. Overriding both
     to span the full window and handling left/right padding per-column
     below (image bleeds to the edge, info column keeps its own inset)
     is what actually fixes that, not further tweaking the image box. */
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.product-detail-wrap .breadcrumb {
  padding-left: clamp(20px, 5vw, 40px);
}

.breadcrumb {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0 0 20px;
}

.breadcrumb a {
  color: var(--ink-soft);
}

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

@media (max-width: 860px) {
  .product-detail {
    grid-template-columns: 1fr;
    padding: 0 clamp(20px, 5vw, 40px);
  }
}

.product-detail__info {
  padding-right: clamp(20px, 5vw, 48px);
}

.product-detail__gallery {
  position: sticky;
  top: 96px;
}

@media (max-width: 860px) {
  .product-detail__gallery {
    position: static;
  }
}

.product-detail__main {
  /* No object-fit:cover here on purpose -- the photo set mixes tall
     product shots with a wide instruction sheet, and forcing everything
     into one crop shape was cropping the wide one down to a sliver.
     Transparent background -- no cream "border" behind the photo, the
     page's own grid-paper background shows around it.

     No fixed/flex-centered box, either: that was making shorter photos
     float centered inside a much taller invisible container, which is
     exactly why the image looked mis-aligned against the product name
     next to it. This container is simply as tall as whichever photo is
     showing (so it naturally top-aligns with the info column), and
     "big" comes from generously capping the image's own max-height
     below, matching the reference pages (Zara, Bernardaud) where the
     photo dominates the left side of the screen. */
  position: relative;
  cursor: zoom-in;
  touch-action: pan-y; /* keep vertical page scroll working while still
    allowing our own horizontal swipe-to-change-photo gesture below */
}

.product-detail__main img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(420px, 88vh, 1300px);
  margin: 0 auto;
  object-fit: contain;
}

@media (max-width: 860px) {
  .product-detail__main img {
    max-height: 75vh;
  }
}

.product-detail__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.product-detail__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: transparent;
  cursor: pointer;
}

.product-detail__dot.is-active {
  background: var(--ink);
}

/* Prev/next arrows -- both the compact gallery view and the lightbox
   use these. Desktop visitors don't reliably click the tiny dots, so
   this is the primary way to page through photos with a mouse.
   Transparent (no button-shaped background) -- just the stroke, with a
   soft drop-shadow so it stays legible over both light and dark parts
   of whichever photo is showing. */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}

.gallery-arrow svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
}

.gallery-arrow--prev {
  left: 4px;
}

.gallery-arrow--next {
  right: 4px;
}

@media (max-width: 640px) {
  /* Arrows are secondary to swipe on touch screens -- keep them out of
     the way of the image itself. */
  .gallery-arrow {
    width: 38px;
    height: 38px;
  }
  .gallery-arrow svg {
    width: 22px;
    height: 22px;
  }
}

/* Fullscreen lightbox -- opens with the full-resolution image when the
   gallery photo is clicked. Frosted glass rather than either a solid
   dark backdrop or a fully transparent one: you can still tell you're
   in an overlay/"zoomed" mode, but the site is still visibly there,
   blurred, behind it -- matches the same frosted look as the header. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(247, 242, 233, 0.72);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  cursor: zoom-out;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
}

.lightbox__close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.lightbox .gallery-arrow {
  width: 52px;
  height: 52px;
}

.product-detail__info {
  padding-top: clamp(4px, 2vw, 20px);
}

.product-detail__name {
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  font-weight: 700;
  margin: 0 0 8px;
}

.product-detail__meta {
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin: 0 0 16px;
}

.product-detail__price {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 26px;
}

.product-detail__materials {
  font-size: 0.98rem;
  color: var(--ink-soft);
  padding-top: 18px;
  border-top: 1px solid var(--paper-edge);
  margin: 0 0 30px;
}

.product-detail__materials strong {
  color: var(--ink);
  font-weight: 700;
}

.product-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn {
  font-family: var(--font-ui);
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 15px 30px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

.btn--outline:hover {
  background: var(--ink);
  color: var(--cream);
}

.btn--primary {
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--ink);
}

.btn--primary:hover {
  background: var(--walnut);
  border-color: var(--walnut);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--paper-edge);
  padding: clamp(28px, 5vw, 48px) clamp(20px, 5vw, 40px) 28px;
}

.site-footer__top {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: start;
}

.site-footer__mark a {
  display: inline-block;
  line-height: 0;
}

.site-footer__mark img {
  width: 40px;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.95rem;
  line-height: 1.3;
}

.footer-links a {
  text-decoration: none;
  color: var(--ink);
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-follow {
  text-align: right;
}

.footer-follow__heading {
  display: block;
  width: 150px;
  margin: 0 0 8px auto;
}

.footer-follow__icons {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
}

.footer-follow__icons a {
  display: inline-flex;
}

.footer-follow__icons img {
  width: 26px;
  height: 26px;
}

.site-footer__bottom {
  max-width: var(--container);
  margin: 28px auto 0;
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--ink-soft);
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 640px) {
  .site-footer {
    margin-top: 24px; /* push the footer down a bit more from the shop section */
  }
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "mark   mark"
      "links  follow";
    column-gap: 20px;
    row-gap: 14px;
    align-items: start;
  }
  .site-footer__mark {
    grid-area: mark;
  }
  .footer-links {
    grid-area: links;
  }
  .footer-follow {
    grid-area: follow;
    text-align: right;
  }
  .footer-follow__heading {
    width: 128px; /* another ~5% smaller */
    margin: 0 0 8px auto;
  }
  .footer-follow__icons {
    justify-content: flex-end;
  }
  .footer-follow__icons img {
    width: 25px; /* ~5% smaller */
    height: 25px;
  }
}

/* ==========================================================================
   Customer account (login / account / orders / addresses / profile)
   -- front-end only for now; see chat for what real Shopify Customer
   Accounts wiring needs.
   ========================================================================== */
.account-wrap {
  padding-top: clamp(88px, 16vw, 120px);
  max-width: 1100px;
}

.account-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

@media (max-width: 760px) {
  .account-layout {
    grid-template-columns: 1fr;
  }
}

.account-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 110px;
}

@media (max-width: 760px) {
  .account-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
}

.account-nav a {
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.98rem;
}

.account-nav a:hover,
.account-nav a.is-active {
  background: var(--cream-mid);
}

.account-logout {
  margin-top: 12px;
  text-align: left;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 10px 14px;
}

.account-logout:hover {
  text-decoration: underline;
}

.account-card {
  background: var(--cream);
  border: 1px solid var(--paper-edge);
  border-radius: 18px;
  padding: clamp(20px, 4vw, 36px);
}

.account-section-title {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 700;
  margin: 0 0 20px;
}

.account-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.account-overview-card {
  display: block;
  border: 1px solid var(--paper-edge);
  border-radius: 14px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
}

.account-overview-card:hover {
  background: var(--cream-mid);
}

.account-overview-card__title {
  font-weight: 700;
  margin: 0 0 6px;
}

.account-overview-card__desc {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
}

/* Orders list */
.order-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid var(--paper-edge);
  text-decoration: none;
  color: inherit;
}

.order-row:last-child {
  border-bottom: none;
}

.order-row__id {
  font-weight: 700;
}

.order-status {
  font-size: 0.82rem;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--cream-mid);
  white-space: nowrap;
}

.order-status--shipped {
  background: #e4efe0;
  color: #3c6b34;
}

.order-status--processing {
  background: #f5e9d0;
  color: #8a6a1f;
}

/* Order detail */
.order-detail-items {
  border-top: 1px solid var(--paper-edge);
  border-bottom: 1px solid var(--paper-edge);
  padding: 16px 0;
  margin-bottom: 20px;
}

.order-detail-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.order-detail-item img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: var(--cream-mid);
  flex-shrink: 0;
}

.order-detail-item__info {
  flex: 1;
}

.order-detail-item__name {
  font-weight: 700;
  margin: 0 0 4px;
}

.order-detail-item__qty {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0;
}

.order-detail-item__price {
  font-weight: 700;
}

.order-summary {
  max-width: 320px;
  margin-left: auto;
  margin-bottom: 28px;
}

.order-summary__row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  color: var(--ink-soft);
}

.order-summary__row--total {
  color: var(--ink);
  font-weight: 700;
  font-size: 1.1rem;
  border-top: 1px solid var(--paper-edge);
  margin-top: 6px;
  padding-top: 12px;
}

.order-shipping__title {
  font-weight: 700;
  margin: 0 0 8px;
}

/* Addresses */
.address-card {
  border: 1px solid var(--paper-edge);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
}

.address-card__name {
  font-weight: 700;
  margin: 0 0 4px;
}

.address-card__lines {
  color: var(--ink-soft);
  margin: 0 0 10px;
}

.address-card__actions {
  display: flex;
  gap: 14px;
}

.link-btn {
  background: none;
  border: none;
  font-family: inherit;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
}

.address-empty {
  color: var(--ink-soft);
  margin-bottom: 16px;
}

/* Shared form fields (addresses, profile, auth) */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-field label {
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.form-field input {
  font-family: inherit;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--paper-edge);
  border-radius: 10px;
  background: var(--cream);
  color: var(--ink);
}

.form-field input:focus {
  outline: 2px solid var(--walnut);
  outline-offset: 1px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  min-width: 0; /* lets the grid tracks actually shrink instead of the
    inputs forcing an overflow past the card's edge */
}

.form-row .form-field {
  min-width: 0;
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Login / register */
.auth-wrap {
  max-width: 440px;
  padding-top: clamp(88px, 16vw, 120px);
}

.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.auth-tab {
  flex: 1;
  padding: 12px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: transparent;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
}

.auth-tab.is-active {
  background: var(--ink);
  color: var(--cream);
}

.auth-panel[hidden] {
  display: none;
}

/* ==========================================================================
   Cart (cart.html)
   ========================================================================== */
.cart-wrap {
  padding-top: clamp(88px, 16vw, 120px);
  max-width: 900px;
}

.cart-empty {
  text-align: center;
  padding: 48px 0;
  color: var(--ink-soft);
}

.cart-empty p {
  margin-bottom: 20px;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}

.cart-item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 18px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--paper-edge);
}

.cart-item__photo {
  width: 96px;
  height: 96px;
  background: var(--cream-mid);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item__photo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.cart-item__name {
  font-weight: 700;
  margin: 0 0 4px;
}

.cart-item__meta {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0 0 10px;
}

.cart-item__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--paper-edge);
  border-radius: 999px;
}

.cart-item__qty button {
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  font-size: 1rem;
  cursor: pointer;
  color: var(--ink);
}

.cart-item__qty span {
  min-width: 24px;
  text-align: center;
  font-size: 0.95rem;
}

.cart-item__right {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.cart-item__price {
  font-weight: 700;
}

.cart-item__remove {
  background: none;
  border: none;
  font-family: inherit;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: 0.85rem;
}

@media (max-width: 560px) {
  .cart-item {
    grid-template-columns: 72px 1fr;
  }
  .cart-item__right {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.cart-summary {
  border-top: 1px solid var(--ink);
  padding-top: 24px;
  max-width: 380px;
  margin-left: auto;
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.cart-summary__note {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin: 4px 0 12px;
}

.cart-summary__row--total {
  font-weight: 700;
  font-size: 1.2rem;
  border-top: 1px solid var(--paper-edge);
  padding-top: 12px;
  margin-top: 4px;
}

.cart-summary__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.cart-summary__actions .btn {
  width: 100%;
}

.cart-summary__checkout-note {
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}