:root {

    --root-font-size: 16px;

    /* Text sizing presets */    

    --text-size-9xs: 0.375rem; /* 6px */
    --text-size-8xs: 0.4375rem; /* 7px */
    --text-size-7xs: 0.5rem;    /* 8px */
    --text-size-6xs: 0.5625rem; /* 9px */
    --text-size-5xs: 0.625rem;  /* 10px */
    --text-size-4xs: 0.6875rem; /* 11px */
    --text-size-3xs: 0.75rem;   /* 12px */
    --text-size-2xs: 0.8125rem; /* 13px */
    --text-size-xs: 0.875rem;  /* 14px */
    --text-size-sm: 0.9375rem;  /* 15px */
    --text-size-reg: 1rem;     /* 16px */
    --text-size-lg: 1.125rem;   /* 18px */
    --text-size-xl: 1.25rem;    /* 20px */
    --text-size-2xl: 1.375rem;   /* 22px */
    --text-size-3xl: 1.5rem;    /* 24px */
    --text-size-4xl: 1.75rem;   /* 28px */
    --text-size-5xl: 2rem;      /* 32px */
    --text-size-6xl: 2.25rem;   /* 36px */
    --text-size-7xl: 2.5rem;    /* 40px */
    --text-size-8xl: 2.75rem;   /* 44px */
    --text-size-9xl: 3rem;      /* 48px */
    --text-size-10xl: 3.375rem;  /* 54px */
    --text-size-11xl: 3.75rem;  /* 60px */
    --text-size-12xl: 4.125rem; /* 66px */
    --text-size-13xl: 4.5rem;   /* 72px */
    --text-size-14xl: 5rem;     /* 80px */
    --text-size-15xl: 5.5rem;   /* 88px */
    --text-size-16xl: 6rem;     /* 96px */
    --text-size-17xl: 7rem;     /* 112px */
    --text-size-18xl: 8rem;     /* 128px */


    /* Font weight presets */
    
    --font-weight-xlight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-xbold: 800;



    /* content sections */
    --base-content-section-max-width: 80rem;
    --base-content-section-padding-x: 5%;
    --base-content-section-margin: 0 auto;

}


/* ========== BROWSER-DEFAULT FIXES ========== */
/*
 * These are bug-fix overrides for browser defaults that no realistic site
 * would want to keep. Universal — no design opinion. Anything more
 * opinionated (typography defaults, link colours, paragraph spacing, etc.)
 * lives in site-styles-boilerplate.css and is per-site overridable.
 */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

button, input, select, textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
}




/* ========== CONTENT SECTION SETTINGS ========== */

/* --- Vertical Section Paddings --- */

.section-padding-y-none {
    padding-top: 0;
    padding-bottom: 0;
}

.section-padding-y-7xs {
    padding-top: clamp(0.25rem, 0.5vw, 0.5rem);
    padding-bottom: clamp(0.25rem, 0.5vw, 0.5rem);
}

.section-padding-y-6xs {
    padding-top: clamp(0.5rem, 1vw, 1rem);
    padding-bottom: clamp(0.5rem, 1vw, 1rem);
}

.section-padding-y-5xs {
    padding-top: clamp(0.75rem, 1.5vw, 1.5rem);
    padding-bottom: clamp(0.75rem, 1.5vw, 1.5rem);
}

.section-padding-y-4xs {
    padding-top: clamp(1rem, 2vw, 2rem);
    padding-bottom: clamp(1rem, 2vw, 2rem);
}

.section-padding-y-3xs {
    padding-top: clamp(1.25rem, 2.5vw, 2.5rem);
    padding-bottom: clamp(1.25rem, 2.5vw, 2.5rem);
}

.section-padding-y-2xs {
    padding-top: clamp(1.5rem, 3vw, 3rem);
    padding-bottom: clamp(1.5rem, 3vw, 3rem);
}

.section-padding-y-xs {
    padding-top: clamp(2rem, 4vw, 4rem);
    padding-bottom: clamp(2rem, 4vw, 4rem);
}

.section-padding-y-sm {
    padding-top: clamp(2.5rem, 5vw, 5rem);
    padding-bottom: clamp(2.5rem, 5vw, 5rem);
}

.section-padding-y-md {
    padding-top: clamp(3rem, 6vw, 6rem);
    padding-bottom: clamp(3rem, 6vw, 6rem);
}

.section-padding-y-lg {
    padding-top: clamp(3.5rem, 7vw, 7rem);
    padding-bottom: clamp(3.5rem, 7vw, 7rem);
}

.section-padding-y-xl {
    padding-top: clamp(4rem, 8vw, 8rem);
    padding-bottom: clamp(4rem, 8vw, 8rem);
}

.section-padding-y-2xl {
    padding-top: clamp(5rem, 10vw, 10rem);
    padding-bottom: clamp(5rem, 10vw, 10rem);
}

.section-padding-y-3xl {
    padding-top: clamp(6rem, 12vw, 12rem);
    padding-bottom: clamp(6rem, 12vw, 12rem);
}

.section-padding-y-4xl {
    padding-top: clamp(7rem, 14vw, 14rem);
    padding-bottom: clamp(7rem, 14vw, 14rem);
}

.section-padding-y-5xl {
    padding-top: clamp(8rem, 16vw, 16rem);
    padding-bottom: clamp(8rem, 16vw, 16rem);
}

.section-padding-y-6xl {
    padding-top: clamp(9rem, 18vw, 18rem);
    padding-bottom: clamp(9rem, 18vw, 18rem);
}

.section-padding-y-7xl {
    padding-top: clamp(10rem, 20vw, 20rem);
    padding-bottom: clamp(10rem, 20vw, 20rem);
}


/* --- Horizontal Section Paddings --- */

.content-section.section-padding-x-none {
    padding-left: 0;
    padding-right: 0;
}

.content-section {
    padding-left: var(--base-content-section-padding-x);
    padding-right: var(--base-content-section-padding-x);
    margin: 0;
}

.content-section-inner {
    max-width: var(--base-content-section-max-width);
    margin: var(--base-content-section-margin);
}



/* ========== UTILITY CLASSES ========== */

/* What earns a spot here: a class that is STABLE (never needs changing),
   GENERIC (used across many sites/contexts), and COMMON enough to be worth
   humans + AI remembering it exists. These are the safest things in core —
   cached, never change (so no risk of a future edit breaking old sites), and
   inert until applied (no imposed look). Keep OUT of core: opinionated/design
   defaults → per-site boilerplate; one-off or site-specific styling → write it
   inline. The real cost of a utility is LEARNABILITY (one more name to know, or
   it gets reinvented), NOT risk. So: stable + generic + worth-learning → here;
   otherwise, don't. */

/* Visually hidden but kept in the accessibility tree — for labels on
   placeholder-only fields, icon-button text, skip links, live regions, etc. */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.text-center, .text-center * {
    text-align: center;
}
.text-left, .text-left * {
    text-align: left;
}
.text-right, .text-right * {
    text-align: right;
}
.text-jusitfy, .text-justify * {
    text-align: justify;
}

.text-wrap { text-wrap: wrap; }
.text-nowrap { text-wrap: nowrap; }
.text-balanced { text-wrap: balanced; }
.text-pretty { text-wrap: pretty; }

.mx-auto {
    margin-left: 0;
    margin-right: 0;
}

.flex { display: flex;}
.inline-flex { display: inline-flex; }

.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }


.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-end-safe { align-items: safe flex-end; }
.items-center { align-items: center; }
.items-center-safe { align-items: safe center; }
.items-baseline { align-items: baseline; }
.items-baseline-last { align-items: last baseline; }
.items-stretch { align-items: stretch; }


.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-end-safe { justify-content: safe flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
.justify-stretch { justify-content: stretch; }
.justify-center { justify-content: center; }
.justify-center-safe { justify-content: safe center; }

.scaled-max-width {
    max-width: calc(var(--base-content-section-max-width)* var(--scale-factor, 0.6));
    margin-left: auto;
    margin-right: auto;
}
.scale-factor-95 { --scale-factor: 0.95; }
.scale-factor-90 { --scale-factor: 0.90; }
.scale-factor-85 { --scale-factor: 0.85; }
.scale-factor-80 { --scale-factor: 0.80; }
.scale-factor-75 { --scale-factor: 0.75; }
.scale-factor-70 { --scale-factor: 0.70; }
.scale-factor-65 { --scale-factor: 0.65; }
.scale-factor-60 { --scale-factor: 0.60; }
.scale-factor-55 { --scale-factor: 0.55; }
.scale-factor-50 { --scale-factor: 0.50; }
.scale-factor-45 { --scale-factor: 0.45; }
.scale-factor-40 { --scale-factor: 0.40; }
.scale-factor-35 { --scale-factor: 0.35; }
.scale-factor-30 { --scale-factor: 0.30; }



.link-button {
    text-decoration: none;
    display: inline-flex;
}


.grid { display: grid; }
.inline-grid { display: inline-grid; }


.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .75rem;
    row-gap: 1rem;
}


.grid-section {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columns on medium and large screens */
    gap: 2rem;
}


.grid-section > * {
    /*text-align: center;*/
}

.grid-section > * > * + * {
    margin-top: 1rem;
}

@media (max-width: 768px) {

    .grid-section {
        grid-template-columns: repeat(1, minmax(0, 1fr)); /* Single column on small screens */
        
    }

}



/* ====================== CORE COMPONENT STYLES ====================== */



/* -------------------------------------------------------- */
/* CORE DESIGN ANCHORS — a tiny shared layer the components    */
/* below fall back to, so "set it once" re-themes them all.    */
/* Engine-owned (--core-*), guaranteed here. Override via the   */
/* theme editor (Accent / Corner radius) or custom_styles —     */
/* point the Accent token at a palette colour to brand-match    */
/* every component. Only roles consumed by 2+ components live    */
/* here — NOT a brand kit (that's the --color-* palette).       */
/* -------------------------------------------------------- */
:root {
    --core-accent:          #2b6cb0;   /* primary interactive / emphasis colour */
    --core-accent-contrast: #ffffff;   /* readable text/icon ON the accent (e.g. button label) */
    --core-border:          #cccccc;   /* neutral borders & dividers */
    --core-muted:           #8a8a8a;   /* secondary / placeholder / help text */
    --core-radius:          8px;       /* base corner radius for controls/cards */
}



/* -------------------------------------------------------- */
/* FORMS — two opt-in layers, usable together or apart:       */
/*   .core-form-style  field MECHANICS (look, focus, a11y)    */
/*   .core-form-grid   field LAYOUT (stacking, columns)       */
/* Colours/sizes are var(--core-form-*, fallback): undefined  */
/* -> a sensible default; set the var (custom_styles/theme)   */
/* to override. The submit gets a low-specificity accent button */
/* default; any site button class overrides it without a fight. */
/* Full usage: prompts/patterns/form-styling.md                 */
/* -------------------------------------------------------- */

/* --- Field mechanics: wrap the form in .core-form-style --- */
/* Field styling skips the button-type inputs (they get the button rule below).
   :where(:not(...)) excludes them WITHOUT raising this rule's specificity. */
.core-form-style input:where(:not([type="submit"], [type="button"], [type="reset"])),
.core-form-style select,
.core-form-style textarea {
    box-sizing: border-box;
    font: inherit;
    width: 100%;
    color:            var(--core-form-field-text-color, inherit);
    background:        var(--core-form-field-bg, #fff);
    border: 1px solid var(--core-form-field-border, var(--core-border, #ccc));
    border-radius:     var(--core-form-radius, var(--core-radius, 8px));
    padding: 0.75rem 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.core-form-style input:focus,
.core-form-style select:focus,
.core-form-style textarea:focus {
    border-color: var(--core-form-field-border-focus, var(--core-accent, #2b6cb0));
    box-shadow: 0 0 0 3px color-mix(in srgb,
        var(--core-form-field-border-focus, var(--core-accent, #2b6cb0)) 25%, transparent);
    outline: 2px solid transparent;   /* keeps a visible focus ring under forced-colors */
    outline-offset: 2px;
}

.core-form-style input:disabled,
.core-form-style select:disabled,
.core-form-style textarea:disabled {
    background: var(--core-form-field-bg-disabled, #f5f5f5);
    color:      var(--core-form-field-text-disabled, var(--core-muted, #999));
    cursor: not-allowed;
}

.core-form-style ::placeholder { color: var(--core-form-placeholder, var(--core-muted, #8a8a8a)); opacity: 1; }

/* Checkbox / radio: small + brand-accented (overrides width:100% above) */
.core-form-style input[type="checkbox"],
.core-form-style input[type="radio"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--core-form-checkbox-accent, var(--core-accent, #2b6cb0));
}

.core-form-style textarea { min-height: 120px; resize: vertical; }

/* Submit / button — a low-specificity (:where) accent default so a zero-effort
   form isn't raw browser chrome. The :where() keeps this at .core-form-style's
   specificity (0,1,0), so any site button class (loaded after core) wins by
   source order — and a non-styling utility / JS / state class won't blow it away
   the way :not([class]) would. */
.core-form-style :where(button, input[type="submit"], input[type="button"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    background-color: var(--core-form-button-bg, var(--core-accent));
    color: var(--core-form-button-text-color, var(--core-accent-contrast, #fff));
    border: 0;
    border-radius: var(--core-radius, 8px);
    padding: 0.75rem 1.5rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
/* Hover darkens whatever the button colour actually is (token, accent, or even a
   site override) — color-mix reads the live value. Zero specificity (:where), so a
   site's own :hover still wins. */
.core-form-style :where(button:hover, input[type="submit"]:hover, input[type="button"]:hover) {
    background-color: color-mix(in srgb, var(--core-form-button-bg, var(--core-accent)) 88%, black);
}
.core-form-style :where(button, input[type="submit"], input[type="button"]):disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Invalid state — hooks the correct a11y attribute */
.core-form-style [aria-invalid="true"] {
    border-color: var(--core-form-field-border-invalid, #c0392b);
}

/* Fieldset reset (+ the min-width:0 that stops fieldsets blowing out flex/grid) */
.core-form-style fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.core-form-style legend   { padding: 0; font-weight: 600; }

/* A field stacks its label text above its control. The wrapping <label> stays
   BLOCK so its inline content — the label text PLUS a required asterisk / <abbr>
   etc. — flows on one line; the control drops below. (A flex column would put every
   inline child, the asterisk included, on its own row — that was the bug.)
   Checkbox/radio aren't full-width, so they stay inline before their text with no
   special rule. :where() keeps specificity low so a site can restyle with one class. */
.core-form-style :where(label) { display: block; }
.core-form-style :where(label) > :where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
    display: block;
    margin-top: 0.4rem;
}
/* The explicit .core-form-group wrapper holds separate label / control / help
   elements, so a flex column with a uniform gap is clean here (the <label> is one
   item, so its own inline asterisk stays inline within it). */
.core-form-style :where(.core-form-group) {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Vertical rhythm between a form's direct children (fields, button, …). Restores the
   between-field spacing the OLD .core-form-style gave via label margins, so a PLAIN
   form (no .core-form-grid) isn't cramped. A grid is a single child here, so its own
   gap isn't doubled. Low specificity — override with --core-form-gap or your own rule. */
.core-form-style > * + * {
    margin-top: var(--core-form-gap, 1rem);
}

/* Help text / required marker / error message (namespaced; usable anywhere) */
.core-form-help     { font-size: 0.875rem; color: var(--core-muted, #8a8a8a); }
.core-form-required { color: var(--core-form-field-border-invalid, #c0392b); }
.core-form-error    { color: var(--core-form-field-border-invalid, #c0392b); font-size: 0.875rem; }

/* --- Field layout: wrap the fields in .core-form-grid --- */
/* Smart default: no child classes -> every field full-width & stacked, spaced.
   6-col basis lets a field opt into a half/third to share a row. */
.core-form-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--core-form-gap, 1rem);
}
.core-form-grid > * { grid-column: 1 / -1; min-width: 0; }   /* full width by default */
.core-form-grid > .core-form-grid-half  { grid-column: span 3; }
.core-form-grid > .core-form-grid-third { grid-column: span 2; }
@media (max-width: 600px) {
    .core-form-grid > * { grid-column: 1 / -1; }             /* collapse to one column */
}

/* Inline field + button (newsletter, search) — wraps on narrow screens */
.core-form-inline { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: start; }
.core-form-inline > input,
.core-form-inline > .core-form-group { flex: 1 1 12rem; }   /* input grows */
.core-form-inline > button { flex: 0 0 auto; }              /* button hugs, wraps below */

/* The form's action row — separated from the fields; full-width submit on mobile */
.core-form-actions {
    display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
    margin-top: 1rem;
}
@media (max-width: 600px) {
    .core-form-actions > button { width: 100%; }
}

/* Floating label (OPT-IN, a design choice). Label rests as the placeholder when
   empty, floats up small on focus/fill. Needs <input placeholder=" "> with the
   label AFTER it. The one design-opinionated piece here — restyle per-site. */
.core-form-float { position: relative; }
.core-form-float > input { padding-top: 1.4rem; }
.core-form-float > label {
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    pointer-events: none; color: var(--core-form-placeholder, #8a8a8a);
    transition: transform 0.15s ease, top 0.15s ease, font-size 0.15s ease;
}
.core-form-float > input:focus + label,
.core-form-float > input:not(:placeholder-shown) + label {
    top: 0.55rem; transform: translateY(-50%) scale(0.8);
}

/* -------------------------------------------------------- */
/* ACCORDION (FAQs, etc) */
/* -------------------------------------------------------- */

.core-accordion-01 {
    width: 100%;
}

.core-accordion-01 > * + * {
    margin-top: 1.8rem;
}

.core-accordion-01 details {
    padding: 1.4rem;
    position: relative;
}

/* Optional - Apply border-radius if data-rounded is missing or not "false" */
.core-accordion-01:not([data-rounded="false"]) details {
    border-radius: 1rem;
}

/* Optional Shadow */
.core-accordion-01[data-shadow="true"] details {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.core-accordion-01 details summary {
    font-weight: 500;
    font-size: 1.2rem;
    cursor: pointer;
}
.core-accordion-01 details[open] summary {
    margin-bottom: 0.75rem;
}
/* If not using default browser triangles */
.core-accordion-01:not([data-icon="left-triangles"]) details summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 26px;
    position: relative;
}
.core-accordion-01:not([data-icon="left-triangles"]) details summary::-webkit-details-marker {
    display: none;
}

/* Default Icon: Plus/Cross */
.core-accordion-01:not([data-icon]) details summary::after, 
.core-accordion-01[data-icon="plus-cross"] details summary::after {
    content: "+";
    font-family: Arial, sans-serif;
    font-size: 2.2rem;
    font-weight: 400;
    color: #333;
    transition: transform 0.3s ease-in-out;
    position: absolute;
    right: 0;
}

/* Rotate 45 degrees to look like X when open */
.core-accordion-01:not([data-icon]) details[open] summary::after,
.core-accordion-01[data-icon="plus-cross"] details[open] summary::after {
    transform: rotate(45deg);
}

/* Up/Down Arrows (SVG) */
.core-accordion-01[data-icon="up-down"] details summary::after {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;*/
    background-color: black;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform 0.3s ease-in-out;
    position: absolute;
    right: 0;
}

/* Rotate 180 degress when open */
.core-accordion-01[data-icon="up-down"] details[open] summary::after {
    transform: rotate(180deg);
}

/* Left Triangles (Browser Default) */
.core-accordion-01[data-icon="left-triangles"] details summary::after {
    content: none;
}



/* -------------------------------------------------------- */
/* TRAY MODAL */
/* -------------------------------------------------------- */

.core-tray-modal {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 3000;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0.3s ease-in-out;
  }
.core-tray-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.core-tray-panel {
    position: absolute;
    right: 0;
    top: 0;
    background-color: white;
    width: 100%;
    max-width: 40rem;
    height: 100vh;
    padding: 5rem 4rem;
    overflow: auto;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.3s ease-in-out;
  }
  .core-tray-modal.core-tray-modal-open {
    visibility: visible;
    pointer-events: auto;
  }
  .core-tray-modal.core-tray-modal-open .core-tray-panel {
    transform: translate3d(0, 0, 0);
  }
  .core-tray-modal.core-tray-modal-open .core-tray-overlay {
    opacity: 1;
  }
  .core-tray-content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .core-tray-header, .core-tray-body {
    padding: 0;
  }
  .core-tray-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    margin-bottom: 1rem;
  }
  .core-tray-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--body-text-color);
    position: absolute;
    top: 15px;
    right: 15px;
  }

  @media (max-width: 600px) {
    .core-tray-panel {
      max-width: 100%;
      padding: 3rem 2rem;
    }
  }

  

/* -------------------------------------------------------- */
/* CONTENT SLIDER (e.g. for testimonials  */
/* -------------------------------------------------------- */

  
.core-content-slider {
    width: 100%;
    overflow: hidden;
}
.slider-track {
    display: flex;
    scroll-behavior: smooth;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 20px;
}
.slider-track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
    .slider-track { scroll-behavior: auto; }
}
.slider-item {
    flex: 0 0 auto;
}

.slider-prev, .slider-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #eee;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s;
    width: fit-content;
    height: fit-content;
}
.slider-arrow-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.slider-dots {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.slider-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #bbb;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    border: none;
    transition: background 0.2s;
}
.slider-dot.active {
    background: #333;
}