/* Page content and the header's content sit in one centred container (the header background stays full width).
   Sizes follow the client's reference: 1320 / 1140 / 960 / 720, full width with an 8px gutter under 768.
   Slider picture: 1300 x 500 (2.6:1). From 1000px the hero row is 1320/370, which leaves the slider column next to the side banners at 2.6:1, and a
   blurred copy fills any space a different shape leaves. Below 1000px the box takes the shape of the picture on screen (banner-fit.js), so there is no blur. */
:root{--sc-logo:clamp(150px,14vw,190px);--sc-cat:calc(var(--sc-logo) + 6px);--sc-wrap:100%;--sc-banner:2/1;--sc-gutter:8px;--sc-head-side:max(8px,calc((100% - var(--sc-wrap)) / 2))}
@media (min-width:768px){:root{--sc-wrap:720px;--sc-gutter:0px;--sc-banner:13/5}}
@media (min-width:960px){:root{--sc-wrap:960px}}
@media (min-width:1000px){:root{--sc-banner:1320/370}}
@media (min-width:1200px){:root{--sc-wrap:1140px}}
@media (min-width:1320px){:root{--sc-wrap:1320px}}
html header,html .dnavinner,html .sc-sk-top{padding-left:var(--sc-head-side)!important;padding-right:var(--sc-head-side)!important;box-sizing:border-box}
html .lay{max-width:var(--sc-wrap)!important;width:100%;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important;box-sizing:border-box}
html .lay main,html main{padding-left:var(--sc-gutter)!important;padding-right:var(--sc-gutter)!important}
@media (min-width:768px){
  html .desktop-footer-main{max-width:var(--sc-wrap)!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}
  html .storefront-bottom-banner{width:100%!important;max-width:var(--sc-wrap)!important;margin-left:auto!important;margin-right:auto!important}
}
html .sc-sk-body{max-width:var(--sc-wrap);margin:0 auto;padding-left:var(--sc-gutter);padding-right:var(--sc-gutter)}
html .sc-sk-banner{height:auto;aspect-ratio:var(--sc-banner)}

.sc-hero{display:block;margin-bottom:14px;aspect-ratio:var(--sc-banner)}
.sc-hero>#bn,.sc-hero>.sc-wrap{margin-bottom:0}
.sc-hero .sc-wrap,.sc-hero #bn,.sc-hero .bs{height:100%;min-height:0!important}
.sc-hero #bn{padding-bottom:0!important}
.sc-hero-side{display:none}
.sc-hero .bs>span,.sc-hero .bs>div{display:none!important}
/* A slider banner can have its own 1200 x 600 phone picture (<picture>). */
html .sc-hero .bs picture{display:contents}
html .sc-hero .bs img{object-fit:contain!important;z-index:1}
@media (max-width:767px){html .sc-hero .bs::before{background-image:var(--sc-bg-m,var(--sc-bg,none))}}
html .sc-hero .bs::before{content:"";position:absolute;inset:-18px;background:var(--sc-bg,none) center/cover no-repeat;filter:blur(14px) saturate(1.1);opacity:.9}
@media (max-width:999px){
  html .sc-hero{aspect-ratio:var(--sc-hero-r,13/5);transition:aspect-ratio .25s ease}
  html .sc-hero .bs::before{display:none}
  html .sc-sk-banner{aspect-ratio:13/5}
}
/* Desktop: the all-categories button is exactly as wide as the logo above it. */
@media (min-width:1000px){
  html header .hl img{width:var(--sc-logo)!important}
  html .dsubnav .dcat,html .dsubnav .dcat-trigger{width:var(--sc-cat)!important;flex:none}
  html .dsubnav .dcat-trigger{padding-left:10px;padding-right:10px}
}
.sc-hero #bn .bs:not(:has(div))>span,.sc-hero .bs:not(:has(div))>span{display:none}
@media (min-width:1000px){
  .sc-hero--side1,.sc-hero--side2{display:grid;grid-template-columns:minmax(0,2.8fr) minmax(0,1fr);gap:14px}
  .sc-hero--side1>*,.sc-hero--side2>*{min-width:0;height:100%}
  .sc-hero .bs{border-radius:12px}
  .sc-hero-side{display:grid;gap:14px;grid-template-rows:repeat(var(--n,2),minmax(0,1fr))}
  .sc-hero--side1 .sc-hero-side{--n:1}
  .sc-hero-side a{display:block;position:relative;overflow:hidden;border-radius:12px;background:var(--cd);min-height:0}
  .sc-hero-side img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
}

/* Mouse drag on sliders (legacy: slider-drag.js; v2: Carousel). */
@media (hover:hover) and (pointer:fine){.sc{cursor:grab}}
.sc.sc-dragging{cursor:grabbing;scroll-snap-type:none!important;scroll-behavior:auto!important;user-select:none}
.sc.sc-dragging a{pointer-events:none}
.sc img{-webkit-user-drag:none}

/* Product cards: the title stays on one line (ellipsis, full name on the product page); the photo takes the
   line that was freed. The photo fills the box including the extra bottom space. */
.pc .pn{display:block!important;-webkit-line-clamp:unset!important;-webkit-box-orient:unset!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-height:0!important;height:auto!important}
.pc .pi{position:relative;box-sizing:content-box!important;padding-bottom:19px}
.pc .pi>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (min-width:700px){.pc .pi{padding-bottom:20px}}
@media (min-width:1000px){.pc .pi{padding-bottom:21px}}

/* Sliders show whole items only: each item is sized so a whole number fits the row exactly (gap 10px), and
   scroll-snap keeps every stop on an item edge. Products 5 / 3 / 2, offers 4 / 2 / 1, categories + brands
   11 / 7 / 4-3, reels 7 / 5 / 3 (desktop 1000px+ / tablet / phone). */
.sc{gap:10px!important}
.sc>.pc,.sc>.of,.sc>.ct,.sc>.br,.sc>.rl{--n:2;flex:0 0 calc((100% - (var(--n) - 1) * 10px) / var(--n))!important;width:calc((100% - (var(--n) - 1) * 10px) / var(--n))!important;min-width:0!important;max-width:none!important;box-sizing:border-box}
.sc>.of{--n:1}.sc>.ct{--n:4}.sc>.br,.sc>.rl{--n:3}
@media (min-width:700px){.sc>.pc{--n:3}.sc>.of{--n:2}.sc>.ct,.sc>.br{--n:7}.sc>.rl{--n:5}}
@media (min-width:1000px){.sc>.pc{--n:5}.sc>.of{--n:4}.sc>.ct,.sc>.br{--n:11}.sc>.rl{--n:7}}

/* Page banners (panel "Page Banner"), inside the container. Computers: desktop picture, 1320 x 300. Phones and tablets:
   mobile picture, 1200 x 400; a banner without one is not shown there. Several banners for one page slide. */
.sc-page-banner{display:block;margin:0 0 12px}
.sc-page-banner .sc-wrap,.sc-page-banner .sc{margin:0;padding-bottom:0!important}
.sc-page-banner .sc>.bs{flex:0 0 100%!important;width:100%!important;aspect-ratio:3/1;height:auto!important;min-height:0!important;padding:0!important;display:block;position:relative;overflow:hidden;border-radius:12px}
.sc-page-banner .bs{background:var(--cd)}
.sc-page-banner .bs img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
@media (min-width:1000px){
  .sc-page-banner{margin-bottom:16px}
  .sc-page-banner .sc>.bs{aspect-ratio:1320/238}
}

/* Offer page picture: the same height as the home banner at every width (was 2:1 up to 500px tall). */
html .sc-offer-hero{aspect-ratio:var(--sc-banner)!important;max-height:none!important;height:auto}
@media (min-width:1000px){html .sc-offer-hero{aspect-ratio:1320/238!important}}

/* Home offer images: below 1000px a slider, not a scrolling strip: no scrollbar, whole items only (3 at a time),
   snaps, drags with the mouse and slides on its own. Desktop keeps the 5-across row. */
@media (max-width:999px){
  html .sc-offer-images{display:flex!important;grid-auto-columns:unset!important;gap:10px!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;scrollbar-width:none!important;-ms-overflow-style:none;padding-bottom:0!important;overscroll-behavior-x:contain}
  html .sc-offer-images::-webkit-scrollbar{display:none}
  html .sc-offer-images>a{flex:0 0 calc((100% - 20px) / 3)!important;width:auto!important;scroll-snap-align:start}
}
@media (hover:hover) and (pointer:fine){.sc-offer-images{cursor:grab}}
.sc-offer-images.sc-dragging{cursor:grabbing;scroll-snap-type:none!important;scroll-behavior:auto!important;user-select:none}
.sc-offer-images.sc-dragging a{pointer-events:none}
.sc-offer-images img{-webkit-user-drag:none}

/* Phone bottom bar: a label never breaks onto a second line. */
body>nav a,#root nav:not(.dsubnav) a,nav:not(.dsubnav)>a{white-space:nowrap;min-width:0}

/* Product cards: the buy button (কিনুন / Order now) fills the row, the cart button stays at the end. */
html .pc .ab{flex-wrap:nowrap!important;gap:8px!important}
html .pc .ab>.bt:not(.b2){flex:1 1 0!important;width:auto!important;min-width:0!important;align-self:stretch!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
html .pc .ab>.bt.b2{flex:0 0 auto!important;align-self:stretch!important}

/* Desktop menu bar follows the theme (light: white, dark: dark card colour); the category button carries the brand red.
   The loading skeleton uses the same colour. */
html .dsubnav{background:var(--cd)!important;color:var(--tx)!important;border-bottom:1px solid var(--br)!important;box-shadow:var(--sh)!important}
html .dsubnav .dnavlink{color:var(--tx)!important}
html .dsubnav .dnavlink:hover,html .dsubnav .dnavlink.on{background:color-mix(in srgb,var(--tx) 9%,transparent)!important;color:var(--tx)!important}
html .dsubnav .dcat-trigger{background:var(--rd)!important;color:#fff!important}
html .dcat:hover .dcat-trigger,html .dcat.open .dcat-trigger{background:color-mix(in srgb,#000 14%,var(--rd))!important;color:#fff!important}
html .sc-sk-nav{background:var(--cd)!important}

/* Product page: the main photo is square at every width (it fits, never crops). From 1000px it takes 40% of the card from
   the left edge (516px at the 1320 container) and the details fill the rest, so the card has no empty sides. */
html .cd2.pdp .pi{aspect-ratio:1!important;height:auto!important;max-height:none!important}
@media (min-width:1000px){
  html .cd2.pdp{grid-template-columns:minmax(0,40%) minmax(0,1fr)!important;gap:24px!important;align-items:start}
  html .cd2.pdp .pdp-gallery-thumb{flex-basis:64px;width:64px;height:64px}
}

/* Phones: the footer ends just above the bottom menu (66px). The copyright keeps side room so the floating chat button never covers it. */
@media (max-width:699px){
  html body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))!important}
  html .mobile-footer{padding-bottom:0!important;margin-bottom:0!important}
  html .mobile-footer .sc-footer-credit{padding:6px 70px 4px!important;margin-bottom:0!important}
}

/* Heart: no circle behind it; an outline that fills red once the product is on the wishlist. The emoji in the markup stays for the shop's text but is not drawn. */
html .hb,html .cd2.pdp .pi .hb{background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0!important;width:34px;height:34px;font-size:0!important;display:grid;place-items:center}
html .hb::before{content:"";display:block;width:26px;height:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20.5S3.5 15.4 3.5 9.2A4.7 4.7 0 0 1 12 6.6a4.7 4.7 0 0 1 8.5 2.6c0 6.2-8.5 11.3-8.5 11.3z'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff)}
html .hb.on::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef2b2d' stroke='%23ef2b2d' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20.5S3.5 15.4 3.5 9.2A4.7 4.7 0 0 1 12 6.6a4.7 4.7 0 0 1 8.5 2.6c0 6.2-8.5 11.3-8.5 11.3z'/%3E%3C/svg%3E")}

/* Product photo: no arrows or zoom button. A mouse may still zoom on hover; touch screens never zoom. Below 700px the photo fills the card inside its border;
   from 700 to 999px the card has two columns, so it fills the left column up to the card's left and top border. */
html .sc-gallery-controls{display:none!important}
@media (hover:none){html .pdp-gallery-main.sc-gallery-main .pdp-main-image{transform:none!important;cursor:default!important}}
@media (max-width:699px){html .cd2.pdp .pdp-gallery-main{width:calc(100% + 28px)!important;max-width:none;margin:-14px -14px 0!important;border-radius:9px 9px 0 0!important}}
@media (min-width:700px) and (max-width:999px){html .cd2.pdp .pdp-gallery-main{width:calc(100% + 14px)!important;max-width:none;margin:-14px 0 0 -14px!important;border-radius:9px 0 0 0!important}}

/* First paint from the server: a slider banner shows only where it has a picture. */
@media (max-width:767px){html .sc-hero .bs.sc-no-phone{display:none!important}html .sc-hero:not(:has(.bs:not(.sc-no-phone))){display:none}}
@media (min-width:768px){html .sc-hero .bs.sc-no-desk{display:none!important}}

/* Header theme button: the base CSS hides it from 1000px. One click switches light/dark; the icon (header-fa.css) shows the mode a click leads to. */
@media (min-width:1000px){html .dtop .thb{display:flex!important;padding:8px}
}