/* Theme 21 cart, checkout and the alignment issues reported in UAT. */
.fashion-storefront #react-spa-root .card-product .tf-product-info-price { display:flex!important; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:4px 10px; }
.fashion-storefront #react-spa-root .card-product .compare-price { margin:0; font-size:12px; opacity:.65; }
.fashion-storefront #react-spa-root .card-product .quick-add .tooltip { inset:auto 0 calc(100% + 10px) auto!important; transform:none!important; margin:0!important; width:max-content; max-width:180px; white-space:normal; text-align:center; padding:7px 10px; font-size:11px; line-height:1.4; }
.fashion-storefront #react-spa-root .card-product .quick-add .tooltip::before { inset:auto 14px -4px auto!important; transform:rotate(45deg)!important; }
.fashion-storefront #react-spa-root :is(.react-cart-header,.react-checkout-header) { background:none; padding:36px 16px 28px; margin-bottom:0; }
.fashion-storefront #react-spa-root :is(.react-cart-header,.react-checkout-header) h1 { font-size:32px!important; line-height:1.3; }
.fashion-storefront #react-spa-root .react-cart-layout { max-width:1200px; width:calc(100% - 32px); grid-template-columns:minmax(0,1fr) 340px; gap:24px; padding:0 0 60px; align-items:start; }
.fashion-storefront #react-spa-root .react-cart-list { border:1px solid #0000001a; border-radius:16px; padding:0 24px; min-width:0; }
.fashion-storefront #react-spa-root :is(.react-cart-table-head,.react-cart-item) { grid-template-columns:minmax(0,1fr) 82px 112px 90px; gap:14px; }
.fashion-storefront #react-spa-root .react-cart-table-head { padding:20px 0; font-size:12px; opacity:.7; }
.fashion-storefront #react-spa-root .react-cart-item { padding:24px 0; align-items:center; }
.fashion-storefront #react-spa-root .react-cart-product { gap:16px; min-width:0; align-items:flex-start; }
.fashion-storefront #react-spa-root .react-cart-item__image { width:76px; height:96px; flex:0 0 76px; border-radius:8px; overflow:hidden; }
.fashion-storefront #react-spa-root .react-cart-item__image img { width:100%; height:100%; object-fit:cover; }
.fashion-storefront #react-spa-root .react-cart-item__title { font-size:15px; line-height:1.4; font-weight:600; }
.fashion-storefront #react-spa-root .react-cart-item__main { min-width:0; overflow-wrap:anywhere; }
.fashion-storefront #react-spa-root .react-cart-item__meta { font-size:12px; line-height:1.6; margin-top:6px; }
.fashion-storefront #react-spa-root .react-cart-link { margin-top:10px; font-size:12px; }
.fashion-storefront #react-spa-root .react-cart-qty { display:grid; grid-template-columns:34px minmax(0,1fr) 34px; width:112px; border:1px solid #0000001a!important; border-radius:8px!important; background:transparent!important; }
.fashion-storefront #react-spa-root .react-cart-qty button { width:34px; min-width:0; height:44px; padding:0; font-size:18px; }
.fashion-storefront #react-spa-root .react-cart-qty input { width:100%!important; min-width:0; height:44px; padding:0!important; text-align:center; border:0; }
.fashion-storefront #react-spa-root .react-cart-summary { border-radius:16px; padding:24px!important; position:static; }
.fashion-storefront #react-spa-root .react-cart-summary__line { gap:16px; align-items:baseline; padding:14px 0; font-size:14px; }
.fashion-storefront #react-spa-root .react-cart-summary__line--grand { border-top:1px solid #0000001a; font-size:19px; margin-top:16px; }
.fashion-storefront #react-spa-root .react-cart-check { display:flex; align-items:flex-start; gap:10px; padding:14px; border:1px solid #0000001a; border-radius:8px; margin-bottom:16px; font-size:13px; line-height:1.5; }
.fashion-storefront #react-spa-root .react-cart-note { display:grid; gap:10px; padding:20px 0; }
.fashion-storefront #react-spa-root .react-cart-note textarea { border-radius:8px; min-height:96px; padding:12px; }
.fashion-storefront #react-spa-root .react-cart-checkout { display:flex; align-items:center; justify-content:center; min-height:48px; border-radius:8px; font-size:13px; }
.fashion-storefront #react-spa-root .fashion-checkout-container { width:calc(100% - 32px); max-width:1200px; padding:0; }
.fashion-storefront #react-spa-root .fashion-checkout-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,400px); gap:24px; align-items:start; }
.fashion-storefront #react-spa-root .fashion-checkout-main { min-width:0; }
.fashion-storefront #react-spa-root .fashion-checkout-main > .d-flex { padding:0 4px; gap:16px; }
.fashion-storefront #react-spa-root .fashion-checkout-layout .tf-page-cart-checkout { border:1px solid #0000001a; border-radius:16px; padding:24px; background:var(--theme-background); box-shadow:none; }
.fashion-storefront #react-spa-root .fashion-checkout-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 16px; }
.fashion-storefront #react-spa-root .fashion-checkout-field { min-width:0; }
.fashion-storefront #react-spa-root .fashion-checkout-field > label { display:block; margin:0 0 8px; font-size:13px; line-height:1.5; }
.fashion-storefront #react-spa-root .fashion-checkout-field :is(input,select) { width:100%; min-width:0; height:48px; min-height:48px; padding:12px 14px!important; border:1px solid #0000001a; border-radius:8px!important; font-size:14px; background:var(--theme-background); color:var(--theme-text); }
.fashion-storefront #react-spa-root .fashion-checkout-field .input-group { display:flex; flex-wrap:nowrap; gap:8px; align-items:stretch; }
.fashion-storefront #react-spa-root .fashion-checkout-field .input-group-text { display:flex; align-items:center; padding:0 12px; margin:0!important; border-radius:8px; }
.fashion-storefront #react-spa-root .fashion-checkout-field .input-group input { flex:1; width:0; }
.fashion-storefront #react-spa-root .fashion-checkout-summary { min-width:0; }
.fashion-storefront #react-spa-root .fashion-checkout-summary .tf-cart-footer-inner { position:static; top:auto; }
.fashion-storefront #react-spa-root .fashion-checkout-summary h5 { font-size:20px; }
.fashion-storefront #react-spa-root .wrap-checkout-product { display:grid; gap:0; margin-bottom:20px; padding:0; }
.fashion-storefront #react-spa-root .checkout-product-item { display:grid; grid-template-columns:64px minmax(0,1fr); gap:14px; align-items:start; padding:16px 0; }
.fashion-storefront #react-spa-root .checkout-product-item + .checkout-product-item { border-top:1px solid #0000001a; }
.fashion-storefront #react-spa-root .checkout-product-item .img-product { width:64px; height:84px; margin:0; border:0; border-radius:8px; }
.fashion-storefront #react-spa-root .checkout-product-item .img-product img { width:100%; height:100%; object-fit:cover; border-radius:8px; }
.fashion-storefront #react-spa-root .checkout-product-item .quantity { inset:-6px -6px auto auto; min-width:22px; height:22px; font-size:11px; line-height:22px; }
.fashion-storefront #react-spa-root .checkout-product-item .content { display:flex; flex-direction:column; align-items:stretch; gap:8px; min-width:0; }
.fashion-storefront #react-spa-root .checkout-product-item .name { font-size:14px; font-weight:600; line-height:1.4; margin:0; overflow-wrap:anywhere; }
.fashion-storefront #react-spa-root .checkout-product-item .variant { display:block; font-size:12px; line-height:1.5; margin-top:5px; overflow-wrap:anywhere; }
.fashion-storefront #react-spa-root .checkout-product-item .price { font-size:13px; font-weight:600; margin:0; }
.fashion-storefront #react-spa-root .fashion-checkout-coupon { display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; margin:0 0 20px; }
.fashion-storefront #react-spa-root .fashion-checkout-coupon input { flex:1 1 120px; width:0; min-width:0; height:48px; padding:12px 14px!important; border:1px solid #0000001a; border-radius:8px; font-size:14px; }
.fashion-storefront #react-spa-root .fashion-checkout-coupon .tf-btn { flex:0 0 auto; min-width:0!important; height:48px; padding:12px 16px!important; margin:0; border-radius:8px; font-size:13px; }
.fashion-storefront #react-spa-root .fashion-checkout-summary .divider { align-items:baseline; gap:16px; padding:12px 0!important; border:0; }
.fashion-storefront #react-spa-root .fashion-checkout-summary .divider h6 { margin:0; font-size:13px; line-height:1.5; }
.fashion-storefront #react-spa-root .fashion-checkout-summary .divider .total { flex-shrink:0; text-align:end; }
.fashion-storefront #react-spa-root .fashion-checkout-summary .divider.pb-4 { border-top:1px solid #0000001a; margin-top:12px; padding:20px 0!important; }
.fashion-storefront #react-spa-root .fashion-checkout-summary .divider.pb-4 h6 { font-size:18px; }
.fashion-storefront #react-spa-root .fashion-checkout-payments { display:grid; gap:10px; }
.fashion-storefront #react-spa-root .fashion-checkout-payments .fieldset-radio { display:flex; align-items:center; gap:10px; min-height:48px; padding:12px; margin:0!important; border:1px solid #0000001a; border-radius:8px; }
.fashion-storefront #react-spa-root .fashion-checkout-payments label { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; margin:0; font-size:13px; }
.fashion-storefront #react-spa-root .fashion-checkout-layout .box-checkbox { display:flex; align-items:flex-start; gap:10px; padding:16px 0; margin:0; }
.fashion-storefront #react-spa-root .fashion-checkout-layout .box-checkbox label { margin:0; font-size:13px; line-height:1.6; }
.fashion-storefront #react-spa-root .checkout-gift-wrap-box { padding:14px 12px; gap:10px; border-radius:8px; margin:0 0 16px; }
.fashion-storefront #react-spa-root .checkout-gift-wrap-box label { font-size:13px; line-height:1.5; }
.fashion-storefront #react-spa-root #placeorder { width:100%; min-width:0!important; min-height:48px; border-radius:8px; font-size:13px; padding:14px!important; margin-top:20px; }
.fashion-storefront #react-spa-root :is(.react-cart-check,.fashion-auth,.fashion-checkout-layout) input[type=checkbox] { appearance:auto; width:18px!important; height:18px!important; min-height:18px; flex:0 0 18px; padding:0!important; margin:2px 0 0!important; border-radius:3px; accent-color:var(--theme-text); vertical-align:middle; }
.fashion-storefront #react-spa-root :is(.react-cart-check,.fashion-auth,.fashion-checkout-layout) input[type=checkbox]::before,
.fashion-storefront #react-spa-root :is(.react-cart-check,.fashion-auth,.fashion-checkout-layout) input[type=checkbox]::after { content:none!important; }
.fashion-storefront #react-spa-root .fashion-auth label:has(input[type=checkbox]) { display:flex; align-items:flex-start; gap:10px; line-height:1.6; }
.fashion-storefront #react-spa-root .fashion-auth label:has(input[type=checkbox]) a { min-width:0; }
@media(max-width:1100px) {
 .fashion-storefront #react-spa-root .react-cart-layout { grid-template-columns:minmax(0,1fr) 310px; }
 .fashion-storefront #react-spa-root :is(.react-cart-table-head,.react-cart-item) { grid-template-columns:minmax(0,1fr) 70px 100px 80px; gap:10px; }
 .fashion-storefront #react-spa-root .react-cart-qty { width:100px; grid-template-columns:30px minmax(0,1fr) 30px; }
 .fashion-storefront #react-spa-root .react-cart-qty button { width:30px; }
}
@media(max-width:991px) {
 .fashion-storefront #react-spa-root :is(.react-cart-layout,.fashion-checkout-layout) { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:767px) {
 .fashion-storefront #react-spa-root :is(.react-cart-header,.react-checkout-header) { padding:24px 16px; }
 .fashion-storefront #react-spa-root :is(.react-cart-header,.react-checkout-header) h1 { font-size:27px!important; }
 .fashion-storefront #react-spa-root .react-cart-list { padding:0 16px; }
 .fashion-storefront #react-spa-root .react-cart-table-head { display:none; }
 .fashion-storefront #react-spa-root .react-cart-item { grid-template-columns:minmax(0,1fr) auto; gap:14px; }
 .fashion-storefront #react-spa-root .react-cart-product { grid-column:1/-1; }
 .fashion-storefront #react-spa-root .react-cart-price { display:none; }
 .fashion-storefront #react-spa-root .react-cart-qty { grid-column:1; }
 .fashion-storefront #react-spa-root .react-cart-total { grid-column:2; text-align:end; }
 .fashion-storefront #react-spa-root .react-cart-total::before { display:none; }
 .fashion-storefront #react-spa-root .react-cart-summary { padding:20px!important; }
 .fashion-storefront #react-spa-root .fashion-checkout-layout .tf-page-cart-checkout { padding:20px 16px; border-radius:12px; }
 .fashion-storefront #react-spa-root .fashion-checkout-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
 .fashion-storefront #react-spa-root .checkout-gift-wrap-box label { flex-direction:column; gap:2px; }
 .fashion-storefront #react-spa-root .react-cart-summary__line--grand { font-size:18px; }
}

/* Finish overrides for shared !important resets and cart quantity text. */
.fashion-storefront #react-spa-root :is(.react-cart-list,.react-cart-summary) { border:1px solid #0000001a!important; border-radius:16px!important; background:var(--theme-background)!important; }
.fashion-storefront #react-spa-root .react-cart-qty { height:44px; overflow:hidden; }
.fashion-storefront #react-spa-root .react-cart-qty span { display:flex; align-items:center; justify-content:center; height:44px; }
.fashion-storefront #react-spa-root :is(#react-checkout-page,#react-member-checkout-page,#react-ship-checkout-page) .fashion-checkout-field :is(input,select) { border-radius:8px!important; }
.fashion-storefront #react-spa-root .fashion-checkout-summary .tf-page-cart-checkout { gap:0; }
.fashion-storefront #react-spa-root .react-cart-payment-widgets iframe[src*="promo.taly.io"] { height:110px!important; }

/* Make returning-customer login visible beside the guest billing heading. */
.fashion-storefront #react-spa-root .fashion-checkout-main > .d-flex:first-child > a {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    min-height:44px; padding:10px 18px; flex-shrink:0;
    border:1px solid var(--theme-text); border-radius:8px;
    background:var(--theme-background); color:var(--theme-text);
    font-size:13px; font-weight:600; line-height:1.4; text-decoration:none;
}
.fashion-storefront #react-spa-root .fashion-checkout-main > .d-flex:first-child > a::before {
    content:""; display:block; width:18px; height:18px; flex:0 0 18px;
    background:currentColor;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M4 21v-2a8 8 0 0 1 16 0v2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.fashion-storefront #react-spa-root .fashion-checkout-main > .d-flex:first-child > a:hover {
    background:var(--theme-text); color:var(--theme-background);
}
.fashion-storefront #react-spa-root .fashion-checkout-main > .d-flex:first-child > a:focus-visible {
    outline:2px solid var(--theme-text); outline-offset:4px;
}
@media(max-width:575px) {
    .fashion-storefront #react-spa-root .fashion-checkout-main > .d-flex:first-child { flex-wrap:wrap; }
    .fashion-storefront #react-spa-root .fashion-checkout-main > .d-flex:first-child > a { padding-inline:14px; }
}

.fashion-storefront #react-spa-root .fashion-address-hint { display:block; margin:6px 0 0; font-size:12px; font-weight:400; line-height:1.5; color:var(--theme-text); opacity:.75; overflow-wrap:anywhere; }

.fashion-storefront #react-spa-root .fashion-checkout-payments label { flex:1; }
.fashion-storefront #react-spa-root .fashion-checkout-payments .fashion-payment-logo { width:80px; height:28px; max-width:80px; max-height:28px; flex:0 0 80px; object-fit:contain; object-position:center; margin-inline-start:auto; float:none; }

/* The mobile label is a separate grid row; do not clip the controls below it. */
@media(max-width:920px){
.fashion-storefront #react-spa-root .react-cart-qty{height:auto;overflow:visible;grid-template-rows:auto 44px}
.fashion-storefront #react-spa-root .react-cart-qty::before{grid-column:1/-1;margin:0;padding:6px 8px 0;line-height:18px;text-align:start}
.fashion-storefront #react-spa-root .react-cart-qty button{grid-row:2;color:var(--theme-text);background:transparent}
.fashion-storefront #react-spa-root .react-cart-qty span{grid-row:2;color:var(--theme-text)}
}

@media(max-width:920px){
.fashion-storefront #react-spa-root .react-cart-qty{height:44px;grid-template-rows:44px}
.fashion-storefront #react-spa-root .react-cart-qty::before{content:none;display:none}
.fashion-storefront #react-spa-root .react-cart-qty button,.fashion-storefront #react-spa-root .react-cart-qty span{grid-row:1}
}

/* Preserve the full bilingual KNET mark without stretching it. */
.fashion-storefront #react-spa-root .fashion-checkout-payments .fashion-payment-logo[src*="/knet-logo.png"] { height:36px; max-height:36px; object-fit:contain; }