/** Shopify CDN: Minification failed

Line 1349:0 Expected "}" to go with "{"

**/
/* ============================================================
   STOLAN ACRES — THEME-WIDE CUSTOM CSS
   Updated: March 6, 2026
   Design System: Black #000 base, Olive #5B6B35 accent,
   Bebas Neue display, Inter body, cinematic dark theme
   ============================================================ */

/* ============================================================
   0. FONT IMPORTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   1. GLOBAL RESETS & BASE
   ============================================================ */
:root {
  --color-base: #000000;
  --color-surface: #0a0a0a;
  --color-surface-alt: #111111;
  --color-border: #222222;
  --color-border-light: #333333;
  --color-text: #fafafa;
  --color-text-muted: #999999;
  --color-text-dim: #666666;
  --color-accent: #5B6B35;
  --color-accent-hover: #6d7f42;
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;


/* Force dark background everywhere */
body,
html {
  background-color: var(--color-base) !important;
  color: var(--color-text) !important;
}

/* Kill any white/light section backgrounds */
.section--padding,
.shopify-section,
.shopify-section-group-header-group,
.shopify-section-group-footer-group,
main,
#MainContent,
.page-width {
  background-color: transparent !important;
}

/* ============================================================
   2. TYPOGRAPHY
   ============================================================ */
/* Display / Heading font — Bebas Neue */
h1, h2, h3,
.h1, .h2, .h3,
.heading,
.title-lg, .title-xl, .title-2xl,
.banner__title,
.collection-hero__title,
.section__title,
.cart__title,
.article__title {
  font-family: var(--font-display) !important;
  letter-spacing: 0.04em !important;
  color: var(--color-text) !important;
}

/* Body font — Inter */
body,
p, li, a, span, div,
.rte, .rte p,
input, select, textarea, button,
.product-card__info,
.btn-text {
  font-family: var(--font-body) !important;
}

/* Ensure all text is light on dark */
p, li, span, div, label, td, th, dt, dd,
.rte, .rte p, .rte li {
  color: var(--color-text) !important;
}

a {
  color: var(--color-text) !important;
}

a:hover {
  color: var(--color-accent) !important;
}

/* Muted text */
.text-muted,
.product-card__vendor,
time,
.meta,
.caption {
  color: var(--color-text-muted) !important;
}

/* ============================================================
   3. HEADER / NAV
   ============================================================ */
.header,
.shopify-section-group-header-group,
.shopify-section-group-header-group .section--padding {
  background-color: var(--color-base) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* Nav links */
.header__menu .menu__item,
.header__menu a {
  font-family: var(--font-display) !important;
  letter-spacing: 0.12em !important;
  font-size: 0.85rem !important;
  color: var(--color-text) !important;
  text-transform: uppercase !important;
  transition: color 0.3s ease !important;
}

.header__menu .menu__item:hover,
.header__menu a:hover {
  color: var(--color-accent) !important;
}

/* Header icons */
.header__icons a,
.header__icons button,
.header__icons svg {
  color: var(--color-text) !important;
}

.header__icons a:hover,
.header__icons button:hover {
  color: var(--color-accent) !important;
}

/* Logo */
.header__logo-link {
  opacity: 1 !important;
}

/* Announcement bar */
.announcement-bar {
  background-color: var(--color-accent) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0.05em !important;
}

/* Mobile menu drawer */
.menu-drawer,
.menu-drawer__inner,
menu-drawer {
  background-color: var(--color-surface) !important;
}

.menu-drawer a,
.menu-drawer__menu a,
.menu-drawer .menu-drawer__menu-item {
  color: var(--color-text) !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.08em !important;
}

/* ============================================================
   4. FOOTER
   ============================================================ */
.footer,
.footer-group,
.shopify-section-group-footer-group {
  background-color: var(--color-base) !important;
  color: var(--color-text) !important;
  border-top: 1px solid var(--color-border) !important;
}

/* Hide the "Customer Service / Fast Free Shipping / Refer a Friend / Secure Payment" banner */
carousel-element.text-with-icons,
.text-with-icons {
  display: none !important;
}

/* Footer headings */
.footer .heading,
.footer .details__summary span,
.footer h3, .footer h4,
.footer .font-heading {
  font-family: var(--font-display) !important;
  color: var(--color-text) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Footer links */
.footer a,
.footer .reversed-link {
  color: var(--color-text-muted) !important;
  transition: color 0.3s ease !important;
}

.footer a:hover,
.footer .reversed-link:hover {
  color: var(--color-accent) !important;
}

/* Footer newsletter input */
.footer .newsletter-form input,
.footer .field input {
  background-color: var(--color-surface-alt) !important;
  border-color: var(--color-border-light) !important;
  color: var(--color-text) !important;
}

.footer .newsletter-form label,
.footer .field label {
  color: var(--color-text-muted) !important;
}

/* Footer newsletter button */
.footer .self-submit-button .button,
.footer .newsletter-form .button {
  background-color: var(--color-accent) !important;
  color: var(--color-text) !important;
  border-color: var(--color-accent) !important;
}

/* Footer social icons */
.footer__socials a,
.footer .social_platform {
  color: var(--color-text-muted) !important;
}

.footer__socials a:hover,
.footer .social_platform:hover {
  color: var(--color-accent) !important;
}

/* Footer dividers */
.footer .section--divider::before,
.footer .section--divider::after {
  border-color: var(--color-border) !important;
}

/* Footer bottom / copyright */
.footer__copyright,
.footer__bottom {
  color: var(--color-text-dim) !important;
  border-top-color: var(--color-border) !important;
}

/* Payment icons area */
.footer .payment-icons {
  opacity: 0.7;
}

/* "Follow on Shop" button — make it match brand */
.shopify-button,
.shopify-button--primary,
[class*="shopify-buy"],
.footer .shopify-button {
  background-color: var(--color-accent) !important;
  color: var(--color-text) !important;
  border-radius: 4px !important;
}

/* ============================================================
   5. COLLECTION PAGES
   ============================================================ */
/* Collection banner — remove excess padding (the "fold") */
.collection-banner-section .banner {
  min-height: auto !important;
  padding-top: 2rem !important;
  padding-bottom: 1rem !important;
}

.collection-banner-section .banner__content {
  min-height: auto !important;
}

.collection-banner-section .section--padding {
  padding-top: 1.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* Collection title */
.banner__title,
.collection-hero__title {
  font-family: var(--font-display) !important;
  color: var(--color-text) !important;
  letter-spacing: 0.04em !important;
}

/* Remove spacing element that creates the fold */
.collection-banner-section .spacing-section {
  display: none !important;
}

/* Collection section — product grid area */
.collection-section {
  background-color: var(--color-base) !important;
}

.collection-section .section--rounded {
  border-radius: 0 !important;
}

/* Filter / Sort controls */
.facet-sticky button,
.facet-sticky .button {
  background-color: transparent !important;
  border-color: var(--color-accent) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
}

/* Sort dropdown */
.facet-bar select,
.facet-bar .select__select,
select.select__select {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border-light) !important;
  color: var(--color-text) !important;
}

/* Filter drawer */
.facet-drawer .drawer__inner {
  background-color: var(--color-surface) !important;
}

/* ============================================================
   6. PRODUCT CARDS
   ============================================================ */
.product-card,
.card {
  background-color: transparent !important;
  border-color: var(--color-border) !important;
}

.product-card .product-card__info,
.product-card__title,
.product-card__title a {
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
}

.product-card .product-card__vendor {
  color: rgba(250, 250, 250, 0.4) !important;
}

.product-card .product-card__price .price-item,
.product-card .price {
  color: var(--color-text) !important;
}

.product-card .product-card__price .price-item--sale,
.product-card .price--on-sale {
  color: var(--color-accent) !important;
}

/* Sale badge */
.badge,
.badges .badge,
.badge--sale {
  background-color: var(--color-accent) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  border-radius: 2px !important;
}

/* Quick view button */
.quick-view__button {
  background-color: rgba(0, 0, 0, 0.7) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border-light) !important;
}

/* ============================================================
   7. PRODUCT PAGES
   ============================================================ */
.product-section,
.product__info-wrapper,
.product__media-gallery,
.product__media-wrapper {
  background-color: var(--color-base) !important;
}

.product__media-wrapper {
  background-color: transparent !important;
}

/* Product title */
.product__title,
.product__title h1 {
  font-family: var(--font-display) !important;
  color: var(--color-text) !important;
  letter-spacing: 0.04em !important;
}

/* Product vendor */
.product__vendor {
  color: var(--color-text-muted) !important;
}

/* Product price */
.product__price,
.price-item,
.price-item--regular {
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
}

.price-item--sale {
  color: var(--color-accent) !important;
}

/* Product description */
.product__description,
.product__description p,
.product__description li {
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  line-height: 1.7 !important;
}

/* Variant selectors */
.product-form__input select,
.product-form select,
variant-selects select {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border-light) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
}

/* Swatch buttons */
.product-form__input .swatch-input label,
.product-form .variant-input label {
  border-color: var(--color-border-light) !important;
}

.product-form__input .swatch-input input:checked + label,
.product-form .variant-input input:checked + label {
  border-color: var(--color-accent) !important;
}

/* Quantity selector */
.quantity,
.quantity__input,
quantity-input {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border-light) !important;
  color: var(--color-text) !important;
}

.quantity__button {
  color: var(--color-text) !important;
}

/* Add to cart button */
.product-form__submit,
.product-form .button--primary,
button[name="add"] {
  background-color: var(--color-accent) !important;
  color: var(--color-text) !important;
  border-color: var(--color-accent) !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.1em !important;
  font-size: 1rem !important;
  transition: background-color 0.3s ease !important;
}

.product-form__submit:hover,
.product-form .button--primary:hover,
button[name="add"]:hover {
  background-color: var(--color-accent-hover) !important;
}

/* Buy with Shop Pay — keep brand purple but darken surroundings */
.shopify-payment-button .shopify-payment-button__button {
  border-radius: 4px !important;
}

/* "More payment options" link */
.shopify-payment-button__button--unbranded,
.payment-terms a {
  color: var(--color-text-muted) !important;
}

/* Share buttons */
.product__share,
.share-button {
  color: var(--color-text-muted) !important;
}

/* Product form text inputs */
.product-form input[type="text"],
.product-form input[type="email"],
.product-form input[type="number"],
.product-form textarea,
.product-form .field input {
  background-color: var(--color-surface-alt) !important;
  border-color: var(--color-border-light) !important;
  color: var(--color-text) !important;
}

/* File upload button */
.product-form input[type="file"] {
  color: var(--color-text) !important;
}

/* Product tabs / accordions */
.product__accordion .accordion__title,
.product__accordion summary {
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* ============================================================
   8. CART PAGE
   ============================================================ */
.cart,
.cart-items,
.cart__items,
.template-cart main {
  background-color: var(--color-base) !important;
}

.cart__title {
  font-family: var(--font-display) !important;
  color: var(--color-text) !important;
}

/* Cart item info */
.cart-item__name,
.cart-item__details,
.cart-item__price {
  color: var(--color-text) !important;
}

/* Cart summary */
.cart__summary,
.totals,
.totals__subtotal,
.totals__subtotal-value {
  color: var(--color-text) !important;
}

/* Cart note textarea */
.cart__note textarea,
.cart textarea {
  background-color: var(--color-surface-alt) !important;
  border-color: var(--color-border-light) !important;
  color: var(--color-text) !important;
}

/* Checkout button */
.cart__checkout-button,
.cart .button--primary,
button[name="checkout"] {
  background-color: var(--color-accent) !important;
  color: var(--color-text) !important;
  border-color: var(--color-accent) !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.1em !important;
}

/* Continue shopping link */
.cart .button--secondary,
.cart .reversed-link {
  color: var(--color-text) !important;
  border-color: var(--color-border-light) !important;
}

/* Free shipping progress bar */
.cart .progress-bar,
.free-shipping-bar {
  background-color: var(--color-surface-alt) !important;
}

.cart .progress-bar__fill,
.free-shipping-bar__progress {
  background-color: var(--color-accent) !important;
}

/* Estimate shipping / Discount accordions */
.cart details summary,
.cart .accordion__title {
  color: var(--color-text) !important;
  border-color: var(--color-border-light) !important;
}

/* ============================================================
   9. DRAWERS (Cart, Search, Mobile Menu)
   ============================================================ */
.drawer,
.drawer__inner,
drawer-element .drawer__inner {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
}

.drawer__close,
.drawer__close svg {
  color: var(--color-text) !important;
}

/* Cart drawer */
.cart-drawer,
.cart-drawer__inner {
  background-color: var(--color-surface) !important;
}

/* Search drawer */
.search-drawer,
.search-modal,
.search-modal__content {
  background-color: var(--color-surface) !important;
}

.search-modal input[type="search"],
.search-drawer input[type="search"],
.predictive-search input {
  background-color: var(--color-surface-alt) !important;
  border-color: var(--color-border-light) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
}

/* Search results */
.predictive-search__results,
.predictive-search-result {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
}

/* ============================================================
   10. FORMS & INPUTS (GLOBAL)
   ============================================================ */
input, select, textarea,
.input, .select, .field input, .field select, .field textarea {
  background-color: var(--color-surface-alt) !important;
  border-color: var(--color-border-light) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-dim) !important;
}

label, .label, .field label {
  color: var(--color-text-muted) !important;
}

/* Focus states */
input:focus, select:focus, textarea:focus,
.field input:focus {
  border-color: var(--color-accent) !important;
  outline-color: var(--color-accent) !important;
  box-shadow: 0 0 0 1px var(--color-accent) !important;
}

/* Floating label on focus */
.is-floating:focus ~ label,
.is-floating:not(:placeholder-shown) ~ label {
  color: var(--color-accent) !important;
}

/* ============================================================
   11. BUTTONS (GLOBAL)
   ============================================================ */
/* Primary buttons */
.button--primary,
.btn--primary {
  background-color: var(--color-accent) !important;
  color: var(--color-text) !important;
  border-color: var(--color-accent) !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.08em !important;
  transition: background-color 0.3s ease, transform 0.2s ease !important;
}

.button--primary:hover,
.btn--primary:hover {
  background-color: var(--color-accent-hover) !important;
  transform: translateY(-1px) !important;
}

/* Secondary / outline buttons */
.button--secondary,
.btn--secondary {
  background-color: transparent !important;
  color: var(--color-text) !important;
  border-color: var(--color-border-light) !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.08em !important;
}

.button--secondary:hover,
.btn--secondary:hover {
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}

/* Button fill animation (theme uses .btn-fill for hover) */
.btn-fill {
  background-color: var(--color-accent) !important;
}

/* ============================================================
   12. BLOG / ARTICLE PAGES
   ============================================================ */
.template-blog main,
.template-article main,
.blog-section,
.article-section {
  background-color: var(--color-base) !important;
}

.article__title {
  font-family: var(--font-display) !important;
  color: var(--color-text) !important;
}

.article__content,
.article__content p,
.article__content li,
.blog-card__title,
.blog-card__excerpt {
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
}

.article__date,
.article__author,
.blog-card__date {
  color: var(--color-text-muted) !important;
}

/* Blog card hover */
.blog-card:hover .blog-card__title {
  color: var(--color-accent) !important;
}

/* ============================================================
   13. SEARCH PAGE
   ============================================================ */
.template-search main {
  background-color: var(--color-base) !important;
}

.template-search .search__title,
.template-search h1 {
  font-family: var(--font-display) !important;
  color: var(--color-text) !important;
}

/* ============================================================
   14. 404 PAGE
   ============================================================ */
.template-404 main {
  background-color: var(--color-base) !important;
}

.template-404 h1 {
  font-family: var(--font-display) !important;
  color: var(--color-text) !important;
}

/* ============================================================
   15. PAGES (Generic)
   ============================================================ */
/* Landing page overrides — full width for custom HTML pages */
body.template-page .page-width {
  max-width: 100% !important;
}

.template-page main {
  background-color: var(--color-base) !important;
}

/* Policy pages */
.template-policy main,
.policy-page {
  background-color: var(--color-base) !important;
}

.policy-page h1, .policy-page h2 {
  font-family: var(--font-display) !important;
}

/* ============================================================
   16. JUDGE.ME REVIEWS — DARK THEME
   ============================================================ */
.jdgm-revs-tab-btn { display: none !important; }
[class*="jdgm-popup-widget"] { display: none !important; }

.jdgm-rev-widg, .jdgm-rev-widg__header, .jdgm-rev-widg__body,
.jdgm-rev-widg__summary-text, .jdgm-rev-widg__no-rev-text {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
}

.jdgm-rev-widg__title {
  color: var(--color-text) !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.06em !important;
}

.jdgm-rev-widg__summary-average,
.jdgm-rev-widg__summary-text {
  color: #ccc !important;
}

.jdgm-write-rev-link,
.jdgm-rev-widg__write-review-btn,
a.jdgm-write-rev-link {
  background-color: var(--color-accent) !important;
  color: var(--color-text) !important;
  border-color: var(--color-accent) !important;
}

.jdgm-rev-widg__separator,
.jdgm-rev-widg__divider {
  border-color: var(--color-border-light) !important;
}

.jdgm-rev {
  background-color: var(--color-surface-alt) !important;
  border-color: var(--color-border-light) !important;
  color: var(--color-text) !important;
}

.jdgm-rev__author, .jdgm-rev__timestamp {
  color: var(--color-text-muted) !important;
}

.jdgm-rev__body {
  color: #ddd !important;
}

.jdgm-form-wrapper, .jdgm-form {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
}

.jdgm-form input, .jdgm-form textarea {
  background-color: #1a1a1a !important;
  color: var(--color-text) !important;
  border-color: #444 !important;
}

.jdgm-widget.jdgm-widget {
  background-color: transparent !important;
}

/* ============================================================
   17. THIRD-PARTY OVERRIDES
   ============================================================ */
/* Progress bar wrapper (e.g. free shipping progress) */
#PBarNextFrameWrapper { display: none !important; }

/* Overlay */
.overlay {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Popup / modal */
.popup,
.popup__content,
.modal,
.modal__content {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
}

/* ============================================================
   18. SCROLL & ANIMATION POLISH
   ============================================================ */
/* Smooth scrolling */
html {
  scroll-behavior: smooth !important;
}

/* Selection color */
::selection {
  background-color: var(--color-accent) !important;
  color: var(--color-text) !important;
}

/* Scrollbar — subtle dark */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-base);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

/* ============================================================
   19. RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 749px) {
  /* Tighter collection banner on mobile */
  .collection-banner-section .banner {
    padding-top: 1rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* Ensure mobile nav drawer is dark */
  .menu-drawer,
  .menu-drawer__inner {
    background-color: var(--color-surface) !important;
  }

  /* Mobile search */
  .search-modal__content {
    background-color: var(--color-surface) !important;
  }
}

/* ============================================================
   20. MISC UTILITY OVERRIDES
   ============================================================ */
/* Remove any rounded section tops that show white */
.section--rounded {
  border-radius: 0 !important;
}

/* Breadcrumbs */
.breadcrumbs,
.breadcrumbs a,
.breadcrumb {
  color: var(--color-text-muted) !important;
}

.breadcrumbs a:hover {
  color: var(--color-accent) !important;
}

/* Pagination */
.pagination a,
.pagination span {
  color: var(--color-text) !important;
}

.pagination .current,
.pagination .active {
  background-color: var(--color-accent) !important;
  color: var(--color-text) !important;
}

/* Empty cart state */
.cart--empty h1,
.cart--empty p {
  color: var(--color-text) !important;
}

/* "We accept" payment section */
.payment-icons {
  opacity: 0.6 !important;
}

/* Skip to content link */
.skip-to-content-link {
  background-color: var(--color-accent) !important;
  color: var(--color-text) !important;
}


/* ============================================================
   21. HOMEPAGE CINEMATIC OVERRIDES
   Hide theme header/footer on homepage - cinematic content
   provides its own nav and footer. Match standalone preview.
   ============================================================ */

/* --- Hide Shopify theme header on homepage --- */
body.template-index #header,
body.template-index .header-wrapper,
body.template-index #shopify-section-header,
body.template-index header.header,
body.template-index .header__wrapper,
body.template-index sticky-header,
body.template-index .shopify-section-group-header-group,
body.template-index .announcement-bar-section,
body.template-index #shopify-section-announcement-bar {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* --- Hide Shopify theme footer on homepage --- */
body.template-index #shopify-section-footer,
body.template-index footer.footer,
body.template-index .footer-wrapper,
body.template-index .shopify-section-group-footer-group,
body.template-index #shopify-section-footer-copyright,
body.template-index .footer__content-top,
body.template-index .footer__content-bottom {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* --- Hide multicolumn icons section on homepage --- */
body.template-index .multicolumn,
body.template-index [class*="multicolumn"] {
  display: none !important;
}

/* --- Remove header spacing on homepage --- */
body.template-index .content-for-layout,
body.template-index #MainContent,
body.template-index main#MainContent {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ============================================================
   22. ENHANCED MOBILE RESPONSIVENESS
   Full mobile optimization for all cinematic content
   ============================================================ */

@media (max-width: 768px) {
  /* Homepage: ensure all theme chrome gone */
  body.template-index .shopify-section-group-header-group,
  body.template-index .shopify-section-group-footer-group,
  body.template-index .multicolumn {
    display: none !important;
    height: 0 !important;
  }

  /* Cinematic sections full-bleed mobile */
  body.template-index .sa-section,
  body.template-index [class*="sa-0"],
  body.template-index [id*="sa-0"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow-x: hidden !important;
  }

  /* Hero text scaling */
  body.template-index h1 {
    font-size: clamp(1.8rem, 7vw, 3.5rem) !important;
    line-height: 1.1 !important;
    word-break: break-word !important;
  }

  body.template-index h2 {
    font-size: clamp(1.4rem, 5vw, 2.5rem) !important;
    line-height: 1.2 !important;
  }

  body.template-index h3 {
    font-size: clamp(1.1rem, 4vw, 1.8rem) !important;
  }

  /* Grid layouts stack on mobile */
  body.template-index [style*="grid-template-columns: 1fr 1fr"],
  body.template-index [style*="grid-template-columns:1fr 1fr"],
  body.template-index [style*="grid-template-columns: repeat"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Flex row to column on mobile */
  body.template-index [style*="display: flex"][style*="gap"],
  body.template-index [style*="display:flex"][style*="gap"] {
    flex-direction: column !important;
  }

  /* Images responsive */
  body.template-index img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Buttons full width on mobile */
  body.template-index .cta-btn,
  body.template-index a[href][style*="background"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Footer columns stack */
  body.template-index .sa-footer [style*="grid"],
  body.template-index [class*="footer"] [style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Offer cards responsive */
  body.template-index [style*="grid-template-columns: repeat(5"] {
    grid-template-columns: 1fr !important;
  }

  /* Prevent horizontal overflow */
  body.template-index,
  body.template-index .page-width {
    overflow-x: hidden !important;
  }
}

@media (max-width: 480px) {
  body.template-index h1 {
    font-size: clamp(1.5rem, 9vw, 2.5rem) !important;
  }

  body.template-index [class*="sa-"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ============================================================
   23. LANDING PAGE SAFETY NET
   If landing pages somehow load with theme layout
   ============================================================ */

body[class*="template-page-landing"] #header,
body[class*="template-page-landing"] .header-wrapper,
body[class*="template-page-landing"] .shopify-section-group-header-group,
body[class*="template-page-landing"] .shopify-section-group-footer-group,
body[class*="template-page-landing"] .footer,
body[class*="template-page-landing"] .multicolumn {
  display: none !important;
}


/* ============================================================
   24. CINEMATIC CONTENT PROTECTION SHIELD
   Prevents global custom.css rules (sections 0-20) from
   bleeding into homepage cinematic HTML content.
   The cinematic HTML has its own <style> block with all the
   correct typography, colors, and spacing. These rules
   ensure those embedded styles win over global !important.
   ============================================================ */

/* --- RESET: Remove global font-family overrides on cinematic content --- */
body.template-index h1,
body.template-index h2,
body.template-index h3,
body.template-index h4,
body.template-index h5,
body.template-index h6,
body.template-index .h1,
body.template-index .h2,
body.template-index .h3,
body.template-index .heading,
body.template-index .hero-brand,
body.template-index .philosophy-title,
body.template-index .studio-header,
body.template-index .pillars-title,
body.template-index .quiz-headline,
body.template-index .funnel-title,
body.template-index .cta-title,
body.template-index .section-label,
body.template-index .pillar-name,
body.template-index .profile-name {
  font-family: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
}

/* --- RESET: Remove global body/span/div/p font overrides --- */
body.template-index p,
body.template-index li,
body.template-index a,
body.template-index span,
body.template-index div,
body.template-index label,
body.template-index td,
body.template-index th,
body.template-index dt,
body.template-index dd,
body.template-index button,
body.template-index input,
body.template-index select,
body.template-index textarea {
  font-family: inherit !important;
  color: inherit !important;
}

/* --- HERO: Restore tight letter-spacing on STOLAN ACRES --- */
body.template-index .hero-brand {
  font-family: var(--font-display, 'Bebas Neue', sans-serif) !important;
  font-size: clamp(52px, 14vw, 220px) !important;
  font-weight: 900 !important;
  letter-spacing: clamp(-4px, -0.5vw, -2px) !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  color: #fafafa !important;
}

/* --- OLIVE COLOR: Protect .olive class from global color override --- */
body.template-index .olive,
body.template-index #MainContent .olive,
body.template-index #MainContent h2 .olive {
  color: #5B6B35 !important;
}

/* --- PHILOSOPHY TITLE: Restore proper styling --- */
body.template-index .philosophy-title {
  font-family: var(--font-display, 'Bebas Neue', sans-serif) !important;
  color: #fafafa !important;
  letter-spacing: -0.02em !important;
}

/* --- PILLAR NUMBERS: Restore original smaller/sleeker style --- */
body.template-index .pillar-number {
  font-size: 48px !important;
  font-weight: 900 !important;
  color: rgba(91,107,53,0.12) !important;
  font-family: var(--font-display, 'Bebas Neue', sans-serif) !important;
  margin-bottom: 20px !important;
  line-height: 1 !important;
}

/* --- PILLAR NAMES: Restore style --- */
body.template-index .pillar-name {
  font-family: var(--font-display, 'Bebas Neue', sans-serif) !important;
  color: #fafafa !important;
  letter-spacing: 0.06em !important;
}

/* --- NAV: Protect cinematic nav from theme nav overrides --- */
body.template-index #nav,
body.template-index #nav a,
body.template-index #nav .nav-links a,
body.template-index #nav .nav-logo,
body.template-index #nav .nav-cta {
  font-family: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
}

/* --- SECTION LABELS: Restore --- */
body.template-index .section-label {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  color: rgba(250,250,250,0.4) !important;
  letter-spacing: 0.2em !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
}

/* --- BUTTONS: Protect cinematic buttons --- */
body.template-index .btn-olive,
body.template-index .btn-outline,
body.template-index .cta-btn {
  font-family: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
}

/* --- FOOTER: Protect cinematic footer --- */
body.template-index .sa-footer,
body.template-index .sa-footer a,
body.template-index .sa-footer span,
body.template-index .sa-footer div,
body.template-index .sa-footer p,
body.template-index .sa-footer h4 {
  font-family: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
}

/* --- MARQUEE: Protect marquee text --- */
body.template-index .marquee-wrap,
body.template-index .marquee-wrap span {
  font-family: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
}

/* --- TESTIMONIALS/CARDS: Protect --- */
body.template-index .voice-card,
body.template-index .voice-card p,
body.template-index .voice-card span,
body.template-index .voice-author {
  font-family: inherit !important;
  color: inherit !important;
}

/* --- PRESENCE SECTION: Protect --- */
body.template-index .presence-text,
body.template-index .presence-section p {
  font-family: inherit !important;
  color: inherit !important;
}

/* --- GENERAL: Let cinematic CSS variables work --- */
body.template-index .custom-liquid-section,
body.template-index [id*="cinematic"],
body.template-index section[class*="-section"] {
  --olive: #5B6B35;
  --olive-glow: #6E8040;
}

/* --- HERO SUBTITLE: Protect --- */
body.template-index .hero-subtitle {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  letter-spacing: 0.25em !important;
  color: rgba(250,250,250,0.5) !important;
}

/* --- FAQ SECTION: Protect --- */
body.template-index .faq-question,
body.template-index .faq-answer,
body.template-index .faq-answer p {
  font-family: inherit !important;
  color: inherit !important;
}

/* --- SCROLL INDICATOR: Protect --- */
body.template-index .scroll-text {
  font-family: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
}