/*
Theme Name: Hex & Horde
Theme URI: https://hexandhorde.com
Description: Storefront theme for Hex & Horde original fantasy gaming mats. Built for WooCommerce, matching the Hex & Horde design: acid-lime accents and Barlow Condensed headlines.
Version: 1.1.7
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
WC requires at least: 9.0
WC tested up to: 11.2
Author: Hex & Horde
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hex-and-horde
Tags: e-commerce, custom-logo, custom-menu
*/

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url(assets/fonts/barlow-condensed-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url(assets/fonts/dm-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-display: swap; src: url(assets/fonts/dm-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 600; font-display: swap; src: url(assets/fonts/dm-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url(assets/fonts/dm-sans-latin-700-normal.woff2) format("woff2"); }

/* ---------- Tokens ---------- */
:root {
	--ink: #171b18;
	--paper: #f4f4ef;
	--acid: #c9e34c;
	--acid-hover: #dcf57a;
	--acid-text: #627505;
	--line: #d9dcd1;
	--muted: #6f7469;
	--night: #1d221e;
	--night-2: #252b26;
	--night-line: #343b35;
	--night-text: #b9beb2;
	--display: "Barlow Condensed", Impact, "Arial Narrow", sans-serif;
	--body: "DM Sans", system-ui, sans-serif;
	--gutter: 5%;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; margin: 0; line-height: 1; }
:focus-visible { outline: 3px solid #839a09; outline-offset: 4px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hh-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; }
.hh-skip:focus { left: 8px; }
.hh-arrow { display: inline-block; font-size: .95em; line-height: 1; }

.hh-eyebrow { font-size: 12px; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; margin: 0 0 16px; }
.hh-eyebrow--small { font-size: 10px; color: var(--muted); margin-bottom: 10px; }

.hh-button, .button, button.button, .wc-block-components-button:not(.is-link) {
	display: inline-flex; align-items: center; justify-content: space-between; gap: 40px;
	padding: 17px 24px; border: 0; border-radius: 0; cursor: pointer;
	font-size: 14px; font-weight: 700; line-height: 1.2;
	background: var(--ink); color: #fff; transition: background .15s;
}
.hh-button--primary, .single_add_to_cart_button.button, .checkout-button.button, .wc-block-components-button.contained {
	background: var(--acid) !important; color: var(--ink) !important;
}
.hh-button--primary:hover, .single_add_to_cart_button.button:hover, .checkout-button.button:hover { background: var(--acid-hover) !important; }

/* ---------- Announcement + header ---------- */
.hh-announcement { color: var(--ink); display: flex; justify-content: space-between; gap: 16px; padding: 10px var(--gutter); background: var(--acid); font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; }
.hh-announcement p { margin: 0; }
.hh-announcement__aside { font-weight: 500; letter-spacing: .4px; text-transform: none; }

.hh-header { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; min-height: 108px; padding: 0 var(--gutter); background: var(--paper); color: var(--ink); }
.hh-logo { display: inline-flex; align-items: center; justify-self: start; }
.hh-logo img { display: block; width: 200px; height: auto; }
.hh-wordmark { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: .5px; text-transform: uppercase; line-height: .9; max-width: 6ch; }
.hh-nav .hh-menu, .hh-nav .menu { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; font-size: 14px; font-weight: 600; }
.hh-nav li { position: relative; }
.hh-nav a { display: inline-block; padding: 8px 0; border-bottom: 1px solid transparent; }
.hh-nav > ul > li > a:hover { border-bottom-color: currentColor; }
.hh-nav .menu-item-has-children > a::after { content: "⌄"; margin-left: 6px; font-size: 12px; color: #687040; }
.hh-nav .sub-menu { display: none; position: absolute; top: 100%; left: -18px; min-width: 210px; margin: 0; padding: 10px; list-style: none; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 14px 30px rgba(0,0,0,.13); }
.hh-nav .sub-menu a { display: block; padding: 10px 12px; font-size: 13px; font-weight: 500; white-space: nowrap; border: 0; }
.hh-nav .sub-menu a:hover { background: #eaecdf; }
.hh-nav li:hover > .sub-menu, .hh-nav li:focus-within > .sub-menu { display: block; }
.hh-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 24px; font-size: 14px; font-weight: 600; }
.hh-account { font-size: 13px; }
.hh-bag { display: inline-flex; align-items: center; gap: 7px; }
.hh-bag__count { display: inline-grid; place-items: center; min-width: 23px; height: 23px; padding: 0 5px; border: 1px solid #bbb; border-radius: 99px; font-size: 12px; }
.hh-menu-toggle { display: none; }

/* ---------- Hero ---------- */
.hh-hero { position: relative; min-height: 650px; overflow: hidden; background: #1c1b17 radial-gradient(ellipse at 70% 40%, #3b2f4d 0%, #1c1b17 60%); color: #fff; }
.hh-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.hh-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,16,14,.93), rgba(12,16,14,.68) 32%, transparent 75%); }
.hh-hero__content { position: relative; z-index: 2; max-width: 730px; padding: 60px 6%; }
.hh-hero .hh-eyebrow { color: var(--acid); }
.hh-hero__title { font-size: clamp(64px, 7vw, 108px); line-height: .93; letter-spacing: -1px; text-transform: uppercase; max-width: 6.2em; }
.hh-hero__title em { font-style: normal; color: var(--acid); }
.hh-hero__intro { max-width: 420px; margin: 24px 0; font-size: 16px; line-height: 1.65; color: #ddd; }
.hh-hero__note { margin-top: 16px; font-size: 12px; color: #aaa; }
.hh-hero__caption { position: absolute; z-index: 2; right: var(--gutter); bottom: 24px; margin: 0; padding: 10px 12px; text-align: right; background: rgba(15,18,16,.82); border: 1px solid rgba(255,255,255,.12); }
.hh-hero__caption span { display: block; margin-bottom: 4px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; }
.hh-hero__caption b { font-family: var(--display); font-size: 26px; font-weight: 500; }

.hh-manifesto { display: flex; justify-content: space-around; align-items: center; padding: 14px 3%; background: var(--ink); color: #eeeee6; font-family: var(--display); font-size: 23px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; border-top: 1px solid #2c312c; }
.hh-star { color: var(--acid); font-size: 22px; }

/* ---------- Collection ---------- */
.hh-collection, .hh-shop { padding: 64px var(--gutter) 80px; }
.hh-section-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
.hh-section-top h1, .hh-section-top h2 { font-size: clamp(44px, 4.4vw, 61px); text-transform: uppercase; }
.hh-section-top > p { margin: 0; font-size: 14px; color: #666; text-align: right; }
.hh-category-row { margin-top: 26px; }
.hh-category-row + .hh-category-row { margin-top: 48px; }
.hh-category-row__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.hh-category-row__head h3 { font-size: 36px; text-transform: uppercase; }
.hh-more { font-size: 12px; font-weight: 700; letter-spacing: .4px; padding-bottom: 4px; border-bottom: 1px solid #9ba48b; white-space: nowrap; }
.hh-more .hh-arrow { margin-left: 6px; }

/* Product grid + cards */
ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 14px; margin: 0; padding: 0; list-style: none; }
ul.products::before, ul.products::after { display: none !important; }
ul.products li.product.hh-card { width: auto !important; margin: 0 !important; float: none !important; min-width: 0; }
.hh-card__link { display: block; }
.hh-card__media { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; border: 1px solid #e3e4dc; }
.hh-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; }
.hh-card--landscape .hh-card__media { aspect-ratio: 1.6 / 1; border: 0; background: var(--ink); }
.hh-card--landscape .hh-card__media img { object-fit: cover; }
.hh-card__link:hover .hh-card__media img { transform: scale(1.035); }
.hh-card__meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.hh-card__title { font-size: 14px; font-weight: 600; line-height: 1.35; }
.hh-card__price, .hh-card__price .price { font-size: 13px; white-space: nowrap; color: inherit !important; }
.hh-card__price .woocommerce-Price-amount { font-weight: 500; }
.hh-card__note { display: block; margin-top: 6px; font-size: 12px; color: #76786e; }

/* Shop page */
.hh-shop__head { margin-bottom: 22px; }
.hh-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.hh-filter { padding: 10px 19px; border: 1px solid #d5d6cd; border-radius: 2px; font-size: 14px; }
.hh-filter:hover { border-color: var(--ink); }
.hh-filter.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.woocommerce-result-count { float: left; margin: 0 0 22px; font-size: 12px; color: #777; }
.woocommerce-ordering { float: right; margin: 0 0 22px; }
.woocommerce-ordering select { padding: 8px 10px; border: 1px solid #c4c8bc; background: #fff; font-size: 13px; }
.hh-shop ul.products { clear: both; }
.woocommerce-pagination { margin-top: 40px; text-align: center; }
.woocommerce-pagination ul { display: inline-flex; gap: 6px; list-style: none; padding: 0; border: 0 !important; }
.woocommerce-pagination li { border: 0 !important; }
.woocommerce-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 38px; height: 38px; border: 1px solid #d5d6cd; }
.woocommerce-pagination .current { background: var(--ink); color: #fff; }

/* Shop and category pages: showcase rows. The Printify mockups are square
   with the mat in the middle on white, so --mockup zooms in to the mat. */
.hh-shop ul.products { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 56px; border-top: 2px solid var(--ink); }
ul.products li.product.hh-row { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; width: auto !important; margin: 0 !important; float: none !important; padding: 28px 0; border-bottom: 1px solid var(--line); }
ul.products li.product.hh-row:nth-child(even) { flex-direction: row-reverse; }
/* Wide screens: two rows side by side, photo on the left of each. */
@media (min-width: 1440px) {
	.hh-shop ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	ul.products li.product.hh-row:nth-child(even) { flex-direction: row; }
}
.hh-row__media { flex: 1 1 55%; min-width: 0; display: block; position: relative; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 8px; background: var(--ink); box-shadow: 0 14px 28px rgba(23, 27, 24, .22); }
.hh-shop ul.products li.product .hh-row__media img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; box-shadow: none; transition: transform .4s ease; }
.hh-shop ul.products li.product .hh-row__media--mockup img { position: absolute; left: -7.47%; top: -64.94%; width: 114.94%; max-width: none; height: auto; object-fit: fill; }
.hh-shop ul.products li.product .hh-row__media:hover img { transform: scale(1.025); }
.hh-row__body { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hh-row__body p { margin: 0; }
.hh-row__num { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--acid-text); }
.hh-shop ul.products li.product h2.hh-row__title { padding: 0; margin: 0; font-size: clamp(30px, 2.6vw, 40px); font-weight: 700; line-height: .95; text-transform: uppercase; }
.hh-row__line { font-size: 15px; line-height: 1.6; color: #3d443e; }
.hh-row__prices { font-size: 14px; color: #5f665f; }
.hh-row__prices .woocommerce-Price-amount { color: var(--ink); font-weight: 600; }
.hh-row__cta { margin-top: 6px; gap: 18px; }

/* ---------- Homepage slideshow: one slide per mat category ---------- */
.hh-slides { min-height: 650px; }
.hh-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.hh-slide.is-active { z-index: 1; opacity: 1; }
.hh-slide__link { display: flex; align-items: center; height: 100%; color: #fff; }
.hh-slide__media { position: absolute; inset: 0; overflow: hidden; background: #1c1b17; container-type: size; }
.hh-slide__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Printify mockups: the mat fills 88.5% x 45% of the square photo. Scale it just
   enough that the whole mat width shows and it still covers the slide's height. */
.hh-slide__media--mockup img { position: absolute; left: 50%; top: 50%; width: max(113cqw, 222.3cqh); max-width: none; height: auto; transform: translate(-50%, -50%); }
.hh-slide .hh-hero__shade { z-index: 1; }
.hh-slide .hh-hero__content { display: flex; flex-direction: column; align-items: flex-start; }
.hh-slide .hh-hero__intro { display: block; }
.hh-slide .hh-button { margin-top: 4px; }
.hh-slides__nav { position: absolute; z-index: 3; left: 6%; right: var(--gutter); bottom: 28px; display: flex; align-items: center; gap: 8px; }
.hh-slides__dots { display: flex; gap: 10px; margin-right: auto; }
.hh-slides__dot { width: 22px; height: 4px; padding: 0; border: 0; background: rgba(244, 244, 239, .45); cursor: pointer; transition: width .3s, background .3s; }
.hh-slides__dot[aria-current="true"] { width: 40px; background: var(--acid); }
.hh-slides__arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(244, 244, 239, .5); background: rgba(15, 18, 16, .4); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.hh-slides__arrow:hover { border-color: var(--acid); color: var(--acid); }

/* ---------- Homepage category bands ----------
   Every band uses the same two columns, so the photos line up from band to band. */
.hh-collection--bands { padding-bottom: 40px; }
.hh-collection--bands .hh-section-top { margin-bottom: 0; }
.hh-band { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: center; gap: 48px; padding: 52px var(--gutter); background: #e8e9e1; }
.hh-band--dark { background: var(--ink); color: var(--paper); }
.hh-band__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hh-band__intro .hh-eyebrow { margin: 0; color: var(--acid-text); }
.hh-band--dark .hh-band__intro .hh-eyebrow { color: var(--acid); }
.hh-band h3 { font-size: clamp(38px, 3.4vw, 48px); font-weight: 700; line-height: .95; text-transform: uppercase; }
.hh-band__text { margin: 0; font-size: 15px; line-height: 1.6; opacity: .8; }
.hh-band__intro .hh-button { margin-top: 8px; gap: 18px; }
.hh-band__mats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.hh-band__mat { display: flex; flex-direction: column; gap: 10px; }
.hh-band__meta { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.hh-band__name { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.hh-band__price, .hh-band__price .price { white-space: nowrap; opacity: .85; color: inherit !important; }

/* A mat photo cropped to 2:1. Printify mockups are square with the mat in the
   middle on white, so --mockup zooms in to the mat. */
.hh-mat-photo { display: block; position: relative; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 8px; background: var(--ink); box-shadow: 0 14px 28px rgba(0, 0, 0, .28); }
.hh-mat-photo img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; transition: transform .4s ease; }
.hh-mat-photo--mockup img { position: absolute; left: -7.47%; top: -64.94%; width: 114.94%; max-width: none; height: auto; }
.hh-band__mat:hover .hh-mat-photo img { transform: scale(1.03); }

/* ---------- Category panel ---------- */
.hh-worlds { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding: 58px 6%; background: var(--night); color: #f0f0ea; }
.hh-worlds .hh-eyebrow { font-size: 10px; }
.hh-worlds h2 { font-size: clamp(40px, 4vw, 52px); text-transform: uppercase; }
.hh-worlds > div > p:last-child { font-size: 14px; line-height: 1.8; color: var(--night-text); }
.hh-world-list { list-style: none; margin: 0; padding: 0; }
.hh-world-list a { display: flex; align-items: center; gap: 18px; padding: 20px 0; border-bottom: 1px solid #4a5148; }
.hh-world-list__num { font-size: 12px; color: #8a907f; }
.hh-world-list__text strong { display: block; font-family: var(--display); font-size: 27px; font-weight: 600; text-transform: uppercase; line-height: 1; }
.hh-world-list__text small { display: block; margin-top: 6px; font-size: 12px; color: #9aa092; }
.hh-world-list .hh-arrow { margin-left: auto; font-size: 22px; }
.hh-world-list a:hover strong { color: var(--acid); }

/* ---------- Footer ---------- */
.hh-footer { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; padding: 48px var(--gutter) 28px; background: var(--ink); color: #efeee7; }
.hh-footer__brand { display: flex; align-items: center; gap: 40px; }
.hh-footer__brand p { font-size: 14px; color: #b8bcb1; }
.hh-logo--footer img { width: 120px; filter: brightness(0) invert(1); }
.hh-footer__label { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--acid); }
.hh-footer__small { margin: 0 0 8px; font-size: 12px; color: #929889; }
.hh-footer-menu { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 2; }
.hh-footer-menu a:hover, .hh-footer__cta:hover { color: var(--acid); }
.hh-footer__cta { display: inline-block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.hh-footer__legal { grid-column: 1 / -1; margin: 12px 0 0; padding-top: 20px; border-top: 1px solid #2d322d; font-size: 11px; color: #929889; }

/* ---------- Product page ---------- */
.hh-pdp-wrap { padding: 28px 5% 96px; }
.hh-pdp { max-width: 1296px; margin: 0 auto; }
.hh-pdp__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; font-size: 13px; color: var(--muted); }
.hh-back { padding-bottom: 3px; border-bottom: 1px solid #b9beb2; }
.hh-pager { display: flex; gap: 18px; }
.hh-pager a:hover, .hh-back:hover { color: var(--ink); }
.hh-pdp__layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(360px, 1fr); gap: 48px; align-items: start; }

.hh-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hh-gallery__item { display: block; overflow: hidden; background: #fff; }
.hh-gallery__item[hidden] { display: none; }
.hh-gallery__item img { display: block; width: 100%; height: 260px; object-fit: cover; transition: transform .3s ease; }
.hh-gallery__item:hover img { transform: scale(1.03); }
.hh-gallery__item--main { grid-column: 1 / -1; box-shadow: 0 24px 48px rgba(23,27,24,.22); }
.hh-gallery__item--main img { height: auto; object-fit: contain; }
.hh-gallery__item--main:hover img { transform: none; }
.hh-gallery__more { grid-column: 1 / -1; min-height: 48px; border: 1px solid var(--ink); background: transparent; font-weight: 700; cursor: pointer; }
.hh-gallery__more:hover { background: var(--ink); color: #fff; }

.hh-pdp__panel { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 22px; padding: 32px; background: #fff; border: 1px solid var(--line); }
.hh-pdp .hh-eyebrow { margin: 0 0 8px; font-size: 12px; letter-spacing: .14em; color: var(--acid-text); }
.hh-pdp__title { font-size: clamp(40px, 3.6vw, 52px); font-weight: 700; line-height: .95; text-transform: uppercase; }
.hh-pdp__sub { margin-top: 8px; font-size: 15px; color: var(--muted); }
.hh-pdp__sub p { margin: 0; }
.hh-pdp__panel > .price { margin: 0; font-family: var(--display); font-size: 36px; font-weight: 700; }

.hh-sizes { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.hh-sizes legend { margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 700; }
.hh-size { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); cursor: pointer; }
.hh-size:hover { border-color: #9da393; }
.hh-size:has(input:checked) { border: 2px solid var(--ink); padding: 13px 15px; }
.hh-size input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.hh-size__text { flex: 1; display: flex; flex-direction: column; }
.hh-size__text small { font-size: 13px; color: var(--muted); }
.hh-size__price { font-size: 18px; font-weight: 700; }

.hh-pdp .hh-has-size-radios .variations { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hh-pdp .variations { width: 100%; margin: 0 0 6px; border-collapse: collapse; border: 0; }
.hh-pdp .variations th, .hh-pdp .variations td { display: block; padding: 0; text-align: left; border: 0; background: none; }
.hh-pdp .variations label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.hh-pdp .variations select { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 0; background: #fff; font-size: 15px; }
.hh-pdp .reset_variations, .hh-pdp .woocommerce-variation-price, .hh-pdp .woocommerce-variation-description { display: none !important; }
.hh-pdp .woocommerce-variation-availability { font-size: 13px; color: var(--muted); }
.hh-pdp form.cart { display: grid; gap: 12px; margin: 0; }
.hh-pdp .woocommerce-variation-add-to-cart, .hh-pdp form.cart:not(.variations_form) { display: flex; gap: 10px; align-items: stretch; }
.hh-pdp .quantity input.qty { width: 64px; height: 100%; min-height: 56px; padding: 0 8px; border: 1px solid var(--ink); background: #fff; text-align: center; }
.hh-pdp .single_add_to_cart_button { flex: 1; min-height: 56px; justify-content: center; font-size: 17px !important; }
.hh-pdp .single_add_to_cart_button.disabled { opacity: .55; cursor: not-allowed; }
.hh-size-link { align-self: flex-start; margin-top: -10px; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

.hh-made { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 16px; background: var(--paper); font-size: 14px; line-height: 1.5; }
.hh-made svg { flex: none; margin-top: 1px; }
.hh-pdp__story h2, .hh-specs caption { margin: 0 0 10px; font-size: 26px; font-weight: 700; text-align: left; text-transform: uppercase; }
.hh-pdp__story p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: #3d443e; }
.hh-pdp__story p:last-child { margin-bottom: 0; }
.hh-specs { width: 100%; border-collapse: collapse; font-size: 14px; }
.hh-specs th, .hh-specs td { padding: 10px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.hh-specs tr:last-child th, .hh-specs tr:last-child td { border-bottom: 1px solid var(--line); }
.hh-specs th { width: 38%; padding-right: 12px; font-weight: 500; color: var(--muted); }

.hh-faq { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr); gap: 48px; margin-top: 88px; }
.hh-faq > h2 { font-size: 44px; font-weight: 700; text-transform: uppercase; }
.hh-faq__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.hh-faq h3 { margin: 0 0 8px; font-family: var(--body); font-size: 16px; font-weight: 700; line-height: 1.3; }
.hh-faq p { margin: 0; font-size: 14px; line-height: 1.6; color: #3d443e; }

.hh-pdp .related { margin-top: 88px; }
.hh-pdp .related > h2 { margin-bottom: 24px; font-size: 44px; font-weight: 700; text-transform: uppercase; }

/* Notices */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 0 0 24px; padding: 14px 18px; border-left: 3px solid var(--acid); background: #ecefe2; color: var(--ink); font-size: 14px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.woocommerce-error { border-left-color: #c0392b; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top: 0 !important; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none !important; }
.woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus { outline: none; }
.woocommerce-message .button, .woocommerce-info .button { background: var(--ink) !important; color: #fff !important; border-radius: 0 !important; }
.woocommerce-message .button, .woocommerce-info .button { order: 2; padding: 10px 16px; }

/* ---------- Currency switch ---------- */
.hh-currency { display: inline-flex; border: 1px solid #c9cdc0; }
.hh-currency__option { min-width: 44px; padding: 6px 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-align: center; color: var(--muted); }
.hh-currency__option:hover { color: var(--ink); }
.hh-currency__option[aria-current="true"] { background: var(--ink); color: #fff; }

/* ---------- Elementor ---------- */
.hh-elementor-content { width: 100%; }
.hh-elementor-content > .elementor { margin: 0; }
.hh-elementor .hh-main h1, .hh-elementor .hh-main h2, .hh-elementor .hh-main h3 { line-height: 1.05; }
.elementor-widget-text-editor a { text-decoration: underline; text-underline-offset: 3px; }
.elementor-button { border-radius: 0; font-family: var(--body); font-weight: 700; }

/* ---------- Pages, cart, checkout, account ---------- */
.hh-page { max-width: 1180px; margin: 0 auto; padding: 64px var(--gutter) 90px; }
.hh-page--center { text-align: center; }
.hh-page__head { margin-bottom: 30px; }
.hh-page__head h1, .hh-page--center h1 { font-size: clamp(44px, 5vw, 64px); text-transform: uppercase; }
.hh-entry__content { font-size: 15px; line-height: 1.75; }
.hh-entry__content > * { max-width: 100%; }
.hh-entry__content a:not(.button):not(.wc-block-components-button) { text-decoration: underline; text-underline-offset: 3px; }
.hh-entry__content input[type="text"], .hh-entry__content input[type="email"], .hh-entry__content input[type="password"], .hh-entry__content input[type="tel"], .hh-entry__content textarea, .hh-entry__content select { width: 100%; padding: 11px 12px; border: 1px solid #c4c8bc; background: #fff; }
.wc-block-components-sidebar-layout .wc-block-components-main, .wc-block-cart__sidebar { font-size: 14px; }
.wc-block-components-totals-wrapper, .wc-block-cart .wc-block-cart__totals-title { border-color: var(--line) !important; }
.wc-block-components-product-name { font-weight: 600; }
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button { width: 100%; justify-content: center !important; }

.hh-size-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 30px 0 18px; }
.hh-size-card { padding: 26px; background: #eceee4; }
.hh-size-card h2 { margin-bottom: 18px; font-size: 33px; text-transform: uppercase; }
.hh-size-card h2 small { display: block; margin-top: 4px; font-family: var(--body); font-size: 14px; font-weight: 500; text-transform: none; color: var(--muted); }
.hh-size-card table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hh-size-card th, .hh-size-card td { padding: 11px 8px; text-align: left; border-bottom: 1px solid #d2d7c8; }
.hh-size-card td { color: #5f6559; }
.hh-note { font-size: 12px; color: var(--muted); }
.hh-size-compare { margin: 30px 0 0; padding: 26px; background: var(--night); }
.hh-size-compare svg { display: block; width: 100%; height: auto; }
.hh-size-compare__large { fill: var(--night-2); stroke: var(--paper); stroke-width: 3; }
.hh-size-compare__standard { fill: rgba(201, 227, 76, .18); stroke: var(--acid); stroke-width: 3; }
.hh-size-compare__card { fill: var(--paper); }
.hh-size-compare__label { font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; fill: var(--paper); }
.hh-size-compare__label--standard { fill: var(--acid); }
.hh-size-compare figcaption { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 18px; font-size: 14px; color: var(--night-text); }
.hh-size-compare figcaption span { display: inline-flex; align-items: center; gap: 8px; }
.hh-size-compare__key { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--paper); }
.hh-size-compare__key--standard { border-color: var(--acid); background: rgba(201, 227, 76, .18); }
.hh-size-compare__key--card { border: 0; background: var(--paper); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.hh-nav .hh-menu, .hh-nav .menu { gap: 20px; }
	.hh-pdp__layout { grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr); gap: 32px; }
}
@media (max-width: 900px) {
	ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hh-worlds { grid-template-columns: 1fr; gap: 24px; }
	.hh-band { grid-template-columns: 1fr; gap: 28px; }
	.hh-band__mats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
	.hh-band__mats li { scroll-snap-align: start; }
	.hh-footer { grid-template-columns: 1fr 1fr; }
	.hh-footer__brand { grid-column: 1 / -1; }
	.hh-pdp__layout { grid-template-columns: 1fr; }
	.hh-pdp__panel { position: static; padding: 24px; }
	.hh-faq { grid-template-columns: 1fr; gap: 24px; }
	/* Phones and tablets: photos become a swipe row so the buy panel stays close. */
	.hh-gallery { display: flex; gap: 10px; margin: 0 -5%; padding: 0 5% 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
	.hh-gallery__item, .hh-gallery__item[hidden] { display: block; flex: 0 0 82%; scroll-snap-align: center; }
	.hh-gallery__item--main { box-shadow: none; }
	.hh-gallery__item img, .hh-gallery__item--main img { height: 100%; max-height: 420px; object-fit: contain; }
	.hh-gallery__more { display: none; }
	.hh-size-grid { grid-template-columns: 1fr; }
	.hh-size-compare { padding: 16px; }
}
@media (max-width: 820px) {
	.hh-header { grid-template-columns: auto 1fr auto; min-height: 80px; padding: 8px 4%; gap: 12px; }
	.hh-logo img { width: 140px; }
	.hh-menu-toggle { order: 3; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid #c9cdc0; border-radius: 3px; background: transparent; cursor: pointer; }
	.hh-menu-toggle__bars, .hh-menu-toggle__bars::before, .hh-menu-toggle__bars::after { display: block; width: 18px; height: 2px; background: var(--ink); content: ""; position: relative; }
	.hh-menu-toggle__bars::before { position: absolute; top: -6px; }
	.hh-menu-toggle__bars::after { position: absolute; top: 6px; }
	.hh-header__actions { order: 2; gap: 14px; }
	.hh-account { display: none; }
	.hh-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 8px 4% 18px; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 14px 30px rgba(0,0,0,.12); }
	.hh-header.is-open .hh-nav { display: block; }
	.hh-nav .hh-menu, .hh-nav .menu { flex-direction: column; align-items: stretch; gap: 0; }
	.hh-nav a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
	.hh-nav .sub-menu { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 0 14px; }
	.hh-nav .menu-item-has-children > a::after { content: none; }
	.hh-section-top { flex-direction: column; align-items: flex-start; }
	.hh-section-top > p { text-align: left; }
}
/* Phones: show the whole mat above the words instead of a zoomed-in slice behind them. */
@media (max-width: 700px) {
	.hh-slides { display: grid; min-height: 0; }
	.hh-slide { position: relative; inset: auto; grid-area: 1 / 1; }
	.hh-slide__link { flex-direction: column; align-items: stretch; height: auto; }
	.hh-slide__media { position: relative; inset: auto; aspect-ratio: 1.966; }
	.hh-slide .hh-hero__shade { display: none; }
	.hh-slide .hh-hero__content { padding: 28px 6% 84px; }
	.hh-slide .hh-hero__title { font-size: clamp(44px, 13vw, 64px); }
}

@media (max-width: 560px) {
	:root { --gutter: 5%; }
	.hh-announcement { justify-content: center; font-size: 10px; }
	.hh-announcement__aside { display: none; }
	.hh-hero { min-height: 590px; }
	.hh-slides__nav { bottom: 18px; }
	.hh-hero__image { object-position: 63% center; }
	.hh-hero__shade { background: linear-gradient(90deg, rgba(16,20,16,.85), rgba(16,20,16,.53) 65%, rgba(16,20,16,.2)); }
	.hh-hero__content { padding: 48px 6%; }
	.hh-hero__caption { display: none; }
	.hh-manifesto { font-size: 15px; gap: 10px; }
	.hh-manifesto > :nth-last-child(-n+2) { display: none; }
	.hh-collection, .hh-shop { padding: 44px 5% 60px; }
	.hh-category-row__head h3 { font-size: 30px; }
	ul.products { gap: 26px 12px; }
	ul.products li.product.hh-row { gap: 18px; padding: 24px 0; }
	.hh-card__meta { display: block; }
	.hh-card__price { display: block; margin-top: 4px; }
	.hh-footer { grid-template-columns: 1fr; }
	.hh-footer__brand { flex-direction: column; align-items: flex-start; gap: 12px; }
	.hh-pdp-wrap { padding: 22px 5% 64px; }
	.hh-faq__list { grid-template-columns: 1fr; gap: 20px; }
	.hh-faq > h2, .hh-pdp .related > h2 { font-size: 34px; }
	.hh-pdp__bar { flex-direction: column; align-items: flex-start; }
	.woocommerce-result-count, .woocommerce-ordering { float: none; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.hh-card__media img, .hh-row__media img, .hh-mat-photo img { transition: none; }
	.hh-slide { transition: none; }
}