/* Bill templates — page-local styles. Shortcode 156.
   Self-contained on purpose: nothing here may depend on the shared
   business-theme.css CDN file, because that dependency is what broke this
   section every time it was copied to another page. */
.vyh-templates{padding:64px 24px !important;background:#fff !important;font-family:Poppins !important;}
.vyh-templates__container{max-width:1180px !important;margin:0 auto !important;display:block !important;text-align:center !important;}
.vyh-templates__heading{font-size:32px !important;line-height:1.25 !important;font-weight:700 !important;color:#1a1a1a !important;margin:0 0 16px !important;}
.vyh-templates .vyh-templates__subtext{font-size:16px !important;line-height:1.6 !important;color:#5c5c5c !important;max-width:760px !important;margin:0 auto 36px !important;}

/* ============================== TABS ============================== */
.vyh-templates__tabs-wrap{display:flex !important;justify-content:center !important;width:100% !important;margin:0 0 40px !important;}
/* margin:auto (not just justify-content on the wrap) does the centering, so the
   same rule survives the mobile overflow-x:auto case — a centered flex
   container clips its own start once the content overflows and you can no
   longer scroll back to tab 1; auto margins collapse to 0 instead. */
.vyh-templates__tabs{display:flex !important;gap:8px !important;border-bottom:1px solid #e6e6e6 !important;margin:0 auto !important;padding:0 30px !important;}
.vyh-templates__tab{appearance:none !important;border:none !important;background:transparent !important;font-size:15px !important;font-weight:600 !important;color:#8a8a8a !important;padding:10px 20px !important;cursor:pointer !important;position:relative !important;transition:color .2s ease !important;}
.vyh-templates__tab::after{content:"" !important;position:absolute !important;left:20px !important;right:20px !important;bottom:-1px !important;height:2px !important;background:transparent !important;transition:background .2s ease !important;}
.vyh-templates__tab.is-active{color:#e0264f !important;background:#fdeef1 !important;border-radius:8px 8px 0 0 !important;}
.vyh-templates__tab.is-active::after{background:#e0264f !important;}
/* Kill the default (blue) tap/focus box; keep a branded ring for keyboard users only */
.vyh-templates__tab{-webkit-tap-highlight-color:transparent !important;}
.vyh-templates__tab:focus{outline:none !important;box-shadow:none !important;}
.vyh-templates__tab:focus-visible{outline:2px solid #e0264f !important;outline-offset:-2px !important;}

/* ============================= PANELS ============================= */
.vyh-templates__panel{display:none !important;}
.vyh-templates__panel.is-active{display:block !important;}

/* ============================= SLIDER ============================= */
.vyh-templates__slider{position:relative !important;}
.vyh-templates__track-wrap{clip-path:none !important;overflow:visible !important;}
.vyh-templates__track{display:grid !important;grid-auto-flow:column !important;grid-auto-columns:calc((100% - 48px) / 3) !important;gap:24px !important;transition:transform .35s ease !important;will-change:transform !important;align-items:start !important;}

/* Card — grid + flex-column locks the head directly above its own image, immune to theme flex/gap rules elsewhere on the page */
.vyh-templates__card{display:flex !important;flex-direction:column !important;text-align:left !important;margin:0 !important;padding:0 !important;min-width:0 !important;}
.vyh-templates__card-head{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;margin:0 0 14px !important;flex-wrap:nowrap !important;}
.vyh-templates__card-head *{margin:0 !important;}
.vyh-templates__card-title{font-size:15px !important;font-weight:600 !important;color:#1a1a1a !important;}
.vyh-templates__cta{display:inline-flex !important;align-items:center !important;justify-content:center !important;background:#e0264f !important;color:#fff !important;font-size:13px !important;font-weight:600 !important;padding:8px 16px !important;border-radius:20px !important;text-decoration:none !important;white-space:nowrap !important;transition:background .2s ease, transform .2s ease !important;}
.vyh-templates__cta:hover{background:#c81f43 !important;transform:translateY(-1px) !important;}
.vyh-templates__card-image{border-radius:12px !important;background:#fff !important;position:relative !important;z-index:1 !important;}
.vyh-templates__card-image img{display:block !important;width:100% !important;max-width:none !important;height:auto !important;position:relative !important;left:0 !important;transition:width .35s ease-out, left .35s ease-out !important;min-height:120px !important;background:#fafafa !important;border-radius:12px !important;}
.vyh-templates__card:hover .vyh-templates__card-image{z-index:5 !important;}
.vyh-templates__card:hover .vyh-templates__card-image img{width:118% !important;max-width:none !important;left:-9% !important;}
.vyh-templates__panel[data-panel="thermal"] .vyh-templates__track{grid-template-columns:none !important;justify-content:center !important;width:100% !important;}

/* ============================= ARROWS =============================
   The base geometry below (position/top/transform/z-index/display) used to
   live in the shared theme stylesheet. That file is not loaded on a page the
   section has been copied to, so the buttons fell back to static flow and
   rendered stacked ABOVE and BELOW the card instead of on top of it. Keeping
   the geometry here is what makes the shortcode portable. */
.vyh-templates__arrow{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:10 !important;                    /* over .card-image, which sits at z-index 1 (5 while hovered) */
  /* display is the one declaration here deliberately left un-!important: the
     JS hides an arrow that has nowhere to go by setting element.style.display
     = 'none', and an !important flex would silently beat it, leaving dead
     buttons on panels that fit without sliding. */
  display:flex;
  opacity:1 !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid transparent !important;
  cursor:pointer !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:opacity .2s ease, background .2s ease !important;
}
.vyh-templates__arrow:focus{outline:none !important;box-shadow:none !important;}
.vyh-templates__arrow:focus-visible{outline:2px solid #fff !important;outline-offset:-4px !important;}
/* Hide/show is a class, never an inline style: every declaration in this file
   is !important (the theme fights it), so an !important display:flex would
   silently beat JS setting element.style.display = 'none'. */
.vyh-templates__arrow--off{display:none !important;}
/* At either end of the track both buttons stay on the card, but the one with
   nowhere to go goes inert — a live-looking button that does nothing is what
   made the first tap read as a dead/laggy click. */
.vyh-templates__arrow.is-hidden{opacity:.35 !important;pointer-events:none !important;}
.vyh-templates__arrow.is-visible{opacity:1 !important;pointer-events:auto !important;}

/* Solid brand-pink pills with white chevrons. */
.vyh-templates__arrow{
  width:40px !important;
  height:64px !important;
  border-radius:35px !important;            /* was inheriting 50% → oval; pill now */
  background:#e0264f !important;
  border-color:#e0264f !important;
  box-shadow:0 4px 14px rgba(224,38,79,.35) !important;
}
.vyh-templates__arrow svg{width:22px !important;height:22px !important;}
.vyh-templates__arrow svg path{stroke:#fff !important;stroke-width:2.5 !important;}
.vyh-templates__arrow--prev{left:8px !important;}
.vyh-templates__arrow--next{right:8px !important;}

/* ============================ RESPONSIVE ============================ */

/* Tablets / small laptops — 2 cards per view */
@media (max-width:900px){
  .vyh-templates__track{grid-auto-columns:calc((100% - 24px) / 2) !important;}
  /* Desktop leaves the wrapper overflow visible so the hover zoom can escape.
     Below 900px the track actually slides (3 A4 cards / 2 slots), and a
     visible overflow lets the off-screen card spill outside the section. */
  .vyh-templates__track-wrap{overflow:hidden !important;}
}

/* Phones — 1 card per view */
@media (max-width:600px){
  .vyh-templates{padding:40px 16px !important;overflow-x:hidden !important;max-width:100% !important;box-sizing:border-box !important;}
  .vyh-templates__container{max-width:100% !important;min-width:0 !important;}

  .vyh-templates__heading{font-size:24px !important;line-height:1.3 !important;margin:0 0 12px !important;}
  .vyh-templates .vyh-templates__subtext{font-size:14px !important;max-width:100% !important;margin:0 auto 28px !important;}

  /* Tabs: centred, and still horizontally scrollable (no visible scrollbar)
     if a longer label set ever overflows. */
  .vyh-templates__tabs-wrap{justify-content:center !important;overflow-x:auto !important;margin-bottom:28px !important;-webkit-overflow-scrolling:touch !important;scrollbar-width:none !important;}
  .vyh-templates__tabs-wrap::-webkit-scrollbar{display:none !important;}
  .vyh-templates__tabs{padding:0 !important;margin:0 auto !important;min-width:max-content !important;}
  .vyh-templates__tab{padding:10px 16px !important;font-size:14px !important;}

  /* One card per view — clip the rest */
  .vyh-templates__track-wrap{overflow:hidden !important;}
  .vyh-templates__track{grid-auto-columns:100% !important;}
  /* Thermal's desktop rule centres its 2 cards; on a 100%-per-card mobile
     slider that centres the OVERFLOW instead, showing half of card 1 + half
     of card 2 side by side. Align to start so exactly one card shows. */
  .vyh-templates__panel[data-panel="thermal"] .vyh-templates__track{
    grid-template-columns:none !important;
    grid-auto-columns:100% !important;
    justify-content:start !important;
    width:100% !important;
  }

  /* Kill the hover zoom on touch */
  .vyh-templates__card:hover .vyh-templates__card-image img{width:100% !important;left:0 !important;}

  /* Tighter head so "title + CTA" don't collide on narrow screens */
  .vyh-templates__card-head{gap:8px !important;}
  .vyh-templates__cta{padding:7px 12px !important;font-size:12px !important;}

  /* Round buttons sitting on the card, vertically centred against it. */
  .vyh-templates__arrow{
    width:40px !important;
    height:40px !important;
    border-radius:50% !important;
    background:#e0264f !important;
    border-color:#e0264f !important;
    box-shadow:0 2px 10px rgba(0,0,0,.20) !important;
  }
  /* Draw the chevron in CSS rather than trusting the inline SVG, which some WP
     sanitisation passes strip. Hide the SVG so the two never double up. */
  .vyh-templates__arrow svg{display:none !important;}
  .vyh-templates__arrow::before{
    content:"" !important;
    width:9px !important;
    height:9px !important;
    border:solid #fff !important;
    border-width:0 2.5px 2.5px 0 !important;   /* right + bottom edges = one corner */
  }
  /* 2px optical nudge only — the button is flex-centred, so the old -15px
     margins (a hack for the unpositioned button) pushed the chevron off it. */
  .vyh-templates__arrow--next::before{transform:rotate(-45deg) !important;margin-left:-2px !important;}
  .vyh-templates__arrow--prev::before{transform:rotate(135deg) !important;margin-right:-2px !important;}

  .vyh-templates__arrow--prev{left:8px !important;}
  .vyh-templates__arrow--next{right:8px !important;}
}