/* ============================================================================
   CMS content controls — theme-independent baseline.
   Injected into every public page by ThemeRenderer (before the theme CSS, so a
   theme can still override). Styles the markup the CMS generates for content
   controls (banners, etc.) so they look consistent on ANY theme.
   ========================================================================== */

/* ── Canonical add-on colour tokens ────────────────────────────────────────
   Every cms-* control references these — never a hard-coded colour — so the
   whole add-on system follows the site's Primary / Secondary / Tertiary /
   Quaternary theme colours. They derive from whatever the active theme set
   (Porto emits --primary…--quaternary; lightweight themes emit --cms-accent /
   --brand), falling back to the legacy CMS blue so existing sites look the same
   until a theme colour is chosen. Secondary/Tertiary/Quaternary fall back to
   Primary so a single-colour theme still looks cohesive. */
:root {
    --cms-primary: var(--primary, var(--cms-accent, var(--brand, #0088cc)));
    --cms-secondary: var(--secondary, var(--cms-primary));
    --cms-tertiary: var(--tertiary, var(--cms-primary));
    --cms-quaternary: var(--quaternary, var(--cms-primary));
    --cms-primary-dark: var(--brand-dark, var(--primary-100, var(--cms-primary)));
    --cms-rating: #f5a623;   /* star-rating gold — conventional; override per theme if desired */
}

/* ── Full-width blocks ─────────────────────────────────────────────────────
   A block flagged "Full width" must render edge-to-edge even when the theme's
   content region sits inside a centered .container. This breaks the wrapper out
   to the full viewport width regardless of any ancestor max-width. */
.cms-fullwidth {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* ── Banner control (hero) ─────────────────────────────────────────────────
   Markup: <div class="control control-banners">
             <figure class="banner"><img …><figcaption><h3><div.banner-text><a.banner-link></figcaption></figure>
           </div>                                                            */
/* No top gap: a banner is a hero and should sit flush under the menu (or whatever precedes it). */
.control-banners { margin: 0 0 2rem; }

.control-banners .banner {
    position: relative;
    margin: 0;
    min-height: clamp(260px, 38vw, 460px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0;          /* square by default; opt into rounded per banner / master */
    background: #1a2230;            /* fallback when there is no image */
}
.control-banners .banner + .banner { margin-top: 1.25rem; }

.control-banners .banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    /* Whole-banner opacity fades the IMAGE only — the caption (z-index 3) stays fully crisp. Default 1 = solid. */
    opacity: var(--banner-op, 1);
}

/* Readability overlay over the image. */
.control-banners .banner::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Darker, centre-weighted scrim so the white caption reads crisp & bright over any image (incl. light areas). */
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75)),
                radial-gradient(ellipse at center, rgba(0,0,0,.35), rgba(0,0,0,0) 70%);
    z-index: 2;
}

.control-banners .banner figcaption {
    position: relative;
    z-index: 3;
    text-align: center;
    color: #fff;
    max-width: 760px;
    padding: 2.5rem 1.5rem;
}
.control-banners .banner figcaption h3 {
    margin: 0 0 .6rem;
    color: #fff;
    line-height: 1.15;
    font-size: clamp(1.6rem, 4.5vw, 2.8rem);
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5);
}
.control-banners .banner-text {
    margin: 0 auto 1.4rem;
    color: #fff;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.5;
    text-shadow: 0 2px 8px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.45);
}
/* Force bold, bright-white caption even when the active theme tints headings/paragraphs darker. */
.control-banners .banner figcaption h3 { color: #fff !important; font-weight: 800 !important; }
.control-banners .banner figcaption .banner-text { color: #fff !important; }
.control-banners .banner-link {
    display: inline-block;
    padding: .65rem 1.6rem;
    background: #fff;
    color: #11161f;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .08s ease, background-color .15s ease;
}
.control-banners .banner-link:hover { background: #eef1f6; transform: translateY(-1px); }

/* A banner with no image: just the caption on the fallback background. Parallax banners also have no
   <img> (the photo is a CSS background) — they must KEEP the default banner height, not collapse. */
.control-banners .banner:not(:has(img)):not(.banner-parallax) { min-height: auto; }
.control-banners .banner:not(:has(img)):not(.banner-parallax) figcaption { padding: 3rem 1.5rem; }

/* ── Plain style: "match theme" ────────────────────────────────────────────
   Drops the dark hero band so an uploaded banner blends with the theme: the
   whole image shows (no crop/overlay), and the caption inherits the theme's
   own typography + button styling instead of the CMS white-on-dark look. */
.control-banners-plain .banner {
    display: block;
    min-height: 0;
    height: auto !important;        /* override master/keyword heights — let the image set its own size */
    background: none;
    overflow: visible;
}
.control-banners-plain .banner img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;            /* show the WHOLE image, never cropped */
}
.control-banners-plain .banner::before { display: none; }   /* no dark overlay */
.control-banners-plain .banner figcaption {
    position: static;
    color: inherit;                 /* theme text colour, not forced white */
    max-width: none;
    padding: 1.25rem 0 0;
    text-shadow: none;
}
.control-banners-plain .banner figcaption h3 {
    color: inherit;
    text-shadow: none;
}
.control-banners-plain .banner-text { color: inherit; text-shadow: none; }
/* The button uses the theme's own .btn classes (emitted by the renderer), so no overrides here. */

/* ── Testimonials control ──────────────────────────────────────────────────
   <div.control-testimonials> <blockquote.testimonial> img.testimonial-avatar,
   p.testimonial-text, cite                                                   */
.control-testimonials { margin: 0 0 2rem; }
.control-testimonials .testimonial {
    margin: 0;
    padding: 1.5rem;
    background: #f7f8fa;
    border: 1px solid #eceef1;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
/* Stack: one per row. Grid: responsive cards. Carousel: horizontal swipe. */
.control-testimonials.mode-stack { display: flex; flex-direction: column; }
.control-testimonials.mode-stack .testimonial { max-width: 720px; margin: 1.25rem auto 0; width: 100%; }
/* Grid layout: a fixed cards-per-row from the setup (--cms-tcols, default 3). minmax(0,1fr) keeps columns equal so one
   long testimonial can't blow a column wide. Collapses to 2 (tablet) then 1 (mobile). */
.control-testimonials.mode-grid { display: grid; grid-template-columns: repeat(var(--cms-tcols, 3), minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 900px) { .control-testimonials.mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .control-testimonials.mode-grid { grid-template-columns: 1fr; } }

.control-testimonials.mode-carousel { display: flex; align-items: stretch; gap: .5rem; }
.control-testimonials.mode-carousel .tcar-track {
    display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; flex: 1 1 auto; padding-bottom: .25rem;
}
.control-testimonials.mode-carousel .tcar-track::-webkit-scrollbar { display: none; }
.control-testimonials.mode-carousel .testimonial { scroll-snap-align: start; flex: 0 0 min(100%, 340px); }
.control-testimonials .tcar-nav {
    flex: 0 0 auto; align-self: center; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid #d7dbe0; background: #fff; color: #333; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.control-testimonials .tcar-nav:hover { background: #f1f3f5; }

.control-testimonials .testimonial-stars { color: #f5b301; letter-spacing: 2px; font-size: 1.05rem; }
.control-testimonials .testimonial-text { margin: 0; font-size: 1.05rem; line-height: 1.6; font-style: italic; }
.control-testimonials .testimonial-by { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.control-testimonials .testimonial-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.control-testimonials .testimonial-cite { font-style: normal; font-weight: 600; color: #2b3138; display: flex; flex-direction: column; }
.control-testimonials .testimonial-role { font-weight: 400; color: #6a7280; font-size: .9rem; }

/* ── Map control ───────────────────────────────────────────────────────────
   <div.control-maps> <iframe.map>                                            */
.control-maps { margin: 0 0 2rem; }
.control-maps .map {
    width: 100%;
    min-height: 320px;
    border: 0;
    border-radius: 10px;
    display: block;
}
.control-maps .map + .map { margin-top: 1rem; }

/* ── Quick links control ───────────────────────────────────────────────────
   Image tiles with a hover caption: <a.quicklink> > .quicklink-media img
   + .quicklink-cap (.quicklink-title always shown, .quicklink-sub on hover).  */
.control-quicklinks { position: relative; margin: 0 0 2rem; }
.control-quicklinks .ql-track {
    /* proximity (not mandatory): mandatory snap fights the prev/next scrollBy and pins the track. */
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
    padding: .25rem .25rem 1rem; scrollbar-width: none; -ms-overflow-style: none;
}
.control-quicklinks .ql-track::-webkit-scrollbar { display: none; }
/* "Sub-pages" control — a parent page's children as graphical cards (thumbnail from each child's
   page-header image, title, excerpt, link). */
.control-subpages { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin: 1.25rem 0 1.75rem; }
.control-subpages .subpage-card { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden;
    background: #fff; border: 1px solid #e9edf2; box-shadow: 0 1px 3px rgba(0,0,0,.05); text-decoration: none; color: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.control-subpages .subpage-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.10); border-color: #dbe1e7; }
/* Keep the lift/shadow hover, but never underline the title (some themes underline links on hover). */
.control-subpages .subpage-card, .control-subpages .subpage-card:hover,
.control-subpages .subpage-card:hover .subpage-title { text-decoration: none !important; }
.control-subpages .subpage-thumb { display: block; height: 165px; background-size: cover; background-position: center; background-color: #e9edf2; }
/* Card thumbnails are real <img> now (alt text, lazy loading, image SEO); object-fit keeps the old cover
   crop. Heights are restated at img specificity because theme resets (.main img { height:auto }) outrank
   the plain class rules. */
img.subpage-thumb, img.cms-postfeed-img, img.cms-card-img { width: 100%; object-fit: cover; }
.control-subpages img.subpage-thumb { height: 165px; }
.cms-postfeed img.cms-postfeed-img { height: 150px; }
.cms-postfeed-mode-list img.cms-postfeed-img { height: auto; }
.cms-cards img.cms-card-img { height: 170px; }
.control-subpages .subpage-thumb-blank { background: linear-gradient(135deg, var(--cms-accent, var(--primary, #2563eb)), #11151c); }
/* No banner image → a clean compact card with a coloured top accent bar instead of a big empty box. */
.control-subpages .subpage-card-noimg { border-top: 4px solid var(--cms-accent, var(--primary, #2563eb)); }
.control-subpages .subpage-card-noimg .subpage-body { padding-top: 1.25rem; }
.control-subpages .subpage-card-noimg .subpage-title { font-size: 1.25rem; }
.control-subpages .subpage-body { padding: 1rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.control-subpages .subpage-title { font-weight: 700; font-size: 1.15rem; line-height: 1.2; color: #1f2733; }
.control-subpages .subpage-desc { color: #6b7280; font-size: .9rem; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.control-subpages .subpage-go { margin-top: auto; padding-top: .3rem; font-weight: 600; font-size: .9rem;
    color: var(--cms-accent, var(--primary, #2563eb)); }
/* One slide = one image (fully visible) with the caption BELOW it + one link. */
.control-quicklinks .quicklink {
    flex: 0 0 auto; width: min(240px, 70vw); scroll-snap-align: start;
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
}
.control-quicklinks .quicklink-media {
    display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px;
    background: #1f2733;          /* fallback when a slide has no image */
}
.control-quicklinks .quicklink-media img {
    width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease;
}
.control-quicklinks .quicklink:hover .quicklink-media img { transform: scale(1.05); }
.control-quicklinks .quicklink-cap { padding: .6rem .15rem 0; display: flex; flex-direction: column; gap: .15rem; }
.control-quicklinks .quicklink-title { font-size: 1rem; font-weight: 700; line-height: 1.25; color: #1f2733; }
.control-quicklinks .quicklink:hover .quicklink-title { color: var(--cms-accent, var(--primary, #2563eb)); }
.control-quicklinks .quicklink-sub { font-size: .85rem; line-height: 1.35; color: #6b7280; }

/* Prev/next arrows — vertically centred on the image band, hidden at the respective ends. */
.control-quicklinks .ql-arrow {
    position: absolute; top: 38%; transform: translateY(-50%); z-index: 3;
    width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
    background: #fff; color: #1f2733; box-shadow: 0 2px 10px rgba(0,0,0,.18);
    font-size: 1.6rem; line-height: 1; display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease;
}
.control-quicklinks .ql-arrow:hover { background: var(--cms-accent, var(--primary, #2563eb)); color: #fff; }
.control-quicklinks .ql-prev { left: -8px; }
.control-quicklinks .ql-next { right: -8px; }
.control-quicklinks.ql-at-start .ql-prev,
.control-quicklinks.ql-at-end   .ql-next { display: none; }

/* ── Form control ──────────────────────────────────────────────────────────
   <form.control-form> <div.field><label><input|textarea>, <button>          */
.control-form {
    max-width: 560px;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.control-form .field { display: flex; flex-direction: column; gap: .2rem; }
.control-form label { font-weight: 600; font-size: .95rem; }
.control-form input:not([type=radio]):not([type=checkbox]),
.control-form select,
.control-form textarea {
    padding: .6rem .75rem;
    border: 1px solid #ccd2da;
    border-radius: 8px;
    font: inherit;
    width: 100%;
}
/* Radio/checkbox keep their native size + Bootstrap form-check sizing (not the full-width field styling). */
.control-form .form-check-input { width: 1.1em; height: 1.1em; padding: 0; border-radius: .25em; }
.control-form .form-check-input[type=radio] { border-radius: 50%; }
.control-form input:not([type=radio]):not([type=checkbox]):focus,
.control-form select:focus,
.control-form textarea:focus {
    outline: 2px solid var(--cms-primary);
    outline-offset: 1px;
    border-color: var(--cms-primary);
}
.control-form button {
    align-self: flex-start;
    padding: .65rem 1.6rem;
    background: var(--cms-primary);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
}
.control-form button:hover { background: #0a5cb8; }
/* Inline submit feedback: the form swaps to this "done" panel in place; errors show at the top. */
.control-form-done { margin: 0 0 2rem; padding: 2rem 1.5rem; text-align: center; border: 1px solid #d7e3f4; background: #f4f9ff; border-radius: 12px; }
.control-form-done .form-done-icon { width: 52px; height: 52px; margin: 0 auto .75rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #15803d; color: #fff; font-size: 28px; line-height: 1; }
.control-form-done p { margin: 0; font-size: 1.05rem; color: #1f2733; }
.control-form .form-error { margin: 0 0 1rem; padding: .65rem .9rem; border-radius: 8px; background: #fdecec; color: #b42318; border: 1px solid #f4c7c3; font-size: .95rem; }
/* Required-field validation (cms-ajax forms): a message banner + a red border on each empty required field. */
.cms-form-error { margin: 0 0 1.1rem; padding: .65rem .9rem; border-radius: 8px; background: #fdecec; color: #b42318; border: 1px solid #f4c7c3; font-size: .95rem; font-weight: 600; }
.cms-form-error[hidden] { display: none; }
.cms-field-error, .cms-ajax .cms-field-error { border-color: #dc2626 !important; box-shadow: 0 0 0 2px rgba(220,38,38,.18) !important; }
/* Required-field marker: a red asterisk after the label text. */
.cms-required-star { color: #dc2626; margin-left: .15rem; font-weight: 700; }

/* ── Lightbox / image gallery control ──────────────────────────────────────
   <div.control-lightbox> <h3>, <div.lightbox-gallery> (filled client-side)   */
.control-lightbox { margin: 0 0 2rem; }
.control-lightbox h3 { margin: 0 0 1rem; }
.control-lightbox .lightbox-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .75rem;
}
.control-lightbox .lightbox-gallery img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
}

/* Banner with a custom caption box: drop the default full overlay and let the
   box (set inline from the banner's colour + opacity) provide the contrast. */
.control-banners .banner.banner-boxed::before { display: none; }
.control-banners .banner.banner-boxed figcaption {
    border-radius: 10px;
    backdrop-filter: saturate(120%);
}

/* Parallax banner: the image is a fixed background the content scrolls over.
   (background-attachment:fixed is the simple, JS-free parallax used by many themes.) */
.control-banners .banner.banner-parallax {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
/* Touch devices don't support fixed attachment well — fall back to a normal cover image. */
@media (hover: none) {
    .control-banners .banner.banner-parallax { background-attachment: scroll; }
}
/* Whole-banner opacity for parallax: the photo is the figure's BACKGROUND, so it can't take `opacity` on
   its own. Fade it with a scrim toward the banner's dark base instead. --banner-dim is the inverse of the
   opacity, pre-computed by the renderer (no calc() → wider browser support). Default 0 = no dim. */
.control-banners .banner.banner-parallax::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgb(26 34 48 / var(--banner-dim, 0));
    z-index: 2;   /* over the image + readability scrim, but BELOW the caption (z-index 5) */
}

/* ── Banner layout options (height / corners / caption position / button) ── */
.control-banners .banner.banner-h-short { min-height: clamp(160px, 22vw, 240px); }
.control-banners .banner.banner-h-tall  { min-height: clamp(380px, 55vw, 640px); }
.control-banners .banner.banner-h-full  { min-height: 100vh; }
.control-banners .banner.banner-corners-square  { border-radius: 0; }
.control-banners .banner.banner-corners-rounded { border-radius: 10px; }

/* ── Master settings: applied to the whole banner control so EVERY banner matches.
   Uses a FIXED height (not min-height) so all banners are exactly the same size —
   the right behaviour for a slider and for tidy stacks. */
.control-banners[class*="banner-master-h-"] .banner { min-height: 0; }
.control-banners.banner-master-h-short  .banner { height: clamp(160px, 22vw, 240px); }
.control-banners.banner-master-h-medium .banner { height: clamp(260px, 38vw, 460px); }
.control-banners.banner-master-h-tall   .banner { height: clamp(380px, 55vw, 640px); }
.control-banners.banner-master-h-full   .banner { height: 100vh; }
/* Responsive fixed height: 600px desktop · 400px tablet · 200px mobile. */
.control-banners.banner-master-h-fixed  .banner { height: 600px; }
@media (max-width: 991.98px) { .control-banners.banner-master-h-fixed .banner { height: 400px; } }
@media (max-width: 575.98px) { .control-banners.banner-master-h-fixed .banner { height: 200px; } }
.control-banners.banner-master-corners-square  .banner { border-radius: 0; }
.control-banners.banner-master-corners-rounded .banner { border-radius: 10px; }
/* A precise master height (e.g. 420px) is applied inline as --banner-h on the container. */
.control-banners[style*="--banner-h"] .banner { min-height: 0; height: var(--banner-h); }

/* Caption position: the position class sits on the figcaption; :has() steers the figure's flex. */
.control-banners .banner:has(.banner-pos-top-left)      { align-items: flex-start; justify-content: flex-start; }
.control-banners .banner:has(.banner-pos-top-center)    { align-items: flex-start; justify-content: center; }
.control-banners .banner:has(.banner-pos-top-right)     { align-items: flex-start; justify-content: flex-end; }
.control-banners .banner:has(.banner-pos-center-left)   { align-items: center;     justify-content: flex-start; }
.control-banners .banner:has(.banner-pos-center-right)  { align-items: center;     justify-content: flex-end; }
.control-banners .banner:has(.banner-pos-bottom-left)   { align-items: flex-end;   justify-content: flex-start; }
.control-banners .banner:has(.banner-pos-bottom-center) { align-items: flex-end;   justify-content: center; }
.control-banners .banner:has(.banner-pos-bottom-right)  { align-items: flex-end;   justify-content: flex-end; }
.banner-pos-top-left, .banner-pos-center-left, .banner-pos-bottom-left      { text-align: left; }
.banner-pos-top-right, .banner-pos-center-right, .banner-pos-bottom-right   { text-align: right; }

.control-banners .banner-link.banner-link-outline {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}
.control-banners .banner-link.banner-link-outline:hover { background: #fff; color: #11161f; }

/* ── Banner slider/carousel ────────────────────────────────────────────────
   Banners overlap in one area; one is visible at a time with arrows + dots. */
.control-banners.is-slider { position: relative; }
.control-banners.is-slider .banner { display: none; }
.control-banners.is-slider .banner.is-active { display: flex; }
.control-banners.is-slider .banner + .banner { margin-top: 0; }

.banner-slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 4; width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: rgba(0,0,0,.4); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.banner-slider-arrow:hover { background: rgba(0,0,0,.65); }
.banner-slider-prev { left: 12px; }
.banner-slider-next { right: 12px; }
.banner-slider-dots {
    position: absolute; bottom: 14px; left: 0; right: 0; z-index: 4;
    display: flex; justify-content: center; gap: 8px;
}
.banner-slider-dot {
    width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.5); cursor: pointer;
}
.banner-slider-dot.is-active { background: #fff; }

/* ── Page header / breadcrumb (rendered by {{ breadcrumbs }}; hidden on home) ──
   Porto "page-header-classic" look: light gradient band, page title on the left,
   breadcrumb trail on the right, framed by hairline borders. Theme-independent. */
.cms-page-header {
    /* A dark page-title band, like the template's inner-page heros. It doubles as a readable backdrop for
       themes whose header is a transparent overlay (e.g. Crafto): the usually-white nav sits over this band
       on inner pages. All values are CSS variables so a theme can retune via theme.json/Custom CSS. */
    background: var(--cms-page-header-bg, linear-gradient(135deg, #20262f, #11151c));
    color: var(--cms-page-header-fg, #ffffff);
    padding: var(--cms-page-header-pad, 3rem 0);
    margin-bottom: 0;
    text-align: var(--cms-page-header-align, center);
}
/* Contained (non full-bleed) page content keeps a little space under the header. */
.cms-page-header + .cms-content,
.cms-page-header + .cms-content-wrap { padding-top: 1.5rem; }
.cms-page-header .cms-container {
    max-width: 1140px; margin: 0 auto; padding: 0 1rem;
    display: flex; flex-direction: column; align-items: center; gap: .55rem;
}
.cms-page-header .cms-page-title {
    margin: 0; color: inherit; font-weight: 700;
    font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.15;
}
.cms-breadcrumb ol {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; font-size: .8125rem;
    text-transform: uppercase; letter-spacing: .02em;
}
.cms-breadcrumb li { display: inline-flex; align-items: center; color: rgba(255,255,255,.75); }
/* "›" separator: "/" collided with page titles that contain a slash ("Menu / price list") and read as extra crumbs. */
.cms-breadcrumb li + li::before { content: "\203A"; opacity: .6; margin-right: .4rem; }
.cms-breadcrumb a { color: rgba(255,255,255,.85); text-decoration: none; transition: color .15s; }
.cms-breadcrumb a:hover { color: #fff; }
.cms-breadcrumb [aria-current="page"] { color: #fff; font-weight: 600; }
/* On dark/accent heroes the trail ink is managed here, full stop — theme-skin link colours (and any
   generated override) must not tint the crumbs or they go illegible on the dark band. */
.cms-page-header.cms-ph-dark .cms-breadcrumb a, .cms-page-header.cms-ph-accent .cms-breadcrumb a { color: rgba(255,255,255,.88) !important; }
.cms-page-header.cms-ph-dark .cms-breadcrumb a:hover, .cms-page-header.cms-ph-accent .cms-breadcrumb a:hover { color: #fff !important; }
.cms-page-header.cms-ph-dark .cms-breadcrumb [aria-current="page"], .cms-page-header.cms-ph-accent .cms-breadcrumb [aria-current="page"] { color: #fff !important; }
/* Themes whose header is a transparent overlay: give the band extra top room so the title clears the
   absolute-positioned header (set by the renderer via a <style> when it detects such a header).
   The leading `body` raises specificity above the .cms-ph-sm/md/lg size rules below, whose `padding`
   shorthand would otherwise reset padding-top and let the title collide with the menu. */
body.cms-overlay-header .cms-page-header { padding-top: var(--cms-page-header-pad-top-overlay, 7.5rem); }

/* ── Site-wide page-header appearance (Setup → Website): size · alignment · background. Modifier classes on
   the band so every page renders identically. Defaults (md / center / dark) match the original look. ── */
.cms-page-header.cms-ph-sm { padding: 1.75rem 0; }
.cms-page-header.cms-ph-md { padding: 3rem 0; }
.cms-page-header.cms-ph-lg { padding: 5.5rem 0; }
.cms-page-header.cms-ph-left { text-align: left; }
.cms-page-header.cms-ph-left .cms-container { align-items: flex-start; }
.cms-page-header.cms-ph-left .cms-breadcrumb ol { justify-content: flex-start; }
.cms-page-header.cms-ph-center { text-align: center; }
.cms-page-header.cms-ph-center .cms-container { align-items: center; }
.cms-page-header.cms-ph-center .cms-breadcrumb ol { justify-content: center; }
.cms-page-header.cms-ph-right { text-align: right; }
.cms-page-header.cms-ph-right .cms-container { align-items: flex-end; }
.cms-page-header.cms-ph-right .cms-breadcrumb ol { justify-content: flex-end; }
.cms-page-header.cms-ph-dark  { background: linear-gradient(135deg, #20262f, #11151c); color: #fff; }
.cms-page-header.cms-ph-light { background: #f4f6f9; color: #1f2733; }
.cms-page-header.cms-ph-clean { background: transparent; color: #1f2733; }
/* Accent band — the site's brand colour (--cms-accent, set site-wide from the brand colour; falls back to the
   theme's --primary, then a neutral). White ink reads on a saturated brand colour. */
.cms-page-header.cms-ph-accent { background: var(--cms-accent, var(--primary, #0b6bcb)); color: #fff; }
/* Custom band — a free brand/hex colour (inline --cms-ph-custom). White ink by default; the renderer adds
   .cms-ph-custom-light for pale colours so the title switches to dark ink. */
.cms-page-header.cms-ph-custom { background: var(--cms-ph-custom, #20262f); color: #fff; }
.cms-page-header.cms-ph-custom.cms-ph-custom-light { color: #1f2733; }
/* Image band — a "hero" header: the chosen image cover-fills the band with an adjustable scrim so the title
   stays legible over any photo. Inline style supplies the image + scrim strength (--cms-ph-ov) / colour
   (--cms-ph-ov-color). Effect modifiers choose how the image renders. */
.cms-page-header.cms-ph-image { background-position: center; color: #fff; position: relative; }
.cms-page-header.cms-ph-image.cms-ph-fx-cover    { background-size: cover; background-repeat: no-repeat; }
.cms-page-header.cms-ph-image.cms-ph-fx-parallax { background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }
.cms-page-header.cms-ph-image.cms-ph-fx-pattern  { background-size: auto; background-repeat: repeat; }
.cms-page-header.cms-ph-image::before { content: ""; position: absolute; inset: 0;
    background: var(--cms-ph-ov-color, #0a0e14); opacity: var(--cms-ph-ov, .6); }
.cms-page-header.cms-ph-image .cms-container { position: relative; z-index: 1; }
/* Scroll-to-content arrow — a soft bouncing chevron pinned to the bottom-centre of the band. */
.cms-page-header { position: relative; }
.cms-ph-scroll { position: absolute; left: 50%; bottom: .65rem; transform: translateX(-50%); z-index: 2;
    color: inherit; opacity: .7; line-height: 0; transition: opacity .15s; animation: cms-ph-bob 1.8s ease-in-out infinite; }
.cms-ph-scroll:hover { opacity: 1; }
@keyframes cms-ph-bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } }
/* Style: "modern" — larger, bolder title. Breadcrumb placement follows the Breadcrumb-trail setting
   (below / above / hidden) so the live band matches the editor preview — no style-based side-by-side. */
.cms-page-header.cms-ph-style-modern .cms-page-title { font-size: clamp(2rem, 5.5vw, 3.4rem); font-weight: 800; letter-spacing: -.01em; }
/* Style: "classic" — a short accent underline beneath the title (Porto's title-border touch). */
.cms-page-header.cms-ph-style-classic .cms-page-title { padding-bottom: .55rem; position: relative; }
.cms-page-header.cms-ph-style-classic .cms-page-title::after { content: ""; position: absolute; bottom: 0;
    width: 44px; height: 3px; border-radius: 2px; background: var(--cms-accent, var(--primary, #0b6bcb)); }
.cms-page-header.cms-ph-style-classic.cms-ph-center .cms-page-title::after { left: 50%; transform: translateX(-50%); }
.cms-page-header.cms-ph-style-classic.cms-ph-left .cms-page-title::after  { left: 0; }
.cms-page-header.cms-ph-style-classic.cms-ph-right .cms-page-title::after { right: 0; }
/* ── Imported-site header polish ─────────────────────────────────────────────────────────────────────
   A freshly imported site has no logo yet, so the Porto header shows the theme's DEFAULT *light* logo on a
   white row — an invisible logo = a dead white band above the page-title banner, so the banner doesn't look
   flush with the menu. Collapse that placeholder-logo row (and an empty utility top-bar). Both reappear the
   moment a real logo is uploaded or top-bar content exists — the rule only matches the theme placeholder. */
header .header-container:has(.header-logo img[src*="/HTML/img/logo"]) { display: none !important; }
header .header-top:not(:has(a, button, img, input, select, form, [class*="cart"], [class*="search"], [class*="social"])) { display: none !important; }
/* On light/clean backgrounds the breadcrumb needs dark ink instead of the white-on-dark default. */
.cms-page-header.cms-ph-light .cms-breadcrumb li, .cms-page-header.cms-ph-clean .cms-breadcrumb li { color: rgba(0,0,0,.5); }
.cms-page-header.cms-ph-light .cms-breadcrumb a,  .cms-page-header.cms-ph-clean .cms-breadcrumb a  { color: rgba(0,0,0,.6); }
.cms-page-header.cms-ph-light .cms-breadcrumb a:hover, .cms-page-header.cms-ph-clean .cms-breadcrumb a:hover { color: #000; }
.cms-page-header.cms-ph-light .cms-breadcrumb [aria-current="page"], .cms-page-header.cms-ph-clean .cms-breadcrumb [aria-current="page"] { color: #000; }
.cms-page-header.cms-ph-custom-light .cms-breadcrumb li { color: rgba(0,0,0,.5); }
.cms-page-header.cms-ph-custom-light .cms-breadcrumb a  { color: rgba(0,0,0,.6); }
.cms-page-header.cms-ph-custom-light .cms-breadcrumb [aria-current="page"] { color: #000; }

/* ── CMS menu link contrast ─────────────────────────────────────────────────
   The CMS drives the nav ({{ render_menu }}); some themes leave those links the wrong colour for the
   header background, making them invisible. The renderer tags <body> with the header tone, and these
   rules force a readable colour. Doubled class + !important to win over the theme's own nav rules.
   Override per theme with --cms-menu-link / --cms-menu-link-hover in Custom CSS. */
.cms-header-light .cms-nav-link.cms-nav-link { color: var(--cms-menu-link, #23262d) !important; }
.cms-header-dark  .cms-nav-link.cms-nav-link { color: var(--cms-menu-link, #ffffff) !important; }
/* #header-scoped boosters: theme mobile-nav rules can carry an ID + !important (Porto's
   "#header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a { color: var(--dark)
   !important }" below 992px), which outranks the class-only rules above. (1,4,1) beats Porto's (1,3,1).
   No-ops on themes without id="header". */
.cms-header-light #header a.cms-nav-link.cms-nav-link { color: var(--cms-menu-link, #23262d) !important; }
.cms-header-dark  #header a.cms-nav-link.cms-nav-link { color: var(--cms-menu-link, #ffffff) !important; }
/* Hover AND active both go to the site's PRIMARY/accent colour (Porto's orange) on every header tone, so the
   current page and hovered links stand out instead of fading. Override per theme via --cms-menu-link-hover. */
.cms-header-light .cms-nav-link.cms-nav-link:hover,
.cms-header-light .cms-nav-link.cms-nav-link:focus,
.cms-header-light .cms-nav-link.cms-nav-link.active,
.cms-header-dark  .cms-nav-link.cms-nav-link:hover,
.cms-header-dark  .cms-nav-link.cms-nav-link:focus,
.cms-header-dark  .cms-nav-link.cms-nav-link.active,
.cms-header-light #header a.cms-nav-link.cms-nav-link:hover,
.cms-header-light #header a.cms-nav-link.cms-nav-link:focus,
.cms-header-light #header a.cms-nav-link.cms-nav-link.active,
.cms-header-dark  #header a.cms-nav-link.cms-nav-link:hover,
.cms-header-dark  #header a.cms-nav-link.cms-nav-link:focus,
.cms-header-dark  #header a.cms-nav-link.cms-nav-link.active {
    /* Active/hover = a filled accent "button" with WHITE text. Setting BOTH the background and a white text
       colour guarantees the label stays readable: themes like Porto give the active item a coloured button
       background, and only colouring the TEXT (the previous behaviour) left blue text on a blue button =
       invisible. Accent resolves to the site's brand/menu colour (blue here). */
    background-color: var(--cms-menu-link-hover, var(--cms-accent, var(--primary, var(--base-color, #1c64c4)))) !important;
    color: #ffffff !important;
    border-radius: .25rem;
}

/* Some themes wrap the primary nav in a Bootstrap .collapse (the mobile menu), which is display:none by
   default and only shown on desktop by the theme's own navbar-expand structure. When the CMS menu lives
   inside such a collapse, that structure may not match — so the whole menu vanishes on desktop. Force any
   collapse that contains CMS menu links to show at desktop widths; mobile keeps the collapse behaviour. */
@media (min-width: 992px) {
    .collapse:has(.cms-nav-link),
    nav.collapse:has(.cms-nav-link),
    .navbar-collapse.collapse:has(.cms-nav-link) { display: flex !important; }
}

/* ── Dropdown menus (theme-independent) ─────────────────────────────────────
   The CMS renders nested <ul class="cms-submenu"> under any menu item that has
   child pages. CMS-specific class names avoid collisions with theme menu CSS. */
.cms-has-children { position: relative; }
.cms-submenu {
    position: absolute; top: 100%; left: 0; min-width: 220px;
    margin: 0; padding: .4rem 0; list-style: none;
    background: #fff; border: 1px solid rgba(0,0,0,.08);
    border-radius: 8px; box-shadow: 0 12px 34px rgba(20,30,50,.16);
    z-index: 1050; text-align: left;
    /* hidden by default; revealed on hover/focus with a small fade + rise */
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.cms-has-children:hover > .cms-submenu,
.cms-has-children:focus-within > .cms-submenu {
    display: block;  /* beats a theme's .dropdown-menu{display:none} when both classes share the <ul> */
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity .15s ease, transform .15s ease, visibility 0s;
}
.cms-submenu li { display: block; white-space: nowrap; margin: 0; }
.cms-submenu a {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .5rem 1.1rem; color: #2e353e !important; text-decoration: none;
    font-weight: 400; font-size: .95rem; text-transform: none; line-height: 1.3;
}
.cms-submenu a:hover { background: #eef2f7; color: #11151c !important; }
.cms-submenu a.active, .cms-submenu li.active > a { font-weight: 600; }
/* Grandchild and deeper levels open as a side flyout, aligned to the parent row. */
.cms-submenu .cms-submenu { top: -.4rem; left: 100%; margin-left: 2px; }
.cms-caret { font-size: .7em; margin-left: .35rem; opacity: .8; }
.cms-caret-side { margin-left: auto; }

/* ── Forms (theme-independent) ──────────────────────────────────────────────
   The CMS renders <form class="control control-form ..."> with .field rows. */
.control-form { max-width: 720px; }
/* A multi-column form (side-by-side fields) uses the full container width so its columns spread across the
   whole row instead of squeezing into ~9/12 and leaving the right third empty. Single-column forms stay narrow. */
.control-form.control-form-wide { max-width: none; }
.control-form .field { margin-bottom: .9rem; }
/* The field label (Name / Email / "How did you hear about us?") is bold and sits tight to its input.
   Pin the font-size on BOTH the <label> and the choice-group .field-label so they're identical (the
   field-label isn't a <label>, so without this it inherited a different size). */
.control-form .field > label,
.control-form .field > .field-label { display: block; font-weight: 700; font-size: .95rem; line-height: 1.4; margin-bottom: .15rem; }
.control-form .req { color: #d63939; }
/* Equal box for every field control (the theme's own select rule was making the dropdown shorter than the
   text inputs). Higher specificity (.field …) wins; box-sizing + min-height guarantee matching heights. */
.control-form .field input:not([type=radio]):not([type=checkbox]),
.control-form .field select,
.control-form .field textarea { padding: .6rem .75rem; min-height: 2.7rem; line-height: 1.4; box-sizing: border-box; }
.control-form .field select { height: auto; }
/* Choice groups (radio / checkbox): options are NORMAL weight and clearly belong to the label above them. */
.control-form .cms-choices { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; margin-top: .1rem; }
.control-form .cms-choices .form-check { margin: 0; min-height: auto; display: inline-flex; align-items: center; gap: .4rem; padding-left: 0; }
.control-form .cms-choices .form-check-input { margin: 0; float: none; }
.control-form .form-check-label { font-weight: 400; margin: 0; }
/* Form add-on: half/third-width fields sit side by side (imported builder forms lay several entry fields per
   line — First Name | Last Name | Email). min-width lets narrow screens wrap to fewer per row naturally. */
.control-form .form-step { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.control-form .form-step > .field { flex: 1 1 100%; }
.control-form .form-step > .field-half { flex: 1 1 calc(50% - .5rem); min-width: 220px; }
.control-form .form-step > .field-third { flex: 1 1 calc(33.333% - .67rem); min-width: 200px; }

/* Contact section: Porto-style two-column native form + dark contact-info card. */
.contact-form .field { margin-bottom: 1rem; }
.contact-form .field > label { display: block; font-weight: 600; margin-bottom: .35rem; }
.contact-form input, .contact-form textarea { width: 100%; padding: .6rem .85rem; border: 1px solid #ced4da; border-radius: 8px; font: inherit; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--cms-accent, var(--primary, var(--cms-primary))); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cms-primary) 12%, transparent); }
.contact-info-card { background: #1f2733; color: #e9edf2; border-radius: 14px; padding: 1.75rem; height: 100%; }
.contact-info-card h4 { color: #fff; margin-top: 0; }
.contact-info-list { list-style: none; margin: 0; padding: 0; }
.contact-info-list li { display: flex; align-items: flex-start; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.contact-info-list li:last-child { border-bottom: 0; }
.contact-info-list i { color: var(--cms-accent, var(--primary, #4aa3df)); margin-top: .2rem; width: 1.1rem; text-align: center; flex: 0 0 auto; }
.contact-info-list a { color: #e9edf2; text-decoration: none; }
.contact-info-list a:hover { color: #fff; text-decoration: underline; }

/* Staff / team directory add-on: a responsive card grid (photo, name, title, bio, contact). */
.control-staff { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
.control-staff .staff-card { background: #fff; border: 1px solid #e6e9ee; border-radius: 12px; overflow: hidden; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .15s ease, transform .15s ease; }
.control-staff .staff-card:hover { box-shadow: 0 8px 22px rgba(20,30,50,.12); transform: translateY(-2px); }
.control-staff .staff-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.control-staff .staff-body { padding: 1rem; }
.control-staff .staff-name { font-weight: 700; font-size: 1.1rem; }
.control-staff .staff-title { color: #c8791e; font-weight: 600; font-size: .9rem; margin-bottom: .5rem; }   /* orange role */
.control-staff .staff-bio { color: #5a6472; font-size: .92rem; line-height: 1.55; margin: .25rem 0 .7rem; }
.control-staff .staff-links a { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 50%; background: #f1f3f5; color: #475569; margin: 0 .15rem; text-decoration: none; }
.control-staff .staff-links a:hover { background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; }

/* Imported staff / team BIO page (BuildProfileLayout: headshot + name + role + paragraphs). Give it breathing room
   below the dark page-header band, a softly-rounded headshot, a tighter name/role stack (Robin: "closer together")
   and calmer paragraph rhythm ("too much white space between paragraphs"). Scoped to .cms-profile so only bios change. */
.cms-profile { padding-top: 1.75rem; }
.cms-profile .cms-profile-photo { border-radius: 20px; box-shadow: 0 8px 22px rgba(20,30,50,.12); }
.cms-profile h1, .cms-profile h2, .cms-profile h3 { color: #2b2f36; margin-bottom: .2rem; line-height: 1.2; }
.cms-profile h1 + p, .cms-profile h2 + p, .cms-profile h3 + p,
.cms-profile h1 + strong, .cms-profile h2 + strong, .cms-profile h1 + em { margin-top: 0; }
.cms-profile .row > [class*="col-"] > :first-child { margin-top: 0; }
.cms-profile p { margin-bottom: .8rem; line-height: 1.6; }
.control-form input[type=text],
.control-form input[type=email],
.control-form select,
.control-form textarea {
    width: 100%; padding: .55rem .75rem; font: inherit; color: #2e353e;
    background: #fff; border: 1px solid #ced4da; border-radius: 6px;
}
.control-form textarea { min-height: 8rem; resize: vertical; }
.control-form input:focus, .control-form select:focus, .control-form textarea:focus {
    outline: none; border-color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary))));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cms-primary) 15%, transparent);
}
.control-form .choices { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.control-form .choice { font-weight: 400; display: inline-flex; align-items: center; gap: .35rem; }
.control-form button[type=submit] {
    padding: .6rem 1.5rem; font: inherit; font-weight: 600; color: #fff; cursor: pointer;
    background: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); border: 0; border-radius: 6px;
}
.control-form button[type=submit]:hover { filter: brightness(.94); }
/* Half/third-width fields sit two/three-up on wider screens. */
@media (min-width: 600px) {
    .control-form { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
    .control-form .field { flex: 1 1 100%; }
    .control-form .field-half { flex: 1 1 calc(50% - 1.25rem); }
    .control-form .field-third { flex: 1 1 calc(33.333% - 1.25rem); min-width: 200px; }
    /* Side-by-side layout: label left, input right. */
    .control-form-inline .field { display: grid; grid-template-columns: 180px 1fr; align-items: start; gap: .75rem; }
    .control-form-inline .field > label,
    .control-form-inline .field > .field-label { margin: .55rem 0 0; }
    .control-form-inline .field-submit { grid-template-columns: 180px 1fr; }
    .control-form-inline .field-submit button { grid-column: 2; justify-self: start; }
}

/* ── Lightbox gallery (theme-independent) ───────────────────────────────────*/
.control-lightbox .lightbox-heading { margin: 0 0 1.25rem; text-align: center; font-size: 1.9rem; font-weight: 700; }
.control-lightbox .lightbox-grid { display: grid; gap: .75rem; grid-template-columns: repeat(3, 1fr); }
.control-lightbox.lightbox-cols-1 .lightbox-grid { grid-template-columns: repeat(1, 1fr); }
.control-lightbox.lightbox-cols-2 .lightbox-grid { grid-template-columns: repeat(2, 1fr); }
.control-lightbox.lightbox-cols-3 .lightbox-grid { grid-template-columns: repeat(3, 1fr); }
.control-lightbox.lightbox-cols-4 .lightbox-grid { grid-template-columns: repeat(4, 1fr); }
.control-lightbox.lightbox-cols-5 .lightbox-grid { grid-template-columns: repeat(5, 1fr); }
.control-lightbox.lightbox-cols-6 .lightbox-grid { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 575.98px) { .control-lightbox .lightbox-grid { grid-template-columns: repeat(2, 1fr) !important; } }
.control-lightbox .lb-item { display: block; position: relative; overflow: hidden; border-radius: 8px; text-decoration: none; color: inherit; }
.control-lightbox .lb-item img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .25s; }
/* Thumbnail shape (page_lightboxes.thumb_aspect): uniform Portrait / Landscape crop, or Exact = each image's own
   aspect (no crop). Square is the base rule above. */
.control-lightbox.aspect-portrait  .lb-item img { aspect-ratio: 3 / 4; }
.control-lightbox.aspect-landscape .lb-item img { aspect-ratio: 4 / 3; }
.control-lightbox.aspect-exact     .lb-item img { aspect-ratio: auto; object-fit: contain; }
.control-lightbox .lb-item:hover img { transform: scale(1.05); }
.control-lightbox .lb-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: .4rem .6rem; font-size: .85rem;
    color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.control-lightbox .lb-cap .lb-cap-tag { color: var(--cms-accent, #e0892f); font-weight: 700; text-transform: uppercase; }
/* Filter chips on top of an auto-portfolio gallery (derived from filename prefixes). */
.control-lightbox .lb-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.4rem; margin: 0 0 1.4rem; }
/* Optional sticky filter bar — stays at the top of the viewport while you scroll the gallery. */
.control-lightbox .lb-filters-sticky { position: sticky; top: 0; z-index: 20; background: var(--cms-bg, #fff); padding: .6rem .25rem; margin: 0 0 1.25rem; box-shadow: 0 2px 8px rgba(16,24,40,.06); }
.control-lightbox .lb-filter { background: none; border: 0; padding: .2rem 0; cursor: pointer; transition: color .15s;
    font: 600 .8rem/1 inherit; letter-spacing: .04em; text-transform: uppercase; color: #8a94a6; }
.control-lightbox .lb-filter:hover { color: #1d2630; }
.control-lightbox .lb-filter.active { color: var(--cms-accent, #e0892f); }

.cms-lightbox-overlay { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center;
    background: rgba(15,18,25,.92); }
.cms-lightbox-overlay.is-open { display: flex; }
.cms-lightbox-overlay .lb-stage { margin: 0; max-width: 92vw; max-height: 88vh; text-align: center; }
.cms-lightbox-overlay img { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: 4px; }
.cms-lightbox-overlay figcaption { color: #fff; margin-top: .75rem; font-size: 1rem; }
.cms-lightbox-overlay button { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; opacity: .8; }
.cms-lightbox-overlay button:hover { opacity: 1; }
.cms-lightbox-overlay .lb-close { top: 1rem; right: 1.5rem; font-size: 2.5rem; line-height: 1; }
.cms-lightbox-overlay .lb-prev, .cms-lightbox-overlay .lb-next { top: 50%; transform: translateY(-50%); font-size: 3.5rem; padding: 0 1rem; }
.cms-lightbox-overlay .lb-prev { left: .5rem; } .cms-lightbox-overlay .lb-next { right: .5rem; }
.cms-lightbox-overlay .lb-count { color: rgba(255,255,255,.75); font-size: .85rem; margin-top: .4rem; letter-spacing: .03em; }

/* ── Form extras: rating stars, multi-step nav, file input ──────────────────*/
.control-form .field-nav { display: flex; gap: .5rem; align-items: center; }
.control-form .form-prev, .control-form .form-next, .control-form .form-submit {
    padding: .6rem 1.5rem; font: inherit; font-weight: 600; cursor: pointer; border-radius: 6px; border: 0;
    color: #fff; background: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary))));
}
.control-form .form-prev { background: #6b7280; }
.control-form .form-prev:hover, .control-form .form-next:hover, .control-form .form-submit:hover { filter: brightness(.94); }
.control-form input[type=file] { width: 100%; padding: .5rem; border: 1px dashed #ced4da; border-radius: 6px; background: #fff; }
.control-form input[type=date], .control-form input[type=number], .control-form input[type=tel] {
    width: 100%; padding: .55rem .75rem; font: inherit; border: 1px solid #ced4da; border-radius: 6px;
}
.control-form .rating { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; font-size: 1.8rem; line-height: 1; }
.control-form .rating input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.control-form .rating label { color: #d0d3d8; cursor: pointer; padding: 0 .05em; margin: 0; font-weight: 400; }
.control-form .rating input:checked ~ label,
.control-form .rating label:hover,
.control-form .rating label:hover ~ label { color: #f5b301; }
.control-form .form-step[hidden] { display: none; }

/* ── Calendar (view-only): FullCalendar + Google embed ──────────────────────*/
.control-calendar { margin: 1.5rem 0; }
.control-calendar .cal-heading { font-size: 1.4rem; margin: 0 0 1rem; }

/* FullCalendar accent theming (the library injects its own base CSS on demand). */
.control-calendar { --fc-today-bg-color: #fffaf0; --fc-event-border-color: transparent;
    --fc-button-active-bg-color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); --fc-button-active-border-color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
.control-calendar .fc a { text-decoration: none; }

/* Colour-key legend strip. */
.control-calendar .cal-legend { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; margin-bottom: .9rem; }
.control-calendar .cal-legend-item { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: #4b5563; }
.control-calendar .cal-legend-dot { display: inline-block; width: .85rem; height: .85rem; border-radius: 3px; }

/* Google-calendar embed (responsive iframe). */
.control-calendar-google .cal-embed { width: 100%; }
.control-calendar-google iframe { width: 100%; min-height: 600px; border: 0; }

/* Upcoming-events fallback list (shown when JS is off; hidden once FullCalendar mounts). */
.control-calendar .cal-upcoming { margin-top: 1.25rem; }
.control-calendar .cal-event-list { list-style: none; margin: 0; padding: 0; }
.control-calendar .cal-event { display: flex; gap: .9rem; align-items: flex-start; padding: .7rem 0; border-bottom: 1px solid #edf0f3; }
.control-calendar .cal-event:last-child { border-bottom: 0; }
.control-calendar .cal-event-date { flex: 0 0 3rem; text-align: center; background: #f4f6f8; border-radius: 6px; padding: .35rem 0; }
.control-calendar .cal-event-day { display: block; font-size: 1.25rem; font-weight: 700; line-height: 1; }
.control-calendar .cal-event-mon { display: block; font-size: .72rem; text-transform: uppercase; color: #6b7280; }
.control-calendar .cal-event-title { font-weight: 600; }
.control-calendar .cal-event-title a { color: inherit; text-decoration: none; }
.control-calendar .cal-event-title a:hover { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
.control-calendar .cal-event-meta { font-size: .85rem; color: #6b7280; }
.control-calendar .cal-empty { color: #6b7280; font-style: italic; }

/* ── Business Directory (view-only) ─────────────────────────────────────────*/
.control-directory { margin: 1.5rem 0; }
.control-directory .dir-group { margin-bottom: 1.5rem; }
.control-directory .dir-cat { font-size: 1.2rem; margin: 0 0 .6rem; padding-bottom: .3rem; border-bottom: 2px solid var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
.control-directory .dir-item { display: flex; gap: .9rem; align-items: flex-start; padding: .7rem 0; border-bottom: 1px solid #edf0f3; }
.control-directory .dir-item:last-child { border-bottom: 0; }
.control-directory .dir-logo { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.control-directory .dir-name { font-weight: 600; font-size: 1.05rem; }
.control-directory .dir-name a { color: inherit; text-decoration: none; }
.control-directory .dir-name a:hover { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
.control-directory .dir-desc { margin: .25rem 0; }
.control-directory .dir-meta { font-size: .88rem; color: #6b7280; }
/* Directory toolbar (search + sort) + card grid (overrides the plain list look above). */
.control-directory .dir-toolbar { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
.control-directory .dir-search { flex: 1 1 220px; min-width: 180px; padding: .55rem .85rem; border: 1px solid #ccd2da; border-radius: 8px; font-size: .95rem; }
.control-directory .dir-sort { padding: .55rem .85rem; border: 1px solid #ccd2da; border-radius: 8px; background: #fff; font-size: .95rem; }
.control-directory .dir-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.control-directory .dir-cat { grid-column: 1 / -1; }
.control-directory .dir-item { background: #fff; border: 1px solid #e6e9ee; border-radius: 10px; padding: .9rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .15s ease, transform .15s ease; }
.control-directory .dir-item:last-child { border: 1px solid #e6e9ee; }
.control-directory .dir-item:hover { box-shadow: 0 8px 22px rgba(20,30,50,.12); transform: translateY(-2px); }
.control-directory .dir-empty { text-align: center; color: #6b7280; padding: 1.5rem; }

/* ── Search box (view-only) ─────────────────────────────────────────────────*/
/* One unified search bar (input | filter | button) in a single bordered pill — cleaner/more professional. */
.control-search { display: flex; gap: 0; max-width: 34rem; margin: 1.25rem 0; border: 1px solid #d4dae1; border-radius: 10px;
    overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.control-search:focus-within { border-color: var(--cms-accent, var(--primary, var(--cms-primary))); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cms-primary) 14%, transparent); }
.control-search input[type=search] { flex: 1; min-width: 0; padding: .7rem .95rem; font: inherit; border: 0; background: transparent; outline: 0; }
.control-search button { padding: .7rem 1.4rem; font: inherit; font-weight: 600; cursor: pointer; border: 0; border-radius: 0; color: #fff; background: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
.control-search button:hover { filter: brightness(.94); }
/* Richer search add-on: a centred hero with heading, sub-text and popular-search chips. */
.control-search-hero { text-align: center; max-width: 640px; margin: 1.5rem auto; padding: 1.75rem 1.5rem; background: #fff; border: 1px solid #e6e9ee; border-radius: 12px; box-shadow: 0 1px 3px rgba(16,24,40,.04); }
.control-search-hero .search-hero-title { margin: 0 0 .25rem; font-size: 1.35rem; font-weight: 700; }
.control-search-hero .search-hero-sub { margin: 0 0 1.1rem; color: #6a7280; font-size: .95rem; }
.control-search-hero .control-search { margin: 0 auto; max-width: 30rem; }
.control-search-hero .search-suggest { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: center; }
.control-search-hero .search-suggest-label { color: #6a7280; font-size: .9rem; }
.control-search-hero .search-chip { padding: .3rem .8rem; background: #fff; border: 1px solid #d8dee6; border-radius: 999px; color: inherit; text-decoration: none; font-size: .9rem; transition: background .15s ease, color .15s ease; }
.control-search-hero .search-chip:hover { background: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); color: #fff; border-color: transparent; }

/* ── Location directory (the {{ locationdirectory }} add-on): map + a tidy city index ───────────── */
.cms-locdir-index { margin-top: 1.75rem; }
.cms-locdir-prov { font-size: 1.15rem; font-weight: 600; margin: 1.25rem 0 .6rem; padding-bottom: .35rem; border-bottom: 2px solid var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
.cms-locdir-cities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.cms-locdir-cities li { margin: 0; }
.cms-locdir-cities a { display: block; padding: .55rem .85rem; background: #f6f8fa; border: 1px solid #e6e9ee; border-radius: 8px; color: inherit; text-decoration: none; font-weight: 500; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.cms-locdir-cities a:hover, .cms-locdir-cities a:focus-visible {
    /* Darken the accent ~22% on hover so white text keeps AA contrast even on light/tan theme accents. */
    background: color-mix(in srgb, var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))) 78%, #000);
    color: #fff; font-weight: 600; border-color: transparent; transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* ── Storefront (shop catalog, product grid) ────────────────────────────────
   Theme-agnostic store markup built by StorefrontHtml. Neutral cms-* classes so
   the shop looks native under any installed theme; a theme may override.        */

/* Reusable button (shared by storefront CTAs and future store pages). */
.cms-btn {
    display: inline-block; padding: .6rem 1.4rem; font: inherit; font-weight: 600;
    line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
    border: 1px solid transparent; border-radius: 6px; transition: filter .12s ease;
}
/* The accent (skin) colour often isn't dark enough for white text to clear WCAG AA (4.5:1) — e.g. the Porto
   demo's #da7940. Lay a translucent dark wash OVER the accent (background-image, not a filter) so the bar
   darkens to a readable shade while the white label is left untouched. Hue is preserved. */
.cms-btn-primary { color: #fff; background-color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); background-image: linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.30)); }
.cms-btn-primary:hover { background-image: linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18)); color: #fff; }   /* lighten the wash on hover */
.cms-btn-outline { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); border-color: currentColor; background: transparent; }
.cms-btn-outline:hover { color: #fff; background: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }

/* ── Sticky footer ──────────────────────────────────────────────────────────
   Short pages (an empty cart, a thin contact page) left the footer floating mid-screen with white space
   below it. Make the body a flex column at least one viewport tall and push the footer to the bottom, so the
   footer is always flush to the bottom of the window. Absolutely-positioned theme elements are unaffected. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > footer, body > #footer, body > .footer { margin-top: auto; }

/* Storefront pages bring the theme container themselves (raw-HTML bodies); give them breathing room. */
.cms-storefront { padding-top: 2rem; padding-bottom: 3rem; }

.cms-shop { margin: 0 0 2rem; }

/* Category filter bar */
.cms-shop-filter { margin: 0 0 1.5rem; }
.cms-shop-filter ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.cms-shop-filter a {
    display: inline-block; padding: .35rem .9rem; font-size: .9rem; text-decoration: none;
    color: #374151; background: #f3f4f6; border-radius: 999px; transition: background .12s, color .12s;
}
.cms-shop-filter a:hover { background: #e5e7eb; }
.cms-shop-filter a.active { color: #fff; background: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }

.cms-shop-empty { color: #6b7280; font-style: italic; padding: 2rem 0; }

/* Shop toolbar (count + sort) */
.cms-shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: nowrap; margin: 0 0 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid #eef0f2; }
.cms-shop-count { font-size: .85rem; color: #6b7280; }
.cms-shop-sort { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: #374151; }
.cms-shop-sort select { padding: .4rem .6rem; font: inherit; border: 1px solid #ced4da; border-radius: 6px; background: #fff; }
.cms-shop-controls { display: inline-flex; align-items: center; gap: .75rem; flex-wrap: nowrap; flex: 0 0 auto; }
.cms-shop-dir { padding: .4rem .6rem; font: inherit; border: 1px solid #ced4da; border-radius: 6px; background: #fff; }
.cms-shop-show { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: #374151; }
.cms-shop-show select { padding: .4rem .6rem; font: inherit; border: 1px solid #ced4da; border-radius: 6px; background: #fff; }
/* search moved into the toolbar (left), where the product count used to sit */
.cms-shop-search { display: flex; align-items: stretch; flex: 1 1 12rem; max-width: 26rem; min-width: 8rem; }
/* Toolbar stays on ONE row on desktop (search flexes/shrinks); only stack on small screens. */
@media (max-width: 720px) {
    .cms-shop-toolbar { flex-wrap: wrap; }
    .cms-shop-search { flex-basis: 100%; max-width: none; }
    .cms-shop-controls { flex-wrap: wrap; flex: 1 1 100%; min-width: 0; }
}
.cms-shop-search input[type=search] { flex: 1; min-width: 0; padding: .45rem .7rem; font: inherit; border: 1px solid #ced4da; border-right: 0; border-radius: 6px 0 0 6px; }
.cms-shop-search button { flex: 0 0 auto; padding: 0 .85rem; font-size: .95rem; border: 1px solid #ced4da; border-radius: 0 6px 6px 0; background: #f4f5f7; cursor: pointer; }
.cms-shop-search button:hover { background: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); color: #fff; border-color: transparent; }
.cms-view-toggle { display: inline-flex; border: 1px solid #ced4da; border-radius: 6px; overflow: hidden; }
.cms-view-btn { width: 2.2rem; padding: .35rem 0; font-size: 1rem; line-height: 1; cursor: pointer; color: #6b7280; background: #fff; border: 0; }
.cms-view-btn + .cms-view-btn { border-left: 1px solid #e5e7eb; }
.cms-view-btn.active { color: #fff; background: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }

/* Uniform control height across the shop toolbar — search box, Sort/Show selects
   and the grid/list toggle previously had different vertical paddings, so they
   rendered at different heights and looked mismatched. Pin them all to one height
   (border-box) and vertically center their contents so they line up on one row. */
.cms-shop-search input[type=search], .cms-shop-search button,
.cms-shop-sort select, .cms-shop-show select,
.cms-shop-sort, .cms-shop-show,
.cms-view-toggle { height: 2.375rem; box-sizing: border-box; }
/* These two are <label>s — kill Bootstrap's inherited .5rem bottom margin that
   otherwise made them sit ~4px above the search box / view toggle. */
.cms-shop-sort, .cms-shop-show { margin-bottom: 0; }
.cms-shop-search input[type=search], .cms-shop-sort select, .cms-shop-show select {
    padding-top: 0; padding-bottom: 0; line-height: normal;
}
.cms-view-btn { height: 100%; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
/* Center every toolbar item on the row's mid-line (the Sort/Show labels otherwise
   top-aligned while the toggle centered, leaving a ~4px stagger). */
.cms-shop-controls > * { align-self: center; }

/* Product specs (dimensions) */
.cms-product-specs { list-style: none; margin: .25rem 0 .55rem; padding: 0; font-size: .82rem; color: #4b5563; line-height: 1.5; }
.cms-product-specs strong { color: #374151; }
.cms-pd-summary .cms-product-specs { margin: 0 0 1.1rem; font-size: .9rem; }

/* List view */
.cms-product-grid.as-list { grid-template-columns: 1fr; gap: 1rem; }
.cms-product-grid.as-list .cms-product-card { flex-direction: row; align-items: stretch; }
.cms-product-grid.as-list .cms-product-media { flex: 0 0 220px; width: 220px; aspect-ratio: auto; }
.cms-product-grid.as-list .cms-product-body { flex: 1; }
@media (max-width: 560px) { .cms-product-grid.as-list .cms-product-card { flex-direction: column; } .cms-product-grid.as-list .cms-product-media { flex-basis: auto; width: 100%; aspect-ratio: 1; } }

/* Language switcher (theme-independent dropdown; rendered only when the site has 2+ languages).
   Markup: .language-switcher > .lang-current (toggle) + ul.lang-menu. Opens on hover or keyboard focus. */
.language-switcher { position: relative; display: inline-block; font-size: .85rem; }
.language-switcher .lang-current {
    cursor: pointer; display: inline-flex; align-items: center; gap: .25rem;
    padding: .15rem .4rem; border-radius: .25rem; color: inherit; white-space: nowrap; opacity: .85;
}
.language-switcher .lang-current::before { content: "\1F310"; font-size: .95em; opacity: .8; }   /* 🌐 neutral globe (not a country flag) */
.language-switcher .lang-current::after  { content: "\25BE"; font-size: .7em; opacity: .7; }       /* ▾ */
.language-switcher .lang-current:hover { opacity: 1; }
/* The in-menu language picker is now a STANDARD menu dropdown item (see ThemeRenderer.BuildLanguageMenuItem):
   a normal parent <a class="cms-nav-link"> + a themed submenu, so it inherits the theme's dropdown markup and
   the nav's own link styling automatically — no bespoke per-item rules needed. Just give the globe glyph a
   little spacing before the language name. (The .language-switcher rules above still style the standalone
   {{ language_switcher }} / {language-picker} token used by layouts that place it OUTSIDE the menu.) */
.cms-lang-item > a .cms-lang-globe { margin-right: .35rem; }
/* Invisible hover "bridge" filling the gap between the toggle and the menu, so moving the mouse down to
   pick a language doesn't drop the :hover and close the menu. */
.language-switcher::after {
    content: ""; position: absolute; top: 100%; left: 0; right: 0; height: .55rem;
    display: none;
}
.language-switcher:hover::after, .language-switcher:focus-within::after { display: block; }
.language-switcher .lang-menu {
    position: absolute; top: calc(100% + .45rem); left: 0; z-index: 1050; min-width: 9rem;
    list-style: none; margin: 0; padding: .25rem 0; display: none;
    background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.language-switcher:hover .lang-menu,
.language-switcher:focus-within .lang-menu { display: block; }
.language-switcher .lang-menu a {
    display: block; padding: .4rem .85rem; color: #2e353e; text-decoration: none; white-space: nowrap; line-height: 1.3;
}
.language-switcher .lang-menu a:hover { background: #f3f5f7; }
.language-switcher .lang-menu li.active a { font-weight: 700; color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
/* Spacing in a header wrapper only when the switcher is actually present (2+ languages). */
.header-language-switcher:has(.language-switcher) { margin-right: .85rem; }

/* FAQ accordion (native details/summary — no JS, accessible, framework-free) */
.cms-faq { max-width: 760px; margin: 1.5rem auto; }
.cms-faq-search { position: relative; margin-bottom: 1rem; }
.cms-faq-search i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: #9aa3af; }
.cms-faq-search-input { width: 100%; padding: .6rem .9rem .6rem 2.3rem; border: 1px solid #d7dde5; border-radius: 8px; font-size: 1rem; }
.cms-faq-search-input:focus { outline: 2px solid var(--cms-primary); outline-offset: 1px; border-color: var(--cms-primary); }
.cms-faq-none { text-align: center; color: #6b7280; padding: .5rem 0; }
.cms-faq h2 { text-align: center; margin: 0 0 1.2rem; }
.cms-faq details { border: 1px solid #e3e6ea; border-radius: 10px; margin-bottom: .6rem; background: #fff; overflow: hidden; }
.cms-faq summary { cursor: pointer; list-style: none; padding: .9rem 1.1rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cms-faq summary::-webkit-details-marker { display: none; }
.cms-faq summary::after { content: '+'; font-size: 1.3rem; line-height: 1; color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); font-weight: 400; }
.cms-faq details[open] summary::after { content: '\2212'; }
.cms-faq details[open] summary { border-bottom: 1px solid #eef0f3; }
.cms-faq details > *:not(summary) { padding: .9rem 1.1rem; margin: 0; color: #475569; }

/* ── FAQ / accordion skins (Porto layout-mode upgrade). Base above = "modern". ── */
.cms-faq-modern details[open] { box-shadow: 0 4px 14px rgba(16,24,40,.07); }
/* Bordered: sharper, heavier outline, no rounding. */
.cms-faq-bordered details { border-radius: 0; border-color: #d2d8e0; }
.cms-faq-bordered details + details { margin-top: -1px; }   /* collapse double borders into one */
/* Flush: no cards — just a divider between rows. */
.cms-faq-flush details { border: 0; border-bottom: 1px solid #e3e6ea; border-radius: 0; margin: 0; background: transparent; }
.cms-faq-flush details:last-child { border-bottom: 0; }
.cms-faq-flush summary, .cms-faq-flush details > *:not(summary) { padding-left: 0; padding-right: 0; }
.cms-faq-flush details[open] summary { border-bottom: 0; }
/* Separated: spaced cards with a coloured accent edge. */
.cms-faq-separated details { margin-bottom: 1rem; border-left: 3px solid var(--cms-accent, var(--primary, var(--cms-primary))); }
/* Arrow: a rotating chevron instead of the +/- glyph. */
.cms-faq-arrow summary::after { content: '\276F'; font-size: .85rem; font-weight: 600; transition: transform .2s ease; }
.cms-faq-arrow details[open] summary::after { content: '\276F'; transform: rotate(90deg); }
/* Compact: tighter padding + smaller text. */
.cms-faq-compact summary { padding: .6rem .85rem; font-size: .95rem; }
.cms-faq-compact details > *:not(summary) { padding: .6rem .85rem; font-size: .94rem; }

/* Collapsible sidebar widgets (native details/summary) */
.cms-side-widget summary.cms-side-title { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.cms-side-widget summary.cms-side-title::-webkit-details-marker { display: none; }
.cms-side-widget summary.cms-side-title::after { content: '\2212'; font-weight: 400; color: #6b7280; }
.cms-side-widget details:not([open]) summary.cms-side-title::after { content: '+'; }
.cms-side-widget details > summary.cms-side-title { margin-bottom: .6rem; }

/* Sale badge + struck price + rating */
.cms-product-sale { position: absolute; top: .6rem; right: .6rem; z-index: 2; padding: .2rem .6rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #fff; background: #15803d; border-radius: 4px; }
.cms-price-was { margin-left: .4rem; color: #6b7280; text-decoration: line-through; font-weight: 400; font-size: .9em; }
.cms-pd-save { margin-left: .5rem; font-size: .85rem; font-weight: 600; color: #15803d; }
.cms-rating { display: flex; align-items: center; gap: .35rem; margin: 0 0 .35rem; font-size: .82rem; }
.cms-rating .cms-stars { font-size: .9rem; }
.cms-rating-count { color: #6b7280; }
.cms-shop-intro { max-width: 52rem; margin: 0 0 .75rem; color: #4b5563; line-height: 1.6; }
.cms-shop-count { margin: 0 0 1.25rem; font-size: .85rem; color: #6b7280; }

/* Product grid */
.cms-product-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.cms-product-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    transition: box-shadow .15s ease, transform .15s ease;
}
.cms-product-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,.12); transform: translateY(-3px); border-color: #dbe1e7; }
.cms-product-media { position: relative; aspect-ratio: 1; overflow: hidden; background: #f4f5f7; }
.cms-product-thumb { position: absolute; inset: 0; display: block; }
.cms-product-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: opacity .4s ease, transform .5s ease; backface-visibility: hidden;
}
.cms-product-img.secondary { opacity: 0; }
/* hover: products with a 2nd image cross-fade to it; otherwise gently zoom the primary */
.cms-product-card.has-hover:hover .cms-product-img.secondary { opacity: 1; }
.cms-product-card:not(.has-hover):hover .cms-product-img.primary { transform: scale(1.06); }
.cms-product-oos {
    position: absolute; top: .6rem; left: .6rem; z-index: 2; padding: .2rem .6rem;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: #fff; background: rgba(180, 35, 24, .92); border-radius: 4px;
}
.cms-product-card.is-oos .cms-product-img { opacity: .55; filter: grayscale(.4); }
.cms-product-body { display: flex; flex-direction: column; flex: 1; padding: .65rem .8rem .8rem; }
.cms-product-name { margin: 0 0 .25rem; font-size: .92rem; line-height: 1.25; font-weight: 600; }
.cms-product-name a { color: inherit; text-decoration: none; }
.cms-product-name a:hover { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
.cms-product-price { margin: 0 0 .6rem; font-weight: 700; font-size: 1.02rem; color: #111827; }
.cms-product-actions { display: flex; gap: .4rem; margin-top: auto; align-items: stretch; }
.cms-product-actions .cms-product-add { flex: 1; min-width: 0; display: flex; }
.cms-product-actions .cms-product-add .cms-btn { width: 100%; }
.cms-product-actions a.cms-product-add { align-items: center; justify-content: center; }
.cms-product-actions .cms-btn-outline { flex: 0 0 auto; }
/* Porto-style square icon buttons flanking the main action (wishlist heart + quick view). */
.cms-product-actions .cms-pa-wish { margin: 0; display: flex; }
.cms-product-actions .cms-pa-icon {
    display: flex; align-items: center; justify-content: center; width: 2.4rem; flex: 0 0 auto; padding: 0;
    font-size: 1rem; line-height: 1; color: #6b7280; cursor: pointer;
    background: #f4f5f7; border: 1px solid #e5e7eb; border-radius: 6px; transition: color .12s, background .12s, border-color .12s;
}
.cms-product-actions .cms-pa-icon:hover { color: #fff; background: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); border-color: transparent; }

/* Porto-style card extras: stacked badges, wishlist heart, hover Quick View, category eyebrow */
.cms-product-badges { position: absolute; top: .6rem; left: .6rem; z-index: 3; display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.cms-badge { padding: .2rem .55rem; font-size: .72rem; font-weight: 700; line-height: 1.2; letter-spacing: .02em; color: #fff; border-radius: 4px; }
.cms-badge-new  { background: #15803d; }
.cms-badge-sale { background: #e02b2b; }
.cms-product-wish { position: absolute; top: .5rem; right: .5rem; z-index: 3; margin: 0; }
.cms-wish-heart {
    display: flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem;
    font-size: 1.1rem; line-height: 1; color: #6b7280; cursor: pointer;
    background: rgba(255,255,255,.9); border: 1px solid #e5e7eb; border-radius: 999px; transition: color .12s ease, background .12s ease;
}
.cms-wish-heart:hover { color: #e02b2b; background: #fff; }
.cms-product-quick {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: .6rem; text-align: center;
    font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
    color: #fff; background: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); transform: translateY(100%); transition: transform .2s ease;
}
.cms-product-card:hover .cms-product-quick { transform: translateY(0); }
.cms-product-cat { display: block; margin: 0 0 .25rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; text-decoration: none; }
.cms-product-cat:hover { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
.cms-shop-show select { cursor: pointer; }

/* Quick View modal */
.cms-qv { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 4vmin; background: rgba(17,24,39,.72); }
.cms-qv.open { display: flex; }
.cms-qv-dialog { position: relative; width: 100%; max-width: 760px; max-height: 90vh; overflow: auto; background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.cms-qv-close { position: absolute; top: .5rem; right: .75rem; z-index: 2; font-size: 1.8rem; line-height: 1; color: #6b7280; background: none; border: 0; cursor: pointer; }
.cms-qv-close:hover { color: #111827; }
.cms-qv-loading { padding: 3rem; text-align: center; color: #6b7280; }
.cms-qv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 1.5rem; }
.cms-qv-media { position: relative; background: #f4f5f7; border-radius: 8px; overflow: hidden; display: flex; align-items: center; }
.cms-qv-media img { width: 100%; height: auto; display: block; object-fit: contain; }
.cms-qv-media .cms-badge { position: absolute; top: .6rem; left: .6rem; }
.cms-qv-info { display: flex; flex-direction: column; min-width: 0; }
.cms-qv-name { margin: .25rem 0 .5rem; font-size: 1.4rem; line-height: 1.2; }
.cms-qv-price { margin: .25rem 0 .75rem; font-size: 1.4rem; font-weight: 700; color: #111827; }
.cms-qv-blurb { margin: 0 0 1.1rem; color: #374151; }
.cms-qv-buy { margin: 0 0 1rem; }
.cms-qv-full { margin-top: auto; font-weight: 600; color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); text-decoration: none; }
.cms-qv-full:hover { text-decoration: underline; }
@media (max-width: 640px) { .cms-qv-grid { grid-template-columns: 1fr; } }

/* Pager */
.cms-pager { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin: 2rem 0 0; }
.cms-pager-link {
    display: inline-block; min-width: 2.4rem; padding: .45rem .7rem; text-align: center;
    text-decoration: none; color: #374151; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px;
}
.cms-pager-link:hover { background: #f3f4f6; }
.cms-pager-link.current { color: #fff; background: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); border-color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
.cms-pager-link.disabled { color: #b6bcc4; pointer-events: none; }

/* Product detail — Porto-style sidebar layout */
.cms-shop-detail { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (max-width: 992px) { .cms-shop-detail { grid-template-columns: 1fr; gap: 1.75rem; } }
.cms-pd-page { display: block; }   /* full-width product detail (no category sidebar) */
.cms-shop-side .cms-side-widget { border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem 1.1rem; }
.cms-side-title { margin: 0 0 .6rem; font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; color: #111827; padding-bottom: .5rem; border-bottom: 2px solid var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
.cms-side-cats { list-style: none; margin: 0; padding: 0; }
.cms-side-cats > li { border-bottom: 1px solid #f0f2f4; }          /* divider only between TOP-level categories */
.cms-side-cats > li:last-child { border-bottom: 0; }
.cms-side-cats a { display: flex; align-items: center; justify-content: space-between; padding: .38rem .1rem; color: #374151; text-decoration: none; font-size: .9rem; line-height: 1.3; }
.cms-side-cats a:hover { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); padding-left: .3rem; transition: padding .15s; }
.cms-side-cats a.active { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); font-weight: 700; }
.cms-cat-count { color: #6b7280; font-size: .8rem; font-weight: 400; margin-left: .4rem; }
/* Subcategories: indented, compact, borderless, slightly muted. */
.cms-side-subcats { list-style: none; margin: 0 0 .2rem; padding: 0 0 0 .85rem; }
.cms-side-subcats li { border: 0; }
.cms-side-subcats a { padding: .2rem .1rem; font-size: .84rem; color: #6b7280; }
.cms-side-subcats { list-style: none; margin: 0; padding: 0 0 .35rem 0; }
.cms-side-subcats li { border-bottom: 0; }
.cms-side-subcats a { padding: .35rem .1rem .35rem 1rem; font-size: .88rem; color: #6b7280; }
.cms-price-caption { font-size: .85rem; color: #6b7280; margin: 0 0 .65rem; }

/* Category filter: instant search + collapsible dropdowns + compact spacing */
.cms-cat-search { width: 100%; margin: 0 0 .5rem; padding: .4rem .6rem; border: 1px solid #e2e5e9; border-radius: 6px; font-size: .85rem; }
.cms-cat-search:focus { outline: none; border-color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
.cms-cat-widget .cms-side-cats > li { border-bottom: 0; }                 /* drop the per-row dividers → more compact */
.cms-cat-widget .cms-side-cats a { padding: .26rem .1rem; font-size: .88rem; }
.cms-cat-row { display: flex; align-items: center; }
.cms-cat-row > a { flex: 1 1 auto; }
.cms-cat-toggle { flex: 0 0 auto; background: none; border: 0; cursor: pointer; color: #9aa3ad; padding: .1rem .25rem; line-height: 1; display: inline-flex; }
.cms-cat-toggle:hover { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
.cms-cat-toggle i { transition: transform .15s; }
.cms-cat.open > .cms-cat-row .cms-cat-toggle i { transform: rotate(180deg); }
.cms-cat.has-kids > .cms-side-subcats { display: none; }                  /* collapsed by default */
.cms-cat.has-kids.open > .cms-side-subcats { display: block; }
.cms-cat-widget .cms-side-subcats a { padding: .22rem .1rem .22rem .9rem; }

/* sidebar widgets spacing + filter forms */
.cms-shop-side .cms-side-widget { margin-bottom: 1.25rem; }
.cms-side-search { display: flex; gap: .4rem; align-items: stretch; }
.cms-side-search input[type=search] { flex: 1; min-width: 0; padding: .5rem .7rem; font: inherit; border: 1px solid #ced4da; border-radius: 6px; }
.cms-side-price .cms-price-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .65rem; }
.cms-side-price .cms-price-row label { width: 3rem; font-size: .85rem; font-weight: 600; color: #374151; }
.cms-side-price .cms-price-row input { flex: 1; min-width: 0; padding: .5rem .6rem; font: inherit; border: 1px solid #ced4da; border-radius: 6px; }
.cms-side-price .cms-btn { margin-top: .25rem; }
.cms-side-clear { display: inline-block; margin-left: .75rem; font-size: .82rem; color: #6b7280; }
.cms-side-clear:hover { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
.cms-shop-main { min-width: 0; }
.cms-pd-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (max-width: 768px) { .cms-pd-top { grid-template-columns: 1fr; gap: 1.5rem; } }
.cms-pd-summary { min-width: 0; }
.cms-pd-cat { margin: .4rem 0 0; font-size: .85rem; color: #6b7280; }
.cms-pd-cat a { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); text-decoration: none; }
.cms-pd-main { position: relative; display: block; width: 100%; padding: 0; cursor: zoom-in; overflow: hidden; background: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 10px; }
.cms-pd-main img { width: 100%; height: auto; display: block; object-fit: contain; }
.cms-pd-zoom { position: absolute; right: .6rem; bottom: .6rem; width: 2.1rem; height: 2.1rem; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #374151; background: rgba(255,255,255,.9); border: 1px solid #e5e7eb; border-radius: 999px; }
/* Vertical thumbnail strip to the left of the main image (Porto-style). */
.cms-pd-gallery { display: grid; grid-template-columns: 80px minmax(0,1fr); grid-template-areas: "thumbs main"; gap: .75rem; align-items: start; }
.cms-pd-gallery .cms-pd-main { grid-area: main; }
.cms-pd-thumbs { grid-area: thumbs; display: flex; flex-direction: column; gap: .5rem; margin-top: 0; max-height: 520px; overflow: auto; }
@media (max-width: 768px) { .cms-pd-gallery { grid-template-columns: 1fr; grid-template-areas: "main" "thumbs"; } .cms-pd-thumbs { flex-direction: row; flex-wrap: wrap; } }
.cms-pd-thumb { padding: 0; width: 68px; height: 68px; overflow: hidden; cursor: pointer; background: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 6px; }
.cms-pd-thumb.is-active, .cms-pd-thumb:hover { border-color: var(--cms-accent, var(--primary, var(--cms-primary))); }
/* Wishlist + Compare row */
.cms-pd-actions2 { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin: 1rem 0 .25rem; }
.cms-pd-actions2 form { margin: 0; }
.cms-pd-compare { display: inline-flex; align-items: center; gap: .4rem; border: 0; background: transparent; color: #6b7280; cursor: pointer; font: inherit; padding: 0; }
.cms-pd-compare:hover, .cms-pd-compare.is-on { color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-wish-btn { border: 0 !important; background: transparent !important; color: #6b7280 !important; padding: 0 !important; font: inherit; }
.cms-wish-btn:hover { color: var(--cms-accent, var(--primary, var(--cms-primary))) !important; }
/* Safe-checkout trust badges */
.cms-pd-trust { margin: 1rem 0 1.25rem; padding: .9rem 1rem; border: 1px dashed #d7dde5; border-radius: 10px; text-align: center; }
.cms-pd-trust-title { font-size: .85rem; font-weight: 600; color: #374151; margin-bottom: .5rem; }
.cms-pd-trust-icons { display: flex; justify-content: center; gap: .9rem; font-size: 1.7rem; color: #8a94a6; }
.cms-pd-thumb:hover { border-color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
.cms-pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cms-pd-price { margin: 0 0 .5rem; font-size: 1.6rem; font-weight: 700; color: #111827; }
.cms-pd-sku { margin: 0 0 .5rem; font-size: .85rem; color: #6b7280; }
.cms-pd-stock { display: inline-block; margin: 0 0 1rem; padding: .2rem .7rem; font-size: .8rem; font-weight: 600; border-radius: 999px; }
.cms-pd-stock.in { color: #0f7b3f; background: #e7f6ec; }
.cms-pd-stock.out { color: #b42318; background: #fdeceb; }
.cms-pd-blurb { margin: 0 0 1.25rem; padding: 0 0 1.1rem; border-bottom: 1px solid #eef0f2; color: #374151; font-size: 1.08rem; line-height: 1.7; }
.cms-pd-options { display: flex; flex-direction: column; gap: .85rem; margin: 0 0 1.5rem; }
.cms-pd-option { display: flex; flex-direction: column; gap: .35rem; max-width: 22rem; }
.cms-pd-option-label { font-size: .85rem; font-weight: 600; color: #374151; }
.cms-pd-option-select, .cms-pd-option-text { padding: .55rem .7rem; font: inherit; border: 1px solid #ced4da; border-radius: 6px; background: #fff; }
.cms-pd-option-radios { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.cms-pd-radio { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; }
.cms-pd-buy { display: flex; align-items: stretch; gap: .75rem; margin: 0 0 1.25rem; flex-wrap: wrap; }
.cms-qty { display: inline-flex; align-items: stretch; border: 1px solid #ced4da; border-radius: 6px; overflow: hidden; }
.cms-qty-btn { width: 2.4rem; font-size: 1.1rem; line-height: 1; cursor: pointer; color: #374151; background: #f3f4f6; border: 0; }
.cms-qty-btn:hover { background: #e5e7eb; }
.cms-qty-input { width: 3.2rem; text-align: center; font: inherit; border: 0; border-left: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb; -moz-appearance: textfield; }
.cms-qty-input::-webkit-outer-spin-button, .cms-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cms-pd-addcart { padding-left: 1.5rem; padding-right: 1.5rem; }
.cms-pd-viewcart { display: inline-flex; align-items: center; padding: .55rem 1.3rem; border-radius: 8px; font-weight: 600;
    border: 1px solid var(--cms-accent, var(--primary, var(--cms-primary))); color: var(--cms-accent, var(--primary, var(--cms-primary))) !important;
    background: #fff; text-decoration: none; }
.cms-pd-viewcart:hover { background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff !important; }
/* Dark slate Add-to-Cart (Porto style) — higher specificity beats the blue .cms-btn-primary */
.cms-pd-buy .cms-pd-addcart { color: #fff; background: #3b4452; border-color: #3b4452; }
.cms-pd-buy .cms-pd-addcart:hover { background: #2c333e; filter: none; }

/* Prev/next product nav */
.cms-pd-nav { display: flex; justify-content: flex-end; gap: .4rem; margin: 0 0 1rem; }
.cms-pd-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; font-size: 1.2rem; color: #374151; text-decoration: none; background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; }
.cms-pd-nav-btn:hover { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); border-color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
.cms-pd-nav-btn.disabled { color: #cbd1d8; cursor: default; }

/* Tags + social share */
.cms-pd-tags { margin: .4rem 0 0; font-size: .85rem; color: #6b7280; }
.cms-pd-tag { display: inline-block; margin: 0 .15rem; color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); text-decoration: none; }
.cms-pd-tag:hover { text-decoration: underline; }
.cms-pd-share { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 0; }
.cms-pd-share-label { font-size: .85rem; font-weight: 600; color: #374151; }
.cms-pd-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; font-size: .85rem; font-weight: 700; color: #4b5563; text-decoration: none; background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; transition: color .12s ease, border-color .12s ease; }
.cms-pd-share-btn:hover { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); border-color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }

/* Image lightbox */
.cms-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 3vmin; background: rgba(17,24,39,.9); cursor: zoom-out; }
.cms-lightbox.open { display: flex; }
.cms-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.cms-lightbox-close { position: absolute; top: 1rem; right: 1.25rem; font-size: 2.2rem; line-height: 1; color: #fff; background: none; border: 0; cursor: pointer; }
.cms-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; font-size: 2.4rem; line-height: 1; color: #fff; background: rgba(0,0,0,.35); border: 0; border-radius: 50%; cursor: pointer; transition: background .15s; }
.cms-lightbox-nav:hover { background: rgba(0,0,0,.6); }
.cms-lightbox-prev { left: 1.25rem; } .cms-lightbox-next { right: 1.25rem; }
@media (max-width: 540px) { .cms-lightbox-nav { width: 2.4rem; height: 2.4rem; font-size: 1.8rem; } .cms-lightbox-prev { left: .5rem; } .cms-lightbox-next { right: .5rem; } }

/* Tabs (Description / Reviews) */
.cms-pd-tabs { margin-top: 2.5rem; }
.cms-tabs { display: flex; gap: .25rem; border-bottom: 1px solid #e5e7eb; }
.cms-tab { padding: .7rem 1.1rem; font: inherit; font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; cursor: pointer; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cms-tab:hover { color: #111827; }
.cms-tab.active { color: #111827; border-bottom-color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
.cms-tabpanes { padding-top: 1.5rem; }
.cms-tabpane { display: none; color: #374151; line-height: 1.75; font-size: 1.02rem; }
.cms-tabpane.active { display: block; }
.cms-tabpane .cms-reviews { margin-top: 0; }
.cms-pd-description { color: #374151; line-height: 1.7; border-top: 1px solid #eef0f2; padding-top: 1.25rem; }
.cms-pd-docs { margin-top: 1.25rem; border-top: 1px solid #eef0f2; padding-top: 1rem; }
.cms-pd-docs h3 { margin: 0 0 .6rem; font-size: 1rem; }
.cms-pd-docs ul { list-style: none; margin: 0; padding: 0; }
.cms-pd-docs li { margin: 0 0 .4rem; }
.cms-pd-docs a { display: inline-flex; align-items: center; gap: .5rem; color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); text-decoration: none; font-weight: 600; }
.cms-pd-docs a:hover { text-decoration: underline; }
.cms-doc-ico { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; font-size: .9rem; color: #fff; background: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); border-radius: 4px; }

/* Wishlist */
.cms-wish-form { margin: .25rem 0 1.25rem; }
.cms-wish-btn.in { color: #b42318; border-color: #f0c9c5; }
.cms-wish-btn.in:hover { color: #fff; background: #b42318; }
.cms-wish-item { display: flex; flex-direction: column; gap: .5rem; }
.cms-wish-remove { text-align: center; }

/* Related products */
.cms-related { margin-top: 3rem; }
.cms-related-title { font-size: 1.3rem; margin: 0 0 1.25rem; }

/* Reviews */
.cms-stars { color: #f5a623; letter-spacing: 1px; white-space: nowrap; }
.cms-reviews { margin-top: 3rem; max-width: 46rem; }
.cms-reviews-h { font-size: 1.3rem; margin: 0 0 1rem; }
.cms-reviews-summary { display: flex; align-items: center; gap: .5rem; margin: 0 0 1.5rem; font-size: 1.05rem; }
.cms-reviews-summary .muted { color: #6b7280; }
.cms-reviews-none { color: #6b7280; margin: 0 0 1.5rem; }
.cms-review { padding: 1rem 0; border-top: 1px solid #eef0f2; }
.cms-review-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .25rem; }
.cms-review-meta { font-size: .82rem; color: #6b7280; margin-bottom: .4rem; }
.cms-review-rec { color: #0f7b3f; font-weight: 600; }
.cms-review-body { margin: 0; color: #374151; line-height: 1.6; white-space: pre-line; }
.cms-review-form { margin-top: 2rem; padding-top: 1.5rem; border-top: 2px solid #e5e7eb; display: flex; flex-direction: column; gap: 1rem; }
.cms-review-form h3 { margin: 0; font-size: 1.1rem; }
.cms-review-form input, .cms-review-form textarea, .cms-review-form select {
    padding: .55rem .7rem; font: inherit; border: 1px solid #ced4da; border-radius: 6px; background: #fff; width: 100%;
}
.cms-review-submit { align-self: flex-start; }
.cms-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ── Cart ────────────────────────────────────────────────────────────────── */
.cms-cart-empty { padding: 3rem 0; text-align: center; }
.cms-cart-empty .ti { font-size: 3rem; color: #cbd2da; display: block; margin-bottom: .6rem; }
.cms-cart-empty p { color: #6b7280; margin: 0 0 1rem; }

/* Two-column cart: items + sticky totals card. */
.cms-cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .cms-cart-layout { grid-template-columns: 1fr; gap: 1.5rem; } }
.cms-cart-prod { display: flex; align-items: center; gap: .9rem; }
.cms-cart-thumb { flex: 0 0 auto; display: block; }
.cms-cart-thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid #eef0f2; background: #f7f8fa; display: block; }
.cms-cart-prodmeta { min-width: 0; }
.cms-cart-linetotal { font-weight: 700; }
/* Option 2: line-item cards — one tidy row: image · name · qty · line total · remove */
.cms-cart-cards { display: flex; flex-direction: column; gap: .85rem; }
.cms-cart-card { display: grid; grid-template-columns: 64px minmax(0,1fr) auto 6rem 2.2rem; align-items: center;
    column-gap: 1.1rem; row-gap: .7rem; border: 1px solid #e8edf3; border-radius: 12px; padding: .85rem 1.1rem; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: box-shadow .15s; }
.cms-cart-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.07); }
.cms-cart-card .cms-cart-thumb img { width: 64px; height: 64px; }
.cms-cart-cardmeta { min-width: 0; }
.cms-cart-cardmeta .cms-cart-name { font-size: 1.02rem; }
.cms-cart-unit { color: #6b7280; font-size: .85rem; margin-top: .15rem; }
.cms-cart-card .cms-cart-qty { margin: 0; }
.cms-cart-card .cms-cart-linetotal { text-align: right; font-size: 1.05rem; white-space: nowrap; }
.cms-cart-rmwrap { margin: 0; justify-self: end; }
@media (max-width: 640px) {
    .cms-cart-card { grid-template-columns: 56px 1fr 2.2rem; }
    .cms-cart-card .cms-cart-qty { grid-column: 2 / 4; justify-content: flex-start; }
    .cms-cart-card .cms-cart-linetotal { grid-column: 2 / 4; text-align: left; }
}
/* Sticky top bar holding the "Continue shopping" link (top-right). */
.cms-cart-topbar { position: sticky; top: 0; z-index: 6; display: flex; justify-content: flex-end; align-items: center;
    padding: .6rem 0; margin: 0 0 .75rem; background: #fff; border-bottom: 1px solid #eef0f2; }
.cms-cart-itemsfoot { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 1rem; margin-top: 1.1rem; }
.cms-cart-continue { display: inline-flex; align-items: center; gap: .35rem; color: var(--cms-accent, var(--primary, var(--cms-primary))); text-decoration: none; font-weight: 600; }
.cms-cart-continue:hover { text-decoration: underline; }
.cms-cart-clear { background: transparent; border: 0; color: #9aa3af; cursor: pointer; font-size: .9rem; }
.cms-cart-clear:hover { color: #b42318; text-decoration: underline; }
/* Totals card */
.cms-cart-summary { border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.5rem 1.6rem; background: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,.06); position: sticky; top: 1.25rem; }
.cms-cart-sumtitle { margin: 0 0 1rem; font-size: 1.1rem; }
.cms-cart-sumrow { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; color: #374151; border-bottom: 1px solid #f1f4f8; }
.cms-cart-sumrow small { color: #9aa3af; font-weight: 400; }
.cms-cart-sumship span:last-child { color: #6b7280; font-size: .9rem; }
.cms-cart-sumtotal { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .9rem 0 .2rem; font-weight: 800; }
.cms-cart-sumtotal span:last-child { font-size: 1.5rem; color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-cart-checkout { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; margin-top: 1rem;
    padding: .8rem 1rem; border-radius: 8px; font-weight: 700; text-decoration: none;
    background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff !important; }
.cms-cart-checkout:hover { filter: brightness(.95); color: #fff !important; }
.cms-cart-secure { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: .75rem; color: #6b7280; font-size: .85rem; }
.cms-cart-discount { color: #16a34a; font-weight: 600; }
/* In-cart shipping estimator */
.cms-cart-ship { border-top: 1px solid #f1f4f8; margin-top: .4rem; padding-top: .6rem; }
.cms-cart-ship-title { font-weight: 600; color: #374151; margin-bottom: .4rem; }
.cms-cart-ship-opt { display: flex; align-items: center; gap: .55rem; padding: .35rem 0; cursor: pointer; font-size: .92rem; }
.cms-cart-ship-opt input { margin: 0; }
.cms-cart-ship-name { flex: 1; }
.cms-cart-ship-name small { color: #9aa3af; }
.cms-cart-ship-cost { font-weight: 600; }
.cms-cart-ship-update { margin-top: .4rem; background: transparent; border: 0; color: var(--cms-accent, var(--primary, var(--cms-primary))); font-size: .85rem; cursor: pointer; padding: 0; }
.cms-cart-ship-update:hover { text-decoration: underline; }

/* ── Porto-style cart (table + totals rail) ── */
.cms-cart-steps { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 0 0 1.5rem; font-weight: 600; color: #9aa3af; flex-wrap: wrap; }
.cms-cart-steps .is-active { color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-cart-steps .ti { font-size: .9rem; }
.cms-cart-porto { display: block; width: 100%; }   /* fill the container (overrides .cms-cart inline-block) */
.cms-cart-grid2 { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 2.5rem; align-items: start; }
@media (max-width: 820px) {
    .cms-cart-grid2 { grid-template-columns: 1fr; gap: 1.5rem; }
    .cms-cart-summary { position: static; max-width: 420px; margin-left: auto; }   /* drops to the bottom, right-aligned */
}
.cms-ct-continue { display: inline-flex; align-items: center; gap: .35rem; color: var(--cms-accent, var(--primary, var(--cms-primary))); text-decoration: none; font-weight: 600; margin-bottom: .75rem; }
.cms-ct-continue:hover { text-decoration: underline; }
.cms-ct-tbl { width: 100%; border-collapse: collapse; }
.cms-ct-tbl thead th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; font-weight: 700; padding: 0 .75rem .7rem; border-bottom: 1px solid #e8edf3; }
.cms-ct-tbl thead th:nth-child(2), .cms-ct-tbl thead th:nth-child(3) { text-align: center; }
.cms-ct-h-sub { text-align: right !important; }
.cms-ct-tbl td { padding: 1rem .75rem; border-bottom: 1px solid #f1f4f8; vertical-align: middle; }
.cms-ct-prod { display: flex; align-items: center; gap: 1rem; }
.cms-ct-thumb { position: relative; flex: 0 0 auto; }
.cms-ct-thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid #eef0f2; background: #f7f8fa; display: block; }
.cms-ct-remove { position: absolute; top: -8px; left: -8px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #e5e7eb;
    background: #fff; color: #6b7280; font-size: 1rem; line-height: 1; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.cms-ct-remove:hover { color: #fff; background: #b42318; border-color: #b42318; }
.cms-ct-name { color: inherit; text-decoration: none; font-weight: 600; }
.cms-ct-name:hover { color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-ct-price { text-align: center; color: #6b7280; }
.cms-ct-sub { text-align: right; font-weight: 700; }
.cms-ct-qty { display: inline-flex; align-items: stretch; border: 1px solid #d7dde5; border-radius: 8px; overflow: hidden; margin: 0 auto; }
.cms-ct-qty button { width: 38px; border: 0; background: #f7f8fa; font-size: 1.1rem; cursor: pointer; color: #374151; }
.cms-ct-qty button:hover { background: #eef1f5; }
.cms-ct-qty input { width: 46px; border: 0; border-left: 1px solid #e5e9f0; border-right: 1px solid #e5e9f0; text-align: center; font: inherit; }
td[data-label="Quantity"] { text-align: center; }
.cms-ct-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.cms-ct-coupon { display: flex; gap: .5rem; }
.cms-ct-coupon input { padding: .55rem .8rem; border: 1px solid #d7dde5; border-radius: 8px; font: inherit; min-width: 160px; }
.cms-ct-btn { padding: .6rem 1.2rem; border: 1px solid #d7dde5; border-radius: 8px; background: #fff; font-weight: 600; cursor: pointer; color: inherit; }
.cms-ct-btn:hover { border-color: var(--cms-accent, var(--primary, var(--cms-primary))); color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-ct-coupon-msg { margin-top: .6rem; color: #b91c1c; font-size: .9rem; }
.cms-ct-couponx { display: inline; margin: 0; }
.cms-ct-couponx button { border: 0; background: transparent; color: #9aa3af; cursor: pointer; font-size: .95rem; padding: 0 .15rem; }
.cms-ct-couponx button:hover { color: #b42318; }
@media (max-width: 600px) {
    .cms-ct-tbl thead { display: none; }
    .cms-ct-tbl, .cms-ct-tbl tbody, .cms-ct-tbl tr, .cms-ct-tbl td { display: block; width: 100%; }
    .cms-ct-tbl tr { border: 1px solid #e8edf3; border-radius: 12px; margin-bottom: .85rem; padding: .35rem .25rem; }
    .cms-ct-tbl td { border: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .45rem .9rem; }
    .cms-ct-tbl td.cms-ct-prod { justify-content: flex-start; }
    .cms-ct-tbl td[data-label]::before { content: attr(data-label); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #9aa3af; font-weight: 700; }
    .cms-ct-tbl td.cms-ct-prod::before { display: none; }
    .cms-ct-sub, .cms-ct-price { text-align: right; }
}

.cms-cart-table { width: 100%; border-collapse: collapse; }
.cms-cart-table th, .cms-cart-table td { padding: .75rem .5rem; border-bottom: 1px solid #eef0f2; vertical-align: middle; text-align: left; }
.cms-cart-table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; }
.cms-cart-table .num { text-align: right; }
.cms-cart-name { color: inherit; text-decoration: none; font-weight: 600; }
.cms-cart-name:hover { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
.cms-cart-opts { margin-top: .2rem; font-size: .8rem; color: #6b7280; }
.cms-cart-qty { display: flex; gap: .4rem; align-items: center; }
.cms-cart-qty input { width: 4.5rem; padding: .4rem .5rem; font: inherit; border: 1px solid #ced4da; border-radius: 6px; }
.cms-cart-remove { width: 2rem; height: 2rem; line-height: 1; font-size: 1.2rem; cursor: pointer; color: #b42318; background: transparent; border: 1px solid #f0c9c5; border-radius: 6px; }
.cms-cart-remove:hover { color: #fff; background: #b42318; border-color: #b42318; }
.cms-cart-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.cms-cart-total { font-size: 1.1rem; }
.cms-cart-total span { font-weight: 700; font-size: 1.35rem; margin-left: .5rem; }
.cms-cart-actions { display: flex; gap: .75rem; }
.cms-btn-sm { padding: .4rem .9rem; font-size: .85rem; }

/* ── Checkout ────────────────────────────────────────────────────────────── */
.cms-checkout-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 860px) { .cms-checkout-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
.cms-checkout-h { font-size: 1.15rem; margin: 0 0 1rem; }
.cms-checkout-main .cms-checkout-h:not(:first-child) { margin-top: 1.75rem; }
.cms-field-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cms-col-2 { grid-column: span 2; }
.cms-col-4 { grid-column: span 4; }
.cms-field { display: flex; flex-direction: column; gap: .3rem; }
.cms-field label { font-size: .82rem; font-weight: 600; color: #374151; }
.cms-field input, .cms-field textarea, .cms-ship select {
    padding: .55rem .7rem; font: inherit; border: 1px solid #ced4da; border-radius: 6px; background: #fff;
}
.cms-field input[aria-invalid] { border-color: #d92d20; }
.cms-field-error { font-size: .78rem; color: #d92d20; }
.cms-form-summary { padding: .8rem 1rem; margin: 0 0 1rem; color: #842029; background: #fdeceb; border: 1px solid #f5c2c0; border-radius: 8px; }
.cms-form-summary ul { margin: 0; padding-left: 1.1rem; }
.cms-pay-list { display: flex; flex-direction: column; gap: .5rem; }
.cms-pay { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 1rem; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; }
.cms-pay:hover { border-color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
.cms-checkout-saved { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 1rem; max-width: 32rem; }
.cms-checkout-saved label { font-size: .82rem; font-weight: 600; color: #374151; }
.cms-checkout-saved select { padding: .55rem .7rem; font: inherit; border: 1px solid #ced4da; border-radius: 6px; background: #fff; }
.cms-checkout-save { margin: 1rem 0 0; }
.cms-pay-name { font-weight: 600; }
.cms-pay small { display: block; color: #6b7280; }
.cms-checkout-place { width: 100%; margin-top: 1.5rem; }

.cms-order-summary { padding: 1.25rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; position: sticky; top: 1rem; }
.cms-order-table { width: 100%; border-collapse: collapse; }
.cms-order-table td { padding: .35rem 0; }
.cms-order-table .num { text-align: right; white-space: nowrap; }
.cms-order-table .muted { color: #6b7280; }
.cms-order-table tfoot td { padding-top: .5rem; }
.cms-order-table tfoot tr:first-child td { border-top: 1px solid #e5e7eb; padding-top: .7rem; }
.cms-order-table .discount td { color: #0f7b3f; }
.cms-order-table .grand td { font-weight: 700; font-size: 1.1rem; border-top: 2px solid #d1d5db; padding-top: .6rem; }
.cms-coupon { display: flex; gap: .4rem; margin-top: 1rem; }
.cms-coupon input { flex: 1; padding: .45rem .6rem; font: inherit; border: 1px solid #ced4da; border-radius: 6px; }
.cms-coupon.applied { align-items: center; }
.cms-coupon-tag { padding: .25rem .7rem; font-weight: 600; color: #0f7b3f; background: #e7f6ec; border-radius: 999px; }
.cms-link-danger { color: #b42318; background: none; border: 0; cursor: pointer; text-decoration: underline; font-size: .85rem; }
.cms-coupon-msg { margin: .5rem 0 0; font-size: .82rem; }
.cms-coupon-msg.ok { color: #0f7b3f; }
.cms-coupon-msg.bad { color: #d92d20; }
.cms-ship { margin-top: 1rem; display: flex; flex-direction: column; gap: .3rem; }
.cms-ship label { font-size: .82rem; font-weight: 600; }
.cms-ship-hint { margin-top: .75rem; font-size: .82rem; color: #6b7280; }

.cms-checkout-notice { padding: 1.5rem; border-radius: 10px; border: 1px solid; }
.cms-checkout-notice.ok { color: #0f5132; background: #e7f6ec; border-color: #badbcc; }
.cms-checkout-notice.warn { color: #664d03; background: #fff3cd; border-color: #ffecb5; }
.cms-checkout-notice h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.cms-checkout-notice p { margin: 0 0 1rem; }

/* ── Account ─────────────────────────────────────────────────────────────── */
.cms-account { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: start; }
@media (max-width: 768px) { .cms-account { grid-template-columns: 1fr; gap: 1.25rem; } }
.cms-account-nav { display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.cms-account-nav a { padding: .7rem 1rem; color: #374151; text-decoration: none; border-bottom: 1px solid #eef0f2; }
.cms-account-nav a:last-child { border-bottom: 0; }
.cms-account-nav a:hover { background: #f3f4f6; }
.cms-account-nav a.active { font-weight: 600; color: #fff; background: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
.cms-account-nav a.danger { color: #b42318; }
.cms-account-nav a.danger:hover { background: #fdeceb; }
.cms-account-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.cms-card { padding: 1.25rem 1.5rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; }
.cms-card h2 { margin: 0 0 .85rem; font-size: 1.1rem; }
.cms-card p { margin: .25rem 0; color: #374151; }
.cms-account-empty { color: #6b7280; }
.cms-account-guest { padding: 2rem 0; text-align: center; }
.cms-account-guest p { color: #6b7280; margin: 0 0 1.25rem; }
.cms-account-guest-actions { display: flex; gap: .75rem; justify-content: center; }
.cms-addr-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; }
.cms-addr-head h2 { margin: 0; font-size: 1.2rem; }
.cms-addr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.cms-addr-card { line-height: 1.5; }
.cms-addr-card .muted { color: #6b7280; font-size: .9rem; }
.cms-addr-actions { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; }
.cms-addr-formactions { display: flex; gap: .75rem; margin-top: 1.25rem; }

.cms-orders-table { width: 100%; border-collapse: collapse; }
.cms-orders-table th, .cms-orders-table td { padding: .6rem .5rem; text-align: left; border-bottom: 1px solid #eef0f2; }
.cms-orders-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; }
.cms-orders-table .num { text-align: right; }
.cms-orders-detail-row td { padding: 0 .5rem .6rem; border-bottom: 1px solid #eef0f2; }
.cms-orders-detail-row summary { cursor: pointer; display: inline-block; margin: .4rem 0; padding: .3rem .8rem; font-size: .82rem; color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); border: 1px solid currentColor; border-radius: 6px; }
.cms-orders-items { width: 100%; border-collapse: collapse; background: #f9fafb; margin: .25rem 0 .5rem; }
.cms-orders-items th, .cms-orders-items td { padding: .4rem .6rem; border-bottom: 1px solid #eef0f2; font-size: .88rem; }
.cms-orders-items .num { text-align: right; }

.cms-status { display: inline-block; padding: .15rem .6rem; font-size: .78rem; font-weight: 600; border-radius: 999px; }
.cms-status.is-new { color: #1e40af; background: #e0e7ff; }
.cms-status.is-processing { color: #92400e; background: #fef3c7; }
.cms-status.is-shipped { color: #0e7490; background: #cffafe; }
.cms-status.is-delivered { color: #0f7b3f; background: #e7f6ec; }
.cms-status.is-cancelled { color: #b42318; background: #fdeceb; }
.cms-status.is-other { color: #374151; background: #eceef1; }

/* Order link + single-order detail */
.cms-order-link { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); text-decoration: none; font-weight: 600; }
.cms-order-link:hover { text-decoration: underline; }
.cms-order-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0 0 1.5rem; }
.cms-order-head h2 { margin: 0; font-size: 1.4rem; }
.cms-order-date { width: 100%; margin: .25rem 0 0; color: #6b7280; font-size: .9rem; }
.cms-order-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 0 0 1.5rem; }
@media (max-width: 600px) { .cms-order-cols { grid-template-columns: 1fr; } }
.cms-order-cols .cms-card h3 { margin: 0 0 .75rem; font-size: 1rem; }
.cms-order-addr { font-style: normal; line-height: 1.6; color: #374151; }
.cms-order-addr .muted { color: #6b7280; }
.cms-order-track { margin: .75rem 0 0; font-size: .9rem; }
.cms-order-items-h { font-size: 1.1rem; margin: 0 0 .75rem; }
.cms-order-back { margin: 1.5rem 0 0; }
.cms-order-back a { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); text-decoration: none; }
.cms-order-back a:hover { text-decoration: underline; }

/* ── Header cart link (theme {{ cart }} token) ──────────────────────────────*/
.cms-cart-link {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; color: inherit; text-decoration: none; align-self: center;
}
.cms-cart-link:hover { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
/* Search/account/cart icons follow the SAME tone system as the menu links beside them: "inherit" picked up
   the page body colour (muddy grey on a coloured bar) and the accent hover vanished on an accent-coloured
   bar. Ink matches the links; hover/focus is the same filled accent pill with white ink. */
.cms-header-light .cms-search-link, .cms-header-light .cms-account-link, .cms-header-light .cms-cart-link {
    color: var(--cms-menu-link, #23262d) !important;
}
.cms-header-dark .cms-search-link, .cms-header-dark .cms-account-link, .cms-header-dark .cms-cart-link {
    color: var(--cms-menu-link, #ffffff) !important;
}
.cms-header-light .cms-search-link:hover,  .cms-header-dark .cms-search-link:hover,
.cms-header-light .cms-search-link:focus,  .cms-header-dark .cms-search-link:focus,
.cms-header-light .cms-account-link:hover, .cms-header-dark .cms-account-link:hover,
.cms-header-light .cms-account-link:focus, .cms-header-dark .cms-account-link:focus,
.cms-header-light .cms-cart-link:hover,    .cms-header-dark .cms-cart-link:hover,
.cms-header-light .cms-cart-link:focus,    .cms-header-dark .cms-cart-link:focus {
    background-color: var(--cms-menu-link-hover, var(--cms-accent, var(--primary, var(--base-color, #1c64c4)))) !important;
    color: #ffffff !important;
    border-radius: .25rem;
}
/* "Added to cart" bounce on the header cart icon (paired with the fly-to-cart animation). */
.cms-cart-bounce { animation: cmsCartBounce .6s ease; }
@keyframes cmsCartBounce { 0%,100% { transform: scale(1); } 25% { transform: scale(1.3); } 55% { transform: scale(.85); } 80% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .cms-cart-bounce { animation: none; } }
/* Header search icon — sits in the same {{ cart }} slot, just before the cart. */
.cms-search-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; color: inherit; text-decoration: none; align-self: center;
}
.cms-search-link:hover { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
/* Header account/portal icon — same {{ cart }} slot, between search and cart. */
.cms-account-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; color: inherit; text-decoration: none; align-self: center;
}
.cms-account-link:hover { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
.cms-cart-count {
    position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px;
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; color: #fff;
    background: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); border-radius: 999px;
}

/* ── Header search + cart: keep them the same size AND on the same baseline ──
   Both are 44px hit-areas with a 22px icon. The cart link is wrapped in .cms-cart
   (the mini-cart dropdown anchor); as a flex item in the nav row it stretched to
   the full row height, leaving the cart icon riding ~28px higher than the search
   icon. Center the wrapper so the two icons line up; the absolute dropdown is
   unaffected. */
.cms-cart { align-self: center; }
.cms-cart-link, .cms-search-link { align-self: center; }

/* ── Search results ─────────────────────────────────────────────────────────*/
.cms-search { margin: 0 0 2rem; }
.cms-search-form { display: flex; gap: .5rem; max-width: 40rem; margin: 0 0 1.5rem; }
.cms-search-form input[type=search] { flex: 1; padding: .65rem .9rem; font: inherit; border: 1px solid #ced4da; border-radius: 6px; }
.cms-search-summary { color: #6b7280; margin: 0 0 1.25rem; }
.cms-search-hl { background: color-mix(in srgb, var(--cms-primary) 22%, transparent); color: inherit; padding: 0 .1em; border-radius: 3px; }
.cms-search-hint { color: #6b7280; font-style: italic; }
.cms-search-h { font-size: 1.2rem; margin: 1.75rem 0 1rem; }
.cms-search-pages { list-style: none; margin: 0; padding: 0; }
.cms-search-pages li { padding: .4rem 0; border-bottom: 1px solid #eef0f2; }
.cms-search-pages a { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); text-decoration: none; font-weight: 600; }
.cms-search-pages a:hover { text-decoration: underline; }
.cms-search-pages li .cms-search-meta { display: block; font-size: .8rem; color: #8a94a6; font-weight: 400; margin-top: .1rem; }

/* ── Auth (login / register) ────────────────────────────────────────────────*/
.cms-auth { max-width: 28rem; margin: 1rem auto 2rem; }
.cms-auth-form { display: flex; flex-direction: column; gap: 1rem; }
.cms-auth-form .cms-field input { width: 100%; }
.cms-auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cms-auth-check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: #374151; }
.cms-auth-check input { width: auto; }
.cms-auth-submit { width: 100%; margin-top: .5rem; }
.cms-auth-alt { margin: 1.25rem 0 0; text-align: center; color: #6b7280; }
.cms-auth-alt a { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); font-weight: 600; text-decoration: none; }
.cms-auth-alt a:hover { text-decoration: underline; }
.cms-auth-intro { color: #6b7280; margin: 0 0 1.25rem; }
.cms-auth-links { margin: .85rem 0 0; text-align: center; font-size: .9rem; }
.cms-auth-links a { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); text-decoration: none; }
.cms-auth-links a:hover { text-decoration: underline; }

/* ── Blog (theme-native) ─────────────────────────────────────────────── */
.cms-blog-list { display: grid; gap: 1.75rem; }
@media (min-width: 768px) { .cms-blog-list { grid-template-columns: repeat(2, 1fr); } }
.cms-blog-card { display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; background: #fff; }
.cms-blog-card-img { display: block; aspect-ratio: 16/9; overflow: hidden; }
.cms-blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.cms-blog-card:hover .cms-blog-card-img img { transform: scale(1.04); }
.cms-blog-card-body { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .5rem; }
.cms-blog-card-title { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.cms-blog-card-title a { color: inherit; text-decoration: none; }
.cms-blog-card-title a:hover { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); }
.cms-blog-card-meta { display: flex; gap: 1rem; font-size: .82rem; color: #6b7280; }
.cms-blog-card-excerpt { margin: 0; color: #4b5563; font-size: .95rem; }
.cms-blog-readmore { margin-top: auto; font-weight: 600; font-size: .9rem; color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); text-decoration: none; }
.cms-blog-readmore:hover { text-decoration: underline; }
.cms-blog-empty { color: #6b7280; }

.cms-blog-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0; }
.cms-blog-tag { font-size: .75rem; padding: .15rem .6rem; border-radius: 999px; background: #f3f4f6; color: #374151; text-decoration: none; }
a.cms-blog-tag:hover { background: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); color: #fff; }
.cms-blog-archive-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.cms-blog-archive-head h2 { margin: 0; }
.cms-blog-allposts { font-weight: 600; text-decoration: none; color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); white-space: nowrap; }
.cms-blog-allposts:hover { text-decoration: underline; }

.cms-blog-post { max-width: 820px; margin: 0 auto; }
/* Post + right-hand sidebar (categories / other posts). Stacks on narrow screens. */
.cms-blog-layout { display: flex; gap: 2.5rem; align-items: flex-start; max-width: 1200px; margin: 0 auto; }
.cms-blog-layout .cms-blog-main { flex: 1 1 auto; min-width: 0; }
.cms-blog-layout .cms-blog-post { max-width: none; margin: 0; }
.cms-blog-side { flex: 0 0 300px; width: 300px; position: sticky; top: 1rem; }
.cms-blog-widget { border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1.25rem; background: #fff; }
.cms-blog-widget-h { font-size: 1rem; font-weight: 700; margin: 0 0 .65rem; padding-bottom: .55rem; border-bottom: 2px solid var(--cms-accent, var(--primary, #185fa5)); display: inline-block; }
.cms-blog-cats { list-style: none; margin: 0; padding: 0; }
.cms-blog-cats li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid #f1f3f5; }
.cms-blog-cats li:last-child { border-bottom: 0; }
.cms-blog-cats a { text-decoration: none; color: #374151; }
.cms-blog-cats a:hover { color: var(--cms-accent, var(--primary, #185fa5)); }
.cms-blog-cat-count { flex: 0 0 auto; font-size: .78rem; color: #6b7280; background: #f3f4f6; border-radius: 999px; padding: .05rem .55rem; }
.cms-blog-recent { list-style: none; margin: 0; padding: 0; }
.cms-blog-recent-item { padding: .55rem 0; border-bottom: 1px solid #f1f3f5; }
.cms-blog-recent-item:last-child { border-bottom: 0; }
.cms-blog-recent-item a { display: flex; gap: .7rem; align-items: center; text-decoration: none; color: inherit; }
.cms-blog-recent-img { flex: 0 0 56px; width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.cms-blog-recent-meta { display: flex; flex-direction: column; min-width: 0; }
.cms-blog-recent-title { font-weight: 600; color: #1f2937; line-height: 1.25; }
.cms-blog-recent-item a:hover .cms-blog-recent-title { color: var(--cms-accent, var(--primary, #185fa5)); }
.cms-blog-recent-date { font-size: .78rem; color: #6b7280; margin-top: .15rem; }
/* Sidebar search */
.cms-blog-search-widget { padding: .55rem .6rem; }
.cms-blog-search { display: flex; gap: .4rem; }
.cms-blog-search-input { flex: 1 1 auto; min-width: 0; border: 1px solid #d1d5db; border-radius: 8px; padding: .5rem .7rem; font: inherit; color: #1f2937; }
.cms-blog-search-input:focus { outline: none; border-color: var(--cms-accent, var(--primary, #185fa5)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cms-accent, var(--primary, #185fa5)) 18%, transparent); }
.cms-blog-search-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; border: 0; border-radius: 8px; cursor: pointer; color: #fff; background: var(--cms-accent, var(--primary, #185fa5)); }
.cms-blog-search-btn:hover { filter: brightness(.93); }
@media (max-width: 991px) { .cms-blog-layout { flex-direction: column; } .cms-blog-side { position: static; width: 100%; flex-basis: auto; } }
.cms-blog-subtitle { font-size: 1.15rem; color: #6b7280; margin: 0 0 .25rem; }
.cms-blog-date { font-size: .85rem; color: #6b7280; margin: 0 0 1rem; }
.cms-blog-banner { width: 100%; border-radius: 8px; margin: 0 0 1.5rem; }
.cms-blog-overview { font-size: 1.1rem; color: #374151; margin: 0 0 1.25rem; }
.cms-blog-body { line-height: 1.7; }
.cms-blog-body img { max-width: 100%; height: auto; }

/* Comments */
.cms-blog-comments { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; }
.cms-blog-comments h3 { margin: 0 0 1rem; }
.cms-blog-nocomments { color: #6b7280; }
.cms-comment-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.cms-comment { padding: .9rem 0; border-bottom: 1px solid #f0f0f0; }
.cms-comment-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.cms-comment-date { font-size: .8rem; color: #6b7280; }
.cms-comment-body { margin-top: .35rem; color: #374151; }
.cms-blog-form-h { margin: 1.5rem 0 .75rem; }
.cms-comment-form { display: flex; flex-direction: column; gap: .65rem; max-width: 560px; }
.cms-input { width: 100%; padding: .6rem .8rem; border: 1px solid #d1d5db; border-radius: 6px; font: inherit; }
.cms-input:focus { outline: none; border-color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cms-primary) 15%, transparent); }
.cms-comment-form .cms-btn-primary { align-self: flex-start; }
.cms-note { padding: .75rem 1rem; border-radius: 6px; margin: 0 0 1rem; }
.cms-note-ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

/* Recently-viewed strip on the product page (reuses the related-products grid). */
.cms-recently-viewed { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; }

/* Back-in-stock signup (shown under an out-of-stock product). */
.cms-bis-form { margin-top: .85rem; max-width: 360px; }
.cms-bis-label { display: block; font-size: .85rem; font-weight: 600; color: #4b5563; margin-bottom: .35rem; }
.cms-bis-row { display: flex; gap: .5rem; }
.cms-bis-row .cms-input { flex: 1; min-width: 0; }

/* One-page (flattened) design: smooth scroll between flattened sections; scroll-margin keeps an anchored
   section from hiding behind a sticky header. Sections are full-width; per-block container wrapping stays. */
html:has(.cms-onepage-section) { scroll-behavior: smooth; }
.cms-onepage-section { scroll-margin-top: 90px; }

/* One-page sticky anchor bar — always-visible top nav for flattened one-page sites (works even when the
   theme hides its own menu in a hamburger/side-header). Themed via the site primary/accent. */
.cms-onepage-bar { position: sticky; top: 0; z-index: 1031; width: 100%;
    background: var(--cms-accent, var(--primary, var(--base-color, #16181d)));
    box-shadow: 0 1px 8px rgba(0,0,0,.18); }
.cms-onepage-bar-inner { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
    max-width: 1200px; margin: 0 auto; padding: .55rem 1rem; }
.cms-onepage-bar .cms-onepage-brand { color: #fff; font-weight: 700; text-decoration: none;
    margin-right: auto; font-size: 1.05rem; }
.cms-onepage-bar ul { display: flex; gap: 1.1rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.cms-onepage-bar a { color: #fff; text-decoration: none; font-weight: 600; opacity: .92; }
.cms-onepage-bar a:hover, .cms-onepage-bar a.active { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
/* Anchored sections clear the sticky bar (its height ~48px) plus a little breathing room. */
body:has(.cms-onepage-bar) .cms-onepage-section { scroll-margin-top: 70px; }

/* One-page scroll-unlock: full-screen / side-header demos (e.g. creative-agency) lock the document scroll
   (overflow:hidden + 100vh on html/body/wrappers) for their scroll-jacked layout. When we flatten content
   into them, force normal document scrolling so the mouse wheel works through the stacked sections. */
html:has(.cms-onepage-section),
body:has(.cms-onepage-section) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: auto !important;
    position: static !important;
}
/* Full-height / side-header wrappers → normal flow so the flattened sections aren't clipped to one screen. */
body:has(.cms-onepage-section) > div.body,
body:has(.cms-onepage-section) .side-header-overlay-full-screen,
body:has(.cms-onepage-section) [class*="side-header"],
body:has(.cms-onepage-section) [data-plugin-scrollable] {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Full-width blocks: stretch the element's INNER theme container too. Porto/Bootstrap elements wrap their
   content in a .container (≈1140px), so a block set full-width would still show narrow content. When the
   author chooses full-width, let that inner container fill the width as well. */
.cms-fullwidth > .container,
.cms-fullwidth > * > .container,
.cms-fullwidth > .container-sm, .cms-fullwidth > * > .container-sm,
.cms-fullwidth > .container-md, .cms-fullwidth > * > .container-md,
.cms-fullwidth > .container-lg, .cms-fullwidth > * > .container-lg,
.cms-fullwidth > .container-xl, .cms-fullwidth > * > .container-xl,
.cms-fullwidth > .container-xxl, .cms-fullwidth > * > .container-xxl {
    max-width: 100% !important;
}

/* ── Document Repository add-on (searchable, grouped, downloadable file list) ───────────────── */
.cms-docrepo { margin: 1rem 0; }
/* Category filter: themed chevron (two gradients form a ▼ in the theme primary) instead of the grey browser arrow. */
.cms-docrepo select.cms-docrepo-catfilter { appearance: none; -webkit-appearance: none; padding: .45rem 2rem .45rem .75rem;
    border: 1px solid #ced4da; border-radius: 8px; background-color: #fff; font: inherit; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--cms-primary, #da7940) 50%),
                      linear-gradient(135deg, var(--cms-primary, #da7940) 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 13px) center;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.cms-docrepo select.cms-docrepo-catfilter:focus { outline: 0; border-color: var(--cms-primary, #da7940); box-shadow: 0 0 0 .15rem rgba(218,121,64,.25); }
.cms-docrepo-title { margin-bottom: .25rem; }
.cms-docrepo-intro { color: #6b7280; margin-bottom: 1rem; }
.cms-docrepo-search { margin-bottom: 1rem; }
.cms-docrepo-search input {
    width: 100%; max-width: 420px; padding: .55rem .85rem;
    border: 1px solid #d8dde3; border-radius: 8px; font-size: 1rem;
}
.cms-docrepo-section { margin-bottom: 1rem; border: 1px solid #e9edf1; border-radius: 10px; overflow: hidden; }
.cms-docrepo-section > .cms-docrepo-section-name,
.cms-docrepo-section-head { margin: 0; padding: .7rem 1rem; background: #f6f8fa; font-weight: 600; cursor: pointer; }
.cms-docrepo-section-head { list-style: none; display: flex; flex-direction: column; }
.cms-docrepo-section-head::-webkit-details-marker { display: none; }
details.cms-docrepo-section > summary::before {
    content: "\203A"; display: inline-block; margin-right: .5rem; transition: transform .15s ease;
}
details.cms-docrepo-section[open] > summary::before { transform: rotate(90deg); }
.cms-docrepo-section-desc { font-weight: 400; color: #6b7280; font-size: .9rem; }
.cms-docrepo-list { list-style: none; margin: 0; padding: 0; }
.cms-docrepo-item {
    display: flex; align-items: center; gap: .85rem;
    padding: .7rem 1rem; border-top: 1px solid #eef1f4;
}
.cms-docrepo-section > .cms-docrepo-list > .cms-docrepo-item:first-child { border-top: none; }
.cms-docrepo-icon { font-size: 1.6rem; color: #5a6b7b; flex: 0 0 auto; }
.cms-docrepo-info { flex: 1 1 auto; min-width: 0; }
.cms-docrepo-name { font-weight: 600; text-decoration: none; }
.cms-docrepo-name:hover { text-decoration: underline; }
.cms-docrepo-desc { color: #6b7280; font-size: .9rem; }
.cms-docrepo-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .2rem; font-size: .8rem; color: #8a96a3; }
.cms-docrepo-type { font-weight: 600; letter-spacing: .03em; }
.cms-docrepo-dl {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; border-radius: 8px; color: #fff;
    background: var(--cms-primary, var(--primary, #066fd1)); text-decoration: none; font-size: 1.1rem;
}
/* Force a white icon — keep it readable on the blue button regardless of the theme's accent colour. */
.cms-docrepo-dl, .cms-docrepo-dl i { color: #fff !important; }
.cms-docrepo-dl:hover { filter: brightness(.92); }
.cms-docrepo-empty { font-style: italic; }
/* Table layout (chart-like: one row per document, every field its own column) + toolbar + sortable headers. */
.cms-docrepo-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
/* Search box matches the category pill (same border/radius/padding/height). */
.cms-docrepo-toolbar .cms-docrepo-search { flex: 1 1 220px; min-width: 180px; max-width: none; margin: 0;
    padding: .55rem .85rem; border: 1px solid #d8dde3; border-radius: 8px; background: #fff; font-size: .95rem; }
.cms-docrepo-catfilter { padding: .55rem .85rem; border: 1px solid #d8dde3; border-radius: 8px; background: #fff; font-size: .95rem; }
/* Advanced filter button + drop-down panel. */
.cms-docrepo-adv-toggle, .cms-docrepo-clear { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .9rem;
    border: 1px solid #d8dde3; border-radius: 8px; background: #fff; font: inherit; font-size: .95rem; cursor: pointer; }
.cms-docrepo-adv-toggle:hover, .cms-docrepo-clear:hover { background: #f3f6fb; }
.cms-docrepo-adv-toggle.is-open { background: var(--cms-primary, #206bc4); color: #fff; border-color: var(--cms-primary, #206bc4); }
.cms-docrepo-clear { color: #b42318; border-color: #f1c7c2; }
.cms-docrepo-adv { border: 1px solid #e3e8ef; border-radius: 10px; background: #f8fafc; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.cms-docrepo-adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem 1rem; }
.cms-docrepo-adv-f { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 600; color: #475569; }
.cms-docrepo-adv-f input, .cms-docrepo-adv-f select { font: inherit; font-weight: 400; padding: .45rem .6rem; border: 1px solid #d8dde3; border-radius: 7px; background: #fff; }
.cms-docrepo-adv-range { display: flex; align-items: center; gap: .4rem; }
.cms-docrepo-adv-range input { flex: 1 1 0; min-width: 0; }
.cms-docrepo-adv-cats { margin-top: .9rem; }
.cms-docrepo-adv-catslabel { display: block; font-size: .85rem; font-weight: 600; color: #475569; margin-bottom: .4rem; }
.cms-docrepo-adv-catlist { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.cms-docrepo-adv-cat { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; cursor: pointer; }
.cms-docrepo-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cms-docrepo-table thead th { text-align: left; padding: .6rem .85rem; border-bottom: 2px solid #e6e9ee; color: #4b5563; font-weight: 600; white-space: nowrap; }
.cms-docrepo-table th.sortable { cursor: pointer; user-select: none; }
.cms-docrepo-table th.sortable:hover { color: var(--cms-accent, #066fd1); }
.cms-docrepo-table th.sortable::after { content: "↕"; opacity: .35; margin-left: .35rem; font-size: .85em; }
.cms-docrepo-table th.sorted-asc::after { content: "↑"; opacity: .9; }
.cms-docrepo-table th.sorted-desc::after { content: "↓"; opacity: .9; }
.cms-docrepo-table tbody td { padding: .7rem .85rem; border-bottom: 1px solid #eef1f4; vertical-align: middle; }
.cms-docrepo-table tbody tr:hover { background: #f8fafc; }
.cms-docrepo-namecell { display: flex; align-items: center; gap: .7rem; }
.cms-docrepo-nametext { display: flex; flex-direction: column; min-width: 0; }
.cms-docrepo-catbadge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; background: #eef2f7; color: #475569; font-size: .82rem; white-space: nowrap; }
.cms-docrepo-datecell, .cms-docrepo-sizecell { white-space: nowrap; color: #6b7280; }
.cms-docrepo-dlcol { width: 1%; text-align: right; white-space: nowrap; }
@media (max-width: 640px) {
    .cms-docrepo-table thead { display: none; }
    .cms-docrepo-table, .cms-docrepo-table tbody, .cms-docrepo-table tr, .cms-docrepo-table td { display: block; width: 100%; }
    .cms-docrepo-table tr { border: 1px solid #e6e9ee; border-radius: 10px; margin-bottom: .75rem; padding: .4rem .2rem; }
    .cms-docrepo-table td { border: none; padding: .3rem .6rem; }
}
.cms-docrepo-gate { max-width: 420px; margin: 2rem auto; text-align: center; padding: 1.75rem 1.5rem; border: 1px solid #e9edf1; border-radius: 12px; background: #fafbfc; }
.cms-docrepo-gate-icon { font-size: 2.2rem; color: #5a6b7b; }
.cms-docrepo-gate p { color: #4b5563; margin: .5rem 0 1rem; }
.cms-docrepo-gate-err { color: #b42318 !important; }
.cms-docrepo-gate input[type=password] { width: 100%; padding: .55rem .85rem; border: 1px solid #d8dde3; border-radius: 8px; margin-bottom: .6rem; font-size: 1rem; }
.cms-docrepo-gate button { width: 100%; padding: .55rem 1rem; border: none; border-radius: 8px; background: var(--cms-accent, var(--primary, #066fd1)); color: #fff; font-weight: 600; cursor: pointer; }
.cms-docrepo-gate button:hover { filter: brightness(.93); }

/* Advanced-gallery text overlay (managed lightbox images) */
.control-lightbox .lb-item { position: relative; display: block; }
.control-lightbox .lb-overlay {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: .6rem .7rem .5rem; color: #fff; font-size: .9rem; font-weight: 600; line-height: 1.25;
    background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
    text-shadow: 0 1px 2px rgba(0,0,0,.5); pointer-events: none;
}

/* Customer account dashboard: welcome + quick-access tiles */
.cms-account-hello { font-size: 1.05rem; margin: 0 0 .35rem; }
.cms-account-hello-out { color: #6b7280; font-size: .9rem; }
.cms-account-intro { color: #6b7280; margin: 0 0 1.25rem; max-width: 60ch; }
.cms-account-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin: 0 0 1.75rem; }
.cms-account-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
    padding: 1.6rem 1rem; text-align: center; text-decoration: none; color: #374151;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.cms-account-tile:hover { border-color: var(--cms-accent, var(--primary, var(--cms-primary))); box-shadow: 0 6px 16px rgba(0,0,0,.08); transform: translateY(-2px); color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-account-tile-ico { color: #6b7280; transition: color .15s; }
.cms-account-tile:hover .cms-account-tile-ico { color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-account-tile-ico svg { width: 2.4rem; height: 2.4rem; display: block; }
.cms-account-tile-label { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }

/* Additional information table (product tab) */
.cms-addl-table { width: 100%; border-collapse: collapse; }
.cms-addl-table th, .cms-addl-table td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid #eef0f2; font-size: .92rem; }
.cms-addl-table th { width: 30%; font-weight: 700; color: #374151; background: #fafbfc; }
.cms-addl-table td { color: #4b5563; }

/* Sticky add-to-cart bar (product page) */
/* visibility:hidden (not just the off-screen transform) takes the bar's buttons out of the focus order while
   it's hidden+aria-hidden — otherwise axe flags focusable children inside an aria-hidden container. */
.cms-sticky-cart { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; transform: translateY(100%); visibility: hidden;
    transition: transform .25s ease, visibility .25s ease; background: #fff; border-top: 1px solid #e5e7eb; box-shadow: 0 -4px 16px rgba(0,0,0,.08); }
.cms-sticky-cart.show { transform: translateY(0); visibility: visible; }
.cms-sticky-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; }
.cms-sticky-img { width: 46px; height: 46px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.cms-sticky-name { font-weight: 700; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.cms-sticky-price { font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.cms-sticky-actions { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
@media (max-width: 560px) { .cms-sticky-name { display: none; } .cms-sticky-price { margin-left: auto; } }

/* Wishlist table (porto-style) */
.cms-wishlist { overflow-x: auto; }
.cms-wishlist-table { width: 100%; border-collapse: collapse; }
.cms-wishlist-table thead th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; padding: .75rem .6rem; border-bottom: 2px solid #eef0f2; }
.cms-wishlist-table tbody td { padding: 1rem .6rem; border-bottom: 1px solid #f0f2f4; vertical-align: middle; }
.cms-wl-cx { width: 2.5rem; }
.cms-wl-x { width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid #e5e7eb; background: #fff; color: #6b7280; cursor: pointer; line-height: 1; font-size: 1rem; }
.cms-wl-x:hover { color: #fff; background: #e02b2b; border-color: transparent; }
.cms-wl-prod a { display: flex; align-items: center; gap: .85rem; color: #1f2733; text-decoration: none; font-weight: 600; }
.cms-wl-prod img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: #f4f5f7; flex: 0 0 auto; }
.cms-wl-prod a:hover span { color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-wl-price { font-weight: 700; white-space: nowrap; }
.cms-wl-stock.in { color: #15803d; } .cms-wl-stock.out { color: #b42318; }
.cms-wl-act-h, .cms-wl-act { text-align: right; }
.cms-wl-actions { display: inline-flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 560px) { .cms-wl-prod span { display: none; } .cms-wl-actions { flex-direction: column; } }

/* Category / shop promo banner */
.cms-cat-banner { position: relative; border-radius: 10px; overflow: hidden; background-size: cover; background-position: center; background-color: #eef2f6; margin: 0 0 1.5rem; min-height: 190px; display: flex; align-items: center; }
.cms-cat-banner-inner { padding: 2rem 2.5rem; max-width: 60%; }
.cms-cat-banner-h { margin: 0 0 .5rem; font-size: 2rem; font-weight: 800; line-height: 1.1; color: #1f2733; }
.cms-cat-banner-t { margin: 0 0 1.1rem; font-size: 1.05rem; color: #374151; }
@media (max-width: 560px) { .cms-cat-banner-inner { max-width: 100%; padding: 1.25rem; } .cms-cat-banner-h { font-size: 1.4rem; } }

/* Shop sidebar option filters (Colour swatches / Size chips) */
.cms-side-opt .cms-opt-swatches { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.65rem; }
.cms-opt-swatch { position:relative; cursor:pointer; line-height:0; }
.cms-opt-swatch input { position:absolute; opacity:0; width:0; height:0; }
.cms-opt-swatch span { display:block; width:1.6rem; height:1.6rem; border-radius:50%; box-shadow:0 0 0 1px #d1d5db; }
.cms-opt-swatch.on span, .cms-opt-swatch input:checked + span { box-shadow:0 0 0 2px var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-side-opt .cms-opt-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.65rem; }
.cms-opt-chip { position:relative; cursor:pointer; font-size:.82rem; padding:.3rem .6rem; border:1px solid #ced4da; border-radius:6px; background:#fff; color:#495057; }
.cms-opt-chip input { position:absolute; opacity:0; width:0; height:0; }
.cms-opt-chip.on { border-color:var(--cms-accent, var(--primary, var(--cms-primary))); color:var(--cms-accent, var(--primary, var(--cms-primary))); font-weight:600; }
.cms-side-opt .cms-side-clear, .cms-shop-side > .cms-side-clear { display:inline-block; margin-top:.25rem; font-size:.82rem; }

/* Dual-range price slider */
.cms-price-slider { position: relative; height: 30px; margin: .35rem 0 .5rem; }
.cms-price-track { position: absolute; top: 13px; left: 2px; right: 2px; height: 4px; background: #e5e7eb; border-radius: 2px; }
.cms-price-fill { position: absolute; top: 0; bottom: 0; background: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); border-radius: 2px; }
.cms-price-range { position: absolute; top: 6px; left: 0; width: 100%; height: 18px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.cms-price-range::-webkit-slider-runnable-track { background: none; border: 0; }
.cms-price-range::-moz-range-track { background: none; border: 0; }
.cms-price-range::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.cms-price-range::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
/* AJAX filtering: dim the product column while the next result set loads */
.cms-shop-loading { opacity: .45; pointer-events: none; transition: opacity .12s; }

/* Header mini-cart dropdown */
.cms-cart { position: relative; display: inline-block; }
.cms-cart-dropdown { position: absolute; top: 100%; right: 0; z-index: 1000; width: 300px; max-width: 86vw;
    margin-top: .4rem; padding: 1rem; background: #fff; color: #1f2733; border: 1px solid #e5e7eb; border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.16); opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s; text-align: left; }
.cms-cart.open .cms-cart-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.cms-cart-dropdown::before { content: ""; position: absolute; top: -10px; right: 0; left: 0; height: 10px; }
.cms-minicart-loading, .cms-minicart-empty { margin: 0; color: #6b7280; text-align: center; padding: .5rem 0 1rem; }
.cms-minicart-items { list-style: none; margin: 0 0 .5rem; padding: 0; max-height: 280px; overflow-y: auto; }
.cms-minicart-item { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid #f0f2f4; }
.cms-minicart-name { font-weight: 600; font-size: .9rem; }
.cms-minicart-qp { color: #6b7280; font-size: .85rem; white-space: nowrap; }
.cms-minicart-total { display: flex; justify-content: space-between; padding: .6rem 0; font-size: .95rem; border-top: 1px solid #e5e7eb; }
.cms-minicart-actions { display: flex; gap: .5rem; margin-top: .5rem; }
.cms-minicart-actions .cms-btn { flex: 1; text-align: center; }

/* ── Accessibility: storefront accent text contrast (WCAG AA) ───────────────
   The theme skin overrides our storefront link colours (loaded later / higher specificity), repainting the
   category list in the skin accent (e.g. the Porto demo's #cc9966 gold) which fails the 4.5:1 small-text
   threshold. Re-assert the intended storefront colours with !important: normal category links read as dark
   #374151 (the design intent, AA-safe), and the active/hover state uses a darkened, still-warm accent that
   also clears AA. Scoped to cms-* storefront components so the theme's own links are untouched. */
ul.cms-side-cats a { color: #374151 !important; }
ul.cms-side-cats a.active, ul.cms-side-cats a:hover { color: #8a5a2b !important; }
a.cms-product-cat, .cms-pd-cat a { color: #6b7280 !important; }
a.cms-product-cat:hover, .cms-pd-cat a:hover { color: #8a5a2b !important; }
.cms-product-name a { color: #1f2733 !important; }
.cms-product-name a:hover { color: #8a5a2b !important; }
/* Headings / share buttons / detail text the theme repaints to its (too-light) body or accent colour. */
.cms-side-title { color: #111827 !important; }
.cms-related-title { color: #1f2733 !important; }
.cms-sticky-price, .cms-sticky-name { color: #1f2733 !important; }
.cms-pd-share-btn { color: #4b5563 !important; }
.cms-pd-tabs .cms-tabpane, .cms-pd-tabs .cms-tabpane p, .cms-pd-tabs .cms-tabpane li { color: #495057 !important; }
.cms-pd-tabs .cms-tabpane h1, .cms-pd-tabs .cms-tabpane h2, .cms-pd-tabs .cms-tabpane h3, .cms-pd-tabs .cms-tabpane h4 { color: #1f2733 !important; }
/* Outline button: the accent often isn't dark enough for text on white — darken it with color-mix so any
   skin accent (not just the Porto orange) clears AA, and darken the hover fill the same way. */
.cms-btn-outline { color: color-mix(in srgb, var(--cms-accent, var(--primary, var(--cms-primary))) 58%, #000) !important; border-color: color-mix(in srgb, var(--cms-accent, var(--primary, var(--cms-primary))) 58%, #000) !important; }
.cms-btn-outline:hover { color: #fff !important; background: color-mix(in srgb, var(--cms-accent, var(--primary, var(--cms-primary))) 70%, #000) !important; }

/* Add-to-cart toast */
.cms-toast { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 2000; padding: .7rem 1.1rem; border-radius: 8px;
    background: #111827; color: #fff; font-size: .9rem; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.25);
    opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease; }
.cms-toast.show { opacity: 1; transform: translateY(0); }

/* ── Staff directory: card → profile link, and the detailed /team/{id} profile page ───────────────── */
.control-staff .staff-card .staff-name a { color: #23262d !important; text-decoration: none; }   /* black name (beats the skin's orange link colour) */
.control-staff .staff-card .staff-name a:hover { color: #c8791e !important; }
.staff-photo-link { display: block; }
.staff-profile-link { display: inline-flex; align-items: center; gap: .25rem; margin-top: .5rem; font-weight: 600;
    font-size: .88rem; color: color-mix(in srgb, var(--cms-accent, var(--primary, var(--cms-primary))) 70%, #000); text-decoration: none; }
.staff-profile-link:hover { gap: .45rem; }

.cms-staff-profile { display: grid; grid-template-columns: 320px 1fr; gap: 2.5rem; align-items: start; margin: 1rem 0 2rem; }
@media (max-width: 768px) { .cms-staff-profile { grid-template-columns: 1fr; gap: 1.5rem; } }
.cms-staff-aside { text-align: center; }
.cms-staff-pf-photo { width: 100%; max-width: 320px; border-radius: 10px; display: block; margin: 0 auto .9rem; }
.cms-staff-pf-name { font-size: 1.45rem; margin: 0 0 .15rem; color: #1f2733; }
.cms-staff-pf-title { color: #6b7280; font-size: .95rem; margin-bottom: 1rem; }
.cms-staff-pf-contact { list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid #e5e7eb; text-align: left; }
.cms-staff-pf-contact li { display: flex; gap: .75rem; align-items: flex-start; padding: .55rem 0; }
.cms-staff-pf-contact li i { color: var(--cms-accent, var(--primary, var(--cms-primary))); font-size: 1.15rem; margin-top: .15rem; flex: 0 0 auto; }
.cms-staff-pf-label { display: block; font-weight: 700; font-size: .82rem; color: #1f2733; }
.cms-staff-pf-contact a { color: #495057; text-decoration: none; }
.cms-staff-pf-contact a:hover { color: var(--cms-accent, var(--primary, var(--cms-primary))); }
/* "Follow me" social-icon row on the profile (round outline buttons, Porto-style). */
.cms-staff-pf-follow { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; text-align: left; }
.cms-staff-pf-follow ul { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.cms-staff-pf-follow a { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid #d1d5db; color: #495057; text-decoration: none; transition: all .15s; }
.cms-staff-pf-follow a:hover { background: var(--cms-accent, var(--primary, var(--cms-primary))); border-color: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; }
/* ── FAQ add-on: "View more" link + detail page (the accordion itself uses the .cms-faq details/summary
       styles defined earlier — don't re-style summary here or it draws a second open/close indicator). ── */
.cms-faq-more { margin: .85rem 0 0; }
.cms-faq-more a { font-weight: 600; color: var(--cms-accent, var(--primary, var(--cms-primary))); text-decoration: none; }
.cms-faq-more a:hover { text-decoration: underline; }
.cms-faq-detail { max-width: 760px; }

/* Video add-on: responsive embeds at the chosen aspect ratio */
.control-video { margin: 1.25rem 0; }
.cms-video { max-width: 900px; margin: 1.5rem auto; }
.cms-video-title { text-align: center; margin: 0 0 .75rem; }
.cms-video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.cms-video-embed.r-4x3  { aspect-ratio: 4 / 3; }
.cms-video-embed.r-21x9 { aspect-ratio: 21 / 9; }
.cms-video-embed.r-1x1  { aspect-ratio: 1 / 1; }
.cms-video-embed iframe, .cms-video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cms-video-facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; background: #000 center/cover no-repeat; display: flex; align-items: center; justify-content: center; }
.cms-video-facade::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.25); transition: background .15s; }
.cms-video-facade:hover::after, .cms-video-facade:focus-visible::after { background: rgba(0,0,0,.1); }
.cms-video-play { position: relative; z-index: 1; width: 68px; height: 48px; border-radius: 14px; background: var(--cms-primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,.35); transition: transform .15s; }
.cms-video-facade:hover .cms-video-play { transform: scale(1.06); }
.cms-video-play::before { content: ""; border-style: solid; border-width: 9px 0 9px 16px; border-color: transparent transparent transparent #fff; margin-left: 3px; }
.cms-video-caption { text-align: center; color: #6b7280; font-size: .9rem; margin-top: .6rem; }

/* Newsletter add-on: email-capture block */
.control-newsletter { margin: 1.5rem 0; }
.cms-newsletter { max-width: 640px; margin: 1.5rem auto; padding: 1.75rem; background: var(--cms-muted-bg, #f6f8fa); border-radius: 12px; text-align: center; }
.cms-newsletter-title { margin: 0 0 .4rem; }
.cms-newsletter-blurb { color: #5a6472; margin: 0 0 1rem; }
.cms-newsletter-fields { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.cms-newsletter-fields .form-control { flex: 1 1 220px; min-width: 0; }
.cms-newsletter-btn { flex: 0 0 auto; white-space: nowrap; }
.cms-newsletter-msg { min-height: 1.2em; margin-top: .6rem; font-size: .9rem; }
.cms-newsletter-msg.is-error { color: #d63939; }
.cms-newsletter-done { padding: .5rem 0; font-weight: 600; color: #2fb344; }
/* honeypot — kept in the layout but invisible/unfocusable for humans */
.cms-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Pricing-table add-on: a responsive row of plan cards */
.control-pricing { margin: 1.75rem 0; }
.cms-pricing { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; align-items: stretch; }
.cms-pricing-plan { position: relative; flex: 1 1 240px; max-width: 340px; display: flex; flex-direction: column;
    padding: 1.75rem 1.5rem; background: #fff; border: 1px solid #e6e8eb; border-radius: 14px; text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.05); }
.cms-pricing-plan.is-featured { border-color: var(--cms-accent, var(--primary, var(--cms-primary))); border-width: 2px;
    box-shadow: 0 12px 32px rgba(0,0,0,.12); transform: translateY(-6px); }
.cms-pricing-badge { position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); white-space: nowrap;
    background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; font-size: .72rem; font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase; padding: .3rem .8rem; border-radius: 999px; }
.cms-pricing-name { margin: .25rem 0 .5rem; font-size: 1.25rem; }
.cms-pricing-price { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.cms-pricing-period { font-size: .95rem; font-weight: 500; color: #8b94a0; }
.cms-pricing-tagline { color: #6b7280; margin: .5rem 0 1rem; }
/* Reserve equal height for the price block (the custom card has no setup/year-1 lines) and the description, so the
   feature checklists start at the same height on every card. Dropped when the cards stack on mobile. */
.cms-pricing-money { min-height: 7rem; }
.cms-pricing-desc { min-height: 4rem; }
@media (max-width: 640px) { .cms-pricing-money, .cms-pricing-desc { min-height: 0; } }
.cms-pricing-features { list-style: none; padding: 0; margin: 0 0 1.25rem; text-align: left; flex: 1 1 auto; }
.cms-pricing-features li { padding: .4rem 0 .4rem 1.6rem; position: relative; border-bottom: 1px solid #f1f3f5; }
.cms-pricing-features li.inc::before { content: "✓"; position: absolute; left: 0; color: #2fb344; font-weight: 700; }
.cms-pricing-features li.exc { color: #aab2bd; }
.cms-pricing-features li.exc::before { content: "✕"; position: absolute; left: 0; color: #cbd2d9; }
.cms-pricing-btn { margin-top: auto; align-self: stretch; }

/* Stats-counter add-on */
.control-stats { margin: 1.75rem 0; }
.cms-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; text-align: center; }
.cms-stat { flex: 1 1 160px; max-width: 240px; padding: 1rem; }
.cms-stat-icon { font-size: 2rem; color: var(--cms-accent, var(--primary, var(--cms-primary))); display: block; margin-bottom: .4rem; }
.cms-stat-value { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--cms-heading, #1f2d3d); }
.cms-stat-label { margin-top: .35rem; color: #6b7280; font-weight: 500; }

/* Logo-wall add-on */
.control-logowall { margin: 1.75rem 0; }
.cms-logowall { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: center; justify-content: center; }
.cms-logo { display: inline-flex; align-items: center; }
.cms-logo img { max-height: 48px; max-width: 160px; object-fit: contain; filter: grayscale(1); opacity: .65;
    transition: filter .2s, opacity .2s; }
.cms-logo:hover img { filter: grayscale(0); opacity: 1; }

/* Countdown-timer add-on */
.control-countdown { margin: 1.75rem 0; }
.cms-countdown { text-align: center; }
.cms-cd-heading { margin: 0 0 1rem; }
.cms-cd-units { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.cms-cd-unit { min-width: 76px; padding: .9rem .6rem; background: var(--cms-heading, #1f2d3d); color: #fff; border-radius: 10px; }
.cms-cd-num { display: block; font-size: 2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.cms-cd-lbl { display: block; margin-top: .35rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
.cms-cd-done { font-size: 1.25rem; font-weight: 600; color: var(--cms-accent, var(--primary, var(--cms-primary))); }

/* Before/After add-on: image-comparison slider */
.control-beforeafter { margin: 1.75rem 0; }
.cms-ba { margin: 0; }
.cms-ba-heading { text-align: center; margin: 0 0 1rem; }
.cms-ba-frame { position: relative; max-width: 760px; margin: 0 auto; line-height: 0; border-radius: 10px; overflow: hidden; user-select: none; }
.cms-ba-frame img { display: block; width: 100%; }
.cms-ba-after { position: absolute; top: 0; left: 0; height: 100%; object-fit: cover; }
.cms-ba-line { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); transform: translateX(-50%); pointer-events: none; }
.cms-ba-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; transform: translate(-50%,-50%); border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.4); }
.cms-ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cms-ba-lbl { position: absolute; bottom: 12px; padding: .2rem .6rem; font-size: .72rem; font-weight: 600; color: #fff; background: rgba(0,0,0,.55); border-radius: 4px; line-height: 1.3; pointer-events: none; }
.cms-ba-lbl-before { left: 12px; }
.cms-ba-lbl-after  { right: 12px; }

/* Timeline / "How it works" add-on */
.control-timeline { margin: 1.75rem 0; }
.cms-timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; counter-reset: none; }
.cms-tl-step { position: relative; display: flex; gap: 1.1rem; padding: 0 0 1.75rem 0; align-items: flex-start; }
/* Connector runs down the centre of the 48px marker (24px), threading center-to-center through the markers so
   the icons sit ON one continuous line (the opaque marker circles cover the line passing behind them). */
.cms-tl-step::before { content: ""; position: absolute; left: 24px; top: 24px; bottom: -24px; width: 2px; margin-left: -1px; background: #e3e8ee; }
.cms-tl-step:last-child::before { display: none; }
.cms-tl-marker { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center;
    justify-content: center; font-size: 1.2rem; font-weight: 800; color: #fff;
    background: var(--cms-accent, var(--primary, var(--cms-primary))); box-shadow: 0 2px 8px rgba(0,0,0,.15); z-index: 1; }
/* Line the TITLE up with the icon: the title row matches the 48px marker height with its text vertically centred,
   so the icon centre aligns with the heading (description flows underneath). */
.cms-tl-body { display: flex; flex-direction: column; }
.cms-tl-title { margin: 0 !important; font-size: 1.15rem; line-height: 1.3; min-height: 48px; display: flex; align-items: center; }
.cms-tl-text { margin: .15rem 0 0; color: #6b7280; line-height: 1.5; }
/* Optional per-step date. */
.cms-tl-date { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--cms-accent, var(--primary, var(--cms-primary))); margin: 0 0 .1rem; }

/* Centered / alternating layout (desktop): a centre line with steps zig-zagging left and right.
   Falls back to the vertical layout on narrow screens. */
@media (min-width: 768px) {
    .cms-timeline-centered { max-width: 920px; position: relative; }
    .cms-timeline-centered::before { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; margin-left: -1px; background: #e3e8ee; }
    .cms-timeline-centered .cms-tl-step { display: block; width: 50%; position: relative; padding: 0 0 2rem 0; }
    .cms-timeline-centered .cms-tl-step::before { display: none; }
    .cms-timeline-centered .cms-tl-left  { left: 0;   padding-right: 2.75rem; text-align: right; }
    .cms-timeline-centered .cms-tl-right { left: 50%; padding-left: 2.75rem; }
    .cms-timeline-centered .cms-tl-marker { position: absolute; top: 0; }
    .cms-timeline-centered .cms-tl-left  .cms-tl-marker { right: -24px; }
    .cms-timeline-centered .cms-tl-right .cms-tl-marker { left: -24px; }
    .cms-timeline-centered .cms-tl-body { display: block; }
    .cms-timeline-centered .cms-tl-left .cms-tl-body { align-items: flex-end; }
    .cms-timeline-centered .cms-tl-title { min-height: 0 !important; display: block; }
}

/* Multi-location map add-on */
.control-locationsmap { margin: 1.5rem 0; }
.cms-locs-map { height: 380px; width: 100%; border-radius: 10px; overflow: hidden; margin-bottom: 1.25rem; background: #eef2f7; }
.cms-locs-searchwrap { position: relative; max-width: 420px; margin: 0 0 1rem; }
.cms-locs-searchwrap .ti { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: #9ca3af; }
.cms-locs-search { width: 100%; padding: .55rem .8rem .55rem 2.1rem; border: 1px solid #d7dde5; border-radius: 8px; font-size: .95rem; }
.cms-locs-search:focus { outline: none; border-color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-locs-none { color: #6b7280; padding: .5rem 0; }
.cms-locs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.cms-loc { border: 1px solid #eef0f2; border-radius: 10px; padding: 1rem 1.1rem; }
.cms-loc-name { font-weight: 700; font-size: 1.05rem; }
.cms-loc-addr { color: #4b5563; margin-top: .25rem; white-space: pre-line; }
.cms-loc-hours { color: #6b7280; font-size: .9rem; margin-top: .25rem; }
.cms-loc-phone { display: inline-block; margin-top: .4rem; text-decoration: none; font-weight: 600; color: inherit; }
.cms-loc-dir { display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem; font-weight: 600; text-decoration: none; color: var(--cms-accent, var(--primary, var(--cms-primary))); }

/* Single-product buy block add-on */
.control-productbuy { margin: 1.5rem 0; }
.cms-buy { display: flex; gap: 1.25rem; align-items: center; border: 1px solid #eef0f2; border-radius: 12px; padding: 1rem; max-width: 520px; }
.cms-buy-imgwrap { flex: 0 0 auto; width: 120px; height: 120px; border-radius: 8px; overflow: hidden; background: #f6f7f9; }
.cms-buy-img { width: 100%; height: 100%; object-fit: cover; }
.cms-buy-body { flex: 1 1 auto; min-width: 0; }
.cms-buy-name { display: block; font-weight: 700; font-size: 1.1rem; text-decoration: none; color: inherit; }
.cms-buy-price { font-weight: 800; color: var(--cms-accent, var(--primary, var(--cms-primary))); margin: .25rem 0 .75rem; font-size: 1.15rem; }
.cms-buy-form { margin: 0; }
.cms-buy-btn { display: inline-block; background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff !important; border: 0; padding: .6rem 1.4rem; border-radius: 8px; font-weight: 700; text-decoration: none; cursor: pointer; }
.cms-buy-btn:hover, .cms-buy-btn:focus { color: #fff !important; filter: brightness(.95); }
.cms-buy-out { background: #6b7280; }

/* Product category grid add-on */
.control-catgrid { margin: 1.75rem 0; }
.cms-catgrid-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 1rem; }
.cms-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.cms-catgrid-card { text-decoration: none; color: inherit; border: 1px solid #eef0f2; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.cms-catgrid-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.cms-catgrid-imgwrap { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #f6f7f9; }
.cms-catgrid-img { width: 100%; height: 100%; object-fit: cover; }
.cms-catgrid-noimg { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2rem; background: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-catgrid-name { padding: .7rem .85rem; font-weight: 700; text-align: center; }

/* Featured products carousel add-on */
.control-prodfeed { margin: 1.75rem 0; }
.cms-prodfeed-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 1rem; }
.cms-prodfeed { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: none; -ms-overflow-style: none; }
.cms-prodfeed::-webkit-scrollbar { display: none; }
/* Arrow navigation injected by cms-content.js around each .cms-prodfeed carousel. */
.cms-prodfeed-wrap { position: relative; }
.cms-prodfeed-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px;
    border-radius: 50%; border: 1px solid #e3e8ef; background: #fff; color: #1f2937; cursor: pointer; font-size: 1.4rem;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(16,24,40,.18); }
.cms-prodfeed-nav:hover { background: #f6fbff; border-color: var(--cms-accent, var(--primary, var(--cms-primary))); color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-prodfeed-prev { left: -8px; } .cms-prodfeed-next { right: -8px; }
.cms-prodfeed-nav[hidden] { display: none; }
.cms-prodfeed-card { position: relative; scroll-snap-align: start; text-decoration: none; color: inherit; border: 1px solid #eef0f2; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.cms-prodfeed-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); text-decoration: none; }
.cms-prodfeed-card:hover .cms-prodfeed-name { text-decoration: none; }

/* ── No-underline sweep ─────────────────────────────────────────────────────
   The Porto theme underlines every <a> on :hover. On buttons, cards and tiles
   that reads as a glitch, not an affordance. Kill it on those structural links
   (plain inline prose links inside richtext keep their underline). Pair it with
   a subtle lift + active "press" cue so hover/click still feel responsive. */
.btn:hover, .btn:focus, .btn:active,
.cms-btn:hover, .cms-btn:focus,
a.cms-as-card--link:hover, .cms-as-card--link:hover .cms-as-name,
.cms-catgrid-card:hover, .cms-catgrid-card:hover .cms-catgrid-name,
.control-quicklinks .quicklink:hover, .control-quicklinks .quicklink:hover .quicklink-title,
.control-lightbox .lb-item:hover,
.proj-card:hover, .proj-card:hover .proj-title,
.pc-card:hover, .pc-title a:hover, .pc-more:hover, .pc-side-a:hover,
.cms-postfeed-card:hover, .cms-postfeed-card:hover .cms-postfeed-h, .cms-postfeed-card:hover .cms-postfeed-date, .cms-postfeed-more:hover,
.cms-side-cats a:hover, .cms-cat-all a:hover, .cms-promo-cta:hover,
.custom-card-info a:hover, .custom-card-info a:hover * { text-decoration: none !important; }
/* Site-wide: the owner dislikes the theme's hover underline ANYWHERE on the public site, so remove it
   across the whole public body (header, content, sidebars, footer, blog widgets). This ends the
   per-component whack-a-mole; links stay distinguished by colour, not an underline. */
.body a:hover, .body a:focus { text-decoration: none !important; }
.cms-as-card--link, .cms-catgrid-card, .proj-card { transition: transform .15s ease, box-shadow .15s ease; }
.cms-as-card--link:active, .cms-catgrid-card:active, .proj-card:active,
.cms-prodfeed-card:active, .subpage-card:active, .pc-card:active { transform: translateY(1px) scale(.997); }

/* Best-sellers rank badge (top-left of each card). */
.cms-bestseller-rank { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: .75rem; font-weight: 800; line-height: 1;
    padding: .28rem .5rem; border-radius: 999px; color: #fff; background: var(--cms-accent, var(--primary, var(--cms-primary))); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
/* New-arrivals "New" tag (top-left of each card). */
.cms-newarrival-tag { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    line-height: 1; padding: .28rem .5rem; border-radius: 999px; color: #fff; background: #16a34a; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
/* Order status lookup. */
.cms-orderstatus { max-width: 560px; }
.cms-ordstat-title { margin: 0 0 .35rem; }
.cms-ordstat-intro { color: #6b7280; margin: 0 0 1rem; }
.cms-ordstat-form { display: flex; flex-wrap: wrap; gap: .6rem; }
.cms-ordstat-input { flex: 1 1 180px; padding: .55rem .8rem; border: 1px solid #d7dde5; border-radius: 8px; font-size: .95rem; }
.cms-ordstat-input:focus { outline: none; border-color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-ordstat-btn { padding: .55rem 1.3rem; border-radius: 8px; font-weight: 700; border: 0; color: #fff !important;
    background: var(--cms-accent, var(--primary, var(--cms-primary))); cursor: pointer; }
.cms-ordstat-result { margin-top: 1rem; }
.cms-ordstat-card { border: 1px solid #e8edf3; border-radius: 10px; padding: 1rem 1.2rem; background: #fff; }
.cms-ordstat-state { font-size: 1.15rem; font-weight: 800; color: var(--cms-accent, var(--primary, var(--cms-primary))); margin-bottom: .35rem; }
.cms-ordstat-line { color: #374151; }
.cms-ordstat-msg { color: #6b7280; }
.cms-ordstat-none { color: #b91c1c; }
/* Loyalty points result card */
.cms-loyalty-card { border: 1px solid #e8edf3; border-radius: 12px; padding: 1.2rem 1.4rem; background: #fff; text-align: center; max-width: 260px; }
.cms-loyalty-num { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-loyalty-lbl { color: #6b7280; margin-top: .25rem; }
/* Survey / feedback */
.cms-survey { max-width: 680px; margin: 1.5rem auto; padding: 1.85rem 2rem; border: 1px solid #e6eaf0;
    border-radius: 14px; background: #fff; box-shadow: 0 6px 24px rgba(16,24,40,.06); }
.cms-survey-title { margin: 0 0 .3rem; }
.cms-survey-title::after { content: ""; display: block; width: 44px; height: 3px; margin-top: .55rem; border-radius: 2px;
    background: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-survey-intro { color: #6b7280; margin: .35rem 0 1.5rem; }
.cms-survey-field { display: block; margin: 0 0 1.3rem; }
.cms-survey-label { display: block; font-weight: 700; margin-bottom: .55rem; color: #1f2733; }
.cms-survey-req { color: #d92d20; }
.cms-survey-field input[type=text], .cms-survey-field input[type=email], .cms-survey-field input[type=tel],
.cms-survey-field input[type=number], .cms-survey-field input[type=date], .cms-survey-field textarea, .cms-survey-field select {
    width: 100%; padding: .6rem .8rem; border: 1px solid #d8dee6; border-radius: 8px; font: inherit; background: #fff; transition: border-color .12s, box-shadow .12s; }
.cms-survey-field input:focus, .cms-survey-field textarea:focus, .cms-survey-field select:focus {
    outline: 0; border-color: var(--cms-accent, var(--primary, var(--cms-primary)));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cms-accent, var(--primary, var(--cms-primary))) 18%, transparent); }
/* Choice options as selectable rows that highlight on hover/selection. */
.cms-survey-opts { display: flex; flex-direction: column; gap: .5rem; }
.cms-survey-opt { font-weight: 400; display: flex; gap: .6rem; align-items: center; padding: .6rem .85rem;
    border: 1px solid #e6eaf0; border-radius: 9px; cursor: pointer; transition: border-color .12s, background .12s; }
.cms-survey-opt:hover { border-color: var(--cms-accent, var(--primary, var(--cms-primary))); background: #f8fafc; }
.cms-survey-opt:has(input:checked) { border-color: var(--cms-accent, var(--primary, var(--cms-primary)));
    background: color-mix(in srgb, var(--cms-accent, var(--primary, var(--cms-primary))) 8%, #fff); }
.cms-survey-rating { display: inline-flex; gap: .25rem; }
.cms-survey-star { cursor: pointer; line-height: 1; }
.cms-survey-star input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cms-survey-star .ti { font-size: 1.9rem; color: #d7dde5; transition: color .1s, transform .1s; }
.cms-survey-star:hover .ti { transform: scale(1.12); }
.cms-survey-star.filled .ti, .cms-survey-star input:checked + .ti { color: #f5b301; }
.cms-survey .form-submit { background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff !important; border: 0;
    padding: .7rem 1.8rem; border-radius: 8px; font-weight: 700; cursor: pointer; margin-top: .4rem; }
.cms-survey .form-submit:hover { filter: brightness(.95); }
/* Product finder quiz */
.cms-quiz { max-width: 640px; margin: 0 auto; text-align: center; }
.cms-quiz-title { margin: 0 0 .35rem; }
.cms-quiz-intro { color: #6b7280; margin: 0 0 1.4rem; }
.cms-quiz-progress { height: 6px; background: #eef1f5; border-radius: 99px; overflow: hidden; margin: 0 0 1.6rem; }
.cms-quiz-bar { height: 100%; width: 0; background: var(--cms-accent, var(--primary, var(--cms-primary))); transition: width .25s ease; }
.cms-quiz-q { font-size: 1.3rem; font-weight: 700; margin: 0 0 1.2rem; }
.cms-quiz-opts { display: flex; flex-direction: column; gap: .6rem; }
.cms-quiz-opt { display: block; width: 100%; padding: .9rem 1.1rem; border: 2px solid #e3e8ef;
    border-radius: 12px; background: #fff; font: inherit; font-weight: 600; color: #1f2937; cursor: pointer;
    text-align: left; transition: border-color .12s, background .12s, transform .06s; }
.cms-quiz-opt:hover { border-color: var(--cms-accent, var(--primary, var(--cms-primary))); background: #f6fbff; }
.cms-quiz-opt:active { transform: scale(.99); }
.cms-quiz-result { padding: 1.5rem; border: 1px solid #e3e8ef; border-radius: 14px; background: #f8fafc; }
.cms-quiz-result-head { font-size: 1.35rem; font-weight: 800; margin-bottom: .5rem; }
.cms-quiz-result-body { color: #374151; font-size: 1.05rem; }
.cms-quiz-cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; padding: .7rem 1.6rem;
    background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff !important; border-radius: 99px;
    font-weight: 700; text-decoration: none; }
.cms-quiz-cta:hover { filter: brightness(.95); }
.cms-quiz-restart { display: inline-block; margin-top: 1rem; margin-left: .75rem; background: none; border: 0;
    color: #6b7280; font: inherit; cursor: pointer; }
.cms-quiz-restart:hover { color: #1f2937; text-decoration: underline; }
/* Lead-magnet (gated download) */
.cms-leadmagnet { margin: 1.5rem 0; }
.cms-lm-card { display: flex; gap: 1.75rem; align-items: center; border: 1px solid #e3e8ef; border-radius: 16px;
    background: #fff; padding: 1.75rem; box-shadow: 0 6px 24px rgba(16, 24, 40, .06); }
.cms-lm-media { flex: 0 0 200px; max-width: 200px; }
.cms-lm-media img { width: 100%; height: auto; border-radius: 10px; display: block; }
.cms-lm-body { flex: 1 1 auto; min-width: 0; }
.cms-lm-title { margin: 0 0 .4rem; font-size: 1.4rem; }
.cms-lm-intro { color: #4b5563; margin: 0 0 1.1rem; }
.cms-lm-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; }
.cms-lm-input { flex: 1 1 200px; min-width: 0; padding: .7rem .9rem; border: 1px solid #ced4da; border-radius: 8px; font: inherit; }
.cms-lm-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.4rem; border: 0; border-radius: 8px;
    background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff !important; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cms-lm-btn:hover { filter: brightness(.95); }
.cms-lm-btn:disabled { opacity: .6; cursor: default; }
.cms-lm-success { margin-top: 1rem; padding: .9rem 1.1rem; border-radius: 10px; background: #ecfdf3; color: #067647;
    font-weight: 600; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cms-lm-success.cms-lm-err { background: #fef3f2; color: #b42318; }
.cms-lm-dl { color: var(--cms-accent, var(--primary, var(--cms-primary))) !important; font-weight: 700; text-decoration: underline; }
@media (max-width: 640px) { .cms-lm-card { flex-direction: column; align-items: stretch; } .cms-lm-media { max-width: none; flex-basis: auto; } }

/* Live sales / social proof toast */
.cms-sp-toast { position: fixed; z-index: 1200; display: flex; gap: .7rem; align-items: center; max-width: 320px;
    background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; padding: .8rem 1rem; box-shadow: 0 10px 34px rgba(16,24,40,.16);
    opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .35s; pointer-events: none; }
.cms-sp-toast.show { opacity: 1; transform: translateY(0); }
.cms-sp-bottom-left { left: 1.25rem; bottom: 1.25rem; }
.cms-sp-bottom-right { right: 1.25rem; bottom: 1.25rem; }
.cms-sp-top-left { left: 1.25rem; top: 1.25rem; }
.cms-sp-top-right { right: 1.25rem; top: 1.25rem; }
.cms-sp-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 4px rgba(18,183,106,.18); }
.cms-sp-body { font-size: .9rem; line-height: 1.3; }
.cms-sp-loc { font-weight: 400; color: #6b7280; }
.cms-sp-thing { color: #374151; }
.cms-sp-time { color: #98a2b3; font-size: .78rem; margin-top: .1rem; }

/* Referral widget */
.cms-referral { margin: 1.5rem 0; }
.cms-ref-card { border: 1px solid #e3e8ef; border-radius: 16px; background: #fff; padding: 1.75rem; max-width: 560px; }
.cms-ref-title { margin: 0 0 .35rem; }
.cms-ref-intro { color: #4b5563; margin: 0 0 1.1rem; }
.cms-ref-copy { display: flex; gap: .5rem; }
.cms-ref-link { flex: 1 1 auto; min-width: 0; padding: .65rem .8rem; border: 1px solid #ced4da; border-radius: 8px; font: inherit; background: #f8fafc; }
.cms-ref-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1.1rem; border: 0; border-radius: 8px; white-space: nowrap;
    background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; font-weight: 700; cursor: pointer; }
.cms-ref-btn:hover { filter: brightness(.95); }
.cms-ref-share { display: flex; gap: .6rem; margin-top: 1rem; }
.cms-ref-s { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%;
    color: #fff !important; font-size: 1.2rem; text-decoration: none; }
.cms-ref-fb { background: #1877f2; } .cms-ref-x { background: #111; } .cms-ref-wa { background: #25d366; } .cms-ref-em { background: #6b7280; }
.cms-ref-s:hover { filter: brightness(1.08); }

/* Donation button */
.cms-donation { margin: 1.5rem 0; }
.cms-don-card { border: 1px solid #e3e8ef; border-radius: 16px; background: #fff; padding: 1.75rem; max-width: 560px; text-align: center; }
.cms-don-title { margin: 0 0 .35rem; }
.cms-don-intro { color: #4b5563; margin: 0 0 1.2rem; }
.cms-don-amounts { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; margin-bottom: 1.2rem; }
.cms-don-amt { padding: .6rem 1.1rem; border: 2px solid #e3e8ef; border-radius: 10px; background: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.cms-don-amt:hover { border-color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-don-amt.selected { border-color: var(--cms-accent, var(--primary, var(--cms-primary))); background: #f0f9ff; color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-don-custom { display: inline-flex; align-items: center; gap: .2rem; border: 2px solid #e3e8ef; border-radius: 10px; padding: 0 .6rem; font-weight: 700; }
.cms-don-custom-input { width: 84px; border: 0; padding: .55rem .2rem; font: inherit; font-weight: 700; }
.cms-don-custom-input:focus { outline: none; }
.cms-don-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .8rem 2rem; border-radius: 99px;
    background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff !important; font-weight: 800; text-decoration: none; }
.cms-don-btn:hover { filter: brightness(.95); }

/* Age-verification gate */
.cms-agegate { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .82); backdrop-filter: blur(4px); padding: 1.25rem; }
.cms-age-box { background: #fff; border-radius: 18px; padding: 2.4rem 2rem; max-width: 460px; width: 100%; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.cms-age-title { margin: 0 0 .6rem; font-size: 1.6rem; }
.cms-age-msg { color: #4b5563; margin: 0 0 1.6rem; }
.cms-age-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.cms-age-yes { padding: .8rem 1.8rem; border: 0; border-radius: 10px; background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; font-weight: 700; cursor: pointer; }
.cms-age-no { padding: .8rem 1.8rem; border: 1px solid #d0d5dd; border-radius: 10px; background: #fff; color: #374151; font-weight: 700; cursor: pointer; }
.cms-age-yes:hover { filter: brightness(.95); } .cms-age-no:hover { background: #f3f4f6; }

/* Sortable data table */
.cms-dtable-wrap { margin: 1.5rem 0; }
.cms-dtable-title { margin: 0 0 .35rem; }
.cms-dtable-intro { color: #6b7280; margin: 0 0 1rem; }
.cms-dtable-search { width: 100%; max-width: 320px; margin-bottom: .8rem; padding: .55rem .8rem; border: 1px solid #ced4da; border-radius: 8px; font: inherit; }
.cms-dtable-scroll { overflow-x: auto; border: 1px solid #e3e8ef; border-radius: 12px; }
.cms-dtable { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cms-dtable th, .cms-dtable td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid #eef1f5; }
/* Accent header bar (white on the theme colour) so the table reads as a polished comparison, not a plain grid. */
.cms-dtable thead th { position: sticky; top: 0; z-index: 1; background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; font-weight: 700; cursor: pointer; user-select: none; white-space: nowrap; }
.cms-dtable thead th:hover { filter: brightness(1.06); }
.cms-dtable thead th .ti { opacity: .65; margin-left: .25rem; font-size: .9rem; }
.cms-dtable thead th.sorted-asc .ti, .cms-dtable thead th.sorted-desc .ti { opacity: 1; }
/* First column reads as the row label. */
.cms-dtable tbody td:first-child { font-weight: 600; color: #1f2733; }
/* Zebra striping + hover for scannability. */
.cms-dtable tbody tr:nth-child(even) { background: #f7f9fb; }
.cms-dtable tbody tr:hover { background: #eef4fb; }
.cms-dtable tbody tr:last-child td { border-bottom: 0; }

/* PDF inline viewer */
.cms-pdfviewer { margin: 1.5rem 0; }
.cms-pdf-title { margin: 0 0 .6rem; }
.cms-pdf-frame { width: 100%; border: 1px solid #e3e8ef; border-radius: 12px; background: #f3f4f6; }
.cms-pdf-dl { margin-top: .7rem; }
.cms-pdf-dl a { display: inline-flex; align-items: center; gap: .4rem; color: var(--cms-accent, var(--primary, var(--cms-primary))); font-weight: 600; text-decoration: none; }
.cms-pdf-dl a:hover { text-decoration: underline; }

/* Audio / podcast player */
.cms-audio { margin: 1.5rem 0; }
.cms-audio-title { margin: 0 0 .35rem; }
.cms-audio-intro { color: #6b7280; margin: 0 0 1rem; }
.cms-audio-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.cms-audio-item { border: 1px solid #e3e8ef; border-radius: 12px; background: #fff; padding: 1rem 1.1rem; }
.cms-audio-name { display: flex; align-items: center; gap: .45rem; font-weight: 700; margin-bottom: .6rem; }
.cms-audio-player { width: 100%; }

/* Audio library / podcast player */
.cms-lib { margin: 1.5rem 0; }
.cms-lib-title { margin: 0 0 .35rem; }
.cms-lib-intro { color: #6b7280; margin: 0 0 1.1rem; }
/* Inline now-playing player: inserted just above the played track and expanded (pushes the list down). */
.cms-lib-player { display: flex; align-items: center; gap: .9rem;
    /* Player colour: the per-player accent (--cms-lib-accent) if set, else a dark bar tinted toward the theme. */
    background: var(--cms-lib-accent, color-mix(in srgb, var(--cms-accent, var(--cms-primary, #206bc4)) 28%, #0b1220)); color: #fff;
    border-radius: 10px; overflow: hidden; max-height: 0; opacity: 0; padding: 0 1rem; margin: 0;
    /* Slots inline directly beneath the track that's playing (moved there by JS), not docked to the viewport. */
    transition: max-height .3s ease, opacity .25s ease, padding .3s ease, margin .3s ease; }
.cms-lib-player.is-open { max-height: 130px; opacity: 1; padding: .6rem 1rem; margin: .4rem 0; box-shadow: 0 6px 18px rgba(16,24,40,.18); }
.cms-lib-player[hidden] { display: none; }
/* Category dropdown sits next to the search box, matching its size. */
.cms-lib-cat-select, .cms-lib-sort { flex: 0 0 200px; max-width: 100%; padding: .55rem .8rem; border: 1px solid #ced4da; border-radius: 8px; font: inherit; background: #fff; cursor: pointer; }
.cms-lib-np-cover { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.cms-lib-np { flex: 0 0 auto; min-width: 0; max-width: 38%; }
.cms-lib-np-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-lib-np-artist { font-size: .85rem; color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-lib-audio { flex: 1 1 auto; max-width: 720px; height: 38px; }
.cms-lib-controls { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: 1rem; }
.cms-lib-search { flex: 0 0 240px; max-width: 100%; padding: .55rem .8rem; border: 1px solid #ced4da; border-radius: 8px; font: inherit; }
.cms-lib-cats { display: flex; flex-wrap: wrap; gap: .4rem; }
.cms-lib-cat { padding: .4rem .9rem; border: 1px solid #d0d5dd; border-radius: 999px; background: #fff; font: inherit; font-size: .9rem; cursor: pointer; }
.cms-lib-cat:hover { border-color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-lib-cat.is-active { background: var(--cms-accent, var(--primary, var(--cms-primary))); border-color: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; }
.cms-lib-list { list-style: none; margin: 0; padding: 0; border: 1px solid #e3e8ef; border-radius: 12px; overflow: hidden; }
.cms-lib-item { display: flex; align-items: center; gap: .85rem; padding: .7rem .9rem; border-top: 1px solid #eef1f5; }
.cms-lib-item:first-child { border-top: 0; }
.cms-lib-item.is-playing { background: #f0f9ff; }
.cms-lib-play { flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--cms-lib-accent, var(--cms-accent, var(--primary, var(--cms-primary))));
    color: #fff; font-size: 1.05rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
/* Grid layout: tracks render as cards in a responsive grid (non-list). */
.cms-lib-grid .cms-lib-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .9rem; border: 0; }
.cms-lib-grid .cms-lib-item { flex-direction: column; align-items: stretch; gap: .55rem; border: 1px solid #e3e8ef; border-top: 1px solid #e3e8ef; border-radius: 12px; padding: .9rem; }
.cms-lib-grid .cms-lib-item .cms-lib-cover { width: 100%; height: 140px; }
.cms-lib-grid .cms-lib-item .cms-lib-meta { order: 3; }
.cms-lib-grid .cms-lib-item .cms-lib-play { order: 4; align-self: flex-start; }
.cms-lib-grid .cms-lib-item .cms-lib-dur, .cms-lib-grid .cms-lib-item .cms-lib-dl { order: 5; }
.cms-lib-play:hover { filter: brightness(.95); }
.cms-lib-item.is-playing .cms-lib-play { background: #12b76a; }
.cms-lib-cover { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.cms-lib-meta { flex: 1 1 auto; min-width: 0; }
.cms-lib-track-title { font-weight: 600; }
.cms-lib-sub { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .85rem; color: #6b7280; margin-top: .15rem; }
.cms-lib-badge { background: #eef2ff; color: #4338ca; border-radius: 999px; padding: .05rem .55rem; font-weight: 600; font-size: .78rem; }
.cms-lib-dur { color: #98a2b3; font-variant-numeric: tabular-nums; font-size: .9rem; flex: 0 0 auto; }
.cms-lib-dl { flex: 0 0 auto; color: #98a2b3; font-size: 1.15rem; text-decoration: none; padding: .25rem; }
.cms-lib-dl:hover { color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-lib-none { color: #6b7280; padding: 1rem; text-align: center; }

/* Currency switcher */
.cms-currency { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }
.cms-currency-lbl { display: inline-flex; align-items: center; gap: .4rem; color: inherit; }
.cms-currency-lbl .ti { color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-currency-select { padding: .4rem .6rem; border: 1px solid #ced4da; border-radius: 8px; font: inherit; background: #fff; cursor: pointer; }
.cms-currency-note { color: #6b7280; font-size: .82rem; }
/* Global (template) currency switcher — a small fixed pill, top-right, off by default. */
.cms-currency-global { position: fixed; top: .75rem; right: .9rem; z-index: 1080; margin: 0;
    background: #fff; border: 1px solid #e3e8ef; border-radius: 999px; padding: .15rem .5rem;
    box-shadow: 0 4px 14px rgba(16,24,40,.14); }
.cms-currency-global .cms-currency-select { border: 0; background: transparent; padding: .25rem .3rem; cursor: pointer; }
@media (max-width: 640px) { .cms-currency-global { top: auto; bottom: .75rem; left: .75rem; right: auto; } }
.cms-approx { cursor: help; }   /* converted (approximate) price — title tooltip carries the disclaimer */
@media (max-width: 600px) { .cms-lib-np { display: none; } .cms-lib-cover { display: none; } }

/* Free-shipping progress bar */
.cms-freeship { margin: 1rem 0; max-width: 560px; }
.cms-fs-msg { font-weight: 600; margin-bottom: .5rem; color: #1f2937; }
.cms-freeship.met .cms-fs-msg { color: #067647; }
.cms-fs-track { height: 10px; background: #eef1f5; border-radius: 99px; overflow: hidden; }
.cms-fs-fill { height: 100%; width: 0; border-radius: 99px; background: var(--cms-accent, var(--primary, var(--cms-primary))); transition: width .4s ease; }
.cms-freeship.met .cms-fs-fill { background: #12b76a; }

/* Delivery ETA / cutoff timer */
.cms-deliveryeta { margin: 1rem 0; display: flex; flex-direction: column; gap: .4rem; max-width: 560px; }
.cms-deliveryeta > div { display: flex; align-items: center; gap: .5rem; font-size: .98rem; }
.cms-eta-cutoff { font-weight: 700; color: #b54708; }
.cms-eta-cutoff .ti { color: #f79009; }
.cms-eta-date { color: #374151; }
.cms-eta-date .ti { color: var(--cms-accent, var(--primary, var(--cms-primary))); }

/* Delivery-area postcode checker */
.cms-delcheck { margin: 1.5rem 0; }
.cms-delcheck-card { border: 1px solid #e3e8ef; border-radius: 16px; background: #fff; padding: 1.75rem; max-width: 520px; }
.cms-delcheck-title { margin: 0 0 .35rem; }
.cms-delcheck-intro { color: #4b5563; margin: 0 0 1rem; }
.cms-delcheck-row { display: flex; gap: .5rem; }
.cms-delcheck-input { flex: 1 1 auto; min-width: 0; padding: .65rem .8rem; border: 1px solid #ced4da; border-radius: 8px; font: inherit; }
.cms-delcheck-btn { padding: .65rem 1.3rem; border: 0; border-radius: 8px; background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; font-weight: 700; cursor: pointer; }
.cms-delcheck-btn:hover { filter: brightness(.95); }
.cms-delcheck-result { margin-top: .9rem; padding: .75rem 1rem; border-radius: 10px; font-weight: 600; }
.cms-delcheck-result.is-ok { background: #ecfdf3; color: #067647; }
.cms-delcheck-result.is-no { background: #fef3f2; color: #b42318; }

/* Spin-to-win wheel */
.cms-spin { margin: 1.5rem 0; }
.cms-spin-card { border: 1px solid #e3e8ef; border-radius: 16px; background: #fff; padding: 1.75rem; max-width: 420px; margin: 0 auto; text-align: center; }
.cms-spin-title { margin: 0 0 .35rem; }
.cms-spin-intro { color: #4b5563; margin: 0 0 1.2rem; }
.cms-spin-stage { position: relative; width: 280px; height: 280px; margin: 0 auto 1.2rem; }
.cms-spin-wheel { position: absolute; inset: 0; border-radius: 50%; border: 6px solid #fff; box-shadow: 0 6px 24px rgba(16,24,40,.18), 0 0 0 3px #e3e8ef; }
.cms-spin-pointer { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0;
    border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 22px solid #1f2937; z-index: 3; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.cms-spin-cap { position: absolute; inset: 0; display: flex; justify-content: center; }
.cms-spin-cap span { display: block; margin-top: 16px; transform: rotate(0); transform-origin: center; color: #fff; font-weight: 700;
    font-size: .72rem; max-width: 92px; text-shadow: 0 1px 2px rgba(0,0,0,.35); line-height: 1.1; }
.cms-spin-spoke { position: absolute; left: 50%; top: 0; width: 1px; height: 50%; background: rgba(255,255,255,.55); transform-origin: bottom center; }
.cms-spin-email { width: 100%; max-width: 280px; padding: .6rem .8rem; border: 1px solid #ced4da; border-radius: 8px; font: inherit; margin-bottom: .7rem; }
.cms-spin-email.err { border-color: #d92d20; }
.cms-spin-btn { padding: .75rem 1.8rem; border: 0; border-radius: 99px; background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; font-weight: 800; cursor: pointer; }
.cms-spin-btn:hover { filter: brightness(.95); }
.cms-spin-btn:disabled { opacity: .6; cursor: default; }
.cms-spin-result { margin-top: 1rem; padding: 1rem; border-radius: 12px; background: #f8fafc; font-size: 1.05rem; }
.cms-spin-result.is-win { background: #ecfdf3; color: #065f46; }
.cms-spin-result.is-err { background: #fef3f2; color: #b42318; }
.cms-spin-code { display: inline-block; margin-left: .35rem; padding: .15rem .55rem; border: 1px dashed #12b76a; border-radius: 6px; font-weight: 800; letter-spacing: .03em; background: #fff; }

/* Back-in-stock notifier */
.cms-bis { margin: 1.5rem 0; }
.cms-bis-card { border: 1px solid #e3e8ef; border-radius: 16px; background: #fff; padding: 1.75rem; max-width: 520px; }
.cms-bis-title { margin: 0 0 .35rem; }
.cms-bis-prod { color: #b42318; font-weight: 600; margin: 0 0 .4rem; }
.cms-bis-intro { color: #4b5563; margin: 0 0 1rem; }
.cms-bis-form { display: flex; flex-wrap: wrap; gap: .5rem; }
.cms-bis-input { flex: 1 1 200px; min-width: 0; padding: .65rem .8rem; border: 1px solid #ced4da; border-radius: 8px; font: inherit; }
.cms-bis-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1.3rem; border: 0; border-radius: 8px; background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cms-bis-btn:hover { filter: brightness(.95); }
.cms-bis-instock { font-size: 1.1rem; color: #067647; font-weight: 600; display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.cms-bis-shop { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1.4rem; border-radius: 8px; background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff !important; font-weight: 700; text-decoration: none; }
.cms-bis-success { margin-top: 1rem; padding: .9rem 1.1rem; border-radius: 10px; background: #ecfdf3; color: #067647; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.cms-bis-success.cms-bis-err { background: #fef3f2; color: #b42318; }

/* Back-to-top button */
.cms-backtotop { position: fixed; bottom: 1.5rem; z-index: 1100; width: 46px; height: 46px; border: 0; border-radius: 50%;
    background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; font-size: 1.3rem; cursor: pointer;
    box-shadow: 0 6px 20px rgba(16,24,40,.25); display: flex; align-items: center; justify-content: center; }
.cms-backtotop[hidden] { display: none; }
.cms-btt-right { right: 1.5rem; } .cms-btt-left { left: 1.5rem; }
.cms-backtotop:hover { filter: brightness(.95); }

/* Dark-mode toggle button */
.cms-darkmode { position: fixed; bottom: 1.5rem; z-index: 1100; width: 46px; height: 46px; border: 0; border-radius: 50%;
    background: #1f2937; color: #fff; font-size: 1.25rem; cursor: pointer; box-shadow: 0 6px 20px rgba(16,24,40,.25);
    display: flex; align-items: center; justify-content: center; }
.cms-dm-right { right: 1.5rem; } .cms-dm-left { left: 1.5rem; }
/* Stack neatly if both back-to-top and dark-mode share the same corner. */
.cms-darkmode.cms-dm-right { bottom: 5.2rem; } .cms-darkmode.cms-dm-left { bottom: 5.2rem; }

/* ── Unified FAB stack ── when 2+ floating buttons share a corner, cms-content.js collects them into one
   vertical stack with a collapse toggle (state remembered in localStorage, default open). */
.cms-fabstack { position: fixed; bottom: 1.5rem; z-index: 1150; display: flex; flex-direction: row;
    align-items: center; gap: .6rem; }
/* Horizontal row: the collapse toggle sits at the corner, the buttons line up away from it. */
.cms-fabstack-right { right: 1.5rem; flex-direction: row; } .cms-fabstack-left { left: 1.5rem; flex-direction: row-reverse; }
/* Stacked buttons drop their own fixed positioning and just flow in the row. */
.cms-fabstack > .cms-fabstacked { position: static !important; inset: auto !important; margin: 0 !important; }
.cms-fabstack.is-collapsed > .cms-fabstacked { display: none !important; }
.cms-fabstack-toggle { width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer;
    background: #334155; color: #fff; font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.28); }
.cms-fabstack-toggle:hover { filter: brightness(1.1); }
/* Invert-based dark mode — works on any theme. Media + UI chrome are counter-inverted so photos, icons,
   floating buttons and overlay bars keep their true colours (the previous version inverted those too, which
   looked broken). Softer near-black background + a smooth transition; form controls/scrollbars follow. */
html.cms-dark { filter: invert(1) hue-rotate(180deg); background: #ededed; transition: filter .2s ease; }
html.cms-dark { color-scheme: dark; }
html.cms-dark img, html.cms-dark video, html.cms-dark picture, html.cms-dark iframe, html.cms-dark canvas, html.cms-dark svg,
html.cms-dark [style*="background-image"],
html.cms-dark .cms-darkmode, html.cms-dark .cms-backtotop, html.cms-dark .cms-a11y, html.cms-dark .cms-fabstack-toggle,
html.cms-dark .cms-fab, html.cms-dark #cms-edit,
html.cms-dark .cms-cookie, html.cms-dark .cms-agegate, html.cms-dark .control-announcement, html.cms-dark .cms-lightbox-overlay {
    filter: invert(1) hue-rotate(180deg); }
/* …but don't double-invert media that sits inside a counter-inverted container. */
html.cms-dark .cms-fab img, html.cms-dark .control-announcement img, html.cms-dark #cms-edit img,
html.cms-dark .cms-lightbox-overlay img { filter: none; }

/* Accessibility toolbar */
.cms-a11y { position: fixed; bottom: 1.5rem; z-index: 1150; }
.cms-a11y-left { left: 1.5rem; } .cms-a11y-right { right: 1.5rem; }
.cms-a11y-fab { width: 46px; height: 46px; border: 0; border-radius: 50%; background: #2c7be5; color: #fff; font-size: 1.4rem;
    cursor: pointer; box-shadow: 0 6px 20px rgba(16,24,40,.25); display: flex; align-items: center; justify-content: center; }
.cms-a11y-panel { position: absolute; bottom: 56px; min-width: 210px; background: #fff; border: 1px solid #e3e8ef;
    border-radius: 12px; box-shadow: 0 12px 34px rgba(16,24,40,.18); padding: .9rem; display: flex; flex-direction: column; gap: .5rem; }
.cms-a11y-left .cms-a11y-panel { left: 0; } .cms-a11y-right .cms-a11y-panel { right: 0; }
.cms-a11y-title { font-weight: 700; font-size: .95rem; margin-bottom: .2rem; }
.cms-a11y-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .9rem; }
.cms-a11y-btns { display: flex; gap: .35rem; }
.cms-a11y-btns button { width: 38px; height: 34px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; font-weight: 700; cursor: pointer; }
.cms-a11y-toggle, .cms-a11y-reset { text-align: left; padding: .5rem .7rem; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; font: inherit; cursor: pointer; }
.cms-a11y-toggle.on { background: #0a558c; color: #fff; border-color: #0a558c; }
.cms-a11y-reset { color: #b42318; text-align: center; }
/* Applied page-wide states */
/* High contrast: force ONE uniform scheme over the whole page (black bg, white text, yellow links) so theme
   sections — headers, footers, coloured bands — can't leave low-contrast pairs like yellow-on-white. Decorative
   background images are dropped so text over them stays readable; real images stay visible. */
html.cms-a11y-contrast, html.cms-a11y-contrast body { background: #000 !important; color: #fff !important; }
html.cms-a11y-contrast *:not(img):not(svg):not(picture):not(video) {
    background-color: #000 !important; background-image: none !important; color: #fff !important;
    border-color: #fff !important; box-shadow: none !important; text-shadow: none !important;
}
html.cms-a11y-contrast a, html.cms-a11y-contrast a *,
html.cms-a11y-contrast a:visited { color: #ffea00 !important; }
html.cms-a11y-contrast button, html.cms-a11y-contrast .btn,
html.cms-a11y-contrast input, html.cms-a11y-contrast select, html.cms-a11y-contrast textarea {
    border: 2px solid #fff !important; color: #fff !important; background-color: #000 !important;
}
html.cms-a11y-contrast a.btn, html.cms-a11y-contrast .btn:hover, html.cms-a11y-contrast button:hover { color: #ffea00 !important; }
html.cms-a11y-contrast :focus { outline: 3px solid #ffea00 !important; outline-offset: 2px; }
html.cms-a11y-contrast img, html.cms-a11y-contrast svg { background: transparent !important; }

/* Buttons should never get a hyperlink-style underline on hover; instead give a subtle "pressed" feedback on
   click (depress + dim). Covers CMS add-on buttons (CTA band, shared cms-btn) and the contact FAB icon links. */
.cms-btn, .cms-cta-btn, .cms-fab-item,
.cms-btn:hover, .cms-cta-btn:hover, .cms-fab-item:hover,
.cms-btn:focus, .cms-cta-btn:focus, .cms-fab-item:focus { text-decoration: none !important; }
.cms-btn, .cms-cta-btn { transition: transform .06s ease, filter .12s ease, box-shadow .12s ease; }
.cms-btn:active, .cms-cta-btn:active { transform: translateY(1px); filter: brightness(.93); box-shadow: inset 0 2px 5px rgba(0,0,0,.18); }
.cms-fab-item { transition: transform .06s ease; }
.cms-fab-item:active { transform: scale(.92); }
html.cms-a11y-ul a { text-decoration: underline !important; }
html.cms-a11y-readable, html.cms-a11y-readable body, html.cms-a11y-readable p, html.cms-a11y-readable li, html.cms-a11y-readable span, html.cms-a11y-readable a { font-family: Verdana, Arial, sans-serif !important; }

/* QR code */
.cms-qr { margin: 1.5rem 0; text-align: center; }
.cms-qr-title { margin: 0 0 .8rem; }
.cms-qr-img { display: inline-flex; align-items: center; justify-content: center; padding: 12px; background: #fff;
    border: 1px solid #e3e8ef; border-radius: 12px; box-shadow: 0 4px 14px rgba(16,24,40,.06); }
.cms-qr-img img { display: block; }
.cms-qr-caption { margin-top: .7rem; color: #6b7280; font-size: .95rem; }

/* Add-to-calendar */
.cms-addcal { margin: 1.5rem 0; border: 1px solid #e3e8ef; border-radius: 16px; background: #fff; padding: 1.5rem; max-width: 520px; }
.cms-addcal-head { font-weight: 700; display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.cms-addcal-head .ti { color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-addcal-meta { display: flex; flex-direction: column; gap: .2rem; margin-bottom: 1rem; color: #374151; }
.cms-addcal-meta strong { font-size: 1.1rem; }
.cms-addcal-meta span { color: #6b7280; font-size: .95rem; display: inline-flex; align-items: center; gap: .35rem; }
.cms-addcal-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.cms-addcal-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border: 1px solid #d0d5dd;
    border-radius: 8px; background: #fff; color: #1f2937 !important; font-weight: 600; text-decoration: none; }
.cms-addcal-btn:hover { border-color: var(--cms-accent, var(--primary, var(--cms-primary))); background: #f6fbff; }
/* List of upcoming events: one header, stacked event cards. */
.cms-addcal-list { max-width: 560px; margin: 1.5rem 0; }
.cms-addcal-list > .cms-addcal-head { font-weight: 700; font-size: 1.15rem; display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.cms-addcal-list > .cms-addcal-head .ti { color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-addcal-list .cms-addcal { margin: 0 0 .8rem; max-width: none; padding: 1.1rem 1.25rem; }
.cms-addcal-list .cms-addcal:last-child { margin-bottom: 0; }
.cms-addcal-list .cms-addcal-meta { margin-bottom: .75rem; }

/* Promo code banner. */
.cms-promo { position: relative; border-radius: 10px; margin: 1rem 0; padding: .8rem 2.4rem .8rem 1.2rem; }
.cms-promo-inner { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.cms-promo-msg { font-weight: 600; }
.cms-promo-code { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; letter-spacing: .04em;
    border: 2px dashed currentColor; background: transparent; color: inherit; border-radius: 8px; padding: .3rem .7rem; cursor: pointer; }
.cms-promo-code:hover { opacity: .85; }
.cms-promo-code.is-copied .cms-promo-code-text::after { content: " — Copied!"; font-weight: 600; letter-spacing: 0; }
.cms-promo-code.is-copied .ti { display: none; }
/* !important because the theme's own header <a> colour (e.g. Porto's #CC9966) otherwise wins and renders the
   link muted/dark on the coloured bar. */
.cms-promo .cms-promo-cta { font-weight: 700; text-decoration: underline !important; color: #fff !important; opacity: .95; }
.cms-promo .cms-promo-cta:hover { opacity: 1; color: #fff !important; }
.cms-promo--light .cms-promo-cta { color: #11161f !important; }
.cms-promo--light .cms-promo-cta:hover { color: #11161f !important; }
.cms-promo-dismiss { position: absolute; top: 50%; right: .6rem; transform: translateY(-50%); border: 0; background: transparent;
    color: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: .7; padding: 0 .3rem; }
.cms-promo-dismiss:hover { opacity: 1; }
.cms-promo--accent { background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; }
.cms-promo--dark { background: #1f2937; color: #fff; }
.cms-promo--light { background: #f3f4f6; color: #111827; border: 1px solid #e5e7eb; }
.cms-promo--success { background: #16a34a; color: #fff; }
.cms-promo--danger { background: #dc2626; color: #fff; }
.cms-promo--warning { background: #f59e0b; color: #1a1300; }
.cms-promo--warning .cms-promo-cta, .cms-promo--warning .cms-promo-code { color: #1a1300 !important; }
.cms-promo--info { background: #0ea5e9; color: #fff; }
.cms-promo--gradient { background: linear-gradient(90deg, var(--cms-accent, var(--primary, #2563eb)), #7c3aed); color: #fff; }
.cms-promo--midnight { background: linear-gradient(90deg, #0f172a, #1e3a8a); color: #fff; }

/* Size / spec guide modal (native <dialog>). */
.cms-specguide-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.2rem; border: 1px solid #d7dde5;
    border-radius: 8px; background: #fff; font-weight: 600; cursor: pointer; color: inherit; }
.cms-specguide-btn:hover { border-color: var(--cms-accent, var(--primary, var(--cms-primary))); color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-dialog { border: 0; border-radius: 12px; padding: 0; max-width: 640px; width: calc(100% - 2rem); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.cms-dialog::backdrop { background: rgba(15,23,42,.5); }
.cms-dialog-inner { padding: 1.25rem 1.4rem 1.5rem; }
.cms-dialog-head { display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid #eef2f7; padding-bottom: .75rem; margin-bottom: 1rem; }
.cms-dialog-title { margin: 0; font-size: 1.2rem; flex: 1; }
.cms-dialog-close { border: 0; background: transparent; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #6b7280; padding: 0 .25rem; }
.cms-dialog-close:hover { color: #111; }
.cms-dialog-body table { width: 100%; border-collapse: collapse; }
.cms-dialog-body th, .cms-dialog-body td { border: 1px solid #e5e9f0; padding: .5rem .7rem; text-align: left; }
.cms-dialog-body thead th { background: #f7f9fc; }
.cms-dialog-body tbody tr:nth-child(even) { background: #fafbfd; }

/* Product bundle / shop-the-look. */
.cms-bundle { border: 1px solid #e8edf3; border-radius: 12px; padding: 1.4rem 1.5rem; margin: 1.5rem 0; background: #fff; }
.cms-bundle-title { margin: 0 0 .25rem; }
.cms-bundle-sub { margin: 0 0 1rem; color: #6b7280; }
.cms-bundle-foot { margin-top: 1.1rem; display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.cms-bundle-price { font-size: 1.5rem; font-weight: 800; color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-bundle-was { font-size: 1.1rem; text-decoration: line-through; color: #9ca3af; }
.cms-bundle-save { font-size: .8rem; font-weight: 700; color: #16a34a; background: rgba(22,163,74,.12); padding: .25rem .6rem; border-radius: 999px; }
.cms-prodfeed-imgwrap { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #f6f7f9; }
.cms-prodfeed-img { width: 100%; height: 100%; object-fit: cover; }
.cms-prodfeed-name { padding: .65rem .75rem 0; font-weight: 600; line-height: 1.35; }
.cms-prodfeed-price { padding: .25rem .75rem .85rem; font-weight: 800; color: var(--cms-accent, var(--primary, var(--cms-primary))); }

/* Awards / certifications add-on */
.control-awards { margin: 1.5rem 0; }
.cms-awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; }
.cms-award { text-align: center; padding: 1.5rem 1.25rem; border: 1px solid #eef0f2; border-radius: 12px;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: box-shadow .15s, transform .15s; }
.cms-award:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.cms-award-img { max-height: 70px; max-width: 100%; object-fit: contain; margin-bottom: .6rem; }
.cms-award-icon { width: 64px; height: 64px; margin: 0 auto .7rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 2rem;
    color: var(--cms-accent, var(--primary, var(--cms-primary))); background: color-mix(in srgb, var(--cms-primary) 10%, transparent); }
.cms-award-icon i { line-height: 1; }
.cms-award-title { font-weight: 700; }
.cms-award-meta { color: #6b7280; font-size: .9rem; margin-top: .25rem; }

/* Social feed add-on (classes deliberately avoid the substring "social" — InjectSocials() hijacks .*social*) */
.control-feedgrid { margin: 1.5rem 0; }
.cms-feedgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
.cms-feed-item { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; }
.cms-feed-img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.cms-feed-item:hover .cms-feed-img { transform: scale(1.06); }

/* Trust / payment badges add-on */
.control-trustbadges { margin: 1.5rem 0; }
.cms-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; }
.cms-badge { display: inline-flex; align-items: center; }
.cms-badge-img { height: 40px; max-width: 120px; object-fit: contain; filter: grayscale(20%); opacity: .9; transition: opacity .15s, filter .15s; }
.cms-badge:hover .cms-badge-img { filter: none; opacity: 1; }

/* Content image carousel add-on */
.control-carousel { margin: 1.5rem 0; }
.cms-carousel { position: relative; }
.cms-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: #1f2733; box-shadow: 0 2px 8px rgba(0,0,0,.18); font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.cms-carousel-nav:hover { background: var(--cms-primary); color: #fff; }
.cms-carousel-prev { left: .5rem; } .cms-carousel-next { right: .5rem; }
.cms-carousel-nav[disabled] { opacity: .35; cursor: default; }
@media (max-width: 600px) { .cms-carousel-nav { display: none; } }
.cms-carousel-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; justify-content: safe center; }
/* Continuous-marquee mode: no snapping and no smooth-scroll easing, so the constant per-frame scroll rolls evenly. */
.cms-carousel.is-marquee .cms-carousel-track { scroll-snap-type: none; scroll-behavior: auto; }
.cms-carousel.is-marquee .cms-slide { scroll-snap-align: none; }
/* A lone content image sitting in a text flow (kept from an imported page) shouldn't dominate as a full-size block —
   cap it and float it so the copy wraps beside it, the way the source laid it out. Slideshow/gallery images (their own
   controls) and images already inside a figure/columns layout are excluded. */
.block-richtext img:not(.cms-slide-img):not(.cms-profile-photo) { max-width: 400px; height: auto; float: right; margin: .35rem 0 1.1rem 1.6rem; border-radius: 10px; }
.block-richtext .cms-listcards img, .block-richtext figure img { float: none; margin: 0; }   /* structured layouts keep their own placement */
/* A home band's own source image (award certificate, team photo — placed by the import home compose): a polished
   card floated beside the band copy, sized so a portrait certificate doesn't tower over four lines of text. */
.block-richtext img.cms-section-photo { width: 38%; max-width: 340px; margin: 0 0 1rem 1.5rem; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
@media (max-width: 700px) { .block-richtext img:not(.cms-slide-img):not(.cms-profile-photo) { float: none; max-width: 100%; display: block; margin: 1rem auto; } }

/* Cross-fade mode: slides STACK on top of each other and fade in/out (a classic slideshow). The first slide sits
   in normal flow to give the box its height; the rest are absolutely positioned over it. */
.cms-carousel-fade { max-width: 560px; margin-inline: auto; }
.cms-carousel-fade .cms-carousel-track { display: block; position: relative; overflow: hidden; border-radius: 10px; gap: 0; padding: 0; }
.cms-carousel-fade .cms-slide { position: absolute; inset: 0; width: 100%; opacity: 0; transition: opacity .9s ease; margin: 0; }
.cms-carousel-fade .cms-slide:first-child { position: relative; }   /* holds the container height */
.cms-carousel-fade .cms-slide.is-active { opacity: 1; z-index: 1; }
.cms-carousel-fade .cms-slide-img { border-radius: 10px; }
.cms-carousel-fade .cms-slide-cap { display: none; }                /* imported captions are alt-text keyword strings — hide in the fade */
.cms-carousel-track::-webkit-scrollbar { display: none; }   /* nav arrows drive it — hide the scrollbar */
.cms-slide { flex: 0 0 auto; width: min(80%, 360px); scroll-snap-align: start; margin: 0; }
.cms-slide-img { width: 100%; height: 240px; object-fit: cover; border-radius: 10px; display: block; }
.cms-slide-cap { margin-top: .5rem; color: #4b5563; font-size: .95rem; text-align: center; }
/* Slide aspect ratio (Portrait default / Landscape / Square / As-is). aspect-ratio drives the height so the whole
   slideshow is uniform; the slide width narrows for portrait so the tiles don't get huge. */
.cms-carousel.aspect-portrait  .cms-slide { width: min(70%, 300px); }
.cms-carousel.aspect-portrait  .cms-slide-img { height: auto; aspect-ratio: 3 / 4; }
.cms-carousel.aspect-landscape .cms-slide-img { height: auto; aspect-ratio: 4 / 3; }
.cms-carousel.aspect-square    .cms-slide { width: min(72%, 320px); }
.cms-carousel.aspect-square    .cms-slide-img { height: auto; aspect-ratio: 1 / 1; }
/* Fade mode shows ONE slide at a time, stacked inside a box that is already centred (margin-inline:auto).
   So the slide must FILL that box — the narrow 70% width from the scrolling layout would strand a portrait
   image against the left edge. Cap the box itself for portrait/square so a tall image doesn't tower. */
.cms-carousel-fade.aspect-portrait,
.cms-carousel-fade.aspect-square    { max-width: 340px; }
.cms-carousel-fade.aspect-portrait  .cms-slide,
.cms-carousel-fade.aspect-square    .cms-slide,
.cms-carousel-fade.aspect-landscape .cms-slide { width: 100%; }
/* Icon-feature item: a brand-tinted circle holding an icon-font glyph above a short heading. Sources often pair
   a feature heading with an icon that the importer strips (the raw SVG isn't allowed in stored content); this is
   the sanitiser-safe way to carry it back — an <i class="fas fa-…"> the theme's Font Awesome renders. */
.cms-feat-ico { display: flex; align-items: center; justify-content: center; width: 62px; height: 62px;
  margin: 0 0 .8rem; border-radius: 50%; font-size: 1.55rem; line-height: 1;
  background: rgba(0,0,0,.06); background: color-mix(in srgb, var(--cms-primary, #8a5a2b) 12%, transparent);
  color: var(--cms-primary, #8a5a2b); }
.cms-feat-ico i { line-height: 1; }
/* Split layout: text on the left, slideshow on the right (stacks on mobile). */
.cms-carousel-split { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; margin: 1.5rem 0; }
.cms-carousel-split > .cms-carousel-text { flex: 1 1 340px; min-width: 280px; }
.cms-carousel-split > .cms-carousel { flex: 1 1 380px; min-width: 260px; max-width: 100%; }
@media (max-width: 768px) { .cms-carousel-split { flex-direction: column; align-items: stretch; } }

/* Footer column-builder (structured site footer: 1-6 typed columns). */
.cms-footer { background: #1f2733; color: #c4ccd6; padding: 3rem 1rem 1.5rem; font-size: .95rem; }
.cms-footer-inner { max-width: 1200px; margin: 0 auto; }
.cms-footer-grid { display: grid; grid-template-columns: repeat(var(--cms-fcols, 3), minmax(0, 1fr)); gap: 2rem; }
@media (max-width: 900px) { .cms-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cms-footer-grid { grid-template-columns: 1fr; } }
.cms-footer-col p { margin: 0 0 .5rem; }
.cms-footer-h { color: #fff; font-size: 1.05rem; font-weight: 700; margin: 0 0 1rem; letter-spacing: .02em; }
.cms-footer-company { font-weight: 700; color: #fff; }
.cms-footer a { color: #c4ccd6; text-decoration: none; }
.cms-footer a:hover { color: var(--cms-primary, #7daf2e); }
.cms-footer-links { list-style: none; margin: 0; padding: 0; }
.cms-footer-links li { margin: 0 0 .55rem; }
.cms-footer-socials { display: flex; gap: .6rem; flex-wrap: wrap; }
.cms-footer-socials a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.cms-footer-socials a:hover { background: var(--cms-primary, #7daf2e); color: #fff; }
.cms-footer-hours { line-height: 1.9; }
.cms-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.2rem; padding-top: 1.2rem; text-align: center; color: #8b95a1; font-size: .88rem; }

/* Promo popup add-on */
.cms-popup { position: fixed; inset: 0; z-index: 1060; }
.cms-popup-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.cms-popup-box { position: relative; max-width: 460px; margin: 12vh auto 0; background: #fff; border-radius: 12px; padding: 2rem; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.cms-popup-x { position: absolute; top: .5rem; right: .75rem; background: transparent; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #6b7280; }
.cms-popup-img { max-width: 100%; border-radius: 8px; margin-bottom: 1rem; }
.cms-popup-h { font-size: 1.5rem; font-weight: 800; margin: 0 0 .5rem; }
.cms-popup-body { color: #4b5563; margin: 0 0 1.25rem; }
/* Scoped past the theme's .cms-btn (same specificity, loaded later) so the label stays white on the accent fill. */
.cms-popup .cms-popup-btn, .cms-popup-box .cms-popup-btn { display: inline-block; background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff !important; padding: .7rem 1.6rem; border-radius: 8px; font-weight: 700; text-decoration: none; border: 0; }
.cms-popup .cms-popup-btn:hover, .cms-popup-box .cms-popup-btn:hover { color: #fff !important; filter: brightness(1.08); }

/* On-page jump nav (TOC) add-on */
.control-toc { margin: 1.25rem 0; }
.cms-toc-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: #64748b; padding: .15rem 0 .4rem; }
.cms-toc-list { list-style: none; margin: 0; padding: .75rem 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; border-left: 3px solid var(--cms-accent, var(--primary, var(--cms-primary))); background: var(--cms-toc-bg, #f8fafc); border-radius: 0 8px 8px 0; }
.cms-toc-list a { text-decoration: none; color: var(--cms-accent, var(--primary, var(--cms-primary))); font-weight: 600; }
.cms-toc-list a:hover { text-decoration: underline; }
.cms-toc-list a.is-active { text-decoration: underline; }
/* Indent each level: h2 = level 1 (flush), h3..h6 step in. Deeper levels get progressively lighter weight. */
.cms-toc-h3 { margin-left: 1rem;    font-size: .95em; }
.cms-toc-h4 { margin-left: 2rem;    font-size: .92em; }
.cms-toc-h5 { margin-left: 3rem;    font-size: .9em; }
.cms-toc-h6 { margin-left: 4rem;    font-size: .88em; }
.cms-toc-h3 a, .cms-toc-h4 a, .cms-toc-h5 a, .cms-toc-h6 a { font-weight: 500; }
/* Bullet styles (optional). Column panels lay out vertically, so we draw our own markers. */
.cms-toc-bullets-dot .cms-toc-list li { position: relative; padding-left: 1rem; }
.cms-toc-bullets-dot .cms-toc-list li::before { content: ""; position: absolute; left: .15rem; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-toc-bullets-number .cms-toc-list { counter-reset: cms-toc; }
.cms-toc-bullets-number .cms-toc-list li { counter-increment: cms-toc; }
.cms-toc-bullets-number .cms-toc-list li::before { content: counter(cms-toc) ". "; color: var(--cms-accent, var(--primary, var(--cms-primary))); font-weight: 600; }

/* Side (float) AND inline panels render the links as a vertical card. Only the "top" band stays horizontal.
   --cms-toc-top / --cms-sticky-top are set by cms-content.js to clear any sticky site header. */
.cms-toc.cms-toc-pos-left .cms-toc-list,
.cms-toc.cms-toc-pos-right .cms-toc-list,
.cms-toc.cms-toc-pos-inline .cms-toc-list,
.cms-toc.is-floating .cms-toc-list { flex-direction: column; flex-wrap: nowrap; gap: .4rem; background: var(--cms-toc-bg, #fff); border: 1px solid #e6e9ee; border-left: 3px solid var(--cms-accent, var(--primary, var(--cms-primary))); box-shadow: 0 6px 20px rgba(16,24,40,.08); border-radius: 0 10px 10px 0; }
.cms-toc.cms-toc-pos-left .cms-toc-title,
.cms-toc.cms-toc-pos-right .cms-toc-title,
.cms-toc.cms-toc-pos-inline .cms-toc-title,
.cms-toc.is-floating .cms-toc-title { padding-left: 1rem; }
.cms-toc a.is-active { font-weight: 700; }
/* Top band: a full-width card above the content; can stay stuck to the top of the viewport when fixed. */
.cms-toc.cms-toc-pos-top { display: block; margin-bottom: 1.25rem; }
.cms-toc.cms-toc-pos-top .cms-toc-list { flex-direction: row; flex-wrap: wrap; gap: .5rem 1.25rem; background: var(--cms-toc-bg, #f8fafc); border-left: 3px solid var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-toc.cms-toc-pos-top.is-fixed { position: sticky; top: var(--cms-toc-top, 1rem); z-index: 5; background: #fff; }

/* INLINE: a narrow vertical card that sits INSIDE the text column — the body text wraps around it. */
.cms-toc.cms-toc-pos-inline { max-width: 19rem; margin: 0; }
.cms-toc.cms-toc-inline-left  { float: left;  margin: .25rem 1.5rem .75rem 0; }
.cms-toc.cms-toc-inline-right { float: right; margin: .25rem 0 .75rem 1.5rem; }
@media (max-width: 575.98px) {
    .cms-toc.cms-toc-pos-inline { float: none; max-width: none; margin: 1rem 0; }
}

/* FLOAT: a vertical card pinned to the page margin OUTSIDE the text column. When "Fixed" is on it sits flush
   to the viewport edge (a few px from the screen, clear of the header) and follows the scroll; otherwise it
   floats at the column edge and scrolls away. Collapses to a normal block on tablet/mobile. */
@media (min-width: 992px) {
    .cms-toc.cms-toc-pos-left,
    .cms-toc.cms-toc-pos-right { width: clamp(190px, 19vw, 290px); }
    .cms-toc.cms-toc-pos-right { float: right; margin: 0 0 1rem 1.75rem; }
    .cms-toc.cms-toc-pos-left  { float: left;  margin: 0 1.75rem 1rem 0; }
    .cms-toc.cms-toc-pos-right.is-fixed { position: fixed; right: 12px; left: auto; top: calc(var(--cms-toc-top, var(--cms-sticky-top, 0px)) + 1rem); margin: 0; float: none; z-index: 30; }
    .cms-toc.cms-toc-pos-left.is-fixed  { position: fixed; left: 12px;  right: auto; top: calc(var(--cms-toc-top, var(--cms-sticky-top, 0px)) + 1rem); margin: 0; float: none; z-index: 30; }
    .cms-toc.cms-toc-pos-left.is-fixed .cms-toc-list,
    .cms-toc.cms-toc-pos-right.is-fixed .cms-toc-list { max-height: calc(100vh - var(--cms-sticky-top, 0px) - 2.5rem); overflow: auto; }
}
@media (max-width: 991.98px) {
    .cms-toc.cms-toc-pos-left,
    .cms-toc.cms-toc-pos-right { position: static; float: none; width: auto; }
}

/* Announcement bar add-on */
.control-announcement { margin: 0 0 1rem; }
/* White space between stacked announcement bars so they don't read as one solid block. */
.control-announcement .cms-announce + .cms-announce { margin-top: .6rem; }
.cms-announce { display: flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem; border-radius: 8px; font-weight: 500; }
.cms-announce-info { background: #e7f1ff; color: #0b5394; }
.cms-announce-success { background: #e6f7ec; color: #1b7e3f; }
.cms-announce-warning { background: #fff6e5; color: #9a6700; }
.cms-announce-dark { background: #1f2733; color: #fff; }
.cms-announce-link { font-weight: 700; color: inherit; text-decoration: underline; }
.cms-announce-x { margin-left: auto; background: transparent; border: 0; font-size: 1.4rem; line-height: 1; color: inherit; cursor: pointer; opacity: .7; }
.cms-announce-x:hover { opacity: 1; }
/* Rotating announcement bar (multiple messages): one slide visible at a time + position dots. */
.cms-announce-slide { transition: opacity .35s ease; }
.cms-announce-slide[hidden] { display: none; }
.cms-announce-dots { display: inline-flex; gap: .35rem; align-items: center; margin-left: auto; }
.cms-announce-dots + .cms-announce-x { margin-left: .6rem; }   /* dots already took the auto-margin */
.cms-announce-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: currentColor; opacity: .38; cursor: pointer; }
.cms-announce-dot.is-active { opacity: .95; }

/* Cookie consent add-on */
.control-cookieconsent { margin: 0; }
.cms-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; background: #1f2733; color: #fff; padding: 1rem 1.25rem; box-shadow: 0 -2px 14px rgba(0,0,0,.2); }
.cms-cookie-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cms-cookie-msg { flex: 1 1 280px; }
.cms-cookie-msg a { color: #9ecbff; }
.cms-cookie-accept { background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; border: 0; padding: .6rem 1.4rem; border-radius: 8px; font-weight: 700; cursor: pointer; }

/* Business hours add-on */
.control-hours { margin: 1.5rem 0; }
.cms-hours-badge { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; padding: .35rem .8rem; border-radius: 999px; margin-bottom: .75rem; }
.cms-hours-open { background: #e6f7ec; color: #1b7e3f; }
.cms-hours-closed { background: #fdeaea; color: #b42318; }
.cms-hours-table { width: 100%; max-width: 420px; border-collapse: collapse; }
.cms-hours-table th, .cms-hours-table td { padding: .55rem .75rem; border-bottom: 1px solid #eef0f2; text-align: left; }
.cms-hours-table th { font-weight: 600; }
.cms-hours-table td { text-align: right; color: #4b5563; }
/* Split hours as separate pills (clear lunch-break ranges instead of a comma run-on). Pills are inline-block so
   the table column model stays intact. */
/* Default: clean text, no pill fill (admins can opt into a pill via the Time-pill style setting). */
/* Each opening range sits on its own line for EVERY day (not just today), so split hours (a lunch break)
   read as a clean stacked list rather than two ranges crammed side-by-side. Hugs its content, right-aligned. */
.cms-hours-range { display: block; width: fit-content; margin: .12rem 0 .12rem auto; padding: .12rem .35rem; border-radius: 999px; background: transparent; color: #1f2d3d; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cms-hours-today .cms-hours-range { background: var(--cms-primary, #206bc4); color: #fff; padding: .12rem .55rem; }
.cms-hours-closed-txt { color: #94a3b8; font-style: italic; }
/* Time-pill style options (set per placement). subtle = default grey above. */
.cms-hours-pill-outline .cms-hours-range { background: transparent; border: 1px solid #d0d5dd; }
.cms-hours-pill-accent .cms-hours-range { background: color-mix(in srgb, var(--cms-primary, #206bc4) 14%, #fff); color: var(--cms-primary, #206bc4); }
.cms-hours-pill-none .cms-hours-range { background: transparent; padding: .12rem 0; border-radius: 0; margin-left: .35rem; }

/* Per-block shape dividers (Porto-style SVG section edges). The block wrapper is the positioning context;
   each divider is an absolutely-positioned SVG pinned to the top or bottom edge, filled with the chosen
   colour. Theme-neutral — works on any template. Pairs with the (later) per-block section background. */
.cms-has-shape { position: relative; }
.cms-shape-divider { position: absolute; left: 0; width: 100%; overflow: hidden; line-height: 0; pointer-events: none; z-index: 1; }
.cms-shape-divider svg { display: block; width: 100%; height: 100%; }
.cms-shape-bottom { bottom: 0; }
.cms-shape-top    { top: 0; transform: scaleY(-1); }            /* reuse the bottom-authored paths, mirrored */
.cms-shape-divider.cms-shape-flip svg { transform: scaleX(-1); } /* mirror horizontally */

/* Animate-on-scroll (Porto-style reveal). The hidden initial state ONLY applies once cms-content.js adds
   html.cms-anim-on, so no-JS / pre-JS renders show content normally (no flash of missing content). The block
   reveals when it scrolls into view (.is-inview). Reduce-motion users get the content with no animation. */
html.cms-anim-on .cms-anim { opacity: 0; transition: opacity .6s ease, transform .6s ease; transition-delay: var(--cms-anim-delay, 0ms); will-change: opacity, transform; }
html.cms-anim-on .cms-anim.cms-anim-fade-up    { transform: translateY(32px); }
html.cms-anim-on .cms-anim.cms-anim-fade-down  { transform: translateY(-32px); }
html.cms-anim-on .cms-anim.cms-anim-fade-left  { transform: translateX(32px); }
html.cms-anim-on .cms-anim.cms-anim-fade-right { transform: translateX(-32px); }
html.cms-anim-on .cms-anim.cms-anim-zoom-in    { transform: scale(.92); }
html.cms-anim-on .cms-anim.cms-anim-zoom-out   { transform: scale(1.08); }
html.cms-anim-on .cms-anim.is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.cms-anim-on .cms-anim { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* Section background + padding (Porto-style section band). The .cms-section wrapper is full-bleed; its content
   stays in the theme .container (or full-width). cms-has-shape positioning still applies for shape dividers. */
.cms-section { width: 100%; }
.cms-sec-bg-light   { background: #f7f8fa; }
.cms-sec-bg-grey    { background: #eef1f5; }
.cms-sec-bg-dark    { background: #1f2733; }
.cms-sec-bg-primary { background: var(--cms-primary, #206bc4); }
.cms-sec-bg-custom  { background: var(--cms-sec-bg); }
/* On dark / primary bands the text must stay light. It has to WIN over two global !important rules — the
   brown-heading override_css (bare `h1..h6`) and the a11y `body{color}` — so these carry !important AND a
   class, raising specificity above those bare-element selectors. */
.cms-sec-bg-dark, .cms-sec-bg-dark :is(p,li,span,strong,em) { color: #e9edf2 !important; }
.cms-sec-bg-primary, .cms-sec-bg-primary :is(p,li,span,strong,em) { color: #fff !important; }
.cms-sec-bg-dark a:not(.btn), .cms-sec-bg-primary a:not(.btn) { color: #fff !important; text-decoration: underline; }
.cms-sec-bg-dark :is(h1,h2,h3,h4,h5,h6), .cms-sec-bg-primary :is(h1,h2,h3,h4,h5,h6) { color: #fff !important; }
.cms-sec-pad-sm { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.cms-sec-pad-md { padding-top: 3.25rem; padding-bottom: 3.25rem; }
.cms-sec-pad-lg { padding-top: 5rem;    padding-bottom: 5rem; }
.cms-sec-pad-xl { padding-top: 7rem;    padding-bottom: 7rem; }
/* Background image + parallax + dark overlay (Porto hero section). Parallax uses background-attachment:fixed
   on desktop (CSS-only); it falls back to a normal scrolling image on touch/mobile where fixed is unreliable. */
.cms-sec-img { background-image: var(--cms-sec-img); background-size: cover; background-position: center; }
@media (min-width: 992px) { .cms-sec-parallax { background-attachment: fixed; } }
.cms-sec-overlay { position: relative; }
.cms-sec-overlay::before { content: ''; position: absolute; inset: 0; background: rgba(15,20,28,.5); pointer-events: none; }
.cms-sec-overlay > * { position: relative; z-index: 1; }
/* Same as the dark/primary bands: light text must beat the global brown-heading + a11y body !important rules.
   The :not(.control-contactsection *) exclusion keeps the location hero's LIGHT form card on normal (theme) text —
   without it these rules would paint the card's labels and headings white-on-white. */
.cms-sec-overlay, .cms-sec-overlay :is(p,li,span,strong,em):not(.control-contactsection *) { color: #f3f5f8 !important; }
.cms-sec-overlay :is(h1,h2,h3,h4,h5,h6):not(.control-contactsection *) { color: #fff !important; }
.cms-sec-overlay a:not(.btn):not(.control-contactsection *) { color: #fff !important; text-decoration: underline; }

/* ── Location hero (imported town landing pages) ─────────────────────────────
   Left column: heading + intro + this icon service list; right column: the compact contact form card. */
.cms-herolist { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1.05rem; }
.cms-herolist li { position: relative; padding-left: 2.9rem; min-height: 2rem; }
.cms-herolist li::before { content: '✓'; position: absolute; left: 0; top: .05rem; width: 2rem; height: 2rem;
  border-radius: 50%; background: var(--cms-primary, #7daf2e); color: #fff; font-weight: 700; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px rgba(255,255,255,.22); }
.cms-herolist strong { display: block; font-size: 1.18rem; line-height: 1.35; }
.cms-herolist span { opacity: .85; font-size: .98rem; }
/* The compact form card: light panel that pops off the dark parallax image. Its own base colour (!important)
   re-anchors inheritance — the band's forced-light base otherwise bleeds into the card's form labels. */
.cms-sec-overlay .cms-contactsec-card { background: #fbfbf4; border-radius: 14px; padding: 1.6rem 1.9rem 1.9rem;
  box-shadow: 0 14px 44px rgba(0,0,0,.38); color: #495057 !important; }
.cms-sec-overlay .cms-contactsec-card :is(label,legend) { color: #495057 !important; }
.cms-sec-overlay .cms-contactsec-card .cms-contactsec-h { text-align: center; font-size: 1.9rem; margin-top: 0; }
.cms-sec-overlay .cms-contactsec-card .cms-contactsec-intro { text-align: center; }
/* Inside the hero band, give the two columns breathing room on desktop. */
.cms-section .cms-herolist + * { margin-top: 1rem; }

/* Make-sticky: pin a block below the site header as the page scrolls. --cms-sticky-top is the live header
   height (set by cms-content.js). Disabled on small screens, where a pinned block would crowd the content. */
@media (min-width: 768px) {
    .cms-sticky { position: sticky; top: calc(var(--cms-sticky-top, 0px) + 1rem); z-index: 20; }
}

/* F1 structured-content embeds (cards | list | table) */
.cms-structured { margin: 1.25rem 0; }
.cms-structured-title { margin-bottom: .75rem; }
.cms-structured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.cms-structured-list .cms-structured-grid { grid-template-columns: 1fr; }
.cms-structured-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem; background: #fff; }
.cms-structured-card .cms-sc-title { margin: 0 0 .5rem; font-size: 1.05rem; }
.cms-sc-field { margin: .15rem 0; }
.cms-sc-label { font-weight: 600; color: #475569; }
.cms-structured-table th { white-space: nowrap; }

/* Click-to-call add-on */
.control-clicktocall { margin: 1rem 0; }
.cms-ctc-bar { display: flex; align-items: center; justify-content: center; gap: .75rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; padding: .8rem 1rem; background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; text-decoration: none; font-weight: 700; box-shadow: 0 -2px 12px rgba(0,0,0,.15); }
.cms-ctc-label { font-weight: 600; opacity: 1; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.cms-ctc-btn { display: inline-flex; align-items: center; gap: .35rem; background: #fff; color: #1f2937; font-weight: 700; padding: .4rem 1rem; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.cms-ctc-mobile .cms-ctc-bar { display: none; }
@media (max-width: 768px) { .cms-ctc-mobile .cms-ctc-bar { display: flex; } }

/* ── Admin preview adjustments ─────────────────────────────────────────────
   When the owner previews the live site (admin edit bar present) we keep the
   floating widgets usable: the bottom-left accessibility fab lifts above the
   edit bar, and a mobile-only click-to-call bar is shown on desktop so it can
   be tested. The published site (no .cms-admin-preview) is unaffected. */
/* In admin preview the public accessibility bubble shares the bottom-left with the admin edit FABs (pencil +
   refresh, ~96px wide at left:16px). Line them up in one row instead of stacking the a11y bubble above. */
html.cms-admin-preview .cms-a11y-left { bottom: 1rem; left: 144px; }   /* clear gap after the pencil+refresh cluster */

/* Collapsible bottom-left FAB cluster (#390). When 2+ bubbles share the corner, JS adds a small toggle at the
   far left (body.cms-fabtoggle) and shifts the row right of it; collapsing (html.cms-fabs-collapsed) tucks the
   bubbles away behind the toggle. State persists across pages (localStorage), default expanded. */
.cms-fab-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 100002; width: 34px; height: 34px;
    border: 0; border-radius: 50%; background: #334155; color: #fff; display: flex; align-items: center;
    justify-content: center; font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.cms-fab-toggle:hover { background: #1f2937; }
body.cms-fabtoggle #cms-edit { left: 60px; }
body.cms-fabtoggle .cms-a11y-left { left: 188px; bottom: 16px; }   /* visitor a11y bubble visibly separate from the admin cluster */
html.cms-fabs-collapsed #cms-edit, html.cms-fabs-collapsed .cms-a11y-left { display: none !important; }
html.cms-admin-preview .cms-ctc-mobile .cms-ctc-bar { display: flex; }

/* Progress / skill bars add-on */
.control-progressbars { margin: 1.5rem 0; }
.cms-bars { display: flex; flex-direction: column; gap: 1rem; }
.cms-bar-head { display: flex; justify-content: space-between; margin-bottom: .35rem; font-weight: 600; }
.cms-bar-pct { color: #6b7280; font-weight: 600; }
.cms-bar-track { height: 10px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.cms-bar-fill { height: 100%; background: var(--cms-accent, var(--primary, var(--cms-primary))); border-radius: 999px; width: 0; animation: cms-bar-grow 1s ease-out forwards; }
@keyframes cms-bar-grow { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }

/* Star rating display add-on */
.control-rating { margin: 1.25rem 0; }
.cms-rating { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: inherit; }
.cms-rating-stars { color: var(--cms-rating, #f5a623); font-size: 1.3rem; letter-spacing: 1px; line-height: 1; }
.cms-star-empty { color: #d1d5db; }
.cms-star-half { background: linear-gradient(90deg, var(--cms-rating, #f5a623) 50%, #d1d5db 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cms-rating-num { font-weight: 800; font-size: 1.1rem; }
.cms-rating-count, .cms-rating-label { color: #6b7280; }

/* Survey / poll add-on */
.control-poll { margin: 1.5rem 0; }
.cms-poll { border: 1px solid #eef0f2; border-radius: 12px; padding: 1.25rem 1.4rem; max-width: 480px; }
.cms-poll-q { font-weight: 700; font-size: 1.1rem; margin-bottom: .9rem; }
.cms-poll-opts { display: flex; flex-direction: column; gap: .5rem; }
.cms-poll-opt { text-align: left; background: #f6f7f9; border: 1px solid #e2e5e9; border-radius: 8px; padding: .6rem .9rem; cursor: pointer; font-weight: 600; }
.cms-poll-opt:hover { border-color: var(--cms-accent, var(--primary, var(--cms-primary))); color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-poll-bar { margin-bottom: .65rem; }
.cms-poll-bar-top { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: .25rem; font-size: .92rem; }
.cms-poll-track { height: 10px; background: #eef0f2; border-radius: 999px; overflow: hidden; }
.cms-poll-fill { height: 100%; background: var(--cms-accent, var(--primary, var(--cms-primary))); border-radius: 999px; transition: width .4s; }
.cms-poll-total { color: #6b7280; font-size: .85rem; margin-top: .5rem; }

/* Quote calculator add-on */
.control-calculator { margin: 1.5rem 0; }
.cms-calc { border: 1px solid #eef0f2; border-radius: 12px; padding: 1.25rem 1.4rem; max-width: 520px; }
.cms-calc-title { font-size: 1.2rem; font-weight: 800; margin: 0 0 1rem; }
.cms-calc-fields { display: flex; flex-direction: column; gap: .7rem; }
.cms-calc-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cms-calc-row .cms-calc-label { color: #374151; }
.cms-calc-row input[type=number], .cms-calc-row select { max-width: 160px; padding: .35rem .55rem; border: 1px solid #e2e5e9; border-radius: 6px; }
.cms-calc-check { justify-content: flex-start; gap: .5rem; }
.cms-calc-result { margin-top: 1rem; padding-top: .9rem; border-top: 2px solid #eef0f2; font-weight: 700; display: flex; justify-content: space-between; }
.cms-calc-total { font-size: 1.35rem; font-weight: 800; color: var(--cms-accent, var(--primary, var(--cms-primary))); }

/* Comparison table add-on */
.control-comparison { margin: 1.75rem 0; }
.cms-cmp-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 1rem; }
.cms-cmp-wrap { overflow-x: auto; }
.cms-cmp { width: 100%; border-collapse: collapse; min-width: 420px; }
.cms-cmp th, .cms-cmp td { padding: .7rem 1rem; border-bottom: 1px solid #eef0f2; text-align: center; }
.cms-cmp thead th { font-weight: 800; border-bottom: 2px solid #e2e5e9; }
.cms-cmp-feat { text-align: left; font-weight: 600; color: #374151; position: sticky; left: 0; background: #fff; z-index: 1; }
.cms-cmp-hl { background: color-mix(in srgb, var(--cms-accent, var(--primary, var(--cms-primary))) 9%, #fff); }
.cms-cmp thead .cms-cmp-hl { color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-cmp-yes { color: #1b7e3f; font-size: 1.1rem; }
.cms-cmp-no { color: #cbd2d9; }

/* Accordion add-on */
.control-accordion { margin: 1.5rem 0; }
.cms-accordion { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.cms-acc-item { border-bottom: 1px solid #e5e7eb; }
.cms-acc-item:last-child { border-bottom: 0; }
.cms-acc-summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 600; list-style: none; position: relative; }
.cms-acc-summary::-webkit-details-marker { display: none; }
.cms-acc-summary::after { content: "+"; position: absolute; right: 1.25rem; font-weight: 700; color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-acc-item[open] .cms-acc-summary::after { content: "\2212"; }
.cms-acc-body { padding: 0 1.25rem 1.1rem; color: #4b5563; line-height: 1.65; }

/* Blog posts feed add-on */
.control-postfeed { margin: 1.75rem 0; }
.cms-postfeed-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 1rem; }
.cms-postfeed { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.cms-postfeed-card { display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden;
    text-decoration: none; color: inherit; background: #fff; transition: box-shadow .15s, transform .15s; }
.cms-postfeed-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1); transform: translateY(-3px); }
.cms-postfeed-card:hover .cms-postfeed-more { gap: .5rem; }
.cms-postfeed-img { display: block; height: 150px; background-size: cover; background-position: center; background-color: #eef2f7; }
.cms-postfeed-img-ph { display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: #c2cbd6; }
.cms-postfeed-body { display: flex; flex-direction: column; padding: 1.1rem 1.25rem 1.25rem; flex: 1; }
.cms-postfeed-date { font-size: .8rem; color: #9ca3af; margin-bottom: .35rem; }
.cms-postfeed-h { font-weight: 700; line-height: 1.4; }
.cms-postfeed-more { display: inline-flex; align-items: center; gap: .3rem; margin-top: auto; padding-top: .75rem;
    color: var(--cms-accent, var(--primary, var(--cms-primary))); font-weight: 600; font-size: .9rem; transition: gap .15s; }

/* Post-feed layout modes (grid is the default above). ── */
/* List: full-width horizontal rows (image left, body right). */
.cms-postfeed-mode-list .cms-postfeed { grid-template-columns: 1fr; gap: 1rem; }
.cms-postfeed-mode-list .cms-postfeed-card { flex-direction: row; }
.cms-postfeed-mode-list .cms-postfeed-img { width: 230px; height: auto; min-height: 150px; flex-shrink: 0; }
@media (max-width: 575.98px) {
    .cms-postfeed-mode-list .cms-postfeed-card { flex-direction: column; }
    .cms-postfeed-mode-list .cms-postfeed-img { width: auto; height: 150px; }
}
/* Carousel: a horizontal scroll-snap track with flanking prev/next arrows. */
.cms-postfeed-mode-carousel { position: relative; }
.cms-postfeed-mode-carousel .pf-track { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1.25rem; padding-bottom: .5rem; scrollbar-width: thin; }
.cms-postfeed-mode-carousel .pf-track .cms-postfeed-card { flex: 0 0 clamp(240px, 30%, 330px); scroll-snap-align: start; }
.cms-postfeed-mode-carousel .pf-nav { position: absolute; top: calc(50% + .75rem); transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #fff; color: #1f2733; box-shadow: 0 3px 12px rgba(16,24,40,.18); cursor: pointer; font-size: 1.3rem; line-height: 1; }
.cms-postfeed-mode-carousel .pf-prev { left: -6px; }
.cms-postfeed-mode-carousel .pf-next { right: -6px; }

/* Alert / callout add-on: inline coloured notices (info/success/warning/danger/note). */
.cms-alerts { margin: 1.25rem 0; display: flex; flex-direction: column; gap: .75rem; }
.cms-alert { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; border-radius: 8px;
    border: 1px solid transparent; border-left-width: 4px; }
.cms-alert-icon { font-size: 1.2rem; line-height: 1.4; flex-shrink: 0; }
.cms-alert-body { flex: 1; min-width: 0; }
.cms-alert-head { font-weight: 700; margin-bottom: .1rem; }
.cms-alert-msg { line-height: 1.55; }
.cms-alert-x { flex-shrink: 0; border: 0; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer;
    color: inherit; opacity: .6; padding: 0 .15rem; }
.cms-alert-x:hover { opacity: 1; }
.cms-alert-info    { background: #eaf3fe; border-color: #b6d4fb; color: #0b4a8f; }
.cms-alert-success { background: #e8f7ee; border-color: #b4e3c6; color: #176a39; }
.cms-alert-warning { background: #fff6e6; border-color: #f6dca0; color: #8a5800; }
.cms-alert-danger  { background: #fdecec; border-color: #f5c2c2; color: #9b1c1c; }
.cms-alert-note    { background: #f3f4f6; border-color: #d8dce3; color: #374151; }
.cms-alert-info .cms-alert-icon    { color: #2470d8; }
.cms-alert-success .cms-alert-icon { color: #1f9d57; }
.cms-alert-warning .cms-alert-icon { color: #c98a00; }
.cms-alert-danger .cms-alert-icon  { color: #d83a3a; }
.cms-alert-note .cms-alert-icon    { color: #6b7280; }

/* Card grid add-on: responsive content cards (image + title + text + button), Porto-style hover lift. */
.cms-cards { margin: 1.5rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.cms-card { display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden;
    background: #fff; transition: box-shadow .15s, transform .15s; }
.cms-card-link { text-decoration: none; color: inherit; }
.cms-card:hover { box-shadow: 0 10px 28px rgba(16,24,40,.12); transform: translateY(-4px); }
.cms-card-img { display: block; height: 170px; background-size: cover; background-position: center; background-color: #eef2f7; }
.cms-card-body { display: flex; flex-direction: column; padding: 1.1rem 1.25rem 1.25rem; flex: 1; }
.cms-card-title { font-weight: 700; font-size: 1.1rem; line-height: 1.35; }
.cms-card-text { color: #475569; margin-top: .4rem; line-height: 1.55; }
.cms-card-btn { display: inline-flex; align-items: center; gap: .3rem; margin-top: auto; padding-top: .9rem;
    color: var(--cms-accent, var(--primary, var(--cms-primary))); font-weight: 600; text-decoration: none; transition: gap .15s; }
.cms-card:hover .cms-card-btn { gap: .55rem; }

/* Word Rotator add-on: an animated headline with one rotating word (fade / slide / typewriter). */
.cms-wordrot { margin: 1.25rem 0; }
.cms-wordrot-line { font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 800; line-height: 1.25; margin: 0; }
.cms-wordrot-word { color: var(--cms-accent, var(--primary, var(--cms-primary))); display: inline-block; white-space: nowrap; }
.cms-wordrot-fade { transition: opacity .35s ease; }
.cms-wordrot-fade.is-out { opacity: 0; }
.cms-wordrot-slide { transition: transform .35s ease, opacity .35s ease; }
.cms-wordrot-slide.is-out { transform: translateY(-0.5em); opacity: 0; }
.cms-wordrot-type::after { content: ''; display: inline-block; width: 2px; height: 1em; background: currentColor; margin-left: 3px; vertical-align: -0.12em; animation: cms-wr-caret 1s step-end infinite; }
@keyframes cms-wr-caret { 50% { opacity: 0; } }

/* Read More add-on: long content clamped to a height with a fade gradient + a Read more/less toggle. */
.control-readmore { margin: 1.25rem 0; }
.cms-readmore + .cms-readmore { margin-top: 1.25rem; }
.cms-readmore-content { position: relative; max-height: var(--cms-rm-h, 160px); overflow: hidden; transition: max-height .4s ease; }
.cms-readmore-content > :first-child { margin-top: 0; }
.cms-readmore-content::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4.5rem;
    background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none; transition: opacity .2s; }
.cms-readmore.is-open .cms-readmore-content { max-height: 250vh; }
.cms-readmore.is-open .cms-readmore-content::after,
.cms-readmore-content.cms-rm-fit::after { opacity: 0; }
.cms-readmore-btn { margin-top: .85rem; display: inline-flex; align-items: center; gap: .35rem; border: 0; background: none;
    color: var(--cms-accent, var(--primary, var(--cms-primary))); font-weight: 600; cursor: pointer; padding: 0; }
.cms-readmore-btn i { transition: transform .2s; }
.cms-readmore.is-open .cms-readmore-btn i { transform: rotate(180deg); }
.cms-readmore-center { text-align: center; }
.cms-readmore-right  { text-align: right; }

/* "Configure" placeholder — shown (admin only) where a control was added but has no content yet, so the
   freshly-inserted element is visible + clickable instead of rendering as blank space. */
.cms-configure { display: flex; align-items: center; gap: 14px; border: 2px dashed #c7cdd4; border-radius: 12px;
    background: #f7f9fc; padding: 15px 18px; margin: 12px 0; }
.cms-configure-ico { width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px; background: #e6f1fb;
    color: #185fa5; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.cms-configure-body { flex: 1; min-width: 0; }
.cms-configure-title { font-weight: 600; color: #1f2733; font-size: 15px; }
.cms-configure-note { font-size: 13px; color: #6b7280; }
.cms-configure-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; background: var(--cms-accent, var(--primary, #185fa5));
    color: #fff !important; border-radius: 8px; padding: 8px 14px; font-size: 13px; text-decoration: none !important;
    border: 0; box-shadow: 0 1px 2px rgba(16,24,40,.12); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
/* No anchor underline on hover; instead a subtle lift + deeper shadow, and a pressed (push-in) state. */
.cms-configure-btn:hover, .cms-configure-btn:focus, .cms-configure-btn:visited { color: #fff !important; text-decoration: none !important; }
.cms-configure-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,24,40,.20); filter: brightness(1.04); }
.cms-configure-btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(16,24,40,.18); filter: brightness(.96); }
.cms-configure-btn i { color: inherit; }

/* Modal add-on: a trigger button + a native <dialog>. */
.cms-modals { margin: 1.25rem 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.cms-modal-trigger { border: 0; border-radius: 8px; padding: .6rem 1.3rem; font-weight: 600; cursor: pointer;
    background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; }
.cms-modal-trigger:hover { filter: brightness(1.06); }
.cms-modal-trigger-outline { background: transparent; color: var(--cms-accent, var(--primary, var(--cms-primary)));
    box-shadow: inset 0 0 0 2px currentColor; }
.cms-modal-trigger-link { background: none; padding: .6rem .2rem; color: var(--cms-accent, var(--primary, var(--cms-primary))); text-decoration: underline; }
.cms-modal { border: 0; border-radius: 12px; padding: 0; max-width: 92vw; box-shadow: 0 20px 60px rgba(16,24,40,.3); }
.cms-modal::backdrop { background: rgba(15,20,28,.55); }
.cms-modal[open] { animation: cms-modal-in .2s ease; }
@keyframes cms-modal-in { from { opacity: 0; transform: translateY(10px); } }
.cms-modal-box { position: relative; padding: 1.5rem 1.75rem; }
.cms-modal-sm { width: 360px; } .cms-modal-md { width: 540px; } .cms-modal-lg { width: 760px; }
.cms-modal-x { position: absolute; top: .6rem; right: .7rem; border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #6b7280; }
.cms-modal-x:hover { color: #1f2733; }
.cms-modal-title { margin: 0 1.5rem .75rem 0; font-size: 1.35rem; }
.cms-modal-body { color: #475569; line-height: 1.6; }
.cms-modal-body > :first-child { margin-top: 0; }
.cms-modal-body > :last-child { margin-bottom: 0; }

/* Feature grid add-on */
.control-featuregrid { margin: 1.75rem 0; }
.cms-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; align-items: stretch; }
.cms-feature { display: flex; flex-direction: column; align-items: flex-start; padding: 1.5rem; height: 100%; border: 1px solid #e7ebf0; border-radius: var(--bs-border-radius, 12px); background: #fff; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.cms-feature .cms-feature-link { margin-top: auto; }
.cms-feature:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.08); border-color: color-mix(in srgb, var(--cms-primary) 40%, #e7ebf0); }
.cms-feature-icon { font-size: 2rem; color: var(--cms-accent, var(--primary, var(--cms-primary))); margin-bottom: .5rem; }
.cms-feature-title { margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 700; }
.cms-feature-text { margin: 0; color: #6b7280; line-height: 1.6; }
.cms-feature-link { display: inline-block; margin-top: .5rem; font-weight: 600; text-decoration: none; color: var(--cms-accent, var(--primary, var(--cms-primary))); }

/* Call-to-action band add-on */
.control-cta { margin: 1.75rem 0; }
.cms-cta { border-radius: 12px; padding: 2.5rem 1.5rem; }
.cms-cta-inner { max-width: 760px; margin: 0 auto; }
.cms-cta-center { text-align: center; }
.cms-cta-left .cms-cta-inner { margin-left: 0; }
.cms-cta-accent    { background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; }
.cms-cta-primary   { background: var(--primary, var(--cms-accent, var(--cms-primary))); color: #fff; }
.cms-cta-dark      { background: #1f2733; color: #fff; }
.cms-cta-secondary { background: #475569; color: #fff; }
.cms-cta-success   { background: #2f9e44; color: #fff; }
.cms-cta-danger    { background: #e03131; color: #fff; }
.cms-cta-gradient  { background: linear-gradient(135deg, var(--cms-accent, var(--primary, var(--cms-primary))), #1f2733); color: #fff; }
.cms-cta-light     { background: #f4f6f8; color: #1f2733; }
.cms-cta-muted     { background: #eef2f7; color: #1f2733; }
/* On a light background the white-on-white button would vanish — use the accent fill instead. */
.cms-cta-light .cms-cta-btn-primary, .cms-cta-muted .cms-cta-btn-primary { background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; }
.cms-cta-title { margin: 0 0 .5rem; font-size: 1.75rem; font-weight: 800; }
.cms-cta-text  { margin: 0 0 1.25rem; opacity: .92; font-size: 1.05rem; }
/* The band sets the readable text colour (e.g. #fff on accent); force the heading/sub-text to inherit it so the
   theme's own grey <p>/<h2> colour can't override it and leave low-contrast text on a coloured band. */
.cms-cta .cms-cta-title, .cms-cta .cms-cta-text { color: inherit; }
.cms-cta-btn { display: inline-block; padding: .7rem 1.6rem; border-radius: 8px; font-weight: 600; text-decoration: none; }
.cms-cta-btn-primary { background: #fff; color: #1f2733; }
.cms-cta-light .cms-cta-btn-primary { background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; }
.cms-cta-btn-outline { border: 2px solid currentColor; color: inherit; background: transparent; }
.cms-cta-btn-light { background: rgba(255,255,255,.18); color: #fff; }

/* Contact info card (NAP) */
.cms-contactcard { border: 1px solid #eef2f7; border-radius: 12px; padding: 1.5rem; max-width: 460px; background: #fff; }
.cms-contactcard-title { margin: 0 0 .75rem; font-size: 1.25rem; }
.cms-contactcard-name { font-weight: 700; font-size: 1.05rem; margin-bottom: .5rem; }
.cms-contactcard-row { display: flex; align-items: flex-start; gap: .6rem; margin: .4rem 0; color: #374151; }
.cms-contactcard-row i { color: var(--cms-accent, var(--primary, var(--cms-primary))); margin-top: .15rem; flex: 0 0 auto; }
.cms-contactcard-row a { color: inherit; text-decoration: none; }
.cms-contactcard-row a:hover { text-decoration: underline; }
/* Scoped to the card so it beats the theme's generic .cms-btn; dark wash over the accent keeps white text AA-readable. */
.cms-contactcard .cms-contactcard-dir { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; padding: .55rem 1.1rem;
    border: 0; border-radius: 8px; font-weight: 700; text-decoration: none; color: #fff !important;
    background-color: var(--cms-accent, var(--primary, var(--cms-primary)));
    background-image: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)); }
.cms-contactcard .cms-contactcard-dir:hover { filter: brightness(1.06); }

/* Menu / price list */
.cms-menu { max-width: 720px; }
.cms-menu-section { margin: 1.5rem 0 .5rem; padding-bottom: .35rem; border-bottom: 2px solid var(--cms-accent, var(--primary, var(--cms-primary)));
    font-size: 1.2rem; text-transform: uppercase; letter-spacing: .03em; }
.cms-menu-section:first-child { margin-top: 0; }
.cms-menu-item { display: flex; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1px dotted #e5e7eb; }
.cms-menu-item-main { flex: 1; min-width: 0; }
.cms-menu-item-name { font-weight: 600; }
.cms-menu-item-desc { display: block; color: #6b7280; font-size: .9rem; margin-top: .15rem; }
.cms-menu-item-price { font-weight: 700; white-space: nowrap; color: var(--cms-accent, var(--primary, var(--cms-primary))); }

/* ── Menu build-out: tabs, 2-col grid, thumbnails + lightbox, calories, section banner, PDF ───────── */
.cms-menu { max-width: 1000px; }
.cms-menu-heading { text-align: center; margin: 0 0 .25rem; }
.cms-menu-intro { text-align: center; color: #6b7280; margin: 0 0 1.25rem; }
.cms-menu-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.75rem; border-bottom: 1px solid #e5e7eb; margin-bottom: 1.5rem; }
.cms-menu-tab { background: none; border: 0; padding: .6rem .2rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: .85rem; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cms-menu-tab:hover { color: #111827; }
.cms-menu-tab.is-active { color: var(--cms-accent, var(--primary, #b8860b)); border-bottom-color: var(--cms-accent, var(--primary, #b8860b)); }
.cms-menu-panel.is-hidden { display: none; }
.cms-menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2.5rem; }
@media (max-width: 640px) { .cms-menu-grid { grid-template-columns: 1fr; } }
.cms-menu-grid .cms-menu-item { display: flex; align-items: flex-start; gap: 1rem; padding: .7rem 0; border-bottom: none; }
.cms-menu-thumb { flex: 0 0 auto; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; cursor: pointer; background: #eee; }
.cms-menu-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.cms-menu-thumb:hover img { transform: scale(1.08); }
.cms-menu-item-head { display: flex; align-items: baseline; gap: .5rem; }
.cms-menu-item-head .cms-menu-item-name { font-weight: 700; white-space: nowrap; }
.cms-menu-leader { flex: 1 1 auto; border-bottom: 1px dotted #c7ccd1; transform: translateY(-3px); min-width: 1rem; }
.cms-menu-cal { display: inline-block; margin-top: .25rem; font-size: .75rem; color: #8a8f98; }
.cms-menu-ing { display: block; margin-top: .25rem; font-size: .78rem; color: #8a8f98; }
.cms-menu-ing strong { color: #6b7078; font-weight: 600; }
.cms-menu-item-desc { font-style: italic; }
/* Section banner / special offer */
.cms-menu-banner { position: relative; border-radius: 10px; overflow: hidden; margin-bottom: 1.5rem; background: #1f2733 center/cover no-repeat; color: #fff; }
.cms-menu-banner-in { position: relative; padding: 2rem 1.75rem; background: linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.2)); }
.cms-menu-banner-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 700; opacity: .9; }
.cms-menu-banner-title { margin: .25rem 0 .4rem; font-size: 1.6rem; color: #fff; }
.cms-menu-banner-text { margin: 0 0 .9rem; opacity: .95; }
.cms-menu-banner-btn { display: inline-block; background: var(--cms-accent, var(--primary, #b8860b)); color: #fff; padding: .5rem 1.3rem; border-radius: 6px; font-weight: 700; text-decoration: none; }
/* Download PDF */
.cms-menu-footer { margin-top: 1.5rem; padding: .85rem 1rem; border-top: 1px solid #e6e9ee; background: #f8fafc;
    border-radius: 8px; font-size: .85rem; line-height: 1.5; color: #5a6270; }
.cms-menu-footer i { color: var(--cms-accent, var(--primary, var(--cms-primary))); margin-right: .25rem; }
.cms-menu-pdf { text-align: center; margin-top: 1.75rem; }
.cms-menu-pdf-btn { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #d1d5db; border-radius: 6px; padding: .6rem 1.4rem; font-weight: 600; color: #111827; text-decoration: none; }
.cms-menu-pdf-btn:hover { border-color: var(--cms-accent, var(--primary, #b8860b)); color: var(--cms-accent, var(--primary, #b8860b)); }
/* Lightbox */
.cms-menu-lb { display: none; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; }
.cms-menu-lb-back { position: absolute; inset: 0; background: rgba(0,0,0,.82); }
.cms-menu-lb-fig { position: relative; margin: 0; z-index: 1; display: flex; flex-direction: column; }
.cms-menu-lb-fig img { max-width: 90vw; max-height: 74vh; object-fit: contain; border-radius: 6px 6px 0 0; }
.cms-menu-lb-fig figcaption { background: #fff; padding: .55rem 1rem; border-radius: 0 0 6px 6px; }
.cms-menu-lb-name { font-weight: 700; }
.cms-menu-lb-ing { display: block; color: #6b7280; font-size: .9rem; }
.cms-menu-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: rgba(255,255,255,.9); border: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.cms-menu-lb-prev { left: 3vw; } .cms-menu-lb-next { right: 3vw; }
.cms-menu-lb-close { position: absolute; top: 3vh; right: 3vw; z-index: 2; background: none; border: 0; color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; }
.cms-menu-lb-count { position: absolute; bottom: 3vh; left: 0; right: 0; text-align: center; color: #fff; z-index: 2; font-size: .9rem; }

/* Feature spotlight (alternating image + text rows) */
.cms-spot-row { display: flex; gap: 2.5rem; align-items: flex-start; margin: 2rem 0; }
.cms-spot-row.cms-spot-flip { flex-direction: row-reverse; }
.cms-spot-media { flex: 0 0 38%; min-width: 0; }   /* image takes ~38% — text gets the rest */
.cms-spot-text  { flex: 1 1 0; min-width: 0; }
.cms-spot-media img { width: 100%; height: auto; border-radius: 12px; display: block; }
.cms-spot-title { margin: 0 0 .6rem; }
.cms-spot-body { color: #4b5563; line-height: 1.6; }
.cms-spot-btn { display: inline-block; margin-top: 1rem; padding: .6rem 1.4rem; border-radius: 8px; font-weight: 700;
    background: var(--cms-accent, var(--primary, var(--cms-primary))) !important; color: #fff !important; text-decoration: none; border: 0; }
.cms-spot-btn:hover { color: #fff !important; filter: brightness(.95); }
@@media (max-width: 768px) { .cms-spot-row, .cms-spot-row.cms-spot-flip { flex-direction: column; gap: 1rem; } .cms-spot-media { flex: 1 1 auto; } }
@@media (max-width: 768px) { .cms-spot-row, .cms-spot-row.cms-spot-flip { flex-direction: column; gap: 1rem; } }

/* Multi-step form / wizard */
.cms-wizard { max-width: 640px; }
.cms-wizard-title { margin: 0 0 .25rem; }
.cms-wizard-intro { color: #6b7280; margin: 0 0 1rem; }
.cms-wizard .form-progress { height: 6px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.cms-wizard .form-progress-bar { height: 100%; width: 0; background: var(--cms-accent, var(--primary, var(--cms-primary))); transition: width .25s ease; }
.cms-wizard .form-progress-label { font-size: .85rem; color: #6b7280; margin: .35rem 0 1rem; }
.cms-wizard .form-step { border: 0; padding: 0; margin: 0; }
.cms-wizard-step-title { font-size: 1.1rem; font-weight: 700; padding: 0; margin: 0 0 .75rem; }
.cms-wizard-field { display: block; margin-bottom: .9rem; }
.cms-wizard-label { display: block; font-weight: 600; margin-bottom: .25rem; }
.cms-wizard-req { color: #e03131; }
.cms-wizard-field input[type=text], .cms-wizard-field input[type=email], .cms-wizard-field input[type=tel],
.cms-wizard-field input[type=number], .cms-wizard-field input[type=date], .cms-wizard-field textarea,
.cms-wizard-field select { width: 100%; border: 1px solid #d7dde5; border-radius: 8px; padding: .55rem .7rem; font: inherit; }
.cms-wizard-opts { display: flex; flex-wrap: wrap; gap: .75rem; }
.cms-wizard-opt { font-weight: 400; display: inline-flex; align-items: center; gap: .35rem; }
.cms-wizard-nav { display: flex; gap: .6rem; margin-top: 1rem; }
.cms-wizard-nav .cms-btn { padding: .55rem 1.3rem; border-radius: 8px; font-weight: 700; border: 0; cursor: pointer;
    background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; }
.cms-wizard-nav .form-prev { background: #e9edf2; color: #1f2733; }
.cms-wizard .control-form-done, .cms-wizard + .control-form-done { text-align: center; }

/* Job listings / careers */
.cms-jobs { display: flex; flex-direction: column; gap: 1.1rem; max-width: 820px; }
.cms-job { position: relative; border: 1px solid #e8edf3; border-left: 4px solid transparent; border-radius: 12px;
    padding: 1.3rem 1.5rem; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: box-shadow .15s, transform .15s, border-color .15s; }
.cms-job:hover { box-shadow: 0 10px 28px rgba(0,0,0,.09); transform: translateY(-2px); border-left-color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-job-top { display: flex; align-items: flex-start; gap: 1rem; }
.cms-job-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; color: var(--cms-accent, var(--primary, var(--cms-primary))); background: color-mix(in srgb, var(--cms-primary) 10%, transparent); }
.cms-job-headwrap { flex: 1; min-width: 0; }
.cms-job-title { margin: 0 0 .35rem; font-size: 1.2rem; display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.cms-job-type { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .2rem .6rem;
    border-radius: 999px; background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; }
.cms-job-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; color: #6b7280; font-size: .9rem; }
.cms-job-meta-item { display: inline-flex; align-items: center; gap: .3rem; }
.cms-job-summary { margin: .9rem 0 .25rem; color: #374151; }
.cms-job-details { margin: .25rem 0 0; }
.cms-job-details > summary { cursor: pointer; color: var(--cms-accent, var(--primary, var(--cms-primary))); font-weight: 600; }
.cms-job-desc { margin-top: .6rem; color: #4b5563; line-height: 1.6; }
.cms-job-foot { margin-top: 1rem; }
.cms-job-apply { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem 1.3rem; border-radius: 8px; font-weight: 700;
    color: #fff !important;
    background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; text-decoration: none; }
.cms-jobs-count { color: #6b7280; font-weight: 600; margin-bottom: 1rem; }
.cms-job-title a { color: inherit; text-decoration: none; }
.cms-job-title a:hover { color: var(--cms-accent, var(--primary, var(--cms-primary))); }

/* Job detail page (/careers/{id}) */
.cms-jobpost { max-width: 760px; }
.cms-jobpost-back { display: inline-flex; align-items: center; gap: .35rem; color: #6b7280; text-decoration: none; font-weight: 600; margin-bottom: 1rem; }
.cms-jobpost-back:hover { color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-jobpost-head { border-bottom: 1px solid #e3e8ef; padding-bottom: 1rem; margin-bottom: 1.25rem; }
.cms-jobpost-title { margin: 0 0 .6rem; }
.cms-jobpost-meta { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; color: #6b7280; font-size: .95rem; }
.cms-jobpost-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.cms-jobpost-badge { background: #eef2ff; color: #4338ca; border-radius: 999px; padding: .15rem .7rem; font-weight: 700; font-size: .82rem; }
.cms-jobpost-summary { font-size: 1.15rem; line-height: 1.6; color: #1f2937; margin: 0 0 1.25rem; }
.cms-jobpost-body { color: #374151; line-height: 1.7; }
.cms-jobpost-body p { margin: 0 0 1rem; }
.cms-jobpost-apply { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid #e3e8ef; display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.cms-jobpost-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .75rem 1.7rem; border-radius: 8px; font-weight: 700;
    background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff !important; text-decoration: none; }
.cms-jobpost-btn:hover { filter: brightness(.95); }
.cms-jobpost-back2 { color: #6b7280; text-decoration: none; }
.cms-jobpost-back2:hover { color: var(--cms-accent, var(--primary, var(--cms-primary))); }

/* Glossary (A–Z) */
.cms-glossary { max-width: 760px; }
.cms-glossary-search { width: 100%; border: 1px solid #d7dde5; border-radius: 999px; padding: .55rem 1rem; font: inherit; margin-bottom: .9rem; }
.cms-glossary-az { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1.25rem; }
.cms-glossary-az a { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9rem; height: 1.9rem;
    border-radius: 6px; background: #eef2f7; color: #1f2733; text-decoration: none; font-weight: 600; font-size: .85rem; }
.cms-glossary-az a:hover { background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; }
.cms-glossary-letter { font-size: 1.3rem; color: var(--cms-accent, var(--primary, var(--cms-primary))); border-bottom: 2px solid #eef2f7;
    padding-bottom: .25rem; margin: 1.5rem 0 .5rem; scroll-margin-top: 80px; }
.cms-glossary-list { margin: 0; }
.cms-glossary-item { padding: .5rem 0; border-bottom: 1px dotted #e5e7eb; }
.cms-glossary-term { font-weight: 700; margin: 0; }
.cms-glossary-anchor { color: inherit; text-decoration: none; }
.cms-glossary-anchor:hover { color: var(--cms-primary); }
.cms-glossary-item:target { background: color-mix(in srgb, var(--cms-primary) 8%, transparent); border-radius: 6px; }
.cms-glossary-def { margin: .2rem 0 0; color: #4b5563; line-height: 1.55; }
.cms-glossary-none { color: #6b7280; padding: 1rem 0; }

/* Parallax banner = image background with the caption overlaid: add a gradient scrim so white text stays
   readable over any photo. Scoped to our banner control + the parallax (image-as-background) mode only. */
.control-banners .banner-parallax { position: relative; background-size: cover; background-position: center; }
.control-banners .banner-parallax::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    /* Diagonal scrim for the look + a soft centre radial so text over a light area stays readable. */
    background: radial-gradient(ellipse 75% 85% at center, rgba(0,0,0,.55), rgba(0,0,0,.12) 78%),
                linear-gradient(135deg, rgba(0,0,0,.72), rgba(0,0,0,.40) 55%, rgba(0,0,0,.28)); }
.control-banners .banner-parallax:not(.banner-boxed) figcaption { position: relative; z-index: 5; color: #fff; }
.control-banners .banner-parallax:not(.banner-boxed) figcaption h3,
.control-banners .banner-parallax:not(.banner-boxed) figcaption .banner-text { color: #fff;
    /* Tight dark halo keeps white text crisp on light images. */
    text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 0 10px rgba(0,0,0,.45); }

/* Tabs add-on */
.control-tabs { margin: 1.75rem 0; }
/* The product-detail tabs also use .cms-tabs (as a flex nav row); the add-on uses .cms-tabs as a block
   wrapper around nav + panels, so undo that inherited flex/border/gap here. */
.control-tabs .cms-tabs { display: block; gap: 0; border-bottom: 0; }
.cms-tabs-nav { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 2px solid #e3e8ee; margin-bottom: 1.1rem; }
.cms-tab-btn { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px;
    padding: .6rem 1rem; font-size: 1rem; font-weight: 600; color: #6b7280; cursor: pointer; }
.cms-tab-btn:hover { color: var(--cms-heading, #1f2d3d); }
.cms-tab-btn.is-active { color: var(--cms-accent, var(--primary, var(--cms-primary))); border-bottom-color: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-tab-panel { display: none; }
.cms-tab-panel.is-active { display: block; }

/* Tab look/format variants (set per placement in the Tabs add-on settings). underline = default above. */
/* Alignment of the tab row */
.cms-tabs-align-center .cms-tabs-nav { justify-content: center; }
.cms-tabs-align-end .cms-tabs-nav { justify-content: flex-end; }
.cms-tabs-align-justify .cms-tabs-nav .cms-tab-btn { flex: 1 1 0; text-align: center; }
/* Pills */
.cms-tabs-pills .cms-tabs-nav { border-bottom: 0; gap: .5rem; }
.cms-tabs-pills .cms-tab-btn { border: 1px solid #e3e8ee; border-radius: 999px; margin-bottom: 0; padding: .45rem 1.1rem; }
.cms-tabs-pills .cms-tab-btn.is-active { background: var(--cms-accent, var(--primary, var(--cms-primary))); border-color: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; }
/* Boxed (folder-style tabs joined to the panel) */
.cms-tabs-boxed .cms-tabs-nav { gap: .25rem; border-bottom: 1px solid #e3e8ee; }
.cms-tabs-boxed .cms-tab-btn { border: 1px solid transparent; border-bottom: 0; border-radius: 7px 7px 0 0; margin-bottom: -1px; padding: .55rem 1.1rem; }
.cms-tabs-boxed .cms-tab-btn.is-active { border-color: #e3e8ee; background: #fff; color: var(--cms-accent, var(--primary, var(--cms-primary))); }
/* Vertical (tab rail on the left, panel on the right) */
@media (min-width: 768px) {
    .control-tabs .cms-tabs.cms-tabs-vertical { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 1.5rem; }
    .cms-tabs-vertical .cms-tabs-nav { flex-direction: column; flex-wrap: nowrap; border-bottom: 0; border-right: 2px solid #e3e8ee; margin: 0; }
    .cms-tabs-vertical .cms-tab-btn { border-bottom: 0; border-right: 2px solid transparent; margin: 0 -2px 0 0; text-align: left; }
    .cms-tabs-vertical .cms-tab-btn.is-active { border-right-color: var(--cms-accent, var(--primary, var(--cms-primary))); border-bottom-color: transparent; }
    /* Vertical — rail on the RIGHT (panel left). */
    .control-tabs .cms-tabs.cms-tabs-vertical-right { display: grid; grid-template-columns: 1fr minmax(150px, 220px); gap: 1.5rem; }
    .cms-tabs-vertical-right .cms-tabs-nav { order: 2; flex-direction: column; flex-wrap: nowrap; border-bottom: 0; border-left: 2px solid #e3e8ee; margin: 0; }
    .cms-tabs-vertical-right .cms-tabs-panels { order: 1; }
    .cms-tabs-vertical-right .cms-tab-btn { border-bottom: 0; border-left: 2px solid transparent; margin: 0 0 0 -2px; text-align: left; }
    .cms-tabs-vertical-right .cms-tab-btn.is-active { border-left-color: var(--cms-accent, var(--primary, var(--cms-primary))); border-bottom-color: transparent; }
    .cms-tabs-vertical-right[style*="--cms-tab-accent"] .cms-tab-btn.is-active { border-left-color: var(--cms-tab-accent); border-bottom-color: transparent; }
}

/* Fixed (sticky) tab header — the tab bar stays put while the panel scrolls past. Pins BELOW a fixed/sticky
   site header (--cms-sticky-top is the live header height, kept current by cms-content.js) instead of behind it. */
.cms-tabs-fixed .cms-tabs-nav { position: sticky; top: var(--cms-sticky-top, 0px); z-index: 4; background: #fff; }
.cms-tabs-fixed[style*="--cms-tab-bg"] .cms-tabs-nav { background: var(--cms-tab-bg); }

/* Panel background fill (--cms-tab-bg) from the add-on settings. */
.cms-tabs[style*="--cms-tab-bg"] .cms-tabs-panels { background: var(--cms-tab-bg); padding: 1rem 1.1rem; border-radius: 8px; }

/* "Tab colour" (--cms-tab-accent) FILLS the active tab; "Tab text colour" (--cms-tab-text) is the text on it
   (defaults to white on the fill). Set from the add-on settings; falls back to the theme accent when unset. */
.cms-tabs[style*="--cms-tab-accent"] .cms-tab-btn.is-active {
    background: var(--cms-tab-accent); border-color: var(--cms-tab-accent); border-bottom-color: var(--cms-tab-accent);
    color: var(--cms-tab-text, #fff);
}
.cms-tabs-underline[style*="--cms-tab-accent"] .cms-tab-btn.is-active,
.cms-tabs-boxed[style*="--cms-tab-accent"] .cms-tab-btn.is-active { border-radius: 7px 7px 0 0; }
.cms-tabs-pills[style*="--cms-tab-accent"] .cms-tab-btn.is-active { border-radius: 999px; }
.cms-tabs-vertical[style*="--cms-tab-accent"] .cms-tab-btn.is-active { border-right-color: var(--cms-tab-accent); border-bottom-color: transparent; border-radius: 7px 0 0 7px; }
.cms-tabs-vertical-right[style*="--cms-tab-accent"] .cms-tab-btn.is-active { border-left-color: var(--cms-tab-accent); border-bottom-color: transparent; border-radius: 0 7px 7px 0; }
/* Text colour only (no fill chosen): colour the active tab's text + its underline/border accent. */
.cms-tabs[style*="--cms-tab-text"]:not([style*="--cms-tab-accent"]) .cms-tab-btn.is-active { color: var(--cms-tab-text); border-bottom-color: var(--cms-tab-text); }

/* Booking add-on: appointment-request form */
.control-booking { margin: 1.75rem 0; }
.cms-booking { max-width: 680px; margin: 1.5rem auto; padding: 1.75rem; background: var(--cms-muted-bg, #f6f8fa); border-radius: 12px; }
.cms-booking-title { margin: 0 0 .35rem; }
.cms-booking-intro { color: #5a6472; margin: 0 0 1rem; }
.cms-booking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cms-booking-grid > * { min-width: 0; }
.cms-booking-msg-field { margin-top: .6rem; }
.cms-booking-btn { margin-top: .75rem; }
.cms-booking-msg { min-height: 1.2em; margin-top: .5rem; font-size: .9rem; }
.cms-booking-msg.is-error { color: #d63939; }
.cms-booking-done { padding: .5rem 0; font-weight: 600; color: #2fb344; }
@media (max-width: 560px) { .cms-booking-grid { grid-template-columns: 1fr; } }

/* Image-hotspots add-on */
.control-hotspots { margin: 1.75rem 0; }
.cms-hotspots { margin: 0; }
.cms-hotspots-title { text-align: center; margin: 0 0 1rem; }
.cms-hotspots-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.cms-hotspots-img { max-width: 100%; display: block; border-radius: 10px; }
.cms-hotspot { position: absolute; transform: translate(-50%,-50%); width: 30px; height: 30px; border: 0; border-radius: 50%;
    background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; font-weight: 700; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 1;
    animation: cms-hotspot-pulse 2s infinite; }
.cms-hotspot:hover, .cms-hotspot:focus { outline: 3px solid rgba(255,255,255,.7); }
/* Pulse ring matches the pin's own colour (--cms-accent), not always blue — so a gold/coloured pin doesn't emit a blue ring. */
@keyframes cms-hotspot-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cms-accent, var(--cms-primary)) 50%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.cms-hotspot-pop { position: absolute; transform: translate(-50%, calc(-100% - 18px)); z-index: 2; max-width: 240px;
    background: #1f2d3d; color: #fff; padding: .6rem .8rem; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.3); text-align: left; line-height: 1.4; }
.cms-hotspot-pop-title { display: block; margin-bottom: .2rem; }
.cms-hotspot-pop-desc { font-size: .9rem; opacity: .9; }
/* Button sits on its own line, centred under the description (not flowing inline after the text). */
.cms-hotspot-pop-btn { display: block; width: fit-content; margin: .65rem auto 0; padding: .35rem .8rem; border-radius: 6px;
    background: var(--cms-primary, var(--primary, #0088cc)); color: #fff !important; font-size: .85rem; font-weight: 600;
    text-decoration: none; line-height: 1.3; text-align: center; }
.cms-hotspot-pop-btn:hover { filter: brightness(1.08); color: #fff !important; }

/* Social-share add-on */
.control-sharebar { margin: 1.25rem 0; }
.cms-share { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cms-share-label { font-weight: 600; margin-right: .25rem; }
.cms-share-btn { width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; font-size: 1.1rem;
    display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--cms-heading, #1f2d3d); transition: transform .12s, background .12s; }
.cms-share-btn:hover { transform: translateY(-2px); background: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-share-btn.copied { background: #2fb344; }

/* Floating-contact-button add-on */
.cms-fab { position: fixed; bottom: 22px; z-index: 1040; }
.cms-fab-br { right: 22px; } .cms-fab-bl { left: 22px; }
.cms-fab-toggle { width: 56px; height: 56px; border: 0; border-radius: 50%; cursor: pointer; color: #fff; font-size: 1.5rem;
    background: var(--cms-accent, var(--primary, var(--cms-primary))); box-shadow: 0 4px 16px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; }
.cms-fab-menu { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .6rem; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .18s, transform .18s; }
.cms-fab.is-open .cms-fab-menu { opacity: 1; transform: none; pointer-events: auto; }
.cms-fab-item { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--cms-heading, #1f2d3d); font-size: 1.25rem;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.25); text-decoration: none; }
.cms-fab-item:hover { background: var(--cms-accent, var(--primary, var(--cms-primary))); color: #fff; }
.cms-fab-bl .cms-fab-menu { align-items: flex-start; }

/* Embed-a-widget add-on */
.control-embed { margin: 1.5rem 0; }
.cms-embed { margin: 0; max-width: 900px; margin-left: auto; margin-right: auto; }
.cms-embed-title { text-align: center; margin: 0 0 1rem; }
.cms-embed-fixed { width: 100%; border: 0; border-radius: 10px; }
.cms-embed-frame { position: relative; width: 100%; border-radius: 10px; overflow: hidden; }
.cms-embed-frame.r-16x9 { aspect-ratio: 16 / 9; }
.cms-embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Google-reviews add-on */
.control-reviews { margin: 1.75rem 0; }
.cms-reviews-title { text-align: center; margin: 0 0 .5rem; }
.cms-reviews-summary { text-align: center; margin-bottom: 1.25rem; font-size: 1.05rem; }
.cms-reviews-stars { color: #fbbf24; letter-spacing: 1px; }
.cms-reviews-count { color: #6b7280; }
/* Reviews use the full content width (override the legacy 46rem cap) so 1–12 columns can spread out. */
.control-reviews .cms-reviews { max-width: none; }
.cms-reviews-grid { display: grid; grid-template-columns: repeat(var(--cms-rev-cols, 3), minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 900px) { .cms-reviews-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
@media (max-width: 560px) { .cms-reviews-grid { grid-template-columns: 1fr; } }
/* Compact layout: small clickable cards (photo + name + stars); the review reveals on click (<details>). */
.cms-reviews-compact { gap: .6rem; }
.cms-reviews-compact .cms-review-compact { padding: .7rem .8rem; cursor: pointer; }
.cms-reviews-compact summary.cms-review-head { list-style: none; margin: 0; }
.cms-reviews-compact summary.cms-review-head::-webkit-details-marker { display: none; }
.cms-reviews-compact .cms-review-photo { width: 34px; height: 34px; }
.cms-reviews-compact .cms-review-compact[open] { box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.cms-reviews-compact .cms-review-text { margin-top: .55rem; }
.cms-review { margin: 0; padding: 1.1rem 1.2rem; background: #fff; border: 1px solid #e6e8eb; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.cms-review-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.cms-review-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.cms-review-stars { color: #fbbf24; font-size: .9rem; letter-spacing: 1px; }
.cms-review-text { margin: 0; border: 0; padding: 0; color: #374151; font-size: .95rem; line-height: 1.5; }
.cms-review-when { margin-top: .5rem; color: #9aa3af; font-size: .8rem; }
.cms-faq-detail-answer { color: #1f2733; margin-bottom: 1.25rem; }
.cms-faq-detail-extended { color: #495057; line-height: 1.8; }
.cms-faq-detail-extended > :last-child { margin-bottom: 0; }
.cms-faq-detail-back { margin-top: 2rem; }
.cms-faq-detail-back a { color: var(--cms-accent, var(--primary, var(--cms-primary))); text-decoration: none; }
.cms-staff-pf-h { font-size: 1.5rem; color: #1f2733; margin: 0 0 1rem; }
.cms-staff-pf-bio { color: #495057; line-height: 1.7; }
.cms-staff-pf-bio h2, .cms-staff-pf-bio h3 { color: #1f2733; margin: 1.5rem 0 .75rem; }
.cms-staff-pf-bio p { margin: 0 0 1rem; }

/* ── Search add-on / page: filter tabs + AJAX results ──────────────────────── */
.cms-search-tabs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 1rem 0 1.25rem; }
.cms-search-tab { padding: .4rem 1rem; border: 1px solid #d8dde3; border-radius: 999px; background: #fff; color: #495057;
    font-size: .9rem; font-weight: 600; cursor: pointer; transition: all .12s ease; }
.cms-search-tab:hover { border-color: var(--cms-accent, var(--cms-primary)); color: var(--cms-accent, var(--cms-primary)); }
.cms-search-tab.active { background: var(--cms-accent, var(--cms-primary)); border-color: var(--cms-accent, var(--cms-primary)); color: #fff; }
.cms-search-results[aria-busy="true"] { opacity: .5; transition: opacity .1s; }

/* Form add-on: radio/checkbox groups use Bootstrap form-check (inline). Give the group a little top space
   and the items row-gap so they wrap cleanly. */
.control-form .cms-choices { margin-top: .35rem; display: flex; flex-wrap: wrap; row-gap: .35rem; }
.control-form .cms-choices .form-check { margin-bottom: 0; }
.control-form .cms-choices .form-check-label { margin-left: .15rem; }

/* ── Business directory: spacious table + AJAX name search & type filter ───── */
.cms-dir-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.cms-dir-search { flex: 1 1 240px; min-width: 200px; padding: .6rem .9rem; border: 1px solid #d8dde3; border-radius: 8px; background: #fff; font-size: .95rem; }
.cms-dir-typefilter { padding: .6rem .9rem; border: 1px solid #d8dde3; border-radius: 8px; background: #fff; font-size: .95rem; }
.cms-dir-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cms-dir-table thead th { text-align: left; padding: .85rem 1rem; border-bottom: 2px solid #e5e7eb; color: #1f2733; font-weight: 700; white-space: nowrap; }
.cms-dir-table tbody td { padding: 1rem; border-bottom: 1px solid #eef1f4; vertical-align: top; }
.cms-dir-table tbody tr:hover { background: #f8fafc; }
.cms-dir-name { font-weight: 600; display: block; }
.cms-dir-name a { text-decoration: none; }
.cms-dir-name a:hover { text-decoration: underline; }
.cms-dir-desc { display: block; color: #6b7280; font-size: .88rem; margin-top: .2rem; max-width: 46ch; }
.cms-dir-typebadge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; background: #eef2f7; color: #475569; font-size: .82rem; white-space: nowrap; }
.cms-dir-citycell { white-space: nowrap; color: #495057; }
/* Clickable directory rows → the /directory/{id} business profile */
.cms-dir-row { transition: background .12s ease; }
.cms-dir-row:hover { background: #f6f8fa; }
.cms-dir-name a { color: inherit; text-decoration: none; font-weight: 600; }
.cms-dir-row:hover .cms-dir-name a { color: var(--cms-accent, var(--primary, var(--base-color, var(--cms-primary)))); text-decoration: underline; }
/* Business profile page (/directory/{id}) — reuses the staff-profile two-column shell */
.cms-biz-logo { max-width: 170px; max-height: 96px; object-fit: contain; margin-bottom: .75rem; display: block; }
.cms-biz-map { height: 320px; border-radius: 10px; overflow: hidden; margin-top: .5rem; border: 1px solid #e6e9ee; }
.cms-biz-directions { margin-top: .85rem; display: inline-flex; align-items: center; gap: .4rem; }
.cms-dir-contactcell { white-space: nowrap; }
.cms-dir-contactcell a { color: #495057; text-decoration: none; }
.cms-dir-contactcell a:hover { color: var(--cms-accent, var(--cms-primary)); }
@media (max-width: 600px) { .cms-dir-desc { display: none; } }

/* Snippet block: admin-only "Edit snippet" shortcut (hidden for visitors). */
.control-snippet { position: relative; }
.cms-snippet-edit { display: none; }
html.cms-admin-preview .control-snippet:hover .cms-snippet-edit,
html.cms-admin-preview .cms-snippet-edit { display: inline-flex; align-items: center; gap: .25rem; position: absolute; top: 6px; right: 6px;
    z-index: 5; background: rgba(17,24,39,.82); color: #fff; font-size: .72rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px;
    text-decoration: none; opacity: .85; }
html.cms-admin-preview .cms-snippet-edit:hover { opacity: 1; color: #fff; }

/* Live-chat admin-preview placeholder (hidden for visitors; real widget loads via provider script) */
.cms-livechat-preview{display:none}
.cms-admin-preview .cms-livechat-preview{display:flex;position:fixed;right:18px;bottom:80px;z-index:1190;
  align-items:center;gap:.55rem;background:#1d6ff2;color:#fff;padding:.6rem .9rem;border-radius:1.6rem;
  box-shadow:0 8px 22px rgba(0,0,0,.28);font-size:.85rem;max-width:250px;line-height:1.25}
.cms-admin-preview .cms-livechat-preview i{font-size:1.4rem;flex:0 0 auto}
.cms-admin-preview .cms-livechat-preview small{display:block;opacity:.85;font-size:.68rem;margin-top:2px}

/* Logo wall layout options (#259) */
.cms-logowall.cms-logos-left   { justify-content: flex-start; }
.cms-logowall.cms-logos-center { justify-content: center; }
.cms-logowall.cms-logos-scroll { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
.cms-logowall.cms-logos-scroll::-webkit-scrollbar { display: none; }
.cms-logowall.cms-logos-scroll .cms-logo { flex: 0 0 auto; }
.cms-logowall.cms-logos-grid { display: grid; grid-template-columns: repeat(var(--cms-logo-cols, 4), 1fr); gap: 1.5rem 2.5rem; justify-items: center; align-items: center; }
@media (max-width: 768px) { .cms-logowall.cms-logos-grid { grid-template-columns: repeat(2, 1fr); } }

/* Spotlight layout options (#250) — image size + vertical alignment (image side handled by .cms-spot-flip in markup) */
.cms-spotlight.cms-spot-size-sm .cms-spot-media { flex-basis: 28%; }
.cms-spotlight.cms-spot-size-md .cms-spot-media { flex-basis: 38%; }
.cms-spotlight.cms-spot-size-lg .cms-spot-media { flex-basis: 52%; }
/* Explicit N-of-12 column widths for the image (the text column takes the rest). */
.cms-spotlight.cms-spot-size-col3 .cms-spot-media { flex-basis: 25%; }
.cms-spotlight.cms-spot-size-col4 .cms-spot-media { flex-basis: 33.333%; }
.cms-spotlight.cms-spot-size-col5 .cms-spot-media { flex-basis: 41.666%; }
.cms-spotlight.cms-spot-size-col6 .cms-spot-media { flex-basis: 50%; }
.cms-spotlight.cms-spot-valign-top    .cms-spot-row { align-items: flex-start; }
.cms-spotlight.cms-spot-valign-middle .cms-spot-row { align-items: center; }
.cms-spotlight.cms-spot-valign-bottom .cms-spot-row { align-items: flex-end; }

/* Search add-on: type filter as an in-form dropdown (between input and button) (#275).
   Roomy padding so the label + caret aren't crammed, with a custom chevron (the native arrow sits
   too tight against the text). */
.cms-search-form .cms-search-select,
.control-search .cms-search-select {
  font: inherit; color: inherit; cursor: pointer; flex: 0 0 auto;
  min-width: 7.5rem; max-width: 11rem;
  padding: .55rem 2.1rem .55rem 1rem;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: .72rem; }
.cms-search-form .cms-search-select { border: 1px solid #ced4da; border-radius: 8px; background-color: #fff; margin: 0 .45rem; }
/* Inside the unified bar the filter is borderless with a thin divider on each side. */
.control-search .cms-search-select { border: 0; border-left: 1px solid #e6e9ee; border-right: 1px solid #e6e9ee; background-color: #fbfcfe; }
.control-search .cms-search-select:hover { background-color: #f3f6fb; }
.control-search-hero .control-search { max-width: 38rem; }
@media (max-width: 560px) {
  .control-search, .cms-search-form { flex-wrap: wrap; }
  .control-search .cms-search-select, .cms-search-form .cms-search-select { max-width: none; flex: 1 1 100%; }
}

/* CTA band corner styles (#239) — applied to the band and its button */
.cms-cta.cms-cta-corner-square  { border-radius: 0; }
.cms-cta.cms-cta-corner-rounded { border-radius: 14px; }
.cms-cta.cms-cta-corner-pill    { border-radius: 999px; }
.cms-cta-corner-square  .cms-cta-btn { border-radius: 0; }
.cms-cta-corner-rounded .cms-cta-btn { border-radius: 10px; }
.cms-cta-corner-pill    .cms-cta-btn { border-radius: 999px; }

/* Location card email + website links (#258) — match the existing phone/directions links */
.cms-loc-email, .cms-loc-web { display: inline-flex; align-items: center; gap: .25rem; margin-top: .15rem; }
.cms-loc-email { display: block; }

/* Customer order status tracker (#265) */
.cms-order-stepper { list-style: none; display: flex; gap: 0; padding: 0; margin: 1rem 0 1.5rem; counter-reset: step; }
.cms-order-stepper .cms-step { flex: 1; position: relative; text-align: center; font-size: .85rem; color: #97a3b4; min-width: 0; }
.cms-order-stepper .cms-step-dot { display: block; width: 18px; height: 18px; border-radius: 50%; background: #cfd6e0; margin: 0 auto .4rem; position: relative; z-index: 1; }
.cms-order-stepper .cms-step::before { content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 3px; background: #cfd6e0; z-index: 0; }
.cms-order-stepper .cms-step:first-child::before { display: none; }
.cms-order-stepper .cms-step-done .cms-step-dot,
.cms-order-stepper .cms-step-current .cms-step-dot { background: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-order-stepper .cms-step-done::before { background: var(--cms-accent, var(--primary, var(--cms-primary))); }
.cms-order-stepper .cms-step-done, .cms-order-stepper .cms-step-current { color: #1f2d3d; font-weight: 600; }
.cms-order-stepper .cms-step-current .cms-step-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cms-accent, var(--cms-primary)) 25%, transparent); }
.cms-order-stepper.is-exception { display: block; background: #fff4f4; border: 1px solid #f3c0c0; color: #9b1c1c; padding: .7rem 1rem; border-radius: 8px; font-weight: 600; }

/* Built-in product bundle: "This bundle includes" on the product page (#270) */
.cms-pd-bundle { margin: .9rem 0; padding: .8rem 1rem; border: 1px solid #e6eaf0; border-radius: 10px; background: #fafbfc; }
.cms-pd-bundle-h { font-size: .95rem; margin: 0 0 .5rem; display: flex; align-items: center; gap: .4rem; }
.cms-pd-bundle-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.cms-pd-bundle-list li { display: flex; align-items: center; gap: .4rem; }
.cms-pd-bundle-list li::before { content: "\2713"; color: var(--cms-accent, var(--primary, var(--cms-primary))); font-weight: 700; }
.cms-pd-bundle-qty { color: #8a94a3; font-size: .85em; }

/* Contact-page builder (#269): map + form + info-from-variables */
.cms-contactsec { margin: 0 0 1.5rem; }
.cms-contactsec-h { margin: 0 0 .3rem; }
.cms-contactsec-intro { color: #5b6b7b; margin: 0 0 1rem; }
/* Full-bleed map flush to the top: break out of the content container to span the full viewport width, with no
   top margin and square corners so it sits tight against the top of the page. */
.cms-contactsec-map { width: 100vw; max-width: 100vw; margin: 0 0 1.5rem calc(50% - 50vw); border-radius: 0; overflow: hidden; }
.cms-contactsec-map iframe { width: 100%; height: 360px; border: 0; display: block; }
.cms-contactsec-map .cms-contactsec-leaflet { width: 100%; height: 360px; }
.cms-contactsec-map .cms-contactsec-leaflet .leaflet-container { height: 100%; }
/* Shorter map on phones so the form isn't pushed too far down. */
@media (max-width: 576px) { .cms-contactsec-map .cms-contactsec-leaflet, .cms-contactsec-map iframe { height: 250px; } }
/* Layout is now Bootstrap .row / .col-lg-6 (matches the Porto contact page) — no custom grid here. */
.cms-contactsec-field { display: block; margin-bottom: .9rem; }
.cms-contactsec-field span { display: block; font-weight: 600; margin-bottom: .25rem; font-size: .9rem; }
.cms-contactsec-field input, .cms-contactsec-field textarea { width: 100%; padding: .6rem .8rem; border: 1px solid #ced4da; border-radius: 8px; font: inherit; }
.cms-contactsec-send { margin-top: .3rem; }
/* Info side is plain like the Porto reference (no boxed card); on desktop it gets left padding so it isn't
   crammed against the form. */
.cms-contactsec-info { padding-top: .5rem; }
@media (min-width: 992px) { .cms-contactsec-info { padding-left: 2.5rem; } }
.cms-contactsec-name { font-weight: 700; font-size: 1.05rem; margin-bottom: .6rem; }
.cms-contactsec-row { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .55rem; }
.cms-contactsec-row i { color: var(--cms-accent, var(--primary, var(--cms-primary))); margin-top: 2px; }
/* Weekly hours pulled from the Business-hours add-on, shown compactly in the contact info panel. */
.cms-contactsec-hours-list { flex: 1; }
.cms-contactsec-hrow { display: flex; justify-content: space-between; gap: 1rem; padding: .1rem 0; font-size: .92rem; }
.cms-contactsec-hday { font-weight: 600; min-width: 2.75rem; }
.cms-contactsec-hrow.is-today { color: var(--cms-accent, var(--primary, var(--cms-primary))); font-weight: 600; }
.cms-contactsec-htime { text-align: right; }
.cms-contactsec-socials { display: flex; gap: .6rem; margin-top: .8rem; }
.cms-contactsec-socials a { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 1px solid #e0e6ee; color: #48566a; }

/* Spin wheel: numbered segments + colour-coded legend when >6 (#280) */
.cms-spin-wheel.cms-spin-numbered .cms-spin-cap span { font-size: 1.15rem; font-weight: 700; }
.cms-spin-legend { list-style: none; padding: 0; margin: 1rem auto 0; max-width: 440px;
  display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .9rem; text-align: left; font-size: .9rem; }
.cms-spin-legend li { display: flex; align-items: center; gap: .5rem; }
.cms-spin-leg-sw { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; }
.cms-spin-leg-n { font-weight: 700; min-width: 1.2em; }
@media (max-width: 480px) { .cms-spin-legend { grid-template-columns: 1fr; } }

/* Jobs rework (#255): aligned card body + richer detail facts/benefits */
.cms-job { display: block; }
.cms-job-body { min-width: 0; }
/* Header row: icon + title + type badge all vertically centred on one line. */
.cms-job-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .55rem; }
.cms-job-head .cms-job-icon { flex: 0 0 auto; }
.cms-job-head .cms-job-title { margin: 0; flex-wrap: nowrap; }
/* The theme makes heading links block/full-width, which wrapped the type badge onto a 2nd line. Keep it inline. */
.cms-job-head .cms-job-title a { display: inline; width: auto; flex: 0 1 auto; }
.cms-job-body .cms-job-meta { margin-top: .3rem; }
.cms-job-body .cms-job-summary { margin: .7rem 0 .25rem; }
.cms-job-body .cms-job-foot { margin-top: .9rem; }
.cms-jobpost-facts { display: flex; flex-wrap: wrap; gap: .8rem 2rem; background: #f8fafc; border: 1px solid #e6eaf0;
  border-radius: 10px; padding: 1rem 1.2rem; margin: 1.2rem 0; }
.cms-jobpost-fact { display: flex; flex-direction: column; }
.cms-jobpost-fact b { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #8a94a3; font-weight: 700; }
.cms-jobpost-benefits { margin: 1.4rem 0; }
.cms-jobpost-benefits h2 { font-size: 1.15rem; margin-bottom: .6rem; }
.cms-jobpost-benefits ul { list-style: none; padding: 0; margin: 0; }
.cms-jobpost-benefits li { display: flex; gap: .5rem; margin-bottom: .45rem; color: #374151; }
.cms-jobpost-benefits li::before { content: "\2713"; color: var(--cms-accent, var(--primary, var(--cms-primary))); font-weight: 700; flex: 0 0 auto; }

/* Poll open/close states (#267) */
.cms-poll-note { color: #6b7280; font-size: .9rem; margin: .3rem 0 .8rem; display: inline-flex; align-items: center; gap: .4rem; }
.cms-poll-opt:disabled { opacity: .55; cursor: not-allowed; }

/* Built-in cart free-shipping progress bar (#254) */
.cms-cart-freeship { margin: 0 0 1.2rem; }
.cms-cart-freeship-msg { font-size: .95rem; margin-bottom: .4rem; }
.cms-cart-freeship-msg.is-met { color: #12805c; font-weight: 600; }
.cms-cart-freeship-track { height: 8px; border-radius: 999px; background: #e9eef3; overflow: hidden; }
.cms-cart-freeship-fill { height: 100%; background: var(--cms-accent, var(--primary, var(--cms-primary))); transition: width .3s; }

/* Sticky footer: on short pages, grow the main content so the footer sits at the bottom of the
   viewport instead of leaving a white gap below it (Porto-family structure: body > .body > .main + footer). */
body > .body { display: flex; flex-direction: column; min-height: 100vh; }
body > .body > .main { flex: 1 0 auto; }
body > .body > footer { flex-shrink: 0; }

/* Accessibility: honour the OS "Reduce motion" setting site-wide. Animations/transitions become near-instant,
   smooth-scroll is disabled, and infinite loops (carousels, count-ups, countdowns, spin-to-win, marquees) stop.
   Standard safe pattern — content still appears; it just doesn't move for users who asked it not to. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* "Skip to content" link (WCAG 2.4.1): off-screen until keyboard-focused, then pinned top-left. Uses the
   theme primary colour where available. Injected right after <body> by ThemeRenderer.InjectSkipLink. */
.cms-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100000;
  padding: 10px 16px; border-radius: 0 0 6px 0;
  background: var(--tblr-primary, #206bc4); color: #fff; text-decoration: none; font-weight: 600;
}
.cms-skip-link:focus { left: 0; outline: 3px solid #fff; outline-offset: -3px; }
[id="cms-main"]:focus { outline: none; }

/* A11y: visible KEYBOARD focus on interactive elements. :focus-visible fires only on keyboard navigation, so
   mouse users see no change. Element+pseudo specificity beats a theme's `*:focus{outline:none}`. (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--cms-primary, var(--tblr-primary, #206bc4));
  outline-offset: 2px;
}
/* A11y: comfortable ≥44px tap targets for our floating/icon controls (WCAG 2.5.8). Scoped to CMS controls only,
   so the theme's own buttons/layout are untouched. */
.cms-fab-toggle, .cms-fab-item, .cms-backtotop, .cms-a11y-fab, .cms-a11y-toggle, .cms-popup-x, .cms-qv-close {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}

/* A11y fix (AXE color-contrast): contact-section phone/email/address links inherited the light theme accent
   (#cc9966 on near-white = 2.41:1, fails WCAG AA). Use dark, underlined text — high contrast + a non-colour
   affordance — with the brand colour on hover. */
.cms-contactsec-row a, .cms-contactsec a[href^="tel:"], .cms-contactsec a[href^="mailto:"] {
  color: #1f2d3d; text-decoration: underline;
}
.cms-contactsec-row a:hover, .cms-contactsec a[href^="tel:"]:hover, .cms-contactsec a[href^="mailto:"]:hover {
  color: var(--cms-primary, #206bc4);
}

/* ── Menu overflow ("More ▾") — cms-content.js folds top-menu items that don't fit into this item ──
   The panel clones the theme's dropdown classes when available, but a dynamically added item may not be
   wired to the theme's dropdown JS — so open it on hover/focus/click here, theme-independently. Links
   forced readable-dark: moved items keep their top-level classes, which a dark header often colours white. */
.cms-more-item { position: relative; }
.cms-more-item > ul { display: none; }
.cms-more-item:hover > ul,
.cms-more-item:focus-within > ul,
.cms-more-item.open > ul {
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    min-width: 12rem;
    z-index: 1050;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    padding: .35rem 0;
    margin: 0;
    list-style: none;
}
.cms-more-item > ul > li { display: block; white-space: nowrap; margin: 0; float: none; }
.cms-more-item > ul > li > a {
    display: block;
    padding: .45rem 1rem;
    color: #2e353e !important;
    text-shadow: none !important;
}
.cms-more-item > ul > li > a:hover { background: #eef2f7; color: #11151c !important; }

/* ── Mega-menu polish (industry-standard look: titled columns, calm links, featured promo card) ──
   Overrides Porto's dropdown-mega-* styling for CMS-rendered mega menus (.cms-mega only). */
.cms-mega { padding: 1.9rem 2.1rem 1.6rem !important; background: #fff !important; }
/* Even, gutter-separated columns (kills the cramped / ragged-edge look). A flat list is now a few tall columns
   (see the renderer), so only a small safety row-gap for any menu that still wraps. */
.cms-mega > .row { margin-inline: -0.85rem; row-gap: .6rem; }
.cms-mega > .row > [class*="col-"] { padding-inline: 0.85rem; }
.cms-mega .dropdown-mega-sub-title,
.cms-mega a.cms-mega-title {
    display: block; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: #1f2d3d; margin: 0 0 .7rem; padding-bottom: .5rem; text-decoration: none;
    border-bottom: 2px solid color-mix(in srgb, var(--cms-accent, var(--cms-primary, #0088cc)) 30%, transparent);
}
.cms-mega a.cms-mega-title:hover { color: var(--cms-accent, var(--cms-primary, #0088cc)); }
.cms-mega .dropdown-mega-sub-nav { list-style: none; margin: 0; padding: 0; }
.cms-mega .dropdown-mega-sub-nav > li { margin: 0; }
/* Links: calm, single subtle hover — no heavy Porto/Bootstrap fill, no caret, wraps cleanly. */
.cms-mega .dropdown-mega-sub-nav > li > a,
.cms-mega .dropdown-item {
    display: block; padding: .32rem .1rem !important; margin: 0 !important; font-size: .85rem; line-height: 1.35;
    color: #4b5563 !important; background: none !important; box-shadow: none !important; white-space: normal;
    text-decoration: none; border-radius: .3rem; transition: color .12s ease, transform .12s ease, background-color .12s ease;
}
.cms-mega .dropdown-mega-sub-nav > li > a:hover,
.cms-mega .dropdown-mega-sub-nav > li > a:focus,
.cms-mega .dropdown-item:hover,
.cms-mega .dropdown-item:focus {
    color: var(--cms-accent, var(--cms-primary, #0088cc)) !important;
    background: color-mix(in srgb, var(--cms-accent, var(--cms-primary, #0088cc)) 8%, transparent) !important;
    transform: translateX(3px); padding-inline: .45rem .1rem !important;
}
/* Optional per-page menu icon: a small fixed-width glyph before the label, tinted to the theme accent.
   Fixed inline-block width keeps the labels aligned into a neat column whether or not each has an icon. */
.cms-mega .cms-mega-ico {
    display: inline-block; width: 1.35em; margin-right: .1rem; font-size: 1.02em; line-height: 1;
    text-align: center; vertical-align: -1px; color: var(--cms-accent, var(--cms-primary, #0088cc)); opacity: .85;
}
.cms-mega a.cms-mega-title .cms-mega-ico { opacity: 1; }
.cms-mega .dropdown-mega-sub-nav > li > a:hover .cms-mega-ico,
.cms-mega .dropdown-item:hover .cms-mega-ico { opacity: 1; }
/* Plain (untitled) link columns line up with the titled columns' first link. */
.cms-mega.has-titles .cms-mega-plain { margin-top: 1.9rem; }
/* Featured promo card: soft panel so it reads as a highlight, not another column of text. */
.cms-mega .cms-mega-feature { background: #f6f8fa; border-radius: .6rem; padding: 1rem 1.1rem; border-left: 0 !important; }
.cms-mega .cms-mega-feature img { border-radius: .45rem; width: 100%; object-fit: cover; max-height: 140px; }
.cms-mega .cms-mega-feature .dropdown-mega-sub-title { border-bottom: 0; padding-bottom: 0; margin-bottom: .35rem; font-size: .8rem; }
.cms-mega .cms-mega-feature p { font-size: .82rem; color: #5b6472; }

/* ── Module landing cards ─────────────────────────────────────────────────────
   Shared card system for the module public pages (/practice-areas, /case-studies, /courses,
   /accommodations, /real-estate). One look everywhere: image (or icon-gradient fallback) media,
   category kicker, clamped summary, icon facts, arrow link, hover lift + zoom. Pages emit the
   markup from their models; only the classes live here. */
.cms-mod{--mod-accent:var(--cms-accent,var(--cms-primary,#2563eb))}
.cms-mod-head{display:flex;align-items:center;gap:.75rem;margin:2.4rem 0 1.2rem}
.cms-mod-head:first-child{margin-top:0}
.cms-mod-head h2{margin:0;font-size:1.55rem;font-weight:700}
.cms-mod-head::before{content:"";width:6px;height:1.7rem;border-radius:3px;background:var(--mod-accent)}
.cms-mod-n{color:#94a3b8;font-weight:600;font-size:.95rem}
.cms-mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem}
.cms-mod-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #e6e9ee;border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(16,24,40,.06);transition:transform .2s,box-shadow .2s;text-decoration:none;color:inherit}
.cms-mod-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(16,24,40,.14);text-decoration:none}
.cms-mod-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--mod-accent) 82%,#000 0%),color-mix(in srgb,var(--mod-accent) 45%,#0f172a))}
.cms-mod-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cms-mod-card:hover .cms-mod-media img{transform:scale(1.06)}
.cms-mod-ic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:3.2rem;color:rgba(255,255,255,.65)}
.cms-mod-chip{position:absolute;top:12px;left:12px;background:var(--mod-accent);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.3rem .75rem;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.cms-mod-chip--right{left:auto;right:12px}
.cms-mod-chip--dark{background:rgba(15,23,42,.85)}
.cms-mod-body{display:flex;flex-direction:column;flex:1;padding:1.15rem 1.3rem 1.25rem}
.cms-mod-kicker{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mod-accent);margin:0 0 .3rem}
.cms-mod-title{font-size:1.12rem;font-weight:700;line-height:1.3;margin:0 0 .35rem;color:#111827}
.cms-mod-card:hover .cms-mod-title{color:var(--mod-accent)}
.cms-mod-sub{display:flex;align-items:center;gap:.35rem;font-size:.84rem;color:#6b7280;margin:0 0 .5rem}
.cms-mod-sum{font-size:.9rem;line-height:1.55;color:#4b5563;margin:0 0 .95rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cms-mod-facts{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.84rem;color:#475569;margin:0 0 .8rem}
.cms-mod-facts span{display:inline-flex;align-items:center;gap:.35rem}
.cms-mod-facts i{color:var(--mod-accent)}
.cms-mod-go{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mod-accent)}
.cms-mod-go i{transition:transform .18s}
.cms-mod-card:hover .cms-mod-go i{transform:translateX(4px)}
.cms-mod-price{font-size:1.3rem;font-weight:800;color:var(--mod-accent);margin:0 0 .1rem}
.cms-mod-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.75rem}
.cms-mod-pill{display:inline-block;padding:.42rem 1.1rem;border-radius:999px;border:1px solid #d7dce3;color:#475569;font-weight:600;font-size:.9rem;text-decoration:none;transition:.15s;background:#fff}
.cms-mod-pill:hover{border-color:var(--mod-accent);color:var(--mod-accent);text-decoration:none}
.cms-mod-pill.is-on{background:var(--mod-accent);border-color:transparent;color:#fff}
.cms-mod-filterbar{background:#f7f8fa;border:1px solid #e6e9ee;border-radius:14px;padding:1.1rem 1.35rem;margin:0 0 1.75rem}
.cms-mod-empty{color:#6b7280;background:#f7f8fa;border:1px dashed #d7dce3;border-radius:14px;padding:2.5rem;text-align:center}

/* ── v2026.07.04.12 bug-fix batch: new element styles ─────────────────────── */
/* Documents: tag chips + accordion-by-section layout */
.cms-docrepo-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.25rem}
.cms-docrepo-tag{display:inline-block;font-size:.72rem;line-height:1;padding:.22rem .5rem;border-radius:999px;background:#eef2f7;color:#475569;border:1px solid #e2e8f0}
.cms-docrepo-sec{border:1px solid #e5e7eb;border-radius:10px;margin:.8rem 0;background:#fff;overflow:hidden}
.cms-docrepo-sec>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;font-weight:700;background:#f8fafc}
.cms-docrepo-sec>summary::-webkit-details-marker{display:none}
.cms-docrepo-sec>summary::before{content:"▸";transition:transform .15s ease}
.cms-docrepo-sec[open]>summary::before{transform:rotate(90deg)}
.cms-docrepo-sec-n{margin-left:auto;font-size:.75rem;font-weight:600;background:#e2e8f0;color:#475569;border-radius:999px;padding:.15rem .55rem}
.cms-docrepo-sec .cms-docrepo-table{margin:0;border:0}
/* Audio library: track description line */
.cms-lib-desc{font-size:.85rem;color:#64748b;margin-top:.2rem;line-height:1.4}
/* Business directory: listing thumbnail beside the name */
.cms-dir-bizcell{display:flex;align-items:flex-start;gap:.6rem}
.cms-dir-thumb{width:46px;height:46px;object-fit:cover;border-radius:8px;flex:0 0 auto;border:1px solid #e5e7eb}
.cms-dir-biztext{display:flex;flex-direction:column;min-width:0}
/* Calendar: upcoming-list event description */
.cal-event-desc{font-size:.85rem;color:#64748b;margin-top:.2rem;line-height:1.4}
/* Job posting: closed notice */
.cms-jobpost-closed{display:flex;align-items:center;gap:.5rem;background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-radius:10px;padding:.7rem 1rem;margin:.9rem 0;font-weight:600}
/* FAQ: inline full answer shown when no detail page exists */
.cms-faq-full{border-top:1px dashed #e2e8f0;padding-top:.6rem}
/* FAQ add-on layout options (align + width from page_faq_setup) */
.cms-faq-w-narrow { max-width: 700px; }
.cms-faq-w-wide   { max-width: 950px; }
.cms-faq-al-left   { margin-right: auto; }
.cms-faq-al-center { margin-left: auto; margin-right: auto; }
.cms-faq-al-right  { margin-left: auto; }
/* Related-services internal-link strip — a tidy card of sibling service links (AI builder + editor). */
.cms-related { margin: 2.5rem 0 1rem; padding: 1.25rem 1.5rem; border: 1px solid color-mix(in srgb, var(--cms-primary, #206bc4) 22%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--cms-primary, #206bc4) 5%, transparent); }
.cms-related-h { margin: 0 0 .75rem; font-size: 1.15rem; }
.cms-related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .5rem; }
.cms-related-list li { margin: 0; }
.cms-related-list a { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .85rem; border-radius: 999px; background: #fff; border: 1px solid color-mix(in srgb, var(--cms-primary, #206bc4) 25%, transparent); color: var(--cms-primary, #206bc4); text-decoration: none; font-weight: 500; font-size: .95rem; transition: background .12s, color .12s; }
.cms-related-list a::before { content: "\2192"; font-weight: 700; }
.cms-related-list a:hover { background: var(--cms-primary, #206bc4); color: #fff; }

/* Generated + editor content polish (scoped to richtext blocks so admin/other controls are untouched):
   a larger lead paragraph, comfortable heading rhythm, and readable brand-tinted bullet lists. */
.block-richtext > p:first-of-type:not(.text-center) { font-size: 1.15rem; line-height: 1.75; color: color-mix(in srgb, currentColor 88%, transparent); }
.block-richtext h2 { margin: 1.9rem 0 .7rem; line-height: 1.25; }
.block-richtext h3 { margin: 1.4rem 0 .5rem; line-height: 1.3; }
.block-richtext > p { line-height: 1.7; }
/* Imported checklists (symptoms / causes / warning signs) read best in TWO columns (6/6), not a cramped 3/3/3/3 —
   Robin's repeated preference. Two columns on desktop/tablet, single column on phones. */
.block-richtext ul:not([class]) { list-style: none; margin: 1rem 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1.75rem; }
@media (max-width: 575.98px) { .block-richtext ul:not([class]) { grid-template-columns: 1fr; } }
.block-richtext ul:not([class]) > li { position: relative; padding-left: 1.6rem; line-height: 1.55; }
.block-richtext ul:not([class]) > li::before { content: "\2713"; position: absolute; left: 0; top: .05rem; font-weight: 700; font-size: .8rem; color: var(--cms-primary, #206bc4); }
.block-richtext ul:not([class]) ul:not([class]) { grid-template-columns: 1fr; margin: .35rem 0 .35rem; }

/* Imported "linked card list" (Duda list-of-services): each item = a bold dark heading + its paragraph, stacked
   full-width with a light divider — matching how the source renders it (not the cramped checklist grid above). */
.block-richtext .cms-listcards { list-style: none; margin: 1.25rem 0; padding: 0; }
.block-richtext .cms-listcard { padding: 0 0 1rem; margin: 0 0 1rem; border-bottom: 1px solid #e6e9ee; }
.block-richtext .cms-listcard:last-child { border-bottom: 0; margin-bottom: 0; }
.block-richtext .cms-listcard > h3 { margin: 0 0 .35rem; color: #2b2f36; }
.block-richtext .cms-listcard > p { margin: 0; line-height: 1.7; }

/* Long imported bullet list (a "Label: explanation" each) — stacked one per line with a checkmark, NOT the
   side-by-side checklist grid (Robin: "I like the bullets each to their own line better"). */
.block-richtext ul.cms-bullets { list-style: none; margin: 1rem 0 1.25rem; padding: 0; display: block; }
.block-richtext ul.cms-bullets > li { position: relative; padding-left: 1.6rem; margin: 0 0 .6rem; line-height: 1.6; }
.block-richtext ul.cms-bullets > li::before { content: "\2713"; position: absolute; left: 0; top: .05rem; font-weight: 700; font-size: .8rem; color: var(--cms-primary, #206bc4); }

/* Site-wide "get in touch" band shown above the footer on every page (ThemeRenderer.RenderSiteContactFormAsync).
   Full-width accent strip; the 3 short fields sit in a row on desktop and stack on phones. */
.cms-contactband { background: var(--cms-primary, #206bc4); color: #fff; padding: 3rem 0; }
.cms-contactband .cms-container { max-width: 960px; margin: 0 auto; padding: 0 1rem; }
.cms-contactband-h { color: #fff; margin: 0 0 .35rem; font-weight: 700; }
.cms-contactband-sub { color: rgba(255,255,255,.9); margin: 0 0 1.4rem; }
.cms-contactband-sub a { color: #fff; text-decoration: underline; }
.cms-contactband-form .form-label { color: rgba(255,255,255,.95); font-weight: 600; margin-bottom: .25rem; display: block; }
.cms-contactband-form .form-control,
.cms-contactband-form .form-select { width: 100%; padding: .6rem .75rem; border: 1px solid rgba(255,255,255,.5); border-radius: 8px; background: rgba(255,255,255,.96); color: #1a1a1a; }
.cms-contactband-form .form-group { margin-bottom: 1rem; }
.cms-contactband-form textarea.form-control { min-height: 7rem; }
.cms-contactband-form .cms-required-star { color: #ffe08a; margin-left: .15rem; }
.cms-contactband-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.cms-contactband-btn { margin-top: .25rem; background: #fff; color: #1f4d00; border: 0; font-weight: 700; font-size: 1rem; padding: .7rem 1.9rem; border-radius: 8px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.cms-contactband-btn:hover { background: #f3f3f3; color: #163a00; }
@media (max-width: 640px) { .cms-contactband-row { grid-template-columns: 1fr; } }

/* "columns" blocks (incl. the imported location page's text col-6 + contact-us col-6) must stack on phones —
   a text column beside a contact form squished to 50/50 on a small screen is unreadable. cms-content.css is
   loaded on every site, so this collapse also covers Porto / imported theme clones that ship no such rule. */
@media (max-width: 767.98px) { .block-columns { grid-template-columns: 1fr !important; } }