@layer home {
  .home-main { overflow: hidden; }
  .home-eyebrow { margin-block-end: .75rem; color: var(--sab-color-mauve); font-size: .76rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
  [dir="rtl"] .home-eyebrow { letter-spacing: 0; }
  .home-section { padding-block: var(--sab-space-6); }
  .home-section__head { max-inline-size: 46rem; margin-block-end: clamp(2rem, 5vw, 3.5rem); }
  .home-section__head h2 { margin: 0; }
  .home-section__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sab-space-4); max-inline-size: none; }
  .home-section__head--row > div > *:last-child { margin-block-end: 0; }
  .home-section__head--row > a { color: var(--sab-color-aubergine); font-size: var(--sab-step--1); font-weight: 650; text-underline-offset: .35em; }
  .home-button { display: inline-flex; align-items: center; justify-content: center; min-block-size: 3rem; border: 1px solid transparent; border-radius: var(--sab-radius-sm); padding: .72rem 1.25rem; font-size: var(--sab-step--1); font-weight: 680; text-decoration: none; transition: background var(--sab-duration), color var(--sab-duration), border-color var(--sab-duration); }
  .home-button--primary { background: var(--sab-color-plum); color: white; }
  .home-button--primary:hover { background: var(--sab-color-aubergine); color: white; }
  .home-button--secondary { border-color: currentColor; background: transparent; color: var(--sab-color-aubergine); }
  .home-button--secondary:hover { background: var(--sab-color-aubergine); color: white; }
  .home-button--light { background: white; color: var(--sab-color-aubergine); }
  .home-button--light:hover { background: var(--sab-color-blush); color: var(--sab-color-aubergine); }

  .home-hero { position: relative; display: grid; min-block-size: clamp(39rem, 78vh, 52rem); background: var(--sab-color-blush); }
  .home-hero::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(36 16 45 / 78%) 0%, rgb(36 16 45 / 48%) 42%, transparent 72%); content: ""; }
  [dir="rtl"] .home-hero::after { background: linear-gradient(-90deg, rgb(36 16 45 / 78%) 0%, rgb(36 16 45 / 48%) 42%, transparent 72%); }
  .home-hero__image { position: absolute; inset: 0; }
  .home-hero__image img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 62% 28%; }
  .home-hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-inline-size: var(--sab-container); color: white; }
  .home-hero__content > * { max-inline-size: 38rem; }
  .home-hero__content h1 { margin-block-end: var(--sab-space-4); color: white; font-family: Georgia, var(--sab-font-arabic), serif; font-size: clamp(2.5rem, 6vw, 5.25rem); font-weight: 500; }
  :lang(ar) .home-hero__content h1 { font-family: var(--sab-font-arabic); font-weight: 650; }
  .home-hero__content > p:not(.home-eyebrow) { max-inline-size: 33rem; font-size: clamp(1rem, 1.5vw, 1.22rem); }
  .home-hero .home-eyebrow { color: #f2c9dd; }
  .home-actions { display: flex; flex-wrap: wrap; gap: var(--sab-space-2); margin-block-start: var(--sab-space-3); }
  .home-hero .home-button--primary { background: white; color: var(--sab-color-aubergine); }
  .home-hero .home-button--secondary { border-color: white; color: white; }

  .home-trust { background: white; border-block: 1px solid rgb(50 26 61 / 8%); }
  .home-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
  .home-trust__grid > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .75rem; min-block-size: 6rem; padding: var(--sab-space-3) var(--sab-space-4); }
  .home-trust__grid > div + div { border-inline-start: 1px solid rgb(50 26 61 / 10%); }
  .home-trust strong { color: var(--sab-color-mauve); font-family: Georgia, serif; font-size: 1.4rem; }
  .home-trust span { font-size: var(--sab-step--1); }

  .category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sab-space-3); }
  .category-card { position: relative; min-inline-size: 0; overflow: hidden; background: var(--sab-color-blush); }
  .category-card > a { color: inherit; text-decoration: none; }
  .category-card img { inline-size: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 500ms ease; }
  .category-card:hover img { transform: scale(1.025); }
  .category-card div { position: absolute; inset-inline: var(--sab-space-3); inset-block-end: var(--sab-space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--sab-space-2); background: rgb(252 250 248 / 92%); padding: .8rem 1rem; backdrop-filter: blur(8px); }
  .category-card h3 { margin: 0; font-size: .94rem; }
  [dir="rtl"] .category-card div span { transform: rotate(180deg); }

  .home-products { background: white; }
  .home-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.8rem, 2vw, 1.5rem); }
  .home-product-card { min-inline-size: 0; }
  .home-product-card__image { position: relative; display: block; overflow: hidden; background: var(--sab-color-blush); }
  .home-product-card__image img { inline-size: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 450ms ease; }
  .home-product-card:hover .home-product-card__image img { transform: scale(1.02); }
  .home-product-card__badge { position: absolute; inset-block-start: .75rem; inset-inline-start: .75rem; background: var(--sab-color-mauve); color: white; padding: .3rem .55rem; font-size: .68rem; font-weight: 700; }
  .home-product-card__body { padding-block: var(--sab-space-3); }
  .home-product-card h3 { margin-block-end: .4rem; font-size: 1rem; }
  .home-product-card h3 a { color: var(--sab-color-charcoal); text-decoration: none; }
  .home-product-card__price { color: var(--sab-color-aubergine); font-weight: 680; }
  .home-product-card__price del { color: var(--sab-color-muted); font-weight: 400; }
  .home-product-card__view { display: inline-block; margin-block-start: .65rem; font-size: .78rem; }

  .home-editorial { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .9fr); align-items: stretch; margin-block: var(--sab-space-6); background: var(--sab-color-blush); }
  .home-editorial__image img { inline-size: 100%; block-size: 100%; max-block-size: 44rem; object-fit: cover; object-position: center 28%; }
  .home-editorial__copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(2rem, 7vw, 6rem); }
  .home-editorial__copy h2 { font-family: Georgia, var(--sab-font-arabic), serif; font-weight: 500; }
  .home-editorial__copy .home-button { margin-block-start: var(--sab-space-3); }

  .occasion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sab-space-3); }
  .occasion-grid article { position: relative; overflow: hidden; background: var(--sab-color-aubergine); }
  .occasion-grid img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; opacity: .82; }
  .occasion-grid h3 { position: absolute; inset-inline: var(--sab-space-3); inset-block-end: var(--sab-space-3); margin: 0; color: white; font-family: Georgia, var(--sab-font-arabic), serif; font-size: var(--sab-step-1); font-weight: 500; }

  .home-abaya { background: var(--sab-color-plum); color: white; }
  .home-abaya__inner { display: grid; grid-template-columns: 1fr minmax(18rem, .72fr); align-items: center; gap: clamp(2rem, 7vw, 7rem); }
  .home-abaya__inner > div { padding-block: var(--sab-space-6); }
  .home-abaya h2 { color: white; font-family: Georgia, var(--sab-font-arabic), serif; font-weight: 500; }
  .home-abaya .home-eyebrow { color: #e6b4cf; }
  .home-abaya img { inline-size: 100%; max-block-size: 39rem; object-fit: cover; object-position: center 25%; }
  .home-abaya .home-button { margin-block-start: var(--sab-space-3); border-color: white; color: white; }

  .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sab-space-5); }
  .service-grid > div { border-block-start: 1px solid var(--sab-color-mauve); padding-block-start: var(--sab-space-4); }
  .service-grid span { color: var(--sab-color-mauve); font-size: .75rem; font-weight: 750; }
  .service-grid h3 { margin-block: .65rem; }
  .service-grid p { color: var(--sab-color-muted); }

  .home-instagram { background: var(--sab-color-blush); }
  .instagram-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
  .instagram-grid img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; }

  .home-boutique { padding-block: var(--sab-space-6); background: white; }
  .home-boutique__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr); align-items: center; gap: clamp(2rem, 7vw, 7rem); }
  .home-boutique__images { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sab-space-3); }
  .home-boutique__images img { inline-size: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
  .home-boutique__images img:last-child { margin-block-start: var(--sab-space-5); }
  .home-boutique h2 { font-family: Georgia, var(--sab-font-arabic), serif; font-weight: 500; }

  .home-whatsapp { background: var(--sab-color-mauve); color: white; padding-block: var(--sab-space-6); text-align: center; }
  .home-whatsapp h2 { color: white; font-family: Georgia, var(--sab-font-arabic), serif; font-weight: 500; }
  .home-whatsapp .home-eyebrow { color: #f4d9e7; }
  .home-whatsapp .home-button { margin-block-start: var(--sab-space-3); }
}

@media (max-width: 62rem) {
  .home-hero::after { background: linear-gradient(90deg, rgb(36 16 45 / 78%), rgb(36 16 45 / 24%)); }
  [dir="rtl"] .home-hero::after { background: linear-gradient(-90deg, rgb(36 16 45 / 78%), rgb(36 16 45 / 24%)); }
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .home-product-grid, .occasion-grid { grid-template-columns: repeat(2, 1fr); }
  .instagram-grid { grid-template-columns: repeat(3, 1fr); }
  .home-editorial { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 40rem) {
  .home-hero { min-block-size: 42rem; }
  .home-hero::after, [dir="rtl"] .home-hero::after { background: linear-gradient(0deg, rgb(36 16 45 / 90%) 0%, rgb(36 16 45 / 50%) 56%, rgb(36 16 45 / 8%) 100%); }
  .home-hero__image img { object-position: center 18%; }
  .home-hero__content { justify-content: flex-end; padding-block-end: 3rem; }
  .home-hero__content h1 { font-size: clamp(2.35rem, 12vw, 3.65rem); }
  .home-actions, .home-actions .home-button { inline-size: 100%; }
  .home-trust__grid { grid-template-columns: repeat(2, 1fr); }
  .home-trust__grid > div { grid-template-columns: 1fr; gap: .15rem; min-block-size: 6.75rem; text-align: center; }
  .home-trust__grid > div:nth-child(3) { border-block-start: 1px solid rgb(50 26 61 / 10%); border-inline-start: 0; }
  .home-trust__grid > div:nth-child(4) { border-block-start: 1px solid rgb(50 26 61 / 10%); }
  .category-grid { display: grid; grid-auto-columns: 76%; grid-auto-flow: column; grid-template-columns: none; overflow-x: auto; scroll-snap-type: inline mandatory; padding-block-end: var(--sab-space-2); }
  .category-card { scroll-snap-align: start; }
  .home-section__head--row { align-items: flex-start; }
  .home-product-grid { gap: .7rem; }
  .home-product-card__body { font-size: .88rem; }
  .home-editorial, .home-abaya__inner, .home-boutique__grid { grid-template-columns: 1fr; }
  .home-editorial__image img { max-block-size: 31rem; }
  .home-editorial__copy { padding: 2rem var(--sab-space-4); }
  .home-abaya__inner > div { order: 2; }
  .home-abaya img { max-block-size: 30rem; }
  .service-grid { grid-template-columns: 1fr; gap: var(--sab-space-4); }
  .instagram-grid { grid-template-columns: repeat(2, 1fr); }
  .home-boutique__images img:last-child { margin-block-start: var(--sab-space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .category-card img, .home-product-card__image img { transition: none; }
}
