/* ========================================
   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, #22b3f5) !important;
  box-shadow: 0 0 0 2px rgba(34, 179, 245, 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, #22b3f5);
  border: 2px solid var(--color-button-primary, #22b3f5);
  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, #22b3f5) !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(34,179,245,.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, #22b3f5);
  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, #22b3f5) !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, #22b3f5);
  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;
}

/* Larger heading scale to match Exxus (both DTC sites on the larger option) — 2026-07-09.
   !important so the vars win over the theme's inline type definitions (load-order-proof). */
:root {
  --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;

  /* Type-parity with Sutra's own 5.2.3 theme — added 2026-07-28. The 9.1.0 migration ported the
     heading SIZES above but not the line-heights or the small-text size, so those fell back to
     9.1.0 defaults (body-md 1.2, headings 1.2, body-sm 16px). Sutra's 5.2.3 theme
     (#141546291432) settings say otherwise:
         type_base_line_height   1.5   type_base_size        18
         type_header_line_height 1.1   type_header_base_size 50
         type_navigation_size    15
     These restore that. GotVape/Wulf/Exxus already carry the same values from their own 5.2.3
     themes; Sutra was the one store missed, which is why its cart checkout button rendered
     49.6px against 55px everywhere else (button height = inner body-md line-height + padding).
     !important for the same load-order reason as the sizes above. */
  --element-text-font-size--body-md: 18px !important;
  --element-text-font-size--body-sm: 15px !important;

  --element-text-line-height--body-md: 1.5 !important;
  --element-text-line-height--heading-2xl: 1.1 !important;
  --element-text-line-height--heading-xl: 1.1 !important;
  --element-text-line-height--heading-lg: 1.1 !important;
  --element-text-line-height--heading-md: 1.1 !important;
  --element-text-line-height--heading-sm: 1.1 !important;
  --element-text-line-height--heading-xs: 1.1 !important;
  --element-text-line-height--heading-2xs: 1.1 !important;
}
@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;
  }
}

/* Match Exxus body-text strength — added 2026-07-09. Sutra's body font-weight var resolves to 300
   (Century Gothic n4), Exxus's to 400 (Harmonia Sans n4). Force 400 so sales points, pickup, and
   all body copy read at the same weight as Exxus. Scoped to body text (headings/accent use their
   own vars). !important to win the theme's inline settings CSS. */
:root { --element-text-font-weight--body: 400 !important; }