/* Theme 21 adapters for the original v2 Retail inner-page visual system.
   Keep page behavior in React and use Retail's widths, title art and controls. */
.fashion-storefront #react-spa-root :is(.react-account-page,.react-addresses-page,.react-orders-page,.react-static-page,.react-checkout-page){padding:0 0 80px!important}
.fashion-storefront #react-spa-root :is(.react-account-header,.react-addresses-header,.react-orders-header,.react-static-header,.react-checkout-header,.react-cart-header,.rtp-title,.rts-title){width:100%;max-width:none;min-height:0;padding:69px 20px 65px;margin:0 0 60px;background:var(--theme-box-background) url('/assets/v2/images/shop/file/page-title-blog.png') center/cover no-repeat;color:var(--theme-text);text-align:center;display:block}
.fashion-storefront #react-spa-root :is(.react-account-header,.react-addresses-header,.react-orders-header,.react-static-header,.react-checkout-header,.react-cart-header) h1,
.fashion-storefront #react-spa-root :is(.rtp-heading,.rts-heading){margin:0;font-size:42px!important;line-height:50px;font-weight:400;letter-spacing:0;text-align:center;color:var(--theme-text)}
.fashion-storefront #react-spa-root :is(.react-account-shell,.react-addresses-shell,.react-address-form-shell,.react-orders-shell,.react-static-categories,.react-static-content,.react-static-status,.react-static-success,.react-contact-shell,.react-checkout-layout,.react-cart-layout,.rtd-container,.rtp-container,.rts-container){width:calc(100% - 30px);max-width:1320px;margin-inline:auto}
.fashion-storefront #react-spa-root :is(.rtp-section,.rts-section){padding:0 0 60px}
.fashion-storefront #react-spa-root :is(.rtp-grid,.rts-grid,.rtd-related-grid){gap:30px}
/* Retail product detail: equal columns, true image proportions, framed options. */
.fashion-storefront #react-spa-root .rtd-main{padding:24px 0 60px}
.fashion-storefront #react-spa-root .rtd-layout{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.fashion-storefront #react-spa-root .rtd-info{padding-inline-start:25px;top:24px}
.fashion-storefront #react-spa-root .rtd-title{font-size:23px;line-height:1.4;font-weight:500;margin:0 0 16px}
.fashion-storefront #react-spa-root .rtd-gallery-main img{height:auto;aspect-ratio:auto;object-fit:contain}
.fashion-storefront #react-spa-root .rtd-thumbs{display:flex;gap:10px;overflow:auto;padding-bottom:4px}
.fashion-storefront #react-spa-root .rtd-thumb{width:80px;flex:0 0 80px;border:1px solid var(--react-line);border-radius:3px;overflow:hidden}
.fashion-storefront #react-spa-root .rtd-thumb.active{border-color:var(--theme-text)}
.fashion-storefront #react-spa-root .rtd-about{font-size:14px;line-height:24px;margin-bottom:20px}
.fashion-storefront #react-spa-root .rtd-price{font-size:28px;line-height:28px;font-weight:400}
.fashion-storefront #react-spa-root .rtd-old-price{font-size:20px;font-weight:400}
.fashion-storefront #react-spa-root .rtd-price-row{margin-bottom:30px}
.fashion-storefront #react-spa-root .rtd-option{margin-top:24px}
.fashion-storefront #react-spa-root .rtd-choice{border:1px solid var(--react-line);border-radius:3px;min-width:42px;min-height:42px;padding:8px 14px;color:var(--theme-text);background:var(--theme-background);font-size:14px}
.fashion-storefront #react-spa-root .rtd-choice.active{border-color:var(--theme-text)!important;background:var(--theme-text);color:var(--theme-background);box-shadow:none!important}
.fashion-storefront #react-spa-root .rtd-qty{display:inline-grid;grid-template-columns:38px 51px 38px;background:#f2f2f2;border:0;border-radius:3px;min-height:46px}
.fashion-storefront #react-spa-root .rtd-qty input{min-height:46px!important;height:46px;border:0!important;padding:0;background:transparent!important}
.fashion-storefront #react-spa-root .rtd-qty button{height:46px;font-size:24px}
.fashion-storefront #react-spa-root .rtd-submit{display:flex;justify-content:center;align-items:center;min-height:46px!important;padding:12px 24px}
.fashion-storefront #react-spa-root :is(.rtd-description,.rtd-related){padding:0 0 60px}
.fashion-storefront #react-spa-root .rtd-section-title{text-align:center;font-size:28px;font-weight:400;margin-bottom:30px}
.fashion-storefront #react-spa-root .rtd-description-body{border-top:1px solid var(--react-line);border-bottom:1px solid var(--react-line);padding:30px 0}
/* Normal Retail cart proportions, including narrow desktop/tablet screens. */
.fashion-storefront #react-spa-root .react-cart-layout{padding:0;grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:40px}
.fashion-storefront #react-spa-root :is(.react-cart-table-head,.react-cart-item){grid-template-columns:minmax(150px,1fr) 85px 120px 85px;gap:16px}
.fashion-storefront #react-spa-root .react-cart-table-head{font-weight:500;color:var(--theme-text)}
.fashion-storefront #react-spa-root .react-cart-summary{padding:24px!important;border:1px solid var(--react-line)!important;background:var(--theme-background)!important}
.fashion-storefront #react-spa-root .react-cart-qty{background:#f2f2f2!important;border:0!important;border-radius:3px!important}
.fashion-storefront #react-spa-root :is(.react-cart-price,.react-cart-total){font-size:14px;font-weight:500;color:var(--theme-text)}
/* Retail form and content panels: white surface, subtle borders, normal weights. */
.fashion-storefront #react-spa-root :is(.react-account-panel,.react-address-panel,.react-static-content,.react-contact-info,.react-contact-form){padding:0;border:0!important;border-radius:0!important;background:var(--theme-background)!important;box-shadow:none}
.fashion-storefront #react-spa-root :is(.react-account-field,.react-address-field,.react-checkout-field){font-size:14px;font-weight:400;gap:10px;color:var(--theme-text)}
.fashion-storefront #react-spa-root :is(.react-account-field,.react-address-field,.react-checkout-field) :is(input,select,textarea){border-radius:3px!important;padding:12px 16px;font-size:14px!important}
.fashion-storefront #react-spa-root :is(.react-account-primary,.react-address-primary,.react-checkout-primary,.react-checkout-submit,.react-static-primary){padding:12px 24px;min-height:46px!important;font-weight:500!important;width:fit-content}
.fashion-storefront #react-spa-root :is(.react-checkout-panel,.react-checkout-summary){padding:24px;background:var(--theme-background)!important;border-radius:3px!important}
.fashion-storefront #react-spa-root .react-checkout-layout{grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:60px}
.fashion-storefront #react-spa-root :is(.react-checkout-title-row h2,.react-checkout-summary h2,.react-contact-info h2,.react-contact-form h2){font-size:20px;font-weight:500;margin-bottom:20px}
.fashion-storefront #react-spa-root .react-static-content{line-height:1.8}
.fashion-storefront #react-spa-root .react-static-category{border:0!important;background:transparent!important;border-radius:10px!important;overflow:hidden}
.fashion-storefront #react-spa-root :is(.react-address-card,.react-order-card,.react-orders-table){border-radius:3px!important;background:var(--theme-background)!important}
/* Reuse the Retail account navigation on every authenticated account screen. */
.fashion-storefront #react-spa-root .fashion-account-layout{width:100%;display:grid;grid-template-columns:calc(max(15px,(100% - 1320px)/2)) 280px minmax(0,1fr) calc(max(15px,(100% - 1320px)/2));column-gap:30px;align-items:start;padding-bottom:80px}
.fashion-storefront #react-spa-root .fashion-account-navigation{grid-column:2;grid-row:2;min-width:0}
.fashion-storefront #react-spa-root .fashion-account-content{display:contents}
.fashion-storefront #react-spa-root .fashion-account-content>header{grid-column:1/-1;grid-row:1}
.fashion-storefront #react-spa-root .fashion-account-content>:not(header){grid-column:3;grid-row:2;width:100%;max-width:none;margin:0}
.fashion-storefront #react-spa-root .fashion-account-navigation a{width:100%;color:inherit}
.fashion-storefront #react-spa-root .react-account-tiles{display:none}
.fashion-storefront #react-spa-root .react-account-panel-narrow{max-width:none;justify-self:stretch}
.fashion-storefront #react-spa-root .react-account-dashboard h2{font-size:20px;font-weight:500}
.fashion-storefront #react-spa-root .react-account-dashboard p{font-size:14px;line-height:24px}
/* Login/register/forgot password use the standard page banner and form width. */
.fashion-storefront #react-spa-root .fashion-auth-title{margin-bottom:60px}
.fashion-storefront #react-spa-root .fashion-auth-title h1{margin:0;font-weight:400}
.fashion-storefront #react-spa-root .fashion-auth{max-width:640px;margin:0 auto 80px;padding:0 15px}
.fashion-storefront #react-spa-root .fashion-auth label{font-size:14px;margin:0 0 20px;line-height:24px}
.fashion-storefront #react-spa-root .fashion-auth input:not([type=checkbox]){margin-top:8px;border-radius:3px!important}
.fashion-storefront #react-spa-root .fashion-auth nav{font-size:14px;flex-wrap:wrap;gap:15px 24px}
.fashion-storefront #react-spa-root :is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--theme-text);outline-offset:3px}
@media(max-width:1199px){
.fashion-storefront #react-spa-root .fashion-account-layout{grid-template-columns:0 230px minmax(0,1fr) 0;column-gap:15px}
.fashion-storefront #react-spa-root .react-cart-layout{grid-template-columns:1fr;gap:30px}
.fashion-storefront #react-spa-root .react-checkout-layout{gap:30px}
}
@media(max-width:767px){
.fashion-storefront #react-spa-root :is(.react-account-page,.react-addresses-page,.react-orders-page,.react-static-page,.react-checkout-page){padding-bottom:50px!important}
.fashion-storefront #react-spa-root :is(.react-account-header,.react-addresses-header,.react-orders-header,.react-static-header,.react-checkout-header,.react-cart-header,.rtp-title,.rts-title){padding:40px 15px;margin-bottom:30px}
.fashion-storefront #react-spa-root :is(.react-account-header,.react-addresses-header,.react-orders-header,.react-static-header,.react-checkout-header,.react-cart-header) h1,
.fashion-storefront #react-spa-root :is(.rtp-heading,.rts-heading){font-size:28px!important;line-height:36px}
.fashion-storefront #react-spa-root :is(.rtp-grid,.rts-grid,.rtd-related-grid){gap:24px 15px}
.fashion-storefront #react-spa-root .rtd-layout{grid-template-columns:1fr;gap:24px}
.fashion-storefront #react-spa-root .rtd-info{position:static;padding:0}
.fashion-storefront #react-spa-root .rtd-main{padding:15px 0 40px}
.fashion-storefront #react-spa-root :is(.rtd-description,.rtd-related){padding-bottom:40px}
.fashion-storefront #react-spa-root .react-cart-item{grid-template-columns:1fr;gap:12px}
.fashion-storefront #react-spa-root .react-cart-table-head{display:none}
.fashion-storefront #react-spa-root .react-cart-summary{padding:20px!important}
.fashion-storefront #react-spa-root .react-checkout-layout{grid-template-columns:1fr}
.fashion-storefront #react-spa-root .fashion-account-layout{display:flex;flex-direction:column;gap:0;padding:0 15px 40px}
.fashion-storefront #react-spa-root .fashion-account-content{display:contents}
.fashion-storefront #react-spa-root .fashion-account-content>header{order:-2;width:calc(100% + 30px);margin-inline:-15px}
.fashion-storefront #react-spa-root .fashion-account-navigation{order:-1;width:100%;margin-bottom:30px}
.fashion-storefront #react-spa-root .fashion-account-navigation .my-account-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fashion-storefront #react-spa-root .my-account-nav .my-account-nav-item{font-size:14px;padding:12px}
.fashion-storefront #react-spa-root .fashion-account-content>:not(header){width:100%}
.fashion-storefront #react-spa-root .fashion-auth-title{padding:40px 15px;margin-bottom:30px}
.fashion-storefront #react-spa-root .fashion-auth-title h1{font-size:28px;line-height:36px}
}
@media(prefers-reduced-motion:reduce){.fashion-storefront #react-spa-root *{scroll-behavior:auto!important;transition:none!important}}
/* Page forms retain their submission semantics while sharing the account grid. */
.fashion-storefront #react-spa-root .fashion-account-content>:is(form,div){display:contents}
.fashion-storefront #react-spa-root .fashion-account-content :is(.react-account-header,.react-addresses-header,.react-orders-header){grid-column:1/-1;grid-row:1}
.fashion-storefront #react-spa-root .fashion-account-content :is(.react-account-shell,.react-addresses-shell,.react-address-form-shell,.react-orders-shell){grid-column:3;grid-row:2;width:100%;max-width:none;margin:0}
@media(max-width:767px){
.fashion-storefront #react-spa-root .fashion-account-content :is(.react-account-header,.react-addresses-header,.react-orders-header){order:-2;width:calc(100% + 30px);margin-inline:-15px}
}
.fashion-storefront #react-spa-root .fashion-account-layout>*{min-width:0}
/* Retail's sticky global header rule belongs to the storefront header only. */
.fashion-storefront #react-spa-root header{position:static;inset:auto;z-index:auto;transition:none}
.fashion-storefront #react-spa-root .fashion-account-content :is(.react-account-shell,.react-addresses-shell,.react-address-form-shell,.react-orders-shell){min-width:0}
.fashion-storefront #react-spa-root .rtd-qty input[type=number]{height:46px;min-height:46px!important;border:0!important;border-radius:0!important;padding:0!important;background:transparent!important}

.fashion-storefront #react-spa-root .fashion-account-navigation .my-account-nav-item{padding:0!important}
.fashion-storefront #react-spa-root .fashion-account-navigation .my-account-nav-item:is(.active,:hover){background:var(--theme-text)!important;color:var(--theme-background)!important}
.fashion-storefront #react-spa-root .fashion-account-navigation .my-account-nav-item:is(.active,:hover) a{color:var(--theme-background)!important}

/* Fashion React parity controls. */
.fashion-storefront .fashion-mini-cart ul{list-style:none;padding:0;margin:0 0 24px}
.fashion-storefront .fashion-mini-cart li{border-bottom:1px solid #ddd;padding:16px 0}
.fashion-storefront .fashion-mini-cart li a{display:flex;gap:16px;align-items:center;color:inherit}
.fashion-storefront .fashion-mini-cart img{object-fit:contain;flex:0 0 70px}
.fashion-storefront .fashion-mini-cart small{display:block;margin-top:6px}
.fashion-storefront .fashion-mini-cart>.tf-btn{display:flex;justify-content:center;margin-top:16px}
.fashion-storefront .fashion-mini-total{display:flex;justify-content:space-between;gap:16px}
.fashion-storefront .fashion-product-sharing{display:flex;flex-wrap:wrap;gap:12px;font-size:14px;margin-bottom:20px}
.fashion-storefront .fashion-product-sharing a{text-decoration:underline;color:inherit}
.fashion-storefront .fashion-gallery-image{display:block;border:0;padding:0;background:transparent;width:100%;cursor:zoom-in}
.fashion-storefront .fashion-gallery-image img{width:100%;height:auto}
.fashion-storefront .fashion-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.fashion-storefront .fashion-gallery-navigation{display:flex;justify-content:center;align-items:center;gap:16px;padding:12px}
.fashion-storefront .fashion-gallery-navigation button{border:1px solid #ddd;background:var(--theme-background);color:var(--theme-text);padding:8px 16px}
.fashion-storefront .fashion-gallery-dialog{width:min(1100px,95vw);max-width:95vw;max-height:95dvh;padding:0;border:0;background:var(--theme-background);color:var(--theme-text)}
.fashion-storefront .fashion-gallery-dialog::backdrop{background:rgba(0,0,0,.75)}
.fashion-storefront .fashion-gallery-full{max-height:78dvh;overflow:auto;text-align:center}
.fashion-storefront .fashion-gallery-full img{max-width:100%;max-height:78dvh;width:auto;height:auto;object-fit:contain}
.fashion-storefront .fashion-gallery-full.is-zoomed img{max-width:none;max-height:none;width:auto;min-width:100%}
.fashion-storefront .whatsapp-btn{position:fixed;inset-inline-end:20px;bottom:24px;z-index:1000;background:#25d366;color:#fff;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:26px}
@media(max-width:767px){.fashion-storefront .fashion-gallery-navigation{gap:8px}.fashion-storefront .fashion-gallery-navigation button{padding:8px 12px}}

.fashion-storefront .fashion-mini-remove{border:0;background:transparent;text-decoration:underline;color:inherit;padding:8px 0;margin-inline-start:86px}
.fashion-storefront .fashion-gallery-video{width:100%;aspect-ratio:16/9;border:0;margin-top:16px}

/* Cart opens at the inline end, matching the standard fashion cart. */
.fashion-storefront #fashion-mini-cart{margin-inline-start:auto;animation:fashion-cart-enter .3s ease-out}
[dir="rtl"] .fashion-storefront #fashion-mini-cart{animation-name:fashion-cart-enter-rtl}
@keyframes fashion-cart-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes fashion-cart-enter-rtl{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.fashion-storefront #fashion-mini-cart{animation:none}}

/* Card action icons need contrast independently of the global icon font. */
.fashion-storefront #react-spa-root .card-product .quick-add { background: var(--theme-text); color: var(--theme-background); }
.fashion-storefront #react-spa-root .card-product .quick-add .fashion-card-action-icon { display: block; color: var(--theme-background); flex-shrink: 0; }

/* Match the circular outline on add-to-cart and product-options actions. */
.fashion-storefront #react-spa-root .card-product .quick-add{border:1px solid currentColor;box-sizing:border-box}

/* Clamp titles to two lines; share only the height needed by each product row. */
.fashion-storefront #react-spa-root .card-product-info .title{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis;white-space:normal!important;line-height:1.4!important;height:var(--fashion-title-height,auto)!important;min-height:0;max-height:2.8em;overflow-wrap:anywhere}
.fashion-storefront #react-spa-root .card-product-info .tf-product-info-price{display:flex!important;align-items:baseline;justify-content:center;flex-wrap:nowrap;gap:8px}
.fashion-storefront #react-spa-root .card-product-info .tf-product-info-price :is(.price,.compare-price){white-space:nowrap;margin-inline:0}