/* HEADER */
.checkout_header {
    background: #000;
    border-radius: 0 0 15px 15px;
    height: 60px;
}

.checkout-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

/* Left group: logo + continue */
.checkout-header-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.checkout-header-logo img {
    height: 37px;
    width: auto;
    filter: brightness(0) invert(1);
}

.checkout-header-logo-text {
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.checkout-header-continue {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: -0.42px;
    color: #fff;
    text-decoration: none;
}

.checkout-header-continue i {
    font-size: 12px;
}

.checkout-header-continue:hover { color: #ccc; }

/* Right group: svg + label + phone inline */
.checkout-header-support {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkout-header-support-label {
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: -0.45px;
    color: #fff;
}

.checkout-header-support-phone {
    font-family: Inter, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 38px;
    letter-spacing: -0.6px;
    color: #fff;
    white-space: nowrap;
}

/* CONTENT */
html.checkout_checkout,
html.checkout_checkout body {
    width: 100%;
    height: 100%;
}
.checkout_body,
.checkout_body #checkout-checkout,
.checkout_body main {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}
.checkout_body #checkout-checkout {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}
.checkout_body .checkout-wrap {
    position: relative;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    overflow: hidden;
}
.checkout-wrap #content {
    margin-top: 3rem;
}
.checkout-wrap .checkout-content {
    position: relative;
    padding-left: 0;
    padding-right: 2rem;
}
.checkout-wrap .checkout-sidebar {
    position: relative;
    padding-right: 0;
}
.checkout-wrap .checkout-sidebar:after {
    display: none;
}

/* ACCORDION */
.accordion-item .accordion-button-disabled {
    background-color: #fff;
    border: 0;
    box-shadow: none;
    pointer-events: none;
}
.accordion-item .accordion-button.accordion-button-disabled::after {
    display: none;
}

/* CART */

#mini_cart {
    margin-top: 3rem;
}

.card-cart {
    border: 0;
    background: none;
}

.card-cart .card-header {
    border: 0;
    padding: 0.5rem 1rem;
    border-radius: 3px;
    background-color: #fff;
    margin: 0 0 .25rem 0;
}

.card-cart .card-header h3 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.625rem;
    text-align: center;
    margin: 0 0 .25rem 0;
    padding: 0;
}
.card-cart .card-body {
    margin: 0 0 .25rem 0;
    padding: 0;
} 
.card-cart .card-body .cart_item {
    background-color: #fff;
    --bs-gutter-x: 0;
    margin-bottom: .25rem;
    align-items: center;
    position: relative;
}
.card-cart .card-body .cart_item:last-child {
    margin-bottom: 0;
}
.card-cart .card-body .cart_item .cart_item-image {
    padding: .5rem;
    position: relative;
}
.card-cart .card-body .cart_item .cart_item-image .cart_item-badge {
    border-radius: 50%;
    background-color: var(--bs-dark);
    color: var(--bs-white);
    transform: translate(-50%,-50%);
    left: 0;
    top: 0;
    position: absolute;
    display: inline-block;
    padding: 0;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.125rem;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    width: 1.25rem;
    height: 1.25rem;
}
.card-cart .card-body .cart_item .cart_item-info {
    padding-left: .5rem;
    padding-right: .5rem;
}
.card-cart .card-body .cart_item .cart_item-info h4 {
    font-size: 0.875rem;
    font-weight: bold;
}
.card-cart .card-body .cart_item .cart_item-total {
    padding-left: .5rem;
    padding-right: .5rem;
    font-weight: bold;
}
.card-cart .card-footer {
    border: 0;
    background: none;
    padding: 0;
}
.card-cart .card-footer .cart_total {
     --bs-gutter-x: 0;
     padding: 1rem 0.5rem;
     background-image: linear-gradient(to right, #E1E1E1 33%, rgba(255,255,255,0) 0%);
     background-position: bottom;
     background-size: 0.6875rem 1px;
     background-repeat: repeat-x;
}

.card-cart .card-footer .cart_total .cart_total-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.125rem;
    position: relative;
    top: 1px;
}
.card-cart .card-footer .cart_total.sum_total .cart_total-title {
    font-size: 1rem;
}
.card-cart .card-footer .cart_total .cart_total-text {
    font-size: 0.9375rem;
    color: var(--bs-dark);
    line-height: 1.125rem;
}
.card-cart .card-footer .cart_total.sum_total .cart_total-text {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--color-dark);
}


/* CHECKOUT CART */

.checkout-cart {
    margin-top: 1rem;
    margin-bottom: 3rem;
}
.checkout-cart .cart_item {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    position: relative;
}
.checkout-cart .cart_item:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}
.checkout-cart .cart_item .cart_item-title {
    font-size: 1rem;
    font-weight: bold;
    margin: 0 0 1rem 0;
    color: var(--color-dark);
}
.checkout-cart .cart_item .cart_item-remove {
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 0.625rem;
    padding: 0;
    background: #F8F8F8;
    color: #A0A0A0;
    -webkit-appearance: initial;
}
.checkout-cart .cart_item .cart_item-remove:hover {
    color: var(--bs-danger);
}
.checkout-cart .cart_item .cart_item-price-total {
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.75rem;
}
.checkout-cart .cart_item .cart_item-price-initial {
    font-size: 0.875rem;
    line-height: 1.75rem;
    margin-left: 0.5rem;
    text-decoration: line-through;
}
.checkout-cart .cart_item .cart_item-price-quantity {
    font-size: 1rem;
    line-height: 1.75rem;
}
.checkout-cart .cart_item .cart_item-details {
    margin-top: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
}
.checkout-cart .cart_item .cart_item-stock {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: bold;
}


/* QUICKCHECKOUT */

.blockUI.blockMsg {
    border-radius: .25rem;
}
.blockUI.blockMsg h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 3rem;
    padding: .5rem 0 0.75rem 0;
    height: auto;
}
.quick-checkout .checkout-login {
    flex: 0 0 auto;
    width: 30%;
}
.quick-checkout .checkout-main {
    flex: 0 0 auto;
    width: 100%;
}
.quick-checkout .checkout-login + .checkout-main {
    flex: 0 0 auto;
    width: 70%;
}
.quick-checkout #quickcheckoutconfirm {
    padding: 3rem 0;
}
.quick-checkout .quickcheckout-login-choose h2 {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1.25rem;
}
.quick-checkout .quickcheckout-login-choose .quickcheckout-login-help {
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-bottom: 1.5rem;
    color: #707070;
}
.quick-checkout .modal-content {
    padding: 1rem 2rem;
}
.quick-checkout .modal-header {
    justify-content: center;
}
.quick-checkout .modal-header .modal-title {
    font-weight: bold;
    font-size: 1.25rem;
}
.quick-checkout .modal-header,
.quick-checkout .modal-body,
.quick-checkout .modal-footer {
    padding-left: 0;
    padding-right: 0;
}
.quick-checkout .modal-footer {
    border: 0;
    justify-content: center;
}
.quick-checkout .btn-close-extra {
    box-sizing: content-box;
    height: 1rem;
    padding: 0.25rem 0.25rem 0.25rem 1.75rem;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") left 75%/.75rem auto no-repeat;
    border: 0;
    border-radius: 0.25rem;
    opacity: .5;
}
.quick-checkout .hide {
    display: none;
}
#quickcheckoutconfirm {
	min-height: calc(100vh - var(--header-height));
}

.card-checkout {
    padding: 1.75rem 1.5rem;
    border: 1px solid #EBEBEB;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
}
.card-checkout .card-heading {
    font-size: 1.25rem;
    font-weight: bold;
    margin: 0 0 1.5rem 0;
}
.card-checkout .card-content {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
}
.card-checkout .card-content .col-input {
    flex: 0 0 auto;
    width: 50%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}
.card-checkout .card-content .col-input-full {
    flex: 0 0 auto;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}
.card-checkout .card-content .col-address_1 {
    flex: 0 0 auto;
    width: 75%;
}
.card-checkout .card-content .col-postcode {
    flex: 0 0 auto;
    width: 25%;
}
.card-checkout .card-content .col-input.required label:after {
    content: "*";
    color: var(--bs-danger);
    padding-left: .125rem;
}
.card-checkout .card-content .col-agree {
    flex: 0 0 auto;
    width: 100%;
}
.card-checkout .card-content .form-check {
    margin-bottom: 0.25rem;
}
.card-checkout .card-content .form-switch .form-check-input:checked {
    background-color: #303030;
    border-color: #303030;
}
.card-checkout .card-content .form-switch .form-check-input:focus {
    border-color: #c4c4c4;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(190 190 190 / 25%);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23888888'/%3e%3c/svg%3e");
}
.card-checkout .card-content .form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.card-checkout .card-content .form-check-input:checked {
    background-color: #303030;
    border-color: #303030;
}
.card-checkout .card-content .form-check-input:focus {
    border-color: #c4c4c4;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(190 190 190 / 25%);
}
.card-checkout#shipping-method .card-heading,
.card-checkout#payment-method .card-heading {
    margin-bottom: 0.25rem;
}
.card-checkout#shipping-method .card-content .card-help,
.card-checkout#payment-method .card-content .card-help {
    margin-bottom: 1.5rem;
}
.card-checkout#shipping-method .card-content .form-check,
.card-checkout#payment-method .card-content .form-check {
    border-bottom: solid 1px #E1E1E1;
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    cursor: pointer;
}
.card-checkout#shipping-method .card-content .form-check:last-child,
.card-checkout#payment-method .card-content .form-check:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}
.card-checkout#shipping-method .card-content .form-check .form-check-label,
.card-checkout#payment-method .card-content .form-check .form-check-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
}
.card-checkout#shipping-method .card-content .form-check .form-check-label > i {
    font-size: 2rem;
    margin-right: 1rem;
}
.card-checkout#shipping-method .card-content .form-check .form-check-label > div,
.card-checkout#payment-method .card-content .form-check .form-check-label > div {
    font-size: 1rem;
}
.card-checkout#shipping-method .card-content .form-check .form-check-label > div p,
.card-checkout#payment-method .card-content .form-check .form-check-label > div p {
    font-size: 0.875rem;
}


.card-module {
    border: 0;
    padding: 0 0 1rem 0;
}
.card-module .card-header {
    background-color: #fff;
    border: 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
    text-align: center;
    margin: 0 0 0.25rem 0;
    padding: 0.75rem 1rem 0.5rem 1rem;
}
.card-module .card-header h3 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.625rem;
    margin: 0;
}
.card-module .card-header .card-help {
    margin: 0;
}
.card-module .card-body {
    padding: 0rem 1rem;
}
.card-module .card-footer {
    background-color: #fff;
    border: 0;
    font-size: 0.75rem;
    font-style: italic;
    line-height: 1rem;
    text-align: center;
    color: var(--bs-gray);
}

/* ============================================================
   CART PAGE - Breadcrumb
   ============================================================ */

.cart-breadcrumb {
    background: #fff;
    width: 100%;
    padding: 0.625rem 1.5rem;
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
}

.cart-breadcrumb .breadcrumb {
    padding: 0;
    margin: 0;
    background: transparent;
}

/* Color overrides: category-breadcrumb uses white, cart uses black */
.cart-breadcrumb .category-breadcrumb .breadcrumb-item a {
    color: #000;
    opacity: 1;
}

.cart-breadcrumb .category-breadcrumb .breadcrumb-home-icon i {
    color: #000;
    opacity: 0.6;
}

.cart-breadcrumb .category-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #000;
    opacity: 0.6;
}


/* ============================================================
   CART PAGE - Layout & Left column header
   ============================================================ */

#checkout-cart {
    padding-top: 40px;
    padding-bottom: 60px;
}

.cart-heading {
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: -0.54px;
    color: #181E28;
    margin-bottom: 10px;
}

.cart-subtitle {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.42px;
    color: #8A8A8A;
    margin-bottom: 20px;
}

.cart-btn-continue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #F0F0F0;
    border: 1px solid #E9E9E9;
    border-radius: 7px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: -0.42px;
    color: #181E28;
    padding: 6px 16px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.cart-btn-continue:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}


/* ============================================================
   CART PAGE - Shipping progress bar
   ============================================================ */

.cart-shipping-progress {
    background: #F5F5F5;
    border-radius: 7px;
    padding: 24px 28px;
    margin-bottom: 16px;
}

.cart-shipping-progress-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    justify-content: center;
    margin-bottom: 12px;
}

.cart-shipping-progress-text {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    color: #000;
}

.cart-shipping-bar {
    position: relative;
    height: 7px;
    background: #E0E0E0;
    border-radius: 7px;
    overflow: visible;
}

.cart-shipping-bar-fill {
    height: 100%;
    background: #000;
    border-radius: 7px;
    /* Left-to-right fill animation. Matches the mini cart timing
       (700ms ease-out) so both surfaces feel like one system. */
    transition: width 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cart-shipping-bar-check {
    /* `left:` is driven by JS in lockstep with the fill width so
       the badge slides into the right edge of the progress fill. */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 19px;
    height: 19px;
    background: #C0C0C0;       /* pending state - neutral until threshold met */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 240ms ease,
                left 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cart-shipping-progress--met .cart-shipping-bar-check {
    background: #00C21A;       /* met state - green */
}

.cart-shipping-bar-check i {
    font-family: 'Font Awesome 6 Pro';
    font-weight: 300;
    font-size: 10px;
    line-height: 1;
    color: #fff;
}


/* ============================================================
   CART PAGE - Product cards
   ============================================================ */

.cart-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.cart-item-card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #E2E2E2;
    border-radius: 7px;
    overflow: hidden;
    min-height: 150px;
}

.cart-item-image {
    flex: 0 0 134px;
    width: 134px;
    height: 134px;
    margin: auto 0 auto 8px;
    border-radius: 7px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item-image img {
    width: 134px;
    height: 134px;
    object-fit: cover;
    border-radius: 7px;
}

.cart-item-body {
    flex: 1;
    display: flex;
    flex-direction: row;
    padding: 12px 14px 12px 16px;
    gap: 12px;
}

/* Left: title, model, stock */
.cart-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Center: stepper vertically centered */
.cart-item-stepper-col {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 16px;
}

/* Right column: actions top | total bottom */
.cart-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    flex-shrink: 0;
    min-width: 90px;
}

.cart-item-title {
    margin: 0;
}

.cart-item-title a {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.42px;
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
}

.cart-item-model {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.36px;
    color: #8A8A8A;
}

.cart-item-stock-status {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.39px;
    color: #00B27D;
}

/* Bottom row: actions left | stepper center | total right */
.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cart-item-wishlist {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C0C0C0;
    font-size: 14px;
    text-decoration: none;
}

.cart-item-wishlist:hover { color: #000; }

.cart-item-actions-sep {
    width: 1px;
    height: 14px;
    background: #E2E2E2;
    display: inline-block;
}

.cart-item-remove {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 11px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C0C0C0;
    font-size: 12px;
}

.cart-item-remove:hover { color: #000; }

/* Bottom row: actions | stepper | total (unused wrapper - kept for compatibility) */
.cart-item-bottom { display: contents; }

.cart-item-stepper {
    display: flex;
    align-items: center;
    background: rgba(72, 72, 72, 0.06);
    border-radius: 4px;
    overflow: hidden;
}

.stepper-btn {
    background: none;
    border: none;
    width: 32px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    color: #000;
    line-height: 35px;
}

.stepper-btn:hover { background: rgba(0,0,0,0.06); }

.stepper-qty {
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 46px;
    letter-spacing: 0;
    color: #000;
    min-width: 36px;
    text-align: center;
}

/* Total (bottom right) */
.cart-item-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.cart-item-total-label {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.36px;
    color: #181E28;
}

.cart-item-total-price {
    font-family: Inter, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: -0.6px;
    color: #000;
}


/* ============================================================
   CART PAGE - Related products accordion
   ============================================================ */

.cart-related {
    background: #FBFBFB;
    border: 1px solid #EBEBEB;
    border-radius: 7px;
    margin-top: 16px;
    overflow: hidden;
}

.cart-related-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    padding: 14px 18px;
    cursor: pointer;
}

.cart-related-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-related-icon {
    font-size: 17px;
    width: 17px;
    color: #000;
}

.cart-related-title {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    letter-spacing: -0.42px;
}

.cart-related-chevron {
    font-size: 14px;
    width: 14px;
    color: #000;
}

.cart-related-body {
    padding: 0 18px 18px;
    display: block;
}

.cart-related-body .product-container {
    gap: 12px;
}

/* rv-card adapted for cart panel */
/* product-block inside cart related panel - inherits all styles from stylesheet.css */


/* ============================================================
   CART RELATED - Custom product card
   ============================================================ */

.cr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 0 0 4px;
}

.cr-card {
    display: flex;
    flex-direction: column;
    border-radius: 7px;
    overflow: hidden;
    background: #fff;
}

/* Image area */
.cr-card__image-wrap {
    position: relative;
    background: #F5F5F5;
    border-radius: 7px;
    overflow: hidden;
    aspect-ratio: 244 / 243;
}

.cr-card__image-wrap a {
    display: block;
    width: 100%;
    height: 100%;
}

.cr-card__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Labels */
.cr-card__image-wrap .product-label {
    position: absolute;
    pointer-events: none;
}

.cr-card__image-wrap .product-label-new {
    top: 10px;
    left: 10px;
}

.cr-card__image-wrap .product-label-sale {
    top: 10px;
    left: 10px;
}

.cr-card__image-wrap .product-label-new ~ .product-label-sale {
    top: 34px;
}

/* Body */
.cr-card__body {
    padding: 10px 8px 4px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cr-card__body-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
}

.cr-card__body-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

/* Wishlist + compare icons - top right of body */
.cr-card__icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cr-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.cr-card__wishlist .h-icon-wishlist {
    display: block;
    width: 14px;
    height: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.cr-card__compare .h-icon-compare {
    display: block;
    width: 16px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.cr-card__brand {
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #8A8A8A;
}

.cr-card__name {
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.45px;
    color: #000;
    text-decoration: none;
    display: block;
}

.cr-card__name:hover { color: #000; }

.cr-card__price {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.cr-card__price-current {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.42px;
    color: #000;
    line-height: 68px;
}

.cr-card__price-old {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #8A8A8A;
    text-decoration: line-through;
}

/* Footer: add to cart button */
.cr-card__footer {
    padding: 0 6px 8px;
}

.cr-card__cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    background: #0C0C0C;
    border-radius: 7px;
    text-decoration: none;
    transition: background 0.2s;
}

.cr-card__cart:hover {
    background: #333;
}


/* ============================================================
   CART PAGE - Right sidebar
   ============================================================ */

.cart-col-right {
    padding-top: 16px;
}

.cart-sidebar-box {
    background: #fff;
    border: 1px solid #E2E2E2;
    border-radius: 7px;
    padding: 16px;
}

/* Coupon */
.cart-coupon {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Inner row for the apply state (input + button stacked). Sits inside
   .cart-coupon so the flex column behaviour cascades through the new
   wrapper - needed because the coupon is now two states (apply row +
   applied pill) toggled by JS, but the box itself still stacks. */
.cart-coupon__row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cart-coupon-input,
.cart-coupon-btn {
    width: 100%;
    height: 45px;
    box-sizing: border-box;
    border-radius: 7px;
}

.cart-coupon-input {
    border: 1px solid rgba(0, 0, 0, 0.19);
    padding: 0 14px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.39px;
    color: #8A8A8A;
    opacity: 0.7;
    outline: none;
    background: #fff;
}

.cart-coupon-input::placeholder {
    color: #8A8A8A;
    opacity: 0.7;
    text-align: center;
}

.cart-coupon-input:focus {
    opacity: 1;
    border-color: #000;
    color: #000;
}

.cart-coupon-btn {
    background: #F9F9F9;
    border: 1px solid #000;
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.45px;
    color: #000;
    padding: 0 16px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.cart-coupon-btn:hover {
    background: #000;
    color: #fff;
}


/* ============================================================
   CART PAGE - Totals box + checkout button
   ============================================================ */

.cart-totals-box {
    background: #000;
    border: 1px solid #E2E2E2;
    border-radius: 7px;
    padding: 20px 16px 16px;
    margin-top: -8px;
    padding-top: 24px;
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cart-total-row--grand {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

.cart-total-row--grand + .cart-total-row--grand {
    border-top: none;
}

.cart-total-title {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: -0.42px;
    color: #fff;
}

.cart-total-value {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: -0.42px;
    color: #fff;
    text-align: right;
}

.cart-total-row--grand .cart-total-value {
    font-size: 28px;
    letter-spacing: -0.84px;
    line-height: 16px;
}

.cart-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 47px;
    background: #3aaa43 !important;
    border: none;
    border-radius: 7px;
    margin-top: 16px;
    font-family: Inter, sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 54px;
    letter-spacing: -0.51px;
    color: #fff;
    text-decoration: none;
    transition: background 0.2s;
    box-sizing: border-box;
    cursor: pointer;
}

.cart-checkout-btn:hover {
    background: #2e9436;
    color: #fff;
}


/* ============================================================
   CHECKOUT MINI CART
   ============================================================ */

.ck-mini-cart {
    border-radius: 7px;
    overflow: hidden;
}

/* Header */
.ck-mini-cart__header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #000;
    border-radius: 7px 7px 0 0;
    padding: 0 14px;
    height: 46px;
}

.ck-mini-cart__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    background: #262626;
    border-radius: 4px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.ck-mini-cart__title {
    flex: 1;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    letter-spacing: -0.42px;
    color: #fff;
}

.ck-mini-cart__chevron {
    font-size: 14px;
    width: 12px;
    height: 14px;
    color: #fff;
    flex-shrink: 0;
}

/* Product list */
.ck-mini-cart__body {
    background: #fff;
    border: 1px solid #F2F2F2;
    border-top: none;
    border-radius: 0 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #000 transparent;
    padding: 10px;
}

.ck-mini-cart__body::-webkit-scrollbar {
    width: 4px;
}

.ck-mini-cart__body::-webkit-scrollbar-track {
    background: transparent;
}

.ck-mini-cart__body::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 100px;
}

.ck-mini-cart__item {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 3px 10px;
    margin: 6px;
    border: 1px solid #F2F2F2;
    border-radius: 2px;
    min-height: 82px;
    background: #fff;
}

.ck-mini-cart__item:last-child {
    border-bottom: 1px solid #F2F2F2;
}

.ck-mini-cart__thumb {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.ck-mini-cart__thumb img {
    width: 76px;
    height: 76px;
    object-fit: contain;
}

.ck-mini-cart__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ck-mini-cart__name {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.42px;
    color: #000;
    text-transform: uppercase;
}

.ck-mini-cart__price {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.39px;
    color: #000;
    margin-top: 4px;
}

.ck-mini-cart__qty {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: 0;
    color: #000;
    flex-shrink: 0;
    align-self: flex-end;
    padding-bottom: 3px;
}


/* ============================================================
   CHECKOUT MINI CART - Coupon box
   ============================================================ */

.ck-coupon-box {
    background: #F6F6F6;
    border: 1px solid #E2E2E2;
    border-top: none;
    border-radius: 0 0 5px 5px;
    padding: 28px 16px;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* The input + apply-button live inside .ck-coupon-row.  The gap on
   .ck-coupon-box only spaces direct children, so spacing between the
   input and the button has to be declared on this row. */
.ck-coupon-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ck-coupon-input,
.ck-coupon-btn {
    width: 100%;
    height: 45px;
    box-sizing: border-box;
    border-radius: 7px;
}

.ck-coupon-input {
    border: 1px solid rgba(0, 0, 0, 0.19);
    padding: 0 14px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.39px;
    color: #8A8A8A;
    background: #fff;
    outline: none;
}

.ck-coupon-input::placeholder {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -0.39px;
    color: #8A8A8A;
    opacity: 0.7;
    text-align: center;
}

.ck-coupon-input:focus {
    border-color: #000;
    color: #000;
}

.ck-coupon-btn {
    background: #F9F9F9;
    border: 1px solid #000;
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.45px;
    color: #000;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.ck-coupon-btn:hover {
    background: #000;
    color: #fff;
}

.ck-coupon-btn:disabled {
    opacity: 0.6;
    cursor: progress;
}

/* Applied-coupon pill - shown instead of the input+button once a code is
   active. Click the X to remove. */
.ck-coupon-applied {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 45px;
    box-sizing: border-box;
    padding: 0 14px;
    background: #ffffff;
    border: 1px solid #181E28;
    border-radius: 7px;
}

.ck-coupon-applied__icon {
    color: #181E28;
    font-size: 14px;
    flex-shrink: 0;
}

.ck-coupon-applied__label {
    flex: 1;
    min-width: 0;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.39px;
    color: #181E28;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ck-coupon-applied__code {
    font-weight: 700;
    text-transform: uppercase;
}

.ck-coupon-applied__remove {
    background: transparent;
    border: none;
    color: #181E28;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.ck-coupon-applied__remove:hover {
    background: rgba(0, 0, 0, 0.05);
}

.ck-coupon-applied__remove:disabled {
    opacity: 0.6;
    cursor: progress;
}

/* Inline feedback under the apply input - error red / success green. */
.ck-coupon-feedback {
    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    padding: 6px 4px 0;
}

.ck-coupon-feedback--err {
    color: #C0392B;
}

.ck-coupon-feedback--ok {
    color: #1F7A34;
}


/* ============================================================
   CHECKOUT MINI CART - Agree / Newsletter checkboxes
   ============================================================ */

.ck-agree-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
    /* Reset label browser defaults that would creep in. */
    margin: 0;
}

/* Visually hide the native checkbox, but keep it focusable and in the
   accessibility tree (screen readers announce it, keyboard tab reaches
   it, Space toggles it).  display:none / hidden would remove it from
   both, which is why the old `<input hidden>` pattern was inaccessible. */
.ck-agree-row__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ck-checkbox {
    flex-shrink: 0;
    width: 15px;
    height: 14px;
    background: #F8F8F8;
    border: 1px solid #CCCCCC;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.ck-checkbox__icon {
    font-size: 8px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s;
}

/* :checked drives the visual state - no JS class toggling needed. */
.ck-agree-row__input:checked ~ .ck-checkbox {
    background: #00C21A;
    border-color: #00C21A;
}

.ck-agree-row__input:checked ~ .ck-checkbox .ck-checkbox__icon {
    opacity: 1;
}

/* Keyboard focus ring. :focus-visible avoids showing the ring on mouse
   click (only shows for keyboard tab navigation). */
.ck-agree-row__input:focus-visible ~ .ck-checkbox {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #00C21A;
}

.ck-agree-label {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: -0.41px;
    color: #fff;
}

.ck-agree-label a {
    color: #fff;
    text-decoration: underline;
}


/* ============================================================
   CHECKOUT STEPS - Accordion panels, forms, inputs, buttons
   ============================================================ */

/* Accordion panel */
.checkout-content .accordion-item {
    background: #FBFBFB;
    border: 1px solid #E2E2E2;
    border-radius: 5px !important;
    margin-bottom: 8px;
    overflow: hidden;
}

.checkout-content .accordion-item + .accordion-item {
    margin-top: 0;
    border-top: 1px solid #E2E2E2;
}

.checkout-content .accordion-button {
    background: #FBFBFB;
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: -0.54px;
    color: #000;
    box-shadow: none;
    border-radius: 5px !important;
}

.checkout-content .accordion-button:not(.collapsed) {
    background: #FBFBFB;
    color: #000;
    box-shadow: none;
}

.checkout-content .accordion-body {
    background: #FBFBFB;
    padding: 16px 20px 20px;
}

/* Legend */
.checkout-content fieldset legend,
.checkout-content .legend {
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: -0.54px;
    color: #000;
    margin-bottom: 16px;
}

/* Labels */
.checkout-content label,
.checkout-content .control-label {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    letter-spacing: -0.42px;
    color: #181E28;
    margin-bottom: 0;
    display: block;
}

/* Inputs & selects & textareas */
.checkout-content input[type="text"],
.checkout-content input[type="email"],
.checkout-content input[type="tel"],
.checkout-content input[type="password"],
.checkout-content input[type="number"],
.checkout-content select,
.checkout-content textarea {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 7px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #181E28;
    padding: 10px 14px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

.checkout-content input:focus,
.checkout-content select:focus,
.checkout-content textarea:focus {
    border-color: #000;
}

/* ── Generic form-control fallback for radios + checkboxes inside the
   checkout content area ──
   Both indicators share the same 20px circular footprint so they read as
   one visual family with .op-gift-wrap, the sidebar agree/newsletter rows,
   and the .op-method-option / .op-customer-groups cards. The semantic
   difference is the FILL on :checked:
     • Radio    → empty outer ring + inner dot
     • Checkbox → fully-filled disc + white tick

   More specific selectors (.op-method-option, .op-customer-groups,
   .op-gift-wrap, .ck-agree-row__input) win where they exist; this rule
   covers .form-check-input radios/checkboxes scattered through the
   address forms, billing-different toggles, and custom_field controls
   so they don't fall back to Bootstrap defaults. */
.checkout-content input[type="radio"],
.checkout-content input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin-top: 0;
    background: #FFFFFF;
    border: 2px solid #CFCFCF;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.checkout-content input[type="radio"]:hover,
.checkout-content input[type="checkbox"]:hover {
    border-color: #8C8C8C;
}

.checkout-content input[type="radio"]:focus-visible,
.checkout-content input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(24, 30, 40, 0.15);
    border-color: #181E28;
}

/* Radio = outer ring stays, inner dot scales in on :checked. */
.checkout-content input[type="radio"]:checked {
    border-color: #181E28;
    background: #FFFFFF;
}

.checkout-content input[type="radio"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: #181E28;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.15s ease;
}

.checkout-content input[type="radio"]:checked::after {
    transform: translate(-50%, -50%) scale(1);
}

/* Checkbox = disc fills on :checked + a white tick scales in. */
.checkout-content input[type="checkbox"]:checked {
    background: #181E28;
    border-color: #181E28;
}

.checkout-content input[type="checkbox"]::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Pro';
    font-weight: 400;
    font-size: 10px;
    line-height: 1;
    color: #FFFFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.15s ease;
}

.checkout-content input[type="checkbox"]:checked::after {
    transform: translate(-50%, -50%) scale(1);
}

/* Label that follows a .form-check-input - clickable, aligned with the
   indicator, picks up the theme typography. */
.checkout-content .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.checkout-content .form-check .form-check-label {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.39px;
    color: #181E28;
    cursor: pointer;
    margin: 0;
}

/* Checkbox labels */
.checkout-content .radio label,
.checkout-content .checkbox label {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    letter-spacing: -0.42px;
    color: #808080;
    display: inline;
    margin-left: 6px;
}

/* Buttons */
.checkout-content .btn,
.checkout-content button[type="button"]:not(.btn-close) {
    background: #E2E2E2;
    border: 1px solid #707070;
    border-radius: 7px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.checkout-content .btn:hover,
.checkout-content button[type="button"]:not(.btn-close):hover {
    background: #000;
    border-color: #000;
    color: #fff;
}


/* ============================================================
   CHECKOUT STEPS - form-check as white card
   ============================================================ */

.checkout-content .form-check {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 7px;
    padding: 12px 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkout-content .form-check:last-child {
    margin-bottom: 0;
}

.checkout-content .form-check .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

.checkout-content .form-check .form-check-label {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    letter-spacing: -0.42px;
    color: #808080;
    margin: 0;
    cursor: pointer;
}


/* ============================================================
   ONE-PAGE CHECKOUT - Panels
   ============================================================ */

.op-checkout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 24px;
    padding-bottom: 48px;
}

.op-panel {
    background: #FBFBFB;
    border: 1px solid #E2E2E2;
    border-radius: 5px;
    overflow: hidden;
}

.op-panel__header {
    padding: 16px 20px;
    border-bottom: 1px solid #E2E2E2;
}

.op-panel__title {
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: -0.54px;
    color: #000;
}

.op-panel__body {
    padding: 20px;
}

.op-loading {
    text-align: center;
    padding: 24px;
    color: #ccc;
    font-size: 20px;
}

/* Hide Continue buttons inside panels - panels auto-save */
.op-panel__body #button-shipping-method,
.op-panel__body #button-payment-method {
    display: none;
}


/* ============================================================
   ONE-PAGE CHECKOUT - Step components
   ============================================================ */

/* Generic field */
.op-field {
    margin-bottom: 14px;
}

.op-field label {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    letter-spacing: -0.42px;
    color: #181E28;
    margin-bottom: 6px;
}

.op-field .form-control {
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 7px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #181E28;
    background: #fff;
    padding: 10px 14px;
}

.op-field--comment { margin-top: 16px; }

/* Buttons */
.op-btn {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.42px;
    border-radius: 7px;
    padding: 10px 24px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    border: 1px solid transparent;
}

.op-btn--primary {
    background: #000;
    color: #fff;
    border-color: #000;
    margin-top: 8px;
}

.op-btn--primary:hover {
    background: #333;
    border-color: #333;
}

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

.op-btn--confirm {
    width: 100%;
    height: 50px;
    background: #48BB51;
    color: #fff;
    border-color: #48BB51;
    font-size: 17px;
    letter-spacing: -0.51px;
    margin-top: 20px;
}

.op-btn--confirm:hover { background: #3aaa43; border-color: #3aaa43; }
.op-btn--confirm:disabled { opacity: 0.6; cursor: not-allowed; }

/* Agree row */
.op-agree-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.op-agree-row label {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #181E28;
    line-height: 18px;
}

.op-agree-row a { color: #000; text-decoration: underline; }

/* Methods list */
.op-methods { display: flex; flex-direction: column; gap: 8px; }

/* Link */
.op-link { font-family: Inter, sans-serif; font-size: 12px; color: #181E28; }
.op-forgot { display: block; margin-top: 4px; }

/* ── Login panel ── */
.op-login {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 32px;
    align-items: start;
}

.op-login__divider {
    width: 1px;
    background: #E2E2E2;
    align-self: stretch;
    margin-top: 8px;
}

.op-login__section-title {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #000;
    margin-bottom: 8px;
}

.op-login__desc {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #8A8A8A;
    margin-bottom: 12px;
}

.op-login__register-desc {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #8A8A8A;
    margin: 10px 0;
}

.op-login__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

/* ── Confirm panel ── */
.op-confirm__products {
    border: 1px solid #E2E2E2;
    border-radius: 7px;
    overflow: hidden;
    margin-bottom: 16px;
}

.op-confirm__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #F2F2F2;
    background: #fff;
}

.op-confirm__row:last-child { border-bottom: none; }

.op-confirm__name {
    flex: 1;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.op-confirm__name a { color: #000; text-decoration: none; }
.op-confirm__name a:hover { text-decoration: underline; }

.op-confirm__option {
    font-size: 12px;
    color: #8A8A8A;
    font-weight: 400;
}

.op-confirm__recurring {
    font-size: 11px;
    color: #48BB51;
}

.op-confirm__model {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #8A8A8A;
    flex-shrink: 0;
    min-width: 80px;
}

.op-confirm__qty {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #8A8A8A;
    flex-shrink: 0;
}

.op-confirm__price {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    flex-shrink: 0;
    text-align: right;
    min-width: 80px;
}

/* Totals */
.op-confirm__totals {
    background: #000;
    border-radius: 7px;
    padding: 16px;
    margin-bottom: 0;
}

.op-confirm__total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.op-confirm__total-row:last-child { border-bottom: none; }

.op-confirm__total-row--grand { border-bottom: 1px solid rgba(255,255,255,0.5); }
.op-confirm__total-row--grand + .op-confirm__total-row { border-top: none; }

.op-confirm__total-title,
.op-confirm__total-value {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.op-confirm__total-row--grand .op-confirm__total-value {
    font-size: 26px;
    letter-spacing: -0.78px;
}

/* has-error highlight */
.op-panel__body .has-error .form-control,
.op-panel__body .has-error input,
.op-panel__body .has-error select,
.op-panel__body .has-error textarea {
    border-color: #dc3545 !important;
}

.op-panel__body .text-danger {
    font-size: 12px;
    color: #dc3545;
    margin-top: 3px;
    display: block;
}

/* Panel header flex: title + check icon side by side */
.op-panel__header {
    display: flex;
    align-items: center;
}

.op-panel__check {
    margin-left: 6px;
    font-size: 18px;
    line-height: 1;
}

/* Saving spinner shown inside method panels during auto-save */
.op-saving {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #8A8A8A;
    padding: 6px 0 2px;
}

/* Alert inside panels (errors / network failures) */
.op-panel-alert {
    margin-bottom: 14px;
}


/* ============================================================
   ONE-PAGE CHECKOUT - new field primitives (Phase 5)
   ============================================================ */

/* Styled input/select/textarea within op-field */
.op-input {
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 7px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #181E28;
    background: #fff;
    padding: 10px 14px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

.op-input:focus {
    border-color: #000;
}

/* Inline error message beneath a field */
.op-field-error {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #dc3545;
    margin-top: 4px;
    min-height: 0;
    display: block;
}

.op-field-error--active {
    /* text is set by JS; just ensure it is visible */
}

/* Mark parent field red when error is active */
.op-field.has-error .op-input,
.op-field.has-error input,
.op-field.has-error select,
.op-field.has-error textarea {
    border-color: #dc3545 !important;
}

/* Side-by-side field pair */
.op-field-row {
    display: flex;
    gap: 16px;
}

.op-field-row .op-field {
    flex: 1;
    min-width: 0;
}

/* Section headings inside panel body */
.op-section-title {
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.45px;
    color: #181E28;
    margin-bottom: 12px;
    margin-top: 20px;
    padding-bottom: 6px;
    border-bottom: 1px solid #EBEBEB;
}

.op-section-title:first-child {
    margin-top: 0;
}

/* Label inside op-agree-row */
.op-agree-row__label {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #181E28;
    line-height: 18px;
    cursor: pointer;
}

.op-agree-row__label a {
    color: #000;
    text-decoration: underline;
}

/* Payment/shipping method price text */
.op-method-price {
    font-size: 13px;
    font-weight: 400;
    color: #8A8A8A;
}

/* Help text above method lists */
.op-methods-help {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #8A8A8A;
    margin-bottom: 12px;
}

/* Terms text inside payment method */
.op-method-terms {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #8A8A8A;
    margin: 4px 0 0;
}


/* ============================================================
   CHECKOUT - 3-column layout
   ============================================================ */

.op-layout {
    display: grid;
    grid-template-columns: 220px 1fr 360px;
    gap: 32px;
    align-items: start;
    padding: 36px 40px 60px;
    width: 100%;
    box-sizing: border-box;
}

/* Left col: internal padding matches the account bar card's top padding */
.op-col-left {
    padding-top: 18px;
    padding-right: 8px;
}

.op-col-left__title {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: -0.48px;
    color: #181E28;
    margin-bottom: 8px;
}

.op-col-left__subtitle {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.39px;
    color: #8A8A8A;
    margin: 0;
}

.op-col-main {
    min-width: 0;
}

.op-col-right {
    position: sticky;
    top: 20px;
}

/* ============================================================
   CHECKOUT - Responsive cascade
   ============================================================
   Desktop layout (>1366px): 220 | 1fr | 360 grid with 32px gap
   and 40px side padding. Below that, four progressive steps:

     ≤1366px (14" laptops): tighten the grid + paddings
     ≤1199.98px (large tablet): narrower sidebar, smaller gap
     ≤991.98px (tablet): drop the left helper column
     ≤767.98px (mobile): stack to single column, sidebar on top
     ≤480px (small mobile): account-bar buttons stack, tighter padding

   Inner card paddings (`.op-panel__body`, `.op-account-bar`, etc.)
   also shrink at each step so the form doesn't feel cramped inside
   a now-narrow container.
   ============================================================ */

/* Small laptop (≤1366px) - 14" MacBook viewports */
@media (max-width: 1366px) {
    .op-layout {
        /* Slimmer right column (was 340px) so it doesn't feel like a
           wall against the viewport edge - the gained width goes to
           the main 1fr column, which keeps the sidebar visually
           breathing while staying within the available width. */
        grid-template-columns: 180px 1fr 300px;
        gap: 24px;
        padding: 28px 32px 48px;
    }
    .op-col-left__title {
        font-size: 15px;
    }
    .op-col-left__subtitle {
        font-size: 12.5px;
        line-height: 20px;
    }
}

/* Large tablet (≤1199.98px) */
@media (max-width: 1199.98px) {
    .op-layout {
        grid-template-columns: 160px 1fr 280px;
        gap: 20px;
        padding: 24px 28px 40px;
    }
    .op-panel__header {
        padding: 14px 16px;
    }
    .op-panel__body {
        padding: 16px;
    }
    .op-panel__title {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: -0.48px;
    }
}

/* Tablet (≤991.98px) - drop the helper column */
@media (max-width: 991.98px) {
    .op-layout {
        grid-template-columns: 1fr 300px;
        gap: 18px;
        padding: 20px 18px 36px;
    }
    .op-col-left {
        display: none;
    }
    .op-col-right {
        top: 16px;
    }
    .op-account-bar {
        padding: 12px 0;
        gap: 14px;
        margin-bottom: 12px;
    }
    .op-account-bar__btn {
        padding: 0 16px;
        height: 40px;
        font-size: 13px;
    }
    .op-login-panel__body {
        padding: 20px;
    }
    .op-login-panel .op-login {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .op-login-panel .op-login__divider {
        display: none;
    }
}

/* Mobile (≤767.98px) - stack to single column, sidebar on top */
@media (max-width: 767.98px) {
    .op-layout {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px 14px 32px;
    }
    .op-col-right {
        position: static;
        order: -1;
        top: auto;
    }
    .op-panel {
        border-radius: 7px;
    }
    .op-panel__header {
        padding: 12px 14px;
    }
    .op-panel__body {
        padding: 14px;
    }
    .op-panel__title {
        font-size: 15px;
        line-height: 20px;
    }
    /* Account bar: title + subtitle on top, buttons full-width row below.
       The desktop side-by-side layout cramps both groups at ≤640px. */
    .op-account-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 0 0 14px;
        margin-bottom: 14px;
        border-bottom: 1px solid #E2E2E2;
    }
    .op-account-bar__actions {
        width: 100%;
    }
    .op-account-bar__btn {
        flex: 1;
        padding: 0 14px;
    }
    .op-login-panel__body {
        padding: 16px;
    }
    .op-section-title {
        font-size: 14px;
    }
}

/* Small mobile (≤480px) - final tightening */
@media (max-width: 480px) {
    .op-layout {
        padding: 12px 10px 24px;
        gap: 14px;
    }
    .op-panel__header {
        padding: 10px 12px;
    }
    .op-panel__body {
        padding: 12px;
    }
    .op-panel__title {
        font-size: 14px;
        line-height: 19px;
        letter-spacing: -0.42px;
    }
    .op-account-bar__btn {
        height: 38px;
        font-size: 12.5px;
    }
    .op-account-bar__title {
        font-size: 14px;
    }
    .op-account-bar__subtitle {
        font-size: 12px;
        line-height: 17px;
    }
}


/* ============================================================
   CHECKOUT - Account bar (login / register)
   ============================================================ */

.op-account-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    margin-bottom: 16px;
}

.op-account-bar__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.op-account-bar__title {
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: -0.54px;
    color: #181E28;
}

.op-account-bar__subtitle {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.42px;
    color: #8A8A8A;
}

.op-account-bar__actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.op-account-bar__btn {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.42px;
    border-radius: 7px;
    padding: 0 24px;
    height: 44px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.op-account-bar__btn--login {
    background: #E2E2E2;
    border: 1px solid #707070;
    color: #000;
}

.op-account-bar__btn--login:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}

.op-account-bar__btn--register {
    background: #1C1C1C;
    border: 1px solid #1C1C1C;
    color: #fff;
}

.op-account-bar__btn--register:hover {
    background: #000;
    border-color: #000;
}

/* Remove top offset in checkout sidebar */
.op-col-right #mini_cart {
    margin-top: 0;
}


/* ============================================================
   CHECKOUT - Login panel (slides down from account bar)
   ============================================================ */

.op-login-panel {
    background: #FBFBFB;
    border: 1px solid #E2E2E2;
    border-radius: 7px;
    margin-bottom: 16px;
    overflow: hidden;
}

.op-login-panel__body {
    padding: 24px;
}

/* Login 2-col layout inside panel */
.op-login-panel .op-login {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 28px;
    align-items: start;
}

.op-login-panel .op-login__divider {
    width: 1px;
    background: #E2E2E2;
    align-self: stretch;
    margin-top: 4px;
}

/* Error state on inputs */
.op-input--error {
    border-color: #dc3545 !important;
}

.op-login-panel [data-field="warning"] {
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}


/* ── Register/Guest form layout ── */
.op-field-row--address {
    grid-template-columns: 1fr 120px;
}

.op-field-optional {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #8A8A8A;
    margin-left: 6px;
}


/* ── Newsletter radio options ── */
.op-field--newsletter label:first-child {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.42px;
    color: #181E28;
    margin-bottom: 8px;
    display: block;
}

.op-newsletter-options {
    display: flex;
    gap: 24px;
    align-items: center;
}

.op-newsletter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #181E28;
    cursor: pointer;
    margin: 0;
}


/* ── Guest form ── */
.op-customer-groups {
    display: flex;
    gap: 16px;
    margin-bottom: 4px;
}

.op-customer-groups .form-check {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Customer group radio - same true-radio look as op-method-option but
   without the card chrome (sits inline in a row). */
.op-customer-groups .form-check .form-check-input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
    background: #FFFFFF;
    border: 2px solid #CFCFCF;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s ease;
}

.op-customer-groups .form-check .form-check-input[type="radio"]:hover {
    border-color: #8C8C8C;
}

.op-customer-groups .form-check .form-check-input[type="radio"]:checked {
    border-color: #181E28;
}

.op-customer-groups .form-check .form-check-input[type="radio"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: #181E28;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.15s ease;
}

.op-customer-groups .form-check .form-check-input[type="radio"]:checked::after {
    transform: translate(-50%, -50%) scale(1);
}

.op-customer-groups .form-check .form-check-input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(24, 30, 40, 0.15);
}

.op-customer-groups .form-check .form-check-label {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    letter-spacing: -0.42px;
    color: #808080;
    cursor: pointer;
}

/* When this group's radio is selected, brighten its label so the
   selection reads at a glance. */
.op-customer-groups .form-check:has(input:checked) .form-check-label {
    color: #181E28;
}

.op-guest-divider {
    height: 1px;
    background: #E2E2E2;
    margin: 16px 0;
}

.op-guest-billing-check {
    background: #fff;
    border: none;
    border-radius: 7px;
    padding: 0;
    margin-top: 8px;
}

.op-required {
    color: #dc3545;
    margin-left: 2px;
}


/* ── Guest form wrapper ── */
.op-guest-form-wrap {
    background: #FBFBFB;
    border: 1px solid #E2E2E2;
    border-radius: 7px;
    padding: 24px;
    margin-bottom: 16px;
}


/* ── Billing address panel ── */
.op-billing-panel {
    background: #FBFBFB;
    border: 1px solid #E2E2E2;
    border-radius: 7px;
    margin-top: 12px;
    overflow: hidden;
}

.op-billing-panel__header {
    padding: 14px 16px;
    border-bottom: 1px solid #E2E2E2;
}

.op-billing-panel__title {
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.45px;
    color: #181E28;
}

.op-billing-panel__body {
    padding: 16px;
}

/* ── Shipping method box ── */
.op-sm-box {
    background: #FBFBFB;
    border: 1px solid #E2E2E2;
    border-radius: 5px;
    margin-top: 16px;
}

.op-sm-box__billing-wrap {
    padding: 0 16px 16px;
}

.op-sm-box__header {
    padding: 16px 16px 12px;
}

.op-sm-box__title {
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: -0.54px;
    color: #000000;
    margin: 0 0 6px;
}

.op-sm-box__subtitle {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: #808080;
    margin: 0;
}

.op-sm-box__body {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Method option row ── (card-style selectable row, shipping / payment / address) */
.op-method-option {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    cursor: pointer;
    margin: 0;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Hover: subtle border darken + faint lift */
.op-method-option:hover {
    border-color: #B8B8B8;
}

/* Card-level selected treatment - modern CSS :has() lets the card react to
   the inner radio without a JS class. Falls back gracefully (no card
   highlight) on the few browsers that don't support :has yet - the radio
   indicator itself still flips, so the user still sees their selection. */
.op-method-option:has(input[type="radio"]:checked) {
    border-color: #181E28;
    background: #FAFAFA;
}

/* Keyboard focus ring around the whole card */
.op-method-option:has(input[type="radio"]:focus-visible) {
    box-shadow: 0 0 0 3px rgba(24, 30, 40, 0.15);
    border-color: #181E28;
}

/* The radio itself - true radio button look: outer ring + inner dot.
   Native input is visually replaced (still focusable & screen-reader-
   reachable; we override appearance, not display). */
.op-method-option input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: #FFFFFF;
    border: 2px solid #CFCFCF;
    border-radius: 50%;
    cursor: pointer;
    margin: 0;
    position: relative;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.op-method-option input[type="radio"]:hover {
    border-color: #8C8C8C;
}

.op-method-option input[type="radio"]:checked {
    background: #FFFFFF;
    border-color: #181E28;
    border-width: 2px;
}

/* The inner dot (true radio appearance, not a check icon). Scales in from
   the centre when the radio is checked. */
.op-method-option input[type="radio"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: #181E28;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.15s ease;
}

.op-method-option input[type="radio"]:checked::after {
    transform: translate(-50%, -50%) scale(1);
}

/* Strip the native focus outline - we surface focus via the card's
   box-shadow ring instead (more visible against the dark background). */
.op-method-option input[type="radio"]:focus {
    outline: none;
}

.op-method-option__name {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    letter-spacing: -0.42px;
    color: #000000;
    flex: 1;
}

/* ── Add new address button ── */
.op-add-address-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: 1px dashed #CCCCCC;
    border-radius: 7px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #808080;
    cursor: pointer;
    margin-top: 8px;
    transition: border-color 0.15s, color 0.15s;
    text-align: left;
}

.op-add-address-btn:hover {
    border-color: #181E28;
    color: #181E28;
}

/* ── Comments ── */
.op-comments-box {
    background: #FBFBFB;
    border: 1px solid #E2E2E2;
    border-radius: 7px;
    padding: 16px;
    margin-top: 16px;
}

.op-comments-box__label {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    letter-spacing: 0px;
    color: #000000;
    margin-bottom: 10px;
    cursor: default;
}

.op-comments-box__textarea {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #EBEBEB;
    border-radius: 3px;
    padding: 10px 12px;
    margin-top: 10px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #181E28;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}

.op-comments-box__textarea:focus {
    border-color: #181E28;
}

/* ── Gift wrap ── (card-style checkbox, same interaction model as .op-method-option) */
.op-gift-wrap {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 16px;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.op-gift-wrap:hover {
    border-color: #B8B8B8;
}

/* Card flips to "selected" treatment when its checkbox is ticked.
   Matches the .op-method-option behaviour so card-style toggleables
   feel like one family. */
.op-gift-wrap:has(input[type="checkbox"]:checked) {
    border-color: #181E28;
    background: #FAFAFA;
}

/* Keyboard focus ring on the card */
.op-gift-wrap:has(input[type="checkbox"]:focus-visible) {
    box-shadow: 0 0 0 3px rgba(24, 30, 40, 0.15);
    border-color: #181E28;
}

/* Indicator - kept circular (theme's brand cue for opt-in toggles like
   gift_wrap and the cart_mini agree/newsletter rows) but with proper
   filled-state semantics: outer ring darkens, inner area fills, white
   tick fades in. Stays visually distinct from the empty-ring + dot
   radio style used by mutually-exclusive options. */
.op-gift-wrap input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: #FFFFFF;
    border: 2px solid #CFCFCF;
    border-radius: 50%;
    cursor: pointer;
    margin: 0;
    position: relative;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.op-gift-wrap input[type="checkbox"]:hover {
    border-color: #8C8C8C;
}

.op-gift-wrap input[type="checkbox"]:focus {
    outline: none;
}

.op-gift-wrap input[type="checkbox"]:checked {
    background: #181E28;
    border-color: #181E28;
}

.op-gift-wrap input[type="checkbox"]::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Pro';
    font-weight: 400;
    font-size: 10px;
    line-height: 1;
    color: #FFFFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.15s ease;
}

.op-gift-wrap input[type="checkbox"]:checked::after {
    transform: translate(-50%, -50%) scale(1);
}

.op-gift-wrap__title {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: -0.39px;
    color: #000000;
}

/* Fee (e.g. "+€3,00") shown next to the gift-wrap label - visual rule
   lives in the shared .op-method-option__price/.op-gift-wrap__fee block
   below so it stays consistent with shipping/payment cost displays. */

/* Unified cost-display style - used by shipping methods, payment methods
   (cod fee), and the gift-wrap row. Sourced from the Adobe XD spec:
   bold 12px/15px Inter (Inter once the @font-face in custom.css is
   uncommented), right-aligned, #000, -0.36px letter-spacing. The "+" sign
   is added in the templates so the styling stays declarative. */
.op-method-option__price,
.op-gift-wrap__fee {
    margin-left: auto;
    color: #000000;
    text-align: right;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 15px;
    letter-spacing: -0.36px;
    opacity: 1;
}

.op-method-option__price {
    flex-shrink: 0;
}

/* ── Sidebar error (near place-order button) ── */
.checkout-sidebar-error {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #C0392B;
    background: #FDF2F1;
    border: 1px solid #F5C6C2;
    border-radius: 7px;
    padding: 10px 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}

.checkout-sidebar-error i {
    flex-shrink: 0;
    margin-top: 1px;
}

/* Inline info notice inside a method panel - used when an address change
   silently changed which method was selected (P2-10). Auto-dismissed by JS. */
.op-method-changed-notice {
    background: #EEF4FB;
    border: 1px solid #C6DAF1;
    color: #1F4F8F;
    border-radius: 7px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.op-method-changed-notice i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 14px;
}

/* Processing (in-flight payment) - reuses the same container but swaps to
   a calm blue palette so the spinner doesn't read as an error. */
.checkout-sidebar-error.checkout-sidebar-error--processing {
    color: #1F4F8F;
    background: #EEF4FB;
    border-color: #C6DAF1;
}

.checkout-sidebar-error.checkout-sidebar-error--processing a {
    color: #1F4F8F;
    text-decoration: underline;
}

/* ── Full-page loading overlay ──
   Shown by JS during panel reloads and save operations so panels don't
   flicker or jump while their content is being refreshed in place. */
.op-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.op-overlay__spinner {
    font-size: 36px;
    color: #fff;
}

/* Confirm wrap holds the payment extension's hidden #button-confirm
   that the sidebar place-order button triggers. Totals/CTA live in
   the sidebar; this wrap must exist in DOM but stay invisible. */
#op-confirm-wrap {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
    padding: 0;
    border: 0;
}


/* ============================================================
   ORDER SUCCESS PAGE - redesign per Adobe XD spec
   ----------------------------------------------------------------
   Adobe XD called for Inter; we use the theme's Inter alias
   (which becomes Inter once the @font-face block in
   custom.css is uncommented).  All sizing/colour/letter-spacing
   values come straight from the design.  Layout is single-column
   on mobile, with a two-column details grid kicking in at ≥768px.
   ============================================================ */

.op-success-page {
    max-width: 760px;
    margin: 24px auto 48px;
    padding: 0 16px;
    font-family: Inter, sans-serif;
    color: #181E28;
}

/* ── Hero (green check + headings) ───────────────────────────── */
.op-success-hero {
    text-align: center;
    margin-bottom: 28px;
}

.op-success-hero__check {
    width: 68px;
    height: 68px;
    margin: 24px auto 18px;
    border-radius: 50%;
    background: #00C21A;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    line-height: 1;
}

.op-success-hero__heading {
    color: #000000;
    text-align: center;
    font-weight: 700;
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -0.84px;
    margin: 0 0 8px;
}

.op-success-hero__subheading {
    color: #252525;
    text-align: center;
    font-weight: 400;
    font-size: 22px;
    line-height: 24px;
    letter-spacing: -0.66px;
    margin: 0;
}

/* ── Order ID strip ──────────────────────────────────────────── */
.op-success-order-id {
    background: #F8F8F8;
    border: 1px solid #EBEBEB;
    border-radius: 3px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 24px 0 12px;
}

.op-success-order-id__label {
    color: #000000;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: -0.45px;
}

.op-success-order-id__value {
    color: #000000;
    text-align: right;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.48px;
}

/* ── Generic card with black banner header ──────────────────── */
.op-success-card {
    background: #FFFFFF;
    border-radius: 7px;
    overflow: hidden;
    margin-bottom: 24px;
}

.op-success-card__banner {
    background: #000000;
    border-radius: 7px 7px 0 0;
    padding: 12px 18px;
}

.op-success-card__banner-title {
    color: #FFFFFF;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: -0.48px;
    margin: 0;
}

.op-success-card__body {
    padding: 14px 14px 18px;
    background: transparent;
}

/* ── Products body - list of product rows ──────────────────── */
.op-success-card__body--products {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 14px 18px;
}

.op-success-product {
    background: #FFFFFF;
    border: 1px solid #F2F2F2;
    border-radius: 2px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.op-success-product__image {
    flex-shrink: 0;
    width: 134px;
    height: 134px;
    background: transparent;
    border-radius: 7px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.op-success-product__image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.op-success-product__info {
    flex: 1;
    min-width: 180px;
}

.op-success-product__name {
    color: #000000;
    text-align: left;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: -0.54px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.op-success-product__model {
    color: #8A8A8A;
    text-align: left;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: -0.39px;
}

.op-success-product__meta {
    margin-left: auto;
    align-self: flex-end;
    display: flex;
    align-items: baseline;
    gap: 22px;
    white-space: nowrap;
}

.op-success-product__qty {
    color: #181E28;
    text-align: right;
    font-weight: 600;
    font-size: 17px;
    line-height: 32px;
    letter-spacing: 0;
}

.op-success-product__price {
    color: #000000;
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -0.6px;
}

/* ── Grand total band (sits under product list, mirrors header) ── */
.op-success-card__footer-band {
    background: #000000;
    border-radius: 0 0 7px 7px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.op-success-card__footer-label {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: -0.48px;
}

.op-success-card__footer-value {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.6px;
}

/* ── Details card - 2-column grid on desktop ───────────────── */
.op-success-details {
    background: #FBFBFB;
    border: 1px solid #E2E2E2;
    border-radius: 5px;
}

.op-success-card__body--grid {
    display: grid;
    grid-template-columns: 1fr;       /* mobile: single column */
    gap: 18px 32px;
    padding: 22px 22px 26px;
}

@media (min-width: 768px) {
    .op-success-card__body--grid {
        grid-template-columns: 1fr 1fr;
    }
    .op-success-detail--full {
        grid-column: 1 / -1;
    }
}

.op-success-detail__label {
    color: #252525;
    text-align: left;
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: -0.39px;
    margin-bottom: 4px;
}

.op-success-detail__value {
    color: #252525;
    text-align: left;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: -0.42px;
}

/* ── Email reminder (info icon + line) ─────────────────────── */
.op-success-email-note {
    text-align: center;
    margin: 32px auto 0;
    max-width: 540px;
    padding: 0 12px;
}

.op-success-email-note__icon {
    width: 27px;
    height: 27px;
    margin: 0 auto 12px;
    color: #000000;
    font-size: 27px;
    line-height: 32px;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.op-success-email-note__text {
    color: #252525;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.42px;
    margin: 0;
}

/* ── Responsive product card ───────────────────────────────── */
@media (max-width: 575px) {
    .op-success-product {
        gap: 12px;
    }

    .op-success-product__image {
        width: 96px;
        height: 96px;
    }

    .op-success-product__name {
        font-size: 16px;
        line-height: 19px;
    }

    .op-success-product__meta {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    .op-success-product__qty {
        font-size: 15px;
        line-height: 24px;
    }

    .op-success-product__price {
        font-size: 17px;
        line-height: 22px;
    }

    .op-success-hero__heading {
        font-size: 22px;
        line-height: 28px;
        letter-spacing: -0.66px;
    }

    .op-success-hero__subheading {
        font-size: 17px;
        line-height: 22px;
        letter-spacing: -0.5px;
    }
}


/* ============================================================
   CART PAGE - Responsive (tablet & mobile)
   ============================================================
   The cart uses `col-12 col-lg-3/6/3` so the three columns stack
   into one column below 992px naturally. What needs adjusting:
   per-section spacing, the horizontal `.cart-item-card` layout
   (image + title + stepper + right column doesn't fit on a phone),
   the 3-up `.cr-grid` related cards, and a few paddings.
   ============================================================ */

/* TABLET + MOBILE (≤991.98px) - columns stacked. Mostly spacing
   adjustments so the three column blocks read as separate "sections"
   instead of running together. */
@media (max-width: 991.98px) {
    #checkout-cart {
        padding-top: 24px;
        padding-bottom: 40px;
    }

    .cart-col-left {
        margin-bottom: 8px;
    }
    .cart-col-main {
        margin-bottom: 12px;
    }
    .cart-col-right {
        padding-top: 0;          /* no longer needs to align beside main */
    }

    .cart-shipping-progress {
        padding: 18px 18px;
    }
}

/* MOBILE (≤767.98px) - restructure `.cart-item-card`.
   Desktop layout: [image 134] | [title/model | stepper | actions/total].
   At phone widths the three sub-columns in `.cart-item-body` get
   squeezed and the right column wraps awkwardly. Switch the body
   to a column with a bottom action row, and shrink the image. */
@media (max-width: 767.98px) {
    .cart-item-card {
        min-height: 0;
        align-items: flex-start;
        position: relative;
    }
    /* Wishlist + remove icons float to the top-right corner of
       the card. On the desktop layout they live in `.cart-item-
       right` (a column with total below). On mobile we want them
       as discrete tap targets at the corner, freeing the bottom
       row for [stepper | total]. */
    .cart-item-actions {
        position: absolute;
        top: 10px;
        right: 12px;
        z-index: 2;
    }
    .cart-item-image,
    .cart-item-image img {
        flex: 0 0 100px;
        width: 100px;
        height: 100px;
    }
    .cart-item-image {
        margin: 12px 0 12px 10px;
    }
    /* Switch the body to a 2-row grid: title block spans the top,
       stepper and total share the bottom row on opposite ends.
       Actions are absolute-positioned (top right of the card) so
       they don't participate in this layout. */
    .cart-item-body {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "info    info"
            "stepper total";
        column-gap: 12px;
        row-gap: 10px;
        padding: 12px;
        padding-right: 56px;     /* room so title doesn't run under the corner icons */
    }
    .cart-item-info {
        grid-area: info;
        gap: 1px;
    }
    .cart-item-stepper-col {
        grid-area: stepper;
        padding: 0;
        justify-self: start;
        align-self: center;
    }
    .cart-item-right {
        grid-area: total;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
        gap: 12px;
    }
    .cart-item-total {
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
    }
    .cart-item-total-price {
        font-size: 17px;
        line-height: 22px;
    }
    .stepper-btn {
        width: 30px;
        height: 32px;
    }
    .stepper-qty {
        min-width: 30px;
        font-size: 16px;
        line-height: 32px;
    }
    /* Title slightly smaller so a long name doesn't push the card
       to wrap clumsily next to a 100px image. */
    .cart-item-title a {
        font-size: 13px;
        line-height: 18px;
    }

    /* Related-products grid: 2 cols on mobile so the cards keep
       a usable size (3-up at <768px makes each card ~33% wide,
       which is too tight for image + brand + name + price + CTA). */
    .cr-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cr-card__name {
        font-size: 13px;
        line-height: 17px;
    }
    .cr-card__price-current {
        font-size: 13px;
        line-height: 32px;
    }
    .cr-card__cart {
        height: 38px;
    }

    /* Sidebar boxes: tighten padding so they don't dominate at
       narrow widths. */
    .cart-sidebar-box {
        padding: 14px;
    }
    .cart-totals-box {
        padding: 18px 14px 14px;
    }

    /* Heading block: align left, smaller continue-shopping CTA. */
    .cart-heading {
        font-size: 17px;
        margin-bottom: 6px;
    }
    .cart-subtitle {
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 14px;
    }
}

/* SMALL MOBILE (≤480px) - single-column related grid, even tighter
   item card spacing on the smallest devices. */
@media (max-width: 480px) {
    .cart-item-image,
    .cart-item-image img {
        flex: 0 0 86px;
        width: 86px;
        height: 86px;
    }
    .cart-item-image {
        margin: 10px 0 10px 8px;
    }
    .cart-item-body {
        padding: 10px;
        padding-right: 50px;     /* keep room for the absolute-positioned action icons */
    }
    .cart-shipping-progress {
        padding: 14px 14px;
    }
    .cart-shipping-progress-text {
        font-size: 13px;
        line-height: 18px;
        text-align: center;
    }
    /* Totals row grand value scaled - 28px is huge in a 14px box. */
    .cart-total-row--grand .cart-total-value {
        font-size: 22px;
    }
    .cart-checkout-btn {
        font-size: 15px;
        height: 44px;
    }
}


/* ============================================================
   CHECKOUT - Mobile responsive overrides
   ============================================================
   Placed last so any rule here wins over earlier desktop defaults
   that were written after the original responsive cascade
   (lines 2547-2698). Covers the black checkout-header bar (which
   had no mobile rules at all), horizontal-overflow clipping of
   the columns, and confirm/totals sizing.
   ============================================================ */

/* Keep the global fixed-header behaviour on checkout (position,
   top/left/right, width all stay from the storefront rule); only
   override the white background - the checkout header is black. */
@media (max-width: 991.98px) {
    #header.checkout_header {
        background: #000;
    }
}

@media (max-width: 767.98px) {
    /* ── Checkout header (black bar): logo + continue + phone ── */
    .checkout_header {
        border-radius: 0;
        height: auto;
        min-height: 54px;
    }
    .checkout-header-inner {
        padding: 8px 14px;
        gap: 12px;
        min-height: 54px;
        height: auto;
    }
    .checkout-header-left {
        gap: 12px;
        min-width: 0;
        flex: 1 1 auto;
    }
    .checkout-header-logo img {
        height: 28px;
    }
    .checkout-header-continue {
        font-size: 12px;
        line-height: 1.2;
    }
    .checkout-header-support {
        gap: 6px;
        flex: 0 0 auto;
    }
    .checkout-header-support img {
        width: 22px;
        height: 28px;
    }
    .checkout-header-support-label {
        display: none;
    }
    .checkout-header-support-phone {
        font-size: 16px;
        line-height: 1.2;
    }

    /* ── Layout overflow: stop clipping inner columns ── */
    .checkout_body .checkout-wrap {
        overflow: visible;
    }
    .op-layout {
        width: 100%;
        max-width: 100vw;
        overflow-x: clip;
    }
    html.checkout_checkout,
    html.checkout_checkout body {
        overflow-x: hidden;
    }

    /* ── Sidebar (mini-cart) on mobile: send to the BOTTOM. The
       earlier responsive cascade (line 2630) sets order: -1 which
       puts the cart on top; override that here. ── */
    .op-col-right {
        width: 100%;
        max-width: 100%;
        order: 1;
    }
    .op-col-main {
        order: 0;
    }

    /* ── Form field rows: stack vertically on mobile so each input
       gets full width instead of squeezing two side-by-side. ── */
    .op-field-row {
        flex-direction: column;
        gap: 12px;
    }
    .op-field-row--address {
        grid-template-columns: 1fr;
    }

    /* ── Cascade-order correction: re-apply mobile values for
       .op-account-bar that get clobbered by the desktop defaults
       written later in the file (line 2705+). ── */
    .op-account-bar {
        align-items: stretch;
        padding: 0 0 14px;
        margin-bottom: 14px;
    }
    .op-login-panel .op-login {
        grid-template-columns: 1fr;
    }
    .op-login-panel .op-login__divider {
        display: none;
    }

    /* ── Confirm grid (product rows) ── */
    .op-confirm__row {
        grid-template-columns: 1fr auto;
        column-gap: 10px;
        row-gap: 4px;
    }
    .op-confirm__name {
        grid-column: 1 / -1;
    }
    .op-confirm__model {
        font-size: 12px;
    }
    .op-confirm__qty {
        font-size: 12px;
        justify-self: start;
    }
    .op-confirm__price {
        justify-self: end;
    }

    /* ── Confirm totals box ── */
    .op-confirm__totals {
        padding: 14px;
    }
    .op-confirm__total-row--grand .op-confirm__total-value {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .checkout-header-inner {
        padding: 6px 10px;
        gap: 8px;
    }
    .checkout-header-logo img {
        height: 24px;
    }
    /* Hide continue-link text but keep the back-arrow as a tap target */
    .checkout-header-continue {
        font-size: 0;
        gap: 0;
    }
    .checkout-header-continue i {
        font-size: 14px;
    }
    .checkout-header-support img {
        width: 20px;
        height: 26px;
    }
    .checkout-header-support-phone {
        font-size: 15px;
    }
}