/*
Theme Name:   VapeBox USA
Theme URI:    https://vapeboxusa.com
Description:  Custom premium child theme for VapeBox USA. Obsidian / graphite surfaces with a single molten-copper accent.
Author:       VapeBox USA
Template:     kadence
Version:      1.1.0
Text Domain:  vapebox
*/

/* ==========================================================================
   1. BRAND TOKENS
   Fonts are loaded in functions.php (Google Fonts: Syne, Inter, IBM Plex Mono)
   ========================================================================== */
:root{
  --vbx-obsidian:#0A0A0C;   /* page background */
  --vbx-graphite:#141519;   /* sections / header */
  --vbx-carbon:#1C1E24;     /* cards */
  --vbx-steel:#2A2D35;      /* borders / dividers */
  --vbx-fog:#9B9EA7;        /* muted text */
  --vbx-pearl:#F3F1EC;      /* primary text */
  --vbx-copper:#E0894E;     /* the one luxe accent */
  --vbx-copper-hi:#F4B582;  /* accent highlight (gradients only) */
  --vbx-copper-lo:#A9562A;  /* accent shadow (gradients only) */
  --vbx-grad:linear-gradient(135deg,var(--vbx-copper-hi) 0%,var(--vbx-copper) 45%,var(--vbx-copper-lo) 100%);
  --vbx-radius:18px;
  --vbx-radius-sm:10px;
  --vbx-max:1320px;
  --vbx-font-display:"Syne","Helvetica Neue",Arial,sans-serif;
  --vbx-font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --vbx-font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  /* Map onto Kadence global palette so every Kadence/Woo element inherits it */
  --global-palette1:var(--vbx-copper);   /* accent */
  --global-palette2:#C9733B;             /* accent hover */
  --global-palette3:var(--vbx-pearl);    /* strongest text / headings */
  --global-palette4:#E4E2DC;             /* body text */
  --global-palette5:var(--vbx-fog);      /* muted text */
  --global-palette6:#6E717A;             /* subtle text */
  --global-palette7:var(--vbx-steel);    /* borders */
  --global-palette8:var(--vbx-graphite); /* alt background */
  --global-palette9:var(--vbx-obsidian); /* base background */
  --global-body-font-family:var(--vbx-font-body);
  --global-heading-font-family:var(--vbx-font-display);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
html,body{background:var(--vbx-obsidian);color:var(--global-palette4);}
body{font-family:var(--vbx-font-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,h5,h6,.site-title{font-family:var(--vbx-font-display);color:var(--vbx-pearl);letter-spacing:-.02em;line-height:1.08;}
a{color:var(--vbx-copper);text-decoration:none;transition:color .2s ease;}
a:hover{color:var(--vbx-copper-hi);}
::selection{background:var(--vbx-copper);color:var(--vbx-obsidian);}
.vbx-mono{font-family:var(--vbx-font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;}

/* Buttons (Kadence + WooCommerce + our blocks) */
.vbx-btn,.button,button.button,.wp-block-button__link,.woocommerce a.button,.woocommerce button.button,
.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--vbx-grad);color:var(--vbx-obsidian)!important;border:0;border-radius:999px;
  padding:14px 28px;font-family:var(--vbx-font-body);font-weight:600;font-size:15px;letter-spacing:.01em;
  box-shadow:0 8px 30px -10px rgba(224,137,78,.55);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;}
.vbx-btn:hover,.button:hover,.wp-block-button__link:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{
  transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 12px 36px -10px rgba(224,137,78,.7);color:var(--vbx-obsidian)!important;}
.vbx-btn--ghost{background:transparent;color:var(--vbx-pearl)!important;border:1px solid var(--vbx-steel);box-shadow:none;}
.vbx-btn--ghost:hover{border-color:var(--vbx-copper);color:var(--vbx-pearl)!important;box-shadow:none;}

/* Forms */
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=search],input[type=number],input[type=date],select,textarea{
  background:var(--vbx-carbon)!important;color:var(--vbx-pearl)!important;border:1px solid var(--vbx-steel)!important;border-radius:var(--vbx-radius-sm)!important;padding:12px 14px!important;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--vbx-copper)!important;box-shadow:0 0 0 3px rgba(224,137,78,.18)!important;}

/* ==========================================================================
   3. HEADER / NAV (Kadence header builder)
   ========================================================================== */
.vbx-topbar{background:var(--vbx-copper);color:var(--vbx-obsidian);text-align:center;font-family:var(--vbx-font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;padding:9px 16px;font-weight:500;}
.vbx-topbar span{opacity:.5;margin:0 .9em;}
#masthead,.site-header .site-main-header-wrap .site-header-row-container-inner,.site-header-upper-wrap .site-header-upper-inner-wrap{
  background:rgba(10,10,12,.86)!important;backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid rgba(255,255,255,.06);}
.main-navigation .primary-menu-container>ul>li.menu-item>a,.vbx-nav a{
  font-family:var(--vbx-font-body);font-size:13.5px;font-weight:500;letter-spacing:.02em;color:var(--vbx-pearl);}
.main-navigation .primary-menu-container>ul>li.menu-item>a:hover,.vbx-nav a:hover{color:var(--vbx-copper);}
.header-navigation .header-menu-container ul ul.sub-menu{background:var(--vbx-graphite);border:1px solid var(--vbx-steel);border-radius:var(--vbx-radius-sm);box-shadow:0 30px 60px -20px rgba(0,0,0,.7);}
.header-navigation .header-menu-container ul ul li.menu-item>a{color:var(--global-palette4);font-size:13.5px;}
.header-cart-total,.header-cart-button .header-cart-total{background:var(--vbx-copper)!important;color:var(--vbx-obsidian)!important;}

/* ==========================================================================
   4. WOOCOMMERCE
   ========================================================================== */
.woocommerce ul.products li.product,.wc-block-grid__product{
  background:var(--vbx-carbon);border:1px solid var(--vbx-steel);border-radius:var(--vbx-radius);padding:14px 14px 20px!important;transition:border-color .25s ease,transform .25s ease;}
.woocommerce ul.products li.product:hover{border-color:rgba(224,137,78,.55);transform:translateY(-3px);}
.woocommerce ul.products li.product a img{border-radius:12px;background:#fff;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--vbx-font-body);font-weight:600;font-size:15px;color:var(--vbx-pearl);}
.woocommerce ul.products li.product .price,.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--vbx-copper)!important;font-weight:700;font-family:var(--vbx-font-body);}
.woocommerce span.onsale{background:var(--vbx-pearl);color:var(--vbx-obsidian);border-radius:999px;font-family:var(--vbx-font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;min-height:auto;line-height:1;padding:7px 10px;}
.woocommerce div.product .product_title{font-size:clamp(28px,3vw,42px);}
.woocommerce-tabs ul.tabs li a{color:var(--vbx-fog)!important;}
.woocommerce-tabs ul.tabs li.active a{color:var(--vbx-pearl)!important;border-bottom-color:var(--vbx-copper)!important;}
.woocommerce-message,.woocommerce-info{background:var(--vbx-carbon);border-top-color:var(--vbx-copper);color:var(--vbx-pearl);}
.woocommerce table.shop_table,.woocommerce-checkout #payment{background:var(--vbx-graphite)!important;border-color:var(--vbx-steel)!important;border-radius:var(--vbx-radius);}
.product-category a{display:block;border-radius:var(--vbx-radius);overflow:hidden;}

/* ==========================================================================
   5. HOMEPAGE BLOCKS (paste homepage.html into a Custom HTML block)
   ========================================================================== */
.vbx-wrap{max-width:var(--vbx-max);margin:0 auto;padding:0 28px;}
.vbx-section{padding:96px 0;}
.vbx-eyebrow{font-family:var(--vbx-font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--vbx-copper);display:inline-flex;align-items:center;gap:10px;}
.vbx-eyebrow:before{content:"";width:22px;height:1px;background:var(--vbx-copper);}
.vbx-h2{font-size:clamp(30px,4vw,52px);margin:14px 0 0;}
.vbx-lead{color:var(--vbx-fog);font-size:17px;max-width:560px;}
.vbx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px;flex-wrap:wrap;}
.vbx-link{font-weight:600;color:var(--vbx-pearl);border-bottom:1px solid var(--vbx-copper);padding-bottom:3px;}

/* Hero */
.vbx-hero{position:relative;overflow:hidden;background:
  radial-gradient(900px 520px at 78% 38%,rgba(224,137,78,.30),transparent 62%),
  radial-gradient(700px 500px at 10% 110%,rgba(120,124,140,.16),transparent 60%),
  linear-gradient(180deg,#0E0F12 0%,var(--vbx-obsidian) 100%);
  border-bottom:1px solid rgba(255,255,255,.05);}
.vbx-hero:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%);}
.vbx-hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;min-height:640px;padding-top:80px;padding-bottom:80px;}
.vbx-hero h1{font-size:clamp(44px,6.4vw,92px);font-weight:800;margin:20px 0 22px;letter-spacing:-.035em;}
.vbx-hero h1 em{font-style:normal;background:var(--vbx-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.vbx-hero p{font-size:18px;color:var(--vbx-fog);max-width:520px;margin:0 0 34px;}
.vbx-hero__cta{display:flex;gap:14px;flex-wrap:wrap;}
.vbx-hero__stats{display:flex;gap:40px;margin-top:54px;padding-top:28px;border-top:1px solid var(--vbx-steel);max-width:520px;}
.vbx-hero__stats b{display:block;font-family:var(--vbx-font-display);font-size:26px;color:var(--vbx-pearl);}
.vbx-hero__stats span{font-size:13px;color:var(--vbx-fog);}
.vbx-hero__art{position:relative;aspect-ratio:1/1;max-width:560px;justify-self:end;width:100%;}
.vbx-hero__art svg{width:100%;height:100%;display:block;filter:drop-shadow(0 40px 80px rgba(0,0,0,.6));}

/* Category tiles */
.vbx-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.vbx-cat{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:250px;padding:26px;border-radius:var(--vbx-radius);
  background:linear-gradient(160deg,var(--vbx-carbon) 0%,#121318 100%);border:1px solid var(--vbx-steel);overflow:hidden;color:var(--vbx-pearl);
  transition:transform .3s ease,border-color .3s ease;}
.vbx-cat:before{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-90px;border-radius:50%;
  background:radial-gradient(circle,rgba(224,137,78,.26),transparent 68%);transition:transform .5s ease;}
.vbx-cat:hover{transform:translateY(-4px);border-color:rgba(224,137,78,.6);color:var(--vbx-pearl);}
.vbx-cat:hover:before{transform:scale(1.35);}
.vbx-cat--wide{grid-column:span 2;}
.vbx-cat svg{position:relative;width:64px;height:64px;}
.vbx-cat h3{position:relative;font-size:22px;margin:0 0 6px;}
.vbx-cat p{position:relative;margin:0;color:var(--vbx-fog);font-size:14px;}
.vbx-cat__arrow{position:absolute;right:22px;bottom:22px;width:38px;height:38px;border-radius:50%;border:1px solid var(--vbx-steel);display:grid;place-items:center;color:var(--vbx-copper);transition:all .3s ease;}
.vbx-cat:hover .vbx-cat__arrow{background:var(--vbx-copper);color:var(--vbx-obsidian);border-color:var(--vbx-copper);}

/* Why shop */
.vbx-why{background:var(--vbx-graphite);border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);}
.vbx-why__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--vbx-steel);border:1px solid var(--vbx-steel);border-radius:var(--vbx-radius);overflow:hidden;}
.vbx-why__item{background:var(--vbx-graphite);padding:36px 30px;}
.vbx-why__num{font-family:var(--vbx-font-mono);font-size:12px;color:var(--vbx-copper);letter-spacing:.18em;}
.vbx-why__item h3{font-size:21px;margin:18px 0 10px;}
.vbx-why__item p{margin:0;color:var(--vbx-fog);font-size:14.5px;}

/* Nicotine warning */
.vbx-warning{background:#fff;color:#000;border:4px solid #000;padding:22px 26px;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:clamp(16px,1.8vw,22px);text-align:center;letter-spacing:.01em;line-height:1.35;}
.vbx-warning--slim{font-size:13px;padding:10px 14px;border-width:2px;}

/* Newsletter */
.vbx-news{position:relative;overflow:hidden;border-radius:28px;padding:72px 64px;border:1px solid var(--vbx-steel);
  background:radial-gradient(600px 300px at 100% 0%,rgba(224,137,78,.28),transparent 70%),linear-gradient(135deg,#17181D,#0D0E11);
  display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;}
.vbx-news h2{font-size:clamp(28px,3.4vw,46px);margin:12px 0 10px;}
.vbx-news p{color:var(--vbx-fog);margin:0;}
.vbx-news form{display:flex;gap:10px;background:var(--vbx-obsidian);border:1px solid var(--vbx-steel);border-radius:999px;padding:6px;}
.vbx-news input[type=email]{flex:1;background:transparent!important;border:0!important;box-shadow:none!important;padding:12px 18px!important;}
.vbx-news small{display:block;margin-top:12px;color:#6E717A;font-size:12px;}

/* Footer */
.vbx-footer{background:#08080A;border-top:1px solid rgba(255,255,255,.06);padding:80px 0 30px;color:var(--vbx-fog);font-size:14px;}
.vbx-footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;}
.vbx-footer h4{font-family:var(--vbx-font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--vbx-pearl);margin:0 0 18px;font-weight:500;}
.vbx-footer ul{list-style:none;margin:0;padding:0;}
.vbx-footer li{margin:0 0 10px;}
.vbx-footer a{color:var(--vbx-fog);}
.vbx-footer a:hover{color:var(--vbx-copper);}
.vbx-footer__legal{margin-top:56px;padding-top:24px;border-top:1px solid var(--vbx-steel);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;}
.vbx-pay{display:flex;gap:8px;}
.vbx-pay span{border:1px solid var(--vbx-steel);border-radius:6px;padding:4px 9px;font-family:var(--vbx-font-mono);font-size:10.5px;letter-spacing:.1em;color:var(--vbx-fog);}

/* Header used in static preview (Kadence header builder replicates this) */
.vbx-header{position:sticky;top:0;z-index:50;background:rgba(10,10,12,.86);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06);}
.vbx-header__row{display:flex;align-items:center;justify-content:space-between;height:78px;gap:30px;}
.vbx-header__logo img{height:34px;display:block;}
.vbx-nav{display:flex;gap:26px;}
.vbx-header__icons{display:flex;gap:18px;align-items:center;color:var(--vbx-pearl);}
.vbx-header__icons svg{width:21px;height:21px;}
.vbx-burger{display:none;}

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .vbx-nav{display:none;}.vbx-burger{display:block;}
  .vbx-cats{grid-template-columns:repeat(2,1fr);}
  .vbx-why__grid{grid-template-columns:repeat(2,1fr);}
  .vbx-footer__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:820px){
  .vbx-section{padding:64px 0;}
  .vbx-wrap{padding:0 20px;}
  .vbx-hero__grid{grid-template-columns:1fr;min-height:auto;padding-top:40px;padding-bottom:64px;gap:10px;}
  .vbx-hero__art{order:-1;max-width:300px;justify-self:center;}
  .vbx-hero__stats{gap:24px;}
  .vbx-cats{gap:12px;}
  .vbx-cat{min-height:190px;padding:20px;}
  .vbx-cat--wide{grid-column:span 2;}
  .vbx-cat h3{font-size:18px;}
  .vbx-cat svg{width:46px;height:46px;}
  .vbx-cat__arrow{display:none;}
  .vbx-why__grid{grid-template-columns:1fr;}
  .vbx-news{grid-template-columns:1fr;padding:44px 24px;gap:24px;border-radius:22px;}
  .vbx-news form{flex-direction:column;border-radius:16px;}
  .vbx-news .vbx-btn{width:100%;}
  .vbx-footer__grid{grid-template-columns:1fr;gap:30px;}
  .vbx-topbar{font-size:10.5px;letter-spacing:.12em;}.vbx-topbar .vbx-hide-sm,.vbx-topbar span{display:none;}
  .vbx-header__row{height:64px;}
  .vbx-header__logo img{height:28px;}
}

/* ==========================================================================
   9. HEADER ITEMS, MINI CART, CHECKOUT AGE FIELDS (v1.1)
   ========================================================================== */
.site-header .search-toggle-open,.site-header .header-cart-button,.site-header .menu-toggle-open{color:var(--vbx-pearl);}
.site-header .search-toggle-open:hover,.site-header .header-cart-button:hover{color:var(--vbx-copper);}
.header-cart-total{background:var(--vbx-copper)!important;color:var(--vbx-obsidian)!important;}
.header-navigation .menu-item.vbx-deals>a{color:var(--vbx-copper)!important;}
#search-drawer .drawer-inner{background:rgba(10,10,12,.97);}
#search-drawer .search-form input.search-field{font-family:var(--vbx-font-display);font-size:28px;color:var(--vbx-pearl);border-color:var(--vbx-steel);}
#cart-drawer .drawer-inner,.popup-drawer .drawer-inner{background:var(--vbx-graphite);color:var(--global-palette4);}
.vbx-footer .menu{list-style:none;margin:0;padding:0;}
.wc-block-checkout__additional-fields .wc-block-components-checkbox__label{font-size:14px;}