@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#0F0F10;
  --bg-2:#2A2A2D;
  --bg-3:#1A1A1C;
  --text:#F5F5F2;
  --muted:#8A847E;
  --line:#2A2A2D;
  --accent:#B8B1A9;
  --accent-2:#A09890;
  --green:#25D366;
  --danger:#c4342d;
  --shadow:0 6px 24px rgba(0,0,0,.5);
  --shadow-2:0 12px 40px rgba(0,0,0,.7);
  --r:10px;
  --hdr-h:60px;
  --nav-h:62px;
  --maxw:1280px;
  --t:.25s cubic-bezier(.22,.61,.36,1);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.4;
  padding-bottom:var(--nav-h);
}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;background:none;border:0;color:inherit}
a{color:inherit;text-decoration:none}
input,textarea,select{font-family:inherit;font-size:16px}

/* ---------- Header ---------- */
.hdr{
  position:sticky;top:0;z-index:50;
  height:var(--hdr-h);
  background:var(--bg);
  border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 10px;
}
.hdr .icon-btn{width:40px;height:40px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--text)}
.hdr .icon-btn svg{width:22px;height:22px}
.hdr .hdr-right{justify-self:end;display:flex;gap:4px}
.brand{
  justify-self:center;height:100%;
  display:flex;align-items:center;justify-content:center;gap:10px;
  color:var(--text);
  padding:4px 6px;
  transition:opacity .2s ease;
}
.brand:hover{opacity:.85}
.brand-mark{
  width:30px;height:36px;flex-shrink:0;
  color:var(--accent, #B8B1A9);
}
.brand-text{
  display:flex;flex-direction:column;align-items:center;line-height:1;
}
.brand-name{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  font-size:28px;
  letter-spacing:.32em;
  /* compensate optical centering caused by letter-spacing */
  padding-left:.32em;
  background:linear-gradient(180deg, #F5F5F2 0%, #B8B1A9 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.brand-sub{
  font-family:'Inter', sans-serif;
  font-weight:500;
  font-size:9px;
  letter-spacing:.42em;
  padding-left:.42em;
  color:var(--muted, #B8B1A9);
  margin-top:3px;
}
@media(min-width:768px){
  .brand{gap:12px}
  .brand-mark{width:34px;height:42px}
  .brand-name{font-size:34px}
  .brand-sub{font-size:10px;margin-top:4px}
}
.cart-btn{position:relative}
.badge{
  position:absolute;top:4px;right:4px;
  background:var(--accent);color:var(--bg);
  font-size:11px;font-weight:700;
  min-width:18px;height:18px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
  box-shadow:0 0 0 2px var(--bg);
}

/* ---------- View shell ---------- */
main#view{max-width:var(--maxw);margin:0 auto;padding:0 12px}
.section{padding:24px 0}
.section-title{
  font-family:var(--serif);
  font-size:22px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;color:var(--text);
  text-align:center;margin:0 0 14px;
}
.section-title::after{
  content:"";display:block;width:42px;height:1px;background:var(--accent);
  margin:10px auto 0;
}
@media(min-width:768px){.section-title{font-size:26px}}

/* ---------- Offers carousel ---------- */
.offers{margin-top:8px}
.carousel{
  position:relative;
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.carousel::-webkit-scrollbar{display:none}
.carousel > *{scroll-snap-align:start;flex:0 0 auto}
.offers .slide{width:100%;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.offers .slide img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.dots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.dots span{width:7px;height:7px;border-radius:50%;background:var(--bg-2);transition:var(--t)}
.dots span.on{background:var(--accent);width:18px;border-radius:4px}

/* ---------- Collection ---------- */
.collections{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.col-card{
  position:relative;border-radius:14px;overflow:hidden;
  aspect-ratio:3/4;box-shadow:var(--shadow);
}
.col-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.col-card:hover img{transform:scale(1.05)}
.col-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.82) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,0) 70%);
  pointer-events:none;
}
.col-card .label{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  background:rgba(15,15,16,.75);
  color:var(--text);
  border:1px solid var(--accent);
  font-family:var(--serif);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 18px;font-size:12px;border-radius:2px;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
  white-space:nowrap;
  transition:var(--t);
}
.col-card:hover .label{background:var(--accent);color:var(--bg);border-color:var(--accent)}
@media(min-width:768px){.col-card .label{font-size:14px;padding:10px 22px}}

/* ---------- Product card / grid / carousel ---------- */
.p-row{
  display:flex;overflow-x:auto;gap:10px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding:4px 2px 6px;
}
.p-row::-webkit-scrollbar{display:none}
.p-row .pcard{flex:0 0 46%;scroll-snap-align:start}
@media(min-width:560px){.p-row .pcard{flex-basis:32%}}
@media(min-width:900px){.p-row .pcard{flex-basis:23%}}

.p-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.p-grid[data-cols="1"]{grid-template-columns:1fr}
.p-grid[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
.p-grid[data-cols="3"]{grid-template-columns:repeat(3,1fr)}

.cols-toggle{
  display:inline-flex;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;overflow:hidden;
}
.cols-toggle button{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);border-right:1px solid var(--line);
}
.cols-toggle button:last-child{border-right:0}
.cols-toggle button.on{background:var(--accent);color:var(--bg)}
.cols-toggle svg{width:16px;height:16px}

.pcard{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:var(--t);
  position:relative;
}
.pcard:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.pcard.is-sold .ph img{opacity:.45;filter:saturate(.4)}
.pcard.is-sold .body{opacity:.6}
.sold-badge{
  position:absolute;top:8px;left:8px;z-index:2;
  background:var(--danger);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 9px;border-radius:4px;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.pcard .ph{position:relative;overflow:hidden;background:#1A1A1C;aspect-ratio:1/1}
.pcard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s ease, transform .5s ease}
.pcard .ph img.alt{opacity:0}
.pcard.alt-on .ph img.main{opacity:0}
.pcard.alt-on .ph img.alt{opacity:1}
.pcard .body{padding:10px 10px 12px;display:flex;flex-direction:column;gap:4px}
.pcard .pname{
  font-family:var(--serif);
  font-size:14px;font-weight:600;color:var(--text);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pcard .pprice{font-size:14px;font-weight:700;color:var(--accent)}
.stars{display:inline-flex;gap:1px;color:var(--accent);font-size:12px}
.stars svg{width:13px;height:13px;fill:currentColor}

/* ---------- Reviews screenshot carousel ---------- */
.reviews-shots-wrap{position:relative}
.reviews-shots{
  gap:0;
  padding:4px 0 6px;
  scroll-snap-type:x mandatory;
}
.reviews-shots .slide{
  width:100%;flex:0 0 100%;
  border-radius:14px;overflow:hidden;background:var(--bg-2);
  border:1px solid var(--line);box-shadow:var(--shadow);
  scroll-snap-align:center;
  cursor:zoom-in;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:9/12;
  max-height:560px;
}
.reviews-shots .slide img{width:auto;max-width:100%;height:100%;object-fit:contain;display:block}
@media(min-width:768px){
  .reviews-shots-wrap{max-width:520px;margin:0 auto}
  .reviews-shots .slide{aspect-ratio:9/14;max-height:640px}
}

/* Arrows for reviews carousel */
.rs-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;
  background:rgba(42,42,45,.9);color:var(--text);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);z-index:2;font-size:22px;font-weight:700;
  border:1px solid var(--line);
}
.rs-nav.prev{left:6px}
.rs-nav.next{right:6px}
@media(min-width:768px){.rs-nav{width:42px;height:42px}}

/* Lightbox for review screenshots */
.lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,.95);
  z-index:120;display:flex;align-items:center;justify-content:center;padding:18px;
  opacity:0;visibility:hidden;transition:opacity .25s ease, visibility .25s ease;
}
.lightbox.on{opacity:1;visibility:visible}
.lightbox img{max-width:96vw;max-height:92vh;border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.8);transform:scale(.96);transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.lightbox.on img{transform:scale(1)}
.lightbox .lb-close{position:absolute;top:14px;right:18px;color:var(--text);font-size:36px;line-height:1}
.lightbox .lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;background:rgba(42,42,45,.8);color:var(--text);
  display:flex;align-items:center;justify-content:center;font-size:26px;
}
.lightbox .lb-prev{left:14px}
.lightbox .lb-next{right:14px}

/* ---------- Page header (All Products / Category) ---------- */
.page-title{
  font-family:var(--serif);
  font-size:24px;letter-spacing:.08em;text-transform:uppercase;margin:14px 0 4px;color:var(--text);
  text-align:center;font-weight:600;
}
.page-title::after{
  content:"";display:block;width:42px;height:1px;background:var(--accent);
  margin:8px auto 0;
}
.page-toolbar{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:10px 0 12px;
}
.tool-btn{
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:8px 12px;font-size:13px;font-weight:600;color:var(--text);
  display:inline-flex;align-items:center;gap:6px;
}
.tool-btn svg{width:14px;height:14px}

/* ---------- Drawers / Sheets / Modals ---------- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:80;opacity:0;transition:opacity var(--t);}
.overlay.on{opacity:1}
.drawer{
  position:fixed;top:0;bottom:0;width:88%;max-width:380px;background:var(--bg-3);z-index:90;
  display:flex;flex-direction:column;transition:transform var(--t);box-shadow:var(--shadow-2);
}
.drawer.drawer-left{left:0;transform:translateX(-100%)}
.drawer.drawer-right{right:0;transform:translateX(100%)}
.drawer.wide{max-width:420px}
.drawer.on{transform:translateX(0)}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.drawer header h3{
  margin:0;font-family:var(--serif);font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);font-weight:600;
}
.drawer .x,.sheet .x,.modal .x{
  background:none;border:0;font-size:28px;line-height:1;color:var(--muted);padding:0 4px;
}
.menu-list{display:flex;flex-direction:column;padding:8px 4px}
.menu-list a{
  padding:14px 16px;border-bottom:1px solid var(--line);
  font-family:var(--serif);font-weight:600;letter-spacing:.06em;font-size:15px;color:var(--text);
}
.menu-list a:last-child{border-bottom:0}
.menu-list a:hover{color:var(--accent)}

.menu-social{
  margin-top:auto;padding:18px 16px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;
}
.menu-social .ms-label{
  font-family:var(--sans, 'Inter', sans-serif);font-size:10px;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;color:var(--muted);
}
.menu-social .ms-icons{display:flex;gap:10px}
.menu-social .ms-icon{
  width:40px;height:40px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text);background:var(--bg-2,#1a1a1c);
  border:1px solid var(--line);
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.menu-social .ms-icon svg{width:20px;height:20px;display:block}
.menu-social .ms-icon:hover{transform:translateY(-2px)}
.menu-social .ms-ig:hover{
  color:#fff;border-color:transparent;
  background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}
.menu-social .ms-fb:hover{
  color:#fff;border-color:transparent;background:#1877F2;
}

/* sheet (sort) */
.sheet{
  position:fixed;left:0;right:0;bottom:0;background:var(--bg-3);z-index:90;
  border-radius:16px 16px 0 0;transform:translateY(100%);transition:transform var(--t);
  box-shadow:var(--shadow-2);max-height:80vh;display:flex;flex-direction:column;
}
.sheet.on{transform:translateY(0)}
.sheet header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.sort-list{list-style:none;margin:0;padding:6px 0}
.sort-list li{padding:14px 18px;border-bottom:1px solid var(--line);font-weight:500;cursor:pointer;color:var(--text)}
.sort-list li:last-child{border-bottom:0}
.sort-list li.on{color:var(--accent);font-weight:700}
.sort-list li.on::after{content:"✓";float:right}

/* modal */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:14px;
  opacity:0;visibility:hidden;
  transition:opacity .3s cubic-bezier(.22,.61,.36,1), visibility .3s ease;
}
.modal.on{opacity:1;visibility:visible}
.modal-card{
  background:var(--bg-3);border-radius:14px;max-width:900px;width:100%;
  max-height:92vh;overflow:auto;position:relative;box-shadow:var(--shadow-2);
  border:1px solid var(--line);
  transform:translateY(24px) scale(.97);
  opacity:0;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
.modal.on .modal-card{transform:translateY(0) scale(1);opacity:1}

/* ---------- Search ---------- */
.search-body{padding:12px 14px;display:flex;flex-direction:column;gap:10px;flex:1;overflow:auto}
#searchInput{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;outline:none;
  background:var(--bg-2);color:var(--text);
}
#searchInput::placeholder{color:var(--muted)}
#searchInput:focus{border-color:var(--accent)}
.search-results{display:flex;flex-direction:column;gap:8px}
.sr-item{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--bg-2)}
.sr-item img{width:56px;height:56px;object-fit:cover;border-radius:8px;background:var(--bg)}
.sr-item .meta{flex:1;min-width:0}
.sr-item .nm{font-weight:600;font-size:14px;color:var(--text);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.sr-item .pr{font-size:13px;color:var(--accent);font-weight:700}
.sr-item .av{font-size:11px;color:var(--muted)}
.sr-empty{color:var(--muted);padding:10px;text-align:center;font-size:14px}

/* ---------- Cart ---------- */
.cart-ship-header{background:var(--bg-3);border-bottom:1px solid var(--line)}
.cart-ship-header:empty{display:none}
.cart-ship-header .csh.promo{
  padding:10px 12px;
  background:linear-gradient(135deg, rgba(74,222,128,.10), rgba(184,177,169,.06));
  border-left:3px solid #4ade80;
  display:flex;flex-direction:column;gap:6px;
}
.cart-ship-header .csh.promo .csh-row{align-items:center}
.cart-ship-header .csh.promo .csh-note{
  font-size:11px;color:var(--muted);letter-spacing:.02em;line-height:1.4;
}
.cart-ship-header .csh.promo .val.pulse{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#0F0F10;background:#4ade80;padding:3px 8px;border-radius:10px;
  animation:promoPulse 2s ease-in-out infinite;
}
@keyframes promoPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}
  50%{box-shadow:0 0 0 6px rgba(74,222,128,0)}
}
.cart-ship-header .csh{
  padding:7px 14px 9px;
  display:flex;flex-direction:column;gap:4px;
  font-size:11.5px;color:var(--text);
}
.cart-ship-header .csh-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cart-ship-header .csh-row .lbl{font-weight:700;display:flex;align-items:center;gap:5px}
.cart-ship-header .csh-row .lbl .ic{width:14px;height:14px;color:var(--accent)}
.cart-ship-header .csh-row .lbl .ic svg{width:100%;height:100%;fill:currentColor}
.cart-ship-header .csh-row .val{font-weight:800;font-size:11px;color:var(--muted)}
.cart-ship-header .csh.unlocked .csh-row .val{color:#4ade80}
.cart-ship-header .csh.unlocked .csh-row .lbl{color:#4ade80}
.cart-ship-header .bar{background:var(--bg-2);height:3px;border-radius:2px;overflow:hidden}
.cart-ship-header .fill{background:var(--accent);height:100%;width:0;transition:width .4s ease}
.cart-ship-header .csh.unlocked .fill{background:#4ade80}

.cart-body{flex:1;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.cart-empty{text-align:center;padding:30px 10px;color:var(--muted)}
.cart-empty .btn{margin-top:14px}
.ci{display:flex;gap:10px;border-bottom:1px solid var(--line);padding-bottom:10px}
.ci img{width:74px;height:74px;border-radius:8px;object-fit:cover;background:var(--bg)}
.ci .meta{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.ci .nm{font-weight:600;font-size:14px;color:var(--text);line-height:1.3}
.ci .pr{font-weight:700;color:var(--accent)}
.ci .row{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.qty button{width:28px;height:28px;font-weight:700;color:var(--text)}
.qty span{min-width:24px;text-align:center;font-size:13px}
.ci .rm{color:var(--danger);font-size:12px;text-decoration:underline}
.cart-foot{border-top:1px solid var(--line);padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;background:var(--bg-3)}
.row-bw{display:flex;justify-content:space-between;align-items:center}
.subtotal{font-weight:700;font-size:16px;color:var(--text)}
.ship-bar{background:var(--bg-2);border-radius:8px;padding:10px;font-size:12px;color:var(--text)}
.ship-bar .bar{background:var(--bg);height:6px;border-radius:4px;overflow:hidden;margin-top:6px}
.ship-bar .fill{background:var(--accent);height:100%;width:0;transition:width .4s ease}

/* Offer progress bars (cart) */
.offer-stack{display:flex;flex-direction:column;gap:5px}
.offer-bar{
  position:relative;overflow:hidden;
  background:var(--bg-2);border-radius:7px;padding:6px 10px 7px;font-size:11.5px;color:var(--text);
  border:1px solid transparent;transition:var(--t);
}
.offer-bar.active{
  background:#1E1E20;border-color:var(--accent);
  box-shadow:0 2px 12px rgba(184,177,169,.12);
}
.offer-bar.active::before{
  content:"";position:absolute;left:-30%;top:-50%;width:50%;height:200%;
  background:linear-gradient(120deg, transparent, rgba(245,245,242,.06), transparent);
  transform:skewX(-18deg);pointer-events:none;
  animation:dealSheen 3s ease-in-out infinite;
}
@keyframes dealSheen{
  0%,100%{left:-30%}
  55%,100%{left:130%}
}
.offer-bar .top{display:flex;justify-content:space-between;align-items:center;gap:8px;position:relative;z-index:1}
.offer-bar .nm{font-weight:700;line-height:1.2;display:flex;align-items:center;gap:5px;font-size:12px}
.offer-bar .nm .check{
  width:14px;height:14px;border-radius:50%;background:var(--accent);color:var(--bg);
  display:none;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0;
}
.offer-bar.active .nm .check{display:inline-flex}
.offer-bar .price{font-weight:800;color:var(--text);font-size:12.5px;white-space:nowrap}
.offer-bar .msg{font-size:11px;color:var(--muted);margin-top:2px;position:relative;z-index:1}
.offer-bar.active .msg{color:#4ade80;font-weight:700}
.offer-bar .bar{background:var(--bg);height:4px;border-radius:3px;overflow:hidden;margin-top:4px;position:relative;z-index:1}
.offer-bar .fill{background:var(--accent);height:100%;width:0;transition:width .4s ease}
.offer-bar.active .fill{background:#4ade80}
.offer-bar .ship-tag{
  display:inline-block;background:rgba(74,222,128,.15);color:#4ade80;
  font-size:9.5px;font-weight:800;padding:1px 5px;border-radius:3px;margin-left:3px;letter-spacing:.04em;
}

.offer-savings{
  background:rgba(74,222,128,.1);color:#4ade80;font-weight:700;font-size:12px;
  padding:7px 10px;border-radius:8px;text-align:center;
}
.cart-sub-strike{text-decoration:line-through;color:var(--muted);font-weight:500;font-size:13px;margin-right:6px}

/* ---- Active-offer banner (cart) ---- */
.deal-banner{
  position:relative;
  background:var(--bg-2);
  border:1px solid var(--accent);
  border-radius:12px;
  padding:14px 14px 12px;
  box-shadow:0 4px 14px rgba(184,177,169,.12);
  overflow:hidden;
  animation:dealPop .35s cubic-bezier(.22,.8,.36,1.2);
}
@keyframes dealPop{
  0%{opacity:0;transform:translateY(6px) scale(.96)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.deal-banner::before{
  content:"";position:absolute;left:-30%;top:-50%;width:60%;height:200%;
  background:linear-gradient(120deg, transparent, rgba(245,245,242,.04), transparent);
  transform:skewX(-18deg);
  animation:dealSheen 3.6s ease-in-out infinite;
}
.deal-banner .db-head{
  display:flex;align-items:center;gap:8px;margin-bottom:10px;position:relative;z-index:1;
}
.deal-banner .db-icon{
  width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--bg);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;
  flex-shrink:0;
}
.deal-banner .db-icon svg{width:16px;height:16px;fill:currentColor}
.deal-banner .db-titles{flex:1;min-width:0}
.deal-banner .db-eyebrow{
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);line-height:1;
}
.deal-banner .db-name{
  font-size:14px;font-weight:800;color:var(--text);line-height:1.2;margin-top:3px;
}
.deal-banner .db-ship-tag{
  display:inline-block;background:rgba(74,222,128,.15);color:#4ade80;
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 7px;border-radius:4px;margin-top:5px;
}
.deal-banner .db-prices{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  position:relative;z-index:1;
}
.deal-banner .db-pcol{display:flex;flex-direction:column;gap:2px}
.deal-banner .db-plabel{
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.deal-banner .db-old{
  font-size:14px;color:var(--muted);text-decoration:line-through;font-weight:600;line-height:1.2;
}
.deal-banner .db-new{
  font-size:20px;color:var(--text);font-weight:800;line-height:1.1;
}
.deal-banner .db-save{
  position:relative;z-index:1;
  margin-top:10px;
  background:rgba(74,222,128,.15);color:#4ade80;
  font-weight:800;font-size:12.5px;
  padding:8px 12px;border-radius:8px;
  text-align:center;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.deal-banner .db-save svg{width:14px;height:14px;fill:currentColor}
.cod-note{font-size:12px;color:var(--muted);text-align:center}

/* ---------- Buttons ---------- */
.btn{
  border-radius:4px;font-weight:700;padding:12px 16px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  transition:var(--t);border:1px solid transparent;
}
.btn-primary{background:var(--text);color:var(--bg)}
.btn-primary:hover{background:var(--accent);color:var(--bg)}
.btn-primary:disabled{background:var(--bg-2);color:var(--muted);cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-gold{background:var(--accent);color:var(--bg)}
.btn-gold:hover{background:var(--accent-2)}
.btn-block{width:100%}

/* ---------- Quick view modal ---------- */
.qv{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:760px){.qv{grid-template-columns:1.05fr 1fr}}
.qv .imgs{position:relative;background:#1A1A1C}
.qv .imgs .big{aspect-ratio:1/1;width:100%;object-fit:cover}
.qv .imgs .thumbs{display:flex;gap:6px;padding:8px;justify-content:center}
.qv .imgs .thumbs img{width:54px;height:54px;border-radius:6px;object-fit:cover;border:2px solid transparent;cursor:pointer;background:var(--bg)}
.qv .imgs .thumbs img.on{border-color:var(--accent)}
.qv .info{padding:18px 18px 22px;display:flex;flex-direction:column;gap:10px;background:var(--bg-3)}
.qv h2{margin:0;font-family:var(--serif);font-size:22px;color:var(--text);letter-spacing:.04em;font-weight:600}
.qv .price{font-size:20px;font-weight:800;color:var(--accent)}
.qv .desc{color:var(--muted);font-size:14px;line-height:1.5}
.qv .av-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 10px;border-radius:99px;width:max-content}
.qv .av-in{background:rgba(74,222,128,.12);color:#4ade80}
.qv .av-out{background:rgba(196,52,45,.12);color:var(--danger)}
.qv .modal-x{position:absolute;top:6px;right:8px;background:rgba(42,42,45,.9);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);z-index:2;font-size:24px;color:var(--text)}
.qv-actions{display:flex;gap:10px;align-items:center;margin-top:6px}

/* ---------- Filter ---------- */
.filter-body{padding:14px 16px;flex:1;overflow:auto;display:flex;flex-direction:column;gap:18px}
.fgroup h4{
  margin:0 0 8px;font-family:var(--serif);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--text);font-weight:600;
}
.fgroup label{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:14px;color:var(--text)}
.price-row{display:flex;justify-content:space-between;font-weight:600;color:var(--text);font-size:14px}
input[type="range"]{width:100%;accent-color:var(--accent)}
.fbtns{display:flex;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.fbtns .btn{flex:1}

/* ---------- Reviews drawer ---------- */
.reviews-body{padding:6px 14px 14px;flex:1;overflow:auto;display:flex;flex-direction:column}
.rev{padding:14px 4px;border-bottom:1px solid var(--line);display:flex;gap:12px}
.rev:last-child{border-bottom:0}
.rev .av{
  width:38px;height:38px;border-radius:50%;flex:0 0 38px;
  background:var(--bg-2);color:var(--accent);font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;text-transform:uppercase;
  letter-spacing:.02em;border:1px solid var(--accent);
}
.rev .rcol{flex:1;min-width:0}
.rev .nm{font-weight:700;font-size:14px;color:var(--text);line-height:1.2}
.rev .stars-row{display:flex;align-items:center;gap:6px;margin-top:3px;margin-bottom:6px}
.rev .stars-row .stars{color:#F5C518;filter:drop-shadow(0 0 2px rgba(245,197,24,.35))}
.rev .stars-row .stars svg{width:14px;height:14px}
.rev .stars-row .verified{font-size:11px;color:#4ade80;font-weight:700}
.rev .cm{font-size:14px;color:var(--muted);line-height:1.55}
.rev .ttl{font-weight:700;color:var(--text);font-size:13.5px;margin-bottom:2px}

/* ---------- Floating buttons ---------- */
.fab-reviews{
  position:fixed;right:0;top:50%;
  transform:translateY(-50%);
  background:var(--bg-2);color:var(--accent);border:0;
  border:1px solid var(--accent);border-right:0;
  border-radius:10px 0 0 10px;
  padding:18px 10px;
  font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  z-index:40;
  box-shadow:-3px 0 14px rgba(0,0,0,.4);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:background var(--t), padding var(--t);
  cursor:pointer;
}
.fab-reviews:hover{background:var(--accent);color:var(--bg);padding-left:14px}
.fab-reviews svg{width:18px;height:18px;transform:none;fill:currentColor}
.fab-reviews span{
  writing-mode:vertical-rl;
  -webkit-writing-mode:vertical-rl;
  text-orientation:mixed;
  line-height:1;
}
@media(min-width:768px){
  .fab-reviews{padding:22px 11px;font-size:13px;letter-spacing:.22em}
  .fab-reviews svg{width:20px;height:20px}
}
.fab-wa{
  position:fixed;left:14px;right:auto;bottom:calc(var(--nav-h) + 14px);
  width:52px;height:52px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-2);z-index:40;
}
.fab-wa svg{width:30px;height:30px}
@media(min-width:768px){.fab-wa{bottom:24px}}

/* ---------- Bottom nav ---------- */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;height:var(--nav-h);background:var(--bg-3);
  border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:center;
  z-index:45;padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav a,.bottom-nav button{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--muted);font-size:11px;font-weight:600;
}
.bottom-nav svg{width:22px;height:22px}
.bottom-nav .on{color:var(--accent)}
@media(min-width:768px){.bottom-nav{display:none} body{padding-bottom:0}}

/* ---------- Checkout ---------- */
.co-card{max-width:560px;padding:18px}
.co-card h2{margin:0 0 10px;font-family:var(--serif);color:var(--text);font-weight:600}
.co-card .modal-x{position:absolute;top:6px;right:8px;background:rgba(42,42,45,.9);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);font-size:24px;color:var(--text)}
.co-form{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.co-form label{font-size:13px;font-weight:600;color:var(--muted)}
.co-form input,.co-form textarea{
  padding:11px 12px;border:1px solid var(--line);border-radius:4px;outline:none;
  background:var(--bg-2);color:var(--text);
}
.co-form input::placeholder,.co-form textarea::placeholder{color:var(--muted)}
.co-form input:focus,.co-form textarea:focus{border-color:var(--accent)}
.co-form .err{color:var(--danger);font-size:12px;min-height:14px}
.co-summary{background:var(--bg-2);border-radius:4px;padding:12px;font-size:13px;display:flex;flex-direction:column;gap:6px}
.co-summary .total{font-weight:800;font-size:16px;color:var(--text);margin-top:6px;border-top:1px dashed var(--line);padding-top:8px}
.co-items{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow:auto;margin-bottom:4px}
.co-item{display:flex;gap:10px;align-items:center;background:var(--bg-3);border-radius:4px;padding:6px 8px}
.co-item img{width:42px;height:42px;border-radius:4px;object-fit:cover;background:var(--bg)}
.co-item .ci-nm{flex:1;font-size:12.5px;font-weight:600;color:var(--text);line-height:1.3}
.co-item .ci-qty{font-size:12px;color:var(--muted)}
.co-item .ci-pr{font-size:13px;font-weight:700;color:var(--accent)}
.co-success{padding:30px 14px;text-align:center}
.co-success h3{font-family:var(--serif);color:var(--text);margin:0 0 8px;font-weight:600}
.co-success p{color:var(--muted)}

/* ---------- Empty states ---------- */
.empty{padding:40px 10px;text-align:center;color:var(--muted)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(var(--nav-h) + 80px);transform:translateX(-50%);
  background:var(--text);color:var(--bg);padding:10px 16px;border-radius:4px;font-size:13px;
  font-weight:600;letter-spacing:.04em;
  box-shadow:var(--shadow-2);z-index:200;opacity:0;transition:opacity .2s ease;
}
.toast.on{opacity:1}

/* ---------- Marquee (top offer bar) ---------- */
.marquee{
  background:var(--bg-2);
  color:var(--text);
  overflow:hidden;
  position:relative;
  height:32px;
  display:flex;align-items:center;
  border-bottom:1px solid var(--line);
}
.marquee-track{
  display:flex;
  white-space:nowrap;
  will-change:transform;
  animation:marquee 20s linear infinite;
  font-size:13px;font-weight:500;letter-spacing:.06em;
}
.marquee-track span{padding:0 18px;display:inline-flex;align-items:center;gap:18px}
.marquee-track .star{color:var(--accent);font-size:14px}
.marquee:hover .marquee-track{animation-play-state:paused}
@media(min-width:768px){.marquee{height:36px} .marquee-track{font-size:14px}}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ---------- About Us section ---------- */
.about-us{margin-top:8px}
.about-wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-items:center;
  background:linear-gradient(180deg, var(--bg-3) 0%, rgba(26,26,28,.5) 100%);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
}
.about-media{
  border-radius:10px;overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--bg-2);
}
.about-media picture,.about-media img{display:block;width:100%;height:auto}
.about-text{
  direction:rtl;text-align:right;
  font-family:var(--sans);
  color:var(--text);
  font-size:15px;line-height:1.85;
}
.about-text p{margin:0 0 12px}
.about-text p:last-child{margin-bottom:0;
  font-family:var(--serif);font-style:italic;font-size:17px;
  color:var(--accent);letter-spacing:.02em;
  padding-top:10px;border-top:1px solid var(--line);
}
@media(min-width:768px){
  .about-wrap{
    grid-template-columns:1fr 1.2fr;
    gap:28px;padding:26px;
  }
  .about-text{font-size:16px;line-height:1.9}
  .about-text p:last-child{font-size:19px}
}