/* Shared paint/geometry for the server shell and Vue loading states. */
.ec-loading-shell.preloader{display:block;background:var(--body-color,#fff);transition:opacity 220ms ease;overflow:hidden;}
.ec-loading-shell.preloader::before,.ec-loading-shell.preloader::after{display:none;}
.ec-loading-shell i,.ec-loading-menu i{display:block;min-height:18px;background:var(--check_dev_btn_back,#eff0f4);border-radius:8px;}
:is(.ecommerce-skeleton,.ec-loading-shell) i{position:relative;overflow:hidden;}
:is(.ecommerce-skeleton,.ec-loading-shell) i::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);animation:ec-loading-sheen 1.8s ease-in-out infinite;}
@keyframes ec-loading-sheen{to{transform:translateX(100%)}}
.ec-loading-header{box-sizing:border-box;display:flex;align-items:center;gap:16px;height:72px;padding:16px 24px;}
.ec-loading-header i:first-child{width:96px;height:28px;}.ec-loading-header i:nth-child(2){width:180px;height:44px;border-radius:999px;}.ec-loading-header i:last-child{margin-left:auto;width:44px;height:44px;border-radius:50%;}
.ec-loading-body{width:100%;max-width:1440px;margin:auto;box-sizing:border-box;}
.ec-loading-menu{padding:0 0 24px;overflow:hidden;}
.ec-loading-tabs{display:flex;gap:20px;min-height:44px;align-items:center;padding:0 20px;overflow:hidden;}
.ec-loading-tabs i{flex:0 0 100px;height:18px;}.ec-loading-tabs i:nth-child(2){flex-basis:160px;}.ec-loading-tabs--pills{gap:8px;padding-block:8px;min-height:36px;}.ec-loading-tabs--pills i{height:36px;border-radius:999px;}
.ec-loading-menu section{margin-top:16px;}.ec-loading-section-title{width:44%;height:28px;margin:0 20px 12px;}
.ec-loading-rail{display:flex;gap:12px;padding:4px 20px 24px;overflow:hidden;}
.ec-loading-card{box-sizing:border-box;flex:0 0 min(60vw,224px);min-width:0;padding:8px;border-radius:16px;box-shadow:0 1px 8px #0000000a;}
.ec-loading-card .ec-loading-photo{aspect-ratio:4/3;width:100%;border-radius:12px;}.ec-loading-card>i:not(:first-child){height:18px;margin-top:8px;}.ec-loading-card .ec-loading-price{width:35%;}.ec-loading-card .ec-loading-short{width:65%;}
.ec-loading-fulfillment{height:44px;margin:0 20px 12px;border-radius:999px!important;}.ec-loading-hero{aspect-ratio:2/1;margin:0 20px 16px;border-radius:16px!important;}
.ec-loading-product{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:24px;}.ec-loading-product-photo{aspect-ratio:4/3;}.ec-loading-fields{display:flex;flex-direction:column;gap:16px;min-width:0;}.ec-loading-fields .ec-loading-section-title{margin:0;width:70%;height:32px;}.ec-loading-fields>i:nth-child(2n){width:70%;}.ec-loading-button{min-height:48px!important;width:100%!important;border-radius:14px!important;}
.ec-loading-account,.ec-loading-checkout{max-width:632px;margin:auto;padding:24px 20px;}.ec-loading-checkout{display:grid;gap:20px;}.ec-loading-order-row{display:flex;gap:12px;padding:16px;border:1px solid var(--ecommerce-card-border,#eff0f4);border-radius:16px;}.ec-loading-order-row .ec-loading-fields{flex:1;}.ec-loading-thumb{width:64px;height:64px;flex-shrink:0;}.ec-loading-content{padding:24px 20px;}.ec-loading-cover{height:380px;width:100%!important;}.ec-loading-favorites{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:20px;}.ec-loading-success{max-width:560px;margin:24px auto;padding:24px;align-items:center;}.ec-loading-status-icon{width:80px;height:80px;border-radius:50%!important;}.ec-loading-success>i{width:70%;}
@media(min-width:1280px){.ec-loading-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}.ec-loading-card:nth-child(n+4){display:none;}.ec-loading-card .ec-loading-photo{aspect-ratio:4/3;}.ec-loading-fulfillment{display:none!important;}.ec-loading-hero{aspect-ratio:8/3;max-height:400px;}}
@media(max-width:767.98px){.ec-loading-header{height:56px;padding:12px 20px;}.ec-loading-header i:nth-child(2){display:none;}.ec-loading-body{max-width:448px;}.ec-loading-product{display:block;padding:0;}.ec-loading-product-photo{aspect-ratio:5/4;}.ec-loading-product>.ec-loading-fields{padding:20px;}.ec-loading-cover{height:200px;}.ec-loading-favorites{grid-template-columns:repeat(2,1fr);}}
@media(prefers-reduced-motion:reduce){:is(.ecommerce-skeleton,.ec-loading-shell) i::after{animation:none;display:none;}.ec-loading-shell.preloader{transition:none;}}

/* Match the standalone product breakpoint; dialogs have their own geometry. */
.ec-loading-product{display:block;max-width:672px;margin:0 auto;padding:0;}.ec-loading-product-photo{aspect-ratio:5/4;border-radius:0!important;}.ec-loading-product>.ec-loading-fields{padding:20px;box-sizing:border-box;}

@media(max-width:1279.98px){.ec-loading-shell--product>.ec-loading-header{display:none;}}
@media(min-width:1280px){.ec-loading-product{display:grid;grid-template-columns:minmax(0,48%) minmax(0,1fr);gap:40px;max-width:1440px;padding:24px 20px 0;box-sizing:border-box;}.ec-loading-product-photo{border-radius:24px!important;}.ec-loading-product>.ec-loading-fields{padding:0;}.ec-loading-product .ec-loading-button{min-height:52px!important;margin-top:auto;}}

/* Mask the real boxes, rather than replacing them with a second layout.
   Text remains in flow to preserve wrapping, line height and card dimensions. */
#ecommerce-server-shell[aria-busy="true"] :is([data-ec-pending], button:not(.ec-header-brand), [data-ecommerce-pending-control]) {
  color: transparent !important;
  text-shadow: none !important;
  background-color: var(--check_dev_btn_back, #eff0f4) !important;
  background-image: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / .55) 50%, transparent 65%);
  background-size: 300% 100%;
  animation: ec-control-preparing 1800ms ease-in-out infinite;
  border-color: transparent !important;
  box-shadow: none !important;
}
#ecommerce-server-shell[aria-busy="true"] :is([data-ec-pending], button:not(.ec-header-brand), [data-ecommerce-pending-control]) > * { visibility: hidden; }
#ecommerce-server-shell[aria-busy="true"] :is(.ec-dish-media, .source-mobile-dish__media, .ec-server-page__product-media, .ec-server__hero-slide) {
  background: var(--check_dev_btn_back, #eff0f4);
}
#ecommerce-server-shell[aria-busy="true"] :is(.ec-dish-media, .source-mobile-dish__media, .ec-server-page__product-media, .ec-server__hero-slide) > img { visibility: hidden; }
#ecommerce-server-shell[aria-busy="true"] :is(.ec-server__hero-slide, .ec-dish-media, .source-mobile-dish__media, .ec-server-page__product-media)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / .55) 50%, transparent 65%);
  background-size: 300% 100%; animation: ec-control-preparing 1800ms ease-in-out infinite;
}
.ec-media-pending {
  color: transparent;
  background-color: var(--check_dev_btn_back, #eff0f4);
  background-image: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / .55) 50%, transparent 65%);
  background-size: 300% 100%; animation: ec-control-preparing 1800ms ease-in-out infinite;
}
@keyframes ec-control-preparing { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* Kept outside the inert server tree so assistive technology can announce it. */
.ec-startup-status { display: none; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#ecommerce-server-shell[aria-busy="true"]:not([hidden]) ~ .ec-startup-status { display: block; }
@media (prefers-reduced-motion: reduce) {
  #ecommerce-server-shell[aria-busy="true"] :is([data-ec-pending], button, [data-ecommerce-pending-control]),
  #ecommerce-server-shell[aria-busy="true"] :is(.ec-server__hero-slide, .ec-dish-media, .source-mobile-dish__media, .ec-server-page__product-media)::after,
  .ec-media-pending { animation: none; background-image: none; }
}

/* Identical SSR / Vue checkout first viewport, using the live form width. */
.ec-pending-checkout { display: grid; gap: 24px; width: 100%; }
.ec-pending-checkout i { display: block; min-height: 0; background: var(--check_dev_btn_back,#eff0f4); border-radius: 8px; }
.ec-pending-checkout__item { position: relative; box-sizing: border-box; display: flex; gap: 16px; height: 130px; padding: 12px; border: 1px solid var(--ecommerce-card-border,#e9e9ec); border-radius: 16px; }
.ec-pending-checkout__item>div { flex: 1; min-width: 0; }
.ec-pending-checkout .ec-pending-checkout__photo { width: 76px; height: 100px; flex-shrink: 0; }
.ec-pending-checkout .ec-pending-checkout__name { width: 75%; height: 20px; }
.ec-pending-checkout .ec-pending-checkout__price { width: 64px; height: 20px; margin-top: 52px; }
.ec-pending-checkout .ec-pending-checkout__quantity { position: absolute; right: 12px; bottom: 12px; width: 132px; height: 44px; border-radius: 24px; }
.ec-pending-checkout section { display: grid; gap: 8px; }
.ec-pending-checkout .ec-pending-checkout__heading { height: 24px; width: 35%; }
.ec-pending-checkout .ec-pending-checkout__fulfillment { height: 74px; border-radius: 16px; }
.ec-pending-checkout__fields { display: grid; gap: 16px; }
.ec-pending-checkout__fields>div { display: grid; gap: 6px; }
.ec-pending-checkout .ec-pending-checkout__label { height: 22px; width: 28%; }
.ec-pending-checkout .ec-pending-checkout__field { height: 48px; border-radius: 14px; }
.ec-pending-checkout__submit { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); box-sizing: border-box; width: 100%; max-width: 672px; padding: 12px 20px 16px; border: 1px solid var(--ecommerce-card-border,#e9e9ec); border-radius: 20px 20px 0 0; background: var(--body-color,#fff); z-index: 10; }
.ec-pending-checkout__submit>i { height: 52px; border-radius: 16px; }
.ecommerce-skeleton--checkout { display: block !important; }
.ec-pending-checkout i { background-image: linear-gradient(110deg,transparent 35%,rgb(255 255 255 / .55) 50%,transparent 65%); background-size: 300% 100%; animation: ec-control-preparing 1800ms ease-in-out infinite; }
@media(prefers-reduced-motion:reduce) { .ec-pending-checkout i { animation: none; background-image: none; } }

.ec-pending-success-header { display: flex; align-items: center; gap: 8px; min-height: 56px; margin: 16px 24px 24px; }
.ec-pending-success-header h1 { font: 800 17px/1.25 EcommerceManrope,system-ui,sans-serif; margin: 0; }
.ec-pending-success-header button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; margin-left: -8px; padding: 10px; border: 0; background: transparent; }
.ec-pending-success-header svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
@media(max-width:767.98px) { .ec-pending-success-header { margin: 8px 16px 24px; } }

#ecommerce-server-shell [data-ec-pending] { border-radius: 6px; }

.ec-server-page__success-card { display: block; min-height: 0; }
.ec-pending-success { display: grid; justify-items: center; gap: 16px; min-height: 420px; width: 100%; }
.ec-pending-success i,.ec-pending-success__menu { display: block; min-height: 0; background: var(--check_dev_btn_back,#eff0f4); border-radius: 8px; }
.ec-pending-success .ec-pending-success__icon { width: 80px; height: 80px; border-radius: 50%; }
.ec-pending-success .ec-pending-success__title { width: 70%; height: 32px; }
.ec-pending-success .ec-pending-success__label { width: 32%; height: 20px; }
.ec-pending-success .ec-pending-success__time { width: 75%; height: 36px; border-radius: 20px; }
.ec-pending-success__steps { width: 100%; }
.ec-pending-success__steps>div { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.ec-pending-success__steps i:first-child { width: 32px; height: 32px; border-radius: 50%; }
.ec-pending-success__steps i:last-child { width: 50%; height: 18px; }
.ec-pending-success__menu { height: 48px; margin-top: 24px; }
.ec-pending-success i,.ec-pending-success__menu { background-image: linear-gradient(110deg,transparent 35%,rgb(255 255 255 / .55) 50%,transparent 65%); background-size: 300% 100%; animation: ec-control-preparing 1800ms ease-in-out infinite; }
@media(prefers-reduced-motion:reduce) { .ec-pending-success i,.ec-pending-success__menu { animation: none; background-image: none; } }

/* A card is one loading unit: do not expose photos/badges between masked
   controls. Children stay in flow so the real card still determines its size. */
#ecommerce-server-shell[aria-busy="true"] :is(.ec-dish-card, .source-mobile-dish, .ecommerce-dish) {
  position: relative;
  background: var(--check_dev_btn_back,#eff0f4);
  box-shadow: none;
}
#ecommerce-server-shell[aria-busy="true"] :is(.ec-dish-card, .source-mobile-dish, .ecommerce-dish) > * { visibility: hidden; }
#ecommerce-server-shell[aria-busy="true"] :is(.ec-dish-card, .source-mobile-dish, .ecommerce-dish)::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg,transparent 35%,rgb(255 255 255 / .55) 50%,transparent 65%);
  background-size: 300% 100%; animation: ec-control-preparing 1800ms ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce) {
 #ecommerce-server-shell[aria-busy="true"] :is(.ec-dish-card, .source-mobile-dish, .ecommerce-dish)::after { animation: none; background-image: none; }
}

.ec-server-page--checkout>.ecommerce-checkout-page__content { box-sizing: border-box; width: 100%; max-width: 672px; margin: 0 auto; padding: 0 20px 24px; }
.ec-server-page--success .ec-server-page__success-card { display: block; min-height: 0; }
.ec-server-page__success-card .ec-pending-success__menu { width: 100%; }
.ec-pending-success-header button { border-radius: 50%; }

/* Pagination is useful only once the carousel is interactive. Keep its space. */
#ecommerce-server-shell[aria-busy="true"] .ec-server__hero-indicators { visibility: hidden; }
/* Preserve each navigation item's geometry; never mask a full row as a pill. */
#ecommerce-server-shell[aria-busy="true"] .ec-server__categories button {
  color: transparent !important; background-color: var(--check_dev_btn_back,#eff0f4);
  border-radius: 10px;
}
#ecommerce-server-shell[aria-busy="true"] .ec-server__categories--groups button::after { display: none; }

/* Each complete card owns its readiness. Keep its real content in flow so
   revealing a photo never changes card, rail or section geometry. */
[data-ec-progressive-card] { position:relative; }
[data-ec-progressive-card] > * { transition:opacity 180ms ease-out; }
[data-ec-progressive-card][data-ec-ready="false"] > * { opacity:0; }
[data-ec-progressive-card]::after {
  content:""; position:absolute; inset:0; z-index:5; border-radius:inherit;
  background:var(--ec-skeleton-color,#eef0f3); pointer-events:none;
  opacity:0; transition:opacity 180ms ease-out;
}
[data-ec-progressive-card][data-ec-ready="false"]::after { opacity:1; }
.source-hero-slide img { transition:opacity 180ms ease-out; }
@media(prefers-reduced-motion:reduce) {
  [data-ec-progressive-card] > *, [data-ec-progressive-card]::after,
  .source-hero-slide img { transition:none; }
}