/* ===== واجهة المتجر ===== */
:root{
  --primary:#7a2e4d;
  --primary-soft:color-mix(in srgb,var(--primary) 10%,#fff);
  --ink:#1f1a1d;
  --muted:#7b7176;
  --line:#ece6e9;
  --bg:#fff;
  --bg-soft:#faf6f8;
  --sale:#d6336c;
  --ok:#1f9d55;
  --radius:14px;
  --shadow:0 6px 24px rgba(40,20,30,.08);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Tajawal",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:15px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 16px}
.container.narrow{max-width:860px}
.muted{color:var(--muted)}
.small{font-size:13px}
.center{text-align:center}
.error{color:var(--sale)}
[hidden]{display:none!important}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--primary);color:#fff;border:1px solid var(--primary);border-radius:10px;padding:10px 18px;font-weight:700;cursor:pointer;transition:.15s;white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-block{width:100%}
.btn-lg{padding:13px 22px;font-size:16px}
.btn-light{background:var(--bg-soft);color:var(--ink);border-color:var(--line)}
.btn-outline{background:#fff;color:var(--primary);border-color:var(--primary)}
.btn-dark{background:var(--ink);border-color:var(--ink)}
.btn-white{background:#fff;color:var(--primary);border-color:#fff}
.link{background:none;border:0;color:var(--primary);cursor:pointer;text-decoration:underline;padding:0}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:none;border:0;cursor:pointer;position:relative;color:var(--ink)}
.icon-btn:hover{background:var(--bg-soft)}

/* Alerts */
.alert{padding:12px 16px;border-radius:10px;margin:12px 0;font-weight:500}
.alert-success{background:#e8f7ee;color:#156b3a}
.alert-error{background:#fdecef;color:#a3173e}
.alert-info{background:#eef3fd;color:#274a8f}
.alert a{text-decoration:underline;font-weight:700}

/* Header */
.announce{background:var(--primary);color:#fff;text-align:center;font-size:13.5px;padding:7px 12px;font-weight:500}
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.header-row{display:flex;align-items:center;gap:14px;height:70px}
.logo{font-size:24px;font-weight:800;color:var(--primary);letter-spacing:-.3px;white-space:nowrap}
.logo img{height:44px;width:auto}
.search{flex:1;display:flex;max-width:620px;margin:0 auto;background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.search input{flex:1;border:0;background:none;padding:10px 18px;outline:none;min-width:0}
.search button{border:0;background:none;padding:0 16px;cursor:pointer;color:var(--muted)}
.header-icons{display:flex;gap:4px}
.cart-count{position:absolute;top:2px;left:2px;background:var(--sale);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.cart-count:empty{display:none}
.menu-toggle{display:none}
.main-nav{border-top:1px solid var(--line);position:relative}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
.nav-list>li{position:static}
.nav-list>li>a{display:block;padding:12px 14px;font-weight:500;font-size:15px;border-bottom:2px solid transparent}
.nav-list>li>a:hover,.nav-list>li.open>a{color:var(--primary);border-bottom-color:var(--primary)}
.has-mega>a::after{content:"";display:inline-block;width:6px;height:6px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin-right:7px;vertical-align:3px;opacity:.55}
.nav-list .hot{color:var(--sale);font-weight:700}
.mega{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:0 18px 40px rgba(40,20,30,.12);border-top:1px solid var(--line);padding:26px 0 18px;z-index:50}
.has-mega:hover>.mega,.has-mega.open>.mega{display:block}
.mega-cols{max-width:1280px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px 40px}
.mega-col{display:flex;flex-direction:column;gap:7px}
.mega-col a{font-size:14px;color:var(--muted)}
.mega-col a:hover{color:var(--primary)}
.mega-col .mega-title{color:var(--ink);font-weight:800;font-size:15px;margin-bottom:2px}
.mega-all{display:block;max-width:1280px;margin:18px auto 0;padding:12px 32px 0;border-top:1px solid var(--line);color:var(--primary);font-weight:700;font-size:14px}

/* Drawer */
.drawer{position:fixed;inset:0;background:rgba(20,10,15,.45);z-index:100}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(340px,86vw);background:#fff;overflow-y:auto;animation:slideIn .2s}
@keyframes slideIn{from{transform:translateX(100%)}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.drawer-list{list-style:none;margin:0;padding:8px 0}
.drawer-list>li>a,.drawer-list summary{display:block;padding:12px 18px;font-weight:500;cursor:pointer;border-bottom:1px solid var(--line)}
.drawer-list details a{display:block;padding:9px 30px;color:var(--muted);font-size:14px}
.drawer-list details a.sub{padding-right:46px;font-size:13.5px}
.drawer-list details a.all{color:var(--primary);font-weight:700}

/* Sections */
.site-main{min-height:50vh;padding-bottom:30px}
.section{padding:22px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.section-head h2{font-size:22px;margin:0;font-weight:800}
.section-head a{color:var(--primary);font-weight:700;font-size:14px}
.page-title{font-size:26px;margin:20px 0}

/* Hero */
.hero{padding-top:18px}
.hero-slider{position:relative;width:100%;border-radius:20px;overflow:hidden;aspect-ratio:16/6;min-height:220px;background:linear-gradient(120deg,var(--primary),color-mix(in srgb,var(--primary) 55%,#f0a8c0))}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s;display:flex;align-items:center;pointer-events:none}
.hero-slide.active{opacity:1;pointer-events:auto}
.hero-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-slide:nth-child(2n){background:linear-gradient(120deg,#2d1b28,color-mix(in srgb,var(--primary) 80%,#000))}
.hero-slide.has-img{background:none}
.hero-text{position:relative;color:#fff;padding:0 6%;max-width:620px}
.hero-slide.has-img .hero-text{text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero-text h1{font-size:clamp(26px,4.2vw,48px);margin:0 0 8px;line-height:1.2;font-weight:800}
.hero-text p{font-size:clamp(15px,1.7vw,20px);margin:0 0 20px;opacity:.95}
.hero-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.hero-dots button{width:9px;height:9px;border-radius:5px;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0;transition:.2s}
.hero-dots button.active{width:26px;background:#fff}

/* Category circles */
.cat-circles{display:flex;gap:18px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;justify-content:center}
.cat-circles::-webkit-scrollbar{display:none}
.cat-circle{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:92px;text-align:center;font-weight:500;font-size:14px}
.cat-circle .circle{width:86px;height:86px;border-radius:50%;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;color:var(--primary);overflow:hidden;transition:.2s;border:2px solid transparent}
.cat-circle:hover .circle{border-color:var(--primary)}
.cat-circle img{width:100%;height:100%;object-fit:cover}

/* Product cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.slider{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.slider>.card{scroll-snap-align:start}
@media(min-width:1100px){.slider{grid-auto-columns:calc((100% - 64px)/5)}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card-img{position:relative;aspect-ratio:1;background:var(--bg-soft);display:block;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.card-img img.alt{position:absolute;inset:0;opacity:0}
.card:hover .card-img img.alt{opacity:1}
.tags{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.tag{background:var(--ink);color:#fff;font-size:12px;font-weight:700;padding:3px 9px;border-radius:6px}
.tag-sale{background:var(--sale)}
.tag.big{position:absolute;top:14px;right:14px;font-size:15px;padding:5px 12px}
.soldout{position:absolute;inset:auto 0 0 0;background:rgba(255,255,255,.88);text-align:center;font-weight:700;padding:6px;color:var(--muted)}
.card-body{padding:12px 12px 6px;flex:1;display:flex;flex-direction:column;gap:3px}
.card-brand{font-size:12.5px;color:var(--muted);font-weight:700}
.card-title{font-size:14.5px;font-weight:500;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:42px}
.card-title:hover{color:var(--primary)}
.card-rating{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.stars{color:#ddd;letter-spacing:1px;font-style:normal;font-size:14px}
.stars i{font-style:normal}
.stars i.on{color:#f5a623}
.stars i.half{background:linear-gradient(to left,#f5a623 50%,#ddd 50%);-webkit-background-clip:text;background-clip:text;color:transparent}
.price-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:4px}
.price{font-weight:800;color:var(--primary);font-size:16px}
del{color:var(--muted);font-size:13px}
.earn{font-size:12px;color:var(--ok);font-weight:500}
.card-foot{padding:0 12px 12px}
.card-foot .btn{padding:9px 10px;font-size:14px}

/* Brands */
.brand-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.brand-chip{flex:0 0 auto;min-width:140px;height:74px;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;padding:10px 18px;font-weight:800;font-size:17px;color:var(--primary);background:#fff}
.brand-chip img{max-height:50px;width:auto}
.brand-chip:hover{border-color:var(--primary)}
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.brand-tile{border:1px solid var(--line);border-radius:14px;padding:22px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.brand-tile img{max-height:60px;width:auto}
.brand-tile .brand-name{font-weight:800;font-size:18px;color:var(--primary)}
.brand-tile:hover{box-shadow:var(--shadow)}

/* Shop */
.crumbs{display:flex;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--muted);padding:16px 0 6px}
.crumbs a:hover{color:var(--primary)}
.shop-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.shop-head h1{font-size:24px;margin:0}
.shop-head h1 small{font-size:14px;color:var(--muted);font-weight:500}
.sort-form{display:flex;gap:8px}
.sort-form select,.filters input,.filters select{border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:#fff}
.filter-toggle{display:none}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{border:1px solid var(--line);border-radius:999px;padding:6px 16px;font-size:14px;background:#fff}
.chip:hover{border-color:var(--primary);color:var(--primary)}
.shop-layout{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:start}
.filters{border:1px solid var(--line);border-radius:var(--radius);padding:16px;position:sticky;top:130px;background:#fff}
.filters h4{margin:14px 0 8px;font-size:15px}
.filters h4:first-of-type{margin-top:0}
.filter-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto;font-size:14px}
.filter-list label,.check{display:flex;align-items:center;gap:8px;cursor:pointer}
.check{margin:10px 0;font-size:14px}
.price-range{display:flex;gap:8px}
.price-range input{width:50%;min-width:0}
.filters .btn{margin-top:8px}
.mobile-only{display:none}
.pager{display:flex;justify-content:center;gap:6px;margin:28px 0}
.pager a{min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px}
.pager a.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.empty{text-align:center;padding:60px 16px;color:var(--muted)}
.empty .btn{margin-top:10px}

/* Product page */
.product-page{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;margin:10px 0 30px}
.gallery-main{position:relative;border-radius:18px;overflow:hidden;background:var(--bg-soft);aspect-ratio:1}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto}
.thumbs button{flex:0 0 76px;height:76px;border:2px solid transparent;border-radius:10px;overflow:hidden;padding:0;cursor:pointer;background:var(--bg-soft)}
.thumbs button.active{border-color:var(--primary)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.pbrand{color:var(--primary);font-weight:800}
.pinfo h1{font-size:26px;line-height:1.35;margin:4px 0 8px}
.price-row.big .price{font-size:26px}
.price-row.big del{font-size:16px}
.save{background:#fdecef;color:var(--sale);font-weight:700;font-size:13px;padding:2px 10px;border-radius:6px}
.earn-box{background:#eef9f2;color:#156b3a;border-radius:10px;padding:10px 14px;margin:14px 0;font-size:14px}
.variant-title{margin:16px 0 8px;font-weight:500}
.variants{display:flex;flex-wrap:wrap;gap:8px}
.variant input{position:absolute;opacity:0;pointer-events:none}
.variant span{display:inline-block;min-width:54px;text-align:center;border:1.5px solid var(--line);border-radius:10px;padding:8px 14px;cursor:pointer;font-weight:500;transition:.15s}
.variant input:checked+span{border-color:var(--primary);background:var(--primary-soft);color:var(--primary);font-weight:700}
.variant input:focus-visible+span{outline:2px solid var(--primary);outline-offset:2px}
.variant.out span{color:#bbb;text-decoration:line-through;cursor:not-allowed;background:#fafafa}
.stock-line{margin:14px 0;font-size:14px;font-weight:500}
.stock-line .ok{color:var(--ok)}
.stock-line .no{color:var(--sale)}
.stock-line .low{color:#c77700}
.buy-row{display:flex;gap:10px;margin-bottom:10px}
.grow{flex:1}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.qty button{width:40px;height:46px;border:0;background:none;font-size:20px;cursor:pointer}
.qty input{width:48px;text-align:center;border:0;outline:none;-moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-inner-spin-button{display:none}
.qty.small button{width:32px;height:36px;font-size:17px}
.qty.small input{width:38px}
.perks{list-style:none;padding:16px 0;margin:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px;font-size:14px}
.tabs-box{border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:20px}
.tabs-box h2{margin-top:0;font-size:20px}
.desc{white-space:normal;line-height:1.9}
.review{border-bottom:1px solid var(--line);padding:12px 0}
.review-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.review p{margin:6px 0 0}
.review-form{margin-top:18px;display:flex;flex-direction:column;gap:10px;max-width:520px}
.review-form input,.review-form textarea{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.review-form textarea{min-height:90px}
.review-form h3{margin:0}
.rate-input{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.rate-input input{display:none}
.rate-input label{font-size:28px;color:#ddd;cursor:pointer}
.rate-input input:checked~label,.rate-input label:hover,.rate-input label:hover~label{color:#f5a623}

/* Cart & checkout */
.cart-layout,.checkout-layout{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
.cart-lines{display:flex;flex-direction:column;gap:12px}
.cart-line{display:grid;grid-template-columns:84px 1fr auto auto 42px;gap:14px;align-items:center;border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.cart-line.warn{border-color:var(--sale)}
.cart-line img{width:84px;height:84px;border-radius:10px;object-fit:cover;background:var(--bg-soft)}
.cl-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.cl-name{font-weight:500}
.cl-info small{color:var(--muted)}
.cl-total{font-weight:700;min-width:90px;text-align:left}
.remove{color:var(--muted)}
.remove:hover{color:var(--sale)}
.ship-progress{background:var(--bg-soft);border-radius:var(--radius);padding:12px 16px;font-size:14px}
.ship-progress .bar{height:6px;background:var(--line);border-radius:3px;margin-top:8px;overflow:hidden}
.ship-progress .bar span{display:block;height:100%;background:var(--ok);border-radius:3px}
.summary{border:1px solid var(--line);border-radius:var(--radius);padding:18px;position:sticky;top:130px;background:#fff;display:flex;flex-direction:column;gap:10px}
.summary h3{margin:0 0 4px}
.sum-row{display:flex;justify-content:space-between;gap:10px;font-size:15px}
.sum-row.discount{color:var(--ok)}
.sum-row.total{font-size:18px;font-weight:800;border-top:1px solid var(--line);padding-top:10px}
.coupon-form{display:flex;gap:8px}
.coupon-form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:9px 12px;text-transform:uppercase}
.coupon-applied{background:#eef9f2;border-radius:10px;padding:8px 12px;font-size:14px}
.panel{border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:20px;background:#fff}
.panel h3{margin-top:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .full{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:6px;font-weight:500;font-size:14px}
label.check{flex-direction:row}
.panel input:not([type=checkbox]):not([type=radio]),.panel select,.panel textarea{border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:#fff;width:100%;outline:none}
.panel input:focus,.panel select:focus,.panel textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.pay-option{flex-direction:row;align-items:center;border:1.5px solid var(--primary);background:var(--primary-soft);border-radius:10px;padding:12px}
.mini-line{display:grid;grid-template-columns:50px 1fr auto;gap:10px;align-items:center;font-size:13.5px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.mini-line img{width:50px;height:50px;border-radius:8px;object-fit:cover}
.points-use{background:#eef9f2;border-radius:10px;padding:8px 10px;margin:0}

/* Account / order */
.auth-box{max-width:440px;margin:30px auto}
.auth-box form{display:flex;flex-direction:column;gap:14px}
.auth-box h1{margin-top:0;font-size:22px}
.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:16px}
.tabs a{flex:1;text-align:center;padding:10px;font-weight:700;color:var(--muted);border-bottom:2px solid transparent}
.tabs a.active{color:var(--primary);border-color:var(--primary)}
.account-head{display:flex;justify-content:space-between;align-items:center;margin:20px 0}
.account-head h1{margin:0;font-size:24px}
.points-card{background:linear-gradient(120deg,var(--primary),color-mix(in srgb,var(--primary) 60%,#e89ab4));color:#fff;border-radius:18px;padding:22px;margin-bottom:20px;display:flex;flex-direction:column;gap:4px}
.points-card b{font-size:30px}
.points-card span{font-size:13.5px;opacity:.9}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:right}
.table th{color:var(--muted);font-weight:500;font-size:13px}
.table .clickable{cursor:pointer}
.table .clickable:hover{background:var(--bg-soft)}
.td-prod{display:flex;align-items:center;gap:10px}
.td-prod img{width:44px;height:44px;border-radius:8px;object-fit:cover}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700}
.badge-warn{background:#fff4e0;color:#a15c00}
.badge-info{background:#e8f0fe;color:#1d4ea8}
.badge-purple{background:#f0e8fd;color:#5b2ca8}
.badge-ok{background:#e4f6eb;color:#156b3a}
.badge-muted{background:#eee;color:#666}
.badge-danger{background:#fde8ec;color:#a3173e}
.success-box{text-align:center;padding:30px 10px}
.check-icon{width:70px;height:70px;border-radius:50%;background:var(--ok);color:#fff;font-size:36px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.success-box h1{font-size:24px;margin:8px 0}
.timeline{list-style:none;display:flex;padding:0;margin:0 0 24px;counter-reset:s}
.timeline li{flex:1;text-align:center;position:relative;font-size:13px;color:var(--muted);font-weight:500}
.timeline li span{display:block;width:18px;height:18px;border-radius:50%;background:var(--line);margin:0 auto 6px;position:relative;z-index:1}
.timeline li::before{content:"";position:absolute;top:8px;right:50%;width:100%;height:3px;background:var(--line)}
.timeline li:first-child::before{display:none}
.timeline li.done{color:var(--ink)}
.timeline li.done span,.timeline li.done::before{background:var(--ok)}
.order-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.order-meta div{background:var(--bg-soft);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column}
.order-meta small{color:var(--muted)}
.totals{max-width:360px;margin-right:auto;display:flex;flex-direction:column;gap:8px;margin-top:14px}

/* Footer */
.features{background:var(--bg-soft);padding:28px 0;margin-top:30px}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feature{display:flex;gap:12px;align-items:center}
.feature svg{width:34px;height:34px;color:var(--primary);flex:0 0 auto}
.feature b{display:block;font-size:15px}
.feature span{font-size:13px;color:var(--muted)}
.site-footer{background:#1f1a1d;color:#e9e3e6;padding:36px 0 90px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}
.site-footer h4{color:#fff;margin:0 0 12px;font-size:16px}
.site-footer a{display:block;color:#bdb3b8;font-size:14px;padding:3px 0}
.site-footer a:hover{color:#fff}
.site-footer .muted{color:#a89ea3}
.social{display:flex;gap:14px;flex-wrap:wrap}
.copy{border-top:1px solid #3a3237;margin-top:24px;padding-top:16px;font-size:13px;color:#a89ea3}
.bottom-nav{display:none}
.wa-float{position:fixed;left:18px;bottom:22px;width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.2);z-index:60}
.wa-float svg{width:28px;height:28px}
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,40px);background:var(--ink);color:#fff;padding:12px 22px;border-radius:12px;font-weight:500;opacity:0;pointer-events:none;transition:.25s;z-index:200;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--sale)}
.toast a{text-decoration:underline;margin-right:10px;font-weight:700}

/* Responsive */
@media(max-width:1000px){
  .product-page{grid-template-columns:1fr;gap:20px}
  .cart-layout,.checkout-layout{grid-template-columns:1fr}
  .summary{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}
  .features-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  body{font-size:14.5px}
  .menu-toggle{display:inline-flex}
  .main-nav{display:none}
  .header-row{flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:10px;gap:6px}
  .logo{flex:1;font-size:21px;text-align:center}
  .search{order:5;flex-basis:100%;max-width:none}
  .hero-slider{aspect-ratio:16/9;border-radius:16px}
  .cat-circles{justify-content:flex-start}
  .cat-circle{min-width:76px;font-size:13px}
  .cat-circle .circle{width:70px;height:70px;font-size:24px}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .slider{grid-auto-columns:46%;gap:10px}
  .card-title{font-size:13.5px}
  .price{font-size:15px}
  .card-body{padding:10px 10px 4px}
  .card-foot{padding:0 10px 10px}
  .shop-layout{grid-template-columns:1fr}
  .filter-toggle{display:inline-flex}
  .filters{display:none;position:fixed;inset:0;z-index:100;border-radius:0;overflow-y:auto;top:0}
  .filters.open{display:block}
  .mobile-only{display:flex;margin:-16px -16px 12px}
  .cart-line{grid-template-columns:70px 1fr auto;grid-template-areas:"img info rm" "img qty total"}
  .cart-line>a{grid-area:img}
  .cart-line img{width:70px;height:70px}
  .cl-info{grid-area:info}
  .cart-line .qty{grid-area:qty;justify-self:start}
  .cl-total{grid-area:total}
  .remove{grid-area:rm}
  .form-grid{grid-template-columns:1fr}
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);z-index:50;padding:6px 0 max(6px,env(safe-area-inset-bottom))}
  .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;font-size:11.5px;gap:2px;color:var(--muted)}
  .bottom-nav a:hover{color:var(--primary)}
  .wa-float{bottom:80px;width:48px;height:48px}
  .toast{bottom:84px}
  .features-grid{gap:14px}
  .feature svg{width:28px;height:28px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .table{font-size:13px}
  .timeline li{font-size:11.5px}
}

/* ================= HOME (modern) ================= */
.home-hero{padding-top:18px}
.hero-grid{display:grid;grid-template-columns:1fr 330px;gap:16px}
.hero-grid.single{grid-template-columns:1fr}
.home-hero .hero-slider{aspect-ratio:auto;min-height:0;height:420px;border-radius:24px;background:#2a1822}
.hero-slide.tone-0{background:radial-gradient(120% 140% at 85% 10%,color-mix(in srgb,var(--primary) 55%,#f3a6c1) 0%,var(--primary) 55%,color-mix(in srgb,var(--primary) 60%,#000) 100%)}
.hero-slide.tone-1{background:radial-gradient(120% 140% at 85% 10%,#3b2a4f 0%,#231a33 60%,#150f1f 100%)}
.hero-slide.tone-2{background:radial-gradient(120% 140% at 85% 10%,#f6d6c6 0%,#d99a86 55%,#9c5a4a 100%)}
.hero-slide.has-img{background:#222}
.hero-slide.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to left,rgba(0,0,0,.55),rgba(0,0,0,0) 65%)}
.hero-slide .hero-text{z-index:2;padding:0 7%}
.hero-slide.active .hero-text>*{animation:rise .7s both}
.hero-slide.active .hero-text>*:nth-child(2){animation-delay:.08s}
.hero-slide.active .hero-text>*:nth-child(3){animation-delay:.16s}
.hero-slide.active .hero-text>*:nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.5px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);padding:5px 14px;border-radius:999px;margin-bottom:14px}
.home-hero .hero-text h1{font-size:clamp(28px,4vw,52px);font-weight:800;line-height:1.15;margin:0 0 12px}
.hero-deco{position:absolute;inset:0;overflow:hidden}
.hero-deco::before,.hero-deco::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.1)}
.hero-deco::before{width:380px;height:380px;left:-60px;top:-80px}
.hero-deco::after{width:240px;height:240px;left:170px;bottom:-110px;background:rgba(255,255,255,.07)}
.hero-side{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.promo-tile{position:relative;border-radius:22px;overflow:hidden;display:flex;align-items:center;padding:20px;gap:10px;transition:.25s}
.promo-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.promo-tile>div{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;max-width:58%}
.promo-tile small{font-size:12.5px;font-weight:700;opacity:.8}
.promo-tile b{font-size:21px;line-height:1.3;font-weight:800}
.promo-link{font-size:13.5px;font-weight:700;margin-top:6px}
.promo-tile img{position:absolute;left:-10px;bottom:-10px;width:52%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:18px;transform:rotate(-6deg);box-shadow:0 10px 30px rgba(0,0,0,.15);transition:.3s}
.promo-tile:hover img{transform:rotate(-2deg) scale(1.04)}
.promo-sale{background:linear-gradient(135deg,#ffe3ea,#ffc9d7);color:#8c1d3e}
.promo-new{background:linear-gradient(135deg,#efe9ff,#dcd2fb);color:#3f2a86}

.usp{padding:18px 0 4px}
.usp-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.usp-row>div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;background:var(--bg-soft);border-radius:16px;padding:14px 16px}
.usp-ic{grid-row:1/3;width:44px;height:44px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:21px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.usp-row b{font-size:14.5px}
.usp-row small{color:var(--muted);font-size:12.5px}

.stories{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 8px;justify-content:center}
.stories::-webkit-scrollbar{display:none}
.story{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto;width:96px;text-align:center}
.ring{width:92px;height:92px;border-radius:50%;padding:3px;background:conic-gradient(from 200deg,var(--primary),#f28fb1,#f7c07c,var(--primary));transition:.25s}
.story:hover .ring{transform:scale(1.06) rotate(-4deg)}
.ring-in{display:flex;width:100%;height:100%;border-radius:50%;border:3px solid #fff;overflow:hidden;background:var(--primary-soft);align-items:center;justify-content:center}
.ring-in img{width:100%;height:100%;object-fit:cover}
.ring-in em{font-style:normal;font-size:30px;font-weight:800;color:var(--primary)}
.story-name{font-size:13.5px;font-weight:700;line-height:1.3}

.deals-box{border-radius:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 92%,#000),color-mix(in srgb,var(--primary) 70%,#e46b93));padding:26px;display:grid;grid-template-columns:250px 1fr;gap:22px;align-items:center;overflow:hidden}
.deals-head{color:#fff}
.deals-head h2{font-size:28px;margin:10px 0 4px;line-height:1.2}
.deals-head p{margin:0 0 10px;opacity:.85;font-size:14px}
.pill{display:inline-block;background:#fff;color:var(--primary);font-weight:800;font-size:12.5px;padding:5px 12px;border-radius:999px}
.pill.light{background:rgba(255,255,255,.18);color:#fff}
.countdown{display:flex;gap:8px;margin-bottom:18px}
.countdown span{background:rgba(255,255,255,.14);border-radius:12px;min-width:62px;padding:8px 6px;display:flex;flex-direction:column;align-items:center}
.countdown b{font-size:24px;font-variant-numeric:tabular-nums;line-height:1.1}
.countdown small{font-size:11px;opacity:.8}
.rail-wrap{position:relative;min-width:0}
.deals .slider{padding-bottom:4px;scrollbar-width:none}
.deals .slider::-webkit-scrollbar{display:none}
.deals .card{border:0}
.rail-btn{position:absolute;top:40%;z-index:3;width:42px;height:42px;border-radius:50%;border:0;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.18);font-size:26px;line-height:1;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center}
.rail-btn.prev{right:-12px}
.rail-btn.next{left:-12px}

.bento{display:grid;gap:14px;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px}
.bento-tile{position:relative;border-radius:22px;overflow:hidden;background:var(--bg-soft);display:flex;align-items:flex-end;padding:18px;isolation:isolate}
.bento-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s}
.bento-tile:hover img{transform:scale(1.06)}
.bento-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(20,8,14,.72),rgba(20,8,14,0) 60%)}
.bento-text{color:#fff;display:flex;flex-direction:column;gap:2px}
.bento-text b{font-size:20px;font-weight:800}
.bento-text small{opacity:.85}
.bento-subs{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.bento-subs em{font-style:normal;font-size:11.5px;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);padding:2px 9px;border-radius:999px}
.bento-go{position:absolute;top:14px;left:14px;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;transition:.25s}
.bento-tile:hover .bento-go{background:var(--primary);color:#fff}
.bento.n2 .t0,.bento.n2 .t1{grid-column:span 2;grid-row:span 2}
.bento.n3 .t0{grid-column:span 2;grid-row:span 2}.bento.n3 .t1,.bento.n3 .t2{grid-column:span 2}
.bento.n4 .t0{grid-column:span 2;grid-row:span 2}.bento.n4 .t1{grid-column:span 2}
.bento.n5 .t0{grid-column:span 2;grid-row:span 2}

.tab-head{display:flex;justify-content:center;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.tab-head button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 22px;font-weight:700;cursor:pointer;font-size:15px;transition:.2s}
.tab-head button.active{background:var(--ink);border-color:var(--ink);color:#fff}
.tab-panel{animation:fade .35s}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}
.grid-5{grid-template-columns:repeat(5,1fr)}
.more-row{margin-top:22px}

.rewards{border-radius:28px;padding:34px 38px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#fff;background:linear-gradient(120deg,#2b1a3d,#5a2f63 55%,var(--primary));position:relative;overflow:hidden}
.rewards::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;left:-80px;top:-120px;background:rgba(255,255,255,.08)}
.rewards h2{font-size:28px;margin:10px 0 6px}
.rewards p{margin:0;opacity:.9;max-width:560px}
.rewards>*{position:relative}

.marquee{overflow:hidden;mask-image:linear-gradient(to left,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(to left,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marquee 40s linear infinite;padding:4px 0}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee.static{mask-image:none;-webkit-mask-image:none}
.marquee.static .marquee-track{animation:none;margin:0 auto}
@keyframes marquee{to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}.hero-slide.active .hero-text>*{animation:none}}

/* card polish */
.card{border-radius:18px}
.card-img{margin:8px 8px 0;border-radius:14px}
.card-foot .btn{border-radius:12px}
.site-header.scrolled{box-shadow:0 6px 20px rgba(40,20,30,.07)}

@media(max-width:1100px){
  .hero-grid{grid-template-columns:1fr}
  .hero-side{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .promo-tile{min-height:150px}
  .grid-5{grid-template-columns:repeat(4,1fr)}
  .usp-row{grid-template-columns:repeat(2,1fr)}
  .deals-box{grid-template-columns:1fr}
}
@media(max-width:820px){
  .home-hero{padding-top:12px}
  .home-hero .hero-slider{height:auto;aspect-ratio:4/3.4;border-radius:20px}
  .home-hero .hero-text h1{font-size:28px}
  .home-hero .hero-text p{font-size:14.5px}
  .hero-side{gap:10px}
  .promo-tile{padding:14px;min-height:130px;border-radius:18px}
  .promo-tile>div{max-width:100%}
  .promo-tile b{font-size:16px}
  .promo-tile img{width:46%;opacity:.35;left:-14px;bottom:-14px}
  .usp{padding-top:12px}
  .usp-row{display:flex;overflow-x:auto;scrollbar-width:none;gap:10px}
  .usp-row>div{flex:0 0 auto;min-width:200px}
  .stories{justify-content:flex-start;gap:14px}
  .story{width:78px}
  .ring{width:74px;height:74px}
  .story-name{font-size:12.5px}
  .deals-box{padding:18px 14px;border-radius:22px;gap:14px}
  .deals-head h2{font-size:22px}
  .countdown span{min-width:54px}
  .countdown b{font-size:20px}
  .rail-btn{display:none}
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:10px}
  .bento .bento-tile{grid-column:auto!important;grid-row:auto!important}
  .bento .t0{grid-column:span 2!important}
  .bento-tile{border-radius:18px;padding:14px}
  .bento-text b{font-size:16px}
  .bento-subs{display:none}
  .grid-5{grid-template-columns:repeat(2,1fr)}
  .tab-head{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tab-head button{flex:0 0 auto;padding:8px 16px;font-size:14px}
  .rewards{flex-direction:column;align-items:flex-start;padding:24px 20px;border-radius:22px}
  .rewards h2{font-size:22px}
  .card-img{margin:6px 6px 0}
}