/* Tile quantity stepper, "Choose" link, option chips, pending/feedback states.
   Markup: inc/qty-stepper.php · behaviour: assets/js/qty-stepper.js.
   Loads after product-structure.css. Every tile selector starts from the same prefix as
   product-structure.css (0,4,3) and adds enough classes to beat its purchase-rail button
   rules (0,6,4 / 0,7,4 — outside any media query, so they also beat its mobile ones). */

body.mrdad-minimal {
  --md-qty-h: 42px;
  --md-qty-ink: #165443;
}

/* ---- The wrapper sits in the purchase rail's second column ---- */
body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .mrdad-qty {
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  justify-self: end; min-width: 0; margin: 0; padding: 0;
}

/* ---- "Add": a light pill with a plus — the empty state ---- */
body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .mrdad-qty a.button.mrdad-qty__add {
  position: static; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: none; width: auto; min-width: 84px; max-width: none; height: var(--md-qty-h); min-height: var(--md-qty-h);
  margin: 0; padding: 0 16px 0 13px;
  color: var(--md-qty-ink); background: linear-gradient(145deg, #f5faf5, #e0eee5); background-clip: border-box;
  border: 1px solid #cadfd3; border-radius: 999px;
  box-shadow: inset 0 1px 0 #fff, 0 3px 7px #16544314;
  font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none; text-indent: 0;
  white-space: nowrap; text-decoration: none; text-align: center;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .mrdad-qty a.button.mrdad-qty__add::before {
  content: ''; display: block; position: static; flex: none; width: 14px; height: 14px; margin: 0;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2.2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2.2px 14px no-repeat;
  border-radius: 1px;
}
body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .mrdad-qty a.button.mrdad-qty__add::after { display: none; }
body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .mrdad-qty a.button.mrdad-qty__add:hover {
  color: #fff; background: var(--md-qty-ink); border-color: var(--md-qty-ink); box-shadow: 0 4px 10px #16544326;
}
body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .mrdad-qty a.button.mrdad-qty__add:active { transform: scale(.96); }

/* ---- The stepper: a filled jade pill — the "in your basket" state ---- */
body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .mrdad-qty .mrdad-qty__stepper {
  display: inline-flex; align-items: center; flex: none;
  height: var(--md-qty-h); margin: 0; padding: 0 2px;
  color: #fff; background: var(--md-qty-ink);
  border: 1px solid var(--md-qty-ink); border-radius: 999px;
  box-shadow: 0 4px 10px #16544326;
}
/* Which of the two shows. No-JS never gets .has-qty, so it only ever sees the working link. */
body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .mrdad-qty:not(.has-qty) .mrdad-qty__stepper { display: none; }
body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .mrdad-qty.has-qty a.button.mrdad-qty__add { display: none; }

body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .mrdad-qty .mrdad-qty__btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; min-width: 0; min-height: 0; margin: 0; padding: 0;
  color: inherit; background: transparent; border: 0; border-radius: 50%; box-shadow: none;
  font: inherit; line-height: 1; letter-spacing: 0; text-transform: none; text-indent: 0;
  cursor: pointer; transition: background .15s ease, opacity .15s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .mrdad-qty .mrdad-qty__btn:hover { background: #ffffff1f; color: #fff; }
body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .mrdad-qty .mrdad-qty__btn:active { transform: scale(.9); }
body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .mrdad-qty .mrdad-qty__btn:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .mrdad-qty .mrdad-qty__btn:is(:disabled, [aria-disabled="true"]) { cursor: default; opacity: .45; transform: none; background: transparent; }

/* Glyphs drawn in CSS: minus, plus, and a bin when one more tap would remove the line. */
body.mrdad-minimal ul.products li.product .mrdad-qty .mrdad-qty__glyph {
  display: block; width: 14px; height: 14px; pointer-events: none;
  background: linear-gradient(currentColor, currentColor) center / 14px 2.2px no-repeat;
}
body.mrdad-minimal ul.products li.product .mrdad-qty .mrdad-qty__inc .mrdad-qty__glyph {
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2.2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2.2px 14px no-repeat;
}
body.mrdad-minimal ul.products li.product .mrdad-qty.is-last .mrdad-qty__dec .mrdad-qty__glyph {
  width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.mrdad-minimal ul.products li.product .mrdad-qty .mrdad-qty__val {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 100%; padding: 0 2px;
  font-size: 15px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: #fff;
  transition: opacity .15s ease;
}

/* ---- Pending: dim while taps gather; spinner ring + disabled buttons while the request runs ---- */
body.mrdad-minimal ul.products li.product .mrdad-qty.is-pending .mrdad-qty__val { opacity: .85; }
body.mrdad-minimal ul.products li.product .mrdad-qty.is-busy .mrdad-qty__val::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 2px solid #ffffff40; border-top-color: #fff; border-radius: 50%;
  animation: mrdad-qty-spin .7s linear infinite; pointer-events: none;
}
body.mrdad-minimal ul.products li.product .mrdad-qty.is-busy .mrdad-qty__stepper { cursor: progress; }

/* ---- Feedback animations ---- */
body.mrdad-minimal ul.products li.product .mrdad-qty .mrdad-qty__val.is-bump { animation: mrdad-qty-bump .32s ease; }
body.mrdad-minimal ul.products li.product .mrdad-qty .mrdad-qty__stepper.is-in { animation: mrdad-qty-in .26s cubic-bezier(.2, .9, .3, 1.3); }
body.mrdad-minimal ul.products li.product .mrdad-qty.is-error { animation: mrdad-qty-shake .36s ease; }
@keyframes mrdad-qty-spin { to { transform: rotate(360deg); } }
@keyframes mrdad-qty-bump { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes mrdad-qty-in { from { opacity: .4; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes mrdad-qty-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

/* ---- "Choose" (variable products): goes to the option picker on the product page ---- */
body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .md-product-purchase a.button.mrdad-choose,
body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product a.button.mrdad-choose {
  position: static; display: inline-flex; align-items: center; justify-content: center; gap: 4px; justify-self: end;
  flex: none; width: auto; min-width: 84px; max-width: none; height: var(--md-qty-h); min-height: var(--md-qty-h);
  margin: 0; padding: 0 12px 0 16px;
  color: var(--md-qty-ink); background: #fff; background-clip: border-box;
  border: 1px solid #a9c6b9; border-radius: 999px; box-shadow: none;
  font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none; text-indent: 0;
  white-space: nowrap; text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .md-product-purchase a.button.mrdad-choose::before,
body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product a.button.mrdad-choose::before { display: none; }
body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .md-product-purchase a.button.mrdad-choose::after,
body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product a.button.mrdad-choose::after {
  content: ''; display: block; position: static; width: 7px; height: 7px; margin: 0 2px 0 2px;
  border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); background: none;
}
body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .md-product-purchase a.button.mrdad-choose:hover,
body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product a.button.mrdad-choose:hover {
  color: #fff; background: var(--md-qty-ink); border-color: var(--md-qty-ink);
}

/* ---- WooCommerce's "View cart" link never shows on a tile ---- */
ul.products li.product .added_to_cart,
body.mrdad-minimal ul.products li.product a.added_to_cart.wc-forward { display: none !important; }

/* ---- The purchase rail on phones: price left, control right, never overflowing ----
   390px aisle browse: product column ≈ 246px, rail ≈ 222px after its 12px margins.
   Stepper 2 + 40 + 28(+4) + 40 + 2 ≈ 116px, leaving ≈ 98px for the price (18px type).
   Two-line member prices (del + ins) wrap inside the minmax(0,1fr) price column. */
@media (max-width: 599px) {
  body.mrdad-minimal { --md-qty-h: 44px; } /* full touch target on phones */
  body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .mrdad-qty a.button.mrdad-qty__add { min-width: 78px; padding: 0 14px 0 12px; }
  body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .mrdad-qty .mrdad-qty__btn { width: 40px; height: 42px; }
  body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .md-product-purchase .price { overflow-wrap: anywhere; }
}
@media (max-width: 359px) {
  body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .mrdad-qty .mrdad-qty__btn { width: 34px; }
  body.mrdad-minimal ul.products li.product .mrdad-qty .mrdad-qty__val { min-width: 22px; }
}

/* ---- Load more: a real spinner while the next shelf-load fetches ---- */
.mrdad-more.is-loading { opacity: .8; cursor: progress; }
.mrdad-more.is-loading::before {
  content: ''; display: inline-block; vertical-align: -3px; margin-right: 10px; width: 16px; height: 16px;
  box-sizing: border-box;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: mrdad-qty-spin .7s linear infinite;
}

/* ---- Product page: option chips for variable products ---- */
body.mrdad-minimal.single-product form.variations_form.mrdad-has-chips table.variations { display: block; width: 100%; margin: 0 0 12px; border: 0; background: none; }
body.mrdad-minimal.single-product form.variations_form.mrdad-has-chips table.variations tbody { display: block; }
body.mrdad-minimal.single-product form.variations_form.mrdad-has-chips table.variations tr { display: block; margin: 0 0 14px; }
body.mrdad-minimal.single-product form.variations_form.mrdad-has-chips table.variations :is(th, td) {
  display: block; padding: 0; border: 0; background: none; text-align: left; line-height: 1.4;
}
body.mrdad-minimal.single-product form.variations_form.mrdad-has-chips table.variations th.label { margin: 0 0 8px; }
body.mrdad-minimal.single-product form.variations_form.mrdad-has-chips table.variations th.label label {
  font-size: 13px; font-weight: 700; color: #253c32; letter-spacing: 0; text-transform: none;
}
body.mrdad-minimal.single-product form.variations_form .mrdad-chips-select {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important;
  padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; border: 0 !important;
  white-space: nowrap !important;
}
body.mrdad-minimal.single-product form.variations_form .mrdad-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
body.mrdad-minimal.single-product form.variations_form .mrdad-chips .mrdad-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; min-width: 64px; margin: 0; padding: 10px 16px;
  color: #253c32; background: #fff; border: 1.5px solid #cfded5; border-radius: 10px; box-shadow: none;
  font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; text-align: center;
  cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
body.mrdad-minimal.single-product form.variations_form .mrdad-chips .mrdad-chip:hover { border-color: #387c69; background: #f5faf6; color: #165443; }
body.mrdad-minimal.single-product form.variations_form .mrdad-chips .mrdad-chip.is-selected {
  color: #165443; background: #eaf3ed; border-color: #165443; box-shadow: inset 0 0 0 1px #165443;
}
body.mrdad-minimal.single-product form.variations_form .mrdad-chips .mrdad-chip.is-selected::before {
  content: ''; flex: none; width: 10px; height: 6px; margin: -3px 0 0;
  border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
body.mrdad-minimal.single-product form.variations_form .mrdad-chips .mrdad-chip:disabled {
  cursor: not-allowed; opacity: .45; background: #f4f6f3; text-decoration: line-through;
}
body.mrdad-minimal.single-product form.variations_form .reset_variations { display: inline-block; margin-top: 8px; font-size: 13px; }
body.mrdad-minimal.single-product form.variations_form .woocommerce-variation-price .price { display: inline-block; }
body.mrdad-minimal.single-product form.variations_form .woocommerce-variation-price.is-pop,
body.mrdad-minimal .mrdad-pdpbar__price.is-pop { animation: mrdad-price-pop .4s ease; }
body.mrdad-minimal.single-product form.variations_form table.variations.is-nudge { animation: mrdad-qty-shake .4s ease; }
@keyframes mrdad-price-pop { 0% { opacity: .2; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }

/* ---- Cart badge bump on count change ---- */
.mrdad-tab__badge.is-bump { animation: mrdad-qty-bump .36s ease; }

/* ---- Error toast: reuses the .mrdad-added pill, with a warning edge ---- */
.mrdad-added.mrdad-qty-toast { border-color: #e2a39b; }
.mrdad-added.mrdad-qty-toast .mrdad-added__line { white-space: normal; }

@media (prefers-reduced-motion: reduce) {
  body.mrdad-minimal ul.products li.product .mrdad-qty :is(.mrdad-qty__val, .mrdad-qty__stepper),
  body.mrdad-minimal ul.products li.product .mrdad-qty.is-error,
  body.mrdad-minimal :is(.md-shelf, .mrdad-browse, .site-main) ul.products li.product .mrdad-qty :is(a.button.mrdad-qty__add, .mrdad-qty__btn),
  body.mrdad-minimal.single-product form.variations_form :is(.woocommerce-variation-price, table.variations, .mrdad-chip),
  body.mrdad-minimal .mrdad-pdpbar__price,
  .mrdad-tab__badge { animation: none !important; transition: none !important; }
  /* the spinner stays as a static partial ring: still says "working", without motion */
  body.mrdad-minimal ul.products li.product .mrdad-qty.is-busy .mrdad-qty__val::after,
  .mrdad-more.is-loading::before { animation: none; }
}