/* ==========================================================================
   masthead
   ========================================================================== */

/* The shop is a column: masthead, main, footer. main takes the slack, so a
   short page such as About still puts its footer on the bottom edge. */
#app { display: flex; flex-direction: column; flex: 1; }
#app > main { flex: 1 0 auto; }

.masthead { background: var(--seamless); position: sticky; top: 0; z-index: 60; }

.masthead__bar {
  display: flex; align-items: center; gap: var(--s5);
  padding-block: var(--s4);
}

.masthead__logo {
  display: flex; align-items: center; gap: var(--s3);
  text-decoration: none; color: var(--ink); flex: 0 0 auto;
}
.mark { width: auto; object-fit: contain; }
.masthead__logo:hover { color: var(--ink); }

.wordmark { display: flex; flex-direction: column; line-height: 1.1; }
.wordmark b {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.02em;
}
.wordmark span {
  font-size: var(--text-xs); color: var(--ink-faint); letter-spacing: 0.04em;
  font-weight: 400;
}

.masthead__nav { display: flex; gap: var(--s5); margin-inline-start: auto; }
.masthead__link {
  color: var(--ink-soft); text-decoration: none; font-size: var(--text-sm);
  font-weight: 500; padding-block: var(--s1); position: relative;
}
.masthead__link:hover { color: var(--ink); }
.masthead__link[data-active="true"] { color: var(--ink); }
.masthead__link[data-active="true"]::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -2px;
  height: 1.5px; background: var(--gold);
}

.masthead__tools { display: flex; align-items: center; gap: var(--s2); flex: 0 0 auto; }

/* A select rather than a toggle: with two languages a toggle has to be
   labelled in the language you are going to, which reads backwards half the
   time. A list just shows both, and matches the other filters. */
.lang-select {
  font-size: var(--text-sm); font-weight: 500; color: var(--ink-soft);
  padding: var(--s2) var(--s3); border: 1px solid var(--line);
  border-radius: var(--r-control); background: var(--seamless); height: 2.4rem;
}
.lang-select:hover { color: var(--ink); border-color: var(--ink-soft); }

.cart-button {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3); border: 1px solid var(--line);
  border-radius: var(--r-control); text-decoration: none; color: var(--ink);
  font-size: var(--text-sm); font-weight: 500;
}
.cart-button:hover { border-color: var(--ink-soft); color: var(--ink); }
.cart-button__count {
  min-width: 1.35rem; height: 1.35rem; padding-inline: 0.3rem;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; font-size: 0.7rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.masthead__burger { display: none; padding: var(--s2); color: var(--ink); }

/* The one piece of motion that runs without being asked for: a bronze rule
   that draws itself under the header on first load, with the wheat sprig from
   the label sitting on it. It happens once. */
.brand-rule { position: relative; height: 14px; }
.brand-rule__base { position: absolute; top: 7px; inset-inline: 0; height: 1px; background: var(--line); }
.brand-rule__grow {
  position: absolute; top: 7px; inset-inline-start: 0; height: 1px;
  background: var(--gold); width: 0;
  animation: grow 1.4s var(--ease) 0.15s forwards;
}
@keyframes grow { to { width: 100%; } }
.brand-rule__sprig { position: absolute; top: 0; inset-inline-start: 76px; }
[dir="rtl"] .brand-rule__sprig { transform: scaleX(-1); }

@media (max-width: 860px) {
  .masthead__nav { display: none; }
  .masthead__burger { display: block; margin-inline-start: auto; order: 3; flex: 0 0 auto; }
  .masthead__tools { order: 2; margin-inline-start: auto; }
  .masthead__bar { gap: var(--s3); }
}

@media (max-width: 560px) {
  /* The language control keeps its place beside the cart on a phone. It
     abbreviates to EN and ع rather than going anywhere, which is what makes
     the row fit. */
  .lang-select--tight { padding-inline: var(--s2); min-width: 3.4rem; text-align: center; }
  /* The word "Cart" leaves the eye but not the accessible name, so the button
     is still announced as "Cart 3" and not as a bare number. */
  .cart-button__word {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .cart-button { gap: var(--s1); padding-inline: var(--s3); }
}
/* The masthead is the tightest row on the site: mark, name, language, cart,
   burger. Below 430px the mark comes down, the tagline goes, and the name is
   allowed to shrink and ellipsis rather than push the burger off screen. */
@media (max-width: 430px) {
  /* flex: 0 0 auto kept the logo at its natural 198px and pushed the burger
     off a 320px screen. Letting it shrink means the name ellipsises on the
     narrowest phones instead of the controls disappearing. */
  .masthead__logo { flex: 0 1 auto; min-width: 0; gap: var(--s2); }
  .masthead__logo .mark { height: 34px !important; }
  .wordmark { min-width: 0; }
  .wordmark b {
    font-size: var(--text-sm); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .wordmark span { display: none; }
  .masthead__bar { gap: var(--s2); }
  .cart-button { padding-inline: var(--s2); }
}

/* ==========================================================================
   drawer
   ========================================================================== */

.drawer { position: fixed; inset: 0; z-index: 90; background: rgba(34, 48, 31, 0.45); }
.drawer__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0; width: min(88vw, 340px);
  background: var(--seamless); display: flex; flex-direction: column;
  padding: var(--s5); gap: var(--s5);
  animation: slide-in 0.25s var(--ease);
}
@keyframes slide-in { from { transform: translateX(8%); opacity: 0; } }
[dir="rtl"] .drawer__panel { animation-name: slide-in-rtl; }
@keyframes slide-in-rtl { from { transform: translateX(-8%); opacity: 0; } }

.drawer__top { display: flex; align-items: center; justify-content: space-between; }
.drawer__nav { display: flex; flex-direction: column; }
.drawer__link {
  padding-block: var(--s3); font-size: var(--text-md); font-weight: 500;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-soft);
}
.drawer__foot { margin-block-start: auto; display: grid; gap: var(--s3); }
.drawer__phone { text-align: center; font-weight: 500; text-decoration: none; }

/* ==========================================================================
   buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 0.7rem 1.35rem; border-radius: var(--r-control);
  font-size: var(--text-sm); font-weight: 600; text-decoration: none;
  border: 1px solid transparent; transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-bright); color: #fff; }
.btn--ghost { border-color: var(--line); color: var(--ink); background: var(--seamless); }
.btn--ghost:hover { border-color: var(--ink-soft); color: var(--ink); }
.btn--whatsapp { background: var(--ok); color: #fff; }
.btn--whatsapp:hover { background: #26573f; color: #fff; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ==========================================================================
   home: the product wall
   ========================================================================== */

.wall { background: var(--seamless); padding-block: var(--s5) var(--s7); }
.wall__row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4);
  align-items: end; margin-block-end: var(--s6);
}
.wall__item { opacity: 0; animation: rise 0.7s var(--ease) forwards;
              text-decoration: none; color: var(--ink); }
.wall__item:nth-child(1) { animation-delay: 0.1s; }
.wall__item:nth-child(2) { animation-delay: 0.22s; }
.wall__item:nth-child(3) { animation-delay: 0.34s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.wall__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; max-height: 44vh; }
.wall__caption {
  text-align: center; font-size: var(--text-xs); color: var(--ink-faint);
  letter-spacing: 0.06em; margin-block-start: var(--s2);
}

.wall__words { display: grid; gap: var(--s4); max-width: 46rem; }
.wall__title { font-size: var(--text-3xl); font-weight: 600; }
.wall__lead { font-size: var(--text-md); color: var(--ink-soft); max-width: 52ch; }
.wall__actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-block-start: var(--s2); }

@media (max-width: 720px) {
  .wall__row { gap: var(--s2); margin-block-end: var(--s5); }
  .wall__caption { font-size: 0.65rem; letter-spacing: 0.03em; }
}

/* ==========================================================================
   category index: a typographic list, not a grid of icon tiles
   ========================================================================== */

.index { padding-block: var(--s7); }
.index__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  column-gap: var(--s8); margin-block-start: var(--s5);
}
.index__row {
  display: flex; align-items: baseline; gap: var(--s3);
  padding-block: var(--s4); border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
}
@media (hover: hover) {
  .index__row:hover { color: var(--gold-deep); }
  .index__row:hover .index__rule { flex-basis: 12%; }
}
.index__name { font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.02em; }
html[lang="ar"] .index__name { letter-spacing: 0; }
.index__rule {
  flex: 1 1 auto; height: 2px; background: var(--mark, var(--gold));
  transition: flex-basis 0.25s var(--ease);
}
.index__count {
  font-size: var(--text-sm); color: var(--ink-faint);
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}

@media (max-width: 720px) {
  .index__grid { grid-template-columns: 1fr; column-gap: 0; }
}

/* ==========================================================================
   sections and product grid
   ========================================================================== */

.section { padding-block: var(--s7); }
.section--seamless { background: var(--seamless); }

/* ==========================================================================
   NH Beauty, the house brand

   The band on the home page is a panel in its own right rather than a tinted
   section, because the sections either side of it alternate and the offers
   between them disappear when there are none: left to alternation it would
   sometimes merge into the grid below it.
   ========================================================================== */

.brandband {
  background: var(--seamless); border: 1px solid var(--line-soft);
  border-radius: var(--r-panel); padding: var(--s6) var(--s5);
  display: grid; justify-items: center; gap: var(--s4); text-align: center;
}
.brandband__mark { width: 120px; height: auto; }
/* Balanced, or the line breaks mid-name and reads as "Zahrat / Al Shitaa". */
.brandband__lead { color: var(--ink-soft); max-width: 46ch; text-wrap: balance; }

.brandhead {
  display: grid; justify-items: center; gap: var(--s3); text-align: center;
  margin-block-end: var(--s6);
}
.brandhead__mark { width: 132px; height: auto; }
.brandhead .section__lead { max-width: 46ch; }

@media (max-width: 560px) {
  .brandband { padding: var(--s5) var(--s4); }
  .brandband__mark { width: 96px; }
  .brandhead__mark { width: 104px; }
}
.section__head { margin-block-end: var(--s5); display: grid; gap: var(--s2); }
.section__title { font-size: var(--text-xl); }
.section__lead { color: var(--ink-soft); }
.section__foot { margin-block-start: var(--s6); }

.grid {
  display: grid; gap: var(--s5) var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

.card { display: block; text-decoration: none; color: var(--ink); }
.card__frame {
  background: var(--seamless); border: 1px solid var(--line-soft);
  border-radius: var(--r-card); overflow: hidden;
  transition: border-color 0.18s var(--ease);
}
@media (hover: hover) { .card:hover .card__frame { border-color: var(--gold-line); } }
.card__frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; }
.card__body { padding-block-start: var(--s3); display: grid; gap: var(--s1); }
.card__cat {
  font-size: var(--text-xs); color: var(--mark, var(--gold));
  letter-spacing: 0.04em; font-weight: 500;
}
.card__name { font-size: var(--text-base); font-weight: 500; letter-spacing: -0.01em; }
html[lang="ar"] .card__name { letter-spacing: 0; }
.card__ask { font-size: var(--text-sm); color: var(--ink-faint); }

/* ==========================================================================
   price

   Dirhams, everywhere, in tabular numerals so a column of them lines up.
   ========================================================================== */

.price { display: inline-flex; line-height: 1.25; }
.price__aed { font-weight: 600; font-variant-numeric: tabular-nums; }
.price--lg .price__aed { font-size: var(--text-lg); }
.price__from { font-size: var(--text-xs); color: var(--ink-faint); font-weight: 400; }

.was { color: var(--ink-faint); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.save {
  display: inline-block; background: var(--gold); color: #fff;
  font-size: var(--text-xs); font-weight: 600; padding: 2px var(--s2);
  border-radius: var(--r-pill); letter-spacing: 0.02em;
}

/* ==========================================================================
   option pickers
   ========================================================================== */

.optiongroup { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.optiongroup legend {
  padding: 0; font-size: var(--text-sm); font-weight: 600;
  display: flex; align-items: baseline; gap: var(--s2);
}
.optiongroup legend span {
  font-size: var(--text-xs); font-weight: 400; color: var(--ink-faint);
}
.optionvalues { display: flex; flex-wrap: wrap; gap: var(--s2); }
.optionvalue {
  padding: var(--s2) var(--s4); border: 1px solid var(--line);
  border-radius: var(--r-control); background: var(--seamless);
  font-size: var(--text-sm); font-weight: 500; color: var(--ink-soft);
  display: grid; gap: 1px; text-align: center; min-width: 5rem;
}
.optionvalue:hover { border-color: var(--ink-soft); color: var(--ink); }
.optionvalue[aria-pressed="true"] {
  border-color: var(--green); background: var(--green-wash); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--green);
}
.optionvalue[disabled] { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
.optionvalue small { font-size: var(--text-xs); color: var(--ink-faint); font-weight: 400;
                     font-variant-numeric: tabular-nums; }
.optionvalue[aria-pressed="true"] small { color: var(--ink-soft); }

.hint { font-size: var(--text-sm); color: var(--gold-deep); }

/* Colour options. A swatch and its code is the button; the full name of what
   is chosen is spelled out underneath the whole group. */
.shadeseries { display: grid; gap: var(--s2); margin-block-start: var(--s3); }
.shadeseries h4 {
  font-size: var(--text-xs); font-weight: 500; color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.optionvalue--swatch {
  min-width: 0; width: 3.4rem; padding: var(--s2) var(--s1);
  justify-items: center; gap: var(--s1);
}
.optionvalue--swatch span:last-child {
  font-size: 0.7rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.swatch {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(34, 48, 31, 0.18);
}
.shadechosen {
  font-size: var(--text-sm); font-weight: 500; color: var(--ink);
  margin-block-start: var(--s3);
}

/* ==========================================================================
   the NH Beauty imprint

   Baking a watermark into the photograph would make the control room's toggle
   a lie: ticking the box has to change what is on screen at once. So the mark
   is an overlay. Trailing-side inset, which puts it in the other corner in
   Arabic without a second rule.
   ========================================================================== */

.shot { position: relative; }
/* The container rules (.card__frame img, .gallery__main img) also match the
   overlay, and they set width:100% and a 4:5 box. This selector is specific
   enough to win and undoes all three.

   14% and not the 18% the Zahrat wreath used: that mark was wide (320x249),
   the NH roundel is square, and at the same width it carries half again as
   much ink. */
.shot img.shot__mark {
  position: absolute; inset-block-end: 5%; inset-inline-end: 5%;
  width: 14%; height: auto; aspect-ratio: auto; object-fit: contain;
  opacity: 0.55; pointer-events: none;
}

/* A certificate is shown at its own proportions, not squared off like a
   product photo, and opens full size in a new tab. */
.certificate {
  display: inline-grid; gap: var(--s2); justify-items: center;
  padding: var(--s4); background: var(--seamless);
  border: 1px solid var(--line-soft); border-radius: var(--r-panel);
  text-decoration: none; max-width: 100%;
}
.certificate img {
  max-width: min(320px, 100%); height: auto; border-radius: var(--r-control);
}
.certificate__hint { font-size: var(--text-sm); color: var(--ink-soft); }
@media (hover: hover) { .certificate:hover { border-color: var(--line); } }

.card__placeholder {
  width: 100%; aspect-ratio: 4 / 5; display: grid; place-items: center;
  background: var(--gold-wash); color: var(--gold);
}

/* ==========================================================================
   catalog controls
   ========================================================================== */

/* min-width: 0 on the children, because a text input's automatic minimum size
   is its default 20-character width. Without this the search box widens the
   whole grid track, and the chips scroller, which is sized off that track plus
   its bleed, then pushes the page wider than the screen. */
.controls { display: grid; gap: var(--s4); margin-block-end: var(--s5); }
.controls > * { min-width: 0; }

.chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip {
  padding: var(--s2) var(--s4); border: 1px solid var(--line);
  border-radius: var(--r-pill); font-size: var(--text-sm); font-weight: 500;
  color: var(--ink-soft); background: var(--seamless); white-space: nowrap;
  text-decoration: none;
}
.chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.chip[data-active="true"] { background: var(--green); border-color: var(--green); color: #fff; }

.search { display: flex; gap: var(--s2); max-width: 26rem; }
.search input {
  flex: 1; min-width: 0; padding: 0.65rem var(--s3); border: 1px solid var(--line);
  border-radius: var(--r-control); background: var(--seamless);
}
.search input::placeholder { color: var(--ink-faint); }

.results { font-size: var(--text-sm); color: var(--ink-faint); font-weight: 400; }

/* ==========================================================================
   price range slider

   Two native range inputs on one track. The inputs are transparent and let
   pointer events through except on their thumbs, so the handle underneath can
   still be grabbed where the two overlap.
   ========================================================================== */

.pricefilter { display: grid; gap: var(--s2); max-width: 26rem; }
.pricefilter__top { display: flex; align-items: center; gap: var(--s3); }
.pricefilter__label { font-size: var(--text-sm); font-weight: 500; }
.pricefilter__read {
  font-size: var(--text-sm); color: var(--ink-soft); font-variant-numeric: tabular-nums;
  margin-inline-end: auto;
}
.pricefilter__ends {
  display: flex; justify-content: space-between;
  font-size: var(--text-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.chip--clear { padding: var(--s1) var(--s3); font-size: var(--text-xs); }

.rangeslider { position: relative; height: 34px; display: grid; align-items: center; }
.rangeslider__track, .rangeslider__fill {
  position: absolute; height: 4px; border-radius: var(--r-pill); pointer-events: none;
}
.rangeslider__track { inset-inline: 0; background: var(--line); }
.rangeslider__fill { left: var(--lo); right: calc(100% - var(--hi)); background: var(--green); }

.rangeslider input[type="range"] {
  position: absolute; inset-inline: 0; width: 100%; margin: 0;
  background: none; appearance: none; -webkit-appearance: none;
  pointer-events: none;            /* the track is not draggable, the thumbs are */
  height: 34px;
}
.rangeslider input[type="range"]:focus-visible { outline: none; }

.rangeslider input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; pointer-events: auto;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--seamless); border: 2px solid var(--green);
  box-shadow: 0 1px 3px rgba(34, 48, 31, 0.25); cursor: grab;
}
.rangeslider input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--seamless); border: 2px solid var(--green);
  box-shadow: 0 1px 3px rgba(34, 48, 31, 0.25); cursor: grab;
}
.rangeslider input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
.rangeslider input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring); }
.rangeslider input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: var(--ring); }
.rangeslider input[type="range"]::-moz-range-track { background: none; }

.empty {
  padding: var(--s8) var(--s4); text-align: center; display: grid;
  gap: var(--s3); justify-items: center;
}

/* ==========================================================================
   packages
   ========================================================================== */

.bundles { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.bundle {
  background: var(--seamless); border: 1px solid var(--line);
  border-radius: var(--r-panel); overflow: hidden;
  display: grid; grid-template-columns: 1fr; align-content: start;
}
.bundle__shots { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid var(--line-soft); }
.bundle__shot { border-inline-end: 1px solid var(--line-soft); }
.bundle__shot:last-child { border-inline-end: 0; }
.bundle__shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; }
.bundle__body { padding: var(--s5); display: grid; gap: var(--s3); justify-items: start; }
.bundle__name { font-size: var(--text-lg); }
.bundle__desc { font-size: var(--text-sm); color: var(--ink-soft); }
.bundle__list { list-style: none; padding: 0; display: grid; gap: var(--s1); }
.bundle__list li {
  font-size: var(--text-sm); color: var(--ink-soft);
  padding-inline-start: var(--s4); position: relative;
}
.bundle__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}
.bundle__prices { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.chip--offers { border-color: var(--gold-line); color: var(--gold-deep); }
.chip--offers[data-active="true"] { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }

@media (max-width: 560px) {
  .bundles { grid-template-columns: 1fr; }
}

.skeleton {
  background: linear-gradient(90deg, var(--line-soft) 25%, #f3f0ea 37%, var(--line-soft) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s infinite linear;
  border-radius: var(--r-card);
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skeleton--card { aspect-ratio: 4 / 5; }

@media (max-width: 560px) {
  /* 84px of thumbnail, the name, a stepper and a price will not share one row
     at 390px; the name ends up about 117px wide. Put the controls underneath. */
  .line {
    grid-template-columns: 72px 1fr; gap: var(--s3) var(--s4);
    align-items: start;
  }
  .line__price {
    grid-column: 2; display: flex; align-items: center; justify-content: space-between;
    gap: var(--s3); width: 100%;
  }
  .line__thumb { grid-row: span 2; }

  .grid { grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s3); }
  .chips { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
           margin-inline: calc(-1 * var(--s4)); padding-inline: var(--s4);
           scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { scroll-snap-align: start; }
}

/* ==========================================================================
   product detail
   ========================================================================== */

.back { font-size: var(--text-sm); text-decoration: none; display: inline-block; margin-block-end: var(--s4); }

.product { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s8); align-items: start; }

/* A shade picker runs longer than the photograph beside it, so the photograph
   follows rather than scrolling away and leaving a column of white. */
.gallery { display: grid; gap: var(--s3); position: sticky; top: calc(var(--s8) + var(--s2)); }
@media (max-width: 860px) { .gallery { position: static; } }
.gallery__main {
  background: var(--seamless); border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
}
.gallery__main img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; }
.gallery__thumbs { display: flex; gap: var(--s2); }
.gallery__thumb {
  width: 68px; min-height: 44px; border: 1px solid var(--line);
  border-radius: var(--r-card); background: var(--seamless); overflow: hidden;
}
.gallery__thumb[aria-current="true"] { border-color: var(--ink); }
.gallery__thumb img { aspect-ratio: 4 / 5; object-fit: contain; }

.detail { display: grid; gap: var(--s4); }
.detail__cat { font-size: var(--text-xs); letter-spacing: 0.05em; color: var(--mark, var(--gold)); font-weight: 500; }
.detail__name { font-size: var(--text-2xl); }
.detail__price {
  border-block: 1px solid var(--line); padding-block: var(--s4);
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
}
.detail__body { color: var(--ink-soft); }
.detail__points { display: grid; gap: var(--s2); padding: 0; list-style: none; }
.detail__points li {
  font-size: var(--text-sm); color: var(--ink-soft);
  padding-inline-start: var(--s4); position: relative;
}
.detail__points li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--mark, var(--gold));
}

.actions { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }

.stepper {
  display: flex; align-items: center; border: 1px solid var(--line);
  border-radius: var(--r-control); background: var(--seamless);
}
.stepper button { width: 2.6rem; height: 2.7rem; display: grid; place-items: center; color: var(--ink-soft); }
.stepper button:hover { color: var(--ink); }
.stepper output {
  min-width: 2.4rem; text-align: center; font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: var(--text-sm);
}

.buybar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 70;
  background: var(--seamless); border-top: 1px solid var(--line);
  padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  display: none; gap: var(--s3); align-items: center;
}
.buybar[data-show="true"] { display: flex; }
.buybar__name { flex: 1; font-size: var(--text-sm); font-weight: 500; }

@media (max-width: 860px) {
  .product { grid-template-columns: 1fr; gap: var(--s5); }
}

/* ==========================================================================
   cart, checkout, confirmation
   ========================================================================== */

.narrow { max-width: var(--shell-narrow); }

.lines { display: grid; gap: var(--s4); }
.line {
  display: grid; grid-template-columns: 84px 1fr auto; gap: var(--s4);
  align-items: center; padding-block-end: var(--s4); border-bottom: 1px solid var(--line);
}
.line__thumb { background: var(--seamless); border: 1px solid var(--line-soft); border-radius: var(--r-card); }
.line__thumb--bundle { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; gap: 1px; }
.line__thumb--bundle img { aspect-ratio: 1 / 1; object-fit: contain; }
.line__thumb img { aspect-ratio: 4 / 5; object-fit: contain; }
.line__name { font-weight: 500; font-size: var(--text-sm); }
.line__cat { font-size: var(--text-xs); color: var(--ink-faint); }
.line__remove {
  font-size: var(--text-xs); color: var(--ink-faint); text-decoration: underline;
  /* A 12px word is not a target. The padding gives it a real one without
     making the text any bigger. */
  padding-block: var(--s2); margin-block-start: var(--s1); min-height: 34px;
}
.line__remove:hover { color: var(--danger); }

.summary {
  background: var(--seamless); border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: var(--s5); display: grid; gap: var(--s3); margin-block-start: var(--s6);
}
.summary__row { display: flex; justify-content: space-between; align-items: baseline;
                gap: var(--s3); font-size: var(--text-sm); }
.summary__row--total { font-size: var(--text-md); font-weight: 600;
                       padding-block-start: var(--s3); border-top: 1px solid var(--line); }
.line__opts { font-size: var(--text-xs); color: var(--ink-faint); }
.line__price { text-align: end; }
.summary__note { font-size: var(--text-sm); color: var(--ink-soft); }

.form { display: grid; gap: var(--s4); }
.field { display: grid; gap: var(--s2); }
.field label { font-size: var(--text-sm); font-weight: 500; }
.field label span { color: var(--ink-faint); font-weight: 400; }
.field input, .field textarea {
  padding: 0.7rem var(--s3); border: 1px solid var(--line);
  border-radius: var(--r-control); background: var(--seamless); width: 100%;
}
.field textarea { min-height: 5.5rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--gold); }

.notice { padding: var(--s3) var(--s4); border-radius: var(--r-control); font-size: var(--text-sm); }
.notice--error { background: var(--danger-wash); color: var(--danger); }
.notice--policy {
  background: var(--gold-wash); border: 1px solid var(--gold-line);
  color: var(--ink-soft); display: grid; gap: var(--s2); padding: var(--s4);
}
.notice--policy b { color: var(--ink); font-size: var(--text-sm); }

.confirm { text-align: center; display: grid; gap: var(--s4); justify-items: center; padding-block: var(--s7); }
.confirm__mark {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold-wash); color: var(--gold-deep);
}

/* ==========================================================================
   assurance band, about, contact
   ========================================================================== */

.assurance { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.assurance__item { display: grid; gap: var(--s2); padding-block-start: var(--s3); border-top: 2px solid var(--gold); }
.assurance__title { font-size: var(--text-base); font-weight: 600; }
.assurance__body { font-size: var(--text-sm); color: var(--ink-soft); }
@media (max-width: 860px) { .assurance { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .assurance { grid-template-columns: 1fr; } }

.prose { display: grid; gap: var(--s4); max-width: 62ch; }
.prose p { color: var(--ink-soft); }

.contact__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s7); align-items: start; }
.contact__rows { display: grid; gap: var(--s4); margin-block: var(--s5); }
.contact__row { display: grid; gap: 2px; padding-block-end: var(--s3); border-bottom: 1px solid var(--line); }
.contact__row dt { font-size: var(--text-xs); color: var(--ink-faint); letter-spacing: 0.04em; }
.contact__row dd { margin: 0; font-weight: 500; }
.contact__map { border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.contact__map iframe { display: block; width: 100%; height: 380px; border: 0; }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; gap: var(--s5); } }

/* ==========================================================================
   footer
   ========================================================================== */

.footer { background: var(--green-deep); color: #d8dcd4; margin-block-start: var(--s8); padding-block: var(--s7) var(--s5); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s6); }
.footer__brand .mark { margin-block-end: var(--s3); }
.footer__tagline { color: #a6ae9f; font-size: var(--text-sm); margin-block-start: var(--s2); }
.footer__heading { font-size: var(--text-xs); letter-spacing: 0.06em; color: #a6ae9f; font-weight: 500; margin-block-end: var(--s3); }
.footer__link { display: block; color: #d8dcd4; text-decoration: none; font-size: var(--text-sm); padding-block: var(--s1); }
.footer__link:hover { color: #fff; }
.footer__base {
  margin-block-start: var(--s6); padding-block-start: var(--s4);
  border-top: 1px solid #3a4c33; display: flex; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap; font-size: var(--text-xs); color: #a6ae9f;
}
@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr; gap: var(--s5); } }

/* ==========================================================================
   toast
   ========================================================================== */

.toast {
  position: fixed; inset-inline: 0; bottom: var(--s6); z-index: 120;
  display: grid; justify-items: center; pointer-events: none;
  padding-inline: var(--s4);
}
.toast__msg {
  background: var(--ink); color: #fff; padding: var(--s3) var(--s5);
  border-radius: var(--r-pill); font-size: var(--text-sm); font-weight: 500;
  animation: pop 0.2s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }