/* assets/css/styles.css */
/* =========================================================
   33Giri Catalogo — single stylesheet
   Target: match screenshots (public + modals + admin)
========================================================= */

/* =========================================================
   FONTS — Kazer Studio Fluro (local)
   Metti i file in: assets/fonts/
========================================================= */
@font-face{
  font-family: "Fluro";
  src: url("../fonts/kazer-studio-fluro-light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Fluro";
  src: url("../fonts/kazer-studio-fluro.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Fluro";
  src: url("../fonts/kazer-studio-fluro-semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Fluro";
  src: url("../fonts/kazer-studio-fluro-bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* opzionale: outline come famiglia separata */
@font-face{
  font-family: "Fluro Outline";
  src: url("../fonts/kazer-studio-fluro-bold-outline.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  /* Public */
  --public-bg: #f6f7fb;
  --public-text: #0f172a;
  --public-muted: rgba(15,23,42,.60);
  --public-line: rgba(15,23,42,.10);

  --teal-900:#0b2f3a;
  --teal-800:#0e3a48;
  --teal-700:#0f4a5e;
  --teal-650:#13576d;

  --white:#ffffff;

  /* Cards */
  --card-border: rgba(15,23,42,.10);
  --card-shadow: 0 12px 24px rgba(15,23,42,.07);
  --card-radius: 16px;

  /* Chips */
  --chip-green-bg: rgba(108, 141, 115, .26);
  --chip-green-bd: rgba(108, 141, 115, .35);
  --chip-green-tx: rgba(214, 255, 224, .92);

  --chip-blue-bg: rgba(92, 132, 155, .22);
  --chip-blue-bd: rgba(92, 132, 155, .34);
  --chip-blue-tx: rgba(219, 244, 255, .92);

  /* Modal */
  --modal-shadow: 0 26px 70px rgba(0,0,0,.35);

  /* WhatsApp */
  --wa: #63cf71;
  --wa-shadow: 0 18px 34px rgba(99,207,113,.24);

  /* Admin */
  --admin-bg-top:#0a1320;
  --admin-bg-bot:#070e16;

  --admin-panel: rgba(255,255,255,.045);
  --admin-panel-bd: rgba(255,255,255,.08);
  --admin-line: rgba(255,255,255,.08);
  --admin-text: rgba(255,255,255,.92);
  --admin-muted: rgba(255,255,255,.55);

  --admin-accent-bg: rgba(156, 215, 156, .35);
  --admin-accent-bd: rgba(156, 215, 156, .30);
  --admin-accent-tx: rgba(235, 255, 240, .95);

  --radius-10:10px;
  --radius-12:12px;
  --radius-14:14px;
  --radius-16:16px;
  --radius-18:18px;
  --radius-20:20px;
  --radius-22:22px;

  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  /* ✅ display font (Fluro) */
  --font-display: "Fluro", var(--font);
}

/* Reset */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family:var(--font); }
a{ color:inherit; text-decoration:none; }
button,input,select{ font-family:var(--font); }
img{ max-width:100%; display:block; }

/* Layout */
.container{ max-width: 1180px; margin:0 auto; padding:0 22px; }

/* =========================================================
   PUBLIC
========================================================= */
body.public{
  background: var(--public-bg);
  color: var(--public-text);
}

/* Topbar */
.public .topbar{
  background: #fff;
  height: 76px;
  display:flex;
  align-items:center;
  border-bottom: 1px solid rgba(15,23,42,.12);
}
.public .topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .1px;
  color: var(--teal-900);
}
.brand svg{ width:34px; height:34px; }

/* lock btn */
.icon-btn{
  width:40px;
  height:40px;
  border-radius: 12px;
  background:#fff;
  border:1px solid rgba(15,23,42,.14);
  display:grid;
  place-items:center;
  cursor:pointer;
}

/* Hero (match vignette look) */
.hero{
  height: 300px;
  display:flex;
  align-items:center;

  /* ✅ prima era center: ora a sinistra */
  justify-content:flex-start;
  text-align:left;
  padding-left: 22px;
  padding-right: 22px;

  color:#fff;
  border-bottom: 1px solid rgba(15,23,42,.12);
  background:
    radial-gradient(900px 420px at 50% 45%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%),
    radial-gradient(1200px 520px at 50% 60%, rgba(0,0,0,.18), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, #163f4e 0%, #0f3240 55%, #0b2c37 100%);
}

/* ✅ 33Catalogo */
.hero h1{
  margin:0;
  font-size: 66px;
  font-weight: 700;
  letter-spacing: -1px;
  text-shadow: 0 10px 22px rgba(0,0,0,.18);

  /* ✅ Fluro */
  font-family: var(--font-display);
}

/* ✅ titolo "Arte in vinile" se è un h2 nell'hero */
.hero h2{
  margin: 10px 0 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.2px;
  opacity: .92;
  font-family: var(--font-display);
}

/* ✅ testo sotto */
.hero p{
  margin: 12px 0 0;
  font-size: 18px;
  opacity:.85;

  /* ✅ Fluro anche qui */
  font-family: var(--font-display);
  font-weight: 300;
}

/* Filters area */
.public .filters{
  background:#fff;
  border-top: 1px solid rgba(15,23,42,.06);
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.filters-row{
  display:flex;
  align-items:center;
  gap:16px;
  padding: 18px 0;
}
.search{
  flex:1;
  height: 54px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.14);
  font-size: 16px;
  outline:none;
}
.search::placeholder{ color: rgba(15,23,42,.40); font-weight:600; }

.filter-btn{
  height: 54px;
  min-width: 150px;
  border-radius: 10px;
  border: 2px solid var(--teal-800);
  background:#fff;
  color: var(--teal-800);
  font-weight: 800;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
}
.filter-btn svg{ opacity:.95; }
#chev{
  font-weight:900;
  transform: translateY(-1px);
}

.public .filters-advanced{
  display:none;
  padding: 0 0 18px;
}
.public .filters-advanced.open{ display:block; }

.selects{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.select{
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.14);
  padding: 0 14px;
  background:#fff;
  color: rgba(15,23,42,.65);
  font-weight: 650;
  outline:none;

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15,23,42,.45) 50%),
    linear-gradient(135deg, rgba(15,23,42,.45) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Results */
.public .list{ padding: 28px 0 84px; }
.count{
  margin-bottom: 18px;
  font-size: 16px;
  color: rgba(15,23,42,.70);
  font-weight: 650;
}
.count span{
  color: var(--teal-700);
  font-weight: 900;
}

/* Grid + cards */
.grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.card{
  background:#fff;
  border-radius: var(--card-radius);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  overflow: visible; /* ✅ permette al tooltip di uscire fuori dalla card */
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

/* ✅ tolto il } extra che rompeva il CSS */
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(15,23,42,.10);
}

.card-img{
  width:100%;
  aspect-ratio: 1.22 / 1;
  background:#e9eef4;
  position:relative;
  overflow:hidden;
}
.card-img img{
  width:100%;
  height:100%;
  object-fit: cover;
}

.card-body{
  padding: 16px 14px 16px;
  position:relative;
  padding-top: 34px;
}

.card-title{
  margin:0;
  font-size: 18px;
  font-weight: 900;
  color: rgba(15,23,42,.95);
  letter-spacing:-.2px;
  line-height:1.18;
}
.card-sub{
  margin-top: 6px;
  font-weight: 650;
  color: rgba(15,23,42,.55);
}

/* chips like screenshot (top overlay) */
.chips{
  position:absolute;
  top: -18px;
  left: 12px;
  right: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.chip{
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing:.2px;
  border: 1px solid var(--chip-green-bd);
  background: var(--chip-green-bg);
  color: var(--chip-green-tx);
  backdrop-filter: blur(6px);
}
.chip.blue{
  border-color: var(--chip-blue-bd);
  background: var(--chip-blue-bg);
  color: var(--chip-blue-tx);
}

.card-meta{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size: 12px;
  font-weight: 750;
  color: rgba(15,23,42,.55);
}

/* Responsive */
@media (max-width: 1100px){
  .grid{ grid-template-columns: repeat(3, 1fr); }
  .hero h1{ font-size: 56px; }
}
@media (max-width: 860px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .hero{ height: 265px; }
  .hero h1{ font-size: 46px; }
  .selects{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .grid{ grid-template-columns: 1fr; }
  .filters-row{ flex-direction:column; align-items:stretch; }
  .filter-btn{ width:100%; }
  .hero h1{ font-size: 38px; }
}

/* =========================================================
   MODALS (Product + Admin login)
========================================================= */
.modal-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.58);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 22px;
  z-index: 60;
}
.modal-backdrop.open{ display:flex; }

.modal{
  width: min(980px, 96vw);
  background:#fff;
  border-radius: var(--radius-22);
  box-shadow: var(--modal-shadow);
  overflow:hidden;
  position:relative;
}
.modal.small{ width: min(560px, 92vw); }

.modal-close{
  position:absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.12);
  background:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  z-index:2;
  color: rgba(15,23,42,.75);
  font-weight:900;
}

.modal-grid{
  display:grid;
  grid-template-columns: 1.22fr 1fr;
}

.modal-img{
  background:#dfe6ee;
  min-height: 520px;
  position: relative; /* per frecce */
}
.modal-img img{
  width:100%;
  height:100%;
  object-fit: cover;
}

.modal-content{
  padding: 26px 26px 22px;
  position: relative; /* ✅ per posizionare la "i" uguale a home */
}

.modal-content h2{
  margin: 0;
  font-size: 42px;
  font-weight: 950;
  letter-spacing: -0.8px;
  color: rgba(15,23,42,.95);
}
.modal-artist{
  margin-top: 10px;
  font-size: 22px;
  font-weight: 700;
  color: rgba(15,23,42,.60);
}

/* Info boxes */
.info-grid{
  margin-top: 26px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.info-box{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  background: #f7f9fc;
  padding: 16px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.info-label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .10em;
  color: rgba(15,23,42,.45);
}
.info-value{
  margin-top: 6px;
  font-size: 22px;
  font-weight: 950;
  color: rgba(15,23,42,.95);
}

/* Status */
.status-row{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(15,23,42,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.status{
  display:flex;
  align-items:center;
  gap: 12px;
  font-weight: 850;
  color: rgba(15,23,42,.85);
}
.dot{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #27c26a;
  box-shadow: 0 0 0 4px rgba(39,194,106,.18);
}
.dot.sold{
  background: #ff4d4d;
  box-shadow: 0 0 0 4px rgba(255,77,77,.18);
}

/* WhatsApp button like screenshot */
.whatsapp-btn{
  margin-top: 18px;
  width:100%;
  height: 74px;
  border:none;
  border-radius: 999px;
  background: var(--wa);
  color:#fff;
  font-size: 26px;
  font-weight: 950;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  cursor:pointer;
  box-shadow: var(--wa-shadow);
  position:relative;
}
.whatsapp-btn::before{
  content:"";
  position:absolute;
  inset: 8px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.40);
  pointer-events:none;
}
.whatsapp-btn:active{ transform: translateY(1px); }

@media (max-width: 860px){
  .modal-grid{ grid-template-columns: 1fr; }
  .modal-img{ min-height: 320px; }
  .modal-content h2{ font-size: 34px; }
}

/* --- Modal image arrows --- */
.img-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.85);
  background:rgba(15,23,42,.35);
  color:#fff;
  font-size:28px;
  display:grid;
  place-items:center;
  cursor:pointer;
  backdrop-filter: blur(6px);
  z-index: 2;
}
.img-nav.prev{ left:14px; }
.img-nav.next{ right:14px; }

/* =========================================================
   ADMIN
========================================================= */
body.admin{
  background: linear-gradient(180deg, var(--admin-bg-top), var(--admin-bg-bot));
  color: var(--admin-text);
}

/* Shell */
.admin-shell{
  display:grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}

/* Sidebar */
.sidebar{
  background: rgba(9, 15, 24, .78);
  border-right: 1px solid var(--admin-line);
  padding: 18px 14px;
  position:sticky;
  top:0;
  height: 100vh;
}
.sidebar .brand{
  color: rgba(240, 255, 255, .92);
  font-size: 20px;
}
.sidebar small{
  display:block;
  margin-top: 6px;
  color: rgba(255,255,255,.40);
  font-weight: 650;
}

/* Nav links */
.nav{
  margin-top: 16px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.nav a{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  color: rgba(255,255,255,.72);
  font-weight: 850;
}
.nav a:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}
.nav a.active{
  background: var(--admin-accent-bg);
  border-color: var(--admin-accent-bd);
  color: var(--admin-accent-tx);
}

/* Logout button bottom */
.logout{
  position:absolute;
  left:14px;
  right:14px;
  bottom: 16px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.75);
  font-weight: 900;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 0 12px;
  cursor:pointer;
}

/* Main admin */
.main{
  padding: 26px 26px 40px;
}

.page-title{
  margin:0;
  font-size: 38px;
  font-weight: 950;
  letter-spacing: -0.8px;
}
.page-sub{
  margin-top: 10px;
  color: var(--admin-muted);
  font-weight: 650;
}

/* Toolbar + search */
.toolbar{
  margin-top: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.admin-search{
  width: min(420px, 100%);
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.88);
  padding: 0 14px 0 40px;
  font-weight: 650;
  outline:none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z' stroke='%23ffffff' stroke-opacity='.55' stroke-width='2'/%3E%3Cpath d='M16.5 16.5 21 21' stroke='%23ffffff' stroke-opacity='.55' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px 50%;
}

/* Panel */
.panel{
  margin-top: 16px;
  border: 1px solid var(--admin-panel-bd);
  border-radius: 18px;
  background: var(--admin-panel);
  overflow:hidden;
}

/* Table */
.table{
  width:100%;
  border-collapse:collapse;
}
.table th,
.table td{
  padding: 16px 14px;
  border-bottom: 1px solid var(--admin-line);
  vertical-align: middle;
}
.table th{
  text-align:left;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .10em;
  color: rgba(255,255,255,.45);
}
.table td{
  color: rgba(255,255,255,.88);
  font-weight: 700;
}

/* Product row */
.row-product{
  display:flex;
  align-items:center;
  gap: 12px;
}
.thumb{
  width: 46px;
  height: 46px;
  border-radius: 10px;
  overflow:hidden;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}
.thumb img{ width:100%; height:100%; object-fit:cover; }

.small-muted{
  margin-top: 3px;
  font-size: 12px;
  font-weight: 650;
  color: rgba(255,255,255,.45);
}

/* Badges (model/collection) */
.badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 900;
  font-size: 12px;
}
.badge.model{
  background: rgba(108, 141, 115, .18);
  border-color: rgba(108, 141, 115, .28);
  color: rgba(214, 255, 224, .90);
}
.badge.collection{
  background: rgba(92, 132, 155, .16);
  border-color: rgba(92, 132, 155, .26);
  color: rgba(219, 244, 255, .90);
}

/* Actions */
.actions{
  display:flex;
  align-items:center;
  gap: 18px;
}
.action-link{
  cursor:pointer;
  font-weight: 900;
  color: rgba(125,182,255,.95);
}
.action-link.green{ color: rgba(156,215,156,.95); }
.action-link.red{ color: rgba(255,120,120,.95); }
.action-link.disabled{ opacity:.35; pointer-events:none; }

/* Forms (Add/Edit) */
.form{ margin-top: 18px; display:grid; gap: 14px; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }

.uploads{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
}
.drop{
  border: 2px dashed rgba(255,255,255,.16);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  min-height: 120px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,.50);
  font-weight: 800;
  cursor:pointer;
}
.drop input{ display:none; }

.field label{
  display:block;
  margin-bottom: 8px;
  color: rgba(255,255,255,.60);
  font-weight: 900;
  font-size: 13px;
}
.field input,
.field select{
  width:100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.90);
  padding: 0 12px;
  font-weight: 700;
  outline:none;
}
.field .hint{
  margin-top: 8px;
  color: rgba(255,255,255,.40);
  font-weight: 650;
  font-size: 12px;
}

.inline-add{
  display:flex;
  align-items:center;
  gap: 10px;
}
.plus-btn{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.90);
  font-weight: 950;
  cursor:pointer;
}

/* Admin responsive */
@media (max-width: 980px){
  .admin-shell{ grid-template-columns: 1fr; }
  .sidebar{ height:auto; position:relative; }
  .logout{
    position:relative;
    left:auto; right:auto; bottom:auto;
    margin-top: 14px;
  }
  .toolbar{ flex-direction:column; align-items:stretch; }
  .form-grid{ grid-template-columns: 1fr; }
  .uploads{ grid-template-columns: 1fr; }
}

/* =========================================================
   PUBLIC — actions (dot + i + contattaci)
========================================================= */

.card-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
}

.stock{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.stock .dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#2dd06f;
  box-shadow:0 0 0 3px rgba(45,208,111,.18);
}

.stock-text{
  font-weight:600;
  color:#0e1626;
  white-space:nowrap;
}

/* ✅ i + tooltip (home + modal) */
.mini-info{
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: #0d3b4b;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.mini-info .tip{
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  color: #0e1626;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  border: 1px solid rgba(15, 23, 42, .12);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  z-index: 50;
  pointer-events: none;
}

.mini-info .tip::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #ffffff;
  filter: drop-shadow(0 -1px 0 rgba(15, 23, 42, .12));
}

/* desktop hover + focus */
.mini-info:hover .tip,
.mini-info:focus-visible .tip{
  display: block;
}

/* mobile tap toggle */
.mini-info.is-open .tip{
  display: block;
}

/* ✅ modal: la i sta in basso a destra ed è identica alla home */
.modal .mini-info.modal-info{
  position: absolute;
  right: 18px;
  bottom: 18px;
}

/* tooltip nel modal: allineato a destra, non in mezzo */
.modal .mini-info.modal-info .tip{
  left: auto;
  right: 0;
  transform: none;
}

/* Bottone WhatsApp dentro card (verde) */
.mini-wa{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 18px;
  border: none;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 0 0 10px rgba(37, 211, 102, .14);
}

.mini-wa .wa-ico{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  display: inline-block;
  position: relative;
}

.mini-wa .wa-ico::after{
  content: "✆";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  opacity: .9;
}

/* --- Card actions: riduci CTA e rimuovi stock --- */

/* Nascondi completamente "In Stock: 1" */
.card .stock-text{
  display: none !important;
}

/* Riduci un po' la distanza tra pallino + i + bottone */
.card .stock{
  gap: 6px !important;
}

/* Bottone Contattaci più piccolo (senza cambiare stile) */
.card .mini-wa{
  height: 40px !important;
  padding: 0 14px !important;
  font-size: 16px !important;
  gap: 8px !important;
  box-shadow: 0 0 0 8px rgba(37, 211, 102, .14) !important;
}

/* Iconcina dentro il bottone leggermente più piccola */
.card .mini-wa .wa-ico{
  width: 20px !important;
  height: 20px !important;
}
.card .mini-wa .wa-ico::after{
  font-size: 13px !important;
}
/* ✅ Mobile: abilita scroll dentro il modal */
@media (max-width: 860px){
  .modal{
    max-height: calc(100vh - 44px);
    overflow: hidden; /* il contenuto scrolla dentro, non fuori */
  }

  .modal-grid{
    grid-template-columns: 1fr;
    grid-template-rows: 320px 1fr; /* immagine sopra + contenuto sotto */
  }

  .modal-img{
    min-height: 320px;
  }

  .modal-content{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* scroll fluido iOS */
    max-height: calc(100vh - 44px - 320px);
  }
}

/* ✅ Badge overlay "scopri dettagli" */
.card-img{
  position: relative; /* già c’è, ma lo ribadisco */
}

.hint-badge{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  text-transform: lowercase;

  color: rgba(255,255,255,.95);
  background: rgba(15,23,42,.55);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  pointer-events: none; /* così non blocca il click sulla card */
}

.card:hover .hint-badge{
  background: rgba(15,23,42,.68);
  border-color: rgba(255,255,255,.28);
}
.brand { font-family: var(--font-display); }

.card-place{
  margin-top: 12px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(15,23,42,.70);
}

.card-place span{
  color: var(--teal-700);
  font-weight: 950;
}

/* ✅ Place in card: stesso stile del meta (coerente con UI) */
.card-place,
.place-line{
  margin-top: 10px;
  font-size: 12px;
  font-weight: 750;
  color: rgba(15,23,42,.55);
  display:flex;
  align-items:center;
  gap:6px;
}

.card-place span,
.place-line span{
  color: var(--teal-700);
  font-weight: 900;
}