/*
Theme Name: Vapekage
Theme URI: https://vapekage.com
Description: Vapekage storefront theme — the original Shopify design, ported section by section. Design tokens live in css/00-tokens.css; every section owns one file in css/sections/.
Author: Vapekage
Template: storefront
Version: 3.20.0
*/

/* =========================================================
   THIS FILE IS THE WOOCOMMERCE GLUE LAYER ONLY.

   Do NOT add section styling here — each ported section owns
   css/sections/<section>.css and is enqueued on its own handle
   (see vk_section_groups() in functions.php).

   Tokens  -> css/00-tokens.css
   Base    -> css/01-base.css
   Header  -> css/sections/vk-header.css
   Hero    -> css/sections/vk-hero.css   ... etc.

   Rules here style markup WooCommerce generates, which the
   ported Shopify CSS knows nothing about.
   ========================================================= */

/* =========================================================
   BUTTONS
   ========================================================= */
button:not([class*="vpk-"]), input[type=button], input[type=submit],
.button:not([class*="vpk-"]), .added_to_cart,
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: var(--vk-accent) !important;
  color: #101010 !important;
  font-family: var(--vk-font) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: .01em;
  border: 0 !important;
  border-radius: var(--vk-radius) !important;
  padding: 13px 22px !important;
  text-shadow: none !important;
  transition: transform .18s ease, background-color .18s ease;
}
button:not([class*="vpk-"]):hover, .button:not([class*="vpk-"]):hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--vk-accent-2) !important;
  color: #101010 !important;
  transform: translateY(-2px);
}

/* =========================================================
   PRODUCT GRID / CARDS
   ========================================================= */
.woocommerce ul.products li.product,
ul.products li.product {
  background: var(--vk-surface) !important;
  border: 1px solid var(--vk-border);
  border-radius: var(--vk-radius-lg);
  padding: 14px !important;
  transition: transform .22s ease, border-color .22s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  border-color: var(--vk-accent-soft);
}
.woocommerce ul.products li.product img {
  border-radius: var(--vk-radius);
  background: #fff;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  color: var(--vk-text) !important;
  font-family: var(--vk-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  line-height: 1.35;
  text-transform: none;
  padding-top: 10px !important;
  min-height: 3.2em;
  display: block;
  overflow: hidden;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--vk-accent) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
}
.woocommerce ul.products li.product .price del {
  color: var(--vk-text-dim) !important;
  font-weight: 500;
}
.woocommerce span.onsale {
  background: var(--vk-accent) !important;
  color: #101010 !important;
  font-weight: 800;
  border-radius: var(--vk-radius-pill);
}

/* 4-up grid */
.woocommerce ul.products.columns-4 li.product { width: 22.5% !important; margin-right: 3.3% !important; }
.woocommerce ul.products.columns-4 li.product:nth-child(4n) { margin-right: 0 !important; }
@media (max-width: 900px) {
  .woocommerce ul.products.columns-4 li.product { width: 47% !important; margin-right: 6% !important; }
  .woocommerce ul.products.columns-4 li.product:nth-child(2n) { margin-right: 0 !important; }
}

/* stock badges */
.woocommerce div.product .stock { color: var(--vk-accent) !important; font-weight: 600; }
.woocommerce div.product .out-of-stock { color: var(--vk-danger) !important; }

/* =========================================================
   SINGLE PRODUCT
   ========================================================= */
.woocommerce div.product { color: var(--vk-text); }
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs .panel {
  background: var(--vk-surface) !important;
  border-color: var(--vk-border) !important;
  color: var(--vk-text-muted) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--vk-text) !important; font-weight: 600; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--vk-accent) !important; }
.woocommerce div.product form.cart .variations label { color: var(--vk-text) !important; font-weight: 600; }
.woocommerce div.product form.cart .variations select,
.quantity .qty {
  background: var(--vk-surface-2) !important;
  color: var(--vk-text) !important;
  border: 1px solid var(--vk-border) !important;
  border-radius: 8px;
  padding: 10px;
}
.vk-juice-pdp h2 { border-bottom: 1px solid rgba(170,255,0,.15); }

/* =========================================================
   BREADCRUMB / NOTICES / TABLES / PAGINATION
   ========================================================= */
.woocommerce-breadcrumb {
  color: var(--vk-text-dim) !important;
  font-size: 13px;
  margin-bottom: 18px !important;
}
.woocommerce-breadcrumb a { color: var(--vk-text-muted) !important; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: var(--vk-surface) !important;
  color: var(--vk-text) !important;
  border-top-color: var(--vk-accent) !important;
}
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
  background: var(--vk-surface) !important;
  color: var(--vk-text) !important;
  border-color: var(--vk-border) !important;
}
.woocommerce-cart .cart-collaterals .cart_totals table small { color: var(--vk-text-dim) !important; }
.pagination .page-numbers li .page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--vk-accent) !important;
  color: #101010 !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background: var(--vk-surface) !important;
  color: var(--vk-text) !important;
  border-color: var(--vk-border) !important;
}
hr { border-color: var(--vk-border) !important; }

/* =========================================================
   FORMS
   ========================================================= */
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=search], textarea, select {
  background: var(--vk-surface-2) !important;
  color: var(--vk-text) !important;
  border: 1px solid var(--vk-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--vk-accent) !important;
  outline: none !important;
}
::placeholder { color: rgba(255,255,255,.38) !important; }

/* =========================================================
   WIDGETS / STOREFRONT LEFTOVERS
   ========================================================= */
.widget, .widget-area .widget {
  background: transparent !important;
  color: var(--vk-text-muted) !important;
}
.widget h2.widget-title, .widget .widget-title {
  color: var(--vk-text) !important;
  font-size: 14px !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.site-info { background: var(--vk-black) !important; color: var(--vk-text-dim) !important; }
.storefront-handheld-footer-bar { background: #000 !important; border-top: 1px solid var(--vk-border); }
.storefront-handheld-footer-bar ul li > a { color: #fff !important; }
.post-edit-link { opacity: .35; font-size: 12px; }

/* =========================================================
   FULL-WIDTH LAYOUT (no sidebar on shop/product/front)
   ========================================================= */
.vk-full-width #primary,
.vk-full-width .content-area { width: 100% !important; float: none !important; margin-right: 0 !important; }
.vk-full-width #secondary,
.vk-full-width .widget-area { display: none !important; }
.vk-full-width .site-content .col-full { max-width: var(--vk-maxw); }

/* the ported header/footer are full-bleed; let them out of col-full */
.home .site-content .col-full { max-width: none; padding: 0; }
.home .entry-header, .home .page-title { display: none !important; }
.site-content { padding-top: 0 !important; }
.storefront-breadcrumb { padding: 10px 0 !important; margin-bottom: 0 !important; background: transparent !important; }

/* =========================================================
   LINK / UNDERLINE NORMALISATION (Storefront forces underlines)
   ========================================================= */
.woocommerce ul.products li.product a,
.woocommerce-loop-product__link,
.woocommerce-breadcrumb a,
.added_to_cart, .button {
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}
/* keep underlines inside prose so body copy stays readable */
.entry-content p a, .vk-juice-pdp p a { text-decoration: underline !important; }

/* ──────────────────────────────────────────────────────────────
   PRODUCT PAGE — conflicts with the rules above
   This file loads last and paints every <button> with the lime
   accent using !important, which is right for cart buttons and
   wrong for the ported product controls. Undo it for those.
   ────────────────────────────────────────────────────────────── */

button.vpk-share__btn {
  background-color: #111111 !important;
  color: #666666 !important;
  width: 30px !important;
  height: 30px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
}
button.vpk-share__btn:hover {
  background-color: #1A1A1A !important;
  color: #AAFF00 !important;
}
button.vpk-share__btn svg { width: 13px; height: 13px; }

/* Storefront puts .product on the single-product wrapper and gives it
   overflow:hidden, which silently cancels position:sticky on the gallery
   column — the image scrolled away and left a tall black gap beside the
   buy panel. */
.vk-product-page,
body .vk-product-page.product {
  overflow: visible !important;
}