/* Vape Deal — homepage v4: calm retail grid. Colour lives in banners & accents, products sit on white plates. */
.vd-home { --r: 18px; max-width: 1320px; margin: 0 auto; padding: 20px 24px 72px; display: flex; flex-direction: column; gap: 56px; font-family: var(--vd-body); color: var(--vd-ink); }
.vd-home a { text-decoration: none; color: var(--vd-ink); }
.vd-home img { display: block; }
.vd-home h1, .vd-home h2 { margin: 0; font: 800 24px/1.2 var(--vd-head); letter-spacing: -0.02em; color: var(--vd-ink); }
.vd-block { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 120px; }
.vd-block-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.vd-more { font-size: 14px; font-weight: 600; color: var(--vd-muted) !important; }
.vd-more::after { content: " →"; }
.vd-more:hover { color: var(--vd-ink) !important; }
.vd-chip-sm { align-self: flex-start; display: inline-block; background: rgba(255,255,255,.8); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; color: var(--vd-ink); }
.vd-tag { display: inline-block; background: var(--vd-coral); color: #fff !important; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.vd-new { display: inline-block; background: #34C77B; color: #0B2416; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }

/* White product plate: matches how product photos are shot (square, white) */
.vd-plate { display: grid; place-items: center; aspect-ratio: 1; background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(17,17,20,.04), 0 8px 24px rgba(17,17,20,.06); overflow: hidden; }
.vd-plate img { width: 86%; height: 86%; object-fit: contain; }

/* ---------- Banners ---------- */
.vd-banners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vd-banner { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; display: block; transition: transform .25s, box-shadow .25s; }
.vd-banner:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(17,17,20,.10); }
.vd-banner-img img { width: 100%; height: 100%; object-fit: cover; }
.vd-banner-fb { background: var(--bg); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 12px; }
.vd-banner-top { display: flex; flex-direction: column; gap: 10px; }
.vd-banner-top strong { font: 800 24px/1.1 var(--vd-head); letter-spacing: -0.02em; }
.vd-banner-fb .vd-plate { width: 74%; align-self: center; transition: transform .3s; }
.vd-banner-fb:hover .vd-plate { transform: scale(1.03); }
.vd-banner-cta { align-self: flex-start; background: var(--vd-ink); color: #fff; font-size: 13px; font-weight: 700; padding: 9px 14px; border-radius: 10px; }

/* ---------- H1 + circles ---------- */
.vd-intro h1 { font-size: 26px; }
.vd-circles { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; scrollbar-width: none; justify-content: space-between; }
.vd-circles::-webkit-scrollbar { display: none; }
.vd-circles a { flex: 0 0 96px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.vd-circle { width: 88px; height: 88px; border-radius: 999px; background: #fff; border: 1px solid #ECEBE6; display: grid; place-items: center; overflow: hidden; transition: border-color .2s, transform .25s, box-shadow .25s; }
.vd-circle img { width: 74%; height: 74%; object-fit: contain; }
.vd-circles a:hover .vd-circle { border-color: var(--vd-ink); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(17,17,20,.08); }
.vd-circle-name { font-size: 13px; font-weight: 600; line-height: 1.25; }

/* ---------- Benefits ---------- */
.vd-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: -24px; }
.vd-benefits a { background: var(--bg); border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; transition: transform .2s; }
.vd-benefits a:hover { transform: translateY(-2px); }
.vd-ben-ic { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; background: var(--fg); display: grid; place-items: center; }
.vd-benefits strong { display: block; font-size: 15px; font-weight: 700; }
.vd-benefits small { font-size: 13px; color: var(--vd-muted); }

/* ---------- Tabs + product cards ---------- */
.vd-tabs { display: flex; gap: 4px; background: var(--vd-warm); padding: 4px; border-radius: 12px; }
.vd-tabs button { border: 0; font: 600 14px var(--vd-body); padding: 8px 14px; border-radius: 9px; cursor: pointer; background: transparent; color: var(--vd-muted); white-space: nowrap; }
.vd-tabs button[aria-selected="true"] { background: #fff; color: var(--vd-ink); box-shadow: 0 1px 3px rgba(17,17,20,.1); }
.vd-panel { display: flex; flex-direction: column; gap: 22px; }
.vd-panel[hidden] { display: none; }
.vd-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vd-card { background: #fff; border: 1px solid #ECEBE6; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .25s, border-color .25s; }
.vd-card:hover { border-color: #DAD8D1; box-shadow: 0 12px 28px rgba(17,17,20,.07); }
.vd-card-media { position: relative; aspect-ratio: 1; border-radius: 10px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.vd-card-media img { width: 88%; height: 88%; object-fit: contain; transition: transform .35s; }
.vd-card:hover .vd-card-media img { transform: scale(1.04); }
.vd-card-badges { position: absolute; top: 6px; left: 6px; display: flex; gap: 4px; }
.vd-card-body { padding: 0 4px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.vd-card-brand { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--vd-muted); min-height: 13px; }
.vd-card-name { font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; }
.vd-card-name:hover { text-decoration: underline; }
.vd-card-price { font: 800 18px var(--vd-head); margin-top: auto; padding-top: 4px; }
.vd-card-price del { font: 400 13px var(--vd-body); color: var(--vd-muted); }
.vd-card-price ins { text-decoration: none; color: var(--vd-coral-text); }
.vd-card-btn { height: 42px; border-radius: 10px; background: var(--vd-ink); color: #fff !important; font-size: 14px; font-weight: 600; display: grid; place-items: center; transition: background .2s; }
.vd-card-btn:hover { background: #2E2E35; }
.vd-card-btn.loading { opacity: .6; } .vd-card-btn.added::after { content: " ✓"; }
.vd-card .added_to_cart { text-align: center; font-size: 13px; font-weight: 700; color: var(--vd-coral-text) !important; }
.vd-btn-line { align-self: center; font-size: 14px; font-weight: 600; padding: 12px 22px; border-radius: 12px; border: 1.5px solid var(--vd-line); transition: border-color .2s; }
.vd-btn-line:hover { border-color: var(--vd-ink); }

/* ---------- Offers ---------- */
.vd-offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vd-offer { border-radius: var(--r); background: var(--bg); padding: 20px; min-height: 170px; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: transform .25s; }
.vd-offer:hover { transform: translateY(-3px); }
.vd-offer-text { display: flex; flex-direction: column; gap: 8px; }
.vd-offer strong { font: 800 20px/1.2 var(--vd-head); }
.vd-offer small { font-size: 13px; color: var(--vd-text); }
.vd-plate-sm { width: 116px; flex: 0 0 116px; }
.vd-offer-dark { background: var(--vd-ink); }
.vd-offer-dark strong { color: #fff; } .vd-offer-dark small { color: #CFCFD6; }
.vd-offer-dark .vd-chip-sm { background: rgba(255,255,255,.14); color: #fff; }

/* ---------- Brands ---------- */
.vd-brand-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vd-brand-card { background: var(--bg); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 14px; transition: transform .25s; }
.vd-brand-card:hover { transform: translateY(-3px); }
.vd-brand-plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vd-brand-plates .vd-plate { border-radius: 12px; }
.vd-brand-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.vd-brand-meta strong { font: 800 18px var(--vd-head); }
.vd-brand-meta small { font-size: 13px; color: var(--vd-muted); white-space: nowrap; }
.vd-brand-row { display: flex; gap: 8px; flex-wrap: wrap; }
.vd-brand-row a { border: 1px solid #ECEBE6; border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; transition: border-color .2s; }
.vd-brand-row a:hover { border-color: var(--vd-ink); }
.vd-brand-row small { color: var(--vd-muted); font-weight: 500; margin-left: 2px; }

/* ---------- Strength ---------- */
.vd-strength { display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px; align-items: center; background: var(--vd-warm); border-radius: var(--r); padding: 30px; }
.vd-strength p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--vd-text); }
.vd-str-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vd-str-grid a { background: #fff; border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; transition: transform .25s, box-shadow .25s; }
.vd-str-grid a:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(17,17,20,.06); }
.vd-bars { display: flex; gap: 4px; }
.vd-bars span { width: 16px; height: 5px; border-radius: 999px; background: #E4E2DC; }
.vd-bars span.on { background: var(--vd-coral); }
.vd-str-grid strong { font: 800 20px var(--vd-head); }
.vd-str-grid small { font-size: 13px; color: var(--vd-muted); }

/* ---------- Steps ---------- */
.vd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vd-steps a { border: 1px solid #ECEBE6; border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s; }
.vd-steps a:hover { border-color: var(--vd-ink); }
.vd-num { width: 34px; height: 34px; border-radius: 10px; background: var(--vd-ink); color: #fff; font: 800 15px var(--vd-head); display: grid; place-items: center; }
.vd-steps strong { font: 800 18px var(--vd-head); }
.vd-steps span:not(.vd-num) { font-size: 14px; line-height: 1.55; color: var(--vd-text); }
.vd-steps em { font-style: normal; font-weight: 600; font-size: 14px; margin-top: auto; }

/* ---------- Wholesale ---------- */
.vd-wholesale-band { border-radius: var(--r); background: var(--vd-ink); padding: 32px 36px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.vd-wholesale-band > div { max-width: 640px; display: flex; flex-direction: column; gap: 8px; }
.vd-wholesale-band small { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #FF8FA3; }
.vd-wholesale-band h2 { color: #fff !important; }
.vd-wholesale-band p { margin: 0; color: #CFCFD6; font-size: 15px; }
.vd-wholesale-band > a { background: #fff; font-weight: 700; padding: 14px 22px; border-radius: 12px; }

/* ---------- Guides ---------- */
.vd-posts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vd-posts a { display: flex; flex-direction: column; gap: 8px; }
.vd-post-img { aspect-ratio: 16 / 10; border-radius: 14px; background: var(--bg); overflow: hidden; }
.vd-post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.vd-posts a:hover .vd-post-img img { transform: scale(1.04); }
.vd-posts small { font-size: 12px; color: var(--vd-muted); }
.vd-posts strong { font: 700 16px/1.35 var(--vd-head); }

/* ---------- About + FAQ ---------- */
.vd-about { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; border-top: 1px solid #ECEBE6; padding-top: 48px; }
.vd-about-text { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.7; color: var(--vd-text); }
.vd-about-text p { margin: 0; }
.vd-about-text a, .vd-faq a { color: var(--vd-coral-text) !important; font-weight: 600; }
.vd-about details summary { font-weight: 700; color: var(--vd-ink); cursor: pointer; }
.vd-about details p { margin-top: 10px; }
.vd-facts { display: flex; gap: 8px; flex-wrap: wrap; }
.vd-facts span { background: var(--vd-warm); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--vd-ink); }
.vd-faq { display: flex; flex-direction: column; gap: 8px; }
.vd-faq h2 { margin-bottom: 8px; }
.vd-faq details { border: 1px solid #ECEBE6; border-radius: 12px; padding: 16px 18px; }
.vd-faq summary { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 15px; cursor: pointer; list-style: none; }
.vd-faq summary::-webkit-details-marker { display: none; }
.vd-faq summary span { font-size: 18px; line-height: 1; transition: transform .2s; }
.vd-faq details[open] summary span { transform: rotate(45deg); }
.vd-faq p { margin: 8px 0 0; font-size: 14px; line-height: 1.65; color: var(--vd-text); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .vd-cards, .vd-brand-cards, .vd-posts { grid-template-columns: repeat(2, 1fr); }
  .vd-strength { grid-template-columns: 1fr; }
  .vd-offers { grid-template-columns: 1fr; }
  .vd-circles { justify-content: flex-start; }
}
@media (max-width: 767px) {
  .vd-home { padding: 12px 16px 56px; gap: 40px; }
  .vd-home h1, .vd-home h2, .vd-intro h1 { font-size: 21px; }
  .vd-banners { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .vd-banners::-webkit-scrollbar { display: none; }
  .vd-banner { flex: 0 0 72%; scroll-snap-align: start; }
  .vd-banner-top strong { font-size: 21px; }
  .vd-circles { margin: 0 -16px; padding: 2px 16px 8px; gap: 6px; }
  .vd-circles a { flex-basis: 78px; }
  .vd-circle { width: 70px; height: 70px; }
  .vd-circle-name { font-size: 12px; }
  .vd-benefits { grid-template-columns: 1fr; gap: 8px; margin-top: -16px; }
  .vd-benefits a { padding: 12px 14px; }
  .vd-tabs { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .vd-cards { gap: 10px; }
  .vd-card { padding: 8px; }
  .vd-card-name { font-size: 13px; } .vd-card-price { font-size: 16px; }
  .vd-card-btn { height: 38px; font-size: 13px; }
  .vd-brand-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .vd-brand-card { padding: 10px; gap: 10px; }
  .vd-brand-plates { grid-template-columns: 1fr 1fr; } .vd-brand-plates .vd-plate:nth-child(3) { display: none; }
  .vd-brand-meta { flex-direction: column; gap: 2px; } .vd-brand-meta strong { font-size: 15px; }
  .vd-str-grid { grid-template-columns: 1fr 1fr; }
  .vd-strength { padding: 22px 18px; }
  .vd-steps, .vd-about { grid-template-columns: 1fr; }
  .vd-wholesale-band { padding: 24px 20px; }
  .vd-plate-sm { width: 92px; flex-basis: 92px; }
  .vd-post-img { aspect-ratio: 4 / 3; }
  .vd-posts strong { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .vd-home * { transition: none !important; } }

/* =========== v5: Vape Deal signature (price-tag & ticket motifs) =========== */
.vd-btn-ink { background: var(--vd-ink); color: #fff !important; font-weight: 600; font-size: 15px; padding: 14px 22px; border-radius: 12px; transition: background .2s, transform .2s; }
.vd-btn-ink:hover { background: #2a2a30; transform: translateY(-1px); }
.vd-btn-ghost { font-weight: 600; font-size: 15px; padding: 13px 20px; border-radius: 12px; border: 1.5px solid rgba(17,17,20,.15); background: rgba(255,255,255,.6); }
.vd-btn-ghost:hover { border-color: var(--vd-ink); }

.vd-hero2 { display: grid; grid-template-columns: 1fr 400px; gap: 14px; }
.vd-hero-main { position: relative; overflow: hidden; background: var(--vd-warm); border-radius: 24px; padding: 40px 40px 28px; display: flex; flex-direction: column; gap: 16px; }
.vd-hero-main::after { content: ""; position: absolute; right: -90px; top: -90px; width: 300px; height: 300px; border-radius: 999px; border: 46px solid rgba(255,77,109,.08); pointer-events: none; }
.vd-hero-main h1 { font: 800 50px/1.02 var(--vd-head) !important; letter-spacing: -0.035em !important; }
.vd-hero-main h1 span { color: var(--vd-coral); }
.vd-hero-main > p { margin: 0; max-width: 520px; font-size: 16.5px; line-height: 1.55; color: var(--vd-text); }
.vd-hero-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.vd-tickets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
.vd-ticket { position: relative; background: #fff; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 2px rgba(17,17,20,.04), 0 8px 22px rgba(17,17,20,.06); transition: transform .25s; }
.vd-ticket:hover { transform: translateY(-3px); }
.vd-ticket .vd-plate { box-shadow: none; border-radius: 10px; aspect-ratio: 4 / 3; }
.vd-ticket-foot { position: relative; border-top: 2px dashed #ECEBE6; padding: 10px 4px 2px; display: flex; flex-direction: column; gap: 2px; }
.vd-ticket-foot::before, .vd-ticket-foot::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 999px; background: var(--vd-warm); }
.vd-ticket-foot::before { left: -18px; } .vd-ticket-foot::after { right: -18px; }
.vd-ticket-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--vd-muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.vd-ticket-foot strong { font: 800 17px var(--vd-head); }
.vd-ticket-foot del { font: 400 12px var(--vd-body); color: var(--vd-muted); }
.vd-ticket-foot ins { text-decoration: none; color: var(--vd-coral-text); }

.vd-hero-side { display: flex; flex-direction: column; gap: 14px; }
.vd-side-banner { flex: 1; min-height: 200px; border-radius: 24px; overflow: hidden; display: block; transition: transform .25s; }
.vd-side-banner:hover { transform: translateY(-3px); }
.vd-side-fb { background: var(--bg); padding: 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.vd-side-copy { display: flex; flex-direction: column; gap: 8px; }
.vd-side-copy strong { font: 800 24px/1.1 var(--vd-head); letter-spacing: -0.02em; }
.vd-side-copy small { font-size: 13px; color: var(--vd-text); }
.vd-side-fb .vd-plate { width: 132px; flex: 0 0 132px; transform: rotate(4deg); transition: transform .3s; }
.vd-side-fb:hover .vd-plate { transform: rotate(0); }

.vd-cat-tags { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 10px; margin-top: -30px; }
.vd-cat-tags::-webkit-scrollbar { display: none; }
.vd-cat-tags a { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 6px 30px 6px 6px; background: #fff; border: 1px solid #ECEBE6; border-radius: 12px 999px 999px 12px; transition: border-color .2s, transform .2s; }
.vd-cat-tags a:hover { border-color: var(--vd-ink); transform: translateY(-2px); }
.vd-tag-img { width: 48px; height: 48px; border-radius: 9px; background: var(--vd-warm); display: grid; place-items: center; overflow: hidden; }
.vd-tag-img img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.vd-tag-txt { display: flex; flex-direction: column; line-height: 1.2; }
.vd-tag-txt strong { font-size: 14px; font-weight: 700; white-space: nowrap; }
.vd-tag-txt small { font-size: 12px; color: var(--vd-muted); }
.vd-tag-hole { position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #D5D3CC; }
.vd-post-ph { display: grid; place-items: center; width: 100%; height: 100%; font: 800 18px var(--vd-head); color: rgba(17,17,20,.35); }

@media (max-width: 1100px) {
  .vd-hero2 { grid-template-columns: 1fr; }
  .vd-hero-side { flex-direction: row; }
}
@media (max-width: 767px) {
  .vd-hero-main { padding: 26px 18px 18px; border-radius: 20px; }
  .vd-hero-main h1 { font-size: 34px !important; }
  .vd-hero-main > p { font-size: 15px; }
  .vd-tickets { gap: 8px; }
  .vd-ticket { padding: 6px; border-radius: 12px; }
  .vd-ticket-name { display: none; }
  .vd-ticket-foot { padding: 8px 2px 0; } .vd-ticket-foot strong { font-size: 14px; }
  .vd-ticket-foot::before, .vd-ticket-foot::after { width: 12px; height: 12px; top: -7px; } .vd-ticket-foot::before { left: -13px; } .vd-ticket-foot::after { right: -13px; }
  .vd-hero-side { flex-direction: column; }
  .vd-side-banner { min-height: 150px; border-radius: 20px; }
  .vd-side-fb .vd-plate { width: 100px; flex-basis: 100px; }
  .vd-side-copy strong { font-size: 20px; }
  .vd-cat-tags { margin: -22px -16px 0; padding: 4px 16px 10px; }
}

.vd-from { font: 600 12px var(--vd-body); color: var(--vd-muted); margin-right: 2px; }