/* Maryana's Wonderland — responsive layer v8. Works after style.css and wonderland-v7.css */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:118px;-webkit-text-size-adjust:100%}
body{min-width:280px;max-width:100%;overflow-x:clip}
body,img,svg,video,iframe{max-width:100%}
img,video{height:auto}
main{width:100%;min-width:0;overflow:clip}
button,input,select,textarea{max-width:100%;min-width:0}
:where(p,h1,h2,h3,h4,a,span,b,strong,small){overflow-wrap:break-word}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid #e65b86;outline-offset:3px}
:where(a,button){-webkit-tap-highlight-color:transparent}
:where(.mw-header,.mw-header *,.mw-hero,.mw-hero *,.mw-categories,.mw-products,.mw-about,.mw-gift,.mw-contact){min-width:0}
.mw-header{width:100%;max-width:none;min-height:78px;height:auto;position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:clamp(8px,1.5vw,22px);padding:10px clamp(16px,3vw,48px)}
.mw-brand{flex:0 1 auto;white-space:normal;min-width:0}
.mw-brand strong{font-size:clamp(16px,1.55vw,25px);line-height:1.12}
.mw-brand .heartmark{font-size:clamp(30px,3vw,46px)}
.mw-header nav{display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-width:0;gap:clamp(0px,.7vw,16px)}
.mw-header nav a{white-space:nowrap;font-size:clamp(10px,.95vw,13px);padding:9px 7px}
.mw-header .actions{flex:0 0 auto;display:flex;align-items:center;gap:clamp(2px,.4vw,8px)}
.mw-header .header-ico{font-size:clamp(22px,2vw,28px);min-width:35px;min-height:40px;display:inline-grid;place-items:center;position:relative}
.mw-hero{min-height:clamp(430px,43vw,620px);height:auto;width:100%;display:flex;align-items:center;justify-content:flex-start;position:relative;padding:clamp(40px,5.2vw,88px) clamp(24px,7vw,120px);isolation:isolate}
.mw-hero .hero-image{position:absolute;inset:0 0 0 38%;background-size:cover;background-position:center center;z-index:-2}
.mw-hero .hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#fff0e8 0%,rgba(255,242,234,.96) 30%,rgba(255,238,229,.7) 48%,rgba(255,238,229,0) 76%);z-index:-1}
.mw-hero .mw-hero-content{width:min(48%,600px);max-width:600px;position:relative;z-index:1}
.mw-hero .hero-script{font-size:clamp(23px,2.6vw,38px);line-height:1.25}
.mw-hero h1{font-size:clamp(35px,5.1vw,76px);line-height:1.07;letter-spacing:-.03em;margin:14px 0 20px;overflow-wrap:normal;word-break:normal}
.mw-hero h1 em{font-size:clamp(48px,6.1vw,94px);line-height:1.08;letter-spacing:0;overflow-wrap:normal;word-break:normal}
.mw-hero .hero-tagline{font-size:clamp(15px,1.55vw,21px);line-height:1.5}
.mw-hero .hero-values{display:flex;flex-wrap:wrap;max-width:100%;width:fit-content}
.mw-hero .hero-values span{flex:0 1 auto}
.mw-hero .hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.mw-hero .primary{margin:0}
.mw-hero .hero-heart-note{right:3%;top:7%;font-size:clamp(18px,2vw,26px)}
.benefits{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1390px;padding:0 20px}
.benefits>div{min-width:0}
.mw-categories,.mw-products,.mw-about,.reviews,.mw-gift,.mw-contact{width:calc(100% - 40px);max-width:1390px;margin-left:auto;margin-right:auto}
.mw-category-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.2vw,18px)}
.mw-category-grid a{min-width:0}
.mw-category-grid img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;object-position:center;display:block}
.mw-products .grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.mw-products .card{min-width:0;display:flex;flex-direction:column;overflow:hidden}
.mw-products .card>img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
.mw-products .card-content{flex:1;display:flex;flex-direction:column;min-width:0}
.mw-products .card-content .card-bottom{margin-top:auto}
.mw-products .card h3{overflow-wrap:anywhere}
.mw-filters{display:flex;align-items:stretch;flex-wrap:wrap;gap:12px}
.mw-filters input{flex:1 1 240px;min-width:0;width:auto}
.mw-filters select{flex:0 1 220px;min-width:0}
.mw-about{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(190px,.75fr);gap:clamp(12px,2vw,25px)}
.mw-about .about-picture img{width:100%;height:auto;aspect-ratio:4/5;max-height:390px;object-fit:cover}
.mw-gift{display:flex;align-items:center;gap:22px}
.mw-gift img{width:190px;max-width:30%;aspect-ratio:4/3;height:auto;object-fit:cover}
.mw-gift .primary{margin:0;flex-shrink:0}
.mw-contact .contact-details,.mw-contact .social-links{gap:10px;overflow-wrap:anywhere}
footer{width:100%;max-width:1390px;padding:26px 22px}
#modal{width:min(94vw,670px);max-width:670px;max-height:min(88vh,850px);overflow:auto;padding:clamp(15px,2.5vw,32px)}
#modal .form input,#modal .form textarea,#modal .form select{width:100%}
#modal .cart-row,#modal .order-row,#modal .admin-row{min-width:0;flex-wrap:wrap}
#modal .cart-row img{width:64px;height:64px;object-fit:cover}
#toast{max-width:min(90vw,430px);right:16px;bottom:16px}
@media(max-width:1150px){
 .mw-header{flex-wrap:wrap;gap:8px 12px}
 .mw-header .mw-brand{margin-right:auto}
 .mw-header nav{order:3;flex:1 0 100%;width:100%;justify-content:center;overflow-x:auto;scrollbar-width:thin;gap:10px}
 .mw-header nav a{font-size:12px}
 .mw-header .actions{margin-left:auto}
 .mw-hero .mw-hero-content{width:min(56%,530px)}
 .mw-products .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .mw-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .benefits{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:-18px}
 .mw-about{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .mw-about .about-numbers{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
 .mw-gift{flex-wrap:wrap}
}
@media(max-width:700px){
 html{scroll-padding-top:120px}
 .mw-header{padding:9px 14px;gap:8px}
 .mw-brand strong{font-size:clamp(15px,4vw,21px)}
 .mw-brand small{font-size:8px;letter-spacing:.6px}
 .mw-brand .heartmark{font-size:31px}
 .mw-header .header-ico{min-width:36px;min-height:36px;font-size:23px;padding:5px}
 .mw-header nav{justify-content:flex-start;padding-bottom:5px;overscroll-behavior-x:contain;gap:2px}
 .mw-header nav a{padding:8px 11px;flex:0 0 auto;white-space:nowrap}
 .mw-hero{padding:30px 18px 0;min-height:650px;display:block;overflow:hidden}
 .mw-hero .mw-hero-content{width:100%;max-width:550px;text-align:center;margin:0 auto;position:relative;z-index:1}
 .mw-hero .hero-script{font-size:clamp(21px,6vw,31px)}
 .mw-hero h1{font-size:clamp(34px,9vw,61px);line-height:1.06;letter-spacing:-.035em;margin:10px auto}
 .mw-hero h1 em{font-size:clamp(47px,12vw,80px);line-height:1.05}
 .mw-hero .hero-tagline{font-size:clamp(14px,3.9vw,18px);margin:0 auto 15px}
 .mw-hero .hero-values{justify-content:center;margin:0 auto 14px;padding:8px;gap:7px}
 .mw-hero .hero-values span{font-size:21px;gap:4px}
 .mw-hero .hero-values small{font-size:9px}
 .mw-hero .hero-cta{justify-content:center;gap:10px}
 .mw-hero .primary{padding:12px 18px;font-size:12px}
 .mw-hero .watch-link{font-size:12px}
 .mw-hero .hero-image{inset:47% 0 0;background-position:center 34%;background-size:cover}
 .mw-hero .hero-shade{background:linear-gradient(180deg,#fff0e8 0%,#fff0e8 38%,rgba(255,240,232,.8) 51%,transparent 70%)}
 .mw-hero .hero-heart-note{display:none}
 .benefits{margin:16px auto;padding:0 12px;gap:9px}
 .benefits>div{padding:11px;gap:8px}
 .benefits i{width:38px;height:38px;font-size:24px}
 .benefits b{font-size:11px}
 .benefits small{font-size:10px}
 .mw-categories,.mw-products,.mw-about,.reviews,.mw-gift,.mw-contact{width:calc(100% - 26px);padding-left:0;padding-right:0}
 .mw-section-title{align-items:flex-start;gap:8px;flex-wrap:wrap}
 .mw-section-title h2{font-size:clamp(25px,6.8vw,34px)}
 .mw-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .mw-category-grid img{aspect-ratio:1/1;height:auto}
 .mw-products .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .mw-products .card>img{height:auto;aspect-ratio:4/5}
 .mw-products .card-content{padding:10px}
 .mw-products .card h3{font-size:clamp(12px,3.6vw,16px);min-height:0}
 .mw-products .card-bottom{gap:6px}
 .mw-products .card-bottom strong{font-size:15px}
 .mw-products .mini-btn{min-height:39px;padding:8px 11px}
 .mw-filters input,.mw-filters select{flex:1 1 100%;width:100%}
 .mw-about{display:grid;grid-template-columns:1fr;gap:18px;padding:18px}
 .mw-about .about-picture img{max-height:390px;aspect-ratio:4/3;transform:none}
 .mw-about .about-numbers{grid-column:auto;grid-template-columns:repeat(2,minmax(0,1fr));padding:10px}
 .mw-about .about-numbers>div{grid-template-columns:35px 1fr}
 .mw-about .about-numbers b{font-size:16px}
 .mw-gift{padding:15px;flex-direction:column;text-align:center;gap:10px}
 .mw-gift img{width:100%;max-width:100%;height:auto;max-height:190px}
 .mw-gift h2{font-size:clamp(24px,6vw,33px)}
 .mw-contact{padding:20px 16px}
 .mw-contact h2{font-size:clamp(25px,7vw,36px)}
 .mw-contact .contact-details,.mw-contact .social-links{display:flex;flex-direction:column;align-items:flex-start}
 footer{padding:22px 14px;gap:12px}
 #modal{width:calc(100vw - 20px);max-height:calc(100dvh - 30px);padding:18px;border-radius:16px}
}
@media(max-width:380px){
 .mw-header .mw-brand{flex:1 1 100%}
 .mw-header .actions{margin-left:0;margin-right:auto}
 .mw-hero{min-height:625px;padding:24px 12px 0}
 .mw-hero h1{font-size:clamp(30px,8.7vw,36px)}
 .mw-hero h1 em{font-size:clamp(45px,12vw,52px)}
 .mw-hero .hero-values{gap:5px}
 .mw-hero .hero-values span{font-size:18px}
 .mw-hero .hero-values small{font-size:8px}
 .mw-products .card-bottom{flex-direction:column;align-items:stretch}
 .mw-products .card-bottom button{width:100%}
 .benefits{grid-template-columns:1fr 1fr}
 .benefits>div{align-items:flex-start;flex-direction:column}
 .mw-about .about-numbers{grid-template-columns:1fr 1fr}
}
@media(min-width:1600px){.mw-hero{padding-left:max(7vw,calc((100vw - 1440px)/2));padding-right:max(7vw,calc((100vw - 1440px)/2))}.mw-hero .mw-hero-content{max-width:700px}.mw-hero h1{font-size:clamp(68px,4.2vw,94px)}.mw-hero h1 em{font-size:clamp(90px,5.2vw,116px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}