/** Shopify CDN: Minification failed

Line 18:19 Unexpected "-"
Line 2373:0 Unexpected "}"

**/
/* ============================================================
/* === MOBILE HAMBURGER MENU FIX (2026-05-12) ===
   Exempts header wrapper from fadeIn animation, overflow-x:hidden,
   and clamp padding that trap/clip the mobile nav dropdown.
   Fixes: hamburger menu only showing Electronics on mobile. */
.shopify-section-group-header-group {
  animation: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

   PINE TECH GROUP - MASTER CUSTOM STYLESHEET
   Store: pinetechgroup.com | Theme: Dawn
   Rebuilt: 2026-05-05 (cleaned from 3620 ? ~2800 lines)

   TABLE OF CONTENTS:
   0. CSS Custom Properties (V3 Design Vars + Brand Tokens)
   1. Global Resets & Base Overrides
   2. Typography
   3. Links
   4. Navigation & Header
   5. Hero / Banner Sections
   6. Product Cards & Grid
   7. Collection Pages
   8. Product Pages (Gallery, Info, Buttons, Variants)
   9. Cart, Search & Utility Pages
   10. Brand-Specific Overrides
       10a. ForMommy Full Color World
       10b. Dawn Color Scheme Overrides (per brand)
   11. Component Overrides (forms, drawers, badges, etc.)
   12. Responsive / Mobile Overrides ? ALL mobile rules HERE
   13. Dawn Theme Compatibility Fixes (visibility, gallery, etc.)
   14. Animations & Transitions
   ============================================================ */

/* === [SECTION 0] CSS CUSTOM PROPERTIES === */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --ink: #0d0c0a;
  --ink-soft: #15140f;
  --ink-card: #1a1812;
  --cream: #ebe5d6;
  --cream-soft: #d8d1bf;
  --cream-mute: #8a8475;
  --gold: #b89968;
  --line: rgba(235, 229, 214, 0.09);
  --line-2: rgba(235, 229, 214, 0.16);
  --display: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Brand Color Variables --- */

.brand-electronics {
  --brand-bg: #080808;
  --brand-bg-soft: #111111;
  --brand-text: #ebe5d6;
  --brand-text-soft: #d8d1bf;
  --brand-text-mute: #8a8475;
  --brand-accent: #b89968;
  --brand-line: rgba(235, 229, 214, .09);
  --brand-line-2: rgba(235, 229, 214, .16);
  --brand-btn-bg: #ebe5d6;
  --brand-btn-text: #080808;
  --brand-btn-hover-bg: transparent;
  --brand-btn-hover-text: #ebe5d6;
  --brand-card-bg: #0f0f0f;
}

.brand-formommy {
  --brand-bg: #F5EDE0;
  --brand-bg-soft: #EDE3D2;
  --brand-text: #2C1810;
  --brand-text-soft: #5C4033;
  --brand-text-mute: #8B7355;
  --brand-accent: #B87333;
  --brand-line: rgba(44, 24, 16, .1);
  --brand-line-2: rgba(44, 24, 16, .18);
  --brand-btn-bg: #2C1810;
  --brand-btn-text: #F5EDE0;
  --brand-btn-hover-bg: transparent;
  --brand-btn-hover-text: #2C1810;
  --brand-card-bg: #EBE0CE;
}

.brand-mushroom {
  --brand-bg: #0B1A13;
  --brand-bg-soft: #13281D;
  --brand-text: #E8E0D4;
  --brand-text-soft: #B8AE9C;
  --brand-text-mute: #6B7C6B;
  --brand-accent: #C4A265;
  --brand-line: rgba(232, 224, 212, .09);
  --brand-line-2: rgba(232, 224, 212, .16);
  --brand-btn-bg: #C4A265;
  --brand-btn-text: #0B1A13;
  --brand-btn-hover-bg: transparent;
  --brand-btn-hover-text: #C4A265;
  --brand-card-bg: #132A1E;
}


/* === [SECTION 1] GLOBAL RESETS & BASE OVERRIDES === */

/* ---- BASE ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body, .shopify-section, .page-width, .template-index, .template-collection,
.template-product, .template-page, .template-cart, .template-list-collections,
.template-search, .template-blog, .template-article {
  background-color: var(--ink) !important;
  color: var(--cream) !important;
  font-family: var(--sans) !important;
  font-feature-settings: "ss01";
  letter-spacing: -0.005em;
  margin: 0;
  overflow-x: hidden;
}

::selection { background: var(--gold); color: var(--ink); }


/* === [SECTION 2] TYPOGRAPHY === */

/* ---- TYPOGRAPHY ---- */
h1, .h1 {
  font-family: var(--display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(3rem, 9vw, 8.5rem) !important;
  letter-spacing: -0.035em !important;
  line-height: 0.96 !important;
  color: var(--cream) !important;
  margin: 0 !important;
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(2.25rem, 5.5vw, 5rem) !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  color: var(--cream) !important;
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--sans) !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 3.2vw, 2.6rem) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.25 !important;
  color: var(--cream) !important;
}

h4, h5, h6, .caption-with-letter-spacing, .caption {
  font-family: var(--mono) !important;
  font-weight: 400 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--cream-mute) !important;
}

p, .rte p, .rte {
  font-family: var(--sans) !important;
  font-size: 1.7rem !important;
  line-height: 1.6 !important;
  letter-spacing: -0.005em !important;
  color: var(--cream-soft) !important;
  font-weight: 400 !important;
  text-wrap: pretty;
  max-width: 58ch;
}


/* === [SECTION 3] LINKS === */

/* ---- LINKS: SUBTLE ---- */
a {
  color: var(--cream) !important;
  text-decoration: none !important;
  transition: opacity 0.4s var(--ease), color 0.4s var(--ease);
}
a:hover { opacity: 0.7; }

.rte a, p a {
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 1px;
  transition: border-color 0.4s var(--ease);
}
.rte a:hover, p a:hover {
  border-bottom-color: var(--gold);
  opacity: 1;
  color: var(--cream) !important;
}


/* === [SECTION 4] NAVIGATION & HEADER === */

/* ---- HEADER ---- */
.header-wrapper, .shopify-section-header, .section-header,
#shopify-section-header, header.header, header {
  background: rgba(13, 12, 10, 0.7) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  border-bottom: 1px solid var(--line) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  padding: 22px clamp(24px, 4vw, 56px) !important;
}

.header__heading-link, .header__heading, .site-header__logo-link,
.header__logo-link, .logo, .header__heading-logo-wrapper {
  color: var(--cream) !important;
  font-family: var(--display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 2.4rem !important;
  letter-spacing: -0.02em !important;
}

.header__menu-item, .list-menu__item, nav a, .header-menu a {
  color: var(--cream) !important;
  font-family: var(--sans) !important;
  font-weight: 400 !important;
  font-size: 1.4rem !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  padding: 8px 0 !important;
  transition: opacity 0.4s var(--ease) !important;
}
.header__menu-item:hover, nav a:hover { opacity: 0.6; color: var(--cream) !important; }

.header__icon, .header__icon svg, .header__icon-cart, .icon-hamburger {
  color: var(--cream) !important;
  fill: var(--cream) !important;
  transition: opacity 0.4s var(--ease);
}
.header__icon:hover { opacity: 0.6; }

/* ---- ANNOUNCEMENT BAR ---- */
.announcement-bar, .utility-bar, .shopify-section-announcement-bar {
  background: var(--ink) !important;
  color: var(--cream-mute) !important;
  border-bottom: 1px solid var(--line) !important;
  font-family: var(--mono) !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 12px 0 !important;
  text-align: center !important;
}
.announcement-bar p { color: var(--cream-mute) !important; margin: 0 !important; }

/* --- 4.1 Global Nav - Sticky on all pages ---
 * Purpose: Match luxury feel across all pages, not just homepage
 * Affects: All pages except homepage
 * Brand: all + per-brand header overrides
 * Added: 2026-04
 */
/* ==========================================================
   GLOBAL NAV - Luxury on ALL pages (not just homepage)
   ========================================================== */

/* The homepage has ptg-sticky-nav custom HTML.
   Other pages use Dawn's default header.
   Style Dawn header to match the luxury feel on all pages. */

body:not(.template-index) .header-wrapper,
body:not(.template-index) .shopify-section-header,
body:not(.template-index) header {
  background: rgba(13, 12, 10, 0.85) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  border-bottom: 1px solid rgba(235, 229, 214, .09) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

/* Override for ForMommy brand pages */
.brand-formommy:not(.template-index) .header-wrapper,
.brand-formommy:not(.template-index) header {
  background: rgba(245, 237, 224, 0.92) !important;
  border-bottom-color: rgba(44, 24, 16, .08) !important;
}

/* Ensure #shopify-section-header is sticky everywhere */
#shopify-section-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

/* ==========================================================
   HOMEPAGE FOOTER FIX
   ========================================================== */

/* Ensure footer shows on homepage */
.template-index .pine-minifooter,
.template-index .shopify-section-group-footer-group,
.template-index #shopify-section-sections--18538554196067__pine-mini-footer {
  display: block !important;
  visibility: visible !important;
}

/* Footer should always sit at the bottom */
.shopify-section-group-footer-group {
  position: relative !important;
  z-index: 10 !important;
}




/* === [SECTION 5] HERO / BANNER SECTIONS === */

/* ---- HERO / BANNER: QUIET CONFIDENT ---- */
.banner, .hero, .slideshow, .image-with-text,
.shopify-section--image-banner,
section[class*="banner"], section[class*="hero"], section[class*="slideshow"] {
  background: var(--ink) !important;
  min-height: 92vh !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  padding: clamp(60px, 8vw, 120px) clamp(24px, 5vw, 80px) !important;
}

.banner__content, .hero__content, .slideshow__content {
  max-width: 1200px !important;
  width: 100% !important;
  text-align: left !important;
  margin: 0 !important;
  position: relative;
  z-index: 4;
}

.banner__heading, .hero__title, .slideshow__title {
  font-family: var(--display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(3.5rem, 11vw, 11rem) !important;
  letter-spacing: -0.04em !important;
  line-height: 0.92 !important;
  margin: 0 0 clamp(24px, 3vw, 40px) 0 !important;
  color: var(--cream) !important;
}

.banner__text, .hero__subtitle, .slideshow__subtitle {
  font-family: var(--sans) !important;
  font-size: clamp(1.6rem, 1.9vw, 1.9rem) !important;
  font-weight: 400 !important;
  color: var(--cream-soft) !important;
  max-width: 48ch !important;
  margin-bottom: 36px !important;
  line-height: 1.55 !important;
}

/* ---- BUTTONS: REFINED ---- */
.button, .btn, button[type="submit"], .cart__submit,
.product-form__submit, a.button, .button--primary, .shopify-payment-button button {
  background: var(--cream) !important;
  color: var(--ink) !important;
  border: 1px solid var(--cream) !important;
  border-radius: 0 !important;
  padding: 16px 32px !important;
  font-family: var(--sans) !important;
  font-size: 1.4rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: background 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
.button:hover, .btn:hover, button[type="submit"]:hover,
a.button:hover, .product-form__submit:hover {
  background: transparent !important;
  color: var(--cream) !important;
  border-color: var(--cream) !important;
}

.button--secondary, .btn--secondary {
  background: transparent !important;
  color: var(--cream) !important;
  border: 1px solid var(--line-2) !important;
}
.button--secondary:hover, .btn--secondary:hover {
  background: var(--cream) !important;
  color: var(--ink) !important;
  border-color: var(--cream) !important;
}

/* ---- SECTION SPACING ---- */
.shopify-section {
  padding: clamp(80px, 10vw, 160px) clamp(24px, 5vw, 80px) !important;
  position: relative;
  background: var(--ink) !important;
}
.shopify-section-header, .shopify-section-footer,
.shopify-section--image-banner, .shopify-section-announcement-bar {
  padding: 0 !important;
}



/* === [SECTION 6] PRODUCT CARDS & GRID === */

/* ---- PRODUCT CARDS: QUIET, REFINED ---- */
.product-card-wrapper, .card-wrapper, .grid__item .card,
.collection-product-card, .card, product-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  position: relative !important;
  transition: opacity 0.5s var(--ease) !important;
}

.card__media, .product-card__image-wrapper {
  overflow: hidden !important;
  position: relative !important;
  background: var(--ink-soft) !important;
  border: none !important;
  aspect-ratio: 4/5;
}
.card__media img, .product-card__image-wrapper img {
  transition: transform 1.1s var(--ease), opacity 0.5s var(--ease) !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.card-wrapper:hover .card__media img,
.card:hover img {
  transform: scale(1.04) !important;
}

.card__content, .card-information__wrapper, .product-card__info {
  padding: 18px 0 0 0 !important;
  background: transparent !important;
  border: none !important;
}

.card__heading, .card__heading a, .card-information__text,
.card__content .h5, .full-unstyled-link, .product-card__title {
  font-family: var(--sans) !important;
  font-size: 2.4rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
  color: var(--cream) !important;
  line-height: 1.35 !important;
}

.price, .price-item, .price__regular, .price-item--regular,
.money, .product-card__price {
  font-family: var(--sans) !important;
  font-weight: 400 !important;
  font-size: 1.4rem !important;
  letter-spacing: -0.005em !important;
  color: var(--cream-soft) !important;
  margin-top: 6px !important;
}
.price--on-sale .price-item--regular {
  color: var(--cream-mute) !important;
  text-decoration: line-through !important;
  opacity: 0.6 !important;
}
.price--on-sale .price-item--sale, .price__sale .price-item--sale {
  color: var(--gold) !important;
}

/* ---- PRODUCT GRID: CLEAN, GENEROUS ---- */
.collection .grid, .grid--4-col-desktop, .grid--3-col-desktop,
.product-grid, .grid {
  gap: clamp(24px, 3vw, 48px) clamp(16px, 2vw, 32px) !important;
  display: grid !important;
  padding: 0 !important;
}
@media (min-width: 990px) {
  .grid--4-col-desktop, .product-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .grid--3-col-desktop {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
.grid__item { padding: 0 !important; }


/* === [SECTION 7] COLLECTION PAGES === */

/* ---- IMAGE WITH TEXT: QUIET EDITORIAL ---- */
.image-with-text, .image-with-text__grid {
  background: transparent !important;
  align-items: center !important;
  gap: clamp(40px, 6vw, 100px) !important;
}
.image-with-text__media {
  border-radius: 0 !important;
  overflow: hidden !important;
}
.image-with-text__heading {
  font-family: var(--display) !important;
  font-style: italic !important;
  font-size: clamp(2.5rem, 5.5vw, 5rem) !important;
  letter-spacing: -0.035em !important;
  line-height: 0.98 !important;
  margin-bottom: 24px !important;
  color: var(--cream) !important;
}
.image-with-text__text, .image-with-text__content p {
  font-family: var(--sans) !important;
  color: var(--cream-soft) !important;
  font-size: 1.7rem !important;
  line-height: 1.6 !important;
}

/* ---- MULTICOLUMN: BREATHING SPACE ---- */
.multicolumn, .multicolumn__inner {
  background: transparent !important;
}
.multicolumn-card, .multicolumn-card__info {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
.multicolumn-card__image-wrapper, .multicolumn-card__image {
  margin-bottom: 28px !important;
  width: 36px !important;
  height: 36px !important;
  filter: brightness(0) invert(0.9) sepia(0.15) !important;
}
.multicolumn-card__title, .multicolumn-card .h3 {
  font-family: var(--display) !important;
  font-style: italic !important;
  font-size: 2.8rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  color: var(--cream) !important;
  margin-bottom: 12px !important;
}
.multicolumn-card__info p {
  color: var(--cream-soft) !important;
  font-size: 1.6rem !important;
  line-height: 1.55 !important;
}

/* ---- RICH TEXT ---- */
.rich-text, .rich-text__wrapper, .rich-text__blocks {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-align: left !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}
.rich-text__heading, .rich-text h2 {
  font-family: var(--display) !important;
  font-style: italic !important;
  font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
  margin-bottom: 32px !important;
}

/* ---- COLLECTION HERO ---- */
.collection-hero, .collection-hero__inner {
  background: transparent !important;
  padding: clamp(80px, 10vw, 140px) clamp(24px, 5vw, 80px) clamp(48px, 6vw, 80px) !important;
  text-align: left !important;
}
.collection-hero__title {
  font-family: var(--display) !important;
  font-style: italic !important;
  font-size: clamp(3rem, 9vw, 9rem) !important;
  letter-spacing: -0.04em !important;
  line-height: 0.94 !important;
  font-weight: 400 !important;
}
.collection-hero__description {
  font-family: var(--sans) !important;
  color: var(--cream-soft) !important;
  max-width: 56ch !important;
  margin: 24px 0 0 !important;
  font-size: 1.7rem !important;
  line-height: 1.55 !important;
}

/* --- 7.1 Collection Pages - Reduced Hero, Products Visible ---
 * Purpose: Ensure products are visible without scrolling
 * Affects: All collection pages
 * Brand: all + per-brand overrides
 * Added: 2026-04
 */
/* ==========================================================
   COLLECTION PAGES - Reduced Hero, Products Visible
   ========================================================== */

/* Reduce collection hero height - products should be visible quickly */
.collection-hero,
.collection-hero__inner {
  min-height: auto !important;
  padding: clamp(60px, 8vw, 100px) clamp(24px, 5vw, 80px) clamp(40px, 4vw, 60px) !important;
}

/* Collection hero brand backgrounds */
.brand-electronics .collection-hero {
  background: var(--brand-bg) !important;
}
.brand-formommy .collection-hero {
  background: var(--brand-bg) !important;
}
.brand-formommy .collection-hero__title {
  color: var(--brand-text) !important;
}
.brand-formommy .collection-hero__description {
  color: var(--brand-text-soft) !important;
}
.brand-mushroom .collection-hero {
  background: var(--brand-bg) !important;
}

/* Collection product cards - brand aware */
.brand-formommy .card__media,
.brand-formommy .product-card__image-wrapper {
  background: var(--brand-bg-soft) !important;
}
.brand-formommy .card__heading,
.brand-formommy .card__heading a,
.brand-formommy .card-information__text,
.brand-formommy .full-unstyled-link,
.brand-formommy .product-card__title {
  color: var(--brand-text) !important;
}
.brand-formommy .price,
.brand-formommy .price-item,
.brand-formommy .money {
  color: var(--brand-text-soft) !important;
}

.brand-mushroom .card__media,
.brand-mushroom .product-card__image-wrapper {
  background: var(--brand-bg-soft) !important;
}
.brand-mushroom .card__heading,
.brand-mushroom .card__heading a,
.brand-mushroom .full-unstyled-link {
  color: var(--brand-text) !important;
}
.brand-mushroom .price,
.brand-mushroom .price-item {
  color: var(--brand-text-soft) !important;
}

/* Collection grid - ensure product visibility */
.collection .grid,
.collection .product-grid {
  padding-top: 20px !important;
}



/* === [SECTION 8] PRODUCT PAGES === */

/* --- 8.0 V3 Base Product Styles --- */
/* ---- PRODUCT PAGE ---- */
.product, .product-section, .shopify-section-template--product, main.product {
  background: var(--ink) !important;
  padding: clamp(40px, 6vw, 100px) clamp(24px, 5vw, 80px) !important;
}
.product__title, .product__title h1 {
  font-family: var(--display) !important;
  font-style: italic !important;
  font-size: clamp(2.25rem, 5vw, 4rem) !important;
  font-weight: 400 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
  color: var(--cream) !important;
  margin: 0 0 20px 0 !important;
}
.product__description, .product__description p {
  font-family: var(--sans) !important;
  color: var(--cream-soft) !important;
  font-size: 1.7rem !important;
  line-height: 1.65 !important;
}
.product__media-wrapper, .product__media-item {
  border-radius: 0 !important;
  overflow: hidden !important;
  background: var(--ink-soft) !important;
  border: none !important;
}
.product__price, .price--large {
  font-family: var(--sans) !important;
  font-size: 2rem !important;
  font-weight: 400 !important;
  color: var(--cream) !important;
  padding: 0 !important;
  border: none !important;
  margin: 16px 0 32px !important;
}

/* ---- CART / DRAWER ---- */
.cart-drawer, .cart, .drawer, cart-drawer, cart-notification {
  background: var(--ink-soft) !important;
  color: var(--cream) !important;
  border-left: 1px solid var(--line) !important;
}
.cart-drawer__inner, cart-drawer .drawer__inner { background: var(--ink-soft) !important; }
.cart-drawer__heading, .cart__title {
  font-family: var(--display) !important;
  font-style: italic !important;
  font-size: 2.8rem !important;
  font-weight: 400 !important;
  color: var(--cream) !important;
  letter-spacing: -0.02em !important;
}
.cart-item, .cart__items .cart-item {
  border-bottom: 1px solid var(--line) !important;
  padding: 24px 0 !important;
}
.cart-item__name, .cart-item__details a {
  font-family: var(--sans) !important;
  color: var(--cream) !important;
  font-weight: 400 !important;
  font-size: 2.4rem !important;
}
.cart__footer, .cart-drawer__footer {
  border-top: 1px solid var(--line) !important;
  background: var(--ink-soft) !important;
  padding-top: 24px !important;
}

/* --- 8.1 Product Page Rebuild (Apple/Aesop/Nothing inspired) --- */
/* ==========================================================
   PRODUCT PAGE - GLOBAL LAYOUT (Apple/Nothing inspired)
   ========================================================== */

/* Background override per brand */
.brand-electronics .shopify-section,
.brand-electronics .product,
.brand-electronics body,
.brand-electronics .page-width,
.brand-electronics main {
  background-color: var(--brand-bg) !important;
}

.brand-formommy .shopify-section,
.brand-formommy .product,
.brand-formommy body,
.brand-formommy .page-width,
.brand-formommy main,
.brand-formommy .template-product {
  background-color: var(--brand-bg) !important;
  color: var(--brand-text) !important;
}

.brand-mushroom .shopify-section,
.brand-mushroom .product,
.brand-mushroom body,
.brand-mushroom .page-width,
.brand-mushroom main {
  background-color: var(--brand-bg) !important;
}



/* --- Product Page Layout: Clean, Centered, Minimal --- */

.template-product .product {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 60px) !important;
}

/* --- IMAGE GALLERY: Clean Display --- */

/* Hide thumbnail strip / slider dots / counter */
.product__media-list .slider-counter,
.slider-counter,
.product__media-toggle,
.product__modal-opener,
.thumbnail-slider,
.thumbnail-list,
.product__media-list .product__media-item:nth-child(n+3),
.product__media-sublist,
.product__media-icon,
.slider-buttons,
.product__xr-button,
[id*="GalleryStatus"] {
  display: none !important;
  visibility: hidden !important;
}

/* Show only first 2 images, clean and large */
.product__media-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  overflow: visible !important;
}

.product__media-item {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.product__media-item:nth-child(1),
.product__media-item:nth-child(2) {
  display: block !important;
}

.product__media-item:nth-child(n+3) {
  display: none !important;
}

/* Product image: clean, no card-in-card */
.product-media-container {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.product-media-container img,
.product__media-item img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 0 !important;
}

/* Brand-specific image container backgrounds */
.brand-electronics .product-media-container,
.brand-electronics .product__media-item {
  background: #0a0a0a !important;
}

.brand-formommy .product-media-container,
.brand-formommy .product__media-item {
  background: #EDE3D2 !important;
}

.brand-mushroom .product-media-container,
.brand-mushroom .product__media-item {
  background: #0F2118 !important;
}



/* ==========================================================
   PRODUCT INFO - Clean, Minimal Typography
   ========================================================== */

/* Title */
.brand-electronics .product__title,
.brand-electronics .product__title h1 {
  color: var(--brand-text) !important;
}

.brand-formommy .product__title,
.brand-formommy .product__title h1 {
  color: var(--brand-text) !important;
  font-family: 'Playfair Display', var(--display) !important;
}

.brand-mushroom .product__title,
.brand-mushroom .product__title h1 {
  color: var(--brand-text) !important;
}

/* Price */
.brand-electronics .product__price,
.brand-electronics .price--large,
.brand-electronics .price-item {
  color: var(--brand-text) !important;
}

.brand-formommy .product__price,
.brand-formommy .price--large,
.brand-formommy .price-item,
.brand-formommy .price-item--regular,
.brand-formommy .price-item--sale {
  color: var(--brand-text) !important;
}
.brand-formommy .price--on-sale .price-item--regular {
  color: var(--brand-text-mute) !important;
}
.brand-formommy .price--on-sale .price-item--sale,
.brand-formommy .price__sale .price-item--sale {
  color: var(--brand-accent) !important;
}

.brand-mushroom .product__price,
.brand-mushroom .price--large,
.brand-mushroom .price-item {
  color: var(--brand-text) !important;
}
.brand-mushroom .price--on-sale .price-item--sale {
  color: var(--brand-accent) !important;
}

/* Description - keep short and clean */
.product__description,
.product__description .rte {
  max-width: 580px !important;
}

.brand-formommy .product__description,
.brand-formommy .product__description p,
.brand-formommy .product__description .rte,
.brand-formommy .product__description li {
  color: var(--brand-text-soft) !important;
}

.brand-mushroom .product__description,
.brand-mushroom .product__description p,
.brand-mushroom .product__description .rte {
  color: var(--brand-text-soft) !important;
}

/* ==========================================================
   ADD TO CART BUTTON - Luxury Per Brand
   ========================================================== */

/* Electronics: cream/gold on dark */
.brand-electronics .product-form__submit {
  background: var(--brand-btn-bg) !important;
  color: var(--brand-btn-text) !important;
  border: 1px solid var(--brand-btn-bg) !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 18px 40px !important;
  border-radius: 0 !important;
  transition: all 0.45s cubic-bezier(.16,1,.3,1) !important;
}
.brand-electronics .product-form__submit:hover {
  background: transparent !important;
  color: var(--brand-btn-bg) !important;
  border-color: var(--brand-btn-bg) !important;
}

/* ForMommy: dark brown on warm cream */
.brand-formommy .product-form__submit {
  background: var(--brand-btn-bg) !important;
  color: var(--brand-btn-text) !important;
  border: 1px solid var(--brand-btn-bg) !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 18px 40px !important;
  border-radius: 0 !important;
}
.brand-formommy .product-form__submit:hover {
  background: transparent !important;
  color: var(--brand-btn-bg) !important;
  border-color: var(--brand-btn-bg) !important;
}

/* Mushroom: amber gold on deep green */
.brand-mushroom .product-form__submit {
  background: var(--brand-btn-bg) !important;
  color: var(--brand-btn-text) !important;
  border: 1px solid var(--brand-btn-bg) !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 18px 40px !important;
  border-radius: 0 !important;
}
.brand-mushroom .product-form__submit:hover {
  background: transparent !important;
  color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
}

/* Shopify Pay / dynamic checkout - match brand */
.brand-electronics .shopify-payment-button button {
  background: var(--brand-accent) !important;
  color: var(--brand-bg) !important;
  border-color: var(--brand-accent) !important;
  border-radius: 0 !important;
}
.brand-formommy .shopify-payment-button button {
  background: var(--brand-accent) !important;
  color: #fff !important;
  border-color: var(--brand-accent) !important;
  border-radius: 0 !important;
}
.brand-mushroom .shopify-payment-button button {
  background: var(--brand-accent) !important;
  color: var(--brand-bg) !important;
  border-color: var(--brand-accent) !important;
  border-radius: 0 !important;
}



/* ==========================================================
   VARIANT SELECTORS - Clean Pills
   ========================================================== */

.brand-formommy input[type=radio] + label,
.brand-formommy .swatch__label {
  border: 1px solid var(--brand-line-2) !important;
  background: transparent !important;
  color: var(--brand-text) !important;
}
.brand-formommy input[type=radio]:checked + label,
.brand-formommy .swatch__input:checked + .swatch__label {
  background: var(--brand-text) !important;
  color: var(--brand-bg) !important;
  border-color: var(--brand-text) !important;
}

.brand-mushroom input[type=radio] + label,
.brand-mushroom .swatch__label {
  border: 1px solid var(--brand-line-2) !important;
  background: transparent !important;
  color: var(--brand-text) !important;
}
.brand-mushroom input[type=radio]:checked + label,
.brand-mushroom .swatch__input:checked + .swatch__label {
  background: var(--brand-accent) !important;
  color: var(--brand-bg) !important;
  border-color: var(--brand-accent) !important;
}

/* Quantity input - brand aware */
.brand-formommy .quantity,
.brand-formommy quantity-input {
  border-color: var(--brand-line-2) !important;
  background: transparent !important;
}
.brand-formommy .quantity__button { color: var(--brand-text) !important; }
.brand-formommy .quantity__input { color: var(--brand-text) !important; background: transparent !important; }

.brand-mushroom .quantity,
.brand-mushroom quantity-input {
  border-color: var(--brand-line-2) !important;
}
.brand-mushroom .quantity__button { color: var(--brand-text) !important; }

/* ==========================================================
   HIDE CLUTTER - Remove marketplace buttons, broken counters
   ========================================================== */

/* Hide "Also Available On" marketplace sections if they exist */
[class*="also-available"],
[class*="marketplace-button"],
[class*="available-on"],
.product__marketplace-links,
.marketplace-badges,
div[data-marketplace],
.product-badges-marketplace {
  display: none !important;
}

/* Hide broken image counter (NaN / of -Infinity) */
.slider-counter,
.slider-counter--active,
[class*="slider-counter"],
.product__media-list + .slider-counter,
.product-gallery__counter {
  display: none !important;
}

/* Hide share buttons, SKU info, excessive metadata */
.product__view-details,
.share-button,
.product-popup-modal,
.product__sku {
  display: none !important;
}


/* --- 8.2 Product Page Layout - Desktop & Mobile --- */
/* ==========================================================
   PRODUCT PAGE - DESKTOP LAYOUT (Side by Side)
   ========================================================== */

@media (min-width: 990px) {
  /* Product section: image left, info right */
  .template-product .product .product--medium,
  .template-product .product .product--large,
  .template-product .product .product--small,
  .template-product .product > .grid,
  .template-product .product .product__info-wrapper,
  .product .grid--1-col-desktop-no-media {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(40px, 5vw, 80px) !important;
    align-items: start !important;
  }

  .product__media-wrapper {
    position: sticky !important;
    top: 100px !important;
  }
}

/* ==========================================================
   PRODUCT PAGE - MOBILE REFINEMENTS
   ========================================================== */

@media (max-width: 989px) {
  .template-product .product {
    padding: 24px 16px !important;
  }

  .product__media-list {
    gap: 1px !important;
  }

  .product__title,
  .product__title h1 {
    font-size: clamp(24px, 6vw, 36px) !important;
  }

  .product-form__submit {
    width: 100% !important;
    padding: 16px 32px !important;
  }
}



/* === [SECTION 9] CART, SEARCH & UTILITY PAGES === */

/* --- 9.0 V3 Base Form/Cart Styles --- */
/* ---- FORMS ---- */
input, textarea, select, .field__input, .form__input,
input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
  background: transparent !important;
  color: var(--cream) !important;
  border: none !important;
  border-bottom: 1px solid var(--line-2) !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
  font-family: var(--sans) !important;
  font-size: 1.6rem !important;
  letter-spacing: -0.005em !important;
  transition: border-color 0.4s var(--ease) !important;
}
input:focus, textarea:focus, select:focus, .field__input:focus {
  border-color: var(--cream) !important;
  outline: none !important;
  box-shadow: none !important;
}
input::placeholder, textarea::placeholder {
  color: var(--cream-mute) !important;
  opacity: 0.6 !important;
}
label, .form__label, .field__label {
  font-family: var(--mono) !important;
  color: var(--cream-mute) !important;
  font-weight: 400 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
.field { border: none !important; }

.quantity, quantity-input {
  border: 1px solid var(--line-2) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: var(--sans) !important;
}
.quantity__button {
  color: var(--cream) !important;
  background: transparent !important;
}
.quantity__button:hover { color: var(--gold) !important; }

/* --- 9.1 Misc Cleanup - Dawn Template Artifacts --- */
/* ==========================================================
   MISC CLEANUP - Remove Dawn Template Artifacts
   ========================================================== */

/* Remove default Dawn borders and shadows from product */
.product .color-background-1,
.product .color-background-2,
.product .gradient {
  background: transparent !important;
}

/* Clean up product form spacing */
.product-form {
  margin-top: 24px !important;
}

.product-form__buttons {
  max-width: 400px !important;
}

/* Remove product rating placeholder if empty */
.product-rating:empty,
.product__reviews:empty {
  display: none !important;
}

/* Clean up compare-at price display */
.price__container {
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
}

/* Product vendor label - subtle */
.product__vendor {
  font-family: var(--mono, monospace) !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--brand-text-mute, var(--cream-mute)) !important;
  margin-bottom: 8px !important;
}

/* Hide Dawn's "Couldn't load pickup" errors */
pickup-availability:empty,
.product__pickup-availabilities:empty {
  display: none !important;
}

/* Breadcrumbs - minimal style */
.breadcrumbs,
nav.breadcrumb {
  font-family: var(--mono, monospace) !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--brand-text-mute, var(--cream-mute)) !important;
  margin-bottom: 24px !important;
}

/* Product page selection text color for ForMommy */
.brand-formommy ::selection {
  background: #B87333 !important;
  color: #fff !important;
}

.brand-mushroom ::selection {
  background: #C4A265 !important;
  color: #0B1A13 !important;
}


/* --- 9.2 Facets / Filters --- */
/* ==========================================================
   FACETS / FILTERS - Brand Aware
   ========================================================== */

.brand-formommy .facets__summary,
.brand-formommy .facets__disclosure,
.brand-formommy details.disclosure-has-popup,
.brand-formommy .active-facets {
  color: var(--brand-text) !important;
  border-color: var(--brand-line-2) !important;
}
.brand-formommy .facets__summary span,
.brand-formommy summary {
  color: var(--brand-text) !important;
}


/* === [SECTION 10] BRAND-SPECIFIC OVERRIDES === */

/* --- 10a. ForMommy Full Color World --- */
/* ==========================================================
   FORMOMMY - Full Color World Override
   ========================================================== */

/* Header on ForMommy pages */
.brand-formommy .header-wrapper,
.brand-formommy .shopify-section-header,
.brand-formommy header {
  background: rgba(245, 237, 224, 0.92) !important;
  backdrop-filter: blur(20px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
  border-bottom: 1px solid rgba(44, 24, 16, .08) !important;
}
.brand-formommy .header__heading-link,
.brand-formommy .header__heading,
.brand-formommy .header__menu-item,
.brand-formommy nav a,
.brand-formommy .header__icon,
.brand-formommy .header__icon svg {
  color: #2C1810 !important;
  fill: #2C1810 !important;
}

/* ForMommy links */
.brand-formommy a {
  color: var(--brand-text) !important;
}
.brand-formommy a:hover {
  color: var(--brand-accent) !important;
  opacity: 1 !important;
}

/* ForMommy inputs */
.brand-formommy input,
.brand-formommy textarea,
.brand-formommy select,
.brand-formommy .field__input {
  color: var(--brand-text) !important;
  border-bottom-color: var(--brand-line-2) !important;
}
.brand-formommy input:focus,
.brand-formommy .field__input:focus {
  border-color: var(--brand-accent) !important;
}

/* ForMommy footer */
.brand-formommy .pine-minifooter {
  background: #2C1810 !important;
}
.brand-formommy .pine-minifooter a { color: rgba(245, 237, 224, 0.6) !important; }
.brand-formommy .pine-minifooter a:hover { color: #B87333 !important; }
.brand-formommy .pine-minifooter p { color: rgba(245, 237, 224, 0.4) !important; }
.brand-formommy .pine-minifooter p span { color: #B87333 !important; }

/* ForMommy badges */
.brand-formommy .badge,
.brand-formommy .card__badge {
  border-color: var(--brand-line-2) !important;
  color: var(--brand-text) !important;
  background: rgba(245, 237, 224, 0.7) !important;
  backdrop-filter: blur(8px) !important;
}
.brand-formommy .badge--sale {
  background: var(--brand-accent) !important;
  color: #fff !important;
  border-color: var(--brand-accent) !important;
}




/* --- 10b. Dawn Color Scheme Overrides (per brand) ---
 * Purpose: Kill Dawn's white color-background-1 on brand pages
 * Affects: All pages with brand class
 * Added: 2026-04-28
 */
/* --- V2-1: Kill Dawn color-background-1 white EVERYWHERE --- */
/* Dawn's color-background-1 is white. Override for brand pages. */
.brand-formommy .color-background-1,
.brand-formommy .gradient.color-background-1,
.brand-formommy [class*="-padding"].color-background-1,
.brand-formommy .color-background-2,
.brand-formommy .color-scheme-1,
.brand-formommy .color-scheme-2 {
  background: var(--brand-bg, #F5EDE0) !important;
  background-color: var(--brand-bg, #F5EDE0) !important;
  color: var(--brand-text, #2C1810) !important;
}

.brand-mushroom .color-background-1,
.brand-mushroom .gradient.color-background-1,
.brand-mushroom [class*="-padding"].color-background-1,
.brand-mushroom .color-background-2,
.brand-mushroom .color-scheme-1,
.brand-mushroom .color-scheme-2 {
  background: var(--brand-bg, #0B1A13) !important;
  background-color: var(--brand-bg, #0B1A13) !important;
  color: var(--brand-text, #E8E0D4) !important;
}

.brand-electronics .color-background-1,
.brand-electronics .gradient.color-background-1,
.brand-electronics [class*="-padding"].color-background-1,
.brand-electronics .color-background-2,
.brand-electronics .color-scheme-1,
.brand-electronics .color-scheme-2 {
  background: var(--brand-bg, #080808) !important;
  background-color: var(--brand-bg, #080808) !important;
  color: var(--brand-text, #ebe5d6) !important;
}

/* Non-brand pages (homepage excluded via template-index) */
body:not(.brand-formommy):not(.brand-mushroom):not(.brand-electronics) .color-background-1,
body:not(.brand-formommy):not(.brand-mushroom):not(.brand-electronics):not(.template-index) [class*="-padding"].color-background-1 {
  background: var(--ink, #0d0c0a) !important;
  background-color: var(--ink, #0d0c0a) !important;
  color: var(--cream, #ebe5d6) !important;
}

/* --- 10c. Body.gradient Override (per brand) --- */
/* --- V2-8: Fix body.gradient class from Dawn --- */
/* Dawn adds 'gradient' to body which may add a gradient bg */
body.gradient {
  background: var(--ink, #0d0c0a) !important;
}
body.gradient.brand-formommy {
  background: var(--brand-bg, #F5EDE0) !important;
}
body.gradient.brand-mushroom {
  background: var(--brand-bg, #0B1A13) !important;
}
body.gradient.brand-electronics {
  background: var(--brand-bg, #080808) !important;
}

/* --- 10d. Product Info Backgrounds (per brand) --- */
/* --- V2-3: Product info white box kill (product pages) --- */
/* Use body-level brand class, not template-product (which may not exist) */
.brand-electronics .product__info-container,
.brand-electronics .product__info-wrapper,
.brand-electronics .product__info-wrapper > *,
.brand-electronics .product .color-background-1,
.brand-electronics .product .gradient {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.brand-formommy .product__info-container,
.brand-formommy .product__info-wrapper,
.brand-formommy .product__info-wrapper > *,
.brand-formommy .product .color-background-1,
.brand-formommy .product .gradient {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.brand-mushroom .product__info-container,
.brand-mushroom .product__info-wrapper,
.brand-mushroom .product__info-wrapper > *,
.brand-mushroom .product .color-background-1,
.brand-mushroom .product .gradient {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* --- 10e. Card Backgrounds on Collections (per brand) --- */
/* --- V2-4: Product card white backgrounds on collections --- */
/* Card images get white bg from Dawn. Override per brand. */
.brand-formommy .card__media,
.brand-formommy .card__inner,
.brand-formommy .card,
.brand-formommy .card-wrapper .card,
.brand-formommy .card--standard .card__inner,
.brand-formommy .card--card .card__inner,
.brand-formommy .card__content,
.brand-formommy .media--transparent {
  background: var(--brand-bg-soft, #EDE3D2) !important;
  background-color: var(--brand-bg-soft, #EDE3D2) !important;
  border: none !important;
  box-shadow: none !important;
}

.brand-mushroom .card__media,
.brand-mushroom .card__inner,
.brand-mushroom .card,
.brand-mushroom .card-wrapper .card,
.brand-mushroom .card--standard .card__inner,
.brand-mushroom .card--card .card__inner,
.brand-mushroom .card__content,
.brand-mushroom .media--transparent {
  background: var(--brand-bg-soft, #13281D) !important;
  background-color: var(--brand-bg-soft, #13281D) !important;
  border: none !important;
  box-shadow: none !important;
}

.brand-electronics .card__media,
.brand-electronics .card__inner,
.brand-electronics .card,
.brand-electronics .card-wrapper .card,
.brand-electronics .card--standard .card__inner,
.brand-electronics .card--card .card__inner,
.brand-electronics .card__content,
.brand-electronics .media--transparent {
  background: var(--brand-bg-soft, #111111) !important;
  background-color: var(--brand-bg-soft, #111111) !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- 10f. Collection Hero Text Colors (per brand) --- */
/* --- V2-6: ForMommy collection hero text colors --- */
.brand-formommy .collection-hero__title {
  color: var(--brand-text, #2C1810) !important;
}
.brand-formommy .collection-hero__description,
.brand-formommy .collection-hero__description p {
  color: var(--brand-text-soft, #5C4033) !important;
}

/* Mushroom collection hero text */
.brand-mushroom .collection-hero__title {
  color: var(--brand-text, #E8E0D4) !important;
}
.brand-mushroom .collection-hero__description {
  color: var(--brand-text-soft, #B8AE9C) !important;
}

/* --- 10g. Facets/Filter Bar (per brand) --- */
/* --- V2-7: Facets/filter bar white background fix --- */
.brand-formommy .facets-container,
.brand-formommy .facets__form,
.brand-formommy .collection-filters,
.brand-formommy .active-facets,
.brand-formommy facet-filters-form {
  background: transparent !important;
  color: var(--brand-text, #2C1810) !important;
}

.brand-mushroom .facets-container,
.brand-mushroom .facets__form,
.brand-mushroom .collection-filters {
  background: transparent !important;
  color: var(--brand-text, #E8E0D4) !important;
}

/* --- 10h. Header Section Backgrounds (per brand) --- */
/* --- V2-10: Hide header on collection pages too --- */
/* The header section might have a white bg from Dawn */
.brand-formommy #shopify-section-header {
  background: rgba(245, 237, 224, 0.92) !important;
}
.brand-mushroom #shopify-section-header {
  background: rgba(11, 26, 19, 0.85) !important;
}

/* --- 10i. Description Mask Fix --- */
/* Remove the fade mask from v1 - too aggressive, hides content */
.product__description .rte {
  max-height: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  overflow: visible !important;
}

/* Instead just keep it visually tight */
.product__description,
.product__description .rte,
.product__description p {
  font-size: 2.4rem !important;
  line-height: 1.55 !important;
  max-width: 520px !important;
}

/* --- 10j. Brand Page Backgrounds --- */
/* Product page: use brand bg as page-level override */
body.brand-electronics.template-product,
body.brand-electronics.template-product .shopify-section,
body.brand-electronics.template-product main,
body.brand-electronics.template-product .main-content,
body.brand-electronics.template-product #MainContent {
  background-color: var(--brand-bg, #080808) !important;
}

body.brand-formommy.template-product,
body.brand-formommy.template-product .shopify-section,
body.brand-formommy.template-product main,
body.brand-formommy.template-product .main-content,
body.brand-formommy.template-product #MainContent {
  background-color: var(--brand-bg, #F5EDE0) !important;
  color: var(--brand-text, #2C1810) !important;
}

body.brand-mushroom.template-product,
body.brand-mushroom.template-product .shopify-section,
body.brand-mushroom.template-product main,
body.brand-mushroom.template-product .main-content,
body.brand-mushroom.template-product #MainContent {
  background-color: var(--brand-bg, #0B1A13) !important;
}

/* --- 10k. Collection Brand Backgrounds --- */
/* Collection brand backgrounds */
body.brand-formommy.template-collection,
body.brand-formommy.template-collection main,
body.brand-formommy.template-collection .shopify-section,
body.brand-formommy.template-collection #MainContent {
  background-color: var(--brand-bg, #F5EDE0) !important;
}

body.brand-mushroom.template-collection,
body.brand-mushroom.template-collection main,
body.brand-mushroom.template-collection .shopify-section,
body.brand-mushroom.template-collection #MainContent {
  background-color: var(--brand-bg, #0B1A13) !important;
}

/* --- 10l. Product Text Colors (per brand) --- */
/* --- FIX 2: Product text colors per brand --- */

/* ForMommy: all product info text should be dark on cream */
body.brand-formommy .product__title,
body.brand-formommy .product__title h1,
body.brand-formommy .product__title span,
body.brand-formommy h1,
body.brand-formommy .product__vendor,
body.brand-formommy .product__text,
body.brand-formommy .product__tax,
body.brand-formommy .product-form__group-name,
body.brand-formommy .product-form__input label,
body.brand-formommy legend,
body.brand-formommy .product__description,
body.brand-formommy .product__description p,
body.brand-formommy .rte p,
body.brand-formommy .price,
body.brand-formommy .price-item,
body.brand-formommy .price-item--regular,
body.brand-formommy .price-item--sale,
body.brand-formommy .price__container {
  color: var(--brand-text, #2C1810) !important;
}

/* Mushroom: all product info text should be light on dark green */
body.brand-mushroom .product__title,
body.brand-mushroom .product__title h1,
body.brand-mushroom h1,
body.brand-mushroom .product__vendor,
body.brand-mushroom .product__text,
body.brand-mushroom .product-form__group-name,
body.brand-mushroom .product-form__input label,
body.brand-mushroom legend,
body.brand-mushroom .product__description,
body.brand-mushroom .product__description p,
body.brand-mushroom .rte p {
  color: var(--brand-text, #E8E0D4) !important;
}

/* --- 10m. ForMommy Header on Collections --- */
/* --- FIX 12: ForMommy header on collection pages --- */
body.brand-formommy.template-collection .header-wrapper,
body.brand-formommy.template-collection header {
  background: rgba(245, 237, 224, 0.92) !important;
  border-bottom-color: rgba(44, 24, 16, .08) !important;
}
body.brand-formommy.template-collection .header__heading-link,
body.brand-formommy.template-collection .header__heading,
body.brand-formommy.template-collection .header__menu-item,
body.brand-formommy.template-collection nav a,
body.brand-formommy.template-collection .header__icon,
body.brand-formommy.template-collection .header__icon svg {
  color: #2C1810 !important;
  fill: #2C1810 !important;
}

/* --- FIX 13: Mushroom header on product/collection pages --- */
body.brand-mushroom .header-wrapper,
body.brand-mushroom header {
  background: rgba(11, 26, 19, 0.85) !important;
  border-bottom-color: rgba(232, 224, 212, .06) !important;
}

/* --- 10n. Cart Page Dark Styling --- */
/* --- FIX 5: Cart page dark styling --- */
.template-cart,
.template-cart body,
.template-cart main,
.template-cart .shopify-section,
.template-cart #MainContent,
.template-cart .page-width,
.template-cart .cart {
  background-color: var(--ink, #0d0c0a) !important;
  color: var(--cream, #ebe5d6) !important;
}

.template-cart h1,
.template-cart h2,
.template-cart .cart__heading {
  color: var(--cream, #ebe5d6) !important;
  font-family: var(--display) !important;
  font-style: italic !important;
}

.template-cart .cart-item__name,
.template-cart .cart-item__details a,
.template-cart .cart-item a {
  color: var(--cream, #ebe5d6) !important;
}

.template-cart .cart-item__price,
.template-cart .price,
.template-cart .cart-item__discounted-price,
.template-cart .totals__subtotal-value,
.template-cart .totals__total-value,
.template-cart .totals span {
  color: var(--cream, #ebe5d6) !important;
}

.template-cart .cart-item,
.template-cart .cart-items {
  border-color: var(--line, rgba(235, 229, 214, 0.09)) !important;
}

/* Cart quantity selectors */
.template-cart .quantity,
.template-cart quantity-input {
  border-color: var(--line-2, rgba(235, 229, 214, 0.16)) !important;
  background: transparent !important;
}
.template-cart .quantity__button,
.template-cart .quantity__input {
  color: var(--cream, #ebe5d6) !important;
  background: transparent !important;
}

/* Cart checkout button */
.template-cart .cart__checkout-button,
.template-cart button[name="checkout"],
.template-cart #checkout {
  background: var(--cream, #ebe5d6) !important;
  color: var(--ink, #0d0c0a) !important;
  border: 1px solid var(--cream, #ebe5d6) !important;
  border-radius: 0 !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 18px 40px !important;
  transition: all 0.45s cubic-bezier(.16,1,.3,1) !important;
}
.template-cart .cart__checkout-button:hover,
.template-cart button[name="checkout"]:hover {
  background: transparent !important;
  color: var(--cream, #ebe5d6) !important;
}

/* Cart remove button and links */
.template-cart .cart-item__quantity-wrapper a,
.template-cart cart-remove-button a,
.template-cart .cart__remove {
  color: var(--cream-mute, #8a8475) !important;
}
.template-cart cart-remove-button a:hover {
  color: var(--gold, #b89968) !important;
}

/* Cart empty state */
.template-cart .cart--empty,
.template-cart .cart__empty-text {
  color: var(--cream-soft, #d8d1bf) !important;
}

/* Cart continue shopping link */
.template-cart .cart__continue a {
  color: var(--cream, #ebe5d6) !important;
  border-bottom: 1px solid var(--line-2) !important;
}

/* Cart note, terms, taxes text */
.template-cart .cart__note label,
.template-cart .cart__note textarea,
.template-cart .rte,
.template-cart p {
  color: var(--cream-soft, #d8d1bf) !important;
}
.template-cart .cart__note textarea {
  background: transparent !important;
  border-color: var(--line-2) !important;
}

/* Remove Dawn color schemes on cart */
.template-cart [class*="color-background"],
.template-cart [class*="color-scheme"],
.template-cart .gradient {
  background: transparent !important;
  background-color: transparent !important;
}

/* --- 10o. Search & 404 Dark Styling --- */
/* --- FIX 10: Search page dark styling --- */
.template-search,
.template-search main,
.template-search .shopify-section,
.template-search #MainContent {
  background-color: var(--ink, #0d0c0a) !important;
  color: var(--cream, #ebe5d6) !important;
}

.template-search h1,
.template-search .search__heading {
  color: var(--cream, #ebe5d6) !important;
}

.template-search input[type="search"],
.template-search .search__input,
.template-search .field__input {
  color: var(--cream, #ebe5d6) !important;
  background: transparent !important;
  border-color: var(--line-2) !important;
}

/* --- FIX 11: 404 page dark styling --- */
.template-404,
.template-404 main,
.template-404 .shopify-section {
  background-color: var(--ink, #0d0c0a) !important;
  color: var(--cream, #ebe5d6) !important;
}

/* --- 10p. Homepage Footer Fix --- */
/* ==========================================================
   HOMEPAGE FOOTER FIX
   ========================================================== */

/* Ensure footer shows on homepage */
.template-index .pine-minifooter,
.template-index .shopify-section-group-footer-group,
.template-index #shopify-section-sections--18538554196067__pine-mini-footer {
  display: block !important;
  visibility: visible !important;
}

/* Footer should always sit at the bottom */
.shopify-section-group-footer-group {
  position: relative !important;
  z-index: 10 !important;
}



/* --- 10q. ForMommy Card Images --- */
/* --- V3-3: ForMommy card images - cream not white --- */
.brand-formommy .card__media img,
.brand-formommy .card .media img,
.brand-formommy .product-card img {
  background: var(--brand-bg-soft, #EDE3D2) !important;
}

/* The img wrapper/container */
.brand-formommy .media,
.brand-formommy .card__media .media {
  background: var(--brand-bg-soft, #EDE3D2) !important;
}

/* --- V3-4: Fix ForMommy filter underlines to brand color --- */
.brand-formommy .facets__summary,
.brand-formommy .facet-checkbox,
.brand-formommy .facets__disclosure,
.brand-formommy details summary {
  color: var(--brand-text, #2C1810) !important;
}

/* Sort-by dropdown */
.brand-formommy .select__select,
.brand-formommy select {
  color: var(--brand-text, #2C1810) !important;
  background: transparent !important;
  border-color: var(--brand-line-2, rgba(44, 24, 16, .18)) !important;
}

/* Product count text */
.brand-formommy .collection-product-count,
.brand-formommy [id*="ProductCount"] {
  color: var(--brand-text, #2C1810) !important;
}



/* === [SECTION 11] COMPONENT OVERRIDES === */

/* ---- FOOTER: QUIET CLOSE ---- */
.footer, .section-footer, #shopify-section-footer, footer.footer, footer {
  background: var(--ink) !important;
  border-top: 1px solid var(--line) !important;
  padding: clamp(80px, 8vw, 120px) clamp(24px, 5vw, 80px) clamp(40px, 4vw, 60px) !important;
}

.footer__content-top {
  border: none !important;
  padding-bottom: 60px !important;
  margin-bottom: 60px !important;
  border-bottom: 1px solid var(--line) !important;
}

.footer-block__heading, .footer h4, .footer__heading {
  font-family: var(--mono) !important;
  color: var(--cream-mute) !important;
  font-weight: 400 !important;
  font-size: 1.1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  margin-bottom: 24px !important;
}

.footer a, .footer-block a, .footer__list-item a {
  font-family: var(--sans) !important;
  color: var(--cream-soft) !important;
  font-size: 2.4rem !important;
  font-weight: 400 !important;
  padding: 4px 0;
  transition: color 0.4s var(--ease) !important;
}
.footer a:hover, .footer-block a:hover { color: var(--cream) !important; opacity: 1; }

.footer__content-bottom, .footer__copyright {
  border-top: 1px solid var(--line) !important;
  padding-top: 32px !important;
  font-family: var(--mono) !important;
  color: var(--cream-mute) !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* ---- BADGES ---- */
.badge, .tag, .card__badge, .product-card__badge {
  background: transparent !important;
  color: var(--cream) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 0 !important;
  padding: 5px 10px !important;
  font-family: var(--mono) !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  position: absolute !important;
  top: 14px;
  left: 14px;
  z-index: 3;
  backdrop-filter: blur(8px);
}
.badge--sale, .badge--on-sale {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border-color: var(--gold) !important;
}

/* ---- NEWSLETTER ---- */
.newsletter, .newsletter-form {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-align: left !important;
}
.newsletter__heading, .newsletter h2 {
  font-family: var(--display) !important;
  font-style: italic !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 20px !important;
}
.newsletter-form__field-wrapper {
  border-bottom: 1px solid var(--line-2) !important;
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--line-2); }
::-webkit-scrollbar-thumb:hover { background: var(--cream-mute); }

/* ---- PAGINATION ---- */
.pagination a, .pagination span {
  font-family: var(--sans) !important;
  color: var(--cream-soft) !important;
  border: none !important;
  border-bottom: 1px solid transparent !important;
  padding: 8px 14px !important;
  font-size: 1.4rem !important;
  transition: border-color 0.4s var(--ease) !important;
}
.pagination a:hover, .pagination .current {
  border-bottom-color: var(--cream) !important;
  color: var(--cream) !important;
  background: transparent !important;
}

/* ---- SUBTLE SCROLL-IN ---- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.shopify-section { animation: fadeIn 0.9s var(--ease) both; }

@supports (animation-timeline: scroll()) {
  .shopify-section {
    animation: fadeIn 0.9s var(--ease) both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- DRAWERS / MODALS ---- */
.modal, .popup, .menu-drawer, modal-dialog {
  background: var(--ink) !important;
  color: var(--cream) !important;
  border: none !important;
  border-left: 1px solid var(--line) !important;
  border-radius: 0 !important;
}
.menu-drawer__menu-item, .menu-drawer a {
  font-family: var(--display) !important;
  font-style: italic !important;
  font-size: 2.8rem !important;
  font-weight: 400 !important;
  color: var(--cream) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 22px 0 !important;
  letter-spacing: -0.02em !important;
}
.menu-drawer__menu-item:hover { opacity: 0.65; color: var(--cream) !important; }

/* ---- ACCORDION ---- */
details { border-bottom: 1px solid var(--line) !important; }
summary, .accordion__title {
  font-family: var(--sans) !important;
  font-size: 2.4rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  color: var(--cream) !important;
  padding: 22px 0 !important;
  cursor: pointer !important;
  list-style: none !important;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  float: right;
  font-size: 1.2rem;
  color: var(--cream-mute);
  transition: transform 0.4s var(--ease);
}
details[open] summary::after { transform: rotate(45deg); }

/* ---- VARIANT SWATCHES ---- */
input[type="radio"] + label, .swatch__label {
  border: 1px solid var(--line-2) !important;
  background: transparent !important;
  color: var(--cream) !important;
  padding: 12px 22px !important;
  border-radius: 0 !important;
  font-family: var(--sans) !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: all 0.4s var(--ease) !important;
}
input[type="radio"]:checked + label, .swatch__input:checked + .swatch__label {
  background: var(--cream) !important;
  color: var(--ink) !important;
  border-color: var(--cream) !important;
}
input[type="radio"] + label:hover { border-color: var(--cream) !important; }

/* ---- DIVIDERS ---- */
hr, .divider {
  border: none !important;
  height: 1px !important;
  background: var(--line) !important;
  margin: clamp(40px, 5vw, 80px) 0 !important;
}

/* ---- MOBILE ---- */
@media (max-width: 749px) {
  h1, .h1 { font-size: clamp(2.75rem, 13vw, 4.5rem) !important; }
  h2, .h2 { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .banner__heading, .hero__title {
    font-size: clamp(3.5rem, 17vw, 6rem) !important;
  }
  .collection-hero__title {
    font-size: clamp(2.75rem, 13vw, 4.5rem) !important;
  }

  .banner, .hero, .slideshow {
    min-height: 88vh !important;
    padding: 80px 24px 60px !important;
  }
  .shopify-section { padding: 64px 24px !important; }

  .collection .grid, .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 12px !important;
  }
  .card__heading { font-size: 1.4rem !important; }

  .button, .btn, .product-form__submit {
    padding: 14px 28px !important;
    font-size: 1.4rem !important;
    width: 100% !important;
  }

  .menu-drawer__menu-item, .menu-drawer a { font-size: 2.4rem !important; }
  .header-wrapper, header { padding: 16px 24px !important; }
  .header__heading-link, .logo { font-size: 2rem !important; }
}

@media (min-width: 750px) and (max-width: 989px) {
  .banner__heading, .hero__title {
    font-size: clamp(4rem, 13vw, 7.5rem) !important;
  }
  .collection .grid, .product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ---- CLEAN UP ---- */
.disclosure__button, .localization-selector, .country-selector {
  font-family: var(--mono) !important;
  color: var(--cream-mute) !important;
  background: transparent !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.14em !important;
}
.icon-close { color: var(--cream) !important; }



/* === [SECTION 12] RESPONSIVE / MOBILE OVERRIDES === */
/* --- 12.0 Architecture ---
 * ALL mobile-specific rules live here. Never scatter media queries.
 * Uses html body.brand-X prefix for maximum specificity.
 * Breakpoints: <750px (mobile), 750-989px (tablet), >=990px (desktop)
 * Rebuilt: 2026-05-05 - merged from pine-mobile-alignment-fixes.css
 */

/* FIX 1: Also Available On buttons - side by side on mobile */
@media (max-width: 768px) {
  .pl-also-on__links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }
  .pl-also-on__link {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 50% !important;
  }
}

/* FIX 2: Remove sticky bottom buy bar on all pages */
@media (max-width: 768px) {
  .pl-sticky-cta {
    display: none !important;
  }
}

/* --- 12.1 Collection Grid - Mobile (FormMommy + Electronics) ---
 * Purpose: 2-column grid with equal-height cards on mobile
 * Affects: .lc-grid, .lc-card on collection pages
 * Brand: formommy, electronics
 * Added: 2026-05-05 (merged from pine-mobile-alignment-fixes.css)
 */
@media (max-width: 749px) {
  html body.brand-formommy .lc-grid,
  html body.brand-electronics .lc-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 12px !important;
    padding: 16px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-items: stretch !important;
    align-items: stretch !important;
    margin: 0 auto !important;
  }

  html body.brand-formommy .lc-card,
  html body.brand-electronics .lc-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
  }

  html body.brand-formommy .lc-card__img-wrap,
  html body.brand-electronics .lc-card__img-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    aspect-ratio: 1 / 1 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body.brand-formommy .lc-card__img-wrap img,
  html body.brand-formommy .lc-card__img,
  html body.brand-formommy .lc-card img,
  html body.brand-electronics .lc-card__img-wrap img,
  html body.brand-electronics .lc-card__img,
  html body.brand-electronics .lc-card img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    transform: none !important;
    display: block !important;
    margin: 0 auto !important;
  }

  html body.brand-formommy .lc-card__name,
  html body.brand-electronics .lc-card__name {
    font-size: 14px !important;
    line-height: 1.3 !important;
    padding: 8px 8px 4px !important;
    margin: 0 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
    flex-grow: 1 !important;
  }

  html body.brand-formommy .lc-card__price,
  html body.brand-electronics .lc-card__price {
    font-size: 13px !important;
    text-align: center !important;
    padding: 0 8px 8px !important;
    margin: 0 !important;
  }

  html body.brand-formommy .lc-card__info,
  html body.brand-electronics .lc-card__info {
    width: 100% !important;
    overflow: hidden !important;
    text-align: center !important;
    padding: 0 !important;
  }

  /* Collection hero title wrapping */
  html body.brand-formommy .lc-hero h1,
  html body.brand-formommy .lc-hero-title {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    padding: 0 16px !important;
    font-size: clamp(32px, 9vw, 56px) !important;
  }
}

/* --- 12.2 Collection Grid - Mushroom Plenty (single column, centered) ---
 * Purpose: Single-column centered layout for mushroom products
 * Affects: .lc-grid, .lc-card on mushroom collection
 * Brand: mushroom
 * Added: 2026-05-05
 */
html body.brand-mushroom .lc-grid {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 40px !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

html body.brand-mushroom .lc-card {
  width: 100% !important;
  max-width: 380px !important;
  margin: 0 auto !important;
}

@media (max-width: 749px) {
  html body.brand-mushroom .lc-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    gap: 24px !important;
  }

  html body.brand-mushroom .lc-card {
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
  }
}

/* --- 12.3 Mushroom Product Page - Mobile Centering ---
 * REMOVED 2026-05-05: These rules had higher specificity (html body.brand-mushroom)
 * than the luxury-product.liquid inline CSS and were OVERRIDING the template's
 * carefully designed mobile layout, causing rightward shift and content cutoff.
 * The luxury template's own @media blocks now handle all mobile centering.
 */

/* --- 12.4 Shared - Collection Section Hero (Mobile) ---
 * Purpose: Prevent horizontal scroll, consistent hero padding
 * Affects: .pine-luxury-collection-section, .lc-hero
 * Brand: all
 * Added: 2026-05-05
 */
@media (max-width: 749px) {
  html body .pine-luxury-collection-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  html body .pine-luxury-collection-section .lc-hero {
    padding: 40px 16px 20px !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Prevent horizontal scroll on brand pages */
  html body.brand-formommy,
  html body.brand-electronics,

  html body.brand-formommy main,
  html body.brand-electronics main,
}

/* === [SECTION 13] DAWN THEME COMPATIBILITY FIXES === */

/* --- 13.1 Product Visibility Fix ---
 * Purpose: Fix Dawn scroll-trigger + custom fadeIn leaving products invisible
 * Root cause: animation never completes
 * Added: 2026-04-28
 */
/* ==========================================================
   MASTER FIX: Product visibility across all pages
   Root cause: Dawn scroll-trigger animations + custom fadeIn
   animation on .shopify-section never complete, leaving all
   product grids and media invisible.
   Added: April 28, 2026
   ========================================================== */

/* --- 1. Kill broken scroll-trigger system --- */
.scroll-trigger,
.scroll-trigger.animate--slide-in,
.scroll-trigger.animate--fade-in,
.scroll-trigger--offscreen {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* --- 2. Fix ALL shopify-section fadeIn + overflow --- */
/* The custom fadeIn animation on .shopify-section doesn't complete,
   leaving sections at partial opacity. Override globally. */
.shopify-section.section {
  opacity: 1 !important;
  animation-name: none !important;
  overflow: visible !important;
}

/* Keep header and footer overflow hidden (intentional) */
.shopify-section-header,
#shopify-section-header {
  overflow: hidden !important;
}

.shopify-section-group-footer-group {
  opacity: 1 !important;
  animation-name: none !important;
}

/* --- 3. Fix product grid item sizing --- */
#product-grid .grid__item,
.product-grid .grid__item,
ul.grid.product-grid li.grid__item {
  max-width: 100% !important;
  width: 100% !important;
}

/* Collection container must not clip products */
.product-grid-container,
.collection.page-width {
  overflow: visible !important;
}

/* --- 4. Product page: media gallery visible --- */
.product__media-item,
li.product__media-item {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.product__media-wrapper,
.product__media-list {
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
}

/* Ensure product section not clipped */
.product, .product-section {
  overflow: visible !important;
}

/* Product media container - no white bg on dark theme */
.product__media-container,
.product .media-gallery,
.product__media-wrapper .slider {
  background: transparent !important;
}

/* --- 5. Variant buttons: dark-theme friendly --- */
.product-form__input label,
.variant-input label,
fieldset.product-form__input label {
  background-color: transparent !important;
  color: var(--cream, #F5F0E8) !important;
  border-color: rgba(245, 240, 232, 0.35) !important;
}

.product-form__input input[type="radio"]:checked + label,
.variant-input input:checked + label {
  background-color: var(--cream, #F5F0E8) !important;
  color: var(--dark, #1a1a1a) !important;
  border-color: var(--cream, #F5F0E8) !important;
}

/* ForMommy - light bg context */
.brand-formommy .product-form__input label,
.brand-formommy .variant-input label {
  color: var(--brand-text, #3B2314) !important;
  border-color: rgba(59, 35, 20, 0.35) !important;
}

.brand-formommy .product-form__input input[type="radio"]:checked + label {
  background-color: var(--brand-text, #3B2314) !important;
  color: #F5F0E8 !important;
}

/* Quantity selector */
.quantity {
  background-color: transparent !important;
  border-color: rgba(245, 240, 232, 0.35) !important;
  color: inherit !important;
}

.quantity__button, .quantity__input {
  color: inherit !important;
  background: transparent !important;
}

.brand-formommy .quantity {
  border-color: rgba(59, 35, 20, 0.35) !important;
}

/* --- 6. Badge layout --- */
.badge-wrapper {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-bottom: 8px !important;
}

.badge-wrapper .badge {
  position: relative !important;
}

/* --- 7. Product card styling --- */
.card-wrapper .card,
.card--standard .card__inner,
.card--card .card__inner,
.card__content {
  background: transparent !important;
}




/* --- 13.2 Collection Hero Padding Fix --- */
/* --- V2-2: Collection hero - slash the padding --- */
/* Dawn hero has double-nested padding: 100px top on both outer+inner */
.collection-hero {
  padding: clamp(36px, 5vw, 60px) clamp(24px, 5vw, 80px) clamp(20px, 3vw, 36px) !important;
}

.collection-hero__inner {
  padding: 0 !important;
  min-height: auto !important;
}

.collection-hero__text-wrapper {
  padding: 0 !important;
}

/* Hero title - smaller on collection pages */
.collection-hero__title {
  font-size: clamp(2rem, 5vw, 4rem) !important;
  margin-bottom: 12px !important;
}

.collection-hero__description {
  font-size: 2.4rem !important;
  margin-bottom: 0 !important;
  max-width: 50ch !important;
}

/* --- 13.3 Section Padding Fix --- */
/* --- V3-1: Kill section wrapper padding on collection banner --- */
/* Dawn adds 160px top+bottom padding to .shopify-section.section */
[id*="__banner"].shopify-section.section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Also reduce padding on the product-grid section wrapper */
[id*="__product-grid"].shopify-section.section {
  padding-top: 0 !important;
  padding-bottom: 40px !important;
}

/* Generic: all collection template sections should have minimal padding */
.shopify-section.section {
  /* Only override sections that aren't on homepage */
}

/* --- V3-2: Header visible on top (was behind hero) --- */
/* Ensure header shows above everything */
#shopify-section-header,
.shopify-section-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

/* --- 13.4 Product Media Gallery Fix (V4+V5) ---
 * Purpose: Fix product images collapsing to 0px / hidden by modal-opener
 * Root cause: display:grid on slider breaks Dawn's padding-top system
 * Solution: flex + auto height, show modal-opener, hide only zoom icon
 * Added: 2026-04-28
 */
/* ==========================================================
   PTG MASTER FIX V4 - April 28, 2026
   Fixes product media gallery collapsing to 0px height.
   Root cause: display:grid on slider breaks Dawn's padding-top
   aspect ratio system. Solution: use flex + auto height.
   ========================================================== */

/* --- V4-1: Product media list - use flex, not grid --- */
.product__media-list,
.product__media-list.slider,
.product__media-list.slider--mobile,
.product__media-list[data-slider] {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Override any grid-template-rows: 0px 0px */
.product__media-list {
  grid-template-rows: unset !important;
  grid-template-columns: unset !important;
}

/* Media items: show first 2, proper sizing */
.product__media-item {
  width: 100% !important;
  height: auto !important;
  min-height: 200px !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  display: block !important;
  scroll-snap-align: unset !important;
}

/* First two items visible */
.product__media-item:nth-child(1),
.product__media-item:nth-child(2) {
  display: block !important;
}

/* Hide 3rd and beyond */
.product__media-item:nth-child(n+3) {
  display: none !important;
}

/* The .media container inside - must have proper height */
.product__media-item .media,
.product__media-item .media--transparent,
.product__media-item .product-media-container {
  width: 100% !important;
  height: auto !important;
  min-height: 300px !important;
  overflow: visible !important;
  position: relative !important;
}

/* Images: ensure they render at natural size */
.product__media-item img,
.product__media-item .media img {
  width: 100% !important;
  height: auto !important;
  max-height: 700px !important;
  object-fit: contain !important;
  display: block !important;
  position: relative !important;
}

/* --- V4-2: Product page section padding fix --- */
/* Dawn wraps product in shopify-section with huge padding */
[id*="__main"].shopify-section.section,
[id*="main-product"].shopify-section.section {
  padding-top: 20px !important;
  padding-bottom: 40px !important;
}

/* --- V4-3: Product grid 2-col layout on desktop --- */
@media (min-width: 990px) {
  .product.grid.grid--2-col-tablet {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(40px, 5vw, 80px) !important;
    align-items: start !important;
  }

  .product__media-wrapper {
    position: sticky !important;
    top: 80px !important;
    height: fit-content !important;
  }
}

/* --- V4-4: Override old v1 grid rules that broke things --- */
/* Remove the old grid override from v1 that set grid on media list */
.product__media-list.slider .slider__slide {
  scroll-snap-align: unset !important;
  flex: 0 0 auto !important;
  min-width: unset !important;
  width: 100% !important;
}

/* --- V4-5: Quantity selector white bg fix on ForMommy --- */
.brand-formommy .quantity,
.brand-formommy quantity-input,
.brand-formommy .quantity__input {
  background: transparent !important;
  background-color: transparent !important;
  border-color: var(--brand-line-2, rgba(44, 24, 16, .18)) !important;
  color: var(--brand-text, #2C1810) !important;
}

.brand-formommy .quantity__button {
  color: var(--brand-text, #2C1810) !important;
}



/* ==========================================================
   PTG MASTER FIX V5 - April 28, 2026
   Fixes images hidden by modal-opener being display:none.
   The product images live INSIDE modal-opener elements.
   ========================================================== */

/* --- V5-1: UNDO hiding modal-opener - images are inside it! --- */
.product__modal-opener,
.product__modal-opener--image,
modal-opener.product__modal-opener {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  position: relative !important;
  pointer-events: auto !important;
}

/* Only hide the zoom/expand icon button inside the opener */
.product__modal-opener .product__media-icon,
.product__modal-opener [data-media-id] > button,
.product__modal-opener > button.product__media-toggle {
  display: none !important;
}

/* --- V5-2: Fix the image and media container inside opener --- */
.product__modal-opener .media,
.product__modal-opener .media--transparent {
  visibility: visible !important;
  width: 100% !important;
  height: auto !important;
  min-height: 300px !important;
  overflow: visible !important;
}

.product__modal-opener img,
.product__modal-opener .media img,
.product__media-item img.image-magnify-lightbox {
  visibility: visible !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 700px !important;
  object-fit: contain !important;
  position: relative !important;
  opacity: 1 !important;
}

/* --- V5-3: Ensure media container uses proper aspect ratio --- */
/* Dawn uses padding-top trick. Make it work with visible overflow */
.product__media-item .media--transparent {
  padding-top: 0 !important;
  height: auto !important;
  min-height: unset !important;
}

/* Let the image determine height naturally */
.product__media-item .media--transparent img {
  position: relative !important;
  top: auto !important;
  left: auto !important;
}



/* === [SECTION 14] ANIMATIONS & TRANSITIONS === */

/* ---- SUBTLE SCROLL-IN ---- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.shopify-section { animation: fadeIn 0.9s var(--ease) both; }

@supports (animation-timeline: scroll()) {
  .shopify-section {
    animation: fadeIn 0.9s var(--ease) both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}



/* ============================================================ */
/* NUCLEAR MOBILE FIX: .pl-presence grid centering               */
/* Added 2026-05-05 - triple-redundant with luxury-product.liquid */
/* ============================================================ */
@media (max-width: 1024px) {
  html body .pine-luxury-section .pl-presence,
  html body [class*="pine-luxury"] .pl-presence,
  html body .pl-presence {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  html body .pine-luxury-section .pl-presence-content,
  html body [class*="pine-luxury"] .pl-presence-content,
  html body .pl-presence-content {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  html body .pine-luxury-section .pl-presence-image,
  html body [class*="pine-luxury"] .pl-presence-image,
  html body .pl-presence-image {
    margin: 0 auto !important;
    max-width: 85% !important;
  }
  html body .pine-luxury-section .pl-features,
  html body [class*="pine-luxury"] .pl-features,
  html body .pl-features {
    width: auto !important;
    max-width: 400px !important;
    margin: 0 auto 40px auto !important;
  }
}
/* END NUCLEAR MOBILE FIX */