/* Rihalo Store UI v0.3.5 — stable classic checkout layout. */
body.rihalo-checkout-page {
    --rihalo-checkout-ink: #262229;
    --rihalo-checkout-muted: #6f6965;
    --rihalo-checkout-line: #e4dfdb;
    --rihalo-checkout-soft: #faf9f8;
    --rihalo-checkout-orange: #f15a24;
}

body.rihalo-checkout-page .site-main,
body.rihalo-checkout-page .content-area,
body.rihalo-checkout-page .entry-content {
    overflow: visible;
}

body.rihalo-checkout-page .woocommerce {
    width: min(100% - 48px, 1280px);
    margin-inline: auto;
}

body.rihalo-checkout-page .woocommerce-notices-wrapper,
body.rihalo-checkout-page .woocommerce-form-coupon-toggle,
body.rihalo-checkout-page .woocommerce-form-login-toggle,
body.rihalo-checkout-page .rihalo-checkout-intro,
body.rihalo-checkout-page form.woocommerce-checkout {
    width: min(100%, 1160px);
    margin-inline: auto;
    box-sizing: border-box;
}

body.rihalo-checkout-page .rihalo-checkout-intro {
    padding: 34px 0 8px;
}

body.rihalo-checkout-page .rihalo-checkout-intro h1 {
    margin: 0 0 7px !important;
    color: #1d1a1f !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-size: clamp(30px, 3vw, 38px) !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
}

body.rihalo-checkout-page .rihalo-checkout-intro p {
    margin: 0 !important;
    color: var(--rihalo-checkout-muted) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

body.rihalo-checkout-page .woocommerce-notices-wrapper {
    margin-top: 20px;
}

body.rihalo-checkout-page .woocommerce-error,
body.rihalo-checkout-page .woocommerce-message,
body.rihalo-checkout-page .woocommerce-info {
    margin: 0 0 16px !important;
    padding: 14px 18px 14px 46px !important;
    border: 1px solid #e6dfda !important;
    border-left: 3px solid var(--rihalo-checkout-orange) !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #393438 !important;
    line-height: 1.45 !important;
}

/* WooCommerce classic themes commonly float these elements and give the review
   column a percentage width. A grid item keeps that legacy width unless it is
   explicitly reset, which was the cause of the very narrow order card in v0.3.4. */
body.rihalo-checkout-page form.woocommerce-checkout {
    display: grid !important;
    grid-template-columns: minmax(0, 650px) minmax(0, 420px) !important;
    justify-content: space-between !important;
    column-gap: 70px !important;
    row-gap: 0 !important;
    align-items: start !important;
    padding: 32px 0 72px !important;
}

body.rihalo-checkout-page #customer_details,
body.rihalo-checkout-page #order_review_heading,
body.rihalo-checkout-page #order_review {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

body.rihalo-checkout-page #customer_details {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
}

body.rihalo-checkout-page #customer_details.col2-set {
    display: block !important;
}

body.rihalo-checkout-page #customer_details .col-1,
body.rihalo-checkout-page #customer_details .col-2 {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.rihalo-checkout-page #order_review_heading {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    padding: 0 0 16px !important;
    color: #1d1a1f !important;
    font-family: inherit !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

body.rihalo-checkout-page #order_review {
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding: 26px 28px !important;
    border: 1px solid var(--rihalo-checkout-line) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 10px 34px rgba(39, 34, 31, .055) !important;
}

body.rihalo-checkout-page .woocommerce-billing-fields > h3,
body.rihalo-checkout-page .woocommerce-shipping-fields > h3 {
    margin: 0 0 22px !important;
    color: #1d1a1f !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-size: 30px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
}

body.rihalo-checkout-page form .form-row {
    float: none !important;
    width: 100% !important;
    margin: 0 0 17px !important;
}

body.rihalo-checkout-page form .form-row label {
    margin: 0 0 7px !important;
    color: #383338 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

body.rihalo-checkout-page form input.input-text,
body.rihalo-checkout-page form textarea,
body.rihalo-checkout-page form select,
body.rihalo-checkout-page .select2-container .select2-selection--single {
    width: 100% !important;
    min-height: 50px !important;
    padding: 10px 13px !important;
    border: 1px solid #cfc9c5 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #2b272c !important;
    box-sizing: border-box !important;
}

body.rihalo-checkout-page .woocommerce-checkout-review-order-table {
    width: 100% !important;
    table-layout: auto !important;
    margin: 0 0 20px !important;
    border: 0 !important;
    border-collapse: collapse !important;
}

body.rihalo-checkout-page .woocommerce-checkout-review-order-table th,
body.rihalo-checkout-page .woocommerce-checkout-review-order-table td {
    padding: 13px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #eeeae7 !important;
    background: transparent !important;
    color: #393438 !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}

body.rihalo-checkout-page .woocommerce-checkout-review-order-table th.product-total,
body.rihalo-checkout-page .woocommerce-checkout-review-order-table td.product-total {
    width: 86px !important;
    padding-left: 14px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

body.rihalo-checkout-page .rihalo-checkout-item {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    min-width: 0 !important;
}

body.rihalo-checkout-page .rihalo-checkout-item img.rihalo-checkout-item-image {
    display: block !important;
    width: 58px !important;
    height: 58px !important;
    margin: 0 !important;
    border: 1px solid #eee9e5 !important;
    border-radius: 8px !important;
    object-fit: cover !important;
}

body.rihalo-checkout-page .rihalo-checkout-item-name {
    min-width: 0 !important;
    color: #302c30 !important;
    font-size: 13px !important;
    line-height: 1.38 !important;
    font-weight: 500 !important;
}

body.rihalo-checkout-page .woocommerce-checkout-review-order-table .product-quantity {
    color: var(--rihalo-checkout-muted) !important;
    font-weight: 500 !important;
}

body.rihalo-checkout-page .woocommerce-checkout-review-order-table .order-total th,
body.rihalo-checkout-page .woocommerce-checkout-review-order-table .order-total td {
    padding-top: 18px !important;
    color: #1f1c21 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

body.rihalo-checkout-page #payment,
body.rihalo-checkout-page #payment ul.payment_methods,
body.rihalo-checkout-page #payment .place-order {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

body.rihalo-checkout-page #payment {
    margin-top: 18px !important;
    border-radius: 12px !important;
    background: transparent !important;
}

body.rihalo-checkout-page #payment ul.payment_methods {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

body.rihalo-checkout-page #payment ul.payment_methods > li {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 1px solid #ddd7d3 !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

body.rihalo-checkout-page #payment ul.payment_methods > li > label {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 13px 14px !important;
    background: #fff !important;
    color: #29252a !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

body.rihalo-checkout-page #payment ul.payment_methods > li > input[type="radio"] {
    margin-left: 14px !important;
}

body.rihalo-checkout-page #payment ul.payment_methods > li:has(input:checked) {
    border-color: #8d8580 !important;
    box-shadow: inset 0 0 0 1px #8d8580 !important;
}

body.rihalo-checkout-page #payment .payment_box {
    width: auto !important;
    margin: 0 !important;
    padding: 0 14px 14px !important;
    background: #fff !important;
    color: var(--rihalo-checkout-muted) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

body.rihalo-checkout-page #payment .payment_box::before {
    display: none !important;
}

body.rihalo-checkout-page #payment .place-order {
    margin: 20px 0 0 !important;
    padding: 0 !important;
}

body.rihalo-checkout-page #payment #place_order,
body.rihalo-checkout-page #payment .button.alt {
    width: 100% !important;
    min-height: 56px !important;
    margin: 16px 0 0 !important;
    padding: 12px 18px !important;
    border: 1px solid var(--rihalo-checkout-ink) !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

/* Do not recolor gateway-branded buttons (PayPal, Apple Pay, etc.). Only apply
   Rihalo charcoal to WooCommerce's generic place-order button. */
body.rihalo-checkout-page #payment #place_order:not([class*="paypal"]):not([class*="apple"]):not([class*="google"]) {
    background: var(--rihalo-checkout-ink) !important;
    color: #fff !important;
}

body.rihalo-checkout-page .woocommerce-privacy-policy-text,
body.rihalo-checkout-page .woocommerce-terms-and-conditions-wrapper {
    color: var(--rihalo-checkout-muted) !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
}

body.rihalo-checkout-page .woocommerce-privacy-policy-text p {
    margin-bottom: 12px !important;
}

@media (max-width: 1040px) {
    body.rihalo-checkout-page .woocommerce {
        width: min(100% - 32px, 860px);
    }

    body.rihalo-checkout-page form.woocommerce-checkout {
        grid-template-columns: 1fr !important;
        gap: 26px !important;
    }

    body.rihalo-checkout-page #customer_details,
    body.rihalo-checkout-page #order_review_heading,
    body.rihalo-checkout-page #order_review {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    body.rihalo-checkout-page #order_review {
        width: 100% !important;
    }
}

@media (max-width: 560px) {
    body.rihalo-checkout-page .woocommerce {
        width: min(100% - 20px, 560px);
    }

    body.rihalo-checkout-page .rihalo-checkout-intro {
        padding-top: 24px;
    }

    body.rihalo-checkout-page form.woocommerce-checkout {
        padding-top: 20px !important;
        padding-bottom: 48px !important;
    }

    body.rihalo-checkout-page #order_review {
        padding: 18px 16px !important;
        border-radius: 14px !important;
    }

    body.rihalo-checkout-page .woocommerce-billing-fields > h3 {
        font-size: 26px !important;
    }

    body.rihalo-checkout-page .rihalo-checkout-item {
        grid-template-columns: 50px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body.rihalo-checkout-page .rihalo-checkout-item img.rihalo-checkout-item-image {
        width: 50px !important;
        height: 50px !important;
    }
}