/* ═══════════════════════════════════════════════════════════
   HARBWEAR™ — store components
   Chips · Drawer · Search · Product modal · Checkout · Loyalty
   ═══════════════════════════════════════════════════════════ */

body.ov-open{overflow:hidden}
.w-full{width:100%}
.btn.sm{padding:.62rem 1.2rem;font-size:.62rem}
.btn.sm:hover{transform:none}
button[hidden],[hidden]{display:none !important}

/* ── Category filter chips ─────────────────────────────── */
.cat-filter-row{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:2.2rem}
.cat-fchip{
  font-family:var(--font-head);font-weight:500;font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--smoke);
  border:1px solid rgba(255,255,255,.18);border-radius:99px;
  padding:.5rem 1rem;transition:all .3s;background:transparent;
}
.cat-fchip i{font-style:normal;opacity:.6;margin-left:.2rem;font-size:.58rem}
.cat-fchip:hover{border-color:var(--white);color:var(--white)}
.cat-fchip.active{background:var(--white);color:var(--black);border-color:var(--white)}

/* ── Product cards (store-rendered) ────────────────────── */
.pc-wish{
  position:absolute;top:.7rem;right:.7rem;z-index:3;
  width:34px;height:34px;border-radius:50%;
  background:rgba(13,13,13,.55);backdrop-filter:blur(6px);
  color:var(--white);font-size:1rem;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.2);transition:all .3s;
}
.pc-wish:hover{color:var(--black);background:var(--white)}
.pc-wish.on{color:var(--black);background:var(--white);border-color:var(--white)}

/* ── Drawer (cart / wishlist) ──────────────────────────── */
.drawer-backdrop{
  position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:opacity .4s;
  backdrop-filter:blur(3px);
}
.drawer-backdrop.show{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:2001;
  width:min(440px,100vw);background:var(--black-2);
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;
  transform:translateX(105%);transition:transform .55s var(--ease);
}
.drawer.open{transform:translateX(0)}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.2rem 1.4rem;border-bottom:1px solid var(--line);
}
.drawer-tabs{display:flex;gap:.4rem}
.dtab{
  font-family:var(--font-head);font-weight:600;font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--smoke);padding:.55rem 1rem;border-radius:99px;
  border:1px solid transparent;transition:all .3s;
}
.dtab span{opacity:.6;font-size:.6rem}
.dtab.active{color:var(--black);background:var(--white)}
.drawer-close{color:var(--gray);font-size:1.1rem;padding:.4rem;transition:color .3s}
.drawer-close:hover{color:var(--white)}
.drawer-body{flex:1;overflow-y:auto;padding:1.2rem 1.4rem;display:flex;flex-direction:column;gap:.9rem}
.drawer-foot{padding:1.1rem 1.4rem 1.4rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.8rem}
.drawer-sub{display:flex;justify-content:space-between;font-family:var(--font-head);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.drawer-empty{text-align:center;padding:3rem 1rem;color:var(--gray)}
.de-mark{font-size:2.4rem;display:block;margin-bottom:.8rem}
.de-sub{font-size:.82rem;color:var(--smoke);margin:.3rem 0 1rem}
.d-item{
  display:flex;gap:.9rem;align-items:center;
  border:1px solid var(--line);border-radius:8px;padding:.7rem;background:var(--black-3);
  position:relative;
}
.d-item img{width:62px;height:72px;object-fit:cover;border-radius:6px;flex:0 0 auto}
.di-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.di-name{font-family:var(--font-hero);font-weight:500;font-size:.86rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.di-vars{font-size:.7rem;color:var(--smoke)}
.di-price{font-size:.78rem;color:var(--light)}
.di-qty{display:flex;align-items:center;gap:.4rem}
.di-qty button{
  width:26px;height:26px;border:1px solid var(--line);border-radius:50%;
  color:var(--white);display:grid;place-items:center;font-size:.9rem;transition:all .25s;
}
.di-qty button:hover{border-color:var(--white)}
.di-qty span{min-width:20px;text-align:center;font-family:var(--font-head);font-weight:600;font-size:.8rem}
.di-rm{position:absolute;top:.45rem;right:.5rem;color:var(--gray);font-size:.72rem;padding:.2rem;transition:color .3s}
.di-rm:hover{color:var(--white)}
.di-add{
  border:1px solid rgba(255,255,255,.35);color:var(--white);border-radius:99px;
  padding:.4rem .9rem;font-family:var(--font-head);font-weight:600;font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;transition:all .3s;white-space:nowrap;
}
.di-add:hover{background:var(--white);color:var(--black)}
.ship-bar{height:3px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.ship-bar i{display:block;height:100%;background:var(--white);transition:width .5s var(--ease)}
.ship-note{font-size:.74rem;color:var(--smoke)}

/* ── Loyalty card ──────────────────────────────────────── */
.loyalty-card{
  border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:.9rem 1.1rem;
  background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  display:flex;flex-direction:column;gap:.5rem;
}
.lc-top{display:flex;justify-content:space-between;align-items:baseline}
.lc-tier{font-family:var(--font-hero);font-weight:700;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase}
.lc-pts{font-family:var(--font-head);font-weight:600;font-size:.74rem;color:var(--light)}
.lc-bar{height:4px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden}
.lc-bar i{display:block;height:100%;background:linear-gradient(90deg,#666,#fff);transition:width .6s var(--ease)}
.lc-bot{font-size:.7rem;color:var(--smoke)}

/* ── Search overlay ────────────────────────────────────── */
.search-overlay{
  position:fixed;inset:0;z-index:2500;background:rgba(13,13,13,.97);
  backdrop-filter:blur(10px);padding:9vh 6vw 6vh;overflow-y:auto;
  animation:ovIn .35s var(--ease);
}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
.search-box{
  display:flex;align-items:center;gap:1rem;max-width:820px;margin:0 auto;
  border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:.8rem;
}
.search-box svg{width:22px;height:22px;color:var(--light);flex:0 0 auto}
#search-input{
  flex:1;background:transparent;border:0;color:var(--white);
  font-family:var(--font-hero);font-weight:500;font-size:clamp(1.3rem,3vw,2rem);
  text-transform:uppercase;letter-spacing:.03em;outline:none;
}
#search-input::placeholder{color:rgba(255,255,255,.28)}
#search-close{color:var(--gray);font-size:1.4rem;padding:.4rem;transition:color .3s}
#search-close:hover{color:var(--white)}
.search-hint{max-width:820px;margin:.9rem auto 0;color:var(--smoke);font-size:.8rem;letter-spacing:.1em}
.search-results{
  max-width:820px;margin:1.4rem auto 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;
}
.s-result{
  display:flex;gap:.8rem;align-items:center;padding:.7rem;
  border:1px solid var(--line);border-radius:8px;cursor:pointer;
  transition:border-color .3s,background .3s;background:var(--black-2);
}
.s-result:hover{border-color:rgba(255,255,255,.4);background:var(--black-3)}
.s-result img{width:56px;height:64px;object-fit:cover;border-radius:6px}
.s-result > div{flex:1;display:flex;flex-direction:column}
.s-name{font-family:var(--font-hero);font-weight:500;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}
.s-cat{font-size:.68rem;color:var(--smoke);text-transform:uppercase;letter-spacing:.14em;margin-top:.15rem}
.s-price{font-size:.8rem;color:var(--light);white-space:nowrap}
.s-none{color:var(--smoke);font-size:.9rem;grid-column:1/-1}

/* ── Product modal ─────────────────────────────────────── */
.modal-backdrop{
  position:fixed;inset:0;z-index:2400;background:rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;
  padding:4vh 4vw;backdrop-filter:blur(4px);
  animation:ovIn .3s var(--ease);
}
.product-modal{
  background:var(--black-2);border:1px solid var(--line);border-radius:14px;
  width:min(980px,100%);max-height:92vh;overflow-y:auto;position:relative;
  display:grid;grid-template-columns:1.1fr 1fr;
}
.pm-close{
  position:absolute;top:.9rem;right:1rem;z-index:5;color:var(--gray);
  font-size:1.15rem;padding:.45rem;transition:color .3s;
}
.pm-close:hover{color:var(--white)}
.pm-media{position:relative;border-right:1px solid var(--line);background:var(--black)}
.pm-tabs{position:absolute;top:.9rem;left:1rem;z-index:4;display:flex;gap:.35rem}
.pmtab{
  font-family:var(--font-head);font-weight:600;font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--smoke);padding:.45rem .9rem;border-radius:99px;
  border:1px solid rgba(255,255,255,.2);background:rgba(13,13,13,.5);backdrop-filter:blur(6px);
  transition:all .3s;
}
.pmtab.active{background:var(--white);color:var(--black);border-color:var(--white)}
.pm-photo{position:relative;aspect-ratio:4/5;overflow:hidden;cursor:crosshair}
.pm-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pm-zoom{
  position:absolute;width:150px;height:150px;border-radius:8px;
  border:1px solid rgba(255,255,255,.5);pointer-events:none;opacity:0;
  background:rgba(13,13,13,.9) no-repeat;transition:opacity .2s;z-index:3;
}
.pm-canvas{width:100%;aspect-ratio:4/5;display:block}
.pm-info{padding:2rem 2.2rem 2.4rem;display:flex;flex-direction:column;gap:1rem}
.pm-tag-row{display:flex;justify-content:space-between;align-items:center}
.pm-tag{
  font-family:var(--font-head);font-weight:600;font-size:.58rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--black);background:var(--white);
  padding:.3rem .7rem;border-radius:99px;
}
.pm-name{font-family:var(--font-hero);font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);text-transform:uppercase;line-height:1.05;letter-spacing:.02em}
.pm-price{font-family:var(--font-head);font-weight:600;font-size:1.15rem;color:var(--light)}
.pm-desc{color:var(--gray);font-size:.9rem;line-height:1.65}
.pm-label{font-family:var(--font-head);font-weight:600;font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--light);margin-bottom:.5rem}
.pm-colors{display:flex;gap:.55rem}
.swatch{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.2);cursor:pointer;transition:all .25s}
.swatch.on{border-color:var(--white);transform:scale(1.15)}
.pm-sizes{display:flex;gap:.5rem;flex-wrap:wrap}
.size-btn{
  min-width:44px;padding:.5rem .7rem;border:1px solid rgba(255,255,255,.25);
  color:var(--white);font-family:var(--font-head);font-weight:600;font-size:.74rem;
  border-radius:6px;transition:all .25s;
}
.size-btn:hover{border-color:var(--white)}
.size-btn.on{background:var(--white);color:var(--black);border-color:var(--white)}
.pm-msg{font-size:.8rem;color:#e08a8a;min-height:1.1em}
.pm-buy{display:flex;gap:.8rem;align-items:center}
.pm-qty{display:flex;align-items:center;border:1px solid rgba(255,255,255,.25);border-radius:6px}
.pm-qty button{width:38px;height:44px;color:var(--white);font-size:1.1rem;transition:color .25s}
.pm-qty button:hover{color:var(--light)}
.pm-qty span{min-width:34px;text-align:center;font-family:var(--font-head);font-weight:600}
#pm-add{flex:1}
.pm-wish{
  border:1px solid rgba(255,255,255,.3);color:var(--white);border-radius:6px;
  padding:.8rem 1.1rem;font-family:var(--font-head);font-weight:600;font-size:.64rem;
  letter-spacing:.2em;text-transform:uppercase;transition:all .3s;
}
.pm-wish:hover{border-color:var(--white);background:rgba(255,255,255,.06)}

/* ── Size guide modal ──────────────────────────────────── */
#sg-backdrop{position:fixed;inset:0;z-index:2600;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:4vh 4vw;backdrop-filter:blur(4px)}
.sg-box{
  background:var(--black-2);border:1px solid var(--line);border-radius:14px;
  width:min(560px,100%);max-height:86vh;overflow-y:auto;padding:1.6rem 1.8rem;position:relative;
}
.sg-box h3{font-family:var(--font-hero);font-weight:700;text-transform:uppercase;font-size:1.2rem;margin-bottom:1.1rem;letter-spacing:.04em}
.sg-box table{width:100%;border-collapse:collapse;font-size:.86rem}
.sg-box th,.sg-box td{padding:.55rem .6rem;text-align:center;border:1px solid rgba(255,255,255,.12);font-family:var(--font-head)}
.sg-box th{background:rgba(255,255,255,.06);color:var(--light);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.sg-box td{color:var(--gray)}
.sg-note{margin-top:1rem;font-size:.78rem;color:var(--smoke)}
#sg-close{position:absolute;top:.9rem;right:1rem;color:var(--gray);font-size:1.05rem;padding:.3rem}
#sg-close:hover{color:var(--white)}

/* ── Checkout overlay ──────────────────────────────────── */
#co-backdrop{
  position:fixed;inset:0;z-index:2700;background:rgba(0,0,0,.8);
  display:flex;align-items:center;justify-content:center;padding:3vh 3vw;
  backdrop-filter:blur(6px);animation:ovIn .35s var(--ease);
}
.checkout{
  background:var(--black-2);border:1px solid var(--line);border-radius:14px;
  width:min(1000px,100%);max-height:94vh;display:flex;flex-direction:column;
}
.co-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.6rem;border-bottom:1px solid var(--line)}
.co-head h3{font-family:var(--font-hero);font-weight:700;text-transform:uppercase;font-size:1.05rem;letter-spacing:.06em}
.co-head span{font-family:var(--font-head);font-weight:600;font-size:.68rem;color:var(--smoke);letter-spacing:.2em}
#co-close{color:var(--gray);font-size:1.1rem;padding:.35rem}
#co-close:hover{color:var(--white)}
.co-body{flex:1;overflow-y:auto;padding:1.5rem 1.6rem}
.co-foot{display:flex;justify-content:space-between;gap:1rem;padding:1.1rem 1.6rem;border-top:1px solid var(--line)}
.co-grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.co-col{display:flex;flex-direction:column;gap:.7rem}
.co-col h4{font-family:var(--font-head);font-weight:600;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--white);margin-bottom:.2rem}
.co-col label{display:flex;flex-direction:column;gap:.3rem;font-family:var(--font-head);font-weight:500;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke)}
.co-col input,.co-col select{
  background:var(--black);border:1px solid rgba(255,255,255,.2);border-radius:6px;
  color:var(--white);padding:.75rem .9rem;font-family:var(--font-body);font-size:.92rem;
  text-transform:none;letter-spacing:0;transition:border-color .3s;
}
.co-col input:focus,.co-col select:focus{outline:none;border-color:var(--white)}
.co-col input::placeholder{color:var(--concrete)}
.f-hint{font-size:.7rem;color:var(--smoke);text-transform:none;letter-spacing:0;font-weight:400}
label.check{flex-direction:row;align-items:center;gap:.55rem;cursor:pointer;text-transform:none;letter-spacing:0;font-weight:400;color:var(--gray)}
label.check input{width:16px;height:16px;accent-color:var(--white)}
.social-row{display:flex;gap:.6rem;flex-wrap:wrap}
.social-btn{
  flex:1;min-width:150px;display:flex;align-items:center;justify-content:center;gap:.55rem;
  border:1px solid rgba(255,255,255,.28);color:var(--white);border-radius:6px;
  padding:.7rem .9rem;font-family:var(--font-head);font-weight:600;font-size:.7rem;
  letter-spacing:.08em;transition:all .3s;background:var(--black);
}
.social-btn:hover{border-color:var(--white);background:var(--black-3)}
.or-line{display:flex;align-items:center;gap:.8rem;color:var(--concrete);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.12)}
.co-note{margin-top:.6rem}
#co-msg-zone{min-height:1.2em;font-size:.78rem;color:var(--light)}

/* payment */
.radio-card{
  display:flex;align-items:center;gap:.8rem;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:.8rem 1rem;
  transition:border-color .3s,background .3s;background:var(--black);
}
.radio-card:hover{border-color:rgba(255,255,255,.4)}
.radio-card:has(input:checked){border-color:var(--white);background:var(--black-3)}
.radio-card input{accent-color:var(--white)}
.radio-card div{flex:1;display:flex;flex-direction:column}
.radio-card b{font-family:var(--font-head);font-weight:600;font-size:.82rem;letter-spacing:.04em}
.radio-card span{font-size:.7rem;color:var(--smoke)}
.rc-price{font-size:.8rem !important;color:var(--light) !important;font-weight:600}
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.pay-card{
  display:flex;align-items:center;gap:.5rem;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:.7rem .9rem;
  font-family:var(--font-head);font-weight:500;font-size:.72rem;letter-spacing:.06em;
  transition:all .3s;background:var(--black);
}
.pay-card:hover{border-color:rgba(255,255,255,.4)}
.pay-card:has(input:checked){border-color:var(--white);background:var(--black-3)}
.pay-card input{accent-color:var(--white)}
.card-fields{display:flex;flex-direction:column;gap:.6rem;margin-top:.7rem;padding:.9rem;border:1px dashed rgba(255,255,255,.2);border-radius:8px}
.code-row{display:flex;gap:.6rem}
.code-row input{flex:1}
.fawry-box{
  margin-top:.7rem;padding:1rem;border:1px dashed rgba(255,255,255,.25);border-radius:8px;
  display:flex;flex-direction:column;gap:.5rem;font-size:.82rem;color:var(--gray);
}
.fawry-code{
  font-family:var(--font-hero);font-weight:700;font-size:1.3rem;letter-spacing:.12em;
  color:var(--white);background:var(--black);border:1px solid var(--line);
  border-radius:6px;padding:.6rem 1rem;text-align:center;
}
.co-summary{border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.45rem;background:var(--black)}
.cs-row{display:flex;justify-content:space-between;gap:1rem;font-size:.82rem;color:var(--gray)}
.cs-line{display:flex;justify-content:space-between;font-size:.82rem;color:var(--ash);padding-top:.45rem;border-top:1px dashed rgba(255,255,255,.12)}
.cs-line.good{color:#9fd69f}
.cs-total{display:flex;justify-content:space-between;font-family:var(--font-head);font-weight:700;font-size:1.02rem;color:var(--white);padding-top:.6rem;border-top:1px solid rgba(255,255,255,.2);margin-top:.2rem}
.co-pts-note{font-size:.78rem;color:var(--smoke);margin-top:.7rem}

/* OTP + success */
.otp-wrap{max-width:480px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:1rem}
.otp-icon{font-size:2.2rem}
.otp-wrap h4{font-family:var(--font-hero);font-weight:700;text-transform:uppercase;font-size:1.25rem}
.otp-wrap p{color:var(--gray);font-size:.9rem}
.otp-inputs{display:flex;gap:.5rem;justify-content:center}
.otp-digit{
  width:46px;height:56px;text-align:center;font-family:var(--font-hero);font-weight:700;
  font-size:1.5rem;background:var(--black);border:1px solid rgba(255,255,255,.25);
  border-radius:8px;color:var(--white);transition:border-color .3s;
}
.otp-digit:focus{outline:none;border-color:var(--white)}
.demo-inbox{
  margin-top:.6rem;text-align:left;border:1px solid rgba(255,255,255,.18);
  border-radius:10px;padding:1rem 1.2rem;background:var(--black);
}
.demo-inbox b{font-family:var(--font-head);font-weight:600;font-size:.72rem;letter-spacing:.1em;color:var(--light)}
.demo-inbox p{font-size:.8rem;margin-top:.4rem}
.demo-mail{border-left:2px solid var(--line);padding:.4rem 0 .4rem 1rem;margin-top:.5rem;display:flex;flex-direction:column;gap:.15rem;font-size:.78rem;color:var(--smoke)}
.demo-mail p{font-size:.85rem;color:var(--ash)}
.demo-code{color:var(--white);letter-spacing:.18em}
.done-wrap{max-width:520px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:1rem;padding:.6rem 0}
.done-check{
  width:74px;height:74px;margin:0 auto;border-radius:50%;
  background:var(--white);color:var(--black);display:grid;place-items:center;
  font-size:2rem;font-weight:700;animation:popIn .6s var(--ease);
}
@keyframes popIn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.done-wrap h3{font-family:var(--font-hero);font-weight:700;text-transform:uppercase;font-size:1.6rem}
.done-no{color:var(--gray);font-size:.86rem}
.done-no b{color:var(--light)}
.done-sum{border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;background:var(--black);text-align:left}
.done-loyalty{display:flex;flex-direction:column;gap:.6rem}
.done-loyalty > span{font-size:.85rem;color:var(--ash)}
.done-loyalty b{color:var(--light)}
.done-note{font-size:.84rem;color:var(--gray)}

/* ── responsive ────────────────────────────────────────── */
@media (max-width:860px){
  .product-modal{grid-template-columns:1fr}
  .pm-media{border-right:0;border-bottom:1px solid var(--line)}
  .co-grid2{grid-template-columns:1fr}
  .pay-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .pm-info{padding:1.4rem 1.2rem}
  .pm-buy{flex-wrap:wrap}
  #pm-add{min-width:100%}
  .checkout{max-height:97vh}
  .co-body{padding:1.1rem}
  .otp-digit{width:38px;height:50px;font-size:1.2rem}
}