/* =========================================================
   KONIRY — SINGLE PRODUCT
   Gallery/summary two-column layout, tabs, attributes, reviews,
   conversion features (urgency badges, secure-checkout row,
   frequently-bought-together, sticky add-to-cart bar, Buy Now).
   Phase 3 will rework this file; everything here today is the
   functional baseline that phase builds on top of.
   ========================================================= */

/* single product */
.woocommerce div.product{max-width:1280px;margin:0 auto;padding:0 28px 96px}
.woocommerce div.product .product-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:flex-start}
/* WooCommerce's own default stylesheet floats & width-constrains these to
   48% each for a non-flex/grid 2-column layout. Since .product-grid above
   already provides the 2-column layout via CSS grid, these resets remove
   the default float/width so the two systems don't double-apply. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce div.product .summary.entry-summary{
  width:100%;
  float:none;
  clear:none;
}
.woocommerce div.product div.images{border-radius:36px;overflow:hidden;background:#EFEAE0}
.woocommerce div.product div.images img{width:100%;height:auto;border-radius:0}
/* Graceful base layout for WooCommerce's gallery markup even before its
   own flexslider/zoom JS finishes initialising (or if a plugin conflict
   ever stops it) — images stack cleanly instead of collapsing oddly. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper{display:block}
.woocommerce div.product div.images .woocommerce-product-gallery__image{margin-bottom:12px;border-radius:20px;overflow:hidden}
.woocommerce div.product div.images .woocommerce-product-gallery__image:last-child{margin-bottom:0}
.woocommerce div.product div.images .flex-control-thumbs{display:flex;gap:12px;list-style:none;margin-top:16px;padding:0;flex-wrap:wrap}
.woocommerce div.product div.images .flex-control-thumbs li{width:84px}
.woocommerce div.product div.images .flex-control-thumbs img{border-radius:14px;cursor:pointer;opacity:.55;transition:opacity .2s,box-shadow .2s;aspect-ratio:1/1;object-fit:cover;border:2px solid transparent}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--accent)}
.woocommerce div.product div.images .flex-control-thumbs img:hover{opacity:1}
/* Prepared (currently empty — see gallery.php) slot for Phase 4's
   product video, directly below the gallery/thumbnails. */
.product-gallery-col .koniry-product-video{margin-top:20px;border-radius:24px;overflow:hidden}

/* Product video (Phase 4) — uploaded <video> and the YouTube facade
   share the same responsive 16:9 frame so neither ever distorts. */
.koniry-product-video{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:24px;overflow:hidden}
.koniry-product-video video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.koniry-yt-facade{width:100%;height:100%;border:none;padding:0;margin:0;cursor:pointer;background-size:cover;background-position:center;background-color:#000;display:flex;align-items:center;justify-content:center;position:relative}
.koniry-yt-facade::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.15);transition:background .2s}
.koniry-yt-facade:hover::after{background:rgba(0,0,0,.05)}
.koniry-yt-play{position:relative;z-index:2;width:72px;height:51px;transition:transform .2s}
.koniry-yt-play svg{width:100%;height:100%;display:block}
.koniry-yt-facade:hover .koniry-yt-play{transform:scale(1.08)}
.koniry-yt-facade:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.koniry-product-video iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:640px){
  .koniry-yt-play{width:56px;height:40px}
}
.woocommerce div.product .product_title{font-size:38px;margin-bottom:10px}
.woocommerce div.product p.price,.woocommerce div.product span.price{font-size:26px;font-weight:700;color:var(--ink)}
.woocommerce div.product p.price del,.woocommerce div.product span.price del{font-size:17px;color:#A9A498;font-weight:400;margin-right:10px}
.woocommerce div.product p.price ins,.woocommerce div.product span.price ins{text-decoration:none}
.woocommerce div.product .woocommerce-product-rating{display:flex;align-items:center;gap:10px;margin:14px 0}
.product-savings{display:inline-block;background:#FBEAC8;color:#7A5416;font-size:13px;font-weight:700;padding:6px 14px;border-radius:var(--r-pill);margin:2px 0 14px}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--body);font-size:16px;margin:22px 0}
.woocommerce div.product form.cart{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:28px 0}
.buy-now-btn{padding:15px 30px}
.woocommerce div.product form.cart .quantity{display:inline-flex}
.woocommerce div.product form.cart .quantity input{width:70px;padding:15px;border:1px solid #E7E2D8;border-radius:var(--r-pill);text-align:center;font-family:inherit;font-size:15px}
.woocommerce div.product table.variations{width:100%;margin-bottom:22px}
.woocommerce div.product table.variations td{padding:8px 0}
.woocommerce div.product table.variations select{width:100%;padding:13px 18px;border:1px solid #E7E2D8;border-radius:14px;font-family:inherit;font-size:15px;background:#fff}
.woocommerce div.product .woocommerce-variation-price{margin-bottom:14px}
.woocommerce div.product .woocommerce-variation-availability{font-size:13.5px;color:var(--body)}
/* Native WooCommerce single-product meta line (SKU / categories / tags) —
   real class is .product_meta, not a custom one, so it always renders
   whatever WooCommerce actually has data for. */
.woocommerce div.product .product_meta{list-style:none;margin-top:24px;border-top:1px solid #EFEAE0;padding-top:18px;font-size:14px;color:var(--body)}
.woocommerce div.product .product_meta > span{display:block;padding:4px 0}
.woocommerce div.product .product_meta a{color:var(--body);text-decoration:underline}
.trust-mini{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;padding-top:26px;border-top:1px solid #EFEAE0}
.trust-mini span{font-size:13px;color:var(--body);display:flex;align-items:center;gap:8px}

/* urgency badges (real stock/sales data only — no fabricated counters) */
.product-urgency{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.urgency-badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:7px 14px;border-radius:var(--r-pill)}
.urgency-badge.urgent{background:#FBEAC8;color:#7A5416}
.urgency-badge.trending{background:var(--sage);color:var(--accent-hover)}

/* secure checkout / payment trust row (text-based — no reproduced card-network logos) */
.secure-checkout{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13px;color:var(--body)}
.secure-checkout svg{width:18px;height:18px;stroke:var(--accent);flex-shrink:0}

/* frequently bought together */
.fbt{margin-top:36px;padding-top:30px;border-top:1px solid #EFEAE0}
.fbt-title{font-size:19px;margin-bottom:18px}
.fbt-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.fbt-item{display:flex;flex-direction:column;align-items:center;text-align:center;width:110px;gap:6px}
.fbt-item img{width:72px;height:72px;object-fit:cover;border-radius:14px;background:var(--sand)}
.fbt-item .fbt-name{font-size:12px;font-weight:600;line-height:1.3;max-height:2.6em;overflow:hidden}
.fbt-item .fbt-price{font-size:12.5px;font-weight:700;color:var(--accent)}
.fbt-plus{font-size:20px;color:var(--body);flex-shrink:0}
.fbt-check{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--body);cursor:pointer}
.fbt-view-link{font-size:11.5px;color:var(--accent);text-decoration:underline}
.fbt-summary{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;background:var(--sand);border-radius:var(--r-md);padding:18px 22px}
.fbt-total{font-size:14.5px;font-weight:600}
.fbt-total-amount{font-size:19px;color:var(--accent);margin-left:6px}
.fbt-add-btn{padding:13px 24px;font-size:14px}
.fbt-add-btn.loading{opacity:.6}
.fbt-note{width:100%;font-size:12px;color:var(--body);margin-top:4px}
.fbt-msg{width:100%;font-size:13px;font-weight:600;color:var(--accent);margin-top:6px}

/* sticky add-to-cart bar (single product page only) */
.sticky-atc{position:fixed;left:0;right:0;bottom:0;z-index:98;background:#fff;box-shadow:0 -8px 30px rgba(31,36,34,.12);border-top:1px solid #EEEAE2;transform:translateY(100%);transition:transform .3s ease;padding:14px 0}
.sticky-atc.is-visible{transform:translateY(0)}
.sticky-atc-in{max-width:1280px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.sticky-atc-info{display:flex;align-items:center;gap:14px;min-width:0}
.sticky-atc-info img{width:48px;height:48px;object-fit:cover;border-radius:12px;flex-shrink:0}
.sticky-atc-info div{display:flex;flex-direction:column;min-width:0}
.sticky-atc-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.sticky-atc-price{font-size:13.5px;color:var(--body)}
.sticky-atc .btn{padding:12px 24px;font-size:14px;flex-shrink:0}
@media(max-width:640px){
  .sticky-atc-name{max-width:140px}
  body.single-product{padding-bottom:78px}
}

/* Native product attributes table, now rendered inside the
   "Specifications" accordion item via wc_display_product_attributes()
   rather than inside WooCommerce's (now-removed) default tabs UI. */
.woocommerce table.shop_attributes{width:100%;border-collapse:collapse}
.woocommerce table.shop_attributes th,.woocommerce table.shop_attributes td{padding:14px 0;border-bottom:1px solid #EFEAE0;text-align:left}
.woocommerce table.shop_attributes th{width:220px;font-weight:600;color:var(--ink)}

/* ---------- Phase 5: accordions (product info + FAQ) ---------- */
.product-below-fold{max-width:1280px;margin:0 auto;padding:0 28px}
.product-below-fold > section{padding:70px 0;border-top:1px solid #EFEAE0}
.product-below-fold > section:first-child{border-top:none}

.accordion-group{max-width:800px}
.product-faq .accordion-group,.product-accordions .accordion-group{margin:0 auto}
.accordion-item{border-bottom:1px solid #EFEAE0}
.accordion-item:first-child{border-top:1px solid #EFEAE0}
.accordion-heading{margin:0}
.accordion-trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:22px 4px;background:none;border:none;text-align:left;font-family:inherit;font-size:17px;font-weight:600;color:var(--ink);cursor:pointer}
.accordion-trigger:hover{color:var(--accent)}
.accordion-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.accordion-icon{position:relative;flex-shrink:0;width:20px;height:20px}
.accordion-icon::before,.accordion-icon::after{content:"";position:absolute;top:50%;left:50%;background:var(--accent);transform:translate(-50%,-50%);transition:transform .25s}
.accordion-icon::before{width:14px;height:2px}
.accordion-icon::after{width:2px;height:14px}
.accordion-trigger[aria-expanded="true"] .accordion-icon::after{transform:translate(-50%,-50%) rotate(90deg) scale(0)}
.accordion-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.accordion-panel[aria-hidden="false"]{grid-template-rows:1fr}
.accordion-panel-inner{overflow:hidden}
.accordion-panel-inner > div,.accordion-panel-inner{padding-bottom:24px;color:var(--body);font-size:15.5px;line-height:1.7}
.accordion-panel-inner p:not(:last-child){margin-bottom:1em}
.accordion-panel-inner ul,.accordion-panel-inner ol{padding-left:22px;margin-bottom:1em}

/* ---------- Phase 5: reviews ---------- */
.reviews-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:36px}
.reviews-summary{display:flex;align-items:center;gap:12px}
.reviews-summary-text{font-size:14.5px;color:var(--body)}
.woocommerce #reviews{margin:0}
.woocommerce #reviews .comment-form-rating select{width:auto}
.woocommerce #reviews h2{display:none} /* native "N reviews for X" heading — replaced by .reviews-head above */
.woocommerce #reviews .commentlist{list-style:none;max-width:800px}
.woocommerce #reviews .commentlist li{background:var(--sand);border-radius:var(--r-md);padding:24px;margin-bottom:16px}
.woocommerce #reviews .comment-respond{max-width:800px}
.woocommerce #reviews .comment-reply-title{font-size:22px;font-family:'Fraunces',serif;font-weight:500}

@media(max-width:640px){
  .accordion-trigger{font-size:15.5px;padding:18px 2px}
  .product-below-fold > section{padding:48px 0}
}

@media(max-width:1200px){
  .woocommerce div.product .product-grid{gap:40px}
}
@media(max-width:1000px){
  .woocommerce div.product .product-grid{grid-template-columns:1fr;gap:34px}
  .woocommerce div.product .product_title{font-size:28px}
}