/*
 * WooCommerce compatibility layer.
 *
 * Rather than duplicating every WooCommerce template file, this restyles
 * WooCommerce's own stable output (its real class names) to match the
 * design system in theme.css. This is the lower-risk, more maintainable
 * approach — WooCommerce core updates won't silently break a template
 * override, and features like AJAX add-to-cart, layered nav widgets, and
 * the block-based Cart/Checkout keep working natively.
 *
 * Only enqueued on WooCommerce pages — see cuptime_scripts() in functions.php.
 */

/* ---- Shop loop (archive-product.php + content-product.php) ---- */
ul.products{
  /* --product-columns is only ever set via an inline style on a specific
     homepage Product Section instance's own <section> wrapper — it never
     leaks to the real shop page, which has no such wrapper and correctly
     falls back to the original fixed 4-column default here. */
  display:grid;grid-template-columns:repeat(var(--product-columns,4),1fr);gap:20px;list-style:none;padding:0;margin:0;
}
@media(max-width:1100px){ul.products{grid-template-columns:repeat(min(3,var(--product-columns,4)),1fr);}}
@media(max-width:760px){ul.products{grid-template-columns:repeat(min(2,var(--product-columns,4)),1fr);gap:14px;}}
@media(max-width:480px){ul.products{grid-template-columns:1fr;}}
ul.products li.product{
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);
  transition:transform .35s var(--ease),border-color .35s;position:relative;list-style:none;
  /* Defensive: WooCommerce's own default stylesheet applies a float-based
     percentage width to li.product based on the "columns-N" class (see the
     loop_shop_columns filter in functions.php) — this explicitly wins over
     that regardless of which columns-N class ends up present, so the CSS
     Grid's own 1fr sizing is always what actually controls card width. */
  width:auto !important;float:none !important;margin:0 !important;
}
ul.products li.product::before{
  content:'';position:absolute;inset:0;border-radius:16px;padding:1px;z-index:1;pointer-events:none;
  background:linear-gradient(135deg,var(--accent),transparent 40%,transparent 60%,var(--accent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;
}
ul.products li.product:hover::before{opacity:1;}
ul.products li.product:hover{border-color:transparent;transform:translateY(-6px);}
ul.products li.product a{color:inherit;text-decoration:none;display:block;}
ul.products li.product .product-thumb-wrap{aspect-ratio:1/1;overflow:hidden;background:var(--surface-2);}
ul.products li.product img{
  /* --product-img-height is an optional per-instance PIXEL override
     (Product Sections -> Image controls). aspect-ratio only fills in a
     dimension left "auto" — so when the height variable is unset (falls
     back to auto here), aspect-ratio:1/1 still produces the original
     square image exactly as before; when a real pixel height IS set, the
     explicit height takes over and aspect-ratio has no effect, per the
     CSS spec, which is exactly the override behavior wanted. Attempting
     to feed a pixel value into aspect-ratio itself (which needs a
     unitless ratio, not a length) would have been invalid CSS — caught
     before shipping. */
  aspect-ratio:1/1;height:var(--product-img-height,auto);object-fit:cover;width:100%;display:block;background:var(--surface-2);transition:transform .55s var(--ease);border-radius:var(--product-img-radius,0);
}
ul.products li.product:hover img{transform:scale(1.07);}
ul.products li.product .woocommerce-loop-product__title{font-family:var(--font-display);font-size:15.5px;color:var(--heading);padding:16px 16px 4px;font-weight:500;line-height:1.35;}
ul.products li.product .price{padding:0 16px 14px;display:block;font-family:var(--font-display);font-size:17px;color:var(--heading);}
/* Short excerpt — only added to cards in the new homepage "Product
   Section" via a temporarily-hooked callback, not part of the shop
   page's own product cards. */
ul.products li.product .product-home-excerpt{padding:0 16px 14px;font-size:12.5px;color:var(--body-dim);line-height:1.6;}
ul.products li.product .price del{color:var(--body-dim);font-family:var(--font-body);font-size:12px;opacity:.7;}
ul.products li.product .price ins{text-decoration:none;}
ul.products li.product .button{
  margin:0 16px 16px;display:block;text-align:center;background:var(--accent);color:#0A0806;
  padding:10px 14px;border-radius:var(--radius);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  transition:background .3s,transform .3s var(--ease);
}
ul.products li.product .button:hover{background:var(--accent-2);transform:translateY(-2px);}
ul.products li.product .onsale{
  position:absolute;top:12px;left:12px;background:var(--accent);color:#0A0806;font-size:9.5px;
  letter-spacing:.09em;text-transform:uppercase;padding:5px 10px;border-radius:20px;font-weight:600;z-index:2;
}
.woocommerce-result-count,.woocommerce-ordering{font-size:13.5px;color:var(--body-dim);}
.woocommerce-ordering select{background:var(--surface);border:1px solid var(--line);color:var(--heading);padding:9px 14px;border-radius:var(--radius);font-family:var(--font-body);font-size:12.5px;}
.woocommerce-pagination ul{display:flex;gap:10px;list-style:none;justify-content:center;margin-top:60px;padding:0;}
.woocommerce-pagination a,.woocommerce-pagination span{
  width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--body-c);
}
.woocommerce-pagination .current{border-color:var(--accent);color:var(--accent);}

/* ---- Single product ---- */
/* NOTE: no display:grid rule here anymore — that was a leftover from
   this file's very first version (before single-product.php was rebuilt
   into the full custom .pd-layout story-section template). It made the
   outer .product wrapper itself a 2-column grid, and since .pd-layout is
   its only direct child, .pd-layout only received ONE of those two
   columns — this was the actual root cause of the "huge empty space on
   the right" bug visible in the live screenshots, not a spacing/margin
   issue. Confirmed via computed-style inspection before removing. */
.woocommerce div.product .woocommerce-product-gallery{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);width:100% !important;display:block !important;max-width:580px;}
/* Real bug fix: WooCommerce's own gallery markup has no default width
   rules strong enough to override the image's intrinsic size, so without
   this the main product image rendered tiny (a few hundred px) inside a
   column meant to hold it at full width — confirmed from a live
   screenshot of the actual bug, not guessed at. Every level of the
   gallery's own DOM chain gets an explicit width here, not just the img
   itself, since WooCommerce's gallery JS (wc-single-product.js, enabled
   via add_theme_support('wc-product-gallery-slider') in functions.php)
   sets some of these via inline styles at runtime, which can otherwise
   partially win over CSS depending on load order.
   Client feedback (later): the gallery had swung too far the other way —
   at 1.08fr of a very wide .wrap (max-width 2200px) the square main image
   became genuinely oversized and unbalanced next to a typically much
   shorter info column. Rebalanced the .pd-layout ratio (see theme.css)
   and added the max-width above as a hard cap, so this can't recur on an
   extra-wide viewport regardless of the grid ratio. */
.woocommerce-product-gallery__wrapper{width:100% !important;}
.woocommerce-product-gallery__image{width:100% !important;display:block !important;}
.woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery img{
  width:100% !important;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;
  max-width:none !important;min-width:100% !important;
}
.woocommerce-product-gallery .flex-viewport{width:100% !important;}
.woocommerce div.product .flex-control-thumbs{display:flex;gap:14px;margin-top:20px;flex-wrap:wrap;list-style:none;padding:0;max-width:580px;}
.woocommerce div.product .flex-control-thumbs li{flex:0 0 auto;}
.woocommerce div.product .flex-control-thumbs li img{
  width:76px;height:76px;aspect-ratio:1/1;object-fit:cover;flex:0 0 76px;
  border-radius:var(--radius);border:1px solid var(--line);opacity:.6;transition:opacity .3s,border-color .3s;cursor:pointer;
}
.woocommerce div.product .flex-control-thumbs li img.flex-active{opacity:1;border-color:var(--accent);}
.woocommerce div.product .summary{max-width:none;}
/* Real fix, paired with the .pd-layout grid change above: once the info
   column could genuinely expand to fill whatever space is left after the
   gallery's fixed-width column, it stretched to 1500px+ on very wide
   screens — comfortable to read text never needs to be that wide, and
   the client's own request said not to make the text unnecessarily wide
   just to fill space. Capped at a normal comfortable reading width,
   still using the column's full width on any realistic desktop size.
   Specificity note, caught before shipping: a plain .pd-info{} rule here
   would have LOST to the "max-width:none" rule directly above (that
   selector has 3 classes + 1 tag; a bare class selector has only 1) and
   silently done nothing regardless of source order — confirmed this by
   testing the actual computed style before settling on the selector
   below, which matches equivalent specificity to correctly win. */
.woocommerce div.product .summary.pd-info{max-width:820px;}
/* Real bug caught while verifying the fix above: this 640px cap is
   unconditional, but .pd-layout switches to a single stacked column at
   1200px and below — at that point the gallery naturally fills its own
   (now full-width) column while .pd-info stayed capped at 640px inside
   its OWN now-full-width column, reproducing the exact same "content
   capped, track wide, dead space trailing it" problem this was meant to
   fix, just in the tablet range instead of desktop. Confirmed by
   measuring both boxes at 1000px and 1200px viewports before adding
   this override, not assumed. */
@media(max-width:1200px){.woocommerce div.product .summary.pd-info{max-width:none;}}
.woocommerce div.product .summary .product_title{font-size:clamp(24px,3vw,30px);margin:10px 0 14px;line-height:1.2;color:var(--heading);font-family:var(--font-display);font-weight:400;}
.woocommerce div.product p.price,.woocommerce div.product span.price{font-family:var(--font-display);font-size:32px;color:var(--heading);margin-bottom:20px;display:block;}
.woocommerce div.product .stock{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:26px;}
.woocommerce div.product .stock.in-stock{color:#7CBE8C;}
.woocommerce div.product .stock.out-of-stock{color:#D9807A;}
.woocommerce div.product form.cart{margin:26px 0;display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.woocommerce div.product form.cart .quantity{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius);}
.woocommerce div.product form.cart .quantity input.qty{width:56px;text-align:center;background:none;border:none;color:var(--heading);font-family:var(--font-body);font-size:14px;height:44px;}
.woocommerce div.product form.cart .single_add_to_cart_button{
  background:var(--accent);color:#0A0806;padding:14px 26px;border-radius:var(--radius);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;border:none;
}
.woocommerce div.product .variations{margin-bottom:22px;width:100%;}
.woocommerce div.product .variations label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--heading);}
.woocommerce div.product .variations select{background:var(--surface);border:1px solid var(--line);color:var(--heading);padding:10px 14px;border-radius:var(--radius);font-family:var(--font-body);width:100%;max-width:280px;}

/* Tabs */
.woocommerce-tabs.wc-tabs-wrapper,.woocommerce-tabs{margin:70px 0 34px;}
.woocommerce-tabs ul.tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);list-style:none;padding:0;flex-wrap:wrap;}
.woocommerce-tabs ul.tabs li{margin:0;}
.woocommerce-tabs ul.tabs li a{padding:14px 22px;display:block;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--body-dim);text-decoration:none;}
.woocommerce-tabs ul.tabs li.active a{color:var(--heading);border-bottom:2px solid var(--accent);}
.woocommerce-tabs .panel{padding-top:10px;font-size:14.5px;color:var(--body-dim);}
.woocommerce-tabs table.shop_attributes{width:100%;border-collapse:collapse;font-size:13.5px;}
.woocommerce-tabs table.shop_attributes tr{border-bottom:1px solid var(--line);}
.woocommerce-tabs table.shop_attributes th,.woocommerce-tabs table.shop_attributes td{padding:13px 10px;color:var(--body-c);text-align:left;font-weight:400;}

/* Related products reuse ul.products styling above */
.related.products{margin-top:60px;}
.related.products > h2{font-family:var(--font-display);font-size:26px;color:var(--heading);margin-bottom:30px;font-weight:400;}

/* ---- Cart & Checkout ---- */
table.shop_table{width:100%;border-collapse:collapse;}
table.shop_table th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--body-dim);padding:0 12px 16px;border-bottom:1px solid var(--line-strong);}
table.shop_table td{padding:22px 12px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--body-c);font-size:14px;}
table.shop_table img{width:64px;height:64px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);}
.cart_totals,.cart-collaterals .cart_totals{border:1px solid var(--line);border-radius:16px;padding:32px;background:var(--surface);}
.cart_totals table{width:100%;}
.cart_totals table td,.cart_totals table th{border-bottom:1px solid var(--line);padding:12px 0;font-size:13.5px;}
.cart_totals .order-total td,.cart_totals .order-total th{border-bottom:none;font-family:var(--font-display);font-size:20px;color:var(--heading);padding-top:18px;}
.wc-proceed-to-checkout .checkout-button{
  width:100%;text-align:center;background:var(--accent);color:#0A0806;padding:14px 26px;border-radius:var(--radius);
  display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-top:16px;
}
.woocommerce-checkout #customer_details .col-1,.woocommerce-checkout #customer_details .col-2{
  border:1px solid var(--line);border-radius:16px;padding:44px;background:var(--surface);margin-bottom:26px;
}
.woocommerce-checkout .form-row label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--body-dim);display:block;margin-bottom:8px;}
.woocommerce-checkout .form-row input.input-text,.woocommerce-checkout .form-row select,.woocommerce-checkout .form-row textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--line);color:var(--heading);padding:14px 16px;
  border-radius:var(--radius);font-family:var(--font-body);font-size:14px;
}
#payment{border:1px solid var(--line);border-radius:16px;background:var(--surface);}
#payment .payment_methods{padding:20px;list-style:none;}
#payment div.payment_box{background:var(--surface-2);border-radius:var(--radius);color:var(--body-dim);font-size:13px;}
#place_order{
  width:100%;background:var(--accent);color:#0A0806;padding:16px 26px;border-radius:var(--radius);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;border:none;
}

/* ---- My Account ---- */
.woocommerce-account .woocommerce{display:grid;grid-template-columns:260px 1fr;gap:44px;align-items:flex-start;}
@media(max-width:860px){.woocommerce-account .woocommerce{grid-template-columns:1fr;}}
.woocommerce-MyAccount-content{}
.woocommerce-MyAccount-content table.shop_table{margin-top:10px;}
.woocommerce-MyAccount-content .button{
  background:var(--accent);color:#0A0806;padding:11px 18px;border-radius:var(--radius);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;display:inline-block;
}
.woocommerce-Message,.woocommerce-error,.woocommerce-info{
  border:1px solid var(--line-strong);background:var(--glass);padding:16px 22px;border-radius:var(--radius);
  font-size:13px;color:var(--body-dim);list-style:none;margin-bottom:26px;
}
.woocommerce-form-row label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--body-dim);}
.woocommerce-form-row input.input-text{
  width:100%;background:var(--surface);border:1px solid var(--line);color:var(--heading);padding:14px 16px;
  border-radius:var(--radius);font-family:var(--font-body);margin-top:8px;
}
.woocommerce-Address-title h3{font-family:var(--font-display);font-size:18px;font-weight:400;color:var(--heading);}
.woocommerce-Addresses{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
.woocommerce-Address{background:var(--bg);padding:28px;}

/* Star rating */
.star-rating{color:var(--accent);font-size:14px;}

/* Product meta (category/SKU line) shown at the top of the single-product
   summary, used as a small eyebrow-style label. */
.product_meta{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px;}
.product_meta a{color:var(--accent);}
.product_meta > span{display:inline;}

/* ================= Homepage Image Gallery (CupTIME Options -> Image
   Gallery). Real replacement, not an addition — the client asked to
   remove all product-selection functionality from this section and turn
   it into a pure image gallery, so this is no longer product-specific
   CSS at all. Same proven scroll-snap slider mechanics as before (real
   touch/swipe on mobile for free, no third-party library), reused for
   plain images instead of WooCommerce product cards. ================= */
.cuptime-slider-arrows{display:flex;gap:10px;flex:none;}
.cuptime-slider-arrow{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
  color:var(--heading);font-size:16px;cursor:pointer;transition:background .3s,border-color .3s;
}
.cuptime-slider-arrow:hover{background:var(--accent);color:#0A0806;border-color:var(--accent);}

.cuptime-image-gallery-slider{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.cuptime-image-gallery-slider::-webkit-scrollbar{display:none;}
.cuptime-gallery-slide{
  position:relative;display:block;flex:0 0 calc((100% - (var(--gallery-columns,3) - 1) * 20px) / var(--gallery-columns,3));
  scroll-snap-align:start;aspect-ratio:4/5;border-radius:var(--card-radius);overflow:hidden;
  background:var(--surface-2);transition:transform .4s var(--ease);
}
.cuptime-gallery-slide:hover{transform:translateY(-6px);}
.cuptime-gallery-slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease);}
.cuptime-gallery-slide:hover img{transform:scale(1.06);}
@media(max-width:1100px){.cuptime-gallery-slide{flex-basis:calc((100% - 20px) / 2);}}
@media(max-width:600px){.cuptime-gallery-slide{flex-basis:85%;}}

.cuptime-gallery-caption{
  position:absolute;inset-inline-start:0;bottom:0;width:100%;padding:20px 18px;
  background:linear-gradient(to top,rgba(0,0,0,.65),transparent);
  color:#fff;font-size:13px;letter-spacing:.02em;
}

.cuptime-gallery-dots{display:flex;justify-content:center;gap:10px;margin-top:32px;}
.cuptime-gallery-dot{
  width:8px;height:8px;border-radius:50%;border:none;background:var(--line-strong);
  cursor:pointer;padding:0;transition:background .3s,transform .3s;
}
.cuptime-gallery-dot.active{background:var(--accent);transform:scale(1.3);}