/* ==========================================================================
   Indo Spy — page-level components
   --------------------------------------------------------------------------
   Loaded after style.css on every page. Split out rather than appended so the
   design system stays readable on its own: style.css is the vocabulary
   (tokens, buttons, forms, product card, header, footer), this file is the
   page furniture built out of it.

   Section map
     1. Breadcrumbs, page heads, pagination, long-form copy
     2. Shop and category — toolbar, filters, mobile filter drawer
     3. Product detail — gallery, buy box, accordion, lightbox, quick view
     4. Cart and checkout
     5. Account
     6. Contact and About
   ========================================================================== */

/* ==========================================================================
   1. Page furniture
   ========================================================================== */

.is-crumb {
  padding-block: var(--is-s4);
  font-size: var(--is-fs-xs);
  color: var(--is-text-2);
}
.is-crumb ol { display: flex; flex-wrap: wrap; gap: var(--is-s2); list-style: none; margin: 0; padding: 0; }
.is-crumb li::after { content: '/'; margin-left: var(--is-s2); color: var(--is-line); }
.is-crumb li:last-child::after { content: none; }
.is-crumb a:hover { color: var(--is-black); }
.is-crumb [aria-current] { color: var(--is-black); font-weight: 500; }

.is-pagehead { border-bottom: 1px solid var(--is-line); padding-bottom: var(--is-s6); margin-bottom: var(--is-s6); }
.is-pagehead h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); margin-bottom: var(--is-s3); }
.is-pagehead .is-lead { margin: 0; }
.is-pagehead__meta { margin-top: var(--is-s4); font-size: var(--is-fs-xs); color: var(--is-text-2); }

/* Category banner — the guide video beside the title. */
.is-catbanner { display: grid; gap: var(--is-s5); align-items: center; }
@media (min-width: 992px) { .is-catbanner { grid-template-columns: 1.4fr 1fr; gap: var(--is-s7); } }

/* No guide recorded: the heading takes the full width rather than leaving a
   column of empty space where a video would have been. */
@media (min-width: 992px) { .is-catbanner--solo { grid-template-columns: 1fr; } }

.is-catvideo { margin: 0; }
.is-catvideo__frame {
  aspect-ratio: 16 / 9; background: var(--is-bg-soft);
  border-radius: var(--is-radius); overflow: hidden;
}
.is-catvideo__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.is-catvideo__cap { margin-top: var(--is-s3); }
.is-catvideo__note {
  margin: var(--is-s1) 0 0; font-size: var(--is-fs-xs); color: var(--is-text-2);
}

.is-pager { display: flex; justify-content: center; gap: var(--is-s2); margin-top: var(--is-s7); flex-wrap: wrap; }
.is-pager button {
  min-width: 42px; height: 42px; padding: 0 var(--is-s3);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--is-line); border-radius: var(--is-radius-sm);
  background: var(--is-white); cursor: pointer;
  font-family: var(--is-font-display); font-size: var(--is-fs-sm); font-weight: 600;
  color: var(--is-ink);
}
.is-pager [aria-current="page"] { background: var(--is-black); border-color: var(--is-black); color: #fff; }
.is-pager button:hover:not([aria-current]):not([disabled]) { border-color: var(--is-black); }
.is-pager button[disabled] { opacity: .4; cursor: default; }

/* Long-form copy: policies, about, FAQ answers. */
.is-prose { max-width: 72ch; }
.is-prose h2 { font-size: var(--is-fs-h3); margin: var(--is-s7) 0 var(--is-s3); }
.is-prose h2:first-child { margin-top: 0; }
.is-prose p, .is-prose li { color: var(--is-ink-muted); font-size: var(--is-fs-sm); }
.is-prose ul { margin: 0 0 var(--is-s4); padding-left: var(--is-s5); display: grid; gap: var(--is-s2); }
.is-prose li::marker { color: var(--is-text-2); }

/* Sticky in-page contents for the policy pages. */
.is-doc { display: grid; gap: var(--is-s6); }
@media (min-width: 992px) { .is-doc { grid-template-columns: 240px minmax(0, 1fr); gap: var(--is-s8); align-items: start; } }
.is-doc__nav { display: none; }
@media (min-width: 992px) { .is-doc__nav { display: block; position: sticky; top: calc(var(--is-header-h) + var(--is-s4)); } }
.is-doc__nav ul { list-style: none; margin: var(--is-s3) 0 0; padding: 0; display: grid; gap: var(--is-s2); }
.is-doc__nav a { font-size: var(--is-fs-xs); color: var(--is-text-2); display: block; padding: 2px 0; }
.is-doc__nav a:hover { color: var(--is-black); }

/* ==========================================================================
   2. Shop and category
   ========================================================================== */

.is-shop { display: grid; gap: var(--is-s5); }
@media (min-width: 992px) { .is-shop { grid-template-columns: 260px minmax(0, 1fr); gap: var(--is-s7); align-items: start; } }

.is-filters { display: none; }
@media (min-width: 992px) { .is-filters { display: block; position: sticky; top: calc(var(--is-header-h) + var(--is-s4)); } }

.is-fgroup { border-bottom: 1px solid var(--is-line-soft); padding-bottom: var(--is-s4); margin-bottom: var(--is-s4); }
.is-fgroup:last-child { border-bottom: 0; margin-bottom: 0; }
.is-fgroup > .is-label { display: block; margin-bottom: var(--is-s3); }
.is-fopt { display: flex; align-items: center; gap: var(--is-s3); padding: var(--is-s1) 0; cursor: pointer; font-size: var(--is-fs-sm); color: var(--is-ink-muted); }
.is-fopt input { width: 17px; height: 17px; accent-color: var(--is-black); flex: none; cursor: pointer; }
.is-fopt__n { margin-left: auto; font-size: var(--is-fs-xs); color: var(--is-text-2); font-variant-numeric: tabular-nums; }
.is-fopt:hover { color: var(--is-black); }
.is-fopt--sub { padding-left: var(--is-s5); }

.is-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--is-s3);
  padding-bottom: var(--is-s4); margin-bottom: var(--is-s5);
  border-bottom: 1px solid var(--is-line);
}
.is-toolbar__count { font-size: var(--is-fs-sm); color: var(--is-text-2); margin-right: auto; }
.is-toolbar__count strong { color: var(--is-black); font-weight: 600; }
.is-toolbar .is-select { width: auto; min-height: 42px; }

.is-chips { display: flex; flex-wrap: wrap; gap: var(--is-s2); margin-bottom: var(--is-s5); }
.is-chips:empty { display: none; }
.is-chip {
  display: inline-flex; align-items: center; gap: var(--is-s2);
  padding: var(--is-s1) var(--is-s3);
  border: 1px solid var(--is-line); border-radius: 999px;
  background: var(--is-bg-soft);
  font-size: var(--is-fs-xs); color: var(--is-ink);
  cursor: pointer;
}
.is-chip:hover { border-color: var(--is-black); }
.is-chip svg { opacity: .55; }

/* Mobile filter drawer — the side cart's mechanics, mirrored to the left. */
.is-fdrawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 1300;
  width: min(340px, 90vw); background: var(--is-white);
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform var(--is-t);
}
.is-fdrawer.is-open { transform: none; }
.is-fdrawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--is-s4); border-bottom: 1px solid var(--is-line); }
.is-fdrawer__head h2 { margin: 0; font-size: 1rem; }
.is-fdrawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--is-s4); }
.is-fdrawer__foot { border-top: 1px solid var(--is-line); padding: var(--is-s4); display: grid; gap: var(--is-s2); }
.is-filterbtn { display: inline-flex; }
@media (min-width: 992px) { .is-filterbtn { display: none; } }

/* ==========================================================================
   3. Product detail
   ========================================================================== */

.is-pdp { display: grid; gap: var(--is-s6); }
@media (min-width: 992px) { .is-pdp { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--is-s8); align-items: start; } }

/* The gallery follows the reader instead of leaving a hole.
   MEASURED: at 1280px the media column was 604px tall next to an info column
   of 1155px, so 551px of the left-hand side was empty — the "blank spaces" in
   the review. align-items:start is right for the grid, but it means the short
   column just stops. Sticky is the standard answer: the image stays in view
   while the specifications, delivery and share blocks scroll past it, and the
   dead space disappears without shortening anything.

   Only where there IS a second column to scroll against — below 992px the two
   are stacked and sticky would pin the image over the text. */
@media (min-width: 992px) {
  .is-pdp > :first-child {
    position: sticky;
    top: calc(var(--is-header-h) + var(--is-s4));
    align-self: start;
  }
}
/* A square image 604px on a side is bigger than the decision needs and pushes
   the buy button below the fold on a laptop. Cap it so the price and the Add
   to cart button are visible without scrolling. */
@media (min-width: 992px) {
  .is-gallery__main { max-width: 520px; margin-inline: auto; }
}
/* Not sticky when the viewport is too short for it to help: on a 700px-tall
   laptop a sticky 520px image plus the header leaves almost nothing moving. */
@media (min-width: 992px) and (max-height: 700px) {
  .is-pdp > :first-child { position: static; }
}

.is-gallery__main {
  position: relative; aspect-ratio: 1 / 1;
  background: var(--is-bg-soft); border-radius: var(--is-radius); overflow: hidden;
  cursor: zoom-in; border: 0; padding: 0; width: 100%; display: block;
}
.is-gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: var(--is-s5); }
.is-gallery__thumbs { display: flex; gap: var(--is-s2); margin-top: var(--is-s3); flex-wrap: wrap; }
.is-gallery__thumbs:empty { display: none; }
.is-gallery__thumb {
  width: 72px; height: 72px; padding: 4px;
  border: 1px solid var(--is-line); border-radius: var(--is-radius-sm);
  background: var(--is-white); cursor: pointer;
}
.is-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.is-gallery__thumb[aria-selected="true"] { border-color: var(--is-black); box-shadow: inset 0 0 0 1px var(--is-black); }

.is-pdp__cat { display: block; margin-bottom: var(--is-s3); }
.is-pdp h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin-bottom: var(--is-s4); }
.is-pdp__prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--is-s3); margin-bottom: var(--is-s4); }
.is-pdp__price { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); font-weight: 700; font-family: var(--is-font-display); color: var(--is-black); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.is-pdp__short { color: var(--is-ink-muted); font-size: var(--is-fs-sm); margin-bottom: var(--is-s5); }
.is-pdp__stock { display: inline-flex; align-items: center; gap: var(--is-s2); font-size: var(--is-fs-sm); color: var(--is-ok); margin-bottom: var(--is-s5); }
.is-pdp__stock--out { color: var(--is-text-2); }
.is-pdp__buy { display: flex; flex-wrap: wrap; gap: var(--is-s3); align-items: center; margin-bottom: var(--is-s4); }
.is-pdp__buy .is-btn { flex: 1 1 170px; }
.is-pdp__meta { border-top: 1px solid var(--is-line); margin-top: var(--is-s5); padding-top: var(--is-s5); display: grid; gap: var(--is-s4); }
.is-pdp__metarow { display: flex; gap: var(--is-s3); font-size: var(--is-fs-sm); color: var(--is-ink-muted); }
.is-pdp__metarow svg { flex: none; color: var(--is-black); margin-top: 2px; }
.is-pdp__metarow strong { color: var(--is-black); font-family: var(--is-font-display); font-size: var(--is-fs-sm); display: block; }

/* Sticky buy bar on mobile. Driven by a passive scroll listener rather than
   IntersectionObserver — deterministic, and verifiable with a synthetic event. */
.is-stickybuy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 870;
  display: flex; align-items: center; gap: var(--is-s3);
  padding: var(--is-s3) var(--is-s4);
  background: var(--is-white);
  border-top: 1px solid var(--is-line);
  box-shadow: 0 -4px 16px rgba(0,0,0,.07);
  transform: translateY(110%);
  transition: transform var(--is-t);
}
.is-stickybuy.is-in { transform: none; }
@media (min-width: 992px) { .is-stickybuy { display: none; } }
.is-stickybuy__p { flex: 1 1 auto; min-width: 0; }
.is-stickybuy__n { font-size: var(--is-fs-xs); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.is-stickybuy__price { font-weight: 700; font-size: var(--is-fs-sm); font-variant-numeric: tabular-nums; }

/* Accordion — product info and FAQ */
.is-acc { border-top: 1px solid var(--is-line); }
.is-acc__item { border-bottom: 1px solid var(--is-line); }
.is-acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--is-s4);
  width: 100%; padding: var(--is-s4) 0;
  border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--is-font-display); font-weight: 600; font-size: var(--is-fs-sm); color: var(--is-black);
}
.is-acc__btn svg { flex: none; transition: transform var(--is-t); }
.is-acc__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Height is measured in JS so the transition has a real end value to run to. */
.is-acc__panel { overflow: hidden; height: 0; transition: height var(--is-t); }
.is-acc__inner { padding-bottom: var(--is-s5); }
.is-acc__inner p, .is-acc__inner li { font-size: var(--is-fs-sm); color: var(--is-ink-muted); }
.is-acc__inner p:last-child { margin-bottom: 0; }
.is-acc__inner ul { margin: 0; padding-left: var(--is-s5); display: grid; gap: var(--is-s2); }

/* Product copy: hold it to a readable measure and justify it.
   Applied to the prose children only — a specifications table must keep the
   full panel width. hyphens:auto is not optional here: justified text without
   it opens rivers of white space, badly at narrow widths. */
.is-acc__inner > p,
.is-acc__inner > ul,
.is-acc__inner > ol { max-width: 68ch; }
.is-acc__inner p { text-align: justify; hyphens: auto; }
.is-acc__inner li { hyphens: auto; }


.is-spec__row { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: var(--is-s4); padding: var(--is-s3) 0; border-bottom: 1px solid var(--is-line-soft); font-size: var(--is-fs-sm); }
.is-spec__row:last-child { border-bottom: 0; }
.is-spec__k { color: var(--is-text-2); }
.is-spec__v { color: var(--is-ink); }

.is-lightbox {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(0,0,0,.9);
  display: grid; place-items: center; padding: var(--is-s5);
  opacity: 0; transition: opacity var(--is-t);
}
.is-lightbox[hidden] { display: none; }
.is-lightbox.is-open { opacity: 1; }
.is-lightbox img { max-width: min(92vw, 900px); max-height: 86vh; object-fit: contain; background: #fff; border-radius: var(--is-radius); }
.is-lightbox__close { position: absolute; top: var(--is-s4); right: var(--is-s4); color: #fff; background: none; border: 0; cursor: pointer; padding: var(--is-s2); }

.is-modal {
  position: fixed; inset: 0; z-index: 1350;
  background: rgba(0,0,0,.55);
  display: grid; place-items: center; padding: var(--is-s4);
  opacity: 0; transition: opacity var(--is-t);
}
.is-modal[hidden] { display: none; }
.is-modal.is-open { opacity: 1; }
.is-modal__panel {
  width: min(860px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--is-white); border-radius: var(--is-radius);
  padding: var(--is-s5); position: relative;
}
.is-modal__close { position: absolute; top: var(--is-s3); right: var(--is-s3); }
.is-qv { display: grid; gap: var(--is-s5); }
@media (min-width: 768px) { .is-qv { grid-template-columns: 1fr 1fr; gap: var(--is-s6); } }
.is-qv__media { aspect-ratio: 1/1; background: var(--is-bg-soft); border-radius: var(--is-radius); overflow: hidden; }
.is-qv__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--is-s4); }

/* ==========================================================================
   4. Cart and checkout
   ========================================================================== */

.is-cartgrid { display: grid; gap: var(--is-s6); align-items: start; }
@media (min-width: 992px) { .is-cartgrid { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--is-s7); } }
@media (min-width: 1200px) { .is-cartgrid { grid-template-columns: minmax(0, 1fr) 400px; } }
/* An empty cart hides the summary; without this the grid keeps its second
   track and strands the empty state in a half-width column. */
.is-cartgrid:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); }

.is-panel { border: 1px solid var(--is-line); border-radius: var(--is-radius); padding: var(--is-s5); background: var(--is-white); }
.is-panel + .is-panel { margin-top: var(--is-s4); }
.is-panel__title { font-family: var(--is-font-display); font-weight: 700; font-size: var(--is-fs-sm); margin-bottom: var(--is-s4); color: var(--is-black); }
@media (min-width: 992px) { .is-summary { position: sticky; top: calc(var(--is-header-h) + var(--is-s4)); } }

.is-sum__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--is-s4); padding: var(--is-s2) 0; font-size: var(--is-fs-sm); }
.is-sum__row--total {
  border-top: 1px solid var(--is-line); margin-top: var(--is-s3); padding-top: var(--is-s4);
  font-family: var(--is-font-display); font-weight: 700; font-size: 1.125rem; color: var(--is-black);
}
.is-sum__k { color: var(--is-text-2); }
.is-sum__v { font-variant-numeric: tabular-nums; color: var(--is-ink); }
.is-sum__v--save { color: var(--is-accent-ink); font-weight: 600; }

.is-coupon { display: flex; gap: var(--is-s2); }
.is-coupon .is-input { min-height: 44px; }
.is-coupon__msg { font-size: var(--is-fs-xs); margin-top: var(--is-s2); display: none; }
.is-coupon__msg.is-on { display: block; }
.is-coupon__msg.is-ok { color: var(--is-ok); }
.is-coupon__msg.is-no { color: #B42318; }

.is-crow { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--is-s4); padding: var(--is-s5) 0; border-bottom: 1px solid var(--is-line-soft); }
@media (min-width: 768px) { .is-crow { grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: var(--is-s5); } }
.is-crow:first-child { padding-top: 0; }
.is-crow__media { aspect-ratio: 1/1; background: var(--is-bg-soft); border-radius: var(--is-radius-sm); overflow: hidden; }
.is-crow__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--is-s2); }
.is-crow__name { font-size: var(--is-fs-sm); font-weight: 500; display: block; margin-bottom: var(--is-s1); }
.is-crow__unit { font-size: var(--is-fs-xs); color: var(--is-text-2); }
.is-crow__foot { display: flex; align-items: center; gap: var(--is-s4); margin-top: var(--is-s3); flex-wrap: wrap; }
.is-crow__line { font-family: var(--is-font-display); font-weight: 700; font-size: 1.0625rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

.is-steps { display: flex; flex-wrap: wrap; gap: var(--is-s4); margin-bottom: var(--is-s6); font-size: var(--is-fs-xs); }
.is-step { display: inline-flex; align-items: center; gap: var(--is-s2); color: var(--is-text-2); }
.is-step__n { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--is-line); display: grid; place-items: center; font-weight: 700; font-family: var(--is-font-display); font-size: 11px; }
.is-step--on { color: var(--is-black); font-weight: 600; }
.is-step--on .is-step__n { background: var(--is-black); border-color: var(--is-black); color: #fff; }

.is-grid2 { display: grid; gap: 0 var(--is-s4); }
@media (min-width: 576px) { .is-grid2 { grid-template-columns: 1fr 1fr; } }
.is-grid2 .is-span { grid-column: 1 / -1; }

.is-choice { display: grid; gap: var(--is-s2); }
.is-choice__opt {
  display: flex; align-items: flex-start; gap: var(--is-s3);
  padding: var(--is-s4);
  border: 1px solid var(--is-line); border-radius: var(--is-radius-sm);
  cursor: pointer;
}
.is-choice__opt:has(input:checked) { border-color: var(--is-black); box-shadow: inset 0 0 0 1px var(--is-black); }
.is-choice__opt input { margin-top: 3px; accent-color: var(--is-black); width: 17px; height: 17px; flex: none; }
.is-choice__t { font-family: var(--is-font-display); font-weight: 600; font-size: var(--is-fs-sm); display: block; }
.is-choice__d { font-size: var(--is-fs-xs); color: var(--is-text-2); margin: 2px 0 0; }

/* Mini line list inside the checkout summary. */
.is-mini { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: var(--is-s3); align-items: center; padding-block: var(--is-s3); border-bottom: 1px solid var(--is-line-soft); }
.is-mini:last-of-type { border-bottom: 0; }
.is-mini__media { aspect-ratio: 1/1; background: var(--is-bg-soft); border-radius: 4px; overflow: hidden; }
.is-mini__media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.is-mini__n { font-size: var(--is-fs-xs); line-height: 1.35; }
.is-mini__q { color: var(--is-text-2); }
.is-mini__v { font-size: var(--is-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==========================================================================
   5. Account
   ========================================================================== */

.is-account { display: grid; gap: var(--is-s5); align-items: start; }
@media (min-width: 992px) { .is-account { grid-template-columns: 250px minmax(0, 1fr); gap: var(--is-s7); } }
.is-acctnav { list-style: none; margin: 0; padding: 0; border: 1px solid var(--is-line); border-radius: var(--is-radius); overflow: hidden; }
.is-acctnav li + li { border-top: 1px solid var(--is-line-soft); }
.is-acctnav button {
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: var(--is-s3) var(--is-s4);
  font-family: var(--is-font-display); font-weight: 600; font-size: var(--is-fs-sm); color: var(--is-ink);
  display: flex; align-items: center; gap: var(--is-s3);
}
.is-acctnav button:hover { background: var(--is-bg-soft); }
.is-acctnav [aria-current="true"] { background: var(--is-black); color: #fff; }
.is-acctnav [aria-current="true"]:hover { background: var(--is-black); }

.is-authwrap { max-width: 460px; margin-inline: auto; }
.is-authwrap .is-panel { padding: var(--is-s6); }
.is-authalt { text-align: center; margin-top: var(--is-s4); font-size: var(--is-fs-sm); color: var(--is-text-2); }
.is-authalt a { color: var(--is-black); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.is-table { width: 100%; border-collapse: collapse; font-size: var(--is-fs-sm); }
.is-table th, .is-table td { text-align: left; padding: var(--is-s3); border-bottom: 1px solid var(--is-line-soft); white-space: nowrap; }
.is-table th { font-family: var(--is-font-display); font-size: var(--is-fs-label); letter-spacing: var(--is-ls-label); text-transform: uppercase; color: var(--is-text-2); }
.is-table td { color: var(--is-ink-muted); }
.is-tablewrap { overflow-x: auto; }

.is-pill { display: inline-block; padding: 2px var(--is-s2); border-radius: 999px; font-size: var(--is-fs-label); font-weight: 700; font-family: var(--is-font-display); letter-spacing: .04em; text-transform: uppercase; }
.is-pill--ok { background: #E7F5EE; color: #0F6B45; }
.is-pill--wait { background: #FFF4E5; color: #96400A; }

/* ==========================================================================
   6. Contact and About
   ========================================================================== */

.is-contact { display: grid; gap: var(--is-s6); align-items: start; }
@media (min-width: 992px) { .is-contact { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--is-s7); } }
.is-infolist { display: grid; gap: var(--is-s5); }
.is-infoitem { display: flex; gap: var(--is-s3); }
.is-infoitem svg { flex: none; color: var(--is-black); margin-top: 3px; }
.is-infoitem__t { font-family: var(--is-font-display); font-weight: 600; font-size: var(--is-fs-sm); display: block; margin-bottom: 2px; }
.is-infoitem__d { font-size: var(--is-fs-sm); color: var(--is-ink-muted); margin: 0; line-height: 1.6; }
.is-infoitem__d a { text-decoration: underline; text-underline-offset: 3px; }

.is-figures { display: grid; gap: var(--is-s5); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 768px) { .is-figures { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.is-figure__n { font-family: var(--is-font-display); font-weight: 800; font-size: clamp(1.8rem,1.4rem+1.6vw,2.6rem); color: var(--is-black); letter-spacing: -0.03em; line-height: 1; }
.is-figure__l { font-size: var(--is-fs-xs); color: var(--is-text-2); margin-top: var(--is-s2); }

.is-split { display: grid; gap: var(--is-s6); align-items: center; }
@media (min-width: 992px) { .is-split { grid-template-columns: 1fr 1fr; gap: var(--is-s8); } }
.is-split__media { aspect-ratio: 4/3; background: var(--is-bg-soft); border-radius: var(--is-radius); overflow: hidden; }
.is-split__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--is-s5); }

/* Form success panel, shown in place of a submitted form. */
.is-success {
  border: 1px solid var(--is-ok); border-radius: var(--is-radius);
  padding: var(--is-s5); background: #F3FAF6;
}
.is-success h2, .is-success h3 { font-size: var(--is-fs-h3); margin-bottom: var(--is-s2); }
.is-success p { font-size: var(--is-fs-sm); color: var(--is-ink-muted); margin: 0; }

/* ==========================================================================
   About — the store, rather than a page of prose
   ========================================================================== */

/* Inside the store: one photograph leading, the rest tiled beside it, so the
   section reads as being shown round a room instead of a contact sheet. */
.is-store { display: grid; gap: var(--is-s4); }
@media (min-width: 992px) { .is-store { grid-template-columns: 1.25fr 1fr; align-items: stretch; } }
.is-store--single { grid-template-columns: 1fr; }

.is-store figure { margin: 0; }
.is-store img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--is-radius); background: var(--is-bg-soft);
}
.is-store figcaption {
  margin-top: var(--is-s2); font-size: var(--is-fs-xs); color: var(--is-text-2);
}

.is-store__lead img { aspect-ratio: 4 / 3; }

/* Beside the tiles, the lead photograph fills the row instead of ending short
   of it — two columns finishing at different heights reads as a mistake
   rather than as a layout. */
@media (min-width: 992px) {
  .is-store__lead { display: flex; flex-direction: column; }
  .is-store__lead img { aspect-ratio: auto; flex: 1; min-height: 320px; }
}

.is-store__grid { display: grid; gap: var(--is-s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Tiles keep their captions on one line's worth of space so the rows line up
   even when one caption is longer than another. */
.is-store__tile { display: flex; flex-direction: column; }
.is-store__tile figcaption { flex: 1; }
.is-store__grid img { aspect-ratio: 1 / 1; }

/* A single tile beside the lead photograph would leave a hole; let it run
   the full width of its column instead. */
.is-store__grid > :only-child { grid-column: 1 / -1; }
.is-store__grid > :only-child img { aspect-ratio: 16 / 9; }

/* What a visit looks like — numbered, because it is a sequence. */
.is-visit {
  list-style: none; margin: var(--is-s6) 0 0; padding: 0;
  display: grid; gap: var(--is-s5);
}
@media (min-width: 768px) { .is-visit { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--is-s6); } }
.is-visit li { margin: 0; }
.is-visit__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  font-family: var(--is-font-display); font-weight: 700; font-size: var(--is-fs-sm);
  margin-bottom: var(--is-s3);
}
.is-visit h3 { font-size: var(--is-fs-h3); margin-bottom: var(--is-s2); }
.is-visit p { font-size: var(--is-fs-sm); margin: 0; }

/* Find us. */
.is-visitcard {
  border: 1px solid var(--is-line); border-radius: var(--is-radius);
  padding: var(--is-s6); background: var(--is-bg-soft);
}
@media (min-width: 768px) { .is-visitcard { padding: var(--is-s7); } }
.is-visitcard h2 { margin: var(--is-s2) 0 var(--is-s4); }
.is-visitcard__addr { font-size: var(--is-fs-sm); margin-bottom: var(--is-s3); }
.is-visitcard__meta { font-size: var(--is-fs-sm); color: var(--is-text-2); margin-bottom: var(--is-s5); }
.is-visitcard__meta strong { color: var(--is-ink); margin-right: var(--is-s2); }
.is-visitcard__cta { display: flex; flex-wrap: wrap; gap: var(--is-s3); }

/* ==========================================================================
   Product page sections — description, specification, video, questions,
   comparison, reviews, related, recently viewed
   --------------------------------------------------------------------------
   One column of sections rather than WooCommerce's tabs. Tabs hide two thirds
   of the page behind a click nobody makes.
   ========================================================================== */

.is-psection {
  border-top: 1px solid var(--is-line);
  padding-top: var(--is-s6);
  margin-top: var(--is-s7);
}
.is-psection__head { margin-bottom: var(--is-s5); }
.is-psection__head h2 { font-size: clamp(1.3rem, 1.15rem + 0.8vw, 1.8rem); margin: var(--is-s2) 0 0; }
.is-psection__note { font-size: var(--is-fs-sm); color: var(--is-text-2); margin: var(--is-s2) 0 0; max-width: 62ch; }

/* Specification: one table, Camera to What’s inside the box. Capped so the
   label and its value stay close enough to read across on a wide screen. */
.is-specwrap { max-width: 900px; }

.is-specs { margin: 0; border-top: 1px solid var(--is-line); }
.is-specs__row {
  display: grid; grid-template-columns: minmax(9rem, 40%) 1fr; gap: var(--is-s4);
  padding: var(--is-s3) 0; border-bottom: 1px solid var(--is-line-soft, var(--is-line));
}
.is-specs dt { color: var(--is-text-2); font-size: var(--is-fs-sm); }
.is-specs dd {
  margin: 0; color: var(--is-ink); font-size: var(--is-fs-sm);
  font-family: var(--is-font-display); font-weight: 600;
}

/* What’s inside the box: the last row, one item per line. */
.is-specs__box { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.is-specs__box li { position: relative; padding-left: 16px; }
.is-specs__box li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--is-ink);
}

/* .is-inbox is no longer printed (the box is a table row); kept for cached pages. */
.is-inbox { background: var(--is-bg-soft); border-radius: var(--is-radius); padding: var(--is-s5); }
.is-inbox h3 { font-size: var(--is-fs-h3); margin: 0 0 var(--is-s3); }
.is-inbox ul { margin: 0; padding-left: var(--is-s5); display: grid; gap: var(--is-s2); }
.is-inbox li { font-size: var(--is-fs-sm); color: var(--is-ink-muted); }
.is-inbox__note {
  margin: var(--is-s4) 0 0; padding-top: var(--is-s4);
  border-top: 1px solid var(--is-line);
  font-size: var(--is-fs-xs); color: var(--is-text-2);
}

/* Video: the same 16:9 frame as the category guide. */
.is-pvideo {
  aspect-ratio: 16 / 9; max-width: 880px;
  background: var(--is-bg-soft); border-radius: var(--is-radius); overflow: hidden;
}
.is-pvideo iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Questions. Open <details>, so the answers are in the page, not in a script. */
.is-qa { border-top: 1px solid var(--is-line); max-width: 80ch; }
.is-qa__item { border-bottom: 1px solid var(--is-line); }
.is-qa__item summary {
  cursor: pointer; list-style: none; padding: var(--is-s4) var(--is-s5) var(--is-s4) 0;
  position: relative; font-family: var(--is-font-display); font-weight: 600;
  font-size: var(--is-fs-sm); color: var(--is-ink);
}
.is-qa__item summary::-webkit-details-marker { display: none; }
.is-qa__item summary::after {
  content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 1.25rem; color: var(--is-text-2); line-height: 1;
}
.is-qa__item[open] summary::after { content: '\2212'; }
.is-qa__item summary:hover { color: var(--is-black); }
.is-qa__item p {
  margin: 0; padding: 0 var(--is-s5) var(--is-s4) 0;
  font-size: var(--is-fs-sm); color: var(--is-ink-muted);
}
.is-qa__ask { margin-top: var(--is-s4); font-size: var(--is-fs-sm); color: var(--is-text-2); }
.is-qa__ask a { text-decoration: underline; text-underline-offset: 3px; }

/* Comparison. Scrolls sideways on a phone rather than crushing four columns. */
.is-comparewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.is-compare { width: 100%; min-width: 560px; border-collapse: collapse; }
.is-compare th, .is-compare td {
  text-align: left; padding: var(--is-s3); border-bottom: 1px solid var(--is-line);
  font-size: var(--is-fs-sm); vertical-align: top;
}
.is-compare tbody th {
  color: var(--is-text-2); font-weight: 400; width: 30%;
}
.is-compare thead th { border-bottom: 2px solid var(--is-line); vertical-align: bottom; }
.is-compare thead img {
  width: 100%; max-width: 110px; height: auto; display: block;
  margin-bottom: var(--is-s2); border-radius: var(--is-radius-sm); background: var(--is-bg-soft);
}
.is-compare__name {
  display: block; font-family: var(--is-font-display); font-weight: 600;
  font-size: var(--is-fs-xs); color: var(--is-ink); line-height: 1.35;
}
.is-compare thead a:hover .is-compare__name { color: var(--is-black); text-decoration: underline; }
.is-compare__flag {
  display: inline-block; margin-top: var(--is-s2);
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--is-text-2);
}

/* The column you are on, held apart from the rest. */
.is-compare--this { background: var(--is-bg-soft); }
.is-compare thead .is-compare--this { border-bottom-color: var(--is-black); }

/* A short standing note rather than a section with a heading. */
.is-psection--note p {
  margin: 0; max-width: 90ch;
  font-size: var(--is-fs-sm); color: var(--is-ink-muted);
}
.is-psection--note strong { color: var(--is-black); font-family: var(--is-font-display); }
.is-psection--note a { text-decoration: underline; text-underline-offset: 3px; }

/* Key benefits, out of an imported paragraph: label, then the explanation. */
.is-benefits__h { font-size: var(--is-fs-h3); margin: var(--is-s6) 0 var(--is-s4); }
.is-benefits {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--is-s3);
}
@media (min-width: 768px) { .is-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--is-s4) var(--is-s6); } }
.is-benefits li {
  display: grid; gap: 2px;
  padding-left: var(--is-s4); position: relative;
  font-size: var(--is-fs-sm); color: var(--is-ink-muted);
}
.is-benefits li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--is-black);
}
.is-benefits strong {
  color: var(--is-black); font-family: var(--is-font-display);
  font-weight: 600; font-size: var(--is-fs-sm);
}

/* The ranges, in pictures — the About page's images until store photographs
   of its own exist. */
.is-range { display: grid; gap: var(--is-s4); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--is-s6); }
@media (min-width: 768px) { .is-range { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--is-s5); } }
.is-range__tile { display: block; }
.is-range__tile img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  background: var(--is-white); border-radius: var(--is-radius);
  padding: var(--is-s4); display: block;
}
.is-range__name {
  display: block; margin-top: var(--is-s3);
  font-family: var(--is-font-display); font-weight: 600;
  font-size: var(--is-fs-sm); color: var(--is-ink);
}
.is-range__n { display: block; font-size: var(--is-fs-xs); color: var(--is-text-2); }
.is-range__tile:hover .is-range__name { text-decoration: underline; text-underline-offset: 3px; }

/* About body: the heading beside its text, not stacked above a narrow column
   with half the screen empty to the right. */
.is-aboutrow { display: grid; gap: var(--is-s4); padding-block: var(--is-s6); border-top: 1px solid var(--is-line); }
.is-aboutrow:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 992px) {
  .is-aboutrow { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--is-s7); align-items: start; }
}
.is-aboutrow h2 { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 2rem); margin: 0; }
.is-aboutrow .is-prose { max-width: 68ch; }
.is-aboutrow .is-prose p:last-child { margin-bottom: 0; }

/* A list of claims reads as a set of points, not as bullets. */
.is-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--is-s4); }
@media (min-width: 768px) { .is-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--is-s4) var(--is-s6); } }
.is-points li {
  display: flex; gap: var(--is-s3); align-items: flex-start;
  font-size: var(--is-fs-sm); color: var(--is-ink);
}
.is-points svg { flex: none; margin-top: 2px; color: var(--is-black); }

/* Optional second line on a point. The theme's page-authored points are a
   single phrase; the prototype's five have a heading and an explanation, and
   a point that can carry both is strictly more useful than one that cannot. */
.is-points__t { display: block; font-family: var(--is-font-display); font-weight: 600; color: var(--is-ink); }
.is-points__d { display: block; margin-top: 2px; font-size: var(--is-fs-xs); line-height: 1.6; color: var(--is-text-2); }


/* About intro: the picture on the left, the words on the right. */
.is-intro { display: grid; gap: var(--is-s5); align-items: center; }
@media (min-width: 992px) { .is-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--is-s8); } }

.is-intro__media {
  border-radius: var(--is-radius); overflow: hidden;
  background: var(--is-bg-soft);
}
/* A photograph fills its frame; a product shot on white is padded so it is
   not cropped into. Both arrive here, so the frame handles both. */
.is-intro__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }

.is-intro__text h2 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.3rem); margin: var(--is-s2) 0 var(--is-s4); }
.is-intro__text .is-prose { max-width: 58ch; }
.is-intro__cta { display: flex; flex-wrap: wrap; gap: var(--is-s3); margin-top: var(--is-s5); }


/* Support hub — the routing cards on support.html. */
.is-support {
  display: grid;
  gap: var(--is-s4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: var(--is-s5);
}
.is-support__card {
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius);
  padding: var(--is-s5);
  background: var(--is-white);
}
.is-support__card h3 { font-size: var(--is-fs-base); margin: 0 0 var(--is-s2); }
.is-support__card p { margin: 0 0 var(--is-s2); font-size: var(--is-fs-sm); }
.is-support__card p:last-child { margin-bottom: 0; }
.is-support__icon { display: inline-flex; margin-bottom: var(--is-s3); color: var(--is-ink-muted); }
.is-support__note { color: var(--is-text-2); font-size: var(--is-fs-xs) !important; }

/* The whole card is the link, so the hit area matches what it looks like. */
.is-support__card--link {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: border-color var(--is-t), transform var(--is-t);
}
.is-support__card--link:hover { border-color: var(--is-ink); transform: translateY(-2px); }
.is-support__go {
  margin-top: auto; padding-top: var(--is-s3);
  display: inline-flex; align-items: center; gap: var(--is-s2);
  font-size: var(--is-fs-sm); font-weight: 600;
}

.is-support__note-block {
  border-left: 3px solid var(--is-line);
  padding: var(--is-s4) 0 var(--is-s4) var(--is-s5);
}
.is-support__note-block h3 { font-size: var(--is-fs-base); margin: 0 0 var(--is-s2); }
.is-support__note-block p { margin: 0; font-size: var(--is-fs-sm); }


/* Share this product (item 14). */
.is-share { margin-top: var(--is-s5); padding-top: var(--is-s4); border-top: 1px solid var(--is-line); }
.is-share__label {
  display: block; margin-bottom: var(--is-s3);
  font-size: var(--is-fs-xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--is-text-2);
}
.is-share__list { display: flex; flex-wrap: wrap; gap: var(--is-s2); }
.is-share__btn {
  display: inline-flex; align-items: center; gap: var(--is-s2);
  padding: 8px 13px;
  border: 1px solid var(--is-line); border-radius: 999px;
  background: var(--is-white); color: var(--is-ink);
  font: inherit; font-size: var(--is-fs-sm); line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: border-color var(--is-t), background var(--is-t);
}
.is-share__btn:hover, .is-share__btn:focus-visible {
  border-color: var(--is-ink); background: var(--is-bg-soft);
}
.is-share__btn svg { flex: none; }

/* On a phone the sheet covers everything these do, so the individual
   networks step back and the sheet leads. */
@media (max-width: 575px) {
  .is-share__btn--native { order: -1; }
  .is-share__btn--facebook, .is-share__btn--x { display: none; }
}

/* Compact Share, beside Compare in the product page's action row. The button
   matches .is-compare-toggle--full; the links open as a small menu under it.
   Without the script (.is-share--js absent) the links just sit on their own
   line below the row. */
.is-share--inline { position: relative; margin: 0; padding: 0; border: 0; }
.is-share__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--is-line); border-radius: var(--is-radius-sm, 8px);
  background: var(--is-white); color: var(--is-text-2);
  font: inherit; font-size: var(--is-fs-sm); line-height: 1;
  cursor: pointer;
  transition: border-color var(--is-t), color var(--is-t);
}
.is-share__toggle:hover, .is-share__toggle:focus-visible,
.is-share--inline.is-open .is-share__toggle { border-color: var(--is-ink); color: var(--is-ink); }
.is-share__toggle svg { flex: none; }
.is-share--inline:not(.is-share--js) { flex-basis: 100%; }
.is-share--inline:not(.is-share--js) .is-share__toggle { display: none; }
.is-share--js .is-share__list {
  display: none;
  position: absolute; z-index: 40; top: calc(100% + 6px); right: 0;
  flex-direction: column; gap: 2px;
  min-width: 190px; padding: 6px;
  background: var(--is-white);
  border: 1px solid var(--is-line); border-radius: var(--is-radius-sm, 8px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}
.is-share--js.is-open .is-share__list { display: flex; }
.is-share--js .is-share__btn {
  width: 100%; justify-content: flex-start;
  padding: 10px 12px; border: 0; border-radius: 6px;
}
.is-share--js .is-share__btn:hover, .is-share--js .is-share__btn:focus-visible { background: var(--is-bg-soft); }
/* In the menu every network fits, so the phone rule above does not apply. */
.is-share--js .is-share__btn--facebook, .is-share--js .is-share__btn--x { display: inline-flex; }


/* Support FAQ (SEO/GEO/AEO). A definition list because that is what a
   question and its answer are; it also gives an answer engine an unambiguous
   pairing without relying on heading order. */
.is-support-faq { max-width: 74ch; }
.is-support-faq h2 { margin-bottom: var(--is-s4); }
.is-support-faq__list { margin: 0; }
.is-support-faq__item { padding: var(--is-s4) 0; border-bottom: 1px solid var(--is-line-soft, var(--is-line)); }
.is-support-faq__item:last-child { border-bottom: 0; }
.is-support-faq__item dt {
  font-family: var(--is-font-display);
  font-weight: 600;
  margin-bottom: var(--is-s2);
}
.is-support-faq__item dd {
  margin: 0;
  font-size: var(--is-fs-sm);
  line-height: 1.8;
  color: var(--is-ink-muted);
}