/* ==========================================================================
   K97 — Joyería y bisutería · Santo Domingo
   Design system from ui-ux-pro-max ("affordable fashion jewelry catalog"):
   rose + gold on blush, Cormorant (display) + Montserrat (body).
   ========================================================================== */

:root {
  --color-background: #FDF7F9;      /* blush */
  --color-surface: #F9EBF1;         /* soft rose */
  --color-card: #FFFFFF;
  --color-foreground: #1F1A1D;
  --color-muted-foreground: #5E5359; /* 7:1 on blush */
  --color-border: #EFDCE4;
  --color-border-strong: #D9BFCB;
  --color-primary: #BE185D;         /* rose, 6:1 with white */
  --color-primary-hover: #9D174D;
  --color-on-primary: #FFFFFF;
  --color-primary-soft: #FCE7F0;
  --color-gold: #B45309;            /* text-safe gold */
  --color-gold-line: #D9A85B;       /* decorative only */
  --color-dark: #241B20;
  --color-on-dark: #FDF7F9;
  --color-on-dark-muted: #E2D3DA;
  --color-wa: #128C4A;              /* WhatsApp-ish green, 4.9:1 with white */
  --color-error: #B42318;
  --color-ring: #BE185D;

  --swatch-oro: linear-gradient(135deg, #F6E3A8, #D4A940 55%, #B98A22);
  --swatch-plateado: linear-gradient(135deg, #F4F4F5, #C9CBD0 55%, #9EA2A8);
  --swatch-rosa: linear-gradient(135deg, #F8D9CC, #E1A48E 55%, #C27E68);

  --font-serif: "Cormorant", Georgia, "Times New Roman", serif;
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-display: clamp(2.6rem, 7vw, 5.25rem);
  --text-h1: clamp(2.3rem, 5vw, 3.75rem);
  --text-h2: clamp(1.9rem, 3.8vw, 2.9rem);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1280px;
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(36, 27, 32, .06);
  --shadow-md: 0 10px 30px -12px rgba(36, 27, 32, .22);
  --shadow-lg: 0 24px 60px -24px rgba(36, 27, 32, .35);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-fast: 160ms; --dur-base: 300ms; --dur-slow: 800ms;

  --z-sticky: 30; --z-header: 40; --z-float: 50; --z-sheet: 70; --z-skip: 100;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--color-background); color: var(--color-foreground);
  font-family: var(--font-sans); font-size: 1rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; font-variant-numeric: lining-nums;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible { outline-color: var(--color-on-dark); }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; } /* headings only receive focus to guide screen readers */
.skip-link {
  position: fixed; left: var(--space-4); top: var(--space-4); z-index: var(--z-skip);
  background: var(--color-dark); color: var(--color-on-dark); padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full); text-decoration: none; font-weight: 600;
  transform: translateY(-200%); transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: none; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: currentColor; stroke: none; }
.icon-sm { width: 16px; height: 16px; }

/* ---------- Type helpers ---------- */
.kicker { display: inline-flex; align-items: center; gap: var(--space-3); font-size: .8125rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--color-primary); }
.kicker::before { content: ""; width: 28px; height: 1px; background: var(--color-gold-line); }
.on-dark .kicker { color: #F9C6DA; }
.section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-7); max-width: 680px; }
.section-head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.section-head h2 { font-size: var(--text-h2); }
.section-head p { color: var(--color-muted-foreground); }
.muted { color: var(--color-muted-foreground); }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-full); border: 1px solid transparent;
  background: var(--color-primary); color: var(--color-on-primary);
  font-size: .9375rem; font-weight: 600; letter-spacing: .02em; text-decoration: none; cursor: pointer;
  overflow: hidden; isolation: isolate; touch-action: manipulation;
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  transform: translateX(-120%);
}
@media (hover: hover) {
  .btn:hover { background: var(--color-primary-hover); }
  .btn:hover::after { transform: translateX(120%); transition: transform 800ms var(--ease-out); }
}
.btn:active { transform: scale(.97); }
.btn--outline { background: transparent; color: var(--color-foreground); border-color: var(--color-border-strong); }
@media (hover: hover) { .btn--outline:hover { background: var(--color-card); border-color: var(--color-foreground); } }
.btn--wa { background: var(--color-wa); }
@media (hover: hover) { .btn--wa:hover { background: #0E7A40; } }
.btn--light { background: var(--color-on-dark); color: var(--color-dark); }
@media (hover: hover) { .btn--light:hover { background: #FFFFFF; } }
.btn--sm { min-height: 44px; padding: 0 var(--space-5); font-size: .875rem; }
.btn--block { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: 600; font-size: .9375rem; color: var(--color-primary); text-decoration: none; }
.link-arrow .icon { transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) { .link-arrow:hover .icon { transform: translateX(4px); } .link-arrow:hover span { text-decoration: underline; text-underline-offset: 4px; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(253, 247, 249, .9); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled { border-bottom-color: var(--color-border); box-shadow: var(--shadow-sm); }
.site-header.is-hidden { transform: translateY(-100%); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 76px; }
.logo { display: inline-flex; align-items: baseline; gap: var(--space-2); text-decoration: none; line-height: 1; }
.logo-word { font-family: var(--font-serif); font-weight: 700; font-size: 2rem; letter-spacing: .02em; font-variant-numeric: lining-nums; }
.logo-word span { color: var(--color-primary); }
.logo-sub { font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--color-muted-foreground); display: none; }
@media (min-width: 480px) { .logo-sub { display: inline; } }
.nav-list { display: none; list-style: none; margin: 0; padding: 0; gap: var(--space-2); }
.nav-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-full); text-decoration: none; font-weight: 500; font-size: .9375rem; transition: background-color var(--dur-fast); }
@media (hover: hover) { .nav-list a:hover { background: var(--color-surface); } }
.nav-list a[aria-current="page"] { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.lang-switch { display: inline-flex; align-items: center; padding: 3px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-card); }
.lang-switch button { min-width: 40px; min-height: 36px; border: 0; background: none; border-radius: var(--radius-full); font-size: .75rem; font-weight: 700; letter-spacing: .08em; cursor: pointer; color: var(--color-muted-foreground); transition: background-color var(--dur-fast), color var(--dur-fast); }
.lang-switch button[aria-pressed="true"] { background: var(--color-dark); color: var(--color-on-dark); }
.header-wa { display: none; }
.menu-toggle { width: 48px; height: 48px; display: inline-grid; place-items: center; border: 0; background: none; cursor: pointer; border-radius: var(--radius-full); }
.menu-toggle .icon { width: 24px; height: 24px; }
@media (min-width: 960px) {
  .nav-list { display: flex; }
  .menu-toggle { display: none; }
  .header-wa { display: inline-flex; }
}

/* Mobile menu (slide-in panel) */
.mobile-menu { position: fixed; inset: 0; z-index: var(--z-sheet); visibility: hidden; }
.mobile-menu.is-open { visibility: visible; }
.mobile-menu-backdrop { position: absolute; inset: 0; background: rgba(36, 27, 32, .45); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.mobile-menu.is-open .mobile-menu-backdrop { opacity: 1; }
.mobile-menu-panel {
  position: absolute; inset: 0 0 0 auto; width: min(360px, 88vw); background: var(--color-background);
  display: flex; flex-direction: column; padding: var(--space-4) var(--space-5) max(var(--space-5), env(safe-area-inset-bottom));
  transform: translateX(100%); transition: transform 420ms var(--ease-out); box-shadow: var(--shadow-lg);
}
.mobile-menu.is-open .mobile-menu-panel { transform: none; }
.mobile-menu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.mobile-menu nav a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 var(--space-3); border-radius: var(--radius-sm); font-family: var(--font-serif); font-size: 1.75rem; font-weight: 600; text-decoration: none; }
.mobile-menu nav a[aria-current="page"] { color: var(--color-primary); }
.mobile-menu nav li { opacity: 0; transform: translateX(16px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(80ms + var(--i, 0) * 45ms); }
.mobile-menu.is-open nav li { opacity: 1; transform: none; }
.mobile-menu-foot { margin-top: auto; display: grid; gap: var(--space-3); }
.mobile-menu-foot p { font-size: .875rem; color: var(--color-muted-foreground); }
.icon-btn { width: 48px; height: 48px; display: grid; place-items: center; border: 0; background: none; border-radius: var(--radius-full); cursor: pointer; }
@media (hover: hover) { .icon-btn:hover { background: var(--color-surface); } }
body.is-locked { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: var(--space-7) 0 var(--space-8); }
.hero::before {
  content: ""; position: absolute; width: 760px; height: 760px; right: -220px; top: -260px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(190, 24, 93, .12), transparent); pointer-events: none;
}
.hero-grid { position: relative; display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1fr 1.05fr; gap: var(--space-8); } .hero { padding: var(--space-8) 0 var(--space-9); } }
.hero h1 { font-size: var(--text-display); font-weight: 600; line-height: 1; margin-top: var(--space-4); }
.hero h1 em { font-style: italic; color: var(--color-primary); font-weight: 500; }
.hero-sub { margin-top: var(--space-5); font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); color: var(--color-muted-foreground); max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero-badges { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-6); list-style: none; padding: 0; font-size: .875rem; color: var(--color-muted-foreground); }
.hero-badges li { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero-badges .icon { color: var(--color-primary); width: 18px; height: 18px; }

/* Collage */
.collage { position: relative; aspect-ratio: 1 / 1; max-width: 560px; width: 100%; justify-self: center; }
.collage-item { position: absolute; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-card); box-shadow: var(--shadow-lg); }
.collage-item img { width: 100%; height: 100%; object-fit: cover; }
.collage-item:nth-child(1) { inset: 0 22% 22% 0; }
.collage-item:nth-child(2) { width: 46%; aspect-ratio: 1; right: 0; top: 10%; }
.collage-item:nth-child(3) { width: 42%; aspect-ratio: 1; right: 8%; bottom: 0; }
.collage-tag {
  position: absolute; left: 6%; bottom: 8%; z-index: 2; display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-card); padding: var(--space-3) var(--space-4); border-radius: var(--radius-full); box-shadow: var(--shadow-md);
  font-size: .875rem; font-weight: 600;
}
.collage-tag .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-wa); box-shadow: 0 0 0 4px rgba(18, 140, 74, .15); }

/* ---------- Sections ---------- */
.section { padding: var(--space-8) 0; }
@media (min-width: 960px) { .section { padding: var(--space-9) 0; } }
.section--surface { background: var(--color-surface); }
.section--dark { background: var(--color-dark); color: var(--color-on-dark); }

/* Shop by type */
.type-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .type-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .type-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-4); } }
.type-card { position: relative; display: grid; text-decoration: none; border-radius: var(--radius-md); overflow: hidden; background: var(--color-card); border: 1px solid var(--color-border); transition: border-color var(--dur-base), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.type-card .media { aspect-ratio: 1 / 1; }
.type-card-body { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.type-card h3 { font-size: 1.375rem; }
.type-card .count { font-size: .8125rem; color: var(--color-muted-foreground); }
@media (hover: hover) { .type-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); } }

/* Media */
.media { position: relative; overflow: hidden; background: var(--color-surface); }
.media img { width: 100%; height: 100%; object-fit: cover; color: transparent; transition: transform 900ms var(--ease-out); }
@media (hover: hover) { a:hover .media img, .product-card:hover .media img { transform: scale(1.05); } }

/* Materials */
.materials { display: grid; gap: var(--space-4); }
@media (min-width: 860px) { .materials { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.material-card { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-card); border: 1px solid var(--color-border); text-decoration: none; transition: border-color var(--dur-base), box-shadow var(--dur-base) var(--ease-out); }
@media (hover: hover) { .material-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); } }
.material-card .badge { justify-self: start; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary); }
.material-card h3 { font-size: 1.75rem; }
.material-card p { color: var(--color-muted-foreground); font-size: .9375rem; }
.material-card ul { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; gap: var(--space-2); font-size: .9375rem; }
.material-card li { display: flex; gap: var(--space-2); align-items: flex-start; }
.material-card li .icon { color: var(--color-primary); margin-top: 3px; width: 18px; height: 18px; }

/* Colors */
.colors { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; margin-inline: auto; }
.color-card { display: grid; justify-items: center; gap: var(--space-3); text-decoration: none; padding: var(--space-5) var(--space-2); border-radius: var(--radius-lg); transition: background-color var(--dur-base); }
@media (hover: hover) { .color-card:hover { background: var(--color-card); } .color-card:hover .swatch { transform: scale(1.06) rotate(-8deg); } }
.swatch { width: clamp(72px, 16vw, 112px); aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 -6px 14px rgba(0,0,0,.12), inset 0 6px 14px rgba(255,255,255,.6), var(--shadow-md); transition: transform 500ms var(--ease-spring); }
.swatch--oro { background: var(--swatch-oro); }
.swatch--plateado { background: var(--swatch-plateado); }
.swatch--rosa { background: var(--swatch-rosa); }
.color-card strong { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; }
.color-card span { font-size: .8125rem; color: var(--color-muted-foreground); }

/* Wholesale banner */
.wholesale { display: grid; gap: var(--space-6); align-items: center; padding: var(--space-7) var(--space-6); border-radius: var(--radius-lg); background: var(--color-dark); color: var(--color-on-dark); position: relative; overflow: hidden; }
.wholesale::after { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; bottom: -220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(217, 168, 91, .35), transparent); pointer-events: none; }
@media (min-width: 860px) { .wholesale { grid-template-columns: 1.4fr auto; padding: var(--space-8); } }
.wholesale h2 { font-size: var(--text-h2); color: var(--color-on-dark); }
.wholesale p { color: var(--color-on-dark-muted); margin-top: var(--space-3); max-width: 46ch; }
.wholesale .actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Visit */
.visit { display: grid; gap: var(--space-6); }
@media (min-width: 960px) { .visit { grid-template-columns: 1fr 1.2fr; gap: var(--space-8); align-items: center; } }
.info-list { display: grid; gap: var(--space-5); margin: var(--space-6) 0; }
.info-list div { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); }
.info-list dt { color: var(--color-primary); padding-top: 2px; }
.info-list dd { margin: 0; color: var(--color-muted-foreground); }
.info-list dd strong { display: block; color: var(--color-foreground); font-weight: 600; }
.info-list a { color: inherit; text-underline-offset: 3px; }
.hours { border-collapse: collapse; }
.hours td { padding: 1px 0; }
.hours td + td { padding-left: var(--space-5); font-variant-numeric: tabular-nums; }
.actions-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.map-box { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-placeholder { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: var(--space-3); text-align: center; padding: var(--space-5);
  background: radial-gradient(circle at 30% 30%, #FBE3EC, transparent 60%), radial-gradient(circle at 75% 70%, #F3E6CF, transparent 55%), var(--color-surface); }
.map-placeholder .pin { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary); color: #fff; box-shadow: 0 0 0 10px rgba(190, 24, 93, .12); }
.map-placeholder strong { font-family: var(--font-serif); font-size: 1.5rem; }
.map-placeholder p { font-size: .875rem; color: var(--color-muted-foreground); }
.addr-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(190, 24, 93, .35); text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.addr-link:hover, .addr-link:focus-visible { color: var(--color-primary); text-decoration-color: currentColor; }
.footer-col .addr-link:hover { color: var(--color-on-dark); }

/* ---------- Product cards ---------- */
.product-grid { display: grid; gap: var(--space-6) var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); } }
@media (min-width: 1200px) { .product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.product-card { position: relative; display: grid; gap: var(--space-3); align-content: start; }
.product-card .media { aspect-ratio: 1 / 1; border-radius: var(--radius-md); background: var(--color-card); border: 1px solid var(--color-border); }
.product-card .card-hit { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: var(--radius-md); }
.product-card .card-hit:focus-visible { outline-offset: 4px; }
.product-tags { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 1; display: flex; flex-wrap: wrap; gap: 4px; }
.tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--radius-full); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--color-card); color: var(--color-foreground); box-shadow: var(--shadow-sm); }
.tag--new { background: var(--color-primary); color: #fff; }
.product-info { display: grid; gap: 2px; }
.product-info .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted-foreground); }
.product-info .meta .sw { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.product-info h3 { font-family: var(--font-sans); font-size: .9375rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.product-info .price { font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--color-foreground); }
.product-info .code { font-size: .75rem; color: var(--color-muted-foreground); }

/* ---------- Catalog ---------- */
.page-head { padding: var(--space-7) 0 var(--space-5); }
.page-head h1 { font-size: var(--text-h1); }
.page-head p { margin-top: var(--space-3); color: var(--color-muted-foreground); max-width: 60ch; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-4); font-size: .8125rem; color: var(--color-muted-foreground); }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-2); opacity: .5; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

.catalog { display: grid; gap: var(--space-6); padding-bottom: var(--space-9); }
@media (min-width: 1024px) { .catalog { grid-template-columns: 272px minmax(0, 1fr); gap: var(--space-7); align-items: start; } }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.search { position: relative; flex: 1 1 100%; }
@media (min-width: 640px) { .search { flex-basis: 240px; } }
@media (max-width: 639px) { .sort label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } .sort { flex: 1; } .sort select { width: 100%; } }
.search .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--color-muted-foreground); pointer-events: none; }
.search input { width: 100%; min-height: 48px; padding: 0 44px 0 46px; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); background: var(--color-card); font-size: 1rem; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.search input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(190, 24, 93, .15); }
.search input::placeholder { color: #8C7F86; }
.search-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--color-muted-foreground); }
.search-clear[hidden] { display: none; }
.filters-btn { display: inline-flex; }
.filters-btn .badge-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-full); background: var(--color-primary); color: #fff; font-size: .75rem; font-weight: 700; display: inline-grid; place-items: center; }
.filters-btn .badge-count[hidden] { display: none; }
@media (min-width: 1024px) { .filters-btn { display: none; } }
.sort { display: inline-flex; align-items: center; gap: var(--space-2); font-size: .875rem; }
.sort select {
  min-height: 48px; padding: 0 40px 0 var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); background: var(--color-card);
  -webkit-appearance: none; appearance: none; cursor: pointer; font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%231F1A1D' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-2) 0 var(--space-5); }
.results-count { font-size: .9375rem; color: var(--color-muted-foreground); }
.results-count strong { color: var(--color-foreground); }
.active-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.active-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px 0 14px; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); background: var(--color-card); font-size: .8125rem; font-weight: 500; cursor: pointer; animation: chip-in 300ms var(--ease-out); }
.active-chip .icon { width: 16px; height: 16px; }
@media (hover: hover) { .active-chip:hover { border-color: var(--color-primary); color: var(--color-primary); } }
.clear-all { min-height: 36px; padding: 0 var(--space-3); border: 0; background: none; color: var(--color-primary); font-weight: 600; font-size: .8125rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@keyframes chip-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* Filters panel */
.filters { display: grid; gap: var(--space-2); }
.filters-head, .filters-foot { display: none; }
.filter-group { border: 0; margin: 0; padding: var(--space-4) 0; min-inline-size: 0; box-shadow: inset 0 1px 0 var(--color-border); }
.filter-group:first-of-type { box-shadow: none; }
.filter-group legend { float: left; width: 100%; padding: 0; margin-bottom: var(--space-3); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.filter-options { display: grid; gap: 2px; clear: both; }
.check { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--dur-fast); }
@media (hover: hover) { .check:hover { background: var(--color-surface); } }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--color-border-strong); background: var(--color-card); display: grid; place-items: center; transition: background-color var(--dur-fast), border-color var(--dur-fast); }
.check .box svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 2.5; fill: none; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 260ms var(--ease-out); }
.check input:checked + .box { background: var(--color-primary); border-color: var(--color-primary); }
.check input:checked + .box svg { stroke-dashoffset: 0; }
.check input:focus-visible + .box { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.check .label { flex: 1; font-size: .9375rem; }
.check .n { font-size: .8125rem; color: var(--color-muted-foreground); font-variant-numeric: tabular-nums; }
.check.is-empty { opacity: .45; }
.check .sw { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); flex: none; }

@media (max-width: 1023px) {
  .filters {
    position: fixed; inset: auto 0 0 0; z-index: var(--z-sheet); max-height: 88dvh; display: flex; flex-direction: column;
    background: var(--color-background); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg);
    transform: translateY(105%); visibility: hidden; transition: transform 460ms var(--ease-out), visibility 0s linear 460ms;
  }
  .filters.is-open { transform: none; visibility: visible; transition-delay: 0s; }
  .filters-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-3) var(--space-2) var(--space-5); border-bottom: 1px solid var(--color-border); }
  .filters-head h2 { font-size: 1.75rem; }
  .filters-head::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--color-border-strong); }
  .filters-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-5); }
  .filters-foot { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-5) max(var(--space-3), env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); background: var(--color-background); }
  .filters-foot .btn { flex: 1; padding: 0 var(--space-4); white-space: nowrap; }
  .sheet-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-sheet) - 1); background: rgba(36, 27, 32, .45); opacity: 0; visibility: hidden; transition: opacity var(--dur-base), visibility 0s linear var(--dur-base); }
  .sheet-backdrop.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
}
@media (min-width: 1024px) {
  .filters { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: var(--space-2); scrollbar-width: thin; }
  .sheet-backdrop { display: none; }
}

/* Grid animation on filter change */
.js .product-grid.is-animating .product-card { animation: card-in 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* Empty state */
.empty { display: grid; justify-items: center; text-align: center; gap: var(--space-3); padding: var(--space-8) var(--space-5); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-card); }
.empty[hidden] { display: none; }
.empty .icon { width: 40px; height: 40px; color: var(--color-primary); stroke-width: 1.4; }
.empty h2 { font-size: 1.75rem; }
.empty p { color: var(--color-muted-foreground); max-width: 44ch; }

/* ---------- Product dialog ---------- */
.product-dialog { width: min(980px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--color-background); color: var(--color-foreground); overflow: auto; overscroll-behavior: contain; box-shadow: var(--shadow-lg); }
.product-dialog::backdrop { background: rgba(36, 27, 32, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.product-dialog[open] { animation: dialog-in 420ms var(--ease-out); }
.product-dialog[open]::backdrop { animation: fade-in 300ms var(--ease-out); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.dialog-grid { display: grid; }
@media (min-width: 800px) { .dialog-grid { grid-template-columns: 1fr 1fr; } }
/* Product photo: always the full square image; click/tap to zoom, cursor moves the zoomed area */
.dialog-grid .media.zoomable { aspect-ratio: 1 / 1; background: var(--color-card); cursor: zoom-in; touch-action: manipulation; isolation: isolate; }
/* On wide screens the photo column stretches to the details column; a blurred copy of the photo fills the extra space */
@media (min-width: 800px) {
  .gallery-pane { align-self: stretch; min-height: 100%; }
  .gallery-pane .media.zoomable { flex: 1; aspect-ratio: auto; display: grid; place-items: center; min-height: 0; }
  .gallery-pane .zoomable img { box-shadow: 0 24px 50px -20px rgba(36, 27, 32, .45); }
}

/* Gallery: arrows, counter, thumbnails */
.gallery-pane { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--color-card); }
.gallery-pane .zoomable img.is-swapping { opacity: .25; }
.gallery-pane .zoomable img { transition: transform 350ms var(--ease-out), opacity 220ms var(--ease-out); }
.gal-nav {
  position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -48px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-md); cursor: pointer;
  transition: background-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.gal-nav:active { transform: scale(.94); }
@media (hover: hover) { .gal-nav:hover { background: #fff; } }
.gal-nav--prev { left: var(--space-3); }
.gal-nav--next { right: var(--space-3); }
.gal-count { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2; padding: 4px 10px; border-radius: var(--radius-full); background: rgba(36, 27, 32, .7); color: #fff; font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; }
.gal-model { position: absolute; top: var(--space-3); left: 64px; z-index: 2; padding: 4px 10px; border-radius: var(--radius-full); background: var(--color-primary); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .04em; pointer-events: none; }
.gal-model[hidden] { display: none; }
.model-note { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px dashed var(--color-primary); color: var(--color-foreground); font-size: .875rem; }
.model-note[hidden] { display: none; }
.model-note .icon { color: var(--color-primary); margin-top: 2px; }
.gal-thumb.is-model { position: relative; }
.gal-thumb.is-model::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 2px #fff; }
.gal-thumbs { display: flex; gap: var(--space-2); padding: var(--space-3); overflow-x: auto; scrollbar-width: none; background: var(--color-card); border-top: 1px solid var(--color-border); }
.gal-thumbs::-webkit-scrollbar { display: none; }
.gal-thumb { flex: none; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); cursor: pointer; opacity: .65; transition: opacity var(--dur-fast), border-color var(--dur-fast); }
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal-thumb[aria-current="true"] { border-color: var(--color-primary); opacity: 1; }
@media (hover: hover) { .gal-thumb:hover { opacity: 1; } }

/* Catalog card: second photo on hover + photo count */
.product-card .media .alt-photo { position: absolute; inset: 0; opacity: 0; transition: opacity 450ms var(--ease-out), transform 900ms var(--ease-out); }
@media (hover: hover) { .product-card:hover .media .alt-photo { opacity: 1; } }
.photo-count { position: absolute; right: var(--space-2); bottom: var(--space-2); z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--radius-full); background: rgba(255, 255, 255, .92); font-size: .6875rem; font-weight: 700; box-shadow: var(--shadow-sm); }
.photo-count .icon { width: 13px; height: 13px; }
.zoomable::before {
  content: ""; position: absolute; inset: -60px; z-index: -1;
  background: var(--photo) center / cover no-repeat; filter: blur(40px) saturate(1.2); opacity: .85;
}
.dialog-grid .zoomable img { position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transform-origin: var(--zx, 50%) var(--zy, 50%); transition: transform 350ms var(--ease-out); }
.zoomable .zoom-hint { z-index: 1; }
.zoomable.is-zoomed { cursor: zoom-out; }
.zoomable.is-zoomed img { transform: scale(2.2); }
.zoomable:focus-visible { outline-offset: -4px; }
.zoom-hint {
  position: absolute; right: var(--space-3); bottom: var(--space-3); display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-full); background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-sm);
  font-size: .75rem; font-weight: 600; pointer-events: none; transition: opacity var(--dur-base);
}
.zoom-hint .icon { width: 14px; height: 14px; }
.zoomable.is-zoomed .zoom-hint { opacity: 0; }
.dialog-body { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6) var(--space-5) var(--space-6); }
@media (min-width: 800px) { .dialog-body { padding: var(--space-7) var(--space-6); } }
.dialog-body h2 { font-size: clamp(1.9rem, 4vw, 2.5rem); }
.dialog-body .price { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.price-note { display: flex; gap: var(--space-2); align-items: flex-start; font-size: .8125rem; color: var(--color-muted-foreground); line-height: 1.45; }
.price-note .icon { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--color-gold); }
.price-note a { color: var(--color-primary); font-weight: 600; text-underline-offset: 2px; }
.dialog-body .price + .price-note { margin-top: calc(var(--space-3) * -1); }
.dialog-body .desc { color: var(--color-muted-foreground); }
.spec-list { margin: 0; display: grid; border-top: 1px solid var(--color-border); }
.spec-list div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); font-size: .9375rem; }
.spec-list dt { color: var(--color-muted-foreground); }
.spec-list dd { margin: 0; font-weight: 600; text-align: right; display: inline-flex; align-items: center; gap: 6px; }
.spec-list .sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); }
.wholesale-note { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-primary-soft); font-size: .9375rem; }
.wholesale-note .icon { color: var(--color-primary); margin-top: 2px; }
.wholesale-note a { color: var(--color-primary); font-weight: 600; }
.dialog-close { position: sticky; top: var(--space-3); float: right; z-index: 3; margin: var(--space-3) var(--space-3) -60px 0; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--color-card); box-shadow: var(--shadow-md); display: grid; place-items: center; cursor: pointer; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-dark); color: var(--color-on-dark-muted); padding: var(--space-8) 0 calc(var(--space-6) + 72px); font-size: .9375rem; }
.footer-top { display: grid; gap: var(--space-7); padding-bottom: var(--space-7); border-bottom: 1px solid rgba(253, 247, 249, .14); }
@media (min-width: 860px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer .logo { color: var(--color-on-dark); }
.site-footer .logo-sub { color: var(--color-on-dark-muted); }
.site-footer .logo-word span { color: #F9C6DA; }
.footer-brand p { margin-top: var(--space-4); max-width: 34ch; }
.footer-col h2 { font-family: var(--font-sans); font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #F9C6DA; margin-bottom: var(--space-3); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer-col a { display: inline-block; padding: 6px 0; text-decoration: none; }
.footer-col a:hover { color: var(--color-on-dark); text-decoration: underline; text-underline-offset: 4px; }
.socials { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.socials a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(253, 247, 249, .25); color: var(--color-on-dark); transition: background-color var(--dur-fast), color var(--dur-fast); }
.socials a:hover { background: var(--color-on-dark); color: var(--color-dark); }
.socials .icon { width: 18px; height: 18px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-5); font-size: .8125rem; }

/* Floating WhatsApp */
.wa-float {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: var(--z-float);
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: 0 18px; border-radius: var(--radius-full);
  background: var(--color-wa); color: #fff; text-decoration: none; font-weight: 600; font-size: .9375rem;
  box-shadow: 0 12px 30px -10px rgba(18, 140, 74, .6); transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base);
}
.wa-float .icon { width: 24px; height: 24px; }
.wa-float .wa-label { display: none; }
@media (min-width: 720px) { .wa-float .wa-label { display: inline; } }
.wa-float[hidden] { display: none; }
.wa-float.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
.sheet-open .wa-float { opacity: 0; pointer-events: none; }

/* ==========================================================================
   Cart, account and admin
   ========================================================================== */

/* Header icons */
.header-icon { position: relative; width: 44px; height: 44px; color: var(--color-foreground); text-decoration: none; }
.header-icon[hidden] { display: none; }
.header-icon[aria-current="page"] { background: var(--color-primary-soft); color: var(--color-primary); }
.header-icon.is-in::after { content: ""; position: absolute; right: 9px; bottom: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-wa); box-shadow: 0 0 0 2px var(--color-background); }
.cart-badge { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-full); background: var(--color-primary); color: #fff; font-size: .6875rem; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--color-background); animation: badge-pop 360ms var(--ease-spring); }
.cart-badge[hidden] { display: none; }
.cart-badge--inline { position: static; margin-left: 2px; box-shadow: none; background: #fff; color: var(--color-primary); }
@keyframes badge-pop { from { transform: scale(.4); } to { transform: none; } }
@media (max-width: 380px) { .header-actions { gap: 2px; } .lang-switch button { min-width: 34px; } }

/* Tags and sold-out state */
.tag--sold { background: var(--color-dark); color: #fff; }
.tag--muted { background: var(--color-surface); color: var(--color-muted-foreground); box-shadow: none; }
.product-card.is-sold .media img { opacity: .55; filter: grayscale(.4); }

/* Quick add on product cards */
.quick-add {
  position: absolute; top: var(--space-2); right: var(--space-2); z-index: 3; width: 44px; height: 44px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .94); color: var(--color-foreground); box-shadow: var(--shadow-md); cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out), opacity var(--dur-base);
}
.quick-add:active { transform: scale(.92); }
@media (hover: hover) {
  .quick-add { opacity: 0; }
  .product-card:hover .quick-add, .quick-add:focus-visible, .quick-add.is-done { opacity: 1; }
  .quick-add:hover { background: var(--color-primary); color: #fff; }
}
.quick-add.is-done { background: var(--color-wa); color: #fff; }

/* Quantity stepper */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); background: var(--color-card); height: 48px; flex: none; }
.qty-btn { width: 44px; height: 46px; border: 0; background: none; border-radius: var(--radius-full); display: grid; place-items: center; cursor: pointer; color: var(--color-foreground); touch-action: manipulation; transition: background-color var(--dur-fast); }
.qty-btn .icon { width: 18px; height: 18px; }
@media (hover: hover) { .qty-btn:not(:disabled):hover { background: var(--color-surface); } }
.qty-btn:disabled { opacity: .35; cursor: not-allowed; }
.qty-input { width: 40px; height: 100%; border: 0; background: none; text-align: center; font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input:focus-visible { outline-offset: 0; }

/* Product view: colour choice (pieces that come in several colours) */
.color-pick { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.color-pick legend { padding: 0; margin-bottom: var(--space-2); font-size: .875rem; font-weight: 600; }
.color-pick > div { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.color-pick label { position: relative; cursor: pointer; }
.color-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.color-pick label > span { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4) 0 var(--space-3); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-full); background: var(--color-card); font-weight: 500; font-size: .9375rem; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.color-pick input:checked + span { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); font-weight: 600; }
.color-pick input:focus-visible + span { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.color-pick .sw { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.spec-list .sep { margin: 0 4px; color: var(--color-muted-foreground); font-weight: 400; }
.product-info .meta .sw + .sw { margin-left: -9px; box-shadow: 0 0 0 1.5px var(--color-background); }
.order-line-color { font-size: .875rem; min-height: 40px; padding: 0 32px 0 var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); background: var(--color-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%231F1A1D' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center; -webkit-appearance: none; appearance: none; cursor: pointer; }

/* Product view: buy row */
.buy-row { display: flex; gap: var(--space-3); align-items: center; }
.buy-row .btn { flex: 1; }
.btn.is-done { background: var(--color-wa); }
.sold-note { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); font-size: .9375rem; }

/* Toast */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 200; display: flex; align-items: center; gap: var(--space-3);
  width: fit-content; max-width: 520px; margin-inline: auto; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-dark); color: var(--color-on-dark); box-shadow: var(--shadow-lg); font-size: .9375rem;
  opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.toast.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.toast .icon { color: #86EFAC; }
.toast span { flex: 1; }
.toast a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-full); background: var(--color-on-dark); color: var(--color-dark); font-weight: 600; font-size: .875rem; text-decoration: none; white-space: nowrap; }

/* Loading placeholders */
.product-card.is-skeleton .media { background: linear-gradient(100deg, var(--color-surface) 30%, #FFF5F8 50%, var(--color-surface) 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
.product-card.is-skeleton .product-info span { display: block; height: 12px; border-radius: 6px; background: var(--color-surface); width: 70%; }
.product-card.is-skeleton .product-info span + span { width: 40%; margin-top: 6px; }
@keyframes shimmer { to { background-position: -100% 0; } }
.spinner { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--color-border); border-top-color: var(--color-primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.acc-loading { display: grid; place-items: center; padding: var(--space-8) 0; list-style: none; }

/* Forms */
.field { display: grid; gap: 6px; }
.field[hidden] { display: none; }
.field label { font-size: .875rem; font-weight: 600; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong);
  background: var(--color-card); font-size: 1rem; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.field select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--color-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%231F1A1D' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(190, 24, 93, .15); }
.field input[readonly] { background: var(--color-surface); color: var(--color-muted-foreground); }
.field [aria-invalid="true"] { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
.field input::placeholder, .field textarea::placeholder { color: #8C7F86; }
.req, .opt { font-weight: 400; color: var(--color-muted-foreground); }
.field-error { color: var(--color-error); font-size: .875rem; font-weight: 500; }
.field-error[hidden] { display: none; }
.help { font-size: .8125rem; color: var(--color-muted-foreground); font-weight: 400; }
.fine { font-size: .8125rem; color: var(--color-muted-foreground); }
.fine a { color: var(--color-primary); font-weight: 600; }
.link-btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0; border: 0; background: none; color: var(--color-primary); font-weight: 600; font-size: .9375rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:disabled { color: var(--color-muted-foreground); text-decoration: none; cursor: default; }
.link-plain { padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) { .link-plain:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; } }

/* Cart page */
.cart-layout { display: grid; gap: var(--space-6); padding-bottom: var(--space-9); align-items: start; }
.cart-layout[hidden] { display: none; }
@media (min-width: 960px) { .cart-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-7); } }
.cart-list { list-style: none; margin: 0; padding: 0; display: grid; }
.cart-line {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; grid-template-areas: "thumb info remove" "thumb qty total";
  gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border);
}
.cart-line:first-child { border-top: 1px solid var(--color-border); }
@media (min-width: 720px) {
  .cart-line { grid-template-columns: 104px minmax(0, 1fr) auto 112px auto; grid-template-areas: "thumb info qty total remove"; gap: var(--space-5); }
}
.cart-thumb { grid-area: thumb; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-card); cursor: pointer; aspect-ratio: 1; align-self: start; }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-info { grid-area: info; display: grid; gap: 2px; min-width: 0; }
.cart-line-info h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.cart-line-meta { font-size: .8125rem; color: var(--color-muted-foreground); }
.cart-line-model { justify-self: start; margin-top: 2px; padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary); font-size: .75rem; font-weight: 600; }
.cart-line-unit { font-size: .875rem; font-variant-numeric: tabular-nums; }
.cart-line-gone { font-size: .875rem; font-weight: 600; color: var(--color-error); }
.cart-line-qty { grid-area: qty; }
.cart-line-total { grid-area: total; justify-self: end; font-weight: 700; font-variant-numeric: tabular-nums; }
.cart-remove { grid-area: remove; justify-self: end; color: var(--color-muted-foreground); }
@media (hover: hover) { .cart-remove:hover { color: var(--color-error); } }
.cart-line.is-gone { grid-template-areas: "thumb info remove"; }
.cart-line.is-gone .cart-thumb { opacity: .5; }
.cart-gone { margin-top: var(--space-7); }
.cart-gone[hidden] { display: none; }
.cart-gone h2 { font-size: 1.5rem; }
.cart-gone > p { margin: var(--space-2) 0 var(--space-4); color: var(--color-muted-foreground); font-size: .9375rem; }

.cart-summary { display: grid; gap: var(--space-5); padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg); background: var(--color-card); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); }
@media (min-width: 960px) { .cart-summary { position: sticky; top: 96px; padding: var(--space-6); } }
.cart-summary h2 { font-size: 1.75rem; }
.sum-list { margin: 0; display: grid; }
.sum-list div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.sum-list dt { color: var(--color-muted-foreground); }
.sum-list dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.sum-total dt { color: var(--color-foreground); font-weight: 700; }
.sum-total dd span { font-size: 1.5rem; font-weight: 700; }
.sum-total dd small { display: block; font-size: .8125rem; font-weight: 500; color: var(--color-muted-foreground); }
.sum-total dd small[hidden] { display: none; }
.sum-bulk { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-primary-soft); font-size: .875rem; }
.sum-bulk .icon { color: var(--color-primary); margin-top: 2px; }
.sum-bulk a { color: var(--color-primary); font-weight: 600; }
.checkout { display: grid; gap: var(--space-4); }
.checkout .btn { min-height: 56px; padding: 0 var(--space-4); font-size: 1rem; }
.cart-login[hidden] { display: none; }
.cart-sent { display: grid; justify-items: center; gap: var(--space-3); text-align: center; margin-bottom: var(--space-9); padding: var(--space-7) var(--space-5); border-radius: var(--radius-lg); background: var(--color-card); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); }
.cart-sent[hidden] { display: none; }
.cart-sent > .icon { width: 48px; height: 48px; color: var(--color-wa); }
.cart-sent h2 { font-size: 1.9rem; }
.cart-sent p { color: var(--color-muted-foreground); max-width: 46ch; }
.cart-sent .actions-row { justify-content: center; margin-top: var(--space-2); }
.cart-empty { margin-bottom: var(--space-9); }

/* Account page */
.container.narrow { max-width: 620px; }
.panel { display: grid; gap: var(--space-4); padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg); background: var(--color-card); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); }
.panel[hidden], .acc-loading[hidden] { display: none; }
@media (min-width: 640px) { .panel { padding: var(--space-7); } }
.panel h2 { font-size: 2rem; }
.panel h3 { font-size: 1.5rem; margin-top: var(--space-3); }
.panel form { display: grid; gap: var(--space-4); }
.acc { padding-bottom: var(--space-9); }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: var(--radius-full); background: var(--color-surface); }
.seg[hidden] { display: none; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label > span { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; border-radius: var(--radius-full); font-weight: 600; font-size: .9375rem; color: var(--color-muted-foreground); transition: background-color var(--dur-fast), color var(--dur-fast); }
.seg input:checked + span { background: var(--color-card); color: var(--color-foreground); box-shadow: var(--shadow-sm); }
.seg input:focus-visible + span { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.seg--tabs { margin-bottom: var(--space-2); }
.seg--tabs [role=tab] { min-height: 44px; border: 0; border-radius: var(--radius-full); background: none; font-weight: 600; font-size: .9375rem; color: var(--color-muted-foreground); cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast); }
.seg--tabs [role=tab][aria-selected="true"] { background: var(--color-card); color: var(--color-foreground); box-shadow: var(--shadow-sm); }
.acc-pane { display: grid; gap: var(--space-4); }
.acc-pane[hidden] { display: none; }
.pw-wrap { position: relative; }
.emp-entry { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.emp-new { display: grid; gap: var(--space-4); }
.emp-new[hidden] { display: none; }
.pw-wrap input { padding-right: 84px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-width: 64px; height: 40px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-primary); font-weight: 600; font-size: .875rem; cursor: pointer; }
@media (hover: hover) { .pw-toggle:hover { background: var(--color-surface); } }
.code-input { font-size: 1.75rem !important; font-weight: 700; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.acc-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.acc-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.acc-actions [hidden] { display: none; }
.sign-out { justify-self: start; color: var(--color-muted-foreground); }

/* ---------- Admin ---------- */
.adm { padding-bottom: var(--space-9); }
.adm[hidden], .adm-gate[hidden] { display: none; }
.adm-gate { max-width: 620px; margin-bottom: var(--space-9); }
.adm-gate code, .adm code { font-size: .875em; padding: 1px 6px; border-radius: 6px; background: var(--color-surface); }
.tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: none; }
.tab { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-5); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font-weight: 600; font-size: .9375rem; color: var(--color-muted-foreground); cursor: pointer; white-space: nowrap; }
.tab[aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
@media (hover: hover) { .tab:hover { color: var(--color-foreground); } }
.tab-n { min-width: 24px; padding: 1px 7px; border-radius: var(--radius-full); background: var(--color-surface); font-size: .75rem; color: var(--color-muted-foreground); font-variant-numeric: tabular-nums; }
.tab-n:empty { display: none; }
.tab-pane[hidden] { display: none; }
.is-employee [data-admin-only] { display: none !important; }
.emp-add-name { flex: 1 1 260px; }
.emp-help { margin: var(--space-2) 0 var(--space-4); }
.emp-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info edit"; }
.emp-actions { grid-area: edit; display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
@media (min-width: 900px) { .emp-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info edit"; } }
.rename-dialog form { display: grid; gap: var(--space-3); text-align: left; }
.rename-dialog h2, .rename-dialog .cc-sum { text-align: center; }
.adm-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.adm-toolbar .search { flex: 1 1 240px; }
.adm-toolbar .sort label { white-space: nowrap; }
.adm-toolbar .btn { white-space: nowrap; }
@media (max-width: 639px) { .adm-toolbar .search { flex-basis: 100%; } .adm-toolbar .sort { flex: 1 1 0; min-width: 0; } .adm-toolbar .sort select { width: 100%; } }
.adm-count { margin: var(--space-4) 0 var(--space-3); font-size: .875rem; color: var(--color-muted-foreground); }
.adm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.adm-row {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "img info price" "img sold edit";
  gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-card); border: 1px solid var(--color-border);
}
@media (min-width: 900px) { .adm-row { grid-template-columns: 64px minmax(0, 1fr) 120px auto auto; grid-template-areas: "img info price sold edit"; } }
.adm-row img { grid-area: img; width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-surface); align-self: start; }
.adm-row.is-hidden img { opacity: .45; }
.adm-row-info { grid-area: info; display: grid; gap: 2px; min-width: 0; }
.adm-row-info strong { font-weight: 600; overflow-wrap: anywhere; }
.adm-row-info > span { font-size: .8125rem; color: var(--color-muted-foreground); }
.adm-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.adm-badges:empty { display: none; }
.adm-row-price { grid-area: price; justify-self: end; font-weight: 700; font-variant-numeric: tabular-nums; font-size: .9375rem; }
.adm-switches { grid-area: sold; display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.adm-row [data-edit] { grid-area: edit; justify-self: end; }
.adm-list > .panel { list-style: none; }

/* Toggle switch */
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; cursor: pointer; font-size: .9375rem; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { flex: none; position: relative; width: 44px; height: 26px; border-radius: var(--radius-full); background: var(--color-border-strong); transition: background-color var(--dur-fast); }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out); }
.switch input:checked + .switch-track { background: var(--color-primary); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.switch input:disabled + .switch-track { opacity: .5; }

.adm-form { display: grid; gap: var(--space-5); max-width: 720px; }
.adm-form fieldset, .ph-set { display: grid; gap: var(--space-4); margin: 0; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-card); min-inline-size: 0; }
.adm-form legend, .ph-set legend { padding: 0 var(--space-2); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-card); }
.adm-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.adm-table th, .adm-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.adm-table thead th { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted-foreground); background: var(--color-surface); }
.adm-table tbody th { font-weight: 600; }
.adm-table tr:last-child > * { border-bottom: 0; }
.adm-table a { color: var(--color-primary); text-underline-offset: 3px; }

/* Product editor dialog */
.adm-dialog { width: min(820px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--color-background); color: var(--color-foreground); box-shadow: var(--shadow-lg); overflow: hidden; }
.adm-dialog[open] { display: flex; animation: dialog-in 380ms var(--ease-out); }
.adm-dialog::backdrop { background: rgba(36, 27, 32, .55); }
.adm-dialog form { display: flex; flex-direction: column; width: 100%; max-height: calc(100dvh - 24px); }
.adm-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border); }
.adm-dialog-head h2 { font-size: 1.75rem; }
.adm-dialog-body { display: grid; gap: var(--space-5); padding: var(--space-5); overflow-y: auto; overscroll-behavior: contain; }
.adm-dialog-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5) max(var(--space-3), env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); background: var(--color-card); }
.adm-dialog-foot .spacer { flex: 1; }
@media (max-width: 640px) { .adm-dialog-foot .btn { flex: 1 1 0; padding: 0 var(--space-4); } .adm-dialog-foot .spacer { display: none; } .adm-dialog-foot .btn--danger { flex: 1 1 100%; order: 3; min-height: 44px; } }
.btn--danger { color: var(--color-error); border-color: rgba(180, 35, 24, .35); }
@media (hover: hover) { .btn--danger:hover { background: #FEF3F2; border-color: var(--color-error); } }
.grid2, .grid3 { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; } .grid3 { grid-template-columns: repeat(3, 1fr); } }
.checks { display: grid; gap: var(--space-1); }
.ed-colors { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.ed-colors legend { float: left; width: 100%; padding: 0; margin-bottom: 6px; font-size: .875rem; font-weight: 600; }
.check-inline { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; cursor: pointer; font-size: .9375rem; }
.check-inline input { width: 20px; height: 20px; accent-color: var(--color-primary); }
.check-inline .sw { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.ph-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--space-3); }
.ph-grid:empty { display: none; }
.ph { position: relative; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph.is-loading { display: grid; place-items: center; }
.ph-main { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-primary); color: #fff; font-size: .6875rem; font-weight: 700; }
.ph-tools { position: absolute; inset: auto 0 0 0; display: flex; justify-content: center; gap: 4px; padding: 6px; background: linear-gradient(transparent, rgba(36, 27, 32, .55)); }
.ph-tools button { width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .95); cursor: pointer; }
.ph-tools .icon { width: 16px; height: 16px; }
.ph-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.upload-btn { position: relative; }
.upload-btn input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; font-size: 0; }
.upload-btn:focus-within { outline: 2px solid var(--color-ring); outline-offset: 3px; }
.field--inline { display: flex; align-items: center; gap: var(--space-2); }
.field--inline label { white-space: nowrap; font-weight: 500; }
.field--inline select { min-height: 44px; width: auto; }
.ed-more summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.ed-more[open] summary { margin-bottom: var(--space-3); }

/* ---------- Orders ("Mis pedidos" and admin) ---------- */
.container.narrow-wide { max-width: 860px; }
.orders-page { padding-bottom: var(--space-9); }
.orders-page [data-view][hidden] { display: none; }
.orders-group + .orders-group { margin-top: var(--space-8); }
.orders-group > h2 { font-size: 1.9rem; margin-bottom: var(--space-4); }
.orders-list { display: grid; gap: var(--space-4); }
.orders-none[hidden] { display: none; }
.order { display: grid; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-card); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
@media (min-width: 640px) { .order { padding: var(--space-6); } }
.order.is-editing { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(190, 24, 93, .12), var(--shadow-md); }
.order.is-closed { background: #FFFCFD; }
.order-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-2) var(--space-4); }
.order-head h3 { font-size: 1.5rem; }
.order-head p { font-size: .875rem; margin-top: 2px; }
h3[tabindex="-1"]:focus { outline: none; }
.status { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-full); font-size: .75rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.status--en_proceso { background: #FEF3C7; color: #92400E; }
.status--completado { background: #DCFCE7; color: #166534; }
.status--cancelado { background: var(--color-surface); color: var(--color-muted-foreground); }
.order-lines { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--color-border); }
.order-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.order.is-editing .order-line { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "thumb info remove" "thumb qty qty"; }
.order.is-editing .order-line .order-thumb { grid-area: thumb; align-self: start; }
.order.is-editing .order-line-info { grid-area: info; }
.order.is-editing .order-line-qty { grid-area: qty; }
.order.is-editing .order-remove { grid-area: remove; }
@media (min-width: 640px) { .order.is-editing .order-line { grid-template-columns: 56px minmax(0, 1fr) auto auto; grid-template-areas: "thumb info qty remove"; } }
.order-thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-surface); border: 1px solid var(--color-border); }
.order-line-info { display: grid; gap: 1px; min-width: 0; font-size: .875rem; }
.order-line-info strong { font-size: .9375rem; font-weight: 600; }
.order-line-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.order-remove { color: var(--color-muted-foreground); }
@media (hover: hover) { .order-remove:hover { color: var(--color-error); } }
.order-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.order-total strong { font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.order-ask { margin-top: calc(var(--space-3) * -1); font-size: .8125rem; text-align: right; }
.order-ask[hidden] { display: none; }
.order-note { font-size: .9375rem; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); }
.order-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.order-cancel { color: var(--color-muted-foreground); }
.order-notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: #DCFCE7; color: #14532D; font-size: .9375rem; }
.order-notice .icon { margin-top: 2px; }
.order-notice a { color: inherit; font-weight: 700; }
.order-add { display: grid; gap: var(--space-2); }
.order-add > label { font-size: .875rem; font-weight: 600; }
.order-add-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.order-add-results:empty { display: none; }
.order-add-results > li.muted { font-size: .875rem; padding: var(--space-2) 0; }
.order-add-item { width: 100%; display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: 6px var(--space-3) 6px 6px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-background); text-align: left; cursor: pointer; }
.order-add-item img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; }
.order-add-item > span { flex: 1; display: grid; font-size: .875rem; }
.order-add-item .icon { color: var(--color-primary); }
@media (hover: hover) { .order-add-item:hover { border-color: var(--color-primary); } }
.confirm-dialog { width: min(440px, calc(100vw - 32px)); padding: var(--space-6) var(--space-5); border: 0; border-radius: var(--radius-lg); background: var(--color-background); color: var(--color-foreground); box-shadow: var(--shadow-lg); text-align: center; }
.confirm-dialog[open] { display: grid; gap: var(--space-3); animation: dialog-in 300ms var(--ease-out); }
.confirm-dialog::backdrop { background: rgba(36, 27, 32, .55); }
.confirm-dialog .cc-icon { justify-self: center; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #FEF3C7; color: #92400E; }
.confirm-dialog .cc-icon .icon { width: 26px; height: 26px; }
.confirm-dialog h2 { font-size: 1.6rem; }
.confirm-dialog .cc-sum { font-weight: 600; }
.confirm-dialog #cc-text { color: var(--color-muted-foreground); font-size: .9375rem; }
.confirm-dialog .cc-reason { text-align: left; }
.confirm-dialog .cc-reason textarea { min-height: 64px; }
.confirm-dialog .cc-actions { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.confirm-dialog .cc-actions .btn { width: 100%; }
.thanks-dialog .ty-icon { background: #DCFCE7; color: #166534; }
.thanks-dialog .ty-text { color: var(--color-muted-foreground); font-size: .9375rem; }
.thanks-dialog .ty-review { margin-top: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-primary-soft); }
.thanks-dialog .ty-stars { color: #F5B301; font-size: 1.5rem; letter-spacing: .15em; line-height: 1; margin-bottom: var(--space-2); }
.thanks-dialog .ty-review p { font-weight: 600; font-size: .9375rem; }
.sent-code { font-weight: 700; font-size: 1.0625rem; color: var(--color-foreground) !important; }
.sent-note { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: #DCFCE7; color: #14532D !important; font-size: .9375rem; }
.sent-note--warn { background: #FEF3C7; color: #78350F !important; }
.sent-note[hidden], .cart-sent [hidden] { display: none; }

.tab-n--hot { background: var(--color-primary); color: #fff; }
.adm-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.adm-order { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--color-card); border: 1px solid var(--color-border); border-left: 4px solid #F59E0B; }
.adm-order.is-completado { border-left-color: #16A34A; }
.adm-order.is-cancelado { border-left-color: var(--color-border-strong); opacity: .85; }
.adm-order-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.adm-order-head strong { font-size: 1.0625rem; }
.adm-order-head .muted { font-size: .875rem; }
.adm-order-who { font-size: .9375rem; }
.adm-order-who a { color: var(--color-wa); font-weight: 600; }
.adm-order-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .9375rem; }
.adm-order-lines li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--space-2); }
.adm-order-qty { font-weight: 700; font-variant-numeric: tabular-nums; }
.adm-order-price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.adm-order-total { font-size: .9375rem; padding-top: var(--space-2); border-top: 1px dashed var(--color-border); }
.adm-order-note { font-size: .9375rem; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-surface); }
.adm-order-hist summary { cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--color-primary); min-height: 32px; display: flex; align-items: center; }
.adm-order-hist ol { margin: var(--space-2) 0 0; padding-left: var(--space-5); font-size: .8125rem; color: var(--color-muted-foreground); display: grid; gap: 4px; }
.adm-order-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.adm-order-actions .muted { font-size: .875rem; margin-right: auto; }

/* ==========================================================================
   Motion (progressive enhancement; `.js` set inline in <head>)
   ========================================================================== */
.js .hero .fx { opacity: 0; transform: translateY(18px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(120ms + var(--i, 0) * 110ms); }
.js .is-loaded .hero .fx { opacity: 1; transform: none; }
.js .collage-item { opacity: 0; transform: translateY(28px) scale(.96); transition: opacity 1000ms var(--ease-out), transform 1100ms var(--ease-out); transition-delay: calc(250ms + var(--i, 0) * 150ms); }
.js .is-loaded .collage-item { opacity: 1; transform: none; }
.js .is-loaded .collage-item.floaty { animation: floaty 7s ease-in-out 1.6s infinite; }
.js .is-loaded .collage-item.floaty--b { animation-duration: 8.5s; animation-delay: 2s; }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.js .collage-tag { opacity: 0; transform: translateY(10px); transition: opacity 700ms var(--ease-out) 900ms, transform 700ms var(--ease-spring) 900ms; }
.js .is-loaded .collage-tag { opacity: 1; transform: none; }

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 200ms var(--ease-in) both vt-out; }
::view-transition-new(root) { animation: 380ms var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .reveal, .js .hero .fx, .js .collage-item, .js .collage-tag { opacity: 1; transform: none; }
  .js .is-loaded .collage-item.floaty { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Favorites (♡) */
.fav-btn { cursor: pointer; }
.fav-btn .icon { transition: fill var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.fav-btn[aria-pressed="true"] .icon { fill: var(--color-primary); color: var(--color-primary); }
.fav-btn[aria-pressed="true"]:active .icon { transform: scale(.85); }
.product-card .fav-btn {
  position: absolute; right: var(--space-2); bottom: var(--space-2); z-index: 3; width: 44px; height: 44px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .94); color: var(--color-foreground); box-shadow: var(--shadow-md);
}
.product-card .fav-btn:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.fav-filter { display: inline-flex; }
.fav-filter .badge-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-foreground); font-size: .75rem; font-weight: 700; display: inline-grid; place-items: center; }
.fav-filter[aria-pressed="true"] { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); }
.fav-filter[aria-pressed="true"] .icon { fill: currentColor; }

/* Product view: favorite + share */
.pd-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pd-tools .btn { padding: 0 var(--space-4); }

/* "Avísame cuando vuelva" */
.restock { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-card); }
.restock h3 { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 1rem; }
.restock h3 .icon { color: var(--color-primary); }
.restock p { margin: 0; font-size: .9375rem; color: var(--color-muted-foreground); }
.restock-fields { display: grid; gap: var(--space-3); }
@media (min-width: 480px) { .restock-fields { grid-template-columns: 1fr 1fr; } }
.restock .field { margin: 0; }
.restock .field-error[hidden] { display: none; }
.restock-done { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-primary-soft); font-size: .9375rem; }
.restock-done .icon { flex: none; color: var(--color-wa); margin-top: 2px; }

/* Admin: Resumen */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.stat-card { display: grid; gap: 2px; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-card); }
.stat-card span { font-size: .8125rem; font-weight: 600; color: var(--color-muted-foreground); }
.stat-card strong { font-size: 1.625rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat-card small { font-size: .8125rem; color: var(--color-muted-foreground); }
.stat-grid { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .stat-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.stat-box { display: grid; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-card); }
.stat-box h2 { font-size: 1.5rem; margin: 0; }
.stat-box .help { margin: 0; }
.stat-bars, .stat-top { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.stat-bars li { display: grid; grid-template-columns: 96px 1fr 32px; align-items: center; gap: var(--space-3); font-size: .875rem; }
.stat-bars strong { text-align: right; font-variant-numeric: tabular-nums; }
.stat-bar { height: 12px; border-radius: var(--radius-full); background: var(--color-surface); overflow: hidden; }
.stat-bar span { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); }
.stat-top li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.stat-top img, .stat-noimg { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-surface); }
.stat-top li > span:nth-child(2) { display: grid; min-width: 0; }
.stat-top small { font-size: .8125rem; color: var(--color-muted-foreground); }
.stat-qty { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Admin: Avisos */
.rs-group { display: grid; gap: var(--space-3); grid-template-columns: 1fr; grid-template-areas: none; }
.rs-head { display: flex; gap: var(--space-3); align-items: center; }
.rs-head img { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; flex: none; }
.rs-head > div { display: grid; gap: 2px; min-width: 0; }
.rs-people { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.rs-people li { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; justify-content: space-between; padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.rs-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 639px) {
  .fav-filter { padding: 0 var(--space-3); }
  .fav-filter [data-i18n] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* Admin: Registro */
.log-list { gap: 0; }
.log-day { padding: var(--space-4) 0 var(--space-2); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted-foreground); }
.log-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-card); margin-bottom: var(--space-2); }
.log-row time { white-space: nowrap; font-size: .8125rem; color: var(--color-muted-foreground); font-variant-numeric: tabular-nums; padding-top: 2px; }
.log-row p { margin: 0; overflow-wrap: anywhere; }
.log-row p + p { margin-top: 2px; }
.log-changes { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 2px; font-size: .875rem; }
.log-changes span { color: var(--color-muted-foreground); }
.log-changes del { color: var(--color-muted-foreground); text-decoration-color: var(--color-border-strong); }
.log-changes ins { text-decoration: none; font-weight: 600; }
@media (max-width: 479px) { .log-row { grid-template-columns: 1fr; gap: var(--space-1); } }