/** Shopify CDN: Minification failed

Line 2155:27 Unexpected "*"
Line 2161:35 Unexpected "*"

**/
/* ============================================================
     OIL SLICK PREMIUM - Creative Overhaul
     Dark theme refinements that settings_data.json can't handle
     ============================================================ */

  /* --- ROOT VARIABLES --- */
  :root {
    --osp-bg-primary: #0D0D0D;
    --osp-bg-secondary: #121212;
    --osp-bg-card: #272727;
    --osp-bg-elevated: #303030;
    --osp-text-primary: #F5F5F0;
    --osp-text-secondary: #B0B0AC;
    --osp-text-muted: #888883;
    --osp-accent: #00B4A6;
    --osp-accent-hover: #2DD4BF;
    --osp-accent-gold: #D4A853;
    --osp-error: #E85D4A;
    --osp-border: #383838;
    --osp-radius: 4px;
    --osp-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* --- GLOBAL DARK BACKGROUND ENFORCEMENT --- */
  body,
  .page-content,
  .shopify-section,
  .index-sections,
  #shopify-section-header,
  .main-content {
    background-color: var(--osp-bg-primary) !important;
  }

  /* Alternating section backgrounds for depth */
  .shopify-section:nth-child(even) {
    background-color: var(--osp-bg-secondary) !important;
  }

  /* --- TYPOGRAPHY REFINEMENTS --- */
  /* Headings: mixed case with premium letter-spacing */
  h1, h2, h3, .headline,
  .section_title,
  .collection_title,
  .featured_text .title {
    text-transform: none !important;
    letter-spacing: 0.08em;
    font-weight: 300;
    color: var(--osp-text-primary);
  }

  /* Only the brand name stays uppercase */
  .logo__text,
  .mobile_logo__text {
    text-transform: uppercase !important;
    letter-spacing: 0.15em;
  }

  /* Body text - warmer, more readable */
  body, p, li, td, th, span, a {
    color: var(--osp-text-primary);
  }

  .subtitle, .rte p, .featured_text .rte {
    color: var(--osp-text-secondary);
    line-height: 1.7;
  }

  /* --- HERO / IMAGE OVERLAY REFINEMENTS --- */
  .banner--image-with-text-overlay .caption {
    background: none !important;
  }

  .banner--image-with-text-overlay .caption .pretext {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.85rem;
    color: var(--osp-accent) !important;
    font-weight: 400;
    margin-bottom: 0.5rem;
  }

  .banner--image-with-text-overlay .caption .headline {
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
    font-weight: 300 !important;
    letter-spacing: 0.04em;
    line-height: 1.15;
    text-transform: none !important;
    color: #FFFFFF !important;
    text-shadow: 0 2px 20px rgba(0,0,0,0.5);
  }

  .banner--image-with-text-overlay .caption .subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem) !important;
    font-weight: 300;
    color: rgba(255,255,255,0.85) !important;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 10px rgba(0,0,0,0.4);
    margin-top: 0.75rem;
  }

  /* Dark gradient overlay on hero images for text readability */
  .banner--image-with-text-overlay .banner__image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(0,0,0,0.7) 0%,
      rgba(0,0,0,0.4) 40%,
      rgba(0,0,0,0.15) 100%
    );
    z-index: 1;
    pointer-events: none;
  }

  .banner--image-with-text-overlay .caption {
    position: relative;
    z-index: 2;
  }

  /* --- BUTTONS - Premium feel --- */
  .action_button,
  .action_button--secondary,
  a.action_button,
  .shopify-payment-button button,
  button.action_button {
    border-radius: var(--osp-radius) !important;
    transition: all var(--osp-transition) !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em;
    padding: 14px 32px !important;
    text-transform: uppercase;
    font-size: 0.8rem !important;
    border: 2px solid transparent !important;
  }

  /* Primary button */
  .action_button:not(.action_button--secondary) {
    background-color: var(--osp-accent) !important;
    color: var(--osp-bg-primary) !important;
    border-color: var(--osp-accent) !important;
  }

  .action_button:not(.action_button--secondary):hover {
    background-color: var(--osp-accent-hover) !important;
    border-color: var(--osp-accent-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0, 180, 166, 0.3);
  }

  /* Ghost / secondary button */
  .action_button--secondary,
  .banner .action_button--secondary {
    background-color: transparent !important;
    color: var(--osp-text-primary) !important;
    border: 2px solid rgba(245,245,240,0.3) !important;
  }

  .action_button--secondary:hover {
    border-color: var(--osp-accent) !important;
    color: var(--osp-accent) !important;
    transform: translateY(-1px);
  }

  /* --- PRODUCT CARDS - Softened dark cards for white product images --- */
  .product-wrap,
  .thumbnail,
  .product_image {
    background-color: var(--osp-bg-card) !important;
    border-radius: 6px;
    overflow: hidden;
    transition: all var(--osp-transition);
    border: 1px solid var(--osp-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }

  .product-wrap:hover,
  .thumbnail:hover {
    border-color: var(--osp-accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  }

  .product-wrap .product-details,
  .thumbnail .product-details {
    padding: 12px 16px;
    background: var(--osp-bg-card);
  }

  .product-wrap .product-details a,
  .thumbnail .product-details .title {
    color: var(--osp-text-primary) !important;
    font-weight: 400;
    letter-spacing: 0.02em;
  }

  .product-wrap .product-details .price,
  .thumbnail .price {
    color: var(--osp-accent) !important;
    font-weight: 500;
  }

  /* --- COLLECTION GRID - Dark treatment --- */
  .collection-list .collection-item,
  .featured-promotions .feature_image {
    border-radius: 6px;
    overflow: hidden;
    transition: all var(--osp-transition);
  }

  .collection-list .collection-item:hover,
  .featured-promotions .feature_image:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  }

  /* Collection overlay text */
  .collection-list .collection-item .collection-info,
  .featured-promotions .feature_image .feature_overlay,
  .featured-promotions .feature-overlay {
    background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 60%) !important;
  }

  /* --- FEATURED TEXT / BRAND STORY SECTION --- */
  .featured_text {
    padding: 4rem 2rem !important;
  }

  .featured_text .title {
    font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
    color: var(--osp-text-primary) !important;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
  }

  .featured_text .rte {
    max-width: 640px;
    margin: 0 auto;
    color: var(--osp-text-secondary) !important;
    font-size: 1.05rem;
    line-height: 1.8;
  }

  /* --- TESTIMONIALS - Dark moody cards --- */
  .testimonial-block,
  .testimonial_slide {
    background-color: var(--osp-bg-card) !important;
    border-radius: 8px;
    border: 1px solid var(--osp-border);
    padding: 2rem !important;
  }

  .testimonial-block .testimonial_text,
  .testimonial_slide .testimonial_text {
    color: var(--osp-text-secondary) !important;
    font-style: italic;
    line-height: 1.7;
  }

  .testimonial-block .testimonial_author,
  .testimonial_slide .testimonial_author {
    color: var(--osp-accent) !important;
    font-weight: 500;
  }

  /* Star ratings */
  .testimonial-block .star,
  .testimonial_slide .star {
    color: var(--osp-accent-gold) !important;
  }

  /* --- NEWSLETTER SECTION --- */
  .newsletter-section,
  .shopify-section--newsletter {
    background-color: var(--osp-bg-secondary) !important;
    padding: 3.5rem 2rem !important;
    border-top: 1px solid var(--osp-border);
    border-bottom: 1px solid var(--osp-border);
  }

  .newsletter-section input[type="email"],
  .newsletter-section input[type="text"] {
    background-color: var(--osp-bg-primary) !important;
    border: 1px solid var(--osp-border) !important;
    color: var(--osp-text-primary) !important;
    border-radius: var(--osp-radius);
    padding: 12px 16px;
  }

  .newsletter-section input::placeholder {
    color: var(--osp-text-muted) !important;
  }

  /* --- BLOG SECTION --- */
  .blog-posts .article,
  .blog-posts .blog_card {
    background-color: var(--osp-bg-card) !important;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--osp-border);
    transition: all var(--osp-transition);
  }

  .blog-posts .article:hover,
  .blog-posts .blog_card:hover {
    border-color: var(--osp-accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.3);
  }

  /* --- FOOTER - Deep dark --- */
  .footer,
  #shopify-section-footer,
  .sub-footer {
    background-color: var(--osp-bg-primary) !important;
    border-top: 1px solid var(--osp-border);
  }

  .footer a, .footer p, .footer li {
    color: var(--osp-text-secondary) !important;
  }

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

  .footer h4, .footer h5, .footer .footer_title {
    color: var(--osp-text-primary) !important;
    text-transform: none !important;
    letter-spacing: 0.05em;
  }

  /* --- HEADER / TOP BAR REFINEMENTS --- */
  .top-bar {
    border-bottom: 1px solid var(--osp-border);
  }

  .top-bar a:hover {
    color: var(--osp-accent) !important;
  }

  /* Promo bar styling */
  .promo_banner,
  .announcement-bar {
    background-color: var(--osp-bg-secondary) !important;
    border-bottom: 1px solid var(--osp-border);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
  }

  .promo_banner a {
    color: var(--osp-accent) !important;
  }

  /* --- MOBILE REFINEMENTS --- */
  @media screen and (max-width: 798px) {
    .banner--image-with-text-overlay .caption .headline {
      font-size: 1.8rem !important;
      line-height: 1.2;
    }

    .banner--image-with-text-overlay .caption .pretext {
      font-size: 0.75rem;
    }

    .banner--image-with-text-overlay .caption .subtitle {
      font-size: 0.95rem !important;
    }

    .action_button,
    a.action_button {
      padding: 12px 24px !important;
      font-size: 0.75rem !important;
    }

    .featured_text {
      padding: 2.5rem 1.5rem !important;
    }

    .product-wrap,
    .thumbnail {
      margin-bottom: 1rem;
    }

    /* Ensure hero overlay is stronger on mobile */
    .banner--image-with-text-overlay .banner__image-wrapper::after {
      background: linear-gradient(
        180deg,
        rgba(0,0,0,0.3) 0%,
        rgba(0,0,0,0.7) 50%,
        rgba(0,0,0,0.85) 100%
      );
    }
  }

  /* --- SECTION DIVIDERS - Subtle breathing room --- */
  .shopify-section {
    border-bottom: none !important;
  }

  .index-sections .shopify-section + .shopify-section {
    margin-top: 0;
    padding-top: 2rem;
  }

  /* --- SCROLLBAR - Dark theme --- */
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    background: var(--osp-bg-primary);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--osp-border);
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--osp-accent);
  }

  /* --- SEARCH / DROPDOWN - Dark --- */
  .search-form input,
  .search-results,
  select {
    background-color: var(--osp-bg-card) !important;
    color: var(--osp-text-primary) !important;
    border-color: var(--osp-border) !important;
  }

  /* --- IMAGE TEXT BLOCKS (alternating layout) --- */
  .image-with-text__content {
    background-color: var(--osp-bg-card) !important;
    padding: 2rem !important;
    border-radius: 6px;
  }

  /* --- BREADCRUMBS --- */
  .breadcrumb_text a,
  .breadcrumb_text span {
    color: var(--osp-text-muted) !important;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
  }

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

  /* --- SALE/NEW BADGES --- */
  .sale_banner,
  .new_banner {
    border-radius: var(--osp-radius);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    font-weight: 600;
  }

  /* --- SMOOTH TRANSITIONS ON ALL INTERACTIVE ELEMENTS --- */
  a, button, input, .product-wrap, .thumbnail,
  .collection-item, .feature_image, .blog_card {
    transition: all var(--osp-transition);
  }

  /* --- SELECTION COLOR --- */
  ::selection {
    background: var(--osp-accent);
    color: var(--osp-bg-primary);
  }

  /* --- GOLD ACCENT FOR SPECIAL ELEMENTS --- */
  .featured_text .action_button {
    background-color: transparent !important;
    color: var(--osp-accent-gold) !important;
    border: 2px solid var(--osp-accent-gold) !important;
  }

  .featured_text .action_button:hover {
    background-color: var(--osp-accent-gold) !important;
    color: var(--osp-bg-primary) !important;
  }

  /* --- MINICART DARK --- */
  .mini-cart,
  .cart_content,
  .cart-drawer {
    background-color: var(--osp-bg-card) !important;
    border-color: var(--osp-border) !important;
  }

  .mini-cart a, .cart_content a {
    color: var(--osp-text-primary) !important;
  }

  /* --- LOADING/PLACEHOLDER STATES --- */
  .placeholder-svg {
    background-color: var(--osp-bg-secondary);
    fill: var(--osp-border);
  }

  /* ============================================================
     CRITICAL FIX: Force light text on dark backgrounds
     The Turbo theme uses inline styles from settings that aren't
     picking up the new colors in some section templates.
     ============================================================ */

  /* Section titles - force off-white on all dark sections */
  .shopify-section h2.title,
  .shopify-section h1.title,
  .shopify-section .section_title,
  .shopify-section .homepage_content h2,
  .featured_collection .title,
  .collection-list-section .title,
  .featured_text h2.title,
  .index-sections h2,
  .index-sections h3,
  .index-sections .title {
    color: #F5F5F0 !important;
  }

  /* Featured text section - body copy */
  .featured_text .rte,
  .featured_text .rte p,
  .featured_text p,
  .shopify-section .rte p,
  .shopify-section .featured_text p {
    color: #B0B0AC !important;
  }

  /* Product titles and prices on product cards */
  .product-list .product .product-details .product-details__title,
  .product-list .product .product-details a,
  .product_name a,
  .product-details a,
  .thumbnail .product-details a,
  .product-wrap .product-details a,
  .product-wrap a.product-title {
    color: #F5F5F0 !important;
  }

  .product-list .product .product-details .price,
  .product-details .price,
  .thumbnail .price,
  .thumbnail .price span,
  .product-wrap .price,
  .product-wrap .price span,
  .current_price,
  .money {
    color: #00B4A6 !important;
  }

  .was_price, .compare_at_price {
    color: #888883 !important;
  }

  /* Collection list items text */
  .collection-list .collection-info h3,
  .collection-list .collection-info a,
  .collection-list .collection-title,
  .list-collections .collection-title,
  .thumbnail-overlay .collection-info span,
  .thumbnail-overlay .collection-info a {
    color: #F5F5F0 !important;
  }

  /* Image-text section blocks */
  .image-with-text__content h3,
  .image-with-text__content h4,
  .image-with-text__content p,
  .image-with-text__content a,
  .image-text-block .title,
  .image-text-block .rte,
  .image-text-block .rte p {
    color: #F5F5F0 !important;
  }
  .image-text-block .rte p,
  .image-with-text__content p {
    color: #B0B0AC !important;
  }

  /* Empty cart text */
  .empty_cart {
    color: #B0B0AC !important;
  }

  /* Blog post cards */
  .blog-posts .article h3,
  .blog-posts .article h3 a,
  .blog-posts .blog_card h3,
  .blog-posts .blog_card h3 a,
  .blog-posts .article .rte,
  .blog-posts .article p,
  .blog-posts .blog_card p {
    color: #F5F5F0 !important;
  }
  .blog-posts .article .rte p,
  .blog-posts .blog_card p.excerpt {
    color: #B0B0AC !important;
  }
  .blog-posts .article .meta,
  .blog-posts .article .blog_meta {
    color: #888883 !important;
  }

  /* Testimonials */
  .testimonial-section h2.title,
  .testimonial-section .title {
    color: #F5F5F0 !important;
  }
  .testimonial_text, .testimonial_text p {
    color: #B0B0AC !important;
  }
  .testimonial_author, .author_name {
    color: #00B4A6 !important;
  }

  /* Newsletter section */
  .newsletter-section h2,
  .newsletter-section .title,
  .newsletter_title {
    color: #F5F5F0 !important;
  }
  .newsletter-section p,
  .newsletter-section .rte p {
    color: #B0B0AC !important;
  }

  /* Footer text overrides */
  .footer h4, .footer h5,
  .footer .footer_title,
  #shopify-section-footer h4,
  #shopify-section-footer h5 {
    color: #F5F5F0 !important;
    text-transform: none !important;
    letter-spacing: 0.05em;
  }
  .footer a, .footer p, .footer li,
  #shopify-section-footer a,
  #shopify-section-footer p,
  #shopify-section-footer li {
    color: #B0B0AC !important;
  }
  .footer a:hover,
  #shopify-section-footer a:hover {
    color: #00B4A6 !important;
  }

  /* Sub-footer */
  .sub-footer, .sub-footer a, .sub-footer p, .sub-footer span {
    color: #888883 !important;
  }
  .sub-footer a:hover {
    color: #00B4A6 !important;
  }

  /* Featured promotions text overlays */
  .featured-promotions .feature_image .feature_text h4,
  .featured-promotions .feature_image .feature_text p,
  .featured-promotions .feature_image .feature_text a,
  .featured-promotions .feature_overlay h4,
  .featured-promotions .feature_overlay p,
  .featured-promotions .feature-overlay h2,
  .featured-promotions .feature-overlay .button {
    color: #F5F5F0 !important;
  }

  /* ============================================================
     FEATURED PROMOTIONS — Collection tile overlay refinements
     Hide description paragraph, keep title + CTA button.
     Consistent scrim for contrast across all tiles.
     ============================================================ */

  /* Hide the description text between title and CTA button */
  .featured-promotions .feature-overlay .description,
  .featured-promotions-section .feature-overlay .description {
    display: none !important;
  }

  /* Tile container — border-radius + hover lift */
  .featured-promotions .feature-section {
    border-radius: 6px;
    overflow: hidden;
    transition: all var(--osp-transition);
  }
  .featured-promotions .feature-section:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  }
  .featured-promotions .feature-inner {
    border-radius: 6px;
    overflow: hidden;
  }

  /* Scrim overlay — consistent dark gradient from bottom */
  .featured-promotions .feature-overlay {
    background: linear-gradient(
      0deg,
      rgba(13, 13, 13, 0.85) 0%,
      rgba(13, 13, 13, 0.45) 50%,
      transparent 100%
    ) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 1.5rem !important;
  }

  /* Title styling — prominent, readable */
  .featured-promotions .feature-overlay h2.title,
  .featured-promotions .feature-overlay .title {
    color: var(--osp-text-primary) !important;
    font-size: clamp(1.1rem, 2.5vw, 1.6rem) !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em;
    text-transform: none !important;
    margin-bottom: 0.75rem !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  }

  /* CTA button — brand gold outline style */
  .featured-promotions .feature-overlay .button {
    display: inline-block !important;
    background-color: transparent !important;
    color: var(--osp-accent-gold) !important;
    border: 2px solid var(--osp-accent-gold) !important;
    padding: 0.55rem 1.4rem !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    border-radius: var(--osp-radius) !important;
    transition: all var(--osp-transition) !important;
    text-shadow: none !important;
    width: auto !important;
    text-align: center;
  }
  .featured-promotions .feature-overlay .button:hover,
  .featured-promotions .feature-section:hover .feature-overlay .button {
    background-color: var(--osp-accent-gold) !important;
    color: var(--osp-bg-primary) !important;
  }

  /* Feature-details wrapper — tighten spacing now that description is gone */
  .featured-promotions .feature-overlay .feature-details {
    margin-top: 0 !important;
  }

  /* Mobile adjustments for promo tiles */
  @media only screen and (max-width: 768px) {
    .featured-promotions .feature-overlay {
      padding: 1rem !important;
    }
    .featured-promotions .feature-overlay h2.title,
    .featured-promotions .feature-overlay .title {
      font-size: 1rem !important;
      margin-bottom: 0.5rem !important;
    }
    .featured-promotions .feature-overlay .button {
      font-size: 0.7rem !important;
      padding: 0.4rem 1rem !important;
    }
  }

  /* Dividers/borders that may still be light */
  hr, .section-divider {
    border-color: #383838 !important;
  }

  /* Fix any remaining white/light backgrounds on page content containers */
  .page-content,
  .content,
  .homepage-content,
  .index,
  #pagecontent,
  .container,
  .main-content,
  .site-main {
    background-color: transparent !important;
  }

  /* Product grid backgrounds */
  .product-list,
  .collection-matrix,
  .product-grid {
    background-color: transparent !important;
  }

  /* Fix search bar in header */
  .header-search input,
  #search input[type="text"] {
    background-color: #272727 !important;
    border-color: #383838 !important;
    color: #F5F5F0 !important;
  }

  /* "Learn Our Story" gold button in featured text */
  .featured_text .action_button,
  .featured_text a.action_button {
    background-color: transparent !important;
    color: #D4A853 !important;
    border: 2px solid #D4A853 !important;
    border-radius: 4px !important;
  }
  .featured_text .action_button:hover,
  .featured_text a.action_button:hover {
    background-color: #D4A853 !important;
    color: #0D0D0D !important;
  }


  /* ============================================================
     FIX: Remaining white/light elements
     ============================================================ */

  /* Image-text blocks (featured-link--half) */
  .featured-link--half,
  .featured-link--half .featured-link--wrap,
  .block--it-block-1,
  .block--it-block-2,
  .block--it-block-3,
  .image-with-text-section .featured-link--half {
    background-color: #272727 !important;
  }
  .featured-link--half .featured-link--half__text,
  .featured-link--half h3,
  .featured-link--half p,
  .featured-link--half .rte,
  .featured-link--half .rte p {
    color: #F5F5F0 !important;
  }
  .featured-link--half .rte p {
    color: #B0B0AC !important;
  }

  /* Newsletter section background fix */
  .newsletter_section,
  .newsletter-both-names--false,
  .newsletter-both-names--true {
    background-color: #121212 !important;
  }
  .newsletter_section input[type="email"],
  .newsletter_section input[type="text"] {
    background-color: #0D0D0D !important;
    border: 1px solid #383838 !important;
    color: #F5F5F0 !important;
  }
  .newsletter_section label {
    color: #B0B0AC !important;
  }

  /* Welcome popup dark treatment */
  #welcome-discount-popup {
    background-color: #272727 !important;
    border: 1px solid #383838 !important;
  }
  #welcome-discount-popup h2,
  #welcome-discount-popup h3,
  #welcome-discount-popup p,
  #welcome-discount-popup span {
    color: #F5F5F0 !important;
  }

  /* Ensure ALL section wrappers are dark */
  .shopify-section .section,
  .shopify-section .container,
  .shopify-section .wrapper,
  .shopify-section .page-width,
  .shopify-section .featured_collection,
  .shopify-section .featured-collection-section,
  .shopify-section .headline-section,
  .shopify-section .collection-list-section,
  .shopify-section .blog-section {
    background-color: transparent !important;
  }

  /* Global catch-all: force dark on the actual background layer */
  html {
    background-color: #0D0D0D !important;
  }


  /* ============================================================
     TWO-PATH CUSTOMER JOURNEY SELECTOR
     Big side-by-side cards: Extraction vs Smoke Shop
     ============================================================ */

  /* The image-text section right after the hero - make it prominent */
  .shopify-section .image-with-text-section {
    padding: 3rem 2rem !important;
  }

  /* Two-column layout for the path selector */
  .image-with-text-section .featured-link--half {
    background-color: #272727 !important;
    border: 1px solid #383838 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-bottom: 1.5rem;
  }

  .image-with-text-section .featured-link--half:hover {
    border-color: #00B4A6 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0, 180, 166, 0.15) !important;
  }

  /* Path selector titles - big, bold, clear */
  .image-with-text-section .featured-link--half h3,
  .image-with-text-section .featured-link--half .title {
    font-size: 1.8rem !important;
    font-weight: 300 !important;
    letter-spacing: 0.05em !important;
    color: #F5F5F0 !important;
    text-transform: none !important;
    margin-bottom: 0.75rem !important;
  }

  /* Path selector body text */
  .image-with-text-section .featured-link--half .rte p,
  .image-with-text-section .featured-link--half p {
    color: #B0B0AC !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1rem !important;
  }

  /* Path selector CTAs - prominent teal buttons */
  .image-with-text-section .featured-link--half .action_button {
    background-color: #00B4A6 !important;
    color: #0D0D0D !important;
    border: 2px solid #00B4A6 !important;
    font-weight: 700 !important;
    padding: 14px 28px !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.1em !important;
    display: inline-block !important;
  }

  .image-with-text-section .featured-link--half .action_button:hover {
    background-color: #2DD4BF !important;
    border-color: #2DD4BF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 20px rgba(0, 180, 166, 0.3) !important;
  }

  /* Make the text content area breathe */
  .image-with-text-section .featured-link--half__text {
    padding: 2rem !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Mobile: stack the two cards vertically */
  @media screen and (max-width: 798px) {
    .image-with-text-section .featured-link--half h3,
    .image-with-text-section .featured-link--half .title {
      font-size: 1.4rem !important;
    }

    .image-with-text-section .featured-link--half .action_button {
      padding: 12px 24px !important;
      width: 100%;
      text-align: center;
    }
  }

  /* ============================================================
     BRAND STORY TEASER - Compact, premium feel
     ============================================================ */
  .featured_text {
    padding: 2.5rem 2rem !important;
  }
  
  /* "Read Our Story" button - ghost style with gold accent */
  .featured_text .action_button,
  .featured_text a.action_button {
    background-color: transparent !important;
    color: #D4A853 !important;
    border: 1px solid #D4A853 !important;
    border-radius: 4px !important;
    padding: 10px 24px !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.12em !important;
  }
  .featured_text .action_button:hover,
  .featured_text a.action_button:hover {
    background-color: #D4A853 !important;
    color: #0D0D0D !important;
  }



  /* ============================================================
     FIX: Announcement Bar - Scroll naturally, not sticky
     The promo_banner and top_bar scroll away with the page.
     Only the main navigation sticks to the top on scroll.
     ============================================================ */

  /* Desktop: Make only the main nav sticky */
  .main_nav_wrapper {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background-color: var(--osp-bg-primary) !important;
  }

  /* Ensure the header itself does NOT become fixed */
  .header,
  .header.header-fixed--false,
  .header.header-fixed--true {
    position: relative !important;
  }

  /* Mobile: header scrolls naturally */
  #header,
  #header.mobile_nav-fixed--false,
  #header.mobile_nav-fixed--true {
    position: relative !important;
  }

  /* Mobile: make the top bar (logo + hamburger + cart) sticky */
  #header .top_bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1001 !important;
    background-color: var(--osp-bg-primary) !important;
  }

  /* Promo banner - explicitly non-sticky, scrolls naturally */
  .promo_banner {
    position: relative !important;
  }


  /* ============================================================
     FIX: White Product Image Backgrounds on Dark Theme
     Adds dark framing around product images so white backgrounds
     don't clash with the #0D0D0D dark theme.
     ============================================================ */

  /* Product page - main gallery images: dark card frame */
  .product_gallery .gallery-cell {
    background-color: var(--osp-bg-card) !important;
    border-radius: 8px;
    border: 1px solid var(--osp-border);
  }

  .product_gallery .gallery-cell .image__container {
    background-color: var(--osp-bg-card) !important;
    border-radius: 6px;
    overflow: hidden;
  }

  /* Product gallery nav thumbnails (bottom slider) */
  .product_gallery_nav .gallery-cell {
    background-color: var(--osp-bg-card) !important;
    border: 1px solid var(--osp-border) !important;
    border-radius: 4px !important;
    overflow: hidden;
    padding: 2px;
  }

  .product_gallery_nav .gallery-cell img {
    border-radius: 3px;
  }

  .product_gallery_nav .gallery-cell.is-nav-selected {
    border-color: var(--osp-accent) !important;
  }

  /* Swatch / variant option images */
  .swatch_options .swatch_image,
  .swatch_options img,
  .product_form .swatch_image {
    background-color: var(--osp-bg-card) !important;
    border: 1px solid var(--osp-border) !important;
    border-radius: 4px !important;
  }

  .swatch_options .swatch_image:hover,
  .swatch_options .active .swatch_image {
    border-color: var(--osp-accent) !important;
  }

  /* Product grid card images - soften white-to-dark transition */
  .product-wrap .image__container,
  .thumbnail .image__container,
  .product_image .image__container {
    background-color: var(--osp-bg-card) !important;
    border-radius: 4px;
    overflow: hidden;
    /* Subtle inset vignette so white product photos don't end abruptly */
    box-shadow: inset 0 0 12px 2px rgba(0,0,0,0.12);
    position: relative;
  }

  /* Extra soft fade at image edges via pseudo-element */
  .product-wrap .image__container::after,
  .thumbnail .image__container::after,
  .product_image .image__container::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    box-shadow: inset 0 0 20px 6px rgba(0,0,0,0.08);
    pointer-events: none;
    z-index: 1;
  }

  /* Lightbox / popup images */
  .fancybox-content,
  .fancybox-slide--image {
    background-color: var(--osp-bg-secondary) !important;
  }


  /* ============================================================
     MOBILE HERO FIX v2 - April 2026
     Targets the REAL custom hero markup (.osp-hero) used by the
     image-with-text-overlay section on oilslickpad.com homepage.
     Structure: .osp-hero > .osp-hero__media > .image-element__wrap > img
                         > .osp-hero__panel.caption > .osp-hero__content
                           > .osp-hero__headline, .osp-hero__ctas > .osp-hero__btn
     Specificity bumped via .shopify-section prefix so these rules
     beat the section's own inline <style> block which also uses !important.
     ============================================================ */
  @media screen and (max-width: 768px) {

    /* Promote the hero section as positioning context and kill any
       max-height/overflow that would clip our absolute-positioned panel. */
    .shopify-section.image-with-text-overlay-section,
    .shopify-section .osp-hero,
    .shopify-section .osp-hero.banner,
    .shopify-section.image-with-text-overlay-section .osp-hero {
      position: relative !important;
      display: block !important;
      min-height: 65vh !important;
      height: 65vh !important;
      max-height: 65vh !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
      background: #0B0A09 !important;
    }

    /* Media wrapper MUST fill the hero (kill flex % sizing) */
    .shopify-section .osp-hero .osp-hero__media,
    .shopify-section.image-with-text-overlay-section .osp-hero .osp-hero__media {
      position: absolute !important;
      inset: 0 !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      height: 65vh !important;
      min-height: 65vh !important;
      flex: none !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    /* The aspect-ratio wrapper collapses the image - nuke it */
    .shopify-section .osp-hero .osp-hero__media .image-element__wrap,
    .shopify-section .osp-hero .osp-hero__media .image-element,
    .shopify-section.image-with-text-overlay-section .osp-hero .osp-hero__media .image-element__wrap {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 65vh !important;
      max-height: 65vh !important;
      aspect-ratio: auto !important;
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    /* Force the img itself to cover */
    .shopify-section .osp-hero .osp-hero__media img,
    .shopify-section .osp-hero .osp-hero__media picture,
    .shopify-section .osp-hero .osp-hero__media picture img,
    .shopify-section .osp-hero .osp-hero__media .image-element__wrap img,
    .shopify-section.image-with-text-overlay-section .osp-hero .osp-hero__media img {
      position: absolute !important;
      inset: 0 !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 65vh !important;
      max-height: 65vh !important;
      object-fit: cover !important;
      object-position: center center !important;
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    /* Panel overlays the bottom of the image with a dark gradient */
    .shopify-section .osp-hero .osp-hero__panel,
    .shopify-section .osp-hero .osp-hero__panel.caption,
    .shopify-section .osp-hero .caption.js-caption,
    .shopify-section.image-with-text-overlay-section .osp-hero .osp-hero__panel {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      top: auto !important;
      width: 100% !important;
      max-width: 100% !important;
      flex: none !important;
      height: auto !important;
      padding: 2rem 1.25rem 1.75rem 1.25rem !important;
      margin: 0 !important;
      background: linear-gradient(
        180deg,
        rgba(11,10,9,0) 0%,
        rgba(11,10,9,0.55) 35%,
        rgba(11,10,9,0.88) 75%,
        rgba(11,10,9,0.97) 100%
      ) !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      justify-content: flex-end !important;
      z-index: 5 !important;
      box-sizing: border-box !important;
      transform: none !important;
    }

    .shopify-section .osp-hero .osp-hero__content,
    .shopify-section .osp-hero .caption-content {
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
      background: transparent !important;
      text-align: left !important;
    }

    /* Eyebrow / headline sizing for mobile */
    .shopify-section .osp-hero .osp-hero__eyebrow,
    .shopify-section .osp-hero .pretext,
    .shopify-section .osp-hero .pretext p {
      font-size: 1.05rem !important;
      line-height: 1.25 !important;
      letter-spacing: 0.14em !important;
      text-transform: uppercase !important;
      font-weight: 700 !important;
      margin: 0 0 0.65rem 0 !important;
      color: #F29A3C !important;
      text-shadow: 0 2px 10px rgba(0,0,0,0.75), 0 0 2px rgba(0,0,0,0.6) !important;
    }

    .shopify-section .osp-hero .osp-hero__headline,
    .shopify-section .osp-hero .headline {
      font-size: clamp(1.75rem, 7.5vw, 2.25rem) !important;
      line-height: 1.08 !important;
      margin: 0 0 1.1rem 0 !important;
      color: #F5F1EA !important;
      text-shadow: 0 2px 12px rgba(0,0,0,0.55) !important;
    }

    .shopify-section .osp-hero .osp-hero__subtitle,
    .shopify-section .osp-hero .subtitle,
    .shopify-section .osp-hero .subtitle p {
      font-size: 0.9rem !important;
      line-height: 1.45 !important;
      margin: 0 0 0.85rem 0 !important;
      color: #E2DACB !important;
    }

    /* CTAs: stack full-width, contained in viewport */
    .shopify-section .osp-hero .osp-hero__ctas {
      display: flex !important;
      flex-direction: column !important;
      gap: 0.6rem !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      flex-wrap: nowrap !important;
      box-sizing: border-box !important;
    }

    .shopify-section .osp-hero .osp-hero__btn,
    .shopify-section .osp-hero .osp-hero__ctas .action_button,
    .shopify-section .osp-hero a.action_button {
      display: flex !important;
      width: 100% !important;
      max-width: 100% !important;
      min-height: 48px !important;
      padding: 14px 18px !important;
      font-size: 0.85rem !important;
      letter-spacing: 0.03em !important;
      text-align: center !important;
      justify-content: center !important;
      align-items: center !important;
      white-space: normal !important;
      line-height: 1.2 !important;
      box-sizing: border-box !important;
      margin: 0 !important;
    }

    /* No gap between hero and next section */
    .index-sections .shopify-section.image-with-text-overlay-section + .shopify-section,
    .index-sections .shopify-section + .shopify-section {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }

    /* Stop any horizontal overflow inside the hero */
    .shopify-section .osp-hero,
    .shopify-section .osp-hero * {
      max-width: 100vw !important;
    }
  }

  /* ============================================================
     PDP READABILITY FIX - April 2026
     Section headers and form labels were washed-out grey on the
     dark background, nearly invisible on product pages. Make PDP
     body headings + form labels pop in teal and ensure global
     heading color has a readable default across the whole site.
     Applies at ALL breakpoints (outside any media query).
     ============================================================ */

  /* --- 3. Global heading default: readable cream across the site --- */
  h1, h2, h3, h4, h5, h6 {
    color: #F5F5F0;
  }

  /* --- 1. PDP product TITLE: gold serif italic, larger, no underline --- */
  /* The product name is the primary heading on the PDP - sized up,
     no underline so it reads as the dominant element. */
  h1.product__title,
  h1.product-single__title,
  h1.product-meta__title,
  .product__title,
  .product-single__title,
  .product-meta__title,
  .product__name,
  .product-template h1,
  .product-single h1,
  .product__info h1,
  .product__info-container h1 {
    color: #D4A853 !important;
    font-family: var(--osp-serif, 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif) !important;
    font-weight: 500 !important;
    font-style: italic !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.1 !important;
    margin-top: 0 !important;
    margin-bottom: 0.75em !important;
  }

  /* --- 2. ALL PDP section headers + tab/accordion/cross-sell headers --- */
  /* Gold serif italic with thin gold underline - every section break
     across the entire product page reads as a tailored editorial accent. */
  .product-template h2,
  .product-template h3,
  .product-template h4,
  .product-template h5,
  .product h2,
  .product h3,
  .product h4,
  .product h5,
  .product-single h2,
  .product-single h3,
  .product-single h4,
  .product-single h5,
  .product__info h2,
  .product__info h3,
  .product__info h4,
  .product__info h5,
  .product__info-container h2,
  .product__info-container h3,
  .product__info-container h4,
  .product__info-container h5,
  .product-section h2,
  .product-section h3,
  .product-section h4,
  .product-section h5,
  .product-block h2,
  .product-block h3,
  .product-block h4,
  .product-block h5,
  .product-content-wrapper h2,
  .product-content-wrapper h3,
  .product-content-wrapper h4,
  .product-content-wrapper h5,
  .product-description h2,
  .product-description h3,
  .product-description h4,
  .product-description h5,
  .product__description h2,
  .product__description h3,
  .product__description h4,
  .product__description h5,
  .product-single__description h2,
  .product-single__description h3,
  .product-single__description h4,
  .product-single__description h5,
  .product-content h2,
  .product-content h3,
  .product-content h4,
  .product-content h5,
  .product-single__content h2,
  .product-single__content h3,
  .product-single__content h4,
  .product-single__content h5,
  .rte h2,
  .rte h3,
  .rte h4,
  .rte h5,
  /* Tab / accordion / collapsible headers */
  .product-tabs__title,
  .product-tabs h2,
  .product-tabs h3,
  .product-tabs h4,
  .accordion__title,
  .accordion h2,
  .accordion h3,
  .accordion h4,
  .collapsible-content__title,
  .collapsible h2,
  .collapsible h3,
  .collapsible h4,
  .collapsible-tab__title,
  .collapsible-tab h2,
  .collapsible-tab h3,
  .tab-title,
  .tabs__title,
  .tabs h2,
  .tabs h3,
  .tabs h4,
  /* Cross-sell / related / recently viewed blocks inside product template */
  .product-template .related-products h2,
  .product-template .related-products h3,
  .product-template .product-recommendations h2,
  .product-template .product-recommendations h3,
  .product-template .recently-viewed h2,
  .product-template .recently-viewed h3,
  .product-template .you-may-also-like h2,
  .product-template .you-may-also-like h3,
  .product-template .complementary-products h2,
  .product-template .complementary-products h3,
  .product-recommendations__heading,
  .related-products__heading,
  .recently-viewed__heading,
  .complementary-products__heading {
    color: #D4A853 !important;
    font-family: var(--osp-serif, 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif) !important;
    font-weight: 500 !important;
    font-style: italic !important;
    letter-spacing: 0 !important;
    margin-top: 1.75em !important;
    margin-bottom: 0.5em !important;
    border-bottom: 1px solid rgba(212, 168, 83, 0.25) !important;
    padding-bottom: 0.3em !important;
    text-transform: none !important;
    line-height: 1.2 !important;
  }

  /* Make sure any inline/span text inside ALL these PDP headings inherits */
  h1.product__title *,
  h1.product-single__title *,
  h1.product-meta__title *,
  .product__title *,
  .product-single__title *,
  .product-meta__title *,
  .product__name *,
  .product-template h1 *,
  .product-single h1 *,
  .product__info h1 *,
  .product__info-container h1 *,
  .product-template h2 *,
  .product-template h3 *,
  .product-template h4 *,
  .product-template h5 *,
  .product h2 *,
  .product h3 *,
  .product h4 *,
  .product h5 *,
  .product-single h2 *,
  .product-single h3 *,
  .product-single h4 *,
  .product-single h5 *,
  .product__info h2 *,
  .product__info h3 *,
  .product__info h4 *,
  .product__info h5 *,
  .product__info-container h2 *,
  .product__info-container h3 *,
  .product__info-container h4 *,
  .product__info-container h5 *,
  .product-section h2 *,
  .product-section h3 *,
  .product-section h4 *,
  .product-block h2 *,
  .product-block h3 *,
  .product-block h4 *,
  .product-content-wrapper h2 *,
  .product-content-wrapper h3 *,
  .product-content-wrapper h4 *,
  .product-description h2 *,
  .product-description h3 *,
  .product-description h4 *,
  .product__description h2 *,
  .product__description h3 *,
  .product__description h4 *,
  .product-single__description h2 *,
  .product-single__description h3 *,
  .product-single__description h4 *,
  .product-content h2 *,
  .product-content h3 *,
  .product-content h4 *,
  .product-single__content h2 *,
  .product-single__content h3 *,
  .product-single__content h4 *,
  .rte h2 *,
  .rte h3 *,
  .rte h4 *,
  .product-tabs__title *,
  .accordion__title *,
  .collapsible-content__title *,
  .collapsible-tab__title *,
  .tab-title *,
  .product-recommendations__heading *,
  .related-products__heading *,
  .recently-viewed__heading *,
  .complementary-products__heading * {
    color: inherit !important;
    font-family: inherit !important;
    font-style: inherit !important;
    font-weight: inherit !important;
  }

  /* --- 2. Form labels: cream editorial small caps --- */
  .product-form__label,
  label[for="quantity"],
  label[for="Quantity"],
  .selector-wrapper label,
  .single-option-selector-label,
  .product-form .label,
  .product-form label,
  .variant__label,
  .product-single__form label,
  .product-form__input label,
  .swatch .header,
  .product-form__quantity-label {
    color: #F5F5F0 !important;
    text-transform: uppercase !important;
    font-size: 0.75em !important;
    letter-spacing: 2px !important;
    font-weight: 500 !important;
    opacity: 0.85 !important;
  }

  /* ===== COLLECTION IMAGE PERFORMANCE (2026-04-09) ===== */
  /* Off-screen product cards: skip rendering until near viewport */
  .product-list .thumbnail:nth-child(n+7) {
    content-visibility: auto;
    contain-intrinsic-size: auto 380px;
  }

  /* Smooth fade-in for grid images using the transition--fade-in class */
  .image__container .transition--fade-in {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .image__container .transition--fade-in[src]:not([src=""]):not([src*="no-image"]) {
    opacity: 1;
  }

  /* Light placeholder background while images load */
  .product-wrap .image__container {
    background-color: var(--osp-bg-elevated, #303030);
  }

  /* Ensure grid images render efficiently */
  .product-wrap .image__container img,
  .product-index .image__container img {
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Secondary (hover) image: hide until hover, no layout shift */
  .product-wrap .image__container .secondary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .product-wrap:hover .image__container .secondary {
    opacity: 1;
  }


  
  /* ============================================================
     FIX: Search Input Text Invisible - v2 (2026-04-10)
     Targets the EXACT Turbo-theme search markup:
       Mobile: .dropdown_container[data-dropdown="search"] .header_search_form input.search-terms
       Desktop nav: li.search_container .search_form input
       Search page: .search__container .search input
     Uses html body prefix + attribute selectors for max specificity,
     plus -webkit-text-fill-color to override WebKit/iOS rendering.
     ============================================================ */

  /* --- MOBILE SEARCH DRAWER (with or without .osp-open) --- */
  html body .dropdown_container[data-dropdown="search"] .header_search_form input[type="text"],
  html body .dropdown_container[data-dropdown="search"] .header_search_form input.search-terms,
  html body .dropdown_container[data-dropdown="search"] input[type="text"],
  html body .dropdown_container[data-dropdown="search"] input.search-terms,
  html body .dropdown_container[data-dropdown="search"].osp-open .header_search_form input[type="text"],
  html body .dropdown_container[data-dropdown="search"].osp-open .header_search_form input.search-terms,
  html body .dropdown_container[data-dropdown="search"].osp-open input[type="text"],
  html body .dropdown_container[data-dropdown="search"].osp-open input.search-terms,
  html body .dropdown_container[data-dropdown="search"].osp-open .dropdown input[type="text"],
  html body .dropdown_container[data-dropdown="search"].osp-open .dropdown input.search-terms,
  /* With header attribute selectors for extra specificity */
  html body header .dropdown_container[data-dropdown="search"] input[type="text"],
  html body header .dropdown_container[data-dropdown="search"] input.search-terms,
  html body header[class*="mobile_nav-fixed"] .dropdown_container[data-dropdown="search"] input[type="text"],
  html body header[class*="mobile_nav-fixed"] .dropdown_container[data-dropdown="search"] input.search-terms,
  html body header[class*="mobile_nav-fixed"] .dropdown_container[data-dropdown="search"].osp-open input[type="text"],
  html body header[class*="mobile_nav-fixed"] .dropdown_container[data-dropdown="search"].osp-open input.search-terms,
  /* Also target :active and :focus states since theme overrides those too */
  html body .dropdown_container[data-dropdown="search"] input[type="text"]:focus,
  html body .dropdown_container[data-dropdown="search"] input[type="text"]:active,
  html body .dropdown_container[data-dropdown="search"] input.search-terms:focus,
  html body .dropdown_container[data-dropdown="search"] input.search-terms:active,
  html body .dropdown_container[data-dropdown="search"].osp-open input[type="text"]:focus,
  html body .dropdown_container[data-dropdown="search"].osp-open input.search-terms:focus {
    color: #1A1A1A !important;
    -webkit-text-fill-color: #1A1A1A !important;
    background-color: #ffffff !important;
    caret-color: #1A1A1A !important;
  }

  /* --- MOBILE SEARCH DRAWER PLACEHOLDER --- */
  html body .dropdown_container[data-dropdown="search"] input::placeholder,
  html body .dropdown_container[data-dropdown="search"] input.search-terms::placeholder,
  html body .dropdown_container[data-dropdown="search"].osp-open input::placeholder,
  html body .dropdown_container[data-dropdown="search"].osp-open input.search-terms::placeholder,
  html body header .dropdown_container[data-dropdown="search"] input::placeholder,
  html body header[class*="mobile_nav-fixed"] .dropdown_container[data-dropdown="search"] input::placeholder,
  html body header[class*="mobile_nav-fixed"] .dropdown_container[data-dropdown="search"].osp-open input::placeholder,
  /* Vendor-prefixed placeholders for full browser coverage */
  html body .dropdown_container[data-dropdown="search"] input::-webkit-input-placeholder,
  html body .dropdown_container[data-dropdown="search"].osp-open input::-webkit-input-placeholder,
  html body .dropdown_container[data-dropdown="search"] input::-moz-placeholder,
  html body .dropdown_container[data-dropdown="search"].osp-open input::-moz-placeholder,
  html body .dropdown_container[data-dropdown="search"] input:-ms-input-placeholder,
  html body .dropdown_container[data-dropdown="search"].osp-open input:-ms-input-placeholder {
    color: #666666 !important;
    -webkit-text-fill-color: #666666 !important;
    opacity: 1 !important;
  }

  /* --- DESKTOP NAV INLINE SEARCH --- */
  html body li.search_container .search_form input[type="text"],
  html body li.search_container .search_form input,
  html body li.search_container[data-autocomplete-true] .search_form input,
  html body .menu li.search_container .search_form input,
  html body li.search_container .search_form input:focus,
  html body li.search_container .search_form input:active {
    color: #F5F5F0 !important;
    -webkit-text-fill-color: #F5F5F0 !important;
  }

  /* --- SEARCH PAGE FORM (from search-form.liquid snippet) --- */
  html body .search__container .search input[type="text"],
  html body .search__container .search__form input[type="text"],
  html body .search_page .search__container input[type="text"],
  html body .search__container .search input[type="text"]:focus,
  html body .search__container .search__form input[type="text"]:focus {
    color: #1A1A1A !important;
    -webkit-text-fill-color: #1A1A1A !important;
    background-color: #ffffff !important;
    caret-color: #1A1A1A !important;
    border-color: #383838 !important;
    border-radius: 4px;
  }

  html body .search__container input::placeholder,
  html body .search__container input::-webkit-input-placeholder,
  html body .search__container input::-moz-placeholder,
  html body .search__container input:-ms-input-placeholder {
    color: #666666 !important;
    -webkit-text-fill-color: #666666 !important;
    opacity: 1 !important;
  }

  /* --- WEBKIT AUTOFILL OVERRIDE --- */
  html body .dropdown_container[data-dropdown="search"] input:-webkit-autofill,
  html body .header_search_form input:-webkit-autofill,
  html body .search__container input:-webkit-autofill {
    -webkit-text-fill-color: #1A1A1A !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  }

  /* --- SEARCH SUBMIT ICON inside white input - make it visible --- */
  html body .dropdown_container[data-dropdown="search"] .search-submit,
  html body .dropdown_container[data-dropdown="search"] .icon-search.search-submit,
  html body .dropdown_container[data-dropdown="search"].osp-open .search-submit {
    color: #666666 !important;
  }


  /* ============================================================
     PDP FULL READABILITY OVERHAUL — April 2026
     Fixes every white-on-dark leak across the Product Detail Page.
     Follows Baymard Institute / NNGroup / Wroblewski best practices:
       • WCAG AA contrast (4.5:1 body, 3:1 large text)
       • Dark-theme continuity — no jarring white content blocks
       • Scannable typography hierarchy for long descriptions
       • Mobile-first touch targets and spacing
     Palette: #0D0D0D bg, #1A1A1A elevated, #272727 card,
              #383838 border, #F5F5F0 cream text, #B0B0AC secondary,
              #D4A853 gold accent, #00B4A6 teal accent
     ============================================================ */

  /* --- 1. DESCRIPTION CONTAINER: dark background + cream text --- */
  /* The .section.clearfix wrapper + .description.bottom inherit from
     body{background:#fff} in the Turbo base CSS. Force dark. */
  html body .description,
  html body .description.bottom,
  html body .section.clearfix:has(> .description),
  html body .product_section ~ .section.clearfix,
  html body .product .section.clearfix,
  html body .product-template .section.clearfix {
    background-color: var(--osp-bg-primary, #0D0D0D) !important;
    color: var(--osp-text-primary, #F5F5F0) !important;
  }

  /* --- 2. DESCRIPTION BODY TEXT: readable cream on dark --- */
  html body .description p,
  html body .description li,
  html body .description span,
  html body .description div,
  html body .description.bottom p,
  html body .description.bottom li,
  html body .description.bottom span,
  html body .description.bottom div {
    color: var(--osp-text-secondary, #B0B0AC) !important;
    line-height: 1.7;
  }

  html body .description strong,
  html body .description b,
  html body .description.bottom strong,
  html body .description.bottom b {
    color: var(--osp-text-primary, #F5F5F0) !important;
    font-weight: 600;
  }

  /* --- 3. DESCRIPTION LINKS: teal with underline for discoverability --- */
  html body .description a,
  html body .description.bottom a {
    color: var(--osp-accent, #00B4A6) !important;
    text-decoration: underline;
    text-decoration-color: rgba(0, 180, 166, 0.35);
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
  }
  html body .description a:hover,
  html body .description.bottom a:hover {
    color: var(--osp-accent-hover, #2DD4BF) !important;
    text-decoration-color: var(--osp-accent-hover, #2DD4BF);
  }

  /* --- 4. DESCRIPTION HEADINGS: gold serif section breaks --- */
  /* Already handled by the PDP heading rules above, but reinforce
     specifically within .description for specificity. */
  html body .description h2,
  html body .description h3,
  html body .description.bottom h2,
  html body .description.bottom h3 {
    color: var(--osp-accent-gold, #D4A853) !important;
    font-family: var(--osp-serif, 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif) !important;
    font-weight: 500 !important;
    font-style: italic !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    margin-top: 2em !important;
    margin-bottom: 0.6em !important;
    padding-bottom: 0.35em !important;
    border-bottom: 1px solid rgba(212, 168, 83, 0.2) !important;
  }

  /* h3 subsections (FAQ questions) — slightly smaller, no underline */
  html body .description h3,
  html body .description.bottom h3 {
    font-size: 1.15rem !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-top: 1.5em !important;
    color: var(--osp-text-primary, #F5F5F0) !important;
    font-style: normal !important;
    font-family: inherit !important;
    font-weight: 600 !important;
  }

  /* h2 sizing */
  html body .description h2,
  html body .description.bottom h2 {
    font-size: clamp(1.3rem, 3vw, 1.6rem) !important;
  }

  /* --- 5. DESCRIPTION LISTS: visible bullets + proper spacing --- */
  html body .description ul,
  html body .description.bottom ul {
    list-style: disc !important;
    padding-left: 1.5em !important;
    margin: 1em 0 !important;
  }
  html body .description ol,
  html body .description.bottom ol {
    list-style: decimal !important;
    padding-left: 1.5em !important;
    margin: 1em 0 !important;
  }
  html body .description li,
  html body .description.bottom li {
    margin-bottom: 0.5em !important;
    padding-left: 0.25em !important;
  }
  /* Bullet color: use the text color */
  html body .description ul li::marker,
  html body .description.bottom ul li::marker {
    color: var(--osp-accent, #00B4A6) !important;
  }

  /* --- 6. DESCRIPTION TABLES: dark cells, visible borders --- */
  /* PDP descriptions contain spec tables with inline border="1".
     Baymard: tables should have clear row separation and
     alternating backgrounds for scanability. */
  html body .description table,
  html body .description.bottom table {
    width: 100% !important;
    border-collapse: collapse !important;
    background-color: var(--osp-bg-card, #272727) !important;
    border: 1px solid var(--osp-border, #383838) !important;
    border-radius: 6px;
    overflow: hidden;
    margin: 1.5em 0 !important;
  }
  html body .description th,
  html body .description.bottom th {
    background-color: rgba(212, 168, 83, 0.12) !important;
    color: var(--osp-accent-gold, #D4A853) !important;
    font-weight: 600 !important;
    text-align: left !important;
    padding: 12px 16px !important;
    border: 1px solid var(--osp-border, #383838) !important;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }
  html body .description td,
  html body .description.bottom td {
    color: var(--osp-text-secondary, #B0B0AC) !important;
    padding: 10px 16px !important;
    border: 1px solid var(--osp-border, #383838) !important;
    font-size: 0.95rem;
  }
  /* Zebra striping for scanability (Baymard recommendation) */
  html body .description tr:nth-child(even),
  html body .description.bottom tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03) !important;
  }
  html body .description tr:nth-child(odd),
  html body .description.bottom tr:nth-child(odd) {
    background-color: transparent !important;
  }

  /* --- 7. PRODUCT GALLERY: dark image backgrounds --- */
  /* Turbo theme sets .product_gallery img { background-color: #fff }
     and performance-boost sets .image-element__wrap { background: #f8f8f8 }.
     Override both to maintain dark-theme continuity. */
  html body .product_gallery img,
  html body .product_gallery .gallery-cell img {
    background-color: var(--osp-bg-card, #272727) !important;
  }
  html body .product_gallery .image-element__wrap,
  html body .product_gallery .gallery-cell .image__container {
    background-color: var(--osp-bg-card, #272727) !important;
    border-radius: 8px;
    overflow: hidden;
  }
  /* Gallery nav thumbnails */
  html body .product_gallery_nav .gallery-cell {
    background-color: var(--osp-bg-card, #272727) !important;
  }
  /* Gallery prev/next arrows */
  html body .product_gallery_nav.product_gallery_nav--bottom-slider .flickity-prev-next-button {
    background: var(--osp-bg-card, #272727) !important;
    color: var(--osp-text-primary, #F5F5F0) !important;
    border: 1px solid var(--osp-border, #383838) !important;
    border-radius: 50%;
  }

  /* --- 8. PRODUCT FORM CONTROLS: dark inputs --- */
  /* Quantity +/- buttons */
  html body .product-quantity-box .product-minus,
  html body .product-quantity-box .product-plus {
    background-color: var(--osp-bg-card, #272727) !important;
    color: var(--osp-text-primary, #F5F5F0) !important;
    border: 1px solid var(--osp-border, #383838) !important;
  }
  html body .product-quantity-box .product-minus:hover,
  html body .product-quantity-box .product-plus:hover {
    background-color: var(--osp-bg-elevated, #303030) !important;
    border-color: var(--osp-accent, #00B4A6) !important;
  }
  /* Quantity input */
  html body .product-quantity-box .quantity,
  html body .product-quantity-box input[type="number"],
  html body .product_form input[type="number"] {
    background-color: var(--osp-bg-primary, #0D0D0D) !important;
    color: var(--osp-text-primary, #F5F5F0) !important;
    border: 1px solid var(--osp-border, #383838) !important;
    -webkit-text-fill-color: var(--osp-text-primary, #F5F5F0) !important;
  }
  /* Select dropdowns (variant selectors) */
  html body .product_section select,
  html body .product_form select,
  html body .product_section .single-option-selector {
    background-color: var(--osp-bg-card, #272727) !important;
    color: var(--osp-text-primary, #F5F5F0) !important;
    border: 1px solid var(--osp-border, #383838) !important;
    -webkit-text-fill-color: var(--osp-text-primary, #F5F5F0) !important;
  }
  /* All text inputs on PDP */
  html body .product_section input[type="text"],
  html body .product_section input[type="email"],
  html body .product_section input[type="number"],
  html body .product_form input[type="text"],
  html body .product_form input[type="email"] {
    background-color: var(--osp-bg-primary, #0D0D0D) !important;
    color: var(--osp-text-primary, #F5F5F0) !important;
    border: 1px solid var(--osp-border, #383838) !important;
    -webkit-text-fill-color: var(--osp-text-primary, #F5F5F0) !important;
  }

  /* --- 9. CART CONTENT: dark treatment --- */
  html body .cart_content,
  html body .cart_content .cart-item,
  html body .ajax-cart__content {
    background-color: var(--osp-bg-card, #272727) !important;
    color: var(--osp-text-primary, #F5F5F0) !important;
  }
  html body .cart_content a,
  html body .cart_content p,
  html body .cart_content span {
    color: var(--osp-text-primary, #F5F5F0) !important;
  }
  html body .cart_content .cart-item__price,
  html body .cart_content .money {
    color: var(--osp-accent, #00B4A6) !important;
  }

  /* --- 10. PRODUCT META / LINKS / SKU / VENDOR --- */
  html body .product_section .vendor,
  html body .product_section .vendor a,
  html body .product_section .sku,
  html body .product_section .product_links,
  html body .product_section .product_links a,
  html body .product_section .product_links span,
  html body .product_section .product_links .label {
    color: var(--osp-text-muted, #888883) !important;
  }
  html body .product_section .product_links a:hover {
    color: var(--osp-accent, #00B4A6) !important;
  }
  html body .product_section .feature_divider {
    border-color: var(--osp-border, #383838) !important;
    background-color: var(--osp-border, #383838) !important;
  }

  /* --- 11. PRODUCT THUMBNAIL OVERLAY: darken for dark theme --- */
  html body .product-list .thumbnail .thumbnail-overlay {
    background-color: rgba(13, 13, 13, 0.6) !important;
  }

  /* --- 12. REVIEWS SECTION ON PDP: dark --- */
  html body .shopify-reviews,
  html body #shopify-product-reviews,
  html body .spr-container {
    background-color: transparent !important;
    color: var(--osp-text-primary, #F5F5F0) !important;
  }
  html body .spr-review,
  html body .spr-review-content,
  html body .spr-review-content-body {
    color: var(--osp-text-secondary, #B0B0AC) !important;
  }
  html body .spr-review-header-title {
    color: var(--osp-text-primary, #F5F5F0) !important;
  }
  html body .spr-review-header-byline {
    color: var(--osp-text-muted, #888883) !important;
  }
  html body .spr-icon {
    color: var(--osp-accent-gold, #D4A853) !important;
  }
  html body .spr-form-input,
  html body .spr-form-input textarea,
  html body .spr-form-input input {
    background-color: var(--osp-bg-card, #272727) !important;
    color: var(--osp-text-primary, #F5F5F0) !important;
    border: 1px solid var(--osp-border, #383838) !important;
  }
  html body .spr-form-label {
    color: var(--osp-text-primary, #F5F5F0) !important;
  }
  html body .spr-summary-actions-newreview {
    color: var(--osp-accent, #00B4A6) !important;
  }

  /* --- 13. PRODUCT PAGE SECTION CONTAINERS: ensure dark --- */
  /* Catch-all for any white wrapper inside the product template */
  html body #pagecontent,
  html body .product.clearfix,
  html body .product_section,
  html body .js-product_section,
  html body .product_section + .section,
  html body [class*="product-"] .section {
    background-color: var(--osp-bg-primary, #0D0D0D) !important;
  }

  /* --- 14. DESCRIPTION SECTION CARDS (At a Glance, Specs, etc.) --- */
  /* Give named sections within description a card-like treatment
     for progressive disclosure and visual breathing room. */
  html body .description #product-at-a-glance,
  html body .description #specs-recap,
  html body .description.bottom #product-at-a-glance,
  html body .description.bottom #specs-recap {
    background-color: var(--osp-bg-card, #272727) !important;
    border: 1px solid var(--osp-border, #383838) !important;
    border-radius: 8px !important;
    padding: 1.25rem 1.5rem !important;
    margin: 1.5em 0 !important;
  }

  /* --- 15. NOTIFY ME / SOLD OUT / PRE-ORDER BUTTONS --- */
  html body .sold_out,
  html body .sale_banner_product {
    color: var(--osp-error, #E85D4A) !important;
  }
  html body .notify_form input[type="email"] {
    background-color: var(--osp-bg-primary, #0D0D0D) !important;
    color: var(--osp-text-primary, #F5F5F0) !important;
    border: 1px solid var(--osp-border, #383838) !important;
  }

  /* --- 16. MOBILE PDP REFINEMENTS --- */
  @media screen and (max-width: 798px) {

    /* Description text slightly larger for mobile readability */
    html body .description p,
    html body .description.bottom p,
    html body .description li,
    html body .description.bottom li {
      font-size: 0.95rem !important;
      line-height: 1.75 !important;
    }

    /* Tables scroll horizontally on narrow screens */
    html body .description table,
    html body .description.bottom table {
      display: block !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
    }

    /* Trust cards: stack to single column on very small screens */
    html body .description > div[style*="grid-template-columns: repeat(3"],
    html body .description.bottom > div[style*="grid-template-columns: repeat(3"] {
      grid-template-columns: 1fr !important;
      gap: 10px !important;
    }

    /* Description headings: adequate touch target spacing */
    html body .description h2,
    html body .description.bottom h2 {
      margin-top: 2.5em !important;
      font-size: 1.25rem !important;
    }

    /* At-a-glance card padding on mobile */
    html body .description #product-at-a-glance,
    html body .description #specs-recap,
    html body .description.bottom #product-at-a-glance,
    html body .description.bottom #specs-recap {
      padding: 1rem 1.15rem !important;
    }

    /* Gallery image container: ensure dark frame visible */
    html body .product_gallery .gallery-cell {
      border: 1px solid var(--osp-border, #383838) !important;
      border-radius: 8px !important;
    }
  }

  /* --- 17. PROMO BANNER: dark override (theme sets #f2f2f2) --- */
  html body .promo_banner {
    background-color: var(--osp-bg-secondary, #121212) !important;
    color: var(--osp-text-secondary, #B0B0AC) !important;
    border-bottom: 1px solid var(--osp-border, #383838) !important;
  }
  html body .promo_banner p,
  html body .promo_banner strong {
    color: var(--osp-text-primary, #F5F5F0) !important;
  }

  /* --- 18. BREADCRUMBS ON PDP: muted but legible --- */
  html body .breadcrumb-collection {
    background-color: transparent !important;
  }

  /* --- 19. SOCIAL / SHARE BUTTONS: dark-theme friendly --- */
  html body .meta .social_icons a {
    color: var(--osp-text-muted, #888883) !important;
  }
  html body .meta .social_icons a:hover {
    color: var(--osp-accent, #00B4A6) !important;
  }

  /* --- 20. GLOBAL: prevent any remaining white bleed on PDP --- */
  /* Turbo theme base: body{background-color:#fff}
     This catch-all ensures nothing white leaks through
     between dark sections on the product page. */
  html body.product-page,
  html body .product-name--*,
  html body [class*="product-name--"] {
    background-color: var(--osp-bg-primary, #0D0D0D) !important;
  }

  /* The <main> wrapper and any .content class inside product pages */
  html body .content.product-name--*,
  html body .container.main.content[class*="product-name--"] {
    background-color: var(--osp-bg-primary, #0D0D0D) !important;
  }

  /* Absolute catch-all for any .container.main.content on product pages */
  html body .container.main.content {
    background-color: var(--osp-bg-primary, #0D0D0D) !important;
  }