/* ==========================================================
   WALDO'S WARES — woocommerce.css
   WooCommerce-specific overrides
   ========================================================== */

/* ----------------------------------------------------------
   PRODUCT CARDS (shop archive)
   ---------------------------------------------------------- */

/* CSS Grid layout — replaces WooCommerce's float columns */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	grid-auto-flow: dense !important;
	gap: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	clear: both;
	list-style: none;
}

/* Hide non-product li elements (notices, placeholders) from the grid */
.woocommerce ul.products li:not(.product),
.woocommerce-page ul.products li:not(.product) {
	display: none !important;
}

/* Remove clearfix pseudo-element — it becomes a ghost grid item */
.woocommerce ul.products::before,
.woocommerce-page ul.products::before {
	display: none !important;
	content: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	background-color: var(--dark-ember);
	border: 1px solid var(--burnt-walnut);
	border-radius: 3px;
	padding: 0 0 16px !important;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	border-color: var(--amber-rust);
	transform: translateY(-3px);
}

.woocommerce ul.products li.product a img {
	border-radius: 2px 2px 0 0;
	margin: 0 0 12px !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-heading) !important;
	font-size: 1rem !important;
	color: var(--warm-ivory) !important;
	padding: 0 14px !important;
	letter-spacing: 0.03em;
}

.woocommerce ul.products li.product .price {
	color: var(--amber-rust) !important;
	font-family: var(--font-body);
	font-size: 1rem !important;
	padding: 0 14px;
}

.woocommerce ul.products li.product .button {
	margin: 8px 14px 0 !important;
	width: calc(100% - 28px) !important;
	text-align: center;
	font-size: 11px !important;
}

/* ----------------------------------------------------------
   SHOP PAGE
   ---------------------------------------------------------- */
.woocommerce-products-header__title,
.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-result-count {
	color: var(--warm-ivory);
}

.woocommerce-products-header {
	border-bottom: 1px solid var(--burnt-walnut);
	padding-bottom: 16px;
	margin-bottom: 32px;
}

/* Sidebar widget */
.woocommerce .widget_product_categories ul li a,
.woocommerce .widget_layered_nav ul li a {
	color: var(--antique-bone);
	font-family: var(--font-body);
}

.woocommerce .widget_product_categories ul li a:hover,
.woocommerce .widget_layered_nav ul li a:hover {
	color: var(--amber-rust);
}

/* ----------------------------------------------------------
   SINGLE PRODUCT — gallery
   ---------------------------------------------------------- */

/* Clip gallery slides that overflow the page boundary */
.single-product #page,
.single-product .ww-woo-wrap,
.woocommerce-product-gallery,
.woocommerce-product-gallery .flex-viewport,
.woocommerce div.product div.images {
	overflow-x: hidden !important;
}

/* Ensure main gallery image fills its container */
.woocommerce-product-gallery__image img {
	width: 100% !important;
	height: auto !important;
}

/* Clip thumbnail strip so excess thumbnails don't bleed to viewport edges */
.woocommerce-product-gallery ol.flex-control-thumbs,
.woocommerce-product-gallery .flex-control-thumbs {
	overflow: hidden !important;
	max-width: 100% !important;
}

/* ----------------------------------------------------------
   SINGLE PRODUCT PAGE
   ---------------------------------------------------------- */
.woocommerce div.product .product_title {
	font-family: var(--font-display) !important;
	font-size: clamp(1.4rem, 3vw, 2rem) !important;
	color: var(--warm-ivory) !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--amber-rust) !important;
	font-family: var(--font-body);
	font-size: 1.4rem !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--antique-bone);
	font-family: var(--font-body);
	font-size: 1.05rem;
	line-height: 1.8;
}

/* Variation selects */
.woocommerce div.product form.cart .variations select {
	background-color: #1e1a16 !important;
	color: var(--warm-ivory) !important;
	border: 1px solid var(--burnt-walnut) !important;
	font-family: var(--font-body);
	padding: 10px 14px;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background-color: #1e1a16;
	border-color: var(--burnt-walnut);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--antique-bone);
	font-family: var(--font-heading);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background-color: var(--dark-ember);
	border-bottom-color: var(--dark-ember);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--amber-rust);
}

.woocommerce div.product .woocommerce-tabs .panel {
	background-color: var(--dark-ember);
	border-color: var(--burnt-walnut);
	color: var(--antique-bone);
	font-family: var(--font-body);
}

/* Related products heading */
.woocommerce .related h2,
.woocommerce .upsells h2 {
	font-family: var(--font-heading);
	color: var(--warm-ivory);
	font-size: 1.3rem;
	letter-spacing: 0.06em;
}

/* ----------------------------------------------------------
   CART & CHECKOUT — font sizes
   Must target elements directly; rem units don't inherit
   from a parent container. Change 1.05rem across the board
   to resize. Use !important to beat WooCommerce/Storefront.
   ---------------------------------------------------------- */

/* Checkout — form labels, table cells, payment text */
.woocommerce-checkout label,
.woocommerce-checkout .woocommerce-checkout-review-order-table td,
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout #order_review td,
.woocommerce-checkout #order_review th,
.woocommerce-checkout #payment label,
.woocommerce-checkout #payment li,
.woocommerce-checkout p:not(.woocommerce-privacy-policy-text) {
	font-size: 1.2rem !important;
}

/* Cart — table cells, totals, and prices */
.woocommerce-cart td,
.woocommerce-cart th,
.woocommerce-cart label,
.woocommerce-cart .wc-block-components-product-name,
.woocommerce-cart .wc-block-components-totals-item__label,
.woocommerce-cart .wc-block-components-totals-item__value,
.wc-block-components-product-price,
.wc-block-components-product-price .woocommerce-Price-amount,
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.woocommerce-Price-amount {
	font-size: 1.2rem !important;
}

/* ----------------------------------------------------------
   CART & CHECKOUT
   ---------------------------------------------------------- */
.woocommerce table.shop_table {
	border: 1px solid var(--burnt-walnut);
	font-family: var(--font-body);
}

.woocommerce table.shop_table th {
	color: var(--warm-ivory);
	font-family: var(--font-heading);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background-color: #1e1a16;
	border-bottom: 1px solid var(--burnt-walnut);
}

.woocommerce table.shop_table td {
	color: var(--antique-bone);
	border-bottom: 1px solid rgba(107, 61, 34, 0.35);
}

.woocommerce table.shop_table .product-name a {
	color: var(--warm-ivory);
}

.woocommerce table.shop_table .order-total,
.woocommerce table.shop_table .cart-subtotal {
	color: var(--warm-ivory);
}

.woocommerce table.shop_table .order-total .amount {
	color: var(--amber-rust);
}

/* Cart totals box */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
	background-color: #1e1a16;
	border: 1px solid var(--burnt-walnut);
	padding: 24px;
}

.woocommerce .cart-collaterals .cart_totals h2 {
	font-family: var(--font-heading);
	color: var(--warm-ivory);
	font-size: 1rem;
	letter-spacing: 0.06em;
}

/* Checkout form */
.woocommerce-checkout #payment {
	background-color: #1e1a16;
	border: 1px solid var(--burnt-walnut);
}

.woocommerce form .form-row label {
	color: var(--antique-bone);
}

/* Notices */
.woocommerce-message,
.woocommerce-info {
	background-color: rgba(196, 122, 42, 0.12);
	border-top-color: var(--amber-rust);
	color: var(--warm-ivory);
	font-family: var(--font-body);
}

.woocommerce-error {
	background-color: rgba(180, 60, 60, 0.12);
	border-top-color: #b43c3c;
	color: var(--warm-ivory);
	font-family: var(--font-body);
}

/* Stars */
.woocommerce .star-rating span,
.woocommerce .star-rating::before {
	color: var(--amber-rust);
}

/* ----------------------------------------------------------
   WOOCOMMERCE BLOCKS — cart & checkout typography
   ---------------------------------------------------------- */

/* Base text */
.wc-block-cart,
.wc-block-checkout {
	font-family: var(--font-body);
	font-size: 1.05rem;
	color: var(--antique-bone);
}

/* Product names */
.wc-block-components-product-name,
.wc-block-cart-item__product-name {
	font-family: var(--font-heading) !important;
	font-size: 1.1rem !important;
	color: var(--warm-ivory) !important;
	letter-spacing: 0.02em;
}

/* Prices — font-size controlled in the CART & CHECKOUT font sizes section above */
.wc-block-components-product-price,
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--amber-rust) !important;
}

/* Section headings (Contact info, Shipping, Payment) */
.wc-block-components-checkout-step__title,
.wc-block-checkout__step-title {
	font-family: var(--font-heading) !important;
	font-size: 1.15rem !important;
	color: var(--warm-ivory) !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Form labels */
.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-block-components-checkbox__label,
.wc-block-components-form label {
	font-size: 0.95rem !important;
	color: var(--antique-bone) !important;
}

/* Order summary sidebar labels */
.wc-block-components-totals-item__label {
	font-size: 1rem !important;
	color: var(--antique-bone) !important;
}

/* ----------------------------------------------------------
   WOOCOMMERCE BLOCKS — PayPal + payment methods
   ---------------------------------------------------------- */

/* Payment method label (PayPal, credit card, etc.) */
.wc-block-components-payment-method-label,
.wc-block-components-radio-control__label,
.wc-block-components-payment-method-option__label {
	color: var(--warm-ivory) !important;
	font-family: var(--font-body);
	font-size: 1rem !important;
}

/* PayPal description text — this is what goes invisible */
.wc-block-components-payment-method-description,
.wc-block-components-radio-control-accordion-option__description,
.wc-block-components-payment-method-option__description,
.wc-block-components-payment-method-label__brand {
	color: var(--antique-bone) !important;
	font-size: 0.95rem !important;
}

/* Payment section container background */
.wc-block-checkout__payment-method,
.wc-block-components-payment-methods {
	background-color: #1e1a16 !important;
	border: 1px solid var(--burnt-walnut) !important;
	border-radius: 3px;
}

/* ----------------------------------------------------------
   CART & CHECKOUT — page-level width expansion
   #primary in custom.css is capped at 900px for regular
   pages. Override it here so cart/checkout get full width.
   ---------------------------------------------------------- */
.woocommerce-cart #primary,
.woocommerce-checkout #primary {
	max-width: 1200px !important;
	width: 100% !important;
	float: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
	padding: 0 32px !important;
}

/* ----------------------------------------------------------
   WOOCOMMERCE BLOCKS — alignwide fix + column spread
   Storefront applies negative margins to .alignwide to
   extend blocks past the content area. Reset them for
   cart and checkout so they don't bleed off the left edge.
   Also ensure the two-column layout fills the available
   space rather than clustering on one side.
   ---------------------------------------------------------- */
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Inner block containers: full width */
.wc-block-cart,
.wc-block-checkout {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Cart columns: items expand, totals sidebar holds ~380px */
.wp-block-woocommerce-cart-items-block,
.wc-block-cart__main {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.wp-block-woocommerce-cart-totals-block,
.wc-block-cart__sidebar {
	flex: 0 1 380px !important;
	min-width: 260px !important;
}

/* Checkout columns: form expands, order summary holds ~380px */
.wp-block-woocommerce-checkout-fields-block,
.wc-block-checkout__main {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.wp-block-woocommerce-checkout-totals-block,
.wc-block-checkout__sidebar {
	flex: 0 1 380px !important;
	min-width: 260px !important;
}

/* ----------------------------------------------------------
   EMPTY CART
   ---------------------------------------------------------- */

/* Kill the icon — covers Storefront pseudo-element AND
   WooCommerce's own icon font pseudo-element */
.woocommerce-cart .woocommerce-info::before,
.woocommerce-cart .woocommerce-info::after,
.woocommerce-cart .cart-empty::before,
.woocommerce-cart .cart-empty::after {
	display: none !important;
	content: none !important;
}

/* Style the bare empty-cart notice to fit the brand */
.woocommerce-cart .cart-empty,
.woocommerce-cart .woocommerce-cart-is-empty p,
.woocommerce-cart .wc-empty-cart-message {
	text-align: center;
	font-family: var(--font-body);
	font-style: italic;
	font-size: clamp(1.1rem, 2.5vw, 1.4rem);
	color: var(--antique-bone) !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 60px 24px 32px !important;
}

/* Strip the amber notice box entirely on the empty cart */
.woocommerce-cart .woocommerce-info {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}