/* ===========================================================
   WooCommerce compatibility bridge.
   Maps WooCommerce's default markup/classes (cart, checkout, my-account,
   order pages — none of which have dedicated template overrides in this
   theme) onto the existing design system, so those pages look on-brand
   without needing to override every individual WooCommerce template file.
   Only single-product/archive pages have full template overrides
   elsewhere (woocommerce/content-single-product.php, content-product.php,
   loop/*.php) because those needed structural changes, not just styling.
   =========================================================== */

/* --- Buttons --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  min-height: 44px;
  background: var(--color-accent);
  color: var(--color-accent-fg);
  border: 0;
  transition: transform .15s ease, background .2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  transform: translateY(-1px);
  color: var(--color-accent-fg);
  text-decoration: none;
}
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt {
  background: var(--color-fg);
}

/* The woo-razorpay plugin prints its "Pay for order" page buttons as raw
   <button id="btn-razorpay">/<button id="btn-razorpay-cancel"> with no
   class at all (hardcoded in the plugin's own PHP, not a template this
   theme overrides) — styled here by ID instead of editing the vendor
   plugin file, which would just be overwritten on its next update. */
#btn-razorpay,
#btn-razorpay-cancel {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.25rem; border-radius: var(--radius-md);
  font-weight: 600; font-size: .95rem; line-height: 1; min-height: 44px;
  border: 0; cursor: pointer; margin-right: .75rem;
  transition: transform .15s ease, background .2s ease;
}
#btn-razorpay { background: var(--color-accent); color: var(--color-accent-fg); }
#btn-razorpay:hover { transform: translateY(-1px); }
#btn-razorpay-cancel { background: transparent; color: var(--color-fg); border: 1px solid var(--color-border); }
#btn-razorpay-cancel:hover { background: var(--color-surface); }

/* --- Forms (checkout, my-account, addresses) --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container .select2-selection--single {
  padding: .75rem .9rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  font: inherit;
  color: inherit;
  min-height: 44px;
}
.woocommerce form .form-row label {
  font-size: .9rem;
  color: var(--color-muted);
}

/* --- Quantity stepper (buttons injected by Theme.qtyStepper) --- */
.woocommerce .quantity.qty-selector {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.woocommerce .quantity.qty-selector button {
  width: 40px;
  height: 40px;
  background: var(--color-surface);
}
.woocommerce .quantity.qty-selector input.qty {
  width: 44px;
  height: 40px;
  border: 0;
  text-align: center;
  background: transparent;
}

/* --- Tables (cart, order details) --- */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  text-align: left;
  padding: .75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.woocommerce table.shop_table th {
  color: var(--color-muted);
  font-weight: 500;
}

/* --- Notices --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  list-style: none;
  margin: 0 0 1.5rem;
}
.woocommerce-error {
  background: color-mix(in srgb, var(--color-sale) 10%, var(--color-bg));
  border-color: var(--color-sale);
}
/* WooCommerce's own plugin stylesheet (still enqueued for its base
   layout/forms) draws a checkmark/info icon via ::before, positioned for
   its own padding: 1em 2em 1em 3.5em (extra left space reserved for it) —
   the padding override above resets that back to a uniform 1rem/1.25rem
   with no reserved space, so the icon was overlapping the notice text
   instead of sitting beside it. No other notice in this theme uses an
   icon prefix (.spacivo-ma__notice, auth-pages errors, etc. are all flat
   text banners), so the icon is dropped entirely here for consistency
   rather than re-adding the space for it. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  content: none;
}

/* --- My Account navigation --- */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;
}
.woocommerce-MyAccount-navigation li a {
  display: inline-block;
  padding: .5rem .9rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: .9rem;
  font-weight: 500;
}
.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--color-accent);
  color: var(--color-accent-fg);
}
.woocommerce-MyAccount-content {
  max-width: 640px;
}

/* --- Pagination --- */
.woocommerce-pagination ul.page-numbers {
  display: flex;
  gap: .25rem;
  justify-content: center;
  padding: 1.5rem 0;
  list-style: none;
  margin: 0;
}
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
  padding: .45rem .75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.woocommerce-pagination .page-numbers .current {
  background: var(--color-accent);
  color: var(--color-accent-fg);
  border-color: transparent;
}

/* --- Single-product price/add-to-cart area (default WC markup, no template override) --- */
.woocommerce div.product form.cart {
  margin: 1rem 0;
}
/* Quantity + Add to Cart side by side, matching the reference design.
   :not(.variations_form) scopes this to SIMPLE products only, where
   quantity/button are direct siblings of form.cart with nothing else in
   between — applying display:flex to the variable-product form itself
   would wreck its vertical stack of attribute pills/price/offers/
   single_variation_wrap, so that case is handled by the wrapper WC
   already renders around just the quantity+button
   (.woocommerce-variation-add-to-cart) instead. */
.woocommerce div.product form.cart:not(.variations_form) {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.woocommerce-variation-add-to-cart {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.woocommerce div.product .price {
  font-size: 1.35rem;
  font-weight: 600;
}
.woocommerce div.product p.stock {
  font-size: .9rem;
  color: var(--color-muted);
}
.woocommerce div.product p.stock.out-of-stock {
  color: var(--color-sale);
}

/* --- Color swatches (variable product add-to-cart form override,
   woocommerce/single-product/add-to-cart/variable.php) --- */
.spacivo-color-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.spacivo-color-swatch {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--color-border);
  background-color: #eee; background-size: cover; background-position: center;
  cursor: pointer; padding: 0; transition: border-color .2s ease, transform .2s ease;
}
.spacivo-color-swatch:hover { transform: scale(1.08); }
.spacivo-color-swatch.is-selected { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 3px var(--color-accent); }

/* ===========================================================
   Redesigned product-detail-page (PDP): gallery, trust bar, countdown,
   inline rating, attribute pills, price extras, availability/Notify Me,
   Check Availability, Product Highlights table, and the "More Product
   Details" tabs (Description/Specifications/Care & Maintenance/Warranty/
   Returns/Quality Promise). Ratings & Reviews and Similar Products only
   get a thin wrapper/heading here — their actual card/bar styling lives
   in the spacivo-ratings / spacivo-similar-products plugins' own CSS.
   =========================================================== */

/* --- Gallery: thumbnail rail + main viewer --- */
.spacivo-pdp-gallery { display: flex; gap: 1rem; }
.spacivo-pdp-gallery__thumbs {
  display: flex; flex-direction: column; gap: .5rem; flex-shrink: 0; width: 72px;
  max-height: 520px; overflow-y: auto;
}
.spacivo-pdp-gallery__thumb {
  padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--color-surface); cursor: pointer; aspect-ratio: 1/1; flex-shrink: 0;
}
.spacivo-pdp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spacivo-pdp-gallery__thumb.is-active { border-color: var(--color-accent); }

/* overflow:hidden lives on .spacivo-pdp-gallery__main (the image box)
   rather than .spacivo-pdp-gallery__viewer — the zoom pane below is a
   sibling of .main, positioned outside its box (left: 100%), and needs
   .viewer to stay unclipped so it can render instead of being cut off,
   the same overflow-clipping issue hit elsewhere in this theme (headers/
   dropdowns with overflow-x:hidden also clipping overflow-y). */
.spacivo-pdp-gallery__viewer { position: relative; flex: 1; min-width: 0; }
.spacivo-pdp-gallery__main { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); cursor: zoom-in; }
.spacivo-pdp-gallery__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .2s ease; }
.spacivo-pdp-gallery__slide.is-active { opacity: 1; }
.spacivo-pdp-gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Hover-zoom lens + side pane (desktop, fine-pointer only — see
   initPdpZoom() in product.js) --- */
.spacivo-pdp-gallery__lens {
  position: absolute; width: 130px; height: 130px; pointer-events: none;
  border: 1px solid rgba(0,0,0,.25); background: rgba(255,255,255,.35); display: none; z-index: 3;
}
.spacivo-pdp-gallery__main.is-zooming .spacivo-pdp-gallery__lens { display: block; }
.spacivo-pdp-gallery__zoom-pane {
  display: none; position: absolute; top: 0; left: calc(100% + 1rem); width: 100%; height: 100%;
  border: 1px solid var(--color-border, #eee); border-radius: var(--radius-md);
  background-color: var(--color-surface); background-repeat: no-repeat; z-index: 5;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
@media (min-width: 1025px) {
  .spacivo-pdp-gallery__viewer.is-zooming .spacivo-pdp-gallery__zoom-pane { display: block; }
}

.spacivo-pdp-gallery__icon {
  position: absolute; z-index: 2; right: 1rem; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.9); border: none; display: flex; align-items: center; justify-content: center;
  color: var(--color-fg); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.12); transition: color .2s ease;
}
.spacivo-pdp-gallery__wishlist { top: 1rem; }
.spacivo-pdp-gallery__wishlist.is-active { color: var(--color-sale); }
/* .spacivo-pdp-gallery__share is wrapped in .spacivo-pdp-gallery__share-trigger
   (share popover anchor) — the absolute positioning that used to live on
   the button itself moves to that wrapper, and the button becomes a
   normal static child of it so it doesn't need repositioning of its own. */
.spacivo-pdp-gallery__share-trigger { position: absolute; z-index: 2; right: 1rem; top: 4.25rem; }
.spacivo-pdp-gallery__share-trigger .spacivo-pdp-gallery__share { position: static; }

.spacivo-pdp-gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.9); border: none;
  display: flex; align-items: center; justify-content: center; color: var(--color-fg); cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.spacivo-pdp-gallery__nav--prev { left: 1rem; }
.spacivo-pdp-gallery__nav--next { right: 1rem; }

.spacivo-pdp-gallery__badge {
  position: absolute; z-index: 2; left: 1rem; top: 1rem;
  background: #E8823A; color: #fff;
  font-weight: 700; font-size: .75rem;
  padding: .4rem .9rem; border-radius: var(--radius-sm);
}

.spacivo-pdp-gallery__zoom-hint {
  position: absolute; z-index: 2; right: 0; bottom: 0;
  background: rgba(0,0,0,.7); color: #fff; font-size: .75rem;
  padding: .5rem .9rem; border-top-left-radius: var(--radius-sm);
  border: none; cursor: pointer; font-family: inherit;
}

@media (max-width: 750px) {
  .spacivo-pdp-gallery { flex-direction: column-reverse; }
  .spacivo-pdp-gallery__thumbs { flex-direction: row; width: 100%; max-height: none; overflow-x: auto; }
  .spacivo-pdp-gallery__thumb { width: 56px; height: 56px; }
  /* No room for a side-by-side zoom pane on narrow screens, and there's
     no mouse to hover with anyway — clicking straight to the lightbox
     (which has its own zoom controls) covers this case instead. */
  .spacivo-pdp-gallery__zoom-pane { display: none !important; }
}

/* --- Fullscreen lightbox (opened by clicking the main image or the
   "Roll over image to zoom in" hint) --- */
.spacivo-pdp-lightbox { position: fixed; inset: 0; z-index: 2000; }
.spacivo-pdp-lightbox[hidden] { display: none; }
.spacivo-pdp-lightbox__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.92); }
.spacivo-pdp-lightbox__inner { position: relative; z-index: 1; display: flex; height: 100%; padding: 2rem; gap: 1.5rem; }

.spacivo-pdp-lightbox__thumbs {
  flex-shrink: 0; width: 76px; display: flex; flex-direction: column; gap: .6rem;
  overflow-y: auto;
}
.spacivo-pdp-lightbox__thumb {
  padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden;
  background: #1a1a1a; cursor: pointer; aspect-ratio: 1/1; flex-shrink: 0; opacity: .6; transition: opacity .2s ease;
}
.spacivo-pdp-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spacivo-pdp-lightbox__thumb.is-active { border-color: #fff; opacity: 1; }

.spacivo-pdp-lightbox__stage { position: relative; flex: 1; min-width: 0; }
.spacivo-pdp-lightbox__viewport { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.spacivo-pdp-lightbox__slide {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.spacivo-pdp-lightbox__slide.is-active { opacity: 1; pointer-events: auto; }
.spacivo-pdp-lightbox__slide img {
  max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .2s ease; transform: scale(var(--pdp-lightbox-zoom, 1));
  cursor: grab;
}

.spacivo-pdp-lightbox__close {
  position: absolute; top: 0; right: 0; z-index: 2; width: 44px; height: 44px; border-radius: 6px;
  background: rgba(255,255,255,.1); border: none; color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s ease;
}
.spacivo-pdp-lightbox__close:hover { background: rgba(255,255,255,.2); }

.spacivo-pdp-lightbox__zoom-controls {
  position: absolute; top: 0; left: 0; z-index: 2; display: flex; flex-direction: column; gap: .4rem;
}
.spacivo-pdp-lightbox__zoom-controls button {
  width: 36px; height: 36px; border-radius: 6px; background: rgba(255,255,255,.1); border: none;
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease;
}
.spacivo-pdp-lightbox__zoom-controls button:hover { background: rgba(255,255,255,.2); }

.spacivo-pdp-lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.1); border: none;
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease;
}
.spacivo-pdp-lightbox__nav:hover { background: rgba(255,255,255,.2); }
.spacivo-pdp-lightbox__nav--prev { left: .5rem; }
.spacivo-pdp-lightbox__nav--next { right: .5rem; }

@media (max-width: 750px) {
  .spacivo-pdp-lightbox__inner { padding: 1rem; gap: .75rem; flex-direction: column-reverse; }
  .spacivo-pdp-lightbox__thumbs { width: 100%; flex-direction: row; max-height: none; }
  .spacivo-pdp-lightbox__thumb { width: 52px; height: 52px; }
}

/* --- Full-width blocks below both PDP columns --------------------------
   .spacivo-pdp-layout (assets/css/theme.css) is a 2-column grid on
   desktop (minmax(0,1.3fr) minmax(0,1fr)) with .product__media set to
   position:sticky. These five blocks all print via
   woocommerce_after_single_product_summary — a hook that fires as a
   direct child of .spacivo-pdp-layout, after .product__media/.product__info but
   still inside the same grid container — so without an explicit
   grid-column span, CSS Grid's default auto-placement packs them into
   that same 2-column track instead of spanning full width: first block
   lands under .product__media (column 1), second under .product__info
   (column 2), third wraps back to column 1, and so on. That's what was
   squeezing "More Product Details" into the narrow left column instead of
   full width, and why the still-sticky gallery kept overlapping/scrolling
   behind that misplaced content instead of releasing normally — the
   sticky column's grid track never actually ended where it should have.
   Spanning all five explicitly across both columns fixes both: it makes
   them full width, and it correctly bounds .product__media's sticky
   area to just the first row, so it releases as soon as that row scrolls
   past. ------------------------------------------------------------- */
.spacivo-pdp-more-reasons,
.spacivo-pdp-more-details,
.spacivo-pdp-ratings,
.spacivo-pdp-similar,
.spacivo-pdp-description-images,
.up-sells {
  grid-column: 1 / -1;
}

/* --- Trust bar (under the gallery, left column) --- */
.spacivo-pdp-trust-bar {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
  background: var(--color-fg); color: #fff; border-radius: var(--radius-md);
  padding: 1.25rem; margin-top: 1rem;
}
.spacivo-pdp-trust-bar__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem; }
.spacivo-pdp-trust-bar__icon { color: var(--color-accent); }
.spacivo-pdp-trust-bar__icon img { display: block; width: 22px; height: 22px; object-fit: contain; }
.spacivo-pdp-trust-bar__label { font-size: .75rem; font-weight: 600; }

@media (min-width: 560px) {
  .spacivo-pdp-trust-bar { grid-template-columns: repeat(5, 1fr); }
}

/* --- Countdown --- */
.spacivo-pdp-countdown {
  display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  background: #F5E1E4;
  border-radius: var(--radius-md); padding: .6rem 1rem; margin-bottom: 1rem;
  font-size: .85rem; font-weight: 600; color: #6b3743;
}
.spacivo-pdp-countdown__unit {
  display: inline-flex; align-items: center; gap: .25rem;
  background: #C97F8D; color: #fff;
  padding: .25rem .55rem; border-radius: var(--radius-sm); font-weight: 700;
}

/* --- Rating pill + Sale/New badges row (rating first, then badges) ---
   .badge + .badge's margin-left (theme.css) is for badges used elsewhere
   without a flex gap; zeroed here so gap is the only spacing, keeping
   rating-to-badge and badge-to-badge gaps equal. */
.product__meta-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.product__meta-row .badge + .badge { margin-left: 0; }

/* --- Inline rating --- */
.spacivo-pdp-rating-inline {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--color-fg); text-decoration: none; font-size: .9rem;
}
.spacivo-pdp-rating-inline__value { font-weight: 700; }
.spacivo-pdp-rating-inline__star { color: #E8823A; }
.spacivo-pdp-rating-inline__count { color: var(--color-muted); }
.spacivo-pdp-rating-inline:hover { text-decoration: none; }

/* --- Attribute pills (Selected Finish / Wood / Color / Size) --- */
.spacivo-attribute-groups { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.spacivo-attribute-group__label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .5rem; }
.spacivo-attribute-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.spacivo-attribute-pill {
  padding: .55rem 1.1rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg); font-size: .9rem; cursor: pointer; transition: border-color .2s ease, background .2s ease;
}
.spacivo-attribute-pill:hover { border-color: var(--color-accent); }
.spacivo-attribute-pill.is-selected {
  border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg));
  font-weight: 600;
}

/* --- Price extras --- */
.product__price-label { margin: 1rem 0 .25rem; font-size: .85rem; color: var(--color-muted); }
.product__price { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: 0; }
.product__price-off { color: #1E8449; font-weight: 700; font-size: .95rem; }
.product__price-tax-note { color: var(--color-muted); font-size: .8rem; margin: .35rem 0 1rem; }

/* --- Availability + stock-aware Notify Me --- */
.spacivo-pdp-availability { font-size: .9rem; margin: 1rem 0 .5rem; }
.spacivo-pdp-availability__status { font-weight: 600; margin-left: .35rem; }
.spacivo-pdp-availability__status.is-out-of-stock { color: var(--color-sale); }

.spacivo-pdp-notify { margin-bottom: 1rem; }
.spacivo-pdp-notify__toggle,
.spacivo-pdp-notify__submit {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  padding: .9rem 1.25rem; border-radius: var(--radius-md); border: none; cursor: pointer;
  background: var(--color-accent); color: var(--color-accent-fg); font-weight: 700; font-size: .9rem;
  text-transform: uppercase; letter-spacing: .02em;
}
.spacivo-pdp-notify__form { display: flex; gap: .5rem; margin-top: 0; }
.spacivo-pdp-notify__input {
  flex: 1; padding: .75rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); font: inherit;
}
.spacivo-pdp-notify__form .spacivo-pdp-notify__submit { width: auto; flex-shrink: 0; padding: .75rem 1.25rem; }
.spacivo-pdp-notify__success { color: #1E8449; font-size: .9rem; }

/* --- Check Availability (pincode estimate) --- */
.spacivo-pdp-availability-check { margin: 1.25rem 0; }
.spacivo-pdp-availability-check__label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .5rem; }
.spacivo-pdp-availability-check__row { display: flex; gap: .5rem; max-width: 320px; }
.spacivo-pdp-availability-check__input {
  flex: 1; padding: .7rem 2.25rem .7rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font: inherit; background-repeat: no-repeat; background-position: right .75rem center;
}
.spacivo-pdp-availability-check__input.is-valid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E8449' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='8 12 11 15 16 9'/%3E%3C/svg%3E");
  background-size: 12px 12px; /* was rendering at its unconstrained natural size (~24px) — reduced by half */
}
.spacivo-pdp-availability-check__button {
  padding: .7rem 1.25rem; border: 1px solid var(--color-accent); border-radius: var(--radius-md);
  background: transparent; color: var(--color-accent); font-weight: 600; cursor: pointer;
}
.spacivo-pdp-availability-check__button:hover { background: var(--color-accent); color: var(--color-accent-fg); }
.spacivo-pdp-availability-check__button:disabled { opacity: .6; cursor: not-allowed; }
.spacivo-pdp-availability-check__result { margin: .6rem 0 0; font-size: .85rem; }
.spacivo-pdp-availability-check__result.is-error,
.spacivo-pdp-availability-check__result.is-unavailable { color: var(--color-sale); font-weight: 600; }

/* --- "Notify Me" request form, shown only when a checked pincode comes
   back unavailable --- */
.spacivo-pdp-availability-request { margin-top: .85rem; max-width: 380px; }
.spacivo-pdp-availability-request[hidden] { display: none; }
.spacivo-pdp-availability-request__intro { margin: 0 0 .5rem; font-size: .82rem; color: var(--color-muted); }
.spacivo-pdp-availability-request__row { display: flex; gap: .5rem; }
.spacivo-pdp-availability-request__input {
  flex: 1; padding: .7rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); font: inherit;
}
.spacivo-pdp-availability-request__feedback { margin: .5rem 0 0; font-size: .82rem; }
.spacivo-pdp-availability-request__feedback.is-error { color: var(--color-sale); font-weight: 600; }
.spacivo-pdp-availability-request__feedback.is-success { color: #1E8449; font-weight: 600; }

/* Add to Cart forced off (assets/js/product.js setAddToCartAvailable())
   once a checked pincode comes back undeliverable for this product. */
.spacivo-atc-unavailable { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* --- Product Highlights table --- */
.spacivo-pdp-highlights { margin: 1.5rem 0; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.spacivo-pdp-highlights__heading { font-size: 1.15rem; margin: 0 0 1rem; }
.spacivo-pdp-highlights__row {
  display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0;
  border-bottom: 1px solid var(--color-border); font-size: .9rem;
}
.spacivo-pdp-highlights__label { color: var(--color-muted); }
.spacivo-pdp-highlights__value { font-weight: 600; text-align: right; }
.spacivo-pdp-highlights__more {
  display: inline-block; margin-top: 1rem; color: #E8823A; font-weight: 600; text-decoration: none;
}

/* --- Discounts & Offers heading --- */
.spacivo-pdp-offers { margin: 1rem 0; }
.spacivo-pdp-offers__heading { font-size: .95rem; margin: 0 0 .5rem; }

/* --- "More Product Details" + tabs --- */
.spacivo-pdp-more-details { max-width: 900px; margin: 0; padding: 2.5rem 1.5rem; }
.spacivo-pdp-more-details__heading { margin: 0 0 .25rem; }
.spacivo-pdp-more-details__name { color: var(--color-muted); margin: 0 0 1.5rem; font-size: .9rem; }

.spacivo-pdp-tabs__nav {
  display: flex; flex-wrap: wrap; gap: 1.5rem; border-bottom: 1px solid var(--color-border); margin-bottom: 1.5rem;
}
.spacivo-pdp-tabs__tab {
  background: none; border: none; padding: 0 0 .75rem; font-size: .9rem; font-weight: 600;
  color: var(--color-muted); cursor: pointer; border-bottom: 2px solid transparent;
}
.spacivo-pdp-tabs__tab.is-active { color: #E8823A; border-bottom-color: #E8823A; }
.spacivo-pdp-tabs__panel { display: none; }
.spacivo-pdp-tabs__panel.is-active { display: block; }

/* --- More reasons to buy --- */
.spacivo-pdp-more-reasons { max-width: 900px; margin: 0; padding: 0 1.5rem 2.5rem; }
.spacivo-pdp-more-reasons__heading { margin: 0 0 1rem; font-size: 1.05rem; }
.spacivo-pdp-more-reasons__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.spacivo-pdp-more-reasons__card {
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: .75rem .9rem;
}
.spacivo-pdp-more-reasons__icon { color: var(--color-accent); flex-shrink: 0; }
.spacivo-pdp-more-reasons__label { font-size: .85rem; font-weight: 600; color: var(--color-fg); }

@media (min-width: 560px) {
  .spacivo-pdp-more-reasons__grid { grid-template-columns: repeat(4, 1fr); }
}

.spacivo-pdp-spec-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.spacivo-pdp-spec-table th,
.spacivo-pdp-spec-table td { text-align: left; padding: .6rem 0; border-bottom: 1px solid var(--color-border); }
.spacivo-pdp-spec-table th { width: 40%; color: var(--color-muted); font-weight: 500; }

/* --- Ratings / Similar Products / Description Images wrappers ---
   margin:0, not margin:0 auto — .spacivo-pdp-similar/-description-images
   used auto-centering, which floats them inward whenever the parent grid
   column is wider than 1400px, misaligning their left edge against
   sibling full-width blocks like WooCommerce's own .up-sells ("You may
   also like…") that have no such max-width and sit flush against the
   page's normal padding instead. */
.spacivo-pdp-ratings,
.spacivo-pdp-similar,
.spacivo-pdp-description-images { max-width: 1400px; margin: 0; padding: 2rem 1.5rem; }
.spacivo-pdp-ratings__heading,
.spacivo-pdp-similar__heading,
.spacivo-pdp-description-images__heading { margin: 0 0 1.25rem; }

/* --- Checkout deliverability conflict modal (assets/js/checkout-deliverability.js) --- */
.spacivo-deliverability-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.spacivo-deliverability-modal[hidden] { display: none; }
.spacivo-deliverability-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.spacivo-deliverability-modal__box {
  position: relative; z-index: 1; background: #fff; border-radius: var(--radius-md);
  max-width: 440px; width: calc(100% - 2rem); padding: 1.75rem; box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.spacivo-deliverability-modal__title { margin: 0 0 .6rem; font-size: 1.1rem; color: var(--color-fg); }
.spacivo-deliverability-modal__intro { margin: 0 0 .75rem; font-size: .88rem; color: var(--color-muted); }
.spacivo-deliverability-modal__list { margin: 0 0 1.5rem; padding-left: 0; list-style: none; font-size: .9rem; color: var(--color-fg); }
.spacivo-deliverability-modal__item {
  display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--color-border);
}
.spacivo-deliverability-modal__item:last-child { border-bottom: none; }
.spacivo-deliverability-modal__item-img {
  width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); flex: 0 0 auto; background: #f3f1ed;
}
.spacivo-deliverability-modal__item-name { flex: 1; line-height: 1.3; }
.spacivo-deliverability-modal__item-remove {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--color-border);
  background: transparent; color: var(--color-fg); cursor: pointer; font-size: 1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.spacivo-deliverability-modal__item-remove:hover { background: #fbeceb; border-color: #d9534f; color: #d9534f; }
.spacivo-deliverability-modal__item-remove:disabled { opacity: .5; cursor: not-allowed; }
.spacivo-deliverability-modal__actions { display: flex; gap: .75rem; }
.spacivo-deliverability-modal__button {
  flex: 1; padding: .75rem 1rem; border-radius: var(--radius-md); font-weight: 600; font-size: .88rem; cursor: pointer;
}
.spacivo-deliverability-modal__button--primary { background: var(--color-accent); color: var(--color-accent-fg); border: 1px solid var(--color-accent); }
.spacivo-deliverability-modal__button--primary:hover { opacity: .9; }
.spacivo-deliverability-modal__button--primary:disabled { opacity: .6; cursor: not-allowed; }
.spacivo-deliverability-modal__button--secondary { background: transparent; color: var(--color-fg); border: 1px solid var(--color-border); }

/* --- WooCommerce Block Checkout: order summary on the left, contact/
   billing/payment fields on the right ---
   The Checkout block's two panes (packages/base-components/sidebar-layout)
   render as flex children in DOM order — form fields first, order summary
   second — with WooCommerce's own CSS giving each an implicit `order`. We
   never touch the block's markup (it's built by WooCommerce Blocks/React,
   not this theme), just override which side each visually lands on via
   `order`, which wins over source order in flexbox regardless of what
   WooCommerce's own default order values are.

   The block's own wrapper also ships with a left indent that the page's
   "Checkout" <h1> doesn't have (WooCommerce Blocks reserve column gutters
   even before the layout is split into panes) — zeroed out below so the
   whole block starts flush with the heading instead of indented under it.

   IMPORTANT: everything that changes the two panes' widths/order is scoped
   to min-width: 900px. A first attempt applied unconditionally and badly
   overlapped text at narrower widths — WooCommerce's own mobile layout
   for this block relies on `position: sticky` on the sidebar pane for its
   collapsible order-summary behavior, and overriding widths/order without
   also neutralizing that sticky positioning made the two panes render on
   top of each other instead of stacking. Leaving mobile/tablet completely
   untouched avoids fighting that built-in behavior; only the genuine
   side-by-side desktop layout is being customized here. */
.wp-block-woocommerce-checkout,
.wc-block-checkout {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}
@media (min-width: 900px) {
  .wc-block-checkout .wc-block-components-sidebar-layout,
  .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 2.5rem !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
  .wc-block-checkout .wc-block-components-sidebar,
  .wc-block-checkout .wc-block-checkout__sidebar,
  .wp-block-woocommerce-checkout .wc-block-components-sidebar,
  .wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
    order: -1;
    /* A fixed width here (rather than a % of the now much wider row —
       see the .richtext override below) keeps Order Summary at roughly
       its current size instead of stretching it further; every extra
       pixel reclaimed from removing the wasted space goes to Contact
       Information's flex: 1 below instead. */
    flex: 0 0 520px !important;
    max-width: 520px !important;
    width: 520px !important;
    position: static !important;
    top: auto !important;
    margin-left: 0 !important;
  }
  .wc-block-checkout .wc-block-components-main,
  .wc-block-checkout .wc-block-checkout__main,
  .wp-block-woocommerce-checkout .wc-block-components-main,
  .wp-block-woocommerce-checkout .wc-block-checkout__main {
    order: 1;
    flex: 1 1 auto !important;
    max-width: none !important;
    width: auto !important;
    position: static !important;
    top: auto !important;
  }
}

/* The actual source of the wasted left-hand gap: page.php wraps every
   WooCommerce shortcode/block page (Cart, Checkout, My Account) — plus
   ordinary content pages like FAQ/About — in the same .richtext class,
   which theme.css caps at max-width: 820px + margin-inline: auto for
   readable blog/FAQ prose. The Checkout page's H1 sits OUTSIDE .richtext
   (full .container width), so it visually starts further left than the
   820px-capped, auto-centered block content next to/under it. Undoing
   that cap only on the checkout page (via WooCommerce's own body class,
   so FAQ/About/etc. keep their intentional reading width) lets the
   Checkout block use the full .container width the heading already
   does. */
body.woocommerce-checkout .richtext {
  max-width: 100% !important;
  margin-inline: 0 !important;
}
.spacivo-deliverability-modal__button--secondary:hover { background: var(--color-surface); }