/* ============================================================
   FORMS - Contact Form 7

   assets/css/forms.css

   Loaded by inc/enqueue.php, only on pages where Contact Form 7
   has registered its assets.

   Layout notes:

   - The form sits in a card so it reads as one object rather
     than a run of loose fields down the page.
   - Above 760px the short fields pair into two columns. Which
     fields span the full width is decided by field NAME using
     :has(), not by position - an earlier version used
     nth-child() and would break the moment a field was moved.
   - Checkbox and radio groups render as tappable pills. On a
     phone a bare 13px checkbox is a poor target; a pill makes
     the whole row tappable.
   ============================================================ */

.wpcf7 {
    max-width: 720px;
    margin: 0 0 8px;
}

.wpcf7-form {
    position: relative;
    padding: 32px 32px 30px;
    border: 2px solid #ded7ce;
    border-radius: 16px;
    background: #faf8f5;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
    overflow: hidden;
}

/* A brand-coloured edge along the top, so the panel is obviously
   a thing to fill in rather than more page. A 1px grey border on
   a white card against a white page reads as nothing. */

.wpcf7-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--fm-primary, #cf2027);
}

/* Fields stay white so they lift off the panel tint. */

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="time"],
.wpcf7-form select,
.wpcf7-form textarea {
    background: #fff;
}

.wpcf7-form p {
    margin: 0 0 18px;
}

.wpcf7-form p:last-of-type {
    margin-bottom: 0;
}

/* Each field is wrapped in a <label>, so the label is the row:
   caption on its own line, control beneath. */

.wpcf7-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    color: #3a3a3a;
}

.wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    margin-top: 7px;
}

/* ============================================================
   INPUTS
   ============================================================ */

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="time"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 400;
    color: #2f2f2f;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.wpcf7-form textarea {
    height: auto;
    min-height: 110px;
    padding: 12px 14px;
    line-height: 1.55;
    resize: vertical;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    border-color: var(--fm-primary, #cf2027);
    box-shadow: 0 0 0 3px rgba(207, 32, 39, 0.1);
}

.wpcf7-form input:hover:not(:focus),
.wpcf7-form select:hover:not(:focus),
.wpcf7-form textarea:hover:not(:focus) {
    border-color: #c9c9c9;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: #aaa;
}

/* appearance:none removes the native select arrow, so draw one. */

.wpcf7-form select {
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 17px;
    cursor: pointer;
}

/* ============================================================
   FIELDSETS

   A group of checkboxes under one question belongs in a
   fieldset with a legend, not inside a <label> - CF7's
   use_label_element wraps each option in its own <label>, and a
   label nested in a label is invalid HTML that browsers resolve
   inconsistently (clicking one pill can toggle another).

   Browsers give fieldset a default border and odd padding, so
   both are reset and the legend is styled to match the field
   captions around it.
   ============================================================ */

.wpcf7-form fieldset {
    margin: 0 0 18px;
    padding: 0;
    border: none;
    min-width: 0;
}

.wpcf7-form legend {
    display: block;
    width: 100%;
    padding: 0;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    color: #3a3a3a;
}

/* ============================================================
   CHECKBOX AND RADIO GROUPS AS PILLS
   ============================================================ */

.wpcf7-form .wpcf7-checkbox,
.wpcf7-form .wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.wpcf7-form .wpcf7-list-item {
    margin: 0;
}

.wpcf7-form .wpcf7-checkbox .wpcf7-list-item label,
.wpcf7-form .wpcf7-radio .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    background: #fff;
    font-size: 0.88rem;
    font-weight: 500;
    color: #444;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.wpcf7-form .wpcf7-checkbox .wpcf7-list-item label:hover,
.wpcf7-form .wpcf7-radio .wpcf7-list-item label:hover {
    border-color: #c0c0c0;
}

.wpcf7-form .wpcf7-checkbox .wpcf7-list-item:has(input:checked) label,
.wpcf7-form .wpcf7-radio .wpcf7-list-item:has(input:checked) label {
    border-color: var(--fm-primary, #cf2027);
    background: #fdf2f2;
    color: var(--fm-primary, #cf2027);
    font-weight: 600;
}

/* Keyboard focus. The real input is inside the pill, so without
   this someone tabbing through has no idea where they are -
   the native outline lands on an 18px box inside a 44px pill. */

.wpcf7-form .wpcf7-list-item:has(input:focus-visible) label {
    box-shadow: 0 0 0 3px rgba(207, 32, 39, 0.18);
    border-color: var(--fm-primary, #cf2027);
}

.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--fm-primary, #cf2027);
    cursor: pointer;
}

/* ---- The consent line is prose, not a pill ---- */

.wpcf7-form .wpcf7-acceptance {
    display: block;
    margin-top: 4px;
}

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.55;
    color: #777;
}

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item:has(input:checked) label {
    background: none;
    border: none;
    color: #777;
    font-weight: 400;
}

.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
    margin-top: 2px;
}

/* ============================================================
   SUBMIT
   ============================================================ */

.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
    width: 100%;
    max-width: 340px;
    height: 52px;
    margin-top: 4px;
    padding: 0 28px;
    border: none;
    border-radius: 10px;
    background: var(--fm-primary, #cf2027);
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.08s ease;
    -webkit-appearance: none;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover {
    background: var(--fm-primary-hover, #b91c22);
}

.wpcf7-form input[type="submit"]:active,
.wpcf7-form button[type="submit"]:active {
    transform: translateY(1px);
}

.wpcf7-spinner {
    margin: 0 0 0 12px;
    vertical-align: middle;
}

/* ============================================================
   VALIDATION AND RESPONSES
   ============================================================ */

.wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #c62828;
}

.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
    border-color: #e57373;
    background: #fffafa;
}

.wpcf7 form .wpcf7-response-output {
    margin: 20px 0 0;
    padding: 14px 16px;
    border: none;
    border-left: 5px solid #999;
    border-radius: 8px;
    background: #f5f5f5;
    font-size: 0.86rem;
    line-height: 1.55;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-left-color: #2e7d32;
    background: #f3faf3;
    color: #1b5e20;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    border-left-color: #e6a23c;
    background: #fffbf2;
    color: #7a4b00;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    border-left-color: #c62828;
    background: #ffebee;
    color: #4a2c2c;
}

/* CF7's anti-spam field renders as a stray delta on some themes.
   Hidden visually but left in the accessibility tree. */

.wpcf7-form .screen-reader-response {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* ============================================================
   TWO COLUMNS ON WIDER SCREENS

   Spans are chosen by field name with :has(), so reordering the
   form cannot silently break the layout. Anything not named
   here defaults to half width.
   ============================================================ */

@media (min-width: 760px) {

    .wpcf7-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 20px;
        align-items: start;
    }

    .wpcf7-form > fieldset,
    .wpcf7-form > p:has([name="company-name"]),
    .wpcf7-form > p:has([name="company-address"]),
    .wpcf7-form > p:has([name="trade-interest"]),
    .wpcf7-form > p:has([name="trade-notes"]),
    .wpcf7-form > p:has([name="event-address"]),
    .wpcf7-form > p:has([name="event-notes"]),
    .wpcf7-form > p:has([name="your-message"]),
    .wpcf7-form > p:has(textarea),
    .wpcf7-form > p:has(.wpcf7-acceptance),
    .wpcf7-form > p:has(input[type="submit"]),
    .wpcf7-form > .wpcf7-response-output,
    .wpcf7-form > .screen-reader-response {
        grid-column: 1 / -1;
    }
}

/* Browsers without :has(): one column rather than a scrambled
   grid. Kept outside the media query so it wins everywhere. */

@supports not selector(:has(*)) {

    .wpcf7-form {
        display: block;
    }
}

/* ============================================================
   TABLET
   ============================================================ */

@media (min-width: 481px) and (max-width: 759px) {

    .wpcf7-form {
        padding: 26px 22px 24px;
    }
}

/* ============================================================
   PHONE
   ============================================================ */

@media (max-width: 480px) {

    .wpcf7 {
        max-width: none;
    }

    .wpcf7-form {
        padding: 22px 16px 20px;
        border-radius: 12px;
    }

    .wpcf7-form p {
        margin-bottom: 16px;
    }

    /* 16px, or iOS zooms the page on focus and does not zoom back
       out on blur. */
    .wpcf7-form input[type="text"],
    .wpcf7-form input[type="email"],
    .wpcf7-form input[type="tel"],
    .wpcf7-form input[type="url"],
    .wpcf7-form input[type="number"],
    .wpcf7-form input[type="date"],
    .wpcf7-form select,
    .wpcf7-form textarea {
        font-size: 16px;
        height: 50px;
    }

    .wpcf7-form textarea {
        height: auto;
        min-height: 120px;
    }

    /* Pills go full width so they are unmissable targets. */
    .wpcf7-form .wpcf7-checkbox,
    .wpcf7-form .wpcf7-radio {
        flex-direction: column;
        gap: 7px;
    }

    .wpcf7-form .wpcf7-checkbox .wpcf7-list-item,
    .wpcf7-form .wpcf7-radio .wpcf7-list-item {
        width: 100%;
    }

    .wpcf7-form .wpcf7-checkbox .wpcf7-list-item label,
    .wpcf7-form .wpcf7-radio .wpcf7-list-item label {
        width: 100%;
        min-height: 48px;
        border-radius: 10px;
    }

    .wpcf7-form input[type="submit"],
    .wpcf7-form button[type="submit"] {
        max-width: none;
        height: 54px;
    }
}

/* ============================================================
   REFINEMENTS
   ============================================================ */

/* ---- Chrome autofill ----
   Chrome paints autofilled fields pale yellow with its own text
   colour, ignoring background-color. The inset shadow trick is
   the only reliable way to override it, and the long transition
   delay stops the yellow flashing before the shadow applies. */

.wpcf7-form input:-webkit-autofill,
.wpcf7-form input:-webkit-autofill:hover,
.wpcf7-form input:-webkit-autofill:focus,
.wpcf7-form textarea:-webkit-autofill,
.wpcf7-form select:-webkit-autofill {
    -webkit-text-fill-color: #2f2f2f;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    transition: background-color 9999s ease-in-out 0s;
}

.wpcf7-form input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px rgba(207, 32, 39, 0.1);
}

/* ---- Validation messages ----
   A coloured dot in front, so an error reads as an error at a
   glance rather than as small red prose. */

.wpcf7-form .wpcf7-not-valid-tip {
    display: flex;
    align-items: center;
    gap: 7px;
}

.wpcf7-form .wpcf7-not-valid-tip::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #c62828;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* ---- While submitting ----
   CF7 adds .submitting to the form. Without this the page looks
   frozen and people press the button again, which is how you end
   up with two enquiries from the same person. */

.wpcf7-form.submitting {
    opacity: 0.6;
    pointer-events: none;
}

.wpcf7-form.submitting input[type="submit"],
.wpcf7-form.submitting button[type="submit"] {
    cursor: wait;
}

.wpcf7-spinner {
    background-color: var(--fm-primary, #cf2027);
    opacity: 0.55;
}

/* ---- After a successful send ----
   Hide the fields and leave only the confirmation, so nobody
   reads a filled-in form and wonders whether it went. */

.wpcf7 form.sent .wpcf7-response-output {
    margin-top: 0;
    padding: 20px 22px;
    font-size: 0.95rem;
    font-weight: 600;
}

/* ---- Textarea resize grip ---- */

.wpcf7-form textarea {
    resize: vertical;
    max-height: 340px;
}

/* ---- Selection colour, to match the rest of the site ---- */

.wpcf7-form ::selection {
    background: rgba(207, 32, 39, 0.16);
}

/* ---- Reduced motion ----
   Respect the OS setting rather than animating regardless. */

@media (prefers-reduced-motion: reduce) {

    .wpcf7-form input,
    .wpcf7-form select,
    .wpcf7-form textarea,
    .wpcf7-form label,
    .wpcf7-form input[type="submit"],
    .wpcf7-form button[type="submit"] {
        transition: none;
    }

    .wpcf7-form input[type="submit"]:active,
    .wpcf7-form button[type="submit"]:active {
        transform: none;
    }
}

/* ---- Print ----
   A trade application is the sort of thing that gets printed for
   a file. Drop the card chrome and the button. */

@media print {

    .wpcf7-form {
        border: none;
        box-shadow: none;
        padding: 0;
    }

    .wpcf7-form input[type="submit"],
    .wpcf7-form button[type="submit"],
    .wpcf7-spinner {
        display: none;
    }
}

/* =======================================================
   ALLERGY PROFILE (inc/allergies.php)
======================================================= */

.rodi-al {
    margin: 24px 0;
    padding: 18px;
    border: 1px solid #e6d3d3;
    border-radius: 12px;
    background: #fffafa;
}

.rodi-al-title {
    padding: 0 6px;
    font-weight: 700;
    font-size: 16px;
}

.rodi-al-optional {
    font-weight: 400;
    color: #777;
}

.rodi-al-statement {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-left: 4px solid #b71c1c;
    border-radius: 6px;
    background: #fdecea;
    color: #5d1010;
    font-size: 13px;
    line-height: 1.5;
}

.rodi-al-statement p {
    margin: 6px 0 0;
}

.rodi-al-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 6px 14px;
    margin-bottom: 12px;
}

.rodi-al-option,
.rodi-al-consent label,
.rodi-al-remove label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

.rodi-al-option input,
.rodi-al-consent input,
.rodi-al-remove input {
    margin-top: 3px;
    flex-shrink: 0;
}

.rodi-al-row {
    margin: 10px 0 0;
}

.rodi-al-row > label[for] {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 14px;
}

.rodi-al-consent {
    padding-top: 10px;
    border-top: 1px solid #f0dede;
    font-weight: 600;
}

.rodi-al-remove {
    color: #777;
}

.rodi-al-banner {
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 2px solid #b71c1c;
    border-radius: 8px;
    background: #fdecea;
    color: #7f1010;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

/* =======================================================
   ACCOUNT PAGES - SIGN IN / REGISTER (inc/login.php)
======================================================= */

/* Full width: no basket sidebar on account pages. */
.rodi-account-wide .modern-sidebar {
    display: none;
}

.rodi-account-wide .modern-content-area {
    flex: 1 1 100%;
    max-width: 100%;
}

.rodi-account-out .modern-main-content h1,
.rodi-account-out .page-title,
.rodi-account-out .entry-title {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Two even cards, top-aligned. */
.rodi-account-out #customer_login.u-columns.col2-set {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: start;
    gap: 28px;
    max-width: 1040px;
}

.rodi-account-out .u-column1.col-1,
.rodi-account-out .u-column2.col-2 {
    width: auto;
    float: none;
    padding: 32px;
    border-radius: 16px;
}


.rodi-account-out .u-column1.col-1 h2,
.rodi-account-out .u-column2.col-2 h2 {
    font-size: 1.6rem;
    margin-bottom: 24px;
}

/* First and last name side by side. */
.woocommerce-form-register .form-row-first,
.woocommerce-form-register .form-row-last {
    width: calc(50% - 6px);
    float: left;
}

.woocommerce-form-register .form-row-last {
    margin-left: 12px;
}

.woocommerce-form-register .form-row-wide,
.woocommerce-form-register .clear {
    clear: both;
}

.woocommerce-form-register .optional {
    font-weight: 400;
    color: #888;
}

/* The theme turns every plain <p> in the register form into a blue info
   box. Calmer, on-brand notes instead. */
.woocommerce-form-register p:not(.woocommerce-form-row):not(.form-row) {
    padding: 10px 14px !important;
    border: 0 !important;
    border-left: 3px solid #e0e0e0 !important;
    border-radius: 6px !important;
    background: #f7f7f7 !important;
    color: #555 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.woocommerce-form-register p:not(.woocommerce-form-row):not(.form-row) a {
    color: var(--foodmaster-primary, #c62828);
}

@media (max-width: 860px) {

    .rodi-account-out #customer_login.u-columns.col2-set {
        grid-template-columns: 1fr;
    }

    .rodi-account-out .u-column1.col-1,
    .rodi-account-out .u-column2.col-2 {
        padding: 24px 20px;
    }
}

@media (max-width: 420px) {

    .woocommerce-form-register .form-row-first,
    .woocommerce-form-register .form-row-last {
        width: 100%;
        float: none;
        margin-left: 0;
    }
}

/* =======================================================
   ALLERGY BOX - COLLAPSIBLE (replaces the fieldset look above)
======================================================= */

details.rodi-al {
    margin: 22px 0;
    padding: 0;
    border: 1px solid #ecdcdc;
    border-radius: 12px;
    background: #fffafa;
    overflow: hidden;
}

details.rodi-al > summary.rodi-al-title {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 44px 14px 16px;
    position: relative;
    list-style: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

details.rodi-al > summary::-webkit-details-marker {
    display: none;
}

details.rodi-al > summary::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #c62828;
    border-bottom: 2px solid #c62828;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
}

details.rodi-al[open] > summary::after {
    transform: translateY(-30%) rotate(-135deg);
}

details.rodi-al[open] > summary {
    border-bottom: 1px solid #f0e2e2;
}

.rodi-al-sub {
    font-size: 12.5px;
    font-weight: 400;
    color: #777;
}

.rodi-al-body {
    padding: 16px;
}

.rodi-al .rodi-al-statement {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rodi-al-statement-text {
    display: block;
}

.rodi-al-link {
    color: #b71c1c !important;
    font-weight: 700;
    text-decoration: underline;
}

.rodi-al .rodi-al-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rodi-al .rodi-al-option {
    padding: 7px 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
    font-size: 13.5px;
    align-items: center;
}

.rodi-al .rodi-al-option input {
    margin-top: 0;
}

.rodi-al .rodi-al-option:has(input:checked) {
    border-color: #c62828;
    background: #fdecea;
    font-weight: 600;
}

.rodi-al .rodi-al-row input[type="text"] {
    width: 100%;
}

.rodi-al .rodi-al-consent {
    padding: 12px;
    border: 1px solid #f0dede;
    border-radius: 8px;
    background: #fff;
    font-weight: 600;
    font-size: 13px;
}

@media (max-width: 420px) {
    .rodi-al .rodi-al-grid {
        grid-template-columns: 1fr;
    }
}


/* =======================================================
   POLISH - account pages round 2
======================================================= */

/* "Anything else" field matches the other inputs. */
.rodi-al .rodi-al-row input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rodi-al .rodi-al-row input[type="text"]:focus {
    outline: none;
    border-color: #c62828;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12);
}

/* Tick boxes centred in their tiles. */
.rodi-al .rodi-al-option {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin: 0;
}

.rodi-al .rodi-al-option input,
.rodi-al .rodi-al-consent input,
.rodi-al .rodi-al-remove input {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    accent-color: #c62828;
}

.rodi-al .rodi-al-consent label,
.rodi-al .rodi-al-remove label {
    align-items: flex-start;
}

.rodi-al .rodi-al-consent input,
.rodi-al .rodi-al-remove input {
    margin-top: 2px;
}

.rodi-al .rodi-al-consent {
    font-weight: 500;
    color: #333;
}

.rodi-al .rodi-al-consent:has(input:checked) {
    border-color: #c62828;
    background: #fdecea;
}

/* Why register - fills the login column. */
.rodi-why {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #eee;
}

.rodi-why h3 {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 800;
}

.rodi-why ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.rodi-why li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #555;
}

.rodi-why li strong {
    display: block;
    color: #212121;
    font-size: 14.5px;
}

.rodi-why-tick {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fdecea;
    position: relative;
}

.rodi-why-tick::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 5px;
    width: 6px;
    height: 11px;
    border-right: 2px solid #c62828;
    border-bottom: 2px solid #c62828;
    transform: rotate(45deg);
}

.rodi-why-trade {
    margin: 18px 0 0 !important;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f7f7f7;
    font-size: 13.5px;
    color: #555;
}

.rodi-why-trade a {
    color: #c62828;
    font-weight: 700;
}

/* =======================================================
   SECURITY CHECK (inc/security.php)
======================================================= */

.rodi-turnstile {
    margin: 16px 0 6px;
    min-height: 65px;
}

.rodi-turnstile .cf-turnstile {
    width: 100%;
}

.login .rodi-turnstile {
    margin: 0 0 16px;
}


/* =======================================================
   MY ACCOUNT - SIGNED IN
   Menu, cards, forms and notices in the Rodi style. Replaces the
   parent theme's orange gradient and coloured emoji icons.
======================================================= */

/* --- Menu --- */
body.woocommerce-account .woocommerce-MyAccount-navigation {
    padding: 8px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0 0 2px;
    border: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 14px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #333 !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    transform: none !important;
    box-shadow: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background: #fdf2f2 !important;
    color: #c62828 !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background: #c62828 !important;
    color: #fff !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
    position: static !important;
    margin: 0 !important;
    font-size: 0 !important;
    background: currentColor !important;
    opacity: 0.85;
    -webkit-mask: var(--rodi-ic) center / contain no-repeat;
    mask: var(--rodi-ic) center / contain no-repeat;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f0f0f0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: #888 !important;
    font-weight: 500;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a { --rodi-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 3l9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E"); }
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a { --rodi-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l5 5v15H6z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M9 13h8M9 17h6'/%3E%3C/svg%3E"); }
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-address a { --rodi-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-7.5 7-13a7 7 0 0 0-14 0c0 5.5 7 13 7 13z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); }
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--payment-methods a { --rodi-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E"); }
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-account a { --rodi-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E"); }
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--account-credit a { --rodi-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18v12H3z'/%3E%3Cpath d='M3 7l3-4h12l3 4'/%3E%3Ccircle cx='12' cy='13' r='2.5'/%3E%3C/svg%3E"); }
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--downloads a { --rodi-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E"); }
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a { --rodi-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E"); }

/* --- Content card --- */
body.woocommerce-account .woocommerce-MyAccount-content {
    padding: 32px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

body.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
    color: #555;
}

/* --- Notices (e.g. "No saved methods found") --- */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message {
    margin: 0 0 20px !important;
    padding: 16px 18px !important;
    border: 1px solid #eee !important;
    border-left: 4px solid #c62828 !important;
    border-radius: 10px !important;
    background: #fafafa !important;
    color: #444 !important;
    font-size: 15px !important;
    text-align: left !important;
    box-shadow: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::before {
    display: none !important;
}

/* --- Buttons and links that act as buttons --- */
body.woocommerce-account .woocommerce-MyAccount-content a.button,
body.woocommerce-account .woocommerce-MyAccount-content button.button,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #c62828 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px;
    text-decoration: none !important;
    text-transform: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-content a.button:hover,
body.woocommerce-account .woocommerce-MyAccount-content button.button:hover {
    background: #b71c1c !important;
}

/* --- Addresses --- */
body.woocommerce-account .woocommerce-Addresses {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

body.woocommerce-account .woocommerce-Addresses::before,
body.woocommerce-account .woocommerce-Addresses::after {
    display: none !important;
}

body.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 20px !important;
    border: 1px solid #eee !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.woocommerce-account .woocommerce-Address-title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

body.woocommerce-account .woocommerce-Address-title::before,
body.woocommerce-account .woocommerce-Address-title::after {
    display: none !important;
}

body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    border: 0 !important;
}

body.woocommerce-account .woocommerce-Address-title h2::after,
body.woocommerce-account .woocommerce-Address-title h3::after {
    display: none !important;
}

body.woocommerce-account .woocommerce-Address-title a.edit {
    float: none !important;
    flex-shrink: 0;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px 14px !important;
    border: 1.5px solid #c62828 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #c62828 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    text-indent: 0 !important;
}

body.woocommerce-account .woocommerce-Address-title a.edit:hover {
    background: #c62828 !important;
    color: #fff !important;
}

body.woocommerce-account .woocommerce-Address address {
    margin: 0;
    color: #555;
    font-style: normal;
    font-size: 14.5px;
    line-height: 1.6;
}

/* --- Account details form --- */
body.woocommerce-account form.woocommerce-EditAccountForm,
body.woocommerce-account form.edit-account {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Display name is set from first + last name automatically (login.php). */
body.woocommerce-account .woocommerce-EditAccountForm p:has(#account_display_name) {
    display: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-content input.input-text,
body.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
body.woocommerce-account .woocommerce-MyAccount-content select {
    box-sizing: border-box;
    width: 100% !important;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #dcdcdc !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-size: 15px;
}

body.woocommerce-account .woocommerce-MyAccount-content input:focus,
body.woocommerce-account .woocommerce-MyAccount-content select:focus {
    outline: none;
    border-color: #c62828 !important;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12) !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .form-row label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

body.woocommerce-account .woocommerce-MyAccount-content .form-row {
    margin: 0 0 18px !important;
}

/* Password change */
body.woocommerce-account .woocommerce-EditAccountForm fieldset {
    margin: 26px 0 !important;
    padding: 20px !important;
    border: 1px solid #eee !important;
    border-radius: 14px !important;
    background: #fafafa;
}

body.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
    padding: 0 8px !important;
    font-size: 16px;
    font-weight: 800;
}

body.woocommerce-account .woocommerce-MyAccount-content .password-input {
    position: relative;
    display: block;
    width: 100%;
}

body.woocommerce-account .woocommerce-MyAccount-content .password-input input {
    padding-right: 48px !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .show-password-input {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .show-password-input::after {
    content: "" !important;
    position: absolute;
    inset: 6px;
    background: #888;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.woocommerce-account .woocommerce-MyAccount-content .show-password-input.display-password::after {
    background: #c62828;
}

/* --- Phones --- */
@media (max-width: 768px) {

    body.woocommerce-account .woocommerce-MyAccount-content {
        padding: 22px 18px;
    }

    body.woocommerce-account .woocommerce-Addresses {
        grid-template-columns: 1fr;
    }
}

/* =======================================================
   SIGNED-OUT ACCOUNT PAGES - lost password, reset sent,
   set new password, and the messages on them
======================================================= */

/* One centred column for the single-form pages. */
.rodi-account-out .woocommerce > .woocommerce-ResetPassword,
.rodi-account-out .woocommerce > .woocommerce-notices-wrapper,
.rodi-account-out .woocommerce > .woocommerce-message,
.rodi-account-out .woocommerce > .woocommerce-info,
.rodi-account-out .woocommerce > .woocommerce-error,
.rodi-account-out .woocommerce > p {
    max-width: 560px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.rodi-account-out .woocommerce:has(> .woocommerce-ResetPassword),
.rodi-account-out .woocommerce:has(> .woocommerce-message) {
    display: block !important;
}

/* The form card. */
.rodi-account-out form.woocommerce-ResetPassword {
    padding: 32px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07) !important;
}

.rodi-account-out form.woocommerce-ResetPassword > p:first-child {
    margin: 0 0 20px !important;
    color: #555;
    font-size: 15px;
    line-height: 1.55;
}

.rodi-account-out form.woocommerce-ResetPassword .form-row {
    float: none !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
}

.rodi-account-out form.woocommerce-ResetPassword label {
    display: block !important;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

.rodi-account-out form.woocommerce-ResetPassword input.input-text,
.rodi-account-out form.woocommerce-ResetPassword input[type="text"],
.rodi-account-out form.woocommerce-ResetPassword input[type="password"] {
    box-sizing: border-box;
    display: block;
    width: 100% !important;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #dcdcdc !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-size: 15px;
}

.rodi-account-out form.woocommerce-ResetPassword input:focus {
    outline: none;
    border-color: #c62828 !important;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12) !important;
}

.rodi-account-out form.woocommerce-ResetPassword button[type="submit"],
.rodi-account-out form.woocommerce-ResetPassword .woocommerce-Button {
    display: block;
    width: 100% !important;
    min-height: 50px;
    margin: 6px 0 0 !important;
    padding: 0 20px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #c62828 !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
}

.rodi-account-out form.woocommerce-ResetPassword button[type="submit"]:hover {
    background: #b71c1c !important;
}

/* Back-to-sign-in link under the form (printed by login.php). */
.rodi-reset-back {
    margin: 18px 0 0 !important;
    text-align: center;
    font-size: 14px;
}

.rodi-reset-back a {
    color: #c62828;
    font-weight: 700;
    text-decoration: none;
}

/* Messages: one calm style, no theme icons. */
.rodi-account-out .woocommerce-message,
.rodi-account-out .woocommerce-info,
.rodi-account-out .woocommerce-error {
    position: relative;
    display: block !important;
    width: auto !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    padding: 16px 18px 16px 52px !important;
    border: 1px solid #e3efe4 !important;
    border-radius: 12px !important;
    background: #f3faf4 !important;
    color: #1b5e20 !important;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.5 !important;
    text-align: left !important;
    box-shadow: none !important;
    list-style: none;
}

.rodi-account-out .woocommerce-info {
    border-color: #eee !important;
    background: #fafafa !important;
    color: #444 !important;
}

.rodi-account-out .woocommerce-error {
    border-color: #f5d0d0 !important;
    background: #fdecea !important;
    color: #8e1b1b !important;
}

.rodi-account-out .woocommerce-message::before,
.rodi-account-out .woocommerce-info::before,
.rodi-account-out .woocommerce-error::before {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    width: 22px !important;
    height: 22px !important;
    margin: -11px 0 0 !important;
    border-radius: 50%;
    background: #2e7d32 !important;
    font-size: 0 !important;
    -webkit-mask: none;
    mask: none;
}

.rodi-account-out .woocommerce-message::after {
    content: "" !important;
    position: absolute !important;
    left: 26px !important;
    top: 50% !important;
    width: 5px !important;
    height: 10px !important;
    margin-top: -7px !important;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    background: none !important;
    transform: rotate(45deg);
}

.rodi-account-out .woocommerce-info::before {
    background: #9e9e9e !important;
}

.rodi-account-out .woocommerce-error::before {
    background: #c62828 !important;
}

.rodi-account-out .woocommerce-info::after,
.rodi-account-out .woocommerce-error::after {
    content: "!" !important;
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    width: 22px;
    margin-top: -11px;
    color: #fff;
    font-size: 14px !important;
    font-weight: 800;
    line-height: 22px;
    text-align: center;
    background: none !important;
}

.rodi-account-out .woocommerce-error li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* "Reset link sent" page: the explanation under the message. */
.rodi-account-out .woocommerce > .woocommerce-message + p {
    padding: 0 4px;
    color: #555;
    font-size: 15px;
    line-height: 1.6;
}

@media (max-width: 600px) {
    .rodi-account-out form.woocommerce-ResetPassword {
        padding: 24px 18px !important;
    }
}

/* Messages on the sign-in page sit above the two cards, full width -
   never as an extra column beside them. */
.rodi-account-out .woocommerce:has(#customer_login) {
    display: block !important;
}

.rodi-account-out .woocommerce > .woocommerce-notices-wrapper:has(+ #customer_login),
.rodi-account-out .woocommerce:has(#customer_login) > .woocommerce-notices-wrapper {
    max-width: 1040px;
    margin: 0 auto 18px !important;
}

.rodi-account-out .woocommerce:has(#customer_login) > .woocommerce-notices-wrapper:empty {
    display: none;
}

/* --- My account → Orders: fits the card on computers ---
   An order can have several buttons (Pay, View, Invoice, Cancel...). The
   theme draws the table as one block that never wraps, so on laptops
   (1100px to 1366px wide) it was wider than the card and the page slid
   sideways. On computers it is now an ordinary table that shares out the
   card's width, and the buttons sit side by side, wrapping when needed.
   Phones keep WooCommerce's own stacked layout. */
body.woocommerce-account .woocommerce-MyAccount-content {
    min-width: 0;
}
@media (min-width: 769px) {
    body.woocommerce-account table.woocommerce-orders-table {
        display: table !important;
        width: 100% !important;
        white-space: normal !important;
    }
    body.woocommerce-account table.woocommerce-orders-table th,
    body.woocommerce-account table.woocommerce-orders-table td {
        white-space: normal !important;
        padding-left: 10px;
        padding-right: 10px;
    }
    body.woocommerce-account .woocommerce-orders-table__cell-order-actions {
        width: 1%;
    }
    body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
        display: inline-flex !important;
        margin: 3px 4px 3px 0 !important;
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------
   Allergies, the same look everywhere (16 Oct 2026)
   ------------------------------------------------------------ */
/* Basket warning: "contains your allergens". */
.rodi-al-banner {
    position: relative;
    padding: 10px 14px 10px 40px !important;
    border: 1px solid #f3c4c0 !important;
    border-radius: 14px !important;
    background: #fff4f3 !important;
    color: #7f1010 !important;
    font-weight: 600;
}
.rodi-al-banner::before {
    content: "!";
    position: absolute;
    left: 13px;
    top: 11px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #c62828;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    line-height: 18px;
    text-align: center;
}
/* "My allergies": the 14 as pills you tick. */
.rodi-al .rodi-al-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
}
.rodi-al .rodi-al-option {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 14px !important;
    border: 1.5px solid #e9e3da !important;
    border-radius: 999px !important;
    background: #fff !important;
    font-size: 14px !important;
    font-weight: 700;
    cursor: pointer;
}
.rodi-al .rodi-al-option input {
    width: 18px;
    height: 18px;
    margin: 0 !important;
    accent-color: #c62828;
}
.rodi-al .rodi-al-option:has(input:checked) {
    border-color: #c62828 !important;
    background: #fdecea !important;
    color: #b71c1c;
}
.rodi-al .rodi-al-statement {
    border: 1px solid #f1e3cc !important;
    border-radius: 14px !important;
    background: #fffaf2 !important;
}