/* vk-size-pills-slim-filter (filter pills 28px; product rules identical to live) - round pill look for size/filter dropdowns, product selects, quantity and Add to Bag.
   Merged from option-D3.css + option-D3-product.css + option-D3-product-btn.css. Pure CSS; the only script is vk-size-pills-20261028.js (sort highlight hook).
   SCOPE (every rule): html body #FilterBarWrap ...  (gallery filter bar), html body.mobile #FilterBarWrap ...  (phones), html body.item #orderForm ...  (product page add-to-bag form).
   Nothing here can match the cart, checkout or account pages: they have none of #FilterBarWrap, body.item or #orderForm, and they do not load this file. */

/* ===== PART 1 - gallery filter bar (option D3) ===== */
/* vk-size-highlight option D3 - Apple pills, compact phones, clear link attached to the size pill (2026-10-28). Pure CSS (plus the existing tiny option-sort.js hook for a non-default sort).
   NEUTRAL: every filter select (size, category, brand, eco, sort) is a fully rounded pill: white fill, 1px warm-grey border,
            brand-brown text #675948 (6.8:1 on white), small chevron, no inner divider line, 28px tall (also on phones).
   ACTIVE : a select that has a value (.hasSelected: size, View 1 Category/Brand/Eco) is FILLED brand brown #675948 with white
            semi-bold text (white on #675948 = 6.8:1, passes AA for normal text). No red / terracotta anywhere.
   SORT   : stays a pill, never filled. A non-default sort (class .vkSortLight, set by option-sort.js) = bold text + 1px brown border.
   CLEAR  : x clear size stays a separate, tidy underlined brown text link, drawn 28px tall with a 32px tap area (invisible padding, no background) so it is easy to tap. */

/* ---------- 1. neutral pill (all selects) ---------- */
html body #FilterBarWrap #FilterBarLeftRight .Dropdown .DropdownValue{
  box-sizing:border-box;height:28px;line-height:26px;margin-bottom:6px;padding:0 36px 0 16px;
  border:1px solid #8a7d6d;border-radius:999px;background:#fff;color:#675948;font-weight:400;
  box-shadow:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top;
  transition:background-color .15s,border-color .15s,color .15s}
html body #FilterBarWrap #FilterBarLeftRight .Dropdown .DropdownValue:hover{border-color:#675948;background:#fff}
/* remove the old square divider, swap the old triangle for a slim chevron */
html body #FilterBarWrap #FilterBarLeftRight .Dropdown .DropdownValue:before{display:none}
html body #FilterBarWrap #FilterBarLeftRight .Dropdown .DropdownValue:after{
  content:"";position:absolute;top:50%;right:16px;left:auto;width:6px;height:6px;margin:0;
  border:0;border-right:2px solid #675948;border-bottom:2px solid #675948;border-radius:1px;
  transform:translateY(-70%) rotate(45deg)}

/* ---------- 2. active (filled) pill: size, View 1 Category / Brand / Eco ---------- */
html body #FilterBarWrap #FilterBarLeftRight .Dropdown .DropdownValue.hasSelected{
  background:#675948;border-color:#675948;color:#fff;font-weight:600;text-transform:none}
html body #FilterBarWrap #FilterBarLeftRight .Dropdown .DropdownValue.hasSelected:after{border-right-color:#fff;border-bottom-color:#fff}
html body #FilterBarWrap #FilterBarLeftRight .Dropdown .DropdownValue.hasSelected:hover{background:#574a3c;border-color:#574a3c}

/* ---------- 3. sort: pill, never filled; non-default sort = bold + 1px brown border ---------- */
html body #FilterBarWrap #FilterBarLeftRight #FilterSort .DropdownValue.vkSortLight{
  background:#fff;color:#4a3a2a;font-weight:700;border-color:#675948;box-shadow:none}
html body #FilterBarWrap #FilterBarLeftRight #FilterSort .DropdownValue.vkSortLight:after{border-right-color:#4a3a2a;border-bottom-color:#4a3a2a}

/* ---------- 4. clear link: tidy, tappable text link ---------- */
html body #FilterBarWrap #FilterBarLeftRight a#FilterPersistClear{
  box-sizing:border-box;height:32px;line-height:32px;padding:0 10px;margin:-2px 6px 4px 0!important;vertical-align:top;
  color:#675948;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
html body #FilterBarWrap #FilterBarLeftRight a#FilterPersistClear:not([style*="none"]){display:inline-block}
html body #FilterBarWrap #FilterBarLeftRight a#FilterPersistClear:hover{color:#4a3a2a}
html body #FilterBarWrap #FilterBarLeftRight a#FilterPersistClear:focus-visible{outline:2px solid #675948;outline-offset:1px;border-radius:999px}

/* ---------- 5. dropdown list: soft rounded card to match ---------- */
html body #FilterBarWrap #FilterBarLeftRight .Dropdown .DropdownListBox{
  border:1px solid #c9bfb3;border-radius:14px;box-shadow:0 6px 18px rgba(60,45,30,.16);top:23px;padding:6px 0}

/* ---------- 6. desktop spacing so the filter by : label stays on the pills line ---------- */
html body #FilterBarWrap #FilterBarLeftRight #FilterBarLeft,html body #FilterBarWrap #FilterBarLeftRight #FilterBarRight{line-height:28px}

/* ---------- 7. phones (<=767px): compact two-row bar ----------
   Row 1: size | category | brand (the three filters side by side, each as wide as its text, never truncated; if a long label
          such as View 3 Categories cannot fit, that pill simply wraps to a second line instead of being cut off).
   Row 2: x clear size (left, only while a size is chosen) ........ sort: [pill] (right).
   The filter by: caption is hidden on phones (the pills already say all sizes / all categories / all brands). Eco is hidden on phones, as before.
   Pills are 28px tall with 12px text and tight padding; gaps are 4px/6px; the bars own padding is trimmed. Desktop (>767px) is identical to option D. */
@media (max-width:767px){
  html body.mobile #FilterBarWrap #FilterBarLeftRight{gap:0 4px;padding:4px 10px 0 10px;margin-top:2px;align-items:flex-start}
  html body.mobile #FilterBarWrap #FilterBarLeftRight #FilterBarLeft:before{display:none}
  /* D3: no forced line break any more - rows wrap naturally so the clear link can sit right after the size pill */
  html body.mobile #FilterBarWrap #FilterBarLeftRight .Dropdown{margin:0 0 6px;width:auto;min-width:max-content;flex:1 1 auto;box-sizing:border-box}
  html body.mobile #FilterBarWrap #FilterBarLeftRight #FilterApparelSize{order:1;width:auto}
  html body.mobile #FilterBarWrap #FilterBarLeftRight #FilterCategory{order:3;flex:1 1 auto}
  html body.mobile #FilterBarWrap #FilterBarLeftRight #FilterBrand{order:4;flex:1 1 auto}
  html body.mobile #FilterBarWrap #FilterBarLeftRight #FilterSort{order:8;flex:0 0 auto;min-width:max-content;width:auto}
  html body.mobile #FilterBarWrap #FilterBarLeftRight .Dropdown .DropdownValue{height:28px;line-height:26px;padding:0 22px 0 11px;min-width:0;font-size:12px}
  html body.mobile #FilterBarWrap #FilterBarLeftRight #FilterSort .DropdownValue{min-width:0;padding:0 26px 0 12px}
  html body.mobile #FilterBarWrap #FilterBarLeftRight .Dropdown .DropdownValue:after{right:9px}
  html body.mobile #FilterBarWrap #FilterBarLeftRight a#FilterPersistClear{
    order:2;flex:0 0 auto;margin:-2px 0 4px -2px!important;height:32px;line-height:32px;padding:0 6px;font-size:12px;align-self:flex-start}
  /* D3: the sort: caption travels with the sort pill (it is drawn inside #FilterSort), so the two can never be split across rows */
  html body.mobile #FilterBarWrap #FilterBarLeftRight #FilterBarRight:before{display:none!important}
  html body.mobile #FilterBarWrap #FilterBarLeftRight #FilterSort{margin-left:auto;padding-left:38px;position:relative}
  html body.mobile #FilterBarWrap #FilterBarLeftRight #FilterSort:before{content:"sort:";position:absolute;left:0;top:0;height:28px;line-height:28px;font-size:12px;font-weight:700;color:#675948;white-space:nowrap}
  html body.mobile #FilterBarWrap #FilterBarLeftRight .Dropdown .DropdownListBox{top:32px}
}

/* ===== PART 2 - product page selects and quantity pill ===== */
/* vk option D3 - product-page pills (2026-10-28). Same look as the filter pills: round, white, 1px warm-grey border, brand-brown text.
   Scope: ONLY inside the add-to-bag form on item pages:  body.item #orderForm ...  (cart and checkout have neither body.item nor #orderForm).
   Product selects are NOT filled: the first option is a real choice (there is no nothing chosen state), so a fill would mean nothing. */

/* option / size / color dropdowns */
html body.item #orderForm select.SKUadd2cartOptionGroup{
  -webkit-appearance:none;appearance:none;box-sizing:border-box;height:40px;line-height:38px;
  max-width:100%;min-width:200px;padding:0 42px 0 18px;margin:0;
  border:1px solid #8a7d6d;border-radius:999px;background-color:#fff;color:#675948;font-size:16px;font-weight:400;
  text-overflow:ellipsis;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23675948' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px;
  transition:border-color .15s}
html body.item #orderForm select.SKUadd2cartOptionGroup:hover{border-color:#675948}
html body.item #orderForm select.SKUadd2cartOptionGroup:focus-visible{outline:2px solid #675948;outline-offset:2px}

/* quantity stepper: one pill holding  -  [1]  +  */
html body.item #orderForm .SKUqohBin{
  box-sizing:border-box;height:42px;border:1px solid #8a7d6d;border-radius:999px;background:#fff;
  display:inline-flex;align-items:center;overflow:hidden;vertical-align:middle}
html body.item #orderForm .SKUqohBin .qtyChar{
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:44px;height:40px;padding:0;
  line-height:1;font-size:24px;color:#675948;cursor:pointer;user-select:none;-webkit-user-select:none}
html body.item #orderForm .SKUqohBin .qtyChar:hover{background:#f1ece6}
html body.item #orderForm .SKUqohBin input#vwquantity0{
  box-sizing:border-box;width:40px;height:38px;border:0;border-radius:0;background:transparent;color:#4a3a2a;
  font-size:16px;font-weight:700;line-height:38px;padding:0;text-align:center}
@media (max-width:767px){
  html body.item #orderForm select.SKUadd2cartOptionGroup{width:100%;min-width:0;height:44px;line-height:42px}
  html body.item #orderForm .SKUqohBin{height:46px}
  html body.item #orderForm .SKUqohBin .qtyChar{width:48px;height:44px}
  html body.item #orderForm .SKUqohBin input#vwquantity0{height:42px;line-height:42px}
}

/* ===== PART 3 - round Add to Bag button (colour untouched) ===== */
/* OPTIONAL add-on to option-D3-product.css: make the ADD TO BAG button a matching pill (colour untouched). Scope: body.item #orderForm only. */
html body.item #orderForm .add2CartBtn{border-radius:999px}