/* =====================================================================================
   LOLA'S CHARMS - COLOUR SCHEME
   Change these and the whole site follows (a full browser reload is needed after
   editing a variable - VS's hot CSS push only re-applies the rule being typed).
   ===================================================================================== */
:root {
  /* Ground */
  --page: #faf6f1;            /* warm ivory page background */
  --surface: #ffffff;         /* cards, panels, main nav */
  --surface-alt: #f4ece4;     /* soft blush panels, table stripes */
  --line: #e8ddd4;            /* hairlines and borders */
  --line-strong: #d7c7bb;

  /* Type */
  --ink: #2b2226;             /* body text */
  --ink-soft: #6f5f66;        /* secondary text */
  --muted: #9a8b91;           /* placeholders, captions */

  /* Brand */
  --brand: #7a2e4e;           /* deep berry - primary buttons, links, headings */
  --brand-dark: #5a1f39;      /* hover state, utility bar */
  --brand-soft: #f3e2ea;      /* tinted backgrounds behind brand elements */
  --accent: #c9906f;          /* rose gold - highlights, Contact button, prices */
  --accent-soft: #f5e3d8;
  --gold: #d4b26a;            /* stars, sparkle details */

  /* Utility bar (dark strip at the very top) */
  --utility-bg: #3a1f2e;
  --utility-ink: #f6e9ee;

  /* Feedback */
  --success: #4f7f5b;
  --success-soft: #e6f0e8;
  --warning: #b8792a;
  --warning-soft: #fbf0dc;
  --danger: #b23a48;
  --danger-soft: #f9e3e6;

  /* Shape & shadow */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 6px 18px rgba(58, 31, 46, .06);
  --shadow-md: 0 14px 34px rgba(58, 31, 46, .10);

  /* Type faces */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* =====================================================================================
   BASE
   ===================================================================================== */
html { font-size: 16px; min-height: 100%; overflow-y: scroll; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
}
.site-main { flex: 1 0 auto; }
h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: var(--ink); letter-spacing: .005em; }
h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.35rem; }
a { color: var(--brand); text-decoration: none; }
a:hover, a:focus { color: var(--brand-dark); text-decoration: underline; text-underline-offset: .15em; }
p { margin: 0 0 1rem; }
img { max-width: 100%; height: auto; }
.eyebrow { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem; }
.lead { font-size: 1.15rem; color: var(--ink-soft); }
.container { max-width: 1200px; }
.skip-link { position: absolute; left: -999px; top: 0; padding: .5rem 1rem; background: var(--brand); color: #fff; z-index: 1000; }
.skip-link:focus { left: .5rem; top: .5rem; }
::selection { background: var(--brand-soft); }

/* Buttons */
.btn { border-radius: 999px; font-weight: 500; font-family: var(--font-body); padding: .55rem 1.35rem; letter-spacing: .01em; transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; }
.btn-sm { padding: .38rem 1rem; font-size: .88rem; }
.btn-lg { padding: .8rem 1.8rem; font-size: 1.05rem; }
.btn-primary, .btn-primary:focus { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover, .btn-primary:active { background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-accent, .btn-accent:focus { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover { background: #b57a5a; border-color: #b57a5a; color: #fff; }
.btn-outline-primary { color: var(--brand); border-color: var(--brand); background: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-outline-secondary { color: var(--ink-soft); border-color: var(--line-strong); background: #fff; }
.btn-outline-secondary:hover { background: var(--surface-alt); color: var(--ink); border-color: var(--line-strong); }
.btn-light { background: #fff; border-color: #fff; color: var(--brand); }
.btn-link { color: var(--brand); text-decoration: underline; padding: 0; }
.form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--line-strong); padding: .6rem .85rem; font-family: var(--font-body); }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem var(--brand-soft); }
.form-label { font-weight: 500; color: var(--ink); margin-bottom: .3rem; }
.form-text { color: var(--muted); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.text-validation, .field-validation-error { color: var(--danger); font-size: .85rem; }
.input-validation-error { border-color: var(--danger) !important; }

/* =====================================================================================
   HEADER: utility bar
   ===================================================================================== */
.utility-nav { background: var(--utility-bg); color: var(--utility-ink); min-height: 2.4rem; font-size: .82rem; }
.utility-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.4rem; }
.utility-nav__service { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1.35rem; }
.utility-nav__item { display: inline-flex; align-items: center; gap: .45rem; color: var(--utility-ink); opacity: .92; }
.utility-nav__item:hover { color: #fff; opacity: 1; text-decoration: none; }
.utility-nav__item .bi { color: var(--accent); font-size: .95rem; }
.utility-nav__links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.utility-nav .nav-link, .utility-nav .nav-link-button { color: var(--utility-ink); padding: .35rem .7rem; font-size: .82rem; border-radius: 6px; background: none; border: 0; font-family: var(--font-body); }
.utility-nav .nav-link:hover, .utility-nav .nav-link:focus, .utility-nav .nav-link.active, .utility-nav .nav-link-button:hover { color: #fff; background: rgba(255, 255, 255, .1); text-decoration: none; }
.utility-nav .nav-item { position: relative; }
.utility-nav .nav-item:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 30%; height: 40%; width: 1px; background: rgba(255, 255, 255, .18); }
.nav-logout { margin: 0; }
.utility-basket { position: relative; }
.basket-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; margin-left: .3rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 600; }

/* =====================================================================================
   HEADER: main navigation (logo left, search + contact + links right)
   ===================================================================================== */
.main-nav { background: var(--surface); border-bottom: 1px solid var(--line); padding: .7rem 0; min-height: 5.4rem; box-shadow: 0 4px 22px rgba(58, 31, 46, .04); }
.navbar-brand { display: flex; align-items: center; gap: .75rem; color: var(--ink); }
.navbar-brand:hover { text-decoration: none; color: var(--brand); }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.brand-mark img { width: 30px; height: 30px; }
.brand-wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.brand-wordmark strong { font-family: var(--font-display); font-weight: 600; font-size: 1.85rem; color: var(--brand); letter-spacing: .01em; }
.brand-wordmark small { font-size: .72rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-top: .2rem; }
.main-nav__stack { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; padding-top: .35rem; }
.main-nav__actions { display: flex; align-items: stretch; gap: .5rem; }
.main-nav__search { display: flex; align-items: center; width: 320px; max-width: 100%; overflow: hidden; background: #fff; border: 1px solid var(--line-strong); border-radius: 999px; }
.main-nav__search input { flex: 1; min-width: 0; border: 0; outline: 0; padding: .35rem .95rem; font-size: .88rem; background: transparent; font-family: var(--font-body); }
.main-nav__search button { border: 0; background: transparent; padding: .25rem .85rem; color: var(--brand); }
.main-nav__search button:hover { color: var(--accent); }
.main-nav__contact { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem 1.15rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: .85rem; font-weight: 600; border: 1px solid var(--accent); white-space: nowrap; }
.main-nav__contact:hover, .main-nav__contact.active { background: var(--brand); border-color: var(--brand); color: #fff; text-decoration: none; }
.main-nav__links { align-items: center; gap: .1rem; }
.main-nav__links .nav-link { color: var(--ink); font-weight: 500; font-size: .95rem; padding: .35rem .8rem; border-radius: 999px; position: relative; }
.main-nav__links .nav-link:hover, .main-nav__links .nav-link:focus { color: var(--brand); background: var(--brand-soft); text-decoration: none; }
.main-nav__links .nav-link.active { color: var(--brand); }
.main-nav__links .nav-link.active::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .05rem; height: 2px; background: var(--accent); border-radius: 2px; }
.main-nav__links .nav-link--highlight { color: var(--brand); }
.main-nav__links .nav-link--highlight .bi { color: var(--accent); }
.main-nav__dropdown { min-width: 13.5rem; margin-top: .3rem; padding: .4rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.main-nav__dropdown--wide { min-width: 16rem; }
.main-nav__dropdown .dropdown-item { padding: .45rem .8rem; border-radius: var(--radius-sm); font-size: .92rem; color: var(--ink); }
.main-nav__dropdown .dropdown-item:hover, .main-nav__dropdown .dropdown-item.active { background: var(--brand-soft); color: var(--brand); }
.main-nav__dropdown .dropdown-divider { border-color: var(--line); }
.navbar-toggler { border-color: var(--line-strong); }
.main-nav__account { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 0 .25rem; border-top: 1px solid var(--line); margin-top: .75rem; }
.main-nav__account-form { margin: 0; }
.main-nav__account-link { display: inline-block; padding: .35rem .9rem; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--brand); font-size: .9rem; font-family: var(--font-body); }
.announcement { background: var(--brand-soft); color: var(--brand-dark); font-size: .85rem; text-align: center; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.announcement .bi { color: var(--accent); }

@media (max-width: 991.98px) {
  .main-nav__stack { align-items: stretch; padding-top: .75rem; }
  .main-nav__actions { flex-direction: column; }
  .main-nav__search { width: 100%; }
  .main-nav__links { flex-direction: column; align-items: stretch; }
  .main-nav__links .nav-link { border-radius: var(--radius-sm); }
  .main-nav__links .nav-link.active::after { display: none; }
  .main-nav__dropdown { box-shadow: none; border: 0; padding-left: 1rem; }
  .brand-wordmark strong { font-size: 1.5rem; }
  .brand-wordmark small { display: none; }
}

/* =====================================================================================
   FLASH / ALERTS
   ===================================================================================== */
.flash { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 0; padding: .8rem 1rem; border-radius: var(--radius-md); border: 1px solid; font-size: .95rem; }
.flash--success { background: var(--success-soft); border-color: #bfd7c5; color: #2d5a3a; }
.flash--danger { background: var(--danger-soft); border-color: #e7b9c0; color: #7a2430; }
.flash--warning { background: var(--warning-soft); border-color: #ecd3a3; color: #7a4d10; }
.alert { border-radius: var(--radius-md); }

/* =====================================================================================
   SECTIONS & HERO
   ===================================================================================== */
.section { padding: 3.5rem 0; }
.section--tight { padding: 2.25rem 0; }
.section--alt { background: var(--surface-alt); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.section__head h2 { margin: 0; }
.section__head p { margin: .25rem 0 0; color: var(--ink-soft); }
.section__more { white-space: nowrap; font-weight: 500; }
.hero { padding: 3.5rem 0 3rem; background: radial-gradient(1200px 500px at 85% 0%, var(--accent-soft), transparent 60%), var(--page); }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.hero h1 { margin-bottom: 1rem; }
.hero h1 em { font-style: italic; color: var(--brand); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.hero__points { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: .92rem; }
.hero__points .bi { color: var(--success); margin-right: .3rem; }
.hero__media { position: relative; }
.hero__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.hero__note { position: absolute; left: -1rem; bottom: 1.5rem; max-width: 260px; background: #fff; border-radius: var(--radius-md); padding: .9rem 1.1rem; box-shadow: var(--shadow-md); font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--brand-dark); border-left: 4px solid var(--accent); }
.hero__note small { display: block; font-family: var(--font-body); font-style: normal; font-size: .75rem; color: var(--muted); margin-top: .35rem; }
@media (max-width: 991.98px) { .hero__grid { grid-template-columns: 1fr; } .hero__note { position: static; max-width: none; margin-top: 1rem; } }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem 1.5rem; box-shadow: var(--shadow-sm); position: relative; }
.step__num { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--brand); color: #fff; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin-bottom: .9rem; }
.step h3 { margin-bottom: .4rem; }
.step p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 767.98px) { .steps { grid-template-columns: 1fr; } }

.occasion-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.occasion-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1.4rem .75rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); text-align: center; font-weight: 500; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.occasion-tile .bi { font-size: 1.7rem; color: var(--accent); }
.occasion-tile:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); color: var(--brand); }
@media (max-width: 991.98px) { .occasion-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .occasion-grid { grid-template-columns: repeat(2, 1fr); } }

.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.category-tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow-sm); }
.category-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .3s ease; }
.category-tile:hover img { transform: scale(1.04); }
.category-tile__label { display: block; padding: .8rem 1rem; font-weight: 500; }
.category-tile__label small { display: block; color: var(--muted); font-weight: 400; font-size: .8rem; }
.category-tile:hover { text-decoration: none; color: var(--brand); }
@media (max-width: 991.98px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }

.promo-band { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.promo { display: flex; flex-direction: column; justify-content: flex-end; min-height: 260px; padding: 2rem; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(160deg, var(--brand), var(--brand-dark)); position: relative; overflow: hidden; }
.promo--accent { background: linear-gradient(160deg, var(--accent), #a86b57); }
.promo h3 { color: #fff; font-size: 1.9rem; margin-bottom: .4rem; }
.promo p { color: rgba(255, 255, 255, .85); margin-bottom: 1rem; max-width: 34ch; }
.promo .btn { align-self: flex-start; }
.promo::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 24px solid rgba(255, 255, 255, .12); }
@media (max-width: 767.98px) { .promo-band { grid-template-columns: 1fr; } }

.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.testimonial { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; }
.testimonial__stars { color: var(--gold); margin-bottom: .5rem; }
.testimonial blockquote { font-family: var(--font-display); font-size: 1.2rem; font-style: italic; margin: 0 0 .75rem; color: var(--ink); }
.testimonial cite { font-style: normal; font-size: .85rem; color: var(--muted); }
@media (max-width: 767.98px) { .testimonials { grid-template-columns: 1fr; } }

/* =====================================================================================
   PRODUCT CARDS & LISTINGS
   ===================================================================================== */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.product-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1199.98px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px) { .product-grid, .product-grid--3 { grid-template-columns: repeat(2, 1fr); gap: .9rem; } }
@media (max-width: 420px) { .product-grid { grid-template-columns: 1fr; } }
.product-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.product-card--out { opacity: .75; }
.product-card__media { position: relative; display: block; background: var(--surface-alt); }
.product-card__media img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.product-card__badge { position: absolute; top: .75rem; left: .75rem; padding: .2rem .65rem; border-radius: 999px; background: var(--brand); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.product-card__badge--sale { background: var(--accent); }
.product-card__badge--warn { background: var(--warning); }
.product-card__badge--muted { background: var(--muted); }
.product-card__body { display: flex; flex-direction: column; flex: 1; padding: .9rem 1rem 1rem; }
.product-card__kicker { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.product-card__title { font-family: var(--font-body); font-size: 1rem; font-weight: 500; margin: .2rem 0 .3rem; line-height: 1.3; }
.product-card__title a { color: var(--ink); }
.product-card__title a:hover { color: var(--brand); text-decoration: none; }
.product-card__blurb { font-size: .84rem; color: var(--ink-soft); margin: 0 0 .75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.product-card__price { font-weight: 600; color: var(--brand-dark); font-size: 1.05rem; }
.product-card__price s { color: var(--muted); font-weight: 400; font-size: .85rem; margin-right: .3rem; }
.product-card__add { margin: 0; }

.page-head { padding: 2.5rem 0 1.5rem; }
.page-head h1 { margin-bottom: .35rem; }
.page-head p { color: var(--ink-soft); max-width: 68ch; margin: 0; }
.breadcrumb { font-size: .82rem; margin-bottom: .75rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb-item.active { color: var(--ink-soft); }

.shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 2rem; align-items: start; }
@media (max-width: 991.98px) { .shop-layout { grid-template-columns: 1fr; } }
.filters { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; position: sticky; top: 1rem; }
.filters h3 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-body); color: var(--muted); margin: 1.1rem 0 .5rem; }
.filters h3:first-child { margin-top: 0; }
.filters ul { list-style: none; margin: 0; padding: 0; }
.filters li a { display: flex; justify-content: space-between; padding: .3rem .5rem; border-radius: var(--radius-sm); color: var(--ink); font-size: .92rem; }
.filters li a:hover, .filters li a.active { background: var(--brand-soft); color: var(--brand); text-decoration: none; }
.filters li a span { color: var(--muted); font-size: .8rem; }
.shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.shop-toolbar__count { color: var(--ink-soft); font-size: .92rem; }
.shop-toolbar form { display: flex; align-items: center; gap: .5rem; }
.pagination { gap: .25rem; }
.page-link { border-radius: 999px !important; border-color: var(--line); color: var(--brand); }
.page-item.active .page-link { background: var(--brand); border-color: var(--brand); }
.empty { text-align: center; padding: 3rem 1rem; color: var(--ink-soft); background: #fff; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }
.empty .bi { font-size: 2.5rem; color: var(--accent); display: block; margin-bottom: .5rem; }

/* Product details */
.product { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; padding: 1rem 0 3rem; }
@media (max-width: 991.98px) { .product { grid-template-columns: 1fr; gap: 1.5rem; } }
.product__media { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; position: sticky; top: 1rem; }
.product__media img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.product__kicker { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.product h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin: .2rem 0 .5rem; }
.product__price { font-size: 1.7rem; font-weight: 600; color: var(--brand-dark); margin: .5rem 0 1rem; }
.product__price s { font-size: 1rem; color: var(--muted); font-weight: 400; margin-right: .5rem; }
.product__stock { font-size: .88rem; margin-bottom: 1rem; }
.product__stock--ok { color: var(--success); }
.product__stock--low { color: var(--warning); }
.product__stock--out { color: var(--danger); }
.product__buy { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; margin: 1rem 0; box-shadow: var(--shadow-sm); }
.size-picker { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.size-picker input { position: absolute; opacity: 0; }
.size-picker label { padding: .4rem .9rem; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; font-size: .9rem; background: #fff; }
.size-picker input:checked + label { background: var(--brand); border-color: var(--brand); color: #fff; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: #fff; }
.qty button { border: 0; background: transparent; width: 2.3rem; height: 2.3rem; color: var(--brand); font-size: 1.1rem; }
.qty input { width: 3rem; border: 0; text-align: center; font-weight: 500; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.buy-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.product__meta { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1rem; font-size: .9rem; }
.product__meta li { display: flex; gap: .5rem; color: var(--ink-soft); }
.product__meta .bi { color: var(--accent); }
.product__desc { color: var(--ink); }
.product__desc h2 { font-size: 1.4rem; margin-top: 1.25rem; }
.gift-promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 1.25rem 0; }
.gift-promise div { background: var(--surface-alt); border-radius: var(--radius-md); padding: .8rem; font-size: .82rem; color: var(--ink-soft); text-align: center; }
.gift-promise .bi { display: block; font-size: 1.3rem; color: var(--brand); margin-bottom: .25rem; }
@media (max-width: 575.98px) { .gift-promise { grid-template-columns: 1fr; } .product__meta { grid-template-columns: 1fr; } }
.stars { color: var(--gold); letter-spacing: .05em; white-space: nowrap; }
.stars--muted { color: var(--line-strong); }
.review { border-top: 1px solid var(--line); padding: 1rem 0; }
.review__head { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; color: var(--muted); }
.review h4 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin: .3rem 0; }
.review p { margin: 0; color: var(--ink-soft); }
.review__reply { margin-top: .6rem; padding: .6rem .9rem; background: var(--brand-soft); border-radius: var(--radius-sm); font-size: .88rem; }
.rating-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem; }
.rating-input input { position: absolute; opacity: 0; }
.rating-input label { font-size: 1.6rem; color: var(--line-strong); cursor: pointer; }
.rating-input input:checked ~ label, .rating-input label:hover, .rating-input label:hover ~ label { color: var(--gold); }

/* Birthstones */
.birthstone-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
@media (max-width: 991.98px) { .birthstone-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .birthstone-grid { grid-template-columns: repeat(2, 1fr); } }
.birthstone { display: block; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1rem .5rem; color: var(--ink); }
.birthstone:hover, .birthstone.active { border-color: var(--brand); box-shadow: var(--shadow-md); text-decoration: none; color: var(--brand); }
.birthstone__gem { width: 42px; height: 42px; margin: 0 auto .5rem; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; transform: rotate(45deg); box-shadow: inset -6px -6px 12px rgba(0, 0, 0, .18), inset 6px 6px 12px rgba(255, 255, 255, .6); border: 1px solid rgba(0, 0, 0, .1); }
.birthstone strong { display: block; font-size: .95rem; }
.birthstone small { color: var(--muted); }
.birthstone-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; margin-top: 2rem; }
@media (max-width: 767.98px) { .birthstone-detail { grid-template-columns: 1fr; } }

/* =====================================================================================
   GIFT BUILDER
   ===================================================================================== */
.builder { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }
@media (max-width: 991.98px) { .builder { grid-template-columns: 1fr; } }
.builder-steps { display: flex; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.builder-steps span { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .85rem; color: var(--ink-soft); }
.builder-steps span.active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); font-weight: 500; }
.builder-steps b { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--brand); color: #fff; font-size: .75rem; }
.builder h2 { font-size: 1.6rem; margin-bottom: .25rem; }
.builder__hint { color: var(--ink-soft); font-size: .92rem; margin-bottom: 1rem; }
.pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
@media (max-width: 767.98px) { .pick-grid { grid-template-columns: repeat(2, 1fr); } }
.pick { position: relative; background: #fff; border: 2px solid var(--line); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; }
.pick:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.pick.selected { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.pick img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--surface-alt); }
.pick__body { padding: .55rem .7rem .7rem; }
.pick__name { display: block; font-size: .85rem; font-weight: 500; line-height: 1.25; }
.pick__price { font-size: .85rem; color: var(--brand-dark); font-weight: 600; }
.pick__check { position: absolute; top: .5rem; right: .5rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--brand); color: #fff; display: none; align-items: center; justify-content: center; font-size: .8rem; }
.pick.selected .pick__check { display: inline-flex; }
.pick__count { position: absolute; top: .5rem; left: .5rem; padding: .1rem .5rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 600; display: none; }
.pick.selected .pick__count { display: inline-block; }
.pick-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.pick-tabs button { border: 1px solid var(--line-strong); background: #fff; border-radius: 999px; padding: .3rem .85rem; font-size: .85rem; color: var(--ink); }
.pick-tabs button.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.builder-summary { position: sticky; top: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-md); }
.builder-summary h3 { font-size: 1.3rem; margin-bottom: .75rem; }
.builder-summary__preview { display: flex; align-items: center; justify-content: center; min-height: 120px; background: var(--surface-alt); border-radius: var(--radius-md); margin-bottom: 1rem; padding: .75rem; flex-wrap: wrap; gap: .35rem; }
.builder-summary__preview img { width: 54px; height: 54px; border-radius: 50%; border: 2px solid #fff; box-shadow: var(--shadow-sm); background: #fff; }
.builder-summary__preview .bracelet-ring { width: 84px; height: 84px; border-radius: 50%; }
.builder-summary ul { list-style: none; margin: 0 0 .75rem; padding: 0; font-size: .9rem; }
.builder-summary li { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem 0; border-bottom: 1px dashed var(--line); }
.builder-summary li button { border: 0; background: transparent; color: var(--muted); padding: 0 .25rem; }
.builder-summary__total { display: flex; justify-content: space-between; font-weight: 600; font-size: 1.1rem; margin: .5rem 0 1rem; }
.builder-summary__limit { font-size: .82rem; color: var(--muted); margin-bottom: .75rem; }
.for-banner { display: flex; align-items: center; gap: .75rem; background: var(--brand-soft); border-radius: var(--radius-md); padding: .75rem 1rem; margin-bottom: 1.25rem; font-size: .92rem; }
.for-banner .bi { color: var(--brand); font-size: 1.3rem; }

/* =====================================================================================
   BASKET & CHECKOUT
   ===================================================================================== */
.basket-layout { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; align-items: start; }
@media (max-width: 991.98px) { .basket-layout { grid-template-columns: 1fr; } }
.basket-group { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: 1rem; overflow: hidden; }
.basket-group__head { display: flex; justify-content: space-between; align-items: center; padding: .7rem 1.1rem; background: var(--brand-soft); color: var(--brand-dark); font-weight: 500; font-size: .92rem; }
.basket-group__head form { margin: 0; }
.basket-line { display: grid; grid-template-columns: 84px 1fr auto auto; gap: 1rem; align-items: center; padding: .9rem 1.1rem; border-top: 1px solid var(--line); }
.basket-group .basket-line:first-child { border-top: 0; }
.basket-line img { width: 84px; height: 84px; border-radius: var(--radius-md); object-fit: cover; background: var(--surface-alt); }
.basket-line__name { font-weight: 500; }
.basket-line__name small { display: block; color: var(--muted); font-weight: 400; }
.basket-line__price { font-weight: 600; color: var(--brand-dark); text-align: right; min-width: 5rem; }
.basket-line__remove { border: 0; background: transparent; color: var(--muted); font-size: .85rem; padding: 0; }
.basket-line__remove:hover { color: var(--danger); }
.basket-line form { margin: 0; }
@media (max-width: 575.98px) { .basket-line { grid-template-columns: 64px 1fr; } .basket-line img { width: 64px; height: 64px; } .basket-line__price { text-align: left; } }
.summary-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-md); position: sticky; top: 1rem; }
.summary-card h3 { font-size: 1.3rem; margin-bottom: .75rem; }
.summary-card dl { display: grid; grid-template-columns: 1fr auto; gap: .35rem .75rem; margin: 0 0 .75rem; font-size: .95rem; }
.summary-card dt { font-weight: 400; color: var(--ink-soft); }
.summary-card dd { margin: 0; text-align: right; }
.summary-card .summary-total { border-top: 1px solid var(--line); padding-top: .6rem; margin-top: .3rem; font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.summary-card .summary-total dd { color: var(--brand-dark); }
.summary-card .btn { width: 100%; }
.summary-nudge { font-size: .85rem; background: var(--accent-soft); border-radius: var(--radius-sm); padding: .5rem .75rem; margin-bottom: .75rem; color: #7a4a30; }
.discount-form { display: flex; gap: .4rem; margin: .5rem 0 .75rem; }
.discount-form input { flex: 1; text-transform: uppercase; }
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 2rem; align-items: start; }
@media (max-width: 991.98px) { .checkout-layout { grid-template-columns: 1fr; } }
.checkout-block { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.25rem; }
.checkout-block h2 { font-size: 1.45rem; margin-bottom: .25rem; display: flex; align-items: center; gap: .6rem; }
.checkout-block h2 .num { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--brand); color: #fff; font-family: var(--font-body); font-size: .9rem; }
.checkout-block > p { color: var(--ink-soft); font-size: .92rem; }
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
@media (max-width: 575.98px) { .choice-row { grid-template-columns: 1fr; } }
.choice { position: relative; display: block; border: 2px solid var(--line); border-radius: var(--radius-md); padding: .8rem 1rem .8rem 2.6rem; cursor: pointer; background: #fff; }
.choice input { position: absolute; left: 1rem; top: 1rem; }
.choice strong { display: block; }
.choice small { color: var(--muted); }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.wrap-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
@media (max-width: 767.98px) { .wrap-options { grid-template-columns: repeat(2, 1fr); } }
.wrap-option { position: relative; display: block; border: 2px solid var(--line); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; background: #fff; }
.wrap-option input { position: absolute; opacity: 0; }
.wrap-option img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--surface-alt); }
.wrap-option__body { padding: .55rem .7rem .7rem; font-size: .85rem; }
.wrap-option__body strong { display: block; font-weight: 500; }
.wrap-option__body span { color: var(--brand-dark); font-weight: 600; }
.wrap-option:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.wrap-option--none { display: flex; align-items: center; justify-content: center; min-height: 120px; color: var(--ink-soft); font-size: .9rem; text-align: center; padding: 1rem; }
.gift-note { position: relative; }
.gift-note textarea { font-family: var(--font-display); font-size: 1.15rem; font-style: italic; background: repeating-linear-gradient(transparent, transparent 31px, var(--line) 31px, var(--line) 32px); line-height: 32px; padding: 0 .85rem; min-height: 130px; }
.char-count { font-size: .8rem; color: var(--muted); text-align: right; }
.loved-picker { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.loved-picker button, .loved-picker a { border: 1px solid var(--line-strong); background: #fff; border-radius: 999px; padding: .35rem .9rem; font-size: .88rem; color: var(--ink); }
.loved-picker button:hover { border-color: var(--brand); color: var(--brand); }
.order-summary-lines { list-style: none; margin: 0 0 .75rem; padding: 0; }
.order-summary-lines li { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.order-summary-lines img { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--surface-alt); }
.order-summary-lines span { flex: 1; }
.order-summary-lines small { color: var(--muted); display: block; }
.confirmation { max-width: 760px; margin: 0 auto; text-align: center; padding: 3rem 0; }
.confirmation .bi-check2-circle { font-size: 3.5rem; color: var(--success); }
.confirmation__card { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; margin-top: 1.5rem; }
.timeline { list-style: none; padding: 0; margin: 1rem 0; display: flex; gap: 0; }
.timeline li { flex: 1; text-align: center; font-size: .78rem; color: var(--muted); position: relative; padding-top: 1.6rem; }
.timeline li::before { content: ""; position: absolute; top: .45rem; left: 0; right: 0; height: 2px; background: var(--line); }
.timeline li::after { content: ""; position: absolute; top: 0; left: 50%; width: 1rem; height: 1rem; margin-left: -.5rem; border-radius: 50%; background: #fff; border: 2px solid var(--line-strong); }
.timeline li.done { color: var(--brand); font-weight: 500; }
.timeline li.done::before { background: var(--brand); }
.timeline li.done::after { background: var(--brand); border-color: var(--brand); }
.timeline li:first-child::before { left: 50%; }
.timeline li:last-child::before { right: 50%; }

/* =====================================================================================
   ACCOUNT
   ===================================================================================== */
.account-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; align-items: start; padding-bottom: 3rem; }
@media (max-width: 991.98px) { .account-layout { grid-template-columns: 1fr; } }
.account-nav { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: .6rem; }
.account-nav a { display: flex; align-items: center; gap: .6rem; padding: .55rem .85rem; border-radius: var(--radius-sm); color: var(--ink); font-size: .95rem; }
.account-nav a:hover, .account-nav a.active { background: var(--brand-soft); color: var(--brand); text-decoration: none; }
.account-nav .bi { color: var(--accent); }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 767.98px) { .card-grid { grid-template-columns: 1fr; } }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; }
.stat-card__label { font-size: .8rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.stat-card__value { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--brand-dark); line-height: 1.1; }
.stat-card__sub { font-size: .82rem; color: var(--ink-soft); }
.loved-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.loved-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.loved-card h3 { margin: 0; font-size: 1.3rem; }
.loved-card__rel { color: var(--muted); font-size: .85rem; }
.loved-card__bday { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .7rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-size: .82rem; font-weight: 500; }
.loved-card__bday--soon { background: var(--accent-soft); color: #7a4a30; }
.loved-card address { font-size: .88rem; color: var(--ink-soft); margin: 0; }
.loved-card__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: auto; padding-top: .5rem; }
.table-soft { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.table-soft table { margin: 0; }
.table-soft th { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: var(--surface-alt); border-bottom: 0; }
.table-soft td { vertical-align: middle; border-color: var(--line); }
.status { display: inline-block; padding: .18rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.status--pending { background: var(--warning-soft); color: #7a4d10; }
.status--paid { background: #e3ecf7; color: #2a4f80; }
.status--wrapping { background: var(--brand-soft); color: var(--brand-dark); }
.status--dispatched { background: var(--accent-soft); color: #7a4a30; }
.status--delivered { background: var(--success-soft); color: #2d5a3a; }
.status--cancelled, .status--refunded { background: var(--danger-soft); color: #7a2430; }

/* =====================================================================================
   CONTENT PAGES, CONTACT, IDENTITY
   ===================================================================================== */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.6rem; margin: 1.75rem 0 .5rem; }
.prose h3 { font-size: 1.2rem; margin: 1.25rem 0 .35rem; }
.prose ul { padding-left: 1.2rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; background: #fff; }
.prose th, .prose td { border: 1px solid var(--line); padding: .5rem .75rem; text-align: left; }
.prose th { background: var(--surface-alt); }
.content-hero { background: var(--surface-alt); padding: 3rem 0 2.5rem; margin-bottom: 2rem; }
.content-hero h1 { margin-bottom: .25rem; }
.content-hero p { color: var(--ink-soft); font-size: 1.1rem; margin: 0; }
.contact-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; }
@media (max-width: 991.98px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-aside { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; }
.contact-aside h3 { font-size: 1.2rem; }
.contact-aside p { color: var(--ink-soft); font-size: .92rem; }
.identity-panel { padding: 2.5rem 0; }
.identity-panel__card { max-width: 900px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); }
.identity-panel__card h1, .identity-panel__card h2 { font-size: 1.8rem; }
.identity-panel__card h3 { font-size: 1.2rem; }
.identity-panel__card .btn-primary, .identity-panel__card .btn-lg { border-radius: 999px; }
.identity-panel__card hr { border-color: var(--line); }

/* =====================================================================================
   FOOTER
   ===================================================================================== */
.site-footer { background: var(--utility-bg); color: var(--utility-ink); margin-top: 3rem; padding: 3rem 0 1.5rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 991.98px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h3 { font-family: var(--font-body); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .45rem; }
.site-footer a { color: var(--utility-ink); opacity: .88; }
.site-footer a:hover { opacity: 1; color: #fff; }
.site-footer p { color: rgba(246, 233, 238, .8); font-size: .92rem; max-width: 40ch; }
.navbar-brand--footer { margin-bottom: .75rem; }
.navbar-brand--footer .brand-mark { background: rgba(255, 255, 255, .1); }
.navbar-brand--footer .brand-mark img { filter: brightness(0) invert(1); }
.navbar-brand--footer .brand-wordmark strong { color: #fff; font-size: 1.5rem; }
.site-footer__address { font-style: normal; font-size: .85rem; color: rgba(246, 233, 238, .7); margin-bottom: 1rem; }
.newsletter label { display: block; font-size: .85rem; margin-bottom: .35rem; color: var(--utility-ink); }
.newsletter__row { display: flex; gap: .4rem; max-width: 360px; }
.newsletter input { flex: 1; min-width: 0; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; padding: .45rem .9rem; font-size: .9rem; }
.newsletter input::placeholder { color: rgba(255, 255, 255, .5); }
.newsletter .btn { background: var(--accent); border-color: var(--accent); }
.site-footer__payments { display: flex; align-items: center; gap: .7rem; margin-top: 1.25rem; font-size: .88rem; }
.site-footer__payments .bi { font-size: 1.5rem; color: var(--accent); }
.site-footer__payments small { color: rgba(246, 233, 238, .65); }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .8rem; color: rgba(246, 233, 238, .6); }

/* =====================================================================================
   ADMIN AREA (dark sidebar + light workspace)
   ===================================================================================== */
.admin-body { background: #f3eee9; }
.admin-shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
@media (max-width: 991.98px) { .admin-shell { grid-template-columns: 1fr; } }
.admin-side { background: var(--utility-bg); color: var(--utility-ink); padding: 1.25rem 1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
@media (max-width: 991.98px) { .admin-side { position: static; height: auto; } }
.admin-side__brand { display: flex; align-items: center; gap: .6rem; color: #fff; margin-bottom: 1.25rem; padding: 0 .5rem; }
.admin-side__brand:hover { color: #fff; text-decoration: none; }
.admin-side__brand img { filter: brightness(0) invert(1); width: 26px; }
.admin-side__brand strong { font-family: var(--font-display); font-size: 1.35rem; }
.admin-side__brand small { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.admin-side h4 { font-family: var(--font-body); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 233, 238, .5); margin: 1.1rem .6rem .35rem; }
.admin-side a.admin-link { display: flex; align-items: center; gap: .6rem; padding: .48rem .7rem; border-radius: var(--radius-sm); color: var(--utility-ink); font-size: .9rem; opacity: .9; }
.admin-side a.admin-link:hover { background: rgba(255, 255, 255, .08); text-decoration: none; opacity: 1; }
.admin-side a.admin-link.active { background: var(--brand); color: #fff; opacity: 1; }
.admin-side a.admin-link .bi { width: 1.1rem; text-align: center; color: var(--accent); }
.admin-side a.admin-link.active .bi { color: #fff; }
.admin-side .pill { margin-left: auto; background: var(--accent); color: #fff; font-size: .68rem; padding: .05rem .45rem; border-radius: 999px; font-weight: 600; }
.admin-main { padding: 1.5rem 2rem 3rem; min-width: 0; }
@media (max-width: 767.98px) { .admin-main { padding: 1rem; } }
.admin-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.admin-top h1 { font-size: 1.9rem; margin: 0; }
.admin-top p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.admin-top__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.admin-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem 1.4rem; margin-bottom: 1.25rem; }
.admin-card h2 { font-size: 1.25rem; margin-bottom: .75rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.admin-card h2 small { font-family: var(--font-body); font-size: .8rem; color: var(--muted); font-weight: 400; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 991.98px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1rem 1.2rem; border-top: 4px solid var(--brand); }
.kpi--accent { border-top-color: var(--accent); }
.kpi--gold { border-top-color: var(--gold); }
.kpi--success { border-top-color: var(--success); }
.kpi__label { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kpi__value { font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1.1; color: var(--ink); }
.kpi__delta { font-size: .8rem; color: var(--ink-soft); }
.kpi__delta.up { color: var(--success); }
.kpi__delta.down { color: var(--danger); }
.admin-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; }
.admin-grid-eq { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 991.98px) { .admin-grid-2, .admin-grid-eq { grid-template-columns: 1fr; } }
.admin-table { width: 100%; font-size: .9rem; margin: 0; }
.admin-table th { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); padding: .5rem .6rem; white-space: nowrap; }
.admin-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr:hover td { background: #fbf8f5; }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table img.thumb { width: 42px; height: 42px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-alt); }
.admin-filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: 1rem; }
.admin-filter .form-control, .admin-filter .form-select { min-width: 10rem; }
.admin-filter label { font-size: .75rem; color: var(--muted); display: block; margin-bottom: .15rem; }
.bar-list { list-style: none; margin: 0; padding: 0; }
.bar-list li { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; font-size: .88rem; padding: .3rem 0; }
.bar-list .bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--brand-soft); overflow: hidden; }
.bar-list .bar i { display: block; height: 100%; background: var(--brand); border-radius: 3px; }
.bar-list .bar.accent i { background: var(--accent); }
.admin-note { font-size: .85rem; color: var(--ink-soft); }
.admin-inline-form { display: inline; }
.admin-inline-form .form-control { width: 6rem; display: inline-block; padding: .25rem .5rem; font-size: .85rem; }
.chart-wrap { position: relative; height: 280px; }
.funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.funnel div { background: var(--brand-soft); border-radius: var(--radius-sm); padding: .75rem; text-align: center; }
.funnel strong { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--brand-dark); }
.funnel span { font-size: .78rem; color: var(--ink-soft); }
.funnel small { display: block; color: var(--muted); font-size: .72rem; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (max-width: 767.98px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-grid dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; font-size: .9rem; margin: 0; }
.detail-grid dt { color: var(--muted); font-weight: 400; }
.detail-grid dd { margin: 0; }
.gift-card-print { border: 2px dashed var(--line-strong); border-radius: var(--radius-md); padding: 1.25rem; background: #fffdf9; font-family: var(--font-display); font-size: 1.25rem; font-style: italic; color: var(--brand-dark); }
.history { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.history li { padding: .4rem 0; border-bottom: 1px dashed var(--line); display: flex; gap: .75rem; }
.history time { color: var(--muted); white-space: nowrap; }
.email-preview { border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; width: 100%; min-height: 520px; }
.admin-empty { padding: 2rem; text-align: center; color: var(--muted); }
@media print {
  .site-header, .site-footer, .admin-side, .admin-top__actions, .no-print { display: none !important; }
  .admin-shell { display: block; }
  .admin-main { padding: 0; }
  body { background: #fff; }
}

/* Admin sidebar: the logout control is a button, style it like the links. */
.admin-side button.admin-link { display: flex; align-items: center; gap: .6rem; padding: .48rem .7rem; border-radius: var(--radius-sm); color: var(--utility-ink); font-size: .9rem; opacity: .9; font-family: var(--font-body); }
.admin-side button.admin-link:hover { background: rgba(255, 255, 255, .08); opacity: 1; }
.admin-side button.admin-link .bi { width: 1.1rem; text-align: center; color: var(--accent); }
.admin-top__actions form { margin: 0; }