/* Glo Little Luxury — homepage v2 (duplicate for comparison).
 *
 * Loaded on /?design=v2 and the style guide, after glo-v2-base.css (which holds
 * the site-wide fixes: control colours, header edge, contrast, states, cards,
 * WhatsApp band, touch targets). Everything here is homepage layout, scoped to
 * body.glo-home-v2. Written up in STYLE-GUIDE.md.
 *
 * Section order (owner's brief, 17 Sep): hero, hair care banner, best sellers,
 * categories, shop by concern, trust strip, our story, WhatsApp band.
 */

/* ==========================================================================
   1. Section rhythm (audit: Medium)
   One padding everywhere made the page read as a list. Tight bands (trust)
   against generous ones (shopping sections, story).
   ========================================================================== */
.glo-home-v2 .glo-section { padding: clamp(44px, 6vw, 80px) 0; }
.glo-home-v2 .glo-v2-story { padding: clamp(56px, 8vw, 112px) 0; }
.glo-home-v2 .glo-v2-trust { padding: 22px 0; border-top: 1px solid var(--glo-border); border-bottom: 1px solid var(--glo-border); }
.glo-home-v2 .glo-section-head { margin-bottom: clamp(20px, 2.4vw, 28px); align-items: flex-end; }

/* ==========================================================================
   2. Hero (owner, 17 Sep: lifestyle gallery)
   A centred headline over a staggered gallery. One grid with named areas per
   width, so the tiles can drop out cleanly: seven on desktop, five on tablet,
   four on phones. Three tiles carry a stepped top corner, cut with a Cream
   notch (the hero ground) and two small fillets, so no image editing is needed.

     Desktop (5 columns)            Tablet (3)      Phone (2)
     [a]     .    .    .    [f]     [  cta  ]       [  cta  ]
     [a]    [c]   .   [e]   [f]     [a][c][e]       [a][c]
     [a]    [c]  [d]  [e]   [f]     [a][c][e]       [a][c]
     [b]    [c] [cta] [e]   [g]     [b][c][f]       [b][e]
   ========================================================================== */
.glo-home-v2 .glo-v2-hero { padding: clamp(32px, 5vw, 64px) 0 clamp(40px, 5vw, 72px); }
.glo-v2-hero__head { max-width: 760px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
.glo-home-v2 .glo-v2-hero__head h1 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); margin: 14px 0 14px; text-wrap: balance; }
.glo-home-v2 .glo-v2-hero__head p { max-width: 52ch; margin: 0 auto; }

.glo-v2-hero__gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(10, 32px);
  grid-template-areas:
    "a . . . f"
    "a c . e f"
    "a c d e f"
    "a c d e f"
    "a c d e f"
    "a c d e f"
    "a c d e f"
    "b c k e g"
    "b c k e g"
    "b c k e g";
  gap: 16px;
}
.glo-v2-hero__tile--a { grid-area: a; }
.glo-v2-hero__tile--b { grid-area: b; }
.glo-v2-hero__tile--c { grid-area: c; }
.glo-v2-hero__tile--d { grid-area: d; }
.glo-v2-hero__tile--e { grid-area: e; }
.glo-v2-hero__tile--f { grid-area: f; }
.glo-v2-hero__tile--g { grid-area: g; }
.glo-v2-hero__cta { grid-area: k; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.glo-v2-hero__cta .glo-btn { width: 100%; }
.glo-home-v2 a.glo-v2-hero__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--glo-teal-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.glo-v2-hero__tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: 0;
  border-radius: var(--glo-radius-lg);
  background: var(--glo-linen);
  isolation: isolate;
  transition: transform .16s cubic-bezier(.23, 1, .32, 1);
}
.glo-v2-hero__tile.is-teal { background: var(--glo-teal-50); }
.glo-v2-hero__tile.is-linen { background: var(--glo-linen); }
.glo-v2-hero__tile.is-rouge { background: var(--glo-rouge-50); }
.glo-v2-hero__tile.is-cream { background: var(--glo-surface); }
.glo-v2-hero__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
/* A tile standing in with a product photograph rather than the lifestyle shot it
   was designed for: the pack sits inside the tint instead of being cropped to
   fill, which is what a packshot needs. Replacing the photo removes the class. */
.glo-v2-hero__tile.is-stand-in img {
  inset: clamp(8px, 1.4vw, 18px);
  width: auto;
  height: auto;
  margin: auto;
  object-fit: contain;
  border-radius: calc(var(--glo-radius-lg) - 8px);
}
.glo-v2-hero__tile:active { transform: scale(.99); }
/* The shelf name, on a tile with no photograph of any kind behind it. */
.glo-v2-hero__slot {
  margin: 12px;
  font-size: clamp(13px, 1.3vw, 16px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--glo-teal-ink);
}

/* Stepped corner: a Cream block over the top-right of the tile, rounded where
   it meets the photo, with two fillets that round the tile's new corners. */
.glo-v2-hero__notch {
  --notch-w: 38%;
  --notch-h: 28px;
  --fillet: 14px;
  position: absolute;
  top: 0;
  right: 0;
  width: var(--notch-w);
  height: var(--notch-h);
  background: var(--glo-cream);
  border-bottom-left-radius: var(--fillet);
  pointer-events: none;
}
.glo-v2-hero__notch::before,
.glo-v2-hero__notch::after {
  content: "";
  position: absolute;
  width: var(--fillet);
  height: var(--fillet);
  background: radial-gradient(circle at 0 100%, transparent calc(var(--fillet) - .5px), var(--glo-cream) var(--fillet));
}
.glo-v2-hero__notch::before { top: 0; left: calc(-1 * var(--fillet)); }
.glo-v2-hero__notch::after { top: var(--notch-h); right: 0; }

@media (hover: hover) and (pointer: fine) {
  .glo-v2-hero__tile:hover { transform: translateY(-2px); }
}

/* Tablet: three columns, five photos, the button above them. */
@media (max-width: 980px) {
  .glo-v2-hero__gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto repeat(6, 48px);
    grid-template-areas:
      "k k k"
      "a c e"
      "a c e"
      "a c e"
      "a c f"
      "b c f"
      "b c f";
    gap: 12px;
  }
  .glo-v2-hero__tile--d,
  .glo-v2-hero__tile--g { display: none; }
  .glo-v2-hero__cta { flex-direction: row; justify-content: center; align-items: center; gap: 16px; margin-bottom: 8px; }
  .glo-v2-hero__cta .glo-btn { width: auto; min-width: 220px; }
}

/* Phone: two columns, four photos. */
@media (max-width: 600px) {
  .glo-home-v2 .glo-v2-hero__head { text-align: left; margin-bottom: 20px; }
  .glo-home-v2 .glo-v2-hero__head h1 { font-size: clamp(1.875rem, 8.2vw, 2.125rem); }
  .glo-home-v2 .glo-v2-hero__head p { margin: 0; }
  .glo-v2-hero__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto repeat(6, 56px);
    grid-template-areas:
      "k k"
      "a c"
      "a c"
      "a c"
      "a f"
      "b f"
      "b f";
    gap: 10px;
  }
  /* The phone keeps four photographs, and f is one of them: it carries the
     hair range, which is the newest thing on the site and the reason most of
     this traffic arrives. Body care keeps its place on tablet and desktop. */
  .glo-v2-hero__tile--e { display: none; }
  .glo-v2-hero__tile { border-radius: var(--glo-radius-md); }
  .glo-v2-hero__notch { --notch-h: 22px; --fillet: 12px; }
  .glo-v2-hero__cta { flex-direction: column; align-items: stretch; gap: 0; margin-bottom: 10px; }
  .glo-v2-hero__cta .glo-btn { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .glo-v2-hero__tile { transition: none; }
  .glo-v2-hero__tile:hover,
  .glo-v2-hero__tile:active { transform: none; }
}

/* ==========================================================================
   3. Hair care banner (owner's brief: directly after the hero)
   The whole banner is one link to the Hair Care page. Teal Night, the same
   dark as the WhatsApp close, so the page opens and ends on the brand colour.
   While the category is empty it says "Arriving soon" and shows the brands
   from the photo labels; once products exist it shows three of them.
   ========================================================================== */
.glo-v2-hairband-wrap { padding: 0 0 clamp(8px, 2vw, 16px); }
.glo-v2-hairband {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 4.5vw, 56px);
  border-radius: var(--glo-radius-lg);
  background: var(--glo-teal-deep);
  color: #fff;
  /* The positioning context for the button's stretched ::after below. */
  position: relative;
  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
/* The band is a div now, with the brand names as links of their own. The card
   still opens Hair Care from anywhere outside a brand: the button's ::after
   covers it. Hovering that layer counts as hovering the button, so the tint
   follows the button and not the brand links that sit above it. */
.glo-v2 .glo-v2-hairband:has(.glo-v2-hairband__cta:hover) { background: #164452; } /* deep teal, one step lighter */
.glo-home-v2 .glo-v2-hairband .glo-v2-hairband__status { color: #fff; }
.glo-v2-hairband__status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: var(--glo-radius-pill);
  background: var(--glo-coral);
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 16px;
}
.glo-home-v2 .glo-v2-hairband h2 { color: #fff; font-size: clamp(28px, 4vw, 48px); line-height: 1.08; margin: 0 0 12px; max-width: 16ch; }
.glo-home-v2 .glo-v2-hairband p { color: var(--glo-teal-100); font-size: 16px; line-height: 1.6; margin: 0 0 20px; max-width: 46ch; }
/* Two classes on purpose: as an <a>, a single class loses to
   `.glo-theme a { color: inherit }` (0,1,1) and the label goes white on the
   white button. */
.glo-v2 .glo-v2-hairband__cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--glo-radius-sm);
  background: var(--glo-surface);
  color: var(--glo-ink);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.glo-v2 .glo-v2-hairband__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--glo-radius-lg);
}
/* Press feedback by colour, never transform. A transform makes the button the
   containing block of its own ::after, so on press the card-wide layer shrank
   to the button, the release landed outside it, and a click on the heading or
   photo stopped opening Hair Care. */
.glo-v2 .glo-v2-hairband__cta:active { background: var(--glo-teal-100); }
/* The shared ring is teal-bright, which barely separates from Teal Night. */
.glo-v2 .glo-v2-hairband a:focus-visible { outline-color: #fff; }
/* The brand names moved out of the right column and under the sub-copy, so the
   photograph can have that half. They are smaller here than when they filled a
   column on their own: at display size under a paragraph they competed with the
   heading. Body face rather than display, because six names in a serif at this
   size read as a second headline. */
/* Scoped under .glo-v2 on purpose. The theme reset `.glo-theme ul { margin: 0 }`
   has specificity (0,1,1) and was quietly winning over the (0,1,0) selector this
   used to carry, so the row lost its bottom margin and the pills sat flush
   against the button underneath. */
.glo-v2 .glo-v2-hairband__brands {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* Rhythm down the copy column: 12px holds the heading to its paragraph, 20px
     keeps the brand names reading as part of that paragraph, 28px is the break
     before the action. Contrast between the three is what makes it a rhythm
     rather than a list. */
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  max-width: 46ch;
}
.glo-v2-hairband__brands li {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: var(--glo-radius-pill);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22);
  font-family: var(--glo-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
  white-space: nowrap;
}
/* Each brand opens its own page (owner, 1 Oct: "click L'Oreal, show L'Oreal").
   The pill moves from the item to the link, so the whole pill is the target,
   and the link is lifted above the card's stretched Hair Care layer. Keyed
   on a class, not li:has(> a): a browser without :has() kept the item's
   padding and border around the link, and a click on that rim fell through
   to the Hair Care layer instead of the brand. */
.glo-v2 .glo-v2-hairband__brands--links li { min-height: 0; padding: 0; box-shadow: none; }
.glo-v2 .glo-v2-hairband__brands a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--glo-radius-pill);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28);
  color: #fff;
  text-decoration: none;
  transition: background-color 150ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 150ms cubic-bezier(0.23, 1, 0.32, 1), transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.glo-v2 .glo-v2-hairband__brands a:focus-visible { border-radius: var(--glo-radius-pill); }
.glo-v2 .glo-v2-hairband__brands a:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .glo-v2 .glo-v2-hairband__brands a:hover { background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6); }
}
/* A finger needs 44px; the pills only look smaller with a mouse. */
@media (pointer: coarse) {
  .glo-v2 .glo-v2-hairband__brands a { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .glo-v2 .glo-v2-hairband,
  .glo-v2 .glo-v2-hairband__brands a { transition: none; }
}

/* The photograph. It carries the panel's own radius so the corner does not
   double, and it is cropped rather than letterboxed: the asset is generated
   16:9 with the bottles right of centre, and this slot is nearer square at
   desktop, so cover keeps the products and drops the empty left third.
   The crop is pinned to the right edge because the rightmost bottle sits
   76px from it; anything less slices that bottle in half. */
/* The photograph's backdrop is flat --glo-teal-deep, the panel's own colour,
   so the bottles read as standing in the band rather than in a picture pasted
   onto it. That is done in the asset, not here: the studio lighting ran from
   (33,109,131) in the glow behind the bottles to (0,34,33) in the corners
   against a panel of (7,59,69), and no single grade reaches both ends of a
   100-point spread. The file is flat-fielded instead -- the illumination is
   modelled and subtracted, so the backdrop is the panel colour everywhere and
   the podiums, floor and contact shadows keep their own contrast against it.
   The outer 32px of the file is locked to the panel exactly, because "within
   fifteen points" along a straight line is what the eye reads as a frame.
   Keeping a radius here would draw that frame back on. */
.glo-v2-hairband__figure {
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  align-self: stretch;
  min-height: 220px;
  /* One edge needs feathering, and only at this width. The slot is nearer
     square than the 16:9 asset, so cover crops the left third away and the
     figure's left edge falls mid-photograph, through the podium under the
     Boots bottle. The other three edges are the file's own, and those already
     carry the panel colour. The radial mask this replaces dissolved the
     corners the flat field has since made unnecessary, and came close enough
     to the rightmost bottle to take the edge off it. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%);
  mask-image: linear-gradient(to right, transparent 0, #000 12%);
}
.glo-v2-hairband__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 50%;
}

/* Nothing in the right column: one column, and the copy keeps its measure
   rather than stretching across the whole panel. */
.glo-v2-hairband--solo { grid-template-columns: minmax(0, 1fr); }
.glo-v2-hairband__media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.glo-v2-hairband__media span { aspect-ratio: 1; border-radius: var(--glo-radius-md); background: var(--glo-cream); overflow: hidden; display: block; }
.glo-v2-hairband__media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }

@media (max-width: 860px) {
  .glo-v2-hairband { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  /* Stacked, the figure matches the asset's own ratio, so nothing is cropped
     and the left edge no longer needs feathering. The bottom does: the floor
     runs to the file's edge and the copy starts directly underneath. */
  .glo-v2-hairband__figure {
    min-height: 0; aspect-ratio: 16 / 9; order: -1;
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  }
  .glo-v2-hairband__figure img { object-position: 60% 50%; }
}
@media (max-width: 600px) {
  .glo-v2 .glo-v2-hairband__brands { gap: 6px; margin-bottom: 22px; }
  .glo-v2-hairband__brands li { min-height: 32px; padding: 0 12px; font-size: 13px; }
  .glo-v2 .glo-v2-hairband__brands a { padding: 0 12px; }
  .glo-v2 .glo-v2-hairband__cta { width: 100%; justify-content: center; }
}

/* ==========================================================================
   4. Grids that fill their rows (audit: Medium)
   ========================================================================== */
/* Best sellers: twelve products, six across (owner, 2 Oct: "six instead of
   three, by making it a bit smaller"). Twelve divides by 6, 4, 3 and 2, so
   every width ends on a full row. */
.glo-home-v2 .glo-v2-products .glo-prod-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
/* At six across, names wrap to two, three or four lines and would push each
   price to a different height. Rather than cutting names short (the size is
   often at the end: "..., 360 ml"), each card shares its row tracks with the
   other cards in its row through subgrid: photo, category, name, price, saving
   and button each start on the same line across the row, and every name is
   shown in full. Browsers without subgrid show full names, unaligned. */
@supports (grid-template-rows: subgrid) {
  .glo-home-v2 .glo-v2-products .glo-prod-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
  .glo-home-v2 .glo-v2-products .glo-prod-img { grid-row: 1; }
  .glo-home-v2 .glo-v2-products .glo-prod-body { display: grid; grid-row: 2 / span 5; grid-template-rows: subgrid; row-gap: 6px; }
  .glo-home-v2 .glo-v2-products .glo-prod-cat { grid-row: 1; }
  .glo-home-v2 .glo-v2-products .glo-prod-title-link { grid-row: 2; }
  .glo-home-v2 .glo-v2-products .glo-prod-price { grid-row: 3; align-self: start; }
  .glo-home-v2 .glo-v2-products .glo-save { grid-row: 4; justify-self: start; align-self: start; }
  .glo-home-v2 .glo-v2-products .glo-prod-cart { grid-row: 5; align-self: end; }
}
.glo-home-v2 .glo-concern-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1199px) {
  .glo-home-v2 .glo-v2-products .glo-prod-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .glo-home-v2 .glo-v2-products .glo-prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 600px) {
  .glo-home-v2 .glo-v2-products .glo-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .glo-home-v2 .glo-concern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* ==========================================================================
   5. Story as one reading column (audit: Medium)
   ========================================================================== */
.glo-v2-story__text { max-width: 640px; }
.glo-home-v2 .glo-v2-story h2 { font-size: clamp(28px, 3.6vw, 44px); margin-bottom: 18px; }
.glo-home-v2 .glo-v2-story p { font-size: 16px; line-height: 1.7; color: var(--glo-ink-soft); margin: 0 0 14px; max-width: 62ch; }
.glo-home-v2 .glo-v2-story .glo-btn { margin-top: 14px; }
@media (max-width: 600px) {
  .glo-home-v2 .glo-v2-story p { font-size: 15px; }
}

/* Best sellers: the way on to the whole shop, under the last row. */
.glo-v2-products__more { display: flex; justify-content: center; margin-top: 32px; }
/* The ghost button's border is near the cream ground's own colour, so it
   read as plain text: white fill and an ink outline make it a button. */
/* Clay red (style guide 1.2 campaign accent), owner's choice: a contrasting
   colour after twelve teal "Add to bag" buttons. White on clay red 5.78:1;
   never white on dusty rose (below 4.5:1). */
.glo-v2 a.glo-btn.glo-v2-products__all { min-width: 240px; background: var(--glo-clay, #A94358); color: #fff; box-shadow: none; }
.glo-v2 a.glo-btn.glo-v2-products__all:hover { background: color-mix(in srgb, var(--glo-clay, #A94358) 82%, #000); color: #fff; }
.glo-v2 a.glo-btn.glo-v2-products__all:focus-visible { outline: 2px solid var(--glo-clay, #A94358); outline-offset: 3px; }
@media (max-width: 600px) {
  .glo-v2-products__more { margin-top: 24px; }
  .glo-v2-products__more .glo-btn { width: 100%; }
}

/* Categories: seven shelves plus "All categories" make eight, so four across
   on desktop and tablet and two on phones leave no card alone on a row. */
.glo-home-v2 .glo-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.glo-cat-card--all .glo-cat-ic { background: var(--glo-teal-bright); color: #fff; }
@media (max-width: 600px) {
  .glo-home-v2 .glo-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Trust strip in plum (owner, 14 Oct). "Shop by concern" is hidden until a
   concern holds products, and its plum moves here, the same slot between the
   categories and First Friday, so the page keeps one coloured break. The icon
   chips take the lilac-and-plum pair the category tiles already use. White on
   plum 6.8:1, lilac on plum 5.3:1. Only while the concern band is away
   (front-page-v2.php), so two plum bands never sit together. */
.glo-home-v2 .glo-v2-trust--plum { padding: clamp(26px, 3.2vw, 36px) 0; background: var(--glo-plum, #695084); border-color: transparent; }
.glo-home-v2 .glo-v2-trust--plum .glo-trust-item h3 { color: #fff; }
.glo-home-v2 .glo-v2-trust--plum .glo-trust-item p { color: var(--glo-lilac, #E7E0EE); }
.glo-home-v2 .glo-v2-trust--plum .glo-trust-ic { background: var(--glo-lilac, #E7E0EE); color: var(--glo-plum, #695084); }

/* The strip's small line dropped to 11px between 601 and 768px
   (glo-responsive.css); 12px is the floor everywhere. */
.glo-home-v2 .glo-trust-item p { font-size: 12px; }
