/* ============================================================================
   site-v13-redesign.css
   Loaded LAST (after app.min.css, site-v9.css, site-v10.css) so every rule
   here wins the cascade without needing !important.

   Covers:
     1. "What do you need today?" compact search card (replaces the old
        Find Resources panel: heading, popular chips, stats row, big yellow
        search bar are all gone from the markup already).
     2. "Browse by Class" pastel pill grid (replaces the marquee strip).
     3. Product cards: bestseller / % off / wishlist as small corner icons.
     4. Cart page sticky-bar fix (see cart.php: added has-sticky-bar so the
        floating "Total Cart Value / Go to Cart" bar no longer renders on
        top of the page's own "Proceed to Checkout" bar).
   ========================================================================== */

:root {
  --v13-radius: 16px;
  --v13-shadow: 0 8px 24px rgba(0,0,0,.06);
  --v13-bg: #ffffff;
  --v13-page-bg: #f8fafc;
  --v13-blue: #2563eb;
  --v13-blue-dark: #1d4ed8;
  --v13-text: #0f172a;
  --v13-text-soft: #64748b;
  --v13-border: #e2e8f0;
}

/* ---------------------------------------------------------------------- *
 * 1. Search card - "What do you need today?"
 * ---------------------------------------------------------------------- */
.find-notes-v13 { padding: 18px 0; background: var(--v13-page-bg); }
.find-card-v13 {
  max-width: 900px; margin: 0 auto;
  background: var(--v13-bg);
  border-radius: var(--v13-radius);
  box-shadow: var(--v13-shadow);
  border: 1px solid var(--v13-border);
  padding: 20px 22px 22px;
}
.find-card-v13-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.find-card-v13-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px;
  background: #eff6ff; color: var(--v13-blue);
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.find-card-v13-head h2 { margin: 0 0 3px; font-size: 1.08rem; font-weight: 800; color: var(--v13-text); line-height: 1.3; }
.find-card-v13-head p { margin: 0; font-size: 0.84rem; color: var(--v13-text-soft); }

.find-form-v13 { display: flex; flex-direction: column; gap: 12px; }
.find-v13-filters {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.find-select-v13 select {
  width: 100%; height: 44px; padding: 0 14px;
  border-radius: 12px; border: 1px solid var(--v13-border);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E") no-repeat right 14px center;
  appearance: none; -webkit-appearance: none;
  font-size: 0.86rem; color: var(--v13-text); font-family: inherit;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.find-select-v13 select:hover { border-color: #cbd5e1; }
.find-select-v13 select:focus { outline: none; border-color: var(--v13-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

.btn-search-v13 {
  width: 100%; height: 44px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, var(--v13-blue), var(--v13-blue-dark));
  color: #fff; font-weight: 700; font-size: 0.92rem;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 6px 16px rgba(37,99,235,.28);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-search-v13:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(37,99,235,.34); filter: brightness(1.04); }
.btn-search-v13:active { transform: translateY(0); }

@media (max-width: 700px) {
  .find-v13-filters { grid-template-columns: repeat(2, 1fr); }
  .find-card-v13 { padding: 16px 16px 18px; }
}
@media (max-width: 420px) {
  .find-card-v13-head h2 { font-size: 1rem; }
}

/* ---------------------------------------------------------------------- *
 * 2. Browse by Class - pastel pill grid (replaces the marquee)
 * ---------------------------------------------------------------------- */
.browse-class-v13 { padding: 6px 0 22px; }
.browse-class-v13-head { margin-bottom: 12px; }
.browse-class-v13-head h2 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; color: var(--v13-text); margin: 0; }
.browse-class-v13-head a { font-size: 0.85rem; font-weight: 700; color: var(--v13-blue); display: inline-flex; align-items: center; gap: 6px; }
.browse-class-v13-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.class-pill-v13 {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: 0.86rem;
  transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.class-pill-v13:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(15,23,42,.10); }
@media (max-width: 560px) {
  .class-pill-v13 { padding: 9px 16px; font-size: 0.82rem; }
}

/* ---------------------------------------------------------------------- *
 * 3. Product cards - small corner-icon badges + wishlist
 * ---------------------------------------------------------------------- */
.pc-badge-v13 {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%; padding: 0;
  background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; text-transform: none; letter-spacing: 0;
  box-shadow: 0 2px 6px rgba(217,119,6,.35);
}
.pc-off-v13 {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; padding: 0; max-width: none;
  background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.64rem; font-weight: 800; line-height: 1;
  box-shadow: 0 2px 6px rgba(220,38,38,.35);
}
.wishlist-heart-v13 {
  top: auto; bottom: 8px; right: 8px;
  width: 28px; height: 28px; font-size: 0.82rem;
}
@media (max-width: 560px) {
  .pc-badge-v13 { width: 24px; height: 24px; font-size: 0.62rem; }
  .pc-off-v13 { width: 27px; height: 27px; font-size: 0.6rem; }
  .wishlist-heart-v13 { width: 26px; height: 26px; }
}

/* ---------------------------------------------------------------------- *
 * 4. Cart / checkout sticky-bar overlap fix
 * The real fix is in cart.php: body_class now includes has-sticky-bar, so
 * includes/footer.php's floating "Total Cart Value / Go to Cart" bar no
 * longer renders underneath the cart page's own "Proceed to Checkout" bar
 * (site-v10.css already hides .mobile-app-nav and keeps .sticky-buy-bar at
 * z-index 60 whenever body.has-sticky-bar is present). This rule only adds
 * a touch more breathing room so the button never sits flush against the
 * edge of the screen.
 * ---------------------------------------------------------------------- */
@media (max-width: 900px) {
  body.has-sticky-bar .sticky-buy-bar { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes fwAiPulse {
  0%   { box-shadow: 0 4px 12px rgba(37,99,235,.35), 0 0 0 0 rgba(37,99,235,.35); }
  70%  { box-shadow: 0 4px 12px rgba(37,99,235,.35), 0 0 0 9px rgba(37,99,235,0); }
  100% { box-shadow: 0 4px 12px rgba(37,99,235,.35), 0 0 0 0 rgba(37,99,235,0); }
}
@keyframes cbRingPulse {
  0%   { transform: scale(0.9); opacity: .9; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { opacity: 0; }
}

.cb-title-ai { margin-bottom: 8px; }
.cb-ai-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
  border-radius: 999px; font-weight: 800; font-size: 0.76rem; letter-spacing: .2px;
  color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed);
}
.cb-ai-badge i { font-size: 0.72rem; }

/* ---------------------------------------------------------------------- *
 * 6. Content-protection layer (pairs with assets/js/protect.js)
 * Disables casual text selection and the image "save/drag" cursor on
 * ordinary content, while explicitly leaving form fields, links, and
 * anything marked .sn-selectable / [data-allow-copy] (coupon codes, order
 * numbers, the WhatsApp number, etc.) fully selectable and copyable.
 * Skipped entirely on admin-body pages.
 * ---------------------------------------------------------------------- */
body:not(.admin-body) {
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
body:not(.admin-body) input,
body:not(.admin-body) textarea,
body:not(.admin-body) select,
body:not(.admin-body) [contenteditable],
body:not(.admin-body) .sn-selectable,
body:not(.admin-body) [data-allow-copy] {
  -webkit-user-select: text; -moz-user-select: text; user-select: text;
}
body:not(.admin-body) img {
  -webkit-user-drag: none; user-drag: none;
  pointer-events: auto; -webkit-touch-callout: none;
}

#sn-protect-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px);
  background: #0f172a; color: #fff; padding: 10px 18px; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  z-index: 9999; opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#sn-protect-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 900px) {
  #sn-protect-toast { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* Best-effort blur while the browser window itself is unfocused - see the
   honest caveats in assets/js/protect.js. Never applied on admin pages. */
html.sn-privacy-blur body:not(.admin-body) > * { filter: blur(18px); transition: filter .15s ease; }

/* ---------------------------------------------------------------------- *
 * 7. Checkout page - distraction-free redesign
 * Strips everything that invites the visitor to leave mid-payment (the
 * promo banner, the category rail, header search, the full nav, the
 * newsletter box, and the five-column footer with 25+ outbound links) and
 * keeps only what actually belongs at checkout: the logo, the order itself,
 * and the trust/payment badges. The 3-step progress indicator and the pay
 * button (already in checkout.php) are the visual anchors instead.
 * ---------------------------------------------------------------------- */
body.checkout-body .pv8-bar,
body.checkout-body .section-tabs,
body.checkout-body .header-search-wrap,
body.checkout-body .mobile-search-wrap,
body.checkout-body .header-nav,
body.checkout-body .mobile-cart,
body.checkout-body .menu-toggle,
body.checkout-body .newsletter-cta,
body.checkout-body .footer-grid,
body.checkout-body .footer-quicklinks,
body.checkout-body .app-download-cta {
  display: none !important;
}
/* Logo becomes the header's only content - center it so the bar doesn't
   read as a truncated nav bar with everything stripped out of one side. */
body.checkout-body .header-row { justify-content: center; }
body.checkout-body .header-row .logo { margin: 0 auto; }
/* A quiet, single-line reassurance sits where the nav used to be, right by
   the brand - this is the one thing worth adding back deliberately. */
body.checkout-body .header-row::after {
  content: '\f023  256-bit secure checkout';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  font-size: 0.78rem; color: var(--a-muted, #64748b); letter-spacing: .2px;
  white-space: nowrap;
}
@media (max-width: 700px) { body.checkout-body .header-row::after { display: none; } }

/* Keep the trust badges + payment-method icons (reassurance, not a
   distraction) and the tiny copyright bar (legal minimum); everything
   heavier above them is already hidden. */
body.checkout-body .footer-trust-strip { justify-content: center; border-top: none; }
body.checkout-body .site-footer { padding-top: 6px; }

/* Calmer canvas + a touch more breathing room around the two checkout
   cards, so the page itself feels like a dedicated payment screen rather
   than a storefront page with a form dropped into it. */
body.checkout-body { background: #f8fafc; }
body.checkout-body .checkout-form-card,
body.checkout-body .checkout-summary-col {
  border-radius: 18px;
  box-shadow: 0 10px 30px -12px rgba(15,23,42,.12);
}
body.checkout-body .checkout-steps { margin-bottom: 22px; }