/* Everna (536645) — custom CSS for the basic page-builder theme, built from the evernastyle mock.
   Source of truth; uploaded as custom-combined.css (no previous custom CSS on this store). */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

/* 1. Palette + theme variables (theme.js derives these from theme_color; no admin setting for them).
   Was: red menu bar var, red header icons, orange #FF7222 discount tag, grey #F0F0F0 footer, 12px cards. */
html:root{
  --ev-brand:#F30020;--ev-cta:#D4001B;--ev-cta-dark:#B00016;--ev-deal:#0E7C6B;--ev-gold:#8A6420;--ev-blush:#F3DED6;
  --ev-ink:#1A1A1A;--ev-text:#2B2B2B;--ev-muted:#6B6B6B;--ev-line:#E8E2DA;--ev-ivory:#FAF6F0;
  --ev-head:'Playfair Display',Georgia,'Times New Roman',serif;--ev-body:'Noto Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --ev-r:4px;--ev-r-md:10px;--ev-r-lg:16px;--ev-shadow:0 10px 30px rgba(26,26,26,.10);
  --typography-font-family:var(--ev-body);
  --header-main:#FFFFFF;--header-contrast-text:#1A1A1A;--header-accent:#1A1A1A;--header-badge-main:#F30020;--header-badge-contrast-text:#FFFFFF;
  --header-menu-bar-background:#FFFFFF;--header-menu-bar-color:#1A1A1A;--header-divider:1px solid #E8E2DA;--header-box-shadow:none;
  --search-bar-main:#FAF6F0;--search-bar-border:1px solid #E8E2DA;--search-bar-icon-main:#6B6B6B;--search-bar-icon-accent:#1A1A1A;
  --button-main:#D4001B;--button-borderColor:#D4001B;--button-contrast-text:#FFFFFF;
  --product-discount-tag-background:#0E7C6B;--product-discount-tag-color:#FFFFFF;--product-price-color:#1A1A1A;
  --footer-main:#FAF6F0;--footer-contrast-text:#2B2B2B;--card-radius:10px;
  --bottom-nav-selected:#F30020;--bottom-nav-not-selected:#6B6B6B;--bottom-nav-badge-main:#F30020;
}
body,.sh-body{font-family:var(--ev-body)}
body.sh-body{background:#FFFFFF}  /* was the theme's #FDFCFB off-white; the mock is white */

/* 1a. Home rows: collection rows come without max_width (Section.jsx getSectionCssVars), so every row ran
   full-bleed (0–1686px at 1700). Put them all on the 1280px column, like the native rows and the mock. */
main .grid.section{max-width:1280px!important;margin-left:auto;margin-right:auto;width:100%}

/* 1b. Home rhythm: one gap between every section (mock .ev-sec: 52 / 40 / 28px). Was: HTML sections touching. */
.HtmlRenderer-component .sx{padding-top:52px}
.HtmlRenderer-component .sx-cat{padding-top:24px}
.HtmlRenderer-component .sx-hero,.HtmlRenderer-component .sx-usp{padding-top:14px}
@media (max-width:1023px){.HtmlRenderer-component .sx{padding-top:40px}.HtmlRenderer-component .sx-cat{padding-top:20px}.HtmlRenderer-component .sx-hero,.HtmlRenderer-component .sx-usp{padding-top:12px}}
@media (max-width:767px){.HtmlRenderer-component .sx{padding-top:28px}.HtmlRenderer-component .sx-cat{padding-top:16px}.HtmlRenderer-component .sx-hero,.HtmlRenderer-component .sx-usp{padding-top:10px}}
/* Our Story has its own ivory background, so its gap and gutter must be margin, not padding
   (padding made the ivory box 20px wider than the column and 52px taller). */
.HtmlRenderer-component .sx.sx-story{padding:0;margin:52px 20px 0;width:auto}
body:has(.mobile-app-bar) .HtmlRenderer-component .sx.sx-story{padding:0;margin-left:16px;margin-right:16px}
@media (max-width:1023px){.HtmlRenderer-component .sx.sx-story{margin-top:40px}}
@media (max-width:767px){.HtmlRenderer-component .sx.sx-story{margin-top:28px}}
/* Native product rows: the heading's own margin is zeroed (section 4) and the item's 20px bottom padding made 72px
   below; the row's top padding now carries the same 52 / 40 / 28px rhythm. */
main .section-item.ProductGridCollection-component{padding-top:52px!important;padding-bottom:0!important}
/* Last section (Birthday Club) touched the footer: same gap below it. */
.HtmlRenderer-component .sx-club{padding-bottom:52px}
@media (max-width:1023px){.HtmlRenderer-component .sx-club{padding-bottom:40px}}
@media (max-width:767px){.HtmlRenderer-component .sx-club{padding-bottom:28px}}
@media (max-width:1023px){main .section-item.ProductGridCollection-component{padding-top:40px!important}}
@media (max-width:767px){main .section-item.ProductGridCollection-component{padding-top:28px!important}}

/* 2. Notice bar: marquee (notice_message carries .ev-mq HTML, HeaderNotice.jsx renders it raw). Was: no notice. */
.notice{background:#1A1A1A!important;color:#fff!important;overflow:hidden;padding:0!important;font:600 12.5px/1 var(--ev-body);letter-spacing:.02em}
.notice .notice-message{display:block;width:100%;overflow:hidden;white-space:nowrap}
.notice .notice-message>div{display:block}
.notice .ev-mq{display:flex;width:max-content;animation:ev-marquee 38s linear infinite}
.notice:hover .ev-mq{animation-play-state:paused}
.notice .ev-mq__run{display:flex;align-items:center;padding:9px 0}
.notice .ev-mq__run span{padding:0 22px;white-space:nowrap}
.notice .ev-mq__run i{color:var(--ev-brand);font-style:normal;font-size:10px}
@keyframes ev-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.notice .ev-mq{animation:none}}

/* 3. Header + menu. Was: red-accent icons, plain sentence-case menu links. */
.sh-header-main,header.MuiAppBar-root{border-bottom:1px solid var(--ev-line)}
.logo-ctn img.sh-header-logo,.logo-ctn img.logo{height:58px!important;width:auto!important;max-height:none!important}
.mobile-app-bar .logo-ctn img.sh-header-logo,.mobile-app-bar .logo-ctn img.logo{height:44px!important}
/* title_show=false hides the h1 only; the punchline "everna.style" (header.title_punchline, merchant text, kept) still showed next to the logo. */
.logo-ctn .title-ctn{display:none!important}
/* Desktop header toolbar used a 16px gutter (logo 4px left of the 20px content column at every width). */
header.app-bar:not(.mobile-app-bar) .toobar-regular{padding-left:20px!important;padding-right:20px!important}
.sh-header-menu.menu-bar{background:#fff;border-top:1px solid var(--ev-line)}
.sh-header-menu .menu-bottom{gap:28px;justify-content:center}
/* Review 27 Oct: centring inside the overflow:auto row pushed the first items (KURTAS, KURTA SETS) off the left edge,
   out of scroll reach, whenever the 10 items don't fit (desktop UA below ~840px, e.g. iPad portrait). Equal flexible
   spacers centre the row when it fits and collapse to 0 when it overflows, so the row then starts at its left end. */
.sh-header-menu .menu-bottom{justify-content:flex-start}
.sh-header-menu .menu-bottom::before,.sh-header-menu .menu-bottom::after{content:"";flex:1 0 0}
/* Review 28 Oct (spacing pass): 10 items overflowed by ~44px at 1024; a smaller gap fits them down to ~1000px. */
@media (max-width:1199px){.sh-header-menu .menu-bottom{gap:20px}}
/* The logo PNG (256×139) is 26% transparent on the left (mark starts at x=66), so the visible "EVERNA" sat ~27px inside
   the content column (120 vs 93 at 1440, screenshots). Shift the logo box, not the image: the img sits in an
   overflow:hidden box, and a negative margin on the img clipped the "E". */
header.app-bar:not(.mobile-app-bar) .logo-ctn{margin-left:-27px!important}
.sh-header-menu .menu-bottom a.links{position:relative;padding:12px 0;margin:0!important;font:700 12.5px/1.2 var(--ev-body);letter-spacing:.07em;text-transform:uppercase;color:var(--ev-ink)!important;white-space:nowrap}
.sh-header-menu .menu-bottom a.links::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--ev-brand);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.sh-header-menu .menu-bottom a.links:hover::after{transform:scaleX(1)}
.sh-header-searchbar-slot .search-shell input{font-family:var(--ev-body)}

/* 4. Shared section heads (native collection rows). Was: theme sans 20px titles, plain "View All". */
/* The theme right-aligns the title (x=1248 at 1700) and absolutely positions "View All"; lay it out as the mock:
   title + subtitle on the left, "View all →" on the right, bottoms aligned. */
.sh-section-heading{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:16px;row-gap:4px;margin:0 0 6px!important;padding:0!important;text-align:left!important;justify-content:stretch!important}
.sh-section-heading>a:first-child{grid-column:1;grid-row:1;text-decoration:none;justify-self:start}
.sh-section-heading .section-heading{margin:0!important;font:500 34px/1.15 var(--ev-head)!important;color:var(--ev-ink)!important;letter-spacing:-.01em;text-transform:none!important;text-align:left!important}
.sh-section-heading .section-description{grid-column:1;grid-row:2;margin:0!important;font:400 13.5px/1.5 var(--ev-body)!important;color:var(--ev-muted)!important;text-align:left!important}
.sh-section-heading .section-heading-viewall{grid-column:2;grid-row:1/3;align-self:end;position:static!important;display:inline-flex;align-items:center;gap:6px;font:700 13px/1.2 var(--ev-body)!important;color:var(--ev-ink)!important;border-bottom:1.5px solid var(--ev-ink);padding-bottom:2px;text-decoration:none;white-space:nowrap;text-transform:none!important}
.sh-section-heading .section-heading-viewall::after{content:"\2192"}
.sh-section-heading .section-heading-viewall:hover{color:var(--ev-cta)!important;border-color:var(--ev-cta)}
/* Bottom "View All" button (theme hides it; the mock shows it centred under each row). The swiper's inline 10px bottom padding is removed so the next gap stays 52px. */
.ProductGridCollection-component .view-all{display:flex!important}
.ProductGridCollection-component .swiper{padding-bottom:0!important}
.view-all{display:flex;justify-content:center;margin-top:18px}
.view-all a{display:inline-flex;align-items:center;min-height:42px;padding:0 20px;border:1.5px solid var(--ev-ink);border-radius:var(--ev-r);font:700 14px/1 var(--ev-body);color:var(--ev-ink);background:#fff;text-decoration:none}
.view-all a:hover{background:var(--ev-ink);color:#fff}
@media (max-width:1023px){.sh-section-heading .section-heading{font-size:30px!important}}
@media (max-width:767px){.sh-section-heading .section-heading{font-size:24px!important}}

/* 5. Product card (mock TWO_CARD: brand eyebrow, muted name, ink price, teal % off, outlined "+ Add").
   Was: theme sans card, orange % tag, two red-outline buttons. */
/* Review 28 Oct: the theme pads every card 12px (.pr-long-card) and the card edge is invisible, so the photo floated
   12px in and the text/size/"+ Add" (another 10px in) didn't line up with it; columns read 36px apart.
   Now the photo fills the card and everything under it is flush with the photo's edges, as in the mock's media.
   No hover frame (it would sit tight against flush text); the photo zoom stays. */
.sh-product-card.pr-long-card{padding:0!important;border:0!important;border-radius:0;background:#fff}
.sh-product-card .sh-product-img{background:var(--ev-ivory);border-radius:var(--ev-r-md)}
.sh-product-card .sh-product-img img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sh-product-card:hover .sh-product-img img{transform:scale(1.05)}
.sh-product-card .pr-card-content{padding:10px 0 0!important}
/* Review 28 Oct — size choice on cards. Was: a grey 999px pill (16px, light border) over the square ink "+ Add", and a bare
   "Xl" on single-size cards. The dropdown and the single-size text are the same element (p.pr-two-col-vatext), so both
   read "Size  XL" on a 40px line; the dropdown gets the button's 4px corners and an ink label. */
.sh-product-card .pr-var-btn{border-radius:var(--ev-r)!important;border:1px solid #CFC6BA!important;background:#fff!important;height:40px;padding:0 10px 0 12px!important}
.sh-product-card .pr-var-btn:hover{border-color:var(--ev-ink)!important}
.sh-product-card .pr-two-col-vatext{text-transform:uppercase!important;font:700 13px/1 var(--ev-body)!important;color:var(--ev-ink)!important;letter-spacing:.03em}
.sh-product-card .pr-two-col-vatext::before{content:"Size";margin-right:8px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ev-muted)}
.sh-product-card .my-2>.pr-two-col-vatext{display:flex;align-items:center;height:40px;padding-left:1px}
/* Keep the size row with "+ Add" at the card bottom (the theme pushes only the last child down, so the size row rode up
   on cards with a one-line name). */
.sh-product-card .pr-card-content>.my-2{margin-top:auto!important;margin-bottom:8px!important}
.sh-product-card .pr-card-content>.my-2+*{margin-top:0!important}
/* Grid spacing once the card padding is gone. Home grids: inline gap:12px; listing pages: gap-2 / md:gap-3 (8 / 12px)
   and a theme #E6E6E6 card border (now 0). Mock: 10 / 14 / 20px columns. */
.grid:has(>div>.sh-product-card){column-gap:12px!important;row-gap:24px!important}
@media (min-width:768px){.grid:has(>div>.sh-product-card){column-gap:16px!important;row-gap:32px!important}}
@media (min-width:1024px){.grid:has(>div>.sh-product-card){column-gap:20px!important}}
.sh-product-card .pr-card-content::before{content:"EVERNA";display:block;font:700 11px/1.3 var(--ev-body);letter-spacing:.14em;color:var(--ev-ink);margin-bottom:3px}
.sh-product-card .sh-product-card-name{font:400 13px/1.35 var(--ev-body)!important;color:var(--ev-muted)!important;text-transform:none!important}
.sh-product-card .sh-product-card-price{font:700 15.5px/1.2 var(--ev-body)!important;color:var(--ev-ink)!important}
.sh-product-card .sh-product-card-mrp{font:400 12px/1.2 var(--ev-body)!important;color:var(--ev-muted)!important}
.sh-product-card .sh-product-card-discount-tag{background:var(--ev-deal)!important;color:#fff!important;font:700 11px/1 var(--ev-body)!important;letter-spacing:.02em;border-radius:999px!important;padding:5px 9px!important;text-transform:uppercase}
.sh-product-card .pr-outlined-button.sh-product-plus-minus-button{border:1.5px solid var(--ev-ink)!important;background:#fff!important;color:var(--ev-ink)!important;border-radius:var(--ev-r)!important;font:700 12.5px/1 var(--ev-body)!important}
.sh-product-card .pr-outlined-button.sh-product-plus-minus-button *{color:inherit!important;font:inherit!important}
.sh-product-card .pr-outlined-button.sh-product-plus-minus-button:hover{background:var(--ev-cta)!important;border-color:var(--ev-cta)!important;color:#fff!important}
@media (max-width:767px){.sh-product-card .sh-product-card-name{font-size:12.5px!important}.sh-product-card .sh-product-card-price{font-size:14.5px!important}}
/* Review 28 Oct — "Select Variant" sheet (opens from a card's size dropdown). Was: bright red (#F30020) header, red-outline
   "+ Add" (theme --button-main), the full product name repeated on every size, sizes as "Xl"/"2xl". */
.bottom-sheet-body:has(.pr-var-card) .cust-head-ctn{background:var(--ev-ink)!important}
.bottom-sheet-body:has(.pr-var-card) .cust-head-title{font:500 20px/1.25 var(--ev-head)!important;color:#fff!important}
.bottom-sheet-body:has(.pr-var-card) .cust-head-subtitle{font:400 13px/1.4 var(--ev-body)!important;color:rgba(255,255,255,.75)!important}
.pr-var-card{border:1px solid var(--ev-line)!important;border-radius:var(--ev-r-md)!important;box-shadow:none!important}
.pr-var-card .name{display:none!important}
.pr-var-card .MuiTypography-body1{text-transform:uppercase!important;font:700 14px/1.3 var(--ev-body)!important;color:var(--ev-ink)!important}
.pr-var-card .MuiTypography-body1::before{content:"Size ";font-weight:400;text-transform:none;color:var(--ev-muted)}
.pr-var-card .pr-outlined-button{border:1.5px solid var(--ev-ink)!important;background:#fff!important;color:var(--ev-ink)!important;border-radius:var(--ev-r)!important;font:700 12.5px/1 var(--ev-body)!important}
.pr-var-card .pr-outlined-button *{color:inherit!important;font:inherit!important}
.pr-var-card .pr-outlined-button:hover{background:var(--ev-cta)!important;border-color:var(--ev-cta)!important;color:#fff!important}
/* Review 27 Oct: the desktop-UA "Trending Now" swiper is slidesPerView:auto with an inline width of 6 per row at every
   width (82px cards at 609, 120px at 820: names, sizes and the cart stepper clipped). iPads send a desktop UA.
   Swiper measures slides in auto mode, so widening them here keeps its paging correct. Phone UA keeps its own 2 per row. */
@media (max-width:1023px){body:not(:has(.mobile-app-bar)) .ProductGridCollection-component .swiper-slide{width:calc(25% - 9px)!important}}
@media (max-width:767px){body:not(:has(.mobile-app-bar)) .ProductGridCollection-component .swiper-slide{width:calc(33.333% - 8px)!important}}
@media (max-width:479px){body:not(:has(.mobile-app-bar)) .ProductGridCollection-component .swiper-slide{width:calc(50% - 6px)!important}}

/* 6. Our HTML sections (.sx, inline render mode → light DOM). Shared base from the mock's theme.css. */
.sx{--sx-maxw:1280px;width:100%;color:var(--ev-text);font:14px/1.5 var(--ev-body);box-sizing:border-box}
/* HtmlRenderer items get padding:0 (Section.jsx) while product rows get 0 20px (desktop UA) / 0 16px (phone UA): match that column. */
.HtmlRenderer-component .sx{padding-left:20px;padding-right:20px}
body:has(.mobile-app-bar) .HtmlRenderer-component .sx{padding-left:16px;padding-right:16px}
.sx *{box-sizing:border-box}
.sx ul{list-style:none;margin:0;padding:0}
.sx a{text-decoration:none;color:inherit}
.sx img{display:block;max-width:100%}
.sx .sx-ic{width:16px;height:16px;flex:none}
.sx .sx-eyebrow{display:inline-block;font:700 11px/1.3 var(--ev-body);letter-spacing:.18em;text-transform:uppercase;color:var(--ev-gold)}
.sx .sx-h2{margin:0;font:500 24px/1.15 var(--ev-head);color:var(--ev-ink);letter-spacing:-.01em}
.sx .sx-sub{margin:4px 0 0;color:var(--ev-muted);font-size:13.5px}
.sx .sx-sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.sx .sx-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;color:var(--ev-ink);border-bottom:1.5px solid var(--ev-ink);padding-bottom:2px;white-space:nowrap}
.sx .sx-link:hover{color:var(--ev-cta);border-color:var(--ev-cta)}
.sx .sx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:var(--ev-r);background:var(--ev-cta);color:#fff;font:700 14px/1 var(--ev-body);letter-spacing:.02em;border:1.5px solid var(--ev-cta);transition:background .18s,color .18s,box-shadow .18s;white-space:nowrap}
.sx .sx-btn .sx-ic{width:18px;height:18px;transition:transform .18s}
.sx .sx-btn:hover{background:var(--ev-cta-dark);border-color:var(--ev-cta-dark);box-shadow:0 8px 20px rgba(212,0,27,.25)}
.sx .sx-btn:hover .sx-ic{transform:translateX(3px)}
.sx .sx-btn--ghost{background:transparent;color:var(--ev-ink);border-color:var(--ev-ink)}
.sx .sx-btn--ghost:hover{background:var(--ev-ink);color:#fff;box-shadow:none}
@media (min-width:768px){.sx .sx-h2{font-size:30px}.sx .sx-sec__head{margin-bottom:22px}}
@media (min-width:1024px){.sx .sx-h2{font-size:34px}}

/* 6a. Shop by Category — Myntra-style circles + hover transition (MOM). Replaces the native "Browse Categories" row. */
.sx-cat{padding:4px 0 0}
.sx-cat .sx-cat__title{margin:0 0 12px;font:700 11px/1.3 var(--ev-body);letter-spacing:.2em;text-transform:uppercase;color:var(--ev-muted);text-align:center}
.sx-cat .sx-cat__row{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:none}
.sx-cat .sx-cat__row::-webkit-scrollbar{display:none}
.sx-cat .sx-cat__row li{flex:0 0 auto;scroll-snap-align:start}
.sx-cat .sx-cat__row a{display:flex;flex-direction:column;align-items:center;gap:8px;width:76px}
.sx-cat .sx-cat__ring{display:block;width:76px;height:76px;border-radius:50%;padding:3px;overflow:hidden;background:linear-gradient(135deg,var(--ev-blush),var(--ev-gold));transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,box-shadow .25s}
.sx-cat .sx-cat__ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid #fff;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sx-cat .sx-cat__label{position:relative;font:700 12px/1.2 var(--ev-body);color:var(--ev-ink);text-align:center;transition:color .2s}
.sx-cat .sx-cat__label::after{content:"";position:absolute;left:50%;bottom:-3px;width:0;height:1.5px;background:var(--ev-brand);transition:width .25s,left .25s}
.sx-cat a:hover .sx-cat__ring{transform:translateY(-4px);background:linear-gradient(135deg,var(--ev-brand),var(--ev-gold));box-shadow:0 12px 24px rgba(243,0,32,.18)}
.sx-cat a:hover .sx-cat__ring img{transform:scale(1.1)}
.sx-cat a:hover .sx-cat__label{color:var(--ev-brand)}
.sx-cat a:hover .sx-cat__label::after{width:100%;left:0}
@media (max-width:420px){.sx-cat .sx-cat__row{gap:10px}.sx-cat .sx-cat__row a{width:64px}.sx-cat .sx-cat__ring{width:64px;height:64px}.sx-cat .sx-cat__label{font-size:11.5px}}
@media (min-width:768px){.sx-cat .sx-cat__row{justify-content:center;gap:34px;overflow:visible}.sx-cat .sx-cat__row a{width:120px}.sx-cat .sx-cat__ring{width:112px;height:112px}.sx-cat .sx-cat__label{font-size:13.5px}}
@media (min-width:1024px){.sx-cat .sx-cat__row{gap:48px}.sx-cat .sx-cat__row a{width:150px}.sx-cat .sx-cat__ring{width:148px;height:148px;padding:4px}.sx-cat .sx-cat__ring img{border-width:4px}.sx-cat .sx-cat__label{font-size:14px;letter-spacing:.02em}}

/* 6b. Hero — smaller banner inside the content column (MOM), 2 slides, own fade slider script. */
.sx-hero .sx-hero__frame{position:relative}
.sx-hero .sx-hero__track{position:relative;border-radius:var(--ev-r-md);overflow:hidden;aspect-ratio:1/1;background:var(--ev-ivory)}
.sx-hero .sx-hero__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}
.sx-hero .sx-hero__slide.is-on{opacity:1;visibility:visible;z-index:1}
.sx-hero .sx-hero__img,.sx-hero picture{display:block;width:100%;height:100%}
.sx-hero .sx-hero__img img{width:100%;height:100%;object-fit:cover}
.sx-hero .sx-hero__content{position:absolute;left:0;right:0;bottom:0;padding:70px 18px 34px;background:linear-gradient(180deg,rgba(26,26,26,0),rgba(26,26,26,.72) 55%);color:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none}
.sx-hero .sx-hero__content a{pointer-events:auto}
.sx-hero .sx-hero__content .sx-eyebrow{color:#ffd7b0}
.sx-hero .sx-hero__title{margin:0;font:500 26px/1.1 var(--ev-head);color:#fff;max-width:14ch;letter-spacing:-.01em}
.sx-hero .sx-hero__content p{margin:0;font-size:13.5px;opacity:.92}
.sx-hero .sx-hero__content .sx-btn{margin-top:4px;min-height:42px}
.sx-hero .sx-hero__arrow{display:none}
.sx-hero .sx-hero__dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;z-index:2}
.sx-hero .sx-hero__dots button{width:7px;height:7px;border-radius:50%;border:0;background:rgba(255,255,255,.55);padding:0;cursor:pointer;transition:width .2s,background .2s}
.sx-hero .sx-hero__dots button.is-on{width:22px;border-radius:4px;background:#fff}
@media (min-width:641px){
  .sx-hero .sx-hero__track{aspect-ratio:1600/560}
  .sx-hero .sx-hero__content{inset:0 auto 0 0;width:47%;padding:0 6%;justify-content:center;background:none;color:var(--ev-ink)}
  .sx-hero .sx-hero__content .sx-eyebrow{color:var(--ev-gold)}
  .sx-hero .sx-hero__title{color:var(--ev-ink);font-size:30px}
  .sx-hero .sx-hero__content p{color:var(--ev-muted);font-size:14px;opacity:1}
  .sx-hero .sx-hero__dots{bottom:14px;justify-content:flex-start;padding-left:6%;width:47%}
  .sx-hero .sx-hero__dots button{background:rgba(26,26,26,.25)}
  .sx-hero .sx-hero__dots button.is-on{background:var(--ev-ink)}
}
/* Review 27 Oct: slide 1's image carries a printed "EVERNA" top-left (to 11% of its height). Between 641 and 1023 the
   centred 3-line title block started above it (12px at 768 vs the mark's 29px) and ran into the dots.
   Smaller, 2-line copy here keeps the block clear of both. */
@media (min-width:641px) and (max-width:1023px){
  .sx-hero .sx-hero__content{width:56%;padding:0 5%;gap:6px}
  .sx-hero .sx-hero__title{font-size:24px;max-width:18ch}
  .sx-hero .sx-hero__content p{font-size:13px}
  .sx-hero .sx-hero__content .sx-btn{min-height:38px;padding:0 16px;font-size:13px}
  .sx-hero .sx-hero__dots{padding-left:5%;bottom:10px}
}
@media (min-width:1024px){
  .sx-hero .sx-hero__track{border-radius:var(--ev-r-lg)}
  .sx-hero .sx-hero__title{font-size:40px;max-width:13ch}
  .sx-hero .sx-hero__content p{font-size:16px}
  .sx-hero .sx-hero__content{gap:12px}
  .sx-hero .sx-hero__arrow{display:grid;place-items:center;position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--ev-ink);box-shadow:var(--ev-shadow);cursor:pointer;z-index:3;opacity:0;transition:opacity .2s}
  .sx-hero .sx-hero__arrow .sx-ic{width:20px;height:20px}
  .sx-hero .sx-hero__frame:hover .sx-hero__arrow,.sx-hero .sx-hero__arrow:focus-visible{opacity:1}
  .sx-hero .sx-hero__arrow--l{left:20px}.sx-hero .sx-hero__arrow--r{right:20px}
}
/* 1024–1179: the 40px title still wrapped to 3 lines and cleared the mark by only 5px at 1024. */
@media (min-width:1024px) and (max-width:1179px){.sx-hero .sx-hero__title{font-size:34px;max-width:16ch}}

/* 6c. USP strip — true claims only (COD-only store, flat ₹80 delivery, no free-shipping threshold). */
.sx-usp .sx-usp__list{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;padding:14px 0;border-top:1px solid var(--ev-line);border-bottom:1px solid var(--ev-line)}
.sx-usp .sx-usp__item,.sx-usp .sx-usp__item>a{display:flex;align-items:center;gap:10px;min-width:0}
.sx-usp .sx-usp__icon{width:26px;height:26px;flex:none;color:var(--ev-brand)}
.sx-usp .sx-usp__txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.sx-usp .sx-usp__txt b{font-size:12.5px;color:var(--ev-ink)}
.sx-usp .sx-usp__txt small{font-size:11px;color:var(--ev-muted)}
.sx-usp .sx-usp__item>a:hover b{color:var(--ev-cta)}
@media (min-width:768px){.sx-usp .sx-usp__list{grid-template-columns:repeat(4,1fr);padding:18px 0}.sx-usp .sx-usp__item{justify-content:center}.sx-usp .sx-usp__txt b{font-size:13.5px}.sx-usp .sx-usp__txt small{font-size:12px}}
/* Review 28 Oct: at 768–959 four columns wrapped "Delivery across India" to 3 lines beside 1-line items; keep 2×2 there. */
@media (min-width:768px) and (max-width:959px){.sx-usp .sx-usp__list{grid-template-columns:1fr 1fr;padding:14px 0}.sx-usp .sx-usp__item{justify-content:flex-start}}

/* 6d. Shop by Budget — 2 price tiles (no product is ₹1000+ yet, so that tile is left out). */
.sx-budget .sx-budget__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sx-budget .sx-ptile a{position:relative;display:block;border-radius:var(--ev-r-md);overflow:hidden;aspect-ratio:1/1;background:var(--ev-ivory)}
.sx-budget .sx-ptile img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sx-budget .sx-ptile a:hover img{transform:scale(1.06)}
.sx-budget .sx-ptile__content{position:absolute;inset:auto 0 0 0;padding:40px 12px 12px;background:linear-gradient(180deg,rgba(26,26,26,0),rgba(26,26,26,.78));color:#fff;display:flex;flex-direction:column;gap:2px}
.sx-budget .sx-ptile__content b{font:600 18px/1.1 var(--ev-head)}
.sx-budget .sx-ptile__content small{font-size:11.5px;opacity:.88}
.sx-budget .sx-ptile__content em{display:none}
@media (min-width:768px){
  .sx-budget .sx-budget__grid{gap:18px}
  .sx-budget .sx-ptile a{border-radius:var(--ev-r-lg);aspect-ratio:16/10}
  .sx-budget .sx-ptile__content{padding:60px 22px 20px;gap:4px}
  .sx-budget .sx-ptile__content b{font-size:30px}
  .sx-budget .sx-ptile__content small{font-size:13px}
  .sx-budget .sx-ptile__content em{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:6px;font:700 13px/1.2 var(--ev-body);font-style:normal;border-bottom:1.5px solid #fff;padding-bottom:2px}
}
@media (min-width:1024px){.sx-budget .sx-budget__grid{gap:24px}.sx-budget .sx-ptile__content b{font-size:36px}}

/* 6e. Kurta Sets & Co-ords promo banner. */
.sx-promo .sx-promo__card{position:relative;display:block;border-radius:var(--ev-r-md);overflow:hidden;aspect-ratio:1/1;background:var(--ev-ivory)}
.sx-promo picture,.sx-promo img{display:block;width:100%;height:100%}
.sx-promo img{object-fit:cover}
.sx-promo .sx-promo__content{position:absolute;left:0;top:0;width:100%;padding:22px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;color:var(--ev-ink)}
.sx-promo .sx-promo__title{font:500 24px/1.1 var(--ev-head);color:var(--ev-ink)}
.sx-promo .sx-promo__text{font-size:13px;color:var(--ev-muted);max-width:30ch}
.sx-promo .sx-btn{margin-top:6px;min-height:40px;padding:0 16px;font-size:13px}
/* Phones: the 1:1 overlay put the button on top of the photos; stack the copy above the image instead. */
@media (max-width:640px){.sx-promo .sx-promo__card{aspect-ratio:auto;display:flex;flex-direction:column}.sx-promo .sx-promo__content{position:static;order:0;padding:22px 18px 6px}.sx-promo picture{order:1;height:auto}.sx-promo img{height:auto;aspect-ratio:3/2;object-position:50% 100%}}
@media (min-width:641px){.sx-promo .sx-promo__card{aspect-ratio:1560/520;border-radius:var(--ev-r-lg)}.sx-promo .sx-promo__content{width:38%;height:100%;justify-content:center;padding:0 4%;gap:10px}.sx-promo .sx-promo__title{font-size:30px}.sx-promo .sx-btn{min-height:46px;padding:0 22px;font-size:14px}}
@media (min-width:1024px){.sx-promo .sx-promo__title{font-size:40px;max-width:10ch}.sx-promo .sx-promo__text{font-size:15px}}

/* 6f. Our Story. */
.sx-story{background:var(--ev-ivory);display:grid;grid-template-columns:1fr;border-radius:var(--ev-r-md);overflow:hidden}
.sx-story .sx-story__media img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 0}
.sx-story .sx-story__body{padding:26px 20px 30px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.sx-story .sx-story__title{margin:0;font:500 28px/1.12 var(--ev-head);color:var(--ev-ink)}
.sx-story .sx-story__title em{font-style:italic;color:var(--ev-brand)}
.sx-story .sx-story__lead{margin:0;font-size:14.5px;line-height:1.65;color:var(--ev-text)}
.sx-story .sx-story__pillars{margin-top:4px;display:grid;gap:12px;width:100%}
.sx-story .sx-story__pillars li{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center}
.sx-story .sx-story__icon{grid-row:1/3;width:26px;height:26px;color:var(--ev-brand)}
.sx-story .sx-story__pillars b{font-size:14px;color:var(--ev-ink)}
.sx-story .sx-story__pillars span{font-size:12.5px;color:var(--ev-muted)}
.sx-story .sx-story__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
/* Review 28 Oct: on phones the two CTAs stacked at different widths; make both full width. */
@media (max-width:479px){.sx-story .sx-story__cta .sx-btn{flex:1 1 100%}}
@media (min-width:768px){.sx-story{grid-template-columns:1fr 1fr;border-radius:var(--ev-r-lg)}.sx-story .sx-story__media img{aspect-ratio:auto;height:100%}.sx-story .sx-story__body{padding:40px 36px;justify-content:center}.sx-story .sx-story__title{font-size:34px}}
@media (min-width:1024px){.sx-story{grid-template-columns:5fr 7fr}.sx-story .sx-story__body{padding:56px 64px;gap:18px}.sx-story .sx-story__title{font-size:42px}.sx-story .sx-story__lead{font-size:16px}.sx-story .sx-story__pillars{grid-template-columns:repeat(3,1fr);gap:18px}.sx-story .sx-story__pillars li{grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:6px;align-items:start}.sx-story .sx-story__icon{grid-row:auto}}

/* 6g. Shop the Look — the mock's reel posters as photo tiles (no video files yet, so no play buttons). */
.sx-looks .sx-looks__row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 0 12px;scroll-padding-inline:0}
.sx-looks .sx-looks__row::-webkit-scrollbar{display:none}
.sx-looks .sx-looks__tile{flex:0 0 58%;scroll-snap-align:start}
.sx-looks .sx-looks__tile a{position:relative;display:block;aspect-ratio:9/16;border-radius:var(--ev-r-md);overflow:hidden;background:var(--ev-ivory);color:#fff}
.sx-looks .sx-looks__tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sx-looks .sx-looks__tile a:hover img{transform:scale(1.05)}
.sx-looks .sx-looks__cap{position:absolute;left:0;right:0;bottom:0;padding:60px 14px 14px;background:linear-gradient(180deg,rgba(26,26,26,0),rgba(26,26,26,.8));display:flex;flex-direction:column;gap:2px}
.sx-looks .sx-looks__cap b{font-size:14px;line-height:1.25}
.sx-looks .sx-looks__cap small{font-size:11.5px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-looks .sx-looks__cap em{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:6px;font:700 12px/1.2 var(--ev-body);font-style:normal;border-bottom:1.5px solid #fff;padding-bottom:2px}
@media (min-width:640px){.sx-looks .sx-looks__tile{flex-basis:32%}}
@media (min-width:1024px){.sx-looks .sx-looks__row{overflow:visible;gap:20px;padding-bottom:0}.sx-looks .sx-looks__tile{flex:1 1 0}.sx-looks .sx-looks__tile a{border-radius:var(--ev-r-lg)}}
@media (max-width:767px){.sx-looks .sx-sec__head{flex-wrap:wrap;align-items:flex-start}}

/* 6h. Birthday Club band → the store's own /pages/everna-birthday-club. */
.sx-club .sx-club__in{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:24px 20px;border-radius:var(--ev-r-md);background:var(--ev-blush);color:var(--ev-ink)}
.sx-club .sx-club__icon{width:34px;height:34px;color:var(--ev-brand)}
.sx-club .sx-club__title{margin:0;font:500 24px/1.15 var(--ev-head);color:var(--ev-ink)}
.sx-club p{margin:4px 0 0;font-size:13.5px;color:var(--ev-text)}
@media (min-width:768px){.sx-club .sx-club__in{flex-direction:row;align-items:center;gap:22px;padding:28px 32px;border-radius:var(--ev-r-lg)}.sx-club .sx-club__in>div{flex:1}.sx-club .sx-club__title{font-size:28px}}

/* 7. Custom HTML footer (footer_settings.type=html). Was: 4_column_classic with a bare "+91" phone line. */
.sx-foot{background:var(--ev-ivory);border-top:1px solid var(--ev-line);color:var(--ev-text);font-size:13.5px}
.sx-foot .sx-foot__grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 18px;padding:36px 16px 28px}
.sx-foot .sx-foot__brand{grid-column:1/-1}
.sx-foot .sx-foot__brand img{height:56px;width:auto;margin-bottom:12px}
/* Same transparent left edge as the header logo: 0.475 × 56px. */
.sx-foot .sx-foot__brand img{margin-left:-27px}
.sx-foot .sx-foot__brand p{margin:0;font-size:13px;color:var(--ev-muted);max-width:40ch;line-height:1.6}
.sx-foot .sx-foot__social{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}
.sx-foot .sx-foot__social a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ev-ink)}
.sx-foot .sx-foot__social .sx-ic{width:18px;height:18px}
.sx-foot h4{margin:0 0 12px;font:700 11.5px/1.3 var(--ev-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ev-ink)}
.sx-foot ul li{margin-bottom:9px;line-height:1.4}
.sx-foot ul a:hover{color:var(--ev-cta)}
.sx-foot .sx-foot__contact li,.sx-foot .sx-foot__contact a{display:flex;align-items:center;gap:8px}
.sx-foot .sx-foot__contact .sx-ic{width:16px;height:16px;color:var(--ev-muted)}
.sx-foot .sx-foot__gst{font-size:11.5px;color:var(--ev-muted)}
.sx-foot .sx-foot__bottom{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:16px 16px 18px;border-top:1px solid var(--ev-line);font-size:12px;color:var(--ev-muted)}
.sx-foot .sx-foot__pay{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ev-ink)}
@media (min-width:768px){.sx-foot .sx-foot__grid{grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:24px;padding:48px 20px 28px}.sx-foot .sx-foot__brand{grid-column:auto}.sx-foot .sx-foot__bottom{flex-direction:row;justify-content:space-between;align-items:center;padding:16px 20px 18px}}
@media (max-width:767px){.sx-foot{padding-bottom:64px}}
/* Review 27 Oct: on phones the Contact column sat in one of two half-width columns, so "Bengaluru, Karnataka" wrapped. */
@media (max-width:767px){.sx-foot .sx-foot__grid>:last-child{grid-column:1/-1}}

/* 8. Product page (mock pdp.html): Playfair name, ink price, teal "% OFF" pill, 4px buttons —
   Add = ink outline, Buy Now = solid CTA red. Was: Noto 800 name, green "29%" square, red-outline Add. */
h1.product-component-name{font:500 34px/1.15 var(--ev-head)!important;color:var(--ev-ink)!important;letter-spacing:-.01em;text-transform:none!important}
@media (max-width:767px){h1.product-component-name{font-size:26px!important}}
.product-pricing-primary{font:700 24px/1.2 var(--ev-body)!important;color:var(--ev-ink)!important}
.product-pricing-secondary{color:var(--ev-muted)!important;font-size:16px!important}
p.product-pricing-discount{background:var(--ev-deal)!important;color:#fff!important;border-radius:999px!important;padding:3px 10px!important;font:700 12px/18px var(--ev-body)!important}
p.product-pricing-discount::after{content:" OFF"}
main .pr-outlined-button.sh-product-plus-minus-button{border:1.5px solid var(--ev-ink)!important;color:var(--ev-ink)!important;background:#fff!important;border-radius:var(--ev-r)!important}
main .pr-outlined-button.sh-product-plus-minus-button *{color:inherit!important;font-weight:700!important}
main .pr-outlined-button.sh-product-plus-minus-button:hover{background:var(--ev-ink)!important;color:#fff!important}
.sh-product-buy-now-button{background:var(--ev-cta)!important;border-color:var(--ev-cta)!important;color:#fff!important;border-radius:var(--ev-r)!important;font-weight:700!important}
.sh-product-buy-now-button:hover{background:var(--ev-cta-dark)!important}
.sh-variant-chip{border-radius:var(--ev-r)!important;font-family:var(--ev-body)!important}
/* In-cart stepper (PDP and cards): ink outline like the Add button it replaces. Was: red outline + red digits. */
.pr-plus-minus-button.sh-product-plus-minus-button{border:1.5px solid var(--ev-ink)!important;color:var(--ev-ink)!important;border-radius:var(--ev-r)!important;background:#fff!important}
.pr-plus-minus-button.sh-product-plus-minus-button button{color:var(--ev-ink)!important;font-weight:700!important}

/* Review 28 Oct — PDP size chips. Was: selected = 2px red border on a faint blue fill (theme), others grey 0-weight text. */
.sh-variant-chip{border:1px solid #CFC6BA!important;border-radius:var(--ev-r)!important;background:#fff!important;color:var(--ev-ink)!important;font:600 13px/1 var(--ev-body)!important;min-width:48px;box-shadow:none!important}
.sh-variant-chip:hover{border-color:var(--ev-ink)!important}
.sh-variant-chip.selected{background:var(--ev-ink)!important;border-color:var(--ev-ink)!important;color:#fff!important}
.sh-variant-chip:disabled{opacity:.45;text-decoration:line-through}
/* Desktop Add / Buy Now row had 12px side padding, so it started 12px right of the name and size chips. */
.product-footer-root.sh-pf-desk{padding-left:0!important;padding-right:0!important}

/* 9. Listing pages (category, collection, /products): title in the display face like the home section heads. Was: Noto 600 26px. */
h1.products-prod-head{font:500 34px/1.15 var(--ev-head)!important;color:var(--ev-ink)!important;letter-spacing:-.01em}
@media (max-width:767px){h1.products-prod-head{font-size:26px!important}}

/* 10. Page column on other templates (review 28 Oct, desktop UA). Home, header and footer use a 1280px column with
   20px gutters (93–1333 at 1440). Listing pages (.page-container: /products, /categories, /collections) were max 1600px,
   not centred, 32px gutters (32–1394 at 1440); the PDP wrapper was 1280 with 32px gutters (105–1321). */
body:not(:has(.mobile-app-bar)) main .page-container{max-width:1280px!important;margin-left:auto!important;margin-right:auto!important;padding-left:20px!important;padding-right:20px!important}
@media (min-width:768px){body:not(:has(.mobile-app-bar)) main .page-padding-y.max-w-\[1280px\]{padding-left:20px!important;padding-right:20px!important}}

/* 11. Product page — hide the announcement marquee (notice bar) on product pages only (req 30 Oct).
   The notice lives in the header (a sibling of <main>); only product pages mount
   <main class="product-page">, so :has() scopes the hide to PDPs. Home, collections and every
   other page keep the marquee. On phones the PDP already uses the back-button header with no
   notice, so this also suppresses any pre-hydration flash of the marquee there. */
body:has(main.product-page) #notice{display:none!important}

/* 12. Product page — trust strip (Genuine Products | Quality Checked), just below the buy buttons
   and above Product Details. The PDP template takes no custom HTML block, so the strip is drawn
   as one inline SVG (brand-red line icons, ink labels, centre divider) that stays identical at
   every width, echoing the home USP strip's language. Anchored on the Product Details section
   (the one .has-border-top block, present and in-flow on both mobile and desktop). */
main.product-page .product-info .pdp-section.has-border-top::before{
  content:"";display:block;width:100%;max-width:560px;margin:0 auto 20px;aspect-ratio:680/72;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'680'%20height%3D'72'%20viewBox%3D'0%200%20680%2072'%3E%3Cline%20x1%3D'340'%20y1%3D'18'%20x2%3D'340'%20y2%3D'54'%20stroke%3D'%23E8E2DA'%20stroke-width%3D'1.5'%2F%3E%3Cg%20transform%3D'translate(58%2C20)'%20fill%3D'none'%20stroke%3D'%23F30020'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M14%202%20L25%206%20V14%20C25%2021%2020%2026%2014%2028%20C8%2026%203%2021%203%2014%20V6%20Z'%2F%3E%3Cpath%20d%3D'M9%2014%20l3.5%203.5%20L20%2010'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(392%2C20)'%20fill%3D'none'%20stroke%3D'%23F30020'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'14'%20cy%3D'15'%20r%3D'12.5'%2F%3E%3Cpath%20d%3D'M8%2015%20l4%204%20L20.5%2010.5'%2F%3E%3C%2Fg%3E%3Ctext%20x%3D'96'%20y%3D'42'%20font-family%3D'Arial%2C%20Helvetica%2C%20sans-serif'%20font-size%3D'21'%20font-weight%3D'700'%20letter-spacing%3D'0.2'%20fill%3D'%231A1A1A'%3EGenuine%20Products%3C%2Ftext%3E%3Ctext%20x%3D'430'%20y%3D'42'%20font-family%3D'Arial%2C%20Helvetica%2C%20sans-serif'%20font-size%3D'21'%20font-weight%3D'700'%20letter-spacing%3D'0.2'%20fill%3D'%231A1A1A'%3EQuality%20Checked%3C%2Ftext%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
@media (min-width:768px){main.product-page .product-info .pdp-section.has-border-top::before{margin-bottom:24px}}

/* 13. Announcement bar — scrolling marquee restored (per merchant request, Nov 2026).
   The static/wrapped override from 30 Oct is removed so the seamless marquee from
   section 2 runs again: both .ev-mq__run copies shown, horizontal scroll, pause on hover. */

/* 14. Product page (mobile) — requested tweaks (Nov 2026):
   (a) hide the product name in the sticky top header so only the logo/back/icons show;
   (b) cap the image gallery height so the product name, sale price and MRP are visible
   as soon as the page opens, without scrolling.
   Scoped to product pages only (body:has(main.product-page) / main.product-page), so
   category and collection page titles are left unchanged. */
body:has(main.product-page) .category-mobile-header .zcmh-title-text{display:none!important}
main.product-page .mobile-swiper{height:62vh!important;max-height:540px!important}
main.product-page .mobile-swiper .swiper-slide{aspect-ratio:auto!important;height:100%!important}