/* ============================================================================
   WatchCash — static-site UI overrides.
   Loads AFTER the WordPress theme CSS (front-styles.min.css, animate.css) so
   these rules win the cascade. Conservative polish only: calm the WOW/animate.css
   reveals, finish interaction states, fix the city store-meta line.
   Everything here is reversible by deleting a rule / this file.
   ============================================================================ */

/* A1 — respect reduced-motion (accessibility + the calmest option for sensitive users) */
@media (prefers-reduced-motion: reduce) {
  .wow,
  .animate__animated {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* A2 — replace the long-travel slideInUp/fadeInUp "lurch" with a refined fade-rise */
.animate__animated.animate__slideInUp,
.animate__animated.animate__fadeInUp {
  animation-name: wcRise;
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes wcRise {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: none; }
}

/* A3 — calm the off-screen horizontal slide-ins */
.animate__animated.animate__slideInRight,
.animate__animated.animate__fadeInRight {
  animation-name: wcRiseRight;
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.animate__animated.animate__slideInLeft,
.animate__animated.animate__fadeInLeft {
  animation-name: wcRiseLeft;
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes wcRiseRight { from { opacity: 0; transform: translate3d(28px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes wcRiseLeft  { from { opacity: 0; transform: translate3d(-28px, 0, 0); } to { opacity: 1; transform: none; } }

/* A4 — compress the staggered reveal delays so late items don't lurch in after scroll */
.wow[data-wow-delay="0.3s"],
.wow[data-wow-delay="0.35s"],
.wow[data-wow-delay="0.4s"],
.wow[data-wow-delay="0.45s"],
.wow[data-wow-delay="0.5s"],
.wow[data-wow-delay="0.6s"] {
  animation-delay: 0.2s !important;
}

/* A5 — consistent button feedback (box-shadow/color, never scale → no layout shift) */
.btn {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.btn:hover { box-shadow: 0 6px 18px rgba(31, 50, 71, 0.14); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid #b8923f; outline-offset: 2px; }

/* A6 — product-card hover finish (clipped image zoom, no reflow) */
.shop__item { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.shop__item:hover { box-shadow: 0 10px 30px rgba(31, 50, 71, 0.12); }
.shop__item-image-wrapper { overflow: hidden; }
.shop__item-img img { transition: transform 0.4s ease; }
.shop__item:hover .shop__item-img img { transform: scale(1.04); }
.shop__item-button-favorite,
.shop__brand-btn,
.shop__item-button { cursor: pointer; }

/* A7 — clear active brand-filter pill */
.shop__brand-btn { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; cursor: pointer; }
.shop__brand-btn.is-active { background: #1f3247; color: #fff; border-color: #1f3247; }

/* A8 — city-page store meta line: clean wrapping flex row (paired with markup in [location].astro) */
.loc-store__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: center;
  align-items: center;
  max-width: 760px;
  margin: 0.5rem auto 2rem;
  padding: 0 1rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #1f3247;
  text-align: center;
}
.loc-store__meta a { color: #9c7a2e; font-weight: 600; text-decoration: none; white-space: nowrap; } /* darkened gold for ≥4.5:1 contrast on white */
.loc-store__meta a:hover { text-decoration: underline; }

/* A9 — gentle FAQ panel easing (no-op if the theme already eases it) */
.faq__answer,
.faq__item-answer { transition: max-height 0.3s ease; }

/* ============================================================================
   Brand editorial block — injected on brand hub + brand×city sell pages.
   ============================================================================ */
.wc-brand { padding: clamp(2.5rem, 6vw, 4.5rem) 0; color: #1f3247; }
.wc-brand .container { max-width: 1100px; margin-inline: auto; padding-inline: 20px; }
.wc-brand__title { font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.1; margin: 0 0 1rem; }
.wc-brand__lead { font-size: 1.08rem; line-height: 1.7; color: #3c4654; max-width: 820px; margin: 0 0 1.75rem; }
.wc-brand__models h3,
.wc-brand__faq-item h3,
.wc-brand__anchors h3 { font-size: 1.15rem; margin: 0 0 0.75rem; }
.wc-brand__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0 0 1.5rem; }
.wc-brand__chips li { background: #f3f1ec; border: 1px solid #e6e2d8; border-radius: 999px; padding: 0.4rem 0.95rem; font-size: 0.92rem; font-weight: 500; }
.wc-brand__drivers { line-height: 1.7; color: #3c4654; margin: 0 0 1.75rem; }
.wc-brand__anchors { margin: 0 0 2rem; }
.wc-brand__anchor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.wc-brand__anchor { display: flex; flex-direction: column; gap: 0.35rem; text-decoration: none; color: #1f3247; border: 1px solid #ececef; border-radius: 12px; padding: 0.9rem; transition: box-shadow 0.2s ease; }
.wc-brand__anchor:hover { box-shadow: 0 8px 22px rgba(31, 50, 71, 0.1); }
.wc-brand__anchor img { width: 100%; height: auto; object-fit: contain; aspect-ratio: 4 / 5; background: #f7f7f5; border-radius: 8px; }
.wc-brand__anchor-name { font-size: 0.85rem; line-height: 1.35; }
.wc-brand__anchor-price { font-weight: 700; color: #9c7a2e; }
.wc-brand__faq { display: grid; gap: 1.25rem; margin: 0.5rem 0 2rem; }
.wc-brand__faq-item p { line-height: 1.7; color: #3c4654; margin: 0.25rem 0 0; }
.wc-brand__cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.95rem 2rem; border-radius: 999px; font-weight: 600; text-decoration: none; background: linear-gradient(180deg, #e8c87a, #b8923f); color: #1f3247; }
.wc-brand__links { border-top: 1px solid #ececef; margin-top: 1.5rem; padding-top: 1.5rem; }
.wc-brand__links h3 { margin: 0 0 0.6rem; }
.wc-brand__links p { line-height: 1.9; color: #5c6672; margin: 0 0 0.6rem; }
.wc-brand__links a { color: #9c7a2e; text-decoration: none; }
.wc-brand__links a:hover { text-decoration: underline; }
.wc-city h3 { margin: 1.75rem 0 0.6rem; font-size: 1.2rem; }
.wc-city .wc-brand__drivers { margin-bottom: 1rem; }

/* Master /sell-my-watch/ directory (brand + location index) */
.wc-directory { padding: clamp(2.5rem, 6vw, 4.5rem) 0; background: #f4f4f6; color: #1f3247; }
.wc-directory .container { max-width: 1100px; margin-inline: auto; padding-inline: 20px; }
.wc-directory__title { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 1.25rem; }
.wc-directory__list { list-style: none; padding: 0; margin: 0 0 2.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem 1.5rem; }
.wc-directory__list:last-child { margin-bottom: 0; }
.wc-directory__list a { color: #1f3247; text-decoration: none; font-weight: 500; }
.wc-directory__list a:hover { color: #9c7a2e; text-decoration: underline; }

/* ============================================================================
   ──  LUXURY DESIGN ELEVATION  ───────────────────────────────────────────────
   Serif display headings (Playfair, loaded in BaseLayout) + Inter Tight body,
   refined palette, depth, premium components. Loads last → wins the cascade.
   ============================================================================ */

:root {
  --wc-navy: #1f3247;
  --wc-ink: #16202c;
  --wc-gold: #b8923f;
  --wc-gold-dark: #9a7a2c;   /* AA contrast on white */
  --wc-gold-light: #e8c87a;
  --wc-cream: #faf8f3;
  --wc-paper: #f5f3ec;
  --wc-line: #e9e5db;
  --wc-muted: #59636f;
  --wc-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --wc-shadow-sm: 0 2px 12px rgba(22, 32, 44, 0.06);
  --wc-shadow: 0 16px 44px rgba(22, 32, 44, 0.10);
  --wc-shadow-lg: 0 32px 72px rgba(22, 32, 44, 0.16);
  --wc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Typography: serif display headings, refined rhythm (body stays Inter) ── */
h1, h2, h3, h4,
[class*="__title"], [class*="-hero__title"], .footer__col-title {
  font-family: var(--wc-display);
  font-weight: 600;
  letter-spacing: -0.004em;
}
h1, [class*="-hero__title"], .hero__title {
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.08;
}
/* EB Garamond sits a touch smaller on the body — give display headings a hair more size */
.sell-my-watch-hero__title, .hero__title { font-size: clamp(2.4rem, 6vw, 4.25rem); }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }

/* Keep functional/UI text crisp sans-serif (don't serif buttons, nav, labels) */
.btn, .header__nav-link, .footer__nav-link, .footer__seo-title, .shop__brand-btn,
.lm-form__btn, .wc-brand__cta, .vg-cta, .lb-cta, .loc-btn, .header__button-contact,
.shop__item-price, .product__price-value, .wc-card__price, input, select, textarea, button {
  font-family: "Inter Tight", system-ui, -apple-system, sans-serif !important;
}

/* ── Global polish ── */
html { scroll-behavior: smooth; }
::selection { background: var(--wc-gold-light); color: var(--wc-navy); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--wc-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Premium buttons (pill, gold gradient, soft lift) ── */
.btn { border-radius: 999px; letter-spacing: 0.02em; transition: transform 0.25s var(--wc-ease), box-shadow 0.25s var(--wc-ease), background-color 0.25s var(--wc-ease), color 0.25s var(--wc-ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn_primary, .add_to_cart_button.btn, .wc-brand__cta, .vg-cta, .lb-cta, .lm-form__btn, .loc-btn.btn_primary {
  background-image: linear-gradient(135deg, var(--wc-gold-light) 0%, var(--wc-gold) 55%, var(--wc-gold-dark) 100%);
  color: var(--wc-navy);
  box-shadow: 0 8px 22px rgba(184, 146, 63, 0.30);
  border: 0;
}
.btn_primary:hover, .wc-brand__cta:hover, .vg-cta:hover, .lb-cta:hover, .lm-form__btn:hover {
  box-shadow: 0 14px 34px rgba(184, 146, 63, 0.42);
}
/* Navy "regular" button (e.g. Shop Watches alongside the gold Sell My Watch). */
.btn_navy { background: var(--wc-navy); color: #fff; border: 0; box-shadow: 0 8px 22px rgba(31, 50, 71, 0.28); }
.btn_navy:hover { background: #16202c; box-shadow: 0 14px 34px rgba(31, 50, 71, 0.4); }

/* ── Product grid + cards (the theme doesn't grid .shop__list — we do) ── */
/* Fixed 4-per-row on desktop (was auto-fill, which packed in 5+ on wide
   screens) — steps down at the same breakpoints used elsewhere on the site. */
.shop__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem 1.5rem;
  align-items: stretch;
}
@media (max-width: 1100px) { .shop__list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .shop__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .shop__list { grid-template-columns: 1fr; } }
.shop__item {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wc-line);
  border-radius: 18px;
  padding: 12px;
  background: #fff;
  box-shadow: var(--wc-shadow-sm);
  transition: transform 0.3s var(--wc-ease), box-shadow 0.3s var(--wc-ease);
}
.shop__item:hover { transform: translateY(-4px); box-shadow: var(--wc-shadow); }
.shop__item-image-wrapper { aspect-ratio: 3 / 4; height: auto; border-radius: 14px; overflow: hidden; }
.shop__item-img { display: block; width: 100%; height: 100%; }
.shop__item-img img { width: 100%; height: 100%; object-fit: contain; }
.shop__item-content { margin-top: auto; }
.shop__item-price, .product__price-value, .wc-brand__anchor-price, .vg-card__price { color: var(--wc-gold-dark); letter-spacing: 0.01em; }
.shop__brands--static { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: 2.25rem; }
.shop__count { text-align: center; color: var(--wc-muted); margin-top: 2.25rem; }

/* ── Brand filter pills ── */
.shop__brand-btn { border-radius: 999px; transition: background-color 0.2s var(--wc-ease), color 0.2s var(--wc-ease), border-color 0.2s var(--wc-ease); }

/* ── The lead form (the money element): refined fields ── */
.wpcf7-form input.input, .wpcf7-form select.input, .wpcf7-form textarea.textarea,
.sell__form input, .sell__form select, .sell__form textarea {
  border-radius: 12px !important;
  transition: border-color 0.2s var(--wc-ease), box-shadow 0.2s var(--wc-ease);
}
.wpcf7-form input.input:focus, .wpcf7-form select.input:focus, .wpcf7-form textarea.textarea:focus,
.sell__form input:focus, .sell__form select:focus, .sell__form textarea:focus {
  border-color: var(--wc-gold) !important;
  box-shadow: 0 0 0 3px rgba(184, 146, 63, 0.16) !important;
  outline: none;
}

/* ── Owned sections elevated to the system ── */
.wc-brand, .vg, .lb, .loc, .notfound, .wc-directory { font-feature-settings: "liga" 1, "kern" 1; }
.wc-brand__title, .vg-hero__title, .lb-hero__title, .loc-hero__title, .notfound__title { letter-spacing: -0.02em; }

/* The theme colours <h1> white (for its dark homepage hero). On our own
   light-background pages that makes titles invisible. Force owned-page headings
   to inherit their section's text colour (dark on light, light on dark heroes). */
:is(.guide, .guides-hub, .vg, .lb, .wc-brand, .wc-directory, .shop-hero, .notfound) :is(h1, h2, h3),
.shop-hero__title, .guides-hero__title, .guide-title {
  color: inherit;
}
.wc-brand__chips li { background: var(--wc-cream); border-color: var(--wc-line); }
.wc-brand__anchor, .vg-card { border-radius: 16px; box-shadow: var(--wc-shadow-sm); transition: transform 0.25s var(--wc-ease), box-shadow 0.25s var(--wc-ease); }
.wc-brand__anchor:hover, .vg-card:hover { transform: translateY(-3px); box-shadow: var(--wc-shadow); }
.wc-brand__links, .footer__seo { border-color: rgba(184, 146, 63, 0.18); }

/* Hero eyebrows / overlines in refined gold small-caps */
.vg-hero__eyebrow, .lb-hero__eyebrow, .loc-hero__eyebrow {
  color: var(--wc-gold-light);
}

/* Refined hero gradient on owned navy heroes (subtle depth, not flat) */
.vg-hero, .lb-hero, .loc-hero {
  background: radial-gradient(120% 140% at 50% -20%, #28415c 0%, var(--wc-navy) 55%, var(--wc-ink) 100%);
}

/* A10 — "Recent Watch Purchases" carousel (/sell-my-watch/): the theme's own
   Swiper config already caps this at slidesPerView:4 on desktop, but the theme
   CSS sets `.shop__slider{overflow:visible!important}`, which lets a sliver of
   a 5th watch peek in at the edge — reading as "5 per row". Clip it so exactly
   4 show, without touching Swiper's own slide-count/breakpoint logic. */
.shop.recent .shop__slider {
  overflow: hidden !important;
}