/* ============================================================
   BINT-E-IFTIKHAR BAKERS — Loafly-style look
   Dark chocolate + cream + mango orange. Titan One + Fredoka.
   HERO MERGE: choti banner image top pe, navbar image ke andar
   blank space mein utarta hai, headline foran neeche — ek hi
   continuous dark section (Loafly jaisa).
   ============================================================ */
:root{
  --brown:#2b190b;
  --brown-2:#3a2312;
  --cream:#fdf1d7;
  --cream-2:#f6e3bd;
  --card:#fff9ec;
  --orange:#f59e1d;
  --orange-2:#d97e0e;
  --ink:#2b190b;
  --muted:#8a7354;
  --line:#eedbb5;
  --shadow:0 18px 40px -22px rgba(43,25,11,.45);
  --display:"Titan One",cursive;
  --body:"Fredoka",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--cream);line-height:1.55;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
a{color:inherit}
.container{max-width:1180px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.5rem)}
section[id]{scroll-margin-top:130px}
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.95;letter-spacing:.01em}
.muted{color:var(--muted)}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:300;border-radius:0 0 12px 0}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sr-only:focus-visible + .file-btn{outline:3px solid var(--orange);outline-offset:2px}

/* ============================================================
   TOP BANNER — compact height, brown mein blend.
   Pastries upar, neeche dark blank area jahan navbar utarta hai.
   ============================================================ */
.topbanner{
  position:relative;background:var(--brown);
  line-height:0;overflow:hidden;
}
.topbanner img{
  width:100%;
  height:clamp(200px,31vh,340px);      /* pichli barr se kaafi choti */
  object-fit:cover;object-position:center 22%;
  -webkit-mask-image:linear-gradient(180deg,#000 48%,rgba(0,0,0,.5) 74%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 48%,rgba(0,0,0,.5) 74%,transparent 100%);
}
.topbanner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(43,25,11,.08) 0%,
    rgba(43,25,11,0) 24%,
    rgba(43,25,11,.22) 58%,
    rgba(43,25,11,.62) 84%,
    var(--brown) 100%);
}

/* Navbar ko image ke dark blank space ke ANDAR utaaro.
   (Sirf home page par — cakes.html ka navbar normal rehta hai) */
:root{--dock-lift:44px}   /* navbar ko sirf itna upar uthao — baqi layout same rehta hai */
.dock-layer--overlap{
  margin-top:calc(clamp(-116px,-9vw,-64px) - var(--dock-lift));
  padding-top:0;
}

/* --- brand (footer) --- */
.brand{display:flex;flex-direction:column;color:#ffefd2;line-height:1;margin:0}
.brand b{font-weight:600;font-size:1.15rem;letter-spacing:.02em}
.brand small{font-size:.55rem;font-weight:500;letter-spacing:.42em;text-transform:uppercase;color:var(--orange);margin-top:3px}

/* --- sticker tags --- */
.sticker{display:inline-block;background:var(--orange);color:var(--ink);font-weight:600;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;padding:.5rem 1rem;border-radius:10px;transform:rotate(-4deg);box-shadow:2px 3px 0 rgba(43,25,11,.22);margin-bottom:1.1rem}
.sticker--light{background:transparent;border:2px solid var(--orange);color:var(--orange);box-shadow:none}

/* --- buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--body);font-weight:600;font-size:.95rem;text-decoration:none;border:2px solid transparent;border-radius:999px;padding:.85rem 1.7rem;cursor:pointer;transition:transform .2s,background .2s,color .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn--orange{background:var(--orange);color:var(--ink)}
.btn--orange:hover{background:#ffb23a}
.btn--cream{border-color:#ffefd2;color:#ffefd2;background:transparent}
.btn--cream:hover{background:#ffefd2;color:var(--ink)}
.btn--lg{padding:1rem 2.1rem;font-size:1rem}

/* --- hero (banner ke sath merged — bilkul sath, koi gap nahi) --- */
.hero{position:relative;background:var(--brown);color:#ffefd2;overflow:hidden;text-align:center;margin-top:calc(-14px + var(--dock-lift, 0px));padding:0 1rem 3.6rem}
.hero__inner{max-width:860px;margin:0 auto}
.hero__title{font-size:clamp(2.5rem,7.2vw,5rem);margin-bottom:.8rem;text-shadow:0 4px 0 rgba(0,0,0,.28)}
.hero__sub{color:#e9d2a4;font-size:clamp(.95rem,1.6vw,1.05rem);max-width:54ch;margin:0 auto 1.5rem}
.hero__cta{display:flex;justify-content:center;gap:.9rem;flex-wrap:wrap;margin-bottom:1.4rem}
.hero__free{color:var(--orange);font-weight:500;font-size:.9rem;letter-spacing:.04em}
.hero::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-2px;height:24px;background-image:radial-gradient(circle at 15px 24px,var(--cream) 13px,transparent 13.5px);background-size:30px 24px;background-repeat:repeat-x}

/* --- category picks --- */
.picks{padding:4.4rem 0 3.4rem;text-align:center}
.picks__head .display{font-size:clamp(2rem,5vw,3.3rem)}
.picks__row{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(1.8rem,4vw,3.2rem);margin-top:2.6rem}
.pick{display:flex;flex-direction:column;align-items:center;text-decoration:none;width:clamp(150px,20vw,200px)}
.pick img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:26px;border:3px solid var(--brown);box-shadow:var(--shadow);transition:transform .25s}
.pick:hover img{transform:translateY(-6px) rotate(-2deg)}
.pick__label{margin-top:-16px;position:relative;z-index:2;background:var(--brown);color:#ffefd2;font-weight:600;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;padding:.55rem 1.2rem;border-radius:999px;transition:background .2s,color .2s;white-space:nowrap}
.pick:hover .pick__label{background:var(--orange);color:var(--ink)}

/* --- section heads --- */
.sec-head{text-align:center;margin-bottom:2.6rem}
.sec-head .display{font-size:clamp(1.9rem,4.6vw,3rem)}
.sec-sub{color:var(--muted);max-width:56ch;margin:1rem auto 0;font-size:.95rem}

/* --- catalogue --- */
.catalog{padding:3.8rem 0}
.catalog--alt{background:var(--cream-2)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.6rem}
.card{background:var(--card);border:2px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;box-shadow:0 10px 24px -20px rgba(43,25,11,.4)}
.card:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:var(--shadow)}
.card__media{position:relative;display:block;width:100%;border:0;background:#f8e9c8;padding:9%;cursor:pointer}
.card__media img{width:100%;aspect-ratio:1;object-fit:contain}
.tag{position:absolute;top:12px;left:12px;background:var(--orange);color:var(--ink);font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:.35rem .7rem;border-radius:999px;transform:rotate(-3deg)}
.card__body{padding:1.15rem 1.2rem 1.35rem;display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}
.card__name{font-weight:600;font-size:1.12rem;line-height:1.25;margin-bottom:.35rem}
.card__desc{color:var(--muted);font-size:.85rem;margin-bottom:.8rem;max-width:34ch}
.card__meta{display:flex;gap:.5rem;align-items:baseline;margin-bottom:.9rem}
.card__price{font-weight:600;font-size:1.05rem}
.card__size{color:var(--muted);font-size:.8rem}
.card__view{margin-top:auto;background:none;border:0;cursor:pointer;font-family:var(--body);font-weight:600;font-size:.85rem;color:var(--orange-2);padding:.2rem 0;border-bottom:2px solid transparent;transition:border-color .2s}
.card__view:hover{border-color:var(--orange-2)}
.img-fallback{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}

/* --- dark band --- */
.band{position:relative;background:var(--brown);color:#ffefd2;text-align:center;padding:4.4rem 1.2rem 5.2rem}
.band .display{font-size:clamp(1.9rem,4.6vw,3rem);margin-bottom:1rem}
.band p{color:#e9d2a4;max-width:52ch;margin:0 auto 2rem}
.band::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-2px;height:24px;background-image:radial-gradient(circle at 15px 24px,var(--cream) 13px,transparent 13.5px);background-size:30px 24px;background-repeat:repeat-x}

/* --- how it works --- */
.how{padding:4rem 0 3rem}
.how__grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.6rem;max-width:1050px;margin:0 auto}
.how__grid li{background:var(--card);border:2px solid var(--line);border-radius:22px;padding:1.7rem 1.4rem;text-align:center}
.how__num{font-family:var(--display);color:var(--orange);font-size:1.9rem;display:block;margin-bottom:.5rem}
.how h3{font-weight:600;font-size:1.05rem;margin-bottom:.4rem}
.how p{color:var(--muted);font-size:.88rem}

/* --- contact --- */
.contact{text-align:center;padding:3.6rem 0 5.4rem}

/* --- reviews (FolderFloat stage) --- */
.reviews{padding:4.4rem 0 5.6rem;overflow:hidden}
.reviews__stage{display:flex;justify-content:center;align-items:flex-end;min-height:520px}

/* --- footer --- */
.footer{background:var(--brown);color:#f0ddba;padding:3.2rem 1.2rem 1.4rem}
.footer__grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:2rem}
.footer__blurb{color:#c9ae80;font-size:.9rem;margin-top:.7rem;max-width:32ch}
.footer__nav{display:flex;flex-direction:column;gap:.55rem}
.footer__nav a{color:#e9d2a4;text-decoration:none;font-weight:500;font-size:.9rem}
.footer__nav a:hover{color:var(--orange)}
.footer__note{font-size:.85rem;color:#c9ae80}
.footer__fine{max-width:1100px;margin:2.2rem auto 0;padding-top:1.1rem;border-top:1px solid rgba(255,239,210,.15);font-size:.75rem;color:#b3986c;text-align:center}

/* ============================================================
   MODAL — scrollable content + sticky Order button
   ============================================================ */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(0px,2vw,24px)}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(24,12,3,.6)}
.modal__panel{
  position:relative;background:var(--card);
  width:min(1000px,100%);height:min(92vh,860px);
  border-radius:26px;display:grid;
  grid-template-columns:minmax(0,44%) minmax(0,56%);
  overflow:hidden;box-shadow:var(--shadow);
}
.modal__close{position:absolute;top:14px;right:14px;z-index:5;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--brown);color:#ffefd2;border:0;cursor:pointer;font-size:.95rem}
.modal__close:hover{background:var(--orange);color:var(--ink)}
.modal__media{
  background:#f8e9c8;min-height:0;
  display:flex;flex-direction:column;gap:1rem;
  padding:10%;overflow-y:auto;
}
.modal__media img#m-img{width:100%;aspect-ratio:1;object-fit:contain;flex:none}
.modal__thumbs{display:flex;gap:.6rem;flex-wrap:wrap}
.thumb{width:54px;height:54px;padding:3px;background:var(--card);border:2px solid var(--line);border-radius:12px;cursor:pointer}
.thumb.is-active{border-color:var(--orange)}
.thumb img{width:100%;height:100%;object-fit:contain;border-radius:8px}
.modal__info{display:flex;flex-direction:column;min-height:0}
.modal__scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:clamp(1.3rem,3vw,2.2rem);
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.modal__scroll::-webkit-scrollbar{width:8px}
.modal__scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.modal__foot{
  flex:none;padding:.9rem clamp(1.3rem,3vw,2.2rem) 1.2rem;
  border-top:2px solid var(--line);background:var(--card);
}
.modal__confirm{font-size:.74rem;color:var(--muted);margin:0 0 .8rem}
.modal__info h2{font-weight:600;font-size:1.5rem;line-height:1.2;margin:.3rem 0 .8rem}
.modal__cat{font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--orange-2)}
.modal__price{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.8rem}
.modal__price strong{font-size:1.45rem;font-weight:600}
.modal__price span{color:var(--muted);font-size:.85rem}
.modal__seasonal{font-size:.8rem;font-weight:500;color:var(--orange-2);background:#fdeecb;border:2px dashed var(--orange);padding:.55rem .8rem;border-radius:12px;margin-bottom:.9rem}
.modal__desc{color:var(--muted);font-size:.92rem;margin-bottom:.6rem}
.modal__flavour{font-size:.88rem;font-weight:500;margin-bottom:.4rem}
.modal__note{font-size:.8rem;color:var(--orange-2);font-style:italic;margin-bottom:.4rem}
.field{margin-top:1.1rem}
.field label{display:block;font-weight:600;font-size:.82rem;margin-bottom:.45rem}
.field--row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.field--row label{margin:0}
.free-tag{display:inline-block;background:var(--orange);color:var(--ink);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:.2rem .5rem;border-radius:999px;margin-left:.4rem;transform:rotate(-3deg)}
input[type=text],select,textarea{width:100%;font-family:var(--body);font-size:.92rem;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:14px;padding:.7rem .9rem}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--orange)}
.stepper{display:inline-flex;align-items:center;background:#fff;border:2px solid var(--line);border-radius:999px;overflow:hidden}
.stepper button{width:42px;height:42px;background:none;border:0;font-size:1.15rem;font-weight:600;cursor:pointer;color:var(--ink)}
.stepper button:hover:not(:disabled){background:#fdeecb}
.stepper button:disabled{opacity:.35;cursor:default}
.stepper output{width:42px;text-align:center;font-weight:600}
.field__upload{margin-top:.6rem}
.file-btn{display:inline-block;font-weight:500;font-size:.85rem;color:var(--orange-2);border:2px dashed var(--line);border-radius:12px;padding:.6rem .9rem;cursor:pointer;transition:border-color .2s}
.file-btn:hover{border-color:var(--orange)}
.file-name{display:block;font-size:.78rem;color:var(--muted);margin-top:.5rem}
.file-preview{width:70px;height:70px;object-fit:cover;border-radius:12px;border:2px solid var(--line);margin-top:.5rem}
.modal__total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--line);margin-top:1.4rem;padding-top:1rem;font-weight:500}
.modal__total strong{font-size:1.5rem;font-weight:600}
.modal__order{width:100%}

/* --- toast --- */
.toast{position:fixed;left:50%;bottom:1.3rem;transform:translate(-50%,150%);background:var(--brown);color:#ffefd2;padding:.8rem 1.4rem;border-radius:999px;font-size:.85rem;font-weight:500;z-index:200;max-width:min(92vw,480px);transition:transform .35s;box-shadow:var(--shadow)}
.toast.show{transform:translate(-50%,0)}

/* --- page head (cakes page) --- */
.pagehead{padding:clamp(24px,5vw,44px) 1.2rem 0;text-align:center}
.pagehead .display{font-size:clamp(2rem,5vw,3.2rem)}
.pagehead .sec-sub{margin-top:1.1rem}

/* --- responsive --- */
@media (max-width:820px){
  .modal{padding:0}
  .modal__panel{
    width:100%;height:100dvh;max-height:none;border-radius:0;
    grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);
  }
  .modal__media{padding:8% 6% 3%;max-height:52vh;overflow:hidden}
  .modal__media img#m-img{width:100%;height:auto;max-height:44vh;aspect-ratio:auto;object-fit:contain}
  .modal__scroll{padding:1.2rem 1.2rem 1.4rem}
  .modal__foot{padding:.85rem 1.2rem calc(1rem + env(safe-area-inset-bottom))}
}
@media (max-width:640px){
  .footer__grid{grid-template-columns:1fr}
  .reviews__stage{min-height:600px}
  .topbanner img{height:clamp(150px,24vh,220px)}
  .dock-layer--overlap{}
  :root{--dock-lift:34px}
  .dock-layer--overlap{margin-top:calc(-58px - var(--dock-lift))}
}

/* ============================================================
   TABS (cakes.html) — dock ke neeche, sticky nahi
   ============================================================ */
.tabs-wrap{overflow-x:auto;scrollbar-width:none;padding:1.8rem 1.1rem .4rem;scroll-margin-top:84px}
.tabs-wrap::-webkit-scrollbar{display:none}
.tabs{display:flex;gap:.6rem;width:max-content;margin:0 auto}
.tab{font-family:var(--body);font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:transparent;border:2px solid var(--brown);border-radius:999px;padding:.65rem 1.25rem;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,transform .2s}
.tab:hover{background:#fdeecb;transform:translateY(-2px)}
.tab.is-active{background:var(--orange);border-color:var(--brown);box-shadow:2px 3px 0 rgba(43,25,11,.22)}
.tabpanel[hidden]{display:none}
.tabpanel{padding-top:2.4rem}

/* cards — pics ab cover hoti hain (alag alag aspect ratio wali pics bhi bhari bhari lagein) */
.card__media{padding:0;background:#f8e9c8;overflow:hidden;text-decoration:none;display:block}
.card__media img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 42%;transition:transform .35s}
.card:hover .card__media img{transform:scale(1.04)}
.card__view{text-decoration:none}
a.card__view,button.card__view{display:inline-block}

/* ============================================================
   HOME — "Pick your cake" rows
   ============================================================ */
.showcase{padding:4.4rem 0 3rem}
.showcase .sec-head{margin-bottom:2rem}
.showrow{margin-top:2.6rem}
.showrow:first-child{margin-top:0}
.showrow__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.showrow__head .display{font-size:clamp(1.3rem,3.4vw,1.9rem)}
.showrow__all{font-weight:600;font-size:.88rem;color:var(--orange-2);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.showrow__all:hover{border-color:var(--orange-2)}
.showrow__list{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media (max-width:760px){
  /* mobile par har row side-scroll — Home lamba na ho */
  .showrow__list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(74%,270px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 1.1rem;gap:1rem;padding:.3rem 1.1rem 1rem;margin:0 -1.1rem;scrollbar-width:none}
  .showrow__list::-webkit-scrollbar{display:none}
  .showrow__list .card{scroll-snap-align:start}
}

/* --- contact buttons + outline button --- */
.contact__btns{display:flex;justify-content:center;gap:.9rem;flex-wrap:wrap}
.btn--outline{border-color:var(--brown);color:var(--ink);background:transparent}
.btn--outline:hover{background:var(--brown);color:#ffefd2}

/* dock tooltips ke wajah se 3px horizontal scroll na aaye */
html,body{overflow-x:clip}

/* --- mobile: 2 cards ek row mein (LALS jaisa) --- */
@media (max-width:640px){
  .tabpanel{padding-top:1.6rem}
  .tabpanel .container{padding:0 .9rem}
  .tabpanel .sec-head{margin-bottom:1.6rem}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}
  .card{border-radius:18px}
  .card__body{padding:.8rem .65rem 1rem}
  .card__name{font-size:.95rem;margin-bottom:.25rem}
  .card__desc{font-size:.74rem;margin-bottom:.6rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .card__meta{flex-direction:column;align-items:center;gap:0;margin-bottom:.6rem}
  .card__price{font-size:.98rem}
  .card__size{font-size:.72rem}
  .card__view{font-size:.78rem}
  .tab{font-size:.74rem;padding:.6rem 1rem}
}
@media (max-width:430px){
  .tabs-wrap{padding-left:.7rem;padding-right:.7rem}
  .tabs{gap:.4rem}
  .tab{font-size:.68rem;letter-spacing:.05em;padding:.55rem .8rem}
}

/* custom-order: transparent, reviews section jaisa (koi card/background nahi) */
.custom-order{margin:3.4rem auto 0;max-width:680px;text-align:center;background:none;padding:0;box-shadow:none}
.custom-order .display{font-size:clamp(1.9rem,4.6vw,3rem);margin:0}
.custom-order .sec-sub{margin:1rem auto 1.6rem}

/* "Delivery only in Chakwal" — chota pill, top right */
.delivery-pill{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--body);font-weight:600;font-size:.68rem;line-height:1;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:#ffefd2;background:rgba(43,25,11,.78);border:1px solid rgba(255,239,210,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:.55rem .9rem;border-radius:999px;box-shadow:0 6px 16px -8px rgba(20,10,2,.7)}
.delivery-pill__dot{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px var(--orange)}
.topbanner .delivery-pill{position:absolute;top:12px;right:14px;z-index:5}
.topnote{display:flex;justify-content:flex-end;padding:10px 14px 0}
@media (max-width:640px){.delivery-pill{font-size:.58rem;letter-spacing:.1em;padding:.45rem .7rem}.topbanner .delivery-pill{top:8px;right:8px}.topnote{padding:8px 8px 0}}

/* dock brand tile = logo */
.dock-face--brand{overflow:hidden}
.dock-face--brand img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* footer: logo + svg icons */
.footer__logo{display:block;width:96px;height:96px;border-radius:20px;margin-bottom:.9rem;box-shadow:0 6px 0 rgba(0,0,0,.25)}
.footer__social{display:flex;gap:.7rem;margin-top:1rem}
.footer__ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--orange);color:var(--ink);transition:transform .2s,background .2s}
.footer__ico:hover{background:#ffb23a;transform:translateY(-2px)}
.footer__deliv{margin:.5rem 0 0;color:var(--orange);font-weight:500}


/* ---- About + FAQ (SEO/AEO sections) ---- */
.about{padding:clamp(36px,6vw,64px) 0 0}
.about__text{max-width:62ch;margin:0 auto;text-align:center;font-size:1.05rem;line-height:1.7}
.faq{padding:clamp(40px,6vw,72px) 0}
.faq__list{max-width:760px;margin:0 auto;display:grid;gap:10px}
.faq__item{background:rgba(255,255,255,.7);border:2px solid currentColor;border-radius:16px;padding:0 18px}
.faq__item summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";float:right;font-weight:700}
.faq__item[open] summary::after{content:"\2212"}
.faq__item p{margin:0 0 16px;line-height:1.65}

/* footer: tagline sits right beside the logo */
.footer__brandrow{display:flex;align-items:center;gap:1rem;margin-bottom:.9rem}
.footer__brandrow .footer__logo{flex:none;margin-bottom:0}
.footer__brandrow .footer__blurb{margin:0;max-width:30ch;line-height:1.5}

/* product modal: show the whole photo, as large as the panel allows */
.modal__media{padding:clamp(.8rem,2vw,1.4rem);overflow:hidden}
.modal__media img#m-img{flex:1 1 0;min-height:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain}
.modal__thumbs{flex:none;justify-content:center}
@media (max-width:820px){
  .modal__media{height:48dvh;max-height:none;padding:.9rem .9rem .6rem}
  .modal__media img#m-img{height:100%;max-height:none}
}

/* hero: banner ka fade hero shuru hone se PEHLE poora ho (hero banner ke neeche ~52px overlap karta hai) */
.topbanner{--ov:0px}
@media (min-width:641px){.topbanner{--ov:clamp(0px,calc(9vw - 60px),56px)}}
.topbanner img{
  -webkit-mask-image:linear-gradient(180deg,#000 38%,rgba(0,0,0,.55) calc(68% - var(--ov)*.6),transparent calc(100% - var(--ov)));
          mask-image:linear-gradient(180deg,#000 38%,rgba(0,0,0,.55) calc(68% - var(--ov)*.6),transparent calc(100% - var(--ov)));
}
.topbanner::after{
  background:linear-gradient(180deg,
    rgba(43,25,11,.08) 0%,
    rgba(43,25,11,0) 24%,
    rgba(43,25,11,.22) calc(56% - var(--ov)*.5),
    rgba(43,25,11,.62) calc(82% - var(--ov)*.8),
    var(--brown) calc(100% - var(--ov)));
}
@media (max-width:640px){
  .topbanner{--ov:6px}
  .hero{margin-top:calc(-26px + var(--dock-lift,0px))}   /* banner aur hero ke beech cream patti nahi */
}

/* product modal: photo ke peeche usi photo ka soft blur */
.modal__media{position:relative;isolation:isolate;background:#f8e9c8}
.modal__media::before{content:"";position:absolute;inset:-40px;z-index:-2;background:var(--m-bg,none) center/cover no-repeat;filter:blur(26px) saturate(1.2);transform:scale(1.12)}
.modal__media::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,244,222,.22)}
.modal__media img#m-img{filter:drop-shadow(0 10px 22px rgba(43,25,11,.30))}
.thumb{background:rgba(255,255,255,.85)}