/* =====================================================================
 * KS-UI-POLISH-V1 — Cross-cutting design-system polish (2026-05-13)
 *
 * Site-wide micro-improvements that bring the rest of the shop up to
 * the Stripe-style quality of the new cart + checkout. Not page-specific.
 *
 * Inventory:
 *   A. Focus rings (a11y + design — replaces the browser blue outline)
 *   B. Hover/active states for buttons and links (subtle lift)
 *   C. Smoother transitions across interactive elements
 *   D. Consistent shadow scale (sm / md / lg) via CSS vars
 *   E. Input field rhythm: same border-radius and focus across pages
 *   F. Notification / toast styling
 *   G. Scrollbar styling (thin, on-brand)
 *   H. Selection color
 *   I. Reduced-motion respect
 *   J. Skip-to-content link (a11y)
 *   K. Better disabled-state appearance
 *   L. Image hover lift on category cards
 * ===================================================================== */

:root {
  --ks-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.02);
  --ks-shadow-md: 0 4px 8px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.03);
  --ks-shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
  --ks-shadow-orange: 0 4px 14px rgba(249, 115, 22, 0.35), 0 2px 4px rgba(234, 88, 12, 0.18);
}

/* =============================================================
 * A) FOCUS RINGS — visible, accessible, on-brand
 * ============================================================= */
*:focus { outline: none; }
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 2px solid rgba(249, 115, 22, 0.7);
  outline-offset: 2px;
  border-radius: 8px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}

/* =============================================================
 * B+C) BUTTON HOVER / ACTIVE — subtle lift, smoother transitions
 *
 * Don't touch already-styled custom buttons (.ks-cta, .ks-pdp-sticky-cta,
 * .ks-cart-sticky-btn). Cover the generic .btn / button.btn-primary.
 * ============================================================= */
.btn,
button.btn,
a.btn {
  transition: background-color 0.15s, color 0.15s, transform 0.15s,
              box-shadow 0.15s, border-color 0.15s;
}
.btn:active,
button.btn:active,
a.btn:active {
  transform: translateY(0);
}
.btn-primary:not(.ks-cta):not(.ks-pdp-sticky-cta):not(.ks-cart-sticky-btn):hover,
button.btn-primary:not(.ks-cta):not(.ks-pdp-sticky-cta):hover,
a.btn-primary:not(.ks-cta):not(.ks-pdp-sticky-cta):hover {
  transform: translateY(-1px);
  box-shadow: var(--ks-shadow-orange);
}

/* =============================================================
 * D) SHADOW RHYTHM — apply via utility class OR auto-promote
 *
 * Standardize the existing .card and .product-miniature shadows.
 * ============================================================= */
.card,
.product-miniature,
.ks-card,
.ks-product-card {
  box-shadow: var(--ks-shadow-sm);
  transition: box-shadow 0.18s, transform 0.18s;
}
.product-miniature:hover,
.ks-product-card:hover,
.ks-card--interactive:hover {
  box-shadow: var(--ks-shadow-md);
  transform: translateY(-2px);
}

/* =============================================================
 * E) INPUT RHYTHM — consistent radius, height, focus
 *
 * Scoped to NOT touch cart/checkout (their own files already polish).
 * ============================================================= */
body:not(#cart):not(#module-kscheckout-checkout) {}
body:not(#cart):not(#module-kscheckout-checkout) input[type="text"]:not([data-search-input]):not(.promo-input):not(#quantity_wanted),
body:not(#cart):not(#module-kscheckout-checkout) input[type="email"],
body:not(#cart):not(#module-kscheckout-checkout) input[type="tel"],
body:not(#cart):not(#module-kscheckout-checkout) input[type="password"],
body:not(#cart):not(#module-kscheckout-checkout) input[type="search"],
body:not(#cart):not(#module-kscheckout-checkout) textarea,
body:not(#cart):not(#module-kscheckout-checkout) select {
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body:not(#cart):not(#module-kscheckout-checkout) input:hover:not(:focus):not([aria-invalid="true"]) {
  border-color: #94a3b8;
}

/* =============================================================
 * F) TOAST / GROWL NOTIFICATIONS — clean styling
 *
 * PrestaShop fires `growl` toast-style notifications (e.g., "Product
 * added to cart"). Style them as clean cards.
 * ============================================================= */
.notifications-container,
.growl-message,
.toast,
[id^="ps-notification"],
.alert.alert-success,
.alert.alert-info {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #16a34a !important;
  color: #0f172a !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  box-shadow: var(--ks-shadow-lg) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
.alert.alert-warning {
  border-left-color: #f59e0b !important;
}
.alert.alert-danger {
  border-left-color: #dc2626 !important;
}

/* =============================================================
 * G) SCROLLBAR — thin, on-brand (WebKit)
 * ============================================================= */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.30);
    background-clip: content-box;
  }
}

/* =============================================================
 * H) SELECTION COLOR — branded
 * ============================================================= */
::selection {
  background: rgba(249, 115, 22, 0.22);
  color: #0f172a;
}

/* =============================================================
 * I) REDUCED MOTION
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ks-pdp-sticky-bar,
  .ks-cart-sticky-cta {
    transition: none !important;
  }
}

/* =============================================================
 * J) SKIP-TO-CONTENT — a11y, visually hidden until focus
 *
 * Theme already has a #header — add a skip-link via CSS if any
 * element with class .ks-skip-link is present in the DOM.
 * ============================================================= */
.ks-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  background: #f97316;
  color: #fff;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 0 8px 0;
  text-decoration: none;
  transform: translateY(-100%);
  z-index: 9999;
  transition: transform 0.15s;
}
.ks-skip-link:focus,
.ks-skip-link:focus-visible {
  transform: translateY(0);
  color: #fff;
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* =============================================================
 * K) DISABLED STATES — consistent
 * ============================================================= */
button:disabled,
.btn:disabled,
.btn.disabled,
[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
  filter: grayscale(0.2);
}

/* =============================================================
 * L) CATEGORY-CARD image hover lift
 * ============================================================= */
.product-miniature .product-thumbnail img,
.product-miniature .ks-card-image img {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-miniature:hover .product-thumbnail img,
.product-miniature:hover .ks-card-image img {
  transform: scale(1.03);
}

/* =============================================================
 * BONUS — Star ratings consistency
 * ============================================================= */
.star,
.product-rating,
[class*="rating"] .stars {
  color: #f97316;
}

/* =============================================================
 * BONUS — Improve PS spinner overlay
 * ============================================================= */
.product-refresh,
.spinner-overlay {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(4px);
}