/* Kathy Heyndels — product page in the style of the mockup.
   Everything is scoped to body.kh-pdp, which kh-product.js adds; without the script nothing changes. */

body.kh-pdp{
  --kh-paper:#F5F5F2;--kh-ink:#191917;--kh-stone:#DAD7D0;--kh-mist:#E9E8E3;--kh-muted:#6F6C66;--kh-viber:#7360F2;
  --kh-display:"Noto Serif Display","Noto Serif",Georgia,serif;
  --kh-body:"Commissioner","Noto Sans","Helvetica Neue",Arial,sans-serif;
  --kh-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.kh-pdp .product.type-product{font-family:var(--kh-body);font-weight:300;color:var(--kh-ink)}

/* ---------- gallery ---------- */
body.kh-pdp .kh-gallery{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:start}
body.kh-pdp .kh-thumbs{display:flex;flex-direction:column;gap:10px}
body.kh-pdp .kh-thumb{all:unset;box-sizing:border-box;position:relative;display:block;aspect-ratio:2/3;background:var(--kh-mist);border:1px solid transparent;cursor:pointer;overflow:hidden}
body.kh-pdp .kh-thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
body.kh-pdp .kh-thumb[aria-current="true"]{border-color:var(--kh-ink)}
body.kh-pdp .kh-thumb:focus-visible{outline:1px solid var(--kh-ink);outline-offset:3px}
body.kh-pdp .kh-thumb-fab .kh-cloth{position:absolute;inset:0}
body.kh-pdp .kh-thumb-fab small{position:absolute;left:0;right:0;bottom:0;font-size:9px;letter-spacing:.12em;text-transform:uppercase;text-align:center;background:rgba(245,245,242,.92);padding:3px 0;color:var(--kh-ink);z-index:1}
body.kh-pdp .kh-stage{position:relative;aspect-ratio:2/3;background:var(--kh-mist);overflow:hidden;margin:0!important;width:auto!important}
body.kh-pdp .kh-stage .woocommerce-product-gallery__image{position:absolute!important;inset:0;width:100%!important;height:100%;margin:0!important;transition:opacity .35s}
body.kh-pdp .kh-stage .woocommerce-product-gallery__image img{width:100%!important;height:100%!important;object-fit:cover;object-position:top;display:block}
body.kh-pdp .kh-stage .kh-hide{opacity:0;pointer-events:none}
body.kh-pdp .kh-stage-cloth{position:absolute!important;inset:0;transition:opacity .35s;z-index:2}
body.kh-pdp .kh-stage-cap{position:absolute;left:16px;bottom:14px;z-index:3;font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:rgba(245,245,242,.9);padding:5px 9px}
body.kh-pdp .kh-stage-cap.kh-hide{display:none}

/* ---------- info column ---------- */
body.kh-pdp .woo-summary-content .site-container{display:flex;flex-direction:column;gap:12px}
body.kh-pdp .woo_c-product-details .breadcrumbs{font-size:12px;letter-spacing:.04em;color:var(--kh-muted)}
body.kh-pdp .woo_c-product-details .breadcrumbs a,body.kh-pdp .woo_c-product-details .breadcrumbs span{font-family:var(--kh-body);font-size:12px;text-transform:none;color:var(--kh-muted)}
body.kh-pdp .kh-stock{all:unset;display:inline-flex;align-items:center;gap:8px;font-family:var(--kh-body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--kh-ink)}
body.kh-pdp .kh-stock::before{content:"";width:7px;height:7px;border-radius:50%;background:#3E7B4F}
body.kh-pdp .kh-stock.kh-out::before{background:#A3262F}
body.kh-pdp .product_title{font-family:var(--kh-display)!important;font-weight:300!important;font-size:clamp(32px,3.6vw,50px)!important;line-height:1.12!important;letter-spacing:-.005em!important;text-transform:none!important;color:var(--kh-ink)!important;margin:0!important}
body.kh-pdp .summary p.price,body.kh-pdp .summary .price .amount{font-family:var(--kh-body)!important;font-size:20px!important;font-weight:400!important;color:var(--kh-ink)!important;font-variant-numeric:tabular-nums;margin:0}
body.kh-pdp .woocommerce-product-details__short-description,body.kh-pdp .woocommerce-product-details__short-description p{color:var(--kh-muted);font-size:15px;line-height:1.6;margin:0;max-width:52ch}

/* ---------- form ---------- */
body.kh-pdp form.variations_form{margin:10px 0 0!important}
body.kh-pdp form.variations_form .variations{display:flex;flex-direction:column;gap:0}
body.kh-pdp form.variations_form .variation{display:flex!important;flex-direction:column;align-items:stretch!important;gap:14px;border-top:1px solid var(--kh-stone);padding:22px 0;margin:0!important}
body.kh-pdp .kh-opt-head{display:flex!important;justify-content:space-between;align-items:baseline;gap:12px;width:100%!important;max-width:none!important;flex:none!important;margin:0!important;padding:0!important}
body.kh-pdp .kh-opt-head label{font-family:var(--kh-body)!important;font-size:11px!important;letter-spacing:.16em!important;text-transform:uppercase!important;font-weight:500!important;color:var(--kh-ink)!important;margin:0!important}
body.kh-pdp .kh-opt-head label b{font-weight:400;letter-spacing:.04em;text-transform:none;font-size:13px;margin-left:8px}
body.kh-pdp .yith-wcpsc-product-size-chart-button{all:unset;cursor:pointer;font-family:var(--kh-body);font-size:12px;border-bottom:1px solid var(--kh-ink);color:var(--kh-ink)}
body.kh-pdp .woo-selected-variation-item-name{display:none!important}
body.kh-pdp .kh-size-hint{font-size:12px;color:var(--kh-muted);margin:0}
body.kh-pdp form.variations_form .reset.variation{border-top:0;padding:0}
body.kh-pdp .reset_variations{font-size:11px!important;letter-spacing:.12em;text-transform:uppercase;color:var(--kh-muted)!important}

/* fabric swatches */
body.kh-pdp .kh-fabrics{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:12px 8px;max-width:560px;margin:0!important}
body.kh-pdp .kh-fab{all:unset;display:flex!important;flex-direction:column;gap:6px;min-width:0;cursor:pointer;width:auto!important;height:auto!important;background:none!important;border:0!important;margin:0!important}
body.kh-pdp .kh-fab:focus-visible .kh-cloth-wrap{outline:1px solid var(--kh-ink);outline-offset:4px}
body.kh-pdp .kh-cloth-wrap{position:relative;display:block;aspect-ratio:1/1;padding:4px;border:1px solid transparent;transition:border-color .25s}
body.kh-pdp .kh-fab.kh-on .kh-cloth-wrap{border-color:var(--kh-ink)}
body.kh-pdp .kh-fab:hover .kh-cloth{transform:translateY(-2px) rotate(-.6deg)}
body.kh-pdp .kh-cloth{position:relative;display:block;width:100%;height:100%;background-color:var(--c,#ccc);transition:transform .35s ease,background-color .35s ease}
body.kh-pdp .kh-fab .kh-cloth{
  --z:3px;filter:drop-shadow(0 4px 6px rgba(25,25,23,.16));
  clip-path:polygon(0 0,5% var(--z),10% 0,15% var(--z),20% 0,25% var(--z),30% 0,35% var(--z),40% 0,45% var(--z),50% 0,55% var(--z),60% 0,65% var(--z),70% 0,75% var(--z),80% 0,85% var(--z),90% 0,95% var(--z),100% 0,calc(100% - var(--z)) 5%,100% 10%,calc(100% - var(--z)) 15%,100% 20%,calc(100% - var(--z)) 25%,100% 30%,calc(100% - var(--z)) 35%,100% 40%,calc(100% - var(--z)) 45%,100% 50%,calc(100% - var(--z)) 55%,100% 60%,calc(100% - var(--z)) 65%,100% 70%,calc(100% - var(--z)) 75%,100% 80%,calc(100% - var(--z)) 85%,100% 90%,calc(100% - var(--z)) 95%,100% 100%,95% calc(100% - var(--z)),90% 100%,85% calc(100% - var(--z)),80% 100%,75% calc(100% - var(--z)),70% 100%,65% calc(100% - var(--z)),60% 100%,55% calc(100% - var(--z)),50% 100%,45% calc(100% - var(--z)),40% 100%,35% calc(100% - var(--z)),30% 100%,25% calc(100% - var(--z)),20% 100%,15% calc(100% - var(--z)),10% 100%,5% calc(100% - var(--z)),0 100%,var(--z) 95%,0 90%,var(--z) 85%,0 80%,var(--z) 75%,0 70%,var(--z) 65%,0 60%,var(--z) 55%,0 50%,var(--z) 45%,0 40%,var(--z) 35%,0 30%,var(--z) 25%,0 20%,var(--z) 15%,0 10%,var(--z) 5%);
}
body.kh-pdp .kh-cloth::before{content:"";position:absolute;inset:0;background:
  linear-gradient(118deg,rgba(255,255,255,0) 18%,rgba(255,255,255,var(--hi,.2)) 32%,rgba(255,255,255,0) 44%,rgba(0,0,0,var(--lo,.2)) 58%,rgba(255,255,255,0) 70%,rgba(255,255,255,calc(var(--hi,.2)*.7)) 82%,rgba(255,255,255,0) 94%),
  radial-gradient(120% 80% at 20% 0%,rgba(255,255,255,calc(var(--hi,.2)*.6)),transparent 60%),
  radial-gradient(90% 70% at 100% 100%,rgba(0,0,0,var(--lo,.2)),transparent 65%)}
body.kh-pdp .kh-cloth::after{content:"";position:absolute;inset:0;background:var(--kh-grain),repeating-linear-gradient(45deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),repeating-linear-gradient(-45deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px);background-size:120px 120px,auto,auto;mix-blend-mode:overlay;opacity:var(--g,.4)}
body.kh-pdp .kh-satin{position:absolute;right:4px;top:4px;width:30%;height:30%;clip-path:polygon(100% 0,100% 100%,0 0);background:linear-gradient(135deg,var(--s1),var(--s2) 45%,var(--s1) 60%,var(--s3));z-index:1}
body.kh-pdp .kh-fab-name{display:block;font-family:var(--kh-body);font-size:11.5px;line-height:1.25;text-align:center;color:var(--kh-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.kh-pdp .kh-fab.kh-on .kh-fab-name{color:var(--kh-ink);font-weight:500}

/* sizes */
body.kh-pdp .size_attr{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0!important}
body.kh-pdp .size_attr .size-item{all:unset;box-sizing:border-box;display:grid!important;place-items:center;width:auto!important;min-width:0!important;height:48px!important;line-height:1!important;padding:0!important;margin:0!important;border-radius:0!important;border:1px solid var(--kh-stone);font-family:var(--kh-body);font-size:14px;font-variant-numeric:tabular-nums;cursor:pointer;color:var(--kh-ink);transition:border-color .2s,background .2s,color .2s}
body.kh-pdp .size_attr .size-item::before,body.kh-pdp .size_attr .size-item::after{content:none!important;display:none!important}
body.kh-pdp .size_attr .size-item:hover{border-color:var(--kh-ink)}
body.kh-pdp .size_attr .size-item.active{background:var(--kh-ink);color:var(--kh-paper);border-color:var(--kh-ink)}
/* colours / sizes built by the script (theme rendered no .color_attr / .size_attr): hide the swatch list and theme dropdown */
body.kh-pdp .kh-built-row ul.variable-items-wrapper,body.kh-pdp .kh-built-row > .select,body.kh-pdp .kh-built-row > .custom_select{display:none!important}
body.kh-pdp .kh-fab.kh-na{opacity:.35}
body.kh-pdp .size_attr .size-item.kh-na{opacity:.35;text-decoration:line-through}
body.kh-pdp .size_attr .size-item:focus-visible{outline:1px solid var(--kh-ink);outline-offset:3px}

/* quantity + add to cart */
body.kh-pdp .kh-buy{display:flex!important;gap:10px;align-items:stretch;margin-top:8px}
body.kh-pdp .kh-buy .woo-quantity{position:relative;display:flex;align-items:center;width:112px;flex:none;height:54px;border:1px solid var(--kh-stone);margin:0!important;background:transparent}
body.kh-pdp .kh-buy .woo-quantity input.qty{width:100%!important;height:100%!important;border:0!important;background:transparent!important;text-align:center;font-family:var(--kh-body);font-size:15px;padding:0 36px!important;box-shadow:none!important;-moz-appearance:textfield}
body.kh-pdp .kh-buy .woo-quantity input.qty::-webkit-inner-spin-button,body.kh-pdp .kh-buy .woo-quantity input.qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
body.kh-pdp .kh-buy .single_add_to_cart_button{flex:1;display:flex!important;align-items:center;justify-content:center;gap:10px;height:54px!important;margin:0!important;border:1px solid var(--kh-ink)!important;border-radius:0!important;background:var(--kh-ink)!important;color:var(--kh-paper)!important;font-family:var(--kh-body)!important;font-size:12px!important;letter-spacing:.16em!important;text-transform:uppercase!important;font-weight:500!important;box-shadow:none!important;transition:background .25s,color .25s}
body.kh-pdp .kh-buy .single_add_to_cart_button:hover{background:transparent!important;color:var(--kh-ink)!important}
body.kh-pdp .kh-buy .single_add_to_cart_button .icon{display:none}

/* ---------- after the form ---------- */
body.kh-pdp .kh-after{display:flex;flex-direction:column;gap:22px;margin-top:22px}
body.kh-pdp .kh-vline{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--kh-muted)}
body.kh-pdp .kh-vline svg{flex:none;color:var(--kh-viber)}
body.kh-pdp .kh-vline a{color:var(--kh-ink);border-bottom:1px solid var(--kh-stone);transition:border-color .2s}
body.kh-pdp .kh-vline a:hover{border-color:var(--kh-viber)}
body.kh-pdp .kh-perks{list-style:none;margin:0;padding:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;font-size:12px;color:var(--kh-muted);border-top:1px solid var(--kh-stone)}
body.kh-pdp .kh-perks li{margin:0;padding:0}
body.kh-pdp .kh-perks li::before{content:"— ";color:var(--kh-stone)}
body.kh-pdp .kh-acc details{border-top:1px solid var(--kh-stone)}
body.kh-pdp .kh-acc details:last-child{border-bottom:1px solid var(--kh-stone)}
body.kh-pdp .kh-acc summary{list-style:none;cursor:pointer;padding:16px 0;display:flex;justify-content:space-between;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--kh-ink)}
body.kh-pdp .kh-acc summary::-webkit-details-marker{display:none}
body.kh-pdp .kh-acc summary::after{content:"+";font-weight:300;font-size:16px;line-height:1}
body.kh-pdp .kh-acc details[open] summary::after{content:"−"}
body.kh-pdp .kh-acc-body{padding:0 0 18px;color:var(--kh-muted);font-size:14px;line-height:1.6}
body.kh-pdp .kh-acc-body .wrap{padding:0!important;max-width:none!important}
body.kh-pdp .kh-acc-body p{margin:0 0 4px!important;color:var(--kh-muted)!important;font-size:14px!important}
body.kh-pdp .kh-acc-body table{width:100%;border:0;margin:0;font-size:13px}
body.kh-pdp .kh-acc-body th,body.kh-pdp .kh-acc-body td{border:0;padding:6px 0;text-align:left;vertical-align:top;background:none}
body.kh-pdp .kh-acc-body th{font-weight:500;color:var(--kh-ink);width:30%}
body.kh-pdp .product_meta.kh-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--kh-muted);border:0;padding:0;margin:0}
body.kh-pdp .product_meta.kh-meta *{font-size:12px!important;color:var(--kh-muted)!important}
body.kh-pdp .product_meta.kh-meta .dot-divider{display:none}
body.kh-pdp .kh-hidden,body.kh-pdp form.variations_form .variation.kh-hidden{display:none!important}

/* ---------- fabric band ---------- */
body.kh-pdp .kh-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--kh-ink);color:var(--kh-paper);margin:clamp(40px,6vw,88px) 0 0}
body.kh-pdp .kh-band-cloth{position:relative;min-height:440px;overflow:hidden}
body.kh-pdp .kh-band-cloth .kh-cloth{position:absolute;inset:-20px;width:auto;height:auto;--g:.55}
body.kh-pdp .kh-band-copy{padding:clamp(32px,6vw,96px);display:flex;flex-direction:column;justify-content:center;gap:22px}
body.kh-pdp .kh-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:#B9B6AE}
body.kh-pdp .kh-band h2{font-family:var(--kh-display)!important;font-weight:300!important;font-size:clamp(32px,4vw,56px)!important;line-height:1.12!important;color:var(--kh-paper)!important;text-transform:none!important;letter-spacing:0!important;margin:0!important}
body.kh-pdp .kh-band h2 em{font-style:italic}
body.kh-pdp .kh-band p{margin:0;color:#B9B6AE;max-width:46ch;font-size:15px;line-height:1.6}
body.kh-pdp .kh-specs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #34332f}
body.kh-pdp .kh-specs div{padding:18px 16px 0 0;display:flex;flex-direction:column;gap:2px}
body.kh-pdp .kh-specs div+div{padding-left:16px;border-left:1px solid #34332f}
body.kh-pdp .kh-specs b{font-family:var(--kh-display);font-weight:300;font-size:26px;color:var(--kh-paper)}
body.kh-pdp .kh-specs span{font-size:12px;color:#B9B6AE}

@media (max-width:980px){
  body.kh-pdp .kh-band{grid-template-columns:1fr}
  body.kh-pdp .kh-band-cloth{min-height:240px}
}
@media (max-width:760px){
  body.kh-pdp .kh-gallery{grid-template-columns:1fr}
  body.kh-pdp .kh-thumbs{flex-direction:row;order:2;overflow-x:auto}
  body.kh-pdp .kh-thumb{width:64px;flex:none}
  body.kh-pdp .kh-fabrics{gap:10px 6px;max-width:none}
  body.kh-pdp .kh-perks{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){body.kh-pdp *{transition:none!important}}
