:root {
        --page: #ffffff;
        --summary-bg: #f1f1f1;
        --surface-soft: #f4f4f4;
        --surface-disabled: #f4f4f4;
        --payment-head: #f4f8f1;
        --text: #000000;
        --muted: #707070;
        --border: #dedede;
        --green: #aa267c;
        --green-dark: #aa267c;
        --radius: 10px;
        --shell: 982px;
        --left: 500px;
        --right: 401px;
        --gap: 40px;
    }

    * {
        box-sizing: border-box;
    }

    html,
    body {
        margin: 0;
        min-height: 100%;
    }

    body {
        color: var(--text);
        background: var(--page);
        font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        font-size: 13px;
        line-height: 1.35;
        -webkit-font-smoothing: antialiased;
    }

    button,
    input,
    select {
        font: inherit;
        color: inherit;
    }

    a {
        color: inherit;
    }

    .site-header {
        height: 74px;
        background: #fff;
        border-bottom: 1px solid var(--border);
    }

    .header-inner {
        width: var(--shell);
        height: 73px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .brand {
        display: block;
        width: 110px;
        height: 40px;
        overflow: hidden;
    }

    .brand img {
        display: block;
        width: 110px;
        height: 40px;
        object-fit: contain;
    }

    .cart-button {
        width: 30px;
        height: 40px;
        padding: 0;
        display: grid;
        place-items: center;
        border: 0;
        background: transparent;
        color: var(--green);
        cursor: pointer;
    }

    .cart-button svg {
        width: 22px;
        height: 22px;
    }

    .checkout-main {
        position: relative;
        min-height: calc(100vh - 74px);
        overflow: hidden;
        background: #fff;
    }

    .checkout-main::after {
        content: "";
        position: absolute;
        z-index: 0;
        top: 0;
        bottom: 0;
        left: calc(50% + 50px);
        right: 0;
        background: var(--summary-bg);
    }

    .main-shell {
        position: relative;
        z-index: 1;
        width: var(--shell);
        margin: 0 auto;
        display: grid;
        grid-template-columns: var(--left) 1px var(--right);
        column-gap: var(--gap);
        align-items: stretch;
    }

    .vertical-divider {
        background: var(--border);
        min-height: calc(100vh - 74px);
    }

    .form-column,
    .summary-column {
        min-width: 0;
    }

    .form-column {
        padding: 41px 0 64px;
    }

    .summary-column {
        padding: 41px 0 80px;
        background: var(--summary-bg);
    }

    .checkout-section h2,
    .checkout-section h3,
    .checkout-section p {
        margin: 0;
    }

    .checkout-section h2 {
        font-family: "Inter Display", Inter, sans-serif;
        font-size: 20px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: 0;
    }

    .checkout-section h3 {
        font-family: "Inter Display", Inter, sans-serif;
        font-size: 16px;
        line-height: 1.3;
        font-weight: 700;
    }

    .section-heading-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 13px;
    }

    .signin-link {
        color: var(--green);
        font-size: 12px;
        text-decoration: underline;
        text-underline-offset: 1px;
    }

    .field {
        position: relative;
        width: 100%;
        height: 49px;
    }

    .field input,
    .field select,
    .discount-row input {
        width: 100%;
        height: 100%;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        outline: 0;
        background: #fff;
        padding: 0 14px;
        color: #222;
        transition: border-color .12s, box-shadow .12s;
    }

    .field input::placeholder,
    .discount-row input::placeholder {
        color: #707070;
        opacity: 1;
    }

    .field input:focus,
    .field select:focus,
    .discount-row input:focus {
        border-color: #8a8a8a;
        box-shadow: 0 0 0 1px #8a8a8a;
    }

    .field-with-icon input {
        padding-right: 43px;
    }

    .field-icon,
    .field-svg {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: #666;
    }

    .help-icon {
        width: 18px;
        height: 18px;
        border: 1.5px solid currentColor;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
    }

    .field-svg {
        width: 20px;
        height: 20px;
    }

    .check-row {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 18px;
        margin-top: 10px;
        cursor: pointer;
        user-select: none;
    }

    .check-row input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .check-row .box {
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
        border: 1px solid var(--border);
        border-radius: 7px;
        background: #fff;
    }

    .check-row.checked .box {
        display: grid;
        place-items: center;
        color: #fff;
        background: var(--green);
        border-color: var(--green);
    }

    .check-row.checked .box svg {
        width: 14px;
        height: 14px;
    }

    .contact-section+.delivery-section {
        margin-top: 33px;
    }

    .delivery-section h2 {
        margin-bottom: 14px;
    }

    .floating-select {
        display: block;
    }

    .floating-select select {
        appearance: none;
        padding: 17px 42px 4px 14px;
        font-size: 13px;
    }

    .floating-label {
        position: absolute;
        z-index: 2;
        left: 14px;
        top: 7px;
        color: #626262;
        font-size: 10px;
        line-height: 1;
        pointer-events: none;
    }

    .plain-select select {
        appearance: none;
        padding-right: 42px;
        color: #707070;
    }

    .select-chevron {
        position: absolute;
        top: 50%;
        right: 14px;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        color: #616161;
        pointer-events: none;
    }

    .field-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 10px;
    }

    .delivery-section>.field:not(.floating-select) {
        margin-top: 10px;
    }

    .save-check {
        margin-top: 10px;
    }

    .shipping-section {
        margin-top: 25px;
    }

    .shipping-section h3 {
        margin-bottom: 12px;
    }

    .shipping-note {
        height: 51px;
        border-radius: var(--radius);
        background: #f5f5f5;
        color: #707070;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 16px;
    }

    .payment-section {
        margin-top: 33px;
    }

    .section-subtext {
        margin-top: 3px !important;
        color: #707070;
        font-size: 13px;
    }

    .payment-card {
        margin-top: 15px;
        border: 1px solid var(--border);
        border-radius: 11px;
        overflow: hidden;
        background: var(--surface-soft);
    }

    .payment-card-header {
        height: 52px;
        margin: -1px -1px 0;
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--payment-head);
        border: 1px solid var(--green);
        border-radius: 11px 11px 0 0;
    }

    .payment-card-header strong {
        font-size: 13px;
        font-weight: 700;
    }

    .mini-card-icon {
        width: 40px;
        height: 28px;
        display: grid;
        place-items: center;
    }

    .mini-card-icon svg {
        width: 38px;
        height: 27px;
        display: block;
    }

    .payment-card-body {
        padding: 14px 14px 15px;
    }

    .testing-copy {
        line-height: 1.4;
    }

    .testing-copy strong {
        display: block;
        margin-bottom: 5px;
        font-size: 13px;
    }

    .testing-copy p {
        margin: 0;
    }

    .testing-copy ul {
        margin: 1px 0 0 17px;
        padding: 0;
    }

    .testing-copy li {
        margin: 0;
    }

    .testing-copy a {
        display: inline-block;
        margin-top: 2px;
        color: #707070;
        text-decoration: underline;
        text-underline-offset: 1px;
    }

    .payment-fields {
        margin-top: 22px;
    }

    .payment-fields>.field {
        height: 48px;
    }

    .payment-grid {
        margin-top: 10px;
    }

    .payment-grid .field {
        height: 48px;
    }

    .payment-fields>.field:last-child {
        margin-top: 10px;
    }

    .billing-check {
        margin-top: 14px;
    }

    .pay-button {
        width: 100%;
        height: 49px;
        margin-top: 38px;
        border: 0;
        border-radius: 10px;
        background: var(--green-dark);
        color: #fff;
        font-weight: 700;
        cursor: pointer;
    }

    .checkout-footer {
        margin-top: 48px;
        padding-top: 17px;
        border-top: 1px solid var(--border);
        display: flex;
        gap: 17px;
        align-items: center;
    }

    .checkout-footer a {
        color: var(--green);
        font-size: 12px;
        text-decoration: underline;
        text-underline-offset: 1px;
    }

    .product-row {
        min-height: 66px;
        display: grid;
        grid-template-columns: 66px 1fr auto;
        gap: 14px;
        align-items: center;
    }

    .product-image {
        display: block;
        width: 66px;
        height: 66px;
        object-fit: cover;
    }

    .product-copy {
        align-self: center;
        min-width: 0;
    }

    .product-name {
        font-size: 13px;
        line-height: 1.35;
        white-space: nowrap;
    }

    .product-variant {
        margin-top: 1px;
        color: #707070;
        font-size: 11px;
    }

    .product-price {
        align-self: start;
        margin-top: 14px;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
    }

    .discount-row {
        display: grid;
        grid-template-columns: 1fr 68px;
        gap: 10px;
        height: 50px;
        margin-top: 19px;
    }

    .discount-row input {
        padding: 0 14px;
    }

    .discount-row button {
        border: 1px solid #dfdfdf;
        border-radius: 10px;
        background: #e9e9e9;
        color: #777;
        font-weight: 700;
        cursor: default;
    }

    .totals {
        margin-top: 35px;
    }

    .total-line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 24px;
    }

    .total-line strong {
        font-weight: 500;
    }

    .total-line .muted {
        color: #707070;
    }

    .grand-total {
        margin-top: 13px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .grand-total>strong {
        font-size: 20px;
    }

    .grand-price {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }

    .grand-price span {
        color: #707070;
        font-size: 11px;
    }

    .grand-price b {
        font-size: 22px;
        line-height: 1;
    }

    @media (max-width: 1099px) and (min-width: 768px) {
        :root {
            --gap: 26px;
        }

        .header-inner,
        .main-shell {
            width: calc(100% - 48px);
        }

        .main-shell {
            grid-template-columns: minmax(0, 1.15fr) 1px minmax(0, .9fr);
        }

        .checkout-main::after {
            left: 56%;
        }
    }

    @media (max-width: 767px) {
        body {
            font-size: 14px;
        }

        .site-header {
            height: 64px;
        }

        .header-inner {
            width: auto;
            height: 63px;
            margin: 0;
            padding: 0 16px;
        }

        .brand {
            width: 99px;
            height: 36px;
        }

        .brand img {
            width: 99px;
            height: 36px;
        }

        .checkout-main {
            overflow: visible;
        }

        .checkout-main::after {
            display: none;
        }

        .main-shell {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .vertical-divider {
            display: none;
        }

        .summary-column {
            order: -1;
            padding: 20px 16px 24px;
            border-bottom: 1px solid var(--border);
            background: var(--summary-bg);
        }

        .form-column {
            padding: 28px 16px 36px;
        }

        .checkout-section h2 {
            font-size: 20px;
        }

        .field {
            height: 52px;
        }

        .field-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .payment-grid {
            grid-template-columns: 1fr;
        }

        .payment-card-body {
            padding: 14px;
        }

        .payment-fields>.field,
        .payment-grid .field {
            height: 52px;
        }

        .product-row {
            grid-template-columns: 64px 1fr auto;
        }

        .product-image {
            width: 64px;
            height: 64px;
        }

        .discount-row {
            margin-top: 18px;
        }

        .totals {
            margin-top: 24px;
        }

        .pay-button {
            height: 52px;
            margin-top: 30px;
        }

        .checkout-footer {
            margin-top: 36px;
            flex-wrap: wrap;
        }
    }

    .remove-cart-btn {
        position: absolute;
        top: -5px;
        right: -5px;
        width: 24px;
        height: 24px;
        border: none;
        border-radius: 50%;
        background: #fff;
        color: #313030;
        font-size: 14px;
        cursor: pointer;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 1px 5px rgba(0, 0, 0, .15);
    }

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

    .check-row input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .check-row {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
    }

    .check-row .box {
        width: 18px;
        height: 18px;
        border: 1px solid #999;
        border-radius: 3px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .check-row input[type="checkbox"]:checked+.box {
        background: #000;
        border-color: #000;
    }

    .check-row input[type="checkbox"]:checked+.box:after {
        content: "✓";
        color: #fff;
        font-size: 12px;
    }

    .payment-method-section {
        margin-top: 25px;
    }

    .payment-method-section h3 {
        margin-bottom: 4px;
        font-size: 16px;
        font-weight: 700;
    }

    .payment-method-subtitle {
        margin: 0 0 15px !important;
        color: #707070;
        font-size: 13px;
    }

    .payment-methods {
        width: 100%;
        border: 1px solid var(--border);
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
    }

    .payment-method-row {
        position: relative;
        min-height: 54px;
        padding: 0 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        background: #fff;
        cursor: pointer;
        border-bottom: 1px solid var(--border);
    }

    .payment-method-row:last-child {
        border-bottom: 0;
    }

    .payment-method-row:has(input:checked) {
        background: #f5f5f5;
    }

    .payment-method-left {
        display: flex;
        align-items: center;
        gap: 11px;
        min-width: 0;
    }

    .payment-method-row input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .payment-radio {
        position: relative;
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        border: 1px solid #d1d1d1;
        border-radius: 50%;
        background: #fff;
    }

    .payment-method-row input:checked+.payment-radio {
        border: 5px solid #555;
    }

    .payment-method-name {
        font-size: 13px;
        color: #111;
    }

    .payment-method-icon {
        flex-shrink: 0;
        font-size: 12px;
        font-weight: 700;
    }

    .cash-icon {
        width: 31px;
        height: 24px;
        display: grid;
        place-items: center;
        border-radius: 5px;
        background: #f5d73b;
        color: #222;
        font-size: 15px;
    }

    .instapay-icon {
        color: #6b329f;
        font-weight: 800;
    }

    .vodafone-icon {
        color: #e60000;
        font-weight: 800;
    }

    @media (max-width: 767px) {
        .payment-method-row {
            min-height: 56px;
        }
    }