/* GotVape Retail type parity — mirrors the Exxus/Sutra DTC larger heading scale
   (h1 50 / h2 42.5 / h3 35 / h4 27.5, lh 1.1) and forces body weight 400 so the
   brand fonts (Oswald headings / Harmonia Sans body) render consistently with
   the rest of the DTC portfolio. !important so the vars win over the theme's
   inline type CSS regardless of load order. */
:root {
  --element-text-font-size--body-md: 18px;
  --element-text-font-size--body-sm: 15px;
  --element-text-font-size--heading-2xl: 60px !important;
  --element-text-font-size--heading-xl: 50px !important;
  --element-text-font-size--heading-lg: 42.5px !important;
  --element-text-font-size--heading-md: 35px !important;
  --element-text-font-size--heading-sm: 27.5px !important;
  --element-text-font-size--heading-xs: 22px !important;
  --element-text-font-size--heading-2xs: 18px !important;

  --element-text-line-height--body-md: 1.5;
  --element-text-line-height--heading-2xl: 1.1;
  --element-text-line-height--heading-xl: 1.1;
  --element-text-line-height--heading-lg: 1.1;
  --element-text-line-height--heading-md: 1.1;
  --element-text-line-height--heading-sm: 1.1;
  --element-text-line-height--heading-xs: 1.1;
  --element-text-line-height--heading-2xs: 1.1;
}

/* Harmonia Sans n4 resolves to 400 natively (verified against Exxus, same body
   font) — this is a defensive no-op guard, not a fix, kept for portfolio parity
   and to protect against a future font swap silently going light. */
:root {
  --element-text-font-weight--body: 400 !important;
}

/* Scale headings down on small screens. */
@media (max-width: 749px) {
  :root {
    --element-text-font-size--heading-2xl: 40px !important;
    --element-text-font-size--heading-xl: 34px !important;
    --element-text-font-size--heading-lg: 30px !important;
    --element-text-font-size--heading-md: 26px !important;
    --element-text-font-size--heading-sm: 22px !important;
  }
}

/* ============================================================
   KNOWLEDGE-PLATFORM + DESIGN-SYSTEM COMPONENTS (Task 4)
   Ported from wulfmods-theme (rule-5 re-tokenized: brand colors resolve
   via var(--color-button-primary/--root-color-primary/-secondary), GVWS-
   orange kept only as the var() fallback value, matches GotVape's own
   button token #ff8b00 anyway). Task-2 type-scale block above is untouched.
============================================================ */
/* ========================================
   GVWS GLOBAL LAYOUT & TYPOGRAPHY
======================================== */

.footer__title {
  font-weight: bold;
  font-size: var(--body-font-size) !important;
}

.type-banner .promo-grid__container {
  align-items: center;
  height: 100%;
}

.type-banner__text {
  flex-direction: column;
  gap: 1rem;
}

.flex-grid__item--75 .type-banner__text,
.flex-grid__item--100 .type-banner__text {
  flex-direction: row;
}

.type-banner__text h2,
.type-banner__text p {
  margin: 0;
}

.type-banner__text .element-button {
  margin: 0;
}

/* ========================================
   GVWS FORMS & INPUTS
======================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
select,
textarea,
.search__input,
.site-header__search-input,
.element-input input,
.element-input select,
.element-input textarea {
  background-color: #f7f7f7 !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  border-radius: 6px !important;
  color: var(--root-color-primary, #111111) !important;
  min-height: 46px !important;
  padding: 10px 14px !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  outline: none !important;
}

textarea,
.element-input textarea {
  min-height: 140px !important;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  background-color: var(--root-color-secondary, #ffffff) !important;
  border-color: var(--color-button-primary, #ff8b00) !important;
  box-shadow: 0 0 0 2px rgba(255, 139, 0, 0.18) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(0, 0, 0, 0.45) !important;
  opacity: 1 !important;
}

input[type="checkbox"],
input[type="radio"] {
  min-height: auto !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin-right: 8px;
  box-shadow: none !important;
  appearance: auto;
  -webkit-appearance: auto;
}

/* ========================================
   GVWS HOMEPAGE HERO
======================================== */

.promo-grid__container .promo-grid__text > a:first-of-type {
  background: var(--color-button-primary, #ff8b00);
  border: 2px solid var(--color-button-primary, #ff8b00);
  color: var(--root-color-secondary, #ffffff);
}

.promo-grid__container .promo-grid__text > a:nth-of-type(2) {
  background: transparent;
  border: 2px solid var(--root-color-secondary, #ffffff);
  color: var(--root-color-secondary, #ffffff);
}

.promo-grid__container .promo-grid__text > a:nth-of-type(2):hover {
  background: var(--root-color-secondary, #ffffff);
  color: #000000;
}

.promo-grid__container .promo-grid__text > a + a {
  margin-left: 10px;
}

/* ========================================
   GVWS HEADER SEARCH
======================================== */

.site-header input[type="search"],
.header-wrapper input[type="search"],
.header-search input,
.search-bar input,
.search-bar__input,
.predictive-search__input,
input[type="search"] {
  background: #f7f7f7 !important;
  border: 1px solid #d8d8d8 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 52px 0 18px !important;
  font-size: 18px !important;
  letter-spacing: 0.06em !important;
  color: #111 !important;
}

/* ========================================
   GVWS CART DRAWER
======================================== */

.cart-drawer .element-quantity-selector,
.cart__drawer-form .element-quantity-selector {
  width: 120px !important;
  display: inline-block !important;
  position: relative !important;
}

.cart-drawer .element-quantity-selector__input,
.cart__drawer-form .element-quantity-selector__input {
  width: 120px !important;
  min-width: 120px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding-left: 42px !important;
  padding-right: 42px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.cart-drawer .element-quantity-selector__button,
.cart__drawer-form .element-quantity-selector__button {
  width: 38px !important;
  height: 42px !important;
  min-width: 38px !important;
}

/* ========================================
   GVWS FOOTER PROMOTIONS SPACING
   Portable footer-group scope. Replaces a stale hardcoded GVWS section id
   (#shopify-section-sections--21833100558535__...) that never matched other
   stores, so the footer kept its full ~120px top gap (index-section 60 +
   section--divider 60). Tightens the footer top spacing site-wide to ~28px.
======================================== */

.shopify-section-group-footer-group .index-section {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.shopify-section-group-footer-group .section--divider {
  padding-top: 28px !important;
  margin-top: 0 !important;
}

/* GVWS GLOBAL BUTTON SYSTEM — moved to the parent theme (assets/css/buttons.css, DECISIONS 080): one system, tokens per brand in the child style.css. */

/* ========================================
   GVWS CART DRAWER BUTTON SPACING
======================================== */

.cart-drawer .cart__checkout-wrapper.payment-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
/* ========================================
   GVWS CART DRAWER FOOTER SPACER
======================================== */

.cart-drawer .gvws-cart-drawer-footer-spacer {
  min-height: 16px !important;
  margin-top: 8px !important;
}
/* ========================================
   GVWS CART PAGE BUTTONS
======================================== */

.cart__checkout-wrapper .cart__checkout.element-button {
  width: 100% !important;
  min-height: 46px !important;
  padding: 12px 22px !important;
  font-weight: 700 !important;

  --element-button-font-weight: 700 !important;
  --element-text-font-weight: 700 !important;
}
/* colors, border, radius, hover: the one button system (080, buttons.css) */


.cart__checkout-wrapper .cart__continue.element-button {
  width: 100% !important;
  min-height: 46px !important;
  padding: 12px 22px !important;
  font-weight: 700 !important;

  --element-button-font-weight: 700 !important;
  --element-text-font-weight: 700 !important;
}
/* colors, border, radius, hover: the one button system (080, buttons.css) */

/* ========================================
   GVWS CART PAGE QUANTITY SELECTOR
======================================== */

.cart__page .cart__item-quantity .element-quantity-selector {
  width: 120px !important;
  display: inline-block !important;
  position: relative !important;
}

.cart__page .cart__item-quantity .element-quantity-selector__input {
  width: 120px !important;
  min-width: 120px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding-left: 42px !important;
  padding-right: 42px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.cart__page .cart__item-quantity .element-quantity-selector__button {
  width: 38px !important;
  height: 42px !important;
  min-width: 38px !important;
}

/* ========================================
   GVWS CART PROCESS CARD
======================================== */

.gvws-cart-trust {
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.10) !important;
  text-align: left !important;
}

.gvws-cart-trust__title {
  margin-bottom: 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  color: var(--root-color-primary, #111111) !important;
}

.gvws-cart-trust__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 7px !important;
  margin-bottom: 6px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: var(--root-color-primary, #111111) !important;
}

.gvws-cart-trust__item:last-child {
  margin-bottom: 0 !important;
}

.gvws-cart-trust__check {
  flex: 0 0 auto !important;
  color: var(--color-button-primary, #ff8b00) !important;
  font-weight: 700 !important;
}
/* ========================================
   GVWS ARTICLE CARD SYSTEM (FINAL)
======================================== */

.gvws-article-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  overflow: hidden;
  background: var(--root-color-secondary, #ffffff);
  color: var(--root-color-primary, #111111);
  text-decoration: none !important;
  transition: all .2s ease;
}

.gvws-article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.07);
}

.gvws-article-card__image {
  display: block;
  width: 100%;
  height: 180px;
  background: #f1f1f1;
  overflow: hidden;
}

.gvws-article-card__image--placeholder {
  background:
    linear-gradient(135deg, rgba(255,139,0,.18), rgba(0,0,0,.05)),
    #f1f1f1;
}

.gvws-article-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}

.gvws-article-card:hover .gvws-article-card__image img {
  transform: scale(1.04);
}

.gvws-article-card__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  flex: 1 1 auto;
}

/* Badge (system taxonomy) */
.gvws-article-card__label {
  display: inline-flex;
  width: fit-content;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(0,0,0,.55);
}

/* Title */
.gvws-article-card__title {
  display: block;
  font-weight: 800;
  line-height: 1.2;
  font-size: 16px;
}

/* Excerpt */
.gvws-article-card__excerpt {
  display: block;
  color: rgba(0,0,0,.65);
  font-size: 14px;
  line-height: 1.45;
}

/* Footer (clean hierarchy) */
.gvws-article-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.06);
  font-size: 13px;
  font-weight: 700;
  color: rgba(0,0,0,.6);
}

/* LEFT META (taxonomy + time) */
.gvws-article-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(0,0,0,.6);
  font-weight: 600;
}

.gvws-meta-category,
.gvws-meta-time {
  color: rgba(0,0,0,.6);
}

.gvws-meta-divider {
  color: rgba(0,0,0,.15);
}

/* RIGHT CTA (KEEP ORANGE) */
.gvws-article-card__cta {
  color: var(--color-button-primary, #ff8b00);
  font-weight: 700;
  text-decoration: none;
}

.gvws-article-card__footer * {
  color: inherit;
}

/* ===== GVWS Article Return Link ===== */

.gvws-article-return {
  display: flex;
  justify-content: center;
  margin: 40px 0 48px;
}

.gvws-pillar-page__return {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--colorTextBody);
  font-weight: 700;
  text-decoration: none;
  transition: color .2s ease;
}

.gvws-pillar-page__return svg {
  width: 18px;
  height: 18px;
}

.gvws-pillar-page__return:hover {
  color: var(--colorButton);
  text-decoration: none;
}
/* ========================================
   GVWS ACCOUNT PAGES
   (Future Section)
======================================== */

/* ========================================
   GVWS ARTICLE TEMPLATE V5 OVERRIDES
======================================== */


/* Remove any older orange alert bar behavior around the Quick Brief. */
.gvws-article-reading-pane .gvws-doc-card--brief,
.gvws-article-reading-pane .gvws-quick-brief,
.gvws-article-reading-pane .gvws-article-quick-brief,
.gvws-article-reading-pane .gvws-article-quick-brief-card,
.gvws-article-reading-pane .gvws-article-brief,
.gvws-article-reading-pane .gvws-quick-brief-card {
  border-top: 1px solid rgba(0,0,0,0.08) !important;
}

.gvws-article-reading-pane .gvws-quick-brief__body {
  grid-template-columns: minmax(0, 1fr) !important;
}

.gvws-article-reading-pane .gvws-quick-brief__panel {
  border-left: 4px solid var(--color-button-primary, #ff8b00) !important;
  background: #f6f6f6 !important;
}

.gvws-article-aside-products {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.gvws-article-aside-product {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  background: #f7f7f7;
  color: #111;
  text-decoration: none !important;
}

.gvws-article-aside-product:hover {
  border-color: rgba(0,0,0,0.20);
  background: #fff;
}

.gvws-article-aside-product__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.gvws-article-aside-product__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gvws-article-aside-product__body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.gvws-article-aside-product__title {
  color: #111;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
}

.gvws-article-aside-product__cta {
  color: var(--color-button-primary, #ff8b00);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

/* Judge.me star rating on aside product tiles — rendered from reviews.rating,
   overlay-clipped for exact fractional fill, no widget JS dependency.
   Shown only when the product has at least one review. */
.gvws-article-aside-product__rating {
  display: flex;
  align-items: center;
  gap: 5px;
}

.gvws-aside-stars {
  position: relative;
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 1px;
}

.gvws-aside-stars__track {
  color: rgba(0,0,0,0.18);
}

.gvws-aside-stars__fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #ffb400;
}

.gvws-aside-stars__count {
  font-size: 11px;
  font-weight: 700;
  color: #666;
}

/* ========================================
   GVWS GLOBAL PAGE RHYTHM
   Standardizes OM Breadcrumbs + first GVWS section spacing
======================================== */

/* Templates using the Expanse blog-layout wrapper should not add extra top padding. */
.page-content.blog-layout {
  padding-top: 0 !important;
}

/* Keep OM Breadcrumbs from adding hidden extra rhythm below the breadcrumb row. */
.page-content.blog-layout .shopify-section:has(.ed_breadcrumbs-section),
.page-content.blog-layout .shopify-section:has([class*="breadcrumb"]),
.page-content.blog-layout .ed_breadcrumbs-section.page-width {
  margin-bottom: 0 !important;
}

/* Normalize spacing for the first custom GVWS page module after breadcrumbs. */
.page-content.blog-layout .shopify-section:has(.gvws-layout-page),
.page-content.blog-layout .shopify-section:has(.gvws-article-document),
.page-content.blog-layout .shopify-section:has(.gvws-resource-center-page),
.page-content.blog-layout .shopify-section:has(.gvws-pillar-page) {
  margin-top: 0 !important;
}

/* New standard root class for all GVWS custom page sections. */
.gvws-layout-page {
  width: 100%;
  margin-top: -10px !important;
}

/* Backward-compatible support for current custom templates not yet renamed. */
.gvws-pillar-page.gvws-article-document,
.gvws-resource-center-page,
.page-content.blog-layout .gvws-pillar-page {
  margin-top: -10px !important;
}

/* Do not let hero/card internals add a second top offset. */
.gvws-layout-page .gvws-resource-center__hero-card,
.gvws-layout-page .gvws-author-profile,
.gvws-layout-page .gvws-brand-profile,
.gvws-article-document .gvws-resource-center__hero-card,
.gvws-resource-center-page .gvws-resource-center__hero-card,
.gvws-pillar-page .gvws-resource-center__hero-card {
  margin-top: 0 !important;
}

@media only screen and (max-width: 768px) {
  .gvws-layout-page,
  .gvws-pillar-page.gvws-article-document,
  .gvws-resource-center-page,
  .page-content.blog-layout .gvws-pillar-page {
    margin-top: 0 !important;
  }
}

/* ========================================
   COLLECTION: trailing space below product grid
   Expanse leaves ~120px under the grid (grid margin-bottom 60 + section
   padding-bottom 60) — fine when the grid was last-before-footer, excessive
   now that the trust-signals section follows it. Trim it so trust sits close.
======================================== */
body.template-collection .collection-grid.product-grid {
  margin-bottom: 12px !important;
}
body.template-collection .shopify-section:has(.collection-grid) .color-scheme-none {
  padding-bottom: 16px !important;
}

/* ========================================
   MEGA-MENU FLYOUT: inner-tier size mismatch
   Top nav bar now renders a uniform 15px (type_navigation_font_size: sm,
   header-group.json). The megamenu column-title link
   (.site-nav__dropdown-link--top-level, snippets/header.desktop-nav.liquid)
   is still won by the higher-specificity `.megamenu__col-title a` rule in
   the same file (body-md + 1px = 19px), which no longer matches the rest
   of the flyout: every other link in the same megamenu column (plain
   .site-nav__dropdown-link items, and the
   .site-nav__dropdown-link--second-level tier used in the non-mega
   dropdowns) already renders at 17px (body-md - 1px). Bring the
   column-title tier down to that same formula so the whole flyout reads
   as one consistent size instead of a third value. Two classes on the
   override beat the single-class + type selector it competes with, no
   !important needed. Do NOT touch the 15px top-level nav (.site-nav__link).
======================================== */
.site-nav__dropdown-link.site-nav__dropdown-link--top-level {
  font-size: calc(var(--element-text-font-size--body-md) - 1px);
}