/* =====================================================================
   Technologya, site-wide
   The colour system from the homepage, carried to every other page:
   category and brand banners, the delivery strip, the product page offers
   box, coloured page headers and a dark footer. home.css loads after this
   on the front page only and adds the homepage sections.

   The Elementor kit styles links, headings and images with selectors such
   as .elementor-kit-6 a, which outrank a single class. Rules that set a
   colour or an image size therefore carry a body prefix so they win.
   ===================================================================== */
:root{
  --h-ink:#0E2B4F; --h-night:#0A192F; --h-paper:#FFFFFF; --h-ground:#F2F6FA;
  --h-line:#DCE4EE; --h-muted:#586A80;
  --h-cyan:#12BFDA; --h-cyan-deep:#0EA5C2;
  --h-blue:#2066C3; --h-blue-deep:#174F9E; --h-sky:#3E8FEA;
  --h-ice:#CAE8F5; --h-ice-soft:#EDF7FA; --h-navy:#173359;
  --h-cyan-light:#B8F1FA; /* the accent as text on blue: cyan itself is 2.5:1 there */
  --h-display:'Space Grotesk',Georgia,serif;
  --h-body:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --h-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ------------------------------------------------------------ shared */
.tya-band__inner{max-width:1280px;margin:0 auto;padding-left:24px;padding-right:24px}
.tya-kicker{font-family:var(--h-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px}
.tya-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--h-body);font-weight:700;font-size:16px;line-height:1;
  border-radius:6px;padding:16px 24px;text-decoration:none!important;transition:background-color .15s ease}
.tya-btn span{transition:transform .15s ease}
.tya-btn:hover span{transform:translateX(3px)}
body a.tya-btn--cyan{background:var(--h-cyan);color:var(--h-ink)}
body a.tya-btn--cyan:hover{background:var(--h-cyan-deep)}
body a.tya-btn--ink{background:var(--h-ink);color:#fff}
body a.tya-btn--ink:hover{background:#000}
body a.tya-link{font-family:var(--h-body);font-weight:700;font-size:15px;color:var(--h-ink);text-decoration:none;border-bottom:2px solid var(--h-cyan);padding-bottom:2px;white-space:nowrap}
body a.tya-link:hover{border-bottom-color:var(--h-ink)}
.tya-btn:focus-visible,.tya-link:focus-visible,.tya-chip:focus-visible,.tya-perks a:focus-visible{outline:3px solid var(--h-blue);outline-offset:3px}

/* --------------------------------------------------------- usp strip */
.tya-usp{background:var(--h-cyan);color:var(--h-ink)}
.tya-usp__list{list-style:none;margin:0 auto;max-width:1280px;padding:14px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px 24px}
.tya-usp__item{display:flex;align-items:center;gap:12px;font-family:var(--h-body);font-size:14px;line-height:1.35;margin:0;color:var(--h-ink)}
.tya-usp__item svg{width:26px;height:26px;flex:0 0 auto}
.tya-usp__item b{font-weight:700;display:block}
/* Full-bleed when placed inside a boxed Elementor template */
body .tya-usp-band{padding:0!important;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;max-width:none!important}
body .tya-usp-band > .e-con-inner{max-width:none!important;padding:0!important}
body .tya-usp-band .elementor-widget-shortcode,body .tya-usp-band .elementor-widget-container,body .tya-usp-band .elementor-shortcode{width:100%;padding:0!important;margin:0!important}

/* ------------------------------------------------- archive banner */
body .tya-ahero-band{padding:0!important;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;max-width:none!important;background:transparent!important}
body .tya-ahero-band > .e-con-inner{max-width:none!important;padding:0!important}
body .tya-ahero-band .elementor-widget-shortcode,body .tya-ahero-band .elementor-widget-container,body .tya-ahero-band .elementor-shortcode{width:100%;padding:0!important;margin:0!important}

.tya-ahero{position:relative;overflow:hidden;padding:26px 0 46px}
.tya-crumbs{font-family:var(--h-body);font-size:13px;margin:0 0 34px;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
body .tya-crumbs a{color:inherit;opacity:.78;text-decoration:none}
body .tya-crumbs a:hover{opacity:1;text-decoration:underline}
.tya-crumbs span[aria-hidden]{opacity:.45}
.tya-ahero__grid{display:grid;grid-template-columns:1fr auto;align-items:end;gap:32px}
.tya-ahero__copy{max-width:720px}
.tya-ahero .tya-kicker{opacity:1}
body h1.tya-ahero__title{font-family:var(--h-display);font-weight:700;font-size:clamp(42px,6vw,80px);line-height:.95;letter-spacing:-.045em;margin:0 0 16px;color:inherit;text-wrap:balance}
.tya-ahero__lede{font-family:var(--h-body);font-size:18px;line-height:1.55;margin:0 0 24px;max-width:52ch}
.tya-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tya-chips li{margin:0}
body a.tya-chip{display:inline-block;font-family:var(--h-body);font-weight:600;font-size:14px;line-height:1;padding:10px 16px;border-radius:999px;
  border:1.5px solid currentColor;color:inherit;text-decoration:none;transition:background .15s,color .15s}
.tya-ahero__icon{line-height:0;opacity:.95}
.tya-ahero__icon svg{height:170px;width:auto;display:block}

/* tones, matching the homepage category tiles */
.tya-ahero--cyan{background:var(--h-cyan);color:var(--h-ink)}
.tya-ahero--cyan .tya-kicker{color:var(--h-night)}
body .tya-ahero--cyan a.tya-chip:hover,body .tya-ahero--cyan a.tya-chip.is-current{background:var(--h-ink);color:var(--h-cyan);border-color:var(--h-ink)}

.tya-ahero--blue{color:#fff;background:radial-gradient(circle at 88% 20%,rgba(18,191,218,.24) 0,rgba(18,191,218,0) 30%),linear-gradient(120deg,var(--h-blue-deep),var(--h-blue))}
.tya-ahero--blue .tya-kicker{color:var(--h-cyan-light)}
body .tya-ahero--blue a.tya-chip:hover,body .tya-ahero--blue a.tya-chip.is-current{background:var(--h-cyan);color:var(--h-ink);border-color:var(--h-cyan)}

.tya-ahero--ink,.tya-ahero--night{color:#fff}
.tya-ahero--ink{background:var(--h-ink)}
.tya-ahero--night{background:radial-gradient(circle at 90% 0%,rgba(32,102,195,.38) 0,rgba(32,102,195,0) 40%),var(--h-night)}
.tya-ahero--ink .tya-kicker,.tya-ahero--night .tya-kicker,.tya-ahero--ink .tya-ahero__icon{color:var(--h-cyan)}
body .tya-ahero--ink a.tya-chip:hover,body .tya-ahero--ink a.tya-chip.is-current,
body .tya-ahero--night a.tya-chip:hover,body .tya-ahero--night a.tya-chip.is-current{background:var(--h-cyan);color:var(--h-ink);border-color:var(--h-cyan)}

.tya-ahero--ice{background:var(--h-ice);color:var(--h-ink)}
.tya-ahero--ice .tya-kicker{color:var(--h-blue-deep)}
body .tya-ahero--ice a.tya-chip:hover,body .tya-ahero--ice a.tya-chip.is-current{background:var(--h-ink);color:#fff;border-color:var(--h-ink)}

.tya-ahero--paper{background:var(--h-paper);color:var(--h-ink);box-shadow:inset 0 -1px 0 var(--h-line)}
.tya-ahero--paper .tya-kicker{color:var(--h-blue-deep)}
body .tya-ahero--paper a.tya-chip:hover,body .tya-ahero--paper a.tya-chip.is-current{background:var(--h-ink);color:#fff;border-color:var(--h-ink)}

/* -------------------------------------------------- archive about */
body .tya-about-band{padding:0!important;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;max-width:none!important}
body .tya-about-band > .e-con-inner{max-width:none!important;padding:0!important}
body .tya-about-band .elementor-widget-shortcode,body .tya-about-band .elementor-widget-container,body .tya-about-band .elementor-shortcode{width:100%;padding:0!important;margin:0!important}
.tya-about{background:var(--h-paper);border-top:1px solid var(--h-line);padding:56px 0 64px}
.tya-about__inner{display:grid;grid-template-columns:4fr 8fr;gap:40px;align-items:start}
body h2.tya-about__title{font-family:var(--h-display);font-weight:700;font-size:clamp(24px,2.6vw,32px);line-height:1.1;letter-spacing:-.02em;margin:0;color:var(--h-ink)}
.tya-about__body{font-family:var(--h-body);font-size:15.5px;line-height:1.7;color:var(--h-muted);max-width:70ch}
.tya-about__body p{margin:0 0 14px}
body .tya-about__body a{color:var(--h-ink);text-decoration:underline;text-decoration-color:var(--h-cyan);text-decoration-thickness:2px;text-underline-offset:3px}

/* ------------------------------------------- product tiles, hover */
ul.products li.product{transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
ul.products li.product:hover{border-color:var(--h-ink)!important;transform:translateY(-3px);box-shadow:0 16px 30px -20px rgba(14,43,79,.5)}

/* ------------------------------------------------- product perks */
.tya-perks{margin:22px 0 4px;border:1px solid var(--h-line);border-radius:10px;background:var(--h-paper);overflow:hidden}
body a.tya-perks__offer{display:flex;align-items:center;gap:14px;padding:14px 18px;background:linear-gradient(120deg,var(--h-blue-deep),var(--h-blue));color:#fff;text-decoration:none;font-family:var(--h-body)}
body a.tya-perks__offer:hover{background:var(--h-cyan);color:var(--h-ink)}
.tya-perks__pct{font-family:var(--h-display);font-weight:700;font-size:22px;letter-spacing:-.02em;white-space:nowrap;padding-right:14px;border-right:1px solid rgba(255,255,255,.3)}
body a.tya-perks__offer:hover .tya-perks__pct{border-right-color:rgba(14,43,79,.25)}
.tya-perks__label{flex:1 1 auto;font-weight:600;font-size:14.5px;line-height:1.4}
.tya-perks__list{list-style:none;margin:0;padding:16px 18px 8px;display:grid;gap:12px}
.tya-perks__list li{display:flex;align-items:center;gap:12px;margin:0;font-family:var(--h-body);font-size:14px;line-height:1.4;color:var(--h-muted)}
.tya-perks__list li b{color:var(--h-ink);font-weight:700}
.tya-perks__list svg{width:28px;height:28px;flex:0 0 auto;color:var(--h-ink);background:var(--h-cyan);border-radius:50%;padding:5px;box-sizing:border-box}
.tya-perks__links{margin:0;padding:6px 18px 16px;font-family:var(--h-body);font-size:13px;color:var(--h-muted)}
body .tya-perks__links a{color:var(--h-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--h-cyan);text-decoration-thickness:2px;text-underline-offset:3px}

/* product page: title and price get the display face at size */
body.single-product .elementor-widget-heading h1.elementor-heading-title,
body.single-product .product_title{font-family:var(--h-display)!important;font-weight:700!important;letter-spacing:-.03em!important;line-height:1.02!important;font-size:clamp(32px,3.6vw,48px)!important}
body.single-product .elementor-widget-woocommerce-product-price .price{font-family:var(--h-display)!important;font-weight:700!important;font-size:30px!important;color:var(--h-ink)!important}
body.single-product .related > h2,body.single-product .up-sells > h2{font-family:var(--h-display)!important;font-weight:700!important;font-size:clamp(26px,3vw,36px)!important;letter-spacing:-.03em!important}

/* -------------------------------------- coloured page header bands
   Guides, policies, contact, account, basket and checkout all use the
   default template. Their title now sits on a full-bleed band: violet for
   the guides, night for everything else. The band is painted with a spread
   box-shadow and clipped to the header's height, so it reaches the edges
   without changing the markup or causing sideways scroll. */
body.page-template-default:not(.home) .site-main{padding-top:0!important}
body.page-template-default:not(.home) .site-main > .page-header{
  --band:var(--h-night);
  position:relative;background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax);
  padding:58px 0 50px;margin:0 0 44px;max-width:none!important}
body.page-template-default:not(.home) .site-main > .page-header .entry-title{color:#fff!important;margin:0!important;max-width:20ch!important;
  font-size:clamp(38px,5vw,64px)!important;line-height:.98!important;letter-spacing:-.045em!important}
body.page-template-default:not(.home) .site-main > .page-header::before{
  content:"Information";display:block;font-family:var(--h-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--h-cyan-light);margin:0 0 14px}
body.page-id-3104 .site-main > .page-header,
body.parent-pageid-3104 .site-main > .page-header{--band:var(--h-blue)}
body.page-id-3104 .site-main > .page-header{background:var(--h-blue);box-shadow:0 0 0 100vmax var(--h-blue)}
body.page-id-3104 .site-main > .page-header::before{content:"Guides"}
body.parent-pageid-3104 .site-main > .page-header::before{content:"Guide"}
body.woocommerce-cart .site-main > .page-header::before{content:"Your basket"}
body.woocommerce-checkout .site-main > .page-header::before{content:"Secure checkout"}
body.woocommerce-account .site-main > .page-header::before{content:"Your account"}

/* ----------------------------------------------------- dark footer */
body .elementor-location-footer{background:var(--h-night);border-top:4px solid var(--h-cyan)}
body .elementor-location-footer .e-con{background-color:transparent!important;background-image:none!important}
body .elementor-location-footer,
body .elementor-location-footer p,
body .elementor-location-footer li{color:rgba(255,255,255,.72)!important}
body .elementor-location-footer .elementor-heading-title{color:#fff!important}
body .elementor-location-footer a{color:rgba(255,255,255,.86)!important;text-decoration:none!important}
body .elementor-location-footer a:hover{color:var(--h-cyan)!important}
body .elementor-location-footer .elementor-element-40a0dda{border-top:1px solid rgba(255,255,255,.12)!important}

/* ------------------------------------------------------ responsive */
@media (max-width:1024px){
  .tya-usp__list{grid-template-columns:repeat(2,1fr)}
  .tya-ahero__icon svg{height:120px}
  .tya-about__inner{grid-template-columns:1fr;gap:16px}
}
@media (max-width:767px){
  .tya-band__inner,.tya-usp__list{padding-left:16px;padding-right:16px}
  .tya-usp__list{gap:10px 14px;padding-top:12px;padding-bottom:12px}
  .tya-usp__item{font-size:12.5px;gap:8px}
  .tya-usp__item svg{width:22px;height:22px}
  .tya-ahero{padding:18px 0 32px}
  .tya-crumbs{margin-bottom:22px}
  .tya-ahero__grid{grid-template-columns:1fr}
  .tya-ahero__icon{display:none}
  .tya-ahero__lede{font-size:16px}
  body a.tya-chip{font-size:13px;padding:9px 14px}
  .tya-about{padding:40px 0 48px}
  body.page-template-default:not(.home) .site-main > .page-header{padding:38px 0 32px;margin-bottom:32px}
  body.page-template-default:not(.home) .site-main > .page-header .entry-title{font-size:38px!important}
  .tya-perks__label{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  ul.products li.product{transition:none}
  ul.products li.product:hover{transform:none}
  .tya-btn span,body a.tya-chip{transition:none}
}

/* Visually hidden, still read by screen readers and search engines. */
.tya-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Above a lime banner the lime strip merged into it and read as one block.
   There the strip goes dark instead, so the two stay distinct. */
body .tya-usp-band:has(+ .tya-ahero-band .tya-ahero--cyan) .tya-usp{background:var(--h-ink)}
body .tya-usp-band:has(+ .tya-ahero-band .tya-ahero--cyan) .tya-usp__item{color:#fff}
body .tya-usp-band:has(+ .tya-ahero-band .tya-ahero--cyan) .tya-usp__item svg{color:var(--h-cyan)}

/* The page-specific band rules above were less specific than the general one
   (body.page-template-default:not(.home) ...), so every page fell back to the
   night band and the "Information" label, the guides included. Restated with
   the same base so these win. */
body.page-template-default.page-id-3104:not(.home) .site-main > .page-header,
body.page-template-default.parent-pageid-3104:not(.home) .site-main > .page-header{--band:var(--h-blue)}
body.page-template-default.page-id-3104:not(.home) .site-main > .page-header{background:var(--h-blue);box-shadow:0 0 0 100vmax var(--h-blue)}
body.page-template-default.page-id-3104:not(.home) .site-main > .page-header::before{content:"Guides"}
body.page-template-default.parent-pageid-3104:not(.home) .site-main > .page-header::before{content:"Guide"}
body.page-template-default.woocommerce-cart:not(.home) .site-main > .page-header::before{content:"Your basket"}
body.page-template-default.woocommerce-checkout:not(.home) .site-main > .page-header::before{content:"Secure checkout"}
body.page-template-default.woocommerce-account:not(.home) .site-main > .page-header::before{content:"Your account"}

/* Something in the WooCommerce or theme stack colours archive links directly,
   so the chips came out near-black on the violet, cobalt and dark banners even
   though the banner text around them was white. Chip colours are stated per
   banner tone and marked important so nothing upstream can override them. */
body .tya-ahero .tya-chips a.tya-chip{color:inherit!important;border-color:currentColor!important;background:transparent!important}
body .tya-ahero--cyan .tya-chips a.tya-chip:hover,body .tya-ahero--cyan .tya-chips a.tya-chip.is-current,
body .tya-ahero--paper .tya-chips a.tya-chip:hover,body .tya-ahero--paper .tya-chips a.tya-chip.is-current{background:var(--h-ink)!important;color:#fff!important;border-color:var(--h-ink)!important}
body .tya-ahero--cyan .tya-chips a.tya-chip:hover,body .tya-ahero--cyan .tya-chips a.tya-chip.is-current{color:var(--h-cyan)!important}
body .tya-ahero--blue .tya-chips a.tya-chip:hover,body .tya-ahero--blue .tya-chips a.tya-chip.is-current,
body .tya-ahero--ink .tya-chips a.tya-chip:hover,body .tya-ahero--ink .tya-chips a.tya-chip.is-current,
body .tya-ahero--night .tya-chips a.tya-chip:hover,body .tya-ahero--night .tya-chips a.tya-chip.is-current{background:var(--h-cyan)!important;color:var(--h-ink)!important;border-color:var(--h-cyan)!important}
body .tya-ahero--ice .tya-chips a.tya-chip:hover,body .tya-ahero--ice .tya-chips a.tya-chip.is-current{background:var(--h-ink)!important;color:#fff!important;border-color:var(--h-ink)!important}
/* The breadcrumb links had the same problem. */
body .tya-ahero .tya-crumbs a{color:inherit!important}