/* ===========================================================
   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 { top: 4.25rem; }

.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 --------------------------
   .product (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 .product, 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 {
  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");
}
.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; }

/* --- 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 --- */
.spacivo-pdp-ratings { max-width: 1400px; margin: 0; padding: 2rem 1.5rem; }
.spacivo-pdp-similar,
.spacivo-pdp-description-images { max-width: 1400px; margin: 0 auto; padding: 2rem 1.5rem; }
.spacivo-pdp-ratings__heading,
.spacivo-pdp-similar__heading,
.spacivo-pdp-description-images__heading { margin: 0 0 1.25rem; }