/* ==========================================================================
   Shopaale storefront — UI polish layer (additive, mobile + desktop)
   Loaded last so it gently refines without overriding page design.
   ========================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px; /* anchors don't hide under the sticky header */
}

*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}

html, body {
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

img { max-width: 100%; }
button, input, select, textarea { font-family: inherit; }

/* ---- Tactile feedback on every pressable element ---- */
button, .btn, a.btn, input[type="submit"], input[type="button"] {
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease, opacity .18s ease;
  cursor: pointer;
}
button:active, .btn:active, a.btn:active,
input[type="submit"]:active, input[type="button"]:active {
  transform: scale(.96);
}

/* ---- Visible, consistent keyboard focus ---- */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Inputs: calmer borders, clear focus ---- */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select, textarea {
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
select:focus, textarea:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}

/* ---- Skeleton shimmer for JS-rendered loading states ---- */
.skel {
  position: relative;
  overflow: hidden;
  background: #ececec;
  border-radius: 8px;
  min-height: 16px;
  color: transparent !important;
}
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  animation: skel-shimmer 1.4s infinite;
}
@keyframes skel-shimmer {
  to { transform: translateX(100%); }
}

/* ---- Tables that would overflow get a smooth scroll wrapper (JS adds it) ---- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  scrollbar-width: thin;
}
.table-wrap table { min-width: 560px; }

/* ---- SweetAlert polish ---- */
.swal2-popup { border-radius: 18px !important; }
.swal2-confirm, .swal2-cancel { transition: transform .12s ease, filter .18s ease; }
.swal2-confirm:active, .swal2-cancel:active { transform: scale(.96); }

/* ---- Slim, quiet scrollbars on desktop ---- */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .22); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .36); border: 2px solid transparent; background-clip: content-box; }
}

/* ---- Mobile refinements ---- */
@media (max-width: 768px) {
  /* Prevent iOS Safari auto-zoom when focusing a field */
  input, select, textarea { font-size: 16px !important; }

  /* Comfortable tap targets for navigation + actions */
  nav a, footer a { min-height: 44px; display: inline-flex; align-items: center; }
  button, .btn, a.btn,
  input[type="submit"], input[type="button"] { min-height: 44px; }

  /* Slightly roomier page gutters */
  main, .main, .container, .page { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}

/* ---- Respect users who ask for less motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---- Cart drawer: proper off-canvas behavior (was rendering inline, "stuck open") ---- */
.bd-cart-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  height: 100dvh !important;
  width: min(400px, 92vw) !important;
  background: #fff !important;
  z-index: 2000 !important;
  transform: translateX(105%) !important;
  transition: transform .32s cubic-bezier(.32,.72,.35,1) !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: -8px 0 32px rgba(0,0,0,.14) !important;
  margin: 0 !important;
}
.bd-cart-drawer.open { transform: translateX(0) !important; }
.bd-cart-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#bd-cartOverlay, .bd-cart-overlay {
  position: fixed !important; inset: 0 !important;
  background: rgba(15,15,25,.5) !important;
  z-index: 1999 !important; opacity: 0 !important;
  pointer-events: none !important; transition: opacity .3s !important;
}
#bd-cartOverlay.show, .bd-cart-overlay.show { opacity: 1 !important; pointer-events: auto !important; }

/* ---- Category page overlap fixes (QA 2026-10-02) ---- */
/* Filter bar: never cut off "More" — wrap on desktop so dropdowns keep working */
@media (min-width: 821px) {
  .horizontal-filter-bar {
    flex-wrap: wrap !important;
    row-gap: 8px;
  }
  .horizontal-filter-bar .h-filter-item { flex-shrink: 0; }
}
/* Sticky category header: shadow so scrolled-under content looks intentional */
body.category-page .category-header {
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}
/* "Showing N Products" heading: breathing room below sticky header */
.category-results-meta-centered {
  margin-top: 10px !important;
  scroll-margin-top: 150px;
}
/* Subcategory pills row: contain within viewport, no sidebar overlap */
body.category-page .category-main-tabs,
body.category-page .subcate_container {
  max-width: 100% !important;
  padding-bottom: 4px !important;
}

/* ---- Homepage category strip: scroll affordance (QA 2026-10-02) ---- */
.category-strip--shopaale {
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, #000 94%, transparent 100%);
}
.category-strip--shopaale a { scroll-snap-align: start; }

/* ---- Mobile readability fixes (QA 2026-10-02) ---- */
@media (max-width: 700px) {
  /* 9px labels are unreadable — bump minimums */
  .category-strip strong, .category-strip--shopaale strong { font-size: 11px !important; line-height: 1.3 !important; }
  .mobile-footer a { font-size: 11px !important; }
  .offer-grid strong { font-size: 11px !important; }
  .product-card p { font-size: 11px !important; }
  .product-card b { font-size: 12px !important; }
  .product-card del, .product-card em, .product-card small { font-size: 10px !important; }
  .section-heading a { font-size: 11px !important; }
  /* 13px search triggers iOS auto-zoom — use 16px */
  .search-form input, .mobile-search input, input[type="search"] { font-size: 16px !important; }
  /* Keep offers at 2 columns (a later rule collapses to 1) */
  .offer-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- Product page: sticky buy bar must not cover footer/content (QA 2026-10-02) ---- */
body:has(.purplle-sticky-footer) { padding-bottom: 132px !important; }
.purplle-sticky-footer { padding-bottom: env(safe-area-inset-bottom); }

/* ---- Product page: mobile toolbar hidden on desktop (QA 2026-10-02) ---- */
@media (min-width: 821px) {
  .purplle-header { display: none !important; }
}

/* ---- Login page home link (QA 2026-10-02) ---- */
.login-home-link {
  position: fixed;
  top: 14px;
  left: 16px;
  z-index: 50;
  font-size: 15px;
  font-weight: 700;
  color: #990099;
  text-decoration: none;
  background: rgba(255,255,255,0.9);
  padding: 8px 14px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ---- Sort dropdown: mobile bottom-sheet styling (2026-10-03) ---- */
@media (max-width: 820px) {
  .h-filter-item.sort-by { position: static; }
  #filltertwos .h-dropdown-menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: 60vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
    z-index: 1300 !important;
    padding: 20px 20px 28px !important;
    margin: 0 !important;
    display: none;
    flex-direction: column;
  }
  #filltertwos .h-dropdown-menu::before { display: none; }
  .h-dropdown-list { display: flex; flex-direction: column; gap: 4px; }
  .h-checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 8px;
    font-size: 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    white-space: normal;
    overflow: visible;
  }
  .h-checkbox-label span { flex: 1; min-width: 0; }
  .h-checkbox-label input[type="radio"] { width: 18px; height: 18px; accent-color: #990099; }
  .h-dropdown-footer { padding-top: 16px; }
  .h-apply-btn {
    width: 100%;
    padding: 14px;
    background: #990099;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
  }
}
/* Desktop: ensure the JS toggle works alongside hover */
@media (min-width: 821px) {
  #filltertwos .h-dropdown-menu { display: none; }
  #filltertwos:hover .h-dropdown-menu { display: flex; }
}

/* Wishlist button active state (2026-10-03) */
#wishlist_btn { cursor: pointer; background: none; border: none; padding: 8px; }
#wishlist_btn.active svg path { fill: #990099; }

/* ---- Mobile UX polish: tap targets, spacing, sticky elements (2026-10-03) ---- */
@media (max-width: 820px) {
  /* Minimum 44px tap targets for key actions */
  .add-to-cart, .add-to-cart-btn, .btn-buy,
  .h-apply-btn, .place_order .palceorderbtn {
    min-height: 44px !important;
  }
  /* Product cards: breathing room */
  .products-grid { gap: 12px !important; padding: 0 12px !important; }
  .product { border-radius: 10px !important; }
  /* Sticky buy bar: safe-area + not covering content */
  .purplle-sticky-footer { padding-bottom: env(safe-area-inset-bottom) !important; }
  /* Floating controls: keep clear of sticky bar */
  .category-floating-controls { bottom: 90px !important; }
  /* Prevent horizontal scroll glitches */
  body { overflow-x: hidden !important; }
  /* Forms: comfortable input size */
  input, select, textarea { font-size: 16px !important; }
}