/* New pages: [artulio_home], [artulio_zamowienie] and the product card. Every rule is scoped to .ah-* and loads only on those pages. */

.ah-home {
	--ah-petrol: #0e3a4f;
	--ah-deep: #0a2a3a;
	--ah-sand: #fbf3ea;
	--ah-grey: #f7f5f2;
	--ah-cream: #f0d9be;
	--ah-ink: #10242e;
	--ah-mut: #47606c;
	--ah-blue: #0e5fa8;
	background: #fff;
	color: var(--ah-ink);
	font-size: 16px;
	line-height: 1.55;
	/* out of Astra's content container, edge to edge; --ah-scrollbar comes from js/home.js */
	width: calc(100vw - var(--ah-scrollbar, 0px));
	margin-left: calc(50% - (100vw - var(--ah-scrollbar, 0px)) / 2);
	overflow-x: clip;
}
/* When the shortcode sits in a block (Shortcode block), Astra caps every child of .entry-content[data-ast-blocks-layout]
   at the content width with auto margins; this selector is stronger. */
.entry-content[data-ast-blocks-layout] > .ah-home {
	max-width: none;
	margin-left: calc(50% - (100vw - var(--ah-scrollbar, 0px)) / 2);
	margin-right: 0;
}

.ah-home *, .ah-home *::before, .ah-home *::after { box-sizing: border-box; }
.ah-home img { display: block; max-width: 100%; height: auto; }
/* !important: Astra's .ast-single-post .entry-content a is stronger */
.ah-home a, .ah-home a:hover { text-decoration: none !important; }
/* No gap between the site header and the first section */
.ah-page #primary { margin-top: 0 !important; margin-bottom: 0 !important; }
.ah-home h1, .ah-home h2, .ah-home h3 { color: inherit; font-weight: 700; line-height: 1.15; margin: 0; text-wrap: balance; }
.ah-home h2 { font-size: clamp(26px, 3vw, 40px); }
.ah-home p { margin: 0; }

.ah-wrap { max-width: 1320px; margin: 0 auto; padding-inline: 24px; }
.ah-band { padding-block: 64px; }
.ah-band-tight { padding-block: 0 64px; }
.ah-band-grey { background: var(--ah-grey); }
.ah-band-sand { background: var(--ah-sand); }
.ah-band-petrol { background: var(--ah-petrol); color: #fff; }

.ah-topbar { background: #0a2a3a; color: #f6e9dc; text-align: center; padding: 9px 16px; font-size: 14px; font-weight: 500; }

.ah-eyebrow { font-size: 14px; letter-spacing: .14em; font-weight: 600; color: #e4cdb5; text-transform: uppercase; }
.ah-eyebrow-blue { color: var(--ah-blue); }
.ah-lead { font-size: 18px; color: #36505c; margin-block: 12px 22px !important; }
.ah-band-petrol .ah-lead { color: #dce7ec; }
.ah-sub { color: var(--ah-mut); margin-top: 6px !important; }

.ah-home .ah-btn {
	display: inline-block;
	background: var(--ah-petrol);
	color: #fff;
	font-weight: 600;
	padding: 14px 26px;
	border-radius: 8px;
	text-align: center;
	line-height: 1.3;
}
.ah-home .ah-btn:hover { background: var(--ah-deep); color: #fff; }
.ah-home .ah-btn-light { background: var(--ah-cream); color: var(--ah-deep); font-size: 17px; }
.ah-home .ah-btn-light:hover { background: #f6e9dc; color: var(--ah-deep); }
.ah-btn-top { margin-top: 26px; }

/* Hero: all slides share one grid cell, so its height is that of the tallest and nothing moves on a change */
.ah-hero { position: relative; background: var(--ah-petrol); color: #fff; }
.ah-slides { display: grid; }
.ah-slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	align-items: center;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding-inline: 72px;
	min-height: 560px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility .4s;
}
.ah-slide.is-active { opacity: 1; visibility: visible; }
.ah-slide-text { padding-block: 48px; }
.ah-slide h1, .ah-slide h2 { font-size: clamp(32px, 4.2vw, 58px); line-height: 1.08; margin-block: 14px 18px; }
.ah-slide p { font-size: 18px; color: #dce7ec; margin-bottom: 26px; max-width: 480px; }
.ah-slide-media { align-self: stretch; display: block; overflow: hidden; }
.ah-home .ah-slide-media img { width: 100%; height: 100%; max-height: 560px; object-fit: cover; object-position: center top; }
.ah-slide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-block: 28px; }
.ah-slide-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ah-home .ah-slide-grid img { border-radius: 10px; max-height: 504px; }
.ah-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .5);
	color: #fff;
	cursor: pointer;
}
.ah-arrow:hover, .ah-arrow:focus { background: rgba(255, 255, 255, .28); color: #fff; }
.ah-arrow-prev { left: 16px; }
.ah-arrow-next { right: 16px; }
.ah-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 4px; }
.ah-dots button { width: 28px; height: 28px; padding: 0; background: none; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ah-dots button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--ah-cream); }
.ah-dots button.is-active::before { background: var(--ah-cream); }

/* Benefits */
.ah-usp { background: var(--ah-deep); color: #f6e9dc; font-size: 15px; }
.ah-usp b { color: #fff; }
.ah-usp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 24px; padding-block: 18px; }
.ah-usp-grid > div { display: flex; align-items: center; gap: 12px; }
.ah-usp svg { flex: none; color: var(--ah-cream); }

/* Two columns */
.ah-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: center; }
.ah-beforeafter { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 8px; align-items: center; }
.ah-beforeafter figure { margin: 0; }
.ah-home .ah-beforeafter img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: 14px; }
.ah-beforeafter figcaption { text-align: center; margin-top: 10px; font-size: 13px; letter-spacing: .14em; font-weight: 600; text-transform: uppercase; color: var(--ah-mut); }

/* Steps and sizes */
.ah-steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.ah-steps li { margin: 0; }
.ah-home .ah-steps img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; margin-bottom: 10px; }
.ah-home .ah-steps h3 { font-size: 19px; margin-bottom: 8px; }
.ah-steps p { color: #36505c; }
.ah-sizes-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.ah-home .ah-sizes-title { display: block; float: none; width: auto; padding: 0; font-size: 24px; font-weight: 700; line-height: 1.15; color: var(--ah-ink); margin-block: 52px 18px; }
.ah-sizes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ah-home .ah-size { position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 92px; margin: 0; padding: 14px; background: #fff; border: 1.5px solid #e4d8c9; border-radius: 10px; color: var(--ah-ink); cursor: pointer; }
.ah-home .ah-size:hover { border-color: var(--ah-petrol); }
.ah-size input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ah-size-name { font-weight: 600; font-size: 17px; }
.ah-size-price { color: #36505c; font-size: 15px; }
/* Additional CSS colours every price blue through .woocommerce-Price-amount bdi */
.ah-home .ah-size-price .woocommerce-Price-amount, .ah-home .ah-size-price bdi { color: inherit; }
.ah-size-tag { color: var(--ah-blue); font-size: 13px; font-weight: 600; }
.ah-home .ah-size:has(input:checked) { background: var(--ah-petrol); border-color: var(--ah-petrol); color: #fff; }
.ah-size:has(input:checked) .ah-size-price { color: #fff; }
.ah-size:has(input:checked) .ah-size-tag { color: var(--ah-cream); }
.ah-size:has(input:focus-visible) { outline: 2px solid var(--ah-blue); outline-offset: 2px; }
.ah-home .ah-btn-top { border: 0; font-family: inherit; font-size: 16px; cursor: pointer; }

/* Which photo */
.ah-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.ah-tip { margin: 0; display: flex; align-items: center; gap: 14px; background: var(--ah-grey); border-radius: 10px; padding: 10px; }
.ah-tip-img { position: relative; display: block; flex: 0 1 180px; min-width: 0; }
.ah-home .ah-tip-img img { width: 100%; height: 88px; object-fit: cover; object-position: top; border-radius: 6px; }
.ah-tip figcaption b { display: block; }
.ah-green { color: #14713a; }
.ah-red { color: #b3261e; }
.ah-mark { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 15px; font-weight: 700; line-height: 26px; text-align: center; }
.ah-yes { background: #1e9e50; }
.ah-no { background: #d3261e; }

/* Carousels: scroll with the finger, arrows in js/home.js */
.ah-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 24px; }
.ah-head-base { align-items: baseline; }
.ah-nav { display: flex; gap: 8px; }
.ah-nav button { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: #fff; border: 1.5px solid var(--ah-petrol); color: var(--ah-petrol); font-size: 20px; line-height: 1; cursor: pointer; }
.ah-nav button:hover, .ah-nav button:focus { background: var(--ah-petrol); color: #fff; }
.ah-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; }
.ah-rail::-webkit-scrollbar { display: none; }
.ah-home .ah-cat { flex: 0 0 196px; height: 250px; scroll-snap-align: start; position: relative; display: block; border-radius: 10px; overflow: hidden; background: #e9e2d9; color: #fff; }
.ah-home .ah-cat img { width: 100%; height: 100%; object-fit: cover; }
.ah-cat-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 12px; background: linear-gradient(to top, rgba(10, 42, 58, .94), rgba(10, 42, 58, 0)); }
.ah-cat-label b { display: block; font-size: 16px; font-weight: 600; }
.ah-cat-label span { font-size: 13px; }
.ah-home .ah-cat-all { display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; background: var(--ah-petrol); font-weight: 600; }
.ah-home .ah-acc { flex: 0 0 220px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; color: var(--ah-ink); }
.ah-home .ah-acc img { width: 100%; height: 220px; object-fit: contain; background: #fff; border-radius: 10px; margin-bottom: 6px; }
.ah-acc span { color: #36505c; font-size: 15px; }

/* Product cards */
.ah-home .ah-link { font-weight: 600; color: var(--ah-blue); }
.ah-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
.ah-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ah-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ah-card-image { display: block; position: relative; aspect-ratio: 1 / 1; background: #fff; border-radius: 10px; overflow: hidden; }
.ah-home .ah-card-image img { width: 100%; height: 100%; object-fit: cover; }
.ah-badge { position: absolute; left: 10px; top: 10px; background: var(--ah-petrol); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 4px; }
.ah-home .ah-card h3 { font-size: 17px; font-weight: 600; line-height: 1.3; margin-top: 4px; }
.ah-card-desc { color: var(--ah-mut); font-size: 14px; }
.ah-price { font-weight: 600; font-size: 18px; }
.ah-home .ah-card-btn { margin-top: auto; padding: 11px 14px; }
.ah-card .added_to_cart { display: none !important; }
.ah-toast { position: fixed; z-index: 99999; left: 50%; bottom: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; width: max-content; max-width: min(560px, calc(100vw - 32px)); padding: 14px 20px; background: #0e3a4f; color: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(10, 42, 58, .3); font-size: 15px; line-height: 1.4; opacity: 0; visibility: hidden; transform: translate(-50%, 12px); transition: opacity .25s ease, transform .25s ease, visibility .25s; }
.ah-toast.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.ah-toast a, .ah-toast a:hover { color: #f0d9be; font-weight: 600; text-decoration: underline !important; white-space: nowrap; }

/* Gifts */
.ah-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ah-home .ah-chips a { border: 1px solid var(--ah-cream); border-radius: 999px; padding: 10px 16px; color: #fff; }
.ah-home .ah-chips a:hover { background: var(--ah-cream); color: var(--ah-deep); }
.ah-gift { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ah-home .ah-gift img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; }

/* About, reviews, FAQ */
.ah-about { text-align: center; }
.ah-about .ah-wrap { max-width: 860px; }
.ah-home .ah-about h2 { margin-block: 10px 14px; }
.ah-about p { font-size: 18px; color: #36505c; }
.ah-reviews { padding: 36px 24px; text-align: center; }
.ah-reviews p { color: #36505c; margin-block: 10px 20px; }
.ah-faq { max-width: 860px; display: grid; gap: 10px; }
.ah-home .ah-faq h2 { margin-bottom: 12px; }
.ah-faq details { background: #fff; border-radius: 8px; padding: 16px 18px; }
.ah-faq summary { font-weight: 600; cursor: pointer; }
.ah-faq details p { margin-top: 10px; color: #36505c; }

.ah-home a:focus-visible, .ah-home button:focus-visible, .ah-faq summary:focus-visible { outline: 2px solid var(--ah-blue); outline-offset: 2px; }

/* Order page, [artulio_zamowienie] */
.ah-order { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; align-items: start; padding-block: 28px 56px; }
.ah-order-preview { display: grid; gap: 14px; position: sticky; top: 24px; }
.ah-frame-box { display: flex; align-items: center; justify-content: center; min-height: 480px; padding: 24px; background: var(--ah-grey); border-radius: 12px; }
.ah-home .ah-order-photo { display: block; width: auto; height: auto; max-width: 100%; max-height: 432px; border-radius: 4px; box-shadow: 0 10px 30px rgba(14, 58, 79, .25); }
.ah-order-note { font-size: 14px; color: var(--ah-mut); text-align: center; }
.ah-order-form { display: grid; gap: 22px; min-width: 0; }
.ah-home .ah-order-form h1 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 8px; }
.ah-order-form .ah-sub { color: #36505c; margin-top: 0 !important; }
.ah-order-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ah-order-form legend, .ah-legend { display: block; float: none; width: auto; padding: 0; margin-bottom: 10px; font-size: 16px; font-weight: 600; color: var(--ah-ink); }
.ah-order-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.ah-order-size { display: block; margin: 0; cursor: pointer; }
.ah-order-size input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ah-order-size-box { display: block; height: 100%; padding: 10px; border: 1.5px solid #d9ccbb; border-radius: 8px; background: #fff; }
.ah-order-size-box b, .ah-order-size-box > span { display: block; font-size: 15px; }
.ah-order-size-box b { font-weight: 600; }
.ah-order-size-box > span { font-size: 14px; white-space: nowrap; }
.ah-order-size-box small { display: block; min-height: 18px; font-size: 12px; color: var(--ah-blue); font-weight: 600; }
.ah-order-size input:checked + .ah-order-size-box { background: var(--ah-petrol); border-color: var(--ah-petrol); color: #fff; }
.ah-order-size input:checked + .ah-order-size-box small { color: var(--ah-cream); }
.ah-order-size input:focus-visible + .ah-order-size-box { outline: 2px solid var(--ah-blue); outline-offset: 2px; }
.ah-home .ah-order-size-box .woocommerce-Price-amount, .ah-home .ah-order-size-box bdi { color: inherit; }
.ah-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 22px 16px; text-align: center; border: 2px dashed var(--ah-petrol); border-radius: 10px; background: var(--ah-sand); cursor: pointer; overflow-wrap: anywhere; }
.ah-drop span { font-size: 14px; color: #36505c; }
.ah-file { display: block; width: 1px; height: 1px; opacity: 0; }
.ah-order-error, .ah-order-warn { margin-top: 10px !important; font-size: 14px; }
.ah-order-error { color: #b3261e; font-weight: 600; }
.ah-order-warn { color: #8a4b00; }
.ah-addons { display: grid; gap: 8px; }
.ah-card-addons { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.ah-addon { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 6px 12px; border: 1px solid #e4d8c9; border-radius: 8px; cursor: pointer; }
.ah-addon input { flex: none; width: 18px; height: 18px; margin: 0; }
.ah-home .ah-addon img { flex: none; width: 64px; height: 64px; object-fit: contain; border-radius: 6px; background: #fff; }
.ah-addon-text { flex: 1; min-width: 0; }
.ah-addon-text b { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.ah-addon-text small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--ah-mut); }
.ah-addon-price { flex: none; font-weight: 600; white-space: nowrap; }
.ah-addon-price .woocommerce-Price-amount { color: inherit; }
.ah-order-buy { display: grid; gap: 10px; }
.ah-home .ah-order-submit { width: 100%; min-height: 56px; border: 0; font-family: inherit; font-size: 18px; cursor: pointer; }
.ah-order-submit .woocommerce-Price-amount { color: inherit; }
.ah-order-buy ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; font-size: 14px; color: #36505c; }
.ah-order-buy li { margin: 0; }
.ah-narrow { max-width: 980px; text-align: center; }
.ah-order-section .ah-beforeafter { margin-top: 22px; text-align: left; }
.ah-home .ah-kit { width: 100%; border-radius: 12px; }
.ah-kit-list { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 10px; }
.ah-kit-list li { margin: 0; }
.ah-order-page > .woocommerce-notices-wrapper { max-width: 1320px; margin: 0 auto; padding: 16px 24px 0; }
.ah-band-sand .ah-tip { background: #fff; }

/* Product card of a ready-made design, parts/artulio-karta.php */
.ah-page.single-product #content > .ast-container { display: block; max-width: none; margin: 0; padding: 0; }
.ah-page.single-product #primary { margin: 0; padding: 0; }
.ah-page.single-product .site-content #primary .ast-woocommerce-container { padding: 0; border: 0; border-radius: 0; background: none; }
/* Product card: WooCommerce's notices after "Dodaj do koszyka" float at the bottom like .ah-toast instead of pushing
   the page down. notices() in js/home.js adds the close button and hides a success message after a while. */
.ah-page.single-product .woocommerce-notices-wrapper:not(:empty) { position: fixed; z-index: 99999; left: 50%; bottom: 24px; display: grid; gap: 8px; width: max-content; max-width: min(560px, calc(100vw - 32px)); margin: 0; padding: 0; transform: translateX(-50%); transition: opacity .25s ease, transform .25s ease, visibility .25s; }
.ah-page.single-product .woocommerce-notices-wrapper.is-hidden { opacity: 0; visibility: hidden; transform: translate(-50%, 12px); }
.ah-page.single-product .woocommerce-notices-wrapper > * { position: relative; margin: 0; padding: 14px 48px 14px 20px; list-style: none; background: #0e3a4f; color: #fff; border: 0; border-radius: 10px; box-shadow: 0 10px 30px rgba(10, 42, 58, .3); font-size: 15px; line-height: 1.4; }
.ah-page.single-product .woocommerce-notices-wrapper > .woocommerce-error { background: #8a2a1f; }
/* WooCommerce focuses the notice for screen readers; the ring around a floating box only looks like a border */
.ah-page.single-product .woocommerce-notices-wrapper > *:focus { outline: 0; }
.ah-page.single-product .woocommerce-notices-wrapper > *::before { content: none; display: none; }
.ah-page.single-product .woocommerce-notices-wrapper li { margin: 0; padding: 0; list-style: none; }
.ah-page.single-product .woocommerce-notices-wrapper a, .ah-page.single-product .woocommerce-notices-wrapper a.button { float: none; display: inline; margin: 0 0 0 10px; padding: 0; background: none; border: 0; box-shadow: none; color: #f0d9be; font-size: inherit; font-weight: 600; line-height: inherit; text-decoration: underline; white-space: nowrap; }
.ah-page.single-product .ah-notice-close { position: absolute; top: 50%; right: 8px; width: 32px; height: 32px; margin: 0; padding: 0; transform: translateY(-50%); background: none; border: 0; box-shadow: none; color: #fff; font-family: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.ah-page.single-product .ah-notice-close:hover, .ah-page.single-product .ah-notice-close:focus { background: rgba(255, 255, 255, .12); color: #fff; border-radius: 6px; }
.ast-separate-container .ah-product.ast-article-single { display: block; width: 100%; padding: 0; margin: 0; background: #fff; }
.ah-crumbs { padding-block: 16px 0; font-size: 14px; color: var(--ah-mut); }
.ah-home .ah-crumbs a { color: var(--ah-mut); }
.ah-home .ah-crumbs a:hover { color: var(--ah-petrol); }
.ah-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; align-items: start; padding-block: 18px 56px; }
.ah-gallery { display: grid; gap: 12px; min-width: 0; }
.ah-gal-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; aspect-ratio: 1 / 1; background: var(--ah-grey); border-radius: 12px; }
.ah-gal-track::-webkit-scrollbar { display: none; }
.ah-gal-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.ah-home .ah-gal-slide img { width: 100%; height: 100%; object-fit: contain; }
/* Big image: arrows like the old gallery's, and a click goes to the next image (gallery() in js/home.js) */
.ah-gal-main { position: relative; min-width: 0; }
.ah-gal-main:has(.ah-gal-arrow) .ah-gal-track { cursor: pointer; }
.ah-home .ah-gal-arrow { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin: 0; padding: 0; transform: translateY(-50%); background: rgba(255, 255, 255, .9); border: 0; border-radius: 50%; box-shadow: 0 2px 10px rgba(10, 42, 58, .18); color: var(--ah-petrol); font-family: inherit; font-size: 24px; line-height: 1; cursor: pointer; transition: opacity .2s ease; }
.ah-home .ah-gal-arrow:hover, .ah-home .ah-gal-arrow:focus-visible { background: var(--ah-petrol); color: #fff; }
.ah-home .ah-gal-arrow:disabled { opacity: 0; pointer-events: none; }
.ah-gal-arrow-prev { left: 12px; }
.ah-gal-arrow-next { right: 12px; }
/* Thumbnails in one row like the old card's gallery: 6 / 5 / 4 per view, arrows step through the images */
.ah-gal-strip { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 8px; }
.ah-gal-thumbs { --slots: 6; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.ah-gal-thumbs::-webkit-scrollbar { display: none; }
.ah-home .ah-gal-btn { width: 36px; height: 36px; padding: 0; border-radius: 50%; background: #fff; border: 1.5px solid var(--ah-petrol); color: var(--ah-petrol); font-family: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.ah-home .ah-gal-btn:hover:not(:disabled), .ah-home .ah-gal-btn:focus-visible { background: var(--ah-petrol); color: #fff; }
.ah-home .ah-gal-btn:disabled { opacity: .35; cursor: default; }
.ah-home .ah-gal-thumb { display: block; flex: 0 0 calc((100% - (var(--slots) - 1) * 8px) / var(--slots)); scroll-snap-align: start; aspect-ratio: 1 / 1; min-width: 0; padding: 0; background: var(--ah-grey); border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; }
.ah-home .ah-gal-thumb:hover, .ah-home .ah-gal-thumb:focus { background: var(--ah-grey); border-color: #d9ccbb; }
.ah-home .ah-gal-thumb.is-active { border-color: var(--ah-petrol); }
.ah-home .ah-gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ah-product-info { display: grid; gap: 18px; min-width: 0; }
.ah-home .ah-product-info h1 { font-size: clamp(28px, 2.8vw, 38px); margin-bottom: 6px; padding: 0; }
.ah-product-info .ah-sub { color: #36505c; margin-top: 0 !important; }
/* !important: the site's Customizer CSS has .price { font-size: 1rem !important } */
.ah-home .ah-product-price .price, .ah-home .ah-product-price .price bdi, .ah-home .ah-product-price .woocommerce-Price-amount { margin: 0; font-size: 30px !important; font-weight: 700; color: var(--ah-ink) !important; }
.ah-spec small { display: block; margin-top: 2px; font-size: 13px; color: var(--ah-mut); }
.ah-variants { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ah-home .ah-variant { display: block; padding: 10px 12px; background: #fff; border: 1.5px solid #d9ccbb; border-radius: 8px; color: var(--ah-ink); font-size: 15px; }
.ah-home .ah-variant:hover { border-color: var(--ah-petrol); color: var(--ah-ink); }
.ah-variant b { display: block; font-weight: 600; }
.ah-variant .woocommerce-Price-amount { color: inherit; }
.ah-home .ah-variant.is-current { background: var(--ah-petrol); border-color: var(--ah-petrol); color: #fff; }
/* Out of stock: greyed out, not a link (the current page keeps its dark box) */
.ah-home .ah-variant.is-out:not(.is-current) { background: var(--ah-grey); border-style: dashed; color: var(--ah-mut); cursor: not-allowed; }
.ah-home .ah-variant.is-out:not(.is-current):hover { border-color: #d9ccbb; color: var(--ah-mut); }
.ah-variant.is-out > span { font-size: 14px; }
.ah-out-note { margin: 0; padding: 14px 16px; background: #fbeae7; border-radius: 8px; color: #8a2a1f; }
.ah-home .ah-out-note a { color: #8a2a1f; font-weight: 600; text-decoration: underline !important; }
/* A row, against the stronger .woocommerce div.product form.cart rules that make it a column */
.woocommerce div.product.ah-product form.cart { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0; padding: 0; border: 0; }
.woocommerce div.product.ah-product form.cart .quantity { flex: none; width: auto; margin: 0; float: none; }
/* − qty + as one box: the group has the border and the rounded outer corners, the parts inside are square */
.woocommerce div.product.ah-product form.cart .ah-qty { display: flex; align-items: stretch; height: 56px; border: 1.5px solid #d9ccbb; border-radius: 8px; overflow: hidden; background: #fff; }
.woocommerce div.product.ah-product form.cart .ah-qty .qty { width: 48px; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: center; font-size: 16px; -moz-appearance: textfield; appearance: textfield; }
.ah-qty .qty::-webkit-outer-spin-button, .ah-qty .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce div.product.ah-product form.cart .ah-qty .qty:focus { outline: 0; box-shadow: none; }
.ah-qty:focus-within { border-color: var(--ah-petrol); }
.ah-home .ah-qty-btn { width: 42px; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--ah-ink); font-family: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.ah-home .ah-qty-btn:hover, .ah-home .ah-qty-btn:focus { background: var(--ah-grey); color: var(--ah-ink); }
.ah-home .ah-qty-btn:focus-visible { outline: 2px solid var(--ah-blue); outline-offset: -2px; }
.woocommerce div.product.ah-product form.cart .button.single_add_to_cart_button { flex: 1 1 200px; width: auto; float: none; min-height: 56px; margin: 0; background: var(--ah-petrol) !important; color: #fff !important; border: 0; border-radius: 8px; font-family: inherit; font-size: 18px; font-weight: 600; cursor: pointer; }
.woocommerce div.product.ah-product form.cart .button.single_add_to_cart_button:hover { background: var(--ah-deep) !important; }
.woocommerce div.product.ah-product form.cart .single_add_to_cart_button .woocommerce-Price-amount { color: inherit; }
@media (max-width: 480px) { .ah-card-sep { display: none; } .ah-card-total { display: block; } }
.woocommerce div.product.ah-product form.cart .izi-widget-placeholder { flex: 0 0 100%; }
.ah-product-facts { list-style: none; margin: 0; padding: 14px 16px; display: grid; gap: 6px; background: var(--ah-sand); border-radius: 10px; font-size: 15px; }
.ah-product-facts li { margin: 0; }
.ah-home .ah-product-facts a { color: var(--ah-blue); font-weight: 600; }
.ah-home .ah-product-kit h2 { font-size: 20px; margin-bottom: 8px; }
.ah-product-kit ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.ah-product-kit li { margin: 0; }
.ah-home .ah-product-h2 { font-size: 28px; margin-bottom: 20px; }
.ah-desc { max-width: 980px; }
.ah-home .ah-desc-body h2 { font-size: 22px; margin-block: 8px; }
.ah-home .ah-desc-body p { margin-bottom: 12px; }
.ah-home .ah-desc-body img { height: auto; border-radius: 8px; }

@media (max-width: 1100px) {
	.ah-gal-thumbs { --slots: 5; }
	.ah-usp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ah-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.ah-wrap { padding-inline: 16px; }
	.ah-band { padding-block: 32px; }
	.ah-band-tight { padding-block: 0 32px; }
	.ah-topbar { font-size: 13px; padding: 8px 12px; }

	.ah-slide { grid-template-columns: minmax(0, 1fr); gap: 0; padding-inline: 0; min-height: 0; align-items: start; }
	/* Hero photos are about 1:1.07 with the face near the top edge and the canvas low: the box is nearly as tall as the
	   photo is at that width (106vw, capped at 460px) and the crop starts at the top, so the head and the whole canvas fit. */
	.ah-home { --ah-hero-h: min(106vw, 460px); }
	.ah-slide-media { order: -1; height: var(--ah-hero-h); }
	.ah-home .ah-slide-media img { height: 100%; max-height: none; object-position: center top; }
	.ah-slide-grid { padding-block: 0; height: var(--ah-hero-h); }
	.ah-home .ah-slide-grid img { border-radius: 0; max-height: none; object-position: center top; }
	.ah-slide-text { padding: 20px 16px 44px; }
	.ah-slide p { font-size: 16px; margin-bottom: 16px; }
	.ah-home .ah-slide .ah-btn { display: block; }
	.ah-eyebrow { font-size: 12px; }
	.ah-arrow { top: calc(var(--ah-hero-h) - 54px); transform: none; background: rgba(10, 42, 58, .6); }
	.ah-arrow-prev { left: 10px; }
	.ah-arrow-next { right: 10px; }

	.ah-usp { font-size: 14px; }
	.ah-usp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; padding-block: 14px; }
	.ah-usp-grid > div { gap: 8px; }
	.ah-usp svg { width: 24px; height: 24px; }
	.ah-usp-wide { grid-column: span 2; }

	.ah-split { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.ah-lead { font-size: 16px; margin-block: 6px 16px !important; }
	.ah-beforeafter { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: 6px; }
	.ah-beforeafter svg { width: 28px; height: 28px; }
	.ah-beforeafter figcaption { font-size: 11px; letter-spacing: .1em; margin-top: 6px; }
	.ah-home .ah-beforeafter img { border-radius: 10px; }
	/* Phone: heading, images, then the button */
	.ah-split:has(.ah-beforeafter) { gap: 0; }
	.ah-split:has(.ah-beforeafter) > div:first-child { display: contents; }
	.ah-beforeafter { order: 1; margin-bottom: 20px; }
	.ah-home .ah-split .ah-btn { order: 2; display: block; }

	.ah-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px; }
	.ah-steps li { display: flex; align-items: center; gap: 14px; }
	.ah-home .ah-steps img { flex: none; width: 76px; height: 76px; margin: 0; }
	.ah-home .ah-steps h3 { font-size: 16px; margin-bottom: 2px; }
	.ah-home .ah-sizes-title { font-size: 20px; margin-block: 28px 12px; }
	.ah-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.ah-home .ah-size { min-height: 88px; padding: 12px; }
	.ah-home .ah-btn-top { display: block; margin-top: 20px; }

	.ah-tips { gap: 10px; margin-top: 14px; }
	.ah-tip { display: block; padding: 0; background: none; }
	.ah-home .ah-tip-img img { height: 84px; }
	.ah-tip figcaption { font-size: 14px; margin-top: 4px; }
	.ah-tip figcaption b { display: inline; }

	.ah-head { flex-wrap: nowrap; gap: 10px; }
	.ah-head-stack { flex-wrap: wrap; }
	.ah-nav { gap: 6px; flex: none; }
	.ah-rail { margin-inline: -16px; padding-inline: 16px; gap: 10px; scroll-padding-inline: 16px; }
	.ah-home .ah-cat { flex-basis: 144px; height: 180px; }
	.ah-cat-label { padding: 24px 10px 10px; }
	.ah-cat-label b { font-size: 14px; }
	.ah-cat-label span { font-size: 12px; }
	.ah-home .ah-acc { flex-basis: 160px; }
	.ah-home .ah-acc img { height: 160px; }
	.ah-acc b { font-size: 14px; }
	.ah-acc span { font-size: 13px; }

	.ah-cards, .ah-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
	.ah-home .ah-card h3 { font-size: 14px; }
	.ah-card-desc { font-size: 13px; }
	.ah-price { font-size: 16px; }
	.ah-badge { left: 6px; top: 6px; font-size: 11px; padding: 2px 6px; }

	.ah-gift { gap: 8px; }
	.ah-home .ah-gift img { border-radius: 8px; }
	.ah-chips { gap: 8px; margin-bottom: 18px; }
	.ah-about p { font-size: 16px; }
	.ah-reviews { padding: 26px 16px; }
	.ah-home .ah-reviews .ah-btn { display: block; }
	.ah-page #ast-scroll-top { display: none !important; }
	.ah-toast, .ah-page.single-product .woocommerce-notices-wrapper:not(:empty) { bottom: 16px; }

	.ah-order { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 16px 32px; }
	.ah-order-preview { position: static; }
	.ah-frame-box { min-height: 300px; padding: 16px; }
	.ah-home .ah-order-photo { max-height: 340px; }
	.ah-order-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ah-home .ah-addon img { width: 52px; height: 52px; }
	.ah-addon { padding: 8px 10px; }
	.ah-order-buy ul { grid-template-columns: minmax(0, 1fr); }
	.ah-band-sand .ah-tip { background: none; }
	.ah-product-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 12px 32px; }
	.ah-gal-track { border-radius: 10px; }
	.ah-gal-thumbs { --slots: 4; }
	.ah-home .ah-gal-arrow { width: 36px; height: 36px; font-size: 20px; }
	.ah-gal-arrow-prev { left: 8px; }
	.ah-gal-arrow-next { right: 8px; }
	.ah-gal-strip { grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 6px; }
	.ah-home .ah-gal-btn { width: 32px; height: 32px; }
	.ah-home .ah-product-h2 { font-size: 24px; margin-bottom: 14px; }
	.ah-variants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.ah-slide { transition: none; }
	.ah-rail { scroll-behavior: auto; }
	.ah-toast, .ah-page.single-product .woocommerce-notices-wrapper { transition: none; }
	.ah-gal-track, .ah-gal-thumbs { scroll-behavior: auto; }
}
