/**
 * home.css  -  the home page
 *
 * Loaded only by the home page (ocmod/home_page.ocmod.xml adds it), so nothing here can
 * reach any other page of the shop.
 *
 * It adds no new font, no new colour family and no JavaScript. The palette is the theme's
 * existing accent (#23a1d1) plus the two neutrals already used by legalconsent.css, so the
 * page sits inside the current theme rather than fighting it.
 *
 * THE ANIMATION RULES THIS FILE FOLLOWS, because animation is where a page like this
 * usually goes wrong:
 *
 *  1. No JavaScript. Entrance animations run on load with staggered delays; the section
 *     reveals use `animation-timeline: view()`, the native scroll-driven timeline.
 *  2. Content is NEVER hidden by default. The reveal is applied inside an @supports
 *     block, so a browser without scroll-driven animation shows everything normally.
 *     Hiding with opacity:0 and un-hiding with JS is what makes reveal sites show blank
 *     panels when anything fails - this cannot do that.
 *  3. Only `transform` and `opacity` animate. No width, height, top or margin, so there
 *     is no reflow and no jank on a phone.
 *  4. prefers-reduced-motion switches all of it off, in the last block of the file.
 */


/* ======================================================================
   shared base: tokens, type, buttons, chips, the slider, the local block
   ====================================================================== */

:root {
  --asc-accent: #23a1d1;
  --asc-accent-dark: #1c86ae;
  --asc-ink: #333;
  --asc-ink-soft: #666;
  --asc-line: #e4e7ea;
  --asc-surface: #f7f9fa;
}

/* ---------- type and rhythm -------------------------------------------- */
.asc-h2 {
  font-size: 22px; font-weight: 600; margin: 0 0 4px; padding-bottom: 8px;
  border-bottom: 1px solid var(--asc-line);
}
.asc-sub { color: var(--asc-ink-soft); font-size: 14px; margin: 8px 0 14px; }
.asc-band { margin: 0 0 42px; }
.asc-band .asc-h2 { margin-bottom: 18px; }
.asc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- buttons ---------------------------------------------------- */
.asc-btn, .asc-btn-ghost {
  display: inline-block; padding: 9px 18px; border-radius: 3px; font-weight: 600;
  font-size: 14px; text-decoration: none; border: 1px solid var(--asc-accent); cursor: pointer;
}
.asc-btn { background: var(--asc-accent); color: #fff; }
.asc-btn:hover, .asc-btn:focus { background: var(--asc-accent-dark); border-color: var(--asc-accent-dark); color: #fff; }
.asc-btn-ghost { background: #fff; color: var(--asc-accent); }
.asc-btn-ghost:hover, .asc-btn-ghost:focus { background: var(--asc-surface); color: var(--asc-accent-dark); }

/* ---------- chips ------------------------------------------------------ */
.asc-chips { margin: 0; }
.asc-chip {
  display: inline-block; margin: 0 8px 8px 0; padding: 7px 14px; background: #fff;
  border: 1px solid var(--asc-line); border-radius: 20px; font-size: 14px;
  color: var(--asc-ink); text-decoration: none;
}
.asc-chip:hover, .asc-chip:focus { border-color: var(--asc-accent); color: var(--asc-accent); }
.asc-chip span { color: var(--asc-ink-soft); font-size: 12px; }
.asc-chips-lg .asc-chip { padding: 11px 20px; font-size: 15px; }

/* ---------- the slideshow: CSS keyframes, no JavaScript ----------------- */
/* The theme's Swiper needs 34 KB of blocking JavaScript to do this. The track is simply
   wider than its window and slid along by a generated keyframe animation - see the
   comment in parts/slider.twig for the seamless-loop trick. */
/* `position: relative` is load-bearing, not tidiness: it makes this section the
   containing block for the hidden radios below. See the comment on them. */
.asc-slider { position: relative; margin: 0 0 28px; }
.asc-slider-win {
  overflow: hidden; border: 1px solid var(--asc-line); border-radius: 4px; background: #fff;
}
.asc-slider-track { display: flex; }
.asc-slide { flex: 0 0 auto; display: block; }
/* NOTHING IS EVER CROPPED. `contain` fits the whole slide inside the box, whatever shape
   the uploaded file is, so a banner is shown as it was made.

   The earlier versions of this rule cropped to a band - 4:1, then 5:1 - on the theory that
   a slider has to be a wide strip and the artwork has to be composed for it. That was the
   wrong way round. Image generators produce 3:2 and fill the frame; asking them to leave
   two thirds of the canvas empty so a strip can be cut out of the middle fights the tool
   and beheads the products when it fails. Fitting the slide to the artwork costs nothing
   but some white to the left and right, and the artwork is on white.

   So the box is 3:2, the slides' own shape, capped in height so a 1138 px wide column does
   not get a 759 px tall slider. Past the cap the box grows wider than 3:2 and the image is
   centred in it. Below it - a phone - the cap never bites and the image fills the width.

   MAX-HEIGHT IS THE ONE NUMBER TO TUNE: it sets how big the artwork is. 440 px gives a
   660 px wide picture in the 1138 px column. A slide that is NOT 3:2 still shows whole,
   but gets white bars, and they are only invisible if its own background is white - which
   is why the four manufacturer banners are being replaced by generated ones. */
.asc-slide img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; max-height: 440px;
  object-fit: contain; object-position: center;
}
/* pause while the visitor is looking at it or tabbing through it */
.asc-slider:hover .asc-slider-track,
.asc-slider:focus-within .asc-slider-track { animation-play-state: paused; }
/* The radios that hold "which slide is showing" - see the comment in the template. Hidden
   from sight but NOT from the keyboard, so they stay focusable and arrow-keyable. */
/* THE RADIOS SIT AT THE BOTTOM OF THE SLIDER, BESIDE THE DOTS, ON PURPOSE.
   Clicking a <label for> focuses its radio, and a browser scrolls a focused element
   into view. These were visually hidden at their static position - the TOP-left of
   the section - with no positioned ancestor to anchor them. So with the dots on
   screen and the top of the slider scrolled past, clicking a dot threw the page back
   to the top. Measured before this fix: the radio was 324px above the viewport and
   the page jumped 608px, all the way to scroll 0.
   Pinning them to `bottom: 0` of the now-relative section puts them level with the
   dots the visitor just clicked, so there is nothing to scroll to.
   `opacity: 0` rather than `clip`/`visibility` keeps them focusable, which is what
   gives keyboard users the arrow-key navigation the markup comment promises. */
.asc-slider-pick {
  position: absolute; bottom: 0; left: 50%; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; margin: 0; padding: 0; border: 0;
}
.asc-slider-dots { margin: 6px 0 0; text-align: center; line-height: 1; }
/* The label is a 22px target - a bare 8px dot is below the 24px minimum and hard to hit -
   and the dot itself is drawn as ::before inside it. */
.asc-slider-dots label {
  position: relative; display: inline-block; width: 22px; height: 22px;
  vertical-align: middle; cursor: pointer;
}
.asc-slider-dots label::before {
  content: ""; position: absolute; left: 7px; top: 7px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--asc-accent); opacity: .35;
}
.asc-slider-dots label:hover::before { opacity: .7; }

/* ---------- local block ----------------------------------------------- */
.asc-local { display: flex; flex-wrap: wrap; gap: 24px; }
.asc-local-text { flex: 1 1 280px; font-size: 14px; line-height: 1.6; }
.asc-local-text p { margin: 0 0 8px; }
.asc-local-map { flex: 1 1 380px; }
.asc-local-map iframe { width: 100%; height: 280px; border: 1px solid var(--asc-line); border-radius: 3px; }
.asc-phone a { font-size: 20px; font-weight: 700; }

/* ---------- phones ------------------------------------------------------ */
@media (max-width: 767px) {
  .asc-h2 { font-size: 19px; }
  .asc-band { margin-bottom: 28px; }
  .asc-local { gap: 18px; }
}


/* ======================================================================
   the page itself
   ====================================================================== */
/* ---------- entrance ---------------------------------------------------- */
@keyframes asc-i-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.asc-i-in { animation: asc-i-up .55s cubic-bezier(.22,.7,.3,1) both; animation-delay: var(--d, 0ms); }

/* ---------- scroll reveal, native and guarded -------------------------- */
@supports (animation-timeline: view()) {
  @keyframes asc-i-reveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  .asc-i-reveal {
    animation: asc-i-reveal linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 26%;
  }
}

/* ---------- the page container ------------------------------------------ */
/* The theme gives #content no top padding at all. The old dark hero sat flush against the
   site header and got away with it, being a full-width block of colour; the slider is a
   white box with a 1 px border, and flush against the header it reads as part of it. */
.asc-i { padding-top: 18px; }

/* ---------- page title -------------------------------------------------- */
/* This was a dark hero box above the slider, with the headline, a search field and five
   size links in white on #11161b plus two blue radial washes. The owner asked for it to
   go on 2026-11-03: the slider is the first thing on the page now and the headline sits
   under it on the page background, with no box, no wash and no reversed-out text.

   Only the text came across, so the colours had to be inverted - the old .asc-i-lead was
   #ccd4da, which is invisible on white.

   THE ACCENT IS A FLAT COLOUR, NOT THE GRADIENT THE H2s USE. Reversed out of a dark box
   the gradient was fine; on white its light end (#4fc3e8) reaches only 2:1 against the
   background, under the 3:1 that large text needs, so the last letters of the accent word
   would have been the faintest part of the page's one h1. #1c86ae is 4,1:1. It also avoids
   `background-clip: text` with `color: transparent` on the h1 - where that pair is not
   supported the text renders invisible, and that is not a risk worth taking on the main
   heading. The h2s keep the gradient; their accent is decorative and repeated. */
.asc-i-top { margin: 0 0 30px; }
.asc-i-eyebrow {
  margin: 0 0 10px; font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--asc-ink-soft); font-weight: 600;
}
.asc-i-h1 {
  margin: 0 0 12px; font-size: 38px; font-weight: 700; line-height: 1.15;
  letter-spacing: -.5px; color: var(--asc-ink);
}
.asc-i-accent { color: var(--asc-accent-dark); }
.asc-i-lead { margin: 0; max-width: 680px; font-size: 16px; line-height: 1.65; color: var(--asc-ink-soft); }

/* ---------- counters ---------------------------------------------------- */
.asc-i-counters {
  list-style: none; margin: 0 0 46px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px;
}
.asc-i-counters li {
  background: var(--asc-surface); border: 1px solid var(--asc-line);
  border-radius: 7px; padding: 18px 20px;
}
.asc-i-counters strong {
  display: block; font-size: 30px; font-weight: 700; line-height: 1;
  background: linear-gradient(92deg, #1c86ae, #4fc3e8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.asc-i-counters span { display: block; margin-top: 5px; font-size: 13px; color: var(--asc-ink-soft); }

/* ---------- headings ---------------------------------------------------- */
.asc-i-band { margin: 0 0 50px; }
.asc-i-h2 {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin: 0 0 20px; font-size: 25px; font-weight: 700; letter-spacing: -.3px;
}
/* an accent rule that grows under the heading as it arrives */
.asc-i-h2 > span { position: relative; padding-bottom: 9px; }
.asc-i-h2 > span::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, #23a1d1, #4fc3e8); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; animation: asc-i-rule .6s .18s ease both;
}
@keyframes asc-i-rule { to { transform: scaleX(1); } }
.asc-i-h2-link { font-size: 13px; font-weight: 400; white-space: nowrap; }

/* ---------- category cards --------------------------------------------- */
.asc-i-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.asc-i-cat {
  position: relative; display: block; border: 1px solid var(--asc-line); border-radius: 8px;
  overflow: hidden; background: #fff; color: inherit; text-decoration: none;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
  animation: asc-i-up .5s both; animation-delay: calc(var(--i, 0) * 55ms);
}
.asc-i-cat:hover, .asc-i-cat:focus {
  box-shadow: 0 16px 34px rgba(16,24,32,.15); transform: translateY(-4px);
  border-color: #bfe4f2;
}
.asc-i-cat-ph { display: block; overflow: hidden; background: #fff; }
.asc-i-cat-ph img { display: block; width: 100%; height: auto; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.asc-i-cat:hover .asc-i-cat-ph img { transform: scale(1.055); }
.asc-i-cat-b { display: block; padding: 14px 44px 14px 16px; }
.asc-i-cat-b strong { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; }
.asc-i-cat-b em { font-style: normal; font-size: 12px; color: var(--asc-ink-soft); }
.asc-i-arrow {
  position: absolute; right: 14px; bottom: 15px; color: #23a1d1; font-size: 19px;
  opacity: 0; transform: translateX(-7px); transition: opacity .22s ease, transform .22s ease;
}
.asc-i-cat:hover .asc-i-arrow, .asc-i-cat:focus .asc-i-arrow { opacity: 1; transform: none; }

/* ---------- offers ------------------------------------------------------ */
/* Fixed columns, not auto-fill: see the comment on .asc-offer-grid. Ten cards are
   rendered and each breakpoint shows only as many as fill whole rows. */
.asc-i-offers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1199px) {
  .asc-i-offers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .asc-i-offer:nth-child(n+9) { display: none; }
}
@media (max-width: 991px) {
  .asc-i-offers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .asc-i-offer:nth-child(n+7) { display: none; }
}
.asc-i-offer {
  border: 1px solid var(--asc-line); border-radius: 8px; padding: 12px; background: #fff;
  transition: box-shadow .22s ease, transform .22s ease;
  animation: asc-i-up .5s both; animation-delay: calc(var(--i, 0) * 45ms);
}
.asc-i-offer:hover { box-shadow: 0 14px 30px rgba(16,24,32,.14); transform: translateY(-3px); }
.asc-i-offer-ph { position: relative; display: block; overflow: hidden; border-radius: 4px; }
.asc-i-offer-ph img { display: block; width: 100%; height: auto; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.asc-i-offer:hover .asc-i-offer-ph img { transform: scale(1.06); }
.asc-i-badge {
  position: absolute; top: 7px; left: 7px; z-index: 2; padding: 4px 10px;
  background: #d9534f; color: #fff; font-size: 12px; font-weight: 700; border-radius: 4px;
  transform: rotate(-5deg); transition: transform .22s ease;
}
.asc-i-offer:hover .asc-i-badge { transform: rotate(0); }
.asc-i-offer h3 { font-size: 12px; font-weight: 400; line-height: 1.45; margin: 11px 0 8px; }
.asc-i-price { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.asc-i-price s { color: #aab2b9; font-size: 12px; }
.asc-i-price strong { font-size: 16px; color: #c7254e; }

/* ---------- own production split --------------------------------------- */
.asc-i-split {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: center;
  margin: 0 0 50px; padding: 30px; border-radius: 8px;
  background: var(--asc-surface); border: 1px solid var(--asc-line);
}
.asc-i-split p { font-size: 15px; line-height: 1.7; color: var(--asc-ink-soft); margin: 0 0 12px; }
.asc-i-split-cta > * { margin: 6px 8px 0 0; }
.asc-i-split-l { list-style: none; margin: 0; padding: 0; }
.asc-i-split-l li {
  padding: 13px 0 13px 30px; border-bottom: 1px solid #e8ebee; position: relative;
  font-size: 13px; color: var(--asc-ink-soft);
}
.asc-i-split-l li::before {
  content: "✓"; position: absolute; left: 0; top: 12px; color: #23a1d1; font-weight: 700;
}
.asc-i-split-l li:last-child { border-bottom: 0; }
.asc-i-split-l strong { display: block; color: var(--asc-ink); font-size: 14px; }

/* ---------- brands: grey until hover ----------------------------------- */
.asc-i-brands {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px;
}
.asc-i-brands li { animation: asc-i-up .45s both; animation-delay: calc(var(--i, 0) * 35ms); }
.asc-i-brands a {
  display: flex; align-items: center; justify-content: center; height: 72px; padding: 10px;
  border: 1px solid var(--asc-line); border-radius: 7px; background: #fff;
  font-size: 13px; color: var(--asc-ink-soft); text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.asc-i-brands a:hover, .asc-i-brands a:focus { border-color: #23a1d1; transform: translateY(-2px); }
.asc-i-brands img {
  display: block; width: 100%; height: 46px; object-fit: contain;
  transition: transform .25s ease;
}
.asc-i-brands a:hover img, .asc-i-brands a:focus img { transform: scale(1.04); }

.asc-i-chips .asc-chip { animation: asc-i-up .4s both; animation-delay: calc(var(--i, 0) * 30ms); }

/* ---------- sticky call bar, phones only ------------------------------- */
.asc-i-callbar { display: none; }
@media (max-width: 767px) {
  .asc-i-callbar {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
    padding: 14px; background: #23a1d1; color: #fff; font-size: 18px; font-weight: 700;
    text-decoration: none; box-shadow: 0 -4px 16px rgba(0,0,0,.2);
  }
  .asc-i-callbar span { font-size: 13px; font-weight: 400; opacity: .9; }
  /* room so the bar never covers the footer's last line */
  .asc-i { padding-bottom: 62px; }
  .asc-i-top { margin-bottom: 22px; }
  .asc-i-h1 { font-size: 26px; }
  .asc-i-lead { font-size: 15px; }
  .asc-i-h2 { font-size: 21px; flex-wrap: wrap; }
  .asc-i-split { grid-template-columns: 1fr; padding: 22px; }
  .asc-i-cat-ph img { width: 96px; }
  .asc-i-cat { display: flex; align-items: center; }
  .asc-i-cat-ph { flex: 0 0 96px; }
  .asc-i-cat-b { padding: 12px 14px; }
  .asc-i-arrow { display: none; }
  .asc-i-counters strong { font-size: 25px; }
  .asc-i-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asc-i-offer:nth-child(n+7) { display: none; }
}

/* ---------- motion off -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .asc-i-in, .asc-i-reveal, .asc-i-cat, .asc-i-offer, .asc-i-brands li,
  .asc-i-chips .asc-chip, .asc-i-h2 > span::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .asc-i-cat, .asc-i-offer, .asc-i-brands a,
  .asc-i-cat-ph img, .asc-i-offer-ph img, .asc-i-badge,
  .asc-i-arrow { transition: none !important; }
  .asc-i-cat:hover, .asc-i-offer:hover { transform: none; }
  .asc-i-arrow { opacity: 1; }
  .asc-chip, .asc-btn, .asc-btn-ghost { transition: none !important; }
  /* No rotation at all: the track sits on the first slide and the first dot stays lit.
     The transform is deliberately NOT forced to none - that would also override the
     :checked rules and leave the dots unable to move the track, which is the one way a
     reduced-motion visitor has of seeing the other slides. */
  .asc-slider-track { animation: none !important; }
  .asc-slider-dots label::before { animation: none !important; }
  .asc-slider-dots label:first-child::before { opacity: 1; }
}