/* ── WOOCOMMERCE ───────────────────────────────────────────────────────────
   Styling for the shop, single product, cart and checkout. Loaded only on
   WooCommerce pages (see inc/enqueue.php).

   The theme previously styled the mini-cart drawer and nothing else, so these
   pages fell back to raw browser defaults — bullet points on the product grid,
   the Add to cart button colliding with the title, and an unwrapped checkout.

   Colour variables (--navy, --blue, --sky, --cream) come from :root in
   template-parts/ilaro-head.php, which loads on every page.
   ────────────────────────────────────────────────────────────────────────── */

/* WooCommerce still creates its zoom-lens overlay image even though this
   theme never declares wc-product-gallery-zoom support (see the comment in
   inc/woocommerce.php about the width-blowout bug that ruled zoom out). Left
   alone it renders at opacity:1, absolutely positioned directly over the real
   gallery photo — meaning it can visibly cover the product image with a stale
   photo (confirmed while building the color-swatch gallery swap). Hiding it
   outright matches the theme's existing intent to not have zoom at all. */
.woocommerce div.product .zoomImg { display: none !important; }

/* ── PAGE FRAME ─────────────────────────────────────────────────────────────
   #kefy-nav is fixed at 70px tall, so every WooCommerce page needs to clear it.
   .wc-page is emitted by inc/woocommerce.php on classic templates (shop, single
   product); .ilaro-page comes from page.php and catches the block-based Cart and
   Checkout, which never fire WooCommerce's wrapper hooks. */
.wc-page,
.ilaro-page {
  padding-top: 110px;
  padding-bottom: 90px;
  min-height: 60vh;
}

/* Page titles in Cinzel, matching the section headings used site-wide —
   these were falling back to the default sans and read as a different site. */
.ilaro-page-title,
.woocommerce-products-header__title,
.wc-page h1.page-title,
.woocommerce-account .entry-title,
.wc-page .entry-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: .02em;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  color: var(--navy, #284177);
  margin: 0 0 28px;
  line-height: 1.2;
}

/* Breadcrumb — chevron separators, current page in navy, links muted until
   hovered so the trail reads as navigation rather than a row of blue links. */
.woocommerce-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  font-size: 13.5px;
  color: var(--navy, #284177);
  margin-bottom: 14px;
  font-weight: 500;
}
.woocommerce-breadcrumb a {
  color: #8a93a3;
  text-decoration: none;
  padding: 3px 2px;
  border-radius: 4px;
  transition: color .2s ease;
}
.woocommerce-breadcrumb a:hover { color: var(--blue, #006BBD); text-decoration: none; }
.ilaro-crumb-sep {
  display: inline-flex;
  align-items: center;
  color: #c3c8d1;
  margin: 0 3px;
}
.ilaro-crumb-sep svg { display: block; }

.woocommerce-result-count {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}
.woocommerce-ordering select {
  padding: 9px 14px;
  border: 1px solid #d8dbe0;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  color: var(--navy, #284177);
  max-width: 100%;
}
.wc-page .woocommerce-result-count,
.wc-page .woocommerce-ordering {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 26px;
}
.wc-page .woocommerce-ordering { float: right; }

/* ── SHOP FILTERS ───────────────────────────────────────────────────────────
   One markup block, two presentations: an inline bar on desktop, a slide-in
   panel on mobile (see the @media block near the bottom of this file). */
.ilaro-filter-toggle { display: none; }        /* mobile only */
.ilaro-filter-backdrop { display: none; }

.ilaro-filters {
  border: 1px solid var(--border, #e6e8ec);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0 30px;
  background: #fff;
  clear: both;
}
.ilaro-filters-head { display: none; }         /* panel header is mobile-only */
.ilaro-filters-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 26px;
}
.ilaro-filter-group { min-width: 0; }
.ilaro-filter-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue, #006BBD);
  margin: 0 0 9px;
}

/* Category chips — radios styled as pills, so the whole thing still submits
   as a plain form without any JS. */
.ilaro-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ilaro-chip { position: relative; cursor: pointer; }
.ilaro-chip input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.ilaro-chip span {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #d8dbe0;
  border-radius: 50px;
  font-size: 13.5px;
  color: var(--navy, #284177);
  background: #fff;
  transition: border-color .2s, background .2s, color .2s;
}
.ilaro-chip:hover span { border-color: var(--blue, #006BBD); }
.ilaro-chip input:focus-visible + span { outline: 2px solid var(--blue, #006BBD); outline-offset: 2px; }
.ilaro-chip input:checked + span {
  background: var(--navy, #284177);
  border-color: var(--navy, #284177);
  color: #fff;
}

.ilaro-filter-price { display: flex; align-items: center; gap: 9px; }
.ilaro-filter-price input {
  width: 92px;
  padding: 9px 12px;
  border: 1px solid #d8dbe0;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: var(--navy, #284177);
}
.ilaro-filter-dash { font-size: 13px; color: #8a93a3; }

.ilaro-filter-select {
  padding: 9px 14px;
  border: 1px solid #d8dbe0;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  color: var(--navy, #284177);
  min-width: 190px;
}

.ilaro-filters-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  padding-left: 26px;
}
.ilaro-filters-apply {
  border: none;
  border-radius: 50px;
  background: var(--navy, #284177);
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 0 28px;
  min-height: 44px;
  cursor: pointer;
  transition: background .25s ease;
}
.ilaro-filters-apply:hover { background: var(--blue, #006BBD); }
.ilaro-filters-clear {
  font-size: 13.5px;
  color: var(--blue, #006BBD);
  text-decoration: underline;
  white-space: nowrap;
}
.ilaro-filters-clear.is-disabled { color: #b6bcc6; text-decoration: none; pointer-events: none; }

/* Desktop: the footer sits on the same row as the controls. */
@media (min-width: 901px) {
  .ilaro-filters { display: flex; align-items: flex-end; gap: 0; }
  .ilaro-filters-body { flex: 1; }
}

/* ── PRODUCT GRID ───────────────────────────────────────────────────────────
   WooCommerce ships ul.products / li.product as a plain list. Without these
   rules it renders as bullet points with overlapping text — the bug on /shop. */
.woocommerce ul.products,
ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 26px;
  clear: both;
}
.woocommerce ul.products li.product,
ul.products li.product {
  list-style: none;
  margin: 0;
  padding: 0;
  width: auto;
  float: none;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Card image */
ul.products li.product a img,
ul.products li.product img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #fff;
  border-radius: 14px;
  margin: 0 0 14px;
  display: block;
  box-shadow: 0 2px 10px rgba(40, 65, 119, 0.07);
  transition: transform .35s ease, box-shadow .35s ease;
}
ul.products li.product:hover img {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(40, 65, 119, 0.16);
}

ul.products li.product a { text-decoration: none; }

/* Category label above the name */
ul.products li.product .woocommerce-loop-product__category,
ul.products li.product .posted_in {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a93a3;
  margin: 0 0 4px;
}

ul.products li.product .woocommerce-loop-product__title {
  font-size: 17px;
  line-height: 1.35;
  color: var(--navy, #284177);
  margin: 0 0 6px;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Grid rows stretch li.product to equal height by default (CSS grid), but
   that leftover space just sat empty below .astra-shop-summary-wrap since it
   never grew to claim it — the "Select options"/"Add to cart" button's own
   margin:auto only redistributes space *inside* that box. Making the summary
   wrap itself grow to fill the card is what lets the button's auto-margin
   actually pin it to the same bottom edge on every card in a row, regardless
   of title/price length. */
ul.products li.product .astra-shop-summary-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
}

ul.products li.product .price {
  display: block;
  font-size: 16px;
  color: var(--blue, #006BBD);
  margin: 0 0 14px;
}
ul.products li.product .price del {
  color: #9aa1ad;
  margin-right: 6px;
  font-size: 14px;
}
ul.products li.product .price ins {
  text-decoration: none;
  font-weight: 600;
}

/* Add to cart — block-level so it can never overlap the title or price */
ul.products li.product .button,
ul.products li.product .added_to_cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin: auto 0 0;
  padding: 0 22px;
  min-height: 44px;
  border: none;
  border-radius: 50px;
  background: var(--blue, #006BBD);
  color: #fff;
  font-size: 14px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .25s ease;
}
ul.products li.product .button:hover,
ul.products li.product .added_to_cart:hover { background: var(--navy, #284177); }
ul.products li.product .added_to_cart {
  background: transparent;
  color: var(--navy, #284177);
  text-decoration: underline;
  min-height: 0;
  padding: 8px 0 0;
}

/* Astra's built-in on-card quick-add — a bag icon in the top-right corner of
   the product image — ships hover-only (opacity:0 until you mouse over the
   card), which means it never appears at all on a touch device. Forced
   permanently visible here and re-skinned as a solid navy circle (Astra's
   own version relies on its hover state for a visible background too, so
   forcing just the opacity would leave a bare icon floating with no button
   shape behind it at rest). */
/* .astra-shop-thumbnail-wrap (the image's actual wrapper) never had
   `position:relative`, so absolutely-positioned children of it were
   positioning against the whole product card instead of just the image. */
.astra-shop-thumbnail-wrap { position: relative; }

/* Astra's own on-card quick-add button (.ast-on-card-button) is hidden via
   JS in ilaro-chrome-scripts.php and replaced with .ilaro-quick-add below —
   its background never actually painted despite every computed style saying
   it should (confirmed on real devices, not just automated testing), and
   its bag-icon SVG separately has a broken viewBox. A fresh element sidesteps
   whatever is wrong with the original rather than continuing to fight it. */
.ilaro-quick-add {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy, #284177);
  color: #fff;
  box-shadow: 0 3px 12px rgba(40, 65, 119, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  z-index: 5;
  transition: background .2s ease, transform .15s ease;
}
.ilaro-quick-add:hover {
  background: var(--blue, #006BBD);
  color: #fff;
  transform: scale(1.08);
}

/* Sale flash */
.woocommerce span.onsale,
span.onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--navy, #284177);
  color: #fff;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 50px;
  margin: 0;
  min-height: 0;
  line-height: 1.4;
}

/* ── SINGLE PRODUCT ─────────────────────────────────────────────────────── */
/* Astra ships its own opinionated single-product layout (extra specificity via
   body classes like .ast-article-single) that was winning over a plain float
   layout and stacking images full-width above the summary. Flex + !important
   here is deliberate — it's the only thing that reliably beats it. */
.woocommerce div.product {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px;
}
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  width: calc(50% - 24px) !important;
  float: none !important;
  margin: 0 !important;
}
.woocommerce div.product div.images img { border-radius: 14px; }

/* Gallery: main image + a row of thumbnails underneath (not a stacked column).
   WooCommerce's default markup (wc-product-gallery-slider theme support) is
   div.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper
   (slides) + ol.flex-control-nav (thumbs) — unstyled, that ol renders as a
   plain bulleted list, one per line. */
/* This is the actual root cause of the gallery slider being broken (arrows
   pinned to the top, and no other image ever appearing when navigating):
   flexslider sizes .woocommerce-product-gallery__wrapper to a huge inline
   width (e.g. 1200% for 6 images, one image-width per 100%) and slides it
   with translate3d to bring each image into view. `max-width:100%` here
   capped that width straight back down to a single image's width, so every
   image after the first was floating a full row below the visible frame
   instead of beside it. The OUTER .woocommerce-product-gallery already has
   `overflow:hidden`, which is what actually keeps the oversized inner strip
   from spilling across the page — this max-width was never needed to
   prevent overflow, it just broke the slider that depends on being wide. */
.woocommerce-product-gallery { position: relative; max-width: 100%; overflow: hidden; }
.woocommerce-product-gallery__wrapper { margin: 0 0 14px; }
.woocommerce-product-gallery .woocommerce-product-gallery__image {
  border-radius: 14px;
  overflow: hidden;
  background: #f5f6f8;
  max-width: 100%;
  border: 1px solid var(--border, #e6e8ec);
  /* Square frame so a portrait or landscape product photo never dictates the
     column's height — matches the boxed product shot look on Hajde Zemer /
     Donkey Tees rather than a huge edge-to-edge image. */
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* !important: WooCommerce's gallery JS sets an inline width/max-width on this
   img sized to the original upload's pixel dimensions, which blew past the
   48% column and broke the two-column layout on live Printful products. */
.woocommerce-product-gallery__image img {
  border-radius: 14px;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.woocommerce-product-gallery ol.flex-control-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 10px;
}
.woocommerce-product-gallery ol.flex-control-nav li { margin: 0 !important; width: auto !important; height: auto !important; }
.woocommerce-product-gallery ol.flex-control-nav img {
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: .75;
  transition: opacity .2s ease, border-color .2s ease;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #f5f6f8;
  /* !important: something (Astra's flexslider control-nav CSS, styled for a
     tiny dot pager) was forcing this down to ~5px. Thumbnails need a real,
     fixed size regardless of what else targets this element. */
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  min-width: 60px !important;
}
.woocommerce-product-gallery ol.flex-control-nav img.flex-active,
.woocommerce-product-gallery ol.flex-control-nav img:hover {
  opacity: 1;
  border-color: var(--blue, #006BBD);
}

/* Arrows on the main image — same visual language as .merch-arrow on the
   homepage carousels, so the interaction pattern matches sitewide instead of
   this page being thumbnail-click-only with no visible next/prev control. */
.wc-gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: #fff; border: none; border-radius: 50%;
  width: 34px; height: 34px; min-width: 34px; max-width: 34px; min-height: 34px; max-height: 34px;
  padding: 0; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; color: var(--navy, #284177);
  box-shadow: 0 2px 10px rgba(0,0,0,.16); z-index: 3;
  transition: background .2s, transform .15s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.wc-gallery-arrow:hover { background: #f4f4f4; transform: translateY(-50%) scale(1.08); }
.wc-gallery-arrow:active { background: #e8e8e8; transform: translateY(-50%); }
.wc-gallery-arrow.prev { left: 12px; }
.wc-gallery-arrow.next { right: 12px; }

.woocommerce div.product .product_title {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  color: var(--navy, #284177);
  margin: 0 0 12px;
  line-height: 1.2;
}
/* Price: plain sans, larger and darker than the site's serif body copy so it
   reads instantly — the serif italic it replaced was small and hard to scan. */
.woocommerce div.product p.price {
  font-family: 'Inter', sans-serif;
  font-size: 27px;
  font-weight: 600;
  color: var(--navy, #284177);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}
.woocommerce div.product p.price del { color: #9aa1ad; font-size: 20px; font-weight: 400; }
.woocommerce div.product p.price ins { text-decoration: none; }
/* Currency spelled out next to the amount, so international shoppers aren't
   guessing which dollar this is. */
.woocommerce div.product p.price .ilaro-currency {
  font-size: 15px;
  font-weight: 500;
  color: #6b7280;
  margin-left: 6px;
  letter-spacing: .04em;
}

/* Stacked, not side-by-side: a labelled quantity stepper with Add to Cart
   full-width underneath. The previous single row put a small unlabelled number
   box next to the button, which read as an afterthought. */
.woocommerce div.product form.cart {
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  max-width: 420px;
}
.woocommerce div.product form.cart .variations { width: 100%; margin-bottom: 0; }
.woocommerce div.product form.cart .variations td { padding: 6px 0; }
.woocommerce div.product form.cart .variations select {
  padding: 10px 14px;
  border: 1px solid #d8dbe0;
  border-radius: 8px;
  background: #fff;
  min-width: 180px;
  width: 100%;
}

/* Color swatches + size buttons: a visual layer over the native <select>
   elements above, which stay in the DOM (hidden once this loads) so
   WooCommerce's own price/stock/add-to-cart logic keeps working untouched. */
body.ilaro-enhanced form.cart .variations {
  display: none;
}
.ilaro-variation-picker { margin: 4px 0 20px; max-width: 420px; }
.ilaro-variation-picker .ilaro-vp-label {
  font-size: 13px;
  font-weight: 600;
  color: #284177;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 8px;
}
.ilaro-color-swatches { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.ilaro-color-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #fff;
  outline: 2px solid #e3e3e3;
  outline-offset: 0;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: outline-color .15s ease, transform .15s ease;
}
.ilaro-color-swatch:hover { transform: scale(1.08); }
.ilaro-color-swatch.active { outline-color: #284177; }
.ilaro-color-swatch.disabled { opacity: .35; cursor: not-allowed; }
.ilaro-color-swatch .ilaro-swatch-name {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.ilaro-color-swatch:hover .ilaro-swatch-name { opacity: 1; }

.ilaro-size-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ilaro-size-btn {
  min-width: 44px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1.5px solid #d7dbe3;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #284177;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ilaro-size-btn:hover { border-color: #284177; }
.ilaro-size-btn.active { background: #284177; border-color: #284177; color: #fff; }
.ilaro-size-btn.disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

/* Shop grid / homepage card swatches — smaller, sit under the card image.
   Horizontal padding matches .merch-info's 22px (14px on mobile, see
   ilaro-head.php) so the swatches line up with the title/price below them
   instead of sitting flush against the card edge. */
.ilaro-loop-swatches {
  display: flex;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0 22px;
}
@media (max-width: 480px) {
  .ilaro-loop-swatches { padding: 0 14px; }
}
.ilaro-loop-swatch {
  width: 20px;
  height: 20px;
  /* The base 2px white border + 2px outline (tuned for the 34px single-product
     swatches) eats a much bigger share of a 20px circle — nearly half the
     visible diameter — leaving mostly white ring instead of the actual color.
     Thinner values here keep the fill as the dominant thing you see. */
  border-width: 1px;
  outline-width: 1px;
}
.ilaro-loop-swatch .ilaro-swatch-name { display: none; }

/* Shop grid only (moved here by JS, see ilaro-chrome-scripts.php): anchored
   under the quick-add "+" circle instead of below the title/price block, so
   every card keeps the same fixed anchor point regardless of how much text
   precedes it. .astra-shop-thumbnail-wrap is already position:relative — the
   same box the "+" button positions against — so this lines up under it
   exactly. Right-aligned and wrapping rather than a fixed width keeps it
   inside the image on any card size, even with more than two colors. */
.astra-shop-thumbnail-wrap .ilaro-loop-swatches {
  position: absolute;
  top: 60px;
  right: 12px;
  left: auto;
  margin: 0;
  padding: 0;
  max-width: calc(100% - 24px);
  flex-wrap: wrap;
  justify-content: flex-end;
  z-index: 5;
}

/* "Quantity" caption above the stepper. A real element (emitted on
   woocommerce_before_add_to_cart_quantity) rather than a ::before on the
   stepper — the stepper carries an overflow:hidden from WooCommerce that
   clipped the pseudo-element regardless of what we set here. */
.ilaro-qty-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 -4px;
}
.ilaro-qty-note {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #8a93a3;
  margin: 6px 0 0;
}
.ilaro-qty-note a {
  color: var(--navy);
  text-decoration: underline;
}

/* The stepper: one bordered box containing − / value / +.
   No overflow:hidden here — it would clip the "Quantity" caption positioned
   above. The end buttons carry the corner radii instead. */
.quantity.ilaro-qty {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #d8dbe0;
  border-radius: 10px;
  background: #fff;
  width: max-content;
}
.ilaro-qty-btn {
  width: 44px;
  min-height: 48px;
  border: 0;
  background: #fff;
  color: var(--navy, #284177);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ilaro-qty-btn[data-step-down] { border-radius: 9px 0 0 9px; }
.ilaro-qty-btn[data-step-up]   { border-radius: 0 9px 9px 0; }
.ilaro-qty-btn:hover { background: var(--cream, #EDE8E4); }
.ilaro-qty-btn:active { background: #e2ded9; }

.quantity input.qty {
  width: 58px;
  padding: 0 6px;
  min-height: 48px;
  border: 0;
  border-left: 1px solid #e6e8ec;
  border-right: 1px solid #e6e8ec;
  border-radius: 0;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--navy, #284177);
  background: #fff;
  -moz-appearance: textfield;
}
/* Native spinners are redundant now that there are explicit buttons. */
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Quantity fields outside the product page (cart table) keep their own box. */
.woocommerce table.shop_table .quantity.ilaro-qty { width: max-content; }

.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
  width: 100%;
  min-height: 52px;
  padding: 0 34px;
  border: none;
  border-radius: 50px;
  background: var(--blue, #006BBD);
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease;
}
.woocommerce div.product form.cart .button:hover { background: var(--navy, #284177); }

.woocommerce div.product .product_meta {
  clear: both;
  font-size: 13px;
  color: #6b7280;
  padding-top: 18px;
  border-top: 1px solid #e6e8ec;
}
.woocommerce div.product .product_meta a { color: var(--blue, #006BBD); }

/* Trust row under Add to Cart — Free Shipping / Made to Order / Secure
   Checkout, matching the small icon strip on Donkey Tees / Hajde Zemer. */
.ilaro-trust-row {
  display: flex;
  gap: 22px;
  margin: 8px 0 4px;
  padding-top: 20px;
  border-top: 1px solid #e6e8ec;
  flex-wrap: wrap;
}
.ilaro-trust-row .ilaro-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 90px;
  text-align: center;
  font-size: 12px;
  color: #6b7280;
}
.ilaro-trust-row .ilaro-trust-item svg { color: var(--blue, #006BBD); }
/* Four items at their desktop min-width (90px) need ~430px — wider than a
   phone screen, so they wrapped to two rows. Shrinking the gap, icon, and
   type size (rather than dropping an item) keeps all four on one line. */
@media (max-width: 480px) {
  .ilaro-trust-row { gap: 4px; }
  .ilaro-trust-row .ilaro-trust-item { min-width: 0; font-size: 10px; gap: 4px; }
  .ilaro-trust-row .ilaro-trust-item svg { width: 18px; height: 18px; }
}

/* Related products / upsells sit below the two columns */
.woocommerce div.product .related,
.woocommerce div.product .upsells { clear: both; padding-top: 30px; }

/* ── PRODUCT INFO ACCORDION ─────────────────────────────────────────────────
   woocommerce/single-product/tabs/tabs.php overrides the default tab-bar with
   stacked <details> panels — Size Guide / Shipping / Returns etc. each expand
   independently, matching the "Details & Fit / Care Instructions / Shipping &
   Returns" accordion look on Hajde Zemer rather than WooCommerce's plain
   underlined tab list. */
.woocommerce div.product .woocommerce-tabs { clear: both; padding-top: 34px; }
.ilaro-accordion { border-top: 1px solid #e6e8ec; }
.ilaro-accordion-item {
  border-bottom: 1px solid #e6e8ec;
}
.ilaro-accordion-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 2px;
  cursor: pointer;
  list-style: none;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy, #284177);
}
.ilaro-accordion-item > summary::-webkit-details-marker { display: none; }
.ilaro-accordion-item > summary .ilaro-accordion-icon {
  flex-shrink: 0;
  color: var(--blue, #006BBD);
}
.ilaro-accordion-item > summary .ilaro-accordion-chevron {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform .2s ease;
  color: #9aa1ad;
}
.ilaro-accordion-item[open] > summary .ilaro-accordion-chevron { transform: rotate(180deg); }
.ilaro-accordion-item .ilaro-accordion-panel {
  padding: 0 2px 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #444b57;
}
.ilaro-accordion-item .ilaro-accordion-panel p { margin: 0 0 12px; }
.ilaro-accordion-item .ilaro-accordion-panel ul { margin: 0 0 12px; padding-left: 20px; }
.ilaro-accordion-item .ilaro-accordion-panel a { color: var(--blue, #006BBD); }

/* Size chart. Wide charts (a tee has 9 sizes) scroll inside their own box
   rather than pushing the page sideways on mobile. */
.ilaro-size-table-wrap { overflow-x: auto; margin: 16px 0; }
.ilaro-size-table {
  width: 100%;
  max-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
}
.ilaro-size-table th,
.ilaro-size-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #e6e8ec;
  text-align: left;
  white-space: nowrap;
}
.ilaro-size-table th {
  color: var(--navy, #284177);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ilaro-size-table tbody tr:hover { background: #fafbfc; }
/* !important on max-width: Astra's `.woocommerce-page img{max-width:100%}` is
   specificity (0,1,1) and outranks any single-class rule of ours (0,1,0), so
   without it this diagram renders at full column width. Third element to hit
   this same conflict — see also .nav-logo and .footer-mark/.footer-word. */
.ilaro-size-diagram {
  display: block;
  max-width: 320px !important;
  width: 100%;
  height: auto;
  margin: 18px 0 6px;
  border: 1px solid var(--border, #e6e8ec);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}
.ilaro-size-note { font-size: 13px; color: #6b7280; margin-top: 10px; }

/* Spec list — bold label, regular value, generous line height for scanning. */
.ilaro-specs { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ilaro-specs li {
  font-size: 15px;
  line-height: 1.6;
  color: #444b57;
  padding-left: 16px;
  position: relative;
}
.ilaro-specs li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sky, #83CEEC);
}
.ilaro-specs li strong {
  color: var(--navy, #284177);
  font-weight: 600;
  margin-right: 2px;
}

/* ── REVIEW SUMMARY ─────────────────────────────────────────────────────────
   Average score + distribution bars + filter/sort row, sitting above the
   review list. The bars double as filter buttons. */
.ilaro-review-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
  padding: 22px 24px;
  border: 1px solid var(--border, #e6e8ec);
  border-radius: 14px;
  background: #fafbfc;
  margin: 0 0 18px;
}
.ilaro-review-score { text-align: center; min-width: 132px; }
.ilaro-review-avg {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: var(--navy, #284177);
  letter-spacing: -.02em;
}
/* WooCommerce hides the "Rated 4.25 out of 5 based on…" text by clipping it
   out of a 1em-tall box. Without an explicit height here the box grows to fit
   that text and it leaks out under the stars. */
.ilaro-review-score .star-rating {
  height: 1em;
  line-height: 1;
  overflow: hidden;
  margin: 8px auto 6px;
}
.ilaro-review-count {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #8a93a3;
}

.ilaro-review-bars { display: grid; gap: 6px; }
.ilaro-review-bar {
  display: grid;
  grid-template-columns: 34px 1fr 30px;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 3px 4px;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: #6b7280;
  transition: background .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.ilaro-review-bar:hover:not(:disabled) { background: #f0f2f5; }
.ilaro-review-bar:disabled { cursor: default; opacity: .5; }
.ilaro-review-bar.is-active { background: #e8eef7; color: var(--navy, #284177); font-weight: 600; }
.ilaro-review-bar-label { text-align: left; white-space: nowrap; }
.ilaro-review-bar-track {
  height: 7px;
  border-radius: 50px;
  background: #e6e8ec;
  overflow: hidden;
}
.ilaro-review-bar-fill {
  display: block;
  height: 100%;
  border-radius: 50px;
  background: #E8A33D;
  transition: width .3s ease;
}
.ilaro-review-bar-count { text-align: right; }

/* Filter chip + sort dropdown, boxed like the reference. */
.ilaro-review-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}
.ilaro-review-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--navy, #284177);
  border-radius: 10px;
  background: var(--navy, #284177);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ilaro-review-filter-btn:hover { background: var(--blue, #006BBD); border-color: var(--blue, #006BBD); }
/* An explicit display value beats the UA stylesheet's [hidden]{display:none},
   so the chip stayed on screen with stale text after clearing the filter. */
.ilaro-review-filter-btn[hidden] { display: none; }
.ilaro-review-sort-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.ilaro-review-sort-icon {
  position: absolute;
  left: 13px;
  color: #8a93a3;
  pointer-events: none;
}
.ilaro-review-sort {
  min-height: 42px;
  padding: 0 34px 0 36px;
  border: 1px solid #d8dbe0;
  border-radius: 10px;
  background: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--navy, #284177);
  cursor: pointer;
}

/* Verified-purchase badge (WooCommerce decides who gets it). */
#reviews .woocommerce-review__verified,
#reviews .verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-style: normal;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #1a7f5a;
  background: #e6f4ee;
  border: 1px solid #bfe3d3;
  border-radius: 50px;
  padding: 3px 10px;
  margin-left: 8px;
  vertical-align: middle;
}

@media (max-width: 620px) {
  .ilaro-review-summary { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .ilaro-review-score { min-width: 0; }
}

/* ── REVIEWS ────────────────────────────────────────────────────────────────
   WooCommerce's default review list is an unstyled <ol> with a thin bordered
   box per review and a tiny star sprite. These turn each one into a card with
   an avatar, matching the rest of the site. */
#reviews .commentlist {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 16px;
}
#reviews .commentlist li { margin: 0; }
#reviews .commentlist .comment_container {
  display: flex;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--border, #e6e8ec);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(40, 65, 119, 0.05);
}
#reviews .commentlist img.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  margin: 0;
  background: var(--cream, #EDE8E4);
}
#reviews .commentlist .comment-text { flex: 1; min-width: 0; padding: 0; border: 0; }
#reviews .commentlist .meta {
  font-size: 14px;
  color: var(--navy, #284177);
  margin: 0 0 6px;
}
#reviews .commentlist .meta strong { font-weight: 600; }
#reviews .commentlist .meta time { color: #8a93a3; font-weight: 400; }
#reviews .commentlist .description { font-size: 15px; line-height: 1.65; color: #444b57; }
#reviews .commentlist .description p:last-child { margin-bottom: 0; }

/* Star ratings — WooCommerce renders these as a font-based ★★★★★ overlay. */
.woocommerce .star-rating { color: #E8A33D; }
#reviews .comment-form-rating p.stars a { color: #E8A33D; }

/* !important on padding: Astra ships
   `.woocommerce-js div.product #reviews #review_form_wrapper{padding-left:0}`,
   which outranks this and left the form's contents flush against the card's
   left border while the right side kept its inset. */
#review_form_wrapper {
  background: #fafbfc;
  border: 1px solid var(--border, #e6e8ec);
  border-radius: 14px;
  padding: 24px !important;
}
@media (max-width: 560px) {
  #review_form_wrapper { padding: 18px !important; }
}
/* WooCommerce/Astra put their own square border on the nested #review_form
   and #respond, which showed as a second box inside the card above. The card
   is the only frame we want. */
#review_form_wrapper #review_form,
#review_form_wrapper #respond,
#reviews #respond {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#review_form_wrapper .comment-reply-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy, #284177);
  display: block;
  margin-bottom: 14px;
}
#review_form_wrapper input[type="text"],
#review_form_wrapper input[type="email"],
#review_form_wrapper textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #d8dbe0;
  border-radius: 8px;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  background: #fff;
  color: var(--navy, #284177);
}
#review_form_wrapper input:focus,
#review_form_wrapper textarea:focus {
  outline: none;
  border-color: var(--blue, #006BBD);
  box-shadow: 0 0 0 3px rgba(0, 107, 189, 0.12);
}
#review_form_wrapper textarea { min-height: 120px; resize: vertical; }
/* !important on font-size: Astra sets
   `.woocommerce-js #reviews .comment-form-rating label{font-size:1.2em}`,
   which carries its own ID (#reviews) and so outranks these — the labels were
   rendering at ~17px, much larger than every other field label on the site. */
#review_form_wrapper .comment-form-rating label,
#review_form_wrapper .comment-form-author label,
#review_form_wrapper .comment-form-email label,
#review_form_wrapper .comment-form-comment label,
#review_form_wrapper .comment-form-images label,
#review_form_wrapper .comment-form-url label {
  display: block;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6b7280 !important;
  margin-bottom: 7px;
}
#review_form_wrapper .comment-notes,
#review_form_wrapper .comment-form-cookies-consent label {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: #6b7280;
  line-height: 1.6;
}
/* Submit matches the site's pill CTA rather than the browser default. */
#review_form_wrapper #submit {
  min-height: 46px;
  padding: 0 30px;
  border: none;
  border-radius: 50px;
  background: var(--navy, #284177);
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease;
}
#review_form_wrapper #submit:hover { background: var(--blue, #006BBD); }

/* Review photo upload field (inc/reviews.php) and the thumbnails shown on
   published reviews that included photos. */
#review_form_wrapper .comment-form-images input[type="file"] {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--navy, #284177);
}
#review_form_wrapper .ilaro-review-images-hint {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #8a93a3;
  margin-top: 4px;
}
.ilaro-review-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.ilaro-review-image {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border, #e6e8ec);
}
.ilaro-review-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* My Account profile-picture field (inc/profile-picture.php). */
.ilaro-profile-picture-field {
  border: 1px solid var(--border, #e6e8ec);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 20px;
}
.ilaro-profile-picture-field legend {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy, #284177);
  padding: 0 6px;
}
.ilaro-profile-picture-current {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.ilaro-profile-picture-current img {
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border, #e6e8ec);
}
.ilaro-profile-picture-current label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ilaro-profile-picture-hint {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #8a93a3;
  margin: 4px 0 0;
}

#reviews .woocommerce-noreviews {
  background: #fafbfc;
  border: 1px dashed var(--border, #e6e8ec);
  border-radius: 12px;
  padding: 18px 20px;
  font-family: 'Inter', sans-serif;
  color: #6b7280;
  font-size: 14.5px;
  margin: 0 0 20px;
}

.related > h2, .upsells > h2, .cross-sells > h2 {
  font-size: 1.5rem;
  color: var(--navy, #284177);
  margin: 0 0 24px;
}

/* ── CART (classic table) ───────────────────────────────────────────────── */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
  font-size: 15px;
}
.woocommerce table.shop_table th {
  text-align: left;
  padding: 14px 12px;
  border-bottom: 2px solid #e6e8ec;
  color: var(--navy, #284177);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.woocommerce table.shop_table td {
  padding: 16px 12px;
  border-bottom: 1px solid #eef0f3;
  vertical-align: middle;
}
.woocommerce table.shop_table img { width: 64px; height: auto; border-radius: 8px; }
.woocommerce table.shop_table .product-name a { color: var(--navy, #284177); text-decoration: none; }

.woocommerce .cart_totals h2 { font-size: 1.3rem; color: var(--navy, #284177); margin: 0 0 16px; }

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 26px;
  border: none;
  border-radius: 50px;
  background: var(--blue, #006BBD);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background .25s ease;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--navy, #284177); }
.woocommerce .button.alt,
.woocommerce a.button.alt { background: var(--navy, #284177); }
.woocommerce .button.alt:hover { background: var(--blue, #006BBD); }

/* ── BLOCK CART & CHECKOUT ──────────────────────────────────────────────────
   These are Gutenberg blocks, not classic templates, so WooCommerce's
   before/after_main_content hooks never fire and page.php's wrapper does the
   centring instead. Without this the checkout renders flush against the left
   edge of the window. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  max-width: 1160px;
  margin: 0 auto;
}
.wc-block-components-main,
.wc-block-checkout__main { min-width: 0; }

/* Step headings in Cinzel, matching the cart drawer and the rest of the site */
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-title {
  font-family: 'Cinzel', serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--navy, #284177) !important;
}

/* Body copy, labels and totals in IM Fell English */
.wc-block-components-checkout-step__description,
.wc-block-components-totals-item,
.wc-block-components-product-name,
.wc-block-components-product-metadata,
.wc-block-components-formatted-money-amount {
  font-family: 'IM Fell English', serif;
}

/* "Order summary" card heading — WooCommerce Blocks renders this with its
   own class (not .wc-block-components-title), so it was falling back to the
   block library's default Inter styling instead of matching the rest of the
   step headings. */
.wc-block-components-checkout-order-summary__title-text {
  font-family: 'Cinzel', serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--navy, #284177) !important;
}

/* Order summary contents — product thumbnail, name, spec bullets, and every
   price were rendering at the block library's small default (11–13px),
   which read as cramped and hard to scan next to the rest of the site. */
.wc-block-components-order-summary-item__image,
/* object-fit was missing, so the browser stretched the (non-square) source
   photo to fill the fixed 72x72 box instead of cropping it — that's the
   vertical distortion. overflow:hidden on the wrapper was also clipping the
   quantity-count badge, which sits slightly outside the image's own edge by
   design; the border-radius now lives on the img itself so the badge next to
   it is untouched. */
.wc-block-components-order-summary-item__image img {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  display: block !important;
}
.wc-block-components-order-summary-item__image {
  overflow: visible !important;
}
.wc-block-components-product-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}
.wc-block-components-product-metadata__description,
.wc-block-components-product-metadata__description p {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: #5b6472 !important;
}
.wc-block-components-totals-item__label,
.wc-block-components-formatted-money-amount {
  font-size: 15px !important;
  font-weight: 700 !important;
}
/* Higher specificity than the two rules above, so the grand total stays the
   largest figure on the page regardless of stylesheet order. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 22px !important;
}

/* The hairline dividers between order-summary sections (items / coupon /
   totals) read as flat with no depth — replaced with a soft shadow line
   instead of a 1px border, and the whole card gets a subtle lift. */
.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block,
.wp-block-woocommerce-checkout-order-summary-totals-block {
  border-top: none !important;
  box-shadow: 0 -1px 0 rgba(40, 65, 119, 0.1) !important;
}
.wp-block-woocommerce-checkout-totals-block,
.wp-block-woocommerce-cart-order-summary-block {
  box-shadow: 0 1px 2px rgba(40, 65, 119, 0.05), 0 10px 28px rgba(40, 65, 119, 0.06) !important;
}

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select select {
  border-radius: 8px !important;
}

/* Addresses / Payment methods (block-based, same components as checkout) get
   the same soft shadow-card treatment as the rest of My Account, scoped here
   so checkout's own inputs are untouched. */
.woocommerce-account .wc-block-components-text-input input,
.woocommerce-account .wc-block-components-textarea,
.woocommerce-account .wc-block-components-select select {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px rgba(40, 65, 119, 0.1), 0 1px 2px rgba(40, 65, 119, 0.04) !important;
}
.woocommerce-account .wc-block-components-text-input input:focus,
.woocommerce-account .wc-block-components-select select:focus {
  box-shadow: inset 0 0 0 1.5px var(--blue, #006BBD), 0 0 0 3px rgba(0, 107, 189, 0.12) !important;
}

/* Quantity stepper in the cart block — same shape as the drawer's */
.wc-block-components-quantity-selector {
  border-radius: 8px !important;
  border: 1px solid #d8dbe0 !important;
}
.wc-block-components-quantity-selector__button {
  color: var(--navy, #284177) !important;
  font-size: 15px !important;
}

/* Order summary reads as a card, like the reference */
.wp-block-woocommerce-checkout-totals-block,
.wp-block-woocommerce-cart-order-summary-block {
  background: #fff;
  border: 1px solid var(--border, #e6e8ec);
  border-radius: 14px;
  padding: 22px !important;
}

.wc-block-components-totals-footer-item,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: 'Cinzel', serif !important;
  color: var(--navy, #284177) !important;
}
/* Subtle highlighted band behind the Total row — same treatment as the
   order-confirmation page's totals table, so the one number that matters
   most reads as distinct rather than just another line in the list. */
.wc-block-components-totals-footer-item {
  /* This element is a flex child of .wc-block-components-totals-wrapper —
     negative margins shift a flex item's position but don't expand its
     width the way they do on a normal block box, so -22px on the left
     bled correctly while the right edge stayed put (~45px short of the
     card edge). An explicit width forces both sides to bleed evenly. */
  width: calc(100% + 44px) !important;
  margin: 8px -22px -22px !important;
  padding: 14px 22px !important;
  background: rgba(40, 65, 119, 0.07);
  border-radius: 0 0 14px 14px;
}
.wc-block-components-sidebar .wc-block-components-totals-item__value {
  color: var(--navy, #284177);
}

/* Place Order / Proceed to Checkout — navy, matching the drawer's button */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  border-radius: 8px !important;
  background: var(--navy, #284177) !important;
  color: #fff !important;
  min-height: 52px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--blue, #006BBD) !important;
}

/* ── ORDER DETAILS TABLE ─────────────────────────────────────────────────────
   Shared by the order-received/confirmation page and My Account > Orders —
   this is the classic WooCommerce table markup (not a block), and previously
   had no theme styling at all: raw browser-default borders and text. The
   product thumbnail markup comes from the woocommerce_order_item_name filter
   in inc/woocommerce.php. */
.woocommerce-table.shop_table.order_details {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--border, #e6e8ec);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(40, 65, 119, 0.05), 0 10px 28px rgba(40, 65, 119, 0.06);
}
.order_details th,
.order_details td {
  padding: 16px 20px;
  text-align: left;
  font-family: 'IM Fell English', serif;
  font-size: 15px;
  color: var(--navy, #284177);
}
.order_details thead th {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8a93a3;
  box-shadow: 0 1px 0 rgba(40, 65, 119, 0.1);
}
.order_details tbody tr,
.order_details tfoot tr {
  box-shadow: 0 1px 0 rgba(40, 65, 119, 0.08);
}
.order_details tfoot tr:last-child { box-shadow: none; }
.order_details tfoot th { font-weight: 700; }

/* Totals rows (Subtotal / Shipping / Total / Payment method): force a single
   "label ... value" line at every width. WooCommerce's own shop_table_responsive
   CSS makes th/td display:block below 768px, which — since each totals row is
   just a <th> label cell followed by a <td> value cell — splits every row into
   two stacked full-width blocks with a divider between them. On a narrow
   screen that reads as a separate box per label and per value, doubling the
   row count for no reason. Overriding back to a flex row keeps one line per
   total at any width, added up in a single shaded card like a receipt. */
.order_details tfoot tr {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f7f8fb;
}
.order_details tfoot th,
.order_details tfoot td {
  display: inline !important;
  width: auto !important;
  padding: 12px 20px !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: left;
}
.order_details tfoot td { text-align: right; margin-left: auto; }
.order_details tfoot tr:first-child th,
.order_details tfoot tr:first-child td { padding-top: 16px !important; }
/* Total row: subtly highlighted so it's the one number that draws the eye.
   Can't use :last-child — WooCommerce appends "Payment method:" after the
   Total row, and doesn't add a class to any tfoot row to tell them apart.
   The .ilaro-total-row class comes from the theme's order-details.php
   template override (woocommerce/order/order-details.php), which is
   otherwise identical to WooCommerce core's version. */
.order_details tfoot tr.ilaro-total-row {
  background: rgba(40, 65, 119, 0.07);
}
.order_details tfoot tr.ilaro-total-row th,
.order_details tfoot tr.ilaro-total-row td {
  padding-top: 14px !important;
  padding-bottom: 16px !important;
  font-size: 16px;
}
.order_details .product-total,
.order_details .amount { font-weight: 700; }

/* Orders list — each order becomes its own soft-shadow card instead of a
   flat-bordered table row, matching the rest of the modernized My Account
   pages. WooCommerce's shop_table_responsive CSS stacks each cell as a
   "label: value" line on narrow screens via the data-title attribute; this
   restyles that stacked view since it's what actually renders on mobile. */
.woocommerce-orders-table.shop_table_responsive {
  border-collapse: separate;
  border-spacing: 0 16px;
  width: 100%;
}
.woocommerce-orders-table.shop_table_responsive thead { display: none; }
.woocommerce-orders-table__row {
  display: block;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(40, 65, 119, 0.05), 0 8px 20px rgba(40, 65, 119, 0.06);
  overflow: hidden;
  /* border-spacing on the table only works in real table layout — these rows
     are display:block, which drops out of that layout mode, so the gap
     between order cards has to come from margin here instead. */
  margin-bottom: 16px;
}
.woocommerce-orders-table__row:last-child { margin-bottom: 0; }
.woocommerce-orders-table__row td,
.woocommerce-orders-table__row th {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border: none !important;
  box-shadow: 0 1px 0 rgba(40, 65, 119, 0.06);
  font-family: 'IM Fell English', serif;
  font-size: 16px;
  color: var(--navy, #284177);
  text-align: left;
}
.woocommerce-orders-table__row > :last-child { box-shadow: none; }
.woocommerce-orders-table__row td::before,
.woocommerce-orders-table__row th::before {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5b6472;
}
/* The image+name preview needs real width to lay out — the shared label-left
   /value-right pattern every other cell uses (small caption, value pushed to
   the far right) squeezes a product photo into an unreadably narrow strip.
   Stacked full-width instead, on every screen size, not just mobile, since
   this table uses the same card layout at all widths (no separate desktop
   grid to diverge from). */
.woocommerce-orders-table__cell-order-items {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 10px;
}
.woocommerce-orders-table__cell-order-items::before {
  margin-bottom: 2px;
}
.ilaro-order-items-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  /* WooCommerce's own mobile responsive table CSS forces text-align:right on
     td at this breakpoint (its label-left/value-right pattern) — text-align
     inherits down into the item name with nothing here overriding it,
     right-aligning wrapped product names against the left-aligned image. */
  text-align: left !important;
}
.ilaro-order-item-thumb--placeholder {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: var(--cream, #EDE8E4);
  display: inline-block;
  flex-shrink: 0;
}
.ilaro-order-items-more {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #8a93a3;
  padding-left: 70px;
}
.woocommerce-orders-table__cell-order-actions {
  justify-content: flex-end !important;
}
.woocommerce-orders-table__cell-order-actions .button {
  border-radius: 50px;
  background: var(--blue, #006BBD);
  color: #fff;
  padding: 9px 22px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.woocommerce-orders-table__cell-order-actions .button:hover { background: var(--navy, #284177); }

.ilaro-order-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.ilaro-order-item-name {
  /* flex:1 + min-width:0 so long product names wrap using the row's full
     remaining width, rather than shrinking to their own content width first
     (which made the wrap point inconsistent between short and long names). */
  flex: 1;
  min-width: 0;
}
.ilaro-order-item-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--cream, #EDE8E4);
  flex-shrink: 0;
}
.ilaro-order-item-name a { color: var(--navy, #284177); font-weight: 700; }
.ilaro-order-item-name .product-quantity { color: #8a93a3; font-weight: 400; }

/* ── MY ACCOUNT ─────────────────────────────────────────────────────────────
   WooCommerce's login/register templates come with almost no styling, so this
   page fell back to browser defaults — plain sans headings and unstyled inputs
   that read as a different site. These bring it in line with the cart drawer
   and checkout. */

/* The dashboard/orders/addresses text itself had no wrapper at all — no
   padding, no card — so it sat flush against the page edge on mobile and
   read as a bare list of paragraphs rather than a page. This gives every
   My Account view the same soft floating-card treatment as the login form
   below and the checkout summary elsewhere on the site. Pages that already
   render their own card inside here (Addresses, Payment methods) end up with
   a card-in-a-card look, which is why the inner padding is kept modest
   rather than doubling up on generous space in both layers. */
.woocommerce-MyAccount-content {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(40, 65, 119, 0.05), 0 10px 28px rgba(40, 65, 119, 0.07);
}
.woocommerce-MyAccount-content > p {
  font-family: 'IM Fell English', serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--navy, #284177);
  margin: 0 0 16px;
}
.woocommerce-MyAccount-content > p:last-child { margin-bottom: 0; }
.woocommerce-MyAccount-content a { color: var(--blue, #006BBD); }
.woocommerce-MyAccount-content strong { color: var(--navy, #284177); }

/* ── Addresses & Payment methods pages (stock, separate WooCommerce pages) ──
   Styled to match the rest of My Account, no template overrides involved —
   these are WooCommerce's own standard myaccount/form-edit-address.php and
   myaccount/payment-methods.php pages, untouched. */
.woocommerce-account .woocommerce-address-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin-bottom: 16px;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; }
.woocommerce-account .woocommerce-address-fields__field-wrapper label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 6px;
}
.woocommerce-account .woocommerce-address-fields input[type="text"],
.woocommerce-account .woocommerce-address-fields input[type="email"],
.woocommerce-account .woocommerce-address-fields input[type="tel"],
.woocommerce-account .woocommerce-address-fields select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #d8dbe0;
  border-radius: 8px;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  background: #fff;
  color: var(--navy, #284177);
}
.woocommerce-account .woocommerce-address-fields input:focus,
.woocommerce-account .woocommerce-address-fields select:focus {
  outline: none;
  border-color: var(--blue, #006BBD);
  box-shadow: 0 0 0 3px rgba(0, 107, 189, 0.12);
}
.woocommerce-account button[name="save_address"] {
  min-height: 44px;
  padding: 0 26px;
  margin-top: 6px;
  border: none;
  border-radius: 50px;
  background: var(--navy, #284177);
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease;
}
.woocommerce-account button[name="save_address"]:hover { background: var(--blue, #006BBD); }
.woocommerce-account .woocommerce-MyAccount-paymentMethods {
  width: 100%;
  border-collapse: collapse;
}
.woocommerce-account .woocommerce-MyAccount-paymentMethods th,
.woocommerce-account .woocommerce-MyAccount-paymentMethods td {
  padding: 12px 10px;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  border-bottom: 1px solid var(--border, #e6e8ec);
  color: var(--navy, #284177);
}
.woocommerce-account .woocommerce-MyAccount-paymentMethods th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8a93a3;
}
.woocommerce-account .woocommerce-MyAccount-content a.button {
  display: inline-block;
  margin-top: 14px;
  padding: 11px 22px;
  border-radius: 50px;
  background: var(--cream, #EDE8E4);
  color: var(--navy, #284177);
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.woocommerce-account .woocommerce-MyAccount-content a.button:hover { background: var(--blue, #006BBD); color: #fff; }
@media (max-width: 560px) {
  .woocommerce-account .woocommerce-address-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
}

.woocommerce-account .u-columns.col2-set {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}
/* !important: WooCommerce ships `.woocommerce .col2-set .col-1{float:left;
   width:48%}` at specificity (0,3,0), which outranks this and leaves each
   column half-filling its own grid cell. */
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
/* Placement is stated outright rather than left to auto-flow: with the stock
   WooCommerce/Astra rules still in play the two columns were landing in
   separate rows (login in column 2, register wrapped underneath). */
@media (min-width: 701px) {
  .woocommerce-account .u-column1 { grid-column: 1 !important; grid-row: 1 !important; }
  .woocommerce-account .u-column2 { grid-column: 2 !important; grid-row: 1 !important; }
}

.woocommerce-account h2,
.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2 {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy, #284177);
  margin: 0 0 16px;
}

/* Addresses list page (myaccount/my-address.php) — the plain gray-header
   boxes with a bare 1px border are stock WooCommerce styling, restyled here
   as soft rounded cards matching the rest of the site. Pure CSS, no
   template override — WooCommerce's own markup/hooks are untouched. */
.woocommerce-account .woocommerce-Address {
  border: 1px solid var(--border, #e6e8ec);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(40, 65, 119, 0.04);
}
.woocommerce-account .woocommerce-Address-title.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: #fafbfc;
  border-bottom: 1px solid var(--border, #e6e8ec);
}
.woocommerce-account .woocommerce-Address-title.title h2 {
  margin: 0;
  font-size: 12px;
}
.woocommerce-account .woocommerce-Address-title.title a.edit {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 50px;
  background: var(--cream, #EDE8E4);
  color: var(--navy, #284177);
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.woocommerce-account .woocommerce-Address-title.title a.edit:hover { background: var(--blue, #006BBD); color: #fff; }
.woocommerce-account .woocommerce-Address address {
  padding: 18px 20px;
  margin: 0;
  font-style: normal;
  font-family: 'IM Fell English', serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--navy, #284177);
}

/* Soft rounded cards with shadow instead of a hard-lined box, matching the
   "floating card" look (rounded corners + shadow, no visible border) used
   across other modern account UIs rather than a flat outlined rectangle. */
.woocommerce-account form.login,
.woocommerce-account form.register {
  border: none;
  border-radius: 16px;
  padding: 26px;
  margin: 0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(40, 65, 119, 0.05), 0 10px 28px rgba(40, 65, 119, 0.07);
}

.woocommerce-account .form-row { display: block; margin: 0 0 16px; padding: 0; }
.woocommerce-account .form-row label {
  display: block;
  font-size: 13px;
  color: var(--navy, #284177);
  margin-bottom: 6px;
}
.woocommerce-account .form-row .required { color: #c0392b; text-decoration: none; }
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"] {
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--navy, #284177);
  box-shadow: inset 0 0 0 1px rgba(40, 65, 119, 0.1), 0 1px 2px rgba(40, 65, 119, 0.04);
}
.woocommerce-account input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--blue, #006BBD), 0 0 0 3px rgba(0, 107, 189, 0.12);
}
.woocommerce-account .woocommerce-form-login__rememberme { font-size: 14px; color: #6b7280; }
.woocommerce-account .woocommerce-LostPassword {
  margin: 12px 0 0;
  font-size: 14px;
}
.woocommerce-account .woocommerce-LostPassword a { color: var(--blue, #006BBD); }
.woocommerce-account .woocommerce-privacy-policy-text p { font-size: 13.5px; color: #6b7280; line-height: 1.6; }

/* Account Details page (myaccount/form-edit-account.php) — labels/fieldset
   were still using WooCommerce's plain default look rather than the
   uppercase-label style used on Addresses/Shipping; the fieldset legend for
   "Password change" was just a bare bottom-border with no real typography. */
.woocommerce-EditAccountForm .form-row label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6b7280;
}
.woocommerce-EditAccountForm span#account_display_name_description {
  display: block;
  margin-top: 6px;
  font-family: 'IM Fell English', serif;
  font-size: 13px;
  color: #8a93a3;
}
.woocommerce-EditAccountForm fieldset {
  border: none;
  border-top: 1px solid var(--border, #e6e8ec);
  padding: 22px 0 0;
  margin: 8px 0 20px;
}
.woocommerce-EditAccountForm fieldset legend {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy, #284177);
  padding: 0 2px 0 0;
  margin-bottom: 4px;
}

/* Buttons match the site's pill CTA rather than WooCommerce's default block. */
.woocommerce-account form.login button.button,
.woocommerce-account form.register button.button {
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 50px;
  background: var(--navy, #284177);
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 6px;
}
.woocommerce-account form.login button.button:hover,
.woocommerce-account form.register button.button:hover { background: var(--blue, #006BBD); }

/* Logged-in view: dashboard nav + content */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Astra's parent-theme WooCommerce styling puts a ~1px solid border directly
   on the <li> itself (not the <a> — a previous fix here only cleared the
   anchor's own border, which left this rectangle visible behind each pill).
   !important forces every property here to actually win. */
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border: none !important;
  background: transparent !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: inline-block;
  padding: 10px 20px;
  border: none !important;
  border-radius: 50px !important;
  font-size: 13.5px;
  font-weight: 600;
  background: var(--cream, #EDE8E4) !important;
  color: var(--navy, #284177) !important;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(40, 65, 119, 0.10);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--blue, #006BBD) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(40, 65, 119, 0.25);
  transform: translateY(-1px);
}
/* Same specificity as the hover rule above but declared after it, so the
   active tab stays navy — not blue — even while it's being hovered. */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--navy, #284177) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(40, 65, 119, 0.25);
}

@media (max-width: 700px) {
  .woocommerce-account .u-columns.col2-set { grid-template-columns: 1fr; gap: 20px; }
}

/* ── NOTICES ───────────────────────────────────────────────────────────── */
/* Astra's parent theme puts a checkmark icon at a fixed `left:1.5em`, sized
   for its own default 3.5em left padding — this notice uses a slimmer
   colored-bar style instead, so that padding shrank and the icon ended up
   sitting on top of the message text. The bar already communicates status,
   so the icon is dropped rather than re-padded around. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  content: none !important;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  padding: 14px 18px;
  border-radius: 10px;
  margin: 0 0 24px;
  font-size: 14.5px;
  border-left: 4px solid var(--blue, #006BBD);
  background: #f3f7fb;
  color: var(--navy, #284177);
}
.woocommerce-error { border-left-color: #c0392b; background: #fdf1f0; color: #8c2b21; }
.woocommerce-message a, .woocommerce-info a { color: var(--blue, #006BBD); }

/* ── RESPONSIVE ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .woocommerce ul.products,
  ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }

  /* ── FILTERS AS A SLIDE-IN PANEL ─────────────────────────────────────────
     Same form as desktop, re-presented as a drawer: a trigger button in the
     flow, and the form itself fixed off-canvas until .is-open is set by
     ilaro-shop-filters JS. */
  .ilaro-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border: 1px solid #d8dbe0;
    border-radius: 50px;
    padding: 0 20px;
    min-height: 44px;
    font-size: 14px;
    color: var(--navy, #284177);
    cursor: pointer;
    margin: 0 0 22px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  .ilaro-filter-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--blue, #006BBD);
  }

  /* 2500/2600 matches the site's existing drawer layer — the fixed nav sits at
     1000, and at a lower z-index it covered the panel's close button. */
  .ilaro-filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(12, 22, 52, 0.45);
    z-index: 2500;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .ilaro-filter-backdrop.is-open { opacity: 1; pointer-events: auto; }

  .ilaro-filters {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(88vw, 360px);
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    z-index: 2600;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    box-shadow: -8px 0 30px rgba(12, 22, 52, .18);
  }
  .ilaro-filters.is-open { transform: translateX(0); }

  .ilaro-filters-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--border, #e6e8ec);
  }
  .ilaro-filters-title {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--navy, #284177);
    margin: 0;
  }
  .ilaro-filters-count { font-size: 13px; color: #8a93a3; margin: 4px 0 0; }
  .ilaro-filters-close {
    background: none;
    border: 0;
    font-size: 26px;
    line-height: 1;
    color: var(--navy, #284177);
    cursor: pointer;
    padding: 0 4px;
    -webkit-tap-highlight-color: transparent;
  }

  /* Body scrolls; the footer stays pinned so Apply is always reachable. */
  .ilaro-filters-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    padding: 22px;
  }
  .ilaro-filter-group { margin-bottom: 26px; }
  .ilaro-filter-group:last-child { margin-bottom: 0; }
  .ilaro-filter-select,
  .ilaro-filter-price input { width: 100%; }
  .ilaro-filter-price input { flex: 1; }

  .ilaro-filters-foot {
    margin: 0;
    padding: 16px 22px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border, #e6e8ec);
    background: #fff;
    justify-content: space-between;
  }
  .ilaro-filters-apply { flex: 1; margin-left: 12px; }

  /* The drawer owns the scroll while open. */
  body.ilaro-filters-open { overflow: hidden; }

  .woocommerce div.product div.images,
  .woocommerce div.product div.summary { width: 100% !important; float: none !important; }

  .wc-page, .ilaro-page { padding-top: 96px; padding-bottom: 64px; }
}

@media (max-width: 560px) {
  .woocommerce ul.products,
  ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }

  ul.products li.product .woocommerce-loop-product__title { font-size: 15px; }
  ul.products li.product .button { width: 100%; padding: 0 14px; }

  .wc-page .woocommerce-ordering { float: none; display: block; margin-top: 10px; }

  /* The cart table collapses to stacked rows rather than scrolling sideways. */
  .woocommerce table.shop_table thead { display: none; }
  .woocommerce table.shop_table tr { display: block; border-bottom: 1px solid #eef0f3; padding: 10px 0; }
  .woocommerce table.shop_table td { display: flex; justify-content: space-between; border: 0; padding: 8px 0; }
}

/* ── Cart "Product details" drop-down (assets/cart-details.js) ────────────── */
.wc-block-components-product-metadata { font-size: 14px; }
.ilaro-cart-details { margin-top: 6px; }
.ilaro-cart-details > summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #1a6fd4;
  letter-spacing: .2px;
}
.ilaro-cart-details > summary::-webkit-details-marker { display: none; }
.ilaro-cart-details > summary::after { content: " \25BE"; }
.ilaro-cart-details[open] > summary::after { content: " \25B4"; }
.ilaro-cart-details__body {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: #4a4f5a;
}
.ilaro-cart-details__body p { margin: 0 0 6px; }
.ilaro-cart-details__body p:last-child { margin-bottom: 0; }

/* ── CHECKOUT: "Review Your Information" confirmation modal (assets/checkout-review.js) ──
   Place Order is intercepted on first click; this modal shows exactly what's about
   to be submitted, and only its own "Confirm & Place Order" button actually submits. */
.ilaro-review-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 48, 0.55);
  z-index: 100000;
  padding: 20px;
  align-items: center;
  justify-content: center;
}
.ilaro-review-modal-overlay.is-open { display: flex; }
body.ilaro-review-modal-locked { overflow: hidden; }
.ilaro-review-modal {
  background: #fff;
  border-radius: 14px;
  padding: 26px 26px 22px;
  max-width: 440px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(20, 28, 48, 0.35);
}
.ilaro-review-modal-title {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--navy, #284177);
  margin: 0 0 6px;
}
.ilaro-review-modal-hint {
  font-family: 'IM Fell English', serif;
  font-size: 13px;
  font-style: italic;
  color: #5b6472;
  margin: 0 0 16px;
}
.ilaro-review-modal-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 22px;
}
.ilaro-review-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ilaro-review-modal-confirm,
.ilaro-review-modal-edit {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 13px 20px;
  cursor: pointer;
  border: 1px solid transparent;
}
.ilaro-review-modal-confirm {
  background: var(--navy, #284177);
  color: #fff;
}
.ilaro-review-modal-confirm:hover { background: #1e335d; }
.ilaro-review-modal-edit {
  background: transparent;
  color: var(--navy, #284177);
  border-color: var(--border, #e6e8ec);
}
.ilaro-review-modal-edit:hover { background: #f4f5f7; }

.ilaro-review-row {
  display: flex;
  gap: 14px;
  font-family: 'IM Fell English', serif;
  font-size: 14.5px;
  line-height: 1.5;
}
.ilaro-review-label {
  flex: 0 0 78px;
  color: #8a93a3;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding-top: 2px;
}
.ilaro-review-value {
  color: var(--navy, #284177);
  font-weight: 600;
  word-break: break-word;
}
.ilaro-review-row--continuation .ilaro-review-value {
  margin-left: 92px;
}
@media (max-width: 480px) {
  .ilaro-review-row { flex-direction: column; gap: 2px; }
  .ilaro-review-label { flex: none; }
  .ilaro-review-row--continuation .ilaro-review-value { margin-left: 0; }
}

/* ── ACCOUNT: Avatar + crop tool (My Account dashboard) ──
   inc/profile-picture.php / assets/profile-picture-avatar.js
   Every button here gets an explicit box-sizing/padding/border reset — the
   previous version relied on width/height alone, and the browser's own
   default <button> padding (asymmetric horizontal vs vertical in Chrome)
   pushed the box wider than tall under content-box sizing, turning what
   should've been a circle into a visibly oval blob. */
.ilaro-avatar-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
/* The elements below set their own explicit `display` for their visible
   state, which — being an author style — outranks the browser's built-in
   `[hidden]{display:none}` UA rule. Without this, JS/PHP setting the
   `hidden` attribute silently had no visual effect at all. */
.ilaro-avatar-widget [hidden] { display: none !important; }
.ilaro-avatar-circle {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
}
.ilaro-avatar-circle.no-photo {
  background: var(--cream, #EDE8E4);
  border: 2px solid var(--border, #e6e8ec);
}
.ilaro-avatar-circle img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border, #e6e8ec);
  display: block;
  box-sizing: border-box;
}
/* No-photo state: the camera icon centered on the plain placeholder circle,
   like Instagram's "add a profile photo" prompt — no extra button chrome,
   the icon itself is the whole affordance. */
.ilaro-avatar-camera-center {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
}
/* Browsers paint their own default focus highlight on <button> after a
   click — appearance:none alone doesn't suppress it, it has to be reset on
   :focus explicitly. A subtle ring on the icon itself (not a filled square
   covering the whole circle) keeps it visible for keyboard users. */
.ilaro-avatar-camera-center:focus,
.ilaro-avatar-camera-center:focus-visible {
  outline: none;
  background: none;
  box-shadow: none;
}
.ilaro-avatar-camera-center:focus-visible img {
  outline: 2px solid var(--blue, #006BBD);
  outline-offset: 4px;
  border-radius: 4px;
}
.ilaro-avatar-camera-center img {
  /* Source icon is landscape (397x316) — width alone, height auto, keeps its
     real proportions instead of squashing it into a forced square. */
  width: 38px;
  height: auto;
  border: none;
  opacity: .75;
  transition: opacity .2s ease;
}
.ilaro-avatar-camera-center:hover img { opacity: 1; }
/* Has-photo state: a small "+" badge at the corner instead, like Instagram's
   edit badge, so it doesn't sit on top of the photo itself. */
.ilaro-avatar-plus-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--navy, #284177);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  box-shadow: 0 2px 6px rgba(40, 65, 119, 0.3);
  transition: background .2s ease, transform .2s ease;
}
.ilaro-avatar-plus-badge:hover { background: var(--blue, #006BBD); transform: scale(1.08); }
.ilaro-avatar-plus-badge:focus,
.ilaro-avatar-plus-badge:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 107, 189, 0.35);
}
.ilaro-avatar-remove {
  border: none;
  background: none;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: #8a93a3;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.ilaro-avatar-remove:hover { color: #c0392b; }

.ilaro-crop-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 48, 0.6);
  z-index: 100000;
  padding: 20px;
  align-items: center;
  justify-content: center;
}
.ilaro-crop-modal-overlay.is-open { display: flex; }
.ilaro-crop-modal {
  background: #fff;
  border-radius: 16px;
  padding: 26px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(20, 28, 48, 0.35);
  text-align: center;
}
.ilaro-crop-modal-title {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--navy, #284177);
  margin: 0 0 16px;
}
.ilaro-crop-viewport {
  width: 280px;
  height: 280px;
  margin: 0 auto 18px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: #1a1f2e;
  cursor: grab;
  touch-action: none;
}
.ilaro-crop-viewport:active { cursor: grabbing; }
.ilaro-crop-viewport img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.ilaro-crop-zoom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8a93a3;
  margin-bottom: 8px;
}
.ilaro-crop-zoom-row input[type="range"] { flex: 1; }
.ilaro-crop-error {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #c0392b;
  margin: 8px 0 0;
}
.ilaro-crop-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.ilaro-crop-save,
.ilaro-crop-cancel {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 12px 20px;
  cursor: pointer;
  border: 1px solid transparent;
}
.ilaro-crop-save {
  background: var(--navy, #284177);
  color: #fff;
}
.ilaro-crop-save:hover { background: var(--blue, #006BBD); }
.ilaro-crop-save:disabled { opacity: .6; cursor: default; }
.ilaro-crop-cancel {
  background: transparent;
  color: var(--navy, #284177);
  border-color: var(--border, #e6e8ec);
}
.ilaro-crop-cancel:hover { background: #f4f5f7; }

/* ── CHECKOUT & CART FORM FIELDS ─────────────────────────────────────────────
   WooCommerce Blocks ships these fields nearly unstyled. Two specific problems
   on the live checkout: the floating label rendered in the same colour and
   weight as the value the customer typed, so "Email address" and their actual
   address read as equally important; and the default horizontal padding puts
   text hard against the border. Both look unfinished on the one page where
   someone is deciding whether to hand over card details.

   Everything below is colour, spacing and typography. No layout, no structure,
   no behaviour — checkout logic is untouched, and this reverts cleanly.

   The treatment matches the one already used on My Account (borderless with an
   inset ring) so the two halves of the logged-in experience look related. */

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-blocks-components-select__select,
.wc-block-components-select select {
  border: none !important;
  border-radius: 11px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  background: #fff !important;
  color: var(--text, #1a2a40) !important;
  box-shadow: inset 0 0 0 1px rgba(40, 65, 119, 0.16),
              0 1px 2px rgba(40, 65, 119, 0.04) !important;
  transition: box-shadow .16s ease !important;
}

.wc-block-components-text-input input:hover,
.wc-blocks-components-select__select:hover,
.wc-block-components-select select:hover {
  box-shadow: inset 0 0 0 1px rgba(40, 65, 119, 0.3),
              0 1px 2px rgba(40, 65, 119, 0.05) !important;
}

/* An unmistakable active field. The 3px halo does the work that a colour change
   alone cannot at a glance. */
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select__select:focus,
.wc-block-components-select select:focus {
  outline: none !important;
  box-shadow: inset 0 0 0 1.5px var(--blue, #006BBD),
              0 0 0 3px rgba(0, 107, 189, 0.13) !important;
}

/* The floating label is a caption, not content. Muted, smaller and tracked out
   so it never competes with the value sitting underneath it. */
.wc-block-components-text-input label,
.wc-blocks-components-select__label {
  left: 16px !important;
  color: rgba(40, 65, 119, 0.52) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .015em !important;
}
.wc-block-components-text-input.is-active label,
.wc-blocks-components-select .wc-blocks-components-select__label {
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}
.wc-block-components-text-input input:focus + label,
.wc-block-components-text-input.is-active input:focus + label {
  color: var(--blue, #006BBD) !important;
}

/* A field in error should be obvious without reading the message. */
.wc-block-components-text-input.has-error input,
.wc-block-components-text-input.has-error input:focus {
  box-shadow: inset 0 0 0 1.5px #b32d2e,
              0 0 0 3px rgba(179, 45, 46, 0.12) !important;
}
.wc-block-components-text-input.has-error label { color: #b32d2e !important; }

/* Breathing room between fields, and section headings that actually lead. */
.wc-block-components-address-form .wc-block-components-text-input,
.wc-block-components-address-form .wc-blocks-components-select {
  margin-top: 14px !important;
}
.wp-block-woocommerce-checkout-fields-block .wc-block-components-title {
  letter-spacing: .09em !important;
  color: var(--navy, #284177) !important;
}

/* Selected shipping and payment options read as chosen, not merely listed. */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
  border-radius: 11px !important;
}
.wc-block-components-radio-control-accordion-option:has(input:checked),
.wc-block-components-radio-control__option:has(input:checked) {
  box-shadow: inset 0 0 0 1.5px var(--blue, #006BBD) !important;
  background: rgba(0, 107, 189, 0.04) !important;
}

/* ── SHOP FILTER / SORT DROPDOWN ARROW ──────────────────────────────────────
   Astra and WooCommerce both set appearance:none on selects, which removes the
   browser's native dropdown arrow, and nothing drew a replacement. "Sort by"
   therefore looked like a plain text box with no hint that it opens.

   The doubled class is deliberate. WooCommerce ships
   ".woocommerce-page select { background-position: 98% 50%; padding-right: 2em }"
   which is specificity (0,1,1) and beats a single class, so a plain
   ".ilaro-filter-select" had its arrow position and padding overridden while
   only the image applied. Repeating the class lifts this to (0,2,0) without
   depending on a body class or resorting to !important.

   Inline SVG rather than a pseudo-element: a <select> cannot host ::after, so a
   background image is the only approach that works across browsers. */
.ilaro-filter-select.ilaro-filter-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23284177' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px 8px;
  padding-right: 36px;
  cursor: pointer;
}
.ilaro-filter-select.ilaro-filter-select:hover { border-color: #b9bfc8; }
.ilaro-filter-select.ilaro-filter-select:focus,
.ilaro-filter-select.ilaro-filter-select:focus-visible {
  outline: none;
  border-color: var(--blue, #006BBD);
  box-shadow: 0 0 0 3px rgba(0, 107, 189, 0.16);
}