/* Vert Tige V4: home page laid out after the MINA model (IMG_6753.jpg, 2026-10-20).
   Centred logo and menu, one wide hero with the name set large, a 3 x 2 grid of favourites,
   "Not sure what to send?" with a two-photo "Florist / Choice" banner, a row of four collections.
   Colours stay Vert Tige's: the logo magenta takes the place of MINA's coral. The galleries and
   our-story pages keep V3's styles.css. */
:root {
  --m-page: #ffffff;
  --m-ink: #2e5130;   /* all home-page text in the deep green of the gallery titles (2026-10-20, was #2b2f2a) */
  --m-text: #2e5130;  /* was grey #6d726a */
  --m-line: #ebece6;
  --m-accent: #b9468a;
  --m-accent-dark: #9c3673;
  --m-green: #2e5130;
  --m-display: "Cormorant Garamond", "Lora", Georgia, serif;
  --m-wrap: 1180px;
}
body { background: var(--m-page); }

/* ---------- header: tools in the corners, logo centred, menu on its own line ---------- */
.mhead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: var(--m-wrap); margin: 0 auto; padding: 18px 20px 0; }
.mhead__logo { grid-column: 2; }
.mhead__logo img { width: 230px; }
.mhead__right { display: flex; justify-content: flex-end; gap: 6px; }
.mhead__tool { width: 40px; height: 40px; display: grid; place-items: center; color: var(--m-ink); transition: color .2s; }
.mhead__tool svg { width: 22px; height: 22px; }
.mhead__tool:hover { color: var(--m-accent); }
.mhead .tool--menu { display: none; }
.mnav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 30px; padding: 20px 0 22px; }
.mnav a { color: var(--m-ink); font-family: var(--m-display); font-size: 17px; font-weight: 500; transition: color .2s; }
.mnav a:hover { color: var(--m-accent); }

/* ---------- hero ---------- */
.mhero { position: relative; max-width: var(--m-wrap); margin: 0 auto; overflow: hidden; }
.mhero img { width: 100%; aspect-ratio: 1920 / 1012; object-fit: cover; }
.mhero h1 { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--m-green); font-family: var(--m-display); font-weight: 400; }
.mhero h1 span { padding-left: .18em; font-size: clamp(60px, 10.5vw, 132px); line-height: 1; letter-spacing: .18em; text-transform: uppercase; }
.mhero h1 small { color: #c9308f; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }

/* ---------- centred title, line of text, one button ---------- */
.mintro { max-width: 760px; margin: 0 auto; padding: 26px 20px 0; text-align: center; }
.mintro h2 { color: var(--m-ink); font-family: var(--m-display); font-size: clamp(26px, 2.4vw, 32px); font-weight: 500; }
.mintro__caps { letter-spacing: .03em; text-transform: uppercase; }
.mintro p { margin: 8px auto 16px; color: var(--m-text); font-size: 15px; line-height: 1.6; }
.mbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 24px; border-radius: 2px; background: var(--m-accent); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; transition: background .2s, color .2s; }
.mbtn:hover { background: var(--m-accent-dark); }
.mbtn--line { background: none; color: var(--m-accent); box-shadow: inset 0 0 0 1.5px var(--m-accent); }
.mbtn--line:hover { background: var(--m-accent); color: #fff; }

/* ---------- 3 x 2 favourites ---------- */
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 54px 64px; max-width: 1000px; margin: 64px auto 0; padding: 0 20px; list-style: none; }
.mgrid a { display: block; text-align: center; }
.mgrid__img { position: relative; overflow: hidden; }
.mgrid__img img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s; }
.mgrid a:hover img { transform: scale(1.04); }
.mbadge { position: absolute; right: 0; bottom: 14px; padding: 4px 10px; background: var(--m-accent); color: #fff; font-size: 11px; font-style: normal; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.mgrid strong { display: block; margin-top: 16px; color: var(--m-ink); font-family: var(--m-display); font-size: 20px; font-weight: 600; }
.mgrid span { display: block; margin-top: 2px; color: var(--m-text); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }

/* "Not sure what to send?" sits further down, like the model */
.mgrid + .mintro { padding-top: 84px; }

/* ---------- Florist / Choice: two square photos, one word on each ---------- */
.mpair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 1000px; margin: 34px auto 0; padding: 0 20px; }
.mpair div { position: relative; overflow: hidden; }
.mpair img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: brightness(.88); }
.mpair span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-family: var(--m-display); font-size: clamp(40px, 6.4vw, 78px); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }

/* ---------- four collections ---------- */
.mcats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; max-width: 1000px; margin: 64px auto 0; padding: 0 20px; list-style: none; }
.mcats a { display: block; text-align: center; }
.mcats img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s; }
.mcats li { overflow: hidden; }
.mcats a:hover img { transform: scale(1.04); }
.mcats span { display: block; margin-top: 14px; color: var(--m-ink); font-family: var(--m-display); font-size: 19px; font-weight: 600; }

/* ---------- events and story: photo beside text ---------- */
.msplit { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; max-width: 1000px; margin: 110px auto 0; padding: 0 20px; }
.msplit > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.msplit--flip > img { order: 2; }
.mkicker { margin: 0 0 10px; color: var(--m-accent); font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.msplit h2 { color: var(--m-ink); font-family: var(--m-display); font-size: clamp(32px, 3.2vw, 44px); font-weight: 500; line-height: 1.1; }
.msplit p:not(.mkicker) { margin: 16px 0 0; color: var(--m-text); font-size: 16px; line-height: 1.75; }
.msplit .mbtn { margin-top: 28px; }

/* ---------- visit ---------- */
.mvisit { max-width: 1000px; margin: 110px auto 0; padding: 0 20px; text-align: center; }
.mvisit h2 { color: var(--m-ink); font-family: var(--m-display); font-size: clamp(26px, 2.4vw, 32px); font-weight: 500; }
.mvisit .rating { margin-top: 8px; }
.mvisit .rating__stars { color: var(--m-accent); }
.mvisit__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 40px 0 0; padding: 0; list-style: none; }
.mvisit__list li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 15px; }
.mvisit__list svg { width: 26px; height: 26px; margin-bottom: 8px; color: var(--m-accent); }
.mvisit__list strong { color: var(--m-ink); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.mvisit__list a:hover { color: var(--m-accent); }
.mvisit__map { position: relative; height: 360px; margin-top: 44px; }
.mvisit__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.85); }
.mvisit__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }

/* ---------- footer ---------- */
.mfoot { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 110px; padding: 52px 20px 44px; border-top: 1px solid var(--m-line); text-align: center; color: var(--m-text); font-size: 14px; }
.mfoot img { width: 104px; }
.mfoot nav { display: flex; gap: 26px; }
.mfoot nav a { color: var(--m-ink); font-family: var(--m-display); font-size: 17px; font-weight: 500; }
.mfoot a:hover { color: var(--m-accent); }
.mfoot p { margin: 0; }
.mfoot__credit { font-size: 12.5px; }
.mfoot__credit a { color: var(--m-ink); }

/* galleries and story: same square buttons as the home page */
.space .btn { border-radius: 2px; }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  .mhead { padding: 10px 12px 12px; }
  .mhead__logo img { width: 160px; }
  .mhead .tool--menu { display: grid; }
  .mnav { position: absolute; left: 12px; right: 12px; top: 74px; z-index: 20; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 8px 22px; background: #fff; box-shadow: 0 20px 40px -20px rgba(40, 50, 40, .4); opacity: 0; visibility: hidden; translate: 0 -8px; transition: opacity .2s, translate .2s, visibility .2s; }
  .mnav.is-open { opacity: 1; visibility: visible; translate: 0 0; }
  .mnav a { padding: 13px 0; border-bottom: 1px solid var(--m-line); font-size: 19px; }
  .mnav a:last-child { border-bottom: 0; }

  .mhero img { aspect-ratio: 720 / 1000; }
  .mhero h1 span { font-size: clamp(38px, 11vw, 72px); letter-spacing: .12em; padding-left: .12em; }
  .mhero h1 small { font-size: 11px; }

  .mgrid { grid-template-columns: 1fr 1fr; gap: 34px 16px; margin-top: 44px; padding: 0 16px; }
  .mgrid strong { margin-top: 12px; font-size: 18px; }
  .mgrid span { font-size: 11.5px; }
  .mbadge { bottom: 10px; font-size: 10px; }
  .mgrid + .mintro { padding-top: 60px; }
  .mpair { gap: 8px; padding: 0 16px; }
  .mpair span { font-size: clamp(22px, 7.4vw, 40px); letter-spacing: .1em; }
  .mcats { grid-template-columns: 1fr 1fr; gap: 26px 16px; margin-top: 44px; padding: 0 16px; }
  .mcats span { font-size: 17px; }

  .msplit, .msplit--flip { grid-template-columns: 1fr; gap: 26px; margin-top: 72px; padding: 0 16px; }
  .msplit--flip > img { order: 0; }
  .mvisit { margin-top: 72px; padding: 0 16px; }
  .mvisit__list { grid-template-columns: 1fr 1fr; gap: 26px 12px; }
  .mvisit__map { height: 300px; }
  .mvisit__actions .mbtn { flex: 1 1 100%; min-height: 46px; }
  .mfoot { margin-top: 72px; }
}

/* test (2026-10-20): a cut-out photo on white, like the model's product shots.
   The whole bouquet shows, standing on the bottom of the square. */
/* No frame (by request): no square box or clipping. The photo keeps its own shape, sits on the
   page itself and can grow past the square on hover. */
.mgrid__img--cut { overflow: visible; aspect-ratio: 1; }
.mgrid__img--cut img { position: absolute; bottom: 0; left: 0; width: 100%; height: 108%; max-width: none; aspect-ratio: auto; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; } /* wide pieces fit the width, tall ones rise a little above the square */

/* hero on lily magenta (2026-10-20): the white-rose hatbox stands in the middle of the photo,
   so the name is split around it, "VERT" left and "TIGE" right, in white like the model.
   On phones the name sits above the arrangement. */
.mhero h1 { justify-content: flex-start; padding-top: 21%; color: #fff; text-shadow: 0 2px 30px rgba(90, 10, 60, .25); }
.mhero h1 span { display: flex; justify-content: space-between; width: 100%; padding: 0 2.4%; font-size: clamp(50px, 8.8vw, 110px); letter-spacing: .16em; }
.mhero h1 b { font-weight: 400; }
.mhero h1 small { position: absolute; left: 0; right: 0; bottom: 4.2%; color: var(--m-accent); text-shadow: none; }
@media (max-width: 860px) {
  .mhero h1 { padding-top: 22%; } /* phone: the name sits in the wall above the roses (phone image has a smaller arrangement, 0.52) */
  .mhero h1 span { justify-content: center; gap: .32em; padding: 0; font-size: clamp(40px, 12vw, 72px); letter-spacing: .12em; }
  .mhero h1 small { bottom: 3%; }
}

/* Florist / Choice as studio scenes (2026-10-20): white orchids on the lily magenta wall,
   pink roses on the leaf green wall. The word sits in the clear wall above the flowers. */
.mpair--scene img { filter: none; }
.mpair--scene span { place-items: start center; padding-top: 7%; text-shadow: 0 2px 22px rgba(0, 0, 0, .18); }

/* all product shots are cut-outs now (2026-10-20): the collections row uses the same frameless tile */
.mcats li { overflow: visible; }
.mcats .mgrid__img--cut img { height: 100%; }
.mgrid a:hover .mgrid__img--cut img, .mcats a:hover .mgrid__img--cut img { transform: scale(1.04); }

/* galleries as cut-outs (2026-10-20): every piece stands free on white in an even grid,
   bottom-aligned like the home page, no boxes, no rounded frames */
.space__body--gallery { background: #fff; }
.space__body--gallery .gallery--cut { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 44px 28px; }
.space__body--gallery .gallery--cut li { grid-column: auto; grid-row: auto; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 1; overflow: visible; border-radius: 0; background: none; }
.space__body--gallery .gallery--cut img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0; }
.gallery--cut li:hover img { transform: scale(1.04); }
.lightbox:has(img[src*="gallery-cut"]) { background: rgba(255, 255, 255, .97); }
@media (max-width: 860px) {
  .space__body--gallery .gallery--cut { grid-template-columns: 1fr 1fr; gap: 28px 14px; }
  .space__body--gallery .gallery--cut li, .space__body--gallery .gallery--cut li:nth-child(5n+1),
  .space__body--gallery .gallery--cut li:last-child:nth-child(5n+2),
  .space__body--gallery .gallery--cut li:last-child:nth-child(5n+4) { grid-column: auto; aspect-ratio: 1; }
}

/* bouquets gallery as studio scenes (2026-10-20): each bouquet on a soft sage or blush wall,
   all the same 3:4 shape, in an even grid */
.space__body--gallery .gallery--scene { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 18px; }
.space__body--gallery .gallery--scene li { grid-column: auto; grid-row: auto; aspect-ratio: 3 / 4; border-radius: 0; background: #f6eef2; }
.space__body--gallery .gallery--scene img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
@media (max-width: 860px) {
  .space__body--gallery .gallery--scene { grid-template-columns: 1fr 1fr; gap: 10px; }
  .space__body--gallery .gallery--scene li, .space__body--gallery .gallery--scene li:nth-child(5n+1),
  .space__body--gallery .gallery--scene li:last-child:nth-child(5n+2),
  .space__body--gallery .gallery--scene li:last-child:nth-child(5n+4) { grid-column: auto; aspect-ratio: 3 / 4; }
}

/* language switch (EN / FR / ع), small text links in the header corner */
.mlang { display: flex; gap: 2px; padding: 0; margin-right: 6px; border: 0; background: none; }
.mlang a { min-width: 30px; height: 30px; padding: 0 6px; border-radius: 2px; color: var(--m-text); font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.mlang a:hover { color: var(--m-accent); }
.mlang a[aria-current] { background: none; color: var(--m-accent); box-shadow: inset 0 -2px 0 var(--m-accent); }
.mlang a[lang="ar"] { font-family: "Tajawal", system-ui, sans-serif; font-size: 15px; letter-spacing: 0; }
@media (max-width: 860px) { .mlang { margin-right: 0; } .mlang a { min-width: 26px; padding: 0 4px; } }

/* ---------- phones: no WhatsApp / Instagram icons in the header (2026-10-20) ---------- */
@media (max-width: 860px) {
  .mhead > .mhead__tool, .mhead__right > a.mhead__tool { display: none; }
}

/* ---------- gallery pieces with their names (2026-10-20) ---------- */
.space__body--gallery .gallery--cut li, .space__body--gallery .gallery--scene li { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; aspect-ratio: auto !important; overflow: visible; background: none; border-radius: 0; }
.g-img { position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; cursor: zoom-in; }
.gallery--cut .g-img { aspect-ratio: 1; overflow: visible; }
.gallery--scene .g-img { aspect-ratio: 3 / 4; background: #f6eef2; }
.space__body--gallery .gallery--cut .g-img img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.space__body--gallery .gallery--scene .g-img img { width: 100%; height: 100%; object-fit: cover; }
.g-name { margin: 12px 0 0; color: var(--m-ink); font-family: var(--m-display); font-size: 18px; font-weight: 600; line-height: 1.25; text-align: center; }
.gallery--scene .g-name { margin-top: 10px; }
@media (max-width: 860px) { .g-name { margin-top: 8px; font-size: 16px; } }

/* ---------- gallery slider ---------- */
html.has-slider, html.has-slider .space { overflow: hidden; }
.slider { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: #fff; animation: space-in .3s ease both; }
.slider[hidden] { display: none; }
.slider__track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__slide { flex: 0 0 100%; display: grid; place-items: center; margin: 0; padding: 70px 84px 10px; scroll-snap-align: center; scroll-snap-stop: always; }
.slider__slide img { width: auto; height: auto; max-width: min(100%, 1000px); max-height: 100%; object-fit: contain; }
.slider__cap { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 14px 20px 26px; text-align: center; }
.slider__name { color: var(--m-ink); font-family: var(--m-display); font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; line-height: 1.2; }
.slider__count { color: var(--m-text); font-size: 13px; font-weight: 600; letter-spacing: .12em; }
.slider button { position: absolute; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid var(--m-line); color: var(--m-ink); transition: border-color .2s, color .2s, opacity .2s; }
.slider button:hover { border-color: var(--m-accent); color: var(--m-accent); }
.slider button:disabled { opacity: .25; pointer-events: none; }
.slider button svg { width: 20px; height: 20px; }
.slider__close { top: 16px; right: 16px; }
.slider__prev { left: 20px; top: 45%; rotate: 180deg; }
.slider__next { right: 20px; top: 45%; }
@media (max-width: 860px) {
  .slider__slide { padding: 64px 14px 4px; }
  .slider__cap { padding-bottom: 22px; }
}
/* 2026-10-22: hide the arrows only on touch screens (people swipe there). They used to hide on any window
   narrower than 861 px, so a desktop window that was not full screen had no way to go left or right. */
@media (max-width: 860px) and (pointer: coarse) {
  .slider .slider__prev, .slider .slider__next { display: none; }
}

/* phones: the languages move from the header into the menu list (2026-10-20) */
.mnav__lang { display: none; }
@media (max-width: 860px) {
  .mhead .mlang { display: none; }
  .mnav .mnav__lang { display: flex; gap: 8px; margin: 0; padding: 16px 0 10px; border: 0; background: none; }
  .mnav .mnav__lang a { min-width: 52px; height: 40px; display: grid; place-items: center; padding: 0 14px; border: 1px solid var(--m-line); border-bottom: 1px solid var(--m-line); border-radius: 2px; color: var(--m-ink); font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .1em; }
  .mnav .mnav__lang a[aria-current] { background: var(--m-accent); border-color: var(--m-accent); color: #fff; }
  .mnav .mnav__lang a[lang="ar"] { font-family: "Tajawal", system-ui, sans-serif; font-size: 17px; letter-spacing: 0; }
}

/* the rating line under "Visit our shop" in the same green */
.mvisit .rating { color: var(--m-text); }

/* everything else on the home page (visit details, footer) in the same green */
main#top, .mvisit__list li, .mvisit__list a, .mvisit__list span, .mfoot { color: var(--m-text); }

/* "Ask for florist's choice": white button with deep green text and border (2026-10-20, by request) */
#choice-title ~ .mbtn { background: #fff; color: var(--m-green); box-shadow: inset 0 0 0 1.5px var(--m-green); }
#choice-title ~ .mbtn:hover { background: var(--m-green); color: #fff; }

/* gallery and story pages: buttons and collection tabs in the same outline style as
   "Read our story" (magenta text and border, filled magenta on hover or when current), 2026-10-20 */
.space .btn, .space .btn--peach, .space .btn--line { height: 46px; border: 0; border-radius: 2px; background: transparent; color: var(--m-accent); box-shadow: inset 0 0 0 1.5px var(--m-accent); font-size: 12.5px; letter-spacing: .12em; }
.space .btn svg, .space .btn--peach svg { color: currentColor; }
.space .btn:hover { background: var(--m-accent); color: #fff; transform: none; }
.space .tabs a { border: 0; border-radius: 2px; background: transparent; color: var(--m-accent); box-shadow: inset 0 0 0 1.5px var(--m-accent); }
.space .tabs a:hover, .space .tabs a[aria-current] { background: var(--m-accent); color: #fff; }

/* gallery pages, phones: "Seen one you like?" without the pale box, just the line and the button (2026-10-20) */
@media (max-width: 860px) {
  .space__body--gallery .space__cta { margin-top: 30px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: center; }
  .space__body--gallery .space__cta p { margin: 0 0 14px; color: var(--m-text); font-family: var(--sans); font-size: 15px; line-height: 1.6; }
}
.space__body--gallery .space__cta p { color: var(--m-text); }

/* phones (2026-10-20): pages only move up and down. The grow-on-hover of cut-outs is kept for mouse
   users only: on touch screens a finger counts as hover, and a piece at the edge grew past the screen,
   which let the Arrangements, Boxes and Gifts galleries slide sideways. */
html, body { overflow-x: clip; }
.space { overflow-x: hidden; overscroll-behavior-x: none; }
@media (hover: none), (pointer: coarse) {
  .gallery--cut li:hover img, .gallery li:hover img,
  .mgrid a:hover img, .mgrid a:hover .mgrid__img--cut img, .mcats a:hover img, .mcats a:hover .mgrid__img--cut img { transform: none; }
}

/* gallery tiles, Safari fix (2026-10-20): the square (cut-outs) or 3:4 frame (bouquet scenes) is fixed by the
   column width and the picture is laid inside it, so a tall picture can no longer stretch its tile wider
   than the column. Before this, on iPhones, some pieces slid out past the screen edge after loading. */
.space__body--gallery .gallery--cut li, .space__body--gallery .gallery--scene li { min-width: 0; }
.gallery--cut .g-img, .gallery--scene .g-img { position: relative; display: block; width: 100%; height: auto; min-height: 0; }
.space__body--gallery .gallery--cut .g-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; object-position: 50% 100%; }
.space__body--gallery .gallery--scene .g-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* slider, all browsers (2026-10-20): each slide is a fixed frame (the track height) and the picture is fitted
   inside it whole. Before, Chrome let the picture grow past the screen and cut off its bottom. */
.slider__track { min-height: 0; }
.slider__slide { display: block; height: 100%; min-width: 0; }
.slider__slide img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }

/* desktop hero (2026-10-20): "VERT" and "TIGE" mirrored exactly around the arrangement. Two equal columns
   with the bouquet's width between them; VERT hugs the bouquet from the left, TIGE from the right, and the
   spacing after each word's last letter is cancelled so the letters (not the spacing) meet the gap. */
@media (min-width: 861px) {
  .mhero h1 span { display: grid; grid-template-columns: 1fr 41.4% 1fr; align-items: baseline; padding: 0; }
  .mhero h1 b:first-child { grid-column: 1; justify-self: end; margin-right: -.16em; }
  .mhero h1 b:last-child { grid-column: 3; justify-self: start; margin-right: -.16em; }
}

/* footer social links (2026-10-20, by request): on phones the official Instagram, Facebook and WhatsApp
   logos in their own colours; desktop keeps the words. Names stay in the page for screen readers. */
.msocial__logo { display: none; }
@media (max-width: 860px) {
  .mfoot .msocial { gap: 26px; }
  .msocial a { display: grid; place-items: center; width: 48px; height: 48px; }
  .msocial__logo { display: block; width: 34px; height: 34px; }
  .msocial a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* phones (2026-10-20, by request): no "The language of flowers · Tripoli, Lebanon" line in the footer */
@media (max-width: 860px) { .mfoot p:not(.mfoot__credit) { display: none; } }

/* footer social logos on desktop too (2026-10-20, by request) */
.mfoot .msocial { gap: 22px; }
.msocial a { display: grid; place-items: center; width: 44px; height: 44px; transition: transform .2s; }
.msocial a:hover { transform: translateY(-2px); }
.msocial__logo { display: block; width: 30px; height: 30px; }
.msocial a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 860px) { .mfoot .msocial { gap: 26px; } .msocial a { width: 48px; height: 48px; } .msocial__logo { width: 34px; height: 34px; } }

/* 2026-10-20 link check: "Home" and the logo (#top) go to the very top, above the header, which is not sticky. */
#top { scroll-margin-top: 100vh; }

/* 2026-10-20: tabs between galleries swap instantly; the fade-in is only for opening from the home page. */
.space.is-switch { animation: none; }

/* 2026-10-20: seasonal note under each gallery intro. */
.space__note { margin: 12px 0 0; max-width: 52ch; color: var(--m-ink, #2e5130); font-size: 13.5px; line-height: 1.6; opacity: .78; }
@media (max-width: 860px) { .space__body--gallery .space__note { margin-top: -10px; } } /* phones: the side column is display: contents, so the body's row gap sits above the note */

/* 2026-10-20, by request: no "VERT TIGE" on the hero picture. Kept for search and screen readers (the page's h1). */
.mhero h1 > span { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 2026-10-23, by request: galleries show one piece at a time, each alone on its own line, never side by side.
   The name, a short description and an order link sit under each piece. As a piece scrolls in it rises and unveils slowly:
   cut-outs open from the base upwards, as if growing; studio photos open like a frame while the photo
   settles from a slight zoom. Pieces below the screen reset, so the reveal plays again on the way down.
   Without JavaScript, or with reduced motion, everything simply shows. */
.space__body--gallery .gallery.gallery--cut, .space__body--gallery .gallery.gallery--scene {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(80px, 15vh, 160px); padding: 7vh 0 6vh; grid-template-columns: none;
}
.space__body--gallery .gallery.gallery--cut li, .space__body--gallery .gallery.gallery--scene li { width: min(100%, var(--piece)); }
.space__body--gallery .gallery.gallery--cut li { --piece: min(560px, 66vh); }
.space__body--gallery .gallery.gallery--scene li { --piece: min(520px, 52vh); }
.space__body--gallery .gallery--cut .g-name, .space__body--gallery .gallery--scene .g-name { margin-top: 26px; font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: .02em; }
/* 2026-10-23, by request: no numbers; instead a short description and an "Order this one" link under each name */
.g-desc { max-width: 40ch; margin: 12px auto 0; color: var(--m-text); font-family: var(--sans); font-size: 15px; line-height: 1.7; text-align: center; text-wrap: pretty; }
.g-order {
  position: relative; display: flex; align-items: center; gap: 8px; width: max-content; margin: 18px auto 0; padding: 4px 0;
  color: var(--m-accent); font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.g-order svg { width: 16px; height: 16px; flex: none; }
.g-order::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(.35); transition: transform .5s cubic-bezier(.16, .84, .24, 1); }
.g-order:hover::after, .g-order:focus-visible::after { transform: scaleX(1); }
[dir="rtl"] .g-order { letter-spacing: 0; font-size: 15px; }
@media (max-width: 860px) { .g-desc { font-size: 14.5px; } }
@media (max-width: 860px) {
  .space__body--gallery .gallery.gallery--cut, .space__body--gallery .gallery.gallery--scene { gap: 72px; padding: 36px 0 12px; }
  .space__body--gallery .gallery.gallery--cut li { --piece: min(100%, 420px); }
  .space__body--gallery .gallery.gallery--scene li { --piece: 100%; }
  .space__body--gallery .gallery--cut .g-name, .space__body--gallery .gallery--scene .g-name { margin-top: 18px; font-size: 22px; }
}

@media (prefers-reduced-motion: no-preference) {
  .gallery.is-reveal li .g-img {
    opacity: 0; translate: 0 56px;
    transition: opacity 1.1s cubic-bezier(.33, 0, .2, 1), translate 1.5s cubic-bezier(.16, .84, .24, 1), clip-path 1.6s cubic-bezier(.16, .84, .24, 1);
  }
  .gallery--cut.is-reveal li .g-img { clip-path: inset(38% -25% -25% -25%); }
  .gallery--scene.is-reveal li .g-img { clip-path: inset(9% 7% 9% 7%); }
  .gallery--scene.is-reveal li .g-img img { scale: 1.12; transition: scale 2.4s cubic-bezier(.16, .84, .24, 1), transform .5s; }
  .gallery.is-reveal li .g-name { opacity: 0; translate: 0 14px; transition: opacity 1s ease .35s, translate 1.2s cubic-bezier(.16, .84, .24, 1) .35s; }
  .gallery.is-reveal li.is-in .g-img { opacity: 1; translate: 0 0; }
  .gallery--cut.is-reveal li.is-in .g-img { clip-path: inset(-25% -25% -25% -25%); }
  .gallery--scene.is-reveal li.is-in .g-img { clip-path: inset(0 0 0 0); }
  .gallery--scene.is-reveal li.is-in .g-img img { scale: 1; }
  .gallery.is-reveal li.is-in .g-name { opacity: 1; translate: 0 0; }
  .gallery.is-reveal li .g-desc { opacity: 0; translate: 0 12px; transition: opacity 1s ease .55s, translate 1.2s cubic-bezier(.16, .84, .24, 1) .55s; }
  .gallery.is-reveal li .g-order { opacity: 0; transition: opacity .9s ease .8s; }
  .gallery.is-reveal li.is-in .g-desc { opacity: 1; translate: 0 0; }
  .gallery.is-reveal li.is-in .g-order { opacity: 1; }
}

/* 2026-10-23, by request: the name, description and order link sit beside each piece, not under it.
   The sides alternate down the page (photo, words / words, photo) like an editorial spread. Arabic mirrors itself. */
.space__body--gallery .gallery.gallery--cut > li, .space__body--gallery .gallery.gallery--scene > li {
  display: grid; width: 100%; max-width: 980px; align-items: center; justify-content: center;
  grid-template-columns: minmax(0, var(--piece)) minmax(0, 340px); grid-template-rows: 1fr auto auto auto 1fr;
  column-gap: clamp(36px, 5vw, 84px);
}
.space__body--gallery .gallery > li > .g-img { grid-column: 1; grid-row: 1 / -1; align-self: center; }
.space__body--gallery .gallery > li > .g-name { grid-column: 2; grid-row: 2; margin: 0; text-align: start; }
.space__body--gallery .gallery > li > .g-desc { grid-column: 2; grid-row: 3; max-width: 36ch; margin: 14px 0 0; text-align: start; }
.space__body--gallery .gallery > li > .g-order { grid-column: 2; grid-row: 4; margin: 20px 0 0; }
.space__body--gallery .gallery.gallery--cut > li:nth-child(even), .space__body--gallery .gallery.gallery--scene > li:nth-child(even) { grid-template-columns: minmax(0, 340px) minmax(0, var(--piece)); }
.space__body--gallery .gallery > li:nth-child(even) > .g-img { grid-column: 2; }
.space__body--gallery .gallery > li:nth-child(even) > .g-name,
.space__body--gallery .gallery > li:nth-child(even) > .g-desc,
.space__body--gallery .gallery > li:nth-child(even) > .g-order { grid-column: 1; }
.g-order::after { transform-origin: 0 50%; }
[dir="rtl"] .g-order::after { transform-origin: 100% 50%; }
@media (max-width: 860px) {
  .space__body--gallery .gallery.gallery--cut > li, .space__body--gallery .gallery.gallery--scene > li { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); column-gap: 18px; }
  .space__body--gallery .gallery.gallery--cut > li:nth-child(even), .space__body--gallery .gallery.gallery--scene > li:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
  .space__body--gallery .gallery--cut .g-name, .space__body--gallery .gallery--scene .g-name { font-size: 19px; line-height: 1.2; }
  .space__body--gallery .gallery > li > .g-desc { margin-top: 8px; font-size: 13px; line-height: 1.55; }
  .space__body--gallery .gallery > li > .g-order { margin-top: 12px; font-size: 10.5px; letter-spacing: .12em; }
  [dir="rtl"] .space__body--gallery .gallery > li > .g-order { font-size: 13px; letter-spacing: 0; }
  .space__body--gallery .gallery.gallery--cut, .space__body--gallery .gallery.gallery--scene { gap: 56px; }
}