/*
Theme Name: awlry
Theme URI: https://awlry.com
Author: awlry
Description: awlry — custom dies & craft tools. Dark-workshop brand theme with a built-in custom-die configurator and full WooCommerce support.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: awlry
Tags: e-commerce, custom-colors, custom-menu, full-width-template, block-styles
*/

/* ============================================================
   WRITTEN MOBILE-FIRST.
   Base rules describe the phone. Everything larger is layered on
   with @media (min-width: …). Breakpoints: 480 / 640 / 768 / 920 / 1000.
   Do not add max-width media queries — extend upward instead.
   ============================================================ */

/* ============================================================
   01 · Tokens
   ============================================================ */
:root {
	--ink: #17140F;
	--ink2: #2A2620;
	--bone: #F6F1E7;
	--paper: #FBF8F1;
	--ember: #E4572E;
	--ember-dk: #C2431F;
	--tan: #C8925E;
	--tan-lt: #E4C9A8;
	--pine: #1B3A34;
	--steel: #7C7A72;
	--line: #E4DDCD;
	--ok: #2E7D5B;
	--wrap: 1200px;
	--radius: 16px;
	--font-ui: 'Space Grotesk', Inter, system-ui, -apple-system, 'Segoe UI', 'Noto Sans SC', sans-serif;
	--font-body: Inter, system-ui, -apple-system, 'Segoe UI', 'Noto Sans SC', sans-serif;
	--font-serif: Fraunces, Georgia, 'Songti SC', serif;

	/* mobile-first scale */
	--gutter: 18px;          /* page side padding */
	--sec-y: 46px;           /* section vertical padding */
	--hdr-h: 60px;           /* header bar height */
	--tap: 46px;             /* minimum touch target */
	--radius-sm: 12px;
	--radius-lg: 20px;
}

/* ============================================================
   02 · Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--hdr-h) + 12px);
	/* the closed off-canvas drawer sits off-screen to the right; without this it
	   would extend the scrollable area and let phones pan sideways.
	   `clip` (not `hidden`) keeps position:sticky working on the header. */
	overflow-x: clip;
}
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.62;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: rgba(228, 87, 46, .14);
	overflow-wrap: break-word;
	overflow-x: clip;
}
body.awlry-no-scroll { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ember); }
h1, h2, h3, h4, h5 {
	font-family: var(--font-ui); letter-spacing: -.02em; line-height: 1.14;
	margin: 0 0 .5em; text-wrap: balance;
}
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
::selection { background: var(--ember); color: #fff; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); clip-path: inset(50%); white-space: nowrap;
}
.awlry-wrap {
	max-width: var(--wrap); margin: 0 auto;
	padding-left: max(var(--gutter), env(safe-area-inset-left));
	padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.awlry-section { padding: var(--sec-y) 0; }
.awlry-eyebrow {
	font-family: var(--font-ui); font-size: 11.5px; font-weight: 500;
	letter-spacing: .18em; text-transform: uppercase; color: var(--steel);
}
.awlry-sechead {
	display: flex; flex-direction: column; align-items: flex-start;
	gap: 6px; margin-bottom: 26px;
}
.awlry-sechead h2 { font-size: clamp(26px, 6.6vw, 40px); margin: 6px 0 0; }
.awlry-sechead p { color: #5b5548; font-size: 15px; margin: 0; max-width: 520px; }

/* ============================================================
   03 · Buttons  (touch-sized on phones)
   ============================================================ */
.awlry-btn, .awlry .button, .awlry button[type="submit"],
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.added_to_cart {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	font-family: var(--font-ui); font-weight: 500; font-size: 15px;
	min-height: var(--tap); padding: 13px 22px;
	border-radius: 11px; border: 1px solid transparent;
	background: var(--ember); color: #fff; cursor: pointer;
	transition: background .18s, color .18s, border-color .18s, transform .18s;
	line-height: 1.2; text-transform: none; letter-spacing: 0;
	-webkit-appearance: none; appearance: none; touch-action: manipulation;
}
.awlry-btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce a.added_to_cart:hover { background: var(--ember-dk); color: #fff; }
.awlry-btn:active { transform: scale(.985); }
.awlry-btn--ghost, .awlry .button--ghost, .woocommerce a.button.alt--ghost {
	background: transparent; border-color: rgba(23,20,15,.22); color: var(--ink);
}
.awlry-btn--ghost:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.awlry-btn--dark { background: var(--ink); color: var(--bone); }
.awlry-btn--dark:hover { background: var(--ink2); color: #fff; }
.awlry-btn--block { width: 100%; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* ============================================================
   04 · Announcement + header + mobile drawer
   ============================================================ */
.awlry-ann {
	background: var(--ink); color: var(--bone);
	display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
	gap: 4px 8px; text-align: center;
	font-family: var(--font-ui); font-size: 11.5px; line-height: 1.45;
	padding: 8px 18px; letter-spacing: .02em;
}
.awlry-ann b { color: var(--ember); }
.awlry-ann .s { opacity: .45; }
.awlry-ann .i--3 { display: none; }          /* too long for a phone — returns at 480px */

.awlry-header {
	position: sticky; top: 0; z-index: 60;
	/* Deliberately NO backdrop-filter here. `backdrop-filter` makes an element the
	   containing block for `position: fixed` descendants, which would pin the
	   off-canvas drawer + scrim to the header box (~61px) instead of the viewport
	   and leave the menu clipped to a short empty strip. The blur is layered back
	   on at >=1000px, where the drawer is `position: static` and unaffected. */
	background: rgba(251,248,241,.94);
	border-bottom: 1px solid var(--line);
}
.awlry-header .awlry-wrap { display: flex; align-items: center; gap: 12px; height: var(--hdr-h); }
.awlry-logo { flex: 0 0 auto; }
.awlry-logo img { height: 26px; width: auto; }

/* --- burger (phone default) --- */
.awlry-burger {
	position: relative; z-index: 90; order: 3; margin-left: auto;
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 5px; width: var(--tap); height: var(--tap);
	border: 1px solid var(--line); border-radius: 12px; background: #fff;
	cursor: pointer; padding: 0; touch-action: manipulation;
}
.awlry-burger i {
	display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
	transition: transform .26s cubic-bezier(.4,0,.2,1), opacity .18s;
}
.awlry-header.is-open .awlry-burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.awlry-header.is-open .awlry-burger i:nth-child(2) { opacity: 0; }
.awlry-header.is-open .awlry-burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- scrim behind the drawer --- */
.awlry-scrim {
	position: fixed; inset: 0; z-index: 70;
	background: rgba(23,20,15,.5); opacity: 0; visibility: hidden;
	transition: opacity .26s, visibility .26s;
}
.awlry-header.is-open .awlry-scrim { opacity: 1; visibility: visible; }

/* --- nav: off-canvas drawer on phones --- */
.awlry-navwrap {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
	width: min(86vw, 340px); margin: 0;
	padding: calc(var(--hdr-h) + 50px) 20px calc(28px + env(safe-area-inset-bottom));
	background: var(--paper); border-left: 1px solid var(--line);
	box-shadow: -24px 0 60px -34px rgba(23,20,15,.55);
	overflow-y: auto; -webkit-overflow-scrolling: touch;
	transform: translateX(103%);
	transition: transform .3s cubic-bezier(.4,0,.2,1);
	display: flex; flex-direction: column;
}
.awlry-header.is-open .awlry-navwrap { transform: translateX(0); }
.awlry-nav { list-style: none; margin: 0; padding: 0; }
.awlry-navwrap__cta { width: 100%; margin-top: 18px; }
.awlry-nav li { border-bottom: 1px solid var(--line); position: static; }
.awlry-nav li:last-child { border-bottom: 0; }
.awlry-nav a { display: block; padding: 15px 4px; font-family: var(--font-ui); font-size: 17px; font-weight: 500; }
.awlry-nav li.is-custom > a { color: var(--ember); }
.awlry-nav .sub-menu {
	position: static; opacity: 1; visibility: visible; transform: none;
	box-shadow: none; border: 0; border-radius: 0; background: transparent;
	min-width: 0; padding: 0 0 8px 14px; margin: 0; list-style: none;
}
.awlry-nav .sub-menu a { padding: 10px 4px; font-size: 15px; font-weight: 400; color: #5b5548; }
.awlry-nav .sub-menu a:hover { background: transparent; }

/* --- header action buttons --- */
.awlry-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; order: 2; }
.awlry-icon-btn {
	width: 44px; height: 44px; border-radius: 11px; border: 1px solid var(--line);
	display: flex; align-items: center; justify-content: center; background: #fff; cursor: pointer;
	position: relative; color: var(--ink); touch-action: manipulation;
}
.awlry-icon-btn:hover { border-color: var(--ink); color: var(--ember); }
.awlry-cart-count {
	position: absolute; top: -6px; right: -6px; background: var(--ember); color: #fff;
	font-size: 10px; font-family: var(--font-ui); min-width: 18px; height: 18px; padding: 0 4px;
	border-radius: 9px; display: flex; align-items: center; justify-content: center; line-height: 1;
}
/* the header CTA is a desktop nicety — the drawer carries it on phones */
.awlry-header .awlry-actions .awlry-btn { display: none; }
/* search + account move into the drawer on phones, so the bar stays roomy */
.awlry-icon-btn--search, .awlry-icon-btn--account { display: none; }
.awlry-drawer-extras { display: flex; gap: 10px; margin-top: 10px; }
.awlry-drawer-extras a {
	flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center;
	gap: 8px; min-height: 44px; border: 1px solid var(--line); border-radius: 11px;
	font-family: var(--font-ui); font-size: 14px; background: #fff;
}

/* ============================================================
   05 · Hero
   ============================================================ */
.awlry-hero { padding: 34px 0 38px; }
.awlry-hero .awlry-grid2 { display: grid; grid-template-columns: minmax(0,1fr); gap: 26px; align-items: center; }
.awlry-hero h1 { font-size: clamp(33px, 8.6vw, 64px); margin: 12px 0 14px; }
.awlry-hero h1 em { font-style: normal; color: var(--ember); }
.awlry-hero .sub {
	font-family: var(--font-serif); font-size: clamp(17px, 4.4vw, 22px);
	color: #4A453B; max-width: 520px; line-height: 1.42;
}
.awlry-hero .cta { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.awlry-hero .cta .awlry-btn { width: 100%; }
.awlry-hero .hint { margin-top: 14px; font-family: var(--font-ui); font-size: 12.5px; color: var(--steel); }
.awlry-hero .art {
	aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden;
	border: 1px solid var(--line); background: var(--ink);
}
.awlry-hero .art svg, .awlry-hero .art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   06 · Trust strip
   ============================================================ */
.awlry-trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bone); }
.awlry-trust .awlry-wrap { display: grid; grid-template-columns: 1fr 1fr; }
.awlry-trust .t { padding: 18px 12px; text-align: center; border-left: 1px solid var(--line); }
.awlry-trust .t:nth-child(odd) { border-left: 0; }
.awlry-trust .t:nth-child(n+3) { border-top: 1px solid var(--line); }
.awlry-trust b { font-family: var(--font-ui); font-size: 14px; display: block; }
.awlry-trust span { font-size: 12.5px; color: var(--steel); }

/* ============================================================
   07 · Category grid
   ============================================================ */
.awlry-cats { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
.awlry-cat {
	border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
	overflow: hidden; transition: .2s; display: block;
}
.awlry-cat:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -24px rgba(23,20,15,.4); border-color: #cfc7b4; }
.awlry-cat .art { aspect-ratio: 16/10; background: var(--bone); display: flex; align-items: center; justify-content: center; }
.awlry-cat .art svg { width: 62%; height: 62%; object-fit: contain; }
/* generated WebP art fills the whole tile — the inline-SVG stand-ins were inset */
.awlry-cat .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.awlry-cat .m { padding: 15px 17px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.awlry-cat .m b { font-family: var(--font-ui); font-size: 16px; }
.awlry-cat .m span { font-family: var(--font-ui); font-size: 12px; color: var(--steel); }
.awlry-cat:hover .m b { color: var(--ember); }

/* ============================================================
   08 · Custom band  (dark)
   ============================================================ */
.awlry-band {
	background: var(--ink); color: var(--bone); border-radius: var(--radius-lg);
	padding: 26px 20px; display: grid; grid-template-columns: minmax(0,1fr); gap: 28px; align-items: center;
}
.awlry-band > * { min-width: 0; }
.awlry-band h2 { font-size: clamp(26px, 6.6vw, 42px); color: #fff; }
.awlry-band h2 em { font-style: normal; color: var(--ember); }
.awlry-band p { color: #B9B2A0; font-size: 15px; margin-top: 12px; max-width: 440px; }
.awlry-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 2px; }
.awlry-steps li { display: flex; gap: 13px; padding: 13px 0; border-top: 1px solid rgba(246,241,231,.14); }
.awlry-steps li:first-child { border-top: 0; }
.awlry-steps .n { font-family: var(--font-ui); font-size: 11px; color: var(--ember); letter-spacing: .14em; min-width: 42px; padding-top: 3px; }
.awlry-steps b { font-family: var(--font-ui); font-size: 15px; color: #fff; display: block; }
.awlry-steps span.s { font-size: 12.5px; color: #9A9484; }
.awlry-band .shot { border: 1px solid rgba(246,241,231,.16); border-radius: 14px; background: #211D17; padding: 16px; }
.awlry-band .shot .row { display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-ui); font-size: 12px; color: #9A9484; padding: 9px 0; border-bottom: 1px dashed rgba(246,241,231,.12); }
.awlry-band .shot .row b { color: var(--bone); font-weight: 400; text-align: right; }
.awlry-band .shot .q { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 6px; }
.awlry-band .shot .q .p { font-family: var(--font-ui); font-size: 30px; color: var(--ember); }

/* ============================================================
   09 · WooCommerce product grid
   ============================================================ */
ul.products, .awlry-prods {
	display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px;
	list-style: none; margin: 0 !important; padding: 0 !important;
}
ul.products::before, ul.products::after { display: none !important; }

ul.products li.product, .awlry-prod {
	width: 100% !important; margin: 0 !important; float: none !important;
	border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
	overflow: hidden; transition: .2s; text-align: left; padding: 0 !important;
	display: flex; flex-direction: column;
}
ul.products li.product:hover, .awlry-prod:hover {
	transform: translateY(-3px); box-shadow: 0 16px 40px -24px rgba(23,20,15,.4);
}
ul.products li.product a img { margin: 0 !important; border-radius: 0 !important; width: 100%; }
ul.products li.product .awlry-badge, .awlry-prod .awlry-badge {
	position: absolute; top: 9px; left: 9px; z-index: 2; background: var(--ember); color: #fff;
	font-family: var(--font-ui); font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
	padding: 3px 8px; border-radius: 6px;
}
ul.products li.product { position: relative; }
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
	font-family: var(--font-ui) !important; font-size: 14px !important;
	padding: 11px 13px 3px !important; margin: 0 !important; line-height: 1.28;
}
ul.products li.product .price {
	padding: 0 13px 8px !important; margin: 0 !important;
	font-family: var(--font-ui) !important; font-size: 14px !important; color: var(--ink) !important;
}
ul.products li.product .price del { color: var(--steel) !important; opacity: .8; }
ul.products li.product .price ins { text-decoration: none !important; font-weight: 500; }
ul.products li.product .button,
ul.products li.product .added_to_cart {
	margin: auto 13px 13px !important; width: calc(100% - 26px); font-size: 13.5px; padding: 10px 14px;
}
ul.products li.product .awlry-kicker {
	font-family: var(--font-ui); font-size: 10px; letter-spacing: .11em;
	text-transform: uppercase; color: var(--steel); padding: 11px 13px 0;
}
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { margin-bottom: 18px !important; font-size: 13.5px; }
.woocommerce .woocommerce-ordering select {
	min-height: var(--tap); border: 1px solid var(--line); border-radius: 11px;
	padding: 0 12px; background: #fff; font: inherit; font-size: 14px; width: 100%;
}

/* ============================================================
   10 · Single product
   ============================================================ */
.woocommerce div.product div.images img { border-radius: var(--radius); border: 1px solid var(--line); }
.woocommerce div.product .product_title { font-size: clamp(24px, 6.4vw, 38px); margin-bottom: 6px; }
.woocommerce div.product p.price, .woocommerce div.product span.price {
	color: var(--ink); font-family: var(--font-ui); font-size: clamp(22px, 5.4vw, 26px);
}
.woocommerce div.product .woocommerce-product-details__short-description { color: #4A453B; font-size: 15px; }
.woocommerce div.product form.cart { margin: 18px 0; }
.woocommerce div.product form.cart .quantity input {
	border: 1px solid var(--line); border-radius: 11px; padding: 12px;
	min-height: var(--tap); font-size: 16px;   /* 16px stops iOS zoom-on-focus */
	min-width: 0;
}

/* ---- quantity + add to cart: one row, on phones too ----
   WooCommerce renders `.quantity` and the button as floats inside
   `.woocommerce-variation-add-to-cart` (variable products) or as direct children of
   `form.cart` (simple products). With the button at `width:100%` it could not fit beside
   the quantity box, so on a phone you got the quantity, then a full-width button on the
   next line (measured at 390px: quantity y=1334, button y=1380, and the row needed 412px
   inside a 354px holder). The floats also collapsed the parent to `height: 0`; a flex row
   fixes that too because flex items ignore `float` and the parent sizes to its content.
   `nowrap` is deliberate: the two controls must never stack. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) {
	display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px;
}
.woocommerce div.product form.cart .quantity {
	float: none; flex: 0 0 auto; margin: 0;
	display: flex;                 /* lets the input stretch to the button's height */
}
.woocommerce div.product .single_add_to_cart_button {
	padding: 15px 24px; width: auto; flex: 1 1 auto; min-width: 0; float: none; font-size: 16px;
}
.woocommerce div.product .product_meta { font-size: 12.5px; color: var(--steel); }
.woocommerce .awlry-customise-cta {
	margin: 16px 0 6px; padding: 16px; border: 1px dashed var(--tan);
	border-radius: var(--radius-sm); background: var(--bone);
}
.woocommerce .awlry-customise-cta b { font-family: var(--font-ui); display: block; margin-bottom: 4px; }
.woocommerce .awlry-customise-cta p { font-size: 13px; color: #5b5548; margin: 0 0 12px; }
.woocommerce .awlry-customise-cta .awlry-btn { width: 100%; }

/* tabs — horizontal scroll rather than wrapping */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0 !important; margin: 0 0 18px !important;
	display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0;
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent !important; border: 0 !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important; margin: 0 16px 0 0 !important; padding: 0 !important;
	flex: 0 0 auto;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--ember) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: var(--font-ui); padding: 11px 0 !important; white-space: nowrap; }

/* ---- gallery thumbnails: single-row slider ----
   SPECIFICITY TRAP. WooCommerce ships
     `.woocommerce div.product div.images .flex-control-thumbs { overflow:hidden; margin:0; padding:0 }`
   which scores (0,4,2). Our original selector scored (0,4,1), so WC's `overflow-x:hidden`
   won: thumbs past the fold were clipped away and the strip could not be swiped, even
   though `scrollLeft` still worked from JS — which is exactly why a geometry-only test
   missed it. The fix adds `.flex-control-nav` (a class the strip already carries) to reach
   (0,5,x) so this block wins on specificity rather than on stylesheet order. Note that
   `div.images` and `.woocommerce-product-gallery` are the SAME element here, so they
   cannot be chained as ancestor/descendant. */
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs{
	display:flex; flex-wrap:nowrap; gap:10px;
	overflow-x:auto; overflow-y:hidden;
	margin:12px 0 0; padding:2px 2px 12px;
	scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
	scrollbar-width:thin; scrollbar-color:var(--line) transparent;
	cursor:grab;
}
/* the rail is mouse-draggable (see theme.js): stop the browser starting a native
   image drag instead, and stop the drag selecting the surrounding text */
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs li img{
	-webkit-user-drag:none;
}
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs,
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs *{
	user-select:none; -webkit-user-select:none;
}
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs::-webkit-scrollbar{ height:6px; }
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs::-webkit-scrollbar-track{ background:transparent; }
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs::-webkit-scrollbar-thumb{
	background:var(--line); border-radius:99px;
}
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs::-webkit-scrollbar-thumb:hover{ background:var(--tan); }
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs li{
	float:none; width:auto; margin:0;
	flex:0 0 auto; list-style:none; scroll-snap-align:start; line-height:0;
}
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs li img{
	display:block; width:68px; height:68px; object-fit:cover;
	border:1px solid var(--line); border-radius:11px; background:var(--paper);
	opacity:.62; cursor:pointer;
	transition:opacity .18s ease, border-color .18s ease, transform .18s ease;
}
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs li img:hover{
	opacity:1; border-color:var(--tan); transform:translateY(-1px);
}
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs li img.flex-active{
	opacity:1; border-color:var(--ember); box-shadow:0 0 0 1px var(--ember);
}
.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs li img:focus-visible{
	outline:2px solid var(--ember); outline-offset:2px;
}
.woocommerce div.product .woocommerce-product-gallery .flex-viewport{ border-radius:var(--radius); }

/* ---- variation options: card list ---- */
.woocommerce div.product form.cart .variations{ width:100%; margin:0 0 4px; border:0; }
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr{ display:block; }
.woocommerce div.product form.cart .variations th.label{
	display:block; text-align:left; padding:0 0 9px; width:auto;
}
.woocommerce div.product form.cart .variations th.label label{
	font-family:var(--font-ui); font-size:11px; font-weight:600;
	letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
}
.woocommerce div.product form.cart .variations td.value{ display:block; padding:0; position:relative; }
.woocommerce div.product form.cart .variations select.awlry-opt-native{
	position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
	white-space:nowrap; border:0;
}
.awlry-opts{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.awlry-opt{
	display:flex; align-items:center; gap:10px; width:100%; text-align:left;
	font:inherit; font-family:var(--font-body); font-size:14px; line-height:1.35;
	color:var(--ink2); background:var(--paper);
	border:1px solid var(--line); border-radius:var(--radius-sm);
	min-height:var(--tap); padding:11px 13px; cursor:pointer;
	-webkit-appearance:none; appearance:none; touch-action:manipulation;
	transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}
.awlry-opt:hover{ border-color:var(--tan); background:#fff; }
.awlry-opt:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
.awlry-opt[aria-pressed="true"]{
	border-color:var(--ember); box-shadow:inset 0 0 0 1px var(--ember);
	background:#fff; color:var(--ink); font-weight:600;
}
.awlry-opt__dot{
	flex:0 0 auto; width:15px; height:15px; border-radius:50%;
	border:1.5px solid var(--line); background:#fff;
	transition:border-color .18s ease, background .18s ease;
}
.awlry-opt[aria-pressed="true"] .awlry-opt__dot{
	border-color:var(--ember);
	background:radial-gradient(circle, var(--ember) 0 42%, #fff 46%);
}
.awlry-opt[disabled]{ opacity:.34; cursor:not-allowed; }
.awlry-opt[disabled]:hover{ border-color:var(--line); background:var(--paper); }
.woocommerce div.product form.cart .reset_variations{
	display:inline-block; margin-top:10px; font-size:12px; letter-spacing:.02em;
	color:var(--steel); text-decoration:underline; text-underline-offset:2px;
}
.woocommerce div.product form.cart .reset_variations:hover{ color:var(--ember); }

/* ============================================================
   11 · Cart / checkout / account
   ============================================================ */
.woocommerce table.shop_table { border: 1px solid var(--line) !important; border-radius: var(--radius-sm); }
.woocommerce-cart table.cart img { border-radius: var(--radius-sm); }
.woocommerce table.shop_table th {
	background: var(--bone); font-family: var(--font-ui); font-size: 11.5px;
	text-transform: uppercase; letter-spacing: .09em; color: var(--steel);
}
.woocommerce .cart_totals h2, .woocommerce h2 { font-family: var(--font-ui); }
.woocommerce-page table.shop_table, .woocommerce table.shop_table_responsive { width: 100%; }
.wc-block-cart, .wc-block-checkout { font-size: 15px; }
.wc-block-components-button { min-height: var(--tap); border-radius: 11px; }

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce .select2-container .select2-selection--single {
	border: 1px solid var(--line) !important; border-radius: 11px !important;
	padding: 13px !important; height: auto !important;
	font-size: 16px !important;              /* 16px = no iOS zoom */
	min-height: var(--tap) !important;
}
.woocommerce form .form-row { padding: 0 0 14px; margin: 0; }
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error {
	border-radius: var(--radius-sm) !important; border-top-color: var(--ember) !important;
	background: var(--bone) !important; color: var(--ink) !important; font-size: 14px;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { color: var(--ember) !important; }
.woocommerce .cart-added-fee td, .woocommerce .fee { font-family: var(--font-ui); }
.woocommerce-message br, .woocommerce-info br, .woocommerce-error br { display: none; }

/* ============================================================
   12 · Pages & content
   ============================================================ */
.awlry-page { padding: 34px 0 56px; }
.awlry-page__head { margin-bottom: 26px; }
.awlry-page__head h1 { font-size: clamp(29px, 7.4vw, 48px); }
.awlry-page__head .lead { font-family: var(--font-serif); font-size: clamp(17px, 4.2vw, 20px); color: #4A453B; }
.awlry-content h2 { font-size: clamp(22px, 5.2vw, 30px); margin-top: 1.6em; }
.awlry-content h3 { font-size: clamp(18px, 4.4vw, 21px); margin-top: 1.5em; }
.awlry-content > *:first-child { margin-top: 0; }
.awlry-content img { border-radius: 14px; }
.awlry-content th, .awlry-content td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; }
.awlry-content th { background: var(--bone); font-family: var(--font-ui); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--steel); }
.awlry-content blockquote {
	border-left: 3px solid var(--ember); margin: 1.5em 0; padding: 4px 0 4px 16px;
	font-family: var(--font-serif); font-size: 18px; color: #3a362e;
}
/* wide tables scroll instead of breaking the layout */
.awlry-content table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--radius-sm); display: block; overflow-x: auto; }

/* ============================================================
   13 · Journal
   ============================================================ */
.awlry-jr { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
.awlry-jcard { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.awlry-jcard .art { aspect-ratio: 16/9; background: linear-gradient(160deg, var(--pine), #2f5a50); display: flex; align-items: center; justify-content: center; }
.awlry-jcard .art svg { height: 44%; width: auto; }
.awlry-jcard .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.awlry-jcard .m { padding: 16px 17px; }
.awlry-jcard .m .k { font-family: var(--font-ui); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ember); }
.awlry-jcard .m b { font-family: var(--font-ui); font-size: 16.5px; display: block; margin: 7px 0; line-height: 1.28; }
.awlry-jcard .m p { font-size: 13px; color: #5b5548; margin: 0; }

/* ============================================================
   14 · Newsletter
   (minmax(0,1fr) + min-width:0 prevents the grid min-content blowout
    the nowrap flex form used to cause on a 390px phone)
   ============================================================ */
.awlry-news {
	border-radius: var(--radius-lg); background: var(--ember); color: #fff;
	padding: 24px 20px; display: grid; grid-template-columns: minmax(0,1fr);
	gap: 18px; align-items: center;
}
.awlry-news > * { min-width: 0; }
.awlry-news h2 { font-size: clamp(23px, 6vw, 36px); color: #fff; }
.awlry-news p { color: rgba(255,255,255,.88); margin: 10px 0 0; font-size: 15px; max-width: 420px; }
.awlry-news form { display: flex; flex-wrap: wrap; gap: 10px; }
.awlry-news input[type=email] {
	flex: 1 1 100%; min-width: 0; width: 100%;
	border: 0; border-radius: 11px; padding: 14px 15px;
	font-family: var(--font-body); font-size: 16px; min-height: var(--tap);
}
.awlry-news .awlry-btn { flex: 1 1 100%; background: var(--ink); color: #fff; }

/* real newsletter form: honeypot, status line, consent line */
.awlry-news form { position: relative; }
.awlry-hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.awlry-hp, .awlry-hp label, .awlry-hp input { width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.awlry-news p.awlry-news__status {
	flex: 1 1 100%; margin: 2px 0 0; max-width: none;
	font-size: 14px; font-weight: 600; line-height: 1.45;
	color: #fff; min-height: 20px;
}
.awlry-news p.awlry-news__status:empty { min-height: 0; margin: 0; }
.awlry-news p.awlry-news__status[data-state="error"] { color: #FFD9CC; }
.awlry-news p.awlry-news__consent {
	flex: 1 1 100%; margin: 0; max-width: none;
	font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.75);
}
.awlry-news p.awlry-news__consent a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.awlry-news form[data-busy] .awlry-btn { opacity: .65; }
.awlry-news input[type=email]:disabled { opacity: .7; }

/* ============================================================
   15 · Footer
   ============================================================ */
.awlry-footer { background: var(--ink); color: #9A9484; padding: 40px 0 calc(26px + env(safe-area-inset-bottom)); }
.awlry-footer .top {
	display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px;
	padding-bottom: 28px; border-bottom: 1px solid rgba(246,241,231,.12);
}
.awlry-footer .top > div:first-child { grid-column: 1 / -1; }
.awlry-footer img.h { height: 30px; width: auto; margin-bottom: 14px; }
.awlry-footer p { font-size: 13px; max-width: 280px; color: #8f8977; }
.awlry-footer h5 { font-family: var(--font-ui); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--bone); margin: 0 0 12px; }
.awlry-footer ul { list-style: none; margin: 0; padding: 0; font-size: 13.5px; line-height: 2; }
.awlry-footer a:hover { color: var(--ember); }
.awlry-footer .bot {
	display: flex; flex-direction: column; gap: 10px;
	padding-top: 20px; font-family: var(--font-ui); font-size: 12px;
}
.awlry-soc { display: flex; gap: 10px; margin-top: 16px; }
.awlry-soc a {
	width: 44px; height: 44px; border: 1px solid rgba(246,241,231,.2); border-radius: 11px;
	display: flex; align-items: center; justify-content: center;
}
.awlry-soc a:hover { border-color: var(--ember); }

/* ============================================================
   16 · Woo page shell + utility
   ============================================================ */
.woocommerce .awlry-shop-head { padding: 30px 0 4px; }
.awlry-woo-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.woocommerce-page .awlry-page { padding-top: 26px; }

/* ---- touch targets ----------------------------------------------------
   Primary controls get 44px. Secondary inline links only need to clear the
   24px WCAG 2.5.8 AA minimum, so they stay visually inline.               */
.awlry-logo { display: flex; align-items: center; min-height: 44px; }
/* WC core sizes this at 36px with a higher-specificity rule, hence !important */
.woocommerce div.product .woocommerce-product-gallery__trigger { width: 44px !important; height: 44px !important; }
.woocommerce div.product .product_meta a,
ul.products li.product .awlry-kicker a { display: inline-block; padding: 5px 0; }
ul.products li.product .button,
ul.products li.product .added_to_cart { min-height: var(--tap); }
/* WooCommerce block buttons (cart page, product grid blocks) */
.wp-block-button__link, .wc-block-components-button, .wc-block-grid__product-add-to-cart a {
	min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center;
}
/* footer links are real navigation — full-size targets on phones */
.awlry-footer ul { line-height: 1.35; }
.awlry-footer ul a { display: flex; align-items: center; min-height: 44px; }
.awlry-footer .bot a { display: inline-block; padding: 5px 0; }

.awlry-center { text-align: center; }
.awlry-mt-lg { margin-top: 26px; }
.awlry-pill {
	display: inline-block; font-family: var(--font-ui); font-size: 11.5px;
	background: var(--bone); border: 1px solid var(--line); border-radius: 20px;
	padding: 4px 11px; margin: 3px 5px 0 0; color: #4A453B;
}
.awlry-pill--ember { background: var(--ember); border-color: var(--ember); color: #fff; }
.awlry-notice {
	border: 1px solid #F3D6CC; background: #FDF7F4; color: #8a5a46;
	border-radius: var(--radius-sm); padding: 13px 15px; font-size: 13.5px;
}

/* ============================================================
   17 · Self-hosted fonts (no external requests)
   ============================================================ */
@font-face { font-family: 'Space Grotesk'; src: url('assets/fonts/SpaceGrotesk.ttf') format('truetype'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('assets/fonts/Inter.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('assets/fonts/Fraunces.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

/* ============================================================
   18 · UPGRADES — everything below widens the phone layout
   ============================================================ */

@media (min-width: 480px) {
	.awlry-ann { font-size: 12px; }
	.awlry-ann .i--3 { display: inline; }
	.awlry-hero .cta { flex-direction: row; flex-wrap: wrap; }
	.awlry-hero .cta .awlry-btn { width: auto; }
	.awlry-cats { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.awlry-opts { grid-template-columns: repeat(2, minmax(0,1fr)); }
	/* keep wrapping: the status + consent lines need their own full-width rows,
	   otherwise `nowrap` squashes them into a column beside the button */
	.awlry-news form { flex-wrap: wrap; }
	.awlry-news input[type=email] { flex: 1 1 auto; width: auto; }
	.awlry-news .awlry-btn { flex: 0 0 auto; }
	.woocommerce div.product .single_add_to_cart_button { width: auto; }
	.woocommerce .awlry-customise-cta .awlry-btn { width: auto; }
}

@media (min-width: 640px) {
	:root { --gutter: 24px; --sec-y: 58px; --hdr-h: 68px; }
	.awlry-jr { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
	ul.products, .awlry-prods { gap: 16px; }
	ul.products li.product .woocommerce-loop-product__title,
	ul.products li.product h2 { font-size: 15px !important; padding: 13px 16px 3px !important; }
	ul.products li.product .price { padding: 0 16px 8px !important; }
	ul.products li.product .button,
	ul.products li.product .added_to_cart { margin: auto 16px 16px !important; width: calc(100% - 32px); }
	.woocommerce .woocommerce-ordering select { width: auto; }
	.awlry-footer .top { grid-template-columns: 1.4fr 1fr 1fr; }
	.awlry-footer .top > div:first-child { grid-column: auto; }
	.awlry-footer .bot { flex-direction: row; justify-content: space-between; flex-wrap: wrap; }
	/* desktop: footer links return to a compact list */
	.awlry-footer ul { line-height: 2; }
	.awlry-footer ul a { display: inline; min-height: 0; }
	.awlry-band { padding: 34px 30px; }
	.woocommerce div.product div.images .flex-control-nav.flex-control-thumbs li img { width: 74px; height: 74px; }
	/* the add-to-cart button only needs to FILL the row on phones. From here up the
	   summary column is wide enough that a stretched button looks oversized, so it
	   returns to its natural width beside the quantity box (as it was before). */
	.woocommerce div.product .single_add_to_cart_button { flex: 0 1 auto; }
}

@media (min-width: 768px) {
	.awlry-sechead { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 34px; }
	.awlry-trust .awlry-wrap { grid-template-columns: repeat(4, minmax(0,1fr)); }
	.awlry-trust .t:nth-child(odd) { border-left: 1px solid var(--line); }
	.awlry-trust .t:first-child { border-left: 0; }
	.awlry-trust .t:nth-child(n+3) { border-top: 0; }
	.awlry-page { padding: 44px 0 68px; }
	ul.products, .awlry-prods { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
	ul.products li.product .awlry-badge, .awlry-prod .awlry-badge { top: 12px; left: 12px; }
}

@media (min-width: 920px) {
	.awlry-jr { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
	.awlry-cats { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
	.awlry-footer .top { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
}

@media (min-width: 1000px) {
	:root { --gutter: 32px; --sec-y: 76px; --hdr-h: 74px; }

	/* desktop nav returns; drawer furniture goes away */
	.awlry-burger, .awlry-scrim { display: none; }
	/* frosted header only from 1000px up — safe here because the drawer below is
	   `position: static`, so the header is no longer a fixed-position containing block */
	.awlry-header { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
	.awlry-navwrap {
		position: static; width: auto; transform: none; transition: none;
		background: transparent; border: 0; box-shadow: none;
		overflow: visible; padding: 0; display: block;
	}
	.awlry-navwrap__cta { display: none; }
	.awlry-drawer-extras { display: none; }
	.awlry-icon-btn--search, .awlry-icon-btn--account { display: flex; }
	.awlry-nav { display: flex; gap: 28px; margin: 0 0 0 12px; padding: 0; }
	.awlry-nav li { border-bottom: 0; position: relative; }
	.awlry-nav a { display: inline-block; padding: 0; font-size: 14.5px; }
	.awlry-nav .sub-menu {
		position: absolute; top: 100%; left: 0; min-width: 210px;
		background: #fff; border: 1px solid var(--line); border-radius: 12px;
		padding: 8px; margin: 0; box-shadow: 0 20px 44px -28px rgba(23,20,15,.5);
		opacity: 0; visibility: hidden; transform: translateY(6px); transition: .16s;
	}
	.awlry-nav li:hover .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
	.awlry-nav .sub-menu a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 400; }
	.awlry-nav .sub-menu a:hover { background: var(--bone); color: var(--ember); }

	.awlry-header .awlry-actions .awlry-btn { display: inline-flex; }
	.awlry-header .awlry-wrap { gap: 34px; }
	.awlry-logo img { height: 30px; }
	.awlry-icon-btn { width: 38px; height: 38px; }

	.awlry-hero { padding: 70px 0 60px; }
	.awlry-hero .awlry-grid2 { grid-template-columns: 1.05fr .95fr; gap: 56px; }
	.awlry-hero .art { aspect-ratio: 1/1; border-radius: 22px; }
	.awlry-hero .cta { margin-top: 34px; gap: 14px; }

	.awlry-band { padding: 56px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; }
	.awlry-news { padding: 52px; grid-template-columns: 1.1fr .9fr; gap: 40px; }
	.awlry-page__head { margin-bottom: 40px; max-width: 780px; }

	ul.products, .awlry-prods { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
}


/* ============================================================
   15 · Customer accounts — register, sign in, my account
   WooCommerce ships the markup for all of this and the theme shipped no styles
   for any of it, so the account area fell back to floats and default blue
   buttons. Mobile-first: one column on a phone, two from 768px up.

   `body.woocommerce-account` is deliberate on the layout rules. WooCommerce's
   own woocommerce-layout.css uses the same selectors at the same specificity,
   and earlier in this project a WC rule at (0,4,2) beat mine at (0,4,1) and
   silently broke a component. The extra `body` puts these at (0,3,0) so they
   win on specificity rather than on stylesheet order.
   ============================================================ */

/* ---- /register/ page ---- */
.awlry-acct { max-width: 560px; }
.awlry-acct__head { margin-bottom: 22px; }

.awlry-acct__card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px 18px;
}
.awlry-acct__card > *:first-child { margin-top: 0; }
.awlry-acct__card > *:last-child { margin-bottom: 0; }
.awlry-acct__card h2 { font-family: var(--font-ui); font-size: 19px; margin: 0 0 12px; }
.awlry-acct__card p { font-size: 14.5px; line-height: 1.65; color: #4A453B; }

.awlry-acct__alt { margin: 18px 0 0; font-size: 14px; color: var(--steel); }
.awlry-acct__alt a { color: var(--ember); font-family: var(--font-ui); }

/* ---- field hints ---- */
.awlry-field__hint {
	display: block; margin-top: 6px;
	font-size: 12.5px; line-height: 1.55; color: var(--steel);
}

/* ---- consent line (printed via the woocommerce_register_form hook) ---- */
.awlry-form__consent {
	margin: 2px 0 16px; font-size: 12.5px; line-height: 1.6; color: var(--steel);
}
.awlry-form__consent a { color: var(--ember); }

/* ---- honeypot: off-screen, unclickable, never announced ---- */
.awlry-hp,
.awlry-hp label,
.awlry-hp input {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important; height: 1px !important;
	opacity: 0 !important; pointer-events: none !important;
	overflow: hidden;
}

/* ---- auth submit buttons: full width reads correctly in a 560px card ---- */
.awlry-acct__card .woocommerce-form-register__submit,
.awlry-acct__card .woocommerce-form-login__submit { width: 100%; justify-content: center; }

/* ---- password strength meter (WC injects .woocommerce-password-strength) ---- */
/* scoped to outrank WooCommerce's own .woocommerce-password-strength colours */
.awlry-acct .woocommerce-password-strength,
.woocommerce-account #customer_login .woocommerce-password-strength {
	margin-top: 9px; padding: 8px 11px;
	border-radius: 9px; font-size: 12.5px; line-height: 1.5;
	border: 1px solid transparent;
}
.awlry-acct .woocommerce-password-strength.short,
.awlry-acct .woocommerce-password-strength.bad,
.woocommerce-account #customer_login .woocommerce-password-strength.short,
.woocommerce-account #customer_login .woocommerce-password-strength.bad { background: #FBEDEA; border-color: #EBC9C1; color: #8A2C18; }
.awlry-acct .woocommerce-password-strength.good,
.woocommerce-account #customer_login .woocommerce-password-strength.good { background: #FBF4E4; border-color: #E8D9B4; color: #7A5A14; }
.awlry-acct .woocommerce-password-strength.strong,
.woocommerce-account #customer_login .woocommerce-password-strength.strong { background: #EDF4EE; border-color: #C8DECC; color: #1F6B3A; }
.woocommerce-password-hint { display: block; margin-top: 7px; font-size: 12.5px; color: var(--steel); }
#password_strength { margin-bottom: 4px; }

/* ---- my-account: the login page is one form + one entry point ---- */
/* WooCommerce's .col2-set is a clearing-float: it carries a `::before` and an
   `::after` with `display: table; clear: both`. Once the container is a GRID, those
   pseudo-elements become GRID ITEMS. `::before` then occupies row 1 column 1, which
   pushes the login form into column 2 and the register form down to row 2 column 1 —
   the two forms render diagonally, not side by side (measured: login x=398 y=209,
   register x=24 y=661). Turning them off is required, not cosmetic. */
body.woocommerce-account .u-columns.col2-set::before,
body.woocommerce-account .u-columns.col2-set::after,
.woocommerce #customer_login.u-columns::before,
.woocommerce #customer_login.u-columns::after { content: none; display: none; }

/* /my-account/ is login + a register entry point, not two forms. The entry point is a
   card: heading, one line of context, the primary CTA, one line of reassurance. */
.woocommerce #customer_login .u-column2.awlry-acct-register-entry {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 22px;
}
.woocommerce #customer_login .u-column2.awlry-acct-register-entry h2 {
	font-family: var(--font-ui); font-size: 19px; margin: 0 0 10px;
}
.woocommerce #customer_login .u-column2.awlry-acct-register-entry__lead {
	font-size: 14.5px; line-height: 1.65; color: #4A453B; margin: 0 0 18px;
}
.woocommerce #customer_login .u-column2.awlry-acct-register-entry .awlry-btn {
	width: 100%; justify-content: center; margin: 0;
}
.woocommerce #customer_login .u-column2.awlry-acct-register-entry__small {
	margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--steel);
}
/* the register form on My Account sits in a card like the one on /register/ */
.woocommerce-account #customer_login .woocommerce-form-login,
.woocommerce-account #customer_login .woocommerce-form-register {
	background: var(--paper); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 22px 18px;
}
.woocommerce-account #customer_login h2 { font-family: var(--font-ui); font-size: 19px; margin: 0 0 14px; }
.woocommerce-account .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }

body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
	float: none; width: auto;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none; margin: 0 0 24px; padding: 0;
	display: flex; flex-wrap: wrap; gap: 8px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: inline-flex; align-items: center; min-height: 42px;
	padding: 9px 15px; border: 1px solid var(--line); border-radius: 99px;
	font-family: var(--font-ui); font-size: 13.5px; color: var(--ink); text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	border-color: var(--ember); color: var(--ember);
}
.woocommerce-account .woocommerce-MyAccount-content h2 { font-family: var(--font-ui); }
.woocommerce-account .woocommerce-MyAccount-content p { font-size: 14.5px; color: #4A453B; }

/* ---- /custom/: the how-to guide and the worked examples ---------------- */
.awlry-howto { margin-top: 26px; }
.awlry-howto__title {
	font-family: var(--font-ui); font-size: clamp(22px, 5.4vw, 30px);
	margin: 0 0 16px;
}
.awlry-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.awlry-step {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px;
	padding: 16px 0; border-top: 1px solid var(--line);
}
.awlry-step:last-child { border-bottom: 1px solid var(--line); }
.awlry-step__n {
	font-family: var(--font-ui); font-size: 11px; letter-spacing: .12em;
	color: var(--ember); padding-top: 3px; min-width: 26px;
}
.awlry-step__t { font-family: var(--font-ui); font-size: 16px; margin: 0 0 5px; }
.awlry-step__d { font-size: 14.5px; line-height: 1.65; color: #4A453B; margin: 0; }

.awlry-ex { margin-top: 40px; }
.awlry-ex__lead { font-size: 15px; line-height: 1.65; color: #4A453B; margin: 0 0 22px; max-width: 640px; }
.awlry-ex__item {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px;
	padding: 22px 0; border-top: 1px solid var(--line);
}
.awlry-ex__item:last-of-type { border-bottom: 1px solid var(--line); }
.awlry-ex__fig { margin: 0; }
.awlry-ex__fig img {
	display: block; width: 100%; height: auto; max-width: 440px;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 10px; box-sizing: border-box;
}
.awlry-ex__fig--wide img { max-width: 680px; }
.awlry-ex__fig figcaption { font-size: 12.5px; line-height: 1.55; color: var(--steel); margin-top: 9px; }
.awlry-ex__body h3 { font-family: var(--font-ui); font-size: 19px; margin: 0 0 9px; }
.awlry-ex__body > p { font-size: 14.5px; line-height: 1.68; color: #4A453B; margin: 0 0 15px; }

.awlry-ex__stats { list-style: none; margin: 0 0 15px; padding: 0; }
.awlry-ex__stats li {
	font-size: 13.5px; line-height: 1.5; color: var(--ink);
	padding: 9px 0; border-top: 1px solid var(--line);
}
.awlry-ex__stats li:first-child { border-top: 0; }
.awlry-ex__stats b { font-family: var(--font-ui); font-size: 15px; }
.awlry-ex__stats span { display: block; font-size: 12.5px; color: var(--steel); margin-top: 2px; }

.awlry-ex__quote {
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 14px 15px; font-size: 13.5px; line-height: 1.75; margin: 0 0 13px;
}
.awlry-ex__quote span { color: #4A453B; }
.awlry-ex__quote b { font-family: var(--font-ui); color: var(--ink); }
.awlry-ex__quote em { font-style: normal; color: var(--steel); font-size: 12.5px; }

.awlry-ex__dl { margin: 0; }
.awlry-ex__dl a { font-family: var(--font-ui); font-size: 13.5px; color: var(--ember); }

.awlry-ex__note {
	font-size: 14px; line-height: 1.68; color: #4A453B;
	margin: 16px 0 0; max-width: 640px;
}
.awlry-ex__note a { color: var(--ember); }

.awlry-ex__two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 20px; }
.awlry-ex__two h3 { font-family: var(--font-ui); font-size: 16px; margin: 0 0 10px; }
.awlry-ex__list { margin: 0; padding-left: 18px; }
.awlry-ex__list li { font-size: 14px; line-height: 1.65; color: #4A453B; margin-bottom: 8px; }
.awlry-ex__list--bad li::marker { color: var(--ember); }

/* ---- /contact/ form -------------------------------------------------- */
.awlry-contact { margin-top: 34px; }
.awlry-contact__title { font-family: var(--font-ui); font-size: clamp(22px, 5.4vw, 30px); margin: 0 0 8px; }
.awlry-contact__lead {
	font-size: 15px; line-height: 1.65; color: #4A453B; margin: 0 0 22px; max-width: 620px;
}

.awlry-form {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px 18px;
}
/* single column on a phone; the row splits at 640px */
.awlry-form__row { display: grid; grid-template-columns: minmax(0, 1fr); }
.awlry-form__row > * { min-width: 0; }

.awlry-field { display: block; margin: 0 0 16px; }
.awlry-field[hidden] { display: none; }
.awlry-field__label {
	display: block; margin-bottom: 7px;
	font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.awlry-field__req { color: var(--ember); }

.awlry-field input[type=text],
.awlry-field input[type=email],
.awlry-field select,
.awlry-field textarea {
	display: block; width: 100%; box-sizing: border-box;
	padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px;
	background: #fff; color: var(--ink);
	font-family: var(--font-body); font-size: 15px; line-height: 1.5;
}
.awlry-field textarea { resize: vertical; min-height: 148px; }
/* the chevron is an inline SVG so a select matches the text inputs; the # in the
   stroke colour has to be percent-encoded or the data URI is invalid */
.awlry-field select {
	-webkit-appearance: none; appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237C7A72' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center;
}
.awlry-field input:focus, .awlry-field select:focus, .awlry-field textarea:focus {
	outline: 2px solid var(--ember); outline-offset: 1px; border-color: var(--ember);
}

.awlry-form__actions { margin-top: 6px; }
.awlry-form__actions .awlry-btn { width: 100%; }
.awlry-form[data-busy] .awlry-btn { opacity: .65; }
.awlry-form[data-busy] input, .awlry-form[data-busy] select, .awlry-form[data-busy] textarea { opacity: .75; }

.awlry-form__status { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; }
.awlry-form__status:empty { margin: 0; }
.awlry-form__status[data-state="ok"] { color: #1F6B3A; }
.awlry-form__status[data-state="error"] { color: #8A2C18; }
.awlry-form__status.is-warn { color: #7A5A14; }
/* ---- file picker ---- */
/* The native control is kept (it is the accessible one, and it is what people already
   know) and dressed enough to sit with the text inputs. */
.awlry-field input[type=file] {
	display: block; width: 100%; box-sizing: border-box;
	padding: 11px 13px; border: 1px dashed var(--line); border-radius: 11px;
	background: #fff; color: var(--ink);
	font-family: var(--font-body); font-size: 14px; line-height: 1.5;
	cursor: pointer;
}
.awlry-field input[type=file]:focus { outline: 2px solid var(--ember); outline-offset: 1px; border-color: var(--ember); }
.awlry-field input[type=file]::file-selector-button {
	margin-right: 12px; padding: 8px 14px; min-height: 36px;
	border: 1px solid var(--line); border-radius: 9px;
	background: var(--bone); color: var(--ink);
	font-family: var(--font-ui); font-size: 13.5px; font-weight: 500;
	cursor: pointer;
}
.awlry-field input[type=file]::file-selector-button:hover { background: var(--line); }

.awlry-file-chosen {
	margin: -8px 0 16px; font-size: 13px; line-height: 1.5;
}
.awlry-file-chosen[data-state="ok"] { color: #1F6B3A; }
.awlry-file-chosen[data-state="error"] { color: #8A2C18; }
.awlry-file-chosen[hidden] { display: none; }

/* the noscript warning sits above the dead form, so give it a visible box */
p.awlry-form__status.is-warn {
	margin: 14px 0 0; padding: 12px 14px; background: #FBF4E4;
	border: 1px solid #E8D9B4; border-radius: 11px;
}

/* ---- 768px and up: two columns where WooCommerce expects them ---- */
@media (min-width: 768px) {
	/* ---- /custom/: guide and examples ---- */
	.awlry-ex__item { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 30px; align-items: start; }
	.awlry-ex__item--flip .awlry-ex__fig { order: 2; }
	.awlry-ex__stats--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
	.awlry-ex__stats--row li { border-top: 0; }
	.awlry-ex__two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }

	.woocommerce-account .u-columns.col2-set,
	.woocommerce #customer_login.u-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
	body.woocommerce-account .woocommerce-MyAccount-navigation { width: 27%; }
	body.woocommerce-account .woocommerce-MyAccount-content { width: 69%; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: column; gap: 6px; margin-bottom: 0; }
	.woocommerce-account .woocommerce-MyAccount-navigation li a { width: 100%; justify-content: flex-start; border-radius: 11px; }
	.awlry-acct { max-width: 620px; }
	.awlry-form { padding: 28px 26px; }
	.awlry-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
	.awlry-form__actions .awlry-btn { width: auto; }
}


/* ── Line total on a single product ─────────────────────────────────────────
   WooCommerce prints the unit price and does not move it when the quantity
   changes, so this is the line that answers "what will ten of these cost".
   Shown by script only, and only when the quantity is more than one. */
.awlry-line-total{display:flex;align-items:baseline;gap:8px;margin:0 0 14px;font-family:var(--font-ui);font-size:15px;color:var(--ink)}
.awlry-line-total[hidden]{display:none}
.awlry-line-total__label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.awlry-line-total__amount{font-weight:600;font-variant-numeric:tabular-nums}
.awlry-line-total__qty{font-size:13px;color:var(--steel)}