#Shop {
    /* CLS: the React app mounts into this element, and until the bundle has downloaded and
       executed the div is EMPTY and zero-height. On a throttled mobile connection that is many
       seconds of collapsed page, and then the entire shop pops in at once — Lighthouse measured
       a Cumulative Layout Shift of 0.997 against a "poor" threshold of 0.25, essentially the
       worst possible score.

       Reserving a viewport's worth of height up front means the page never collapses and then
       expands, so mounting the app no longer moves anything. This is deliberately a permanent
       floor rather than something released on mount — releasing it would shrink the page for
       short content and cause the very shift it is meant to prevent. A shop page is taller than
       one viewport in practice, so the floor costs nothing. */
    min-height: 100vh;
}

    #Shop * {
    }

    #Shop *,
    #Shop *::before,
    #Shop *::after {
        -webkit-tap-highlight-color: transparent;
    }

    #Shop *:focus,
    #Shop *:focus-visible,
    #Shop *:focus-within,
    #Shop button:focus,
    #Shop button:focus-visible,
    #Shop .btn:focus,
    #Shop .btn:focus-visible,
    #Shop .accordion-button:focus,
    #Shop .accordion-button:focus-visible,
    #Shop input:focus,
    #Shop input:focus-visible,
    #Shop select:focus,
    #Shop select:focus-visible,
    #Shop textarea:focus,
    #Shop textarea:focus-visible,
    #Shop a:focus,
    #Shop a:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }


    #Shop .no-letterspacing,
    #Shop .gand-total,
    #Shop .money,
    #Shop .amount,
    #Shop .code,
    #Shop code,
    #Shop kbd,
    #Shop [class*="fa-"],
    #Shop svg,
    #Shop .pm-icon {
    }

.validationErrors {
    color: #dc3545; /* Bootstrap danger color */
    font-size: 12px;
    margin-top: 0px;
    font-weight: 500;
}

/* ===== Overrides globales (no scopeados a #Shop) ===== */

/* Desactivar el recuadro/halo de focus en todo el shop */
*:focus,
*:focus-visible,
*:focus-within,
*:-moz-focusring,
button:focus,
button:focus-visible,
a:focus,
a:focus-visible,
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Color consistente (gris) para todos los íconos de info del shop */
.fa-info-circle,
.info-icon-inline-btn,
.info-icon-inline-btn .fa-info-circle {
    color: #6b7280 !important;
}


/* ─── Long event titles wrap instead of being cut off ─────────────────────────
 *
 * The header title was clamped to two lines with an ellipsis, so an event with a
 * long name simply lost the end of it — the shopper could not read what they were
 * looking at. It now wraps to as many lines as it needs.
 *
 * The pill keeps min-height rather than a fixed height so it grows with the text
 * instead of overflowing it, and the clamp properties are unset explicitly
 * because -webkit-line-clamp only stops applying when display is no longer
 * -webkit-box.
 */
.head .event-name-text {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    max-height: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.head .event-name {
    height: auto;
    overflow: visible;
}

@media (max-width: 575.98px) {
    /* The mobile rule set a hard 40px height, which would clip a wrapped title. */
    .head .event-name {
        height: auto;
        min-height: 40px;
    }
}

/* ─── …and get more room before they wrap ─────────────────────────────────────
 *
 * The logo + title block was capped at 48% of the header row, so an organization
 * name wrapped onto three or four lines while half the row sat empty. It now
 * takes up to 66%: the wrap stays (long names still break instead of being cut
 * off) but far fewer names need it.
 *
 * The two things it borrows from must not be squeezed in return — the progress
 * indicator centres itself in whatever is left, and the language / currency /
 * cart controls are pinned so they can never be pushed off the row (the failure
 * mode the original 48% was guarding against).
 */
.head .imageElement {
    max-width: 66%;
}

.head .button-and-cart {
    flex: 0 0 auto;
}


/* ─── Event titles in the row view wrap too ───────────────────────────────────
 *
 * Belt and braces alongside the inline style: whichever stylesheet wins, a long
 * event name must not be cut off mid-word.
 */
.erv-title {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* A video standing in for a missing thumbnail must fill the tile exactly as the
 * image it replaces does, or the row height jumps between events. */
video.erv-thumb {
    object-fit: cover;
    object-position: center;
}

/* ─── Organization landing: the title gets the room the cart gave up ──────────
 *
 * On the organization landing in browse mode (Row View / List View) there is no
 * cart and no currency picker — nothing is bought on that page — so the whole
 * right-hand side of the header is free. The 66% cap above was still squeezing
 * the title into roughly 300px of it. Here it may run to 650px before it wraps.
 *
 * Stated in px, not %, because 650px is the requirement; a percentage would mean
 * something different at every viewport width. The cap still exists so a very
 * long organization name wraps instead of shoving the language switcher off the
 * row, and the wrap itself is unchanged.
 */
.head--browse .imageElement {
    max-width: 100% !important;
}

.head--browse .event-name {
    max-width: 650px !important;
}

/* The pill is the flex item that has to be allowed to grow into that space —
 * without this it only ever sizes to its text and the max-width never bites. */
.head--browse .event-name-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* ─── Event dates read as one line ────────────────────────────────────────────
 *
 * `30 OCT 2025 08:00 - 30 OCT 2025 17:00`, with the timezone behind the marker at
 * the end of it. The layout — one row, breaking between the two dates and never
 * inside one — lives in JSXScripts/ui/EventDateRange.tsx, which sets it inline so
 * no page's stylesheet can stack the dates back into a column. Nothing about the
 * range belongs here; only the clock icon's alignment against it does.
 */
.icon-and-date {
    align-items: flex-start;
}