:root {
  --accent: #f49ac1;
  --accent-soft: #fdeff5;
  --accent-strong: #e8368f;
  --accent-mid: #ec5aa0;
  --ink: #1a1a1a;

  /* Spacing scale */
  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs: .75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;

  /* Radius scale */
  --radius-sm: .55rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-full: 999px;

  /* Elevation */
  --shadow-sm: 0 2px 8px rgba(120, 30, 70, .08);
  --shadow-md: 0 12px 24px rgba(232, 54, 143, .14);
  --shadow-lg: 0 22px 44px rgba(232, 54, 143, .18);
  --shadow-xl: 0 34px 64px rgba(120, 30, 70, .22);
  --shadow-glow: 0 0 0 4px rgba(232, 54, 143, .16);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-hover: cubic-bezier(.19, 1, .22, 1);
  --dur-fast: .18s;
  --dur-base: .32s;
  --dur-hover: .55s;
  --dur-slow: .6s;

  /* Fluid type scale */
  --fs-xs: clamp(.75rem, .72rem + .12vw, .82rem);
  --fs-sm: clamp(.85rem, .82rem + .14vw, .95rem);
  --fs-base: clamp(1rem, .97rem + .16vw, 1.1rem);
  --fs-lg: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
  --fs-xl: clamp(1.5rem, 1.3rem + .8vw, 2rem);
  --fs-2xl: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --fs-3xl: clamp(2.6rem, 1.9rem + 2.8vw, 5rem);
  --fs-hero: clamp(3.2rem, 1.8rem + 6.5vw, 8.5rem);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Safety net against any stray sideways scroll (e.g. off-screen reveal
   transforms). `clip` doesn't create a scroll container, so the sticky header
   and scroll-locking overlays keep working. */
body {
  overflow-x: clip;
}

/* Applied while a cart/wishlist/quick-view sheet or the mobile search overlay
   is open. The body is pinned with position:fixed (its top offset is set from
   JS to the current scroll) so the page keeps its scroll position instead of
   snapping to the top. */
html.scroll-locked {
  overflow: hidden;
}
html.scroll-locked body {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  margin: 0;
  background: #fdf6f9;
  color: var(--ink);
  font-family: "Poppins", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Contain horizontal overflow from scroll-reveal transforms (AOS slides
   elements in from the sides, so they briefly sit off-screen) and edge-bleed
   carousels. `overflow-x: clip` clips without creating a scroll container, so
   it reliably kills the mobile sideways-scroll AND leaves position:sticky
   working — unlike `overflow-x: hidden`, which mobile browsers often ignore. */
main {
  overflow-x: clip;
}

::selection {
  background: var(--accent-strong);
  color: #fff;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

img {
  max-width: 100%;
  display: block;
}

:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: .35rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Reveal-on-scroll: hidden only once JS confirms it will animate things in,
   so content never disappears for no-JS / reduced-motion visitors. */
.js [data-reveal] {
  opacity: 0;
}

.no-js [data-reveal],
.reduce-motion [data-reveal] {
  opacity: 1;
}

[data-reveal].is-revealed {
  opacity: 1;
}

.split-mask {
  overflow: hidden;
  display: block;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mx-auto { margin-left: auto; margin-right: auto; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-7 { margin-top: 1.75rem; }
.mb-1 { margin-bottom: .25rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.max-w-md { max-width: 28rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.min-w-\[12rem\] { min-width: 12rem; }
.min-w-0 { min-width: 0; }
.min-w-5 { min-width: 1.25rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-20 { height: 5rem; }
.h-full { height: 100%; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-20 { width: 5rem; }
.w-full { width: 100%; }
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }
.grid { display: grid; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.block { display: block; }
.hidden { display: none; }
.contents { display: contents; }
.place-items-center { place-items: center; }
.items-center { align-items: center; }
.items-start { align-items: start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.self-center { align-self: center; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.overflow-y-auto { overflow-y: auto; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.object-cover { object-fit: cover; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { inset: 0; }
.right-0 { right: 0; }
.top-0 { top: 0; }
.-right-1 { right: -.25rem; }
.-top-1 { top: -.25rem; }
.bottom-5 { bottom: 1.25rem; }
.left-1\/2 { left: 50%; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-\[60\] { z-index: 60; }
.-translate-x-1\/2 { transform: translateX(-50%); }
.translate-x-full { transform: translateX(100%); }
.transition-transform { transition-property: transform; }
.duration-300 { transition-duration: .3s; }
.rounded-full { border-radius: 999px; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-\[1\.5rem\] { border-radius: 1.5rem; }
.rounded-\[2rem\] { border-radius: 2rem; }
.border-2 { border-width: 2px; border-style: solid; }
.border-b { border-bottom: 1px solid; }
.border-t { border-top: 1px solid; }
.border-\[\#F49AC1\] { border-color: #f49ac1; }
.border-\[\#E8368F\] { border-color: #e8368f; }
.border-accent-100 { border-color: #fdeff5; }
.border-accent-200 { border-color: #f6bfd8; }
.bg-white { background: #fff; }
.bg-\[\#FDF6F9\] { background: #fdf6f9; }
.bg-\[\#FDEFF5\] { background: #fdeff5; }
.bg-\[\#E8368F\] { background: #e8368f; }
.bg-gray-300 { background: #d1d5db; }
.bg-black\/25 { background: rgba(0,0,0,.25); }
.bg-accent-50 { background: #fff7fb; }
.p-3 { padding: .75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-8 { padding: 2rem; }
.px-1 { padding-left: .25rem; padding-right: .25rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.pb-3 { padding-bottom: .75rem; }
.pb-4 { padding-bottom: 1rem; }
.pt-3 { padding-top: .75rem; }
.pt-4 { padding-top: 1rem; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-xs { font-size: .75rem; }
.text-sm { font-size: .875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }
.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.15; }
.tracking-wide { letter-spacing: .025em; }
.tracking-\[0\.24em\] { letter-spacing: .24em; }
.text-white { color: #fff; }
.text-\[\#1A1A1A\] { color: #1a1a1a; }
.text-\[\#E8368F\] { color: #e8368f; }
.text-\[\#F49AC1\] { color: #f49ac1; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-accent-600 { color: #e8368f; }
.text-accent-700 { color: #be185d; }
.shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,.1); }
.shadow-xl { box-shadow: 0 20px 25px rgba(0,0,0,.1); }
.shadow-2xl { box-shadow: 0 25px 50px rgba(0,0,0,.25); }
.shadow-accent-100 { box-shadow: 0 18px 34px rgba(232,54,143,.13); }
.shadow-accent-200 { box-shadow: 0 14px 24px rgba(232,54,143,.22); }
.outline-none { outline: 0; }
.opacity-70 { opacity: .7; }
.disabled\:opacity-50:disabled { opacity: .5; }
.focus\:border-\[\#E8368F\]:focus { border-color: #e8368f; }
.aspect-\[4\/5\] { aspect-ratio: 4 / 5; }
.col-span-full { grid-column: 1 / -1; }
.font-\[\'Fraunces\'\] { font-family: "Playfair Display", Georgia, serif; }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-\[1\.1fr_0\.9fr\] { grid-template-columns: 1.1fr .9fr; }
  .lg\:grid-cols-\[minmax\(0\,1\.55fr\)_minmax\(280px\,0\.85fr\)\] {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr);
  }
}

.logo-wordmark {
  display: inline-flex;
  flex-direction: column;
  font-family: "Abril Fatface", Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: .78;
  text-decoration: none;
  text-transform: uppercase;
}

.site-header {
  border-bottom: 2px solid rgba(244, 154, 193, .45);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
  will-change: transform;
}

.site-header--scrolled {
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-md);
}

.site-header--hidden {
  transform: translateY(-100%);
}

.site-header-inner {
  display: flex;
  max-width: 80rem;
  margin: 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
}

.site-search {
  position: relative;
}

.site-search-input {
  height: 2.75rem;
  width: 100%;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: white;
  padding: 0 3rem 0 1.25rem;
  color: #be185d;
  font-size: .85rem;
  font-weight: 600;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.site-search-input:focus {
  border-color: var(--accent-strong);
  box-shadow: var(--shadow-glow);
}

.site-search-input::placeholder {
  color: #f9a8d4;
}

.site-search-btn {
  position: absolute;
  right: .35rem;
  top: 50%;
  display: grid;
  height: 2rem;
  width: 2rem;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--accent-strong);
  color: white;
  transform: translateY(-50%);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out);
}

.site-search-btn:hover {
  transform: translateY(-50%) scale(1.04);
}

.search-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + .6rem);
  z-index: 30;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-.4rem) scale(.98);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.search-suggestions.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.search-suggestions-list {
  display: grid;
  max-height: 22rem;
  overflow-y: auto;
  padding: .5rem;
}

.search-suggestion {
  display: flex;
  align-items: center;
  gap: .75rem;
  border-radius: var(--radius-sm);
  padding: .5rem .6rem;
  text-decoration: none;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease-out);
}

.search-suggestion:hover,
.search-suggestion:focus-visible {
  background: var(--accent-soft);
}

.search-suggestion img {
  height: 2.75rem;
  width: 2.75rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--accent-soft);
}

.search-suggestion-name {
  font-weight: 700;
  font-size: .85rem;
  line-height: 1.2;
}

.search-suggestion-meta {
  font-size: .75rem;
  font-weight: 600;
  color: var(--accent-strong);
}

.search-suggestions-empty,
.search-suggestions-loading {
  padding: 1.25rem;
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  color: #9ca3af;
}

.search-history-label {
  padding: .6rem .85rem .2rem;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #b8b8c0;
}

.site-footer {
  margin-top: 3.5rem;
  padding: 3.5rem 1rem 0;
  background: var(--accent);
  color: white;
}

.site-footer-grid {
  display: grid;
  gap: 2.5rem;
  max-width: 80rem;
  margin: 0 auto;
  padding-bottom: 2.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 720px) {
  .site-footer-grid {
    /* minmax(0, …) lets the tracks shrink below their content's min-content
       width, so the newsletter form can't force the grid wider than the page. */
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.1fr);
  }
}

.site-footer-brand,
.site-footer-newsletter {
  grid-column: 1 / -1;
}

@media (min-width: 720px) {
  .site-footer-brand,
  .site-footer-newsletter {
    grid-column: auto;
  }
}

.site-footer-socials {
  display: flex;
  gap: .6rem;
  margin-top: 1.25rem;
}

.site-footer-socials a {
  display: grid;
  height: 2.5rem;
  width: 2.5rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: white;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.site-footer-socials a:hover {
  background: white;
  color: var(--accent-strong);
  transform: translateY(-2px);
}

.site-footer-socials svg {
  height: 1.15rem;
  width: 1.15rem;
}

.site-footer-col h3 {
  margin: 0 0 1rem;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}

.site-footer-col ul {
  display: grid;
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer-col a {
  position: relative;
  font-weight: 700;
  color: white;
  text-decoration: none;
}

.site-footer-col a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.15rem;
  height: 1px;
  width: 0;
  background: currentColor;
  transition: width var(--dur-base) var(--ease-out);
}

.site-footer-col a:hover::after {
  width: 100%;
}

.site-footer-newsletter p {
  margin: 0;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}

.site-footer-newsletter-form {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
}

.site-footer-newsletter-form input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  border-radius: 999px;
  padding: .7rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
  outline: none;
}

.site-footer-newsletter-form input:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .5);
}

.site-footer-newsletter-form button {
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: white;
  padding: .7rem 1.25rem;
  font-size: .8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: transform var(--dur-fast) var(--ease-out);
}

.site-footer-newsletter-form button:hover {
  transform: scale(1.04);
}

.site-footer-newsletter-form button.is-loading {
  opacity: .7;
  pointer-events: none;
}

.site-footer-newsletter-feedback {
  margin: .65rem 0 0;
  min-height: 1em;
  font-size: .8rem;
  font-weight: 700;
  color: white;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.site-footer-newsletter-feedback.is-visible {
  opacity: 1;
}

.site-footer-newsletter-feedback.is-error {
  color: #ffe1ea;
}

.site-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .8);
}

.site-footer-bottom p {
  margin: 0;
}

.site-footer-bottom a {
  color: white;
  text-decoration: underline;
}

.site-footer-credit {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: rgba(255, 255, 255, .7);
}

.site-footer-credit a {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  text-decoration: none;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
  transition: color .2s ease, border-color .2s ease;
}

.site-footer-credit a:hover {
  color: #ffb3d4;
  border-color: #ffb3d4;
}

.hero-panel {
  position: relative;
  min-height: 42vh;
  overflow: hidden;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  background: radial-gradient(circle at 50% 58%, #fdeff5 0%, #f49ac1 72%, #ec5aa0 100%);
  box-shadow: inset 0 0 100px rgba(255,255,255,.35);
  padding: 3.5rem 1.5rem 4rem;
}

/* Conic-gradient rays are only geometrically even on a square box — the
   hero panel is a wide rectangle, so the rays get visibly stretched if
   drawn straight on it. Render them on a guaranteed-square layer centered
   on the same focal point instead, clipped by the panel's own overflow. */
.hero-panel::before {
  content: "";
  position: absolute;
  top: 58%;
  left: 50%;
  width: 200vmax;
  height: 200vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from -8deg, #fbb8d3 0deg 10deg, #f9a8ce 10deg 20deg);
  pointer-events: none;
}

.hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 58%, rgba(255,255,255,.55), transparent 42%),
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.28), transparent 24%);
  pointer-events: none;
}

/* Always a centered vertical stack — title, then the category row below —
   at every viewport. A two-column split here reliably read as lopsided:
   the title block is visually much heavier than three small circles, so
   splitting them side by side never balanced. Stacked and centered is
   symmetric by construction, on mobile and desktop alike. */
.hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  gap: 2.25rem;
  max-width: 72rem;
  margin: 0 auto;
}

.hero-content {
  display: grid;
  justify-items: center;
  text-align: center;
}

.hero-badge,
.section-pill,
.price-pill {
  border-radius: 999px;
  background: var(--accent-strong);
  color: white;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(232, 54, 143, .25);
}

.hero-badge {
  position: relative;
  z-index: 3;
  padding: .3rem 1rem;
  margin-bottom: -.35rem;
  font-size: .78rem;
  letter-spacing: .14em;
  transform: rotate(-3deg);
}

.hero-title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: "Abril Fatface", "Playfair Display", Georgia, serif;
  font-size: clamp(3.2rem, 12vw, 8.5rem);
  font-weight: 400;
  line-height: .88;
  color: white;
  text-align: center;
  text-shadow:
    0 2px 0 #f49ac1,
    0 6px 0 #ec5aa0,
    0 14px 24px rgba(232,54,143,.35);
  -webkit-text-stroke: 1px rgba(232,54,143,.45);
}

.hero-script {
  position: relative;
  z-index: 2;
  margin: -.35rem 0 0;
  width: max-content;
  max-width: 92%;
  color: var(--accent-strong);
  font-family: "Pacifico", cursive;
  font-size: clamp(2.2rem, 6vw, 4.8rem);
  line-height: 1;
  text-shadow: 0 2px 0 white, 0 5px 10px rgba(232,54,143,.28);
  transform: rotate(-4deg);
}

.hero-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  align-self: center;
}

.hero-categories .category-shortcut {
  width: clamp(5rem, 9vw, 7.5rem);
}

.hero-categories .category-shortcut img {
  width: 100%;
}

.section-pill {
  display: inline-block;
  padding: .45rem 1.4rem;
}

.featured-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .featured-grid .product-card:nth-child(2) {
    margin-top: 3.5rem;
  }

  /* Frame and garment tilt independently, in opposite directions,
     for the layered "collage" look on the two featured pieces. Both
     lift together on hover so it reads as one cohesive motion. */
  .featured-grid .product-card:nth-child(1) .product-photo-wrap {
    transform: rotate(-7deg);
  }

  .featured-grid .product-card:nth-child(1):hover .product-photo-wrap {
    transform: rotate(-7deg) translateY(-5px);
  }

  .featured-grid .product-card:nth-child(1) .product-photo {
    transform: translateX(-50%) translateY(-.6rem) rotate(8deg);
  }

  .featured-grid .product-card:nth-child(1):hover .product-photo {
    transform: translateX(-50%) translateY(-1.1rem) rotate(8deg) scale(1.07);
  }

  .featured-grid .product-card:nth-child(2) .product-photo-wrap {
    transform: rotate(7deg);
  }

  .featured-grid .product-card:nth-child(2):hover .product-photo-wrap {
    transform: rotate(7deg) translateY(-5px);
  }

  .featured-grid .product-card:nth-child(2) .product-photo {
    transform: translateX(-50%) translateY(-.6rem) rotate(-8deg);
  }

  .featured-grid .product-card:nth-child(2):hover .product-photo {
    transform: translateX(-50%) translateY(-1.1rem) rotate(-8deg) scale(1.07);
  }
}

.product-card {
  position: relative;
  min-height: 28rem;
  overflow: visible;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  box-shadow: none;
  transition: transform var(--dur-hover) var(--ease-hover);
  will-change: transform;
}

.product-card:hover {
  transform: translateY(-6px);
}

.product-card-link {
  display: block;
  position: relative;
  z-index: 1;
}

/* Base (catalog grid): a clean, uniform canvas that works for any photo,
   cutout or not — contained and centered, no frame pattern to clash with
   a photo's own background. */
.product-photo-wrap {
  position: relative;
  height: 20rem;
  margin: .85rem .85rem 0;
  overflow: hidden;
  border-radius: 1.1rem;
  background: linear-gradient(145deg, #fff, var(--accent-soft));
  box-shadow: var(--shadow-sm);
}

.product-photo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 86%;
  height: 86%;
  max-width: none;
  transform: translate(-50%, -50%);
  object-fit: contain;
  transition: transform var(--dur-hover) var(--ease-hover);
  will-change: transform;
}

.product-card:hover .product-photo {
  transform: translate(-50%, -50%) scale(1.05);
}

/* Featured showcase only: diagonal pink frame with the garment
   deliberately oversized so it escapes the frame's edges. Only ever
   used with transparent cutout photos (see is_featured products). */
.featured-grid .product-photo-wrap {
  overflow: visible;
  background:
    radial-gradient(circle at 24% 15%, rgba(255,255,255,.9), transparent 30%),
    repeating-linear-gradient(135deg, rgba(249,168,206,.4) 0 20px, rgba(251,184,211,.4) 20px 40px);
  box-shadow: 0 14px 28px rgba(232, 54, 143, .16);
  transition: transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover);
  will-change: transform;
}

.featured-grid .product-card:hover .product-photo-wrap {
  box-shadow: 0 20px 38px rgba(232, 54, 143, .24);
}

.featured-grid .product-photo {
  top: auto;
  left: 50%;
  bottom: -1.6rem;
  width: 122%;
  height: 122%;
  transform: translateX(-50%);
}

.product-cutout {
  filter:
    drop-shadow(0 0 3px white)
    drop-shadow(0 0 7px white)
    drop-shadow(0 5px 12px rgba(232, 54, 143, .28));
}

.new-badge,
.sold-badge,
.discount-badge {
  position: absolute;
  left: .5rem;
  top: .5rem;
  z-index: 3;
  border-radius: .7rem;
  background: white;
  padding: .4rem .85rem;
  color: var(--accent-strong);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 6px 14px rgba(232, 54, 143, .22);
  transition: transform var(--dur-base) var(--ease-out);
}

.new-badge + .discount-badge,
.discount-badge:nth-of-type(2) {
  top: 2.6rem;
}

.sold-badge {
  background: var(--ink);
  color: white;
}

.discount-badge {
  background: var(--ink);
  color: #fff;
}

.product-card:hover .new-badge,
.product-card:hover .discount-badge {
  transform: scale(1.05);
}

.quick-add-form {
  display: contents;
}

.quick-add-btn {
  position: absolute;
  right: 1.2rem;
  top: 17.75rem;
  z-index: 4;
  display: grid;
  height: 2.75rem;
  width: 2.75rem;
  place-items: center;
  border: 3px solid white;
  border-radius: 999px;
  background: var(--accent-strong);
  color: white;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(232,54,143,.4);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.quick-add-btn svg {
  height: 1.15rem;
  width: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quick-add-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 10px 24px rgba(232,54,143,.5);
}

.quick-add-btn:active {
  transform: scale(.94);
}

.quick-add-btn.is-loading {
  pointer-events: none;
}

.quick-add-btn.is-loading::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 2px solid transparent;
  border-top-color: white;
  animation: spin .7s linear infinite;
}

.wishlist-btn {
  position: absolute;
  right: .5rem;
  top: .5rem;
  z-index: 4;
  display: grid;
  height: 2.4rem;
  width: 2.4rem;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  color: var(--accent-strong);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.wishlist-btn svg {
  height: 1.15rem;
  width: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: fill var(--dur-fast) var(--ease-out);
}

.wishlist-btn:hover {
  transform: scale(1.05);
}

.wishlist-btn.is-active svg {
  fill: var(--accent-strong);
}

.wishlist-btn.is-pulsing svg {
  animation: heart-pop .45s var(--ease-spring);
}

@keyframes heart-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

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

.quick-view-btn {
  position: absolute;
  left: 1.2rem;
  top: 17.75rem;
  z-index: 4;
  display: grid;
  height: 2.75rem;
  width: 2.75rem;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  color: var(--accent-strong);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(.4rem);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.quick-view-btn svg {
  height: 1.15rem;
  width: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.product-card:hover .quick-view-btn,
.product-card:focus-within .quick-view-btn {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.quick-view-btn:hover {
  background: var(--accent-strong);
  color: white;
}

.product-photo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 65%, rgba(244,154,193,.22), transparent 68%);
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-hover);
  pointer-events: none;
}

.product-card:hover .product-photo-wrap::after {
  opacity: 1;
}

/* Hovering an action button that sits on top of the photo (wishlist,
   quick-view, quick-add) also counts as hovering the card, since :hover
   bubbles to ancestors — that was firing the whole card's lift/zoom every
   time a mouse moved onto one of these buttons, reading as an unwanted
   jump. Cancel the effect specifically while a button is the hover target. */
.product-card:has(.wishlist-btn:hover, .quick-view-btn:hover, .quick-add-btn:hover) {
  transform: none;
}

.product-card:has(.wishlist-btn:hover, .quick-view-btn:hover, .quick-add-btn:hover) .product-photo {
  transform: translate(-50%, -50%);
}

.featured-grid .product-card:has(.wishlist-btn:hover, .quick-view-btn:hover, .quick-add-btn:hover) .product-photo-wrap {
  box-shadow: 0 14px 28px rgba(232, 54, 143, .16);
}

.product-card:has(.wishlist-btn:hover, .quick-view-btn:hover, .quick-add-btn:hover) .product-photo-wrap::after {
  opacity: 0;
}

.featured-grid .product-card:nth-child(1):has(.wishlist-btn:hover, .quick-view-btn:hover, .quick-add-btn:hover) .product-photo-wrap {
  transform: rotate(-7deg);
}

.featured-grid .product-card:nth-child(1):has(.wishlist-btn:hover, .quick-view-btn:hover, .quick-add-btn:hover) .product-photo {
  transform: translateX(-50%) translateY(-.6rem) rotate(8deg);
}

.featured-grid .product-card:nth-child(2):has(.wishlist-btn:hover, .quick-view-btn:hover, .quick-add-btn:hover) .product-photo-wrap {
  transform: rotate(7deg);
}

.featured-grid .product-card:nth-child(2):has(.wishlist-btn:hover, .quick-view-btn:hover, .quick-add-btn:hover) .product-photo {
  transform: translateX(-50%) translateY(-.6rem) rotate(-8deg);
}

.product-name {
  display: block;
  min-height: 2.2rem;
  color: var(--accent-strong);
  font-family: "Pacifico", cursive;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.1;
  text-decoration: none;
}

.price-pill {
  display: inline-block;
  border: 2px solid var(--accent-strong);
  background: white;
  color: var(--accent-strong);
  padding: .22rem .85rem;
  font-size: .85rem;
  box-shadow: none;
}

.category-shortcut {
  text-align: center;
  color: var(--accent-strong);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  font-style: italic;
  text-decoration: none;
}

.category-shortcut img {
  aspect-ratio: 1;
  width: 100%;
  border: 3px solid white;
  border-radius: 999px;
  object-fit: cover;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.9), rgba(255,255,255,.2) 28%, transparent 54%),
    linear-gradient(145deg, #fdeff5, #f49ac1);
  box-shadow: inset 0 8px 18px rgba(255,255,255,.45), 0 12px 24px rgba(232,54,143,.22);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.category-shortcut:hover img {
  transform: translateY(-2px) scale(1.02);
  box-shadow: inset 0 8px 18px rgba(255,255,255,.45), 0 16px 30px rgba(232,54,143,.3);
}

.category-shortcut span {
  display: block;
  margin-top: .65rem;
}

.callout {
  color: var(--accent-strong);
  text-align: left;
}

.fetch-side {
  align-self: center;
}

.callout h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 900;
  line-height: .94;
}

.callout h2 span {
  display: inline-grid;
  height: 2.6rem;
  width: 2.6rem;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-strong);
  color: white;
  font-style: normal;
}

.callout-arrow::before {
  content: "";
  display: block;
  width: .82rem;
  height: .82rem;
  border-right: .22rem solid currentColor;
  border-top: .22rem solid currentColor;
  transform: translateX(-.08rem) rotate(45deg);
}

.callout p {
  margin-top: .85rem;
  max-width: 28rem;
  color: #777;
  font-style: italic;
  font-weight: 600;
}

/* Metro station picker: a native <select> with an optgroup per line. Native
   selects give the familiar OS picker (especially good on mobile). */
.metro-field {
  display: block;
}

.metro-select-wrap {
  position: relative;
  display: block;
}

.metro-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #f6bfd8;
  border-radius: 1.25rem;
  background: white;
  padding: .85rem 2.6rem .85rem 1.1rem;
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink);
  outline: none;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}

/* Grey, placeholder-like text while the disabled empty option is selected (the
   closed control only). */
.metro-select:required:invalid {
  color: #9ca3af;
}

/* The open dropdown's options must render dark on their own. Otherwise they
   inherit the placeholder grey above and the whole list looks disabled/greyed
   until a value is picked. Only the empty placeholder option stays grey. */
.metro-select option,
.metro-select optgroup {
  color: var(--ink);
  font-weight: 700;
}

.metro-select option {
  font-weight: 600;
}

.metro-select option[value=""] {
  color: #9ca3af;
}

.metro-select:focus {
  border-color: var(--accent-strong);
}

.metro-select-chevron {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  height: 1.1rem;
  width: 1.1rem;
  color: var(--accent-strong);
  pointer-events: none;
}

.delivery-time-field {
  display: block;
}

.delivery-time-input {
  width: 100%;
  border: 2px solid #f6bfd8;
  border-radius: 1.25rem;
  background: white;
  padding: .85rem 1.1rem;
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
  color-scheme: light;
}

.delivery-time-input:focus {
  border-color: var(--accent-strong);
}

.delivery-time-input::-webkit-calendar-picker-indicator {
  filter: invert(24%) sepia(90%) saturate(3000%) hue-rotate(320deg) brightness(95%);
}

.cart-open [data-cart-overlay] {
  display: block;
}

.cart-open [data-cart-drawer] {
  transform: translateX(0);
}

.cart-back-btn[hidden] {
  display: none;
}

.cart-back-btn {
  display: grid;
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  transition: background var(--dur-fast) var(--ease-out);
}

.cart-back-btn:hover {
  background: var(--accent);
  color: white;
}

.cart-back-btn svg {
  height: 1.15rem;
  width: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* height:100% (.h-full) doesn't reliably resolve as a flex-basis against a
   max-height-clamped (rather than literally definite) parent height, so
   this wrapper was growing to fit its content instead of filling the
   available space — making it an explicit flex item fixes that, and
   min-height:0 (both here and on the scrollable panel below) lets the
   panel actually shrink and scroll instead of overflowing the sheet. */
[data-cart-drawer-content],
[data-wishlist-drawer-content] {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

[data-cart-drawer-content] .flex-1,
[data-wishlist-drawer-content] .flex-1 {
  min-height: 0;
}

[data-cart-panel]:not([hidden]) {
  animation: cart-panel-in .3s var(--ease-out);
}

@keyframes cart-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.wishlist-drawer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  width: 100dvw;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: white;
  box-shadow: var(--shadow-xl);
  transform: translateX(-100%);
  transition: transform var(--dur-base) var(--ease-out);
}

/* Fixed full-height overlays: use the real visible viewport height on
   mobile (100% would otherwise inherit a taller "layout viewport" that
   accounts for a hidden address bar, pushing footer content off-screen). */
.cart-drawer {
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  width: 100dvw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wishlist-open [data-wishlist-overlay] {
  display: block;
}

.wishlist-open [data-wishlist-drawer] {
  transform: translateX(0);
}

/* Skeleton / shimmer loading */
.skeleton {
  position: relative;
  overflow: hidden;
  background: #f6d9e6;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}

.img-fade {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-hover) var(--ease-hover);
}

.img-fade.is-loaded {
  opacity: 1;
}

/* Ripple micro-interaction */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.ripple-dot {
  position: absolute;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  transform: scale(0);
  animation: ripple .6s var(--ease-out);
  pointer-events: none;
}

@keyframes ripple {
  to { transform: scale(1); opacity: 0; }
}

/* Quick View modal */
.quickview-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(26, 12, 20, .45);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

.quickview-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.quickview-modal {
  width: min(100%, 56rem);
  max-height: min(92vh, 44rem);
  overflow-y: auto;
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-xl);
  transform: translateY(1.5rem) scale(.97);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur-base) var(--ease-out);
}

.quickview-overlay.is-open .quickview-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.quickview-grid {
  display: grid;
  gap: 0;
}

@media (min-width: 720px) {
  .quickview-grid {
    grid-template-columns: 1.1fr .9fr;
  }
}

.quickview-media {
  position: relative;
  min-height: 20rem;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, var(--accent-soft), #fff 72%);
  padding: 2rem;
}

.quickview-media img {
  max-height: 22rem;
  object-fit: contain;
}

.quickview-body {
  position: relative;
  padding: 2rem;
}

.quickview-close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 2;
  display: grid;
  height: 2.25rem;
  width: 2.25rem;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  color: var(--accent-strong);
  font-size: 1.2rem;
  font-weight: 900;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out);
}

.quickview-close:hover {
  transform: rotate(90deg);
}

.quickview-category {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.quickview-name {
  margin: .5rem 0 0;
  font-family: "Abril Fatface", Georgia, serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--ink);
}

.quickview-price-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .75rem;
}

.quickview-compare-price {
  color: #9ca3af;
  font-weight: 700;
  text-decoration: line-through;
}

.quickview-loading {
  display: grid;
  place-items: center;
  min-height: 20rem;
  gap: .75rem;
  color: var(--accent-strong);
  font-weight: 800;
}

/* PDP gallery */
.pdp-gallery {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 5;
  max-height: 44rem;
  border-radius: 1.5rem;
  overflow: hidden;
}

.pdp-gallery .swiper-wrapper,
.pdp-gallery .swiper-slide {
  min-width: 0;
}

.pdp-gallery .swiper-slide img,
.pdp-gallery .swiper-slide video {
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .pdp-media-col {
    position: sticky;
    top: 6rem;
  }
}

.pdp-accordion {
  margin-top: 1.5rem;
  border-radius: 1.5rem;
  background: white;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.pdp-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-weight: 900;
  color: var(--accent-strong);
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .06em;
}

.pdp-accordion summary::-webkit-details-marker {
  display: none;
}

.pdp-accordion-chevron {
  height: 1.1rem;
  width: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-base) var(--ease-out);
}

.pdp-accordion[open] .pdp-accordion-chevron {
  transform: rotate(180deg);
}

.pdp-accordion-body {
  display: grid;
  gap: .75rem;
  padding: 0 1.25rem 1.25rem;
  font-weight: 600;
}

.pdp-wishlist-btn {
  position: relative;
  top: auto;
  right: auto;
  flex-shrink: 0;
  height: 3.6rem;
  width: 3.6rem;
  border: 2px solid var(--accent-soft);
}

.pdp-wishlist-btn svg {
  height: 1.4rem;
  width: 1.4rem;
}

.pdp-gallery-nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  height: 2.75rem;
  width: 2.75rem;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(6px);
  color: var(--accent-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-50%);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.pdp-gallery-nav svg {
  height: 1.25rem;
  width: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pdp-gallery-nav:hover {
  background: var(--accent-strong);
  color: white;
}

.pdp-gallery-nav.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

.pdp-gallery-prev {
  left: 1rem;
}

.pdp-gallery-next {
  right: 1rem;
}

.pdp-gallery-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}

.pdp-gallery-dots .swiper-pagination-bullet {
  height: .5rem;
  width: .5rem;
  border-radius: 999px;
  background: rgba(232, 54, 143, .3);
  opacity: 1;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.pdp-gallery-dots .swiper-pagination-bullet-active {
  background: var(--accent-strong);
  transform: scale(1.25);
}

/* ============================================================
   Lolitta store admin — step-by-step control panel
   ============================================================ */
.sa-body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.9), transparent 30rem),
    linear-gradient(140deg, #fff7fb, #fff 46%, #fbe2ee);
  color: var(--ink);
  font-family: "Poppins", system-ui, sans-serif;
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
}

/* ---- sidebar ---- */
.sa-nav-toggle { position: absolute; }
.sa-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.5rem 1.1rem;
  background: linear-gradient(180deg, #e8368f, #c31c72);
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.sa-brand { display: block; margin-bottom: 1.5rem; text-decoration: none; color: #fff; }
.sa-brand-word { display: block; font-family: "Abril Fatface", Georgia, serif; font-size: 1.9rem; line-height: 1; }
.sa-brand-sub { display: block; margin-top: .25rem; font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.sa-nav { display: grid; gap: .3rem; }
.sa-nav-foot { margin-top: auto; display: grid; gap: .3rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.16); }
.sa-nav-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .85rem; border-radius: .8rem;
  color: rgba(255,255,255,.9); font-weight: 700; font-size: .95rem;
  text-decoration: none; transition: background var(--dur-fast) var(--ease-out);
}
.sa-nav-link:hover { background: rgba(255,255,255,.14); color: #fff; }
.sa-nav-link.is-active { background: #fff; color: var(--accent-strong); box-shadow: var(--shadow-sm); }
.sa-nav-muted { color: rgba(255,255,255,.72); font-size: .85rem; font-weight: 600; }
.sa-ico { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---- main ---- */
.sa-main { min-width: 0; padding: 1.5rem clamp(1rem, 3vw, 2.4rem) 3rem; }
.sa-topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.4rem; margin-bottom: 1.2rem;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.9); border: 1px solid rgba(232,54,143,.16);
  box-shadow: var(--shadow-sm);
}
.sa-burger { display: none; cursor: pointer; }
.sa-burger svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--accent-strong); stroke-width: 2.2; stroke-linecap: round; }
.sa-topbar-title { flex: 1; min-width: 0; }
.sa-kicker { margin: 0; color: var(--accent-strong); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sa-topbar h1 { margin: .1rem 0 0; color: var(--ink); font-family: "Abril Fatface", Georgia, serif; font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1; }
.sa-user { display: flex; align-items: center; gap: .7rem; }
.sa-user-name { font-weight: 800; font-size: .85rem; color: var(--ink); }
.sa-user-out { border: 0; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); cursor: pointer; font: inherit; font-size: .75rem; font-weight: 800; padding: .5rem .85rem; }
.sa-user-out:hover { background: var(--accent); color: #fff; }

/* ---- messages ---- */
.sa-messages { display: grid; gap: .5rem; margin-bottom: 1rem; }
.sa-msg { margin: 0; padding: .8rem 1.1rem; border-radius: .8rem; font-weight: 700; background: #fff; box-shadow: var(--shadow-sm); border-left: 4px solid var(--accent); }
.sa-msg-success { border-left-color: #2fb774; color: #146c43; background: #edfaf2; }
.sa-msg-error { border-left-color: #e5484d; color: #b42318; background: #fdecec; }
.sa-msg-warning { border-left-color: #f5a623; color: #92510a; background: #fff6e6; }

/* ---- buttons ---- */
.sa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 800;
  padding: .7rem 1.3rem; text-decoration: none; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.sa-btn:hover { transform: translateY(-1px); }
.sa-btn-lg { padding: .85rem 1.6rem; font-size: 1rem; }
.sa-btn-primary { background: var(--accent-strong); color: #fff; box-shadow: 0 10px 22px rgba(232,54,143,.28); }
.sa-btn-primary:hover { background: #d02580; }
.sa-btn-ghost { background: #fff; color: var(--accent-strong); box-shadow: inset 0 0 0 2px var(--accent); }
.sa-btn-ghost:hover { background: var(--accent-soft); }
.sa-btn-danger-ghost { background: #fff; color: #d3372f; box-shadow: inset 0 0 0 2px #f4b5b2; }
.sa-btn-danger-ghost:hover { background: #fdecec; }
.sa-link { color: var(--accent-strong); font-weight: 800; font-size: .85rem; text-decoration: none; }
.sa-link:hover { text-decoration: underline; }

/* ---- get started ---- */
.sa-getstarted { padding: 1.4rem 1.5rem; margin-bottom: 1.3rem; border-radius: var(--radius-md); background: linear-gradient(135deg, #fff, var(--accent-soft)); border: 1px solid rgba(232,54,143,.18); box-shadow: var(--shadow-sm); }
.sa-getstarted h2 { margin: 0; font-family: "Abril Fatface", Georgia, serif; color: var(--accent-strong); font-size: 1.5rem; }
.sa-getstarted > p { margin: .3rem 0 1.1rem; color: #6b5560; font-weight: 600; }
.sa-steps-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sa-guide-card { position: relative; display: block; padding: 1.1rem 1.2rem 1.1rem 3.4rem; border-radius: var(--radius-md); background: #fff; border: 1px solid rgba(232,54,143,.16); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease-out); }
.sa-guide-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.sa-guide-card strong { display: block; font-size: 1.02rem; }
.sa-guide-card small { color: #7a6570; font-weight: 600; }
.sa-guide-num { position: absolute; left: 1rem; top: 1.1rem; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 999px; background: var(--accent-strong); color: #fff; font-weight: 900; }
.sa-guide-card.is-done .sa-guide-num { background: #2fb774; }
.sa-guide-card.is-locked { opacity: .55; pointer-events: none; }

/* ---- stats ---- */
.sa-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.2rem; }
.sa-stat { padding: 1.1rem 1.2rem; border-radius: var(--radius-md); background: #fff; border: 1px solid rgba(232,54,143,.12); box-shadow: var(--shadow-sm); }
.sa-stat-num { font-family: "Abril Fatface", Georgia, serif; color: var(--accent-strong); font-size: 2.2rem; line-height: 1; }
.sa-stat p { margin: .35rem 0 0; font-weight: 700; color: #6b5560; font-size: .9rem; }
.sa-quick-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.3rem; }

/* ---- panels / grid ---- */
.sa-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 1.2rem; }
.sa-panel { padding: 1.2rem 1.3rem; border-radius: var(--radius-md); background: #fff; border: 1px solid rgba(232,54,143,.14); box-shadow: var(--shadow-sm); }
.sa-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.sa-panel-head-wrap { flex-wrap: wrap; }
.sa-panel-head h2 { margin: 0; font-family: "Abril Fatface", Georgia, serif; color: var(--ink); font-size: 1.2rem; }
.sa-list { display: grid; gap: .6rem; }
.sa-row { display: flex; align-items: center; gap: .85rem; padding: .65rem; border-radius: .8rem; background: #fffafd; border: 1px solid rgba(232,54,143,.1); text-decoration: none; color: inherit; }
.sa-row:hover { background: var(--accent-soft); }
.sa-row img { width: 3rem; height: 3rem; border-radius: .6rem; object-fit: cover; flex: none; }
.sa-row-main { flex: 1; min-width: 0; }
.sa-row-main strong { display: block; font-weight: 800; }
.sa-row-main small { color: #7a6570; font-weight: 600; }
.sa-row-tag { font-style: normal; font-weight: 800; font-size: .82rem; color: var(--accent-strong); white-space: nowrap; }
.sa-empty { padding: 1.6rem; text-align: center; color: #9a8892; font-weight: 600; }
.sa-empty a { color: var(--accent-strong); font-weight: 800; }

/* ---- callout ---- */
.sa-callout { padding: .9rem 1.2rem; margin-bottom: 1rem; border-radius: .8rem; font-weight: 700; }
.sa-callout-warn { background: #fff6e6; color: #92510a; border: 1px solid #f6d79a; }
.sa-callout a { color: var(--accent-strong); font-weight: 800; }

/* ---- progress ---- */
.sa-progress { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 1.2rem; padding: .5rem; border-radius: 999px; background: #fff; border: 1px solid rgba(232,54,143,.14); box-shadow: var(--shadow-sm); }
.sa-progress li { display: flex; align-items: center; gap: .5rem; flex: 1; justify-content: center; padding: .5rem .6rem; border-radius: 999px; font-weight: 800; font-size: .85rem; color: #b09aa4; cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out); }
.sa-progress li span { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: #f0d9e4; color: #b09aa4; font-size: .8rem; }
.sa-progress li.is-active { color: var(--accent-strong); background: var(--accent-soft); }
.sa-progress li.is-active span { background: var(--accent-strong); color: #fff; }
.sa-progress li.is-done { color: #2fb774; }
.sa-progress li.is-done span { background: #2fb774; color: #fff; }

/* ---- wizard ---- */
.sa-wizard { padding: 1.6rem clamp(1.1rem,2.5vw,2rem); border-radius: var(--radius-lg); background: #fff; border: 1px solid rgba(232,54,143,.14); box-shadow: var(--shadow-md); }
.sa-step { display: none; animation: saFade .35s var(--ease-out); }
.sa-step.is-active { display: block; }
@keyframes saFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sa-step-title { margin: 0; font-family: "Abril Fatface", Georgia, serif; color: var(--ink); font-size: 1.5rem; }
.sa-step-sub { margin: .35rem 0 1.4rem; color: #6b5560; font-weight: 600; }
.sa-opt { font-size: .72rem; font-weight: 700; color: #b09aa4; text-transform: uppercase; letter-spacing: .06em; }
.sa-field { margin-bottom: 1.1rem; }
.sa-field label { display: block; margin-bottom: .4rem; font-weight: 800; font-size: .9rem; color: var(--ink); }
.sa-field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sa-hint { color: #7a6570; font-weight: 600; }
.sa-error { display: block; margin-top: .35rem; color: #d3372f; font-weight: 700; font-size: .85rem; }

/* inputs (StoreAdminFormMixin classes) */
.store-admin-input {
  width: 100%; border: 2px solid #f6bfd8; border-radius: .7rem; background: #fff;
  color: var(--ink); font: inherit; font-weight: 600; padding: .8rem .95rem;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.store-admin-input:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 3px rgba(232,54,143,.14); outline: 0; }
textarea.store-admin-input { resize: vertical; }
.store-admin-checkbox { width: 1.35rem; height: 1.35rem; accent-color: var(--accent-strong); cursor: pointer; flex: none; }

/* toggles */
.sa-toggles { display: grid; gap: .6rem; margin-bottom: 1.2rem; }
.sa-toggle { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-radius: .8rem; background: #fffafd; border: 1px solid rgba(232,54,143,.12); cursor: pointer; }
.sa-toggle:hover { background: var(--accent-soft); }
.sa-toggle span { display: block; }
.sa-toggle strong { display: block; font-weight: 800; font-size: .92rem; }
.sa-toggle small { color: #7a6570; font-weight: 600; }
.sa-toggle-tall { align-items: center; }

/* advanced */
.sa-advanced { margin-top: .5rem; border-top: 1px dashed rgba(232,54,143,.2); padding-top: .8rem; }
.sa-advanced summary { cursor: pointer; font-weight: 800; color: var(--accent-strong); }
.sa-advanced[open] summary { margin-bottom: .9rem; }

/* dropzone */
.sa-dropzone { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 2.2rem 1rem; border-radius: var(--radius-md); border: 2.5px dashed #f0b8d3; background: #fffafd; text-align: center; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.sa-dropzone:hover, .sa-dropzone.is-drag { border-color: var(--accent-strong); background: var(--accent-soft); }
.sa-dropzone input[type=file] { display: none; }
.sa-drop-ico { width: 2.4rem; height: 2.4rem; fill: none; stroke: var(--accent-strong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sa-drop-title { font-weight: 800; color: var(--ink); }
.sa-drop-sub { font-size: .82rem; color: #9a8892; font-weight: 600; }

/* thumbs / photo grids */
.sa-thumbs, .sa-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .7rem; margin-top: 1rem; }
.sa-thumb, .sa-photo { position: relative; margin: 0; border-radius: .8rem; overflow: hidden; background: #fff; border: 1px solid rgba(232,54,143,.14); box-shadow: var(--shadow-sm); }
.sa-thumb img, .sa-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.sa-photo.is-cover { outline: 3px solid var(--accent-strong); outline-offset: -3px; }
.sa-photo-badge { position: absolute; top: .4rem; left: .4rem; padding: .2rem .55rem; border-radius: 999px; background: var(--accent-strong); color: #fff; font-size: .68rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.sa-photo-actions { display: flex; gap: .3rem; padding: .4rem; }
.sa-mini { flex: 1; border: 0; border-radius: .5rem; background: var(--accent-soft); color: var(--accent-strong); font: inherit; font-size: .72rem; font-weight: 800; padding: .35rem; cursor: pointer; }
.sa-mini:hover { background: var(--accent); color: #fff; }
.sa-mini-danger { background: #fdecec; color: #d3372f; }
.sa-mini-danger:hover { background: #f4b5b2; color: #fff; }
.sa-current { margin-top: 1.6rem; }
.sa-current h3 { margin: 0; font-weight: 800; color: var(--ink); }
.sa-current h3 small { color: #9a8892; font-weight: 700; }
.sa-current-single { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.sa-current-single img { width: 5rem; height: 5rem; border-radius: .8rem; object-fit: cover; box-shadow: var(--shadow-sm); }
.sa-current-single small { color: #7a6570; font-weight: 600; }

/* review */
.sa-review { display: grid; gap: .5rem; }
.sa-review-row { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-radius: .7rem; background: #fffafd; border: 1px solid rgba(232,54,143,.1); }
.sa-review-row span { color: #7a6570; font-weight: 700; }
.sa-review-row b { color: var(--ink); font-weight: 800; }
.sa-review-row s { color: #b09aa4; }

/* wizard bar */
.sa-wizard-bar { display: flex; align-items: center; gap: .8rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid rgba(232,54,143,.14); }
.sa-wizard-spacer { flex: 1; }
.sa-delete-row { margin-top: 1.2rem; text-align: right; }

/* ---- list cards ---- */
.sa-cards { display: grid; gap: .7rem; }
.sa-card { display: flex; align-items: center; gap: 1rem; padding: .7rem; border-radius: var(--radius-md); background: #fff; border: 1px solid rgba(232,54,143,.12); text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease-out); }
.sa-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.sa-card img { width: 4rem; height: 4rem; border-radius: .7rem; object-fit: cover; flex: none; }
.sa-card-body { flex: 1; min-width: 0; }
.sa-card-body strong { display: block; font-weight: 800; }
.sa-card-body small { color: #7a6570; font-weight: 600; }
.sa-flags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.sa-flags span { padding: .22rem .55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: .7rem; font-weight: 900; }
.sa-flag-muted { background: #f0e6ea !important; color: #8a7883 !important; }
.sa-card-edit { color: var(--accent-strong); font-weight: 800; font-size: .85rem; white-space: nowrap; }
.sa-search { display: flex; gap: .5rem; flex: 1; min-width: min(100%, 24rem); }
.sa-search input { flex: 1; border: 2px solid #f6bfd8; border-radius: 999px; background: #fff; font: inherit; font-weight: 600; padding: .6rem 1rem; }
.sa-search input:focus { border-color: var(--accent-strong); outline: 0; box-shadow: 0 0 0 3px rgba(232,54,143,.14); }

/* ---- checkouts ---- */
.sa-checkouts { display: grid; gap: .8rem; }
.sa-checkout { border-radius: .8rem; background: #fffafd; border: 1px solid rgba(232,54,143,.1); padding: .9rem 1.1rem; }
.sa-checkout header { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.sa-checkout header strong { font-weight: 800; }
.sa-checkout header span { color: #7a6570; font-weight: 700; font-size: .85rem; }
.sa-checkout pre { margin: 0; white-space: pre-wrap; font-family: ui-monospace, monospace; font-size: .82rem; color: #5c4a53; background: #fff; padding: .7rem .9rem; border-radius: .6rem; border: 1px solid rgba(232,54,143,.1); }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .sa-body { grid-template-columns: 1fr; }
  .sa-sidebar { position: fixed; z-index: 60; width: 15rem; transform: translateX(-105%); transition: transform var(--dur-base) var(--ease-out); }
  .sa-nav-toggle:checked ~ .sa-sidebar { transform: none; }
  .sa-burger { display: inline-flex; }
  .sa-grid, .sa-steps-guide, .sa-field-2 { grid-template-columns: 1fr; }
  .sa-stat-row { grid-template-columns: 1fr 1fr; }
  .sa-progress li span { display: none; }
}

.store-nav-actions {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  border: 1px solid rgba(244,154,193,.55);
  border-radius: 999px;
  background: #fff7fb;
  padding: .25rem;
  box-shadow: 0 8px 18px rgba(232,54,143,.08);
}

.language-selector {
  display: inline-flex;
}

.language-selector select {
  height: 2.25rem;
  min-width: 6.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent-strong);
  color: var(--accent-strong);
  cursor: pointer;
  font: inherit;
  font-size: .8rem;
  font-weight: 900;
  outline: 0;
  padding: 0 2rem 0 .85rem;
  color: white;
  box-shadow: 0 6px 14px rgba(232,54,143,.18);
}

.language-selector select:focus-visible {
  box-shadow: 0 0 0 3px rgba(232,54,143,.14);
}

.nav-icon {
  height: 1.35rem;
  width: 1.35rem;
}

.nav-text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  border-radius: 999px;
  color: var(--accent-strong);
  font-size: .78rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 .8rem;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}

.nav-text-link:hover,
.nav-text-link:focus-visible {
  background: #fdeff5;
  outline: 0;
}

.store-admin-actions {
  margin-top: 1rem;
}

.store-admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.store-admin-form-grid label,
.store-admin-stack label {
  display: grid;
  gap: .35rem;
  color: var(--accent-strong);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.store-admin-check-row {
  align-content: center;
  grid-template-columns: auto 1fr;
}

.store-admin-checkbox {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--accent-strong);
}

.store-admin-error,
.store-admin-danger button {
  color: #b91c1c;
}

.store-admin-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: .75rem;
}

.store-admin-image-grid figure {
  margin: 0;
  border: 1px solid rgba(232,54,143,.1);
  border-radius: .75rem;
  background: #fffafd;
  padding: .75rem;
}

.store-admin-image-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.store-admin-image-grid figcaption {
  color: #777;
  font-size: .8rem;
  font-weight: 800;
}

.store-admin-stack {
  display: grid;
  gap: 1rem;
}

.store-admin-danger {
  margin-top: 1rem;
}

.store-admin-danger button,
.store-admin-image-grid button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-weight: 900;
  padding: 0;
}

.store-admin-checkouts article {
  border: 1px solid rgba(232,54,143,.1);
  border-radius: .75rem;
  background: #fffafd;
  padding: 1rem;
}

.store-admin-checkouts header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--accent-strong);
  font-weight: 900;
}

.store-admin-checkouts pre {
  margin: .75rem 0 0;
  white-space: pre-wrap;
  font: 700 .9rem/1.5 "Poppins", system-ui, sans-serif;
}

.store-admin-empty {
  margin: 0;
  color: #777;
  font-weight: 800;
}

@media (max-width: 640px) {
  .hero-panel {
    min-height: 36vh;
    padding: 2.5rem 1rem 3rem;
  }

  .hero-title {
    font-size: clamp(2.8rem, 16vw, 4.5rem);
  }

  .hero-script {
    font-size: clamp(1.8rem, 9vw, 2.8rem);
  }

  /* Category shortcuts become a swipeable chip row instead of a cramped
     3-up grid — scales to any number of categories, feels native to touch. */
  /* Wrap the category circles and centre them, so every category is fully
     visible on small screens instead of being cut off by a horizontal scroll.
     Stretch across the grid track (parent uses justify-items:center) so the
     wrapped rows centre cleanly and can never overflow the page. */
  .hero-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-self: stretch;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    gap: .85rem 1.1rem;
  }

  .hero-categories .category-shortcut {
    flex: 0 0 auto;
    width: clamp(4rem, 19vw, 5.5rem);
  }

  .hero-categories .category-shortcut img {
    width: 100%;
  }

  .hero-categories .category-shortcut span {
    font-size: .78rem;
  }

  /* Featured shelf becomes a swipeable carousel: one card front-and-center
     with the next peeking in, instead of a long vertical stack. */
  .featured-grid {
    display: flex;
    gap: 1rem;
    margin: 0 -1rem;
    padding: .5rem 1rem 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .featured-grid::-webkit-scrollbar {
    display: none;
  }

  .featured-grid .product-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
    min-height: 27rem;
  }

  .featured-grid .product-photo-wrap {
    height: 20.5rem;
  }

  /* Catalog grids (category/search/home) go 2-up with a compact card built
     for a small screen, not a shrunk desktop card. */
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
  }

  .product-grid .product-card {
    min-height: 0;
  }

  .product-grid .product-photo-wrap {
    height: 9.5rem;
    margin: .5rem .5rem 0;
    border-radius: .8rem;
  }

  .product-grid .wishlist-btn {
    height: 1.9rem;
    width: 1.9rem;
    right: .4rem;
    top: .4rem;
  }

  .product-grid .wishlist-btn svg {
    height: .95rem;
    width: .95rem;
  }

  .product-grid .quick-view-btn,
  .product-grid .quick-add-btn {
    /* Photo is .5rem margin + 9.5rem tall = its bottom sits at 10rem. With a
       2.1rem button, top:7.3rem lands it just inside that bottom edge instead
       of hanging past the image into the title. */
    top: 7.3rem;
    height: 2.1rem;
    width: 2.1rem;
    border-width: 2px;
  }

  .product-grid .quick-view-btn {
    left: .5rem;
  }

  .product-grid .quick-add-btn {
    right: .5rem;
  }

  .product-grid .quick-view-btn svg,
  .product-grid .quick-add-btn svg {
    height: .9rem;
    width: .9rem;
  }

  .product-grid .new-badge,
  .product-grid .sold-badge,
  .product-grid .discount-badge {
    left: .4rem;
    top: .4rem;
    padding: .3rem .55rem;
    font-size: .62rem;
  }

  .product-grid .new-badge + .discount-badge,
  .product-grid .discount-badge:nth-of-type(2) {
    top: 1.75rem;
  }

  .product-grid .product-card .px-4 {
    padding-left: .55rem;
    padding-right: .55rem;
  }

  .product-grid .product-card .pt-3 {
    padding-top: .55rem;
  }

  .product-grid .product-card .pb-4 {
    padding-bottom: .65rem;
  }

  .product-grid .product-name {
    min-height: 0;
    font-size: 1.05rem;
  }

  .product-grid .price-pill {
    font-size: .75rem;
    padding: .18rem .6rem;
  }

  /* --- Compact two-row mobile header: branding row, then a search bar
     that's always visible (not hidden behind an icon) — the same pattern
     any normal shopping app uses, since search is a primary action. --- */
  .site-header-inner {
    padding: .55rem .75rem .6rem;
    gap: .4rem .5rem;
  }

  .logo-wordmark {
    order: 1;
    font-size: .78rem;
    align-self: center;
  }

  .store-nav-actions {
    order: 2;
    gap: .15rem;
    padding: .15rem;
  }

  .site-search {
    order: 3;
    flex-basis: 100%;
  }

  .help-link {
    display: none;
  }

  /* Wishlist/cart now live in the bottom tab bar. */
  .store-nav-actions [data-wishlist-open],
  .store-nav-actions [data-cart-open] {
    display: none;
  }

  .store-nav-actions > button,
  .store-nav-actions > a {
    height: 2.35rem;
    width: 2.35rem;
  }

  .language-selector select {
    min-width: 0;
    width: 3.6rem;
    padding: 0 1.3rem 0 .55rem;
    font-size: .7rem;
  }
}

@media (max-width: 900px) {
  .store-admin-body {
    display: block;
  }

  .store-admin-sidebar {
    position: static;
    height: auto;
  }

  .store-admin-nav,
  .store-admin-stats,
  .store-admin-grid,
  .store-admin-form-grid {
    grid-template-columns: 1fr;
  }

  .store-admin-table article,
  .store-admin-row {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .cart-drawer {
    max-width: none;
  }
}

/* Touch devices (phones + tablets): no real hover. A tap briefly triggers
   :hover / :has(:hover), so we force every product interaction back to its
   RESTING transform — with !important, so specificity never matters and nothing
   shifts, scales, un-centres, or flies off-frame on tap. `hover: none` OR
   `pointer: coarse` covers every touch device; a touchscreen laptop keeps a
   fine primary pointer, so real PCs still get the hover effects. */
@media (hover: none), (pointer: coarse) {
  .product-card:hover,
  .product-card:has(.wishlist-btn:hover, .quick-view-btn:hover, .quick-add-btn:hover) {
    transform: none !important;
  }

  /* Catalog photos stay centred. (The old rule reset them to `none`, which
     dropped the centring translate and threw the photo into a corner — that
     was the "weird offset" on tap.) */
  .product-card:hover .product-photo,
  .product-card:has(.wishlist-btn:hover, .quick-view-btn:hover, .quick-add-btn:hover) .product-photo {
    transform: translate(-50%, -50%) !important;
  }

  .product-card:hover .new-badge,
  .product-card:hover .discount-badge {
    transform: none !important;
  }

  .product-card:hover .product-photo-wrap::after,
  .product-card:has(.wishlist-btn:hover, .quick-view-btn:hover, .quick-add-btn:hover) .product-photo-wrap::after {
    opacity: 0 !important;
  }

  /* Featured photos on phones (<640) have no tilt — just keep them centred. */
  .featured-grid .product-card:hover .product-photo,
  .featured-grid .product-card:has(.wishlist-btn:hover, .quick-view-btn:hover, .quick-add-btn:hover) .product-photo {
    transform: translateX(-50%) !important;
  }
  .featured-grid .product-card:hover .product-photo-wrap,
  .featured-grid .product-card:has(.wishlist-btn:hover, .quick-view-btn:hover, .quick-add-btn:hover) .product-photo-wrap {
    transform: none !important;
    box-shadow: 0 14px 28px rgba(232, 54, 143, .16) !important;
  }

  /* Buttons / misc controls: no tap-stuck growth. */
  .quick-add-btn:hover { transform: none !important; box-shadow: 0 8px 18px rgba(232,54,143,.4); }
  .wishlist-btn:hover { transform: none !important; }
  .category-shortcut:hover img {
    transform: none !important;
    box-shadow: inset 0 8px 18px rgba(255,255,255,.45), 0 12px 24px rgba(232,54,143,.16);
  }
  .site-search-btn:hover { transform: translateY(-50%) !important; }
  .quickview-close:hover { transform: none !important; }
  .site-footer-socials a:hover { transform: none !important; background: rgba(255,255,255,.16); color: white; }
  .site-footer-newsletter-form button:hover { transform: none !important; }

  /* Quick View can't be hover-revealed on touch, so show it by default. */
  .quick-view-btn {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* Tablets (>=640) DO show the featured collage tilt at rest, so freeze the
     featured photo + frame to those rotated resting values instead of flat. */
  @media (min-width: 640px) {
    .featured-grid .product-card:nth-child(1):hover .product-photo,
    .featured-grid .product-card:nth-child(1):has(.wishlist-btn:hover, .quick-view-btn:hover, .quick-add-btn:hover) .product-photo {
      transform: translateX(-50%) translateY(-.6rem) rotate(8deg) !important;
    }
    .featured-grid .product-card:nth-child(2):hover .product-photo,
    .featured-grid .product-card:nth-child(2):has(.wishlist-btn:hover, .quick-view-btn:hover, .quick-add-btn:hover) .product-photo {
      transform: translateX(-50%) translateY(-.6rem) rotate(-8deg) !important;
    }
    .featured-grid .product-card:nth-child(1):hover .product-photo-wrap,
    .featured-grid .product-card:nth-child(1):has(.wishlist-btn:hover, .quick-view-btn:hover, .quick-add-btn:hover) .product-photo-wrap {
      transform: rotate(-7deg) !important;
    }
    .featured-grid .product-card:nth-child(2):hover .product-photo-wrap,
    .featured-grid .product-card:nth-child(2):has(.wishlist-btn:hover, .quick-view-btn:hover, .quick-add-btn:hover) .product-photo-wrap {
      transform: rotate(7deg) !important;
    }
  }
}

/* =========================================================================
   Mobile-only components. Desktop layout above is untouched — everything
   below either starts hidden (revealed only under max-width:640px) or lives
   entirely inside that media query, so nothing here can affect >640px.
   ========================================================================= */

.mobile-tabbar,
.pdp-sticky-bar,
.drawer-handle {
  display: none;
}

@media (max-width: 640px) {
  /* --- Bottom tab bar: primary nav moved into the thumb zone --- */
  .mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-top: 1px solid rgba(244, 154, 193, .35);
    box-shadow: 0 -8px 24px rgba(232, 54, 143, .1);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .mobile-tab {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    border: 0;
    background: none;
    padding: .5rem 0 .45rem;
    color: #c98aab;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .01em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .mobile-tab svg {
    height: 1.4rem;
    width: 1.4rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }

  .mobile-tab.is-active {
    color: var(--accent-strong);
  }

  .mobile-tab-icon {
    position: relative;
    display: grid;
    place-items: center;
  }

  .mobile-tab-badge {
    position: absolute;
    right: -.5rem;
    top: -.3rem;
    display: grid;
    min-width: 1.1rem;
    height: 1.1rem;
    place-items: center;
    border-radius: 999px;
    background: var(--accent-strong);
    padding: 0 .25rem;
    color: white;
    font-size: .6rem;
    font-weight: 900;
  }

  body {
    padding-bottom: calc(3.9rem + env(safe-area-inset-bottom, 0));
  }

  .pdp-page {
    padding-bottom: 0;
  }

  .pdp-page .mobile-tabbar {
    display: none;
  }

  /* --- PDP sticky add-to-cart bar replaces the tab bar on product pages --- */
  .pdp-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: .65rem;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-top: 1px solid rgba(244, 154, 193, .35);
    box-shadow: 0 -8px 24px rgba(232, 54, 143, .12);
    padding: .65rem .85rem calc(.65rem + env(safe-area-inset-bottom, 0));
  }

  .pdp-sticky-price {
    margin: 0;
    flex-shrink: 0;
  }

  .pdp-sticky-form {
    flex: 1 1 auto;
    min-width: 0;
  }

  .pdp-sticky-add {
    width: 100%;
    border: 0;
    border-radius: 999px;
    background: var(--accent-strong);
    color: white;
    padding: .95rem 1rem;
    font-size: .85rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .03em;
    box-shadow: 0 10px 20px rgba(232, 54, 143, .3);
  }

  .pdp-sticky-add:disabled {
    background: #d1d5db;
  }

  .pdp-sticky-wishlist {
    position: static;
    flex-shrink: 0;
    height: 3rem;
    width: 3rem;
    border: 2px solid var(--accent-soft);
  }

  .pdp-section {
    padding-bottom: 6.5rem;
  }

  /* --- Cart & wishlist drawers become bottom sheets: easier to reach with
     a thumb than a side panel, and reads as native to the platform. --- */
  .cart-drawer,
  .wishlist-drawer {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1.5rem 1.5rem 0 0;
    transform: translateY(100%);
    transition: transform var(--dur-base) var(--ease-out);
  }

  .cart-open [data-cart-drawer] {
    transform: translateY(0);
  }

  .wishlist-open [data-wishlist-drawer] {
    transform: translateY(0);
  }

  .drawer-handle {
    display: block;
    flex-shrink: 0;
    width: 2.5rem;
    height: .3rem;
    margin: .65rem auto .1rem;
    border-radius: 999px;
    background: var(--accent-soft);
  }

  /* --- Quick View becomes a bottom sheet too, matching the cart/wishlist
     pattern instead of a floating centered card. --- */
  .quickview-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .quickview-modal {
    width: 100%;
    max-width: none;
    max-height: 90dvh;
    border-radius: 1.5rem 1.5rem 0 0;
    transform: translateY(100%);
    transition: transform var(--dur-base) var(--ease-out);
  }

  .quickview-overlay.is-open .quickview-modal {
    transform: translateY(0);
  }

  .quickview-media {
    min-height: 0;
    padding: 1.5rem 1.5rem 0;
  }

  .quickview-media img {
    max-height: 16rem;
  }

  .quickview-body {
    padding: 1.5rem;
  }

  /* --- Footer collapses into an accordion; brand + newsletter stay put. --- */
  .site-footer-col:not(.site-footer-newsletter) h3 {
    position: relative;
    margin: 0;
    padding: 1rem 1.5rem 1rem 0;
    cursor: pointer;
  }

  .site-footer-col:not(.site-footer-newsletter) h3::after {
    content: "";
    position: absolute;
    right: .15rem;
    top: 50%;
    width: .55rem;
    height: .55rem;
    border-right: .16rem solid currentColor;
    border-bottom: .16rem solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .site-footer-col.is-open:not(.site-footer-newsletter) h3::after {
    transform: translateY(-35%) rotate(225deg);
  }

  .site-footer-col:not(.site-footer-newsletter) ul {
    display: none;
    padding-bottom: 1rem;
  }

  .site-footer-col.is-open:not(.site-footer-newsletter) ul {
    display: grid;
  }

  .site-footer-col:not(.site-footer-newsletter) {
    border-bottom: 1px solid rgba(255, 255, 255, .18);
  }

  .site-footer-grid {
    row-gap: 0;
    column-gap: 1.5rem;
  }

  .site-footer-brand {
    padding-bottom: 1.5rem;
  }

  .site-footer-newsletter {
    padding-top: 1.5rem;
  }

  .site-footer-newsletter-form {
    flex-direction: column;
  }

  .site-footer-newsletter-form button {
    width: 100%;
    padding: .85rem 1.25rem;
  }

  /* Bottom sheets now cover most of the screen, so the toast moves up top
     to stay clear of the cart/wishlist/quick-view sheet footers. */
  [data-toast] {
    left: 1rem;
    right: 1rem;
    bottom: auto;
    top: calc(.75rem + env(safe-area-inset-top, 0));
    transform: none;
    width: auto;
    text-align: center;
  }
}

/* ============================================================
   Admin wizard polish + PDP fit + quick-view carousel (2026-07-13)
   ============================================================ */
/* [hidden] buttons must truly hide (the .sa-btn display would override it) */
.sa-btn[hidden] { display: none !important; }

/* clickable cover thumbnails in the upload preview */
.sa-thumb { cursor: pointer; }
.sa-cover-hint { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(232,54,143,.92); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-align: center; padding: .22rem; opacity: 0; transition: opacity .15s; }
.sa-thumb:hover .sa-cover-hint { opacity: 1; }
.sa-thumb.is-cover .sa-cover-hint { display: none; }

/* PDP: show the whole product image and keep the hero within the viewport */
.pdp-gallery { aspect-ratio: auto; height: clamp(18rem, 58vh, 34rem); }
.pdp-gallery .swiper-slide img,
.pdp-gallery .swiper-slide video { object-fit: contain; background: #fff; }
@media (min-width: 1024px) {
  .pdp-section { padding-top: 1.25rem; padding-bottom: 1.5rem; gap: 2.5rem; align-items: center; }
  .pdp-info h1 { font-size: 2.6rem; margin-top: .75rem; }
}

/* Quick-view carousel (multiple images, prev/next + dots) */
.qv-carousel { position: relative; width: 100%; }
.qv-viewport { overflow: hidden; width: 100%; }
.qv-track { display: flex; transition: transform .35s var(--ease-out); }
.qv-slide { flex: 0 0 100%; display: grid; place-items: center; }
.qv-slide img { max-height: 22rem; width: 100%; object-fit: contain; }
.qv-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: grid; place-items: center; height: 2.4rem; width: 2.4rem; border: 0; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--accent-strong); cursor: pointer; box-shadow: var(--shadow-md); }
.qv-nav svg { height: 1.1rem; width: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.qv-nav:hover { background: var(--accent-strong); color: #fff; }
.qv-prev { left: .6rem; } .qv-next { right: .6rem; }
.qv-dots { position: absolute; left: 0; right: 0; bottom: .6rem; display: flex; justify-content: center; gap: .4rem; z-index: 3; }
.qv-dot { height: .5rem; width: .5rem; border-radius: 999px; border: 0; background: rgba(232,54,143,.3); cursor: pointer; padding: 0; }
.qv-dot.is-active { background: var(--accent-strong); transform: scale(1.25); }