/* ===========================================================
   EASY WARE — WooCommerce stylesheet
   Standard WC markup styled to the Schematic Workshop brand.
   Design tokens come from home.css (loaded earlier).
   =========================================================== */

/* WRAPPER ------------------------------------------------ */
.ew-woo {
  padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 6vw, 5rem);
  position: relative;
}
.ew-woo__crosshair {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--ff-mono);
  font-size: 0.65rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-4);
  padding: 0.75rem var(--container-pad);
  border-bottom: 1px dashed var(--edge-2);
  margin-bottom: 1.5rem;
}

/* PAGE HEADERS ------------------------------------------- */
.woocommerce-products-header__title,
.woocommerce-page h1.entry-title,
.woocommerce-page .page-title,
.cart_page_title,
.checkout-page-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
  margin-block: 0 1rem;
}
.term-description, .woocommerce-products-header p {
  font-size: 0.95rem;
  color: var(--ink-3);
  max-width: 640px;
  margin-bottom: 2rem;
}

/* TOOLBAR (count + ordering) ----------------------------- */
.woocommerce-result-count {
  font-family: var(--ff-mono);
  font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-block: 1rem;
}
.woocommerce-ordering { margin-bottom: 1.5rem; }
.woocommerce-ordering select {
  font-family: var(--ff-body);
  font-size: 0.9rem;
  padding: 0.55rem 2.25rem 0.55rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230A0A0A' stroke-width='1.6'%3E%3Cpath d='m3 5 3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 12px;
  cursor: pointer;
}

/* PRODUCT GRID (archive) --------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.75rem !important;
  margin: 0 0 2rem !important;
  padding: 0 !important;
  list-style: none;
  border: 0;
}
/* WooCommerce ships clearfix `::before, ::after { content: " "; display: table }`
   on ul.products. Inside our grid container those pseudo-elements become
   grid items and steal the first + last cells, pushing real products one
   column to the right. Kill them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.products::before,
ul.products::after {
  content: none !important;
  display: none !important;
}
/* Match the desktop rule's selectors so the media query has equal specificity
   and actually wins inside @media (per WC's `!important` rule above). */
@media (max-width: 920px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Loop card baseline — bg/margins/floats reset.  The visual design
   (border, radius, hover, image frame, name clamp, price color,
   rating pill, sold count) lives entirely in `.prod` styles in
   home.css. This keeps WC's default loop card class out of the way
   when our template (content-product.php) is rendered. */
ul.products li.product,
ul.products li.product.first,
ul.products li.product.last {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Solid white card — without this the page's dotted background
     bleeds into the body area between image and title. The
     `ul.products li.product` selector has higher specificity than
     bare `.prod`, so the background MUST be set here too. */
  background: var(--surface) !important;
  border: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  position: relative;
  clear: none !important;
  float: none !important;
  text-align: left !important;
}
ul.products li.product:hover { background: var(--surface) !important; }

/* Native WC image rules removed — handled inside `.prod__img` so the
   red frame stays consistent. */
ul.products li.product a img,
ul.products li.product img {
  border: 0;
  border-radius: 0;
  margin: 0;
  background: transparent;
  width: 100% !important;
  height: 100% !important;
}

ul.products li.product .woocommerce-LoopProduct-link {
  display: flex; flex-direction: column;
  text-decoration: none !important;
  color: inherit;
  padding: 0;
}

/* Loop-card title — when WC's hook-driven default renders (any
   context where our `.prod__name` isn't used), keep it tidy. */
ul.products li.product .woocommerce-loop-product__title:not(.prod__name),
ul.products li.product h2:not(.prod__name),
ul.products li.product h3:not(.prod__name) {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.9rem !important;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--ink);
  padding: 0.6rem 0.7rem 0.2rem !important;
  margin: 0 !important;
}

/* Loop-card price — fallback for non-`.prod__price` rendering. */
ul.products li.product .price:not(.prod__price) {
  padding: 0 0.7rem 0.4rem !important;
  margin: 0 !important;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.05rem !important;
  color: var(--red) !important;
}
ul.products li.product .price del {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-4);
  font-family: var(--ff-mono);
  margin-right: 0.4rem;
  text-decoration: line-through;
  opacity: 1;
}
ul.products li.product .price ins {
  text-decoration: none;
  color: var(--red) !important;
  font-weight: 800;
  background: transparent;
}
ul.products li.product .price .woocommerce-Price-amount { font-size: inherit; }

/* WC's default `.onsale` ribbon — hidden site-wide. Our `.prod__badge`
   was the primary sale indicator and is also hidden per design.
   Out-of-stock state is surfaced via the ink `.prod__badge--out` badge. */
ul.products li.product .onsale,
.woocommerce span.onsale {
  display: none !important;
}

/* star rating */
ul.products li.product .star-rating {
  margin: 0 1rem 0.4rem !important;
  font-size: 0.85rem;
  color: var(--red);
}

/* add to cart button (loop) */
.woocommerce ul.products li.product .button,
ul.products li.product .button {
  display: flex !important;
  align-items: center; justify-content: center;
  gap: 0.4rem;
  margin: auto 1rem 1rem !important;
  padding: 0.7rem 1rem !important;
  background: var(--ink) !important;
  color: white !important;
  font-family: var(--ff-body);
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em;
  border-radius: 999px !important;
  border: 0 !important;
  text-transform: none !important;
  text-align: center;
  transition: background var(--t-fast), transform var(--t-fast);
}
.woocommerce ul.products li.product .button:hover {
  background: var(--red) !important;
  transform: translateY(-1px);
}
.woocommerce ul.products li.product .added_to_cart {
  display: inline-block;
  margin: 0 1rem 1rem !important;
  font-family: var(--ff-mono);
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase;
  color: var(--red) !important;
  letter-spacing: 0.05em;
}
.woocommerce ul.products li.product .button.loading::after {
  font-family: WooCommerce;
  content: "\e01c";
  margin-left: 0.5em;
  animation: ew-spin 1s linear infinite;
}
@keyframes ew-spin { to { transform: rotate(1turn); } }

/* SINGLE PRODUCT --------------------------------------- */
.single-product .product {
  display: grid;
  /* `minmax(0, …fr)` prevents the column track from auto-expanding to
     fit content wider than the viewport. Without `min-width: 0` (the
     default for grid items is `auto`), a long product title or an
     unwrapped variation chip row would force the column to grow past
     the viewport and create horizontal scroll. */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 3rem;
  padding-block: 1.5rem;
  min-width: 0;
}
@media (max-width: 880px) {
  .single-product .product { grid-template-columns: minmax(0, 1fr); }
}

/* Anything below the gallery + summary row must span both columns,
   otherwise auto-placement drops them next to each other in row 2+. */
.single-product .product > .woocommerce-tabs,
.single-product .product > .related,
.single-product .product > .related.products,
.single-product .product > .upsells,
.single-product .product > .upsells.products,
.single-product .product > .cross-sells,
.single-product .product > .ew-related {
  grid-column: 1 / -1 !important;
}

.single-product .product .images,
.single-product .product .woocommerce-product-gallery {
  width: 100% !important;
  margin: 0 !important;
  align-self: start;
  /* Black 1.5px ink border removed per design request — the gallery
     now relies on the photo itself (or its rounded radius) to define
     its edge, no harsh outer ring. */
  border: 0;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    var(--paper);
  background-size: 22px 22px;
  position: relative;
}
.woocommerce-product-gallery img {
  width: 100% !important;
  height: auto !important;
}
/* On phones, cap the gallery main image height so it doesn't
   consume the entire viewport before the user can see title,
   price, variations. Switch to `width: auto` inside the cap so the
   aspect ratio stays intact (without that, `width: 100%` + `max-
   height` would squash the photo). */
@media (max-width: 720px) {
  .woocommerce-product-gallery .woocommerce-product-gallery__image img,
  .woocommerce-product-gallery .flex-viewport img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 55vh !important;
    margin-inline: auto;
    display: block;
  }
}
@media (max-width: 540px) {
  .woocommerce-product-gallery .woocommerce-product-gallery__image img,
  .woocommerce-product-gallery .flex-viewport img {
    max-height: 48vh !important;
  }
}
.flex-control-thumbs {
  display: flex; gap: 0.5rem;
  margin-top: 0.75rem !important;
  padding: 0 !important;
  list-style: none;
}
.flex-control-thumbs li {
  width: 64px !important; height: 64px !important;
  margin: 0 !important;
  border: 1px solid var(--edge);
}
.flex-control-thumbs li img.flex-active { border-color: var(--red); }

.single-product .product .summary {
  margin: 0 !important;
  width: 100% !important;
  display: flex; flex-direction: column;
  gap: 1.2rem;
}
.single-product .product .product_title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 !important;
}
.single-product .product .summary .price {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  letter-spacing: -0.025em;
  margin: 0 !important;
  color: var(--ink) !important;
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
}
.single-product .product .summary .price del {
  font-size: 1.1rem;
  color: var(--ink-4);
  font-family: var(--ff-mono);
  font-weight: 500;
}
.single-product .product .summary .price ins {
  text-decoration: none;
  color: var(--red) !important;
  background: transparent;
}
.single-product .product .summary .woocommerce-product-details__short-description {
  display: none !important;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.6;
  padding: 1rem 1.1rem;
  background: var(--paper-2);
  border-left: 3px solid var(--red);
}
.single-product .product .summary .woocommerce-product-details__short-description p { margin: 0; }

/* Plain `.stock` pill — used by WC's variation availability line and
   by any other context where our richer .ew-stock isn't rendered. */
.single-product .product .stock:not(.ew-stock) {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--ff-mono);
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: 4px;
  align-self: flex-start;
}
.single-product .stock.in-stock:not(.ew-stock) { color: var(--green); background: rgba(26,127,55,0.08); }
.single-product .stock.out-of-stock:not(.ew-stock) { color: var(--red); background: var(--red-soft); }

.single-product .product .product_meta {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  color: var(--ink-3);
  border-top: 1px solid var(--edge);
  padding-top: 1rem;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.single-product .product .product_meta > span {
  display: flex; gap: 0.5rem;
}
.single-product .product .product_meta a { color: var(--red); }
.single-product .product .product_meta .sku_wrapper .sku {
  color: var(--ink); font-weight: 700; letter-spacing: 0.04em;
}

/* qty + add-to-cart */
.single-product form.cart {
  display: flex; gap: 0.75rem; align-items: stretch; flex-wrap: wrap;
  margin: 0 !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* Variable-product form structure: the outer form contains the
   attribute swatches + a `.single_variation_wrap` that holds qty + cart
   button.  Without forcing those to full-width, the form's flex layout
   makes `.ew-variations` shrink-to-fit and the chip row blows past the
   viewport. Pin them to 100% so chips wrap naturally. */
.single-product form.variations_form.cart > .ew-variations,
.single-product form.variations_form.cart > .variations,
.single-product form.variations_form.cart > .single_variation_wrap {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* Inside the variation wrap, the qty stepper and cart button sit on
   the same row (flex wrap) — match the simple-product form layout. */
.single-product form.variations_form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.single-product form.cart .quantity,
.single-product form.cart .ew-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
  height: 48px;
}
.single-product form.cart .quantity input.qty,
.single-product form.cart .ew-qty__input {
  width: 56px;
  text-align: center;
  border: 0 !important;
  font-family: var(--ff-mono);
  font-weight: 700; font-size: 1rem;
  background: transparent;
  height: 100%;
  color: var(--ink);
  padding: 0;
  -moz-appearance: textfield;
}
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button,
.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product form.cart .ew-qty__input::-webkit-inner-spin-button,
.single-product form.cart .ew-qty__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.single-product form.cart button.single_add_to_cart_button,
.single-product form.cart .single_add_to_cart_button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 0 1.6rem !important;
  background: var(--red) !important;
  color: white !important;
  font-family: var(--ff-body);
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  border-radius: 999px !important;
  border: 0 !important;
  text-transform: none !important;
  height: 48px;
  letter-spacing: 0;
  transition: background var(--t-fast), transform var(--t-fast);
}
.single-product form.cart button.single_add_to_cart_button:hover {
  background: var(--red-deep) !important;
  transform: translateY(-1px);
}

/* tabs */
.woocommerce-tabs {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1.5px solid var(--ink);
}
.woocommerce-tabs ul.tabs {
  display: flex; gap: 0;
  margin: 0 0 1.5rem !important;
  padding: 0 !important;
  list-style: none;
  border-bottom: 1px solid var(--edge);
}
.woocommerce-tabs ul.tabs::before { display: none !important; }
.woocommerce-tabs ul.tabs li {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0.85rem 1.25rem !important;
  margin-right: 0.5rem;
  font-family: var(--ff-display);
  font-weight: 600 !important;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--ink-3) !important;
  border-bottom: 2px solid transparent;
  transform: translateY(1px);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.woocommerce-tabs ul.tabs li a:hover { color: var(--ink) !important; }
.woocommerce-tabs ul.tabs li.active a {
  color: var(--ink) !important;
  border-color: var(--red);
}
.woocommerce-tabs .panel {
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.65;
}
.woocommerce-tabs .panel h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}
.woocommerce-tabs .panel table {
  width: 100%;
  border-collapse: collapse;
}
.woocommerce-tabs .panel table th,
.woocommerce-tabs .panel table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--edge);
  font-family: var(--ff-mono);
  font-size: 0.85rem;
  text-align: left;
}
.woocommerce-tabs .panel table th {
  background: var(--paper-2);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* Related / up-sell — span full width below single product layout */
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products {
  clear: both !important;
  float: none !important;
  width: 100% !important;
  margin-top: clamp(1.75rem, 4vw, 2.75rem) !important;
  padding-top: 1.25rem !important;
  border-top: 1.5px solid var(--ink);
}
.woocommerce div.product .related.products ul.products,
.woocommerce div.product .upsells.products ul.products {
  width: 100% !important;
}

/* Branded section header (used by single-product/related.php override) */
.ew-related__head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0 0 1rem;
  max-width: 720px;
}
.ew-related__kicker {
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.ew-related__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 !important;
}
.ew-related__lede {
  font-family: var(--ff-body);
  font-size: 0.88rem;
  color: var(--ink-3);
  margin: 0;
  max-width: 56ch;
}

/* Plain WC heading fallback (when used outside our override) */
.woocommerce div.product .related.products > h2:not(.ew-related__title),
.woocommerce div.product .upsells.products > h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  letter-spacing: -0.03em;
  margin: 0 0 1.5rem !important;
  color: var(--ink);
}

/* CART PAGE -------------------------------------------- */
.woocommerce-cart { padding-block: 1rem 4rem; }

/* Header strip: "// KERANJANG · N ITEM" + "← Lanjut belanja"
   Sits as a child of the grid-ified .woocommerce wrapper, so we explicitly
   span both columns to avoid being squeezed into column 1. */
.ew-cart-strip {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 0 1.25rem;
  margin-bottom: 1.5rem;
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.ew-cart-strip__label { color: var(--ink); font-weight: 700; }
.ew-cart-strip__back {
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: color var(--t-fast), gap var(--t-fast);
}
.ew-cart-strip__back:hover { color: var(--red); gap: 0.6rem; }

/* Single-column stacked layout: cart-form on top, cart-collaterals
   below. Removes the 50:50 grid so there's nothing to align
   side-by-side and the page reads as one continuous flow. Centred
   with a 880px max-width — enough room for the cart row content
   to breathe without sprawling on wide monitors. Selector keeps it
   simple (no `:has()` quirks); `body.woocommerce-cart` is enough
   to gate by page. */
body.woocommerce-cart .ew-woo > .container .woocommerce {
  display: block !important;
  max-width: 880px !important;
  margin-inline: auto !important;
}
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .cart-collaterals {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 1.25rem !important;
  padding: 0 !important;
}
body.woocommerce-cart .cart-collaterals { margin-bottom: 0 !important; }
body.woocommerce-cart .ew-cart-strip { max-width: 880px; margin-inline: auto !important; }

/* Form column: simple flex column so the items + coupon row +
   benefits panel stack vertically with consistent gaps. Width
   guards prevent grid blowout from long product names. */
.woocommerce-cart .woocommerce-cart-form {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.woocommerce-cart .woocommerce-cart-form table.shop_table { margin: 0 !important; }

/* Notices (success / warnings) sit full-width above the split, never as
   their own grid item or they'd push the cart form into column 2. */
.woocommerce-cart .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}
.woocommerce-cart .woocommerce-notices-wrapper:empty {
  display: none;
}

/* Right column: collaterals stick on scroll, fill the cell, no top margin */
.woocommerce-cart .cart-collaterals {
  margin-top: 0 !important;
  width: 100% !important;
  position: sticky;
  top: clamp(1rem, 4vh, 5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Override WC's default float-based collaterals layout */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals,
.woocommerce .cart-collaterals .cross-sells,
.woocommerce-page .cart-collaterals .cross-sells,
.woocommerce .cart-collaterals .shipping_calculator,
.woocommerce-page .cart-collaterals .shipping_calculator {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Empty cart treatment */
.woocommerce-cart .cart-empty {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.75rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.woocommerce-cart .cart-empty.woocommerce-info::before { display: none !important; }
.woocommerce-cart .return-to-shop {
  margin-top: 1.5rem !important;
}
.woocommerce-cart .return-to-shop a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem !important;
  background: var(--red) !important;
  color: white !important;
  border-radius: 999px;
  font-weight: 700;
  border: 0 !important;
  font-family: var(--ff-body);
}

/* TABLES (cart, order summary) ------------------------- */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 0 !important;
  font-family: var(--ff-body);
  margin: 0 0 1.5rem !important;
}
.woocommerce table.shop_table thead {
  background: var(--ink);
  color: white;
}
.woocommerce table.shop_table thead th {
  padding: 0.85rem 1rem !important;
  border: 0 !important;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: white;
  text-align: left;
}
.woocommerce table.shop_table tbody tr,
.woocommerce-page table.shop_table tbody tr {
  border-bottom: 1px solid var(--edge);
}
.woocommerce table.shop_table tbody tr:last-child { border-bottom: 0; }
.woocommerce table.shop_table tbody td {
  padding: 1rem !important;
  border-top: 0 !important;
  font-size: 0.95rem;
  vertical-align: middle;
  background: var(--surface);
}
.woocommerce table.shop_table .product-thumbnail img {
  max-width: 80px;
  height: auto;
  border: 1px solid var(--edge);
}
.woocommerce table.shop_table .product-name {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.woocommerce table.shop_table .product-name a {
  color: var(--ink);
}
.woocommerce table.shop_table .product-name a:hover { color: var(--red); }
.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal {
  font-family: var(--ff-mono);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}

/* =========================================================
   CART PAGE — redesigned row layout
   The WC cart ships as a 6-column <table>.  Columns aren't sized,
   so a long variable-product name + variation string (e.g. "12V 24V
   7520 3LED LED 3 LED Module 3 Mata Red/Green/Blue/Yellow/White/
   Merah/Biru/Hijau/Kuning/Putih - RED 12V") gets crammed into the
   narrow auto-width name cell and breaks one word per line.

   Fix: transform the cart table into a vertical stack of card
   rows.  Each row uses CSS Grid with named areas, so name has room
   to breathe and the qty / subtotal / remove controls stay in
   their own slots regardless of name length. */

/* The whole cart-form is now the bordered card — cart items +
   coupon row sit inside as sections separated by 1px dividers,
   not as standalone boxes with their own borders. One single
   visual block on the left. */
.woocommerce-cart .woocommerce-cart-form {
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.woocommerce-cart .woocommerce-cart-form table.shop_table {
  display: block !important;
  border: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}
.woocommerce-cart .woocommerce-cart-form table.shop_table thead {
  display: none !important;
}
.woocommerce-cart .woocommerce-cart-form table.shop_table tbody {
  display: block !important;
}

/* Each cart row: 2-row grid inside, separated from siblings by a
   1 px divider line. No individual border or radius — the outer
   form already provides the bordered card. Bottom row uses three
   equal-width columns (price / qty / subtotal) so the harga sits
   visually balanced under the title, not stranded on the left. */
.woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item {
  display: grid !important;
  grid-template-columns: 96px repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "img  name  name      name"
    "img  price qty       subtotal" !important;
  gap: 0.75rem 1rem !important;
  align-items: center !important;
  padding: 1.1rem 2.75rem 1.1rem 1.1rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--edge) !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
  position: relative !important;
  margin: 0 !important;
}

/* Reset every cell — we lay them out via grid-area instead. */
.woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item td {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 0.95rem;
  text-align: left !important;
  vertical-align: middle;
}
.woocommerce-cart .woocommerce-cart-form .product-thumbnail {
  grid-area: img !important;
  align-self: start !important;
}
.woocommerce-cart .woocommerce-cart-form .product-thumbnail img {
  width: 96px !important;
  height: 96px !important;
  max-width: 96px !important;
  object-fit: contain;
  border: 1px solid var(--edge) !important;
  border-radius: 6px;
  background: var(--paper);
  display: block;
}
.woocommerce-cart .woocommerce-cart-form .product-name {
  grid-area: name !important;
  align-self: start !important;
  min-width: 0 !important;
  max-width: 100% !important;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1rem !important;
  line-height: 1.3;
  letter-spacing: -0.01em;
  /* Title flows across the full row width so the long marketing
     name doesn't break one word per line. */
  word-break: normal !important;
  word-spacing: normal !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  display: block !important;
}
.woocommerce-cart .woocommerce-cart-form .product-name a {
  color: var(--ink);
  display: block;
  margin-bottom: 0.2rem;
}
.woocommerce-cart .woocommerce-cart-form .product-name a:hover { color: var(--red); }
/* Variation attributes that WC appends below the product link */
.woocommerce-cart .woocommerce-cart-form .product-name .variation,
.woocommerce-cart .woocommerce-cart-form .product-name dl.variation {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  margin: 0.2rem 0 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
}
.woocommerce-cart .woocommerce-cart-form .product-name .variation dt,
.woocommerce-cart .woocommerce-cart-form .product-name dl.variation dt {
  font-weight: 700;
  color: var(--ink-2);
  margin: 0 !important;
}
.woocommerce-cart .woocommerce-cart-form .product-name .variation dt::after { content: ":"; margin-right: 0.2rem; }
.woocommerce-cart .woocommerce-cart-form .product-name .variation dd,
.woocommerce-cart .woocommerce-cart-form .product-name dl.variation dd {
  margin: 0 0.4rem 0 0 !important;
}
.woocommerce-cart .woocommerce-cart-form .product-name .variation dd p { margin: 0 !important; }

/* Bottom-row controls live below the thumb + name row.  Border-top
   on each gives a subtle separator from the title block above. */
.woocommerce-cart .woocommerce-cart-form .cart_item .product-price,
.woocommerce-cart .woocommerce-cart-form .cart_item .product-quantity,
.woocommerce-cart .woocommerce-cart-form .cart_item .product-subtotal {
  padding-top: 0.65rem !important;
  border-top: 1px dashed var(--edge) !important;
  align-self: end !important;
}

/* Price — label-above-value column. Selector chains all the way to
   `td.product-price` so the specificity beats the `tr.cart_item td
   { display: block !important }` reset (without that, the label
   and value sit inline and collide with the qty stepper).
   Aligned LEFT in its column (col 2). */
.woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item td.product-price {
  grid-area: price !important;
  font-family: var(--ff-mono);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-2);
  text-align: left !important;
  white-space: nowrap;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
  align-items: flex-start !important;
  justify-self: start !important;
}
.woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item td.product-price::before {
  content: "Harga satuan";
  display: block !important;
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Quantity stepper — label-above-stepper column. Centred in its
   own 1fr grid column. */
.woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item td.product-quantity {
  grid-area: qty !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem !important;
  align-items: center !important;
  justify-self: center !important;
  min-width: 0;
}
.woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item td.product-quantity::before {
  content: "Jumlah";
  display: block !important;
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Subtotal — bold red, right-aligned in its own 1fr grid column. */
.woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item td.product-subtotal {
  grid-area: subtotal !important;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--red);
  text-align: right !important;
  white-space: nowrap;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
  align-items: flex-end !important;
  justify-self: end !important;
  min-width: 0;
}
.woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item td.product-subtotal::before {
  content: "Subtotal";
  display: block !important;
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.woocommerce-cart .woocommerce-cart-form .product-subtotal .woocommerce-Price-amount { color: inherit; }

/* Remove (X) sits in the top-right of the card */
.woocommerce-cart .woocommerce-cart-form .product-remove {
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.5rem !important;
  padding: 0 !important;
  background: transparent !important;
}
.woocommerce-cart .woocommerce-cart-form .product-remove a.remove {
  width: 26px !important;
  height: 26px !important;
  font-size: 0.95rem !important;
}

/* Actions row (coupon + update cart) — second <tr> after items.
   Sits as a footer section INSIDE the same outer card; no margin /
   border of its own, just a 1 px divider on top and paper-2
   background to subtly differentiate from the item rows above. */
.woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr:not(.cart_item) {
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
}
.woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr:not(.cart_item) td {
  display: block !important;
  padding: 1rem !important;
  background: var(--paper-2) !important;
  border: 0 !important;
}
.woocommerce-cart .woocommerce-cart-form table.shop_table .actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  /* Coupon group naturally on the left, Update cart pushed to the
     right via margin-left: auto on that button (below). Removes
     the stretched empty band that `justify-content: space-between`
     used to create. */
  justify-content: flex-start !important;
}

/* Coupon code field — match the rounded brand-input look */
.woocommerce-cart .woocommerce-cart-form .actions .coupon {
  display: flex !important;
  align-items: stretch;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 460px;
}
.woocommerce-cart .woocommerce-cart-form .actions .coupon input.input-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: auto !important;
  height: 42px !important;
  padding: 0.55rem 1rem !important;
  border: 1.5px solid var(--ink) !important;
  background: var(--surface) !important;
  border-radius: 999px !important;
  font-family: var(--ff-mono);
  font-size: 0.85rem !important;
}
.woocommerce-cart .woocommerce-cart-form .actions .coupon input.input-text::placeholder {
  color: var(--ink-4);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.woocommerce-cart .woocommerce-cart-form .actions .coupon button[name="apply_coupon"] {
  height: 42px !important;
  padding: 0 1.25rem !important;
  background: var(--ink) !important;
  color: white !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--ff-body);
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.woocommerce-cart .woocommerce-cart-form .actions .coupon button[name="apply_coupon"]:hover {
  background: var(--red) !important;
  color: white !important;
}

/* Update cart button — pushed to the right of the row via auto
   left-margin so it visually pairs with cart totals on the right
   while coupon + apply stay grouped on the left. */
.woocommerce-cart .woocommerce-cart-form .actions button[name="update_cart"] {
  height: 42px !important;
  padding: 0 1.25rem !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 999px !important;
  font-family: var(--ff-body);
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 1 !important;
  margin-left: auto !important;
}
.woocommerce-cart .woocommerce-cart-form .actions button[name="update_cart"]:hover {
  background: var(--ink) !important;
  color: white !important;
}
.woocommerce-cart .woocommerce-cart-form .actions button[name="update_cart"]:disabled {
  /* WC disables this button until quantity changes — even disabled,
     keep it readable instead of barely-visible gray-on-gray. */
  opacity: 0.55 !important;
  cursor: not-allowed;
}
.woocommerce a.remove {
  display: inline-grid !important;
  place-items: center;
  width: 28px !important; height: 28px !important;
  background: var(--ink) !important;
  color: white !important;
  border-radius: 50%;
  font-size: 1rem !important;
  line-height: 1 !important;
  font-weight: 700;
  text-decoration: none !important;
  transition: background var(--t-fast);
}
.woocommerce a.remove:hover {
  background: var(--red) !important;
  color: white !important;
}

/* qty input in cart — width clamped so it never overflows narrow phones. */
.woocommerce .quantity input.qty {
  width: clamp(48px, 14vw, 76px);
  height: 40px;
  text-align: center;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--surface);
  font-family: var(--ff-mono);
  font-weight: 600;
}

/* coupon + update buttons row */
.woocommerce .cart .actions {
  padding: 1rem !important;
  background: var(--paper-2) !important;
  border-bottom: 0 !important;
}
.woocommerce .cart .actions .coupon {
  display: flex; gap: 0.5rem; align-items: stretch;
}
.woocommerce .cart .actions .coupon input.input-text {
  flex: 1;
  min-width: 0;
  width: auto;
  max-width: 280px;
  padding: 0.65rem 1rem;
  border: 1px solid var(--ink);
  background: var(--surface);
  border-radius: 999px;
  font-family: var(--ff-mono);
}

/* generic WC button */
.woocommerce .button,
.woocommerce a.button,
.woocommerce-page .button,
.woocommerce-page a.button,
.woocommerce input.button[type="submit"],
.woocommerce button.button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem !important;
  font-family: var(--ff-body) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: -0.005em;
  border-radius: 999px !important;
  border: 1px solid var(--ink) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  text-transform: none !important;
  text-shadow: none !important;
  transition: all var(--t-fast);
  cursor: pointer;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce-page .button:hover {
  background: var(--ink) !important;
  color: white !important;
}
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt[type="submit"],
.woocommerce button.button.alt,
.woocommerce-page a.button.alt {
  background: var(--red) !important;
  color: white !important;
  border-color: var(--red) !important;
}
.woocommerce .button.alt:hover,
.woocommerce-page .button.alt:hover {
  background: var(--red-deep) !important;
  border-color: var(--red-deep) !important;
}

/* CART TOTALS ------------------------------------------ */
.cart_totals {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
}
/* The "// RINGKASAN" ribbon used to live here and sit absolutely
   on the top-left corner, pushing the h2 down by 2.5rem of padding-
   top — that made the right column's first visible content start
   ~22 px LOWER than the left column. Ribbon is removed; h2 padding
   now matches the cart-item card's content offset so both columns
   line up at the top. */
.cart_totals h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 !important;
  padding: 1.1rem 1.25rem 1rem;
  border-bottom: 1px solid var(--edge);
  background: var(--surface);
}

/* Reset the inner shop_table so we can lay it out as a clean key-value list */
.cart_totals table.shop_table,
.cart_totals table.shop_table tbody,
.cart_totals table.shop_table tr,
.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
  display: block !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  width: auto !important;
  text-align: left !important;
}
.cart_totals table.shop_table {
  margin: 0 !important;
  padding: 1.25rem 1.5rem !important;
  background: var(--surface) !important;
}
.cart_totals table.shop_table tr {
  display: grid !important;
  grid-template-columns: max-content 1fr;
  gap: 0.75rem 1rem;
  align-items: baseline;
  padding-block: 0.7rem !important;
  border-bottom: 1px dashed var(--edge-2) !important;
}
.cart_totals table.shop_table tr:last-child { border-bottom: 0 !important; }
.cart_totals table.shop_table th {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.cart_totals table.shop_table td {
  font-family: var(--ff-mono);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  text-align: right !important;
}

/* Total row — make it dramatic, full-width, strong */
.cart_totals .order-total {
  margin-top: 0.5rem;
  padding-top: 1rem !important;
  padding-bottom: 0.5rem !important;
  border-top: 1.5px solid var(--ink) !important;
  border-bottom: 0 !important;
}
.cart_totals .order-total th {
  font-family: var(--ff-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink) !important;
}
.cart_totals .order-total td {
  font-family: var(--ff-display) !important;
  font-size: 1.65rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--red) !important;
}
.cart_totals .order-total td .amount {
  font-family: var(--ff-display);
  font-weight: 800;
  color: var(--red);
}

/* Subtotal screen-reader text gets in the way of the grid layout */
.cart_totals .order-total .includes_tax,
.cart_totals .order-total small.includes_tax {
  grid-column: 1 / -1;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Shipping cell — radio list + address + change-link */
.cart_totals .shipping td { text-align: left !important; }
.cart_totals .woocommerce-shipping-totals.shipping {
  grid-template-columns: max-content 1fr !important;
}
ul#shipping_method,
.woocommerce ul#shipping_method,
.cart_totals ul#shipping_method {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
ul#shipping_method li,
.cart_totals ul#shipping_method li {
  display: flex !important;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--ff-body);
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.4;
  text-align: left;
  font-weight: 500;
}
ul#shipping_method li input[type="radio"] {
  flex-shrink: 0;
  margin: 0 !important;
  margin-top: 0.2em !important;
  accent-color: var(--red);
  width: 14px; height: 14px;
}
ul#shipping_method li label {
  margin: 0 !important;
  cursor: pointer;
  display: inline;
  font-weight: inherit;
}
ul#shipping_method li label .amount {
  font-family: var(--ff-mono);
  font-weight: 600;
  color: var(--ink);
  margin-left: 0.4rem;
}
.woocommerce-shipping-destination,
.cart_totals .woocommerce-shipping-destination {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  color: var(--ink-3);
  margin: 0.85rem 0 0 !important;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--edge-2);
}
.woocommerce-shipping-destination strong {
  color: var(--ink);
  font-weight: 700;
}

/* Proceed-to-checkout block sits in the surface band, not pinched */
.cart_totals .wc-proceed-to-checkout {
  margin: 0 !important;
  padding: 1.25rem 1.5rem !important;
  background: var(--paper-2);
  border-top: 1.5px solid var(--ink);
}
.cart_totals .wc-proceed-to-checkout .checkout-button {
  display: flex !important;
  width: 100%;
  padding: 1.1rem 1.5rem !important;
  font-size: 1rem !important;
  letter-spacing: 0;
}

/* Shipping calculator (the change-address form) */
.woocommerce-shipping-calculator {
  margin: 0.5rem 0 0 !important;
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  display: block;
}
.woocommerce-shipping-calculator > a.shipping-calculator-button {
  color: var(--red) !important;
  font-weight: 700;
  border-bottom: 1px dashed var(--red);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.shipping-calculator-form {
  margin-top: 1rem !important;
  display: flex; flex-direction: column; gap: 0.6rem;
  background: var(--paper);
  padding: 1rem;
  border: 1px dashed var(--edge);
}
.shipping-calculator-form .form-row { margin: 0 !important; padding: 0 !important; }
.shipping-calculator-form input,
.shipping-calculator-form select {
  width: 100% !important;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--surface);
  font-family: var(--ff-body);
  font-size: 0.85rem;
}
.shipping-calculator-form button {
  align-self: flex-start;
}

/* =========================================================
   CART RESPONSIVE — kill leaky labels + reflow for phones
   ========================================================= */

/* WC's woocommerce-smallscreen.css fires at @media (max-width: 768px)
   and injects `td::before { content: attr(data-title) ": " }` inside
   every `table.shop_table_responsive`. That's the stray `:` next to
   the thumbnail (no data-title set on .product-thumbnail), the
   "Product:" prefix on the cart-item title, and the duplicated
   "Subtotal:" inside cart_totals (where we already render the label
   via <th>). We surface our own labels for price/qty/subtotal via
   higher-specificity ::before rules that win — but .product-thumbnail
   and .product-name don't have a custom ::before, so WC's leaks. Kill
   them explicitly, and kill all the cart_totals ones (their <th> is
   already enough). */
.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive tr td.product-thumbnail::before,
.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive tr td.product-name::before,
.cart_totals table.shop_table_responsive tr td::before {
  content: none !important;
  display: none !important;
}

/* Mobile cart-item card: drop the 4-column "img | price | qty |
   subtotal" grid (cramped below ~540px — qty stepper alone needs
   ~110 px) and switch to a 2-column layout where the thumb anchors
   the left edge and the rest stacks on the right. Bottom row puts
   qty + subtotal side by side under the title block. */
@media (max-width: 540px) {
  /* Cart item: 2-row grid (was 3 — unit-price row dropped, since
     subtotal already shows what the customer pays for this line and
     vertical real estate is precious on phones). */
  .woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    grid-template-areas:
      "img  name"
      "qty  subtotal" !important;
    gap: 0.6rem 0.8rem !important;
    padding: 0.85rem 2.5rem 0.85rem 0.85rem !important;
    align-items: start !important;
  }
  .woocommerce-cart .woocommerce-cart-form .product-thumbnail img {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
  }
  .woocommerce-cart .woocommerce-cart-form .product-name {
    font-size: 0.9rem !important;
    line-height: 1.32 !important;
  }
  .woocommerce-cart .woocommerce-cart-form .product-name a {
    margin-bottom: 0 !important;
  }
  /* Hide unit price entirely on mobile — `Subtotal` below is the
     real ringgit the customer cares about. The label "Harga satuan"
     was eating ~30 px of vertical space for redundant info. */
  .woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item td.product-price {
    display: none !important;
  }
  /* Bottom-row controls: tight 2-up — qty stepper left, subtotal
     right, both vertically centred so the prices read on the same
     baseline as the stepper buttons. */
  .woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item td.product-quantity {
    justify-self: start !important;
    align-items: flex-start !important;
    padding-top: 0.6rem !important;
    border-top: 1px dashed var(--edge) !important;
    gap: 0.25rem !important;
  }
  .woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item td.product-subtotal {
    padding-top: 0.6rem !important;
    border-top: 1px dashed var(--edge) !important;
    align-self: stretch !important;
    justify-content: flex-end !important;
  }
  .woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item td.product-subtotal::before {
    font-size: 0.58rem !important;
  }
  .woocommerce-cart .woocommerce-cart-form .product-subtotal .woocommerce-Price-amount {
    font-size: 1.05rem !important;
  }
  /* Tighten the qty stepper for narrow column 1 */
  .woocommerce-cart .ew-qty,
  .woocommerce-cart .quantity { gap: 0 !important; }
  .woocommerce-cart .quantity input.qty,
  .woocommerce-cart .ew-qty__input { width: 40px !important; height: 36px !important; }
  .woocommerce-cart .ew-qty__btn { width: 32px !important; height: 36px !important; }
  /* Pull the remove (X) closer to the corner so it doesn't reserve
     so much padding on the right edge of the card. */
  .woocommerce-cart .woocommerce-cart-form .product-remove {
    top: 0.4rem !important;
    right: 0.4rem !important;
  }
  .woocommerce-cart .woocommerce-cart-form .product-remove a.remove {
    width: 22px !important;
    height: 22px !important;
    font-size: 0.85rem !important;
  }
}

/* Actions row on phones — 2 lines total instead of 3:
   ┌──────────────────────────┬───────┐
   │  coupon code             │ APPLY │   ← inline
   ├──────────────────────────┴───────┤
   │            Update cart           │   ← full width below
   └──────────────────────────────────┘
   Apply button is a compact pill alongside the input, not stacked
   below — saves a row of vertical space. */
@media (max-width: 540px) {
  .woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr:not(.cart_item) td {
    padding: 0.85rem !important;
  }
  .woocommerce-cart .woocommerce-cart-form .actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.55rem !important;
  }
  .woocommerce-cart .woocommerce-cart-form .actions .coupon {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    gap: 0.4rem !important;
  }
  .woocommerce-cart .woocommerce-cart-form .actions .coupon input.input-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 38px !important;
    padding: 0.45rem 0.85rem !important;
    font-size: 0.8rem !important;
  }
  .woocommerce-cart .woocommerce-cart-form .actions .coupon button[name="apply_coupon"] {
    flex: 0 0 auto !important;
    height: 38px !important;
    padding: 0 0.95rem !important;
    font-size: 0.78rem !important;
    white-space: nowrap;
  }
  .woocommerce-cart .woocommerce-cart-form .actions button[name="update_cart"] {
    width: 100% !important;
    margin-left: 0 !important;
    height: 40px !important;
    padding: 0 1rem !important;
    font-size: 0.82rem !important;
  }
}

/* Cart totals grid loosens on phones — labels and values stay on the
   same row, but the label column shrinks to keep the value visible. */
@media (max-width: 540px) {
  .cart_totals table.shop_table {
    padding: 1rem 1.1rem !important;
  }
  .cart_totals table.shop_table tr {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 0.4rem 0.75rem;
  }
  .cart_totals h2 {
    padding: 1rem 1.1rem 0.9rem;
    font-size: 1.25rem;
  }
  .cart_totals .wc-proceed-to-checkout {
    padding: 1rem 1.1rem !important;
  }
  .cart_totals .order-total td {
    font-size: 1.4rem !important;
  }
}

/* CHECKOUT --------------------------------------------- */
.woocommerce-checkout {
  padding-block: 1rem 3rem;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-form-login-toggle {
  margin-bottom: 1rem;
}
.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 0 2.5rem;
  align-items: start;
}
@media (max-width: 980px) {
  .woocommerce-checkout form.checkout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
}

.woocommerce-checkout #customer_details {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 100% !important;
  float: none !important;
}
.woocommerce-checkout #order_review_heading {
  grid-column: 2;
  grid-row: 1;
  width: 100% !important;
  float: none !important;
  margin: 0 0 1rem !important;
}
.woocommerce-checkout #order_review {
  grid-column: 2;
  grid-row: 2;
  width: 100% !important;
  float: none !important;
  position: sticky;
  top: 100px;
  align-self: start;
}
@media (max-width: 980px) {
  .woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1; }
  .woocommerce-checkout #order_review_heading { grid-column: 1; grid-row: 2; }
  .woocommerce-checkout #order_review { grid-column: 1; grid-row: 3; position: static; }
}

/* "Ship to different address?" h3 + checkbox alignment */
.woocommerce-checkout #ship-to-different-address {
  margin: 1.5rem 0 1rem !important;
}
.woocommerce-checkout #ship-to-different-address label {
  display: inline-flex !important;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}
.woocommerce-checkout #ship-to-different-address-checkbox {
  margin: 0 !important;
  width: 18px; height: 18px;
  accent-color: var(--red);
  flex-shrink: 0;
}

/* "Create an account?" checkbox alignment */
.woocommerce-form__label-for-checkbox {
  display: flex !important;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: var(--ff-body) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--ink-2) !important;
  line-height: 1.4 !important;
  cursor: pointer;
  padding: 0.5rem 0 !important;
}
.woocommerce-form__label-for-checkbox input[type="checkbox"],
.woocommerce-form__input-checkbox {
  flex-shrink: 0;
  width: 18px; height: 18px;
  accent-color: var(--red);
  margin: 0 !important;
}

.woocommerce-checkout h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  margin: 0 0 1rem !important;
  color: var(--ink);
}
.woocommerce-checkout #order_review_heading {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 1rem !important;
}

/* form fields */
.woocommerce form .form-row,
.woocommerce-page form .form-row {
  margin: 0 0 1rem !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  display: block !important;
}
.woocommerce form .form-row.form-row-first,
.woocommerce form .form-row.form-row-last,
.woocommerce-page form .form-row.form-row-first,
.woocommerce-page form .form-row.form-row-last {
  width: calc(50% - 0.5rem) !important;
  display: inline-block !important;
}
.woocommerce form .form-row.form-row-first { margin-right: 1rem !important; }
.woocommerce form .form-row.form-row-wide,
.woocommerce-page form .form-row.form-row-wide { width: 100% !important; }
.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
  display: block;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.4rem;
}
.woocommerce form .form-row label .required {
  color: var(--red);
  text-decoration: none;
  border: 0;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
  width: 100% !important;
  padding: 0.85rem 1rem !important;
  background: var(--surface) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 6px !important;
  font-family: var(--ff-body);
  font-size: 0.95rem;
  color: var(--ink);
  height: auto !important;
  line-height: 1.4;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
/* Native select: kill the browser arrow + render a custom chevron with
   a safe gap from the selected text. Without `appearance: none`, the
   browser's default caret sits flush against the text ("Indonesiav"
   look) regardless of right-padding on the element. */
.woocommerce form .form-row select,
.woocommerce-page form .form-row select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230A0A0A' stroke-width='1.6'%3E%3Cpath d='m3 5 3 3 3-3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 12px !important;
  padding-right: 2.5rem !important;
  cursor: pointer;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: 0;
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px var(--red-soft);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.4 !important;
  /* Right padding gives the selected text breathing room from the arrow.
     Select2 ships with `padding-right: 20px` by default; an earlier
     theme rule had `padding: 0 !important` which clobbered that and
     made "Indonesia" sit flush against the caret ("Indonesiav"). */
  padding: 0 2.25rem 0 0 !important;
  color: var(--ink);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  width: 28px !important;
  height: 100% !important;
  top: 0 !important; right: 0.6rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.woocommerce-checkout #ship-to-different-address label {
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  display: flex; align-items: center; gap: 0.5rem;
}

/* order review (right column) */
.woocommerce-checkout-review-order {
  background: var(--paper-2);
  padding: 1.5rem;
  border: 1.5px solid var(--ink);
}
.woocommerce-checkout-review-order table.shop_table {
  border: 0 !important;
  background: var(--surface);
}
.woocommerce-checkout-review-order table.shop_table thead {
  background: var(--paper-2);
  color: var(--ink);
}
.woocommerce-checkout-review-order table.shop_table thead th {
  color: var(--ink-2);
}
.woocommerce-checkout-review-order .order-total .amount {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--red);
}

/* payment methods */
#payment, .woocommerce-checkout-payment {
  background: var(--surface) !important;
  border: 1.5px solid var(--ink);
  padding: 1rem;
  border-radius: 0 !important;
  margin-top: 1rem !important;
}
#payment ul.payment_methods,
.woocommerce-checkout-payment ul.payment_methods {
  border-bottom: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}
#payment ul.payment_methods li {
  padding: 0.85rem 0 !important;
  border-bottom: 1px solid var(--edge);
}
#payment ul.payment_methods li:last-child { border-bottom: 0; }
#payment ul.payment_methods li label {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1rem;
  text-transform: none;
  color: var(--ink);
  letter-spacing: -0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
#payment ul.payment_methods li input[type="radio"] {
  accent-color: var(--red);
  width: 18px; height: 18px;
}
#payment .payment_box {
  background: var(--paper-2) !important;
  border: 0 !important;
  padding: 1rem !important;
  margin: 0.75rem 0 0 !important;
  font-family: var(--ff-body);
  font-size: 0.85rem;
  color: var(--ink-2);
  border-radius: 4px;
}
#payment .payment_box::before { display: none !important; }

#payment .place-order {
  margin-top: 1.25rem !important;
  padding: 0 !important;
}
#payment .place-order button#place_order,
button#place_order {
  display: block;
  width: 100%;
  padding: 1.2rem 1.5rem !important;
  background: var(--red) !important;
  color: white !important;
  border-radius: 999px !important;
  font-family: var(--ff-body);
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  letter-spacing: -0.005em;
  border: 0 !important;
  text-transform: none !important;
  transition: background var(--t-fast), transform var(--t-fast);
}
#payment .place-order button#place_order:hover {
  background: var(--red-deep) !important;
  transform: translateY(-1px);
}

/* terms checkbox */
.woocommerce-terms-and-conditions-wrapper {
  font-size: 0.85rem;
  margin: 1rem 0 !important;
}

/* NOTICES ---------------------------------------------- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-notice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem !important;
  margin-block: 0 1.5rem !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-left: 3px solid !important;
  font-family: var(--ff-body);
  font-size: 0.9rem;
  line-height: 1.5;
  background: var(--surface) !important;
  color: var(--ink) !important;
}
.woocommerce-message {
  background: rgba(26,127,55,0.08) !important;
  border-color: var(--green) !important;
}
.woocommerce-message::before { display: none !important; }
.woocommerce-error {
  background: var(--red-soft) !important;
  border-color: var(--red) !important;
}
.woocommerce-error::before { display: none !important; }
.woocommerce-info {
  background: var(--paper-2) !important;
  border-color: var(--ink) !important;
}
.woocommerce-info::before { display: none !important; }

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  margin-left: auto;
  font-size: 0.8rem !important;
  padding: 0.45rem 0.9rem !important;
}

/* MY ACCOUNT ------------------------------------------- */
.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
  padding-top: 1.5rem;
}
@media (max-width: 720px) {
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0; padding: 0;
  border: 1px solid var(--edge);
  background: var(--surface);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid var(--edge);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 0.85rem 1rem;
  color: var(--ink);
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 0.95rem;
  transition: background var(--t-fast), color var(--t-fast);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--paper-2);
  color: var(--red);
}

/* Force .woocommerce wrapper to fill its container — WC ships flex
 * styles that shrink to content, which collapses login/register layout. */
.ew-woo > .container > .woocommerce,
.ew-woo > .container .woocommerce {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

/* LOGIN / REGISTER ------------------------------------- */
.woocommerce #customer_login,
.woocommerce-page #customer_login,
.woocommerce .u-columns.col2-set,
.woocommerce-page .u-columns.col2-set {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2rem !important;
  width: 100% !important;
  max-width: 980px;
  margin: 0 auto !important;
  float: none !important;
  clear: both !important;
}
.woocommerce #customer_login::before,
.woocommerce #customer_login::after,
.woocommerce .u-columns.col2-set::before,
.woocommerce .u-columns.col2-set::after { display: none !important; content: none !important; }

.woocommerce #customer_login .u-column1,
.woocommerce #customer_login .u-column2,
.woocommerce #customer_login .col-1,
.woocommerce #customer_login .col-2,
.woocommerce-page #customer_login .col-1,
.woocommerce-page #customer_login .col-2 {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 100% !important;
}

.woocommerce #customer_login h2,
.woocommerce-page #customer_login h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.025em;
  margin: 0 0 1rem !important;
  display: flex; align-items: center; gap: 0.5rem;
}
.woocommerce #customer_login h2::before {
  content: "→";
  color: var(--red);
  font-family: var(--ff-mono);
  font-weight: 700;
}
.woocommerce-form-login,
.woocommerce-form-register,
form.lost_reset_password {
  border: 1.5px solid var(--ink);
  padding: 1.75rem;
  background: var(--surface);
  margin: 0 !important;
  position: relative;
}
.woocommerce-form-register {
  background: var(--paper-2);
}
.woocommerce-form-register::before {
  content: "DAFTAR GRATIS";
  position: absolute;
  top: -1px; right: -1px;
  background: var(--red);
  color: white;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  padding: 4px 10px;
}
.woocommerce-form__label-for-checkbox {
  font-family: var(--ff-body) !important;
  font-size: 0.85rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--ink-2) !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
}
@media (max-width: 720px) {
  .u-columns.col2-set { grid-template-columns: 1fr; }
}

/* ORDER RECEIVED (THANK YOU) --------------------------- */
.woocommerce-order {
  padding-block: 1rem;
}
.woocommerce-order .woocommerce-notice--success {
  background: rgba(26,127,55,0.06) !important;
  border-left: 3px solid var(--green) !important;
  padding: 1.5rem !important;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ink);
}
.woocommerce-order .woocommerce-order-overview,
.woocommerce-order ul.order_details {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  margin: 1rem 0 1.5rem !important;
  padding: 0 !important;
  border: 1.5px solid var(--ink);
  border-left: 0;
}
.woocommerce-order ul.order_details li {
  padding: 1rem !important;
  border-left: 1.5px solid var(--ink);
  background: var(--surface);
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.woocommerce-order ul.order_details li strong {
  display: block;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 0.25rem;
}
/* WC ships a clearfix `::before`/`::after` on `ul.order_details`
   (content:" "; display:table). Since this list is `display:grid`
   (above), those pseudos become empty GRID ITEMS — stealing the first +
   last cells, which is the blank gap left of "ORDER NUMBER" and the big
   empty area right of "PAYMENT METHOD". Same gotcha as `ul.products`.
   Selector matches WC's specificity (0,2,2) + `!important` to win. */
.woocommerce-order ul.order_details::before,
.woocommerce-order ul.order_details::after {
  content: none !important;
  display: none !important;
}
/* Long values (email, account number) must wrap inside their cell rather
   than overflow the 160px track and spill past the box border. */
.woocommerce-order ul.order_details li { min-width: 0; }
.woocommerce-order ul.order_details li,
.woocommerce-order ul.order_details li strong {
  overflow-wrap: anywhere;
}
.woocommerce-order h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.025em;
  margin: 1.5rem 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--edge);
}
/* ROOT CAUSE of the huge vertical gaps on the order-received page:
   home.css ships a BARE `section { padding-block: clamp(3rem,6vw,5rem) }`
   for homepage sections (gotcha #1). WC wraps these blocks in <section>
   elements (.woocommerce-bacs-bank-details, .woocommerce-order-details,
   .woocommerce-customer-details, and the addresses <section>), so each
   inherits ~48–80px of dead padding top AND bottom. Reset it; spacing is
   then driven only by the margins below. */
.woocommerce-bacs-bank-details,
.woocommerce-order-details,
.woocommerce-customer-details,
.woocommerce-customer-details .woocommerce-columns,
.woocommerce-customer-details .woocommerce-columns--addresses {
  padding-block: 0 !important;
}
/* Tighten the gaps between the order-received sections. */
.woocommerce-bacs-bank-details,
.woocommerce-order-details,
.woocommerce-customer-details { margin: 0 0 1.5rem !important; }
.woocommerce-bacs-bank-details .wc-bacs-bank-details-account-name {
  font-family: var(--ff-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin: 0 0 0.6rem;
}

/* CUSTOMER DETAILS — Billing / Shipping address cards ----------
   WC default renders these as float columns with big <h2> titles and a
   bare <address>. Restyle as side-by-side cards matching the order-
   summary box: bordered surface, mono uppercase kicker, clean body.
   Scoped to `.woocommerce-customer-details` (not `.woocommerce-order`)
   so it also covers the My-Account "view order" page, which has no
   `.woocommerce-order` wrapper. */
.woocommerce-customer-details .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 0 !important;
  /* Each card hugs its own content. Without this, grid stretches both to
     equal height and the Shipping card (no phone/email) gets a big dead
     gap under the postcode. */
  align-items: start;
}
/* WC clearfix pseudos would become empty grid items (gotcha #3). */
.woocommerce-customer-details .woocommerce-columns--addresses::before,
.woocommerce-customer-details .woocommerce-columns--addresses::after {
  content: none !important;
  display: none !important;
}
.woocommerce-customer-details .woocommerce-column {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 1.1rem 1.35rem 1.25rem;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 8px;
}
.woocommerce-customer-details .woocommerce-column__title {
  font-family: var(--ff-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  margin: 0 0 0.7rem !important;
  padding: 0 0 0.6rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--edge) !important;
}
/* WC default `.woocommerce .woocommerce-customer-details address` (0,2,1)
   draws a 1px rounded box with 6px 12px padding — that's the stray "inner
   box" wrapping the address, and it made the phone/email look like they
   spilled outside it. Match WC's specificity (+ !important) to strip it so
   the content sits flush inside the card. */
.woocommerce-customer-details .woocommerce-column address,
.woocommerce-customer-details address {
  font-style: normal;
  font-family: var(--ff-display);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
  border: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Contact rows: flex with a fixed 16px icon slot so the phone + mail
   icons share the exact same column (perfectly aligned with each other
   and vertically centred on the text). Icons are SVG masks — not unicode
   glyphs — so they render identically across clients (no emoji width). */
.woocommerce-customer-details address .woocommerce-customer-details--phone,
.woocommerce-customer-details address .woocommerce-customer-details--email {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0 0;
  font-family: var(--ff-mono);
  font-size: 0.8rem;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}
.woocommerce-customer-details address .woocommerce-customer-details--phone::before,
.woocommerce-customer-details address .woocommerce-customer-details--email::before {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background-color: var(--ink-4);
  -webkit-mask: var(--ew-ico) no-repeat center / 16px 16px;
  mask: var(--ew-ico) no-repeat center / 16px 16px;
}
.woocommerce-customer-details address .woocommerce-customer-details--phone::before {
  --ew-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.81.36 1.6.7 2.34a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.74.34 1.53.57 2.34.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.woocommerce-customer-details address .woocommerce-customer-details--email::before {
  --ew-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
}

/* breadcrumbs ------------------------------------------ */
/* Semantic <nav><ol> built by woocommerce_breadcrumb_defaults filter.
   Chevron separator is drawn as a CSS pseudo so it stays outside any
   actual <li> text content (accessible + clean copy-paste). */
.ew-crumbs {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin: 1.5rem 0 1.5rem !important;
  padding: 0.5rem 0;
}
.ew-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ew-crumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  min-width: 0;
}
.ew-crumbs__item + .ew-crumbs__item::before {
  content: "";
  width: 8px; height: 8px;
  flex-shrink: 0;
  border-right: 1.4px solid var(--ink-4);
  border-top: 1.4px solid var(--ink-4);
  transform: rotate(45deg);
  margin-right: 0.1rem;
  opacity: 0.7;
}
.ew-crumbs__item a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  color: var(--ink-3);
  background: var(--paper-2);
  border-radius: 999px;
  transition: background var(--t-fast), color var(--t-fast);
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ew-crumbs__item a:hover {
  background: var(--ink);
  color: var(--paper);
}
.ew-crumbs__item:first-child a::before {
  content: "";
  width: 12px; height: 12px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9.5 12 3l9 6.5V21H3z'/><path d='M9 21v-6h6v6'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9.5 12 3l9 6.5V21H3z'/><path d='M9 21v-6h6v6'/></svg>") center / contain no-repeat;
}
.ew-crumbs__item:last-child:not(:first-child) {
  color: var(--ink);
  font-weight: 700;
  padding: 0.3rem 0;
  max-width: 36ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 600px) {
  .ew-crumbs { font-size: 0.72rem; }
  .ew-crumbs__item a { max-width: 18ch; }
  .ew-crumbs__item:last-child:not(:first-child) { max-width: 24ch; }
}

/* Legacy class kept for non-overridden contexts */
.woocommerce-breadcrumb:not(.ew-crumbs) {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  margin-block: 0 1.5rem !important;
}
.woocommerce-breadcrumb:not(.ew-crumbs) a { color: var(--ink-3); }
.woocommerce-breadcrumb:not(.ew-crumbs) a:hover { color: var(--red); }

/* pagination ------------------------------------------- */
/* WC core ships `display: inline-block` + `float: left` on the
   li elements, plus a `::before/::after { content: " "; display: table }`
   clearfix on the ul. When we flexbox the ul, those pseudo-elements
   become flex items and the floats stop participating in layout —
   result: numbers stack vertically and look "numpuk". Force flex
   with `!important`, kill the clearfix pseudos, and unfloat the lis. */
.woocommerce-pagination {
  text-align: center;
}
.woocommerce-pagination ul.page-numbers,
.woocommerce nav.woocommerce-pagination ul.page-numbers {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.35rem !important;
  list-style: none;
  border: 0 !important;
  margin: 1.5rem auto !important;
  padding: 0 !important;
  white-space: normal !important;
}
.woocommerce-pagination ul.page-numbers::before,
.woocommerce-pagination ul.page-numbers::after,
.woocommerce .woocommerce-pagination ul.page-numbers::before,
.woocommerce .woocommerce-pagination ul.page-numbers::after,
.woocommerce-page .woocommerce-pagination ul.page-numbers::before,
.woocommerce-page .woocommerce-pagination ul.page-numbers::after {
  content: none !important;
  display: none !important;
}
.woocommerce-pagination ul.page-numbers li,
.woocommerce nav.woocommerce-pagination ul.page-numbers li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  float: none !important;
  display: inline-flex !important;
  overflow: visible !important;
}
.woocommerce-pagination .page-numbers {
  min-width: 38px;
  height: 38px;
  display: inline-grid !important;
  place-items: center;
  border: 1px solid var(--edge) !important;
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1 !important;
  color: var(--ink-2) !important;
  background: var(--surface) !important;
  padding: 0 0.65rem !important;
  text-decoration: none !important;
  transition: all var(--t-fast);
}
.woocommerce-pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers.current {
  background: var(--red) !important;
  color: white !important;
  border-color: var(--red) !important;
}
.woocommerce-pagination .page-numbers.dots {
  border-color: transparent !important;
  background: transparent !important;
}
.woocommerce-pagination .page-numbers.dots:hover {
  background: transparent !important;
  color: var(--ink-2) !important;
  border-color: transparent !important;
}

/* category archive image (when defined) ---------------- */
.woocommerce-products-header .term-thumbnail img {
  max-width: 200px;
  margin-bottom: 1rem;
}

/* "Showing the single result" wrapper ----------------- */
.woocommerce-no-products-found {
  padding: 3rem;
  text-align: center;
  font-family: var(--ff-display);
  color: var(--ink-3);
  font-size: 1.2rem;
  border: 1.5px dashed var(--edge-2);
}

/* =========================================================
   EW QUANTITY STEPPER
   New `quantity-input.php` override renders [-] [input] [+].
   The wrapper is `.ew-qty` (single product) or `.quantity` (cart
   table); buttons share the same `.ew-qty__btn` class so both
   contexts get identical behaviour.
   ========================================================= */
.ew-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
  user-select: none;
}
.ew-qty__btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: auto;
  background: var(--paper-2);
  color: var(--ink);
  border: 0;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  flex-shrink: 0;
}
.ew-qty__btn:hover { background: var(--red); color: white; }
.ew-qty__btn:active { transform: none; }
.ew-qty__btn:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.ew-qty__btn svg { display: block; }

/* Cart table: WC renders <td class="product-quantity"> around `.ew-qty`.
   Width override + smaller buttons so the row stays compact. */
.woocommerce-cart-form .ew-qty,
table.shop_table .ew-qty {
  border: 1px solid var(--ink);
  border-radius: 6px;
  height: 40px;
}
.woocommerce-cart-form .ew-qty .ew-qty__btn,
table.shop_table .ew-qty .ew-qty__btn { width: 36px; }
.woocommerce-cart-form .ew-qty .ew-qty__input,
table.shop_table .ew-qty .ew-qty__input { width: 54px; height: 100% !important; }

/* =========================================================
   EW STOCK INDICATOR
   ========================================================= */
.ew-stock {
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
  align-self: flex-start;
  min-width: 220px;
  max-width: 100%;
  padding: 0.6rem 0.85rem 0.65rem !important;
  border-radius: 10px;
  background: var(--paper-2);
  border: 1px solid var(--edge);
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.ew-stock__head {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.ew-stock__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-4);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}
.ew-stock__icon { display: inline-grid; place-items: center; }
.ew-stock__icon svg { display: block; }
.ew-stock__label { line-height: 1.3; }
.ew-stock__bar {
  display: block;
  width: 100%;
  height: 5px;
  background: var(--surface);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--edge);
}
.ew-stock__fill {
  display: block;
  height: 100%;
  background: var(--ink-4);
  border-radius: 999px;
  transition: width var(--t-base), background var(--t-base);
}
.ew-stock--available { color: var(--green); background: rgba(26,127,55,0.06); border-color: rgba(26,127,55,0.18); }
.ew-stock--available .ew-stock__dot { background: var(--green); box-shadow: 0 0 0 3px rgba(26,127,55,0.18); animation: ew-stock-pulse 2.2s ease-in-out infinite; }
.ew-stock--available .ew-stock__fill { background: var(--green); }
.ew-stock--low { color: #B7651A; background: rgba(201,164,74,0.08); border-color: rgba(201,164,74,0.32); }
.ew-stock--low .ew-stock__dot { background: var(--gold); box-shadow: 0 0 0 3px rgba(201,164,74,0.2); animation: ew-stock-pulse 1.4s ease-in-out infinite; }
.ew-stock--low .ew-stock__fill { background: var(--gold); }
.ew-stock--out { color: var(--red); background: var(--red-soft); border-color: rgba(230,51,41,0.25); }
.ew-stock--out .ew-stock__dot { background: var(--red); box-shadow: 0 0 0 3px rgba(230,51,41,0.2); }
.ew-stock--backorder { color: var(--ink); background: var(--paper-2); border-color: var(--edge); }
.ew-stock--backorder .ew-stock__dot { background: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,0.08); }

@keyframes ew-stock-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}

/* =========================================================
   EW VARIATION CHIP SWATCHES
   The hidden <select> drives WC's variation logic; chips mirror
   it. Each `.ew-variation` is one attribute row.
   ========================================================= */
.ew-variations {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
}
.ew-variation {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.ew-variation__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.ew-variation__label {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ew-variation__value {
  font-family: var(--ff-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.ew-variation__select {
  /* Hide the native select; we still need it in the DOM for WC's JS. */
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.ew-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ew-swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 44px;
  padding: 0.55rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--edge-2);
  border-radius: 12px;
  color: var(--ink-2);
  font-family: var(--ff-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.ew-swatch:hover {
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-1px);
}
.ew-swatch:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.ew-swatch.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 6px 16px -10px var(--ink);
}
.ew-swatch.is-active::after {
  content: "";
  position: absolute;
  top: -6px; right: -6px;
  width: 18px; height: 18px;
  background: var(--red);
  color: white;
  border-radius: 50%;
  border: 2px solid var(--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 6 2 2 4-5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
.ew-swatch[aria-disabled="true"],
.ew-swatch:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}
.ew-variations__reset {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  margin-top: 0.25rem;
  padding: 0.25rem 0;
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-3) !important;
  background: transparent;
  border: 0;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px !important;
  cursor: pointer;
}
.ew-variations__reset:hover { color: var(--red) !important; }
.ew-variations__reset svg { display: inline-block; }
/* WC hides .reset_variations until a variation is chosen via JS — we
   keep that behaviour. */
.ew-variations__reset[style*="display: none"],
.ew-variations__reset[style*="display:none"] { display: none !important; }

.single_variation_wrap .woocommerce-variation {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.single_variation_wrap .woocommerce-variation-price {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  letter-spacing: -0.025em;
  color: var(--ink);
}
.single_variation_wrap .woocommerce-variation-price .price {
  margin: 0 !important;
  color: var(--ink) !important;
}
.single_variation_wrap .woocommerce-variation-availability { margin: 0; }
.single_variation_wrap .woocommerce-variation-description {
  font-size: 0.93rem;
  color: var(--ink-2);
  padding: 0.75rem 0.9rem;
  background: var(--paper-2);
  border-left: 3px solid var(--red);
  border-radius: 0 6px 6px 0;
}
/* WC always renders the description container on variation select,
   even when the variation has no description text. The empty box
   shows as a hollow grey bar with the red bookmark — hide it. */
.single_variation_wrap .woocommerce-variation-description:empty {
  display: none;
}

/* =========================================================
   EW PRODUCT GALLERY — hover-revealed prev / next buttons
   Sits inside `.woocommerce-product-gallery` (relatively
   positioned via the existing single-product rule).
   ========================================================= */
.ew-gallery { position: relative; }
.ew-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(0);
  z-index: 5;
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  border: 1px solid var(--edge-2);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--t-fast),
    transform var(--t-fast),
    background var(--t-fast),
    color var(--t-fast),
    box-shadow var(--t-fast);
  box-shadow: 0 10px 24px -12px rgba(0,0,0,0.25);
  backdrop-filter: blur(4px);
}
.ew-gallery__nav--prev { left: 0.75rem; }
.ew-gallery__nav--next { right: 0.75rem; }
.ew-gallery:hover .ew-gallery__nav,
.ew-gallery:focus-within .ew-gallery__nav {
  opacity: 1;
  pointer-events: auto;
}
.ew-gallery__nav:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: translateY(-50%) scale(1.05);
}
.ew-gallery__nav--prev:hover { transform: translateY(-50%) translateX(-2px) scale(1.05); }
.ew-gallery__nav--next:hover { transform: translateY(-50%) translateX(2px)  scale(1.05); }
.ew-gallery__nav:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.ew-gallery__nav svg { display: block; }

/* Touch devices have no hover state — keep the buttons visible (but
   softer) so the feature is still discoverable. */
@media (hover: none) {
  .ew-gallery__nav {
    opacity: 0.85;
    pointer-events: auto;
    background: rgba(255,255,255,0.8);
  }
}

/* =========================================================
   EW GALLERY VIDEO SLIDE — first slide in the WC flexslider
   when `_ew_youtube_url` meta is set. No <a> / <img> inside,
   so WC's zoom + photoswipe lightbox skip it naturally.
   `data-thumb` feeds the thumbnail strip (YouTube poster).
   The iframe is sized to CONTAIN the slide (preserves native
   aspect ratio) with the .ew-gallery__video black background
   filling the remainder as letterbox bars — no cropping of
   YouTube controls or video content.
   ========================================================= */
.ew-gallery__video {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ink);
}
.ew-gallery__video-frame {
  position: absolute;
  inset: 0;
}
.ew-gallery__video-frame iframe {
  display: block;
  border: 0;
  position: absolute;
}
/* Vertical Shorts (9:16) — iframe fills slide height; width
   shrinks to ~56% of slide width, centred with black letterbox
   bars on the left + right. */
.ew-gallery__video--shorts .ew-gallery__video-frame iframe {
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  aspect-ratio: 9 / 16;
  max-width: 100%;
  transform: translateX(-50%);
}
/* Landscape (16:9) — iframe fills slide width; height shrinks
   to ~56% of slide height, centred with black letterbox bars
   on the top + bottom. */
.ew-gallery__video--wide .ew-gallery__video-frame iframe {
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 100%;
  transform: translateY(-50%);
}

/* Thumbnail strip entry — flexslider clones each slide's `data-thumb`
   into an `<img>` inside `.flex-control-thumbs li`. We scope the play
   overlay to `.ew-has-video` (added by product-image.php only when a
   video URL is set), and to the FIRST <li> which mirrors our first-
   slide injection. Without the wrapper scope the icon would leak onto
   the first photo on any product. */
.ew-has-video .flex-control-thumbs li:first-child {
  position: relative;
}
.ew-has-video .flex-control-thumbs li:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(0,0,0,0.55) 14px, transparent 15px) center / 100% 100% no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='10,8 16,12 10,16' fill='%23ffffff'/></svg>") center / 16px 16px no-repeat;
  pointer-events: none;
  border-radius: inherit;
}

/* =========================================================
   EW REVIEWS — section header, summary, list, and form.
   Lives full-width below the gallery+summary grid via the
   `.single-product .product > .ew-related`-style override
   that we extend below for `.ew-reviews`.
   ========================================================= */

/* Ensure the section spans both grid columns like related/tabs do. */
.single-product .product > .ew-reviews,
.single-product .product > .woocommerce-Reviews {
  grid-column: 1 / -1 !important;
}

.ew-reviews {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: 1rem;
}
/* When rendered inside the WC tabs panel (default), no need for an
   extra top border — the `.woocommerce-tabs` wrapper already
   provides the visual break above it. */
.woocommerce-tabs .ew-reviews { margin-top: 0; }

.ew-reviews__head {
  display: flex; flex-direction: column;
  gap: 0.4rem;
  max-width: 720px;
}
.ew-reviews__kicker {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.ew-reviews__head h2.ew-reviews__title,
.woocommerce-tabs .panel h2.ew-reviews__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 !important;
}
.ew-reviews__lede {
  font-family: var(--ff-body);
  font-size: 0.95rem;
  color: var(--ink-3);
  margin: 0;
  max-width: 56ch;
}

/* --- Summary card (average + breakdown) --- */
.ew-reviews__summary {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: 16px;
}
@media (max-width: 640px) {
  .ew-reviews__summary { grid-template-columns: 1fr; gap: 1.25rem; }
}
.ew-reviews__score {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.4rem;
  padding-right: clamp(0.5rem, 2vw, 1.5rem);
  border-right: 1px solid var(--edge);
}
@media (max-width: 640px) {
  .ew-reviews__score { border-right: 0; border-bottom: 1px solid var(--edge); padding-right: 0; padding-bottom: 1.25rem; }
}
.ew-reviews__score-num {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.ew-reviews__score-out {
  margin-left: -0.4rem;
  font-family: var(--ff-mono);
  font-size: 0.95rem;
  color: var(--ink-3);
  vertical-align: super;
}
.ew-reviews__score-stars { display: inline-flex; }
.ew-reviews__score-count {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.ew-reviews__breakdown {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.ew-reviews__row {
  display: grid;
  grid-template-columns: 38px 1fr 32px;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--ff-mono);
  font-size: 0.8rem;
  color: var(--ink-3);
}
.ew-reviews__row-star {
  display: inline-flex; align-items: center; gap: 0.2rem;
  font-weight: 700; color: var(--ink-2);
}
.ew-reviews__row-star svg { color: var(--gold); }
.ew-reviews__row-bar {
  display: block;
  height: 6px;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 999px;
  overflow: hidden;
}
.ew-reviews__row-fill {
  display: block;
  height: 100%;
  background: var(--gold);
  border-radius: 999px;
  transition: width var(--t-base);
}
.ew-reviews__row-count { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Star-rating component (WC default `.star-rating`) ---
   WC ships an icon-font implementation; we override entirely with
   SVG backgrounds so the rating renders without needing WC's
   `star` woff font. The `<span>` inside keeps WC's inline
   `width: NN%`, which becomes the filled overlay. */
.ew-reviews .star-rating,
.ew-review .star-rating {
  position: relative;
  display: inline-block;
  width: calc(1em * 5);
  height: 1em;
  line-height: 1;
  overflow: hidden;
  font-size: 1.05rem;
  color: transparent;
  vertical-align: middle;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239A9A95' stroke-width='1.4' stroke-linejoin='round'><path d='m8 1.5 1.95 4.18 4.55.55-3.37 3.13.88 4.5L8 11.62 4 13.86l.88-4.5L1.5 6.23l4.55-.55z'/></svg>")
    repeat-x left center / 1em 1em;
}
.ew-reviews .star-rating::before,
.ew-review .star-rating::before { content: none !important; }
.ew-reviews .star-rating span,
.ew-review .star-rating span {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  font-size: 0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C9A44A'><path d='m8 1.5 1.95 4.18 4.55.55-3.37 3.13.88 4.5L8 11.62 4 13.86l.88-4.5L1.5 6.23l4.55-.55z'/></svg>")
    repeat-x left center / 1em 1em;
}
.ew-reviews .star-rating span::before,
.ew-review .star-rating span::before { content: none !important; }
.ew-reviews__score-stars .star-rating { font-size: 1.3rem; }

/* --- Review list / single review card --- */
.ew-review-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex; flex-direction: column;
  gap: 1rem;
}
.ew-review-list .children {
  margin-top: 1rem !important;
  padding-left: clamp(1rem, 2vw, 2rem) !important;
  list-style: none !important;
  border-left: 2px solid var(--edge);
}
li.ew-review { list-style: none !important; }
li.ew-review::marker { content: none; }
.ew-review__card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 12px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ew-review__card:hover {
  border-color: var(--ink-4);
  box-shadow: 0 6px 18px -12px rgba(0,0,0,0.2);
}
@media (max-width: 600px) {
  .ew-review__card { grid-template-columns: 36px 1fr; gap: 0.75rem; padding: 1rem; }
}
.ew-review__avatar img {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-2);
  border: 1px solid var(--edge);
}
@media (max-width: 600px) {
  .ew-review__avatar img { width: 36px; height: 36px; }
}
.ew-review__body { min-width: 0; }
.ew-review__body .star-rating { margin-bottom: 0.35rem; }
.ew-review__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.55rem !important;
  font-size: 0.85rem;
  color: var(--ink-3);
}
.ew-review__author {
  font-family: var(--ff-display);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.ew-review__verified {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  background: rgba(26,127,55,0.1);
  color: var(--green);
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  font-style: normal !important;
}
.ew-review__verified svg { display: inline-block; }
.ew-review__sep { color: var(--ink-4); }
.ew-review__date {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  color: var(--ink-3);
}
.ew-review__body .description,
.ew-review__body p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.ew-review__pending em {
  font-style: normal;
  color: var(--gold);
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  font-weight: 600;
}

/* --- Empty state --- */
.ew-reviews__empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.65rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--paper-2);
  border: 1.5px dashed var(--edge-2);
  border-radius: 14px;
  text-align: center;
}
.ew-reviews__empty-icon { color: var(--gold); }
.ew-reviews__empty-title {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
}
.ew-reviews__empty-lede {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-3);
  max-width: 36ch;
}

/* --- Verification gate (logged-out / no purchase) --- */
.ew-reviews__gate {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  margin: 0;
  background: var(--paper-2);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  font-size: 0.92rem;
  color: var(--ink-2);
}
.ew-reviews__gate svg { color: var(--gold); flex-shrink: 0; }

/* =========================================================
   EW REVIEW FORM — modern card with big tappable stars.
   ========================================================= */
.ew-review-form-wrap {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 12px 30px -22px rgba(0,0,0,0.25);
}
.ew-review-form__head {
  display: flex; flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--edge);
}
.ew-review-form__kicker {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.ew-review-form__title {
  font-family: var(--ff-display) !important;
  font-weight: 700 !important;
  font-size: clamp(1.25rem, 2.5vw, 1.6rem) !important;
  letter-spacing: -0.025em !important;
  color: var(--ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.ew-review-form__title small { display: none; }
.ew-review-form__lede {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-3);
}
.ew-review-form__login {
  padding: 0.85rem 1rem;
  background: var(--paper-2);
  border-left: 3px solid var(--red);
  border-radius: 0 8px 8px 0;
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0 !important;
}
.ew-review-form__login a {
  color: var(--red) !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Field primitives — reused for name/email/textarea. */
.ew-field {
  display: flex; flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 1rem !important;
}
.ew-field__label {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ew-field__label .required { color: var(--red); }
.ew-field__input,
.ew-field__textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--edge-2);
  border-radius: 10px;
  font-family: var(--ff-body);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}
.ew-field__textarea {
  resize: vertical;
  min-height: 140px;
  font-family: var(--ff-body);
  line-height: 1.55;
}
.ew-field__input:focus,
.ew-field__textarea:focus {
  outline: 0 !important;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(230,51,41,0.08);
  background: var(--surface);
}
.ew-field__input::placeholder,
.ew-field__textarea::placeholder { color: var(--ink-4); }

/* Two-column author + email on wide screens; stacked on narrow.
   The fields are <p class="comment-form-author ew-field"> so we keep
   the flex-column for label-above-input and switch the outer
   `display` to inline-flex on wide so adjacent fields sit on one row. */
@media (min-width: 720px) {
  .ew-review-form .comment-form-author,
  .ew-review-form .comment-form-email {
    display: inline-flex;
    flex-direction: column;
    vertical-align: top;
    width: calc(50% - 0.5rem);
  }
  .ew-review-form .comment-form-author { margin-right: 0.45rem !important; }
  .ew-review-form .comment-form-email  { margin-left:  0.45rem !important; }
}

/* --- Star-rating picker (the WC `p.stars` widget) ---
   WC's add-to-cart JS replaces <select#rating> with:
     <p class="stars"><span><a class="star-1">…</a>… × 5</span></p>
   Each <a> is rendered as a big SVG-backed star button. Filled
   state is propagated to preceding siblings via `:has()`. */
.ew-rating-field {
  display: flex; flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1.25rem !important;
}
.ew-rating-field select#rating { display: none; }

.ew-rating-field .stars,
#respond .ew-rating-field .stars {
  margin: 0 !important;
}
.ew-rating-field .stars > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.65rem;
  background: var(--paper-2);
  border: 1px dashed var(--edge-2);
  border-radius: 999px;
}
.ew-rating-field .stars a {
  display: inline-block;
  width: 36px; height: 36px;
  margin: 0 !important;
  padding: 0;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239A9A95' stroke-width='1.4' stroke-linejoin='round'><path d='m8 1.5 1.95 4.18 4.55.55-3.37 3.13.88 4.5L8 11.62 4 13.86l.88-4.5L1.5 6.23l4.55-.55z'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px 30px;
  transition: background-image var(--t-fast), transform var(--t-fast);
}
.ew-rating-field .stars a::before { content: none !important; }
.ew-rating-field .stars a:hover,
.ew-rating-field .stars a:has(~ a:hover),
.ew-rating-field .stars.selected a.active,
.ew-rating-field .stars.selected a:has(~ a.active) {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C9A44A' stroke='%23C9A44A' stroke-width='0.5' stroke-linejoin='round'><path d='m8 1.5 1.95 4.18 4.55.55-3.37 3.13.88 4.5L8 11.62 4 13.86l.88-4.5L1.5 6.23l4.55-.55z'/></svg>");
}
.ew-rating-field .stars a:hover { transform: scale(1.08); }
.ew-rating-field .stars a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Comment checkbox (cookies consent) */
.ew-review-form-wrap .comment-form-cookies-consent {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0.5rem 0 1.25rem;
  font-size: 0.88rem;
  color: var(--ink-3);
}
.ew-review-form-wrap .comment-form-cookies-consent input {
  width: 18px; height: 18px;
  accent-color: var(--red);
  margin: 0;
  flex-shrink: 0;
}
.ew-review-form-wrap .comment-form-cookies-consent label {
  margin: 0;
  line-height: 1.4;
}

/* Submit button — brand-red pill with arrow icon. Override WP's
   default `.submit` look. */
.ew-review-form-wrap p.form-submit { margin: 0 !important; }
.ew-review-form-wrap .submit,
.ew-review-form__submit,
.ew-review-form-wrap #submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem !important;
  background: var(--red) !important;
  color: white !important;
  font-family: var(--ff-body) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0 !important;
  border-radius: 999px !important;
  border: 0 !important;
  text-transform: none !important;
  cursor: pointer;
  box-shadow: 0 10px 22px -12px var(--red);
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.ew-review-form-wrap .submit:hover,
.ew-review-form__submit:hover,
.ew-review-form-wrap #submit:hover {
  background: var(--red-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -12px var(--red-deep);
}
.ew-review-form-wrap .submit:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.ew-review-form-wrap .submit svg { display: inline-block; }

/* Hide WP's "your email address will not be published" line — we use
   our own lede in the form head. */
.ew-review-form-wrap .comment-notes,
.ew-review-form-wrap .logged-in-as { display: none; }

/* =========================================================
   GLOBAL RESPONSIVE FIXES (≤720, ≤540, ≤360)
   Consolidated rules for narrow viewports across cart, checkout,
   account, single product, and reviews.  Keep additions here so
   the responsive surface is auditable in one place.
   ========================================================= */

/* ---------- Product loop grid — drop to 1 column on tiny screens
   so the 2-column at 360px doesn't crush the SKU/tag row. */
@media (max-width: 360px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Single product summary block ---------- */
@media (max-width: 540px) {
  .single-product .product {
    gap: 1.25rem;
    padding-block: 1rem;
    margin-bottom: 2rem;
  }
  .single-product .product .summary { gap: 1rem; }
  .single-product .product .summary .woocommerce-product-details__short-description {
    padding: 0.85rem 0.95rem;
    font-size: 0.92rem;
  }
  .single-product .product .product_meta { padding-top: 0.75rem; }
  .single-product form.cart { gap: 0.6rem; }
}

/* Stock indicator — allow full-width shrink on phones so the
   220px min doesn't force horizontal scroll. */
@media (max-width: 540px) {
  .ew-stock {
    min-width: 0;
    width: 100%;
    align-self: stretch;
  }
}

/* Gallery thumb strip — smaller, fewer-pixel thumbs at narrow. */
@media (max-width: 540px) {
  .flex-control-thumbs li {
    width: 48px !important; height: 48px !important;
  }
  .flex-control-thumbs { gap: 0.35rem; }
}

/* Gallery prev/next — smaller and inset less on phones so they
   don't crowd the photo. */
@media (max-width: 540px) {
  .ew-gallery__nav {
    width: 36px; height: 36px;
  }
  .ew-gallery__nav--prev { left: 0.4rem; }
  .ew-gallery__nav--next { right: 0.4rem; }
  .ew-gallery__nav svg { width: 14px; height: 14px; }
}

/* Quantity stepper — slightly tighter on narrow widths so the
   `[qty]  [Add to cart]` row fits without forced wrap on small
   phones; still wrap-friendly. */
@media (max-width: 540px) {
  .single-product form.cart .quantity,
  .single-product form.cart .ew-qty { height: 44px; }
  .single-product form.cart .quantity input.qty,
  .single-product form.cart .ew-qty__input { width: 48px; }
  .single-product form.cart .ew-qty__btn { width: 40px; }
  .single-product form.cart button.single_add_to_cart_button {
    /* `min-width: 200px` forced an awkward wrap on 320 px phones —
       stepper ~128 px + gap + 200 px button > viewport. Let the button
       flex to fill remaining row width with no minimum. */
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 1rem !important;
    font-size: 0.9rem !important;
  }
}

/* Variation chips — smaller min hit on narrow but still tappable. */
@media (max-width: 540px) {
  .ew-swatch {
    min-width: 48px; min-height: 40px;
    padding: 0.45rem 0.8rem;
    font-size: 0.88rem;
  }
  .ew-variation__head { gap: 0.35rem; }
  .ew-variation__value { font-size: 0.88rem; }
}

/* Review summary card stays one column already at ≤640px; just
   shrink padding further on tiny phones. */
@media (max-width: 360px) {
  .ew-reviews__summary { padding: 1rem; }
  .ew-reviews__score-num { font-size: 2.25rem; }
  .ew-review__card { padding: 0.85rem; gap: 0.65rem; }
  .ew-review-form-wrap { padding: 1rem; }
  .ew-rating-field .stars a { width: 32px; height: 32px; background-size: 26px 26px; }
}

/* Comment form fields — stack the two-column author/email rows on
   narrow widths so each gets full width. */
@media (max-width: 540px) {
  .woocommerce form .form-row.form-row-first,
  .woocommerce form .form-row.form-row-last,
  .woocommerce-page form .form-row.form-row-first,
  .woocommerce-page form .form-row.form-row-last {
    width: 100% !important;
    display: block !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

/* ---------- Cart row — responsive collapse ----------
   Desktop layout (above) uses 5 columns. As viewport narrows we
   restructure into a 2-row grid (thumb + name on top, controls
   below) and finally a 1-column stack on tiny phones. */
@media (max-width: 880px) {
  .woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item {
    grid-template-columns: 72px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "img name name"
      "img price subtotal"
      "qty qty qty" !important;
    gap: 0.5rem 0.85rem !important;
    padding: 0.85rem 2.25rem 0.85rem 0.85rem !important;
  }
  .woocommerce-cart .woocommerce-cart-form .product-thumbnail img {
    width: 72px !important; height: 72px !important; max-width: 72px !important;
  }
  .woocommerce-cart .woocommerce-cart-form .product-price,
  .woocommerce-cart .woocommerce-cart-form .product-quantity,
  .woocommerce-cart .woocommerce-cart-form .product-subtotal { text-align: left !important; }
  .woocommerce-cart .woocommerce-cart-form .product-subtotal { text-align: right !important; }
  .woocommerce-cart .woocommerce-cart-form .product-quantity {
    border-top: 1px dashed var(--edge);
    padding-top: 0.65rem !important;
    margin-top: 0.15rem !important;
  }
  .woocommerce-cart .woocommerce-cart-form .product-quantity::before {
    display: inline-block !important;
    margin-right: 0.5rem;
  }
  .woocommerce-cart .woocommerce-cart-form .product-quantity {
    display: flex !important; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  }
  .woocommerce-cart .woocommerce-cart-form .product-quantity .ew-qty { margin-left: auto; }
}

/* Older mobile cart rule removed — duplicated/conflicted with the
   newer 540 px block above (line ~1494) which uses a tighter 2-row
   grid and matches the actions-row left padding (0.85rem) so the
   stepper, coupon input, and Update cart all line up at the same X. */

/* Ultra-narrow phones (<360 px): the 540 px 2-row grid still works
   because everything inside it already collapses cleanly. No special
   override needed — keeping the same `0.85rem` left padding here
   maintains alignment with the actions-row controls below the items. */

/* ---------- Checkout — collapse two-column form-row pairs on
   narrow widths and tighten gaps. ---------- */
@media (max-width: 720px) {
  .woocommerce-checkout form.checkout { gap: 1.5rem; }
  .woocommerce-checkout #order_review { padding: 0; }
  .woocommerce-checkout-review-order { padding: 1.1rem; }
}

/* ---------- Account / Login — keep nav usable when stacked. The
   left nav becomes a top horizontal scroll-bar of links so the
   user doesn't have to scroll past it to reach content. */
@media (max-width: 720px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    border: 1px solid var(--edge);
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li {
    border-bottom: 0;
    border-right: 1px solid var(--edge);
    flex-shrink: 0;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border-right: 0; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    padding: 0.7rem 1rem;
    font-size: 0.88rem;
    white-space: nowrap;
  }
}

/* Login / register columns — already stack at 720px via
   `.u-columns.col2-set`; just tighten gap on tiny phones. */
@media (max-width: 540px) {
  .woocommerce .u-columns.col2-set,
  .woocommerce-page .u-columns.col2-set { gap: 1.25rem !important; }
}

/* ---------- Cart strip header — smaller on phones, no wrap. */
@media (max-width: 540px) {
  .ew-cart-strip {
    font-size: 0.7rem;
    padding: 0.65rem 0.85rem !important;
    margin-bottom: 0.85rem !important;
  }
  .ew-cart-strip__label { white-space: nowrap; }
}

/* ---------- Generic table cells (order summary, account orders) —
   horizontal scroll on small viewports rather than overlap. */
@media (max-width: 720px) {
  .woocommerce-MyAccount-content table.shop_table,
  .woocommerce-order-details table.shop_table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ---------- Tabs (description / additional / reviews) —
   horizontal scroll if labels overflow on narrow widths instead
   of wrapping into multiple lines. */
@media (max-width: 600px) {
  .woocommerce-tabs ul.tabs {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 1rem !important;
  }
  .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
  .woocommerce-tabs ul.tabs li { flex-shrink: 0; }
  .woocommerce-tabs ul.tabs li a {
    padding: 0.7rem 1rem !important;
    font-size: 0.9rem;
    white-space: nowrap;
  }
}

/* =========================================================
   FINAL RESPONSIVE PASS — concrete bugs at ≤540 / ≤360 that
   slipped past the earlier blocks. Stay scoped (no global resets
   here; reset lives in home.css).
   ========================================================= */

/* Container padding adapts to viewport — make sure WC's outer
   container doesn't have edge-hugging content. */
.ew-woo > .container,
main.ew-woo > .container { padding-inline: var(--container-pad); }

/* Product loop card — at very narrow widths, drop padding on
   title/price so the 2-col grid doesn't look cramped. */
@media (max-width: 540px) {
  ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product h2,
  ul.products li.product h3 {
    padding: 0.85rem 0.75rem 0.35rem !important;
    font-size: 0.92rem !important;
  }
  ul.products li.product .price {
    padding: 0 0.75rem 0.35rem !important;
    font-size: 1rem !important;
  }
  ul.products li.product .price del { font-size: 0.72rem; }
  ul.products li.product .button,
  .woocommerce ul.products li.product .button {
    margin: auto 0.75rem 0.75rem !important;
    padding: 0.55rem 0.85rem !important;
    font-size: 0.78rem !important;
  }
  ul.products li.product .star-rating { margin: 0 0.75rem 0.3rem !important; }
}

/* Single product summary — guard against horizontal overflow from
   long titles, SKU strings, or rich descriptions. */
.single-product .product .summary,
.single-product .product .summary > * { min-width: 0; max-width: 100%; }
.single-product .product .product_title { word-break: break-word; }
.single-product .product .product_meta > span { flex-wrap: wrap; }
.single-product .product .summary .woocommerce-product-details__short-description {
  overflow-wrap: anywhere;
}

/* Cart actions — coupon row stacks above the update button at narrow
   so the input has full width. */
@media (max-width: 540px) {
  .woocommerce .cart .actions { padding: 0.85rem !important; }
  .woocommerce .cart .actions .coupon {
    flex-wrap: wrap;
    width: 100%;
  }
  .woocommerce .cart .actions .coupon input.input-text {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .woocommerce .cart .actions .coupon button.button {
    width: 100%;
  }
  .woocommerce .cart .actions button[name="update_cart"] {
    width: 100%;
    margin-top: 0.5rem;
  }
}

/* Place-order button on checkout — already full-width via the rule
   at #place_order; just shrink its padding on small phones so the
   button doesn't dominate the screen. */
@media (max-width: 540px) {
  #payment .place-order button#place_order,
  button#place_order {
    padding: 1rem 1.25rem !important;
    font-size: 1rem !important;
  }
}

/* Order received page summary — switch to a single column on phones
   so the long `auto-fit minmax(160px, 1fr)` doesn't crush the cell
   labels. */
@media (max-width: 540px) {
  .woocommerce-order ul.order_details {
    grid-template-columns: 1fr !important;
    border-left: 1.5px solid var(--ink) !important;
  }
  .woocommerce-order ul.order_details li {
    border-left: 0 !important;
    border-bottom: 1px solid var(--edge) !important;
  }
  .woocommerce-order ul.order_details li:last-child { border-bottom: 0 !important; }
}

/* Notices — wrap CTA below text on narrow */
@media (max-width: 540px) {
  .woocommerce-message,
  .woocommerce-error,
  .woocommerce-info,
  .woocommerce-notice {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.85rem 1rem !important;
    font-size: 0.86rem;
  }
  .woocommerce-message .button,
  .woocommerce-info .button,
  .woocommerce-error .button {
    margin-left: 0;
    width: 100%;
  }
}

/* Login / register inputs — already full-width via `.form-row`; make
   sure heading and the submit button shrink. */
@media (max-width: 540px) {
  .woocommerce #customer_login h2,
  .woocommerce-page #customer_login h2 {
    font-size: 1.25rem;
  }
}

/* Single product short-description, prevent any pre/code block from
   overflowing the column. */
.single-product .summary pre,
.single-product .summary code,
.single-product .summary table { max-width: 100%; overflow-x: auto; }

/* Variations form — chips wrap and the reset link stays clickable.
   Each container in the chain needs `min-width: 0` so the chip flex
   row can actually shrink below its content size. Without it, the
   chip row sets the parent width and the page horizontally scrolls. */
.ew-variations,
.ew-variations > *,
.ew-variation,
.ew-variation > *,
.ew-swatches {
  min-width: 0;
  max-width: 100%;
}
.ew-swatches {
  flex-wrap: wrap;
  width: 100%;
}
.ew-swatch { max-width: 100%; }
.ew-swatch__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Reviews summary — score and breakdown should never overflow */
.ew-reviews,
.ew-reviews > * { min-width: 0; max-width: 100%; }
.ew-reviews__row { min-width: 0; }
.ew-reviews__row-bar { min-width: 0; }

/* Quantity stepper outside single product — give it sensible width
   so it fits in cart table cells on tablets too. */
@media (max-width: 540px) {
  .woocommerce-cart-form .ew-qty,
  table.shop_table .ew-qty { height: 36px; }
  .woocommerce-cart-form .ew-qty .ew-qty__btn,
  table.shop_table .ew-qty .ew-qty__btn { width: 32px; }
  .woocommerce-cart-form .ew-qty .ew-qty__input,
  table.shop_table .ew-qty .ew-qty__input { width: 44px; font-size: 0.92rem; }
}

/* Add-to-cart button at very narrow — drop the 200px min so 320px
   viewport doesn't force scroll. */
@media (max-width: 360px) {
  .single-product form.cart button.single_add_to_cart_button {
    min-width: 0;
    flex: 1 1 100%;
    margin-top: 0.35rem;
  }
}

/* Sale flash badge on product card — smaller on phones so it
   doesn't dominate. */
@media (max-width: 540px) {
  ul.products li.product .onsale,
  .woocommerce span.onsale {
    font-size: 0.62rem !important;
    padding: 3px 6px !important;
  }
}

/* WC page title (shop archive heading) — already styled but the
   default font-size is 2rem fixed; make it clamp. */
.woocommerce-products-header__title,
.page-title {
  font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
}

/* Form-row first/last — also stack at ≤720 not just ≤540, since
   between 540-720 the two-column form fields are getting squished. */
@media (max-width: 720px) and (min-width: 541px) {
  .woocommerce form .form-row.form-row-first,
  .woocommerce form .form-row.form-row-last,
  .woocommerce-page form .form-row.form-row-first,
  .woocommerce-page form .form-row.form-row-last {
    width: 100% !important;
    display: block !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

/* Cart strip — already shrinks at ≤540 ✓ */

/* "View Cart" / "Continue shopping" mini buttons inside notices */
@media (max-width: 540px) {
  .woocommerce-message .button { font-size: 0.78rem !important; padding: 0.5rem 0.85rem !important; }
}

/* =========================================================
   ROUNDED CORNERS PASS — subtle radius on every WC "box"
   that was previously square (single-product gallery, cart
   table, login forms, etc.). Minimalist 6-12 px values.
   ========================================================= */

/* Single product gallery wrapper + thumbnail strip */
.single-product .product .images,
.single-product .product .woocommerce-product-gallery {
  border-radius: 10px;
  overflow: hidden;
}
/* The gallery main image already has `aspect-ratio` controlled
   inside; round the outer wrapper. The flexslider viewport stays
   visually contained by the wrapper's overflow: hidden. */
.woocommerce-product-gallery .flex-viewport { border-radius: 8px; }
.flex-control-thumbs li { border-radius: 6px; overflow: hidden; }
.flex-control-thumbs li img { border-radius: 6px; }
.flex-control-thumbs li img.flex-active { border-radius: 6px; }

/* Gallery prev/next nav buttons are already round (50% via class).
   PhotoSwipe lightbox controls are managed by its own CSS — adding
   radius to the lightbox modal itself would clip the photo, which
   defeats the purpose of zoom; left as-is. */

/* Shop archive table (order summary, account orders) */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table { border-radius: 8px; overflow: hidden; }

/* Cart totals card (right column of the cart page) */
.cart_totals { border-radius: 10px; overflow: hidden; }

/* Checkout order review card */
.woocommerce-checkout-review-order { border-radius: 10px; }

/* Payment methods box */
#payment, .woocommerce-checkout-payment { border-radius: 10px; overflow: hidden; }
#payment .payment_box { border-radius: 6px !important; }

/* Customer login / register cards */
.woocommerce #customer_login form.login,
.woocommerce #customer_login form.register,
.woocommerce form.checkout_coupon,
.woocommerce form.lost_reset_password { border-radius: 10px; }

/* Account page navigation + content panes */
.woocommerce-account .woocommerce-MyAccount-navigation ul { border-radius: 8px; overflow: hidden; }
.woocommerce-account .woocommerce-MyAccount-content { border-radius: 8px; }

/* Order-received summary list */
.woocommerce-order ul.order_details { border-radius: 8px; overflow: hidden; }

/* Notices (success / error / info) */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-notice { border-radius: 0 6px 6px 0 !important; }

/* Form inputs that still ship square */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
  border-radius: 8px !important;
}

/* Tab panels under single product */
.woocommerce-tabs .panel { border-radius: 0 0 8px 8px; }

/* Sale flash (the small "Obral" badge on loop card images) */
ul.products li.product .onsale,
.woocommerce span.onsale { border-radius: 6px !important; }

/* "Empty cart" state */
.woocommerce-cart .cart-empty { border-radius: 8px; }

/* Search-suggest dropdown items (the autocomplete row) */
.search-suggest__link { border-radius: 6px; }

/* Stripe-like quantity input borders on single product (already
   has radius via `.ew-qty`) — also make the cart-column qty match. */
.woocommerce-cart-form .ew-qty,
table.shop_table .ew-qty { border-radius: 8px !important; }