/* Storefront-only styles. Loaded after the Tailwind CDN build, so plain
   selectors here can safely override its (border-width: 0) preflight etc. */

/* The header/nav now span the full viewport width edge-to-edge (no more
   max-w-7xl cap); belt-and-braces against any sub-pixel rounding or content
   edge case creating an unwanted horizontal scrollbar. `clip` (not `hidden`)
   deliberately: per the CSS overflow spec, setting overflow-x to anything
   scrollable (hidden/auto/scroll) while overflow-y is left at its default
   forces overflow-y to also become 'auto' — exactly the bug that broke the
   nav dropdowns earlier — whereas `clip` doesn't trigger that coupling, so
   the sticky nav below is unaffected. */
body { overflow-x: clip; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Sticky bars (header on mobile, nav on desktop, homepage search) slide
   out of view on scroll-down and back in on scroll-up (site.js) instead of
   permanently eating screen space — most noticeable on a short mobile
   viewport. Snaps instantly rather than animating: multiple sticky bars
   toggle together, and an animated transform widens the window for a
   render to be caught mid-slide (visible during fast/momentum scrolling
   as bars sitting at the wrong offset for a frame or two). */
.ss-autohide-hidden { transform: translateY(-100%); }

/* ---------- Homepage inline search ---------- */
.ss-search-empty, .ss-search-loading {
  padding: 1rem; text-align: center; font-size: .85rem; color: #94a3b8;
}
.ss-search-heading {
  font-size: .8rem; color: #64748b; margin-bottom: .85rem;
}
.ss-search-heading a { color: #4f46e5; font-weight: 600; text-decoration: none; }
.ss-search-heading a:hover { text-decoration: underline; }

/* Sticks right below the sticky nav bar (site.js keeps --ss-sticky-bar-height
   in sync with its actual rendered height, which differs by breakpoint/wrap
   and is 0 on mobile, where the nav itself is hidden) so the search box
   stays reachable while scrolling. */
.ss-sticky-search {
  position: sticky;
  top: var(--ss-sticky-bar-height, 52px);
  z-index: 25;
  background: #f8fafc;
  padding: .75rem 0;
}

/* ---------- Homepage category sections: each one is its own card so
   adjacent categories read as clearly separate blocks at a glance, instead
   of just a thin divider line between two headings. ---------- */
.ss-cat-section {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  padding: 1.1rem 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 640px) { .ss-cat-section { padding: 1.35rem 1.5rem 1.5rem; margin-bottom: 1.5rem; } }
.ss-cat-section:last-child { margin-bottom: 0; }

/* Small colored accent bar next to each category heading — a quick visual
   anchor so the eye immediately registers "new category starts here". */
.ss-cat-bar {
  display: inline-block; flex-shrink: 0;
  width: .3rem; height: 1.35rem; border-radius: 999px;
  background: linear-gradient(180deg, #818cf8, #4f46e5);
}

/* ---------- Pills (category-section action buttons) ----------
   Each action gets its own brand-ish color so the row reads as a set of
   distinct, glanceable actions rather than a wall of identical gray chips. */
.ss-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 700; color: #475569;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px;
  padding: .4rem .85rem; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  transition: transform .1s ease, box-shadow .1s ease, background-color .1s ease;
}
.ss-pill:hover { background: #e2e8f0; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(15, 23, 42, .1); }
.ss-pill svg { flex-shrink: 0; }

.ss-pill-primary { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.ss-pill-primary:hover { background: #4338ca; border-color: #4338ca; }

.ss-pill-whatsapp { background: #e7f9ee; border-color: #a7e8c3; color: #0f7a42; }
.ss-pill-whatsapp:hover { background: #d3f5e2; }

.ss-pill-copy { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.ss-pill-copy:hover { background: #e0e7ff; }

.ss-pill-video, .ss-pill-accent { background: #fdf2f8; border-color: #fbcfe8; color: #be185d; }
.ss-pill-video:hover, .ss-pill-accent:hover { background: #fce7f3; }

/* ---------- Horizontal product strip (homepage rows) ---------- */
.ss-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(9.5rem, 40vw);
  gap: .85rem;
  overflow-x: auto;
  padding-bottom: .35rem;
  scroll-snap-type: x proximity;
}
@media (min-width: 640px) {
  .ss-row { grid-auto-columns: minmax(11rem, 20vw); }
}
.ss-row-item { scroll-snap-align: start; }

/* ---------- Related-products slider (product detail page) ---------- */
.ss-slider { display: flex; align-items: center; gap: .5rem; }
.ss-slider .ss-row { flex: 1 1 auto; min-width: 0; scrollbar-width: none; -ms-overflow-style: none; }
.ss-slider .ss-row::-webkit-scrollbar { display: none; }
.ss-slider-arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ss-slider-arrow:hover { background: #eef2ff; color: #4338ca; }
.ss-slider-arrow:disabled { opacity: .35; cursor: default; pointer-events: none; }

/* ---------- Fixed 4-up row (homepage category sections — no scrollbar) ---------- */
.ss-row-fixed {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .85rem;
}
@media (min-width: 640px) { .ss-row-fixed { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Product grid (category / search pages) ---------- */
.ss-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .85rem;
}
@media (min-width: 640px) { .ss-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ss-grid { grid-template-columns: repeat(5, 1fr); } }

/* ---------- Product card image: always 1:1, regardless of Tailwind's
   aspect-square utility actually generating (belt-and-braces). ---------- */
.ss-card-image {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  background: #f1f5f9;
}
.ss-card-image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Mobile accordion menu chevrons ---------- */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] .ss-chevron { transform: rotate(180deg); }
.ss-chevron { transition: transform .15s ease; flex-shrink: 0; margin-left: .5rem; }

/* ---------- Infinite-scroll sentinel / spinner ---------- */
.ss-sentinel { display: flex; justify-content: center; padding: 2rem 0; }
.ss-spinner {
  width: 1.75rem; height: 1.75rem; border-radius: 999px;
  border: 3px solid #e2e8f0; border-top-color: #4f46e5;
  animation: ss-spin .7s linear infinite;
}
@keyframes ss-spin { to { transform: rotate(360deg); } }

/* ---------- Video modal ---------- */
.ss-modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.7);
  z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.ss-modal {
  background: #0f172a; border-radius: 14px; width: 100%; max-width: 42rem;
  max-height: 85vh; overflow-y: auto; padding: 1rem;
}
.ss-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  color: #fff; font-weight: 600; margin-bottom: .75rem;
}
.ss-modal-close {
  color: #cbd5e1; background: none; border: none; cursor: pointer; padding: .25rem;
}
.ss-video-item { margin-bottom: 1rem; }
.ss-video-item iframe { width: 100%; aspect-ratio: 16/9; border-radius: 8px; border: 0; }
.ss-video-item .ss-video-caption { color: #94a3b8; font-size: .78rem; margin-top: .35rem; }

/* ---------- Misc form inputs on storefront (same border-fix issue as admin) ---------- */
input[type=text], input[type=search], input:not([type]), textarea {
  border: 1px solid #cbd5e1;
  background-color: #fff;
}
input[type=text]:focus, input[type=search]:focus, input:not([type]):focus, textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}