/* Storefront 2026 — navigasi biru-putih, maskot, dan interaksi modern. */
:root{
  --brand-blue:#1268e8;
  --brand-blue-dark:#0b3f9e;
  --brand-blue-soft:#eaf3ff;
  --brand-sky:#58b8ff;
  --brand-shadow:0 18px 45px rgba(17,88,190,.14);
}

body{background:#fff;color:#12213c}
.store-header{height:auto;background:rgba(255,255,255,.94);border-bottom:1px solid #dce9fb;box-shadow:0 8px 30px rgba(18,75,150,.07);backdrop-filter:blur(18px) saturate(150%)}
.storefront-header-r2 .nav{min-height:92px;gap:22px}
.storefront-header-r2 .kv-brand-image>img{width:270px;height:74px}
.storefront-header-r2 .nav nav{gap:5px;padding:6px;border:1px solid #dce9fb;border-radius:16px;background:#f5f9ff;box-shadow:inset 0 1px 0 #fff}
.store-header .store-nav-icons>a,.store-menu-trigger>a{position:relative;min-height:48px;padding:7px 12px;border-radius:11px;color:#4d6382;font-size:12px;font-weight:700;transition:color .2s,background .2s,transform .2s,box-shadow .2s}
.store-header .store-nav-icons>a:hover,.store-menu-trigger>a:hover{color:var(--brand-blue);background:#fff;box-shadow:0 6px 18px rgba(18,79,160,.1);transform:translateY(-1px)}
.store-header .store-nav-icons>a[aria-current=page],.store-menu-trigger>a[aria-current=page],.store-menu-trigger>a.parent-current{color:#fff;background:linear-gradient(135deg,var(--brand-blue),#2d8bff);box-shadow:0 8px 20px rgba(18,104,232,.24)}
.store-header .store-nav-icons>a[aria-current=page] .menu-icon,.store-menu-trigger>a[aria-current=page] .menu-icon,.store-menu-trigger>a.parent-current .menu-icon{background:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.menu-icon{background:transparent!important;color:currentColor!important}
.nav-account{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-account .btn-login{padding:11px 8px;color:var(--brand-blue);font-weight:800;font-size:12px}
.nav-account .login{border:0;border-radius:11px;padding:12px 17px;background:var(--brand-blue);color:#fff;box-shadow:0 8px 20px rgba(18,104,232,.2)}
.nav-account .login:hover{background:var(--brand-blue-dark);transform:translateY(-1px)}
.nav-toggle{display:none;position:relative;width:46px;height:42px;border:1px solid #d7e5f8;border-radius:11px;background:#f4f8ff;color:var(--brand-blue);cursor:pointer}
.nav-toggle span{position:absolute;left:12px;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s,top .2s}
.nav-toggle span:nth-child(1){top:12px}.nav-toggle span:nth-child(2){top:19px}.nav-toggle span:nth-child(3){top:26px}.nav-toggle b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.hero{background:radial-gradient(circle at 76% 25%,rgba(77,168,255,.22),transparent 29%),radial-gradient(circle at 13% 78%,rgba(18,104,232,.12),transparent 32%),linear-gradient(145deg,#f9fcff 0%,#edf6ff 48%,#fff 100%)}
.hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#2887ed 1px,transparent 1px);background-size:28px 28px;opacity:.09;mask-image:linear-gradient(to bottom,#000,transparent 80%)}
.hero-label{color:var(--brand-blue-dark);border-color:#cfe3ff;background:rgba(255,255,255,.78);box-shadow:0 8px 24px rgba(18,104,232,.08)}
.hero-label i{background:var(--brand-blue);box-shadow:0 0 0 5px rgba(18,104,232,.12)}
.hero h1{color:#102343;text-wrap:balance}
.search{border-color:#cfdef3;box-shadow:0 16px 40px rgba(18,87,180,.13)}
.search button,.button,.card-order{background:linear-gradient(135deg,var(--brand-blue),#328fff);box-shadow:0 8px 20px rgba(18,104,232,.18)}
.benefits{position:relative;margin-top:-1px;background:#fff}
.eyebrow{color:var(--brand-blue)}
.category-card:hover{background:#f3f8ff;border-color:#bcd8ff;box-shadow:0 12px 28px rgba(18,89,180,.09)}
.category-icon{background:var(--brand-blue-soft);color:var(--brand-blue)}

/* Preview produk dibuat dominan seperti galeri marketplace pada referensi. */
.catalog-section>.container{width:min(1160px,calc(100% - 64px))}
.catalog-section .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.catalog-section .product-card{display:flex;min-width:0;flex-direction:column;border-radius:17px}
.catalog-section .card-image{height:245px;flex:0 0 245px;background:#e9eef7}
.catalog-section .card-image>img{object-fit:cover;object-position:center;transition:transform .45s cubic-bezier(.2,.7,.25,1),filter .3s}
.catalog-section .card-image:after{content:"Lihat tampilan ↗";position:absolute;left:50%;top:50%;z-index:4;padding:11px 15px;border:1px solid rgba(255,255,255,.48);border-radius:11px;background:rgba(10,38,83,.78);color:#fff;font-size:11px;font-weight:800;box-shadow:0 12px 28px rgba(4,28,68,.2);backdrop-filter:blur(8px);opacity:0;transform:translate(-50%,-35%);transition:opacity .25s,transform .25s;white-space:nowrap}
.catalog-section .product-card:hover .card-image>img{transform:scale(1.045);filter:saturate(1.06)}
.catalog-section .product-card:hover .card-image:after{opacity:1;transform:translate(-50%,-50%)}
.catalog-section .card-body{display:flex;flex:1;flex-direction:column;padding:22px}
.catalog-section .card-body h3{font-size:17px;line-height:1.45}
.catalog-section .card-body p{min-height:44px}
.catalog-section .card-price{margin-top:auto}
.catalog-section .placeholder{min-height:245px}

@media(max-width:1200px){
  .catalog-section .card-image{height:230px;flex-basis:230px}
  .catalog-section .placeholder{min-height:230px}
}

@media(max-width:1000px){
  .catalog-section>.container{width:calc(100% - 64px)}
  .catalog-section .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .catalog-section .card-image{height:220px;flex-basis:220px}
  .catalog-section .placeholder{min-height:220px}
}

@media(max-width:720px){
  .catalog-section>.container{width:calc(100% - 32px)}
}

@media(max-width:620px){
  .catalog-section>.container{width:calc(100% - 32px)}
  .catalog-section .product-grid{grid-template-columns:1fr;gap:18px}
  .catalog-section .card-image{height:230px;flex-basis:230px}
  .catalog-section .placeholder{min-height:230px}
  .catalog-section .card-body{padding:18px}
  .catalog-section .card-body h3{font-size:16px}
}

/* Promo utama bergaya voucher dengan warna yang dapat diatur admin. */
.voucher-section{position:relative;margin-top:0;padding:72px 0 78px;overflow:hidden;background:radial-gradient(circle at 90% 12%,color-mix(in srgb,var(--voucher-color),transparent 82%),transparent 27%),linear-gradient(145deg,#f8fbff,#edf5ff);border-block:1px solid #dce9f8}
.voucher-section:before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--voucher-color),transparent 70%) 1px,transparent 1px);background-size:25px 25px;opacity:.18;mask-image:linear-gradient(90deg,#000,transparent 72%)}
.voucher-section>.container{position:relative;z-index:1}
.voucher-section-head{position:relative;min-height:126px;margin-bottom:28px;padding-right:230px}
.voucher-section-head h2{max-width:650px;font-size:clamp(27px,3vw,38px);color:#102343;text-wrap:balance}
.voucher-section-head p{margin:8px 0 0;font-size:13px}
.voucher-section.no-promo-mascot .voucher-section-head{min-height:0;padding-right:0}
.promo-mascot{position:absolute;right:12px;bottom:-28px;width:205px;height:180px}
.promo-mascot img{position:absolute;right:15px;bottom:0;width:118px;height:178px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 18px 20px rgba(19,66,129,.18));animation:mascotHover 5s ease-in-out infinite}
.promo-mascot>span{position:absolute;z-index:2;left:-4px;top:25px;padding:10px 13px;border-radius:14px 14px 4px 14px;background:#fff;color:var(--voucher-color);font-size:10px;font-weight:800;box-shadow:0 10px 26px rgba(17,67,132,.13)}
.voucher-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.voucher-card{display:grid;grid-template-columns:minmax(0,1fr) 116px;min-height:218px;padding:0;border:1px solid color-mix(in srgb,var(--voucher-color),#fff 70%);border-radius:20px;background:#fff;box-shadow:0 15px 36px rgba(18,70,140,.09);overflow:hidden;isolation:isolate}
.voucher-card:hover{border-color:color-mix(in srgb,var(--voucher-color),#fff 45%);box-shadow:0 22px 45px rgba(18,70,140,.16)}
.voucher-main{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:25px 24px;background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--voucher-color),#fff 93%))}
.voucher-main:after{content:"";position:absolute;width:90px;height:90px;right:-30px;top:-40px;border:18px solid color-mix(in srgb,var(--voucher-color),transparent 91%);border-radius:50%}
.voucher-card .promo-badge{position:relative;z-index:1;margin:0;background:var(--voucher-color);box-shadow:0 7px 16px color-mix(in srgb,var(--voucher-color),transparent 72%)}
.voucher-card .promo-title{position:relative;z-index:1;font-size:20px;line-height:1.35}
.voucher-card .promo-desc{position:relative;z-index:1;line-height:1.6}
.voucher-card .promo-product{position:relative;z-index:1;width:100%;margin-top:auto;border-color:color-mix(in srgb,var(--voucher-color),#fff 82%);background:rgba(255,255,255,.78)}
.voucher-card .promo-product i{color:var(--voucher-color)}
.voucher-stub{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:18px 11px;text-align:center;color:#fff;background:linear-gradient(155deg,color-mix(in srgb,var(--voucher-color),#102d59 16%),var(--voucher-color));border-left:2px dashed rgba(255,255,255,.5)}
.voucher-stub:before,.voucher-stub:after{content:"";position:absolute;left:-12px;width:22px;height:22px;border-radius:50%;background:#eff6ff;z-index:2}
.voucher-stub:before{top:-12px}.voucher-stub:after{bottom:-12px}
.voucher-stub small{font-size:8px;font-weight:800;letter-spacing:.18em;opacity:.74}
.voucher-stub b{max-width:95px;font:800 13px/1.35 'Plus Jakarta Sans',sans-serif;overflow-wrap:anywhere}
.voucher-stub>span{font-size:9px;line-height:1.35;opacity:.86}
.voucher-stub i{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#fff;color:var(--voucher-color);font-style:normal;font-size:15px;box-shadow:0 7px 16px rgba(5,38,89,.17)}

/* Ulasan pembelian terverifikasi yang sudah lolos moderasi admin. */
.customer-reviews{padding:70px 0 76px;background:#fff}
.customer-reviews .section-head h2{font-size:clamp(27px,3vw,38px);color:#102343}
.review-showcase{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.review-showcase article{position:relative;display:flex;min-width:0;flex-direction:column;padding:24px;border:1px solid #dfe9f6;border-radius:18px;background:linear-gradient(145deg,#fff,#f7fbff);box-shadow:0 10px 30px rgba(18,71,142,.06);transition:transform .22s,border-color .22s,box-shadow .22s}
.review-showcase article:before{content:"“";position:absolute;right:19px;top:7px;color:#dbeaff;font:800 58px/1 Georgia,serif}
.review-showcase article:hover{transform:translateY(-5px);border-color:#b8d5f7;box-shadow:0 18px 40px rgba(18,71,142,.11)}
.review-card-head{position:relative;z-index:1;display:flex;align-items:center;gap:11px}
.review-avatar{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--brand-blue),#4ea7ff);color:#fff;font:800 15px 'Plus Jakarta Sans',sans-serif;box-shadow:0 8px 18px rgba(18,104,232,.19)}
.review-card-head b{display:block;font-size:12px}.review-card-head small{display:block;margin-top:3px;color:#72809a;font-size:9px}
.review-stars{margin-left:auto;color:#ffb21c;font-size:16px;letter-spacing:1px;white-space:nowrap}
.review-showcase blockquote{margin:20px 0 22px;color:#42516b;font-size:13px;line-height:1.8;overflow-wrap:anywhere}
.review-showcase article>a{margin-top:auto;color:var(--brand-blue);font-size:11px;font-weight:800}

/* Cara membeli: maskot menjadi penunjuk visual, langkah tetap mudah dipindai. */
.how-section{position:relative;overflow:hidden;background:linear-gradient(145deg,#f7fbff,#edf6ff);border-top:1px solid #dbeaff}
.how-section:after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;right:-160px;bottom:-210px;background:#a9d6ff;filter:blur(3px);opacity:.35}
.how{position:relative;z-index:1;grid-template-columns:minmax(280px,.82fr) minmax(420px,1.18fr);gap:70px;padding-block:76px}
.how.no-mascot{grid-template-columns:minmax(260px,.75fr) minmax(420px,1.25fr)}
.how-intro>p{max-width:430px;margin:16px 0 0}
.how-mascot{position:relative;width:270px;height:250px;margin-top:20px;border-radius:42% 58% 55% 45% / 48% 45% 55% 52%;background:radial-gradient(circle at 48% 42%,#fff 0 35%,#ddebff 68%,#c8e1ff 100%);border:1px solid rgba(117,174,239,.35)}
.how-mascot img{position:absolute;left:58px;bottom:-54px;width:155px;height:270px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 20px 24px rgba(18,70,140,.18));animation:mascotHover 5s ease-in-out infinite}
.mascot-bubble{position:absolute;z-index:2;padding:9px 13px;border-radius:12px;background:#fff;color:var(--brand-blue-dark);font-size:10px;font-weight:800;box-shadow:0 10px 28px rgba(20,78,155,.15)}
.mascot-bubble:after{content:"";position:absolute;width:10px;height:10px;background:#fff;transform:rotate(45deg)}
.mascot-bubble-top{top:26px;right:-20px}.mascot-bubble-top:after{left:18px;bottom:-5px}
.mascot-bubble-bottom{left:-8px;bottom:32px}.mascot-bubble-bottom:after{right:18px;top:-5px}
.how ol{display:grid;gap:13px;align-content:center}
.how li{position:relative;align-items:center;gap:18px;padding:19px 20px;border:1px solid #d7e7fb;border-radius:16px;background:rgba(255,255,255,.9);box-shadow:0 9px 26px rgba(18,77,150,.06);transition:transform .22s,border-color .22s,box-shadow .22s}
.how li:hover{transform:translateX(7px);border-color:#9cc7fb;box-shadow:0 15px 35px rgba(18,77,150,.12)}
.how li>span{display:grid;place-items:center;flex:0 0 43px;width:43px;height:43px;padding:0;border-radius:13px;background:var(--brand-blue-soft);color:var(--brand-blue);font-size:13px;font-weight:800}
.how li h3{font-size:15px}.how li p{margin-top:5px}.how li i{margin-left:auto;color:#8eb7e8;font-style:normal;font-size:18px}

/* Halaman kontak dengan visual maskot dan kartu yang lebih kuat. */
.contact-page{padding-block:46px 70px}
.contact-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 330px;align-items:center;gap:45px;min-height:390px;padding:48px 56px;border:1px solid #d6e7fb;border-radius:28px;overflow:hidden;background:radial-gradient(circle at 85% 20%,rgba(82,178,255,.34),transparent 36%),linear-gradient(135deg,#f8fbff,#eaf4ff);box-shadow:var(--brand-shadow)}
.contact-hero.no-mascot{grid-template-columns:1fr;min-height:320px}
.contact-hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#297ddb 1px,transparent 1px);background-size:24px 24px;opacity:.08}
.contact-hero-copy,.contact-mascot{position:relative;z-index:1}
.contact-page .contact-hero h1{max-width:650px;margin:15px 0;font-size:clamp(36px,4.5vw,56px);line-height:1.12;color:#102343;text-wrap:balance}
.contact-intro{font-size:15px;max-width:600px}
.contact-quick{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:22px;color:#36577f;font-size:11px;font-weight:700}
.contact-mascot{height:300px;align-self:end}
.contact-mascot img{position:absolute;left:50%;bottom:-49px;transform:translateX(-50%);width:190px;height:350px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 22px 28px rgba(13,69,143,.2));animation:mascotHoverCentered 5s ease-in-out infinite}
.contact-mascot span{position:absolute;z-index:2;top:4px;right:-8px;max-width:170px;padding:13px 16px;border-radius:16px 16px 16px 4px;background:#fff;color:var(--brand-blue-dark);font-size:11px;font-weight:800;line-height:1.5;box-shadow:0 12px 30px rgba(18,73,145,.14)}
.contact-grid article{position:relative;overflow:hidden;border-color:#dce9f8;background:#fff;box-shadow:0 10px 30px rgba(18,71,142,.06);transition:transform .22s,border-color .22s,box-shadow .22s}
.contact-grid article:before{content:"";position:absolute;left:0;top:0;width:5px;height:100%;background:linear-gradient(var(--brand-blue),var(--brand-sky))}
.contact-grid article:hover{transform:translateY(-5px);border-color:#aed0f8;box-shadow:0 18px 40px rgba(18,71,142,.12)}
.contact-grid .pill{background:var(--brand-blue-soft);color:var(--brand-blue)}
.contact-form-section{border-color:#d8e8fb;background:linear-gradient(145deg,#fff,#f5f9ff);box-shadow:0 12px 34px rgba(18,73,145,.07)}

.back-to-top{position:fixed;right:24px;bottom:24px;z-index:30;display:flex;align-items:center;gap:7px;padding:11px 14px 11px 11px;border:1px solid rgba(255,255,255,.35);border-radius:14px;background:linear-gradient(135deg,var(--brand-blue-dark),var(--brand-blue));color:#fff;font:700 11px 'DM Sans',sans-serif;box-shadow:0 14px 32px rgba(8,58,133,.28);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .25s,visibility .25s,transform .25s,box-shadow .2s}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:none}
.back-to-top:hover{box-shadow:0 18px 38px rgba(8,58,133,.38);transform:translateY(-2px)}
.back-to-top svg{width:20px;height:20px}

/* Stagger ringan membuat isi halaman muncul lebih hidup tanpa mengganggu baca. */
.js [data-animate] .category-card,.js [data-animate] .product-card,.js [data-animate] .promo-card,.js [data-animate] [data-step],.js [data-animate] .review-showcase article,.js .contact-page[data-animate] .contact-grid article{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.25,1),box-shadow .22s,border-color .22s}
.js [data-animate].is-visible .category-card,.js [data-animate].is-visible .product-card,.js [data-animate].is-visible .promo-card,.js [data-animate].is-visible [data-step],.js [data-animate].is-visible .review-showcase article,.js .contact-page[data-animate].is-visible .contact-grid article{opacity:1;transform:none}
.js [data-animate].is-visible :is(.category-card,.product-card,.promo-card,[data-step]):nth-child(2),.js .contact-page[data-animate].is-visible .contact-grid article:nth-child(2){transition-delay:.08s}
.js [data-animate].is-visible :is(.category-card,.product-card,.promo-card,[data-step]):nth-child(3),.js .contact-page[data-animate].is-visible .contact-grid article:nth-child(3){transition-delay:.16s}
.js [data-animate].is-visible :is(.category-card,.product-card,.promo-card,[data-step]):nth-child(4),.js .contact-page[data-animate].is-visible .contact-grid article:nth-child(4){transition-delay:.24s}
.js [data-animate].is-visible .category-card:hover,.js [data-animate].is-visible .product-card:hover,.js [data-animate].is-visible .promo-card:hover,.js .contact-page[data-animate].is-visible .contact-grid article:hover{transform:translateY(-5px)}
.js [data-animate].is-visible [data-step]:hover{transform:translateX(7px)}

@keyframes mascotHover{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes mascotHoverCentered{0%,100%{transform:translateX(-50%) translateY(0) rotate(-1deg)}50%{transform:translateX(-50%) translateY(-10px) rotate(1deg)}}

@media(max-width:1100px){
  .storefront-header-r2 .nav{min-height:78px;padding-block:8px}
  .js .storefront-header-r2 .nav{flex-wrap:nowrap}
  .storefront-header-r2 .kv-brand-image>img{width:220px;height:62px}
  .js .nav-toggle{display:block;margin-left:auto}
  .js .nav-toggle[aria-expanded=true] span:nth-child(1){top:19px;transform:rotate(45deg)}
  .js .nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
  .js .nav-toggle[aria-expanded=true] span:nth-child(3){top:19px;transform:rotate(-45deg)}
  .js .storefront-header-r2 .nav nav{position:absolute;left:32px;right:32px;top:calc(100% + 8px);order:initial;width:auto;max-height:calc(100vh - 120px);margin:0;padding:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;overflow:auto;background:rgba(255,255,255,.98);border:1px solid #d5e5f8;border-radius:18px;box-shadow:0 24px 60px rgba(10,54,119,.2);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .2s,visibility .2s,transform .2s}
  .nav-open .storefront-header-r2 .nav nav{opacity:1;visibility:visible;transform:none}
  .store-header .store-nav-icons>a,.store-menu-trigger>a{justify-content:flex-start;min-height:50px;padding:10px 12px}
  .store-menu-group{display:block}
  .store-menu-trigger{flex-direction:row}
  .store-menu-trigger>a{flex:1;flex-direction:row;min-width:0;font-size:12px}
  .submenu-toggle{position:static;width:34px;height:40px;border-radius:9px}
  .store-submenu{position:static;width:100%;margin-top:6px;box-shadow:none;border-color:#dbe8f7;background:#f7faff}
  .how{grid-template-columns:minmax(250px,.8fr) minmax(360px,1.2fr);gap:45px}
  .contact-hero{grid-template-columns:minmax(0,1fr) 260px;padding:42px}
  .voucher-grid{grid-template-columns:1fr}
  .review-showcase{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:720px){
  .storefront-header-r2 .nav{gap:9px}
  .storefront-header-r2 .kv-brand-image>img{width:155px;height:50px}
  .storefront-header-r2 .kv-brand-text>strong{font-size:21px}
  .nav-account{gap:3px}.nav-account .btn-login{display:none}.nav-account .login{padding:10px 12px;font-size:10px}
  .js .nav-toggle{width:42px;height:40px;order:3;margin-left:0}
  .js .storefront-header-r2 .nav nav{left:16px;right:16px;grid-template-columns:1fr 1fr}
  .store-header .store-nav-icons>a{flex-direction:row;min-width:0;font-size:11px;gap:8px}
  .menu-icon{width:28px;height:28px;flex-basis:28px;background:var(--brand-blue-soft)!important;color:var(--brand-blue)!important}
  .store-header .store-nav-icons>a[aria-current=page] .menu-icon,.store-menu-trigger>a[aria-current=page] .menu-icon,.store-menu-trigger>a.parent-current .menu-icon{background:rgba(255,255,255,.18)!important;color:#fff!important}
  .how{grid-template-columns:1fr;gap:42px;padding-block:54px}
  .how-intro{text-align:center}.how-intro>p{margin-inline:auto}.how-mascot{width:235px;height:205px;margin:18px auto 0}.how-mascot img{left:52px;width:132px;height:230px;bottom:-45px}
  .mascot-bubble-top{right:-16px}.mascot-bubble-bottom{left:-16px}
  .how li{padding:15px}.how li:hover{transform:translateY(-3px)}
  .js [data-animate].is-visible [data-step]:hover{transform:translateY(-3px)}
  .contact-page{padding-block:24px 45px}
  .contact-hero{grid-template-columns:1fr;gap:10px;padding:32px 24px 0;text-align:center;border-radius:22px}
  .contact-page .contact-hero h1{font-size:35px}.contact-intro{font-size:13px}.contact-quick{justify-content:center}
  .contact-mascot{height:230px}.contact-mascot img{width:145px;height:265px;bottom:-38px}.contact-mascot span{right:5px;top:16px;max-width:140px;font-size:9px}
  .voucher-section{padding:52px 0 58px}.voucher-section-head{min-height:105px;padding-right:135px}.promo-mascot{right:-12px;bottom:-22px;width:140px;height:145px}.promo-mascot img{right:2px;width:90px;height:140px}.promo-mascot>span{left:-8px;top:24px;padding:8px 10px;font-size:8px}.voucher-card{grid-template-columns:minmax(0,1fr) 96px;min-height:205px}.voucher-main{padding:21px 18px}.voucher-card .promo-title{font-size:17px}.voucher-stub{padding:15px 8px}
  .customer-reviews{padding:50px 0}.review-showcase{grid-template-columns:1fr}.review-showcase article{padding:20px}
  .back-to-top{right:16px;bottom:16px;padding:11px;border-radius:50%}.back-to-top span{display:none}
}

@media(max-width:430px){
  .storefront-header-r2 .kv-brand-image>img{width:125px}
  .nav-account .login{padding:9px 10px}
  .js .storefront-header-r2 .nav nav{grid-template-columns:1fr}
  .voucher-section-head{min-height:0;padding-right:0;margin-bottom:105px}.voucher-section.no-promo-mascot .voucher-section-head{margin-bottom:24px}.promo-mascot{right:50%;bottom:-115px;transform:translateX(50%)}.voucher-card{grid-template-columns:minmax(0,1fr) 82px}.voucher-main{padding:18px 15px}.voucher-stub b{font-size:11px}.voucher-stub>span{font-size:8px}
}

@media(prefers-reduced-motion:reduce){
  .how-mascot img,.contact-mascot img{animation:none!important}
  .promo-mascot img{animation:none!important}
  .back-to-top{transition:none}
  .js [data-animate] .category-card,.js [data-animate] .product-card,.js [data-animate] .promo-card,.js [data-animate] [data-step],.js [data-animate] .review-showcase article,.js .contact-page[data-animate] .contact-grid article{opacity:1!important;transform:none!important;transition:none!important}
}