/* ═══════════════════════════════════════════════════════════════════
   PREMIUM HEADER SEARCH — full-screen modal redesign
   The overlay open/close mechanism (body.show-search toggling
   .main-search visibility) is the theme's own, still-functional
   PageHeader behaviour — untouched, same as before. Everything below
   is presentation only: no change to the JS fetch/state contract, the
   AJAX endpoint, or any PHP.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --sp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sp-radius: 14px;
  --sp-radius-sm: 10px;
  --sp-border: #ECE8E0;
  --sp-ink: #14130F;
  --sp-muted: #83796B;
  --sp-bg-soft: #F7F5F1;
  --sp-bg-page: #FBFAF8;
  --sp-accent: var(--primary, #007B5F);
  --sp-accent-dark: #004C45;
  --sp-gold: #B08D57;
  --sp-danger: #B33323;
  --sp-ease: cubic-bezier(.4, 0, .2, 1);
  --sp-ease-out: cubic-bezier(.16, 1, .3, 1);
}

.main-search, .main-search * { font-family: var(--sp-font); box-sizing: border-box; }

/* ─── Backdrop ────────────────────────────────────────────────────── */
.search-backdrop {
  position: fixed; inset: 0; z-index: 299;
  background: rgba(14, 18, 16, .55);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--sp-ease), visibility .35s var(--sp-ease);
}
body.show-search .search-backdrop { opacity: 1; visibility: visible; }

/* ─── Modal shell: full-screen premium panel, centered ───────────── */
.main-search {
  transition: opacity .35s var(--sp-ease-out), visibility .35s var(--sp-ease-out) !important;
}

@media (min-width: 768px) {
  .main-search {
    top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
    width: 90vw !important; max-width: 1400px; height: 85vh !important; max-height: 85vh !important;
    transform: translate(-50%, -47%) scale(.98);
    border-radius: var(--sp-radius) !important;
    box-shadow: 0 32px 80px rgba(20, 19, 15, .28), 0 8px 24px rgba(20, 19, 15, .12);
    background: rgba(255, 255, 255, .97) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    overflow: hidden !important;
    transition: opacity .35s var(--sp-ease-out), visibility .35s var(--sp-ease-out), transform .4s var(--sp-ease-out) !important;
  }
  body.show-search .main-search { transform: translate(-50%, -50%) scale(1); }
  .main-search__container { display: flex; flex-direction: column; height: 100%; padding: 0 !important; }
  .search-premium__mobile-close { display: none; }
}

@media (max-width: 767.98px) {
  .main-search__container { display: flex; flex-direction: column; height: 100%; padding: 0 !important; background: #fff; }
  .main-search__close { display: none; }
}

/* ─── Sticky search header row ────────────────────────────────────── */
.search-premium__input-container {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 20px 28px !important;
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid var(--sp-border);
  flex: 0 0 auto;
}
@media (max-width: 767.98px) {
  .search-premium__input-container { padding: 14px 16px !important; padding-right: 56px !important; }
}

.search-premium__icon { display: flex; align-items: center; color: var(--sp-muted); flex: 0 0 auto; }
.search-premium__icon--search svg { width: 22px; height: 22px; }

.main-search__input {
  font-family: var(--sp-font) !important;
  font-size: 19px !important; font-weight: 500;
  padding: 8px 6px !important;
  letter-spacing: -.01em;
  color: var(--sp-ink);
}
.main-search__input::placeholder { color: #B3AB9C; font-weight: 400; }
@media (max-width: 767.98px) { .main-search__input { font-size: 16px !important; } }

.main-search__button { display: none !important; } /* redundant with the leading search icon in this layout */

.search-premium__icon-btn {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 auto; border: none; background: none; cursor: pointer;
  color: var(--sp-muted); border-radius: 50%; transition: background .18s var(--sp-ease), color .18s var(--sp-ease);
}
.search-premium__icon-btn:hover { background: var(--sp-bg-soft); color: var(--sp-ink); }
.search-premium__input-container.has-value .search-premium__clear { display: flex; }
.search-premium__mic { display: flex; }

.search-premium__loader {
  display: none; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid rgba(0, 123, 95, .2); border-top-color: var(--sp-accent);
  animation: sp-spin .7s linear infinite;
}
.search-premium__input-container.is-loading .search-premium__loader { display: block; }
.search-premium__input-container.is-loading .search-premium__mic,
.search-premium__input-container.is-loading .search-premium__clear { display: none; }
@keyframes sp-spin { to { transform: rotate(360deg); } }

.search-premium__mic.is-listening { color: var(--sp-danger); }
.search-premium__mic.is-listening svg { animation: sp-pulse 1s ease-in-out infinite; }
@keyframes sp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Large, obvious close button — top-right on desktop, sticky top-right on mobile */
.main-search__close {
  width: 44px; height: 44px; border-radius: 50%; background: var(--sp-bg-soft);
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 18px; right: 24px; z-index: 6;
  transition: background .18s var(--sp-ease), transform .18s var(--sp-ease);
}
.main-search__close:hover { background: #EFEBE3; transform: rotate(90deg); }

/* ─── Scrollable body ─────────────────────────────────────────────── */
.search-premium__dropdown {
  flex: 1 1 auto; overflow-y: auto; background: var(--sp-bg-page);
  opacity: 0; transition: opacity .25s var(--sp-ease);
}
.search-premium__dropdown.is-visible { opacity: 1; }
.search-premium__dropdown::-webkit-scrollbar { width: 8px; }
.search-premium__dropdown::-webkit-scrollbar-thumb { background: var(--sp-border); border-radius: 4px; }

.search-premium__layout {
  display: grid; grid-template-columns: 70% 30%; align-items: start; min-height: 100%;
}
.search-premium__col--main { padding: 28px 32px; border-right: 1px solid var(--sp-border); min-width: 0; }
.search-premium__col--side { padding: 28px 24px; background: #fff; min-height: 100%; }

@media (max-width: 1023.98px) {
  .search-premium__layout { grid-template-columns: 62% 38%; }
}
@media (max-width: 767.98px) {
  .search-premium__layout { display: block; }
  .search-premium__col--main { border-right: none; padding: 20px 16px; }
  .search-premium__col--side { padding: 4px 16px 24px; }
}

.search-premium__section + .search-premium__section { margin-top: 34px; }
.search-premium__section-title {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sp-ink); margin: 0 0 16px; display: flex; align-items: center; justify-content: space-between;
}
.search-premium__section-title small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--sp-muted); font-size: 11.5px; }

/* ─── Chip lists (trending / popular) ─────────────────────────────── */
.search-premium__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.search-premium__chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border: 1.5px solid var(--sp-border); border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--sp-ink); background: #fff; cursor: pointer;
  transition: border-color .18s var(--sp-ease), background .18s var(--sp-ease), transform .18s var(--sp-ease), box-shadow .18s var(--sp-ease);
}
.search-premium__chip:hover, .search-premium__chip.is-highlighted {
  border-color: var(--sp-accent); background: var(--sp-accent); color: #fff; transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 123, 95, .22);
}
.search-premium__chip svg { flex: 0 0 auto; opacity: .55; }
.search-premium__chip:hover svg, .search-premium__chip.is-highlighted svg { opacity: 1; }

/* ─── Category cards (icon-based — no photography available) ─────── */
.search-premium__categories { display: flex; flex-direction: column; gap: 4px; }
.search-premium__category {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: var(--sp-radius-sm);
  cursor: pointer; transition: background .18s var(--sp-ease), transform .18s var(--sp-ease);
}
.search-premium__category:hover, .search-premium__category.is-highlighted { background: var(--sp-bg-soft); transform: translateX(2px); }
.search-premium__category__icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--sp-bg-soft);
  display: flex; align-items: center; justify-content: center; color: var(--sp-accent-dark);
}
.search-premium__category:hover .search-premium__category__icon { background: var(--sp-accent); color: #fff; }
.search-premium__category__name { flex: 1 1 auto; font-size: 13.5px; font-weight: 600; color: var(--sp-ink); }
.search-premium__category__arrow { flex: 0 0 auto; color: var(--sp-muted); transition: transform .18s var(--sp-ease); }
.search-premium__category:hover .search-premium__category__arrow { transform: translateX(3px); color: var(--sp-ink); }

/* ─── Brand grid (monogram avatars — no logo asset in the API) ────── */
.search-premium__brands { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.search-premium__brand {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); background: #fff;
  transition: border-color .18s var(--sp-ease), box-shadow .18s var(--sp-ease), transform .18s var(--sp-ease);
}
.search-premium__brand:hover, .search-premium__brand.is-highlighted {
  border-color: var(--sp-ink); box-shadow: 0 8px 20px rgba(20, 19, 15, .08); transform: translateY(-2px);
}
.search-premium__brand__mono {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.search-premium__brand__name { font-size: 12.5px; font-weight: 600; color: var(--sp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Recent searches / plain list items ──────────────────────────── */
.search-premium__list { display: flex; flex-direction: column; gap: 2px; }
.search-premium__list-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: var(--sp-radius-sm); font-size: 13.5px; color: var(--sp-ink);
  cursor: pointer; transition: background .18s var(--sp-ease);
}
.search-premium__list-item:hover, .search-premium__list-item.is-highlighted { background: var(--sp-bg-soft); }
.search-premium__list-item .remove {
  opacity: 0; width: 22px; height: 22px; border: none; background: none; color: var(--sp-muted);
  display: flex; align-items: center; justify-content: center; border-radius: 50%; flex: 0 0 auto;
}
.search-premium__list-item:hover .remove { opacity: 1; }
.search-premium__list-item .remove:hover { background: rgba(0, 0, 0, .08); color: var(--sp-ink); }

.search-premium__clear-history {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--sp-muted); background: none; border: none; cursor: pointer; padding: 0; margin-top: 10px;
  transition: color .18s var(--sp-ease);
}
.search-premium__clear-history:hover { color: var(--sp-danger); }

/* ─── Offers banner (static, presentational only) ─────────────────── */
.search-premium__offer {
  border-radius: var(--sp-radius); overflow: hidden; position: relative;
  background: linear-gradient(135deg, var(--sp-ink) 0%, #2A2620 100%);
  color: #fff; padding: 20px; margin-top: 8px;
}
.search-premium__offer::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(176, 141, 87, .35), transparent 60%);
}
.search-premium__offer__eyebrow { position: relative; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-gold); margin: 0 0 6px; }
.search-premium__offer__title { position: relative; font-size: 18px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
.search-premium__offer__sub { position: relative; font-size: 12.5px; color: rgba(255, 255, 255, .7); margin: 0 0 14px; }
.search-premium__offer__cta {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sp-ink); background: #fff; padding: 9px 16px; border-radius: 999px; text-decoration: none;
  transition: transform .18s var(--sp-ease);
}
.search-premium__offer__cta:hover { transform: translateX(2px); }

/* ─── Product grid + cards ─────────────────────────────────────────── */
.search-premium__products {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 20px;
}
.search-premium__products--rail {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity;
}
.search-premium__products--rail .search-premium__product { flex: 0 0 132px; scroll-snap-align: start; }
.search-premium__products--rail .search-premium__product__image { padding-top: 133.33%; }

.search-premium__product {
  display: block; text-decoration: none; color: inherit; border-radius: var(--sp-radius-sm);
  transition: transform .3s var(--sp-ease-out);
  position: relative;
}
.search-premium__product:hover, .search-premium__product.is-highlighted { transform: translateY(-4px); }
.search-premium__product.is-highlighted .search-premium__product__image { box-shadow: 0 0 0 2px var(--sp-accent); }

.search-premium__product__image {
  /* This is a <span> (inline by default) — display:block is required for
     width/height/percentage-padding to resolve at all; without it the
     padding-top ratio below silently fails to apply (confirmed via
     computed-style inspection: it stayed as the literal string "133.33%"
     instead of resolving to a pixel value), collapsing the box to near-zero
     height and letting the next section visually overlap it. */
  display: block;
  position: relative; width: 100%; height: 0; padding-top: 133.33%; /* 4:3 → 3:4 portrait */
  border-radius: var(--sp-radius-sm); overflow: hidden;
  background: var(--sp-bg-soft); margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(20, 19, 15, .04);
  transition: box-shadow .3s var(--sp-ease);
}
.search-premium__product:hover .search-premium__product__image { box-shadow: 0 16px 32px rgba(20, 19, 15, .16); }
.search-premium__product__image img {
  /* Absolutely positioned to fill the padding-top-ratio box above, so the
     <img> never contributes to layout/height itself. */
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--sp-ease-out);
}
.search-premium__product:hover .search-premium__product__image img { transform: scale(1.08); }

.search-premium__product__body {
  /* Also a <span> — block so its child brand/name/price stack normally
     (and so the brand <div> inside it, technically block-in-inline
     otherwise, lays out as intended). */
  display: block;
}

.search-premium__badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  background: var(--sp-danger); color: #fff; padding: 4px 8px; border-radius: 999px;
}

.search-premium__wishlist {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; color: var(--sp-ink); cursor: pointer;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .2s var(--sp-ease), transform .2s var(--sp-ease), background .2s var(--sp-ease);
}
.search-premium__product:hover .search-premium__wishlist,
.search-premium__wishlist.is-active { opacity: 1; transform: translateY(0); }
.search-premium__wishlist:hover { background: #fff; }
.search-premium__wishlist.is-active svg { fill: var(--sp-danger); stroke: var(--sp-danger); }
.search-premium__wishlist svg { width: 15px; height: 15px; }

.search-premium__quickadd {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border: none; border-radius: 8px;
  background: rgba(20, 19, 15, .92); color: #fff; backdrop-filter: blur(4px);
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px); cursor: pointer;
  transition: opacity .22s var(--sp-ease), transform .22s var(--sp-ease), background .18s var(--sp-ease);
}
.search-premium__product:hover .search-premium__quickadd { opacity: 1; transform: translateY(0); }
.search-premium__quickadd:hover { background: var(--sp-accent); }
.search-premium__quickadd.is-done { background: var(--sp-accent); }
.search-premium__quickadd:disabled { opacity: .6; cursor: default; }

.search-premium__product__brand { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-muted); margin-bottom: 3px; }
.search-premium__product__name {
  font-size: 13px; font-weight: 500; color: var(--sp-ink); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  min-height: 2.8em;
}
.search-premium__product__name mark { background: rgba(176, 141, 87, .28); color: inherit; border-radius: 2px; padding: 0 1px; }
.search-premium__product__price { margin-top: 6px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.search-premium__product__price .current { font-size: 14px; font-weight: 700; color: var(--sp-ink); }
.search-premium__product__price .was { font-size: 12px; color: var(--sp-muted); text-decoration: line-through; }
.search-premium__product__price .off { font-size: 11px; font-weight: 700; color: var(--sp-accent-dark); }
.search-premium__product__oos {
  display: inline-block; margin-top: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--sp-danger);
}

/* Compact row variant, used for Recently Viewed in the side rail */
.search-premium__products--compact { grid-template-columns: 1fr; gap: 4px; }
.search-premium__products--compact .search-premium__product {
  display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--sp-radius-sm);
  transition: background .18s var(--sp-ease);
}
.search-premium__products--compact .search-premium__product:hover { background: var(--sp-bg-soft); transform: none; }
.search-premium__products--compact .search-premium__product__image { width: 56px; height: 68px; padding-top: 0; flex: 0 0 auto; margin-bottom: 0; }
.search-premium__products--compact .search-premium__product__body { min-width: 0; flex: 1 1 auto; }
.search-premium__products--compact .search-premium__product__name { min-height: 0; -webkit-line-clamp: 1; }
.search-premium__products--compact .search-premium__wishlist,
.search-premium__products--compact .search-premium__quickadd { display: none; }

.search-premium__view-all {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 28px; padding: 15px; border-radius: 999px;
  border: 1.5px solid var(--sp-ink); color: var(--sp-ink); font-size: 12px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  transition: background .22s var(--sp-ease), color .22s var(--sp-ease);
}
.search-premium__view-all:hover { background: var(--sp-ink); color: #fff; }

/* ─── Skeleton loading ────────────────────────────────────────────── */
.search-premium__skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 20px; }
.search-premium__skeleton-card { display: flex; flex-direction: column; gap: 10px; }
.search-premium__skeleton-img, .search-premium__skeleton-line {
  border-radius: var(--sp-radius-sm);
  background: linear-gradient(90deg, #EFEDE8 25%, #F7F6F3 37%, #EFEDE8 63%);
  background-size: 400% 100%; animation: sp-shimmer 1.4s ease infinite;
}
.search-premium__skeleton-img { aspect-ratio: 3 / 4; }
.search-premium__skeleton-line { height: 11px; }
.search-premium__skeleton-line--title { width: 90%; }
.search-premium__skeleton-line--price { width: 50%; }
@keyframes sp-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ─── Empty state ─────────────────────────────────────────────────── */
.search-premium__empty { text-align: center; padding: 56px 16px 40px; }
.search-premium__empty__icon {
  width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sp-bg-soft), #EFEBE3);
  display: flex; align-items: center; justify-content: center; color: var(--sp-muted);
}
.search-premium__empty__title { font-size: 20px; font-weight: 700; color: var(--sp-ink); margin: 0 0 6px; letter-spacing: -.01em; }
.search-premium__empty__sub { font-size: 13.5px; color: var(--sp-muted); margin: 0 0 8px; max-width: 380px; margin-inline: auto; }

/* ─── Ripple feedback for buttons ─────────────────────────────────── */
.search-premium__chip, .search-premium__quickadd, .search-premium__view-all, .search-premium__wishlist {
  position: relative; overflow: hidden;
}

/* ─── Fade-in for freshly rendered content ────────────────────────── */
.search-premium__dropdown.is-visible .search-premium__layout,
.search-premium__dropdown.is-visible > * {
  animation: sp-fade-in .3s var(--sp-ease-out);
}
@keyframes sp-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Focus states (accessibility) ────────────────────────────────── */
.search-premium__product:focus-visible,
.search-premium__chip:focus-visible,
.search-premium__category:focus-visible,
.search-premium__brand:focus-visible,
.search-premium__list-item:focus-visible,
.search-premium__quickadd:focus-visible,
.search-premium__wishlist:focus-visible,
.main-search__close:focus-visible {
  outline: 2px solid var(--sp-accent); outline-offset: 2px;
}

/* ─── Mobile refinements ───────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .search-premium__products { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .search-premium__brands { grid-template-columns: 1fr; }
  .search-premium__mobile-close {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    position: sticky; bottom: 0; z-index: 5; width: 100%;
    margin-top: 8px; padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom));
    border: none; background: var(--sp-ink); color: #fff; font-size: 12.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; flex: 0 0 auto;
  }
}

.search-premium__dropdown:empty { min-height: 0; }