/*
Theme Name: Storefront Puzzle Co
Theme URI: https://example.com
Description: Storefront child theme using the puzzlr.dk brand palette (BRAND.md) — Teal, Deep Pine, Oatmeal, Soft Oatmeal, Soft Teal.
Author: You
Author URI: https://example.com
Template: storefront
Version: 1.0.1
Text Domain: storefront-puzzle-child
*/

/* ==========================================================================
   PALETTE — matches your existing Customizer color choices
   ========================================================================== */

a,
.woocommerce-breadcrumb a {
	color: #38bba9;
}

a:hover,
a:focus {
	color: #2e9685;
}

/* ==========================================================================
   BRAND BACKGROUNDS — from BRAND.md (puzzlr.dk core palette)
   Oatmeal:   page background (warmer than stark white)
   Deep Pine: body text / ink
   Soft Teal or Oatmeal: gentle section tints (e.g. WooCommerce widgets, hover fills)
   
   Uncomment/adjust any block below as you decide how much to apply —
   left fairly light-touch by default so it doesn't fight Storefront's
   own contrast choices.
   ========================================================================== */

body {
	background-color: #f4f1ea; /* Oatmeal */
	color: #233530; /* Deep Pine */
}

.site-header,
#content,
.site-footer {
	background-color: #f4f1ea;
}

/* Soft Oatmeal tint for subtle section backgrounds — used sparingly so it
   doesn't compete with the white product cards. */
.widget_shopping_cart_content,
.woocommerce-tabs,
.related.products {
	background-color: #f8f6f2;
	border-radius: 8px;
	padding: 16px;
}

#colophon.site-footer {
	background-color: #38bba9; /* Teal */
	color: #ffffff;
}
#colophon.site-footer a {
	color: #ffffff;
}
#colophon.site-footer .widget-title {
	color: #ffffff;
}

/* Explicit, on-brand focus ring (analogous blue) — chosen specifically
   because it contrasts against the teal buttons; teal-on-teal would be
   effectively invisible. */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible {
	outline: 2px solid #388BBB;
	outline-offset: 2px;
}

/* Radio buttons (payment method selection, shipping method, etc.) —
   for native <input type="radio"> elements that DO render normally. */
input[type="radio"] {
	background-color: #ffffff;
	border: 1px solid #9ba39d;
	color: #9ba39d;
	accent-color: #388BBB;
}

/* Payment method radios (e.g. PayPal's) hide the native <input> and
   draw a Font Awesome icon glyph on label::before instead — fighting
   that icon's color kept causing trouble (it either looked disabled
   or disappeared entirely depending on the color chosen). Instead:
   hide the icon glyph completely and make the native <input> visible
   again, drawn as a real white-fill, dark-border radio circle. This
   gives full control and matches what a "real" radio button should
   look like — clearly present, and unambiguous about checked state. 
.payment_methods li label::before {
	content: none !important;
	display: none !important;
}*/
.payment_methods li input[type="radio"] {
	position: static !important;
	opacity: 1 !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 8px 0 0 !important;
	vertical-align: middle;
	background-color: #ffffff;
	border: 2px solid #233530; /* Deep Pine — clearly visible, reads as "present" not disabled */
	border-radius: 50%;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.payment_methods li input[type="radio"]:checked {
	border-color: #388BBB;
	box-shadow: inset 0 0 0 4px #388BBB;
}

/* "Pintoo jigsaw puzzles" tagline — sits on the teal header background,
   so it needs a light/neutral tone instead of teal-on-teal. */
.site-branding .site-description {
	color: rgba(255, 255, 255, 0.85);
}

.button,
button,
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #content input.button,
.added_to_cart {
	background-color: #38bba9;
	color: #ffffff;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: #2e9685;
	color: #ffffff;
}

.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt {
	color: #38bba9;
}

/* Disabled buttons (e.g. "Update cart" before any quantity has changed)
   — explicit neutral grey instead of a half-applied teal, so the
   disabled state reads clearly rather than looking like a styling bug.
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button.disabled,
button:disabled,
input[type="submit"]:disabled {
	background-color: #d9d9d9 !important;
	color: #8a8a8a !important;
	cursor: not-allowed;
} */

/* "Proceed to Checkout" carries .button.alt too, but unlike other alt
   buttons it has a solid teal background — needs white text, not teal,
   or it disappears against its own background. */
.woocommerce a.checkout-button.button.alt,
.wc-proceed-to-checkout a.checkout-button {
	color: #ffffff;
}

/* Cart table — column proportions. Remove (×) column pinned narrow;
   thumbnails sized up since they have real room now that the coupon/
   update row no longer lives inside this table (see
   woocommerce/cart/cart.php template override). */
.woocommerce-cart-form table.cart {
	border: 1px solid #e3ddc9;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(35, 53, 48, 0.06);
}
.woocommerce-cart-form table.cart th,
.woocommerce-cart-form table.cart td {
	padding: 18px 14px;
}
.woocommerce-cart-form table.cart td.product-remove {
	width: 28px;
	padding-right: 0;
}
.woocommerce-cart-form table.cart td.product-remove a.remove {
	width: 22px;
	height: 22px;
	line-height: 22px;
	font-size: 16px;
}
.woocommerce-cart-form table.cart td.product-thumbnail {
	width: 110px;
}
.woocommerce-cart-form table.cart td.product-thumbnail img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 2px;
	/* distinct gap between each row's thumbnail and the row border,
	   so thumbnails don't visually merge into one continuous block 
	margin: 2px 0;*/
}
.woocommerce-cart-form table.cart td.product-name {
	width: auto;
}
.woocommerce-cart-form table.cart td.product-name a {
	font-weight: 600;
}

/* Coupon + Update cart — now a genuinely separate element below the
   cart table (not a table row), per the template override. Its own
   card, clearly distinct from the white table above. */
.puzzleco-cart-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	
	border-radius: 8px;
	padding: 20px;
	margin-top: 20px;
}
.puzzleco-cart-actions__coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.puzzleco-cart-actions__coupon #coupon_code {
	background-color: #ffffff;
	border: 1px solid #b9d9d2;
	padding: 10px 12px;
}
.puzzleco-cart-actions__update {
	margin: 0;
}

.wc-proceed-to-checkout {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.woocommerce-cart-form table.cart .actions .button,
.wc-proceed-to-checkout a.checkout-button {
	width: auto;
	flex: 0 1 auto;
}

/* "Add to cart" + "View cart" pairing — covers shop loop, category
   archives, and search results (all render the same two <a> tags as
   siblings inside the <li>). They're stacking vertically at this card
   width regardless of inline-flex, so make them equal width and
   centered instead of fighting the wrap. */
.woocommerce ul.products li.product > a.add_to_cart_button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce-page ul.products li.product > a.add_to_cart_button,
.woocommerce-page ul.products li.product .added_to_cart {
	display: block;
	width: 140px;
	margin: auto auto 10px; /* was "0 auto 10px" — auto top pushes it to the bottom of the flex card */
	text-align: center;
}

.site-header,
.storefront-primary-navigation {
	background-color: #38bba9;
}

.site-header a,
.main-navigation ul li a,
.site-branding .site-title a {
	color: #ffffff;
}

/* Dropdown submenu items (e.g. "Terms and Conditions", "FAQ") render on
   a light background, not the teal header bar — they need dark text,
   not the white inherited from the rule above which was bleeding into
   the dropdown panel and making it unreadable. */
.main-navigation ul ul li a {
	color: #233530 !important;
}
.main-navigation ul ul li a:hover {
	color: #38bba9 !important;
}

.site-header-cart .site-header-cart__total .count,
.storefront-handheld-footer-bar a .count {
	background-color: #38bba9;
}

/* Header mini-cart (price / item count / bag icon in the top bar) sits
   on the teal header background — needs white text/icon. */
.site-header-cart .cart-contents,
.site-header-cart .cart-contents a {
	color: #ffffff !important;
}
.site-header-cart .cart-contents svg {
	fill: #ffffff;
}

/* Sidebar cart widget (the "Cart" widget showing items + subtotal) now
   sits on the Soft Teal tint background — needs dark text, not white,
   or prices become unreadable against the light background. */
.widget_shopping_cart .cart-contents,
.widget_shopping_cart .cart-contents a,
.widget_shopping_cart .amount,
.widget_shopping_cart .quantity {
	color: #233530 !important;
}
.widget_shopping_cart .cart-contents svg {
	fill: #233530;
}

/* Sale badge — plain grey outline instead of a teal fill, more legible
   at the small badge size and reads cleanly on any product card. */
.woocommerce span.onsale {
	background-color: transparent;
	color: #6b6b6b;
	border: 1px solid #b0b0b0;
	font-weight: 600;
}

.woocommerce .star-rating span {
	color: #38bba9;
}

.woocommerce-message,
.woocommerce-info {
	border-top-color: #38bba9;
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: #38bba9;
}


/* ==========================================================================
   TETRADIC PALETTE — extends #38bba9 with its tetradic complements
   Purple → #6738bb   Red → #bb384a   Green → #8bbb38
   These replace WooCommerce's own default notification/accent colors
   (which ship as red/green/purple) so everything ties back to one
   consistent four-color system instead of WooCommerce's stock palette.
   ========================================================================== */

/* Error notices — WooCommerce default is red; now using tetradic red. */
.woocommerce-error {
	background-color: #bb384a;
	border-top-color: #bb384a;
}
.woocommerce-error::before {
	color: #ffffff;
}

/* Buttons inside an error notice (e.g. "View cart" on a stock-limit
   error) — neutral white instead of teal, so they don't clash with the
   red background. */
.woocommerce-error .button,
.woocommerce-error a.button {
	background-color: #ffffff;
	color: #bb384a;
}
.woocommerce-error .button:hover,
.woocommerce-error a.button:hover {
	background-color: #f3f3f3;
	color: #a02e3d;
}

/* Out-of-stock text and "remove from cart" icons — WooCommerce default red. */
.woocommerce span.out-of-stock,
p.stock.out-of-stock,
.woocommerce a.remove {
	color: #bb384a !important;
}

/* In-stock text and icon (e.g. "4 in stock") — tetradic green. */
.woocommerce p.stock.in-stock,
.woocommerce span.in-stock,
p.stock.in-stock::before {
	color: #8bbb38 !important;
}

/* Required field asterisk — WooCommerce default red. */
.woocommerce form .form-row .required {
	color: #bb384a;
}

/* Success notices ("Added to cart", order confirmations).
   Bar background: analogous green #38bb67. Icon: white, matching the
   error bar treatment. */
.woocommerce-message {
	background-color: #38bb67;
	border-top-color: #38bb67;
}
.woocommerce-message::before {
	color: #ffffff;
}

/* Buttons inside a success notice (e.g. "View cart" after adding to
   cart) — white instead of teal, matching the error bar's button style. */
.woocommerce-message .button,
.woocommerce-message a.button {
	background-color: #ffffff;
	color: #38bb67;
}
.woocommerce-message .button:hover,
.woocommerce-message a.button:hover {
	background-color: #f3f3f3;
	color: #2e9654;
}

/* Product price — reverted to a neutral dark grey (not part of the
   tetradic accent set; price text reads better as plain, high-contrast
   neutral rather than a brand color). */
.woocommerce .price,
.woocommerce-Price-amount {
	color: #333333;
}
/* Sale price still uses the teal accent so it stands out from the
   regular (now grey) price. */
.woocommerce .price ins .woocommerce-Price-amount {
	color: #38bba9;
}

/* Info notices (e.g. "Your cart is currently empty") and the
   site-wide store notice — background set to #388bbb. */
.woocommerce-info {
	background-color: #388bbb;
	border-top-color: #388bbb;
}
.woocommerce-info::before {
	color: #ffffff;
}

.woocommerce-store-notice,
.storefront-store-notice {
	background-color: #388bbb !important;
}

/* Price filter widget slider handles/range — WooCommerce default purple. */
.price_slider .ui-slider-range,
.price_slider .ui-slider-handle {
	background-color: #6738bb;
	border-color: #6738bb;
}

/* ==========================================================================
   MY ACCOUNT — spacing for the newsletter/order-update radio rows on
   the Account Details tab (sits below the password-change fields).
   ========================================================================== */
.woocommerce-MyAccount-content fieldset ~ p.form-row,
.woocommerce-MyAccount-content form.edit-account p.form-row {
	margin-bottom: 18px;
}

.woocommerce-MyAccount-content form.edit-account p.form-row label {
	display: flex;
	align-items: center;
	gap: 10px;
}

.woocommerce-MyAccount-content form.edit-account input[type="radio"] {
	margin: 0;
}

/* ==========================================================================
   CHECKOUT — "Your order" summary, payment box, and terms/place-order.
   Confirmed via direct testing on the live markup:
   - #order_review (also .woocommerce-checkout-review-order) is the
     wrapper — Oatmeal background, no border.
   - table.woocommerce-checkout-review-order-table needs an explicit
     white background of its own; it wasn't picking one up from
     anywhere else, which is why Oatmeal was bleeding through inside it.
   ========================================================================== */
#order_review.woocommerce-checkout-review-order {
	background-color: #f4f1ea; /* Oatmeal */
	border: none;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(35, 53, 48, 0.06);
}

table.woocommerce-checkout-review-order-table {
	background-color: #ffffff;
}

/* "Back to cart" link above the checkout form (added since the header
   mini-cart was removed — see functions.php). */
.puzzleco-back-to-cart {
	margin: 0 0 18px;
}
.puzzleco-back-to-cart a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: #38bba9;
}
.puzzleco-back-to-cart a:hover {
	color: #2e9685;
}

/* Form inputs (checkout billing fields, coupon code, card fields, etc.)
   — was a light grey that reads as "disabled"; switched to white with a
   visible border so fields look active and editable. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout #payment input[type="text"],
.woocommerce-checkout #payment input[type="tel"],
.woocommerce #order_comments,
.woocommerce input#coupon_code,
.select2-container--default .select2-selection--single {
	background-color: #ffffff;
	border: 1px solid #d8d2c2;
}

/* ==========================================================================
   CUSTOM CSS — carried over verbatim from your Customizer "Additional CSS"
   ========================================================================== */

.site-header .site-search {
	display: none;
}

button.menu-toggle {
	background-color: #38bba9;
}

button.menu-toggle:hover {
	background-color: turquoise;
}

#colophon > div > div.storefront-handheld-footer-bar {
	display: none;
}

/* Note: an earlier custom-CSS rule set .cart-contents text to teal —
   removed here since that's what caused the invisible-on-teal-background
   issue. The white-text rule above replaces it. */

li.page_item.page-item-632,
li.page_item.page-item-649 {
	display: none;
}

/* ==========================================================================
   PRODUCT GRID — keep "Add to cart" buttons aligned on the same row,
   regardless of how many lines the title/price wrap to.
   ========================================================================== */
/* The grid container's legacy clearfix pseudo-elements were being
   treated as real grid items once display:grid was applied, silently
   eating the first grid cell and pushing every product over by one
   column. Removing them fixes the column-start bug entirely. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none !important;
	display: none !important;
}

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 30px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
@media (max-width: 768px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: 1fr !important; }
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	display: flex !important;
	flex-direction: column;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	grid-column: auto !important;
}
.woocommerce ul.products li.product > a:not(.add_to_cart_button):not(.button):not(.added_to_cart) {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}
.woocommerce ul.products li.product > a span.onsale {
	align-self: center;
	width: auto;
}
/* Give every product photo the same fixed height so titles/prices align
   across a row, regardless of each image's original aspect ratio.
   object-fit: contain shrinks the photo to fit and centers it (both
   horizontally and vertically) within that fixed box — wide/landscape
   images like the sushi one no longer look short and "floating". */
.woocommerce ul.products li.product img {
	height: 220px;
	width: 100%;
	object-fit: contain;	
}
/* Hover-zoom product thumbnail — scales up in place without navigating
   to the product page. overflow: visible on the link + a higher z-index
   on hover let the enlarged image spill outside its card without being
   clipped by neighboring cells. */
.woocommerce ul.products li.product {
	overflow: visible;
}
.woocommerce ul.products li.product > a:not(.add_to_cart_button):not(.button):not(.added_to_cart) {
	overflow: visible;
}
.woocommerce ul.products li.product img {
	transition: transform 0.25s ease;	
}
.woocommerce ul.products li.product:hover img {
	transform: scale(1.8);
	transform-origin: center center;
	position: relative;
	z-index: 10;
	box-shadow: 0 8px 24px rgba(35, 53, 48, 0.25);
}