/*
Theme Name: Style of Shelby
Theme URI: https://styleofshelby.com
Author: Style of Shelby
Author URI: https://styleofshelby.com
Description: Creator storefront theme recreating the "Style of Shelby" React design pixel-for-pixel. Products, categories and prices are powered by WooCommerce and imported via the Kelko affiliate product importer plugin. Every visible label, popup and form is editable from WP Admin (Appearance → Theme Strings, Appearance → Customize, and the product/page edit screens).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: styleofshelby
Domain Path: /languages
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

No Google Fonts are imported here on purpose: the source React app only ever uses the
browser's native Tailwind default font stacks (font-sans / font-serif) and never loads a
webfont. Substituting a Google Font pairing would change the design, not just "polish" it.
*/

/* =========================================================
   0. DESIGN TOKENS
   Values below are the *resolved* Tailwind v4 default values used by the
   React source (no custom Tailwind theme/config exists in the project),
   extracted 1:1 from the utility classes used across every component.
   ========================================================= */
:root {
  /* Colors — Tailwind default palette, exact hex values used in the source */
  --c-white: #ffffff;
  --c-black: #000000;

  --c-slate-50: #f8fafc;
  --c-slate-100: #f1f5f9;
  --c-slate-200: #e2e8f0;
  --c-slate-300: #cbd5e1;
  --c-slate-400: #94a3b8;
  --c-slate-500: #64748b;
  --c-slate-600: #475569;
  --c-slate-700: #334155;
  --c-slate-800: #1e293b;
  --c-slate-900: #0f172a;
  --c-slate-950: #020617;

  --c-rose-50: #fff1f2;
  --c-rose-100: #ffe4e6;
  --c-rose-200: #fecdd3;
  --c-rose-300: #fda4af;
  --c-rose-400: #fb7185;
  --c-rose-500: #f43f5e;
  --c-rose-600: #e11d48;
  --c-rose-700: #be123c;
  --c-rose-800: #9f1239;
  --c-rose-900: #881337;

  --c-amber-50: #fffbeb;
  --c-amber-100: #fef3c7;
  --c-amber-200: #fde68a;
  --c-amber-300: #fcd34d;
  --c-amber-400: #fbbf24;
  --c-amber-600: #d97706;
  --c-amber-800: #92400e;

  --c-emerald-100: #d1fae5;
  --c-emerald-300: #6ee7b7;
  --c-emerald-400: #34d399;
  --c-emerald-600: #059669;
  --c-emerald-800: #065f46;

  --c-sky-500: #0ea5e9;
  --c-purple-600: #9333ea;
  --c-purple-900: #581c87;
  --c-pink-50: #fdf2f8;
  --c-pink-900: #831843;
  --c-red-500: #ef4444;

  --c-stone-100: #f5f5f4;
  --c-stone-200: #e7e5e4;
  --c-stone-400: #a8a29e;
  --c-stone-700: #44403c;
  --c-stone-800: #292524;
  --c-stone-900: #1c1917;

  /* Fonts — exact source stacks, no substitutions */
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

  /* Radii */
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows (Tailwind v4 shadow-xs/2xs, shadow-md, shadow-lg, shadow-xl, shadow-2xl) */
  --shadow-2xs: 0 1px 0 rgb(0 0 0 / 0.04);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  --container-5xl: 64rem; /* max-w-5xl */
  --container-3xl: 48rem; /* max-w-3xl */
  --container-2xl: 42rem; /* max-w-2xl */
  --container-lg: 32rem;  /* max-w-lg */
  --container-md: 28rem;  /* max-w-md */
}

/* =========================================================
   1. RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  background: rgb(248 250 252 / 0.6); /* bg-slate-50/60 */
  color: var(--c-slate-900);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* No bottom padding here: in the source this sits on the root div with the
     footer as its last child, so it just pads under the footer — on a real
     site that reads as a dead gap, so the footer sits flush at page end. */
}

img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; }

::selection { background: var(--c-rose-500); color: var(--c-white); }

.site-wrapper { overflow-x: hidden; min-height: 100vh; }
#page-content { overflow-x: hidden; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* =========================================================
   2. LAYOUT / CONTAINERS
   ========================================================= */
.container-5xl {
  width: 100%;
  max-width: var(--container-5xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .container-5xl { padding-left: 1.5rem; padding-right: 1.5rem; }
}

.site-main { position: relative; }

/* =========================================================
   3. HEADER / PROFILE
   ========================================================= */
.iv-header {
  position: relative;
  width: 100%;
  max-width: var(--container-5xl);
  margin: 0 auto;
  padding-top: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) { .iv-header { padding-left: 1.5rem; padding-right: 1.5rem; } }

.iv-header__banner {
  position: relative;
  height: 11rem;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
@media (min-width: 640px) { .iv-header__banner { height: 14rem; } }
@media (min-width: 768px) { .iv-header__banner { height: 16rem; } }

.iv-header__banner img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .7s ease;
}
.iv-header__banner:hover img { transform: scale(1.05); }

.iv-header__banner-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / .6), rgb(0 0 0 / .2), transparent);
}

.iv-header__controls {
  position: absolute; top: 1rem; right: 1rem;
  display: flex; align-items: center; gap: 0.5rem;
}

.iv-wishlist-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.375rem;
  background: rgb(255 255 255 / .9);
  backdrop-filter: blur(6px);
  color: var(--c-slate-800);
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  border: 0;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}
.iv-wishlist-btn:hover { background: var(--c-white); }
.iv-wishlist-btn svg { width: 1rem; height: 1rem; color: var(--c-slate-600); }
.iv-wishlist-btn.has-items svg { color: var(--c-rose-500); fill: var(--c-rose-500); }
.iv-wishlist-btn__label { display: none; }
@media (min-width: 640px) { .iv-wishlist-btn__label { display: inline; } }
.iv-wishlist-btn__count {
  background: var(--c-rose-500);
  color: var(--c-white);
  border-radius: var(--radius-full);
  font-size: 10px; font-weight: 700;
  width: 1rem; height: 1rem;
  display: flex; align-items: center; justify-content: center;
}

.iv-profile {
  position: relative;
  margin-top: -4rem;
  padding: 0 1rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
@media (min-width: 640px) { .iv-profile { margin-top: -5rem; padding: 0 2rem; } }

.iv-profile__avatar-wrap { position: relative; margin-bottom: 0.75rem; cursor: pointer; }
.iv-profile__avatar {
  width: 7rem; height: 7rem;
  border-radius: var(--radius-full);
  border: 4px solid var(--c-white);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  background: var(--c-slate-100);
  outline: 2px solid var(--c-rose-200);
  outline-offset: 0;
  transition: transform .2s ease;
}
.iv-profile__avatar-wrap:hover .iv-profile__avatar { transform: scale(1.05); }
@media (min-width: 640px) { .iv-profile__avatar { width: 9rem; height: 9rem; } }
.iv-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }

.iv-profile__verified {
  position: absolute; bottom: 0.25rem; right: 0.25rem;
  background: var(--c-white);
  border-radius: var(--radius-full);
  padding: 0.125rem;
  box-shadow: var(--shadow-md);
  display: flex;
}
.iv-profile__verified svg { width: 1.5rem; height: 1.5rem; color: var(--c-sky-500); fill: var(--c-sky-500); }

.iv-profile__name {
  font-size: 1.5rem; line-height: 2rem;
  font-weight: 800;
  color: var(--c-slate-900);
  letter-spacing: -0.025em;
  margin: 0 0 0.25rem;
  cursor: pointer;
}
@media (min-width: 640px) { .iv-profile__name { font-size: 1.875rem; line-height: 2.25rem; } }

.iv-profile__handle {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-rose-600);
  margin: 0 0 0.5rem;
}
@media (min-width: 640px) { .iv-profile__handle { font-size: 0.875rem; } }

.iv-profile__bio {
  max-width: 36rem;
  font-size: 0.75rem;
  color: var(--c-slate-600);
  line-height: 1.625;
  font-weight: 400;
  margin: 0 0 0.75rem;
}
@media (min-width: 640px) { .iv-profile__bio { font-size: 0.875rem; } }

.iv-profile__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--c-slate-500);
  font-weight: 500;
  margin-bottom: 1rem;
}
.iv-profile__meta-item {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: var(--c-slate-100);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
}
.iv-profile__meta-item svg { width: 0.875rem; height: 0.875rem; color: var(--c-slate-400); }
a.iv-profile__meta-item { transition: background-color .15s ease; color: var(--c-slate-600); }
a.iv-profile__meta-item:hover { background: var(--c-slate-200); }

.iv-social-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.iv-social-badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: var(--shadow-2xs);
  border: 1px solid var(--c-slate-200);
  background: var(--c-white);
  color: var(--c-slate-700);
  transition: background-color .15s ease;
}
.iv-social-badge:hover { background: var(--c-slate-50); }
.iv-social-badge svg { width: 0.875rem; height: 0.875rem; color: var(--c-rose-500); }
/* The "Website" badge uses ExternalLink in purple-600 in the source (its data
   platform is "podcast", not a rose-tinted brand icon like TikTok/IG/FB). */
.iv-social-badge--website svg { color: var(--c-purple-600); }
.iv-social-badge.is-highlight {
  background: var(--c-rose-50);
  color: var(--c-rose-700);
  border-color: var(--c-rose-200);
  box-shadow: 0 0 0 2px rgb(255 228 230 / .5);
}
.iv-social-badge.is-highlight:hover { background: var(--c-rose-100); }
.iv-social-badge.is-disabled { cursor: default; opacity: .55; }

/* =========================================================
   4. CATEGORY NAV
   ========================================================= */
.iv-catnav {
  width: 100%;
  max-width: var(--container-5xl);
  margin: 1rem auto;
  padding: 0 1rem;
}
@media (min-width: 640px) { .iv-catnav { padding: 0 1.5rem; } }

.iv-catnav__row {
  display: flex; align-items: center; gap: 0.5rem;
  overflow-x: auto;
  padding: 0.5rem 0.25rem;
  scrollbar-width: none;
}
.iv-catnav__row::-webkit-scrollbar { display: none; }

.iv-catnav__btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-2xl);
  font-size: 0.75rem;
  white-space: nowrap;
  border: 1px solid var(--c-slate-200);
  background: var(--c-white);
  color: var(--c-slate-600);
  flex-shrink: 0;
  cursor: pointer;
  transition: all .15s ease;
}
@media (min-width: 640px) { .iv-catnav__btn { font-size: 0.875rem; } }
.iv-catnav__btn:hover { background: var(--c-slate-50); }
.iv-catnav__btn svg { width: 1rem; height: 1rem; }
.iv-catnav__btn.is-active {
  background: var(--c-slate-900);
  color: var(--c-white);
  border-color: var(--c-slate-900);
  box-shadow: var(--shadow-md);
  font-weight: 700;
  transform: scale(1.02);
}
.iv-catnav__btn.is-active svg { color: var(--c-amber-300); }
.iv-catnav__count {
  font-size: 10px; font-weight: 700;
  padding: 0.05rem 0.375rem;
  border-radius: var(--radius-full);
  background: var(--c-slate-100);
  color: var(--c-slate-500);
}
.iv-catnav__btn.is-active .iv-catnav__count { background: rgb(255 255 255 / .2); color: var(--c-white); }

/* Mobile-only horizontal scroll-progress line under the pills row (hidden on
   desktop, and hidden by JS via .is-hidden whenever nothing needs scrolling). */
.iv-catnav__scrollbar {
  height: 3px;
  margin: 0 0.25rem 0.25rem;
  border-radius: var(--radius-full);
  background: var(--c-slate-100);
  overflow: hidden;
}
.iv-catnav__scrollbar.is-hidden { display: none; }
.iv-catnav__scrollbar-fill {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-full);
  background: var(--c-rose-400, var(--c-slate-900));
  transition: width .1s linear;
}
@media (min-width: 640px) { .iv-catnav__scrollbar { display: none; } }

/* =========================================================
   5. PRODUCT SECTION / GRID
   ========================================================= */
.iv-products {
  width: 100%;
  max-width: var(--container-5xl);
  margin: 1.5rem auto;
  padding: 0 1rem;
}
@media (min-width: 640px) { .iv-products { padding: 0 1.5rem; } }

.iv-products__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem;
}
.iv-products__title {
  font-size: 1.25rem; line-height: 1.75rem;
  font-weight: 800;
  color: var(--c-slate-900);
  text-transform: capitalize;
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0;
}
@media (min-width: 640px) { .iv-products__title { font-size: 1.5rem; line-height: 2rem; } }

.iv-products__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) { .iv-products__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .iv-products__grid { grid-template-columns: repeat(3, 1fr); } }

/* Empty state */
.iv-empty {
  background: var(--c-white);
  border-radius: var(--radius-3xl);
  padding: 3rem;
  text-align: center;
  border: 1px solid rgb(226 232 240 / .8);
  box-shadow: var(--shadow-xs);
  margin: 2rem 0;
}
.iv-empty__icon {
  width: 3rem; height: 3rem;
  background: var(--c-rose-50);
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 0.75rem;
  color: var(--c-rose-500);
  font-weight: 700; font-size: 1.125rem;
}
.iv-empty__title { font-size: 1rem; font-weight: 800; color: var(--c-slate-800); margin: 0 0 0.25rem; }
.iv-empty__desc { font-size: 0.75rem; color: var(--c-slate-500); max-width: 28rem; margin: 0 auto 1rem; }
.iv-empty__btn {
  background: var(--c-slate-900); color: var(--c-white);
  font-weight: 700; font-size: 0.75rem;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-xl);
  border: 0; cursor: pointer;
  transition: background-color .15s ease;
}
.iv-empty__btn:hover { background: var(--c-slate-800); }

/* Load more */
.iv-loadmore-wrap { display: flex; justify-content: center; margin-top: 2rem; }
.iv-loadmore-btn {
  background: var(--c-white);
  color: var(--c-slate-700);
  border: 1px solid var(--c-slate-200);
  font-weight: 700;
  font-size: 0.8125rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: all .15s ease;
}
.iv-loadmore-btn:hover { background: var(--c-slate-50); box-shadow: var(--shadow-sm); }
.iv-loadmore-btn[hidden] { display: none; }
.iv-loadmore-btn.is-loading { opacity: .7; cursor: default; }
.iv-loadmore-btn svg { width: 1rem; height: 1rem; }

/* =========================================================
   6. PRODUCT CARD (post-card)
   ========================================================= */
.post-card {
  overflow: hidden;
  padding: 0;
  border-radius: var(--radius-3xl);
  background: var(--c-white);
  border: 1px solid var(--c-slate-100);
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
  transition: box-shadow .3s ease;
}
.post-card:hover { box-shadow: var(--shadow-xl); }

.post-card__image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  background: var(--c-slate-50);
  cursor: pointer;
  margin: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--c-slate-100);
}
.post-card__image-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .5s ease;
}
.post-card__image-wrap:hover img { transform: scale(1.05); }

.post-card__wishlist {
  position: absolute; top: 0.75rem; right: 0.75rem;
  padding: 0.5rem;
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / .8);
  backdrop-filter: blur(6px);
  color: var(--c-slate-600);
  box-shadow: var(--shadow-md);
  border: 0; cursor: pointer;
  transition: all .15s ease;
  display: flex;
}
.post-card__wishlist:hover { background: var(--c-white); }
.post-card__wishlist svg { width: 1rem; height: 1rem; }
.post-card__wishlist.is-active { background: var(--c-rose-500); color: var(--c-white); }
.post-card__wishlist.is-active svg { fill: var(--c-white); }

.post-card__quickview-overlay {
  position: absolute; inset: 0;
  background: rgb(0 0 0 / .2);
  opacity: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .2s ease;
  pointer-events: none;
}
.post-card__image-wrap:hover .post-card__quickview-overlay { opacity: 1; }
.post-card__quickview-pill {
  background: rgb(255 255 255 / .9);
  backdrop-filter: blur(6px);
  color: var(--c-slate-900);
  font-weight: 700; font-size: 0.75rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  display: inline-flex; align-items: center; gap: 0.375rem;
  pointer-events: auto;
}
.post-card__quickview-pill svg { width: 0.875rem; height: 0.875rem; }

.post-card__body { padding: 1rem 1rem 1.25rem; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
@media (min-width: 640px) { .post-card__body { padding: 1.25rem 1.25rem 1.25rem; } }

.post-card__brand {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--c-rose-600);
  margin: 0 0 0.25rem;
  display: block;
}

.post-card__title {
  font-size: 0.875rem; font-weight: 700;
  color: var(--c-slate-900);
  margin: 0 0 0.5rem;
  cursor: pointer;
  height: 2.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.375;
}
.post-card__title a { color: inherit; }
.post-card__title:hover { color: var(--c-rose-600); }

.post-card__note {
  background: rgb(255 241 242 / .6);
  border: 1px solid var(--c-rose-100);
  border-radius: var(--radius-xl);
  padding: 0.625rem;
  margin-bottom: 0.75rem;
  font-size: 11px;
  color: var(--c-slate-700);
  line-height: 1.25;
  font-style: italic;
  position: relative;
  height: 4.75rem;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.post-card__note p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__note-shade {
  font-style: normal; font-weight: 700;
  color: var(--c-rose-700); font-size: 10px;
  display: flex; align-items: center; gap: 0.25rem;
  flex-shrink: 0;
}
.post-card__note-spacer { flex-shrink: 0; height: 0.5rem; }
.post-card__note--empty { height: 4.75rem; margin-bottom: 0.75rem; background: none; border: none; padding: 0; }

.post-card__footer { padding-top: 0.5rem; border-top: 1px solid rgb(241 245 249 / .6); margin-top: auto; }

.post-card__price-row { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem; }
.post-card__price { font-size: 1rem; font-weight: 800; color: var(--c-slate-900); }
@media (min-width: 640px) { .post-card__price { font-size: 1.125rem; } }
.post-card__price-original { font-size: 0.75rem; color: var(--c-slate-400); text-decoration: line-through; }

.post-card__actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.post-card__btn {
  width: 100%; border: 0; border-radius: var(--radius-xl);
  font-size: 0.75rem; font-weight: 600;
  padding: 0.625rem 0.75rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem;
  cursor: pointer;
  transition: background-color .15s ease;
}
.post-card__btn svg { width: 0.875rem; height: 0.875rem; }
.post-card__btn--details { background: var(--c-slate-100); color: var(--c-slate-700); }
.post-card__btn--details:hover { background: var(--c-slate-200); }
.post-card__btn--details svg { color: var(--c-slate-500); }
.post-card__btn--shop { background: var(--c-rose-600); color: var(--c-white); font-weight: 700; box-shadow: var(--shadow-xs); }
.post-card__btn--shop:hover { background: var(--c-rose-700); }

/* =========================================================
   7. SHOP TOAST
   ========================================================= */
.iv-toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 60;
  background: var(--c-slate-900); color: var(--c-white);
  border-radius: var(--radius-2xl);
  padding: 1rem;
  box-shadow: var(--shadow-2xl);
  border: 1px solid var(--c-slate-700);
  max-width: 24rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.iv-toast[hidden] { display: none; }
.iv-toast__icon { padding: 0.5rem; background: var(--c-rose-500); color: var(--c-white); border-radius: var(--radius-xl); display: flex; }
.iv-toast__icon svg { width: 1.25rem; height: 1.25rem; }
.iv-toast__body { min-width: 0; flex: 1; }
.iv-toast__title { font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; gap: 0.25rem; }
.iv-toast__title svg { width: 0.75rem; height: 0.75rem; color: var(--c-rose-400); }
.iv-toast__sub { font-size: 11px; color: var(--c-slate-300); margin-top: 0.125rem; }
.iv-toast__sub.is-code { color: var(--c-amber-300); font-weight: 700; display: flex; align-items: center; gap: 0.25rem; }
.iv-toast__sub.is-code svg { width: 0.75rem; height: 0.75rem; color: var(--c-emerald-400); }

/* =========================================================
   7b. COOKIE NOTICE
   ========================================================= */
.iv-cookie-notice {
  position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 60;
  background: var(--c-white); color: var(--c-slate-900);
  border-radius: var(--radius-2xl);
  padding: 1.25rem;
  box-shadow: var(--shadow-2xl);
  border: 1px solid var(--c-slate-200);
  max-width: 22rem;
  animation: iv-cookie-in .25s ease;
}
.iv-cookie-notice[hidden] { display: none; }
@keyframes iv-cookie-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 480px) {
  .iv-cookie-notice { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; max-width: none; }
}
.iv-cookie-notice__title { font-size: 0.9375rem; font-weight: 800; }
.iv-cookie-notice__desc { font-size: 0.8125rem; color: var(--c-slate-500); margin-top: 0.375rem; line-height: 1.5; }
.iv-cookie-notice__actions { display: flex; align-items: center; gap: 0.625rem; margin-top: 1rem; }
.iv-cookie-notice__btn {
  border: 0; border-radius: var(--radius-full);
  font-size: 0.8125rem; font-weight: 700;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.iv-cookie-notice__btn--dismiss {
  background: var(--c-white); color: var(--c-slate-600);
  border: 1px solid var(--c-slate-200);
}
.iv-cookie-notice__btn--dismiss:hover { background: var(--c-slate-50); }
.iv-cookie-notice__btn--accept {
  flex: 1;
  background: var(--c-rose-600); color: var(--c-white);
  box-shadow: var(--shadow-xs);
}
.iv-cookie-notice__btn--accept:hover { background: var(--c-rose-700); }

/* =========================================================
   8. MODAL BASE (Quick View / Work With Shelby)
   ========================================================= */
.iv-modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgb(15 23 42 / .6);
  backdrop-filter: blur(4px);
}
.iv-modal-overlay[hidden] { display: none; }

.iv-modal-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 10;
  background: rgb(255 255 255 / .9);
  color: var(--c-slate-700);
  padding: 0.5rem;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  border: 0; cursor: pointer;
  display: flex;
  transition: background-color .15s ease;
}
.iv-modal-close:hover { background: var(--c-white); }
.iv-modal-close svg { width: 1.25rem; height: 1.25rem; }

/* Quick View */
.iv-qv {
  position: relative; width: 100%; max-width: 42rem;
  background: var(--c-white);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
  border: 1px solid var(--c-slate-100);
  max-height: 90vh;
  display: flex; flex-direction: column;
}
@media (min-width: 768px) { .iv-qv { flex-direction: row; } }

.iv-qv__image {
  position: relative;
  background: var(--c-slate-50);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  aspect-ratio: 1 / 1;
}
@media (min-width: 768px) { .iv-qv__image { width: 50%; aspect-ratio: auto; } }
.iv-qv__image img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-2xl); box-shadow: var(--shadow-xs); }
.iv-qv__viral-badge {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--c-rose-600); color: var(--c-white);
  font-weight: 700; font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.iv-qv__viral-badge svg { width: 0.875rem; height: 0.875rem; fill: var(--c-white); }

.iv-qv__details { padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; }
@media (min-width: 768px) { .iv-qv__details { width: 50%; } }

.iv-qv__top-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem; }
.iv-qv__brand { font-size: 0.75rem; font-weight: 700; color: var(--c-rose-600); text-transform: uppercase; letter-spacing: 0.05em; }
.iv-qv__wishlist { padding: 0.5rem; border-radius: var(--radius-full); border: 1px solid var(--c-slate-200); background: var(--c-slate-50); color: var(--c-slate-400); cursor: pointer; display: flex; transition: all .15s ease; }
.iv-qv__wishlist:hover { color: var(--c-rose-500); }
.iv-qv__wishlist svg { width: 1rem; height: 1rem; }
.iv-qv__wishlist.is-active { background: var(--c-rose-50); color: var(--c-rose-600); border-color: var(--c-rose-200); }
.iv-qv__wishlist.is-active svg { fill: var(--c-rose-600); }
/* Keep clear of the modal's close (X) button, which sits top:1rem / right:1rem of the whole dialog and overlaps this corner on desktop's side-by-side layout. */
@media (min-width: 768px) { .iv-qv__wishlist { margin-right: 2.5rem; } }

.iv-qv__title { font-size: 1.125rem; font-weight: 800; color: var(--c-slate-900); line-height: 1.375; margin: 0 0 0.5rem; }
@media (min-width: 640px) { .iv-qv__title { font-size: 1.25rem; } }

.iv-qv__meta-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; font-size: 0.75rem; font-weight: 600; color: var(--c-slate-700); flex-wrap: wrap; }
.iv-qv__rating { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--c-amber-50); padding: 0.125rem 0.5rem; border-radius: var(--radius-md); border: 1px solid rgb(253 230 138 / .6); }
.iv-qv__rating svg { width: 0.875rem; height: 0.875rem; color: var(--c-amber-400); fill: var(--c-amber-400); }
.iv-qv__shade { background: var(--c-slate-100); padding: 0.125rem 0.5rem; border-radius: var(--radius-md); color: var(--c-slate-600); font-weight: 500; }

.iv-qv__price-row { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1rem; }
.iv-qv__price { font-size: 1.5rem; font-weight: 800; color: var(--c-slate-900); }
.iv-qv__save-badge { background: var(--c-emerald-100); color: var(--c-emerald-800); font-size: 0.75rem; font-weight: 800; padding: 0.125rem 0.5rem; border-radius: var(--radius-md); }

.iv-qv__note { background: linear-gradient(to bottom right, var(--c-rose-50), var(--c-pink-50)); border: 1px solid var(--c-rose-100); border-radius: var(--radius-2xl); padding: 0.875rem; margin-bottom: 1rem; }
.iv-qv__note-label { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 700; color: var(--c-rose-800); margin-bottom: 0.25rem; }
.iv-qv__note-label svg { width: 0.875rem; height: 0.875rem; color: var(--c-rose-500); }
.iv-qv__note-text { font-size: 0.75rem; color: var(--c-slate-700); line-height: 1.625; font-style: italic; margin: 0; }

.iv-qv__disclaimer { display: flex; align-items: center; gap: 0.375rem; font-size: 11px; color: var(--c-slate-500); margin-bottom: 0.75rem; }
.iv-qv__disclaimer svg { width: 1rem; height: 1rem; color: var(--c-emerald-600); flex-shrink: 0; }

.iv-qv__shop-btn {
  width: 100%; background: var(--c-rose-600); color: var(--c-white);
  font-weight: 800; font-size: 0.875rem;
  padding: 0.875rem 0; border: 0; border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  cursor: pointer;
  transition: background-color .15s ease;
}
.iv-qv__shop-btn:hover { background: var(--c-rose-700); }
.iv-qv__shop-btn svg { width: 1rem; height: 1rem; }

/* =========================================================
   9. WISHLIST DRAWER
   ========================================================= */
.iv-drawer-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; justify-content: flex-end;
  background: rgb(15 23 42 / .6);
  backdrop-filter: blur(4px);
}
.iv-drawer-overlay[hidden] { display: none; }

.iv-drawer {
  position: relative; width: 100%; max-width: 28rem;
  background: var(--c-white);
  height: 100%;
  box-shadow: var(--shadow-2xl);
  display: flex; flex-direction: column; justify-content: space-between;
  border-left: 1px solid var(--c-slate-100);
}
.iv-drawer__head { padding: 1.25rem; border-bottom: 1px solid var(--c-slate-100); display: flex; align-items: center; justify-content: space-between; }
.iv-drawer__head-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 800; color: var(--c-slate-900); }
@media (min-width: 640px) { .iv-drawer__head-title { font-size: 1.125rem; } }
.iv-drawer__head-title svg { width: 1.25rem; height: 1.25rem; color: var(--c-rose-500); fill: var(--c-rose-500); }
.iv-drawer__close { padding: 0.5rem; border-radius: var(--radius-full); border: 0; background: none; color: var(--c-slate-500); cursor: pointer; display: flex; transition: background-color .15s ease; }
.iv-drawer__close:hover { background: var(--c-slate-100); }
.iv-drawer__close svg { width: 1.25rem; height: 1.25rem; }

.iv-drawer__list { padding: 1.25rem; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; }

.iv-drawer__empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; color: var(--c-slate-400); }
.iv-drawer__empty svg { width: 3rem; height: 3rem; margin-bottom: 0.75rem; stroke-width: 1; color: var(--c-slate-300); }
.iv-drawer__empty-title { font-size: 0.875rem; font-weight: 700; color: var(--c-slate-700); margin: 0 0 0.25rem; }
.iv-drawer__empty-desc { font-size: 0.75rem; color: var(--c-slate-400); margin: 0; }

.iv-drawer-item { background: var(--c-slate-50); border-radius: var(--radius-2xl); padding: 0.75rem; border: 1px solid rgb(226 232 240 / .6); display: flex; align-items: center; gap: 0.75rem; position: relative; }
.iv-drawer-item img { width: 4rem; height: 4rem; object-fit: cover; border-radius: var(--radius-xl); flex-shrink: 0; }
.iv-drawer-item__body { min-width: 0; flex: 1; }
.iv-drawer-item__brand { font-size: 10px; font-weight: 700; color: var(--c-rose-600); text-transform: uppercase; }
.iv-drawer-item__title { font-size: 0.75rem; font-weight: 700; color: var(--c-slate-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.iv-drawer-item__price { font-size: 0.875rem; font-weight: 800; color: var(--c-slate-900); display: block; margin-top: 0.25rem; }
.iv-drawer-item__actions { display: flex; flex-direction: column; gap: 0.25rem; }
.iv-drawer-item__actions button { border: 0; cursor: pointer; border-radius: var(--radius-xl); padding: 0.5rem; display: flex; box-shadow: var(--shadow-2xs); }
.iv-drawer-item__actions button svg { width: 0.875rem; height: 0.875rem; }
.iv-drawer-item__shop { background: var(--c-rose-600); color: var(--c-white); }
.iv-drawer-item__shop:hover { background: var(--c-rose-700); }
.iv-drawer-item__remove { background: var(--c-white); color: var(--c-slate-400); border: 1px solid var(--c-slate-200) !important; }
.iv-drawer-item__remove:hover { background: var(--c-rose-50); color: var(--c-rose-600); }

.iv-drawer__footer { padding: 1.25rem; border-top: 1px solid var(--c-slate-100); background: var(--c-slate-50); display: flex; align-items: center; justify-content: space-between; font-size: 0.875rem; }
.iv-drawer__footer[hidden] { display: none; }
.iv-drawer__footer-label { font-weight: 600; color: var(--c-slate-600); }
.iv-drawer__footer-total { font-size: 1.125rem; font-weight: 800; color: var(--c-slate-900); }

/* =========================================================
   10. FOOTER
   ========================================================= */
.iv-footer {
  width: 100%;
  background: var(--c-slate-900);
  color: var(--c-white);
  margin-top: 4rem;
  padding-top: 3rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--c-slate-800);
}

.iv-newsletter {
  background: linear-gradient(to right, rgb(136 19 55 / .6), rgb(88 28 135 / .6), var(--c-slate-900));
  border: 1px solid rgb(244 63 94 / .2);
  border-radius: var(--radius-3xl);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 640px) { .iv-newsletter { padding: 2rem; } }
.iv-newsletter__inner { max-width: 28rem; margin: 0 auto; position: relative; z-index: 1; }
.iv-newsletter__eyebrow {
  background: rgb(244 63 94 / .2); color: var(--c-rose-300);
  border: 1px solid rgb(244 63 94 / .3);
  font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.25rem 0.75rem; border-radius: var(--radius-full);
  margin-bottom: 0.75rem; display: inline-block;
}
.iv-newsletter__title { font-size: 1.25rem; font-weight: 800; color: var(--c-white); margin: 0 0 0.5rem; }
@media (min-width: 640px) { .iv-newsletter__title { font-size: 1.5rem; } }
.iv-newsletter__desc { font-size: 0.75rem; color: var(--c-slate-300); margin: 0 0 1.25rem; line-height: 1.625; }

.iv-newsletter__form { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
@media (min-width: 640px) { .iv-newsletter__form { flex-direction: row; } }
.iv-newsletter__input {
  width: 100%; padding: 0.75rem 1rem;
  background: rgb(2 6 23 / .8);
  border: 1px solid var(--c-slate-700);
  border-radius: var(--radius-2xl);
  font-size: 0.75rem; color: var(--c-white);
}
.iv-newsletter__input::placeholder { color: var(--c-slate-400); }
.iv-newsletter__input:focus { outline: none; box-shadow: 0 0 0 2px var(--c-rose-400); }
.iv-newsletter__btn {
  width: 100%; flex-shrink: 0;
  background: var(--c-rose-600); color: var(--c-white);
  font-weight: 800; font-size: 0.75rem;
  padding: 0.75rem 1.5rem; border: 0; border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  cursor: pointer;
  transition: background-color .15s ease;
}
@media (min-width: 640px) { .iv-newsletter__btn { width: auto; } }
.iv-newsletter__btn:hover { background: var(--c-rose-500); }
.iv-newsletter__btn svg { width: 1rem; height: 1rem; }

.iv-footer__bottom {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 1rem;
  font-size: 0.75rem; color: var(--c-slate-400);
  padding-top: 1.5rem; border-top: 1px solid var(--c-slate-800);
}
@media (min-width: 768px) { .iv-footer__bottom { flex-direction: row; } }
.iv-footer__copyright { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }

.iv-footer__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; font-size: 0.75rem; color: var(--c-slate-300); }
@media (min-width: 640px) { .iv-footer__links { gap: 1rem; } }
.iv-footer__links button, .iv-footer__links a {
  background: none; border: 0; padding: 0; font: inherit;
  font-weight: 600; color: var(--c-slate-300); cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.375rem;
  transition: color .15s ease;
}
.iv-footer__links button:hover, .iv-footer__links a:hover { color: var(--c-rose-400); }
.iv-footer__links svg { width: 0.875rem; height: 0.875rem; }
/* Icon colors matching the source exactly: ShieldCheck/FileText = rose-400, Cookie/Sparkles = amber-400. */
.iv-footer__link--rose svg { color: var(--c-rose-400); }
.iv-footer__link--amber svg { color: var(--c-amber-400); }
/* Rendered via wp_nav_menu() (Appearance → Menus) — the "•" separators are
   pseudo-elements, not markup, since a flat menu Walker has no room for one. */
.iv-footer__links > a:not(:first-child)::before,
.iv-footer__links > button:not(:first-child)::before {
  content: "•";
  color: var(--c-slate-600);
  margin-right: 0.5rem;
}

/* =========================================================
   11. WORK WITH SHELBY MODAL
   ========================================================= */
.iv-wws {
  position: relative; width: 100%; max-width: var(--container-lg);
  background: var(--c-white);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
  border: 1px solid var(--c-stone-100);
  padding: 1.5rem;
}
@media (min-width: 640px) { .iv-wws { padding: 2rem; } }

.iv-wws__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid rgb(231 229 228 / .6); margin-bottom: 1.5rem; }
.iv-wws__head-title { display: flex; align-items: center; gap: 0.625rem; }
.iv-wws__head-title svg { width: 1.25rem; height: 1.25rem; color: rgb(217 119 6 / .8); }
.iv-wws__head-title h2 { font-family: var(--font-serif); font-size: 1.25rem; letter-spacing: -0.025em; color: var(--c-stone-900); font-weight: 600; margin: 0; }
@media (min-width: 640px) { .iv-wws__head-title h2 { font-size: 1.5rem; } }
.iv-wws__close { padding: 0.5rem; color: var(--c-stone-400); background: none; border: 0; border-radius: var(--radius-full); cursor: pointer; display: flex; transition: all .15s ease; }
.iv-wws__close:hover { color: var(--c-stone-700); background: var(--c-stone-100); }
.iv-wws__close svg { width: 1.25rem; height: 1.25rem; }

.iv-wws__form { display: flex; flex-direction: column; gap: 1rem; }
.iv-wws__row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .iv-wws__row { grid-template-columns: repeat(2, 1fr); } }
.iv-wws__field label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--c-stone-800); margin-bottom: 0.25rem; }
.iv-wws__field .req { color: var(--c-rose-500); }
.iv-wws__field input, .iv-wws__field textarea {
  width: 100%; background: #f8f6f2;
  border: 1px solid rgb(231 229 228 / .9);
  border-radius: var(--radius-2xl);
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem; color: var(--c-stone-800);
  font-family: inherit;
}
.iv-wws__field input::placeholder, .iv-wws__field textarea::placeholder { color: var(--c-stone-400); }
.iv-wws__field input:focus, .iv-wws__field textarea:focus { outline: none; box-shadow: 0 0 0 2px rgb(168 162 158 / .5); }
.iv-wws__field textarea { resize: none; }

.iv-wws__submit {
  width: 100%; background: #222222; color: var(--c-white);
  font-weight: 500; font-size: 0.8125rem;
  padding: 0.875rem 1.5rem; border: 0; border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  cursor: pointer; margin-top: 0.5rem;
  transition: background-color .15s ease;
}
.iv-wws__submit:hover { background: #000; }
.iv-wws__submit:active { transform: scale(0.99); }
.iv-wws__submit svg { width: 1rem; height: 1rem; color: rgb(255 255 255 / .9); }

.iv-wws__success { padding: 3rem 0; text-align: center; }
.iv-wws__success[hidden] { display: none; }
.iv-wws__success-icon { width: 3.5rem; height: 3.5rem; background: var(--c-emerald-100); color: var(--c-emerald-600); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; }
.iv-wws__success-icon svg { width: 2rem; height: 2rem; }
.iv-wws__success h3 { font-size: 1.25rem; font-weight: 700; color: var(--c-stone-900); margin: 0 0 0.5rem; }
.iv-wws__success p { font-size: 0.8125rem; color: var(--c-stone-600); max-width: 20rem; margin: 0 auto; }
.iv-wws__success p strong { font-weight: 600; color: var(--c-stone-800); }
.iv-wws__error-text { color: var(--c-rose-600); font-size: 0.75rem; font-weight: 600; margin: 0; }
.iv-wws__error-text[hidden] { display: none; }

/* =========================================================
   12. LEGAL PAGE
   ========================================================= */
.iv-legal {
  width: 100%; max-width: var(--container-5xl); margin: 0 auto;
  padding: 2rem 20px;
  color: var(--c-slate-800);
}
@media (min-width: 640px) { .iv-legal { padding-top: 3.5rem; padding-bottom: 3.5rem; } }

.iv-legal__main {
  background: var(--c-white);
  border-radius: var(--radius-2xl);
  padding: 1.5rem;
  border: 1px solid rgb(226 232 240 / .8);
  box-shadow: var(--shadow-2xs);
}
@media (min-width: 640px) { .iv-legal__main { padding: 2.5rem; } }

.iv-legal article { font-size: 0.875rem; line-height: 1.625; color: var(--c-slate-700); }
.iv-legal article > * + * { margin-top: 1.5rem; }
.iv-legal header { padding-bottom: 1rem; border-bottom: 1px solid var(--c-slate-100); }
.iv-legal h1 { font-size: 1.5rem; font-weight: 700; color: var(--c-slate-900); letter-spacing: -0.025em; margin: 0; }
.iv-legal h2 { font-size: 1rem; font-weight: 700; color: var(--c-slate-900); margin: 1.5rem 0 0.75rem; padding-top: 1rem; border-top: 1px solid var(--c-slate-100); }
.iv-legal h2:first-of-type { border-top: 0; padding-top: 0; }
.iv-legal h3 { font-weight: 600; color: var(--c-slate-800); margin: 0.75rem 0 0.5rem; }
.iv-legal p { margin: 0.5rem 0; }
.iv-legal ul { padding-left: 1.25rem; margin: 0.5rem 0; color: var(--c-slate-600); }
.iv-legal li { margin: 0.25rem 0; }

.iv-legal__back { margin-top: 2rem; text-align: center; }
.iv-legal__back a {
  font-size: 0.75rem; font-weight: 600; color: var(--c-slate-500);
  display: inline-flex; align-items: center; gap: 0.375rem;
  transition: color .15s ease;
}
.iv-legal__back a:hover { color: var(--c-slate-900); }
.iv-legal__back svg { width: 0.875rem; height: 0.875rem; }

/* =========================================================
   13. ARCHIVE (product_cat) / 404
   ========================================================= */
.iv-archive-head { width: 100%; max-width: var(--container-5xl); margin: 1.5rem auto 0; padding: 0 1rem; }
@media (min-width: 640px) { .iv-archive-head { padding: 0 1.5rem; } }
.iv-archive-head h1 { font-size: 1.5rem; font-weight: 800; color: var(--c-slate-900); margin: 0 0 0.25rem; text-transform: capitalize; }
.iv-archive-head__desc { font-size: 0.8125rem; color: var(--c-slate-500); max-width: 40rem; }

.iv-pagination { display: flex; align-items: center; justify-content: center; gap: 0.375rem; margin-top: 2.5rem; flex-wrap: wrap; }
.iv-pagination a, .iv-pagination span {
  min-width: 2.25rem; height: 2.25rem; padding: 0 0.625rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg); font-size: 0.8125rem; font-weight: 600;
  border: 1px solid var(--c-slate-200); color: var(--c-slate-600); background: var(--c-white);
}
.iv-pagination a:hover { background: var(--c-slate-50); }
.iv-pagination .current { background: var(--c-slate-900); color: var(--c-white); border-color: var(--c-slate-900); }

.iv-404 { width: 100%; max-width: var(--container-3xl); margin: 0 auto; padding: 5rem 1.5rem; text-align: center; }
.iv-404__code { font-size: 4rem; font-weight: 800; color: var(--c-rose-200); margin: 0; }
.iv-404__title { font-size: 1.25rem; font-weight: 800; color: var(--c-slate-900); margin: 0.5rem 0; }
.iv-404__desc { font-size: 0.875rem; color: var(--c-slate-500); margin-bottom: 1.5rem; }
.iv-404__btn { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--c-slate-900); color: var(--c-white); font-weight: 700; font-size: 0.8125rem; padding: 0.75rem 1.5rem; border-radius: var(--radius-xl); }
.iv-404__btn:hover { background: var(--c-slate-800); }

/* =========================================================
   14. CONTACT FORM 7 INTEGRATION
   Every form on the site (Newsletter, Work With Shelby) is a real CF7 form —
   these rules only make CF7's own generated markup match the design; the
   form fields themselves are 100% editable in WP Admin, not in this file.
   ========================================================= */

/* CF7 wraps each field in <span class="wpcf7-form-control-wrap">. Unwrapping it
   with display:contents means our existing selectors (.iv-wws__field input,
   the newsletter flex layout, etc.) apply exactly as if there were no wrapper —
   with zero form-specific CSS required beyond this one rule + the two below. */
.wpcf7-form-control-wrap { display: contents; }

.wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.25rem;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-rose-500);
}
#iv-newsletter-wrap .wpcf7-not-valid-tip { color: var(--c-rose-300); }

/* CF7's own status region stays screen-reader-accessible but visually hidden —
   our JS renders the themed success/empty states that match the source exactly. */
.wpcf7-response-output {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0 !important;
}
.wpcf7-spinner { display: none !important; }

.iv-newsletter__form-wrap .wpcf7-form,
.iv-newsletter__form { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
@media (min-width: 640px) {
  .iv-newsletter__form-wrap .wpcf7-form,
  .iv-newsletter__form { flex-direction: row; }
  /* Pin to the TOP of the row (not vertically centered) on desktop only — with
     align-items:center, the moment the email field grows taller to show CF7's
     "not-valid-tip" error underneath it, the whole row re-centers and the
     submit button visibly shifts down. flex-start keeps the button locked to
     the same spot whether or not an error message is showing below the input. */
  .iv-newsletter__form-wrap .wpcf7-form,
  .iv-newsletter__form { align-items: flex-start; }
}
/* Styled by element type (not by a class the CF7 admin might forget to add) so
   the dark themed input always matches the design, whatever markup CF7 emits. */
#iv-newsletter-wrap input[type="email"],
#iv-newsletter-wrap input[type="text"] {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgb(2 6 23 / .8);
  border: 1px solid var(--c-slate-700);
  border-radius: var(--radius-2xl);
  font-size: 0.75rem;
  color: var(--c-white);
}
#iv-newsletter-wrap input[type="email"]::placeholder,
#iv-newsletter-wrap input[type="text"]::placeholder { color: var(--c-slate-400); }
#iv-newsletter-wrap input[type="email"]:focus,
#iv-newsletter-wrap input[type="text"]:focus { outline: none; box-shadow: 0 0 0 2px var(--c-rose-400); }
/* The email field's wpcf7-form-control-wrap is deliberately NOT unwrapped here
   (unlike the blanket display:contents rule above) — on the desktop flex ROW
   layout that would leave the "not-valid-tip" error message as a flex sibling
   of the submit button, floating in the middle of the row instead of under
   the input. Giving the wrap real block layout and the same flex sizing as
   the input keeps that error message stacked directly below the email field. */
#iv-newsletter-wrap .wpcf7-form-control-wrap { display: block; width: 100%; }
@media (min-width: 640px) {
  #iv-newsletter-wrap .wpcf7-form-control-wrap { flex: 1 1 auto; min-width: 0; }
}
.iv-cf7-missing {
  font-size: 0.75rem;
  color: var(--c-rose-200);
  background: rgb(0 0 0 / .2);
  border: 1px dashed rgb(255 255 255 / .3);
  border-radius: var(--radius-xl);
  padding: 0.75rem 1rem;
  margin: 0;
}
.iv-wws__form-wrap .iv-cf7-missing { color: var(--c-rose-600); background: var(--c-rose-50); border-color: var(--c-rose-200); }

/* The Work With Shelby template (CHECKLIST.md) never wraps its rows in the
   ".iv-wws__form" div — CF7 puts them directly inside its own <form
   class="wpcf7-form">, so .iv-wws__form's flex+gap was never actually
   attached to the rendered markup and every row/field sat flush against the
   next with zero gap. Targeting CF7's own form element directly fixes this
   without needing to edit the already-created form in wp-admin. */
#iv-wws-form-wrap .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* =========================================================
   15. MISC / SR-ONLY / EYEBROW
   ========================================================= */
.page-eyebrow {
  display: inline-block;
  width: fit-content;
  background: var(--c-rose-50);
  color: var(--c-rose-700);
  border: 1px solid var(--c-rose-200);
  font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
}

[hidden] { display: none !important; }