/* shop-faire.css — the Faire-benchmark theme for Closo Direct shops and product
   pages (mock v14 screens 3–4, единое ТЗ §9, grant 2026-09-08). A layer over
   shop-storefront.css, scoped to body.dfa, so the flag is the whole rollback.
   Palette (Direct's own, distinct from Closo Wholesale): ink #1A202C, warm
   neutral #F4F3F1, line #E6E4E1, accent #1D5FBF; purple #452B90 only on the
   door to wholesale. No emoji, SVG icons only. */

body.dfa{--bg:#FFFFFF;--fg:#1A202C;--muted:#5B6470;--line:#E6E4E1;--edge:#6F7783;--focus:#1D5FBF;
  --accent:#1A202C;--accent-ink:#fff;--card:#F4F3F1;--tint:#EEF3FB;--dfa-blue:#1D5FBF;--dfa-warm:#F4F3F1;--dfa-purple:#452B90;
  --shadow:0 1px 2px rgba(26,32,44,.05),0 6px 20px rgba(26,32,44,.06);background:#fff;color:#1A202C}

/* ── buttons: black pills, outline pills ───────────────────────────────────── */
body.dfa .btn-primary,body.dfa .cta,body.dfa .card-add,body.dfa .followbtn[data-follow-btn],body.dfa .searchgo{
  background:#1A202C;color:#fff;border:1px solid #1A202C;border-radius:999px;font-weight:600;box-shadow:none}
body.dfa .cta:hover,body.dfa .btn-primary:hover,body.dfa .card-add:hover,body.dfa .followbtn[data-follow-btn]:hover{background:#2D3646;border-color:#2D3646}
body.dfa .cta--ghost,body.dfa .cta--quiet,body.dfa .followbtn:not([data-follow-btn]),body.dfa .ss-visit,body.dfa .btn:not(.btn-primary),body.dfa .drop-t{
  background:#fff;color:#1A202C;border:1px solid #1A202C;border-radius:999px;font-weight:600}
body.dfa .followbtn[data-follow-on]{background:#fff;color:#1A202C;border:1px solid #1A202C}
body.dfa .chip{border-radius:999px;border-color:#E6E4E1;background:#fff;color:#1A202C}
body.dfa .chip.on{background:#1A202C;color:#fff;border-color:#1A202C}
body.dfa a{color:#1D5FBF}
body.dfa .card a,body.dfa a.card{color:inherit}

/* ── shop header: banner, avatar with a white ring, name, stats line, chips ─ */
body.dfa .sf-ava{border:3px solid #fff;box-shadow:0 0 0 1px #E6E4E1,0 4px 14px rgba(26,32,44,.10);background:#F4F3F1;color:#1A202C}
body.dfa .shop-name{font-weight:800;letter-spacing:-.01em}
body.dfa .sf-handle,body.dfa .repline{color:#5B6470}
body.dfa .repline b,body.dfa .vstat .num{color:#1A202C}
body.dfa .sf-badge{background:#F4F3F1;border:1px solid #E6E4E1;color:#1A202C;border-radius:999px}
body.dfa .sf-badge.ok{background:#EEF3FB;border-color:#D6E2F7;color:#1D5FBF}
body.dfa .vbadge{color:#1D5FBF}
body.dfa .searchrow input{border:1px solid #E6E4E1;border-radius:999px;background:#fff;padding-left:38px}
body.dfa .searchrow-i{color:#5B6470}
body.dfa .tabs a{color:#5B6470;border-bottom:2px solid transparent;padding-bottom:8px;font-weight:600;border-radius:0;background:none}
body.dfa .tabs a[aria-current="page"]{color:#1A202C;border-bottom-color:#1A202C}

/* ── the Faire tile: borderless, square photo on warm neutral, heart on photo,
      photo count, «Add to bag» on hover; brand in blue, title, price, meta ─── */
body.dfa .card,body.dfa .card-w{border:0;background:transparent;box-shadow:none;border-radius:0;padding:0}  /* Faire tile: no frame */
body.dfa .card-img{position:relative;border-radius:14px;background:#F4F3F1;aspect-ratio:1/1;height:auto;padding:0;overflow:hidden;border:0}
body.dfa .card-img img{position:absolute;inset:0;object-fit:cover;width:100%;height:100%}
body.dfa .card-img .multi{left:auto;right:8px;top:auto;bottom:8px;background:rgba(255,255,255,.92);color:#1A202C;border-radius:999px;font-size:11px;padding:2px 7px}
body.dfa .card-b{color:#1D5FBF;font-weight:600;font-size:12px;margin:10px 0 2px;text-transform:none;letter-spacing:0}
body.dfa .card-t{color:#1A202C;font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.dfa .card-p{color:#1A202C;font-weight:700;font-size:15px;margin-top:4px}
body.dfa .card-p .was{color:#5B6470;font-weight:400}
body.dfa .card-meta,body.dfa .card-s{color:#5B6470;font-size:12.5px}
body.dfa .card-w{position:relative}
body.dfa .card-w .card-act{position:absolute;left:0;right:0;top:0;pointer-events:none;z-index:3}  /* above the scrub frames (z1) and dots (z2) */
body.dfa .card-w .card-act .saveform{display:block;position:absolute;right:10px;top:10px;pointer-events:auto}
body.dfa .card-w .card-act .heart{width:34px;height:34px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 3px rgba(26,32,44,.18);color:#1A202C;display:inline-flex;align-items:center;justify-content:center}
body.dfa .card-w .card-act .heart[aria-pressed="true"]{color:#B02E68}
body.dfa .card-w .card-act .bagform{display:block;position:absolute;left:10px;right:54px;bottom:10px;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}  /* the base sheet makes the form display:contents — opacity needs a box */
body.dfa .card-w .card-act .bagform .card-add{width:100%;min-height:36px;font-size:13px}
body.dfa .card-w .card-act .card-aucend,body.dfa .card-w .card-act .card-add--bid{position:absolute;left:10px;right:54px;top:10px;pointer-events:auto}
@media (hover:hover){
  body.dfa .card-w:hover .card-act .bagform,body.dfa .card-w:focus-within .card-act .bagform{opacity:1;transform:none;pointer-events:auto}
}
@media (hover:none){body.dfa .card-w .card-act .bagform{display:none}}  /* phone: only the heart stays on the tile */
/* the bag/heart row sits over the square photo: anchor the actions to the image height */
body.dfa .card-w .card-act{aspect-ratio:1/1}
body.dfa .ss-visit{display:inline-flex;align-items:center;justify-content:center;padding:0 16px;height:36px;min-height:36px;line-height:1;font-size:13.5px;white-space:nowrap;width:auto;min-width:0;border-radius:999px}  /* Faire: a compact secondary pill, not a 44px slab */

/* ── PDP: warm gallery, black buy pill, blue brand, quiet accordion ────────── */
body.dfa .galwrap,body.dfa #pdp-gallery{background:#F4F3F1;border-radius:16px;overflow:hidden}
body.dfa .pdp-buy .card-b{color:#1D5FBF;font-weight:600}
body.dfa .pdp-buy h1{font-weight:800;letter-spacing:-.01em}
body.dfa .pdp-buy .attrs .k{color:#5B6470}
body.dfa .pdp-buy .cta{border-radius:999px}
body.dfa .accordion .acc{border-color:#E6E4E1}
body.dfa .sellerstrip{background:#F4F3F1;border:0;border-radius:14px}
body.dfa .stickybuy{border-top:1px solid #E6E4E1}
body.dfa .stickybuy .cta{border-radius:999px}

/* ── the one purple thing: the doors to wholesale ──────────────────────────── */
body.dfa .dfa-door{display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:center;margin:36px 0 8px;padding:22px 24px;
  background:#452B90;color:#fff;border-radius:16px;text-decoration:none}
body.dfa .dfa-door-t{font-weight:800;font-size:18px;grid-column:1}
body.dfa .dfa-door-s{font-size:14px;line-height:1.5;color:rgba(255,255,255,.86);grid-column:1;max-width:64ch}
body.dfa .dfa-door-b{grid-column:2;grid-row:1/3;background:#fff;color:#452B90;border-radius:999px;padding:12px 18px;font-weight:700;white-space:nowrap}
body.dfa .dfa-door{transition:background-color .15s,transform .15s,box-shadow .15s}
body.dfa .dfa-door:hover{background:#3A2478;transform:translateY(-2px);box-shadow:0 12px 28px rgba(69,43,144,.28)}
body.dfa .dfa-door-b{transition:background-color .15s,transform .15s}
body.dfa .dfa-door:hover .dfa-door-b{background:#F4F1FB;transform:translateX(3px)}
body.dfa .hub-band,body.dfa [data-hub-band]{background:#452B90;border-radius:14px}
@media (max-width:700px){
  body.dfa .dfa-door{grid-template-columns:1fr;padding:18px 16px}
  body.dfa .dfa-door-b{grid-column:1;grid-row:auto;text-align:center}
  body.dfa .sf-badges{display:flex;overflow-x:auto;flex-wrap:nowrap;gap:8px;scrollbar-width:none;padding-bottom:4px}
  body.dfa .sf-badges::-webkit-scrollbar{display:none}
  body.dfa .sf-badge{white-space:nowrap;flex:0 0 auto}
}

/* ── the strip above the shop: the way back to wholesale ──────────────────── */
body.dfa .dfa-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;padding:6px 20px;background:#452B90;color:#fff;font-size:13px;line-height:1.3}
body.dfa .dfa-topbar a{color:#fff;text-decoration:none;font-weight:700;white-space:nowrap}
body.dfa .dfa-topbar a b{font-weight:400;opacity:.85}
body.dfa .dfa-topbar-s{color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:700px){body.dfa .dfa-topbar{padding:6px 16px}body.dfa .dfa-topbar a b{display:none}body.dfa .dfa-topbar-s{font-size:12px}}

body.dfa .bis-ph{background-color:#F4F3F1;border-color:#E6E4E1}
body.dfa .bis-all{color:#1D5FBF}
body.dfa .bis-t:hover .bis-ph{border-color:#1D5FBF}
body.dfa .bis-t.on .bis-ph{border-color:#1A202C;box-shadow:0 0 0 2px #1A202C}
body.dfa .sf-closo,body.dfa .sf-closo span{color:#1A202C}  /* the footer wordmark stays ink, not link-blue */

/* ── toolbar by Faire: one rounded search field (Enter submits), outline «Filters» pill, quiet «Sort by» ── */
body.dfa .toolbar{gap:10px}
body.dfa .searchrow .searchgo{display:none}
body.dfa .searchrow input[type=search]{padding:11px 16px 11px 40px;border:1px solid #E6E4E1;background:#fff;border-radius:999px;min-height:44px;font-size:15px}
body.dfa .searchrow input[type=search]:hover{border-color:#1A202C}
body.dfa .searchrow input[type=search]:focus{border-color:#1A202C;box-shadow:0 0 0 3px rgba(29,95,191,.15);outline:0}
body.dfa .searchrow-i{left:15px;color:#5B6470}
body.dfa .fbtn,body.dfa .toolbar .drop-t{background:#fff;color:#1A202C;border:1px solid #E6E4E1;border-radius:999px;min-height:44px;padding:0 16px;font-weight:600;font-size:14px}
body.dfa .fbtn:hover,body.dfa .toolbar .drop-t:hover{border-color:#1A202C}
body.dfa .toolbar .drop-t .v{font-weight:500;color:#5B6470}
body.dfa .drop-p{border:1px solid #E6E4E1;border-radius:14px;box-shadow:0 12px 32px rgba(26,32,44,.12)}
body.dfa .applied .chip.on,body.dfa .sortlist .chip.on{background:#1A202C;color:#fff;border-color:#1A202C}

/* ── buttons by Faire: quiet borders, a lift on hover, ink fill for the primary ────── */
body.dfa .btn,body.dfa .fbtn,body.dfa .drop-t,body.dfa .followbtn,body.dfa .cta,body.dfa .card-add,body.dfa .mbw-btn,body.dfa .heart,body.dfa .chip{transition:background-color .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s}
body.dfa .btn:not(.btn-primary):hover,body.dfa .fbtn:hover,body.dfa .toolbar .drop-t:hover,body.dfa .followbtn:not([data-follow-btn]):hover,body.dfa .cta--ghost:hover,body.dfa .cta--quiet:hover,body.dfa .ss-visit:hover{border-color:#1A202C;background:#F4F3F1;transform:translateY(-1px);box-shadow:0 4px 12px rgba(26,32,44,.08)}
body.dfa .cta:not(.cta--ghost):not(.cta--quiet):hover,body.dfa .btn-primary:hover,body.dfa .card-add:hover,body.dfa .followbtn[data-follow-btn]:hover{background:#2D3646;border-color:#2D3646;transform:translateY(-1px);box-shadow:0 6px 16px rgba(26,32,44,.18)}
body.dfa .btn:active,body.dfa .cta:active,body.dfa .card-add:active,body.dfa .followbtn:active,body.dfa .fbtn:active{transform:none;box-shadow:none}
body.dfa .heart:hover{transform:scale(1.08);box-shadow:0 2px 8px rgba(26,32,44,.2)}
body.dfa .chip:hover{border-color:#1A202C}
body.dfa .applied{gap:8px;align-items:center}
body.dfa .applied .chip.chip-x{background:#1A202C;color:#fff;border-color:#1A202C;padding:8px 12px 8px 14px;font-weight:600;min-height:36px}
body.dfa .applied .chip.chip-x b{opacity:.75;margin-left:6px;font-weight:400}
body.dfa .applied .chip.chip-x:hover{background:#2D3646;border-color:#2D3646}
body.dfa .applied .btn.clear-all{background:none;border:0;box-shadow:none;padding:8px 6px;min-height:36px;color:#5B6470;font-weight:500;text-decoration:underline;text-underline-offset:3px}
body.dfa .applied .btn.clear-all:hover{color:#1A202C;background:none;transform:none;box-shadow:none}

/* ── product page top bar: the shop name hover is a quiet underline and an avatar ring, not a grey slab ── */
body.dfa .st-name{display:inline-block;width:auto;max-width:60vw;flex:0 1 auto;background:none;color:#1A202C;font-weight:700;text-decoration:none;padding:6px 2px;margin-left:2px;border-radius:0;position:relative;transition:color .15s}  /* the underline runs under the NAME, not across the bar */
body.dfa .st-name::after{content:"";position:absolute;left:2px;right:2px;bottom:2px;height:2px;background:#1D5FBF;transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
body.dfa .st-name:hover{background:none;color:#1D5FBF}
body.dfa .st-name:hover::after{transform:scaleX(1)}
body.dfa .st-ava{border-width:2px;box-shadow:0 0 0 1px #E6E4E1;box-sizing:border-box;transition:box-shadow .15s,transform .15s}  /* 30px stays 30px: the 3px ring of the big avatar grew it into the name */
body.dfa .stickytop-in:hover .st-ava,body.dfa .st-back:hover+.st-ava{box-shadow:0 0 0 2px #1D5FBF}
body.dfa .st-back:hover{background:#F4F3F1;color:#1A202C}
body.dfa .st-saved:hover,body.dfa .st-acc:hover{background:#F4F3F1;border-radius:50%}

/* ── sort menu by Faire: a quiet panel, plain rows, a check on the chosen one ── */
body.dfa .drop-sort .drop-p{padding:8px;border:1px solid #E6E4E1;border-radius:14px;box-shadow:0 16px 40px rgba(26,32,44,.14);min-width:240px}
body.dfa .drop-sort .sh-head{padding:6px 10px 8px;border-bottom:1px solid #F0EEEB;margin-bottom:6px}
body.dfa .drop-sort .sh-head b{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#5B6470;font-weight:600}
body.dfa .drop-sort .sh-head .reset{color:#1D5FBF;font-weight:600;font-size:13px}
body.dfa .sortlist{gap:2px}
body.dfa .sortlist .chip{border:0;background:none;border-radius:10px;padding:10px 12px;min-height:40px;font-size:14px;color:#1A202C;justify-content:space-between;transition:background-color .12s}
body.dfa .sortlist .chip:hover{background:#F4F3F1;border:0;transform:none;box-shadow:none}
body.dfa .sortlist .chip.on{background:#F4F3F1;color:#1A202C;font-weight:600}
body.dfa .sortlist .chip.on::after{content:"";width:16px;height:16px;flex:0 0 auto;margin-left:12px;background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A202C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>")}
@media (max-width:700px){body.dfa .drop-sort .drop-p{border-radius:16px 16px 0 0}}
/* lot tiles inside the purple band: titles stay white (the theme's link colour must not reach them) */
body.dfa .mbw-lot,body.dfa .mbw-lot .mbw-t,body.dfa .mbw-lot:hover{color:#fff}
body.dfa .mbw-lot .mbw-m{color:rgba(255,255,255,.78)}

/* ── «See all N →» beside a rail heading, by Faire: 14px semibold, ink, arrow steps on hover ── */
body.dfa .mb-h{align-items:baseline;margin-bottom:10px}
body.dfa .mb-h .sec-h{font-size:18px;font-weight:700;letter-spacing:-.01em}
body.dfa .mb-h .viewall{font-size:14px;font-weight:600;color:#1A202C;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;transition:color .15s}
body.dfa .mb-h .viewall:hover{color:#1D5FBF;text-decoration:underline;text-underline-offset:4px}
@media (max-width:700px){body.dfa .mb-h .sec-h{font-size:16px}body.dfa .mb-h .viewall{font-size:13px}}

/* `hidden` must win over the display rules above: the UA sheet's [hidden]{display:none} loses to any
   author `display`, so the strip and the door showed to everyone (Иван 08.09, incognito on /c/ivan). */
body.dfa .dfa-topbar[hidden],body.dfa .dfa-door[hidden]{display:none!important}
/* ── Card overlays keep out of each other's way (operator 2026-09-08, /c/closo-demo):
   the discount badge and the heart were BOTH pinned top-right, and the «Add to bag»
   button sat 10px off the bottom — right on top of the flash-sale strip. The badge
   takes the top-LEFT corner (Faire puts the promo there), the heart keeps the right,
   and a card that carries a strip lifts the button above it. */
body.dfa .card-w .card-img .sbadge{left:8px;right:auto;top:8px}
body.dfa .card-w .card-act .bagform{left:10px;right:10px} /* centred: the heart lives at the top now, nothing to dodge on the right */
body.dfa .card-w:has(.pstrip) .card-act .bagform{bottom:26px} /* the 31px strip sits 12px below the overlay box; 26 = clear of it by 8 */
/* «Auction ended» / «In a live auction» as a badge, not a grey caption across the tile (operator 2026-09-08, Faire benchmark): an ink pill in the top-left corner, the same spot the discount badge takes. */
body.dfa .card-w .card-act .card-aucend{left:8px;right:auto;top:8px;flex:none;width:auto;min-height:0;height:26px;padding:0 10px;border-radius:999px;background:#1A202C;color:#fff;font:600 11.5px/26px Inter,sans-serif;letter-spacing:.01em;box-shadow:0 1px 3px rgba(26,32,44,.18);white-space:nowrap}