/* ============================================================
   The Beryl Edit — faithfully curated.
   Mobile-first static storefront. Feminine blush / rose palette.
   ============================================================ */
:root {
  --blush-50:  #fef8fa;
  --blush-100: #fce8f0;
  --blush-200: #f8d4e6;
  --blush-300: #f0b8d8;
  --pink-100:  #ffd6ea;
  --pink-200:  #ffb3d9;
  --rose-300:  #f5a3c7;
  --rose-400:  #e891c1;
  --rose-500:  #db6fa6;
  --rose-600:  #c8498b;
  --rose-700:  #b03b75;
  --mauve-600: #a85a99;
  --plum-900:  #5a3847;
  --ink:       #4a3540;
  --gold:      #d4b896;
  --green:     #5daa7f;
  --amber:     #e39e3d;
  --red:       #c85c52;
  --white:     #ffffff;
  --shadow:    0 12px 35px rgba(180, 59, 117, 0.12);
  --shadow-lg: 0 20px 50px rgba(180, 59, 117, 0.18);
  --radius:    20px;
  --font-script: "Great Vibes", "Snell Roundhand", cursive;
  --font-serif:  "Cormorant Garamond", Georgia, serif;
  --font-body:   "Jost", "Segoe UI", Arial, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: linear-gradient(135deg, var(--blush-50) 0%, #fde8f2 100%);
  line-height: 1.6;
  font-size: 16px;
}

/* ---------- loading screen ---------- */
@keyframes pulse-heart {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.8; }
}
@keyframes slide-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes bounce-hover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes scroll-hint {
  0%, 20% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.6; transform: translateY(8px); }
  100% { opacity: 0; transform: translateY(16px); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4); }
  50% { box-shadow: 0 8px 40px rgba(37, 211, 102, 0.7); }
}
@keyframes float-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes progress-fill {
  0% { width: 0; }
  90% { width: 90%; }
  100% { width: 100%; }
}
@keyframes fade-out-loader {
  0% { opacity: 1; pointer-events: auto; }
  95% { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}

.loader-veil {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #fde8f2 0%, #f8d4e6 50%, #f0b8d8 100%);
  display: grid;
  place-items: center;
  z-index: 999;
  animation: fade-out-loader 2.5s ease-out forwards;
}

.loader-container {
  text-align: center;
  animation: float-up 0.8s ease-out;
}

.loader-heart {
  font-size: 3.5rem;
  color: var(--rose-600);
  margin-bottom: 16px;
  animation: pulse-heart 1.8s ease-in-out infinite;
}

.loader-text {
  font-family: var(--font-script);
  font-size: 2.2rem;
  color: var(--rose-700);
  margin-bottom: 6px;
  letter-spacing: 1px;
}

.loader-tagline {
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--rose-500);
  margin-bottom: 24px;
  opacity: 0.9;
}

.loader-progress {
  width: 140px;
  height: 3px;
  background: rgba(219, 111, 166, 0.2);
  border-radius: 999px;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(74, 53, 64, 0.1);
}

.loader-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--rose-500), var(--pink-200), var(--rose-500));
  border-radius: 999px;
  animation: progress-fill 2.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  box-shadow: 0 0 12px rgba(219, 111, 166, 0.6);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
.wrap { width: min(1180px, 92%); margin: 0 auto; }

/* ---------- announcement bar ---------- */
.announce {
  background: var(--rose-600);
  color: var(--white);
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  padding: 8px 12px;
}
.announce span { opacity: 0.55; margin: 0 8px; }

/* ---------- header ---------- */
/* Anchor targets clear the sticky header. Without this every nav link parks the
   section heading behind the header: about 120px of it on a phone, where the nav
   wraps to two rows. app.js keeps --header-h equal to the real rendered height. */
:root { --header-h: 0px; }
section[id] { scroll-margin-top: calc(var(--header-h, 0px) + 16px); }

header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 246, 248, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--blush-200);
}
.brand-lockup { text-align: center; padding: 14px 0 6px; position: relative; }
.brand-name {
  font-family: var(--font-script);
  font-size: clamp(2.1rem, 6vw, 2.9rem);
  color: var(--rose-700);
  line-height: 1.1;
}
.brand-name .heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  margin-left: 4px;
  vertical-align: super;
  color: var(--rose-500);
}
.brand-name .heart svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  stroke: none;
}
.brand-tagline {
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rose-600); opacity: 0.85;
}
.cart-btn {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rose-700);
  padding: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s ease, transform 0.2s ease;
}
.cart-btn:hover {
  background: rgba(219, 111, 166, 0.1);
  transform: translateY(-50%) scale(1.1);
}
.cart-btn svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.cart-count {
  position: absolute; top: 2px; right: 0;
  background: var(--rose-600); color: #fff;
  font-size: 0.65rem; font-weight: 600;
  min-width: 17px; height: 17px; border-radius: 999px;
  display: grid; place-items: center; padding: 0 4px;
}
nav.main { border-top: 1px solid var(--blush-200); }
nav.main ul {
  display: flex; gap: 4px; justify-content: flex-start;
  overflow-x: auto; list-style: none;
  padding: 10px 4%; scrollbar-width: none;
}
nav.main ul::-webkit-scrollbar { display: none; }
/* small screens: wrap the nav instead of sideways-clipping tabs (Reviews was
   unreachable off-screen once revealed — 641px of tabs in a 390px viewport) */
@media (max-width: 700px) {
  nav.main ul { flex-wrap: wrap; justify-content: center; overflow-x: visible; row-gap: 2px; }
}
nav.main a {
  white-space: nowrap; font-size: 0.82rem; letter-spacing: 0.05em;
  padding: 6px 12px; border-radius: 999px; color: var(--ink);
}
nav.main a:hover, nav.main a.active { background: var(--blush-200); color: var(--rose-700); }

/* ---------- hero ---------- */
.hero {
  background: linear-gradient(165deg, #fce8f0 0%, #f5a3c7 40%, #e891c1 100%);
  padding: 48px 0 56px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 182, 217, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -15%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(248, 212, 230, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-grid {
  display: grid;
  gap: 28px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero-eyebrow {
  font-size: 0.75rem; letter-spacing: 0.3em; color: var(--rose-600);
  text-transform: uppercase; margin-bottom: 14px;
}
.hero h1 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.15; color: var(--plum-900);
}
.hero p.lead { margin: 16px 0 26px; color: #6b4c5c; max-width: 46ch; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rose-500); color: #fff;
  padding: 13px 26px; border-radius: 999px;
  font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background 0.2s ease, transform 0.15s ease;
  animation: fade-in 0.5s ease-out;
}
.btn:hover { background: var(--rose-600); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--rose-700); border: 1.5px solid var(--rose-400); }
.btn.ghost:hover { background: var(--blush-200); }
.btn.wa { background: #25d366; }
.btn.wa:hover { background: #1eb85a; }
.hero-img {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  aspect-ratio: 4 / 5; background: var(--blush-200);
}
.hero-img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 860px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
}

/* ---------- feature strip ---------- */
.features {
  background: linear-gradient(135deg, #ffffff 0%, #fce8f0 100%);
  border-block: 1px solid rgba(240, 184, 216, 0.3);
  box-shadow: inset 0 4px 16px rgba(240, 184, 216, 0.08);
}
.features .wrap {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px; padding-block: 26px;
}
.feature {
  text-align: center;
}
.feature .ico {
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rose-500);
  background: linear-gradient(135deg, rgba(219, 111, 166, 0.1), rgba(248, 212, 230, 0.1));
  border-radius: 50%;
  border: 2px solid rgba(219, 111, 166, 0.2);
  transition: transform 0.3s ease, background 0.3s ease;
}
.feature .ico svg {
  width: 24px;
  height: 24px;
  stroke: var(--rose-600);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature:hover .ico {
  transform: scale(1.1);
  background: linear-gradient(135deg, rgba(219, 111, 166, 0.2), rgba(248, 212, 230, 0.2));
  border-color: var(--rose-500);
}
.feature h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--plum-900);
  margin-top: 6px;
}
.feature p {
  font-size: 0.8rem;
  color: #8a6b7a;
}
@media (min-width: 860px) { .features .wrap { grid-template-columns: repeat(4, 1fr); } }

/* ---------- sections ---------- */
section.block {
  padding: 56px 0;
  background: linear-gradient(135deg, rgba(253, 248, 250, 0.5) 0%, rgba(254, 232, 242, 0.3) 100%);
}
section.alt {
  background: linear-gradient(135deg, #ffffff 0%, #fce8f0 100%);
  border-top: 1px solid rgba(240, 184, 216, 0.2);
  border-bottom: 1px solid rgba(240, 184, 216, 0.2);
}
.sec-eyebrow {
  font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--rose-500); text-align: center;
}
.sec-title {
  font-family: var(--font-serif); font-weight: 500; text-align: center;
  font-size: clamp(1.7rem, 5.5vw, 2.5rem); color: var(--plum-900); margin: 6px 0 8px;
}
.sec-sub { text-align: center; color: #8a6b7a; max-width: 60ch; margin: 0 auto 34px; font-size: 0.95rem; }

/* ---------- collections ---------- */
.collections { display: grid; gap: 20px; }
@media (min-width: 760px) { .collections { grid-template-columns: repeat(3, 1fr); } }
.collection-card {
  background: linear-gradient(135deg, #fce8f0 0%, #f8d4e6 100%);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(255, 182, 217, 0.3);
}
.collection-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.collection-card .ph {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blush-200), var(--pink-100));
  position: relative;
}
.collection-card .ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(240, 184, 216, 0.2) 0%, transparent 100%);
  z-index: 1;
}
.collection-card .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  z-index: 2;
}
.collection-card:hover .ph img { transform: scale(1.08); }
.collection-card .body { padding: 20px; text-align: center; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.collection-card h3 { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 600; color: var(--plum-900); }
.collection-card p { font-size: 0.88rem; color: #8a6b7a; flex: 1; }

/* ---------- product grid ---------- */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1020px) { .grid { grid-template-columns: repeat(4, 1fr); } }
.card {
  background: linear-gradient(135deg, #ffffff 0%, #fef8fa 100%);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(240, 184, 216, 0.2);
  animation: slide-in-up 0.6s ease-out backwards;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.card .ph {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--blush-100), var(--pink-100));
  overflow: hidden;
  position: relative;
}
.card .ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(240, 184, 216, 0.1) 100%);
  z-index: 1;
}
.card .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  z-index: 2;
}
.card:hover .ph img { transform: scale(1.06); }
.badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 999px; background: var(--rose-500); color: #fff;
}
.badge.stock-in { background: #e3f3ea; color: var(--green); position: static; display: inline-block; }
.badge.stock-low { background: #fbf0dc; color: var(--amber); position: static; display: inline-block; }
.badge.stock-out { background: #f7e3e1; color: var(--red); position: static; display: inline-block; }
.badge.stock-soon { background: var(--blush-200); color: var(--rose-700); position: static; display: inline-block; }
.card .body { padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card h3 { font-family: var(--font-serif); font-size: 1.12rem; font-weight: 600; line-height: 1.25; color: var(--plum-900); }
.card .price { font-size: 1rem; font-weight: 500; color: var(--ink); }
.card .price.tbc { font-size: 0.85rem; color: var(--rose-600); font-style: italic; }
.card .desc { font-size: 0.8rem; color: #8a6b7a; }
.swatches {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.swatches .lbl {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a6b7a;
  width: 100%;
  font-weight: 500;
}
.swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  outline: 2px solid var(--blush-300);
  outline-offset: 2px;
  transition: transform 0.2s ease, outline-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(74, 53, 64, 0.15);
}
.swatch:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 14px rgba(180, 59, 117, 0.25);
  outline-color: var(--rose-500);
}
.swatch.selected {
  outline: 3px solid var(--rose-600);
  outline-offset: 2px;
  transform: scale(1.15);
  box-shadow: 0 6px 20px rgba(180, 59, 117, 0.35);
}
.card .add {
  margin-top: auto;
  background: var(--blush-200); color: var(--rose-700);
  padding: 11px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}
.card .add:hover:not(:disabled) { background: var(--rose-500); color: #fff; }
.card .add:disabled { opacity: 0.5; cursor: not-allowed; }
.card .added-note { font-size: 0.72rem; color: var(--green); text-align: center; min-height: 1em; }

/* ---------- build your own ---------- */
.byo-steps { display: flex; justify-content: center; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
.byo-step-chip {
  font-size: 0.75rem; letter-spacing: 0.08em; padding: 8px 16px;
  border-radius: 999px; background: var(--blush-100); color: #8a6b7a;
}
.byo-step-chip.on { background: var(--rose-500); color: #fff; }
.byo-panel { display: none; }
.byo-panel.on { display: block; }
.byo-nav { display: flex; justify-content: space-between; margin-top: 26px; gap: 12px; }
.byo-pick-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .byo-pick-grid { grid-template-columns: repeat(4, 1fr); } }
.pick {
  background: var(--white); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow); border: 2px solid transparent; text-align: left;
  transition: border-color 0.15s ease;
}
.pick.selected { border-color: var(--rose-500); }
.pick .ph { aspect-ratio: 1 / 1; background: var(--blush-100); }
.pick .ph img { width: 100%; height: 100%; object-fit: cover; }
.pick .body { padding: 10px 12px 14px; }
.pick h4 { font-size: 0.85rem; font-weight: 500; line-height: 1.3; color: var(--plum-900); }
.pick .p { font-size: 0.75rem; color: var(--rose-600); margin-top: 3px; }
.pick .tick { font-size: 0.7rem; font-weight: 600; color: var(--green); min-height: 1em; display: block; margin-top: 4px; }
.byo-cat { font-family: var(--font-serif); font-size: 1.3rem; color: var(--rose-700); margin: 26px 0 12px; }
.byo-totalbar {
  position: sticky; bottom: 12px; margin-top: 30px;
  background: var(--plum-900); color: #fff;
  border-radius: 16px; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  box-shadow: 0 12px 30px rgba(74, 44, 61, 0.35);
}
.byo-totalbar .t { font-size: 0.85rem; opacity: 0.8; }
.byo-totalbar .amt { font-family: var(--font-serif); font-size: 1.5rem; }
.byo-totalbar .note { font-size: 0.7rem; opacity: 0.65; width: 100%; }
.review-list { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 20px; }
.review-list li {
  list-style: none; display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--blush-100); font-size: 0.9rem;
}
.review-list li:last-child { border-bottom: none; }
.review-list .r { color: var(--rose-600); white-space: nowrap; }

/* ---------- about / verse ---------- */
.about-grid {
  display: grid;
  gap: 30px;
  align-items: center;
}
@media (min-width: 860px) { .about-grid { grid-template-columns: 0.9fr 1.1fr; } }
.about-img {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 2px solid rgba(240, 184, 216, 0.3);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.about-img:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
}
.about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-copy p { margin-bottom: 14px; color: #6b4c5c; }

/* Founder section. Text only, on purpose: the brand mark already appears once in
   the About block above, and repeating it here read as a mistake. A narrower
   measure below the About grid gives the founder note its own rhythm. */
.founder-block {
  margin-top: 64px;
  padding-top: 44px;
  border-top: 1px solid rgba(240, 184, 216, 0.3);
  max-width: 74ch;
}
.founder-block .sec-title { margin-bottom: 10px; }
.founder-role {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--rose-700);
  margin-bottom: 22px;
}
.founder-body { columns: 1; }
@media (min-width: 900px) {
  .founder-body { columns: 2; column-gap: 42px; }
  .founder-body p:first-child { margin-top: 0; }
}
.founder-body p {
  margin-bottom: 14px;
  color: #6b4c5c;
  break-inside: avoid;
}
.founder-body em { color: var(--rose-700); font-style: italic; }
.founder-social { margin-top: 20px; }
.founder-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--rose-600);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 73, 139, 0.35);
  padding-bottom: 2px;
  transition: gap 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.founder-social a:hover {
  gap: 13px;
  color: var(--rose-700);
  border-color: var(--rose-700);
}
.founder-social a:focus-visible {
  outline: 3px solid var(--rose-500);
  outline-offset: 3px;
}

.verse {
  text-align: center; font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.2rem, 4vw, 1.6rem); color: var(--rose-700);
  padding: 40px 0 10px;
}
.verse small { display: block; font-size: 0.75rem; letter-spacing: 0.2em; font-style: normal; margin-top: 8px; color: #8a6b7a; }

/* ---------- contact ---------- */
.contact-cards { display: grid; gap: 20px; }
@media (min-width: 760px) { .contact-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1020px) { .contact-cards { grid-template-columns: repeat(4, 1fr); } }
.contact-card {
  background: linear-gradient(135deg, #ffffff 0%, #fef8fa 100%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 22px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(240, 184, 216, 0.25);
}
.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
/* The WhatsApp card is a real link, so it needs anchor resets and an affordance.
   The card itself is a wrapper rather than the anchor, because a tel: link cannot
   legally nest inside an anchor, and both belong on the same card: chat or call. */
.contact-card-wa { border-color: rgba(37, 211, 102, 0.35); }
.contact-card-wa:hover { border-color: rgba(37, 211, 102, 0.65); }
.contact-hit {
  display: block;
  text-decoration: none;
  color: inherit;
}
.contact-hit:focus-visible {
  outline: 3px solid var(--rose-500);
  outline-offset: 4px;
  border-radius: 10px;
}
.contact-cta {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a9c50;
}
.contact-hit:hover .contact-cta { text-decoration: underline; }

/* Email CTA. Rose rather than green, because green reads as WhatsApp. */
.contact-cta-link {
  color: var(--rose-600);
  text-decoration: none;
}
.contact-cta-link:hover { text-decoration: underline; }
.contact-cta-link:focus-visible {
  outline: 3px solid var(--rose-500);
  outline-offset: 3px;
}

/* The "or call" line, deliberately quieter than the primary CTA. */
.contact-alt {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(240, 184, 216, 0.45);
  font-size: 0.78rem;
  color: #8a6b7a;
}
.contact-alt a {
  color: #1a9c50;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.contact-alt a:hover { text-decoration: underline; }
.contact-alt a:focus-visible {
  outline: 3px solid var(--rose-500);
  outline-offset: 3px;
}
.contact-card .ico {
  font-size: 1.6rem;
  width: 60px;
  height: 60px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(219, 111, 166, 0.12), rgba(248, 212, 230, 0.12));
  border-radius: 50%;
  border: 2px solid rgba(219, 111, 166, 0.2);
  transition: transform 0.3s ease, background 0.3s ease;
}
.contact-card .ico svg {
  width: 32px;
  height: 32px;
  stroke: var(--rose-600);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-card:hover .ico {
  transform: scale(1.12);
  background: linear-gradient(135deg, rgba(219, 111, 166, 0.2), rgba(248, 212, 230, 0.2));
}
.contact-card h3 { font-family: var(--font-serif); font-size: 1.2rem; color: var(--plum-900); margin: 8px 0 4px; }
.contact-card p { font-size: 0.85rem; color: #8a6b7a; word-break: break-word; }

/* ---------- footer ---------- */
footer.site { background: var(--plum-900); color: #e9d3dc; margin-top: 20px; }
footer .wrap { padding: 44px 0 26px; display: grid; gap: 26px; }
@media (min-width: 860px) { footer .wrap { grid-template-columns: 1.2fr 1fr 1fr; } }
footer .brand-name { color: #f3c9d8; font-size: 2rem; }
footer h4 { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: #caa0b2; margin-bottom: 10px; }
footer ul { list-style: none; }
footer li { padding: 3px 0; font-size: 0.88rem; }
footer li a:hover { color: #fff; }
footer .legal {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 16px 0; font-size: 0.72rem; color: #b08a9c; text-align: center;
}

/* ---------- cart drawer ---------- */
.drawer-veil {
  position: fixed; inset: 0; background: rgba(74, 44, 61, 0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 90;
}
.drawer {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(420px, 94vw);
  background: var(--blush-50); z-index: 100;
  transform: translateX(105%); transition: transform 0.3s ease;
  display: flex; flex-direction: column;
  box-shadow: -14px 0 40px rgba(74, 44, 61, 0.25);
}
body.cart-open .drawer { transform: translateX(0); }
body.cart-open .drawer-veil { opacity: 1; pointer-events: auto; }
.drawer header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 20px; border-bottom: 1px solid var(--blush-200);
}
.drawer header h3 { font-family: var(--font-serif); font-size: 1.4rem; color: var(--plum-900); }
.drawer .items { flex: 0 1 auto; overflow-y: auto; padding: 12px 20px; }
.cart-line { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--blush-200); }
.cart-line img { width: 62px; height: 62px; object-fit: cover; border-radius: 10px; background: var(--blush-200); }
.cart-line .info { flex: 1; }
.cart-line h4 { font-size: 0.88rem; color: var(--plum-900); line-height: 1.3; }
.cart-line .variant { font-size: 0.72rem; color: #8a6b7a; }
.cart-line .lp { font-size: 0.82rem; color: var(--rose-600); margin-top: 2px; }
.cart-line .rm { font-size: 0.72rem; color: var(--red); margin-top: 4px; }
.qty { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; }
.qty button {
  width: 24px; height: 24px; border-radius: 999px; background: var(--blush-200);
  color: var(--rose-700); font-weight: 700; line-height: 1;
}
.drawer .foot { flex: 0 1 auto; overflow-y: auto; padding: 16px 20px 22px; border-top: 1px solid var(--blush-200); max-height: 50vh; }
.drawer .total-row { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 0.95rem; }
.drawer .total-row strong { font-family: var(--font-serif); font-size: 1.35rem; color: var(--plum-900); }
.drawer .tbc-note { font-size: 0.72rem; color: #8a6b7a; margin-bottom: 12px; }
.checkout-button {
  background: #25d366;
  color: #fff;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 16px;
  width: 100%;
  display: block;
}
.checkout-button:hover {
  background: #1eb85a;
}

/* ---------- scroll hint ---------- */
.scroll-hint {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 20px; font-size: 0.75rem; color: var(--rose-500);
  text-align: center; font-weight: 600; animation: scroll-hint 2s ease-in-out infinite;
  opacity: 0.7; transition: opacity 0.3s ease;
}
.scroll-hint.hidden { opacity: 0; pointer-events: none; }
.scroll-hint svg { animation: scroll-hint 2s ease-in-out infinite; }
.empty-cart { text-align: center; color: #8a6b7a; padding: 50px 10px; font-size: 0.9rem; }

/* ---------- floating WhatsApp ---------- */
.fab-wa {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25d366, #1eb85a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5);
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fab-wa:hover {
  transform: scale(1.1);
  box-shadow: 0 16px 40px rgba(37, 211, 102, 0.6);
}
.fab-wa:active {
  transform: scale(0.95);
}
.fab-wa svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(20px);
  background: var(--plum-900); color: #fff; font-size: 0.82rem;
  padding: 10px 20px; border-radius: 999px; opacity: 0; pointer-events: none;
  transition: all 0.25s ease; z-index: 120;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- coupons + customer fields (cart drawer) ---------- */
.coupon-row { display: flex; gap: 8px; margin-bottom: 6px; }
.coupon-row input, .cust-row input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 0.85rem;
  padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--blush-300);
  background: var(--white); color: var(--ink); outline: none;
}
.coupon-row input:focus, .cust-row input:focus { border-color: var(--rose-500); }
.coupon-apply {
  background: var(--blush-200); color: var(--rose-700); border-radius: 999px;
  padding: 0 18px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.coupon-apply:hover { background: var(--rose-500); color: #fff; }
.coupon-msg { font-size: 0.74rem; min-height: 1em; margin-bottom: 6px; }
.coupon-msg.ok { color: var(--green); }
.coupon-msg.err { color: var(--red); }
.discount-amt { color: var(--green); font-weight: 600; }
.cust-row { display: grid; gap: 8px; margin-bottom: 12px; }
.price s.was { color: #b08a9c; font-weight: 400; margin-right: 6px; }
.price .deal { color: var(--rose-600); }

/* ---------- delivery section (cart) ---------- */
.delivery-section { margin-bottom: 16px; padding: 14px 0; border-top: 1px solid var(--blush-200); border-bottom: 1px solid var(--blush-200); }
.delivery-section label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--plum-900); text-transform: uppercase; letter-spacing: 0.08em; margin: 12px 0 6px; }
.delivery-section select {
  width: 100%; padding: 11px 14px; border-radius: 8px; border: 1.5px solid var(--blush-300);
  font-family: inherit; font-size: 0.85rem; color: var(--ink); background: var(--white);
  appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a3540' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; padding-right: 36px; margin-bottom: 10px;
}
.delivery-section select:focus { border-color: var(--rose-500); outline: none; }
#courier-options { padding: 10px 0; margin-bottom: 8px; }
.courier-option { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; padding: 12px; border-radius: 8px; background: var(--blush-100); cursor: pointer; transition: background 0.2s; }
.courier-option:hover { background: var(--blush-200); }
.courier-option input[type="radio"] { margin-top: 3px; cursor: pointer; }
.courier-option label { flex: 1; cursor: pointer; font-size: 0.85rem; }
.courier-option .courier-name { display: block; font-weight: 700; color: var(--plum-900); font-size: 0.9rem; }
.courier-option .courier-details { display: block; font-size: 0.75rem; color: #8a6b7a; margin-top: 3px; }
.courier-option .courier-price { display: block; font-weight: 700; color: var(--rose-600); margin-top: 6px; font-size: 0.95rem; }

/* ---------- address fields (cart) ---------- */
.address-section { padding: 14px 0; margin-bottom: 14px; border-top: 1px solid var(--blush-200); border-bottom: 1px solid var(--blush-200); }
.address-section > p { font-size: 0.75rem; font-weight: 700; color: var(--plum-900); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
.address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .address-grid { grid-template-columns: 1fr; } }
.address-grid input {
  font-family: inherit; font-size: 0.85rem; padding: 11px 14px; border-radius: 8px;
  border: 1.5px solid var(--blush-300); background: var(--white); color: var(--ink); outline: none;
}
.address-grid input:focus { border-color: var(--rose-500); }

/* ---------- gift message (cart) ---------- */
.gift-message-section { padding: 14px 0; margin-bottom: 14px; border-bottom: 1px solid var(--blush-200); }
.gift-message-section label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.gift-message-section textarea {
  font-family: inherit; font-size: 0.85rem; padding: 11px 14px; border-radius: 8px;
  border: 1.5px solid var(--blush-300); background: var(--white); color: var(--ink);
}
.gift-message-section textarea:focus { border-color: var(--rose-500); outline: none; }

/* ---------- order receipt (cart, after ordering) ---------- */
/* The customer used to get a three-second toast and then WhatsApp opened. This stays on
   the page so there is something to read when they come back to the tab: what was
   ordered, and what happens next. */
.order-receipt {
  margin-top: 16px; padding: 18px 18px 16px; border-radius: 14px;
  background: #f2fbf5; border: 1.5px solid #cfe9d9;
}
.order-receipt .or-title {
  font-family: var(--font-serif); font-size: 1.15rem; color: var(--plum-900); margin-bottom: 6px;
}
.order-receipt p { font-size: 0.84rem; color: #3f5a4b; line-height: 1.6; }
.order-receipt .or-note { margin-top: 8px; font-size: 0.78rem; color: #5a7a68; }
.order-receipt .or-ref {
  display: inline-block; margin-top: 10px; padding: 5px 12px; border-radius: 999px;
  background: var(--white); border: 1px solid #cfe9d9; font-size: 0.76rem;
  letter-spacing: 0.06em; color: #3f5a4b;
}
.order-receipt .or-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px;
}
.order-receipt .or-copy {
  padding: 7px 14px; border-radius: 999px; border: 1px solid #cfe9d9; background: var(--white);
  color: #3f5a4b; font-family: inherit; font-size: 0.76rem; letter-spacing: 0.04em;
  cursor: pointer;
}
.order-receipt .or-copy:hover { background: #eaf7ef; }

/* ---------- FAQ section ---------- */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
@media (max-width: 768px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-item { border: 1.5px solid var(--blush-200); border-radius: var(--radius); overflow: hidden; }
.faq-toggle {
  width: 100%; padding: 16px; background: var(--white); border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; font-family: inherit;
  text-align: left; transition: background 0.2s;
}
.faq-toggle:hover { background: var(--blush-100); }
.faq-q { font-weight: 600; color: var(--plum-900); font-size: 0.95rem; }
.faq-icon {
  display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--blush-200); color: var(--rose-600); font-weight: 700;
  transition: transform 0.3s, background 0.2s;
}
.faq-toggle[aria-expanded="true"] .faq-icon { transform: rotate(45deg); background: var(--rose-500); color: white; }
.faq-answer { padding: 0 16px; max-height: 0; overflow: hidden; transition: all 0.3s ease; }
.faq-answer p { padding: 0 0 16px 0; color: #6b5766; font-size: 0.9rem; line-height: 1.6; }
.faq-item.open .faq-answer { max-height: 500px; padding: 16px; }

/* ---------- product search ---------- */
.search-bar { display: flex; gap: 8px; margin-bottom: 24px; }
.search-bar input {
  flex: 1; padding: 12px 16px; border-radius: var(--radius); border: 1.5px solid var(--blush-300);
  font-family: inherit; font-size: 0.95rem; background: var(--white); color: var(--ink); outline: none;
}
.search-bar input:focus { border-color: var(--rose-500); }
.search-bar input::placeholder { color: #b08a9c; }
.no-results { text-align: center; padding: 40px 20px; color: #8a6b7a; }

/* ---------- deal popup ---------- */
.deal-popup {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  background: rgba(90, 56, 71, 0.5);
  backdrop-filter: blur(4px);
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.deal-popup.show {
  opacity: 1;
  pointer-events: auto;
}
.deal-card {
  position: relative;
  width: min(400px, 92vw);
  background: linear-gradient(135deg, #fce8f0 0%, #f8d4e6 50%, #f0b8d8 100%);
  border-radius: 24px;
  box-shadow: 0 28px 70px rgba(180, 59, 117, 0.3);
  padding: 36px 30px 32px;
  text-align: center;
  transform: translateY(14px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 182, 217, 0.4);
}
.deal-popup.show .deal-card {
  transform: translateY(0) scale(1);
}
.deal-x { position: absolute; top: 12px; right: 14px; font-size: 1rem; color: var(--rose-700); }
.deal-eyebrow { font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--rose-500); margin-bottom: 8px; }
.deal-card h3 { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 600; color: var(--plum-900); margin-bottom: 8px; }
.deal-card p { font-size: 0.9rem; color: #6b4c5c; margin-bottom: 18px; }

/* ---------- admin panel ---------- */
body.admin { background: var(--blush-100); }
.admin-shell { width: min(1080px, 94%); margin: 0 auto; padding: 18px 0 60px; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0; flex-wrap: wrap; }
.admin-head .brand-name { font-size: 1.9rem; }
.admin-head .sub { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rose-600); }
.admin-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 6px 0 16px; scrollbar-width: none; }
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tabs button {
  white-space: nowrap; padding: 9px 18px; border-radius: 999px;
  background: var(--white); color: var(--ink); font-size: 0.82rem; box-shadow: var(--shadow);
}
.admin-tabs button.on { background: var(--rose-500); color: #fff; }
/* On a phone the five tabs total about 467px against a 367px screen, so the strip
   scrolled sideways and cut the last two labels mid-word with no sign they existed.
   Navigation should never be hidden, and five tabs fit on two rows, so wrap instead
   of scrolling at the widths where it would overflow. */
@media (max-width: 560px) {
  .admin-tabs { flex-wrap: wrap; overflow-x: visible; }
}
.admin-panel { display: none; }
.admin-panel.on { display: block; }
.admin-card {
  background: var(--white); border-radius: 16px; box-shadow: var(--shadow);
  padding: 16px; margin-bottom: 12px;
}
.admin-card h3 { font-family: var(--font-serif); font-size: 1.25rem; color: var(--plum-900); }
.admin-grid { display: grid; gap: 10px; }
@media (min-width: 760px) { .admin-grid.cols2 { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8a6b7a; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 0.9rem; padding: 9px 12px;
  border: 1.5px solid var(--blush-300); border-radius: 10px; background: var(--blush-50);
  color: var(--ink); outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--rose-500); }
.field.inline { flex-direction: row; align-items: center; gap: 8px; }
.field.inline label { text-transform: none; letter-spacing: 0; font-size: 0.85rem; color: var(--ink); }
.btn-admin {
  background: var(--rose-500); color: #fff; border-radius: 999px;
  padding: 10px 22px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.btn-admin:hover { background: var(--rose-600); }
.btn-admin.ghost { background: var(--blush-200); color: var(--rose-700); }
.btn-admin.danger { background: #f7e3e1; color: var(--red); }
.btn-admin:disabled { opacity: 0.5; cursor: wait; }
.btn-admin.small { padding: 7px 14px; font-size: 0.72rem; }
.admin-status { font-size: 0.78rem; min-height: 1.2em; margin-top: 8px; }
.admin-status.ok { color: var(--green); }
.admin-status.err { color: var(--red); }
.prod-row { display: grid; gap: 10px; }
.prod-row .top { display: flex; gap: 12px; align-items: center; }
.prod-row img { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; background: var(--blush-200); }
.prod-row .nm { flex: 1; min-width: 0; }
.prod-row .nm h4 { font-size: 0.92rem; color: var(--plum-900); }
.prod-row .nm .meta { font-size: 0.72rem; color: #8a6b7a; }
.pill { font-size: 0.66rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.pill.in { background: #e3f3ea; color: var(--green); }
.pill.low { background: #fbf0dc; color: var(--amber); }
.pill.out { background: #f7e3e1; color: var(--red); }
.pill.hidden { background: #eee; color: #888; }
.qty-ctl { display: inline-flex; align-items: center; gap: 8px; }
.qty-ctl button { width: 30px; height: 30px; border-radius: 999px; background: var(--blush-200); color: var(--rose-700); font-weight: 700; font-size: 1rem; }
.qty-ctl input { width: 60px; text-align: center; }
/* Three digits in a 640px box reads like an unfinished form, so the numeric fields in a
   product row are capped and the row is allowed to breathe. */
.prod-row .field input[type="number"] { max-width: 190px; }
.order-row { border-bottom: 1px solid var(--blush-200); padding: 12px 0; }
.order-row:last-child { border-bottom: none; }
.order-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; cursor: pointer; flex-wrap: wrap; }
.order-head .oid { font-weight: 600; color: var(--plum-900); font-size: 0.88rem; }
.order-head .when { font-size: 0.72rem; color: #8a6b7a; }
/* Emails are sent by the shop's own Google account, which allows 100 recipients a day.
   Running out is silent by default: orders keep saving and nobody gets told. This chip
   makes the remaining budget visible before it matters. */
.quota-chip {
  font-size: 0.68rem; letter-spacing: 0.04em; padding: 6px 12px; border-radius: 999px;
  background: #eef8f1; color: #3f6b52; border: 1px solid #d5ecdd; white-space: nowrap;
  font-family: inherit;
}
.quota-chip.low { background: #fdf4e3; color: #8a6320; border-color: #f3e2c2; }
.quota-chip.out { background: #fbe9e7; color: var(--red); border-color: #f3d3cf; }
.quota-chip .q-short { display: none; }
/* Below 560px the header cannot hold the full sentence plus three controls without
   wrapping Lock onto a line of its own, so the chip says "74 left" instead. */
@media (max-width: 560px) {
  .quota-chip .q-full { display: none; }
  .quota-chip .q-short { display: inline; }
  .quota-chip { padding: 6px 10px; }
}
/* The order detail used to be one run-on paragraph. Contact and delivery details now sit
   in a labelled table, so the address is readable at a glance instead of being hunted for
   in the WhatsApp thread. */
.order-meta { width: 100%; border-collapse: collapse; margin-top: 10px; }
.order-meta th {
  text-align: left; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #8a6b7a; font-weight: 600; padding: 3px 12px 3px 0; white-space: nowrap;
  vertical-align: top; width: 1%;
}
.order-meta td { font-size: 0.8rem; color: var(--ink); padding: 3px 0; }
/* A coupon row carries three things: the code, a line of detail, and a status pill.
   space-between spread them evenly, so the detail text drifted left or right depending
   on how long the code happened to be, and on a phone the pill wrapped onto its own
   line and sat on the left under the code. Keeping the code and its detail together on
   the left, with the pill held to the right, makes every row read the same way. */
.coupon-head { justify-content: flex-start; }
.coupon-head > span:last-child { margin-left: auto; }
@media (max-width: 560px) {
  /* The detail goes on its own line so a long code never squeezes it against the edge. */
  .coupon-head > span:nth-child(2) { order: 2; flex-basis: 100%; }
  .coupon-head > span:last-child { order: 1; }
}
.order-detail { display: none; padding-top: 10px; font-size: 0.85rem; }
.order-row.open .order-detail { display: block; }
.order-detail li { list-style: none; padding: 3px 0; color: #6b4c5c; }
.status-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.status-btns button { font-size: 0.7rem; padding: 6px 12px; border-radius: 999px; background: var(--blush-200); color: var(--rose-700); font-weight: 600; }
.status-btns button.cur { background: var(--plum-900); color: #fff; }
.login-wrap { min-height: 70dvh; display: grid; place-items: center; }
.login-card { width: min(400px, 92vw); background: var(--white); border-radius: 22px; box-shadow: var(--shadow); padding: 34px 26px; text-align: center; }
.login-card .brand-name { font-size: 2rem; }
.login-card p { font-size: 0.82rem; color: #8a6b7a; margin: 10px 0 18px; }
.login-card input { width: 100%; font-family: inherit; font-size: 1rem; padding: 12px 16px; border-radius: 999px; border: 1.5px solid var(--blush-300); margin-bottom: 10px; text-align: center; }
.login-card .fineprint { font-size: 0.68rem; color: #b08a9c; margin-top: 14px; }

/* ---------- reviews ---------- */
.reviews-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 40px; }
@media (min-width: 700px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card {
  background: linear-gradient(135deg, #ffffff 0%, #fef8fa 100%);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(240, 184, 216, 0.2);
}
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.review-card .rph {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--blush-200), var(--pink-100));
  overflow: hidden;
  position: relative;
}
.review-card .rph::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0%, rgba(240, 184, 216, 0.15) 100%);
  z-index: 1;
}
.review-card .rph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 2;
  transition: transform 0.4s ease;
}
.review-card:hover .rph img {
  transform: scale(1.05);
}
.review-card .rbody { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.review-card .rstars { color: var(--gold); font-size: 1rem; letter-spacing: 2px; }
.review-card .rtext { font-size: 0.9rem; color: #6b4c5c; font-style: italic; }
.review-card .rmeta { font-size: 0.74rem; color: #b08a9c; letter-spacing: 0.06em; }
.review-form-card {
  background: linear-gradient(135deg, #ffffff 0%, #fce8f0 100%);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 32px 26px;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid rgba(240, 184, 216, 0.3);
}
.review-form-card h3 { font-family: var(--font-serif); font-size: 1.5rem; color: var(--plum-900); }
.rf-sub { font-size: 0.85rem; color: #8a6b7a; }
.rf-stars { display: flex; justify-content: center; gap: 6px; }
.rf-stars button { font-size: 1.9rem; color: var(--blush-300); transition: transform 0.12s ease, color 0.12s ease; line-height: 1; }
.rf-stars button.lit { color: var(--gold); }
.rf-stars button:hover { transform: scale(1.15); }
.review-form-card input[type="text"], .review-form-card textarea {
  font-family: inherit; font-size: 0.9rem; padding: 11px 14px;
  border: 1.5px solid var(--blush-300); border-radius: 12px; background: var(--blush-50);
  color: var(--ink); outline: none; width: 100%; resize: vertical;
}
.review-form-card input:focus, .review-form-card textarea:focus { border-color: var(--rose-500); }
.rf-textwrap { position: relative; }
.rf-count { position: absolute; right: 10px; bottom: 8px; font-size: 0.68rem; color: #b08a9c; }
.rf-photo {
  display: block; border: 1.5px dashed var(--rose-400); border-radius: 12px;
  padding: 14px; font-size: 0.85rem; color: var(--rose-600); cursor: pointer;
}
.rf-photo:hover { background: var(--blush-100); }
#rf-preview { max-height: 180px; border-radius: 12px; margin: 0 auto; }
.rf-consent { font-size: 0.72rem; color: #b08a9c; }
.rf-status { font-size: 0.82rem; min-height: 1.2em; }
.rf-status.ok { color: var(--green); }
.rf-status.err { color: var(--red); }
.reviews-empty { text-align: center; color: #8a6b7a; font-size: 0.9rem; padding: 10px 0 30px; grid-column: 1 / -1; }

/* ---------- admin: reviews ---------- */
.review-admin-row { display: flex; gap: 12px; align-items: flex-start; }
.review-admin-row img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--blush-200); flex-shrink: 0; }
.review-admin-row .noimg {
  width: 64px; height: 64px; border-radius: 10px; background: var(--blush-200);
  display: grid; place-items: center; color: var(--rose-400); flex-shrink: 0; font-size: 1.2rem;
}
.review-admin-row .rinfo { flex: 1; min-width: 0; }
.review-admin-row .rinfo h4 { font-size: 0.9rem; color: var(--plum-900); }
.review-admin-row .rinfo .rstars { color: var(--gold); font-size: 0.8rem; }
.review-admin-row .rinfo p { font-size: 0.8rem; color: #6b4c5c; margin-top: 2px; }

/* ---------- copy-email button + contact grid ---------- */
.copy-email {
  font-family: inherit; font-size: 0.9rem; font-weight: 500; color: var(--rose-600);
  border-bottom: 1.5px dashed var(--rose-400); padding: 1px 2px;
  transition: color 0.15s ease, border-color 0.15s ease; cursor: copy;
}
.copy-email:hover, .copy-email:focus-visible { color: var(--rose-700); border-color: var(--rose-600); }
.copy-email:focus-visible { outline: 2px solid var(--rose-500); outline-offset: 2px; border-radius: 4px; }
@media (min-width: 760px) and (max-width: 1019px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .contact-cards { grid-template-columns: repeat(4, 1fr); } }

/* ---------- MyServicePro attribution ---------- */
.msp-credit {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  color: #d8b3c2; font-size: 0.72rem;
}
.msp-credit:hover { color: #fff; }
.msp-credit strong { font-weight: 600; }
.msp-chip {
  display: inline-grid; place-items: center;
  background: rgba(255, 255, 255, 0.92); border-radius: 8px;
  padding: 3px; line-height: 0; vertical-align: middle;
}
.msp-chip img { border-radius: 5px; }
.msp-popup .deal-eyebrow { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- per-item customise groups (hamper cards) ---------- */
.customise-group { flex-direction: column; align-items: flex-start; gap: 6px; }
.customise-group .choice-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.choice-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 0.7rem; color: var(--ink);
  background: var(--blush-100); border: 1.5px solid var(--blush-300);
  border-radius: 999px; padding: 4px 10px 4px 5px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.choice-chip .swatch { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; }
.choice-chip:hover { border-color: var(--rose-400); }
.choice-chip.selected {
  border-color: var(--rose-600); background: var(--white);
  box-shadow: 0 0 0 1px var(--rose-600);
}