/* Fable 42 — site-wide layout fixes (home, about, pricing helpers) */

/* ── Home: category grid — padded, 2-up mobile, square image tiles ── */
html[data-f42-page="home"] .f42-home-cats-section {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Webflow Wrapper around category grid — side padding (Designer has 0 L/R) */
html[data-f42-page="home"] .f42-home-cats-wrapper {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(28px, 6vw, 56px) !important;
  padding-right: clamp(28px, 6vw, 56px) !important;
}

html[data-f42-page="home"] .f42-home-cats-wrapper .f42-home-cats-grid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: clamp(16px, 3vw, 28px);
}

html[data-f42-page="home"] .f42-home-cats-grid {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(28px, 6vw, 56px) !important;
  padding-right: clamp(28px, 6vw, 56px) !important;
  padding-top: 4px;
  padding-bottom: 12px;
  margin-top: clamp(16px, 3vw, 28px);
  gap: clamp(18px, 3vw, 28px) !important;
}

/* Grid lives on w-layout-layout only — never on the outer Wrapper */
html[data-f42-page="home"] .f42-home-cats-wrapper .w-layout-layout,
html[data-f42-page="home"] .w-layout-layout.f42-home-cats-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-rows: auto !important;
  grid-auto-flow: row !important;
  grid-template-areas: none !important;
  align-items: start !important;
  justify-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (min-width: 992px) {
  html[data-f42-page="home"] .f42-home-cats-wrapper .w-layout-layout,
  html[data-f42-page="home"] .w-layout-layout.f42-home-cats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

html[data-f42-page="home"] .f42-home-cats-wrapper .w-layout-layout > .w-layout-cell,
html[data-f42-page="home"] .w-layout-layout.f42-home-cats-grid > .w-layout-cell {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  justify-self: stretch !important;
  align-self: start !important;
}

html[data-f42-page="home"] .f42-home-cat-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  min-width: 0;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box;
  text-align: center;
}

html[data-f42-page="home"] .f42-home-cat-cell > a:not(.home-category-card),
html[data-f42-page="home"] .f42-home-cat-link:not(.home-category-card) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

html[data-f42-page="home"] .f42-home-cat-cell .f42-home-cat-visual {
  display: block;
  width: 100% !important;
  max-width: 100%;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: inherit;
  flex: 0 0 auto;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Square tiles — skip Webflow home-category-card (uses absolute img fill) */
html[data-f42-page="home"] .f42-home-cat-cell:not(:has(.home-category-card)) img,
html[data-f42-page="home"] .f42-home-cats-grid .w-layout-cell:not(:has(.home-category-card)) img {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center center;
  display: block;
  position: static !important;
}

html[data-f42-page="home"] .f42-home-cat-cell .f42-home-cat-visual img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center;
  display: block;
  aspect-ratio: auto !important;
}

/* Fallback: square tiles for shop category links even before JS classes land */
html[data-f42-page="home"] .f42-home-cats-grid a[href*="category="] img,
html[data-f42-page="home"] .f42-home-cats-grid a[href*="custom=1"] img,
html[data-f42-page="home"] .f42-home-cats-grid a[href*="filter=custom"] img {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  display: block;
}

/* ── Webflow native home category cards (home-category-card / overlay) ── */
html[data-f42-page="home"] .w-layout-cell:has(.home-category-card),
html[data-f42-page="home"] .f42-home-cat-cell:has(.home-category-card) {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

html[data-f42-page="home"] a.home-category-card,
html[data-f42-page="home"] .home-category-card {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  flex: none !important;
}

html[data-f42-page="home"] a.home-category-card::before,
html[data-f42-page="home"] .home-category-card::before {
  display: none !important;
  padding-top: 0 !important;
  content: none !important;
}

html[data-f42-page="home"] .home-category-card > img,
html[data-f42-page="home"] .home-category-card img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  aspect-ratio: auto !important;
}

html[data-f42-page="home"] .home-category-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2;
  pointer-events: none;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  html[data-f42-page="home"] .f42-home-cats-wrapper {
    padding-left: clamp(24px, 7vw, 40px) !important;
    padding-right: clamp(24px, 7vw, 40px) !important;
  }

  html[data-f42-page="home"] .f42-home-cats-grid:not(.f42-home-cats-wrapper .f42-home-cats-grid) {
    padding-left: clamp(24px, 7vw, 40px) !important;
    padding-right: clamp(24px, 7vw, 40px) !important;
  }

  html[data-f42-page="home"] .f42-home-cats-grid.w-layout-layout,
  html[data-f42-page="home"] .f42-home-cats-wrapper .w-layout-layout {
    gap: clamp(14px, 4vw, 22px) !important;
  }
}

/* Keep site nav out of home category layout rules */
html[data-f42-page="home"] .w-nav .f42-home-cat-cell,
html[data-f42-page="home"] .w-nav-menu .f42-home-cat-cell,
html[data-f42-page="home"] header .f42-home-cats-grid {
  display: revert !important;
  grid-template-columns: revert !important;
  gap: revert !important;
  padding: revert !important;
  aspect-ratio: auto !important;
}

/* Mobile full-screen nav — single column, consistent alignment */
@media (max-width: 991px) {
  .w-nav-overlay .w-nav-menu {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 72px 28px 40px !important;
    box-sizing: border-box !important;
    grid-template-columns: none !important;
  }

  .w-nav-overlay .w-nav-item {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .w-nav-overlay .w-nav-link {
    display: block !important;
    width: 100% !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    text-align: left !important;
    text-indent: 0 !important;
    white-space: normal !important;
  }

  .w-nav-overlay .w-nav-menu .w-nav-menu {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    position: static !important;
    width: 100% !important;
    padding: 0 0 0 18px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }

  .w-nav-overlay .w-nav-menu .w-nav-menu .w-nav-link {
    padding: 10px 0 !important;
    opacity: 0.95;
  }
}

/* ── Home: hero subcopy side padding ── */
html[data-f42-page="home"] .f42-hero-block {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(32px, 8vw, 72px) !important;
  padding-right: clamp(32px, 8vw, 72px) !important;
}

html[data-f42-page="home"] .f42-hero-sub-section {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(32px, 8vw, 72px) !important;
  padding-right: clamp(32px, 8vw, 72px) !important;
}

html[data-f42-page="home"] .f42-hero-sub,
html[data-f42-page="home"] [data-f42-hero-sub="true"] {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 36em !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(32px, 8vw, 72px) !important;
  padding-right: clamp(32px, 8vw, 72px) !important;
}

@media (max-width: 767px) {
  html[data-f42-page="home"] .f42-hero-block,
  html[data-f42-page="home"] .f42-hero-sub-section,
  html[data-f42-page="home"] .f42-hero-sub,
  html[data-f42-page="home"] [data-f42-hero-sub="true"] {
    padding-left: clamp(28px, 8vw, 48px) !important;
    padding-right: clamp(28px, 8vw, 48px) !important;
  }
}

/* ── Home: "Why Independent Matters" stats block ── */
html[data-f42-page="home"] .f42-home-why-section {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-top: clamp(40px, 7vw, 80px) !important;
  padding-bottom: clamp(56px, 9vw, 112px) !important;
  padding-left: clamp(28px, 6vw, 56px) !important;
  padding-right: clamp(28px, 6vw, 56px) !important;
}

html[data-f42-page="home"] .f42-home-why-section .w-layout-layout {
  gap: clamp(28px, 4vw, 48px) !important;
  row-gap: clamp(32px, 5vw, 56px) !important;
}

html[data-f42-page="home"] .f42-home-why-section .w-layout-cell {
  min-width: 0;
}

html[data-f42-page="home"] .f42-home-why-section h1,
html[data-f42-page="home"] .f42-home-why-section h2,
html[data-f42-page="home"] .f42-home-why-section h3 {
  margin-bottom: clamp(16px, 3vw, 28px) !important;
}

html[data-f42-page="home"] .f42-home-why-section p {
  margin-bottom: clamp(20px, 3vw, 32px);
  line-height: 1.5;
}

/* ── Home: "Meet the Designers" carousel section ── */
html[data-f42-page="home"] #f42-feat-outer {
  padding-top: clamp(32px, 5vw, 56px) !important;
  padding-bottom: clamp(48px, 7vw, 88px) !important;
  margin-top: clamp(8px, 2vw, 24px);
}

html[data-f42-page="home"] #f42-feat-outer .f42-feat-header,
html[data-f42-page="home"] #f42-feat-outer #f42-feat-header {
  margin-bottom: clamp(36px, 5vw, 56px) !important;
}

html[data-f42-page="home"] #f42-feat-outer .f42-feat-title,
html[data-f42-page="home"] #f42-feat-outer #f42-feat-title {
  margin-bottom: clamp(14px, 2.5vw, 22px) !important;
}

html[data-f42-page="home"] #f42-feat-outer .f42-feat-viewport {
  margin-top: clamp(8px, 2vw, 16px);
}

html[data-f42-page="home"] #f42-feat-dots {
  margin-top: clamp(24px, 4vw, 36px) !important;
}

/* ── About: keep founder photo from stretching tall on mobile ── */
html[data-f42-page="about"] .f42-about-founder {
  max-width: min(100%, 360px);
  margin-left: auto;
  margin-right: auto;
}

html[data-f42-page="about"] .f42-about-founder-img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: 440px;
  object-fit: cover;
  object-position: center top;
  aspect-ratio: auto !important;
}

/* ── Pricing: long CTA labels (e.g. Apply to join the marketplace) ── */
@media (max-width: 767px) {
  html[data-f42-page="pricing"] .f42-pricing-tab-scroll {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    padding: 4px 16px 12px !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    scrollbar-width: none;
  }

  html[data-f42-page="pricing"] .f42-pricing-tab-scroll::-webkit-scrollbar {
    display: none;
  }

  html[data-f42-page="pricing"] .f42-pricing-tab-scroll [data-plan],
  html[data-f42-page="pricing"] .f42-pricing-tab-scroll .w-tab-link {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }

  html[data-f42-page="pricing"] .w-button,
  html[data-f42-page="pricing"] a.button,
  html[data-f42-page="pricing"] a[href*="/dashboard/apply"],
  html[data-f42-page="pricing"] a[href*="/sign-up"] {
    max-width: 100%;
    white-space: normal !important;
    line-height: 1.35 !important;
    padding: 12px 18px !important;
    font-size: 15px !important;
    text-align: center;
    hyphens: auto;
    box-sizing: border-box;
  }
}

/* ── Footer: tablet/mobile stack order (overrides Webflow grid placement) ── */
@media screen and (max-width: 991px) {
  .footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
    column-gap: 20px !important;
    row-gap: 40px !important;
  }

  .footer > * {
    grid-area: unset !important;
    min-width: 0 !important;
  }

  .footer > .footer-slogan {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .footer > .footer-link-left {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .footer > .footer-link-right {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .footer > .footer-contact {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .footer > .cus {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: 100% !important;
  }

  .footer > .footer-legal {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    width: 100% !important;
  }
}