/* Local interaction layer; the captured theme styles are loaded before this file. */
/* Footer background: the captured footer is flat scheme-2 black; the
   beneficiary's footerbg.png (dark, white text stays readable) replaces it.
   The layout divs inside carry bg-background/bg-background-secondary Tailwind
   utilities — unlayered rules here beat the @layer utilities, so they go
   transparent and the image shows through. */
footer[data-local-footer]{background-color:#000;background-image:url(/assets/bgimage/footerbg.png);background-size:cover;background-position:center}
footer[data-local-footer] .bg-background,footer[data-local-footer] .bg-background-secondary{background-color:transparent}
/* RU support: the brand font "Brown" (latin-only) has no fallback stack in the
   captured theme, so Cyrillic glyphs fall back per-glyph to system fonts.
   Unlayered rule beats the @layer theme variables in aroma-main.css. */
:root{--font-family-primary:"Brown","Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif}
html{scroll-behavior:smooth}main-app-provider{display:block}main-header{display:block;position:sticky;top:-20px;z-index:40;background:white}main-top-bar{display:block}
svg-icon{width:var(--icon-size,20px);height:var(--icon-size,20px);vertical-align:middle}svg-icon svg{width:100%;height:100%}
deferred-media{display:block}deferred-media video{width:100%;height:100%;object-fit:cover}
.header-mega-menu:hover>[menu],.header-mega-menu:focus-within>[menu],.header-mega-menu.local-open>[menu]{visibility:visible;opacity:1;z-index:50}
/* SPA navigation keeps the Header mounted, so after a click inside the panel
   :hover/:focus-within would keep the big panel open over the new page.
   CatalogMegaMenu adds .local-closed on click; later in this file it beats
   the equal-specificity rule above, and it is cleared on mouseleave. */
.header-mega-menu.local-closed>[menu]{visibility:hidden;opacity:0}
/* The captured mega-menu backdrop overlay is an absolute min-h-screen div that
   keeps its layout box while the panel is only visibility:hidden — it stretches
   the document by a full viewport and leaves white space under the footer.
   Show it only while the panel is actually open (same conditions as the
   visibility rule above). */
.header-mega-menu>[menu]>.pointer-events-none.top-full.min-h-screen{display:none}
.header-mega-menu:hover>[menu]>.pointer-events-none.top-full.min-h-screen,
.header-mega-menu:focus-within>[menu]>.pointer-events-none.top-full.min-h-screen,
.header-mega-menu.local-open>[menu]>.pointer-events-none.top-full.min-h-screen{display:block}
/* The captured Tailwind build lacks the arbitrary placement classes the
   Catalog panel relies on ([grid-area:menu] / [grid-template-areas:'menu']);
   without them the panel rows collapse to auto-rows-[0] and overflow-hidden
   clips the content. Restore the theme's own placement, scoped to the panel. */
#MegaMenu-Content-catalog>ul{grid-template-areas:"menu"}
#MegaMenu-Content-catalog>ul>li{grid-area:menu}
core-carousel{display:block;position:relative}[data-carousel-slides]{scroll-behavior:smooth;scrollbar-width:none}[data-carousel-slides]::-webkit-scrollbar{display:none}
/* Default carousel slide sizing. The theme computes --core-carousel-slide-width
   in JS, and captured sections ship their own <style> block with the var; the
   admin-created featured sections have neither, so `.core-carousel-slide` falls
   back to shrink-to-fit and cards end up with different widths depending on
   their title/text. Same values as the captured PDP style block (100/items %,
   100/items vw on mobile; per-section class styles keep priority for the
   sections that still carry one). */
core-carousel{--core-carousel-gap:8px;--core-carousel-slide-gap-per-slide:6.222222222222222px}
core-carousel[data-items-to-show="1"]{--core-carousel-slide-width:100%}
core-carousel[data-items-to-show="1.5"]{--core-carousel-slide-width:66.66666666666667%}
core-carousel[data-items-to-show="2"]{--core-carousel-slide-width:50%}
core-carousel[data-items-to-show="2.5"]{--core-carousel-slide-width:40%}
core-carousel[data-items-to-show="3"]{--core-carousel-slide-width:33.33333333333333%}
core-carousel[data-items-to-show="3.5"]{--core-carousel-slide-width:28.57142857142857%}
core-carousel[data-items-to-show="4"]{--core-carousel-slide-width:25%}
core-carousel[data-items-to-show="4.5"]{--core-carousel-slide-width:22.22222222222222%}
core-carousel[data-items-to-show="5"]{--core-carousel-slide-width:20%}
core-carousel[data-items-to-show="6"]{--core-carousel-slide-width:16.66666666666667%}
/* The brands section renders carousel-with-control WITHOUT an inner
   core-carousel element, so the fallbacks above never match there: slides
   stay content-sized (600px images → 858px-tall section, hidden scrollbar,
   no buttons, unusable). Mirror the same widths for carousel-with-control
   (CSS vars inherit down to .core-carousel-slide). */
carousel-with-control{--core-carousel-gap:8px;--core-carousel-slide-gap-per-slide:6.222222222222222px}
carousel-with-control[data-items-to-show="1"]{--core-carousel-slide-width:100%}
carousel-with-control[data-items-to-show="1.5"]{--core-carousel-slide-width:66.66666666666667%}
carousel-with-control[data-items-to-show="2"]{--core-carousel-slide-width:50%}
carousel-with-control[data-items-to-show="2.5"]{--core-carousel-slide-width:40%}
carousel-with-control[data-items-to-show="3"]{--core-carousel-slide-width:33.33333333333333%}
carousel-with-control[data-items-to-show="3.5"]{--core-carousel-slide-width:28.57142857142857%}
carousel-with-control[data-items-to-show="4"]{--core-carousel-slide-width:25%}
carousel-with-control[data-items-to-show="4.5"]{--core-carousel-slide-width:22.22222222222222%}
carousel-with-control[data-items-to-show="5"]{--core-carousel-slide-width:20%}
carousel-with-control[data-items-to-show="6"]{--core-carousel-slide-width:16.66666666666667%}
/* Brand images: the captured .aspect-fill{height:100%} chain resolves to the
   image's natural size (square unsplash 600×600 here) — square the box to the
   slide instead so the section shrinks to the card grid. */
[data-brands-carousel] .core-carousel-slide .aspect-fill{aspect-ratio:1;height:auto}
/* later in the file + same specificity => mobile values win below 768px */
@media(max-width:767px){
  core-carousel[data-items-to-show-mobile="1"]{--core-carousel-slide-width:100vw}
  core-carousel[data-items-to-show-mobile="1.5"]{--core-carousel-slide-width:66.66666666666667vw}
  core-carousel[data-items-to-show-mobile="2"]{--core-carousel-slide-width:50vw}
  core-carousel[data-items-to-show-mobile="2.5"]{--core-carousel-slide-width:40vw}
  core-carousel[data-items-to-show-mobile="3"]{--core-carousel-slide-width:33.33333333333333vw}
  carousel-with-control[data-items-to-show-mobile="1"]{--core-carousel-slide-width:100vw}
  carousel-with-control[data-items-to-show-mobile="1.25"]{--core-carousel-slide-width:80vw}
  carousel-with-control[data-items-to-show-mobile="1.5"]{--core-carousel-slide-width:66.66666666666667vw}
  carousel-with-control[data-items-to-show-mobile="2"]{--core-carousel-slide-width:50vw}
  carousel-with-control[data-items-to-show-mobile="2.5"]{--core-carousel-slide-width:40vw}
  carousel-with-control[data-items-to-show-mobile="3"]{--core-carousel-slide-width:33.33333333333333vw}
}
/* Collection hero banner — fixed ratio so every collection page opens with the
   same hero height. The seeded banners are portrait (900x1200) and used to
   render at natural height (~1900px) via object-contain; the crop is centered
   so the product stays visible. */
.local-collection-hero{aspect-ratio:29/8}
@media(max-width:767px){.local-collection-hero{aspect-ratio:3/2}}
custom-accordion.local-open>[data-accordion-content]{visibility:visible;grid-template-rows:1fr}
custom-accordion.local-open [data-accordion-toggle] svg-icon[src="icon-plus"]{display:none}
custom-accordion.local-open [data-accordion-toggle] svg-icon[src="icon-minus"]{display:inline-flex}
.local-modal{border:0;padding:0;margin:auto;max-width:min(94vw,1000px);width:900px;max-height:90vh;color:#2d2929;background:white;overflow:auto;font-family:Brown,"Segoe UI",Roboto,Arial,sans-serif}
.local-modal::backdrop{background:rgba(0,0,0,.48)}.local-modal.local-drawer{height:100dvh;max-height:100dvh;width:min(480px,100vw);max-width:100vw;margin:0 0 0 auto}
.local-modal.local-left{margin:0 auto 0 0}.local-modal-head{display:flex;justify-content:space-between;align-items:center;padding:25px 28px;border-bottom:1px solid #ddd;position:sticky;top:0;background:#fff;z-index:3}.local-modal-head h2{font-size:22px;font-weight:700;margin:0}.local-close{font-size:29px;line-height:1;border:0;background:none;cursor:pointer;padding:6px}.local-modal-content{padding:28px}.local-modal p{margin:0 0 18px;line-height:1.5}.local-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;background:#000;color:#fff;border:1px solid #000;padding:12px 23px;text-align:center;font-size:13px;font-weight:700;cursor:pointer;text-transform:uppercase;text-decoration:none}.local-button:hover{background:#333;color:white}.local-button.secondary{background:white;color:black}.local-button:disabled{opacity:.5;cursor:default}.local-field{width:100%;height:50px;border:1px solid #aaa;padding:12px;background:white;color:#222;font:inherit}.local-search-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:25px}.local-result{display:block;font-size:14px}.local-result img{width:100%;aspect-ratio:4/5;object-fit:cover;margin-bottom:10px}.local-result p{margin:6px 0}.local-result-title{display:block;margin-top:6px;line-height:1.4}.local-result-shade{display:block;color:#757575;margin-top:2px;line-height:1.4}.local-result-price{display:block;margin-top:4px;font-weight:600}.local-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.local-quick-grid>img{width:100%;aspect-ratio:4/5;object-fit:cover}.local-quick-grid h3{font-size:25px;line-height:1.15;margin:10px 0 18px}.local-quick-grid .local-button{width:100%;margin:10px 0}.local-cart-row{display:grid;grid-template-columns:90px 1fr;gap:15px;padding:18px 0;border-bottom:1px solid #ddd}.local-cart-row img{width:90px;aspect-ratio:4/5;object-fit:cover}.local-cart-row h3{font-size:15px;line-height:1.3;margin:0 0 6px}.local-cart-row p{font-size:13px;margin:6px 0}.local-quantity{display:inline-flex;border:1px solid #bbb;margin-right:12px}.local-quantity button{background:white;border:0;padding:4px 12px;cursor:pointer;font-size:20px}.local-quantity span{display:inline-block;min-width:25px;text-align:center;padding:6px}.local-remove{background:none;border:0;text-decoration:underline;cursor:pointer;font-size:12px}.local-total{display:flex;justify-content:space-between;margin:24px 0;font-size:18px;font-weight:bold}.local-note{font-size:13px!important;color:#666}.local-cookie{position:fixed;bottom:0;left:0;right:0;z-index:80;background:#202020;color:white;display:flex;align-items:center;gap:24px;padding:24px 3.2%;font-size:12px;line-height:1.4}.local-cookie p{max-width:58%;margin:0 auto 0 0}.local-cookie button{border:0;min-height:40px;min-width:122px;background:#e7c4b8;color:#222;padding:10px 14px;font-size:12px;cursor:pointer}.local-cookie .settings{background:#fff}.local-cookie a{text-decoration:underline}.local-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:15px 25px;background:#222;color:#fff;font-size:14px;z-index:100;max-width:90vw}.local-menu-links{display:flex;flex-direction:column}.local-menu-links>.local-menu-top{border-bottom:1px solid #ddd}.local-menu-links .local-menu-top>a{display:block;padding:16px 0;font-size:17px;text-decoration:none}.local-menu-sublinks{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;padding:2px 0 14px}.local-menu-sublinks a{display:block;padding:5px 0;font-size:14px;text-decoration:none;color:#5a5454}.local-wish{border:0;background:transparent;font-size:24px;cursor:pointer}.local-result .local-wish{position:absolute;top:10px;right:10px;z-index:2}.local-wish[aria-pressed=true]{color:#b41152}.local-cart-count{font-size:11px;margin-left:2px}.local-filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}.local-filters select{border:1px solid #999;background:white;padding:10px;font:inherit}.local-cookie[hidden]{display:none}.local-dialog-actions{display:flex;gap:10px;flex-wrap:wrap}.local-modal input:focus-visible,.local-modal button:focus-visible,.local-modal a:focus-visible{outline:2px solid #4b3dc4;outline-offset:3px}
@media(max-width:767px){.local-modal-content{padding:20px}.local-modal-head{padding:20px}.local-quick-grid{grid-template-columns:1fr}.local-quick-grid>img{max-height:320px;object-fit:contain}.local-search-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.local-cookie{padding:18px;gap:10px;flex-wrap:wrap}.local-cookie p{max-width:100%;width:100%}.local-cookie button{flex:1;min-width:90px}.local-quick-grid h3{font-size:22px}}
@media(prefers-reduced-motion:reduce){html,[data-carousel-slides]{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
mega-menu>ul{min-height:30px}
swiper-product-gallery swiper-slide{display:none}swiper-product-gallery swiper-slide.local-selected{display:block}swiper-thumbnails swiper-container{overflow-y:auto;scrollbar-width:none}swiper-thumbnails swiper-slide{cursor:pointer}swiper-thumbnails swiper-slide.local-selected{outline:1px solid #222;outline-offset:-1px}
.local-stars{letter-spacing:1px;font-size:17px;line-height:1}.local-filter-panel label{display:block;margin:18px 0 7px}.local-filter-panel select{width:100%;padding:12px;border:1px solid #aaa}.local-collection-grid [hidden]{display:none!important}
@media(max-width:767px){main-product [aria-label="Gallery Viewer"]>div{height:105vw;min-height:0}swiper-product-gallery swiper-slide.local-selected{width:100%;height:100%}swiper-product-gallery{min-width:0}}

.local-stars{background:linear-gradient(90deg,#2d2929 var(--stars,100%),#c7c7c7 var(--stars,100%));background-clip:text;-webkit-background-clip:text;color:transparent;width:max-content}

/* PDP price — the captured sale block glues the strikethrough original right against the discounted price (gap 0); space them like the group's own 10px gap */
main-product [data-sub-price-group] [data-sub-compare]{margin-left:10px}