/* ========== FINAL STYLES.CSS (FIXED: height:auto) ========== */
/* Stable, cleaned, preserves animations, equalizes card heights, touch micro-zoom, responsive fixes for small phones */

:root{
  --accent:#FFC400;
  --bg:#0a0a0a;
  --card:#111217;
  --text:#f4f4f4;
  --muted:#9a9a9a;
  --old-price:#7a7a7a;
  --gap-desktop:18px;
  --gap-tablet:14px;
  --gap-mobile:10px;
}

/* Base */
*{box-sizing:border-box;font-family:Inter,system-ui,'Segoe UI',Roboto,Arial,Helvetica,sans-serif}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#060606,#0a0a0a);color:var(--text);-webkit-font-smoothing:antialiased}

/* TOPBAR / BRAND */
.topbar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  padding-left:calc(16px + env(safe-area-inset-left,0));
  padding-right:calc(16px + env(safe-area-inset-right,0));
  background:rgba(255,255,255,0.02);
  border-bottom:1px solid rgba(255,255,255,0.03);
  z-index:50;
}

/* Brand / Logo (support both .brand img and .logo) */
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto}
.brand img, .logo {
  width: clamp(38px, 5.2vw, 44px);
  height: auto;
  max-height:44px;
  object-fit:contain;
  display:block;
  transform:none; /* local protection */
}
.brand-text{font-weight:800;font-size:14px;line-height:1.05;text-transform:uppercase;display:flex;flex-direction:column;margin:0;padding:0;min-width:0}
.brand-text .line1, .brand-text .line2{display:block}

/* Insta button */
.insta-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 auto;margin-left:6px;margin-right:12px}
.insta-btn img{width:100%;height:100%;object-fit:contain;border-radius:8px;display:block;animation:headerPulse 1.6s ease-in-out infinite}
@keyframes headerPulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.86}100%{transform:scale(1);opacity:1}}

/* Spacer */
.topbar .spacer{flex:1 1 auto;min-width:8px}

/* Container + Grid */
.container{max-width:1200px;margin:18px auto;padding-left:calc(12px + env(safe-area-inset-left,0));padding-right:calc(12px + env(safe-area-inset-right,0));box-sizing:border-box}

.grid{
  display:grid;
  gap:var(--gap-desktop);
  grid-template-columns:repeat(4,1fr);
  align-items:stretch; /* equal-height cells */
  width:100%;
}
@media (max-width:1199px){ .grid{grid-template-columns:repeat(3,1fr); gap:var(--gap-tablet);} }
@media (max-width:899px){ .grid{grid-template-columns:repeat(2,1fr); gap:var(--gap-mobile);} }
@media (max-width:420px){ .container{padding-left:calc(10px + env(safe-area-inset-left,0)); padding-right:calc(10px + env(safe-area-inset-right,0));} .grid{gap:8px;} }

/* CARD base: equal height + consistent layout */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08));
  border-radius:12px;
  padding:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.6);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-align:center;
  transition: box-shadow .22s ease, transform .18s ease;

  /* 🔥 FIX HERE 🔥 */
  height:auto;         /* allow natural height, keep min-height for layout baseline */
  min-height:300px;

  overflow:hidden;
}

/* Hover (mouse only): subtle lift + image zoom */
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-6px); box-shadow:0 18px 48px rgba(0,0,0,0.7); }
  .card:hover .imgwrap img { transform: scale(1.04); }
}

/* Touch devices: do NOT translate card on :hover to avoid "jump" */
@media (pointer: coarse) {
  .card:hover { transform: none; box-shadow:0 10px 26px rgba(0,0,0,0.6); }
}

/* img wrapper: square, does not stretch card vertically */
.imgwrap{
  width:100%;
  aspect-ratio:1/1;
  position:relative;
  border-radius:10px;
  overflow:hidden;
  background:#0f0f0f;
  margin-bottom:8px;
  flex:0 0 auto;
}
.imgwrap img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  transform:scale(1);
  transition: transform .35s ease;
}

/* Touch micro-zoom: support multiple possible class names from JS.
   JS can add either .touch-pulse-card to the CARD or .touch-pulse-img to an outer wrapper.
   Both are supported to be defensive. */
.touch-pulse-card .imgwrap img,
.touch-pulse-img .imgwrap img,
.card.touch-pulse-card .imgwrap img {
  transform: scale(1.04) !important;
}

/* CONTENT: tightened vertical spacing */
.title{
  font-size:15px; line-height:1.05; font-weight:900; text-transform:uppercase;
  margin:6px 6px 4px 6px; min-height:44px; overflow:hidden;
}
.price-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:4px}
.price{font-weight:900;color:var(--accent);font-size:26px;line-height:1}
.price small{font-size:12px;color:var(--text);margin-left:4px}
.old-price{color:var(--old-price);text-decoration:line-through;font-weight:700;font-size:13px;margin-top:2px;opacity:.9}

/* emoji row */
.emoji-row{display:flex;gap:8px;justify-content:center;margin-top:6px}
.e{font-size:20px;display:inline-block;will-change:transform,opacity}

/* actions: push button to bottom to equalize rows */
.actions{margin-top:auto;display:flex;justify-content:center;padding-top:6px}
.btn-primary{
  background:linear-gradient(180deg,var(--accent),#ffb300);
  border:none;padding:10px 14px;border-radius:10px;color:#111;font-weight:900;cursor:pointer;font-size:14px;
  box-shadow:0 10px 30px rgba(255,196,64,0.12);
}
.btn-primary:focus-visible{outline:3px solid rgba(255,196,64,0.18);outline-offset:3px}

/* Floating cart */
.floating-cart{
  position:fixed;
  right:calc(18px + env(safe-area-inset-right,0));
  bottom:calc(18px + env(safe-area-inset-bottom,0));
  width:62px;height:62px;border-radius:50%;
  background:var(--accent);color:#111;display:flex;align-items:center;justify-content:center;padding:6px;
  box-shadow:0 18px 48px rgba(255,196,64,0.16);z-index:9999;
}

/* Cart drawer + preview images (responsive) */
.cart{
  position:fixed; right:0; top:0;
  width:clamp(280px, 40vw, 360px); max-width:100%;
  height:100vh; background:linear-gradient(180deg,#0f0f0f,#111111);
  box-shadow:-12px 0 40px rgba(0,0,0,0.7);
  transform:translateX(100%); transition:transform .28s ease; z-index:950; padding:18px; overflow:auto;
}
.cart.visible{transform:translateX(0)}
.cart-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.03);align-items:center;position:relative}
.cart-item img{width:64px;height:48px;object-fit:cover;border-radius:6px}

/* remove button inside cart item */
.cart-item .remove-btn{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; color:var(--muted); font-size:20px; line-height:1;
  width:34px; height:34px; border-radius:8px; cursor:pointer;
}
.cart-item .remove-btn:hover{ color:#fff; background:rgba(255,255,255,0.03); }

/* small protections (no dangerous global transform resets) */
html,body,.topbar{ will-change:auto; }

/* responsive tweaks for card sizing */
@media (max-width:899px){ .card{min-height:300px} .price{font-size:24px} }
@media (min-width:900px){ .card{min-height:320px} }

/* touch pulse animation class (if JS prefers adding animation class to card itself) */
.touch-pulse-card{ animation: touchPulse .42s cubic-bezier(.2,.9,.2,1); }
@keyframes touchPulse{ 0%{transform:scale(1)} 40%{transform:scale(1.04)} 100%{transform:scale(1)} }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* small-pointer safety */
@media (pointer: coarse){ .card:hover{ transform:none !important; } }

/* Brand two-line support and spacer already above; final mobile overrides follow */

/* ========== MOBILE OVERRIDES (single block, last) ========== */
@media (max-width:420px){
  /* tighter grid gap but keep 2 columns */
  .grid{ gap:6px; }

  /* card: slightly larger presence, but not absurd */
  .card{
    min-height:360px;            /* increased but reasonable */
    padding:8px;
    border-radius:12px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.6);
  }

  .imgwrap{
    aspect-ratio:1/1; margin-bottom:12px; border-radius:10px; flex:0 0 auto;
  }
  .imgwrap img{ position:relative; width:100%; height:100%; object-fit:cover; transform:none; }

  .title{ font-size:17px; min-height:52px; line-height:1.06; margin:8px; }
  .price{ font-size:26px; }

  .actions{ padding-top:8px; margin-top:auto; gap:10px; }
  .btn-primary{ padding:12px 16px; border-radius:12px; font-size:15px; }

  .floating-cart{ right:10px; bottom:10px; width:56px; height:56px; }
  .cart{ width:clamp(300px,44vw,380px); }
}

/* ultra-narrow phones */
@media (max-width:360px){
  .logo{ width:28px; max-height:36px; }
  .insta-btn{ width:26px; height:26px; margin-right:8px; }
  .brand-text{ font-size:12px; }
}

/* Final tiny polish: flash animation for add-to-cart */
.cart.flash{ animation: cartFlash .24s ease; }
@keyframes cartFlash{ 0%{transform:translateX(0)}50%{transform:translateX(-4px)}100%{transform:translateX(0)} }