/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.1.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ===== Satiskin design tokens (round 2). Templates use these with literal fallbacks ===== */
:root{
  /* Colour */
  --sat-teal:#00abc5;          /* brand teal: backgrounds, borders, buttons (unchanged) */
  --sat-teal-hover:#0098af;
  --sat-pink:#ee2269;          /* CI Berry Boost Pink: the one brand pink */
  --sat-pink-dark:#c91a58;
  --sat-pink-tint:#fde8f0;
  --sat-text:#3a3a3a;
  --sat-text-muted:#666666;
  --sat-border:#e0e0e0;  --sat-fill:#f0f0f0;
  --sat-tint-1:#e8f8fa;  --sat-tint-2:#c8eef4;  --sat-white:#ffffff;
  --sat-focus:#007f93;         /* focus ring only */

  /* Fonts: body = Rethink Sans; headings and buttons = Century Gothic */
  --sat-font-heading:'Century Gothic',CenturyGothic,AppleGothic,sans-serif;
  --sat-font-body:'Rethink Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Type scale (desktop, then 1024, then 767 below) */
  --sat-h1-hero:60px; --sat-h1-hero-lh:70px;
  --sat-h1:40px;      --sat-h1-lh:48px;
  --sat-h2:36px;      --sat-h2-lh:44px;
  --sat-h3:20px;      --sat-h3-lh:26px;
  --sat-body:16px;    --sat-body-lh:27px;
  --sat-small:14px;   --sat-small-lh:22px;
  --sat-label:15px;
  --sat-caption:12px; --sat-caption-lh:18px;

  /* Spacing */
  --sat-s1:4px; --sat-s2:8px; --sat-s3:12px; --sat-s4:16px; --sat-s5:24px;
  --sat-s6:32px; --sat-s7:48px; --sat-s8:64px; --sat-s9:80px; --sat-s10:96px;
  --sat-section-y:80px; --sat-section-y-end:96px;
  --sat-container:1140px; --sat-gutter:24px;
  --sat-radius-card:20px; --sat-radius-ui:10px; --sat-radius-pill:50px;
  --sat-tap:44px;
}
@media (max-width:1024px){ :root{ --sat-h1-hero:50px; --sat-h1-hero-lh:58px; --sat-h1:34px; --sat-h1-lh:42px; --sat-h2:30px; --sat-h2-lh:38px; --sat-gutter:40px; --sat-section-y:64px; --sat-section-y-end:64px; } }
@media (max-width:767px){ :root{ --sat-h1-hero:35px; --sat-h1-hero-lh:42px; --sat-h1:28px; --sat-h1-lh:36px; --sat-h2:26px; --sat-h2-lh:34px; --sat-h3:18px; --sat-h3-lh:24px; --sat-gutter:24px; --sat-section-y:48px; --sat-section-y-end:60px; } }

/* ===== Fonts scoped to the PHP template wrappers only (Elementor pages untouched) ===== */
.sat-range-wrap,.sat-cat-wrap,.sat-promo-wrap,.sat-gal-wrap,.sat-blog-wrap,.sat-product-wrap,.sat-sp-wrap,.sat-sbp-wrap,.sat-routine-wrap,.sat-tabs-wrap{
  font-family:var(--sat-font-body); }
:is(.sat-range-wrap,.sat-cat-wrap,.sat-promo-wrap,.sat-gal-wrap,.sat-blog-wrap,.sat-product-wrap,.sat-sp-wrap,.sat-sbp-wrap) :is(h1,h2,h3,button,.sat-btn){
  font-family:var(--sat-font-heading); }

/* ===== Shared hero system: 550 / 400 / 340 (templates keep only background-image/position) ===== */
.sat-range-hero,.sat-cat-hero,.sat-promo-hero,.sat-gal-hero,.sat-blog-hero,.sat-prod-hero,.sat-sp-hero,.sat-sbp-hero{
  height:550px; min-height:550px; position:relative; box-sizing:border-box; background-size:cover; background-position:center;
  display:flex; align-items:flex-end; justify-content:center; }
.sat-hero-title,.sat-range-hero__title,.sat-prod-hero__title,.sat-range-hero h1,.sat-cat-hero h1,.sat-promo-hero h1,.sat-gal-hero h1,.sat-blog-hero h1,.sat-prod-hero h1,.sat-sp-hero h1,.sat-sbp-hero h1{
  font-family:var(--sat-font-heading); font-weight:700; font-size:var(--sat-h1-hero); line-height:var(--sat-h1-hero-lh);
  color:#fff; text-align:center; width:100%; margin:0; padding:0 var(--sat-gutter) 20px; box-sizing:border-box; }
@media (max-width:1024px){ .sat-range-hero,.sat-cat-hero,.sat-promo-hero,.sat-gal-hero,.sat-blog-hero,.sat-prod-hero,.sat-sp-hero,.sat-sbp-hero{ height:400px; min-height:400px; } }
@media (max-width:767px){ .sat-range-hero,.sat-cat-hero,.sat-promo-hero,.sat-gal-hero,.sat-blog-hero,.sat-prod-hero,.sat-sp-hero,.sat-sbp-hero{ height:340px; min-height:340px; } }

/* Legacy banners (Where to Buy, Partnerships and the Elementor-built pages) keep the previous responsive sizes */
@media (max-width:1024px){
  .sat-wtb-hero,.sat-pt-hero,.elementor-element-e16e90b,.elementor-element-418aea9e,.elementor-element-a1d0aaf,.elementor-element-145970eb{ height:400px !important; min-height:400px !important; }
  .sat-wtb-hero h1,.sat-pt-hero h1,.elementor-element-e16e90b h1,.elementor-element-418aea9e h1,.elementor-element-418aea9e h2,.elementor-element-a1d0aaf h1,.elementor-element-a1d0aaf h2{ font-size:50px !important; }
}
@media (max-width:767px){
  .sat-wtb-hero,.sat-pt-hero,.elementor-element-e16e90b,.elementor-element-418aea9e,.elementor-element-a1d0aaf,.elementor-element-145970eb{ height:340px !important; min-height:340px !important; }
  .sat-wtb-hero h1,.sat-pt-hero h1,.elementor-element-e16e90b h1,.elementor-element-418aea9e h1,.elementor-element-418aea9e h2,.elementor-element-a1d0aaf h1,.elementor-element-a1d0aaf h2{ font-size:35px !important; }
}

/* ===== Eyebrow (approved CI) ===== */
.sat-eyebrow{ display:inline-block; font:600 14px/16px var(--sat-font-body); text-transform:uppercase; color:var(--sat-teal);
  border:1px solid var(--sat-teal); border-radius:var(--sat-radius-ui); padding:7px 10px; margin-bottom:var(--sat-s4); }
.sat-eyebrow--on-teal{ color:#fff; border-color:#fff; }

/* ===== Button: 50px pill, teal unchanged ===== */
.sat-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:14px 32px; box-sizing:border-box;
  border-radius:var(--sat-radius-pill); background:var(--sat-teal); color:#fff; border:2px solid var(--sat-teal);
  font:700 16px/18px var(--sat-font-heading); text-decoration:none; cursor:pointer; transition:background .2s,color .2s; }
.sat-btn:hover{ background:#fff; color:var(--sat-teal); }
.sat-btn--on-teal{ background:#fff; color:var(--sat-teal); border-color:#fff; }
.sat-btn--on-teal:hover{ background:transparent; color:#fff; }

/* ===== Focus (Q-43) ===== */
:where(a,button,[role=button],input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid var(--sat-focus); outline-offset:2px; }

/* ===== Helpers ===== */
.sat-tap{ min-width:var(--sat-tap); min-height:var(--sat-tap); }               /* 44px minimum hit area (Q-44) */
.sat-tap-pad{ position:relative; }
.sat-tap-pad::after{ content:""; position:absolute; inset:50% auto auto 50%; width:max(100%,var(--sat-tap)); height:max(100%,var(--sat-tap)); transform:translate(-50%,-50%); }
.sat-container{ max-width:1440px; margin-inline:auto; padding-inline:var(--sat-gutter); box-sizing:border-box; }
.sat-container--narrow{ max-width:var(--sat-container); }