/* ==========================================================================
   Base (framework defaults)
   ========================================================================== */
html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Below 768px the root drops to 14px, which makes Bootstrap's 1rem form
   controls render at 14px - and iOS Safari force-zooms the viewport on focus
   for anything under 16px, leaving the user pinched in. Pin every text-entry
   control to 16px on small screens so focus never moves the viewport.
   Uses an explicit px value (not rem) so it is immune to the root resize. */
@media (max-width: 767.98px) {
  .form-control,
  .form-select,
  .form-control-sm,
  .form-select-sm,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  textarea,
  select {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--brand-primary);
}

.form-check-input,
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--brand-primary);
}

.form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.form-select:focus,
.form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem rgba(138, 38, 164, 0.15);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ==========================================================================
   Brand tokens
   ========================================================================== */
:root {
  --brand-primary: #8A26A4;
  --brand-primary-dark: #48439F;
  --brand-accent: #B8721A;
  --brand-accent-light: #FFB955;
  --brand-bg: #F8F5FC;
  --brand-surface: #FFFFFF;
  --brand-fg: #211D36;
  --brand-muted: #6E6683;
  --brand-border: #E7E1F5;
  --brand-success: #2F6B3A;
  --brand-danger: #B3261E;
  --brand-danger-dark: #8C1D18;
  --brand-radius-sm: 6px;
  --brand-radius-md: 8px;
  --brand-radius-pill: 50px;
  --brand-shadow-soft: 2px 2px 10px rgba(33, 29, 54, 0.08);
  --brand-shadow-lift: 0 14px 28px rgba(72, 67, 159, 0.18);
  --brand-transition: 220ms ease-in-out;
  --font-heading: "Playfair Display", serif;
  --font-body: "Inter", sans-serif;
}

body {
  background-color: var(--brand-bg);
  color: var(--brand-fg);
  font-family: var(--font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main[role="main"] {
  flex: 1 0 auto;
}

.brand-footer {
  flex-shrink: 0;
}

h1, h2, h3, h4,
.font-heading {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--brand-fg);
}

a {
  color: var(--brand-primary);
}

/* ==========================================================================
   Header
   ========================================================================== */
.brand-header {
  background-color: var(--brand-surface);
  border-bottom: 1px solid var(--brand-border);
}

/* The header is .sticky-top, so it cannot be scrolled by the page. Below lg the
   mega menus render inline (position: static) inside the open nav, which can
   easily push it past 1000px tall - everything below the fold would be
   unreachable. Cap the open panel and let it scroll on its own instead.
   The cap is applied to .collapsing too so the expand animation eases into the
   final height rather than snapping down to it at the end. */
@media (max-width: 991.98px) {
  .brand-header .navbar-collapse.collapsing,
  .brand-header .navbar-collapse.show {
    max-height: calc(100vh - 5rem);
    max-height: calc(100dvh - 5rem);
  }

  .brand-header .navbar-collapse.show {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.brand-logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--brand-primary);
  letter-spacing: 0.02em;
}

/* Bootstrap's `.navbar-brand:hover, .navbar-brand:focus` (specificity 0,2,0)
   outranks the plain `.brand-logo` colour, so without this the wordmark flipped
   to the emphasis colour (black) and stayed there while the anchor kept focus
   after a click. Match the selector weight to keep the brand purple. */
.brand-logo:hover,
.brand-logo:focus,
.brand-logo:active {
  color: var(--brand-primary);
}

/* Replace the UA default focus ring (a white-on-black box around the wordmark)
   with a branded one, and only for keyboard users. */
.brand-logo:focus {
  outline: none;
}

.brand-logo:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 4px;
  border-radius: 4px;
}

.brand-footer .brand-logo {
  color: #fff;
}

.brand-nav .nav-link {
  color: var(--brand-fg);
  font-weight: 500;
  font-size: 0.95rem;
}

.brand-nav .nav-link:hover,
.brand-nav .nav-link:focus {
  color: var(--brand-primary);
}

/* The header row mixes <a> and <button> for the same visual control. Without an
   explicit reset the buttons keep the UA's `buttonface` fill and border while
   the links render bare, so the row reads as icons of different sizes. Reset
   the button chrome and pin the glyph box so every target is identical. */
.icon-btn {
  color: var(--brand-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  line-height: 1;
  transition: background-color 150ms ease;
  position: relative;
}

/* Header only - the blog share row reuses .icon-btn with 18px glyphs. */
.brand-header .icon-btn > svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.icon-btn:hover,
.icon-btn:focus-visible {
  background-color: var(--brand-bg);
  color: var(--brand-primary);
}

/* Sized against the 20px line icons rather than the 44px target: a solid disc
   reads larger than an outline glyph at matching dimensions. */
.header-avatar-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.header-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--brand-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-heading);
}

.icon-btn .badge-count {
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: var(--brand-accent);
  color: #fff;
  font-size: 0.65rem;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
}

/* Narrow phones: the wordmark, the three action icons and the toggler all share
   the header row (the icons sit outside .navbar-collapse so the cart badge is
   reachable without opening the menu). At the default sizes that row measures
   ~410px, so on a 360-390px screen .navbar's flex-wrap drops the toggler onto a
   second line. Step the wordmark and the targets down to keep it on one row -
   40px is still a comfortable touch target. */
@media (max-width: 575.98px) {
  .brand-header .brand-logo {
    font-size: 1.25rem;
    margin-right: 0;
  }

  .brand-header .icon-btn {
    width: 40px;
    height: 40px;
  }

  .brand-header .navbar-toggler {
    padding: 0.25rem 0.5rem;
  }
}

/* From lg up the icon group anchors the flyout, so it drops directly under the
   search button. Below lg it is deliberately left static - the group's right
   edge sits well inside the viewport (the toggler and the container padding
   follow it), so anchoring there pushes a 390px panel off the left of the
   screen. Static hands the job to .brand-header (it is .sticky-top, so it is
   already a positioned ancestor) and the panel spans the row instead. */
@media (min-width: 992px) {
  [data-search-widget] {
    position: relative;
  }
}

/* Search flyout. Kept in the DOM and hidden with `visibility` (not `display`)
   so it can animate open and still stay out of the tab order while closed. */
.site-search-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: min(390px, calc(100vw - 1.5rem));
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(72, 67, 159, 0.22), 0 2px 6px rgba(33, 29, 54, 0.06);
  padding: 0.85rem;
  z-index: 1030;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px) scale(0.97);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2), visibility 0s linear 220ms;
}

/* Brand hairline across the top edge - the one flash of colour that stops the
   panel reading as a plain white box. */
.site-search-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-dark) 55%, var(--brand-accent-light));
}

[data-search-widget].search-open .site-search-panel {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

/* Phones and tablets: now that the header is the anchor, the offsets are
   measured against the viewport. 1rem lines the panel up with the container's
   px-3, and the width shrinks to fit rather than overhanging the left edge.
   `top` is off the header, so it clears the navbar's py-3 on its own. */
@media (max-width: 991.98px) {
  .site-search-panel {
    top: calc(100% + 0.5rem);
    right: 1rem;
    width: min(390px, calc(100% - 2rem));
  }
}

/* Make it obvious which icon the panel belongs to while it is open. */
[data-search-widget].search-open [data-search-toggle] {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  color: #fff;
}

.site-search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background-color: var(--brand-bg);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-pill);
  padding: 0.25rem 0.25rem 0.25rem 0.85rem;
  transition: border-color var(--brand-transition), box-shadow var(--brand-transition), background-color var(--brand-transition);
}

.site-search-field:focus-within {
  background-color: var(--brand-surface);
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(138, 38, 164, 0.14);
}

.site-search-field-icon {
  flex-shrink: 0;
  color: var(--brand-muted);
  transition: color var(--brand-transition);
}

.site-search-field:focus-within .site-search-field-icon {
  color: var(--brand-primary);
}

/* The wrapper owns the border and the focus ring, so the input itself stays
   invisible - including on focus, where Bootstrap would otherwise draw its own. */
.site-search-panel .form-control,
.site-search-panel .form-control:focus {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0.35rem 0;
  font-size: 0.95rem;
}

.site-search-panel .form-control::placeholder {
  color: var(--brand-muted);
}

.site-search-submit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  color: #fff;
  box-shadow: 0 4px 12px rgba(138, 38, 164, 0.32);
  transition: transform var(--brand-transition), box-shadow var(--brand-transition), filter var(--brand-transition);
}

.site-search-submit:hover,
.site-search-submit:focus-visible {
  transform: scale(1.06);
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(138, 38, 164, 0.42);
}

.site-search-submit:active {
  transform: scale(0.96);
}

.site-search-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.15rem;
}

.site-search-suggestions-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-muted);
  margin-right: 0.15rem;
}

.site-search-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-pill);
  background-color: var(--brand-bg);
  color: var(--brand-fg);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color var(--brand-transition), color var(--brand-transition), border-color var(--brand-transition), transform var(--brand-transition);
}

.site-search-chip:hover,
.site-search-chip:focus-visible {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .site-search-panel,
  .site-search-submit,
  .site-search-chip {
    transition: none;
  }
}

.auth-modal-content {
  border-radius: 20px;
  border: none;
  box-shadow: var(--brand-shadow-lift);
}

.auth-modal-content .modal-header {
  padding: 1.75rem 1.75rem 0;
}

.auth-modal-content .modal-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brand-fg);
}

.auth-modal-content .btn-close {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  opacity: 1;
  background-size: 0.7rem;
  transition: background-color var(--brand-transition);
}

.auth-modal-content .btn-close:hover {
  background-color: var(--brand-bg);
}

.auth-modal-content .modal-body {
  padding: 1.25rem 1.75rem 1.75rem;
}

.auth-modal-content .text-muted {
  color: var(--brand-muted) !important;
}

.auth-modal-alert {
  border-radius: var(--brand-radius-md);
  font-size: 0.88rem;
  padding: 0.65rem 0.9rem;
}

.auth-modal-tabs {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  background-color: var(--brand-bg);
  border: 1px solid var(--brand-border);
  border-bottom: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-pill);
  padding: 0.3rem;
}

.auth-modal-tabs .nav-item {
  flex: 1;
}

.auth-modal-tabs .nav-link {
  width: 100%;
  color: var(--brand-muted);
  border: none;
  border-radius: var(--brand-radius-pill);
  background: none;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.5rem 0.75rem;
  transition: background-color var(--brand-transition), color var(--brand-transition), box-shadow var(--brand-transition);
}

.auth-modal-tabs .nav-link:hover {
  color: var(--brand-primary);
}

.auth-modal-tabs .nav-link.active {
  color: var(--brand-primary);
  background-color: var(--brand-surface);
  box-shadow: var(--brand-shadow-soft);
}

.auth-modal-content .form-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--brand-fg);
  margin-bottom: 0.4rem;
}

.auth-modal-content .form-control {
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-md);
  padding: 0.65rem 0.9rem;
  font-size: 0.95rem;
  background-color: var(--brand-bg);
}

.auth-modal-content .form-control:focus {
  border-color: var(--brand-primary);
  background-color: var(--brand-surface);
  box-shadow: 0 0 0 0.2rem rgba(138, 38, 164, 0.15);
}

.auth-modal-content .btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  border-radius: var(--brand-radius-md);
  padding: 0.7rem 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background-color var(--brand-transition), border-color var(--brand-transition), box-shadow var(--brand-transition);
}

.auth-modal-content .btn-primary:hover,
.auth-modal-content .btn-primary:focus {
  background-color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
  box-shadow: var(--brand-shadow-lift);
}

/* --------------------------------------------------------------------------
   Offer popup
   A festive promo modal: deep jewel-toned panel with gold foil accents, so a
   seasonal offer reads as premium rather than as a generic discount banner.
   Every colour and face comes from the brand tokens above, so a rebrand does
   not leave this component behind.
   -------------------------------------------------------------------------- */
.offer-popup-dialog {
  max-width: 820px;
}

.offer-popup-content {
  position: relative;
  border: none;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(20, 12, 45, 0.45);
}

/* Hairline gold rule just inside the rounded corners - reads as a foil edge
   without a heavy border competing with the artwork. */
.offer-popup-content::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 1px solid rgba(255, 185, 85, 0.45);
  border-radius: inherit;
  pointer-events: none;
}

.offer-popup-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 6;
  /* 44px keeps the tap target to spec even though the dot reads smaller. */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 10px rgba(20, 12, 45, 0.35);
  opacity: 1;
  transition: background-color var(--brand-transition), transform var(--brand-transition);
}

.offer-popup-close:hover,
.offer-popup-close:focus {
  background-color: #fff;
  transform: scale(1.06);
}

/* --- Media column ------------------------------------------------------- */
.offer-popup-media {
  position: relative;
  min-height: 400px;
  background: linear-gradient(160deg, #3B1048, #241B55);
  overflow: hidden;
}

.offer-popup-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 400px;
  /* cover, not contain: contain leaves dead bands of background around any
     image whose aspect ratio does not match the column. */
  object-fit: cover;
}

/* Stands in when no artwork has been uploaded. A drawn gold mandala on the
   brand gradient beats a random stock photo that has nothing to do with the
   festival being advertised. */
.offer-popup-media-art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.offer-popup-media-art svg {
  width: 72%;
  max-width: 250px;
  height: auto;
}

/* Caption over admin-uploaded artwork, so it has to stay readable on a pale
   image as well as a dark one: a scrim that is genuinely opaque where the text
   sits (the old one faded out under the first line), plus a shadow as a second
   line of defence. Playfair keeps the product name in the same voice as the
   popup title instead of dropping to plain body text. */
.offer-popup-image-comment {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2.75rem 1.1rem 0.85rem;
  background: linear-gradient(0deg, rgba(20, 12, 45, 0.92) 35%, rgba(20, 12, 45, 0.6) 70%, rgba(20, 12, 45, 0));
  color: #FFE3B8;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(12, 6, 30, 0.75);
}

/* --- Content column ----------------------------------------------------- */
.offer-popup-body {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem 2rem;
  overflow: hidden;
  background: linear-gradient(155deg, #4A1259 0%, #331347 45%, #241B55 100%);
  color: #fff;
}

/* Gold glow bleeding in from the top-right, so the panel has depth instead of
   reading as a flat block of colour. */
.offer-popup-body::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -30%;
  width: 90%;
  height: 90%;
  background: radial-gradient(circle, rgba(255, 185, 85, 0.28), transparent 65%);
  pointer-events: none;
}

/* Lifts the real content above the glow above. */
.offer-popup-body > * {
  position: relative;
}

.offer-popup-highlight {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 1rem;
  padding: 0.4rem 0.95rem;
  border-radius: var(--brand-radius-pill);
  background: linear-gradient(135deg, #FFD08A, var(--brand-accent-light));
  box-shadow: 0 6px 18px rgba(255, 185, 85, 0.35);
  color: #3B1048;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.offer-popup-title {
  margin-bottom: 0.6rem;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
}

.offer-popup-description {
  margin-bottom: 1.35rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* --- Coupon ticket ------------------------------------------------------ */
.offer-popup-coupon {
  align-self: stretch;
  margin-bottom: 1.4rem;
}

.offer-popup-coupon-label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--brand-accent-light);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.offer-popup-coupon-row {
  display: flex;
  max-width: 330px;
  align-items: stretch;
  overflow: hidden;
  border: 1px dashed rgba(255, 185, 85, 0.75);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.07);
}

.offer-popup-coupon-code {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  padding: 0.6rem 1rem;
  color: #fff;
  font-family: var(--bs-font-monospace, monospace);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.offer-popup-coupon-copy {
  flex: 0 0 auto;
  min-width: 90px;
  border: 0;
  padding: 0.6rem 1.1rem;
  background: linear-gradient(135deg, #FFD08A, var(--brand-accent-light));
  color: #3B1048;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter var(--brand-transition), transform var(--brand-transition);
}

.offer-popup-coupon-copy:hover,
.offer-popup-coupon-copy:focus {
  filter: brightness(1.08);
}

.offer-popup-coupon-copy:active {
  transform: scale(0.97);
}

.offer-popup-coupon-hint {
  display: block;
  margin-top: 0.45rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.75rem;
}

/* --- Call to action ----------------------------------------------------- */
.offer-popup-cta {
  position: relative;
  align-self: flex-start;
  overflow: hidden;
  border: 0;
  border-radius: var(--brand-radius-pill);
  padding: 0.8rem 2rem;
  background: linear-gradient(135deg, #FFD08A, var(--brand-accent-light));
  box-shadow: 0 10px 26px rgba(255, 185, 85, 0.3);
  color: #3B1048;
  font-weight: 700;
  transition: transform var(--brand-transition), box-shadow var(--brand-transition);
}

.offer-popup-cta:hover,
.offer-popup-cta:focus {
  background: linear-gradient(135deg, #FFD08A, var(--brand-accent-light));
  box-shadow: 0 14px 32px rgba(255, 185, 85, 0.45);
  color: #3B1048;
  transform: translateY(-2px);
}

/* A slow sheen across the single primary action - enough to draw the eye
   without the blinking that makes a promo feel cheap. */
.offer-popup-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
  animation: offerPopupSheen 3.6s ease-in-out 1.2s infinite;
}

@keyframes offerPopupSheen {
  0% { left: -60%; }
  55% { left: 130%; }
  100% { left: 130%; }
}

@keyframes offerPopupRise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.offer-popup-modal.show .offer-popup-content {
  animation: offerPopupRise 420ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .offer-popup-modal.show .offer-popup-content {
    animation: none;
  }

  .offer-popup-cta::after {
    display: none;
  }

  .offer-popup-cta:hover,
  .offer-popup-cta:focus,
  .offer-popup-close:hover,
  .offer-popup-close:focus {
    transform: none;
  }
}

@media (max-width: 767.98px) {
  .offer-popup-media,
  .offer-popup-image {
    min-height: 210px;
  }

  .offer-popup-media-art svg {
    max-width: 165px;
  }

  .offer-popup-body {
    padding: 1.75rem 1.35rem 2rem;
  }

  .offer-popup-coupon-row {
    max-width: none;
  }

  .offer-popup-cta {
    align-self: stretch;
    text-align: center;
  }
}

/* Very small phones (SE-class). The stacked layout above still runs taller than
   a 568px viewport, which pushes the CTA below the fold - claw the height back
   from the artwork panel and the vertical rhythm rather than from legibility. */
@media (max-width: 360px) {
  .offer-popup-media,
  .offer-popup-image {
    min-height: 150px;
  }

  .offer-popup-media-art svg {
    max-width: 120px;
  }

  .offer-popup-body {
    padding: 1.35rem 1.1rem 1.5rem;
  }

  .offer-popup-highlight {
    margin-bottom: 0.7rem;
  }

  .offer-popup-title {
    font-size: 1.45rem;
  }

  .offer-popup-description {
    margin-bottom: 1rem;
    font-size: 0.9rem;
  }

  .offer-popup-coupon {
    margin-bottom: 1rem;
  }
}

/* Landscape phones have almost no vertical room - roughly 375px total. Keeping
   the artwork would leave the offer itself unreadable, so the panel is dropped
   here and the copy compresses, so the code and the CTA stay on screen. */
@media (max-height: 480px) and (orientation: landscape) {
  .offer-popup-media {
    display: none;
  }

  .offer-popup-body {
    padding: 1.25rem 1.5rem;
  }

  .offer-popup-highlight {
    margin-bottom: 0.6rem;
  }

  .offer-popup-title {
    margin-bottom: 0.35rem;
    font-size: 1.4rem;
  }

  .offer-popup-description {
    margin-bottom: 0.85rem;
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .offer-popup-coupon {
    margin-bottom: 0.85rem;
  }

  .offer-popup-cta {
    padding: 0.6rem 1.6rem;
  }
}

.auth-link {
  color: var(--brand-primary);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}

.auth-link:hover {
  text-decoration: underline;
  color: var(--brand-primary-dark);
}

.auth-password-field {
  position: relative;
}

.auth-password-field .form-control {
  padding-right: 2.75rem;
}

.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--brand-muted);
  border-radius: 50%;
  transition: color var(--brand-transition), background-color var(--brand-transition);
}

.auth-password-toggle:hover {
  color: var(--brand-primary);
  background-color: var(--brand-bg);
}

.auth-password-toggle .icon-eye-off {
  display: none;
}

.auth-password-toggle.is-visible .icon-eye {
  display: none;
}

.auth-password-toggle.is-visible .icon-eye-off {
  display: block;
}

.auth-modal-content .btn-primary.is-loading {
  color: transparent;
  pointer-events: none;
  position: relative;
}

.auth-modal-content .btn-primary.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1rem;
  height: 1.1rem;
  margin: -0.55rem 0 0 -0.55rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: auth-spin 0.7s linear infinite;
}

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

/* ==========================================================================
   Mega menu (Rudraksha)
   ========================================================================== */
.mega-menu-item {
  position: static;
}

.mega-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
}

.mega-menu-caret {
  transition: transform var(--brand-transition);
}

.mega-menu-item.mega-menu-open .mega-menu-caret {
  transform: rotate(180deg);
}

.mega-menu-item.mega-menu-open .mega-menu-trigger {
  color: var(--brand-primary);
}

.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1030;
  background-color: var(--brand-surface);
  border-bottom: 1px solid var(--brand-border);
  box-shadow: var(--brand-shadow-lift);
}

.mega-menu-item.mega-menu-open .mega-menu {
  display: block;
}

.mega-menu-inner {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.mega-menu-sidebar {
  border-right: 1px solid var(--brand-border);
  padding-right: 1.5rem;
}

.mega-menu-sidenav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-menu-sidenav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  padding: 0.6rem 0.9rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--brand-fg);
  border-radius: 0 var(--brand-radius-sm) var(--brand-radius-sm) 0;
  transition: background-color var(--brand-transition), color var(--brand-transition), border-color var(--brand-transition);
}

.mega-menu-sidenav-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--brand-accent);
}

.mega-menu-sidenav-link:hover,
.mega-menu-sidenav-link:focus-visible {
  background-color: var(--brand-bg);
  color: var(--brand-primary);
}

.mega-menu-sidenav-link.active {
  background-color: rgba(138, 38, 164, 0.08);
  border-left-color: var(--brand-primary);
  color: var(--brand-primary);
  font-weight: 600;
}

.mega-menu-sidenav-divider {
  border: none;
  border-top: 1px solid var(--brand-border);
  margin: 0.85rem 0.9rem;
}

.mega-menu-sidenav-utility {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-menu-sidenav-utility a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--brand-muted);
  text-decoration: none;
  transition: color var(--brand-transition);
}

.mega-menu-sidenav-utility a:hover,
.mega-menu-sidenav-utility a:focus-visible {
  color: var(--brand-primary);
}

.mega-menu-products {
  padding: 0 1.75rem;
}

.mega-menu-gem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 1rem;
}

.mega-menu-gem-card {
  text-decoration: none;
  color: var(--brand-fg);
  text-align: center;
  display: block;
}

.mega-menu-gem-media {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Cap the box so a large source image cannot inflate the card's max-content
     width and wrap the mega-menu columns onto separate rows. */
  width: 100%;
  max-width: 150px;
  min-width: 0;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--brand-radius-md);
  border: 1px solid var(--brand-border);
  background-color: var(--brand-bg);
  overflow: hidden;
  transition: transform var(--brand-transition), box-shadow var(--brand-transition), border-color var(--brand-transition);
}

.mega-menu-gem-card:hover .mega-menu-gem-media,
.mega-menu-gem-card:focus-visible .mega-menu-gem-media {
  transform: translateY(-3px);
  box-shadow: var(--brand-shadow-soft);
  border-color: var(--brand-primary);
}

.mega-menu-gem-media img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

.mega-menu-gem-media.tone-pearl { background-color: #8A7B6518; color: #8A7B65; }
.mega-menu-gem-media.tone-coral { background-color: #C2410C18; color: #C2410C; }
.mega-menu-gem-media.tone-emerald { background-color: #1F7A4D18; color: #1F7A4D; }
.mega-menu-gem-media.tone-diamond { background-color: #7C93A818; color: #5A7186; }
.mega-menu-gem-media.tone-hessonite { background-color: #B4530918; color: #B45309; }
.mega-menu-gem-media.tone-catseye { background-color: #6B7A3A18; color: #6B7A3A; }

.mega-menu-gem-name {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.mega-menu-gem-planet {
  display: block;
  font-size: 0.72rem;
  color: var(--brand-muted);
}

.mega-menu-panel {
  display: none;
}

.mega-menu-panel.active {
  display: block;
}

.mega-menu-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1.25rem;
}

.mega-menu-product {
  text-decoration: none;
  color: var(--brand-fg);
  text-align: center;
  display: block;
}

.mega-menu-product img {
  width: 100%;
  max-width: 150px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--brand-radius-md);
  border: 1px solid var(--brand-border);
  background-color: var(--brand-bg);
  transition: transform var(--brand-transition), box-shadow var(--brand-transition);
}

.mega-menu-product:hover img,
.mega-menu-product:focus-visible img {
  transform: translateY(-3px);
  box-shadow: var(--brand-shadow-soft);
  border-color: var(--brand-primary);
}

.mega-menu-product span {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.mega-menu-purpose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.mega-menu-purpose-tile {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--brand-fg);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-md);
  transition: border-color var(--brand-transition), color var(--brand-transition), background-color var(--brand-transition);
}

.mega-menu-purpose-tile:hover,
.mega-menu-purpose-tile:focus-visible {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background-color: var(--brand-bg);
}

.mega-menu-cta-block {
  max-width: 360px;
  margin: 1.5rem auto;
  text-align: center;
}

.mega-menu-cta-text {
  color: var(--brand-muted);
  font-size: 0.88rem;
  margin-bottom: 1.25rem;
}

.mega-menu-purpose-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--brand-bg);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mega-menu-quickpicks {
  border-left: 1px solid var(--brand-border);
  padding-left: 1.5rem;
}

.mega-menu-quickpicks-inner {
  background-color: var(--brand-bg);
  border-radius: var(--brand-radius-md);
  padding: 0.85rem;
}

.mega-menu-quickpicks-title {
  display: block;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-primary);
  margin-bottom: 0.55rem;
}

.mega-menu-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.mega-menu-pill {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.28rem 0.6rem;
  border-radius: var(--brand-radius-pill);
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  color: var(--brand-fg);
  text-decoration: none;
  transition: border-color var(--brand-transition), color var(--brand-transition);
}

.mega-menu-pill:hover,
.mega-menu-pill:focus-visible {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.mega-menu-pill-accent {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #fff;
}

.mega-menu-pill-accent:hover,
.mega-menu-pill-accent:focus-visible {
  color: #fff;
  border-color: var(--brand-accent-light);
  background-color: var(--brand-accent-light);
}

.mega-menu-feature-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  column-gap: 0.7rem;
  align-content: center;
  position: relative;
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-md);
  padding: 0.6rem;
  text-decoration: none;
  color: var(--brand-fg);
  margin-bottom: 0.75rem;
  transition: border-color var(--brand-transition), box-shadow var(--brand-transition);
}

.mega-menu-feature-card:hover,
.mega-menu-feature-card:focus-visible {
  border-color: var(--brand-primary);
  box-shadow: var(--brand-shadow-soft);
  color: var(--brand-fg);
}

.mega-menu-feature-card img {
  grid-column: 1;
  grid-row: 1 / 5;
  align-self: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--brand-radius-sm);
  background-color: var(--brand-bg);
}

.mega-menu-feature-badge {
  grid-column: 2;
  justify-self: start;
  background-color: var(--brand-accent);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  margin-bottom: 0.25rem;
}

.mega-menu-feature-name {
  grid-column: 2;
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1.3;
  margin-bottom: 0.2rem;
}

.mega-menu-feature-price {
  grid-column: 2;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--brand-primary);
  margin-bottom: 0.15rem;
}

.mega-menu-feature-mrp {
  text-decoration: line-through;
  color: var(--brand-muted);
  font-weight: 400;
  font-size: 0.75rem;
  margin-left: 0.3rem;
}

.mega-menu-feature-cta {
  grid-column: 2;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-primary);
}

.mega-menu-astro-card {
  background-color: var(--brand-primary-dark);
  color: #fff;
  border-radius: var(--brand-radius-md);
  padding: 0.8rem;
}

.mega-menu-astro-title {
  font-weight: 700;
  font-size: 0.82rem;
  margin-bottom: 0.3rem;
}

.mega-menu-astro-text {
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.6rem;
}

.mega-menu-astro-btn {
  display: inline-block;
  background-color: var(--brand-accent);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.4rem 0.75rem;
  border-radius: var(--brand-radius-pill);
  text-decoration: none;
  transition: background-color var(--brand-transition);
}

.mega-menu-astro-btn:hover,
.mega-menu-astro-btn:focus-visible {
  background-color: var(--brand-accent-light);
  color: #fff;
}

/* Keep the Quick Picks rail compact so the mega menu stays short; the product
   grid absorbs the width the rail gives back. */
@media (min-width: 992px) {
  .mega-menu-quickpicks {
    flex: 0 0 auto;
    width: 20%;
    max-width: 300px;
  }

  .mega-menu-products {
    /* flex-basis 0 (not auto) so the column is sized by the space left over
       rather than by its content, otherwise wide content wraps the row. */
    flex: 1 1 0%;
    width: auto;
    max-width: none;
    min-width: 0;
  }
}

@media (max-width: 991.98px) {
  .mega-menu {
    position: static;
    box-shadow: none;
    border-bottom: none;
    border-top: 1px solid var(--brand-border);
  }

  .mega-menu-inner {
    padding: 1rem 0;
  }

  .mega-menu-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--brand-border);
    padding-right: 0;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .mega-menu-sidenav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .mega-menu-sidenav-link {
    border-left: none;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-pill);
    width: auto;
  }

  .mega-menu-sidenav-link.active {
    border-color: var(--brand-primary);
  }

  .mega-menu-products {
    padding: 0;
  }

  .mega-menu-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mega-menu-quickpicks {
    border-left: none;
    border-top: 1px solid var(--brand-border);
    padding-left: 0;
    padding-top: 1rem;
    margin-top: 1rem;
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-brand-primary,
.btn-brand-outline {
  border-radius: var(--brand-radius-pill);
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  transition: transform var(--brand-transition), background-color var(--brand-transition), box-shadow var(--brand-transition), border-color var(--brand-transition);
}

.btn-brand-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
  font-weight: 600;
}

.btn-brand-primary:hover,
.btn-brand-primary:focus {
  background-color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--brand-shadow-lift);
}

/* Secondary action for DARK surfaces only (hero bands, the purple CTA strips).
   White border on transparent - on a light section it is white-on-white and
   effectively invisible, so reach for .btn-brand-ghost there instead. */
.btn-brand-outline {
  border: 1px solid var(--brand-surface);
  color: #fff;
  font-weight: 600;
  background: transparent;
}

.btn-brand-outline:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  transform: translateY(-2px);
  border-color: #fff;
}

/* The same secondary action for LIGHT surfaces: brand ink on a hairline border,
   so it reads as clearly subordinate to .btn-brand-primary without disappearing. */
.btn-brand-ghost {
  border-radius: var(--brand-radius-pill);
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--brand-primary);
  background: transparent;
  border: 1px solid var(--brand-border);
  transition: transform var(--brand-transition), background-color var(--brand-transition), border-color var(--brand-transition);
}

.btn-brand-ghost:hover,
.btn-brand-ghost:focus {
  color: var(--brand-primary-dark);
  background: var(--brand-bg);
  border-color: var(--brand-primary);
  transform: translateY(-2px);
}

/* ==========================================================================
   Hero (Home carousel)
   ========================================================================== */
.hero-carousel .carousel-item {
  min-height: clamp(380px, 42vw, 620px);
}

.hero-slide {
  display: flex;
  align-items: center;
  min-height: clamp(380px, 42vw, 620px);
  position: relative;
  overflow: hidden;
}

.hero-slide-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  z-index: 0;
  will-change: transform;
}

.hero-slide-1 .hero-slide-media,
.hero-slide-2 .hero-slide-media,
.hero-slide-3 .hero-slide-media {
  transform: scale(1.06);
}

.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(20, 14, 12, 0.88) 0%, rgba(20, 14, 12, 0.62) 42%, rgba(20, 14, 12, 0.38) 68%, rgba(20, 14, 12, 0.5) 100%),
    radial-gradient(120% 140% at 15% 30%, rgba(20, 14, 12, 0.2) 0%, rgba(20, 14, 12, 0.55) 100%);
  z-index: 1;
}

.hero-slide-1 { background: linear-gradient(120deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%); }
.hero-slide-2 { background: linear-gradient(120deg, #3A2A1E 0%, var(--brand-primary-dark) 100%); }
.hero-slide-3 { background: linear-gradient(120deg, #5C3317 0%, var(--brand-primary) 100%); }

.carousel-item.active .hero-slide-media {
  animation: hero-ken-burns 7s ease-out forwards;
}

@keyframes hero-ken-burns {
  from { transform: scale(1.1); }
  to { transform: scale(1); }
}

.hero-content {
  color: #fff;
  max-width: 560px;
  padding: 3rem;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.hero-content h1 {
  color: #fff;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
  color: var(--brand-accent-light);
  font-weight: 700;
}

.hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--brand-accent-light);
}

.hero-copy {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.hero-trustline {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.02em;
}

.hero-content,
.hero-eyebrow,
.hero-copy,
.hero-trustline,
.hero-content .btn {
  animation: hero-fade-up 800ms ease-out both;
}

.hero-content .hero-eyebrow { animation-delay: 60ms; }
.hero-content h1 { animation-delay: 140ms; }
.hero-content .hero-copy { animation-delay: 220ms; }
.hero-content .btn { animation-delay: 300ms; }
.hero-content .hero-trustline { animation-delay: 380ms; }

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-item.active .hero-slide-media { animation: none; }
  .hero-content, .hero-eyebrow, .hero-copy, .hero-trustline, .hero-content .btn { animation: none; }
}

.carousel-indicators [data-bs-target] {
  background-color: var(--brand-accent-light);
}

/* ==========================================================================
   Trust strip
   ========================================================================== */
.trust-strip {
  background-color: var(--brand-surface);
  border-bottom: 1px solid var(--brand-border);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.trust-item svg {
  color: var(--brand-accent);
  flex-shrink: 0;
}

.trust-item .trust-title {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0;
}

.trust-item .trust-sub {
  font-size: 0.78rem;
  color: var(--brand-muted);
  margin-bottom: 0;
}

/* ==========================================================================
   Section utilities
   ========================================================================== */
.section-title {
  font-size: 2rem;
  position: relative;
  display: inline-block;
}

.section-title::before {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin: 0 auto 0.85rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
}

.section-subtitle {
  color: var(--brand-muted);
  font-size: 0.95rem;
}

.section-surface {
  background-color: var(--brand-surface);
}

/* ==========================================================================
   Purpose cards
   ========================================================================== */
.purpose-card {
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-md);
  padding: 1.5rem 1.25rem;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: transform var(--brand-transition), box-shadow var(--brand-transition), border-color var(--brand-transition);
  height: 100%;
}

.purpose-card:hover,
.purpose-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--brand-shadow-lift);
  border-color: var(--brand-primary);
}

.purpose-card:hover .purpose-icon {
  background-color: var(--brand-primary);
  color: #fff;
}

.purpose-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--brand-bg);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  transition: background-color var(--brand-transition), color var(--brand-transition);
}

.purpose-card .purpose-title {
  color: var(--brand-fg);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 0;
}

/* ==========================================================================
   Category cards
   ========================================================================== */
.category-col {
  flex: 0 0 auto;
  width: 50%;
}

@media (min-width: 576px) {
  .category-col {
    width: 33.333%;
  }
}

@media (min-width: 768px) {
  .category-col {
    width: 20%;
  }
}

.category-card {
  position: relative;
  border-radius: var(--brand-radius-md);
  overflow: hidden;
  text-decoration: none;
  display: block;
  aspect-ratio: 4 / 5;
  background-color: var(--brand-primary);
  box-shadow: var(--brand-shadow-soft);
  transition: box-shadow var(--brand-transition), transform var(--brand-transition);
}

.category-card:hover {
  box-shadow: var(--brand-shadow-lift);
  transform: translateY(-4px);
}

.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
  transition: transform 420ms ease;
}

.category-card:hover img {
  transform: scale(1.08);
}

.category-card .category-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem;
  background: linear-gradient(to top, rgba(30, 27, 24, 0.85), transparent);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.category-rudraksha { background: linear-gradient(160deg, #6B4A1E, #3A2A1E); }
.category-gemstones { background: linear-gradient(160deg, var(--brand-primary), var(--brand-primary-dark)); }
.category-bracelets { background: linear-gradient(160deg, #4A5F6B, #2E3B40); }
.category-mala { background: linear-gradient(160deg, var(--brand-accent), var(--brand-accent-light)); }
.category-jewelry { background: linear-gradient(160deg, #5C3317, var(--brand-primary)); }

/* ==========================================================================
   Product cards
   ========================================================================== */
.product-card {
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-md);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--brand-transition), box-shadow var(--brand-transition), border-color var(--brand-transition);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--brand-shadow-lift);
  border-color: var(--brand-primary);
}

.product-card .product-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background-color: var(--brand-bg);
  overflow: hidden;
}

.product-card .product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms ease;
}

.product-card:hover .product-media img {
  transform: scale(1.06);
}

.product-card .product-name {
  transition: color var(--brand-transition);
}

.product-card:hover .product-name {
  color: var(--brand-primary);
}

.media-tone-brown { background: linear-gradient(160deg, #6B4A1E22, #3A2A1E11); }
.media-tone-maroon { background: linear-gradient(160deg, #6B1F2A22, #4E162011); }
.media-tone-slate { background: linear-gradient(160deg, #4A5F6B22, #2E3B4011); }
.media-tone-gold { background: linear-gradient(160deg, #A1620722, #6B1F2A11); }

.product-tag {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  color: #fff;
}

.product-tag.tag-rudraksha { background-color: #6B4A1E; }
.product-tag.tag-crystal { background-color: #4A5F6B; }
.product-tag.tag-gemstone { background-color: var(--brand-primary); }

/* Badge row across the top of the media tile.
   The badges used to be pinned individually - discount top-left, certification
   top-right - and every extra badge needed a hand-written offset to dodge the
   others, which still left them touching on a narrow column. Laying them out in
   flow inside one absolutely positioned row means any combination sits side by
   side with real spacing and wraps to a second line only when it has to. */
.product-card .product-badge-row {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem;
  /* The row spans the full width of the tile, so it would otherwise swallow
     clicks on the image link underneath it. */
  pointer-events: none;
}

.product-card .product-badge-row > * {
  position: static;
  flex: 0 0 auto;
  max-width: 100%;
  pointer-events: auto;
}

/* The certification mark keeps its right-hand slot whatever sits beside it. */
.product-card .product-badge-row .product-badge {
  margin-left: auto;
}

.product-badge {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background-color: var(--brand-accent);
  color: #fff;
}

.product-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-grow: 1;
}

.product-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--brand-fg);
  text-decoration: none;
}

/* Origin line and savings line on the shared _ProductCard partial. The
   Collection page restyles both under .collection-v2; these are the defaults
   used everywhere else the partial renders (e.g. related products). */
.product-origin {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-start;
  font-size: 0.75rem;
  color: var(--brand-muted);
}

.product-origin svg {
  flex-shrink: 0;
}

.product-save {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-success);
}

.product-card.is-oos .product-media img {
  filter: grayscale(0.5);
  opacity: 0.85;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--brand-muted);
}

.product-rating svg {
  color: var(--brand-accent);
}

.product-stock {
  font-size: 0.78rem;
  font-weight: 600;
}

.product-stock.in-stock { color: var(--brand-success); }
.product-stock.low-stock { color: #B45309; }

.product-price {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--brand-fg);
  margin-top: auto;
}

.product-price .original-price {
  text-decoration: line-through;
  color: var(--brand-muted);
  font-weight: 400;
  font-size: 0.85rem;
  margin-left: 0.4rem;
}

.discount-ribbon {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background-color: var(--brand-success);
  color: #fff;
  z-index: 1;
}

.product-wishlist-btn {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--brand-border);
  background-color: #fff;
  /* #888 on white was faint enough to read as decoration rather than a control. */
  color: #5c5470;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
  transition: color var(--brand-transition), border-color var(--brand-transition), background-color var(--brand-transition);
}

/* Inline SVG rather than a &hearts; glyph: mobile browsers give U+2665 emoji
   presentation, which paints a red emoji heart and ignores `color`. */
.product-wishlist-btn svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  pointer-events: none;
}

.product-wishlist-btn:hover {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* Wishlisted reads as a solid heart on a tinted chip. Against the white card the
   outline alone was too quiet to tell the two states apart at a glance. */
.product-wishlist-btn.is-active {
  color: #e0245e;
  border-color: #e0245e;
  background-color: #fdeaf0;
}

.product-wishlist-btn.is-active svg {
  fill: currentColor;
  stroke: currentColor;
}

.btn-choose-options {
  border: 1px solid var(--brand-primary);
  color: var(--brand-primary);
  background-color: transparent;
  font-weight: 600;
  border-radius: var(--brand-radius-pill);
  transition: background-color var(--brand-transition), color var(--brand-transition);
}

.btn-choose-options:hover,
.btn-choose-options:focus {
  background-color: var(--brand-primary);
  color: #fff;
}

.product-actions .btn {
  font-size: 0.78rem;
  white-space: nowrap;
}

/* ==========================================================================
   Auto-scrolling carousel (Best Sellers, Zodiac, and similar sections)
   ========================================================================== */
.auto-carousel {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
}

.auto-carousel-track {
  --carousel-visible: 2;
  display: flex;
  gap: 1rem;
  /* Both axes must be set: with only overflow-x hidden, overflow-y computes to
     auto and the reveal animation's translateY makes a vertical scrollbar flash. */
  overflow: hidden;
  scroll-behavior: smooth;
  flex: 1 1 auto;
}

.auto-carousel-slide {
  flex: 0 0 calc((100% - (var(--carousel-visible) - 1) * 1rem) / var(--carousel-visible));
}

.auto-carousel-slide .product-card {
  height: 100%;
}

@media (min-width: 576px) {
  .auto-carousel-track { --carousel-visible: 3; }
}

@media (min-width: 768px) {
  .auto-carousel-track { --carousel-visible: 4; }
}

@media (min-width: 992px) {
  .auto-carousel-track { --carousel-visible: 5; }
}

.carousel-nav-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--brand-border);
  background-color: var(--brand-surface);
  color: var(--brand-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  transition: background-color var(--brand-transition), color var(--brand-transition), border-color var(--brand-transition);
}

.carousel-nav-btn:hover {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.auto-carousel-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.25rem;
}

.auto-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background-color: var(--brand-border);
  padding: 0;
  transition: background-color var(--brand-transition), transform var(--brand-transition);
}

.auto-carousel-dot.active {
  background-color: var(--brand-primary);
  transform: scale(1.3);
}

/* ==========================================================================
   Consultation banner
   ========================================================================== */
.consultation-banner {
  background: linear-gradient(120deg, var(--brand-accent) 0%, var(--brand-accent-light) 100%);
  border-radius: 1rem;
  color: #fff;
  padding: 2.5rem;
}

.consultation-lead {
  color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   Tool cards
   ========================================================================== */
.tool-card {
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-md);
  padding: 1.75rem;
  height: 100%;
  transition: transform var(--brand-transition), box-shadow var(--brand-transition);
}

.tool-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--brand-shadow-lift);
}

.tool-card:hover .tool-icon {
  background-color: var(--brand-primary);
  color: #fff;
}

.tool-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--brand-radius-sm);
  background-color: var(--brand-bg);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: background-color var(--brand-transition), color var(--brand-transition);
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonial-card {
  position: relative;
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-md);
  padding: 1.75rem;
  height: 100%;
  overflow: hidden;
  transition: transform var(--brand-transition), box-shadow var(--brand-transition), border-color var(--brand-transition);
}

.testimonial-card::before {
  content: "\201C";
  position: absolute;
  top: -0.75rem;
  right: 0.75rem;
  font-family: var(--font-heading);
  font-size: 5.5rem;
  line-height: 1;
  color: var(--brand-primary);
  opacity: 0.08;
  pointer-events: none;
}

.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--brand-shadow-lift);
  border-color: var(--brand-primary);
}

.testimonial-stars svg {
  color: var(--brand-accent);
  width: 16px;
  height: 16px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--brand-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-family: var(--font-heading);
}

.testimonial-role {
  font-size: 0.78rem;
}

/* ==========================================================================
   Product review cards (Product Details page)
   ========================================================================== */
#reviews .review-summary-panel {
  background: linear-gradient(150deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  border-radius: var(--brand-radius-md);
  color: #fff;
  padding: 1rem 1.5rem;
  box-shadow: var(--brand-shadow-soft);
}

#reviews .review-summary-panel .review-avg {
  font-size: 1.85rem;
  font-weight: 700;
  font-family: var(--font-heading);
}

#reviews .review-summary-panel .testimonial-stars svg {
  color: var(--brand-accent-light);
}

#reviews .review-summary-panel .review-count {
  color: rgba(255, 255, 255, 0.85);
}

#reviews .review-card {
  position: relative;
  background: linear-gradient(160deg, #fff 0%, var(--brand-surface) 100%);
  border: 1px solid var(--brand-border);
  border-top: 4px solid var(--brand-accent);
  border-radius: var(--brand-radius-md);
  padding: 1.75rem;
  height: 100%;
  overflow: hidden;
  transition: transform var(--brand-transition), box-shadow var(--brand-transition), border-top-color var(--brand-transition);
}

#reviews .review-card::before {
  content: "\201C";
  position: absolute;
  top: -1.5rem;
  right: 1rem;
  font-family: Georgia, serif;
  font-size: 6rem;
  line-height: 1;
  color: var(--brand-primary);
  opacity: 0.07;
  pointer-events: none;
}

#reviews .review-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--brand-shadow-lift);
  border-top-color: var(--brand-primary);
}

#reviews .review-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-heading);
  box-shadow: 0 4px 10px rgba(138, 38, 164, 0.28);
  flex-shrink: 0;
}

#reviews .review-verified-badge {
  background: linear-gradient(135deg, #2fbf71, #1e9e5c);
  border: none;
  font-weight: 500;
  letter-spacing: 0.01em;
  vertical-align: middle;
}

#reviews .review-write-card {
  border-top: 4px solid var(--brand-primary);
  background: linear-gradient(160deg, #fff 0%, var(--brand-surface) 100%);
}

#reviews .review-write-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ==========================================================================
   Newsletter band
   ========================================================================== */
.newsletter-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  background:
    radial-gradient(115% 150% at 10% 50%, rgba(138, 38, 164, 0.55) 0%, transparent 62%),
    linear-gradient(112deg, #3E2A78 0%, var(--brand-primary-dark) 46%, #5B1670 100%);
  color: #fff;
}

/* Gold hairline capping the band, echoing the hero treatment */
.newsletter-band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-accent) 22%, var(--brand-accent-light) 50%, var(--brand-accent) 78%, transparent);
  opacity: 0.8;
}

/* Mandala watermark bleeding off the right edge */
.newsletter-band::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -7rem;
  width: 22rem;
  aspect-ratio: 1;
  margin-top: -11rem;
  background: url("../images/site/mandala-outer.svg") center / contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
  z-index: -1;
}

.newsletter-band > .container {
  position: relative;
  z-index: 1;
}

.newsletter-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-accent-light);
  margin-bottom: 0.5rem;
}

.newsletter-kicker svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.newsletter-heading {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 0.35rem;
}

.newsletter-band .lead-text {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* Input and button share one pill; the button sits inside the field. */
.newsletter-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  padding: 0.3rem 0.3rem 0.3rem 1.05rem;
  box-shadow: 0 18px 38px -18px rgba(10, 6, 20, 0.75);
  transition: box-shadow var(--brand-transition);
}

.newsletter-form:focus-within {
  box-shadow: 0 18px 38px -18px rgba(10, 6, 20, 0.75), 0 0 0 3px rgba(255, 185, 85, 0.45);
}

.newsletter-form-icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--brand-muted);
}

.newsletter-form-icon svg {
  width: 17px;
  height: 17px;
}

.newsletter-form .form-control,
.newsletter-form .form-control:focus {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0.5rem 0;
  font-size: 0.95rem;
  color: var(--brand-fg);
}

.newsletter-submit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2B1A05;
  background: linear-gradient(120deg, var(--brand-accent-light), #FFD08A);
  box-shadow: 0 6px 16px -6px rgba(184, 114, 26, 0.9);
  transition: transform var(--brand-transition), box-shadow var(--brand-transition), filter var(--brand-transition);
}

.newsletter-submit:hover:not(:disabled),
.newsletter-submit:focus-visible:not(:disabled) {
  color: #2B1A05;
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 10px 22px -8px rgba(184, 114, 26, 1);
}

.newsletter-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.newsletter-submit svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.newsletter-msg {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  margin-top: 0.65rem;
}

.newsletter-msg-success {
  color: #D6FFE3;
  background: rgba(47, 107, 58, 0.55);
  border: 1px solid rgba(214, 255, 227, 0.35);
}

.newsletter-msg-error {
  color: #FFE0E0;
  background: rgba(150, 32, 32, 0.55);
  border: 1px solid rgba(255, 224, 224, 0.35);
}

.newsletter-note {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0.65rem 0 0;
}

/* Below sm the pill becomes a rounded card: icon and field share the first row,
   the button takes the full second row.
   The field needs flex-basis 0 (not auto) — Bootstrap's .form-control sets
   width:100%, which an auto basis resolves to, and a 100%-wide first item
   wraps the icon onto a line of its own. */
@media (max-width: 575.98px) {
  .newsletter-form {
    flex-wrap: wrap;
    row-gap: 0.6rem;
    border-radius: var(--brand-radius-md);
    padding: 0.6rem 0.85rem;
  }

  .newsletter-form .form-control,
  .newsletter-form .form-control:focus {
    flex: 1 1 0;
    padding-left: 0.15rem;
  }

  .newsletter-submit {
    flex: 0 0 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.brand-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(85% 120% at 88% 0%, rgba(138, 38, 164, 0.2) 0%, transparent 55%),
    linear-gradient(180deg, #2B201A 0%, #1B1310 100%);
  color: rgba(255, 255, 255, 0.74);
}

/* Gold seam between the newsletter band and the footer */
.brand-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(184, 114, 26, 0.9) 30%, var(--brand-accent-light) 50%, rgba(184, 114, 26, 0.9) 70%, transparent);
}

.brand-footer::after {
  content: "";
  position: absolute;
  bottom: -9rem;
  left: -7rem;
  width: 26rem;
  aspect-ratio: 1;
  background: url("../images/site/mandala-inner.svg") center / contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: -1;
}

.brand-footer > .container {
  position: relative;
  z-index: 1;
}

.brand-footer h6 {
  position: relative;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 0.65rem;
}

.brand-footer h6::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-accent-light));
}

.brand-footer a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color var(--brand-transition), transform var(--brand-transition);
}

.brand-footer ul a {
  display: inline-block;
}

.brand-footer ul a:hover,
.brand-footer ul a:focus-visible {
  color: var(--brand-accent-light);
  transform: translateX(3px);
}

.brand-footer a:hover {
  color: #fff;
}

.footer-about-text {
  max-width: 320px;
  line-height: 1.6;
}

/* Direct contact channels, sharing the numbers used on the Contact page */
.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 1.35rem;
}

.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.86rem;
}

.footer-contact a:hover {
  color: var(--brand-accent-light);
}

.footer-contact svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--brand-accent-light);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.82rem;
}

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0.32rem 0.75rem;
}

.footer-badge svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--brand-accent-light);
}

@media (prefers-reduced-motion: reduce) {
  .brand-footer ul a:hover,
  .brand-footer ul a:focus-visible,
  .newsletter-submit:hover:not(:disabled) {
    transform: none;
  }
}

/* ==========================================================================
   Inner-page hero (About, Contact, etc.)
   ========================================================================== */
/* Animated mandala hero.
   Three stacked layers: a seamless block-print texture on the element itself, then two
   counter-rotating mandala rings on ::before / ::after that bleed in from the left and
   right edges. Only transform and opacity are animated, so the whole thing composites on
   the GPU and never triggers layout or repaint.

   Contrast note - these numbers are load-bearing, not decorative. The gradient alpha, the
   brightness of hero-mandala.jpg and the ring opacities together cap the banner's peak
   luminance. Measured off real screenshots, sampling the whole rotation cycle across the
   full .container width: heading 5.07:1, breadcrumb/lead 4.76:1 at 1200px wide (5.28 /
   4.95 at 1440px) - i.e. WCAG AA on both. The rings alone cost ~0.7:1 when a stroke swings
   into the text column, which is why they sit at 0.09/0.11 and the small text was lifted to
   0.95 alpha. Raising ring opacity, brightening the tile or lowering the gradient alpha
   drops the small text under 4.5:1 - re-measure rather than eyeball it. */
.page-hero {
  /* How far in from each edge the tile is wiped out so it does not collide with the rings.
     Two stops per side. --hero-tile-clear-* is the band the ring actually covers - its
     width minus how far it is pushed off-canvas (see the ::before / ::after offsets below),
     so 34rem - 13rem = 21rem, the same on both sides now that the rings match. Across that
     band the wipe is fully opaque, so a ring is never drawn on top of the tile: only one
     ornament is ever visible at a given x. --hero-tile-fade-* is where the wipe has finished
     ramping back out, a little further in, so the tile returns as a gradient rather than an
     edge. Keep fade > clear on both sides or the ramp collapses into a hard line.
     The percentages are a floor that stops the two bands meeting in the middle and erasing
     the tile entirely on a narrow viewport; resize a ring and the clear value has to move
     with it. */
  --hero-tile-clear-start: min(21rem, 23%);
  --hero-tile-clear-end: min(21rem, 23%);
  --hero-tile-fade-start: calc(var(--hero-tile-clear-start) + 3rem);
  --hero-tile-fade-end: calc(var(--hero-tile-clear-end) + 3rem);
  /* The three pieces of ornament, named so a page can swap in artwork that matches what
     it is showing without restating the gradients or the ring geometry. A mandala is the
     house default; Views/Collection/Index.cshtml overrides these per category (see the
     .hero-motif-* blocks in collection.css). Both stylesheets live in wwwroot/css, so
     these relative URLs resolve to the same files whichever one substitutes them. */
  --hero-motif-tile: url("../images/site/hero-mandala.svg");
  --hero-motif-ring-outer: url("../images/site/mandala-outer.svg");
  --hero-motif-ring-inner: url("../images/site/mandala-inner.svg");
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--brand-primary);
  background-image:
    linear-gradient(120deg, rgba(138, 38, 164, 0.84) 0%, rgba(72, 67, 159, 0.89) 100%),
    linear-gradient(90deg,
      var(--brand-primary) 0,
      var(--brand-primary) var(--hero-tile-clear-start),
      rgba(138, 38, 164, 0) var(--hero-tile-fade-start),
      rgba(138, 38, 164, 0) calc(100% - var(--hero-tile-fade-end)),
      var(--brand-primary) calc(100% - var(--hero-tile-clear-end)),
      var(--brand-primary) 100%),
    var(--hero-motif-tile);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 480px 480px;
  background-position: center, center, center;
  color: #fff;
  /* Shallow on purpose - these are utility pages (FAQ, policies, cart, errors) where the
     banner only has to name the page. Contact overrides the bottom half further down
     because its channel cards overlap up into it. */
  padding: clamp(1.9rem, 3.2vw, 2.35rem) 0;
  text-align: center;
}

/* Rings sit behind the copy; the copy is lifted above them rather than the rings being
   pushed behind the element, so no negative z-index escapes the isolation context. */
.page-hero > .container {
  position: relative;
  z-index: 1;
}

/* The two rings are one size and one offset, declared once here so they cannot drift
   apart again - the banner is symmetrical and only the artwork, the direction of travel
   and the glow tell the sides apart. Change the size and both --hero-tile-clear-* values
   have to move with it, since the wipe band is derived from 34rem - 13rem = 21rem. */
.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 34rem;
  margin-top: -17rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  will-change: transform;
}

/* Bleeding in from the right */
.page-hero::before {
  right: -13rem;
  background-image: var(--hero-motif-ring-outer);
  opacity: 0.09;
  animation: heroMandalaSpin 80s linear infinite;
}

/* And from the left, turning the other way, with a soft glow behind it */
.page-hero::after {
  left: -13rem;
  background-image:
    var(--hero-motif-ring-inner),
    radial-gradient(circle at 50% 50%, rgba(255, 185, 85, 0.20) 0%, rgba(255, 185, 85, 0) 68%);
  background-size: contain, cover;
  opacity: 0.11;
  animation:
    heroMandalaSpin 110s linear infinite reverse,
    heroMandalaBreathe 9s ease-in-out infinite;
}

@keyframes heroMandalaSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes heroMandalaBreathe {
  0%, 100% { opacity: 0.11; }
  50%      { opacity: 0.17; }
}

/* Motion is decoration here - the hero reads identically without it. */
@media (prefers-reduced-motion: reduce) {
  .page-hero::before,
  .page-hero::after,
  .confirmation-hero::before,
  .confirmation-hero::after {
    animation: none;
  }
}

/* Bootstrap's default h1 (2.5rem / 1.2 / 0.5rem below) is sized for a page body, not for a
   band this shallow - it left the title crowding both the crumb above and the lead below. */
.page-hero h1 {
  font-size: clamp(1.75rem, 3.2vw, 2.15rem);
  line-height: 1.18;
  margin-bottom: 0.45rem;
}

.page-hero .breadcrumb-trail {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.95);
}

.page-hero .breadcrumb-trail a {
  color: rgba(255, 255, 255, 0.95);
}

.page-hero-lead {
  color: rgba(255, 255, 255, 0.95);
  /* Tightened rather than shrunk - 18 pages share this lead and dropping the size would
     reflow some of them from two lines to one, which changes the banner height unevenly. */
  line-height: 1.55;
  max-width: 600px;
  margin: 0 auto;
}

/* ==========================================================================
   Stats band (About)
   ========================================================================== */
.stats-band {
  background-color: var(--brand-surface);
  border-top: 1px solid var(--brand-border);
  border-bottom: 1px solid var(--brand-border);
}

.stat-tile {
  text-align: center;
  padding: 1.5rem 1rem;
}

.stat-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.5rem;
  color: var(--brand-primary);
  line-height: 1;
}

.stat-label {
  color: var(--brand-muted);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* ==========================================================================
   Value cards (About)
   ========================================================================== */
.value-card {
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 0.75rem;
  padding: 1.75rem;
  height: 100%;
}

.value-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--brand-bg);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

/* ==========================================================================
   Story media placeholder (About)
   ========================================================================== */
.story-media {
  border-radius: 0.75rem;
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, var(--brand-primary), var(--brand-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   Contact page
   ========================================================================== */
/* The hero keeps extra bottom room so the channel cards can overlap into it. */
.contact-hero {
  padding-bottom: 6rem;
}

.contact-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.contact-hero-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--brand-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.45);
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(2px);
  transition: background-color var(--brand-transition), border-color var(--brand-transition), transform var(--brand-transition);
}

.contact-hero-action:hover,
.contact-hero-action:focus-visible {
  background-color: rgba(255, 255, 255, 0.22);
  border-color: #fff;
  color: #fff;
  transform: translateY(-2px);
}

.contact-hero-action-solid {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
}

.contact-hero-action-solid:hover,
.contact-hero-action-solid:focus-visible {
  background-color: var(--brand-accent-light);
  border-color: var(--brand-accent-light);
  color: var(--brand-fg);
}

.contact-hero-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 1.1rem 0 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.95);
}

.contact-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--brand-accent-light);
  flex-shrink: 0;
}

.contact-status-dot.is-open {
  background-color: #4ADE80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
  animation: contactStatusPulse 2.4s ease-out infinite;
}

.contact-status-dot.is-closed {
  background-color: var(--brand-accent-light);
}

@keyframes contactStatusPulse {
  70%  { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .contact-status-dot.is-open {
    animation: none;
  }
}

/* Channel cards ride up over the hero so the page opens on something tactile. */
.contact-channels {
  position: relative;
  z-index: 2;
  margin-top: -4.5rem;
  padding-bottom: 3rem;
}

.contact-channel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.4rem 1.25rem;
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 0.75rem;
  box-shadow: var(--brand-shadow-soft);
  text-decoration: none;
  color: var(--brand-fg);
  transition: transform var(--brand-transition), box-shadow var(--brand-transition), border-color var(--brand-transition);
}

.contact-channel:hover,
.contact-channel:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--brand-shadow-lift);
  border-color: var(--brand-primary);
  color: var(--brand-fg);
}

.contact-channel-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
}

.contact-channel-accent .contact-channel-icon {
  background: linear-gradient(135deg, var(--brand-accent), var(--brand-accent-light));
}

.contact-channel-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-muted);
  margin-bottom: 0.3rem;
}

.contact-channel-tag {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.66rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background-color: var(--brand-accent);
  color: #fff;
}

.contact-channel-value {
  font-weight: 600;
  font-size: 0.95rem;
  word-break: break-word;
  margin-bottom: 0.15rem;
}

.contact-channel-meta {
  font-size: 0.82rem;
  color: var(--brand-muted);
  margin-bottom: 0.9rem;
}

.contact-channel-cta {
  margin-top: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-primary);
}

.contact-eyebrow {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--brand-accent);
  margin-bottom: 0.35rem;
}

/* Contact-page-only treatment; the shared .contact-form-panel is also used by the blog. */
.contact-form-card {
  position: relative;
  overflow: hidden;
  box-shadow: var(--brand-shadow-soft);
}

.contact-form-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
}

.contact-required {
  color: var(--brand-accent);
}

.contact-subject {
  border: 0;
  padding: 0;
  margin: 0;
}

.contact-subject legend {
  float: none;
  width: auto;
  font-size: 0.85rem;
}

.contact-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.contact-chip-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.contact-chip {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: var(--brand-radius-pill);
  border: 1px solid var(--brand-border);
  background-color: var(--brand-bg);
  color: var(--brand-fg);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--brand-transition), background-color var(--brand-transition), color var(--brand-transition);
}

.contact-chip:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.contact-chip-input:checked + .contact-chip {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.contact-chip-input:focus-visible + .contact-chip {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.contact-success {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: var(--brand-radius-md);
  border: 1px solid rgba(47, 107, 58, 0.3);
  background-color: rgba(47, 107, 58, 0.08);
  color: var(--brand-success);
  font-size: 0.9rem;
}

.contact-success svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.contact-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 0.5rem;
}

.contact-privacy-note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--brand-muted);
}

.contact-privacy-note svg {
  color: var(--brand-success);
  flex-shrink: 0;
}

.contact-rail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.contact-side-card {
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.contact-side-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.contact-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--brand-radius-pill);
  background-color: var(--brand-bg);
  border: 1px solid var(--brand-border);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--brand-muted);
}

.contact-hours {
  list-style: none;
  padding: 0;
  margin: 0 0 0.85rem;
}

.contact-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  font-size: 0.87rem;
  border-bottom: 1px dashed var(--brand-border);
}

.contact-hours li:last-child {
  border-bottom: 0;
}

.contact-hours li span:first-child {
  color: var(--brand-muted);
}

.contact-hours li span:last-child {
  font-weight: 600;
}

.contact-hours-off {
  color: var(--brand-accent);
}

.contact-side-note {
  font-size: 0.78rem;
  color: var(--brand-muted);
}

.contact-astro-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 0.75rem;
  padding: 1.5rem 1.25rem;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
}

.contact-astro-card::after {
  content: "";
  position: absolute;
  right: -3.5rem;
  bottom: -4.5rem;
  width: 12rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 185, 85, 0.35) 0%, rgba(255, 185, 85, 0) 70%);
  pointer-events: none;
  z-index: -1;
}

.contact-astro-badge {
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background-color: var(--brand-accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.contact-astro-text {
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 1rem;
}

.contact-astro-btn {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border-radius: var(--brand-radius-pill);
  background-color: #fff;
  color: var(--brand-primary);
  font-size: 0.83rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--brand-transition), transform var(--brand-transition);
}

.contact-astro-btn:hover,
.contact-astro-btn:focus-visible {
  background-color: var(--brand-accent-light);
  color: var(--brand-fg);
  transform: translateY(-2px);
}

.contact-visit-card {
  text-align: center;
}

.contact-visit-map {
  height: 84px;
  margin: -1.25rem -1.25rem 1rem;
  border-radius: 0.75rem 0.75rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);
  background-color: var(--brand-bg);
  background-image:
    linear-gradient(var(--brand-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--brand-border) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px;
}

.contact-side-address {
  font-size: 0.87rem;
  color: var(--brand-muted);
}

.contact-side-link,
.contact-faq-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-primary);
  text-decoration: none;
}

.contact-side-link:hover,
.contact-faq-link:hover {
  color: var(--brand-accent);
}

.contact-faq-band .accordion-item {
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-md);
  margin-bottom: 0.6rem;
  overflow: hidden;
  background-color: var(--brand-surface);
}

.contact-faq-band .accordion-button {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--brand-fg);
  background-color: var(--brand-surface);
}

.contact-faq-band .accordion-button:not(.collapsed) {
  color: var(--brand-primary);
  background-color: var(--brand-bg);
  box-shadow: none;
}

.contact-faq-band .accordion-button:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem rgba(138, 38, 164, 0.15);
}

.contact-faq-band .accordion-body {
  font-size: 0.9rem;
  color: var(--brand-muted);
}

.contact-faq-band .accordion-body a {
  color: var(--brand-primary);
  font-weight: 600;
}

.contact-form-panel {
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 0.75rem;
  padding: 2rem;
}

.contact-form-panel .form-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--brand-fg);
}

.contact-form-panel .form-control,
.contact-form-panel .form-select {
  border-color: var(--brand-border);
  padding: 0.6rem 0.85rem;
}

.contact-form-panel .form-control:focus,
.contact-form-panel .form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem rgba(107, 31, 42, 0.15);
}

/* ==========================================================================
   Gemstone calculator
   ========================================================================== */
.gem-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gem-icon-lg {
  width: 96px;
  height: 96px;
}

.gem-icon-lg svg {
  width: 48px;
  height: 48px;
}

.gem-icon.tone-ruby { background-color: #9B1B3018; color: #9B1B30; }
.gem-icon.tone-pearl { background-color: #EDE6DC; color: #8A7B65; }
.gem-icon.tone-coral { background-color: #C2410C18; color: #C2410C; }
.gem-icon.tone-emerald { background-color: #1F7A4D18; color: #1F7A4D; }
.gem-icon.tone-yellow { background-color: #CA8A0418; color: #CA8A04; }
.gem-icon.tone-diamond { background-color: #7C93A818; color: #5A7186; }
.gem-icon.tone-blue { background-color: #1E40AF18; color: #1E40AF; }
.gem-icon.tone-hessonite { background-color: #B4530918; color: #B45309; }
.gem-icon.tone-catseye { background-color: #6B7A3A18; color: #6B7A3A; }

.calc-result-panel {
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 0.75rem;
  padding: 2rem;
}

.calc-result-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-accent);
}

.calc-hindi {
  color: var(--brand-muted);
  font-weight: 400;
}

.calc-result-list li {
  padding: 0.25rem 0;
  border-bottom: 1px dashed var(--brand-border);
}

.calc-result-list li:last-child {
  border-bottom: none;
}

.calc-disclaimer {
  font-size: 0.8rem;
  color: var(--brand-muted);
  border-top: 1px solid var(--brand-border);
  padding-top: 1rem;
}

.gem-table-wrap {
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 0.75rem;
  padding: 0.5rem 1rem;
}

.gem-table {
  margin-bottom: 0;
}

.gem-table th {
  color: var(--brand-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  border-bottom-color: var(--brand-border);
}

.gem-table td {
  border-bottom-color: var(--brand-border);
  vertical-align: middle;
}

.gem-table tr:last-child td {
  border-bottom: none;
}

/* Rudraksha (Mukhi) tones */
.gem-icon.tone-mukhi-1 { background-color: #6B1F2A18; color: #6B1F2A; }
.gem-icon.tone-mukhi-2 { background-color: #8A7B6518; color: #8A7B65; }
.gem-icon.tone-mukhi-3 { background-color: #C2410C18; color: #C2410C; }
.gem-icon.tone-mukhi-4 { background-color: #1F7A4D18; color: #1F7A4D; }
.gem-icon.tone-mukhi-5 { background-color: #A1620718; color: #A16207; }
.gem-icon.tone-mukhi-6 { background-color: #7C3AED18; color: #7C3AED; }
.gem-icon.tone-mukhi-7 { background-color: #CA8A0418; color: #CA8A04; }
.gem-icon.tone-mukhi-8 { background-color: #B4530918; color: #B45309; }
.gem-icon.tone-mukhi-9 { background-color: #9B1B3018; color: #9B1B30; }
.gem-icon.tone-mukhi-10 { background-color: #1E40AF18; color: #1E40AF; }
.gem-icon.tone-mukhi-11 { background-color: #0F766E18; color: #0F766E; }
.gem-icon.tone-mukhi-12 { background-color: #CA8A0418; color: #CA8A04; }
.gem-icon.tone-mukhi-13 { background-color: #DB277718; color: #DB2777; }
.gem-icon.tone-mukhi-14 { background-color: #4E162018; color: #4E1620; }

/* Bracelet crystal tones */
.gem-icon.tone-quartz { background-color: #7C93A818; color: #5A7186; }
.gem-icon.tone-bloodstone { background-color: #1F7A4D18; color: #1F7A4D; }
.gem-icon.tone-aventurine { background-color: #3F8F5518; color: #3F8F55; }
.gem-icon.tone-amethyst { background-color: #7C3AED18; color: #7C3AED; }
.gem-icon.tone-pyrite { background-color: #CA8A0418; color: #CA8A04; }
.gem-icon.tone-citrine { background-color: #EA8C0018; color: #EA8C00; }
.gem-icon.tone-obsidian { background-color: #B4530918; color: #B45309; }
.gem-icon.tone-rosequartz { background-color: #DB277718; color: #DB2777; }
.gem-icon.tone-sunstone { background-color: #EA580C18; color: #EA580C; }
.gem-icon.tone-turquoise { background-color: #0F766E18; color: #0F766E; }
.gem-icon.tone-dragonagate { background-color: #9B1B3018; color: #9B1B30; }
.gem-icon.tone-moonstone { background-color: #7C93A818; color: #5A7186; }
.gem-icon.tone-azurite { background-color: #1E40AF18; color: #1E40AF; }
.gem-icon.tone-jade { background-color: #1F7A4D18; color: #1F7A4D; }

/* Benefit / step lists used by the Rudraksha & Bracelet calculators */
.calc-benefit-list,
.calc-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.calc-benefit-list li,
.calc-steps-list li {
  position: relative;
  padding: 0.5rem 0 0.5rem 2.25rem;
  border-bottom: 1px dashed var(--brand-border);
  color: var(--brand-fg);
}

.calc-benefit-list li:last-child,
.calc-steps-list li:last-child {
  border-bottom: none;
}

.calc-benefit-list li::before {
  content: "\2726";
  position: absolute;
  left: 0;
  top: 0.5rem;
  color: var(--brand-accent);
}

.calc-steps-list {
  counter-reset: calc-step;
}

.calc-steps-list li::before {
  counter-increment: calc-step;
  content: counter(calc-step);
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--brand-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cross-links between the four calculators */
.calc-cross-link {
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
  color: var(--brand-fg);
}

.calc-cross-link:hover {
  border-color: var(--brand-accent);
  transform: translateY(-2px);
  color: var(--brand-fg);
}

/* Carat / Ratti converter */
.converter-input {
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
}

/* ==========================================================================
   Policy pages (Privacy, Shipping, Refund)
   ========================================================================== */
.policy-toc {
  position: sticky;
  top: 100px;
  border-left: 2px solid var(--brand-border);
  padding-left: 1.25rem;
}

.policy-toc-title {
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-muted);
  margin-bottom: 0.75rem;
}

.policy-toc ul li {
  margin-bottom: 0.6rem;
}

.policy-toc a {
  color: var(--brand-fg);
  text-decoration: none;
  font-size: 0.88rem;
}

.policy-toc a:hover,
.policy-toc a:focus-visible {
  color: var(--brand-primary);
}

.policy-updated {
  color: var(--brand-muted);
  font-size: 0.85rem;
  margin-bottom: 2rem;
}

.policy-section {
  scroll-margin-top: 100px;
  margin-bottom: 2.25rem;
}

.policy-section:last-child {
  margin-bottom: 0;
}

.policy-section h2 {
  color: var(--brand-primary);
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}

.policy-section p,
.policy-section li {
  color: var(--brand-muted);
}

.policy-section ul {
  padding-left: 1.25rem;
}

.policy-section li {
  margin-bottom: 0.4rem;
}

.policy-highlight {
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-left: 4px solid var(--brand-accent);
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
}

.policy-highlight ul {
  margin-bottom: 0;
}

/* The cart empty state moved to css/cart.css with the rest of that page; the
   product detail page likewise owns its gallery, tabs and spec styling in
   css/product-detail.css. Both are loaded only on their own route. */

.content-point-list {
  padding-left: 1.25rem;
  color: var(--brand-fg);
}

.content-point-list li {
  margin-bottom: 0.6rem;
  padding-left: 0.25rem;
}

.content-point-list li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Accordion (FAQ)
   ========================================================================== */
.accordion-item {
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-md) !important;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.accordion-item:last-child {
  margin-bottom: 0;
}

.accordion-button {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--brand-fg);
  background-color: var(--brand-surface);
  padding: 1.1rem 1.25rem;
}

.accordion-button:not(.collapsed) {
  color: var(--brand-primary);
  background-color: rgba(138, 38, 164, 0.06);
  box-shadow: inset 0 -1px 0 var(--brand-border);
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(138, 38, 164, 0.15);
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6683' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A26A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.accordion-body {
  color: var(--brand-muted);
  padding: 0 1.25rem 1.25rem;
}

.accordion-body a {
  font-weight: 600;
}

/* ==========================================================================
   Auth pages
   ========================================================================== */
.auth-panel {
  max-width: 420px;
}

.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 400px);
  background-color: var(--brand-bg);
  /* Was 3rem: the card is small enough that the extra band just pushed the page
     into scrolling without adding anything. */
  padding: 1.75rem 1rem;
}

.auth-page-card {
  width: 100%;
  max-width: 400px;
}

/* Scoped to the page, not .auth-modal-content, so the login modal used across
   the rest of the site keeps its own proportions. */
.auth-page .modal-header {
  padding: 1.35rem 1.5rem 0;
}

.auth-page .modal-title {
  font-size: 1.15rem;
}

.auth-page .modal-body {
  padding: 0.9rem 1.5rem 1.4rem;
}

.auth-page .auth-modal-tabs {
  margin-bottom: 0.9rem !important;
}

.auth-page .form-control {
  padding: 0.5rem 0.85rem;
}

.auth-page .mb-3 {
  margin-bottom: 0.75rem !important;
}

/* Mobile: keep the login/register card comfortable on small screens and
   stop iOS Safari from auto-zooming when a field gains focus (inputs must
   render at >=16px for that). */
@media (max-width: 575.98px) {
  .auth-page {
    min-height: auto;
    padding: 1.5rem 0.85rem 2.5rem;
    align-items: flex-start;
  }

  .auth-page-card {
    max-width: 100%;
  }

  .auth-modal-content .modal-header {
    padding: 1.35rem 1.25rem 0;
  }

  .auth-modal-content .modal-title {
    font-size: 1.25rem;
  }

  .auth-modal-content .modal-body {
    padding: 1rem 1.25rem 1.5rem;
  }

  /* Tab toggle: allow the two pills to shrink together instead of
     overflowing the card on the narrowest phones. */
  .auth-modal-tabs .nav-link {
    padding: 0.5rem 0.4rem;
    font-size: 0.82rem;
    white-space: nowrap;
  }

  /* 16px inputs prevent the focus-zoom jump on iOS. */
  .auth-modal-content .form-control {
    font-size: 16px;
    padding: 0.6rem 0.8rem;
  }

  /* Must come after the .form-control shorthand above, which sits at equal
     specificity and would otherwise reset the right padding and let the
     value run underneath the eye toggle. */
  .auth-password-field .form-control {
    padding-right: 3rem;
  }

  /* Meet the 44px minimum touch target. */
  .auth-password-toggle {
    width: 2.75rem;
    height: 2.75rem;
    right: 0.25rem;
  }
}

/* ==========================================================================
   Order status badges (guest order tracking; also used by the Customer &
   Admin areas, which define their own color tokens for these same classes)
   ========================================================================== */
.order-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.order-status-pending { background-color: var(--brand-border); color: var(--brand-muted); }
.order-status-confirmed,
.order-status-processing { background-color: #FDF3E3; color: var(--brand-accent); }
.order-status-shipped { background-color: #E8EEF7; color: #2563A6; }
.order-status-delivery-attempted { background-color: #FDF3E3; color: var(--brand-accent); }
.order-status-delivered { background-color: #E6F2E8; color: var(--brand-success); }
.order-status-delivery-failed,
.order-status-cancelled { background-color: #FBEAEC; color: var(--brand-primary); }

/* ==========================================================================
   Return request status badges (Customer & Admin areas - same class-naming
   convention as the order-status-badge block above)
   ========================================================================== */
.return-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.return-status-pending { background-color: #FDF3E3; color: var(--brand-accent); }
.return-status-approved { background-color: #E8EEF7; color: #2563A6; }
.return-status-refunded { background-color: #E6F2E8; color: var(--brand-success); }
.return-status-rejected { background-color: #FBEAEC; color: var(--brand-primary); }

/* ==========================================================================
   Refund status badges (guest order tracking - same class-naming convention
   as the two blocks above; the Admin area defines its own tokens for these)
   ========================================================================== */
.refund-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.refund-status-none { background-color: var(--brand-border); color: var(--brand-muted); }
.refund-status-initiated,
.refund-status-in-progress,
.refund-status-return-initiated,
.refund-status-partial { background-color: #FDF3E3; color: var(--brand-accent); }
.refund-status-refunded { background-color: #E6F2E8; color: var(--brand-success); }
.refund-status-failed { background-color: #FBEAEC; color: var(--brand-primary); }

/* ==========================================================================
   Order stepper & section cards (shared visual language with the Customer
   area's order detail page - see customer.css)
   ========================================================================== */
.order-section-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-bg);
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.order-card-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  margin-bottom: 1rem;
}

.order-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.order-stepper-step {
  flex: 1;
  text-align: center;
  position: relative;
  min-width: 0;
}

.order-stepper-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--brand-border);
  z-index: 0;
}

.order-stepper-step.completed:not(:last-child)::after {
  background: var(--brand-primary);
}

.order-stepper-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-surface);
  border: 2px solid var(--brand-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.5rem;
  position: relative;
  z-index: 1;
  color: var(--brand-muted);
  font-weight: 600;
  font-size: 0.85rem;
}

.order-stepper-step.completed .order-stepper-dot {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.order-stepper-step.current .order-stepper-dot {
  background: var(--brand-surface);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(138, 38, 164, 0.15);
}

.order-stepper-label {
  font-size: 0.72rem;
  color: var(--brand-muted);
  font-weight: 600;
}

/* Refunded orders run to seven steps instead of five, and "Refund In Progress" is
   the longest label of the lot - shrink the type so the line still fits without the
   labels wrapping into each other. Wins on specificity over the customer panel's
   own .order-stepper-label, which loads after this file. */
.order-stepper.has-refund-steps .order-stepper-label {
  font-size: 0.64rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  display: inline-block;
  padding: 0 0.15rem;
}

.order-stepper-step.completed .order-stepper-label,
.order-stepper-step.current .order-stepper-label {
  color: var(--brand-fg);
}

.order-cancelled-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #FBEAEC;
  color: var(--brand-primary);
  border-radius: var(--brand-radius-sm);
  padding: 1rem 1.25rem;
  font-weight: 600;
}

/* ==========================================================================
   Order confirmation page
   ========================================================================== */
.confirmation-card {
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-md);
  box-shadow: var(--brand-shadow-soft);
}

/* Same three-layer mandala treatment as .page-hero (block-print tile plus two
   counter-rotating rings), kept at the identical gradient alphas and ring opacities so the
   measured contrast on that hero carries over unchanged. The rings are scaled down because
   this is a rounded card inside the container rather than a full-bleed band. */
.confirmation-hero {
  /* Sized to this card's smaller rings - see .page-hero for what these do. Clear bands are
     18rem - 7rem on the left and 26rem - 10rem on the right, i.e. exactly the ring each
     side shows. */
  --hero-tile-clear-start: min(11rem, 16%);
  --hero-tile-clear-end: min(16rem, 22%);
  --hero-tile-fade-start: calc(var(--hero-tile-clear-start) + 3rem);
  --hero-tile-fade-end: calc(var(--hero-tile-clear-end) + 3rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--brand-primary);
  background-image:
    linear-gradient(120deg, rgba(138, 38, 164, 0.84) 0%, rgba(72, 67, 159, 0.89) 100%),
    linear-gradient(90deg,
      var(--brand-primary) 0,
      var(--brand-primary) var(--hero-tile-clear-start),
      rgba(138, 38, 164, 0) var(--hero-tile-fade-start),
      rgba(138, 38, 164, 0) calc(100% - var(--hero-tile-fade-end)),
      var(--brand-primary) calc(100% - var(--hero-tile-clear-end)),
      var(--brand-primary) 100%),
    url("../images/site/hero-mandala.svg");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 480px 480px;
  background-position: center, center, center;
  color: #fff;
  border-radius: var(--brand-radius-md);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--brand-shadow-lift);
  margin-bottom: 2rem;
}

/* The copy is lifted above the rings rather than the rings pushed behind the card, so no
   negative z-index escapes the isolation context. */
.confirmation-hero > * {
  position: relative;
  z-index: 1;
}

.confirmation-hero::before,
.confirmation-hero::after {
  content: "";
  position: absolute;
  top: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  will-change: transform;
}

/* Large ring bleeding in from the right */
.confirmation-hero::before {
  right: -10rem;
  width: 26rem;
  margin-top: -13rem;
  background-image: url("../images/site/mandala-outer.svg");
  opacity: 0.09;
  animation: heroMandalaSpin 80s linear infinite;
}

/* Smaller ring from the left, turning the other way, with a soft glow behind it */
.confirmation-hero::after {
  left: -7rem;
  width: 18rem;
  margin-top: -9rem;
  background-image:
    url("../images/site/mandala-inner.svg"),
    radial-gradient(circle at 50% 50%, rgba(255, 185, 85, 0.20) 0%, rgba(255, 185, 85, 0) 68%);
  background-size: contain, cover;
  opacity: 0.11;
  animation:
    heroMandalaSpin 110s linear infinite reverse,
    heroMandalaBreathe 9s ease-in-out infinite;
}

.confirmation-hero h1 {
  color: #fff;
}

.confirmation-hero .text-muted-inverse {
  color: rgba(255, 255, 255, 0.85);
}

.confirmation-check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  animation: confirmationPop 500ms ease;
}

@keyframes confirmationPop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

.confirmation-order-number {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--brand-radius-pill);
  padding: 0.35rem 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 0.75rem;
}

/* ==========================================================================
   Payment failed / retry page
   ========================================================================== */
.payment-failed-wrap {
  max-width: 640px;
}

.payment-failed-hero {
  background: linear-gradient(120deg, #8E2E4A 0%, var(--brand-primary-dark) 100%);
  color: #fff;
  border-radius: var(--brand-radius-md);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--brand-shadow-lift);
  margin-bottom: 1.5rem;
}

.payment-failed-hero h1 {
  color: #fff;
}

.payment-failed-hero .text-muted-inverse {
  color: rgba(255, 255, 255, 0.85);
}

.payment-failed-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  animation: paymentFailedPop 500ms ease;
}

@keyframes paymentFailedPop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

.payment-failed-order-number {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--brand-radius-pill);
  padding: 0.35rem 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 0.75rem;
}

.payment-failed-reason {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background: #FDF1F3;
  border: 1px solid #F3D3DA;
  border-left: 3px solid #8E2E4A;
  border-radius: var(--brand-radius-sm);
  color: #7A2A40;
  padding: 0.75rem 0.9rem;
  font-size: 0.92rem;
  margin-bottom: 1.5rem;
}

.payment-failed-reason svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.payment-failed-tips {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.payment-failed-tips li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.7rem 0;
  border-bottom: 1px dashed var(--brand-border);
}

.payment-failed-tips li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.payment-failed-tips strong {
  display: block;
  font-size: 0.95rem;
  color: var(--brand-fg);
}

.payment-failed-tips span:not(.payment-failed-tip-dot) {
  font-size: 0.88rem;
  color: var(--brand-muted);
}

.payment-failed-tip-dot {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  color: var(--brand-primary);
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.payment-failed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.payment-failed-actions .btn {
  flex: 1 1 200px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.payment-failed-support {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-md);
  box-shadow: var(--brand-shadow-soft);
  padding: 1rem 1.25rem;
}

.payment-failed-support-text strong {
  display: block;
  font-size: 0.95rem;
}

.payment-failed-support-text span {
  font-size: 0.85rem;
  color: var(--brand-muted);
}

.payment-failed-support-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}

.payment-failed-support-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand-primary);
  text-decoration: none;
}

.payment-failed-support-links a:hover {
  color: var(--brand-primary-dark);
  text-decoration: underline;
}

.payment-failed-home-link {
  font-size: 0.88rem;
  color: var(--brand-muted);
  text-decoration: none;
}

.payment-failed-home-link:hover {
  color: var(--brand-primary);
}

@media (max-width: 575.98px) {
  .payment-failed-hero {
    padding: 2rem 1.25rem;
  }

  .payment-failed-actions .btn {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   Fancy select
   --------------------------------------------------------------------------
   A select's option list is drawn by the OS, so no rule here reaches inside
   it - every dropdown on the site opened as a grey box with a system-blue
   highlight. fancy-select.js swaps in this listbox wherever a select carries
   data-fancy-select and keeps the real select as the field that submits.

   The trigger keeps the select's own classes, so the per-page rules that
   styled the select (pill filters, form fields, small toolbar controls) still
   apply to it and each context keeps its own look. Only the caret and the
   menu are defined here, so they stay identical site-wide.
   ========================================================================== */
.fancy-select {
  position: relative;
}

/* Off-screen rather than display:none: the select is still the field that
   submits, and constraint validation refuses to focus a hidden control. */
.fancy-select select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fancy-select__trigger {
  position: relative;
  display: block;
  width: 100%;
  text-align: start;
  cursor: pointer;
  /* The caret is a real element now; drop the one .form-select paints into
     the background. Its padding-right already reserves the room. */
  background-image: none;
}

.fancy-select__trigger:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.fancy-select__value {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fancy-select__value.is-placeholder {
  color: var(--brand-muted);
}

/* Sits where .form-select's background arrow sat (right 0.75rem, centred), so
   the control looks unchanged until it is opened. */
.fancy-select__caret {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  width: 0.95rem;
  height: 0.95rem;
  margin-top: -0.475rem;
  color: var(--brand-primary);
  pointer-events: none;
  /* The token carries its own duration ("220ms ease-in-out"), so it is the
     whole value here - pairing it with one reads as a transition-delay. */
  transition: transform var(--brand-transition);
}

.fancy-select__trigger[aria-expanded="true"] .fancy-select__caret {
  transform: rotate(180deg);
}

/* Positioned in page coordinates by the script - it lives on <body> so filter
   bars and cards that clip their overflow cannot cut it off. */
.fancy-select__menu {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1080;
  max-height: 15rem;
  margin: 0;
  padding: 0.35rem;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-md);
  background: var(--brand-surface);
  box-shadow: 0 18px 40px -16px rgba(33, 29, 54, 0.38);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.fancy-select__menu.is-up {
  transform: translateY(6px);
}

.fancy-select__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fancy-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  border-radius: var(--brand-radius-sm);
  font-size: 0.92rem;
  color: var(--brand-fg);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.fancy-select__option.is-active {
  background: rgba(138, 38, 164, 0.08);
  color: var(--brand-primary);
}

.fancy-select__option[aria-selected="true"] {
  font-weight: 600;
  color: var(--brand-primary);
}

.fancy-select__option[aria-disabled="true"] {
  color: var(--brand-muted);
  opacity: 0.6;
  cursor: default;
}

/* Tick on the chosen row, drawn from two borders so it needs no icon font. */
.fancy-select__option[aria-selected="true"]::after {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.68rem;
  margin-inline-end: 0.15rem;
  border-right: 2px solid var(--brand-accent);
  border-bottom: 2px solid var(--brand-accent);
  transform: rotate(45deg) translate(-1px, -1px);
}

@media (prefers-reduced-motion: reduce) {
  .fancy-select__menu,
  .fancy-select__caret {
    transition: none;
  }
}

/* ==========================================================================
   Hero finder card
   ========================================================================== */
.hero-carousel {
  position: relative;
}

.hero-finder-card {
  display: none;
}

@media (min-width: 992px) {
  .hero-finder-card {
    display: block;
    position: absolute;
    top: 50%;
    right: 4rem;
    transform: translateY(-50%);
    z-index: 2;
    width: 320px;
    background-color: var(--brand-surface);
    border-radius: var(--brand-radius-md);
    border-top: 3px solid var(--brand-accent);
    box-shadow: 0 24px 48px rgba(20, 14, 12, 0.28);
    padding: 1.5rem;
    animation: hero-fade-up 800ms ease-out 260ms both;
  }
}

/* ==========================================================================
   Zodiac cards
   ========================================================================== */
.zodiac-card {
  display: block;
  height: 100%;
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-md);
  padding: 1.25rem 0.75rem;
  text-align: center;
  text-decoration: none;
  color: var(--brand-fg);
  transition: transform var(--brand-transition), box-shadow var(--brand-transition), border-color var(--brand-transition);
}

.zodiac-card:hover,
.zodiac-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--brand-shadow-lift);
  border-color: var(--brand-primary);
}

.zodiac-card:hover .zodiac-icon,
.zodiac-card:focus-visible .zodiac-icon {
  background-color: var(--brand-primary);
  color: #fff;
}

.zodiac-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--brand-bg);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.5rem;
  transition: background-color var(--brand-transition), color var(--brand-transition);
}

.zodiac-glyph {
  font-size: 1.4rem;
  line-height: 1;
  font-variant-emoji: text;
}

.zodiac-sign {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  margin-top: 0.35rem;
}

.zodiac-range {
  display: block;
  font-size: 0.75rem;
  color: var(--brand-muted);
}

/* ==========================================================================
   Premium category tiles
   ========================================================================== */
.premium-category-tile {
  position: relative;
  display: block;
  border-radius: var(--brand-radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: var(--brand-primary);
  box-shadow: var(--brand-shadow-soft);
  text-decoration: none;
  transition: box-shadow var(--brand-transition), transform var(--brand-transition);
}

.premium-category-tile:hover {
  box-shadow: var(--brand-shadow-lift);
  transform: translateY(-4px);
}

.premium-category-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
  transition: transform 420ms ease;
}

.premium-category-tile:hover img {
  transform: scale(1.06);
}

.premium-category-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem;
  background: linear-gradient(to top, rgba(30, 27, 24, 0.85), transparent);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   Story banner
   ========================================================================== */
.story-banner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  border-radius: 1rem;
  overflow: hidden;
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
}

@media (min-width: 768px) {
  .story-banner {
    grid-template-columns: 1fr 1fr;
  }
}

.story-banner img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

.story-banner-body {
  padding: 2rem 2.5rem;
}

/* ==========================================================================
   Certification strip
   ========================================================================== */
.certification-strip {
  background-color: var(--brand-bg);
  border-top: 1px solid var(--brand-border);
  border-bottom: 1px solid var(--brand-border);
}

.certification-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.certification-item svg {
  color: var(--brand-accent);
  flex-shrink: 0;
}

/* ==========================================================================
   Cart page interactivity
   ========================================================================== */
.cart-row {
  transition: opacity 200ms ease, transform 200ms ease;
}

.cart-row.is-removing {
  opacity: 0;
  transform: translateX(16px);
}

.cart-row.is-updating {
  opacity: 0.55;
}

.cart-qty-group button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cart-qty-group input[data-cart-qty-input]:disabled {
  background-color: var(--brand-bg);
}

@keyframes cartValueFlash {
  0% { background-color: rgba(138, 38, 164, 0.14); }
  100% { background-color: transparent; }
}

.cart-value-flash {
  animation: cartValueFlash 700ms ease;
  border-radius: var(--brand-radius-sm);
}

#cartAlert:not(.d-none) {
  animation: cartValueFlash 400ms ease;
}

#cartContainer,
#cartEmptyState {
  transition: opacity 200ms ease;
}

#cartContainer.is-swapping {
  opacity: 0;
}

/* ==========================================================================
   Checkout
   ========================================================================== */
.checkout-option {
  cursor: pointer;
  transition: border-color var(--brand-transition), box-shadow var(--brand-transition), background-color var(--brand-transition), transform var(--brand-transition);
}

.checkout-option:hover {
  border-color: var(--brand-primary);
}

.checkout-option.is-selected {
  border-color: var(--brand-primary);
  background-color: var(--brand-bg);
  box-shadow: var(--brand-shadow-soft);
}

.checkout-option:has(input:focus-visible) {
  box-shadow: 0 0 0 0.2rem rgba(138, 38, 164, 0.15);
}

.checkout-option input[type="radio"] {
  accent-color: var(--brand-primary);
  margin-top: 0.2rem;
}

@media (min-width: 992px) {
  .checkout-summary-card {
    position: sticky;
    top: 1.5rem;
  }
}

.checkout-submit-btn.is-loading {
  pointer-events: none;
  opacity: 0.8;
}

.checkout-postal-spinner {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--brand-border);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: checkoutPostalSpin 700ms linear infinite;
  vertical-align: -1px;
  margin-right: 0.35rem;
}

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

/* ==========================================================================
   Payment page
   ========================================================================== */
.payment-page {
  position: relative;
  overflow: hidden;
}

.payment-container {
  position: relative;
  z-index: 1;
  max-width: 520px;
}

/* Soft ambient colour wash behind the card. */
.payment-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  pointer-events: none;
}

.payment-glow-one {
  top: -90px;
  left: 50%;
  width: 340px;
  height: 340px;
  margin-left: -280px;
  background: radial-gradient(circle, rgba(138, 38, 164, 0.35), transparent 70%);
}

.payment-glow-two {
  bottom: -110px;
  left: 50%;
  width: 300px;
  height: 300px;
  margin-left: 20px;
  background: radial-gradient(circle, rgba(255, 185, 85, 0.35), transparent 70%);
}

/* --- Progress rail --- */
.payment-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}

.payment-step {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand-muted);
}

.payment-step + .payment-step::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-border);
  margin-right: 0.5rem;
}

.payment-step.is-current + .payment-step::before,
.payment-step.is-done + .payment-step::before {
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-border));
}

.payment-step-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  color: var(--brand-muted);
}

.payment-step.is-done .payment-step-dot {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.payment-step.is-current {
  color: var(--brand-fg);
}

.payment-step.is-current .payment-step-dot {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(138, 38, 164, 0.14);
}

.payment-step-label {
  white-space: nowrap;
}

/* --- Card --- */
.payment-card {
  position: relative;
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(33, 29, 54, 0.1), var(--brand-shadow-soft);
  padding: 2.25rem 1.75rem 1.75rem;
  overflow: hidden;
  animation: paymentCardIn 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.payment-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-dark) 45%, var(--brand-accent-light));
}

@media (min-width: 768px) {
  .payment-card {
    padding: 2.75rem 2.5rem 2rem;
  }
}

@keyframes paymentCardIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

.payment-card-icon {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.1rem;
  box-shadow: 0 10px 22px rgba(138, 38, 164, 0.32);
  animation: confirmationPop 500ms ease;
}

/* Slow breathing halo — signals "secure, live session". */
.payment-card-icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(138, 38, 164, 0.3);
  animation: paymentHalo 2.6s ease-out infinite;
}

@keyframes paymentHalo {
  0% {
    transform: scale(0.94);
    opacity: 0.7;
  }
  70%, 100% {
    transform: scale(1.22);
    opacity: 0;
  }
}

.payment-title {
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
}

.payment-subtitle {
  font-size: 0.88rem;
  color: var(--brand-muted);
  margin-bottom: 1.1rem;
}

.payment-order-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-pill);
  padding: 0.3rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand-muted);
  margin-bottom: 1.4rem;
}

.payment-amount-box {
  position: relative;
  background: linear-gradient(160deg, #FDFBFF, var(--brand-bg));
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  padding: 1.35rem 1.15rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

/* Faint guilloche-style rings, like a security print on a receipt. */
.payment-amount-box::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 22px solid rgba(138, 38, 164, 0.05);
  pointer-events: none;
}

.payment-amount-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--brand-muted);
  margin-bottom: 0.35rem;
}

.payment-amount-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.35rem;
  line-height: 1.1;
  font-weight: 700;
  color: var(--brand-fg);
  font-variant-numeric: tabular-nums;
}

.payment-amount-symbol {
  font-size: 0.72em;
  margin-right: 0.05em;
  color: var(--brand-primary);
}

.payment-amount-value small {
  font-size: 0.4em;
  font-weight: 600;
  color: var(--brand-muted);
  margin-left: 0.25rem;
  vertical-align: 0.35em;
  letter-spacing: 0.04em;
}

.payment-amount-note {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: var(--brand-muted);
}

.payment-pay-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  font-weight: 600;
  border-radius: var(--brand-radius-pill);
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(72, 67, 159, 0.24);
  transition: transform var(--brand-transition), box-shadow var(--brand-transition);
}

.payment-pay-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--brand-shadow-lift);
}

.payment-pay-btn:active:not(:disabled) {
  transform: translateY(0);
}

/* Slow sheen sweep across the CTA. */
.payment-pay-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-20deg);
  animation: paymentSheen 3.6s ease-in-out infinite;
}

@keyframes paymentSheen {
  0%, 55% {
    left: -60%;
  }
  85%, 100% {
    left: 130%;
  }
}

.payment-btn-content {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.payment-btn-spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: checkoutPostalSpin 700ms linear infinite;
}

.payment-pay-btn.is-loading {
  pointer-events: none;
  opacity: 0.85;
  transform: none;
}

.payment-pay-btn.is-loading::after {
  display: none;
}

.payment-pay-btn.is-loading .payment-btn-content {
  display: none;
}

.payment-methods {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.payment-methods-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-muted);
}

.payment-methods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.payment-methods-list li {
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-sm);
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--brand-muted);
}

/* ==========================================================================
   Scroll-reveal
   ========================================================================== */
.js .reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease, transform 700ms ease;
}

/* `transform: none` rather than `translateY(0)`: any non-`none` transform turns the
   section into the containing block for its `position: fixed` descendants, which
   breaks full-screen overlays authored inside it. `none` still interpolates as the
   identity matrix, so the reveal animates exactly as before. */
.js .reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Broken image fallback
   ========================================================================== */
img.img-fallback-hidden {
  opacity: 0;
}

.payment-pay-btn.is-loading .payment-btn-spinner {
  display: inline-block;
}

.payment-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--brand-border);
  font-size: 0.72rem;
  color: var(--brand-muted);
}

.payment-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-pill);
  padding: 0.25rem 0.7rem;
  font-weight: 600;
}

.payment-trust-row svg {
  color: var(--brand-success);
}

.payment-cancel-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  color: var(--brand-danger);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--brand-transition), gap var(--brand-transition);
}

.payment-cancel-link:hover,
.payment-cancel-link:focus-visible {
  color: var(--brand-danger-dark);
  text-decoration: underline;
  gap: 0.6rem;
}

.payment-footnote {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.4rem;
  max-width: 380px;
  margin: 1.25rem auto 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--brand-muted);
  text-align: center;
}

.payment-footnote svg {
  flex-shrink: 0;
  margin-top: 0.18rem;
}

@media (max-width: 575.98px) {
  .payment-card {
    padding: 2rem 1.15rem 1.5rem;
  }

  .payment-amount-value {
    font-size: 2rem;
  }

  .payment-step-label {
    display: none;
  }

  .payment-step.is-current .payment-step-label {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .payment-card,
  .payment-card-icon,
  .payment-card-icon::after,
  .payment-pay-btn::after {
    animation: none;
  }

  .payment-pay-btn::after {
    display: none;
  }

  .payment-pay-btn:hover:not(:disabled) {
    transform: none;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 767.98px) {
  .hero-content {
    padding: 2rem 1.5rem;
  }

  .hero-carousel .carousel-item,
  .hero-slide {
    min-height: 380px;
  }

  .consultation-banner {
    padding: 1.75rem;
    text-align: center;
  }

  .page-hero {
    /* Rings shrink below, so the tile can run closer to the edges before it meets one.
       Clear bands track them: 18rem - 9rem, both sides. */
    --hero-tile-clear-start: min(9rem, 20%);
    --hero-tile-clear-end: min(9rem, 20%);
    --hero-tile-fade-start: calc(var(--hero-tile-clear-start) + 1rem);
    --hero-tile-fade-end: calc(var(--hero-tile-clear-end) + 1rem);
    /* Below the clamp floor above, so the banner keeps getting shorter rather than
       jumping back up when the phone rules take over. */
    padding: 1.75rem 0;
    /* A 480px motif eats most of a phone viewport and reads as blotches rather than
       pattern; scaling the tile down keeps the same ornamental density as desktop. */
    background-size: auto, auto, 300px 300px;
  }

  /* At desktop sizes the rings bleed in from the margins either side of the copy. A phone
     has no such margin, so keep them smaller and pushed further off-canvas - otherwise
     they sit directly behind the heading and eat its contrast. Both stay the same size as
     each other, as they are on desktop. */
  .page-hero::before,
  .page-hero::after {
    width: 18rem;
    margin-top: -9rem;
  }

  .page-hero::before { right: -9rem; }
  .page-hero::after { left: -9rem; }

  .story-banner-body {
    padding: 1.5rem;
  }

  .confirmation-hero {
    /* Clear bands track the shrunk rings below: 12rem - 6rem left, 16rem - 8rem right. */
    --hero-tile-clear-start: min(6rem, 17%);
    --hero-tile-clear-end: min(8rem, 21%);
    --hero-tile-fade-start: calc(var(--hero-tile-clear-start) + 1rem);
    --hero-tile-fade-end: calc(var(--hero-tile-clear-end) + 1rem);
    padding: 2rem 1.25rem;
    /* Matches the .page-hero phone tile - a 480px motif reads as blotches at this width. */
    background-size: auto, auto, 300px 300px;
  }

  /* No side margin on a phone, so keep the rings small and pushed further off-canvas
     rather than letting them sit directly behind the heading. */
  .confirmation-hero::before {
    right: -8rem;
    width: 16rem;
    margin-top: -8rem;
  }

  .confirmation-hero::after {
    left: -6rem;
    width: 12rem;
    margin-top: -6rem;
  }

  .contact-form-panel,
  .calc-result-panel {
    padding: 1.25rem;
  }

  /* No room to overlap the hero on a phone - stack the cards underneath instead. */
  .contact-hero {
    padding-bottom: 2.5rem;
  }

  .contact-channels {
    margin-top: 0;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .contact-hero-action {
    font-size: 0.82rem;
    padding: 0.5rem 0.9rem;
  }
}

/* ==========================================================================
   Pager (shared _Pager partial)
   Stock Bootstrap .pagination joins its cells into one unbreakable blue strip,
   which runs off the side of the page once a list has more than a handful of
   pages. This is a separate component: brand-coloured, individually rounded
   cells that wrap, sized to a 44px tap target on touch screens.
   ========================================================================== */
.pager-nav {
  margin-top: 2rem;
}

.pager {
  display: flex;
  flex-wrap: wrap; /* last resort - the windowed markup normally fits on one row */
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pager-item {
  display: flex;
}

.pager-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 0.6rem;
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-md);
  background-color: var(--brand-surface);
  color: var(--brand-fg);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--brand-transition), border-color var(--brand-transition),
              color var(--brand-transition), box-shadow var(--brand-transition);
}

.pager-link:hover,
.pager-link:focus-visible {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
  background-color: var(--brand-bg);
}

.pager-link:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.pager-item.is-active .pager-link {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
  box-shadow: var(--brand-shadow-soft);
  cursor: default;
}

/* Arrows at the ends stay in place when there is nowhere left to go, so the row
   does not shift width as the visitor pages through. */
.pager-link.is-disabled {
  color: var(--brand-muted);
  opacity: 0.45;
  pointer-events: none;
}

.pager-arrow svg {
  width: 16px;
  height: 16px;
}

.pager-gap {
  align-items: center;
  min-width: 1.25rem;
  color: var(--brand-muted);
  user-select: none;
}

.pager-status {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--brand-muted);
}

@media (max-width: 575.98px) {
  /* Drop the outer ring of the window (current +/-2) so a phone shows
     "< 1 ... 15 [16] 17 ... 39 >" on a single row. */
  .pager-item-wide {
    display: none;
  }

  .pager {
    gap: 0.3rem;
  }

  .pager-link {
    min-width: 40px;
    padding: 0 0.4rem;
    font-size: 0.82rem;
  }

  .pager-gap {
    min-width: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pager-link {
    transition: none;
  }
}

/* ==========================================================================
   Back-to-top button
   Long pages (collection grids keep appending rows as you scroll) leave the
   header far out of reach, so this floats in once the visitor is past the
   fold. Hidden until back-to-top.js adds .is-visible, so browsers without JS
   never show a button that cannot do anything.
   ========================================================================== */
.back-to-top {
  /* Lifted above the install banner while that is on screen - see the sibling rule below. */
  --back-to-top-gap: 0px;
  position: fixed;
  z-index: 1040; /* under the install banner (1045) and modals (1055), over the sticky header (1020) */
  right: 1rem;
  bottom: calc(1rem + var(--back-to-top-gap) + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  box-shadow: var(--brand-shadow-lift);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--brand-transition), transform var(--brand-transition),
              visibility var(--brand-transition), bottom var(--brand-transition);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  opacity: 0.92;
  transform: translateY(-2px);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--brand-accent-light);
  outline-offset: 3px;
}

/* The banner slides in over the same corner, so step the button above it. */
.pwa-install-banner.is-visible ~ .back-to-top {
  --back-to-top-gap: 88px;
}

/* Same for the compare tray, which lands on the button and its Compare action.
   A body class rather than a sibling selector: the tray is appended to the end
   of <body> at runtime, so it is not reliably ahead of the button in the DOM.
   With both on screen the banner rule above wins on specificity, which is the
   right answer - it is the taller of the two. */
body.has-compare-tray .back-to-top {
  --back-to-top-gap: 56px;
}

/* And for the product detail buy bar, which spans the full width of a phone and
   would otherwise sit directly under the button - the Buy Now CTA is in exactly
   that corner. product-detail.js measures the bar and adds the body class only
   while it is on screen; the fallback covers the frame before the first measure. */
body.pdp-sticky-bar-visible .back-to-top {
  /* The measured height already carries the bar's own safe-area padding, and the
     bottom calc above adds the inset again - subtract it so it counts once. */
  --back-to-top-gap: calc(var(--pdp-sticky-bar-height, 68px) - env(safe-area-inset-bottom, 0px));
}

@media (min-width: 576px) {
  .back-to-top {
    right: 1.25rem;
    bottom: calc(1.25rem + var(--back-to-top-gap) + env(safe-area-inset-bottom, 0px));
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 575.98px) {
  /* The banner spans the full width on a phone and wraps to a taller box. */
  .pwa-install-banner.is-visible ~ .back-to-top {
    --back-to-top-gap: 104px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
    transform: none;
  }

  .back-to-top:hover,
  .back-to-top:focus-visible {
    transform: none;
  }
}

/* Consultation pricing badge. Shown wherever a consultation is offered so the
   answer to "does this cost anything" is on screen, not assumed. Driven by
   Consultation:IsFree in appsettings - see WebHelpers/ConsultationPricing.cs. */
.consult-free-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.45rem;
  font-family: var(--brand-font-body, inherit);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0A5C2A;
  background: #DFF5E6;
  border: 1px solid rgba(10, 92, 42, 0.25);
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
}

/* Only rendered once consultations are chargeable. */
.calc-cta-price,
.mega-menu-cta-price {
  display: block;
  margin-top: 0.35rem;
  font-weight: 700;
}