/* ==========================================================================
   Indo Spy — WooCommerce bridge
   --------------------------------------------------------------------------
   The ONLY stylesheet written for the conversion. Everything else — style.css,
   pages.css, modules.css — ships unchanged from the approved build.

   Its single job: make the markup WooCommerce emits wear that design. Where a
   template could not be overridden without breaking Woo's own behaviour (the
   variation form, the price HTML, the notices, the checkout fields), the
   markup stays Woo's and is styled here instead.

   Rules followed throughout:
     • No !important unless overriding an inline style Woo itself sets.
     • Style Woo's classes, never rename them — renaming breaks its JavaScript.
     • Use the design tokens, never new colours or sizes.

     1. Resets and notices
     2. Prices
     3. Product loop
     4. Single product
     5. Cart
     6. Checkout
     7. My Account
     8. Elementor guards
   ========================================================================== */

/* ==========================================================================
   1. Resets and notices
   ========================================================================== */

.woocommerce .is-container,
.woocommerce-page .is-container { max-width: var(--is-container); }

/* Woo wraps loops in <ul class="products"> — the design's grid is a CSS grid,
   so the list semantics stay and the list styling goes. */
ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--is-s4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px)  { ul.products { gap: var(--is-s5); grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* woocommerce-layout.css clears its old float grid with
   `.woocommerce-page ul.products::before { content:" "; display:table }`.
   In a CSS grid that pseudo-element is a grid ITEM, so it takes the first cell
   and the first row renders one card short with an empty box in front of it.
   Its selector carries a class, so these must too — plain `ul.products::before`
   loses on specificity no matter which stylesheet loads last. */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none;
  display: none;
}

ul.products li.product { margin: 0 !important; width: auto !important; float: none !important; }

/* Notices. Woo's own markup, in the design's panel styling. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
  list-style: none;
  margin: 0 0 var(--is-s5);
  padding: var(--is-s4) var(--is-s5);
  border: 1px solid var(--is-line);
  border-left-width: 3px;
  border-radius: var(--is-radius-sm);
  background: var(--is-bg-soft);
  font-size: var(--is-fs-sm);
  color: var(--is-ink);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--is-s3);
}
.woocommerce-message { border-left-color: var(--is-ok); background: #F3FAF6; }
.woocommerce-info    { border-left-color: var(--is-black); }
.woocommerce-error   { border-left-color: #B42318; background: #FEF3F2; color: #7A271A; }
.woocommerce-error li { list-style: none; }

/* Woo puts the "View cart" link inside the notice; it is a button here. */
.woocommerce-message .button,
.woocommerce-info .button {
  margin-left: auto;
  order: 2;
}

/* Woo's generic .button, wherever the theme has not replaced it. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--is-s2);
  min-height: 48px;
  padding: 0 var(--is-s5);
  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;
  line-height: 1;
  text-decoration: none;
  transition: background var(--is-t), border-color var(--is-t), transform var(--is-t);
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--is-charcoal);
  border-color: var(--is-charcoal);
  color: #fff;
  transform: translateY(-1px);
}
/* `.alt` is WooCommerce's primary button — Proceed to checkout, Place order.
   Its own rule is `.woocommerce a.button.alt` etc. (two classes and an
   element), which is why a single-class override left those buttons in Woo's
   default purple. Match the selector shape, including the #submit id rule. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .button.alt {
  background: var(--is-black);
  border-color: var(--is-black);
  color: #fff;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce .button.alt:hover {
  background: var(--is-charcoal);
  border-color: var(--is-charcoal);
  color: #fff;
}
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt.disabled,
.woocommerce .button:disabled,
.woocommerce .button.disabled { opacity: .45; pointer-events: none; }

/* Woo's own form fields. */
.woocommerce form .form-row { margin: 0 0 var(--is-s4); padding: 0; }
.woocommerce form .form-row 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);
}
.woocommerce form .form-row .required { color: #B42318; text-decoration: none; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  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: var(--is-white);
  font-family: var(--is-font-body);
  font-size: var(--is-fs-sm);
  color: var(--is-ink);
  transition: border-color var(--is-t), box-shadow var(--is-t);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--is-black);
  box-shadow: 0 0 0 3px rgba(0,0,0,.07);
}
.woocommerce form .form-row textarea { min-height: 120px; }
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: #B42318; }

/* select2, which Woo uses for country and state. */
.woocommerce .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
}
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.4;
  color: var(--is-ink);
}
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: var(--is-s3); }
.select2-dropdown {
  border-color: var(--is-line);
  border-radius: var(--is-radius-sm);
  font-family: var(--is-font-body);
  font-size: var(--is-fs-sm);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--is-black); }

/* Woo's quantity input, inside the design's stepper. */
.woocommerce .quantity { display: inline-flex; }
.woocommerce .quantity .qty {
  width: 44px;
  height: 34px;
  border: 0;
  border-inline: 1px solid var(--is-line);
  border-radius: 0;
  text-align: center;
  font-family: var(--is-font-body);
  font-size: var(--is-fs-xs);
  font-variant-numeric: tabular-nums;
  background: var(--is-white);
  -moz-appearance: textfield;
  padding: 0;
  min-height: 0;
}
.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.is-qty--lg .quantity .qty { width: 52px; height: 46px; font-size: var(--is-fs-sm); }

/* ==========================================================================
   2. Prices
   Woo builds price HTML itself (and currency plugins filter it), so the
   design's strikethrough and emphasis are applied to its output rather than
   the price being rebuilt in PHP.
   ========================================================================== */

.woocommerce .price,
.is-price .amount { font-variant-numeric: tabular-nums; }

/* A sale price is <del>old</del> <ins>new</ins>. */
.is-card__prices del,
.is-pdp__summary .price del {
  opacity: 1;
  font-size: var(--is-fs-xs);
  font-weight: 400;
  color: var(--is-text-2);
  text-decoration: line-through;
  margin-right: var(--is-s2);
}
.is-card__prices ins,
.is-pdp__summary .price ins {
  text-decoration: none;
  background: none;
  font-weight: 600;
  color: var(--is-black);
}

.is-card__prices .price { font-size: 1.0625rem; font-weight: 600; color: var(--is-black); }

.is-pdp__summary .price {
  display: block;
  font-family: var(--is-font-display);
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--is-black);
  margin: 0 0 var(--is-s2);
}
.is-pdp__summary .price del { font-size: 1rem; }

/* ==========================================================================
   3. Product loop
   ========================================================================== */

/* Woo's star rating, where the store genuinely has reviews. */
.is-card__rating { display: flex; align-items: center; gap: var(--is-s2); }
.woocommerce .star-rating {
  float: none;
  font-size: 12px;
  width: 5.4em;
  height: 1.4em;
  line-height: 1.4;
  color: var(--is-black);
}
.woocommerce .star-rating::before { color: var(--is-line); }
.is-card__reviews { font-size: var(--is-fs-xs); color: var(--is-text-2); }

/* The loop add-to-cart is Woo's <a class="button ajax_add_to_cart">; the
   design's classes are passed to it, so only its loading state needs styling. */
.is-card__actions .added_to_cart { display: none; }
.is-card__actions .button.loading { opacity: .7; pointer-events: none; }
.is-card__actions .button.loading::after {
  content: '';
  width: 14px; height: 14px;
  margin-left: var(--is-s2);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: indospy-spin .6s linear infinite;
}
@keyframes indospy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .is-card__actions .button.loading::after { animation-duration: 2s; }
}

/* Woo's own sale flash is filtered to the design's badge; hide any that a
   plugin adds outside the badge container. */
.woocommerce span.onsale { display: none; }
.is-card__badges span.onsale,
.is-pdp__gallery span.onsale { display: inline-block; }

/* ==========================================================================
   4. Single product
   ========================================================================== */

.is-pdp__gallery { position: relative; }

.woocommerce div.product div.images { margin: 0; }
.woocommerce div.product div.images img { border-radius: var(--is-radius); }
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
  background: var(--is-bg-soft);
  border-radius: var(--is-radius);
  overflow: hidden;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: var(--is-s5);
  background: var(--is-bg-soft);
}
.woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--is-s2);
  margin: var(--is-s3) 0 0;
  padding: 0;
}
.woocommerce div.product div.images .flex-control-thumbs li { width: auto; float: none; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs img {
  width: 72px; height: 72px;
  padding: 4px;
  object-fit: contain;
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius-sm);
  background: var(--is-white);
  opacity: 1;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover {
  border-color: var(--is-black);
  box-shadow: inset 0 0 0 1px var(--is-black);
}
/* Woo's zoom trigger sits over the image. */
.woocommerce-product-gallery__trigger {
  position: absolute; top: var(--is-s4); right: var(--is-s4); z-index: 2;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--is-line);
  color: var(--is-black);
  text-decoration: none;
}

.woocommerce div.product .product_title {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  margin-bottom: var(--is-s4);
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--is-ink-muted);
  font-size: var(--is-fs-sm);
  margin-bottom: var(--is-s5);
}
.woocommerce div.product .woocommerce-product-rating { margin-bottom: var(--is-s4); display: flex; align-items: center; gap: var(--is-s3); }
.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link { font-size: var(--is-fs-xs); color: var(--is-text-2); }

.is-pdp__saving { font-size: var(--is-fs-xs); color: var(--is-accent-ink); font-weight: 600; margin: 0 0 var(--is-s4); }

/* Add-to-cart form: quantity beside the button, as in the design. */
.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--is-s3);
  margin: 0 0 var(--is-s4);
}
/* WooCommerce's clearfix gives the form empty ::before/::after boxes. In a
   flex row each one is an item with a gap beside it, which pushed the
   quantity and the button 12px in from both edges - out of line with the
   price, the action row and the delivery box. Floats are not used here, so
   the clearfix has nothing to clear. */
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after { content: none; display: none; }
.woocommerce div.product form.cart div.quantity { margin: 0; }
.woocommerce div.product form.cart .quantity {
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius-sm);
  overflow: hidden;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
  flex: 1 1 170px;
  min-height: 48px;
}
.woocommerce div.product form.cart .group_table td { padding: var(--is-s2) var(--is-s3); }

/* Variations. Woo's table markup, laid out as the design's fields. */
.woocommerce div.product form.cart .variations {
  width: 100%;
  margin-bottom: var(--is-s4);
  border-collapse: collapse;
}
.woocommerce div.product form.cart .variations td { display: block; padding: 0 0 var(--is-s3); }
.woocommerce div.product form.cart .variations label {
  font-family: var(--is-font-display);
  font-size: var(--is-fs-xs);
  font-weight: 600;
  color: var(--is-black);
  margin-bottom: var(--is-s2);
  display: block;
}
.woocommerce div.product form.cart .variations select {
  width: 100%;
  min-height: 48px;
  padding: var(--is-s3) var(--is-s4);
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius-sm);
  font-family: var(--is-font-body);
  font-size: var(--is-fs-sm);
}
.woocommerce div.product form.cart .reset_variations {
  font-size: var(--is-fs-xs);
  color: var(--is-text-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.woocommerce div.product .woocommerce-variation-price { margin-bottom: var(--is-s3); }

.woocommerce div.product .stock { font-size: var(--is-fs-sm); color: var(--is-ok); margin-bottom: var(--is-s4); }
.woocommerce div.product .stock.out-of-stock { color: var(--is-text-2); }

/* Product tabs become the design's accordion in product.js; this covers the
   moment before that runs, and the case where JavaScript fails. */
.woocommerce div.product .woocommerce-tabs { margin-top: var(--is-s7); }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex; flex-wrap: wrap; gap: var(--is-s4);
  margin: 0 0 var(--is-s5); padding: 0 0 var(--is-s3);
  border-bottom: 1px solid var(--is-line);
  list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none; border: 0; border-radius: 0; margin: 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--is-font-display);
  font-weight: 600;
  font-size: var(--is-fs-sm);
  color: var(--is-text-2);
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--is-black); }

/* Additional information table — a real table, so it stays machine-readable. */
.woocommerce table.shop_attributes { width: 100%; border-collapse: collapse; font-size: var(--is-fs-sm); }
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
  text-align: left;
  padding: var(--is-s3) 0;
  border-bottom: 1px solid var(--is-line-soft);
  font-style: normal;
}
.woocommerce table.shop_attributes th { color: var(--is-text-2); font-weight: 400; width: 40%; }
.woocommerce table.shop_attributes td { color: var(--is-ink); }
.woocommerce table.shop_attributes td p { margin: 0; }

/* Reviews.
   --------------------------------------------------------------------------
   The block used to be WooCommerce's markup dropped into the page: two
   headings both saying "Reviews", an unstyled form, and nothing tying any of
   it to the sections above. woocommerce/single-product-reviews.php now prints
   three named parts - a summary, the list, the form - and these make them read
   as one section of this page.
   -------------------------------------------------------------------------- */

/* One column, stated rather than assumed. A grid with no declared track can
   still be given columns by something further up, and this block has three
   children that must never sit side by side - the summary, the reviews and the
   form are three steps, not three panes. minmax(0,1fr) also stops a long
   review or a wide form field from pushing the track past the container. */
.is-reviews {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--is-s6);
}

/* WooCommerce ends the block with a float clearer. Inside a grid it is not
   clearing anything - it is a fourth row with a gap above it. */
.is-reviews > .clear { display: none; }

/* --- Reviews layout ------------------------------------------------------
   Desktop: the summary card on the left (it stays in view while the reviews
   scroll), the reviews and the form on the right. Phone: one column, summary
   first. Gaps are smaller than the old --is-s6, which with an empty list row
   between them left a hole under "No reviews yet". */
.is-reviews { gap: var(--is-s5); }
@media (min-width: 992px) {
  .is-reviews {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    align-items: start;
    gap: var(--is-s5) var(--is-s6);
  }
  .is-reviews__summary {
    grid-column: 1; grid-row: 1 / span 3;
    position: sticky; top: calc(var(--is-header-h, 80px) + 16px);
  }
  .is-reviews > .is-reviews__list,
  .is-reviews > .is-reviews__form,
  .is-reviews > .woocommerce-verification-required { grid-column: 2; }
}

/* --- Summary card --- */
.is-reviews__summary {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--is-s2);
  padding: var(--is-s5);
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius);
  background: var(--is-white);
}
.is-reviews__score { display: flex; align-items: baseline; gap: 6px; }
.is-reviews__n {
  font-family: var(--is-font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 2rem + 1.6vw, 3rem);
  line-height: 1;
  color: var(--is-black);
}
.is-reviews__of { font-size: var(--is-fs-sm); color: var(--is-text-2); }
.is-reviews__count { margin: 0; font-size: var(--is-fs-sm); color: var(--is-text-2); }

.is-reviews__bars { list-style: none; margin: var(--is-s3) 0 0; padding: 0; width: 100%; display: grid; gap: 8px; }
.is-reviews__bars li {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 28px;
  align-items: center; gap: var(--is-s3);
  font-size: var(--is-fs-xs); color: var(--is-text-2);
}
.is-reviews__bar { height: 8px; border-radius: 999px; background: var(--is-bg-soft, #f2f2f4); overflow: hidden; }
.is-reviews__bar span { display: block; height: 100%; border-radius: inherit; background: #E8A317; }
.is-reviews__barn { text-align: right; }

/* No reviews yet: an invitation, centred, rather than a lonely grey line. */
.is-reviews--empty .is-reviews__summary { align-items: center; text-align: center; padding: var(--is-s6) var(--is-s5); }
.is-reviews__emptyicon {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: var(--is-s2);
  border-radius: 50%;
  background: #FDF3DC; color: #C98A0E;
}
.is-reviews__emptyicon svg { fill: currentColor; }
.is-reviews__none {
  margin: 0;
  font-family: var(--is-font-display); font-weight: 700;
  font-size: var(--is-fs-h3, 1.25rem); color: var(--is-black);
}
.is-reviews__hint { margin: 0; max-width: 32ch; font-size: var(--is-fs-sm); color: var(--is-text-2); }

.is-reviews__write {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: stretch;
  min-height: 46px; margin-top: var(--is-s4); padding: 0 var(--is-s5);
  border: 1px solid var(--is-black); border-radius: var(--is-radius-sm);
  background: var(--is-white); color: var(--is-black);
  font-family: var(--is-font-display); font-weight: 600; font-size: var(--is-fs-sm);
  text-decoration: none;
  transition: background var(--is-t), color var(--is-t);
}
.is-reviews__write:hover, .is-reviews__write:focus-visible { background: var(--is-black); color: #fff; }
/* On a phone the form is directly below, so the button is only noise. */
@media (max-width: 991.98px) {
  .is-reviews--empty .is-reviews__write { display: none; }
}
#review_form_wrapper { scroll-margin-top: calc(var(--is-header-h, 80px) + 16px); }

/* --- Review cards --- */
.is-reviews .commentlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--is-s4); }
.is-reviews .commentlist .comment_container {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--is-s4);
  padding: var(--is-s5);
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius);
  background: var(--is-white);
}
.is-reviews .commentlist img.avatar {
  position: static; float: none; width: 44px; height: 44px;
  border: 0; border-radius: 50%; padding: 0; background: var(--is-bg-soft);
}
.is-reviews .commentlist .comment-text { margin: 0 !important; border: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; }
.is-reviews .commentlist .star-rating { float: none; order: -1; margin: 0; font-size: 13px; color: #E8A317; }
.is-reviews .commentlist .meta { margin: 0 !important; font-size: var(--is-fs-xs) !important; color: var(--is-text-2); }
.is-reviews .commentlist .woocommerce-review__author { font-family: var(--is-font-display); font-size: var(--is-fs-sm); color: var(--is-black); }
.is-reviews .commentlist .woocommerce-review__verified {
  display: inline-block; margin-left: 6px; padding: 2px 8px;
  border-radius: 999px; background: #E7F6EC; color: #1E7B3F;
  font-style: normal; font-size: 11px;
}
.is-reviews .commentlist .woocommerce-review__dash { display: none; }
.is-reviews .commentlist .woocommerce-review__published-date { display: block; margin-top: 2px; }
.is-reviews .commentlist .description p { margin: 0; font-size: var(--is-fs-sm); line-height: 1.65; color: var(--is-ink); }
.is-reviews .commentlist .children { list-style: none; margin: var(--is-s3) 0 0 var(--is-s6); padding: 0; }
.is-reviews .woocommerce-pagination { margin-top: var(--is-s4); }

/* --- The form: a white card, a real heading, larger star picker --- */
.is-reviews .is-reviews__form { background: var(--is-white); padding: var(--is-s5) var(--is-s5) var(--is-s6); }
.is-reviews .is-reviews__form #reply-title {
  margin-bottom: var(--is-s2);
  font-size: var(--is-fs-h3, 1.25rem);
  line-height: var(--is-lh-head, 1.3);
}
.is-reviews .is-reviews__form .comment-notes { margin: 0 0 var(--is-s4); font-size: var(--is-fs-xs); color: var(--is-text-2); }
.is-reviews .is-reviews__form p.stars { margin: 0; line-height: 1; }
.is-reviews .is-reviews__form p.stars a { font-size: 26px; margin-right: 8px; color: #E8A317; }
/* WooCommerce swaps outline and filled glyphs for the state; colour only. */
.is-reviews .is-reviews__form p.stars a::before { color: #E8A317; }
/* WooCommerce styles these through #reviews/#respond ids, so the ids are
   repeated here: list items lose its margins (the cards carry the spacing),
   the submit button is the theme's black one, and the remember-me checkbox
   sits beside its label. */
#reviews .is-reviews #comments ol.commentlist li { margin: 0; padding: 0; border: 0; }
#reviews .is-reviews #comments ol.commentlist li .description p:last-child { margin-bottom: 0; }
#reviews .is-reviews #respond input#submit {
  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-weight: 600; font-size: var(--is-fs-sm);
}
#reviews .is-reviews #respond input#submit:hover { opacity: .9; }
.is-reviews .is-reviews__form .comment-form-cookies-consent {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 var(--is-s4);
}
.is-reviews .is-reviews__form .comment-form-cookies-consent input { flex: none; margin: 3px 0 0; width: 16px; height: 16px; }
.is-reviews .is-reviews__form .comment-form-cookies-consent label { margin: 0; line-height: 1.5; }
@media (max-width: 575.98px) {
  .is-reviews .is-reviews__form { padding: var(--is-s4) var(--is-s4) var(--is-s5); }
  #reviews .is-reviews #respond input#submit { width: 100%; }
}

/* The form is a panel, like the delivery box and the guide signpost, so it
   reads as part of the page and as a separate job from reading the reviews. */
.is-reviews__form {
  padding: var(--is-s5);
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius);
  background: var(--is-bg-soft, #f7f7f9);
}

.is-reviews__form #reply-title {
  display: block;
  margin-bottom: var(--is-s4);
  font-family: var(--is-font-display);
  font-weight: 700;
  font-size: var(--is-fs-sm);
  color: var(--is-black);
}

/* WooCommerce's comment form is not a .form-row form, so the checkout's field
   rules above do not reach it. Same tokens, same result. */
.is-reviews__form input[type="text"],
.is-reviews__form input[type="email"],
.is-reviews__form select,
.is-reviews__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: var(--is-white);
  font-family: var(--is-font-body);
  font-size: var(--is-fs-sm);
  color: var(--is-ink);
}

.is-reviews__form textarea { min-height: 132px; padding-top: var(--is-s3); }

.is-reviews__form input:focus,
.is-reviews__form select:focus,
.is-reviews__form textarea:focus {
  outline: none;
  border-color: var(--is-black);
  box-shadow: 0 0 0 3px rgba(0,0,0,.07);
}

.is-reviews__form label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--is-fs-xs);
  color: var(--is-text-2);
}

.is-reviews__form .required { color: #B42318; text-decoration: none; }

/* Name and email side by side above the review itself, which is what the
   person is actually here to write. */
.is-reviews__form .comment-form-author,
.is-reviews__form .comment-form-email { margin: 0 0 var(--is-s4); }

@media (min-width: 600px) {
  .is-reviews__form .comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--is-s4); }
  .is-reviews__form .comment-form-rating,
  .is-reviews__form .comment-form-comment,
  .is-reviews__form .form-submit,
  .is-reviews__form .must-log-in,
  .is-reviews__form .comment-notes { grid-column: 1 / -1; }
}

.is-reviews__form .comment-form-rating { margin: 0 0 var(--is-s4); }
.is-reviews__form .comment-form-rating select { max-width: 220px; }
.is-reviews__form .comment-form-comment { margin: 0 0 var(--is-s4); }
.is-reviews__form .form-submit { margin: 0; }

.is-reviews__form .form-submit input[type="submit"] {
  width: auto;
  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-weight: 600;
  font-size: var(--is-fs-sm);
  cursor: pointer;
}

.is-reviews__form .form-submit input[type="submit"]:hover { opacity: .9; }

.woocommerce #reviews #comments ol.commentlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--is-s4); }
.woocommerce #reviews #comments ol.commentlist li .comment_container {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--is-s4);
  padding: var(--is-s5);
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius);
  background: var(--is-white);
}
.woocommerce #reviews #comments ol.commentlist li img.avatar {
  position: static; width: 48px; height: 48px;
  border: 0; border-radius: 50%; padding: 0; background: none;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text { margin: 0; border: 0; padding: 0; }
.woocommerce #review_form #respond textarea { min-height: 132px; }

/* Cancel, on the order's own page. The note is beside the button rather than
   under it, so the time limit is read before the button is pressed. */
.is-ordercancel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--is-s3);
  margin: var(--is-s5) 0 0;
}

.is-ordercancel__note { font-size: var(--is-fs-xs); color: var(--is-text-2); }

/* Related products and upsells. */
.woocommerce .related, .woocommerce .upsells { margin-top: var(--is-s8); }
.woocommerce .related > h2, .woocommerce .upsells > h2 {
  font-size: var(--is-fs-h2);
  margin-bottom: var(--is-s6);
}

/* ==========================================================================
   5. Cart
   ========================================================================== */

.woocommerce .cart-collaterals { width: auto; float: none; }
.woocommerce .cart-collaterals .cart_totals { width: auto; float: none; }
.woocommerce .cart-collaterals h2 { font-size: var(--is-fs-sm); }

.woocommerce-cart-form .is-crow .quantity { border: 0; }

.wc-proceed-to-checkout .checkout-button {
  width: 100%;
  background: var(--is-black);
  border-color: var(--is-black);
}

/* Shipping calculator inside the totals panel. */
.woocommerce .shipping-calculator-button { font-size: var(--is-fs-xs); text-decoration: underline; text-underline-offset: 2px; }
.woocommerce .shipping-calculator-form { margin-top: var(--is-s3); }
.woocommerce ul#shipping_method { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--is-s2); }
.woocommerce ul#shipping_method li { margin: 0; padding: 0; font-size: var(--is-fs-sm); }
.woocommerce .woocommerce-shipping-destination { font-size: var(--is-fs-xs); color: var(--is-text-2); margin-top: var(--is-s2); }

/* Side cart busy state, while a quantity change is in flight. */
.is-sidecart.is-busy .is-sidecart__body { opacity: .55; pointer-events: none; transition: opacity var(--is-t); }

/* ==========================================================================
   6. Checkout
   ========================================================================== */

.woocommerce-checkout h3 {
  font-family: var(--is-font-display);
  font-weight: 700;
  font-size: var(--is-fs-sm);
  color: var(--is-black);
  margin-bottom: var(--is-s4);
}

/* Two-up address fields on wider screens, as in the design. */
@media (min-width: 576px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-additional-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--is-s4);
  }
  .woocommerce form .form-row-wide,
  .woocommerce form .form-row.notes { grid-column: 1 / -1; }
}

.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--is-fs-sm);
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  text-align: left;
  padding: var(--is-s3) 0;
  border-bottom: 1px solid var(--is-line-soft);
}
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
  font-family: var(--is-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--is-black);
  border-bottom: 0;
  padding-top: var(--is-s4);
}

#payment { background: none; border-radius: 0; }
#payment ul.payment_methods {
  list-style: none;
  margin: 0 0 var(--is-s4);
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--is-s2);
}
#payment ul.payment_methods li {
  padding: var(--is-s4);
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius-sm);
  margin: 0;
}
#payment ul.payment_methods li:has(input:checked) {
  border-color: var(--is-black);
  box-shadow: inset 0 0 0 1px var(--is-black);
}
#payment ul.payment_methods li label {
  font-family: var(--is-font-display);
  font-weight: 600;
  font-size: var(--is-fs-sm);
  color: var(--is-black);
  display: inline-flex;
  align-items: center;
  gap: var(--is-s2);
}
#payment div.payment_box {
  background: var(--is-bg-soft);
  border-radius: var(--is-radius-sm);
  margin: var(--is-s3) 0 0;
  padding: var(--is-s4);
  font-size: var(--is-fs-xs);
  color: var(--is-ink-muted);
}
#payment div.payment_box::before { content: none; }
#payment #place_order { width: 100%; min-height: 52px; margin-top: var(--is-s4); }

.woocommerce-terms-and-conditions-wrapper { font-size: var(--is-fs-xs); color: var(--is-text-2); margin-bottom: var(--is-s4); }
.woocommerce-form-login-toggle, .woocommerce-form-coupon-toggle { margin-bottom: var(--is-s5); }

/* ==========================================================================
   7. My Account
   ========================================================================== */

.woocommerce-account .woocommerce { display: block; }
.woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: auto; }
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; }

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

.woocommerce-account .is-acctnav a {
  width: 100%;
  padding: var(--is-s3) var(--is-s4);
  font-family: var(--is-font-display);
  font-weight: 600;
  font-size: var(--is-fs-sm);
  color: var(--is-ink);
  display: flex;
  align-items: center;
  gap: var(--is-s3);
}
.woocommerce-account .is-acctnav a:hover { background: var(--is-bg-soft); }
.woocommerce-account .is-acctnav .is-active a,
.woocommerce-account .is-acctnav a[aria-current="true"] { background: var(--is-black); color: #fff; }

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

/* ==========================================================================
   8. Elementor guards
   Narrow, deliberate rules — never a blanket override of Elementor's widgets.
   ========================================================================== */

/* Elementor's container defaults to its kit width. Sections the theme renders
   inside an Elementor page must still sit on the design's grid. */
.elementor-section.elementor-section-boxed > .elementor-container,
.elementor-widget-container .is-container { max-width: var(--is-container); }

/* Elementor's WooCommerce widgets reuse Woo's classes, so they inherit
   everything above. This stops its product grid fighting the theme's. */
.elementor-widget-woocommerce-products ul.products { display: grid; }

/* Elementor injects its own heading and button styles inside its widgets.
   Leave those alone — a heading inside an Elementor widget should obey the
   editor, not the theme. Only the theme's own classes are restyled here, and
   they never appear inside an Elementor widget unless a theme widget put
   them there. */