/** Shopify CDN: Minification failed

Line 93:1 Expected identifier but found whitespace
Line 142:4 Expected identifier but found whitespace
Line 295:20 Expected identifier but found whitespace
Line 342:0 All "@import" rules must come first

**/
/* Responsive Design */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

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

/* Responsive Grid */
.row {
    display: flex;
    flex-wrap: wrap;
}

.col {
    flex: 1;
    min-width: 250px; /* Ensures columns don't get too narrow */
    box-sizing: border-box;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .col {
        flex: 100%; /* Stacks columns on mobile */
    }
}

/* Product Image Hover Effects */
.product-image {
    position: relative;
    overflow: hidden;
}

.product-image img {
    width: 100%; /* Ensures images are responsive */
    transition: transform 0.3s ease; /* Smooth zoom effect */
}

.product-image:hover img {
    transform: scale(1.05); /* Zoom effect on hover */
}

/* Quick View Button Styling */
.quick-view {
    display: inline-block;
    background-color: #f39c12; /* Orange button color */
    color: white;
    padding: 10px 15px;
    text-align: center;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.quick-view:hover {
    background-color: #e67e22; /* Darker shade on hover */
}

/* Customer Reviews Section */
.customer-reviews {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ccc;
}

.customer-reviews h3 {
    margin: 0;
    padding-bottom: 10px;
}

.customer-reviews p {
    font-size: 14px;
    line-height: 1.6;
}/* Shopify Drawer Menu - Production Ready */

/*---------------------------------------------*\
| Variables
\*---------------------------------------------*/
: root {
  --color-bg-drawer: rgba(255, 255, 255, 0.98); /* Slightly transparent white for background */
  --color-shadow: 0px 5px 25px rgba(0, 0, 0, 0.1); /* Softer shadow for a modern feel */
  --color-border: #e0e0e0; /* Lighter, softer border color */
  --color-hover: rgba(95, 158, 160, 0.12); /* Slightly more pronounced hover effect */
  --color-text: #333; /* Darker, more readable text color */
  --color-accent: #5f9ea0; /* Accent color (e.g., for links, buttons) */
  --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* System font stack for better performance and native feel */
  --font-secondary: 'MyFont', var(--font-primary); /* If you use custom fonts */
  --drawer-transition-speed: 0.3s; /* Transition speed for drawer animations */
}

/*---------------------------------------------*\
| Font Declarations
\*---------------------------------------------*/
@font-face {
  font-family: 'MyFont';
  src: url('{{ 'myfont.woff2' | asset_url }}') format('woff2'); /* Using Shopify's asset_url filter */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Ensures text is visible while font loads */
}

/*---------------------------------------------*\
| Modern CSS Reset for Shopify
\*---------------------------------------------*/
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html:focus-within {
    scroll-behavior: smooth; /* Smooth scrolling for accessibility */
  }

  a, button, input, textarea, select {
    font: inherit; /* Inherit font from parent for consistency */
    color: inherit; /* Inherit color */
    cursor: revert; /* Use default cursor */
  }

  a {
    text-decoration: none; /* Remove default underline from links */
  }

  a: hover {
    text-decoration: underline; /* Add underline on hover for clarity */
  }

  ul, ol {
    list-style: none; /* Remove default list styles */
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block; /* Remove extra space below inline images */
    max-width: 100%; /* Ensure images are responsive */
    height: auto; /* Maintain aspect ratio */
  }

  input,
  button,
  textarea,
  select {
    outline: none; /* Remove default outline */
    border: none; /* Remove default border */
  }

  /* Basic body styling */
  body {
    min-height: 100vh; /* Ensure body takes full viewport height */
    line-height: 1.5; /* Improve readability */
    font-family: var(--font-primary);
    color: var(--color-text);
    background-color: var(--color-bg-drawer); /* Default background */
  }
}

/*---------------------------------------------*\
| Base Styles
\*---------------------------------------------*/
@layer base {
  h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.75em; /* Spacing below headings */
    line-height: 1.2; /* Tighter line height for headings */
    color: var(--color-text); /* Ensure headings use the base text color or override as needed */
  }

  h1 {
    font-size: 2.5rem; /* Example larger size for H1 */
  }

  p {
    margin-bottom: 1em; /* Spacing below paragraphs */
  }
}

/*---------------------------------------------*\
| Components: Drawer Menu
\*---------------------------------------------*/
@layer components {
  /* Drawer container */
  .drawer,
  .menu-drawer__container {
    position: fixed; /* Position it relative to the viewport */
    top: 0;
    right: 0; /* Or 'left: 0;' if you want it on the left */
    width: 300px; /* Example width, adjust as needed */
    height: 100%;
    background-color: var(--color-bg-drawer);
    box-shadow: var(--color-shadow);
    transform: translateX(100%); /* Initially hidden off-screen */
    transition: transform var(--drawer-transition-speed) ease-out; /* Smooth transition */
    z-index: 1000; /* Ensure it's above other content */
    overflow-y: auto; /* Enable scrolling if content exceeds height */
    padding: 20px; /* Add some padding inside the drawer */
    border-left: 1px solid var(--color-border); /* Example border */
  }

  /* State for when the drawer is open */
  .drawer.is-open,
  .menu-drawer__container.is-open {
    transform: translateX(0); /* Slide in */
  }

  /* Overlay for behind the drawer */
  .drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 999; /* Below the drawer */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--drawer-transition-speed) ease-out, visibility 0s linear var(--drawer-transition-speed);
  }

  .drawer-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--drawer-transition-speed) ease-out;
  }

  /* Drawer content styling */
  .drawer__content {
    /* Add styles for the content within the drawer */
  }

  .drawer__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
  }

  .drawer__title {
    font-family: var(--font-secondary); /* Use custom font for title if desired */
    font-size: 1.5rem;
    font-weight: bold;
  }

  .drawer__close-button {
    background: none;
    border: none;
    font-size: 1.8rem; /* Make close icon larger */
    cursor: pointer;
    color: var(--color-text);
    transition: color 0.2s ease;
  }

  .drawer__close-button:hover {
    color: var(--color-accent); /* Accent color on hover */
  }

  /* Navigation links within the drawer */
  .drawer__nav-list {
    /* Styles for the main navigation list */
  }

  .drawer__nav-item {
    margin-bottom: 10px;
  }

  .drawer__nav-link {
    display: block;
    padding: 10px 15px;
    color: var(--color-text);
    font-size: 1.1rem;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .drawer__nav-link: hover,
  .drawer__nav-link:focus {
    background-color: var(--color-hover);
    color: var(--color-accent);
    text-decoration: none; /* Ensure no underline on hover within the link */
  }

  /* Example for dropdowns or submenus */
  .drawer__submenu {
    margin-left: 15px;
    padding-top: 5px;
    border-left: 2px solid var(--color-accent); /* Visual indicator for submenu */
  }
}

/*---------------------------------------------*\
| Utility Styles (Optional)
\*---------------------------------------------*/
@layer utilities {
  /* Add any utility classes here if needed */
  .text-accent {
    color: var(--color-accent);
  }
  .bg-accent {
    background-color: var(--color-accent);
  }
}

/*---------------------------------------------*\
| Media Queries for Responsiveness
\*---------------------------------------------*/
@media (max-width: 768px) { /* Example for smaller screens */
  .drawer {
    width: 280px; /* Slightly smaller drawer on mobile */
  }
}

@media (max-width: 480px) { /* Example for very small screens */
  .drawer {
    width: 100%; /* Full width drawer on very small screens */
  }
}/* Custom properties for consistency */
:root {
  --color-accent: #5f9ea0;
}

/* Load Montserrat if not in theme settings (add to theme.liquid <head>) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap');

/* Global buttons with accent integration */
.button, .btn {
  border-radius: 8px;
  font-weight: 600;
  background-color: var(--color-accent);
  transition: all 0.3s ease; /* Base transition for smooth hovers */
}

.button:hover, .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(95, 158, 160, 0.3);
}

/* Typography */
h1, h2, h3, .card__heading {
  font-family: "Montserrat", sans-serif;
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* Product cards with smooth lift */
.card-wrapper {
  transition: all 0.3s ease; /* Base transition */
}

.card-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Media with clipping and zoom */
.card__media {
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
  border-radius: 12px;
  overflow: hidden; /* Prevents image overflow */
}

.card__media img {
  border-radius: 12px;
  transition: transform 0.3s ease; /* Base transition */
}

.card__media:hover img {
  transform: scale(1.05);
}

/* Product form buttons */
.product-form__buttons .btn {
  padding: 16px 32px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}