/* Custom CSS helpers for the Tailwind layout */

:root {
  --primary: #F68A1E;
}

/* Scrollbar (left category panel) */
.smart-scroll {
  scrollbar-color: rgba(156, 163, 175, 0.9) transparent;
  scrollbar-width: thin;
}
.smart-scroll::-webkit-scrollbar {
  width: 10px;
}
.smart-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.smart-scroll::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.7);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.smart-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.8);
  border: 3px solid transparent;
  background-clip: content-box;
}

/* Text clamp */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Drag scroll base */
.drag-scroll {
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}

/* Product slider row */
.product-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 16px) / 2);
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 1px;
  cursor: grab;
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none; /* Firefox */
}
.product-row::-webkit-scrollbar {
  display: none;
}
.product-row:active {
  cursor: grabbing;
}
.product-row > .product-card {
  scroll-snap-align: start;
}
.product-row,
.product-row * {
  user-select: none;
}
.product-row img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Brand slider row */
.brand-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 16px) / 2);
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  cursor: grab;
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none; /* Firefox */
}
.brand-row::-webkit-scrollbar {
  display: none;
}
.brand-row:active {
  cursor: grabbing;
}
.brand-row > .brand-card {
  scroll-snap-align: start;
}
.brand-row,
.brand-row * {
  user-select: none;
}
.brand-row img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Category row (mobile: horizontal, desktop: grid) */
.category-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 16px) / 2);
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  cursor: grab;
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none; /* Firefox */
}
.category-row::-webkit-scrollbar {
  display: none;
}
.category-row:active {
  cursor: grabbing;
}
.category-row > a {
  scroll-snap-align: start;
}

/* Slider dots */
.product-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.product-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(246, 138, 30, 0.75);
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.product-dot.is-active {
  width: 18px;
  border: 0;
  background: var(--primary);
}

/* Hero dots */
.hero-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.35);
  padding: 0;
  cursor: pointer;
  transition: all 150ms ease;
}
.hero-dot.is-active {
  width: 18px;
  border: 0;
  background: var(--primary);
}

/* Tabs */
.tab-btn.is-active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Scroll-to-top button (match reference: double ring) */
.scroll-top {
  position: fixed;
  right: 60px;
  bottom: -4rem;
  z-index: 999;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  opacity: 0;
  transition: bottom 0.3s ease, opacity 0.3s ease;
}
.scroll-top.show {
  opacity: 1;
  bottom: 98px;
}
.scroll-top__icon {
  position: relative;
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary);
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
}
.scroll-top__icon svg {
  display: block;
  transform: translateY(-2px);
}
.scroll-top > svg {
  position: absolute;
  inset: 0;
  width: 56px;
  height: 56px;
  transform: rotate(-90deg);
  border-radius: 999px;
}
#progress-indicator {
  stroke: var(--primary);
  stroke-dasharray: 0 999;
}

@media (max-width: 640px) {
  .scroll-top {
    right: 16px;
  }
  .scroll-top.show {
    bottom: 20px;
  }
}

/* Responsive columns per view */
@media (min-width: 640px) {
  .product-row {
    grid-auto-columns: calc((100% - 24px) / 2);
    gap: 24px;
  }
  .category-row {
    overflow-x: visible;
    grid-auto-flow: row;
    grid-auto-columns: unset;
    padding-bottom: 0;
    cursor: default;
  }
  .brand-row {
    grid-auto-columns: calc((100% - (24px * 2)) / 3);
    gap: 24px;
  }
}
@media (min-width: 768px) {
  .product-row {
    grid-auto-columns: calc((100% - (24px * 2)) / 3);
  }
  .brand-row {
    grid-auto-columns: calc((100% - (24px * 3)) / 4);
  }
}
@media (min-width: 1280px) {
  .product-row {
    grid-auto-columns: calc((100% - (24px * 4)) / 5);
  }
  .brand-row {
    grid-auto-columns: calc((100% - (24px * 4)) / 5);
  }
}
.store-badge__text{font-size:10px; letter-spacing:.08em; opacity:.85}
.store-badge__brand{font-size:14px; font-weight:700}
.store-badge__triangle{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:0;height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:16px solid #10b981;
  filter:drop-shadow(0 0 0 rgba(0,0,0,0));
}

/* White nav row */
.navbar{
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.navbar__inner{
  display:flex;
  align-items:center;
  gap:18px;
  padding:12px 0;
}
.category-btn{
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  background:transparent;
  color:#111827;
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
  padding:8px 10px;
}
.category-btn__text{font-size:14px}
.menu{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}
.menu__link{
  color:#111827;
  text-decoration:none;
  font-weight:600;
}
.menu__link:hover{text-decoration:underline}

.page{
  padding:28px 0 64px;
}

@media (max-width: 900px){
  .topbar__inner{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "brand actions"
      "search search";
  }
  .brand{grid-area:brand}
  .search{grid-area:search; max-width:none}
  .top-actions{grid-area:actions; justify-content:flex-end}
  .store-badge{display:none}
}

@media (max-width: 700px){
  .menu{display:none}
}