/* ==========================================================================
   Single product — gallery, buy box, tabs, related
   ========================================================================== */

.single-wrap{background:var(--bg)}
.phero{margin-bottom:14px}
/* Product layout grid. Mobile: gallery → buy box → description → sidebar.
   Desktop: LEFT column flows gallery then description (no gap), RIGHT column
   holds the buy box then the sidebar. */
.pd-layout{display:grid;gap:24px 32px;grid-template-columns:1fr;
  grid-template-areas:"gallery" "buybox" "desc" "side"}
.pd-gallery{grid-area:gallery;min-width:0}
.pd-buybox{grid-area:buybox;min-width:0}
.pd-desc{grid-area:desc;min-width:0}
.pd-side{grid-area:side;min-width:0}
@media (min-width:992px){
  .pd-layout{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start;
    grid-template-areas:
      "gallery buybox"
      "desc    buybox"
      "desc    side"}
}

/* WooCommerce's own stylesheet lays single products out with floats
   (`div.summary{float:right;width:48%}`). The Bootstrap row already owns that
   split, so those floats must be unwound or the buy box renders at 48% of its
   column.
   The `#content` variants are not optional: WooCommerce ships the same rule
   prefixed with `#content`, and this theme's <main id="content"> makes that
   ID-specificity selector match. Overriding without it silently loses. */
.woocommerce #content div.product div.summary,
.woocommerce #content div.product div.images,
.woocommerce-page #content div.product div.summary,
.woocommerce-page #content div.product div.images,
.woocommerce div.product div.summary,
.woocommerce div.product div.images,
.woocommerce-page div.product div.summary,
.woocommerce-page div.product div.images{float:none;width:auto;margin-bottom:0}
.woocommerce #content div.product .woocommerce-tabs,
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells{width:auto;float:none}
.woocommerce div.product form.cart{margin-bottom:0}
.woocommerce div.product p.price,
.woocommerce div.product span.price{color:var(--red);font-size:inherit}

/* ------------------------------------------------------------- gallery ---- */
.gal{position:relative}
.gal-main{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  aspect-ratio:4/3;box-shadow:var(--shadow)}
.gal-main img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;transition:transform .5s ease}
.gal-main:hover img{transform:scale(1.06)}
.gal-badges{position:absolute;top:14px;left:14px;z-index:3;display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:42px;height:42px;border-radius:50%;
  border:none;background:rgba(255,255,255,.92);box-shadow:0 3px 12px rgba(0,0,0,.18);cursor:pointer;display:grid;
  place-items:center;transition:.16s;padding:0}
.gal-nav:hover{background:var(--red)}
.gal-nav svg{width:18px;height:18px;stroke:var(--ink);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.gal-nav:hover svg{stroke:#fff}
.gal-nav.p{left:12px}
.gal-nav.n{right:12px}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-top:11px}
.thumbs button{padding:0;border:2px solid var(--line);background:#fff;border-radius:9px;overflow:hidden;cursor:pointer;
  aspect-ratio:1;transition:.16s}
.thumbs button:hover{border-color:#c9ced6}
.thumbs button.on{border-color:var(--red);box-shadow:0 0 0 3px rgba(226,33,28,.13)}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* share row */
.share{display:flex;gap:9px;align-items:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
  flex-wrap:wrap}
.share span{font-size:13.5px;color:var(--muted);font-weight:700}
.share a{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--muted);transition:.15s}
.share a:hover{background:var(--red);border-color:var(--red);color:#fff}
.share svg{width:15px;height:15px;fill:currentColor}

/* ------------------------------------------------------------- buy box ---- */
.buybox{background:none;border:0;padding:0;box-shadow:none}
.buybox .cats{font-size:13.5px;text-transform:uppercase;letter-spacing:1px;color:var(--red);font-weight:800;margin-bottom:8px}
.buybox .product_title{font-size:clamp(22px,3vw,31px);font-weight:900;line-height:1.2;margin-bottom:11px}

.rate{display:flex;align-items:center;gap:9px;margin-bottom:16px;flex-wrap:wrap}
.rate .stars{display:inline-flex;gap:2px}
.rate .stars svg{width:16px;height:16px;fill:#fbbc04;display:block}
.rate small{color:var(--muted);font-size:14px}
.rate small a{color:var(--red);text-decoration:underline}
.rate .sold{color:var(--muted);font-size:14px;border-left:1px solid var(--line);padding-left:9px}

.pricebox{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:18px;
  box-shadow:var(--shadow)}
.pricerow{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pricerow .now{font-size:clamp(28px,4vw,38px);font-weight:900;color:var(--red);line-height:1}
.pricerow .now .woocommerce-Price-amount{font-weight:900}
.pricerow s{color:#aeb3ba;font-size:17px}
.pricerow .off{background:#e8f6ee;color:var(--ok);font-weight:800;font-size:13.5px;padding:4px 9px;border-radius:5px}
.finance{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;font-size:13px;font-weight:800;
  color:var(--ink);background:linear-gradient(180deg,#fff,#fff6da);border:1px solid rgba(255,194,14,.9);
  border-radius:100px;padding:6px 14px;animation:finance-glow 1.9s ease-in-out infinite}
.finance b{color:var(--ink)}
@keyframes finance-glow{
  0%,100%{box-shadow:0 0 4px rgba(255,194,14,.5),0 0 10px rgba(255,194,14,.30)}
  50%{box-shadow:0 0 10px rgba(255,194,14,.95),0 0 22px rgba(255,194,14,.6),0 0 34px rgba(226,33,28,.28)}
}
@media (prefers-reduced-motion:reduce){.finance{animation:none;box-shadow:0 0 9px rgba(255,194,14,.6)}}

.shortdesc{font-size:14.5px;color:#4a5058;line-height:1.62;margin-bottom:18px}

/* flat inline row, no card chrome */
.trust3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.trust3 .t{display:flex;align-items:flex-start;gap:9px;min-width:0}
@media (max-width:420px){.trust3{grid-template-columns:1fr 1fr}}
.trust3 .t .ic{width:20px;height:20px;stroke:var(--red);stroke-width:1.7;flex:none}
.trust3 .t b{display:block;font-size:13.5px;color:var(--ink);line-height:1.25}
.trust3 .t small{font-size:11px;color:var(--muted)}

.badges{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:4px 0 20px}
.badges img{height:104px;width:auto}

.call1300{display:inline-flex;align-items:center;gap:13px;margin-bottom:20px;transition:.16s}
.call1300:hover .n{color:var(--red-dark)}
.call1300 .ic{width:52px;height:52px;border-radius:50%;background:var(--red);display:grid;place-items:center;flex:none}
.call1300 .ic .ic{width:26px;height:26px;background:none;border-radius:0;color:#fff;stroke:#fff}
.call1300 .n{font-size:26px;font-weight:900;color:var(--red);line-height:1;display:block}
.call1300 small{display:block;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-top:3px}

.rego-banner{background:var(--red);color:#fff;text-align:center;font-weight:800;font-size:15.5px;padding:14px;
  border-radius:10px;margin-bottom:18px;letter-spacing:.3px;
  display:block;width:100%;border:0;font-family:inherit;cursor:pointer;transition:background .15s}
.rego-banner:hover{background:var(--red-dark)}
.rego-banner:focus-visible{outline:3px solid rgba(226,33,28,.4);outline-offset:2px}
/* brief highlight when a jump link lands on a section */
.tdu-flash{animation:tdu-flash 1.5s ease;border-radius:10px}
@keyframes tdu-flash{0%,100%{background-color:transparent}30%{background-color:rgba(255,209,0,.28)}}

/* WooCommerce Product Add-ons (e.g. the required Build Time field) inside the
   theme buy box, styled to sit with the extras panel. */
.tdu-wc-addons{background:#f2f3f5;border-radius:12px;padding:4px 22px 16px;margin-bottom:18px}
.tdu-wc-addons:empty{display:none}
.tdu-wc-addons .wc-pao-addon-name,.tdu-wc-addons .product-addon h3,.tdu-wc-addons label{
  font-size:14px;font-weight:700;color:var(--ink)}
.tdu-wc-addons .wc-pao-addon{padding:14px 0;border-bottom:1px solid var(--line)}
.tdu-wc-addons .wc-pao-addon:last-child{border-bottom:none}
/* When it lives inside the options panel (moved up under QLD Rego), drop the
   box and match the group headings so it reads as another section. */
.extras .tdu-wc-addons{background:transparent;padding:0;margin:0}
.extras .tdu-wc-addons .wc-pao-addon{padding:0;border:0}
.extras .tdu-wc-addons .wc-pao-addon-name{font-size:14px;text-transform:uppercase;letter-spacing:1px;
  color:var(--red);font-weight:700;margin:18px 0 12px}
.extras .tdu-wc-addons .wc-pao-addon-name .required{color:var(--red)}
.tdu-wc-addons .wc-pao-required-indicator{color:var(--red);font-weight:800}
.tdu-wc-addons select,.tdu-wc-addons input[type=text],.tdu-wc-addons textarea{
  width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;
  font-family:inherit;background:#fff;margin-top:8px}
/* WC Product Add-ons Build Time rendered as a selectable pill to match. */
.tdu-wc-addons .wc-pao-addon-wrap{margin:0}
/* display:flex must beat the WC Product Add-ons plugin CSS, which forces
   `.wc-pao-addon-wrap label{display:inline!important}` — inline makes the pill
   border wrap raggedly across two lines on narrow screens. */
.tdu-wc-addons .wc-pao-addon-wrap label{display:flex!important;width:100%;gap:11px;align-items:flex-start;
  font-weight:600;font-size:14.5px;line-height:1.35;border:0;border-radius:0;
  padding:8px 0;cursor:pointer;position:relative;margin:0;
  transition:border-color .12s,background .12s,box-shadow .12s}
/* Visible checkbox square — the Build Time acknowledgment is required, so it has
   to read as something you tick. Without it the box looked like plain info text
   and buyers hit "Build Time is a required field" at add-to-cart. */
.tdu-wc-addons .wc-pao-addon-wrap label::before{content:"";flex:0 0 auto;width:20px;height:20px;
  border:2px solid #b9c0c9;border-radius:5px;background:#fff center/12px 12px no-repeat;
  transition:border-color .12s,background-color .12s}
.tdu-wc-addons .wc-pao-addon-wrap label:hover{border-color:#c7ccd3}
.tdu-wc-addons .wc-pao-addon-wrap label:hover::before{border-color:#8a929c}
.tdu-wc-addons .wc-pao-addon-checkbox{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;margin:0}
.tdu-wc-addons .wc-pao-addon-wrap label.is-on,
.tdu-wc-addons .wc-pao-addon-wrap label:has(input:checked){background:transparent;box-shadow:none}
.tdu-wc-addons .wc-pao-addon-wrap label.is-on::before,
.tdu-wc-addons .wc-pao-addon-wrap label:has(input:checked)::before{border-color:var(--red);
  background-color:var(--red);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
/* When the buyer submits without ticking, JS flags the box so they can see why. */
.tdu-wc-addons .wc-pao-addon-wrap label.needs-tick{border-color:var(--red);box-shadow:0 0 0 3px rgba(214,0,0,.20)}
.tdu-wc-addons .bt-hint{margin:9px 2px 0;font-size:12px;line-height:1.4;color:var(--muted);font-weight:600}
.tdu-wc-addons .bt-hint.err{color:var(--red)}

/* optional extras + rego, with the running total — flat stacked checkbox list */
.extras{background:#eef4f1;border:1px solid #d7e2dc;border-radius:12px;padding:22px 24px;margin-bottom:18px;
	box-shadow:0 2px 12px rgba(0,0,0,.06)}
.extras h3{font-size:14px;text-transform:uppercase;letter-spacing:1px;color:var(--red);margin-bottom:6px}
.extras h3 .req{color:var(--red);font-weight:900}
.extras .grp{display:flex;flex-direction:column;gap:2px}
.extras .grp+h3{margin-top:20px}
/* Native select — styled as fallback before the rich JS runs; hidden once it does. */
.extras .opt-select{width:100%;max-width:340px;padding:11px 40px 11px 14px;font-size:14px;font-weight:600;
	color:var(--ink,#1a1d21);background-color:#fff;border:1.5px solid #cdd6d1;border-radius:10px;cursor:pointer;
	-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.3;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2211c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px}
.extras .opt-select.tdu-select-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0;padding:0;border:0}

/* Rich custom dropdown (styled open list). */
.tdu-select{position:relative;width:100%;max-width:340px}
.tdu-select-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
	padding:11px 14px;font-size:14px;font-weight:700;color:var(--ink,#1a1d21);text-align:left;
	background:#fff;border:1.5px solid #cdd6d1;border-radius:10px;cursor:pointer;line-height:1.3;
	transition:border-color .12s,box-shadow .12s}
.tdu-select-btn:hover{border-color:#aab4ad}
.tdu-select-btn:focus-visible{outline:none;border-color:var(--red);box-shadow:0 0 0 2px rgba(226,33,28,.18)}
.tdu-select-btn svg{width:18px;height:18px;flex:none;stroke:var(--red);fill:none;stroke-width:2.5;
	stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.tdu-select-btn[aria-expanded="true"]{border-color:var(--red);box-shadow:0 0 0 2px rgba(226,33,28,.18)}
.tdu-select-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.tdu-select-panel{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);
	background:#fff;border:1px solid #e2e6ea;border-radius:12px;padding:6px;
	box-shadow:0 12px 34px rgba(16,24,40,.16);max-height:280px;overflow:auto}
.tdu-select-opt{display:flex;align-items:center;gap:9px;width:100%;padding:10px 12px;
	font-size:14px;font-weight:600;color:var(--ink,#1a1d21);text-align:left;background:transparent;
	border:0;border-radius:8px;cursor:pointer;line-height:1.3}
.tdu-select-opt:hover{background:#f2f5f3}
.tdu-select-opt.on{background:#fff5f4;color:var(--red);font-weight:800}
.tdu-select-opt.on::after{content:"\2713";margin-left:auto;font-weight:900}
/* Flat, stacked option list (one per line, visible native checkbox/radio). */
.opt-row{display:flex;align-items:center;flex-wrap:wrap;column-gap:10px;row-gap:3px;width:100%;padding:8px 0;
  font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;background:transparent;border:0;margin:0;position:relative}
.opt-row input[type=checkbox],.opt-row input[type=radio]{flex:0 0 auto;width:18px;height:18px;margin:0;
  accent-color:var(--red);cursor:pointer}
.opt-row.is-locked{cursor:default}
.opt-row.opt-ack{width:100%;align-items:flex-start;line-height:1.35;gap:11px}
.opt-row.opt-ack input{margin-top:2px}
.opt-row.opt-ack.needs-tick .opt-label{color:var(--red);font-weight:700}
/* nudge toast for a missed required field */
.tdu-toast{position:fixed;left:50%;bottom:78px;transform:translate(-50%,16px);z-index:99999;max-width:min(92vw,420px);
  background:#1f2937;color:#fff;font-size:13.5px;font-weight:600;line-height:1.4;padding:12px 16px;border-radius:10px;
  box-shadow:0 8px 30px rgba(0,0,0,.28);opacity:0;transition:opacity .28s,transform .28s;pointer-events:none;text-align:center}
.tdu-toast.is-in{opacity:1;transform:translate(-50%,0)}
.opt-row .free{flex:0 0 auto;color:var(--ok);font-weight:800;font-size:10.5px;text-transform:uppercase;letter-spacing:.3px;
  border:1px solid var(--ok);border-radius:4px;padding:1px 5px;line-height:1.4}
.opt-row .opt-label{flex:1 1 auto;min-width:0;overflow-wrap:break-word}
.opt-row .plus{flex:0 0 auto;margin-left:auto;color:var(--red);font-weight:800;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.opt-row .plus:not(:has(.opt-off,del))::before{content:"("}
.opt-row .plus:not(:has(.opt-off,del))::after{content:")"}
.opt-row .plus del{color:var(--muted);font-weight:600;opacity:.8}
.opt-row .plus .opt-off{background:var(--gold);color:var(--ink);font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.4px;padding:2px 5px;border-radius:4px;
  animation:tdu-neon 1.1s ease-in-out infinite}
/* Neon-style pulse so the discount catches the eye. */
@keyframes tdu-neon{
  0%,100%{box-shadow:0 0 0 rgba(255,194,14,0);filter:brightness(1)}
  50%{box-shadow:0 0 7px 2px rgba(255,194,14,.95),0 0 15px 5px rgba(255,194,14,.55);filter:brightness(1.12)}
}
@media (prefers-reduced-motion:reduce){.opt-row .plus .opt-off{animation:none}}
.opt-row .incl{flex:0 0 auto;margin-left:auto;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;
  white-space:nowrap}
.buildtime{font-size:14px;color:var(--muted);margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.buildtime b{color:var(--ink)}
.totalbar{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:16px;padding-top:14px;
  border-top:2px solid var(--gold)}
.totalbar .l{font-size:14px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.totalbar .v{font-size:28px;font-weight:900;color:var(--red);line-height:1}

/* Hide the WooCommerce Product Add-ons plugin's own running-total block
   (#product-addons-total renders "1x … / Subtotal"), which duplicates the
   theme's own itemised summary below it. */
#product-addons-total{display:none!important}

/* Live itemised order summary (base price + selected extras + total + GST). */
.tdu-summary{margin-top:16px;padding-top:14px;border-top:2px solid var(--gold)}
.tdu-summary .ts-row{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:3px 0;align-items:baseline}
.tdu-summary .ts-base .ts-val{font-weight:700;white-space:nowrap}
.tdu-summary .ts-lines{list-style:none;margin:2px 0;padding:0}
.tdu-summary .ts-lines .ts-label{color:var(--ink)}
.tdu-summary .ts-lines .ts-val{color:var(--red);font-weight:700;white-space:nowrap}
.tdu-summary .ts-total{margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
.tdu-summary .ts-total .ts-label{font-weight:800;text-transform:uppercase;letter-spacing:.5px;font-size:13px;color:var(--muted)}
.tdu-summary .ts-total .ts-val{font-size:24px;font-weight:900;color:var(--red);line-height:1}
.tdu-summary .ts-gst{margin:5px 0 0;font-size:12px;color:var(--muted)}

.stock{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ok);font-weight:700;margin-bottom:16px}
.stock .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(31,157,85,.18);flex:none}
.stock a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.stock.out{color:#8a5a13}
.stock.out .dot{background:#d99427;box-shadow:0 0 0 3px rgba(217,148,39,.18)}

/* qty + cta */
.cartrow{display:flex;gap:11px;flex-wrap:wrap;align-items:stretch;margin-bottom:14px}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:9px;background:#fff;overflow:hidden;flex:none}
.qty .qty-btn{width:42px;min-height:48px;border:none;background:none;font-size:19px;cursor:pointer;color:var(--ink);
  font-family:inherit;transition:.15s}
.qty .qty-btn:hover{background:#f2f3f5;color:var(--red)}
.qty .quantity{margin:0}
.qty input[type=number],.qty .qty{width:52px;border:none;text-align:center;font-size:16px;font-weight:800;
  font-family:inherit;outline:none;background:none;color:var(--ink);padding:0;-moz-appearance:textfield}
.qty input[type=number]::-webkit-outer-spin-button,
.qty input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cartrow .btn{min-height:48px;flex:1;min-width:150px}
/* The add-to-cart button carries the cart icon now, same as the product cards. */
.cartrow .single_add_to_cart_button{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.cartrow .single_add_to_cart_button svg{width:18px;height:18px;flex:none}
.tdu-cart{margin:0}

/* Label and values run on one line, the label bold with its colon and the
   values as comma-separated links. No fixed label column, so a long category
   list wraps under itself rather than against a rigid gutter. */
.meta{border-top:1px solid var(--line);padding-top:15px;font-size:14.5px;display:grid;gap:8px;margin-top:4px}
.meta .r{display:block;line-height:1.55}
.meta .r span:first-child{color:var(--ink);font-weight:800;margin-right:7px}
.meta .r b{color:var(--muted);font-weight:400}
.meta .r a{color:var(--muted)}
.meta .r a:hover{color:var(--red);text-decoration:underline;text-underline-offset:2px}

/* ---------------------------------------------------------------- tabs ---- */
.pinner{margin-top:34px}
.pd-tabs{display:flex;gap:2px;border-bottom:2px solid var(--line);margin-bottom:0;flex-wrap:wrap;padding:0;list-style:none;
  background:#fff;border-radius:var(--radius) var(--radius) 0 0;padding:6px 10px 0}
.pd-tabs button{background:none;border:none;font-family:inherit;font-weight:800;font-size:14px;color:var(--muted);
  padding:11px 15px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:.15s}
.pd-tabs button:hover{color:var(--ink)}
.pd-tabs button.active{color:var(--red);border-bottom-color:var(--red)}
.pd-panes{background:#fff;border:1px solid var(--line);border-top:none;border-radius:0 0 var(--radius) var(--radius);
  padding:24px 28px 28px;box-shadow:var(--shadow)}
.pd-pane{font-size:15px;color:#41464e;line-height:1.7}
.pd-pane p{margin-bottom:12px}
.pd-pane p:last-child{margin-bottom:0}
.pd-pane strong{color:var(--ink)}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.spec-table{width:100%;border-collapse:collapse;font-size:14.2px;min-width:340px}
.spec-table tr{border-bottom:1px solid var(--line)}
.spec-table tr:last-child{border-bottom:none}
.spec-table th{text-align:left;padding:10px 16px 10px 0;color:var(--muted);font-weight:700;width:42%;vertical-align:top}
.spec-table td{padding:10px 0;color:var(--ink);font-weight:600}

.inc-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 20px;margin:0;padding:0}
.inc-list li{font-size:14px;display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.inc-list li::before{content:"✓";color:var(--ok);font-weight:900;flex:none}
.feat-list{margin-top:14px}
.tgem-desc{margin-top:14px}
.tgem-desc ul{list-style:disc;padding-left:22px;margin:0 0 14px}
.tgem-desc ul ul{list-style:disc;margin:6px 0}
.tgem-desc li{margin:5px 0;line-height:1.55}
.tgem-desc li[style*="list-style-type: none"],.tgem-desc li[style*="list-style-type:none"]{padding-left:0}
.tgem-desc p{margin:0 0 12px}
.tgem-desc a{color:var(--red);text-decoration:underline}

/* WooCommerce review list inside the tab */
#tab-rev .comments{margin:0;padding:0;border:none}
#tab-rev .commentlist{list-style:none;margin:0 0 22px;padding:0}
#tab-rev .commentlist li{background:#fafbfc;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
  margin-bottom:12px;list-style:none}
#tab-rev .comment_container{display:flex;gap:14px;align-items:flex-start}
#tab-rev .comment_container img{border-radius:50%;flex:none}
#tab-rev .star-rating{font-size:14px;color:#fbbc04}
#tab-rev .woocommerce-review__author{font-weight:800;color:var(--ink)}
#tab-rev .woocommerce-review__published-date{font-size:13.5px;color:var(--muted)}

/* ------------------------------------------------------- review form ------ *
   The comment form is styled in blog.css, and blog.css does not load on a
   product — so the review box here was raw browser default: a 2px-padded
   textarea with a hairline border and WooCommerce's grey submit button. These
   rules give it the same treatment posts get, in a panel of its own.
   ========================================================================= */
.woocommerce-Reviews .woocommerce-Reviews-title{font-size:20px;margin:0 0 10px}
.woocommerce-Reviews .woocommerce-noreviews{color:var(--muted);font-size:15px;margin:0 0 20px}
#review_form_wrapper{background:#fafbfc;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px 24px}
#review_form .comment-reply-title{display:block;font-size:16px;font-weight:800;color:var(--ink);margin-bottom:4px}
#review_form .comment-notes{font-size:13.5px;color:var(--muted);margin:0 0 16px}
#review_form .comment-form{margin:0}
#review_form .comment-form p{margin:0 0 16px}
#review_form .comment-form label{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px}
#review_form .comment-form .required{color:var(--red);text-decoration:none;border:0}
#review_form .comment-form input[type=text],
#review_form .comment-form input[type=email],
#review_form .comment-form input[type=url],
#review_form .comment-form textarea{width:100%;background:#fff;border:1.5px solid var(--line);border-radius:10px;
  padding:12px 14px;font:inherit;font-size:15px;color:var(--text);transition:border-color .14s,box-shadow .14s}
#review_form .comment-form :is(input,textarea):focus{outline:0;border-color:var(--red);
  box-shadow:0 0 0 3px rgba(226,33,28,.12)}
#review_form .comment-form textarea{min-height:130px;resize:vertical;display:block}
/* Name and email sit side by side; the rest of the form runs full width. */
@media(min-width:576px){
  #review_form .comment-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
  #review_form .comment-form>*{grid-column:1/-1}
  #review_form .comment-form>.comment-form-author,
  #review_form .comment-form>.comment-form-email{grid-column:auto}
}
#review_form .comment-form-cookies-consent{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--muted)}
#review_form .comment-form-cookies-consent input{width:auto;margin-top:3px;accent-color:var(--red)}
#review_form .comment-form-cookies-consent label{margin:0;font-weight:600;color:inherit}

/* Rating: WooCommerce hides the radio buttons and paints stars with its own
   icon font. Sizing them up makes them a target rather than a decoration. */
#review_form .comment-form-rating label{margin-bottom:8px}
#review_form .stars{margin:0 0 4px;font-size:24px;line-height:1}
#review_form .stars a{color:#d6d9de;transition:color .12s}
#review_form .stars:hover a,
#review_form .stars.selected a.active,
#review_form .stars.selected a:not(.active){color:var(--gold)}
#review_form .stars a:hover~a,
#review_form .stars.selected a.active~a{color:#d6d9de}

/* WooCommerce's own #respond input#submit carries an id, so the brand button
   classes on it lose. Restated at matching weight. */
.woocommerce #review_form #respond input#submit,
#review_form .form-submit input#submit{background:var(--red);color:#fff;border:0;border-radius:10px;
  padding:13px 26px;font-size:15px;font-weight:800;letter-spacing:.2px;cursor:pointer;transition:background .14s}
.woocommerce #review_form #respond input#submit:hover,
#review_form .form-submit input#submit:hover{background:var(--red-dark);color:#fff}
#review_form .form-submit{margin-bottom:0}

/* ------------------------------------------------------------- related ---- */
.related-products{margin-top:42px}
.related-products .sec-head{max-width:none;margin-bottom:22px}

/* ========================================================== responsive ==== */
@media(max-width:991.98px){
  .gal{position:static}
  .buybox{padding:22px 20px 24px}
  .pd-panes{padding:20px}
}

@media(max-width:767.98px){
  .inc-list{grid-template-columns:1fr}
  .bb-trust{grid-template-columns:1fr}
  .pd-tabs{gap:0;padding:6px 6px 0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .pd-tabs::-webkit-scrollbar{display:none}
  .pd-tabs button{padding:10px 12px;font-size:13.5px;white-space:nowrap}
  .gal-main{aspect-ratio:4/3}
}

@media(max-width:575.98px){
  .buybox{padding:18px 16px 20px}
  .pd-panes{padding:16px}
  .bb-alt .btn{min-width:0;width:100%;flex:1 1 100%}
  .bb-cart .single_add_to_cart_button{min-width:0;width:100%}
  .bb-cart .quantity{margin-right:0}
  .bb-cart .quantity input{width:100%}
  .bb-cart form.cart{flex-direction:column;align-items:stretch}
  .gal-thumb{flex-basis:70px;height:56px}
}

/* ------------------------------------------ frequently bought together ----
   The companion to the bundle box below, and the one that actually appears:
   cross-sells are set on 2 of 185 products, so this falls back to upsells and
   then to the category. Only one of the two ever renders. */
.fbt{border:1px solid var(--line);border-radius:14px;background:var(--bg);
  padding:22px 24px 24px;margin:34px 0 0}
.fbt-head{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:20px;
  border-bottom:1px dashed var(--line)}
.fbt-ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;
  background:var(--red);color:#fff}
.fbt-ic .ic{width:24px;height:24px}
.fbt-head h2{font-size:19px;margin:0 0 3px}
.fbt-head p{font-size:13.5px;color:var(--muted);margin:0}

/* A scroller, not a wrapping grid: the plus signs only read as "and" while the
   cards stay on one line. */
.fbt-row{list-style:none;display:flex;align-items:stretch;gap:0;margin:0;padding:0 0 4px;
  overflow-x:auto;scrollbar-width:thin}
.fbt-plus{flex:none;display:grid;place-items:center;padding:0 6px;align-self:center}
.fbt-plus span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:#fff;border:1px solid var(--line);color:var(--muted);
  font-size:19px;font-weight:700;line-height:1}

.fbt-card{flex:0 0 210px;display:flex;flex-direction:column;gap:9px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
.fbt-img{display:block;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#fff}
.fbt-img img{width:100%;height:100%;object-fit:contain;display:block}
/* Two lines reserved whether the title needs them or not, so the prices and
   buttons sit on one line across the row instead of stepping up and down. */
.fbt-name{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.35;text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.7em}
.fbt-name:hover{color:var(--red)}
.fbt-price{font-size:15px;font-weight:800;color:var(--red);margin-top:auto}
.fbt-price del{display:block;font-size:12.5px;font-weight:600;color:var(--muted)}
.fbt-price ins{text-decoration:none}
.fbt-add{width:100%;font-size:13.5px;padding:9px 12px}
.fbt-add .ic{width:16px;height:16px}
.fbt-add.loading{opacity:.6;pointer-events:none}
/* WooCommerce appends its own "View cart" link once an add succeeds. */
.fbt-card .added_to_cart{font-size:12.5px;font-weight:700;color:var(--red);text-align:center;text-decoration:none}

@media(max-width:575.98px){
  .fbt{padding:18px 16px 20px}
  .fbt-card{flex-basis:170px}
  .fbt-plus{padding:0 3px}
}

/* ------------------------------------------------- buy together & save ----
   Cross-sells with real prices; the running total is the sum of what
   WooCommerce will actually charge, so it must stay in step with the ticks. */
.bundle{border:2px solid var(--red);border-radius:14px;background:#fff8f7;padding:20px 22px;margin:34px 0 0}
.bundle-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.bundle-icon{flex:none;width:46px;height:46px;border-radius:11px;background:var(--red);color:#fff;
  display:grid;place-items:center}
.bundle-icon .ic{width:24px;height:24px}
.bundle-head h2{font-size:20px;font-weight:900;color:var(--red);margin:0 0 3px}
.bundle-head p{margin:0;font-size:14.5px;color:var(--muted)}

.bundle-items{display:grid;gap:10px;padding-bottom:16px;border-bottom:1px dashed #f0c9c7}
.bundle-item{display:grid;grid-template-columns:auto 64px 1fr;gap:14px;align-items:center;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 14px;margin:0;
  transition:border-color .15s,box-shadow .15s}
.bundle-item:hover{border-color:#f0b3b0}
.bundle-item:has(input:checked){border-color:var(--red);box-shadow:0 0 0 3px rgba(226,33,28,.08)}
.bundle-item.is-self{cursor:default;background:#fffdf5;border-color:var(--gold)}
.bundle-item input[type=checkbox]{width:20px;height:20px;accent-color:var(--red);margin:0;flex:none}
.bundle-thumb img{width:64px;height:64px;object-fit:cover;border-radius:8px;display:block}
.bundle-detail{display:grid;gap:5px;min-width:0}
.bundle-name{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.35}
.bundle-this{display:inline-block;margin-left:7px;font-style:normal;font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.5px;background:var(--gold);color:var(--ink);
  border-radius:4px;padding:2px 7px;vertical-align:2px}
.bundle-price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.bundle-price del{color:var(--muted);font-size:13.5px;text-decoration:line-through}
.bundle-price ins{text-decoration:none;font-size:17px;font-weight:900;color:var(--ink)}
.bundle-off{font-size:12px;font-weight:800;background:var(--red);color:#fff;border-radius:4px;padding:2px 7px}

.bundle-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  padding-top:16px}
.bundle-total{margin:0;font-size:15px;font-weight:700;color:var(--ink)}
.bundle-total strong{font-size:23px;font-weight:900;color:var(--red);margin-left:7px}
.bundle-add{display:inline-flex;align-items:center;gap:9px}
.bundle-add .ic{width:19px;height:19px}
.bundle-add[disabled]{opacity:.5;cursor:not-allowed}

@media(max-width:575.98px){
  .bundle{padding:16px 15px;border-radius:12px}
  .bundle-item{grid-template-columns:auto 52px 1fr;gap:11px;padding:10px 11px}
  .bundle-thumb img{width:52px;height:52px}
  .bundle-foot{flex-direction:column;align-items:stretch;text-align:center}
  .bundle-add{justify-content:center;width:100%}
}