/* Global Styles */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  background-color: #fff;
  color: #333;
  font-size: 16px; /* Base font size for rem units */
  line-height: 1.6;
}

/* Site Brand Bar */
.site-brand-bar {
  background-color: #fff;
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.site-brand-title {
  font-family: "Fira Sans", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #000;
  margin: 0;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

button {
  cursor: pointer;
  font-family: inherit;
}

h1,
h2,
h3,
h4,
h5 {
  margin-top: 0;
  line-height: 1.2;
}

/* Header Styles */
header {
  padding: 5px 0; /* Adjusted padding */
  border-bottom: 1px solid #d1d1d1;
  background-color: #fff;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left-section {
  display: flex;
  align-items: center;
  margin-left: -25px; /* Pulls the group 10px to the left */
  /* No specific order needed here, it will be the first item in header-container by default */
}

.menu-toggle {
  background: none;
  border: none;
  padding: 10px;
  /* order: 1; */ /* Removed order, handled by parent flex */
  margin-right: 10px; /* Space between hamburger and logo */
  display: flex;
  align-items: center;
}

.hamburger-icon-img {
  max-height: 33px; /* User specified size, 1.3x bigger */
  width: auto;
}

.logo {
  /* order: 2; */ /* Removed order, handled by parent flex */
  line-height: 0;
}

.logo img {
  max-height: 45px; /* User specified size */
  width: auto;
  display: block; /* Ensure it behaves as a block */
}

/* Mobile Nav - hidden on desktop by default */
.mobile-nav {
  /* display: none; */ /* No longer needed here as it's not a direct child of header-container for ordering */
  /* order: 3; */ /* Removed */
  /* Styling for dropdown appearance is in the @media (max-width: 767px) block */
}

.mobile-nav.active {
  display: block; /* JS toggles this for mobile view */
}

/* Styles for the links within .mobile-nav, adapted from old header nav styles */
.mobile-nav ul {
  display: flex; /* Will be column in mobile view */
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav a {
  font-weight: 500;
  color: #555;
  padding: 5px 0;
  text-decoration: none;
}

.mobile-nav a:hover {
  color: #000;
  border-bottom: 2px solid #000;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 35px; /* Increased from 20px for consistency */
  /* order: 4; */ /* Removed order, this will naturally be pushed to the right */
}

.search-btn,
.cart-btn {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  color: #000;
  cursor: pointer;
}

.search-btn {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: normal;
  /* margin-right: 10px; */ /* Removed, parent .header-actions gap now handles spacing */
}

.search-icon-img {
  max-height: 24px; /* Adjusted size, 1.2x bigger */
  width: auto;
  transform: translateY(-2px);
}

.cart-icon-img {
  max-height: 24px; /* Increased to match text size */
  width: auto;
}

.cart-btn {
  display: flex;
  align-items: center;
  gap: 8px; /* Space between icon and count */
}

.cart-count {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px; /* Changed to 15px as requested */
  color: #000;
  font-weight: normal;
  line-height: 1;
  display: inline-block; /* Ensure it's visible */
}

/* Cart Button States - Dynamic Icon Change When Items Present */
.cart-btn.cart-has-items {
  background: none; /* Remove background since the new icon has blue background */
  border-radius: 0; /* Remove border radius */
  padding: 0; /* Remove padding */
  transition: all 0.2s ease; /* Smooth transition */
  display: flex !important; /* Ensure flexbox layout is maintained */
  align-items: center !important; /* Ensure items stay aligned */
  gap: 8px !important; /* Maintain gap */
}

.cart-btn.cart-has-items .cart-icon-img {
  content: url("Images/Cart-item.png"); /* Use the specific cart-item.png */
  max-height: 24px; /* Match the increased size */
  width: auto;
}

.cart-count.cart-count-active {
  color: #ffffff !important; /* White text color since cart-item.png has blue background */
  font-weight: 500; /* Slightly bolder font weight */
  display: inline-block !important; /* Force visibility */
  font-size: 15px !important; /* Ensure font size is maintained */
  position: relative; /* Ensure it's positioned above any potential background issues */
  z-index: 10; /* Ensure it appears above the cart icon */
}

/* Breadcrumbs */
.breadcrumbs {
  padding: 3px 0; /* Reduced from 5px 0 to make section even smaller */
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
  font-size: 0.9rem;
}

.breadcrumbs a {
  color: #555;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumb-separator {
  color: #83887c;
  margin: 0 8px;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 14px;
}

.breadcrumb-current {
  color: #000;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 14px;
}

/* Memberships Page Specific Styles */
.memberships-page {
  padding: 30px 0;
}

.memberships-page h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-align: left;
}

/* == COMPLETELY REMOVE/COMMENT OUT ALL PREVIOUS FILTER STYLES (Original Pills, Complex Chips, first ON-style tabs, dynamic ON-style items) == */
/*
.filter-controls { ... old styles ... }
.filter-btn { ... old styles ... }
._chip_1rezf_59 { ... old styles ... }
.on-filter-nav { ... old styles ... }
.on-filter-item { ... old styles ... }
*/

/* == NEW ON RUNNING STYLE - DYNAMIC FILTER UI STYLES == */
.filter-controls {
  margin-bottom: 15px;
  margin-top: 35px; /* Added to create space above the filter bar */
}

.on-filters-navbar {
  display: flex;
  align-items: center;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 8px; /* For scrollbar or just spacing */
  gap: 8px; /* Initial gap, might be overridden by specific item margins */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.on-filters-navbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Container for chips if we need to group them separately from tabs */
.on-filters-chip-container {
  display: inline-flex; /* So it flows with text tabs */
  align-items: center;
  /* gap: 8px; */ /* Gap will be managed by chip margins for overlap */
  margin-right: 8px; /* Reduced from 16px to bring text tabs closer */
  position: relative; /* For positioning overlapping chips */
}

.on-filter-chip,
.on-filter-text-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px; /* Reduced from 12px 20px */
  line-height: 1.4;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 40px;
  transition: all 0.2s ease-in-out;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  text-decoration: none;
  font-size: 1rem; /* Reduced from 1.1rem */
}

/* Specific Chip Styles */
.on-filter-chip.is-initial-all-active,
.on-filter-chip.is-initial-all-active:focus {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #808080;
  padding: 10px 26px; /* Reduced from 12px 28px */
  outline: none;
}

.on-filter-chip.is-clearable,
.on-filter-chip.is-clearable:focus {
  background-color: #ffffff;
  color: #333333;
  border: 1px solid #d1d1d1;
  /* Vertical padding inherited from base .on-filter-chip (now 10px) */
  padding-left: 18px; /* Reduced from 20px */
  padding-right: 12px; /* Reduced from 14px */
  outline: none;
}

.on-filter-chip.is-clearable:hover {
  border-color: #a0a0a0;
}

.on-filter-chip .on-filter-clear-icon {
  margin-left: 14px; /* Increased from 12px */
  display: inline-flex;
  align-items: center;
  width: 1em;
  height: 1em;
  color: #808080; /* Default icon color for clearable chips */
}

/* Styles for the overlapping chips */
.on-filter-chip.is-secondary-all-chip {
  /* This is the "All X" chip that sits behind */
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1; /* Behind the primary chip */
  /* Inherits .is-clearable styles for background, padding, icon etc. */
  /* Override border and text color for a lighter appearance */
  border-color: #e0e0e0; /* Lighter gray border */
  color: #555555; /* Slightly lighter text color */
  cursor: default; /* Make body of this chip non-interactive visually */
  /* Optionally, make it slightly more transparent or change border if needed */
  /* opacity: 0.8; */
}

/* Lighter icon color specifically for the secondary 'All X' chip */
.on-filter-chip.is-secondary-all-chip .on-filter-clear-icon {
  color: #aaaaaa; /* Lighter gray icon */
  cursor: pointer; /* Ensure the icon is interactive visually */
}

/* Ensure icon color for the primary active category chip is #808080 */
.on-filter-chip.is-primary-active-category-chip {
  /* This is the active category chip e.g. "Weekly X" that sits in front */
  position: relative; /* Stays in flow, but allows z-index */
  z-index: 2; /* In front of the secondary chip */
  margin-left: 10px; /* Adjusted for less overlap, revealing more of the chip behind */
  /* Inherits .is-clearable styles for border, icon etc. */
}

.on-filter-chip.is-initial-all-active .on-filter-clear-icon {
  display: none; /* No icon for the initial "All" active chip */
}

/* Specific Text Tab Styles */
.on-filter-text-tab {
  padding: 10px 12px; /* Reduced from 12px 14px */
  border-radius: 0;
  color: #808080; /* Default light gray for inactive tabs */
  margin: 0 2px; /* Reduced from 0 4px for less space between tabs */
}

.on-filter-text-tab.is-main-all-active {
  color: #000000;
  font-weight: normal; /* Changed from 500, to normal weight */
  border-bottom: 2px solid #000000;
  padding-bottom: calc(10px - 2px); /* Adjusted from calc(12px - 2px) */
}

.on-filter-text-tab:not(.is-main-all-active):hover {
  color: #333333;
}

.results-count {
  font-size: 0.9rem;
  color: #777;
  margin-bottom: 25px;
  text-align: right;
}

/* Product Grid */
.product-grid {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 1 column */
  gap: 30px;
}

/* Product Card */
.product-card {
  background-color: #fff;
  /* border: 1px solid #e0e0e0; */ /* Removed border */
  border-radius: 0; /* Changed from 8px to 0 for sharp edges */
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  position: relative;
}

.product-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.product-image-container {
  /* overflow: hidden; */
  position: relative;
  /* aspect-ratio: 3 / 2; */ /* Removed aspect-ratio to let image define height */
}

.product-image {
  width: 100%;
  height: auto; /* Changed from 100% to auto for natural image height */
  object-fit: contain;
  transition: transform 0.3s ease;
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0); /* Transparent by default */
  transition: background-color 0.3s ease;
  z-index: 1; /* Ensures overlay is above the image but below text if text is moved */
}

.product-info {
  padding: 20px;
  position: relative; /* To ensure it can be layered above overlay if needed */
  z-index: 2; /* Higher than overlay */
  background-color: #fff; /* Ensure it has a background on mobile */
  transition: color 0.3s ease; /* For text color transition on hover */
}

.product-category {
  display: inline-block;
  background-color: #f0f0f0; /* Light grey, adjust as needed */
  color: #555;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.product-title {
  font-size: 1.4rem;
  margin-bottom: 8px;
  color: #333;
}

.product-description {
  font-size: 1rem;
  color: #666;
  margin-bottom: 15px;
  min-height: 40px; /* Ensure consistent height */
}

.product-price {
  font-size: 1.2rem;
  font-weight: bold;
  color: #000;
}

/* Footer Styles */
footer {
  background-color: #000; /* Figma: Black background */
  color: #fff; /* Figma: White text */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* Figma: Helvetica Neue */
  padding: 60px 0; /* Increased padding for more space overall, can adjust */
  margin-top: 0; /* No space above footer */
  font-size: 0.875rem; /* Base font size for footer text, approx 14px if root is 16px */
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 1 column by default */
  gap: 40px; /* Increased gap between columns */
  align-items: start; /* Align items to the start of their grid cell */
}

.footer-column h4 {
  /* e.g., LOCATION, LEARN MORE */
  font-size: 0.8rem; /* Slightly smaller: approx 12.8px if root 16px. Was 0.875rem */
  color: #fff;
  margin-bottom: 25px; /* Space below main titles */
  text-transform: uppercase;
  font-weight: 500; /* Medium weight for titles */
  letter-spacing: 0.05em; /* Slight letter spacing for titles */
}

.footer-column h5 {
  /* e.g., Ferntree Gully */
  font-size: 1rem; /* Approx 16px, bolder and slightly larger */
  color: #fff;
  margin-bottom: 8px;
  font-weight: bold; /* Figma: Location names are bold */
}

.footer-column p {
  /* Base styling for paragraphs in footer columns */
  font-size: 0.9rem;
  color: #e0e0e0;
  line-height: 1.7;
  /* display: block; by default, but ensure no inline override */
}

.footer-column ul li a {
  font-size: 0.9rem;
  color: #e0e0e0;
  line-height: 1.7;
  text-decoration: none;
  display: inline-flex; /* Only for links with icons */
  align-items: center;
}

.footer-column ul li a .external-link-icon {
  margin-left: 0.3em; /* Space between text and icon */
  font-size: 0.9em; /* Slightly smaller icon */
  line-height: 1; /* Ensure it doesn't affect line height of link */
}

.footer-column ul li {
  margin-bottom: 12px; /* Increased space between list items */
}

.footer-column ul li a:hover {
  color: #fff;
  /* text-decoration: underline; */ /* Optional: Add underline on hover if desired */
}

.footer-column.location-info p {
  margin-bottom: 4px; /* Tighter spacing for address lines, hours etc. */
}

.locations-container {
  /* New rule for the wrapper */
  display: flex;
  flex-direction: column; /* Mobile-first: stack locations vertically */
  gap: 30px; /* Space between location blocks on mobile */
}

.footer-column .location {
  /* Wrapper for each location's details */
  /* margin-bottom: 30px; */ /* Removed, gap on parent now handles this */
}
.footer-column .location:last-child {
  margin-bottom: 0;
}

.footer-column:first-child {
  /* Targets location-info effectively */
  margin-top: 0; /* No double margin for the very first column */
}

/* Remove border from columns that might not need it based on visual grouping if any */
/* For now, all columns get a top border as per design structure */

/* Responsive Styles for Footer Grid */
@media (min-width: 768px) {
  .footer-grid {
    /* Define 3 columns for the row after location-info: learn-more | other-links | newsletter */
    grid-template-columns: 1fr 1fr 1.5fr; /* Adjust fr units as needed */
    gap: 45px; /* Increased gap for more space between columns */
  }
  .footer-column.location-info {
    grid-column: 1 / -1; /* Make location-info span full width */
  }
  /* .learn-more-column, .other-links-column, .newsletter will take the 3 columns */

  .footer-column.other-links-column {
    /* To align with the UL below "LEARN MORE" H4 */
    /* H4 font-size: 0.8rem, margin-bottom: 25px. */
    /* Approximate height of H4 (e.g., 0.8rem * 1.2 line-height = 0.96rem) + 25px margin */
    /* Let's assume base font 16px: 0.96rem = ~15px. So, 15px + 25px = 40px */
    /* The default padding-top for .footer-column is 25px. */
    /* So we need an additional ~15px. Or, set total padding-top to match H4 space. */
    padding-top: calc(
      25px + 0.8rem * 1.2 + 25px
    ); /* border-padding + h4_approx_height + h4_margin_bottom */
    /* This might be too much if the 25px from .footer-column already includes the border space */
    /* Simpler: padding-top of .footer-column is 25px. H4 margin-bottom is 25px. H4 height ~0.8rem */
    /* Target padding-top for other-links-column to be main_padding + H4_height + H4_margin-bottom */
  }

  .footer-column.other-links-column ul {
    margin-top: 0; /* Remove any default top margin on the ul itself */
  }

  .footer-column {
    margin-top: 0; /* Reset mobile margin-top for grid layout */
    /* padding-top and border-top are already set */
  }
  /* Individual .footer-column elements will still have their margin-top applied from the base style,
     but :first-child (.location-info) has margin-top: 0. 
     We need to ensure proper vertical spacing between the full-width rows and the final row.
     The existing margin-top on .learn-more, .quick-links, .newsletter should handle this.
  */

  .locations-container {
    /* Adjust for tablet and desktop */
    flex-direction: row; /* Horizontal layout for locations */
    justify-content: space-between; /* Distribute space between locations */
    gap: 20px; /* Adjust gap between horizontal location blocks */
  }
  .footer-column .location {
    /* flex-basis: 30%; */ /* Removing specific basis, let space-between and gap handle it */
    flex-grow: 1; /* Allow them to grow if space allows */
    flex-basis: 0; /* Distribute space more evenly */
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    /* Refine 3-column proportions for desktop */
    grid-template-columns: 1.2fr 1.2fr 1.5fr; /* learn-more | other-links | newsletter */
    gap: 60px; /* Further increased gap for desktop */
  }
  .footer-column.location-info {
    grid-column: 1 / -1; /* Make location-info span full width */
  }
  .footer-column.other-links-column {
    /* Ensure padding is consistent or specifically set for desktop too if needed */
    /* The rule from 768px will apply, recalculate if base font changes significantly */
    padding-top: calc(25px + 0.8rem * 1.2 + 25px);
  }
  /* .learn-more-column, .other-links-column, .newsletter take the columns */

  .locations-container {
    gap: 30px; /* Slightly larger gap for desktop if needed */
  }
  .footer-column .location {
    /* Styles from 768px apply, can make more specific adjustments if needed */
  }
}

.newsletter {
  position: relative; /* For potential absolute positioning of button or borders */
}

.newsletter form {
  display: flex;
  border: 1px solid #bbb; /* Figma: Outer border for the whole box, light gray */
  /* gap: 8px; */ /* Removed gap for seamless join */
}

.newsletter .email-input-wrapper {
  position: relative; /* For positioning the label */
  flex-grow: 1; /* Allow wrapper to take space like input did */
  /* Ensure the wrapper itself stretches if needed, though flex row should handle this */
  align-self: stretch;
}

.newsletter input[type="email"] {
  width: 100%;
  height: 100%; /* Make input fill wrapper vertically */
  padding: 18px 15px 6px 15px;
  border: none;
  background-color: #000;
  color: #fff;
  font-size: 0.875rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Remove old placeholder style */
/*
.newsletter input[type="email"]::placeholder {
  color: #aaa; 
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px; 
}
*/

.newsletter .email-field-label {
  position: absolute;
  top: 5px; /* Adjust as needed for vertical alignment */
  left: 15px; /* Match input's left padding */
  font-size: 10px;
  color: #aaa;
  pointer-events: none; /* So clicks pass through to the input */
  transition: all 0.2s ease-out; /* For potential future animations */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Optional: Style for when input has focus or value (A24 style) - can implement later if requested */
/*
.newsletter input[type="email"]:focus + .email-field-label,
.newsletter input[type="email"]:not(:placeholder-shown) + .email-field-label { 
  top: 2px; 
  font-size: 8px; 
  color: #777; 
}
*/

.newsletter button[type="submit"] {
  padding: 12px 20px;
  background-color: #fff; /* Figma: White background */
  color: #000; /* Figma: Black text */
  border: none;
  border-left: 1px solid #bbb;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  flex-shrink: 0;
  transition: background-color 0.2s ease-out, color 0.2s ease-out; /* Added color to transition */
}

.newsletter button[type="submit"]:hover {
  background-color: #111; /* Slight change on hover */
  color: #fff; /* Text becomes white on hover */
}

/* Horizontal lines - to be added precisely based on HTML structure */
.footer-column {
  padding-top: 25px; /* Increased padding for space above content, below line */
  margin-top: 25px; /* Space for the border to sit in */
  border-top: 1px solid #555; /* Figma: Horizontal lines for most columns */
}

.footer-column:first-child {
  /* Targets location-info effectively */
  margin-top: 0; /* No double margin for the very first column */
}

/* Responsive Styles for Footer Grid (example) */
@media (min-width: 768px) {
  .footer-grid {
    /* Example: 2fr 1fr 1fr 1.5fr for Location | Learn More | Quick Links | Newsletter */
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 30px; /* Adjust gap for tablet/desktop */
  }
  .footer-column:first-child {
    /* Reset any specific mobile styling if needed */
    margin-top: 0;
    padding-top: 20px; /* Standard padding */
    border-top: 1px solid #555; /* Standard border */
  }
  /* Add a specific class or ::before for the very top thick white line */
}

@media (min-width: 1024px) {
  .footer-grid {
    /* Example: 2.5fr 1fr 1fr 2fr */
    grid-template-columns: 2.5fr 1fr 1fr 2fr;
    gap: 40px;
  }
}

/* Responsive Styles */

/* Tablet Styles (approx 768px) */
@media (min-width: 768px) {
  .container {
    width: 90%;
  }

  /* Adjust .mobile-nav for DESKTOP view */
  .mobile-nav {
    display: flex !important; /* Show on desktop */
    flex-grow: 1; /* Allow it to take space between logo and actions */
    justify-content: flex-start; /* Align links to the start (left) */
    order: 2; /* Explicitly set order if needed, after header-left, before actions */
    margin-left: 30px; /* Add space after the logo section */
  }

  .mobile-nav ul {
    flex-direction: row; /* Links in a row */
    gap: 35px; /* Increased gap for desktop */
  }

  .mobile-nav a {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal; /* Regular weight */
    font-size: 0.9rem; /* Consistent with previous desktop nav attempt */
    text-transform: uppercase;
    color: #333;
    padding: 5px 0; /* Keep vertical padding consistent */
    border-bottom: 2px solid transparent; /* For hover effect */
  }

  .mobile-nav a:hover {
    color: #000;
    border-bottom: 2px solid #000; /* Keep consistent hover */
  }

  .menu-toggle {
    display: flex; /* Ensure menu toggle remains visible as per screenshot */
  }

  /* Original rule to hide mobile-nav on desktop:
    .mobile-nav {
      display: none !important; 
    }
  */
  /* This is now handled by the rules above, specific to desktop */

  /* Ensure header-left-section and header-actions have appropriate order if needed */
  .header-left-section {
    order: 1;
  }
  .header-actions {
    order: 3;
  }

  .memberships-page h1 {
    font-size: 3rem;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for footer */
  }
  .footer-column.newsletter {
    grid-column: span 2; /* Newsletter spans full width if an odd number */
    text-align: center; /* Center newsletter on tablet */
  }
  .newsletter input[type="email"] {
    width: 60%;
  }
  .newsletter button[type="submit"] {
    width: auto;
  }
}

/* Desktop Styles (approx 1024px and up) */
@media (min-width: 1024px) {
  .container {
    /* max-width: 1140px; /* Slightly wider container for desktop */
  }
  .product-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns for desktop */
  }

  .footer-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 columns for footer */
    gap: 20px;
  }
  .footer-column.newsletter {
    grid-column: auto; /* Reset span */
    text-align: left;
  }
  .newsletter input[type="email"] {
    width: calc(100% - 100px);
  }
}

/* Mobile Menu Specifics */
@media (max-width: 767px) {
  .container {
    width: 95%;
    padding: 0 10px;
  }

  .site-brand-bar {
    padding: 8px 0;
  }

  .site-brand-title {
    font-size: 1.2rem;
  }

  .ticker-wrapper {
    height: 35px;
    font-size: 10px;
  }

  .ticker span {
    padding: 0 1rem;
  }

  .pause-btn {
    font-size: 0.8rem;
    right: 0.5rem;
  }

  header {
    padding: 10px 0;
  }

  .header-container {
    padding: 0 10px;
  }

  .breadcrumbs {
    padding: 8px 0;
    font-size: 0.8rem;
  }

  .memberships-page {
    padding: 20px 0;
  }

  .memberships-page h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    text-align: center;
  }

  .filter-controls {
    margin-bottom: 15px;
  }

  .on-filters-navbar {
    padding: 0 5px;
    gap: 8px;
  }

  .on-filter-chip,
  .on-filter-text-tab {
    font-size: 0.8rem;
    padding: 6px 12px;
    min-height: 32px;
  }

  .results-count {
    font-size: 0.9rem;
    margin-bottom: 15px;
    text-align: center;
  }

  .product-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 10px;
  }

  .product-card {
    max-width: 100%;
    margin: 0 auto;
  }

  .product-info {
    padding: 15px !important;
    padding-left: 15px !important;
  }

  .product-info .title {
    font-size: 1.1rem;
    line-height: 1.3;
  }

  .product-info .description {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .product-info .price {
    font-size: 1rem;
  }

  footer {
    padding: 30px 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 25px;
    text-align: center;
  }

  .footer-column {
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
  }

  .footer-column:first-child {
    border-top: none;
    padding-top: 0;
  }

  .footer-column h4,
  .footer-column h5 {
    font-size: 0.9rem;
    margin-bottom: 15px;
  }

  .footer-column p,
  .footer-column ul li a {
    font-size: 0.8rem;
    line-height: 1.4;
  }

  .locations-container {
    flex-direction: column;
    gap: 15px;
  }

  .newsletter {
    padding: 20px 0;
  }

  .newsletter form {
    flex-direction: column;
    gap: 15px;
  }

  .newsletter input[type="email"] {
    width: 100%;
    font-size: 1rem;
    padding: 12px;
  }

  .newsletter button[type="submit"] {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
  }

  .header-container .mobile-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 15px 0;
    z-index: 1000;
    order: initial;
  }

  .header-container .mobile-nav.active {
    display: block;
  }

  .header-container .mobile-nav ul {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .header-container .mobile-nav ul li {
    width: 100%;
    text-align: center;
  }

  .header-container .mobile-nav ul li a {
    display: block;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 1rem;
    text-transform: uppercase;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #333;
  }

  .header-container .mobile-nav ul li:last-child a {
    border-bottom: none;
  }

  .header-container .mobile-nav a:hover {
    background-color: #f9f9f9;
    color: #000;
    border-bottom-color: #f0f0f0;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-actions {
    gap: 15px;
  }

  .header-actions .search-btn,
  .header-actions .cart-btn {
    font-size: 0.9rem;
    padding: 8px 12px;
  }

  .search-btn span,
  .cart-count {
    font-size: 0.75rem;
  }

  .logo img {
    max-height: 35px;
  }

  .hamburger-icon-img {
    max-height: 22px;
  }

  .search-icon-img,
  .cart-icon-img {
    max-height: 18px;
  }
}

/* Card Hover - an alternative using an overlay if desired */
.product-card:hover .product-image-container::after {
  background-color: rgba(0, 0, 0, 0.1); /* Soft dark overlay */
}

/* Desktop Hover Effects for Product Cards */
@media (min-width: 768px) and (hover: hover) {
  .product-card .product-info {
    /* By default, product info is visible over the image/overlay */
    /* We can make it partially transparent and opaque on hover if desired,
           or move it completely over the image. For now, let's assume it stays as is
           but text color might change for better legibility if the overlay darkens significantly. */
  }

  .product-card:hover .product-image {
    transform: scale(1.05);
  }

  .product-card:hover .card-overlay {
    background-color: rgba(0, 0, 0, 0.3); /* Subtle dark overlay on hover */
  }

  /* Optional: If you want text to become white for better contrast on dark overlay */
  .product-card:hover .product-info * {
    /* This is a bit aggressive, might need more specific selectors */
    /* color: #fff; */
  }
  .product-card:hover .product-info .product-title,
  .product-card:hover .product-info .product-description,
  .product-card:hover .product-info .product-price {
    /* Example: Make text white, if design calls for it */
    /* color: #fff; */
  }
  .product-card:hover .product-info .product-category {
    /* background-color: rgba(255,255,255,0.2); */
    /* color: #fff; */
  }
}

/* Scoped Product Info Styles (ON Running inspired) */
.product-card .product-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* Reduced from 0.25rem for tighter spacing */
  padding: 20px; /* Keep existing padding or adjust as needed */
  padding-left: 0.75rem; /* Specific ON-style padding */
  font-size: clamp(0.875rem, 0.84rem + 0.13vw, 1rem); /* Responsive font size */
  position: relative;
  z-index: 2;
  background-color: #fff;
  transition: color 0.3s ease;
}

.product-card .product-info .label {
  font-family: "Menlo Light", Menlo, monospace;
  text-transform: uppercase;
  font-size: 0.75em; /* Relative to parent .product-info font-size */
  letter-spacing: 0.05em;
  color: #2b00ff;
  background-color: transparent; /* Overriding previous .product-category background */
  padding: 0; /* Overriding previous .product-category padding */
  margin-bottom: 0; /* Overriding previous .product-category margin */
  font-weight: normal; /* Overriding previous .product-category font-weight */
}

.product-card .product-info .title {
  font-family: "Helvetica Neue Medium", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-weight: bold; /* User updated */
  font-size: 1.2em; /* User updated */
  color: #333;
  margin-bottom: 0; /* Was 0.1em, set to 0 for consistent gap */
}

.product-card .product-info .description {
  font-size: 1em; /* Increased from 0.9em for better readability */
  color: #666;
  min-height: auto; /* Override previous min-height if not desired */
  margin-bottom: 0.25em; /* Was 0.25em, set to 0 for consistent gap */
}

.product-card .product-info .price {
  font-size: 1.05em; /* Increased from 0.95em for better readability */
  font-weight: 500; /* Lighter than bold title */
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* Applying Helvetica Neue */
}

/* Ticker Banner Styles */
.ticker-wrapper {
  display: flex; /* Changed from flex to new styles */
  align-items: center;
  background-color: white;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  height: 40px;
  position: relative; /* Changed from sticky */
  font-family: "Menlo", monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  --ticker-animation-duration: 100s; /* Increased from 60s to make it slower */
}

.ticker {
  display: inline-block;
  white-space: nowrap; /* Added */
  animation: scroll-left var(--ticker-animation-duration, 30s) linear infinite; /* Keep variable with fallback */
  padding-left: 100%;
}

.ticker span {
  padding: 0 1.5rem;
  display: inline-block; /* Added */
  color: black;
}

.pause-btn {
  position: absolute;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
  color: black;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Styles for the overlapping chips */
.on-filter-chip.is-secondary-all-chip {
  /* This is the "All X" chip that sits behind */
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1; /* Behind the primary chip */
  /* Inherits .is-clearable styles for background, padding, icon etc. */
  /* Override border and text color for a lighter appearance */
  border-color: #e0e0e0; /* Lighter gray border */
  color: #555555; /* Slightly lighter text color */
  cursor: default; /* Make body of this chip non-interactive visually */
  /* Optionally, make it slightly more transparent or change border if needed */
  /* opacity: 0.8; */
}

.on-filter-chip.is-primary-active-category-chip {
  /* This is the active category chip e.g. "Weekly X" that sits in front */
  position: relative; /* Stays in flow, but allows z-index */
  z-index: 2; /* In front of the secondary chip */
  margin-left: 10px; /* Adjusted for less overlap, revealing more of the chip behind */
  /* Inherits .is-clearable styles for border, icon etc. */
}

/* Show desktop nav on larger screens */
/* @media (min-width: 768px) { ... } */

/* Product card link styling */
.product-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.2s ease-in-out;
}

.product-card-link:hover {
  transform: translateY(-2px); /* Slight lift effect on hover */
}

.product-card-link:hover .product-card {
  /* Enhance the existing card hover effect when the link is hovered */
  transform: none; /* Remove any conflicting transforms */
}

@media (max-width: 480px) {
  .container {
    width: 100%;
    padding: 0 5px;
  }

  .site-brand-title {
    font-size: 1rem;
  }

  .ticker-wrapper {
    height: 30px;
    font-size: 9px;
  }

  .ticker span {
    padding: 0 0.8rem;
  }

  .pause-btn {
    font-size: 0.7rem;
    right: 0.3rem;
  }

  .header-container {
    padding: 0 5px;
  }

  .memberships-page h1 {
    font-size: 1.8rem;
    margin-bottom: 15px;
  }

  .on-filter-chip,
  .on-filter-text-tab {
    font-size: 0.75rem;
    padding: 5px 10px;
    min-height: 28px;
  }

  .product-grid {
    gap: 15px;
    padding: 0 5px;
  }

  .product-info {
    padding: 12px !important;
    padding-left: 12px !important;
  }

  .product-info .title {
    font-size: 1rem;
  }

  .product-info .description {
    font-size: 0.85rem;
  }

  .product-info .price {
    font-size: 0.95rem;
  }

  .footer-grid {
    gap: 20px;
  }

  .footer-column {
    padding-top: 15px;
  }

  .footer-column h4,
  .footer-column h5 {
    font-size: 0.85rem;
    margin-bottom: 12px;
  }

  .footer-column p,
  .footer-column ul li a {
    font-size: 0.75rem;
  }

  .newsletter input[type="email"],
  .newsletter button[type="submit"] {
    padding: 10px;
    font-size: 0.9rem;
  }

  .header-actions {
    gap: 10px;
  }

  .header-actions .search-btn,
  .header-actions .cart-btn {
    font-size: 0.8rem;
    padding: 6px 10px;
  }

  .search-btn span,
  .cart-count {
    font-size: 0.7rem;
  }

  .logo img {
    max-height: 30px;
  }

  .hamburger-icon-img {
    max-height: 20px;
  }

  .search-icon-img,
  .cart-icon-img {
    max-height: 16px;
  }
}