/* ============================================================
   IT'S ALL LOVE — storefront styles (Option A editorial)
   Depends on ial-tokens.css (loaded first). Mobile-first.
   ============================================================ */

/* ---- Logo ---- */
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.logo svg{width:34px;height:34px;flex:none}
.logo b{font-size:1.05rem;line-height:1}
.logo small{display:block;font-family:var(--font-util);font-weight:500;font-size:.56rem;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}

/* ---- Nav ---- */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-links{display:none}
.cart-link{position:relative;font-weight:600;font-size:.92rem}
.cart-mobile{font-size:1.3rem}
.cart-badge{display:inline-grid;place-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:999px;background:var(--line);color:var(--muted);font-family:var(--font-util);font-size:.68rem;font-weight:700;vertical-align:middle}
.cart-badge.on{background:var(--love);color:#fff}

/* ---- Shop hero ---- */
.shop-hero{padding-top:40px;padding-bottom:8px}
.shop-hero .eyebrow{margin-bottom:12px}
.shop-hero h1{font-size:clamp(2.6rem,12vw,4rem);font-weight:900;text-transform:uppercase}
.shop-hero .lead{margin-top:14px}

/* ---- Category chips ---- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:16px 0 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-family:var(--font-display);font-weight:600;font-size:.88rem;color:var(--muted);white-space:nowrap;transition:var(--dur)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---- Product grid ---- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pcard{display:block}
.pcard-img{position:relative;aspect-ratio:1;border-radius:var(--r-card);overflow:hidden;background:linear-gradient(160deg,var(--paper-2),#eceae4);border:1px solid var(--line)}
.pcard-img img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;left:12px;top:12px;background:var(--love);color:#fff;font-family:var(--font-util);font-size:.62rem;letter-spacing:.12em;padding:5px 8px;border-radius:6px;text-transform:uppercase}
.pcard-row{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:8px}
.pcard-name{font-family:var(--font-display);font-weight:700}
.pcard-price{font-weight:700}
.pcard:hover .pcard-img{transform:translateY(-3px);box-shadow:var(--shadow)}
.pcard-img{transition:var(--dur)}

.empty{color:var(--muted);font-size:1.05rem;padding:40px 0}
.empty a{color:var(--love);font-weight:700}
.notice{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-btn);padding:12px 16px;margin-bottom:20px;color:var(--muted)}

/* ---- Product detail ---- */
.pdp{display:grid;gap:24px;padding-top:24px;padding-bottom:var(--sep)}
.pdp-media{position:relative;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);background:linear-gradient(160deg,var(--paper-2),#eceae4);aspect-ratio:1}
.pdp-media img{width:100%;height:100%;object-fit:cover}
.pdp-ph{width:100%;height:100%}
.pdp-badge{left:14px;top:14px}
.pdp-info h1{font-size:clamp(2rem,8vw,3rem);font-weight:900;text-transform:uppercase;margin:6px 0 10px}
.pdp-price{font-family:var(--font-display);font-weight:800;font-size:1.5rem;margin-bottom:14px}
.pdp-form{margin:22px 0;display:grid;gap:14px}
.fld span{display:block;font-family:var(--font-util);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.fld select,.fld input{width:100%;padding:14px 14px;border:1.5px solid var(--line);border-radius:var(--r-btn);font:inherit;background:#fff}
.qty-fld{max-width:120px}
.pdp-add{margin-top:4px}
.pdp-story{border-top:1px solid var(--line);padding-top:20px;margin-top:6px}
.pdp-story .eyebrow{margin-bottom:8px}
.pdp-story p{color:var(--muted)}

/* ---- Cart ---- */
.cart h1{font-size:clamp(2rem,8vw,3rem);font-weight:900;text-transform:uppercase;margin-bottom:20px}
.cart-list{display:grid;gap:12px;margin-bottom:24px}
.cart-row{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:var(--r-card);padding:12px}
.cart-img{width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line)}
.cart-img img{width:100%;height:100%;object-fit:cover}
.cart-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.cart-name{font-family:var(--font-display);font-weight:700}
.cart-var{font-size:.82rem;color:var(--muted)}
.cart-unit{font-size:.82rem;color:var(--muted)}
.cart-qty{grid-column:2;max-width:80px}
.cart-qty input{width:100%;padding:8px;border:1.5px solid var(--line);border-radius:10px;font:inherit;text-align:center}
.cart-line{grid-column:3;grid-row:1/3;align-self:center;font-weight:700}
.cart-update{margin-top:4px;justify-self:start}
.cart-summary{border-top:2px solid var(--ink);padding-top:18px;max-width:420px;margin-left:auto}
.srow{display:flex;justify-content:space-between;padding:6px 0;color:var(--muted)}
.srow.total{color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:1.3rem;border-top:1px solid var(--line);margin-top:8px;padding-top:14px}
.ship-hint{font-size:.82rem;color:var(--love);margin:2px 0 8px}
.cart-summary form{margin-top:16px}
.cart-continue{display:inline-block;margin-top:14px;color:var(--muted);font-weight:600}

/* ---- Success ---- */
.success h1{font-size:clamp(2.2rem,9vw,3.4rem);font-weight:900;text-transform:uppercase;margin:8px 0 12px}
.receipt{max-width:460px;border:1px solid var(--line);border-radius:var(--r-card);padding:20px;margin:24px 0}
.rrow{display:flex;justify-content:space-between;padding:7px 0;color:var(--muted)}
.rrow.total{color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:1.2rem;border-top:1px solid var(--line);margin-top:8px;padding-top:14px}

/* ---- Footer ---- */
.foot{background:var(--ink);color:#fff;padding:44px 0 26px;margin-top:40px}
.foot-in{display:flex;flex-direction:column;gap:22px}
.footlogo{color:#fff}.footlogo b{color:#fff}
.foot-m{color:#bbb;margin-top:12px;max-width:34ch}
.foot-links{display:flex;flex-direction:column;gap:8px}
.foot-links a{color:#ddd}
.foot-links a:hover{color:var(--love)}
.foot-cr{border-top:1px solid #262626;margin-top:22px;padding-top:18px;color:#777;font-size:.82rem}

/* ============ DESKTOP ============ */
@media(min-width:768px){
  .nav-in{height:76px}
  .nav-links{display:flex;align-items:center;gap:24px}
  .nav-links a{font-weight:600;font-size:.92rem}
  .nav-links a:not(.cart-link):hover{color:var(--love)}
  .cart-mobile{display:none}
  .grid{grid-template-columns:repeat(3,1fr);gap:22px}
  .pdp{grid-template-columns:1fr 1fr;gap:44px;align-items:start;padding-top:44px}
  .foot-in{flex-direction:row;justify-content:space-between;align-items:flex-start}
  .foot-links{align-items:flex-end}
}
@media(min-width:1100px){
  .grid{grid-template-columns:repeat(4,1fr)}
}