:root{--bg:#f6f8fc;--surface:#fff;--ink:#18233d;--muted:#798398;--teal:#24b8bd;--line:#e7eaf1;--shadow:0 12px 35px #23304c12}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Arial}body.dark{--bg:#101827;--surface:#1b2738;--ink:#f0f5ff;--muted:#a2adc0;--line:#344154;--shadow:0 12px 35px #0003}button,input,textarea,select{font:inherit}button,a{cursor:pointer}a{text-decoration:none;color:inherit}.glass{background:color-mix(in srgb,var(--surface) 79%,transparent);backdrop-filter:blur(22px);border:1px solid #ffffff80;box-shadow:var(--shadow)}.nav{position:fixed;top:24px;left:50%;transform:translateX(-50%);width:min(1160px,calc(100% - 32px));height:74px;border-radius:24px;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 28px}.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.6px}.brandicon{color:var(--teal);font-size:36px}.brand small{display:block;font-size:10px;letter-spacing:3px;color:var(--muted)}nav{display:flex;gap:35px;font-size:13px;font-weight:600}nav a:hover{color:var(--teal)}.navright{display:flex;align-items:center;gap:12px}.navright button{border:0;background:transparent;color:var(--ink)}#theme{display:flex;align-items:center;gap:5px}.switch{display:inline-block;width:35px;height:20px;border-radius:20px;background:var(--teal);position:relative}.switch:after{content:'';position:absolute;background:white;width:14px;height:14px;border-radius:50%;left:3px;top:3px}.dark .switch:after{left:18px}.cart{font-size:20px}.cart b{font-size:10px;background:var(--teal);color:white;padding:3px 6px;border-radius:20px}.hero{min-height:710px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 75% 45%,#bfe9ed 0%,transparent 39%),radial-gradient(ellipse at 12% 20%,#dce2f5 0%,transparent 45%),var(--bg);padding:190px max(7%,calc((100% - 1160px)/2)) 85px}.dark .hero{background:radial-gradient(ellipse at 75% 45%,#12505a 0%,transparent 40%),var(--bg)}.hero-inner{position:relative;z-index:2;max-width:690px}.eyebrow,.kicker{color:var(--teal);font-size:11px;font-weight:800;letter-spacing:2.5px}.hero h1{font-size:clamp(44px,6.2vw,86px);line-height:1.06;letter-spacing:-4px;margin:23px 0}.hero h1 em{font-style:normal;color:var(--teal)}.hero p{color:var(--muted);max-width:540px;line-height:1.8}.search{margin-top:35px;padding:9px 9px 9px 23px;display:flex;align-items:center;gap:13px;border-radius:17px;max-width:680px}.search span{font-size:27px;color:var(--muted)}.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font-size:13px}.primary,.search button{background:var(--teal);border:0;color:white;border-radius:11px;padding:15px 20px;font-size:13px;font-weight:700;display:inline-block}.stats{display:flex;gap:30px;margin-top:34px;color:var(--muted);font-size:11px}.stats strong{display:block;color:var(--ink);font-size:20px}.hero-art{position:absolute;right:9%;top:210px;width:300px;height:320px;pointer-events:none}.hero-card{position:absolute;border:1px solid #ffffffb0;box-shadow:0 30px 50px #153a5830;background:linear-gradient(145deg,#dbf8f9,#8acdd9);border-radius:28px;color:#137681;font-size:65px;width:175px;height:165px;display:grid;place-content:center;text-align:center;transform:rotate(-13deg)}.hero-card small{font-size:10px;letter-spacing:3px;font-weight:900}.c1{top:0;right:10px}.c2{top:125px;right:110px;transform:rotate(12deg);background:linear-gradient(145deg,#e4e5fc,#a3b5e8);color:#5b68aa}.c3{top:190px;right:-25px;transform:rotate(-6deg);background:linear-gradient(145deg,#fce6eb,#d9a5cc);color:#ae6e9e}.section{max-width:1160px;margin:auto;padding:85px 16px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:30px}.section h2{font-size:clamp(27px,3vw,39px);letter-spacing:-1px;margin:10px 0}.section p{color:var(--muted);font-size:14px;line-height:1.7}.categories{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.category{border:1px solid var(--line);background:var(--surface);padding:24px 10px;border-radius:20px;box-shadow:var(--shadow);color:var(--ink);font-weight:700;font-size:13px;transition:.2s}.category:hover,.category.active{border-color:var(--teal);transform:translateY(-3px)}.category .emoji{display:block;font-size:32px;margin-bottom:14px}.pill{border:1px solid var(--line);border-radius:30px;padding:10px 16px;font-size:12px;color:var(--muted)}.products{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.product{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:8px;box-shadow:var(--shadow);overflow:hidden}.product-img{width:100%;height:180px;object-fit:cover;border-radius:14px;background:#e4e9f0}.product-info{padding:12px}.product h3{font-size:14px;margin:10px 0 7px}.product .meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.rating{color:#f4ad39}.price{font-weight:800;margin:14px 0;color:var(--ink)}.product-actions{display:flex;gap:8px}.product-actions button{flex:1;border:0;border-radius:10px;padding:11px 7px;background:#e6f7f7;color:#168b91;font-size:12px;font-weight:700}.product-actions button:last-child{flex:0 0 42px}.center{text-align:center;margin-top:35px}.outline{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:15px 25px;font-weight:700}.why{text-align:center}.whygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}.whygrid article{background:var(--surface);border:1px solid var(--line);padding:30px;border-radius:22px}.whygrid article span{font-size:38px;color:var(--teal)}.whygrid h3{font-size:17px}.contact{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.contact h2{font-size:44px}.social{display:flex;gap:20px;margin-top:28px;font-size:13px}.map{background:var(--surface);border-radius:24px;padding:20px;box-shadow:var(--shadow)}.map iframe{width:100%;height:260px;border:0;border-radius:14px}footer{border-top:1px solid var(--line);padding:35px max(5%,calc((100% - 1160px)/2));display:flex;justify-content:space-between;gap:15px;font-size:12px;color:var(--muted)}dialog{border:0;border-radius:24px;background:var(--surface);color:var(--ink);width:min(820px,94vw);max-height:88vh;box-shadow:0 20px 90px #0006;padding:30px}dialog::backdrop{background:#101827a9;backdrop-filter:blur(5px)}.close{float:right;border:0;background:var(--line);color:var(--ink);border-radius:10px;padding:9px}.detailgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.detailgrid img{width:100%;border-radius:15px}.thumbs{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}.thumbs img{width:60px;height:55px;object-fit:cover;cursor:pointer}.detailgrid video{max-width:100%;margin-top:12px}.cartrow{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:14px 0}.cartrow button{border:0;color:#d45;background:transparent}@media(max-width:950px){.hero-art{opacity:.35;right:0}.products{grid-template-columns:repeat(3,1fr)}.categories{grid-template-columns:repeat(4,1fr)}nav{gap:15px}}@media(max-width:650px){.nav{top:10px;height:auto;min-height:67px;padding:12px;flex-wrap:wrap;border-radius:20px}.brand{font-size:12px}.brandicon{font-size:26px}.navright{margin-left:auto}nav{order:3;width:100%;justify-content:center;gap:22px;margin-top:8px;font-size:11px}.hero{padding:200px 20px 65px;min-height:630px}.hero h1{letter-spacing:-2px}.hero-art{top:300px;opacity:.15}.search{flex-wrap:wrap}.search button{width:100%}.stats{gap:15px}.stats strong{font-size:15px}.section{padding:55px 16px}.categories{grid-template-columns:repeat(3,1fr);gap:9px}.category{padding:16px 4px;font-size:11px}.products{grid-template-columns:repeat(2,1fr);gap:10px}.product-img{height:130px}.product-info{padding:7px}.product h3{font-size:12px}.product .meta{font-size:10px}.whygrid,.contact,.detailgrid{grid-template-columns:1fr}.contact h2{font-size:32px}footer{flex-wrap:wrap}.pill{display:none}}

/* Product hover and detail layout update */
.product{transition:transform .25s ease,box-shadow .25s ease}.product:hover{transform:translateY(-9px);box-shadow:0 20px 48px rgba(25,39,67,.17)}.product-img{transition:transform .35s ease}.product:hover .product-img{transform:scale(1.035)}.detail-price-row{display:flex;align-items:center;gap:16px;justify-content:space-between}.detail-price-row h2{margin:12px 0}.icon-cart{border:1px solid var(--line);border-radius:15px;min-width:52px;height:52px;background:var(--surface);cursor:pointer;font-size:22px}.detail-wa{display:inline-block;margin:0 0 22px;text-decoration:none}.reviews-section{margin-top:32px;border-top:1px solid var(--line);padding-top:20px}.review-item{padding:14px 0;border-bottom:1px solid var(--line)}.review-item .rating{margin-left:14px}.review-item p{margin:8px 0}.reviews-section form{display:grid;gap:10px;max-width:600px}.reviews-section input,.reviews-section select,.reviews-section textarea{padding:13px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}.reviews-section textarea{min-height:100px}

/* Update 03: clickable product cards, aligned CTA, and styled scrollbars */
.product{cursor:pointer}.product:focus-visible{outline:3px solid var(--teal);outline-offset:4px}.product:hover .product-img{filter:saturate(1.14) brightness(1.035)}
.detail-price-row{justify-content:flex-start;gap:14px;align-items:center}.detail-price-row h2{margin:12px 0}.detail-price-row .icon-cart{background:var(--teal);color:white;border:0;border-radius:13px;width:54px;height:54px;display:grid;place-items:center;flex-shrink:0;box-shadow:0 7px 17px #24b8bd30;transition:transform .2s,filter .2s}.detail-price-row .icon-cart:hover{transform:translateY(-2px);filter:brightness(1.06)}.detail-wa{display:inline-flex;align-items:center;justify-content:center;margin-top:6px;margin-bottom:22px}
*{scrollbar-width:thin;scrollbar-color:var(--teal) transparent}::-webkit-scrollbar{width:10px;height:9px}::-webkit-scrollbar-track{background:color-mix(in srgb,var(--bg) 80%,transparent);border-radius:99px}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#49d4d2,#199ca9);border-radius:99px;border:2px solid var(--surface)}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#21b6c0,#167a91)}dialog{scrollbar-gutter:stable}dialog::backdrop{backdrop-filter:blur(8px)}

/* Update 04: compact mobile header, consistent CTAs and confirmation toast */
.detail-cta-row{display:flex;align-items:stretch;gap:12px;margin:4px 0 22px;max-width:100%}
.detail-cta-row .detail-wa{margin:0;display:inline-flex;align-items:center;justify-content:center;min-height:54px}
.detail-cta-row .icon-cart{width:54px;min-width:54px;height:auto;min-height:54px;display:inline-flex;align-items:center;justify-content:center;background:var(--teal);color:#fff;border:0;border-radius:13px;box-shadow:0 7px 17px #24b8bd30;cursor:pointer;transition:transform .2s,filter .2s}
.detail-cta-row .icon-cart svg{display:block;flex:none}
.detail-cta-row .icon-cart:hover{transform:translateY(-2px);filter:brightness(1.07)}
.navright .cart{display:inline-flex;align-items:center;gap:7px}.navright .cart svg{display:block;stroke:var(--ink)}
.cart-toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,18px);opacity:0;pointer-events:none;z-index:1000;display:flex;align-items:center;gap:12px;max-width:min(460px,calc(100vw - 30px));padding:14px 19px;border-radius:16px;background:var(--surface);color:var(--ink);box-shadow:0 15px 50px #09152538;border:1px solid var(--line);font-size:13px;font-weight:700;transition:opacity .25s,transform .25s}
.cart-toast.visible{opacity:1;transform:translate(-50%,0)}.toast-check{display:grid;place-items:center;width:29px;height:29px;flex:none;border-radius:50%;background:var(--teal);color:white;font-size:17px}
@media(max-width:650px){.nav{flex-wrap:nowrap;min-height:67px;height:67px}.nav nav{display:none!important}.navright{gap:6px}#theme{font-size:13px}.navright .cart{gap:5px}.brand small{letter-spacing:2px}.hero{padding-top:150px}.detail-cta-row{gap:10px}.detail-cta-row .detail-wa{padding:13px 14px;font-size:12px;min-width:0;flex:1}.detail-cta-row .icon-cart{min-width:50px;width:50px}.cart-toast{bottom:16px}}
@media(max-width:380px){.brand{font-size:11px}.brandicon{font-size:22px}.nav{padding:9px}.navright{gap:2px}#theme{gap:2px}}

/* Update 05: visible feedback, editable quantities, isolated dialog scrolling */
body.modal-open{overflow:hidden;overscroll-behavior:none}
dialog{overscroll-behavior:contain;overflow-y:auto;max-height:calc(100dvh - 36px)}
#cartbtn.cart-bump{animation:cartBump .65s cubic-bezier(.2,.8,.2,1)}
#cartbtn.cart-bump b{animation:badgeFlash .65s ease}
@keyframes cartBump{0%,100%{transform:scale(1)}25%{transform:scale(1.2) rotate(-8deg)}55%{transform:scale(.95) rotate(5deg)}75%{transform:scale(1.07)}}
@keyframes badgeFlash{30%{background:#ffb020;color:#17233d}100%{background:var(--teal);color:white}}
.cart-toast{z-index:2147483647;position:fixed;bottom:24px;left:50%;font-size:14px;box-shadow:0 20px 60px #09152555}
.cartrow{align-items:center;padding:18px 0;gap:18px}.cart-product{display:flex;flex-direction:column;gap:7px;min-width:0}.cart-product strong{font-size:15px}.cart-product small{color:var(--muted)}.cart-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;white-space:nowrap}.qty-control{display:flex;align-items:center;width:max-content;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.qty-control button{width:39px;height:38px;background:transparent;color:var(--ink);font-size:22px;font-weight:600;border:0}.qty-control button:hover{background:color-mix(in srgb,var(--teal) 15%,var(--surface))}.qty-control input{width:60px;height:38px;text-align:center;border:0;border-inline:1px solid var(--line);outline:none;color:var(--ink);background:var(--surface);font-size:15px;font-weight:700;appearance:textfield;-moz-appearance:textfield}.qty-control input::-webkit-inner-spin-button,.qty-control input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.cart-total{text-align:right;font-weight:800;font-size:18px;margin:16px 0 22px}@media(max-width:650px){.cartrow{gap:8px}.cart-side strong{font-size:12px}.qty-control input{width:48px}.qty-control button{width:35px}}

/* Update 06: three-dot mobile menu */
.mobile-menu-toggle{display:none;border:0;background:transparent;color:var(--ink);font-size:29px;font-weight:800;line-height:1;width:32px;height:40px;align-items:center;justify-content:center;cursor:pointer;border-radius:12px}
.mobile-menu-toggle:hover,.mobile-menu-toggle[aria-expanded="true"]{background:color-mix(in srgb,var(--teal) 13%,transparent)}
.mobile-menu[hidden]{display:none!important}.mobile-menu{display:none;position:fixed;z-index:1001;top:91px;right:5%;width:min(250px,90vw);padding:10px;border:1px solid var(--line);border-radius:19px;box-shadow:0 16px 48px #10182730;background:var(--surface)}
.mobile-menu a{display:block;padding:13px 16px;border-radius:12px;color:var(--ink);font-size:14px;font-weight:700;text-decoration:none}.mobile-menu a:hover{background:color-mix(in srgb,var(--teal) 13%,var(--surface));color:var(--teal)}
.inline-cart-notice{color:#e03948;font-size:13px;font-weight:750;min-height:0;margin:0;opacity:0;transition:opacity .12s ease}.inline-cart-notice.show{opacity:1;margin:4px 0 10px}
@media(max-width:650px){.mobile-menu-toggle{display:inline-flex;order:3}.mobile-menu{display:block}.navright{display:flex;align-items:center}.mobile-menu-toggle{order:0}.navright #theme{order:1}.navright #cartbtn{order:2}}

/* Update 07 — compact vertical rhythm across homepage sections */
@media (min-width:651px){
  .section{padding-top:44px;padding-bottom:44px}
  #category{padding-bottom:28px}
  #products{padding-top:28px;padding-bottom:32px}
  #products .center{margin-top:24px}
  #why{padding-top:42px;padding-bottom:38px}
  #why .whygrid{margin-top:26px}
  #contact{padding-top:38px;padding-bottom:50px}
}
@media (max-width:650px){
  .section{padding-top:30px;padding-bottom:30px}
  #category{padding-bottom:20px}
  #products{padding-top:20px;padding-bottom:24px}
  #products .center{margin-top:22px}
  #why{padding-top:30px;padding-bottom:25px}
  #why .whygrid{margin-top:22px}
  #contact{padding-top:25px;padding-bottom:36px}
}

/* Update 08: use user-supplied PNG icons in the hero banner */
.hero-art-images .hero-card{display:flex;align-items:center;justify-content:center;padding:22px;overflow:hidden}
.hero-art-images .hero-card img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(16,37,57,.14))}
@media(max-width:650px){.hero-art-images{opacity:.28;pointer-events:none}}

/* Update 09 — floating hero equipment, no colored cards */
.hero-art-images{right:5%;top:175px;width:clamp(310px,36vw,540px);height:460px;isolation:isolate;overflow:visible}
.hero-art-images .hero-card{border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important;overflow:visible!important;display:block!important;width:auto;height:auto;transform:none;animation:none;will-change:transform;filter:drop-shadow(0 20px 19px rgba(17,42,62,.20))}
.hero-art-images .hero-card img{width:100%;height:100%;object-fit:contain;filter:none;display:block}
.hero-art-images .c1{width:64%;height:58%;right:0;top:0;animation:arunikaFloatA 6s ease-in-out infinite}
.hero-art-images .c2{width:59%;height:68%;left:0;right:auto;top:28%;animation:arunikaFloatB 7s ease-in-out infinite}
.hero-art-images .c3{width:65%;height:50%;right:-3%;top:52%;animation:arunikaFloatC 6.5s ease-in-out infinite}
@keyframes arunikaFloatA{0%,100%{transform:translate3d(0,0,0) rotate(-8deg)}50%{transform:translate3d(0,-18px,0) rotate(-4deg)}}
@keyframes arunikaFloatB{0%,100%{transform:translate3d(0,0,0) rotate(6deg)}50%{transform:translate3d(-6px,16px,0) rotate(2deg)}}
@keyframes arunikaFloatC{0%,100%{transform:translate3d(0,0,0) rotate(-5deg)}50%{transform:translate3d(7px,-14px,0) rotate(-1deg)}}
@media(max-width:950px){.hero-art-images{right:-5%;opacity:.23}}
@media(max-width:650px){.hero-art-images{top:310px;right:-12%;width:340px;height:320px;opacity:.14}.hero-art-images .hero-card{filter:drop-shadow(0 12px 14px rgba(17,42,62,.12))}}
@media(prefers-reduced-motion:reduce){.hero-art-images .hero-card{animation:none!important}}

/* Update 10: automatic day/night hero background, sourced from banner.zip */
.hero{
 background-image:linear-gradient(90deg,rgba(246,248,252,.90) 0%,rgba(246,248,252,.77) 36%,rgba(246,248,252,.19) 73%,rgba(246,248,252,.03) 100%),url('/assets/banner-light.webp')!important;
 background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;
}
body.dark .hero{
 background-image:linear-gradient(90deg,rgba(10,17,31,.94) 0%,rgba(10,17,31,.80) 36%,rgba(10,17,31,.34) 74%,rgba(10,17,31,.14) 100%),url('/assets/banner-dark.webp')!important;
}
.hero .orb{display:none}
.hero-inner{position:relative;z-index:3}
.hero-art-images{z-index:2}
.hero p{color:#536077}
body.dark .hero p{color:#c0cada}
@media(max-width:950px){.hero{background-position:62% center!important}.hero-art-images{opacity:.35}}
@media(max-width:650px){
 .hero{background-position:65% center!important;background-image:linear-gradient(90deg,rgba(246,248,252,.94),rgba(246,248,252,.72)),url('/assets/banner-light.webp')!important}
 body.dark .hero{background-image:linear-gradient(90deg,rgba(10,17,31,.94),rgba(10,17,31,.77)),url('/assets/banner-dark.webp')!important}
 .hero-art-images{opacity:.12}
}

/* Update 11 — stage banner fades seamlessly into the next section.
   Use a separate masked background layer so hero content stays fully opaque. */
.hero,body.dark .hero{background-image:none!important;background-color:var(--bg)!important;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
 background-image:linear-gradient(90deg,rgba(246,248,252,.90) 0%,rgba(246,248,252,.77) 36%,rgba(246,248,252,.19) 73%,rgba(246,248,252,.03) 100%),url('/assets/banner-light-fade.webp');
 background-size:cover;background-position:center;background-repeat:no-repeat;
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 66%,rgba(0,0,0,.85) 76%,rgba(0,0,0,.35) 90%,transparent 100%);
 mask-image:linear-gradient(to bottom,#000 0%,#000 66%,rgba(0,0,0,.85) 76%,rgba(0,0,0,.35) 90%,transparent 100%)}
body.dark .hero::before{background-image:linear-gradient(90deg,rgba(10,17,31,.94) 0%,rgba(10,17,31,.80) 36%,rgba(10,17,31,.34) 74%,rgba(10,17,31,.14) 100%),url('/assets/banner-dark.webp')}
@media(max-width:950px){.hero::before{background-position:62% center}}
@media(max-width:650px){.hero::before{background-position:65% center;background-image:linear-gradient(90deg,rgba(246,248,252,.94),rgba(246,248,252,.72)),url('/assets/banner-light-fade.webp')}body.dark .hero::before{background-image:linear-gradient(90deg,rgba(10,17,31,.94),rgba(10,17,31,.77)),url('/assets/banner-dark.webp')}}


/* Update 12: one continuous CSS fade for both themes.
   Use the ORIGINAL non-faded banner: avoid baked-in white edges/artifacts. */
.hero, body.dark .hero {
  background:var(--bg)!important;
  background-image:none!important;
  isolation:isolate;
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(246,248,252,.88) 0%,rgba(246,248,252,.70) 32%,rgba(246,248,252,.14) 73%,rgba(246,248,252,.03) 100%),
    url('/assets/banner-light.webp');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,.98) 55%,rgba(0,0,0,.87) 65%,rgba(0,0,0,.58) 76%,rgba(0,0,0,.23) 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,.98) 55%,rgba(0,0,0,.87) 65%,rgba(0,0,0,.58) 76%,rgba(0,0,0,.23) 88%,transparent 100%);
}
body.dark .hero::before {
  background-image:
    linear-gradient(90deg,rgba(16,24,39,.91) 0%,rgba(16,24,39,.76) 33%,rgba(16,24,39,.24) 74%,rgba(16,24,39,.09) 100%),
    url('/assets/banner-dark.webp');
}
.hero-inner {position:relative;z-index:3}
.hero-art-images {z-index:2}
@media(max-width:950px){.hero::before{background-position:62% center}}
@media(max-width:650px){
 .hero::before{background-position:65% center;background-image:linear-gradient(90deg,rgba(246,248,252,.91),rgba(246,248,252,.65)),url('/assets/banner-light.webp')}
 body.dark .hero::before{background-image:linear-gradient(90deg,rgba(16,24,39,.93),rgba(16,24,39,.70)),url('/assets/banner-dark.webp')}
}

/* Update 13 — improve text contrast in light mode without dimming foreground. */
body:not(.dark) .hero::before {
  background-image:
    linear-gradient(90deg,rgba(246,248,252,.97) 0%,rgba(246,248,252,.93) 32%,rgba(246,248,252,.66) 59%,rgba(246,248,252,.28) 100%),
    url('/assets/banner-light.webp');
}
@media(max-width:950px){
  body:not(.dark) .hero::before {
    background-image:linear-gradient(90deg,rgba(246,248,252,.97),rgba(246,248,252,.82)),url('/assets/banner-light.webp');
  }
}
@media(max-width:650px){
  body:not(.dark) .hero::before {
    background-image:linear-gradient(90deg,rgba(246,248,252,.97),rgba(246,248,252,.88)),url('/assets/banner-light.webp');
  }
}

/* Katalog: pertahankan proporsi gambar sumber dan kurangi pembesaran berlebihan */
.product-img{object-fit:contain;background:#f4f5f6;}
.detailgrid #mainphoto{object-fit:contain;}

/* Custom site logo */
.site-logo:not([hidden]){display:inline-block;max-width:170px;max-height:55px;width:auto;height:auto;object-fit:contain;vertical-align:middle}footer .site-logo:not([hidden]){max-width:180px;max-height:65px}

/* Configurable product card palette */
.product-card,.productcard,.product{background:var(--color-card-bg,var(--surface));border-color:var(--color-card-border,var(--line))}
.product-card:hover,.productcard:hover,.product:hover{border-color:var(--color-card-hover,var(--teal))}
.product-card h3,.productcard h3,.product h3{color:var(--color-card-title,var(--ink))}
.product-card .price,.productcard .price,.product .price{color:var(--color-card-price,var(--ink))}
.product-card .category,.productcard .category,.product .category,.product-card small,.productcard small{color:var(--color-card-muted,var(--muted))}
.product-card .stars,.productcard .stars,.product .stars,.product-card .rating,.productcard .rating{color:var(--color-card-rating,#ff9b22)}
.product-card .view,.productcard .view,.product .view,.product-card .btn-detail,.productcard .btn-detail{background:var(--color-card-button-bg,#e5f7f8);color:var(--color-card-button-text,#158d94)}

/* Exact selectors used by Arunika product listing */
.product{background:var(--color-card-bg,var(--surface))!important;border-color:var(--color-card-border,var(--line))!important}
.product:hover{border-color:var(--color-card-hover,#c81c70)!important}
.product .product-info h3{color:var(--color-card-title,var(--ink))}
.product .price{color:var(--color-card-price,var(--ink))}
.product .price small,.product .product-info>div:first-child{color:var(--color-card-muted,var(--muted))}
.product .rating{color:var(--color-card-rating,#ff9b22)}
.product .product-actions button{background:var(--color-card-button-bg,#e5f7f8)!important;color:var(--color-card-button-text,#158d94)!important}
.product .product-actions button:hover{filter:brightness(.95);transform:translateY(-2px)}