/* ───────────────────────────────────────────────────────────────────────────
   Storefront OPTION styles.
   Everything the owner picks in the front-end editor (/store/{slug}/editor)
   lands here as a class or a css variable on the section shell, so the public
   page needs no inline styles and no extra markup.
   Loaded AFTER storefront-wm.css so these win by order + specificity.
   ─────────────────────────────────────────────────────────────────────────── */

/* card bits that used to carry inline styles */
.wm-act { margin-top: auto }
.wm-bd .wm-view { margin-top: 9px }

/* ── whole-site options ──────────────────────────────────────────────────── */
body.wm-body { background: var(--pg, #fff); color: var(--tx, #33383f) }
.wm-body .wrap { max-width: var(--ww, 1320px) }
.wm-body.sw-full .wrap { max-width: none }
.wm-body a { color: var(--lk, inherit) }
.wm-body .wm-sech h2, .wm-body .wm-panel h2 { font-size: var(--hs, 19px); font-weight: var(--hw, 800) }
.wm-body.hc-upper .wm-sech h2, .wm-body.hc-upper .wm-panel h2 { text-transform: uppercase }
.wm-body.hc-cap .wm-sech h2, .wm-body.hc-cap .wm-panel h2 { text-transform: capitalize }
.wm-body.sf-serif { font-family: Georgia, "Times New Roman", serif }
.wm-body.sf-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }
.wm-body.sf-round { font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif }
.wm-body.sp-none .wm-sec { margin-top: 0 }
.wm-body.sp-s .wm-sec { margin-top: 14px }
.wm-body.sp-m .wm-sec { margin-top: 26px }
.wm-body.sp-l .wm-sec { margin-top: 44px }
.wm-body.sp-xl .wm-sec { margin-top: 64px }
.wm-body.o-compact .wm-sec { margin-top: 12px }
.wm-body.o-compact .wm-grid { gap: 8px }
.wm-body.o-noshadows .wm-card, .wm-body.o-noshadows .wm-card:hover { box-shadow: none; transform: none }
.wm-body.o-borders .wm-card { border: 1px solid #d8dce3 }
.wm-body.o-upperbtn .wm-buy button, .wm-body.o-upperbtn .wm-view, .wm-body.o-upperbtn .cta { text-transform: uppercase }
.wm-body.o-nocountdowns .wm-chip.cd, .wm-body.o-nocountdowns .wm-cdside { display: none }
.wm-body .wm-card, .wm-body .wm-panel { border-radius: var(--rd, 14px) }
.wm-body.sb-outline .wm-buy button, .wm-body.sb-outline .wm-view { background: transparent; color: var(--wa); border: 2px solid var(--wa) }
.wm-body.sb-soft .wm-buy button, .wm-body.sb-soft .wm-view { background: color-mix(in srgb, var(--wa) 16%, #fff); color: var(--wa) }
.wm-body.sb-pill .wm-buy button, .wm-body.sb-pill .wm-view, .wm-body.sb-pill .cta { border-radius: 999px }

/* ── section shell ───────────────────────────────────────────────────────── */
.wm-shell { position: relative; --wa: var(--sacc, var(--wa0)) }
.wm-shell.has-bg { background: var(--sbg) }
.wm-shell.has-img { background-image: var(--simg); background-size: cover; background-position: center }
.wm-shell.has-img > * { position: relative; z-index: 1 }
.wm-shell.has-img::before { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / var(--sdim, 0%)); pointer-events: none }
.wm-shell { color: var(--sfg, inherit) }
/* bars and panels paint their own background/colour, so a colour chosen for the
   section has to reach them as well - otherwise nothing appears to happen. */
.wm-shell.has-bg > .wm-top,
.wm-shell.has-bg > .wm-promo-bar,
.wm-shell.has-bg > .wm-hd,
.wm-shell.has-bg > .wm-nav,
.wm-shell.has-bg > .wm-subrow,
.wm-shell.has-bg > .wm-band,
.wm-shell.has-bg > .wm-iconstrip,
.wm-shell.has-bg > .wm-news,
.wm-shell.has-bg > .wm-foot,
.wm-shell.has-bg > .wm-grey,
.wm-shell.has-bg > .wm-diag,
.wm-shell.has-bg > .wm-sage,
.wm-shell.has-bg > .wm-editorial,
.wm-shell.has-bg > .wm-artgrid,
.wm-shell.has-bg .wm-dealband,
.wm-shell.has-bg .wm-bens,
.wm-shell.has-bg .wm-brands { background: var(--sbg) }
.wm-shell.has-fg > .wm-top, .wm-shell.has-fg > .wm-top .up, .wm-shell.has-fg > .wm-top a,
.wm-shell.has-fg > .wm-promo-bar, .wm-shell.has-fg > .wm-promo-bar a,
.wm-shell.has-fg > .wm-hd, .wm-shell.has-fg > .wm-hd a, .wm-shell.has-fg .wm-logo b, .wm-shell.has-fg .wm-logo small,
.wm-shell.has-fg > .wm-nav a, .wm-shell.has-fg > .wm-subrow a,
.wm-shell.has-fg .wm-sech h2, .wm-shell.has-fg .wm-ben b, .wm-shell.has-fg .wm-ben span,
.wm-shell.has-fg > .wm-news, .wm-shell.has-fg > .wm-news b, .wm-shell.has-fg > .wm-news span,
.wm-shell.has-fg > .wm-foot, .wm-shell.has-fg > .wm-foot a, .wm-shell.has-fg > .wm-foot h4,
.wm-shell.has-fg .wm-brands a, .wm-shell.has-fg .wm-band h1 { color: var(--sfg) }
/* header height, logo wording, search button switches */
.wm-shell.hp-none > .wm-hd .wrap { padding-top: 4px; padding-bottom: 4px }
.wm-shell.hp-s > .wm-hd .wrap { padding-top: 8px; padding-bottom: 8px }
.wm-shell.hp-m > .wm-hd .wrap { padding-top: 15px; padding-bottom: 15px }
.wm-shell.hp-l > .wm-hd .wrap { padding-top: 26px; padding-bottom: 26px }
.wm-shell.hp-xl > .wm-hd .wrap { padding-top: 40px; padding-bottom: 40px }
.wm-shell.o-nologotext .wm-logo b, .wm-shell.o-nologotext .wm-logo small { display: none }
/* the logo wording: up to three words, each with its own colour */
.wm-shell .wm-logo b .w2 { color: var(--lc2, var(--wa)) }
.wm-shell .wm-search button { min-width: var(--sbw, auto); justify-content: center }
.wm-shell.o-nologoimg .wm-logo .lg { display: none }
.wm-shell.o-nobtntext .wm-search button .sl { display: none }
.wm-shell.o-nobtn .wm-search button { display: none }

/* an accent colour picked for a section has to land somewhere visible */
.wm-shell.has-acc .wm-circles .rg { background: var(--sacc); color: #fff }
.wm-shell.has-acc .wm-iconstrip a .ic, .wm-shell.has-acc .wm-iconstrip a img { color: var(--sacc) }
.wm-shell.has-acc .wm-iconstrip a:hover { color: var(--sacc) }
.wm-shell.has-acc .wm-bens .bi { background: var(--sacc); color: #fff }
.wm-shell.has-acc .wm-sech h2, .wm-shell.has-acc .wm-sech .cl { color: var(--sacc) }
.wm-shell.has-acc .wm-sidecat .all, .wm-shell.has-acc .wm-galrow img { border-color: var(--sacc) }

.wm-shell.has-bg .wm-sech, .wm-shell.has-img .wm-sech { border-bottom-color: rgb(255 255 255 / .25) }

/* spacing */
.wm-shell.pt-none { padding-top: 0 }
.wm-shell.pt-s { padding-top: 10px }
.wm-shell.pt-m { padding-top: 22px }
.wm-shell.pt-l { padding-top: 40px }
.wm-shell.pt-xl { padding-top: 66px }
.wm-shell.pb-none { padding-bottom: 0 }
.wm-shell.pb-s { padding-bottom: 10px }
.wm-shell.pb-m { padding-bottom: 22px }
.wm-shell.pb-l { padding-bottom: 40px }
.wm-shell.pb-xl { padding-bottom: 66px }
.wm-shell.o-full .wrap { max-width: none }
.wm-shell.sh-soft { box-shadow: 0 6px 18px rgb(30 33 40 / .07) }
.wm-shell.sh-med { box-shadow: 0 12px 30px rgb(30 33 40 / .12) }
.wm-shell.sh-hard { box-shadow: 0 20px 46px rgb(30 33 40 / .22) }
.wm-shell { border-radius: var(--srd, 0) }

/* titles */
.wm-shell .wm-sech h2 { font-size: var(--sts, var(--hs, 19px)); font-weight: var(--stw, var(--hw, 800)) }
/* the bands carry their title outside .wm-sech, so size/weight must reach them too */
.wm-shell .wm-band h1, .wm-shell .wm-dealband h2, .wm-shell .wm-promo h1, .wm-shell .wm-panel h2,
.wm-shell .wm-news b { font-size: var(--sts, inherit); font-weight: var(--stw, inherit) }
/* accent colour on the two bands and the brand strip */
.wm-shell .wm-dealband a, .wm-shell .wm-band .cta { background: var(--sacc, var(--wa)); border-color: var(--sacc, var(--wa)) }
.wm-shell .wm-brands a:hover { color: var(--sacc, var(--wa)) }
.wm-shell .wm-brands .ic, .wm-shell .wm-dealband h2 { color: var(--sacc, inherit) }
.wm-shell.ta-center .wm-sech { justify-content: center; text-align: center }
.wm-shell.ta-right .wm-sech { justify-content: flex-end; text-align: right }
.wm-shell.tc-upper .wm-sech h2, .wm-shell.tc-upper .wm-panel h2 { text-transform: uppercase }
.wm-shell.tc-cap .wm-sech h2, .wm-shell.tc-cap .wm-panel h2 { text-transform: capitalize }
.wm-shell.o-hidetitle .wm-sech { display: none }
.wm-subt { font-size: 12.5px; color: #7b828c }
.wm-shell.has-bg .wm-subt, .wm-shell.has-img .wm-subt { color: inherit; opacity: .85 }

/* alignment for simple rows */
.wm-shell.al-center .wm-bens, .wm-shell.al-center .wm-brands, .wm-shell.al-center .wm-iconstrip .wrap { justify-content: center }
.wm-shell.al-right .wm-bens, .wm-shell.al-right .wm-brands { justify-content: flex-end }
.wm-shell.cs-upper { text-transform: uppercase }
.wm-shell.cs-cap { text-transform: capitalize }

/* ── item grid options ───────────────────────────────────────────────────── */
.wm-shell .wm-grid { grid-template-columns: repeat(var(--scols, 5), minmax(0, 1fr)) }
.wm-shell .wm-img { height: var(--sih, 150px) }
/* the search results page matches the marketplace's own cards (300px pictures,
   like /search .sp-card-img); the owner's image-height option still wins */
.wm-shell[data-sec="results"] .wm-img { height: var(--sih, 300px) }
.wm-shell[data-sec="results"].cd-compact .wm-img { height: calc(var(--sih, 300px) * .8) }
.wm-shell .wm-img img { object-fit: var(--sfit, cover) }
.wm-shell.o-nolocation .wm-loc { display: none }
.wm-shell.o-noprice .wm-price { display: none }
.wm-shell.o-nowas .wm-was { display: none }
.wm-shell.o-nobuy .wm-act { display: none }
.wm-shell.o-zoom .wm-img img { transition: transform .25s }
.wm-shell.o-zoom .wm-card:hover .wm-img img { transform: scale(1.08) }
.wm-shell.cd-flat .wm-card { border: 0; background: transparent }
.wm-shell.cd-flat .wm-card:hover { box-shadow: none; transform: none }
.wm-shell.cd-bordered .wm-card { border: 2px solid #dfe3e9 }
.wm-shell.cd-shadow .wm-card { border: 0; box-shadow: 0 10px 26px rgb(30 33 40 / .12) }
.wm-shell.cd-compact .wm-bd { padding: 8px 9px }
.wm-shell.cd-compact .wm-img { height: calc(var(--sih, 150px) * .8) }

/* ── discount badge (display only) ───────────────────────────────────────── */
.wm-shell .wm-off { background: var(--dbg, var(--wa)); color: var(--dtx, #fff) }
.wm-shell.dp-tr .wm-off { left: auto; right: 10px }
.wm-shell.dp-bl .wm-off { top: auto; bottom: 10px }
.wm-shell.dp-br .wm-off { top: auto; bottom: 10px; left: auto; right: 10px }
.wm-shell.ds-square .wm-off { border-radius: 0 }
.wm-shell.ds-circle .wm-off { border-radius: 50%; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; padding: 0 }
.wm-shell.ds-ribbon .wm-off { border-radius: 0; padding: 4px 26px; top: 14px; left: -22px; transform: rotate(-38deg) }
.wm-shell.ds-ribbon.dp-tr .wm-off { left: auto; right: -22px; transform: rotate(38deg) }
.wm-shell.dz-s .wm-off { font-size: 9px; padding: 3px 6px }
.wm-shell.dz-l .wm-off { font-size: 13.5px; padding: 6px 12px }
.wm-shell.dz-l.ds-circle .wm-off { width: 54px; height: 54px; padding: 0 }

/* ── header / nav / topbar switches ──────────────────────────────────────── */
.wm-shell.o-nosearch .wm-search { display: none }
.wm-shell.o-nocat .wm-scat { display: none }
.wm-shell.o-nophone .wm-call { display: none }
.wm-shell.o-nowish .wm-cart.wish { display: none }
.wm-shell.o-nocompare .wm-cart.comp { display: none }
.wm-shell.o-nocart .wm-cart.cart { display: none }
.wm-shell.o-nobrowse .wm-browse { display: none }
.wm-shell.o-nohome .lnk.home { display: none }
.wm-shell.o-nomarket .right.market { display: none }
.wm-shell.o-nolinks .tb-links { display: none }
.wm-shell.o-sticky { position: sticky; top: 0; z-index: 30 }
/* logo + search sizing (front-end editor) */
.wm-shell .wm-logo .lg { height: var(--slh, 50px); width: var(--slw, var(--slh, 50px)) }
.wm-shell .wm-logo .lg img { width: 100%; height: 100%; object-fit: cover }

.wm-shell .wm-search { max-width: var(--ssw, none) }
.wm-shell .wm-search.grow, .wm-shell .grow .wm-search { flex-basis: var(--ssw, auto) }
.wm-shell.o-nobtnicon .wm-search button .sbtn-ic { display: none }
.wm-shell.o-nobtntext .wm-search button .sl { display: none }
.wm-shell.o-nobtn .wm-search button { display: none }
.wm-shell.o-noicons .ic, .wm-shell.o-noicons .bi { display: none }
.wm-shell.o-round .wm-bens .bi, .wm-shell .wm-bens.round .bi { border-radius: 50% }
.wm-shell.o-nocta .cta { display: none }
.wm-shell.o-nosidebar .wm-sidecat { display: none }
.wm-shell.o-noside .wm-side { display: none }
.wm-shell.o-noimg .wm-trip .ph { display: none }
.wm-shell.o-onecol .wm-two { grid-template-columns: 1fr }
.wm-shell.o-nophone .wm-cline.phone, .wm-shell.o-nophone .bigphone { display: none }
.wm-shell.o-noemail .wm-cline.email { display: none }
.wm-shell.o-noplace .wm-cline.place { display: none }
.wm-shell.o-notags .wm-ftags { display: none }
.wm-shell.o-nopay .wm-pay { display: none }
.wm-shell.o-nonewsletterline .reg-line { display: none }
.wm-shell.o-nocount .wm-chip { display: none }
.wm-shell.o-nomore .cl { display: none }
.wm-shell.o-nocd .wm-chip.cd { display: none }

/* a static picture used in place of a built-in icon (per item) */
.wm-ii { width: 26px; height: 26px; object-fit: contain; display: inline-block; vertical-align: middle }
.wm-ii.s18 { width: 18px; height: 18px }
.wm-ii.s26 { width: 26px; height: 26px }
.wm-ii.s28 { width: 28px; height: 28px }
.wm-ii.s32 { width: 32px; height: 32px }
.wm-ii.s34 { width: 34px; height: 34px }
.wm-ii.s40 { width: 40px; height: 40px }
.wm-bens .bi .wm-ii { width: 22px; height: 22px }
.wm-circles .rg .wm-ii { width: 60%; height: 60% }

/* hero + gallery numeric options */
.wm-shell .wm-promo.tall { min-height: var(--sh, 300px) }
.wm-shell .wm-circles .rg { width: var(--ssz, 84px); height: var(--ssz, 84px) }
.wm-shell .wm-galrow img { height: var(--sph, 170px); object-fit: var(--sfit, cover); border-radius: var(--srd2, 12px) }
.wm-shell .wm-galrow .wm-galph { height: var(--sph, 170px); border-radius: var(--srd2, 12px) }
.wm-shell .wm-bnr3 .bn { min-height: var(--sh, 150px) }
.wm-shell .wm-side.hasimg { background-size: cover; background-position: center }

/* main category bold, its sub-categories plain - the same everywhere it lists them */
.wm-sidecat .cat-main { font-weight: 800; color: #1e2128; letter-spacing: -.2px }
.wm-sidecat .cat-main b { font-weight: 800 }
.wm-sidecat .cat-sub { font-weight: 600; color: #1e2128 }
/* the template's rule greys out EVERY span in this list (it was written for the
   chevron), so name the two spans apart: wording dark, chevron light */
.wm-sidecat .cat-sub > span:first-of-type { margin-left: 0; color: #1e2128; font-weight: 600 }
.wm-sidecat .cat-sub > span:last-of-type { margin-left: auto; color: #c2c7cf; font-weight: 500 }
.wm-sidecat .cat-sub:hover > span:first-of-type { color: var(--wa) }
.wm-sidecat .cat-sub .ic { color: #6b727d }
.wm-sidecat a:hover .ic { color: var(--wa) }
.wm-scat optgroup { font-weight: 800; color: #1e2128 }
.wm-scat option { font-weight: 500; padding-left: 10px }
.wm-menu .col .ct a { font-weight: 800 }
.wm-menu .col a:not(.ct a) { font-weight: 500 }

/* ── category / search results: filters down the left, like the marketplace ── */
.wm-results { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 20px; margin: 22px auto 0; align-items: start }
.wm-filter { background: #fff; border: 1px solid #e5e8ee; border-radius: 14px; padding: 4px 16px 16px; position: sticky; top: 12px }
.wm-fhead { display: flex; align-items: baseline; gap: 10px; padding: 14px 0 8px; border-bottom: 1px solid #eef0f4 }
.wm-fhead h3 { font-size: 15px; font-weight: 900; color: #1e2128; margin: 0 }
.wm-fclear { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--wa) }
.wm-fgrp { padding: 12px 0 4px; border-bottom: 1px solid #f2f4f7 }
.wm-fgrp:last-of-type { border-bottom: 0 }
.wm-fgrp h4 { font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #6b727d; margin: 0 0 8px }
.wm-filter input[type=text], .wm-filter input[type=number], .wm-filter select {
    width: 100%; box-sizing: border-box; border: 1px solid #d9dee5; border-radius: 8px; padding: 8px 10px;
    font: inherit; font-size: 13px; background-color: #fff; color: #1e2128; -webkit-appearance: none
}
.wm-filter input:focus, .wm-filter select:focus { outline: 0; border-color: var(--wa); box-shadow: 0 0 0 3px rgb(0 0 0 / .05) }
.wm-frow { display: flex; align-items: center; gap: 8px }
.wm-frow span { color: #7b828c; font-size: 12px }
.wm-fopt { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 13px; cursor: pointer }
.wm-fopt i { margin-left: auto; font-style: normal; font-size: 11.5px; color: #98a0ab }
.wm-fapply { width: 100%; margin-top: 14px; border: 0; background: var(--wa); color: #fff; font-weight: 800; font-size: 13px; padding: 11px 0; border-radius: 9px; cursor: pointer }
.wm-fapply:hover { filter: brightness(.93) }
.wm-resmain .wm-sech { margin-top: 0 }
@media (max-width: 900px) { .wm-results { grid-template-columns: 1fr } .wm-filter { position: static } }
.wm-fcascade { display: grid; gap: 8px; margin-bottom: 10px }
.wm-fcascade select { width: 100% }

/* tick-box filter dropdown and value cascade, same shapes the marketplace search uses */
.wm-filter .wm-checkdrop { position: relative }
.wm-filter .wm-cd-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border: 1px solid #dfe3e8; border-radius: 8px; background: #fff; font: inherit; font-size: 13px;
  color: #1e2128; cursor: pointer; text-align: left }
.wm-filter .wm-cd-btn:hover { border-color: #c7ccd4 }
.wm-filter .wm-cd-panel { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); background: #fff;
  border: 1px solid #dfe3e8; border-radius: 10px; box-shadow: 0 10px 26px rgba(16, 20, 28, .14); padding: 8px }
.wm-filter .wm-cd-head { display: flex; gap: 6px; align-items: center; margin-bottom: 6px }
.wm-filter .wm-cd-find { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid #e3e6ea; border-radius: 6px; font-size: 12.5px }
.wm-filter .wm-cd-clear { border: 0; background: none; color: var(--wa); font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px }
.wm-filter .wm-cd-list { max-height: 260px; overflow: auto }
.wm-filter .wm-cd-grouph { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #6b727c; margin: 8px 0 2px }
.wm-filter .wm-cd-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 13px; color: #1e2128; cursor: pointer }
.wm-filter .wm-cd-row:hover { color: var(--wa) }
.wm-filter .wm-cd-row input { width: 15px; height: 15px; flex: none }
.wm-filter .wm-avcascade { display: grid; gap: 6px }

/* location box: type a place, pick it, then narrow by distance */
.wm-filter .wm-loc { position: relative; display: grid; gap: 6px }
.wm-filter .wm-loc-panel { position: absolute; z-index: 40; left: 0; right: 0; top: 36px; background: #fff;
  border: 1px solid #dfe3e8; border-radius: 10px; box-shadow: 0 10px 26px rgba(16, 20, 28, .14); max-height: 260px; overflow-y: auto }
.wm-filter .wm-loc-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px;
  font: inherit; font-size: 13px; color: #1e2128; cursor: pointer; border-bottom: 1px solid #f2f4f6 }
.wm-filter .wm-loc-item:hover { background: #f6f8fa }
.wm-filter .wm-loc-item i { font-style: normal; color: #7a828d; font-size: 12px }

/* 4.png: no up/down spinner on any number box, anywhere on a store website */
.wm-body input[type=number] { -moz-appearance: textfield; appearance: textfield }
.wm-body input[type=number]::-webkit-outer-spin-button,
.wm-body input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0 }
/* 4.png: the little arrow on a tick-box dropdown was too small to see */
.wm-filter .wm-cd-caret { display: none }

/* ── One dropdown arrow everywhere, the same one the marketplace draws ──
   The storefront renders with Layout = null, so site.css's global select chevron
   never reached it and `-webkit-appearance: none` left the dropdowns with no arrow
   at all. This is that rule, copied stroke for stroke. */
.wm-body { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E") }
.wm-body select,
.wm-filter .wm-cd-btn {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: var(--chev);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
    padding-right: 26px;
    text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.wm-body select[class], .wm-filter .wm-cd-btn { padding-right: 28px }
.wm-body select::-ms-expand { display: none }
.wm-body select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #444 }
/* the search box's category dropdown: the template paints it with a `background`
   shorthand, which wipes the image, so it has to be put back at that weight */
.wm-body .wm-search .wm-scat,
.wm-body .wm-search.boxwhite .wm-scat,
.wm-body .wm-search.plain .wm-scat {
    background-image: var(--chev);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
    padding-right: 26px;
}
/* the editor's own panel keeps its own look */
.wm-body .ed-panel select { background-image: none; padding-right: 10px }

/* ── the store's own listing page ────────────────────────────────────────── */
.wm-detail { margin: 22px auto 0 }
.wm-crumb { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #6b727d; margin-bottom: 14px; flex-wrap: wrap }
.wm-crumb a { color: #6b727d }
.wm-crumb a:hover { color: var(--wa) }
.wm-crumb b { color: #1e2128; font-weight: 700 }
.wm-dgrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 28px; align-items: start }
.wm-dmain { position: relative; background: #fff; border: 1px solid #e7eaef; border-radius: var(--srd2, 12px);
  height: var(--sih, 420px); display: flex; align-items: center; justify-content: center; overflow: hidden }
.wm-dmain img { width: 100%; height: 100%; object-fit: var(--sfit, contain) }
.wm-dmain .wm-art { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: inherit }
.wm-dmain .wm-art .pi { width: 92px; height: 92px; stroke: #fff; fill: none; stroke-width: 1.4 }
.wm-dmain .wm-off { position: absolute; left: 12px; top: 12px; background: var(--dbg, #2b8fe0); color: var(--dtx, #fff);
  font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 20px }
.wm-dthumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap }
.wm-dthumb { width: 68px; height: 68px; padding: 0; border: 1px solid #e7eaef; border-radius: 9px; background: #fff; cursor: pointer; overflow: hidden }
.wm-dthumb img { width: 100%; height: 100%; object-fit: cover }
.wm-dthumb.on, .wm-dthumb:hover { border-color: var(--wa) }
.wm-dinfo h1 { font-size: 25px; line-height: 1.25; margin: 0 0 12px; color: #14171c }
.wm-dprice { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px }
.wm-dprice .wm-price { font-size: 27px; font-weight: 800; color: var(--wa) }
.wm-dprice .wm-was { font-size: 15px; color: #98a0ab; text-decoration: line-through }
.wm-dloc, .wm-dship { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #6b727d; margin-bottom: 10px }
.wm-dbuy { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap }
.wm-dbuy form { margin: 0 }
.wm-dbuynow, .wm-dcart { display: inline-flex; align-items: center; justify-content: center; min-width: 148px; padding: 12px 20px;
  border: 0; border-radius: 9px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer }
.wm-dbuynow { background: var(--wa); color: #fff }
.wm-dcart { background: #eef1f5; color: #2a2f36 }
.wm-dbuynow:hover, .wm-dcart:hover { filter: brightness(.94) }
.wm-dseller { border: 1px solid #e7eaef; border-radius: 12px; padding: 12px 14px; margin-top: 16px }
.wm-dseller > b { display: block; font-size: 11.5px; letter-spacing: .4px; text-transform: uppercase; color: #6b727d; margin-bottom: 8px }
.wm-dseller .row { display: flex; align-items: center; gap: 10px }
.wm-dseller .lg { width: 40px; height: 40px; border-radius: 50%; background: var(--wa); color: #fff; display: flex;
  align-items: center; justify-content: center; font-weight: 800; overflow: hidden; flex: none }
.wm-dseller .lg img { width: 100%; height: 100%; object-fit: cover }
.wm-dseller a { font-weight: 700; color: #1e2128 }
.wm-dseller small { display: block; font-size: 12px; color: #7b828c }
.wm-dshare { display: flex; gap: 14px; margin-top: 14px; font-size: 13px }
.wm-dshare a { color: var(--wa); font-weight: 700 }
.wm-dblock { margin-top: 26px }
.wm-dblock h2 { font-size: var(--hs, 19px); font-weight: var(--hw, 800); margin: 0 0 10px }
.wm-dblock p { white-space: pre-line; color: #3b414a; line-height: 1.65; margin: 0 }
.wm-dattrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 18px }
.wm-dattrs > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #f0f2f5; font-size: 13.5px }
.wm-dattrs span { color: #6b727d }
.wm-dattrs b { color: #1e2128; text-align: right }
@media (max-width: 860px) { .wm-dgrid { grid-template-columns: 1fr } }

/* the search page: the filter panel and the results are their own sections now */
.wm-results > .wm-shell { min-width: 0 }
.wm-results.side-right { grid-template-columns: minmax(0, 1fr) 268px }
.wm-results.side-right > .wm-shell:first-child { order: 2 }
.wm-results.nofilter { grid-template-columns: minmax(0, 1fr) }
.wm-filter.nostick { position: static }

/* the filter panel: which side it sits on, how wide, its own heading */
.wm-results { grid-template-columns: var(--fw, 268px) minmax(0, 1fr) }
.wm-results.side-right { grid-template-columns: minmax(0, 1fr) var(--fw, 268px) }
.wm-fsub { margin: -6px 0 8px; font-size: 12.5px; color: #7b828c }
.wm-shell[data-sec="filters"] .wm-fhead h3 { font-size: var(--sts, 15px); font-weight: var(--stw, 800) }
.wm-more { display: block; width: max-content; margin: 18px auto 0; padding: 10px 26px; border-radius: 9px;
  background: #eef1f5; color: #2a2f36; font-size: 13.5px; font-weight: 800 }
.wm-more:hover { background: #e4e8ee; color: var(--wa) }