/* =============================================================
   The Pink Ribbon - Upgrade Site Stylesheet (Responsive Enhanced)
   ============================================================= */
:root {
  --color-bg: #FFF8F9;
  --color-bg-alt: #ffffff;
  --color-primary: #E52A78;
  --color-primary-rgb: 229,42,120;
  --color-text: #333;
  --color-text-alt: #4B5563;
  --color-muted: #6B7280;
  --color-border: #f3e8e2;
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --container: 1280px;
  --shadow-sm: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
  --shadow-lg: 0 22px 34px -8px rgba(0,0,0,0.16);
  --transition: 300ms cubic-bezier(.4,0,.2,1);
  --font-display: 'Playfair Display', serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --header-height: 84px;
  /* Fluid type scale */
  --step--2: clamp(0.65rem, 0.63rem + 0.3vw, 0.75rem);
  --step--1: clamp(0.75rem, 0.71rem + 0.35vw, 0.85rem);
  --step-0: clamp(0.875rem, 0.83rem + 0.4vw, 1rem);
  --step-1: clamp(1rem, 0.93rem + 0.6vw, 1.25rem);
  --step-2: clamp(1.25rem, 1.15rem + 0.9vw, 1.6rem);
  --step-3: clamp(1.55rem, 1.4rem + 1.2vw, 2.05rem);
  --step-4: clamp(1.95rem, 1.7rem + 1.8vw, 2.6rem);
  --step-5: clamp(2.35rem, 2rem + 2.4vw, 3.3rem);
}

/* (reverted) removed theme transition gating */

.dark-theme {
  --color-bg: #121317;
  --color-bg-alt: #1c1f24;
  --color-text: #f5f6f7;
  --color-text-alt: #d0d4d9;
  --color-muted: #9aa0ab;
  --color-border: #2a2f36;
  --shadow-sm: 0 2px 4px -1px rgba(0,0,0,0.6), 0 1px 2px -1px rgba(0,0,0,0.4);
  --shadow: 0 8px 18px -6px rgba(0,0,0,0.65), 0 4px 10px -4px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 32px -8px rgba(0,0,0,0.65), 0 8px 16px -6px rgba(0,0,0,0.45);
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); line-height:1.55; -webkit-font-smoothing:antialiased; font-size: var(--step-0); }
img { max-width:100%; display:block; height:auto; }
a { color:inherit; text-decoration:none; }
.font-display { font-family: var(--font-display); }
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:1.25rem; }
@media (min-width: 768px){ .container { padding-inline:2rem; } }

/* Fluid headings & utilities */
h1,h2,h3,h4,h5,h6 { line-height:1.15; font-weight:600; margin:0 0 .6em; }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }
h5 { font-size: var(--step-1); }
h6 { font-size: var(--step-0); }
p, li { font-size: var(--step-0); }
small { font-size: var(--step--1); }
.text-xs { font-size: var(--step--2); }
.text-sm { font-size: var(--step--1); }
.text-base { font-size: var(--step-0); }
.text-lg { font-size: var(--step-1); }
.text-xl { font-size: var(--step-2); }
.text-2xl { font-size: var(--step-3); }
.text-3xl { font-size: var(--step-4); }
.text-4xl { font-size: var(--step-5); }

/* Header */
#site-header { position:fixed; inset-inline:0; top:0; z-index:100; background:rgba(255,255,255,.8); backdrop-filter:blur(10px); border-bottom:1px solid rgba(0,0,0,0.05); transition:var(--transition); }
.dark-theme #site-header { background:rgba(24,26,30,0.88); border-bottom:1px solid var(--color-border); }
#site-header.scrolled { box-shadow: var(--shadow-sm); }
.header-inner { display:flex; align-items:center; justify-content:space-between; min-height:var(--header-height); gap:1rem; }
.brand { display:flex; align-items:center; gap:.65rem; font-weight:700; font-size:var(--step-1); color:var(--color-primary); letter-spacing:.5px; }
.brand img { width:3.1rem; }
.primary-nav { display:none; align-items:center; gap:2rem; font-weight:500; }
.primary-nav a { position:relative; padding:.25rem 0; font-size:.9rem; letter-spacing:.5px; color:var(--color-text-alt); }
.primary-nav a.is-accent { color:var(--color-primary); font-weight:700; }
.header-right { display:flex; align-items:center; gap:1rem; }
.header-icons { display:flex; align-items:center; gap:0.5rem; }
.icon-btn, .mobile-toggle { background:none; border:none; padding:.55rem .8rem; border-radius: var(--radius-sm); cursor:pointer; font-size:.75rem; letter-spacing:.5px; transition: var(--transition); }
.icon-btn:hover, .mobile-toggle:hover { background:var(--color-bg-alt); }
.icon-btn::before { margin-right: .35rem; }

/* Header Icon Styles */
.header-icons .icon-btn { 
  padding: 0.5rem; 
  border: none;
  display: flex; 
  align-items: center; 
  justify-content: center;
  width: 40px;
  height: 40px;
}
.header-icons .icon-btn svg { 
  color: var(--color-text); 
  transition: var(--transition); 
}
.header-icons .icon-btn:hover svg { 
  color: var(--color-primary); 
}

/* Modern Theme Toggle Button */
.theme-toggle { 
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px; border:1px solid var(--color-border);
  background:#111; color:#fff; cursor:pointer; transition:transform .2s ease, background .3s ease, color .3s ease; 
}
.theme-toggle:hover { transform: translateY(-1px); }
.theme-toggle:active { transform: translateY(0); }
.theme-toggle:focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; }
.theme-toggle .icon-moon { display:none; }
.theme-toggle .icon-sun, .theme-toggle .icon-moon { pointer-events:none; }

/* Light mode: black button with white sun (default) */
body:not(.dark-theme) .theme-toggle { background:#111; color:#fff; }
body:not(.dark-theme) .theme-toggle .icon-sun { display:block; }
body:not(.dark-theme) .theme-toggle .icon-moon { display:none; }

/* Dark mode: white button with black moon */
body.dark-theme .theme-toggle { background:#fff; color:#111; }
body.dark-theme .theme-toggle .icon-sun { display:none; }
body.dark-theme .theme-toggle .icon-moon { display:block; }

/* (reverted) removed theme toggle styles */


/* Cart Button Styles */
.cart-btn { position: relative; }
.cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
}
.cart-count[hidden] { display: none; }

/* Modal Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.modal-content {
  position: relative;
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
}
.cart-modal-content {
  width: 400px;
  max-width: 90vw;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.modal-header h3 {
  margin: 0;
  font-size: var(--step-1);
}
.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-muted);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: var(--transition);
}
.modal-close:hover {
  background: var(--color-border);
  color: var(--color-text);
}
.modal-body {
  padding: 1.5rem;
  max-height: 400px;
  overflow-y: auto;
}
.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.empty-cart {
  text-align: center;
  color: var(--color-muted);
  padding: 2rem;
}
.empty-cart svg {
  margin: 0 auto 1rem;
  opacity: 0.5;
}
.cart-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.cart-item-image {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}
.cart-item-details {
  flex: 1;
}
.cart-item-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.cart-item-price {
  color: var(--color-primary);
  font-weight: 500;
}
.cart-item-remove {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.cart-item-remove:hover {
  background: var(--color-border);
  color: var(--color-text);
}
/* Removed theme toggle styles; retained mode toggle placeholder if reintroduced */
.mobile-toggle { display:flex; align-items:center; }
@media (min-width:880px){ .primary-nav { display:flex; } .mobile-toggle { display:none; } }

/* Mobile Drawer */
.mobile-drawer { position:fixed; top:0; right:0; bottom:0; width:min(320px,80vw); background:var(--color-bg-alt); box-shadow:-2px 0 8px -2px rgba(0,0,0,.15); transform:translateX(100%); transition:var(--transition); z-index:150; display:flex; flex-direction:column; gap:1.25rem; padding:1.25rem 1.35rem; }
.mobile-drawer.open { transform:translateX(0); }
.drawer-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:var(--transition); z-index:140; }
.drawer-backdrop.visible { opacity:1; pointer-events:auto; }
.mobile-drawer nav { display:flex; flex-direction:column; gap:1.2rem; margin-top:1rem; }
.mobile-drawer a { font-weight:600; color:var(--color-text-alt); }
.drawer-actions { margin-top:auto; display:flex; gap:.5rem; flex-wrap:wrap; }
.btn-sm { font-size:.65rem; padding:.45rem .7rem; border:1px solid var(--color-border); background:var(--color-bg); border-radius:999px; cursor:pointer; }
.btn-sm:hover { background:var(--color-primary); color:#fff; }

/* Hero */
.hero { padding: calc(var(--header-height) + 3rem) 0 4.5rem; text-align:center; position:relative; overflow:hidden; }
.hero-decoration::before { content:""; position:absolute; width:520px; height:520px; top:-140px; left:50%; transform:translateX(-60%); background:radial-gradient(circle at 50% 50%, rgba(var(--color-primary-rgb),0.18), transparent 70%); filter:blur(18px); }
.hero-background-collage { position: absolute; inset: 0; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600"><defs><filter id="blur"><feGaussianBlur stdDeviation="8"/></filter></defs><g filter="url(%23blur)" opacity="0.15"><rect x="100" y="50" width="200" height="280" fill="%23E52A78" rx="10"/><rect x="350" y="100" width="180" height="260" fill="%23C51862" rx="10"/><rect x="580" y="80" width="220" height="300" fill="%23E52A78" rx="10"/><rect x="850" y="120" width="190" height="240" fill="%23C51862" rx="10"/><ellipse cx="200" cy="400" rx="140" ry="120" fill="%23E52A78"/><ellipse cx="500" cy="450" rx="160" ry="100" fill="%23C51862"/><ellipse cx="850" cy="420" rx="130" ry="110" fill="%23E52A78"/></g></svg>'); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; pointer-events: none; }
.hero .container { position: relative; z-index: 1; }
.hero h1 { font-size: var(--step-5); line-height:1.1; font-weight:700; margin:1.5rem auto 1rem; max-width:18ch; letter-spacing:.5px; }
.hero h1 .accent { color:var(--color-primary); }
.hero .lead { font-size: var(--step-1); color:var(--color-text-alt); max-width:52ch; margin:0 auto 2rem; }

/* Buttons */
.btn-pill { display:inline-flex; align-items:center; gap:.6rem; border:none; cursor:pointer; background:var(--color-primary); color:#fff; padding:1rem 2.2rem; font-weight:700; font-size:.9rem; letter-spacing:.5px; border-radius:999px; position:relative; box-shadow:0 10px 20px -4px rgba(var(--color-primary-rgb),.35); transition:var(--transition); }
.btn-pill.primary:hover { transform:translateY(-3px); box-shadow:0 16px 28px -6px rgba(var(--color-primary-rgb),.42); }
.btn-pill.inverted { background:#fff; color:var(--color-primary); box-shadow:0 10px 20px -4px rgba(var(--color-primary-rgb),.25); }
.btn-pill.inverted:hover { background:var(--color-primary); color:#fff; }

/* Sections */
.section { padding:4.5rem 0; position:relative; }
.section-header { text-align:center; max-width:860px; margin:0 auto 2.75rem; }
.section-header h2 { font-size: var(--step-3); font-weight:600; color:var(--color-primary); letter-spacing:.04em; position:relative; display:inline-block; }
.section-header p { margin-top:1.1rem; color:var(--color-muted); font-size:var(--step--1); line-height:1.55; }

/* Carousel */
.carousel-shell { position:relative; }
.carousel-controls { position:absolute; top:-3.2rem; right:0; display:flex; gap:.5rem; }
.carousel-btn { background:var(--color-primary); border:none; color:#fff; font-size:.65rem; padding:.55rem .9rem; border-radius:999px; cursor:pointer; font-weight:600; letter-spacing:.6px; display:inline-flex; align-items:center; gap:.35rem; box-shadow:0 6px 14px -4px rgba(var(--color-primary-rgb),0.4); }
.carousel-btn:hover { background:#c51862; }
.carousel-container { width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.carousel-track { display:flex; width:fit-content; animation:marquee linear infinite; }
@keyframes marquee { to { transform:translateX(calc(-1 * var(--scroll-distance, 0px))); } }
.carousel-track.pre-init { animation:none !important; transform:translateX(0); }
.carousel-container { min-height:320px; }
.carousel-card img.img-fallback { object-fit:contain; padding:1.5rem; filter:grayscale(.1) contrast(1.05); }
.carousel-card { width:240px; flex-shrink:0; margin-right:2rem; background:#FDFBF9; border:1px solid #f3e8e2; border-radius:.75rem; overflow:hidden; display:flex; flex-direction:column; transition:var(--transition); }
@media (min-width:640px){ .carousel-card { width:256px; } }
.carousel-card .media { padding:1rem; background:#FCFCFC; display:flex; align-items:center; justify-content:center; aspect-ratio: 1 / 1; }
.carousel-card img { width:100%; height:auto; object-fit:cover; border-radius:8px; }
.carousel-card .content { padding:1.3rem 1rem 1.6rem; text-align:center; }
.carousel-card h3 { margin:0; font-size:var(--step-1); font-family:var(--font-display); font-weight:600; }
.carousel-card p { margin:.55rem 0 0; font-size:var(--step--1); letter-spacing:.5px; color:var(--color-muted); font-weight:600; }
.carousel-card .price { margin-top: .75rem; font-size: var(--step-0); font-weight: 700; color: var(--color-primary); }
.carousel-card:hover { transform:translateY(-8px); box-shadow: var(--shadow); }

/* Add to Cart Button */
.add-to-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  background: var(--color-primary);
  color: white;
  border: none;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 0.75rem;
  font-family: inherit;
}

.add-to-cart-btn:hover {
  background: var(--color-primary-darker, #e63946);
  transform: translateY(-1px);
}

.add-to-cart-btn:active {
  transform: translateY(0);
}

.add-to-cart-btn svg {
  stroke-width: 2.5;
}
.carousel-container:hover .carousel-track { animation-play-state:paused; }

/* Skeleton */
.skeleton-wrapper { display:flex; }
.skeleton-card { width:240px; flex-shrink:0; margin-right:2rem; background:var(--color-bg-alt); border:1px solid var(--color-border); border-radius:.75rem; overflow:hidden; }
@media (min-width:640px){ .skeleton-card { width:256px; } }
.skeleton-media { aspect-ratio:1/1; background:linear-gradient(90deg, var(--color-border) 0%, var(--color-bg-alt) 40%, var(--color-border) 80%); background-size:200% 100%; animation:skeleton 1.4s ease-in-out infinite; }
.skeleton-line { height:12px; margin:12px 18px; border-radius:4px; background:linear-gradient(90deg, var(--color-border) 0%, var(--color-bg-alt) 40%, var(--color-border) 80%); background-size:200% 100%; animation:skeleton 1.4s ease-in-out infinite; }
.skeleton-line.short { width:60%; }
.skeleton-line.long { width:80%; }
@keyframes skeleton { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
.dark-theme .skeleton-media, .dark-theme .skeleton-line { background:linear-gradient(90deg, #2a2f36 0%, #1c1f24 40%, #2a2f36 80%); }

/* Process */
.process-grid { display:grid; gap:2rem; justify-content:center; grid-template-columns:repeat(auto-fit, minmax(250px, 320px)); }
.process-card { background:#fff; border-radius:1rem; padding:2rem; text-align:center; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.process-card h3 { font-size:var(--step-2); margin:.25rem 0 .75rem; font-family:var(--font-display); }
.process-card p { color:var(--color-text-alt); font-size:var(--step--1); line-height:1.55; }
.process-icon { font-size:2.2rem; }
.dark-theme .process-card { background:var(--color-bg-alt); }

/* CTA */
.cta { background:var(--color-primary); text-align:center; padding:5rem 0; position:relative; overflow:hidden; }
.cta h2 { color:#fff; font-size:var(--step-3); margin:0 0 1rem; letter-spacing:.5px; }
.cta p { color:#FCE7F3; max-width:55ch; margin:0 auto 2rem; font-size:var(--step-0); }
.cta-socials { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; }
.social-link { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.15); color: #fff; padding: .9rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: .9rem; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.2); transition: var(--transition); }
.social-link:hover { background: #fff; color: var(--color-primary); transform: translateY(-3px); box-shadow: 0 10px 20px -4px rgba(0,0,0,.25); }
.social-icon { font-size: 1.3rem; }

/* Footer */
.site-footer { background:#1F2937; color:#fff; padding:3.5rem 0 2.5rem; }
.footer-grid { display:grid; gap:2rem; text-align:center; }
@media (min-width:820px){ .footer-grid { grid-template-columns:repeat(3,1fr); text-align:left; } }
.brand-inline { display:flex; align-items:center; justify-content:center; gap:.6rem; margin-bottom:.75rem; }
@media (min-width:820px){ .brand-inline { justify-content:flex-start; } }
.brand-inline img { width:2.75rem; }
.site-footer h4 { font-size:var(--step-0); margin:0 0 1rem; font-weight:700; letter-spacing:.5px; }
.site-footer ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.site-footer a { color:#9CA3AF; font-size:var(--step--1); }
.site-footer a:hover { color:#fff; }
.socials { display:flex; gap:1rem; justify-content:center; }
@media (min-width:820px){ .socials { justify-content:flex-start; } }
.footer-cta { text-align: center; margin: 3rem auto 2rem; padding: 2.5rem 0; border-top: 1px solid #374151; border-bottom: 1px solid #374151; max-width: 800px; }
.footer-cta p { color: #D1D5DB; margin-bottom: 1.5rem; font-size: var(--step-0); }
.legal { margin-top:2.5rem; padding-top:2rem; border-top:1px solid #374151; text-align:center; color:#6B7280; font-size:var(--step--2); letter-spacing:.5px; }
.tagline { color:#9CA3AF; }

/* Reveal */
.reveal { opacity:0; transform:translateY(30px); transition: opacity .8s ease-out, transform .6s ease-out; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) { .carousel-track { animation:none !important; transform:none !important; } }

/* Focus */
:where(a,button):focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; border-radius:4px; }

/* Classic Mode Tweaks */
.classic-mode .hero { padding-top:8rem; padding-bottom:4rem; }
.classic-mode .hero h1 { font-size: var(--step-5); letter-spacing:0; }
@media (max-width:780px){ .classic-mode .hero h1 { font-size: var(--step-4); } }
.classic-mode .section { padding:5rem 0; }
.classic-mode .section-header h2 { font-size:var(--step-3); letter-spacing:.04em; }
.classic-mode .carousel-card { background:#FDFBF9; border:1px solid #f3e8e2; box-shadow:none; }
.classic-mode .carousel-card p { text-transform:none; letter-spacing:0; font-size:var(--step--1); }

/* Modern Mode Enhancements */
.modern-mode .carousel-card { position:relative; }
.modern-mode .carousel-card:hover { box-shadow:var(--shadow-lg); }
.modern-mode .carousel-card p { text-transform:uppercase; }

/* Print */
@media print { #site-header, .mobile-drawer, .carousel-container, .cta { display:none !important; } .hero { padding-top:1rem; } }