/* =============================================================
   Albion Checkout — Frontend Styles
   ============================================================= */

/* The plugin's one font, SF Pro Display. Apple doesn't license it as a web
   font, so it's named for machines that have it installed, then the Apple
   system font (SF on Apple devices), then close fallbacks elsewhere. Also
   set in albion-checkout-steps.css and account-status.css, which can load
   without this file. */
:root {
    --albion-font: "San Francisco", "SF Pro Display", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Roots that would otherwise take the theme's font. */
.albion-pdp-atc,
.albion-btn-widget,
.albion-data-widget,
.albion-fulfilment,
.albion-pickup-summary,
.albion-co-ac-fallback {
    font-family: var(--albion-font);
}

/* ── Cart Page Widget ───────────────────────────────────────── */

.albion-cart-wrap {
    font-family: var(--albion-font);
    -webkit-font-smoothing: antialiased;
    color: #1d1d1f;
}

/* WooCommerce notices on the bag and checkout pages: one style for both.
   Hugeicons Free stroke icons, rounded joins and caps, 1.5px stroke. */
body.woocommerce-cart .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce-notices-wrapper {
    margin: 0 0 28px;
}

body.woocommerce-cart .woocommerce-notices-wrapper:empty,
body.woocommerce-checkout .woocommerce-notices-wrapper:empty {
    display: none;
}

body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-warning,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-cart .wc-block-components-notice-banner,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-warning,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .wc-block-components-notice-banner {
    position: relative;
    display: block;
    box-sizing: border-box;
    min-height: 76px;
    margin: 0 0 12px;
    /* Normal text flow (text and links stay together); this padding centres
       a single line in the 76px box. */
    padding: 26px 20px 26px 76px;
    border: 1px solid #e0e0e4;
    border-radius: 16px;
    background: #f5f5f7;
    box-shadow: none;
    color: #1d1d1f;
    font-family: var(--albion-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    list-style: none;
}

/* Block-style notices wrap their text in their own element, so flex is safe there. */
body.woocommerce-cart .wc-block-components-notice-banner,
body.woocommerce-checkout .wc-block-components-notice-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 17px;
    padding-bottom: 17px;
}

body.woocommerce-cart .woocommerce-message::after,
body.woocommerce-cart .woocommerce-info::after,
body.woocommerce-cart .woocommerce-warning::after,
body.woocommerce-checkout .woocommerce-message::after,
body.woocommerce-checkout .woocommerce-info::after,
body.woocommerce-checkout .woocommerce-warning::after {
    content: "";
    display: table;
    clear: both;
}

body.woocommerce-cart .wc-block-components-notice-banner__content,
body.woocommerce-checkout .wc-block-components-notice-banner__content {
    flex: 1;
}

body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-cart .woocommerce-warning::before,
body.woocommerce-cart .woocommerce-error::before,
body.woocommerce-cart .wc-block-components-notice-banner::before,
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-warning::before,
body.woocommerce-checkout .woocommerce-error::before,
body.woocommerce-checkout .wc-block-components-notice-banner::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 21px 21px;
    transform: translateY(-50%);
}

body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .wc-block-components-notice-banner.is-success::before,
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .wc-block-components-notice-banner.is-success::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z' stroke='%23248A3D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 12.5C8 12.5 10.5 15 11 15C11.5 15 16 9.5 16 9.5' stroke='%23248A3D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-cart .wc-block-components-notice-banner.is-info::before,
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .wc-block-components-notice-banner.is-info::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z' stroke='%230071E3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 16V11.5M12 8H12.01' stroke='%230071E3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.woocommerce-cart .woocommerce-warning::before,
body.woocommerce-cart .wc-block-components-notice-banner.is-warning::before,
body.woocommerce-checkout .woocommerce-warning::before,
body.woocommerce-checkout .wc-block-components-notice-banner.is-warning::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z' stroke='%23A15C00' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 7.5V12.5L15 14.5' stroke='%23A15C00' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.woocommerce-cart .woocommerce-error::before,
body.woocommerce-cart .wc-block-components-notice-banner.is-error::before,
body.woocommerce-checkout .woocommerce-error::before,
body.woocommerce-checkout .wc-block-components-notice-banner.is-error::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z' stroke='%23D70015' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 7.5V12.5M12.125 16H12' stroke='%23D70015' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.woocommerce-cart .woocommerce-error li,
body.woocommerce-checkout .woocommerce-error li {
    margin: 0;
}

body.woocommerce-cart .woocommerce-message a,
body.woocommerce-cart .woocommerce-info a,
body.woocommerce-cart .woocommerce-warning a,
body.woocommerce-cart .woocommerce-error a,
body.woocommerce-cart .wc-block-components-notice-banner a,
body.woocommerce-checkout .woocommerce-message a,
body.woocommerce-checkout .woocommerce-info a,
body.woocommerce-checkout .woocommerce-warning a,
body.woocommerce-checkout .woocommerce-error a,
body.woocommerce-checkout .wc-block-components-notice-banner a {
    color: #0071e3;
    font-weight: 500;
    text-decoration: none;
}

body.woocommerce-cart .woocommerce-message a:hover,
body.woocommerce-cart .woocommerce-info a:hover,
body.woocommerce-cart .woocommerce-warning a:hover,
body.woocommerce-cart .woocommerce-error a:hover,
body.woocommerce-cart .wc-block-components-notice-banner a:hover,
body.woocommerce-checkout .woocommerce-message a:hover,
body.woocommerce-checkout .woocommerce-info a:hover,
body.woocommerce-checkout .woocommerce-warning a:hover,
body.woocommerce-checkout .woocommerce-error a:hover,
body.woocommerce-checkout .wc-block-components-notice-banner a:hover {
    text-decoration: underline;
}

body.woocommerce-cart .woocommerce-message .button,
body.woocommerce-cart .woocommerce-info .button,
body.woocommerce-cart .woocommerce-warning .button,
body.woocommerce-cart .woocommerce-error .button,
body.woocommerce-cart .wc-block-components-notice-banner .button,
body.woocommerce-checkout .woocommerce-message .button,
body.woocommerce-checkout .woocommerce-info .button,
body.woocommerce-checkout .woocommerce-warning .button,
body.woocommerce-checkout .woocommerce-error .button,
body.woocommerce-checkout .wc-block-components-notice-banner .button {
    float: right;
    margin: -8px 0 -8px 20px;
    padding: 8px 14px;
    border: 1px solid #d2d2d7;
    border-radius: 980px;
    background: #fff;
    color: #0071e3;
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
}

body.woocommerce-cart .wc-block-components-notice-banner > svg,
body.woocommerce-checkout .wc-block-components-notice-banner > svg {
    display: none;
}

@media (max-width: 640px) {
    body.woocommerce-cart .woocommerce-message,
    body.woocommerce-cart .woocommerce-info,
    body.woocommerce-cart .woocommerce-warning,
    body.woocommerce-cart .woocommerce-error,
    body.woocommerce-cart .wc-block-components-notice-banner,
    body.woocommerce-checkout .woocommerce-message,
    body.woocommerce-checkout .woocommerce-info,
    body.woocommerce-checkout .woocommerce-warning,
    body.woocommerce-checkout .woocommerce-error,
    body.woocommerce-checkout .wc-block-components-notice-banner {
        min-height: 70px;
        padding: 23px 16px 23px 64px;
        border-radius: 14px;
        font-size: 14px;
    }

    body.woocommerce-cart .woocommerce-message::before,
    body.woocommerce-cart .woocommerce-info::before,
    body.woocommerce-cart .woocommerce-warning::before,
    body.woocommerce-cart .woocommerce-error::before,
    body.woocommerce-cart .wc-block-components-notice-banner::before,
    body.woocommerce-checkout .woocommerce-message::before,
    body.woocommerce-checkout .woocommerce-info::before,
    body.woocommerce-checkout .woocommerce-warning::before,
    body.woocommerce-checkout .woocommerce-error::before,
    body.woocommerce-checkout .wc-block-components-notice-banner::before {
        top: 50%;
        left: 14px;
        width: 36px;
        height: 36px;
        background-size: 19px 19px;
    }

    body.woocommerce-cart .woocommerce-message .button,
    body.woocommerce-cart .woocommerce-info .button,
    body.woocommerce-cart .woocommerce-warning .button,
    body.woocommerce-cart .woocommerce-error .button,
    body.woocommerce-cart .wc-block-components-notice-banner .button,
    body.woocommerce-checkout .woocommerce-message .button,
    body.woocommerce-checkout .woocommerce-info .button,
    body.woocommerce-checkout .woocommerce-warning .button,
    body.woocommerce-checkout .woocommerce-error .button,
    body.woocommerce-checkout .wc-block-components-notice-banner .button {
        display: table;
        float: none;
        margin: 10px 0 0;
    }
}

/* Wrapper for the bag interior — replaced wholesale on every cart change
   (WooCommerce fragment). Layout-neutral. */
.albion-cart__body {
    display: block;
}

.albion-cart__notice {
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid #f0c8c8;
    border-radius: 10px;
    background: #fdf3f3;
    color: #922;
    font-size: 14px;
    line-height: 1.4;
}


/* ── Empty State ─────────────────────────────────────────────── */

.albion-cart__empty {
    padding: 40px 0;
}

.albion-cart__empty-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #1d1d1f;
}

.albion-cart__empty-subtitle {
    font-size: 17px;
    color: #6e6e73;
    margin: 0;
}

/* ── Cart Items ──────────────────────────────────────────────── */

.albion-cart__items {
    margin-bottom: 0;
}

.albion-cart__item {
    display: flex;
    gap: 28px;
    padding: 32px 0;
    border-bottom: 1px solid #e0e0e0;
}

.albion-cart__item-image-wrap {
    flex-shrink: 0;
    align-self: flex-start;
    border: 1px solid #e6e6e8;
    border-radius: 22px;
    overflow: hidden;
}

.albion-cart__item-image {
    width: 140px;
    height: auto;
    object-fit: contain;
    display: block;
}

.albion-cart__item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.albion-cart__item-restriction {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 14px;
    border: 1px solid #f0c36d;
    border-radius: 10px;
    background: #fff8e8;
    color: #6b4500;
    font-size: 14px;
    line-height: 1.4;
}

.albion-cart__item-restriction svg {
    flex: 0 0 auto;
    margin-top: 1px;
}

.albion-cart__item-restriction p {
    margin: 0;
}

/* ── Row 1: name + qty left, price + monthly + remove right ── */

.albion-cart__item-row1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.albion-cart__item-name-qty {
    flex: 1;
    min-width: 0;
}

.albion-cart__item-product-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.albion-cart__item-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.albion-cart__item-name {
    font-size: 19px;
    font-weight: 600;
    margin: 0;
    color: #1d1d1f;
    line-height: 1.3;
}

.albion-cart__item-meta {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: #6e6e73;
}

.albion-cart__item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.albion-cart__item-price {
    font-size: 19px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
}

.albion-cart__item-monthly {
    font-size: 14px;
    color: #6e6e73;
    margin: 0;
}

/* ── Qty Select ──────────────────────────────────────────────── */

.albion-cart__qty-wrap {
    position: relative;
    flex-shrink: 0;
}

.albion-cart__qty-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: #f5f5f7;
    border: none;
    border-radius: 6px;
    padding: 5px 26px 5px 10px;
    font-size: 14px;
    font-weight: 500;
    color: #1d1d1f;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231d1d1f' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    min-width: 56px;
}

.albion-cart__qty-select:focus {
    outline: 2px solid #0071e3;
    outline-offset: 2px;
}

/* ── Item Actions ────────────────────────────────────────────── */

.albion-cart__remove {
    font-size: 14px;
    color: #0071e3;
    text-decoration: none;
    margin-top: 4px;
}

.albion-cart__remove:hover {
    text-decoration: underline;
}

/* ── AppleCare+ Upsell ───────────────────────────────────────── */

.albion-cart__applecare {
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    padding: 18px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.albion-cart__applecare-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.albion-cart__applecare-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

/* The Apple logo is the  character (U+F8FF), which Apple devices draw as the logo. */
.albion-cart__applecare-logo {
    display: block;
    width: 20px;
    font-family: var(--albion-font);
    font-size: 19px;
    line-height: 20px;
    text-align: center;
    color: #ff3b30;
}

.albion-cart__applecare-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.albion-cart__applecare-title {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
    line-height: 1.4;
}

.albion-cart__applecare-add {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 400;
    color: #0071e3;
    text-decoration: none;
}

.albion-cart__applecare-add:hover {
    text-decoration: underline;
}

.albion-cart__applecare-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.albion-cart__applecare-bullets {
    margin: 0 0 0 28px;
    padding: 0;
    list-style: disc;
}

.albion-cart__applecare-bullets li {
    font-size: 14px;
    color: #1d1d1f;
    margin-bottom: 4px;
    line-height: 1.5;
}

.albion-cart__applecare-footnote {
    font-size: 13px;
    color: #6e6e73;
    margin: 0;
}

.albion-cart__applecare-learn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #0071e3;
    text-decoration: none;
}

.albion-cart__applecare-learn:hover {
    text-decoration: underline;
}

.albion-cart__applecare-upgrade {
    display: inline-flex;
    width: fit-content;
    margin-top: 4px;
    color: #0071e3;
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
}

.albion-cart__applecare-upgrade:hover {
    text-decoration: underline;
}

/* AppleCare+ — added / covered state: make it unmistakable */
.albion-cart__applecare--added {
    border-color: #e0e0e0;
    background: transparent;
    border-radius: 0;
    padding: 18px 0;
    margin: 0;
}
.albion-cart__applecare--added .albion-cart__applecare-icon {
    color: #1e9e57;
}
.albion-cart__applecare--added .albion-cart__applecare-title {
    color: #1d1d1f;
}
/* ── Delivery ────────────────────────────────────────────────── */

.albion-cart__item-delivery {
    display: flex;
    gap: 0;
    border-top: 1px solid #e0e0e0;
    padding-top: 18px;
}

.albion-cart__applecare + .albion-cart__item-delivery {
    border-top: none;
}

.albion-cart__delivery-col {
    flex: 1;
}

.albion-cart__delivery-col + .albion-cart__delivery-col {
    border-left: 1px solid #e0e0e0;
    padding-left: 24px;
}

.albion-cart__delivery-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: #1d1d1f;
    line-height: 1.4;
}

.albion-cart__delivery-row > div {
    flex: 1;
    min-width: 0;
}

.albion-cart__delivery-svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 0;
    color: #1d1d1f;
}

.albion-cart__delivery-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #1d1d1f;
}

.albion-cart__delivery-date {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin: 4px 0 0;
}

.albion-cart__item-delivery .albion-cart__delivery-date.is-ok { color: #008009 !important; }
.albion-cart__item-delivery .albion-cart__delivery-date.is-wait { color: #b64400 !important; }
.albion-cart__item-delivery .albion-cart__delivery-date.is-stop { color: #86868b !important; }
.albion-cart__item-delivery .albion-cart__delivery-date.is-pre { color: #b64400 !important; }
.albion-cart__item-delivery .albion-cart__delivery-date.is-soon { color: #6d3fd9 !important; }

.albion-cart__delivery-message {
    width: 100%;
    max-width: none;
    margin: 4px 0 0;
    color: #6e6e73;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.albion-cart__delivery-link {
    color: #0071e3;
    text-decoration: none;
}

.albion-cart__delivery-link:hover {
    text-decoration: underline;
}

/* ── Totals ──────────────────────────────────────────────────── */

.albion-cart__totals {
    padding: 28px 0 0;
}

.albion-cart__totals-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    font-size: 15px;
    color: #1d1d1f;
}

.albion-cart__totals-row:last-child {
    margin-bottom: 0;
}

.albion-cart__totals-divider {
    height: 1px;
    background-color: #d2d2d7;
    margin: 16px 0;
}

.albion-cart__totals-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.albion-cart__totals-row--total {
    font-size: 21px;
    font-weight: 700;
    align-items: flex-start;
}

.albion-cart__totals-vat {
    font-size: 13px;
    color: #6e6e73;
    font-weight: 400;
}

/* ── Pay Over Time ───────────────────────────────────────────── */

.albion-cart__pot {
    background-color: #f5f5f7;
    border-radius: 22px;
    padding: 30px 32px;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
}


.albion-cart__pot-title {
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 24px;
}

.albion-cart__pot-offer {
    max-width: 760px;
}

.albion-cart__pot-disclaimer {
    margin: 28px 0 0;
    color: #6e6e73;
    font-size: 11px;
    line-height: 1.4;
}

.albion-cart__pot-headline {
    font-size: 38px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 6px;
    line-height: 1.1;
}

.albion-cart__pot-per-mo {
    font-size: 16px;
    font-weight: 400;
    color: #6e6e73;
}

.albion-cart__pot-terms {
    font-size: 18px;
    color: #6e6e73;
    margin: 0 0 20px;
    line-height: 1.4;
}

.albion-cart__pot-body {
    max-width: 620px;
    font-size: 14px;
    color: #1d1d1f;
    margin: 0 0 12px;
    line-height: 1.5;
}


.albion-cart__pot-financed {
    display: block;
    margin: 14px 0 0;
    font-size: 12px;
    color: #6e6e73;
}

.albion-cart__pot-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    font-size: 13px;
    color: #0071e3;
    text-decoration: none;
    margin-top: 14px;
}

.albion-cart__pot-label {
    margin: 0;
    color: #1d1d1f;
    font-size: 13px;
}

.albion-cart__klarna-official {
    width: 100%;
    margin-top: 24px;
}

.albion-cart__klarna-official klarna-placement {
    display: block;
    width: 100%;
}

.albion-cart__klarna-official klarna-placement::part(osm-container) {
    padding: 15px !important;
    border: 1px solid #e6e6e8 !important;
    border-radius: 22px !important;
    background-color: #f5f5f7 !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

.albion-cart__klarna-official klarna-placement::part(osm-message) {
    color: #1d1d1f;
    font-family: var(--albion-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
    text-align: left;
}

.albion-cart__klarna-official klarna-placement::part(osm-legal) {
    color: #17120f;
    font-family: var(--albion-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
}

.albion-cart__klarna-official klarna-placement::part(osm-cta) {
    color: #1d1d1f;
    font-family: var(--albion-font);
    font-weight: 400;
    text-decoration: underline;
}

.albion-cart__klarna-official klarna-placement::part(osm-cta):hover {
    color: #1d1d1f;
    opacity: 0.75;
}

.albion-cart__pot-link:hover {
    text-decoration: underline;
}

/* ── Cart Badge (injected onto custom targets) ───────────────── */

.albion-badge {
    position: absolute;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.albion-badge--hidden {
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
}

/* ── Standalone Widgets ──────────────────────────────────────── */

.albion-data-widget {
    margin: 0;
    line-height: 1.3;
}

.albion-data-widget__before,
.albion-data-widget__after {
    opacity: 1;
}

.albion-finance-widget--hidden {
    display: none !important;
}

.albion-btn-widget {
    display: inline-block;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
}

/* Alignment via prefix_class — mirrors Elementor's own Button widget */
.albion-btn-align-stretch .albion-btn-widget { display: block; width: 100%; }

.albion-btn-align-left   { text-align: left; }
.albion-btn-align-center { text-align: center; }
.albion-btn-align-right  { text-align: right; }

/* Responsive tablet variants */
.albion-btn-tablet-align-stretch .albion-btn-widget { display: block; width: 100%; }
.albion-btn-tablet-align-left    { text-align: left; }
.albion-btn-tablet-align-center  { text-align: center; }
.albion-btn-tablet-align-right   { text-align: right; }

/* Responsive mobile variants */
.albion-btn-mobile-align-stretch .albion-btn-widget { display: block; width: 100%; }
.albion-btn-mobile-align-left    { text-align: left; }
.albion-btn-mobile-align-center  { text-align: center; }
.albion-btn-mobile-align-right   { text-align: right; }

.albion-btn-widget--hidden {
    display: none !important;
}

/* ── Buttons ─────────────────────────────────────────────────── */


.albion-cart__buttons {
    margin-top: 24px;
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.albion-cart__restriction-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 24px;
    padding: 16px 18px;
    border: 1px solid #f0c36d;
    border-radius: 12px;
    background: #fff8e8;
    color: #6b4500;
    font-size: 15px;
    line-height: 1.45;
}

.albion-cart__restriction-warning svg {
    flex: 0 0 auto;
    margin-top: 1px;
}

.albion-cart__restriction-warning p {
    margin: 0;
}

.albion-cart__restriction-content {
    flex: 1;
}


.albion-cart__btn-checkout {
    display: block;
    flex: 1;
    text-align: center;
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    padding: 18px 24px;
    border-radius: 980px;
    background-color: #0071e3;
    color: #ffffff;
    transition: opacity 0.2s ease;
}

.albion-cart__btn-checkout:hover {
    opacity: 0.85;
    text-decoration: none;
    color: #ffffff;
}

.albion-cart__btn-checkout.albion-cart__btn-checkout--disabled,
.albion-cart__btn-checkout.albion-cart__btn-checkout--disabled:hover {
    background-color: #d2d2d7 !important;
    color: #6e6e73 !important;
    cursor: not-allowed;
    opacity: 1;
}

.albion-cart__btn-continue,
.albion-cart__btn-start {
    display: block;
    flex: 1;
    text-align: center;
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    padding: 18px 24px;
    border-radius: 980px;
    background-color: #f5f5f7;
    color: #1d1d1f;
    transition: opacity 0.2s ease;
}

.albion-cart__btn-continue:hover,
.albion-cart__btn-start:hover {
    opacity: 0.8;
    text-decoration: none;
    color: #1d1d1f;
}

.albion-cart__empty .albion-cart__btn-start {
    margin-top: 24px;
}

/* ── Cart state visibility ───────────────────────────────────── */

body:not(.albion-cart-has-items) .albion-cart-filled-only {
    display: none !important;
}

/* =============================================================
   Mini Cart Widget
   ============================================================= */

.albion-mini-cart {
    display: block;
    font-family: var(--albion-font);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

/* Like the product card, every mini cart rule starts with
   `.albion-mini-cart:not(#_)` (id-level specificity), so header and menu
   rules such as `.site-header a` or `.elementor-nav-menu a` can't restyle
   it. The widget's Style controls use the same prefix. */
.albion-mini-cart:not(#_) *,
.albion-mini-cart:not(#_) *::before,
.albion-mini-cart:not(#_) *::after {
    box-sizing: border-box;
}

.albion-mini-cart:not(#_) a,
.albion-mini-cart:not(#_) p,
.albion-mini-cart:not(#_) span {
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
    text-shadow: none;
}

.albion-mini-cart:not(#_) a {
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    box-shadow: none;
    line-height: inherit;
}

/* Prices: themes size and colour WooCommerce's price markup on their own. */
.albion-mini-cart:not(#_) .woocommerce-Price-amount,
.albion-mini-cart:not(#_) .woocommerce-Price-amount bdi,
.albion-mini-cart:not(#_) .woocommerce-Price-currencySymbol {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

/* ── Content Panel ───────────────────────────────────────────── */

.albion-mini-cart:not(#_) .albion-mini-cart__dropdown {
    width: 420px;
    max-width: calc(100vw - 32px);
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    overflow: hidden;
}

.albion-mini-cart:not(#_) .albion-mini-cart__dropdown.is-open {
    pointer-events: auto;
}

.albion-mini-cart:not(#_) .albion-mini-cart__dropdown--bare {
    width: 100% !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.albion-mini-cart:not(#_) .albion-mini-cart__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 14px;
}

.albion-mini-cart:not(#_) .albion-mini-cart__title {
    min-width: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1d1d1f;
}

.albion-mini-cart:not(#_) .albion-mini-cart__count {
    margin-left: 6px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
    color: #6e6e73;
}

.albion-mini-cart:not(#_) .albion-mini-cart__review-btn,
.albion-mini-cart:not(#_) .albion-mini-cart__shop-btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    /* !important: header menus commonly force link colours with it. The
       widget's colour controls use !important too, so they still apply. */
    color: #ffffff !important;
    background-color: #0071e3 !important;
    border: 0;
    border-radius: 980px;
    box-shadow: none;
    text-decoration: none;
    transition: filter 0.2s ease;
}

/* Every state keeps white text: header menus often recolour links on hover. */
.albion-mini-cart:not(#_) .albion-mini-cart__review-btn:hover,
.albion-mini-cart:not(#_) .albion-mini-cart__shop-btn:hover,
.albion-mini-cart:not(#_) .albion-mini-cart__review-btn:focus,
.albion-mini-cart:not(#_) .albion-mini-cart__shop-btn:focus,
.albion-mini-cart:not(#_) .albion-mini-cart__review-btn:active,
.albion-mini-cart:not(#_) .albion-mini-cart__shop-btn:active,
.albion-mini-cart:not(#_) .albion-mini-cart__review-btn:visited,
.albion-mini-cart:not(#_) .albion-mini-cart__shop-btn:visited {
    color: #ffffff !important;
    text-decoration: none;
}

.albion-mini-cart:not(#_) .albion-mini-cart__review-btn:hover,
.albion-mini-cart:not(#_) .albion-mini-cart__shop-btn:hover {
    filter: brightness(1.08);
}

.albion-mini-cart:not(#_) .albion-mini-cart__review-btn:focus-visible,
.albion-mini-cart:not(#_) .albion-mini-cart__shop-btn:focus-visible {
    outline: 2px solid #0071e3;
    outline-offset: 2px;
}

/* ── Empty State ─────────────────────────────────────────────── */

.albion-mini-cart:not(#_) .albion-mini-cart__empty {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 1px 0;
}

.albion-mini-cart:not(#_) .albion-mini-cart__empty-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #f5f5f7;
    color: #86868b;
}

.albion-mini-cart:not(#_) .albion-mini-cart__empty-icon svg {
    display: block;
}

.albion-mini-cart:not(#_) .albion-mini-cart__empty-text {
    flex: 1;
    min-width: 0;
}

.albion-mini-cart:not(#_) .albion-mini-cart__empty-title {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
}

.albion-mini-cart:not(#_) .albion-mini-cart__empty-subtitle {
    font-size: 13px;
    color: #6e6e73;
    margin: 2px 0 0;
}

/* ── Mini Cart Item ──────────────────────────────────────────── */

.albion-mini-cart:not(#_) .albion-mini-cart__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid #f0f0f0;
}

.albion-mini-cart:not(#_) .albion-mini-cart__item-image-link {
    flex-shrink: 0;
    display: block;
    padding: 4px;
    border-radius: 10px;
    background-color: #f5f5f7;
}

.albion-mini-cart:not(#_) .albion-mini-cart__item-image {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 6px;
    /* White-backed product shots blend into the grey tile. */
    mix-blend-mode: multiply;
}

.albion-mini-cart:not(#_) .albion-mini-cart__item-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.albion-mini-cart:not(#_) .albion-mini-cart__item-name {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    line-height: 1.4;
    text-decoration: none;
}

.albion-mini-cart:not(#_) .albion-mini-cart__item-name:hover {
    text-decoration: underline;
}

.albion-mini-cart:not(#_) .albion-mini-cart__item-meta {
    max-width: 100%;
    margin-top: 1px;
    font-size: 13px;
    color: #6e6e73;
    overflow-wrap: anywhere;
}

.albion-mini-cart:not(#_) .albion-mini-cart__item-applecare {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.4;
    color: #6e6e73;
}

.albion-mini-cart:not(#_) .albion-mini-cart__item-applecare .albion-mini-cart__item-remove {
    margin-top: 0;
}

.albion-mini-cart:not(#_) .albion-mini-cart__item-remove {
    margin-top: 6px;
    font-size: 13px;
    color: #6e6e73;
    text-decoration: none;
}

.albion-mini-cart:not(#_) .albion-mini-cart__item-remove:hover {
    color: #1d1d1f;
    text-decoration: underline;
}

.albion-mini-cart:not(#_) .albion-mini-cart__item-actions {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
    max-width: 45%;
    margin-left: auto;
    padding-left: 12px;
}

.albion-mini-cart:not(#_) .albion-mini-cart__item-price {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #1d1d1f;
    text-align: right;
    white-space: nowrap;
}

.albion-mini-cart:not(#_) .albion-mini-cart__item-price small {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #6e6e73;
    white-space: normal;
}

.albion-mini-cart:not(#_) .albion-mini-cart__more {
    display: inline-block;
    margin: 12px 0 2px;
    font-size: 13px;
    color: #6e6e73;
    text-decoration: none;
}

.albion-mini-cart:not(#_) .albion-mini-cart__more:hover {
    color: #1d1d1f;
    text-decoration: underline;
}

/* The full-width header panel follows Apple's quieter bag preview: generous
   spacing, floating product images and no table-like row dividers. */
.albion-mini-cart:not(#_) .albion-mini-cart__dropdown--bare .albion-mini-cart__header {
    padding-bottom: 24px;
}

.albion-mini-cart:not(#_) .albion-mini-cart__dropdown--bare .albion-mini-cart__body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.albion-mini-cart:not(#_) .albion-mini-cart__dropdown--bare .albion-mini-cart__item {
    min-height: 96px;
    align-items: flex-start;
    padding: 16px 0;
    border-top: 1px solid #f0f0f0;
}

.albion-mini-cart:not(#_) .albion-mini-cart__dropdown--bare .albion-mini-cart__item-image-link {
    padding: 0;
    border-radius: 0;
    background-color: transparent;
}

.albion-mini-cart:not(#_) .albion-mini-cart__dropdown--bare .albion-mini-cart__item-image {
    mix-blend-mode: normal;
}

.albion-mini-cart:not(#_) .albion-mini-cart__dropdown--bare .albion-mini-cart__more {
    margin: 16px 0 10px;
}

.albion-mini-cart:not(#_) .albion-mini-cart__dropdown--bare .albion-mini-cart__footer {
    padding: 20px 0;
    border-top-color: #e5e5e7;
}

/* ── Footer ──────────────────────────────────────────────────── */

.albion-mini-cart:not(#_) .albion-mini-cart__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid #e0e0e0;
    font-size: 14px;
}

.albion-mini-cart:not(#_) .albion-mini-cart__subtotal-label {
    color: #6e6e73;
}

.albion-mini-cart:not(#_) .albion-mini-cart__subtotal {
    font-weight: 600;
    color: #1d1d1f;
    white-space: nowrap;
}

/* ── Account Links ───────────────────────────────────────────── */

.albion-mini-cart:not(#_) .albion-mini-cart__account {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e5e5e7;
}

.albion-mini-cart:not(#_) .albion-mini-cart__account-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 500;
    color: #6e6e73;
}

.albion-mini-cart:not(#_) .albion-mini-cart__account-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.albion-mini-cart:not(#_) .albion-mini-cart__account-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 12px;
    background-color: #f5f5f7;
    color: #1d1d1f;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.albion-mini-cart:not(#_) .albion-mini-cart__account-link:hover {
    color: #1d1d1f;
    background-color: #ebebed;
    text-decoration: none;
}

.albion-mini-cart:not(#_) .albion-mini-cart__account-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #fff;
    color: #424245;
}

.albion-mini-cart:not(#_) .albion-mini-cart__account-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.albion-mini-cart:not(#_) .albion-mini-cart__account-label {
    min-width: 0;
}

.albion-mini-cart:not(#_) .albion-mini-cart__account-chevron {
    flex: none;
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: #86868b;
}

.albion-mini-cart:not(#_) .albion-mini-cart__dropdown--bare .albion-mini-cart__account-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 600px) {
    .albion-mini-cart:not(#_) .albion-mini-cart__account-links,
    .albion-mini-cart:not(#_) .albion-mini-cart__dropdown--bare .albion-mini-cart__account-links {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ── Store Locator Modal ─────────────────────────────────────── */

.albion-store-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.albion-store-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
}

.albion-store-modal__panel {
    position: relative;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    width: min(92%, 520px);
    max-height: 90vh;
    overflow-y: auto;
    padding: 36px;
    font-family: var(--albion-font);
    color: #1d1d1f;
}

.albion-store-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f0f0f2;
    color: #1d1d1f;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.albion-store-modal__title {
    font-size: 25px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    margin: 0 36px 8px 0;
}

.albion-store-modal__intro {
    color: #6e6e73;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 24px;
}

.albion-store-modal__message {
    color: #b42318;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 16px;
}

.albion-store-modal__body {
    margin-bottom: 24px;
}

.albion-store-modal__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.albion-store-modal__row {
    appearance: none;
    width: 100%;
    border: 1px solid #d2d2d7;
    border-radius: 16px;
    padding: 18px 20px;
    background: #fff;
    color: #1d1d1f;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.albion-store-modal__row:hover {
    border-color: #86868b;
}

.albion-store-modal__row--selected {
    border-color: #0071e3;
    box-shadow: 0 0 0 1px #0071e3;
}

.albion-store-modal__row:focus-visible,
.albion-store-modal__close:focus-visible,
.albion-store-modal__confirm:focus-visible,
.albion-store-modal__home:focus-visible {
    outline: 2px solid #0071e3;
    outline-offset: 3px;
}

.albion-store-modal__row-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.albion-store-modal__row-name {
    font-size: 16px;
    font-weight: 600;
}

.albion-store-modal__row-address,
.albion-store-modal__row-hours {
    display: block;
    font-size: 13px;
    color: #6e6e73;
    line-height: 1.45;
    white-space: pre-line;
}

/* Keep the chooser short: full hours show on the chosen store only */
.albion-store-modal__row .albion-store-modal__row-hours {
    display: none;
}

.albion-store-modal__row--selected .albion-store-modal__row-hours {
    display: block;
    margin-top: 6px;
}

.albion-store-modal__row-check {
    width: 20px;
    height: 20px;
    border: 1px solid #86868b;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
}

.albion-store-modal__row--selected .albion-store-modal__row-check {
    border: 6px solid #0071e3;
}

.albion-store-modal__confirm {
    display: block;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 980px;
    background: #0071e3;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.albion-store-modal__confirm:disabled {
    background: #d2d2d7;
    cursor: not-allowed;
}

.albion-store-modal__home {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 10px;
    border: 0;
    background: none;
    color: #0066cc;
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

.albion-store-modal__home:disabled,
.albion-pickup-summary__home:disabled {
    opacity: .5;
    cursor: wait;
}

/* ── Bag: delivery or collection ─────────────────────────────── */

.albion-fulfilment {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 24px;
    margin-bottom: 8px;
    border-bottom: 1px solid #d2d2d7;
    color: #1d1d1f;
}

.albion-fulfilment__title {
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
}

.albion-fulfilment__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.albion-fulfilment__option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
    border: 1px solid #d2d2d7;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.albion-fulfilment__option:hover {
    border-color: #86868b;
}

.albion-fulfilment__option:has(.albion-fulfilment__input:checked) {
    border-color: #0071e3;
    box-shadow: 0 0 0 1px #0071e3;
}

.albion-fulfilment__input {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: #0071e3;
}

.albion-fulfilment__input:focus-visible {
    outline: 2px solid #0071e3;
    outline-offset: 3px;
}

.albion-fulfilment__icon {
    flex-shrink: 0;
    color: #1d1d1f;
}

.albion-fulfilment__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.albion-fulfilment__label {
    font-size: 16px;
    font-weight: 600;
}

.albion-fulfilment__note {
    font-size: 13px;
    color: #6e6e73;
    line-height: 1.4;
}

.albion-fulfilment__store {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 16px;
    background: #f5f5f7;
}

.albion-fulfilment__store-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: #1d1d1f;
    flex-shrink: 0;
}

.albion-fulfilment__store-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.albion-fulfilment__store-name {
    font-size: 16px;
    font-weight: 600;
}

.albion-fulfilment__store-address {
    font-size: 13px;
    color: #6e6e73;
}

/* ── Collection card ─────────────────────────────────────────── */

.albion-pickup-summary {
    margin: 24px 0;
    border: 1px solid #d2d2d7;
    border-radius: 20px;
    background: #fff;
    color: #1d1d1f;
    overflow: hidden;
}

.albion-pickup-summary[hidden] {
    display: none;
}

.albion-pickup-summary p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.albion-pickup-summary__header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid #e8e8ed;
}

.albion-pickup-summary__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #e8f1fc;
    color: #0071e3;
    flex-shrink: 0;
}

.albion-pickup-summary__heading {
    flex: 1;
    min-width: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
}

.albion-pickup-summary__notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 20px 24px 0;
    padding: 18px 20px;
    border: 1px solid #cfe0f7;
    border-radius: 14px;
    background: #f0f6fe;
}

.albion-pickup-summary__notice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0071e3;
    color: #fff;
    flex-shrink: 0;
}

.albion-pickup-summary__notice-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.albion-pickup-summary .albion-pickup-summary__notice-title {
    font-size: 16px;
    font-weight: 600;
}

.albion-pickup-summary .albion-pickup-summary__message {
    color: #424245;
    white-space: pre-line;
}

.albion-pickup-summary__details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px;
    padding: 24px;
}

.albion-pickup-summary__detail {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.albion-pickup-summary__detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #f5f5f7;
    color: #1d1d1f;
    flex-shrink: 0;
}

.albion-pickup-summary__detail-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.albion-pickup-summary .albion-pickup-summary__detail-label {
    font-weight: 600;
}

.albion-pickup-summary .albion-pickup-summary__store {
    font-weight: 500;
}

.albion-pickup-summary .albion-pickup-summary__address,
.albion-pickup-summary .albion-pickup-summary__hours {
    color: #424245;
    white-space: pre-line;
}

.albion-pickup-summary__directions,
.albion-pickup-summary__phone {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 14px;
    color: #0066cc;
    text-decoration: none;
}

.albion-pickup-summary__phone {
    margin-top: 0;
    color: #1d1d1f;
}

.albion-pickup-summary__directions:hover,
.albion-pickup-summary__phone:hover {
    text-decoration: underline;
}

.albion-pickup-summary__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e8e8ed;
    background: #f5f5f7;
}

.albion-pickup-summary__footer-icon {
    display: flex;
    color: #1d1d1f;
    flex-shrink: 0;
}

.albion-pickup-summary .albion-pickup-summary__note {
    font-weight: 500;
    white-space: pre-line;
}

.albion-pickup-summary__actions {
    padding: 0 24px 20px;
}

.albion-pickup-summary .albion-pickup-summary__error {
    padding: 0 24px 16px;
    color: #b42318;
}

/* Change store appears in the card header and the bag's store bar */
.albion-pickup-summary__change {
    appearance: none;
    padding: 9px 16px;
    border: 1px solid #d2d2d7;
    border-radius: 980px;
    background: #fff;
    color: #0066cc;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
}

.albion-pickup-summary__change:hover {
    border-color: #86868b;
}

.albion-pickup-summary__home {
    appearance: none;
    padding: 0;
    border: 0;
    background: none;
    color: #0066cc;
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

.albion-pickup-summary__change:focus-visible,
.albion-pickup-summary__home:focus-visible,
.albion-pickup-summary__directions:focus-visible,
.albion-pickup-summary__phone:focus-visible {
    outline: 2px solid #0071e3;
    outline-offset: 3px;
}

/* ── Responsive ──────────────────────────────────────────────── */

/* Keep Elementor's sticky gallery inside its calculated column. Its sticky
   width can briefly be stale while images or variation slides are loading. */
[data-albion-variation-gallery="1"] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

@media (max-width: 768px) {
    [data-albion-variation-gallery="1"] .swiper {
        touch-action: pan-y;
    }

    [data-albion-variation-gallery="1"] .elementor-swiper-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .9);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    }

    [data-albion-variation-gallery="1"] .elementor-swiper-button-prev {
        left: 10px;
    }

    [data-albion-variation-gallery="1"] .elementor-swiper-button-next {
        right: 10px;
    }

    .albion-pdp-config:not(#_) .albion-config-native-swatches {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .albion-cart-wrap {
        margin-inline: 18px;
    }

    .albion-cart__pot {
        padding: 24px;
    }

    .albion-cart__pot-title {
        margin-bottom: 20px;
    }

    .albion-cart__pot-headline {
        font-size: 32px;
    }

    .albion-cart__item {
        flex-direction: column;
        gap: 18px;
        padding: 24px 0;
    }

    .albion-cart__item-image {
        width: 120px;
    }

    .albion-cart__item-heading {
        flex-wrap: wrap;
    }

    .albion-cart__item-row1 {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .albion-cart__item-name-qty {
        flex-wrap: wrap;
    }

    .albion-cart__item-right {
        align-items: flex-start;
    }

    .albion-cart__qty-select {
        min-height: 40px;
    }

    .albion-cart__item-delivery {
        flex-direction: column;
        gap: 16px;
    }

    .albion-cart__delivery-col + .albion-cart__delivery-col {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid #e0e0e0;
        padding-top: 16px;
    }

    .albion-cart__buttons {
        flex-direction: column;
    }

    .albion-mini-cart__dropdown {
        width: calc(100vw - 32px);
    }

    .albion-store-modal__panel {
        padding: 24px 20px;
    }

    .albion-fulfilment__options {
        grid-template-columns: minmax(0, 1fr);
    }

    .albion-fulfilment__store {
        flex-wrap: wrap;
    }

    .albion-pickup-summary__header,
    .albion-pickup-summary__details,
    .albion-pickup-summary__footer {
        padding-left: 18px;
        padding-right: 18px;
    }

    .albion-pickup-summary__notice {
        margin-left: 18px;
        margin-right: 18px;
    }
}

/* ── Product Page: Add to Cart + AppleCare+ ──────────────────── */

.albion-pdp-atc .single_add_to_cart_button.albion-pdp-atc--busy {
    opacity: 0.75;
    pointer-events: none;
}

/* `currentColor` so the spinner always matches whatever text colour is
   configured on the button, light or dark, without needing its own control. */
.albion-pdp-atc .single_add_to_cart_button.albion-pdp-atc--busy::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid rgba(128, 128, 128, 0.35);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: albion-atc-spin 0.6s linear infinite;
}

@keyframes albion-atc-spin {
    to { transform: rotate(360deg); }
}

.albion-pdp-atc--hide-qty .quantity {
    display: none !important;
}

.albion-pdp-atc--hide-clear .reset_variations {
    display: none !important;
}

.albion-pdp-atc--hide-price .woocommerce-variation-price,
.albion-pdp-atc--hide-price p.price {
    display: none !important;
}

.albion-pdp-atc--hide-stock .woocommerce-variation-availability,
.albion-pdp-atc--hide-stock .stock {
    display: none !important;
}

/* The Buy Summary block's own availability box (below) happens to reuse the
   bare class "stock" too — a deliberate 1:1 match of buy-block.css's own
   naming — which the broader ".albion-pdp-atc--hide-stock .stock" rule
   above would otherwise also catch and hide. --hide-stock is only ever
   meant to suppress WooCommerce's own stock paragraph, never this block, so
   it's re-shown here with higher selector specificity. */
.albion-pdp-atc--hide-stock .albion-pdp-buy .stock {
    display: block !important;
}

/* Disabled until a variation is picked — dims the whole card and blocks
   every interaction (including "Learn more", not just the already
   `disabled` radios) so nothing in it reads as clickable, selectable or
   draggable. `pointer-events: none` alone stops mouse clicks/drags
   (including right-click "save image"/"copy link" context menus) but NOT
   keyboard Tab+Enter activation of the link or a Ctrl+A/Ctrl+C text copy —
   those are handled separately (`user-select` here, `tabindex` via JS — see
   albion_init_pdp_applecare_variation_gate() in albion-checkout.js).
   Deliberately no `filter` here (grayscale was here originally) — `filter`
   on an ancestor creates a new containing block for any `position: fixed`
   descendant, which broke the info popup's full-viewport positioning
   whenever it rendered while its card happened to be in this disabled
   state (confirmed live: the popup got squeezed into the card's own small
   box instead of covering the screen). `opacity` alone doesn't have that
   side effect. */
.albion-pdp-applecare--disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
    user-select: none;
    -webkit-user-select: none;
}

/* Re-enable clicking the info popup (and the editor-only button that opens
   it) despite the disabled card's `pointer-events: none` above — the
   radios being natively `disabled` already prevents opening it through the
   normal flow, and the editor toggle is meant to work regardless of this
   state. Note this can't undo the ancestor's `opacity: 0.6` the same way
   (unlike pointer-events, CSS opacity isn't something a descendant can
   restore — it's baked into the parent's composited layer), so the popup
   will still render slightly dimmed in the rare case it's open while its
   card is also in this disabled state. */
.albion-pdp-applecare--disabled .albion-pdp-applecare-modal,
.albion-pdp-applecare--disabled .albion-pdp-applecare-modal__editor-toggle {
    pointer-events: auto;
}

/* ── AppleCare+ "Show Details Popup First" modal ─────────────────────────── */
/* Kept inside the widget's own wrapper deliberately — see the render-side
   comment in product-card-render-trait.php for why this isn't relocated to
   <body> the way the store-locator modal is.

   Values below are taken directly from Apple's own AppleCare overlay
   (apple.com/uk/shop/buy-iphone/…, inspected live via its computed styles —
   not estimated from the screenshot alone): white panel, 18px radius, NO
   box-shadow (Apple relies solely on the darker backdrop for contrast),
   rgba(0,0,0,0.48) backdrop, and a plain borderless "×" close button rather
   than a filled circle. Font stack matches Apple's own
   (SF Pro Display for headings / SF Pro Text for body, with the same
   system-font fallback chain so it still renders correctly off-Apple-device). */

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__editor-toggle {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    margin: 10px 0;
    padding: 8px 16px;
    border: 1px dashed #0071e3;
    border-radius: 8px;
    background: #f0f7ff;
    color: #0071e3;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: var(--albion-font);
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__panel {
    position: relative;
    background: #fff;
    border-radius: 18px;
    box-shadow: none;
    width: 92%;
    max-width: 620px;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 52px 48px 36px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: left;
    color: #1d1d1f;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal .albion-pdp-applecare-modal__close {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: 20px;
    right: 20px;
    /* Always a 36px circle: themes give buttons padding, minimum sizes and
       flex rules that would otherwise stretch it into an oval. */
    box-sizing: border-box;
    flex: none;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: #f5f5f7;
    color: #1d1d1f;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal .albion-pdp-applecare-modal__close svg,
.albion-pdp-config:not(#_) .albion-pdp-applecare-modal .albion-pdp-applecare-modal__close i {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    fill: currentColor;
}

@media (max-width: 600px) {
    .albion-pdp-config:not(#_) .albion-pdp-applecare-modal__panel {
        padding: 56px 20px 24px;
        gap: 20px;
    }
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 40px; /* clear of the close button */
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__title {
    margin: 0;
    color: #1d1d1f;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__title span {
    display: block;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__footnote {
    margin: 0;
    color: #6e6e73;
    font-size: 16px;
    line-height: 1.45;
}

@media (max-width: 600px) {
    .albion-pdp-config:not(#_) .albion-pdp-applecare-modal__title {
        font-size: 26px;
    }
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__plans {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__plan {
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    margin: 0;
    padding: 18px 20px;
    border: 1px solid #d2d2d7;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    font-weight: 400;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__plan.is-selected {
    border-color: var(--albion-plan-selected, #0066cc);
    box-shadow: inset 0 0 0 1px var(--albion-plan-selected, #0066cc);
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__plan-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal .albion-pdp-applecare-modal__radio {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    padding: 0;
    accent-color: var(--albion-plan-selected, #0066cc);
    cursor: pointer;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__plan-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__plan-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__plan-name {
    min-width: 0;
    color: #1d1d1f;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__price {
    flex: none;
    margin: 0;
    color: #1d1d1f;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    text-align: right;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__price del {
    margin-right: 4px;
    color: #6e6e73;
    font-weight: 400;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__price ins {
    text-decoration: none;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__price-note {
    display: block;
    color: #6e6e73;
    font-size: 12px;
    font-weight: 400;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__plan-summary {
    color: #6e6e73;
    font-size: 14px;
    line-height: 1.4;
}

/* Features only show for the selected plan. */
.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__features {
    display: none;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 0 34px;
    padding: 14px 0 0;
    border-top: 1px solid #e6e6e8;
    color: #1d1d1f;
    font-size: 14px;
    line-height: 1.4;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__plan.is-selected .albion-pdp-applecare-modal__features {
    display: flex;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__feature {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__feature .albion-icon {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: #248a3d;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__body {
    font-size: 14px;
    line-height: 1.42859;
    color: #1d1d1f;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__body p {
    margin: 0 0 12px;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__body p:last-child {
    margin-bottom: 0;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__body a {
    color: #0066cc;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal .albion-pdp-applecare-modal__add {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 12px 24px;
    border: none;
    border-radius: 14px;
    background: var(--albion-config-accent, #0066cc);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-transform: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal .albion-pdp-applecare-modal__add:hover {
    filter: brightness(1.06);
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__legal {
    margin: 0;
    color: #6e6e73;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__legal p {
    margin: 0 0 8px;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__legal p:last-child {
    margin-bottom: 0;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__legal a {
    color: #0066cc;
}

/* Learn more link under the intro, and the documents list under the plans. */
.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__learn {
    align-self: stretch;
    color: #0066cc;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__learn:hover,
.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__doc:hover .albion-pdp-applecare-modal__doc-text {
    text-decoration: underline;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__docs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__docs-heading {
    margin: 0;
    color: #6e6e73;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__docs-list {
    display: grid;
    overflow: hidden;
    border: 1px solid #d2d2d7;
    border-radius: 14px;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__doc {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    color: #1d1d1f;
    text-decoration: none;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__doc + .albion-pdp-applecare-modal__doc {
    border-top: 1px solid #e5e5ea;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__doc:hover {
    background: #f5f5f7;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__doc-badge {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 38px;
    border-radius: 6px;
    background: #fdecea;
    color: #c5221f;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__doc-text {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__doc-text small {
    display: block;
    color: #6e6e73;
    font-size: 12px;
    font-weight: 400;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__doc-arrow {
    flex: none;
    font-size: 13px;
    opacity: 0.7;
}

body.albion-pdp-applecare-modal-open {
    overflow: hidden;
}

/* ── Product Page: Sequential Attribute Selection ────────────────────────── */
/* `pointer-events: none` is what actually blocks a click — Super Product
   Swatches' own swatch buttons have their own click handling that doesn't
   consult the underlying (also disabled, see
   albion_init_pdp_progressive_attributes()) `<select>`'s state. */

.albion-pdp-atc--progressive .albion-attr-row--locked {
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.albion-pdp-applecare--progressive-locked {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
    user-select: none;
    -webkit-user-select: none;
}

/* ── Product Add to Cart Card ─────────────────────────────────────────── */
/* WooCommerce selects remain the source of truth; the card draws its own
   option buttons so plugin swatch geometry cannot distort the layout.
   Colours and radii come from the variables below, which the widget's
   Style tab overrides per card.

   Every card rule starts with `.albion-pdp-config:not(#_)`. No element has
   the id "_", so `:not(#_)` always matches but counts as an id, which lifts
   the card above theme, WooCommerce and Elementor Kit rules such as
   `.woocommerce div.product form.cart .button` or `button:hover`. The
   widget's Style controls use the same prefix, so they still win. */
.albion-pdp-config:not(#_) {
    --albion-config-bg: #fff;
    --albion-config-panel: #f5f5f7;
    --albion-config-ink: #1d1d1f;
    --albion-config-soft: #6e6e73;
    --albion-config-line: #e6e6e8;
    --albion-config-line-hover: color-mix(in srgb, var(--albion-config-line), var(--albion-config-ink) 25%);
    --albion-config-accent: #0071e3;
    --albion-config-ok: #008009;
    --albion-config-wait: #b64400;
    --albion-config-stop: #b42318;
    --albion-config-radius: 22px;
    --albion-config-radius-inner: 14px;
    box-sizing: border-box;
    overflow: hidden;
    font-family: var(--albion-font);
    /* Set here so text without its own line height never takes the theme's. */
    line-height: 1.4;
    color: var(--albion-config-ink);
    background: var(--albion-config-bg);
    border: 1px solid var(--albion-config-line);
    border-radius: var(--albion-config-radius);
    position: relative;
    z-index: 100;
    -webkit-font-smoothing: antialiased;
}

.albion-pdp-config:not(#_) *,
.albion-pdp-config:not(#_) *::before,
.albion-pdp-config:not(#_) *::after {
    box-sizing: border-box;
}

/* Theme isolation. Themes style bare elements (and their :hover/:focus);
   these reset whatever the card's own rules below don't set, so nothing
   leaks in. The card's class rules are more specific and win over these. */
.albion-pdp-config:not(#_) h2,
.albion-pdp-config:not(#_) h3,
.albion-pdp-config:not(#_) p,
.albion-pdp-config:not(#_) a,
.albion-pdp-config:not(#_) label,
.albion-pdp-config:not(#_) strong,
.albion-pdp-config:not(#_) b,
.albion-pdp-config:not(#_) li,
.albion-pdp-config:not(#_) button {
    font-family: inherit;
    text-transform: none;
    text-shadow: none;
}

.albion-pdp-config:not(#_) h2,
.albion-pdp-config:not(#_) h3 {
    padding: 0;
    border: 0;
    background: none;
}

.albion-pdp-config:not(#_) label {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* One rule covers every state: its id-level prefix already beats theme
   `button:hover` rules, and adding :hover here would out-rank the card's
   own button rules only while hovering, shifting their layout. */
.albion-pdp-config:not(#_) button {
    float: none;
    white-space: normal;
    min-width: 0;
    height: auto;
    letter-spacing: normal;
    line-height: 1.3;
    text-decoration: none;
    background-image: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
}

.albion-pdp-config:not(#_) .stock_list li,
.albion-pdp-config:not(#_) .albion-config-timeline__step {
    margin: 0;
    list-style: none;
}

.albion-pdp-config:not(#_) .stock_list li::before,
.albion-pdp-config:not(#_) .stock_list li::marker,
.albion-pdp-config:not(#_) .albion-config-timeline__step::before {
    content: none;
}

/* Header */
.albion-pdp-config:not(#_) .albion-pdp-config__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 28px 28px 24px;
    border-bottom: 1px solid var(--albion-config-line);
}

.albion-pdp-config:not(#_) .albion-pdp-config__title {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--albion-config-ink);
}

.albion-pdp-config:not(#_) .albion-pdp-config__title-row {
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.albion-pdp-config:not(#_) .albion-stock-key__trigger {
    appearance: none;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px 0;
    border: 0;
    background: transparent;
    color: var(--albion-config-accent);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.albion-pdp-config:not(#_) .albion-stock-key__trigger:hover {
    text-decoration: underline;
}

.albion-pdp-config:not(#_) .albion-stock-key__trigger:focus-visible,
.albion-pdp-config:not(#_) .albion-stock-key__close:focus-visible {
    outline: 2px solid var(--albion-config-accent);
    outline-offset: 3px;
}

.albion-pdp-config:not(#_) .albion-stock-key {
    width: min(520px, calc(100% - 32px));
    max-width: 520px;
    max-height: calc(100vh - 32px);
    margin: auto;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    color: #1d1d1f;
}

.albion-pdp-config:not(#_) .albion-stock-key::backdrop {
    background: rgba(0, 0, 0, .48);
}

.albion-pdp-config:not(#_) .albion-stock-key__panel {
    position: relative;
    padding: 38px;
    overflow-y: auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: none;
}

.albion-pdp-config:not(#_) .albion-stock-key__close {
    appearance: none;
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin: 0;
    padding: 0;
    background: #f5f5f7;
    border: 0;
    border-radius: 50%;
    color: #1d1d1f;
    cursor: pointer;
}

.albion-pdp-config:not(#_) .albion-stock-key__title {
    margin: 0;
    padding-right: 44px;
    color: #1d1d1f;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.albion-pdp-config:not(#_) .albion-stock-key__intro {
    margin: 10px 0 0;
    color: #6e6e73;
    font-size: 14px;
    line-height: 1.5;
}

.albion-pdp-config:not(#_) .albion-stock-key__items {
    display: grid;
    gap: 0;
    margin-top: 24px;
}

.albion-pdp-config:not(#_) .albion-stock-key__item {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 0;
    border-top: 1px solid #e6e6e8;
}

.albion-pdp-config:not(#_) .albion-stock-key__dot {
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: 50%;
    background: currentColor;
}

.albion-pdp-config:not(#_) .albion-stock-key__dot.is-ok { color: var(--albion-config-ok); }
.albion-pdp-config:not(#_) .albion-stock-key__dot.is-wait { color: var(--albion-config-wait); }
.albion-pdp-config:not(#_) .albion-stock-key__dot.is-stop { color: var(--albion-config-stop); }

.albion-pdp-config:not(#_) .albion-stock-key__item h3 {
    margin: 0;
    color: #1d1d1f;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.albion-pdp-config:not(#_) .albion-stock-key__item p {
    margin: 3px 0 0;
    color: #6e6e73;
    font-size: 14px;
    line-height: 1.45;
}

.albion-pdp-config:not(#_) .albion-pdp-config__description {
    flex: 0 0 100%;
    min-width: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--albion-config-soft);
}

.albion-pdp-config:not(#_) .albion-pdp-config__description p {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.albion-pdp-config:not(#_) .albion-pdp-config__description > :first-child {
    margin-top: 0;
}

.albion-pdp-config:not(#_) .albion-pdp-config__description > :last-child {
    margin-bottom: 0;
}

/* WooCommerce form reset */
.albion-pdp-config:not(#_) .albion-pdp-atc,
.albion-pdp-config:not(#_) .albion-pdp-atc form.cart,
.albion-pdp-config:not(#_) table.variations,
.albion-pdp-config:not(#_) table.variations tbody {
    display: block !important;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.albion-pdp-config:not(#_) table.variations {
    border: 0;
    border-collapse: collapse;
}

.albion-pdp-config:not(#_) .single_variation_wrap,
.albion-pdp-config:not(#_) .woocommerce-variation-add-to-cart {
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

/* Sections: one per variation attribute, AppleCare+ and Essentials.
   WooCommerce's rows get the same spacing before the script tags them. */
.albion-pdp-config:not(#_) .albion-config-part,
.albion-pdp-config:not(#_) table.variations tr,
.albion-pdp-config:not(#_) .albion-config-care-part {
    display: block;
    width: auto;
    margin: 0 !important;
    padding: 22px 28px;
    border: 0;
    border-top: 1px solid var(--albion-config-line);
    background: transparent;
}

.albion-pdp-config:not(#_) table.variations .albion-config-part:first-child,
.albion-pdp-config:not(#_) table.variations tr:first-child {
    border-top: 0;
}

.albion-pdp-config:not(#_) form.cart:not(.variations_form) > .albion-config-care-part {
    border-top: 0;
}

.albion-pdp-config:not(#_) form.cart:not(.variations_form) > .albion-config-care-part ~ .albion-config-care-part {
    border-top: 1px solid var(--albion-config-line);
}

.albion-pdp-config:not(#_) .albion-config-part th,
.albion-pdp-config:not(#_) .albion-config-part td,
.albion-pdp-config:not(#_) table.variations tr > th,
.albion-pdp-config:not(#_) table.variations tr > td {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 0 !important;
    border: 0;
    text-align: left;
    background: transparent;
}

.albion-pdp-config:not(#_) .albion-config-part th.label,
.albion-pdp-config:not(#_) table.variations tr > th.label {
    margin-bottom: 14px;
}

/* Until the card's script has drawn its own option buttons, WooCommerce's
   (and swatch plugins') controls stay hidden behind a placeholder, so the
   old style never flashes. If the script never runs (blocked or broken),
   they appear after 4 seconds so customers can still choose and buy. */
.albion-pdp-config:not(.albion-config-ready):not(#_) table.variations tr > th.label > *,
.albion-pdp-config:not(.albion-config-ready):not(#_) table.variations tr > td.value > * {
    visibility: hidden;
    animation: albion-config-reveal 0s linear 4s forwards;
}

.albion-pdp-config:not(.albion-config-ready):not(#_) table.variations tr > th.label {
    min-height: 20px;
    width: 30%;
    border-radius: 6px;
    background: var(--albion-config-panel);
    animation: albion-config-placeholder 0s linear 4s forwards;
}

.albion-pdp-config:not(.albion-config-ready):not(#_) table.variations tr > td.value {
    min-height: 86px;
    border-radius: var(--albion-config-radius-inner);
    background: var(--albion-config-panel);
    animation: albion-config-placeholder 0s linear 4s forwards;
}

@keyframes albion-config-reveal {
    to { visibility: visible; }
}

@keyframes albion-config-placeholder {
    to { min-height: 0; width: 100%; background: transparent; }
}

.albion-pdp-config.albion-config-ready:not(#_) .albion-config-part th.label > label,
.albion-pdp-config.albion-config-ready:not(#_) table.variations select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.albion-pdp-config.albion-config-ready:not(#_) .albion-config-part .sps-swatches {
    display: none !important;
}

.albion-pdp-config:not(#_) .albion-config-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--albion-config-ink);
}

.albion-pdp-config:not(#_) .albion-config-label__value {
    font-weight: 400;
    color: var(--albion-config-soft);
}

/* Content → Variations → Show Selected Option Name switched off. */
.albion-pdp-config--hide-selected:not(#_) .albion-config-label__value {
    display: none;
}

/* Two-tone section headings: "AppleCare+ coverage. Protect your new iPhone." */
.albion-pdp-config:not(#_) .albion-config-section-head {
    margin: 0 0 14px;
    font-family: inherit;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--albion-config-ink);
}

.albion-pdp-config:not(#_) .albion-config-section-head__subtitle {
    color: var(--albion-config-soft);
}

/* Stock colours shared by colour cards, option badges and Essentials. */
.albion-pdp-config:not(#_) .albion-config-stock.is-ok { color: var(--albion-config-ok); }
.albion-pdp-config:not(#_) .albion-config-stock.is-wait { color: var(--albion-config-wait); }
.albion-pdp-config:not(#_) .albion-config-stock.is-stop { color: var(--albion-config-stop); }
.albion-pdp-config:not(#_) .albion-config-essential__meta .albion-config-stock { font-weight: 600; }
.albion-pdp-config:not(#_) .albion-config-native-swatches button[hidden],
.albion-pdp-config:not(#_) .albion-config-native-tiles button[hidden] { display: none !important; }

/* WooCommerce price markup picks up theme sizes and colours; inherit instead. */
.albion-pdp-config:not(#_) .albion-config-native-tile__price .price,
.albion-pdp-config:not(#_) .albion-config-native-tile__price .woocommerce-Price-amount,
.albion-pdp-config:not(#_) .albion-config-native-tile__price bdi,
.albion-pdp-config:not(#_) .albion-config-care-price .woocommerce-Price-amount,
.albion-pdp-config:not(#_) .albion-config-care-price bdi,
.albion-pdp-config:not(#_) .albion-pdp-buy .price_now .price,
.albion-pdp-config:not(#_) .albion-pdp-buy .price_now .woocommerce-Price-amount,
.albion-pdp-config:not(#_) .albion-pdp-buy .price_now bdi,
.albion-pdp-config:not(#_) .albion-pdp-buy .price_month .price,
.albion-pdp-config:not(#_) .albion-pdp-buy .price_month .woocommerce-Price-amount,
.albion-pdp-config:not(#_) .albion-pdp-buy .price_month bdi,
.albion-pdp-config:not(#_) .albion-pdp-buy .price_was .price,
.albion-pdp-config:not(#_) .albion-pdp-buy .price_was .woocommerce-Price-amount,
.albion-pdp-config:not(#_) .albion-pdp-buy .price_was bdi,
.albion-pdp-config:not(#_) .albion-pdp-buy .price_was .woocommerce-Price-currencySymbol,
.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__price .woocommerce-Price-amount,
.albion-pdp-config:not(#_) .albion-pdp-applecare-modal__price bdi {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

/* Colour cards: swatch, name and stock in one button. */
.albion-pdp-config:not(#_) .albion-config-native-swatches {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin: 0;
}

.albion-pdp-config:not(#_) .albion-config-colour-card {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 12px 6px 10px;
    font: inherit;
    line-height: 1.3;
    text-align: center;
    color: var(--albion-config-ink);
    background: var(--albion-config-bg);
    border: 1px solid var(--albion-config-line);
    border-radius: var(--albion-config-radius-inner);
    box-shadow: none;
    cursor: pointer;
}

.albion-pdp-config:not(#_) .albion-config-colour-card__dot {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}

.albion-pdp-config:not(#_) .albion-config-colour-card:disabled .albion-config-colour-card__dot {
    opacity: .5;
}

.albion-pdp-config:not(#_) .albion-config-colour-card__name {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.albion-pdp-config:not(#_) .albion-config-colour-card__stock {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.albion-pdp-config:not(#_) .albion-config-colour-card__stock:empty {
    display: none;
}

/* Option cards: name and stock badge on top, price, then the stock line. */
.albion-pdp-config:not(#_) .albion-config-native-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
}

.albion-pdp-config:not(#_) .albion-config-native-tile {
    appearance: none;
    display: grid;
    /* One column that can never grow past the card, however long a line is. */
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: start;
    justify-self: stretch;
    gap: 4px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 16px 16px 14px;
    font: inherit;
    line-height: 1.3;
    text-align: left;
    color: var(--albion-config-ink);
    background: var(--albion-config-bg);
    border: 1px solid var(--albion-config-line);
    border-radius: var(--albion-config-radius-inner);
    box-shadow: none;
    cursor: pointer;
    overflow-wrap: anywhere;
}

/* Shared option states. */
.albion-pdp-config:not(#_) .albion-config-colour-card:hover,
.albion-pdp-config:not(#_) .albion-config-native-tile:hover {
    border-color: var(--albion-config-line-hover);
}

.albion-pdp-config:not(#_) .albion-config-colour-card.is-active,
.albion-pdp-config:not(#_) .albion-config-native-tile.is-active {
    border-color: var(--albion-config-accent);
    box-shadow: inset 0 0 0 1px var(--albion-config-accent);
}

.albion-pdp-config:not(#_) .albion-config-colour-card:focus-visible,
.albion-pdp-config:not(#_) .albion-config-native-tile:focus-visible {
    outline: 2px solid var(--albion-config-accent);
    outline-offset: 3px;
}

.albion-pdp-config:not(#_) .albion-config-colour-card:disabled,
.albion-pdp-config:not(#_) .albion-config-native-tile:disabled {
    color: var(--albion-config-soft);
    background: var(--albion-config-panel);
    border-color: var(--albion-config-line);
    cursor: not-allowed;
}

.albion-pdp-config:not(#_) .albion-config-native-tile:disabled {
    border-style: dashed;
}

.albion-pdp-config:not(#_) .albion-config-colour-card:disabled:has(.albion-config-stock.is-stop),
.albion-pdp-config:not(#_) .albion-config-native-tile:disabled:has(.albion-config-stock.is-stop) {
    color: var(--albion-config-ink);
    opacity: 0.5;
    background: color-mix(in srgb, var(--albion-config-stop) 5%, var(--albion-config-bg));
    border-color: color-mix(in srgb, var(--albion-config-stop) 38%, var(--albion-config-line));
}

.albion-pdp-config:not(#_) .albion-config-native-tile:disabled:has(.albion-config-stock.is-stop) .albion-config-native-tile__name {
    color: var(--albion-config-ink);
}

.albion-pdp-config:not(#_) .albion-config-native-tile__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
    width: 100%;
}

.albion-pdp-config:not(#_) .albion-config-native-tile__name {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.albion-pdp-config:not(#_) .albion-config-native-tile__badge {
    justify-self: end;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    background: color-mix(in srgb, currentColor 12%, transparent);
    border-radius: 10px;
}

.albion-pdp-config:not(#_) .albion-config-native-tile__badge:empty {
    display: none;
}

.albion-pdp-config--hide-stock-badges:not(#_) .albion-config-colour-card__stock,
.albion-pdp-config--hide-stock-badges:not(#_) .albion-config-native-tile__badge {
    display: none;
}

.albion-pdp-config--hide-constraint-stock-badges:not(#_) .albion-config-native-tile__badge.is-wait,
.albion-pdp-config--hide-constraint-stock-badges:not(#_) .albion-config-native-tile__badge.is-stop,
.albion-pdp-config--hide-constraint-stock-badges:not(#_) .albion-config-colour-card__stock.is-wait,
.albion-pdp-config--hide-constraint-stock-badges:not(#_) .albion-config-colour-card__stock.is-stop {
    display: none;
}

.albion-pdp-config:not(#_) .albion-config-native-tile__price {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    color: var(--albion-config-soft);
}

.albion-pdp-config:not(#_) .albion-config-native-tile__stock {
    display: block;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    color: var(--albion-config-ok);
}

.albion-pdp-config--hide-stock-messages:not(#_) .albion-config-native-tile__stock {
    display: none;
}

.albion-pdp-config:not(#_) .albion-config-native-tile__stock.is-wait { color: var(--albion-config-wait); }

/* Pre-order products: Coming soon is purple, an open Pre-order is amber (shared by badges, option lines and the section). */
.albion-pdp-config:not(#_) {
    --albion-config-soon: #6d3fd9;
}
.albion-pdp-config:not(#_) .albion-config-stock.is-soon,
.albion-pdp-config:not(#_) .albion-config-native-tile__stock.is-soon { color: var(--albion-config-soon); }
.albion-pdp-config:not(#_) .albion-config-stock.is-pre,
.albion-pdp-config:not(#_) .albion-config-native-tile__stock.is-pre { color: var(--albion-config-wait); }

.albion-pdp-config:not(#_) .albion-config-preorder__line {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}
.albion-pdp-config:not(#_) .albion-config-fulfil__row--preorder.is-soon .albion-config-preorder__line { color: var(--albion-config-soon); }
.albion-pdp-config:not(#_) .albion-config-fulfil__row--preorder.is-pre .albion-config-preorder__line { color: var(--albion-config-wait); }
.albion-pdp-config:not(#_) .albion-config-preorder__info {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--albion-config-soft);
}

/* Coming soon can't be bought, so the button and quantity are removed rather than disabled. */
.albion-pdp-config--preorder-before:not(#_) .single_add_to_cart_button,
.albion-pdp-config--preorder-before:not(#_) .quantity {
    display: none !important;
}
.albion-pdp-config:not(#_) .albion-config-native-tile__stock.is-stop { color: var(--albion-config-stop); }

/* AppleCare+: two stacked choices. Picking AppleCare+ still opens the popup first. */
.albion-pdp-config:not(#_) .albion-pdp-applecare {
    margin: 0;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare__content-inner {
    display: grid;
    gap: 10px;
}

.albion-pdp-config:not(#_) .albion-config-choice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    padding: 18px 20px;
    background: var(--albion-config-bg);
    border: 1px solid var(--albion-config-line);
    border-radius: var(--albion-config-radius-inner);
    cursor: pointer;
}

.albion-pdp-config:not(#_) .albion-config-choice:hover {
    border-color: var(--albion-config-line-hover);
}

.albion-pdp-config:not(#_) .albion-config-choice__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    opacity: 0;
}

.albion-pdp-config:not(#_) .albion-config-choice:has(.albion-config-choice__input:focus-visible) {
    outline: 2px solid var(--albion-config-accent);
    outline-offset: 3px;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare--is-yes .albion-config-choice--care,
.albion-pdp-config:not(#_) .albion-pdp-applecare:not(.albion-pdp-applecare--is-yes) .albion-config-choice--none {
    border-color: var(--albion-config-accent);
    box-shadow: inset 0 0 0 1px var(--albion-config-accent);
}

.albion-pdp-config:not(#_) .albion-pdp-applecare__image {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.albion-pdp-config:not(#_) .albion-config-choice__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.albion-pdp-config:not(#_) .albion-config-choice__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare__title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--albion-config-ink);
}

.albion-pdp-config:not(#_) .albion-config-choice__none {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--albion-config-ink);
}

.albion-pdp-config:not(#_) .albion-config-care-price {
    font-size: 17px;
    font-weight: 400;
    white-space: nowrap;
    color: var(--albion-config-ink);
}

.albion-pdp-config:not(#_) .albion-pdp-applecare__description {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--albion-config-soft);
}

.albion-pdp-config:not(#_) .albion-pdp-applecare__learn {
    align-self: flex-start;
    margin: 0;
    font-size: 14px;
    color: var(--albion-config-accent);
    text-decoration: none;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare__learn:hover {
    text-decoration: underline;
}

/* Essentials: one bordered list with an Add button per product. */
.albion-pdp-config:not(#_) .albion-config-essentials__intro {
    margin: -4px 0 14px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--albion-config-soft);
}

.albion-pdp-config:not(#_) .albion-config-essentials__list {
    overflow: hidden;
    border: 1px solid var(--albion-config-line);
    border-radius: var(--albion-config-radius-inner);
}

.albion-pdp-config:not(#_) .albion-config-essential {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 14px 18px;
}

.albion-pdp-config:not(#_) .albion-config-essential + .albion-config-essential {
    border-top: 1px solid var(--albion-config-line);
}

.albion-pdp-config:not(#_) .albion-config-essential .albion-pdp-applecare__image {
    width: 52px;
    height: 52px;
    background: var(--albion-config-panel);
    border-radius: 10px;
}

.albion-pdp-config:not(#_) .albion-config-essential__copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.albion-pdp-config:not(#_) .albion-config-essential .albion-pdp-applecare__title {
    font-size: 15px;
}

.albion-pdp-config:not(#_) .albion-config-essential__meta,
.albion-pdp-config:not(#_) .albion-config-essential .albion-pdp-applecare__description,
.albion-pdp-config:not(#_) .albion-config-essential__meta .albion-config-care-price {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--albion-config-soft);
}

.albion-pdp-config:not(#_) .albion-config-essential .albion-pdp-applecare__learn {
    font-size: inherit;
}

.albion-pdp-config:not(#_) .albion-config-essential__button {
    position: relative;
    flex: none;
    margin: 0;
    cursor: pointer;
}

.albion-pdp-config:not(#_) .albion-config-essential__button input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.albion-pdp-config:not(#_) .albion-config-essential__button span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    font-size: 14px;
    white-space: nowrap;
    color: var(--albion-config-accent);
    background: var(--albion-config-bg);
    border: 1px solid var(--albion-config-accent);
    border-radius: 18px;
}

.albion-pdp-config:not(#_) .albion-config-essential__button input:focus-visible + span {
    outline: 2px solid var(--albion-config-accent);
    outline-offset: 2px;
}

.albion-pdp-config:not(#_) .albion-config-essential__button--added span {
    color: #fff;
    background: var(--albion-config-accent);
}

.albion-pdp-config:not(#_) .albion-config-essential__button--added,
.albion-pdp-config:not(#_) .albion-pdp-applecare--is-yes .albion-config-essential__button--add {
    display: none;
}

.albion-pdp-config:not(#_) .albion-pdp-applecare--is-yes .albion-config-essential__button--added {
    display: block;
}

/* Footer: pricing, delivery and the Add to Cart button. */
.albion-pdp-config:not(#_) .albion-config-foot {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 28px;
    background: var(--albion-config-panel);
    border-top: 1px solid var(--albion-config-line);
}

.albion-pdp-config:not(#_) form.cart:not(.variations_form):not(:has(> .albion-config-care-part)) > .albion-config-foot {
    border-top: 0;
}

.albion-pdp-config:not(#_) .albion-pdp-buy {
    display: grid;
    gap: 20px;
    color: var(--albion-config-ink);
}

/* Pricing. One-time first: note, price, saving, then the monthly line under
   a divider. Monthly first: note, monthly amount and terms, then paying in
   full in a row under a divider. */
.albion-pdp-config:not(#_) .albion-pdp-buy__price {
    display: block;
    min-width: 0;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_label {
    margin: 0 0 4px;
    overflow: hidden;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--albion-config-soft);
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_now {
    margin: 0;
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.6px;
    font-variant-numeric: tabular-nums;
}

/* On sale: WooCommerce prints the old price in <del> and the sale price in
   <ins>. The sale price keeps the normal price's look (themes underline
   <ins>); the old price follows it, smaller and struck through. Sizes are
   in em so the Style tab's Price typography scales both. */
.albion-pdp-config:not(#_) .albion-pdp-buy .price_now,
.albion-pdp-config:not(#_) .albion-pdp-buy .price_now .price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .3em;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_now ins {
    order: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: none;
    background: none;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_now del {
    order: 1;
    font-size: .47em;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--albion-config-soft);
    text-decoration: line-through;
    opacity: 1;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_now .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* The saving replaces WooCommerce's own struck-out price. */
.albion-pdp-config:not(#_) .albion-pdp-buy__price:has(.price_was:not(:empty)) .price_now del {
    display: none;
}

/* The saving badge sits at the right of the price note. */
.albion-pdp-config:not(#_) .albion-pdp-buy .price_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 4px;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_top .price_label {
    min-width: 0;
    margin: 0;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_top .price_pill {
    flex: none;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_save {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.3;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_save[hidden],
.albion-pdp-config:not(#_) .albion-pdp-buy .price_was:empty,
.albion-pdp-config:not(#_) .albion-pdp-buy .price_pill:empty {
    display: none;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_was {
    font-size: 14px;
    font-weight: 400;
    color: var(--albion-config-soft);
    text-decoration: line-through;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_pill {
    display: inline-block;
    padding: 3px 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: #1f7a3d;
    background: #e8f5ec;
    border-radius: 999px;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_month {
    margin: 16px 0 0;
    padding-top: 16px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--albion-config-soft);
    border-top: 1px solid var(--albion-config-line, #e5e5ea);
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_month:empty {
    display: none;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_month b {
    font-size: 16px;
    font-weight: 600;
    color: var(--albion-config-ink);
}

/* Split monthly lines carry no divider of their own. */
.albion-pdp-config:not(#_) .albion-pdp-buy .price_month--amount,
.albion-pdp-config:not(#_) .albion-pdp-buy .price_month--terms,
.albion-pdp-config:not(#_) .albion-pdp-buy .price_month--row {
    padding: 0;
    border: 0;
}

/* One-time first: "Or pay monthly" row, styled like monthly first's pay-in-full row. */
.albion-pdp-config:not(#_) .albion-pdp-buy .price_alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--albion-config-line, #e5e5ea);
}

.albion-pdp-config:not(#_) .albion-pdp-buy__price[data-has-monthly="no"] .price_alt {
    display: none;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_alt__copy {
    min-width: 0;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_alt__label {
    display: block;
    font-size: 14px;
    color: var(--albion-config-soft);
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_alt .price_month--terms {
    margin: 2px 0 0;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_month--row {
    flex: none;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--albion-config-ink);
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_month--row small {
    font-size: .78em;
    font-weight: 600;
    color: var(--albion-config-soft);
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_month--amount {
    margin: 0;
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.6px;
    font-variant-numeric: tabular-nums;
    color: var(--albion-config-ink);
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_month--amount small {
    font-size: .47em;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--albion-config-soft);
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_month--terms {
    margin: 6px 0 0;
    font-size: 14px;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_month.price_month--terms .link {
    display: inline;
    margin-left: .35em;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_full {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 16px 0 0;
    padding-top: 16px;
    font-size: 14px;
    color: var(--albion-config-soft);
    border-top: 1px solid var(--albion-config-line, #e5e5ea);
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_full .price_save {
    display: inline-flex;
    margin: 0;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .price_full .price_now {
    margin-left: auto;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--albion-config-ink);
}

/* Monthly first without a monthly price yet (no option chosen, or none
   set): paying in full takes over as the main price. */
.albion-pdp-config:not(#_) .albion-pdp-buy__price--monthly[data-has-monthly="no"] .price_label,
.albion-pdp-config:not(#_) .albion-pdp-buy__price--monthly[data-has-monthly="no"] .price_full__label {
    display: none;
}

.albion-pdp-config:not(#_) .albion-pdp-buy__price--monthly[data-has-monthly="no"] .price_full {
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    border: 0;
}

.albion-pdp-config:not(#_) .albion-pdp-buy__price--monthly[data-has-monthly="no"] .price_full .price_now {
    order: -1;
    margin: 0 0 4px;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -.6px;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .link {
    font: inherit;
    color: var(--albion-config-accent);
    text-decoration: none;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .link:hover {
    text-decoration: underline;
}

/* Inline finance link drops onto its own line under the monthly text. */
.albion-pdp-config:not(#_) .albion-pdp-buy .price_month .link {
    display: block;
}

/* Finance link under the Add to Bag button. */
.albion-pdp-config:not(#_) .albion-finance-trigger {
    margin: 12px 0 0;
    font-size: 14px;
    text-align: center;
}

.albion-pdp-config:not(#_) .albion-finance-trigger[hidden] {
    display: none;
}

.albion-pdp-config:not(#_) .albion-finance-trigger .link {
    color: var(--albion-config-accent, #0066cc);
    text-decoration: none;
}

.albion-pdp-config:not(#_) .albion-finance-trigger .link:hover {
    text-decoration: underline;
}

/* Delivery and pickup rows in one card, with the optional timeline on top. */
.albion-pdp-config:not(#_) .albion-config-fulfil,
.albion-pdp-config:not(#_) .albion-config-fulfil-empty {
    background: var(--albion-config-bg);
    border-radius: 12px;
}

.albion-pdp-config:not(#_) .albion-config-fulfil {
    padding: 0 20px;
}

.albion-pdp-config:not(#_) .albion-config-fulfil > * + * {
    border-top: 1px solid var(--albion-config-line);
}

.albion-pdp-config:not(#_) .albion-config-configuration {
    padding: 20px 0;
}

.albion-pdp-config:not(#_) .albion-config-configuration__title {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 0 0 8px;
    color: var(--albion-config-ink);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}

.albion-pdp-config:not(#_) .albion-config-configuration__count {
    color: var(--albion-config-soft);
    font-weight: 400;
}

.albion-pdp-config:not(#_) .albion-config-configuration__count::before {
    content: "\00b7";
    margin-right: 5px;
}

.albion-pdp-config:not(#_) .albion-config-configuration__items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.albion-pdp-config:not(#_) .albion-config-configuration__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    margin: 0;
    padding: 4px 0;
    color: var(--albion-config-ink);
    font-size: 15px;
    line-height: 1.35;
}

.albion-pdp-config:not(#_) .albion-config-configuration__options {
    grid-column: 1 / -1;
    margin-top: -2px;
    font-size: 14px;
    color: var(--albion-config-soft);
}

.albion-pdp-config:not(#_) .albion-config-configuration__part {
    color: var(--albion-config-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.albion-pdp-config:not(#_) .albion-config-fulfil__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 0;
}

/* The icon box matches the label's line (14px × 1.4) so they sit level. */
.albion-pdp-config:not(#_) .albion-config-fulfil__icon {
    display: flex;
    flex: none;
    align-items: center;
    height: 20px;
    color: var(--albion-config-ink);
}

.albion-pdp-config:not(#_) .albion-config-fulfil__icon svg {
    width: 20px;
    height: 20px;
}

.albion-pdp-config:not(#_) .albion-config-fulfil__copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    font-size: 15px;
    line-height: 1.4;
}

.albion-pdp-config:not(#_) .albion-config-fulfil__label {
    font-weight: 600;
    line-height: 1.4;
    color: var(--albion-config-ink);
}

.albion-pdp-config:not(#_) .albion-pdp-buy .stock {
    padding: 0;
    background: transparent;
    border: 0;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .stock.is_ok { color: var(--albion-config-ok); }
.albion-pdp-config:not(#_) .albion-pdp-buy .stock.is_wait { color: var(--albion-config-wait); }
.albion-pdp-config:not(#_) .albion-pdp-buy .stock.is_stop { color: var(--albion-config-stop); }

.albion-pdp-config:not(#_) .albion-pdp-buy .stock_head {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.albion-pdp-config:not(#_) .albion-pdp-buy .stock_list {
    display: grid;
    gap: 4px;
    margin: 4px 0 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.45;
    list-style: none;
    color: var(--albion-config-soft);
}

.albion-pdp-config:not(#_) .albion-pdp-buy .stock_list a {
    color: inherit;
    text-decoration: underline;
}

.albion-pdp-config:not(#_) .albion-config-fulfil__pickup .albion-find-store-btn {
    color: var(--albion-config-accent);
    text-decoration: none;
}

.albion-pdp-config:not(#_) .albion-config-fulfil__pickup .albion-find-store-btn:hover {
    text-decoration: underline;
}

.albion-pdp-config:not(#_) .albion-config-fulfil__pickup-off,
.albion-pdp-config:not(#_) .albion-pdp-buy[data-stock-state="stop"] .albion-config-fulfil__pickup {
    display: none;
}

.albion-pdp-config:not(#_) .albion-pdp-buy[data-stock-state="stop"] .albion-config-fulfil__pickup-off {
    display: block;
    color: var(--albion-config-soft);
}

/* Holding state: no delivery details until a variation is chosen. */
.albion-pdp-config:not(#_) .albion-config-fulfil-empty {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--albion-config-soft);
}

.albion-pdp-config:not(#_) .albion-config-fulfil-empty svg {
    flex: none;
}

.albion-pdp-config:not(#_) .albion-pdp-buy[data-selection="none"] .albion-config-fulfil-empty {
    display: flex;
}

.albion-pdp-config:not(#_) .albion-pdp-buy[data-selection="none"] .albion-config-fulfil,
.albion-pdp-config:not(#_) .albion-pdp-buy[data-selection="none"] ~ .albion-pickup-summary,
.albion-pdp-config:not(#_) .albion-pdp-buy[data-selection="none"] .albion-pickup-summary {
    display: none;
}

/* "When will I get it?" timeline. */
.albion-pdp-config:not(#_) .albion-config-timeline {
    display: grid;
    gap: 16px;
    padding: 20px 0;
}

.albion-pdp-config:not(#_) .albion-pdp-buy[data-stock-state="stop"] .albion-config-timeline {
    display: none;
}

.albion-pdp-config:not(#_) .albion-pdp-buy[data-stock-state="stop"] .albion-config-timeline + .albion-config-fulfil__row {
    border-top: 0;
}

.albion-pdp-config:not(#_) .albion-config-timeline__title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--albion-config-ink);
}

.albion-pdp-config:not(#_) .albion-config-timeline__steps {
    /* How far the middle step (dot and text) sits in from its column's start. */
    --albion-timeline-shift: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.albion-pdp-config:not(#_) .albion-config-timeline__step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    margin: 0;
    /* 14px dot + 10px space above the step name; 12px clear of the next column. */
    padding: 24px 12px 0 0;
}

/* The connecting line runs from each marker to the next one. */
.albion-pdp-config:not(#_) .albion-config-timeline__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 14px;
    right: 0;
    height: 2px;
    background: var(--albion-config-line);
}

/* Middle step: dot and text move in together, text stays left under the dot.
   The first line stretches to reach it. */
.albion-pdp-config:not(#_) .albion-config-timeline__step:nth-child(2) {
    padding-left: var(--albion-timeline-shift);
}

.albion-pdp-config:not(#_) .albion-config-timeline__step:nth-child(2) .albion-config-timeline__marker {
    left: var(--albion-timeline-shift);
}

.albion-pdp-config:not(#_) .albion-config-timeline__step:first-child::after {
    right: calc(-1 * var(--albion-timeline-shift));
}

/* Its line runs across the last column to the last dot (columns are equal). */
.albion-pdp-config:not(#_) .albion-config-timeline__step:nth-child(2)::after {
    left: calc(var(--albion-timeline-shift) + 14px);
    right: calc(-100% + 14px);
}

/* Last step: right-aligned, dot at the far end. */
.albion-pdp-config:not(#_) .albion-config-timeline__step:last-child {
    align-items: flex-end;
    padding: 24px 0 0 12px;
    text-align: right;
}

.albion-pdp-config:not(#_) .albion-config-timeline__step:last-child .albion-config-timeline__marker {
    left: auto;
    right: 0;
}

.albion-pdp-config:not(#_) .albion-config-timeline__step.is-done::after {
    background: var(--albion-config-accent);
}

.albion-pdp-config:not(#_) .albion-config-timeline__marker {
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    background: var(--albion-config-bg);
    border: 2px solid var(--albion-config-line);
    border-radius: 50%;
}

.albion-pdp-config:not(#_) .albion-config-timeline__step.is-done .albion-config-timeline__marker {
    background: var(--albion-config-accent);
    border-color: var(--albion-config-accent);
}

.albion-pdp-config:not(#_) .albion-pdp-buy[data-stock-state="ok"] .albion-config-timeline__step.is-next .albion-config-timeline__marker {
    border-color: var(--albion-config-ok);
}

.albion-pdp-config:not(#_) .albion-pdp-buy[data-stock-state="wait"] .albion-config-timeline__step.is-next .albion-config-timeline__marker {
    border-color: var(--albion-config-wait);
}

.albion-pdp-config:not(#_) .albion-config-timeline__label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--albion-config-ink);
}

.albion-pdp-config:not(#_) .albion-config-timeline__detail {
    font-size: 13px;
    line-height: 1.4;
    color: var(--albion-config-soft);
}

.albion-pdp-config:not(#_) .albion-config-timeline__ship {
    font-weight: 600;
}

.albion-pdp-config:not(#_) .albion-pdp-buy[data-stock-state="wait"] .albion-config-timeline__ship {
    color: var(--albion-config-wait);
}

.albion-pdp-config:not(#_) .albion-pdp-buy[data-stock-state] .albion-config-timeline__ship[data-processing-template*="{processing_date}"] {
    color: var(--albion-config-soft);
}

/* Pre-order timeline: four steps, so the two middle dots sit in from their columns and the lines reach the next dot. */
.albion-pdp-config:not(#_) .albion-config-timeline--preorder .albion-config-timeline__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.albion-pdp-config:not(#_) .albion-config-timeline--preorder .albion-config-timeline__step:nth-child(3) {
    padding-left: var(--albion-timeline-shift);
}

.albion-pdp-config:not(#_) .albion-config-timeline--preorder .albion-config-timeline__step:nth-child(3) .albion-config-timeline__marker {
    left: var(--albion-timeline-shift);
}

.albion-pdp-config:not(#_) .albion-config-timeline--preorder .albion-config-timeline__step:nth-child(2)::after {
    left: calc(var(--albion-timeline-shift) + 14px);
    right: calc(-1 * var(--albion-timeline-shift));
}

.albion-pdp-config:not(#_) .albion-config-timeline--preorder .albion-config-timeline__step:nth-child(3)::after {
    left: calc(var(--albion-timeline-shift) + 14px);
    right: calc(-100% + 14px);
}

.albion-pdp-config:not(#_) .albion-config-timeline--preorder .albion-config-timeline__step.is-next .albion-config-timeline__marker {
    border-color: var(--albion-config-wait);
}

.albion-pdp-config:not(#_) .albion-config-timeline__preorder {
    font-weight: 600;
    color: var(--albion-config-wait);
}

/* Add to Cart button. */
.albion-pdp-config:not(#_) .single_add_to_cart_button {
    display: block;
    width: 100%;
    min-height: 52px;
    margin: 0 !important;
    padding: 15px 24px;
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    background: var(--albion-config-accent);
    border: 0;
    border-radius: var(--albion-config-radius-inner);
    cursor: pointer;
    /* Themes fade every button change (e.g. `transition: all .3s`), which
       turned the press into a blue → grey fade through lavender. Only the
       hover brightness and busy dimming animate; colours switch at once. */
    transition: filter .15s ease, opacity .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.albion-pdp-config:not(#_) .single_add_to_cart_button:hover {
    filter: brightness(1.06);
}

/* While adding, the button stays blue (dimmed, with its spinner) even
   though it's disabled, rather than flashing to the grey "unavailable" look. */
.albion-pdp-config:not(#_) .single_add_to_cart_button.albion-pdp-atc--busy,
.albion-pdp-config:not(#_) .single_add_to_cart_button.albion-pdp-atc--busy:disabled,
.albion-pdp-config:not(#_) .single_add_to_cart_button.loading {
    color: #fff;
    background: var(--albion-config-accent);
    opacity: .75;
    filter: none;
    cursor: progress;
}

.albion-pdp-config:not(#_) .single_add_to_cart_button:disabled,
.albion-pdp-config:not(#_) .single_add_to_cart_button.disabled {
    color: #55555b;
    background: #dcdce0;
    cursor: not-allowed;
    filter: none;
}

@media (max-width: 520px) {
    .albion-pdp-config:not(#_) .albion-pdp-config__head,
    .albion-pdp-config:not(#_) .albion-config-part,
    .albion-pdp-config:not(#_) .albion-config-care-part,
    .albion-pdp-config:not(#_) .albion-config-foot {
        padding: 20px 18px;
    }

    .albion-pdp-config:not(#_) .albion-pdp-config__title-row {
        align-items: flex-start;
    }

    .albion-pdp-config:not(#_) .albion-pdp-config__title {
        font-size: 24px;
    }

    /* Three steps share about 220px here: smaller text, middle step less inset. */
    .albion-pdp-config:not(#_) .albion-config-timeline__steps {
        --albion-timeline-shift: 12px;
    }

    .albion-pdp-config:not(#_) .albion-config-timeline__label {
        font-size: 13px;
    }

    .albion-pdp-config:not(#_) .albion-config-timeline__detail {
        font-size: 12px;
    }

    .albion-pdp-config:not(#_) .albion-stock-key__panel {
        padding: 32px 22px 18px;
    }
}

/* Inline Hugeicons used in place of text glyphs (tick, close, arrow). */
.albion-pdp-config:not(#_) .albion-icon {
    display: inline-block;
    flex: none;
    vertical-align: -0.15em;
}