/* Layout Styles */

/* CSS Reset for consistent cross-browser behavior */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  padding: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Prevent horizontal overflow */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

/* Remove default margin and padding */
h1, h2, h3, h4, h5, h6, p, ol, ul, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

/* Make images responsive by default */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Inherit fonts for inputs and buttons */
input, button, textarea, select {
  font: inherit;
}

/* End CSS Reset */

:root {
  /* Theme variables */
  --theme1-local-layout-background: rgba(var(--theme1-global-layout-background-rgbcolor-1, 255, 255, 255), var(--theme1-global-layout-background-alphatransparency-1, 1));
  --theme1-local-layout-transition: var(--theme1-global-layout-transition-custom-1, none);
  
  /* Scrollbar colors - simplified */
  --scrollbar-track-color: rgba(127, 127, 127, 0.15);
  --scrollbar-thumb-color: rgba(127, 127, 127, 0.35);
  --scrollbar-thumb-hover-color: rgba(127, 127, 127, 0.5);
  
  /* 8px increment system */
  --spacing-2xs: 0.25rem;  /* 4px */
  --spacing-xs: 0.5rem;    /* 8px */
  --spacing-sm: 1rem;      /* 16px */
  --spacing-md: 1.5rem;    /* 24px */
  --spacing-lg: 2rem;      /* 32px */
  --spacing-xl: 2.5rem;    /* 40px */
  --spacing-2xl: 3rem;     /* 48px */
  --spacing-3xl: 4rem;     /* 64px */
  
  /* Grid spacing */
  --grid-gap: 0;
  --grid-padding: var(--spacing-md);
  
  /* Component spacing - consistent across all components */
  --component-spacing-vertical: var(--spacing-md);
  --component-spacing-horizontal: var(--spacing-lg); /* Increased to 2rem (32px) for better spacing */
  
  /* Responsive padding for different screen sizes */
  --page-padding-desktop: var(--spacing-lg);
  --page-padding-tablet: var(--spacing-md);
  --page-padding-mobile: var(--spacing-sm);
  
  /* Max content width for optimal readability */
  --max-content-width: 1440px; /* Optimal width for e-commerce content */
  
  /* Form element spacing */
  --form-element-spacing: var(--spacing-md);
  --button-padding-vertical: 0.8rem;
  --button-padding-horizontal: 1.5rem;
  
  /* Button styling variables */
  --button-background: var(--theme1-global-button-background, rgba(0, 0, 0, 0.8));
  --button-color: var(--theme1-global-button-text, white);
  --button-border: var(--theme1-global-button-border, 1px solid rgba(255, 255, 255, 0.3));
  --button-border-radius: var(--theme1-global-button-radius, 4px);
  --button-box-shadow: var(--theme1-global-button-shadow, 0 2px 4px rgba(0, 0, 0, 0.1));
  --button-font-weight: var(--theme1-global-button-font-weight, 600);
  --button-transition: var(--theme1-global-button-transition, all 0.3s ease);
  
  /* Button hover styling variables */
  --button-hover-background: var(--theme1-global-button-hover-background, #000000);
  --button-hover-color: var(--theme1-global-button-hover-text, white);
  --button-hover-border: var(--theme1-global-button-hover-border, 1px solid rgba(255, 255, 255, 0.5));
  --button-hover-transform: var(--theme1-global-button-hover-transform, translateY(-2px));
  --button-hover-box-shadow: var(--theme1-global-button-hover-shadow, 0 4px 8px rgba(0, 0, 0, 0.2));
  --button-hover-letter-spacing: var(--theme1-global-button-hover-letter-spacing, 0.5px);
  
  /* Container widths */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
  
  /* Grid system */
  --grid-columns: 12;
  --grid-gap-sm: var(--spacing-xs);
  --grid-gap-md: var(--spacing-sm);
  --grid-gap-lg: var(--spacing-md);
  
  /* Breakpoints */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* Global box-sizing rule to prevent overflow issues */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Accessibility features */
#printheader {
  display: none;
}

#skiptocontent {
  position: absolute;
  top: 0;
  left: -9999px;
  padding: 0.2rem;
  background: #fff;
  z-index: 9999;
}

#skiptocontent:focus {
  left: 0;
}

/* Header and Menu Layout System */
.header-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--theme1-global-header-background-rgbcolor-1, #ffffff);
  height: 100%;
  box-sizing: border-box;
}

.header-logo {
  flex: 0 0 auto;
  max-width: 200px;
  margin-right: var(--spacing-md);
}

.header-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Modern Menu Navigation */
.menu-desktop {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.menu-desktop-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--spacing-lg);
}

.menu-desktop-item {
  position: relative;
  height: 100%;
}

.menu-desktop-link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--theme1-global-menu-font-rgbcolor-1, #333);
  transition: color 0.2s ease;
}

.menu-desktop-link:hover {
  color: var(--theme1-global-accent-color, #000);
}

/* Dropdown Menu */
.menu-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 1000;
}

.menu-desktop-item:hover .menu-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menu-dropdown-list {
  list-style: none;
  margin: 0;
  padding: var(--spacing-xs) 0;
}

.menu-dropdown-item {
  padding: 0;
}

.menu-dropdown-link {
  display: block;
  padding: var(--spacing-xs) var(--spacing-md);
  text-decoration: none;
  color: var(--theme1-global-menu-font-rgbcolor-1, #333);
  transition: background-color 0.2s ease;
}

.menu-dropdown-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Free Shipping Banner */
.free-shipping-banner {
  width: 100%;
  padding: var(--spacing-xs) 0;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.05em;
  background-color: #f8f8f8;
}

.free-shipping-banner p {
  margin: 0;
}

#backtotop {
  position: absolute;
  bottom: 0;
  left: -9999px;
  padding: 0.2rem;
  background: #fff;
  z-index: 9999;
}

#backtotop:focus {
  left: 0;
}

/* Scrollbar styles for desktop */
@media (min-width: 1025px) {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: #fff;
  }
  
  ::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track-color);
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: 4px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover-color);
  }
}

/* Scrollbar styles for mobile */
@media (max-width: 1024px) {
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: #fff;
  }
  
  ::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track-color);
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: 3px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover-color);
  }
}

/* Media queries for responsive layout */
@media (max-width: 1024px) {
  .webpage_grid_main {
    padding: 0 var(--page-padding-tablet);
  }
}

@media (max-width: 768px) {
  /* Mobile-specific styles */
  .webpage_grid {
    grid-template-rows: auto 1fr auto;
    gap: 0; /* Ensure no gap on mobile as well */
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  /* Support for mobile menu components */
  html body header.webpage_grid_header {
    padding-top: 0; /* Remove top padding as it's handled by the fixed mobile menu */
    min-height: 4rem; /* Match the height of the mobile top menu */
    width: 100%;
    max-width: 100%;
  }
  
  .header-container,
  .header-main {
    min-height: 4rem; /* Match the min-height of webpage_grid_header */
    width: 100%;
    max-width: 100%;
  }
  
  html body footer.webpage_grid_footer {
    padding-bottom: 5rem; /* Space for mobile bottom menu */
    width: 100%;
    max-width: 100%;
  }
  
  .two-column-grid,
  .three-column-grid {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
  }
  
  .webpage_grid_main {
    padding: 0 var(--page-padding-tablet);
    padding-top: 4rem; /* Add padding to account for the fixed mobile top menu */
    margin-top: -1px; /* Keep the negative margin on mobile */
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  .container {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
    width: 100%;
    max-width: 100%;
  }
  
  .container-fluid {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
    width: 100%;
    max-width: 100%;
  }
  
  /* Responsive column spans */
  .col-md-span-12 { grid-column: span 12; }
  .col-md-span-6 { grid-column: span 6; }
  .col-md-span-4 { grid-column: span 4; }
  .col-md-span-3 { grid-column: span 3; }
  
  /* Improved typography for mobile */
  body {
    font-size: 16px; /* Ensure minimum readable font size */
    line-height: 1.5; /* Improve readability with better line height */
  }
  
  h1 {
    font-size: 1.75rem;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
  }
  
  h2 {
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
  }
  
  h3 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin-bottom: var(--spacing-xs);
  }
  
  p, li {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: var(--spacing-sm);
    max-width: 65ch; /* Limit line length for readability */
  }
  
  /* Improve button usability on mobile */
  .primary-button,
  .secondary-button {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    font-size: 1rem;
  }
}

@media (max-width: 640px) {
  .col-sm-span-12 { grid-column: span 12; }
  .col-sm-span-6 { grid-column: span 6; }
  .col-sm-span-4 { grid-column: span 4; }
  .col-sm-span-3 { grid-column: span 3; }
  
  .webpage_grid_main {
    padding: 0 var(--page-padding-mobile);
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  .container, .container-fluid {
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
    width: 100%;
    max-width: 100%;
  }
  
  /* Enhanced mobile experience */
  /* Improve touch targets */
  button, 
  a, 
  input[type="button"], 
  input[type="submit"],
  .header-icon-button,
  .menu-item {
    min-height: 44px;
    min-width: 44px;
    padding: var(--spacing-xs);
    touch-action: manipulation;
  }
  
  /* Improve form elements */
  input, 
  select, 
  textarea {
    font-size: 16px; /* Prevent iOS zoom on focus */
    min-height: 48px;
    padding: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    width: 100%;
    border-radius: 4px;
  }
  
  /* Improve image display */
  img {
    height: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }
  
  /* Improve table display */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Add content-visibility for performance */
  .webpage_grid_main > section:not(:first-child) {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
  }
}

/* Base HTML/Body styles */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  background: var(--theme1-local-layout-background, #fff);
  transition: var(--theme1-local-layout-transition, none);
  overflow-y: auto;
  overflow-x: hidden;
  text-align: center;
}

/* Modern Grid Layout */
.webpage_grid {
  display: grid;
  grid-template-areas: 
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
  padding: 0;
  gap: 0;
  overflow-x: hidden;
  background: var(--theme1-local-layout-background, #fff);
  transition: var(--theme1-local-layout-transition, none);
}

.webpage_grid_header {
  grid-area: header;
  width: 100%;
  text-align: center;
  overflow: visible; /* Required for submenus to overflow below the header */
  z-index: 200; /* High layer index so menu always layers over any banners */
  background: rgba(var(--theme1-global-header-background-rgbcolor-1, 255, 255, 255), 1);
  color: var(--theme1-global-header-text-hexcolor-1, inherit);
  padding: 0; /* Remove padding to allow full control in header components */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Replace box-shadow with a subtle border */
  position: relative; /* Establish positioning context for absolute elements */
}

.webpage_grid_main {
  grid-area: main;
  width: 100%;
  max-width: var(--max-content-width);
  margin-left: auto;
  margin-right: auto;
  margin-top: -1px; /* Negative margin to overlap with header border */
  text-align: center;
  overflow: visible;
  padding: 0 var(--page-padding-desktop); /* Use consistent padding variable */
  display: flex;
  flex-direction: column;
  box-sizing: border-box; /* Ensure padding is included in width calculation */
}

.webpage_grid_footer {
  grid-area: footer;
  width: 100%;
  text-align: center;
  background: rgba(var(--theme1-global-footer-background-rgbcolor-1, 255, 255, 255), 1);
  color: var(--theme1-global-footer-text-hexcolor-1, inherit);
  padding: var(--component-spacing-vertical) var(--component-spacing-horizontal);
}

/* General section styling */
body section {
  display: block;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  margin-bottom: var(--component-spacing-vertical);
}

/* Standard grid for components */
.standard-grid {
  display: grid;
  gap: var(--grid-gap);
  width: 100%;
}

/* Two-column grid */
.two-column-grid {
  grid-template-columns: 1fr 1fr;
}

/* Three-column grid */
.three-column-grid {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Form elements spacing */
.form-group {
  margin-bottom: var(--form-element-spacing);
}

/* Button styling */
.standard-button {
  display: inline-block;
  padding: var(--button-padding-vertical) var(--button-padding-horizontal);
  border-radius: var(--button-border-radius);
  text-align: center;
  font-weight: var(--button-font-weight);
  cursor: pointer;
  text-decoration: none;
  transition: var(--button-transition);
}

/* Primary Button - Elegant styling for primary actions */
.primary-button {
  display: inline-block;
  padding: var(--button-padding-vertical) var(--button-padding-horizontal);
  
  /* Colors */
  background-color: var(--button-background) !important;
  color: var(--button-color) !important;
  border: var(--button-border);
  
  /* Style */
  font-weight: var(--button-font-weight);
  text-decoration: none;
  border-radius: var(--button-border-radius);
  box-shadow: var(--button-box-shadow);
  
  /* Animation */
  transition: var(--button-transition);
}

.primary-button:hover {
  background-color: var(--button-hover-background) !important;
  color: var(--button-hover-color) !important;
  transform: var(--button-hover-transform);
  box-shadow: var(--button-hover-box-shadow);
  border: var(--button-hover-border);
  letter-spacing: var(--button-hover-letter-spacing);
}

/* Secondary Button - White background with black text, swapped colors on hover */
.secondary-button {
  display: inline-block;
  padding: var(--button-padding-vertical) var(--button-padding-horizontal);
  
  /* Colors - Swapped from primary button */
  background-color: var(--button-color) !important;
  color: var(--button-background) !important;
  border: var(--button-border);
  
  /* Style */
  font-weight: var(--button-font-weight);
  text-decoration: none;
  border-radius: var(--button-border-radius);
  box-shadow: var(--button-box-shadow);
  
  /* Animation */
  transition: var(--button-transition);
}

.secondary-button:hover {
  background-color: var(--button-background) !important;
  color: var(--button-color) !important;
  transform: var(--button-hover-transform);
  box-shadow: var(--button-hover-box-shadow);
  border: var(--button-hover-border);
  letter-spacing: var(--button-hover-letter-spacing);
}

/* Carousel Navigation Button Styles */
.carousel-nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--theme1-global-carousel-navbutton-background, rgba(0, 0, 0, 0.3));
  color: var(--theme1-global-carousel-navbutton-color, #ffffff);
  width: var(--theme1-global-carousel-navbutton-size, 40px);
  height: var(--theme1-global-carousel-navbutton-size, 40px);
  border: none;
  border-radius: var(--theme1-global-carousel-navbutton-radius, 50%);
  cursor: pointer;
  font-size: var(--theme1-global-carousel-navbutton-fontsize-1, 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
  opacity: 0.7;
  text-align: center;
  line-height: 1;
  padding: 0;
}

.carousel-nav-button:hover {
  background: var(--theme1-global-carousel-navbutton-hover-background, rgba(0, 0, 0, 0.5));
  opacity: 1;
}

/* Responsive carousel button sizes */
@media (max-width: var(--breakpoint-sm)) {
  .carousel-nav-button {
    width: var(--theme1-global-carousel-navbutton-size-sm, 32px);
    height: var(--theme1-global-carousel-navbutton-size-sm, 32px);
  }
  
  .carousel-nav-button svg {
    width: var(--theme1-global-carousel-navbutton-icon-size-sm, 18px);
    height: var(--theme1-global-carousel-navbutton-icon-size-sm, 18px);
  }
}

@media (max-width: var(--breakpoint-xs)) {
  .carousel-nav-button {
    width: var(--theme1-global-carousel-navbutton-size-xs, 28px);
    height: var(--theme1-global-carousel-navbutton-size-xs, 28px);
  }
  
  .carousel-nav-button svg {
    width: var(--theme1-global-carousel-navbutton-icon-size-xs, 16px);
    height: var(--theme1-global-carousel-navbutton-icon-size-xs, 16px);
  }
}

/* Carousel Dots Navigation */
.carousel-dots {
  position: absolute;
  bottom: var(--spacing-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--spacing-xs);
  z-index: 10;
}

.dot {
  width: var(--theme1-global-carousel-dot-size, 10px);
  height: var(--theme1-global-carousel-dot-size, 10px);
  background: var(--theme1-global-carousel-dot-background, rgba(255, 255, 255, 0.5));
  border-radius: var(--theme1-global-carousel-dot-radius, 50%);
  border: 1px solid var(--theme1-global-carousel-dot-border-color, transparent);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  width: var(--theme1-global-carousel-dot-active-size, 12px);
  height: var(--theme1-global-carousel-dot-active-size, 12px);
  background: var(--theme1-global-carousel-dot-active-background, rgba(255, 255, 255, 1));
}

.dot:hover:not(.active) {
  background: var(--theme1-global-carousel-dot-hover-background, rgba(255, 255, 255, 0.8));
}

/* Special class for sliders with custom scrollbars */
.sliderscrollbar::-webkit-scrollbar {
  width: 6px;
}

.sliderscrollbar::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-color);
}

.sliderscrollbar::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  border-radius: 3px;
}

.sliderscrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover-color);
}

/* Hide unused grid areas */
.webpage_grid_asideleft,
.webpage_grid_asideright {
  display: none !important;
}

.container {
  width: 100%;
  max-width: var(--container-lg);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0; /* Remove padding as it's handled by webpage_grid_main */
  padding-right: 0; /* Remove padding as it's handled by webpage_grid_main */
  box-sizing: border-box;
}

.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }
.container-xl { max-width: var(--container-xl); }

.container-fluid {
  width: 100%;
  padding-left: 0; /* Remove padding as it's handled by webpage_grid_main */
  padding-right: 0; /* Remove padding as it's handled by webpage_grid_main */
  box-sizing: border-box;
}

.grid {
  display: grid;
  gap: var(--grid-gap-md);
  width: 100%;
}

.grid-gap-sm { gap: var(--grid-gap-sm); }
.grid-gap-md { gap: var(--grid-gap-md); }
.grid-gap-lg { gap: var(--grid-gap-lg); }

/* Auto-fit columns for responsive layouts */
.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* 12-column grid system */
.grid-12 {
  grid-template-columns: repeat(12, 1fr);
}

/* Column span utility classes */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* Section spacing */
.section {
  margin-bottom: var(--spacing-xl);
}

.section-sm {
  margin-bottom: var(--spacing-md);
}

.section-lg {
  margin-bottom: var(--spacing-2xl);
  padding: var(--spacing-xl) 0;
}

/* Spacing utility classes */
/* Margin utilities */
.m-0 { margin: 0; }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

/* Padding utilities */
.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* Directional margin variants */
.mt-0 { margin-top: 0; }
.mr-0 { margin-right: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }

.mt-xs { margin-top: var(--spacing-xs); }
.mr-xs { margin-right: var(--spacing-xs); }
.mb-xs { margin-bottom: var(--spacing-xs); }
.ml-xs { margin-left: var(--spacing-xs); }

.mt-sm { margin-top: var(--spacing-sm); }
.mr-sm { margin-right: var(--spacing-sm); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.ml-sm { margin-left: var(--spacing-sm); }

.mt-md { margin-top: var(--spacing-md); }
.mr-md { margin-right: var(--spacing-md); }
.mb-md { margin-bottom: var(--spacing-md); }
.ml-md { margin-left: var(--spacing-md); }

.mt-lg { margin-top: var(--spacing-lg); }
.mr-lg { margin-right: var(--spacing-lg); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.ml-lg { margin-left: var(--spacing-lg); }

.mt-xl { margin-top: var(--spacing-xl); }
.mr-xl { margin-right: var(--spacing-xl); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.ml-xl { margin-left: var(--spacing-xl); }

/* Directional padding variants */
.pt-0 { padding-top: 0; }
.pr-0 { padding-right: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }

.pt-xs { padding-top: var(--spacing-xs); }
.pr-xs { padding-right: var(--spacing-xs); }
.pb-xs { padding-bottom: var(--spacing-xs); }
.pl-xs { padding-left: var(--spacing-xs); }

.pt-sm { padding-top: var(--spacing-sm); }
.pr-sm { padding-right: var(--spacing-sm); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pl-sm { padding-left: var(--spacing-sm); }

.pt-md { padding-top: var(--spacing-md); }
.pr-md { padding-right: var(--spacing-md); }
.pb-md { padding-bottom: var(--spacing-md); }
.pl-md { padding-left: var(--spacing-md); }

.pt-lg { padding-top: var(--spacing-lg); }
.pr-lg { padding-right: var(--spacing-lg); }
.pb-lg { padding-bottom: var(--spacing-lg); }
.pl-lg { padding-left: var(--spacing-lg); }

.pt-xl { padding-top: var(--spacing-xl); }
.pr-xl { padding-right: var(--spacing-xl); }
.pb-xl { padding-bottom: var(--spacing-xl); }
.pl-xl { padding-left: var(--spacing-xl); }

/* Product card grid for ecommerce */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-md);
}

.product-card {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-sm);
  height: 100%;
}

.product-card__image {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: var(--spacing-xs);
}

.product-card__title {
  margin-bottom: var(--spacing-2xs);
}

.product-card__price {
  margin-bottom: var(--spacing-xs);
}

.product-card__actions {
  margin-top: auto;
  padding-top: var(--spacing-xs);
}

/* Visual rhythm for text elements */
:root {
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.8;
  
  --text-spacing-after-heading: var(--spacing-xs);
  --text-spacing-after-paragraph: var(--spacing-sm);
  --text-spacing-after-list: var(--spacing-sm);
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: var(--text-spacing-after-heading);
  line-height: var(--line-height-tight);
}

p, ul, ol {
  margin-bottom: var(--text-spacing-after-paragraph);
  line-height: var(--line-height-normal);
}

/* Hide unused grid areas */
.webpage_grid_asideleft,
.webpage_grid_asideright {
  display: none !important;
}

/* Modern scrollbar styling - simplified */
@media (min-width: 1025px) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: #fff;
  }

  ::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track-color);
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: 5px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover-color);
  }
}

/* Mobile scrollbar - simplified */
@media (max-width: 1024px) {
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: #fff;
  }

  ::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track-color);
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover-color);
  }
}

/* Header Grid System */
.header-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: var(--spacing-sm) var(--spacing-lg);
}

.header-grid-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.header-grid-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-grid-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-md);
}

/* Header Components */
.header-logo-container {
  max-width: 200px;
  padding: var(--spacing-xs) 0;
  display: flex;
  align-items: center;
  height: 100%;
}

.header-logo-image {
  max-width: 100%;
  height: auto;
}

.header-search {
  position: relative;
  width: 100%;
  max-width: 300px;
}

.header-search-input {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  padding-right: 40px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  font-size: 14px;
}

.header-search-button {
  position: absolute;
  top: 50%;
  right: var(--spacing-xs);
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
}

.header-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: var(--spacing-xs);
  cursor: pointer;
  position: relative;
}

.header-icon-badge {
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--theme1-global-accent-color, #000);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Header Dropdown Toggles and Menus */
.header-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: none;
  border: none;
  padding: var(--spacing-xs);
  cursor: pointer;
  font-size: 14px;
  color: var(--theme1-global-header-text-hexcolor-1, #333);
}

.header-dropdown-toggle svg {
  transition: transform 0.2s ease;
}

.header-dropdown-toggle:hover svg,
.header-dropdown-toggle:focus svg {
  transform: translateY(2px);
}

.header-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 150px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 1000;
  padding: var(--spacing-xs) 0;
}

.header-language-selector,
.header-currency-selector {
  position: relative;
  display: inline-block;
  margin-left: var(--spacing-md);
}

.header-language-selector:hover .header-dropdown-menu,
.header-currency-selector:hover .header-dropdown-menu,
.header-language-selector:focus-within .header-dropdown-menu,
.header-currency-selector:focus-within .header-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-md);
  text-decoration: none;
  color: var(--theme1-global-menu-font-rgbcolor-1, #333);
  transition: background-color 0.2s ease;
}

.header-dropdown-menu a:hover,
.header-dropdown-menu a:focus {
  background-color: rgba(0, 0, 0, 0.05);
}

.header-dropdown-menu a.active {
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.03);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .header-grid {
    grid-template-columns: auto 1fr auto;
    padding: var(--spacing-xs) var(--spacing-md);
  }
  
  .header-main {
    padding: var(--spacing-xs) var(--spacing-md);
  }
  
  .header-grid-center {
    display: none;
  }
  
  .header-search {
    display: none;
  }
}

@media (max-width: 768px) {
  /* Removed header-top-bar responsive styles */
  /* Removed header-top-actions responsive styles */
}

/* Full-width section that spans the entire viewport width */
.full-width-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Responsive media handling */
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Ensure images in content areas don't overflow */
.webpage_grid_main img,
.webpage_grid_main picture,
.webpage_grid_main video,
.webpage_grid_main iframe {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Ensure tables don't overflow on mobile */
table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

@media (max-width: 768px) {
  /* Force all content to fit within viewport */
  .webpage_grid_main * {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Handle oversized images */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Make tables scrollable on mobile */
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}