/* The Kiddie Depot product page (woocommerce/content-single-product.php).
   Loaded on product pages only, after the theme, WordPress, card and scale stylesheets.

   Top: 2 equal columns. Photo column: thumbnails down the left (56px), then the main photo at 1:1.
        Info column: name, price, lead time, short description, options, buy row, SKU, WhatsApp.
   Then a white panel with Description, Specifications and Delivery tabs (accordions under 601px),
   then related products in the theme's own product cards.
   Section gaps match the home page (Tight): 48px on desktop, 38px at 768, 32px on phones.
   Every selected state (size, swatch, thumbnail, tab) is dark green. Deep apricot marks messages and the filled heart. */

#kd-product{--sp:clamp(32px,5vw,48px)}
.kd-pdp{padding-bottom:var(--sp)}

/* breadcrumb: the product name stays in the markup for the breadcrumb schema, not on screen */
.kd-pdp .crumb{padding-top:clamp(12px,calc(8px + 1vw),16px)}
.kd-pdp .crumb .here,.kd-pdp .crumb .sep:has(+ .here){display:none}

/* ---------- top: photo and info ---------- */
.pdp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4.5vw,64px);padding:clamp(16px,2.5vw,24px) 0 var(--sp);align-items:start}
.pdp>*{min-width:0}

.pdp-gallery{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:start}
.pdp-gallery.is-single{grid-template-columns:minmax(0,1fr)}
.pdp-main{grid-column:2;grid-row:1;position:relative;aspect-ratio:1;max-width:100%;overflow:hidden;border-radius:var(--card-r);border:1px solid var(--rule);background:var(--cream-2)}
.pdp-gallery.is-single .pdp-main{grid-column:1}
.pdp-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pdp-thumbs{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:10px}
/* every gallery photo has a thumbnail. On desktop the column is as tall as the main photo (height 0 keeps it out of the row
   height, min-height 100% fills the row) and scrolls when the thumbnails run longer, with no scrollbar showing */
.pdp-gallery:not(.is-single) .pdp-thumbs{align-self:stretch;height:0;min-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.pdp-thumbs::-webkit-scrollbar{display:none}
.pdp-thumbs{position:relative}
.pdp-thumbs button{flex:none}
/* the scrolling column would cut off the focus ring outside the thumbnail, so it sits inside the edge */
.pdp-thumbs button:focus-visible{outline-offset:-3px}
.pdp-thumbs button{position:relative;width:100%;aspect-ratio:1;padding:0;overflow:hidden;cursor:pointer;border-radius:8px;border:1px solid var(--rule);background:var(--cream-2);transition:border-color .16s}
.pdp-thumbs button img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pdp-thumbs button:hover{border-color:var(--ink-hover)}
.pdp-thumbs button[aria-pressed="true"]{border:2px solid var(--ink-hover)}

.pdp-info h1{font-size:var(--fs-h1-pdp);line-height:var(--lh-tight);margin:0;text-wrap:balance}
.pdp-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:16px;font-variant-numeric:tabular-nums}
.pdp-price .now{font-size:var(--fs-h3);font-weight:700;line-height:var(--lh-snug);white-space:nowrap}
.pdp-price .was{font-size:var(--fs-base);color:var(--ink-soft);text-decoration:line-through}
.pdp-price:has(.was) .now{color:var(--ink)}  /* sale price, as on the cards */
.pdp-price .por{font-size:var(--fs-h3);font-weight:600;line-height:var(--lh-snug);color:var(--ink-soft)}
.pdp-lead{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:var(--fs-sm);color:var(--ink)}
.pdp-lead svg{width:16px;height:16px;flex:none}
.pdp-sum{margin-top:24px;color:var(--ink-soft);max-width:48ch}
.pdp-sum p+p{margin-top:8px}

/* ---------- options ---------- */
.kd-pdp form.cart{margin-top:24px}
.kd-variations{display:grid;gap:24px}
/* a product over 200 variations still asks the server for each pick. WooCommerce's script then covers the form
   with a white overlay at 60% (inline styles, so !important). The overlay stays to stop double clicks but shows nothing. */
.kd-pdp form.cart .blockUI.blockOverlay{background:transparent!important;opacity:1!important;cursor:progress!important}
/* the colour block for a colour that is not used for variations sits after the variation blocks, at the same gap */
.kd-free-options{margin-top:24px}
.kd-variation .kd-select{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kd-pdp .reset_variations{display:none!important}
.optlabel{display:flex;flex-wrap:wrap;margin-bottom:8px;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.optlabel label{cursor:default}
.optlabel .picked{font-weight:400;color:var(--ink-soft)}
.optlabel .picked:not(:empty)::before{content:":\00a0"}
.opts,.swatches{display:flex;flex-wrap:wrap;gap:8px}
.opts:empty,.swatches:empty{display:none}
.opt{display:inline-flex;align-items:center;justify-content:center;min-width:96px;min-height:44px;padding:0 18px;
  border:1.5px solid var(--rule);border-radius:var(--btn-r);background:var(--surface);font:500 var(--fs-sm) var(--ft);color:var(--ink);cursor:pointer;transition:border-color .16s}
.opt:hover:not(.out){border-color:var(--ink-hover)}
.opt[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--sage-wash);font-weight:600}
.opt.out{opacity:.45;text-decoration:line-through;cursor:not-allowed}
.sw{position:relative;width:40px;height:40px;padding:0;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--rule);background:var(--c,var(--rule));cursor:pointer}
.sw:hover:not(.out){box-shadow:0 0 0 1px var(--ink-soft)}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.sw.out{opacity:.55;cursor:not-allowed}
.sw.out::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;border-radius:2px;background:var(--ink);transform:translateX(-50%) rotate(45deg)}
.opt-msg{margin-top:8px;font-size:var(--fs-sm);color:var(--copper-pressed)}
.kd-pdp .single_variation_wrap{margin-top:8px}
.kd-pdp .stock{margin-top:12px;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.kd-pdp .stock.out-of-stock{color:var(--copper-pressed)}

/* ---------- buy row: the buy pill (280 x 44px) and the wishlist heart ---------- */
.pdp-buy{display:flex;align-items:center;gap:10px;margin-top:24px}
.kd-pdp .single_variation_wrap .pdp-buy{margin-top:16px}
/* the pill matches the product card at its standard size (product-card.css): white pill with its border and shadow,
   3.5px inset, 44px button and stepper, 48px quantity select, 15px text */
.pdp-buy .sl-buy-wrap{--u:1px;flex:none;width:280px;max-width:calc(100% - 54px);margin:0}
.pdp-buy .sl-buy-wrap .sl-buy{padding:3.5px}
.pdp-buy .sl-buy-wrap .st{gap:8px}
.pdp-buy .sl-buy-wrap .sl-add{min-height:44px;padding:0 16px;font-size:var(--fs-base)}
.pdp-buy .sl-buy-wrap .sl-qty{height:44px;min-width:48px}
.pdp-buy .sl-buy-wrap .sl-qty select{min-width:48px;font-size:var(--fs-base)}
.pdp-buy .sl-buy-wrap .stp{width:44px;height:44px}
.pdp-buy .sl-buy-wrap .stp-l{height:44px;font-size:var(--fs-base)}
.pdp-buy .sl-buy-wrap .vc{font-size:var(--fs-sm)}
/* once something goes in the cart, WooCommerce adds its own "View basket" link next to the button (it reacts to the
   added_to_cart event product.js sends). The line under the pill already has View cart, so the link stays hidden. */
.sl-buy-wrap a.added_to_cart{display:none}
.kd-pdp .single_add_to_cart_button.disabled,.kd-pdp .single_add_to_cart_button.disabled:hover{background:var(--rule);color:var(--ink-soft);cursor:not-allowed}
.kd-pdp .single_add_to_cart_button.is-busy{opacity:.7;pointer-events:none}
/* an option with no price swaps the buy pill for the Ask on WhatsApp pill: the same pill, the shopping button colour
   with white text and the soft shadow (theme.css), the WhatsApp mark before the words */
.pdp-buy .sl-buy-wrap[hidden],.pdp-wa[hidden]{display:none}
.pdp-buy .kd-por-wa,.pdp-buy .kd-por-wa:hover,.pdp-buy .kd-por-wa:focus,.pdp-buy .kd-por-wa:active{gap:8px;text-decoration:none}
.pdp-buy .kd-por-wa svg{width:18px;height:18px;flex:none}
.kd-wish{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1.5px solid var(--rule);background:var(--surface);color:var(--ink-soft);cursor:pointer;transition:border-color .16s,color .16s}
.kd-wish svg{width:20px;height:20px;fill:transparent;stroke:currentColor;stroke-width:2;stroke-linejoin:round;transition:fill .18s}
.kd-wish:hover{border-color:var(--copper-pressed);color:var(--copper-pressed)}
.kd-wish[aria-pressed="true"]{border-color:var(--copper-pressed);color:var(--copper-pressed)}
.kd-wish[aria-pressed="true"] svg{fill:currentColor}
.pdp-need{margin-top:8px;font-size:var(--fs-sm);color:var(--copper-pressed)}
.pdp-added{margin-top:8px;font-size:var(--fs-sm);color:var(--ink)}
.pdp-added a{margin-left:4px;font-weight:700;color:var(--ink)}
.pdp-sku{margin-top:12px;font-size:var(--fs-sm);letter-spacing:.02em;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.pdp-sku span{user-select:all}
.pdp-wa{margin-top:4px;font-size:var(--fs-sm);color:var(--ink-soft)}
.pdp-wa a{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- tabs panel ---------- */
.pdp-tabs{background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:0 clamp(20px,3vw,40px) clamp(24px,3vw,40px)}
.pdp-tabs .tablist{display:flex;gap:28px;border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none}
.pdp-tabs .tablist::-webkit-scrollbar{display:none}
.pdp-tabs .tablist button{flex:none;white-space:nowrap;margin-bottom:-1px;padding:16px 0;border:0;border-bottom:2px solid transparent;background:none;font:600 var(--fs-base) var(--ft);color:var(--ink-soft);cursor:pointer}
.pdp-tabs .tablist button:hover{color:var(--ink)}
.pdp-tabs .tablist button[aria-selected="true"]{color:var(--ink);border-color:var(--ink-hover)}
.pdp-tabs .tabpanel{padding-top:24px}
.acc-h{display:none}

.pdp-desc{max-width:var(--w-read)}
.pdp-desc p+p,.pdp-desc ul+p,.pdp-desc p+ul{margin-top:12px}
.pdp-desc h2,.pdp-desc h3,.pdp-desc h4{margin:20px 0 6px;font:700 var(--fs-h3-sans)/var(--lh-body) var(--ft);color:var(--ink)}
.pdp-desc ul,.pdp-desc ol{margin:0;padding-left:18px}
.pdp-desc img{border-radius:12px}

.pdp-specs{display:grid;max-width:720px;margin:0}
.pdp-specs>div{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:4px 20px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-base)}
.pdp-specs>div:last-child{border-bottom:0}
.pdp-specs dt{font-weight:700;color:var(--ink)}
.pdp-specs dd{margin:0;color:var(--ink-soft)}

.pdp-ship{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px;border:1px solid var(--rule);border-radius:var(--card-r)}
.pdp-ship p{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:18px 16px;text-align:center;font-size:var(--fs-sm);line-height:var(--lh-snug)}
.pdp-ship p+p{border-left:1px solid var(--rule)}
.pdp-ship span{color:var(--ink-soft)}
.pdp-ship-link{display:inline-block;margin-top:12px;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}

/* ---------- related products ---------- */
.pdp-related{padding-top:var(--sp)}
.pdp-related .band-head{margin-bottom:clamp(24px,2.6vw,32px)}
.pdp-related .band-head h2{font-size:var(--fs-h2);line-height:var(--lh-tight)}
.kd-pdp .sl-block{margin-top:0}

/* ---------- tablets and phones ---------- */
@media (max-width:900px){
  .pdp{grid-template-columns:minmax(0,1fr);gap:24px}
  .pdp-gallery{grid-template-columns:minmax(0,1fr)}
  .pdp-main{grid-column:1}
  .pdp-thumbs{grid-column:1;grid-row:2;flex-direction:row;justify-content:safe center}
  /* the thumbnail row scrolls sideways when it runs wider than the screen */
  .pdp-gallery:not(.is-single) .pdp-thumbs{height:auto;min-height:0;overflow-x:auto;overflow-y:hidden}
  .pdp-thumbs button{width:64px}
  .pdp-buy{justify-content:center}
  .pdp-buy .sl-buy-wrap{width:280px}
  .pdp-need,.pdp-added,.pdp-sku,.pdp-wa{text-align:center}
}
@media (max-width:600px){
  .pdp-tabs{padding-top:4px;padding-bottom:4px}
  .pdp-tabs .tablist{display:none}
  .acc-h{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:52px;padding:0;border:0;border-bottom:1px solid var(--rule);background:none;font:600 var(--fs-base) var(--ft);color:var(--ink);text-align:left;cursor:pointer}
  .acc-h::after{content:"+";font-size:22px;font-weight:400;color:var(--ink-hover)}
  .acc-h[aria-expanded="true"]::after{content:"\2212"}
  .pdp-tabs .acc-h:nth-last-child(2):not([aria-expanded="true"]){border-bottom:0}
  .pdp-tabs .tabpanel{padding:12px 0 20px;border-bottom:1px solid var(--rule)}
  .pdp-tabs .tabpanel:last-child{border-bottom:0}
  .opt{font-size:var(--fs-base)}
}
@media (max-width:480px){
  .pdp-ship{grid-template-columns:minmax(0,1fr)}
  .pdp-ship p+p{border-left:0;border-top:1px solid var(--rule)}
  .pdp-specs>div{grid-template-columns:minmax(0,1fr)}
}

/* ---------- revamp project page (since 1.7.86, template-parts/revamp-project.php) ----------
   Option B on the Furniture Revamps Mockup canvas. Top: the eyebrow, name, write-up, 4 facts and the quote buttons on the left,
   the square main photo on the right (472 to 680 at full width). Then the numbered steps, up to 4 more photos and
   You may also like. The write-up, fact values and step captions keep their space when empty.
   Tablets and phones: the photo first, then the info centred; the steps scroll sideways on phones. */
.rvx-top{display:grid;grid-template-columns:minmax(0,472fr) minmax(0,680fr);gap:clamp(32px,4.5vw,64px);align-items:center;padding-top:clamp(16px,2.5vw,24px)}
.rvx-info{display:flex;flex-direction:column;gap:18px;min-width:0}
.rvx-info .eyebrow{font-weight:500;letter-spacing:.3em;line-height:15px;color:var(--ink-soft)}
.rvx-info h1{margin:0;font-size:clamp(1.75rem,1.4rem + 1.2vw,2.5rem);line-height:var(--lh-tight);text-wrap:balance}
.rvx-story{min-height:3.2em;max-width:56ch;line-height:1.6}
.rvx-story p+p{margin-top:8px}
.rvx-facts{margin:6px 0 4px;display:flex;flex-direction:column}
.rvx-facts>div{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:baseline;gap:4px 16px;padding:14px 0;border-top:1px solid var(--rule)}
.rvx-facts>div:last-child{border-bottom:1px solid var(--rule)}
.rvx-facts dt{margin:0;font-size:var(--fs-xs);font-weight:500;letter-spacing:.2em;line-height:15px;text-transform:uppercase;color:var(--ink-soft)}
.rvx-facts dd{margin:0;min-height:1.4em;font-weight:600;line-height:1.4;color:var(--ink)}
.rvx-actions{display:flex;flex-wrap:wrap;gap:14px}
.rvx-ph{position:relative;display:block;width:100%;padding:0;border:0;overflow:hidden;border-radius:18px;background:var(--cream-2);cursor:zoom-in}
.rvx-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.22,.7,.3,1)}
button.rvx-ph:hover img{transform:scale(1.03)}
.rvx-ph:focus-visible{outline:2px solid var(--gold-focus);outline-offset:3px}
.rvx-hero .rvx-ph{aspect-ratio:1;border-radius:22px;box-shadow:0 12px 30px rgba(53,62,50,.10)}
.rvx-sec{padding-top:var(--sp)}
.rvx-sec .band-head h2,.rvx .pdp-related .band-head h2{font-size:var(--fs-h2);line-height:var(--lh-tight)}
.rvx-all{padding:0;border:0;background:none;font-family:inherit;cursor:pointer}
.rvx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:24px}
.rvx-steps li{display:flex;flex-direction:column;gap:14px;min-width:0}
.rvx-steps .rvx-ph{aspect-ratio:4/3}
.rvx-step-t{display:flex;gap:12px;align-items:baseline}
.rvx-step-n{font-size:var(--fs-sm);font-weight:700;color:var(--copper);font-variant-numeric:tabular-nums}
.rvx-step-h{margin:0;font-size:var(--fs-lg);font-weight:600;line-height:var(--lh-snug)}
.rvx-step-c{margin:4px 0 0;min-height:1.5em;font-size:var(--fs-sm);line-height:1.5;color:var(--ink-soft)}
.rvx-more{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.rvx-more li{min-width:0}
.rvx-more .rvx-ph{aspect-ratio:1}
/* the full size viewer */
html.rvx-open{overflow:hidden}
.rvx-view{width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#1C1F1A;color:#FFFFFF}
.rvx-view[open]{display:flex;flex-direction:column}
.rvx-view::backdrop{background:transparent}
.rvx-view-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.rvx-view-n{font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.rvx-view-x,.rvx-view-go{flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#FFFFFF;cursor:pointer}
.rvx-view-x:hover,.rvx-view-go:hover{background:rgba(255,255,255,.26)}
.rvx-view-x svg,.rvx-view-go svg{width:22px;height:22px}
.rvx-view-go[data-go="-1"] svg{transform:rotate(180deg)}
.rvx-view-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:16px;padding:0 16px 24px}
.rvx-view-img{display:block;min-width:0;max-width:calc(100% - 128px);max-height:100%;object-fit:contain;border-radius:12px}

@media (max-width:900px){
  .rvx-top{grid-template-columns:minmax(0,1fr);gap:24px}
  .rvx-hero{order:-1;width:100%;max-width:640px;margin-inline:auto}
  .rvx-info{align-items:center;text-align:center}
  .rvx-facts{width:100%;max-width:520px;text-align:left}
  .rvx-actions{justify-content:center}
  .rvx-steps{gap:16px}
  .rvx-more{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (max-width:639px){
  .rvx-facts>div{grid-template-columns:120px minmax(0,1fr)}
  .rvx-actions{flex-direction:column;align-items:stretch;width:100%;gap:8px}
  .rvx-actions .btn{width:100%}
  /* the steps run in 1 row that scrolls sideways, each about 3 quarters of the screen wide */
  .rvx-steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:0 16px 6px;scroll-padding-inline:16px;scrollbar-width:none}
  .rvx-steps::-webkit-scrollbar{display:none}
  .rvx-steps li{flex:0 0 78%;scroll-snap-align:start}
  .rvx-view-stage{position:relative;padding:0 0 24px}
  .rvx-view-img{max-width:100%;border-radius:0}
  .rvx-view-go{position:absolute;top:50%;margin-top:-24px;background:rgba(28,31,26,.55)}
  .rvx-view-go[data-go="-1"]{left:8px}
  .rvx-view-go[data-go="1"]{right:8px}
}