/**
 * ECOM Service Portal — self-service-first Klantenservice hub, v0.9.37.
 * Scoped entirely to the shortcode; Gutenberg's 1220px page template remains
 * responsible for the surrounding page background and content width.
 */
.ecom-service-contact{
    --esc-ink:#261f19;
    --esc-copy:#73665a;
    --esc-line:#e6d9c9;
    --esc-gold:#a37a3b;
    --esc-paper:#fffdfa;
    width:100%;
    min-width:0;
    max-width:100%;
    padding:clamp(12px,2vw,24px) 0 clamp(20px,3vw,36px);
    color:var(--esc-ink);
    font-family:inherit;
    font-size:15px;
    line-height:1.55;
}
.ecom-service-contact,.ecom-service-contact *{box-sizing:border-box}
.ecom-service-contact svg{display:block;flex:none}
.ecom-service-contact__hero{text-align:center;max-width:850px;margin:0 auto clamp(32px,4vw,49px)}
.ecom-service-contact__eyebrow{
    color:#9a733d;
    font-size:11px;
    font-weight:800;
    letter-spacing:.19em;
    text-transform:uppercase;
    margin:0 0 10px;
}
.ecom-service-contact .ecom-service-contact__headline{
    color:#261c15;
    font:500 clamp(34px,4.4vw,55px)/1.13 Georgia,"Times New Roman",serif;
    letter-spacing:-.045em;
    margin:0 0 12px;
    padding:0;
}
.ecom-service-contact .ecom-service-contact__lead{
    color:#776b61;
    font-size:clamp(14px,1.55vw,17px);
    margin:0;
    line-height:1.65;
}
.ecom-service-contact__knowledge-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(14px,1.8vw,22px);
    margin:0 0 clamp(30px,4vw,47px);
}
.ecom-service-contact__knowledge-card{
    position:relative;
    display:flex;
    gap:20px;
    align-items:flex-start;
    min-width:0;
    min-height:168px;
    padding:clamp(23px,2.6vw,31px);
    border:1px solid var(--esc-line);
    border-radius:17px;
    background:linear-gradient(155deg,#fffefd,#faf6ef);
    box-shadow:0 9px 27px rgb(73 51 29 / .043);
    text-decoration:none!important;
    color:var(--esc-ink)!important;
    transition:border-color .18s,transform .18s,box-shadow .18s;
}
.ecom-service-contact__knowledge-card:hover{
    border-color:#c9ac84;
    transform:translateY(-2px);
    box-shadow:0 14px 29px rgb(73 51 29 / .085);
}
.ecom-service-contact__knowledge-card:focus-visible,
.ecom-service-contact__method:focus-visible,
.ecom-service-contact__button:focus-visible{
    outline:3px solid #ae864c;
    outline-offset:3px;
}
.ecom-service-contact__knowledge-icon{
    width:52px;height:52px;
    display:grid;place-items:center;
    flex:0 0 52px;
    background:#f5eadb;
    border-radius:14px;
    color:#946628;
}
.ecom-service-contact__knowledge-icon svg{width:29px;height:29px}
.ecom-service-contact__knowledge-content{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-width:0;
    gap:6px;
}
.ecom-service-contact__knowledge-content strong{
    font:550 clamp(21px,2.25vw,26px)/1.25 Georgia,"Times New Roman",serif;
    letter-spacing:-.015em;
    color:#2b2118;
}
.ecom-service-contact__knowledge-content>span:not(.ecom-service-contact__text-link){
    color:var(--esc-copy);font-size:13.5px;line-height:1.6;
}
.ecom-service-contact__text-link{
    color:#9d7136;
    margin-top:5px;
    font-size:13px;
    font-weight:750;
    display:inline-flex;
    gap:11px;
    align-items:center;
}
.ecom-service-contact__text-link span{font-size:19px;line-height:1}
.ecom-service-contact__contact{
    border-top:1px solid #e7ddd1;
    padding-top:clamp(30px,4vw,44px);
    margin:0 0 clamp(35px,5vw,55px);
}
.ecom-service-contact__section-heading{
    margin:0 0 clamp(18px,2.5vw,27px);
}
.ecom-service-contact .ecom-service-contact__section-heading h2{
    color:#2c2117;
    font:550 clamp(24px,2.6vw,32px)/1.22 Georgia,"Times New Roman",serif;
    letter-spacing:-.02em;
    margin:0 0 6px;
}
.ecom-service-contact .ecom-service-contact__section-heading p{
    color:var(--esc-copy);
    font-size:14px;
    line-height:1.65;
    margin:0;
}
.ecom-service-contact__method-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}
.ecom-service-contact__method{
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:flex-start;
    position:relative;
    min-width:0;
    min-height:132px;
    padding:17px 17px 19px;
    border:1px solid transparent;
    border-radius:13px;
    background:linear-gradient(145deg,#fcf9f4,#f9f4eb);
    text-decoration:none!important;
    color:#2d241c!important;
    transition:border-color .18s,background .18s,transform .18s;
}
.ecom-service-contact__method:hover{
    border-color:#d2b998;
    background:#fffaf3;
    transform:translateY(-2px);
}
.ecom-service-contact__method-icon{
    width:34px;
    height:34px;
    display:grid;place-items:center;
    margin-bottom:4px;
    color:#9b743a;
}
.ecom-service-contact__method-icon svg{width:29px;height:29px}
.ecom-service-contact__method--whatsapp .ecom-service-contact__method-icon{color:#198252}
.ecom-service-contact__method strong{
    font-weight:650;font-size:16px;line-height:1.28;font-family:inherit;
    color:#2c241b;
}
.ecom-service-contact__method>span:not(.ecom-service-contact__method-icon):not(.ecom-service-contact__method-arrow):not(.ecom-service-contact__method-phone){
    font-size:12px;
    line-height:1.55;
    color:#827366;
    padding-right:10px;
}
.ecom-service-contact__method-arrow{
    color:#a78047;
    position:absolute;
    right:16px;
    bottom:15px;
    font-size:19px;
}
.ecom-service-contact__form-section{
    width:min(100%,900px);
    margin:0 auto;
    min-width:0;
    scroll-margin-top:30px;
}
.ecom-service-contact__form-card,
.ecom-service-contact__feedback{
    width:100%;
    padding:clamp(22px,3vw,37px);
    border:1px solid var(--esc-line);
    border-radius:17px;
    background:linear-gradient(150deg,#fffefa,#fcf8f1);
    box-shadow:0 12px 33px rgb(73 51 29 / .06);
}
.ecom-service-contact__form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:21px}
.ecom-service-contact__field{
    display:flex;flex-direction:column;gap:8px;
    grid-column:1/-1;
    width:100%;min-width:0;
}
.ecom-service-contact__field--half{grid-column:span 1}
.ecom-service-contact__field label{font-size:13px;font-weight:750;color:#3e3023;line-height:1.35}
.ecom-service-contact__field label span{color:#a16c32}
.ecom-service-contact__field :is(input:not([type=file]),select,textarea){
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    min-height:48px;
    margin:0;
    padding:11px 14px;
    border:1px solid #dfd0bd;
    border-radius:10px;
    background:#fffdfa;
    box-shadow:none;
    outline:0;
    font-weight:400;font-size:14px;line-height:1.45;font-family:inherit;
    color:#31261d;
    transition:border-color .16s,box-shadow .16s;
}
.ecom-service-contact__field select{padding-right:30px}
.ecom-service-contact__field textarea{resize:vertical;min-height:152px}
.ecom-service-contact__field :is(input,select,textarea)::placeholder{opacity:1;color:#a29688}
.ecom-service-contact__field :is(input,select,textarea):focus-visible{
    border-color:#ad884f;
    box-shadow:0 0 0 3px rgb(173 136 79 / .15);
}
.ecom-service-contact__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    grid-column:1/-1;
    flex-wrap:wrap;
    margin-top:3px;
}
.ecom-service-contact .ecom-service-contact__button{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    min-height:51px;
    padding:13px 20px;
    border:1px solid #b78e4c;
    border-radius:10px;
    color:#2b1d0c;
    font-weight:750;font-size:14px;line-height:1.2;font-family:inherit;
    background:linear-gradient(120deg,#b78843,#e0b96c 55%,#b0833b);
    box-shadow:0 6px 17px rgb(134 91 35 / .17);
    cursor:pointer;
    transition:filter .16s,transform .16s;
}
.ecom-service-contact__button svg{width:22px;height:22px}
.ecom-service-contact__button:hover{filter:brightness(1.06);transform:translateY(-1px)}
.ecom-service-contact__footer-note{
    color:#837569;
    margin:0;
    font-size:12px;
    line-height:1.55;
    display:flex;
    align-items:center;
    gap:11px;
    flex:1 1 220px;
    max-width:370px;
}
.ecom-service-contact__footer-note svg{
    width:22px;height:22px;color:#b18648;flex:0 0 22px;
}
.ecom-service-contact__errors{
    color:#8c3e2d;
    background:#fff7f2;
    border:1px solid #e3b5a5;
    border-radius:10px;
    padding:14px 17px;
    margin-bottom:21px;
    font-size:13px;
}
.ecom-service-contact__errors strong{display:block;margin-bottom:4px}
.ecom-service-contact__errors ul{margin:0;padding-left:19px}
.ecom-service-contact__feedback{display:grid;gap:7px}
.ecom-service-contact__feedback-icon{
    display:grid;place-items:center;width:40px;height:40px;
    color:#427d54;border-radius:50%;background:#ebf4e9;
    font-size:22px;
}
.ecom-service-contact__feedback h3{font:550 27px/1.2 Georgia,"Times New Roman",serif;margin:0}
.ecom-service-contact__feedback p{color:var(--esc-copy);margin:0}
.ecom-service-contact__trap{
    position:absolute!important;left:-10000px!important;width:1px!important;
    height:1px!important;overflow:hidden!important;opacity:0!important;
    pointer-events:none!important;
}
@media(max-width:920px){
    .ecom-service-contact__method-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .ecom-service-contact__method{min-height:125px}
    .ecom-service-contact__knowledge-card{padding:21px;gap:14px}
}
@media(max-width:620px){
    .ecom-service-contact{padding:11px 0 24px}
    .ecom-service-contact__hero{margin-bottom:25px}
    .ecom-service-contact .ecom-service-contact__headline{font-size:clamp(31px,8.4vw,42px)}
    .ecom-service-contact__knowledge-grid{grid-template-columns:1fr;gap:12px;margin-bottom:29px}
    .ecom-service-contact__knowledge-card{min-height:0;padding:19px}
    .ecom-service-contact__knowledge-icon{width:44px;height:44px;flex-basis:44px}
    .ecom-service-contact__knowledge-icon svg{width:26px;height:26px}
    .ecom-service-contact__contact{padding-top:28px;margin-bottom:34px}
    .ecom-service-contact__method-grid{gap:9px}
    .ecom-service-contact__method{min-height:137px;padding:15px 12px}
    .ecom-service-contact__method strong{font-size:14px}
    .ecom-service-contact__method-arrow{right:12px;bottom:12px}
    .ecom-service-contact__form-card,.ecom-service-contact__feedback{padding:20px 16px}
    .ecom-service-contact__form{grid-template-columns:minmax(0,1fr);row-gap:18px}
    .ecom-service-contact__field--half{grid-column:1/-1}
    .ecom-service-contact__footer{gap:14px}
    .ecom-service-contact .ecom-service-contact__button{width:100%}
    .ecom-service-contact__footer-note{max-width:none}
}
@media(prefers-reduced-motion:reduce){
    .ecom-service-contact__knowledge-card,.ecom-service-contact__method,
    .ecom-service-contact .ecom-service-contact__button{transition:none}
}


/* 0.9.37 — three equal contact methods, subtle customer sign-in, mobile fit */
.ecom-service-contact__method-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch;
}
.ecom-service-contact__method-grid--count-2 {
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.ecom-service-contact__method {
    min-height:154px;
    height:100%;
    padding:20px 21px 23px;
    border-color:#eadfce;
    background:linear-gradient(150deg,#fffdf9,#f8f3eb);
    box-shadow:0 7px 20px rgb(77 54 25 / .04);
}
.ecom-service-contact__method>span.ecom-service-contact__method-phone {
    display:inline-block;
    margin-top:3px;
    padding:0 22px 0 0;
    color:#8d6532;
    font-size:14px;
    font-weight:700;
    line-height:1.4;
    overflow-wrap:anywhere;
}
.ecom-service-contact__method strong {
    overflow-wrap:anywhere;
    hyphens:auto;
}
.ecom-service-contact__method--phone .ecom-service-contact__method-icon {
    color:#9b743a;
}
.ecom-service-contact__method--form {
    background:linear-gradient(145deg,#fffaf0,#f8f1e5);
}
.ecom-service-contact__login-note {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    column-gap:7px;
    row-gap:4px;
    min-height:52px;
    width:100%;
    padding:12px 18px;
    margin:0 0 18px;
    border:1px solid #dfc49d;
    border-top:2px solid #b88c4c;
    border-radius:11px;
    background:#fbf6ed;
    color:#645343;
    font-size:13.5px;
    line-height:1.5;
}
.ecom-service-contact__login-note svg {
    width:19px;
    height:19px;
    color:#b38948;
    margin:0 7px 0 0;
}
.ecom-service-contact__login-note a {
    color:#775122!important;
    font-weight:700;
    text-decoration:underline!important;
    text-underline-offset:3px;
}
.ecom-service-contact__login-note a:hover {
    color:#54350f!important;
}
.ecom-service-contact__login-note a:focus-visible {
    outline:2px solid #aa7c3b;
    outline-offset:3px;
}

/* Prevent the long Dutch support title from escaping narrow screens. */
.ecom-service-contact__knowledge-content,
.ecom-service-contact__knowledge-card,
.ecom-service-contact__knowledge-content strong {
    min-width:0;
    max-width:100%;
}
.ecom-service-contact__knowledge-content strong {
    overflow-wrap:anywhere;
    hyphens:auto;
}
@media (max-width:1020px) {
    .ecom-service-contact__method-grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .ecom-service-contact__method-grid--count-2 {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media (max-width:760px) {
    .ecom-service-contact__method-grid,
    .ecom-service-contact__method-grid--count-2 {
        grid-template-columns:minmax(0,1fr);
        gap:12px;
    }
    .ecom-service-contact__method {
        display:grid;
        grid-template-columns:38px minmax(0,1fr) 22px;
        grid-template-rows:auto auto;
        column-gap:14px;
        row-gap:5px;
        align-items:center;
        align-content:center;
        min-height:98px;
        padding:16px 18px;
    }
    .ecom-service-contact__method-icon {
        grid-column:1;
        grid-row:1 / span 3;
        width:38px;
        height:38px;
        align-self:center;
        margin:0;
    }
    .ecom-service-contact__method strong {
        grid-column:2;
        grid-row:1;
        font-size:16px;
        padding:0;
    }
    .ecom-service-contact__method>span:not(.ecom-service-contact__method-icon):not(.ecom-service-contact__method-arrow):not(.ecom-service-contact__method-phone) {
        grid-column:2;
        grid-row:2;
        padding:0;
        font-size:12.5px;
    }
    .ecom-service-contact__method>span.ecom-service-contact__method-phone {
        grid-column:2;
        grid-row:3;
        margin:0;
        padding:0;
    }
    .ecom-service-contact__method-arrow {
        grid-column:3;
        grid-row:1 / span 3;
        align-self:center;
        justify-self:end;
        position:static;
        margin:0;
    }
}
@media (max-width:620px) {
    .ecom-service-contact__knowledge-card {
        flex-direction:row;
        align-items:flex-start;
        gap:13px;
    }
    .ecom-service-contact__knowledge-content {
        width:auto;
        flex:1 1 0;
    }
    .ecom-service-contact__knowledge-content strong {
        font-size:clamp(17px,4.6vw,21px);
        line-height:1.23;
        overflow-wrap:anywhere;
    }
    .ecom-service-contact__knowledge-card {
        padding:18px;
    }
    .ecom-service-contact__login-note {
        padding:12px 14px;
        font-size:13px;
        margin-bottom:14px;
    }
    .ecom-service-contact__method {
        min-height:93px;
    }
}


/* Direct return route, separate from service tickets. */
.ecom-service-contact__return-note {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    margin:24px 0;
    padding:19px 23px;
    background:#fcf8f1;
    border:1px solid #e5d8c1;
    border-radius:12px;
    color:#2d261d;
}
.ecom-service-contact__return-note strong {display:block;font-weight:700;font-size:16px}
.ecom-service-contact__return-note p {margin:4px 0 0;font-size:13px;line-height:1.5;color:#736657}
.ecom-service-contact__return-note a {
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    border-radius:9px;border:1px solid #b99a69;padding:10px 17px;
    text-decoration:none;color:#463217;font-size:13px;font-weight:700;
    white-space:nowrap;
}
.ecom-service-contact__return-note a:focus-visible {outline:2px solid #ad8547;outline-offset:3px}
@media (max-width:620px) {
    .ecom-service-contact__return-note {flex-direction:column;align-items:stretch;padding:17px}
    .ecom-service-contact__return-note a {width:100%}
}