/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║          TORVALI LAYOUT STARTER TEMPLATE                     ║
 * ║  Override structural CSS to change how the storefront is     ║
 * ║  arranged — grid columns, spacing, nav shape, hero size,     ║
 * ║  card proportions, and more.                                 ║
 * ║                                                              ║
 * ║  HOW IT WORKS                                                ║
 * ║  • This file is loaded AFTER the base storefront styles      ║
 * ║  • Override structural properties (display, grid, padding,   ║
 * ║    width, flex, etc.) — leave colors/fonts to a Theme        ║
 * ║  • See /theme-spec for full documentation                    ║
 * ╚══════════════════════════════════════════════════════════════╝
 */


/* ═══════════════════════════════════════════════════════════════
   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
   Controls the max-width and horizontal padding of all sections.
   ═══════════════════════════════════════════════════════════════ */

.sf-nav-inner,
.sf-hero-content,
.sf-shop,
.sf-featured .container,
.sf-footer-inner {
  max-width: 1200px;  /* widen to 1400px for full-bleed layouts */
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}


/* ═══════════════════════════════════════════════════════════════
   2. NAVIGATION
   .sf-nav-inner — flex row containing logo, search, actions
   ═══════════════════════════════════════════════════════════════ */

.sf-nav-inner {
  height: 64px;          /* increase for a taller nav */
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Search bar width */
.sf-search {
  flex: 1;
  max-width: 440px;
}

/* Nav right cluster (account + cart) */
.sf-nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}


/* ═══════════════════════════════════════════════════════════════
   3. HERO SECTION
   .sf-hero         — the full-width banner area
   .sf-hero-content — inner content wrapper
   ═══════════════════════════════════════════════════════════════ */

.sf-hero {
  min-height: 480px;     /* taller: 600px  shorter: 320px  full-screen: 100vh */
  display: flex;
  align-items: center;   /* center | flex-start (top-align) */
}

.sf-hero-content {
  padding: 80px 24px;    /* reduce for a more compact hero */

  /* Example: centered text layout */
  /* text-align: center; */
  /* display: flex; flex-direction: column; align-items: center; */
}

.sf-hero h1 {
  max-width: 640px;      /* constrain headline width */
}

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


/* ═══════════════════════════════════════════════════════════════
   4. CATEGORY BAR
   .sf-cats-inner — scrollable tab strip
   ═══════════════════════════════════════════════════════════════ */

.sf-cats-inner {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0 24px;
  scrollbar-width: none;  /* hide scrollbar on Firefox */
}

.sf-cats-inner::-webkit-scrollbar {
  display: none;          /* hide scrollbar on Chrome/Safari */
}

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


/* ═══════════════════════════════════════════════════════════════
   5. PRODUCT GRID
   .sf-products — the grid container for product cards
   ─────────────────────────────────────────────────────────────
   Preset column options — uncomment one:
   ═══════════════════════════════════════════════════════════════ */

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

  /* DEFAULT: auto-fill columns (min 220px) */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

  /* 2-column editorial */
  /* grid-template-columns: repeat(2, 1fr); */

  /* 3-column fixed */
  /* grid-template-columns: repeat(3, 1fr); */

  /* 4-column compact */
  /* grid-template-columns: repeat(4, 1fr); */

  /* List view (1 column full-width cards) */
  /* grid-template-columns: 1fr; */
}

/* List view card layout (pair with 1-column grid above) */
/*
.sf-product-card {
  display: grid;
  grid-template-columns: 200px 1fr;
}
.sf-product-img {
  aspect-ratio: auto;
  height: 200px;
}
*/


/* ═══════════════════════════════════════════════════════════════
   6. PRODUCT CARD PROPORTIONS
   .sf-product-img  — image area aspect ratio
   .sf-product-info — text padding
   ═══════════════════════════════════════════════════════════════ */

.sf-product-img {
  aspect-ratio: 1 / 1;   /* square (default) */
  /* aspect-ratio: 4 / 5;  portrait */
  /* aspect-ratio: 16 / 9; landscape/banner */
  overflow: hidden;
}

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


/* ═══════════════════════════════════════════════════════════════
   7. SHOP SECTION SPACING
   .sf-shop — wraps the category bar + product grid
   ═══════════════════════════════════════════════════════════════ */

.sf-shop {
  padding: 40px 24px;
}

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


/* ═══════════════════════════════════════════════════════════════
   8. FEATURED / SECTIONS AREA
   .sf-featured — full-width section below product grid
   ═══════════════════════════════════════════════════════════════ */

.sf-featured {
  padding: 60px 24px;
}

.sf-section-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 24px;
}


/* ═══════════════════════════════════════════════════════════════
   9. FOOTER GRID
   .sf-footer-grid — flex row of footer columns
   ═══════════════════════════════════════════════════════════════ */

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

.sf-footer-grid > :first-child {
  flex: 2 1 200px;  /* brand column is wider */
}

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

/* Example: 4-column equal footer */
/*
.sf-footer-grid > * { flex: 1 1 200px; }
*/


/* ═══════════════════════════════════════════════════════════════
   10. CART SIDEBAR WIDTH
   ═══════════════════════════════════════════════════════════════ */

.cart-sidebar {
  width: 380px;     /* wider: 480px  narrower: 320px */
  max-width: 100vw;
}


/* ═══════════════════════════════════════════════════════════════
   11. RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════ */

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

  .sf-hero {
    min-height: 360px;
  }

  .sf-hero-content {
    padding: 48px 20px;
  }

  .sf-shop {
    padding: 24px 16px;
  }
}

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

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


/*
 * ─── TIPS ──────────────────────────────────────────────────────
 *
 *  • Keep file size under 1 MB
 *  • Avoid JavaScript or <script> tags — CSS only
 *  • Layouts work best when paired with a matching Theme
 *  • Test at multiple screen sizes before submitting
 *  • Use browser DevTools → Inspect on a live storefront
 *    to verify class names before overriding
 *
 * ─── SUBMIT ────────────────────────────────────────────────────
 *
 *  Ready? Head to /designer → Submit New → Layout
 *  Submitted layouts are reviewed before appearing in the
 *  marketplace. Typical review time: 1–3 business days.
 *
 * ───────────────────────────────────────────────────────────── */