/* el-ux4-20261103 — Encore shop UX round (Encore storefront only, never checkout).
   Kill switch: touch var/encore-ux4/off   Rollback: var/clbak/ux-round-20261103/rollback-encore.sh */

/* E1 CLS: the el-ux2 polish rules are printed at the very end of <body>, so the hero text, product
   card images and promo bar jumped after first paint. Same rules, applied from the <head>. */
/* A2: no sideways gutter on small screens */
@media (max-width:767px){html,body{overflow-x:clip;max-width:100%}}
/* Accessibility: one clear focus ring, Encore ink */
html:root body#html-body :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid #101820!important;outline-offset:2px!important;box-shadow:none!important}
html:root body#html-body .elh-hero :is(a,button):focus-visible{outline-color:#F4F4F1!important}
/* Tap targets: small inline links get a 24px minimum hit area */
html:root body#html-body :is(.el-cookie-bar__link,.fp-promo__item,.el-crumbs__item a,.el20-houses a){display:inline-flex;align-items:center;min-height:24px}
html:root body#html-body footer :is(ul,ol) a{display:inline-block;padding-block:3px}
/* Home hero: legible eyebrow and strapline over light photography */
html:root body#html-body .elh-hero__content{position:relative;z-index:1}
html:root body#html-body .elh-hero__content :is(p,span,h1){text-shadow:0 1px 12px rgba(16,24,32,.35)}
@media (max-width:767px){html:root body#html-body .elh-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,24,32,.38) 0%,rgba(16,24,32,.18) 45%,rgba(16,24,32,.42) 100%);pointer-events:none}html:root body#html-body .elh-hero{position:relative}html:root body#html-body .elh-hero__content{z-index:2}}
/* Product cards: consistent image ratio and name clamp */
html:root body#html-body .lx-card__media img{aspect-ratio:4/5;object-fit:cover;width:100%;height:auto;background:#fff}
html:root body#html-body .lx-card__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* No promotion of Mulberry / Return to Tiffany outside the product grid itself */
html:root body#html-body :is(.el20-houses,.fp-promo,nav,footer,.el-guides,[class*="guide"]) a:is([href*="/brands/mulberry"],[href*="guides/models/mulberry"],[href*="q=Mulberry"],[data-el20-house="Mulberry"],[href*="return-to-tiffany"]){display:none!important}
/* Mobile listing: Filter shares the sticky sort bar */
@media (max-width:767px){
html:root body#html-body .el-filter-bar.el-ux2-merged{display:flex!important;align-items:center;gap:10px;flex-wrap:nowrap}
html:root body#html-body .el-filter-bar.el-ux2-merged .el-filter-label{display:none!important}
html:root body#html-body .el-filter-bar.el-ux2-merged .elf-open{flex:0 0 auto;min-height:44px;margin:0}
html:root body#html-body .el-filter-bar.el-ux2-merged .el-sort{flex:1 1 auto;min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
html:root body#html-body .el-filter-bar.el-ux2-merged .el-sort::-webkit-scrollbar{display:none}
html:root body#html-body .elf-bar.el-ux2-empty{position:static!important;margin:6px 0!important}
html:root body#html-body .elf-bar.el-ux2-empty:not(:has(.elf-chip)){display:none!important}
}

/* E2 Header "Sell now": square outlined button like every other Encore button (was a rounded pill) */
html:root body#html-body a.el-hdr-sell{border-radius:0!important}
@media (max-width:1023px){html:root body#html-body a.el-hdr-sell--m{position:relative;min-height:32px}
html:root body#html-body a.el-hdr-sell--m::after{content:"";position:absolute;inset:-6px -2px}}

/* E3 Desktop: one "Sell now" in view — drop the duplicate in the dark promo bar when the header button shows */
@media (min-width:1024px){html:root body#html-body .fp-promo a.fp-promo__sell{display:none!important}}

/* E4 Phones/tablets: only the 57px logo bar stays pinned while scrolling (Trustpilot + promo strips scroll away);
   frees ~68px of screen on every page. Listing filter bar docks under it. */
@media (max-width:1023px){
html:root body#html-body header.page-header{top:-68px!important}
html:root body#html-body .el-filter-bar.el-ux2-merged,html:root body#html-body .el-filter-bar{top:57px!important}
}

/* E5 Mobile menu: item counts as quiet numerals, not grey pills */
html:root body#html-body .fp-mm .elm2__n{background:transparent!important;border-radius:0!important;padding:0 2px!important;min-width:0!important;color:#5b636b!important;font-weight:400!important;font-size:12px!important;font-variant-numeric:tabular-nums}

/* E7 PDP "About the model": page tone with a hairline, not a white card */
html:root body#html-body .el-sp-model{background:transparent!important}

/* E8/E9 Checkboxes and radios: Encore ink, 20px newsletter box */
html:root body#html-body :is(input[type=checkbox],input[type=radio]){accent-color:#101820}
html:root body#html-body .el22-nl__c input[type=checkbox]{width:20px;height:20px;border:1px solid rgba(16,24,32,.45);border-radius:0;color:#101820;flex:0 0 20px}

/* E10 "Recently viewed" sits above the footer, not under the company legal line */
html:root body#html-body .page-wrapper>.page-footer{order:2}
html:root body#html-body .page-wrapper>.el-rv{order:1}

/* E13 Gallery dots: same 24px look, 44px touch area */
html:root body#html-body .fp-hero__dot{position:relative}
html:root body#html-body .fp-hero__dot::after{content:"";position:absolute;inset:-10px -4px}

/* E14 Headings break evenly; body copy avoids single-word last lines */
html:root body#html-body main :is(h1,h2,h3){text-wrap:balance}
html:root body#html-body main p{text-wrap:pretty}

/* E12 Respect reduced-motion settings */
@media (prefers-reduced-motion:reduce){html:root body#html-body *,html:root body#html-body *::before,html:root body#html-body *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* E15 PDP CLS: the "VAT included" note and the "Estimated arrival" line are added by script after first paint
   and pushed the buy column down; their space is now held from the start. */
html:root body#html-body.catalog-product-view .fp-pdp-buy>.fp-pdp-price:not(:has(.elc7-vat))::after{content:"";display:block;height:23px}
html:root body#html-body.catalog-product-view .fp-pdp-buy:has(#product-addtocart-button):not(:has(.el-bkux-eta))>.fp-pdp-actions{margin-bottom:60px}