/* ============================================================
   NORA LOZZA — Storefront UI Kit
   Built on the shared tokens in ../../colors_and_type.css
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--nl-cream);color:var(--fg1);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
img{max-width:100%}
::selection{background:var(--nl-sage);color:var(--nl-cream)}

.nl-app{height:100vh;display:flex;flex-direction:column;overflow:hidden}
.nl-scroll{flex:1;overflow-y:auto;scroll-behavior:smooth}

/* ---------------- HEADER ---------------- */
.nl-header{position:sticky;top:0;z-index:40;flex:none}
.nl-announce{background:var(--nl-ink);color:var(--nl-cream);text-align:center;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:9px 16px;font-weight:300}
.nl-bar{position:relative;display:flex;align-items:center;gap:24px;
  padding:18px 40px;background:rgba(245,240,230,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);transition:padding .3s var(--ease)}
.nl-header[data-scrolled="true"] .nl-bar{padding:12px 40px}
.nl-nav{display:flex;gap:28px}
.nl-navitem{display:flex;align-items:center;background:none;border:none;padding:6px 0;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--nl-ink);
  position:relative;transition:opacity .2s}
.nl-navitem::after{content:'';position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--nl-ink);transition:width .3s var(--ease)}
.nl-navitem[data-on="true"]::after,.nl-navitem:hover::after{width:100%}
.nl-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:none;border:none;display:flex}
.nl-logo img{height:26px;display:block}
.nl-actions{margin-left:auto;display:flex;gap:16px;align-items:center}
.nl-ic{background:none;border:none;color:var(--nl-ink);padding:4px;display:flex;position:relative;transition:opacity .2s}
.nl-ic:hover{opacity:.55}
.nl-cartdot{position:absolute;top:-2px;right:-4px;background:var(--nl-cognac);color:#fff;
  font-size:9px;min-width:15px;height:15px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 3px}

/* MEGA MENU */
.nl-mega{position:absolute;left:0;right:0;top:100%;background:var(--nl-paper);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);animation:megaIn .28s var(--ease)}
@keyframes megaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.nl-mega-inner{display:flex;gap:40px;padding:32px 40px;max-width:1100px;margin:0 auto}
.nl-mega-cols{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px 20px;align-content:start}
.nl-mega-link{background:none;border:none;text-align:left;font-size:13px;font-weight:300;
  color:var(--fg2);padding:6px 0;letter-spacing:.02em;transition:color .2s}
.nl-mega-link:hover{color:var(--nl-ink)}
.nl-mega-feat{width:300px;position:relative;overflow:hidden;border-radius:var(--r-sm);cursor:pointer}
.nl-mega-feat img{width:100%;height:160px;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.nl-mega-feat:hover img{transform:scale(1.04)}
.nl-mega-feat div{position:absolute;left:18px;bottom:16px}
.nl-mega-feat p{color:var(--nl-cream);font-size:14px;margin:4px 0 0;max-width:220px}
.nl-mega-feat::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(25,23,19,.55),transparent 60%)}

/* ---------------- BUTTONS ---------------- */
.nl-link{display:inline-flex;align-items:center;gap:7px;background:none;border:none;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--nl-ink);transition:gap .2s}
.nl-link:hover{gap:11px}
.nl-link-sm{background:none;border:none;font-size:11px;letter-spacing:.06em;color:var(--nl-stone);text-decoration:underline;text-underline-offset:3px}
.nl-btn-outline{background:none;border:1px solid var(--nl-ink);color:var(--nl-ink);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:14px 34px;transition:.25s var(--ease)}
.nl-btn-outline:hover{background:var(--nl-ink);color:var(--nl-cream)}
.nl-btn-outline-light{background:none;border:1px solid var(--nl-cream);color:var(--nl-cream);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:14px 34px;transition:.25s var(--ease)}
.nl-btn-outline-light:hover{background:var(--nl-cream);color:var(--nl-ink)}

/* ---------------- HERO ---------------- */
.nl-hero{position:relative;height:78vh;min-height:480px;overflow:hidden;background:var(--nl-bone)}
.nl-hero-slide{position:absolute;inset:0;transition:opacity 1.1s var(--ease)}
.nl-hero-slide img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.nl-hero-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(25,23,19,.35),transparent 45%)}
.nl-hero-copy{position:absolute;left:0;right:0;bottom:56px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.nl-hero-title{font-family:var(--font-display);font-weight:300;color:var(--nl-cream);
  font-size:62px;line-height:1.02;margin:0;letter-spacing:.05em;text-transform:uppercase;text-shadow:0 2px 30px rgba(25,23,19,.3)}
.nl-hero-dots{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:9px}
.nl-hero-dots button{width:8px;height:8px;border-radius:999px;border:1px solid var(--nl-cream);background:none;padding:0;transition:.3s}
.nl-hero-dots button[data-on="true"]{background:var(--nl-cream)}

/* ---------------- SECTIONS ---------------- */
.nl-section{padding:80px 40px}
.nl-section-head{display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:36px}
.nl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 24px}
.nl-grid-plp{grid-template-columns:repeat(3,1fr);gap:48px 28px}

/* ---------------- PRODUCT CARD ---------------- */
.nl-card{display:flex;flex-direction:column}
.nl-card-ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--nl-bone);cursor:pointer}
.nl-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),opacity .5s var(--ease)}
.nl-card:hover .nl-card-img{transform:scale(1.035)}
.nl-card-img2{opacity:0}
.nl-card-quick{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;animation:quickIn .3s var(--ease)}
@keyframes quickIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.nl-card-quick .nl-quick-add{width:100%;background:rgba(245,240,230,.94);border:1px solid rgba(25,23,19,.12);
  color:var(--nl-ink);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:12px;transition:.2s}
.nl-card-quick .nl-quick-add:hover{background:var(--nl-ink);color:var(--nl-cream)}
.nl-quick-sizes{display:flex;gap:5px;background:rgba(245,240,230,.94);padding:7px;border:1px solid rgba(25,23,19,.12)}
.nl-quick-sz{flex:1;background:none;border:none;font-size:12px;color:var(--nl-ink);padding:7px 0;transition:.18s}
.nl-quick-sz:hover,.nl-quick-sz[data-on="true"]{background:var(--nl-ink);color:var(--nl-cream)}
.nl-card-meta{padding-top:15px;cursor:pointer}
.nl-card-name{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--nl-ink)}
.nl-card-price{font-size:13px;color:var(--fg2);margin-top:5px}
.nl-card-avail{font-size:11px;color:var(--fg3);margin-top:8px}
.nl-card-dots{display:flex;gap:6px;margin-top:7px}
.nl-dot{width:13px;height:13px;border-radius:999px;box-shadow:0 0 0 1px rgba(25,23,19,.15)}

/* ---------------- EDITORIAL BANNER ---------------- */
.nl-editorial{display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch;cursor:pointer;background:var(--nl-sage)}
.nl-editorial img{width:100%;height:100%;max-height:600px;object-fit:cover;display:block}
.nl-editorial-text{padding:72px 64px;display:flex;flex-direction:column;justify-content:center;gap:22px;color:var(--nl-cream)}
.nl-editorial-text h2{font-family:var(--font-display);font-weight:300;font-size:48px;margin:0;color:var(--nl-cream);letter-spacing:.05em;text-transform:uppercase}
.nl-editorial-text p{color:rgba(245,240,230,.86);font-weight:300;font-size:17px;line-height:1.6;max-width:420px;margin:0}
.nl-editorial-text .nl-btn-outline{border-color:var(--nl-cream);color:var(--nl-cream);align-self:flex-start}
.nl-editorial-text .nl-btn-outline:hover{background:var(--nl-cream);color:var(--nl-sage-deep)}

/* ---------------- COLLECTION TILES ---------------- */
.nl-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--nl-cream)}
.nl-tile{position:relative;aspect-ratio:1/1;overflow:hidden;border:none;padding:0;background:var(--nl-bone)}
.nl-tile img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.nl-tile:hover img{transform:scale(1.05)}
.nl-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(25,23,19,.4),transparent 55%)}
.nl-tile-label{position:absolute;left:28px;bottom:24px;z-index:2;display:flex;align-items:center;gap:9px;
  color:var(--nl-cream);font-size:18px;letter-spacing:.14em;text-transform:uppercase}

/* ---------------- NEWSLETTER ---------------- */
.nl-news{padding:90px 40px;text-align:center;background:var(--nl-bone)}
.nl-news h2{font-family:var(--font-display);font-weight:300;font-size:38px;margin:0;letter-spacing:.05em;text-transform:uppercase}
.nl-news p{color:var(--fg3);margin:14px 0 28px;font-weight:300}
.nl-news-form{display:flex;gap:0;max-width:440px;margin:0 auto;border-bottom:1px solid var(--nl-ink)}
.nl-news-form input{flex:1;background:none;border:none;outline:none;font-family:inherit;font-weight:300;font-size:15px;padding:12px 4px;color:var(--nl-ink)}
.nl-news-form input::placeholder{color:var(--nl-taupe)}
.nl-news-form button{background:none;border:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--nl-ink);padding:0 10px}

/* ---------------- PLP ---------------- */
.nl-plp-hero{text-align:center;padding:72px 40px 12px}
.nl-plp-bar{display:flex;align-items:center;justify-content:space-between;
  padding:24px 40px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--nl-cream);z-index:5}
.nl-filters{display:flex;gap:10px}
.nl-filter{background:none;border:1px solid var(--line-strong);color:var(--fg2);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:9px 18px;border-radius:999px;transition:.2s}
.nl-filter[data-on="true"]{background:var(--nl-ink);border-color:var(--nl-ink);color:var(--nl-cream)}
.nl-sort{display:flex;align-items:center;gap:16px}
.nl-sort select{font-family:inherit;font-size:12px;letter-spacing:.06em;background:none;border:none;border-bottom:1px solid var(--nl-ink);padding:5px 18px 5px 2px;color:var(--nl-ink);outline:none}
.nl-grid-plp{padding:48px 40px 90px}

/* ---------------- PDP ---------------- */
.nl-breadcrumb{display:inline-flex;align-items:center;gap:8px;background:none;border:none;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);margin:28px 0 0 40px;transition:gap .2s}
.nl-breadcrumb:hover{gap:12px;color:var(--nl-ink)}
.nl-pdp-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;padding:24px 40px 90px;max-width:1240px;margin:0 auto}
.nl-pdp-gallery{display:flex;flex-direction:column;gap:14px}
.nl-pdp-main{aspect-ratio:4/5;overflow:hidden;background:var(--nl-bone)}
.nl-pdp-main img{width:100%;height:100%;object-fit:cover}
.nl-pdp-thumbs{display:flex;gap:12px}
.nl-thumb{width:78px;height:96px;overflow:hidden;border:1px solid transparent;background:var(--nl-bone);padding:0}
.nl-thumb[data-on="true"]{border-color:var(--nl-ink)}
.nl-thumb img{width:100%;height:100%;object-fit:cover}
.nl-pdp-info{padding-top:8px;position:sticky;top:24px;align-self:start}
.nl-pdp-name{font-family:var(--font-display);font-weight:300;font-size:38px;line-height:1.08;margin:10px 0 0;letter-spacing:.045em;text-transform:uppercase}
.nl-pdp-price{font-size:18px;color:var(--fg1);margin-top:14px;letter-spacing:.03em}
.nl-pdp-blurb{font-weight:300;font-size:16px;line-height:1.65;color:var(--fg2);margin:22px 0 0;max-width:440px}
.nl-pdp-opt{margin-top:30px}
.nl-opt-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.nl-cols{display:flex;gap:12px}
.nl-co{width:28px;height:28px;border-radius:999px;border:none;box-shadow:0 0 0 1px rgba(25,23,19,.15);transition:.2s}
.nl-co[data-on="true"]{box-shadow:0 0 0 2px var(--nl-cream),0 0 0 3px var(--nl-ink)}
.nl-sizes{display:flex;gap:9px;flex-wrap:wrap}
.nl-sz{width:48px;height:48px;background:none;border:1px solid var(--line-strong);color:var(--nl-ink);font-size:14px;transition:.18s}
.nl-sz:hover{border-color:var(--nl-ink)}
.nl-sz[data-on="true"]{background:var(--nl-ink);border-color:var(--nl-ink);color:var(--nl-cream)}
.nl-add{position:relative;width:100%;margin-top:34px;background:var(--nl-ink);color:var(--nl-cream);border:none;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:18px;transition:.2s var(--ease)}
.nl-add[data-ready="false"]{background:var(--nl-taupe);cursor:default}
.nl-add[data-ready="true"]:hover{background:var(--nl-charcoal)}
.nl-add[data-ready="true"]:active{transform:translateY(1px)}
.nl-wish{width:100%;margin-top:12px;background:none;border:none;display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg2);padding:12px;transition:color .2s}
.nl-wish:hover{color:var(--nl-cognac)}
.nl-accordions{margin-top:36px;border-top:1px solid var(--line)}
.nl-acc{border-bottom:1px solid var(--line)}
.nl-acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;
  padding:20px 0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--nl-ink)}
.nl-acc-body{font-weight:300;font-size:14px;line-height:1.6;color:var(--fg2);padding:0 0 22px;max-width:440px;animation:accIn .3s var(--ease)}
@keyframes accIn{from{opacity:0}to{opacity:1}}

/* ---------------- CART DRAWER ---------------- */
.nl-scrim{position:fixed;inset:0;background:rgba(25,23,19,.34);opacity:0;pointer-events:none;transition:opacity .35s var(--ease);z-index:50}
.nl-scrim[data-on="true"]{opacity:1;pointer-events:auto}
.nl-cart{position:fixed;top:0;right:0;height:100%;width:420px;max-width:92vw;background:var(--nl-cream);
  z-index:51;transform:translateX(100%);transition:transform .4s var(--ease);display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.nl-cart[data-on="true"]{transform:none}
.nl-cart-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line)}
.nl-cart-ship{padding:16px 24px;background:var(--nl-bone)}
.nl-cart-ship span{font-size:12px;color:var(--fg2);font-weight:300}
.nl-cart-track{height:3px;background:var(--nl-sand);margin-top:10px;border-radius:999px;overflow:hidden}
.nl-cart-fill{height:100%;background:var(--nl-sage);transition:width .5s var(--ease)}
.nl-cart-items{flex:1;overflow-y:auto;padding:8px 24px}
.nl-cart-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--fg3)}
.nl-cart-item{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.nl-cart-thumb{width:84px;height:104px;flex:none;overflow:hidden;background:var(--nl-bone)}
.nl-cart-thumb img{width:100%;height:100%;object-fit:cover}
.nl-cart-detail{flex:1;display:flex;flex-direction:column;gap:5px}
.nl-cart-name{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--nl-ink)}
.nl-cart-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.nl-qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong)}
.nl-qty button{width:30px;height:30px;background:none;border:none;display:flex;align-items:center;justify-content:center;color:var(--nl-ink)}
.nl-qty span{min-width:26px;text-align:center;font-size:13px}
.nl-cart-remove{align-self:flex-start;background:none;border:none;font-size:11px;color:var(--fg3);text-decoration:underline;text-underline-offset:3px;margin-top:4px;padding:0}
.nl-cart-footer{border-top:1px solid var(--line);padding:22px 24px}
.nl-cart-sub{display:flex;justify-content:space-between;font-size:14px;letter-spacing:.04em;color:var(--nl-ink)}
.nl-checkout{width:100%;background:var(--nl-ink);color:var(--nl-cream);border:none;font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:17px;transition:.2s}
.nl-checkout:hover{background:var(--nl-charcoal)}

/* ---------------- SEARCH ---------------- */
.nl-search-overlay{position:fixed;inset:0;z-index:60;opacity:0;pointer-events:none;transition:opacity .3s}
.nl-search-overlay[data-on="true"]{opacity:1;pointer-events:auto}
.nl-search-scrim{position:absolute;inset:0;background:rgba(25,23,19,.34)}
.nl-search-panel{position:relative;z-index:2;background:var(--nl-cream);padding:28px 40px 40px;animation:searchIn .35s var(--ease)}
@keyframes searchIn{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:1}}
.nl-search-bar{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--nl-ink);padding-bottom:14px}
.nl-search-bar input{flex:1;background:none;border:none;outline:none;font-family:inherit;font-weight:300;font-size:22px;color:var(--nl-ink)}
.nl-search-bar input::placeholder{color:var(--nl-taupe)}
.nl-search-sug{margin-top:26px}
.nl-search-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:16px}
.nl-search-item{background:none;border:none;text-align:left;padding:0}
.nl-search-item img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--nl-bone)}
.nl-search-item span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-top:10px;color:var(--fg2)}

/* ---------------- ACCOUNT ---------------- */
.nl-account{max-width:420px;margin:0 auto;padding:80px 24px 120px;text-align:center}
.nl-login{display:flex;flex-direction:column;gap:18px;text-align:left}
.nl-login label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);display:flex;flex-direction:column;gap:8px}
.nl-login input{font-family:inherit;font-size:15px;font-weight:300;background:none;border:none;border-bottom:1px solid var(--nl-taupe);padding:8px 0;outline:none;color:var(--nl-ink)}
.nl-login input:focus{border-color:var(--nl-ink)}

/* ---------------- TOAST ---------------- */
.nl-toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);z-index:70;
  background:var(--nl-ink);color:var(--nl-cream);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 26px;opacity:0;pointer-events:none;transition:.35s var(--ease)}
.nl-toast[data-on="true"]{opacity:1;transform:translate(-50%,0)}

/* ---------------- FOOTER ---------------- */
.nl-footer{background:var(--nl-ink);color:var(--nl-cream);padding:64px 40px 28px}
.nl-footer-top{display:grid;grid-template-columns:1.2fr 2fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(245,240,230,.14)}
.nl-footer-brand img{height:22px;opacity:.95}
.nl-footer-brand p{color:var(--nl-taupe);font-weight:300;font-size:14px;line-height:1.6;max-width:300px;margin:18px 0 22px}
.nl-social{display:flex;gap:16px}
.nl-social a{color:var(--nl-cream);opacity:.8;cursor:pointer;transition:opacity .2s}
.nl-social a:hover{opacity:1}
.nl-footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.nl-footer-col{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.nl-footer-col button{background:none;border:none;color:var(--nl-cream);opacity:.78;font-size:13px;font-weight:300;padding:0;text-align:left;transition:opacity .2s}
.nl-footer-col button:hover{opacity:1}
.nl-footer-bot{display:flex;justify-content:space-between;padding-top:24px;color:var(--nl-taupe);font-size:11px;letter-spacing:.06em}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1080px){
  .nl-grid{grid-template-columns:repeat(3,1fr)}
  .nl-grid-plp{grid-template-columns:repeat(2,1fr)}
  .nl-pdp-grid{grid-template-columns:1fr;gap:32px}
  .nl-pdp-info{position:static}
  .nl-editorial{grid-template-columns:1fr}
}
@media (max-width:720px){
  .nl-bar{padding:14px 18px}.nl-nav{display:none}
  .nl-section{padding:48px 18px}.nl-grid{grid-template-columns:repeat(2,1fr);gap:20px 14px}
  .nl-hero-title{font-size:44px}.nl-editorial-text{padding:44px 28px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}