/*
 * Impeccable page-family layouts.
 * These rules deliberately vary topology by content instead of cloning cards.
 */

:is(
  body.fs-template-solutions,
  body.fs-template-solutions-consignment,
  body.fs-template-solutions-distribution-network,
  body.fs-template-solutions-dropship,
  body.fs-template-solutions-supplier-portal,
  body.fs-template-technology,
  body.fs-template-technology-order-agent,
  body.fs-template-technology-smart-wms
) {
  --imp-line: #eadede;
  --imp-copy: #4a4141;
  --imp-muted: #f8f7f7;
  --imp-red-soft: #fff2f2;
}

:is(
  body.fs-template-solutions,
  body.fs-template-solutions-consignment,
  body.fs-template-solutions-distribution-network,
  body.fs-template-solutions-dropship,
  body.fs-template-solutions-supplier-portal,
  body.fs-template-technology-order-agent,
  body.fs-template-technology-smart-wms
) > section:not(:first-of-type) .text-center:has(> .eyebrow) {
  display: flex;
  width: min(100%, 48rem);
  flex-direction: column;
  align-items: center;
  margin-inline: auto;
  text-align: center;
}

:is(
  body.fs-template-solutions,
  body.fs-template-solutions-consignment,
  body.fs-template-solutions-distribution-network,
  body.fs-template-solutions-dropship,
  body.fs-template-solutions-supplier-portal,
  body.fs-template-technology-order-agent,
  body.fs-template-technology-smart-wms
) > section:not(:first-of-type) .text-center:has(> .eyebrow) > :is(.eyebrow, h2, p) {
  margin-inline: auto;
  text-align: center;
}

/* Solutions hub: navigable directory, not an equal card matrix. */
@media (min-width: 1024px) {
  body.fs-template-solutions #main-content > section:nth-of-type(2) .grid.xl\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-block: 1px solid var(--imp-line);
  }

  body.fs-template-solutions #main-content > section:nth-of-type(2) .grid.xl\:grid-cols-4 > a {
    min-height: 13rem;
    padding: 2rem;
    border: 0;
    border-bottom: 1px solid var(--imp-line);
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
  }

  body.fs-template-solutions #main-content > section:nth-of-type(2) .grid.xl\:grid-cols-4 > a:nth-child(even) {
    border-left: 1px solid var(--imp-line);
  }

  body.fs-template-solutions #main-content > section:nth-of-type(2) .grid.xl\:grid-cols-4 > a:hover {
    background: var(--imp-red-soft);
    box-shadow: none;
    transform: none;
  }
}

body.fs-template-solutions #main-content > section:nth-of-type(3) .grid.md\:grid-cols-3 {
  gap: 0;
  border-block: 1px solid var(--imp-line);
}

body.fs-template-solutions #main-content > section:nth-of-type(3) .grid.md\:grid-cols-3 > div {
  padding: 2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Consignment: three concerns carry equal visual weight. */
@media (min-width: 768px) {
  body.fs-template-solutions-consignment #main-content > section:nth-of-type(2) .grid.md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.5rem;
  }

  body.fs-template-solutions-consignment #main-content > section:nth-of-type(2) .grid.md\:grid-cols-3 > article {
    display: flex;
    min-height: 0;
    flex-direction: column;
    justify-content: flex-start;
  }

  body.fs-template-solutions-consignment #main-content > section:nth-of-type(2) .grid.md\:grid-cols-3 > article:first-child {
    background: var(--imp-red-soft);
  }

  body.fs-template-solutions-consignment #main-content > section:nth-of-type(4) .grid.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-block: 1px solid var(--imp-line);
  }

  body.fs-template-solutions-consignment #main-content > section:nth-of-type(4) .grid.md\:grid-cols-2.lg\:grid-cols-3 > div {
    padding: 2rem;
    border: 0;
    border-bottom: 1px solid var(--imp-line);
    border-radius: 0;
    background: transparent;
  }

  body.fs-template-solutions-consignment #main-content > section:nth-of-type(4) .grid.md\:grid-cols-2.lg\:grid-cols-3 > div:nth-child(even) {
    border-left: 1px solid var(--imp-line);
  }
}

body.fs-template-solutions-consignment .fs-consignment-workflow {
  color: var(--fs-inner-ink);
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(214, 0, 1, .05) 0%, transparent 70%),
    #ffffff !important;
}

body.fs-template-solutions-consignment .fs-consignment-workflow__pattern {
  background-image: url("../Patterns/1.webp");
  background-position: center;
  background-size: 15rem;
  opacity: .035;
}

body.fs-template-solutions-consignment .fs-consignment-workflow .eyebrow {
  color: var(--fs-inner-red) !important;
}

body.fs-template-solutions-consignment .fs-consignment-workflow :is(h2, h3) {
  color: var(--fs-inner-ink) !important;
}

body.fs-template-solutions-consignment .fs-consignment-workflow :is(.text-gray-600, p) {
  color: #4b4548 !important;
}

body.fs-template-solutions-consignment .fs-consignment-workflow__step {
  border-color: var(--fs-inner-line);
}

/* Dropship: compact obstacles and an explicit fulfillment timeline. */
body.fs-template-solutions-dropship #main-content > section:nth-of-type(2) .grid.md\:grid-cols-3 {
  gap: 0;
  border-block: 1px solid var(--imp-line);
}

body.fs-template-solutions-dropship #main-content > section:nth-of-type(2) .grid.md\:grid-cols-3 > article {
  padding: 2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.fs-template-solutions-dropship #main-content > section:nth-of-type(3) .max-w-3xl.space-y-2 {
  position: relative;
}

body.fs-template-solutions-dropship #main-content > section:nth-of-type(3) .max-w-3xl.space-y-2::before {
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 1.5rem;
  width: 1px;
  background: rgb(255 255 255 / .18);
  content: "";
}

body.fs-template-solutions-dropship #main-content > section:nth-of-type(3) .max-w-3xl.space-y-2 > div {
  position: relative;
  padding-block: 1.5rem;
}

body.fs-template-solutions-dropship .fs-dropship-workflow {
  color: var(--fs-inner-ink);
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(214, 0, 1, .05) 0%, transparent 70%),
    #fff !important;
}

body.fs-template-solutions-dropship .fs-dropship-workflow__pattern {
  background-image: url("../Patterns/1.webp");
  background-position: center;
  background-size: 15rem;
  opacity: .035;
}

body.fs-template-solutions-dropship .fs-dropship-workflow .eyebrow {
  color: var(--fs-inner-red) !important;
}

body.fs-template-solutions-dropship .fs-dropship-workflow :is(h2, h3) {
  color: var(--fs-inner-ink) !important;
}

body.fs-template-solutions-dropship .fs-dropship-workflow p {
  color: #4b4548 !important;
}

body.fs-template-solutions-dropship .fs-dropship-workflow__step {
  border-color: var(--fs-inner-line) !important;
}

body.fs-template-solutions-dropship .fs-dropship-workflow .max-w-3xl.space-y-2::before {
  background: #ecd6d6;
}

@media (min-width: 768px) {
  body.fs-template-solutions-dropship #main-content > section:nth-of-type(4) .grid.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  body.fs-template-solutions-dropship #main-content > section:nth-of-type(4) .grid.md\:grid-cols-2.lg\:grid-cols-3 > div:nth-child(3n) {
    grid-column: span 2;
  }
}

/* Distribution: map is the hero of the body; support facts become open ledgers. */
body.fs-template-solutions-distribution-network #main-content > section:nth-of-type(2) .grid.md\:grid-cols-3,
body.fs-template-solutions-distribution-network #main-content > section:nth-of-type(4) .grid.md\:grid-cols-3 {
  gap: 0;
  border-block: 1px solid var(--imp-line);
}

body.fs-template-solutions-distribution-network #main-content > section:nth-of-type(2) .grid.md\:grid-cols-3 > article,
body.fs-template-solutions-distribution-network #main-content > section:nth-of-type(4) .grid.md\:grid-cols-3 > div {
  padding: 2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

@media (min-width: 1024px) {
  body.fs-template-solutions-distribution-network #main-content > section:nth-of-type(3) .grid.md\:grid-cols-2 {
    grid-template-columns: minmax(0, 1.3fr) minmax(18rem, .7fr);
    gap: 3rem;
  }
}

/* Supplier Portal: feature register with enough density for a dashboard product. */
@media (min-width: 768px) {
  body.fs-template-solutions-supplier-portal #main-content > section:nth-of-type(2) .grid.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-block: 1px solid var(--imp-line);
  }

  body.fs-template-solutions-supplier-portal #main-content > section:nth-of-type(2) .grid.md\:grid-cols-2.lg\:grid-cols-3 > div {
    padding: 2rem;
    border: 0;
    border-bottom: 1px solid var(--imp-line);
    border-radius: 0;
    background: transparent;
  }

  body.fs-template-solutions-supplier-portal #main-content > section:nth-of-type(2) .grid.md\:grid-cols-2.lg\:grid-cols-3 > div:nth-child(even) {
    border-left: 1px solid var(--imp-line);
  }
}

/* Technology hub: alternate real artifacts with generous but varied rhythm. */
body.fs-template-technology #main-content > section:nth-of-type(2) {
  padding-block: clamp(5rem, 8vw, 7rem);
}

body.fs-template-technology #main-content > section:nth-of-type(3) {
  padding-block: clamp(4rem, 6vw, 6rem);
}

body.fs-template-technology #main-content > section:nth-of-type(4) {
  padding-block: clamp(6rem, 9vw, 8rem);
}

body.fs-template-technology #main-content > section:not(:first-of-type):not(:last-of-type) .grid.lg\:grid-cols-2 {
  column-gap: clamp(3rem, 8vw, 7rem);
}

/* OrderAgent: sequence and channel registry, not two repeated card grids. */
@media (min-width: 768px) {
  body.fs-template-technology-order-agent #main-content > section:nth-of-type(2) .grid.md\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-block: 1px solid var(--imp-line);
  }

  body.fs-template-technology-order-agent #main-content > section:nth-of-type(2) .grid.md\:grid-cols-4 > div {
    min-height: 11rem;
    padding: 2rem;
    border-bottom: 1px solid var(--imp-line);
  }

  body.fs-template-technology-order-agent #main-content > section:nth-of-type(3) .grid.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-block: 1px solid var(--imp-line);
  }

  body.fs-template-technology-order-agent #main-content > section:nth-of-type(3) .grid.md\:grid-cols-2.lg\:grid-cols-4 > div {
    padding: 2rem;
    border: 0;
    border-bottom: 1px solid var(--imp-line);
    border-radius: 0;
    background: transparent;
  }
}

body.fs-template-technology-order-agent #main-content > section:nth-of-type(4) > div > .bg-brand-ink,
body.fs-template-technology-smart-wms #main-content > section:nth-of-type(3) > div > .bg-brand-ink {
  border-radius: 1rem;
  box-shadow: none;
}

/* Smart WMS: one lead automation capability, two supporting controls. */
@media (min-width: 768px) {
  body.fs-template-technology-smart-wms #main-content > section:nth-of-type(2) .grid.md\:grid-cols-3 {
    grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, .9fr));
    gap: 1rem;
  }

  body.fs-template-technology-smart-wms #main-content > section:nth-of-type(2) .grid.md\:grid-cols-3 > div:first-child {
    padding: 2.5rem;
    background: var(--imp-red-soft);
  }
}

@media (max-width: 767px) {
  :is(
    body.fs-template-solutions,
    body.fs-template-solutions-consignment,
    body.fs-template-solutions-distribution-network,
    body.fs-template-solutions-dropship,
    body.fs-template-solutions-supplier-portal,
    body.fs-template-technology-order-agent
  ) > section:not(:first-of-type) :is(.grid, [class*="space-y"]) > :is(article, div, a) {
    min-height: 0;
  }
}

/* Requested card treatment for the named Consignment, Dropship, and Distribution sections. */
body.fs-template-solutions-consignment #main-content > section:nth-of-type(2) .fs-clean-card-grid {
  gap: clamp(1rem, 2vw, 1.5rem) !important;
}

body.fs-template-solutions-consignment #main-content > section:nth-of-type(4) .grid.md\:grid-cols-2.lg\:grid-cols-3 {
  gap: clamp(1rem, 2vw, 1.5rem) !important;
  border: 0;
}

body.fs-template-solutions-consignment #main-content > section:nth-of-type(4) .grid.md\:grid-cols-2.lg\:grid-cols-3 > article {
  border: 0 !important;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 8px rgb(28 20 21 / .07);
}

body.fs-template-solutions-dropship #main-content > section:nth-of-type(2) .fs-clean-card-grid {
  gap: clamp(1rem, 2vw, 1.5rem) !important;
  border: 0;
}

body.fs-template-solutions-dropship #main-content > section:nth-of-type(2) .fs-clean-card-grid > article {
  border: 0 !important;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 8px rgb(28 20 21 / .07);
}

body.fs-template-solutions-distribution-network #main-content > section:nth-of-type(4) .fs-clean-card-grid {
  gap: clamp(1rem, 2vw, 1.5rem) !important;
  border: 0;
  border-block: 0 !important;
}

body.fs-template-solutions-distribution-network #main-content > section:nth-of-type(4) .fs-clean-card-grid > article {
  border: 0 !important;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 8px rgb(28 20 21 / .07);
}

body.fs-template-technology-smart-wms .fs-wms-results__copy :is(h2, p),
body.fs-template-technology-smart-wms .fs-wms-results__metric :is(p, .heading-brand) {
  color: #fff !important;
}

@media (min-width: 768px) {
  body.fs-template-solutions-consignment #main-content > section:nth-of-type(2) .fs-clean-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  body.fs-template-solutions-consignment #main-content > section:nth-of-type(4) .grid.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}