:root {  
  --primary: #FFC0CB;  
  --secondary: #F8BBD0;  
  --accent: #FFFFFF;  
  --bg: #FDFDFD;  
  --text: #333333;  
  --cta: #F97316;  
  --border-color: rgba(0,0,0,0.08);  
  --shadow-mobile: 0 2px 8px rgba(0,0,0,0.10);  
  --focus-outline: 3px solid var(--primary);  
  --font-heading: 'Muli', sans-serif;  
  --font-body: 'Open Sans', sans-serif;  
}  
* {  
  box-sizing: border-box;  
}  
html {  
  font-family: var(--font-body);  
  font-size: 16px;  
  line-height: 1.6;  
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;  
  background: var(--bg);  
  color: var(--text);  
}  
body {  
  margin: 0;  
  background: var(--bg);  
}  
h1, h2, h3, h4, h5, h6 {  
  font-family: var(--font-heading);  
  margin-top: 0;  
  color: var(--primary);  
  line-height: 1.2;  
}  
h1 { font-size: 2rem; }  
h2 { font-size: 1.5rem; }  
h3 { font-size: 1.25rem; }  
a {  
  color: var(--cta);  
  text-decoration: none;  
  cursor: pointer;  
}  
a:hover, a:focus-visible {  
  text-decoration: underline;  
  outline-offset: 3px;  
}  
button, .cta-btn {  
  background-color: var(--cta);  
  color: #fff;  
  border: none;  
  border-radius: 4px;  
  padding: 12px 18px;  
  font-size: 1rem;  
  cursor: pointer;  
  box-shadow: var(--shadow-mobile);  
  transition: transform 200ms ease, box-shadow 200ms ease;  
  user-select: none;  
  min-width: 44px;  
  min-height: 44px;  
}  
button:disabled, button[aria-disabled="true"] {  
  opacity: 0.6;  
  cursor: not-allowed;  
}  
button:focus-visible, .cta-btn:focus-visible {  
  outline: var(--focus-outline);  
  outline-offset: 2px;  
}  
button:active, .cta-btn:active {  
  transform: scale(0.95);  
}  
header, nav, main, footer, section, article {  
  display: block;  
}  
img {  
  display: block;  
  max-width: 100%;  
  height: auto;  
}  
picture img {  
  object-fit: cover;  
}  
/* Hero image */  
.hero-image picture,  
.hero-image img {  
  width: 100%;  
  min-height: 360px;  
  aspect-ratio: 3 / 4;  
  object-fit: cover;  
}  
@media (min-width: 768px) {  
  .hero-image picture,  
  .hero-image img {  
    aspect-ratio: 16 / 9;  
    min-height: 480px;  
  }  
}  
/* Product gallery */  
.product-gallery {  
  contain: layout style;  
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));  
  gap: 12px;  
}  
.product-gallery picture img {  
  aspect-ratio: 1 / 1;  
  object-fit: cover;  
  width: 100%;  
}  
/* Lifestyle/promo images */  
.lifestyle-image picture img {  
  width: 100%;  
  aspect-ratio: 4 / 5;  
  object-fit: cover;  
}  
@media (min-width: 768px) {  
  .lifestyle-image picture img {  
    aspect-ratio: 16 / 9;  
  }  
}  
/* Category cards */  
.category-card picture img {  
  aspect-ratio: 1 / 1;  
  object-fit: cover;  
  width: 100%;  
}  
/* Sticky bottom CTA bar mobile */  
.sticky-bottom-cta {  
  position: fixed;  
  bottom: 0;  
  left: 0;  
  width: 100%;  
  background: rgba(255,255,255,0.96);  
  border-top: 1px solid var(--border-color);  
  box-shadow: var(--shadow-mobile);  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  padding: 8px 16px;  
  z-index: 999;  
  font-size: 1rem;  
}  
/* Urgency badge */  
.urgency-badge {  
  background: var(--primary);  
  color: var(--accent);  
  font-weight: 700;  
  font-size: 0.875rem;  
  padding: 4px 8px;  
  border-radius: 20px;  
  margin-left: 8px;  
  user-select: none;  
}  
/* Focus states for keyboard users */  
:focus-visible {  
  outline: var(--focus-outline);  
  outline-offset: 3px;  
}  
/* Reveal animation */  
@media (prefers-reduced-motion: no-preference) {  
  .reveal {  
    opacity: 0;  
    transform: translateY(20px);  
    transition: opacity 400ms ease, transform 400ms ease;  
  }  
  .reveal.visible {  
    opacity: 1;  
    transform: none;  
  }  
  .card:hover {  
    transform: translateY(-4px) scale(1.02);  
    transition: transform 200ms ease;  
  }  
}  
/* No backdrop-filter on mobile, replaced with solid transparent background */  
/* Only allowed on sticky nav and modal overlay at desktop ≥1024px */  
@media (min-width: 1024px) {  
  nav.sticky {  
    background: rgba(255, 255, 255, 0.72);  
    border-bottom: 1px solid var(--border-color);  
    backdrop-filter: blur(10px);  
  }  
  .modal-overlay {  
    background: rgba(0, 0, 0, 0.4);  
    backdrop-filter: blur(12px);  
  }  
}  
/* Sections with containment to improve performance */  
.reviews-section,  
.product-gallery,  
.blog-grid,  
.faq-section {  
  contain: layout style;  
}  
/* Box shadow rules */  
.card {  
  box-shadow: var(--shadow-mobile);  
  border-radius: 6px;  
  background: var(--accent);  
}  
@media (min-width: 768px) {  
  .card {  
    box-shadow: 0 4px 12px rgba(0,0,0,0.12), var(--shadow-mobile);  
  }  
}  
/* Loading spinner */  
.spinner {  
  border: 3px solid rgba(0,0,0,0.1);  
  border-left-color: var(--cta);  
  border-radius: 50%;  
  width: 24px;  
  height: 24px;  
  animation: spin 1s linear infinite;  
  display: inline-block;  
  vertical-align: middle;  
}  
@keyframes spin {  
  to { transform: rotate(360deg);}  
}  
/* Form styles */  
form label {  
  display: block;  
  margin-bottom: 4px;  
  font-weight: 600;  
}  
form input,  
form select,  
form textarea {  
  width: 100%;  
  padding: 10px;  
  border: 1px solid var(--border-color);  
  border-radius: 4px;  
  font-size: 1rem;  
  background: var(--accent);  
  color: var(--text);  
}  
form input:focus, form select:focus, form textarea:focus {  
  outline: var(--focus-outline);  
  border-color: var(--primary);  
}  
/* Visually hidden text for accessibility */  
.sr-only {  
  position: absolute;  
  width: 1px;  
  height: 1px;  
  padding: 0;  
  margin: -1px;  
  overflow: hidden;  
  clip: rect(0, 0, 0, 0);  
  white-space: nowrap;  
  border: 0;  
}  
/* FAQ accordion styles */  
.faq-section button {  
  background: none;  
  border: none;  
  width: 100%;  
  text-align: left;  
  padding: 12px 16px;  
  font-size: 1rem;  
  cursor: pointer;  
  border-bottom: 1px solid var(--border-color);  
}  
.faq-section button:focus-visible {  
  outline: var(--focus-outline);  
}  
.faq-section .answer {  
  max-height: 0;  
  overflow: hidden;  
  transition: max-height 0.3s ease;  
  padding: 0 16px;  
}  
.faq-section .answer.open {  
  max-height: 500px; /* large enough for content */  
  padding-top: 8px;  
}  
/* Print styles */  
@media print {  
  nav, footer, .announcement-bar {  
    display: none;  
  }  
  .price {  
    display: block !important;  
    color: #000 !important;  
  }  
}  
/* Disable transitions/animations for reduced motion preference */  
@media (prefers-reduced-motion: reduce) {  
  *, *::before, *::after {  
    transition: none !important;  
    animation: none !important;  
  }  
}  
/* Cursor pointer on interactive elements */  
button, a, .card, .cta-btn {  
  cursor: pointer;  
}