/* Post-launch corrections layer - loaded after assets/site, same-specificity rules here win.
   NOTE: bump the ?v= on this file's <link> in layout/default on every change (immutable caching). */

/* Hero video: the overlay gradient ended at 85% opacity, letting the bright video peek
   through as a thin 'see-through' line at the very bottom edge. End fully opaque so the
   video area melts seamlessly into the dark stats band. Also kill any inline-video gap. */
.sl-hero__overlay{background:linear-gradient(180deg,rgba(27,25,22,.8),rgba(27,25,22,.35) 45%,rgba(27,25,22,.85) 90%,rgba(27,25,22,1))}
.sl-hero video{display:block}

/* The hero box height is fractional (e.g. 566.594px); the composited video layer rounds a
   sub-pixel row PAST the rasterized overlay, bleeding a bright seam at the bottom edge.
   Overhang the overlay 2px below the box (parent does not clip; it lands on the identical
   dark of the stats band) and trim the video's own last row for good measure. */
.sl-hero__overlay{bottom:-2px}
.sl-hero__video{clip-path:inset(0 0 1px 0)}

/* Stats band: equal breathing room above and below the figures (they were touching the video). */
.band-stats{padding:34px 0}

/* Services band header: heading sized like the other big section headings, 'see all' link on
   the right in the same line, and real space before the cards (the row sat flush on the grid). */
.band-supply .sl-band-header-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 40px;text-align:left;margin-bottom:38px}
.band-supply .sl-band-header-row h2{font-size:clamp(30px,3.4vw,42px);line-height:1.1;letter-spacing:-.02em;margin:0}

/* 'Our Livestock' cards: the theme pinned card images to 150px tall for the old 4-column grid;
   the two-column cards have a ~360px media box, so the photo filled only 42% of it and looked
   'half loaded'. Let the photo fill its frame at every width. */
.band-supply .sl-post-media{display:block;overflow:hidden}
.band-supply .sl-post-media img{width:100%;height:100%;object-fit:cover;display:block}

/* Footer legal links (Privacy / Cookie / Terms): match the footer's muted link style. */
.ft-legal a{color:var(--on-dark-4);text-decoration:none}
.ft-legal a:hover{color:var(--gold)}

/* Contact map: the map-embed section renders a bare full-width iframe. Keep it inside the
   content width and make it a compact centered square (scales down on phones). */
.band-map{padding:8px 24px 72px}
.band-map iframe{display:block;width:min(100%,480px);height:min(480px,calc(100vw - 48px));margin:0 auto;border:0;border-radius:16px}

/* Home call-back band (Tell Us What You Need): the platform caps the form-only block at 720px,
   which wrapped the heading to two lines and the subtitle to four with a 40px row gap below the
   heading. Use the full content width, tighten the rows and trim the band padding. */
@media (min-width:820px){
  .band-cta .sl-contact--form-only{max-width:none}
  .band-cta .sl-contact--form-only > div{grid-template-columns:1.15fr 1fr;gap:10px 56px}
}
.band-cta{padding:44px 0}
.band-cta .sl-heading{margin-bottom:4px}

/* ============ PHONE (user-requested mobile pass, 2026-08-12) ============ */
@media (max-width:760px){
  /* 1. utility bar (tel / mail / WhatsApp / hours) fully hidden on phones */
  .topbar{display:none}

  /* 2. header: logo left, 'Request an offer' centered, BIG burger on the right.
     .hdr-in keeps flex-wrap - the opened menu relies on wrapping to its own full row. */
  .hdr-brand{order:1}
  .sl-btn.hdr-cta{order:2;margin:0 auto;font-size:13.5px;padding:10px 16px}
  .nav-burger{order:3;font-size:30px;line-height:1;padding:4px 10px}

  /* 3. hero CTAs side by side on one line */
  .sl-hero__actions{flex-wrap:nowrap;justify-content:center;gap:10px}
  .sl-hero .sl-btn{font-size:14px;padding:13px 14px;white-space:nowrap}

  /* 4. stats as a 2x2 grid instead of one long column */
  .band-stats .sl-stats{display:grid;grid-template-columns:1fr 1fr;gap:24px 16px}

  /* 5. service cards: let the photo fill the media box on phones too */
  .sl-post-media img{width:100%;height:100%;object-fit:cover}

  /* 5b. card body: title and 'Details' share one line (title left, link right; the platform
     card body is flex-direction:column - flip it to a wrapping row), excerpt flows under. */
  .band-supply .sl-post-body{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 10px}
  .band-supply .sl-post-title{order:1;margin:0;flex:1 1 auto;min-width:0}
  .band-supply .sl-post-more{order:2;margin:0;flex:0 0 auto}
  .band-supply .sl-post-excerpt{order:3;flex-basis:100%;margin:0}

  /* 5c. after the last card, the supply band's 56px + the next band's 56px stacked into a
     112px hole - halve the rhythm between these two bands. */
  .band-supply{padding-bottom:20px}
  .band-why{padding-top:24px}

  /* 6. gold call-back band: the fields' 160px flex-basis (a WIDTH in the desktop row
     layout) turns into HEIGHT once the form goes column - reset it. */
  .band-cta .sl-contact__form > div{flex-basis:auto;min-height:0}

  /* 7. footer as two columns (Pages left, We supply right); brand blurb spans the top */
  .ft-in{grid-template-columns:1fr 1fr;gap:30px 20px}
  .ft-in > div:first-child{grid-column:1 / -1}

  /* 8. testimonials: one-line carousel; NO scroll-snap - it would fight the slow
     always-moving drift that assets/site js applies (snap yanks back to card edges). */
  .band-quotes .sl-quotes{display:flex;overflow-x:auto;gap:14px;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px}
  .band-quotes .sl-quotes::-webkit-scrollbar{display:none}
  .band-quotes .sl-card.sl-quote{flex:0 0 82%;margin:0}

  /* 9. livestock page: the three spec chips per service on ONE line (smaller type), and
     tighter block spacing now that the chips no longer wrap (selector matches the
     platform's .sl-text-list > .sl-text-body rule so the tighter values actually win). */
  .band-supply-list .sl-text-body p.chips{display:flex;flex-wrap:nowrap;gap:5px;margin:10px 0 0}
  .band-supply-list .chip{font-size:10px;padding:4px 7px;white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .band-supply-list .sl-text-list > .sl-text-body{padding-bottom:18px;margin-bottom:18px}

  /* 9b. under the LAST service: its trailing 18+18 spacing plus the band's 56px bottom
     padding piled into a ~93px hole before the next band - collapse it. */
  .band-supply-list .sl-text-list > .sl-text-body:last-child{padding-bottom:0;margin-bottom:0}
  .band-supply-list{padding-bottom:22px}
}

/* video-with-text site section: the media slot holds a <video>; mirror the image rule. */
.sl-media-text__media video{width:100%;height:100%;min-height:320px;object-fit:cover;display:block;border-radius:16px}

/* Markets band video: 30% smaller than the column, natural aspect ratio, centered. */
.band-markets .sl-media-text__media video{width:70%;height:auto;min-height:0;margin:0 auto}

/* Home Animal Welfare band: picture at 70% of its column, natural proportions, centered. */
.band-welfare .sl-media-text__media img{width:70%;height:auto;min-height:0;margin:0 auto}

/* Card grid: a video card fills its 16:10 media box like a picture; and the picture itself
   fills the box on desktop too (the theme's fixed 150px image height left the box half empty). */
.sl-post-media video{width:100%;height:100%;object-fit:cover;display:block}
.band-supply .sl-post-media img{height:100%}

/* Gallery page: Videos grid (playable tiles) above the photo lightbox grid. */
.sl-gallery__heading{font:800 26px 'Archivo',sans-serif;letter-spacing:-.02em;margin:0 0 16px}
.sl-gallery__heading--after{margin-top:44px}
.sl-gallery__item--video{background:#000;border-radius:14px;overflow:hidden;aspect-ratio:4/5}
.sl-gallery__item--video video{width:100%;height:100%;object-fit:cover;object-position:center;display:block;background:#000}
/* Uniform 4:5 tiles; the clip is scaled to FILL the tile (object-fit:cover, centre crop) so no black letterbox/pillarbox shows — fullscreen from the controls still plays the whole frame. (User request 2026-08-22.) */
/* Gallery video tiles: minimal player chrome - no native control bar; a big centred play button
   (hidden while playing; the tile itself toggles play/pause) + a fullscreen icon bottom-right. */
.sl-gallery__item--video{position:relative;cursor:pointer}
.sl-gallery__item--video video::-webkit-media-controls{display:none!important}
.sl-vtile__play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:#0f1b12;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 28px rgba(0,0,0,.4);transition:transform .15s ease,opacity .15s ease}
.sl-vtile__play:hover{transform:scale(1.07)}
.sl-vtile__play:focus-visible{outline:3px solid #fff;outline-offset:2px}
.sl-vtile__play svg{width:34px;height:34px;margin-left:5px}
.sl-gallery__item--video.is-playing .sl-vtile__play{opacity:0;pointer-events:none}
.sl-vtile__fs{position:absolute;right:10px;bottom:10px;width:42px;height:42px;padding:0;border:0;border-radius:10px;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .15s ease}
.sl-vtile__fs:hover{background:rgba(0,0,0,.8)}
.sl-vtile__fs:focus-visible{outline:3px solid #fff;outline-offset:2px}
.sl-vtile__fs svg{width:20px;height:20px}

/* Home page, phone (the platform stacks .sl-media-text to one column at <=720px, in DOM order):
   no picture above "Animal Welfare"; the "Markets and Delivery" text goes ABOVE its video. (User request 2026-08-22.) */
@media (max-width:720px){
  .band-welfare .sl-media-text__media{display:none}
  .band-markets .sl-media-text__media{order:2}
}

/* Gallery: when the Photos grid holds a single picture, show it as one wide centred tile. */
.sl-gallery--single{grid-template-columns:minmax(0,960px);justify-content:center}
.sl-gallery--single .sl-gallery__item img{width:100%;height:auto;max-height:560px;object-fit:cover}
/* Home "Tell Us What You Need" band: heading + text + one Request-an-Offer button, centred. */
.band-offer .sl-container{text-align:center}
.band-offer .sl-cta__text,.band-offer p{max-width:720px;margin-left:auto;margin-right:auto}
.band-offer{background:#f7f3ea;padding-block:64px}
.band-offer h2{font:800 clamp(28px,3.2vw,40px)/1.15 'Archivo',sans-serif;letter-spacing:-.02em;margin:0 0 22px}
.band-offer .sl-btn{padding:14px 28px;font-size:17px}
@media (max-width:720px){.band-offer{padding-block:48px}}

/* Contact details panel (2026-08-22): the built-in Address row has no country and a fixed label, so it is
   hidden and replaced by the "Office location" + "Farm location" rows (content list info_rows), which are
   moved to the top of the panel. Row order in the DOM: Address, Phone, Email, Hours, Reg. No., Office, Farm. */
.band-contact .sl-contact__info{display:flex;flex-direction:column}
.band-contact .sl-contact__info-heading{order:-10}
.band-contact .sl-contact__info-row:nth-of-type(1){display:none}
.band-contact .sl-contact__info-row:nth-of-type(6){order:-2}
.band-contact .sl-contact__info-row:nth-of-type(7){order:-1}
.band-contact .sl-contact__info-row span a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Livestock page (2026-08-22): three image-with-text bands (Young Cattle for Fattening / Beef Breeding Females /
   Dairy Breeding Cattle) with same-size 4:3 pictures beside the text, alternating sides; tighter band spacing. */
.band-lv{padding-block:40px}
.band-lv-young{padding-top:56px}
.band-lv .sl-media-text__media img{width:100%;height:auto;aspect-ratio:4/3;min-height:0;object-fit:cover;border-radius:16px}
.band-lv .sl-media-text__body h2{font:800 clamp(26px,2.6vw,34px)/1.15 'Archivo',sans-serif;letter-spacing:-.02em;margin:0 0 14px}
.band-lv .sl-media-text__body p{margin:0 0 12px}
.band-lv-pedigree{padding-block:40px 64px}
@media (max-width:720px){.band-lv{padding-block:28px}.band-lv-young{padding-top:36px}}
.band-lv-pedigree .sl-rich-text__heading{font:800 clamp(26px,2.6vw,34px)/1.15 'Archivo',sans-serif;letter-spacing:-.02em;margin:0 0 14px}

/* Livestock bands: picture on the RIGHT, text left, picture ~85% of its column (user request 2026-08-22). */
.band-lv .sl-media-text__media img{width:85%;margin:0 0 0 auto;display:block}
@media (max-width:720px){.band-lv .sl-media-text__media img{width:100%;margin:0}}

/* Gallery: breed structure (2026-08-22) — main titles, breed sub-headings, "coming soon" note. */
.sl-gallery__heading--group{margin-top:56px}
.sl-gallery__subheading{font:700 21px/1.2 'Archivo',sans-serif;letter-spacing:-.01em;margin:26px 0 12px;padding-left:12px;border-left:4px solid #c9a44c}
.sl-gallery__empty{margin:0 0 6px;padding-left:16px;color:#7a7468;font-size:15px}
.sl-gallery--videos + .sl-gallery__subheading{margin-top:34px}

/* About page (2026-08-22): the aerial farm photo is the hero of the story band — full container width
   above the text (shown whole, no stretching to the text height); the text flows below in two columns
   on desktop with the heading and button spanning both. */
.band-story .sl-media-text{grid-template-columns:1fr;gap:36px}
.band-story .sl-media-text__media{order:-1}
.band-story .sl-media-text__media img{width:100%;height:auto;min-height:0;aspect-ratio:16/9;object-fit:cover;border-radius:18px}
@media (min-width:900px){
  .band-story .sl-media-text__body{columns:2;column-gap:56px}
  .band-story .sl-media-text__body h2{column-span:all}
  .band-story .sl-media-text__body p{break-inside:avoid}
  .band-story .sl-media-text__body .sl-btn{display:table;column-span:all;margin-top:10px}
}

/* Markets page: transport video band (gallery-media section, group title only). */
.band-mk-videos{padding-top:24px}
.band-mk-videos .sl-gallery--videos{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
@media (max-width:720px){.band-mk-videos .sl-gallery--videos{grid-template-columns:1fr}}

/* Livestock bands with a VIDEO instead of a picture (2026-08-22): the clip keeps its own proportions
   (phone portrait clips = a portrait panel capped at 540px tall, landscape clips fill the column),
   right-aligned in the media column like the pictures. The poster sets the box before the clip loads. */
.band-lv .sl-media-text__media video{display:block;width:auto;max-width:100%;height:auto;max-height:540px;min-height:0;margin:0 0 0 auto;border-radius:16px;object-fit:cover;background:#000}
@media (max-width:720px){.band-lv .sl-media-text__media video{margin:0 auto;max-height:70vh}}

/* Livestock videos a step smaller (user request): portrait panels capped at 400px tall, i.e. ~225px wide. */
.band-lv .sl-media-text__media video{max-height:400px}
@media (max-width:720px){.band-lv .sl-media-text__media video{max-height:55vh}}

/* Click-to-play tiles outside the gallery (video-with-text "player" mode) — generic tile rules. */
[data-video-tile]{position:relative;cursor:pointer}
[data-video-tile].is-playing .sl-vtile__play{opacity:0;pointer-events:none}
[data-video-tile] video::-webkit-media-controls{display:none!important}
.sl-media-text__media--player .sl-vtile{display:block;width:max-content;max-width:100%}
.sl-media-text__media--player .sl-vtile__play{width:64px;height:64px;margin:-32px 0 0 -32px}
.sl-media-text__media--player .sl-vtile__play svg{width:28px;height:28px;margin-left:4px}
.sl-media-text__media--player .sl-vtile__fs{width:38px;height:38px;right:8px;bottom:8px}

/* Livestock bands: the video sits right next to the text instead of at the far right edge —
   text column up to 620px, video column sized to the clip, both left-aligned (desktop only). */
@media (min-width:721px){
  .band-lv.band-lv-video .sl-media-text{grid-template-columns:minmax(0,620px) auto;justify-content:start;gap:44px}
  .band-lv.band-lv-video .sl-media-text__media{order:2}
  .band-lv .sl-media-text__media video{margin:0}
}