/* =========================================
   HYPERCASH CHECKOUT — Insider Store Style
   Full theme isolation via #hc-checkout
   ========================================= */

:root {
    --hc-primary:            #1C1B1B;
    --hc-primary-hover:      #333232;
    --hc-secondary:          #F6F6F6;
    --hc-secondary-hover:    #EBEBEB;
    --hc-bg:                 #FFFFFF;
    --hc-bg-subdued:         #F1F1F1;
    --hc-text:               #000000;
    --hc-text-subdued:       #707070;
    --hc-text-contrast:      #FFFFFF;
    --hc-text-link:          #1C1B1B;
    --hc-border:             #DEDEDE;
    --hc-border-section:     #D1D1D1;
    --hc-border-focus:       #1C1B1B;
    --hc-success:            #2e7d32;
    --hc-error:              #d32f2f;
    --hc-radius:             8px;
    --hc-radius-xl:          12px;
    --hc-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Helvetica, Arial, sans-serif,
               'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --hc-duration: 0.2s;
    --hc-easing:   ease-in-out;
}

/* ========== CART PAGE: reduce top gap ========== */
body.woocommerce-cart .page-wrapper {
    padding-top: 10px !important;
}

/* ========== HIDE WOOCOMMERCE DEFAULTS ========== */
.woocommerce-breadcrumb,
.page-title,
.entry-header,
.woocommerce-info,
.woocommerce-NoticeGroup,
body.woocommerce-checkout .site-header .cart-contents,
body.woocommerce-checkout footer {
    display: none !important;
}

/* Kill Flatsome theme wrappers around checkout content only */
/* Flatsome structure: .page-wrapper > .row > .col > .entry-content > #hc-checkout */
body.woocommerce-checkout:not(.woocommerce-order-received) #content .row,
body.woocommerce-checkout:not(.woocommerce-order-received) #content .row .col,
body.woocommerce-checkout:not(.woocommerce-order-received) #content .row .large-12,
body.woocommerce-checkout:not(.woocommerce-order-received) #content .page-wrapper,
body.woocommerce-checkout:not(.woocommerce-order-received) #content .container,
body.woocommerce-checkout:not(.woocommerce-order-received) #content .row-main,
body.woocommerce-checkout:not(.woocommerce-order-received) .page-content,
body.woocommerce-checkout:not(.woocommerce-order-received) .entry-content,
body.woocommerce-checkout:not(.woocommerce-order-received) .content-area,
body.woocommerce-checkout:not(.woocommerce-order-received) .site-content,
body.woocommerce-checkout:not(.woocommerce-order-received) .site-main,
body.woocommerce-checkout:not(.woocommerce-order-received) main#main,
body.woocommerce-checkout:not(.woocommerce-order-received) article,
body.woocommerce-checkout:not(.woocommerce-order-received) #primary,
body.woocommerce-checkout:not(.woocommerce-order-received) #content,
body.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce,
body.woocommerce-checkout:not(.woocommerce-order-received) .page-wrapper > .container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* Kill page-wrapper horizontal padding */
body.woocommerce-checkout:not(.woocommerce-order-received) .page-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Kill Flatsome .page-wrapper padding (30px top/bottom by default) */
body.woocommerce-checkout:not(.woocommerce-order-received) #content.page-wrapper,
body.woocommerce-checkout:not(.woocommerce-order-received) .page-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.woocommerce-checkout:not(.woocommerce-order-received) .row-main,
body.woocommerce-checkout:not(.woocommerce-order-received) .col-inner,
body.woocommerce-checkout:not(.woocommerce-order-received) .large-12.col {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Full-width checkout container */
#hc-checkout {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ========== GLOBAL THEME RESET ========== */
#hc-checkout,
#hc-checkout *,
#hc-checkout *::before,
#hc-checkout *::after {
    box-sizing: border-box !important;
    font-family: var(--hc-font) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

#hc-checkout {
    color: var(--hc-text) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5 !important;
    font-size: 14px !important;
}

#hc-checkout h1,
#hc-checkout h2,
#hc-checkout h3,
#hc-checkout h4,
#hc-checkout h5,
#hc-checkout h6 {
    color: var(--hc-text) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

#hc-checkout a {
    color: var(--hc-text-link) !important;
    text-decoration: none !important;
}

#hc-checkout a:hover {
    text-decoration: underline !important;
}

/* ========== LAYOUT: 2 COLUMNS ========== */
#hc-checkout .hc-shell {
    display: grid !important;
    grid-template-columns: 55fr 45fr !important;
    min-height: 100vh !important;
}

#hc-checkout .hc-main-col {
    background: var(--hc-bg-subdued) !important;
    display: flex !important;
    justify-content: flex-end !important;
}

#hc-checkout .hc-main-inner {
    max-width: 580px !important;
    width: 100% !important;
    padding: 38px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 26px !important;
}

#hc-checkout .hc-summary-col {
    background: var(--hc-bg) !important;
    border-left: 0.8px solid var(--hc-border-section) !important;
}

#hc-checkout .hc-summary-inner {
    max-width: 480px !important;
    padding: 38px !important;
    position: sticky !important;
    top: 0 !important;
}

/* ========== HEADER ========== */
#hc-checkout .hc-header {
    border-bottom: 0.8px solid var(--hc-border-section) !important;
    padding: 0 0 14px 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

#hc-checkout .hc-logo {
    display: inline-block !important;
    text-decoration: none !important;
}

#hc-checkout .hc-logo-img {
    width: 137px !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
}

#hc-checkout .hc-logo-text {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--hc-text) !important;
}

/* ========== BREADCRUMB ========== */
#hc-checkout .hc-breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#hc-checkout .hc-breadcrumb li {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#hc-checkout .hc-breadcrumb li + li::before {
    content: "\203A" !important;
    color: var(--hc-text-subdued) !important;
    margin: 0 2px !important;
    font-size: 12px !important;
}

#hc-checkout .hc-bc-link {
    color: var(--hc-text-link) !important;
    font-size: 12px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

#hc-checkout .hc-bc-link:hover {
    text-decoration: underline !important;
}

#hc-checkout .hc-bc-link[aria-current="step"] {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--hc-text) !important;
    cursor: default !important;
    text-decoration: none !important;
}

#hc-checkout .hc-bc-future {
    color: var(--hc-text-subdued) !important;
    font-size: 12px !important;
    cursor: default !important;
    text-decoration: none !important;
}

/* ========== FORM PANELS ========== */
#hc-checkout .hc-panel {
    animation: hcFadeIn 0.3s ease;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

@keyframes hcFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

#hc-checkout .hc-panel h2 {
    font-size: 21px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin: 0 0 17px 0 !important;
    padding: 0 !important;
}

/* ========== FLOAT LABEL INPUTS ========== */
#hc-checkout .hc-float {
    position: relative !important;
    background: var(--hc-bg) !important;
    border: 0.8px solid var(--hc-border) !important;
    border-radius: var(--hc-radius) !important;
    transition: border-color var(--hc-duration) var(--hc-easing),
                box-shadow var(--hc-duration) var(--hc-easing);
    overflow: visible !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

#hc-checkout .hc-float:focus-within {
    border-color: var(--hc-border-focus) !important;
    box-shadow: 0 0 0 1px var(--hc-border-focus) !important;
}

#hc-checkout .hc-float input {
    width: 100% !important;
    height: 49px !important;
    padding: 13.5px 11px !important;
    border: none !important;
    background: transparent !important;
    font-size: 14px !important;
    color: var(--hc-text) !important;
    outline: none !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    margin: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border-radius: 0 !important;
}

#hc-checkout .hc-float input::placeholder,
#hc-checkout .hc-float input::-webkit-input-placeholder,
#hc-checkout .hc-float input::-moz-placeholder,
#hc-checkout .hc-float input:-ms-input-placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

#hc-checkout .hc-float label {
    position: absolute !important;
    top: 50% !important;
    left: 11px !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
    color: var(--hc-text-subdued) !important;
    pointer-events: none !important;
    transition: all var(--hc-duration) var(--hc-easing) !important;
    line-height: 1 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    z-index: 1 !important;
    float: none !important;
    font-weight: 400 !important;
}

/* Label shrink: input has value OR is focused */
#hc-checkout .hc-float input:not(:placeholder-shown) ~ label,
#hc-checkout .hc-float input:focus ~ label {
    top: 6px !important;
    transform: translateY(0) !important;
    font-size: 11px !important;
}

/* Input padding shift when label is shrunk */
#hc-checkout .hc-float input:not(:placeholder-shown),
#hc-checkout .hc-float input:focus {
    padding-top: 22px !important;
    padding-bottom: 5px !important;
}

/* ========== SELECT WRAPPER ========== */
#hc-checkout .hc-select-wrap {
    position: relative !important;
    background: var(--hc-bg) !important;
    border: 0.8px solid var(--hc-border) !important;
    border-radius: var(--hc-radius) !important;
    transition: border-color var(--hc-duration) var(--hc-easing),
                box-shadow var(--hc-duration) var(--hc-easing);
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

#hc-checkout .hc-select-wrap:focus-within {
    border-color: var(--hc-border-focus) !important;
    box-shadow: 0 0 0 1px var(--hc-border-focus) !important;
}

#hc-checkout .hc-select-wrap label {
    position: absolute !important;
    top: 6px !important;
    left: 11px !important;
    right: auto !important;
    bottom: auto !important;
    font-size: 11px !important;
    color: var(--hc-text-subdued) !important;
    pointer-events: none !important;
    line-height: 1 !important;
    z-index: 1 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    float: none !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    font-weight: 400 !important;
}

#hc-checkout .hc-select-wrap select {
    width: 100% !important;
    height: 51px !important;
    padding: 21px 30px 6px 11px !important;
    border: none !important;
    background: transparent !important;
    font-size: 14px !important;
    color: var(--hc-text) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

#hc-checkout .hc-select-wrap::after {
    content: "" !important;
    position: absolute !important;
    right: 11px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 5px solid var(--hc-text-subdued) !important;
    pointer-events: none !important;
}

/* ========== FIELD LAYOUT ========== */
#hc-checkout .hc-field {
    margin: 0 0 7px 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

#hc-checkout .hc-field-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    margin: 0 0 7px 0 !important;
    padding: 0 !important;
}

#hc-checkout .hc-field-row > .hc-field {
    margin: 0 !important;
}

/* ========== FIELD ERROR MESSAGE ========== */
#hc-checkout .hc-field-error {
    display: block !important;
    font-size: 12px !important;
    color: var(--hc-error) !important;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

/* ========== DECLINED OVERLAY ========== */
.hc-declined-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    background: rgba(0, 0, 0, 0) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    transition: background 0.3s ease !important;
    pointer-events: none !important;
}

.hc-declined-overlay.is-visible {
    background: rgba(0, 0, 0, 0.5) !important;
    pointer-events: all !important;
}

.hc-declined-card {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    padding: 40px 32px 32px !important;
    max-width: 420px !important;
    width: 100% !important;
    text-align: center !important;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18) !important;
    transform: translateY(20px) scale(0.96) !important;
    opacity: 0 !important;
    transition: all 0.3s ease !important;
}

.hc-declined-overlay.is-visible .hc-declined-card {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}

.hc-declined-icon {
    margin-bottom: 16px !important;
}

.hc-declined-title {
    font-size: 21px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.3 !important;
}

.hc-declined-msg {
    font-size: 14px !important;
    color: #707070 !important;
    line-height: 1.6 !important;
    margin: 0 0 8px 0 !important;
}

.hc-declined-hint {
    font-size: 14px !important;
    color: #000000 !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    margin: 0 0 24px 0 !important;
}

.hc-declined-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.hc-declined-actions .hc-btn {
    min-height: 52px !important;
    padding: 14px 21px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease-in-out !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.hc-declined-retry {
    background: #1C1B1B !important;
    color: #FFFFFF !important;
}

.hc-declined-retry:hover {
    background: #333232 !important;
}

.hc-declined-pix {
    background: #F6F6F6 !important;
    color: #000000 !important;
}

.hc-declined-pix:hover {
    background: #EBEBEB !important;
}

@media (max-width: 480px) {
    .hc-declined-card {
        padding: 32px 24px 24px !important;
    }
}

/* ========== CARD ERROR BANNER ========== */
#hc-checkout .hc-card-error-banner {
    background: #fef2f2 !important;
    border: 1px solid #fca5a5 !important;
    color: #991b1b !important;
    padding: 12px 14px !important;
    border-radius: var(--hc-radius) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 14px !important;
    line-height: 1.4 !important;
}

/* ========== BUTTONS ========== */
#hc-checkout .hc-btn {
    display: block !important;
    width: 100% !important;
    min-height: 63px !important;
    padding: 21px !important;
    background: var(--hc-primary) !important;
    color: var(--hc-text-contrast) !important;
    border: none !important;
    border-radius: var(--hc-radius) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background var(--hc-duration) var(--hc-easing);
    line-height: 1 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

#hc-checkout .hc-btn:hover {
    background: var(--hc-primary-hover) !important;
}

#hc-checkout .hc-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

#hc-checkout .hc-btn-secondary {
    background: var(--hc-secondary) !important;
    color: var(--hc-text) !important;
    border: none !important;
    border-radius: var(--hc-radius) !important;
    padding: 0 14px !important;
    height: 49px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background var(--hc-duration) var(--hc-easing);
    margin: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
}

#hc-checkout .hc-btn-secondary:hover {
    background: var(--hc-secondary-hover) !important;
}

#hc-checkout .hc-btn-back {
    background: none !important;
    border: none !important;
    color: var(--hc-text-link) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
}

#hc-checkout .hc-btn-back:hover {
    text-decoration: underline !important;
}

#hc-checkout .hc-btn-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 17px 0 0 0 !important;
    padding: 0 !important;
}

#hc-checkout .hc-btn-row .hc-btn {
    flex: 1 !important;
    width: auto !important;
}

#hc-checkout .hc-btn-spinner {
    align-items: center !important;
    gap: 8px !important;
}

#hc-checkout .hc-btn-spinner[style*="display:none"],
#hc-checkout .hc-btn-spinner[style*="display: none"] {
    display: none !important;
}

/* ========== PAYMENT SUBTITLE ========== */
#hc-checkout .hc-payment-subtitle {
    font-size: 14px !important;
    color: var(--hc-text-subdued) !important;
    margin: -10px 0 17px 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

/* ========== PAYMENT METHODS (Shopify style) ========== */
#hc-checkout .hc-payment-methods {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    border: 0.8px solid var(--hc-border) !important;
    border-radius: var(--hc-radius) !important;
    overflow: hidden !important;
    background: var(--hc-bg) !important;
}

#hc-checkout .hc-payment-option {
    display: block !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}

#hc-checkout .hc-payment-option + .hc-payment-option {
    border-top: 0.8px solid var(--hc-border) !important;
}

#hc-checkout .hc-payment-option input,
#hc-checkout .hc-payment-option input[type="radio"] {
    display: none !important;
    position: absolute !important;
    opacity: 0 !important;
}

#hc-checkout .hc-payment-option-content {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    transition: background var(--hc-duration) var(--hc-easing);
}

#hc-checkout .hc-payment-option.active .hc-payment-option-content,
#hc-checkout .hc-payment-option input:checked ~ .hc-payment-option-content {
    background: rgba(0, 0, 0, 0.02) !important;
    border: none !important;
}

/* Custom visible radio circle for payment */
#hc-checkout .hc-pay-radio {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 50% !important;
    border: 2px solid var(--hc-border) !important;
    background: var(--hc-bg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: border-color var(--hc-duration) var(--hc-easing);
    position: relative !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#hc-checkout .hc-pay-radio::after {
    content: "" !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background: var(--hc-primary) !important;
    transition: all var(--hc-duration) var(--hc-easing);
    position: absolute !important;
}

#hc-checkout .hc-payment-option input:checked ~ .hc-payment-option-content .hc-pay-radio {
    border-color: var(--hc-primary) !important;
}

#hc-checkout .hc-payment-option input:checked ~ .hc-payment-option-content .hc-pay-radio::after {
    width: 10px !important;
    height: 10px !important;
}

#hc-checkout .hc-payment-label {
    font-weight: 500 !important;
    font-size: 14px !important;
    color: var(--hc-text) !important;
    flex: 1 !important;
}

#hc-checkout .hc-payment-badges {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#hc-checkout .hc-payment-badges svg {
    display: block !important;
    flex-shrink: 0 !important;
}

#hc-checkout .hc-payment-more {
    font-size: 12px !important;
    color: var(--hc-text-subdued) !important;
    font-weight: 500 !important;
    background: var(--hc-secondary) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* ========== CARD FORM (inside payment container) ========== */
#hc-checkout .hc-card-form {
    border-top: 0.8px solid var(--hc-border) !important;
    padding: 14px !important;
    margin: 0 !important;
    animation: hcFadeIn 0.3s ease;
    background: rgba(0, 0, 0, 0.02) !important;
}

/* ========== INFO CARD (Step 2 summary) ========== */
#hc-checkout .hc-info-card {
    border: 0.8px solid var(--hc-border) !important;
    border-radius: var(--hc-radius) !important;
    margin: 0 0 26px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--hc-bg) !important;
}

#hc-checkout .hc-info-card-row {
    display: flex !important;
    align-items: flex-start !important;
    padding: 14px !important;
    gap: 14px !important;
    margin: 0 !important;
}

#hc-checkout .hc-info-card-row + .hc-info-card-row {
    border-top: 0.8px solid var(--hc-border) !important;
}

#hc-checkout .hc-info-card-label {
    color: var(--hc-text-subdued) !important;
    font-size: 14px !important;
    min-width: 80px !important;
    flex-shrink: 0 !important;
    font-weight: 400 !important;
}

#hc-checkout .hc-info-card-value {
    flex: 1 !important;
    font-size: 14px !important;
    color: var(--hc-text) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

#hc-checkout .hc-info-card-edit {
    font-size: 14px !important;
    color: var(--hc-text-link) !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    font-weight: 400 !important;
}

#hc-checkout .hc-info-card-edit:hover {
    color: var(--hc-primary-hover) !important;
}

/* ========== SHIPPING METHODS (with visible radio) ========== */
#hc-checkout .hc-shipping-methods {
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    border: 0.8px solid var(--hc-border) !important;
    border-radius: var(--hc-radius) !important;
    overflow: hidden !important;
    background: var(--hc-bg) !important;
}

#hc-checkout .hc-shipping-loading {
    padding: 14px !important;
    font-size: 14px !important;
    color: var(--hc-text-subdued) !important;
    text-align: center !important;
}

#hc-checkout .hc-shipping-option {
    display: block !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}

#hc-checkout .hc-shipping-option + .hc-shipping-option {
    border-top: 0.8px solid var(--hc-border) !important;
}

#hc-checkout .hc-shipping-option input,
#hc-checkout .hc-shipping-option input[type="radio"] {
    display: none !important;
    position: absolute !important;
    opacity: 0 !important;
}

#hc-checkout .hc-shipping-option-content {
    display: flex !important;
    align-items: center !important;
    padding: 14px !important;
    gap: 12px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    transition: background var(--hc-duration) var(--hc-easing);
}

#hc-checkout .hc-shipping-option input:checked ~ .hc-shipping-option-content {
    background: rgba(0, 0, 0, 0.09) !important;
    border: none !important;
}

/* Custom visible radio circle */
#hc-checkout .hc-shipping-radio-circle {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 50% !important;
    border: 2px solid var(--hc-border) !important;
    background: var(--hc-bg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: border-color var(--hc-duration) var(--hc-easing);
    position: relative !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#hc-checkout .hc-shipping-radio-circle::after {
    content: "" !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background: var(--hc-primary) !important;
    transition: all var(--hc-duration) var(--hc-easing);
    position: absolute !important;
}

#hc-checkout .hc-shipping-option input:checked ~ .hc-shipping-option-content .hc-shipping-radio-circle {
    border-color: var(--hc-primary) !important;
}

#hc-checkout .hc-shipping-option input:checked ~ .hc-shipping-option-content .hc-shipping-radio-circle::after {
    width: 10px !important;
    height: 10px !important;
}

#hc-checkout .hc-shipping-option-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 !important;
}

#hc-checkout .hc-shipping-option-label {
    font-weight: 500 !important;
    font-size: 14px !important;
    color: var(--hc-text) !important;
}

#hc-checkout .hc-shipping-option-time {
    font-size: 12px !important;
    color: var(--hc-text-subdued) !important;
    font-weight: 400 !important;
}

#hc-checkout .hc-shipping-option-price {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--hc-text) !important;
    flex-shrink: 0 !important;
}

/* Frete grátis: destaque visual em verde pra reforçar o benefício */
#hc-checkout .hc-shipping-option-price--free {
    color: #00a32a !important;
}

/* ========== SUMMARY ========== */
#hc-checkout .hc-summary-inner > h2 {
    display: none !important;
}

#hc-checkout .hc-summary-items {
    border-bottom: 0.8px solid var(--hc-border-section) !important;
    padding: 0 0 16px 0 !important;
    margin: 0 0 16px 0 !important;
}

#hc-checkout .hc-summary-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 8px 0 !important;
    margin: 0 !important;
}

#hc-checkout .hc-item-img {
    position: relative !important;
    flex-shrink: 0 !important;
}

#hc-checkout .hc-item-img img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
    border-radius: var(--hc-radius-xl) !important;
    background: var(--hc-secondary) !important;
    display: block !important;
}

#hc-checkout .hc-item-qty {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    background: var(--hc-primary) !important;
    color: var(--hc-text-contrast) !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid var(--hc-bg) !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#hc-checkout .hc-item-info {
    flex: 1 !important;
    min-width: 0 !important;
}

#hc-checkout .hc-item-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--hc-text) !important;
}

#hc-checkout .hc-item-price {
    font-size: 14px !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
    color: var(--hc-text) !important;
}

/* ========== COUPON ========== */
#hc-checkout .hc-coupon {
    border-bottom: 0.8px solid var(--hc-border-section) !important;
    padding: 0 0 16px 0 !important;
    margin: 0 0 16px 0 !important;
    background: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

#hc-checkout .hc-coupon-row {
    display: flex !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#hc-checkout .hc-coupon-row input {
    flex: 1 !important;
    height: 40px !important;
    padding: 10px 11px !important;
    border: 0.8px solid var(--hc-border) !important;
    border-radius: var(--hc-radius) !important;
    font-size: 14px !important;
    color: var(--hc-text) !important;
    background: var(--hc-bg) !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: border-color var(--hc-duration) var(--hc-easing),
                box-shadow var(--hc-duration) var(--hc-easing);
}

#hc-checkout .hc-coupon-row .hc-btn-secondary,
#hc-checkout .hc-coupon-row #hc-apply-coupon {
    height: 40px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
}

#hc-checkout .hc-coupon-row input::placeholder {
    color: var(--hc-text-subdued) !important;
    opacity: 1 !important;
}

#hc-checkout .hc-coupon-row input:focus {
    border-color: var(--hc-border-focus) !important;
    box-shadow: 0 0 0 1px var(--hc-border-focus) !important;
}

#hc-checkout .hc-coupon-msg {
    font-size: 13px !important;
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
}

#hc-checkout .hc-coupon-msg.error { color: var(--hc-error) !important; }

#hc-checkout .hc-coupon-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

#hc-checkout .hc-coupon-tag-code {
    color: #166534 !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

#hc-checkout .hc-coupon-remove {
    background: none !important;
    border: none !important;
    color: #166534 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s !important;
    width: auto !important;
    min-height: auto !important;
}

#hc-checkout .hc-coupon-remove:hover {
    opacity: 1 !important;
}

/* ========== TOTALS ========== */
#hc-checkout .hc-summary-totals {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#hc-checkout .hc-summary-line {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 14px !important;
    color: var(--hc-text-subdued) !important;
    margin: 0 !important;
    padding: 0 !important;
}

#hc-checkout .hc-pix-discount-badge {
    font-size: 11px !important;
    color: #166534 !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    margin: 0 0 0 8px !important;
    font-weight: 700 !important;
    display: none;
    letter-spacing: 0.3px !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
}

#hc-checkout .hc-summary-line.hc-total {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: var(--hc-text) !important;
    padding: 12px 0 0 0 !important;
    border-top: 0.8px solid var(--hc-border-section) !important;
    margin: 4px 0 0 0 !important;
}

#hc-checkout .hc-summary-line.hc-total span {
    color: var(--hc-text) !important;
}

#hc-checkout .hc-discount,
#hc-checkout .hc-discount span {
    color: var(--hc-success) !important;
}

/* ========== THANK YOU PAGE ========== */
.hc-thankyou {
    max-width: 520px !important;
    margin: 8px auto 24px auto !important;
    padding: 0 !important;
    font-family: var(--hc-font) !important;
    color: var(--hc-text) !important;
}

/* Remove padding top do wrapper do tema (Flatsome) na página de confirmação */
body.woocommerce-order-received #content,
body.woocommerce-order-received .page-wrapper,
body.woocommerce-order-received .entry-content,
body.woocommerce-order-received .is-well.col-inner {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Zera padding LATERAL de TODOS wrappers do Flatsome na thank-you page —
   .row/.col/.large-*/.container/.cart-container/.woocommerce/.woocommerce-order/etc
   tem padding do grid system ou estilo do tema. Escopado a body.woocommerce-order-received,
   não afeta outras paginas. Target também seletor composto (ordem das classes importa
   pra especificidade) usado pelo Flatsome em pages de checkout. */
body.woocommerce-order-received #content,
body.woocommerce-order-received main,
body.woocommerce-order-received main#main,
body.woocommerce-order-received .page-wrapper,
body.woocommerce-order-received .page-wrapper > .row,
body.woocommerce-order-received .container,
body.woocommerce-order-received .cart-container,
body.woocommerce-order-received .cart-container.container,
body.woocommerce-order-received .cart-container.container.page-wrapper,
body.woocommerce-order-received .cart-container.container.page-wrapper.page-checkout,
body.woocommerce-order-received .page-checkout,
body.woocommerce-order-received .row,
body.woocommerce-order-received .row-inner,
body.woocommerce-order-received .col,
body.woocommerce-order-received .large-5,
body.woocommerce-order-received .large-7,
body.woocommerce-order-received .large-12,
body.woocommerce-order-received .col-inner,
body.woocommerce-order-received .is-well,
body.woocommerce-order-received .is-well.col-inner,
body.woocommerce-order-received .is-well.col-inner.entry-content,
body.woocommerce-order-received .woocommerce,
body.woocommerce-order-received .woocommerce-order,
body.woocommerce-order-received .woocommerce-order.row,
body.woocommerce-order-received .woocommerce > *,
body.woocommerce-order-received .woocommerce-order > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

/* .large-7.col (Flatsome grid): usa flex-basis 58% pra definir largura,
   então max-width: 100% sozinho não expande. Força width/flex pra ocupar
   100% da largura do pai em thank-you page. */
body.woocommerce-order-received .col,
body.woocommerce-order-received .large-1,
body.woocommerce-order-received .large-2,
body.woocommerce-order-received .large-3,
body.woocommerce-order-received .large-4,
body.woocommerce-order-received .large-5,
body.woocommerce-order-received .large-6,
body.woocommerce-order-received .large-7,
body.woocommerce-order-received .large-8,
body.woocommerce-order-received .large-9,
body.woocommerce-order-received .large-10,
body.woocommerce-order-received .large-11,
body.woocommerce-order-received .large-12 {
    flex: 0 0 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Esconde TUDO dentro do .is-well.col-inner.entry-content que não for o
   nosso .hc-thankyou — mata o texto default do WC ("Thank you. Your order
   has been received."), o ul.woocommerce-order-overview, o div.clear, e
   qualquer outro elemento que o theme/Woo coloque ali */
body.woocommerce-order-received .is-well.col-inner.entry-content > *:not(.hc-thankyou) {
    display: none !important;
}

/* Esconde qualquer SEGUNDO .is-well.col-inner.entry-content que não contenha
   nosso .hc-thankyou (block fantasma vazio no final da pagina). Usa :has() —
   suportado em navegadores modernos. */
body.woocommerce-order-received .is-well.col-inner.entry-content:not(:has(.hc-thankyou)) {
    display: none !important;
}

/* Mobile: diminuir margin lateral e o QR Code */
.hc-ty-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}

.hc-ty-check {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    line-height: 0 !important;
}

.hc-ty-check svg {
    display: block !important;
    vertical-align: middle !important;
}

.hc-ty-header-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    align-self: center !important;
}

.hc-ty-order-number {
    font-size: 13px !important;
    line-height: 1.2 !important;
    color: var(--hc-text-subdued) !important;
    font-weight: 400 !important;
}

.hc-ty-greeting {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: var(--hc-text) !important;
}

/* Cards */
.hc-ty-card {
    border: 0.8px solid var(--hc-border) !important;
    border-radius: var(--hc-radius) !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    background: var(--hc-bg) !important;
    overflow: hidden !important;
}

.hc-ty-card-header {
    padding: 20px !important;
    margin: 0 !important;
}

/* Só o título (filho direto) vira bloco. Os <strong> inline dentro do <p>
   (ex: "segurança", "confirmada automaticamente") continuam negrito na linha. */
.hc-ty-card-header > strong {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--hc-text) !important;
    display: block !important;
    margin: 0 0 4px 0 !important;
}
.hc-ty-card-header p strong {
    font-weight: 700 !important;
    color: inherit !important;
}

.hc-ty-card-header p {
    font-size: 14px !important;
    color: var(--hc-text-subdued) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* QR Code */
.hc-ty-qr {
    padding: 0 !important;
    text-align: center !important;
    margin: 0 !important;
}

.hc-ty-qr img {
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: var(--hc-radius) !important;
    border: 0.8px solid var(--hc-border) !important;
}

/* Pagamento processado pelo Santander (banda informativa abaixo do QR) */
.hc-ty-processor {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 20px 14px !important;
    font-size: 12px !important;
    color: var(--hc-text-subdued) !important;
    text-align: center !important;
}
.hc-ty-processor img {
    height: 14px !important;
    width: auto !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
}
/* Pagar.me (BeehivePay) — logo um pouco maior porque o ícone é pequeno e fica difícil de ler em 14px */
.hc-ty-processor-logo--hopy {
    height: 22px !important;
}

/* Mobile overrides — MUST come AFTER all base rules pra ganhar no cascade */
@media (max-width: 768px) {
    .hc-thankyou {
        padding: 0 !important;
    }
    .hc-ty-qr img {
        max-width: 140px !important;
        width: 140px !important;
        height: 140px !important;
        margin: 0 auto !important;
        display: block !important;
    }
}

/* Codigo copia e cola */
.hc-ty-code {
    border-top: 0.8px solid var(--hc-border) !important;
    padding: 16px 20px !important;
    margin: 0 !important;
}

.hc-ty-code-text {
    font-size: 13px !important;
    color: var(--hc-text) !important;
    line-height: 1.5 !important;
    font-family: var(--hc-font) !important;
    word-break: break-all !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Botao copiar */
.hc-ty-copy {
    border-top: 0.8px solid var(--hc-border) !important;
    padding: 16px 20px !important;
    margin: 0 !important;
}

.hc-ty-copy-btn {
    display: block !important;
    width: 100% !important;
    padding: 14px !important;
    background: transparent !important;
    color: var(--hc-text) !important;
    border: 0.8px solid var(--hc-border) !important;
    border-radius: var(--hc-radius) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: var(--hc-font) !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: background var(--hc-duration) var(--hc-easing);
    text-transform: none !important;
    letter-spacing: normal !important;
}

.hc-ty-copy-btn:hover {
    background: var(--hc-secondary) !important;
}

.hc-ty-copy-btn.copied {
    background: #10b981 !important;
    color: #fff !important;
    border-color: #10b981 !important;
}

/* Expiry */
.hc-ty-expiry {
    padding: 12px 20px !important;
    font-size: 11px !important;
    color: var(--hc-text-subdued) !important;
    border-top: 0.8px solid var(--hc-border) !important;
    margin: 0 !important;
}

/* Status */
.hc-ty-status {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    font-size: 14px !important;
    color: var(--hc-text-subdued) !important;
    margin: 0 !important;
}

.hc-ty-status strong {
    color: var(--hc-text) !important;
    font-weight: 600 !important;
}

/* Info sections */
.hc-ty-info-section {
    padding: 16px 20px !important;
    margin: 0 !important;
}

.hc-ty-info-section + .hc-ty-info-section {
    border-top: 0.8px solid var(--hc-border) !important;
}

.hc-ty-info-section strong {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--hc-text) !important;
    display: block !important;
    margin: 0 0 8px 0 !important;
}

.hc-ty-info-section p {
    font-size: 14px !important;
    color: var(--hc-text) !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

.hc-ty-date {
    color: var(--hc-text-subdued) !important;
    font-size: 13px !important;
}

/* Tracking illustration */
.hc-ty-tracking-illustration {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: var(--hc-radius) var(--hc-radius) 0 0 !important;
}

.hc-ty-tracking-illustration svg {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* Confirmed info */
.hc-ty-confirmed-info {
    padding: 20px !important;
    margin: 0 !important;
}

.hc-ty-confirmed-status {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 10px 0 !important;
}

.hc-ty-confirmed-status strong {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--hc-text) !important;
}

.hc-ty-confirmed-info p {
    font-size: 14px !important;
    color: var(--hc-text-subdued) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.hc-ty-confirmed-info p strong {
    color: var(--hc-text) !important;
    font-weight: 600 !important;
}

/* Action button */
.hc-ty-action {
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
}

.hc-ty-action-btn {
    display: block !important;
    width: 100% !important;
    min-height: 63px !important;
    padding: 21px !important;
    background: #1C1B1B !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--hc-radius) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: var(--hc-font) !important;
    cursor: pointer !important;
    text-align: center !important;
    text-decoration: none !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    transition: opacity 0.2s ease;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.hc-ty-action-btn:hover {
    opacity: 0.85 !important;
    text-decoration: none !important;
    color: #FFFFFF !important;
}

/* ========== MOBILE SUMMARY TOGGLE (hidden on desktop) ========== */
#hc-checkout .hc-mobile-summary-toggle {
    display: none !important;
}

/* ========== THANK YOU PAGE: hide WooCommerce defaults ========== */
body.woocommerce-order-received .woocommerce-order-overview,
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details,
body.woocommerce-order-received .woocommerce-columns--addresses,
body.woocommerce-order-received .woocommerce-bacs-bank-details,
body.woocommerce-order-received .order-again,
body.woocommerce-order-received .wc-bacs-bank-details,
body.woocommerce-order-received .woocommerce-thankyou-order-details,
body.woocommerce-order-received .woocommerce-order-received + .woocommerce,
body.woocommerce-order-received .woocommerce-checkout-review-order,
body.woocommerce-order-received .woocommerce form.checkout,
body.woocommerce-order-received .payment_methods,
body.woocommerce-order-received #payment,
body.woocommerce-order-received .place-order,
body.woocommerce-order-received .woocommerce-checkout-payment,
body.woocommerce-order-received .woocommerce-form-coupon-toggle,
body.woocommerce-order-received .woocommerce-form-login-toggle {
    display: none !important;
}

body.woocommerce-order-received .woocommerce-thankyou-order-received,
body.woocommerce-order-received .woocommerce-notice--success,
body.woocommerce-order-received .woocommerce-thankyou-order-received-text,
body.woocommerce-order-received .entry-content > .woocommerce > p:first-child,
body.woocommerce-order-received .woocommerce > .woocommerce-order > p:first-child {
    display: none !important;
}

.hc-pix-payment ~ .woocommerce-order-overview,
.hc-pix-payment ~ .woocommerce-order-details,
.hc-pix-payment ~ .woocommerce-customer-details,
.hc-pix-payment ~ * {
    display: none !important;
}

.hc-pix-payment,
.hc-pix-confirmed {
    display: block !important;
}

/* ========== RESPONSIVE: TABLET & MOBILE (<1000px) ========== */
@media (max-width: 999px) {
    /* Single column flex layout */
    #hc-checkout .hc-shell {
        display: flex !important;
        flex-direction: column !important;
        min-height: auto !important;
    }

    /* Hide header on mobile */
    #hc-checkout .hc-header {
        display: none !important;
    }

    /* Main col: full width */
    #hc-checkout .hc-main-col {
        justify-content: center !important;
        order: 2 !important;
    }

    #hc-checkout .hc-main-inner {
        max-width: 100% !important;
        padding: 21px 16px !important;
    }

    /* Summary col: hidden by default */
    #hc-checkout .hc-summary-col {
        display: none !important;
        border-left: none !important;
        border-bottom: 0.8px solid var(--hc-border-section) !important;
        order: 1 !important;
    }

    #hc-checkout .hc-summary-col.is-open {
        display: block !important;
    }

    #hc-checkout .hc-summary-inner {
        max-width: 100% !important;
        padding: 16px !important;
        position: static !important;
    }

    /* Hide h2 "Resumo do pedido" inside summary on mobile */
    #hc-checkout .hc-summary-inner > h2 {
        display: none !important;
    }

    /* ---- MOBILE ACCORDION TOGGLE (Insider style) ---- */
    #hc-checkout .hc-mobile-summary-toggle,
    #hc-checkout button.hc-mobile-summary-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 14px 16px !important;
        background: var(--hc-bg-subdued) !important;
        border: none !important;
        border-top: 0.8px solid var(--hc-border-section) !important;
        border-bottom: 0.8px solid var(--hc-border-section) !important;
        cursor: pointer !important;
        font-size: 14px !important;
        color: var(--hc-text-link) !important;
        margin: 0 !important;
        order: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        min-height: auto !important;
        height: auto !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }

    #hc-checkout .hc-mobile-summary-left {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        color: var(--hc-text-link) !important;
    }

    #hc-checkout .hc-mobile-summary-left > span,
    #hc-checkout .hc-mobile-summary-left span {
        color: var(--hc-text-link) !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        font-family: var(--hc-font) !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        line-height: 1.5 !important;
    }

    #hc-checkout .hc-mobile-summary-left > span:first-of-type {
        text-decoration: none !important;
    }

    #hc-checkout .hc-mobile-summary-chevron {
        font-size: 10px !important;
        transition: transform var(--hc-duration) var(--hc-easing);
        display: inline-block !important;
        text-decoration: none !important;
    }

    #hc-checkout .hc-mobile-summary-toggle.is-open .hc-mobile-summary-chevron {
        transform: rotate(180deg) !important;
    }

    #hc-checkout .hc-mobile-summary-total,
    #hc-checkout span.hc-mobile-summary-total {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--hc-text) !important;
        font-family: var(--hc-font) !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        text-decoration: none !important;
    }

    /* Selo "AMBIENTE / SEGURO" no lado direito do toggle (idêntico ao footer, só zera margin) */
    #hc-checkout .hc-mobile-summary-toggle .hc-mobile-summary-secure {
        margin: 0 !important;
    }
    /* Botão herda font-weight do tema (Flatsome aplica bold em <button>) — forçar regular no span */
    #hc-checkout .hc-mobile-summary-toggle .hc-mobile-summary-secure span {
        font-weight: 400 !important;
    }
    #hc-checkout .hc-mobile-summary-toggle .hc-mobile-summary-secure b {
        font-weight: 700 !important;
    }
}

/* ========== RESPONSIVE: SMALL MOBILE (<580px) ========== */
@media (max-width: 579px) {
    #hc-checkout .hc-main-inner {
        padding: 16px !important;
    }

    #hc-checkout .hc-field-row {
        grid-template-columns: 1fr !important;
    }

    #hc-checkout .hc-btn {
        width: 100% !important;
    }

    #hc-checkout .hc-btn-row {
        flex-direction: column-reverse !important;
        gap: 12px !important;
    }

    #hc-checkout .hc-btn-row .hc-btn {
        width: 100% !important;
    }

    #hc-checkout .hc-breadcrumb {
        flex-wrap: wrap !important;
    }
}

/* ============================================ */
/* CHECKOUT FOOTER (Step 3)                     */
/* ============================================ */
#hc-checkout .hc-checkout-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 24px 0 0 !important;
    padding: 18px 16px !important;
    text-align: center !important;
    color: #9ca3af !important;
}
#hc-checkout .hc-footer-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #9ca3af !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}
#hc-checkout .hc-footer-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 2px 0 !important;
}
#hc-checkout .hc-footer-badges svg {
    display: block !important;
}
#hc-checkout .hc-footer-link {
    font-size: 13px !important;
    color: #9ca3af !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    transition: opacity 0.2s !important;
    margin: 4px 0 0 !important;
}
#hc-checkout .hc-footer-link:hover {
    opacity: 0.75 !important;
    color: #9ca3af !important;
}
#hc-checkout .hc-footer-copy {
    font-size: 12px !important;
    color: #9ca3af !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}
#hc-checkout .hc-footer-secure {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 6px !important;
    color: #000 !important;
}
#hc-checkout .hc-footer-secure svg {
    color: #000 !important;
    flex-shrink: 0 !important;
}
#hc-checkout .hc-footer-secure span {
    font-size: 11px !important;
    line-height: 1.2 !important;
    color: #000 !important;
    text-align: left !important;
}
#hc-checkout .hc-footer-secure b {
    font-weight: 700 !important;
}

/* ========== ORDER-PAY MODE (data-mode="order-pay") ========== */

/* Aviso "pagando por terceiro" / "finalize seu pedido" */
#hc-checkout[data-mode="order-pay"] .hc-order-pay-notice {
    background: #fff8e1 !important;
    border: 1px solid #f6d38c !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    margin: 12px 0 18px !important;
    font-size: 13px !important;
    color: #7a5a00 !important;
    line-height: 1.4 !important;
}
#hc-checkout[data-mode="order-pay"] .hc-order-pay-notice-info {
    background: var(--hc-bg-subdued) !important;
    border-color: var(--hc-border) !important;
    color: var(--hc-text) !important;
}

/* Linha de botão sem "voltar" (só pagar) — ocupa largura toda */
#hc-checkout[data-mode="order-pay"] .hc-btn-row-pay-only {
    display: block !important;
}
#hc-checkout[data-mode="order-pay"] .hc-btn-row-pay-only .hc-btn-pay {
    width: 100% !important;
}

@media (max-width: 768px) {
    #hc-checkout .hc-checkout-footer {
        border-top: 1px solid #e5e5e5 !important;
        margin-top: 20px !important;
        padding-top: 18px !important;
    }
}

/* ============================================================ */
/* CONVERSION FEATURES                                           */
/* ============================================================ */

/* Free Shipping Progress Bar */
#hc-checkout .hc-free-shipping-bar {
    background: #fff8e1 !important;
    border: 1px solid #f6d38c !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    margin: 0 0 14px 0 !important;
    transition: background 0.3s, border-color 0.3s !important;
}

/* FSB versão MOBILE (pareada com toggle) — escondida no desktop */
#hc-checkout .hc-fsb-mobile-toggle-pair {
    display: none !important;
}

@media (max-width: 999px) {
    #hc-checkout .hc-fsb-mobile-toggle-pair {
        display: block !important;
        order: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 0.8px solid var(--hc-border-section) !important;
        padding: 12px 16px !important;
    }
}

/* FSB versão DESKTOP (dentro do summary-inner, acima dos produtos) — escondida no mobile */
@media (max-width: 999px) {
    #hc-checkout .hc-fsb-desktop-summary {
        display: none !important;
    }
}

#hc-checkout .hc-free-shipping-bar.hc-fsb-reached {
    background: #e8f5e9 !important;
    border-color: #a5d6a7 !important;
}

#hc-checkout .hc-fsb-text {
    font-size: 13px !important;
    color: #7a5a00 !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
}

#hc-checkout .hc-fsb-reached .hc-fsb-text {
    color: #2e7d32 !important;
}

#hc-checkout .hc-fsb-track {
    height: 6px !important;
    background: rgba(0,0,0,0.08) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

#hc-checkout .hc-fsb-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #f6b93b 0%, #e58e26 100%) !important;
    border-radius: 3px !important;
    transition: width 0.5s ease-out !important;
}

#hc-checkout .hc-fsb-reached .hc-fsb-fill {
    background: linear-gradient(90deg, #66bb6a 0%, #43a047 100%) !important;
    width: 100% !important;
}

/* Gift Badge (visual only in summary) */
#hc-checkout .hc-summary-item-gift {
    background: linear-gradient(135deg, #fff9e6 0%, #fff3d4 100%) !important;
    border: 1px dashed #d4a017 !important;
    border-radius: 6px !important;
    padding: 6px 8px !important;
    margin-top: 6px !important;
    gap: 10px !important;
}

#hc-checkout .hc-summary-item-gift .hc-item-img,
#hc-checkout .hc-summary-item-gift .hc-item-img img {
    width: 44px !important;
    height: 44px !important;
}

#hc-checkout .hc-gift-placeholder {
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--hc-radius-xl) !important;
    background: linear-gradient(135deg, #fff3d4 0%, #ffd966 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    line-height: 1 !important;
}

#hc-checkout .hc-gift-badge {
    display: inline-block !important;
    background: #d4a017 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    margin-bottom: 4px !important;
    line-height: 1.4 !important;
}

#hc-checkout .hc-item-price-strike {
    display: block !important;
    font-size: 11px !important;
    color: #999 !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
}

#hc-checkout .hc-item-price-free {
    color: #2e7d32 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
}

/* Order Bump card */
#hc-checkout .hc-order-bump {
    border: 2px dashed #e58e26 !important;
    border-radius: 12px !important;
    background: #fffbf5 !important;
    padding: 0 !important;
    margin: 16px 0 !important;
    transition: all 0.25s !important;
    position: relative !important;
    overflow: hidden !important;
}

#hc-checkout .hc-order-bump.hc-bump-active {
    border-color: #43a047 !important;
    background: #f1f8f4 !important;
}

#hc-checkout .hc-bump-label {
    display: block !important;
    cursor: pointer !important;
    padding: 10px 12px !important;
    margin: 0 !important;
}

#hc-checkout .hc-bump-checkbox {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#hc-checkout .hc-bump-header {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    color: #e58e26 !important;
    margin: 0 0 8px 0 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

#hc-checkout .hc-bump-active .hc-bump-header {
    color: #43a047 !important;
}

#hc-checkout .hc-bump-body {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    margin-bottom: 10px !important;
}

#hc-checkout .hc-bump-img img {
    width: 58px !important;
    height: 58px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    display: block !important;
}

#hc-checkout .hc-bump-info {
    flex: 1 !important;
    min-width: 0 !important;
}

#hc-checkout .hc-bump-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1c1b1b !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
}

#hc-checkout .hc-bump-prices {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin: 0 !important;
}

#hc-checkout .hc-bump-price-original,
#hc-checkout .hc-bump-price-original * {
    color: #c9c9c9 !important;
    text-decoration: line-through !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}

#hc-checkout .hc-bump-price-now,
#hc-checkout .hc-bump-price-now * {
    color: #2e9a3a !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
}

/* CTA como botão real, full-width */
#hc-checkout .hc-bump-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 9px 12px !important;
    background: #e58e26 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    transition: background 0.2s !important;
    box-sizing: border-box !important;
}

#hc-checkout .hc-bump-label:hover .hc-bump-cta {
    background: #d47f1e !important;
}

#hc-checkout .hc-bump-active .hc-bump-cta {
    background: #43a047 !important;
}

#hc-checkout .hc-bump-active .hc-bump-label:hover .hc-bump-cta {
    background: #388e3c !important;
}

#hc-checkout .hc-bump-cta-text-default { display: inline !important; }
#hc-checkout .hc-bump-cta-text-active  { display: none !important; }
#hc-checkout .hc-bump-active .hc-bump-cta-text-default { display: none !important; }
#hc-checkout .hc-bump-active .hc-bump-cta-text-active  { display: inline !important; }

/* Bump tag in summary */
#hc-checkout .hc-bump-tag {
    display: inline-block !important;
    background: #43a047 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    margin-left: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    vertical-align: middle !important;
}

/* ========== CARD SPLIT OVERLAY (oferta + progresso de N cobranças) ========== */
.hc-split-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    background: rgba(0, 0, 0, 0) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    transition: background 0.3s ease !important;
    pointer-events: none !important;
}

.hc-split-overlay.is-visible {
    background: rgba(0, 0, 0, 0.55) !important;
    pointer-events: all !important;
}

.hc-split-card {
    background: #FFFFFF !important;
    border-radius: 14px !important;
    padding: 36px 30px 28px !important;
    max-width: 460px !important;
    width: 100% !important;
    text-align: center !important;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.22) !important;
    transform: translateY(20px) scale(0.96) !important;
    opacity: 0 !important;
    transition: all 0.3s ease !important;
}

.hc-split-overlay.is-visible .hc-split-card {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}

.hc-split-icon { margin-bottom: 14px !important; }
.hc-split-icon--ok svg { stroke: #2e7d32 !important; }
.hc-split-icon--warn svg { stroke: #e65100 !important; }

.hc-split-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1A1A1A !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.3 !important;
}

.hc-split-msg {
    font-size: 14px !important;
    color: #555 !important;
    line-height: 1.55 !important;
    margin: 0 0 16px 0 !important;
}

.hc-split-summary {
    background: #f5f8fc !important;
    border: 1px solid #e3eaf3 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    margin: 0 0 14px 0 !important;
    text-align: left !important;
}

.hc-split-summary-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 13px !important;
    color: #333 !important;
    padding: 4px 0 !important;
}

.hc-split-summary-row strong { color: #1976d2 !important; }

.hc-split-hint {
    font-size: 12px !important;
    color: #888 !important;
    margin: 0 0 18px 0 !important;
    line-height: 1.4 !important;
}

.hc-split-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.hc-split-actions .hc-btn {
    min-height: 50px !important;
    padding: 13px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease-in-out !important;
    text-align: center !important;
    width: 100% !important;
}

.hc-split-confirm {
    background: #1976d2 !important;
    color: #fff !important;
}
.hc-split-confirm:hover { background: #155fa8 !important; }

.hc-split-cancel,
.hc-split-close {
    background: #F2F2F2 !important;
    color: #1A1A1A !important;
}
.hc-split-cancel:hover,
.hc-split-close:hover { background: #E5E5E5 !important; }

/* Progresso */
.hc-split-spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 14px;
    border: 4px solid #e3eaf3;
    border-top-color: #1976d2;
    border-radius: 50%;
    animation: hcSplitSpin 0.9s linear infinite;
}

@keyframes hcSplitSpin {
    to { transform: rotate(360deg); }
}

.hc-split-progress { margin: 16px 0 12px; }

.hc-split-progress-bar {
    width: 100%;
    height: 8px;
    background: #eef1f5;
    border-radius: 4px;
    overflow: hidden;
}

.hc-split-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #1976d2, #43a047);
    transition: width 0.5s ease;
}

.hc-split-progress-text {
    margin-top: 8px;
    font-size: 13px;
    color: #555;
    font-weight: 500;
}

.hc-split-parts-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    text-align: left;
    border-top: 1px solid #eef1f5;
    padding-top: 10px;
}

.hc-split-part {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    font-size: 13px;
    color: #333;
}

.hc-split-part-status {
    display: inline-block;
    min-width: 18px;
    text-align: center;
    font-weight: 700;
}

.hc-split-overlay--blocking { cursor: wait !important; }

@media (max-width: 480px) {
    .hc-split-card {
        padding: 28px 22px 22px !important;
    }
}

/* =========================================
 * Anti-iOS-Safari auto-zoom em inputs
 * =========================================
 * iOS Safari faz auto-zoom em qualquer input com font-size < 16px no mobile.
 * Isso causa zoom indesejado ao tocar nos campos do checkout (14px default).
 * `maximum-scale=1` no viewport NÃO funciona desde iOS 10 (Apple ignora por
 * acessibilidade). Única solução é forçar 16px nos inputs em mobile.
 * ========================================= */
@media (max-width: 767px) {
    #hc-checkout input[type="text"],
    #hc-checkout input[type="email"],
    #hc-checkout input[type="tel"],
    #hc-checkout input[type="number"],
    #hc-checkout input[type="password"],
    #hc-checkout input[type="search"],
    #hc-checkout input:not([type]),
    #hc-checkout textarea,
    #hc-checkout select {
        font-size: 16px !important;
    }
}

/* ===== PagouAi Payment Element (iframe hospedado de cartão) ===== */
.hc-pagouai-card-field { margin-bottom: 14px; }
#hc-pagouai-card-element,
#hc-retry-pagou-element {
    min-height: 48px;
    padding: 4px 0;
}
#hc-pagouai-card-element iframe,
#hc-retry-pagou-element iframe {
    width: 100% !important;
    min-height: 44px;
}
.hc-pagouai-card-errors {
    color: #d32f2f;
    font-size: 13px;
    margin-top: 6px;
    min-height: 16px;
}

/* ===== Comprovante de pagamento (PIX pendente) ===== */
.hc-proof .hc-proof-head {
    padding: 20px 20px 0 !important;
}
.hc-proof .hc-proof-head strong {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--hc-text) !important;
    display: block !important;
    margin: 0 0 4px 0 !important;
}
.hc-proof .hc-proof-head p {
    font-size: 13px !important;
    color: var(--hc-text-subdued) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}
.hc-proof-body {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 20px 18px !important;
}
.hc-proof-pick,
.hc-proof-send {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--hc-font) !important;
    line-height: 1.2 !important;
    border-radius: var(--hc-radius) !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin: 0 !important;
}
.hc-proof-pick {
    background: transparent !important;
    color: var(--hc-text) !important;
    border: 0.8px solid var(--hc-border) !important;
    transition: background var(--hc-duration) var(--hc-easing);
}
.hc-proof-pick:hover {
    background: var(--hc-secondary) !important;
}
.hc-proof-filename {
    flex: 1 1 100% !important;
    order: 3 !important;
    min-width: 0 !important;
    font-size: 13px !important;
    color: var(--hc-text-subdued) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin: 2px 0 0 !important;
}
.hc-proof-send {
    background: var(--hc-text) !important;
    color: var(--hc-bg) !important;
    border: 0.8px solid var(--hc-text) !important;
    transition: opacity var(--hc-duration) var(--hc-easing);
}
.hc-proof-send:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}
.hc-proof-status {
    padding: 0 20px 18px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}
.hc-proof-status.is-ok {
    color: #10b981 !important;
    font-weight: 600 !important;
}
.hc-proof-status.is-err {
    color: #d32f2f !important;
}