/* ==========================================================================
   Coideal storefront — design system
   Visual language carried over from the approved Brand Store concept
   (orange #F58220 on black, floating product cards, section rhythm),
   with all Amazon chrome removed: this is an independent brand site.
   ========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

:root {
  --orange: #F58220;
  --orange-light: #FF9A3C;
  --orange-dark: #D4691A;
  --orange-wash: #FFF5EB;
  --orange-wash-2: #FFE8D6;
  --black: #1A1A1A;
  --ink: #22252A;
  --gray: #666;
  --gray-light: #999;
  --bg-soft: #F7F7F7;
  --border: #E4E4E4;
  --white: #fff;
  --green: #2E9E5B;
  --red: #D0342C;
  --shadow: 0 2px 12px rgba(0, 0, 0, .08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, .12);
  --radius: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --t: all .25s ease;
  --maxw: 1240px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  overflow-x: hidden;
  font-size: 16px;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { flex-shrink: 0; }
.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;
}

/* ---------- announcement ---------- */
.announce {
  background: var(--black);
  color: #fff;
  font-size: 13px;
  letter-spacing: .02em;
  text-align: center;
  padding: 9px 16px;
}
.announce strong { color: var(--orange-light); font-weight: 600; }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 300;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 22px; height: 68px;
}
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-mark {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--orange); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 20px; line-height: 1;
}
.logo-text { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--black); }
.logo-text small { display: block; font-size: 10px; font-weight: 500; letter-spacing: .14em; color: var(--gray-light); text-transform: uppercase; margin-top: -3px; }

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav > li > a, .nav > li > button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 24px 12px; font-size: 14.5px; font-weight: 600; color: var(--ink);
  background: none; border: 0; cursor: pointer; position: relative; white-space: nowrap;
  transition: var(--t);
}
.nav > li > a:hover, .nav > li.open > button, .nav > li > a[aria-current="page"] { color: var(--orange); }
.nav > li > a[aria-current="page"]::after, .nav > li.open > button::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px;
  background: var(--orange); border-radius: 3px 3px 0 0;
}
.nav .caret { transition: transform .2s; }
.nav li:hover .caret, .nav li.open .caret { transform: rotate(180deg); }
.has-children { position: relative; }
.submenu {
  position: absolute; top: 100%; left: -8px; min-width: 260px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden;
  transform: translateY(8px); transition: var(--t); z-index: 400;
}
.has-children:hover .submenu, .has-children:focus-within .submenu, .nav li.open .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.submenu a { display: block; padding: 10px 14px; border-radius: 6px; font-size: 14px; font-weight: 500; }
.submenu a:hover { background: var(--orange-wash); color: var(--orange-dark); }

.header-tools { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid transparent;
  background: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  position: relative; transition: var(--t); color: var(--ink);
}
.icon-btn:hover { background: var(--bg-soft); border-color: var(--border); }
.cart-count {
  position: absolute; top: 2px; right: 1px; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--orange); color: #fff; border-radius: 9px;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.cart-count[data-count="0"] { display: none; }
.burger { display: none; }

/* ---------- search overlay ---------- */
.search-panel {
  position: fixed; inset: 0; z-index: 600; background: rgba(20, 20, 20, .5);
  display: none; align-items: flex-start; justify-content: center; padding: 80px 20px 20px;
}
.search-panel.open { display: flex; }
.search-box { width: min(680px, 100%); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.search-field { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.search-field input { flex: 1; border: 0; outline: none; font-size: 17px; }
.search-results { max-height: 55vh; overflow-y: auto; padding: 8px; }
.search-hit { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius); }
.search-hit:hover { background: var(--orange-wash); }
.search-hit img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--bg-soft); }
.search-hit .st { font-size: 14px; font-weight: 600; line-height: 1.35; }
.search-hit .sp { font-size: 13px; color: var(--orange-dark); font-weight: 700; }
.search-empty { padding: 28px 20px; color: var(--gray); font-size: 14px; text-align: center; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--orange-wash) 0%, var(--orange-wash-2) 45%, #FFDAB9 100%);
}
.hero-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 72px 20px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; min-height: 460px;
}
.hero h1 {
  font-size: clamp(44px, 6.5vw, 72px); font-weight: 900; color: var(--orange);
  letter-spacing: -2.5px; line-height: .98; margin-bottom: 14px;
}
.hero .slogan { font-size: clamp(20px, 2.6vw, 30px); font-weight: 300; color: var(--orange-dark); line-height: 1.35; margin-bottom: 14px; }
.hero .slogan strong { font-weight: 700; }
.hero .lede { font-size: 16px; color: #7a5c40; max-width: 46ch; margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* 500px, not 470: the cards are ~259px tall now that their images are square, and at 470 the
   bottom card climbed 48px into the top card's name line. At 500 the collage overlaps by ~18px,
   which is the corner-tuck the layout was going for. */
.hero-visual { position: relative; height: 500px; }
.float-card {
  position: absolute; background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 12px; width: 190px; transition: transform .3s ease;
}
.float-card:hover { transform: translateY(-6px) rotate(-1deg); }
/* Every product photo we have is a 600x600 square, so the chip image is square too — a fixed
   118px height here used to slice the top and bottom off each product (the third clip in the
   hinge-clip shot was cut in half). Square images make each card ~50px taller, so the visual
   grew to 470px and the three cards moved apart to keep the collage from stacking on itself. */
.float-card:nth-child(1) { top: 0; left: 0; }
.float-card:nth-child(2) { top: 126px; right: 0; width: 210px; }
.float-card:nth-child(3) { bottom: 0; left: 96px; }
/* `height: auto` is load-bearing here, not decoration. These <img> tags carry width="600"
   height="600" to stop layout shift, and those attributes act as a CSS `height: 600px`. Set only
   `width: 100%` and the box stays 166x600: aspect-ratio is silently ignored because both
   dimensions are definite, and object-fit then crops the photo. Declaring height:auto is what
   lets the square ratio take effect. */
.float-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--bg-soft); }
.float-card .fc-name { font-size: 12px; font-weight: 600; margin-top: 9px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.float-card .fc-price { font-size: 15px; font-weight: 800; color: var(--orange-dark); margin-top: 3px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 30px; border-radius: var(--radius-pill); border: 1px solid transparent;
  font-size: 15px; font-weight: 700; cursor: pointer; transition: var(--t); white-space: nowrap;
}
.btn-primary { background: var(--orange); color: #fff; box-shadow: 0 4px 15px rgba(245, 130, 32, .3); }
.btn-primary:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245, 130, 32, .4); }
.btn-ghost { background: #fff; color: var(--black); border-color: var(--black); }
.btn-ghost:hover { background: var(--black); color: #fff; }
.btn-outline { background: transparent; color: var(--orange-dark); border-color: var(--orange); }
.btn-outline:hover { background: var(--orange); color: #fff; }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 18px; font-size: 13.5px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ---------- sections ---------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: 76px 20px; }
.section-soft { background: var(--bg-soft); }
.section-head { text-align: center; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; color: var(--black); letter-spacing: -.6px; }
.section-head p { font-size: 16px; color: var(--gray); margin-top: 8px; }
.accent-line { width: 60px; height: 4px; background: var(--orange); margin: 14px auto 0; border-radius: 2px; }
.section-head.left { text-align: left; }
.section-head.left .accent-line { margin-left: 0; }
.section-foot { display: flex; justify-content: center; margin-top: 36px; }

/* ---------- values ---------- */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.value-card {
  background: #fff; border-radius: var(--radius-lg); padding: 36px 30px; text-align: center;
  box-shadow: var(--shadow); transition: var(--t); border: 1px solid #efefef;
}
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--orange-wash-2); }
.value-icon {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--orange), var(--orange-light));
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.value-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; color: var(--black); }
.value-card p { font-size: 14.5px; color: var(--gray); line-height: 1.75; }

/* ---------- category grid ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cat-card {
  position: relative; background: #fff; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); transition: var(--t); display: block; border: 1px solid #efefef;
}
.cat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--orange-wash-2); }
/* Square, like every one of these images actually is (they are all 600x600). A fixed
   height here meant object-fit:cover cropped roughly a fifth off the top and bottom of
   each category photo. .pcard-media already does it this way. */
.cat-media { aspect-ratio: 1; background: var(--bg-soft); position: relative; overflow: hidden; }
.cat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.cat-card:hover .cat-media img { transform: scale(1.06); }
.cat-arrow {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, .94); display: flex; align-items: center; justify-content: center;
  transition: var(--t); color: var(--black);
}
.cat-card:hover .cat-arrow { background: var(--orange); color: #fff; }
.cat-body { padding: 16px 18px 18px; }
.cat-body h3 { font-size: 16.5px; font-weight: 700; color: var(--black); margin-bottom: 4px; }
.cat-body p { font-size: 13px; color: var(--gray); line-height: 1.55; min-height: 40px; }
.cat-count { font-size: 12px; color: var(--orange-dark); font-weight: 700; margin-top: 8px; letter-spacing: .02em; }

/* ---------- product cards / carousel ---------- */
.carousel { position: relative; }
.carousel-track {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 2px 22px; scrollbar-width: none; scroll-behavior: smooth;
}
.carousel-track::-webkit-scrollbar { display: none; }
.pcard {
  flex: 0 0 258px; scroll-snap-align: start; background: #fff; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow); transition: var(--t); border: 1px solid #efefef;
  display: flex; flex-direction: column;
}
.pcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--orange-wash-2); }
.pcard-media { position: relative; aspect-ratio: 1; background: #fff; }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; }
.badge {
  position: absolute; top: 12px; left: 12px; padding: 4px 11px; border-radius: var(--radius-pill);
  background: var(--orange); color: #fff; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
}
.badge.save { background: var(--red); }
.badge.new { background: var(--green); }
.pcard-body { padding: 15px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.pcard-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-light); font-weight: 700; margin-bottom: 6px; }
.pcard h3 { font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--ink); margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.pcard-price { display: flex; align-items: baseline; gap: 8px; }
.pcard-price .now { font-size: 20px; font-weight: 800; color: var(--black); }
.pcard-price .now small { font-size: 12px; font-weight: 700; }
.pcard-price .avant { font-size: 13px; color: var(--gray-light); text-decoration: line-through; }
.pcard-meta { font-size: 12px; color: var(--gray); margin-top: 6px; }
.pcard .btn { margin-top: 14px; }
.carousel-btn {
  position: absolute; top: 40%; transform: translateY(-50%); width: 44px; height: 44px;
  background: #fff; border: 1px solid var(--border); border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow);
  transition: var(--t); z-index: 10;
}
.carousel-btn:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
.carousel-btn.prev { left: -14px; }
.carousel-btn.next { right: -14px; }

/* ---------- product grid ---------- */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pgrid .pcard { flex: none; }

/* ---------- scenes ---------- */
.scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.scene-card {
  position: relative; height: 330px; border-radius: var(--radius-lg); overflow: hidden;
  display: block; box-shadow: var(--shadow); transition: var(--t);
}
.scene-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.scene-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.scene-card:hover img { transform: scale(1.05); }
.scene-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .82) 100%); }
.scene-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 24px; color: #fff; }
.scene-tag {
  display: inline-block; padding: 4px 12px; background: var(--orange); border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 11px;
}
.scene-body h3 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.scene-body p { font-size: 13.5px; opacity: .88; line-height: 1.6; }
.scene-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--orange-light); }

/* ---------- brand story ---------- */
.story { background: linear-gradient(135deg, var(--orange-wash), var(--orange-wash-2)); }
.story-inner { max-width: var(--maxw); margin: 0 auto; padding: 76px 20px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.story h2 { font-size: clamp(28px, 3.6vw, 38px); font-weight: 800; color: var(--black); line-height: 1.25; margin-bottom: 20px; letter-spacing: -.8px; }
.story h2 span { color: var(--orange); }
.story p { font-size: 15.5px; color: #6b5a4a; line-height: 1.85; margin-bottom: 15px; }
.story-stats { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 30px; }
.stat .n { font-size: 34px; font-weight: 900; color: var(--orange); line-height: 1; }
.stat .l { font-size: 12.5px; color: #8a7360; margin-top: 5px; }
/* Six square 600x600 photos as a 3x2 grid of square tiles. It used to be a 2-column grid with
   the first tile spanning both columns and the rows pinned at 200px/160px — on a square source
   that banner tile only ever showed the middle fifth of the photo, and the sixth tile fell into
   an implicit third row that poked out of the bottom of the section. Square tiles + auto rows:
   cover now has nothing left to crop, and all six tiles fit the grid that was declared. */
.story-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.story-mosaic figure { aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: #fff; }
.story-mosaic img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- trust strip ---------- */
.trust { background: var(--black); color: #fff; }
.trust-inner { max-width: var(--maxw); margin: 0 auto; padding: 62px 20px; }
.trust h2 { text-align: center; font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin-bottom: 6px; }
.trust .sub { text-align: center; color: #9a9a9a; font-size: 15px; margin-bottom: 40px; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.trust-item .ti {
  width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 15px;
  background: rgba(245, 130, 32, .16); color: var(--orange-light);
  display: flex; align-items: center; justify-content: center;
}
.trust-item h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.trust-item p { font-size: 13.5px; color: #a3a3a3; line-height: 1.65; }

/* ---------- newsletter ---------- */
.news { background: var(--orange-wash); }
.news-inner { max-width: 720px; margin: 0 auto; padding: 58px 20px; text-align: center; }
.news h2 { font-size: 26px; font-weight: 800; color: var(--black); margin-bottom: 8px; }
.news p { color: #7a5c40; font-size: 15px; margin-bottom: 22px; }
.news-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.news-form input { flex: 1; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius-pill); outline: none; background: #fff; }
.news-form input:focus { border-color: var(--orange); }

/* ---------- footer ---------- */
.footer { background: #111; color: #999; padding: 56px 20px 26px; font-size: 14px; }
.footer-top { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; }
.footer h5 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; font-weight: 700; }
.footer a { display: block; padding: 4px 0; color: #999; transition: var(--t); }
.footer a:hover { color: var(--orange-light); }
.footer .fbrand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer .fbrand .logo-mark { width: 32px; height: 32px; font-size: 17px; }
.footer .fbrand span { font-size: 19px; font-weight: 700; color: #fff; }
.footer .fabout { line-height: 1.75; max-width: 38ch; }
.footer .fabout p + p { margin-top: 10px; }
.footer .flegal { margin-top: 14px; font-size: 12.5px; line-height: 1.7; color: #767676; }
.pay-marks { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.pay-mark {
  border: 1px solid #333; border-radius: 6px; padding: 6px 10px; font-size: 11px; font-weight: 700;
  color: #c9c9c9; letter-spacing: .04em; background: #181818;
}
.footer-bottom {
  max-width: var(--maxw); margin: 40px auto 0; padding-top: 22px; border-top: 1px solid #2a2a2a;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: #767676;
}
.footer-bottom a { display: inline; }

/* ---------- draft banner ---------- */
.draft-bar {
  background: #FFF3CD; color: #6B5400; border-bottom: 1px solid #FFE69C;
  padding: 10px 20px; font-size: 13px; text-align: center;
}
.draft-bar strong { font-weight: 800; }

/* ---------- breadcrumbs ---------- */
.crumbs { max-width: var(--maxw); margin: 0 auto; padding: 18px 20px 0; font-size: 13px; color: var(--gray); display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.crumbs a:hover { color: var(--orange); }
.crumbs .sep { color: #ccc; }
.crumbs .cur { color: var(--ink); font-weight: 600; }

/* ---------- collection header + toolbar ---------- */
.coll-head { max-width: var(--maxw); margin: 0 auto; padding: 22px 20px 6px; }
.coll-head h1 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; color: var(--black); letter-spacing: -.7px; }
.coll-head .cdesc { font-size: 15px; color: var(--gray); max-width: 78ch; margin-top: 10px; line-height: 1.75; }
.toolbar {
  max-width: var(--maxw); margin: 22px auto 0; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-soft);
}
.toolbar .count { font-size: 13.5px; color: var(--gray); }
.toolbar select { padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: #fff; font-size: 13.5px; cursor: pointer; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; max-width: var(--maxw); margin: 18px auto 0; padding: 0 20px; }
.chip {
  padding: 7px 15px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; color: var(--gray); background: #fff; transition: var(--t);
}
.chip:hover, .chip.on { border-color: var(--orange); color: var(--orange-dark); background: var(--orange-wash); }
.coll-body { max-width: var(--maxw); margin: 0 auto; padding: 28px 20px 76px; }
.coll-note { margin-top: 46px; padding: 26px 28px; background: var(--bg-soft); border-radius: var(--radius-lg); font-size: 14.5px; color: var(--gray); line-height: 1.8; }
.coll-note h2 { font-size: 19px; color: var(--black); margin-bottom: 10px; font-weight: 700; }

/* ---------- product page ---------- */
.pdp { max-width: var(--maxw); margin: 0 auto; padding: 18px 20px 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 52px; align-items: start; }
/* The gallery sticks while you read the buy box. It has to stay inside .pdp, and .pdp
   therefore holds ONLY the gallery + buy column — the description lives in .pdp-below.
   Why that matters: the spec says a sticky grid item is constrained to its own grid area,
   but browsers disagree and some let it slide to the bottom of the whole grid container.
   With the description as a third grid item, that reading pins the image over the text
   (reported on the live site). With .pdp reduced to a single row, both readings end at the
   same line — max(gallery, buy) — and the description starts below it either way. */
.gallery { position: sticky; top: 96px; }
.gallery-main {
  aspect-ratio: 1; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.thumbs button {
  width: 68px; height: 68px; border-radius: var(--radius); overflow: hidden; border: 2px solid var(--border);
  background: #fff; cursor: pointer; padding: 0; transition: var(--t);
}
.thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button.on { border-color: var(--orange); }
.thumbs button:hover { border-color: var(--orange-light); }

.buy .ptitle { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; line-height: 1.32; color: var(--black); letter-spacing: -.4px; }
.buy .ptr { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 13px; color: var(--gray); flex-wrap: wrap; }
.buy .ptr .in { color: var(--green); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.pricebox { margin: 22px 0 6px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pricebox .now { font-size: 34px; font-weight: 800; color: var(--black); letter-spacing: -1px; }
.pricebox .now small { font-size: 17px; }
.pricebox .avant { font-size: 17px; color: var(--gray-light); text-decoration: line-through; }
.pricebox .off { background: var(--red); color: #fff; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: var(--radius-pill); }
.price-note { font-size: 12.5px; color: var(--gray); }
.optgroup { margin-top: 24px; }
.optgroup .olabel { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray); margin-bottom: 10px; }
.optgroup .olabel b { color: var(--black); text-transform: none; letter-spacing: 0; font-weight: 600; }
.opts { display: flex; flex-wrap: wrap; gap: 9px; }
.opt {
  padding: 9px 16px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: var(--t);
}
.opt:hover { border-color: var(--orange); }
.opt.on { border-color: var(--black); background: var(--black); color: #fff; }
.opt.swatch { width: 42px; height: 42px; padding: 0; border-radius: 50%; overflow: hidden; position: relative; }
.opt.swatch img { width: 100%; height: 100%; object-fit: cover; }
.opt.swatch.on { border-color: var(--orange); box-shadow: 0 0 0 2px #fff inset; }
.buyrow { display: flex; gap: 12px; align-items: stretch; margin-top: 26px; flex-wrap: wrap; }
.qty { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.qty button { width: 42px; border: 0; background: #fff; cursor: pointer; font-size: 18px; color: var(--gray); height: 48px; }
.qty button:hover { background: var(--bg-soft); color: var(--black); }
.qty input { width: 48px; border: 0; text-align: center; font-size: 15px; font-weight: 700; outline: none; height: 48px; }
.buyrow .btn { height: 48px; padding: 0 26px; }
.buyrow .btn-primary { flex: 1; min-width: 160px; }
.paypal-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--gray); margin-top: 14px; }
.shipbox { margin-top: 26px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.shipbox div { display: flex; gap: 12px; align-items: flex-start; padding: 15px 18px; font-size: 13.5px; }
.shipbox div + div { border-top: 1px solid var(--border); }
.shipbox strong { display: block; font-size: 13.5px; color: var(--black); }
.shipbox span { color: var(--gray); font-size: 13px; }
.shipbox .si { color: var(--orange); margin-top: 2px; }

/* Own container, not a grid item — see the .gallery note above. It repeats .pdp's
   centring so the description lines up with the columns above it. */
.pdp-below { max-width: var(--maxw); margin: 0 auto; padding: 0 20px 76px; }
.tabs { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 40px; }
.tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 28px; flex-wrap: wrap; }
.tabbar button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 12px 18px; font-size: 15px; font-weight: 700; color: var(--gray); cursor: pointer; }
.tabbar button.on { color: var(--orange); border-bottom-color: var(--orange); }
.tabpane { display: none; max-width: 860px; }
.tabpane.on { display: block; }
.prose { font-size: 15.5px; line-height: 1.85; color: #444; }
.prose p { margin-bottom: 14px; }
.prose h3 { font-size: 19px; margin: 26px 0 10px; color: var(--black); font-weight: 700; }
.prose h2 { font-size: 23px; margin: 0 0 14px; color: var(--black); font-weight: 800; letter-spacing: -.4px; }
.prose h1 { font-size: clamp(26px, 3.4vw, 34px); margin-bottom: 16px; color: var(--black); font-weight: 800; letter-spacing: -.6px; }
.prose ul { list-style: disc; padding-left: 22px; margin: 0 0 16px; }
.prose li { margin-bottom: 8px; line-height: 1.75; }
.prose a { color: var(--orange-dark); text-decoration: underline; }
.prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; }
.prose th, .prose td { border: 1px solid var(--border); padding: 11px 14px; text-align: left; }
.prose th { background: var(--bg-soft); font-weight: 700; }
.spec-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 30px; }
.spec-list div { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px dashed var(--border); padding: 9px 0; font-size: 14px; }
.spec-list dt { color: var(--gray); }
.spec-list dd { font-weight: 600; text-align: right; }
.bullets { display: grid; gap: 12px; margin: 18px 0; }
.bullets li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.7; color: #444; }
.bullets .dot { width: 20px; height: 20px; border-radius: 50%; background: var(--orange-wash-2); color: var(--orange-dark); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; margin-top: 3px; }

/* ---------- cart ---------- */
.page-wrap { max-width: var(--maxw); margin: 0 auto; padding: 20px 20px 80px; }
.page-wrap.narrow { max-width: 820px; }
.cart-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--border); }
.line:first-child { border-top: 1px solid var(--border); }
.line img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); background: #fff; }
.line .lt { font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.line .lv { font-size: 12.5px; color: var(--gray); margin-top: 5px; }
.line .rm { background: none; border: 0; color: var(--gray-light); cursor: pointer; font-size: 12.5px; text-decoration: underline; margin-top: 7px; padding: 0; }
.line .rm:hover { color: var(--red); }
.line .qty { transform: scale(.9); }
.line .lp { font-size: 16px; font-weight: 800; min-width: 74px; text-align: right; }
.summary { background: var(--bg-soft); border-radius: var(--radius-lg); padding: 26px; position: sticky; top: 96px; }
.summary h2 { font-size: 19px; font-weight: 800; margin-bottom: 18px; }
.srow { display: flex; justify-content: space-between; font-size: 14.5px; padding: 7px 0; color: var(--gray); }
.srow.total { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 15px; font-size: 19px; font-weight: 800; color: var(--black); }
.srow.free { color: var(--green); font-weight: 600; }
.summary .btn { margin-top: 18px; }
.empty-state { text-align: center; padding: 70px 20px; }
.empty-state .es { font-size: 46px; margin-bottom: 14px; }
.empty-state h2 { font-size: 23px; margin-bottom: 8px; }
.empty-state p { color: var(--gray); margin-bottom: 22px; }

/* ---------- checkout ---------- */
.co-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.field label .opt-tag { font-weight: 400; color: var(--gray-light); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; outline: none; font-size: 14.5px; transition: var(--t);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(245, 130, 32, .12); }
.field.err input, .field.err select { border-color: var(--red); }
.field .msg { font-size: 12px; color: var(--red); margin-top: 5px; display: none; }
.field.err .msg { display: block; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.card + .card { margin-top: 22px; }
.card h2 { font-size: 18px; font-weight: 800; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.card h2 .num { width: 26px; height: 26px; border-radius: 50%; background: var(--black); color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.mini-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.mini-line img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.mini-line .mt { line-height: 1.4; font-weight: 600; }
.mini-line .mv { color: var(--gray); font-size: 12px; }
.pay-opts { display: grid; gap: 12px; }
.pay-opt { display: flex; gap: 13px; align-items: center; border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 16px; cursor: pointer; transition: var(--t); }
.pay-opt:hover { border-color: var(--orange-light); }
.pay-opt.on { border-color: var(--orange); background: var(--orange-wash); }
.pay-opt.disabled { opacity: .55; cursor: not-allowed; }
.pay-opt input { accent-color: var(--orange); }
.pay-opt .po-t { font-size: 14.5px; font-weight: 700; }
.pay-opt .po-d { font-size: 12.5px; color: var(--gray); margin-top: 2px; }
.mock-note { background: #FFF3CD; border: 1px solid #FFE69C; color: #6B5400; border-radius: var(--radius); padding: 13px 15px; font-size: 13px; line-height: 1.6; margin-bottom: 18px; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 24px);
  background: var(--black); color: #fff; padding: 13px 22px; border-radius: var(--radius-pill);
  font-size: 14px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: var(--t); z-index: 900;
  display: flex; align-items: center; gap: 10px; max-width: 90vw;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast .tk { color: var(--orange-light); font-weight: 800; }

/* ---------- reveal animation ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; }
.reveal.in { animation: fadeUp .55s ease forwards; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; min-height: 0; gap: 30px; }
  /* The floating collage is a desktop trick; on a narrow screen the same three
     products read better as a plain row than as a hidden element — the hero is
     the first thing a payment reviewer or an Amazon appeals agent sees. */
  .hero-visual { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; height: auto; }
  /* :nth-child(2) carries its own width, which outranks this rule's specificity — list it
     explicitly or the middle chip stays 210px while its neighbours go fluid. */
  .float-card, .float-card:nth-child(2) { position: static; width: auto; }
  .float-card .fc-name { font-size: 11px; -webkit-line-clamp: 2; }
  .cat-grid, .pgrid { grid-template-columns: repeat(3, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .story-inner { grid-template-columns: 1fr; gap: 34px; }
  .pdp { grid-template-columns: 1fr; gap: 30px; }
  .gallery { position: static; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: flex; }
  .nav.mobile-open {
    display: block; position: fixed; inset: 68px 0 0; background: #fff; z-index: 500;
    padding: 14px 20px; overflow-y: auto;
  }
  .nav.mobile-open > li { border-bottom: 1px solid var(--border); }
  .nav.mobile-open > li > a, .nav.mobile-open > li > button { display: flex; width: 100%; justify-content: space-between; padding: 15px 0; font-size: 16px; }
  .nav.mobile-open .submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; display: block; padding: 0 0 12px 12px; min-width: 0; }
  .cart-grid, .co-grid { grid-template-columns: 1fr; }
  .summary { position: static; }
  .values-grid, .scene-grid { grid-template-columns: 1fr; }
  .section { padding: 54px 18px; }
  .grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .cat-grid, .pgrid { grid-template-columns: repeat(2, 1fr); gap: 13px; }
  .hero-visual { gap: 9px; }
  .float-card { padding: 8px; }
  .float-card .fc-name { display: none; }
  .float-card .fc-price { margin-top: 4px; font-size: 13px; }
  .cat-body p { display: none; }
  .pcard { flex-basis: 210px; }
  .line { grid-template-columns: 74px minmax(0, 1fr); grid-template-areas: "i t" "i q" "i p"; gap: 10px 14px; }
  .line img { grid-area: i; width: 74px; height: 74px; }
  .line .lmid { grid-area: t; }
  .line .qty { grid-area: q; }
  .line .lp { grid-area: p; text-align: left; }
  .footer-top { grid-template-columns: 1fr; gap: 26px; }
  .trust-grid { grid-template-columns: 1fr; }
  .news-form { flex-direction: column; }
  .buyrow .btn-primary { min-width: 100%; }
  .spec-list { grid-template-columns: 1fr; }
  .story-stats { gap: 22px; }
  /* three across a phone makes each of these tiles about 100px — go 2x3 so the photos stay readable */
  .story-mosaic { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .cat-grid, .pgrid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 40px; }
}

@media print {
  .header, .footer, .announce, .trust, .news, .crumbs { display: none; }
}