/* =============================================================================
   FILE: shop.css
   WHAT: All WooCommerce-related styling -- the product grid/archive, single
         product page, cart, checkout (the SIMPLIFIED checkout flow is the
         project's #1 e-shop requirement), and the My Account pages.
   WHY conditionally loaded: only enqueued on actual WooCommerce pages (shop,
         product, cart, checkout, account -- see inc/enqueue.php). A blog
         post page never downloads this file.
   IMPORTANT: WooCommerce's own bundled stylesheets (woocommerce.css,
         woocommerce-layout.css, woocommerce-smallscreen.css) are turned OFF
         entirely (see the `woocommerce_enqueue_styles` filter in
         inc/woocommerce.php) so this file is the ONLY styling WooCommerce
         pages get. That means every selector below is written to match
         WooCommerce's own default HTML output/class names (things like
         .woocommerce ul.products, .cart_totals, .wc_payment_methods) --
         if a future WooCommerce update changes those class names, this
         file is the place to check and update.
   LOAD ORDER: seventh, after components.css, ONLY on WooCommerce pages.
   ============================================================================= */

/* -----------------------------------------------------------------------
   CONTENT WRAPPER (see woocommerce/global/wrapper-start.php/wrapper-end.php
   -- the <div> WooCommerce wraps around every shop/product/cart/checkout/
   account page's main content, via the woocommerce_before_main_content /
   woocommerce_after_main_content hooks)
   ----------------------------------------------------------------------- */
.woocommerce-content-wrapper {
	padding-block: var(--space-8);
}

/* -----------------------------------------------------------------------
   GENERIC WOOCOMMERCE BUTTONS
   WooCommerce's OWN un-overridden templates print a plain, un-styled
   `.button` class on every action button across the whole plugin --
   Cart's "Update cart"/"Apply coupon", Checkout's "Update totals" and
   "Place order" (`#place_order`), the Cart page's "Proceed to checkout"
   link, and My Account's "Log in"/"Register" submit buttons all use it.
   `.button.alt` marks the higher-emphasis ones (Place Order, Proceed to
   Checkout). Since WooCommerce's own bundled stylesheet is disabled (see
   the woocommerce_enqueue_styles filter in inc/woocommerce.php), THIS is
   the only place any of these buttons get any styling at all -- without
   it, the single most important button on the whole site (Place Order)
   would render as a bare, unstyled browser button.
   ----------------------------------------------------------------------- */
.woocommerce .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-sm);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid var(--color-blue-600);
	background-color: transparent;
	color: var(--color-blue-600);
	min-height: 44px;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.woocommerce .button:hover {
	background-color: var(--color-blue-100);
	color: var(--color-blue-700);
}

/* The higher-emphasis variant -- solid blue, matching .btn--primary in
   components.css -- used for Place Order / Proceed to Checkout. */
.woocommerce .button.alt {
	background-color: var(--color-blue-600);
	border-color: var(--color-blue-600);
	color: var(--color-white);
}
.woocommerce .button.alt:hover {
	background-color: var(--color-blue-700);
	border-color: var(--color-blue-700);
	color: var(--color-white);
}

/* -----------------------------------------------------------------------
   PRODUCT GRID (shop archive / category pages)
   Reuses the SAME .card component from components.css (see
   woocommerce/content-product.php) so products and blog posts look like
   one consistent design system, not two different theme styles bolted
   together.
   ----------------------------------------------------------------------- */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-6);
	list-style: none;
	padding: 0;
}

.woocommerce ul.products li.product {
	/* WooCommerce's own template already wraps each product in <li
	   class="product">; content-product.php puts our .card markup INSIDE
	   that <li>, so this selector just clears WooCommerce's default list
	   spacing/width assumptions so our .card grid can take over cleanly. */
	margin: 0;
	width: auto;
}

/* The product thumbnail image is printed by WooCommerce's own
   woocommerce_template_loop_product_thumbnail() function (we don't build
   this <img> tag ourselves, see content-product.php), so we style it
   here to match the same aspect-ratio/crop look as a blog post's
   .card__thumb (assets/css/components.css) -- keeping posts and products
   visually consistent even though the image markup comes from two
   different sources. */
.woocommerce ul.products li.product img {
	aspect-ratio: 3 / 2;
	width: 100%;
	object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--text-h4);
	margin: var(--space-3) 0 var(--space-2);
}

.woocommerce ul.products li.product a {
	text-decoration: none;
	color: inherit;
}

.woocommerce ul.products li.product .card__body {
	padding: 0 var(--space-4) var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	flex: 1;
}

/* If Woo's "Shop page display" setting (WooCommerce > Settings >
   Products) is set to show product CATEGORIES (either instead of or
   alongside products), each subcategory tile is printed by WooCommerce's
   own, un-overridden content-product-cat.php -- a different template
   from our content-product.php, so it doesn't get our .card/.card__body
   classes. Its <li> DOES still get WooCommerce's own "product-category
   product" classes though (confirmed in WC core's
   wc_get_product_cat_class()), so the image-aspect-ratio rule above
   still applies -- we just need a little extra styling here so the
   title/count underneath the image doesn't look bare by comparison. */
.woocommerce ul.products li.product-category {
	text-align: center;
	padding-bottom: var(--space-4);
}

.woocommerce-loop-category__title {
	font-size: var(--text-h4);
	margin: var(--space-3) var(--space-4) 0;
}

/* WooCommerce wraps the subcategory's post count in a bare <mark> tag,
   which browsers give a jarring default yellow highlighter-pen style --
   restyle it to match our tag-pill look instead (see components.css). */
.woocommerce-loop-category__title .count {
	display: inline-block;
	background-color: var(--color-blue-100);
	color: var(--color-blue-700);
	font-size: var(--text-caption);
	padding: var(--space-1) var(--space-2);
	border-radius: 999px;
	font-weight: 600;
	vertical-align: middle;
}

/* WooCommerce's own "Add to cart" link/button, printed by
   woocommerce_template_loop_add_to_cart() -- restyled to match our .btn
   component (assets/css/components.css) instead of WooCommerce's default
   button look, which we no longer load (see the woocommerce_enqueue_styles
   filter in inc/woocommerce.php). */
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 var(--space-4) var(--space-4);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-sm);
	background-color: var(--color-blue-600);
	color: var(--color-white);
	font-weight: 600;
	min-height: 40px;
}
.woocommerce ul.products li.product .add_to_cart_button:hover,
.woocommerce ul.products li.product .button:hover {
	background-color: var(--color-blue-700);
	color: var(--color-white);
}

.woocommerce span.price {
	font-weight: 700;
	color: var(--color-black);
}

.woocommerce del .amount {
	/* the original (crossed-out) price shown next to a sale price */
	color: var(--color-gray-600);
	font-weight: 400;
	opacity: 0.7;
}

.woocommerce ins .amount {
	/* the new, discounted price -- WooCommerce wraps it in <ins> (inserted text) */
	color: var(--color-error);
	text-decoration: none;
}

.woocommerce .star-rating {
	font-size: var(--text-caption); /* star rating = meta info, not body copy */
	color: var(--color-blue-600);
}

/* -----------------------------------------------------------------------
   SINGLE PRODUCT PAGE
   Gallery zoom/lightbox/slider behavior comes FREE from WooCommerce core
   itself once the theme declares `wc-product-gallery-zoom/-lightbox/
   -slider` support (see inc/woocommerce.php) -- no custom carousel JS is
   needed for the product image gallery, only layout/spacing here.
   ----------------------------------------------------------------------- */
.woocommerce div.product {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	padding-block: var(--space-8);
}

@media (min-width: 1024px) {
	.woocommerce div.product {
		/* gallery column + summary column side by side once there's room */
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce div.product .woocommerce-product-gallery img {
	border-radius: var(--radius-md);
}

.woocommerce div.product .price {
	font-size: var(--text-h3);
	display: block;
	margin-block: var(--space-4);
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	margin-block: var(--space-4);
}

.woocommerce div.product .quantity input.qty {
	width: 4.5rem;
	text-align: center;
}

/* -----------------------------------------------------------------------
   CART
   MOBILE (default): each row becomes a stacked "card" using CSS Grid to
   re-arrange the table's own cells -- this is a well-known technique for
   making an HTML <table> responsive WITHOUT JavaScript: the table/row/
   cell elements stay in the DOM (screen readers still understand it's a
   table), but we override how they're DISPLAYED and PLACED visually.
   DESKTOP (min-width: 768px): switches to a normal-looking table.
   ----------------------------------------------------------------------- */
.woocommerce table.cart {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce table.cart thead {
	display: none; /* column headers aren't useful once rows become stacked cards on mobile */
}

.woocommerce table.cart tr {
	display: grid;
	grid-template-columns: 80px 1fr; /* thumbnail column + everything-else column */
	grid-template-areas:
		"thumb  name"
		"thumb  price"
		"thumb  qty"
		"thumb  total"
		"thumb  remove";
	gap: var(--space-1) var(--space-4);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-gray-200);
}

.woocommerce table.cart td {
	border: none;
	padding: 0;
}

.woocommerce table.cart td.product-thumbnail { grid-area: thumb; }
.woocommerce table.cart td.product-name      { grid-area: name; font-weight: 600; }
.woocommerce table.cart td.product-price     { grid-area: price; color: var(--color-gray-600); }
.woocommerce table.cart td.product-quantity  { grid-area: qty; }
.woocommerce table.cart td.product-subtotal  { grid-area: total; font-weight: 700; }
.woocommerce table.cart td.product-remove    { grid-area: remove; }

.woocommerce table.cart td.product-thumbnail img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

@media (min-width: 768px) {
	.woocommerce table.cart thead {
		display: table-header-group; /* headers come back once there's room for a real table */
	}

	.woocommerce table.cart tr {
		display: table-row; /* undo the mobile grid-card layout entirely */
	}

	.woocommerce table.cart td {
		display: table-cell;
		padding: var(--space-3);
		vertical-align: middle;
	}
}

/* -----------------------------------------------------------------------
   ORDER TOTALS (cart page's cart_totals box)
   ----------------------------------------------------------------------- */
.cart_totals {
	background-color: var(--color-gray-50);
	border-radius: var(--radius-md);
	padding: var(--space-6);
}

/* -----------------------------------------------------------------------
   CHECKOUT -- THE SIMPLIFIED FLOW
   One page, no JS-driven "wizard" steps (a hidden/shown multi-step form
   breaks the browser back button and confuses password managers/autofill,
   and is exactly the kind of fragile complexity this theme avoids) --
   instead, ONE simple, well-proven layout: a two-column grid on desktop
   (billing/delivery FORM on the left, an ORDER SUMMARY + payment panel
   pinned to the right via `position: sticky`, so the running total stays
   in view while filling out the form above it) collapsing to a single
   stacked column on mobile, where the summary panel simply appears after
   the form in normal reading order.
   NOTE ON WHY THERE'S NO COLLAPSED <details> VERSION ON MOBILE: an
   earlier version of this design considered hiding the order summary
   behind a collapsed <details> on small screens. We deliberately dropped
   that -- the order summary panel contains the LIVE payment method radio
   buttons and the "Place Order" button, not just static text, and hiding
   real, interactive form fields behind an accordion a shopper might not
   think to open would hurt checkout completion, not help it. A sticky
   panel that only applies at a width wide enough to have a spare column
   is both simpler and safer.
   ----------------------------------------------------------------------- */
.checkout-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	align-items: start;
}

@media (min-width: 1024px) {
	.checkout-layout {
		grid-template-columns: 1.5fr 1fr;
	}

	.order-summary {
		position: sticky;
		top: calc(var(--space-4) + 64px); /* clears the sticky site header
		                                      (see .site-header in layout.css)
		                                      so the two sticky elements don't
		                                      overlap each other */
	}
}

.order-summary {
	background-color: var(--color-gray-50);
	border-radius: var(--radius-md);
	padding: var(--space-6);
}

.order-summary h2 {
	font-size: var(--text-h4);
}

/* The cart line-items + totals table inside the order summary panel,
   printed by WooCommerce's own un-overridden checkout/review-order.php
   (class "shop_table woocommerce-checkout-review-order-table") -- a
   different table/markup from the separate Cart PAGE table styled above
   (".woocommerce table.cart"), so it needs its own rules rather than
   inheriting that one. Without this, it was falling back to base.css's
   completely generic <table> styling, looking visually inconsistent with
   every other table on the site. */
.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-4);
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-gray-200);
	text-align: left;
}

.woocommerce-checkout-review-order-table th {
	font-size: var(--text-caption); /* column headers = meta text */
	color: var(--color-gray-600);
}

.woocommerce-checkout-review-order-table td.product-total {
	text-align: right;
	font-weight: 600;
}

.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
}
.woocommerce-checkout-review-order-table tfoot th {
	text-align: left;
}

.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout-review-order-table tr.order-total td {
	font-size: var(--text-h4);
	font-weight: 700;
	border-bottom: none;
}
.checkout-step {
	margin-bottom: var(--space-8);
	padding-bottom: var(--space-8);
	border-bottom: 1px solid var(--color-gray-200);
}

.checkout-step:last-child {
	border-bottom: none;
}

.checkout-step__heading {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

/* A small numbered circle drawn with pure CSS (::before content) instead
   of an image -- "1", "2", "3" are supplied directly in the HTML (see
   form-checkout.php) so screen readers read the number naturally. */
.checkout-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--color-blue-600);
	color: var(--color-white);
	font-size: var(--text-caption);
	font-weight: 700;
	flex-shrink: 0;
}

/* Removed default fields (billing_company, billing_address_2 -- see the
   woocommerce_checkout_fields filter in inc/woocommerce.php) means the
   remaining fields can be laid out in a clean 2-column grid on wider
   screens without feeling cramped. */
.woocommerce-billing-fields .form-row,
.woocommerce-shipping-fields .form-row {
	margin-bottom: var(--space-4);
}

@media (min-width: 640px) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 var(--space-4);
	}

	/* Fields WooCommerce marks with the "form-row-wide" class (like street
	   address) should still span the FULL width, not just one of the two
	   grid columns, even inside our 2-column layout. */
	.form-row-wide {
		grid-column: 1 / -1;
	}
}

/* The "add an order note" field is collapsed behind a plain <details> by
   default (see woocommerce/checkout/form-shipping.php) instead of always
   showing an empty, distracting textarea -- one less thing on the page
   for most shoppers, who never use this field. */
.order-notes-toggle {
	margin-bottom: var(--space-6);
}

.order-notes-toggle summary {
	font-size: var(--text-caption);
	color: var(--color-blue-600);
	font-weight: 600;
	padding: var(--space-2) 0;
}

.order-notes-toggle .woocommerce-additional-fields__field-wrapper {
	margin-top: var(--space-3);
}

/* -----------------------------------------------------------------------
   EMAIL VERIFICATION (checkout "Send Code" button + status message --
   see andyfe_render_send_code_button() in inc/email-verification.php,
   and assets/js/checkout-verify-email.js for the click behavior)
   ----------------------------------------------------------------------- */
.email-verification-actions {
	margin-top: calc(-1 * var(--space-2)); /* pulls this up snug against the
	                                           verification-code field just
	                                           above it, rather than adding
	                                           a full form-row gap under an
	                                           already-labeled field */
	margin-bottom: var(--space-4);
}

/* A fixed width keeps the button from visibly resizing every second while
   its cooldown countdown text ("60s", "59s", ... ) is showing. */
.email-verification-actions .btn {
	min-width: 110px;
}

.email-verification-status {
	display: inline-block;
	margin-left: var(--space-3);
	margin-bottom: 0;
	font-size: var(--text-caption); /* status text = meta text, per the theme's font-size rule */
}

.email-verification-status.is-success {
	color: var(--color-success);
}

.email-verification-status.is-error {
	color: var(--color-error);
}

.ship-to-different-address {
	margin-bottom: var(--space-4);
}

/* -----------------------------------------------------------------------
   PAYMENT METHODS -- restyled as clear, tappable "cards" instead of tiny
   default radio buttons. This is a pure CSS restyle of WooCommerce's own
   existing markup (ul.wc_payment_methods > li.wc_payment_method) -- no
   PHP template override was needed for this part, WooCommerce's default
   payment-method loop already outputs everything we need to target here.
   ----------------------------------------------------------------------- */
ul.wc_payment_methods {
	list-style: none;
	padding: 0;
}

li.wc_payment_method {
	border: 2px solid var(--color-gray-200);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-3);
	padding: var(--space-4);
	cursor: pointer;
	transition: border-color 0.15s ease;
}

/* Highlight whichever payment method is currently selected -- WooCommerce
   itself adds no special class for this, so we rely on the sibling
   ":has()" relational selector to style the <li> based on its OWN radio
   input being checked. (":has()" is supported in all current major
   browsers as of 2024+; if it's ever unsupported somewhere, the page
   still works fine, it just won't visually highlight the selection.) */
li.wc_payment_method:has(input[type="radio"]:checked) {
	border-color: var(--color-blue-600);
	background-color: var(--color-blue-100);
}

li.wc_payment_method label {
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: 0;
}

.payment_box {
	margin-top: var(--space-3);
	padding: var(--space-3);
	background-color: var(--color-white);
	border-radius: var(--radius-sm);
	font-size: var(--text-body);
}

/* -----------------------------------------------------------------------
   TRUST / REASSURANCE NOTE
   See andyfe_checkout_trust_note() in inc/woocommerce.php, hooked to
   `woocommerce_review_order_before_submit` -- a short "secure checkout"
   line placed right before the Place Order button, to reduce last-second
   checkout hesitation.
   ----------------------------------------------------------------------- */
.checkout-trust-note {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-caption); /* reassurance micro-copy = meta text */
	color: var(--color-gray-600);
	margin-block: var(--space-3);
}

/* -----------------------------------------------------------------------
   MY ACCOUNT
   Account nav becomes a horizontally scroll-snapping tab bar on mobile
   (reusing the same scroll-snap technique as .carousel in components.css)
   and a normal vertical list on wider screens.
   ----------------------------------------------------------------------- */
.woocommerce-MyAccount-navigation ul {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	list-style: none;
	padding: 0;
	margin-bottom: var(--space-6);
	scrollbar-width: none;
}
.woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
	display: none;
}

.woocommerce-MyAccount-navigation li {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-sm);
	background-color: var(--color-gray-50);
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}

.woocommerce-MyAccount-navigation .is-active a {
	background-color: var(--color-blue-600);
	color: var(--color-white);
}

@media (min-width: 768px) {
	.woocommerce-account .woocommerce {
		display: grid;
		grid-template-columns: 220px 1fr;
		gap: var(--space-8);
		align-items: start;
	}

	.woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		overflow: visible;
	}

	.woocommerce-MyAccount-navigation a {
		white-space: normal;
	}
}

/* Login/Register combined page -- two cards side by side on desktop,
   stacked with a visual divider on mobile. We DON'T override
   woocommerce/myaccount/form-login.php for this -- WooCommerce's own
   default template already wraps the two forms in ".col2-set" (with
   ".u-column1"/".u-column2" for each side) whenever registration is
   enabled, so we can restyle its EXISTING default markup directly rather
   than maintaining a duplicate template file with no real structural
   difference. */
.col2-set {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

@media (min-width: 768px) {
	.col2-set {
		grid-template-columns: 1fr 1fr;
	}

	.col2-set .u-column1 {
		border-right: 1px solid var(--color-gray-200);
		padding-right: var(--space-8);
	}
}

/* NOTE: the mini-cart flyout panel's CSS (.mini-cart, .woocommerce-mini-
   cart, etc.) is NOT in this file -- even though it's WooCommerce-related,
   the mini-cart panel is part of the site-wide HEADER, rendered on EVERY
   page (see header.php), not just WooCommerce-specific pages. Since this
   file only loads on actual shop/cart/checkout/account pages (see
   inc/enqueue.php), putting the mini-cart's styles here would leave it
   completely unstyled on, say, a blog post page. Its styles live in
   components.css instead, alongside other global, every-page header/nav
   components -- see the "MINI-CART (HEADER FLYOUT)" section there.*/