/* ============================================================================
   gryphon-replica — base.css
   Design tokens lifted VERBATIM from the source's own :root (all 62 custom
   properties), per RECON-DESIGN.md §1 / probe scrape/probes/home-1440.json.
   These are measured values, not colours matched by eye — do not "improve" them.
   ========================================================================= */

:root {
	/* ---- colour: brand ---- */
	--color-primary:              rgb(225, 96, 32);      /* #E16020 */
	--color-primary-rgb:          225, 96, 32;
	--color-primary-lighten-10:   rgb(231, 128, 77);
	--color-primary-lighten-15:   rgb(234, 144, 99);
	--color-primary-lighten-20:   rgb(237, 160, 122);
	--color-primary-lighten-30:   rgb(243, 192, 167);
	--color-primary-darken-10:    rgb(182, 77, 24);
	--color-primary-darken-15:    rgb(159, 67, 21);
	--color-primary-darken-20:    rgb(137, 58, 18);
	--color-primary-darken-50:    rgb(2, 1, 0);
	--color-primary-darken-70:    rgb(0, 0, 0);
	--color-primary-darken-80:    rgb(0, 0, 0);

	/* ---- colour: surfaces + text ---- */
	--color-bg-body:              rgb(255, 255, 255);
	--color-body:                 rgb(102, 101, 101);    /* #666565 — default body text */
	--color-alternative:          rgb(102, 101, 101);
	--color-alternative-darken-15: rgb(64, 63, 63);
	--color-alternative-darken-25: rgb(38, 38, 38);
	--color-heading:              rgb(99, 88, 76);       /* #63584C — warm brown */
	--color-alternative-headings: rgb(69, 69, 69);
	--color-bg-alternative:       rgb(245, 242, 235);    /* #F5F2EB warm off-white band */

	/* ---- colour: nav ---- */
	--color-bg-nav:               rgb(99, 88, 76);       /* same warm brown as headings */
	--color-bg-nav-darken-10:     rgb(70, 62, 54);
	--color-bg-nav-darken-15:     rgb(56, 50, 43);

	/* ---- colour: header ---- */
	--color-header:               rgb(255, 255, 255);
	--color-header-darken-15:     rgb(217, 217, 217);

	/* ---- colour: footer ---- */
	--color-bg-footer:            rgb(69, 69, 69);       /* #454545 */
	--color-bg-footer-darken-10:  rgb(44, 44, 44);
	--color-footer:               rgb(255, 255, 255);
	--color-footer-heading:       rgb(255, 255, 255);
	--color-footer-link:          rgb(189, 189, 189);
	--color-footer-link-darken-15: rgb(151, 151, 151);

	/* ---- colour: buttons + commerce ---- */
	--color-btn:                  rgb(255, 255, 255);
	--color-btn-darken-15:        rgb(217, 217, 217);
	--color-price:                rgb(189, 189, 189);
	--color-bg-sale-label:        rgb(252, 69, 0);
	--color-shadow-sale-label:    rgba(176, 48, 0, 0.25);

	/* ---- type ----
	   ⚠ --font-family-header is "Andada Pro", but the source ALSO declares
	   h1,h2 { font-family: Vollkorn } in gryp-pt-styles.css and never loads
	   Vollkorn — no @font-face, no Google Fonts link, and document.fonts across
	   all 37 captured templates contains only Montserrat, Andada Pro and
	   simple-line-icons. So on the real site every h1/h2 falls back to the
	   browser's default serif. We reproduce that (owner's decision, 2026-10-01):
	   the declaration is kept, the font is deliberately NOT loaded. See
	   RECON-FINDINGS OQ-8 and the harness's known-deviation list. */
	--font-family:                Montserrat, sans-serif;
	--font-family-header:         "Andada Pro", serif;
	--font-size:                  16px;
	--font-size-header:           26px;
	--font-size-logo:             24px;
	--font-size-nav-header:       16px;
	--font-size-rte:              19px;
	--font-size-rte-header:       30px;
	--font-size-title-bar:        58px;
	--font-weight:                400;
	--font-weight-bolder:         700;
	--font-weight-header:         500;
	--font-weight-nav:            600;
	--font-weight-section-title:  normal;
	--font-weight-title-bar:      normal;
	--font-style:                 normal;
	--font-style-header:          normal;
	--text-transform-nav:         uppercase;
	--text-transform-section-title: none;
	--text-transform-title-bar:   none;

	/* ---- other ---- */
	--height-product-image:       230px;
	--opacity-overlay-page-header: 0.6;
}

/* ---- webfonts, rehosted from the harvest (never hotlink the Shopify CDN) ---- */
@font-face {
	font-family: Montserrat;
	src: url(../fonts/montserrat_n4.woff2) format("woff2"),
	     url(../fonts/montserrat_n4.woff) format("woff");
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: Montserrat;
	src: url(../fonts/montserrat_n7.woff2) format("woff2"),
	     url(../fonts/montserrat_n7.woff) format("woff");
	font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
	font-family: Montserrat;
	src: url(../fonts/montserrat_i4.woff2) format("woff2"),
	     url(../fonts/montserrat_i4.woff) format("woff");
	font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
	font-family: "Andada Pro";
	src: url(../fonts/andadapro_n5.woff2) format("woff2"),
	     url(../fonts/andadapro_n5.woff) format("woff");
	font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Andada Pro";
	src: url(../fonts/andadapro_n7.woff2) format("woff2"),
	     url(../fonts/andadapro_n7.woff) format("woff");
	font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "simple-line-icons";
	src: url(../fonts/Simple-Line-Icons.woff2) format("woff2"),
	     url(../fonts/Simple-Line-Icons.woff) format("woff");
	font-weight: 400; font-style: normal; font-display: block;
}

/* ============================================================================
   ROOT SIZING — ⚠ READ BEFORE CHANGING
   The source runs html { font-size: 10px }, i.e. a 62.5% root. EVERY rem value
   copied from its stylesheets is therefore ten-pixel-based. Setting this to the
   usual 16px scales the entire site by 1.6x. Measured, not assumed
   (probe home-1440.json -> .html).
   ========================================================================= */
html {
	font-size: 10px;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-family);
	font-size: var(--font-size);                /* 16px */
	font-weight: var(--font-weight);
	line-height: 1.42857;                       /* measured 22.8571px / 16px */
	color: var(--color-body);
	background: var(--color-bg-body);
}

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

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-darken-10); }

/* Headings. Vollkorn is declared exactly as the source declares it and is
   deliberately not loaded — see the note on --font-family-header above. */
h1, h2 { font-family: Vollkorn, serif; }
h1 {
	color: var(--color-heading);
	font-size: 60px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 72px;
	margin: 0 0 16px;
}
h2 {
	color: #ae6816;
	font-size: 28px;
	line-height: 36px;
	margin: 0 0 16px;
}
h3, h4, h5, h6 {
	font-family: var(--font-family-header);
	font-weight: var(--font-weight-header);
	color: var(--color-heading);
	margin: 0 0 12px;
}

/* ---- container + Bootstrap-3-style grid ----
   The theme is Bootstrap-3 based (col-sm-*, col-md-*, row-eq-height), i.e.
   breakpoints 768 / 992 / 1200 — not a CSS-grid theme. Container measures
   1200px at a 1440 viewport (footer col-sm-3 = 300px with padding 0 30px). */
.gr-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}

.gr-row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}
.gr-row > * { padding: 0 15px; }

.gr-col-3  { width: 25%; }
.gr-col-4  { width: 33.3333%; }
.gr-col-6  { width: 50%; }
.gr-col-12 { width: 100%; }

@media (max-width: 991px) {
	.gr-col-3 { width: 50%; }
}
@media (max-width: 767px) {
	.gr-col-3, .gr-col-4, .gr-col-6 { width: 100%; }
}

/* ---- simple-line-icons glyphs used in the header ---- */
[class^="lin-"], [class*=" lin-"] {
	font-family: "simple-line-icons";
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	speak: never;
	-webkit-font-smoothing: antialiased;
}
.lin-magnifier::before { content: "\e090"; }
.lin-user::before      { content: "\e005"; }
/* \e04c is simple-line-icons' HANDBAG; the source's cart uses \e04e, BASKET. Two codepoints
   apart, and the handbag reads as a little book at 20px - which is exactly how it looked.
   Verified by reading the computed :before content on both sites, not by eye. */
.lin-basket::before    { content: "\e04e"; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.gr-skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 1000;
	padding: 10px 16px; background: #fff; color: var(--color-heading);
}

/* ---- source-authored content ----
   The product descriptions and page copy come from the source's body_html and contain long
   unbreakable strings (model numbers, serials, URLs) inside <b>/<strong>. One of them pushed the
   PDP 1px past the viewport at 390. Let long words break rather than widen the document. */
.gr-tabpanel,
.gr-entry,
.gr-archive-desc {
	overflow-wrap: break-word;
	word-wrap: break-word;
}
.gr-tabpanel img,
.gr-entry img { max-width: 100%; height: auto; }