/*
Theme Name: Seven
Theme URI: https://dabanny.com
Author: Dabanny
Author URI: https://dabanny.com
Description: Custom WooCommerce catalog theme for THE SEVEN PREMIUM — Paradise Mall. Showroom mode: no cart, no checkout — products are reserved via an enquiry modal. Each WooCommerce product category renders as a "collection" (banner + product grid).
Version: 0.4.3
Requires at least: 6.4
Requires PHP: 8.1
License: Proprietary
Text Domain: seven
*/

/*
 * Palette is strictly monochrome — the brand book (docs/) has no accent colour on any
 * of its 11 pages. Black, white, and photographic greys only. Do not reintroduce a
 * warm/brass accent: contrast IS the accent.
 */
:root{
  --ink:#000;
  --ink-soft:#0d0d0d;
  --paper:#fff;
  --paper-dim:#f2f2f2;
  --stone:#b4b4b4;        /* secondary text on black */
  --stone-deep:#6b6b6b;   /* secondary text on white (5.1:1) */
  --swatch:#fff;          /* ground behind product imagery — see the frame note below */
  --line-dark:rgba(255,255,255,.18);
  --line-light:rgba(0,0,0,.14);
  --disp:'Montserrat',sans-serif;
  --body:'Montserrat',sans-serif;
  --mark:url("assets/img/seven-mark.svg");
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;
  /* iOS inflates text on rotation to landscape unless this is pinned. */
  -webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{font-family:var(--body);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;}
/*
 * Form controls do not inherit the page font in ANY browser — they fall back to
 * whatever that browser picks for UI, which is a different wrong font in each one:
 * Arial in Chrome, the system face in Safari, something else again in Firefox.
 * That was hitting .prod-reserve, the "Запази" button on every product card, and
 * the chat button in the visit block — the two most-clicked things in the shop
 * were the only ones not set in Montserrat. appearance:none stops iOS Safari
 * re-styling them as native controls on top of that.
 */
button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;}
button{-webkit-appearance:none;appearance:none;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
::selection{background:var(--ink);color:var(--paper);}

/*
 * The custom `7` glyph, as a mask so it takes currentColor. Never type a literal "7"
 * in a webfont — Montserrat's 7 is not the brand mark.
 */
.mark{display:inline-block;background-color:currentColor;aspect-ratio:670/1004;
  -webkit-mask:var(--mark) no-repeat center/contain;mask:var(--mark) no-repeat center/contain;}

.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;display:flex;align-items:center;gap:.6rem;}
.eyebrow .num{height:1.05em;}
.eyebrow .bar{width:1px;height:1.1em;background:currentColor;opacity:.5;}
.rule{height:1px;background:var(--line-light);width:100%;margin-top:.9rem;}
.rule.dark{background:var(--line-dark);}
.container{max-width:1180px;margin:0 auto;padding:0 1.4rem;}
@media(min-width:900px){.container{padding:0 3rem;}}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--paper);border-bottom:1px solid var(--line-dark);}
.nav-in{max-width:1180px;margin:0 auto;padding:.85rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.brandmark{display:flex;align-items:center;}
.brandmark svg{height:22px;width:auto;}
@media(min-width:760px){.brandmark svg{height:26px;}}
.brandmark img{height:26px;width:auto;} /* Customizer logo override */
.nav-right{display:flex;align-items:center;gap:1rem;}
.nav-links{display:none;gap:1.8rem;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;list-style:none;}
@media(min-width:760px){.nav-links{display:flex;}}
.nav-links a{opacity:.75;transition:opacity .2s;}
.nav-links a:hover{opacity:1;}
.nav-cta{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;border:1px solid var(--line-dark);padding:.55rem 1rem;transition:background .2s,color .2s;white-space:nowrap;}
.nav-cta:hover{background:var(--paper);color:var(--ink);}
.lang-switch{display:flex;border:1px solid var(--line-dark);overflow:hidden;list-style:none;}
/*
 * Type and vertical padding match .nav-cta exactly so the two sit at the same height:
 * measured 27.9px against the CTA's 33.6px before this, which is small enough to look
 * like a mistake rather than a choice. Horizontal padding stays tighter — "bg"/"en"
 * are two characters and do not need the CTA's width.
 */
.lang-switch a,.lang-switch button{font-family:var(--body);font-size:.7rem;letter-spacing:.12em;font-weight:700;padding:.55rem .8rem;background:transparent;color:var(--stone);border:none;cursor:pointer;transition:background .2s,color .2s;display:block;}
.lang-switch .active,.lang-switch .current-lang a{background:var(--paper);color:var(--ink);}

/* ---------- HERO ---------- */
.hero{background:var(--ink);color:var(--paper);position:relative;overflow:hidden;}
.hero-in{max-width:1180px;margin:0 auto;padding:5.5rem 1.4rem 4.5rem;position:relative;z-index:2;}
@media(min-width:900px){.hero-in{padding:8rem 3rem 6.5rem;}}
.hero .eyebrow{color:var(--stone);margin-bottom:2.6rem;}
.hero-mark{display:flex;}
.hero-logo{width:min(540px,78vw);height:auto;}
.hero-sub{margin-top:2.8rem;max-width:32em;font-size:1.02rem;line-height:1.65;color:var(--stone);font-weight:300;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.6rem;}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:.95rem 1.5rem;border:1px solid transparent;transition:transform .18s ease,background .2s,color .2s,border-color .2s;cursor:pointer;}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--paper);color:var(--ink);}
.btn-primary:hover{background:transparent;color:var(--paper);border-color:var(--paper);}
.btn-ghost{border-color:var(--line-dark);color:var(--paper);background:transparent;}
.btn-ghost:hover{border-color:var(--paper);}
/* Same pair for a light ground — .btn-primary/.btn-ghost only read on black. */
.btn-dark{background:var(--ink);color:var(--paper);}
.btn-dark:hover{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-outline{border-color:var(--line-light);color:var(--ink);background:transparent;}
.btn-outline:hover{border-color:var(--ink);}
.hero-tags{margin-top:3.4rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;padding-top:1.6rem;border-top:1px solid var(--line-dark);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-deep);font-weight:700;}
.hero-tags span{color:var(--stone);}
.hero::after{content:"";position:absolute;right:-4rem;bottom:-8rem;width:22rem;height:33rem;background-color:var(--paper);opacity:.05;pointer-events:none;z-index:1;
  -webkit-mask:var(--mark) no-repeat center/contain;mask:var(--mark) no-repeat center/contain;}

/* ---------- SPLIT PANELS ---------- */
.split{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--line-light);}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr;min-height:520px;}}
.split.rev{direction:rtl;}
.split.rev>*{direction:ltr;}
.split-text{padding:3.4rem 1.4rem;display:flex;flex-direction:column;justify-content:center;}
@media(min-width:900px){.split-text{padding:4rem 4.5rem;}}
.split-text .eyebrow{color:var(--stone-deep);}
/* Deck heading pattern: light word stacked over a heavy word. */
.split-h{font-family:var(--disp);font-weight:800;font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.02;margin:1rem 0 1.5rem;letter-spacing:-.02em;text-transform:uppercase;}
.split-h .light{font-weight:400;display:block;}
.split-text p{font-size:.98rem;line-height:1.7;color:#333;max-width:34em;font-weight:400;}
.split-text p + p{margin-top:1rem;}
.split-foot{margin-top:2.4rem;padding-top:1.1rem;border-top:1px solid var(--line-light);display:flex;justify-content:space-between;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--stone-deep);}
.split-visual{position:relative;min-height:320px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.split-visual.a{background:#000;}
.split-visual.b{background:#0d0d0d;}
.split-visual .glyph{height:14rem;color:var(--paper);opacity:.09;}
/*
 * The panel photo is editorial, not product: it fills the half-screen block, so
 * `cover` is right here even though the product frames must stay `contain`.
 * Greyscale is not a filter effect — the brand book is monochrome, and forcing it
 * means a colour photo uploaded from the Customizer cannot break the palette.
 * The scrim only exists so the two corner labels stay readable on a light photo;
 * over the plain black glyph state it is invisible.
 */
.split-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);z-index:0;}
.split-visual::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0) 34%);}
.split-visual .vtag{position:absolute;z-index:2;bottom:1.4rem;right:1.6rem;font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.6);}
.split-visual .vtag.left{left:1.6rem;right:auto;}

/* ---------- SECTION SHELL ---------- */
.section{padding:4.4rem 0;}
.section-head{padding:0 0 2rem;}
.section-head .eyebrow{color:var(--stone-deep);margin-bottom:1rem;}
.section-h{font-family:var(--disp);font-weight:800;font-size:clamp(2rem,4.6vw,2.9rem);letter-spacing:-.02em;line-height:1.02;text-transform:uppercase;}
.section-p{margin-top:1rem;max-width:36em;color:#444;line-height:1.65;font-size:.95rem;}

/* ---------- QUICK COLLECTIONS NAV ---------- */
.quicknav{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.4rem;}
.quicknav a{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:.55rem 1rem;border:1px solid var(--line-light);transition:all .18s;background:var(--paper);}
.quicknav a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* ---------- COLLECTIONS ---------- */
.collection{border-top:1px solid var(--line-light);scroll-margin-top:64px;}
.collection:last-of-type{border-bottom:1px solid var(--line-light);}
.collection-banner{position:relative;overflow:hidden;color:var(--paper);background:var(--ink);}
.collection-banner.has-image::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.62);z-index:1;}
/* Photography is black & white throughout the brand book. */
.collection-banner .banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);}
.collection-banner-in{position:relative;z-index:2;padding:3.2rem 1.4rem;}
@media(min-width:900px){.collection-banner-in{padding:4.2rem 3rem;}}
.collection-index{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--stone);}
.collection-name{font-family:var(--disp);font-weight:800;font-size:clamp(2.1rem,6vw,3.6rem);letter-spacing:-.02em;line-height:.98;margin:.6rem 0 1rem;text-transform:uppercase;}
.collection-desc{max-width:34em;font-size:.95rem;line-height:1.65;color:var(--stone);font-weight:300;}
.collection-meta{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;padding-top:1.1rem;border-top:1px solid var(--line-dark);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--stone-deep);}
.collection-meta span{color:var(--stone);}
.collection-glyph{position:absolute;font-family:var(--disp);font-weight:800;right:-1.5rem;bottom:-3.5rem;font-size:14rem;line-height:1;color:rgba(255,255,255,.06);pointer-events:none;z-index:1;}
.collection-products{padding:2.4rem 0 .5rem;}

/* ---------- PRODUCTS ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;list-style:none;}
@media(min-width:700px){.prod-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1000px){.prod-grid{grid-template-columns:repeat(4,1fr);}}
.prod-card{background:var(--ink);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease;}
.prod-card:hover{transform:translateY(-3px);}
/*
 * Shared product-image frame — card swatch and detail-page shot are the same object.
 *
 * White ground and `contain`, not the concept's #141414 and `cover`. The concept had
 * no photography at all — every swatch in it was a dark gradient block with a letter
 * on it, so a dark ground cost nothing. Real product shots are cut-out on white and
 * arrive in whatever ratio the supplier photographed them (1500x2000, 682x1023, …),
 * and `cover` cropped each upload by a different amount: the box was locked, the
 * picture inside it was not. `contain` letterboxes into the same locked 4:5 box, so
 * nothing is ever cut off whatever gets uploaded.
 *
 * That makes the hairline load-bearing rather than decorative: a white-background
 * photo has no edge of its own against the white page, so without the border the top
 * of every card dissolves into the background and the grid stops reading as a grid.
 */
.prod-swatch,.pdp-shot{aspect-ratio:4/5;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--swatch);border:1px solid var(--line-light);}
/*
 * The inset is padding on the IMG, not on the frame: an absolutely positioned child
 * is laid out against its ancestor's PADDING box, so padding on .pdp-shot would not
 * move it at all. object-fit:contain fits the content box, so padding here is what
 * actually holds the photo off the hairline. Card gets less than the detail shot —
 * the same rem on a 149px card swatch would eat a tenth of the picture.
 */
.prod-swatch img,.pdp-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:.7rem;}
.pdp-shot img{padding:1.2rem;}
.prod-swatch .letter,.pdp-shot .letter{font-family:var(--disp);font-weight:800;color:rgba(0,0,0,.12);font-size:5.2rem;}
/* Was rgba(255,255,255,.75) — which vanished the moment a white-background photo went in. */
.prod-swatch .prodtag{position:absolute;top:.7rem;left:.7rem;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--stone-deep);z-index:2;}
.prod-body{padding:.95rem 1rem 1.1rem;color:var(--paper);display:flex;flex-direction:column;flex:1;}
.prod-brand{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--stone-deep);}
.prod-name{font-size:.88rem;font-weight:600;margin-top:.3rem;line-height:1.3;}
.prod-price{font-size:.85rem;margin-top:.5rem;color:var(--stone);font-weight:600;}
.prod-reserve{margin-top:auto;width:100%;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:.7rem;border:1px solid var(--line-dark);background:transparent;color:var(--paper);cursor:pointer;transition:background .2s,color .2s;}
.prod-body .prod-reserve{margin-top:.85rem;}
.prod-reserve:hover{background:var(--paper);color:var(--ink);}

/* ---------- PRODUCT DETAIL ---------- */
.pdp-crumbs{padding-top:1.6rem;display:flex;flex-wrap:wrap;gap:.5rem;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--stone-deep);}
.pdp-crumbs a:hover{color:var(--ink);}
.pdp-crumbs [aria-current]{color:var(--ink);}
.pdp-in{display:grid;grid-template-columns:1fr;gap:2.2rem;padding-top:1.8rem;padding-bottom:3.4rem;}
/*
 * A grid item defaults to min-width:auto, so it refuses to shrink below its own
 * min-content — and the widest unbreakable thing in .pdp-info is the product title.
 * "BIRKENSTOCK" at the title's floor size measures 345.6px against a 315.2px column
 * on a 360px phone, so the 1fr track grew to fit the word and pushed the whole page
 * 8px wider than the viewport: the shop saw a scrollbar and the layout shifting
 * sideways. A short-named product on the same template was fine, which is why it
 * looked like the photo's fault.
 */
.pdp-in > *{min-width:0;}
@media(min-width:900px){.pdp-in{grid-template-columns:1.05fr .95fr;gap:3.4rem;padding-top:2.4rem;padding-bottom:5rem;align-items:start;}}

/*
 * Sticky from the two-column breakpoint up, and only there. Single-column mobile
 * looked like it could not sticky at all — one item per grid row, nowhere to travel —
 * but a sticky grid item is constrained by the grid container, not by its own row, so
 * the gallery pinned at top:0 and the whole .pdp-info column scrolled up underneath
 * the photo. Measured at 375px before the fix: gallery frozen at top 0 while the info
 * column went 416 → 216 → 16 → -284.
 */
@media(min-width:900px){.pdp-gallery{position:sticky;top:5.5rem;}}
.pdp-stage{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:var(--swatch);}
.pdp-stage::-webkit-scrollbar{display:none;}
.pdp-shot{scroll-snap-align:start;}
.pdp-shot .letter{font-size:7rem;}
.pdp-thumbs{display:flex;gap:.5rem;margin-top:.5rem;overflow-x:auto;scrollbar-width:none;}
.pdp-thumbs::-webkit-scrollbar{display:none;}
.pdp-thumb{flex:0 0 4.6rem;aspect-ratio:4/5;padding:0;border:1px solid var(--line-light);background:var(--swatch);cursor:pointer;opacity:.5;transition:opacity .2s,border-color .2s;}
.pdp-thumb img{width:100%;height:100%;object-fit:contain;}
.pdp-thumb:hover{opacity:.85;}
.pdp-thumb.is-active{opacity:1;border-color:var(--ink);}

.pdp-info .eyebrow{color:var(--stone-deep);}
.pdp-brand{margin-top:1.6rem;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--stone-deep);}
/*
 * min-width:0 alone only moves the problem: the word then spills out of the column
 * instead of widening it, and the page still scrolls. The floor drops to 1.7rem so
 * the longest brand name in the catalogue fits a 360px screen whole — same two
 * lines as before, just set slightly smaller — and break-word is the last resort
 * for anything longer, so a future product name can never widen the page again.
 */
.pdp-title{font-family:var(--disp);font-weight:800;font-size:clamp(1.7rem,4.4vw,2.8rem);line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;margin:.5rem 0 0;overflow-wrap:break-word;}
.pdp-price{margin-top:1rem;font-size:1.15rem;font-weight:600;}
.pdp-excerpt{margin-top:1.2rem;font-size:.98rem;line-height:1.7;color:#333;max-width:36em;}
.pdp-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem;}
.pdp-actions .btn{flex:1 1 12rem;justify-content:center;}
.pdp-note{margin-top:1rem;font-size:.75rem;line-height:1.6;color:var(--stone-deep);max-width:34em;}
.pdp-specs{margin-top:2.4rem;display:grid;grid-template-columns:auto 1fr;gap:0;border-top:1px solid var(--line-light);}
.pdp-specs dt{padding:.75rem 1.6rem .75rem 0;border-bottom:1px solid var(--line-light);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--stone-deep);}
.pdp-specs dd{padding:.75rem 0;border-bottom:1px solid var(--line-light);font-size:.9rem;}
.pdp-sub{font-family:var(--disp);font-weight:800;font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase;margin-bottom:.9rem;}
.pdp-desc{margin-top:2.4rem;}
.pdp-desc p{font-size:.95rem;line-height:1.7;color:#333;max-width:38em;}
.pdp-desc p + p{margin-top:.9rem;}

.pdp-related{border-top:1px solid var(--line-light);padding:3.4rem 0 4.4rem;}
.pdp-related .section-head{padding-bottom:1.8rem;}
.pdp-related-more{margin-top:2rem;}

/* ---------- VISIT / CHAT STRIP ---------- */
.visit{background:var(--ink);color:var(--paper);}
.visit-in{max-width:1180px;margin:0 auto;padding:4rem 1.4rem;display:grid;grid-template-columns:1fr;gap:2.4rem;}
@media(min-width:900px){.visit-in{grid-template-columns:1.1fr .9fr;padding:5rem 3rem;align-items:center;}}
.visit h3{font-family:var(--disp);font-weight:800;font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.08;letter-spacing:-.02em;text-transform:uppercase;}
.visit p{margin-top:1.1rem;color:var(--stone);line-height:1.65;max-width:32em;font-size:.95rem;font-weight:300;}
.visit-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem;}
.infocard{border:1px solid var(--line-dark);padding:1.8rem;}
.infocard dl{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1rem;font-size:.85rem;}
.infocard dt{color:var(--stone);text-transform:uppercase;letter-spacing:.1em;font-size:.65rem;font-weight:700;padding-top:.15rem;}
.infocard dd{color:var(--paper);font-weight:300;}

/* ---------- FOOTER ---------- */
.site-footer{padding:2.6rem 0 3rem;background:var(--paper);border-top:1px solid var(--line-light);}
.foot-in{max-width:1180px;margin:0 auto;padding:0 1.4rem;display:flex;flex-direction:column;gap:1.6rem;}
@media(min-width:760px){.foot-in{flex-direction:row;justify-content:space-between;align-items:flex-end;padding:0 3rem;}}
.foot-mark svg{height:66px;width:auto;}
.foot-note{font-size:.72rem;color:var(--stone-deep);letter-spacing:.04em;margin-top:1rem;}
.foot-links{display:flex;gap:1.4rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--stone-deep);list-style:none;}

/* ---------- MODAL (enquiry — no cart, no payment) ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:flex-end;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.modal-bg.open{display:flex;}
@media(min-width:640px){.modal-bg{align-items:center;}}
.modal{background:var(--paper);width:100%;max-width:420px;padding:2rem 1.6rem 1.8rem;max-height:88vh;overflow-y:auto;}
@media(min-width:640px){.modal{padding:2.2rem;}}
.modal-close{float:right;background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--stone-deep);line-height:1;}
.modal .eyebrow{color:var(--stone-deep);margin-bottom:.6rem;}
.modal h4{font-family:var(--disp);font-weight:800;font-size:1.35rem;margin-bottom:.3rem;letter-spacing:-.02em;text-transform:uppercase;}
.modal .mprod{font-size:.85rem;color:#444;margin-bottom:1.4rem;}
.field{margin-bottom:1rem;}
.field label{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--stone-deep);margin-bottom:.4rem;}
.field input,.field textarea{width:100%;padding:.75rem .85rem;border:1px solid var(--line-light);font-family:var(--body);font-size:.9rem;background:#fff;}
.field input:focus,.field textarea:focus{outline:2px solid var(--ink);outline-offset:1px;}
.field textarea{resize:vertical;min-height:70px;}
.modal-submit{width:100%;margin-top:.4rem;background:var(--ink);color:var(--paper);padding:.95rem;border:1px solid var(--ink);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:background .2s,color .2s;}
.modal-submit:hover{background:var(--paper);color:var(--ink);}
.modal-submit[disabled]{opacity:.6;cursor:wait;}
.modal-note{margin-top:1rem;font-size:.72rem;color:var(--stone-deep);line-height:1.5;}
.modal-error{display:none;margin-top:.8rem;font-size:.78rem;color:#b00020;}
.modal-error.show{display:block;}
.success{display:none;text-align:center;padding:1.4rem 0;}
.success.show{display:block;}
.success .num{display:block;height:2.6rem;margin:0 auto .8rem;}
.success p{font-size:.9rem;color:#444;line-height:1.6;}

/* ---------- GENERIC INNER PAGES ---------- */
.page-plain{padding:4rem 0 5rem;}
.page-plain h1{font-family:var(--disp);font-weight:800;font-size:clamp(2rem,4.6vw,2.9rem);margin-bottom:1.6rem;letter-spacing:-.02em;text-transform:uppercase;}
.page-plain .entry-content p{max-width:40em;line-height:1.7;color:#333;margin-bottom:1rem;}

.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:2px;}
@media (prefers-reduced-motion: reduce){*{transition:none !important;scroll-behavior:auto !important;}}