/* -------------------------------------------------------------------------
   WooCommerce: shop archive, single product, cart, checkout, my-account
   ---------------------------------------------------------------------- */

.woocommerce-page .site-main { padding-block: var(--space-8); }

/* Generic WooCommerce ".button" — used by add-to-cart, checkout, coupon-apply,
   pay/view-order links, and other core-rendered buttons we don't fully
   template-override. Matches .btn--primary since WC's own stylesheet is
   disabled (assets/css/woocommerce.css replaces it entirely). */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 28px; border-radius: var(--radius-pill);
	font-weight: 600; font-size: var(--fs-sm); background: var(--color-graphite); color: #fff; border: none;
	transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
	background: var(--color-charcoal); color: #fff; transform: translateY(-2px);
}
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--color-accent); }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--color-accent-dark); }
.woocommerce a.added_to_cart { display: inline-block; margin-left: var(--space-3); font-size: var(--fs-xs); font-weight: 600; text-decoration: underline; }
.woocommerce .quantity { display: inline-block; }

/* Shop toolbar */
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); gap: var(--space-4); flex-wrap: wrap; }
.shop-toolbar__count { color: var(--color-text-muted); font-size: var(--fs-sm); }
.shop-toolbar__right { display: flex; align-items: center; gap: var(--space-4); }
.shop-toolbar select { padding: 10px 36px 10px 14px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--fs-sm); appearance: none; }
.shop-filter-toggle { display: none; }

.shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-8); align-items: flex-start; }
@media (max-width: 1023px) {
	.shop-layout { grid-template-columns: 1fr; }
	.shop-filter-toggle { display: inline-flex; }
	.shop-filters-panel { position: fixed; inset: 0; z-index: 960; background: var(--color-surface); padding: var(--space-6); overflow-y: auto; transform: translateX(-100%); transition: transform var(--duration-base) var(--ease-out); }
	.shop-filters-panel.is-open { transform: translateX(0); }
}

.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-5); }
.active-filters a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--color-mist); font-size: var(--fs-xs); }

/* Single product */
.product-page { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); margin-bottom: var(--space-9); }
@media (max-width: 900px) { .product-page { grid-template-columns: 1fr; gap: var(--space-6); } }

.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery__wrapper { border-radius: var(--radius-lg); overflow: hidden; background: var(--color-mist); margin-bottom: var(--space-4); }
.woocommerce-product-gallery__image { aspect-ratio: 1/1; }
.woocommerce-product-gallery__image img { width: 100%; height: 100%; object-fit: cover; }
.woocommerce-product-gallery .flex-control-thumbs { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.woocommerce-product-gallery .flex-control-thumbs li { width: 76px; height: 76px; }
.woocommerce-product-gallery .flex-control-thumbs img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; opacity: 0.7; transition: all var(--duration-fast) var(--ease-out); }
.woocommerce-product-gallery .flex-control-thumbs img.flex-active, .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; border-color: var(--color-graphite); }
.woocommerce-product-gallery__trigger { position: absolute; top: 16px; right: 16px; z-index: 2; background: rgba(255,255,255,0.9); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.product-summary__cat a { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent); }
.product-summary h1 { font-size: var(--fs-2xl); margin-block: var(--space-2) var(--space-3); }
.product-summary__rating { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.product-summary__rating a { font-size: var(--fs-xs); color: var(--color-text-muted); text-decoration: underline; }
.product-summary__price { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; margin-bottom: var(--space-5); }
.product-summary__price del { font-size: var(--fs-md); color: var(--color-text-muted); font-weight: 400; margin-right: var(--space-3); }
.product-summary__excerpt { color: var(--color-text-muted); margin-bottom: var(--space-6); }

.product-options { display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-6); }
.product-options__group label { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--space-3); }

.product-add-to-cart { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); flex-wrap: wrap; align-items: center; }
.product-add-to-cart .wishlist-btn { position: static; width: 52px; height: 52px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 50%; flex-shrink: 0; }

/* WooCommerce's add-to-cart <form class="cart"> wraps the quantity stepper
   and submit button — lay those out inline and let the form itself grow to
   fill the row alongside the wishlist button. */
.woocommerce form.cart { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; flex: 1; }
.woocommerce form.cart .single_add_to_cart_button { flex: 1; min-width: 180px; }
.woocommerce form.cart div.quantity { flex-shrink: 0; }
.woocommerce form.cart table.variations { width: 100%; margin-bottom: var(--space-4); }
.woocommerce form.cart table.variations td { padding: 0 0 var(--space-3); border: none; }
.woocommerce form.cart table.variations label { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--space-2); }
.woocommerce form.cart table.variations select { width: 100%; max-width: 320px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); }
.woocommerce .single_variation_wrap { flex-basis: 100%; }
.woocommerce .woocommerce-variation-add-to-cart { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.purchase-benefits { display: flex; flex-direction: column; gap: 10px; padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.purchase-benefits li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.purchase-benefits svg { width: 18px; height: 18px; color: var(--color-success); flex-shrink: 0; }

.stock-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-4); }
.stock-status.in-stock { color: var(--color-success); }
.stock-status.out-of-stock { color: var(--color-danger); }
.stock-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Product feature sections (spec 26/27 — reuse .product-story__row) */
.product-video { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; margin-bottom: var(--space-8); }
.product-video iframe, .product-video video { width: 100%; height: 100%; }

/* Related / upsell / recently-viewed rails */
.product-rail { margin-top: var(--space-9); }

/* -------------------------------------------------------------------------
   Cart page
   ---------------------------------------------------------------------- */
table.cart, table.shop_table { width: 100%; border-collapse: collapse; }
table.cart th, table.shop_table th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
table.cart td, table.shop_table td { padding: var(--space-5) var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
table.cart .product-thumbnail img, table.shop_table img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-mist); }
table.cart .product-remove a { font-size: 20px; color: var(--color-text-muted); }
.cart-collaterals { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-8); margin-top: var(--space-8); align-items: start; }
@media (max-width: 900px) { .cart-collaterals { grid-template-columns: 1fr; } }
.cart_totals { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.cart_totals h2 { font-size: var(--fs-md); margin-bottom: var(--space-5); }
.cart_totals table { margin-bottom: var(--space-5); }
.cart_totals table th, .cart_totals table td { border: none; padding: 10px 0; }
.wc-proceed-to-checkout .checkout-button { width: 100%; text-align: center; }
.coupon { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); flex-wrap: wrap; }
.coupon input[type="text"] { flex: 1; min-width: 180px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }

@media (max-width: 767px) {
	table.cart thead { display: none; }
	table.cart tr { display: grid; grid-template-columns: 84px 1fr; gap: var(--space-4); padding-block: var(--space-4); }
	table.cart td { border: none; padding: 4px 0; }
}

/* -------------------------------------------------------------------------
   Checkout
   ---------------------------------------------------------------------- */
.woocommerce-checkout .col2-set, .woocommerce-checkout-review-order { max-width: 100%; }
#customer_details { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.checkout-trust-messages { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-bottom: var(--space-8); }
@media (max-width: 900px) { .checkout-trust-messages { grid-template-columns: repeat(2, 1fr); } }
.checkout-trust-messages__item { text-align: center; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.checkout-trust-messages__item svg { width: 26px; height: 26px; margin-bottom: var(--space-3); color: var(--color-accent); }
.checkout-trust-messages__item h4 { font-size: var(--fs-sm); margin-bottom: 4px; }
.checkout-trust-messages__item p { font-size: var(--fs-xs); color: var(--color-text-muted); }
#order_review { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.woocommerce form .form-row { margin-bottom: var(--space-4); }
.woocommerce form .form-row label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 6px; }
.woocommerce form .form-row input, .woocommerce form .form-row select, .woocommerce form .form-row textarea {
	width: 100%; padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface);
}
.woocommerce form .form-row.woocommerce-invalid input { border-color: var(--color-danger); }
#payment { background: var(--color-mist); border-radius: var(--radius-md); padding: var(--space-5); margin-top: var(--space-5); }
#payment ul.payment_methods { display: flex; flex-direction: column; gap: var(--space-3); }
#payment .payment_box { padding: var(--space-4); margin-top: var(--space-3); background: var(--color-surface); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--color-text-muted); }
#place_order { width: 100%; }

/* -------------------------------------------------------------------------
   My Account
   ---------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation { display: none; } /* replaced by .account-nav in template */
.woocommerce-MyAccount-content table.shop_table { margin-top: var(--space-5); }
.woocommerce-form-login, .woocommerce-form-register { max-width: 440px; margin-inline: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-7); }
.woocommerce-form-login .form-row label, .woocommerce-form-register .form-row label { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: 6px; }
.woocommerce-form-login input, .woocommerce-form-register input { width: 100%; padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); margin-bottom: var(--space-4); }
.woocommerce-form-login__submit, .woocommerce-form-register__submit { width: 100%; }
.u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
@media (max-width: 767px) { .u-columns { grid-template-columns: 1fr; } }

/* Notices */
.woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-notice {
	list-style: none; padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm);
	background: var(--color-mist); margin-bottom: var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}
.woocommerce-error { background: rgba(196,68,47,0.08); color: var(--color-danger); }
.woocommerce-message { background: rgba(47,122,77,0.08); color: var(--color-success); }
.woocommerce-message a.button, .woocommerce-error a.button { background: var(--color-graphite); color: #fff; padding: 8px 18px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; }

/* Reviews (Product Reviews section) */
#reviews #comments { max-width: 760px; }
.commentlist { display: flex; flex-direction: column; gap: var(--space-5); }
.commentlist .comment_container { display: flex; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.commentlist .avatar { border-radius: 50%; width: 44px; height: 44px; }
#review_form .comment-form-rating select { width: auto; }