/* Language selector + language suggestion bar.
   Kept in its own file: style.css is ~686KB of template CSS and appending to it
   risks collateral damage. Tokens below mirror that stylesheet (#74D2DE accent,
   #101820 ink, #757576 muted, 20px radii). */

/* ---------------------------------------------------------------- selector */

.jc-lang {
    position: relative;
}

/* .jc-lang also carries the template's .icon class, so float and height come
   from the header rules; only the control itself is styled here.

   The margin reset is load-bearing: style.css carries a global
   `button { margin: 55px 0 0 }`, which is why every other header icon is an
   <a> or a <div>. Ours has to be a real button (it opens a menu), so it drops
   55px below the row unless that is undone. */
.jc-lang .jc-lang-trigger {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    height: 100%;
}

.jc-flag {
    display: block;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    /* A hairline ring keeps the white in the Union Flag from bleeding into the
       white header, and gives the Spanish flag a defined edge. */
    box-shadow: inset 0 0 0 1px rgba(16, 24, 32, 0.16);
    transition: transform 0.2s ease 0s, box-shadow 0.2s ease 0s;
    -webkit-transition: transform 0.2s ease 0s, box-shadow 0.2s ease 0s;
}

.jc-flag svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* The header's icons8 glyphs render at 21x22 as thin outlines. A filled shape
   reads LARGER than an outline of the same box, not smaller — this sat at 22px
   on the opposite assumption and stood out as the biggest thing on the row. The
   avatar is the other filled shape up there, so both sit at 20 and the row
   reads even. */
.jc-flag-lg {
    width: 20px;
    height: 20px;
}

.jc-flag-sm {
    width: 20px;
    height: 20px;
}

.jc-lang-trigger:hover .jc-flag {
    transform: scale(1.08);
    -webkit-transform: scale(1.08);
    box-shadow: inset 0 0 0 1px rgba(16, 24, 32, 0.28);
}

.jc-lang-trigger:focus-visible {
    outline: none;
}

.jc-lang-trigger:focus-visible .jc-flag {
    box-shadow: inset 0 0 0 1px rgba(16, 24, 32, 0.28), 0 0 0 3px rgba(116, 210, 222, 0.85);
}

/* ---------------------------------------------------------------- dropdown */

.jc-lang-menu {
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(16, 24, 32, 0.06), 0 12px 32px rgba(16, 24, 32, 0.14);
    padding: 14px 12px 12px;
    position: absolute;
    right: 0;
    top: calc(50% + 24px);
    min-width: 194px;
    z-index: 9999;
    text-align: left;
}

.jc-lang-menu[hidden] {
    display: none;
}

/* Small caret pointing back at the flag. */
.jc-lang-menu:before {
    content: '';
    position: absolute;
    top: -6px;
    right: 15px;
    width: 12px;
    height: 12px;
    background: #FFFFFF;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    border-radius: 2px;
}

.jc-lang-heading {
    color: #757576;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 8px;
    padding: 0 10px;
}

.jc-lang-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jc-lang-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.jc-lang-option {
    align-items: center;
    border-radius: 13px;
    color: #101820;
    display: flex;
    font-size: 14px;
    font-weight: 500;
    gap: 10px;
    padding: 9px 10px;
    text-decoration: none;
    transition: background 0.15s ease 0s;
    -webkit-transition: background 0.15s ease 0s;
}

.jc-lang-option:hover,
.jc-lang-option:focus-visible {
    background: #F5F5F6;
    outline: none;
    text-decoration: none;
}

.jc-lang-option.is-active {
    background: #F7F7F8;
    font-weight: 600;
}

.jc-lang-name {
    flex: 1 1 auto;
}

/* Tick on the active locale, drawn in CSS so the menu needs no icon font. */
.jc-lang-option.is-active .jc-lang-check {
    flex: 0 0 auto;
    width: 12px;
    height: 7px;
    border-left: 2px solid #101820;
    border-bottom: 2px solid #101820;
    transform: rotate(-45deg) translate(1px, -2px);
    -webkit-transform: rotate(-45deg) translate(1px, -2px);
}

/* No JavaScript: reveal the list rather than trapping the visitor behind a
   button that cannot open. */
.no-js .jc-lang-menu {
    display: block;
    position: static;
    box-shadow: none;
    padding: 0;
    min-width: 0;
}

.no-js .jc-lang-menu:before,
.no-js .jc-lang-heading {
    display: none;
}

@media (max-width: 600px) {
    /* No flag override here: the header glyphs are 21x22 at every width, so the
       base size already matches. */

    .jc-lang-menu {
        min-width: 172px;
    }
}

/* ---------------------------------------------- language suggestion cloud */

/* Shown when the browser language differs from the page language. Google's
   guidance is to serve the requested URL and offer the alternative, never to
   redirect — an auto-redirect would stop Googlebot (which crawls from the US)
   from ever reaching /es/.

   Deliberately `fixed` and not part of the flow: a full-width bar shoved the
   header down the moment it appeared, which read as an error state. This floats
   over the page and leaves the layout alone. */
.jc-lang-hint {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9500;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 24px);
    padding: 8px 8px 8px 18px;
    background: #FFFFFF;
    color: #101820;
    border: 1px solid rgba(16, 24, 32, 0.08);
    border-radius: 999px;
    box-shadow: 0 8px 28px rgba(16, 24, 32, 0.16), 0 2px 6px rgba(16, 24, 32, 0.06);
    font-size: 14px;
    line-height: 1.3;
    opacity: 1;
    /* No fill-mode, and the resting state lives on the element rather than in a
       `to` frame. With `both` the card sat at the keyframe's opacity: 0 until the
       animation ran — so anything that stopped it running (a background tab, a
       browser that skips offscreen animations) left an invisible prompt. This
       way the animation is decoration: if it never plays, the card is simply
       there. */
    animation: jc-lang-hint-in 0.28s ease-out;
}

@keyframes jc-lang-hint-in {
    from { opacity: 0; transform: translate(-50%, -12px); }
}

/* While the language menu is open, the hint yields. The menu lives inside the
   sticky header's stacking context (z 500), so its own z-index can never beat
   the hint's 9500 — the hint was painting over the open menu and cropping the
   first option's flag. The switcher script toggles this class on <html>. */
.jc-lang-open .jc-lang-hint {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .jc-lang-hint {
        animation: none;
    }
}

.jc-lang-hint-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jc-lang-hint-go {
    align-items: center;
    background: #74D2DE;
    border-radius: 999px;
    color: #101820;
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 600;
    padding: 7px 15px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease 0s;
    -webkit-transition: background 0.2s ease 0s;
}

.jc-lang-hint-go:hover {
    background: #89D9E3;
    text-decoration: none;
}

/* `margin: 0` matters — style.css sets a global `button { margin: 55px 0 0 }`,
   which pushed this control onto its own line below the card. */
.jc-lang-hint-dismiss {
    -webkit-appearance: none;
    appearance: none;
    align-items: center;
    background: none;
    border: 0;
    border-radius: 50%;
    color: #757576;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 28px;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 28px;
    transition: background 0.2s ease 0s, color 0.2s ease 0s;
    -webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s;
}

.jc-lang-hint-dismiss:hover {
    background: rgba(16, 24, 32, 0.06);
    color: #101820;
}

.jc-lang-hint-dismiss:focus-visible,
.jc-lang-hint-go:focus-visible {
    outline: 2px solid #101820;
    outline-offset: 2px;
}

/* Narrow screens: the sentence needs to wrap, so drop the pill shape and let
   the card grow instead of truncating the offer. */
@media only screen and (max-width: 560px) {
    .jc-lang-hint {
        border-radius: 18px;
        flex-wrap: wrap;
        justify-content: center;
        left: 12px;
        right: 12px;
        max-width: none;
        padding: 12px 12px 12px 16px;
        text-align: center;
        transform: none;
    }

    @keyframes jc-lang-hint-in {
        from { opacity: 0; transform: translateY(-12px); }
    }

    .jc-lang-hint-text {
        flex: 1 0 100%;
        white-space: normal;
    }
}

/* ---------------------------------------------------------------------------
   Header icon row on narrow phones.

   The row was spaced for four icons. The language flag made five, and at 360px
   the last one (the wishlist heart) ran 23px into the logo — measured, not
   guessed. The icons float right, so the overflow lands on the logo rather than
   off the edge of the screen, which is why it reads as two things printed on
   top of each other.

   Nothing here changes the icons themselves: it only closes the gaps, which
   were generous enough to give back the ~70px needed. The 50px gap before the
   bag is a deliberate separator (it carries a 1px divider centred inside it),
   so it is halved rather than removed, and the divider moves with it.
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {
    header .content .sections .section.three .blocks .block .icons .icon {
        margin-left: 11px;
    }

    header .content .sections .section.three .blocks .block .icons .icon[data-icon='2'] {
        margin-left: 26px;
    }

    header .content .sections .section.three .blocks .block .icons .icon[data-icon='2']:before {
        left: -13px;
    }

    header .content .sections .section.three .blocks .block .icons .icon[data-icon='1'] {
        margin-left: 24px;
    }
}

/* Below ~340px (older SE-sized handsets) there is no spacing left to reclaim,
   so the separator goes rather than the logo being hit again. */
@media (max-width: 340px) {
    header .content .sections .section.three .blocks .block .icons .icon[data-icon='2'] {
        margin-left: 14px;
    }

    header .content .sections .section.three .blocks .block .icons .icon[data-icon='2']:before {
        display: none;
    }
}