/* al-home: visual-fidelity layer for the home sections (spec SECTIONS 4, 10, 11). Namespaced al-hm-*; loaded after allure.css so it
   overrides the core defaults. Rhythm constants (measured on the reference): section pad 80/48, heading gap 20/16, buttons +12/+8,
   h1 line-height 1.3 (>=1000px) else 1.5, h3 1.5, h4 1.6. Logical properties everywhere (ar/he mirror). */

/* ------------------------------------------------------------------ shared rhythm */
.al-sec .al-h3 { line-height: 1.5; }
.al-over-media .al-prose, .al-s-slideshow .al-slide .al-prose { gap: 1rem; }
.al-over-media .al-prose .al-btn-row, .al-s-slideshow .al-slide .al-prose .al-btn-row { margin-top: .5rem; }
@media (min-width: 1000px) {
  .al-over-media .al-prose, .al-s-slideshow .al-slide .al-prose { gap: 1.25rem; }
  .al-over-media .al-prose .al-btn-row, .al-s-slideshow .al-slide .al-prose .al-btn-row { margin-top: .75rem; }
}
.al-s-slideshow .al-h1, .al-hm-rich .al-h1, .al-tile-t.al-h1, .al-cdb .al-h1 { line-height: 1.5; letter-spacing: var(--al-ls-h); }
@media (min-width: 1000px) { .al-s-slideshow .al-h1, .al-hm-rich .al-h1, .al-tile-t.al-h1, .al-cdb .al-h1 { line-height: 1.3; } }
/* the 25px "next section" compensation only on spacing-sections (mobile uses the 3rem rhythm); over-media / marquee sit flush */
@media (max-width: 999px) { .al-s-slideshow + .al-sec { padding-top: calc(3rem + 1.5625rem); } }
.al-s-slideshow + .al-over-media, .al-s-slideshow + .al-mq-sec { padding-top: 0; }

/* scroll reveal of over-media sections: media fades in while it settles 1.1 -> 1; content only fades (no rise) */
.al-over-media > .al-over-in.al-rv { transform: none; transition: opacity .8s cubic-bezier(.215, .61, .355, 1); }
@supports selector(:has(*)) {
  .al-over-media:not(.al-s-slideshow) > .al-media { opacity: 0; transform: scale(1.1); transition: opacity .8s cubic-bezier(.215, .61, .355, 1), transform .8s cubic-bezier(.215, .61, .355, 1); }
  .al-over-media:not(.al-s-slideshow):has(> .al-over-in.in) > .al-media { opacity: 1; transform: none; }
  body.al-editing .al-over-media > .al-media { opacity: 1; transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .al-over-media > .al-media, .al-over-media > .al-over-in.al-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------ slideshow */
.al-s-slideshow.al-h-full { height: 100svh; min-height: 30rem; }
.al-s-slideshow .al-btn-row { flex-wrap: nowrap; justify-content: center; }
.al-s-slideshow .al-btn { min-width: 150px; height: 44px; }
/* the content is centred in the whole slide (the transparent header overlays it, nothing is reserved) */
.al-s-slideshow .al-slide-in, body.al-hero-top .al-s-slideshow .al-slide-in { padding: var(--gutter); }
.al-next-sec { box-shadow: 0 2px 10px rgba(28, 28, 28, .15); }
@media (prefers-reduced-motion: reduce) {
  .al-slide .al-media, .al-slide.on .al-media { animation: none; transform: none; }
  .al-s-slideshow .al-prose > *, .al-s-slideshow .al-slide.on .al-prose > * { animation: none !important; }
  .al-slide, .al-slide.on { transition: none; }
}

/* ------------------------------------------------------------------ best sellers (collection_carousel) */
.al-s-collection_carousel .al-card-info { gap: .25rem; padding-bottom: 1.25rem; }
.al-s-collection_carousel .al-more { margin-top: 2.5rem; }
@media (min-width: 1000px) { .al-s-collection_carousel .al-more { margin-top: 4rem; } }
@media (max-width: 699px) {
  .al-s-collection_carousel .al-rail { --gap-x: 1.25rem; grid-auto-columns: 58vw; }
}

/* ------------------------------------------------------------------ banner: bottom-start on >=700 (reference), centred on phones */
@media (min-width: 700px) {
  .al-s-banner .al-over-in.al-al-start, .al-s-banner .al-over-in.al-al-end { align-items: flex-end; }
}
@media (max-width: 699px) {
  .al-s-banner .al-over-in.al-al-start, .al-s-banner .al-over-in.al-al-end { justify-content: center; align-items: center; }
  .al-s-banner .al-al-start .al-prose, .al-s-banner .al-al-end .al-prose { justify-items: center; text-align: center; }
  .al-s-banner .al-al-start .al-btn-row, .al-s-banner .al-al-end .al-btn-row { justify-content: center; }
}

/* ------------------------------------------------------------------ rich text: 469 / 404 (brand mark 120 when supplied) */
.al-hm-rich { display: grid; align-content: center; min-height: 404px; }
@media (min-width: 700px) { .al-hm-rich { min-height: 350px; } }
@media (min-width: 1000px) { .al-hm-rich { min-height: 469px; } }
.al-hm-rich .al-hm-mark { width: 120px; height: 120px; object-fit: contain; }
.al-hm-rich .al-rich { gap: 1.25rem; max-width: 680px; }
.al-hm-rich .al-rich-title { max-width: 680px; }
.al-hm-rich .al-btn-row { gap: 0 .75rem; justify-content: center; }
.al-hm-rich .al-btn.al-btn-link, .al-hm-rich .al-btn.al-btn-link:hover:not(:disabled) { padding: 0; line-height: 1.65; }

/* ------------------------------------------------------------------ tiles */
.al-s-rich_text + .al-s-collection_tiles { padding-top: 0; }
.al-tile-t { padding: 0; }
@media (max-width: 699px) {
  .al-tiles-n { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } .al-tiles-n > .al-tile { aspect-ratio: 335 / 200; }
  .al-tiles-3 { gap: 1.5rem; } .al-tiles-3 > :nth-child(n+2) { aspect-ratio: 335 / 180; }
}
@media (min-width: 700px) and (max-width: 999px) {
  .al-tiles-3 { grid-template-columns: 461fr 219fr; gap: 24px; }
  .al-tiles-3 > :nth-child(1) { grid-column: 1; grid-row: span 2; aspect-ratio: auto; }
  .al-tiles-3 > :nth-child(n+2) { grid-column: 2; aspect-ratio: 219 / 290; }
}
@media (min-width: 1000px) { .al-tiles-n { gap: 30px; } .al-tiles-n > .al-tile { aspect-ratio: 1.2 / 1; } }

/* ------------------------------------------------------------------ marquee: everything scales with the font (64 desktop / 44 tablet / 32 phone) -> 189 / 130 / 95 */
.al-mq-sec .al-mq { font-size: clamp(2rem, 5.764vw, 4rem); padding-block: .64em; }
.al-mq-t { font-size: 1em; line-height: 1.65; padding-inline: 0; }
.al-mq-i { padding-inline: .39em .41em; gap: .78em; }
.al-mq-sep { width: 1.5em; height: .95em; padding: .25em .45em; box-sizing: border-box; }
.al-mq-sec .al-mq-i { color: #B3B3B3; }

/* ------------------------------------------------------------------ featured product: reference row height (681 / 536) */
@media (min-width: 1000px) { .al-fp .al-split-media { aspect-ratio: 582 / 521; } }
@media (max-width: 999px) { .al-fp .al-split-media { aspect-ratio: 335 / 230; } }
.al-fp .al-split-text { gap: 1.25rem; }
.al-fp .al-split-text .al-btn-row { margin-top: .5rem; }

/* ------------------------------------------------------------------ video banner (576 / 400); big play button while held */
.al-vb.al-over-media.al-h-md { min-height: clamp(25rem, 100vw, 36rem); }
.al-vb[data-video-hold="1"] .al-vb-toggle { width: 48px; height: 48px; top: calc(50% + 20px); bottom: auto; inset-inline-start: calc(50% - 24px); }
.al-vb[data-video-hold="1"] .al-vb-toggle svg { width: 40%; height: 40%; }
.al-vb[data-video-hold="1"]:has(.al-vb-toggle) .al-prose { padding-bottom: 72px; }
@media (min-width: 700px) {
  .al-vb[data-video-hold="1"] .al-vb-toggle { width: 80px; height: 80px; top: calc(50% + 20px); inset-inline-start: calc(50% - 40px); }
  .al-vb[data-video-hold="1"]:has(.al-vb-toggle) .al-prose { padding-bottom: 120px; }
}
.al-vb[data-video-hold="0"] > .al-over-in { opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }

/* ------------------------------------------------------------------ countdown banner: copy | timer from 700px, centred stack on phones */
.al-over-media.al-hm-cdb { min-height: 500px; }
@media (min-width: 700px) { .al-over-media.al-hm-cdb { min-height: 0; } }
@media (min-width: 1000px) { .al-over-media.al-hm-cdb { min-height: 540px; } }
.al-hm-cd { display: grid; gap: 2rem; justify-items: center; text-align: center; width: 100%; }
.al-hm-cd-copy { display: grid; gap: 1rem; justify-items: center; text-align: center; max-width: 570px; }
.al-hm-cd-copy .al-btn-row { margin-top: .5rem; justify-content: center; }
.al-hm-cdb .al-h1 { max-width: none; }
.al-hm-cdb .al-cd-lg { gap: .75rem; justify-self: center; }
.al-hm-cdb .al-cd-lg .al-cd-unit { min-width: 62px; gap: .5rem; }
.al-hm-cdb .al-cd-lg .al-cd-num { font-size: clamp(1.375rem, 1.146rem + .976vw, 2rem); line-height: 1.5; height: 1.5em; letter-spacing: 0; text-indent: 0; }
.al-hm-cdb .al-cd-lg .al-cd-num b { font-weight: 400; }
.al-hm-cdb .al-cd-lg .al-cd-lbl { font-size: .75rem; line-height: 1.7; letter-spacing: .18em; margin-inline-end: -.18em; }
.al-hm-cdb .al-cd-lg .al-cd-sep { font-size: .875rem; line-height: 1.65; padding: 0; margin-top: .3em; }
@media (min-width: 700px) {
  .al-hm-cd { grid-template-columns: minmax(0, 570px) auto; justify-content: space-between; align-items: center; justify-items: start; text-align: start; column-gap: 4rem; max-width: 1150px; margin-inline: auto; }
  .al-hm-cd-copy { justify-items: start; text-align: start; max-width: none; }
  .al-hm-cd-copy .al-btn-row { justify-content: flex-start; }
  .al-hm-cdb .al-cd-lg { gap: 1rem; justify-self: end; }
  .al-hm-cdb .al-cd-lg .al-cd-unit { min-width: 53px; }
  .al-hm-cdb .al-cd-lg .al-cd-num { line-height: 1.3; height: 1.3em; }
}
@media (min-width: 1000px) {
  .al-hm-cd-copy { gap: 1.25rem; }
  .al-hm-cd-copy .al-btn-row { margin-top: .75rem; }
}

/* ------------------------------------------------------------------ image + text collage (856 / 832) */
.al-hm-it .al-container { max-width: calc(1150px + 2 * var(--gutter)); }
.al-hm-split { align-items: center; gap: 2rem; }
.al-hm-split .al-split-text { gap: 1rem; padding-inline: 0; max-width: none; }
.al-hm-split .al-split-text .al-btn-row { margin-top: .5rem; }
.al-hm-collage { position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 335 / 432; }
.al-hm-i1, .al-hm-i2 { position: absolute; overflow: hidden; background: var(--al-bg2); }
.al-hm-i1 { inset-block-start: 0; inset-inline-start: 0; width: 76.1%; aspect-ratio: 650 / 1000; }
.al-hm-i2 { inset-block-end: 0; inset-inline-end: 0; width: 47.8%; aspect-ratio: 650 / 1000; }
.al-hm-i1 img, .al-hm-i2 img, .al-hm-i1 .al-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.al-hm-i2.is-crop img { transform: scale(1.7); transform-origin: 30% 80%; }
.al-hm-collage:not(.has-2) { aspect-ratio: 4 / 5; }
.al-hm-collage:not(.has-2) .al-hm-i1 { inset: 0; width: 100%; aspect-ratio: auto; }
@media (min-width: 700px) {
  .al-hm-collage.has-2 { max-width: none; margin: 0; aspect-ratio: 655 / 695; }
  .al-hm-collage.has-2 .al-hm-i1 { width: 61.07%; inset-inline-start: auto; inset-inline-end: 0; }
  .al-hm-collage.has-2 .al-hm-i2 { width: 48.55%; inset-inline-end: auto; inset-inline-start: 0; }
  .al-hm-split:not(.al-rev) .al-hm-collage.has-2 .al-hm-i1 { inset-inline-end: auto; inset-inline-start: 0; }
  .al-hm-split:not(.al-rev) .al-hm-collage.has-2 .al-hm-i2 { inset-inline-start: auto; inset-inline-end: 0; }
}
@media (min-width: 1000px) {
  .al-hm-split { grid-template-columns: minmax(0, 655fr) minmax(0, 375fr); column-gap: clamp(3rem, 8.4vw, 7.5rem); }
  .al-hm-split.al-rev { grid-template-columns: minmax(0, 375fr) minmax(0, 655fr); }
  .al-hm-split.al-rev .al-hm-collage { order: 2; }
  .al-hm-split .al-split-text { gap: 1.25rem; }
  .al-hm-split .al-split-text .al-btn-row { margin-top: .75rem; }
  .al-hm-collage:not(.has-2) { max-width: none; margin: 0; }
}

/* ------------------------------------------------------------------ testimonials: dark, bordered, 413 / 399 */
.al-s-testimonials { border-block: 1px solid var(--bd); padding-block: 4.25rem; min-height: 399px; display: grid; align-content: center; }
@media (min-width: 700px) { .al-s-testimonials { min-height: 359px; } }
@media (min-width: 1000px) { .al-s-testimonials { min-height: 413px; padding-block: 5rem; } }
.al-s-testimonials .al-quote { font-size: clamp(1.125rem, 1.6vw, 1.25rem); line-height: 1.65; }
.al-s-testimonials .al-testi-nav { margin-top: 2.5rem; }
@media (min-width: 1000px) { .al-s-testimonials .al-testi-nav { margin-top: 4rem; } }
.al-s-testimonials .al-testi-nav button { font-size: .75rem; }
.al-hm-by { display: block; margin-top: 1.25rem; font-style: normal; opacity: .65; }
@media (min-width: 700px) { .al-hm-by { display: none; } }
/* phones: dots (the author sits under the quote); desktop keeps the thumbnail-style names */
@media (max-width: 699px) {
  .al-s-testimonials .al-testi-nav { gap: 1rem; margin-top: 1.5rem; flex-wrap: nowrap; }
  .al-s-testimonials .al-testi-nav button { font-size: 0; line-height: 0; width: 6px; height: 6px; padding: 0; border-radius: 50%; background: currentColor; opacity: .4; }
  .al-s-testimonials .al-testi-nav button.on { opacity: 1; }
}

/* ------------------------------------------------------------------ multicolumn: 1056 desktop, swipe carousel on phones */
.al-s-multicolumn .al-mcols { gap: 3rem; }
@media (min-width: 1000px) { .al-s-multicolumn .al-mcols { gap: 4.375rem; } }
.al-s-multicolumn .al-mcol { gap: 1.25rem; justify-items: center; text-align: center; }
.al-s-multicolumn .al-mcol-img { margin-bottom: .75rem; }
.al-s-multicolumn .al-mcol .al-sub { color: inherit; }
@media (max-width: 999px) {
  .al-s-multicolumn .al-mcols { display: flex; gap: 3.125rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .al-s-multicolumn .al-mcols::-webkit-scrollbar { display: none; }
  .al-s-multicolumn .al-mcol { flex: 0 0 38vw; scroll-snap-align: center; }
}
@media (max-width: 699px) { .al-s-multicolumn .al-mcol { flex-basis: 53.07vw; } }

/* ------------------------------------------------------------------ services strip: 187 / 201, full-colour text, dots on phones */
.al-s-services { display: grid; align-content: center; min-height: 187px; }
@media (max-width: 699px) { .al-s-services { min-height: 201px; } }
.al-s-services .al-service .al-sub { color: inherit; }
.al-hm-dots { display: none; }
@media (max-width: 699px) {
  .al-hm-dots { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; }
  .al-hm-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .4; transition: opacity .25s; }
  .al-hm-dots i.on { opacity: 1; }
}

/* ------------------------------------------------------------------ newsletter: 512 / 320 */
.al-s-newsletter { min-height: 320px; }
@media (min-width: 700px) { .al-s-newsletter { min-height: 512px; } }