/* ==========================================================================
   SOX OUTLET — Design System & Global Styles
   ==========================================================================

   READ ME FIRST
   -------------
   Everything visual about this theme is controlled from the token block in
   SECTION 2 below. Colours, fonts, type sizes, spacing, radii and shadows are
   all CSS custom properties. Changing a brand colour is a one-line edit here —
   you never need to hunt through template files.

   Table of contents
     1. Fonts (self-hosted)
     2. Design tokens (:root)
     3. Reset & base
     4. Typography
     5. Layout primitives
     6. Components (buttons, links, badges, cards, eyebrows)
     7. Utility bar
     8. Header, navigation & mega menu
     9. Mobile navigation panel
    10. Footer
    11. Page furniture (masthead, breadcrumb, pagination, empty states)
    12. Accessibility & motion
   ========================================================================== */


/* ==========================================================================
   1. FONTS — self-hosted, no third-party requests
   --------------------------------------------------------------------------
   Two variable fonts, one file each, covering their whole weight range.

   Big Shoulders Display  Headings. A condensed industrial face drawn for the
                          Chicago Design Museum and named after Sandburg's
                          "City of the Big Shoulders" — which is about as
                          on-the-nose as type gets for a Chicago workwear
                          store. Being condensed, it lets headlines run much
                          larger at the same column width, which is what makes
                          the pages feel confident rather than busy.

   Manrope                Everything else. A modern humanist sans with a large
                          x-height and open apertures, so it stays crisp at
                          14px on a phone. Its slightly rounded terminals warm
                          up the hard edges of the display face.

   Self-hosting removes a DNS lookup and two blocking round trips to Google on
   every page, and keeps visitor IPs out of a third party's logs. A typical
   page pulls ~59KB of font; latin-ext only downloads if a page actually
   renders a character from that range.
   ========================================================================== */

@font-face {
	font-family: "Big Shoulders Display";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/bigshoulders-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Big Shoulders Display";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/bigshoulders-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/manrope-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}


/* ==========================================================================
   2. DESIGN TOKENS
   --------------------------------------------------------------------------
   >>> THIS IS THE REBRAND SURFACE. Change values here, nowhere else. <<<
   ========================================================================== */

:root {

	/* --- Brand orange ---------------------------------------------------- */
	--sox-orange:            #F0821E;  /* primary accent, buttons, highlights   */
	--sox-orange-hover:      #E0740F;  /* button hover                          */
	--sox-orange-deep:       #D96E0A;  /* link hover, eyebrow on light          */
	--sox-orange-ink:        #C4611A;  /* small caps brand line on product cards */
	--sox-orange-strong:     #D2560F;  /* eyebrow on cream backgrounds          */
	--sox-orange-light:      #F7A24E;  /* eyebrow on dark backgrounds           */
	--sox-orange-sand:       #E7C79E;  /* soft orange text on dark imagery      */

	/* --- Core neutrals --------------------------------------------------- */
	--sox-ink:               #17181A;  /* near-black — body text, dark sections */
	--sox-ink-pure:          #000000;
	--sox-brown:             #2A1D12;  /* deep brown — about + footer           */
	--sox-brown-hover:       #3D2B1B;
	--sox-brown-deep:        #231708;  /* text on orange buttons in brown areas */

	/* --- Surfaces -------------------------------------------------------- */
	--sox-white:             #FFFFFF;
	--sox-cream:             #FBFAF8;  /* section alt background                */
	--sox-cream-warm:        #F6F4F0;  /* brands strip                          */
	--sox-cream-deep:        #FAF4E9;  /* locations section                     */
	--sox-cream-pill:        #FBF6EE;  /* hours pills, soft button hover        */
	--sox-sand:              #F5F2EC;  /* circular arrow chip                   */
	--sox-placeholder:       #EDEAE3;  /* image placeholder backdrop            */
	--sox-placeholder-alt:   #F3F0EA;  /* circular thumbnail backdrop           */

	/* --- Hairlines ------------------------------------------------------- */
	--sox-line:              #E7E4DD;  /* default border                        */
	--sox-line-warm:         #EFEBE3;
	--sox-line-cool:         #EAE7E0;
	--sox-line-soft:         #F0EEE9;
	--sox-line-sand:         #E6E2D9;
	--sox-line-cream:        #E6DCCC;
	--sox-line-tan:          #DED3C2;
	--sox-line-grey:         #D6D1C7;
	--sox-line-on-ink:       #2E2F31;  /* divider inside near-black sections    */
	--sox-line-on-brown:     rgba(245, 241, 234, .13);
	--sox-line-on-brown-mid: rgba(245, 241, 234, .28);

	/* --- Text ------------------------------------------------------------ */
	--sox-text:              #17181A;
	--sox-text-body:         #3E3C37;  /* long-form paragraphs                  */
	--sox-text-muted:        #6E6A62;
	--sox-text-soft:         #8A8579;
	--sox-text-faint:        #9A958B;
	--sox-text-sub:          #6A5B4C;  /* muted text on cream                   */
	--sox-text-heading-alt:  #2B2C2E;
	--sox-text-on-dark:      #EDEBE7;
	--sox-text-on-dark-mute: #A9A69F;
	--sox-text-on-dark-dim:  #B9B6AF;
	--sox-text-on-brown:     #DCD5CA;
	--sox-text-on-brown-mute:#9C9284;
	--sox-text-on-brown-dim: #A79C8D;
	--sox-text-on-img:       #D9D6CF;
	--sox-text-cream:        #FCFAF6;  /* headings on brown                     */
	--sox-text-cream-soft:   #F5F1EA;

	/* --- Status ---------------------------------------------------------- */
	--sox-green:             #5C8A63;  /* in stock                              */
	--sox-green-soft:        #EEF4EF;
	--sox-red:               #A83E2B;  /* out of stock                          */
	--sox-red-soft:          #FBF0EE;
	--sox-amber:             #B07A18;  /* low stock                             */
	--sox-amber-soft:        #FBF5E7;

	/* --- Typography: families --------------------------------------------
	   Three roles, two files. `display` is the condensed face and is used ONLY
	   at 19px and above, where its narrow forms read as confident rather than
	   cramped. `ui` and `body` are both Manrope — kept as separate tokens so
	   the interface type can be changed later without touching body copy.     */
	--sox-font-display: "Big Shoulders Display", "Haettenschweiler",
		"Arial Narrow", system-ui, sans-serif;
	--sox-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif;
	--sox-font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif;

	/* --- Typography: weights ------------------------------------------------ */
	--sox-w-black:     900;  /* hero + section headings                        */
	--sox-w-extrabold: 800;  /* card headings, buttons, footer headings        */
	--sox-w-bold:      700;  /* eyebrows, nav, small caps                      */
	--sox-w-semibold:  600;
	--sox-w-medium:    500;
	--sox-w-regular:   400;

	/* --- Typography: fluid display scale ----------------------------------
	   Each clamp runs from its mobile size to its desktop size across the
	   viewport, so headings resize smoothly with no breakpoint jumps.

	   These are noticeably larger than a normal-width face would allow. A
	   condensed face sets roughly 25% narrower at the same point size, so the
	   type can be much bigger before it runs out of column — and big, tight
	   display type is most of what makes a page feel designed rather than
	   assembled.                                                              */
	--sox-fs-hero:     clamp(3.25rem, 1.55rem + 7.10vw, 5.750rem);  /* 52→92 */
	--sox-fs-display:  clamp(2.75rem, 1.60rem + 4.80vw, 4.500rem);  /* 44→72 */
	--sox-fs-display-2:clamp(2.50rem, 1.60rem + 3.75vw, 3.875rem);  /* 40→62 */
	--sox-fs-h2:       clamp(2.25rem, 1.55rem + 2.90vw, 3.375rem);  /* 36→54 */
	--sox-fs-h2-sm:    clamp(2.00rem, 1.45rem + 2.30vw, 3.000rem);  /* 32→48 */
	--sox-fs-h2-xs:    clamp(1.75rem, 1.35rem + 1.65vw, 2.500rem);  /* 28→40 */
	--sox-fs-h3:       clamp(1.50rem, 1.25rem + 1.05vw, 2.000rem);  /* 24→32 */
	--sox-fs-h3-sm:    clamp(1.375rem,1.20rem + 0.72vw, 1.750rem);  /* 22→28 */
	--sox-fs-h4:       1.5rem;                                      /* 24    */
	--sox-fs-h5:       1.25rem;                                     /* 20    */

	/* --- Typography: body scale ------------------------------------------- */
	--sox-fs-lead:     1.1875rem;   /* 19 — hero subheads                      */
	--sox-fs-lg:       1.125rem;    /* 18 — long-form body                     */
	--sox-fs-md:       1rem;        /* 16 — default body                       */
	--sox-fs-base:     0.96875rem;  /* 15.5 — product card titles              */
	--sox-fs-sm:       0.9375rem;   /* 15 — secondary                          */
	--sox-fs-xs:       0.875rem;    /* 14                                      */
	--sox-fs-2xs:      0.84375rem;  /* 13.5                                    */
	--sox-fs-3xs:      0.8125rem;   /* 13 — eyebrows, meta                     */
	--sox-fs-4xs:      0.78125rem;  /* 12.5 — fine print                       */
	--sox-fs-5xs:      0.75rem;     /* 12 — small eyebrows                     */
	--sox-fs-6xs:      0.6875rem;   /* 11 — card brand line                    */
	--sox-fs-micro:    0.625rem;    /* 10 — badges                             */

	/* --- Typography: line heights -----------------------------------------
	   A condensed face is tall for its width, so its lines can sit much closer
	   together before they collide. Tight leading on big headings is a large
	   part of the "designed" look.                                            */
	--sox-lh-hero:     0.88;
	--sox-lh-tight:    0.94;
	--sox-lh-display:  0.96;
	--sox-lh-heading:  1.04;
	--sox-lh-snug:     1.34;   /* Manrope: product names, card copy            */
	--sox-lh-normal:   1.5;
	--sox-lh-body:     1.65;
	--sox-lh-relaxed:  1.75;

	/* --- Typography: letter spacing ---------------------------------------
	   Negative tracking is for wide faces. Squeezing a condensed face closes
	   its counters and turns it to mush, so display type sits at 0 and the
	   optical tightening comes from size and leading instead.                 */
	--sox-ls-display:  0;
	--sox-ls-heading:  0;
	--sox-ls-snug:     -0.01em;   /* Manrope only                             */
	--sox-ls-normal:   0;
	--sox-ls-wide:     0.02em;
	--sox-ls-eyebrow:  0.16em;    /* uppercase eyebrows                        */
	--sox-ls-eyebrow-lg: 0.26em;  /* wider eyebrows on feature sections        */
	--sox-ls-caps:     0.10em;    /* small uppercase labels                    */
	--sox-ls-badge:    0.09em;

	/* --- Layout ------------------------------------------------------------ */
	--sox-container:      1280px;
	--sox-container-text: 760px;   /* readable measure for article content     */
	--sox-gutter:         24px;
	--sox-gutter-sm:      18px;

	/* --- Spacing scale ----------------------------------------------------- */
	--sox-space-1:   4px;
	--sox-space-2:   8px;
	--sox-space-3:   12px;
	--sox-space-4:   16px;
	--sox-space-5:   20px;
	--sox-space-6:   24px;
	--sox-space-7:   30px;
	--sox-space-8:   36px;
	--sox-space-9:   44px;
	--sox-space-10:  52px;
	--sox-space-11:  64px;
	--sox-space-12:  76px;
	--sox-space-13:  88px;
	--sox-space-14:  96px;

	/* Fluid vertical rhythm between page sections */
	--sox-section-y:    clamp(3rem, 1.8rem + 4.2vw, 4.75rem);   /* 48→76 */
	--sox-section-y-lg: clamp(3.5rem, 1.9rem + 5.5vw, 6rem);    /* 56→96 */
	--sox-section-y-sm: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);/* 36→52 */

	/* --- Radii -------------------------------------------------------------- */
	--sox-radius-xs:   5px;
	--sox-radius-sm:   6px;
	--sox-radius:      7px;    /* buttons                                     */
	--sox-radius-md:   10px;
	--sox-radius-lg:   12px;   /* cards                                       */
	--sox-radius-xl:   14px;
	--sox-radius-2xl:  20px;   /* location cards                              */
	--sox-radius-pill: 999px;

	/* --- Shadows ------------------------------------------------------------ */
	--sox-shadow-xs:    0 1px 2px rgba(0, 0, 0, .03);
	--sox-shadow-sm:    0 1px 3px rgba(42, 29, 18, .06);
	--sox-shadow-card:  0 14px 28px rgba(23, 24, 26, .10);
	--sox-shadow-lift:  0 16px 32px rgba(23, 24, 26, .12);
	--sox-shadow-mega:  0 22px 40px -12px rgba(23, 24, 26, .22);
	--sox-shadow-btn:   0 6px 18px rgba(240, 130, 30, .35);
	--sox-shadow-head:  0 1px 0 rgba(0, 0, 0, .02);

	/* --- Motion -------------------------------------------------------------- */
	--sox-ease:        cubic-bezier(.4, 0, .2, 1);
	--sox-t-fast:      .16s;
	--sox-t-base:      .18s;
	--sox-t-slow:      .3s;
	--sox-t-slide:     .5s;
	--sox-t-fade:      .8s;

	/* --- Z-index scale -------------------------------------------------------- */
	--sox-z-mega:      49;
	--sox-z-header:    50;
	--sox-z-drawer:    90;
	--sox-z-skiplink:  100;
}


/* ==========================================================================
   3. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Offset anchor jumps so the sticky header never covers the target. */
	scroll-padding-top: 120px;
}

body {
	margin: 0;
	background: var(--sox-white);
	color: var(--sox-text);
	font-family: var(--sox-font-body);
	font-size: var(--sox-fs-md);
	font-weight: var(--sox-w-regular);
	line-height: var(--sox-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

a {
	color: var(--sox-text);
	text-decoration: none;
	transition: color var(--sox-t-fast) var(--sox-ease);
}

a:hover {
	color: var(--sox-orange-deep);
}

hr {
	border: 0;
	border-top: 1px solid var(--sox-line);
	margin: var(--sox-space-8) 0;
}

/* Numerals line up in prices, counts and totals. */
.sox-tabular,
.woocommerce-Price-amount,
.sox-price {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--sox-font-display);
	font-weight: var(--sox-w-extrabold);
	line-height: var(--sox-lh-heading);
	letter-spacing: var(--sox-ls-heading);
	color: var(--sox-text);
	text-wrap: balance;
}

h1 {
	font-size: var(--sox-fs-hero);
	font-weight: var(--sox-w-black);
	line-height: var(--sox-lh-hero);
	letter-spacing: var(--sox-ls-heading);
	text-transform: uppercase;
}

h2 {
	font-size: var(--sox-fs-h2);
	font-weight: var(--sox-w-black);
	line-height: var(--sox-lh-tight);
	letter-spacing: var(--sox-ls-snug);
	text-transform: uppercase;
}

h3 {
	font-size: var(--sox-fs-h3-sm);
	font-weight: var(--sox-w-extrabold);
	line-height: var(--sox-lh-heading);
}

h4 {
	font-size: var(--sox-fs-h5);
	font-weight: var(--sox-w-extrabold);
	line-height: var(--sox-lh-heading);
}

/* h5 and h6 are small enough that the condensed face would read as cramped, so
   they drop back to the interface font. */
h5 {
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-md);
	font-weight: var(--sox-w-bold);
	letter-spacing: var(--sox-ls-snug);
}

h6 {
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-3xs);
	font-weight: var(--sox-w-bold);
	letter-spacing: var(--sox-ls-eyebrow);
	text-transform: uppercase;
}

p {
	margin: 0 0 1.15em;
	line-height: var(--sox-lh-body);
}

p:last-child {
	margin-bottom: 0;
}

strong, b { font-weight: var(--sox-w-semibold); }

small { font-size: var(--sox-fs-4xs); }

/* --- Display heading modifiers ------------------------------------------ */
.sox-display        { font-size: var(--sox-fs-display);   font-weight: var(--sox-w-black); line-height: var(--sox-lh-display); letter-spacing: var(--sox-ls-heading); }
.sox-display--alt   { text-transform: none; }
.sox-h2-sm          { font-size: var(--sox-fs-h2-sm); }
.sox-h2-xs          { font-size: var(--sox-fs-h2-xs); }

/* --- Eyebrow: the small uppercase kicker above section headings ---------- */
.sox-eyebrow {
	display: block;
	margin: 0 0 var(--sox-space-2);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-3xs);
	font-weight: var(--sox-w-bold);
	letter-spacing: var(--sox-ls-eyebrow);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--sox-orange-deep);
}

.sox-eyebrow--wide     { letter-spacing: var(--sox-ls-eyebrow-lg); font-weight: var(--sox-w-extrabold); margin-bottom: var(--sox-space-5); }
.sox-eyebrow--on-dark  { color: var(--sox-orange-light); }
.sox-eyebrow--on-brown { color: var(--sox-orange); }
.sox-eyebrow--on-cream { color: var(--sox-orange-strong); }

/* --- Lead paragraph ------------------------------------------------------ */
.sox-lead {
	font-size: var(--sox-fs-lg);
	line-height: var(--sox-lh-relaxed);
	color: var(--sox-text-body);
}

.sox-muted { color: var(--sox-text-muted); }
.sox-faint { color: var(--sox-text-faint); }

/* --- Editorial note: marks placeholder / pre-launch content --------------- */
.sox-note {
	font-size: var(--sox-fs-4xs);
	font-style: italic;
	color: var(--sox-text-faint);
	text-align: center;
}


/* ==========================================================================
   5. LAYOUT PRIMITIVES
   ========================================================================== */

.sox-container {
	width: 100%;
	max-width: var(--sox-container);
	margin-inline: auto;
	padding-inline: var(--sox-gutter);
}

.sox-container--narrow { max-width: 920px; }
.sox-container--text   { max-width: var(--sox-container-text); }

.sox-section          { padding-block: var(--sox-section-y); }
.sox-section--lg      { padding-block: var(--sox-section-y-lg); }
.sox-section--sm      { padding-block: var(--sox-section-y-sm); }
.sox-section--flush-b { padding-bottom: 0; }

/* Section background variants */
.sox-section--white  { background: var(--sox-white); }
.sox-section--cream  { background: var(--sox-cream);      border-top: 1px solid var(--sox-line-warm); }
.sox-section--warm   { background: var(--sox-cream-warm); border-block: 1px solid var(--sox-line-cool); }
.sox-section--deep   { background: var(--sox-cream-deep); }
.sox-section--ink    { background: var(--sox-ink);   color: var(--sox-text-on-dark); }
.sox-section--brown  { background: var(--sox-brown); color: var(--sox-text-on-brown); }

.sox-section--ink h1, .sox-section--ink h2, .sox-section--ink h3, .sox-section--ink h4,
.sox-section--brown h1, .sox-section--brown h2, .sox-section--brown h3, .sox-section--brown h4 {
	color: var(--sox-text-cream);
}

/* --- Section header: eyebrow + heading on the left, link on the right ----- */
.sox-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sox-space-5);
	flex-wrap: wrap;
	margin-bottom: var(--sox-space-7);
}

.sox-section-head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: var(--sox-space-9);
}

.sox-section-head__title { margin: 0; }

.sox-section-head--center .sox-section-head__intro {
	max-width: 560px;
	margin-top: var(--sox-space-2);
	font-size: var(--sox-fs-md);
	color: var(--sox-text-muted);
}

/* --- Responsive grids ----------------------------------------------------- */
.sox-grid {
	display: grid;
	gap: var(--sox-space-6);
}

.sox-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sox-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sox-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1080px) {
	.sox-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.sox-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sox-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sox-grid--2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
	.sox-grid--3,
	.sox-grid--4 { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   6. COMPONENTS
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------- */
.sox-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sox-space-2);
	padding: 16px 26px;
	border: 1.5px solid transparent;
	border-radius: var(--sox-radius);
	background: var(--sox-orange);
	color: var(--sox-ink);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-md);
	font-weight: var(--sox-w-extrabold);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition:
		background var(--sox-t-fast) var(--sox-ease),
		border-color var(--sox-t-fast) var(--sox-ease),
		color var(--sox-t-fast) var(--sox-ease),
		transform var(--sox-t-fast) var(--sox-ease),
		box-shadow var(--sox-t-fast) var(--sox-ease);
}

.sox-btn:hover,
.sox-btn:focus-visible {
	background: var(--sox-orange-hover);
	color: var(--sox-ink);
	transform: translateY(-1px);
}

.sox-btn:active { transform: translateY(0); }

.sox-btn svg { flex: none; }

/* Primary with the orange glow used in the hero */
.sox-btn--glow { box-shadow: var(--sox-shadow-btn); }

/* Translucent outline for use over imagery */
.sox-btn--ghost {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .55);
	color: var(--sox-white);
	font-weight: var(--sox-w-bold);
	padding: 16px 24px;
}

.sox-btn--ghost:hover,
.sox-btn--ghost:focus-visible {
	background: var(--sox-white);
	border-color: var(--sox-white);
	color: var(--sox-ink);
}

/* Dark solid */
.sox-btn--dark {
	background: var(--sox-brown);
	color: var(--sox-text-cream);
}

.sox-btn--dark:hover,
.sox-btn--dark:focus-visible {
	background: var(--sox-brown-hover);
	color: var(--sox-text-cream);
}

/* Outline on light backgrounds */
.sox-btn--outline {
	background: transparent;
	border-color: var(--sox-line-tan);
	color: var(--sox-brown);
}

.sox-btn--outline:hover,
.sox-btn--outline:focus-visible {
	background: var(--sox-cream-pill);
	border-color: var(--sox-brown);
	color: var(--sox-brown);
}

/* Outline in near-black */
.sox-btn--outline-ink {
	background: transparent;
	border-color: var(--sox-ink);
	color: var(--sox-ink);
	font-weight: var(--sox-w-bold);
	padding: 13px 24px;
	font-size: var(--sox-fs-sm);
}

.sox-btn--outline-ink:hover,
.sox-btn--outline-ink:focus-visible {
	background: var(--sox-ink);
	color: var(--sox-white);
}

.sox-btn--pill  { border-radius: var(--sox-radius-pill); padding: 20px 36px; }
.sox-btn--sm    { padding: 12px 20px; font-size: var(--sox-fs-xs); }
.sox-btn--block { display: flex; width: 100%; }

/* --- Arrow link: text with an orange underline and a chevron -------------- */
.sox-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sox-space-2);
	padding-bottom: 2px;
	border-bottom: 2px solid var(--sox-orange);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-sm);
	font-weight: var(--sox-w-bold);
	color: var(--sox-ink);
	white-space: nowrap;
}

.sox-arrow-link svg {
	transition: transform var(--sox-t-fast) var(--sox-ease);
}

.sox-arrow-link:hover svg,
.sox-arrow-link:focus-visible svg {
	transform: translateX(3px);
}

.sox-arrow-link--on-dark { color: var(--sox-text-cream); }

/* --- Badges ---------------------------------------------------------------- */
.sox-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 9px;
	border-radius: var(--sox-radius-xs);
	background: var(--sox-orange);
	color: var(--sox-ink);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-micro);
	font-weight: var(--sox-w-extrabold);
	letter-spacing: var(--sox-ls-badge);
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
}

.sox-badge--ink   { background: var(--sox-ink);   color: var(--sox-white); }
.sox-badge--green { background: var(--sox-green); color: var(--sox-white); }
.sox-badge--brown { background: var(--sox-brown); color: var(--sox-text-cream); }

/* --- Stock indicator -------------------------------------------------------- */
.sox-stock {
	display: inline-flex;
	align-items: center;
	gap: var(--sox-space-2);
	font-size: var(--sox-fs-4xs);
	font-weight: var(--sox-w-semibold);
	line-height: 1.3;
}

.sox-stock::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.sox-stock--in    { color: var(--sox-green); }
.sox-stock--low   { color: var(--sox-amber); }
.sox-stock--out   { color: var(--sox-red); }

/* --- Card ------------------------------------------------------------------- */
.sox-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius-lg);
	background: var(--sox-white);
	transition:
		transform var(--sox-t-base) var(--sox-ease),
		box-shadow var(--sox-t-base) var(--sox-ease),
		border-color var(--sox-t-base) var(--sox-ease);
}

.sox-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--sox-shadow-card);
	border-color: #EAD9C6;
}

/* --- Media frame: fixed-ratio image well with a neutral backdrop ----------- */
.sox-media {
	position: relative;
	overflow: hidden;
	background: var(--sox-placeholder);
}

.sox-media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sox-t-slow) var(--sox-ease);
}

.sox-media--square { aspect-ratio: 1 / 1; }
.sox-media--card   { aspect-ratio: 4 / 3.4; }
.sox-media--wide   { aspect-ratio: 16 / 9; }

/* --- Circular chevron chip --------------------------------------------------- */
.sox-chip-arrow {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--sox-sand);
	transition: background var(--sox-t-fast) var(--sox-ease);
}

/* --- Icons ---------------------------------------------------------------------
   Icons inherit currentColor by default. `--accent` forces the brand orange,
   used for the chevrons on arrow links where the text stays near-black.        */
.sox-icon         { flex: none; }
.sox-icon--accent { color: var(--sox-orange); }

/* --- Star rating ----------------------------------------------------------------- */
.sox-stars {
	display: inline-flex;
	gap: 1px;
	color: var(--sox-orange);
	line-height: 0;
}

.sox-star--empty { color: var(--sox-line-grey); }

/* --- Skip link ----------------------------------------------------------------- */
.sox-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--sox-z-skiplink);
	padding: 12px 20px;
	background: var(--sox-ink);
	color: var(--sox-white);
	font-family: var(--sox-font-ui);
	font-weight: var(--sox-w-bold);
}

.sox-skip-link:focus {
	left: 8px;
	top: 8px;
	color: var(--sox-white);
}


/* ==========================================================================
   7. UTILITY BAR
   Thin near-black strip above the header: tagline left, store phones right.
   Content is edited in Sox Outlet → Header & Footer.
   ========================================================================== */

.sox-utility {
	background: var(--sox-ink);
	color: var(--sox-text-on-dark);
	font-size: var(--sox-fs-3xs);
	letter-spacing: var(--sox-ls-wide);
}

.sox-utility__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sox-space-4);
	flex-wrap: wrap;
	padding-block: 9px;
}

/* The margin reset matters: this is a <p>, and the base paragraph style gives
   it a bottom margin. Without clearing it the flex box is taller than its text
   and the line sits visibly high in the bar. */
.sox-utility__tagline {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	line-height: 1.4;
	font-weight: var(--sox-w-medium);
}

.sox-utility__tagline::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sox-orange);
}

.sox-utility__phones {
	display: flex;
	align-items: center;
	gap: var(--sox-space-5);
	color: var(--sox-text-on-dark-dim);
	font-weight: var(--sox-w-medium);
}

.sox-utility__phones a { color: var(--sox-text-on-dark-dim); }
.sox-utility__phones a:hover { color: var(--sox-orange); }

.sox-utility__sep { opacity: .35; }

@media (max-width: 560px) {
	.sox-utility__phones { display: none; }
	.sox-utility__inner  { justify-content: center; }
}


/* ==========================================================================
   8. HEADER, NAVIGATION & MEGA MENU
   ========================================================================== */

.sox-header {
	position: sticky;
	top: 0;
	z-index: var(--sox-z-header);
	background: var(--sox-white);
	border-bottom: 1px solid var(--sox-line);
	box-shadow: var(--sox-shadow-head);
	transition: box-shadow var(--sox-t-base) var(--sox-ease);
}

/* Deepens once the page scrolls — class toggled in theme.js */
.sox-header.is-stuck {
	box-shadow: 0 4px 20px -6px rgba(23, 24, 26, .14);
}

.sox-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sox-space-6);
	padding-block: 14px;
}

/* --- Logo -------------------------------------------------------------------- */
.sox-logo {
	flex: none;
	display: block;
	line-height: 0;
}

.sox-logo img {
	height: 52px;
	width: auto;
	max-width: 260px;
	object-fit: contain;
}

/* Text fallback shown until a logo image is set in Appearance → Customize */
.sox-logo__text {
	display: block;
	font-family: var(--sox-font-display);
	font-size: 1.75rem;
	font-weight: var(--sox-w-black);
	letter-spacing: var(--sox-ls-display);
	line-height: 1;
	text-transform: uppercase;
	color: var(--sox-ink);
}

.sox-logo__text span { color: var(--sox-orange); }

.sox-logo__tag {
	display: block;
	margin-top: 3px;
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-micro);
	font-weight: var(--sox-w-bold);
	letter-spacing: var(--sox-ls-eyebrow-lg);
	text-transform: uppercase;
	color: var(--sox-text-muted);
}

@media (max-width: 560px) {
	.sox-logo img { height: 40px; }
	.sox-logo__text { font-size: 1.375rem; }
}

/* --- Primary navigation ------------------------------------------------------- */
.sox-nav {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sox-nav__list {
	display: flex;
	align-items: center;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A plain dropdown is positioned against its own menu item, so it sits directly
   beneath the link. */
.sox-nav__item { position: relative; }

/* A mega panel spans the full header, so it must NOT be positioned against the
   menu item — it takes its containing block from .sox-header (which is sticky,
   and therefore a positioned ancestor) and stretches edge to edge. */
.sox-nav__item--mega { position: static; }

.sox-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 12px;
	font-family: var(--sox-font-ui);
	font-size: 0.90625rem; /* 14.5 */
	font-weight: var(--sox-w-semibold);
	line-height: 1.4;
	color: var(--sox-ink);
	white-space: nowrap;
}

.sox-nav__link:hover,
.sox-nav__link:focus-visible,
.sox-nav__item.is-open > .sox-nav__link {
	color: var(--sox-orange-deep);
}

/* Current page / section */
.sox-nav__item.current-menu-item > .sox-nav__link,
.sox-nav__item.current-menu-ancestor > .sox-nav__link,
.sox-nav__item.current-menu-parent > .sox-nav__link {
	font-weight: var(--sox-w-bold);
	color: var(--sox-orange);
}

.sox-nav__caret {
	flex: none;
	opacity: .5;
	transition: transform var(--sox-t-fast) var(--sox-ease);
}

.sox-nav__item.is-open .sox-nav__caret { transform: rotate(180deg); }

/* --- Mega menu panel ------------------------------------------------------------
   Rendered from the child items of a top-level menu item in Appearance → Menus.
   Third-level items become the column links; the promo tile image and title are
   set per menu item in the menu editor.                                          */
.sox-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: var(--sox-z-mega);
	background: var(--sox-white);
	border-top: 1px solid var(--sox-line-warm);
	border-bottom: 1px solid var(--sox-line);
	box-shadow: var(--sox-shadow-mega);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity var(--sox-t-base) var(--sox-ease),
		transform var(--sox-t-base) var(--sox-ease),
		visibility 0s linear var(--sox-t-base);
}

/* `is-open` is set by theme.js on hover and on click/tap. `focus-within` is the
   keyboard path — tabbing into the parent link opens the panel with no JS. */
.sox-nav__item.is-open > .sox-mega,
.sox-nav__item:focus-within > .sox-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

.sox-mega__inner {
	display: grid;
	grid-template-columns: 1.7fr .9fr;
	gap: var(--sox-space-9);
	max-width: var(--sox-container);
	margin-inline: auto;
	padding: 32px var(--sox-gutter);
}

.sox-mega__col { min-width: 0; }

/* No promo image chosen for this menu item — let the links use the full width
   rather than leaving an empty box beside them. */
.sox-mega__col:only-child { grid-column: 1 / -1; }

.sox-mega__title {
	margin-bottom: var(--sox-space-5);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-xs);
	font-weight: var(--sox-w-extrabold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sox-orange-deep);
}

.sox-mega__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px var(--sox-space-7);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sox-mega__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sox-space-2);
	padding: 5px 0;
	font-size: var(--sox-fs-sm);
	color: var(--sox-text-body);
}

.sox-mega__link::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sox-orange);
}

.sox-mega__link:hover,
.sox-mega__link:focus-visible { color: var(--sox-orange-deep); }

.sox-mega__all { margin-top: var(--sox-space-5); }

/* Promo tile */
.sox-mega__promo {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 180px;
	overflow: hidden;
	border: 1px solid #E1DCD2;
	border-radius: var(--sox-radius-md);
	background: #EAE6DF;
}

.sox-mega__promo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sox-t-slow) var(--sox-ease);
}

.sox-mega__promo:hover img { transform: scale(1.04); }

.sox-mega__promo-body {
	position: relative;
	width: 100%;
	padding: var(--sox-space-5);
	background: linear-gradient(transparent, rgba(23, 24, 26, .72));
}

.sox-mega__promo-title {
	font-family: var(--sox-font-display);
	font-size: 1.125rem;
	font-weight: var(--sox-w-extrabold);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--sox-white);
}

.sox-mega__promo-meta {
	margin-top: var(--sox-space-1);
	font-size: var(--sox-fs-xs);
	font-weight: var(--sox-w-semibold);
	color: var(--sox-orange-sand);
}

/* --- Plain dropdown (menu item with children but no mega layout) ------------- */
.sox-dropdown {
	position: absolute;
	left: 0;
	top: 100%;
	z-index: var(--sox-z-mega);
	min-width: 230px;
	margin: 0;
	padding: var(--sox-space-2) 0;
	list-style: none;
	background: var(--sox-white);
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius-md);
	box-shadow: var(--sox-shadow-mega);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity var(--sox-t-base) var(--sox-ease),
		transform var(--sox-t-base) var(--sox-ease),
		visibility 0s linear var(--sox-t-base);
}

.sox-nav__item.is-open > .sox-dropdown,
.sox-nav__item:focus-within > .sox-dropdown,
.sox-dropdown li.is-open > .sox-dropdown,
.sox-dropdown li:focus-within > .sox-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

/* Third level opens to the side */
.sox-dropdown .sox-dropdown {
	left: 100%;
	top: -9px;
}

/* Flip a third level that would run off the right edge of the viewport. */
.sox-dropdown .sox-dropdown.is-flipped {
	left: auto;
	right: 100%;
}

.sox-dropdown li { position: relative; }

.sox-dropdown__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sox-space-2);
	padding: 9px var(--sox-space-5);
	font-size: var(--sox-fs-sm);
	color: var(--sox-text-body);
}

.sox-dropdown__link:hover,
.sox-dropdown__link:focus-visible {
	background: var(--sox-cream);
	color: var(--sox-orange-deep);
}

.sox-dropdown__caret { flex: none; opacity: .45; }

/* --- Header actions: cart + mobile toggle ------------------------------------- */
.sox-header__actions {
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

/* The icon is drawn with stroke="currentColor", so this colour is what makes it
   visible. Without it the link inherits the body's near-black onto a near-black
   circle and the icon only appears on hover, when the global link-hover colour
   kicks in. */
.sox-cart-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--sox-ink);
	color: var(--sox-text-cream);
	transition:
		background var(--sox-t-fast) var(--sox-ease),
		color var(--sox-t-fast) var(--sox-ease);
}

.sox-cart-btn:hover,
.sox-cart-btn:focus-visible {
	background: var(--sox-orange);
	color: var(--sox-ink);
}

/* Keep the count readable once the button itself turns orange. */
.sox-cart-btn:hover .sox-cart-btn__count,
.sox-cart-btn:focus-visible .sox-cart-btn__count {
	background: var(--sox-ink);
	color: var(--sox-white);
}

.sox-cart-btn__count {
	position: absolute;
	top: -2px;
	right: -2px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	border: 2px solid var(--sox-white);
	border-radius: var(--sox-radius-pill);
	background: var(--sox-orange);
	color: var(--sox-ink);
	font-family: var(--sox-font-ui);
	font-size: 0.65625rem; /* 10.5 */
	font-weight: var(--sox-w-extrabold);
	line-height: 1;
}

/* Hamburger — hidden on desktop. Swaps to a close icon while the panel is open. */
.sox-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	padding: 9px;
	border: 1px solid #E0DCD3;
	border-radius: var(--sox-radius-sm);
	background: none;
	color: var(--sox-ink);
	transition:
		border-color var(--sox-t-fast) var(--sox-ease),
		background var(--sox-t-fast) var(--sox-ease);
}

.sox-menu-toggle:hover { border-color: var(--sox-ink); }

.sox-menu-toggle[aria-expanded="true"] {
	background: var(--sox-ink);
	border-color: var(--sox-ink);
	color: var(--sox-white);
}

.sox-menu-toggle__close                          { display: none; }
.sox-menu-toggle[aria-expanded="true"] .sox-menu-toggle__open  { display: none; }
.sox-menu-toggle[aria-expanded="true"] .sox-menu-toggle__close { display: block; }

@media (max-width: 960px) {
	.sox-nav         { display: none; }
	.sox-menu-toggle { display: inline-flex; }
	.sox-header__inner { gap: var(--sox-space-4); }
}

@media (max-width: 1080px) {
	.sox-nav__link { padding: 8px 9px; font-size: var(--sox-fs-3xs); }
}

@media (max-width: 900px) {
	.sox-mega__inner { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   9. MOBILE NAVIGATION PANEL
   ========================================================================== */

.sox-mobile-nav {
	display: none;
	border-top: 1px solid var(--sox-line);
	background: var(--sox-white);
	padding: var(--sox-space-2) var(--sox-space-4) var(--sox-space-4);
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sox-mobile-nav.is-open { display: block; }

.sox-mobile-nav ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sox-mobile-nav li { border-bottom: 1px solid var(--sox-line-soft); }
.sox-mobile-nav > ul > li:last-child { border-bottom: 0; }

.sox-mobile-nav__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sox-space-2);
}

.sox-mobile-nav a {
	flex: 1;
	padding: 13px var(--sox-space-2);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-md);
	font-weight: var(--sox-w-semibold);
	color: var(--sox-ink);
}

/* Expand/collapse control for nested items */
.sox-mobile-nav__toggle {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: var(--sox-radius-sm);
	background: var(--sox-cream);
	color: var(--sox-ink);
	transition: background var(--sox-t-fast) var(--sox-ease);
}

.sox-mobile-nav__toggle svg { transition: transform var(--sox-t-fast) var(--sox-ease); }
.sox-mobile-nav__toggle[aria-expanded="true"] { background: var(--sox-orange); }
.sox-mobile-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Nested list, collapsed by default */
.sox-mobile-nav__sub {
	display: none;
	padding-left: var(--sox-space-4);
	border-left: 2px solid var(--sox-line);
	margin-bottom: var(--sox-space-2);
}

.sox-mobile-nav__sub.is-open { display: flex; }

.sox-mobile-nav__sub a {
	padding: 10px var(--sox-space-2);
	font-family: var(--sox-font-body);
	font-size: var(--sox-fs-sm);
	font-weight: var(--sox-w-medium);
	color: var(--sox-text-body);
}

/* Store phone numbers repeated at the foot of the mobile panel — calling the
   shop is the most common thing a visitor does from a phone. */
.sox-mobile-nav__contact {
	display: flex;
	flex-direction: column;
	gap: var(--sox-space-2);
	margin-top: var(--sox-space-4);
	padding-top: var(--sox-space-4);
	border-top: 1px solid var(--sox-line);
}

.sox-mobile-nav__phone {
	display: flex;
	align-items: center;
	gap: var(--sox-space-3);
	padding: 12px var(--sox-space-3);
	border-radius: var(--sox-radius-sm);
	background: var(--sox-cream);
	color: var(--sox-ink);
	font-size: var(--sox-fs-sm);
}

.sox-mobile-nav__phone:hover { background: var(--sox-cream-pill); }

.sox-mobile-nav__phone .sox-icon { color: var(--sox-orange); }

.sox-mobile-nav__phone strong {
	display: block;
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-4xs);
	font-weight: var(--sox-w-bold);
	letter-spacing: var(--sox-ls-caps);
	text-transform: uppercase;
	color: var(--sox-text-muted);
}

@media (min-width: 961px) {
	.sox-mobile-nav { display: none !important; }
}


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.sox-footer {
	background: var(--sox-brown);
	color: var(--sox-text-on-brown);
}

/* Columns: brand + footer menu + one column per store. The store count is set
   as --sox-footer-stores in footer.php, so adding a third shop location adds a
   column instead of breaking the layout. */
.sox-footer__inner {
	display: grid;
	grid-template-columns:
		1.35fr
		.8fr
		repeat(var(--sox-footer-stores, 2), minmax(0, 1fr));
	gap: var(--sox-space-10);
	padding-block: var(--sox-space-12) var(--sox-space-9);
}

.sox-footer__heading {
	margin: 0 0 var(--sox-space-5);
	font-family: var(--sox-font-display);
	font-size: var(--sox-fs-h5);
	font-weight: var(--sox-w-extrabold);
	letter-spacing: var(--sox-ls-normal);
	color: var(--sox-text-cream);
}

.sox-footer__logo img {
	height: 84px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.sox-footer__about {
	max-width: 300px;
	margin: var(--sox-space-5) 0 var(--sox-space-6);
	font-size: var(--sox-fs-md);
	line-height: var(--sox-lh-body);
	color: var(--sox-text-on-brown);
}

.sox-footer__links {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--sox-fs-md);
}

.sox-footer__links a { color: var(--sox-text-on-brown); }
.sox-footer__links a:hover,
.sox-footer__links a:focus-visible { color: var(--sox-orange); }

/* Store block in the footer */
.sox-footer__store {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sox-footer__address {
	font-size: var(--sox-fs-md);
	line-height: var(--sox-lh-normal);
	color: var(--sox-text-on-brown);
	font-style: normal;
}

.sox-footer__phone {
	font-family: var(--sox-font-ui);
	font-size: 1.0625rem; /* 17 */
	font-weight: var(--sox-w-extrabold);
	color: var(--sox-orange);
}

.sox-footer__phone:hover { color: var(--sox-orange-light); }

.sox-footer__hours {
	font-size: var(--sox-fs-sm);
	line-height: var(--sox-lh-body);
	color: var(--sox-text-on-brown-mute);
}

/* Social icons */
.sox-social {
	display: flex;
	gap: var(--sox-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sox-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--sox-line-on-brown-mid);
	border-radius: var(--sox-radius-pill);
	transition:
		background var(--sox-t-fast) var(--sox-ease),
		border-color var(--sox-t-fast) var(--sox-ease);
}

.sox-social a:hover,
.sox-social a:focus-visible {
	background: var(--sox-orange);
	border-color: var(--sox-orange);
}

/* Bottom bar */
.sox-footer__bottom {
	border-top: 1px solid var(--sox-line-on-brown);
}

.sox-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sox-space-4);
	flex-wrap: wrap;
	padding: var(--sox-space-6) var(--sox-gutter) var(--sox-space-8);
	text-align: center;
	font-size: var(--sox-fs-sm);
	color: var(--sox-text-on-brown-mute);
}

.sox-footer__bottom-inner a { color: var(--sox-text-on-brown-mute); }
.sox-footer__bottom-inner a:hover { color: var(--sox-orange); }

.sox-footer__legal {
	display: flex;
	gap: var(--sox-space-4);
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1080px) {
	.sox-footer__inner { gap: var(--sox-space-8); }
}

@media (max-width: 900px) {
	.sox-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sox-space-7);
	}
}

@media (max-width: 560px) {
	.sox-footer__inner { grid-template-columns: minmax(0, 1fr); }
	.sox-footer__about { max-width: none; }
}


/* ==========================================================================
   11. PAGE FURNITURE
   The masthead, breadcrumb, pagination and empty states shared by every page
   that is not the homepage.
   ========================================================================== */

/* --- Page header banner --------------------------------------------------- */
.sox-page-header {
	position: relative;
	background: var(--sox-cream-deep);
	border-bottom: 1px solid var(--sox-line-warm);
	background-size: cover;
	background-position: center;
}

.sox-page-header__inner {
	position: relative;
	padding-block: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
}

.sox-page-header__title {
	margin: 0;
	font-size: var(--sox-fs-display-2);
	font-weight: var(--sox-w-black);
	line-height: var(--sox-lh-display);
	letter-spacing: var(--sox-ls-display);
	text-transform: uppercase;
	color: var(--sox-brown);
}

.sox-page-header__subtitle {
	max-width: 620px;
	margin: var(--sox-space-3) 0 0;
	font-size: var(--sox-fs-lg);
	line-height: var(--sox-lh-body);
	color: var(--sox-text-sub);
}

/* With a background image, darken it and flip the text to light. */
.sox-page-header--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(20, 21, 23, .88) 0%,
		rgba(20, 21, 23, .62) 55%,
		rgba(20, 21, 23, .28) 100%
	);
}

.sox-page-header--image .sox-page-header__title    { color: var(--sox-white); }
.sox-page-header--image .sox-page-header__subtitle { color: var(--sox-text-on-img); }
.sox-page-header--image .sox-breadcrumb            { color: var(--sox-text-on-dark-mute); }
.sox-page-header--image .sox-breadcrumb a          { color: var(--sox-text-on-dark-dim); }
.sox-page-header--image .sox-breadcrumb a:hover    { color: var(--sox-orange); }

/* --- Breadcrumb ------------------------------------------------------------ */
.sox-breadcrumb {
	margin-bottom: var(--sox-space-4);
	font-size: var(--sox-fs-3xs);
	color: var(--sox-text-muted);
}

.sox-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sox-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sox-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--sox-space-2); }

/* Chevron separator between crumbs, drawn rather than typed so it scales. */
.sox-breadcrumb__item + .sox-breadcrumb__item::before {
	content: "";
	width: 5px;
	height: 5px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .45;
}

.sox-breadcrumb a {
	color: var(--sox-text-muted);
	font-weight: var(--sox-w-medium);
}

.sox-breadcrumb a:hover { color: var(--sox-orange-deep); }

/* --- Pagination ------------------------------------------------------------ */
.sox-pagination,
.woocommerce-pagination {
	margin-top: var(--sox-space-11);
}

.sox-pagination .nav-links,
.woocommerce-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sox-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sox-pagination .page-numbers,
.woocommerce-pagination .page-numbers li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: var(--sox-space-3);
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius-sm);
	background: var(--sox-white);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-sm);
	font-weight: var(--sox-w-bold);
	color: var(--sox-ink);
	transition:
		background var(--sox-t-fast) var(--sox-ease),
		border-color var(--sox-t-fast) var(--sox-ease),
		color var(--sox-t-fast) var(--sox-ease);
}

.sox-pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers li .page-numbers:hover {
	border-color: var(--sox-ink);
	background: var(--sox-cream);
	color: var(--sox-ink);
}

.sox-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers li .page-numbers.current {
	background: var(--sox-orange);
	border-color: var(--sox-orange);
	color: var(--sox-ink);
}

.sox-pagination .page-numbers.dots,
.woocommerce-pagination .page-numbers li .page-numbers.dots {
	border-color: transparent;
	background: none;
	min-width: 24px;
}

/* --- Empty state ------------------------------------------------------------ */
.sox-empty {
	max-width: 520px;
	margin-inline: auto;
	padding-block: var(--sox-space-11);
	text-align: center;
}

.sox-empty p {
	margin: var(--sox-space-3) 0 var(--sox-space-6);
	color: var(--sox-text-muted);
}

/* --- Blog post card ---------------------------------------------------------- */
.sox-post-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
}

.sox-post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--sox-space-5) var(--sox-space-5) var(--sox-space-6);
}

.sox-post-card__meta {
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-6xs);
	font-weight: var(--sox-w-bold);
	letter-spacing: var(--sox-ls-caps);
	text-transform: uppercase;
	color: var(--sox-orange-ink);
}

.sox-post-card__title {
	margin: var(--sox-space-2) 0 var(--sox-space-3);
	font-size: var(--sox-fs-h3-sm);
	line-height: var(--sox-lh-snug);
	text-transform: none;
	letter-spacing: var(--sox-ls-snug);
}

.sox-post-card__excerpt {
	flex: 1;
	margin: 0 0 var(--sox-space-4);
	font-size: var(--sox-fs-sm);
	color: var(--sox-text-muted);
}

.sox-post-card__date {
	font-size: var(--sox-fs-4xs);
	color: var(--sox-text-faint);
}

.sox-post-card:hover .sox-post-card__title { color: var(--sox-orange-deep); }


/* ==========================================================================
   12. ACCESSIBILITY & MOTION
   ========================================================================== */

/* WordPress core screen-reader class */
.screen-reader-text {
	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;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
}

/* Visible, on-brand focus ring everywhere */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--sox-orange);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Respect the visitor's reduced-motion setting */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Print */
@media print {
	.sox-utility,
	.sox-menu-toggle,
	.sox-mobile-nav,
	.sox-mega,
	.sox-dropdown,
	.sox-header__actions { display: none !important; }

	.sox-header { position: static !important; box-shadow: none !important; }
	body { background: #fff; }
}


/* ==========================================================================
   13. PAGE FURNITURE — additions
   Masthead extras, long-form prose, empty states, search, forms and alerts.
   ========================================================================== */

/* --- Masthead extras ------------------------------------------------------ */

.sox-page-header--compact { padding-block: var(--sox-space-7) var(--sox-space-6); }

.sox-page-header__count {
	display: inline-block;
	margin-left: var(--sox-space-3);
	padding: 5px 12px;
	border-radius: var(--sox-radius-pill);
	background: var(--sox-white);
	border: 1px solid var(--sox-line);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-4xs);
	font-weight: var(--sox-w-bold);
	letter-spacing: 0;
	text-transform: none;
	vertical-align: middle;
	color: var(--sox-text-muted);
}

.sox-page-header--image .sox-page-header__count {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .3);
	color: var(--sox-white);
}

.sox-page-header__description {
	max-width: 68ch;
	margin-top: var(--sox-space-4);
	font-size: var(--sox-fs-md);
	line-height: var(--sox-lh-body);
	color: var(--sox-text-muted);
}

.sox-page-header__description p:last-child { margin-bottom: 0; }

.sox-page-header--image .sox-page-header__description { color: var(--sox-text-on-img); }


/* --- Long-form content ----------------------------------------------------
   Applied to anything written in the block editor. The job here is a
   comfortable measure and a clear vertical rhythm — nothing decorative.      */

.sox-page { padding-block: var(--sox-section-y); }

.sox-prose {
	font-size: var(--sox-fs-lg);
	line-height: var(--sox-lh-relaxed);
	color: var(--sox-text-body);
}

.sox-prose > * + * { margin-top: 1.15em; }

.sox-prose h2 {
	margin-top: 2em;
	font-size: var(--sox-fs-h2-xs);
	color: var(--sox-ink);
}

.sox-prose h3 {
	margin-top: 1.6em;
	font-size: var(--sox-fs-h3-sm);
	color: var(--sox-ink);
}

.sox-prose h4 {
	margin-top: 1.4em;
	font-size: var(--sox-fs-h4);
	color: var(--sox-ink);
}

.sox-prose a {
	color: var(--sox-orange-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.sox-prose a:hover { color: var(--sox-orange-hover); }

.sox-prose ul,
.sox-prose ol { padding-left: 1.35em; }

.sox-prose li + li { margin-top: .45em; }

.sox-prose ul { list-style: disc; }
.sox-prose ol { list-style: decimal; }

.sox-prose blockquote {
	margin-inline: 0;
	padding: var(--sox-space-2) 0 var(--sox-space-2) var(--sox-space-6);
	border-left: 3px solid var(--sox-orange);
	font-size: var(--sox-fs-lead);
	color: var(--sox-ink);
}

.sox-prose img,
.sox-prose figure { border-radius: var(--sox-radius-lg); }

.sox-prose figcaption {
	margin-top: var(--sox-space-2);
	font-size: var(--sox-fs-3xs);
	color: var(--sox-text-faint);
	text-align: center;
}

.sox-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--sox-fs-sm);
}

.sox-prose th,
.sox-prose td {
	padding: var(--sox-space-3);
	border-bottom: 1px solid var(--sox-line);
	text-align: left;
}

.sox-prose th { font-weight: var(--sox-w-bold); color: var(--sox-ink); }

.sox-prose code {
	padding: 2px 6px;
	border-radius: var(--sox-radius-xs);
	background: var(--sox-cream-warm);
	font-size: .9em;
}

.sox-page-links { margin-top: var(--sox-space-8); font-size: var(--sox-fs-sm); }
.sox-comments-wrap { padding-bottom: var(--sox-section-y); }


/* --- Empty states ---------------------------------------------------------- */

.sox-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 560px;
	margin-inline: auto;
	padding: var(--sox-space-11) var(--sox-space-6);
	text-align: center;
}

.sox-empty--page { padding-block: var(--sox-space-8); }

.sox-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin-bottom: var(--sox-space-6);
	border-radius: 50%;
	background: var(--sox-cream-warm);
	color: var(--sox-text-faint);
}

.sox-empty__code {
	font-family: var(--sox-font-display);
	font-size: clamp(5rem, 2rem + 12vw, 9rem);
	font-weight: var(--sox-w-black);
	line-height: .8;
	color: var(--sox-orange);
}

.sox-empty__title {
	margin-bottom: var(--sox-space-3);
	font-size: var(--sox-fs-h2-xs);
	text-transform: uppercase;
}

.sox-empty--page .sox-empty__title { margin-top: var(--sox-space-6); }

.sox-empty__text {
	margin-bottom: var(--sox-space-7);
	font-size: var(--sox-fs-md);
	line-height: var(--sox-lh-body);
	color: var(--sox-text-muted);
}

.sox-empty__search { width: 100%; margin-bottom: var(--sox-space-7); }

.sox-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sox-space-3);
}


/* --- Search form ------------------------------------------------------------ */

.sox-search__field {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--sox-space-2);
	padding: 6px 6px 6px var(--sox-space-5);
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius-pill);
	background: var(--sox-white);
	transition: border-color var(--sox-t-fast) var(--sox-ease);
}

.sox-search__field:focus-within { border-color: var(--sox-orange); }

.sox-search__icon { flex: none; color: var(--sox-text-faint); }

.sox-search__input {
	flex: 1;
	min-width: 0;
	padding: 10px 0;
	border: 0;
	background: none;
	font-size: var(--sox-fs-md);
	color: var(--sox-ink);
}

.sox-search__input:focus { outline: none; }
.sox-search__input::placeholder { color: var(--sox-text-faint); }

.sox-search__submit {
	flex: none;
	padding: 11px var(--sox-space-6);
	border: 0;
	border-radius: var(--sox-radius-pill);
	background: var(--sox-ink);
	color: var(--sox-white);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-xs);
	font-weight: var(--sox-w-bold);
	transition: background var(--sox-t-fast) var(--sox-ease);
}

.sox-search__submit:hover { background: var(--sox-orange); color: var(--sox-ink); }

.sox-search-bar { max-width: 520px; margin: 0 auto var(--sox-space-9); }


/* --- Forms ------------------------------------------------------------------- */

.sox-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sox-space-5);
}

@media (max-width: 640px) {
	.sox-form__row { grid-template-columns: minmax(0, 1fr); }
}

.sox-form__field { margin-bottom: var(--sox-space-5); }

.sox-form__label {
	display: block;
	margin-bottom: var(--sox-space-2);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-xs);
	font-weight: var(--sox-w-bold);
	letter-spacing: var(--sox-ls-caps);
	text-transform: uppercase;
	color: var(--sox-ink);
}

.sox-form__required { color: var(--sox-orange-deep); }

.sox-form__input {
	width: 100%;
	padding: 14px var(--sox-space-4);
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius);
	background: var(--sox-white);
	font-family: var(--sox-font-body);
	font-size: var(--sox-fs-md);
	color: var(--sox-ink);
	transition:
		border-color var(--sox-t-fast) var(--sox-ease),
		box-shadow var(--sox-t-fast) var(--sox-ease);
}

.sox-form__input:focus {
	border-color: var(--sox-orange);
	box-shadow: 0 0 0 3px rgba(240, 130, 30, .16);
	outline: none;
}

.sox-form__input::placeholder { color: var(--sox-text-faint); }

.sox-form__textarea { resize: vertical; min-height: 150px; line-height: var(--sox-lh-body); }

.sox-form__note {
	margin-top: var(--sox-space-4);
	font-size: var(--sox-fs-4xs);
	color: var(--sox-text-faint);
}

/* The honeypot. Hidden from people, still in the DOM for bots to fall into. */
.sox-form__honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* --- Alerts -------------------------------------------------------------------- */

.sox-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--sox-space-3);
	margin-bottom: var(--sox-space-6);
	padding: var(--sox-space-4) var(--sox-space-5);
	border-radius: var(--sox-radius);
	border-left: 3px solid;
	font-size: var(--sox-fs-sm);
	line-height: var(--sox-lh-normal);
}

.sox-alert p { margin: 0; }
.sox-alert ul { margin: var(--sox-space-2) 0 0; padding-left: 1.2em; list-style: disc; }

.sox-alert--success {
	border-color: var(--sox-green);
	background: var(--sox-green-soft);
	color: #2F4F36;
}

.sox-alert--error {
	border-color: var(--sox-red);
	background: var(--sox-red-soft);
	color: #7A2A1C;
}


/* --- Post list and post navigation ------------------------------------------- */

.sox-results {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sox-space-6);
}

@media (max-width: 900px) { .sox-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sox-results { grid-template-columns: minmax(0, 1fr); } }

.sox-post-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sox-space-4);
	margin-top: var(--sox-space-11);
	padding-top: var(--sox-space-7);
	border-top: 1px solid var(--sox-line);
}

.sox-post-nav__link {
	padding: var(--sox-space-5);
	border: 1px solid var(--sox-line);
	border-radius: var(--sox-radius-lg);
	transition: border-color var(--sox-t-fast) var(--sox-ease);
}

.sox-post-nav__link:hover { border-color: var(--sox-orange); }
.sox-post-nav__link--next { text-align: right; grid-column: 2; }

.sox-post-nav__label {
	display: block;
	margin-bottom: var(--sox-space-1);
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-6xs);
	font-weight: var(--sox-w-bold);
	letter-spacing: var(--sox-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sox-orange-deep);
}

.sox-post-nav__title {
	font-family: var(--sox-font-ui);
	font-size: var(--sox-fs-sm);
	font-weight: var(--sox-w-semibold);
	color: var(--sox-ink);
}

@media (max-width: 560px) {
	.sox-post-nav { grid-template-columns: minmax(0, 1fr); }
	.sox-post-nav__link--next { grid-column: 1; text-align: left; }
}