/*
Theme Name:   Iwako Pop
Theme URI:    https://iwakoerasers.co.uk/
Description:  Sticker-book child theme for Twenty Twenty-Five, made for iwakoerasers.co.uk. Bright sweet-shop colours, chunky outlines and Amazon affiliate product buttons.
Author:       iwakoerasers.co.uk
Template:     twentytwentyfive
Version:      1.4.0
Requires at least: 6.7
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  iwako-pop
*/

/* ---------- Basics ---------- */
:root {
	--iw-ink: var(--wp--preset--color--contrast);
	--iw-line: 3px solid var(--wp--preset--color--contrast);
}
::selection { background: var(--wp--preset--color--accent-1); color: var(--iw-ink); }
:where(a, button, input, summary):focus-visible { outline: 2px dashed var(--iw-ink); outline-offset: 3px; }

.wp-element-button,
.wp-block-button__link,
.wc-block-components-product-button__button,
.single_add_to_cart_button {
	transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.wc-block-components-product-button__button:hover,
.single_add_to_cart_button:hover {
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 var(--iw-ink) !important;
}
.wp-element-button:active,
.wp-block-button__link:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--iw-ink) !important; }

/* Dark "ink" button style (Buttons block > Styles) */
.wp-block-button.is-style-ink .wp-block-button__link {
	background: var(--iw-ink); color: var(--wp--preset--color--accent-1);
	box-shadow: 4px 4px 0 var(--wp--preset--color--accent-2);
}
.wp-block-button.is-style-ink .wp-block-button__link:hover { box-shadow: 6px 6px 0 var(--wp--preset--color--accent-2) !important; }
/* White outline button style */
.wp-block-button.is-style-paper .wp-block-button__link { background: var(--wp--preset--color--white); }

/* ---------- Promo / disclosure bar ---------- */
.iwako-promo {
	background: var(--iw-ink); color: var(--wp--preset--color--accent-1);
	font-size: 0.875rem; font-weight: 500;
	padding-top: 10px !important; padding-bottom: 10px !important;
}
.iwako-promo p { margin: 0; }
.iwako-promo a { color: var(--wp--preset--color--accent-1); }
.iwako-promo a:hover { color: var(--wp--preset--color--white); }
.iwako-dot { color: var(--wp--preset--color--accent-4); padding: 0 .75em; }

/* ---------- Header ---------- */
.iwako-header {
	border-bottom: var(--iw-line);
	padding-top: 20px !important; padding-bottom: 20px !important;
	gap: 16px 28px;
}
.iwako-wordmark { margin: 0; font-family: var(--wp--preset--font-family--fredoka); font-weight: 700; font-size: 1.875rem; letter-spacing: -0.02em; line-height: 1; }
.iwako-wordmark a { display: inline-block; white-space: nowrap; text-decoration: none; color: var(--iw-ink); }
.iwako-wordmark a::before {
	content: ""; display: inline-block; width: 44px; height: 44px; margin-right: 12px; vertical-align: middle;
	background: url("assets/images/logo-mark.svg") center / contain no-repeat;
}
.iwako-wordmark span { white-space: nowrap; }
.iwako-wordmark span { color: #D63F6E; }
.iwako-footer .iwako-wordmark span { color: var(--wp--preset--color--accent-2); }
.iwako-footer .iwako-wordmark a { color: var(--wp--preset--color--base); }

.iwako-header .wp-block-navigation a { text-decoration: none; }
.iwako-header .wp-block-navigation a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--wp--preset--color--accent-2); }
.iwako-header .wp-block-search__button {
	width: 48px; height: 48px; padding: 0; border-radius: 999px;
	border: var(--iw-line); background: var(--wp--preset--color--white); color: var(--iw-ink); box-shadow: none;
}
.iwako-header .wp-block-search__button svg { width: 24px; height: 24px; }
.iwako-header .wp-block-search__input { border: var(--iw-line); border-radius: 999px; padding: 0 18px; }
.iwako-header .wp-block-search.wp-block-search__searchfield-hidden .wp-block-search__input { border: 0; padding: 0; }
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	width: 44px; height: 44px; border-radius: 999px; border: var(--iw-line); background: var(--wp--preset--color--white);
	display: inline-flex; align-items: center; justify-content: center;
}
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--accent-1) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-family: var(--wp--preset--font-family--fredoka); font-size: 1.75rem; }

/* ---------- Hero ---------- */
.iwako-hero { position: relative; overflow: hidden; }
.iwako-hero::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 36px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 36' preserveAspectRatio='none'%3E%3Cpath d='M0 36 L0 18 Q 60 0 120 18 T 240 18 L240 36 Z' fill='%23FFFBF0'/%3E%3C/svg%3E") repeat-x left bottom / 240px 36px;
	pointer-events: none;
}
.iwako-pill {
	display: inline-block; margin: 0; padding: 8px 16px; border-radius: 999px;
	background: var(--wp--preset--color--white); border: var(--iw-line);
	font-size: 0.9375rem; font-weight: 700;
}
.iwako-hero h1 { margin-top: 0.3em; }
.iwako-hero-art img { width: 100%; height: auto; }

/* ---------- Theme circles ---------- */
.iwako-themes .wp-block-column { text-align: center; }
.iwako-circle { margin: 0 auto 14px !important; }
.iwako-circle img {
	width: min(180px, 100%) !important; aspect-ratio: 1; height: auto !important;
	border-radius: 999px; border: var(--iw-line); box-shadow: 5px 5px 0 var(--iw-ink);
	padding: 14%; box-sizing: border-box; transition: transform .15s ease;
}
.iwako-circle a:hover img { transform: rotate(-6deg) scale(1.04); }
.iwako-themes .wp-block-column:nth-child(1) .iwako-circle img { background: var(--wp--preset--color--accent-2); }
.iwako-themes .wp-block-column:nth-child(2) .iwako-circle img { background: var(--wp--preset--color--accent-3); }
.iwako-themes .wp-block-column:nth-child(3) .iwako-circle img { background: var(--wp--preset--color--accent-4); }
.iwako-themes .wp-block-column:nth-child(4) .iwako-circle img { background: var(--wp--preset--color--accent-5); }
.iwako-themes .wp-block-column:nth-child(5) .iwako-circle img { background: var(--wp--preset--color--accent-1); }
.iwako-themes h3 a { text-decoration: none; }
.iwako-themes h3 a:hover { text-decoration: underline; }

/* ---------- Product grids (Product Collection block) ---------- */
.wc-block-product-template .wc-block-product,
.wc-block-product-template > li { display: flex; flex-direction: column; gap: 10px; }
.wc-block-components-product-image {
	border: var(--iw-line); border-radius: 28px; overflow: hidden; margin-bottom: 4px !important;
	background: var(--wp--preset--color--pink-soft);
}
.wc-block-product-template > li:nth-child(4n+2) .wc-block-components-product-image { background: var(--wp--preset--color--peach-soft); }
.wc-block-product-template > li:nth-child(4n+3) .wc-block-components-product-image { background: var(--wp--preset--color--blue-soft); }
.wc-block-product-template > li:nth-child(4n+4) .wc-block-components-product-image { background: var(--wp--preset--color--green-soft); }
/* White-background product photos blend into the pastel tile */
.wc-block-components-product-image img { mix-blend-mode: multiply; aspect-ratio: 1; object-fit: contain !important; padding: 8%; box-sizing: border-box; transition: transform .2s ease; }
.wc-block-components-product-image a:hover img { transform: scale(1.05) rotate(-2deg); }
.wc-block-product-template .wp-block-post-title { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; font-size: 1.375rem; margin: 0; }
.wc-block-product-template .wp-block-post-title a { text-decoration: none; }
.wc-block-product-template .wp-block-post-title a:hover { text-decoration: underline; }
.wc-block-components-product-button { margin-top: auto; }
.wc-block-components-product-button__button,
.wc-block-components-product-button .wp-block-button__link {
	width: 100%; justify-content: center;
	background: var(--wp--preset--color--accent-1) !important; color: var(--iw-ink) !important;
	border: var(--iw-line) !important; border-radius: 999px !important;
	box-shadow: 3px 3px 0 var(--iw-ink); font-weight: 700;
}
a.wc-block-components-product-button__button::after,
.iwako-amazon-btn::after {
	content: ""; display: inline-block; width: 1em; height: 1em; margin-left: .5em; vertical-align: -0.12em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wc-block-components-product-sale-badge { display: none !important; }

/* ---------- Single product ---------- */
.single-product .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image {
	border-radius: 36px; overflow: hidden;
}
.single-product .woocommerce-product-gallery {
	border: var(--iw-line); border-radius: 28px; box-shadow: 4px 4px 0 var(--iw-ink);
	background: var(--wp--preset--color--pink-soft); padding: 4%;
}
.single-product .woocommerce-product-gallery img { mix-blend-mode: multiply; }
.single-product .flex-control-thumbs li img { border: var(--iw-line); border-radius: 16px; background: var(--wp--preset--color--white); }
/* Product layout: clear gap between gallery and details */
.single-product .wp-block-columns:has(.woocommerce-product-gallery),
.single-product .wp-block-columns:has(.wp-block-woocommerce-product-gallery),
.single-product .wp-block-columns:has(.wp-block-woocommerce-product-image-gallery) {
	column-gap: 44px !important;
	row-gap: 32px;
}
/* Gallery box must fit inside its column (padding + border were spilling into the gap) */
.single-product .woocommerce-product-gallery,
.single-product .wp-block-woocommerce-product-gallery {
	box-sizing: border-box;
	width: 100% !important;
	max-width: 100%;
	float: none !important;
	margin: 0 !important;
}
/* Belt and braces: extra room on the details column, in case the gap isn't applied */
.single-product .wp-block-column:has(.woocommerce-product-gallery) + .wp-block-column,
.single-product .wp-block-column:has(.wp-block-woocommerce-product-gallery) + .wp-block-column,
.single-product .woocommerce div.product div.summary {
	padding-left: 12px;
	box-sizing: border-box;
}
.single-product .wp-block-post-title {
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.05;
	overflow-wrap: anywhere;
}
.iwako-external { display: flex; flex-direction: column; gap: 10px; margin: 1.5em 0; }
.iwako-amazon-btn {
	display: flex !important; align-items: center; justify-content: center; width: 100%;
	min-height: 64px; box-sizing: border-box; text-decoration: none !important; font-size: 1.2rem !important;
	background: var(--wp--preset--color--accent-1) !important; color: var(--iw-ink) !important;
	border: var(--iw-line) !important; border-radius: 999px !important; box-shadow: 4px 4px 0 var(--iw-ink);
}
.iwako-disclosure { margin: 0; font-size: 0.875rem; }
.woocommerce-tabs .tabs li a { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; }
.single-product .onsale, .single-product .price:empty { display: none; }

/* ---------- Sticker cards / sections ---------- */
.iwako-card {
	background: var(--wp--preset--color--white); border: var(--iw-line); border-radius: 28px;
	box-shadow: 6px 6px 0 var(--iw-ink);
}
.iwako-step-num {
	width: 56px; height: 56px; margin: 0 !important; border-radius: 999px; border: var(--iw-line);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--wp--preset--font-family--fredoka); font-size: 1.625rem; font-weight: 700;
}
.iwako-band { border-top: var(--iw-line); border-bottom: var(--iw-line); }
.iwako-club { border: var(--iw-line); border-radius: 36px; box-shadow: 8px 8px 0 var(--iw-ink); overflow: hidden; }

/* ---------- Footer ---------- */
.iwako-footer { background: var(--iw-ink); color: var(--wp--preset--color--base); }
.iwako-footer a { color: var(--wp--preset--color--base); text-decoration: none; }
.iwako-footer a:hover { text-decoration: underline; color: var(--wp--preset--color--accent-1); }
.iwako-footer h2 { font-size: 1.25rem; font-weight: 600; margin: 0 0 .6em; }
.iwako-footer .iwako-col-shop h2 { color: var(--wp--preset--color--accent-1); }
.iwako-footer .iwako-col-info h2 { color: var(--wp--preset--color--accent-4); }
.iwako-footer .iwako-col-about h2 { color: var(--wp--preset--color--accent-5); }
.iwako-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.iwako-footer .wc-block-product-categories-list { list-style: none; padding: 0; }
.iwako-footer .wc-block-product-categories-list-item { margin-bottom: 10px; }
.iwako-muted { color: var(--wp--preset--color--accent-6); }
.iwako-legal { border-top: 2px solid #4A4163; padding-top: 24px; font-size: 0.875rem; }

/* ---------- Boxed site: 1100px rounded card ---------- */
body:not(.editor-styles-wrapper) {
	background-color: var(--wp--preset--color--blue-soft);
	background-image: radial-gradient(var(--wp--preset--color--accent-4) 2px, transparent 2.5px);
	background-size: 28px 28px;
}
body:not(.editor-styles-wrapper) .wp-site-blocks {
	box-sizing: border-box;
	max-width: 1100px;
	margin: 32px auto 48px;
	background: var(--wp--preset--color--base);
	border: var(--iw-line);
	border-radius: 36px;
	box-shadow: 10px 10px 0 var(--iw-ink);
	overflow: clip;
}
@media (max-width: 1160px) {
	body:not(.editor-styles-wrapper) .wp-site-blocks {
		margin: 0; border: 0; border-radius: 0; box-shadow: none; max-width: none;
	}
}

/* Header in the 1100px box: logo + actions on top, menu on its own row */
@media (min-width: 600px) {
	.iwako-header { flex-wrap: wrap !important; row-gap: 14px; }
	.iwako-header .wp-block-navigation { order: 3; flex-basis: 100%; justify-content: center; }
	.iwako-header .wp-block-navigation__container { justify-content: center; gap: 8px 26px; }
}

/* Header rows: even spacing, nothing squashed */
.iwako-header { padding-top: 22px !important; padding-bottom: 18px !important; column-gap: 24px; }
.iwako-header .iwako-wordmark { flex-shrink: 0; white-space: nowrap; }
.iwako-header-actions { flex-shrink: 0; gap: 12px; }
.iwako-header .wp-block-navigation { padding-top: 14px; border-top: 2px dashed var(--wp--preset--color--accent-6); }
.iwako-header .wp-block-navigation .wp-block-navigation-item__content { white-space: nowrap; }
.iwako-promo p { line-height: 1.4; }

/* Footer: proper grid instead of squeezed flex columns */
.iwako-footer .wp-block-columns {
	display: grid !important;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 36px 40px;
}
.iwako-footer .wp-block-columns > .wp-block-column { flex-basis: auto !important; min-width: 0; }
.iwako-footer .iwako-wordmark { white-space: nowrap; }
.iwako-legal { gap: 8px 32px; margin-top: 48px !important; }
.iwako-legal p { margin: 0; }
@media (max-width: 900px) {
	.iwako-footer .wp-block-columns { grid-template-columns: 1fr 1fr; }
	.iwako-footer .wp-block-columns > .wp-block-column:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
	.iwako-footer .wp-block-columns { grid-template-columns: 1fr; }
}

/* Header side padding (flex groups don't get the theme's page padding) */
.iwako-header {
	padding-left: var(--wp--style--root--padding-left, 32px) !important;
	padding-right: var(--wp--style--root--padding-right, 32px) !important;
}
/* Affiliate site: no cart or account icons, even if WooCommerce adds them */
.iwako-header .wp-block-woocommerce-mini-cart,
.iwako-header .wc-block-mini-cart,
.iwako-header .wp-block-woocommerce-customer-account { display: none !important; }

/* ---------- Small screens ---------- */
@media (max-width: 781px) {
	.iwako-promo { font-size: 0.75rem; }
	.iwako-promo .iwako-promo-lead, .iwako-promo .iwako-dot { display: none; }
	.iwako-wordmark { font-size: 1.5rem; }
	.iwako-wordmark a::before { width: 34px; height: 34px; margin-right: 10px; }
	.iwako-header .iwako-shop-btn { display: none; }
	.iwako-hero-art { max-width: 360px; margin-inline: auto; }
	.iwako-themes { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 12px; }
	.iwako-themes > .wp-block-column { flex: 0 0 118px !important; }
	.iwako-themes h3 { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
}