/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║          TORVALI LAYOUT — MAISON LUXE EDITION                ║
 * ║  A high-fashion editorial layout built for modern luxury     ║
 * ║  storefronts. Wide breathing room, portrait cards, cinematic ║
 * ║  hero, and asymmetric section rhythm.                        ║
 * ╚══════════════════════════════════════════════════════════════╝
 */


/* ═══════════════════════════════════════════════════════════════
   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
   Wide cinema-format container for an expansive luxe feel.
   ═══════════════════════════════════════════════════════════════ */

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


/* ═══════════════════════════════════════════════════════════════
   2. NAVIGATION
   Slim, understated nav — logo left, actions right, search floating
   ═══════════════════════════════════════════════════════════════ */

.sf-nav-inner {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 32px;
  position: relative;
}

/* Search centered in nav for editorial balance */
.sf-search {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  max-width: 360px;
}

/* Nav right cluster */
.sf-nav-right {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}


/* ═══════════════════════════════════════════════════════════════
   3. HERO SECTION
   Cinematic full-bleed banner — tall, text left-anchored,
   image fills the right half via background.
   ═══════════════════════════════════════════════════════════════ */

.sf-hero {
  min-height: 680px;
  display: flex;
  align-items: flex-end;   /* text anchors to bottom for drama */
}

.sf-hero-content {
  padding: 80px 48px 96px;
  max-width: 720px;        /* left half — let image breathe on right */

  /* Uncomment for centered layout:
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  */
}

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

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


/* ═══════════════════════════════════════════════════════════════
   4. CATEGORY BAR
   Spread evenly across the page — no overflow scroll on desktop
   ═══════════════════════════════════════════════════════════════ */

.sf-cats-inner {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 0 48px;
  scrollbar-width: none;
  justify-content: flex-start;
}

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

.sf-cat-btn {
  padding: 16px 24px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.06em;  /* spaced-out labels feel premium */
}


/* ═══════════════════════════════════════════════════════════════
   5. PRODUCT GRID
   4-column refined grid on desktop; generous gutters.
   Portrait cards (4/5) read as editorial fashion imagery.
   ═══════════════════════════════════════════════════════════════ */

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

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

  /* Alternative options — uncomment one:

  3-column editorial (larger images):
  grid-template-columns: repeat(3, 1fr);

  2-column feature spread:
  grid-template-columns: repeat(2, 1fr);

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

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

/* First card spans 2 columns — hero product spotlight */
.sf-product-card:first-child {
  grid-column: span 2;
}

.sf-product-card:first-child .sf-product-img {
  aspect-ratio: 8 / 5;  /* wider landscape for the hero card */
}

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


/* ═══════════════════════════════════════════════════════════════
   6. PRODUCT CARD PROPORTIONS
   Portrait 4/5 — the industry standard for luxury fashion retail
   ═══════════════════════════════════════════════════════════════ */

.sf-product-img {
  aspect-ratio: 4 / 5;   /* portrait — fashion editorial standard */
  /* aspect-ratio: 1 / 1;  square */
  /* aspect-ratio: 16 / 9; landscape/banner */
  overflow: hidden;
}

.sf-product-info {
  padding: 18px 4px 24px; /* less horizontal padding — clean edge alignment */
}


/* ═══════════════════════════════════════════════════════════════
   7. SHOP SECTION SPACING
   Generous vertical rhythm; header has a refined split layout
   ═══════════════════════════════════════════════════════════════ */

.sf-shop {
  padding: 56px 48px 80px;
}

.sf-shop-header {
  display: flex;
  align-items: flex-end;      /* bottom-align for editorial typographic feel */
  justify-content: space-between;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 16px;
}


/* ═══════════════════════════════════════════════════════════════
   8. FEATURED / SECTIONS AREA
   Full-width band with generous vertical padding
   ═══════════════════════════════════════════════════════════════ */

.sf-featured {
  padding: 80px 48px;
}

.sf-section-title {
  font-size: 1.5rem;
  font-weight: 300;            /* light weight reads as understated luxury */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 36px;
}


/* ═══════════════════════════════════════════════════════════════
   9. FOOTER GRID
   4-column footer with wide brand column
   ═══════════════════════════════════════════════════════════════ */

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

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

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


/* ═══════════════════════════════════════════════════════════════
   10. CART SIDEBAR WIDTH
   Generous sidebar — room for upsells and editorial copy
   ═══════════════════════════════════════════════════════════════ */

.cart-sidebar {
  width: 480px;
  max-width: 100vw;
}


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

@media (max-width: 1280px) {
  .sf-products {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 20px;
  }

  .sf-product-card:first-child {
    grid-column: span 2;
  }

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

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

  .sf-product-card:first-child {
    grid-column: span 2;
  }

  .sf-hero {
    min-height: 520px;
    align-items: center;
  }

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

  /* Return search to inline on tablet */
  .sf-search {
    position: static;
    transform: none;
    flex: 1;
    max-width: 320px;
    width: auto;
  }

  .sf-shop {
    padding: 40px 36px 60px;
  }
}

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

  .sf-product-card:first-child {
    grid-column: span 2;
  }

  .sf-hero {
    min-height: 440px;
    align-items: flex-end;
  }

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

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

  .sf-shop {
    padding: 32px 24px 48px;
  }

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

  .sf-cats-inner {
    padding: 0 24px;
  }
}

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

  .sf-product-card:first-child {
    grid-column: span 2;
  }

  .sf-product-img {
    aspect-ratio: 3 / 4;  /* slightly taller on mobile for thumb visibility */
  }

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

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

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

  .sf-search {
    display: none; /* hide search from nav on small screens; surface elsewhere */
  }

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


/*
 * ─── TIPS ──────────────────────────────────────────────────────
 *
 *  MAISON LUXE layout notes:
 *
 *  • Hero card (first .sf-product-card) spans 2 columns —
 *    swap it with a seasonal hero product for max impact
 *
 *  • Pair this layout with a monochromatic Theme (ivory/charcoal
 *    or black/gold) for full luxury effect
 *
 *  • .sf-section-title uses letter-spacing + uppercase +
 *    light weight — keep that trio in your Theme file
 *
 *  • The centered absolute-position search bar in the nav
 *    works best on viewports ≥ 960px; it gracefully falls
 *    back to inline on tablet/mobile
 *
 * ─── SUBMIT ────────────────────────────────────────────────────
 *
 *  Ready? Head to /designer → Submit New → Layout
 *  Submitted layouts are reviewed before appearing in the
 *  marketplace. Typical review time: 1–3 business days.
 *
 * ───────────────────────────────────────────────────────────── */