/** Shopify CDN: Minification failed

Line 188:0 All "@import" rules must come first

**/
/*-----------------------------------------------------------------------------/
/ Custom Theme CSS
/-----------------------------------------------------------------------------*/
/*---------------- Global Custom CSS -------------------*/


/*---------------- Custom CSS for only desktop -------------------*/
@media (min-width: 1025px) {
  
}

/*---------------- Custom CSS for tablet, mobile -------------------*/
@media (max-width: 1024px) {
  
}

/*---------------- Custom CSS for only tablet -------------------*/
@media (min-width: 768px) and (max-width: 1024px) {
  
}

/*---------------- Custom CSS for only mobile -------------------*/
@media (max-width: 767px){
  
}

/* ============================================================
   REX 20260804: Mobile Filter Button & Product Count Styling
   - Filter button: dark red (#8b0000) background, white text
   - Product count: dark red box with white text, rounded corners
   - Applies to mobile & tablet only (max-width: 1024px)
   - TO REWORK AFTER THEME UPGRADE: check .facets-drawer-opener-wrapper
     and .facets-active-count selectors still exist in theme
   ============================================================ */
@media (max-width: 1200px) {
  .facets-drawer-opener-wrapper .button {
    color: #ffffff !important;
    border-color: #8b0000 !important;
    background-color: #8b0000 !important;
  }

  .facets-drawer-opener-wrapper .button span {
    background: #8b0000 !important;
    color: #ffffff !important;
  }

  .facets-active-count {
    color: #ffffff !important;
    background-color: #8b0000 !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    display: inline-block !important;
  }
}
/* ============================================================
   END: Mobile Filter Button & Product Count Styling
   ============================================================ */

/* ============================================
   Breadcrumb Badge Style — Strictly scoped
   - Targets ONLY the breadcrumb nav element
   - Will not affect filter, sort, product titles, or prices
   - Updated: August 2026
   ============================================ */

/* Badge background on breadcrumb nav only */
.breadcrumb {
  display: inline-block;                       /* Shrink-wrap to breadcrumb width only */
  background-color: rgba(110, 40, 40, 0.75);  /* Dark red, 75% opacity — adjust as needed */
  padding: 6px 14px;                           /* Inner spacing around text */
  border-radius: 6px;                          /* Rounded corners */
}

/* White text for breadcrumb links and separators only */
.breadcrumb a,
.breadcrumb span,
.breadcrumb li {
  color: #ffffff !important;                   /* White text — scoped to breadcrumb children only */
  text-decoration: none;                       /* Remove link underline */
}
/* ============================================
   Page Title Badge Style
   - Targets the collection/page title h1 specifically
   - Uses exact classes from Livique theme inspection
   - Matches the same badge style as the breadcrumb
   - Added: August 2026
   ============================================ */

h1.text-content-heading {
  /* display: inline-block; */
  display: none;                     /* Shrink-wrap background to text width only */
  background-color: rgba(110, 40, 40, 0.75);  /* Same dark red as breadcrumb, 75% opacity */
  color: #ffffff !important;                   /* White text */
  padding: 6px 14px;                           /* Inner spacing — matches breadcrumb */
  border-radius: 6px;                          /* Rounded corners — matches breadcrumb */
}


/* ============================================
   Blog/News Page Background Color
   - Applies green background to the blog posts page only
   - Scoped to blog template to avoid affecting other pages
   - Change #2d6a4f to any green hex code as needed
   - Added: August 2026
   ============================================ */

/* Blog page body background */
body.template-blog {
  background-color: #2d6a4f; /* Deep forest green — adjust shade as needed */
}

/* Blog posts section background */
.template-blog .main-page-wrapper,
.template-blog main {
  background-color: #2d6a4f; /* Matches body background */
}

/* ============================================
   Blog Post Article Title - Force Show
   - Overrides global h1.text-content-heading hide rule
   - Suppresses badge background color on blog post pages
   - Scoped to article template only
   - Added: Rex, 11 August 2026
   ============================================ */

.template-article h1.text-content-heading {
  display: inline-block !important; /* Show title on blog post pages only */
  background-color: transparent !important; /* Remove dark red badge background */
  color: inherit !important;               /* Revert to theme default text colour */
  padding: 0 !important;                   /* Remove badge padding */
  border-radius: 0 !important;            /* Remove badge rounded corners */
}

/* ============================================================
   HEADER LOGO SUPPRESSION
   Purpose: Hides the logo image and the fallback store name
   text (h1.visually-hidden) in the header.
   Selectors confirmed via browser inspect on this theme.
   To revert: Remove or comment out the blocks below.
   Last updated: August 2026
   ============================================================ */

/* Hide the header logo image */
.header-heading-logo {
  display: none;
}

/* Hide the logo wrapper div */
.header-heading-logo-wrapper {
  display: none;
}

/* Hide the entire logo link */
a.header-heading.link {
  display: none;
}

/* ============================================================
   HEADER NAVIGATION MENU FONT SIZE
   Purpose: Sets font size for first-level header menu items.
   Target: span text inside each nav link.
   Adjust the px value to suit your preference.
   Last updated: August 2026
   ============================================================ */

/* First-level navigation menu item text */
.header-menu-nav .first-level-item span {
  font-size: 18px;
}


/* ============================================================
   Override decorative font in Rich Text block — heading + body
   Author: Rex
   Section: template--22427000570089__rich_text_nWNdCi
   Block:   heading_RBwHw7
   Target:  h2.font-decorative (heading) + rich-text body text
   Font:    Great Vibes (Google Fonts)
   Applied: 2026-08-10 | Review after theme upgrade
   ============================================================ */

/* Step 1: Import calligraphy font */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

/* Step 2: Apply to decorative heading */
#shopify-section-template--22427000570089__rich_text_nWNdCi h2.font-decorative {
  font-family: 'Great Vibes', cursive !important;
}

/* Step 3: Apply same font + increased size to body text content */
#shopify-section-template--22427000570089__rich_text_nWNdCi .rich-text__text-content p,
#shopify-section-template--22427000570089__rich_text_nWNdCi .rich-text__text-content {
  font-family: 'Great Vibes', cursive !important;
  font-size: 1.6rem !important; /* Increased from default ~1rem for calligraphy readability */
}




/* ============================================================
   RICH TEXT - TEXT CONTENT BLOCK DECORATIVE FONT
   Purpose: Applies the theme's decorative calligraphy font
   (Pinyon Script) to the body text in the Rich Text section.
   Target: .content-main.rte inside the text content block.
   To revert: Remove or comment out the block below.
   Last updated: August 2026
   ============================================================ */

/* Apply decorative/calligraphy font to rich text body content
.rich-text__text-content--text .content-main.rte {
  font-family: var(--font-decorative-family);
  font-weight: var(--font-decorative-weight);
  font-size: 24px;
}
*/

/* ============================================================
   Hide Featured Collection section title ("Featured Products")
   Section ID: template--22427000570089__featured_collection_bYFaGY
   Target: <h2 class="text-content-heading heading-size--medium">
   Author: Rex
   Applied: 2026-08-10 | Review after theme upgrade
   ============================================================ */
#shopify-section-template--22427000570089__featured_collection_bYFaGY .text-content-heading {
  display: none;
}


/* ============================================================
   Disable product card clicks on All Products collection page
   Author: Rex
   Section: template--22427000275177__main-collection
   Reason:  Pre-launch — show products but block purchase flow
   Applied: 2026-08-10 | TEMPORARY — remove on launch day
   ============================================================ */

/* Block all product card link clicks in this collection 
#shopify-section-template--22427000275177__main-collection .card-wrapper a,
#shopify-section-template--22427000275177__main-collection .card__inner a {
  pointer-events: none !important;
  cursor: default !important;
}
*/

/* Dim the product cards slightly to hint they're not yet available 
#shopify-section-template--22427000275177__main-collection .card-wrapper {
  opacity: 0.85 !important;
}
*/


/* Hide quick-add / add-to-cart buttons if visible on collection page 
#shopify-section-template--22427000275177__main-collection .quick-add,
#shopify-section-template--22427000275177__main-collection .card__button {
  display: none !important;
}
*/


/* ============================================================
   PRE-LAUNCH: Coming Soon banner + hide purchase buttons + price
   Author: Rex
   Target: All product pages (site-wide)
   Reason: Show products but block purchase flow until launch
   Applied: 2026-08-10 | TEMPORARY — remove on launch day
   ============================================================ */

/* Step 1: Inject "Coming Soon" banner above product title */
.product-title-heading::before {
  content: "🎄 Coming Soon — Christmas Wonder will be revealed by 16 September!";
  display: block;
  background-color: #ff7043; /* Festive orange-red — matches brand vendor badge */
  color: #ffffff;
  text-align: center;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  margin-bottom: 12px;
  letter-spacing: 0.03em;
}

/* Step 2: Hide Add to Cart form and all checkout buttons */
product-form,
shopify-accelerated-checkout,
.product-mini-checkout,
.quick-add-remove {
  display: none !important;
}

/* Step 3: Hide price display on product pages */
.product-price-tax,
.product-info-block.product-price-tax {
  display: none !important;
}

/* ============================================================
   Increase logo size in Logo List section
   Author: Rex
   Section: template--22427000570089__logo_list_yUgmDR
   Target:  img inside .logo-item > a.link
   Reason:  Default width=200 height=150 too small, esp. mobile
   Applied: 2026-08-10 | Review after theme upgrade
   ============================================================ */

/* Desktop: increase logo size */
#shopify-section-template--22427000570089__logo_list_yUgmDR .logo-item img {
  width: 240px !important;  /* Increase from default 200px rendered size — adjust as needed */
  height: auto !important;  /* Maintain aspect ratio */
}

/* Mobile: further adjust if needed */
@media screen and (max-width: 749px) {
  #shopify-section-template--22427000570089__logo_list_yUgmDR .logo-item img {
    width: 110px !important;  /* Adjust for mobile — increase if still too small */
    height: auto !important;
  }
}

/* ============================================================
   Fix logo overlap in Logo List section after size increase
   Author: Rex
   Section: template--22427000570089__logo_list_yUgmDR
   Target:  .logo-item elements inside chaser-lights
   Reason:  Logos overlapping after size increase — adding gap
   Applied: 2026-08-10 | Review after theme upgrade
   ============================================================ */

/* Add horizontal spacing between each logo item */
#shopify-section-template--22427000570089__logo_list_yUgmDR .logo-item {
  margin: 0 60px !important; /* Adjust value if more/less gap needed */
  flex-shrink: 0 !important; /* Prevent logos from being squished */
}

/* Ensure the logo list doesn't wrap and maintains scroll behaviour */
#shopify-section-template--22427000570089__logo_list_yUgmDR .logo-list {
  gap: 20px !important; /* Backup gap for flex layout */
}

/* ============================================================
   Mobile-specific logo spacing for Logo List section yUgmDR
   Author: Rex
   Section: template--22427000570089__logo_list_yUgmDR
   Reason:  Smaller logo size on mobile needs tighter spacing
   Applied: 2026-08-10 | Review after theme upgrade
   ============================================================ */

/* Mobile: tighter spacing to match smaller logo size */
@media screen and (max-width: 749px) {
  #shopify-section-template--22427000570089__logo_list_yUgmDR .logo-item {
    margin: 0 20px !important; /* Reduced from desktop 20px — adjust as needed */
  }

  #shopify-section-template--22427000570089__logo_list_yUgmDR .logo-list {
    gap: 10px !important;
  }
}

/* ============================================================
   Add left/right outer margin to Logo List section
   Author: Rex
   Section: template--22427000570089__logo_list_yUgmDR
   Reason:  Prevent first/last logos from sitting flush at edges
   Applied: 2026-08-10 | Review after theme upgrade
   ============================================================ */

/* Add outer left/right padding to the logo list wrapper */
#shopify-section-template--22427000570089__logo_list_yUgmDR .logo-list__wrapper {
  padding-left: 40px !important;
  padding-right: 120px !important;
}

/* Mobile: reduce outer padding on smaller screens */
@media screen and (max-width: 749px) {
  #shopify-section-template--22427000570089__logo_list_yUgmDR .logo-list__wrapper {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

/* ============================================================
   Increase logo size in Logo List section
   Author: Rex
   Section: template--22427000570089__logo_list_FEEUVd
   Target:  img inside .logo-item > a.link
   Reason:  Default width=200 height=150 too small, esp. mobile
   Applied: 2026-08-10 | Review after theme upgrade
   ============================================================ */

/* Desktop: increase logo size */
#shopify-section-template--22427000570089__logo_list_FEEUVd .logo-item img {
  width: 240px !important;  /* Increase from default 200px rendered size — adjust as needed */
  height: auto !important;  /* Maintain aspect ratio */
}

/* Mobile: further adjust if needed */
@media screen and (max-width: 749px) {
  #shopify-section-template--22427000570089__logo_list_FEEUVd .logo-item img {
    width: 110px !important;  /* Adjust for mobile — increase if still too small */
    height: auto !important;
  }
}

/* ============================================================
   Fix logo overlap in Logo List section after size increase
   Author: Rex
   Section: template--22427000570089__logo_list_FEEUVd
   Target:  .logo-item elements inside chaser-lights
   Reason:  Logos overlapping after size increase — adding gap
   Applied: 2026-08-10 | Review after theme upgrade
   ============================================================ */

/* Add horizontal spacing between each logo item */
#shopify-section-template--22427000570089__logo_list_FEEUVd .logo-item {
  margin: 0 60px !important; /* Adjust value if more/less gap needed */
  flex-shrink: 0 !important; /* Prevent logos from being squished */
}

/* Ensure the logo list doesn't wrap and maintains scroll behaviour */
#shopify-section-template--22427000570089__logo_list_FEEUVd .logo-list {
  gap: 20px !important; /* Backup gap for flex layout */
}

/* ============================================================
   Mobile-specific logo spacing for Logo List section FEEUVd
   Author: Rex
   Section: template--22427000570089__logo_list_FEEUVd
   Reason:  Smaller logo size on mobile needs tighter spacing
   Applied: 2026-08-10 | Review after theme upgrade
   ============================================================ */

/* Mobile: tighter spacing to match smaller logo size */
@media screen and (max-width: 749px) {
  #shopify-section-template--22427000570089__logo_list_FEEUVd .logo-item {
    margin: 0 20px !important; /* Reduced from desktop 20px — adjust as needed */
  }

  #shopify-section-template--22427000570089__logo_list_FEEUVd .logo-list {
    gap: 10px !important;
  }
}

/* ============================================================
   Add left/right outer margin to Logo List section
   Author: Rex
   Section: template--22427000570089__logo_list_FEEUVd
   Reason:  Prevent first/last logos from sitting flush at edges
   Applied: 2026-08-10 | Review after theme upgrade
   ============================================================ */

/* Add outer left/right padding to the logo list wrapper */
#shopify-section-template--22427000570089__logo_list_FEEUVd .logo-list__wrapper {
  padding-left: 40px !important;
  padding-right: 120px !important;
}

/* Mobile: reduce outer padding on smaller screens */
@media screen and (max-width: 749px) {
  #shopify-section-template--22427000570089__logo_list_FEEUVd .logo-list__wrapper {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

/* ============================================================
   Announcement bar text size control — stronger override
   Author: Rex
   Section: sections--22427000963305__announcement_bar_ELtzAV
   Target:  All text elements inside announcement slider
   Reason:  link--text font-size not responding — targeting
            parent chain and using * wildcard as fallback
   Applied: 2026-08-10 | Review after theme upgrade
   ============================================================ */

/* Attempt 1: Target the anchor and all children directly */
#shopify-section-sections--22427000963305__announcement_bar_ELtzAV .announcement-slider .link--text,
#shopify-section-sections--22427000963305__announcement_bar_ELtzAV .announcement-slider a {
  font-size: 1.1rem !important;
}

/* Attempt 2: Target the slide li element to override inherited size
#shopify-section-sections--22427000963305__announcement_bar_ELtzAV .slider-slide {
  font-size: 1.2rem !important;
}
*/

/* Attempt 3: Override at the announcement-bar div level
#shopify-section-sections--22427000963305__announcement_bar_ELtzAV .announcement-bar {
  font-size: 1.2rem !important;
}
*/

/* ============================================================
   PRE-LAUNCH: Hide cart icon from header navigation
   Author: Rex
   Target: modal-opener.header-cart-bubble (site-wide)
   Reason: Two-step launch — hide cart until store opens for sales
   Applied: 2026-08-10 | TEMPORARY — remove on launch day
   ============================================================ */

/* Hide cart bubble/icon from header */
modal-opener.header-cart-bubble {
  display: none !important;
}

/* =============================================
   Search Results Page - Festival Green Background
   Targets the full-page background on /search
   Section type: main-search
   Applied: August 2026
   ============================================= */

/* Option 1: Full search page background via body class (broadest coverage) */
body.template-search {
  background-color: #00843D; /* Festival green */
}

/* Option 2: Targets the facet vertical wrapper container
   (covers the inner search results layout area) 
.facet-vertical-wrapper {
  background-color: #00843D; /* Festival green 
}*/

/* Option 3: Targets the product grid container specifically
   (use if you only want the results area green, not the full page)
#Product-Grid-Container,
.product-grid-container {
  background-color: #00843D; /* Festival green
}*/

/* =============================================
   Sold Out Badge - Search Results Page
   Extends badge styling to the /search page
   product cards (same badge used on collection
   and product listing pages)
   Applied: August 2026
   ============================================= */

/* Targets the sold out badge on product cards
   in the search results grid */
body.template-search .card-badges .badge.sold-out-badge {
  color: #8b0000;
  background-color: #ffffff; /* change to your desired color */
}

/* Targets the sold out label near the price
   in the search results grid (separate instance) */
body.template-search .price__badge-sold-out .badge.sold-out-badge {
  color: #8b0000;
  background-color: #ffffff; /* change to your desired color */
}

/* =============================================
   Search Results - "No Results" Empty State
   Purpose: Styles the no-results message area
            on the /search page
   Selector source: confirmed from main-search.liquid
   Target element: div.empty-title inside
                   div.paginate-content--empty
   Applied: August 2026
   To revert: Remove or comment out all rules below
   ============================================= */

/* Wrapper for the empty/no-results state */
body.template-search .paginate-content--empty {
  text-align: center !important;  /* Centre-align the whole block */
  padding: 3rem 1rem !important;  /* Add breathing room above and below */
}

/* The actual "no results" message text — div.empty-title */
body.template-search .paginate-content--empty .empty-title {
  color: #FFFFFF !important;      /* White text to contrast festival green background */
  font-size: 2rem !important;     /* Large, prominent heading */
  font-weight: bold !important;   /* Bold for emphasis */
  opacity: 0.8 !important;
}

/* =============================================
   Collection Page - "No Results" Empty State
   Purpose: Matches the no-results message style
            from the Search Results page
   Selector confirmed via browser Inspect tool
   Target element: div.empty-title inside
                   div.paginate-content--empty
   Applied: August 2026
   To revert: Remove or comment out all rules below
   ============================================= */

/* Wrapper for the empty/no-results state */
body.template-collection .paginate-content--empty {
  text-align: center !important;  /* Centre-align the whole block */
  padding: 3rem 1rem !important;  /* Add breathing room above and below */
}

/* The actual "no results" message text — div.empty-title */
body.template-collection .paginate-content--empty .empty-title {
  color: #FFFFFF !important;      /* White text - consistent with search results page */
  font-size: 2rem !important;     /* Large, prominent heading */
  font-weight: bold !important;   /* Bold for emphasis */
  opacity: 0.8 !important; 
}

/* ============================================
   Blog Listing Page Title - Force Show
   - Overrides global h1.text-content-heading hide rule
   - Scoped to blog template only
   - Added: Rex, 11 August 2026
   ============================================ */

.template-blog h1.text-content-heading {
  display: inline-block !important; /* Show title on blog listing page only */
  background-color: transparent !important; /* Remove dark red badge background */
  color: inherit !important;               /* Revert to theme default text colour */
  padding: 0 !important;                   /* Remove badge padding */
  border-radius: 0 !important;            /* Remove badge rounded corners */
}

/* ============================================
   Policy Page Background Color - Christmas Green
   - Targets Shopify's native policy page containers
   - Works for all policy pages (privacy, refund, etc.)
   - Added: Rex, 11 August 2026
   ============================================ */

/* Main policy container background */
.shopify-policy__container {
  background-color: #165B33 !important; /* Christmas festival green */
}

/* Full page background fallback */
body:has(.shopify-policy__container) {
  background-color: #165B33 !important; /* Matches container */
}

/* ============================================
   Mobile Menu Drawer Customisations
   - Login button, social icons, hide help text
   - Added: Rex, 11 August 2026
   ============================================ */

/* Login button - Christmas green */
.menu-drawer .button--secondary {
  background-color: #165B33 !important; /* Christmas festival green */
  color: #ffffff !important;            /* White text */
  border-color: #165B33 !important;     /* Match border to background */
}

/* Social media icons - Christmas green */
.menu-drawer .list-social a,
.menu-drawer .list-social svg {
  color: #165B33 !important;            /* Icon colour */
  fill: #165B33 !important;             /* SVG fill */
}

/* Hide "Need help? Call us" bottom message in mobile menu */
.header-contact {
  display: none !important; /* Suppress help/call us text in mobile drawer */
}

/* ============================================
   Default Page Template - Reduce Bottom Spacing
   - Targets main content wrapper on page templates
   - Overrides default bottom padding on MainContent
   - Added: Rex, 11 August 2026
   ============================================ */

.template-page #MainContent {
  padding-bottom: 0 !important; /* Remove excess bottom spacing */
  margin-bottom: 0 !important;  /* Remove excess bottom margin */
}

/* ============================================
   Default Page Template - Remove 100vh min-height gap
   - Overrides body min-height on page template only
   - Inherited from body#Top.color-gradient-1.gradient.template-page
   - Added: Rex, 12 August 2026
   ============================================ */

body.template-page {
  min-height: unset !important; /* Remove forced 100vh minimum height */
}

/* ============================================================
   Recently Viewed Products — Background Color
   Section: recently_viewed_products_Eq9Qdm
   Color: Festival Red (#9B1B30) — premium burgundy red
   Applied: 2026-08-14 | Rex
   ============================================================ */

#shopify-section-template--22427000832233__recently_viewed_products_Eq9Qdm {
  background-color: #9B1B30;
}