:root, [data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem;
  --color-bg: #f5f5f2; --color-surface: #ffffff; --color-surface-2: #efefeb; --color-surface-3: #e5e5e0; --color-border: rgba(10,10,10,.12); --color-divider: rgba(10,10,10,.08);
  --color-text: #111111; --color-text-muted: #5e5e5b; --color-text-faint: #898986; --color-text-inverse: #fafaf8;
  --color-primary: #111111; --color-primary-hover: #242424;
  --radius-sm: .5rem; --radius-md: .85rem; --radius-lg: 1.2rem; --radius-xl: 1.8rem; --radius-full: 9999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.05); --shadow-md: 0 14px 34px rgba(0,0,0,.08); --shadow-lg: 0 28px 70px rgba(0,0,0,.13);
  --transition: 240ms cubic-bezier(.16,1,.3,1);
  --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Manrope', Arial, sans-serif; --font-accent: 'Bodoni Moda', serif;
  --content: 1200px;
}

[data-theme="dark"] {
  --color-bg: #0f0f10; --color-surface: #171718; --color-surface-2: #1f1f21; --color-surface-3: #2a2a2d; --color-border: rgba(255,255,255,.12); --color-divider: rgba(255,255,255,.08);
  --color-text: #f4f4f1; --color-text-muted: #b0b0ad; --color-text-faint: #7c7c79; --color-text-inverse: #111111; --color-primary: #f4f4f1; --color-primary-hover: #ffffff;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.2); --shadow-md: 0 14px 34px rgba(0,0,0,.28); --shadow-lg: 0 28px 70px rgba(0,0,0,.42);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{min-height:100vh;background:var(--color-bg);color:var(--color-text);font:var(--text-base)/1.65 var(--font-body)}
img,svg{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--color-text);outline-offset:3px;border-radius:var(--radius-sm)}
.container{width:min(calc(100% - 2rem), var(--content));margin-inline:auto}
.skip-link{position:absolute;left:1rem;top:-4rem;background:var(--color-text);color:var(--color-bg);padding:.75rem 1rem;z-index:200}.skip-link:focus{top:1rem}
.site-header{position:sticky;top:0;z-index:90;background:color-mix(in srgb, var(--color-bg) 78%, transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--color-divider);isolation:isolate}
.site-header::before,.hero::before,.panel::before,.modal-panel::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.header-wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-3) 0;position:relative;z-index:1}
.brand{display:flex;align-items:flex-start;gap:var(--space-3)}
.brand-mark{width:2.7rem;height:2.7rem;border-radius:50%;border:1px solid var(--color-border);display:grid;place-items:center;background:var(--color-surface);position:relative;top:px;}
.logo-light { display: block; }
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }
.brand-name{font-family:var(--font-display);font-size:1.55rem;letter-spacing:.08em;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:var(--space-5);font-size:var(--text-sm)}
.nav a{position:relative}.nav a::after{content:'';position:absolute;left:0;bottom:-.28rem;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--transition)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:var(--space-2)}
.user-info{display:flex;align-items:center;gap:var(--space-2);margin-right:var(--space-2)}
.user-info span{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
.icon-btn,.lang-toggle{min-width:44px;min-height:44px;border-radius:var(--radius-full);display:grid;place-items:center;border:1px solid var(--color-border);background:var(--color-surface);transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition)}
.icon-btn:hover,.lang-toggle:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.lang-toggle{padding:0 .95rem;min-width:auto}
section{padding:clamp(3.5rem,7vw,6rem) 0}
.hero{padding:clamp(1.5rem,3.5vw,3rem) 0 var(--space-20);position:relative;overflow:hidden;isolation:isolate}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:var(--space-10);align-items:end}
.eyebrow{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.28em;color:var(--color-text-muted);margin-bottom:var(--space-4)}
h1,h2,h3{font-family:var(--font-display);line-height:1.06;font-weight:600}
h1{font-size:var(--text-3xl);max-width:10ch}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-lg)}
.hero-copy p,.section-head p,.panel p{color:var(--color-text-muted)}.hero-copy p{margin-top:var(--space-5);max-width:60ch}
.hero-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-8)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.2rem;border-radius:var(--radius-full);border:1px solid var(--color-border);transition:all var(--transition)}
.btn-primary{background:var(--color-text);color:var(--color-bg);border-color:var(--color-text)}.btn-primary:hover{background:transparent;color:var(--color-text)}
.btn-secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-text);color:var(--color-bg);border-color:var(--color-text)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-10)}
.stat{padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm)}
.stat b{display:block;font:500 var(--text-2xl)/1 var(--font-accent); letter-spacing: -0.02em; margin-bottom: 2px;}.stat span{display:block;margin-top:.35rem;font-size:var(--text-sm);color:var(--color-text-muted)}
.hero-visual{position:relative;min-height:640px;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--color-border);box-shadow:var(--shadow-lg);background:linear-gradient(180deg,var(--color-surface),var(--color-surface-2))}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(1.03);opacity:0;transition:opacity 900ms ease}.hero-slide.is-active{opacity:1}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:var(--space-6);margin-bottom:var(--space-8)}.section-head p{max-width:56ch}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.panel{position:relative;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-sm);isolation:isolate}
.quote{font-family:var(--font-display);font-size:var(--text-xl);max-width:16ch}
.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.product-card{display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--transition), box-shadow var(--transition)}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.product-media{position:relative;overflow:hidden;aspect-ratio:4/4.9;background:var(--color-surface-2)}
.product-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(100%);opacity:0;transition:opacity 700ms ease, transform 700ms ease}.product-slide.is-active{opacity:1}
.product-card:hover .product-slide.is-active{transform:scale(1.03)}
.product-body{display:flex;flex-direction:column;flex-grow:1;padding:var(--space-5)}
.product-meta{display:flex;justify-content:space-between;align-items:start;gap:var(--space-3);margin-bottom:var(--space-3)}
.badge{display:inline-flex;align-items:center;padding:.3rem .65rem;border-radius:var(--radius-full);border:1px solid var(--color-border);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.16em;color:var(--color-text-muted)}
.product-desc{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-4)}.price{font-weight:800;letter-spacing:.02em}
.product-actions{margin-top:auto;display:flex;gap:var(--space-2)}
.product-actions .btn{width:100%}
.history-layout{display:grid;grid-template-columns:1fr .95fr;gap:var(--space-8);align-items:start}
.timeline{display:grid;gap:var(--space-5)}
.timeline-item{padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}
.timeline-item small{display:block;margin-bottom:.45rem;font-size:var(--text-xs);letter-spacing:.24em;text-transform:uppercase;color:var(--color-text-faint)}
.history-gallery{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.history-photo{border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--color-border);box-shadow:var(--shadow-sm);background:var(--color-surface)}
.history-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%)}
.history-photo-lg{grid-column:1 / -1;min-height:340px}.history-photo:not(.history-photo-lg){min-height:200px}
.footer{padding:var(--space-12) 0 var(--space-8);border-top:1px solid var(--color-divider);background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-surface) 65%, transparent))}
.footer-top{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-10);padding-bottom:var(--space-8);align-items:start}
.footer-brand{display:flex;flex-direction:column;gap:var(--space-3)}
.footer-brand h3{font-family:var(--font-display);font-size:1.55rem;letter-spacing:.08em;text-transform:uppercase}
.footer-brand p{max-width:36ch;color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.6}
.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.footer-links small{display:block;margin-bottom:var(--space-4);font-size:var(--text-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--color-text-faint)}
.footer-links a,.footer-links p{display:block;margin-bottom:.7rem;color:var(--color-text-muted);font-size:var(--text-sm);transition:color var(--transition)}.footer-links a:hover{color:var(--color-text)}
.footer-bottom{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;padding-top:var(--space-5);border-top:1px solid var(--color-divider);font-size:var(--text-sm);color:var(--color-text-faint)}
.modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:var(--space-4);background:rgba(0,0,0,.48);backdrop-filter:blur(6px)}.modal.open{display:flex}
.modal-panel{position:relative;width:min(1040px,100%);max-height:90vh;overflow:auto;padding:var(--space-6);background:var(--color-bg);border:1px solid var(--color-border);border-radius:calc(var(--radius-xl) + .4rem);box-shadow:var(--shadow-lg);isolation:isolate}
.modal-close{position:absolute;right:1rem;top:1rem;z-index:2}
.checkout-shell{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--space-6)}
.cart-list{display:grid;gap:var(--space-3);margin-top:var(--space-5)}
.cart-item{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-3);align-items:center;padding:var(--space-3);border-radius:var(--radius-lg);background:var(--color-surface-2)}
.cart-thumb{width:66px;height:66px;border-radius:.85rem;object-fit:cover;filter:grayscale(100%)}
.qty-controls{display:inline-flex;align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-full);overflow:hidden}
.qty-controls button{width:36px;height:36px}.qty-controls span{min-width:2rem;text-align:center;font-size:var(--text-sm)}
.summary-line{display:flex;justify-content:space-between;gap:var(--space-3);padding:.85rem 0;border-bottom:1px solid var(--color-divider)}.summary-line.total{font-size:var(--text-lg);font-weight:800;border-bottom:none;padding-top:var(--space-4)}
.checkout-form{display:grid;gap:var(--space-4);margin-top:var(--space-5)}
.field{display:grid;gap:.45rem}.field label{font-size:var(--text-sm);color:var(--color-text-muted)}
.field input,.field textarea{width:100%;padding:.95rem 1rem;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface-2)}.field textarea{min-height:120px;resize:vertical}
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1)}[data-reveal].is-visible{opacity:1;transform:none}
@media (max-width:1080px){.nav{display:none}.hero-grid,.history-layout,.collection-grid,.checkout-shell,.about-grid,.footer-top{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.hero-grid,.history-layout,.collection-grid,.checkout-shell,.about-grid,.stat-row,.footer-top,.footer-links,.history-gallery{grid-template-columns:1fr}.hero-visual{min-height:500px}.section-head{flex-direction:column;align-items:start}.brand-name{font-size:1.25rem}.history-photo-lg,.history-photo:not(.history-photo-lg){min-height:240px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}[data-reveal]{opacity:1;transform:none}}

/* WhatsApp Floating Button */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: var(--color-text);
  color: var(--color-bg);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  z-index: 1000;
  transition: transform var(--transition), background-color var(--transition), color var(--transition);
}

.wa-float:hover {
  transform: translateY(-4px);
  background-color: var(--color-surface-3);
  color: var(--color-text);
}


.wa-float svg {
  fill: currentColor;
}

@media (max-width: 760px) {
  .wa-float span {
    display: none;
  }
  .wa-float {
    padding: 12px;
    border-radius: 50%;
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}