:root{
	--bg:#0f1221;--card:#171a2e;--accent:#6f6fea;--accent-2:#ea6f6f;--text:#e9e9ee;--muted:#a7abc4;--chip:#222642;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:16px}
.brand{font-weight:800;font-size:24px;letter-spacing:.3px}
.searchbar{display:flex;gap:8px;flex-wrap:wrap}
.input,select,button{border:1px solid #2b3053;background:#0f1330;color:var(--text);padding:10px 12px;border-radius:14px}
button{background:var(--accent);border:none;color:#0b0b14;font-weight:700;cursor:pointer}
button:hover{filter:brightness(1.05)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:16px}
.card{background:var(--card);border:1px solid #272c50;border-radius:18px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.25);transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.35)}
.thumb{width:100%;aspect-ratio:4/3;object-fit:cover;background:#0e1030}
.card-body{padding:12px 14px}
.maker{font-weight:700;font-size:16px;display:block;margin:2px 0 8px}
.meta{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px;flex-wrap:wrap}
.badge{background:var(--chip);padding:4px 8px;border-radius:999px;border:1px solid #2b3053}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.footer{margin:28px 0 8px;color:var(--muted);font-size:13px;text-align:center}
.pagination{display:flex;gap:8px;justify-content:center;margin:16px 0}
.pagination a{padding:8px 12px;border-radius:12px;background:#0f1330;border:1px solid #2b3053}
.pagination a.active{background:var(--accent);color:#0b0b14;border-color:transparent}
.hero{background:linear-gradient(135deg,#0f1330, #1b1e3d);border:1px solid #2a2f53;border-radius:22px;padding:16px 18px;margin:10px 0}
.hero h1{margin:0 0 6px;font-size:22px}
.hero p{margin:0;color:var(--muted)}
.detail{display:grid;grid-template-columns:420px 1fr;gap:22px}
.detail .image{background:#0e1030;border-radius:18px;border:1px solid #262a4d;overflow:hidden}
.detail .image img{display:block;width:100%;height:auto}
.detail h1{margin:.2em 0 .2em}
.note{white-space:pre-wrap;color:#cfd2e6}
.star{filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
/* ─────────────── CIGAR DETAIL PAGE ─────────────── */
.cigar-page {
	background-color: #0e0e1a;
	color: #ddd;
	font-family: system-ui, sans-serif;
	min-height: 100vh;
	margin: 0;
	padding: 40px 0;
}

.cigar-page .container {
	max-width: 900px;
	margin: 0 auto;
	padding: 20px;
	background: #141428;
	border-radius: 12px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

.cigar-page img {
	max-width: 100%;
	border-radius: 10px;
	display: block;
	margin: 0 auto 20px;
}

.cigar-page h1 {
	text-align: center;
	color: #fff;
	font-size: 2em;
	margin-bottom: 10px;
}

.cigar-page .meta {
	text-align: center;
	color: #aaa;
	margin-bottom: 25px;
}

.cigar-page .section {
	margin-bottom: 25px;
}

.cigar-page .section h2 {
	color: #f2f2f2;
	border-bottom: 1px solid #333;
	padding-bottom: 5px;
	margin-bottom: 10px;
}

.cigar-page a.back {
	display: inline-block;
	margin-top: 10px;
	color: #7f9eff;
	text-decoration: none;
}

.cigar-page a.back:hover {
	text-decoration: underline;
}
/* Prevent horizontal scroll on narrow screens */
html, body { overflow-x: hidden; }

/* Cigar detail image: scale responsively */
.cigar-page .image-wrap {
  width: 100%;
  margin: 0 auto 16px;
}

.cigar-page .image-wrap img {
  display: block;
  width: 100%;      /* fill container width */
  height: auto;     /* keep aspect ratio */
  border-radius: 10px;
}

/* Mobile: keep the entire image visible inside the viewport */
@media (max-width: 640px) {
  .cigar-page .container { padding: 16px; }
  .cigar-page .image-wrap img {
    max-height: 80vh;   /* never exceed 80% of viewport height */
    object-fit: contain;/* scale down if taller than 80vh */
  }
}


@media(max-width:900px){.detail{grid-template-columns:1fr}}