/* ES standard v2 (component theme 5) - PRODUCT PAGE (es/product/product.html).
   Literal values from dev_template/UI mockups setup/Marketplace Pro.dc.html
   lines 384-531 (product screen), measured against ref_design/design_product_*.
   Every rule is scoped .sf-scope[data-ct="5"]; the Buy-now modal
   (assets/sf-quickorder.js, mounted on <body>) is keyed off html[data-sf-ct="5"].
   Logical properties for RTL; the design's mobile layout triggers < 1000px.
   Sections: 1 frame  2 gallery  3 info column  4 price  5 options  6 qty +
   actions  7 info card  8 details tabs  9 reviews  10 states  11 Buy now on
   the page (partial/quick_inline.html)  12 Buy now modal  13 mobile. */

/* ---------- 1. frame ---------- */
.sf-scope[data-ct="5"] .es-pd { line-height: normal; }
.sf-scope[data-ct="5"] .es-pd__wrap { display: flex; flex-direction: column; gap: clamp(36px, 4cqi, 56px); }
.sf-scope[data-ct="5"] .es-pd__crumbs li[aria-current] { font-weight: 500; color: var(--es-text); }
.sf-scope[data-ct="5"] .es-pd__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3cqi, 48px); align-items: start; }
.sf-scope[data-ct="5"] nav + .es-pd__grid { margin-block-start: 16px; }

/* ---------- 2. gallery ---------- */
.sf-scope[data-ct="5"] .es-pd__gallery { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; counter-reset: es-pd-at es-pd-total; }
.sf-scope[data-ct="5"] .es-pd__frame { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--es-border); border-radius: 24px; background: var(--es-line); }
.sf-scope[data-ct="5"] .es-pd__main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-scope[data-ct="5"] .es-pd__main--contain { object-fit: contain; background: var(--es-surface); }
.sf-scope[data-ct="5"] .es-pd__main--empty { inset: 8px; width: auto; height: auto; display: grid; place-items: center; border: 2px dashed #CBD5E1; border-radius: 18px; background: transparent; color: var(--es-muted-2); }
.sf-scope[data-ct="5"] .es-pd__emptyicon { width: 28px; height: 28px; }
/* the design always shows the view-tile row: with fewer than two images keep its height */
.sf-scope[data-ct="5"] .es-pd__gallery--noviews { padding-block-end: 56px; }
.sf-scope[data-ct="5"] .es-pd__arrow { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-block-start: -22px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--es-navy); box-shadow: 0 2px 8px rgba(15, 23, 42, .15); cursor: pointer; transition: background .15s, color .15s; }
.sf-scope[data-ct="5"] .es-pd__arrow:hover { background: var(--es-surface); color: var(--es-blue); }
.sf-scope[data-ct="5"] .es-pd__arrow--prev { inset-inline-start: 12px; }
.sf-scope[data-ct="5"] .es-pd__arrow--next { inset-inline-end: 12px; }
.sf-scope[data-ct="5"]:dir(rtl) .es-pd__arrow svg { transform: scaleX(-1); }
.sf-scope[data-ct="5"] .es-pd__count { position: absolute; z-index: 2; inset-block-end: calc(44px + 12px + 12px); inset-inline-end: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(15, 23, 42, .75); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.25; pointer-events: none; }
.sf-scope[data-ct="5"] .es-pd__count::before { content: counter(es-pd-at) " / " counter(es-pd-total); direction: ltr; unicode-bidi: isolate; }
.sf-scope[data-ct="5"] .es-pd__thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.sf-scope[data-ct="5"] .es-pd__thumbs::-webkit-scrollbar { display: none; }
.sf-scope[data-ct="5"] .es-pd__thumb { position: relative; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--es-border); border-radius: 12px; background: var(--es-surface); color: #475569; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; counter-increment: es-pd-at es-pd-total; transition: border-color .15s, background .15s, color .15s; }
.sf-scope[data-ct="5"] .es-pd__thumb:hover { border-color: #93C5FD; }
.sf-scope[data-ct="5"] .es-pd__thumb:has(.sf-pd-thumb:checked) { border-color: var(--es-blue); background: var(--es-blue-soft); color: var(--es-blue-ink); }
.sf-scope[data-ct="5"] .es-pd__thumb:has(.sf-pd-thumb:checked) ~ .es-pd__thumb { counter-increment: es-pd-total; }
.sf-scope[data-ct="5"] .es-pd__thumb:has(.sf-pd-thumb:focus-visible) { outline: 2px solid var(--es-blue); outline-offset: 2px; }
.sf-scope[data-ct="5"] .es-pd__thumbinput { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; opacity: 0; }
.sf-scope[data-ct="5"] .es-pd__thumbimg { flex: none; width: 32px; height: 32px; border-radius: 8px; object-fit: cover; background: var(--es-line); }

/* ---------- 3. info column ---------- */
.sf-scope[data-ct="5"] .es-pd__info { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sf-scope[data-ct="5"] .es-pd__cat { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--es-blue-soft); color: var(--es-blue-ink); font-size: 13px; font-weight: 600; transition: background .15s, color .15s; }
.sf-scope[data-ct="5"] a.es-pd__cat:hover { background: var(--es-blue); color: #fff; }
.sf-scope[data-ct="5"] .es-pd__title { margin: 0; font-size: clamp(24px, 2.6cqi, 34px); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--es-text); text-wrap: balance; }
.sf-scope[data-ct="5"] .es-pd__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 32px; font-size: 14px; color: #475569; }
.sf-scope[data-ct="5"] .es-pd__stars { display: flex; align-items: center; gap: 2px; }
.sf-scope[data-ct="5"] .es-pd__star { flex: none; fill: var(--es-border); }
.sf-scope[data-ct="5"] .es-pd__star.is-on { fill: #F59E0B; }
.sf-scope[data-ct="5"] .es-pd__ratingnum { margin-inline-start: 6px; color: var(--es-text); font-weight: 700; }
.sf-scope[data-ct="5"] .es-pd__reviewslink { display: inline-flex; align-items: center; min-height: 32px; color: var(--es-blue); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.sf-scope[data-ct="5"] .es-pd__reviewslink:hover { color: var(--es-blue-ink); }
.sf-scope[data-ct="5"] .es-pd__noreviews { display: inline-flex; align-items: center; min-height: 32px; color: var(--es-muted); font-size: 14px; }

/* ---------- 4. price card ---------- */
.sf-scope[data-ct="5"] .es-pd__pricecard { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--es-border); border-radius: 18px; background: var(--es-surface); }
.sf-scope[data-ct="5"] .es-pd__pricerow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.sf-scope[data-ct="5"] .es-pd__price { display: inline-flex; align-items: baseline; gap: 0 .25em; font-size: 32px; font-weight: 800; line-height: normal; letter-spacing: -0.02em; color: var(--es-navy); font-variant-numeric: tabular-nums; }
.sf-scope[data-ct="5"] .es-pd__price--open { font-size: 22px; letter-spacing: -0.01em; }
.sf-scope[data-ct="5"] .es-pd__cur { order: -1; font: inherit; color: inherit; }
.sf-scope[data-ct="5"]:dir(rtl) .es-pd__cur { order: 0; }
.sf-scope[data-ct="5"] .es-pd__was { font-size: 16px; font-weight: 400; color: var(--es-muted); text-decoration: line-through; }
.sf-scope[data-ct="5"] .es-pd__off { display: inline-flex; align-items: center; align-self: center; padding: 4px 9px; border-radius: 999px; background: #FEE2E2; color: #B91C1C; font-size: 13px; font-weight: 700; line-height: 1.25; }
.sf-scope[data-ct="5"] .es-pd__pricenote { font-size: 13px; color: var(--es-muted); }

/* ---------- 5. options ---------- */
.sf-scope[data-ct="5"] .es-pd__options { display: flex; flex-direction: column; gap: 18px; }
.sf-scope[data-ct="5"] .es-pd__field { margin: 0; padding: 0; border: 0; min-width: 0; gap: 0; }
.sf-scope[data-ct="5"] .es-pd__legend { display: block; margin: 0 0 10px; padding: 0; font-size: 14px; font-weight: 600; color: var(--es-text); }
.sf-scope[data-ct="5"] .es-pd__legend label { cursor: default; }
.sf-scope[data-ct="5"] .es-pd__picked { font-weight: 500; color: #475569; }
.sf-scope[data-ct="5"] .es-pd__picked:not(:empty)::before { content: ": "; }
.sf-scope[data-ct="5"] .es-pd__req { color: var(--es-red); }
.sf-scope[data-ct="5"] .es-pd__values { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-scope[data-ct="5"] .es-pd__swatch,
.sf-scope[data-ct="5"] .es-pd__pill { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 2px solid var(--es-border); border-radius: 12px; background: var(--es-surface); color: var(--es-text); font-size: 14px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.sf-scope[data-ct="5"] .es-pd__swatch { padding-inline: 10px 14px; font-weight: 500; }
.sf-scope[data-ct="5"] .es-pd__pill { min-width: 56px; padding: 0 14px; font-weight: 600; }
.sf-scope[data-ct="5"] .es-pd__swatch:hover,
.sf-scope[data-ct="5"] .es-pd__pill:hover { border-color: #93C5FD; }
.sf-scope[data-ct="5"] .es-pd__swatch:has(.es-pd__radio:checked) { border-color: var(--es-blue); }
.sf-scope[data-ct="5"] .es-pd__pill:has(.es-pd__radio:checked) { border-color: var(--es-navy); background: var(--es-navy); color: #fff; }
.sf-scope[data-ct="5"] .es-pd__swatch:has(.es-pd__radio:focus-visible),
.sf-scope[data-ct="5"] .es-pd__pill:has(.es-pd__radio:focus-visible) { outline: 2px solid var(--es-blue); outline-offset: 2px; }
.sf-scope[data-ct="5"] .es-pd__radio { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.sf-scope[data-ct="5"] .es-pd__dot { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .15); }
.sf-scope[data-ct="5"] .es-pd__field.is-missing .es-pd__swatch,
.sf-scope[data-ct="5"] .es-pd__field.is-missing .es-pd__pill,
.sf-scope[data-ct="5"] .es-pd__field.is-missing .es-input,
.sf-scope[data-ct="5"] .es-pd__field.is-missing .es-textarea { border-color: var(--es-red); }
.sf-scope[data-ct="5"] .es-pd__field.is-missing .es-pd__legend { color: var(--es-red); }

/* ---------- 6. quantity, stock, actions ---------- */
.sf-scope[data-ct="5"] .es-pd__qtyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sf-scope[data-ct="5"] .es-pd__qty { display: inline-flex; align-items: center; height: 52px; border: 1px solid var(--es-border); border-radius: 14px; background: var(--es-surface); }
.sf-scope[data-ct="5"] .es-pd__qtybtn { width: 48px; height: 50px; padding: 0; border: 0; background: none; color: var(--es-text); font-size: 20px; line-height: 1; cursor: pointer; }
.sf-scope[data-ct="5"] .es-pd__qtybtn:hover { color: var(--es-blue); }
.sf-scope[data-ct="5"] .es-pd__qtyval { width: 32px; min-width: 32px; height: 50px; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: center; font-size: 16px; font-weight: 700; color: var(--es-text); -moz-appearance: textfield; appearance: textfield; }
.sf-scope[data-ct="5"] .es-pd__qtyval::-webkit-inner-spin-button,
.sf-scope[data-ct="5"] .es-pd__qtyval::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sf-scope[data-ct="5"] .es-pd__qtyval:focus { outline: none; box-shadow: inset 0 -2px 0 var(--es-blue); }
.sf-scope[data-ct="5"] .es-pd__stock { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--es-green); }
.sf-scope[data-ct="5"] .es-pd__stockdot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #16A34A; }
.sf-scope[data-ct="5"] .es-pd__stock--out { color: var(--es-red); }
.sf-scope[data-ct="5"] .es-pd__stock--out .es-pd__stockdot { background: var(--es-red); }
.sf-scope[data-ct="5"] .es-pd__amount { gap: 6px; }
.sf-scope[data-ct="5"] .es-pd__amount .es-pd__legend { margin-block-end: 0; }
.sf-scope[data-ct="5"] .es-pd__amountinput { min-height: 52px; border-radius: 14px; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sf-scope[data-ct="5"] .es-pd__amountmsg { margin: 0; }
.sf-scope[data-ct="5"] .es-pd__actions { display: flex; gap: 10px; }
.sf-scope[data-ct="5"] .es-pd__add,
.sf-scope[data-ct="5"] .es-pd__buynow { flex: 1 1 0; min-width: 0; min-height: 54px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 14px; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.sf-scope[data-ct="5"] .es-pd__add { background: var(--es-blue); }
.sf-scope[data-ct="5"] .es-pd__add:hover { background: var(--es-blue-ink); }
.sf-scope[data-ct="5"] .es-pd__add svg { flex: none; }
.sf-scope[data-ct="5"] .es-pd__add[disabled] { background: var(--es-line); color: var(--es-muted-2); cursor: not-allowed; opacity: 1; }
.sf-scope[data-ct="5"] .es-pd__buynow { background: var(--es-navy); }
.sf-scope[data-ct="5"] .es-pd__buynow:hover { background: #1E293B; }
/* unavailable (an option still missing / variant sold out): the design's navy button, dimmed; sf-item.js keeps it inert */
.sf-scope[data-ct="5"] .es-pd__buynow.is-unavailable,
.sf-scope[data-ct="5"] .es-pd__buynow.is-unavailable:hover { background: var(--es-navy); color: #fff; opacity: .55; cursor: not-allowed; }
.sf-scope[data-ct="5"] .es-pd__fav { flex: none; width: 54px; height: 54px; padding: 0; display: grid; place-items: center; border: 1px solid var(--es-border); border-radius: 14px; background: var(--es-surface); color: var(--es-navy); cursor: pointer; transition: border-color .15s, color .15s; }
.sf-scope[data-ct="5"] .es-pd__fav svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.sf-scope[data-ct="5"] .es-pd__fav:hover { border-color: #FCA5A5; color: #EF4444; }
.sf-scope[data-ct="5"] .es-pd__fav[aria-pressed="true"] { color: #EF4444; }
.sf-scope[data-ct="5"] .es-pd__fav[aria-pressed="true"] svg { fill: #EF4444; }
.sf-scope[data-ct="5"] .es-pd__hint { margin: -8px 0 0; font-size: 13px; color: var(--es-muted); }
.sf-scope[data-ct="5"] .es-pd__reason { margin: -8px 0 0; font-size: 13px; font-weight: 600; color: var(--es-muted); }
.sf-scope[data-ct="5"] .es-pd__reason.is-flash { color: var(--es-red); animation: es-pd-flash .5s ease; }
@keyframes es-pd-flash { 0% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } 100% { transform: translateX(0); } }
.sf-scope[data-ct="5"] .es-pd__enquiry { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; border: 1px solid var(--es-border); border-radius: 18px; background: var(--es-surface); }
.sf-scope[data-ct="5"] .es-pd__enquirynote { margin: 0; font-size: 15px; font-weight: 600; color: var(--es-text); }
.sf-scope[data-ct="5"] .es-pd__enquirybtn { min-height: 54px; padding: 0 22px; border-radius: 14px; font-size: 16px; font-weight: 700; }

/* ---------- 7. info card ---------- */
.sf-scope[data-ct="5"] .es-pd__infocard { margin: 0; padding: 6px 18px; list-style: none; border: 1px solid var(--es-border); border-radius: 18px; background: var(--es-surface); }
.sf-scope[data-ct="5"] .es-pd__inforow { display: flex; align-items: flex-start; gap: 12px; padding-block: 12px; border-block-end: 1px solid var(--es-line); }
.sf-scope[data-ct="5"] .es-pd__inforow:last-child { border-block-end: 0; }
.sf-scope[data-ct="5"] .es-pd__infoicon { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--es-blue); stroke-width: 1.7; stroke-linejoin: round; }
.sf-scope[data-ct="5"] .es-pd__infoicon--round { stroke-linecap: round; }
.sf-scope[data-ct="5"] .es-pd__infotext { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-scope[data-ct="5"] .es-pd__infotitle { font-size: 14px; font-weight: 600; color: var(--es-text); }
.sf-scope[data-ct="5"] .es-pd__infosub { font-size: 13px; color: var(--es-muted); }
.sf-scope[data-ct="5"] .es-pd__infoline { font-size: 14px; color: var(--es-text); }

/* ---------- 8. details tabs ---------- */
.sf-scope[data-ct="5"] .es-pd__tabs { display: flex; gap: 4px; border-block-end: 1px solid var(--es-border); overflow-x: auto; scrollbar-width: none; }
.sf-scope[data-ct="5"] .es-pd__tabs::-webkit-scrollbar { display: none; }
.sf-scope[data-ct="5"] .es-pd__tab { flex: none; min-height: 48px; padding: 0 16px; margin-block-end: -1px; border: 0; border-block-end: 2px solid transparent; background: none; color: var(--es-muted); font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color .15s, border-color .15s; }
.sf-scope[data-ct="5"] .es-pd__tab:hover { color: var(--es-text); }
.sf-scope[data-ct="5"] .es-pd__tab.is-on { border-color: var(--es-blue); color: var(--es-navy); }
.sf-scope[data-ct="5"] .es-pd__panel { padding-block-start: 24px; }
.sf-scope[data-ct="5"] .es-pd__panel[hidden] { display: none; }
.sf-scope[data-ct="5"] .es-pd__desc { max-width: 70ch; margin: 0; font-size: 15px; line-height: 1.75; color: var(--es-text-2); text-wrap: pretty; }
.sf-scope[data-ct="5"] .es-pd__desc p { margin: 0 0 12px; }
.sf-scope[data-ct="5"] .es-pd__desc p:last-child { margin-block-end: 0; }
.sf-scope[data-ct="5"] .es-pd__desc ul,
.sf-scope[data-ct="5"] .es-pd__desc ol { margin: 0 0 12px; padding-inline-start: 22px; }
.sf-scope[data-ct="5"] .es-pd__desc ul { list-style: disc; }
.sf-scope[data-ct="5"] .es-pd__desc ol { list-style: decimal; }
.sf-scope[data-ct="5"] .es-pd__desc a { color: var(--es-blue); text-decoration: underline; text-underline-offset: 3px; }
.sf-scope[data-ct="5"] .es-pd__desc img { height: auto; border-radius: 12px; }
.sf-scope[data-ct="5"] .es-pd__specs { max-width: 720px; margin: 0; overflow: hidden; border: 1px solid var(--es-border); border-radius: 16px; background: var(--es-surface); }
.sf-scope[data-ct="5"] .es-pd__specrow { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; border-block-end: 1px solid var(--es-line); }
.sf-scope[data-ct="5"] .es-pd__specrow:last-child { border-block-end: 0; }
.sf-scope[data-ct="5"] .es-pd__specrow dt { padding: 14px 18px; background: var(--es-bg); font-size: 14px; color: var(--es-muted); }
.sf-scope[data-ct="5"] .es-pd__specrow dd { margin: 0; padding: 14px 18px; font-size: 14px; font-weight: 500; color: var(--es-text); overflow-wrap: anywhere; }
.sf-scope[data-ct="5"] .es-pd__features { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0; padding: 0; list-style: none; }
.sf-scope[data-ct="5"] .es-pd__feature { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--es-text-2); }
.sf-scope[data-ct="5"] .es-pd__featureicon { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--es-blue-soft); color: var(--es-blue-ink); }
.sf-scope[data-ct="5"] .es-pd__anchor { display: block; position: relative; top: -120px; visibility: hidden; }

/* ---------- 9. reviews ---------- */
.sf-scope[data-ct="5"] .es-rv__grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; }
.sf-scope[data-ct="5"] .es-rv__aside { flex: 0 1 300px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sf-scope[data-ct="5"] .es-rv__main { flex: 1 1 360px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sf-scope[data-ct="5"] .es-rv__summary,
.sf-scope[data-ct="5"] .es-rv__write { display: flex; flex-direction: column; gap: 12px; padding: 22px; border: 1px solid var(--es-border); border-radius: 18px; background: var(--es-surface); }
.sf-scope[data-ct="5"] .es-rv__summarytop { display: flex; align-items: baseline; gap: 8px; }
.sf-scope[data-ct="5"] .es-rv__big { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--es-text); }
.sf-scope[data-ct="5"] .es-rv__of { font-size: 14px; color: var(--es-muted); }
.sf-scope[data-ct="5"] .es-rv__based { font-size: 13px; color: var(--es-muted); }
.sf-scope[data-ct="5"] .es-rv__bar { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--es-text); }
.sf-scope[data-ct="5"] .es-rv__barlabel { flex: none; width: 20px; }
.sf-scope[data-ct="5"] .es-rv__track { flex: 1; display: block; height: 8px; overflow: hidden; border-radius: 4px; background: var(--es-line); }
.sf-scope[data-ct="5"] .es-rv__fill { display: block; height: 100%; border-radius: 4px; background: #F59E0B; }
.sf-scope[data-ct="5"] .es-rv__pct { flex: none; width: 34px; text-align: end; color: var(--es-muted); }
.sf-scope[data-ct="5"] .es-rv__writetitle { margin: 0; font-size: 16px; font-weight: 700; color: var(--es-navy); }
.sf-scope[data-ct="5"] .es-rv__note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--es-muted); }
.sf-scope[data-ct="5"] .es-rv__form { display: flex; flex-direction: column; gap: 14px; }
.sf-scope[data-ct="5"] .es-rv__rate { margin: 0; padding: 0; border: 0; min-width: 0; }
.sf-scope[data-ct="5"] .es-rv__label { display: block; margin: 0 0 6px; padding: 0; font-size: 13px; font-weight: 600; color: var(--es-text-2); }
.sf-scope[data-ct="5"] .es-rv__pick { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.sf-scope[data-ct="5"] .es-rv__pickin { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); opacity: 0; }
.sf-scope[data-ct="5"] .es-rv__pickstar { display: inline-grid; place-items: center; width: 36px; height: 36px; font-size: 28px; line-height: 1; color: var(--es-border); cursor: pointer; transition: color .1s; }
.sf-scope[data-ct="5"] .es-rv__pickin:checked ~ .es-rv__pickstar,
.sf-scope[data-ct="5"] .es-rv__pickstar:hover,
.sf-scope[data-ct="5"] .es-rv__pickstar:hover ~ .es-rv__pickstar { color: #F59E0B; }
.sf-scope[data-ct="5"] .es-rv__pickin:focus-visible + .es-rv__pickstar { outline: 2px solid var(--es-blue); outline-offset: 2px; border-radius: 8px; }
.sf-scope[data-ct="5"] .es-rv__body { min-height: 120px; }
.sf-scope[data-ct="5"] .es-rv__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sf-scope[data-ct="5"] .es-rv__count { margin-inline-start: auto; font-size: 12px; color: var(--es-muted); }
.sf-scope[data-ct="5"] .es-rv__err { margin: 0; }
.sf-scope[data-ct="5"] .es-rv__status { margin: 0; padding: 10px 12px; border-radius: 12px; background: #FEE2E2; color: #B91C1C; font-size: 13px; font-weight: 600; }
.sf-scope[data-ct="5"] .es-rv__submit { align-self: flex-start; }
.sf-scope[data-ct="5"] .es-rv__signin { align-self: flex-start; }
.sf-scope[data-ct="5"] .es-rv__hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sf-scope[data-ct="5"] .es-rv__help { margin: 0; font-size: 12px; line-height: 1.45; color: var(--es-muted); }
.sf-scope[data-ct="5"] .es-rv__alt { margin: 0; font-size: 13px; line-height: 1.5; color: var(--es-muted); }
.sf-scope[data-ct="5"] .es-rv__alt a { font-weight: 600; color: var(--es-blue); text-decoration: underline; text-underline-offset: 2px; }
.sf-scope[data-ct="5"] .es-rv__done { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.sf-scope[data-ct="5"] .es-rv__doneicon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #DCFCE7; color: var(--es-green); }
.sf-scope[data-ct="5"] .es-rv__donetitle { margin: 0; font-size: 15px; font-weight: 700; color: var(--es-text); }
.sf-scope[data-ct="5"] .es-rv__donetext { margin: 0; font-size: 14px; line-height: 1.5; color: var(--es-muted); }
.sf-scope[data-ct="5"] .es-rv__list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sf-scope[data-ct="5"] .es-rv__more { align-self: flex-start; }
.sf-scope[data-ct="5"] .es-rv__empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 18px; border: 1px solid var(--es-border); border-radius: 16px; background: var(--es-surface); text-align: center; }
.sf-scope[data-ct="5"] .es-rv__emptyicon { font-size: 32px; line-height: 1; color: var(--es-border); }
.sf-scope[data-ct="5"] .es-rv__emptytitle { margin: 0; font-size: 15px; font-weight: 700; color: var(--es-text); }
.sf-scope[data-ct="5"] .es-rv__emptytext { margin: 0; font-size: 14px; color: var(--es-muted); }
/* review cards: the same classes sf-reviews.js builds on "show more" */
.sf-scope[data-ct="5"] .sf-rv-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--es-border); border-radius: 16px; background: var(--es-surface); }
.sf-scope[data-ct="5"] .sf-rv-card__head { display: flex; align-items: center; gap: 10px; }
.sf-scope[data-ct="5"] .sf-rv-avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--es-blue-soft); color: var(--es-blue-ink); font-size: 13px; font-weight: 700; }
.sf-scope[data-ct="5"] .sf-rv-card__who { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.sf-scope[data-ct="5"] .sf-rv-card__name { font-size: 14px; font-weight: 700; color: var(--es-text); }
.sf-scope[data-ct="5"] .sf-rv-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #DCFCE7; color: var(--es-green); font-size: 11px; font-weight: 700; }
.sf-scope[data-ct="5"] .sf-rv-card__date { flex: none; font-size: 12px; color: var(--es-muted); }
.sf-scope[data-ct="5"] .sf-rv-stars { position: relative; display: inline-block; font-size: 14px; line-height: 1; letter-spacing: 2px; color: var(--es-border); }
.sf-scope[data-ct="5"] .sf-rv-stars__bg { color: var(--es-border); }
.sf-scope[data-ct="5"] .sf-rv-stars__fg { position: absolute; inset-block-start: 0; inset-inline-start: 0; overflow: hidden; white-space: nowrap; color: #F59E0B; }
.sf-scope[data-ct="5"] .sf-rv-card__body { margin: 0; font-size: 14px; line-height: 1.6; color: var(--es-text-2); overflow-wrap: anywhere; }

/* ---------- 10. states ---------- */
.sf-scope[data-ct="5"] .es-pd__missing { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 560px; margin-inline: auto; padding: 48px 32px; text-align: center; }
.sf-scope[data-ct="5"] .es-pd__missingicon { display: grid; place-items: center; width: 64px; height: 64px; margin-block-end: 6px; border-radius: 50%; background: var(--es-line); color: var(--es-muted); }
.sf-scope[data-ct="5"] .es-pd__missingtitle { margin: 0; font-size: 20px; font-weight: 700; color: var(--es-text); }
.sf-scope[data-ct="5"] .es-pd__missingtext { margin: 0 0 12px; font-size: 14px; color: var(--es-muted); }

/* ---------- 11. Buy now on the page (partial/quick_inline.html, .sf-pdq*) ---------- */
.sf-scope[data-ct="5"] .sf-pdq { padding: 14px 16px; border: 1px solid var(--es-border); border-radius: 18px; background: var(--es-surface); }
.sf-scope[data-ct="5"] .sf-pdq__title { font-size: 15px; font-weight: 700; color: var(--es-text); }
.sf-scope[data-ct="5"] .sf-pdq__way { padding: 3px 10px; border: 1px solid var(--es-border); border-radius: 999px; background: var(--es-bg); font-size: 12px; font-weight: 500; color: var(--es-muted); }
.sf-scope[data-ct="5"] .sf-pdq__open { min-height: 48px; padding-inline: 20px; border: 0; border-radius: 12px; background: var(--es-navy); color: #fff; font-size: 15px; font-weight: 700; }
.sf-scope[data-ct="5"] .sf-pdq__open:hover { background: #1E293B; color: #fff; }
.sf-scope[data-ct="5"] .sf-pdq__body { margin-block-start: 14px; padding-block-start: 14px; border-block-start: 1px solid var(--es-line); }
.sf-scope[data-ct="5"] .sf-pdq .sf-field__label { margin-block-end: 6px; font-size: 13px; font-weight: 600; color: var(--es-text-2); }
.sf-scope[data-ct="5"] .sf-pdq .sf-input,
.sf-scope[data-ct="5"] .sf-pdq .sf-select,
.sf-scope[data-ct="5"] .sf-pdq .sf-textarea,
.sf-scope[data-ct="5"] .sf-pdq .sf-phone__code,
.sf-scope[data-ct="5"] .sf-pdq .sf-phone__number { min-height: 44px; border: 1px solid var(--es-border); border-radius: 12px; background: var(--es-surface); font-size: 14px; color: var(--es-text); }
.sf-scope[data-ct="5"] .sf-pdq .sf-input:focus,
.sf-scope[data-ct="5"] .sf-pdq .sf-select:focus,
.sf-scope[data-ct="5"] .sf-pdq .sf-textarea:focus,
.sf-scope[data-ct="5"] .sf-pdq .sf-phone__number:focus { outline: none; border-color: var(--es-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--es-blue) 15%, transparent); }
.sf-scope[data-ct="5"] .sf-pdq__method,
.sf-scope[data-ct="5"] .sf-pdq__pay-opt { border: 1.5px solid var(--es-border); border-radius: 14px; background: var(--es-surface); font-size: 14px; }
.sf-scope[data-ct="5"] .sf-pdq__method:has(input:checked),
.sf-scope[data-ct="5"] .sf-pdq__pay-opt:has(input:checked) { border-color: var(--es-blue); background: var(--es-blue-soft); box-shadow: none; }
.sf-scope[data-ct="5"] .sf-pdq__pay { min-height: 54px; border: 0; border-radius: 14px; background: var(--es-blue); color: #fff; font-size: 16px; font-weight: 700; }
.sf-scope[data-ct="5"] .sf-pdq__pay:hover { background: var(--es-blue-ink); color: #fff; }
.sf-scope[data-ct="5"] .sf-pdq__note { font-size: 13px; color: var(--es-muted); }
.sf-scope[data-ct="5"] .sf-pdq .sf-alert { border-radius: 12px; font-size: 13px; }
/* "Only this product's options": the options above are the form, so the pay
   section is no card — a labelled divider, the methods, Pay. */
.sf-scope[data-ct="5"] .sf-pdq--direct { padding: 0; border: 0; border-radius: 0; background: transparent; }
.sf-scope[data-ct="5"] .sf-pdq--direct .sf-pdq__body { margin-block-start: 4px; padding-block-start: 0; border-block-start: 0; }
.sf-scope[data-ct="5"] .sf-pdq__divider { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--es-muted); }
.sf-scope[data-ct="5"] .sf-pdq__divider::before,
.sf-scope[data-ct="5"] .sf-pdq__divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--es-line); }
/* An option that fills the customer's mobile: the dial-code picker inline. */
.sf-scope[data-ct="5"] .es-pd__field .sf-phone__row { display: flex; gap: 8px; }
.sf-scope[data-ct="5"] .es-pd__field .sf-phone__code { flex: none; width: auto; min-width: 0; min-height: 46px; padding-inline: 12px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.sf-scope[data-ct="5"] .es-pd__field .sf-phone__code[hidden] { display: none; }
.sf-scope[data-ct="5"] .es-pd__field .sf-phone__number { flex: 1 1 auto; width: auto; min-width: 0; }
.sf-scope[data-ct="5"] .es-pd__field .sf-phone__pop { position: absolute; z-index: 30; top: calc(100% + 6px); inset-inline-start: 0; width: min(340px, 100%); padding: 10px; background: var(--es-surface); border: 1px solid var(--es-border); border-radius: 16px; box-shadow: 0 16px 40px rgba(15, 23, 42, .14); }
.sf-scope[data-ct="5"] .es-pd__field .sf-phone__pop[hidden] { display: none; }
.sf-scope[data-ct="5"] .es-pd__field.is-missing .sf-phone__code { border-color: var(--es-red); }

/* ---------- 12. Buy now modal (assets/sf-quickorder.js, outside .sf-scope) ---------- */
html[data-sf-ct="5"] .sf-qo__panel { font-family: 'Inter', 'Cairo', system-ui, sans-serif; color: #1E293B; border: 1px solid #E2E8F0; border-start-start-radius: 20px; border-start-end-radius: 20px; box-shadow: 0 24px 60px rgba(15, 23, 42, .18); }
html[data-sf-ct="5"] .sf-qo__head { padding: 18px 20px 14px; border-block-end-color: #E2E8F0; }
html[data-sf-ct="5"] .sf-qo__title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--es-navy); }
html[data-sf-ct="5"] .sf-qo__sub { font-size: 13px; color: #64748B; }
html[data-sf-ct="5"] .sf-qo__close { border-radius: 999px; color: #64748B; }
html[data-sf-ct="5"] .sf-qo__close:hover { background: #F1F5F9; color: var(--es-navy); }
html[data-sf-ct="5"] .sf-qo__steps { font-size: 13px; color: #64748B; }
html[data-sf-ct="5"] .sf-qo__stepnum { width: 28px; height: 28px; border: 1.5px solid #E2E8F0; font-size: 12px; }
html[data-sf-ct="5"] .sf-qo__step.is-current { color: var(--es-navy); }
html[data-sf-ct="5"] .sf-qo__step.is-current .sf-qo__stepnum { border-color: var(--es-blue); background: var(--es-blue); color: #fff; }
html[data-sf-ct="5"] .sf-qo__step.is-done .sf-qo__stepnum { border-color: #15803D; background: #15803D; color: #fff; }
html[data-sf-ct="5"] .sf-qo__stepline { background: #E2E8F0; }
html[data-sf-ct="5"] .sf-qo__legend { font-size: 15px; font-weight: 700; color: var(--es-navy); }
html[data-sf-ct="5"] .sf-qo__why { font-size: 13px; color: #64748B; }
html[data-sf-ct="5"] .sf-qo__label { font-size: 13px; font-weight: 600; color: #334155; }
html[data-sf-ct="5"] .sf-qo__input,
html[data-sf-ct="5"] .sf-qo .sf-phone__code,
html[data-sf-ct="5"] .sf-qo .sf-phone__number,
html[data-sf-ct="5"] .sf-qo .sf-phone__search { min-height: 46px; border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; color: #1E293B; font-size: 14px; }
html[data-sf-ct="5"] .sf-qo__input:focus-visible,
html[data-sf-ct="5"] .sf-qo .sf-phone__number:focus-visible,
html[data-sf-ct="5"] .sf-qo .sf-phone__search:focus-visible { outline: none; border-color: var(--es-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--es-blue) 15%, transparent); }
html[data-sf-ct="5"] .sf-qo__field.is-error .sf-qo__input,
html[data-sf-ct="5"] .sf-qo__field.is-error .sf-phone__number { border-color: #DC2626; }
html[data-sf-ct="5"] .sf-qo__err,
html[data-sf-ct="5"] .sf-qo__req { color: #DC2626; }
html[data-sf-ct="5"] .sf-qo__addnote,
html[data-sf-ct="5"] .sf-qo__more,
html[data-sf-ct="5"] .sf-qo__maplink,
html[data-sf-ct="5"] .sf-qo__link,
html[data-sf-ct="5"] .sf-qo__coupon-toggle,
html[data-sf-ct="5"] .sf-qo__coupon-tag button { color: var(--es-blue); }
html[data-sf-ct="5"] .sf-qo__choice { min-height: 56px; border: 1.5px solid #E2E8F0; border-radius: 14px; background: #fff; }
html[data-sf-ct="5"] .sf-qo__choice:hover { border-color: #93C5FD; }
html[data-sf-ct="5"] .sf-qo__choice.is-on { border-color: var(--es-blue); background: var(--es-blue-soft); }
html[data-sf-ct="5"] .sf-qo__choice input[type=radio] { accent-color: var(--es-blue); }
html[data-sf-ct="5"] .sf-qo__choicename { font-weight: 600; }
html[data-sf-ct="5"] .sf-qo__choicesub { color: #64748B; }
html[data-sf-ct="5"] .sf-qo__cur { border-color: #E2E8F0; color: #64748B; }
html[data-sf-ct="5"] .sf-qo__static { border: 1px solid #E2E8F0; border-radius: 14px; }
html[data-sf-ct="5"] .sf-qo__summary { border: 1px solid #E2E8F0; border-radius: 16px; background: #F8FAFC; }
html[data-sf-ct="5"] .sf-qo__h { font-size: 13px; font-weight: 700; color: var(--es-navy); }
html[data-sf-ct="5"] .sf-qo__thumb { border: 1px solid #E2E8F0; border-radius: 12px; background: #F1F5F9; }
html[data-sf-ct="5"] .sf-qo__name { font-weight: 600; }
html[data-sf-ct="5"] .sf-qo__opt,
html[data-sf-ct="5"] .sf-qo__each { color: #64748B; }
html[data-sf-ct="5"] .sf-qo__stepper { border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; }
html[data-sf-ct="5"] .sf-qo__stepbtn { border-radius: 10px; color: #1E293B; }
html[data-sf-ct="5"] .sf-qo__qtymsg { color: #DC2626; }
html[data-sf-ct="5"] .sf-qo__totals { border-block-start-color: #E2E8F0; }
html[data-sf-ct="5"] .sf-qo__totrow { color: #64748B; }
html[data-sf-ct="5"] .sf-qo__totrow span:last-child { color: #1E293B; }
html[data-sf-ct="5"] .sf-qo__totrow--grand { border-block-start-color: #E2E8F0; color: var(--es-navy); font-weight: 800; }
html[data-sf-ct="5"] .sf-qo__totrow--credit span:last-child { color: #15803D; }
html[data-sf-ct="5"] .sf-qo__code { background: var(--es-blue-soft); color: var(--es-blue-ink); }
html[data-sf-ct="5"] .sf-qo__coupon { border-block-start-color: #E2E8F0; }
html[data-sf-ct="5"] .sf-qo__coupon-row input,
html[data-sf-ct="5"] .sf-qo__coupon-row button { height: 44px; border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; color: #1E293B; }
html[data-sf-ct="5"] .sf-qo__coupon-row input.is-invalid { border-color: #DC2626; }
html[data-sf-ct="5"] .sf-qo__coupon-err { color: #DC2626; }
html[data-sf-ct="5"] .sf-qo__coupon-tag { border-radius: 12px; background: var(--es-blue-soft); }
html[data-sf-ct="5"] .sf-qo__terms { font-size: 13px; }
html[data-sf-ct="5"] .sf-qo__terms input { accent-color: var(--es-blue); }
html[data-sf-ct="5"] .sf-qo__foot { border-block-start-color: #E2E8F0; background: #fff; border-end-start-radius: 20px; border-end-end-radius: 20px; }
html[data-sf-ct="5"] .sf-qo__msg { border-radius: 12px; background: #FEE2E2; color: #B91C1C; }
html[data-sf-ct="5"] .sf-qo__msg.is-ok { background: var(--es-blue-soft); color: var(--es-blue-ink); }
html[data-sf-ct="5"] .sf-qo__trust { color: #1E293B; }
html[data-sf-ct="5"] .sf-qo__trust svg { color: #15803D; }
html[data-sf-ct="5"] .sf-qo__next { color: #64748B; }
html[data-sf-ct="5"] .sf-qo__pay { min-height: 54px; border-radius: 14px; background: var(--es-blue); color: #fff; font-size: 16px; font-weight: 700; }
html[data-sf-ct="5"] .sf-qo__pay:hover { background: var(--es-blue-ink); filter: none; }
html[data-sf-ct="5"] .sf-qo__pay:focus-visible,
html[data-sf-ct="5"] .sf-qo__close:focus-visible,
html[data-sf-ct="5"] .sf-qo__stepbtn:focus-visible,
html[data-sf-ct="5"] .sf-qo__more:focus-visible,
html[data-sf-ct="5"] .sf-qo__addnote:focus-visible { outline: 2px solid var(--es-blue); outline-offset: 2px; }
html[data-sf-ct="5"] .sf-qo__frame { border-radius: 14px; }
html[data-sf-ct="5"] .sf-qo__help { color: #64748B; }
@media (min-width: 720px) {
    html[data-sf-ct="5"] .sf-qo__panel { border-radius: 24px; }
    html[data-sf-ct="5"] .sf-qo__foot { border-end-start-radius: 24px; border-end-end-radius: 24px; }
}

/* ---------- 13. desktop two-column (the design's mobile layout is < 1000px) ---------- */
@media (min-width: 1000px) {
    .sf-scope[data-ct="5"] .es-pd__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
    .sf-scope[data-ct="5"] .es-pd__gallery { position: sticky; top: 190px; }
}
@media (max-width: 999px) {
    .sf-scope[data-ct="5"] .es-pd__anchor { top: -80px; }
}