/** Shopify CDN: Minification failed

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

**/
@font-face {
  font-family: 'Dolce Vita Light';
  src: url('/cdn/shop/files/Dolce_Vita_Light.ttf?v=1745672165') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

.banner__heading {
  font-family: 'Dolce Vita Light', Arial, sans-serif !important;
  font-size: clamp(2.5em, 6vw, 6em) !important;
  font-weight: 400 !important;
  text-shadow: none !important;
  margin: 0;
  padding: 2rem 2rem 0 !important;
  line-height: 1.2;
  letter-spacing: 0.4em;
  position: relative;
  z-index: 2;
  white-space: normal; /* Allow text to wrap */
  overflow-wrap: break-word; /* Ensure words break if needed */
  transition: font-size 0.1s ease-out;
  color: #000000 !important;
}

/* For larger screens keep nowrap */
@media screen and (min-width: 1200px) {
  .banner__heading {
    white-space: nowrap;
  }
}

/* Create full-width background that extends to the top of the banner */
.banner__content--top-left .banner__box {
  position: relative;
  padding-top: 0 !important;
  padding-left: 3vw !important; /* Add some space from the left edge */
  padding-bottom: 0 !important;
  margin-bottom: -0.5rem !important; /* Further reduced negative margin */
  background: none !important;
}

/* Remove the original heading background */
.banner__heading::before {
  display: none;
}

/* Add custom styling for banner content when positioned at the top */
.banner__content--top-center, .banner__content--top-left {
  padding-top: 0 !important;
}

.banner__content--top-center .banner__box {
  padding-top: 2rem !important;
}

/* Ensure page width doesn't affect banner content */
.banner__content.page-width {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media screen and (max-width: 749px) {
  .banner__heading {
    font-size: clamp(2.5em, 6vw, 4em) !important;
    padding: 1.5rem 1.5rem 0 !important; /* Smaller padding on mobile */
  }
  
  /* Adjust mobile specific styles */
  .banner__content--top-left .banner__box {
    margin-bottom: -0.25rem !important; /* Further reduced negative margin for mobile */
    padding-left: 5vw !important; /* More space on mobile */
  }
  
  .banner__content--top-left .banner__box::before {
    height: calc(100% + 2rem); /* Adjusted height for mobile */
  }
}

/* ─ Mobile menu: show when open ─ */
.header__inline-menu[aria-hidden="false"] {
  display: flex !important;
  flex-direction: column !important;
}

/* ─ Stack the links one item per line ─ */
.header__inline-menu[aria-hidden="false"] .list-menu--inline {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.header__inline-menu[aria-hidden="false"] .list-menu__item {
  width: 100% !important;
}

/* Mobile & desktop click-to-open menu width override */
nav.header__inline-menu {
  min-width: 0 !important;     /* remove the 200px default */
  width: auto !important;      /* let it hug its contents */
  max-width: none !important;  /* allow it to expand as needed */
}

nav.header__inline-menu .list-menu__item {
  white-space: nowrap !important; /* prevent text wrapping */
  overflow: visible !important;   /* allow text to be fully visible */
  width: 100% !important;         /* ensure full width usage */
  box-sizing: border-box !important; /* include padding in width calculation */
}

/* Ensure the mobile menu dropdown has sufficient width */
.header__inline-menu[aria-hidden="false"] {
  min-width: max-content !important; /* ensure it's wide enough for content */
  width: max-content !important;     /* let it size to content */
}

/* Custom footer collapse - revised version */
/* Hide all top content in the footer */
.footer__content-top {
  display: none !important;
}

/* Make the footer a fixed height */
.footer {
  height: 5em !important;
  min-height: 5em !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-color: #252525 !important;
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Center the bottom content */
.footer__content-bottom {
  border-top: none !important;
  padding-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  width: 100% !important;
}

.footer__content-bottom-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important; /* Changed from nowrap to wrap */
  max-width: 100%; /* Ensure it doesn't overflow */
}

/* Ensure text is clearly visible on dark background */
.footer, .footer a, .copyright__content, .policies a {
  color: white !important;
}

/* Add some spacing between items */
.copyright__content, .policies li {
  margin: 0 0.5rem !important;
}

/* Slideshow two-column layout */
.slide-content {
  display: flex;
  height: 100%;
  width: 100%;
}

/* Default styles (medium screens)
   NOTE: width rules no longer use !important so the Swiper
   section's inline <style> tag can override when needed. */
.slide-text-column {
  width: 40%;
  background-color: #F6F5E8;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}

.slide-image-column {
  width: 60%;
  height: 100%;
  position: relative;
}

.slide-image-column img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Large screens - make image column skinnier */
@media screen and (min-width: 1200px) {
  .slide-text-column,
  .slide-image-column {
    /* widths come from the section-specific stylesheet */
  }
}

/* Approaching mobile - adjust proportions and height */
@media screen and (min-width: 750px) and (max-width: 990px) {
  .slide-text-column {
    width: 45% !important;
  }
  
  .slide-image-column {
    width: 55% !important;
  }
  
  .swiper-container,
  .swiper-slide {
    height: 550px !important;  /* Reduce height as we approach mobile */
  }
}

/* Mobile styles */
@media (max-width: 749px) {
  .swiper-container,
  .swiper-slide {
    height: auto !important;
    min-height: unset !important;
  }

  .slide-content {
    flex-direction: column;
    background-color: #F6F5E8;
  }
  
  .slide-image-column {
    width: 100% !important;
    height: 65vh !important;  /* Increased from 50vh */
    max-height: 600px;       /* Increased from 400px */
    order: 1;
    background-color: #F6F5E8;
  }
  
  .slide-image-column img {
    max-width: 500px;
    width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
  }
  
  .slide-text-column {
    width: 100% !important;
    min-height: unset;
    order: 2;
    padding: 2rem;
  }
}

/* Adjust filter padding on medium screens */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .custom-filter-trigger-container.page-width {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

/* Remove old duplicate styles */
.slideshow__left-box,
.slideshow__right-image {
  display: none !important;
}

/* Slideshow split layout */
.slideshow__split {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.slideshow__left {
  width: 50%;
  background-color: #F6F5E8;
  display: flex;
  align-items: flex-start;
  padding: 2rem;
  box-sizing: border-box;
  overflow: hidden; /* Contain the content */
}

.slideshow__text-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.slideshow__text.banner__box {
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.banner__box .banner__heading {
  font-family: 'Dolce Vita Light', Arial, sans-serif !important;
  font-size: clamp(2em, 4vw, 4.5em) !important;
  font-weight: 400 !important;
  white-space: normal;
  word-wrap: break-word;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

.banner__box .banner__text {
  margin-top: 2rem !important;
  color: #000000 !important;
  text-align: left !important;
  width: 100%;
  font-size: clamp(0.9em, 1.5vw, 1.1em);
  white-space: normal;
  word-wrap: break-word;
}

.slideshow__right {
  width: 50%;
  position: relative;
  overflow: hidden;
}

/* Target all possible heading combinations */
.slideshow__split .banner__heading,
.slideshow__left .banner__heading,
.slideshow__text-wrapper .banner__heading,
.slideshow__text.banner__box .banner__heading,
.banner__box .banner__heading,
h2.banner__heading {
  font-family: 'Dolce Vita Light', Arial, sans-serif !important;
  font-size: clamp(2em, 4vw, 4.5em) !important;
  font-weight: 400 !important;
  text-shadow: none !important;
  margin: 0;
  padding: 0 !important;
  line-height: 1.2;
  letter-spacing: normal !important;
  color: #000000 !important;
  text-align: left !important;
  width: 100% !important;
  white-space: normal !important;  /* Allow text to wrap */
  overflow: visible !important;    /* Show all content */
  word-wrap: break-word !important;  /* Break long words if needed */
}

.slideshow__right .banner__media,
.slideshow__right .banner__media img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media screen and (min-width: 750px) and (max-width: 990px) {
  .slideshow__left {
    padding: 1rem 1.5rem 2rem 1.5rem;  /* Slightly reduced padding for medium screens */
  }
  
  .banner__box .banner__text {
    font-size: 0.9em;  /* Slightly smaller text for medium screens */
  }
}

@media screen and (max-width: 749px) {
  .slideshow__split {
    flex-direction: column;
    min-height: auto;
  }

  .slideshow__left,
  .slideshow__right {
    width: 100%;
    min-height: 300px;
  }

  .slideshow__left {
    order: 2;
    padding: 1.5rem;
  }

  .slideshow__right {
    order: 1;
  }

  .slideshow__text-wrapper {
    width: 100%;
  }

  /* Show heading in header on mobile */
  .header__mobile-title {
    display: block !important;
    opacity: 1;
    visibility: visible;
    font-family: 'Dolce Vita Light', Arial, sans-serif !important;
    font-size: 1.8em !important;
    font-weight: 400 !important;
    color: #000000 !important;
    margin: 0.5rem 0 0 0;
    padding: 0;
    line-height: 1.2;
    letter-spacing: normal !important;
    text-align: left !important;
    position: relative;
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.1s ease-out;
  }

  /* Create the sliding reveal effect */
  .header__mobile-title::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F6F5E8;
    transform-origin: right;
    animation: revealText 1.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  }

  @keyframes revealText {
    0% {
      transform: scaleX(1);
    }
    100% {
      transform: scaleX(0);
    }
  }

  /* Remove old animations and effects */
  .header__mobile-title:hover {
    letter-spacing: normal;
  }

  /* Adjust header layout for mobile */
  .header {
    grid-template-areas: 'left-icons heading icons';
    grid-template-columns: auto 1fr auto !important;
    padding: 1rem;
    align-items: center;
  }

  .header__icons {
    display: flex;
    align-items: center;
    gap: 0.5rem;  /* Reduced from 1rem for tighter spacing on mobile */
  }

  /* Ensure icons stay on the right */
  .header__icon--cart {
    margin-right: 0;
  }

  /* Adjust the hamburger menu position */
  .header__inline-menu-wrapper {
    margin-right: 1rem;
  }

  .slideshow__text.banner__box {
    max-width: calc(100% - 4rem);  /* Full width minus margins on mobile */
    margin-left: 2rem !important;
    margin-right: 2rem !important;
  }

  /* Remove any background bleed during the mobile header animation */
  .header__mobile-title.mobile-header-anim {
    background: none !important;
    background-color: transparent !important;
  }
  .header__mobile-title.mobile-header-anim .mh-letter {
    background: none !important;
    background-color: transparent !important;
  }
  /* Also target any pseudo-elements */
  .header__mobile-title.mobile-header-anim::before,
  .header__mobile-title.mobile-header-anim::after {
    background: none !important;
    background-color: transparent !important;
  }
  .header__mobile-title.mobile-header-anim .mh-letter::before,
  .header__mobile-title.mobile-header-anim .mh-letter::after {
    background: none !important;
    background-color: transparent !important;
  }
}

/* Override any conflicting styles */
.banner__media {
  position: relative !important;
  height: 100% !important;
}

/* Hide mobile title by default (desktop view) */
.header__mobile-title {
  display: none !important;
  opacity: 0;
  visibility: hidden;
}

@media screen and (max-width: 749px) {
  /* Show heading in header on mobile */
  .header__mobile-title {
    display: block !important;
    opacity: 1;
    visibility: visible;
    font-family: 'Dolce Vita Light', Arial, sans-serif !important;
    font-size: 1.8em !important;
    font-weight: 400 !important;
    color: #000000 !important;
    margin: 0.5rem 0 0 0;
    padding: 0;
    line-height: 1.2;
    letter-spacing: normal !important;
    text-align: left !important;
    position: relative;
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.1s ease-out;
  }

  /* Create the sliding reveal effect */
  .header__mobile-title::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F6F5E8;
    transform-origin: right;
    animation: revealText 1.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  }

  @keyframes revealText {
    0% {
      transform: scaleX(1);
    }
    100% {
      transform: scaleX(0);
    }
  }

  /* Remove old animations and effects */
  .header__mobile-title:hover {
    letter-spacing: normal;
  }

  /* Adjust header layout for mobile */
  .header {
    grid-template-areas: 'left-icons heading icons';
    grid-template-columns: auto 1fr auto !important;
    padding: 1rem;
    align-items: center;
  }

  .header__icons {
    display: flex;
    align-items: center;
    gap: 0.5rem;  /* Reduced from 1rem for tighter spacing on mobile */
  }

  /* Ensure icons stay on the right */
  .header__icon--cart {
    margin-right: 0;
  }

  /* Adjust the hamburger menu position */
  .header__inline-menu-wrapper {
    margin-right: 1rem;
  }
}

.mobile-header-anim .mh-letter {
  animation: mh-fade-up 0.7s ease-out forwards;  /* Change duration (0.7s) and timing (ease-out) */
}

/* Mobile header letter animation – single source of truth */
@keyframes header-slide-up {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@media (max-width: 749px) {
  .header__mobile-title span {
    display: inline-block;
    opacity: 0;
    animation: header-slide-up 0.8s ease-out forwards;
  }
}

/* Swiper heading animation – single source of truth */
@keyframes swiper-slide-up {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.swiper__heading span {
  display: inline-block;
  opacity: 0;
  animation: swiper-slide-up 0.8s ease-out forwards;
}

/* Swiper heading base styles */
.swiper__heading {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s ease-out;
}

.swiper__heading.fonts-loaded {
  opacity: 1;
  visibility: visible;
}

/* === MOBILE • centre the slide image === */
@media (max-width: 749px){
  .slide-content{                 
    display: flex;
    flex-direction: column;
    align-items: stretch;        
  }
  
  /* More specific selector to override any inherited padding */
  .swiper-slide .slide-content .slide-image-column,
  .slide-image-column{           
    width: 100% !important;
    height: 65vh !important;     /* Match the height here too */
    padding: 0 !important;       /* Removed all padding */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F6F5E8;
  }
  
  .slide-image-column img{
    max-width: 500px;
    width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
  }
  
  /* Make ALL text containers full width */
  .slide-text-column,
  .text-container,
  .banner__box,
  .slideshow__text-wrapper,
  .slideshow__text.banner__box {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 17px 50px !important;  /* Changed top/bottom padding to 17px */
    box-sizing: border-box !important;
  }

  /* Ensure text elements are also full width */
  .hero-kicker,
  .hero-headline,
  .hero-body {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Slideshow button styles */
.slideshow__button {
  display: inline-block !important;
  padding: 12px 24px !important;
  margin-top: 20px !important;
  border: 1px solid #000000 !important;
  background: transparent !important;
  color: #000000 !important;
  text-decoration: none !important;
  font-family: var(--font-body), sans-serif !important;
  font-size: 1em !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  width: fit-content !important;  /* Make button width fit its content */
}

.slideshow__button--secondary {
  background: #000000 !important;
  color: #FFFFFF !important;
}

.slideshow__button:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

.slideshow__button--secondary:hover {
  background: rgba(0, 0, 0, 0.8) !important;
}

.text-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;  /* Align items to the left */
}

@media (max-width: 749px) {
  .slideshow__button {
    padding: 10px 20px !important;
    font-size: 0.9em !important;
    margin-top: 15px !important;
    width: fit-content !important;  /* Ensure fit-content works on mobile too */
  }
  
  .text-container {
    align-items: flex-start !important;  /* Keep left alignment on mobile */
  }
}

/* Text scaling for all screen sizes */
:root {
  /* kicker (small label) */
  --kicker-size-min: 1.3rem;          /* increased by 30% from 1rem */
  --kicker-size-max: 1.56rem;         /* increased by 30% from 1.2rem */
  --kicker-size-vw: 1.3vw;           /* increased proportionally */
  --kicker-weight: 600;
  --kicker-color: #555;
  --kicker-spacing: 0.1em;

  /* hero headline (independent sizing) */
  --hero-headline-size-min: 1.8rem;   /* desktop min */
  --hero-headline-size-max: 2.4rem;   /* desktop max */
  --hero-headline-size-vw: 3vw;      /* desktop viewport scaling */
  --hero-headline-weight: 450;
  --hero-headline-color: #222;
  --hero-headline-spacing: normal;

  /* body (paragraph) */
  --body-size-min: 1.6rem;          /* increased to 16px base */
  --body-size-max: 1.87rem;         /* proportional increase for max */
  --body-size-vw: 1.2vw;           /* proportionally increased viewport scaling */
  --body-weight: 400;
  --body-color: #444;
  --body-line-height: 1.6;
}

.hero-kicker {
  font-size: clamp(var(--kicker-size-min), var(--kicker-size-vw), var(--kicker-size-max)) !important;
  font-weight: var(--kicker-weight);
  color: var(--kicker-color);
  letter-spacing: var(--kicker-spacing);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.hero-headline {
  font-family: var(--font-body), sans-serif;
  font-size: clamp(var(--hero-headline-size-min), var(--hero-headline-size-vw), var(--hero-headline-size-max)) !important;
  font-weight: var(--hero-headline-weight);
  color: var(--hero-headline-color);
  letter-spacing: var(--hero-headline-spacing);
  line-height: 1.2;
  margin: 0 0 1rem;
}

.hero-body {
  font-size: clamp(var(--body-size-min), var(--body-size-vw), var(--body-size-max)) !important;
  font-weight: var(--body-weight);
  color: var(--body-color);
  line-height: var(--body-line-height);
  margin: 0;
}

@media (max-width: 749px) {
  :root {
    /* Mobile-specific size adjustments */
    --kicker-size-min: 1.235rem;     /* increased by 30% from 0.95rem */
    --kicker-size-max: 1.3rem;       /* increased by 30% from 1rem */
    --kicker-size-vw: 2.6vw;         /* increased proportionally */

    /* hero headline mobile sizes */
    --hero-headline-size-min: 2rem;   /* increased to 2rem */
    --hero-headline-size-max: 2.2rem; /* proportionally increased */
    --hero-headline-size-vw: 3vw;    /* mobile specific */

    --body-size-min: 1.43rem;         /* increased by 30% from 1.1rem */
    --body-size-max: 1.56rem;         /* increased by 30% from 1.2rem */
    --body-size-vw: 2.6vw;           /* increased proportionally */
  }
}

/* Import text content block styles */
@import url('text-content-block.css');

/* Removed the conflicting rule that allowed wrapping - we want consistent no-wrap behavior */

/* Custom Text Logo for Non-Homepage Pages (DECOFLORA) */
.custom-non-homepage-logo-container {
  text-align: left !important;
  width: 100%; /* Ensure it can be centered if header is flex */
}

.custom-text-logo-non-homepage {
  font-family: 'Dolce Vita Light', Arial, sans-serif;
  font-size: 28px;         /* Adjust to your desired size */
  color: #000000;           /* Adjust to your desired color - black */
  font-weight: 400;        /* Matches the slideshow heading, adjust if needed */
  letter-spacing: 0.05em;  /* Slight letter spacing, adjust as desired */
  line-height: 1.2;        /* Matches the slideshow heading, adjust if needed */
  text-transform: uppercase; /* Make text uppercase like DECOFLORA */
  margin: 0;               /* Resets default paragraph margin */
  padding: 0;
}

/* Initial state for the custom text logo to hide before animation */
.custom-text-logo-non-homepage {
  opacity: 0;
  visibility: hidden;
  /* Ensure other styles like font-family, size, color, etc., are still defined from previous steps */
}

/* Styling for dynamically created spans within the custom text logo for animation */
.custom-text-logo-non-homepage span {
  display: inline-block;
  opacity: 0; /* Will be overridden by animation */
  animation: swiper-slide-up 0.8s ease-out forwards; /* Use the existing animation */
}

/* Styling for the homepage link on the custom text logo */
.custom-text-logo-link-non-homepage,
.custom-text-logo-link-non-homepage:hover,
.custom-text-logo-link-non-homepage:visited,
.custom-text-logo-link-non-homepage:active {
  text-decoration: none; /* Remove underline */
  color: inherit;       /* Inherit color from the .custom-text-logo-non-homepage class */
}

/* Align the custom non-homepage logo to the left */
.custom-non-homepage-logo-container {
  text-align: left !important;
}

/* Reduce collection padding from 50px to 30px in large viewports */
@media screen and (min-width: 750px) {
  .collection.page-width {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}

@media screen and (max-width: 749px) {
  .page-width {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
}

.custom-green-container {
  display: none; /* Hidden by default */
  background-color: #e8f5e9; /* A light green color */
  color: #2e7d32; /* A dark green text color */
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  border: 1px solid #c8e6c9;
}

/* Styling for the custom green container link wrapper */
.custom-green-container-link {
  text-decoration: none !important;
  color: inherit !important;
  display: contents; /* Allow the link to behave like its contents */
}

.custom-green-container-link:hover,
.custom-green-container-link:visited,
.custom-green-container-link:active,
.custom-green-container-link:focus {
  text-decoration: none !important;
  color: inherit !important;
}

@media screen and (max-width: 450px) {
  /* Make the link wrapper inherit the display properties */
  .custom-green-container-link {
    display: block;
    width: 100%;
  }
  
  .custom-green-container {
    display: flex; /* Changed from block to flex */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    margin-bottom: 0 !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0;
    min-height: 48px; /* Set a min-height to ensure alignment */
  }

  .custom-green-container .price-item {
    font-family: 'Montserrat Thin', sans-serif !important;
    font-weight: 100 !important;
    color: rgba(var(--color-foreground), 0.75) !important;
  }

  .original-product-title {
    display: none;
  }

  .product-card__arrows {
    margin-top: 0 !important;
  }

  .product-card__arrows .price-item {
    font-size: clamp(1.3rem, 0.7rem + 2vw, 1.6rem) !important;
  }

  .header.page-width {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

@media screen and (max-width: 350px) {
  .custom-green-container {
    flex-direction: column;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .product-card__prev,
  .product-card__next {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .product-card__middle-content-area {
    display: none !important;
  }

  .product-card__arrows {
    justify-content: center !important;
    gap: 10px !important;
    flex-grow: 0 !important; /* Stop the container from growing */
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important; /* Keep a little space above the add to cart button */
  }

  .custom-green-container .price-item {
    font-size: 12px !important;
  }

  .product-card-wrapper .quick-add__submit {
    font-size: 13px !important;
  }

  .custom-text-logo-non-homepage {
    font-size: 22px !important; /* Adjusted for smaller screens */
  }

  .header.page-width {
    padding-left: 15px !important;
    padding-right: 5px !important;
  }
}

/* Red box around header icons on homepage only */
.homepage-only .header__icons {
  padding: 10px !important;
}

@media screen and (min-width: 990px) {
  .homepage-only .header.page-width {
    max-width: 100vw !important;
    width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 80px !important;
  }
  .homepage-only .header__icons {
    position: static;
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding-right: 0 !important;
  }
}

/* === Large desktop: allow slide height to grow with aspect ratio === */
@media (min-width: 1280px) {
  /* allow the slide itself to grow */
  .mySwiper,
  .mySwiper .swiper-slide { height: auto !important; }

  /* remove 850-px cap so aspect-ratio controls height */
  .mySwiper .slide-image-column { max-height: none; }

  /* keep both columns equal height so row never collapses */
  .mySwiper .slide-content     { align-items: stretch; }
  .mySwiper .slide-text-column { align-self: stretch; }
} 

/* Product title size reduction */
.product__title h1,
.product__title .h1 {
  font-size: calc(var(--font-heading-scale) * 2.2rem) !important; /* Reduced from 3rem */
}

@media screen and (min-width: 750px) {
  .product__title h1,
  .product__title .h1 {
    font-size: calc(var(--font-heading-scale) * 2.8rem) !important; /* Reduced from 4rem */
  }
} 

/* Ensure consistent square aspect ratio for product images on collection grids */
.product-grid .card__inner.ratio::before {
  padding-bottom: 100% !important; /* Force square (1:1) area regardless of original image ratio */
}

.product-grid .media > img {
  object-fit: cover; /* Zoom/crop to fill the square */
} 

/* Adjust product-card aspect ratio to iPhone portrait (3:4) */
.product-grid .card__inner.ratio::before {
  padding-bottom: 133.33% !important; /* 3:4 ratio (width:height) */
} 

/* Make price and (1 of X available) sit neatly on the same line */
[id^="price-"] {
  display: flex;
  align-items: baseline;
  gap: 0.5em; /* space between price and availability text */
}
[id^="price-"] .price {
  margin: 0; /* remove any bottom margin that pushes availability down */
}