/* =====================================================================
   HYP3 PERFUME — DESIGN SYSTEM
   Built entirely off the brand mark: a faceted crystal droplet with a
   circuit-ring halo and a lightning core, teal → cyan, on near-black.

   Color   void #05080a · panel #0b1412 · mint #34e8b0 · cyan #22d3ee
   Type    Display 'Orbitron' (angular, technical, echoes the wordmark)
           Body    'Manrope' (clean geometric sans for legibility)
   Signature  faceted "gem-cut" corners on every actionable surface +
              a single gradient hairline (mint → cyan), echoing the cut
              gem in the logotype. One risk spent once, reused everywhere.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800;900&family=Manrope:wght@400;500;600;700;800&display=swap');

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --void:#05080a; --void-2:#070d0c;
  --panel:#0b1412; --panel-2:#0e1a17; --panel-soft:rgba(255,255,255,.025);
  --line:rgba(120,247,208,.14); --line-strong:rgba(120,247,208,.4);
  --glow:rgba(52,232,178,.35);
  --mint:#34e8b0; --cyan:#22d3ee; --mint-soft:#8ff7d8;
  --grad:linear-gradient(115deg,#34e8b0 0%,#22d3ee 100%);
  --grad-soft:linear-gradient(115deg,rgba(52,232,178,.16),rgba(34,211,238,.16));
  --ink:#eafff6; --ink-dim:#85a89f; --ink-faint:#4d6a62;
  --font-d:'Orbitron','Arial Narrow',sans-serif; --font-b:'Manrope',-apple-system,'Segoe UI',sans-serif;
  --cut:16px; --ease:cubic-bezier(.2,.8,.2,1);
}

html{scroll-behavior:smooth}
body{background:var(--void);color:var(--ink);font-family:var(--font-b);font-size:15px;line-height:1.65;overflow-x:hidden;position:relative}

body::before{content:"";position:fixed;inset:0;z-index:-2;
  background-image:linear-gradient(rgba(120,247,208,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,247,208,.05) 1px,transparent 1px);
  background-size:42px 42px;mask-image:radial-gradient(ellipse 70% 55% at 50% 0%,rgba(0,0,0,.9),transparent 75%);pointer-events:none}
body::after{content:"";position:fixed;top:-20%;left:50%;width:900px;height:900px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(52,232,178,.10),transparent 65%);z-index:-1;pointer-events:none}

a{text-decoration:none;color:inherit}
ul,li{list-style:none}
img{max-width:100%;display:block}
button,input,select{font-family:var(--font-b)}
::selection{background:var(--mint);color:#05100c}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--mint),var(--cyan));border-radius:10px}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

.section-p1{padding:60px 8%}
.section-m1{margin:60px 0}
h1,h2,h3,h4,h5,h6{font-family:var(--font-d);font-weight:700;letter-spacing:.02em;color:var(--ink)}
p{color:var(--ink-dim)}

.section-p1 > h2::before,.newstext h4::before,#coupon h3::before,#subtotal h3::before{
  content:"◆ ";color:var(--mint);font-size:.55em;vertical-align:middle;margin-right:6px}

/* ---------- helpers reused across pages ---------- */
.gem{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.empty-state{padding:60px 20px;text-align:center;color:var(--ink-faint);font-size:14px}
.empty-state i{display:block;font-size:34px;color:var(--ink-faint);margin-bottom:14px}

/* =====================================================================
   HEADER / NAV
   ===================================================================== */
#header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:16px 8%;background:rgba(5,8,10,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(52,232,178,.4))}
.brand span{font-family:var(--font-d);font-size:22px;font-weight:900;letter-spacing:.12em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(52,232,178,.35))}

.nav-wrap{flex:1;display:flex;justify-content:flex-end}
#navbar{display:flex;align-items:center;gap:30px}
#navbar li a{position:relative;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-dim);padding:6px 0;transition:color .25s var(--ease)}
#navbar li a:hover,#navbar li a.active{color:var(--ink)}
#navbar li a.active::after,#navbar li a:hover::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:var(--grad);border-radius:2px;box-shadow:0 0 8px var(--glow)}
#navbar li a i{font-size:16px;color:var(--ink-dim);transition:color .25s var(--ease),filter .25s var(--ease)}
#navbar li a:hover i{color:var(--mint);filter:drop-shadow(0 0 6px var(--glow))}
#navbar li.cart-link a{position:relative}
.cart-count{position:absolute;top:-8px;right:-10px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--mint);color:#04120d;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}

#close{display:none;color:var(--ink-dim);font-size:16px}
#mobile{display:none;align-items:center;gap:18px;font-size:19px;color:var(--ink)}
#mobile a{position:relative}
#mobile a i{color:var(--mint)}
#bar{cursor:pointer}

.search-box{margin-right:6px}
.search-box input{background:var(--panel-soft);border:1px solid var(--line);color:var(--ink);padding:8px 14px;
  border-radius:999px;font-size:12.5px;width:150px;transition:width .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.search-box input::placeholder{color:var(--ink-faint)}
.search-box input:focus,.search-box.is-searching input{width:210px;border-color:var(--line-strong);background:rgba(52,232,178,.06)}

@media (max-width:992px){
  #navbar{position:fixed;top:0;right:-280px;width:260px;height:100vh;flex-direction:column;align-items:flex-start;
    gap:24px;padding:90px 30px 30px;background:linear-gradient(180deg,#070d0c,#05080a);border-left:1px solid var(--line);
    transition:right .35s var(--ease),visibility 0s linear .35s;z-index:200;
    visibility:hidden;pointer-events:none}
  #navbar.active{right:0;box-shadow:-20px 0 50px rgba(0,0,0,.6);
    visibility:visible;pointer-events:auto;transition:right .35s var(--ease)}
  #navbar li{width:100%}
  #close{display:block;position:absolute;top:26px;right:26px}
  #mobile{display:flex}
  .search-box{width:100%;margin:0 0 10px}
  .search-box input{width:100%}
  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:150}
}

/* =====================================================================
   HERO
   ===================================================================== */
#hero{position:relative;min-height:80vh;display:flex;flex-direction:column;justify-content:center;
  padding:40px 8%;background:radial-gradient(ellipse 60% 70% at 78% 30%,rgba(34,211,238,.16),transparent 60%),
  radial-gradient(ellipse 50% 60% at 10% 90%,rgba(52,232,178,.12),transparent 60%),var(--void);
  border-bottom:1px solid var(--line);overflow:hidden}
#hero::before{content:"";position:absolute;top:50%;right:6%;width:420px;height:420px;transform:translateY(-50%);
  border:1px solid var(--line);border-radius:50%}
#hero::after{content:"";position:absolute;top:50%;right:6%;width:300px;height:300px;transform:translate(60px,-50%);
  border:1px solid var(--line);border-radius:50%}
.hero-tag{font-size:13px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--mint);margin-bottom:18px}
.hero-title{font-size:clamp(42px,7.5vw,80px);font-weight:900;line-height:1.03;margin-bottom:18px;max-width:720px}
.hero-title .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(52,232,178,.25))}
#hero p{max-width:440px;margin-bottom:32px;font-size:15px}
.btn-primary{display:inline-flex;align-items:center;gap:10px;padding:16px 38px;background:var(--grad);border:none;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);cursor:pointer;
  font-family:var(--font-d);font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#04120d;
  box-shadow:0 10px 30px -8px rgba(52,232,178,.5);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 38px -6px rgba(52,232,178,.65)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:16px 30px;background:transparent;
  border:1px solid var(--line-strong);color:var(--ink);font-family:var(--font-d);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease)}
.btn-ghost:hover{background:var(--mint);color:#04120d}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}

/* =====================================================================
   FEATURE STRIP
   ===================================================================== */
#feature{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.fe-box{position:relative;padding:26px 12px 20px;text-align:center;background:var(--panel-soft);border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
  transition:border-color .25s var(--ease),transform .25s var(--ease),background .25s var(--ease)}
.fe-box:hover{border-color:var(--line-strong);background:rgba(52,232,178,.05);transform:translateY(-4px)}
.fe-box img{width:36px;margin:0 auto 12px;filter:drop-shadow(0 0 8px rgba(52,232,178,.35))}
.fe-box h6{font-family:var(--font-b);font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-dim)}
@media (max-width:992px){#feature{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){#feature{grid-template-columns:repeat(2,1fr)}}

/* =====================================================================
   PAGE HEADER (shop / about / contact / cart / fav / product)
   ===================================================================== */
#page-header{padding:64px 8% 46px;text-align:center;
  background:radial-gradient(ellipse 60% 100% at 50% 0%,rgba(52,232,178,.1),transparent 70%),var(--void);
  border-bottom:1px solid var(--line)}
#page-header h2{font-size:clamp(28px,4vw,42px);margin-bottom:8px}
#page-header p{font-size:14px}
.crumbs{margin-top:10px;font-size:12px;color:var(--ink-faint);letter-spacing:.04em}
.crumbs a{color:var(--mint)}

/* =====================================================================
   PRODUCT GRID
   ===================================================================== */
#product1{text-align:center}
#product1 h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:6px}
#product1 > p{margin-bottom:36px;font-size:14px}

.pro-container{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:left;margin-bottom:20px}
.pro{position:relative;background:var(--panel);border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
  cursor:pointer;overflow:hidden;transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.pro::before{content:"";position:absolute;inset:0;background:var(--grad-soft);opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.pro:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:0 22px 40px -18px rgba(52,232,178,.35)}
.pro:hover::before{opacity:1}
.pro .img-wrap{background:var(--panel-2);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pro .img-wrap img{width:80%;transition:transform .5s var(--ease)}
.pro:hover .img-wrap img{transform:scale(1.06)}
.pro .des{position:relative;padding:16px 18px 20px;z-index:1}
.pro .des span{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mint)}
.pro .des h5{font-family:var(--font-b);font-size:16px;font-weight:800;color:var(--ink);margin:6px 0 8px}
.pro .des .star i{font-size:11px;color:var(--cyan);margin-right:2px}
.pro .des h4{font-family:var(--font-b);font-size:15px;font-weight:800;color:var(--mint-soft);margin-top:10px}
.pro .quick-add{position:absolute;top:14px;right:14px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:rgba(5,8,10,.75);border:1px solid var(--line-strong);border-radius:50%;z-index:2;opacity:0;transform:translateY(-6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),background .25s var(--ease)}
.pro:hover .quick-add{opacity:1;transform:translateY(0)}
.pro .quick-add i{font-size:13px;color:var(--mint)}
.pro .quick-add:hover{background:var(--mint)}
.pro .quick-add:hover i{color:#04120d}
@media (max-width:1180px){.pro-container{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.pro-container{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pro-container{grid-template-columns:1fr}}

/* shop filter bar */
.shop-toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:34px}
.filter-chip{padding:10px 20px;border:1px solid var(--line);color:var(--ink-dim);font-size:12.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer;background:var(--panel-soft);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.filter-chip:hover{color:var(--ink);border-color:var(--line-strong)}
.filter-chip.active{color:#04120d;background:var(--grad);border-color:transparent}

/* =====================================================================
   BANNER
   ===================================================================== */
#banner{position:relative;padding:64px 8%;text-align:center;
  background:linear-gradient(180deg,rgba(52,232,178,.06),transparent),var(--panel);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#banner h4{font-family:var(--font-b);font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--mint);margin-bottom:12px}
#banner h2{font-size:clamp(24px,3.4vw,34px);margin-bottom:22px}
#banner h2 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* =====================================================================
   NEWSLETTER
   ===================================================================== */
#newletter{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:44px 8%;
  background:var(--panel);border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
  margin:60px 8%}
.newstext h4{font-size:19px;margin-bottom:8px}
.newstext p{font-size:13.5px}
.newstext p span{color:var(--mint);font-weight:700}
.form{display:flex;gap:10px}
.form input{padding:13px 18px;min-width:240px;background:var(--void);border:1px solid var(--line);color:var(--ink);font-size:13px}
.form input::placeholder{color:var(--ink-faint)}
.form input:focus{border-color:var(--line-strong)}
button.normal,.btn-auth{padding:13px 28px;background:var(--grad);color:#04120d;border:none;font-family:var(--font-d);
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);box-shadow:0 10px 26px -10px rgba(52,232,178,.55)}
button.normal:hover,.btn-auth:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(52,232,178,.7)}
@media (max-width:760px){#newletter{flex-direction:column;align-items:stretch;text-align:center}.form{flex-direction:column}.form input{min-width:0}}

/* =====================================================================
   FOOTER
   ===================================================================== */
footer{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:30px;padding:64px 8% 28px;
  background:var(--void-2);border-top:1px solid var(--line);position:relative}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--grad);opacity:.5}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.foot-brand img{width:30px}
.foot-brand span{font-size:20px;font-weight:900;letter-spacing:.1em;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
footer .col h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:16px}
footer .col p{font-size:13px;margin-bottom:8px}
footer .col a{display:block;font-size:13.5px;color:var(--ink-dim);margin-bottom:10px;transition:color .2s var(--ease)}
footer .col a:hover{color:var(--mint)}
.follow{margin-top:20px}
.follow h4{margin-bottom:10px}
.icon{display:flex;gap:10px}
.icon a{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);
  border-radius:50%;color:var(--ink-dim);transition:border-color .2s var(--ease),color .2s var(--ease)}
.icon a:hover{border-color:var(--mint);color:var(--mint)}
.copyright{grid-column:1/-1;margin-top:36px;padding-top:20px;border-top:1px solid var(--line);text-align:center}
.copyright p{font-size:12px;letter-spacing:.03em;color:var(--ink-faint)}
@media (max-width:992px){footer{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){footer{grid-template-columns:1fr;text-align:center}.icon{justify-content:center}}

/* =====================================================================
   ABOUT
   ===================================================================== */
.about-hero{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.about-hero .visual{position:relative;display:flex;align-items:center;justify-content:center;padding:40px;
  border:1px solid var(--line);background:var(--panel);
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px))}
.about-hero .visual img{width:70%;filter:drop-shadow(0 0 30px rgba(52,232,178,.3))}
.about-hero h2{font-size:clamp(24px,3vw,32px);margin-bottom:18px}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}
.value-card{padding:28px 24px;background:var(--panel);border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
.value-card i{font-size:22px;color:var(--mint);margin-bottom:14px;display:block}
.value-card h4{font-size:16px;margin-bottom:8px}
.value-card p{font-size:13.5px}
@media (max-width:860px){.about-hero,.value-grid{grid-template-columns:1fr}}

/* =====================================================================
   CONTACT
   ===================================================================== */
#contact-details{display:flex;justify-content:center}
.details{max-width:640px;padding:40px 46px;background:var(--panel);border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));text-align:center}
.details span{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--mint)}
.details h2{font-size:clamp(22px,3vw,28px);margin:12px 0 6px}
.details h3{font-size:13px;color:var(--ink-dim);font-weight:500;margin-bottom:26px;text-transform:uppercase;letter-spacing:.1em}
.details>div{display:flex;flex-direction:column;gap:16px}
.details li{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--panel-soft);border:1px solid var(--line);text-align:left}
.details li i{color:var(--mint);font-size:15px;width:20px}
.details li p{color:var(--ink);font-size:14px}
.contact-form{max-width:640px;margin:36px auto 0;display:grid;gap:14px}
.contact-form input,.contact-form textarea{padding:14px 16px;background:var(--panel);border:1px solid var(--line);color:var(--ink);font-size:13.5px;width:100%}
.contact-form textarea{min-height:120px;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--line-strong)}
.contact-form button{justify-self:start}

/* =====================================================================
   SINGLE PRODUCT
   ===================================================================== */
#prodetails{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.single-pro-image #mainimg{border:1px solid var(--line);background:var(--panel);
  clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px));margin-bottom:18px;padding:30px}
.small-img-group{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.small-img-col{border:1px solid var(--line);background:var(--panel);overflow:hidden;cursor:pointer;
  transition:border-color .2s var(--ease);padding:8px}
.small-img-col:hover{border-color:var(--line-strong)}
.small-img{transition:transform .3s var(--ease)}
.small-img-col:hover .small-img{transform:scale(1.08)}
.single-pro-details h6{font-family:var(--font-b);font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--mint);margin-bottom:10px}
.single-pro-details .p-title{font-size:clamp(28px,3.6vw,40px);margin-bottom:14px}
.single-pro-details .p-price{font-size:28px;font-weight:800;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent;margin-bottom:22px}
.single-pro-details .p-rating{margin-bottom:18px}
.single-pro-details .p-rating i{color:var(--cyan);font-size:13px;margin-right:2px}
.single-pro-details .p-rating span{color:var(--ink-faint);font-size:12.5px;margin-left:8px}
#bottle-select{display:block;width:100%;max-width:340px;padding:13px 16px;margin-bottom:16px;
  background:var(--panel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%2334e8b0'/></svg>") no-repeat right 16px center;
  border:1px solid var(--line);color:var(--ink);font-size:13.5px;appearance:none;cursor:pointer}
#bottle-select:focus{border-color:var(--line-strong)}
#product-quantity{width:90px;padding:13px 14px;margin-bottom:22px;background:var(--panel);border:1px solid var(--line);
  color:var(--ink);font-size:14px;text-align:center}
.qty-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.add-to-cart-btn{display:inline-block;padding:16px 42px;margin-right:16px;margin-bottom:30px;background:var(--grad);
  border:none;color:#04120d;font-family:var(--font-d);font-size:13px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  box-shadow:0 12px 30px -10px rgba(52,232,178,.55);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.add-to-cart-btn:hover{transform:translateY(-3px);box-shadow:0 18px 36px -8px rgba(52,232,178,.7)}
.fav-icon-container{display:inline-flex;width:52px;height:52px;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:50%;vertical-align:middle;margin-bottom:30px;transition:border-color .2s var(--ease)}
.fav-icon-container:hover{border-color:var(--line-strong)}
.fav-icon-container i{color:var(--ink-dim);font-size:17px;cursor:pointer;transition:color .2s var(--ease),transform .2s var(--ease)}
.fav-icon-container i:hover{color:var(--mint);transform:scale(1.15)}
.fav-icon-container i.active{color:var(--mint)}
.single-pro-details .p-details-title{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  border-top:1px solid var(--line);padding-top:24px;margin-bottom:12px}
.single-pro-details .p-desc{font-size:14px;line-height:1.8}
.notes-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.note-chip{padding:6px 14px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);
  border:1px solid var(--line);border-radius:999px}
@media (max-width:900px){#prodetails{grid-template-columns:1fr;gap:34px}}

/* =====================================================================
   CART & FAVORITES
   ===================================================================== */
#cart{overflow-x:auto}
#cart table{border-collapse:collapse;min-width:720px;width:100%}
#cart thead td{padding:16px 14px;font-family:var(--font-d);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mint);border-bottom:1px solid var(--line-strong)}
#cart tbody tr{border-bottom:1px solid var(--line);transition:background .2s var(--ease)}
#cart tbody tr:hover{background:rgba(52,232,178,.04)}
#cart tbody td{padding:16px 14px;font-size:13.5px;color:var(--ink-dim);vertical-align:middle}
#cart tbody td img{width:56px;border:1px solid var(--line);background:var(--panel);padding:6px}
#cart tbody td.p-name{color:var(--ink);font-weight:700}
#cart tbody input[type="number"]{background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:6px 4px;
  text-align:center;width:56px}
#cart-content td:first-child i,#fav-content td:first-child i{font-size:17px;cursor:pointer;
  transition:color .2s var(--ease),transform .2s var(--ease);color:var(--ink-faint)}
#cart-content td:first-child i:hover,#fav-content td:first-child i:hover{color:#ff6b6b;transform:scale(1.2)}
#cart-add{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;margin-top:40px}
#coupon,#subtotal{padding:30px 34px;background:var(--panel);border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
#coupon h3,#subtotal h3{font-size:17px;margin-bottom:20px}
#coupon>div{display:flex;gap:10px}
#coupon input{flex:1;padding:13px 16px;background:var(--void);border:1px solid var(--line);color:var(--ink);font-size:13px}
#subtotal table{width:100%}
#subtotal td{padding:10px 0;font-size:14px;color:var(--ink-dim);border-bottom:1px solid var(--line)}
#subtotal tr:last-child td{border-bottom:none}
#subtotal strong{color:var(--ink)}
#subtotal #final-total{color:var(--mint);font-size:18px}
#subtotal button.normal{width:100%;margin-top:20px;text-align:center}
.wa-note{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12px;color:var(--ink-faint)}
.wa-note i{color:var(--mint)}
@media (max-width:860px){#cart-add{grid-template-columns:1fr}}

/* =====================================================================
   AUTH
   ===================================================================== */
body.auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:30px;background:var(--void)}
.auth-container{width:100%;max-width:400px;padding:44px 40px;background:var(--panel);border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
  box-shadow:0 30px 70px -30px rgba(52,232,178,.2)}
.auth-container .brand{justify-content:center;margin-bottom:8px}
.brand-logo{text-align:center;font-size:26px;font-weight:900;letter-spacing:.1em;margin-bottom:30px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.input-group{position:relative;margin-bottom:18px}
.input-group input{width:100%;padding:14px 16px;background:var(--void);border:1px solid var(--line);color:var(--ink);
  font-size:13.5px;transition:border-color .2s var(--ease)}
.input-group input:focus{border-color:var(--line-strong)}
.input-group input::placeholder{color:var(--ink-faint)}
.toggle-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--ink-faint);cursor:pointer;transition:color .2s var(--ease)}
.toggle-icon:hover{color:var(--mint)}
.btn-auth{width:100%;text-align:center;margin-top:8px;margin-bottom:18px}
.toggle-link{text-align:center;font-size:12.5px;color:var(--ink-faint)}
.toggle-link span{color:var(--mint);cursor:pointer;font-weight:700}
.toggle-link span:hover{text-decoration:underline}
.hidden{display:none}

/* =====================================================================
   TOAST (replaces alert() popups)
   ===================================================================== */
#toast-stack{position:fixed;bottom:26px;right:26px;z-index:999;display:flex;flex-direction:column;gap:10px;
  max-width:300px}
.toast{padding:14px 18px;background:var(--panel);border:1px solid var(--line-strong);color:var(--ink);
  font-size:13px;box-shadow:0 16px 34px -12px rgba(0,0,0,.6);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  display:flex;align-items:center;gap:10px;animation:toastIn .3s var(--ease)}
.toast i{color:var(--mint)}
.toast.fade{opacity:0;transform:translateX(10px);transition:opacity .3s,transform .3s}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* =====================================================================
   MOTION
   ===================================================================== */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.hero-tag,.hero-title,#hero p,.hero-cta{animation:fadeUp .7s var(--ease) both}
.hero-title{animation-delay:.06s}
#hero p{animation-delay:.14s}
.hero-cta{animation-delay:.22s}
.pro,.fe-box,.value-card{animation:fadeUp .5s var(--ease) both}