/*
Theme Name:   Vape Deal
Theme URI:    https://vapedeal.uk/
Description:  Custom child theme for Vape Deal (built on Blocksy). Brand colours, fonts, product cards and UK nicotine warning.
Author:       Fanexe
Author URI:   https://fanexe.com/
Template:     blocksy
Version:      1.9.2
Text Domain:  vapedeal
*/

/* ---------- Brand tokens ---------- */
:root:root {
  --vd-ink: #111114;
  --vd-text: #33333A;
  --vd-muted: #55555E;
  --vd-line: #E4E2DC;
  --vd-warm: #F5F4F0;
  --vd-coral: #FF4D6D;
  --vd-coral-text: #C42840;
  --vd-pink: #FFE3EC; --vd-blue: #E1F0FF; --vd-mint: #DDF7E8; --vd-peach: #FFEFD3; --vd-lilac: #EEE6FF;
  --vd-radius: 16px;
  --vd-head: 'Plus Jakarta Sans', system-ui, sans-serif;
  --vd-body: 'Inter', system-ui, sans-serif;

  /* Blocksy palette (overrides Customizer colours) */
  --theme-palette-color-1: var(--vd-ink);
  --theme-palette-color-2: var(--vd-coral);
  --theme-palette-color-3: var(--vd-text);
  --theme-palette-color-4: var(--vd-ink);
  --theme-palette-color-5: var(--vd-line);
  --theme-palette-color-6: var(--vd-warm);
  --theme-palette-color-7: #FAFAF7;
  --theme-palette-color-8: #FFFFFF;
  --theme-button-border-radius: 12px;
}

/* ---------- Type ---------- */
body { font-family: var(--vd-body); color: var(--vd-text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6,
.woocommerce-loop-product__title, .product_title, .site-title, .ct-header-text {
  font-family: var(--vd-head); color: var(--vd-ink); letter-spacing: -0.02em;
}
h1 { font-weight: 800; } h2, h3 { font-weight: 700; }

/* ---------- Buttons ---------- */
.button, button.button, .wp-element-button, .ct-button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button, .single_add_to_cart_button {
  border-radius: 12px !important; font-weight: 700; transition: background .2s, transform .2s;
}
.button:hover, .ct-button:hover, .single_add_to_cart_button:hover { transform: translateY(-1px); }

/* ---------- Product cards ---------- */
.products .product { border-radius: var(--vd-radius); background: #fff; border: 1px solid #ECEBE6; padding: 12px; transition: box-shadow .2s, transform .2s; }
.products .product:hover { box-shadow: 0 10px 30px rgba(17,17,20,.08); transform: translateY(-2px); }
.products .product .ct-media-container, .products .product figure { border-radius: 12px; overflow: hidden; background: var(--vd-warm); }
.products .product .price { font-family: var(--vd-head); font-weight: 800; color: var(--vd-ink); }
.products .product .price del { color: var(--vd-muted); font-weight: 400; }
.onsale, .ct-woo-badge-onsale {
  background: var(--vd-coral) !important; color: #fff !important; font-weight: 700;
  border-radius: 3px 999px 999px 3px !important;
}

/* ---------- Glass sticky header ---------- */
[data-sticky*="yes"] [data-row], .ct-sticky-container [data-row] {
  background: rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}

/* ---------- UK nicotine warning bar ---------- */
.vd-nic-warning {
  background: var(--vd-ink); color: #fff; text-align: center;
  font: 600 13px/1.4 var(--vd-body); padding: 8px 16px; letter-spacing: .01em;
}

/* ---------- Pastel helpers (for Elementor sections) ---------- */
.vd-bg-pink{background:var(--vd-pink)} .vd-bg-blue{background:var(--vd-blue)} .vd-bg-mint{background:var(--vd-mint)}
.vd-bg-peach{background:var(--vd-peach)} .vd-bg-lilac{background:var(--vd-lilac)} .vd-bg-warm{background:var(--vd-warm)}
.vd-card{border-radius:var(--vd-radius)}

/* ---------- Archive: hero intro ---------- */
.hero-section .page-description { display: block !important; max-width: 760px; margin-inline: auto; color: var(--vd-muted); }
.vd-readmore a { font-weight: 700; color: var(--vd-coral-text); text-decoration: none; }

/* ---------- Archive: toolbar ---------- */
.vd-toolbar { display: flex; flex-direction: column; gap: 14px; margin: 0 0 22px; }
.vd-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.vd-chips::-webkit-scrollbar { display: none; }
.vd-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px;
  background: #fff; border: 1.5px solid var(--vd-line); color: var(--vd-ink); font-weight: 600; font-size: 14px; text-decoration: none; transition: border-color .2s, background .2s; }
.vd-chip span { font-size: 12px; color: var(--vd-muted); font-weight: 500; }
.vd-chip:hover { border-color: var(--vd-ink); background: var(--vd-warm); }
.vd-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #fff; border: 1px solid #ECEBE6;
  border-radius: var(--vd-radius); padding: 10px 12px; }
.vd-select select { height: 42px; border-radius: 10px; border: 1.5px solid var(--vd-line); padding: 0 34px 0 14px; font: 600 14px var(--vd-body); color: var(--vd-ink); background-color: #fff; min-width: 150px; }
.vd-switch { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; cursor: pointer; padding: 0 6px; }
.vd-switch input { width: 18px; height: 18px; accent-color: var(--vd-ink); }
.vd-clear { margin-left: auto; font-weight: 700; font-size: 14px; color: var(--vd-coral-text); text-decoration: none; }
.woo-listing-top { margin-bottom: 18px; }
@media (max-width: 689px) {
  .vd-filters { padding: 10px; }
  .vd-select { flex: 1 1 45%; } .vd-select select { width: 100%; min-width: 0; }
  .vd-clear { margin-left: 0; }
}

/* ---------- Archive: related + guide ---------- */
.vd-related { margin: 48px 0 0; }
.vd-related h2, .vd-guide h2 { font-size: 24px; margin: 0 0 14px; }
.vd-related .vd-chips { flex-wrap: wrap; overflow: visible; }
.vd-guide { margin: 40px 0 10px; background: #fff; border: 1px solid #ECEBE6; border-radius: 24px; padding: clamp(20px, 4vw, 44px); scroll-margin-top: 110px; }
.vd-guide-inner { max-width: 780px; }
.vd-guide-inner h2 { font-size: 22px; margin: 28px 0 10px; } .vd-guide-inner h2:first-child { margin-top: 0; }
.vd-guide-inner h3 { font-size: 18px; margin: 22px 0 8px; }
.vd-guide-inner p, .vd-guide-inner li { line-height: 1.7; color: var(--vd-text); }
.vd-guide-inner ul { padding-left: 20px; }
.vd-guide-inner ul li, .vd-guide-inner ul li * { text-align: left !important; }
.vd-guide-inner a { color: var(--vd-coral-text); font-weight: 600; }

/* ---------- Product cards (Blocksy markup) ---------- */
.products .product .woocommerce-loop-product__title { font-size: 15px; line-height: 1.35; font-weight: 700; }
.products .product .entry-meta { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--vd-muted); }
.products .product .ct-woo-card-actions .button { width: 100%; justify-content: center; }

/* ---------- Single product ---------- */
.single-product .product_title { font-size: clamp(24px, 3vw, 34px); font-weight: 800; line-height: 1.15; }
.single-product .summary .price { font-family: var(--vd-head); font-weight: 800; font-size: 28px; color: var(--vd-ink); }
.single-product .woocommerce-product-gallery, .single-product .ct-product-gallery-container { border-radius: 24px; overflow: hidden; background: var(--vd-warm); }
.single_add_to_cart_button { height: 52px; font-size: 16px !important; }
.vd-promises { list-style: none; margin: 20px 0 0; padding: 14px 16px; display: grid; gap: 10px; background: var(--vd-mint); border-radius: 14px; }
.vd-promises li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--vd-ink); margin: 0; }
.vd-promises svg { flex: 0 0 auto; color: #1F8A54; }
.vd-nic-note { margin: 12px 0 0; font-size: 13px; color: var(--vd-muted); }
.woocommerce-tabs .tabs li a { font-family: var(--vd-head); font-weight: 700; }

/* =========================================================
   Homepage (Elementor sections use these classes)
   ========================================================= */
:root body[class*="elementor-kit-"] {
  --e-global-typography-primary-font-family: 'Plus Jakarta Sans';
  --e-global-typography-secondary-font-family: 'Plus Jakarta Sans';
  --e-global-typography-text-font-family: 'Inter';
  --e-global-typography-accent-font-family: 'Inter';
  --e-global-color-primary: #111114; --e-global-color-secondary: #33333A;
  --e-global-color-text: #33333A; --e-global-color-accent: #FF4D6D;
}
.elementor-widget-heading .elementor-heading-title { font-family: var(--vd-head); color: var(--vd-ink); letter-spacing: -0.025em; }
.elementor-widget-text-editor { font-family: var(--vd-body); color: var(--vd-text); }

.vd-sec { padding-block: clamp(36px, 6vw, 72px); }
.vd-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.vd-sec .elementor-heading-title { font-size: clamp(24px, 3vw, 34px); font-weight: 800; }
.vd-eyebrow .elementor-heading-title { font: 700 12px/1 var(--vd-body) !important; letter-spacing: .12em !important; text-transform: uppercase; color: var(--vd-coral-text) !important; }
.vd-link .elementor-button { background: none !important; color: var(--vd-ink) !important; padding: 0 !important; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* Buttons */
.vd-btn .elementor-button { border-radius: 14px; padding: 16px 24px; font: 700 15px var(--vd-body); transition: transform .2s, background .2s; }
.vd-btn .elementor-button:hover { transform: translateY(-1px); }
.vd-btn-dark .elementor-button { background: var(--vd-ink); color: #fff; }
.vd-btn-dark .elementor-button:hover { background: #2a2a30; }
.vd-btn-light .elementor-button { background: #fff; color: var(--vd-ink); box-shadow: inset 0 0 0 1.5px var(--vd-line); }

/* Hero */
.vd-hero { background: var(--vd-warm); border-radius: 0 0 32px 32px; padding-block: clamp(32px, 5vw, 64px) !important; }
.vd-hero h1.elementor-heading-title { font-size: clamp(34px, 5vw, 58px); line-height: 1.04; font-weight: 800; }
.vd-hero h1 em { font-style: normal; color: var(--vd-coral); }
.vd-hero .elementor-widget-text-editor { font-size: 18px; line-height: 1.6; color: var(--vd-muted); max-width: 520px; }
.vd-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vd-collage-item { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 1; border-radius: 24px; padding: 14px; overflow: hidden; text-decoration: none; color: var(--vd-ink); transition: transform .25s; }
.vd-collage-item:hover { transform: translateY(-3px); }
.vd-collage-item img { position: absolute; inset: 10% 15% 30%; width: 70%; height: 60%; object-fit: contain; mix-blend-mode: multiply; }
.vd-collage-name { position: relative; font-weight: 700; font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vd-collage-price { position: relative; font: 800 15px var(--vd-head); margin-top: 2px; }
.vd-collage-price del { font-weight: 400; color: var(--vd-muted); font-size: 12px; }

/* Promise strip */
.vd-promise-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vd-promise-strip li { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #ECEBE6; border-radius: 16px; padding: 16px 18px; font-weight: 600; font-size: 14px; color: var(--vd-ink); margin: 0; }
.vd-promise-strip svg { color: var(--vd-coral); flex: 0 0 auto; }
@media (max-width: 767px) { .vd-promise-strip { grid-template-columns: 1fr; } }

/* Category tiles */
.vd-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vd-tile { position: relative; display: flex; justify-content: space-between; align-items: flex-end; min-height: 170px; border-radius: 24px; padding: 18px; overflow: hidden; text-decoration: none; color: var(--vd-ink); transition: transform .25s, box-shadow .25s; }
.vd-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(17,17,20,.08); }
.vd-tile-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; align-self: flex-start; }
.vd-tile strong { font: 800 18px/1.2 var(--vd-head); letter-spacing: -.02em; }
.vd-tile small { font-size: 13px; color: var(--vd-muted); }
.vd-tile img { position: absolute; right: -6%; bottom: -8%; width: 58%; height: 78%; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s; }
.vd-tile:hover img { transform: scale(1.05) rotate(-3deg); }
@media (max-width: 1023px) { .vd-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .vd-tile { min-height: 140px; padding: 14px; } .vd-tile strong { font-size: 16px; } }

/* Brand strip */
.vd-brands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vd-brand { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #ECEBE6; border-radius: 16px; padding: 12px 14px; text-decoration: none; color: var(--vd-ink); transition: border-color .2s; }
.vd-brand:hover { border-color: var(--vd-ink); }
.vd-brand img, .vd-brand i { width: 44px; height: 44px; border-radius: 12px; object-fit: contain; background: var(--vd-warm); flex: 0 0 auto; }
.vd-brand i { display: grid; place-items: center; font: 800 18px var(--vd-head); font-style: normal; }
.vd-brand span { display: flex; flex-direction: column; } .vd-brand strong { font-size: 15px; } .vd-brand small { font-size: 12px; color: var(--vd-muted); }
@media (max-width: 1023px) { .vd-brands { grid-template-columns: repeat(2, 1fr); } }

/* Product grids inside Elementor */
.vd-products .woocommerce ul.products { margin: 0; }

/* Wholesale banner */
.vd-wholesale { background: var(--vd-ink); border-radius: 28px; padding: clamp(28px, 5vw, 56px) !important; }
.vd-wholesale .elementor-heading-title { color: #fff !important; }
.vd-wholesale .elementor-widget-text-editor { color: rgba(255,255,255,.75); }
.vd-wholesale .vd-btn-dark .elementor-button { background: var(--vd-coral); }

/* Guides */
.vd-guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vd-guide-card { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid #ECEBE6; border-radius: 20px; padding: 12px 12px 18px; text-decoration: none; color: var(--vd-ink); transition: transform .25s; }
.vd-guide-card:hover { transform: translateY(-3px); }
.vd-guide-img { aspect-ratio: 16/10; border-radius: 14px; overflow: hidden; background: var(--vd-lilac); }
.vd-guide-img img { width: 100%; height: 100%; object-fit: cover; }
.vd-guide-card strong { font: 700 17px/1.3 var(--vd-head); padding: 4px 6px 0; }
.vd-guide-ex { font-size: 14px; color: var(--vd-muted); padding: 0 6px; }
.vd-guide-more { font-weight: 700; font-size: 14px; color: var(--vd-coral-text); padding: 0 6px; }
@media (max-width: 1023px) { .vd-guides { grid-template-columns: 1fr; } }

/* SEO text + FAQ */
.vd-seo { background: #fff; border: 1px solid #ECEBE6; border-radius: 28px; padding: clamp(24px, 4vw, 48px) !important; }
.vd-seo .elementor-widget-text-editor p { line-height: 1.75; }
.vd-seo .elementor-widget-text-editor a { color: var(--vd-coral-text); font-weight: 600; }
.vd-faq .elementor-accordion-item, .vd-faq .elementor-tab-title, .vd-faq .elementor-tab-content { border-color: #ECEBE6 !important; }
.vd-faq .elementor-tab-title { font: 700 16px var(--vd-head); padding: 18px 4px !important; }
.vd-faq .elementor-tab-title a { color: var(--vd-ink) !important; }
.vd-faq .elementor-tab-content { padding: 0 4px 18px !important; color: var(--vd-text); line-height: 1.7; }