/* 1.1 · A navigation island that stands out, colour dots on product cards and the free-shipping progress. */
:root { --stock-in:#56704d; }

/* Header: the original layout (logo on the left, menu island on the right).
   The island gets its own surface, edge and shadow, so it no longer reads as a pale box on a pale page. */
body .site-header .navigation-island {
  border:1px solid rgba(59,46,38,.14); border-radius:999px;
  background:rgba(255,253,250,.94); -webkit-backdrop-filter:saturate(1.3) blur(14px); backdrop-filter:saturate(1.3) blur(14px);
  box-shadow:0 1px 2px rgba(36,26,20,.05), 0 16px 36px -18px rgba(36,26,20,.42);
  transition:box-shadow .35s var(--ease);
}
body .site-header .header-actions .icon-button { border-radius:50%; transition:background-color .25s; }
body .site-header .header-actions .icon-button:hover { background:#efe8df; }
body .site-header .desktop-nav a[aria-current="page"]::after { transform:scaleX(1); }
@media (min-width:761px) {
  /* Height of the logo / island row; product and catalog content start below it. */
  :root { --header-h:max(calc(clamp(174px,9vw,300px) * .356), calc(clamp(44px,2.4vw,72px) + var(--text-ui) * 1.1)); }
  body .site-header .navigation-island { padding:.35em .5em .35em 1.7em; }
  body.is-scrolled .site-header .navigation-island { box-shadow:0 1px 2px rgba(36,26,20,.06), 0 20px 44px -18px rgba(36,26,20,.55); }
}
@media (max-width:760px) {
  :root { --header-h:calc(132px * .356 + 28px); }
  body .site-header .navigation-island { padding:2px 4px; box-shadow:0 1px 2px rgba(36,26,20,.05), 0 10px 22px -14px rgba(36,26,20,.4); }
  /* The phone header is already a full-width bar; a soft edge separates it from content scrolling underneath. */
  body.is-scrolled .site-header { box-shadow:0 12px 26px -20px rgba(36,26,20,.5); }
}

/* Product cards: the real colours, each opening the product with that colour chosen. */
/* Positioned, so the screen-reader label stays inside horizontally scrolling carousels. */
.product-card__meta { position:relative; }
.product-card__meta:has(.card-swatches) { display:flex; align-items:center; gap:8px; min-height:18px; margin-top:8px; }
.card-swatches { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.card-swatch { position:relative; display:block; width:14px; height:14px; flex:0 0 14px; border-radius:50%; background:var(--swatch); box-shadow:inset 0 0 0 1px rgba(36,26,20,.2); transition:transform .25s var(--ease), box-shadow .25s; }
a.card-swatch::before { content:''; position:absolute; inset:-7px; border-radius:50%; }
a.card-swatch:hover, a.card-swatch:focus-visible { transform:scale(1.2); box-shadow:inset 0 0 0 1px rgba(36,26,20,.25), 0 0 0 2px var(--ivory), 0 0 0 3px var(--ink); }
.card-swatch--out { opacity:.4; }
.card-swatch-more, .card-swatch-name { font-size:var(--text-label, 12px); color:var(--muted); line-height:1; }
@media (max-width:760px) {
  .card-swatches { gap:6px; }
  .card-swatch { width:12px; height:12px; flex-basis:12px; }
}

/* Cart: progress towards the free-shipping threshold configured in WooCommerce. */
.free-shipping-progress { margin:0 0 22px; padding:16px 18px; border-radius:14px; background:var(--ivory); border:1px solid #d6cbc0; }
.free-shipping-progress p { margin:0 0 10px; font-size:var(--text-caption); line-height:1.5; }
.free-shipping-progress strong { font-weight:600; }
.free-shipping-progress__track { display:block; height:6px; border-radius:6px; background:#e3d9ce; overflow:hidden; }
.free-shipping-progress__track > span { display:block; height:100%; border-radius:inherit; background:var(--ink); transition:width .6s var(--ease); }
.free-shipping-progress.is-complete .free-shipping-progress__track > span { background:var(--stock-in); }

@media (prefers-reduced-motion:reduce) {
  body .site-header .navigation-island, body .site-header .header-actions .icon-button, .card-swatch, .free-shipping-progress__track > span { transition:none; }
}
