/* ==========================================================================
   Caelyro - Component Library
   Reusable, hand-written component classes for the premium fashion UI.
   Loaded after custom.css, so every rule here can read the design tokens
   defined in that file's :root block (colors, motion, shape, elevation).

   Conventions:
   - Class names are plain and semantic (not utility soup) so markup stays
     readable: <button class="btn btn-gold">, <span class="badge badge-gold">.
   - Animation is limited to opacity/transform/background/border-color so
     everything stays cheap to composite and easy on the eye.
   - Every interactive component is keyboard operable and exposes the
     correct ARIA state; see includes/README notes inline per component.
   ========================================================================== */

/* Belt-and-suspenders against horizontal overscroll: tailwind.css's base
   layer sets `overflow-x: clip` on html/body, but older Safari (pre-16)
   doesn't support the `clip` value and falls back to `visible` there - so
   an off-canvas panel like .mobile-drawer (position: fixed; right: 0;
   transform: translateX(100%) when closed) can still be dragged into view
   as a swipe-able dark panel over the page content on those devices.
   `hidden` has full support and, unlike `clip`, only blocks user-driven
   scroll/pan - `scroll-behavior: smooth` anchor jumps still work. */
html, body { overflow-x: hidden; }

/* ==========================================================================
   1. TYPOGRAPHY SYSTEM
   ========================================================================== */

.display-1 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-size: clamp(2.25rem, 1.85rem + 2vw, 4rem);
}

.display-2 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  font-size: clamp(1.875rem, 1.6rem + 1.4vw, 3rem);
}

.heading-1 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
}

.heading-2 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.75rem);
}

.heading-3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.3;
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
}

.body-lg {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  line-height: 1.7;
  color: var(--charcoal);
}

.body-text {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--charcoal);
}

.body-sm {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--charcoal-light);
}

.caption-text {
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--charcoal-light);
  letter-spacing: 0.02em;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ==========================================================================
   2. SECTION HEADINGS
   ========================================================================== */

.section-heading {
  max-width: 42rem;
  margin-bottom: 2.5rem;
}
.section-heading .eyebrow {
  margin-bottom: 0.75rem;
}
.section-heading .section-title {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
  color: var(--black);
}
.section-heading .section-subtitle {
  margin-top: 0.85rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--charcoal-light);
}
.section-heading--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-heading--on-dark .section-title { color: var(--white); }
.section-heading--on-dark .section-subtitle { color: rgba(255, 255, 255, 0.65); }

.divider {
  border: 0;
  border-top: 1px solid rgba(26, 27, 31, 0.1);
  margin: 2rem 0;
}
.divider--gold {
  border-top-color: var(--gold);
  width: 3rem;
  border-top-width: 2px;
  margin: 1rem 0;
}

/* ==========================================================================
   3. BUTTONS
   btn-primary / btn-outline (dark-bg) already ship in custom.css and are in
   use on the homepage hero - left untouched. This section adds the
   remaining variants: outline-on-light, solid gold accent, sizes, icon-only
   and a loading state usable on any of the above.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base),
              border-color var(--transition-base), transform var(--transition-base),
              box-shadow var(--transition-base);
}
.btn:active { transform: translateY(0) scale(0.98); }
.btn:disabled,
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* Solid gold accent - the highest-emphasis call to action (checkout, buy now). */
.btn-gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}
.btn-gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); transform: translateY(-2px); }

/* Outline variant for light/off-white backgrounds (charcoal border/text). */
.btn-outline-dark {
  background: transparent;
  border-color: var(--charcoal);
  color: var(--charcoal);
}
.btn-outline-dark:hover {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
  transform: translateY(-2px);
}

/* Quiet text-only action, e.g. "View all", "Clear filters". */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--black);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.btn-text:hover { color: var(--gold-dark); }

/* Sizes - append alongside a variant class: <button class="btn btn-gold btn-sm"> */
.btn-sm { padding: 0.55rem 1.25rem; font-size: 0.75rem; }
.btn-lg { padding: 1.05rem 2.5rem; font-size: 0.9rem; }

/* .btn-sm's compact desktop padding is only ~34px tall - below the ~44px
   comfortable touch target - so mobile gets a taller tap area without
   losing the compact look on desktop (.btn/.btn-lg are already tall
   enough on their own). */
@media (max-width: 40em) {
  .btn-sm { min-height: 2.75rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
}

/* Icon-only circular button, e.g. wishlist / quick-view on a product card. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  background: var(--white);
  border: 1px solid rgba(26, 27, 31, 0.12);
  color: var(--charcoal);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-fast);
}
.btn-icon:hover { background: var(--black); border-color: var(--black); color: var(--gold); transform: translateY(-2px); }

/* Loading state - works on any .btn variant. Text stays in the DOM (for
   accessible-name stability) but is visually hidden while the spinner shows. */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 50%;
  left: 50%;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: currentColor;
  border-radius: 50%;
  color: var(--black);
  animation: btn-spin 0.7s linear infinite;
}
.btn-gold.is-loading::after,
.btn-primary.is-loading::after { color: var(--black); }
.btn-outline.is-loading::after,
.btn-outline-dark.is-loading::after { color: inherit; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   4. BADGES
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  line-height: 1.6;
}
.badge-black { background: var(--black); color: var(--white); }
.badge-gold { background: var(--gold); color: var(--black); }
.badge-outline { background: transparent; border-color: var(--charcoal); color: var(--charcoal); }
.badge-offwhite { background: var(--offwhite); color: var(--charcoal); }

.badge-success { background: var(--success-bg); color: var(--success); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-info    { background: var(--info-bg);    color: var(--info); }

/* ==========================================================================
   5. CARDS
   ========================================================================== */

.card {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px dashed var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--shadow-glass);
}
.card-header,
.card-footer {
  padding: 1.25rem 1.5rem;
}
.card-header { border-bottom: 1px solid rgba(26, 27, 31, 0.08); }
.card-footer { border-top: 1px solid rgba(26, 27, 31, 0.08); }
.card-body { padding: 1.5rem; }

/* Product card - the primary catalog/shop-grid unit. Markup shape:
   <article class="product-card">
     <div class="product-card__media">
       <div class="product-card__badges"> <span class="badge ...">New</span> ... </div>
       <div class="product-card__actions"> <button class="product-card__icon-btn"> x2 </div>
       <img>
     </div>
     <div class="product-card__body"> swatches, title, subtitle, price, sizes, cta-row </div>
   </article> */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1.5px dashed var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--shadow-glass);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  /* Lets .product-card__cta-row below react to this card's own rendered
     width (via @container) rather than the viewport - the same card
     component renders anywhere from a ~160px 2-up shop-grid tile to a
     ~300px homepage row column, and only the narrow contexts need their
     two buttons to stack instead of squeezing onto one row. */
  container-type: inline-size;
}
.product-card:hover {
  box-shadow: var(--shadow-glass-hover), 0 0 0 1px rgba(224, 183, 106, 0.3);
  transform: translateY(-6px);
}

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--glass-radius) var(--glass-radius) 0 0;
  background: var(--offwhite);
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.product-card:hover .product-card__media img { transform: scale(1.08); }

.product-card__badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.product-card__badge { position: relative; overflow: hidden; }
/* One-shot diagonal shine sweep across each badge, cued off the whole
   card's hover state (not the badge's own, since :hover would restart it
   on every pixel of mouse movement). Transform-only, so it stays
   compositor-cheap. */
.product-card__badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-20deg) translateX(-10%);
}
.product-card:hover .product-card__badge::after {
  animation: badge-shine 0.9s ease;
}
@keyframes badge-shine {
  from { transform: skewX(-20deg) translateX(-10%); }
  to { transform: skewX(-20deg) translateX(360%); }
}
@media (prefers-reduced-motion: reduce) {
  .product-card:hover .product-card__badge::after { animation: none; }
}

/* Wishlist + Quick View - persistent (not hover-reveal) circular icon
   buttons, stacked top-right over the photo. */
.product-card__actions {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2; /* above .product-card__title's stretched-link ::after */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.product-card__icon-btn {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  border: none;
  color: var(--charcoal);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.product-card__icon-btn:hover { background: var(--black); color: var(--gold); transform: scale(1.08); }
.product-card__icon-btn.is-active { color: var(--gold-dark); }
.product-card__icon-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.product-card__body { padding: 1rem 0.25rem 0; display: flex; flex-direction: column; }

/* "Stretched link": the title is the only real <a>, but its ::after covers
   the whole card so clicking anywhere navigates to the product - without
   nesting a second interactive element inside an <a> (invalid HTML, and it
   broke the wishlist button by making its clicks bubble into a navigation).
   .product-card__title itself is left non-positioned so the ::after's
   containing block is .product-card (the nearest positioned ancestor),
   not just the title's own small box. Every other interactive element in
   the card (icon buttons, size chips, the CTA row) needs its own explicit
   z-index to stay clickable above this overlay - absolutely-positioned or
   not, a positioned descendant with z-index:auto still paints above plain
   in-flow siblings within the same stacking context. */
.product-card__title {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 0.15rem;
}
.product-card__title::after {
  content: '';
  position: absolute;
  inset: 0;
}

.product-card__subtitle {
  font-size: 0.78rem;
  color: var(--charcoal-light);
  margin-bottom: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card__swatches {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}
.product-card__swatch {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(26, 27, 31, 0.15);
  cursor: pointer;
  padding: 0;
  transition: transform var(--transition-fast);
}
.product-card__swatch.is-selected {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--gold);
}
.product-card__swatch:hover { transform: scale(1.2); }
.product-card__swatch-more {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--charcoal-light);
  margin-left: 0.1rem;
}

.product-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-family: var(--font-body);
  margin-bottom: 0.65rem;
}
.product-card__price-current { font-size: 1.05rem; font-weight: 700; color: var(--black); }
.product-card__price-current--sale { color: var(--gold-dark); }
.product-card__price-original { font-size: 0.85rem; color: var(--charcoal-light); text-decoration: line-through; }
.product-card__discount { font-size: 0.72rem; font-weight: 700; color: var(--gold-dark); }

.product-card__sizes {
  position: relative;
  z-index: 2; /* above .product-card__title's stretched-link ::after */
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.product-card__size {
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(26, 27, 31, 0.15);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--charcoal);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.product-card__size:hover { border-color: var(--gold); color: var(--gold-dark); }

.product-card__cta-row {
  position: relative;
  z-index: 2; /* above .product-card__title's stretched-link ::after */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: auto;
  padding-bottom: 0.25rem;
}
.product-card__cta-row .btn { width: 100%; padding-inline: 0.5rem; }
/* Below this card width, "Add to Cart" / "Buy Now" no longer fit
   side-by-side on one line each - stack them full-width instead of
   letting the labels wrap awkwardly. */
@container (max-width: 230px) {
  .product-card__cta-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   5b. RATINGS & REVIEWS
   ========================================================================== */

.stars {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.8rem;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.stars i { font-size: 0.75em; }
.stars i.fa-regular { color: rgba(26, 27, 31, 0.2); }
.stars__count { margin-left: 0.3rem; font-size: 0.78rem; color: var(--charcoal-light); font-weight: 500; }

.pdp-rating-link {
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.stars--input {
  font-size: 1.4rem;
  gap: 0.25rem;
  margin-bottom: 0;
}
.stars--input .stars__btn {
  background: none;
  border: none;
  padding: 0.15rem;
  cursor: pointer;
  color: rgba(26, 27, 31, 0.2);
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.stars--input .stars__btn:hover,
.stars--input .stars__btn.is-filled {
  color: var(--gold);
  transform: scale(1.08);
}

.pdp-reviews-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid rgba(26, 27, 31, 0.08);
}
.pdp-reviews-summary__score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.pdp-reviews-summary__value { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; line-height: 1; color: var(--black); }
.pdp-reviews-summary__bars { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 0.35rem; }
.pdp-reviews-summary__bar-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; color: var(--charcoal-light); }
.pdp-reviews-summary__bar-row span:first-child { width: 2rem; }
.pdp-reviews-summary__bar-row span:last-child { width: 1.6rem; text-align: right; }
.pdp-reviews-summary__bar { flex: 1; height: 0.4rem; border-radius: var(--radius-full); background: rgba(26, 27, 31, 0.08); overflow: hidden; }
.pdp-reviews-summary__bar span { display: block; height: 100%; background: var(--gold); border-radius: var(--radius-full); }

.pdp-review-form {
  max-width: 34rem;
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid rgba(26, 27, 31, 0.08);
}
.pdp-review-note { margin-bottom: 1.75rem; color: var(--charcoal-light); }

.pdp-review-list__item {
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(26, 27, 31, 0.08);
}
.pdp-review-list__item:last-child { border-bottom: none; }
.pdp-review-list__header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; }
.pdp-review-list__author { font-weight: 600; font-size: 0.85rem; color: var(--charcoal); }
.pdp-review-list__date { font-size: 0.78rem; color: var(--charcoal-light); }
.pdp-review-list__title { font-weight: 600; margin-bottom: 0.25rem; }

/* ==========================================================================
   6. FORMS
   ========================================================================== */

.form-group { margin-bottom: 1.25rem; }

.form-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--charcoal);
}
.form-label .required { color: var(--danger); margin-left: 0.15rem; }

.form-hint { margin-top: 0.35rem; font-size: 0.78rem; color: var(--charcoal-light); }
.form-error { margin-top: 0.35rem; font-size: 0.78rem; color: var(--danger); display: flex; align-items: center; gap: 0.35rem; }

.form-control {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--black);
  background: var(--white);
  border: 1px solid rgba(26, 27, 31, 0.2);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control::placeholder { color: rgba(26, 27, 31, 0.4); }
.form-control:hover { border-color: rgba(26, 27, 31, 0.35); }
.form-control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: var(--shadow-gold-ring);
}
.form-control:disabled {
  background: var(--offwhite);
  color: var(--charcoal-light);
  cursor: not-allowed;
}
.form-control.is-invalid { border-color: var(--danger); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(166, 65, 46, 0.18); }

textarea.form-control { min-height: 8rem; resize: vertical; }

/* Custom select: native <select> kept for accessibility/keyboard support,
   just re-skinned with a chevron and appearance:none. */
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%232A2A2A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  cursor: pointer;
}

/* Checkboxes / radios: native controls + accent-color keep full keyboard
   and screen-reader behavior "for free" while matching the brand color. */
.form-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--gold);
  cursor: pointer;
}
.form-check label { font-size: 0.9rem; color: var(--charcoal); cursor: pointer; }

/* Input with a leading/trailing icon, e.g. search fields. */
.form-input-group { position: relative; }
.form-input-group .form-control { padding-left: 2.75rem; }
.form-input-group__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--charcoal-light);
  pointer-events: none;
}

/* ==========================================================================
   7. ALERTS (inline, persistent banners)
   ========================================================================== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  line-height: 1.5;
}
.alert-icon { flex-shrink: 0; margin-top: 0.1rem; }
.alert-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}
.alert-close:hover { opacity: 1; }

.alert-success { background: var(--success-bg); border-color: rgba(63, 107, 79, 0.25); color: var(--success); }
.alert-danger  { background: var(--danger-bg);  border-color: rgba(166, 65, 46, 0.25); color: var(--danger); }
.alert-warning { background: var(--warning-bg); border-color: rgba(138, 100, 22, 0.25); color: var(--warning); }
.alert-info    { background: var(--info-bg);    border-color: rgba(62, 85, 104, 0.25); color: var(--info); }
.alert-gold    { background: #FBF3E4; border-color: rgba(224, 183, 106, 0.35); color: var(--gold-dark); }

/* ==========================================================================
   8. TOASTS (transient notifications)
   Markup + behavior are created by assets/js/ui.js via Caelyro.toast(...).
   ========================================================================== */

.toast-container {
  position: fixed;
  z-index: var(--z-toast);
  bottom: 1.25rem;
  right: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(23rem, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }

.toast-icon { flex-shrink: 0; margin-top: 0.15rem; color: var(--gold); }
.toast-message { flex: 1; font-size: 0.85rem; line-height: 1.5; }
.toast-close { background: none; border: none; color: rgba(255, 255, 255, 0.6); cursor: pointer; }
.toast-close:hover { color: var(--white); }

.toast-success .toast-icon { color: #7FBF95; }
.toast-danger .toast-icon  { color: #E08D77; }
.toast-warning .toast-icon { color: var(--gold); }

.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  animation-name: toast-progress;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes toast-progress { from { width: 100%; } to { width: 0%; } }

/* ==========================================================================
   9. LOADING INDICATORS
   ========================================================================== */

.spinner {
  display: inline-block;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid rgba(26, 27, 31, 0.15);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
.spinner-sm { width: 1.1rem; height: 1.1rem; border-width: 2px; }
.spinner-lg { width: 2.75rem; height: 2.75rem; border-width: 3px; }
.spinner-light { border-color: rgba(255, 255, 255, 0.25); border-top-color: var(--white); }

.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 244, 238, 0.75);
  z-index: 5;
}

/* ==========================================================================
   10. SKELETON LOADERS
   .skeleton (base shimmer) already ships in custom.css. These are the
   composable shapes built on top of it.
   ========================================================================== */

.skeleton-text { height: 0.85em; border-radius: var(--radius-sm); margin-bottom: 0.5rem; }
.skeleton-text:last-child { margin-bottom: 0; width: 70%; }
.skeleton-title { height: 1.5rem; width: 60%; border-radius: var(--radius-sm); margin-bottom: 0.75rem; }
.skeleton-circle { width: 3rem; height: 3rem; border-radius: 50%; }
.skeleton-image { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-md); }

.skeleton-card { display: flex; flex-direction: column; gap: 0.75rem; }

/* ==========================================================================
   11. PAGINATION
   ========================================================================== */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--charcoal);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.pagination__link:hover { background: var(--offwhite); color: var(--black); }
/* Same touch-target reasoning as .btn-sm above - 2.25rem (36px) is a bit
   tight to tap reliably; widen on mobile only. */
@media (max-width: 40em) {
  .pagination__link { min-width: 2.75rem; height: 2.75rem; }
}
.pagination__item.is-active .pagination__link {
  background: var(--black);
  color: var(--white);
}
.pagination__item.is-disabled .pagination__link {
  color: rgba(26, 27, 31, 0.3);
  pointer-events: none;
}

/* ==========================================================================
   12. BREADCRUMBS
   ========================================================================== */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
  max-width: 100%;
}
/* A long product name (the current-page crumb) previously relied only on
   the row wrapping between items - flex items default to min-width: auto,
   so on narrow screens the text itself never broke and could run past the
   viewport edge instead of wrapping. min-width: 0 lets it shrink below its
   content size so overflow-wrap can actually kick in. */
.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  color: var(--charcoal-light);
}
.breadcrumb__item a { color: var(--charcoal-light); transition: color var(--transition-fast); }
.breadcrumb__item a:hover { color: var(--gold-dark); }
.breadcrumb__item:not(:last-child)::after {
  content: '/';
  color: rgba(26, 27, 31, 0.3);
}
.breadcrumb__item[aria-current="page"] { color: var(--black); font-weight: 600; }

/* ==========================================================================
   13. DROPDOWNS
   Markup:
   <div class="dropdown">
     <button class="dropdown-toggle" aria-haspopup="true" aria-expanded="false">Label</button>
     <div class="dropdown-menu" role="menu">
       <a class="dropdown-item" role="menuitem" href="#">Item</a>
     </div>
   </div>
   Toggled by assets/js/ui.js, which manages the is-open class + ARIA state.
   ========================================================================== */

.dropdown { position: relative; display: inline-block; }

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.dropdown-toggle .fa-chevron-down { transition: transform var(--transition-fast); font-size: 0.7em; }
.dropdown.is-open .dropdown-toggle .fa-chevron-down { transform: rotate(180deg); }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 12rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(26, 27, 31, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  padding: 0.4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
.dropdown-menu--right { left: auto; right: 0; transform-origin: top right; }
.dropdown.is-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  color: var(--charcoal);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.dropdown-item:hover,
.dropdown-item:focus-visible { background: var(--offwhite); color: var(--black); }
.dropdown-divider { border: 0; border-top: 1px solid rgba(26, 27, 31, 0.08); margin: 0.4rem 0; }

/* ==========================================================================
   14. MODALS
   Markup:
   <div class="modal-overlay" data-modal="example">
     <div class="modal" role="dialog" aria-modal="true" aria-labelledby="example-title">
       <div class="modal-header"> <h3 id="example-title">Title</h3> <button class="modal-close" data-modal-close>...</button> </div>
       <div class="modal-body">...</div>
       <div class="modal-footer">...</div>
     </div>
   </div>
   Toggled by assets/js/ui.js (open/close, ESC, backdrop click, focus return).
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(17, 18, 20, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.modal-overlay.is-open { opacity: 1; visibility: visible; }

/* The frosted-glass look (translucent white + blur) depends on
   backdrop-filter. Plenty of real mobile browsers (older Android Chrome/
   WebView, some in-app browsers) don't support it - the blur silently
   never applies there, but the background stays translucent, so page
   content behind the modal shows through sharp and unblurred, overlapping
   the modal's own text into an unreadable mess. Fall back to a background
   solid enough to read on its own when there's no blur to lean on. */
.modal {
  position: relative;
  z-index: var(--z-modal);
  width: 100%;
  max-width: 32rem;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  background: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .modal {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
  }
}
.modal-overlay.is-open .modal { opacity: 1; transform: translateY(0) scale(1); }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(26, 27, 31, 0.08);
}
.modal-header h1, .modal-header h2, .modal-header h3 { font-size: 1.15rem; }

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--charcoal-light);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.25rem;
  transition: color var(--transition-fast);
}
.modal-close:hover { color: var(--black); }

.modal-body { padding: 1.5rem; }
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid rgba(26, 27, 31, 0.08);
}

/* ==========================================================================
   15. SITE HEADER (scroll behavior) + SEARCH BAR
   ========================================================================== */

/* Frosted glass: translucent obsidian + a blur of whatever scrolls behind
   the sticky header, rather than a flat opaque bar. Overrides the bg-black
   Tailwind utility on the element (same specificity, this rule loads after
   tailwind.css so it wins). Darkest at the very top of the page, where it
   sits directly over the busy hero gradient/image and needs the extra
   contrast; assets/js/main.js removes .is-scrolled once scrollTop > 12,
   letting it lighten back into a lower-contrast glass panel over the plain
   page content beneath. */
.site-header {
  background: rgba(17, 18, 20, 0.9);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  transition: box-shadow var(--transition-base), background-color var(--transition-base);
}
.site-header.is-scrolled {
  background: rgba(17, 18, 20, 0.72);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.45);
}

/* Expandable search row nested under the header. Collapsed by default via
   max-height (animatable, unlike display:none) so the reveal is a smooth
   subtle slide rather than an abrupt jump. */
.search-bar {
  max-height: 0;
  overflow: hidden;
  background: var(--offwhite);
  border-top: 1px solid rgba(26, 27, 31, 0.08);
  transition: max-height var(--transition-base);
}
.search-bar.is-open { max-height: 5rem; }

.search-bar__form {
  position: relative;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
@media (min-width: 40em) { .search-bar__form { padding: 0.85rem 1.5rem; } }
@media (min-width: 64em) { .search-bar__form { padding: 0.85rem 2rem; } }

.search-bar__icon { color: rgba(26, 27, 31, 0.45); }
.search-bar__input {
  flex: 1;
  background: none;
  border: none;
  color: var(--black);
  font-size: 0.95rem;
}
.search-bar__input::placeholder { color: rgba(26, 27, 31, 0.4); }
.search-bar__input:focus { outline: none; }
.search-bar__close {
  background: none;
  border: none;
  color: rgba(26, 27, 31, 0.5);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.search-bar__close:hover { color: var(--black); }

/* ==========================================================================
   16. MOBILE NAVIGATION
   Hamburger -> X trigger icon, plus the off-canvas drawer it opens.
   Behavior lives in assets/js/main.js.
   ========================================================================== */

/* display is intentionally NOT set here - the header markup controls it
   with Tailwind's "inline-flex lg:hidden" so the responsive show/hide stays
   inside Tailwind's own cascade instead of fighting this stylesheet (which
   loads after tailwind.css and would otherwise always win the specificity
   tie and permanently override the lg: breakpoint). */
.hamburger {
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 1.5rem;
  height: 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.hamburger__line {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: var(--radius-full);
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.hamburger.is-active .hamburger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-active .hamburger__line:nth-child(2) { opacity: 0; }
.hamburger.is-active .hamburger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-overlay);
  background: rgba(17, 18, 20, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.mobile-drawer-overlay.is-open { opacity: 1; visibility: visible; }

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  width: min(85vw, 360px);
  background: rgba(17, 18, 20, 0.85);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--transition-slow), visibility var(--transition-slow);
  overflow-y: auto;
}
.mobile-drawer.is-open { transform: translateX(0); visibility: visible; }

.mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-drawer__close {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem;
}
.mobile-drawer__close:hover { color: var(--gold); }

.mobile-drawer__search {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 1rem 1.25rem 0;
  padding: 0.65rem 0.9rem;
  background: var(--charcoal);
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.5);
}
.mobile-drawer__search input {
  flex: 1;
  background: none;
  border: none;
  color: var(--white);
  font-size: 0.9rem;
}
.mobile-drawer__search input::placeholder { color: rgba(255, 255, 255, 0.4); }
.mobile-drawer__search input:focus { outline: none; }

.mobile-drawer__links {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mobile-drawer__group-label {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--gold);
  text-transform: uppercase;
}

.mobile-nav__link {
  display: block;
  padding: 0.6rem 0;
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.mobile-nav__link:hover { color: var(--gold); padding-left: 0.25rem; }
.mobile-nav__link--indent { padding-left: 0.75rem; font-size: 0.85rem; }
.mobile-nav__link--indent-2 { padding-left: 1.5rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); }

.mobile-drawer__footer {
  margin-top: auto;
  display: flex;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-drawer__action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.mobile-drawer__action:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.1); }
.mobile-drawer__action:hover { background: var(--charcoal); color: var(--gold); }

/* ==========================================================================
   16. FOOTER HELPERS
   Reusable primitives for any footer instance (site footer, admin footer).
   The live site footer (includes/footer.php) currently composes the same
   look directly from Tailwind utilities; these classes are available for
   new footer instances without duplicating that utility chain.
   ========================================================================== */

.footer-heading {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gold);
  margin-bottom: 1rem;
}
.footer-link-list { display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; }
.footer-link-list a { color: rgba(255, 255, 255, 0.7); transition: color var(--transition-fast); }
.footer-link-list a:hover { color: var(--white); }

/* ==========================================================================
   17. LAYOUT UTILITIES
   ========================================================================== */

.container-page {
  max-width: 80rem; /* matches Tailwind's max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 40em) { .container-page { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 64em) { .container-page { padding-left: 2rem; padding-right: 2rem; } }

/* ==========================================================================
   18. ANNOUNCEMENT BAR + LOGO MARK + INLINE SEARCH
   ========================================================================== */

.announcement-bar {
  background: var(--gold);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.announcement-bar__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
}
@media (min-width: 64em) {
  .announcement-bar__inner { justify-content: space-between; padding: 0.5rem 2rem; }
}
.announcement-bar__links {
  display: none;
  align-items: center;
  gap: 1.5rem;
}
@media (min-width: 64em) { .announcement-bar__links { display: flex; } }
.announcement-bar__links span { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Persistent search input shown inline in the header on large screens
   (the collapsible .search-bar below the header still covers <lg). A
   translucent white-on-black "frosted glass" tint rather than a solid
   near-black fill - matches the dark #site-header it sits inside while
   staying visibly distinct from it (a flat var(--black) fill would all but
   disappear against the header's own identical background). */
.search-inline {
  position: relative;
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-full);
  padding: 0.55rem 1.1rem;
  flex: 1;
  margin: 0 1.5rem;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.search-inline:focus-within { border-color: var(--gold); background: rgba(255, 255, 255, 0.12); }
.search-inline input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--white);
  font-size: 0.85rem;
}
.search-inline input::placeholder { color: rgba(255, 255, 255, 0.45); }
.search-inline input:focus { outline: none; }
.search-inline button { background: none; border: none; color: rgba(255, 255, 255, 0.6); cursor: pointer; }
.search-inline button:hover { color: var(--gold); }
@media (min-width: 64em) { .search-inline { display: flex; } }

/* Live search type-ahead dropdown - shared by .search-inline (desktop) and
   .search-bar__form (the collapsible <lg overlay), each via their own
   #search-suggest-* container. Populated by assets/js/main.js from
   ajax/search-suggestions.php; empty/hidden until there's a query. */
.search-suggest {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  max-height: 24rem;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(26, 27, 31, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
.search-suggest.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
/* Positioned relative to #site-header (position:sticky) rather than its
   own .search-bar__form - see the DOM-placement note in includes/header.php. */
.search-suggest--full { top: 100%; border-radius: 0; border-left: none; border-right: none; }

.search-suggest__status {
  padding: 1rem;
  font-size: 0.82rem;
  color: var(--charcoal-light);
  text-align: center;
}
.search-suggest__status i { margin-right: 0.4rem; }

.search-suggest__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.85rem;
  background: none;
  border: none;
  text-align: left;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.search-suggest__item:hover,
.search-suggest__item.is-active { background: var(--offwhite); }
.search-suggest__thumb {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--offwhite);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(26, 27, 31, 0.2);
}
.search-suggest__thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-suggest__body { flex: 1; min-width: 0; }
.search-suggest__name {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-suggest__category { font-size: 0.72rem; color: var(--charcoal-light); }
.search-suggest__price { flex-shrink: 0; text-align: right; font-size: 0.82rem; font-weight: 700; color: var(--black); }
.search-suggest__price-original { display: block; font-size: 0.68rem; font-weight: 400; color: var(--charcoal-light); text-decoration: line-through; }

.search-suggest__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gold-dark);
  border-top: 1px solid rgba(26, 27, 31, 0.08);
  background: none;
  width: 100%;
  cursor: pointer;
  text-decoration: none;
}
.search-suggest__footer:hover { background: var(--offwhite); }

/* ==========================================================================
   19. HERO
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   20. FEATURE STRIP
   ========================================================================== */

.feature-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
}
@media (min-width: 40em) { .feature-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64em) { .feature-strip { grid-template-columns: repeat(5, 1fr); } }

.feature-strip__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.feature-strip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--mh-pink-light);
  color: var(--mh-pink-dark);
  flex-shrink: 0;
  font-size: 1.05rem;
}
.feature-strip__title { font-size: 0.85rem; font-weight: 600; color: var(--black); }
.feature-strip__subtitle { font-size: 0.75rem; color: var(--charcoal-light); }

/* ==========================================================================
   21. CATEGORY TILES
   ========================================================================== */

.category-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--offwhite);
  overflow: hidden;
  color: var(--black);
}
.category-tile__media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(26, 27, 31, 0.15);
  transition: transform var(--transition-slow);
}
.category-tile:hover .category-tile__media { transform: scale(1.08); }
.category-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.category-tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(90, 10, 60, 0.82) 0%, rgba(90, 10, 60, 0.22) 55%, rgba(90, 10, 60, 0.05) 100%);
  transition: background var(--transition-base);
}
.category-tile--photo:hover .category-tile__scrim {
  background: linear-gradient(to top, rgba(90, 10, 60, 0.92) 0%, rgba(90, 10, 60, 0.38) 55%, rgba(90, 10, 60, 0.1) 100%);
}
.category-tile--photo { color: var(--white); }
.category-tile--photo .category-tile__link { color: var(--white); }
.category-tile__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.1rem;
}
.category-tile__title { font-weight: 600; font-size: 1rem; margin-bottom: 0.15rem; }
.category-tile__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mh-pink-dark);
}
.category-tile__link i { transition: transform var(--transition-fast); }
.category-tile:hover .category-tile__link i { transform: translateX(3px); }

/* Asymmetric editorial layout: first tile reads as the "hero" of the
   grid, remaining tiles (including the "Your Design" CTA) fill in around
   it - breaks the uniform ecommerce-grid look on larger screens. Uniform
   2-up stays on mobile/tablet where an asymmetric grid has no room to
   read as intentional. */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 40em) { .featured-grid { gap: 1.5rem; } }
@media (min-width: 64em) {
  .featured-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 14rem;
    grid-auto-flow: dense;
  }
  .featured-grid .category-tile { aspect-ratio: auto; }
  .featured-grid > a:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
}

.category-tile--cta {
  background: linear-gradient(155deg, var(--mh-purple-dark) 0%, var(--mh-pink-dark) 100%);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.category-tile--cta .category-tile__body {
  position: static;
  text-align: center;
  padding: 1.5rem;
}
.category-tile--cta .category-tile__title { font-family: var(--font-display); font-size: 1.35rem; }
.category-tile--cta .category-tile__link { color: var(--white); }
.category-tile--cta i { color: var(--white); }

/* ==========================================================================
   22. PRODUCT ROW (horizontal scroll-snap featured grid)
   ========================================================================== */

.product-row-wrap { position: relative; }

.product-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(11.5rem, 1fr);
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.product-row::-webkit-scrollbar { display: none; }
.product-row > * { scroll-snap-align: start; }

@media (min-width: 40em) { .product-row { grid-auto-columns: minmax(13.5rem, 1fr); } }
@media (min-width: 90em) {
  /* Large desktops: lay the row out as a static grid, no scrolling needed. */
  .product-row { display: grid; grid-auto-flow: unset; grid-template-columns: repeat(6, 1fr); overflow-x: visible; }
}

.product-row__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--mh-purple-dark);
  color: var(--white);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.product-row__nav:hover { background: var(--mh-pink-dark); transform: translateY(-2px); }
.product-row__nav:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }

/* ==========================================================================
   23. TRUST STRIP (dark, bottom-of-page brand reassurance band)
   ========================================================================== */

.trust-strip {
  background: var(--black);
  color: var(--white);
}
.trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  text-align: center;
}
@media (min-width: 40em) { .trust-strip__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64em) { .trust-strip__grid { grid-template-columns: repeat(5, 1fr); } }

.trust-strip__item i {
  color: var(--gold);
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}
.trust-strip__title { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold); }
.trust-strip__subtitle { font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); margin-top: 0.2rem; }
.trust-strip__brand { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.05em; }
.trust-strip__brand span { display: block; font-size: 0.7rem; letter-spacing: 0.15em; color: var(--gold); text-transform: uppercase; margin-top: 0.35rem; font-family: var(--font-body); }

/* ==========================================================================
   24. AUTH PAGES (register / login / verify / forgot / reset)
   ========================================================================== */

.auth-shell {
  min-height: calc(100vh - 20rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--offwhite);
  padding: 3rem 1rem;
}

.auth-card {
  width: 100%;
  max-width: 26rem;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px dashed var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--shadow-glass-hover);
  padding: 2.5rem 2rem;
}
@media (min-width: 40em) { .auth-card { padding: 3rem 2.75rem; } }

.auth-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
}
.auth-card__title { font-family: var(--font-display); font-size: 1.5rem; text-align: center; margin-bottom: 0.4rem; color: var(--black); }
.auth-card__subtitle { font-size: 0.85rem; text-align: center; color: var(--charcoal-light); margin-bottom: 2rem; }

.auth-card__footer { margin-top: 1.75rem; text-align: center; font-size: 0.85rem; color: var(--charcoal-light); }
.auth-card__footer a { color: var(--gold-dark); font-weight: 600; }
.auth-card__footer a:hover { text-decoration: underline; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(26, 27, 31, 0.4);
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(26, 27, 31, 0.12); }

/* Split layout: a dark decorative brand panel alongside the form, used by
   login/register for a stronger first impression. Other .auth-shell pages
   (forgot/verify/reset) keep the plain centered card untouched - this only
   activates with the --split modifier. */
.auth-shell--split {
  min-height: 100vh;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  background: var(--white);
}
@media (min-width: 64em) {
  .auth-shell--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.auth-visual {
  position: relative;
  display: none;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 4rem 3.5rem;
  background:
    radial-gradient(circle at 15% 15%, rgba(224, 183, 106, 0.35), transparent 45%),
    radial-gradient(circle at 85% 88%, rgba(255, 95, 168, 0.22), transparent 50%),
    linear-gradient(160deg, #000000 0%, #1c1c1c 60%, #2a0f1c 100%);
  color: var(--white);
}
@media (min-width: 64em) { .auth-visual { display: flex; } }

.auth-visual::before,
.auth-visual::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.auth-visual::before { width: 22rem; height: 22rem; top: -6rem; right: -6rem; }
.auth-visual::after { width: 14rem; height: 14rem; bottom: -4rem; left: -3rem; }

.auth-visual__inner { position: relative; z-index: 1; max-width: 26rem; }

.auth-visual__brand { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 3.5rem; }

.auth-visual__headline { font-family: var(--font-display); font-size: 2.4rem; line-height: 1.18; margin-bottom: 1rem; }
.auth-visual__headline em { color: var(--gold-light); font-style: normal; }

.auth-visual__subtitle { font-size: 0.95rem; color: rgba(255, 255, 255, 0.65); margin-bottom: 2.5rem; line-height: 1.6; }

.auth-visual__features { display: flex; flex-direction: column; gap: 1.25rem; }
.auth-visual__features li { display: flex; align-items: flex-start; gap: 0.9rem; font-size: 0.88rem; color: rgba(255, 255, 255, 0.85); }
.auth-visual__features li div { flex: 1; }
.auth-visual__features li strong { display: block; color: var(--white); font-weight: 600; margin-bottom: 0.15rem; }
.auth-visual__features i {
  flex-shrink: 0;
  width: 2.1rem; height: 2.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(224, 183, 106, 0.18);
  border: 1px solid rgba(255, 95, 168, 0.3);
  color: var(--gold-light);
  font-size: 0.85rem;
  margin-top: 0.1rem;
}

.auth-shell--split .auth-shell__form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem;
  background: var(--offwhite);
}
@media (min-width: 40em) { .auth-shell--split .auth-shell__form { padding: 4rem 2rem; } }

.auth-shell--split .auth-card { border: 1px solid rgba(26, 27, 31, 0.08); }
@media (min-width: 64em) { .auth-shell--split .auth-card { box-shadow: var(--shadow-elevated); } }

/* Admin sign-in variant of .auth-visual - same split-panel structure as the
   customer login/register pages, but a purely obsidian+gold treatment (no
   pink radial accent) since this is a staff console, not a shopping
   moment. */
.auth-visual--admin {
  background:
    radial-gradient(circle at 15% 15%, rgba(224, 183, 106, 0.35), transparent 45%),
    radial-gradient(circle at 85% 88%, rgba(224, 183, 106, 0.15), transparent 50%),
    linear-gradient(160deg, #000000 0%, #1c1c1c 55%, #262019 100%);
}
.auth-visual--admin .auth-visual__features i { border-color: rgba(224, 183, 106, 0.35); }

/* OTP input row: six single-digit boxes wired up by assets/js/auth.js */
.otp-input-row { display: flex; justify-content: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.otp-input-row input {
  width: 2.75rem;
  height: 3.25rem;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  border: 1px solid rgba(26, 27, 31, 0.2);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.otp-input-row input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: var(--shadow-gold-ring);
}

.password-field { position: relative; }
.password-field .form-control { padding-right: 2.75rem; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--charcoal-light);
  cursor: pointer;
}
.password-toggle:hover { color: var(--black); }

.password-strength {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.5rem;
}
.password-strength span {
  height: 3px;
  flex: 1;
  background: rgba(26, 27, 31, 0.12);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-fast);
}
.password-strength[data-level="1"] span:nth-child(1) { background: var(--danger); }
.password-strength[data-level="2"] span:nth-child(-n+2) { background: var(--warning); }
.password-strength[data-level="3"] span:nth-child(-n+3) { background: var(--gold); }
.password-strength[data-level="4"] span { background: var(--success); }

/* ==========================================================================
   25. ONBOARDING WIZARD
   ========================================================================== */

.wizard-shell {
  min-height: calc(100vh - 6rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--offwhite);
  padding: 2.5rem 1rem;
}

.wizard-card {
  width: 100%;
  max-width: 40rem;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px dashed var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--shadow-glass-hover);
  padding: 2rem 1.5rem 2.5rem;
}
@media (min-width: 40em) { .wizard-card { padding: 3rem 3.5rem 3rem; } }

.wizard-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2.25rem;
}
.wizard-progress__dot {
  width: 2rem;
  height: 3px;
  background: rgba(26, 27, 31, 0.12);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-base);
}
.wizard-progress__dot.is-active,
.wizard-progress__dot.is-complete { background: var(--gold); }

.wizard-step { display: none; animation: fade-in-up-sm 0.35s ease; }
.wizard-step.is-active { display: block; }
@keyframes fade-in-up-sm {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.wizard-step__eyebrow { text-align: center; }
.wizard-step__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-align: center;
  margin: 0.5rem 0 0.5rem;
  color: var(--black);
}
.wizard-step__subtitle {
  text-align: center;
  font-size: 0.85rem;
  color: var(--charcoal-light);
  margin-bottom: 2rem;
}

/* Multi/single-select "pill" options (style, fit) */
.option-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-bottom: 2rem;
}
.option-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.25rem;
  border: 1.5px solid rgba(26, 27, 31, 0.15);
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--charcoal);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast),
              color var(--transition-fast), transform var(--transition-fast);
}
.option-pill:hover { border-color: var(--gold); transform: translateY(-1px); }
.option-pill.is-selected {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}
.option-pill.is-selected .option-pill__check { opacity: 1; transform: scale(1); }
.option-pill__check {
  opacity: 0;
  transform: scale(0.5);
  color: var(--gold);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

/* Size grid (single-select squares) */
.size-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.size-option {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(26, 27, 31, 0.15);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--charcoal);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast),
              color var(--transition-fast), transform var(--transition-fast);
}
.size-option:hover { border-color: var(--gold); transform: translateY(-1px); }
.size-option.is-selected { background: var(--gold); border-color: var(--gold); color: var(--black); }

/* Color swatch options (multi-select) */
.color-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.color-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
}
.color-option__swatch {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1.5px solid rgba(26, 27, 31, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  color: var(--gold);
  font-size: 0.9rem;
}
.color-option:hover .color-option__swatch { transform: translateY(-2px); }
.color-option.is-selected .color-option__swatch {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--gold);
}
.color-option__swatch .fa-check { opacity: 0; transition: opacity var(--transition-fast); }
.color-option.is-selected .color-option__swatch .fa-check { opacity: 1; }
.color-option__label { font-size: 0.75rem; color: var(--charcoal-light); }

/* Home / Office address-type selector */
.address-type-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.address-type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 1rem;
  border: 1.5px solid rgba(26, 27, 31, 0.15);
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}
.address-type-option i { font-size: 1.75rem; color: var(--charcoal-light); transition: color var(--transition-fast); }
.address-type-option span { font-weight: 600; font-size: 0.9rem; color: var(--charcoal); }
.address-type-option:hover { transform: translateY(-2px); border-color: var(--gold); }
.address-type-option.is-selected {
  border-color: var(--gold);
  background: #FBF4E2;
}
.address-type-option.is-selected i,
.address-type-option.is-selected span { color: var(--gold-dark); }

.wizard-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}
.wizard-skip-all {
  text-align: center;
  margin-top: 1.5rem;
}
.wizard-skip-all button {
  background: none;
  border: none;
  font-size: 0.8rem;
  color: var(--charcoal-light);
  cursor: pointer;
}
.wizard-skip-all button:hover { color: var(--black); text-decoration: underline; }

/* ==========================================================================
   26. SHOP PAGE (layout, filters, toolbar, grid, quick view)
   ========================================================================== */

.shop-hero {
  background: var(--charcoal);
  color: var(--white);
  padding: 2.5rem 0;
}

.shop-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 64em) { .shop-layout { grid-template-columns: 260px 1fr; } }

/* Filter panel: inline sidebar on desktop, off-canvas panel on mobile
   (same markup, same technique as .mobile-drawer). Unlike .mobile-drawer/
   .mini-cart (deliberate full-screen dark takeovers with their own
   self-contained header), this is a plain white panel that's meant to sit
   BELOW the sticky site header, not bury it - top uses --site-header-h
   (kept in sync with the header's real rendered height by
   assets/js/shop.js) instead of 0, so the header's logo/search/nav stay
   visible and usable while filters are open. */
.shop-filters {
  position: fixed;
  top: var(--site-header-h, 0px);
  right: 15%;
  bottom: 0;
  left: 0;
  z-index: var(--z-modal);
  width: min(85vw, 320px);
  background: var(--white);
  overflow-y: auto;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--transition-slow), visibility var(--transition-slow);
}
.shop-filters.is-open { transform: translateX(0); visibility: visible; }
@media (min-width: 64em) {
  .shop-filters {
    position: static;
    inset: auto;
    /* z-index still needs resetting even though position is now static -
       .shop-filters is a grid item (direct child of .shop-layout's
       display:grid), and per the CSS Grid spec z-index applies to grid
       items even when position:static. Left at the mobile drawer's
       z-index:101, this sidebar would paint above the sticky site header
       (z-index:50) wherever their boxes geometrically overlap on scroll. */
    z-index: auto;
    width: auto;
    transform: none;
    visibility: visible;
    overflow: visible;
  }
}

.shop-filters__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
  border-bottom: 1px solid rgba(26, 27, 31, 0.08);
}
@media (min-width: 64em) { .shop-filters__header { display: none; } }

.filter-group {
  padding: 1.25rem;
  border-bottom: 1px solid rgba(26, 27, 31, 0.08);
}
@media (min-width: 64em) { .filter-group { padding: 0 0 1.75rem; border: none; margin-bottom: 1.75rem; } }

.filter-group__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 0.9rem;
}

.filter-check-list { display: flex; flex-direction: column; gap: 0.6rem; }
.filter-check-list label { display: flex; align-items: center; gap: 0.55rem; font-size: 0.85rem; color: var(--charcoal); cursor: pointer; }
.filter-check-list input { accent-color: var(--gold); cursor: pointer; }
.filter-check-list a.is-active { color: var(--gold-dark); font-weight: 600; }

.filter-chip-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(26, 27, 31, 0.15);
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  color: var(--charcoal);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.filter-chip:hover { border-color: var(--gold); }
.filter-chip.is-selected { background: var(--black); border-color: var(--black); color: var(--white); }

.filter-swatch-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.filter-swatch {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid rgba(26, 27, 31, 0.15);
  cursor: pointer;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.filter-swatch:hover { transform: translateY(-1px); }
.filter-swatch.is-selected { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--gold); }

.price-range-inputs { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.85rem; }
.price-range-inputs input { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid rgba(26, 27, 31, 0.2); border-radius: var(--radius-sm); font-size: 0.85rem; }
.price-range-inputs input:focus { outline: none; border-color: var(--gold); }

/* Toolbar: result count + sort + mobile filter toggle */
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(26, 27, 31, 0.08);
}
.shop-toolbar__count { font-size: 0.85rem; color: var(--charcoal-light); }
.shop-toolbar__actions { display: flex; align-items: center; gap: 0.75rem; }
.shop-sort-select { min-width: 11rem; }

.active-filter-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.active-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  background: var(--offwhite);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  color: var(--charcoal);
}
.active-filter-pill button { background: none; border: none; cursor: pointer; color: var(--charcoal-light); }
.active-filter-pill button:hover { color: var(--danger); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1.25rem;
}
@media (min-width: 40em) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; } }
@media (min-width: 80em) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.shop-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 1rem;
  color: var(--charcoal-light);
}
.shop-empty i { font-size: 2.5rem; color: rgba(26, 27, 31, 0.15); }

.shop-grid-loading { position: relative; min-height: 12rem; }
.shop-grid-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(248, 244, 238, 0.6);
}

/* Quick View modal content */
.quick-view__layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 40em) { .quick-view__layout { grid-template-columns: 11rem 1fr; } }
.quick-view__media {
  aspect-ratio: 4/5;
  background: var(--offwhite);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(26, 27, 31, 0.15);
}
.quick-view__option-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 1rem 0 0.6rem; color: var(--charcoal); }
.quick-view__swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.quick-view__swatch {
  width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid rgba(26,27,31,.15); cursor: pointer;
  transition: box-shadow var(--transition-fast);
}
.quick-view__swatch.is-selected { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--gold); }
.quick-view__sizes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.quick-view__size {
  min-width: 2.5rem; height: 2.5rem; padding: 0 0.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(26,27,31,.15); border-radius: var(--radius-sm);
  font-size: 0.8rem; font-weight: 600; cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.quick-view__size:hover { border-color: var(--gold); }
.quick-view__size.is-selected { background: var(--gold); border-color: var(--gold); color: var(--black); }
.quick-view__size.is-disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.quick-view__qty { display: inline-flex; align-items: center; border: 1px solid rgba(26,27,31,.15); border-radius: var(--radius-sm); }
.quick-view__qty button { width: 2.25rem; height: 2.25rem; background: none; border: none; cursor: pointer; font-size: 0.9rem; }
.quick-view__qty button:hover { color: var(--gold-dark); }
.quick-view__qty input { width: 2.5rem; text-align: center; border: none; font-weight: 600; }
.quick-view__qty input:focus { outline: none; }
.quick-view__stock-note { font-size: 0.75rem; margin-top: 0.5rem; }
.quick-view__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.quick-view__actions .btn { width: 100%; }

/* ==========================================================================
   27. PRODUCT DETAIL PAGE
   ========================================================================== */

.pdp-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 64em) { .pdp-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3.5rem; } }
/* Grid items default to min-width: auto, which lets their content's
   intrinsic size force a track wider than its 1fr/minmax() share - the
   gallery column (with its aspect-ratio slides) hit exactly this: it grew
   to Chromium's ~33,554,432px LayoutUnit clamp (its overflow value for an
   unresolvable/Infinity CSS length) and silently swallowed the rest of the
   page below it. min-width: 0 on the direct grid items lets them actually
   shrink to their track's real size instead of demanding their content's. */
.pdp-layout > * { min-width: 0; }

/* --- Gallery --- */
/* Belt-and-suspenders: gives the swiper container a size from CSS alone
   (Swiper.js measures this element at init to size its slides), independent
   of grid resolution above. */
.pdp-gallery__main {
  aspect-ratio: 4 / 5;
  background: var(--offwhite);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.pdp-gallery__main .swiper-slide {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdp-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.pdp-gallery__main .swiper-zoom-container { width: 100%; height: 100%; cursor: zoom-in; }
/* Swiper's own CSS letterboxes zoom-container images (object-fit: contain);
   photos should fill the frame instead. */
.pdp-gallery__main .swiper-zoom-container > img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.pdp-gallery__main img, .pdp-gallery__thumbs img { transition: filter 0.35s ease; }

/* Admin: per-color photo groups */
.color-photo-group { padding: 1rem 0; border-top: 1px solid var(--border, rgba(26,27,31,.1)); }
.color-photo-group:first-of-type { border-top: 0; }
.color-photo-group__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
.color-photo-group__head .btn { margin-left: auto; }
.color-photo-group__dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid rgba(26,27,31,.2); }

/* Color options: the product photo per color (CSS-filter tinted) */
.pdp-colors { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.25rem; }
.pdp-color {
  width: 4.5rem; height: 5.5rem; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--radius-sm); background: var(--offwhite);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.pdp-color:hover { transform: translateY(-2px); }
.pdp-color.is-selected { border-color: var(--gold); }
.pdp-color img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter 0.35s ease; }
.pdp-color__dot { display: block; width: 100%; height: 100%; }

.pdp-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: radial-gradient(circle at 50% 50%, var(--white) 0%, var(--offwhite) 100%);
}
.pdp-fallback__ring {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 2px dashed rgba(224, 183, 106, 0.4);
}
.pdp-fallback i { position: relative; color: var(--gold); opacity: 0.85; font-size: 6rem; }
@media (min-width: 40em) { .pdp-fallback i { font-size: 8rem; } }

.pdp-gallery__thumbs { margin-top: 0.85rem; }
.pdp-gallery__thumbs .swiper-slide {
  width: 4.5rem;
  height: 5.5rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--offwhite);
  border: 1.5px solid transparent;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
}
.pdp-gallery__thumbs .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.pdp-gallery__thumbs .swiper-slide-thumb-active { opacity: 1; border-color: var(--gold); }

/* Swiper's own pagination/nav, re-themed to the brand palette */
.pdp-gallery__main .swiper-pagination-bullet { background: var(--white); opacity: 0.7; }
.pdp-gallery__main .swiper-pagination-bullet-active { background: var(--gold); opacity: 1; }
.pdp-gallery__main .swiper-button-next,
.pdp-gallery__main .swiper-button-prev {
  color: var(--black);
  background: rgba(255, 255, 255, 0.85);
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
}
.pdp-gallery__main .swiper-button-next::after,
.pdp-gallery__main .swiper-button-prev::after { font-size: 0.85rem; font-weight: 700; }

/* --- Info column --- */
.pdp-sku { font-size: 0.75rem; color: var(--charcoal-light); letter-spacing: 0.05em; }
.pdp-title { font-family: var(--font-display); font-size: 1.75rem; color: var(--black); margin: 0.35rem 0 0.75rem; }
@media (min-width: 40em) { .pdp-title { font-size: 2.1rem; } }

.pdp-price { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1.25rem; }
.pdp-price__current { font-family: var(--font-display); font-size: 1.75rem; color: var(--black); }
.pdp-price__original { font-size: 1.05rem; color: var(--charcoal-light); text-decoration: line-through; }

.pdp-option-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--charcoal);
  margin: 1.25rem 0 0.65rem;
}
.pdp-option-label span.selected-value { font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--charcoal-light); }

.pdp-stock-row { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0 1.5rem; font-size: 0.85rem; }
.pdp-stock-row i { font-size: 0.6rem; }

.pdp-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.pdp-actions .btn { flex: 1 1 0; min-width: 0; }
/* Below 32em, Add to Cart takes its own full-width row; Buy Now shares the
   next row with the wishlist toggle instead of it dropping onto an orphaned
   row by itself (its fixed 3rem size never matched a column layout). */
#pdp-add-to-cart { flex-basis: 100%; }
@media (min-width: 32em) { .pdp-actions .btn { flex: 1; } #pdp-add-to-cart { flex-basis: 0; } }

/* Wishlist toggle, sits alongside Add to Cart / Buy Now rather than
   stacked on the product card - same is-active fill as .product-card__icon-btn. */
.pdp-wishlist-btn {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(26, 27, 31, 0.2);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--charcoal);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.pdp-wishlist-btn:hover { border-color: var(--gold); color: var(--gold-dark); }
.pdp-wishlist-btn.is-active { border-color: var(--gold); color: var(--gold-dark); background: #FBF3E4; }
.pdp-wishlist-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.pdp-meta-list { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(26, 27, 31, 0.08); display: flex; flex-direction: column; gap: 0.6rem; }
.pdp-meta-list__item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; color: var(--charcoal-light); }
.pdp-meta-list__item i { color: var(--gold); width: 1rem; text-align: center; }

/* --- Tabs (Description / Specifications / Care & Printing) --- */
.pdp-tabs { margin-top: 3.5rem; }
.pdp-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(26, 27, 31, 0.1);
  margin-bottom: 1.75rem;
}
.pdp-tabs__btn {
  padding: 0.85rem 1.25rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--charcoal-light);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.pdp-tabs__btn:hover { color: var(--black); }
.pdp-tabs__btn.is-active { color: var(--black); border-bottom-color: var(--gold); }
.pdp-tabs__panel { display: none; max-width: 48rem; }
.pdp-tabs__panel.is-active { display: block; animation: fade-in-up-sm 0.3s ease; }
.pdp-spec-table { width: 100%; border-collapse: collapse; }
.pdp-spec-table tr { border-bottom: 1px solid rgba(26, 27, 31, 0.06); }
.pdp-spec-table th { text-align: left; padding: 0.65rem 1rem 0.65rem 0; font-size: 0.8rem; color: var(--charcoal-light); font-weight: 600; width: 40%; }
.pdp-spec-table td { padding: 0.65rem 0; font-size: 0.85rem; color: var(--charcoal); }

/* --- Related products --- */
.pdp-related { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid rgba(26, 27, 31, 0.08); }

/* ==========================================================================
   28. QUANTITY STEPPER (shared by the mini cart and the full cart page)
   Markup: <div class="cart-qty" data-cart-qty>
             <button data-cart-qty-decrease>-</button>
             <span data-cart-qty-value>1</span>
             <button data-cart-qty-increase>+</button>
           </div>
   Behavior lives in assets/js/main.js.
   ========================================================================== */

.cart-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(26, 27, 31, 0.15);
  border-radius: var(--radius-sm);
}
.cart-qty button {
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 0.85rem;
  color: var(--charcoal);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.cart-qty button:hover:not(:disabled) { color: var(--gold-dark); }
.cart-qty button:disabled { opacity: 0.3; cursor: not-allowed; }
.cart-qty span {
  width: 2.1rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--black);
}
.cart-qty--sm button { width: 1.7rem; height: 1.7rem; font-size: 0.75rem; }
.cart-qty--sm span { width: 1.7rem; font-size: 0.75rem; }

/* Full-size stepper only (cart page, PDP) - it's a repeatedly-tapped
   primary control, so mobile gets a proper touch target. Left at its
   compact size in the mini-cart drawer (.cart-qty--sm), where the extra
   width would crowd an already-narrow off-canvas panel. */
@media (max-width: 40em) {
  .cart-qty:not(.cart-qty--sm) button { width: 2.75rem; height: 2.75rem; }
}

/* ==========================================================================
   29. MINI CART (off-canvas drawer)
   Same off-canvas technique as .mobile-drawer (see MOBILE NAVIGATION above),
   just on-brand light rather than black. Markup + toggling live in
   includes/header.php + assets/js/main.js; content is server-rendered by
   render_mini_cart_body() in includes/cart.php.
   ========================================================================== */

.mini-cart-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-overlay);
  background: rgba(17, 18, 20, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.mini-cart-overlay.is-open { opacity: 1; visibility: visible; }

/* Same backdrop-filter fallback concern as .modal above - without blur
   support this would otherwise be translucent-white over live page
   content, both unreadable at once. */
.mini-cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  width: min(90vw, 420px);
  background: var(--white);
  border-left: 1px solid rgba(26, 27, 31, 0.08);
  color: var(--charcoal);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--transition-slow), visibility var(--transition-slow);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .mini-cart {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
  }
}
.mini-cart.is-open { transform: translateX(0); visibility: visible; }

.mini-cart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(26, 27, 31, 0.08);
}
.mini-cart__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--black);
}
.mini-cart__close {
  background: none;
  border: none;
  color: var(--charcoal-light);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem;
  transition: color var(--transition-fast);
}
.mini-cart__close:hover { color: var(--black); }

.mini-cart__body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.mini-cart-empty {
  margin: auto;
  text-align: center;
  padding: 2rem 1.5rem;
}
.mini-cart-empty i { font-size: 2.75rem; color: rgba(26, 27, 31, 0.15); margin-bottom: 1rem; }
.mini-cart-empty .btn { margin-top: 1.25rem; }

.mini-cart-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 1.5rem;
  flex: 1;
}

.mini-cart-item {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: 0.85rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(26, 27, 31, 0.08);
  overflow: hidden;
  max-height: 12rem;
  opacity: 1;
  transform: translateX(0);
  transition: opacity var(--transition-base), transform var(--transition-base),
              max-height var(--transition-slow), padding var(--transition-slow), border-color var(--transition-slow);
}
.mini-cart-item.is-removing,
.cart-line.is-removing {
  opacity: 0;
  transform: translateX(16px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  pointer-events: none;
}
.mini-cart-item.is-updating { opacity: 0.55; pointer-events: none; }
.mini-cart-item.is-unavailable .mini-cart-item__media { opacity: 0.5; }

.mini-cart-item__media {
  width: 4.5rem;
  height: 5.5rem;
  background: var(--offwhite);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(26, 27, 31, 0.15);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.mini-cart-item__media img { width: 100%; height: 100%; object-fit: cover; }

.mini-cart-item__body { min-width: 0; }
.mini-cart-item__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--black);
}
.mini-cart-item__name:hover { color: var(--gold-dark); }
.mini-cart-item__meta { display: flex; gap: 0.6rem; font-size: 0.75rem; color: var(--charcoal-light); margin: 0.3rem 0 0.6rem; }
.mini-cart-item__meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.mini-cart-item__swatch,
.cart-line__swatch {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  border: 1px solid rgba(26, 27, 31, 0.2);
}
.mini-cart-item__notice { font-size: 0.75rem; color: var(--danger); font-weight: 600; }

.mini-cart-item__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.mini-cart-item__price { font-size: 0.85rem; font-weight: 700; color: var(--black); white-space: nowrap; }

.mini-cart-item__remove {
  background: none;
  border: none;
  color: var(--charcoal-light);
  cursor: pointer;
  align-self: flex-start;
  padding: 0.2rem;
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.mini-cart-item__remove:hover { color: var(--danger); transform: scale(1.1); }

.mini-cart-summary {
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid rgba(26, 27, 31, 0.08);
}
.mini-cart-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 0.5rem;
}
.mini-cart-summary__actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.mini-cart-summary__actions .btn { flex: 1; }

/* ==========================================================================
   30. CART PAGE
   ========================================================================== */

.cart-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(26, 27, 31, 0.08);
}
.cart-page-header .btn-text { color: var(--danger); }
.cart-page-header .btn-text:hover { color: var(--gold-dark); }

.cart-page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 64em) { .cart-page-layout { grid-template-columns: minmax(0, 1fr) 22rem; } }

.cart-line-list { list-style: none; margin: 0; padding: 0; }

.cart-line {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(26, 27, 31, 0.08);
  overflow: hidden;
  max-height: 16rem;
  opacity: 1;
  transition: opacity var(--transition-base), transform var(--transition-base),
              max-height var(--transition-slow), padding var(--transition-slow), border-color var(--transition-slow);
}
.cart-line:first-child { padding-top: 0; }
.cart-line.is-unavailable { background: rgba(166, 65, 46, 0.03); }
.cart-line.is-updating { opacity: 0.55; pointer-events: none; }

.cart-line__media {
  width: 6.5rem;
  height: 8rem;
  background: var(--offwhite);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(26, 27, 31, 0.15);
  font-size: 1.75rem;
  overflow: hidden;
}
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }

.cart-line__body { min-width: 0; }
.cart-line__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cart-line__name { font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--black); }
.cart-line__name:hover { color: var(--gold-dark); }
.cart-line__remove {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--charcoal-light);
  cursor: pointer;
  padding: 0.25rem;
  transition: color var(--transition-fast);
}
.cart-line__remove:hover { color: var(--danger); }

.cart-line__meta { display: flex; gap: 1rem; font-size: 0.82rem; color: var(--charcoal-light); margin: 0.4rem 0 0.85rem; }
.cart-line__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }

.cart-line__notice { font-size: 0.8rem; color: var(--danger); font-weight: 600; }
.cart-line__notice--warning { color: var(--warning); }

.cart-line__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}
.cart-line__unit-price { font-size: 0.82rem; color: var(--charcoal-light); }
.cart-line__subtotal { margin-left: auto; font-size: 1.05rem; font-weight: 700; color: var(--black); }

@media (max-width: 30em) {
  .cart-line { grid-template-columns: 5rem 1fr; gap: 0.85rem; }
  .cart-line__media { width: 5rem; height: 6.25rem; }
  .cart-line__subtotal { margin-left: 0; width: 100%; text-align: right; }
}

/* --- Order summary sidebar --- */
.cart-summary {
  background: var(--offwhite);
  padding: 1.75rem;
  border-radius: var(--radius-md);
  position: sticky;
  top: 5.5rem;
}
.cart-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.95rem;
  color: var(--charcoal);
  padding: 0.6rem 0;
}
.cart-summary__row--total {
  border-top: 1px solid rgba(26, 27, 31, 0.12);
  margin-top: 0.25rem;
  padding-top: 0.85rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--black);
}
.cart-summary .btn.w-full { width: 100%; }
.cart-summary__continue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--charcoal-light);
  transition: color var(--transition-fast);
}
.cart-summary__continue:hover { color: var(--black); }

.free-shipping-bar { margin-bottom: 1.5rem; }
.free-shipping-bar p { color: var(--charcoal); }
.free-shipping-bar p strong { color: var(--gold-dark); }
.free-shipping-bar.is-complete p { color: var(--success); font-weight: 600; }
.free-shipping-bar.is-complete p i { margin-right: 0.3rem; }
.free-shipping-bar__track {
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(26, 27, 31, 0.1);
  overflow: hidden;
}
.free-shipping-bar__fill {
  height: 100%;
  background: var(--gold);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}
.free-shipping-bar.is-complete .free-shipping-bar__fill { background: var(--success); }

/* --- Coupon code box (cart/index.php + checkout/index.php's read-only
   discount-row echo of whatever's applied here - see includes/coupons.php) --- */
.coupon-box { margin-bottom: 1.5rem; }
.coupon-box__form { display: flex; gap: 0.5rem; }
.coupon-box__form .form-control { flex: 1; min-width: 0; text-transform: uppercase; }
.coupon-box__form .form-control::placeholder { text-transform: none; }
.coupon-box__hint { margin-top: 0.5rem; font-size: 0.78rem; color: var(--danger); }
.coupon-box__applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  background: var(--success-bg);
  border: 1px dashed var(--success);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--success);
}
.coupon-box__applied i { margin-right: 0.35rem; }

/* --- Empty cart state (also used as the shell shown after "Clear Cart") --- */
.cart-empty-state {
  text-align: center;
  padding: 5rem 1rem;
  max-width: 28rem;
  margin: 0 auto;
}
.cart-empty-state i { font-size: 3.5rem; color: rgba(26, 27, 31, 0.15); }

/* Small "Custom" flag inline with a cart line's product name (mini cart +
   full cart page), for the custom-design line-item variant introduced by
   includes/custom-design.php. */
.mini-cart-item__badge { display: inline-block; margin-right: 0.35rem; vertical-align: middle; font-size: 0.6rem; }
.cart-line__badge { display: inline-block; margin-bottom: 0.3rem; }

/* ==========================================================================
   31. CUSTOM DESIGN STUDIO
   ========================================================================== */

.design-studio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 64em) { .design-studio { grid-template-columns: minmax(0, 1fr) 22rem; } }

.design-studio__form { display: flex; flex-direction: column; gap: 2.25rem; }

.design-step__label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 1rem;
}
.design-step__label .selected-value { font-weight: 400; color: var(--charcoal-light); margin-left: 0.25rem; }
.design-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--black);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* Step 1: garment picker */
.design-product-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 40em) { .design-product-options { grid-template-columns: repeat(3, 1fr); } }
.design-product-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  background: var(--white);
  border: 1.5px solid rgba(26, 27, 31, 0.12);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.design-product-option:hover { transform: translateY(-2px); border-color: var(--gold); }
.design-product-option.is-selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.design-product-option__media {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--offwhite);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(26, 27, 31, 0.15);
  font-size: 1.75rem;
  overflow: hidden;
}
.design-product-option__media img { width: 100%; height: 100%; object-fit: cover; }
.design-product-option__name { font-size: 0.85rem; font-weight: 600; color: var(--black); }
.design-product-option__price { font-size: 0.78rem; color: var(--charcoal-light); }

/* Step 5/6: upload dropzone + preview */
.design-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2.5rem 1.5rem;
  border: 2px dashed rgba(26, 27, 31, 0.2);
  border-radius: var(--radius-md);
  background: var(--offwhite);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.design-upload-zone:hover,
.design-upload-zone.is-dragover { border-color: var(--gold); background: #FBF4E2; }
.design-upload-zone i { font-size: 2rem; color: var(--gold-dark); }
.design-upload-zone p { font-size: 0.85rem; color: var(--charcoal); }

.design-upload-preview {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(26, 27, 31, 0.1);
  border-radius: var(--radius-md);
  animation: fade-in-up-sm 0.3s ease;
}
.design-upload-preview__media {
  width: 5.5rem;
  height: 5.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--offwhite);
}
.design-upload-preview__media img { width: 100%; height: 100%; object-fit: cover; }
.design-upload-preview__info { min-width: 0; }
.design-upload-preview__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.design-upload-preview__info .btn-text { margin-top: 0.5rem; color: var(--danger); }
.design-upload-preview__info .btn-text:hover { color: var(--danger); opacity: 0.75; }

/* Sticky order summary sidebar */
.design-summary {
  background: var(--offwhite);
  padding: 1.75rem;
  border-radius: var(--radius-md);
  position: sticky;
  top: 5.5rem;
}
.design-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--charcoal);
  padding: 0.5rem 0;
}
.design-summary__row--unit {
  border-top: 1px solid rgba(26, 27, 31, 0.1);
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  font-weight: 600;
  color: var(--black);
}
.design-summary__row--total {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--black);
}
.design-summary .btn.w-full { width: 100%; }

/* ==========================================================================
   32. ADMIN PANEL SHELL
   ========================================================================== */

.admin-body { background: var(--offwhite); }

.admin-shell { display: flex; min-height: 100vh; }

.admin-sidebar {
  width: 15.5rem;
  height: 100vh; /* position:fixed already spans the viewport via top:0/
                    bottom:0, but position:sticky (desktop, below) has no
                    such effect - as a flex item of .admin-shell it would
                    otherwise stretch to match .admin-main's content height
                    instead of the viewport, leaving .admin-sidebar__nav's
                    overflow-y:auto nothing to actually clip against. */
  flex-shrink: 0;
  background: rgba(17, 18, 20, 0.9);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--white);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: var(--z-modal);
  transform: translateX(-100%);
  transition: transform var(--transition-slow);
}
@media (min-width: 64em) { .admin-sidebar { position: sticky; top: 0; transform: none; } }
.admin-sidebar.is-open { transform: translateX(0); }

.admin-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.5rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-display);
  font-size: 1.05rem;
  flex-shrink: 0;
}
/* flex:1 lets this fill whatever space the fixed-height brand header and
   footer don't take; overflow-y:auto scrolls just this list on its own
   (rather than the whole fixed/sticky sidebar overflowing past the
   viewport) once there are more nav links than fit - already the case on
   shorter screens with every section (Flash Sales, Offers, etc.) enabled. */
.admin-sidebar__nav {
  flex: 1;
  min-height: 0; /* flex items default to min-height:auto (content-based),
                    which silently defeats overflow-y:auto below - without
                    this, the nav grows to fit every link instead of
                    scrolling within the space the header/footer leave it. */
  padding: 1rem 0.75rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.admin-sidebar__nav::-webkit-scrollbar { width: 6px; }
.admin-sidebar__nav::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 999px; }
.admin-sidebar__nav::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.admin-nav-link i { width: 1.1rem; text-align: center; color: var(--gold); }
.admin-nav-link:hover { background: rgba(255, 255, 255, 0.06); color: var(--white); }
.admin-nav-link.is-active { background: var(--gold); color: var(--black); }
.admin-nav-link.is-active i { color: var(--black); }

.admin-sidebar__footer { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 1rem 1.25rem 1.25rem; flex-shrink: 0; }
.admin-sidebar__admin { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.85rem; }
.admin-sidebar__admin i { font-size: 1.75rem; color: rgba(255, 255, 255, 0.4); }
.admin-sidebar__admin-name { font-size: 0.85rem; font-weight: 600; }
.admin-sidebar__admin-role { font-size: 0.72rem; color: rgba(255, 255, 255, 0.5); text-transform: capitalize; }
.admin-sidebar__logout {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  background: none;
  border: none;
  padding: 0.5rem 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.admin-sidebar__logout:hover { color: var(--white); }

.admin-sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) - 1);
  background: rgba(17, 18, 20, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.admin-sidebar-overlay.is-open { opacity: 1; visibility: visible; }
@media (min-width: 64em) { .admin-sidebar-overlay { display: none; } }

.admin-main { flex: 1; min-width: 0; }

/* Same darker-at-top, lighter-once-scrolled behavior as .site-header
   (assets/js/admin.js toggles .is-scrolled the same way main.js does) - the
   light glass family here instead of dark since the admin panel's content
   is plain white/off-white, never a busy hero image/gradient. */
.admin-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(26, 27, 31, 0.08);
  position: sticky;
  top: 0;
  z-index: 10;
  transition: background-color var(--transition-base), box-shadow var(--transition-base);
}
.admin-topbar.is-scrolled {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.15);
}
.admin-topbar__toggle { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--charcoal); }
@media (min-width: 64em) { .admin-topbar__toggle { display: none; } }
.admin-topbar__title { font-family: var(--font-display); font-size: 1.1rem; color: var(--black); }
.admin-topbar__view-site { margin-left: auto; font-size: 0.8rem; color: var(--charcoal-light); display: flex; align-items: center; gap: 0.4rem; }
.admin-topbar__view-site:hover { color: var(--gold-dark); }

.admin-content {
  padding: 1.75rem 1.5rem 3rem;
  max-width: 90rem;
  opacity: 1;
  transition: opacity 0.18s ease;
}
/* SPA navigation (assets/js/admin.js): a brief fade while the next page's
   content is in flight, then a fade-in once it's swapped in - smooth
   without a spinner interrupting the layout. */
.admin-content.is-loading { opacity: 0.35; }
.admin-content.is-loaded { animation: admin-content-in 0.3s ease; }
@keyframes admin-content-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .admin-content, .admin-content.is-loaded { animation: none; transition: none; }
}

.admin-page-header { margin-bottom: 1.5rem; }
.admin-page-header p { color: var(--charcoal-light); margin-top: 0.25rem; }

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(26, 27, 31, 0.08);
  padding-bottom: 1rem;
}
.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid rgba(26, 27, 31, 0.12);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.admin-tab:hover { border-color: var(--gold); }
.admin-tab.is-active { background: var(--black); border-color: var(--black); color: var(--white); }
.admin-tab__count { opacity: 0.6; font-size: 0.75rem; }

.admin-table-wrap {
  background: var(--white);
  border: 1px solid rgba(26, 27, 31, 0.08);
  border-radius: var(--radius-md);
  overflow-x: auto;
}
.admin-table { width: 100%; border-collapse: collapse; min-width: 52rem; }
.admin-table th {
  text-align: left;
  padding: 0.85rem 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal-light);
  border-bottom: 1px solid rgba(26, 27, 31, 0.08);
  white-space: nowrap;
}
.admin-table td { padding: 0.85rem 1rem; border-bottom: 1px solid rgba(26, 27, 31, 0.06); font-size: 0.85rem; vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table__thumb {
  width: 3rem;
  height: 3.75rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--offwhite);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(26, 27, 31, 0.2);
}
.admin-table__thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-table__primary { font-weight: 600; color: var(--black); }
.admin-table__secondary { font-size: 0.78rem; color: var(--charcoal-light); }

.admin-empty {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--charcoal-light);
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid rgba(26, 27, 31, 0.08);
}
.admin-empty i { font-size: 2.5rem; color: rgba(26, 27, 31, 0.15); margin-bottom: 1rem; }

/* Review modal */
.admin-review-modal { max-width: 46rem; }
.design-review { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 40em) { .design-review { grid-template-columns: 12rem 1fr; } }
.design-review__gallery { display: flex; flex-direction: column; gap: 0.75rem; }
.design-review__image {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--offwhite);
  aspect-ratio: 1;
}
.design-review__image img { width: 100%; height: 100%; object-fit: cover; }

.admin-detail-list { margin: 1rem 0 1.25rem; }
.admin-detail-list > div { padding: 0.6rem 0; border-bottom: 1px solid rgba(26, 27, 31, 0.06); }
.admin-detail-list dt { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--charcoal-light); margin-bottom: 0.25rem; }
.admin-detail-list dd { font-size: 0.88rem; color: var(--charcoal); }

/* ==========================================================================
   32b. ADMIN DASHBOARD
   ========================================================================== */

.stat-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (min-width: 40em) { .stat-card-grid { grid-template-columns: repeat(4, 1fr); } }

.stat-card {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.25rem;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1.5px dashed var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--shadow-glass);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
a.stat-card { color: inherit; }
a.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-glass-hover); border-color: rgba(224, 183, 106, 0.3); }

.stat-card__icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--offwhite);
  color: var(--gold-dark);
  font-size: 1.1rem;
}
.stat-card__icon--warning { background: var(--warning-bg); color: var(--warning); }
.stat-card__icon--success { background: var(--success-bg); color: var(--success); }
.stat-card__icon--info { background: var(--info-bg); color: var(--info); }
.stat-card__icon--danger { background: var(--danger-bg); color: var(--danger); }

.stat-card__value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--black); line-height: 1.2; }
.stat-card__label { font-size: 0.78rem; color: var(--charcoal-light); margin-top: 0.15rem; }

.chart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 64em) { .chart-grid { grid-template-columns: 2fr 1fr; } }

.chart-panel {
  background: var(--white);
  border: 1px solid rgba(26, 27, 31, 0.08);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}
.chart-panel__title { font-family: var(--font-display); font-size: 1.05rem; color: var(--black); margin-bottom: 0.25rem; }
.chart-panel__subtitle { font-size: 0.78rem; color: var(--charcoal-light); margin-bottom: 1.25rem; }
.chart-panel__canvas-wrap { position: relative; height: 16rem; }
.chart-panel__canvas-wrap--sm { height: 13rem; }

.chart-panel__empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--charcoal-light);
  text-align: center;
  gap: 0.5rem;
}
.chart-panel__empty i { font-size: 1.75rem; color: rgba(26, 27, 31, 0.15); }

/* ==========================================================================
   32c. ADMIN PRODUCT / CATEGORY MANAGEMENT
   ========================================================================== */

.admin-card {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1.5px dashed var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--shadow-glass);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.admin-card__title { font-family: var(--font-display); font-size: 1.05rem; color: var(--black); margin-bottom: 0.25rem; }
.admin-card__subtitle { font-size: 0.78rem; color: var(--charcoal-light); margin-bottom: 1.25rem; }

.form-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 40em) { .form-grid { grid-template-columns: repeat(2, 1fr); } }
.form-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 40em) { .form-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.form-grid > .span-2 { grid-column: span 1; }
@media (min-width: 40em) { .form-grid > .span-2 { grid-column: span 2; } }

.admin-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--white);
  border: 1px solid rgba(26, 27, 31, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  margin-bottom: 2rem;
}
.admin-form-actions .btn-text { margin-left: auto; color: var(--danger); }

/* Repeater rows (specifications key/value, variant size/color/stock) */
.repeater-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 0.6rem; }
.repeater-row .form-control { flex: 1; min-width: 6rem; }
.repeater-row__remove {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--danger-bg);
  color: var(--danger);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.repeater-row__remove:hover { opacity: 0.8; }

.variant-row[data-flash-item-row] { grid-template-columns: minmax(0, 1.6fr) auto 7rem 9rem 2.5rem; }
.variant-row { display: grid; grid-template-columns: 1fr 1fr 6rem 2.5rem; gap: 0.6rem; align-items: center; margin-bottom: 0.6rem; }
@media (max-width: 40em) { .variant-row[data-flash-item-row] { grid-template-columns: 1fr 1fr; } .variant-row { grid-template-columns: 1fr 1fr; } .variant-row .variant-row__stock, .variant-row .repeater-row__remove { grid-column: span 1; } }

.inline-add-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed rgba(26, 27, 31, 0.12); }
.inline-add-row .form-control { max-width: 10rem; }
.inline-add-row input[type="color"] { width: 2.75rem; height: 2.5rem; padding: 0.2rem; cursor: pointer; }

/* Image manager */
.image-upload-dropzone {
  border: 2px dashed rgba(26, 27, 31, 0.2);
  border-radius: var(--radius-md);
  padding: 2rem 1rem;
  text-align: center;
  color: var(--charcoal-light);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.image-upload-dropzone:hover, .image-upload-dropzone.is-dragover { border-color: var(--gold); background: var(--offwhite); }
.image-upload-dropzone i { font-size: 1.75rem; color: rgba(26, 27, 31, 0.25); margin-bottom: 0.5rem; }

.image-manager-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.25rem;
}
@media (min-width: 40em) { .image-manager-grid { grid-template-columns: repeat(4, 1fr); } }

.image-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--offwhite);
  border: 2px solid transparent;
}
.image-tile.is-primary { border-color: var(--gold); }
.image-tile img { width: 100%; height: 100%; object-fit: cover; }
.image-tile__badge { position: absolute; top: 0.4rem; left: 0.4rem; }
.image-tile__actions {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.4rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}
.image-tile__btn {
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--charcoal);
  font-size: 0.7rem;
  cursor: pointer;
}
.image-tile__btn:hover { background: var(--black); color: var(--gold); }
.image-tile__btn.is-danger:hover { background: var(--danger); color: var(--white); }

/* Inventory quick-adjust modal */
.inventory-grid { display: flex; flex-direction: column; gap: 0.75rem; max-height: 22rem; overflow-y: auto; }
.inventory-row { display: grid; grid-template-columns: 1.25rem 1fr 6rem auto; gap: 0.75rem; align-items: center; }
.inventory-row__swatch { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1px solid rgba(26, 27, 31, 0.15); }
.inventory-row__label { font-size: 0.85rem; color: var(--charcoal); }

/* admin/pages/banner-form.php: form column + a sticky live-preview column on
   large screens, single column (preview follows the form) below that.
   align-items must stay at its grid default (stretch, i.e. NOT "start") -
   with "start" the preview column shrinks to its own (short) content
   height, leaving position:sticky nothing to stay pinned within once the
   page scrolls past that short box. Stretching it to match the taller
   form column is what gives the sticky card room to travel. */
.banner-form-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 64em) { .banner-form-layout { grid-template-columns: 1fr 22rem; } }

/* Clears .admin-topbar's own sticky height (top:0) so the preview card
   doesn't scroll up underneath it - same "stick below the fixed header"
   pattern as .checkout-summary. */
.banner-form-preview-col .admin-card { position: sticky; top: 5.5rem; }

/* A small, self-contained approximation of the real .hero-slide - deliberately
   not reusing the site's own hero classes (those assume full page width and
   a whole page's worth of surrounding chrome), just enough of the same
   background/text-align/feature-chip/button language to preview by. */
.banner-preview {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 14rem;
  padding: 1.5rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--black);
  background-size: cover;
  background-position: center;
  color: var(--white);
  transition: background-color var(--transition-fast);
}
.banner-preview__text { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.banner-preview[data-align="center"] { text-align: center; }
.banner-preview[data-align="center"] .banner-preview__text { align-items: center; }
.banner-preview[data-align="right"] { text-align: right; }
.banner-preview[data-align="right"] .banner-preview__text { align-items: flex-end; }
.banner-preview__subtitle {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.75); margin-bottom: 0.4rem; min-height: 1em;
}
.banner-preview__title {
  font-family: var(--font-display); font-size: 1.4rem; line-height: 1.15; margin-bottom: 0.5rem;
}
.banner-preview__description { font-size: 0.78rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 0.6rem; }
.banner-preview__features { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0 0 0.75rem; }
.banner-preview[data-align="center"] .banner-preview__features { justify-content: center; }
.banner-preview[data-align="right"] .banner-preview__features { justify-content: flex-end; }
.banner-preview__features li {
  font-size: 0.65rem; padding: 0.2rem 0.55rem; border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2);
}
.banner-preview__features:empty { display: none; }
.banner-preview__button {
  display: inline-flex; align-self: flex-start; padding: 0.5rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--gold); color: var(--black); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; width: fit-content;
}
.banner-preview[data-align="center"] .banner-preview__button { align-self: center; }
.banner-preview[data-align="right"] .banner-preview__button { align-self: flex-end; }
.banner-preview__media {
  position: relative; z-index: 1; flex-shrink: 0; width: 6rem; height: 8rem;
  border-radius: var(--radius-sm); overflow: hidden; background: rgba(255, 255, 255, 0.08);
}
.banner-preview__media img { width: 100%; height: 100%; object-fit: cover; }
.banner-preview__media:empty { display: none; }

/* ==========================================================================
   33. CHECKOUT
   ========================================================================== */

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 64em) { .checkout-layout { grid-template-columns: minmax(0, 1fr) 22rem; } }

.checkout-layout__main { display: flex; flex-direction: column; gap: 2.25rem; }

.checkout-section { padding-bottom: 2rem; border-bottom: 1px solid rgba(26, 27, 31, 0.08); }
.checkout-section:last-child { border-bottom: none; padding-bottom: 0; }
.checkout-section__head { display: flex; align-items: center; justify-content: space-between; }
.checkout-section__title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--black);
  margin-bottom: 1.25rem;
}
.checkout-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--black);
  color: var(--gold);
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* --- Order summary line items (read-only) --- */
.checkout-item-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.checkout-item { display: flex; align-items: flex-start; gap: 1rem; }
.checkout-item.is-unavailable { opacity: 0.6; }
.checkout-item__media {
  position: relative;
  width: 4rem;
  height: 5rem;
  flex-shrink: 0;
  background: var(--offwhite);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(26, 27, 31, 0.15);
  overflow: hidden;
}
.checkout-item__media img { width: 100%; height: 100%; object-fit: cover; }
.checkout-item__qty-badge {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkout-item__body { flex: 1; min-width: 0; }
.checkout-item__name { font-size: 0.9rem; font-weight: 600; color: var(--black); }
.checkout-item__badge { display: inline-block; margin-right: 0.35rem; vertical-align: middle; font-size: 0.6rem; }
.checkout-item__meta { display: flex; gap: 0.75rem; font-size: 0.78rem; color: var(--charcoal-light); margin-top: 0.25rem; }
.checkout-item__notice { font-size: 0.78rem; color: var(--danger); font-weight: 600; margin-top: 0.25rem; }
.checkout-item__price { font-size: 0.9rem; font-weight: 700; color: var(--black); white-space: nowrap; }

/* --- Address cards --- */
.address-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 40em) { .address-grid { grid-template-columns: repeat(2, 1fr); } }

.address-card {
  position: relative;
  display: block;
  padding: 1.25rem;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1.5px dashed var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--shadow-glass);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.address-card:hover { border-color: var(--gold); }
.address-card.is-selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--shadow-glass); background: rgba(224, 183, 106, 0.16); }
.address-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.address-card__badge { text-transform: capitalize; }
.address-card__name { font-size: 0.92rem; font-weight: 700; color: var(--black); }
.address-card__phone { font-size: 0.82rem; color: var(--charcoal-light); margin-bottom: 0.5rem; }
.address-card__lines { font-size: 0.85rem; color: var(--charcoal); line-height: 1.5; }
.address-card__actions { display: flex; gap: 1rem; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid rgba(26, 27, 31, 0.08); }
.address-card__delete { color: var(--danger); }
.address-card__delete:hover { color: var(--danger); opacity: 0.75; }
.address-card__check {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: var(--gold);
  font-size: 1.1rem;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.address-card.is-selected .address-card__check { opacity: 1; transform: scale(1); }

.address-card--add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 10rem;
  background: var(--glass-bg-tint);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1.5px dashed var(--glass-border);
  border-radius: var(--glass-radius);
  color: var(--charcoal-light);
  font-size: 0.85rem;
  font-weight: 600;
}
.address-card--add i { font-size: 1.5rem; color: var(--gold-dark); }
.address-card--add:hover { border-color: var(--gold); color: var(--black); }

/* --- Payment method --- */
.payment-options { display: flex; flex-direction: column; gap: 0.75rem; }
.payment-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border: 1.5px solid rgba(26, 27, 31, 0.12);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.payment-option i:first-of-type { font-size: 1.35rem; color: var(--gold-dark); width: 1.75rem; text-align: center; }
.payment-option span { display: flex; flex-direction: column; }
.payment-option strong { font-size: 0.92rem; color: var(--black); }
.payment-option small { font-size: 0.78rem; color: var(--charcoal-light); }
.payment-option.is-selected { border-color: var(--gold); background: #FBF4E2; }
.payment-option.is-disabled { opacity: 0.5; cursor: not-allowed; }
.payment-option__check { margin-left: auto; color: var(--gold); opacity: 0; transition: opacity var(--transition-fast); }
.payment-option.is-selected .payment-option__check { opacity: 1; }

/* --- Totals sidebar (shared shape with .cart-summary/.design-summary) --- */
.checkout-summary {
  background: var(--offwhite);
  padding: 1.75rem;
  border-radius: var(--radius-md);
  position: sticky;
  top: 5.5rem;
}
.checkout-summary__row { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.92rem; color: var(--charcoal); padding: 0.5rem 0; }
.checkout-summary__row--total {
  border-top: 1px solid rgba(26, 27, 31, 0.12);
  margin-top: 0.25rem;
  padding-top: 0.85rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--black);
}
.checkout-summary .btn.w-full { width: 100%; }
#checkout-address-warning { display: flex; align-items: center; gap: 0.4rem; color: var(--danger); }
#checkout-address-warning[hidden] { display: none; }

/* --- Order confirmation --- */
.order-confirmation-banner {
  text-align: center;
  padding: 3rem 1rem;
  background: var(--offwhite);
  border-radius: var(--radius-md);
}
.order-confirmation-banner i { font-size: 3.5rem; color: var(--success); }
.order-confirmation-banner__number {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.4rem 1rem;
  background: var(--black);
  color: var(--gold);
  border-radius: var(--radius-full);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
}

/* ==========================================================================
   34. ACCOUNT DASHBOARD
   ========================================================================== */

.account-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 64em) { .account-layout { grid-template-columns: 16rem minmax(0, 1fr); } }

/* SPA navigation between account pages (assets/js/account-spa.js) swaps
   #main-content in place - this is its only visual feedback while a fetch
   is in flight, same idea as .admin-content.is-loading. */
#main-content.is-account-loading { opacity: 0.4; transition: opacity 0.15s ease; }
@media (prefers-reduced-motion: reduce) {
  #main-content.is-account-loading { transition: none; }
}

.account-sidebar {
  background: var(--offwhite);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.account-sidebar__profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem;
  border-bottom: 1px solid rgba(26, 27, 31, 0.08);
}
.account-sidebar__profile i { font-size: 2.25rem; color: rgba(26, 27, 31, 0.25); flex-shrink: 0; }
.account-sidebar__name { font-size: 0.9rem; font-weight: 700; color: var(--black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-sidebar__email { font-size: 0.75rem; color: var(--charcoal-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.account-nav { padding: 0.6rem; display: flex; flex-direction: column; }
.account-nav-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--charcoal);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.account-nav-link i { width: 1.1rem; text-align: center; color: var(--charcoal-light); }
.account-nav-link:hover { background: rgba(26, 27, 31, 0.05); color: var(--black); }
.account-nav-link.is-active { background: var(--black); color: var(--white); }
.account-nav-link.is-active i { color: var(--gold); }
.account-nav-link--logout { color: var(--danger); margin-top: 0.3rem; border-top: 1px solid rgba(26, 27, 31, 0.08); border-radius: 0; padding-top: 0.9rem; }
.account-nav-link--logout i { color: var(--danger); }
.account-nav-link--logout:hover { background: var(--danger-bg); }

.account-main--narrow { max-width: 34rem; }

.account-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.account-empty {
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--charcoal-light);
  background: var(--offwhite);
  border-radius: var(--radius-md);
}
.account-empty i { font-size: 2.5rem; color: rgba(26, 27, 31, 0.15); margin-bottom: 1rem; }
.account-empty p { margin-bottom: 1.25rem; }

/* --- Dashboard stat cards --- */
.account-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 40em) { .account-stat-grid { grid-template-columns: repeat(4, 1fr); } }
.account-stat-card {
  padding: 1.5rem;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1.5px dashed var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--shadow-glass);
  text-align: center;
}
.account-stat-card i { font-size: 1.5rem; color: var(--gold-dark); margin-bottom: 0.6rem; }
.account-stat-card__value { font-family: var(--font-display); font-size: 1.75rem; color: var(--black); }
.account-stat-card__label { font-size: 0.78rem; color: var(--charcoal-light); }

/* --- Order tracking timeline --- */
.order-timeline {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 1.5rem 0.5rem;
  background: var(--offwhite);
  border-radius: var(--radius-md);
  counter-reset: none;
}
.order-timeline__step {
  position: relative;
  flex: 1;
  min-width: 6rem;
  text-align: center;
  padding: 0 0.5rem;
}
.order-timeline__step::before {
  content: '';
  position: absolute;
  top: 0.85rem;
  left: -50%;
  width: 100%;
  height: 2px;
  background: rgba(26, 27, 31, 0.15);
  z-index: 0;
}
.order-timeline__step:first-child::before { display: none; }
.order-timeline__step.is-done::before { background: var(--gold); }
.order-timeline__dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid rgba(26, 27, 31, 0.15);
  color: transparent;
  font-size: 0.7rem;
  margin-bottom: 0.5rem;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.order-timeline__step.is-done .order-timeline__dot { background: var(--gold); border-color: var(--gold); color: var(--black); }
.order-timeline__step.is-active .order-timeline__dot { background: var(--black); border-color: var(--black); color: var(--gold); animation: order-timeline-pulse 1.8s ease-in-out infinite; }
@keyframes order-timeline-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0.15); } 50% { box-shadow: 0 0 0 6px rgba(0,0,0,0); } }
.order-timeline__label { display: block; font-size: 0.72rem; font-weight: 600; color: var(--charcoal-light); }
.order-timeline__step.is-done .order-timeline__label,
.order-timeline__step.is-active .order-timeline__label { color: var(--black); }
.order-timeline__date { display: block; font-size: 0.68rem; color: var(--charcoal-light); margin-top: 0.15rem; }

@media (max-width: 40em) {
  .order-timeline { flex-direction: column; align-items: flex-start; padding: 1.25rem; }
  .order-timeline__step { display: flex; align-items: center; gap: 0.75rem; text-align: left; min-width: 0; width: 100%; padding: 0.4rem 0; }
  .order-timeline__step::before { display: none; }
  .order-timeline__dot { margin-bottom: 0; }
}

.account-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* --- Custom design history cards (account/custom-designs.php) --- */
.design-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
@media (min-width: 40em) { .design-card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64em) { .design-card-grid { grid-template-columns: repeat(4, 1fr); } }

.design-history-card {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1.5px dashed var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--shadow-glass);
  overflow: hidden;
}
.design-history-card__media {
  position: relative;
  aspect-ratio: 1;
  background: var(--offwhite);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(26, 27, 31, 0.15);
}
.design-history-card__media img { width: 100%; height: 100%; object-fit: cover; }
.design-history-card__status { position: absolute; top: 0.5rem; right: 0.5rem; }
.design-history-card__body { padding: 0.85rem; }
.design-history-card__name { font-size: 0.85rem; font-weight: 600; color: var(--black); margin-bottom: 0.2rem; }
.design-history-card__price { font-size: 0.85rem; font-weight: 700; color: var(--black); margin: 0.3rem 0; }

/* ==========================================================================
   27. SCROLL REVEAL
   Applied via [data-reveal] + assets/js/main.js's IntersectionObserver.
   Opacity/transform only so it stays compositor-only (cheap). Respects
   prefers-reduced-motion (JS marks elements visible immediately instead of
   observing them, so this transition never even runs for those users).
   Optional stagger: style="transition-delay: 90ms" per element.
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   29. HOME - VALUE PROP GRID ("Why Caelyro")
   ========================================================================== */
.value-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
}
@media (min-width: 40em) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .value-grid { grid-template-columns: repeat(4, 1fr); } }

.value-card {
  padding: 2rem 1.5rem;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1.5px dashed var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--shadow-glass);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glass-hover);
  border-color: rgba(224, 183, 106, 0.3);
}
.value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--mh-pink-light);
  color: var(--mh-pink-dark);
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}
.value-card__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--black); margin-bottom: 0.5rem; }
.value-card__text { font-size: 0.88rem; line-height: 1.6; color: var(--charcoal-light); }

/* ==========================================================================
   30. HOME - CUSTOM DESIGN PROMOTION BANNER
   ========================================================================== */
.promo-banner {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 15% 20%, var(--mh-purple) 0%, var(--mh-purple-dark) 60%);
  color: var(--white);
  border-radius: var(--radius-lg);
}
.promo-banner .btn-gold { background: var(--white); border-color: var(--white); color: var(--mh-purple-dark); }
.promo-banner .btn-gold:hover { background: var(--mh-pink); border-color: var(--mh-pink); color: var(--white); }
.promo-banner .text-gold { color: var(--mh-green-bright) !important; }
.promo-banner__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 2.5rem;
  padding: 3rem 1.75rem;
}
@media (min-width: 64em) {
  .promo-banner__grid { grid-template-columns: 1.1fr 0.9fr; padding: 4rem 4rem; }
}
.promo-banner__visual {
  position: relative;
  aspect-ratio: 5 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-lg);
  order: -1;
}
@media (min-width: 64em) { .promo-banner__visual { order: 2; } }
.promo-banner__visual i { color: var(--white); opacity: 0.9; }

/* Floating "how it works" chips over the visual, explaining the customization
   flow (upload -> choose -> preview -> order) without turning it into a
   step-by-step tutorial. Same light-card language as .hero__badge. */
.promo-chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  background: rgba(255, 255, 255, 0.96);
  color: var(--charcoal);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}
.promo-chip i { color: var(--mh-pink-dark); opacity: 1; font-size: 0.8rem; }
.promo-chip--1 { top: 8%; left: 4%; animation-delay: 0.15s; }
.promo-chip--2 { top: 12%; right: 4%; animation-delay: 0.35s; }
.promo-chip--3 { bottom: 14%; left: 6%; animation-delay: 0.55s; }
.promo-chip--4 { bottom: 10%; right: 6%; animation-delay: 0.75s; }
@media (max-width: 640px) {
  .promo-chip--2, .promo-chip--3 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-chip { animation: none; opacity: 1; }
}
.promo-banner__feature-list { margin: 1.75rem 0; display: flex; flex-direction: column; gap: 0.75rem; }
.promo-banner__feature-list li { display: flex; align-items: center; gap: 0.65rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); }
.promo-banner__feature-list i { color: var(--mh-green-bright); }

/* ==========================================================================
   30b. ADMIN-MANAGED CAMPAIGN BANNER (homepage_secondary / category_top)
   Single static block when there's one active banner; a Swiper carousel when
   there's more than one - see includes/banner-section.php.
   ========================================================================== */
.campaign-banner-section { margin: 2.5rem 0; }
.campaign-banner {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 21 / 9;
  background: var(--charcoal);
}
@media (max-width: 40em) { .campaign-banner { aspect-ratio: 4 / 5; } }
.campaign-banner__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow, 0.6s); }
.campaign-banner:hover .campaign-banner__image { transform: scale(1.03); }
.campaign-banner__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 2rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 55%);
}
.campaign-banner__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--white);
  max-width: 32rem;
}
@media (min-width: 40em) { .campaign-banner__title { font-size: 2rem; } }
.campaign-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}
.campaign-banner-swiper .swiper-pagination-bullet { background: var(--white); opacity: 0.7; }
.campaign-banner-swiper .swiper-pagination-bullet-active { background: var(--mh-pink); opacity: 1; }
.campaign-banner-swiper__nav {
  color: var(--mh-pink-dark);
  background: rgba(255, 255, 255, 0.85);
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
}
.campaign-banner-swiper__nav::after { font-size: 0.85rem; font-weight: 700; }

/* ==========================================================================
   31. HOME - DESIGN CATEGORIES (browse-by-style)
   ========================================================================== */
.style-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 40em) { .style-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64em) { .style-grid { grid-template-columns: repeat(5, 1fr); } }

.style-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  text-align: center;
  padding: 2rem 1rem;
  background: var(--offwhite);
  border-radius: var(--radius-md);
  color: var(--black);
  overflow: hidden;
  transition: background-color var(--transition-base), transform var(--transition-base);
}
.style-tile:hover { background: linear-gradient(155deg, var(--mh-purple-dark), var(--mh-pink-dark)); color: var(--white); transform: translateY(-4px); }
.style-tile:hover .style-tile__icon { color: var(--white); }
.style-tile__icon { font-size: 1.6rem; color: var(--mh-pink-dark); transition: color var(--transition-base); }
.style-tile__title { font-weight: 600; font-size: 0.9rem; text-transform: capitalize; }
.style-tile__count { font-size: 0.72rem; color: var(--charcoal-light); }
.style-tile:hover .style-tile__count { color: rgba(255, 255, 255, 0.6); }

/* Photo variant - editorial image card instead of the plain icon tile,
   used whenever get_design_type_summary() found a real product photo for
   that style. Falls back to the icon tile above when it didn't. */
.style-tile--photo {
  align-items: flex-start;
  justify-content: flex-end;
  aspect-ratio: 3 / 4;
  padding: 1.5rem;
  text-align: left;
  color: var(--white);
}
.style-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.style-tile--photo:hover .style-tile__img { transform: scale(1.08); }
.style-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0.05) 100%);
  transition: background var(--transition-base);
}
.style-tile--photo:hover .style-tile__overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.1) 100%);
}
.style-tile--photo:hover { background: transparent; transform: translateY(-4px); }
.style-tile__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  transition: transform var(--transition-base);
}
.style-tile--photo:hover .style-tile__body { transform: translateY(-1.5rem); }
.style-tile--photo .style-tile__title { color: var(--white); }
.style-tile--photo .style-tile__count { color: rgba(255, 255, 255, 0.7); }
.style-tile__arrow {
  position: absolute;
  z-index: 1;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--mh-pink);
  color: var(--white);
  font-size: 0.75rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.style-tile--photo .style-tile__arrow { display: flex; }
.style-tile--photo:hover .style-tile__arrow { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .style-tile__img, .style-tile__body, .style-tile__arrow { transition: none; }
}

/* ==========================================================================
   32. HOME - TESTIMONIALS
   ========================================================================== */
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 40em) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }

.testimonial-card {
  padding: 2rem;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1.5px dashed var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--shadow-glass);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.testimonial-card__stars { color: var(--mh-green-bright); font-size: 0.8rem; letter-spacing: 0.15em; }
.testimonial-card__quote { font-size: 0.95rem; line-height: 1.7; color: var(--charcoal); flex: 1; }
.testimonial-card__author { display: flex; align-items: center; gap: 0.75rem; }
.testimonial-card__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--mh-purple), var(--mh-pink));
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  flex-shrink: 0;
}
.testimonial-card__name { font-size: 0.85rem; font-weight: 600; color: var(--black); }
.testimonial-card__meta { font-size: 0.75rem; color: var(--charcoal-light); }

/* Swiper carousel variant (assets/js/main.js inits it whenever
   .testimonial-swiper is on the page) - same equal-height-slide technique
   Swiper's own docs recommend, so a short quote's card doesn't shrink to
   its own content height while its neighbor's tall quote sets the row
   height. */
.testimonial-swiper-wrap { padding-bottom: 2.75rem; }
.testimonial-swiper { padding-bottom: 2.5rem; }
.testimonial-swiper .swiper-wrapper { align-items: stretch; }
.testimonial-swiper .swiper-slide { height: auto; }
.testimonial-swiper .swiper-slide .testimonial-card { height: 100%; }
.testimonial-swiper .swiper-pagination-bullet { background: rgba(26, 27, 31, 0.25); opacity: 1; }
.testimonial-swiper .swiper-pagination-bullet-active { background: var(--gold); }
/* Swiper toggles this class (not the native `disabled` attribute) once
   there's nothing left in that direction - e.g. already at 3-up with only
   3 slides, so there's never anywhere to go. */
.testimonial-swiper__prev.swiper-button-disabled,
.testimonial-swiper__next.swiper-button-disabled { opacity: 0.3; cursor: not-allowed; }

/* ==========================================================================
   33. HOME - SOCIAL / GALLERY GRID (Instagram-style, real product photos)
   ========================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
@media (min-width: 40em) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }

.gallery-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  display: block;
}
.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.gallery-tile:hover img { transform: scale(1.08); }
.gallery-tile__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: var(--white);
  font-size: 1.35rem;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.gallery-tile:hover .gallery-tile__overlay { opacity: 1; }

/* ==========================================================================
   34. HOME - NEWSLETTER BANNER
   ========================================================================== */
.newsletter-banner {
  background: linear-gradient(115deg, var(--mh-purple-dark) 0%, var(--mh-pink) 100%);
  color: var(--white);
}
.newsletter-banner .btn-gold { background: var(--white); border-color: var(--white); color: var(--mh-purple-dark); }
.newsletter-banner .btn-gold:hover { background: var(--mh-green-bright); border-color: var(--mh-green-bright); color: var(--white); }
.newsletter-banner__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 26rem;
  margin: 0 auto;
}
@media (min-width: 40em) { .newsletter-banner__form { flex-direction: row; } }
.newsletter-banner__form input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 0.9rem 1.1rem;
  background: var(--white);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--black);
}
.newsletter-banner__form input[type="email"]:focus {
  outline: none;
  border-color: var(--black);
}

/* ==========================================================================
   35. HOME - VISUAL ACCENT POLISH
   Decorative touches layered onto the sections above. Scoped to their own
   classes (never the shared .heading-1 / .section-title used site-wide) so
   this stays a homepage-only upgrade.
   ========================================================================== */

/* Gold underline bar under a section heading - opt-in via .heading-accent
   alongside the existing .section-title / .heading-1 classes. */
.heading-accent { position: relative; padding-bottom: 0.85rem; }
.heading-accent::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3rem;
  height: 3px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--mh-pink), var(--mh-purple));
}
.section-heading--center .heading-accent::after { left: 50%; transform: translateX(-50%); }

/* Featured Collections tiles - pastel two-tone ground + glowing icon so the
   plain icon placeholder reads as intentional, not empty. */
.category-tile__media {
  background: linear-gradient(160deg, var(--mh-bg-tint) 0%, #F1D69A 100%);
}
.category-tile__media i { color: var(--mh-pink-dark); filter: drop-shadow(0 0 22px rgba(224, 183, 106, 0.35)); }

/* Why Caelyro value cards - gradient icon roundel + pink glow on hover. */
.value-card__icon {
  background: linear-gradient(155deg, var(--mh-pink-light) 0%, #F1D69A 100%);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.value-card:hover .value-card__icon {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 0 0 6px rgba(224, 183, 106, 0.12);
}

/* Design Categories style tiles - same pastel gradient language as category
   tiles, so the two "browse by X" grids read as a matched pair. */
.style-tile:not(.style-tile--photo) { background: linear-gradient(160deg, var(--mh-bg-tint) 0%, #F1D69A 100%); }
.style-tile:not(.style-tile--photo):hover { background: linear-gradient(155deg, var(--mh-purple-dark), var(--mh-pink-dark)); }

/* Testimonials - a large faded quote mark anchors each card. */
.testimonial-card { position: relative; overflow: hidden; }
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: -1.5rem;
  right: 0.75rem;
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: 1;
  color: rgba(224, 183, 106, 0.14);
  pointer-events: none;
}

/* Social gallery - pink ring on hover to tie back into the marketplace accent. */
.gallery-tile { transition: box-shadow var(--transition-base); }
.gallery-tile:hover { box-shadow: 0 0 0 3px var(--mh-pink); }

/* Custom Design promo banner visual - layered rotating ring + glow, echoing
   the hero's treatment for visual continuity between the two. */
.promo-banner__visual { position: relative; overflow: hidden; }
.promo-banner__visual::before {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.4);
  animation: hero-ring-spin 40s linear infinite;
}
.promo-banner__visual::after {
  content: '';
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 183, 106, 0.3) 0%, transparent 70%);
  filter: blur(6px);
}
.promo-banner__visual i { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .promo-banner__visual::before { animation: none; }
}

/* ==========================================================================
   36. HOME - HERO BANNER CAROUSEL
   Every active homepage_hero banner (admin/pages/banner-form.php) renders
   as one rich .hero-slide - background (color, default gradient when unset,
   or an uploaded image), eyebrow/heading/description/feature list/button,
   optional right-side showcase image, and a left/center/right text layout.
   Swiper only when 2+ slides are active (index.php); a single slide/the
   zero-banner fallback renders the same markup without swiper controls.
   ========================================================================== */
.hero-swiper { position: relative; }

.hero-slide {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 26rem;
  padding: 3rem 1.25rem;
  overflow: hidden;
  background: linear-gradient(115deg, var(--mh-purple-dark) 0%, var(--mh-pink-dark) 48%, var(--mh-pink) 100%);
  background-size: cover;
  background-position: center;
  color: var(--white);
}
@media (min-width: 40em) { .hero-slide { padding: 3rem 2.5rem; } }
@media (min-width: 64em) { .hero-slide { min-height: 30rem; padding: 3rem 4rem; } }

.hero-slide__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}
@media (min-width: 56em) { .hero-slide__inner { flex-direction: row; } }

.hero-slide__content { flex: 1; min-width: 0; max-width: 34rem; }
.hero-slide__eyebrow {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85); margin-bottom: 1rem;
}
.hero-slide__heading {
  font-family: var(--font-display); text-transform: uppercase; line-height: 1.08;
  font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem); margin-bottom: 1.25rem;
}
.hero-slide__description {
  font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.8);
  max-width: 30rem; margin-bottom: 2rem;
}
.hero-slide__actions { margin-bottom: 1.5rem; }
.hero-slide__features { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.hero-slide__feature { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: rgba(255, 255, 255, 0.85); }
.hero-slide__feature i { color: var(--gold-light); }

.hero-slide__media { flex-shrink: 0; width: 100%; max-width: 20rem; }
@media (min-width: 56em) { .hero-slide__media { width: 38%; } }
.hero-slide__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated);
}

/* Center: everything (including the media column) centers as one stack. */
.hero-slide--align-center .hero-slide__inner { text-align: center; }
.hero-slide--align-center .hero-slide__content { max-width: 40rem; }
.hero-slide--align-center .hero-slide__description { margin-left: auto; margin-right: auto; }
.hero-slide--align-center .hero-slide__actions { display: flex; justify-content: center; }
.hero-slide--align-center .hero-slide__features { justify-content: center; }

/* Right: mirror the default layout - media first, text right-aligned. */
.hero-slide--align-right .hero-slide__inner { flex-direction: column-reverse; text-align: right; }
@media (min-width: 56em) { .hero-slide--align-right .hero-slide__inner { flex-direction: row-reverse; } }
.hero-slide--align-right .hero-slide__content { margin-left: auto; }
.hero-slide--align-right .hero-slide__description { margin-left: auto; }
.hero-slide--align-right .hero-slide__actions { display: flex; justify-content: flex-end; }
.hero-slide--align-right .hero-slide__features { justify-content: flex-end; }

.hero-swiper .swiper-pagination-bullet { background: var(--white); opacity: 0.6; }
.hero-swiper .swiper-pagination-bullet-active { background: var(--gold); opacity: 1; }
.hero-swiper__nav {
  color: var(--black);
  background: rgba(255, 255, 255, 0.9);
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
}
.hero-swiper__nav::after { font-size: 0.9rem; font-weight: 700; }

/* ==========================================================================
   37. HOME - CATEGORY QUICK-PILL STRIP (circular, horizontal scroll)
   ========================================================================== */
.cat-pill-row {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  padding: 0.25rem 0.1rem 0.75rem;
  scrollbar-width: none;
}
.cat-pill-row::-webkit-scrollbar { display: none; }
.cat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  width: 5.5rem;
  text-align: center;
  color: var(--charcoal);
}
.cat-pill__circle {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 1.4rem;
  color: var(--white);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.cat-pill__circle img { width: 100%; height: 100%; object-fit: cover; }
.cat-pill:hover .cat-pill__circle { transform: translateY(-4px) scale(1.05); box-shadow: var(--shadow-elevated); }
.cat-pill__label { font-size: 0.75rem; font-weight: 600; line-height: 1.3; }

.cat-pill--c1 .cat-pill__circle { background: linear-gradient(155deg, var(--mh-pink), var(--mh-purple)); }
.cat-pill--c2 .cat-pill__circle { background: linear-gradient(155deg, var(--mh-orange), var(--mh-pink-dark)); }
.cat-pill--c3 .cat-pill__circle { background: linear-gradient(155deg, var(--mh-purple), var(--mh-purple-dark)); }
.cat-pill--c4 .cat-pill__circle { background: linear-gradient(155deg, var(--mh-green), #0d7a44); }
.cat-pill--c5 .cat-pill__circle { background: linear-gradient(155deg, var(--mh-purple), var(--mh-pink-dark)); }

/* ==========================================================================
   38. HOME - FLASH SALE (countdown + dense grid)
   ========================================================================== */
.flash-sale {
  background: linear-gradient(115deg, var(--mh-purple-dark) 0%, var(--mh-pink-dark) 100%);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.25rem 2.25rem;
  color: var(--white);
}
@media (min-width: 40em) { .flash-sale { padding: 2.25rem 2rem 2.5rem; } }
.flash-sale__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.flash-sale__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
}
@media (min-width: 40em) { .flash-sale__title { font-size: 1.9rem; } }
.flash-sale__title i { color: var(--white); }
.flash-sale__subtitle { font-size: 0.8rem; color: rgba(255, 255, 255, 0.75); margin-top: 0.25rem; }

.countdown {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.countdown__label { font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.8); margin-right: 0.25rem; }
.countdown__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.25);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
}
.countdown__sep { font-weight: 700; opacity: 0.7; }

/* Dense marketplace grid - wraps the shared .product-card component with a
   Meesho-style compact skin (rounder corners, hidden CTA row until hover,
   punchier badge colors). Only ever applied on the homepage; shop.php's
   grid keeps the default premium .product-card look untouched. */
.mh-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}
@media (min-width: 30em) { .mh-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 64em) { .mh-grid { grid-template-columns: repeat(5, 1fr); } }

.mh-grid .product-card {
  background: var(--glass-bg-strong);
  border-radius: var(--glass-radius);
  overflow: hidden;
}
.flash-sale .mh-grid .product-card { background: var(--glass-bg-strong); }
.mh-grid .product-card:hover { box-shadow: var(--shadow-glass-hover), 0 0 0 1px rgba(224, 183, 106, 0.3); }
.mh-grid .product-card__media { border-radius: var(--glass-radius) var(--glass-radius) 0 0; }
.mh-grid .product-card__body { padding: 0.75rem 0.6rem 0.85rem; }
.mh-grid .badge-gold, .product-row .badge-gold { background: linear-gradient(115deg, var(--mh-orange), var(--mh-pink)); color: var(--white); }
.mh-grid .badge-black, .product-row .badge-black { background: var(--mh-purple-dark); color: var(--white); }
.mh-grid .product-card__price-current--sale, .product-row .product-card__price-current--sale { color: var(--mh-pink-dark); }
.mh-grid .product-card__discount, .product-row .product-card__discount { color: var(--mh-green); font-weight: 700; }
.mh-grid .product-card__icon-btn:hover, .product-row .product-card__icon-btn:hover { background: var(--mh-pink-dark); color: var(--white); }
.mh-grid .product-card__swatch.is-selected, .product-row .product-card__swatch.is-selected { box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--mh-pink); }
.mh-grid .product-card__size:hover, .product-row .product-card__size:hover { border-color: var(--mh-pink); color: var(--mh-pink-dark); }
.mh-grid .product-card__cta-row .btn-gold, .product-row .product-card__cta-row .btn-gold { background: var(--mh-pink); border-color: var(--mh-pink); color: var(--white); }
.mh-grid .product-card__cta-row .btn-gold:hover, .product-row .product-card__cta-row .btn-gold:hover { background: var(--mh-pink-dark); border-color: var(--mh-pink-dark); }
.mh-grid .product-card__cta-row .btn-outline-dark, .product-row .product-card__cta-row .btn-outline-dark { border-color: var(--mh-purple-dark); color: var(--mh-purple-dark); }
.mh-grid .product-card__cta-row .btn-outline-dark:hover, .product-row .product-card__cta-row .btn-outline-dark:hover { background: var(--mh-purple-dark); border-color: var(--mh-purple-dark); color: var(--white); }
/* Buttons stay tucked away until the card is hovered/focused, so the grid
   reads as dense as Meesho's - but only where a mouse makes hover
   meaningful; touch devices keep them always visible. */
@media (hover: hover) {
  .mh-grid .product-card__cta-row { opacity: 0; transform: translateY(4px); transition: opacity var(--transition-base), transform var(--transition-base); }
  .mh-grid .product-card:hover .product-card__cta-row,
  .mh-grid .product-card:focus-within .product-card__cta-row { opacity: 1; transform: none; }
}

/* ==========================================================================
   39. HOME - SECTION LABEL (eyebrow + title pair for the new Meesho
   sections that don't reuse the shared .section-heading component)
   ========================================================================== */
.mh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mh-pink-dark);
}

/* ==========================================================================
   40. HOME - OFFERS (admin-managed coupons, includes/functions.php's
   get_active_coupons()) - ticket-style cards with a copyable code.
   ========================================================================== */
.offer-strip {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}
@media (min-width: 40em) { .offer-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .offer-strip { grid-template-columns: repeat(4, 1fr); } }

.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.25rem 1.1rem;
  background: linear-gradient(160deg, rgba(251, 243, 228, 0.55) 0%, rgba(241, 214, 154, 0.55) 100%);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1.5px dashed var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--shadow-glass);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.offer-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-glass-hover); }
.offer-card__discount {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--mh-pink-dark);
}
.offer-card__desc { font-size: 0.82rem; line-height: 1.5; color: var(--charcoal-light); flex: 1; }
.offer-card__min { font-size: 0.72rem; color: var(--charcoal-light); }
.offer-card__code-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(26, 27, 31, 0.15);
}
.offer-card__code {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  color: var(--black);
  background: var(--white);
  border: 1px dashed rgba(224, 183, 106, 0.4);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.offer-card__copy {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mh-pink);
  color: var(--white);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.offer-card__copy:hover { background: var(--mh-pink-dark); transform: scale(1.06); }
.offer-card__copy.is-copied { background: var(--mh-green); }
.offer-card__apply { width: 100%; margin-top: 0.85rem; }