/* ==========================================================================
   WOOCOMMERCE + WOOCOMMERCE SUBSCRIPTIONS
   Restyles WooCommerce's default markup to match the site's design system.
   Loaded after design-system.css — see inc/woocommerce.php for the wrapper
   markup and theme-support setup this file assumes is in place.
   ========================================================================== */

.woo-section{ padding-top:calc(84px + clamp(2.5rem,6vw,5rem)); }

.woocommerce, .woocommerce-page{
  font-family:var(--body);
  color:var(--ink);
}
.woocommerce h1, .woocommerce h2, .woocommerce h3{
  font-family:var(--display-heading);
  font-weight:900;
  letter-spacing:-0.01em;
}
.woocommerce a{ color:inherit; }
.woocommerce a:hover{ color:var(--volt-dim); }

/* ---------- Breadcrumb ---------- */
.woocommerce-breadcrumb{
  font-family:var(--display); font-size:0.85rem; font-weight:600; color:var(--steel);
  margin-bottom:1.5rem; padding-bottom:0; border:0;
}
.woocommerce-breadcrumb a{ color:var(--steel); }
.woocommerce-breadcrumb a:hover{ color:var(--ink); }

/* ---------- Notices ---------- */
.woocommerce-message, .woocommerce-error, .woocommerce-info,
ul.woocommerce-error, ul.woocommerce-message, ul.woocommerce-info{
  list-style:none; margin:0 0 2rem; padding:1rem 1.25rem;
  background:var(--cloud); border:0; border-left:3px solid var(--ink);
  font-size:0.92rem; display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem;
}
.woocommerce-message{ border-left-color:var(--volt); }
.woocommerce-error{ border-left-color:var(--steel); }
.woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before{ display:none; }
.woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button{
  margin-left:auto; order:2;
}

/* ---------- Buttons (all WC contexts: add to cart, checkout, my account) ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce-Button{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-family:var(--display); font-weight:600; font-size:0.95rem;
  padding:0.9rem 1.5rem; border-radius:0;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  transition:background .3s ease, color .3s ease, border-color .3s ease;
  white-space:nowrap; text-shadow:none; box-shadow:none;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{
  background:var(--volt); color:var(--volt-ink); border-color:var(--volt);
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #payment #place_order{
  background:var(--volt); color:var(--volt-ink); border-color:var(--volt);
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce #payment #place_order:hover{
  background:var(--ink); color:var(--paper); border-color:var(--ink);
}
/* De-emphasized actions (cancel subscription/order, remove item) read as
   outline buttons rather than a red "danger" color, to stay in the
   theme's single-accent palette. */
.woocommerce a.button.cancel, .subscription_details a.cancel,
a[href*="cancel_order"], a[href*="cancel-subscription"]{
  background:transparent; color:var(--steel); border-color:var(--mist);
}
.woocommerce a.button.cancel:hover, .subscription_details a.cancel:hover,
a[href*="cancel_order"]:hover, a[href*="cancel-subscription"]:hover{
  background:transparent; color:var(--ink); border-color:var(--ink);
}
.woocommerce .added_to_cart{
  font-family:var(--display); font-size:0.85rem; font-weight:600; margin-left:1rem;
}

/* ---------- Forms ---------- */
.woocommerce form .form-row label{
  font-family:var(--display); font-size:0.85rem; font-weight:600; color:var(--ink);
}
.woocommerce form .form-row .required{ color:var(--volt); text-decoration:none; }
.woocommerce table.shop_table td .input-text,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  border:0; border-bottom:1px solid var(--mist); border-radius:0;
  background:transparent; padding:0.7rem 0.1rem; font-family:var(--body); font-size:1rem;
  color:var(--ink); box-shadow:none; height:auto;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  border-color:var(--ink); outline:none; box-shadow:none;
}
.woocommerce table.shop_table .quantity .qty{
  border:1px solid var(--mist); background:transparent; text-align:center;
  padding:0.5rem; width:64px; font-family:var(--body);
}
.woocommerce-additional-fields, .woocommerce-billing-fields, .woocommerce-shipping-fields{
  border-top:1px solid var(--mist); padding-top:2rem; margin-top:2rem;
}

/* ---------- Product loop (shop / related / upsells / cross-sells) ---------- */
.woocommerce ul.products{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter);
  list-style:none; margin:0; padding:0;
}
@media (max-width:1000px){ .woocommerce ul.products{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .woocommerce ul.products{ grid-template-columns:1fr; } }
.woocommerce ul.products li.product{
  margin:0; text-align:left;
}
.woocommerce ul.products li.product img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--mist); margin-bottom:1rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--ink); margin-bottom:0.35rem;
}
.woocommerce ul.products li.product .price{
  font-family:var(--display); color:var(--steel); font-size:0.95rem;
}
.woocommerce ul.products li.product .price ins{ color:var(--ink); text-decoration:none; }
.woocommerce ul.products li.product .price del{ color:var(--fog); opacity:0.7; }
.woocommerce ul.products li.product .button{
  margin-top:1rem; width:100%; justify-content:center;
  background:transparent; color:var(--ink); border:1px solid var(--ink);
}
.woocommerce ul.products li.product .button:hover{
  background:var(--ink); color:var(--paper);
}
.woocommerce ul.products li.product .onsale{
  font-family:var(--display); font-size:0.7rem; font-weight:600;
  background:var(--volt); color:var(--volt-ink); border-radius:0;
  padding:0.3rem 0.6rem; top:0; left:0; min-height:0; min-width:0; line-height:1;
}
.woocommerce .star-rating{ color:var(--volt); font-size:0.9rem; }
.woocommerce .star-rating::before{ color:var(--mist); }

/* ---------- Single product page ---------- */
.woocommerce div.product{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); align-items:start; }
@media (max-width:800px){ .woocommerce div.product{ grid-template-columns:1fr; } }
.woocommerce div.product .woocommerce-product-gallery img{ border:1px solid var(--mist); }
.woocommerce div.product .product_title{
  font-size:clamp(2rem,3.4vw,3rem); margin-bottom:0.75rem;
}
.woocommerce div.product p.price, .woocommerce div.product span.price{
  font-family:var(--display); font-size:1.5rem; font-weight:600; color:var(--ink);
  margin-bottom:1.25rem; display:block;
}
.woocommerce div.product p.price del{ color:var(--fog); font-size:1rem; margin-right:0.5rem; }
.woocommerce div.product p.price ins{ text-decoration:none; }
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--steel); font-size:1.02rem; line-height:1.6; margin-bottom:1.5rem;
}
.woocommerce div.product form.cart{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.woocommerce div.product .quantity{ display:flex; }
.woocommerce div.product table.variations{ margin-bottom:1.5rem; width:100%; }
.woocommerce div.product table.variations td.label{
  font-family:var(--display); font-weight:600; font-size:0.85rem; padding-right:1rem;
}
.woocommerce div.product table.variations select{
  border:1px solid var(--mist); padding:0.6rem 0.8rem; width:100%; background:transparent;
}
.woocommerce-product-details__short-description ul{ padding-left:1.1rem; }

/* Tabs (description / additional info / reviews) */
.woocommerce-tabs{ margin-top:3rem; }
.woocommerce-tabs ul.tabs{
  display:flex; gap:2rem; list-style:none; margin:0 0 2rem; padding:0;
  border-bottom:1px solid var(--mist);
}
.woocommerce-tabs ul.tabs li{ margin:0; padding:0; }
.woocommerce-tabs ul.tabs li a{
  font-family:var(--display); font-weight:600; font-size:0.95rem; color:var(--steel);
  padding-bottom:0.9rem; display:inline-block; position:relative; text-decoration:none;
}
.woocommerce-tabs ul.tabs li.active a{ color:var(--ink); }
.woocommerce-tabs ul.tabs li.active a::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--volt-dim);
}
.woocommerce-tabs .panel{ max-width:70ch; color:var(--steel); line-height:1.7; }
.woocommerce-tabs .panel h2{ font-size:1.4rem; margin-bottom:1rem; }

/* Related products */
.related.products, .up-sells.upsells{ margin-top:4rem; padding-top:3rem; border-top:1px solid var(--mist); }
.related.products > h2, .up-sells.upsells > h2{
  font-family:var(--display-heading); font-weight:900; font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:2rem;
}

/* ---------- Tables (cart / checkout review / orders / subscriptions) ---------- */
.woocommerce table.shop_table{
  width:100%; border-collapse:collapse; border:0; border-top:1px solid var(--mist);
  font-size:0.95rem;
}
.woocommerce table.shop_table th{
  font-family:var(--display); font-weight:600; font-size:0.82rem; color:var(--steel);
  text-align:left; padding:1rem 0.75rem; border-bottom:1px solid var(--mist);
}
.woocommerce table.shop_table td{
  padding:1.25rem 0.75rem; border-bottom:1px solid var(--mist); vertical-align:middle;
}
.woocommerce table.shop_table td.product-name a{ font-weight:600; }
.woocommerce table.shop_table td.product-thumbnail img{
  width:72px; height:72px; object-fit:cover; border:1px solid var(--mist);
}
.woocommerce table.shop_table tfoot th, .woocommerce table.shop_table tfoot td{
  font-family:var(--display); font-weight:600;
}
.woocommerce table.shop_table .order-total .amount{ font-size:1.15rem; color:var(--ink); }
.woocommerce a.remove{
  color:var(--steel) !important; border:1px solid var(--mist) !important; border-radius:0 !important;
  background:transparent !important; width:28px; height:28px; line-height:26px !important;
  font-size:1.1rem !important;
}
.woocommerce a.remove:hover{ color:var(--paper) !important; background:var(--ink) !important; border-color:var(--ink) !important; }

/* Cart totals box */
.cart-collaterals .cart_totals{
  border:1px solid var(--mist); padding:1.75rem; max-width:420px; margin-left:auto;
}
.cart-collaterals .cart_totals h2{ font-size:1.3rem; margin-bottom:1.25rem; }
.cart-collaterals .cart_totals table{ border-top:0; }
.cart-collaterals .cart_totals table th, .cart-collaterals .cart_totals table td{ padding:0.85rem 0; }
.woocommerce-shipping-calculator .button{ margin-top:0.75rem; }

/* Checkout layout */
.woocommerce-checkout #customer_details{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); }
@media (max-width:800px){ .woocommerce-checkout #customer_details{ grid-template-columns:1fr; } }
#order_review_heading, #order_review{ margin-top:2.5rem; }
.woocommerce-checkout-review-order-table{ border-top:1px solid var(--mist); }
.woocommerce-checkout-payment ul.payment_methods{ list-style:none; padding:0; border-top:1px solid var(--mist); }
.woocommerce-checkout-payment li.payment_method{ padding:1rem 0; border-bottom:1px solid var(--mist); }
.woocommerce-checkout-payment li.payment_method label{ font-family:var(--display); font-weight:600; }
.woocommerce-checkout-payment div.payment_box{
  background:var(--cloud); padding:1rem 1.25rem; margin-top:0.75rem; font-size:0.9rem; color:var(--steel);
}
.woocommerce-checkout-payment div.payment_box::before{ display:none; }

/* ---------- My Account ---------- */
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; border-top:1px solid var(--mist); }
.woocommerce-MyAccount-navigation li{
  border-bottom:1px solid var(--mist);
}
.woocommerce-MyAccount-navigation li a{
  display:block; padding:0.9rem 0.25rem; font-family:var(--display); font-weight:600; font-size:0.95rem; color:var(--steel);
}
.woocommerce-MyAccount-navigation li.is-active a{ color:var(--ink); }
.woocommerce-MyAccount-navigation li a:hover{ color:var(--ink); }
.woocommerce-account .woocommerce-MyAccount-content{ padding-top:0.5rem; }
.woocommerce-account .addresses .title h3{ font-family:var(--display); font-size:1.05rem; }
.woocommerce-Address{ border:1px solid var(--mist); padding:1.5rem; margin-top:1rem; }
.woocommerce-Address-title h3{ display:flex; justify-content:space-between; align-items:center; }
.woocommerce-MyAccount-content .woocommerce-Message{ margin-bottom:1.5rem; }

/* Orders + Subscriptions tables reuse table.shop_table styling above;
   these add a couple My-Account-specific tweaks. */
.woocommerce-orders-table__cell-order-actions .button,
.subscription-actions .button{ margin:0.2rem 0.3rem 0.2rem 0; }

/* ---------- WooCommerce Subscriptions ---------- */
mark.subscription-status{
  display:inline-flex; align-items:center; gap:0.4rem;
  font-family:var(--display); font-weight:600; font-size:0.72rem;
  padding:0.3rem 0.65rem; border:1px solid var(--mist); border-radius:0;
  background:transparent; color:var(--steel);
}
mark.subscription-status::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--fog); flex-shrink:0;
}
/* Active is the one status that gets the brand accent — every other
   status (on-hold, cancelled, expired, pending-cancel, switched) stays
   neutral gray so the accent still reads as meaningful, not decorative. */
mark.subscription-status.status-active{ color:var(--ink); border-color:var(--ink); }
mark.subscription-status.status-active::before{ background:var(--volt); }

table.subscription_details{ border-top:1px solid var(--mist); margin-bottom:2rem; }
table.subscription_details th{
  font-family:var(--display); font-weight:600; font-size:0.82rem; color:var(--steel);
  text-align:left; padding:0.85rem 0.75rem; border-bottom:1px solid var(--mist); width:220px;
}
table.subscription_details td{ padding:0.85rem 0.75rem; border-bottom:1px solid var(--mist); }

.subscription_details .subscription-actions,
.woocommerce-order-details + .subscription-actions{
  display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:1.5rem;
}

/* ---------- Pagination ---------- */
.woocommerce nav.woocommerce-pagination ul{
  border:1px solid var(--mist); border-radius:0; display:inline-flex;
}
.woocommerce nav.woocommerce-pagination ul li{ border-right:1px solid var(--mist); }
.woocommerce nav.woocommerce-pagination ul li:last-child{ border-right:0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  font-family:var(--display); font-weight:600; padding:0.7rem 1rem; color:var(--steel); border-radius:0;
}
.woocommerce nav.woocommerce-pagination ul li span.current{ background:var(--ink); color:var(--paper); }
.woocommerce nav.woocommerce-pagination ul li a:hover{ background:var(--cloud); color:var(--ink); }