/* ============================================================
   TRINITI — design system
   Палитра: Graphite + Ivory + точечный Bordeaux. Serif: Newsreader.
   Коды люкса: border-radius:0, широкий трекинг капсом, медленные переходы,
   hover = подчёркивание тон-в-тон (не заливка).
   ============================================================ */

/* ---- Fonts (self-hosted, ITI lesson: не зависеть от Google в РФ) ---- */
@font-face { font-family:"Newsreader"; src:url("/static/fonts/Newsreader-Light.cf06d07a59ee.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Newsreader"; src:url("/static/fonts/Newsreader-Regular.300438db78f5.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Newsreader"; src:url("/static/fonts/Newsreader-Medium.b7b2499a92fc.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Newsreader"; src:url("/static/fonts/Newsreader-SemiBold.1ba1c831b48e.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Newsreader"; src:url("/static/fonts/Newsreader-Bold.fd02f72674f0.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

:root{
  /* palette */
  --ivory:#F4EFE6;        /* фон, никогда не чистый белый */
  --paper:#FCFAF5;        /* контрастная подложка */
  --parchment:#EDE6D8;    /* карточки-паспарту */
  --graphite:#1A1A1A;     /* текст/лого */
  --onyx:#0E0E0E;         /* hero/футер */
  --stone:#9B968C;        /* второстепенный текст/линии */
  --bordeaux:#5A1A2B;     /* единственный акцент, ≤5% площади */
  --line:#D9D2C5;

  /* type */
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --ui:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* metrics */
  --maxw:1440px;
  --gutter:clamp(20px, 5vw, 80px);
  --header-h:84px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--ivory); color:var(--graphite);
  font-family:var(--serif); font-weight:400; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
hr{border:0; border-top:1px solid var(--line); margin:0;}

/* ---- type scale ---- */
h1,h2,h3,h4{font-weight:400; margin:0 0 .5em; letter-spacing:.02em;}
.display{
  font-weight:300; line-height:1.05; letter-spacing:.06em; text-transform:uppercase;
  font-size:clamp(2.4rem, 6vw, 5rem);
}
.eyebrow{
  font-family:var(--ui); font-size:.72rem; font-weight:500; letter-spacing:.28em;
  text-transform:uppercase; color:var(--stone);
}
.section-title{font-size:clamp(1.6rem,3vw,2.6rem); letter-spacing:.14em; text-transform:uppercase; font-weight:300;}
.lead{font-size:1.15rem; color:#3a3a3a;}
.muted{color:var(--stone);}

/* ---- layout ---- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter);}
.section{padding-block:clamp(48px, 8vw, 120px);}
.section--tight{padding-block:clamp(32px,5vw,64px);}
.grid{display:grid; gap:clamp(16px,2.5vw,40px);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }

/* ---- buttons / links ---- */
.btn{
  display:inline-block; font-family:var(--ui); font-size:.74rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; padding:15px 32px; cursor:pointer;
  border:1px solid var(--graphite); background:transparent; color:var(--graphite);
  transition:background .6s var(--ease), color .6s var(--ease); border-radius:0;
}
.btn:hover{background:var(--graphite); color:var(--ivory);}
.btn--light{border-color:var(--ivory); color:var(--ivory);}
.btn--light:hover{background:var(--ivory); color:var(--graphite);}
.btn--solid{background:var(--graphite); color:var(--ivory);}
.btn--solid:hover{background:var(--bordeaux); border-color:var(--bordeaux);}
.link-underline{
  font-family:var(--ui); font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  border-bottom:1px solid currentColor; padding-bottom:3px; transition:opacity .4s;
}
.link-underline:hover{opacity:.6;}

/* ---- header (Goyard-style: centered lock-up, transparent over hero) ---- */
.site-header{
  position:sticky; top:0; z-index:50; background:var(--ivory); border-bottom:1px solid var(--line);
  transition:background .45s var(--ease), border-color .45s var(--ease);
}
/* home (has-hero): fixed overlay, transparent at top, solid on scroll (#4) */
body.has-hero .site-header{ position:fixed; top:0; left:0; right:0; background:transparent; border-bottom-color:transparent; }
body.has-hero .site-header.is-scrolled{ background:var(--ivory); border-bottom-color:var(--line); }

.header-inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:16px;
  padding-block:16px; min-height:var(--header-h); }
.header-side{ display:flex; align-items:center; }
.header-left{ justify-content:flex-start; }
.header-right{ justify-content:flex-end; gap:22px; }
.header-center{ display:flex; flex-direction:column; align-items:center; gap:12px; }

.brand{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.brand .brand-name{ font-size:clamp(1.25rem,2.3vw,1.65rem); letter-spacing:.42em; text-transform:uppercase; padding-left:.42em; color:var(--graphite); }
.brand .brand-tag{ font-family:var(--ui); font-size:.6rem; font-weight:500; letter-spacing:.34em; text-transform:uppercase; color:var(--graphite); margin-top:7px; opacity:.9; } /* #5 — заметнее */
.brand .brand-logo{ height:34px; width:auto; }

.nav{ display:flex; gap:clamp(18px,2.4vw,40px); align-items:center; }
.nav a{ font-family:var(--ui); font-size:.74rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--graphite); padding:5px 0; position:relative; white-space:nowrap; }
.nav a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:currentColor; transition:width .5s var(--ease); }
.nav a:hover::after{ width:100%; }
.header-icons a{ font-family:var(--ui); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--graphite); display:inline-flex; align-items:center; min-height:44px; }

/* nav-row collapses on scroll (#4) */
.header-center .nav{ max-height:48px; opacity:1; transition:max-height .45s var(--ease), opacity .3s var(--ease); }
body.has-hero .site-header.is-scrolled .header-center .nav{ max-height:0; opacity:0; overflow:hidden; pointer-events:none; }

/* transparent-over-hero → light text */
body.has-hero .site-header:not(.is-scrolled) .brand .brand-name,
body.has-hero .site-header:not(.is-scrolled) .brand .brand-tag,
body.has-hero .site-header:not(.is-scrolled) .nav a,
body.has-hero .site-header:not(.is-scrolled) .header-icons a{ color:var(--ivory); }
body.has-hero .site-header:not(.is-scrolled) .nav-toggle span{ background:var(--ivory); }

/* hamburger */
.nav-toggle{ display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px; background:none; border:0; cursor:pointer; padding:0; }
.nav-toggle span{ display:block; width:22px; height:1.5px; background:var(--graphite); transition:background .4s; }
/* show menu button on desktop home once scrolled (nav hidden) */
body.has-hero .site-header.is-scrolled .nav-toggle{ display:flex; }

@media(max-width:1080px){
  .nav{ display:none; }
  .nav-toggle{ display:flex; }
  .header-center{ gap:0; }
  .brand .brand-name{ font-size:1.15rem; letter-spacing:.34em; }
}

/* ---- mobile nav drawer ---- */
.mobile-nav{ position:fixed; top:0; right:0; bottom:0; width:min(420px,86vw); background:var(--ivory); z-index:70;
  transform:translateX(100%); transition:transform .5s var(--ease); padding:84px var(--gutter) 40px; overflow:auto; }
.mnav-overlay{ position:fixed; inset:0; background:rgba(14,14,14,.45); opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; z-index:65; }
body.mnav-open{ overflow:hidden; }
body.mnav-open .mobile-nav{ transform:translateX(0); }
body.mnav-open .mnav-overlay{ opacity:1; visibility:visible; }
.mobile-nav-brand{ font-size:1.2rem; letter-spacing:.34em; text-transform:uppercase; padding-left:.34em; margin-bottom:24px; display:flex; flex-direction:column; gap:6px; }
.mobile-nav-brand span{ font-family:var(--ui); font-size:.58rem; letter-spacing:.3em; color:var(--stone-text); }
.mobile-nav a{ display:block; font-size:1.15rem; letter-spacing:.1em; text-transform:uppercase; padding:15px 0; border-bottom:1px solid var(--line); }
.mobile-nav .close{ position:absolute; top:24px; right:var(--gutter); font-size:1.6rem; background:none; border:0; cursor:pointer; }

/* ---- hero (full screen, covers under the transparent header) ---- */
.hero{position:relative; min-height:100vh; min-height:100svh; display:flex; background:var(--onyx); color:var(--ivory); overflow:hidden;}
.hero video,.hero .hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.94;}
.hero-veil{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(14,14,14,.34) 0%, rgba(14,14,14,.08) 34%, rgba(14,14,14,.58) 100%);}
.hero-content{position:relative; z-index:2; width:100%; align-self:flex-end; padding-top:calc(var(--header-h) + 24px); padding-bottom:clamp(60px,10vh,128px);}
.hero .eyebrow{color:rgba(244,239,230,.78); margin-bottom:1rem;}
.hero .display{white-space:pre-line; color:var(--ivory);}
.hero-sub{font-size:1.05rem; color:rgba(244,239,230,.82); margin:.4rem 0 1.7rem; max-width:540px;}
/* #6 — положение блока (управляется из админки hero_align) */
.hero--left .hero-content{text-align:left;}
.hero--center .hero-content{align-self:center; text-align:center; padding-bottom:0;}
.hero--center .hero-sub{margin-left:auto; margin-right:auto;}
.hero--right .hero-content{text-align:right;}
.hero--right .hero-sub{margin-left:auto;}
/* scroll cue */
.hero-scroll{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); width:25px; height:40px; border:1px solid rgba(244,239,230,.5); border-radius:14px; z-index:3;}
.hero-scroll::after{content:""; position:absolute; left:50%; top:8px; width:2px; height:8px; background:var(--ivory); transform:translateX(-50%); animation:scrollcue 1.8s infinite;}
@keyframes scrollcue{0%{opacity:0; transform:translate(-50%,0)} 35%{opacity:1} 65%{opacity:1; transform:translate(-50%,9px)} 100%{opacity:0; transform:translate(-50%,13px)}}
@media(prefers-reduced-motion:reduce){ .hero-scroll::after{animation:none;} }

/* ---- product / editorial cards ---- */
.card{display:block; background:transparent;}
.card .media{position:relative; aspect-ratio:3/4; background:var(--parchment); overflow:hidden;}
.card .media img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease);}
.card:hover .media img{transform:scale(1.04);}
.card .title{margin-top:16px; font-size:1.05rem; letter-spacing:.04em;}
.card .price{font-family:var(--ui); font-size:.8rem; letter-spacing:.1em; color:var(--stone); margin-top:4px;}
.tag{position:absolute; top:14px; left:14px; font-family:var(--ui); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; background:var(--ivory); color:var(--graphite); padding:5px 10px; z-index:2;}

/* placeholder media (нет фото) — фирменный паттерн ихтиса */
.ph{display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  background:repeating-linear-gradient(135deg, var(--parchment), var(--parchment) 22px, #e7dfcf 22px, #e7dfcf 44px);}
.ph span{font-family:var(--ui); font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--stone); background:var(--ivory); padding:6px 12px;}

/* ---- split feature block ---- */
.feature{display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:60vh;}
.feature .media{background:var(--parchment); min-height:50vh;}
.feature .body{display:flex; flex-direction:column; justify-content:center; padding:clamp(32px,6vw,90px);}
.feature--reverse .media{order:2;}
@media(max-width:840px){ .feature{grid-template-columns:1fr;} .feature--reverse .media{order:0;} }

/* ---- PDP gallery ---- */
.pdp{display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(24px,4vw,72px);}
@media(max-width:900px){ .pdp{grid-template-columns:1fr;} }
.gallery .main{aspect-ratio:1/1; background:var(--parchment); cursor:zoom-in; overflow:hidden;}
.gallery .main img{width:100%; height:100%; object-fit:cover;}
.gallery .thumbs{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap;}
.gallery .thumbs img{width:72px; height:72px; object-fit:cover; background:var(--parchment); cursor:pointer; opacity:.6; transition:opacity .3s;}
.gallery .thumbs img.active,.gallery .thumbs img:hover{opacity:1;}
.swatches{display:flex; gap:10px; margin:18px 0;}
.swatch{width:26px; height:26px; border-radius:50%; border:1px solid var(--line); cursor:pointer; position:relative;}
.swatch.active{box-shadow:0 0 0 1px var(--ivory), 0 0 0 2px var(--graphite);}

/* lightbox */
.lightbox{position:fixed; inset:0; background:rgba(14,14,14,.94); z-index:100; display:none; align-items:center; justify-content:center;}
.lightbox.open{display:flex;}
.lightbox img{max-width:92vw; max-height:92vh; object-fit:contain;}
.lightbox .close{position:absolute; top:24px; right:32px; color:var(--ivory); font-size:2rem; background:none; border:0; cursor:pointer;}

/* ---- forms ---- */
label{font-family:var(--ui); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); display:block; margin-bottom:6px;}
input,select,textarea{width:100%; font-family:var(--serif); font-size:1rem; padding:13px 14px; border:1px solid var(--line); background:var(--paper); border-radius:0; color:var(--graphite);}
input:focus,select:focus,textarea:focus{border-color:var(--graphite);}
.field{margin-bottom:20px;}
.form-narrow{max-width:540px;}

/* ---- footer (centered columns + central mark, #9) ---- */
.site-footer{background:var(--onyx); color:var(--ivory); padding-block:clamp(56px,8vw,104px); text-align:center;}
.site-footer a{color:var(--ivory);}
.footer-cols{display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(36px,8vw,110px);}
.footer-col{text-align:center; min-width:150px;}
.footer-col h4{font-family:var(--ui); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--stone); margin-bottom:18px;}
.footer-col a{display:block; font-size:.95rem; padding:6px 0; opacity:.82; transition:opacity .3s;}
.footer-col a:hover{opacity:1;}
.footer-mark{margin-top:clamp(46px,7vw,80px); display:flex; flex-direction:column; align-items:center; gap:18px;}
.footer-mark img{height:clamp(46px,7vw,74px); width:auto;}
.footer-wordmark{display:flex; flex-direction:column; align-items:center; gap:8px;}
.footer-wordmark .brand-name{font-size:1.5rem; letter-spacing:.4em; text-transform:uppercase; color:var(--ivory); padding-left:.4em;}
.footer-wordmark .brand-tag{font-family:var(--ui); font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:var(--stone);}
.footer-social{display:flex; gap:22px; justify-content:center;}
.footer-bottom{margin-top:46px; padding-top:24px; border-top:1px solid rgba(244,239,230,.15); font-family:var(--ui); font-size:.7rem; letter-spacing:.1em; color:var(--stone); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
@media(max-width:600px){ .footer-bottom{justify-content:center; text-align:center;} }

/* ---- messages ---- */
.messages{position:fixed; top:calc(var(--header-h) + 14px); right:var(--gutter); z-index:80; display:flex; flex-direction:column; gap:10px;}
.msg{font-family:var(--ui); font-size:.8rem; letter-spacing:.04em; background:var(--graphite); color:var(--ivory); padding:14px 20px; max-width:340px;}
.msg.success{background:var(--bordeaux);}
.msg.error{background:#7a2020;}

/* ---- breadcrumbs ---- */
.crumbs{font-family:var(--ui); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); padding-block:18px;}
.crumbs a:hover{color:var(--graphite);}

/* reveal */
[data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
[data-reveal].vis, .no-js [data-reveal]{opacity:1; transform:none;}

/* ============================================================
   REVIEW FIXES (adversarial code-review pass)
   ============================================================ */
:root{ --stone-text:#6B675E; }  /* #19: AA-contrast grey for text on light bg */

/* #11/#18 — screen-reader-only utility (hides colour-name text inside swatches) */
.visually-hidden{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;}

/* #16/#18 — swatch active ring works for both class names; hide nested radio in configurator */
.swatch.active, .swatch.is-active{box-shadow:0 0 0 1px var(--ivory), 0 0 0 2px var(--graphite);}
.swatch input[type=radio]{position:absolute; opacity:0; width:0; height:0; margin:0; pointer-events:none;}

/* #17 — kill grid-child min-width:auto so .feature can't overflow viewport @393 */
.feature>*{min-width:0;}
.feature .body{overflow-wrap:anywhere;}
.pdp>*{min-width:0;}
.display{overflow-wrap:break-word;}

/* #19 — apply AA grey to text on light backgrounds (footer keeps light --stone on onyx) */
.muted, .card .price, .crumbs, .eyebrow, .brand-tag, .ph span, label{color:var(--stone-text);}

/* #20 — visible keyboard focus (was globally removed) */
:focus-visible{outline:2px solid var(--graphite); outline-offset:2px;}
.btn--light:focus-visible, .site-footer :focus-visible{outline-color:var(--ivory);}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--graphite); outline-offset:2px;}
.swatch:focus-visible{outline:none; box-shadow:0 0 0 1px var(--ivory), 0 0 0 2px var(--graphite);}

/* #21 — touch targets ≥44px (icons, burger, swatch hit-area) */
.header-icons a{display:inline-flex; align-items:center; min-height:44px; padding:0 6px;}
.burger{min-width:44px; min-height:44px;}
.swatch{position:relative;}
.swatch::after{content:""; position:absolute; inset:-8px;}

/* #12 — responsive data tables (account/dashboard) — contain scroll to the table */
.table{width:100%; border-collapse:collapse;}
.table th, .table td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); font-size:.92rem;}
.table th{font-family:var(--ui); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--stone-text);}
@media(max-width:560px){ .table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap;} }

/* #22 — PDP layout helpers (actions / info blocks / meta dl) */
.pdp-actions{display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 28px;}
.pdp-block{margin-top:24px;}
.pdp-block .eyebrow{margin-bottom:8px;}
.pdp-meta{margin-top:28px; display:grid; gap:6px;}
.pdp-meta div{display:flex; gap:8px;}
.pdp-meta dt{min-width:130px; color:var(--stone-text);}
.pdp-meta dd{margin:0;}

/* LOW #11 — messages never wider than viewport on small screens */
@media(max-width:560px){ .messages{left:var(--gutter); right:var(--gutter); max-width:none;} .msg{max-width:none;} }

/* ============================================================
   CLIENT FEEDBACK PASS (Goyard-parity revisions)
   ============================================================ */

/* #7 — Gazette: left static feature + right slidable carousel */
.gazette-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(24px,4vw,64px); align-items:stretch; margin-top:28px;}
@media(max-width:900px){ .gazette-grid{grid-template-columns:1fr;} }
.gazette-feature{position:relative; display:block; aspect-ratio:3/4; background:var(--parchment); overflow:hidden;}
.gazette-feature img,.gazette-feature .ph{width:100%; height:100%; object-fit:cover;}
.gazette-feature-cap{position:absolute; left:0; right:0; bottom:0; padding:24px; display:flex; flex-direction:column; gap:6px;
  background:linear-gradient(180deg, transparent, rgba(14,14,14,.72)); color:var(--ivory);}
.gazette-feature-cap .eyebrow{color:rgba(244,239,230,.8);}
.gazette-feature-cap .gf-title{font-size:1.4rem; letter-spacing:.04em;}
.gazette-feature-cap .muted{color:rgba(244,239,230,.75);}

.gazette-carousel{position:relative; overflow:hidden; background:var(--parchment);}
.gz-track{display:flex; transition:transform .6s var(--ease); height:100%;}
.gz-slide{position:relative; flex:0 0 100%; aspect-ratio:4/3;}
@media(max-width:900px){ .gz-slide{aspect-ratio:4/3;} }
.gz-slide img,.gz-slide .ph{width:100%; height:100%; object-fit:cover;}
.gz-cap{position:absolute; left:0; right:0; bottom:0; padding:18px 20px; color:var(--ivory);
  background:linear-gradient(180deg, transparent, rgba(14,14,14,.7)); font-size:.95rem; letter-spacing:.02em;}
.gz-arrow{position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border:0; cursor:pointer;
  background:rgba(244,239,230,.85); color:var(--graphite); font-size:1.5rem; line-height:1; z-index:3;
  display:flex; align-items:center; justify-content:center; transition:background .3s;}
.gz-arrow:hover{background:var(--ivory);}
.gz-prev{left:14px;} .gz-next{right:14px;}

/* #8 — Boutiques CTA centered */
.boutiques-cta{background:var(--onyx); color:var(--ivory); text-align:center;}
.boutiques-cta .eyebrow{color:rgba(244,239,230,.7);}
.boutiques-cta .lead{color:rgba(244,239,230,.84); max-width:620px; margin-inline:auto;}
.boutiques-cta .btn{margin-top:8px;}
.boutiques-list{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 34px; margin-top:34px;}
.boutiques-list a{color:var(--ivory);}

/* #11 — Make it personal video */
.media-video{width:100%; height:100%; object-fit:cover; display:block; background:var(--onyx);}
.feature .media{position:relative; overflow:hidden;}

/* #15 — Login split (form left, media right) */
.auth-split{display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - var(--header-h));}
.auth-split .auth-form{display:flex; flex-direction:column; justify-content:center; padding:clamp(40px,7vw,110px);}
.auth-split .auth-media{position:relative; background:var(--parchment); overflow:hidden;}
.auth-split .auth-media img,.auth-split .auth-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.auth-split .auth-media .ph{width:100%; height:100%;}
@media(max-width:840px){ .auth-split{grid-template-columns:1fr;} .auth-split .auth-media{display:none;} }

/* wholesale (Maison) callout */
.wholesale-cta{margin-top:40px; padding:clamp(28px,4vw,52px); background:var(--paper); border:1px solid var(--line); text-align:center;}
.wholesale-cta .section-title{margin-bottom:14px;}
.wholesale-cta .lead{max-width:640px; margin:0 auto 24px;}

/* keep hero media from inheriting object glitches; smooth ken-burns on load */
@media(prefers-reduced-motion:no-preference){
  .hero .hero-img{animation:kenburns 18s ease-out forwards;}
}
@keyframes kenburns{from{transform:scale(1.06);}to{transform:scale(1);}}

/* ============================================================
   CLIENT REVISION v2 (13.06)
   ============================================================ */

/* #2 — две кнопки в hero; retail-кнопка залита ivory */
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(20px,3vw,32px);}
.btn--fill{background:var(--ivory); color:var(--graphite); border-color:var(--ivory);}
.btn--fill:hover{background:transparent; color:var(--ivory);}

/* #4 — изображение/видео ВСЕГДА заполняет media (нет «полоски» паспарту при зуме) */
.feature .media{display:flex; align-items:stretch; overflow:hidden;}
.feature .media > *{width:100%;}
.feature .media a{display:block;}
.feature .media img, .feature .media video, .block-video{width:100%; height:100%; object-fit:cover; display:block;}
.feature .media .ph{flex:1; min-height:100%;}

/* #3 — видео в контент-блоках ведёт себя как фото */
.block-video{background:var(--parchment);}

/* #1 — «Новые поступления» на мобиле: горизонтальная лента (свайп), не длинная колонка */
@media(max-width:760px){
  .newitems-grid{display:flex !important; grid-template-columns:none; overflow-x:auto;
    scroll-snap-type:x mandatory; gap:14px; -webkit-overflow-scrolling:touch;
    padding-bottom:10px; margin-inline:calc(var(--gutter)*-1); padding-inline:var(--gutter);}
  .newitems-grid > *{flex:0 0 68%; scroll-snap-align:start;}
  .newitems-grid::-webkit-scrollbar{height:2px;}
  .newitems-grid::-webkit-scrollbar-thumb{background:var(--line);}
}

/* #7 — блок контактов на странице «Сотрудничество» */
.contacts-block{border-top:1px solid var(--line); padding-top:clamp(28px,4vw,40px);}
.contacts-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:24px; margin-top:22px;}
.contacts-grid a{display:flex; flex-direction:column; gap:6px;}
.ct-label{font-family:var(--ui); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--stone-text);}
.ct-val{font-size:1.18rem; transition:color .4s var(--ease);}
.contacts-grid a:hover .ct-val{color:var(--bordeaux);}
.coop-form .form-narrow{margin-top:24px;}

/* fix (15.06): текст блоков не капсом и с сохранением абзацев/переносов
   — даже если .lead вложен в .display (savoir_faire, symbol, content, maison) */
.lead{ text-transform:none; letter-spacing:normal; white-space:pre-line; }

/* FAQ-аккордеон (страница «Сотрудничество») */
.faq{max-width:840px; margin-top:26px; border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{list-style:none; cursor:pointer; padding:20px 40px 20px 0; position:relative;
  font-family:var(--serif); font-size:1.12rem; letter-spacing:.01em;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%);
  font-family:var(--ui); font-size:1.4rem; color:var(--stone-text); transition:transform .4s var(--ease);}
.faq-item[open] summary::after{content:"\2212";}
.faq-answer{padding:0 0 22px; color:var(--stone-text); line-height:1.65; max-width:700px; white-space:normal;}
.faq-answer p{margin:0 0 .6em;}