/* ==========================================================================
   Vape Plug (Turbo Clone) — WooCommerce skin
   Makes Woo pages/components inherit the Turbo theme look, without the
   Turbo JS (this file only adds what turbo.css does not already provide).
   ========================================================================== */

/* ---------- generic layout helpers ---------- */
.vp-page-content img { max-width: 100%; height: auto; }
.vp-page-content { line-height: 1.65; }

.container::after,
.list-collections-wrapper::after,
.product_section::after { content: ""; display: table; clear: both; }

h1.title, .title {
  font-family: var(--vp-heading-font, inherit);
  letter-spacing: .02em;
}

/* .feature-divider styling comes from turbo.css (reference theme) */

/* ---------- product cards ---------- */
.product-list .thumbnail .product-wrap { position: relative; }
.product-list .product-info__caption .title { font-size: 14px; }

/* ---------- product page ---------- */
.vp-product-page { padding-top: 20px; }
.product_gallery img.vp-main-image {
  width: 100%; height: auto; max-height: 560px; object-fit: contain; background: #fff;
}
.product-gallery__main { position: relative; border: 1px solid #f0f0f0; }
.vp-sticker {
  position: absolute; top: 12px; left: 12px; z-index: 4;
  background: #c6561c; color: #fff; padding: 4px 10px; font-size: 12px;
  text-transform: uppercase; letter-spacing: .05em;
}
.product-gallery__thumbs { margin-top: 12px; gap: 8px; }
.vp-thumb { width: 72px; height: 72px; border: 1px solid #e5e5e5; display: block; overflow: hidden; }
.vp-thumb.is-active, .vp-thumb:hover { border-color: #c6561c; }
.vp-thumb img { width: 100%; height: 100%; object-fit: cover; }

.product_details .product_name { font-size: 28px; margin: 0 0 12px; line-height: 1.25; }
.price-ui { margin-bottom: 16px; font-size: 22px; }
.price-ui .price--sale .money { color: #e02b2b; font-weight: 700; }
.compare-at-price { color: #999; text-decoration: line-through; margin-left: 8px; font-size: 18px; }

.product_meta.vp-product-meta {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid #eee;
  font-size: 13px; color: #666;
}
.product_meta span { display: block; margin-bottom: 5px; }
.stock-status.in-stock { color: #128a3f; }
.stock-status.out-of-stock { color: #c00; }

/* ---------- Woo forms ---------- */
form.cart { margin: 18px 0; }
.quantity { position: relative; display: inline-flex; align-items: center; margin-right: 10px; }
.quantity input.qty {
  width: 70px; padding: 10px 6px; text-align: center;
  border: 1px solid #ddd; background: #fff; -moz-appearance: textfield;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vp-qty-btn {
  width: 34px; height: 42px; border: 1px solid #ddd; background: #f8f8f8;
  cursor: pointer; font-size: 16px; line-height: 1;
}
.vp-qty-btn:hover { background: #c6561c; color: #fff; border-color: #c6561c; }

/* Woo buttons adopt the reference theme's own button styling.
   (turbo.css already styles .global-button with #c6561c / 14px / uppercase — we mirror
   exactly those declarations for WooCommerce's button classes.) */
.single_add_to_cart_button.button,
button.button, input.button, a.button, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #c6561c; padding: 13px 20px; line-height: 1.2;
  font-family: Archivo, sans-serif; font-weight: 400; font-style: normal;
  font-size: 14px; text-transform: uppercase; letter-spacing: 1px;
  border-radius: 0; cursor: pointer; text-align: center;
  background: #c6561c; color: #fff; transition: all .2s linear;
}
.single_add_to_cart_button.button:hover,
button.button:hover, input.button:hover, a.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: #c6561c; border-color: #c6561c; color: #fff;
}

/* product type variations */
.variations { width: 100%; margin-bottom: 16px; }
.variations th, .variations td { padding: 6px 8px; text-align: left; border: 0; }
.variations select { padding: 8px 10px; border: 1px solid #ddd; background: #fff; max-width: 100%; }
.reset_variations { font-size: 12px; color: #c6561c; }

/* ---------- badges ----------
   placement + colours come from turbo.css (the reference theme):
   .thumbnail .price-ui-badges { position:absolute; top:0; right:0 } /
   .price-ui-badge__sticker { background:#c20000 }                        */
.price-ui-badge__sticker--sale { background: #e02b2b; }
.price-ui-badge__sticker--sold-out { background: #555; }

/* ---------- breadcrumbs ---------- */
.vp-breadcrumbs { font-size: 12px; color: #888; padding: 10px 0 4px; }
.vp-breadcrumbs a { color: #888; text-decoration: underline; }
.vp-breadcrumbs span.sep { padding: 0 5px; opacity: .6; }

/* ---------- collection toolbar / pagination ---------- */
.vp-collection-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0 18px; font-size: 13px; flex-wrap: wrap; gap: 10px;
}
.woocommerce-ordering select { padding: 7px 10px; border: 1px solid #ddd; background: #fff; }

/* ---------- shop brand list ---------- */
.vp-shop-cats { margin-top: 40px; padding-top: 24px; border-top: 1px solid #eee; }
.vp-cat-list { columns: 4 180px; list-style: none; padding: 0; }
.vp-cat-list li { margin-bottom: 6px; font-size: 14px; }
.vp-cat-list li span { color: #999; }

/* ---------- WooCommerce notices ---------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top: 3px solid #c6561c; background: #f8fbfe; padding: 14px 18px 14px 46px !important;
  margin-bottom: 20px; list-style: none; position: relative; font-size: 14px;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before {
  position: absolute; left: 16px; top: 14px; color: #c6561c;
}
.woocommerce-error { border-top-color: #e02b2b; }
.woocommerce-error::before { color: #e02b2b; }
.woocommerce-message .button, .woocommerce-info .button {
  float: right; margin-left: 12px; padding: 8px 16px; font-size: 11px;
}

/* ---------- tables (cart / account / order) ---------- */
table.shop_table {
  border: 1px solid #e8e8e8; border-collapse: separate; border-spacing: 0;
  width: 100%; margin-bottom: 24px; font-size: 14px;
}
table.shop_table th {
  background: #fafafa; text-transform: uppercase; font-size: 12px;
  letter-spacing: .06em; text-align: left; padding: 12px 14px;
}
table.shop_table td { padding: 12px 14px; border-top: 1px solid #eee; vertical-align: middle; }
table.shop_table img { width: 64px; height: 64px; object-fit: cover; }
table.cart .product-remove a { color: #c00; font-size: 18px; text-decoration: none; }
.cart_totals table.shop_table td, .cart_totals table.shop_table th { border-top: 1px solid #eee; }

.cart-collaterals .cart_totals { float: right; width: 100%; max-width: 460px; }
.wc-proceed-to-checkout a.checkout-button {
  display: block; text-align: center; margin-top: 14px;
}
.coupon input#coupon_code { padding: 10px; border: 1px solid #ddd; margin-right: 8px; }
.cart .actions .button { padding: 10px 18px; }
.cart-empty.woocommerce-info { border-top-color: #c6561c; }
.return-to-shop .button { margin-top: 10px; }

/* ---------- checkout ---------- */
.woocommerce-checkout .col2-set::after { content: ""; display: table; clear: both; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { float: left; width: 50%; padding-right: 20px; }
.woocommerce-checkout #customer_details { margin-bottom: 30px; }
.woocommerce-checkout h3 { font-size: 18px; margin-bottom: 14px; }
.woocommerce-checkout .form-row { margin-bottom: 14px; }
.woocommerce-checkout .form-row label { display: block; font-size: 13px; margin-bottom: 5px; }
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #ddd; background: #fff;
}
#order_review_heading { margin-top: 10px; }
#payment { background: #fafafa; border: 1px solid #eee; padding: 18px; }
#payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 16px; }
#payment ul.payment_methods li { margin-bottom: 8px; font-size: 14px; }
#place_order { width: 100%; }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td { font-weight: 700; }

/* ---------- my account ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 24%; }
.woocommerce-account .woocommerce-MyAccount-content { float: right; width: 73%; }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; border: 1px solid #eee; }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid #eee; }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation a { display: block; padding: 11px 15px; font-size: 14px; }
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation a:hover { background: #c6561c; color: #fff; }
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register { border: 1px solid #eee; padding: 24px; max-width: 520px; }
.woocommerce-account input.input-text { width: 100%; padding: 11px 12px; border: 1px solid #ddd; }
.woocommerce-form-login__submit, .woocommerce-form-register__submit { margin-top: 12px; }

/* ---------- mini cart ---------- */
.cart_content { display: none; }
.cart_content.is-visible { display: block; }

/* ---------- mobile nav ---------- */
.mobile-nav-bar { display: none; }
.vp-mobile-nav { display: none; }
.vp-mobile-nav.is-open { display: block; }

@media only screen and (max-width: 798px) {
  .mobile-nav-bar { display: block; text-align: center; padding: 6px 0; }
  .vp-mobile-toggle { background: none; border: 0; font-size: 24px; cursor: pointer; }
  .vp-mobile-nav.is-open { background: #fff; border-top: 1px solid #eee; padding: 10px 18px; }
  .vp-mobile-nav ul { list-style: none; margin: 0; padding: 0; }
  .vp-mobile-nav li { border-bottom: 1px solid #f0f0f0; }
  .vp-mobile-nav a { display: block; padding: 11px 0; font-size: 14px; }
  .vp-hero__title { font-size: 30px; }
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; }
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; padding-right: 0; }
}

/* ---------- search form visibility ---------- */
.search-container .search__form.is-visible { display: block; }
@media only screen and (min-width: 799px) {
  .search-container .search__form { display: block !important; }
}

/* ---------- add to cart pop feedback ---------- */
body.vp-cart-pop .cart-container .icon-bag { color: #c6561c; transform: scale(1.12); }
.cart-container .icon-bag { transition: transform .2s ease, color .2s ease; }

/* ---------- footer extras ---------- */
.footer .vp-newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; }
.footer .vp-newsletter-form input.contact_email {
  flex: 1 1 200px; padding: 11px 12px; border: 1px solid #ddd; background: #fff;
}
.footer .payment_methods { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.footer .payment_methods .vp-pay {
  border: 1px solid currentColor; border-radius: 3px; font-size: 10px;
  padding: 3px 7px; letter-spacing: .04em; text-transform: uppercase; opacity: .85;
}
.footer .footer_credits .credits { font-size: 12px; opacity: .8; }

/* ---------- Woo star ratings inherit accent ---------- */
.star-rating span::before { color: #EBBF20; }
.woocommerce-product-rating .star-rating { color: #EBBF20; }

/* ---------- misc ---------- */
.vp-empty { padding: 40px 0; text-align: center; color: #777; }
.vp-404 { text-align: center; padding: 60px 0; }
.vp-404 .global-button { margin-top: 16px; }
.vp-pagination { text-align: center; padding: 20px 0; }
.vp-pagination .page-numbers {
  display: inline-block; padding: 8px 13px; margin: 0 3px;
  border: 1px solid #e5e5e5; font-size: 13px;
}
.vp-pagination .page-numbers.current,
.vp-pagination .page-numbers:hover { background: #c6561c; color: #fff; border-color: #c6561c; }
.vp-post { padding: 18px 0; border-bottom: 1px solid #eee; }
.vp-post-meta { color: #999; font-size: 12px; }
.vp-woo-title { margin-bottom: 10px; }
.woocommerce-products-header { display: none; }

/* ---- clone fidelity: reference header logo + announcement bar ---- */
.secondary_logo { display: block !important; }


/* ---------- VP search landing and live-order toast ----------------------- */
.vp-search-subtitle { margin: 18px 0 12px; font-size: 15px; letter-spacing: .08em; }
.vp-search-form { position: relative; display: block; width: 100%; max-width: 560px; margin: 0 0 30px; }
.vp-search-form input[type="search"] { display: block; width: 100%; height: 50px; box-sizing: border-box; padding: 0 58px 0 14px; border: 1px solid #ddd; background: #fff; }
.vp-search-form .vp-search-submit { position: absolute; top: 0; right: 0; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0 !important; background: transparent !important; color: #333 !important; cursor: pointer; }
.vp-search-form .vp-search-submit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

/* Recent-order PopConvert-style notification: reference box size, position, progress bar and slide animation. */
.vp-sales-root { display: block; position: static; width: 100%; height: 0; pointer-events: none; }
.vp-sales-fixed { position: fixed; left: 10px; bottom: 25px; width: 350px; height: 110px; z-index: 2147483000; pointer-events: none; }
.vp-sales-box { position: relative; width: 100%; height: 100%; overflow: visible; }
.vp-sales-card {
  position: absolute; left: 0; bottom: 0; width: 350px; height: 110px; box-sizing: border-box;
  overflow: visible; transform-origin: center bottom; will-change: transform, opacity;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; perspective: 1000px;
  transition: transform .4s cubic-bezier(.25,.46,.45,.94), opacity .3s cubic-bezier(.25,.46,.45,.94);
  opacity: 1; pointer-events: auto;
}
.vp-sales-card.animation-waiting { transform: translateY(100%); opacity: 0; }
.vp-sales-card.animation-entering { animation: vpSalesSlideIn .5s cubic-bezier(.25,.46,.45,.94) forwards; }
.vp-sales-card.animation-visible { transform: translateY(0); opacity: 1; }
.vp-sales-card.animation-exiting { animation: vpSalesSlideOut .4s cubic-bezier(.25,.46,.45,.94) forwards; }
@keyframes vpSalesSlideIn { 0% { transform: translateY(100%); opacity: 0; } 20% { opacity: .3; } to { transform: translateY(0); opacity: 1; } }
@keyframes vpSalesSlideOut { 0% { transform: translateY(0); opacity: 1; } 80% { opacity: .3; } to { transform: translateY(-30%); opacity: 0; } }
.vp-sales-card__link { display: block; width: 100%; height: 100%; color: inherit !important; text-decoration: none; }
.vp-sales-card__content {
  position: relative; display: flex; align-items: center; gap: 16px; width: 100%; height: 100%;
  box-sizing: border-box; padding: 12px; border-radius: 10px; background: #fff; overflow: hidden; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.16);
}
.vp-sales-progress { position: absolute; top: 0; left: 0; height: 4px; width: 100%; z-index: 10; background: rgba(0,0,0,.15); border-radius: 10px 10px 0 0; overflow: hidden; }
.vp-sales-progress span { display: block; height: 100%; width: 100%; background: #424242; border-radius: inherit; box-shadow: 0 0 3px rgba(40,167,69,.3); }
.vp-sales-card.animation-visible .vp-sales-progress span { animation: vpSalesCountdown 8s linear forwards; }
@keyframes vpSalesCountdown { from { width: 100%; } to { width: 0; } }
.vp-sales-card__image { display: block; flex: 0 0 75px; width: 75px; height: 75px; overflow: hidden; }
.vp-sales-card__image img { display: block; width: 75px !important; height: 75px !important; object-fit: cover; border-radius: 0 !important; }
.vp-sales-card__text { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; min-width: 0; }
.vp-sales-card__intro { color: #212529; font-size: 12px; line-height: 1.3; margin: 3px 0; }
.vp-sales-card__text strong { display: block; color: #000; font-size: 15px; line-height: 1.25; font-weight: 500; margin: 0; }
.vp-sales-card__time { color: #6666ff; font-size: 11px; line-height: 1.3; margin: 3px 0; }
.vp-sales-card__close { position: absolute; top: 7px; right: 4px; z-index: 20; width: 15px; height: 15px; padding: 0; color: #6c757d; background: transparent; border: 0; cursor: pointer; }
.vp-sales-card__close svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.vp-sales-credit { position: absolute; right: 5px; bottom: 4px; z-index: 20; margin: 0; padding: 0; pointer-events: none; }
.vp-sales-credit p { position: static; margin: 0; padding: 0; }
.vp-sales-credit small { color: #6c757d; font-family: sans-serif; font-size: 10px; font-style: italic; }
@media (max-width: 768px) {
  /* CareCart/Shopify SalesPop places mobile notices centered near the top. */
  .vp-sales-fixed {
    top: 60px; left: 50%; bottom: auto; width: min(320px, calc(100vw - 20px));
    height: 100px; transform: translateX(-50%);
  }
  .vp-sales-card { left: 0; width: 100%; height: 100px; }
  .vp-sales-card.animation-waiting { transform: translateY(-120%); }
  .vp-sales-card.animation-entering { animation-name: vpSalesSlideInMobile; }
  .vp-sales-card.animation-visible { transform: translateY(0); }
  .vp-sales-card.animation-exiting { animation-name: vpSalesSlideOutMobile; }
  .vp-sales-credit { position: absolute; right: 5px; bottom: 4px; }
  .vp-sales-credit p { position: static; }
  @keyframes vpSalesSlideInMobile { 0% { transform: translateY(-120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  @keyframes vpSalesSlideOutMobile { 0% { transform: translateY(0); opacity: 1; } to { transform: translateY(-40%); opacity: 0; } }
}

/* Make header magnifiers real, keyboard/touch-submittable form buttons. */
.header_search_form .search-submit,
.search-container .search__form .search-submit {
  display: inline-flex; align-items: center; justify-content: center;
  appearance: none; -webkit-appearance: none; border: 0; margin: 0; padding: 0;
  color: inherit; background: transparent; font: inherit; cursor: pointer;
}

/* Reliable three-column desktop footer and full-width, tappable mobile accordions. */
.footer .footer-menu-wrap {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 30px; row-gap: 14px; align-items: start;
}
.footer .footer-menu-wrap > .column {
  float: none !important; width: auto !important; max-width: none !important;
  margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
  box-sizing: border-box; min-width: 0;
}
.footer .footer-menu-wrap > .footer_credits {
  grid-column: 1 / -1; width: 100% !important; margin-top: 10px;
}
.footer .footer-menu-wrap .vp-footer-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0;
  color: inherit; background: transparent; font: inherit; text-align: left;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.footer .footer-menu-wrap .vp-footer-toggle > span {
  float: none !important; margin-left: 12px; transition: transform .2s ease;
}
.footer .footer-menu-wrap .vp-footer-toggle[aria-expanded="true"] > span { transform: rotate(180deg); }
@media only screen and (min-width: 799px) {
  .footer .footer-menu-wrap .toggle_content { display: block !important; }
  .footer .footer-menu-wrap .vp-footer-toggle { cursor: default; }
}
@media only screen and (max-width: 798px) {
  .footer .footer-menu-wrap {
    grid-template-columns: minmax(0, 1fr) !important; column-gap: 0; row-gap: 0;
    width: 100%; box-sizing: border-box;
  }
  .footer .footer-menu-wrap > .column {
    width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important;
  }
  .footer .footer-menu-wrap .toggle_content { display: none !important; }
  .footer .footer-menu-wrap .footer_menu.vp-footer-open .toggle_content { display: block !important; }
  .footer .footer-menu-wrap .vp-footer-toggle { min-height: 44px; }
}

/* Mobile header drawer: native <details> plus the reference animation state. */
@media only screen and (max-width: 798px) {
  #header .top-bar { position: relative; }
  #header details[data-mobile-menu] { position: static; }
  #header .mobile-menu-container {
    display: block !important; position: absolute !important; top: 100% !important; left: 0 !important;
    width: 100vw !important; max-height: calc(100vh - 90px); overflow-y: auto;
    background: #fff; opacity: 0; visibility: hidden; pointer-events: none;
    z-index: 2147482000 !important; transition: opacity .2s linear, visibility .2s linear;
  }
  #header details[data-mobile-menu][open] .mobile-menu-container,
  #header .mobile-menu-container[data-animation-state="open"] {
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  }
  #header summary[data-mobile-menu-trigger] {
    display: flex; align-items: center; cursor: pointer; touch-action: manipulation;
    -webkit-tap-highlight-color: transparent; list-style: none;
  }
  #header summary[data-mobile-menu-trigger]::-webkit-details-marker { display: none; }
}

/* Visible Product Prices on Catalog & Category Pages */
.product-details .price-ui {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin-top: 6px;
  margin-bottom: 8px;
  line-height: 1.3;
}
.product-details .price-ui .price,
.product-details .price-ui span.money {
  font-family: Archivo, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  display: inline-block;
}
.product-details .price-ui .price--sale span.money {
  color: #c6561c !important;
  font-weight: 700 !important;
}
.product-details .price-ui .compare-at-price {
  margin-left: 6px;
  display: inline-block;
}
.product-details .price-ui .compare-at-price span.money {
  color: #888888 !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
  font-size: 13px !important;
}