/* ==========================================================================
   Indo Spy — requested changes
   --------------------------------------------------------------------------
   Loaded last, after style.css / pages.css / modules.css / woocommerce.css.

   Every rule here is a change asked for after the HTML sign-off, or a fix for
   a WooCommerce stylesheet rule that outranked the design. Keeping them in one
   file means the three approved stylesheets stay byte-identical to the build
   that was signed off, and every deviation from it is auditable in one place.

   Where a selector looks heavier than it needs to be, it is matching the
   specificity of the WooCommerce rule it has to beat. The weight is the point.
   ========================================================================== */


/* ==========================================================================
   1. Footer logo
   woocommerce-layout.css carries `.woocommerce img, .woocommerce-page img
   { height: auto }` — two classes and an element — which outranks the design's
   single-class `.is-footer__logo { height: 24px }`. On every shop page the
   footer mark therefore rendered at its natural size: 392x76 measured.
   Qualifying the selector with the element restores control, and the size is
   reduced as requested.
   ========================================================================== */

img.is-footer__logo,
.woocommerce img.is-footer__logo,
.woocommerce-page img.is-footer__logo {
  height: 20px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  object-position: left center;
}

.is-footer__logo--text { font-size: var(--is-fs-h3); height: auto; }


/* ==========================================================================
   2. Product page layout
   WooCommerce floats the gallery and the summary at 48% each
   (`.woocommerce div.product div.images`). Inside the design's two-column
   grid that halved both again: the gallery measured 304px in a 633px column
   and the summary 276px in a 575px one, which is why the title wrapped to
   three lines beside a small image. Clear the float and let the grid place
   them.
   ========================================================================== */

/* Why #content appears in every selector below.

   WooCommerce ships two copies of each float rule — one plain, one prefixed
   with `#content`:

     .woocommerce #content div.product div.images,
     .woocommerce div.product div.images { float: left; width: 48% }

   This theme's content wrapper is <div id="content" class="site-content">, so
   the ID copy matches, at specificity (1,3,3). An ID outranks any number of
   classes, so a class-only override — however many classes it carries — never
   wins. These selectors carry the ID too, which puts them at (1,4,1). */

.woocommerce #content div.product .is-pdp .is-pdp__gallery,
.woocommerce #content div.product .is-pdp .woocommerce-product-gallery,
.woocommerce #content div.product .is-pdp div.images,
.woocommerce #content div.product .is-pdp .is-pdp__summary,
.woocommerce #content div.product .is-pdp div.summary,
.woocommerce div.product .is-pdp .is-pdp__gallery,
.woocommerce div.product .is-pdp .woocommerce-product-gallery,
.woocommerce div.product .is-pdp div.images,
.woocommerce div.product .is-pdp .is-pdp__summary,
.woocommerce div.product .is-pdp div.summary {
  float: none;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}

/* The gallery frame: a square, pale stage the photograph sits inside, so
   portrait and landscape product shots both look deliberate. */
.woocommerce div.product .is-pdp .woocommerce-product-gallery__wrapper {
  margin: 0;
}

.woocommerce div.product .is-pdp .woocommerce-product-gallery__image {
  background: var(--is-bg-soft);
  border-radius: var(--is-radius);
  overflow: hidden;
}

.woocommerce div.product .is-pdp .woocommerce-product-gallery__image > a,
.woocommerce div.product .is-pdp .woocommerce-product-gallery__image {
  display: block;
}

.woocommerce div.product .is-pdp .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: var(--is-s5);
}

/* Thumbnail strip under the main image. */
.woocommerce #content div.product .is-pdp .flex-control-thumbs,
.woocommerce div.product .is-pdp .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--is-s3);
  margin: var(--is-s3) 0 0;
  padding: 0;
  list-style: none;
  float: none;
}

.woocommerce #content div.product .is-pdp .flex-control-thumbs li,
.woocommerce div.product .is-pdp .flex-control-thumbs li {
  width: auto;
  float: none;
  margin: 0;
  list-style: none;
}

.woocommerce div.product .is-pdp .flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: var(--is-s2);
  background: var(--is-bg-soft);
  border: 1px solid var(--is-line-soft);
  border-radius: var(--is-radius-sm);
  opacity: 1;
  cursor: pointer;
  transition: border-color var(--is-t);
}

.woocommerce div.product .is-pdp .flex-control-thumbs img:hover,
.woocommerce div.product .is-pdp .flex-control-thumbs img.flex-active {
  border-color: var(--is-black);
}

/* The summary column gets room to breathe now that it is full width. */
.woocommerce div.product .is-pdp .is-pdp__summary > * { max-width: 46rem; }

@media (min-width: 992px) {
  .woocommerce div.product .is-pdp .is-pdp__gallery {
    position: sticky;
    top: calc(var(--is-header-h) + var(--is-s4));
  }

  /* THE CAP BELONGS ON THE COLUMN, NOT ON THE IMAGE INSIDE IT.
     A full-width square in a 633px column is 633px tall and pushes the buying
     controls down the page, so the gallery is capped at 580px. Capping the
     ELEMENT left the grid column at 633px with 53px of it permanently empty:
     MEASURED at 1440px, the gap between the two columns rendered 116px where
     the design declares 64px. That unequal gutter is what reads as the page
     being misaligned, and the 53px is one of the blank spaces.

     Sizing the COLUMN instead gives the gallery exactly the width it is
     allowed, returns the gutter to the declared 64px, and hands the 53px to
     the summary - which is the column that actually wants it, because the
     add-to-cart row and the delivery checker wrap when it is narrow.

     min() rather than a flat 580px so the column still shrinks on a 1024px
     laptop instead of squeezing the summary to nothing. */
  .woocommerce div.product .is-pdp {
    grid-template-columns: minmax(0, min(580px, 52%)) minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Description / Additional information / Reviews

   The duplicate panel heading is removed in product.js, where the title moves
   onto the accordion button — see the note there for why it is not done here.
   -------------------------------------------------------------------------- */

/* Measured at 170 characters per line across a 1272px container. Prose wants
   60–75. Text is capped; tables and media still use the full width. */
.woocommerce-tabs .is-acc__inner > p,
.woocommerce-tabs .is-acc__inner > ul,
.woocommerce-tabs .is-acc__inner > ol,
.woocommerce-tabs .is-acc__inner > h3,
.woocommerce-tabs .is-acc__inner > h4,
.woocommerce-tabs .is-acc__inner > blockquote {
  max-width: 72ch;
}

.woocommerce-tabs .is-acc__inner > h3,
.woocommerce-tabs .is-acc__inner > h4 {
  font-family: var(--is-font-display);
  font-size: 1.0625rem;
  margin: var(--is-s5) 0 var(--is-s2);
}

.woocommerce-tabs .is-acc__inner > h3:first-child { margin-top: 0; }


/* ==========================================================================
   3. Category tiles — full-bleed images
   `object-fit: contain` with padding left a pale margin around every tile
   photograph. Cover fills the frame.
   ========================================================================== */

.is-cat__media img,
.is-cats .is-cat__media img {
  object-fit: cover;
  padding: 0;
}


/* ==========================================================================
   4. Category guide — centred measure
   The guide prose is capped at 72ch for readability, which left the right
   half of a 1320px container empty and read as a mis-alignment. Centring the
   column keeps the measure and loses the lopsidedness.
   ========================================================================== */

.is-catguide { display: block; }
.is-catguide .is-prose { margin-left: auto; margin-right: auto; }

@media (min-width: 992px) {
  .is-catguide .is-prose { max-width: 80ch; }
}


/* ==========================================================================
   5. My account — navigation left, content right
   Woo prints the navigation and the content as siblings and floats them; the
   float is already cleared in woocommerce.css, which left them stacked. This
   lays them out as the two columns asked for. The :has() guard keeps the
   logged-out login form full width, since that page has no navigation.
   ========================================================================== */

.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid;
  gap: var(--is-s5);
  align-items: start;
}

@media (min-width: 992px) {
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    grid-template-columns: 264px minmax(0, 1fr);
    gap: var(--is-s7);
  }

  /* Placed explicitly, not left to source order.

     Auto-placement puts whatever comes first into cell 1 — and something
     does: an empty .woocommerce-notices-wrapper, and anything a plugin
     prints into the account page. That pushed the navigation into column 2
     and the content down to row 2, column 1, which is exactly the stacked,
     mirrored layout that survived the first attempt at this fix. Naming the
     cells makes the result independent of what else is in the container. */
  .woocommerce-account .woocommerce-MyAccount-navigation {
    grid-column: 1;
    grid-row: 2;
    position: sticky;
    top: calc(var(--is-header-h) + var(--is-s4));
  }

  .woocommerce-account .woocommerce-MyAccount-content {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Notices belong across the top, not in the navigation column. The empty
   wrapper Woo always prints is removed from the flow entirely so it cannot
   open a blank first row. */
.woocommerce-account .woocommerce .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
  grid-row: 1;
}

.woocommerce-account .woocommerce .woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; }

.woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }

/* Orders and downloads tables: let them scroll rather than squeeze the
   column, which is what forced "March 18, 2026" onto three lines. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  min-width: 34rem;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__row td,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
  white-space: normal;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table td.woocommerce-orders-table__cell-order-date,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table td.woocommerce-orders-table__cell-order-total {
  white-space: nowrap;
}

/* Woo prints no wrapper around those tables, so the scroll container has to
   be the content column itself. */
.woocommerce-account .woocommerce-MyAccount-content { overflow-x: auto; }


/* ==========================================================================
   6. FAQ accordion
   The answers are in the page content as headings and paragraphs, which is
   what a search engine and a reader without JavaScript should get. The script
   folds each question into a <details> at run time; these rules style that,
   and nothing here hides content when the script does not run.
   ========================================================================== */

.is-faq { display: grid; gap: var(--is-s6); }

.is-faq__group { display: grid; gap: var(--is-s3); }

.is-faq__grouptitle {
  font-family: var(--is-font-display);
  font-size: var(--is-fs-h3);
  margin: 0 0 var(--is-s2);
}

.is-faq__item {
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius);
  background: #fff;
  overflow: hidden;
  transition: border-color var(--is-t), box-shadow var(--is-t);
}

.is-faq__item[open] { border-color: var(--is-black); box-shadow: var(--is-shadow-lift); }

.is-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--is-s4);
  padding: var(--is-s4) var(--is-s5);
  cursor: pointer;
  font-family: var(--is-font-display);
  font-weight: 600;
  font-size: var(--is-fs-sm);
  color: var(--is-black);
  list-style: none;
  transition: background var(--is-t);
}

.is-faq__q::-webkit-details-marker { display: none; }
.is-faq__q:hover { background: var(--is-bg-soft); }

.is-faq__q:focus-visible {
  outline: 2px solid var(--is-black);
  outline-offset: -2px;
}

/* The chevron is drawn, not an icon font, so it cannot fail to load. */
.is-faq__q::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 200ms ease;
}

.is-faq__item[open] .is-faq__q::after { transform: rotate(-135deg); margin-top: 8px; }

.is-faq__a {
  padding: 0 var(--is-s5) var(--is-s5);
  color: var(--is-ink-muted);
  font-size: var(--is-fs-sm);
}

.is-faq__a > :first-child { margin-top: 0; }
.is-faq__a > :last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .is-faq__q::after { transition: none; }
}


/* ==========================================================================
   7. Contact page — details left, map and form right
   ========================================================================== */

.is-contact { display: grid; gap: var(--is-s6); align-items: start; }

@media (min-width: 992px) {
  .is-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--is-s8); }
}

.is-contact__block + .is-contact__block { margin-top: var(--is-s6); }

.is-contact__blocktitle {
  font-family: var(--is-font-display);
  font-size: var(--is-fs-h4, 1.15rem);
  margin: 0 0 var(--is-s3);
}

.is-contact__list { display: grid; gap: var(--is-s3); }

.is-contact__row { display: flex; gap: var(--is-s3); font-size: var(--is-fs-sm); color: var(--is-ink-muted); }
.is-contact__row svg { flex: none; color: var(--is-black); margin-top: 3px; }
.is-contact__row a { color: var(--is-black); text-decoration: underline; text-underline-offset: 3px; }

.is-contact__map {
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius);
  overflow: hidden;
  background: var(--is-bg-soft);
  margin-bottom: var(--is-s5);
}

.is-contact__map iframe { display: block; width: 100%; height: 320px; border: 0; }

.is-contact__form {
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius);
  padding: var(--is-s5);
  background: #fff;
}

/* Contact Form 7 wears the design's inputs and button. */
.is-contact__form .wpcf7-form p { margin: 0 0 var(--is-s4); }

.is-contact__form label {
  display: block;
  font-family: var(--is-font-display);
  font-size: var(--is-fs-xs);
  font-weight: 600;
  color: var(--is-black);
  margin-bottom: var(--is-s2);
}

.is-contact__form input[type="text"],
.is-contact__form input[type="email"],
.is-contact__form input[type="tel"],
.is-contact__form input[type="url"],
.is-contact__form input[type="date"],
.is-contact__form input[type="number"],
.is-contact__form select,
.is-contact__form textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--is-s3) var(--is-s4);
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius-sm);
  background: #fff;
  color: var(--is-black);
  font: inherit;
  font-size: var(--is-fs-sm);
}

.is-contact__form textarea { min-height: 140px; resize: vertical; }

.is-contact__form input:focus,
.is-contact__form select:focus,
.is-contact__form textarea:focus {
  outline: 2px solid var(--is-black);
  outline-offset: -1px;
  border-color: var(--is-black);
}

.is-contact__form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--is-s6);
  border: 1px solid var(--is-black);
  border-radius: var(--is-radius-sm);
  background: var(--is-black);
  color: #fff;
  font-family: var(--is-font-display);
  font-size: var(--is-fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--is-t);
}

.is-contact__form .wpcf7-submit:hover { background: var(--is-charcoal); }

.is-contact__form .wpcf7-not-valid-tip { font-size: var(--is-fs-xs); color: #B42318; margin-top: var(--is-s2); }

.is-contact__form .wpcf7-response-output {
  margin: var(--is-s4) 0 0;
  padding: var(--is-s3) var(--is-s4);
  border-radius: var(--is-radius-sm);
  font-size: var(--is-fs-sm);
}

.is-contact__formnote { font-size: var(--is-fs-xs); color: var(--is-text-2); margin: var(--is-s4) 0 0; }


/* ==========================================================================
   8. Home — product finder band
   The band's right-hand frame was empty. It now holds a photograph from the
   catalogue; these rules keep it from stretching.
   ========================================================================== */

.is-promo__media img { object-fit: contain; }

/* An image chosen in Customize → Indo Spy → Shop. It arrives already composed,
   so it keeps its own shape (set inline from the real file's dimensions) and
   fills the frame. The white card and its padding belong to the automatic
   fallback — a cut-out product shot that needs the room — and leave a
   deliberately chosen picture marooned between two white bars. */
.is-promo__media--fill {
  background: transparent;
  aspect-ratio: 1 / 1;      /* fallback until the inline ratio lands */
}
.is-promo__media--fill img {
  object-fit: cover;
  padding: 0;
}

.is-promo__media:empty { display: none; }

@media (min-width: 992px) {
  .is-promo:has(.is-promo__media:empty) { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   9. FAQ accordion — refinements
   The base accordion is in section 6. These make it read as a designed list
   rather than a stack of bordered boxes.
   ========================================================================== */

.is-faqpage { max-width: 60rem; margin-inline: auto; }

.is-faq { gap: var(--is-s7); }

/* A group heading sits above its questions with a hairline, so "Buying" and
   "Delivery" read as sections rather than as two more questions. */
.is-faq__grouptitle {
  font-size: var(--is-fs-h4, 1.15rem);
  letter-spacing: -0.01em;
  padding-bottom: var(--is-s3);
  border-bottom: 1px solid var(--is-line);
}

.is-faq__group { gap: var(--is-s2); }

.is-faq__item {
  border-color: var(--is-line-soft);
  border-radius: var(--is-radius-sm);
}

.is-faq__item:hover { border-color: var(--is-line); }

.is-faq__item[open] {
  border-color: var(--is-line);
  box-shadow: none;
  background: var(--is-bg-soft);
}

.is-faq__q {
  font-size: 1rem;
  line-height: 1.45;
  padding: var(--is-s4) var(--is-s5);
}

.is-faq__item[open] .is-faq__q { background: transparent; }

.is-faq__a {
  padding-top: 0;
  line-height: 1.65;
  border-top: 1px solid var(--is-line-soft);
  margin: 0 var(--is-s5);
  padding-left: 0;
  padding-right: 0;
  padding-top: var(--is-s4);
}

/* The marker is a plus that becomes a minus — clearer than a chevron about
   what the control does, and it reads at a glance in a long list. */
.is-faq__q::after {
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border: 0;
  transform: none;
  background:
    linear-gradient(currentColor, currentColor) center/100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center/2px 100% no-repeat;
  opacity: .55;
  transition: opacity var(--is-t), transform 200ms ease;
}

/* The plus turns into a minus by rotating a quarter turn, which means the
   stroke that is KEPT has to be the upright one: rotated 90 degrees it lies
   down and reads as a minus. Keeping the horizontal stroke instead - which is
   what this rule did, and nothing ever rendered this accordion to catch it -
   rotated a dash upright and left an open question marked with a vertical
   bar. */
.is-faq__item[open] .is-faq__q::after {
  margin-top: 4px;
  transform: rotate(90deg);
  background: linear-gradient(currentColor, currentColor) center/2px 100% no-repeat;
  opacity: 1;
}

.is-faq__q:hover::after { opacity: 1; }


/* ==========================================================================
   10. Shop filters
   Was a bare column of native controls. Now a panel: each group titled, each
   option a full-width row with its own hover and selected state, and the
   count set as a pill so the eye can scan quantities down the right edge.
   ========================================================================== */

@media (min-width: 992px) {
  .is-filters {
    border: 1px solid var(--is-line);
    border-radius: var(--is-radius);
    padding: var(--is-s5);
    background: #fff;
    max-height: calc(100vh - var(--is-header-h) - var(--is-s6));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.is-filters .is-fgroup { border-bottom-color: var(--is-line-soft); }

.is-filters .is-fgroup > .is-label {
  font-size: var(--is-fs-xs);
  letter-spacing: .08em;
  color: var(--is-black);
  margin-bottom: var(--is-s2);
}

/* The whole row is the target, not just the 17px control. */
.is-fopt {
  padding: 7px var(--is-s3) 7px var(--is-s2);
  margin: 0 calc(var(--is-s2) * -1);
  border-radius: var(--is-radius-sm);
  transition: background var(--is-t), color var(--is-t);
}

.is-fopt:hover { background: var(--is-bg-soft); color: var(--is-black); }

.is-fopt:focus-within {
  outline: 2px solid var(--is-black);
  outline-offset: -2px;
}

/* Checked rows stay legible while scrolling a long list. */
.is-fopt:has(input:checked) { color: var(--is-black); font-weight: 500; }

.is-fopt__n {
  font-size: 11px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--is-bg-soft);
  color: var(--is-text-2);
  min-width: 26px;
  text-align: center;
}

.is-fopt:hover .is-fopt__n,
.is-fopt:has(input:checked) .is-fopt__n {
  background: var(--is-black);
  color: #fff;
}

/* Children hang off a rule rather than floating in whitespace, so the
   hierarchy survives when a parent scrolls out of view. */
.is-fopt--sub {
  padding-left: var(--is-s4);
  margin-left: var(--is-s3);
  border-left: 1px solid var(--is-line-soft);
  border-radius: 0 var(--is-radius-sm) var(--is-radius-sm) 0;
}

.is-fhelp { padding-top: var(--is-s2); }


/* ==========================================================================
   11. Mega menu
   The panel listed four columns of identical grey links with no way in at the
   top. The heading is now a link with the category's own photograph, the
   counts are pills, and the columns are separated.
   ========================================================================== */

.is-mega {
  padding: var(--is-s6);
  gap: var(--is-s6) var(--is-s5);
  border-radius: var(--is-radius);
}

/* Each column after the first carries a hairline, so four lists do not read
   as one continuous block of links. */
@media (min-width: 992px) {
  .is-mega__col + .is-mega__col {
    border-left: 1px solid var(--is-line-soft);
    padding-left: var(--is-s5);
  }
}

.is-mega__head {
  display: flex;
  align-items: center;
  gap: var(--is-s3);
  margin-bottom: var(--is-s4);
  padding-bottom: var(--is-s3);
  border-bottom: 1px solid var(--is-line-soft);
  color: var(--is-black);
  text-decoration: none;
}

.is-mega__thumb {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--is-radius-sm);
  background: var(--is-bg-soft);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.is-mega__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}

.is-mega__headname {
  font-family: var(--is-font-display);
  font-size: var(--is-fs-sm);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.is-mega__head:hover .is-mega__headname { text-decoration: underline; text-underline-offset: 3px; }

.is-mega__list { gap: 1px; }

.is-mega__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--is-s3);
  padding: 6px var(--is-s3);
  margin: 0 calc(var(--is-s3) * -1);
  border-radius: var(--is-radius-sm);
  transition: background var(--is-t), color var(--is-t);
}

.is-mega__list a:hover { background: var(--is-bg-soft); color: var(--is-black); }

.is-mega__n {
  flex: none;
  font-size: 11px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--is-bg-soft);
  color: var(--is-text-2);
  font-variant-numeric: tabular-nums;
}

.is-mega__list a:hover .is-mega__n { background: var(--is-black); color: #fff; }

/* The catalogue link reads as the panel's action, not a fifth list item. */
.is-mega__all {
  margin-top: var(--is-s2);
  padding-top: var(--is-s5);
  border-top: 1px solid var(--is-line);
}

.is-mega__all .is-link {
  display: inline-flex;
  align-items: center;
  gap: var(--is-s2);
  font-family: var(--is-font-display);
  font-weight: 600;
  font-size: var(--is-fs-sm);
  color: var(--is-black);
}

.is-mega__all .is-link svg { transition: transform var(--is-t); }
.is-mega__all .is-link:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .is-mega__all .is-link svg,
  .is-faq__q::after { transition: none; }
}


/* ==========================================================================
   12. Cart page
   ========================================================================== */

/* --------------------------------------------------------------------------
   The remove control

   WooCommerce styles every `a.remove` as a red dismiss glyph:

     a.remove { font-size:1.5em; font-weight:700; width:1em; height:1em;
                color: var(--wc-red) !important }

   That is meant for a bare "x". Applied to the word "Remove" it produced the
   large red text in the middle of the row — and because the colour is
   !important in the plugin's own stylesheet, only !important can take it
   back. The sizing rules are plain overrides; the colour is not.
   -------------------------------------------------------------------------- */

.woocommerce .is-crow a.remove,
.woocommerce-page .is-crow a.remove,
.woocommerce .is-line a.remove,
.woocommerce-page .is-line a.remove {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: static;
  width: auto;
  height: auto;
  min-height: 32px;
  padding: var(--is-s2) 0;
  font-family: inherit;
  font-size: var(--is-fs-xs);
  font-weight: 500;
  line-height: 1;
  border-radius: 0;
  background: none;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--is-line);
  color: var(--is-text-2) !important;
  transition: color var(--is-t), text-decoration-color var(--is-t);
}

.woocommerce .is-crow a.remove:hover,
.woocommerce-page .is-crow a.remove:hover,
.woocommerce .is-line a.remove:hover,
.woocommerce-page .is-line a.remove:hover {
  background: none;
  color: #B42318 !important;
  text-decoration-color: currentColor;
}

/* A small cross drawn in CSS, so the control reads as "remove" before the
   word is read. */
.woocommerce .is-crow a.remove::before,
.woocommerce-page .is-crow a.remove::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   The line
   -------------------------------------------------------------------------- */

.is-crow {
  padding: var(--is-s5) 0;
  align-items: start;
}

@media (min-width: 768px) {
  .is-crow { grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--is-s5); }
}

.is-crow__media {
  border: 1px solid var(--is-line-soft);
  border-radius: var(--is-radius-sm);
}

.is-crow__name {
  font-family: var(--is-font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--is-black);
}

.is-crow__name:hover { text-decoration: underline; text-underline-offset: 3px; }

.is-crow__unit { display: block; margin-top: 2px; }

/* Quantity and remove belong together at the foot of the line, with the
   remove pushed clear of the stepper rather than sitting against it. */
.is-crow__foot { gap: var(--is-s5); margin-top: var(--is-s4); }

.is-crow__line { font-size: 1.125rem; align-self: start; padding-top: 2px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.is-cartactions { gap: var(--is-s3); }

.is-cartactions .is-btn { min-height: 44px; }

/* Woo disables Update cart until a quantity actually changes. That is the
   right behaviour, but the default disabled look reads as broken, so it is
   given an explicit resting state and a clear enabled one. */
.woocommerce .is-cartactions button[name="update_cart"]:disabled,
.woocommerce .is-cartactions button[name="update_cart"][disabled] {
  opacity: 1;
  color: var(--is-text-2);
  border-color: var(--is-line-soft);
  background: var(--is-bg-soft);
  cursor: default;
  pointer-events: none;
}

.woocommerce .is-cartactions button[name="update_cart"]:not(:disabled) {
  color: var(--is-black);
  border-color: var(--is-line);
  background: #fff;
}

/* The checkout stack. The gap between the theme's button and a plugin's
   (the WhatsApp order button) came from that plugin's own margins. */
.wc-proceed-to-checkout { margin-top: var(--is-s5); }

.wc-proceed-to-checkout > *,
.wc-proceed-to-checkout > * > * { margin-bottom: 0 !important; margin-top: 0 !important; }

.woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  width: 100%;
  min-height: 52px;
  font-size: 1rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Order summary
   -------------------------------------------------------------------------- */

.is-summary .is-panel { padding: var(--is-s6); }

.is-sum__row { padding: var(--is-s3) 0; }

.is-sum__row .is-sum__k { color: var(--is-ink-muted); }

.is-sum__row--total { padding-top: var(--is-s4); margin-top: var(--is-s2); }

.is-summary .is-panel__title {
  font-size: 1rem;
  padding-bottom: var(--is-s4);
  border-bottom: 1px solid var(--is-line-soft);
}

/* The coupon panel is secondary to the total; it should not look like a
   second summary of equal weight. */
.is-summary .is-panel + .is-panel { background: var(--is-bg-soft); }

.is-coupon .is-btn { flex: none; }


/* ==========================================================================
   13. Notices, and the checkout
   ========================================================================== */

/* --------------------------------------------------------------------------
   Notices

   WooCommerce marks each notice with a glyph from its own icon font,
   absolutely positioned over the text:

     .woocommerce-info::before { font-family: WooCommerce; position: absolute;
                                 left: 1.5em; top: 1em }

   That font is not loaded here, so the glyph rendered as a missing-character
   box sitting on top of the first word — measured at left 22.5px with the
   text starting at the same 24px. The mark is replaced with one drawn from
   the page's own font, and the notice becomes a row so the mark, the message
   and the button cannot overlap.
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  display: flex;
  align-items: center;
  gap: var(--is-s4);
  padding: var(--is-s4) var(--is-s5);
  position: relative;
  line-height: 1.45;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before {
  position: static !important;
  left: auto !important;
  top: auto !important;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: inherit !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  margin: 0 !important;
}

.woocommerce-message::before { content: "\2713" !important; background: var(--is-ok); }

.woocommerce-info::before,
.woocommerce-noreviews::before { content: "i" !important; background: var(--is-black); }

.woocommerce-error::before { content: "!" !important; background: #B42318; }

/* The error notice is a list; its items must not keep bullets once the box
   itself is a flex row. */
.woocommerce-error { flex-wrap: wrap; }
.woocommerce-error li { list-style: none; }

/* Woo floats the notice button. In a flex row that would place it before the
   message it refers to, so it is ordered last and pushed right instead. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  float: none;
  order: 2;
  margin: 0 0 0 auto;
  min-height: 44px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Cart: the checkout button stack

   The WhatsApp order plugin prints a second .wc-proceed-to-checkout block.
   Two of them, each carrying Woo's 1em vertical padding and a 24px margin, is
   where the 64px hole between the two buttons came from.
   -------------------------------------------------------------------------- */

.woocommerce .cart_totals .wc-proceed-to-checkout { padding: 0; }

.woocommerce .cart_totals .wc-proceed-to-checkout + .wc-proceed-to-checkout { margin-top: var(--is-s3); }

.woocommerce .cart_totals .wc-proceed-to-checkout > a,
.woocommerce .cart_totals .wc-proceed-to-checkout > .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Checkout
   -------------------------------------------------------------------------- */

.woocommerce-checkout .is-steps { margin-bottom: var(--is-s6); }

.woocommerce-checkout .is-cartgrid > div > .is-panel + .is-panel { margin-top: var(--is-s4); }

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--is-font-display);
  font-size: 1rem;
  margin: 0 0 var(--is-s4);
  padding-bottom: var(--is-s4);
  border-bottom: 1px solid var(--is-line-soft);
}

/* "Ship to a different address?" is an h3 wrapping a checkbox — it should
   read as a control, not as a section title. */
.woocommerce-checkout #ship-to-different-address {
  display: flex;
  align-items: center;
  gap: var(--is-s3);
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: var(--is-s4);
}

.woocommerce-checkout #ship-to-different-address label { margin: 0; cursor: pointer; }

.woocommerce-checkout #ship-to-different-address input {
  width: 17px;
  height: 17px;
  accent-color: var(--is-black);
}

/* Order review table. */
.woocommerce-checkout #order_review table.shop_table { width: 100%; border: 0; }

.woocommerce-checkout #order_review th,
.woocommerce-checkout #order_review td {
  padding: var(--is-s3) 0;
  border: 0;
  border-bottom: 1px solid var(--is-line-soft);
  font-size: var(--is-fs-sm);
  vertical-align: top;
}

.woocommerce-checkout #order_review thead th {
  font-family: var(--is-font-display);
  font-size: var(--is-fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--is-text-2);
}

.woocommerce-checkout #order_review td:last-child,
.woocommerce-checkout #order_review th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.woocommerce-checkout #order_review tfoot .order-total th,
.woocommerce-checkout #order_review tfoot .order-total td {
  border-bottom: 0;
  padding-top: var(--is-s4);
  font-family: var(--is-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--is-black);
}

/* Payment methods. Woo's default is a lavender panel — measured at
   rgb(220,215,226) — with a pointer triangle, the one clearly un-designed
   block on the page. */
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }

.woocommerce-checkout #payment ul.payment_methods {
  padding: 0;
  margin: var(--is-s5) 0 0;
  border: 0;
  list-style: none;
  display: grid;
  gap: var(--is-s2);
}

.woocommerce-checkout #payment ul.payment_methods li {
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius-sm);
  padding: var(--is-s4);
  background: #fff;
  transition: border-color var(--is-t);
}

.woocommerce-checkout #payment ul.payment_methods li:hover { border-color: var(--is-text-2); }

.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) { border-color: var(--is-black); }

.woocommerce-checkout #payment ul.payment_methods li label {
  display: inline-flex;
  align-items: center;
  gap: var(--is-s3);
  font-family: var(--is-font-display);
  font-weight: 600;
  font-size: var(--is-fs-sm);
  color: var(--is-black);
  margin: 0;
  cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  width: 17px;
  height: 17px;
  accent-color: var(--is-black);
  margin: 0;
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--is-bg-soft);
  border: 0;
  border-radius: var(--is-radius-sm);
  color: var(--is-ink-muted);
  font-size: var(--is-fs-sm);
  line-height: 1.55;
  margin: var(--is-s3) 0 0;
  padding: var(--is-s3) var(--is-s4);
}

.woocommerce-checkout #payment div.payment_box::before { display: none; }

.woocommerce-checkout #payment div.payment_box p:last-child { margin-bottom: 0; }

.woocommerce-checkout #payment .place-order { padding: 0; margin-top: var(--is-s5); }

.woocommerce-checkout #payment #place_order {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  font-size: 1rem;
  float: none;
  margin: 0;
}

.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--is-s4); }


/* ==========================================================================
   14. Checkout steps

   Details / Delivery / Payment. Previously three identical black discs, all
   marked "on" — which said nothing about where the shopper was. They are now
   a progress bar: done steps carry a tick, the current one is ringed, the
   ones ahead are muted, and a connector line runs between them so the three
   read as one sequence rather than three labels.
   ========================================================================== */

.woocommerce-checkout .is-steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  margin-bottom: var(--is-s6);
  padding: 0;
  counter-reset: none;
}

.woocommerce-checkout .is-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--is-s2);
  padding: 0 var(--is-s2);
  text-align: center;
  color: var(--is-text-2);
  text-decoration: none;
  font-size: var(--is-fs-xs);
  transition: color var(--is-t);
}

/* The connector. Drawn from each step back to the previous one, behind the
   discs, so it never crosses a number. */
.woocommerce-checkout .is-step + .is-step::before {
  content: "";
  position: absolute;
  top: 13px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--is-line);
  z-index: 0;
}

.woocommerce-checkout .is-step--now::before,
.woocommerce-checkout .is-step--done::before { background: var(--is-black); }

.woocommerce-checkout .is-step__n {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border: 2px solid var(--is-line);
  background: #fff;
  color: var(--is-text-2);
  font-size: 12px;
  transition: background var(--is-t), border-color var(--is-t), color var(--is-t);
}

.woocommerce-checkout .is-step__t { line-height: 1.3; }

/* Reached and passed. */
.woocommerce-checkout .is-step--done { color: var(--is-black); }

.woocommerce-checkout .is-step--done .is-step__n {
  background: var(--is-black);
  border-color: var(--is-black);
  color: #fff;
  font-size: 0;
}

/* The number is replaced by a tick, drawn rather than set, so it does not
   depend on a glyph being present in the font. */
.woocommerce-checkout .is-step--done .is-step__n::after {
  content: "";
  width: 10px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}

/* Where the shopper is now. */
.woocommerce-checkout .is-step--now {
  color: var(--is-black);
  font-weight: 600;
}

.woocommerce-checkout .is-step--now .is-step__n {
  background: var(--is-black);
  border-color: var(--is-black);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .08);
}

/* A step whose section is not on the page. */
.woocommerce-checkout .is-step--na {
  opacity: .45;
  cursor: default;
}

.woocommerce-checkout .is-step[href]:hover { color: var(--is-black); }

.woocommerce-checkout .is-step[href]:hover .is-step__n { border-color: var(--is-black); }

.woocommerce-checkout .is-step:focus-visible {
  outline: 2px solid var(--is-black);
  outline-offset: 4px;
  border-radius: var(--is-radius-sm);
}

/* The scroll target must not hide under the sticky header. */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #indospy_delivery,
.woocommerce-checkout #payment { scroll-margin-top: calc(var(--is-header-h) + var(--is-s4)); }

.woocommerce-checkout #customer_details:focus,
.woocommerce-checkout #indospy_delivery:focus,
.woocommerce-checkout #payment:focus { outline: none; }

@media (max-width: 575px) {
  .woocommerce-checkout .is-step { font-size: 11px; }
  .woocommerce-checkout .is-step__n { width: 26px; height: 26px; }
  .woocommerce-checkout .is-step + .is-step::before { top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce-checkout .is-step,
  .woocommerce-checkout .is-step__n { transition: none; }
}


/* ==========================================================================
   15. My account — the content column

   With the two columns finally in place (see section 5), the right-hand
   column was bare text on white beside a bordered navigation. It becomes a
   panel of the same weight.
   ========================================================================== */

@media (min-width: 992px) {
  .woocommerce-account .woocommerce-MyAccount-content {
    border: 1px solid var(--is-line);
    border-radius: var(--is-radius);
    padding: var(--is-s6);
    background: #fff;
  }
}

.woocommerce-account .woocommerce-MyAccount-content p { font-size: var(--is-fs-sm); line-height: 1.65; }

.woocommerce-account .woocommerce-MyAccount-content > p:last-child { margin-bottom: 0; }

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-family: var(--is-font-display);
  font-size: 1rem;
  margin: 0 0 var(--is-s4);
  padding-bottom: var(--is-s3);
  border-bottom: 1px solid var(--is-line-soft);
}

/* Navigation rows: a quieter resting state so the current page is the only
   thing carrying weight. */
.woocommerce-account .is-acctnav a {
  font-size: var(--is-fs-sm);
  padding: var(--is-s3) var(--is-s4);
}

.woocommerce-account .is-acctnav svg { opacity: .75; }

.woocommerce-account .is-acctnav .is-active a svg,
.woocommerce-account .is-acctnav a[aria-current="true"] svg { opacity: 1; }

/* Orders, downloads and address tables. */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
  padding: var(--is-s3) var(--is-s3) var(--is-s3) 0;
  border: 0;
  border-bottom: 1px solid var(--is-line-soft);
  font-size: var(--is-fs-sm);
  vertical-align: middle;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
  font-family: var(--is-font-display);
  font-size: var(--is-fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--is-text-2);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td { border-bottom: 0; }

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions { text-align: right; }

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button {
  min-height: 38px;
  padding: 0 var(--is-s4);
  font-size: var(--is-fs-xs);
}

/* The two saved addresses sit side by side rather than stacked. */
.woocommerce-account .woocommerce-Addresses {
  display: grid;
  gap: var(--is-s5);
}

@media (min-width: 768px) {
  .woocommerce-account .woocommerce-Addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.woocommerce-account .woocommerce-Address {
  width: auto;
  float: none;
  border: 1px solid var(--is-line-soft);
  border-radius: var(--is-radius-sm);
  padding: var(--is-s5);
}

.woocommerce-account .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--is-s3); }

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--is-s3); }

/* Account details form. */
.woocommerce-account .woocommerce-MyAccount-content form .form-row { margin-bottom: var(--is-s4); }

.woocommerce-account .woocommerce-MyAccount-content fieldset {
  border: 1px solid var(--is-line-soft);
  border-radius: var(--is-radius-sm);
  padding: var(--is-s5);
  margin: var(--is-s5) 0;
}

.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
  font-family: var(--is-font-display);
  font-size: var(--is-fs-sm);
  font-weight: 600;
  padding: 0 var(--is-s2);
  width: auto;
  border: 0;
  margin: 0;
}


/* ==========================================================================
   16. Addresses, saved orders, and one missing class
   ========================================================================== */

/* --------------------------------------------------------------------------
   .screen-reader-text

   The theme hides assistive text with .is-sr; WordPress and WooCommerce both
   use .screen-reader-text, which this theme never defined — so every label
   written for a screen reader was being painted on the page. That is where
   "Edit Billing address" and "Add Shipping address" came from: the visible
   word is "Edit", and the rest is the label that should have been hidden.

   This is the standard WordPress definition, including the :focus escape so a
   skip link can still appear when tabbed to.
   -------------------------------------------------------------------------- */

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.screen-reader-text:focus {
  background-color: #fff;
  clip-path: none;
  color: var(--is-black);
  display: block;
  font-size: var(--is-fs-sm);
  font-weight: 600;
  height: auto;
  left: var(--is-s4);
  line-height: normal;
  padding: var(--is-s3) var(--is-s4);
  text-decoration: none;
  top: var(--is-s4);
  width: auto;
  z-index: 100000;
  border-radius: var(--is-radius-sm);
  box-shadow: var(--is-shadow-lift);
}

/* --------------------------------------------------------------------------
   col2-set — the two-column blocks (saved addresses, order addresses)

   Two problems at once, both familiar by now:

     .woocommerce .col2-set .col-1 { float: left; width: 48% }
     .woocommerce .col2-set::before { content: " "; display: table }

   The float halves each card, and the clearfix pseudo-element becomes a grid
   item that takes the first cell — which is why Billing sat in the right
   column and Shipping dropped to a second row. The columns are placed by
   name so neither can happen again.
   -------------------------------------------------------------------------- */

.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,
.woocommerce-page .col2-set::after {
  content: none;
  display: none;
}

.woocommerce .col2-set,
.woocommerce-page .col2-set {
  display: grid;
  gap: var(--is-s5);
  width: 100%;
}

@media (min-width: 768px) {
  .woocommerce .col2-set,
  .woocommerce-page .col2-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .woocommerce .col2-set > .col-1,
  .woocommerce-page .col2-set > .col-1 { grid-column: 1; }

  .woocommerce .col2-set > .col-2,
  .woocommerce-page .col2-set > .col-2 { grid-column: 2; }
}

.woocommerce-account .woocommerce .col2-set > .col-1,
.woocommerce-account .woocommerce .col2-set > .col-2,
.woocommerce .col2-set > .col-1,
.woocommerce .col2-set > .col-2,
.woocommerce-page .col2-set > .col-1,
.woocommerce-page .col2-set > .col-2 {
  float: none;
  width: auto;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Saved address cards
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-Address {
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius);
  padding: var(--is-s5);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: var(--is-s3);
}

.woocommerce-account .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--is-s3);
  padding-bottom: var(--is-s3);
  border-bottom: 1px solid var(--is-line-soft);
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
  font-family: var(--is-font-display);
  font-size: var(--is-fs-sm);
  margin: 0;
  padding: 0;
  border: 0;
}

/* "Edit" reads as an action, not as body copy sharing the heading's line. */
.woocommerce-account .woocommerce-Address-title .edit {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--is-s3);
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius-sm);
  font-family: var(--is-font-display);
  font-size: var(--is-fs-xs);
  font-weight: 600;
  color: var(--is-black);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--is-t), background var(--is-t);
}

.woocommerce-account .woocommerce-Address-title .edit:hover {
  border-color: var(--is-black);
  background: var(--is-bg-soft);
}

.woocommerce-account .woocommerce-Address address {
  font-style: normal;
  font-size: var(--is-fs-sm);
  line-height: 1.7;
  color: var(--is-ink-muted);
  margin: 0;
}

/* An address that has not been set up yet should look like an empty state,
   not like a card with a sentence missing. */
.woocommerce-account .woocommerce-Address > p {
  font-size: var(--is-fs-sm);
  color: var(--is-text-2);
  margin: 0;
}

/* --------------------------------------------------------------------------
   A single order
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details { margin-top: var(--is-s6); }

.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column__title {
  font-family: var(--is-font-display);
  font-size: 1rem;
  margin: 0 0 var(--is-s4);
  padding-bottom: var(--is-s3);
  border-bottom: 1px solid var(--is-line-soft);
}

/* The order date and status are <mark> elements; Woo leaves them with the
   browser default highlight. They become quiet chips instead. */
.woocommerce-account mark.order-date,
.woocommerce-account mark.order-number,
.woocommerce-account mark.order-status {
  background: var(--is-bg-soft);
  color: var(--is-black);
  font-family: var(--is-font-display);
  font-weight: 600;
  font-size: var(--is-fs-xs);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.woocommerce-account mark.order-status { background: var(--is-black); color: #fff; }

.woocommerce-account .woocommerce-order-details p:first-of-type,
.woocommerce-account .woocommerce-thankyou-order-received {
  font-size: var(--is-fs-sm);
  line-height: 2;
  color: var(--is-ink-muted);
}

/* Woo sets the order table's row labels in uppercase with a trailing colon;
   the colon is Woo's text, so only the weight is adjusted. */
.woocommerce-account .woocommerce-table--order-details tfoot th {
  font-family: var(--is-font-display);
  font-size: var(--is-fs-xs);
  letter-spacing: .06em;
  color: var(--is-text-2);
  text-align: left;
}

.woocommerce-account .woocommerce-table--order-details tfoot td { text-align: right; }

.woocommerce-account .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-account .woocommerce-table--order-details tfoot tr:last-child td {
  font-size: 1.0625rem;
  color: var(--is-black);
  font-weight: 700;
  border-bottom: 0;
  padding-top: var(--is-s4);
}

.woocommerce-account .woocommerce-customer-details address {
  font-style: normal;
  font-size: var(--is-fs-sm);
  line-height: 1.7;
  color: var(--is-ink-muted);
  border: 1px solid var(--is-line-soft);
  border-radius: var(--is-radius-sm);
  padding: var(--is-s5);
  margin: 0;
}

.woocommerce-account .woocommerce-customer-details address p { margin: var(--is-s2) 0 0; }


/* ==========================================================================
   17. Buying guide — the guided sell on the product archive
   --------------------------------------------------------------------------
   Sits between the sort bar and the grid. It borrows the finder's card, option
   and progress vocabulary from modules.css rather than restating it, because
   the two are the same idea in two places and should not drift apart; what is
   here is only what differs — a real radio in each option, the collapsed
   invitation, and the answer summary.

   The radio is visible on purpose. The finder's options are links that commit
   as soon as they are pressed; these are form controls with a checked state,
   and a shopper needs to see which answer is theirs.
   ========================================================================== */

/* The block has to read as an offer, not as another panel of the page. The
   palette is monochrome by design — the orange accent is reserved for sale and
   discount — so the emphasis is ink: a border dark enough to see against
   #EAEAEA cards around it, a lifted shadow, and a rule along the top edge.
   Restrained, and still unmistakably a distinct block on a phone. */
.is-bguide {
  position: relative;
  border: 1px solid rgba(23, 23, 23, .22);
  border-radius: var(--is-radius);
  background: var(--is-white);
  box-shadow: var(--is-shadow);
  padding: var(--is-s5);
  margin-bottom: var(--is-s5);
  overflow: hidden;
}

/* The top edge, in ink. inset keeps it inside the rounded corners without a
   second border-radius to maintain. */
.is-bguide::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--is-ink);
}

/* The 3px rule sits where the padding was, so the first line needs it back. */
.is-bguide > :first-child { margin-top: 2px; }
@media (min-width: 768px) { .is-bguide { padding: var(--is-s6, var(--is-s5)); } }

/* ---- The invitation ---------------------------------------------------- */

.is-bguide__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--is-s4);
}

.is-bguide__title {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  margin: 0 0 var(--is-s2);
}

.is-bguide__lead {
  color: var(--is-text-2);
  font-size: var(--is-fs-sm);
  margin: 0;
  max-width: 62ch;
}

.is-bguide__start { flex: none; }

/* The invitation and the question share the card, so once the question is
   open the invitation needs a rule under it rather than sitting flush against
   the next heading. */
.is-bguide__intro + .is-bguide__q:not([hidden]) {
  margin-top: var(--is-s5);
  padding-top: var(--is-s5);
  border-top: 1px solid var(--is-line-soft, var(--is-line));
}

/* ---- The question ------------------------------------------------------ */

/* The question is a link target now: a product page can send somebody here
   with #is-bguide-q. Without this the browser's jump puts it directly under
   the sticky header, where the first thing the shopper reads is cut in half.
   It is CSS rather than JavaScript so the plain hash jump lands correctly with
   scripts off too. */
.is-bguide__q,
.is-bguide__done {
  scroll-margin-top: calc(var(--is-header-h) + var(--is-s4));
}

.is-bguide__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--is-s3);
  margin-bottom: var(--is-s2);
}

.is-bguide__step {
  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);
  margin: 0;
}

.is-bguide__reset {
  font-size: var(--is-fs-sm);
  color: var(--is-text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.is-bguide__reset:hover,
.is-bguide__reset:focus-visible { color: var(--is-black); }

.is-bguide .is-progress { margin-bottom: var(--is-s5); }

/* A fieldset carries the question so the radios are announced with it; the
   browser's own border and padding are in the way of that. */
.is-bguide__fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

.is-bguide__legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: var(--is-s4);
}

.is-bguide__question {
  display: block;
  font-family: var(--is-font-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: var(--is-ink);
  line-height: 1.35;
}

.is-bguide__hint {
  display: block;
  margin-top: 4px;
  color: var(--is-text-2);
  font-size: var(--is-fs-sm);
}

.is-bguide__opts {
  display: grid;
  gap: var(--is-s3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

/* ---- One answer -------------------------------------------------------- */

/* The label is only the box you click; the card the shopper sees is .__face,
   the radio's next sibling. That is what lets the checked state be a plain ~
   combinator instead of :has() on the label. */
.is-bguide__opt {
  position: relative;
  display: block;
  cursor: pointer;
}

/* A real radio, left where a radio belongs, sitting over the card's own
   padding. Not restyled: it is a control shoppers recognise, and it brings
   their platform's focus ring and high-contrast behaviour with it. */
.is-bguide__radio {
  position: absolute;
  left: var(--is-s4);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--is-black);
  cursor: pointer;
}

.is-bguide__face {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--is-s3);
  min-height: 64px;
  /* Room on the left for the radio above it. */
  padding: var(--is-s3) var(--is-s4) var(--is-s3) calc(var(--is-s4) + 18px + var(--is-s3));
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius-sm);
  background: var(--is-white);
  transition: border-color var(--is-t), box-shadow var(--is-t), background var(--is-t);
}

.is-bguide__opt:hover .is-bguide__face {
  border-color: var(--is-black);
  box-shadow: 0 2px 4px rgba(16, 18, 20, .04), 0 10px 24px -14px rgba(16, 18, 20, .28);
}

.is-bguide__radio:checked ~ .is-bguide__face {
  border-color: var(--is-black);
  box-shadow: inset 0 0 0 1px var(--is-black);
  background: var(--is-bg-soft, #F4F5F6);
}

/* The ring goes on the card, so the focused answer is outlined as a whole
   rather than just the 18px control. */
.is-bguide__radio:focus-visible ~ .is-bguide__face {
  outline: 2px solid var(--is-black);
  outline-offset: 2px;
}

.is-bguide__opttext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.is-bguide__optlabel {
  font-family: var(--is-font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--is-ink);
  line-height: 1.35;
}

.is-bguide__optnote {
  font-size: var(--is-fs-xs);
  line-height: 1.45;
  color: var(--is-text-2);
}

.is-bguide__optn {
  display: grid;
  justify-items: end;
  font-family: var(--is-font-display);
  font-weight: 700;
  font-size: var(--is-fs-sm);
  color: var(--is-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.is-bguide__optn small {
  display: block;
  font-family: var(--is-font-body, inherit);
  font-weight: 400;
  font-size: .6875rem;
  color: var(--is-text-2);
}

/* An answer nobody stocks. Shown rather than hidden — "0 products" answers the
   shopper's question — but plainly not a way forward. */
.is-bguide__opt--dead { cursor: not-allowed; }
.is-bguide__opt--dead .is-bguide__face {
  opacity: .5;
  background: var(--is-bg-soft, #F4F5F6);
}
.is-bguide__opt--dead:hover .is-bguide__face {
  border-color: var(--is-line);
  box-shadow: none;
}
.is-bguide__opt--dead .is-bguide__radio { cursor: not-allowed; }

.is-bguide__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--is-s3);
  margin-top: var(--is-s5);
}

/* ---- The summary ------------------------------------------------------- */

.is-bguide__answers {
  list-style: none;
  margin: var(--is-s4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--is-s2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

.is-bguide__answer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--is-s3) var(--is-s4);
  border: 1px solid var(--is-line-soft, var(--is-line));
  border-radius: var(--is-radius-sm);
  background: var(--is-bg-soft, #F4F5F6);
}

.is-bguide__answerq {
  font-size: var(--is-fs-xs);
  color: var(--is-text-2);
  line-height: 1.4;
}

.is-bguide__answera {
  font-family: var(--is-font-display);
  font-weight: 600;
  color: var(--is-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.is-bguide__answera:hover,
.is-bguide__answera:focus-visible { color: var(--is-black); }

/* Mid-flow the same strip is a quiet row of chips above the current question,
   not a results summary — it must not compete with the question itself. */
.is-bguide__answers--compact {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  gap: 6px;
  margin: 0 0 var(--is-s4);
}
.is-bguide__answers--compact .is-bguide__answer {
  padding: 6px var(--is-s3);
  background: transparent;
  border-style: dashed;
}
.is-bguide__answers--compact .is-bguide__answerq { font-size: 11px; }
.is-bguide__answers--compact .is-bguide__answera { font-size: var(--is-fs-sm); }

/* Below the phone breakpoint the count sits under the label rather than
   squeezing a two-word answer into half a column. */
@media (max-width: 520px) {
  .is-bguide__face { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .is-bguide__optn {
    justify-items: start;
    display: flex;
    align-items: baseline;
    gap: 4px;
  }
  .is-bguide__optn small { display: inline; }
}


/* Search suggestions (item 16) — the row now carries a model and a detail
   line, so it needs a column rather than two stacked spans. */
.is-search__label {
  margin: var(--is-s4) 0 var(--is-s2);
  font-size: var(--is-fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--is-text-2);
}
.is-search__label:first-child { margin-top: 0; }

.is-search__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.is-search__name { font-weight: 600; }
.is-search__meta { font-size: var(--is-fs-xs); color: var(--is-text-2); }
.is-search__sku {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.is-search__detail { color: var(--is-text-2); }

.is-search__cat {
  display: flex; align-items: center; justify-content: space-between; gap: var(--is-s3);
  padding: var(--is-s3) var(--is-s4);
  border: 1px solid var(--is-line-soft, var(--is-line));
  border-radius: var(--is-radius-sm);
  margin-bottom: var(--is-s2);
  text-decoration: none; color: inherit;
}
.is-search__cat:hover, .is-search__cat:focus-visible { border-color: var(--is-ink); }
.is-search__count { font-size: var(--is-fs-xs); color: var(--is-text-2); }

/* While a request is in flight, dim rather than clear — clearing makes the
   panel flash empty between keystrokes. */
[data-search-results][aria-busy="true"] { opacity: .55; transition: opacity .12s ease; }


/* ==========================================================================
   Compare (item 12) — the toggle, the tray and the picked-products table.
   ========================================================================== */

.is-compare-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  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-xs);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--is-t), color var(--is-t), background var(--is-t);
}
.is-compare-toggle:hover:not(.is-disabled),
.is-compare-toggle:focus-visible { border-color: var(--is-ink); color: var(--is-ink); }

.is-compare-toggle--card { width: 100%; justify-content: center; margin-top: 8px; }
.is-compare-toggle--full { padding: 10px 14px; font-size: var(--is-fs-sm); }

/* The box only fills once the product is in the comparison, so the state is
   legible without reading the label. */
.is-compare-toggle__box {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--is-line);
  border-radius: 4px;
  color: transparent;
  transition: background var(--is-t), border-color var(--is-t), color var(--is-t);
}
.is-compare-toggle.is-on { border-color: var(--is-ink); color: var(--is-ink); }
.is-compare-toggle.is-on .is-compare-toggle__box {
  background: var(--is-ink);
  border-color: var(--is-ink);
  color: var(--is-white);
}

/* A full tray must not look clickable on products that are not in it. */
.is-compare-toggle.is-disabled { opacity: .45; cursor: not-allowed; }

/* ==========================================================================
   The buying-guide signpost above related products on a product page.
   ========================================================================== */

.is-guidecta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--is-s5, 20px);
  padding: var(--is-s5, 20px);
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius);
  background: var(--is-bg-2, #f7f7f9);
}

/* Stops the text column refusing to wrap and pushing the buttons out of the
   panel on a narrow viewport. */
.is-guidecta__text { flex: 1 1 320px; min-width: 0; }

.is-guidecta__title {
  font-family: var(--is-font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  margin: 0 0 var(--is-s2, 8px);
}

.is-guidecta__lead {
  margin: 0;
  color: var(--is-text-2);
  font-size: var(--is-fs-sm);
}

.is-guidecta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--is-s3, 12px);
}

/* On a phone the buttons go full width rather than sitting as two stubs under
   a paragraph that already spans the panel. */
@media (max-width: 575px) {
  .is-guidecta__actions { width: 100%; }
  .is-guidecta__actions .is-btn { flex: 1 1 100%; justify-content: center; }
}

/* The product page's secondary-action row: Save for later, then Compare.
   Wraps rather than squeezes, because the compare label is translated and the
   summary column is narrow on a tablet. */
.is-pdp__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--is-s3, 12px);
  margin-top: var(--is-s2, 8px);
}

/* .is-compare-single is no longer rendered — see inc/compare.php. The rule
   stays for a child theme or a cached page still carrying the old markup. */
.is-compare-single { margin-top: var(--is-s4); }

/* --- the tray ----------------------------------------------------------- */
.is-comparetray {
  position: fixed;
  left: 0; right: 0;
  /* Above the buy bar when that is showing, flush to the bottom when it is
     not. Two full-width bars both at bottom:0 sat on top of each other. */
  bottom: var(--is-stickybuy-h, 0px);
  /* 865 puts it in the same band as the buy bar (870) and the float (880)
     rather than at 60, where a later overlay could bury it. */
  z-index: 865;
  background: var(--is-white);
  border-top: 1px solid var(--is-line);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .08);
  padding: var(--is-s3) 0;
}
.is-comparetray[hidden] { display: none; }

.is-comparetray__inner {
  display: flex;
  align-items: center;
  gap: var(--is-s4);
  flex-wrap: wrap;
}
.is-comparetray__count { margin: 0; font-size: var(--is-fs-sm); white-space: nowrap; }
.is-comparetray__max { color: var(--is-text-2); }

.is-comparetray__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.is-comparetray__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--is-line);
  border-radius: 999px;
  font-size: var(--is-fs-xs);
}
.is-comparetray__item span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.is-comparetray__x {
  border: 0;
  background: none;
  padding: 0 4px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  color: var(--is-text-2);
}
.is-comparetray__x:hover { color: var(--is-ink); }

.is-comparetray__actions { display: flex; gap: 8px; margin-left: auto; }

/* Fewer than two picked is not a comparison; the button says so by looking
   unavailable rather than by leading to an empty page. */
.is-comparetray__actions .is-disabled { opacity: .5; pointer-events: none; }

/* The bars sit over the foot of the page, so give the page somewhere to end.
   Driven by the measured stack height, which replaces two hard-coded guesses
   that were wrong whenever a bar wrapped to two lines. */
body { padding-bottom: var(--is-bottombar-h, 0px); }

@media (max-width: 767px) {
  .is-comparetray__list { order: 3; width: 100%; }
  .is-comparetray__actions { margin-left: 0; }
  .is-comparetray__inner { gap: var(--is-s3); }
  /* padding-bottom is handled by --is-bottombar-h at every width. */
}

/* --- the picked table --------------------------------------------------- */
.is-compare--picked th[scope="col"] { vertical-align: top; }

.is-compare__remove {
  display: inline-block;
  margin-top: 6px;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: var(--is-fs-xs);
  color: var(--is-text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.is-compare__remove:hover { color: var(--is-ink); }

.is-compare__foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--is-s5); }

.is-compare-empty { max-width: 58ch; }
.is-compare-empty p { margin-bottom: var(--is-s4); }

/* ---- Product finder: an answer that leads nowhere ----------------------- */

/* The finder shows a dead answer rather than hiding it, so a shopper whose
   situation genuinely has no match is told so before the click instead of
   after. It is a <span>, not a link — there is nowhere for it to go — so the
   pointer and the hover lift both have to be taken back off .is-opt. */
.is-opt--dead {
  cursor: not-allowed;
  opacity: .55;
  background: var(--is-bg-soft, #F4F5F6);
}
.is-opt--dead:hover {
  border-color: var(--is-line);
  box-shadow: none;
  transform: none;
}

/* ==========================================================================
   Mega menu alignment
   --------------------------------------------------------------------------
   MEASURED at 1440px before this rule:

     header container   x =  52 .. 1372
     header bar (logo)  x =  76 .. 1348
     mega panel         x = -24 ..  856   <-- 24px off the left of the screen

   The panel is absolutely positioned with left:50% and translateX(-50%),
   which centres it on its positioned ancestor. That ancestor was the <li> for
   the Categories button, sitting at x=354 and 123px wide. Half of an 880px
   panel is 440px, so 354 + 61 - 440 = -25: the panel was centred on a narrow
   button near the middle of the nav and therefore hung off the screen on one
   side and stopped 500px short of the content on the other. It lined up with
   nothing on the page, which is the alignment fault in the review.

   The fix is to anchor it to the header bar - the element the logo, the nav
   and the icons all line up against - instead of to the button that opens it.
   The <li> stands down as the positioned ancestor and the bar takes over, so
   left:0 / right:0 makes the panel span exactly the width of the header
   content, flush with the logo on the left and the cart on the right.
   ========================================================================== */
@media (min-width: 992px) {

  .is-header__bar { position: relative; }

  /* WHY TWO SELECTORS, AND WHY THE SAME PAIR TWICE
     ------------------------------------------------------------------------
     The first version of this keyed on a class added to the <li> in the same
     release. The stylesheet reached the live site and the markup did not -
     cached HTML - so the item kept position:relative while the panel below
     still took left:0/right:0, and four columns were crushed into the 123px
     width of the Categories button. Measured on the live site: the <li> had
     no class at all and the panel was 0px wide.

     That was a change that only worked if two files landed together, which is
     not a safe thing to ship. So the item is also matched on what it CONTAINS
     - the mega toggle - which is true in every render path, in cached HTML,
     and without any markup change at all.

     The two rules below carry the IDENTICAL pair of selectors. That is the
     point: the panel only gets its new geometry under exactly the conditions
     that stood the item down, so the two can never disagree again. If neither
     matches - a browser without :has() and markup without the class - nothing
     applies and the panel keeps its original centred behaviour, which was
     misaligned but never broken.

     ".is-menu > li" rather than a bare class because style.css sets
     position:relative on ".is-menu > li", and one class alone loses that
     cascade - measured, not assumed. */
  .is-menu > li.is-menu__megaitem,
  .is-menu > li:has(> [data-mega-toggle]) {
    position: static;
  }

  .is-menu > li.is-menu__megaitem > .is-mega,
  .is-menu > li:has(> [data-mega-toggle]) > .is-mega {
    left: 0;
    right: 0;
    transform: none;
    width: auto;
    max-width: none;
  }
}

/* ==========================================================================
   About page
   --------------------------------------------------------------------------
   Built to the approved comp, using the theme's own tokens throughout - no new
   palette and no new type scale - so the page sits inside the design system
   rather than beside it.
   ========================================================================== */

/* ---- 1. Hero -------------------------------------------------------- */
.is-abhero { background: var(--is-black); color: #fff; }

/* --------------------------------------------------------------------------
   The banner behind the About hero
   --------------------------------------------------------------------------
   Anchored from the right so the product cluster stays in frame, which puts
   the copy over the glass-office end of the picture. That end is darker than
   the rest but not uniformly so - there is a sunset through the windows - so
   the scrim is weighted to the left rather than relying on the photograph
   being kind.

   One column, narrower than half: the copy must not reach the cameras.
   -------------------------------------------------------------------------- */
.is-abhero--banner {
  position: relative;
  background-color: #0B1C2E;
  background-image: url("../images/banner/about-hero.webp");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}
.is-abhero--banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(6, 16, 28, .93) 0%,
    rgba(6, 16, 28, .86) 32%,
    rgba(6, 16, 28, .55) 54%,
    rgba(6, 16, 28, .14) 78%,
    rgba(6, 16, 28, 0) 100%);
  pointer-events: none;
}
.is-abhero--banner > .is-container { position: relative; z-index: 1; }

@media (min-width: 992px) {
  .is-abhero--banner .is-abhero__grid {
    grid-template-columns: minmax(0, 50%);
    padding-block: clamp(4rem, 2rem + 6vw, 7rem);
  }
}

@media (max-width: 991px) {
  /* A 2.75:1 picture cropped to a phone keeps about a third of its width.
     Held at the right edge the copy would sit on the cameras; at 60% some of
     the cluster stays visible behind it and the scrim turns vertical. */
  .is-abhero--banner { background-position: 60% center; }
  .is-abhero--banner::before {
    background: linear-gradient(180deg,
      rgba(6, 16, 28, .94) 0%,
      rgba(6, 16, 28, .88) 55%,
      rgba(6, 16, 28, .93) 100%);
  }
}
.is-abhero__grid { display: grid; gap: var(--is-s6); align-items: center; padding-block: var(--is-s7); }
.is-abhero h1 { color: #fff; margin: var(--is-s3) 0 var(--is-s4); }
.is-abhero__lede { color: rgba(255,255,255,.78); max-width: 52ch; line-height: 1.7; }
.is-abhero__cta { display: flex; flex-wrap: wrap; gap: var(--is-s3); margin-top: var(--is-s5); }
.is-abhero__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--is-radius); display: block; }
.is-label--light { color: rgba(255,255,255,.62); }
.is-btn--light { background: #fff; color: var(--is-black); }
.is-btn--outline-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.38); }
.is-btn--outline-light:hover { background: rgba(255,255,255,.1); }

@media (min-width: 900px) {
  .is-abhero__grid { grid-template-columns: 1fr 1fr; gap: var(--is-s7); }
  .is-abhero__media { align-self: stretch; }
}

/* ---- 2. Fact strip -------------------------------------------------- */
.is-abstrip { border-bottom: 1px solid var(--is-line); }
.is-abstrip__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--is-s4) var(--is-s5); padding-block: var(--is-s5); }
.is-abstrip__item { display: flex; gap: var(--is-s3); align-items: flex-start; font-size: var(--is-fs-sm); color: var(--is-ink-muted); }
.is-abstrip__item svg { flex: none; color: var(--is-black); margin-top: 2px; }
.is-abstrip__item strong { display: block; color: var(--is-black); font-family: var(--is-font-display); }

@media (min-width: 700px) { .is-abstrip__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1100px) { .is-abstrip__grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }

/* ---- 3. Who we are, and the glance table ---------------------------- */
.is-abwho__grid { display: grid; gap: var(--is-s6); align-items: start; }
.is-abglance { background: var(--is-bg-soft); border: 1px solid var(--is-line); border-radius: var(--is-radius); padding: var(--is-s5); }
.is-abglance__h { font-size: 1rem; margin-bottom: var(--is-s4); }
.is-abglance dl { margin: 0; }
.is-abglance__row { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--is-s3); padding: var(--is-s3) 0; border-top: 1px solid var(--is-line); font-size: var(--is-fs-sm); }
.is-abglance__row:first-child { border-top: 0; }
.is-abglance dt { color: var(--is-ink-muted); margin: 0; }
.is-abglance dd { margin: 0; color: var(--is-black); }

@media (min-width: 900px) { .is-abwho__grid { grid-template-columns: 1.15fr 1fr; gap: var(--is-s7); } }

/* ---- Shared section head -------------------------------------------- */
.is-section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--is-s3); margin-bottom: var(--is-s5); }
.is-section__head p { color: var(--is-ink-muted); font-size: var(--is-fs-sm); margin: 0; }
.is-section__head--light h2 { color: #fff; }
.is-section__head--light p { color: rgba(255,255,255,.7); }

/* ---- 4. Category cards ---------------------------------------------- */
.is-abcats__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--is-s4); }
.is-abcat { display: flex; flex-direction: column; gap: var(--is-s2); border: 1px solid var(--is-line); border-radius: var(--is-radius); padding: var(--is-s3); text-decoration: none; color: inherit; transition: border-color var(--is-t), transform var(--is-t); }
.is-abcat:hover { border-color: var(--is-black); transform: translateY(-2px); }
.is-abcat__media { display: block; aspect-ratio: 4 / 3; background: var(--is-bg-soft); border-radius: calc(var(--is-radius) - 4px); overflow: hidden; }
.is-abcat__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.is-abcat__name { font-family: var(--is-font-display); font-weight: 600; color: var(--is-black); }
.is-abcat__desc { font-size: var(--is-fs-xs); color: var(--is-ink-muted); line-height: 1.6; }
.is-abcat__go { font-size: var(--is-fs-xs); font-weight: 600; color: var(--is-black); margin-top: auto; }

@media (min-width: 700px) { .is-abcats__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1100px) { .is-abcats__grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }

/* ---- 5. Why customers choose us ------------------------------------- */
.is-abwhy { background: var(--is-black); color: #fff; padding-block: var(--is-s7); }
.is-abwhy__grid { display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: var(--is-s4); }
.is-abwhy__card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--is-radius); padding: var(--is-s4); }
.is-abwhy__card svg { color: #fff; margin-bottom: var(--is-s3); }
.is-abwhy__card h3 { color: #fff; font-size: 1rem; margin-bottom: var(--is-s2); }
.is-abwhy__card p { color: rgba(255,255,255,.72); font-size: var(--is-fs-sm); line-height: 1.6; margin: 0; }

@media (min-width: 700px) { .is-abwhy__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1100px) { .is-abwhy__grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }

/* ---- 6. How we help -------------------------------------------------- */
.is-abhow__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: var(--is-s4); }
.is-abhow__step { border-top: 2px solid var(--is-black); padding-top: var(--is-s3); }
.is-abhow__n { font-family: var(--is-font-display); font-size: var(--is-fs-xs); font-weight: 700; color: var(--is-ink-muted); letter-spacing: .08em; }
.is-abhow__step h3 { font-size: .95rem; margin: var(--is-s2) 0; }
.is-abhow__step p { font-size: var(--is-fs-sm); color: var(--is-ink-muted); line-height: 1.6; margin: 0; }

@media (min-width: 700px) { .is-abhow__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1100px) { .is-abhow__grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }

/* ---- 7. Visit the store ---------------------------------------------- */
.is-abvisit__grid { display: grid; gap: var(--is-s5); align-items: start; }
.is-abvisit__row { display: flex; gap: var(--is-s3); align-items: flex-start; font-size: var(--is-fs-sm); color: var(--is-ink-muted); padding: var(--is-s3) 0; border-top: 1px solid var(--is-line); }
.is-abvisit__row:first-child { border-top: 0; }
.is-abvisit__row svg { flex: none; color: var(--is-black); margin-top: 2px; }
.is-abvisit__row strong { display: block; color: var(--is-black); font-family: var(--is-font-display); margin-bottom: 2px; }
.is-abvisit__cta { display: flex; flex-wrap: wrap; gap: var(--is-s2); margin-top: var(--is-s4); }
.is-abvisit__shots { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--is-s3); }
.is-abvisit__shots figure { margin: 0; border-radius: var(--is-radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--is-bg-soft); }
.is-abvisit__shots img { width: 100%; height: 100%; object-fit: cover; display: block; }
.is-abvisit__shots figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

@media (min-width: 900px) { .is-abvisit__grid { grid-template-columns: 1fr 1.3fr; gap: var(--is-s6); } }

/* ---- 9. Who we serve -------------------------------------------------- */
.is-abserve__grid { display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: var(--is-s4); }
.is-abserve__card { border: 1px solid var(--is-line); border-radius: var(--is-radius); padding: var(--is-s4); }
.is-abserve__card svg { color: var(--is-black); margin-bottom: var(--is-s3); }
.is-abserve__card h3 { font-size: .95rem; margin-bottom: var(--is-s2); }
.is-abserve__card p { font-size: var(--is-fs-sm); color: var(--is-ink-muted); line-height: 1.6; margin: 0; }

@media (min-width: 700px) { .is-abserve__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1100px) { .is-abserve__grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } }

/* ---- 10. Journey ------------------------------------------------------ */
.is-abjourney__line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: var(--is-s4); }
.is-abjourney__line li { border-top: 2px solid var(--is-line); padding-top: var(--is-s3); }
.is-abjourney__tag { display: inline-block; font-family: var(--is-font-display); font-weight: 700; font-size: var(--is-fs-xs); background: var(--is-bg-soft); border-radius: 999px; padding: 2px 10px; margin-bottom: var(--is-s2); }
.is-abjourney__line p { font-size: var(--is-fs-sm); color: var(--is-ink-muted); line-height: 1.6; margin: 0; }

/* Five stops need real width: at 768px they were 136px each, which wraps
   every label. Two across on a tablet, five only on a desktop. */
@media (min-width: 700px) { .is-abjourney__line { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .is-abjourney__line { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }

/* ---- 11. FAQs --------------------------------------------------------- */
.is-abfaq__grid { display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: 0 var(--is-s5); }
.is-abfaq__item { border-bottom: 1px solid var(--is-line); padding: var(--is-s3) 0; }
.is-abfaq__item summary { cursor: pointer; font-weight: 600; font-size: var(--is-fs-sm); list-style: none; display: flex; justify-content: space-between; gap: var(--is-s3); }
.is-abfaq__item summary::-webkit-details-marker { display: none; }
.is-abfaq__item summary::after { content: "+"; color: var(--is-ink-muted); }
.is-abfaq__item[open] summary::after { content: "-"; }
.is-abfaq__item p { font-size: var(--is-fs-sm); color: var(--is-ink-muted); line-height: 1.7; margin: var(--is-s2) 0 0; }

@media (min-width: 900px) { .is-abfaq__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---- 12. Closing CTA --------------------------------------------------- */
.is-abcta { background: var(--is-black); color: #fff; padding-block: 40px; }
.is-abcta__grid { display: grid; gap: var(--is-s4); align-items: center; }
.is-abcta h2 { color: #fff; margin-bottom: var(--is-s2); }
.is-abcta p { color: rgba(255,255,255,.75); font-size: var(--is-fs-sm); margin: 0; max-width: 60ch; }
.is-abcta__buttons { display: flex; flex-wrap: wrap; gap: var(--is-s3); }

@media (min-width: 900px) {
  .is-abcta__grid { grid-template-columns: 1.3fr auto; }
  .is-abcta__buttons { justify-content: flex-end; }
}

/* Containers the markup names but the grid was carrying implicitly. Given
   real rules so no class on the page is a dead name, and so the prose
   columns are capped at a readable measure rather than running the full
   width of a 1272px container. */
.is-abhero__text { min-width: 0; }
.is-abwho__text { min-width: 0; }
.is-abwho__text .is-prose { max-width: 62ch; }
.is-abvisit__facts { min-width: 0; }
.is-abreviews { padding-top: 0; }

/* The Visit section when there is no gallery: a single photograph, or the
   map. Both fill the column the gallery would have occupied, so the right
   half of the section is never empty. */
.is-abvisit__photo { margin: 0; border-radius: var(--is-radius); overflow: hidden; background: var(--is-bg-soft); }
.is-abvisit__photo img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; }
.is-abvisit__map { border-radius: var(--is-radius); overflow: hidden; background: var(--is-bg-soft); aspect-ratio: 16 / 10; }
.is-abvisit__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   Why these grids are auto-fit and not a fixed track count
   --------------------------------------------------------------------------
   MEASURED on the live About page at 1440px: the category grid declared five
   tracks and the shop has four categories, so the fifth track sat empty and
   258px of the row was blank. The cards were 242px wide in a 1272px container.

   Every one of these bands has a count that can change - categories get added,
   and the why / how / serve / journey rows are filterable arrays - so a fixed
   count is a gap waiting to happen in all of them, not just the one that
   showed it. auto-fit collapses the tracks it does not need, so the row fills
   whatever the number of items.

   The minmax floor on each is chosen so the maximum track count still matches
   the approved design: 220px gives at most five across a 1272px container,
   180px at most six.
   ========================================================================== */

/* ==========================================================================
   About page — spacing and section polish
   --------------------------------------------------------------------------
   MEASURED on the live page at 1440px before this block:

     most sections   88px top + 88px bottom
     between two     176px of white
     total padding   1444px of a 5677px page

   A quarter of the page was padding. The bands are already separated by their
   headings, their borders and in two cases a black background, so they do not
   also need three inches of air. Scoped to .is-about so no other page moves.
   ========================================================================== */
.is-about .is-section { padding-block: 56px; }
.is-about .is-abstrip__grid { padding-block: 28px; }

/* The dark bands keep a little more, because a background needs room to read
   as a band rather than as a stripe. */
.is-about .is-abwhy { padding-block: 64px; }

/* ---- Section heads ---------------------------------------------------
   The head was a flex row with space-between, which is right for a heading
   and a link ("View All Products →") and wrong for a heading and a sentence:
   it threw the subtitle to the far right of a 1272px row, a quarter of the
   page away from the words it belongs to. Measured on Our journey and on the
   FAQs, where the subtitle sat at x=1128 under nothing.

   A head containing a paragraph now stacks; a head containing a link keeps
   the row. :has() does the choosing, so no markup changed. */
.is-about .is-section__head:has(p) {
  display: block;
  margin-bottom: var(--is-s5);
}
.is-about .is-section__head:has(p) p {
  margin-top: var(--is-s2);
  max-width: 70ch;
}
.is-about .is-section__head h2 { margin: 0; }

/* ---- Our journey — an actual timeline --------------------------------
   It was five columns each with a thin rule on top: five unrelated blocks
   rather than one sequence. A continuous line with a marker per stop says
   "this happened, then this" without a word of explanation. */
.is-about .is-abjourney__line { position: relative; }

@media (min-width: 1000px) {
  .is-about .is-abjourney__line::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 7px;
    height: 2px;
    background: var(--is-line);
  }
}

.is-about .is-abjourney__line li {
  position: relative;
  border-top: 0;
  padding-top: var(--is-s4);
}

.is-about .is-abjourney__line li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--is-white, #fff);
  border: 2px solid var(--is-line);
}

/* The first and last stops are the ones people look for. */
.is-about .is-abjourney__line li:first-child::before,
.is-about .is-abjourney__line li:last-child::before {
  background: var(--is-black);
  border-color: var(--is-black);
}

.is-about .is-abjourney__tag {
  background: transparent;
  padding: 0;
  margin-bottom: var(--is-s2);
  font-size: var(--is-fs-sm);
  color: var(--is-black);
  letter-spacing: .01em;
}

@media (max-width: 999px) {
  /* Stacked: the line runs down the left instead of across the top. */
  .is-about .is-abjourney__line li { padding-left: var(--is-s5); padding-top: 0; }
  .is-about .is-abjourney__line li::before { top: 4px; }
  .is-about .is-abjourney__line li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 20px;
    bottom: calc(var(--is-s4) * -1);
    width: 2px;
    background: var(--is-line);
  }
}

/* ---- FAQs — components, not loose rules ------------------------------
   Bare <details> separated by hairlines read as a wall of text. Boxing each
   one gives the eye a target and makes the open state obvious. */
.is-about .is-abfaq__grid { gap: var(--is-s3) var(--is-s4); align-items: start; }

.is-about .is-abfaq__item {
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius);
  padding: var(--is-s3) var(--is-s4);
  background: var(--is-white, #fff);
  transition: border-color var(--is-t), background var(--is-t);
}
.is-about .is-abfaq__item:hover { border-color: var(--is-black); }
.is-about .is-abfaq__item[open] { background: var(--is-bg-soft); border-color: var(--is-black); }
.is-about .is-abfaq__item summary { align-items: center; gap: var(--is-s4); }
.is-about .is-abfaq__item summary::after {
  font-size: 1.1rem;
  line-height: 1;
  flex: none;
}
.is-about .is-abfaq__item p { border-top: 1px solid var(--is-line); padding-top: var(--is-s3); }

/* ---- Who we serve / why — cards that end together --------------------
   Grid already stretches every card to the tallest in its row, which is what
   makes the bottom edges line up. The text is left to flow from the top: a
   one-line card with its sentence shoved to the bottom to "balance" a
   four-line neighbour reads as a mistake, not as alignment.

   What the cards did need was a floor, so a single short card does not
   collapse to a sliver when it is alone on the last row. */
.is-about .is-abserve__card,
.is-about .is-abwhy__card { min-height: 160px; }

/* ==========================================================================
   Support page
   --------------------------------------------------------------------------
   Four bands: demonstrations, installation, downloads, questions - then the
   phone number. Each band is skipped entirely by the template when it has
   nothing in it, so there is no "empty state" styling here: there is no
   empty state.

   Scoped to .is-support-page so the contact cards (.is-support__card), which
   the contact page also uses, keep their own styling everywhere else.
   ========================================================================== */
.is-support-page .is-section { padding-block: 56px; }
.is-support-page .is-sup-head { padding-bottom: 0; }

/* The heads here carry a subtitle, so they stack rather than sitting in a
   space-between row - the same correction the About page needed. */
.is-support-page .is-section__head:has(p) { display: block; margin-bottom: var(--is-s5); }
.is-support-page .is-section__head:has(p) h2 { margin: 0; }
.is-support-page .is-section__head:has(p) p { margin-top: var(--is-s2); max-width: 70ch; }

/* ---- jump nav ---------------------------------------------------------
   A support page is long by nature. The nav is the table of contents, and it
   lists only the sections that actually exist. */
.is-sup-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--is-s2);
  margin-top: var(--is-s5);
  padding-bottom: var(--is-s2);
}
.is-sup-nav__link {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--is-line);
  border-radius: 999px;
  font-size: var(--is-fs-sm);
  color: var(--is-black);
  text-decoration: none;
  transition: background var(--is-t), border-color var(--is-t), color var(--is-t);
}
.is-sup-nav__link:hover {
  background: var(--is-black);
  border-color: var(--is-black);
  color: #fff;
}

/* Anchored sections land under the sticky header rather than behind it. */
.is-support-page [id] { scroll-margin-top: 96px; }

/* ---- 1. demonstrations ------------------------------------------------ */
.is-sup-videos__grid {
  display: grid;
  gap: var(--is-s5);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.is-sup-video {
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: border-color var(--is-t);
}
.is-sup-video:hover { border-color: var(--is-black); }
.is-sup-video__frame {
  aspect-ratio: 16 / 9;
  background: var(--is-bg-soft);
}
.is-sup-video__frame iframe,
.is-sup-video__frame video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.is-sup-video__meta { padding: var(--is-s4); }
.is-sup-video__meta h3 { margin: 0 0 4px; font-size: 1rem; }
.is-sup-video__meta p {
  margin: 0;
  font-size: var(--is-fs-sm);
  color: var(--is-muted);
}
.is-sup-video__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--is-s3);
  font-size: var(--is-fs-sm);
  font-weight: 600;
  color: var(--is-black);
  text-decoration: none;
}
.is-sup-video__link:hover { text-decoration: underline; }

/* ---- 2. installation guides -------------------------------------------
   Accordions rather than a wall of steps: somebody needs one guide, not six,
   and a CCTV install sitting open above a GPS install is noise. The first is
   open so the section does not read as a row of closed doors. */
.is-sup-install__list { display: grid; gap: var(--is-s3); }
.is-sup-guide {
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius);
  background: #fff;
  overflow: hidden;
  transition: border-color var(--is-t);
}
.is-sup-guide:hover { border-color: var(--is-black); }
.is-sup-guide[open] { border-color: var(--is-black); }
.is-sup-guide > summary {
  display: flex;
  align-items: center;
  gap: var(--is-s4);
  padding: var(--is-s4);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}
.is-sup-guide > summary::-webkit-details-marker { display: none; }
.is-sup-guide > summary::after {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
  flex: none;
  color: var(--is-muted);
}
.is-sup-guide[open] > summary::after { content: "\2212"; }
.is-sup-guide__facts {
  font-size: var(--is-fs-sm);
  font-weight: 400;
  color: var(--is-muted);
  margin-left: auto;
  padding-right: var(--is-s3);
}
.is-sup-guide__body {
  padding: var(--is-s4);
  border-top: 1px solid var(--is-line);
}
.is-sup-guide__tools {
  margin: 0 0 var(--is-s4);
  font-size: var(--is-fs-sm);
  color: var(--is-muted);
}
.is-sup-guide__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--is-s4);
  font-size: var(--is-fs-sm);
  font-weight: 600;
  color: var(--is-black);
  text-decoration: none;
}
.is-sup-guide__link:hover { text-decoration: underline; }

/* The steps: numbered down a connecting line, so the order is the thing the
   eye reads first. */
.is-sup-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: isstep;
}
.is-sup-steps li {
  position: relative;
  counter-increment: isstep;
  padding-left: 46px;
  padding-bottom: var(--is-s4);
}
.is-sup-steps li:last-child { padding-bottom: 0; }
.is-sup-steps li::before {
  content: counter(isstep);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--is-black);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .85rem;
  font-weight: 600;
}
.is-sup-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: 6px;
  width: 1px;
  background: var(--is-line);
}
.is-sup-steps h4 { margin: 4px 0 2px; font-size: .98rem; }
.is-sup-steps p { margin: 0; font-size: var(--is-fs-sm); color: var(--is-muted); }

/* ---- 3. downloads ------------------------------------------------------ */
.is-sup-dlgroup + .is-sup-dlgroup { margin-top: var(--is-s5); }
.is-sup-dlgroup__name {
  margin: 0 0 var(--is-s3);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--is-muted);
}
.is-sup-dllist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--is-s2); }
.is-sup-dl {
  display: flex;
  align-items: center;
  gap: var(--is-s3);
  padding: var(--is-s3) var(--is-s4);
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius);
  background: #fff;
  transition: border-color var(--is-t);
}
.is-sup-dl:hover { border-color: var(--is-black); }
.is-sup-dl__icon { flex: none; color: var(--is-muted); display: grid; place-items: center; }
.is-sup-dl__text { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--is-s2); flex-wrap: wrap; }
.is-sup-dl__title { color: var(--is-black); text-decoration: none; font-weight: 500; }
.is-sup-dl__title:hover { text-decoration: underline; }
.is-sup-dl__type {
  flex: none;
  font-size: .68rem;
  letter-spacing: .06em;
  padding: 2px 7px;
  border: 1px solid var(--is-line);
  border-radius: 4px;
  color: var(--is-muted);
}
.is-sup-dl__get {
  flex: none;
  font-size: var(--is-fs-sm);
  font-weight: 600;
  color: var(--is-black);
  text-decoration: none;
  white-space: nowrap;
}
.is-sup-dl__get:hover { text-decoration: underline; }

/* ---- 4. questions ------------------------------------------------------ */
.is-sup-faq__grid {
  display: grid;
  gap: var(--is-s3) var(--is-s4);
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  align-items: start;
}
.is-sup-faq__item {
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius);
  padding: var(--is-s3) var(--is-s4);
  background: #fff;
  transition: border-color var(--is-t), background var(--is-t);
}
.is-sup-faq__item:hover { border-color: var(--is-black); }
.is-sup-faq__item[open] { background: var(--is-bg-soft); border-color: var(--is-black); }
.is-sup-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--is-s4);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}
.is-sup-faq__item summary::-webkit-details-marker { display: none; }
.is-sup-faq__item summary::after { content: "+"; font-size: 1.1rem; line-height: 1; flex: none; color: var(--is-muted); }
.is-sup-faq__item[open] summary::after { content: "\2212"; }
.is-sup-faq__item p {
  margin: var(--is-s3) 0 0;
  padding-top: var(--is-s3);
  border-top: 1px solid var(--is-line);
  font-size: var(--is-fs-sm);
  color: var(--is-muted);
}

/* ---- 5. talk to us ----------------------------------------------------- */
.is-sup-contact { background: var(--is-bg-soft); }

@media (max-width: 599px) {
  .is-sup-dl { flex-wrap: wrap; }
  .is-sup-dl__get { margin-left: auto; }
  .is-sup-guide__facts { display: none; }
}

/* The policy links, under the contact cards. A row of plain links rather than
   four more cards: they are the smallest thing on the page and should look it,
   or they compete with the phone number directly above them. */
.is-sup-routes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--is-s2) var(--is-s4);
  margin-top: var(--is-s5);
  padding-top: var(--is-s4);
  border-top: 1px solid var(--is-line);
  font-size: var(--is-fs-sm);
}
.is-sup-routes__label { color: var(--is-muted); }
.is-sup-routes a { color: var(--is-black); text-decoration: none; font-weight: 500; }
.is-sup-routes a:hover { text-decoration: underline; }

/* ===========================================================================
   SUPPORT — the product index, and one product's support page
   ===========================================================================
   The index is a list, not a shop grid. A grid of cards invites browsing; the
   person here already owns one of these and wants to stop looking, so the rows
   are narrow, uniform and scannable, with the thumbnail only large enough to
   recognise a box by.
   ========================================================================= */

.is-sup-head__lede {
  margin-top: var(--is-s3);
  max-width: 60ch;
  color: var(--is-text-2);
  font-size: 1.0625rem;
  line-height: 1.5;
}
.is-sup-head__intro { margin-top: var(--is-s3); max-width: 70ch; }

/* ---- the filter box ---- */

.is-sup-find { margin-bottom: var(--is-s5); max-width: 520px; }
.is-sup-find__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--is-fs-sm);
  font-weight: 500;
}
.is-sup-find__box {
  display: flex;
  align-items: center;
  gap: var(--is-s2);
  padding: 0 var(--is-s3);
  border: 1px solid var(--is-line);
  border-radius: 10px;
  background: #fff;
}
.is-sup-find__box:focus-within { border-color: var(--is-black); }
.is-sup-find__box svg { flex: none; color: var(--is-text-2); }
.is-sup-find__box input {
  flex: 1;
  min-width: 0;             /* or a long value pushes the icon out of the box */
  height: 48px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
}
.is-sup-find__box input:focus { outline: none; }
.is-sup-find__count {
  margin: 6px 0 0;
  min-height: 1.2em;        /* reserved, so the list does not jump as you type */
  font-size: var(--is-fs-sm);
  color: var(--is-text-2);
}
.is-sup-find__empty {
  margin: 0;
  padding: var(--is-s5);
  border: 1px dashed var(--is-line);
  border-radius: 12px;
  max-width: 70ch;
  color: var(--is-text-2);
}

/* ---- the list ---- */

.is-sup-groups {
  display: grid;
  gap: var(--is-s6);
  /* Wide enough for two columns of names without either becoming so long that
     the arrow at the end of a row stops reading as part of the name at the
     start of it. */
  max-width: 1120px;
}
.is-sup-group__name {
  margin: 0 0 var(--is-s3);
  padding-bottom: var(--is-s2);
  border-bottom: 1px solid var(--is-line);
  font-size: var(--is-fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--is-text-2);
}
/* Two columns. With 79 products a single column is a very long scroll, and the
   rows are short enough that half the width still fits the longest name on one
   line at this size. It falls back to one column below 768px, where two would
   be two columns of 160px. */
.is-sup-group__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--is-s5);
}

/* A border on every row, not on "the one after another one": in a two-column
   grid the adjacent-sibling rule leaves the first row of the second column
   without its line and draws one above a row that has nothing above it. */
.is-sup-row { border-bottom: 1px solid var(--is-line); }

.is-sup-row__link {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--is-s3);
  padding: var(--is-s3) var(--is-s2);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.is-sup-row__link:hover { background: var(--is-bg-soft, #f6f6f6); }
.is-sup-row__link:focus-visible { outline: 2px solid var(--is-black); outline-offset: -2px; }

.is-sup-row__media {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--is-line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.is-sup-row__media img { width: 100%; height: 100%; object-fit: contain; }

.is-sup-row__text { min-width: 0; }
.is-sup-row__name { display: block; font-weight: 500; line-height: 1.35; }

.is-sup-row__has { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.is-sup-tag {
  padding: 2px 8px;
  border: 1px solid var(--is-line);
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--is-text-2);
}

.is-sup-row__go { color: var(--is-text-2); }
.is-sup-row__link:hover .is-sup-row__go { color: var(--is-black); }

@media (max-width: 767.98px) {
  .is-sup-group__list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
  /* The arrow is decoration; at this width the name needs its column back. */
  .is-sup-row__link { grid-template-columns: 48px minmax(0, 1fr); }
  .is-sup-row__go { display: none; }
  .is-sup-row__media { width: 48px; height: 48px; }
}

/* ---- one product's support page ---- */

.is-supp {
  /* Flex, not a two-column grid: a product with no image renders no .is-supp__media
     at all, and in a grid the text then sits in the 120px picture column. */
  display: flex;
  flex-wrap: wrap;
  gap: var(--is-s5);
  align-items: flex-start;
}
.is-supp__text { flex: 1 1 320px; min-width: 0; }
.is-supp__media {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  border: 1px solid var(--is-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.is-supp__media img { width: 100%; height: 100%; object-fit: contain; }

.is-supp__text h1 { margin: 6px 0 0; }
.is-supp__lede {
  margin-top: var(--is-s3);
  max-width: 60ch;
  color: var(--is-text-2);
  line-height: 1.55;
}
.is-supp__acts { display: flex; flex-wrap: wrap; gap: var(--is-s2); margin-top: var(--is-s4); }
.is-supp__back { margin-top: var(--is-s4); font-size: var(--is-fs-sm); }
.is-supp__back a { color: var(--is-black); }
.is-supp__sep { margin: 0 8px; color: var(--is-text-2); }

/* The two product parts were written for the product page's column, where
   something else already constrains them. Here they are the whole page. */
/* The width cap goes on the sections, not on the wrapper: the wrapper is also
   .is-container, and a max-width there re-centres it, so the video started
   200px to the right of the heading above it. */
.is-sup-help__inner { display: grid; gap: var(--is-s6); }
.is-support-page--product .is-psection { margin: 0; max-width: 820px; }

@media (max-width: 575.98px) {
  .is-supp { gap: var(--is-s4); }
  .is-supp__media { width: 96px; height: 96px; }
}

/* Product page action row: Compare and Share read as firmly as "Save for
   later" beside them - same weight, dark text, a clear dark border.
   Scoped to the row, so the Compare toggle on shop cards is unchanged. */
.is-pdp__actions .is-compare-toggle,
.is-pdp__actions .is-share__toggle {
  border: 1.5px solid var(--is-ink);
  color: var(--is-ink);
  font-family: var(--is-font-display);
  font-weight: 600;
}
.is-pdp__actions .is-compare-toggle .is-compare-toggle__box { border-color: var(--is-ink); }
.is-pdp__actions .is-compare-toggle:hover:not(.is-disabled),
.is-pdp__actions .is-compare-toggle:focus-visible,
.is-pdp__actions .is-share__toggle:hover,
.is-pdp__actions .is-share__toggle:focus-visible,
.is-pdp__actions .is-share--inline.is-open .is-share__toggle {
  background: var(--is-bg-soft, #f4f4f6);
  color: var(--is-black);
  border-color: var(--is-black);
}
/* Bold labels are wider: on a phone tighten the row so Save for later,
   Compare and Share still fit on one line. */
@media (max-width: 575px) {
  .is-pdp__actions { gap: 8px; }
  .is-pdp__actions .is-compare-toggle,
  .is-pdp__actions .is-share__toggle { padding: 9px 11px; gap: 6px; }
}

/* Even spacing above and below the Save for later / Compare / Share row:
   the bordered buttons sat almost on the delivery box. */
.is-pdp__actions { margin: 0 0 var(--is-s4, 16px); }