/* Gugelicious – Message in a Box */
@font-face{
  font-family:'Laatz';
  src:url('../assets/fonts/Laatz.otf') format('opentype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}
:root{
  --blush:#FDEDE6;
  --blush-2:#fbe3d9;
  --plum:#6E1047;
  --plum-dark:#431036;
  --peach:#FAA682;
  --peach-soft:#f7bfa5;
  --orange-blush:#F8D2BC;
  --ink:#2b2530;
  --muted:#6b5f66;
  --white:#ffffff;
  --r:20px;          /* rounded images / cards */
  --r-sm:14px;
  --pill:999px;      /* rounded buttons */
  --shadow:0 14px 40px rgba(110,16,71,.12);
  --shadow-sm:0 6px 18px rgba(110,16,71,.10);
  --maxw:1140px;
  --font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --script:'Laatz','Dancing Script',cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-weight:300;
  color:var(--ink);
  background:var(--blush);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
strong,b{font-weight:600}
img{max-width:100%;display:block}
a{color:var(--plum);text-decoration:none}
h1,h2,h3,h4{color:var(--plum);line-height:1.2;margin:0 0 .5em}
p{margin:0 0 1em}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.center{text-align:center}

/* ---------- Script + section headings ---------- */
.script{
  font-family:var(--script);
  font-weight:normal;
  font-synthesis:none;
  color:var(--plum);
  line-height:1;
}
.section-script{
  font-family:var(--script);
  font-size:clamp(2.6rem,6.5vw,4.4rem);
  font-weight:normal;
  font-synthesis:none;
  color:var(--plum);
  text-align:center;
  margin:0 0 .4em;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.22em;
  font-weight:600;
  font-size:.8rem;
  color:var(--peach);
  text-align:center;
  margin-bottom:.6em;
}
.section-title{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  font-size:clamp(1.1rem,2.5vw,1.5rem);
  text-align:center;
}

/* ---------- Buttons (rounded/pill) ---------- */
.btn{
  display:inline-block;
  background:var(--plum);
  color:var(--white)!important;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.82rem;
  padding:15px 40px;
  border-radius:var(--pill);
  border:2px solid var(--plum);
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  box-shadow:var(--shadow-sm);
}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow);background:var(--plum-dark);border-color:var(--plum-dark)}
.btn-outline{
  background:transparent;color:var(--plum)!important;border:2px solid var(--plum);box-shadow:none;
}
.btn-outline:hover{background:var(--plum);color:var(--white)!important}
.btn-peach{background:var(--peach);border-color:var(--peach);color:var(--plum-dark)!important}
.btn-peach:hover{background:var(--peach-soft);border-color:var(--peach-soft)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(110,16,71,.07);
}
.header-inner{display:flex;flex-direction:column;align-items:center;padding:14px 22px 10px}
.logo img{height:105px;width:auto}
.nav{margin-top:8px}
.nav ul{list-style:none;display:flex;gap:30px;margin:0;padding:0}
.nav a{
  text-transform:uppercase;letter-spacing:.13em;font-weight:400;font-size:.82rem;color:var(--plum);
  padding:6px 2px;position:relative;
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--peach);transition:right .25s ease;border-radius:2px}
.nav a:hover::after,.nav a.active::after{right:0}
.nav-toggle{display:none;position:absolute;right:22px;top:22px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--plum);margin:5px 0;border-radius:2px;transition:.25s}

/* ---------- Hero ---------- */
.hero{padding:56px 0 40px;text-align:center}
.hero .section-script{font-size:clamp(2.8rem,8vw,5.5rem);margin-bottom:.2em}
.hero-sub{max-width:640px;margin:0 auto 8px;font-size:1.05rem}
.gallery-3{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px;
  width:110%;margin-left:-5%;  /* +10% larger than the container */
}
.gallery-3 img{
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow);
  transition:transform .35s ease;
}
.hero-sub{margin-top:26px}
.gallery-3 img:hover{transform:translateY(-6px) scale(1.01)}

/* ---------- Feature icons ---------- */
.feature-icons{
  display:flex;flex-wrap:wrap;justify-content:center;gap:30px 26px;margin:48px auto 0;max-width:1020px;
}
.feat{display:flex;flex-direction:column;align-items:center;gap:16px;width:160px}
.feat-circle{
  width:118px;height:118px;border-radius:50%;background:var(--plum);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);
  transition:transform .25s ease;
}
.feat:hover .feat-circle{transform:translateY(-5px)}
.feat-circle svg{width:60px;height:60px}
.feat-circle.img{background:none;box-shadow:none}
.feat-circle.img img{width:118px;height:118px;border-radius:50%;display:block}
.feat-label{
  text-transform:uppercase;letter-spacing:.13em;font-weight:600;font-size:.82rem;
  color:var(--plum);text-align:center;line-height:1.4;
}
@media (max-width:520px){
  .feature-icons{gap:24px 10px}
  .feat{width:30%;min-width:96px;gap:10px}
  .feat-circle{width:92px;height:92px}
  .feat-circle svg{width:46px;height:46px}
  .feat-circle.img img{width:92px;height:92px}
  .feat-label{font-size:.72rem;letter-spacing:.08em}
}

/* ---------- Sections ---------- */
section{padding:64px 0}
.section-tight{padding:44px 0}
.prose{max-width:720px;margin:0 auto;text-align:center}
.prose p strong{color:var(--plum)}

/* ---------- Box: 3 columns ---------- */
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:20px}
.col-card{text-align:center}
.col-card img{
  width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:var(--r);
  margin-bottom:18px;background:transparent;
}
.col-card h3{text-transform:uppercase;letter-spacing:.08em;font-size:1.05rem}

/* ---------- White band ---------- */
.band-white{background:var(--white)}

/* ---------- Orange-blush band ---------- */
.band-orange{background:var(--orange-blush)}

/* ---------- Partner logos (no boxes) ---------- */
.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px;max-width:840px;margin:0 auto}
.partner-card{display:flex;align-items:center;justify-content:center;height:120px}
.partner-card img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.partner-card.invert img{filter:invert(1)} /* white logos -> dark so they show on the light band */
@media (max-width:600px){.partner-grid{gap:18px 14px}.partner-card{height:84px}}

/* ---------- FAQ background image (tiled for more icons) ---------- */
.faq-deco{
  position:relative;
  background:url(../assets/img/background.png) top center / 50% auto repeat;
}
.faq-deco > .container{position:relative;z-index:1}
/* clear blush halo so no icon sits behind the FAQ heading */
.faq-deco::after{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(820px,94%);height:300px;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center top,var(--blush) 46%,rgba(253,237,230,0) 74%);
}
@media (max-width:600px){.faq-deco{background-size:70% auto}}

/* ---------- Dark plum band ---------- */
.band-plum{background:var(--plum);color:var(--white);text-align:center}
.band-plum .section-script{color:var(--peach)}
.band-plum h1,.band-plum h2,.band-plum h3{color:var(--white)}
.band-plum p{color:rgba(255,255,255,.92)}
.band-plum strong{color:var(--white)}

/* ---------- Split (image + text) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split img{border-radius:var(--r);box-shadow:var(--shadow);width:100%}
.split .prose{text-align:left;margin:0}
.split.reverse .media{order:2}

/* ---------- Instagram / gallery grid ---------- */
.gallery-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.gallery-4 img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-sm);box-shadow:var(--shadow-sm);transition:transform .3s ease}
.gallery-4 img:hover{transform:scale(1.03)}

/* ---------- Picture board (Einblicke) – masonry, original format ---------- */
.board{column-count:4;column-gap:18px;margin-top:34px}
.board figure{margin:0 0 18px;padding:0;background:none;box-shadow:none;break-inside:avoid}
.board img{
  width:100%;height:auto;display:block;border-radius:var(--r-sm);box-shadow:var(--shadow-sm);
  transition:transform .3s ease,box-shadow .3s ease;
}
.board figure:hover img{transform:translateY(-4px) scale(1.01);box-shadow:var(--shadow)}
@media (max-width:860px){.board{column-count:3;column-gap:14px}.board figure{margin-bottom:14px}}
@media (max-width:560px){.board{column-count:2;column-gap:12px}.board figure{margin-bottom:12px}}

/* ---------- Product cards ---------- */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:26px;margin-top:20px}
.card{
  background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .3s ease,box-shadow .3s ease;display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card img{width:100%;aspect-ratio:4/5;object-fit:cover}
.card .card-body{padding:20px 20px 24px;text-align:center}
.card h3{font-weight:600;font-size:1.05rem;margin-bottom:.35em;line-height:1.25}
.card p{font-size:.9rem;color:var(--muted);margin:0}
.price{display:inline-block;margin-top:10px;color:var(--peach);font-weight:700}

/* product feature (large) */
.product-feature{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:64px}
.product-feature img{border-radius:var(--r);box-shadow:var(--shadow);width:100%}
.product-feature .prose{text-align:left;margin:0}
.badge{display:inline-block;background:var(--peach);color:var(--plum-dark);border-radius:var(--pill);padding:6px 16px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.set-divider{border:0;border-top:1.5px solid var(--peach);max-width:820px;margin:20px auto 64px;opacity:.55}
.ingredients{font-size:.82rem;color:var(--muted);line-height:1.55}
.ingredients strong{color:var(--plum)}

/* Laatz product name heading */
.prod-name{
  font-family:var(--script);font-synthesis:none;font-weight:normal;color:var(--plum);
  font-size:clamp(2rem,4vw,2.9rem);line-height:1.05;text-align:left;margin:0 0 .3em;
}

/* two-image pair inside a product feature */
.media-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.media-pair img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow)}

/* white notes card */
.notes-card{
  background:var(--white);border-radius:var(--r);padding:40px 38px;box-shadow:var(--shadow-sm);
  max-width:880px;margin:0 auto;text-align:center;
}
.notes-card .prod-name,.notes-card h2{text-align:center}
@media (max-width:520px){.notes-card{padding:28px 22px}}

/* ---------- Accordion (FAQ) ---------- */
.accordion{max-width:800px;margin:0 auto}
.acc-item{background:var(--white);border-radius:var(--r-sm);margin-bottom:14px;box-shadow:var(--shadow-sm);overflow:hidden}
.acc-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:20px 24px;font-family:var(--font);
  font-weight:600;font-size:1rem;color:var(--plum);display:flex;justify-content:space-between;align-items:center;gap:16px}
.acc-q .plus{flex:0 0 auto;font-size:1.4rem;transition:transform .25s ease;color:var(--peach)}
.acc-item.open .plus{transform:rotate(45deg)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 24px}
.acc-a p{padding-bottom:4px}
.acc-item.open .acc-a{max-height:400px;padding-bottom:20px}

/* ---------- Contact ---------- */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.contact-card{
  background:var(--white);border-radius:var(--r);padding:26px 28px;box-shadow:var(--shadow);
}
.contact-card h3{margin-top:0;margin-bottom:.4em}
.contact-card .addr{line-height:1.7}
.form-field{margin-bottom:12px}
.form-field label{display:block;font-size:.8rem;font-weight:600;color:var(--plum);margin-bottom:4px;letter-spacing:.04em}
.form-field input,.form-field textarea{
  width:100%;border:1.5px solid var(--blush-2);background:#fff;border-radius:var(--r-sm);
  padding:10px 14px;font-family:var(--font);font-size:.92rem;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease;
}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--peach);box-shadow:0 0 0 3px rgba(250,166,130,.25)}
.form-field textarea{min-height:92px;resize:vertical}
.form-note{font-size:.8rem;color:var(--muted);margin-top:8px}

/* ---------- News banner ---------- */
.news{background:var(--plum-dark);color:#fff;border-radius:var(--r);padding:34px;text-align:center;max-width:820px;margin:0 auto}
.news strong{color:var(--peach)}

/* ---------- Footer ---------- */
.site-footer{background:var(--peach);color:var(--plum);text-align:center;padding:52px 22px 44px}
.site-footer img{height:80px;margin:0 auto 18px}
.site-footer .addr{line-height:1.8;font-size:.92rem;margin-bottom:18px;color:var(--plum)}
.site-footer a{color:var(--plum)}
.footer-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;font-size:.9rem;font-weight:500}
.footer-links a:hover{color:var(--plum-dark)}
.footer-social{display:flex;gap:18px;justify-content:center;margin-bottom:18px}
.footer-social a{font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}
.copyright{font-size:.78rem;color:rgba(255,255,255,.5)}

/* ---------- Sticky order notice ---------- */
.order-popup{
  position:fixed;right:20px;bottom:20px;z-index:200;max-width:300px;
  background:var(--plum);color:#fff;border-radius:var(--r);
  padding:16px 42px 16px 20px;box-shadow:var(--shadow);
  font-size:.9rem;line-height:1.4;
  animation:popup-in .4s ease both;
}
.order-popup strong{color:var(--peach)}
.order-popup .close{
  position:absolute;top:8px;right:10px;background:none;border:0;color:#fff;
  font-size:1.3rem;line-height:1;cursor:pointer;opacity:.8;padding:4px;
}
.order-popup .close:hover{opacity:1}
@keyframes popup-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:520px){.order-popup{right:12px;left:12px;bottom:12px;max-width:none}}

/* ---------- Legal pages ---------- */
.legal{max-width:820px;margin:0 auto;text-align:left}
.legal h1{margin-bottom:.6em}
.legal h2{font-size:1.15rem;margin-top:1.6em}
.legal p,.legal li{font-size:.95rem}
.legal a{word-break:break-word}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .split,.contact-wrap,.product-feature{grid-template-columns:1fr;gap:28px}
  .split.reverse .media{order:0}
  .split .prose,.product-feature .prose{text-align:center}
  .cols-3{grid-template-columns:1fr;gap:36px;max-width:420px;margin-left:auto;margin-right:auto}
  .gallery-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .header-inner{flex-direction:row;justify-content:space-between;align-items:center;position:relative;padding:12px 20px}
  .logo img{height:78px}
  .nav{margin-top:0;position:absolute;top:100%;left:0;right:0;background:#fff;
    box-shadow:var(--shadow);border-radius:0 0 var(--r) var(--r);
    max-height:0;overflow:hidden;transition:max-height .3s ease}
  .nav.open{max-height:420px}
  .nav ul{flex-direction:column;gap:0;padding:8px 0}
  .nav li{width:100%}
  .nav a{display:block;padding:14px 26px;text-align:center}
  .nav a::after{display:none}
  .nav-toggle{display:block;position:static}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .gallery-3{grid-template-columns:1fr;gap:18px;width:auto;max-width:360px;margin-left:auto;margin-right:auto}
  section{padding:48px 0}
}
@media (max-width:440px){
  .gallery-4{grid-template-columns:1fr 1fr}
  .btn{padding:14px 30px}
}