:root{
  --bg:#fff;--ink:#a2601b;--ink-deep:#1f1408;--ink-muted:#8a7a66;
  --accent:#fba82b;--accent-press:#e4941b;--hairline:#efe9e1;
  --surface:#fff;--scrim:rgba(31,20,8,.4);
  --font:'Google Sans','Product Sans','Roboto','Arial',sans-serif;
  --hero:clamp(2.5rem,1.2rem + 4.6vw,4.75rem);
  --h2:clamp(1.875rem,1.2rem + 2.2vw,3rem);
  --h3:clamp(1.625rem,1.2rem + 1.4vw,2.125rem);
  --body:clamp(1rem,.97rem + .12vw,1.0625rem);
  --xs:.8125rem;--sm:.9375rem;
  --gutter:clamp(20px,4.5vw,64px);--max:1440px;
  --section:clamp(72px,9vw,128px);--section-lg:clamp(96px,13vw,192px);
  --nav-h:72px;--ease:cubic-bezier(.22,1,.36,1);
}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto;scroll-padding-top:calc(var(--nav-h) + 24px)}
body{min-height:100dvh;background:var(--bg);color:var(--ink-deep);font:var(--body)/1.6 var(--font);letter-spacing:-.01em}
body.is-locked{overflow:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--font);font-weight:500;line-height:1.14;letter-spacing:-.015em;color:var(--ink-deep)}
p{max-width:70ch}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:rgba(251,168,43,.28)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.muted{color:var(--ink-muted)}
.link{font-size:var(--sm);color:var(--ink);border-bottom:1px solid transparent;padding-bottom:2px}
.link:hover{border-color:var(--ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 32px;border-radius:999px;background:var(--accent);color:#1f1408;font-size:.875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;transition:.15s var(--ease)}
.btn:hover{background:var(--accent-press)}
.btn:active{transform:scale(.985)}
.btn--block{width:100%}
.cta-row{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.cta-row .btn{margin-left:0!important}

.nav{position:sticky;top:0;left:0;right:0;z-index:60;height:var(--nav-h);background:transparent;transition:.15s var(--ease)}
.nav.is-solid{background:var(--bg);box-shadow:0 1px 0 var(--hairline)}
.nav__inner{height:100%;max-width:var(--max);margin:auto;padding:0 var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav__center{grid-column:2;display:flex;justify-content:center}
.nav__right{grid-column:3;display:flex;align-items:center;justify-content:flex-end;gap:24px}
.nav__logo{display:inline-flex;align-items:center;justify-content:center;gap:10px;color:var(--ink)}
.nav__logo-img{width:55px;height:55px;object-fit:contain}
.nav__word{font-size:1.02rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8d5419;line-height:1}
.nav__links{display:flex;gap:32px;justify-content:center}
.nav__links a{font-size:var(--sm);position:relative;padding:4px 0}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:.15s var(--ease)}
.nav__links a:hover::after,.nav__links a[aria-current=page]::after{transform:scaleX(1)}
.nav__actions{display:flex;gap:8px}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--ink-deep)}
.icon-btn:hover{color:var(--ink)}
.nav__burger{display:none}


.hero{
  padding-top:0;
  padding-bottom:var(--section);
}

.hero__banner{
  width:100%;
  overflow:hidden;
  background:#fff;
}

.hero__banner picture,
.hero__banner img{
  display:block;
  width:100%;
}

.hero__banner img{
  height:auto;
  object-fit:cover;
}

.hero__content{
  padding-top:clamp(40px,6vw,80px);
}

.hero__content h1{
  font-size:var(--hero);
  line-height:1.03;
  max-width:12ch;
}

.hero__content > p:not(.eyebrow):not(.hero__meta){
  margin-top:24px;
  max-width:44ch;
  color:var(--ink-muted);
}

.hero__content .btn{
  margin-top:32px;
}

.hero__meta{
  margin-top:24px;
  font-size:var(--xs);
  color:var(--ink-muted);
}

.hero__content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

@media(max-width:639px){
  .hero__content{
    padding-top:32px;
  }

  .hero__content h1{
    font-size:clamp(2.25rem,11vw,3rem);
    max-width:none;
  }

  .hero__content > p:not(.eyebrow):not(.hero__meta){
    margin-top:18px;
  }

  .hero__content .btn{
    margin-top:24px;
    width:100%;
  }

  .hero__meta{
    margin-top:18px;
  }
}


.section{padding-bottom:var(--section)}
.section__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:48px}
.grid-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(16px,2.8vw,40px);row-gap:clamp(40px,5vw,72px)}
.card{display:block}
.card__plate{position:relative;aspect-ratio:3/4;background:#fff;overflow:hidden}
.card__plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s var(--ease),transform .4s var(--ease);background:#fff}
.card__plate img.alt{opacity:0}
.card:hover .card__plate img{transform:scale(1.03)}
.card:hover .card__plate img.alt{opacity:1}
.card__body{margin-top:16px;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.card__name{font-size:1rem;font-weight:500}
.card__meta{margin-top:2px;font-size:var(--xs);color:var(--ink-muted)}

.editorial{padding-bottom:var(--section);margin-top:calc(var(--section-lg) - var(--section))}
.editorial__grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:center}
.editorial__plate{aspect-ratio:4/3}
.editorial h2{font-size:var(--h2)}
.editorial p:not(.eyebrow){margin-top:24px;color:var(--ink-muted)}

.footer{border-top:1px solid var(--hairline);padding:var(--section) 0 48px}
.footer__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr) 1.6fr;gap:48px}
.footer h3{font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:16px}
.footer li+li{margin-top:12px}
.footer a:not(.nav__logo){font-size:var(--sm);color:var(--ink-muted)}
.footer a:hover{color:var(--ink-deep)}
.subscribe{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--hairline);padding-bottom:8px;margin-top:16px}
.subscribe:focus-within{border-color:var(--ink)}
.subscribe input{flex:1;min-width:0;background:none;border:0;padding:6px 0}
.subscribe button{width:32px;height:32px;color:var(--ink)}
.footer__base{margin-top:var(--section);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:var(--xs);color:var(--ink-muted)}
.footer__base nav{display:flex;gap:24px}
.pdp{padding:24px var(--gutter) var(--section)}
.pdp__back{display:inline-flex;align-items:center;gap:8px;margin-bottom:32px;color:var(--ink-deep);font-size:var(--sm)}
.pdp__back svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none}
.pdp__grid{display:grid;grid-template-columns:55fr 45fr;gap:clamp(32px,6vw,96px);align-items:start}
.pdp__media{display:grid;gap:8px}
.pdp__main{aspect-ratio:4/5;cursor:zoom-in;background:#fff}
.pdp__main img{width:100%;height:100%;object-fit:contain;background:#fff}
.pdp__thumbs{display:flex;gap:8px;margin-top:8px}
.thumb{width:64px;aspect-ratio:3/4;background:#fff;overflow:hidden;border-bottom:2px solid transparent}
.thumb img{width:100%;height:100%;object-fit:cover;opacity:.72;background:#fff}
.thumb[aria-current=true]{border-color:var(--ink)}
.thumb[aria-current=true] img,.thumb:hover img{opacity:1}
.pdp__buy{position:sticky;top:calc(var(--nav-h) + 32px)}
.pdp__title{font-size:var(--h3)}
.pdp__desc{margin-top:24px;color:var(--ink-muted);max-width:48ch}
.pdp__details{margin-top:32px;border-top:1px solid var(--hairline)}
.pdp__details p{padding:16px 0;border-bottom:1px solid var(--hairline);color:var(--ink-muted);font-size:var(--sm)}

.scrim{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;z-index:80;transition:.24s var(--ease)}
.scrim.is-open{opacity:1;pointer-events:auto}
.overlay{position:fixed;inset:0;background:var(--bg);z-index:95;display:flex;flex-direction:column;clip-path:inset(0 0 100% 0);pointer-events:none;transition:.24s var(--ease)}
.overlay.is-open{clip-path:inset(0);pointer-events:auto}
.overlay__head{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);border-bottom:1px solid var(--hairline)}
.overlay__body{flex:1;overflow:auto;padding:var(--section) var(--gutter);max-width:var(--max);width:100%;margin:auto}
.search-field{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--hairline);padding-bottom:16px}
.search-field input{flex:1;min-width:0;background:none;border:0;font-size:var(--h2);line-height:1.2}
.search-results{margin-top:64px}
.menu__links{display:grid;gap:24px}
.menu__links a{font-size:clamp(1.75rem,8vw,2.25rem)}
.menu__minor{margin-top:64px;display:grid;gap:16px}
.menu__minor a{color:var(--ink-muted)}

.lightbox{position:fixed;inset:0;z-index:96;background:var(--bg);display:grid;place-items:center;padding:48px var(--gutter);opacity:0;pointer-events:none;transition:.24s var(--ease)}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox img{max-height:88dvh;width:auto;object-fit:contain}
.lightbox>.icon-btn{position:absolute;top:24px;right:var(--gutter)}
.toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,12px);background:var(--ink-deep);color:var(--bg);padding:12px 24px;border-radius:999px;font-size:var(--xs);z-index:100;opacity:0;pointer-events:none;transition:.24s var(--ease)}
.toast.is-open{opacity:1;transform:translate(-50%,0)}

.page-hero{padding:clamp(64px,10vw,144px) var(--gutter) var(--section);text-align:center}
.page-hero h1{font-size:var(--hero);max-width:14ch;margin:16px auto 0}
.page-hero p{margin:24px auto 0;max-width:58ch;color:var(--ink-muted)}
.contact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-bottom:var(--section)}
.contact-card{min-height:220px;padding:28px;background:var(--surface);border:1px solid var(--hairline);border-radius:20px;display:flex;flex-direction:column}
.contact-card__icon{width:42px;height:42px;display:grid;place-items:center;margin-bottom:24px;color:var(--ink)}
.contact-card__icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
.contact-card h3{font-size:var(--sm);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.contact-card p,.contact-card a{margin-top:8px;color:var(--ink-deep)}
.contact-card a:hover{border-color:var(--ink)}
.contact-card__note{margin-top:auto!important;font-size:var(--xs);color:var(--ink-muted)!important}
.contact-form-section{padding-bottom:var(--section)}
.contact-form-wrap{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.contact-form-intro h2{font-size:var(--h2);margin-top:16px}
.contact-form-intro>p{margin-top:24px;color:var(--ink-muted)}
.meta-list{margin-top:32px;display:grid;gap:16px;padding-top:32px;border-top:1px solid var(--hairline)}
.meta-list li{display:flex;gap:12px;font-size:var(--sm)}
.contact-form{background:var(--surface);padding:clamp(24px,4vw,48px);border-radius:20px;border:1px solid var(--hairline);display:grid;gap:24px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:var(--xs);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.field input,.field textarea,.field select{width:100%;background:var(--bg);border:1px solid var(--hairline);border-radius:10px;padding:12px 16px}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(251,168,43,.18)}
.form-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;flex-wrap:wrap}
.form-note{font-size:var(--xs);color:var(--ink-muted);max-width:40ch}
.contact-map{padding-bottom:var(--section-lg)}
.map-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:32px}
.map-head h2{font-size:var(--h2);margin-top:12px}
.map-plate{aspect-ratio:16/7;border-radius:20px;overflow:hidden;background:var(--surface);border:1px solid var(--hairline)}
.map-plate iframe{width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.05)}
.map-addr{display:flex;gap:24px;margin-top:24px;flex-wrap:wrap;color:var(--ink-muted);font-size:var(--sm)}
.map-addr strong{color:var(--ink-deep);font-weight:500}

.reveal>*{opacity:0;transform:translateY(12px)}
.reveal.is-in>*{animation:rise .32s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}

@media(max-width:1023px){
  :root{--nav-h:56px}
  html{scroll-padding-top:calc(var(--nav-h) + 16px)}
  .nav{position:sticky;left:0;right:0;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:60}
  .nav.is-solid{background:var(--bg);box-shadow:0 1px 0 var(--hairline)}
  .nav__links{display:none}.nav__burger{display:grid}.nav__inner{grid-template-columns:1fr auto 1fr}.nav__logo{justify-self:center}
  .hero__grid,.editorial__grid,.pdp__grid,.contact-form-wrap{grid-template-columns:1fr}
  .grid-products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__grid>div:first-child,.footer__grid>div:last-child{grid-column:1/-1}
  .pdp__buy{position:static}
  .pdp__track{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .pdp__track::-webkit-scrollbar{display:none}
  .pdp__track .plate{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:4/5}
  .dots{display:flex;justify-content:center;gap:6px;margin-top:16px}
  .dot{width:6px;height:6px;border-radius:50%;background:var(--hairline)}
  .dot[aria-current=true]{background:var(--ink)}
  .pdp__thumbs{display:none}
  .contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .cta-row{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%}
  .cta-row .btn{margin-left:0!important;width:100%}
}
@media(max-width:639px){
  .grid-products{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:20px}
  .footer__grid,.contact-grid,.form-row{grid-template-columns:1fr}
  .footer__grid>div:first-child,.footer__grid>div:last-child{grid-column:auto}
  .map-plate{aspect-ratio:4/3}
  .contact-card{min-height:auto}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal>*{opacity:1;transform:none}
}



















/* ================================
   CONTACT CARDS — YANGI GRID
   ================================ */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* Barcha cardlar bir xil balandlikda */
.contact-card {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 5-card markazga chiroyli joylashadi */
.contact-card:nth-child(4) {
  grid-column: 1 / 2;
}

.contact-card:nth-child(5) {
  grid-column: 2 / 3;
}

/* Telegram ham boshqa cardlar bilan bir xil */
.contact-card a {
  word-break: break-word;
}


/* ================================
   TABLET
   ================================ */

@media (max-width: 900px) {

  .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .contact-card:nth-child(4),
  .contact-card:nth-child(5) {
    grid-column: auto;
  }

}


/* ================================
   MOBILE
   ================================ */

@media (max-width: 600px) {

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .contact-card:nth-child(4),
  .contact-card:nth-child(5) {
    grid-column: auto;
  }

}















/* Mahsulot nomini biroz o‘ngga surish */
.card__name {
  position: relative;
  left: 35px;
}










/* MOBILE HEADER — sticky on small screens */
@media screen and (max-width: 1023px) {
  header#nav.nav,
  header#nav.nav.is-solid {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--nav-h) !important;
    z-index: 60 !important;
    transform: none !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 1px 0 var(--hairline);
  }

  header#nav .nav__inner {
    height: 100%;
  }

  header#nav .nav__logo-img {
    width: 42px;
    height: 42px;
  }
}