/*
 * 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{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none;padding:0;margin:0;
}
@media(max-width:1100px){ul.products{grid-template-columns:repeat(3,1fr);}}
@media(max-width:760px){ul.products{grid-template-columns:repeat(2,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{aspect-ratio:1/1;object-fit:cover;width:100%;display:block;background:var(--surface-2);transition:transform .55s var(--ease);}
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);}
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. */
@media(max-width:900px){.woocommerce div.product{grid-template-columns:1fr;gap:36px;}}
.woocommerce div.product .woocommerce-product-gallery{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);}
/* 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. */
.woocommerce-product-gallery__wrapper{width:100%;}
.woocommerce-product-gallery__image{width:100%;}
.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;
}
.woocommerce-product-gallery .flex-viewport{width:100%;}
.woocommerce div.product .flex-control-thumbs{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap;list-style:none;padding:0;}
.woocommerce div.product .flex-control-thumbs li img{width:70px;height:70px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);opacity:.6;transition:.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;}
.woocommerce div.product .summary .product_title{font-size:clamp(26px,3.4vw,38px);margin:10px 0 14px;line-height:1.15;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;}
