@charset "UTF-8";
/* ==========================================================================
   Primarosa Flowers Ltd - Shared Stylesheet
   ========================================================================== */

:root{
  --ui-rev:5;
  --green-950:#0e1f18;
  --green-900:#153428;
  --green-800:#1e4636;
  --green-700:#2b5c46;
  --green-600:#3c7359;

  --cream:#faf6ec;
  --cream-2:#f2ead9;
  --cream-3:#ece1c8;

  --rose:#c65d78;
  --rose-dark:#a94962;
  --rose-tint:#f6e3e8;

  --orange:#e2703f;
  --orange-dark:#c85c2e;

  --gold:#c99a3f;

  --slate:#5a6b70;
  --slate-light:#93a09c;
  --line:#e6ddc8;
  --line-2:#d9cead;

  --white:#ffffff;
  --shadow-sm: 0 4px 14px rgba(14,31,24,0.06);
  --shadow-md: 0 14px 32px rgba(14,31,24,0.12);
  --shadow-lg: 0 24px 60px rgba(14,31,24,0.18);
  --radius: 16px;
  --radius-sm: 10px;
  --wrap: 1240px;
  --gutter: 32px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter', sans-serif;
  color:var(--green-950);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Playfair Display', serif;
  color:var(--green-950);
  line-height:1.15;
  font-weight:600;
}
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }

.eyebrow{
  font-family:'Jost', sans-serif;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{ content:none; }
.eyebrow .eb-ico, .eyebrow svg.eb-ico{ width:16px; height:16px; stroke-width:1.9; flex-shrink:0; }
.container{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
section{ scroll-margin-top:90px; }

/* ---------------------------------- NAV ---------------------------------- */
header.site-header{
  position:sticky; top:0; z-index:200;
  background:rgba(250,246,236,0.94);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--wrap); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px var(--gutter);
}
.logo{
  display:flex; align-items:center; gap:11px;
  font-family:'Playfair Display', serif;
  font-weight:700; font-size:20px;
  color:var(--green-950);
  flex-shrink:0;
}
.logo-img{ height:54px; width:auto; display:block; }
.logo-mark{
  width:38px; height:38px;
  border-radius:10px;
  background:linear-gradient(150deg, var(--green-800), var(--green-950));
  display:flex; align-items:center; justify-content:center;
  color:var(--cream);
  flex-shrink:0;
}
.logo-mark svg{ width:20px; height:20px; }
.logo-text{ display:flex; flex-direction:column; line-height:1.05; }
.logo-text small{
  font-family:'Jost', sans-serif; font-weight:500; font-size:9.5px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--slate);
  margin-top:2px;
}
nav.links{
  display:flex; gap:26px;
  font-family:'Jost', sans-serif;
  font-size:14px; font-weight:500;
  color:var(--green-900);
}
nav.links a{
  position:relative; padding:6px 0;
  transition:color .2s;
}
nav.links a.active{ font-weight:600; color:var(--green-950); }
nav.links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:2px; background:var(--orange);
  border-radius:2px;
}
nav.links a:hover{ color:var(--orange-dark); }
.nav-right{ display:flex; align-items:center; gap:18px; }
.nav-icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:9px;
  color:var(--green-900); background:transparent;
  border:1px solid var(--line-2);
  transition:all .15s;
}
.nav-icon-btn:hover{ background:var(--cream-2); }
.nav-icon-btn svg{ width:17px; height:17px; }

.hamburger{
  display:none; background:none; border:none;
  width:38px; height:38px; align-items:center; justify-content:center;
  color:var(--green-950);
}
.hamburger svg{ width:22px; height:22px; }

/* buttons */
.btn{
  font-family:'Jost', sans-serif;
  font-weight:600; font-size:14px;
  padding:12px 22px;
  border-radius:9px;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:all .2s ease;
  display:inline-flex; align-items:center; gap:8px;
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; }
.btn-orange{ background:var(--orange); color:#fff; }
.btn-orange:hover{ background:var(--orange-dark); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.btn-outline-dark{ border-color:var(--green-900); color:var(--green-950); background:transparent; }
.btn-outline-dark:hover{ background:var(--green-900); color:#fff; }
.btn-outline-light{ border-color:rgba(255,255,255,0.65); color:#fff; background:rgba(255,255,255,0.06); }
.btn-outline-light:hover{ background:rgba(255,255,255,0.18); }
.btn-rose{ background:var(--rose); color:#fff; }
.btn-rose:hover{ background:var(--rose-dark); }
.btn-block{ width:100%; justify-content:center; }
.btn-lg{ padding:15px 30px; font-size:15px; }
.btn-ghost-green{ background:var(--cream-2); color:var(--green-900); }
.btn-ghost-green:hover{ background:var(--cream-3); }

/* ---------------------------------- SUB-PAGE HERO ---------------------------------- */
.page-hero{
  position:relative;
  min-height:340px;
  display:flex; align-items:flex-end;
  padding-bottom:56px;
  color:#fff;
  background-size:cover; background-position:center;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,26,20,0.55) 0%, rgba(10,20,16,0.86) 100%);
}
.page-hero-inner{ position:relative; z-index:1; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); width:100%; }
.page-hero .eyebrow{ color:#f0d9a8; margin-bottom:14px; }
.page-hero h1{ font-size:clamp(30px,4.2vw,46px); color:#fff; max-width:640px; margin-bottom:10px; }
.page-hero p{ max-width:520px; color:#dfe5e0; font-size:15.5px; line-height:1.6; }
.breadcrumb{
  font-family:'Jost', sans-serif; font-size:13px; color:#cddccf;
  display:flex; align-items:center; gap:8px; margin-top:18px;
}
.breadcrumb svg{ width:13px; height:13px; opacity:.7; }

/* ---------------------------------- HOME HERO ---------------------------------- */
.hero{
  position:relative;
  min-height:660px;
  display:flex; align-items:center;
  overflow:hidden;
  color:#fff;
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  animation:kenburns 24s ease-in-out infinite alternate;
}
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(9,22,17,0.92) 8%, rgba(9,22,17,0.6) 45%, rgba(9,22,17,0.18) 78%);
  z-index:1;
}
.hero-inner{ position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; padding:60px var(--gutter); width:100%; }
.hero-inner .eyebrow{ color:#f0d9a8; margin-bottom:18px; }
.hero h1{ font-size:clamp(34px,5vw,54px); max-width:640px; color:#fff; margin-bottom:22px; }
.hero h1 em{ font-style:italic; color:var(--orange); font-family:'Playfair Display', serif; }
.hero p{ max-width:480px; font-size:16px; line-height:1.65; color:#dfe5e0; margin-bottom:36px; }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }

/* Clean hero variant - content only, built for a mobile "wow" first impression */
.hero-clean{ min-height:100vh; min-height:100svh; }
.hero-clean .hero-inner{ padding-top:100px; padding-bottom:90px; }
.hero-scroll-cue{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:2;
  width:26px; height:42px; border:2px solid rgba(255,255,255,0.55); border-radius:20px;
}
.hero-scroll-cue span{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; border-radius:3px; background:var(--orange);
  animation:scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{ opacity:1; top:8px; }
  70%{ opacity:0; top:20px; }
  100%{ opacity:0; top:20px; }
}
@media (max-width:640px){
  .hero-clean .hero-inner{ padding-top:64px; padding-bottom:70px; }
  .hero h1{ font-size:clamp(32px,9vw,42px); }
  .hero p{ font-size:15px; margin-bottom:30px; }
  .hero-scroll-cue{ bottom:22px; }
}

/* ---------------------------------- GENERIC SECTIONS ---------------------------------- */
.section{ padding:96px 0; }
.section-tight{ padding:64px 0; }
.section-alt{ background:var(--cream-2); }
.section-dark{ background:var(--green-950); color:#eef1ec; }
.section-dark h2,.section-dark h3{ color:#fff; }
.section-head{ max-width:680px; margin:0 auto 46px; text-align:center; }
.section-head.left{ margin:0 0 46px; text-align:left; }
.section-head .eyebrow{ color:var(--orange-dark); justify-content:center; margin-bottom:14px; }
.section-head.left .eyebrow{ justify-content:flex-start; }
.section-head h2{ font-size:clamp(28px,3.4vw,40px); margin-bottom:16px; }
.section-head p{ color:var(--slate); font-size:15.5px; line-height:1.7; }

/* feature cards (home "why primarosa") */
.feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.feature-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; transition:all .2s;
}
.feature-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.feature-icon{
  width:50px; height:50px; border-radius:12px;
  background:var(--green-950); color:var(--orange);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.feature-icon svg{ width:24px; height:24px; }
.feature-card h3{ font-size:19px; margin-bottom:10px; }
.feature-card p{ color:var(--slate); font-size:14px; line-height:1.65; }

/* CTA banner */
.cta-banner{
  background:linear-gradient(120deg, var(--green-950), var(--green-800));
  border-radius:24px; padding:56px 60px;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  color:#fff; position:relative; overflow:hidden;
}
.cta-banner::after{
  content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px;
  border-radius:50%; background:radial-gradient(circle, rgba(226,112,63,0.28), transparent 70%);
}
.cta-banner h2{ color:#fff; font-size:clamp(24px,2.8vw,32px); max-width:480px; position:relative; z-index:1; }
.cta-banner p{ color:#cfd8d0; margin-top:10px; max-width:440px; font-size:14.5px; position:relative; z-index:1;}
.cta-banner .btn{ position:relative; z-index:1; }

/* ---------------------------------- PRODUCT / FLOWER CARDS ---------------------------------- */
.filter-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:16px 20px; margin-bottom:22px;
}
.search-box{
  flex:1; min-width:220px; display:flex; align-items:center; gap:10px;
  background:var(--cream-2); border-radius:10px; padding:11px 16px; color:var(--slate-light); font-size:14px;
  border:1px solid transparent;
}
.search-box svg{ width:16px; height:16px; flex-shrink:0; }
.search-box input{ border:none; outline:none; background:transparent; width:100%; font-size:14px; color:var(--green-950); }
.search-box input::placeholder{ color:var(--slate-light); }
.color-dots{ display:flex; align-items:center; gap:8px; }
.color-dots .label{ font-family:'Jost', sans-serif; font-size:13px; color:var(--slate); margin-right:4px; }
.dot{ width:19px; height:19px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--line-2); cursor:pointer; transition:transform .15s; }
.dot:hover, .dot.active{ transform:scale(1.18); box-shadow:0 0 0 2px var(--green-900); }

.tab-bar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:38px; }
.tab{
  font-family:'Jost', sans-serif; font-size:13px; font-weight:600; letter-spacing:0.02em;
  padding:10px 18px; border-radius:8px; color:var(--green-900); background:transparent;
  border:1px solid var(--line-2); transition:all .15s;
}
.tab.active{ background:var(--green-900); color:#fff; border-color:var(--green-900); }
.tab:not(.active):hover{ background:var(--cream-2); }

.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.p-card{
  background:#fff; border-radius:18px; overflow:hidden; border:1px solid var(--line);
  transition:transform .25s, box-shadow .25s, border-color .25s;
  display:flex; flex-direction:column;
  cursor:pointer;
}
.p-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }
.p-card:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.p-card-img{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.p-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.p-card:hover .p-card-img img{ transform:scale(1.08); }
.p-badge{
  position:absolute; top:12px; left:12px; background:var(--green-950); color:#fff;
  font-family:'Jost', sans-serif; font-size:10px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:6px; z-index:2;
}
.p-fav{
  position:absolute; top:12px; right:12px; z-index:2;
  width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.92);
  display:flex; align-items:center; justify-content:center; color:var(--rose);
  opacity:0; transform:translateY(-4px); transition:all .2s;
}
.p-card:hover .p-fav{ opacity:1; transform:translateY(0); }
.p-fav svg{ width:15px; height:15px; }
.p-card-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(9,22,17,0.75) 0%, transparent 45%);
  opacity:0; transition:opacity .25s;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:16px;
}
.p-card:hover .p-card-overlay{ opacity:1; }
.p-quickview{
  font-family:'Jost', sans-serif; font-size:12px; font-weight:600; color:#fff;
  border:1px solid rgba(255,255,255,0.6); border-radius:20px; padding:8px 16px;
  display:flex; align-items:center; gap:6px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.p-quickview svg{ width:13px; height:13px; }

.p-card-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.p-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.p-card-body h3{ font-size:17.5px; }
.p-variety{ font-family:'Jost', sans-serif; font-size:12px; color:var(--slate); margin-top:2px; }
.p-swatches{ display:flex; gap:5px; }
.p-swatches span{ width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,0.06); }
.p-specs{
  display:flex; gap:14px; font-family:'Jost', sans-serif; font-size:11.5px; color:var(--slate);
  padding-top:10px; border-top:1px dashed var(--line-2);
}
.p-specs strong{ display:block; color:var(--green-950); font-size:12.5px; }
.p-card-foot{
  display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:10px; gap:10px;
}
.p-viewmore{
  font-family:'Jost', sans-serif; font-size:11.5px; font-weight:600; color:var(--orange-dark);
  display:flex; align-items:center; gap:6px; transition:gap .2s;
}
.p-viewmore svg{ width:13px; height:13px; transition:transform .2s; }
.p-card:hover .p-viewmore{ gap:9px; }
.p-card:hover .p-viewmore svg{ transform:translateX(2px); }

.load-more-wrap{ text-align:center; margin-top:46px; }

/* "Ask Us Anything" direct contact prompt */
.askus-wrap{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center; }
.askus-photo-wrap{ position:relative; }
.askus-photo{ border-radius:22px; overflow:hidden; aspect-ratio:4/3.3; box-shadow:var(--shadow-sm); }
.askus-photo img{ width:100%; height:100%; object-fit:cover; }
.askus-bubble{
  position:absolute; left:26px; bottom:-28px; max-width:76%;
  background:#fff; border-radius:15px; border-bottom-left-radius:4px;
  padding:14px 18px; box-shadow:var(--shadow-md);
  display:flex; align-items:center; gap:11px;
}
.askus-bubble .dot{
  width:9px; height:9px; border-radius:50%; background:#25D366;
  box-shadow:0 0 0 4px rgba(37,211,102,0.16); flex-shrink:0;
}
.askus-bubble span{ font-family:'Jost', sans-serif; font-size:12.5px; color:var(--green-950); font-weight:500; line-height:1.4; }

.askus-content .eyebrow{ color:var(--orange-dark); }
.askus-content h2{ font-size:clamp(26px,3vw,34px); margin:14px 0 16px; max-width:480px; }
.askus-content > p{ color:var(--slate); font-size:15px; line-height:1.7; max-width:460px; margin-bottom:28px; }
.askus-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px; }
.btn-whatsapp{ background:#25D366; color:#fff; }
.btn-whatsapp:hover{ background:#1DA851; }

.askus-trust{ display:flex; align-items:center; gap:13px; }
.avatar-stack{ display:flex; }
.avatar-stack span{
  width:36px; height:36px; border-radius:50%; background:var(--cream-2); color:var(--green-800);
  display:flex; align-items:center; justify-content:center; border:2px solid #fff; margin-left:-11px;
  box-shadow:0 0 0 1px var(--line-2);
}
.avatar-stack span svg{ width:16px; height:16px; }
.avatar-stack span:first-child{ margin-left:0; }
.askus-trust p{ font-family:'Jost', sans-serif; font-size:12.5px; color:var(--slate); margin:0; }
.askus-trust p strong{ color:var(--green-950); }

@media (max-width:900px){
  .askus-wrap{ grid-template-columns:1fr; gap:56px; }
  .askus-bubble{ left:16px; bottom:-24px; max-width:82%; }
}
@media (max-width:640px){
  .askus-bubble{ padding:11px 14px; bottom:-20px; }
  .askus-ctas .btn{ width:100%; justify-content:center; }
}

/* Farm to Vase process flow */
.process-flow{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; margin-top:10px; }
.process-step{ position:relative; text-align:center; padding:0 14px; }
.process-step::after{
  content:""; position:absolute; top:29px; left:calc(50% + 34px); right:calc(-50% + 34px);
  height:2px; background:repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px);
}
.process-step:last-child::after{ display:none; }
.process-num{
  width:58px; height:58px; border-radius:50%; margin:0 auto 18px; position:relative; z-index:1;
  background:var(--green-950); color:var(--orange);
  display:flex; align-items:center; justify-content:center;
  border:5px solid var(--cream-2);
}
.process-num svg{ width:24px; height:24px; }
.process-time{
  font-family:'Jost', sans-serif; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--orange); margin-bottom:6px;
}
.process-step h3{ font-size:15.5px; margin-bottom:8px; }
.process-step p{ font-size:12.5px; color:var(--slate); line-height:1.6; }
.process-cta-row{ text-align:center; margin-top:44px; }

@media (max-width:1024px){
  .process-flow{ grid-template-columns:repeat(3,1fr); gap:32px 0; }
  .process-step::after{ display:none; }
}
@media (max-width:640px){
  .process-flow{ grid-template-columns:1fr; gap:0; text-align:left; }
  .process-step{ display:flex; align-items:flex-start; gap:16px; padding:0 0 30px; text-align:left; }
  .process-step:last-child{ padding-bottom:0; }
  .process-num{ margin:0; flex-shrink:0; width:48px; height:48px; }
  .process-text{ flex:1; }
  .process-num svg{ width:20px; height:20px; }
}

/* Homepage showcase cards - premium, flower-forward */
.showcase-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.showcase-card{
  position:relative; border-radius:20px; overflow:hidden; aspect-ratio:3/4.1;
  box-shadow:var(--shadow-sm); transition:transform .35s ease, box-shadow .35s ease;
}
.showcase-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.showcase-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.showcase-card:hover img{ transform:scale(1.09); }
.showcase-card::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(9,22,17,0.88) 0%, rgba(9,22,17,0.28) 42%, rgba(9,22,17,0) 62%);
  z-index:1;
}
.showcase-badge{
  position:absolute; top:14px; left:14px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,0.16); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.3);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.showcase-badge svg{ width:17px; height:17px; }
.showcase-tag{
  position:absolute; top:14px; right:14px; z-index:2;
  font-family:'Jost', sans-serif; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:rgba(226,112,63,0.92); padding:5px 10px; border-radius:20px;
}
.showcase-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px 20px; }
.showcase-body .sc-rule{ width:30px; height:2px; background:var(--orange); border-radius:2px; margin-bottom:12px; }
.showcase-body h3{ color:#fff; font-size:22px; margin-bottom:4px; }
.showcase-body .sc-variety{ font-family:'Jost', sans-serif; font-size:12px; color:#dfe5df; letter-spacing:.02em; margin-bottom:14px; }
.showcase-cta{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Jost', sans-serif; font-size:11.5px; font-weight:600; color:#fff;
  border-bottom:1px solid rgba(255,255,255,0.5); padding-bottom:3px;
  opacity:0; transform:translateY(6px); transition:opacity .25s, transform .25s;
}
.showcase-card:hover .showcase-cta{ opacity:1; transform:translateY(0); }
.showcase-cta svg{ width:12px; height:12px; }

@media (max-width:1024px){ .showcase-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .showcase-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } .showcase-card{ aspect-ratio:3/4.3; } .showcase-body{ padding:16px 14px; } .showcase-body h3{ font-size:18px; } }
@media (max-width:420px){ .showcase-grid{ grid-template-columns:1fr; } }

/* Download catalogue CTA card */
.download-cat{
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  background:linear-gradient(120deg, #fff, var(--cream-2));
  border:1px solid var(--line); border-radius:20px; padding:36px 40px; margin-bottom:56px;
  position:relative; overflow:hidden;
}
.download-cat-left{ display:flex; align-items:center; gap:20px; }
.download-cat-icon{
  width:64px; height:64px; border-radius:16px; flex-shrink:0;
  background:var(--green-950); color:var(--orange);
  display:flex; align-items:center; justify-content:center;
}
.download-cat-icon svg{ width:30px; height:30px; }
.download-cat h3{ font-size:20px; margin-bottom:6px; }
.download-cat p{ color:var(--slate); font-size:13.5px; }
.download-cat .meta{ font-family:'Jost', sans-serif; font-size:11.5px; color:var(--slate-light); margin-top:6px; letter-spacing:.02em; }

/* ---------------------------------- GALLERY ---------------------------------- */


/* ---------------------------------- CERTIFICATIONS ---------------------------------- */

.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.pillar{ padding:34px 28px; border-radius:var(--radius); background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); }
.pillar .num{ font-family:'Playfair Display', serif; font-size:34px; color:var(--orange); margin-bottom:14px; }
.pillar h3{ color:#fff; font-size:19px; margin-bottom:10px; }
.pillar p{ color:#c3ccc5; font-size:14px; line-height:1.7; }

/* story / split section */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.split-imgs{ position:relative; }
.split-imgs .main-img{ width:100%; aspect-ratio:4/4.6; border-radius:16px; overflow:hidden; }
.split-imgs .main-img img{ width:100%; height:100%; object-fit:cover; }
.split-imgs .float-img{
  position:absolute; bottom:-36px; right:-36px; width:52%; aspect-ratio:16/11;
  border-radius:12px; overflow:hidden; border:6px solid var(--cream); box-shadow:var(--shadow-lg);
}
.split-imgs .float-img img{ width:100%; height:100%; object-fit:cover; }
.split-imgs-compact{ max-width:380px; margin:0 auto; }
.split-imgs-compact .main-img{ aspect-ratio:4/3.6; }
.split-imgs-compact .float-img{ width:56%; bottom:-28px; right:-28px; }
@media (max-width:900px){ .split-imgs-compact{ max-width:340px; } }

.split-imgs-md{ max-width:460px; margin:0 auto; }
.split-imgs-md .main-img{ aspect-ratio:4/3.9; }
.split-imgs-md .float-img{ width:54%; bottom:-30px; right:-30px; }
@media (max-width:900px){ .split-imgs-md{ max-width:400px; } }
.split-text h2{ font-size:clamp(28px,3.2vw,36px); margin-bottom:22px; max-width:460px; }
.split-text p{ color:var(--slate); font-size:15px; line-height:1.75; margin-bottom:18px; max-width:470px; }
.read-story{
  display:inline-flex; align-items:center; gap:8px; font-family:'Jost', sans-serif; font-weight:600; font-size:14.5px;
  color:var(--green-900); margin-top:10px; border-bottom:1.5px solid var(--green-900); padding-bottom:3px;
}
.read-story svg{ width:15px; height:15px; transition:transform .2s; }
.read-story:hover svg{ transform:translateX(4px); }

/* ---------------------------------- CONTACT ---------------------------------- */
.contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:50px; align-items:start; }
.contact-info-card{
  background:var(--green-950); color:#eef1ec; border-radius:20px; padding:38px 32px;
}
.contact-info-card h3{ color:#fff; font-size:19px; margin-bottom:6px; }
.contact-info-card > p{ color:#b9c4bc; font-size:13.5px; margin-bottom:26px; }
.save-contact-btn{ margin-top:24px; }
.save-contact-btn svg{ width:16px; height:16px; }
.info-row{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-top:1px solid rgba(255,255,255,0.1); }
.info-row:first-of-type{ border-top:none; }
.info-row .icon{
  width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,0.08); color:var(--orange);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.info-row .icon svg{ width:17px; height:17px; }
.info-row h4{ font-family:'Jost', sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#93a09c; margin-bottom:4px; font-weight:600; }
.info-row p, .info-row a{ font-size:14px; color:#eef1ec; line-height:1.5; }
.social-row{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; }
.social-row a{
  width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,0.08); color:#fff;
  display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.14); transition:background .2s;
}
.social-row a:hover{ background:var(--orange); }
.social-row svg{ width:16px; height:16px; }

/* Professional map card */
.map-card{
  margin-top:22px; border-radius:20px; overflow:hidden; border:1px solid var(--line);
  background:#fff; box-shadow:var(--shadow-sm);
}
.map-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--line);
}
.map-card-head .label{ display:flex; align-items:center; gap:10px; font-family:'Jost', sans-serif; font-size:13.5px; font-weight:600; color:var(--green-950); }
.map-card-head .label .icon-dot{ width:30px; height:30px; border-radius:8px; background:var(--cream-2); color:var(--green-800); display:flex; align-items:center; justify-content:center; }
.map-card-head .label .icon-dot svg{ width:15px; height:15px; }
.map-card-head .directions{
  font-family:'Jost', sans-serif; font-size:12.5px; font-weight:600; color:var(--orange-dark);
  display:flex; align-items:center; gap:5px;
}
.map-card-head .directions svg{ width:13px; height:13px; }
.map-frame{ position:relative; }
.map-frame iframe{ width:100%; height:280px; border:0; display:block; filter:grayscale(0.25) saturate(1.05) contrast(1.02); }
.map-pin-card{
  position:absolute; left:16px; bottom:16px; z-index:2;
  background:rgba(255,255,255,0.96); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-radius:14px; padding:14px 16px; box-shadow:var(--shadow-md);
  display:flex; align-items:center; gap:12px; max-width:250px;
}
.map-pin-card .pin{
  width:36px; height:36px; border-radius:50%; background:var(--orange); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.map-pin-card .pin svg{ width:17px; height:17px; }
.map-pin-card h5{ font-family:'Jost', sans-serif; font-size:12.5px; font-weight:700; color:var(--green-950); margin-bottom:2px; }
.map-pin-card span{ font-family:'Jost', sans-serif; font-size:11px; color:var(--slate); }

/* Connect / social platforms section */
.icon-facebook{ background:#1877F2; }
.icon-instagram{ background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.icon-linkedin{ background:#0A66C2; }
.icon-x{ background:#0f1419; }
.icon-youtube{ background:#FF0000; }
.icon-whatsapp{ background:#25D366; }

.form-card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:40px; }
.form-card h3{ font-size:20px; margin-bottom:8px; }
.form-card > p{ color:var(--slate); font-size:14px; margin-bottom:28px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-family:'Jost', sans-serif; font-size:12.5px; font-weight:600; color:var(--green-900); letter-spacing:.02em; }
.field input, .field select, .field textarea{
  border:1.5px solid var(--line-2); border-radius:10px; padding:12px 14px; font-size:14px;
  background:var(--cream); color:var(--green-950); outline:none; transition:border-color .15s, background .15s;
  width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--orange); background:#fff; }
.field textarea{ resize:vertical; min-height:110px; }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6b70' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }

/* Honeypot field - invisible to humans, catches simple bots */
.hp-field{
  position:absolute !important; left:0 !important; top:0 !important; width:1px !important; height:1px !important;
  opacity:0 !important; pointer-events:none !important; overflow:hidden !important; clip-path:inset(50%) !important;
}

.form-error-note{
  display:flex; align-items:flex-start; gap:10px; margin-top:14px; padding:13px 15px;
  background:#fdeee9; border:1px solid #f3c9b8; border-radius:10px;
  font-family:'Jost', sans-serif; font-size:12px; color:#8a3a1f; line-height:1.5;
}
.form-error-note svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; color:var(--orange-dark); }
.form-error-note a{ color:var(--orange-dark); font-weight:600; text-decoration:underline; }

.btn.is-loading{ opacity:0.7; pointer-events:none; }

.form-success{
  display:none; text-align:center; padding:50px 20px;
}
.form-success.show{ display:block; }
.form-success .check{
  width:64px; height:64px; border-radius:50%; background:var(--cream-2); color:var(--green-700);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
}
.form-success .check svg{ width:30px; height:30px; }
.form-success h3{ margin-bottom:10px; }
.form-success p{ color:var(--slate); font-size:14px; max-width:340px; margin:0 auto; }

/* ---------------------------------- MODAL (Request a Quote) ---------------------------------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(9,18,14,0.68); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  z-index:1000; display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal-panel{
  background:#fff; border-radius:24px; width:100%; max-width:600px; max-height:90vh; overflow-y:auto;
  box-shadow:var(--shadow-lg); position:relative; animation:modalIn .28s cubic-bezier(.2,.8,.3,1);
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(18px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } }

.modal-band{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg, var(--green-950), var(--green-800));
  padding:32px 34px 26px;
  border-radius:24px 24px 0 0;
}
.modal-band::after{
  content:""; position:absolute; right:-40px; top:-50px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(226,112,63,0.3), transparent 70%);
}
.modal-band-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; position:relative; z-index:1; }
.modal-icon-badge{
  width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,0.1); color:var(--orange);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; border:1px solid rgba(255,255,255,0.14);
}
.modal-icon-badge svg{ width:22px; height:22px; }
.modal-band .eyebrow{ color:#f0d9a8; margin-bottom:8px; }
.modal-band h3, .modal-band h2{ color:#fff; font-size:24px; margin-bottom:8px; }
.modal-band p{ color:#c3ccc5; font-size:13.5px; max-width:400px; line-height:1.55; position:relative; z-index:1; }
.modal-close{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.1); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid rgba(255,255,255,0.16);
  position:relative; z-index:1; transition:background .15s;
}
.modal-close:hover{ background:rgba(255,255,255,0.2); }
.modal-close svg{ width:15px; height:15px; }

.modal-body{ padding:28px 34px 30px; }
.modal-fieldset-label{
  font-family:'Jost', sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--orange-dark); display:flex; align-items:center; gap:8px; margin:22px 0 14px;
}
.modal-fieldset-label:first-child{ margin-top:0; }
.modal-fieldset-label svg{ width:14px; height:14px; }
.modal-panel .form-success{ padding:56px 34px 50px; }
.modal-response-note{
  display:flex; align-items:center; gap:10px; margin-top:6px; padding:12px 14px;
  background:var(--cream-2); border-radius:10px; font-family:'Jost', sans-serif; font-size:12.5px; color:var(--green-800);
}
.modal-response-note svg{ width:15px; height:15px; color:var(--orange-dark); flex-shrink:0; }

/* Product Detail Modal - opens when a catalogue card is clicked */
#productModal .modal-panel{ max-width:520px; overflow:hidden; }
.pm-photo-wrap{ position:relative; aspect-ratio:4/3.1; }
.pm-photo-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.pm-badge{
  position:absolute; top:16px; left:16px; background:var(--green-950); color:#fff;
  font-family:'Jost', sans-serif; font-size:10.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  padding:6px 12px; border-radius:6px;
}
.pm-close{
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  background:rgba(9,22,17,0.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#fff;
  display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.25);
}
.pm-close svg{ width:16px; height:16px; }
.pm-body{ padding:28px 30px 30px; }
.pm-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:4px; }
.pm-body h3{ font-size:24px; }
.pm-variety{ font-family:'Jost', sans-serif; font-size:13px; color:var(--slate); margin-top:2px; }
.pm-swatch{ width:20px; height:20px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,0.08); flex-shrink:0; margin-top:4px; }
.pm-specs{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin:20px 0; padding:16px 0; border-top:1px dashed var(--line-2); border-bottom:1px dashed var(--line-2);
}
.pm-specs div{ font-family:'Jost', sans-serif; }
.pm-specs strong{ display:block; font-size:15px; color:var(--green-950); font-family:'Playfair Display', serif; }
.pm-specs span{ font-size:11px; color:var(--slate); text-transform:uppercase; letter-spacing:.04em; }
.pm-cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.pm-cta-row .btn{ flex:1; justify-content:center; }
.pm-cta-single{ width:100%; }

/* ---------------------------------- FOOTER ---------------------------------- */
footer.site-footer{ background:var(--green-950); color:#cfd8d2; padding:64px var(--gutter) 26px; }
.footer-inner{
  max-width:calc(var(--wrap) - 2 * var(--gutter)); margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:44px;
  padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-brand{ max-width:300px; }
.footer-brand .logo{ color:#fff; margin-bottom:16px; }
.footer-brand .logo-mark{ background:var(--orange); }
.footer-logo-img{ height:64px; width:auto; display:block; }
.footer-brand p{ font-size:13.5px; line-height:1.75; color:#a8b6ae; }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{
  width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,0.07); color:#fff;
  display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.12); transition:background .2s;
}
.footer-social a:hover{ background:var(--orange); }
.footer-social svg{ width:15px; height:15px; }
.footer-cols{ display:flex; gap:60px; flex-wrap:wrap; }
.footer-col h4, .footer-col h2.footer-h{ font-family:'Jost', sans-serif; font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px; color:#fff; font-weight:600; }
.footer-col a, .footer-col p{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:#a8b6ae; margin-bottom:12px; font-family:'Jost', sans-serif; }
.footer-col a:hover{ color:var(--orange); }
.footer-col svg{ width:14px; height:14px; flex-shrink:0; }

.footer-dev-credit{
  max-width:calc(var(--wrap) - 2 * var(--gutter)); margin:0 auto; padding:20px 0; margin-top:6px;
  border-top:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
  font-family:'Jost', sans-serif; font-size:12px; color:#7f8d86; text-align:center;
}
.footer-dev-credit strong{ color:#c3ccc5; font-weight:600; }
.footer-dev-credit svg{ width:12px; height:12px; display:inline; vertical-align:-1px; color:var(--orange); margin:0 3px; }
.footer-dev-credit .dev-contact{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.footer-dev-credit .dev-contact a{ display:inline-flex; align-items:center; gap:6px; color:#7f8d86; transition:color .2s; }
.footer-dev-credit .dev-contact a:hover{ color:var(--orange); }
.footer-dev-credit .dev-contact svg{ color:inherit; margin:0; }

.footer-bottom{
  max-width:calc(var(--wrap) - 2 * var(--gutter)); margin:0 auto; padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:'Jost', sans-serif; font-size:12.5px; color:#7f8d86;
}
.footer-privacy-link{ color:inherit; text-decoration:underline; margin-left:8px; }
.footer-privacy-link:hover{ color:var(--orange); }

/* Cookie consent banner */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:400;
  background:var(--green-950); color:#eef1ec;
  padding:18px 26px; display:none; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  box-shadow:0 -10px 30px rgba(0,0,0,0.28);
}
.cookie-banner.show{ display:flex; }
.cookie-banner p{ font-family:'Inter', sans-serif; font-size:13px; color:#c3ccc5; max-width:720px; margin:0; line-height:1.5; }
.cookie-banner a{ color:var(--orange); text-decoration:underline; }
.cookie-banner-actions{ display:flex; gap:10px; flex-shrink:0; }
.cookie-banner .btn{ padding:10px 18px; font-size:13px; }
@media (max-width:640px){
  .cookie-banner{ flex-direction:column; align-items:stretch; padding:18px 20px; }
  .cookie-banner-actions{ width:100%; }
  .cookie-banner-actions .btn{ flex:1; justify-content:center; }
}

/* ---------------------------------- RESPONSIVE ---------------------------------- */
/* Large laptops / small desktops */
@media (max-width:1180px){
  :root{ --gutter:26px; }
  .section{ padding:88px 0; }
}

/* Laptops / tablets landscape */
@media (max-width:1024px){
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .product-grid{ grid-template-columns:repeat(3,1fr); }
  .pillars{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  nav.links{ gap:22px; font-size:14px; }
}

/* Tablets (portrait) */
@media (max-width:900px){
  nav.links{ display:none; }
  .hamburger{ display:flex; }
  .split{ grid-template-columns:1fr; gap:50px; }
  .split-imgs{ margin-bottom:70px; }
  .download-cat{ flex-direction:column; align-items:flex-start; }
  .download-cat .btn{ width:100%; justify-content:center; }
  .hero{ min-height:600px; }
  .hero-inner, .page-hero-inner{ padding-top:44px; padding-bottom:44px; }
  .cta-banner{ flex-direction:column; align-items:flex-start; text-align:left; }
  .cta-banner .btn{ width:100%; justify-content:center; }
  .timeline::before{ left:18px; }
  .timeline-item{ padding-left:52px; }
}

@media (max-width:768px){
  :root{ --gutter:22px; }
  .section{ padding:72px 0; }
  .section-tight{ padding:52px 0; }
  .feature-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .product-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .stat-row{ gap:24px 30px; }
  .nav-inner{ padding:14px var(--gutter); }
  .logo-text small{ display:none; }
}

/* Phones (landscape / large) */
@media (max-width:640px){
  :root{ --gutter:18px; }
  .product-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .feature-grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .cta-banner{ padding:36px 24px; border-radius:18px; }
  .hero{ min-height:580px; }
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .btn{ width:100%; justify-content:center; }
  .page-hero{ min-height:280px; }
  .filter-bar{ flex-direction:column; align-items:stretch; }
  .color-dots{ justify-content:flex-start; }
  .tab-bar{ gap:8px; }
  .tab{ padding:9px 14px; font-size:12.5px; }
  .download-cat-left{ flex-direction:column; align-items:flex-start; gap:14px; }
  .modal-band{ padding:26px 22px 22px; border-radius:20px 20px 0 0; }
  .modal-body{ padding:22px 22px 26px; }
  .modal-panel{ border-radius:20px; }
  .form-card{ padding:26px 22px; }
  .contact-info-card{ padding:28px 22px; }
  .pm-body{ padding:22px 22px 24px; }
  .pm-specs{ grid-template-columns:1fr 1fr; gap:10px; }
  .pm-cta-row{ flex-direction:column; }
}

/* Small phones (iPhone SE / narrow Android) */
@media (max-width:420px){
  h1{ font-size:28px !important; }
  .hero h1{ font-size:30px; }
  .section-head h2{ font-size:24px; }
  .nav-right .btn span{ display:none; }
  .nav-right .btn{ padding:10px 12px; }
  .logo-text{ display:none; }
  .stat-row{ gap:18px 22px; }
  .stat{ font-size:11px; }
  .product-grid{ grid-template-columns:1fr; }
  .p-card-body{ padding:14px; }
  .modal-response-note{ font-size:11.5px; }
}

/* Ensure touch targets and tap comfort on all touch devices */
@media (hover:none){
  .p-card-overlay, .p-fav{ opacity:1; transform:none; }
}

/* Mobile nav drawer */
.mobile-drawer{
  position:fixed; inset:0; z-index:300; display:none;
}
.mobile-drawer.open{ display:block; }
.mobile-drawer-overlay{ position:absolute; inset:0; background:rgba(9,18,14,0.5); }
.mobile-drawer-panel{
  position:absolute; top:0; right:0; bottom:0; width:78%; max-width:320px;
  background:var(--cream); padding:28px 26px; box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; gap:6px;
  animation:drawerIn .22s ease;
}
@keyframes drawerIn{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
.mobile-drawer-panel a{
  font-family:'Jost', sans-serif; font-size:16px; font-weight:600; color:var(--green-950);
  padding:14px 4px; border-bottom:1px solid var(--line);
}
.mobile-drawer-close{ align-self:flex-end; width:36px; height:36px; border-radius:50%; background:var(--cream-2); display:flex; align-items:center; justify-content:center; margin-bottom:10px; border:none; }
.mobile-drawer-close svg{ width:16px; height:16px; }

/* ---------------------------------- ABOUT PAGE ---------------------------------- */
.about-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:10px; }
.about-stat{ text-align:center; padding:26px 16px; background:#fff; border:1px solid var(--line); border-radius:16px; }
.about-stat .num{ font-family:'Playfair Display', serif; font-size:32px; color:var(--green-950); }
.about-stat .lbl{ font-family:'Jost', sans-serif; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--slate); margin-top:6px; }

.timeline{ position:relative; margin-top:20px; }
.timeline::before{ content:""; position:absolute; left:24px; top:6px; bottom:6px; width:2px; background:var(--line-2); }
.timeline-item{ position:relative; padding-left:64px; padding-bottom:36px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{
  position:absolute; left:14px; top:2px; width:22px; height:22px; border-radius:50%;
  background:var(--green-950); border:4px solid var(--cream); box-shadow:0 0 0 1px var(--line-2);
}
.timeline-year{ font-family:'Jost', sans-serif; font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--orange-dark); text-transform:uppercase; margin-bottom:6px; }
.timeline-item h3{ font-size:18px; margin-bottom:8px; }
.timeline-item p{ color:var(--slate); font-size:14px; line-height:1.65; max-width:560px; }

.leader-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.leader-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; text-align:center; }
.leader-avatar{
  width:72px; height:72px; border-radius:50%; margin:0 auto 16px; background:var(--cream-2); color:var(--green-800);
  display:flex; align-items:center; justify-content:center;
}
.leader-avatar svg{ width:30px; height:30px; }
.leader-card h3{ font-size:17px; margin-bottom:4px; }
.leader-card .role{ font-family:'Jost', sans-serif; font-size:12px; color:var(--orange-dark); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:12px; }
.leader-card p{ font-size:13px; color:var(--slate); line-height:1.6; }

.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.value-card{ padding:30px 26px; border-radius:var(--radius); background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); }
.value-card .feature-icon{ background:rgba(255,255,255,0.08); }
.value-card h3{ color:#fff; font-size:18px; margin:16px 0 10px; }
.value-card p{ color:#c3ccc5; font-size:14px; line-height:1.7; }

@media (max-width:1024px){
  .about-stats{ grid-template-columns:repeat(2,1fr); }
  .leader-grid{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .about-stats{ grid-template-columns:1fr 1fr; gap:12px; }
  .about-stat{ padding:20px 12px; }
  .about-stat .num{ font-size:26px; }
  .timeline-item{ padding-left:48px; }
  .timeline::before{ left:16px; }
  .timeline-dot{ left:6px; width:18px; height:18px; }
}

/* Mixed-Box / Bouquet Builder - now lives inside a modal, triggered by a floating bubble */
.mix-bubble{
  position:fixed; bottom:28px; right:28px; z-index:150;
  background:var(--green-950); color:#fff; border-radius:50px;
  padding:15px 24px 15px 18px; display:flex; align-items:center; gap:10px;
  box-shadow:var(--shadow-lg); font-family:'Jost', sans-serif; font-weight:600; font-size:13.5px;
  border:none; transition:all .2s ease;
}
.mix-bubble svg{ width:19px; height:19px; flex-shrink:0; }
.mix-bubble:hover{ background:var(--orange); transform:translateY(-3px); box-shadow:0 20px 40px rgba(226,112,63,0.35); }
body.cookie-banner-open .mix-bubble{ bottom:200px; transition:bottom .25s ease; }
@media (min-width:640px){ body.cookie-banner-open .mix-bubble{ bottom:100px; } }

/* Sitewide WhatsApp floating bubble - appears on every page, position is
   managed by JS (repositionFloatingButtons) so it always stacks cleanly
   above the mix bubble and/or cookie banner when either is present. */
.whatsapp-float{
  position:fixed; right:28px; bottom:28px; z-index:160;
  width:58px; height:58px;
  transition:bottom .25s ease;
}
.wa-main-btn{
  width:100%; height:100%; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); border:none; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.wa-main-btn:hover{ transform:translateY(-3px); box-shadow:0 20px 40px rgba(37,211,102,0.4); }
.wa-main-btn svg{ width:26px; height:26px; }

.wa-lang-badge{
  position:absolute; top:-8px; left:-8px; z-index:2;
  background:var(--green-950); color:#fff;
  font-family:'Jost', sans-serif; font-size:10px; font-weight:700; letter-spacing:.03em;
  padding:3px 7px; border-radius:20px; border:2px solid var(--cream);
  display:flex; align-items:center; gap:3px; cursor:pointer;
}
.wa-lang-badge svg{ width:9px; height:9px; }
.wa-lang-badge:hover{ background:var(--orange); }

.wa-lang-menu{
  position:absolute; bottom:70px; right:0; z-index:3;
  background:#fff; border-radius:14px; box-shadow:var(--shadow-lg);
  padding:8px; display:none; min-width:170px;
  border:1px solid var(--line);
}
.wa-lang-menu.open{ display:block; }
.wa-lang-menu .wa-lang-title{
  font-family:'Jost', sans-serif; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--slate-light); padding:6px 10px 8px;
}
.wa-lang-option{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:9px 10px; border-radius:9px; border:none; background:none;
  font-family:'Jost', sans-serif; font-size:13px; color:var(--green-950); text-align:left; cursor:pointer;
}
.wa-lang-option:hover{ background:var(--cream-2); }
.wa-lang-option.active{ background:var(--cream-2); font-weight:600; }
.wa-lang-option .check{ width:14px; height:14px; color:var(--orange); opacity:0; }
.wa-lang-option.active .check{ opacity:1; }

@media (max-width:640px){
  .whatsapp-float{ width:52px; height:52px; }
  .wa-main-btn svg{ width:23px; height:23px; }
  .wa-lang-menu{ right:-10px; }
}

/* Order-via-WhatsApp buttons (product detail modal, mix builder) */
.btn-whatsapp-order{ background:#25D366; color:#fff; }
.btn-whatsapp-order:hover{ background:#1DA851; }
.btn-whatsapp-order svg{ width:16px; height:16px; }
.btn-whatsapp-order:disabled{ opacity:0.5; cursor:not-allowed; }

.builder-list{
  max-height:320px; overflow-y:auto; padding-right:10px; display:flex; flex-direction:column; gap:2px;
  border:1px solid var(--line); border-radius:14px; padding:8px 10px;
}
.builder-list::-webkit-scrollbar{ width:6px; }
.builder-list::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:6px; }
.builder-row{
  display:flex; align-items:center; gap:14px; padding:11px 6px; border-radius:10px; transition:background .15s;
  border-bottom:1px solid var(--line);
}
.builder-row:last-child{ border-bottom:none; }
.builder-row:hover{ background:var(--cream-2); }
.builder-row-info{ flex:1; min-width:0; }
.builder-row-info strong{ display:block; font-size:13.5px; color:var(--green-950); font-family:'Inter', sans-serif; }
.builder-row-info span{ font-family:'Jost', sans-serif; font-size:11px; color:var(--slate); }
.stepper{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.step-btn{
  width:28px; height:28px; border-radius:8px; border:1px solid var(--line-2); background:var(--cream);
  color:var(--green-950); font-size:15px; font-weight:600; display:flex; align-items:center; justify-content:center;
  transition:all .15s; line-height:1;
}
.step-btn:hover{ background:var(--green-950); color:#fff; border-color:var(--green-950); }
.step-input{
  width:48px; text-align:center; border:1px solid var(--line-2); border-radius:8px; padding:5px 4px;
  font-family:'Jost', sans-serif; font-size:12.5px; font-weight:600; color:var(--green-950); background:var(--cream);
}
.step-input:focus{ outline:none; border-color:var(--green-800); }

.builder-summary{ background:var(--cream-2); border-radius:14px; padding:20px; margin-top:18px; }
.builder-summary-list{ display:flex; flex-direction:column; gap:9px; margin-bottom:14px; min-height:26px; }
.builder-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:'Jost', sans-serif; font-size:12.5px; }
.builder-item .bi-name{ color:var(--green-950); font-weight:500; }
.builder-item .bi-qty{ color:var(--slate); font-weight:600; }
.builder-empty-text{ font-family:'Jost', sans-serif; font-size:12px; color:var(--slate-light); margin:0; }
.builder-total{
  display:flex; align-items:center; justify-content:space-between; padding:13px 0; margin-bottom:14px;
  border-top:1px dashed var(--line-2);
  font-family:'Jost', sans-serif; font-size:13px; color:var(--green-950); font-weight:600;
}
.builder-total strong{ font-family:'Playfair Display', serif; font-size:21px; color:var(--green-800); }
#requestMixQuote:disabled{ opacity:0.5; cursor:not-allowed; }
.builder-reset{
  width:100%; text-align:center; margin-top:4px; background:none; border:none;
  font-family:'Jost', sans-serif; font-size:12px; color:var(--slate); text-decoration:underline; padding:6px;
}
.builder-reset:hover{ color:var(--orange-dark); }

@media (max-width:640px){
  .mix-bubble span{ display:none; }
  .mix-bubble{ padding:15px; border-radius:50%; }
  .builder-list{ max-height:260px; }
}

/* Occasion landing cards with countdown */
.occasion-card{
  position:relative; border-radius:24px; overflow:hidden; min-height:400px;
  display:flex; align-items:flex-end; padding:44px; color:#fff;
  background-size:cover; background-position:center;
  margin-bottom:28px;
}
.occasion-card:last-child{ margin-bottom:0; }
.occasion-card::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,22,17,0.2) 0%, rgba(9,22,17,0.92) 100%);
  z-index:1;
}
.occasion-content{ position:relative; z-index:2; width:100%; }
.occasion-content .eyebrow{ color:#f0d9a8; margin-bottom:12px; }
.occasion-content h2{ font-size:clamp(26px,3.6vw,38px); color:#fff; margin-bottom:8px; }
.occasion-date{ font-family:'Jost', sans-serif; font-size:13px; color:#cdd6cf; margin-bottom:24px; letter-spacing:.02em; }
.occasion-desc{ max-width:540px; color:#dfe5e0; font-size:14.5px; line-height:1.65; margin-bottom:28px; }
.countdown{ display:flex; gap:14px; margin-bottom:28px; flex-wrap:wrap; }
.countdown-box{
  background:rgba(255,255,255,0.1); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.18); border-radius:14px;
  padding:14px 18px; text-align:center; min-width:72px;
}
.countdown-box .cd-num{ font-family:'Playfair Display', serif; font-size:28px; font-weight:700; color:#fff; line-height:1; }
.countdown-box .cd-label{ font-family:'Jost', sans-serif; font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:#cdd6cf; margin-top:6px; }

@media (max-width:640px){
  .occasion-card{ min-height:340px; padding:28px 24px; border-radius:18px; }
  .countdown{ gap:9px; }
  .countdown-box{ min-width:58px; padding:10px 8px; border-radius:11px; }
  .countdown-box .cd-num{ font-size:21px; }
  .countdown-box .cd-label{ font-size:8.5px; }
  .occasion-content .btn{ width:100%; justify-content:center; }
}

/* Bouquet recipe suggestion cards */
.recipe-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.recipe-card{
  background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; transition:all .2s;
}
.recipe-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.recipe-img{ aspect-ratio:16/10; overflow:hidden; }
.recipe-img img{ width:100%; height:100%; object-fit:cover; }
.recipe-body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.recipe-body h3{ font-size:18px; margin-bottom:8px; }
.recipe-body > p{ font-size:13px; color:var(--slate); line-height:1.6; margin-bottom:16px; }
.recipe-ingredients{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
.recipe-chip{
  background:var(--cream-2); color:var(--green-900); font-family:'Jost', sans-serif;
  font-size:11px; font-weight:600; padding:6px 11px; border-radius:20px;
}
.recipe-cta{ width:100%; justify-content:center; margin-top:auto; }

@media (max-width:1024px){ .recipe-grid{ grid-template-columns:1fr; } }

/* Data-loading skeletons + error states (used while catalogue/gallery/occasions JSON loads) */
.data-skeleton-grid{ display:contents; }
.p-card-skeleton{
  aspect-ratio:3/4.6; border-radius:18px;
  background:linear-gradient(100deg, var(--cream-2) 25%, #ffffff 40%, var(--cream-2) 55%);
  background-size:400% 100%; animation:img-shimmer 1.7s ease-in-out infinite;
}
.gallery-item-skeleton{
  aspect-ratio:3/4; border-radius:14px; margin-bottom:18px; break-inside:avoid;
  background:linear-gradient(100deg, var(--cream-2) 25%, #ffffff 40%, var(--cream-2) 55%);
  background-size:400% 100%; animation:img-shimmer 1.7s ease-in-out infinite;
}
.occasion-card-skeleton{
  height:400px; border-radius:24px; margin-bottom:28px;
  background:linear-gradient(100deg, var(--cream-2) 25%, #ffffff 40%, var(--cream-2) 55%);
  background-size:400% 100%; animation:img-shimmer 1.7s ease-in-out infinite;
}
.data-error{
  display:flex; align-items:center; gap:14px; justify-content:center; text-align:center;
  flex-direction:column; padding:60px 20px; color:var(--slate);
}
.data-error svg{ width:34px; height:34px; color:var(--orange-dark); }
.data-error p{ font-size:14px; max-width:420px; }
.data-error a{ color:var(--orange-dark); font-weight:600; text-decoration:underline; }

/* 404 page */
.notfound{ text-align:center; padding:130px 32px 150px; }
.notfound .icon-badge{
  width:88px; height:88px; border-radius:50%; background:var(--cream-2); color:var(--green-800);
  display:flex; align-items:center; justify-content:center; margin:0 auto 30px;
}
.notfound .icon-badge svg{ width:38px; height:38px; }
.notfound .code{
  font-family:'Playfair Display', serif; font-weight:700; font-size:clamp(64px,10vw,100px);
  color:var(--orange); line-height:1; margin-bottom:14px;
}
.notfound h1{ font-size:clamp(24px,3vw,32px); margin-bottom:16px; }
.notfound > p{ color:var(--slate); font-size:15px; line-height:1.7; max-width:460px; margin:0 auto 36px; }
.notfound-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:46px; }
.notfound-links{ display:flex; gap:28px; justify-content:center; flex-wrap:wrap; font-family:'Jost', sans-serif; font-size:13px; }
.notfound-links a{ color:var(--green-900); border-bottom:1px solid var(--line-2); padding-bottom:3px; font-weight:500; }
.notfound-links a:hover{ color:var(--orange-dark); border-color:var(--orange-dark); }
@media (max-width:640px){ .notfound{ padding:90px 22px 110px; } .notfound-ctas .btn{ width:100%; justify-content:center; } }

/* Loading skeleton shimmer for images */
.p-card-img, .gallery-item, .showcase-card{
  background:linear-gradient(100deg, var(--cream-2) 25%, #ffffff 40%, var(--cream-2) 55%);
  background-size:400% 100%;
  animation: img-shimmer 1.7s ease-in-out infinite;
}
.p-card-img img, .gallery-item img, .showcase-card img{
  opacity:0; transition:opacity .5s ease;
}
.p-card-img img.img-loaded, .gallery-item img.img-loaded, .showcase-card img.img-loaded{ opacity:1; }
.p-card-img.img-ready, .gallery-item.img-ready, .showcase-card.img-ready{ animation:none; background:none; }
@keyframes img-shimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}

[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].in{ opacity:1; transform:translateY(0); }


/* ==========================================================================
   UPGRADE 2026 - nav icons, language switch, markets, colour chips,
   favourites, gallery, certifications, connect, RTL
   ========================================================================== */

/* ---------- Nav: icons + language switch ---------- */
nav.links{ gap:clamp(12px,1.3vw,22px); }
nav.links a{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
nav.links a svg{ width:15px; height:15px; stroke-width:2; opacity:.6; flex-shrink:0; transition:opacity .2s, color .2s; }
nav.links a:hover svg, nav.links a.active svg{ opacity:1; color:var(--orange-dark); }
.nav-right{ gap:12px; }
@media (max-width:1180px){
  nav.links{ display:none; }
  .hamburger{ display:flex; }
}
@media (max-width:480px){
  .nav-quote span{ display:none; }
  .nav-quote{ padding:10px 12px !important; }
}

/* Drawer */
.mobile-drawer-panel{ overflow-y:auto; }
.mobile-drawer-panel a{ display:flex; align-items:center; gap:12px; }
.mobile-drawer-panel a svg{ width:18px; height:18px; color:var(--orange-dark); flex-shrink:0; }
.mobile-drawer-panel a.active{ color:var(--orange-dark); }
.mobile-drawer-panel a.drawer-quote{ margin-top:20px; justify-content:center; border-bottom:none; color:#fff; padding:14px 20px; }
.mobile-drawer-panel a.drawer-quote svg{ color:#fff; }

/* ---------- Quote modal (WhatsApp) ---------- */
.modal-icon-wa{ background:#25D366 !important; color:#fff !important; }
.check-wa{ background:#25D366 !important; }
.modal-panel .form-success .btn{ margin-top:20px; }
.modal-panel .form-success .builder-reset{ display:block; margin:14px auto 0; }

/* ---------- Markets ---------- */
.markets-section{ background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%); }
.markets-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); max-width:760px; margin:0 auto 48px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-sm); }
.mstat{ text-align:center; padding:22px 12px; }
.mstat + .mstat{ border-inline-start:1px solid var(--line); }
.mstat strong{ display:block; font-family:'Playfair Display',serif; font-size:clamp(32px,4vw,44px); font-weight:600; color:var(--green-900); line-height:1.1; }
.mstat span{ font-family:'Jost',sans-serif; font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); }

/* ---------- Testimonials / buyers (hidden until data exists) ---------- */
.testimonial-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.testimonial-card{ position:relative; margin:0; background:#fff; border:1px solid var(--line); border-radius:22px; padding:34px 30px 28px; display:flex; flex-direction:column; gap:18px; box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s; }
@media (hover:hover){ .testimonial-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); } }
.testimonial-card .tm-quote{ position:absolute; top:26px; inset-inline-end:26px; width:38px; height:38px; color:var(--rose-tint); fill:var(--rose-tint); stroke:none; }
.testimonial-card blockquote{ margin:0; flex:1; font-family:'Playfair Display',serif; font-size:17.5px; line-height:1.65; color:var(--green-950); }
.testimonial-card .who{ display:flex; align-items:center; gap:14px; padding-top:20px; border-top:1px solid var(--line); font-family:'Jost',sans-serif; }
.testimonial-card .who-av{ flex-shrink:0; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--green-900); color:#fff; font-size:14px; font-weight:600; letter-spacing:.04em; }
.testimonial-card .who-txt{ display:flex; flex-direction:column; min-width:0; }
.testimonial-card .who strong{ font-size:15px; color:var(--green-950); }
.testimonial-card .who-txt span{ font-size:12.5px; color:var(--slate); }
.testimonial-card .stars{ display:flex; gap:3px; color:var(--gold); } .testimonial-card .stars svg{ width:16px; height:16px; fill:currentColor; }
@media (max-width:1024px){ .testimonial-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px){ .testimonial-grid{ grid-template-columns:1fr; } .testimonial-card{ padding:28px 22px 24px; } }
.buyer-strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 34px; margin-top:38px; padding-top:30px; border-top:1px dashed var(--line-2); }
.buyer-strip[hidden], #testimonialsSection[hidden], .fav-bar[hidden]{ display:none; }
.buyer-strip img{ height:34px; width:auto; opacity:.7; filter:grayscale(1); transition:.2s; } .buyer-strip img:hover{ opacity:1; filter:none; }
.buyer-strip .buyer-name{ font-family:'Jost',sans-serif; font-size:15px; font-weight:600; color:var(--slate); }

/* ---------- Catalogue: colour chips + favourites ---------- */
.filter-bar-v2{ flex-direction:column; align-items:stretch; gap:16px; }
.filter-row{ display:flex; align-items:center; gap:12px; }
.filter-row .search-box{ flex:1; }
.fav-toggle{
  display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 16px; border-radius:10px; flex-shrink:0;
  border:1px solid var(--line-2); background:#fff; cursor:pointer; font-family:'Jost',sans-serif; font-size:13px; font-weight:600; color:var(--green-900); transition:.15s;
}
.fav-toggle svg{ width:16px; height:16px; color:var(--rose); }
.fav-toggle:hover{ border-color:var(--rose); }
.fav-toggle[aria-pressed="true"]{ background:var(--rose-tint); border-color:var(--rose); }
.fav-toggle[aria-pressed="true"] svg{ fill:var(--rose); }
.fav-count{ min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--green-900); color:#fff; font-size:11px; display:inline-flex; align-items:center; justify-content:center; }
.color-filter{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.color-filter .label{ font-family:'Jost',sans-serif; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); }
.color-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.color-chip{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 7px; border-radius:99px; cursor:pointer;
  border:1px solid var(--line-2); background:#fff; font-family:'Jost',sans-serif; font-size:13px; font-weight:500; color:var(--green-950); transition:.15s;
}
.color-chip .swatch{ width:20px; height:20px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); flex-shrink:0; }
.color-chip em{ font-style:normal; font-size:11px; color:var(--slate); }
.color-chip.all-chip{ padding-inline-start:14px; }
.color-chip:hover{ border-color:var(--green-700); transform:translateY(-1px); }
.color-chip.active{ background:var(--green-900); border-color:var(--green-900); color:#fff; }
.color-chip.active em{ color:#cfe0d6; }
.color-chip.active .swatch{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); }
.spec-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-inline-end:6px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); vertical-align:baseline; }
.p-fav{ border:none; cursor:pointer; }
.p-fav.is-fav{ opacity:1; transform:none; background:var(--rose); color:#fff; }
.p-fav.is-fav svg{ fill:currentColor; }
@media (hover:none){ .p-fav{ opacity:1; transform:none; } }
.fav-bar{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--rose-tint); border:1px solid #efc7d1; border-radius:14px; padding:12px 16px; margin-bottom:22px; animation:modalIn .25s ease;
}
.fav-bar-text{ display:flex; align-items:center; gap:10px; font-family:'Jost',sans-serif; font-size:14px; font-weight:600; color:var(--rose-dark); }
.fav-bar-text svg{ width:18px; height:18px; fill:var(--rose); color:var(--rose); }
.fav-bar-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fav-bar .btn{ padding:10px 16px; font-size:13px; }
.fav-clear{ background:none; border:none; cursor:pointer; font-family:'Jost',sans-serif; font-size:13px; font-weight:600; color:var(--slate); text-decoration:underline; }
.pm-cta-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pm-cta-row #pmOrderWhatsApp{ grid-column:1 / -1; }
.pm-fav.is-fav svg{ fill:var(--rose); color:var(--rose); }
@media (max-width:640px){ .pm-cta-row{ display:grid; grid-template-columns:1fr; } .filter-row{ flex-wrap:wrap; } .fav-bar-actions .btn{ flex:1; justify-content:center; } }

/* ---------- Gallery: bento grid + lightbox ---------- */
.gallery-section{ background:var(--cream); }
.gallery-toolbar{ display:flex; justify-content:center; margin-bottom:34px; }
.gallery-chips{ display:inline-flex; flex-wrap:wrap; justify-content:center; gap:6px; padding:6px; background:#fff; border:1px solid var(--line); border-radius:99px; box-shadow:var(--shadow-sm); }
.gchip{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:99px; border:none; background:transparent; cursor:pointer; font-family:'Jost',sans-serif; font-size:13px; font-weight:600; color:var(--green-900); transition:.2s; }
.gchip svg{ width:15px; height:15px; opacity:.7; }
.gchip em{ font-style:normal; font-size:11px; padding:2px 7px; border-radius:99px; background:var(--cream-2); color:var(--slate); }
.gchip:hover{ background:var(--cream-2); }
.gchip.active{ background:var(--green-900); color:#fff; }
.gchip.active em{ background:rgba(255,255,255,.2); color:#fff; }
.gchip.active svg{ opacity:1; }
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:8px; grid-auto-flow:dense; gap:14px; }
.gallery-item-skeleton{ margin:0; height:220px; border-radius:22px; break-inside:auto; }
.gallery-grid .data-skeleton-grid{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gallery-item{ grid-row-end:span 14; position:relative; border-radius:22px; overflow:hidden; cursor:pointer; isolation:isolate; animation:galIn .5s both; outline-offset:3px; }
.gallery-item.wide{ grid-column:span 2; }
.gallery-item.big{ grid-column:span 2; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .5s ease; }
.gallery-item:hover img{ transform:scale(1.07); }
.gallery-item::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg,rgba(9,22,17,.78),transparent 58%); opacity:0; transition:opacity .3s; }
.gallery-item:hover::after, .gallery-item:focus-visible::after{ opacity:1; }
.gallery-tag{ position:absolute; top:14px; inset-inline-start:14px; z-index:2; font-family:'Jost',sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; background:rgba(255,255,255,.92); color:var(--green-900); padding:5px 10px; border-radius:99px; }
.gallery-caption{ position:absolute; inset:auto 0 0 0; z-index:2; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; opacity:0; transform:translateY(8px); transition:.3s; }
.gallery-item:hover .gallery-caption, .gallery-item:focus-visible .gallery-caption{ opacity:1; transform:none; }
.gallery-caption span{ color:#fff; font-family:'Jost',sans-serif; font-size:13.5px; font-weight:600; line-height:1.4; }
.gallery-zoom{ width:36px; height:36px; border-radius:50%; flex-shrink:0; background:rgba(255,255,255,.2); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; color:#fff; }
.gallery-zoom svg{ width:16px; height:16px; }
@media (hover:none){
  .gallery-item::after{ opacity:1; }
  .gallery-caption{ opacity:1; transform:none; }
  .gallery-caption .gallery-zoom{ display:none; }
}
@keyframes galIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
@media (max-width:1024px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .gallery-item{ border-radius:16px; }
  .gallery-chips{ border-radius:20px; }
  .gchip{ padding:9px 12px; }
  .gallery-caption span{ font-size:12px; }
  .gallery-caption{ padding:12px; }
}

.lightbox{ position:fixed; inset:0; z-index:1000; display:none; flex-direction:column; align-items:center; justify-content:center; padding:20px 16px 14px; }
.lightbox.open{ display:flex; animation:modalIn .25s ease; }
.lb-backdrop{ position:absolute; inset:0; background:rgba(8,16,12,.95); }
.lb-stage{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:18px; width:100%; flex:1; min-height:0; }
.lb-figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; max-width:min(1100px,84vw); max-height:100%; }
.lb-figure img{ max-width:100%; max-height:calc(100vh - 230px); border-radius:16px; box-shadow:var(--shadow-lg); object-fit:contain; transition:opacity .2s; }
.lb-figure img.swap{ opacity:0; }
.lb-figure figcaption{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; color:#e8ece9; font-family:'Jost',sans-serif; font-size:14px; font-weight:500; text-align:center; }
.lb-cat{ background:rgba(255,255,255,.12); padding:4px 11px; border-radius:99px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.lightbox-close{ position:absolute; top:16px; inset-inline-end:20px; z-index:5; width:44px; height:44px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center; transition:.2s; }
.lightbox-close:hover{ background:var(--orange); }
.lightbox-close svg{ width:20px; height:20px; }
.lightbox-nav{ flex-shrink:0; width:48px; height:48px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center; transition:.2s; }
.lightbox-nav:hover{ background:var(--orange); }
.lightbox-nav svg{ width:22px; height:22px; }
.lb-footer{ position:relative; z-index:2; width:100%; max-width:900px; display:flex; flex-direction:column; align-items:center; gap:10px; padding-top:14px; }
.lb-counter{ color:#aab8b0; font-family:'Jost',sans-serif; font-size:12px; font-weight:600; letter-spacing:.12em; }
.lb-thumbs{ display:flex; gap:8px; overflow-x:auto; max-width:100%; padding:4px; scrollbar-width:none; }
.lb-thumbs::-webkit-scrollbar{ display:none; }
.lb-thumb{ flex:0 0 auto; width:64px; height:48px; border-radius:8px; overflow:hidden; padding:0; cursor:pointer; background:none; border:2px solid transparent; opacity:.5; transition:.2s; }
.lb-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.lb-thumb:hover{ opacity:.85; }
.lb-thumb.active{ opacity:1; border-color:var(--orange); }
@media (max-width:700px){
  .lb-stage{ gap:0; }
  .lightbox-nav{ position:absolute; bottom:-6px; width:42px; height:42px; z-index:6; }
  .lightbox-prev{ inset-inline-start:6px; } .lightbox-next{ inset-inline-end:6px; }
  .lb-figure{ max-width:100%; } .lb-figure img{ max-height:calc(100vh - 250px); }
  .lb-thumb{ width:52px; height:40px; }
}

/* ---------- Certifications ---------- */

/* ---------- Connect With Us ---------- */
.connect-section{ position:relative; background:var(--green-950); color:#eef1ec; overflow:hidden; }
.connect-section::before{ content:""; position:absolute; width:640px; height:640px; border-radius:50%; top:-280px; inset-inline-start:-200px; background:radial-gradient(circle,rgba(226,112,63,.24),transparent 65%); pointer-events:none; }
.connect-section::after{ content:""; position:absolute; width:560px; height:560px; border-radius:50%; bottom:-260px; inset-inline-end:-160px; background:radial-gradient(circle,rgba(60,115,89,.35),transparent 65%); pointer-events:none; }
.connect-wrap{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center; }
.connect-intro .eyebrow{ color:var(--orange); }
.connect-intro h2{ color:#fff; font-size:clamp(30px,3.6vw,44px); margin:14px 0; }
.connect-intro > p{ color:#c3ccc5; line-height:1.75; max-width:470px; margin-bottom:26px; }
.connect-wa{ box-shadow:0 12px 28px rgba(37,211,102,.25); }
.connect-quick{ display:grid; gap:14px; margin:32px 0 24px; }
.cq{ display:flex; align-items:center; gap:14px; color:#e8ece9; }
.cq-ic{ width:42px; height:42px; border-radius:12px; flex-shrink:0; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; color:var(--orange); }
.cq-ic svg{ width:18px; height:18px; }
.cq small{ display:block; font-family:'Jost',sans-serif; font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:#93a39a; }
.cq b{ font-family:'Jost',sans-serif; font-size:14.5px; font-weight:600; color:#fff; word-break:break-word; transition:color .2s; }
a.cq:hover b{ color:var(--orange); }
.connect-reply{ display:inline-flex; align-items:center; gap:10px; font-family:'Jost',sans-serif; font-size:13px; font-weight:500; color:#b9c6be; }
.pulse{ width:9px; height:9px; border-radius:50%; background:#25D366; animation:pulseDot 2s infinite; }
@keyframes pulseDot{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.6); } 70%{ box-shadow:0 0 0 10px rgba(37,211,102,0); } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); } }
.connect-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.connect-card{
  --brand:#fff; position:relative; display:flex; flex-direction:column; gap:18px; min-height:196px; padding:22px; color:#fff;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:20px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform .25s, border-color .25s, background .25s, box-shadow .25s;
}
.cc-facebook{ --brand:#1877F2; } .cc-instagram{ --brand:#E1306C; } .cc-linkedin{ --brand:#0A66C2; } .cc-whatsapp{ --brand:#25D366; }
.connect-card:hover{ transform:translateY(-6px); background:rgba(255,255,255,.08); border-color:var(--brand); box-shadow:0 18px 40px rgba(0,0,0,.35); }
.cc-icon{ width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--brand); transition:transform .25s; }
.cc-instagram .cc-icon{ background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.connect-card:hover .cc-icon{ transform:scale(1.08) rotate(-4deg); }
.cc-icon svg, .brand-svg{ width:23px; height:23px; }
.cc-body{ display:flex; flex-direction:column; gap:3px; }
.cc-name{ font-family:'Playfair Display',serif; font-size:18px; font-weight:600; color:#fff; }
.cc-handle{ font-family:'Jost',sans-serif; font-size:13px; font-weight:500; color:var(--orange); }
.cc-desc{ font-size:12.5px; line-height:1.55; color:#aebbb3; margin-top:4px; }
.cc-go{ margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-family:'Jost',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:.04em; color:#d6dfd9; }
.cc-go svg{ width:15px; height:15px; transition:transform .2s; }
.connect-card:hover .cc-go{ color:#fff; }
.connect-card:hover .cc-go svg{ transform:translate(3px,-3px); }
.connect-card.is-soon{ opacity:.6; cursor:default; }
.connect-card.is-soon:hover{ transform:none; background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); box-shadow:none; }
.connect-card.is-soon:hover .cc-icon{ transform:none; }
.connect-card.is-soon .cc-go svg{ display:none; }
@media (max-width:960px){ .connect-wrap{ grid-template-columns:1fr; gap:40px; } }
@media (max-width:520px){ .connect-grid{ grid-template-columns:1fr; } .connect-card{ min-height:0; } }

/* ---------- Arabic / RTL ---------- */
html[lang="ar"] body, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4,
html[lang="ar"] .btn, html[lang="ar"] nav.links a, html[lang="ar"] .eyebrow, html[lang="ar"] .cc-name{ font-family:'Noto Sans Arabic','Inter',sans-serif; letter-spacing:0; }
html[lang="ar"] .eyebrow{ letter-spacing:0; text-transform:none; }
[dir="rtl"] .mobile-drawer-panel{ right:auto; left:0; animation-name:drawerInRtl; }
@keyframes drawerInRtl{ from{ transform:translateX(-100%); } to{ transform:translateX(0); } }
[dir="rtl"] svg.lucide-arrow-right, [dir="rtl"] svg.lucide-chevron-right, [dir="rtl"] svg.lucide-chevron-left, [dir="rtl"] svg.lucide-arrow-up-right{ transform:scaleX(-1); }
[dir="rtl"] .market-cta:hover svg{ transform:scaleX(-1) translateX(4px); }
[dir="rtl"] [dir="ltr"], [dir="rtl"] .cq b[data-site="phoneDisplay"]{ unicode-bidi:isolate; }
html[lang="ar"] em, html[lang="ar"] i:not([data-lucide]){ font-style:normal; }
html[lang="ar"] .whatsapp-float{ right:auto; left:24px; }
@media (max-width:520px){
  .markets-stats{ margin-bottom:34px; }
  .mstat{ padding:16px 6px; }
  .mstat strong{ font-size:28px; }
  .mstat span{ font-size:10px; letter-spacing:.06em; }
}
/* Russian labels are longer - switch to the menu button a little earlier */
@media (max-width:1300px){
  html[lang="ru"] nav.links{ display:none; }
  html[lang="ru"] .hamburger{ display:flex; }
}


/* ==========================================================================
   HERO (revamp) + developer dropdown
   ========================================================================== */



/* entrance */





/* Footer: developer dropdown */
.footer-dev{ position:relative; display:flex; justify-content:center; max-width:calc(var(--wrap) - 2 * var(--gutter)); margin:6px auto 0; padding:18px 0; border-top:1px solid rgba(255,255,255,.08); }
.dev-toggle{
  display:inline-flex; align-items:center; gap:10px; padding:9px 16px; border-radius:99px; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:#9fb0a6;
  font-family:'Jost',sans-serif; font-size:12.5px; font-weight:500; transition:.2s;
}
.dev-toggle strong{ color:#e8ece9; font-weight:600; }
.dev-toggle svg{ width:14px; height:14px; color:var(--orange); }
.dev-toggle:hover, .dev-toggle[aria-expanded="true"]{ background:rgba(255,255,255,.09); border-color:var(--orange); color:#fff; }
.dev-caret{ transition:transform .25s; }
.dev-toggle[aria-expanded="true"] .dev-caret{ transform:rotate(180deg); }
.dev-card{
  position:absolute; bottom:calc(100% - 6px); inset-inline-start:50%; width:min(320px,calc(100vw - 32px)); padding:14px;
  background:#fff; border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.45); z-index:60; transform:translateX(-50%); animation:devIn .22s ease;
}
[dir="rtl"] .dev-card{ transform:translateX(50%); }
.dev-card[hidden]{ display:none; }
.dev-card::after{ content:""; position:absolute; bottom:-7px; inset-inline-start:50%; width:14px; height:14px; background:#fff; transform:translateX(-50%) rotate(45deg); }
@keyframes devIn{ from{ opacity:0; margin-bottom:-8px; } to{ opacity:1; margin-bottom:0; } }
.dev-card-head{ display:flex; align-items:center; gap:12px; padding:6px 6px 14px; margin-bottom:8px; border-bottom:1px dashed var(--line-2); }
.dev-avatar{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--green-900); color:#fff; font-family:'Jost',sans-serif; font-size:14px; font-weight:600; }
.dev-card-head strong{ display:block; font-family:'Playfair Display',serif; font-size:15.5px; color:var(--green-950); }
.dev-card-head span:not(.dev-avatar){ font-family:'Jost',sans-serif; font-size:12px; color:var(--slate); }
.dev-row{ display:flex; align-items:center; gap:12px; padding:10px; border-radius:12px; color:var(--green-950); transition:background .15s; }
.dev-row:hover{ background:var(--cream-2); }
.dev-row svg{ width:18px; height:18px; color:var(--orange-dark); flex-shrink:0; }
.dev-row-text small{ display:block; font-family:'Jost',sans-serif; font-size:10.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); }
.dev-row-text b{ font-family:'Jost',sans-serif; font-size:14px; font-weight:600; word-break:break-all; }
.dev-save{ width:100%; margin-top:8px; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px; border-radius:12px; border:1px solid var(--line-2); background:var(--cream); color:var(--green-900); cursor:pointer; font-family:'Jost',sans-serif; font-size:13px; font-weight:600; transition:.15s; }
.dev-save:hover{ background:var(--cream-2); border-color:var(--green-700); }
.dev-save svg{ width:16px; height:16px; }



/* ==========================================================================
   v3 - Hero, Reach panels, Certificates  (written mobile-first)
   ========================================================================== */

/* ---------- Hero (split layout: copy left, photo right, feature strip overlapping) ---------- */
@keyframes heroRise{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
.hero-s{ position:relative; }
.hero-s-top{
  position:relative; overflow:hidden;
  padding:clamp(36px,5vw,72px) 0 clamp(96px,9vw,120px);
  background:
    linear-gradient(180deg, rgba(250,246,236,0) 72%, var(--cream) 100%),
    radial-gradient(60% 70% at 88% 12%, rgba(246,227,232,.95) 0%, rgba(246,227,232,0) 70%),
    var(--cream);
}
.hero-s-grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px); align-items:center;
}
.hero-s-copy{ animation:heroRise .9s .05s cubic-bezier(.2,.7,.2,1) both; }
.hero-s-pill{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:22px;
  padding:8px 16px; border-radius:99px; background:#fff; border:1px solid var(--line);
  font-family:'Jost',sans-serif; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--green-800);
  box-shadow:var(--shadow-sm);
}
.hero-s-pill::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--orange); flex-shrink:0; }
.hero-s h1{
  font-size:clamp(38px,5.1vw,70px); line-height:1.07; letter-spacing:-.015em; font-weight:600;
  color:var(--green-950); margin:0 0 22px; max-width:11.5em;
}
.hero-s h1 em{ font-style:normal; color:var(--orange); display:inline; }
.hero-s-copy > p{ max-width:34em; font-size:clamp(15.5px,1.3vw,17.5px); line-height:1.7; color:var(--slate); margin:0 0 32px; }
.hero-s-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.hero-s-ctas .btn{ justify-content:center; }

/* feature strip: sits half over the hero, half over the next section */
.hero-s-strip{
  position:relative; z-index:3; margin:calc(-1 * clamp(52px,5vw,60px)) 0 0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  background:#fff; border-radius:20px; box-shadow:var(--shadow-md); border:1px solid var(--line);
  animation:heroRise .9s .35s cubic-bezier(.2,.7,.2,1) both;
}
.hero-s-strip > div{
  display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:center;
  padding:24px 26px;
}
.hero-s-strip > div + div{ border-inline-start:1px solid var(--line); }
.hero-s-strip .hs-ico{
  grid-row:1 / span 2; width:48px; height:48px; border-radius:14px; background:var(--cream-2); color:var(--orange-dark);
  display:flex; align-items:center; justify-content:center;
}
.hero-s-strip .hs-ico svg{ width:22px; height:22px; }
.hero-s-strip dt{ font-family:'Playfair Display',serif; font-size:clamp(24px,2.3vw,30px); font-weight:600; line-height:1.05; color:var(--green-950); }
.hero-s-strip dd{ margin:4px 0 0; font-family:'Jost',sans-serif; font-size:11.5px; font-weight:600; line-height:1.35; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); }

@media (max-width:1024px){
  .hero-s-strip > div{ padding:20px 18px; column-gap:12px; }
  .hero-s-strip .hs-ico{ width:42px; height:42px; border-radius:12px; }
}
@media (max-width:900px){
  .hero-s-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-s-strip > div:nth-child(3){ border-inline-start:0; }
  .hero-s-strip > div:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width:560px){
  .hero-s h1{ font-size:clamp(34px,10.4vw,44px) !important; }
  .hero-s-top{ padding-bottom:88px; }
  .hero-s-ctas .btn{ flex:1 1 100%; }
  .hero-s-strip{ border-radius:16px; }
  .hero-s-strip > div{ grid-template-columns:1fr; row-gap:10px; padding:16px 14px; }
  .hero-s-strip .hs-ico{ grid-row:auto; width:38px; height:38px; }
  .hero-s-strip dd{ font-size:10px; letter-spacing:.07em; }
}
@media (prefers-reduced-motion:reduce){
  .hero-s-center, .hero-s-strip{ animation:none !important; }
}

/* ---------- Export map + numbered regions ---------- */
.wmap{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:start; }
.wmap-stage{ position:sticky; top:110px; background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-sm); padding:clamp(54px,6vw,70px) clamp(14px,2.4vw,30px); }
.wmap-box{ position:relative; }
.wmap-svg{ display:block; width:100%; height:auto; overflow:visible; }
.wland path{ fill:#e7e2d4; stroke:#fff; stroke-width:.6; }
.wc{ fill:var(--c); stroke:#fff; stroke-width:.8; transition:opacity .25s; }
.wc-dot{ stroke-width:2; }
.wline line{ stroke:var(--c); stroke-width:1.2; opacity:.55; vector-effect:non-scaling-stroke; }
.wline circle{ fill:#fff; stroke:var(--c); stroke-width:2.5; vector-effect:non-scaling-stroke; }
.wline{ transition:opacity .25s; }
.wpin{
  position:absolute; z-index:2; display:inline-flex; align-items:center; gap:8px; margin:0; cursor:pointer;
  padding:7px 14px 7px 8px; border:0; border-radius:99px; background:var(--c); color:#fff; white-space:nowrap;
  font-family:'Jost',sans-serif; font-size:13px; font-weight:600; letter-spacing:.02em; box-shadow:0 8px 18px -8px rgba(14,31,24,.5);
  transition:opacity .25s;
}
.wpin b{ display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; border-radius:99px; background:rgba(255,255,255,.22); font-size:11px; letter-spacing:.04em; }
.wpin-up{ transform:translate(-50%,-100%); }
.wpin-down{ transform:translate(-50%,0); }
.wpin-left.wpin-down{ transform:translate(-100%,0); border-start-end-radius:4px; }
.wpin-right.wpin-down{ transform:translate(0,0); border-start-start-radius:4px; }
.wpin-left.wpin-up{ transform:translate(-100%,-100%); border-end-end-radius:4px; }
.wpin-right.wpin-up{ transform:translate(0,-100%); border-end-start-radius:4px; }
.wmap[data-active] .wc, .wmap[data-active] .wline, .wmap[data-active] .wpin, .wmap[data-active] .wreg{ opacity:.3; }
.wmap[data-active="europe"] [data-region="europe"],
.wmap[data-active="middle-east"] [data-region="middle-east"],
.wmap[data-active="asia"] [data-region="asia"],
.wmap[data-active="africa"] [data-region="africa"]{ opacity:1; }
.wmap-list{ list-style:none; margin:0; padding:0; border-inline-start:1px solid var(--line); }
.wreg{ display:grid; grid-template-columns:auto 1fr; gap:0 18px; padding:22px 0 22px 26px; position:relative; transition:opacity .25s; outline:none; }
.wreg + .wreg{ border-top:1px solid var(--line); }
.wreg-no{ width:46px; }
.wreg-no span{ display:block; font-family:'Jost',sans-serif; font-size:14px; font-weight:700; letter-spacing:.06em; color:var(--c); padding-bottom:7px; border-bottom:3px solid var(--c); text-align:center; }
.wreg h3{ font-family:'Playfair Display',serif; font-size:clamp(20px,2vw,24px); font-weight:600; line-height:1.2; color:var(--green-950); margin:0 0 6px; }
.wreg-main > p{ margin:0 0 12px; font-size:14px; line-height:1.6; color:var(--slate); }
.wreg-countries{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.wreg-countries li{ padding:4px 11px; border-radius:99px; background:color-mix(in srgb,var(--c) 11%,#fff); border:1px solid color-mix(in srgb,var(--c) 28%,#fff); font-family:'Jost',sans-serif; font-size:12.5px; font-weight:500; color:var(--green-950); }
.wreg-cta{ display:inline-flex; align-items:center; gap:8px; padding:4px 0; background:none; border:0; border-bottom:1.5px solid var(--c); cursor:pointer; font-family:'Jost',sans-serif; font-size:13.5px; font-weight:600; color:var(--c); transition:gap .2s; }
.wreg-cta svg{ width:15px; height:15px; }
.wreg-cta:hover{ gap:12px; }
.wreg:focus-visible{ box-shadow:inset 3px 0 0 var(--c); }
@media (max-width:980px){
  .wmap{ grid-template-columns:1fr; gap:28px; }
  .wmap-stage{ position:static; }
  .wmap-list{ border-inline-start:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; }
  .wreg{ padding:22px 0; }
  .wreg + .wreg{ border-top:0; }
  .wreg:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width:680px){
  .wmap-stage{ padding:44px 10px; border-radius:18px; }
  .wpin{ padding:4px; gap:0; }
  .wpin span{ display:none; }
  .wpin b{ min-width:22px; height:22px; background:transparent; font-size:11px; }
  .wmap-list{ grid-template-columns:1fr; }
  .wreg:nth-child(n+2){ border-top:1px solid var(--line); }
  .wreg{ grid-template-columns:40px 1fr; gap:0 14px; padding:18px 0; }
  .wreg-no{ width:40px; }
}

/* ---------- Certificates ---------- */
.cert-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:42px 20px; padding-top:30px; }
.cert{
  position:relative; flex:1 1 320px; max-width:540px; padding:8px; background:#fffdf5; border:1px solid #e2d8bf;
  box-shadow:0 1px 2px rgba(21,52,40,.08), 0 24px 40px -28px rgba(21,52,40,.5);
}
.cert-in{ height:100%; padding:36px 22px 22px; border:1px solid #cdbf9c; }
.cert-seal{
  position:absolute; z-index:2; top:-30px; inset-inline-end:16px; width:98px; height:98px; border-radius:50%;
  color:#1d4a38; background:#fffdf5; transform:rotate(-9deg);
}
.cert-no{ margin:0 0 32px; font-family:'Jost',sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--orange-dark); }
.cert h3.cert-title{ margin:0 0 6px; font-family:'Playfair Display',serif; font-weight:600; font-size:clamp(27px,7.4vw,33px); line-height:1.1; color:var(--green-950); }
.cert-issuer{ margin:0 0 16px; font-family:'Jost',sans-serif; font-size:13px; font-weight:500; letter-spacing:.04em; color:var(--slate); }
.cert-desc{ margin:0 0 24px; font-size:14.5px; line-height:1.7; color:#4a5a55; }
.cert-label{ margin:0 0 4px; font-family:'Jost',sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--slate); }
.cert-scope{ list-style:none; margin:0; padding:0; border-bottom:1px dotted #b9aa82; }
.cert-scope li{ display:flex; align-items:baseline; gap:16px; padding:11px 0; border-top:1px dotted #b9aa82; font-family:'Jost',sans-serif; font-size:15.5px; font-weight:500; color:var(--green-950); }
.cert-scope .n{ min-width:20px; font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--orange-dark); }
.cert-foot{ margin:20px 0 0; display:flex; align-items:center; gap:10px; font-family:'Jost',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:.05em; color:var(--green-700); }
.cert-foot svg{ width:16px; height:16px; stroke-width:3; }
.cert-skeleton{ flex:1 1 320px; max-width:540px; height:360px; background:linear-gradient(100deg,var(--cream-2) 25%,#fff 40%,var(--cream-2) 55%); background-size:400% 100%; animation:img-shimmer 1.7s ease-in-out infinite; }
@media (min-width:760px){
  .cert-in{ padding:38px 30px 26px; }
  .cert-seal{ inset-inline-end:26px; width:108px; height:108px; }
}

/* floating WhatsApp button steps aside while the hero is on screen */
.whatsapp-float{ transition:opacity .3s ease, transform .3s ease, bottom .2s ease; }
.whatsapp-float.is-tucked{ opacity:0; transform:translateY(14px); pointer-events:none; }

/* ---------- mobile polish ---------- */
@media (max-width:420px){
  .showcase-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .showcase-card{ aspect-ratio:3/4; }
  .showcase-body{ padding:14px 12px; }
  .showcase-body .sc-rule{ margin-bottom:8px; width:22px; }
  .showcase-body h3{ font-size:17px; }
  .showcase-body .sc-variety{ font-size:11px; margin-bottom:0; }
  .showcase-cta, .showcase-badge{ display:none; }
}

/* ---------- mobile catalogue: compact two-up grid ---------- */
@media (max-width:640px){
  .product-grid{ grid-template-columns:repeat(2,1fr) !important; gap:10px; }
  .p-card{ border-radius:14px; }
  .p-card:hover{ transform:none; }
  .p-card-img{ aspect-ratio:1/1; }
  .p-card-body{ padding:11px 11px 13px; gap:6px; }
  .p-card-body h3{ font-size:15px; line-height:1.2; }
  .p-variety{ font-size:11px; }
  .p-swatches, .p-card-foot, .p-card-overlay{ display:none; }
  .p-specs{ display:flex; flex-direction:column; gap:4px; padding-top:8px; font-size:0; }
  .p-specs > div{ font-size:0; }
  .p-specs strong{ font-size:12px; font-weight:600; }
  .p-fav{ opacity:1; transform:none; width:30px; height:30px; top:8px; inset-inline-end:8px; }
  .p-badge{ top:8px; inset-inline-start:8px; padding:4px 8px; font-size:9px; }
  .download-cat{ padding:18px; gap:16px; flex-direction:column; align-items:stretch; }
  .download-cat-left{ gap:14px; align-items:flex-start; }
  .download-cat-icon{ width:46px; height:46px; flex-shrink:0; }
  .download-cat-icon svg{ width:22px; height:22px; }
  .download-cat h3{ font-size:18px; }
  .download-cat .btn{ width:100%; justify-content:center; }
}

/* ---------- mobile: one-line scrolling filter rows ---------- */
@media (max-width:640px){
  .tab-bar, .color-chips, .gallery-chips{
    flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); max-width:none;
  }
  .tab-bar::-webkit-scrollbar, .color-chips::-webkit-scrollbar, .gallery-chips::-webkit-scrollbar{ display:none; }
  .tab-bar .tab, .color-chip, .gchip{ flex:0 0 auto; white-space:nowrap; }
  .gallery-chips{ border-radius:99px; width:auto; margin-inline:calc(-1 * var(--gutter)); box-shadow:none; background:transparent; border:0; }
  .gallery-toolbar{ justify-content:flex-start; }
  .gchip{ background:#fff; border:1px solid var(--line); }
  .gchip.active{ background:var(--green-900); border-color:var(--green-900); }
}
/* map: calm placeholder while the embed loads (or when offline) */
.map-frame{ background:
  linear-gradient(rgba(21,52,40,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(21,52,40,.07) 1px,transparent 1px),
  linear-gradient(135deg,#e8efe9,#dbe7de);
  background-size:44px 44px,44px 44px,auto; }
@media (max-width:640px){
  .filter-bar-v2{ min-width:0; overflow:hidden; }
  .filter-bar-v2 .filter-row{ min-width:0; }
  .color-filter{ flex-direction:column; align-items:stretch; gap:10px; min-width:0; }
  .color-filter .color-chips{ margin-inline:0; padding-inline:0; width:100%; min-width:0; padding-bottom:2px; }
}
.filter-bar-v2{ flex-wrap:nowrap; }
[dir="rtl"] .hero-s-strip dt, [dir="rtl"] .mstat strong{ direction:ltr; text-align:right; unicode-bidi:isolate; }

/* ==========================================================================
   Layout hardening - stops grid/flex children from pushing pages wider than
   the screen (the cause of misaligned, clipped layouts on narrow viewports)
   ========================================================================== */
.contact-grid > *, .split > *, .askus-wrap > *, .hero-s-grid > *, .connect-wrap > *, .recipe-grid > *{ min-width:0; }
.map-card-head{ flex-wrap:wrap; }
.gallery-chips{ max-width:100%; border-radius:26px; }
.color-filter{ max-width:100%; }
.color-chips{ min-width:0; max-width:100%; }
.color-chip{ max-width:100%; }
img, video, svg, iframe{ max-width:100%; }
.contact-info-card, .form-card{ min-width:0; overflow-wrap:anywhere; }
@media (max-width:640px){
  .split-imgs .float-img, .split-imgs-compact .float-img, .split-imgs-md .float-img{ right:-8px; }
}
@media (max-width:420px){
  .btn-lg{ padding:14px 20px; white-space:normal; text-align:center; justify-content:center; }
}
@media (max-width:900px){
  .askus-wrap{ grid-template-columns:1fr; gap:48px; }
  .askus-photo-wrap{ max-width:560px; width:100%; margin-inline:auto; }
}

/* ==========================================================================
   Legal pages (privacy / terms) + footer legal links
   ========================================================================== */
.legal-wrap{ max-width:860px; }
.legal-meta{ margin:0 0 26px; font-size:13.5px; line-height:1.6; color:var(--slate); }
.legal-summary{ margin:0 0 40px; padding:24px 26px; background:#fff; border:1px solid var(--line); border-inline-start:4px solid var(--orange); border-radius:14px; box-shadow:var(--shadow-sm); }
.legal-summary h2{ margin:0 0 10px; font-size:19px; }
.legal-summary ul{ margin:0; padding-inline-start:20px; }
.legal-summary li{ margin:0 0 8px; font-size:14.5px; line-height:1.65; color:var(--green-950); }
.legal h2{ margin:38px 0 12px; font-size:clamp(20px,2.2vw,24px); scroll-margin-top:96px; }
.legal p, .legal li{ font-size:15px; line-height:1.75; color:#3f514b; }
.legal p{ margin:0 0 14px; }
.legal ul{ margin:0 0 16px; padding-inline-start:22px; list-style:disc; }
.legal li{ margin:0 0 8px; }
.legal a{ color:var(--orange-dark); font-weight:600; }
.legal code{ padding:2px 7px; border-radius:6px; background:var(--cream-2); font-size:.88em; color:var(--green-950); word-break:break-all; }
.legal-link-btn{ padding:0; border:0; background:none; cursor:pointer; font:inherit; font-weight:600; color:var(--orange-dark); text-decoration:underline; }
.legal-table{ margin:6px 0 20px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; }
.lt-row{ display:grid; grid-template-columns:.9fr 1.6fr 1.5fr; }
.lt-row > div{ padding:14px 16px; font-size:14px; line-height:1.6; color:#3f514b; }
.lt-row > div + div{ border-inline-start:1px solid var(--line); }
.lt-row + .lt-row{ border-top:1px solid var(--line); }
.lt-head{ background:var(--cream-2); }
.lt-head > div{ font-family:'Jost',sans-serif; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green-900); }
.footer-bottom .footer-privacy-link{ margin-inline-start:14px; }
.footer-cookie-btn{ border:0; background:none; cursor:pointer; padding:0; font:inherit; }
.form-consent{ margin:12px 0 0; font-size:12.5px; line-height:1.55; color:var(--slate); }
.form-consent a{ color:var(--orange-dark); font-weight:600; text-decoration:underline; }
@media (max-width:720px){
  .legal-summary{ padding:20px 18px; }
  .legal p, .legal li{ font-size:14.5px; }
  .lt-head{ display:none; }
  .lt-row{ grid-template-columns:1fr; }
  .lt-row > div{ padding:6px 14px; border-inline-start:0 !important; }
  .lt-row > div:first-child{ padding-top:14px; }
  .lt-row > div:last-child{ padding-bottom:14px; }
  .lt-row > div[data-l]:not(:first-child)::before{ content:attr(data-l); display:block; margin-bottom:2px; font-family:'Jost',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-light); }
}

/* ==========================================================================
   MOBILE TYPE SCALE - compact, easy-to-read sizes on phones
   (inputs stay at 16px on purpose: smaller text makes iPhones zoom in on tap)
   ========================================================================== */
@media (max-width:640px){
  body{ font-size:14.5px; }
  h1, .hero-s h1, .page-hero h1{ font-size:clamp(25px,7vw,29px) !important; line-height:1.18; letter-spacing:-.005em; }
  .page-hero{ min-height:240px; padding-bottom:36px; }
  .page-hero p{ font-size:14px; line-height:1.6; }
  .breadcrumb{ font-size:12px; }
  h2, .section-head h2, .askus-content h2, .cta-banner h2{ font-size:clamp(21px,5.8vw,24px) !important; line-height:1.22; }
  h3{ font-size:clamp(17px,4.8vw,19px); }
  .section-head{ margin-bottom:30px; }
  .section-head p, .askus-content > p{ font-size:14px; line-height:1.65; }
  .eyebrow{ font-size:11px; letter-spacing:.16em; }
  .eyebrow::before{ width:18px; }
  /* hero */
  .hero-s-pill{ font-size:10.5px; letter-spacing:.1em; padding:7px 13px; margin-bottom:18px; }
  .hero-s-copy > p{ font-size:14.5px; line-height:1.65; margin-bottom:24px; }
  .hero-s-strip dt{ font-size:21px; }
  .hero-s-strip dd{ font-size:9.5px; }
  /* buttons */
  .btn{ font-size:13.5px; padding:11px 18px; }
  .btn-lg{ font-size:14px; padding:13px 22px; }
  /* cards & lists */
  .showcase-body h3{ font-size:16px; }
  .testimonial-card blockquote{ font-size:15.5px; line-height:1.6; }
  .testimonial-card .who strong{ font-size:14px; }
  .mstat strong{ font-size:24px; }
  .mstat span{ font-size:9.5px; }
  .wreg h3{ font-size:18px; }
  .wreg-main > p{ font-size:13.5px; }
  .wreg-countries li{ font-size:12px; padding:3px 10px; }
  .wreg-cta{ font-size:13px; }
  .cert h3.cert-title{ font-size:22px; }
  .cert-desc{ font-size:13.5px; line-height:1.65; }
  .cert-scope li{ font-size:14px; }
  .occasion-desc{ font-size:13.5px; }
  .cta-banner p{ font-size:13.5px; }
  .askus-bubble span{ font-size:12px; }
  .stat{ font-size:11px; }
  /* forms: 16px prevents iOS zoom-on-focus */
  input, select, textarea{ font-size:16px !important; }
  .field label, label{ font-size:12px; }
  .form-consent{ font-size:12px; }
  /* footer & legal */
  .footer-brand p{ font-size:13px; }
  .footer-col a, .footer-col p{ font-size:13px; }
  .footer-col h4, .footer-col h2.footer-h{ font-size:11.5px; }
  .footer-bottom{ font-size:12px; gap:6px 0; }
  .legal h2{ font-size:18.5px !important; margin-top:30px; }
  .legal-summary h2{ font-size:17px !important; }
  .legal p, .legal li, .legal-summary li{ font-size:14px; line-height:1.7; }
  .legal-meta{ font-size:12.5px; }
  .lt-row > div{ font-size:13px; }
  .cookie-banner p{ font-size:12.5px; line-height:1.55; }
  /* drawer */
  .mobile-drawer-panel a{ font-size:15px; }
}
@media (max-width:380px){
  h1, .hero-s h1, .page-hero h1{ font-size:clamp(24px,7vw,26px) !important; }
}
.legal .legal-summary h2{ margin:0 0 10px; }

/* ==========================================================================
   Quote builder (inside the quote modal)
   ========================================================================== */
.qb{ margin:0 0 22px; }
.qb-rows{ display:flex; flex-direction:column; gap:10px; }
.qb-row{ display:grid; grid-template-columns:minmax(0,1fr) 78px 124px 36px; gap:8px; align-items:start; }
.qb-pick{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.qb-hint{ min-height:14px; padding-inline:2px; font-family:'Jost',sans-serif; font-size:11.5px; color:var(--slate); }
.qb-variety, .qb-qty, .qb-unit{
  width:100%; height:44px; padding:0 12px; border:1.5px solid var(--line-2); border-radius:10px; background:var(--cream);
  font-family:'Jost',sans-serif; font-size:14px; color:var(--green-950); outline:none; transition:border-color .2s, background .2s;
}
.qb-variety:focus, .qb-qty:focus, .qb-unit:focus{ border-color:var(--orange); background:#fff; }
.qb-variety, .qb-unit{ appearance:none; padding-inline-end:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6b70' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }
.qb-qty{ text-align:center; padding:0 6px; }
.qb-del{ width:36px; height:44px; display:flex; align-items:center; justify-content:center; border:0; border-radius:10px; background:transparent; color:var(--slate); cursor:pointer; transition:background .2s, color .2s; }
.qb-del:hover{ background:var(--rose-tint); color:var(--rose-dark); }
.qb-del svg{ width:17px; height:17px; }
.qb-del[hidden]{ display:none; }
.qb-actions{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px; }
.qb-add, .qb-favs{ display:inline-flex; align-items:center; gap:7px; padding:8px 0; border:0; background:none; cursor:pointer; font-family:'Jost',sans-serif; font-size:13.5px; font-weight:600; color:var(--orange-dark); }
.qb-favs{ color:var(--rose-dark); }
.qb-add svg, .qb-favs svg{ width:15px; height:15px; }
.qb-add:hover, .qb-favs:hover{ text-decoration:underline; }
.qb-favs[hidden]{ display:none; }
.qb-summary{ margin:6px 0 0; padding:10px 14px; border-radius:10px; background:var(--cream-2); font-family:'Jost',sans-serif; font-size:13px; font-weight:500; color:var(--green-900); }
@media (max-width:520px){
  .qb-row{ grid-template-columns:minmax(0,1fr) 138px 34px; row-gap:6px; padding-bottom:12px; border-bottom:1px dashed var(--line-2); }
  .qb-pick{ grid-column:1 / -1; }
  .qb-del{ grid-column:3; grid-row:2; }
  .qb-qty{ grid-column:1; grid-row:2; text-align:start; padding:0 12px; }
  .qb-unit{ grid-column:2; grid-row:2; }
  .qb-variety, .qb-qty, .qb-unit{ font-size:16px; }
}

/* ===== INSIDE OUR PACKHOUSE (photo-led, minimal words) ===== */
.ph{ background:radial-gradient(120% 90% at 50% 0%, #1b4332 0%, var(--green-950) 62%); color:#fff; }
.ph[hidden]{ display:none; }
.ph .section-head{ margin-bottom:38px; }
.ph .section-head .eyebrow{ color:#f0d9a8; }
.ph .section-head h2{ color:#fff; margin-bottom:0; }
.ph-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:18px; counter-reset:ph; }
.ph-card{ position:relative; margin:0; border-radius:22px; overflow:hidden; aspect-ratio:3/4; background:var(--green-900); box-shadow:0 18px 40px rgba(0,0,0,.28); isolation:isolate; counter-increment:ph; }
.ph-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1); z-index:-2; }
.ph-card::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(14,31,24,0) 62%, rgba(14,31,24,.72) 100%); }
@media (hover:hover){ .ph-card:hover img{ transform:scale(1.05); } }
.ph-cap{ position:absolute; left:18px; bottom:18px; display:inline-flex; align-items:center; gap:10px; padding:9px 18px 9px 12px; border-radius:999px; background:rgba(255,255,255,.94); color:var(--green-950); font-family:'Jost',sans-serif; font-weight:600; font-size:14px; letter-spacing:.14em; text-transform:uppercase; box-shadow:0 8px 20px rgba(0,0,0,.22); }
.ph-cap svg, .ph-cap i{ width:22px; height:22px; padding:4px; box-sizing:content-box; border-radius:50%; background:var(--orange); color:#fff; stroke-width:2; }
.ph-cap::after{ content:counter(ph, decimal-leading-zero); margin-left:4px; font-size:11px; letter-spacing:.1em; color:var(--slate); font-weight:500; }
.ph-note{ position:absolute; left:18px; right:18px; bottom:72px; margin:0; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.88); }
/* little arrows between the cards: harvest > grade > pack */
@media (min-width:981px){
  .ph-grid{ gap:34px; }
  .ph-card:not(:last-child)::before{ content:""; position:absolute; z-index:2; right:-27px; top:50%; width:20px; height:20px; transform:translateY(-50%); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0d9a8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; }
}
@media (max-width:980px){ .ph-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .ph-card{ aspect-ratio:3/4.4; border-radius:16px; } .ph-cap{ left:10px; bottom:10px; font-size:11.5px; padding:7px 12px 7px 8px; gap:7px; letter-spacing:.1em; } .ph-cap::after{ display:none; } .ph-cap svg, .ph-cap i{ width:16px; height:16px; } }
@media (max-width:560px){ .ph-grid{ grid-template-columns:1fr; gap:14px; } .ph-card{ aspect-ratio:16/10; } .ph-cap{ left:14px; bottom:14px; font-size:13px; } .ph-cap::after{ display:inline; } .ph-cap svg, .ph-cap i{ width:20px; height:20px; } .ph .section-head{ margin-bottom:26px; } }

/* ===== TESTIMONIAL POLISH ===== */
.testimonial-card{ border-radius:20px; padding:32px 30px 26px; gap:20px; }
.testimonial-card::before{ content:""; position:absolute; left:30px; right:30px; top:0; height:3px; border-radius:0 0 3px 3px; background:linear-gradient(90deg,var(--orange),var(--gold)); }
.testimonial-card .stars{ order:-1; }
.testimonial-card .tm-quote{ width:34px; height:34px; top:30px; }
.testimonial-card blockquote{ font-size:17px; line-height:1.7; }
.testimonial-card .who{ gap:14px; padding-top:18px; }
.testimonial-card .who-av{ width:46px; height:46px; background:linear-gradient(145deg,var(--green-900),#24523f); box-shadow:0 0 0 3px var(--cream-2); }
.testimonial-card .who strong{ font-size:15.5px; line-height:1.3; }
.testimonial-card .who-loc{ display:flex; align-items:center; gap:5px; margin-top:2px; font-size:13px; color:var(--slate); }
.testimonial-card .who-loc svg, .testimonial-card .who-loc i{ width:13px; height:13px; color:var(--orange-dark); flex-shrink:0; }

/* ===== QUOTE: destination picker ===== */
.qdest{ display:flex; flex-direction:column; gap:10px; }
.qdest-other input{ border-color:var(--orange); background:#fff; animation:modalIn .2s ease; }
.qdest-other[hidden]{ display:none; }
.testimonial-card .who strong, .testimonial-card .who-loc{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.testimonial-card .who-txt{ flex:1; }

.connect-card[hidden]{ display:none !important; }


/* ==========================================================================
   HERO (full-photo, centred headline, slider arrows, social row)
   ========================================================================== */
.hero-s-top{
  position:relative; overflow:hidden; isolation:isolate; background:var(--green-950);
  min-height:clamp(520px,84vh,760px); display:flex; align-items:center; justify-content:center;
  padding:clamp(56px,8vw,96px) 0 clamp(120px,11vw,150px);
}
.hero-s-slides{ position:absolute; inset:0; z-index:-2; }
.hero-s-slides img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%;
  opacity:0; transform:scale(1.04); transition:opacity 1.1s ease, transform 7s ease-out;
}
.hero-s-slides img.is-on{ opacity:1; transform:scale(1); }
.hero-s-top::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(70% 60% at 50% 45%, rgba(6,24,14,.25), rgba(6,24,14,.6) 100%),
    linear-gradient(180deg, rgba(6,24,14,.35), rgba(6,24,14,.45));
}
.hero-s-center{ text-align:center; display:flex; flex-direction:column; align-items:center; animation:heroRise .9s .05s cubic-bezier(.2,.7,.2,1) both; }
.hero-s .hero-s-pill{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); color:#fff;
  box-shadow:none; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.hero-s .hero-s-center h1{
  font-family:'Jost',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(40px,8.4vw,112px) !important; line-height:.98; color:#fff; max-width:11em; margin:0 0 24px;
  text-shadow:0 10px 40px rgba(0,0,0,.45);
}
.hero-s .hero-s-center h1 em{ color:#ffc9a3; font-style:normal; display:block; }
.hero-s .hero-s-center > p{ color:rgba(255,255,255,.92); text-align:center; margin:0 0 30px; max-width:32em; font-size:clamp(15px,1.5vw,19px); }
.hero-s .hero-s-ctas{ justify-content:center; }
.hero-s-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; color:#fff; background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .2s, transform .2s;
}
.hero-s-arrow:hover{ background:var(--orange); border-color:var(--orange); }
.hero-s-arrow svg{ width:20px; height:20px; }
.hero-s-arrow--prev{ inset-inline-start:clamp(12px,3vw,44px); }
.hero-s-arrow--next{ inset-inline-end:clamp(12px,3vw,44px); }
[dir="rtl"] .hero-s-arrow svg{ transform:scaleX(-1); }
.hero-s-social{
  position:absolute; z-index:3; inset-inline:0; inset-block-end:clamp(64px,7vw,84px);
  display:flex; justify-content:center; gap:12px;
}
.hero-s-social a{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--green-950);
  transition:transform .2s, background .2s, color .2s;
}
.hero-s-social a[hidden]{ display:none !important; }
.hero-s-social a:hover{ transform:translateY(-3px); background:var(--orange); color:#fff; }
.hero-s-social svg{ width:18px; height:18px; }
@media (max-width:900px){
  .hero-s-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .hero-s-top{ min-height:560px; padding-bottom:130px; }
  .hero-s .hero-s-center h1{ font-size:clamp(34px,11.5vw,48px) !important; line-height:1.02; }
  .hero-s-arrow{ width:36px; height:36px; top:auto; bottom:18px; transform:none; }
  .hero-s-arrow--prev{ inset-inline-start:16px; } .hero-s-arrow--next{ inset-inline-end:16px; }
  .hero-s-social{ inset-block-end:24px; }
  .hero-s .hero-s-ctas .btn{ flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce){ .hero-s-slides img{ transition:none; transform:none; } }

/* hero: one big word + slim slogan */
.hero-s .hero-s-center h1{
  font-size:clamp(52px,10.5vw,132px) !important; line-height:.95; letter-spacing:.06em; max-width:none; margin:0 0 18px;
}
.hero-s .hero-s-slogan{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 16px; margin:0 0 32px; max-width:none;
  font-family:'Jost',sans-serif; font-weight:500; font-size:clamp(13px,1.45vw,18px); letter-spacing:.24em; text-transform:uppercase; color:#fff;
}
.hero-s .hero-s-slogan i{ width:5px; height:5px; border-radius:50%; background:var(--orange); flex-shrink:0; }
@media (max-width:640px){
  .hero-s .hero-s-center h1{ font-size:clamp(50px,17vw,78px) !important; line-height:.95; letter-spacing:.05em; margin-bottom:16px; }
  .hero-s .hero-s-slogan{ flex-direction:column; gap:7px; font-size:12.5px; letter-spacing:.2em; margin-bottom:28px; }
  .hero-s .hero-s-slogan i{ display:none; }
  .hero-s-top{ min-height:0; padding:64px 0 120px; }
}

/* footer: legal line first, then the "Website by" credit */
.footer-bottom{ justify-content:center; text-align:center; padding:22px 0 4px; border-top:1px solid rgba(255,255,255,.08); }
.footer-dev{ border-top:0; margin-top:0; padding:10px 0 18px; }
@media (min-width:641px){ .hero-s .hero-s-slogan{ flex-wrap:nowrap; white-space:nowrap; } }
@media (max-width:640px){
  .hero-s-top{ padding:56px 0 190px; }
  .hero-s-arrow{ bottom:84px; }
  .hero-s-social{ inset-block-end:90px; }
}

/* hero: clean, slogan only */
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hero-s .hero-s-slogan{ font-size:clamp(18px,3.1vw,40px); font-weight:600; letter-spacing:.22em; gap:10px 22px; margin-bottom:38px; text-shadow:0 6px 30px rgba(0,0,0,.45); }
.hero-s .hero-s-slogan i{ width:7px; height:7px; }
.hero-s-top{ padding-bottom:clamp(110px,10vw,140px); }
@media (max-width:640px){
  .hero-s .hero-s-slogan{ font-size:clamp(22px,7vw,28px); letter-spacing:.16em; gap:12px; margin-bottom:34px; }
  .hero-s-top{ padding:80px 0 150px; min-height:0; }
  .hero-s-arrow{ bottom:84px; }
}


/* ==========================================================================
   HOME: OCCASIONS CTA
   ========================================================================== */
.occ-cta-sec{ padding-top:clamp(28px,4vw,56px); }
.occ-cta{
  position:relative; overflow:hidden; isolation:isolate; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center;
  gap:clamp(28px,4vw,56px); padding:clamp(28px,5vw,64px); border-radius:28px; color:#fff;
  background:radial-gradient(70% 90% at 100% 0%, rgba(217,98,43,.28), transparent 60%), linear-gradient(135deg,var(--green-950),var(--green-800));
  box-shadow:var(--shadow-lg);
}
.occ-cta-copy{ position:relative; z-index:2; }
.occ-cta .eyebrow{ color:#f6c9a8; }
.occ-cta h2{ color:#fff; font-size:clamp(28px,3.6vw,46px); line-height:1.1; max-width:13em; margin:6px 0 14px; text-wrap:balance; }
.occ-cta-copy > p{ color:#d6e0d8; max-width:34em; font-size:clamp(14.5px,1.2vw,16.5px); line-height:1.7; margin:0 0 18px; }
.occ-next{ display:inline-flex !important; align-items:center; gap:8px; padding:8px 14px; border-radius:99px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); color:#fff !important; font-family:'Jost',sans-serif; font-weight:500; font-size:13.5px !important; margin:0 0 22px !important; }
.occ-next[hidden]{ display:none !important; }
.occ-next svg{ width:16px; height:16px; color:#f6c9a8; }
.occ-cta-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.occ-cta-actions .btn{ justify-content:center; }
.occ-cta-media{ position:relative; display:block; min-height:clamp(260px,30vw,380px); z-index:1; }
.occ-ph{ position:absolute; margin:0; width:52%; aspect-ratio:3/4; border-radius:20px; overflow:hidden; box-shadow:0 22px 50px rgba(0,0,0,.4); border:4px solid rgba(255,255,255,.92); transition:transform .5s cubic-bezier(.2,.7,.2,1); background:var(--green-900); }
.occ-ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.occ-ph figcaption{ position:absolute; inset:auto 0 0 0; padding:26px 12px 10px; background:linear-gradient(0deg,rgba(6,24,14,.82),transparent); color:#fff; font-family:'Jost',sans-serif; font-weight:600; font-size:13px; letter-spacing:.04em; }
.occ-ph--a{ inset-inline-start:0; top:8%; transform:rotate(-6deg); z-index:1; }
.occ-ph--b{ inset-inline-end:0; top:0; transform:rotate(5deg); z-index:2; }
.occ-ph--c{ inset-inline-start:24%; bottom:0; width:48%; transform:rotate(-1deg); z-index:3; }
.occ-cta-media:hover .occ-ph--a{ transform:rotate(-9deg) translateX(-6px); }
.occ-cta-media:hover .occ-ph--b{ transform:rotate(8deg) translateX(6px); }
.occ-cta-media:hover .occ-ph--c{ transform:rotate(0deg) translateY(-8px); }
@media (max-width:900px){
  .occ-cta{ grid-template-columns:1fr; }
  .occ-cta-media{ min-height:300px; max-width:520px; width:100%; margin-inline:auto; }
}
@media (max-width:560px){
  .occ-cta{ border-radius:22px; }
  .occ-cta-actions .btn{ flex:1 1 100%; }
  .occ-cta-media{ min-height:250px; }
  .occ-ph figcaption{ font-size:11.5px; padding:20px 8px 8px; }
}
@media (prefers-reduced-motion:reduce){ .occ-ph{ transition:none; } }

/* ==========================================================================
   Extra features: compare, My catalogue, PDF buttons, toasts, install, helper
   ========================================================================== */
.btn-sm{ padding:9px 14px; font-size:13px; }
.btn-lg{ padding:14px 26px; font-size:15px; }
.btn-whatsapp-order{ background:#25d366; color:#06371b; }
.btn-whatsapp-order:hover{ background:#1fbd5b; transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:3px solid var(--orange); outline-offset:2px; }

/* compare button on cards */
.p-card{ position:relative; }
.p-cmp{
  position:absolute; bottom:12px; left:12px; z-index:3; display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.94); color:var(--green-900); border:1px solid var(--line-2); border-radius:30px;
  padding:6px 12px 6px 9px; font-family:'Jost',sans-serif; font-size:12px; font-weight:600; cursor:pointer;
  box-shadow:var(--shadow-sm); transition:all .18s ease;
}
.p-cmp svg{ width:14px; height:14px; }
.p-cmp:hover{ background:#fff; border-color:var(--green-900); }
.p-cmp.is-cmp{ background:var(--green-900); color:#fff; border-color:var(--green-900); }
@media (max-width:560px){ .p-cmp span{ display:none; } .p-cmp{ padding:8px; } }

.cmp-tray{
  position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:180; width:min(720px,calc(100% - 24px));
  background:var(--green-950); color:#fff; border-radius:18px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  box-shadow:var(--shadow-lg);
}
.cmp-tray[hidden]{ display:none; }
.cmp-tray-chips{ display:flex; gap:8px; flex-wrap:wrap; min-width:0; }
.cmp-chip{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.12); border-radius:30px; padding:6px 6px 6px 12px; font-size:13px; font-family:'Jost',sans-serif; font-weight:500; }
.cmp-chip button{ background:rgba(255,255,255,.16); color:#fff; border:none; border-radius:50%; width:22px; height:22px; display:grid; place-items:center; cursor:pointer; }
.cmp-chip svg{ width:12px; height:12px; }
.cmp-tray-actions{ display:flex; align-items:center; gap:12px; }
.cmp-tray .fav-clear{ color:#c3ccc5; }
@media (max-width:560px){ .cmp-tray-actions{ width:100%; justify-content:space-between; } .cmp-tray .btn{ flex:1; justify-content:center; } }

.px-dialog .px-wide{ max-width:900px; }
.cmp-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -6px; padding:0 6px; }
.cmp-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:520px; }
.cmp-table th, .cmp-table td{ padding:12px 10px; text-align:left; vertical-align:middle; border-bottom:1px solid var(--line); font-size:14px; }
.cmp-table th{ width:104px; font-family:'Jost',sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--slate); position:sticky; left:0; background:#fff; z-index:1; }
.cmp-table tr:last-child th, .cmp-table tr:last-child td{ border-bottom:none; }
.cmp-img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px; display:block; background:var(--cream-2); }
.cmp-name{ font-family:'Playfair Display',serif; font-size:21px; color:var(--green-900); display:block; }
.cmp-badge, .cmp-tag{ display:inline-block; margin-top:4px; background:var(--orange); color:#fff; border-radius:30px; padding:2px 9px; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-family:'Jost',sans-serif; }
.cmp-tag{ background:var(--green-700); margin:0 0 0 6px; }
.cmp-sw{ display:inline-block; width:14px; height:14px; border-radius:50%; margin-right:8px; vertical-align:-2px; border:1px solid var(--line-2); }
.cmp-fav{ display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid var(--line-2); border-radius:30px; padding:6px 12px; cursor:pointer; font-family:'Jost',sans-serif; font-size:13px; font-weight:600; color:var(--slate); }
.cmp-fav svg{ width:14px; height:14px; }
.cmp-fav.on{ color:var(--rose-dark); border-color:var(--rose); } .cmp-fav.on svg{ fill:var(--rose); color:var(--rose); }
.cmp-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.cmp-rm{ background:none; border:none; color:var(--slate); text-decoration:underline; cursor:pointer; font-size:12.5px; padding:0; }

/* My catalogue dialog */
.pf-list{ display:flex; flex-direction:column; gap:8px; max-height:260px; overflow-y:auto; padding-right:2px; }
.pf-item{ display:flex; align-items:center; gap:12px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:var(--cream); }
.pf-item img{ width:46px; height:46px; border-radius:9px; object-fit:cover; flex:none; }
.pf-item div{ flex:1; min-width:0; } .pf-item strong{ display:block; font-family:'Playfair Display',serif; font-size:18px; color:var(--green-900); line-height:1.1; }
.pf-item small{ color:var(--slate); font-size:12.5px; }
.pf-del{ background:#fff; border:1px solid var(--line-2); border-radius:50%; width:30px; height:30px; display:grid; place-items:center; cursor:pointer; color:var(--slate); flex:none; }
.pf-del svg{ width:14px; height:14px; }
.pf-empty{ color:var(--slate); text-align:center; padding:18px 8px; }
.pf-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
.pf-actions .btn{ justify-content:center; }
.pf-actions .btn:first-child{ grid-column:1 / -1; }
.pf-hint{ font-size:12.5px; color:var(--slate); margin-top:12px; line-height:1.5; }
@media (max-width:560px){ .pf-actions{ grid-template-columns:1fr; } }
.fav-bar-actions .btn svg{ width:15px; height:15px; }

/* quote PDF buttons */
.q-pdf-row{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px; }
.q-pdf-row .btn{ justify-content:center; }
.q-pdf-row--success{ display:flex; flex-wrap:wrap; justify-content:center; margin:18px 0 6px; }

/* toast */
.px-toast{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,30px); opacity:0; pointer-events:none; z-index:1200;
  background:var(--green-950); color:#fff; padding:12px 16px; border-radius:14px; box-shadow:var(--shadow-lg);
  display:flex; gap:14px; align-items:center; max-width:min(520px,calc(100% - 24px)); font-size:14px; line-height:1.4;
  transition:all .28s ease;
}
.px-toast.show{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.px-toast button{ background:var(--orange); color:#fff; border:none; border-radius:8px; padding:7px 12px; font-weight:600; cursor:pointer; flex:none; }

.footer-install-btn{ background:none; border:none; cursor:pointer; font:inherit; display:inline-flex; align-items:center; gap:6px; padding:0; }
.footer-install-btn svg{ width:14px; height:14px; }

/* occasions chip */
.occ-next{ margin-top:12px; }

/* ----- accessibility modes (set on <html> by the Site Helper) ----- */
html.a11y-text-1{ font-size:112.5%; } html.a11y-text-2{ font-size:125%; } html.a11y-text-3{ font-size:143%; }
html.a11y-font body, html.a11y-font .btn, html.a11y-font input, html.a11y-font select, html.a11y-font textarea, html.a11y-font h1, html.a11y-font h2, html.a11y-font h3, html.a11y-font h4{
  font-family:Verdana, Tahoma, 'Segoe UI', Arial, sans-serif !important; letter-spacing:.02em; word-spacing:.12em;
}
html.a11y-font p, html.a11y-font li{ line-height:1.8 !important; }
html.a11y-links a:not(.btn){ text-decoration:underline !important; text-underline-offset:3px; }
html.a11y-calm *, html.a11y-calm *::before, html.a11y-calm *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
html.a11y-contrast{ --slate:#161616; --slate-light:#3a3a3a; --line:#6b6b6b; --line-2:#505050; --cream:#ffffff; --cream-2:#f2f2f2; --cream-3:#e4e4e4; --orange:#b43c00; --orange-dark:#8c2e00; --rose:#9c1f45; --rose-dark:#7c1535; --green-600:#1d4d38; }
html.a11y-contrast body{ background:#fff; }
html.a11y-contrast p, html.a11y-contrast li{ font-weight:500; }
html.a11y-contrast a:not(.btn){ text-decoration:underline; text-underline-offset:3px; }
html.a11y-contrast .btn-outline-dark{ border-width:2px; }
html.a11y-contrast :focus-visible{ outline:4px solid #0a3cff !important; outline-offset:3px; }

/* ----- Site Helper ----- */
.ph-launch{
  position:fixed; left:18px; bottom:18px; z-index:170; display:flex; align-items:center; gap:10px;
  background:var(--green-950); color:#fff; border:none; border-radius:60px; padding:7px 18px 7px 7px; cursor:pointer;
  box-shadow:var(--shadow-lg); font-family:'Jost',sans-serif; font-weight:600; font-size:14px; transition:transform .2s ease, background .2s ease;
}
.ph-launch:hover{ transform:translateY(-3px); background:var(--green-800); }
.ph-launch-logo{ width:42px; height:42px; border-radius:50%; background:#fff; display:grid; place-items:center; overflow:hidden; flex:none; }
.ph-launch-logo img{ width:34px; height:34px; object-fit:contain; }
.ph-launch.is-open{ display:none; }
body.cookie-banner-open .ph-launch{ bottom:200px; } @media (min-width:640px){ body.cookie-banner-open .ph-launch{ bottom:100px; } }
body.has-cmp-tray .ph-launch{ bottom:96px; }
@media (max-width:560px){ .ph-launch-label{ display:none; } .ph-launch{ padding:6px; } }

.ph-panel{
  position:fixed; left:18px; bottom:18px; z-index:1100; width:400px; max-width:calc(100vw - 24px); height:min(620px,calc(100vh - 36px)); height:min(620px,calc(100dvh - 36px));
  background:#fff; border-radius:22px; box-shadow:0 30px 80px rgba(9,18,14,.38); display:none; flex-direction:column; overflow:hidden; border:1px solid var(--line);
}
.ph-panel.open{ display:flex; animation:modalIn .26s cubic-bezier(.2,.8,.3,1); }
.ph-head{ background:linear-gradient(150deg,var(--green-800),var(--green-950)); color:#fff; padding:14px 14px 14px 16px; display:flex; align-items:center; gap:12px; flex:none; }
.ph-head-logo{ width:44px; height:44px; border-radius:50%; background:#fff; display:grid; place-items:center; flex:none; }
.ph-head-logo img{ width:36px; height:36px; object-fit:contain; }
.ph-head-text{ flex:1; min-width:0; } .ph-head-text strong{ display:block; font-family:'Playfair Display',serif; font-size:20px; line-height:1.1; }
.ph-head-text small{ color:#c3ccc5; font-size:12px; display:flex; align-items:center; gap:6px; } .ph-head-text small::before{ content:''; width:7px; height:7px; border-radius:50%; background:#5be08a; }
.ph-icon-btn{ background:rgba(255,255,255,.12); border:none; color:#fff; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; cursor:pointer; flex:none; }
.ph-icon-btn:hover{ background:rgba(255,255,255,.22); } .ph-icon-btn svg{ width:17px; height:17px; }
.ph-icon-btn[aria-pressed="true"]{ background:var(--orange); }
.ph-tabs{ display:flex; border-bottom:1px solid var(--line); flex:none; background:var(--cream); }
.ph-tab{ flex:1; padding:11px 8px; background:none; border:none; font-family:'Jost',sans-serif; font-weight:600; font-size:13.5px; color:var(--slate); cursor:pointer; border-bottom:3px solid transparent; display:flex; align-items:center; justify-content:center; gap:6px; }
.ph-tab svg{ width:15px; height:15px; } .ph-tab[aria-selected="true"]{ color:var(--green-900); border-bottom-color:var(--orange); }
.ph-body{ flex:1; min-height:0; display:flex; flex-direction:column; }
.ph-log{ flex:1; overflow-y:auto; padding:16px 14px 6px; display:flex; flex-direction:column; gap:10px; background:var(--cream); scroll-behavior:smooth; }
.ph-msg{ max-width:88%; padding:10px 14px; border-radius:16px; font-size:14.5px; line-height:1.5; word-wrap:break-word; overflow-wrap:anywhere; }
.ph-msg.bot{ background:#fff; border:1px solid var(--line); border-top-left-radius:5px; align-self:flex-start; color:var(--green-950); }
.ph-msg.me{ background:var(--green-900); color:#fff; border-top-right-radius:5px; align-self:flex-end; }
.ph-msg a{ color:var(--orange-dark); font-weight:600; } .ph-msg b{ font-weight:700; }
.ph-msg .ph-card{ display:flex; gap:10px; align-items:center; margin-top:8px; padding:8px; border:1px solid var(--line); border-radius:12px; background:var(--cream); text-decoration:none; color:inherit; }
.ph-msg .ph-card img{ width:42px; height:42px; object-fit:cover; border-radius:8px; }
.ph-msg .ph-card span{ font-size:13px; line-height:1.3; } .ph-msg .ph-card strong{ display:block; font-family:'Playfair Display',serif; font-size:17px; color:var(--green-900); }
.ph-chips{ display:flex; gap:7px; flex-wrap:wrap; padding:6px 14px 10px; background:var(--cream); flex:none; max-height:112px; overflow-y:auto; }
.ph-chip{ background:#fff; border:1.5px solid var(--line-2); border-radius:30px; padding:7px 13px; font-size:13px; font-family:'Jost',sans-serif; font-weight:600; color:var(--green-900); cursor:pointer; }
.ph-chip:hover{ border-color:var(--orange); color:var(--orange-dark); }
.ph-typing{ display:flex; gap:4px; padding:12px 14px; } .ph-typing i{ width:7px; height:7px; border-radius:50%; background:var(--slate-light); animation:phDot 1s infinite; } .ph-typing i:nth-child(2){ animation-delay:.15s; } .ph-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes phDot{ 0%,80%,100%{ transform:translateY(0); opacity:.5; } 40%{ transform:translateY(-4px); opacity:1; } }
.ph-form{ display:flex; gap:8px; padding:10px 12px 12px; border-top:1px solid var(--line); background:#fff; flex:none; align-items:center; }
.ph-form input{ flex:1; min-width:0; border:1.5px solid var(--line-2); border-radius:30px; padding:11px 16px; font-size:16px; font-family:inherit; background:var(--cream); }
.ph-form input:focus{ border-color:var(--orange); background:#fff; outline:none; }
.ph-send, .ph-mic{ width:42px; height:42px; border-radius:50%; border:none; display:grid; place-items:center; cursor:pointer; flex:none; }
.ph-send{ background:var(--orange); color:#fff; } .ph-mic{ background:var(--cream-2); color:var(--green-900); } .ph-mic[aria-pressed="true"]{ background:#d33; color:#fff; }
.ph-send svg, .ph-mic svg{ width:18px; height:18px; }
.ph-a11y{ flex:1; overflow-y:auto; padding:16px; background:var(--cream); display:none; }
.ph-panel.tab-a11y .ph-body{ display:none; } .ph-panel.tab-a11y .ph-a11y{ display:block; }
.ph-a11y h4{ font-family:'Playfair Display',serif; font-size:20px; color:var(--green-900); margin-bottom:4px; } .ph-a11y > p{ font-size:13.5px; color:var(--slate); margin-bottom:14px; line-height:1.5; }
.ph-opt{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:11px 14px; margin-bottom:8px; font-size:14px; font-weight:500; }
.ph-opt small{ display:block; color:var(--slate); font-weight:400; font-size:12px; }
.ph-switch{ position:relative; width:46px; height:26px; border-radius:20px; background:var(--line-2); border:none; cursor:pointer; flex:none; transition:background .2s; }
.ph-switch::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.ph-switch[aria-checked="true"]{ background:var(--green-700); } .ph-switch[aria-checked="true"]::after{ transform:translateX(20px); }
.ph-size{ display:flex; align-items:center; gap:6px; } .ph-size button{ width:36px; height:36px; border-radius:10px; border:1.5px solid var(--line-2); background:#fff; font-weight:700; cursor:pointer; color:var(--green-900); } .ph-size span{ min-width:34px; text-align:center; font-weight:600; }
.ph-reset{ background:none; border:none; color:var(--slate); text-decoration:underline; cursor:pointer; margin-top:6px; font-size:13px; }
html[dir="rtl"] .ph-launch, html[dir="rtl"] .ph-panel{ left:auto; right:18px; }
html[dir="rtl"] .whatsapp-float, html[dir="rtl"] .mix-bubble{ right:auto; left:28px; }
@media (max-width:560px){
  .ph-panel{ left:0; right:0; bottom:0; width:100%; max-width:100%; height:min(88vh,calc(100dvh - 12px)); border-radius:22px 22px 0 0; }
  html[dir="rtl"] .ph-panel{ right:0; }
}
body.cookie-banner-open .cmp-tray{ bottom:210px; } @media (min-width:640px){ body.cookie-banner-open .cmp-tray{ bottom:110px; } }
body.cookie-banner-open.has-cmp-tray .ph-launch{ bottom:290px; } @media (min-width:640px){ body.cookie-banner-open.has-cmp-tray .ph-launch{ bottom:190px; } }
@media (max-width:560px){ body.has-cmp-tray .ph-launch{ bottom:150px; } body.cookie-banner-open.has-cmp-tray .ph-launch{ bottom:350px; } .ph-chips{ max-height:136px; } }

.pf-actions .btn:last-child:nth-child(odd){ grid-column:1 / -1; }
@media (max-width:560px){
  .cmp-table{ min-width:0; } .cmp-table th{ width:68px; font-size:10px; padding:10px 6px; } .cmp-table td{ min-width:116px; padding:10px 6px; font-size:13px; }
  .cmp-name{ font-size:18px; } .cmp-scroll{ margin:0 -10px; padding:0 10px; }
}

/* ---- helper sits bottom-right (where the WhatsApp bubble used to be) ---- */
.whatsapp-float{ display:none !important; }
.ph-launch{ left:auto; right:max(18px, env(safe-area-inset-right)); bottom:max(18px, env(safe-area-inset-bottom)); width:60px; height:60px; padding:0; justify-content:center; border-radius:50%; gap:0; background:#fff; border:2px solid var(--green-900); box-shadow:0 14px 34px rgba(14,31,24,.28); }
.ph-launch:hover{ background:#fff; transform:translateY(-3px) scale(1.04); }
.ph-launch-logo{ width:52px; height:52px; background:transparent; }
.ph-launch-logo img{ width:46px; height:46px; }
.ph-launch-label{ position:absolute; right:68px; top:50%; transform:translateY(-50%); background:var(--green-950); color:#fff; padding:8px 14px; border-radius:20px; font-size:13px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s; box-shadow:var(--shadow-md); }
.ph-launch:hover .ph-launch-label, .ph-launch:focus-visible .ph-launch-label{ opacity:1; }
.ph-launch::after{ content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--orange); opacity:0; animation:phPulse 3.2s ease-out 2s 2; pointer-events:none; }
@keyframes phPulse{ 0%{ opacity:.7; transform:scale(.9); } 100%{ opacity:0; transform:scale(1.25); } }
.mix-bubble{ right:max(18px, env(safe-area-inset-right)); bottom:92px; }
body.cookie-banner-open .mix-bubble{ bottom:290px; } @media (min-width:640px){ body.cookie-banner-open .mix-bubble{ bottom:190px; } }
.ph-panel{ left:auto; right:max(18px, env(safe-area-inset-right)); bottom:max(18px, env(safe-area-inset-bottom)); }
html[dir="rtl"] .ph-launch, html[dir="rtl"] .ph-panel{ right:auto; left:max(18px, env(safe-area-inset-left)); }
html[dir="rtl"] .mix-bubble{ right:auto; left:18px; }
html[dir="rtl"] .ph-launch-label{ right:auto; left:68px; }
body.cookie-banner-open .ph-launch{ bottom:200px; } @media (min-width:640px){ body.cookie-banner-open .ph-launch{ bottom:100px; } }
body.has-cmp-tray .ph-launch{ bottom:96px; }
@media (max-width:560px){
  .ph-launch{ width:54px; height:54px; right:max(14px, env(safe-area-inset-right)); bottom:max(14px, env(safe-area-inset-bottom)); }
  .ph-launch-logo{ width:46px; height:46px; } .ph-launch-logo img{ width:40px; height:40px; }
  .ph-launch-label{ display:none; }
  .mix-bubble{ bottom:80px; right:14px; }
  body.has-cmp-tray .ph-launch{ bottom:150px; } body.cookie-banner-open.has-cmp-tray .ph-launch{ bottom:350px; }
  .ph-panel{ left:12px; right:12px; bottom:max(12px, env(safe-area-inset-bottom)); width:auto; max-width:none; height:min(640px, calc(100vh - 96px)); height:min(640px, calc(100dvh - 96px)); border-radius:22px; border:1px solid var(--line); box-shadow:0 20px 60px rgba(9,18,14,.45); }
  html[dir="rtl"] .ph-panel{ left:12px; right:12px; }
  .ph-head{ padding:12px 12px 12px 14px; } .ph-msg{ max-width:92%; }
  .ph-form{ padding:10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .ph-chips{ padding:6px 12px 10px; }
}
body.ph-open{ overflow:visible; }

/* ---- layout stability ---- */
i[data-lucide]{ display:inline-block; width:1.1em; height:1.1em; flex:none; }
.gallery-grid{ min-height:70vh; }
.data-skeleton-grid{ min-height:320px; }

/* ---- footer headings: smaller, and stop phone browsers from auto-enlarging text ---- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.site-footer .footer-col h2.footer-h, .site-footer .footer-col h4{ font-size:11px !important; letter-spacing:.1em; margin-bottom:14px; line-height:1.3; }
@media (max-width:640px){ .site-footer .footer-col h2.footer-h, .site-footer .footer-col h4{ font-size:10.5px !important; margin-bottom:12px; } }

/* ===== v18: quick view fits any screen height ===== */
#productModal .modal-panel{ overflow-y:auto; overflow-x:hidden; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overscroll-behavior:contain; }
#productModal .pm-photo-wrap{ aspect-ratio:auto; height:clamp(150px, 36vh, 300px); }
#productModal .pm-close{ position:absolute; top:14px; right:14px; z-index:3; }
#productModal .pm-body{ padding:22px 26px 24px; }
@media (max-height:620px){ #productModal .pm-photo-wrap{ height:130px; } #productModal .pm-body{ padding:16px 22px 18px; } }

/* ===== v18: compare dialog, compact ===== */
#cmpModal .modal-panel{ max-width:760px; }
#cmpModal .modal-band{ padding:16px 22px 14px; }
#cmpModal .modal-band::after{ display:none; }
#cmpModal .modal-icon-badge, #cmpModal .modal-band p{ display:none; }
#cmpModal .modal-band .eyebrow{ margin-bottom:2px; font-size:10.5px; }
#cmpModal .modal-band h3{ font-size:19px; margin:0; }
#cmpModal .modal-close{ width:30px; height:30px; }
#cmpModal .modal-body{ padding:12px 20px 18px; }
#cmpModal .cmp-table{ min-width:0; table-layout:fixed; }
#cmpModal .cmp-table th{ width:78px; font-size:10px; padding:8px 6px; }
#cmpModal .cmp-table td{ padding:8px 8px; font-size:13px; }
#cmpModal .cmp-img{ aspect-ratio:4/3; max-height:96px; border-radius:10px; }
#cmpModal .cmp-name{ font-size:16px; }
#cmpModal .cmp-fav{ padding:4px 10px; font-size:12px; }
#cmpModal .cmp-actions .btn{ padding:7px 12px; font-size:12px; }
#cmpModal .cmp-rm{ font-size:11.5px; }
@media (max-width:560px){ #cmpModal .cmp-table th{ width:56px; font-size:9px; } #cmpModal .cmp-img{ max-height:72px; } #cmpModal .modal-body{ padding:10px 12px 14px; } }

/* ===== v18: sustainability pillar icons ===== */
.pillar{ position:relative; }
.pillar .pillar-ico{ width:58px; height:58px; border-radius:16px; display:grid; place-items:center; margin-bottom:18px; color:var(--orange); background:linear-gradient(145deg, rgba(226,112,63,.22), rgba(226,112,63,.06)); border:1px solid rgba(226,112,63,.35); }
.pillar .pillar-ico svg{ width:28px; height:28px; stroke-width:1.7; }
.pillar .num{ position:absolute; top:22px; right:26px; font-size:22px; margin:0; opacity:.55; }
.pillar:nth-child(2) .pillar-ico{ color:#8fd19e; background:linear-gradient(145deg, rgba(143,209,158,.22), rgba(143,209,158,.05)); border-color:rgba(143,209,158,.4); }
.pillar:nth-child(3) .pillar-ico{ color:#f0d9a8; background:linear-gradient(145deg, rgba(240,217,168,.22), rgba(240,217,168,.05)); border-color:rgba(240,217,168,.4); }

/* ===== v18: catalogue copes with any number of varieties ===== */
.tab-bar{ gap:8px; }
@media (max-width:640px){ .tab-bar{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-left:-4px; padding:0 4px 4px; } .tab-bar::-webkit-scrollbar{ display:none; } .tab{ flex:0 0 auto; white-space:nowrap; } }
.product-grid > .p-card{ content-visibility:auto; contain-intrinsic-size:auto 420px; min-width:0; }
.p-card h3, .p-variety{ overflow-wrap:anywhere; }

/* =====================================================================
   v20 RESPONSIVE PASS - tablets (iPad, Galaxy Tab, Xiaomi Pad...), laptops, TVs
   ===================================================================== */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
img, video, svg, canvas{ max-width:100%; }

/* Tablets, portrait and landscape */
@media (min-width:641px) and (max-width:1100px){
  :root{ --gutter:32px; }
  .section{ padding:76px 0; }
  .product-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
  .p-card-img{ aspect-ratio:1/1; }
  .p-card-body{ padding:16px; }
  .showcase-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .showcase-card{ aspect-ratio:5/4; }
  .feature-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .gallery-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .testimonial-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contact-grid{ grid-template-columns:1fr; max-width:760px; margin-inline:auto; }
  .hero-s-inner, .page-hero-inner{ padding-left:var(--gutter); padding-right:var(--gutter); }
}
@media (min-width:700px) and (max-width:1100px){
  .pillars{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .pillar{ padding:26px 20px; }
  .pillar h3{ font-size:18px; }
  .recipe-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
}
@media (min-width:641px) and (max-width:900px){ .split-imgs, .split-imgs-md, .split-imgs-compact{ max-width:520px; margin-left:auto; margin-right:auto; } }
/* iPad / tablet landscape: keep the full menu only if it fits, otherwise the hamburger */
@media (min-width:901px) and (max-width:1100px){
  nav.links{ gap:14px; font-size:13.5px; }
  nav.links a{ padding-left:2px; padding-right:2px; }
  .nav-right .btn{ padding:10px 14px; }
}

/* Short landscape screens (phones/tablets on their side) */
@media (max-height:520px) and (orientation:landscape){
  .hero, .hero-s{ min-height:0; }
  .page-hero{ min-height:220px; }
  .section{ padding:48px 0; }
}

/* Notches / rounded corners */
.nav-inner, .site-footer .container, .container{ padding-left:max(var(--gutter), env(safe-area-inset-left)); padding-right:max(var(--gutter), env(safe-area-inset-right)); }

/* Laptops, desktops, big monitors and TVs: scale the whole layout up so it never looks tiny */
@media (min-width:1600px){ :root{ --wrap:1360px; } }
@media (min-width:1920px){ html{ zoom:1.15; } }
@media (min-width:2400px){ html{ zoom:1.5; } }
@media (min-width:3000px){ html{ zoom:1.9; } }
@media (min-width:3600px){ html{ zoom:2.3; } }
@supports not (zoom:1){
  @media (min-width:1920px){ :root{ --wrap:1500px; } }
  @media (min-width:2560px){ :root{ --wrap:1800px; } html{ font-size:125%; } }
}
@media (min-width:700px) and (max-width:1100px){
  .askus-wrap{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:36px; }
  .askus-photo-wrap{ max-width:none; margin:0; }
}
@media (min-width:641px) and (max-width:900px){ .occ-cta-media{ margin-top:34px; } }
@media (min-width:901px) and (max-width:1100px){ .showcase-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } .showcase-card{ aspect-ratio:3/4; } }

/* ===== v21: iPad / Safari / touch tablets ===== */
@media (hover:none) and (pointer:coarse){
  input, select, textarea{ font-size:16px !important; }          /* stops iOS/iPadOS zooming the page when a field is tapped */
  a, button, summary, [role="button"], label, select{ touch-action:manipulation; }   /* no double-tap zoom delay */
}
html{ -webkit-tap-highlight-color:rgba(226,112,63,.18); }
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }