/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║          TORVALI LAYOUT — MARKETPLACE PULSE EDITION          ║
 * ║  A high-energy, conversion-optimized shopping layout built   ║
 * ║  for maximum browse-ability and impulse discovery.           ║
 * ║  Inspired by the world's most-shopped storefronts —          ║
 * ║  dense grids, sticky nav, deal banners, and fast scanning.   ║
 * ╚══════════════════════════════════════════════════════════════╝
 */


/* ═══════════════════════════════════════════════════════════════
   LAYOUT vs THEME — what belongs here?
   ───────────────────────────────────────────────────────────────
   ✅ LAYOUT (this file):  display, grid, flex, gap, padding,
                           margin, width, height, columns,
                           aspect-ratio, order, position, overflow
   ❌ THEME (separate):    color, background, border-color,
                           font-family, font-size, box-shadow,
                           border-radius, opacity
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   1. PAGE CONTAINER
   Slightly narrower than luxury layouts — keeps content tight
   and scannable on all screen sizes.
   ═══════════════════════════════════════════════════════════════ */

.sf-nav-inner,
.sf-hero-content,
.sf-shop,
.sf-featured .container,
.sf-footer-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}


/* ═══════════════════════════════════════════════════════════════
   2. ANNOUNCEMENT / DEAL BANNER
   Top-of-page strip for promotions, flash deals, free shipping.
   ═══════════════════════════════════════════════════════════════ */

.sf-announcement {
  width: 100%;
  padding: 10px 20px;
  text-align: center;
}


/* ═══════════════════════════════════════════════════════════════
   3. NAVIGATION
   Compact, sticky nav — logo left, search dominant center,
   cart + account right. Search is the star on a shopping site.
   ═══════════════════════════════════════════════════════════════ */

.sf-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

.sf-nav-inner {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Search bar dominates — takes up most of the nav width */
.sf-search {
  flex: 1;
  max-width: 680px;
}

.sf-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Secondary nav row — department/category links */
.sf-nav-secondary {
  width: 100%;
}

.sf-nav-secondary-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.sf-nav-secondary-inner::-webkit-scrollbar {
  display: none;
}

.sf-nav-dept {
  padding: 10px 14px;
  white-space: nowrap;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   4. HERO SECTION
   Shorter, action-oriented hero — shoppers want to browse fast.
   Side-by-side split: headline + CTA left, featured image right.
   ═══════════════════════════════════════════════════════════════ */

.sf-hero {
  min-height: 340px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.sf-hero-content {
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.sf-hero h1 {
  max-width: 480px;
}

.sf-hero-desc {
  max-width: 400px;
}

/* Right half — hero image panel (background-image via Theme) */
.sf-hero-image {
  min-height: 340px;
  overflow: hidden;
}

.sf-hero-image img,
.sf-hero-image > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ═══════════════════════════════════════════════════════════════
   5. QUICK-SHOP CATEGORY STRIP
   Icon + label grid — fast visual navigation to departments.
   ═══════════════════════════════════════════════════════════════ */

.sf-quick-cats {
  padding: 24px 20px;
}

.sf-quick-cats-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: flex-start;
}

.sf-quick-cats-inner::-webkit-scrollbar {
  display: none;
}

.sf-quick-cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  flex-shrink: 0;
  min-width: 80px;
}

.sf-quick-cat-icon {
  width: 56px;
  height: 56px;
  overflow: hidden;
  flex-shrink: 0;
}

.sf-quick-cat-label {
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════
   6. CATEGORY FILTER BAR
   Pill-style horizontal scroll — compact, fast to tap.
   ═══════════════════════════════════════════════════════════════ */

.sf-cats-inner {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 20px;
  scrollbar-width: none;
}

.sf-cats-inner::-webkit-scrollbar {
  display: none;
}

.sf-cat-btn {
  padding: 8px 16px;
  white-space: nowrap;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   7. SHOP SECTION — SIDEBAR + GRID LAYOUT
   Classic marketplace layout: filters left, products right.
   ═══════════════════════════════════════════════════════════════ */

.sf-shop {
  padding: 28px 20px 60px;
}

.sf-shop-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: start;
}

/* Filter sidebar — sticky so it stays visible while scrolling */
.sf-filter-sidebar {
  position: sticky;
  top: 72px;          /* offset below sticky nav */
}

.sf-filter-group {
  margin-bottom: 28px;
}

.sf-filter-group-title {
  margin-bottom: 12px;
}

.sf-filter-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sf-shop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

/* Sort + view toggle row */
.sf-shop-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}


/* ═══════════════════════════════════════════════════════════════
   8. PRODUCT GRID
   Dense 4-column grid — maximize product exposure per screen.
   ═══════════════════════════════════════════════════════════════ */

.sf-products {
  display: grid;
  gap: 16px;

  /* Dense 4-column — maximum browsability */
  grid-template-columns: repeat(4, 1fr);

  /* Alternative options:

  5-column ultra-dense (large screens):
  grid-template-columns: repeat(5, 1fr);

  3-column balanced:
  grid-template-columns: repeat(3, 1fr);

  Auto-fill responsive (no sidebar):
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  List view:
  grid-template-columns: 1fr;
  */
}

/* List view card layout */
/*
.sf-product-card {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  align-items: center;
  gap: 16px;
}
.sf-product-img {
  aspect-ratio: 1 / 1;
  height: 180px;
  width: 180px;
}
*/


/* ═══════════════════════════════════════════════════════════════
   9. PRODUCT CARD PROPORTIONS
   Square cards — familiar, fast to scan, works for all products.
   Info area is compact but includes room for ratings + price.
   ═══════════════════════════════════════════════════════════════ */

.sf-product-img {
  aspect-ratio: 1 / 1;  /* square — universal shopping standard */
  /* aspect-ratio: 4 / 3;  slightly wider for lifestyle/home goods */
  overflow: hidden;
  position: relative;
}

/* Badge positioning (NEW, SALE, etc.) — layout anchor */
.sf-product-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
}

.sf-product-info {
  padding: 10px 10px 14px;
}

/* Rating row */
.sf-product-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

/* Price row — original + sale side by side */
.sf-product-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

/* Quick-add button — appears on hover, stays in flow */
.sf-product-quick-add {
  width: 100%;
  margin-top: 10px;
}


/* ═══════════════════════════════════════════════════════════════
   10. DEALS / FLASH SALE STRIP
   Horizontal scroll of deal cards — urgency section
   ═══════════════════════════════════════════════════════════════ */

.sf-deals {
  padding: 32px 0;
}

.sf-deals-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 0 20px 12px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.sf-deals-scroll::-webkit-scrollbar {
  display: none;
}

.sf-deal-card {
  flex-shrink: 0;
  width: 200px;
  scroll-snap-align: start;
}

.sf-deal-card .sf-product-img {
  aspect-ratio: 1 / 1;
}


/* ═══════════════════════════════════════════════════════════════
   11. FEATURED / SECTIONS AREA
   ═══════════════════════════════════════════════════════════════ */

.sf-featured {
  padding: 40px 20px;
}

.sf-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.sf-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0;
}

.sf-section-see-all {
  flex-shrink: 0;
}

/* Horizontal scroll row for featured products */
.sf-featured-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 8px;
}

.sf-featured-scroll::-webkit-scrollbar {
  display: none;
}

.sf-featured-scroll .sf-product-card {
  flex-shrink: 0;
  width: 220px;
  scroll-snap-align: start;
}


/* ═══════════════════════════════════════════════════════════════
   12. TRUST / PERKS BAR
   Shipping • Returns • Support — below hero or above footer
   ═══════════════════════════════════════════════════════════════ */

.sf-perks {
  padding: 20px;
}

.sf-perks-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.sf-perk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.sf-perk-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   13. FOOTER GRID
   ═══════════════════════════════════════════════════════════════ */

.sf-footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
  margin-bottom: 40px;
}

.sf-footer-grid > :first-child {
  flex: 2 1 200px;
}

.sf-footer-grid > :not(:first-child) {
  flex: 1 1 140px;
}


/* ═══════════════════════════════════════════════════════════════
   14. CART SIDEBAR
   Compact, efficient — focused on checkout conversion
   ═══════════════════════════════════════════════════════════════ */

.cart-sidebar {
  width: 400px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
}

.cart-sidebar-body {
  flex: 1;
  overflow-y: auto;
}

.cart-sidebar-footer {
  padding: 20px;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   15. PAGINATION / LOAD MORE
   ═══════════════════════════════════════════════════════════════ */

.sf-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 0 20px;
  flex-wrap: wrap;
}

.sf-load-more {
  display: flex;
  justify-content: center;
  padding: 32px 0;
}


/* ═══════════════════════════════════════════════════════════════
   16. RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
  .sf-shop-layout {
    grid-template-columns: 200px 1fr;
    gap: 24px;
  }

  .sf-products {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 960px) {
  /* Collapse sidebar into an off-canvas/drawer on tablet */
  .sf-shop-layout {
    grid-template-columns: 1fr;
  }

  .sf-filter-sidebar {
    position: static;
    display: none; /* show via JS toggle / drawer */
  }

  .sf-filter-sidebar.is-open {
    display: block;
  }

  .sf-products {
    grid-template-columns: repeat(3, 1fr);
  }

  .sf-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .sf-hero-image {
    min-height: 260px;
    order: -1;
  }

  .sf-hero-content {
    padding: 36px 24px;
  }

  .sf-perks-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sf-products {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .sf-nav-inner {
    height: 56px;
    gap: 12px;
  }

  .sf-search {
    flex: 1;
    max-width: none;
  }

  .sf-shop {
    padding: 20px 16px 48px;
  }

  .sf-nav-inner,
  .sf-hero-content,
  .sf-shop,
  .sf-featured .container,
  .sf-footer-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 480px) {
  .sf-products {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .sf-product-info {
    padding: 8px 8px 12px;
  }

  .sf-hero-image {
    min-height: 200px;
  }

  .sf-perks-inner {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .sf-perk-item {
    flex-direction: column;
    text-align: center;
    gap: 6px;
    padding: 12px 8px;
  }

  .sf-deals-scroll,
  .sf-featured-scroll {
    padding: 0 16px 8px;
  }

  .cart-sidebar {
    width: 100vw;
  }
}


/*
 * ─── TIPS ──────────────────────────────────────────────────────
 *
 *  MARKETPLACE PULSE layout notes:
 *
 *  • .sf-nav is sticky — pair with a Theme that gives it
 *    a solid background + subtle bottom shadow on scroll
 *
 *  • .sf-shop-layout uses a 220px sidebar; toggle
 *    .is-open on .sf-filter-sidebar via JS on mobile
 *
 *  • .sf-product-badge (SALE / NEW / HOT) is absolutely
 *    positioned — add it in markup inside .sf-product-img
 *
 *  • .sf-deals-scroll and .sf-featured-scroll use
 *    scroll-snap — smooth horizontal swiping on mobile
 *
 *  • .sf-perks bar (shipping / returns / support icons)
 *    is a standalone section — place below hero or
 *    just above the footer for maximum trust signal
 *
 *  • Pair with a bright, high-contrast Theme —
 *    bold accent for CTAs, clear price hierarchy,
 *    subtle card borders or shadows
 *
 * ─── SUBMIT ────────────────────────────────────────────────────
 *
 *  Ready? Head to /designer → Submit New → Layout
 *  Submitted layouts are reviewed before appearing in the
 *  marketplace. Typical review time: 1–3 business days.
 *
 * ───────────────────────────────────────────────────────────── */