/* Homepage — approved "Option 3" (warm architectural). Loaded ONLY by index.html; every rule is scoped to
   body.home3 or to h3-* classes, so no other page can change. Ported from the handoff's reference
   styles.css (breakpoints 1800 / 1180 / 900 / 600) onto the site's real header, search, inquiry list and footer.
   Fonts: the site's own Cormorant + Hanken Grotesk woff2 (byte-identical to the handoff's latin files, plus the
   latin-ext subset for "Studeničani"). */

/* ---------- page palette: Option 3, pinned light (the design has no dark variant) ---------- */
body.home3{
  --bg:#faf9f5;--surface:#ffffff;--plate:#f0efea;--plate-2:#e8e6df;
  --ink:#171715;--ink-2:#565752;--ink-3:#6a6b65;
  --line:#dcdad4;--line-2:#cbcbbf;
  --accent:#d0002b;--accent-hover:#b50025;--accent-ink:#ffffff;--accent-soft:#fbebed;
  --accent-bg:#d0002b;--accent-bg-hover:#b50025;
  --scrim:rgba(28,29,25,.48);
  color-scheme:light;
  background:#faf9f5;color:#171715;
}
.home3 [data-theme-toggle]{display:none}                       /* no dark version of this design */
.home3 :focus-visible{outline:2px solid #d0002b;outline-offset:4px}
.home3 h1,.home3 h2{margin:0}
.h3-red{color:#d0002b}

/* ---------- header (the site's real header, restyled for this page) ---------- */
.home3 .hd{background:rgba(250,249,245,.98);border-bottom:1px solid #e4e1da;color:#171715}
.home3 .hd-in{max-width:none;height:70px;padding-inline:4.25%;gap:40px}
.home3 .logo{font:400 29px/1 Georgia,"Times New Roman",serif;letter-spacing:.16em;white-space:nowrap}
.home3 .logo b{color:#d0002b;letter-spacing:0;font-weight:400}
.home3 .nav{gap:36px;margin-left:28px;margin-right:auto}
.home3 .nav a,.home3 .nav button{font:400 15px/1 var(--sans);color:#171715;padding:8px 0;position:relative;text-decoration:none}
.home3 .nav a[href="wholesale-europe.html"]{display:none}       /* the design has four items; Wholesale stays in the menu panel + footer */
.home3 .hd-tools{gap:14px}
.home3 .hd-login{font-size:14px}
.home3 .hd .btn-primary{border-radius:0;min-height:39px;padding:10px 22px;font:600 14px/1 var(--sans)}

/* ---------- shared buttons / links ---------- */
.h3-btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:14px 27px;
  background:#d0002b;color:#fff;font:600 15px/1.2 var(--sans);text-decoration:none;border:0;border-radius:0;
  transition:background .25s,transform .25s}
.h3-btn:hover{background:#b50025;color:#fff;transform:translateY(-2px)}
.h3-btn-outline{background:rgba(250,249,245,.8);color:#171715;border:1px solid #a7a6a1;font-weight:500}
.h3-btn-outline:hover{background:#fff;color:#171715}
.h3-link{display:inline-flex;align-items:center;gap:10px;font:400 15px/1.3 var(--sans);color:#171715;padding:5px 0;
  border-bottom:1px solid #8d8d86;text-decoration:none;transition:gap .25s}
.h3-link:hover{gap:16px;color:#171715}
.h3-link svg{flex:none}
.h3-eyebrow{display:block;font:600 11px/1.2 var(--sans);letter-spacing:.16em;color:#d0002b;margin-bottom:18px;text-transform:uppercase}
.h3-serif{font-family:var(--serif);font-weight:500;letter-spacing:-.045em;color:#171715}

/* ---------- B. hero ---------- */
.h3-hero{position:relative;height:44.9vw;max-height:870px;min-height:530px;overflow:hidden;background:#eee8de;--mx:0px;--my:0px}
.h3-hero-pic{position:absolute;inset:0;width:100%;height:100%}
.h3-hero-pic img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;
  transform:translate(var(--mx),var(--my)) scale(1.014);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.h3-hero-copy{position:relative;z-index:1;padding-top:7.1vw;padding-left:4.5%;width:46%;pointer-events:none}
.h3-hero-copy>*{pointer-events:auto}
.h3-hero h1{font-size:5.42vw;line-height:1.01}
.h3-hero h1 span{display:block}
.h3-hero-copy p{font:400 1.55vw/1.4 var(--sans);color:#454641;margin:25px 0 0}
.h3-hero-acts{display:flex;gap:12px;margin-top:32px}
.h3-tag{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:8px;
  font:400 12px/1.35 var(--sans);color:#171715;text-decoration:none;background:rgba(250,249,245,.65);transition:background .25s}
.h3-tag:hover{background:rgba(250,249,245,.96);color:#171715}
.h3-tag strong{font-weight:500}
.h3-tag .h3-tag-go{display:flex;gap:5px;align-items:center;margin-top:1px;padding:3px 0;border-bottom:1px solid #85837b}
.h3-tag-basket{left:70.1%;top:29.8%}
.h3-tag-box{right:1.8%;bottom:4.1%}

/* ---------- C. editorial row ---------- */
.h3-life{display:grid;grid-template-columns:1.1fr .84fr 1.05fr;padding:10px 12px 0;background:#faf9f5}
.h3-life-img{display:block;overflow:hidden;height:20.1vw;min-height:235px}
.h3-life-img img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;transition:transform 1s}
.h3-life-img:hover img{transform:scale(1.04)}
.h3-life-copy{padding:3.2vw 3.4vw 2vw}
.h3-life h2{font-size:3.25vw;line-height:.98}
.h3-life-copy p{font:400 1.16vw/1.4 var(--sans);color:#565752;margin:17px 0 0;max-width:275px}
.h3-life .h3-link{margin-top:14px}

/* ---------- D. collection ---------- */
.h3-pad{padding:110px 4.5%}
.h3-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:37px}
.h3-head h2{font-size:59px;line-height:1.05}
.h3-head .h3-link{margin-bottom:7px}
.h3-tools{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;margin-bottom:30px;
  border-top:1px solid #dcdad4;border-bottom:1px solid #dcdad4}
.h3-filters{display:flex;gap:26px}
.h3-filters button{background:none;border:0;border-bottom:1px solid transparent;padding:7px 0;font:400 14px/1.2 var(--sans);color:#6a6b65;cursor:pointer}
.h3-filters button[aria-pressed="true"]{color:#171715;border-bottom-color:#171715}
.h3-count{font:400 12px/1.2 var(--sans);color:#6a6b65}
.h3-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 23px}
.h3-card[hidden]{display:none}
.h3-card-img{display:block;position:relative;aspect-ratio:1/1;background:#f0efea;overflow:hidden}
.h3-card-img img{width:100%;height:100%;object-fit:contain;object-position:50% 50%;mix-blend-mode:multiply;transition:transform .7s}
.h3-card-img:hover img{transform:translateY(-4px) scale(1.03)}
.h3-pill{position:absolute;bottom:15px;right:15px;display:flex;gap:7px;align-items:center;padding:9px 13px;
  font:400 11px/1 var(--sans);background:#faf9f5;color:#171715;opacity:0;transform:translateY(5px);transition:opacity .25s,transform .25s}
.h3-card-img:hover .h3-pill,.h3-card-img:focus-visible .h3-pill{opacity:1;transform:none}
.h3-meta{padding:19px 0 8px}
.h3-sku{display:block;font:400 10px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#6f7068}
.h3-name{display:block;margin:0;padding:6px 0;font:500 28px/1.1 var(--serif);letter-spacing:-.02em}
.h3-name a{color:#171715;text-decoration:none}
.h3-name a:hover{color:#d0002b}
.h3-meta p{font:400 11px/1.6 var(--sans);color:#6f7068;margin:2px 0 12px}
.home3 .h3-meta .pt-add{display:inline-flex;align-items:center;gap:7px;background:none;border:0;border-bottom:1px solid #c4c4ba;
  border-radius:0;padding:5px 0;font:400 12px/1.2 var(--sans);color:#171715;cursor:pointer;min-height:0}
.home3 .h3-meta .pt-add:hover{color:#d0002b}
.home3 .h3-meta .pt-add[aria-pressed="true"]{color:#d0002b;border-bottom-color:#d0002b}
.h3-empty{padding:35px;text-align:center;font:400 14px/1.5 var(--sans)}

/* ---------- E. manufacturing ---------- */
.h3-mfg{display:grid;grid-template-columns:1fr 1fr;background:#eeece5}
.h3-film{position:relative;display:block;width:100%;min-height:540px;overflow:hidden;background:#1a1a18;cursor:pointer;
  border:0;padding:0;margin:0;text-align:left;font:inherit;color:inherit}
.h3-film>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:35% center}
.h3-film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.h3-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;
  display:grid;place-items:center;background:#d0002b;color:#fff;border:0;pointer-events:none;transition:background .2s}
.h3-film:hover .h3-play{background:#ae0024}
.h3-film:focus-visible{outline:2px solid #d0002b;outline-offset:-4px}
.h3-film-cap{position:absolute;left:30px;bottom:26px;padding:10px 15px;font:400 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:#171715;background:rgba(250,249,245,.9)}
.h3-mfg-copy{padding:85px 11%}
.h3-mfg-copy h2{font-size:57px;line-height:1.02}
.h3-mfg-copy>p{font:400 16px/1.65 var(--sans);color:#5f6157;margin:23px 0 0;max-width:390px}
.h3-process{display:flex;gap:30px;margin:30px 0 0;padding:23px 0;border-top:1px solid #cecfc3;list-style:none}
.h3-process li{margin:0}
.h3-process span{display:block;font:400 10px/1 var(--sans);color:#5f6157}
.h3-process b{display:block;font:400 13px/1.3 var(--sans);margin-top:8px}

/* ---------- F. about ---------- */
.h3-about{text-align:center;max-width:1000px;margin:auto;padding-top:110px;padding-bottom:110px}
.h3-about h2{font-size:72px;line-height:1}
.h3-about p{max-width:470px;margin:27px auto 23px;font:400 17px/1.6 var(--sans);color:#5f6157}

/* ---------- G. contact ---------- */
.h3-contact{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:70px;background:#eeece5}
.h3-contact h2{font-size:62px;line-height:1.05}
.h3-contact-copy{max-width:380px;margin-left:auto}
.h3-contact-copy p{font:400 18px/1.6 var(--sans);color:#5c5e54;margin:0 0 25px}

/* ---------- footer: the site's footer on the ivory page ---------- */
.home3 .ft{background:#faf9f5;border-top:1px solid #dcdad4}
.home3 .ft .logo{font-size:24px}

/* ---------- breakpoints (reference cascade) ---------- */
@media (min-width:1800px){
  .h3-hero h1{font-size:98px}.h3-hero-copy{padding-top:140px}.h3-hero-copy p{font-size:26px}
  .h3-life-copy p{font-size:20px}.h3-life h2{font-size:62px}.h3-life-img{max-height:420px}
}
@media (max-width:1180px){
  .home3 .hd-in{gap:20px;padding-inline:3%}.home3 .nav{gap:20px;margin-left:10px}.home3 .hd-tools{gap:8px}
  .h3-hero{min-height:490px}.h3-hero-copy{padding-top:75px}.h3-hero-copy p{font-size:19px}
  .h3-hero-acts .h3-btn{padding:13px 22px;font-size:14px;min-height:48px}.h3-tag{font-size:10px}
  .h3-life-copy{padding:32px 27px}.h3-life-copy p{font-size:14px}.h3-life h2{font-size:43px}.h3-life .h3-link{font-size:13px}
  .h3-pad{padding:85px 4.5%}.h3-mfg-copy{padding:65px 9%}.h3-mfg-copy h2{font-size:48px}.h3-film{min-height:500px}
  .h3-contact h2{font-size:51px}.h3-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .home3 .hd-in{height:66px;padding-inline:24px}.home3 .logo{font-size:25px}
  .h3-hero{min-height:460px}.h3-hero-copy{width:48%;padding-top:80px}.h3-hero h1{font-size:6vw}.h3-hero-copy p{font-size:16px}
  .h3-hero-acts{gap:8px;margin-top:22px}.h3-hero-acts .h3-btn{font-size:12px;padding:12px 16px;min-height:45px}
  .h3-tag{font-size:9px}.h3-tag-basket{left:68%;top:19%}.h3-tag-box{right:3%;bottom:5%}
  .h3-life{grid-template-columns:1fr 1fr;padding:12px;gap:12px}.h3-life-copy{grid-column:2;grid-row:1;padding:35px 24px}
  .h3-life .h3-life-detail{display:none}.h3-life-img{height:32vw}.h3-life h2{font-size:49px}.h3-life-copy p{font-size:15px}
  .h3-head h2{font-size:46px}.h3-head .h3-link{font-size:12px}
  .h3-mfg{grid-template-columns:1fr}.h3-film{height:400px;min-height:0}.h3-mfg-copy{padding:65px 8%}.h3-mfg-copy h2{font-size:60px}
  .h3-contact{gap:30px}.h3-contact h2{font-size:46px}.h3-contact-copy p{font-size:16px}
}
@media (max-width:600px){
  .home3 .hd-in{height:64px;padding-inline:20px}.home3 .logo{font-size:24px}
  .h3-hero{height:auto;max-height:none;min-height:0;display:flex;flex-direction:column;background:#faf9f5}
  .h3-hero-copy{order:0;width:100%;padding:46px 24px 31px}
  .h3-hero h1{font-size:54px;line-height:.98;letter-spacing:-.05em}
  .h3-hero-copy p{font-size:17px;line-height:1.45;margin-top:20px;max-width:310px}
  .h3-hero-acts{margin-top:26px;gap:10px}.h3-hero-acts .h3-btn{font-size:13px;min-height:48px;padding:13px 20px}
  .h3-hero-pic{position:relative;order:1;height:340px}
  .h3-hero-pic img{transform:none;object-position:50% center}
  .h3-tag{display:none}
  .h3-life{grid-template-columns:1fr;padding:24px 20px 0;gap:0}
  .h3-life-img{height:250px;grid-column:1;grid-row:1}
  .h3-life-copy{grid-column:1;grid-row:2;padding:30px 4px 10px}
  .h3-life h2{font-size:48px;line-height:1.01}.h3-life h2 br{display:none}
  .h3-life-copy p{max-width:320px;font-size:16px;line-height:1.5;margin-top:16px}.h3-life .h3-link{font-size:14px;margin-top:18px}
  .h3-pad{padding:65px 24px}.h3-head{display:block;margin-bottom:26px}.h3-eyebrow{font-size:10px;margin-bottom:15px}
  .h3-head h2{font-size:45px;line-height:1.03}.h3-head .h3-link{font-size:13px;margin-top:22px}
  .h3-tools{display:block;margin-bottom:24px}.h3-filters{gap:19px;overflow-x:auto;padding-bottom:3px}
  .h3-filters button{white-space:nowrap;font-size:12px}.h3-count{display:block;margin-top:14px;font-size:11px}
  .h3-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 14px}
  .h3-meta{padding-top:13px}.h3-name{font-size:24px}.h3-sku{font-size:9px;letter-spacing:.03em}.h3-meta p{font-size:10px;margin-bottom:7px}
  .h3-pill{display:none}.home3 .h3-meta .pt-add{font-size:11px}
  .h3-film{height:300px}.h3-film-cap{left:20px;bottom:20px;font-size:9px;padding:9px 12px}
  .h3-mfg-copy{padding:45px 24px 50px}.h3-mfg-copy h2{font-size:45px}.h3-process{gap:26px}
  .h3-about h2{font-size:51px}.h3-about p{font-size:16px}
  .h3-contact{display:block}.h3-contact h2{font-size:45px}.h3-contact-copy{margin:27px 0 0}.h3-contact-copy p{font-size:16px}
  .h3-contact-copy .h3-btn{font-size:13px}
}
/* header on tablets: the site switches to the menu button below 1024px; the design keeps the nav to 901px
   and the quote button to 601px (smaller from 900px) */
@media (min-width:901px) and (max-width:1023px){.home3 .nav{display:flex}.home3 .menu-btn{display:none}}
@media (min-width:601px) and (max-width:1023px){.home3 .hd .btn-primary{display:inline-flex;align-items:center}}
@media (min-width:601px) and (max-width:900px){.home3 .hd .btn-primary{font-size:12px;padding:10px 14px;min-height:36px}}
/* phones: as in the design, no trade-login icon in the bar (it stays in the menu panel: "Trade portal login") */
@media (max-width:600px){.home3 .hd-login{display:none}}
/* very narrow phones (320–360px): keep the three-line headline and every heading inside the screen */
@media (max-width:360px){
  .home3 .hd-in{padding-inline:16px}.home3 .logo{font-size:21px;letter-spacing:.14em}
  .h3-hero-copy{padding:40px 20px 28px}.h3-hero h1{font-size:44px}
  .h3-hero-acts .h3-btn{padding:12px 14px;font-size:12px}
  .h3-life h2,.h3-head h2,.h3-mfg-copy h2,.h3-contact h2{font-size:40px}.h3-about h2{font-size:42px}
  .h3-pad{padding-inline:20px}.h3-mfg-copy{padding-inline:20px}
}
@media (prefers-reduced-motion:reduce){
  .h3-hero-pic img{transform:none;transition:none}
  .h3-btn,.h3-link,.h3-life-img img,.h3-card-img img,.h3-pill,.h3-tag{transition:none}
}