/* Reference-inspired storefront, scoped to the shopping page. */
body.storefront-refresh{background:#f7f8f5;font-family:Cairo,sans-serif}
.storefront-refresh #shopBrowse{max-width:1180px;padding:20px 20px 32px!important}
.storefront-refresh .topbar{min-height:68px!important;padding-block:10px!important}
.storefront-refresh .topbar-logo{max-height:44px!important;object-fit:contain}
.storefront-refresh .hero-shell{max-width:1180px;margin:20px auto 0;border-radius:20px;overflow:hidden}
.storefront-refresh .hero.hero-has-image,.storefront-refresh .hero.hero-has-image:has(.hero-text){height:clamp(240px,30vw,360px)!important;min-height:0!important}
.storefront-refresh .hero.hero-has-image .hero-image{height:100%!important;max-height:360px!important;object-fit:contain!important;mask-image:none!important;-webkit-mask-image:none!important}
.storefront-refresh #shopBrowse #shopSearchPanel{border-radius:14px!important;border:1px solid #e0e5df;box-shadow:0 3px 12px #152a2010;margin:0 0 24px!important}
.storefront-refresh #shopSearchPanel .shop-search-controls{min-height:54px!important;padding:4px 14px!important}
.storefront-refresh #shopBrowse .cat-flex{gap:14px!important;padding:2px 0 10px!important;margin-bottom:20px!important;grid-auto-columns:calc((100% - 56px)/5)}
.storefront-refresh #shopBrowse .cat-flex:not(.shape-circle) .cat-box{height:190px!important;aspect-ratio:auto!important;min-height:0!important;padding:8px 8px 54px!important;background-origin:content-box;background-clip:content-box;background-repeat:no-repeat;background-color:#fff!important;border:1px solid #e2e7e0;border-radius:14px!important;overflow:hidden!important;margin-bottom:0!important;box-shadow:0 2px 8px #182b2010!important}
.storefront-refresh #shopBrowse .cat-flex:not(.shape-circle) .cat-box-overlay{background:none!important}
.storefront-refresh #shopBrowse .cat-flex:not(.shape-circle) .cat-box-name{position:absolute!important;top:auto!important;bottom:0!important;inset-inline:6px!important;min-height:52px;display:flex;align-items:center;justify-content:center;padding:6px 2px!important;color:#253b31!important;background:#fff!important;border-radius:0!important;font:600 13px/1.55 Cairo,sans-serif!important;text-shadow:none!important;overflow-wrap:break-word!important}
.storefront-refresh #shopBrowse h5{font-weight:700;font-size:20px;margin-block:12px 16px}
.storefront-refresh .store-product .card{border:1px solid #e3e8e3!important;border-radius:16px!important;box-shadow:0 3px 14px #22352b08!important;overflow:hidden}
.storefront-refresh :is(a,button,input):focus-visible{outline:3px solid var(--brand,#304674);outline-offset:3px}
@media(max-width:767px){
 .storefront-refresh .topbar{min-height:60px!important;padding-inline:12px!important}
 .storefront-refresh .hero-shell{margin:12px 12px 0;border-radius:14px}
 .storefront-refresh .hero.hero-has-image,.storefront-refresh .hero.hero-has-image:has(.hero-text){height:auto!important}
 .storefront-refresh .hero.hero-has-image .hero-image{height:auto!important;max-height:260px!important;object-fit:contain!important}
 .storefront-refresh #shopBrowse{padding:16px 12px 28px!important}
 .storefront-refresh #shopBrowse .cat-flex{grid-auto-columns:calc((100% - 20px)/3)!important;gap:10px!important}
 .storefront-refresh #shopBrowse .cat-flex:not(.shape-circle) .cat-box{height:146px!important;padding:6px 6px 50px!important;border-radius:12px!important}
 .storefront-refresh #shopBrowse .cat-flex:not(.shape-circle) .cat-box-name{font-size:11px!important;min-height:48px}
 .storefront-refresh #shopBrowse #shopSearchPanel{margin-bottom:18px!important}
 .storefront-refresh #shopBrowse h5{font-size:18px}
}

.storefront-refresh .hero-shell{margin-inline:auto!important;width:calc(100% - 40px)!important}
@media(min-width:768px){
 .storefront-refresh .hero.hero-has-image .hero-image{object-fit:cover!important}
 .storefront-refresh #shopBrowse .cat-flex{grid-auto-columns:calc((100% - 42px)/4)!important}
}
@media(max-width:767px){
 .storefront-refresh .hero-shell{width:calc(100% - 24px)!important}
 .storefront-refresh #shopBrowse .cat-flex:not(.rows-1){grid-auto-flow:row!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:auto!important}
}
.storefront-refresh .hero.hero-has-image .hero-image{width:100%!important;max-width:none!important}

/* Edge-to-edge banner aligned with the store header. */
.storefront-refresh .hero-shell{width:100%!important;max-width:none!important;margin:0!important;border:0!important;border-radius:0!important;padding:0!important}
.storefront-refresh .hero,.storefront-refresh .hero-image{border:0!important;border-radius:0!important;box-shadow:none!important}

/* Clean white storefront with unframed category tiles. */
body.storefront-refresh,.storefront-refresh #pnlStore,.storefront-refresh #shopBrowse{background:#fff!important}
.storefront-refresh #shopBrowse .cat-flex .cat-box{border:0!important;box-shadow:none!important;background-color:#fff!important}
/* Compact category gallery: square imagery, separate readable captions. */
.storefront-refresh #shopBrowse .cat-flex.cat-flex{display:grid!important;grid-auto-flow:column!important;grid-template-columns:none!important;grid-template-rows:repeat(2,auto)!important;grid-auto-columns:calc((100% - 36px)/4)!important;gap:16px 12px!important;overflow-x:auto!important;overflow-y:hidden!important;margin-bottom:8px!important;padding:4px 0!important;align-items:start}
.storefront-refresh #shopBrowse .cat-flex.cat-flex .cat-box{display:flex!important;flex-direction:column;justify-content:flex-start;align-items:stretch;height:auto!important;min-width:0!important;min-height:0!important;aspect-ratio:auto!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background-size:0 0!important;overflow:visible!important}
.storefront-refresh #shopBrowse .cat-flex.cat-flex .cat-box::before{content:'';display:block;width:100%;aspect-ratio:1;background-image:inherit;background-size:cover;background-position:center;border-radius:20%;flex-shrink:0}
.storefront-refresh #shopBrowse .cat-flex.cat-flex .cat-box-overlay{display:none!important}
.storefront-refresh #shopBrowse .cat-flex.cat-flex .cat-box-name{position:static!important;display:block!important;min-height:0!important;max-width:100%!important;padding:7px 0 0!important;background:transparent!important;color:var(--brand,#30231e)!important;font:700 14px/1.5 Cairo,sans-serif!important;text-shadow:none!important;white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important}
.category-scroll-track{width:80px;height:3px;background:#e6ded8;border-radius:3px;margin:12px auto 20px;position:relative;direction:ltr}
.category-scroll-track[hidden]{display:none}
.category-scroll-thumb{display:block;position:absolute;top:0;left:0;height:100%;background:var(--brand,#694536);border-radius:3px}
@media(min-width:768px){.storefront-refresh #shopBrowse .cat-flex.cat-flex .cat-box::before{max-height:180px;aspect-ratio:auto;height:180px}.storefront-refresh #shopBrowse .cat-flex.cat-flex .cat-box-name{font-size:16px!important}}
