/* Art-directed brand accents inspired by the provided Artojoyo menu artwork.
   Static HTML and existing interactions stay fully editable in Green Website Studio. */
:root{
  --cream:#faf7ee;
  --cream-2:#f5f0e4;
  --brand-ivory:#fffbef;
  --brand-gold:#b99b58;
  --brand-gold-light:#ead9a9;
}
body{
  background:#faf7ee;
  background-image:radial-gradient(ellipse at 16% 2%,rgba(217,231,191,.30),transparent 35%),
    radial-gradient(ellipse at 85% 47%,rgba(214,189,123,.13),transparent 32%);
}
.site-header{background:#fffcf4;border-bottom:1px solid rgba(185,155,88,.20)}
.utility-bar{background:#133f2c}
.site-footer{background:linear-gradient(128deg,#f8f5e9 0%,#eff3e6 64%,#faf6e7 100%);border-top:1px solid #e2d8b8}

/* Cream parchment, botanical greens, and delicate foil-style lines. */
.hero{
  isolation:isolate;
  background:
    radial-gradient(ellipse at 12% 2%,rgba(214,230,186,.72),transparent 43%),
    radial-gradient(ellipse at 94% 93%,rgba(224,199,137,.34),transparent 42%),
    linear-gradient(130deg,#fffdf5 0%,#faf8ed 54%,#f1f4e6 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('../images/botanical-right.webp') no-repeat right -140px top -260px / clamp(530px,53vw,800px) auto,
    url('../images/botanical-left.webp') no-repeat left -340px bottom -620px / 540px auto;
  opacity:.37;
}
.hero::before{background:radial-gradient(circle,rgba(201,218,166,.45),transparent 73%)}
.hero-grid,.hero-marquee{position:relative;z-index:1}
.hero-marquee{border-top:1px solid rgba(180,155,93,.2);border-bottom:1px solid rgba(180,155,93,.2);background:rgba(244,242,225,.72)}
.hero-art-frame{filter:drop-shadow(0 22px 30px rgba(30,69,36,.07))}

.about{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(ellipse at 76% 16%,rgba(219,225,179,.23),transparent 39%),
    linear-gradient(150deg,#fffdf7,#f6f5e9 100%);
}
.about::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('../images/botanical-right.webp') no-repeat right -330px top -250px / 600px auto,
    url('../images/botanical-left.webp') no-repeat left -380px bottom -520px / 550px auto;
  opacity:.22;
}
.about .shell{position:relative;z-index:1}
.about-photo{border:1px solid rgba(192,167,99,.24)}
.about-photo-main{box-shadow:0 23px 60px rgba(16,66,40,.13)}

#menu{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(ellipse at 92% 10%,rgba(205,224,172,.35),transparent 36%),
    radial-gradient(ellipse at 1% 83%,rgba(231,202,132,.23),transparent 36%),
    repeating-linear-gradient(45deg,rgba(125,107,65,.013) 0,rgba(125,107,65,.013) 1px,transparent 1px,transparent 8px),
    linear-gradient(165deg,#fdfaf1 0%,#f4f4e8 51%,#faf8ef 100%);
}
#menu::before,#menu::after{content:"";position:absolute;pointer-events:none;z-index:0}
#menu::before{inset:0;background:url('../images/botanical-left.webp') no-repeat left -275px top -340px / 600px auto;opacity:.31}
#menu::after{inset:0;background:url('../images/botanical-right.webp') no-repeat right -350px bottom -420px / 650px auto;opacity:.28}
#menu > .shell{position:relative;z-index:1}
#menu .section-head{margin-bottom:30px}
#menu .menu-controls{margin-top:0}
#menu .filter-btn{background:rgba(255,255,249,.86);border-color:#dedfca;color:#465b3e}
#menu .filter-btn.active{background:#16452d;color:#fff;border-color:#16452d;box-shadow:0 7px 20px rgba(18,69,43,.16)}
#menu .menu-card{border:1px solid rgba(180,171,122,.35);box-shadow:0 14px 38px rgba(45,76,37,.07);background:#fffefa}
#menu .menu-card-photo{background:linear-gradient(160deg,#fdfcf4,#f1f3e6);border-bottom-color:#e8e8d9}
#menu .menu-card:hover{box-shadow:0 20px 48px rgba(25,68,40,.13);border-color:#c3ba87}
#menu .menu-card-info{background:#fffefa}
#menu .menu-card-bottom{border-top-color:#e9e7d8}
#menu .menu-note{color:#77826b}

/* Print-inspired brand strip reuses the supplied landscape design. */
.promo-spotlight{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;position:relative;isolation:isolate;
  min-height:230px;overflow:hidden;
  margin:0 0 46px;border-radius:23px;
  background:linear-gradient(115deg,#123e2b 0%,#1f643d 69%,#2f6c45 100%);
  box-shadow:0 20px 48px rgba(24,69,42,.15);
  border:1px solid rgba(225,202,147,.42);
}
.promo-spotlight::before{content:"";position:absolute;inset:10px;border:1px solid rgba(215,191,124,.33);border-radius:15px;pointer-events:none;z-index:2}
.promo-spotlight::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 45% 115%,rgba(224,212,137,.23),transparent 45%)}
.promo-spotlight-copy{position:relative;z-index:1;padding:38px 26px 38px 44px}
.promo-spotlight-kicker{display:block;color:#e9d59d;font-size:11px;letter-spacing:.16em;font-weight:800;margin-bottom:13px}
.promo-spotlight h3{font-family:Georgia,"Times New Roman",serif;color:#fffbe7;font-weight:600;letter-spacing:-.02em;line-height:1.12;font-size:clamp(25px,2.65vw,37px);margin:0 0 13px}
.promo-spotlight p{margin:0;color:#d5e0d0;font-size:13px;line-height:1.75;max-width:465px}
.promo-spotlight>img{position:relative;z-index:1;width:calc(100% - 20px);height:calc(100% - 20px);max-height:252px;object-fit:contain;object-position:center;justify-self:center;border-radius:12px;background:#fcfaef;border:1px solid rgba(250,233,180,.55)}
.promo-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 19px}
.promo-eyebrow{display:block;color:#7e9654;font-size:10px;letter-spacing:.17em;font-weight:800;margin-bottom:6px}
.promo-title-row h3,.menu-standard-title h3{font-size:clamp(23px,2.4vw,30px);line-height:1.24;color:#163e29;letter-spacing:-.035em;margin:0}
.promo-navigation{display:flex;align-items:center;gap:20px}
.promo-navigation>span{font-size:12px;color:#7c8670;white-space:nowrap}
.promo-nav-buttons{display:flex;gap:9px}
.promo-nav-buttons button{width:40px;height:40px;border:1px solid #cdd3b3;border-radius:50%;display:grid;place-items:center;background:#fffdf7;color:#214b33;transition:background .2s,transform .2s,border-color .2s}
.promo-nav-buttons button:hover{background:#19472f;color:#fff;border-color:#19472f;transform:translateY(-2px)}
.promo-rail{display:flex;align-items:stretch;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding:3px 3px 22px;margin-bottom:46px;scrollbar-width:thin;scrollbar-color:#b8c791 #ececda}
.promo-rail::-webkit-scrollbar{height:7px}
.promo-rail::-webkit-scrollbar-thumb{background:#b8c791;border-radius:99px}
.promo-rail::-webkit-scrollbar-track{background:#ececda;border-radius:99px}
.promo-card{flex:0 0 calc((100% - 40px)/3);scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;min-width:0;border-radius:17px;background:#fffdf8;border:1px solid #e0dfcc;box-shadow:0 8px 26px rgba(26,59,36,.065);transition:border-color .2s,box-shadow .2s}
.promo-card:hover{border-color:#b6a976;box-shadow:0 15px 38px rgba(26,59,36,.12)}
.promo-image-link{height:340px;display:flex;justify-content:center;align-items:center;overflow:hidden;padding:12px;background:radial-gradient(ellipse at 50% 40%,#fffef8,#f2f3e7);border-bottom:1px solid #eeeadc}
.promo-image-link img{width:100%;height:100%;object-fit:contain;object-position:center;border-radius:8px;filter:drop-shadow(0 6px 10px rgba(25,53,30,.10))}
.promo-card-foot{display:flex;flex-direction:column;flex:1;padding:20px 20px 18px}
.promo-card-tag{display:block;font-size:10px;letter-spacing:.12em;font-weight:800;color:#79914e;margin-bottom:7px}
.promo-card h4{font-size:18px;line-height:1.3;letter-spacing:-.018em;color:#173d29;margin:0 0 7px;font-weight:750}
.promo-card p{color:#6d7c6d;font-size:12px;line-height:1.7;margin:0 0 20px;min-height:41px}
.promo-order{display:inline-flex;align-items:center;justify-content:center;gap:9px;align-self:flex-start;margin-top:auto;padding:11px 16px;background:#194b33;color:#fff;font-size:12px;font-weight:700;border-radius:9px;transition:background .2s,transform .2s}
.promo-order:hover{background:#2f7241;transform:translateY(-1px)}
.promo-order svg{flex:none}
.menu-standard-title{padding:24px 0 20px;margin:0 0 20px;border-top:1px solid rgba(171,163,117,.35)}
.menu-standard-title .promo-eyebrow{margin-bottom:7px}

.special-section{
  background:
    radial-gradient(ellipse at 88% 11%,rgba(96,136,65,.22),transparent 46%),
    radial-gradient(ellipse at 14% 96%,rgba(207,177,91,.11),transparent 50%),
    linear-gradient(122deg,#103a28,#164b30 67%,#20533a);
}
.special-section:before{background:url('../images/botanical-right.webp') no-repeat right -255px top -400px / 700px auto;border:0;width:100%;height:100%;top:0;right:0;opacity:.31}
.special-section:after{background:url('../images/botanical-left.webp') no-repeat left -410px bottom -590px / 680px auto;border:0;width:100%;height:100%;top:0;right:0;opacity:.18}
.special-grid{position:relative;z-index:1}
.special-tags span{border-color:rgba(222,198,128,.29)}

#katalog{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(ellipse at 97% 0%,rgba(204,220,173,.38),transparent 36%),
    radial-gradient(ellipse at -10% 94%,rgba(229,208,158,.36),transparent 37%),
    linear-gradient(155deg,#fffcf4,#f5f6ea 52%,#fcf9ef);
}
#katalog::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:url('../images/botanical-right.webp') no-repeat right -340px top -270px / 580px auto,url('../images/botanical-left.webp') no-repeat left -330px bottom -430px / 550px auto;opacity:.18}
#katalog .catalog-feature{border-color:#dedbc5;box-shadow:0 17px 50px rgba(25,58,40,.065)}
#katalog .catalog-feature-cover{background:linear-gradient(136deg,#f8f3e4,#e9f0dc)}
#katalog .catalog-card{border-color:#e1e1cf;box-shadow:0 9px 26px rgba(34,64,38,.045)}
#katalog .catalog-caption{background:#fffdf6}

.terms-section{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(124deg,#eff3e5,#f9f8ec 62%,#f2f3e5)}
.terms-section:before{content:"";position:absolute;inset:0;z-index:-1;background:url('../images/botanical-left.webp') no-repeat left -360px top -380px / 620px auto;opacity:.17;pointer-events:none}
.terms-card{background:rgba(255,254,248,.94);border-color:#e4e3d0}
.faq-section{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 94% 7%,#edf3df,transparent 43%),linear-gradient(135deg,#fffdf7,#f9f8ef)}
.faq-section:before{content:"";position:absolute;inset:0;z-index:-1;background:url('../images/botanical-right.webp') no-repeat right -400px top -340px / 600px auto;opacity:.17;pointer-events:none}
.contact-section{position:relative;isolation:isolate;background:linear-gradient(170deg,#f9f8ef,#f4f5e9)}
.contact-panel{background:linear-gradient(118deg,#123d29,#215b3a)}
.contact-panel:before{content:"";position:absolute;width:100%;height:100%;inset:0;background:url('../images/botanical-right.webp') no-repeat right -210px bottom -310px / 620px auto;opacity:.31;border:0;border-radius:0}
.contact-panel:after{border-color:rgba(223,197,131,.26)}
.contact-panel>*{position:relative;z-index:1}

@media(max-width:1050px){
 .promo-spotlight{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
 .promo-spotlight-copy{padding:32px}
 .promo-card{flex-basis:calc((100% - 20px)/2)}
 .promo-image-link{height:360px}
}
@media(max-width:760px){
 .hero::after{background-position:right -230px top -240px,left -400px bottom -620px;opacity:.28}
 #menu::before{background-position:left -350px top -410px;opacity:.24}
 #menu::after{background-position:right -460px bottom -450px;opacity:.17}
 .promo-spotlight{grid-template-columns:1fr;min-height:0}
 .promo-spotlight-copy{padding:30px 28px 18px}
 .promo-spotlight>img{width:calc(100% - 40px);height:180px;max-height:none;object-fit:contain;margin:0 20px 20px}
 .promo-rail{gap:15px;margin-bottom:32px}
 .promo-card{flex:0 0 min(77vw,380px)}
 .promo-image-link{height:min(77vw,365px)}
 .promo-title-row{align-items:center}
 .promo-navigation>span{display:none}
 .menu-standard-title{padding-top:22px}
}
@media(max-width:480px){
 .hero::after{background-size:520px auto,410px auto;opacity:.22}
 #menu .section-head{margin-bottom:23px}
 .promo-spotlight{border-radius:15px;margin-bottom:30px}
 .promo-spotlight::before{inset:7px;border-radius:10px}
 .promo-spotlight-copy{padding:27px 22px 14px}
 .promo-spotlight-kicker{font-size:9px}
 .promo-spotlight h3{font-size:27px}
 .promo-spotlight p{font-size:12px}
 .promo-spotlight>img{width:calc(100% - 28px);margin:0 14px 14px;height:auto;max-height:190px}
 .promo-title-row{gap:12px;margin-bottom:13px}
 .promo-title-row h3,.menu-standard-title h3{font-size:23px}
 .promo-eyebrow{font-size:9px}
 .promo-nav-buttons button{width:34px;height:34px}
 .promo-rail{gap:11px;margin-right:-18px;padding-right:18px;scroll-padding-inline:3px}
 .promo-card{flex-basis:calc(100vw - 50px);border-radius:14px}
 .promo-image-link{height:calc(100vw - 57px);max-height:410px;padding:10px}
 .promo-card-foot{padding:16px 18px 19px}
 .promo-card h4{font-size:18px}
 .promo-card p{font-size:11px;min-height:37px;margin-bottom:13px}
 .promo-order{font-size:11px;min-height:39px}
 .menu-standard-title{margin-bottom:14px}
}
@media(prefers-reduced-motion:reduce){.promo-rail{scroll-behavior:auto}.promo-card,.promo-nav-buttons button,.promo-order{transition:none}}