@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Cormorant+Garamond:wght@500;600;700&display=swap');
:root{
  --ink:#0c1916; --muted:#4f5f5a; --bg:#eef6f2; --surface:#f7fcf9; --card:#fbfffd;
  --glass:rgba(255,255,255,.75); --pill:#e3f4ec; --accent:#32c7a2; --accent-2:#167c6c; --accent-3:#ff8b6a;
  --accent-4:#baf7dd; --btn:#32c7a2; --btnText:#f7fffb; --border:#cde0d7; --border-strong:#b6cdc2;
  --radius-card:24px 24px 34px 12px; --radius-hero:36px 22px 38px 16px; --radius-pill:999px;
  --radius-field:14px 14px 20px 10px; --radius:var(--radius-card); --cut:16px; --cut-sm:10px; --cut-xs:6px;
  --shadow:0 18px 40px rgba(10,24,20,.18); --shadow-soft:0 10px 22px rgba(10,24,20,.12);
  --ring:rgba(50,199,162,.32); --font-body:'Space Grotesk','Segoe UI',sans-serif; --font-display:'Cormorant Garamond','Times New Roman',serif;
  --sidebar-w:300px; --sidebar-w-collapsed:92px; --sidebar-pad:18px;
}
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);
  background-image:
    radial-gradient(900px 480px at 8% -10%, rgba(50,199,162,.22), transparent 60%),
    radial-gradient(780px 460px at 88% 0%, rgba(255,139,106,.18), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)),
    linear-gradient(90deg, rgba(12,25,20,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(12,25,20,.035) 1px, transparent 1px);
  background-size:auto,auto,auto,46px 46px,46px 46px;
  background-attachment:fixed;
}
body{
  padding-left:var(--sidebar-w);
  min-height:100vh;
  transition:padding .25s ease;
  overflow-x:hidden;
}
body.nav-collapsed{padding-left:var(--sidebar-w-collapsed);}
a{color:var(--ink);text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
::selection{background:rgba(50,199,162,.25)}

h1,h2,h3,.header__title{font-family:var(--font-display);letter-spacing:.2px}

.header{
  position:fixed; top:0; left:0; height:100vh; width:var(--sidebar-w);
  background:var(--glass); border-right:1px solid var(--border); z-index:920;
  padding:var(--sidebar-pad); display:flex; flex-direction:column;
  box-shadow:12px 0 28px rgba(8,24,20,.16); transition:width .3s cubic-bezier(.2,.8,.2,1);
  overflow:hidden; backdrop-filter:blur(18px) saturate(1.1);
}
.header::before{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,0));
  opacity:.6; pointer-events:none;
}
.header::after{
  content:""; position:absolute; top:0; right:0; width:2px; height:100%;
  background:linear-gradient(180deg,rgba(50,199,162,.5),rgba(50,199,162,0)); pointer-events:none;
}
.header__row{display:flex;flex-direction:column;gap:18px;height:100%;position:relative;z-index:1}
.header__top{display:flex;flex-direction:column;gap:12px}
.header__brand{display:flex;align-items:center;gap:12px;line-height:1}
.header__logo-icon{
  width:44px;height:44px;border-radius:var(--radius-field);
  background:linear-gradient(135deg,rgba(50,199,162,.18),rgba(255,255,255,.85));
  border:1px solid rgba(22,124,108,.35); display:grid; place-items:center; font-size:18px; color:var(--accent-2);
  box-shadow:0 8px 18px rgba(10,24,20,.14);
}
.header__brand-text{display:flex;flex-direction:column;max-width:100%;overflow:hidden}
.header__title{font-weight:700;font-size:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header__tag{color:var(--muted);font-size:11px;margin-top:4px;letter-spacing:.28em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-toggle{
  display:inline-flex;align-items:center;gap:10px;padding:9px 12px; border-radius:var(--radius-field);
  border:1px solid var(--border);background:rgba(255,255,255,.85); font-weight:600;cursor:pointer;
  box-shadow:var(--shadow-soft);color:var(--ink); transition:transform .25s ease, box-shadow .25s ease, background .2s ease;
}
.nav-toggle:hover{transform:translateY(-1px);background:#fff}
.nav-toggle__icon{font-size:16px}
.nav-toggle__text{font-size:11px;letter-spacing:.18em;text-transform:uppercase}
body.nav-collapsed .nav-toggle__icon{transform:rotate(180deg)}

.header__nav{margin-left:0;display:flex;flex-direction:column;gap:8px;overflow:auto;padding-right:4px}
.nav__link{
  position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-pill);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink);
  border:1px solid transparent;background:transparent; transition:background .2s ease,border-color .2s ease,transform .25s ease, box-shadow .25s ease;
  overflow:hidden;
}
.nav__link::after{
  content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(50,199,162,.08),rgba(50,199,162,0));
  opacity:0; transition:.25s ease; pointer-events:none;
}
.nav__link:hover{background:rgba(255,255,255,.75);border-color:rgba(50,199,162,.35);transform:translateX(3px);box-shadow:0 10px 20px rgba(8,24,20,.12)}
.nav__link:hover::after{opacity:1}
.nav__link--cta{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--btnText);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 12px 24px rgba(16,124,108,.25);
}
.nav__link--cta:hover{filter:saturate(1.05)}
.nav__link--cta .nav__ico{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45);color:#fff}
.nav__ico{
  width:30px;height:30px;display:grid;place-items:center;text-align:center;font-size:16px;position:relative;z-index:1;transition:transform .25s ease;
  background:rgba(255,255,255,.75);border-radius:12px;border:1px solid rgba(22,124,108,.25);
}
.nav__text{
  white-space:nowrap;position:relative;z-index:1;max-width:calc(var(--sidebar-w) - 150px);overflow:hidden;text-overflow:ellipsis;
  opacity:1;transform:translateX(0);transition:opacity .2s ease, transform .2s ease, max-width .25s ease;
}
.nav__badge{
  margin-left:auto;background:rgba(255,255,255,.85);border:1px solid var(--border);border-radius:var(--radius-pill);
  padding:2px 8px;font-size:12px;color:var(--ink);max-width:60px;opacity:1;transform:translateX(0);
  transition:opacity .2s ease, transform .2s ease, max-width .25s ease;
}
.nav__badge:empty{display:none}
.active-underline{position:relative;background:rgba(50,199,162,.18);border-color:rgba(50,199,162,.45)}

body.nav-collapsed .header{width:var(--sidebar-w-collapsed)}
body.nav-collapsed .header__brand-text,
body.nav-collapsed .nav__text,
body.nav-collapsed .nav__badge,
body.nav-collapsed .nav-toggle__text{max-width:0; opacity:0; transform:translateX(-8px); pointer-events:none;}
body.nav-collapsed .header__brand{justify-content:center}
body.nav-collapsed .nav__link{justify-content:center;padding:12px 8px;transform:none;background:transparent;border-color:transparent}
body.nav-collapsed .nav__link:hover{background:transparent;border-color:transparent;box-shadow:none}
body.nav-collapsed .nav__ico{margin:0; transform:scale(1.08)}
body.nav-collapsed .nav-toggle{justify-content:center}
body.nav-collapsed .active-underline .nav__ico{background:rgba(50,199,162,.25);border-color:rgba(50,199,162,.35)}
body.nav-open .nav__link{animation:navIn .35s ease}
body.nav-open .nav__link:nth-child(1){animation-delay:.02s}
body.nav-open .nav__link:nth-child(2){animation-delay:.05s}
body.nav-open .nav__link:nth-child(3){animation-delay:.08s}
body.nav-open .nav__link:nth-child(4){animation-delay:.11s}
body.nav-open .nav__link:nth-child(5){animation-delay:.14s}
body.nav-open .nav__link:nth-child(6){animation-delay:.17s}
body.nav-open .nav__link:nth-child(7){animation-delay:.20s}
body.nav-open .nav__link:nth-child(8){animation-delay:.23s}

@keyframes navIn{
  from{opacity:.5;transform:translateX(-8px)}
  to{opacity:1;transform:translateX(0)}
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:var(--radius-pill);
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--btnText);font-weight:700;
  border:1px solid rgba(255,255,255,.7);box-shadow:0 14px 28px rgba(16,124,108,.25);cursor:pointer;
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;position:relative;overflow:hidden;
}
.btn::after{
  content:"";position:absolute;top:-60%;right:-60%;width:60%;height:200%;
  background:linear-gradient(120deg,rgba(255,255,255,.35),rgba(255,255,255,0));transform:translateX(0) rotate(12deg);
  opacity:0;transition:.35s ease;
}
.btn:hover{filter:saturate(1.05);transform:translateY(-1px)}
.btn:hover::after{opacity:1;transform:translateX(-40%) rotate(12deg)}
.btn:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.btn.outline{background:rgba(255,255,255,.85);color:var(--ink);border:1px solid var(--border);box-shadow:none}

.badge{display:inline-block;background:var(--pill);padding:4px 10px;border-radius:var(--radius-pill);font-size:12px;color:var(--ink);border:1px solid var(--border)}
.grid{display:grid;gap:18px}
.grid--products{grid-template-columns:repeat(3,1fr)}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(247,252,249,.85));
  border-radius:var(--radius);box-shadow:var(--shadow-soft);overflow:hidden;border:1px solid var(--border);
  position:relative;
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.5);pointer-events:none;mix-blend-mode:soft-light;
}
.card__img{width:100%;height:240px;object-fit:cover;background:#e7f0ea}
.card__body{padding:16px}
.price{font-weight:700;color:var(--accent-2)}
.flags{display:flex;gap:6px;margin:8px 0}
.footer{border-top:1px solid var(--border);margin-top:40px;padding:26px 0;color:var(--muted);background:var(--glass);backdrop-filter:blur(12px)}

/* forms */
input,select,textarea{
  font-family:var(--font-body);
  background:rgba(255,255,255,.88) !important;
  border:1px solid var(--border-strong) !important;
  color:var(--ink) !important;
  border-radius:var(--radius-field) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 6px 16px rgba(10,24,20,.08);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent) !important;box-shadow:0 0 0 3px var(--ring) !important;background:#fff !important;outline:none}
input[type=range]{background:transparent !important;box-shadow:none !important;border:0 !important}
input[type=range]::-webkit-slider-thumb{background:var(--accent);border:2px solid #fff;box-shadow:0 2px 6px rgba(10,24,20,.2)}
input[type=range]::-moz-range-thumb{background:var(--accent);border:2px solid #fff;box-shadow:0 2px 6px rgba(10,24,20,.2)}

/* product */
.product{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.product__img{width:100%;height:460px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.qty{display:flex;align-items:center;gap:8px}
.qty input{width:72px;height:44px;padding:0 8px;font-size:16px}
.qty button{width:44px;height:44px;border-radius:var(--radius-field)}

/* mini cart drawer */
.drawer{
  position:fixed;top:0;right:-420px;width:360px;max-width:90vw;height:100dvh;background:var(--glass);
  box-shadow:-12px 0 28px rgba(10,24,20,.18);transition:.25s;z-index:1000;display:flex;flex-direction:column;
  border-left:1px solid var(--border);border-radius:var(--radius) 0 0 var(--radius);
  backdrop-filter:blur(14px);
}
.drawer.open{right:0}
.drawer__head{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border)}
.drawer__list{flex:1;overflow:auto;padding:12px}
.drawer__item{display:grid;grid-template-columns:60px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--border)}
.drawer__img{width:60px;height:60px;object-fit:cover;border-radius:var(--radius-field);background:#e7f0ea}
.drawer__foot{border-top:1px solid var(--border);padding:16px;display:grid;gap:8px}

/* modal */
#lp-backdrop{position:fixed;inset:0;background:rgba(8,20,16,.45);display:none;z-index:940;backdrop-filter:blur(2px)}
.modal{position:fixed;inset:0;display:none;place-items:center;z-index:950}
.modal__box{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(247,252,249,.88));
  border-radius:var(--radius);box-shadow:var(--shadow);width:min(520px,92vw);padding:22px;border:1px solid var(--border);
  backdrop-filter:blur(12px);
}
.modal.open,.modal.open+#lp-backdrop{display:grid}
.modal__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.modal__title{font-weight:700;font-family:var(--font-display)}
.modal__close{background:none;border:0;font-size:22px;cursor:pointer;color:var(--ink)}
.modal .grid{grid-template-columns:1fr !important}
@media (min-width: 720px){
  .modal .grid{grid-template-columns:repeat(2, minmax(0,1fr)) !important}
}

@supports (clip-path: polygon(0 0)){
  .btn,.authbox-btn,.cm-remove,.card,.modal__box,.drawer,.tile,.hero-title,.filter-card{
    border-radius:0;clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  }
  .badge{
    border-radius:0;clip-path:polygon(0 0, calc(100% - var(--cut-xs)) 0, 100% 50%, calc(100% - var(--cut-xs)) 100%, 0 100%, var(--cut-xs) 50%);
  }
}

/* motion */
@keyframes bloom{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes glow{0%{box-shadow:0 0 0 rgba(50,199,162,0)}50%{box-shadow:0 0 18px rgba(50,199,162,.35)}100%{box-shadow:0 0 0 rgba(50,199,162,0)}}
.card,.product,.prod,.hero-title,.tile,.insta-item,.filter-card{animation:bloom .6s ease both}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* mobile */
@media (max-width:900px){
  :root{ --sidebar-w:min(86vw, 320px); --sidebar-w-collapsed:72px; }
  body{padding-left:var(--sidebar-w-collapsed);}
  .header{width:var(--sidebar-w-collapsed);}
  body.nav-open .header{width:var(--sidebar-w);}
  .header__title{font-size:22px}
  .nav__link{font-size:11px}
  .grid--products{grid-template-columns:1fr}
  .product{grid-template-columns:1fr}
  .product__img{height:320px}
}

/* ==== PRODUCT XL ==== */
.productXL{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; margin-top:16px}
.prodXL__gallery{display:grid; gap:10px}
.prodXL__stage{
  position:relative; background:linear-gradient(135deg,rgba(50,199,162,.12),rgba(255,139,106,.12));
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border)
}
.prodXL__stage img{width:100%; height:560px; object-fit:cover; display:block}
.prodXL__thumbs{display:flex; gap:10px; flex-wrap:wrap}
.thumb{border:1px solid var(--border); background:var(--card); padding:0; border-radius:var(--radius-field); box-shadow:var(--shadow-soft); overflow:hidden; cursor:pointer}
.thumb img{width:72px; height:72px; object-fit:cover; display:block}
.thumb.active{outline:2px solid var(--accent)}

.ribbon{position:absolute; top:12px; left:12px; background:var(--accent-2); color:#fff; font-weight:700; font-size:12px; padding:6px 10px; border-radius:var(--radius-pill); box-shadow:var(--shadow-soft)}
.ribbon--sale{ background:var(--accent-3) }
.ribbon--new{ background:var(--accent-4); left:auto; right:12px; color:#1a2b28 }

.prodXL__info{display:grid; gap:14px; align-content:start}
.prodXL__title{margin:0; font-size:32px; line-height:1.2; font-family:var(--font-display)}
.prodXL__priceRow{display:flex; align-items:center; justify-content:space-between; gap:12px}
.prodXL__price{font-size:28px; font-weight:800; color:var(--accent-2)}
.prodXL__flags{display:flex; gap:8px; align-items:center}
.badge--sale{ background:rgba(255,139,106,.18); color:var(--accent-3) }

.prodXL__buy{display:flex; gap:10px; align-items:center}
.btn--xl{height:48px; padding:0 18px}
.btn--lite{background:rgba(255,255,255,.85); color:var(--ink); box-shadow:none; border:1px solid var(--border)}
.btn--lite:hover{filter:none; background:#fff}
.qty input{width:80px; height:44px; text-align:center}

.prodXL__meta{display:grid; gap:8px; margin-top:4px}
.meta__row{display:grid; grid-template-columns:120px 1fr; gap:8px}
.meta__key{color:var(--muted)}
.meta__val{color:var(--ink)}

.prodXL__details summary{cursor:pointer; font-weight:700; margin:8px 0}
.prodXL__desc{white-space:pre-wrap}

.prodXL__trust{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}
.trust__item{background:var(--glass); border:1px solid var(--border); border-radius:var(--radius-field); padding:8px 12px}

/* breadcrumbs */
.breadcrumbs{margin:8px 0 12px; color:var(--muted)}
.breadcrumbs a{color:var(--ink)}

/* mobile buy bar */
.buyBar{
  position:fixed; left:0; right:0; bottom:-120px; display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:10px 14px; background:var(--glass); border-top:1px solid var(--border);
  box-shadow:0 -8px 18px rgba(10,24,20,.12); transition:transform .25s, bottom .25s; z-index:999;
  border-radius:var(--radius) var(--radius) 0 0; backdrop-filter:blur(12px)
}
.buyBar__price{font-weight:800; font-size:18px}
.buyBar__btn{height:42px}

@media (max-width: 900px){
  .productXL{grid-template-columns:1fr}
  .prodXL__stage img{height:420px}
  .meta__row{grid-template-columns:100px 1fr}
  .buyBar{bottom:0}
  main{padding-bottom:72px}
}

.mini-remove { display: none !important; }