/**
Theme Name: HyperChild
Author: Hyperstill
Author URI: http://hyperstill.ca
Description: Child Theme For WooCommerce
Version: 1.0.14
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hyperchild
Template: astra
*/

/* =========================================================
   STYLESHEET MAP
   =========================================================
   1. Global layout tokens, page shell, and grid utilities
   2. Interaction utilities
   3. Responsive grid system
   4. Image rules and crops
   5. Header system and responsive header
   6. Global search
   7. Hero (container, media, shade, content, rails, copy, route row)
   8. Footer system and responsive footer
   9. Existing comment system
   ========================================================= */

/* =========================================================
   HYPERSTILL 2.0 — GLOBAL LAYOUT SYSTEM
   ========================================================= */

:root {
    --hs-width-standard: 1440px;
    --hs-width-wide: 1800px;
    --hs-width-reading: 760px;

    --hs-gutter: clamp(20px, 4vw, 64px);
    --hs-section-space: clamp(72px, 8vw, 144px);
    --hs-grid-gap: clamp(20px, 2.5vw, 48px);

    --hs-space-1: 12px;
    --hs-space-2: 24px;
    --hs-space-3: 40px;
    --hs-space-4: 64px;
    --hs-space-5: 96px;
    --hs-space-6: 144px;

    --hs-touch-target: 44px;

    /* Brand color */
    --hs-maroon: #822b2a;

    /* Fonts */
    --hs-font-display: "Bodoni Moda", serif;
    --hs-font-body: "Schibsted Grotesk", system-ui, sans-serif;
    --hs-font-mono: "Roboto Mono", ui-monospace, monospace;

    /* Type scale (max sizes: 5.5 / 3 / 2 / 1.25 / 1 / .825rem) */
    --hs-text-h1: clamp(3.5rem, 2.2rem + 4vw, 5.5rem);
    --hs-text-h2: clamp(2rem, 1.4rem + 1.8vw, 3rem);
    --hs-text-h3: clamp(1.25rem, .9rem + 1.2vw, 2rem);
    --hs-text-h4: 1.25rem;
    --hs-text-body: 1rem;
    --hs-text-meta: .825rem;
}

/* Responsive page shell */
.hs-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-inline: var(--hs-gutter);
}

/* Standard content width */
.hs-container-standard {
    width: 100%;
    max-width: var(--hs-width-standard);
    margin-inline: auto;
}

/* Wide content width */
.hs-container-wide {
    width: 100%;
    max-width: var(--hs-width-wide);
    margin-inline: auto;
}

/* Reading width */
.hs-reading-width {
    width: 100%;
    max-width: var(--hs-width-reading);
    margin-inline: auto;
}

/* Standard section spacing */
.hs-section {
    padding-block: var(--hs-section-space);
}

/* Standard grid gap */
.hs-grid {
    gap: var(--hs-grid-gap);
}

.hs-gap-1 { gap: var(--hs-space-1); }
.hs-gap-2 { gap: var(--hs-space-2); }
.hs-gap-3 { gap: var(--hs-space-3); }
.hs-gap-4 { gap: var(--hs-space-4); }
.hs-gap-5 { gap: var(--hs-space-5); }
.hs-gap-6 { gap: var(--hs-space-6); }

/* Long URLs, filenames, IDs and unbroken strings */
.hs-break-long {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* =========================================================
   HYPERSTILL 2.0 — INTERACTION UTILITIES
   ========================================================= */

.hs-touch-target {
    min-width: var(--hs-touch-target);
    min-height: var(--hs-touch-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hs-control {
    min-height: var(--hs-touch-target);
}

/* =========================================================
   HYPERSTILL 2.0 — RESPONSIVE GRID SYSTEM
   ========================================================= */

.e-con.hs-grid-1,
.e-con.hs-grid-2,
.e-con.hs-grid-3,
.e-con.hs-grid-4 {
    display: grid !important;
    width: 100%;
    gap: var(--hs-grid-gap);
}

.e-con.hs-grid-1 {
    grid-template-columns: minmax(0, 1fr);
}

.e-con.hs-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.e-con.hs-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.e-con.hs-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Make Elementor child containers behave as grid items */
.e-con.hs-grid-1 > .e-con,
.e-con.hs-grid-2 > .e-con,
.e-con.hs-grid-3 > .e-con,
.e-con.hs-grid-4 > .e-con {
    width: 100%;
    min-width: 0;
    max-width: none;
}

/* Tablet: 768–1024px */
@media (max-width: 1024px) {
    .e-con.hs-grid-3,
    .e-con.hs-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile: ≤767px */
@media (max-width: 767px) {
    .e-con.hs-grid-2,
    .e-con.hs-grid-3,
    .e-con.hs-grid-4 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
   HYPERSTILL 2.0 — IMAGE RULES
   ========================================================= */

.hs-image img,
.hs-image picture,
.hs-image svg {
    max-width: 100%;
    height: auto;
}

.hs-image img {
    display: block;
}

/* =========================================================
   HYPERSTILL 2.0 — INTENTIONAL IMAGE CROPS
   ========================================================= */

.hs-crop {
    overflow: hidden;
}

.hs-crop .elementor-widget-image,
.hs-crop .elementor-widget-container,
.hs-crop a,
.hs-crop picture {
    width: 100%;
    height: 100%;
}

.hs-crop img {
    display: block;
    width: 100%;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
}

/* Controlled preview ratios */
.hs-crop-3-2 {
    aspect-ratio: 3 / 2;
}

.hs-crop-4-5 {
    aspect-ratio: 4 / 5;
}

.hs-crop-1-1 {
    aspect-ratio: 1 / 1;
}

.hs-crop-16-9 {
    aspect-ratio: 16 / 9;
}

/* =========================================================
   HYPERSTILL 2.0 — HEADER SYSTEM
   ========================================================= */

.e-con.hs-header-row {
    display: flex !important;
    flex-direction: row !important;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;

    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: var(--hs-space-2);
}

.e-con.hs-header-brand {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    box-sizing: border-box;
    flex: 1 1 auto !important;

    display: flex;
    align-items: center;
    gap: var(--hs-space-1);
}

.hs-header-brand .elementor-widget-image {
    width: 595px !important;
    max-width: 100% !important;
    flex: 0 1 auto;
}

.hs-header-brand img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.e-con.hs-header-actions {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    box-sizing: border-box;
    flex: 0 0 auto !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: var(--hs-space-1);
}

/* Fixed 44 × 44px action-widget wrappers */
.hs-header-search,
.hs-header-account,
.hs-header-cart,
.hs-header-menu {
    width: var(--hs-touch-target) !important;
    min-width: var(--hs-touch-target) !important;
    height: var(--hs-touch-target);
    flex: 0 0 var(--hs-touch-target) !important;
}

.hs-header-search > .elementor-widget-container,
.hs-header-account > .elementor-widget-container,
.hs-header-menu > .elementor-widget-container {
    width: var(--hs-touch-target);
    height: var(--hs-touch-target);
}

/* Search, Account and Menu icon controls */
.hs-header-search .elementor-icon,
.hs-header-account .elementor-icon,
.hs-header-menu .elementor-icon {
    width: var(--hs-touch-target);
    height: var(--hs-touch-target);
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    color: #ffffff;
    background-color: transparent;
    border: 0;
    border-radius: 0;

    font-size: 24px;
    line-height: 1;

    transition: color 180ms ease;
}

.hs-header-search .elementor-icon svg,
.hs-header-account .elementor-icon svg,
.hs-header-menu .elementor-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.hs-header-search .elementor-icon:hover,
.hs-header-search .elementor-icon:focus-visible,
.hs-header-account .elementor-icon:hover,
.hs-header-account .elementor-icon:focus-visible,
.hs-header-menu .elementor-icon:hover,
.hs-header-menu .elementor-icon:focus-visible {
    color: #ffffff;
    background-color: transparent;
    outline: none;
}

/* WooCommerce Menu Cart control */
.hs-header-cart > .elementor-widget-container,
.hs-header-cart .elementor-menu-cart__toggle {
    width: var(--hs-touch-target);
    height: var(--hs-touch-target);
}

.hs-header-cart
.elementor-menu-cart__toggle
.elementor-button {
    width: var(--hs-touch-target);
    height: var(--hs-touch-target);
    min-height: var(--hs-touch-target);
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    color: #ffffff;
    background-color: transparent;
    border: 0;
    border-radius: 0;

    transition: color 180ms ease;
}

.hs-header-cart
.elementor-menu-cart__toggle
.elementor-button-icon {
    color: inherit;
    font-size: 24px;
}

.hs-header-cart
.elementor-menu-cart__toggle
.elementor-button-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.hs-header-cart
.elementor-menu-cart__toggle
.elementor-button:hover,
.hs-header-cart
.elementor-menu-cart__toggle
.elementor-button:focus-visible {
    color: #ffffff;
    background-color: transparent;
    outline: none;
}

/* Tablet and mobile: stack Brand and Actions into separate rows */
@media (max-width: 1024px) {
    .e-con.hs-header-row {
        --min-height: 0px;

        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        box-sizing: border-box;

        flex-wrap: wrap !important;
        align-items: center;
        gap: var(--hs-space-1) !important;
    }

    .e-con.hs-header-brand {
        --min-height: 0px;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        box-sizing: border-box;
        flex: 0 0 100% !important;

        justify-content: flex-start;
    }

    .hs-header-brand .elementor-widget-image {
        width: min(100%, 595px) !important;
        max-width: 100% !important;
    }

    .e-con.hs-header-actions {
        --min-height: 0px;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: var(--hs-touch-target) !important;
        box-sizing: border-box;

        padding-block: 0 !important;
        margin-block: 0 !important;

        flex: 0 0 100% !important;
        align-items: center;
        justify-content: space-between;
        gap: 8px !important;
    }

    /* Visible icons are smaller; touch targets remain 44 × 44px */
    .hs-header-menu .elementor-icon,
    .hs-header-search .elementor-icon,
    .hs-header-account .elementor-icon {
        font-size: 22px;
    }

    .hs-header-menu .elementor-icon svg,
    .hs-header-search .elementor-icon svg,
    .hs-header-account .elementor-icon svg {
        width: 22px;
        height: 22px;
    }

    .hs-header-cart
    .elementor-menu-cart__toggle
    .elementor-button-icon {
        font-size: 22px;
    }

    .hs-header-cart
    .elementor-menu-cart__toggle
    .elementor-button-icon svg {
        width: 22px;
        height: 22px;
    }
}

/* =========================================================
   HYPERSTILL 2.0 — GLOBAL SEARCH
   ========================================================= */

.hs-search-popup {
    padding-block: clamp(28px, 4vw, 64px);
}

.hs-global-search input[type="search"] {
    min-height: 56px;
    box-sizing: border-box;
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.2;
}

.hs-global-search input[type="search"]:focus {
    border-color: #8A1E3A;
    outline: 2px solid #8A1E3A;
    outline-offset: 2px;
}

.hs-global-search button,
.hs-global-search .elementor-search-form__submit {
    width: 56px;
    min-width: 56px;
    min-height: 56px;
}

.hs-search-result-link .elementor-button {
    min-height: var(--hs-touch-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================
   HYPERSTILL 2.0 — HERO
   =========================================================

   Elementor structure
   HERO                    class: hs-hero            (Grid 1×1)
   ├ HERO — MEDIA          class: hs-hero__media
   │  └ HERO — IMAGE       (Image widget)
   └ HERO — CONTENT        class: hs-hero__content   (Grid, 3 columns)
      ├ LEFT RAIL          class: hs-hero__rail hs-hero__rail--left
      ├ COPY               class: hs-hero__copy
      │  ├ WELCOME         class: hs-hero__title     (Heading, H1)
      │  ├ TAGLINE         class: hs-hero__tagline   (Heading, H2)
      │  ├ DESCRIPTION     class: hs-hero__desc      (Text Editor)
      │  └ ROUTE           class: hs-hero__route     (Text Editor)
      └ RIGHT RAIL         class: hs-hero__rail hs-hero__rail--right
         ├ HSTL label      class: hs-hero__meta-label
         ├ TICK            class: hs-hero__tick      (HTML widget)
         └ EST label       class: hs-hero__meta-label

   Rails are hidden on mobile in Elementor (Hide On Mobile).
   Leave Typography "Size" and "Line Height" empty on the text
   widgets, for desktop, tablet and mobile. The sizes come from
   the type scale tokens in :root.
   ========================================================= */

/* ---- Step 1: Hero container + hero tokens ---- */
.e-con.hs-hero {
    --hs-hero-height: clamp(480px, 56.25vw, 900px);
    --hs-hero-pad-y: clamp(24px, 5vw, 72px);
    --hs-rail: 25px;
    --hs-hero-col-gap: 1rem;

    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: var(--hs-hero-height);
    min-height: 0;

    padding: 0 !important;
    margin: 0;
    gap: 0 !important;

    overflow: hidden;
    isolation: isolate;
}

/* Elementor's background-overlay layer, not used here */
.hs-hero::before {
    display: none !important;
}

/* ---- Step 2: Background image layer ---- */
.hs-hero > .hs-hero__media {
    grid-area: 1 / 1;
    position: relative;
    z-index: 0;
    min-height: inherit;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden;
}

.hs-hero__media .elementor-widget-image,
.hs-hero__media .elementor-widget-image > .elementor-widget-container,
.hs-hero__media .elementor-widget-image a,
.hs-hero__media .elementor-widget-image picture {
    width: 100%;
    height: 100%;
}

.hs-hero__media .elementor-widget-image img {
    display: block;
    width: 100%;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: 65% 80%;
}

/* ---- Step 2b: Shade (bottom-up, behind the text only) ---- */
.hs-hero > .hs-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        0deg,
        rgba(8, 10, 11, .80) 0%,
        rgba(8, 10, 11, .50) 40%,
        rgba(8, 10, 11, 0)   70%
    );
}

/* ---- Step 3: Content layer (rail | copy | rail) ---- */
.hs-hero > .hs-hero__content {
    grid-area: 1 / 1;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: 100%;
    padding-block: var(--hs-hero-pad-y) !important;
    padding-inline: max(
        var(--hs-gutter),
        calc((100% - var(--hs-width-standard)) / 2)
    ) !important;
    column-gap: var(--hs-hero-col-gap) !important;
    row-gap: 0 !important;
    grid-template-columns:
        var(--hs-rail) minmax(0, 1fr) var(--hs-rail) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
}

.hs-hero__content > .e-con {
    min-width: 0;
    padding: 0 !important;
}

/* Left rail and copy share the bottom row; right rail spans both */
.hs-hero__rail--left  { grid-column: 1; grid-row: 2; }
.hs-hero__copy        { grid-column: 2; grid-row: 2; }
.hs-hero__rail--right { grid-column: 3; grid-row: 1 / -1; }

@media (max-width: 767px) {
    .hs-hero > .hs-hero__content {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .hs-hero__copy {
        grid-column: 1;
    }
}

/* ---- Step 4: Rails ---- */
.hs-hero__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Left rail: line + square, both drawn on the rail itself */
.hs-hero__rail--left {
    background:
        linear-gradient(var(--hs-maroon), var(--hs-maroon))
            50% 100% / 7px 7px no-repeat,
        linear-gradient(var(--hs-maroon), var(--hs-maroon))
            50% 0 / 1px calc(100% - 7px) no-repeat;
}

.hs-hero__rail--left::before,
.hs-hero__rail--left::after {
    display: none !important;
}

/* Right rail: vertical label, tick, vertical label, at the top */
.hs-hero__rail--right {
    justify-content: flex-start;
    gap: .75rem !important;
}

.hs-hero__meta-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.hs-hero__meta-label p {
    margin: 0;
    white-space: nowrap;
    font: 500 var(--hs-text-meta)/1.2 var(--hs-font-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .65);
}

.hs-hero__tick {
    display: block;
    width: 1px;
    height: 3rem;
    background: var(--hs-maroon);
}

/* ---- Step 5: Copy block ---- */
.hs-hero__copy {
    justify-self: start;
    align-self: end;
    width: min(100%, 50rem, max(22rem, 62vw));
    display: flex;
    flex-direction: column;
    gap: clamp(15px, .8rem + .5vw, 20px) !important;
}

.hs-hero__copy .elementor-widget {
    margin: 0;
}

/* Extra space above the route row */
.hs-hero__copy .hs-hero__route {
    margin-top: .25rem;
}

.hs-hero__title .elementor-heading-title {
    font-size: var(--hs-text-h1);
    line-height: .9;
    margin: 0;
}

.hs-hero__tagline .elementor-heading-title {
    font-size: var(--hs-text-h3);
    line-height: 1.1;
    margin: 0;
}

.hs-hero__desc p {
    font-size: var(--hs-text-body);
    line-height: 1.6;
    margin: 0;
    text-wrap: balance;
}

/* Trim the empty space above and below the letters, so the gap
   you see is the gap you set (browsers without support fall back
   to the line-heights above) */
@supports (text-box: trim-both cap alphabetic) {
    .hs-hero__title .elementor-heading-title,
    .hs-hero__tagline .elementor-heading-title,
    .hs-hero__desc p,
    .hs-hero__route p {
        text-box: trim-both cap alphabetic;
    }
}

/* ---- Step 6: Route row (meta text, a line on each side) ---- */
.hs-hero__route.elementor-widget {
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* Left: short solid maroon line */
.hs-hero__route.elementor-widget::before {
    content: "";
    flex: 0 0 1.5rem;
    height: 1px;
    background: var(--hs-maroon);
}

/* Right: fills the row, maroon fading out */
.hs-hero__route.elementor-widget::after {
    content: "";
    flex: 1 1 auto;
    min-width: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--hs-maroon), rgba(130, 43, 42, 0));
}

.hs-hero__route p {
    margin: 0;
    white-space: nowrap;
    font: 500 var(--hs-text-meta)/1.2 var(--hs-font-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .65);
}

/* ---- Phones in landscape: shorter hero, text above the fold ---- */
@media (orientation: landscape) and (max-height: 500px) {
    .e-con.hs-hero {
        --hs-hero-height: 300px;
        --hs-hero-pad-y: 24px;
    }
}


/* =========================================================
   HYPERSTILL 2.0 — FOOTER SYSTEM
   =========================================================
   Elementor structure:

   FOOTER                 hs-footer
   └ INNER                hs-shell hs-footer__inner
     ├ MAIN               hs-footer__main
     │ ├ BRAND            hs-footer__brand
     │ ├ EXPLORE          hs-footer__explore
     │ └ CONNECT          hs-footer__connect
     └ BOTTOM             hs-footer__bottom

   Mobile-first breakpoints:
   Mobile:      0–767px
   Tablet:      768–1024px
   Desktop:     1025–1439px
   Widescreen:  1440px+

   ========================================================= */

/* ---- 1. Footer tokens and outer container ---- */

.e-con.hs-footer {
    --hs-footer-bg: #141617;
    --hs-footer-text: #ffffff;
    --hs-footer-muted: #b6bbbd;
    --hs-footer-line: rgba(255, 255, 255, .18);

    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;

    background-color: var(--hs-footer-bg);
    color: var(--hs-footer-text);

    padding: 0 !important;
    gap: 0 !important;
}

/* ---- 2. Inner content shell ---- */

.e-con.hs-footer__inner {
    width: 100%;
    max-width: calc(
        var(--hs-width-standard) + 2 * var(--hs-gutter)
    );
    min-width: 0;
    box-sizing: border-box;

    margin-inline: auto;
    padding-inline: var(--hs-gutter);
    padding-block: var(--hs-space-3) var(--hs-space-2);

    gap: 0 !important;
}

/* ---- 3. Main responsive grid: mobile first ---- */

.e-con.hs-footer__main {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px var(--hs-grid-gap) !important;
    border-top: 2px solid var(--hs-maroon);
    padding-top: var(--hs-space-2) !important;

    width: 100%;
    min-width: 0;
    padding: 0 !important;
}

/* Mobile: brand occupies both columns */
.e-con.hs-footer__brand {
    grid-column: 1 / -1;
}

/* Keep navigation columns in one row */
.e-con.hs-footer__explore,
.e-con.hs-footer__connect {
    grid-column: auto;
}

/* ---- 4. Shared content columns ---- */

.e-con.hs-footer__brand,
.e-con.hs-footer__explore,
.e-con.hs-footer__connect {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0 !important;
    gap: 6px !important;
}

/* ---- 5. Brand image ---- */

.hs-footer__logo {
    width: min(100%, 320px);
    max-width: 100%;
}

.hs-footer__logo img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.hs-footer__logo,
.hs-footer__brand .elementor-widget-text-editor {
    margin: 0 !important;
}

/* ---- 6. Footer typography ---- */

.hs-footer__brand p {
    margin: 0;
    max-width: 32rem;
    font-family: var(--hs-font-body);
    font-size: var(--hs-text-body);
    line-height: 1.6;
    color: var(--hs-footer-muted);
}

.hs-footer__heading .elementor-heading-title {
    margin: 0;
    font-family: var(--hs-font-mono);
    font-size: var(--hs-text-meta);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hs-footer-text);
}

/* ---- 7. Footer navigation ---- */

.hs-footer__links .elementor-icon-list-items,
.hs-footer__legal .elementor-icon-list-items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0;
}

.hs-footer__links .elementor-icon-list-item,
.hs-footer__legal .elementor-icon-list-item {
    margin: 0 !important;
    padding: 0 !important;
}

.hs-footer__links .elementor-icon-list-item a,
.hs-footer__legal .elementor-icon-list-item a {
    display: inline-flex;
    align-items: center;
    min-height: var(--hs-touch-target);
    text-decoration: none;
}

.hs-footer__links .elementor-icon-list-text,
.hs-footer__legal .elementor-icon-list-text {
    padding: 0 !important;
    font-family: var(--hs-font-body);
    font-size: var(--hs-text-body);
    line-height: 1.5;
    color: var(--hs-footer-muted);
}

.hs-footer__links a:hover .elementor-icon-list-text,
.hs-footer__links a:focus-visible .elementor-icon-list-text,
.hs-footer__legal a:hover .elementor-icon-list-text,
.hs-footer__legal a:focus-visible .elementor-icon-list-text {
    color: var(--hs-footer-text);
}

.hs-footer a:focus-visible {
    outline: 2px solid var(--hs-maroon);
    outline-offset: 4px;
}

/* ---- 8. Bottom copyright and legal row ---- */

.e-con.hs-footer__bottom {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-width: 0;

    margin-top: var(--hs-space-3);
    padding: var(--hs-space-2) 0 0 !important;

    border-top: 1px solid var(--hs-footer-line);
    gap: var(--hs-space-1) !important;
}

.hs-footer__copyright p {
    margin: 0;
    font-family: var(--hs-font-mono);
    font-size: var(--hs-text-meta);
    line-height: 1.5;
    color: var(--hs-footer-muted);
}

/* Center copyright and legal navigation */

.hs-footer__copyright {
    width: 100%;
    text-align: center;
}

.hs-footer__legal {
    width: 100%;
}

.hs-footer__legal .elementor-icon-list-items {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ---- 9. Tablet: 768–1024px ---- */

@media (min-width: 768px) {

    .e-con.hs-footer__main {
     gap: var(--hs-space-3) var(--hs-grid-gap) !important;
    }

    .e-con.hs-footer__brand {
        grid-column: 1 / -1;
    }

    .e-con.hs-footer__bottom {
        flex-direction: row;
        align-items: center;
    }

    .hs-footer__legal .elementor-icon-list-items {
        gap: var(--hs-space-2);
    }
}

/* ---- 10. Desktop: 1025–1439px ---- */

@media (min-width: 1025px) {

    .e-con.hs-footer__inner {
        padding-block: var(--hs-space-5) var(--hs-space-3);
    }

    .e-con.hs-footer__main {
        grid-template-columns:
            minmax(0, 2fr)
            minmax(0, 1fr)
            minmax(0, 1fr);
    }

    .e-con.hs-footer__brand {
        grid-column: auto;
    }
}

.e-con.hs-footer__bottom {
    flex-direction: row;
    align-items: center;
}

.hs-footer__copyright,
.hs-footer__legal {
    width: auto;
}

.hs-footer__copyright {
    text-align: left;
}

.hs-footer__legal .elementor-icon-list-items {
    justify-content: flex-end;
}

/* ---- 11. Widescreen: 1440px+ ---- */

@media (min-width: 1440px) {

    .e-con.hs-footer__inner {
        padding-block: var(--hs-space-6) var(--hs-space-3);
    }

    .e-con.hs-footer__main {
        gap: var(--hs-space-5) !important;
    }
}

/* =========================================================
   EXISTING COMMENT SYSTEM
   ========================================================= */

/* Container */
.hyperstill-comment {
    margin-bottom: 28px;
}

/* Inner block */
.hs-comment-inner {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Meta */
.hs-comment-meta {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Author */
.hs-author {
    color: #e6e6e6;
    font-weight: 500;
}

/* Badge */
.hs-badge {
    background: #8A1E3A;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

/* Time */
.hs-time {
    opacity: 0.7;
}

/* Content */
.hs-comment-content {
    font-size: 14px;
    line-height: 1.6;
    color: #d0d0d0;
}

/* Reply */
.hs-comment-actions {
    margin-top: 12px;
}

.hs-comment-actions a {
    font-size: 12px;
    color: #8A1E3A;
    text-decoration: none;
}

/* Nested replies */
.children {
    margin-left: 20px;
    margin-top: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    padding-left: 16px;
}