.sky-single-product{padding-block:var(--sp-4) 0;}
/* The product page (especially the 3D customiser) reads better noticeably
   wider than the sitewide 1320px content container, so it gets its own,
   larger cap instead of var(--container) — still a 2-column layout, just
   stretched closer to the edges of the viewport on large screens. */
.sky-single-product .sky-breadcrumbs{max-width:var(--container-product);margin-inline:auto;padding-inline:var(--sp-4);}

.sky-single-product__grid{
  max-width:var(--container-product);margin-inline:auto;padding-inline:var(--sp-4);
  display:grid;grid-template-columns:1.15fr 1fr;gap:var(--sp-6);align-items:start;
}
/* WooCommerce core ships `.summary{width:48%;float:left}` for its own
   classic float-based 2-column layout (paired with `div.images`, which
   our gallery doesn't use, so only this side was ever affected). Our
   div also carries the literal `summary` class WooCommerce targets, so
   that core rule silently shrank the grid item to 48% of its track
   instead of filling it — float itself is ignored in a grid, but the
   explicit width isn't. Reset both so the grid's own track width wins. */
.sky-single-product__grid > .sky-single-product__summary,
.sky-single-product__grid > .sky-single-product__gallery{
  /* !important because WooCommerce's own selector here
     (.woocommerce div.product div.summary — 3 classes + 2 elements) is
     more specific than a class-only override can beat without it. */
  width:auto !important; float:none !important;
}
/* Boxxerworld-style app layout: a narrower step sidebar on the LEFT,
   the big 3D canvas on the RIGHT. The gallery/summary markup order in
   content-single-product.php stays exactly as WooCommerce's own hooks
   need it (gallery hook fires before the summary hook) — this just
   visually reorders the two columns with CSS `order`, so the
   devexhub_3d_customiser plugin's DOM/JS assumptions are untouched. */
.sky-single-product__grid--custom{
  grid-template-columns:1fr 420px;
  align-items:stretch;
}
.sky-single-product__grid--custom .sky-single-product__gallery{order:1;}
.sky-single-product__grid--custom .sky-single-product__summary{order:2;}
@media (max-width:1024px){
  .sky-single-product__grid{grid-template-columns:1fr;}
  .sky-single-product__grid--custom .sky-single-product__summary,
  .sky-single-product__grid--custom .sky-single-product__gallery{order:initial;}
}

/* Standard WooCommerce gallery, restyled */
.sky-single-product__gallery .woocommerce-product-gallery{position:relative;}
.sky-single-product__gallery .woocommerce-product-gallery__wrapper{border-radius:var(--radius-m);overflow:hidden;background:var(--c-paper-2);}
.sky-single-product__gallery .woocommerce-product-gallery__image img{width:100%;height:auto;object-fit:cover;aspect-ratio:4/5;}
.sky-single-product__gallery .flex-control-thumbs{
  display:flex;gap:.6rem;margin-top:.75rem;padding:0;list-style:none;flex-wrap:wrap;
}
.sky-single-product__gallery .flex-control-thumbs li{width:76px;}
.sky-single-product__gallery .flex-control-thumbs img{
  border-radius:var(--radius-s);opacity:.6;cursor:pointer;transition:opacity var(--dur) var(--ease);aspect-ratio:1;object-fit:cover;
}
.sky-single-product__gallery .flex-control-thumbs img.flex-active,
.sky-single-product__gallery .flex-control-thumbs img:hover{opacity:1;}

/* Live 3D viewer (devexhub_3d_customiser) — light integration spacing only,
   its own plugin CSS owns the internal styling. The plugin's own CSS hard-
   caps the canvas + options panel at max-width:560px (its default, single-
   column layout), which fought our wider product grid — the canvas stayed
   tiny and centered even once the column around it had room. Overriding
   that here lets it fill the actual gallery column width instead. */
.sky-single-product__gallery #devexhub-3d-customiser-gallery,
.sky-single-product__gallery #devexhub-3d-customiser-panel,
.sky-single-product__gallery .devexhub-3d-customiser-wrap{max-width:none;}
.sky-single-product__gallery #devexhub-3d-customiser-panel,
.sky-single-product__gallery .devexhub-3d-customiser-wrap{margin-top:var(--sp-3);}

/* App-style customiser page: canvas fills the tall right column instead
   of the plugin's default square aspect-ratio, and the step sidebar
   (left) scrolls independently and stays in view while you scroll the
   canvas — same idea as the Boxxerworld reference. Scoped to >=1025px
   only: below that, the layout stacks to one column and the 3D
   customiser plugin's own mobile CSS (sticky canvas pinned to the top
   of the screen while you scroll the options below it, plus a fixed
   Total + Add to Cart bar) takes over — this rule used to also apply
   under 1024px and, being more specific than the plugin's own #id
   selectors, silently overrode that mobile behavior back to a plain
   static square canvas, which is what forced shoppers to scroll all
   the way back up to see a color/option change take effect. */
@media (min-width:1025px){
  .sky-single-product__grid--custom .sky-single-product__gallery #devexhub-3d-customiser-canvas-wrap{
    aspect-ratio:auto;
    height:calc(100vh - var(--header-h) - var(--sp-5));
    min-height:480px;
  }
  .sky-single-product__grid--custom .sky-single-product__summary{
    position:sticky;
    top:calc(var(--header-h) + var(--sp-3));
    align-self:start;
    max-height:calc(100vh - var(--header-h) - var(--sp-4));
    overflow-y:auto;
    padding-right:2px;
  }
}
@media (max-width:1024px){
  .sky-single-product__grid--custom .sky-single-product__summary{
    position:static; max-height:none; overflow-y:visible;
  }
}

/* Summary column */
.sky-single-product__summary .product_title{font-size:var(--fs-h2);margin-bottom:.5rem;}
.sky-single-product__summary .price{
  font-family:var(--font-body);font-size:1.5rem;font-weight:700;color:var(--c-navy-900);display:block;margin-bottom:var(--sp-2);
}
.sky-single-product__summary .price del{color:var(--c-muted-2);font-size:1.1rem;margin-right:.5rem;}
.sky-single-product__summary .price ins{text-decoration:none;}
.sky-single-product__summary .star-rating{margin-bottom:var(--sp-2);color:var(--c-purple);}
.sky-single-product__summary .woocommerce-product-details__short-description{color:var(--c-muted);margin-bottom:var(--sp-3);}

.sky-single-product__summary table.variations{width:100%;margin-bottom:var(--sp-3);}
.sky-single-product__summary table.variations td{padding:.5rem 0;}
.sky-single-product__summary table.variations select{
  width:100%;padding:.85rem 1rem;border:1px solid var(--c-border);border-radius:var(--radius-s);background:#fff;
}
.sky-single-product__summary .reset_variations{display:inline-block;margin-top:.4rem;font-size:.8rem;color:var(--c-muted);}

.sky-single-product__summary .quantity{display:inline-block;margin-right:var(--sp-2);}
.sky-single-product__summary .quantity .qty{
  width:5rem;padding:.9rem;border:1px solid var(--c-border);border-radius:var(--radius-s);text-align:center;font-weight:600;
}
.sky-single-product__summary .cart{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-3) 0;}
.sky-single-product__summary button.single_add_to_cart_button{
  flex:1; min-width:200px;
  font-family:var(--font-body);font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
  padding:1.1em 2em;border-radius:var(--radius-s);color:#fff;background:var(--grad-brand);
  background-size:160% 160%; transition:background-position var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  box-shadow:0 8px 24px -10px rgba(139,36,227,.55);
}
.sky-single-product__summary button.single_add_to_cart_button:hover{background-position:100% 50%;}
.sky-single-product__summary .product_meta{font-size:.82rem;color:var(--c-muted);border-top:1px solid var(--c-border);padding-top:var(--sp-2);margin-top:var(--sp-2);}
.sky-single-product__summary .product_meta a{color:var(--c-navy-900);}

.woocommerce-variation-availability .stock,
.sky-single-product__summary p.stock{font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;}
.sky-single-product__summary p.stock.in-stock{color:var(--c-success);}
.sky-single-product__summary p.stock.out-of-stock{color:#B3261E;}

/* Product info accordion container width */
.sky-single-product__info{padding-block:var(--sp-6);}

/* Related products */
.sky-related{border-top:1px solid var(--c-border);}
.sky-related__title{margin-bottom:var(--sp-4);}
.sky-related ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);list-style:none;padding:0;}
@media (max-width:1024px){ .sky-related ul.products{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .sky-related ul.products{grid-template-columns:1fr;} }

.sky-inline-customiser-promo{margin-top:var(--sp-5);}