/** Shopify CDN: Minification failed

Line 227:8 Unexpected "{"
Line 227:17 Expected ":"
Line 230:8 Unexpected "{"
Line 230:17 Expected ":"
Line 235:8 Unexpected "{"
Line 235:17 Expected ":"
Line 420:37 Expected identifier but found "*"
Line 431:37 Expected identifier but found "*"

**/
@font-face {
  font-family: 'Lucidity';
  src: url('/cdn/shop/files/lucidity-condensed.woff2?v=1744941242') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lazy Dog';
  src: url('/cdn/shop/files/lazy_dog.woff2?v=1744944550') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
:root {
    /* Your existing font variables below */
  --font-heading-family: 'Lucidity', sans-serif;
  --font-body-family:  'Lazy Dog',  sans-serif;
  
}
/* === Mobile font-size adjustments === */
@media screen and (max-width: 749px) {
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.75rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  p, li, .product__description {
    font-size: 2.5rem;
  }
   span {
      font-size: 1.8
   }
  .button {
    font-size: 3rem;
  }
}
/* ——————————————————————
   2) Override Shopify variables & font usage
   ——————————————————————

/* Apply heading font */
.card__heading,
.collection-card__title,
.product-title {
  font-family: var(--font-heading-family) !important;
}

/* Apply body font */
.button,
.product__description,
.cart__contents,
input,
textarea {
  font-family: var(--font-body-family) !important;
}

/* Force heading font in menus & drawers */
.menu-drawer,
.menu-drawer__navigation,
.menu-drawer__menu-item,
.menu-drawer__menu-item > a,
.menu-drawer__submenu {
  font-family: var(--font-heading-family) !important;
}

/* ——————————————————————
   3) Prevent any header animation
   —————————————————————— */
.header__heading,
.site-header {
  animation: none !important;
  transform: none !important;
}

.header__heading img,
.header__heading svg,
.site-header__logo,
.header__heading-logo {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* FINAL FORCE: ensure Lucidity everywhere in header */
html {
  --font-heading-family: 'Lucidity', sans-serif !important;
}
.site-header,
.site-header *,
.header__heading,
.header__heading *,
.header__inline-menu,
.header__inline-menu * {
  font-family: var(--font-heading-family) !important;
}

/* ——— Shop Collections Section Styles ——— */
.shop-collections {
  margin: 2rem auto;
  max-width: var(--page-width);
}
.shop-collections__title {
  font-family: var(--font-heading-family);
  margin-bottom: 1rem;
}
.shop-collections__sort {
  margin-bottom: 2rem;
  font-family: var(--font-body-family);
}
.shop-collections__sort select {
  font-family: var(--font-body-family);
  padding: 0.5rem;
  border-radius: 4px;
}

.collection-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.collection-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 360px; 
  border-radius: 22px;
  overflow: hidden;
  position: relative;
}

.collection-card__media {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: var(--border-radius);
  background: #f3f3f3;
  transition: transform 0.3s ease;
}
.collection-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.collection-card__placeholder {
  width: 100%;
  height: 100%;
  background: #ddd;
}
.collection-card__title {
  font-family: var(--font-heading-family);
  font-size: 1rem;
  text-align: center;
  margin-top: 0.75rem;
}

/* ——— collection-cards: round image bottom corners ——— */
.card--card.card--media .card__media img {
  /* use the same border-radius your cards use */
  border-radius: none;
}

/* ——— Hover “pop-out” effect ——— */
.card-wrapper:hover .card--card {
  transform: translateY(-2rem);  /* pop up by half a rem */
  transition: transform 0.3s ease;
}
/* ——— FAQ: force answer text size on desktop & mobile ——— */
/* desktop */
.faq-section .faq-answer.rte,
.faq-section .faq-text,
.faq-section .faq-answer.rte p {
  font-size: 2.7rem !important;    /* ~20px, adjust as needed */
  line-height: 1.6 !important;
}

/* mobile */
@media screen and (max-width: 749px) {
  .faq-section .faq-answer.rte,
  .faq-section .faq-text,
  .faq-section .faq-answer.rte p {
    font-size: 2rem !important;   /* ~24px on phone */
    line-height: 1.6 !important;
  }
}
/* ——— FAQ: force icon size ——— */
.faq-section .faq-icon {
  width: 2.5rem !important;  /* ~40px */
  height: 2.5rem !important;
}

/* ——— FAQ: force question font-size on desktop & mobile ——— */
/* Desktop questions */
.faq-section .faq-question span {
  font-size: 5rem !important;      /* ~48px on desktop */
  line-height: 1.2 !important;
}

/* Mobile questions */
@media screen and (max-width: 749px) {
  .faq-section .faq-question span {
    font-size: 2.0rem !important;    /* ~32px on phone */
    line-height: 1.2 !important;
  }
}
/* At mobile breakpoints, stack image above text */
@media (max-width: 749px) {
  #faq-{{ section.id }} .faq-content {
    flex-direction: column;
  }
  #faq-{{ section.id }} .faq-image-wrapper {
    margin-right: 0;
    margin-bottom: 0px; /* space between image and text */
    flex: none;          /* allow full width */
  }
  #faq-{{ section.id }} .faq-text {
    flex: none;
  }
}

/* ——— Center the featured collections grid ——— */
.collection-grid,
.grid,
.product-grid {
  justify-content: center;
}
/* ── FORCE-CENTER “Stuff We Use!” heading and its grid ── */
.shop-collections__title {
  display: block !important;      /* make sure it’s full-width */
  width: 100% !important;
  text-align: center !important;  /* center the text */
}

.collection-grid {
  /* center the whole grid in its container */
  justify-content: center !important;
  /* center each card within its own cell */
  justify-items: center !important;
}
/* ——— Center “Our Collections” on Shop Landing (and all other section titles) ——— */
.title-wrapper-with-link {
  display: flex !important;
  justify-content: center !important;
}

/* make sure the H2 inside spans the full width and text is centered */
.title-wrapper-with-link .collection-list-title {
  width: 100%;
  text-align: center !important;
}
/* ——— center all “main-page-title” headings ——— */
.main-page-title,
.page-title {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ——— restyle the Sold out pill globally ——— */
.badge.price__badge-sold-out {
  background-color: #000 !important;    /* your new bg */
  color: #fff !important;               /* your new text color */
  font-size: 1.9rem !important;       /* adjust as needed */
  padding: 0.25em 0.5em !important;      /* pill padding */
  border-radius: 1.1rem !important;      /* fully rounded */
}

/* Add to Cart */
.product-form__submit {
  font-family: 'Lucidity';
  font-size:  3rem !important;
  background-color: white !important;
  color: black !important;
  border: 5px solid black !important;
  padding: 1rem 4rem !important;
  width: 100% !important;
  margin-top: 20px;
  transition: all 0.2s ease;
}
.product-form__submit:hover {
  background-color: white !important;
  color: black !important;
}


/* Buy Now */
.shopify-payment-button__button {
  font-family: 'Lucidity' !important;
  font-size: 18px !important;
  background: white !important;
  color: black !important;
  border: 2px solid black !important;
  border-radius: 20px !important;
  padding: 1rem 4rem !important;
  width: 100% !important;
  margin-top: 10px !important;
  transition: all 0.2s ease !important;
}
.shopify-payment-button__button:hover {
  background-color: black !important;
  color: white !important;
}

/* Kill Shopify Pseudo Borders */
button::before,
button::after,
.shopify-payment-button__button::before,
.shopify-payment-button__button::after {
  display: none !important;
  content: none !important;
  box-shadow: none !important;
}
/* --- CORRECTED QUANTITY PICKER STYLES --- */

/* Removes default theme borders/shadows */
.quantity:before,
.quantity:after {
  display: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Styles the main container for the quantity picker */
.product-form__input--quantity {
  width: 100%;
  text-align: center;
  margin-bottom: 2rem;
}

/* Styles the "QUANTITY" label above the picker */
.quantity__label {
  font-family: "Lucidity", sans-serif !important;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  display: block;
  margin-bottom: 10px;
}

/* Styles the quantity box itself */
.quantity {
  display: flex;
  align-items: center; /* FIX: Changed from 'stretch' to 'center' for proper vertical alignment */
  border: 5px solid black;
  border-radius: 20px; /* Note: Adjusted to match other buttons. Use var(--buttons-radius) if you prefer. */
  background-color: white;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 60px; /* Adjusted for better vertical space */
}

/* Styles the clickable + and - buttons */
.quantity__button {
  background-color: transparent;
  border: none;
  padding: 0 1.5rem; /* FIX: Reduced padding to a reasonable size */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0; /* Keeps the buttons from being squished */
}
.quantity__button svg {
  width: 4rem!important;
  height: 4rem !important;
  stroke: rgba(var(--color-foreground), var(--buttons-border-opacity)) !important;

} 

/* Styles the number input field */
.quantity__input {
  font-family: "Lucidity", sans-serif !important;
  font-size: 2rem;
  color: black;
  background: transparent;
  border: none;
  outline: none;
  text-align: center;
  padding: 5px;
  width: 100%; /* FIX: Allows the input to grow and fill the available space */
  -moz-appearance: textfield;
}

/* Hides the default arrows on number inputs */
.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Center and size the dropdown button */
.product-dropdown-block button[id^="dropdownToggle-"] {
  background: #fff;
  padding: 10px 20px;
  font-size: 3rem; /* Note: your main-product.liquid had 32px, ensure consistency if desired */
  font-family: "Lazy Dog", sans-serif !important;
  border: var(--buttons-border-width);
  border-radius: var(--buttons-radius);
  cursor: pointer;
  width: 100%;
  /* max-width: 320px; /* REMOVED */ */
  /* margin: 0 auto; /* KEEPING THIS for now, it will center text if button text doesn't fill, but button itself will be 100% of wrapper */
  display: block; /* Ensures it takes full width and respects margin auto for text block if not full */
  box-sizing: border-box; /* Add this for good measure */
  text-align: center; /* Ensures text/icon inside are centered */
}

/* Proper container for dropdown alignment */
.product-dropdown-wrapper {
  position: relative;
  width: 100%;
  /* max-width: 320px; /* REMOVED */ */
  /* margin: 0 auto; /* REMOVED - This wrapper should be 100% of product-dropdown-block */
}

/* Fix dropdown menu width and alignment (This part seems okay for menu functionality) */
.product-dropdown-block div[id^="dropdownMenu-"] {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%; /* This will now be 100% of the potentially wider button */
  /* max-width: 320px; /* REMOVE THIS if you want the menu to be as wide as the button if button is wider than 320px */
  background: white;
  border: 5px solid black;
  border-radius: 22px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  z-index: 100;
}

/* Dropdown links */
.product-dropdown-block a {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
  font-family: "Lucidity", sans-serif !important;
}

/* Thumbnails */
.product-dropdown-block a img {
  width: 50px;
  height: auto;
  margin-right: 10px;
  border-radius: 22px;
}
/* --- Animate Product Dropdown (Corrected Method) --- */

/* 1. Set the initial (hidden) state and the transition effect */
div[id^="dropdownMenu-"] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
}

/* 2. Set the final (visible) state when the .is-open class is added */
div[id^="dropdownMenu-"].is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s; /* Ensure there is no delay when opening */
}
/* ────────────────────────────────────────────────────────────────
   COLLECTION CARDS: Fixed Height • Square Thumb • Rounded Corners 
   • Titles • Pop-Out & Zoom
   ──────────────────────────────────────────────────────────────── */

/* 1) Kill Dawn’s ratio hack & lock card height */
.shop-collections .collection-grid .collection-card-wrapper > .card {
  --ratio-percent: 0   !important;  /* disables the inline square padding */
  padding-top:     0   !important;  /* ditto */
  height:          300px !important;/* ← your fixed card height */
  display:         flex !important;
  flex-direction:  column !important;
  overflow:        hidden !important;
  border-radius:   var(--border-radius) !important;
}

/* 2) Keep the image square and rounded at the top only */
.shop-collections .collection-grid .collection-card-wrapper > .card .card__media {
  flex:           0 0 auto !important;   /* stay at its own aspect-ratio */
  width:          100%     !important;
  aspect-ratio:   1/1      !important;
  overflow:       hidden    !important;
  border-top-left-radius:  var(--border-radius) !important;
  border-top-right-radius: var(--border-radius) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}


/* 3) Fill the rest of the card with your title block */
.shop-collections .collection-grid .collection-card-wrapper > .card .card__content {
  flex:            1 1 auto !important;
  display:         flex     !important;
  align-items:     center   !important;
  justify-content: center   !important;
  padding:         0.5rem   !important;
  overflow:        hidden   !important;
}

/* 4) Style the two heading variants you use */
.shop-collections .collection-grid .collection-card-wrapper > .card .collection-card__title,
.shop-collections .collection-grid .collection-card-wrapper > .card .collection-card__heading {
  font-family:   var(--font-heading-family) !important;
  font-size:     1rem                   !important;
  line-height:   1.2                    !important;
  text-align:    center                 !important;
  margin:        0.75rem 0             !important;
  white-space:   nowrap                 !important;
  overflow:      hidden                 !important;
  text-overflow: ellipsis               !important;
}

/* 5) Pop-out the whole card on hover */
.shop-collections .collection-grid .collection-card-wrapper:hover > .card {
  transform:  translateY(-1rem) !important;
  transition: transform 0.3s ease   !important;
}
/* ────────────────────────────────────────────────────────────────
   RESET COLLECTION CARD HEADING MARGINS (make all cards align)
   ──────────────────────────────────────────────────────────────── */
.collection-card__title,
.collection-card__heading {
  margin: 0 !important;         /* kill the default <h3> margins */
  padding: 0.5rem 0 !important; /* give them uniform padding instead */
}

/* if you still need a little breathing room around the content block */
.card-wrapper.collection-card-wrapper > .card .card__content {
  padding: 0.1rem !important;
}

/* ────────────────────────────────────────────────────────────────
   NUDGE COLLECTION CARD TITLES TO THE RIGHT
   ──────────────────────────────────────────────────────────────── */
.collection-card-wrapper .collection-card__title,
.collection-card-wrapper .collection-card__heading {
  /* kill any browser default margin */
  margin: 0 !important;
  /* push them in from the left edge of the card content */
  margin-left: 0.3rem !important;   /* ← adjust this value to taste */
}

/* if you find the inner content container still centers, add: */
.collection-card-wrapper > .card .card__content {
  justify-content: flex-start !important;
  padding-left:    1rem           !important;
}
/* Anchor price to bottom-left of product card */
.product-card-wrapper .card__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  position: relative;
}

.product-card-wrapper .card__information {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  padding-bottom: 2.5rem; /* reserve space for anchored price */
}

.product-card-wrapper .custom-price-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  font-family: 'Lucidity';
  padding: 0.5rem 1rem;
}

.card__content .card__heading {
  margin-bottom: 15px; /* Adjust this value as needed */
}
/* Adjust the size of the filter labels - Alternative */
.facets__disclosure { 
  font-size: 20px; /* Adjust to your desired size */
}
/* Adjust the size of the filter labels */
.facets__summary-inbel {
  font-size: 20px; /* Adjust to your desired size (e.g., 12px, 16px) */
}
/* Adds rounded corners to 'Image with Text' sections */
.image-with-text__media-item {
  border-radius: var(--custom-card-radius);
  border: var(--custom-card-border);
  overflow: hidden;
}
/* Increases all text in the 'Image with Text' content block */
.image-with-text__content .image-with-text__text,
.image-with-text__content > p {
    font-size: 36px;
    line-height: 1.6;
}
/* Final styles for all buttons */
.button,
.button--primary {
    border-radius: 14px; /* This makes the corners 14px round */
    outline: none;        /* This removes the outline */
}
/* Increases the size of the subtitle text in the Rich Text section */
.rich-text__text {
    font-size: 36px;
}
/* Force primary buttons to use theme's border-radius setting */
.button--primary {
  border-radius: var(--buttons-radius) !important;
}
/*
  Adds a solid white drop-shadow to all headings and main menu links.
  Uses relative 'em' units to scale the effect with the font size.
*/
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .header__menu-item, .faq-question span,
.collection-card__title,
.card__heading {
  text-shadow: 0.07em 0.07em 0 #FFFFFF;
}
/**************************************************************
* MOBILE-SPECIFIC REFINEMENTS
* These styles only apply to screens smaller than 750px.
***************************************************************/
@media screen and (max-width: 749px) {

  /* 1. FORCE the subtitle text to be bigger on mobile */
  .rich-text__text {
    font-size: 36px !important; /* The !important rule will force this size */
  }

  /* Make other body text bigger on mobile */
  .image-with-text__text p {
    font-size: 2rem !important;
  }
  
}
/* Custom background for the sticky header element */
.header {
  /* This creates the layering context and makes the original background see-through */
  position: relative;
  isolation: isolate;
  background-color: transparent !important;
}

.header::before {
  /* This creates the new background image layer behind the content */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-image: url('/cdn/shop/files/abstract1.png?v=1752516373');
  background-size: 100%; /* Adjust this percentage to scale the pattern */
  background-position: center 20%;
  background-repeat: no-repeat;
  opacity: 1; /* Adjust for desired visibility */
}
/* --- Custom styles for image banner subtitle --- */

/* Style for DESKTOP screens (750px and wider) */
@media screen and (min-width: 750px) {
  .banner__text p {
    font-size: 5rem;  /* Your original large size for desktop */
    color: #FFFFFF;
  }
}

/* Style for MOBILE screens (up to 749px wide) */
@media screen and (max-width: 749px) {
  /* Rule for the main heading */
  .banner__heading {
    font-size: 5rem; /* Adjust this value */
  }

  /* Rule for the subheading */
  .banner__text p {
    font-size: 3.3rem; /* Adjust this value */
    color: #FFFFFF;
  }
}

/* --- End of custom styles --- */
/* --- Force Transparency for Sections, Keep Header Opaque --- */
main#MainContent {
  background-color: transparent !important;
  background: transparent !important;
}

.shopify-section {
  background-color: transparent !important;
  background: transparent !important;
}

/* Ensure any element explicitly using the '--color-background' variable is transparent,
   unless it's specifically a card background or header-related. */
[class*="color-"] {
  background-color: transparent !important;
  background: transparent !important;
}

/* Override transparency for the collection card itself to allow gradient */
.collection-card-wrapper .card,
.product-card-wrapper .card,
.contains-card--collection,
.contains-card--product {
  background-color: rgb(var(--color-background)) !important; /* Base color for cards */
  background: var(--gradient-background) !important; /* Apply the gradient */
}

/* Ensure the direct container around the collection cards is transparent */
/* This is likely the missing piece for the grey bars. */
.collection-list-component.page-width, /* Common wrapper for collection list sections */
.grid { /* The grid container itself often has a background */
  background-color: transparent !important;
  background: transparent !important;
}

/* Ensure basic page-width and content-container elements are transparent,
   but be careful not to override intended backgrounds like the header. */
.page-width:not(.section-header):not(.header):not(.utility-bar__grid),
.content-container:not(.collection-card-wrapper .card):not(.product-card-wrapper .card) { /* Exclude cards if they are content-containers */
  background-color: transparent !important;
  background: transparent !important;
}
/* --- Global Body Background with Parallax Effect --- */
body {
  background-image: url('/cdn/shop/files/background.png?v=1752897173'); /* Desktop background image */
  background-size: cover; /* Cover the entire viewport */
  background-position: top; /* Center the image */
  background-repeat: repeat; /* Prevent repetition */
}

@media screen and (max-width: 749px) {
  body {
    background-image: url('/cdn/shop/files/mobile_website_background.png?v=1752897179'); /* Mobile background image */
    background-position: top; /* Center for mobile */
    background-size: cover;/* Ensure it covers the mobile screen */
    background-repeat: repeat;
  }
}

@media screen and (max-width: 749px) {
  .product__media-list.slider {
    justify-content: flex-start !important;
  }
}
/* --- Change Product Page Price Font & Size --- */
.product__info-container .price .price-item {
  font-family: 'Lazy Dog', sans-serif !important;
  font-size: 3rem !important; /* Adjust this number to make it bigger or smaller */
}

@media screen and (max-width: 749px) {
  .product__info-container .price .price-item {
  font-family: 'Lazy Dog', sans-serif !important;
  font-size: 2.3rem !important; /* Adjust this number to make it bigger or smaller */
  }
}
/* Make product‐page media fully transparent */
.product__media-wrapper .media,
.product__media-wrapper .global-media-settings {
  background-color: transparent !important;
}

.product__media-wrapper .global-media-settings::after {
  /* remove the inner box‑shadow outline */
  box-shadow: none !important;
}
/* 1) Kill the default highlight on the active thumbnail */
.thumbnail.global-media-settings[aria-current="true"] {
  box-shadow: none    !important;
  outline: none       !important;
}

/* 2) Give it a clean, rounded white border */
.thumbnail.global-media-settings[aria-current="true"] {
  border: 3px solid white    !important;
  border-radius: 1.2rem !important;  /* match your corner radius */
}
@media screen and (max-width: 749px) {
  .thumbnail.global-media-settings[aria-current="true"] {
    border: 3px solid white !important;
    border-radius: 1.5rem !important;
  }
}
  
/*
==============================================
IMAGE BANNER BUTTON STYLES
==============================================
*/

/* --- Mobile Styles (Screens up to 749px) --- */
@media screen and (max-width: 749px) {
  
  /* This moves the button container below the banner on mobile */
  #shopify-section-template--19565948469461__image_banner_467LGb .banner__buttons {
    position: absolute !important;
    bottom: -14rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
  }

  /* This styles the button itself on mobile */
  #shopify-section-template--19565948469461__image_banner_467LGb .button {
    font-size: 2.5rem !important;  /* Appropriate size for mobile */
    padding: 1.2rem 2.5rem !important;
    border-radius: 22px !important;
  }
}

/* --- Desktop Styles (Screens 750px and wider) --- */
@media screen and (min-width: 750px) {

  /* This resets the button container's position on desktop */
  #shopify-section-template--19565948469461__image_banner_467LGb .banner__buttons {
    position: static !important;
  }

  /* This styles the button itself on desktop */
  #shopify-section-template--19565948469461__image_banner_467LGb .button {
    font-size: 6rem !important;
    padding: 0.8rem 4rem !important;
    min-height: 4rem !important;
    border-radius: 32px !important;
  }
}
/* --- Ensure Header Stays On Top of Product Dropdown --- */

.header, .shopify-section-header-sticky {
  position: relative; /* Ensures z-index will apply */
  z-index: 110 !important; /* This value is higher than the dropdown's 100 */
}
/* --- Center Product Buttons on Mobile (Corrected Flexbox Method) --- */

@media screen and (max-width: 749px) {
  /* 1. Make the parent wrapper a flex container to center its content */
  .product__info-wrapper {
    display: flex;
    justify-content: center;
  }

  /* 2. Give the button container a width so it doesn't stretch to full-width */
  .product__info-container {
    width: 90%; /* Use a percentage for better adaptability */
    max-width: 450px; /* Optional: cap the width on larger mobile screens */
  }
}
/* --- Increase Product Title Size on Mobile --- */

@media screen and (max-width: 749px) {
  .product__title h1 {
    font-size: 5rem !important; /* Adjust this value as needed */
    line-height: 1.2 !important; /* Adjust line height for the new size */
  }
}
/* --- GLOBAL BUTTON HOVER EFFECT --- */

/* Add a smooth transition to all standard buttons */
.button,
.button--primary {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

/* Apply the pop-out effect on hover */
.button:not([disabled]):hover,
.button--primary:not([disabled]):hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}
/* --- Increase Product Description Font Size --- */

/* Sets the font size for desktop */
.product__description p {
  font-size: 1.8rem !important; /* Adjust as needed */
  line-height: 1.6 !important;
}

/* Sets a different font size for mobile */
@media screen and (max-width: 749px) {
  .product__description p {
    font-size: 1.6rem !important; /* Adjust as needed */
  }
}
/* --- Mobile Menu Background Image --- */

.menu-drawer__navigation,
.menu-drawer__utility-links {
  /* Fallback color in case the image is slow to load */
  background-color: #000000; 

  /* Your new background image */
  background-image: url('/cdn/shop/files/MOBILE_MENU_BACKGROUND.png?v=1753742511');

  /* Ensures the image covers the entire area without distortion */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Adds some comfortable spacing inside the menu */
  padding: 2rem 1.5rem; 
}

/* This styles the menu links to match your site's heading style */
.menu-drawer__navigation a,
.menu-drawer__utility-links a {
  /* Change the text color to black for high contrast */
  color: #000000; 

  /* Apply your site's signature white text shadow */
  text-shadow: 0.07em 0.07em 0 #FFFFFF;
}
/* --- "Added to Cart" Pop-up Background & Styles (Forced) --- */

/* 1. Sets the background image for the pop-up container */
#cart-notification {
  background-color: #000000 !important;
  background-image: url('/cdn/shop/files/MOBILE_MENU_BACKGROUND.png?v=1753742511') !important;
  background-size: cover !important;
  background-position: center !important;
  border: none !important;
  padding: 2rem !important;
}

/* 2. Styles the text to match your site's heading style */
#cart-notification .cart-notification__heading,
#cart-notification .cart-notification-product__name,
#cart-notification a {
    color: #000000 !important; 
    text-shadow: 0.07em 0.07em 0 #FFFFFF !important;
}

a#cart-notification-button.button--secondary::before,
a#cart-notification-button.button--secondary::after {
  display: none !important;
}
/* --- UNIFIED STYLES FOR ALL CART POP-UP BUTTONS (v3) --- */

/* 1. Hide the problematic pseudo-elements on the 'View Cart' button */
#cart-notification-button::before,
#cart-notification-button::after {
  display: none !important;
}

/* 2. Define the SHARED AESTHETICS for ALL buttons in the pop-up */
#cart-notification .button,
#cart-notification button.link {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border: 4px solid #000000 !important;
  box-shadow: none !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  font-size: 1.6rem !important;
  line-height: 1.5 !important;
}

/* 3. Define the LAYOUT for the MAIN ACTION buttons (View Cart, Check Out, etc.) */
#cart-notification .button:not(.cart-notification__close),
#cart-notification button.link:not(.cart-notification__close) {
  display: block !important;
  width: 100% !important;
  margin-top: 1rem !important;
  padding: 1rem !important;
  text-align: center !important;
}

/* 4. Specifically style the "Check Out" button to be solid black */
#cart-notification form .button {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}

/* 5. Specifically size and position the 'X' CLOSE button */
#cart-notification .cart-notification__close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important; /* Sets a fixed width */
  height: 48px !important; /* Sets a fixed height */
  padding: 0 !important; /* Removes extra padding */
  position: absolute;
  top: 3rem;
  right: 4rem;
}
/* --- Style the Cart Pop-up Border --- */

#cart-notification {
  border: 4px solid #000000 !important;
  border-radius: 20px !important;
  box-shadow: none !important; /* Removes the default theme shadow for a clean look */
}
/* --- Custom Footer Background Styles (Final Version) --- */

/* 1. Target the main footer GROUP wrapper to hold the background */
.shopify-section-group-footer-group {
  position: relative;
  isolation: isolate;
  padding: 5rem 0; /* Adjust padding as needed */
}

/* 2. Create the background image and overlay on this main wrapper */
.shopify-section-group-footer-group::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url('/cdn/shop/files/abstractbottom.png?v=1753340898');
  background-size: 60%;
  background-position: top;
  background-repeat: no-repeat;
  background-color: transparent;
}

/* 3. Make the INNER footer element transparent so the background shows through */
.shopify-section-group-footer-group .footer {
    background: transparent !important;
    border-top: none !important;
}

/* 4. Ensure all text and links in the footer are white */
.shopify-section-group-footer-group,
.shopify-section-group-footer-group a {
  color:rgb(0, 0, 0) !important;
}
/* --- Mobile-Specific Footer Background Styles --- */
@media screen and (max-width: 749px) {
  .shopify-section-group-footer-group::before {
    background-size: cover;       /* Fills the whole space on mobile */
    background-position: center;    /* Centers the image */
  }
}
/* --- Remove All Inner Footer Borders --- */
.footer__content-top,
.footer__content-bottom {
  border: none !important;
}
/* --- Adjust Image Fitting on Desktop --- */
@media screen and (min-width: 750px) {
  .multirow__item img,
  .image-with-text__media img {
    object-fit: contain !important;
  }
}
/* --- Increase Product Card Title Size on Desktop --- */
@media screen and (min-width: 750px) {
  .product-card-wrapper .card__heading {
    font-size: 2.7rem !important; /* Adjust this value as needed */
  }
}
/* --- Adjust Header Menu Font Size on Desktop --- */
@media screen and (min-width: 750px) {
  .header__menu-item {
    font-size: 2.5rem !important; /* Adjust this value as needed */
  }
}
/* --- Make Cart Image Background Transparent (Final Fix) --- */
.cart-item__image-container {
  background-color: transparent !important;
}
/* --- Custom Share Button Font --- */

/* --- Center the Share Button's Container --- */
.share-button {
  display: flex;
  justify-content: center;
}
/* --- Full Custom Style for Share Button (Now Bigger!) --- */
.share-button__button {
  /* Style from before */
  font-family: "Lazy Dog", sans-serif !important;
  background-color: white !important;
  color: black !important;
  border: 4px solid black !important;
  border-radius: 20px !important;

  /* --- NEW CODE TO MAKE IT BIGGER --- */
  font-size: 20px !important;      /* Increase this number for bigger text */
  padding: 10px 20px !important;  /* Adjust these values to change the button size. (Top/Bottom Left/Right) */
}