/* =============================================================
   Crib Goch Outdoor — Help & Contact
   /SiteSpecific/CustomContent/pages/contact/contact.css
   Self-contained: no dependency on stores.css. Layout primitives
   were duplicated from it under the hc- prefix (hc = help & contact).
   ============================================================= */

/* -------------------------------------------------------------
   Tokens
   ------------------------------------------------------------- */
:root {
    --hc-color1:            #344824;
    --hc-color2:            #a8d29e;
    --hc-color3:            #53703c;
    --hc-color4:            #445e30;
    --hc-color5:            #db2727;

    --hc-bg-primary:        #fff;
    --hc-bg-secondary:      #f5f5f5;

    --hc-text-primary:      #151515;
    --hc-text-secondary:    #f8f8f8;
    --hc-text-muted:        #555;

    --hc-radius:            10px;
    --hc-padding:           1rem;
    --hc-gap:               clamp(1rem, 1rem + 1vw, 2rem);
    --hc-border:            1px solid #dedede;

    --hc-shadow:            0 1px 2px rgba(21, 21, 21, 0.04), 0 12px 32px -12px rgba(52, 72, 36, 0.22);
    --hc-shadow-lift:       0 2px 4px rgba(21, 21, 21, 0.05), 0 20px 40px -14px rgba(52, 72, 36, 0.32);
    --hc-ease:              cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------------------
   Page shell, breadcrumb, sections
   ------------------------------------------------------------- */
.hc-page {
    margin: 0 auto;
    padding: clamp(2.5rem, 5vw, 5rem) var(--hc-padding);
}

.hc-breadcrumb {
    font-size: 0.8125rem;
    color: var(--hc-text-muted);
    margin-bottom: 2.5rem;
}

.hc-breadcrumb a {
    color: var(--hc-color3);
    text-decoration: none;
}

.hc-breadcrumb a:hover {
    text-decoration: underline;
}

.hc-breadcrumb__sep {
    margin: 0 0.4rem;
    color: #bbb;
}

.hc-section {
    margin-bottom: clamp(3rem, 6vw, 6rem);
}

.hc-section--ruled {
    padding-top: clamp(2rem, 4vw, 4rem);
}

/* -------------------------------------------------------------
   Text primitives
   ------------------------------------------------------------- */
.hc-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hc-color3);
    margin-bottom: 0.75rem;
}

.hc-heading {
    font-size: clamp(1.875rem, 3vw + 1rem, 2.5rem);
    color: var(--hc-color1);
    line-height: 1.15;
    margin-bottom: 1rem;
}

.hc-heading--lg {
    font-size: clamp(1.5rem, 2vw + 0.75rem, 2.25rem);
}

.hc-body {
    font-size: clamp(0.9375rem, 0.4vw + 0.875rem, 1.0625rem);
    color: var(--hc-text-muted);
    line-height: 1.75;
    margin-bottom: 0.875rem;
}

.hc-body:last-child {
    margin-bottom: 0;
}

.hc-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hc-color3);
    margin-bottom: 0.6rem;
}

/* -------------------------------------------------------------
   Two-column split (media + content)
   ------------------------------------------------------------- */
.hc-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--hc-gap);
    align-items: center;
}

@media (min-width: 1024px) {
    .hc-split {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2rem, 4vw, 4rem);
    }
}

.hc-split__media {
    width: 100%;
    border-radius: var(--hc-radius);
    overflow: hidden;
}

.hc-split__media picture {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    position: relative;
}

.hc-split__media picture img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hc-split__content {
    display: flex;
    flex-direction: column;
}

/* -------------------------------------------------------------
   Button
   ------------------------------------------------------------- */
.hc-btn {
    display: inline-block;
    background: var(--hc-color1);
    color: var(--hc-text-secondary);
    padding: 0.75rem 1.375rem;
    border-radius: var(--hc-radius);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.hc-btn:hover {
    background: var(--hc-color3);
    color: var(--hc-text-secondary);
    text-decoration: none;
}

/* -------------------------------------------------------------
   Native <details> dropdown
   ------------------------------------------------------------- */
.hc-dd-list {
    margin-top: 1.75rem;
    border-top: var(--hc-border);
}

.hc-dd {
    border-bottom: var(--hc-border);
}

.hc-dd summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--hc-color1);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.hc-dd summary::-webkit-details-marker {
    display: none;
}

.hc-dd summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: 1.375rem;
    font-weight: 300;
    line-height: 1;
    color: var(--hc-color3);
    transition: transform 0.2s ease;
}

.hc-dd[open] summary::after {
    content: '\2212';
}

.hc-dd summary:hover {
    color: var(--hc-color3);
}

.hc-dd > p {
    font-size: 0.9375rem;
    color: var(--hc-text-muted);
    line-height: 1.7;
    padding-bottom: 1.1rem;
    margin: 0;
}

/* -------------------------------------------------------------
   Reviews widget (Shopper Approved) — stacks on small screens
   ------------------------------------------------------------- */
.hc-reviews {
    margin-top: 1.75rem;
}

@media (max-width: 1023px) {
    .hc-reviews .shopperapproved_widget {
        height: auto !important;
        min-height: 0 !important;
    }

    .hc-reviews .shopperapproved_widget table,
    .hc-reviews .shopperapproved_widget tbody,
    .hc-reviews .shopperapproved_widget tr {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    .hc-reviews .shopperapproved_widget td {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        border-bottom: var(--hc-border);
        padding: 0.75rem 0 !important;
        box-sizing: border-box;
    }

    .hc-reviews .shopperapproved_widget td:last-child {
        border-bottom: none;
    }

    .hc-reviews .shopperapproved_widget .sa_comments {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* -------------------------------------------------------------
   Hero: dark panel, cards overlap its base
   ------------------------------------------------------------- */
.help-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem) clamp(5rem, 9vw, 7.5rem);
    background: var(--hc-color1);
    border-radius: calc(var(--hc-radius) * 2);
    color: var(--hc-text-secondary);
    isolation: isolate;
}

/* Soft light from the top-right corner */
.help-hero::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 70%;
    aspect-ratio: 1;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(168, 210, 158, 0.28), transparent);
    pointer-events: none;
}

.help-hero__inner {
    max-width: 44rem;
}

.help-hero__eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hc-color2);
    animation: help-rise 0.7s var(--hc-ease) both;
}

.help-hero__title {
    margin: 0 0 1rem;
    font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: #fff;
    animation: help-rise 0.8s 0.08s var(--hc-ease) both;
}

.help-hero__lede {
    margin: 0;
    max-width: 36rem;
    font-size: clamp(1rem, 0.4vw + 0.9rem, 1.125rem);
    line-height: 1.7;
    color: rgba(248, 248, 248, 0.82);
    animation: help-rise 0.8s 0.16s var(--hc-ease) both;
}

.help-hero__lede a {
    color: var(--hc-color2);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}

.help-hero__lede a:hover {
    color: #fff;
}

/* -------------------------------------------------------------
   Quick answer cards, pulled up over the hero's base
   ------------------------------------------------------------- */
.help-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--hc-gap);
    margin: calc(-1 * clamp(3rem, 6vw, 4.5rem)) clamp(0.75rem, 3vw, 2rem) 0;
    position: relative;
    z-index: 1;
}

@media (min-width: 600px) {
    .help-cards { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
    .help-cards { grid-template-columns: repeat(4, 1fr); }
}

.help-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.5rem;
    background: var(--hc-bg-primary);
    border: var(--hc-border);
    border-radius: var(--hc-radius);
    box-shadow: var(--hc-shadow);
    transition: transform 0.35s var(--hc-ease), box-shadow 0.35s var(--hc-ease), border-color 0.35s;
    animation: help-rise 0.7s var(--hc-ease) both;
}

.help-card:nth-child(1) { animation-delay: 0.28s; }
.help-card:nth-child(2) { animation-delay: 0.36s; }
.help-card:nth-child(3) { animation-delay: 0.44s; }
.help-card:nth-child(4) { animation-delay: 0.52s; }

.help-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--hc-shadow-lift);
    border-color: var(--hc-color2);
}

.help-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.25rem;
    border-radius: 50%;
    background: var(--hc-color2);
    color: var(--hc-color1);
    transition: transform 0.35s var(--hc-ease), background 0.35s;
}

.help-card__icon svg {
    width: 1.375rem;
    height: 1.375rem;
}

.help-card:hover .help-card__icon {
    transform: rotate(-6deg) scale(1.06);
}

.help-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--hc-color1);
    margin: 0;
}

.help-card__text {
    font-size: 0.9375rem;
    color: var(--hc-text-muted);
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

.help-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--hc-color3);
    text-decoration: none;
}

.help-card__arrow {
    display: inline-block;
    transition: transform 0.3s var(--hc-ease);
}

.help-card:hover .help-card__link {
    color: var(--hc-color1);
}

.help-card:hover .help-card__arrow {
    transform: translateX(4px);
}

/* -------------------------------------------------------------
   Motion: load-in keyframe, scroll reveal, reduced-motion guard
   ------------------------------------------------------------- */
@keyframes help-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--hc-ease), transform 0.7s var(--hc-ease);
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .help-hero__eyebrow,
    .help-hero__title,
    .help-hero__lede,
    .help-card {
        animation: none;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .help-card,
    .help-card__icon,
    .help-card__arrow,
    .contact-store__img img {
        transition: none;
    }
}

/* -------------------------------------------------------------
   FAQ section: header + search
   ------------------------------------------------------------- */
.faq-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--hc-gap);
    align-items: end;
}

@media (min-width: 1024px) {
    .faq-head { grid-template-columns: 3fr 2fr; }
}

.faq-search-wrap {
    display: flex;
    flex-direction: column;
}

.faq-search {
    width: 100%;
    padding: 0.85rem 1rem 0.85rem 2.75rem;
    font-size: 1rem;
    border: var(--hc-border);
    border-radius: var(--hc-radius);
    background: var(--hc-bg-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353703c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 1rem center / 1.125rem;
    box-shadow: var(--hc-shadow);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Platform CSS tints inputs on hover; keep ours white */
.faq-search:hover,
.message-form .formSingle:hover,
.message-form .formMultiple:hover,
.faq-ask #FAQSubmitPanelling .formSingle:hover,
.faq-ask #FAQSubmitPanelling .formMultiple:hover {
    background-color: var(--hc-bg-primary);
}

.faq-search:focus {
    outline: none;
    border-color: var(--hc-color3);
    box-shadow: 0 0 0 3px var(--hc-color2);
}

.faq-showing {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--hc-text-muted);
    min-height: 1.2em;
}

.faq-panel {
    margin-top: 1.75rem;
    padding: 0 clamp(1.25rem, 3vw, 2rem);
    background: var(--hc-bg-primary);
    border: var(--hc-border);
    border-radius: var(--hc-radius);
    box-shadow: var(--hc-shadow);
}

.faq-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0;
}

.faq-tools .hc-btn {
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

.faq-empty {
    color: var(--hc-text-muted);
    margin: 0;
    padding: 1.25rem 0;
}

/* -------------------------------------------------------------
   FAQ list: restyle the platform FAQViewer-page.ascx output
   #faqAnswer > span.accordianBox.faqCompleteCtr
       > .accordianHeader h3 + span.fa-unsorted
       > .accordianCtn li .faqResponseContainer .faqResponse
   The platform toggles .active on .accordianBox on header click.
   ------------------------------------------------------------- */
/* Platform floats every [class*='col-']; the control wraps the list and each
   answer in .col-1, so un-float them here or the Ask dropdown rides up alongside */
.faq-panel {
    display: flow-root;
}

.faq-panel > .col-1,
#faqAnswer .accordianCtn > li.col-1 {
    float: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Flex column so the search script can rank results via style.order */
#faqAnswer {
    display: flex;
    flex-direction: column;
}

#faqAnswer .accordianBox {
    border-bottom: var(--hc-border);
    float: none;
    display: block;
    width: 100%;
}

#faqAnswer .accordianHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.1rem 0;
    font-family: inherit;
}

#faqAnswer .accordianHeader h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--hc-color1);
    margin: 0;
    line-height: 1.4;
}

#faqAnswer .accordianHeader:hover h3 {
    color: var(--hc-color3);
}

/* The platform draws +/− on this span with two absolutely positioned bars
   (::before horizontal, ::after rotated -90deg; .active rotates them into a minus).
   Keep that mechanism, just give it a box to live in and our colour. */
#faqAnswer .accordianHeader > span.fa-unsorted {
    position: relative;
    top: auto;
    right: auto;
    width: 14px;
    height: 14px;
    padding: 0;
    flex-shrink: 0;
}

#faqAnswer .accordianHeader > span.fa-unsorted::before,
#faqAnswer .accordianHeader > span.fa-unsorted::after {
    top: 50%;
    right: 0;
    width: 14px;
    height: 2px;
    margin-top: -1px;
    background: var(--hc-color3);
}

#faqAnswer .accordianCtn {
    float: none;
    margin: 0 0 1.1rem;
}

#faqAnswer .accordianCtn li {
    list-style: none;
}

#faqAnswer .faqFlourishCtr,
#faqAnswer .faqFlourishCtrRev {
    display: none;
}

#faqAnswer .faqResponse {
    font-size: 0.9375rem;
    color: var(--hc-text-muted);
    line-height: 1.7;
}

/* -------------------------------------------------------------
   Ask a question: platform FAQSubmit.ascx renders
   .faqPage > .bgeb (button bar) + .modular-review-faq-slidein
   We hide the bar, force the slide-in inline, and let the
   <details class="hc-dd faq-ask"> own the open/close.
   ------------------------------------------------------------- */
.faq-ask {
    border-bottom: 0;
    padding: 1.25rem 0;
}

/* The <summary> is the "Ask us a question" button */
.faq-ask > summary {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--hc-text-secondary);
    background: var(--hc-color1);
    border-radius: var(--hc-radius);
    transition: background 0.2s ease;
}

.faq-ask > summary:hover {
    color: var(--hc-text-secondary);
    background: var(--hc-color3);
}

.faq-ask > summary::before {
    content: '';
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8f8f8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8v.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.faq-ask > summary::after {
    content: '+';
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1;
    color: var(--hc-color2);
    margin-left: 0.25rem;
}

.faq-ask[open] > summary::after {
    content: '\2212';
}

.faq-ask__intro {
    font-size: 0.9375rem;
    color: var(--hc-text-muted);
    line-height: 1.6;
    margin: 1.25rem 0 1rem;
}

.faq-ask .faqPage > .bgeb {
    display: none;
}

.faq-ask .modular-review-faq-slidein {
    position: static;
    display: block;
    opacity: 1;
    width: auto;
    height: auto;
    background: none;
    z-index: auto;
}

.faq-ask .modular-review-faq-slidein-inner {
    position: static;
    width: 100%;
    max-width: 560px;
    height: auto;
    padding: 0 0 1.25rem;
    background: none;
    transform: none;
}

/* FAQSubmit panel: #FAQSubmitPanelling > div (field) > .h6 label + .formSingle/.formMultiple,
   then span#submitFAQButton.button, a spacer span, span.buttonpunchdown (Close), div > label#faqStatusLbl */
.faq-ask #FAQSubmitPanelling > h2,
.faq-ask #FAQSubmitPanelling .buttonpunchdown,
.faq-ask #FAQSubmitPanelling > span.ctrPad8-right {
    display: none;
}

.faq-ask #FAQSubmitPanelling {
    float: none;
    width: 100%;
}

.faq-ask #FAQSubmitPanelling > div {
    float: none;
    width: 100%;
    padding: 0;
    margin-bottom: 1.25rem;
}

/* Name / email side by side on desktop */
@media (min-width: 700px) {
    .faq-ask #FAQSubmitPanelling {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 1rem;
    }

    .faq-ask #FAQSubmitPanelling > div:nth-child(4),
    .faq-ask #FAQSubmitPanelling > div:nth-child(5),
    .faq-ask #FAQSubmitPanelling > #submitFAQButton,
    .faq-ask #FAQSubmitPanelling > div:last-child {
        grid-column: 1 / -1;
    }
}

.faq-ask #FAQSubmitPanelling .h6 {
    float: none;
    width: auto;
    padding: 0;
    margin: 0 0 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hc-color3);
}

.faq-ask #FAQSubmitPanelling .formSingle,
.faq-ask #FAQSubmitPanelling .formMultiple {
    display: block;
    float: none;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.85rem 1rem;
    font: inherit;
    font-size: 1rem;
    color: var(--hc-text-primary);
    background: var(--hc-bg-primary);
    border: var(--hc-border);
    border-radius: var(--hc-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.faq-ask #FAQSubmitPanelling .formMultiple {
    min-height: 7rem;
    resize: vertical;
    line-height: 1.6;
}

.faq-ask #FAQSubmitPanelling .formSingle:focus,
.faq-ask #FAQSubmitPanelling .formMultiple:focus {
    outline: none;
    border-color: var(--hc-color3);
    box-shadow: 0 0 0 3px var(--hc-color2);
}

.faq-ask #FAQSubmitPanelling .formSingle::placeholder,
.faq-ask #FAQSubmitPanelling .formMultiple::placeholder {
    color: #9a9a9a;
}

.faq-ask #submitFAQButton {
    display: inline-block;
    float: none;
    width: auto;
    margin: 0;
    padding: 0.85rem 1.5rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--hc-text-secondary);
    background: var(--hc-color1);
    border: 0;
    border-radius: var(--hc-radius);
    cursor: pointer;
    transition: background 0.2s ease;
}

.faq-ask #submitFAQButton:hover {
    background: var(--hc-color3);
}

.faq-ask #faqStatusLbl {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    color: var(--hc-text-muted);
}

.faq-ask #faqStatusLbl:empty {
    display: none;
}

/* -------------------------------------------------------------
   Message section: form left, other channels right
   ------------------------------------------------------------- */
.message-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--hc-gap);
    align-items: start;
}

@media (min-width: 1024px) {
    .message-grid {
        grid-template-columns: 3fr 2fr;
        gap: clamp(2rem, 4vw, 4rem);
    }
}

.message-grid__aside .channel-list {
    margin-top: 1rem;
}

/* -------------------------------------------------------------
   Contact form: restyle the platform ContactForms.ascx output
   ul.formContiner > li > span.lable + input.formSingle / textarea.formMultiple
   .contactFormSend > #butSend.button + #ResetButton.ghost-button
   contactFormStandard() toggles .errorForm/.completeForm on inputs
   and .errorFormInfo/.completeFormInfo on the labels.
   ------------------------------------------------------------- */
.message-form {
    margin-top: 1rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--hc-bg-primary);
    border-radius: var(--hc-radius);
    box-shadow: var(--hc-shadow);
}

.message-form .formContiner {
    margin: 0;
    padding: 0;
    list-style: none;
}

.message-form .formContiner li {
    margin-bottom: 1.25rem;
}

/* Name / email / phone side by side on desktop */
@media (min-width: 700px) {
    .message-form .formContiner.generic {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 1rem;
    }

    .message-form .formContiner.generic li:nth-child(3) {
        grid-column: 1 / -1;
    }
}

.message-form .lable {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hc-color3);
}

.message-form .required {
    color: var(--hc-color5);
}

.message-form .formSingle,
.message-form .formMultiple {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.85rem 1rem;
    font: inherit;
    font-size: 1rem;
    color: var(--hc-text-primary);
    background: var(--hc-bg-primary);
    border: var(--hc-border);
    border-radius: var(--hc-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.message-form .formMultiple {
    min-height: 9rem;
    resize: vertical;
    line-height: 1.6;
}

.message-form .formSingle:focus,
.message-form .formMultiple:focus {
    outline: none;
    border-color: var(--hc-color3);
    box-shadow: 0 0 0 3px var(--hc-color2);
}

.message-form .formSingle::placeholder,
.message-form .formMultiple::placeholder {
    color: #9a9a9a;
}

/* Validation states set by contactFormStandard() */
.message-form .errorForm {
    border-color: var(--hc-color5);
}

.message-form .completeForm {
    border-color: var(--hc-color3);
}

.message-form .errorFormInfo {
    color: var(--hc-color5);
}

.message-form .completeFormInfo {
    color: var(--hc-color3);
}

/* Send / reset */
.message-form .contactFormSend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--hc-text-muted);
}

.message-form .contactFormSend .clearboth {
    display: none;
}

.message-form #butSend {
    display: inline-block;
    margin: 0;
    padding: 0.85rem 1.5rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--hc-text-secondary);
    background: var(--hc-color1);
    border: 0;
    border-radius: var(--hc-radius);
    cursor: pointer;
    transition: background 0.2s ease;
}

.message-form #butSend:hover {
    background: var(--hc-color3);
}

.message-form #butSend[disabled] {
    background: #c9c9c9;
    color: #fff;
    cursor: not-allowed;
}

.message-form #ResetButton {
    margin: 0;
    padding: 0.75rem 1.25rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--hc-text-muted);
    background: none;
    border: var(--hc-border);
    border-radius: var(--hc-radius);
    cursor: pointer;
}

.message-form #ResetButton:hover {
    color: var(--hc-color5);
    border-color: var(--hc-color5);
    background: none;
}

/* -------------------------------------------------------------
   Other channels (hc-dd dropdowns with icons)
   ------------------------------------------------------------- */
.channel-list .hc-dd > p,
.channel-list .hc-dd > ol {
    font-size: 0.9375rem;
    color: var(--hc-text-muted);
    line-height: 1.7;
    margin: 0;
    padding-bottom: 1.1rem;
}

.channel-list .hc-dd > p + ol {
    margin-top: -0.5rem;
}

/* Icon + label inside the <summary>; .hc-dd handles the +/- via ::after */
.channel-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.channel-icon {
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
    color: var(--hc-color3);
}

.channel-list .hc-dd[open] .channel-icon,
.channel-list .hc-dd summary:hover .channel-icon {
    color: var(--hc-color1);
}

/* -------------------------------------------------------------
   Store panels inside the store dropdown
   ------------------------------------------------------------- */
.contact-stores {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 0.25rem 0 0;
    padding-bottom: 1.25rem;
}

.contact-store {
    display: flex;
    flex-direction: column;
    border: var(--hc-border);
    border-radius: var(--hc-radius);
    overflow: hidden;
    background: var(--hc-bg-primary);
}

.contact-store__hero {
    display: block;
    position: relative;
    text-decoration: none;
}

.contact-store__hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 60%);
    pointer-events: none;
}

.contact-store__img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--hc-bg-secondary);
}

.contact-store__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.contact-store:hover .contact-store__img img {
    transform: scale(1.04);
}

.contact-store__name {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    margin: 0;
    padding: 1rem 1.25rem;
    font-size: 1.375rem;
    line-height: 1.1;
    color: #fff;
}

.contact-store__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem 1.25rem;
}

.contact-store__info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.contact-store__group {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.contact-store__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hc-color3);
}

.contact-store__value {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--hc-text-primary);
}

.contact-store__value a {
    color: var(--hc-color1);
    font-weight: 600;
    text-decoration: none;
}

.contact-store__value a:hover {
    color: var(--hc-color3);
    text-decoration: underline;
}

.contact-store__btn {
    display: inline-block;
    padding: 0.7rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--hc-text-secondary);
    background: var(--hc-color1);
    border-radius: var(--hc-radius);
    text-decoration: none;
    transition: background 0.2s ease;
}

.contact-store__btn:hover {
    background: var(--hc-color3);
    color: var(--hc-text-secondary);
    text-decoration: none;
}

.phone-menu {
    padding-left: 1.25rem;
}

/* -------------------------------------------------------------
   Social links in the chat dropdown
   ------------------------------------------------------------- */
.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
    padding: 0 0 1.25rem;
    list-style: none;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem 0.55rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--hc-color1);
    background: var(--hc-bg-secondary);
    border: var(--hc-border);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.3s var(--hc-ease);
}

.social-link svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    color: var(--hc-color3);
    transition: color 0.2s ease;
}

.social-link:hover {
    background: var(--hc-color1);
    border-color: var(--hc-color1);
    color: var(--hc-text-secondary);
    text-decoration: none;
    transform: translateY(-2px);
}

.social-link:hover svg {
    color: var(--hc-color2);
}

/* -------------------------------------------------------------
   Human section: offset frame behind the photo, big pull-quote
   ------------------------------------------------------------- */
.human-photo {
    position: relative;
    overflow: visible;
    margin: 0.75rem 0 0 0.75rem;
}

.human-photo::before {
    content: '';
    position: absolute;
    inset: -0.75rem 0.75rem 0.75rem -0.75rem;
    z-index: -1;
    border-radius: var(--hc-radius);
    background: var(--hc-color2);
    opacity: 0.55;
}

.human-photo picture {
    display: block;
    border-radius: var(--hc-radius);
    overflow: hidden;
    box-shadow: var(--hc-shadow-lift);
}

.help-quote {
    position: relative;
    margin: 1.75rem 0 0;
    padding: 1.75rem 1.5rem 1.25rem 2rem;
    background: var(--hc-bg-secondary);
    border-left: 4px solid var(--hc-color2);
    border-radius: 0 var(--hc-radius) var(--hc-radius) 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--hc-text-primary);
}

.help-quote::before {
    content: '\201C';
    position: absolute;
    top: -0.35rem;
    left: 0.9rem;
    font-size: 4rem;
    line-height: 1;
    color: var(--hc-color2);
    pointer-events: none;
}

.help-quote cite {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hc-color3);
}