/* ==========================================================
   SPARKS PRODUCT PAGE
   Loaded only on single product pages. Colours and fonts come from tokens.css.
   ========================================================== */

/* ==========================================================
   PRODUCT PAGE
   ========================================================== */
[hidden]{display:none!important}
:root{--header-h:77px;--subnav-h:56px}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--header-h) + var(--subnav-h) + 16px)}



/* top: gallery + summary */
.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);align-items:start;padding-block:1rem clamp(36px,5vw,64px)}

.summary__cat{display:inline-block;font-weight:700;color:var(--color-red-text);text-decoration:none;border-bottom:2px solid var(--color-red)}
.summary h1{margin-top:.7rem;font-size:clamp(1.7rem,3.5vw,2.6rem);font-stretch:116%}
.meta{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1.1rem;margin:1.1rem 0 0;padding:0}
.meta dt{color:var(--color-muted)}
.meta dd{margin:0;font-weight:600}
.meta a{text-decoration-color:var(--color-red);text-decoration-thickness:2px;text-underline-offset:4px}
.summary__lead{margin-top:1.1rem;max-width:36rem;color:var(--color-muted)}

.price-box{margin-top:1.5rem;padding:1.1rem 1.25rem;background:var(--color-surface);border-left:4px solid var(--color-red)}
.price-box__main{font:italic 800 clamp(1.45rem,3vw,1.95rem)/1.15 var(--font-heading);font-stretch:116%}
.price-box__sub{margin-top:.35rem;color:var(--color-muted);font-size:.97rem}
.status{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.1rem;font-weight:700}
.status__dot{width:13px;height:13px;border-radius:50%;border:2px solid var(--color-text);flex:none}
.status[data-status="available"] .status__dot{background:var(--color-text)}
.status[data-status="contact"] .status__dot{border-style:dashed}

.actions{display:grid;gap:.95rem;margin-top:1.5rem;max-width:25rem}
.actions .btn{width:100%;text-align:center}
.actions .btn>span{justify-content:center}
.actions__call{font-size:.98rem;color:var(--color-muted)}
.actions__call a{color:var(--color-text);font-weight:700;text-decoration-color:var(--color-red);text-decoration-thickness:2px;text-underline-offset:4px}
.no-checkout{margin-top:1.25rem;max-width:36rem;font-size:.92rem;color:var(--color-faint)}
.wa-preview{margin-top:1rem;max-width:36rem;font-size:.92rem;color:var(--color-muted)}
.wa-preview summary{cursor:pointer;font-weight:600;color:var(--color-text);padding:.4rem 0}
.wa-preview blockquote{margin:.5rem 0 0;padding:.9rem 1rem;background:var(--color-surface);border-left:4px solid var(--color-line);white-space:pre-line}

/* in-page navigation */
.subnav{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--header-h));z-index:40;background:var(--color-page);border-block:1px solid var(--color-line)}
.subnav ul{display:flex;gap:.15rem;list-style:none;margin:0;padding:0;overflow-x:auto;white-space:nowrap;scrollbar-width:thin}
.subnav a{display:block;min-height:var(--subnav-h);padding:1rem 1rem;font-weight:600;text-decoration:none;color:var(--color-muted);border-bottom:3px solid transparent;transition:color .15s ease}
.subnav a:hover{color:var(--color-text)}
.subnav a[aria-current="true"]{color:var(--color-text);border-bottom-color:var(--color-red)}

/* detail content */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,5vw,64px);align-items:start;padding-block:clamp(36px,5vw,64px)}
.block+.block{margin-top:clamp(36px,5vw,56px)}
.block h2{font-size:clamp(1.35rem,2.3vw,1.75rem);margin-bottom:1.1rem}
.block p+p{margin-top:1rem}
.block .muted-copy{color:var(--color-muted);max-width:44rem}

.features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 2rem}
.features li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem}
.features .icon{color:var(--color-red-text);margin-top:.2rem}
.features strong{display:block}
.features span{color:var(--color-muted);font-size:.98rem}

.specs{width:100%;border-collapse:collapse;border-top:1px solid var(--color-line)}
.specs th,.specs td{text-align:start;padding:.85rem 1rem;border-bottom:1px solid var(--color-line);vertical-align:top}
.specs th{width:38%;background:var(--color-surface);color:var(--color-muted);font-weight:600}
.specs td{color:var(--color-faint);font-style:italic}
.specs-note{margin-top:.9rem;font-size:.9rem;color:var(--color-faint)}

.uses{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0;padding:0}
.uses li{padding:.55rem 1.05rem;border:1px solid var(--color-line);border-radius:var(--radius);background:var(--color-surface);font-weight:600}

.docs{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-line)}
.doc{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;padding:1rem .25rem;border-bottom:1px solid var(--color-line)}
.doc .icon{width:2rem;height:2rem;color:var(--color-red-text);stroke-width:1.4}
.doc__name{font-weight:700}
.doc__meta{display:block;font-size:.9rem;color:var(--color-muted);font-weight:400}
.doc .btn{margin-inline-start:auto}
.docs-note{margin-top:.9rem;font-size:.9rem;color:var(--color-faint)}

.info-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.info-box{padding:1.25rem 1.35rem;background:var(--color-surface);border-top:3px solid var(--color-red)}
.info-box h3{margin-bottom:.6rem}
.info-box p{color:var(--color-muted);font-size:.98rem}

/* sticky enquiry card (desktop only) */
.side{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--header-h) + var(--subnav-h) + 20px);padding:1.35rem;background:var(--color-surface);border-top:3px solid var(--color-red)}
.side h2{font-size:1.2rem;font-stretch:112%}
.side__name{margin-top:.4rem;color:var(--color-muted);font-size:.98rem}
.side .status{margin-top:1rem}
.side .actions{margin-top:1.1rem}
.side__price{margin-top:.9rem;font-weight:700}
.side__price small{display:block;margin-top:.15rem;font-weight:400;color:var(--color-muted);font-size:.92rem}

.related{border-top:1px solid var(--color-line);background:var(--color-surface)}
.related .product{background:var(--color-page)}

@media (max-width:1020px){
  .pdp{grid-template-columns:1fr}
  .detail{grid-template-columns:1fr}
  .side{display:none}
}
@media (max-width:640px){
  .features{grid-template-columns:1fr}
  .info-pair{grid-template-columns:1fr}
  .specs th{width:44%}
  .specs th,.specs td{padding:.75rem .7rem}
  .doc .btn{margin-inline-start:0}
}

/* ---------- WooCommerce parts (gallery, Add to cart, variations, notices) ---------- */
.pdp .woocommerce-product-gallery{margin:0}
.pdp .woocommerce-product-gallery__wrapper{margin:0}
.pdp .woocommerce-product-gallery__image{overflow:hidden;border:1px solid var(--color-line);border-radius:var(--radius)}
.pdp .woocommerce-product-gallery img{display:block;width:100%;height:auto}
.pdp .flex-control-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0 0;padding:0;list-style:none}
.pdp .flex-control-thumbs li{float:none;width:auto;margin:0}
.pdp .flex-control-thumbs img{cursor:pointer;opacity:.65;border:2px solid var(--color-line);border-radius:var(--radius);transition:opacity .15s ease,border-color .15s ease}
.pdp .flex-control-thumbs img:hover,.pdp .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--color-red)}

.price-box__main .woocommerce-Price-amount{font:inherit}
.price-box__main del{opacity:.6;font-weight:600}
.price-box__main ins{text-decoration:none}

.pdp-wrap .pdp form.cart{display:flex;flex-wrap:wrap;align-items:stretch;gap:.75rem;margin:0}
.pdp-wrap .pdp .quantity .qty{width:5rem;min-height:48px;padding:.5rem;border:2px solid var(--color-field-border);border-radius:var(--radius);background:var(--color-page);color:var(--color-text);font:inherit;text-align:center}
.pdp-wrap .pdp button.single_add_to_cart_button.button.alt{
  flex:1 1 12rem;min-height:48px;padding:.85rem 1.6rem;
  background:var(--color-red);color:#fff;border:0;border-radius:0;
  font:700 1rem/1.2 var(--font-body);cursor:pointer;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
  transition:background-color .15s ease;
}
.pdp-wrap .pdp button.single_add_to_cart_button.button.alt:hover{background:var(--color-red-deep);color:#fff}
.pdp-wrap .pdp button.single_add_to_cart_button.button.alt:focus-visible{outline:none;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px var(--color-text)}
.pdp-wrap .pdp button.single_add_to_cart_button.button.alt.disabled{opacity:.5;cursor:not-allowed}
.pdp-wrap .pdp .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;gap:.75rem;width:100%}
.pdp-wrap .pdp table.variations{width:100%;margin:0 0 1rem;border-collapse:collapse}
.pdp-wrap .pdp table.variations th,.pdp-wrap .pdp table.variations td{padding:.4rem 0;text-align:start;vertical-align:middle}
.pdp-wrap .pdp table.variations select{min-height:48px;width:100%;padding:.5rem .75rem;border:2px solid var(--color-field-border);border-radius:var(--radius);background:var(--color-page);color:var(--color-text);font:inherit}
.pdp-wrap .pdp .reset_variations{font-size:.92rem}

.pdp-wrap .woocommerce-message,.pdp-wrap .woocommerce-info,.pdp-wrap .woocommerce-error{margin:1rem 0 0;padding:.9rem 1.1rem;list-style:none;background:var(--color-surface);border-left:4px solid var(--color-red);color:var(--color-text)}
.pdp-wrap .woocommerce-message a.button,.pdp-wrap .woocommerce-info a.button{float:none;display:inline-block;margin-inline-end:.75rem;padding:.4rem .9rem;background:var(--color-text);color:var(--color-page);border-radius:var(--radius);font-weight:700;text-decoration:none}

.admin-bar .subnav{top:calc(env(safe-area-inset-top,0px) + var(--header-h) + 32px)}
.admin-bar .side{top:calc(env(safe-area-inset-top,0px) + var(--header-h) + var(--subnav-h) + 52px)}
@media (max-width:782px){.admin-bar .subnav{top:calc(env(safe-area-inset-top,0px) + var(--header-h))}}
.specs-wrap table{width:100%;border-collapse:collapse;border-top:1px solid var(--color-line)}
.specs-wrap th,.specs-wrap td{padding:.85rem 1rem;border-bottom:1px solid var(--color-line);text-align:start;vertical-align:top}
.specs-wrap th{width:38%;background:var(--color-surface);color:var(--color-muted);font-weight:600}
.specs-wrap td p{margin:0}
@media (max-width:640px){.specs-wrap th{width:44%}.specs-wrap th,.specs-wrap td{padding:.75rem .7rem}}