/* Homepage only: compact category group, editorial rhythm and two designer cards. */
/* Warm page canvas; product cards and their media stay white. */
body[data-page="home"] {
  background: #f6f4ef;
}
body[data-page="home"] #shop-by-category,
body[data-page="home"] #whats-hot,
body[data-page="home"] #top-designer-picks {
  background: #f6f4ef;
}
body[data-page="home"] .card,
body[data-page="home"] .card .card-image,
body[data-page="home"] .card .card-image img,
body[data-page="home"] .card .card-image-wrap {
  background: #fff;
}

body[data-page="home"] #shop-by-category {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(30px, 4vw, 52px) clamp(16px, 3vw, 40px);
  background: #fff;
}
body[data-page="home"] #shop-by-category .ae-section-title {
  margin-bottom: 24px;
}
body[data-page="home"] #shop-by-category .ae-section-title h2 {
  font: 400 clamp(27px, 3vw, 38px) / 1.15 Georgia, serif;
  letter-spacing: -.035em;
}
body[data-page="home"] #shop-by-category .ae-department-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 3vw, 36px);
  padding: clamp(22px, 3vw, 34px) clamp(16px, 3vw, 36px);
  border: 1px solid #dfe8dd;
  border-radius: 24px;
  background: #f6f8f3;
}
body[data-page="home"] #shop-by-category .ae-department {
  text-align: center;
}
body[data-page="home"] #shop-by-category .ae-department > div {
  width: clamp(98px, 12vw, 148px);
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: #eeeee8;
  box-shadow: 0 0 0 5px #fff;
}
body[data-page="home"] #shop-by-category .ae-department img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
body[data-page="home"] #shop-by-category .ae-department[href="clothing.html"] img {
  object-position: 50% 28%;
}
body[data-page="home"] #shop-by-category .ae-department h3 {
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 15px;
  line-height: 1.35;
  margin: 18px 0 6px;
}
body[data-page="home"] #shop-by-category .ae-department p {
  max-width: 22ch;
  margin: 0 auto;
  font-size: 12px;
  line-height: 1.5;
}
body[data-page="home"] #shop-by-category .ae-department:focus-visible {
  outline: 3px solid #205d47;
  outline-offset: 8px;
  border-radius: 8px;
}
body[data-page="home"] #whats-new,
body[data-page="home"] #whats-hot,
body[data-page="home"] #top-designer-picks {
  padding-block: clamp(34px, 4.5vw, 64px);
}
body[data-page="home"] #whats-hot {
  background: #fff;
}
body[data-page="home"] #top-designer-picks {
  max-width: 1440px;
  background: #fff;
}
body[data-page="home"] #top-designer-picks .section-heading .ae-kicker {
  font-size: 10px;
  letter-spacing: .14em;
  margin: 0 0 10px;
}
body[data-page="home"] #top-designer-picks .pixs-designer-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
body[data-page="home"] #top-designer-picks .card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "image copy" "image actions";
  align-content: stretch;
}
body[data-page="home"] #top-designer-picks .card-image {
  grid-area: image;
  height: 100%;
  min-height: 280px;
  aspect-ratio: auto;
  border-bottom: 0;
}
body[data-page="home"] #top-designer-picks .card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body[data-page="home"] #top-designer-picks .card-text {
  grid-area: copy;
  padding: 22px 20px 8px;
}
body[data-page="home"] #top-designer-picks .card-text h3 {
  min-height: 0;
  font-size: 16px;
}
body[data-page="home"] #top-designer-picks .card-actions {
  grid-area: actions;
  padding: 14px 20px 20px;
}
body[data-page="home"] #top-designer-picks > .brand-logo-bar {
  margin-top: 30px;
  padding: 24px 0 0;
  border-bottom: 0;
}
body[data-page="home"] #delivery {
  border-top: 1px solid #dfe4d9;
}
body[data-page="home"] #delivery > #how-it-works-title {
  grid-column: 1 / -1;
  margin: 0 0 -18px;
}
body[data-page="home"] #delivery > #payment-methods {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  padding: 38px 0 0;
  gap: 40px;
  background: transparent;
}
body[data-page="home"] #delivery > #payment-methods h2 {
  font-size: clamp(28px, 3vw, 38px);
}
body[data-page="home"] #delivery > #faq {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  width: 100%;
  margin: 0;
  padding: 38px 0 0;
  background: transparent;
}
body[data-page="home"] #delivery > #faq h2 {
  font-size: clamp(28px, 3vw, 38px);
}
@media (max-width: 980px) {
  body[data-page="home"] #top-designer-picks .card {
    display: flex;
  }
  body[data-page="home"] #top-designer-picks .card-image {
    height: auto;
    min-height: 0;
    aspect-ratio: 1;
    border-bottom: 1px solid #eaebe5;
  }
}
@media (max-width: 760px) {
  body[data-page="home"] #top-designer-picks .pixs-designer-grid {
    gap: 12px;
  }
  body[data-page="home"] #top-designer-picks .card-text {
    padding: 14px 12px 6px;
  }
  body[data-page="home"] #top-designer-picks .card-text h3 {
    font-size: 13px;
  }
  body[data-page="home"] #top-designer-picks .card-actions {
    padding: 10px 12px 12px;
  }
  body[data-page="home"] #delivery > #how-it-works-title {
    margin: 30px 0 20px;
  }
  body[data-page="home"] #delivery > #payment-methods,
  body[data-page="home"] #delivery > #faq {
    margin-top: 34px;
    padding-top: 30px;
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
@media (max-width: 600px) {
  body[data-page="home"] #shop-by-category .ae-department-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
    padding: 26px 18px;
  }
  body[data-page="home"] #shop-by-category .ae-department > div {
    width: 108px;
  }
  body[data-page="home"] #shop-by-category .ae-department h3 {
    margin-top: 14px;
    font-size: 14px;
  }
  body[data-page="home"] #shop-by-category .ae-department p {
    font-size: 11px;
  }
}

/* Refined type scale and spacing for the home page only. */
body[data-page="home"] .pixs-hero-copy {
  padding-block: clamp(30px, 3.6vw, 52px) clamp(34px, 3.8vw, 54px);
}
body[data-page="home"] .pixs-hero-copy h1 {
  max-width: 12ch;
  font-size: clamp(42px, 6.2vw, 88px);
  line-height: 1;
  letter-spacing: -.055em;
  margin-bottom: clamp(16px, 2vw, 24px);
  white-space: normal;
}
body[data-page="home"] .pixs-hero-intro {
  max-width: 58ch;
  font-size: clamp(16px, 1.55vw, 22px);
  line-height: 1.55;
}
body[data-page="home"] .pixs-hero-categories {
  margin-block: clamp(14px, 1.7vw, 20px) clamp(18px, 2.2vw, 26px);
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.5;
}
body[data-page="home"] .pixs-hero-benefits {
  gap: clamp(14px, 2vw, 24px);
  padding: 14px 24px;
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.45;
}
body[data-page="home"] #shop-by-category .ae-section-title h2,
body[data-page="home"] .home-collection .section-heading h2,
body[data-page="home"] #delivery > #payment-methods h2,
body[data-page="home"] #delivery > #faq h2 {
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.12;
  letter-spacing: -.025em;
}
body[data-page="home"] #shop-by-category .ae-section-title {
  margin-bottom: clamp(18px, 2.3vw, 26px);
}
body[data-page="home"] #shop-by-category .ae-department h3 {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.35;
}
body[data-page="home"] #shop-by-category .ae-department p {
  font-size: clamp(12px, .95vw, 13px);
  line-height: 1.55;
}
body[data-page="home"] #whats-new,
body[data-page="home"] #whats-hot,
body[data-page="home"] #top-designer-picks {
  padding-block: clamp(32px, 4vw, 56px);
}
body[data-page="home"] #top-designer-picks .card-text h3 {
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.4;
}

@media (max-width: 760px) {
  body[data-page="home"] .pixs-hero-copy {
    padding: 30px 20px 34px;
  }
  body[data-page="home"] .pixs-hero-copy h1 {
    max-width: 11ch;
    font-size: clamp(40px, 8.5vw, 64px);
    margin-bottom: 16px;
  }
  body[data-page="home"] .pixs-hero-intro {
    max-width: 42ch;
    font-size: clamp(15px, 2.4vw, 17px);
  }
  body[data-page="home"] .pixs-hero-categories {
    margin-block: 14px 18px;
    font-size: 14px;
  }
  body[data-page="home"] .pixs-hero-benefits {
    max-width: 600px;
    padding: 13px 18px;
    font-size: 14px;
  }
  body[data-page="home"] #delivery > #payment-methods,
  body[data-page="home"] #delivery > #faq {
    gap: 20px;
  }
}

@media (max-width: 600px) {
  body[data-page="home"] #shop-by-category {
    padding: 32px 16px;
  }
  body[data-page="home"] #shop-by-category .ae-section-title h2,
  body[data-page="home"] .home-collection .section-heading h2,
  body[data-page="home"] #delivery > #payment-methods h2,
  body[data-page="home"] #delivery > #faq h2 {
    font-size: clamp(25px, 6.5vw, 31px);
    line-height: 1.15;
  }
  body[data-page="home"] #shop-by-category .ae-department-grid {
    gap: 24px 16px;
    padding: 24px 14px;
  }
  body[data-page="home"] #shop-by-category .ae-department > div {
    width: min(108px, 28vw);
  }
  body[data-page="home"] #shop-by-category .ae-department h3 {
    margin: 14px 0 5px;
    font-size: 14px;
  }
  body[data-page="home"] #shop-by-category .ae-department p {
    font-size: 12px;
  }
  body[data-page="home"] .home-collection {
    padding: 34px 16px;
  }
  body[data-page="home"] .home-collection .section-heading {
    margin-bottom: 18px;
  }
  body[data-page="home"] .home-collection .section-heading p {
    font-size: 14px;
    line-height: 1.55;
  }
  body[data-page="home"] .home-collection .product-grid {
    gap: 14px 12px;
  }
}

@media (max-width: 380px) {
  body[data-page="home"] .pixs-hero-copy h1 {
    font-size: 38px;
  }
  body[data-page="home"] .pixs-hero-benefits {
    padding-inline: 12px;
  }
  body[data-page="home"] #shop-by-category .ae-department-grid {
    gap: 22px 10px;
    padding-inline: 10px;
  }
}

/* Keep the campaign copy over the image's open right side on larger screens. */
@media (min-width: 1001px) {
  body[data-page="home"] .pixs-home-hero {
    position: relative;
    display: block;
    isolation: isolate;
    min-height: clamp(420px, 38vw, 760px);
    overflow: hidden;
    background: #f5f5f3;
  }
  body[data-page="home"] .pixs-home-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 1;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(250, 250, 248, 0), rgba(250, 250, 248, .94) 18%, #fafaf8 100%);
  }
  body[data-page="home"] .pixs-hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    object-fit: cover;
    object-position: center;
    z-index: 0;
  }
  body[data-page="home"] .pixs-hero-copy {
    position: absolute;
    inset: 0 clamp(18px, 4vw, 78px) 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 44%;
    max-width: 760px;
    padding: clamp(20px, 2.8vw, 52px);
    background: none;
    text-align: center;
    transform: none;
    z-index: 2;
  }
  body[data-page="home"] .pixs-hero-copy h1 {
    max-width: none;
    margin: 0 auto clamp(12px, 1.5vw, 22px);
    font-size: clamp(40px, 5.1vw, 98px);
    line-height: .98;
    letter-spacing: -.055em;
    white-space: normal;
  }
  body[data-page="home"] .pixs-hero-copy h1 span:before {
    background: #f4f3ef;
  }
  body[data-page="home"] .pixs-hero-intro {
    max-width: 58ch;
    margin: 0 auto;
    background: none;
    box-shadow: none;
    font-size: clamp(15px, 1.45vw, 22px);
    line-height: 1.45;
  }
  body[data-page="home"] .pixs-hero-categories {
    margin: clamp(12px, 1.5vw, 20px) auto clamp(14px, 1.8vw, 26px);
    background: none;
    box-shadow: none;
    font-size: clamp(13px, 1.25vw, 18px);
  }
  body[data-page="home"] .pixs-hero-benefits {
    max-width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
    font-size: clamp(13px, 1.3vw, 18px);
  }
}

body[data-page="home"] .pixs-hero-copy h1 span {
  display: inline-table;
}

/* These home sections sit on the shared warm page canvas; card surfaces remain white. */
body[data-page="home"] #shop-by-category,
body[data-page="home"] #whats-hot,
body[data-page="home"] #top-designer-picks {
  background: #f6f4ef;
}

/* Keep the circle category section on desktop; mobile uses the main menu. */
@media (max-width: 800px) {
  body[data-page="home"] #shop-by-category {
    display: none;
  }
}
