/* Reset default font to Raleway */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    font-family: 'Raleway', sans-serif;
}

@font-face {
    font-family: 'museo';
    src: url("../fonts/Museo_Slab_300.9a23938181b1.otf") format('opentype')
}

@font-face {
    font-family: 'museo bold';
    src: url("../fonts/Museo_Slab_700.82ba7e9d4c5a.otf") format('opentype')
}

@font-face {
    font-family: 'museo bold italic';
    src: url("../fonts/Museo_Slab_700italic.f4d21c9104ae.otf") format('opentype')
}

:root {
    --bs-primary-rgb: 255, 74, 35;
}

html, body {
    background: #E7ECE8;
}

h1 {
    font-family: 'museo';
}

h1 span.muted {
    font-family: Raleway;
    color: #55717D;
}

.text-muted {
}

h1 em {
    font-style: normal;
    color: #ff4a34;
    font-family: 'museo';
}

h2 b {
    color: rgba(255, 74, 35);
}

a {
    color: rgba(255, 74, 35);
}

.img-thumbnail {
    object-fit: cover;
    max-height: 400px;
    max-width: 400px;
}

.img-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.carousel-image {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: #efefef;
}

.anchor-thumbnail {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: white;
    width: 100%;
    margin: 1em 0em;
    padding: 1em;
}

#shopping-cart-nav-item span {
    top: 30%;
    font-size: 60%;
    left: 85%;
}

/* PROVIDER PILLS (spec 016)
   These replaced 88px solid #FF4A23 circles. The colour matters more than the
   size: orange is now reserved for the search panel and its submit, so the
   store shortcuts read as chips and stop competing with the thing they sit
   under. #212529 on #eff2f0 is 12.9:1; the orange they replaced would have
   been 2.98:1 as text. */
#providers-menu-row {
    gap: 8px;
}

/* ponytail: the list wraps but is clipped to one row height, so the number of
   visible chips follows the available width with no JS and no fixed slice.
   Chips that don't fit land on row two and are hidden whole, never half-cut.
   33px = 6px+6px padding + 15px * 1.35 line-height; bump it if the pill
   metrics below change. */
#providers-menu {
    gap: 8px;
    max-height: 33px;
    overflow: hidden;
    flex: 0 1 auto;
    min-width: 0;
}

#providers-menu li {
    flex: 0 0 auto;
}

.provider-pill {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 15px;
    background: #eff2f0;
    color: #212529;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.provider-pill:hover,
.provider-pill:focus-visible {
    background: #dfe5e1;
    color: #000;
    text-decoration: none;
}

/* Slate rather than orange: white on #55717D is 5.19:1, white on #ff4a23 is
   3.36:1 and fails AA at this text size. */
.provider-pill[aria-current="page"] {
    background: #55717D;
    color: #fff;
}

/* Slate is not available here: on the page background #E7ECE8 it measures
   4.34:1 and misses AA, and unlike the help line this text has no #eff2f0
   panel under it. The absent chip and the lighter weight carry the hierarchy
   instead of a weaker colour. */
.provider-pill-overflow {
    color: #212529;
    font-size: 15px;
    font-weight: 400;
    padding: 6px 2px;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* FOOTER */
footer {
    background-color: rgba(255, 74, 35);
    color: white;
    border-radius: 20px 20px 0 0;
    padding: 0;
}

footer #footer-header {
    padding: 2em 2em 0em 2em;
}

.footer-last-column {
    width: 320px;
}

footer li {
    margin-bottom: 10px;
}

footer i.bi {
    position: relative;
    display: inline-block;
    bottom: 8px;
}

/* The rating sits with the address as a quiet fact, not as a .badge pill:
   those are the same orange as the footer itself. The star is pulled back
   down onto the baseline that footer i.bi lifts every icon off. */
#google-rating-badge a {
    color: white;
    text-decoration: none;
}

#google-rating-badge a:hover {
    text-decoration: underline;
}

#google-rating-badge .bi {
    bottom: 0;
    margin-right: 4px;
}

.nav-icon-link i {
    color: rgba(255, 74, 35);
    font-size: 16px;
}

.pill-link {
    display: inline-block;
    width: 100px;
    background: rgba(255, 74, 35);
    height: 34px;
    border-radius: 15px;
    font-size: 80%;
}

.pill-link a {
    color: white;
}

.pill-link a i {
    color: rgba(255, 74, 35);
    background: white;
    border-radius: 100%;
    width: 19px;
    text-align: center;
}

.btn-primary {
    --bs-btn-bg: rgba(255, 74, 35);
    --bs-btn-border-color: rgba(255, 74, 35);
    --bs-btn-hover-bg: rgba(85, 113, 125, 1);
    --bs-btn-hover-border-color: rgba(85, 113, 125, 1);
    --bs-btn-active-bg: rgba(85, 113, 125, 1);
    --bs-btn-active-border-color: rgba(85, 113, 125, 1);
    --bs-btn-disabled-bg: rgba(255, 101, 68, 1);
    --bs-btn-disabled-border-color: rgba(255, 101, 68, 1);
}

.btn-secondary {
    --bs-btn-bg: black;
    --bs-btn-border-color: black;
    --bs-btn-hover-bg: rgba(85, 113, 125, 1);
    --bs-btn-hover-border-color: rgba(85, 113, 125, 1);
    --bs-btn-active-bg: rgba(85, 113, 125, 1);
    --bs-btn-active-border-color: rgba(85, 113, 125, 1);
}

input.form-control {
    background: transparent;
    border: 2px solid rgba(255, 74, 35);
    border-radius: 20px;
    margin-bottom: 10px;
}

textarea.form-control {
    background: transparent;
    border: 2px solid rgba(255, 74, 35);
    border-radius: 20px;
    margin-bottom: 10px;
}

.form-control:disabled {
    background-color: #ccc;
    opacity: 1;
    color: #888;
}

.pill-button {
    border-radius: 20px;
    height: 40px;
}

.rounded-pill {
    padding: 10px 15px;
    position: relative;
}

.rounded-pill a {
    text-decoration: none;
}

.rounded-pill a i {
    color: rgba(255, 74, 35);
    background: white;
    border-radius: 100%;
    width: 19px;
    text-align: center;
}

.text-bg-primary {
    background-color: rgba(255, 74, 35)!important;
}

.text-bg-primary a {
    color: white;
    text-decoration: none;
}

.text-bg-secondary {
    background-color: white!important;
    color: rgba(255, 74, 35)!important;
}

.text-bg-secondary a {
    color: black;
    text-decoration: none;
}

.text-bg-dark a {
    color: white;
}

article.product_pod {
    background: white;
    border-radius: 20px;
    padding: 1em;
    height: 100%;
    margin-bottom: 1em;
}

article.product_pod h3 {
    font-size: 16px;
}

article.product_pod h3 a {
    text-decoration: none;
    color: black;
    display: inline-block;
    height: 80px;
}

article.product_pod .image_container > a {
    display: block;
    text-decoration: none;
    color: inherit;
}

article.product_pod .image_container > a:focus {
    outline: none;
}

article.product_pod .image_container > a:focus-visible {
    outline: 2px solid rgba(255, 74, 35);
    outline-offset: 2px;
    border-radius: 12px;
}

article.product_pod .anchor-thumbnail {
    aspect-ratio: 1 / 1;
    height: auto;
    margin: 0;
    border-radius: 12px;
    background-color: white;
}

.price_color {
    font-size: 20px;
    font-weight: 700;
    color: black;
    font-family: 'museo bold'
}

.delivery_information {
    font-size: 12px;
    line-height: 1rem;
    text-align: right;
    color: rgba(255, 74, 35, 1);
}

.accordion {
    --bs-accordion-btn-focus-border-color: rgba(255, 74, 35, 1);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.24rem rgba(255, 74, 35, 0.25);
    --bs-accordion-active-bg: rgba(255, 74, 35, 0.5)
}

.accordion-button:not(.collapsed) {
    background-color: rgba(255, 74, 35, 0.5);
    color: #000;
}

.accordion-button:focus {
    border-color: rgba(255, 74, 35, 0.75)
}

.current_choice_summary {
    border-color: transparent;
    padding: 1rem;
    border-radius: 6px 6px 0px 0px;
    margin-top: 1rem;
    margin-bottom: -0.1rem!important;
}

.current_choice_summary h5 {
    color: rgba(140, 140, 140, 1);
    font-size: 16px;
}

.current_choice_summary .price_color {
    font-size: 28px;
}

.current_choice_summary .current_choice_variant {
    font-size: 14px;
}

.basket-items .price_color {
    font-weight: normal;
    font-size: 100%;
}

.card {
    margin-bottom: 10px;
}

.basket-title {
    border-top: 1px solid rgba(85, 113, 125, 1);
    border-bottom: 1px solid rgba(85, 113, 125, 1);
    padding: 1.5em 0em 1em 0em;
}

.basket-title h4 {
    font-size: 18px;
    color: rgba(85, 113, 125, 1);
    font-weight: 700;
}

.basket-items {
    margin-bottom: 1em;
    padding: 2em 1em;
}

.basket-items h3 {
    font-size: 120%;
    font-weight: 700;
}

.basket-items h3 a {
    text-decoration: none;
    color: black;
}

/* Basket / checkout / mini-basket: small square thumbs (Stage 3) */
.basket-items .image_container > a,
.basket-items > .row > [class*="col-"] > a:has(> .anchor-thumbnail),
.basket-mini-item .image_container > a {
    display: block;
    text-decoration: none;
    color: inherit;
    max-width: 88px;
}

.basket-items .image_container > a:focus,
.basket-items > .row > [class*="col-"] > a:has(> .anchor-thumbnail):focus,
.basket-mini-item .image_container > a:focus {
    outline: none;
}

.basket-items .image_container > a:focus-visible,
.basket-items > .row > [class*="col-"] > a:has(> .anchor-thumbnail):focus-visible,
.basket-mini-item .image_container > a:focus-visible {
    outline: 2px solid rgba(255, 74, 35);
    outline-offset: 2px;
    border-radius: 10px;
}

.basket-items .anchor-thumbnail,
.basket-mini-item .anchor-thumbnail {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 88px;
    height: auto;
    margin: 0;
    padding: 0.25em;
    border-radius: 10px;
    background-color: white;
}

#basket_totals, #vouchers {
    border-radius: 20px;
    background: white;
    padding: 2em;
}

#basket_totals table {
    --bs-border-color: transparent;
}

#basket_totals table.table,
#basket_totals .table th, #basket_totals .table td {
    border: 0px;
}

#basket_totals h3 {
}

.text-right {
    text-align: right!important;
}

.checkout-quantity .input-group {
    width: inherit;
}

.checkout-quantity input[type=number] {
    border: 0;
    text-align: right;
    background: rgba(240, 239, 242, 1);
    border-radius: 6px;
    min-height: 38px;
    max-width: 60px;
}

.border-terciary {
    --bs-border-opacity: 1;
    border-color: rgba(85, 113, 125, 1) !important;
}

.btn-outline-primary {
    --bs-btn-color: #ff4a23;
    --bs-btn-border-color: #ff4a23;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ff4a23;
    --bs-btn-hover-border-color: #ff4a23;
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ff4a23;
    --bs-btn-active-border-color: #ff4a23;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ff4a23;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #ff4a23;
    --bs-gradient: none;
}

#login_form, #register_form {
    text-align: center;
    max-width: 400px;
    background: transparent;
}

.swiper {
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
}

.swiper-slide img {
    max-height: 500px;
    width: auto;
    display: block;
    margin: 0 auto;
}

.swiper-button-next, .swiper-button-prev {
    color: rgba(255, 74, 35);
}

.swiper-pagination-bullet-active {
    background-color: rgba(255, 74, 35);
}

/* PDP gallery: square column-width main shell (+ no-image placeholder) */
.product-gallery {
    min-width: 0;
    max-width: 100%;
    -webkit-user-select: none;
    user-select: none;
}

.product-gallery img {
    -webkit-user-drag: none;
}

.product-gallery .product-gallery-main {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.product-gallery .product-gallery-main .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.product-gallery .product-gallery-main .swiper-slide img {
    max-height: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-gallery .product-gallery-thumbs {
    margin-top: 12px;
    width: 100%;
    max-width: 100%;
    background-color: transparent;
    border-radius: 0;
    /* Clip translate when active thumb is near the end — never spill past the gallery column */
    overflow: hidden;
    box-sizing: border-box;
}

.product-gallery .product-gallery-thumbs .swiper-slide {
    width: 72px;
    height: 72px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    background-color: white;
}

.product-gallery .product-gallery-thumbs .swiper-slide img {
    max-height: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-gallery .product-gallery-thumbs .swiper-slide-thumb-active {
    border-color: rgba(255, 74, 35);
}

.product-gallery .image_container {
    width: 100%;
}

.product-gallery .anchor-thumbnail {
    aspect-ratio: 1 / 1;
    height: auto;
    margin: 0;
    border-radius: 12px;
    background-color: white;
}

.product_page h2 {
    font-family: 'museo', Raleway, sans-serif;
}

.product_main h1 {
    font-family: Raleway, sans-serif;
    font-weight: 600;
    font-size: 25.84px;
    line-height: normal;
    color: #0f0f0f;
    word-wrap: break-word;
}

.product_main .product_upc {
    font-family: Poppins, Raleway, sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: #000;
}

table {
    border-collapse: collapse;
    border-radius: 12px;
    overflow: hidden;
}

table.table, .table th, .table td {
    border: 4px solid #E7ECE8;
}

.table th, .table td {
    background: white!important;
}

.footer-menu li a {
    color: white;
    text-decoration: none;
}

.wagtail-page {
    color: #55717d;
    font-family: Raleway, sans-serif;
    font-size: 22.60px;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 1em;
}

.wagtail-page h1 {
    font-family: Raleway, sans-serif;
    color: #FF4A23;
    font-size: 35px;
    font-weight: 600;
    line-height: normal;
}

.wagtail-page h2 {
    font-family: 'museo';
    color: black;
    line-height: 120%;
    font-size: 46px;
    margin-top: 1em;
}

.card-body {
    border: 0px;
    border-radius: 20px;
}

.shipping-payment h2 {
    font-family: Raleway;
    font-size: 16px;
    font-weight: 700;
    color: #55717D;
}

.badges .badge {
    color: white;
    background-color: rgba(255, 74, 35);
    font-weight: 400;
    font-size: 14px;
}

.badges .badge .bi {
    border-radius: 20px;
    background-color: white;
    color: rgba(255, 74, 35);
    padding: 2px 3px;
    margin-left: 10px;
}

.badges .badge.badge-black {
    background-color: black;
}

.badges .badge.badge-black .bi {
    color: black;
}

.break-word {
    word-wrap: break-word;
    word-break: break-word;
}

.fluid-font {
    font-size: 50px;
}

#left-content {
    min-width: 480px;
}

.font-museo {
    font-family: 'museo', Raleway, sans-serif;
}

.border-r {
    border-radius: 20px;
}

.abstract {
    background: white;
    padding: 1em;
    margin: 1em;
    border-radius: 20px;
}

.required:after {
    content:" *";
    color: red;
}

.modal-backdrop {
    position: inherit;
}

.swal2-confirm {
    background-color: rgba(255, 74, 35)!important;
}

.swal2-html-container {
    overflow: inherit!important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#loading-icon {
    animation: spin 1s linear infinite;
}

/* PROCESS BOXES */
#process {
    color: #55717D;
    margin-bottom: 1em;
}

.ibox.ibox-regular {
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    padding: 1em;
    background: #eff2f0;
}

.ibox.ibox-regular input:not([type="submit"]),
 .ibox.ibox-regular textarea {
    border: 0px;
    background: rgba(231, 236, 232, 1);
    padding: 1em 1.5em;
}

.ibox.ibox-regular input::placeholder,
.ibox.ibox-regular textarea::placeholder
 {
    color: rgba(255, 74, 35);
    font-weight: 700;
}

.ibox.ibox-regular .form-text {
    margin-left: 20px;
    color: rgba(255, 74, 35);
}

.ibox.process-box {
    overflow: hidden;
    border-radius: 0px 0px 20px 20px;
}

.ibox-header {
    padding: 1em;
    background: #eff2f0;
    border-radius: 20px 20px 0px 0px;
    margin-bottom: 3px;
}

.ibox-content {
    background-color: #eff2f0;
    padding: 1em;
    border-radius: 0px 0px 20px 20px;
    font-size: 16px;
}

.ibox-content img {
    display: block;
    margin: 0 auto;
}

.ibox-content small {
    font-size: 9px;
}

.ibox.ibox-weuta {
    background-color: rgba(255, 74, 35);
    color: white;
}

.ibox.ibox-weuta label {
    font-weight: 700;
}

.ibox.ibox-weuta .ibox-header {
    background-color: rgba(255, 74, 35);
}

.ibox.ibox-weuta .ibox-content {
    background-color: rgba(255, 74, 35);
}

.ibox.ibox-weuta .ibox-header h5 {
    font-family: 'museo';
    font-size: 29px;
}

.ibox.ibox-weuta .input:not(.btn) {
    background: white;
}

.ibox.ibox-weuta input::placeholder,
.ibox.ibox-weuta textarea::placeholder {
    color: #c7c7c7;
    font-size: 16px;
    font-weight: 700;
}

.ibox.ibox-weuta .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #212529;
    --bs-btn-border-color: #212529;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #424649;
    --bs-btn-hover-border-color: #373b3e;
    --bs-btn-focus-shadow-rgb: 66,70,73;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4d5154;
    --bs-btn-active-border-color: #373b3e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #212529;
    --bs-btn-disabled-border-color: #212529;
}

.ibox.ibox-regular.ibox-weuta .btn-secondary {
    background: #55717D;
    padding: inherit;
}


.process-box h5 {
    display: inline-block;
    color: rgba(255, 74, 35);
    font-weight: 600;
    margin-left: 10px;
}

span.process-order {
    display: inline-block;
    background-color: rgba(255, 74, 35);
    color: white;
    font-family: 'museo';
    border-radius: 100%;
    height: 37px;
    width: 37px;
    text-align: center;
    padding-top: 5px;
    font-size: 23px;
    font-weight: 400;
}

/* HOW-IT-WORKS STEPPER
   Replaces the four process cards in how_to_snippet.html. The .ibox and
   .process-* rules above stay: product_not_found_form.html still renders the
   card version of these same four steps.

   Caption slate is #4A626D rather than the #55717D used elsewhere on the site.
   #55717D is 4.34:1 on the #E7ECE8 page background and misses AA at this size;
   #4A626D is 5.39:1 there and 5.72:1 on the #eff2f0 panel. Enforced by
   HowToStepperContrastTests - do not harmonise it back.

   The ring and the glyph inside it keep brand orange at 2.81:1 because both are
   decorative: the glyph is aria-hidden, and the title below states the step in
   words. Ring geometry is load-bearing - the connector offsets below are
   derived from the 36px radius, so changing the ring size means changing them
   too. */
.how-steps {
    list-style: none;
    margin: 0 0 1em;
    padding: 0;
    display: grid;
    gap: 1.75rem 0;
}

.how-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.how-step-ring {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border: 2px solid #ff4a23;
    border-radius: 100%;
    background: transparent;
}

/* Bootstrap Icons draws the glyph as text, so the stroke takes the colour and
   the ring gets its outline weight from the same brand orange. */
.how-step-ring i {
    color: #ff4a23;
    font-size: 34px;
    line-height: 1;
}

/* Fallback path: a step whose editor has not picked an icon still shows its
   uploaded image, at the size the glyph would have occupied. */
.how-step-ring img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.how-step-body {
    padding-top: 0.85rem;
}

.how-step-title {
    margin: 0;
    color: #212529;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.how-step-caption,
.how-step-caption p {
    margin: 0;
    color: #4A626D;
    font-size: 14px;
    line-height: 1.45;
}

/* Connector, vertical: ring bottom to the next ring's top. Sized off the row
   gap above, so the two move together. */
.how-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 72px;
    bottom: -1.75rem;
    left: 35px;
    width: 2px;
    margin: 0.4rem 0;
    background: rgba(74, 98, 109, 0.28);
}

@media (min-width: 768px) {
    .how-steps {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 0;
    }

    .how-step {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        padding: 0 0.5rem;
        text-align: center;
    }

    .how-step-body {
        padding-top: 0;
    }

    /* Connector, horizontal: ring centre to ring centre, clearing the 36px
       ring radius plus a 10px breather at each end. The -50% reaches the next
       step's centre, so this holds for any number of steps. */
    .how-step:not(:last-child)::after {
        top: 35px;
        bottom: auto;
        left: calc(50% + 46px);
        right: calc(-50% + 46px);
        width: auto;
        height: 2px;
        margin: 0;
    }
}

/* HERO HELP LINE (spec 016)
   The full variant below is 46px Museo in #ff4a23 on #eff2f0 — 2.98:1, which
   only passes because it is display-scale type. At this size that pairing is
   an outright AA failure, so the hero line is slate: 4.61:1 on the panel.
   The panel is load-bearing, not decorative — the same slate on the page
   background #E7ECE8 is 4.34:1 and misses. */
.hero-help {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4em 1.25em;
    background: #eff2f0;
    border-radius: 20px;
    padding: .5em 1em;
    margin-bottom: 1rem;
    color: #55717D;
    font-size: 15px;
    line-height: 1.5;
}

.hero-help-lead {
    font-weight: 600;
}

.hero-help-lead em {
    font-style: normal;
    color: #212529;
}

.hero-help-shipping {
    color: #212529;
    font-weight: 600;
}

.hero-help a {
    color: #55717D;
    text-decoration: none;
}

.hero-help a:hover,
.hero-help a:focus-visible {
    color: #212529;
    text-decoration: underline;
}

#help-section {
    background: #eff2f0;
    border-radius: 20px;
    color: #ff4a23;
    padding: .1em .75em;
    font-size: 46px;
    font-family: 'museo';
    line-height: 69px;
    padding-top: 11px;
}

#help-section .badges .badge {
    position: relative;
    bottom: 9px;
}

#help-section div, #help-section div em {
    font-family: 'museo';
}

#help-section em {
    color: black;
    font-style: normal;
}

.widget {
    border-radius: 20px;
    padding: 2em;
}

.widget-white {
    background: white;
}

.widget-weuta {
    color: white;
    background: rgba(255, 74, 35);
}

.widget-black {
    color: white;
    background: black
}

.ribbon {
    white-space: nowrap;
    position: relative;
    color: #e8efe9;
    width: 1200px;
    font-size: 66px;
    left: -145px;
    font-family: 'museo'
}

.ribbon span {
    font-family: 'museo'
}

.ribbon-primary {
    background: black;
    transform: rotate(11deg);
    bottom: -50px;
    color: rgba(255, 74, 35);
}

.ribbon-primary span {
    color: white;
}

.ribbon-secondary {
    background: rgba(255, 74, 35);
    transform: rotate(-9.85deg);
    bottom: 50px;
}

.ribbon-secondary span {
    color: black;
}

.bg-dark {
    background: #000!important;
}

.text-dark {
    color: #000!important;
}

.text-primary {
    color: rgba(255, 74, 35)!important;
}

.fs-big {
    font-size: 5em;
    font-weight: 800;
    font-family: 'museo';
}

/* Spec 016: was black/700, which read as a filled-in value rather than a
   prompt. #6c757d on white is 4.69:1 and still clears AA for placeholders. */
.provider_search_form input[name=search_terms]::placeholder {
    color: #6c757d;
    font-weight: 400;
    opacity: 1;
}

/* Spec 016: the white surface and the padding moved up to
   .provider-search-group, which is now the field itself; this rule outranked
   it on specificity and would have painted a white box inside a white box. */

.faq-question {
    border-radius: 20px;
    background: white;
    padding: 1.5em;
    margin: 0.75em 0;
}

.faq-question h2 {
    font-weight: 600;
    line-height: 120%;
}

.wagtail-faq-page .widget {
    background: black;
    color: white;
    margin-top: 0.75em;
}

.wagtail-faq-page .widget.widget-weuta {
    background: rgba(255, 74, 35);
    color: black;
}

.wagtail-faq-page .widget.widget-weuta .widget-header {
    color: white;
}

.wagtail-faq-page .widget.widget-weuta .widget-header b {
    color: black;
}

.wagtail-faq-page .widget.widget-weuta .widget-content a {
    color: white;
    text-decoration: none;
}

.wagtail-faq-page .widget.widget-weuta .widget-content a b,
 .wagtail-faq-page .widget.widget-weuta .widget-content b {
    color: white;
}

.wagtail-faq-page .widget-header {
    font-size: 1.5em;
}

.wagtail-faq-page .widget-header p {
    font-family: 'museo';
}

.wagtail-faq-page .widget-header b {
    font-family: 'museo';
    font-weight: 500;
    color: rgba(255, 74, 35);
}



.wagtail-provider-page .widget {
    background: black;
    color: white;
    margin-top: 0.75em;
}

.wagtail-provider-page .widget.widget-weuta {
    background: rgba(255, 74, 35);
    color: black;
}

.wagtail-provider-page .widget.widget-weuta .widget-header {
    color: white;
}

.wagtail-provider-page .widget.widget-weuta .widget-header b {
    color: black;
}

.wagtail-provider-page .widget.widget-weuta .widget-content a {
    color: white;
    text-decoration: none;
}

.wagtail-provider-page .widget.widget-weuta .widget-content a b,
 .wagtail-provider-page .widget.widget-weuta .widget-content b {
    color: white;
}

.wagtail-provider-page .widget-header {
    font-size: 1.5em;
}

.wagtail-provider-page .widget-header p {
    font-family: 'museo';
}

.wagtail-provider-page .widget-header b {
    font-family: 'museo';
    font-weight: 500;
    color: rgba(255, 74, 35);
}

/* Spec 016: the panel gains vertical presence to carry the hero. */
.provider-form {
    background: #ff4a23;
    border-radius: 20px;
    padding: 1.25em 1.5em;
}

/* SEARCH FIELD (spec 016)
   The solid orange panel is gone. It made the field *loud* by wrapping it in
   brand colour, but a white box inside an orange box reads as a slot in a
   banner, not as the thing you act on. An outlined field on the page
   background is lighter and larger at once: the orange is now the field's own
   edge, so the element the user must use is the element carrying the brand.
   No panel also means the field can be full-bleed without shouting. */
.provider-form {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.provider-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 2px solid #ff4a23;
    border-radius: 18px;
    padding: 6px 6px 6px 18px;
    transition: box-shadow 0.15s ease;
}

.provider-search-field {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.provider-search-icon {
    flex: 0 0 auto;
    color: #ff4a23;
    font-size: 20px;
    line-height: 1;
}

.provider-search-row .form-control {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    /* 16px is the floor that stops iOS zooming the page on focus. */
    font-size: 16px;
    min-height: 44px;
    box-shadow: none;
}

.provider-search-row .form-control:focus {
    background: transparent;
    box-shadow: none;
}

/* The ring belongs to the field, not the bare input: the input has no edge of
   its own any more, so a ring on it would draw inside the outline. */
.provider-search-row:focus-within {
    box-shadow: 0 0 0 4px rgba(255, 74, 35, 0.25);
}

/* 19px/700 is deliberate, not a flourish: white on #ff4a23 measures 3.36:1,
   which meets AA only as large text (>=18.66px bold). At the 14px this button
   would otherwise want, the brand's own orange fails on its primary CTA. */
.provider-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 1.4em;
    border-radius: 12px;
    background: #ff4a23;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.provider-search-submit:hover,
.provider-search-submit:focus-visible {
    background: #e33d18;
    color: #fff;
}

/* Not #ff4a23: with the panel gone this sits on the page background, where the
   brand orange is 2.81:1. A darker red both passes (5.47:1) and reads as an
   error rather than as more brand colour. */
.provider-search-error {
    color: #B3261E;
    font-weight: 600;
    margin-top: 8px;
}

/* "¿PRIMERA VEZ?" DISCLOSURE (spec 016)
   The words are #212529, not the orange of the wireframe: #ff4a23 on the page
   background is 2.81:1 and fails even the large-text floor. The orange stays
   on the two icons, which are decorative and carry no contrast requirement. */
.first-time {
    text-align: center;
    margin: 1.25rem 0;
}

/* A <summary>: `list-style: none` plus the WebKit pseudo drops the disclosure
   triangle, since the caret icon inside already carries the state. */
.first-time-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border: 0;
    border-radius: 15px;
    background: transparent;
    color: #212529;
    font-size: 15px;
    line-height: 1.3;
    cursor: pointer;
    list-style: none;
    transition: background-color 0.15s ease;
}

.first-time-toggle::-webkit-details-marker {
    display: none;
}

.first-time-toggle:hover,
.first-time-toggle:focus-visible {
    background: #eff2f0;
}

.first-time-mark {
    color: #ff4a23;
    font-size: 18px;
    line-height: 1;
}

.first-time-caret {
    color: #ff4a23;
    font-size: 13px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.first-time[open] .first-time-caret {
    transform: rotate(180deg);
}

/* The centring on .first-time is for the summary; the steps below it keep the
   left-aligned reading they have outside the disclosure. */
.first-time-panel {
    text-align: left;
}

.first-time-more {
    margin: 0.5rem 0 0;
    text-align: center;
    font-size: 15px;
}

/* The global `a` colour is #ff4a23, which is 2.81:1 on the page background.
   Matching the toggle above — dark words, orange mark — keeps the pairing
   legible and consistent within this panel. */
.first-time-more a {
    color: #212529;
    text-decoration: underline;
}

.first-time-more a:hover,
.first-time-more a:focus-visible {
    color: #000;
}

.first-time-more .bi {
    color: #ff4a23;
    margin-left: 4px;
}

/* MOBILE MENU */
.mobile-nav {
    background-color: #ff4a23;
    border-radius: 20px 20px 0px 0px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
}

.mobile-nav {
    transform: translateY(100%);
}

.mobile-nav.active {
    transform: translateY(0);
}

.mobile-nav .nav-link {
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mobile-nav .nav-link .bi {
    font-size: 20px;
}

.mobile-nav .nav-label {
    font-size: 0.75rem;
    line-height: 1.2;
    display: block;
}

.partner-group {
    border-bottom: 1px solid #ccc;
    margin-top: 2em;
}

.text-truncated {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    transition: max-height 0.3s ease;
    max-height: 3.6em;
}

.text-expanded {
    -webkit-line-clamp: initial;
    max-height: none;
}

#additional-delivery-info-card {
}

#additional-delivery-info-card p {
    font-family: museo;
    font-weight: 300;
    font-size: 14px;
    color: rgba(255, 74, 35, 1);
    margin: 0;
    line-height: 1.1rem;
}

#additional-delivery-info-card i {
    font-size: 24px;
    color: rgba(255, 74, 35, 1);
}

#additional-delivery-info {
    display: none;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    /* Spec 016. The field gets the whole width and the submit drops beneath
       it, full width. Sharing a line at 390px left the input too narrow to
       show a pasted link, and a link is what most people arrive holding. The
       row hands its chrome to `-field` so the outline stays around the input
       alone and the button reads as a separate, full-width action. */
    .provider-search-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
    }

    .provider-search-row:focus-within {
        box-shadow: none;
    }

    .provider-search-field {
        background: #fff;
        border: 2px solid #ff4a23;
        border-radius: 18px;
        padding: 8px 16px;
    }

    .provider-search-field:focus-within {
        box-shadow: 0 0 0 4px rgba(255, 74, 35, 0.25);
    }

    .provider-search-submit {
        width: 100%;
        min-height: 50px;
        border-radius: 16px;
    }

    .mobile-nav {
        display: none;
    }

    .fluid-font {
        font-size: 38px;
    }

    #left-content {
        min-width: auto;
    }

    .ibox-header {
        margin-top: 0.5em;
    }

    .block-html {
        /* padding: 0.5em; */
    }

    .ribbon {
        left: -313px;
    }

    #home-widget-row-2-right {
        height: 600px!important;
    }
}

.product-recovery-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: rgba(255, 74, 35, 0.1);
    position: relative;
}

.product-recovery-icon .bi {
    position: absolute;
    color: rgba(255, 74, 35);
    font-size: 1.5rem;
}

.product-recovery-option {
    display: flex;
    border: 1px solid #e2e2e2;
    border-radius: 16px;
    padding: 1em;
    color: inherit;
}

.product-recovery-option:hover {
    border-color: rgba(255, 74, 35);
}

.product-recovery-option .bi:first-child {
    font-size: 1.5rem;
    color: rgba(255, 74, 35);
}

.product-recovery-option-primary {
    border-color: rgba(255, 74, 35);
    border-width: 2px;
}

/* PDP Weuta delivery commitment (ticket #11) */
.weuta-delivery-commitment__title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.weuta-delivery-commitment__panel {
    border-left: 4px solid rgba(255, 74, 35, 1);
    background-color: rgba(255, 74, 35, 0.08);
    border-radius: 0 6px 6px 0;
    padding: 0.875rem 1rem;
}

.weuta-delivery-commitment__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: rgba(255, 74, 35, 1);
    color: #fff;
    font-size: 1.15rem;
}

.weuta-delivery-commitment__subhead {
    font-size: 0.95rem;
}

.weuta-delivery-commitment__body {
    font-size: 0.875rem;
    line-height: 1.4;
    color: rgba(50, 50, 50, 1);
}