/**
 * 3Demon "Shopify look" skin for the old WooCommerce site.
 * Pure visual layer — no functional changes. Loaded after all theme CSS.
 * Rollback: remove the enqueue block at the end of the child theme's
 * functions.php (marked CLAUDE SHOPIFY LOOK) and delete this file.
 * Untouchable backup: ~/claude-backups/themes-backup-2026-07-16.tar.gz
 */

/* ============ Anton headings (Shopify design font) ============ */
@font-face {
	font-family: 'Anton';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/anton-2.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Anton';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/anton-1.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

h1, h2, h3,
.woocommerce-loop-product__title,
.page-title,
.product_title,
.widget-title {
	font-family: 'Anton', 'Arial Narrow', sans-serif !important;
	font-weight: 400 !important;
	letter-spacing: .5px;
}

/* body text: keep theme font; product card titles get the Shopify size */
ul.products li.product .woocommerce-loop-product__title {
	font-family: inherit !important;
	font-weight: 700 !important;
	font-size: 17px;
	line-height: 1.25;
}

/* ============ Rounded (pill) buttons — Shopify style ============ */
.btn,
.button,
button[type=submit],
input[type=submit],
.add_to_cart_button,
.single_add_to_cart_button,
.checkout-button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
#place_order,
.woof_submit_search_form,
.woof_reset_search_form,
.wp-block-button__link {
	border-radius: 30px !important;
	font-weight: 700 !important;
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
/* ============ generic / secondary buttons — flat brand look ============
 * Root cause of the "old WooCommerce grey/gold flash on tap" bug (Filip,
 * 2026-08-13): plain .button-classed elements that AREN'T one of the
 * specific primary CTAs below (View cart, the mini-cart's Checkout link,
 * Update cart, Apply coupon, Continue shopping, etc.) were never given a
 * color override here, so they still carry the parent theme's OLD skin:
 * a light gradient at rest and a dull grey/gold flat color on :hover/
 * :focus — and mobile browsers apply :hover on tap, so every tap on one
 * of these flashed the old look. `:where(.woocommerce)` keeps this at the
 * same specificity as a single class so the more specific primary-CTA
 * rules below (declared after, also !important) still win by source
 * order for elements that match both (e.g. .checkout-button.button). */
:where(.woocommerce) .button,
:where(.woocommerce) a.button,
:where(.woocommerce) button.button,
:where(.woocommerce) input.button,
:where(.woocommerce) .wc-forward,
.woocommerce-mini-cart__buttons .checkout {
	background: #fff !important;
	background-image: none !important;
	color: #010002 !important;
	border: 2px solid #010002 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
:where(.woocommerce) .button:hover,
:where(.woocommerce) .button:focus,
:where(.woocommerce) a.button:hover,
:where(.woocommerce) a.button:focus,
:where(.woocommerce) button.button:hover,
:where(.woocommerce) button.button:focus,
:where(.woocommerce) input.button:hover,
:where(.woocommerce) input.button:focus,
:where(.woocommerce) .wc-forward:hover,
:where(.woocommerce) .wc-forward:focus,
.woocommerce-mini-cart__buttons .checkout:hover,
.woocommerce-mini-cart__buttons .checkout:focus {
	background: #f4f4f4 !important;
	background-image: none !important;
	color: #010002 !important;
	border-color: #010002 !important;
}
/* pressed state = flat darker variant of the button's OWN color (not a
 * different palette) — here that means the same black/white pair inverted,
 * matching the invert-on-press language already used by the primary CTAs. */
:where(.woocommerce) .button:active,
:where(.woocommerce) a.button:active,
:where(.woocommerce) button.button:active,
:where(.woocommerce) input.button:active,
:where(.woocommerce) .wc-forward:active,
.woocommerce-mini-cart__buttons .checkout:active {
	background: #010002 !important;
	background-image: none !important;
	color: #fff !important;
	border-color: #010002 !important;
}

.single_add_to_cart_button,
.checkout-button,
#place_order {
	background: #fee100 !important;
	color: #010002 !important;
	border: 2px solid #010002 !important;
	box-shadow: 4px 4px 3px #b9b9b9;
}
.single_add_to_cart_button:hover,
.checkout-button:hover,
#place_order:hover,
.single_add_to_cart_button:focus,
.checkout-button:focus,
#place_order:focus {
	background: #010002 !important;
	color: #fee100 !important;
}
/* pressed = flat darker yellow (not the parent's grey/gold) — distinct from
 * the black hover-invert so a tap still reads as "yellow button, pressed" */
.single_add_to_cart_button:active,
.checkout-button:active,
#place_order:active {
	background: #d6b900 !important;
	color: #010002 !important;
	border-color: #010002 !important;
}

/* rounded form fields like Shopify */
.woocommerce form .form-row input.input-text,
.search-field,
input[type=search],
input[type=text].woof_show_auto_form,
select.orderby {
	border-radius: 22px !important;
	padding-left: 14px;
}

/* ============ Product cards: 4:3 images, rounded, offset shadow ============ */
ul.products li.product {
	background: #ffffff;
	border: 1px solid #cccdce !important;
	border-radius: 16px;
	box-shadow: 4px 4px 3px #b9b9b9;
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease;
	padding-bottom: 14px !important;
}
ul.products li.product:hover {
	transform: translate(-2px, -2px);
	box-shadow: 7px 7px 5px #b9b9b9;
}
/* 4:3 crop purely via CSS (no thumbnail regeneration needed - disk quota) */
ul.products li.product a img,
ul.products li.product .attachment-shop_catalog,
ul.products li.product .attachment-woocommerce_thumbnail {
	aspect-ratio: 4 / 3 !important;
	object-fit: cover;
	width: 100%;
	height: auto !important;
	border-radius: 0;
	margin-bottom: 10px !important;
}
ul.products li.product .onsale {
	background: #fee100 !important;
	color: #010002 !important;
	border-radius: 20px !important;
	font-weight: 700 !important;
}

/* ============ Single product gallery: 4:3 main image ============ */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image,
.product .woocommerce-product-gallery__image {
	height: auto !important;
}
.woocommerce-product-gallery__image img {
	aspect-ratio: 4 / 3 !important;
	object-fit: contain;      /* keep whole render visible; cover would cut props */
	width: 100% !important;
	max-height: none !important;
	background: #f6f6f6;
	border-radius: 16px;
}
.flex-control-thumbs img {
	border-radius: 10px;
	aspect-ratio: 1;
	object-fit: cover;
}
.flex-control-thumbs img.flex-active {
	border: 2px solid #fee100;
}

/* ============ Small Shopify-look touches ============ */
/* category/collection thumbnails in grids */
.products .product-category img {
	aspect-ratio: 4 / 3 !important;
	object-fit: cover;
	border-radius: 16px 16px 0 0;
}
/* quantity input rounding */
.quantity .qty { border-radius: 18px !important; }
/* pagination */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border-radius: 50% !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: #fee100 !important;
	color: #010002 !important;
}

/* hide the footer back-to-top button (Filip, 25.7.2026) */
.footer-back-to-top, .js-back-to-top { display: none !important; }