/* Amorosa homepage — editorial composition */
.home-recompose { padding: 0 0 118px; background: #fff; }
.home-recompose .container::before,
.home-recompose .container::after,
.brand-rail__inner::before,
.brand-rail__inner::after { display: none; content: none; }

.home-eyebrow { margin: 0 0 17px; color: inherit; font-size: 10px; font-weight: 600; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; }
.home-button { display: inline-flex; min-height: 48px; padding: 0 24px; align-items: center; justify-content: center; border: 1px solid currentColor; color: inherit; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; transition: background-color .2s ease, color .2s ease; }
.home-button:hover, .home-button:focus { background: #fff; color: #111; }
.home-text-link { display: inline-flex; align-items: center; gap: 18px; padding-bottom: 6px; border-bottom: 1px solid currentColor; color: #111; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.home-text-link span { font-size: 17px; font-weight: 400; }

/* Campaign: a controlled content/image split, not a CMS background banner. */
.campaign-hero { display: grid; min-height: 590px; margin-top: 24px; grid-template-columns: minmax(430px, .92fr) minmax(0, 1.08fr); overflow: hidden; }
.campaign-hero__content { display: flex; min-width: 0; padding: clamp(48px, 4.2vw, 66px); flex-direction: column; align-items: flex-start; justify-content: center; background: #172235; color: #fff; }
.campaign-hero__content h1 { max-width: 100%; min-width: 0; margin: 0; color: inherit; font-size: clamp(36px, 3.4vw, 52px); line-height: 1.02; font-weight: 500; letter-spacing: -.04em; text-transform: none; overflow-wrap: break-word; }
.campaign-hero__content > p:not(.home-eyebrow) { max-width: 410px; margin: 25px 0 32px; color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.65; }
.campaign-hero__visual { display: block; min-width: 0; min-height: 590px; overflow: hidden; background: #e8e6df; }
.campaign-hero__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 73% center; transition: transform .8s ease; }
.campaign-hero__visual:hover img { transform: scale(1.012); }

/* Quiet context between the campaign and commerce. */
.brand-rail { margin-top: 54px; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; }
.brand-rail__inner { display: grid; min-height: 126px; grid-template-columns: 135px minmax(0, 1fr); align-items: center; gap: 40px; }
.brand-rail__label { color: #888; font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.brand-rail__links { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 28px; }
.brand-rail__links a { color: #111; font-size: clamp(13px, 1.35vw, 18px); font-weight: 500; letter-spacing: -.02em; white-space: nowrap; }

/* Shared product story. Product markup and cart behavior stay in product_box.tpl. */
.home-product-section { padding-top: 104px; padding-bottom: 132px; }
.home-section-heading { display: flex; margin-bottom: 42px; align-items: flex-end; justify-content: space-between; gap: 32px; }
.home-section-heading h2, .hair-stories__heading h2 { margin: 0; color: #111; font-size: clamp(34px, 3.7vw, 52px); line-height: .98; font-weight: 500; letter-spacing: -.045em; text-transform: none; }
.home-section-heading > a { display: inline-flex; align-items: center; gap: 13px; padding-bottom: 5px; border-bottom: 1px solid #777; color: #333; font-size: 10px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
.home-section-heading > a span { font-size: 16px; }
.home-products-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 38px); }
.home-products-grid > .product-layout { width: auto !important; min-width: 0; padding: 0; float: none; }
.home-product-section .product-thumb { position: relative; min-height: 0; }
.home-product-section .product-thumb .image { aspect-ratio: 1 / 1.08; margin-bottom: 19px; }
.home-product-section .product-thumb .name { min-height: 3.6em; margin-bottom: 11px; }
.home-product-section .product-thumb .name a { font-size: 13px; line-height: 1.35; }
.home-product-section .product-thumb .price { min-height: 21px; font-size: 14px; }
.home-product-section .product-thumb .cart-button { margin-top: 13px; }
.home-product-section .product-thumb .cart-button .btn-add-cart { width: auto; min-height: 32px; padding: 0 0 4px; border: 0; border-bottom: 1px solid #111; background: transparent; color: #111; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.home-product-section .product-thumb .cart-button .btn-add-cart:hover,
.home-product-section .product-thumb .cart-button .btn-add-cart:focus { background: transparent; color: #666; }
.home-product-section .product-thumb .cart-button .btn-add-cart i { display: none; }
.home-product-section .product-thumb .cart-button .btn-add-cart:disabled { border-color: #aaa; background: transparent; color: #888; }

/* One large B2B statement. */
.salon-editorial { display: grid; min-height: 720px; padding: 0; grid-template-columns: minmax(0, 1.9fr) minmax(330px, .9fr); background: #efeee8; overflow: hidden; }
.salon-editorial__visual { min-width: 0; min-height: 720px; overflow: hidden; }
.salon-editorial__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 47% center; }
.salon-editorial__content { display: flex; padding: clamp(42px, 5vw, 76px); flex-direction: column; align-items: flex-start; justify-content: center; }
.salon-editorial__content h2 { margin: 0; color: #111; font-size: clamp(55px, 6vw, 88px); line-height: .88; font-weight: 500; letter-spacing: -.065em; text-transform: none; }
.salon-editorial__content > p:not(.home-eyebrow) { max-width: 340px; margin: 28px 0 36px; color: #5f5f5a; font-size: 13px; line-height: 1.65; }

/* Human-led story pair with deliberately unequal proportions. */
.hair-stories { padding-top: 136px; padding-bottom: 142px; }
.hair-stories__heading { display: grid; margin-bottom: 46px; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: end; }
.hair-stories__heading .home-eyebrow { margin: 0; }
.hair-stories__grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(300px, .78fr); align-items: end; gap: clamp(24px, 4vw, 64px); }
.hair-story { display: block; min-width: 0; color: #111; }
.hair-story__image { display: block; overflow: hidden; background: #eeeae2; }
.hair-story--primary .hair-story__image { height: clamp(520px, 52vw, 720px); }
.hair-story--secondary .hair-story__image { height: clamp(390px, 39vw, 535px); }
.hair-story__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease; }
.hair-story--primary img { object-position: 48% center; }
.hair-story--secondary img { object-position: 50% center; }
.hair-story:hover img { transform: scale(1.018); }
.hair-story__copy { display: grid; padding-top: 18px; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 20px; }
.hair-story__copy small { grid-column: 1; color: #777; font-size: 9px; font-style: normal; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.hair-story__copy strong { grid-column: 1; color: #111; font-size: clamp(20px, 2.1vw, 31px); line-height: 1.08; font-weight: 500; letter-spacing: -.035em; }
.hair-story__copy i { grid-column: 2; grid-row: 1 / span 2; color: #111; font-size: 24px; font-style: normal; font-weight: 300; }

/* The second commerce moment is intentionally quieter. */
.home-product-section--new { padding-top: 88px; padding-bottom: 0; border-top: 1px solid #dedede; }
.home-section-heading--compact { margin-bottom: 34px; }
.home-section-heading--compact h2 { font-size: clamp(31px, 3vw, 43px); }
.home-products-grid--compact { gap: clamp(18px, 2vw, 30px); }
.home-products-grid--compact .product-thumb .image { aspect-ratio: 1 / .98; }

@media (max-width: 991px) {
  .campaign-hero { min-height: 520px; grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr); }
  .campaign-hero__visual { min-height: 520px; }
  .campaign-hero__content { padding: 48px 38px; }
  .brand-rail__inner { grid-template-columns: 110px minmax(0, 1fr); gap: 24px; }
  .brand-rail__links { gap: 22px; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .brand-rail__links::-webkit-scrollbar { display: none; }
  .home-product-section { padding-top: 88px; padding-bottom: 105px; }
  .home-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 54px; }
  .salon-editorial { min-height: 620px; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .85fr); }
  .salon-editorial__visual { min-height: 620px; }
  .hair-stories { padding-top: 110px; padding-bottom: 112px; }
  .hair-stories__heading { grid-template-columns: 1fr; gap: 13px; }
  .hair-stories__grid { grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 28px; }
}

/* Native scroll snapping keeps touch gestures and product links independent. */
.home-carousel__track { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.home-carousel__track::-webkit-scrollbar { display: none; }
.home-carousel__track { cursor: grab; }
.home-carousel__track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; }
.home-carousel__track.is-dragging, .home-carousel__track.is-dragging * { cursor: grabbing !important; user-select: none; }
.home-carousel__track > * { scroll-snap-align: start; }
.home-hero-carousel { margin-top: 24px; }
.home-hero-carousel > .home-carousel__track { display: flex; gap: 0; }
.home-hero-carousel .campaign-hero { flex: 0 0 100%; width: 100%; margin: 0; }
.campaign-banner { flex: 0 0 100%; min-width: 0; position: relative; }
.campaign-banner > a { display: block; height: 100%; }
.campaign-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.campaign-banner__title { position: absolute; left: 5%; bottom: 10%; max-width: 85%; padding: 15px 22px; background: #172235; color: #fff; font-size: clamp(20px, 3vw, 42px); }
.home-products-grid.home-carousel__track { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * clamp(20px, 2.4vw, 38px)) / 4); gap: clamp(20px, 2.4vw, 38px); }
.home-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 28px; }
.home-carousel__controls[hidden] { display: none; }
.home-carousel__controls button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ccc; border-radius: 50%; background: #fff; color: #172235; font-size: 22px; cursor: pointer; }
.home-carousel__controls button:disabled { opacity: .3; cursor: default; }
.home-carousel__controls button:focus-visible, .home-carousel__track:focus-visible { outline: 2px solid #172235; outline-offset: 3px; }
.home-carousel__dots { display: flex; gap: 4px; }
.home-carousel__dots button { width: 28px; height: 44px; border: 0; border-radius: 0; }
.home-carousel__dots button::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #ccc; }
.home-carousel__dots button[aria-current="true"]::after { background: #172235; width: 9px; height: 9px; }
@media (max-width: 991px) {
  .home-products-grid.home-carousel__track { grid-auto-columns: calc((100% - 20px) / 2); gap: 20px; }
}
@media (max-width: 767px) {
  .home-hero-carousel { margin-top: 0; padding: 0; }
  .home-products-grid.home-carousel__track { grid-auto-columns: calc((100% - 14px) / 2); gap: 14px; }
  .home-hero-carousel .home-carousel__controls { margin: 16px 0; }
}

@media (max-width: 767px) {
  .home-recompose { padding-bottom: 82px; }
  .campaign-hero { min-height: 0; margin-top: 0; padding: 0; grid-template-columns: minmax(0, 1fr); }
  .campaign-hero__content { min-width: 0; min-height: 330px; padding: 48px 22px 42px; }
  .campaign-hero__content h1 { max-width: none; font-size: clamp(35px, 9.5vw, 40px); line-height: 1; letter-spacing: -.055em; }
  .campaign-hero__content > p:not(.home-eyebrow) { margin: 20px 0 27px; font-size: 13px; }
  .campaign-hero__visual { min-height: 350px; height: 88vw; max-height: 430px; }
  .campaign-hero__visual img { object-position: 69% center; }
  .brand-rail { margin-top: 0; }
  .brand-rail__inner { min-height: 105px; padding-top: 18px; padding-bottom: 18px; grid-template-columns: 1fr; gap: 13px; }
  .brand-rail__links { margin-right: -16px; padding-right: 16px; }
  .brand-rail__links a { font-size: 14px; }
  .home-product-section { padding-top: 72px; padding-bottom: 86px; }
  .home-section-heading { margin-bottom: 30px; align-items: flex-end; }
  .home-section-heading h2, .hair-stories__heading h2 { font-size: 36px; }
  .home-section-heading > a { font-size: 8px; white-space: nowrap; }
  .home-products-grid { gap: 42px 14px; }
  .home-product-section .product-thumb .image { aspect-ratio: 1 / 1.06; margin-bottom: 13px; }
  .home-product-section .product-thumb .name { min-height: 4.1em; margin-bottom: 8px; }
  .home-product-section .product-thumb .name a { font-size: 12px; }
  .home-product-section .product-thumb .cart-button .btn-add-cart { min-height: 36px; }
  .salon-editorial { min-height: 0; margin: 0 16px; grid-template-columns: 1fr; }
  .salon-editorial__visual { min-height: 410px; height: 105vw; max-height: 520px; }
  .salon-editorial__visual img { object-position: 45% center; }
  .salon-editorial__content { min-height: 330px; padding: 40px 28px 46px; }
  .salon-editorial__content h2 { font-size: clamp(51px, 16vw, 68px); }
  .salon-editorial__content > p:not(.home-eyebrow) { margin: 22px 0 29px; }
  .hair-stories { padding-top: 88px; padding-bottom: 92px; }
  .hair-stories__heading { margin-bottom: 30px; }
  .hair-stories__grid { grid-template-columns: 1fr; align-items: start; gap: 58px; }
  .hair-story--primary { width: 100%; }
  .hair-story--secondary { width: 82%; margin-left: auto; }
  .hair-story--primary .hair-story__image { height: 118vw; min-height: 430px; max-height: 570px; }
  .hair-story--secondary .hair-story__image { height: 92vw; min-height: 330px; max-height: 450px; }
  .hair-story__copy strong { font-size: 22px; }
  .home-product-section--new { padding-top: 66px; padding-bottom: 0; }
}