/* From the Natural prototype: global styles and responsive fixes */

html,body{margin:0;background:#efebe3;color:#1a1a17;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}a:hover{color:#a35f45}
button{font:inherit;color:inherit;cursor:pointer}
input{font:inherit}
::selection{background:#1a1a17;color:#efebe3}
@keyframes nat-up{from{opacity:0;transform:translateY(110%)}to{opacity:1;transform:none}}
@keyframes nat-lift{0%,70%{transform:translateY(0)}100%{transform:translateY(-100%)}}
@keyframes nat-wipe{0%{transform:translateY(100%)}45%,55%{transform:translateY(0)}100%{transform:translateY(-100%)}}
@keyframes nat-fade{from{opacity:0}to{opacity:1}}
@keyframes nat-pop{0%{transform:scale(0)}60%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes nat-ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(3.4);opacity:0}}
@keyframes nat-draw{to{stroke-dashoffset:0}}
@keyframes nat-rise{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes nat-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes nat-print{from{clip-path:inset(0 0 100% 0 round 14px);transform:translateY(46px) rotate(-1.2deg)}to{clip-path:inset(0 0 0 0 round 14px);transform:none}}
@keyframes nat-stub{0%{transform:translateX(-36px) rotate(-4deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes nat-shine{0%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(420%) skewX(-18deg)}}
@keyframes nat-conf{0%{transform:translate3d(0,0,0) rotate(0);opacity:1}80%{opacity:1}100%{transform:translate3d(var(--dx),var(--dy),0) rotate(var(--rot));opacity:0}}
@keyframes nat-bub{0%{transform:translate3d(0,0,0) scale(.5);opacity:0}12%{opacity:.8}100%{transform:translate3d(var(--dx),-115vh,0) scale(1);opacity:0}}
@keyframes nat-gfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes nat-gshadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.86);opacity:.6}}
@keyframes nat-kb{0%{transform:scale(1.02) translate(0,0)}100%{transform:scale(1.1) translate(-2.5%,-1.5%)}}
@keyframes nat-glint{0%{background-position:120% 0}35%,100%{background-position:-60% 0}}
@keyframes nat-cell{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes nat-cue{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* --- responsive fixes (audit 2026-11-09) --- */
html{scrollbar-gutter:stable}
@media (max-width:1040px){[data-hdr] nav{gap:16px!important}}
@media (min-width:600px) and (max-width:1167px){[data-r=plans]{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (min-width:700px) and (max-width:899px){[data-r=shop-grid]{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:1023px){
  [data-hdr] button[aria-label=Cart]{min-width:44px;min-height:44px;justify-content:center}
  [data-r=foot-wrap]{padding-bottom:96px!important}
}
@media (max-width:899px){
  [data-r=tap]{min-height:44px}
  [data-r=foot-grid]>div:not([data-r=foot-intro]){gap:0!important}
  [data-r=foot-grid]>div:not([data-r=foot-intro])>button,[data-r=foot-grid]>div:not([data-r=foot-intro])>a{min-height:44px;display:flex;align-items:center}
  [data-r=dish-row]{row-gap:0!important}
  [data-r=dish-ph]{position:static!important;grid-column:1/-1;width:100%!important;aspect-ratio:auto!important;height:0;transform:none!important;box-shadow:none!important;transition:height .5s cubic-bezier(.2,.7,.2,1),margin .5s,opacity .45s!important}
  [data-r=dish-ph][data-on="1"]{height:56vw;margin-top:16px}
}
@media (max-width:700px){
  [data-r=reg-grid]{grid-template-columns:minmax(0,1fr)!important}
  [data-r=reg-nav]{position:static!important}
  [data-r=spa-table]{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) minmax(0,1.1fr)!important;column-gap:12px}
  [data-r=spa-table]>span{letter-spacing:.12em!important;line-height:1.4!important}
  [data-r=spa-table]>div>span{font-size:19px!important;overflow-wrap:anywhere}
  [data-r=heat]{margin-top:40px}
  [data-r=heat-bio]{top:-58px!important;font-size:18px!important}
  [data-r=heat-fin]{font-size:18px!important;right:0}
  [data-r=heat-fin-t]{left:6px}
  [data-r=price]{grid-template-columns:minmax(0,1.15fr) minmax(0,.8fr) minmax(0,1fr)!important}
  [data-r=price]>div:not([style*="contents"]){padding-left:12px!important;padding-right:12px!important}
  [data-r=price]>div:not([style*="contents"])>span:first-child{font-size:22px!important}
  [data-r=price]>div[style*="contents"]>span:not(:first-child){padding-left:12px!important;padding-right:12px!important}
  [data-r=price]>div[style*="contents"]>span:first-child{display:block!important;align-content:center;font-size:15px!important;line-height:1.4;padding-right:8px!important}
}
@media (max-width:700px){[data-r=span2]{grid-column:1/-1!important}}
@media (max-width:899px){
  [data-r=gs-pin]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:6px;padding:92px 20px calc(18px + env(safe-area-inset-bottom))}
  [data-r=gs-head],[data-r=gs-stage],[data-r=gs-bottom]{position:relative!important;inset:auto!important}
  [data-r=gs-head]{opacity:1!important;gap:10px!important;max-width:none!important}
  [data-r=gs-head] h2{font-size:clamp(30px,8.4vw,46px)!important}
  [data-r=gs-stage]{min-height:0;display:flex;flex-direction:column;gap:10px;transform:none!important}
  [data-r=gs-stage]>[data-no-rv]{position:relative!important;inset:auto!important;flex:1;min-height:0;container-type:size}
  [data-r=gs-card]{width:min(88cqw,470px,calc(100cqh * 1.22))!important}
  [data-r=gs-bottom]{opacity:1!important;transform:none!important;flex-direction:column;flex-wrap:nowrap!important;align-items:stretch!important;gap:12px!important}
  [data-r=gs-desc]{max-width:none!important;font-size:14.5px!important;line-height:1.5!important}
  [data-r=gs-panel]{padding:14px!important;gap:12px!important}
  [data-r=gs-panel] [data-r=tap]{flex:1;min-width:0!important;padding-left:6px!important;padding-right:6px!important}
}
@media (max-width:899px) and (max-height:520px) and (orientation:landscape){
  [data-r=gs-pin]{padding-top:84px;padding-bottom:14px}
  [data-r=gs-head] h2{font-size:24px!important}
  [data-r=gs-stage]{flex-direction:row-reverse;gap:24px;align-items:stretch}
  [data-r=gs-bottom]{flex:1;min-width:0;align-self:flex-end}
  [data-r=gs-desc]{display:none}
}
@media (max-width:440px){[data-r=heat-end]{display:none}[data-r=dish-name]{font-size:clamp(28px,9vw,38px)!important;overflow-wrap:anywhere}[data-r=dish-row]{grid-template-columns:32px minmax(0,1fr) auto!important}}
@media (min-width:900px){[data-r=pd-grid]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}}
@media (max-width:480px){[data-r=steps]{gap:8px!important}[data-r=steps] button>span:last-child{width:12px!important}}
@media (max-width:359px){[data-r=foot-grid]{grid-template-columns:minmax(0,1fr) auto!important;gap:32px 20px!important}}
/* Albanian is longer: the restaurant headline gets a smaller size, the children's prices stack on small phones */
html[lang=sq] [data-r=rhero-words]{font-size:clamp(46px,10vw,184px)!important}
@media (max-width:480px){[data-r=kids]{grid-template-columns:minmax(0,1fr)!important}[data-r=kids]>div{flex-direction:row!important;align-items:baseline;justify-content:space-between}}
/* home: every product in one sideways row (4 on desktop, swipe on phones) */
[data-r=feat-row]::-webkit-scrollbar{display:none}
@media (max-width:1100px){[data-r=feat-row]{grid-auto-columns:calc((100% - 2 * clamp(16px,2vw,28px)) / 2.6)!important}}
@media (max-width:640px){[data-r=feat-row]{grid-auto-columns:78%!important;margin-right:calc(-1 * clamp(20px,5vw,72px));padding-right:clamp(20px,5vw,72px);scroll-padding-left:0}[data-r=feat-arrows]{display:none!important}}

/* hover styles generated by the prototype runtime */
.scp0:hover { background: rgb(163, 95, 69) !important; }
.scp1:hover { background: rgb(255, 255, 255) !important; }
.scp2:hover { background: rgba(243, 239, 231, 0.12) !important; }
.scp3:hover { color: rgb(163, 95, 69) !important; }
.scp4::before { content: counter(temp); }
.scp5:hover { background: rgb(26, 26, 23) !important; color: rgb(243, 239, 231) !important; }
.scp6:hover { transform: scale(1.05) !important; }
.scp7:hover { border-color: rgb(217, 160, 136) !important; }
.scp8:hover { background: rgb(217, 160, 136) !important; }
.scp9:hover { color: rgb(217, 160, 136) !important; }
.scpa:hover { transform: scale(1.06) !important; }
.scpb:hover { background: rgba(243, 239, 231, 0.1) !important; }
.scpc:hover { opacity: 0.85 !important; }
.scpd:hover { transform: translateY(-8px) !important; border-color: rgb(217, 160, 136) !important; box-shadow: rgba(217, 160, 136, 0.45) 0px 30px 60px -28px, rgba(217, 160, 136, 0.35) 0px 0px 0px 1px !important; }
.scpe:hover { background: rgb(217, 160, 136) !important; color: rgb(11, 12, 11) !important; letter-spacing: 0.18em !important; }
.scpf:hover { border-color: rgb(26, 26, 23) !important; }
.scpg:hover { background: rgb(239, 235, 227) !important; }
.scph:hover { background: rgba(13, 43, 51, 0.06) !important; }
.scpi:hover { }
.scpj:hover { color: rgb(243, 239, 231) !important; }
.scpk:hover { transform: scale(1.07) !important; filter: saturate(1.1) !important; }
.scpl:hover { border-color: rgb(217, 160, 136) !important; color: rgb(217, 160, 136) !important; }
.scpm:hover { transform: translateY(-3px) !important; box-shadow: rgba(37, 211, 102, 0.6) 0px 18px 40px -12px !important; color: rgb(255, 255, 255) !important; }
.scpn:hover { background: rgba(26, 26, 23, 0.07) !important; }
.scpo:focus { border-color: rgb(13, 43, 51) !important; }