/* Ruvessa Glow: footer, phone bottom bar, cart tab, product order box, videos,
   reviews, order tracking, account pages and form helpers.
   Loaded last on storefront pages so it can override earlier rules.
   The header is changed only for phones and tablets (see the header block near the end). */

:root {
    --line-strong: #d3c8cf;
    --ui-orange: #f26b1d;
    --ui-orange-dark: #d85a12;
    --ui-green: #1f9d55;
    --ui-green-dark: #17803f;
    --ui-blue: #1f6fd1;
    --ui-blue-dark: #1859a8;
    --ui-star: #f5a623;
}

/* ---------- English pages: the reference store's typeface (Open Sans) ----------
   Only the page content and footer change. The header keeps its own font. */

html[lang="en"] main,
html[lang="en"] .site-footer,
html[lang="en"] .mbar {
    font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

html[lang="en"] main :is(h1, h2, h3, .pd-title, .trk-title, .acc-title, .product-info h1) {
    font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0;
}

/* The footer sits outside <main>, so its headings get their own rule. */
html[lang="en"] .site-footer .ft-head {
    font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0;
}

/* ---------- Footer: light, four columns, no app links ---------- */

.site-footer.ft {
    margin-top: 56px;
    padding: 36px 0 0;
    background: #fff;
    color: var(--ink);
    border-top: 1px solid var(--line);
    overflow: visible;
}

.site-footer.ft::before {
    display: none;
}

/* Phones: Information and Support sit side by side; Shop By runs the full width in two columns, so no column is left short.
   Wide screens: three columns, Information, Support and Shop By. */
.ft-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
    padding-bottom: 28px;
}

.ft-col-shop {
    grid-column: 1 / -1;
}

.ft-col-shop .ft-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 16px;
}

@media (min-width: 900px) {
    .ft-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px 40px;
    }

    .ft-col-shop {
        grid-column: auto;
    }

    .ft-col-shop .ft-links {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }
}

.ft-head {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

.ft-links {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ft-links a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

/* Underline on hover only where a mouse is used. On a phone a tap leaves the hover state on,
   which kept the underline on the link after the page opened. */
@media (hover: hover) {
    .ft-links a:hover {
        color: var(--rose);
        text-decoration: underline;
    }
}

/* Keyboard users get an outline instead */
.ft-links a:focus-visible {
    color: var(--rose);
    outline: 2px solid var(--rose);
    outline-offset: 3px;
    border-radius: 4px;
}

.ft-pay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding-top: 18px;
    padding-bottom: 18px;
    border-top: 1px solid var(--line);
}

.ft-pay-label {
    margin: 0;
    font-weight: 700;
}

.ft-pay-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ft-pay-list li {
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--cream);
    font-size: 0.9rem;
}

.ft-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 0.95rem;
}

.ft-contact a {
    color: var(--ink);
    text-decoration: none;
}

.ft-contact a:hover {
    color: var(--rose);
}

.ft-bottom {
    padding-top: 14px;
    padding-bottom: 14px;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 0.9rem;
    color: var(--muted);
}

.ft-bottom p {
    margin: 0;
}

/* ---------- Phone bottom bar (hidden on wide screens) ---------- */

.mbar {
    display: none;
}

@media (max-width: 767px) {
    .mbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(135deg, #2a1229 0%, #4d2749 58%, #6b2c58 100%);
        border-top: 1px solid rgba(239, 217, 174, 0.35);
        box-shadow: 0 -12px 26px -18px rgba(42, 18, 41, 0.85);
    }

    .mbar a {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        min-height: 44px;
        padding: 4px 0;
        color: rgba(243, 230, 238, 0.78);
        text-decoration: none;
        font-size: 0.7rem;
        font-weight: 600;
    }

    .mbar a.is-active {
        color: var(--gold-light);
    }

    .mbar a.is-active svg {
        filter: drop-shadow(0 0 6px rgba(239, 217, 174, 0.45));
    }

    /* A short bar on the top edge marks the current page */
    .mbar a.is-active::before {
        content: "";
        position: absolute;
        top: -6px;
        left: 26%;
        right: 26%;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--gold-light);
    }

    .mbar svg {
        display: block;
    }

    .mbar .ico {
        width: 22px;
        height: 22px;
    }

    .mbar-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mbar-cart {
        position: relative;
        display: inline-block;
    }

    .mbar-count {
        position: absolute;
        top: -6px;
        right: -10px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--rose);
        color: #fff;
        font-size: 0.68rem;
        line-height: 18px;
        text-align: center;
    }

    body {
        padding-bottom: 72px;
    }
}

/* ---------- Side cart tab (wide screens) ---------- */

.cart-pill {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 72px;
    padding: 12px 6px;
    border-radius: 14px 0 0 14px;
    background: var(--ui-orange);
    color: #fff;
    text-decoration: none;
    text-align: center;
    box-shadow: var(--shadow);
    transform: translateY(-50%);
}

.cart-pill:hover,
.cart-pill:focus-visible {
    background: var(--ui-orange-dark);
}

.cart-pill-count {
    font-size: 0.85rem;
    font-weight: 700;
}

.cart-pill-total {
    font-size: 0.8rem;
}

@media (max-width: 767px) {
    .cart-pill {
        display: none;
    }
}

/* ---------- Form helpers ---------- */

/* Honeypot: present in the form for bots, invisible to people. */
.hp-field {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.field-error {
    display: block;
    margin: 4px 0 0;
    color: var(--danger);
    font-size: 0.85rem;
    font-style: normal;
    font-weight: 500;
}

/* ---------- Product: quantity and buy buttons ---------- */

.pd-brand {
    margin: 0 0 6px;
    color: var(--muted);
}

.pd-price {
    margin-top: 10px;
}

.pd-order {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.pd-qty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.pd-qty-label {
    min-width: 84px;
    font-weight: 600;
}

.pd-qty-box {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #fff;
}

.pd-step {
    width: 44px;
    height: 44px;
    border: 0;
    background: #f7f1f4;
    color: var(--ink);
    font: inherit;
    font-size: 1.3rem;
    cursor: pointer;
}

.pd-step:hover,
.pd-step:focus-visible {
    background: var(--rose-pale);
}

.pd-qty-input {
    width: 68px;
    height: 44px;
    border: 0;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    text-align: center;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    -moz-appearance: textfield;
}

.pd-qty-input::-webkit-outer-spin-button,
.pd-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pd-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pd-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--plum);
    color: #fff;
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.pd-btn:hover,
.pd-btn:focus-visible {
    filter: brightness(1.08);
}

.pd-btn:active {
    transform: translateY(1px);
}

.pd-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.pd-btn-cart {
    background: var(--ui-orange);
}

.pd-btn-buy {
    background: var(--plum);
}

.pd-btn-wa {
    background: var(--ui-green);
}

.pd-btn-call {
    background: var(--ui-blue);
}

.pd-contact {
    margin-top: 0;
}

@media (max-width: 380px) {
    .pd-btn {
        font-size: 0.92rem;
        padding: 12px 8px;
    }
}

/* ---------- Product: sections and video ---------- */

.pd {
    padding-bottom: 40px;
}

.pd-section {
    margin-top: 44px;
}

.pd-title {
    margin: 0 0 16px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.55rem;
    color: var(--plum);
}

.pd-title-small {
    font-size: 1.2rem;
}

.pd-title-center {
    margin: 0;
    text-align: center;
}

.video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
    background: #000;
    box-shadow: var(--shadow-sm);
}

.video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------- Product: reviews (same layout as the reference screenshots) ---------- */

.pd-summary {
    display: grid;
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.pd-avg {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pd-avg-num {
    margin: 0;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
}

.pd-avg-label {
    margin: 0 0 4px;
    font-weight: 600;
}

.pd-stars {
    margin: 0;
    color: var(--ui-star);
    font-size: 1.1rem;
    letter-spacing: 2px;
}

.pd-recommended {
    margin: 0;
    color: var(--ink);
}

.pd-recommended strong {
    color: var(--rose);
}

.pd-bars {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pd-bars li {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.pd-bar-stars {
    color: var(--ui-star);
    letter-spacing: 1px;
    white-space: nowrap;
}

.pd-bar-rest {
    color: #e5dbe0;
}

.pd-bar {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #efe6eb;
}

.pd-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #f7b731, #f08a1c);
}

.pd-bar-pct {
    color: var(--muted);
    text-align: right;
}

@media (min-width: 760px) {
    .pd-summary {
        grid-template-columns: 220px minmax(0, 1fr);
        align-items: start;
    }

    .pd-avg {
        grid-column: 1;
        grid-row: 1;
    }

    .pd-recommended {
        grid-column: 1;
        grid-row: 2;
    }

    .pd-bars {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

/* Review form */

.pd-form-wrap {
    margin: 22px 0 28px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.pd-review-form {
    display: grid;
    gap: 14px;
}

.pd-review-form > p,
.pd-review-form > .hp-field {
    grid-column: 1 / -1;
}

@media (min-width: 640px) {
    .pd-review-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pd-wide {
        grid-column: 1 / -1;
    }
}

.pd-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.pd-field > span {
    font-size: 0.95rem;
    font-weight: 600;
}

.pd-field input,
.pd-field select,
.pd-field textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
}

.pd-field textarea {
    min-height: 120px;
    resize: vertical;
}

.pd-field input:focus,
.pd-field select:focus,
.pd-field textarea:focus {
    outline: 2px solid var(--rose-light);
    outline-offset: 1px;
    border-color: var(--rose);
}

/* Photo upload box: dashed, with drag and drop */

.pd-drop {
    position: relative;
    display: grid;
    place-items: center;
    gap: 4px;
    padding: 22px 16px;
    border: 2px dashed #c9b3bf;
    border-radius: 14px;
    background: #fdf9fb;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
}

.pd-drop:hover,
.pd-drop:focus-within,
.pd-drop.is-over {
    border-color: var(--rose);
    background: var(--rose-pale);
}

.pd-drop > span {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 400;
}

.pd-file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.pd-file-names {
    display: block;
    margin-top: 6px;
    color: var(--ink) !important;
    font-weight: 600 !important;
    overflow-wrap: anywhere;
}

.pd-btn-submit {
    grid-column: 1 / -1;
    background: var(--rose);
}

.pd-btn-submit:hover,
.pd-btn-submit:focus-visible {
    background: var(--plum);
}

/* Review list */

.pd-review-list {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pd-review {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.pd-avatar {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, #c9a1b4, #8f5c7a);
}

.pd-avatar svg {
    display: block;
    width: 64px;
    height: 64px;
}

.pd-review-name {
    margin: 0;
    font-weight: 700;
}

.pd-review-name span {
    margin-left: 8px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 400;
}

.pd-review-stars {
    margin: 4px 0 0;
    color: var(--ui-star);
    letter-spacing: 2px;
}

.pd-review-text {
    margin: 6px 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.pd-review-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.pd-review-photos img {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.pd-review-empty {
    padding: 14px;
    text-align: center;
}

@media (max-width: 420px) {
    .pd-review {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
    }

    .pd-avatar,
    .pd-avatar svg {
        width: 48px;
        height: 48px;
    }
}

/* "Related products" heading row */

.pd-related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.pd-more {
    color: var(--rose);
    font-weight: 600;
    text-decoration: none;
}

/* ---------- Order tracking ---------- */

.trk {
    padding-bottom: 40px;
}

.trk-title {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.7rem, 4vw, 2.2rem);
    color: var(--plum);
}

.trk-lead {
    margin: 6px 0 0;
    color: var(--muted);
}

.trk-form {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

@media (min-width: 640px) {
    .trk-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
    }

    .trk-submit {
        grid-column: 1 / -1;
    }
}

.trk-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    font-weight: 600;
}

.trk-field input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 400;
}

.trk-field input:focus {
    outline: 2px solid var(--rose-light);
    outline-offset: 1px;
    border-color: var(--rose);
}

.trk-submit {
    min-height: 48px;
    border: 0;
    border-radius: 10px;
    background: var(--rose);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.trk-submit:hover,
.trk-submit:focus-visible {
    background: var(--plum);
}

.trk-card {
    margin-top: 22px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.trk-order-label {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.trk-order-number {
    margin: 2px 0 14px;
    font-size: 1.2rem;
    font-weight: 700;
}

.trk-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.trk-head h2 {
    margin: 0;
    font-size: 1.2rem;
}

.trk-pill {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--rose-pale);
    color: var(--plum);
    font-size: 0.85rem;
    font-weight: 700;
}

.trk-pill-delivered {
    background: #e6f5ec;
    color: #1f6b40;
}

.trk-pill-cancelled {
    background: var(--danger-bg);
    color: var(--danger);
}

.trk-pill-shipped,
.trk-pill-ready_to_ship,
.trk-pill-packed {
    background: #e8f0fb;
    color: #1f4f9a;
}

.trk-pill-awaiting_payment {
    background: #fff4e0;
    color: #8a5a00;
}

/* Six-step stepper: a dot per step, joined by a line that fills as the order moves on */

.trk-steps {
    margin: 22px 0 18px;
    padding: 0;
    list-style: none;
}

.trk-step {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    color: var(--muted);
}

.trk-step::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 46px;
    bottom: -10px;
    width: 2px;
    background: #eadfe3;
}

.trk-step:last-child::after {
    display: none;
}

.trk-step.is-done::after {
    background: var(--rose);
}

.trk-dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 2px solid #eadfe3;
    border-radius: 50%;
    background: #f3ecf0;
    color: var(--muted);
    font-weight: 700;
}

.trk-step.is-done {
    color: var(--ink);
}

.trk-step.is-done .trk-dot {
    border-color: var(--rose);
    background: var(--rose);
    color: #fff;
}

.trk-step.is-current .trk-dot {
    box-shadow: 0 0 0 5px rgba(181, 80, 122, 0.18);
}

.trk-step.is-current .trk-name {
    color: var(--plum);
    font-weight: 700;
}

.trk-name {
    font-weight: 600;
}

.trk-date {
    color: var(--muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

.trk-note {
    margin: 18px 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--cream);
}

.trk-meta {
    display: grid;
    gap: 6px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.trk-subhead {
    margin: 22px 0 10px;
    font-size: 1.05rem;
}

.trk-items {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trk-items li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.trk-total {
    margin: 16px 0 0;
    text-align: right;
}

.trk-history {
    margin-top: 18px;
}

.trk-history summary {
    color: var(--plum);
    font-weight: 700;
    cursor: pointer;
}

/* ---------- Account (phone sign-in) ---------- */

.acc {
    max-width: 560px;
    margin: 0 auto;
    padding-bottom: 40px;
}

.acc-card {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.acc-hello {
    margin: 0;
    color: var(--rose);
    font-weight: 600;
}

.acc-title {
    margin: 4px 0 8px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.8rem;
    color: var(--plum);
}

.acc-form {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.acc-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    font-weight: 600;
}

.acc-field input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 400;
}

.acc-field input:focus {
    outline: 2px solid var(--rose-light);
    outline-offset: 1px;
    border-color: var(--rose);
}

.acc-submit {
    min-height: 48px;
    border: 0;
    border-radius: 10px;
    background: var(--rose);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.acc-submit:hover,
.acc-submit:focus-visible {
    background: var(--plum);
}

.acc-ghost {
    padding: 8px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--plum);
    font: inherit;
    cursor: pointer;
}

.acc-inline {
    display: inline;
    margin: 0;
}

.acc-links {
    margin: 16px 0 0;
    text-align: center;
}

.acc-links a {
    color: var(--rose);
    font-weight: 600;
}

.acc-subhead {
    margin: 28px 0 12px;
    font-size: 1.2rem;
}

.acc-order {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.acc-order-number {
    margin: 0;
    font-weight: 700;
}

.acc-order-side {
    display: grid;
    justify-items: end;
    gap: 4px;
}

/* Footer: phone number only on wide screens (the phone bar has Call). Space at the end of the page so the chat button does not cover the copyright line. */
.ft-wide-only {
    display: none;
}

@media (min-width: 768px) {
    .ft-wide-only {
        display: list-item;
    }
}

@media (max-width: 767px) {
    .ft-bottom {
        padding-bottom: 68px;
    }
}

/* ---------- Header on phones and tablets ----------
   Phones: Home, Shop and Track order are in the bottom bar, so the second header row shows the brand name.
   Tablets: the three menu tiles stay in the header, in one row of three.
   Computers: unchanged (features.css). */

.header-name {
    display: none;
}

.site-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 767px) {
    .site-nav {
        display: none;
    }

    .header-name {
        grid-area: nav;
        display: block;
        position: relative;
        margin: 0;
        padding: 4px 0 16px;
        text-align: center;
        font-family: "Playfair Display", Georgia, serif;
        font-size: 1.85rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        line-height: 1.15;
        color: #f6e7c4;
        text-shadow: 0 0 24px rgba(239, 217, 174, 0.3);
    }

    /* Each letter rises in one after another, out of a soft blur */
    .hn-letter {
        display: inline-block;
        opacity: 0;
        transform: translateY(16px);
        filter: blur(6px);
        animation: hn-rise 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both;
        animation-delay: calc(0.2s + var(--i) * 0.07s);
    }

    .hn-gap {
        display: inline-block;
        width: 0.3em;
    }

    /* A thin gold line with a small diamond at its centre, drawn in after the letters */
    .header-name::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 2px;
        width: 150px;
        height: 1px;
        margin-left: -75px;
        background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
        transform: scaleX(0);
        animation: header-name-line 1s ease-out 1.3s both;
    }

    .header-name::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 6px;
        height: 6px;
        margin-left: -3px;
        background: var(--gold-light);
        transform: rotate(45deg) scale(0);
        animation: header-name-diamond 0.6s ease-out 1.8s both;
    }
}

@keyframes hn-rise {
    from {
        opacity: 0;
        transform: translateY(16px);
        filter: blur(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes header-name-line {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes header-name-diamond {
    from {
        transform: rotate(45deg) scale(0);
    }

    to {
        transform: rotate(45deg) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hn-letter {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none;
    }

    .header-name::after {
        transform: scaleX(1);
        animation: none;
    }

    .header-name::before {
        transform: rotate(45deg);
        animation: none;
    }
}

/* Page-section spacing on the account and tracking pages */
.acc.page-section,
.trk.page-section {
    padding-top: 28px;
}
/* ---------- Breadcrumb on the product page: a pill-shaped path bar ---------- */

.crumbs {
    margin: 22px 0 18px;
    font-size: 0.88rem;
    color: var(--muted);
}

.crumbs-list {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin: 0;
    padding: 5px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 10px 22px -18px rgba(59, 30, 58, 0.55);
}

.crumbs-list::-webkit-scrollbar {
    display: none;
}

.crumbs-list li {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    white-space: nowrap;
}

/* Only the last step (the product) gives up width, so a long name is cut with "…" instead of scrolling */
.crumbs-list li:last-child {
    flex: 0 1 auto;
    min-width: 0;
}

/* Chevron between two steps */
.crumbs-list li + li::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin: 0 6px 0 4px;
    border-top: 1.5px solid var(--gold);
    border-right: 1.5px solid var(--gold);
    transform: rotate(45deg);
}

.crumbs-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--plum);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
    .crumbs-list a:hover {
        background: #f8eef3;
        color: var(--rose);
    }
}

.crumbs-list a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Home is an icon only */
.crumbs-home {
    width: 36px;
    padding: 0;
}

.crumbs-home .ico {
    width: 18px;
    height: 18px;
    color: var(--rose);
}

/* The current product: a soft gold tint, cut short with "…" when the name is long */
.crumbs-current {
    display: inline-block;
    min-width: 0;
    max-width: min(300px, 100%);
    padding: 7px 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 999px;
    background: linear-gradient(135deg, #f8edf2, #fbf3e4);
    color: var(--plum);
    font-weight: 700;
    vertical-align: middle;
}