/* Reusable pieces: buttons, cards, forms, pills, steppers, breadcrumbs. */

/* ---------- Buttons ---------- */

.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pp-sp-2);
  padding: var(--pp-sp-3) var(--pp-sp-6);
  border: 2px solid transparent;
  border-radius: var(--pp-radius-pill);
  font-size: var(--pp-fs-md);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  transition: background var(--pp-transition), color var(--pp-transition),
              border-color var(--pp-transition), transform var(--pp-transition),
              box-shadow var(--pp-transition);
}

.pp-btn:disabled,
.pp-btn.is-loading {
  opacity: .6;
  pointer-events: none;
}

.pp-btn--primary {
  background: var(--pp-red-gradient);
  /* Size the gradient to the border box. With the default padding-box
     origin it repeats under the transparent 2px border, so the bright top
     of the next tile showed as a light band along the bottom edge, which
     read as the button being cut off. */
  background-origin: border-box;
  color: var(--pp-white);
  box-shadow: var(--pp-shadow-red);
}

.pp-btn--primary:hover {
  background: var(--pp-red-gradient);
  background-origin: border-box; /* the shorthand above resets it */
  color: var(--pp-white);
  filter: brightness(.94);
}

.pp-btn--outline {
  background: transparent;
  border-color: var(--pp-red);
  color: var(--pp-red);
}

.pp-btn--outline:hover {
  background: var(--pp-red);
  color: var(--pp-white);
}

.pp-btn--ghost {
  background: var(--pp-box);
  color: var(--pp-navy);
  box-shadow: var(--pp-shadow-sm);
}

.pp-btn--ghost:hover { color: var(--pp-red); }

.pp-btn--block { width: 100%; }
.pp-btn--lg { padding: var(--pp-sp-4) var(--pp-sp-7); font-size: var(--pp-fs-lg); }

/* Round red plus button used on product cards. */
.pp-btn--round {
  width: 46px;
  height: 46px;
  padding: 0;
  flex: 0 0 auto;
}

/* ---------- Cards ---------- */

.pp-card {
  background: var(--pp-box);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow);
  padding: var(--pp-sp-5);
}

.pp-card--flush { padding: 0; overflow: hidden; }

/* ---------- Card edge ----------
   Every card-like surface gets the same hairline. In the mockups cards sit
   almost on the page colour; this border, not the shadow, separates them. */

.pp-card,
.pp-product,
.pp-cat-tile,
.pp-panel,
.pp-totals,
.pp-cart-row,
.pp-order__card,
.pp-order__row,
.pp-shortcut,
.pp-single__gallery .flex-viewport,
.pp-single__gallery div.images:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper,
.pp-single__summary,
.pp-single__tabs .woocommerce-tabs,
.pp-archive__banner,
.pp-archive__toolbar,
.pp-rx__panel,
.pp-login__panel,
.pp-header__bar,
.pp-footer__bar {
  border: 1px solid var(--pp-edge);
}

/* The order summary already sits inside a panel. */
.pp-panel .pp-totals { border: 0; }

/* ---------- Product card ---------- */

.pp-product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--pp-box);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow);
  padding: var(--pp-sp-4);
  transition: transform var(--pp-transition), box-shadow var(--pp-transition);
}

.pp-product:hover {
  transform: translateY(-2px);
  box-shadow: var(--pp-shadow-lg);
}

/* Square stage with a tinted disc behind the product. The anchor fills the
   stage so the image centres on the disc itself (as an inline anchor it
   sized the image to its own box, which pushed products off centre). */
.pp-product__media {
  position: relative;
  aspect-ratio: 1;
  margin-block-end: var(--pp-sp-4);
}

.pp-product__media::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: var(--pp-tint);
}

.pp-product__media > a {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
}

/* Product shots carry about 9% transparent margin per side; the slight
   scale brings the product to roughly the width of the disc. */
.pp-product__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(1.06);
}

.pp-product__wish {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--pp-radius-pill);
  background: transparent;
  color: var(--pp-red);
  transition: background var(--pp-transition);
}

.pp-product__wish:hover { background: var(--pp-red-soft); }
.pp-product__wish[aria-pressed="true"] svg { fill: currentColor; }

.pp-product__brand {
  display: block;
  margin-block-end: 4px;
  font-size: var(--pp-fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pp-muted);
}

.pp-product__title {
  display: -webkit-box;
  margin: 0 0 4px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--pp-fs-md);
  font-weight: 700;
  color: var(--pp-navy);
}

.pp-product__title a { color: inherit; }
.pp-product__title a:hover { color: var(--pp-red); }

/* One line, like the pack size under each name in the mockup. */
.pp-product__meta {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--pp-fs-sm);
  color: var(--pp-muted);
}

.pp-product__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-sp-3);
  margin-block-start: auto;
  padding-block-start: 5px;
}

.pp-price {
  font-size: var(--pp-fs-xl);
  font-weight: 700;
  color: var(--pp-red);
  white-space: nowrap;
}

/* The ₪ sign a step below the amount: about 18px, but never larger than
   the price itself where that is set smaller (cards on phones, cart). */
.pp-price .woocommerce-Price-currencySymbol { font-size: min(18px, .8em); }

.pp-price del {
  font-size: var(--pp-fs-sm);
  font-weight: 500;
  color: var(--pp-muted);
  margin-inline-end: var(--pp-sp-2);
}

/* Fixed column counts per breakpoint: 4, 3, then 2 on phones. (An
   auto-fill minimum dropped phones to a single column.) */
.pp-product__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pp-sp-5);
}

/* ---------- Forms ---------- */

.pp-field { margin-block-end: var(--pp-sp-4); }

.pp-field__label {
  display: block;
  margin-block-end: var(--pp-sp-2);
  font-size: var(--pp-fs-sm);
  font-weight: 600;
  color: var(--pp-navy);
}

.pp-input,
.pp-select,
.pp-textarea,
.pp-field input[type="text"],
.pp-field input[type="email"],
.pp-field input[type="tel"],
.pp-field input[type="password"],
.pp-field input[type="number"],
.pp-field select,
.pp-field textarea {
  width: 100%;
  padding: var(--pp-sp-3) var(--pp-sp-4);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-sm);
  background: var(--pp-box);
  color: var(--pp-ink);
  transition: border-color var(--pp-transition), box-shadow var(--pp-transition);
}

.pp-input::placeholder,
.pp-textarea::placeholder { color: var(--pp-muted); }

.pp-input:focus,
.pp-select:focus,
.pp-textarea:focus,
.pp-field input:focus,
.pp-field select:focus,
.pp-field textarea:focus {
  outline: none;
  border-color: var(--pp-red);
  box-shadow: 0 0 0 4px var(--pp-red-soft);
}

/* Search box in the header. */
.pp-search {
  position: relative;
  display: flex;
  align-items: center;
}

.pp-search input[type="search"] {
  width: 100%;
  padding: var(--pp-sp-3) var(--pp-sp-5);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-search-bg);
}

.pp-search input[type="search"]:focus {
  outline: none;
  border-color: var(--pp-red);
  background: var(--pp-box);
}

/* ---------- Quantity stepper ---------- */

.pp-qty {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-sp-2);
  padding: var(--pp-sp-1);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-box);
}

.pp-qty__btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--pp-radius-pill);
  background: transparent;
  color: var(--pp-navy);
  font-size: var(--pp-fs-lg);
  line-height: 1;
  transition: background var(--pp-transition), color var(--pp-transition);
}

.pp-qty__btn:hover { background: var(--pp-red-soft); color: var(--pp-red); }
.pp-qty__btn:disabled { opacity: .4; pointer-events: none; }

.pp-qty__input {
  width: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-weight: 700;
  -moz-appearance: textfield;
}

.pp-qty__input::-webkit-outer-spin-button,
.pp-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- Pills / filter chips ---------- */

.pp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pp-sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pp-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-sp-2);
  padding: var(--pp-sp-3) var(--pp-sp-5);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-box);
  box-shadow: var(--pp-shadow-sm);
  font-size: var(--pp-fs-sm);
  font-weight: 600;
  color: var(--pp-navy);
  white-space: nowrap;
  transition: background var(--pp-transition), color var(--pp-transition);
}

.pp-pill:hover { color: var(--pp-red); }

.pp-pill.is-active {
  background: var(--pp-red-gradient);
  color: var(--pp-white);
  box-shadow: var(--pp-shadow-red);
}

/* ---------- Breadcrumb ---------- */

.pp-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pp-sp-2);
  padding-block: var(--pp-sp-4);
  font-size: var(--pp-fs-sm);
  color: var(--pp-muted);
}

.pp-breadcrumb a { color: var(--pp-muted); }
.pp-breadcrumb a:hover { color: var(--pp-red); }
.pp-breadcrumb [aria-current="page"] { color: var(--pp-red); font-weight: 600; }

/* The separator flips with reading direction. */
.pp-breadcrumb__sep { display: inline-flex; color: var(--pp-muted); }
[dir="rtl"] .pp-breadcrumb__sep { transform: scaleX(-1); display: inline-block; }

/* ---------- Badges / notices ---------- */

.pp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-sp-2);
  padding: var(--pp-sp-1) var(--pp-sp-3);
  border-radius: var(--pp-radius-pill);
  font-size: var(--pp-fs-xs);
  font-weight: 700;
}

.pp-badge--success { background: var(--pp-success-soft); color: var(--pp-success); }
.pp-badge--muted { background: var(--pp-tint); color: var(--pp-muted); }

.pp-notice {
  display: flex;
  align-items: center;
  gap: var(--pp-sp-4);
  padding: var(--pp-sp-4) var(--pp-sp-5);
  border-radius: var(--pp-radius);
  background: linear-gradient(90deg, var(--pp-red-soft), rgba(253, 236, 238, .35));
  color: var(--pp-navy);
}

.pp-notice svg { color: var(--pp-red); flex: 0 0 auto; }
.pp-notice strong { display: block; }
.pp-notice p { margin: 0; font-size: var(--pp-fs-sm); color: var(--pp-muted); }

/* ---------- WooCommerce notices ----------
   WooCommerce's own stylesheet is dequeued, so its notices arrived bare and
   picked up the red focus ring (it focuses them after a cart change). */

.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pp-sp-2) var(--pp-sp-3);
  margin: 0 0 var(--pp-sp-4);
  padding: var(--pp-sp-3) var(--pp-sp-4);
  list-style: none;
  border: 1px solid transparent;
  border-radius: var(--pp-radius-xs);
  font-size: var(--pp-fs-sm);
  color: var(--pp-ink);
}

.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus { outline: none; }

.woocommerce-message { background: var(--pp-success-soft); border-color: rgba(30, 158, 90, .18); }
.woocommerce-info { background: var(--pp-tint); border-color: var(--pp-line); }
.woocommerce-error { background: var(--pp-red-soft); border-color: rgba(208, 10, 41, .15); color: var(--pp-red-dark); }

/* Leading status dot. */
.woocommerce-message::before,
.woocommerce-info::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pp-success);
}

.woocommerce-info::before { background: var(--pp-navy); }

.woocommerce-error li { margin: 0; }

/* "Undo?", "View cart" and similar actions read as links at the end. */
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
  font-weight: 600;
  color: var(--pp-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.woocommerce-message .button,
.woocommerce-info .button {
  order: 2;
  margin-inline-start: auto;
  text-decoration: none;
}

/* ---------- WooCommerce default forms and buttons ----------
   Pages the theme doesn't template (lost password, empty cart, order
   received) print WooCommerce's bare markup; with its stylesheet dequeued
   they fell back to browser defaults. */

.pp-entry .woocommerce-form .form-row,
.pp-entry .woocommerce-ResetPassword .form-row {
  float: none;
  width: auto;
  max-width: 460px;
  margin: 0 0 var(--pp-sp-4);
}

.pp-entry .woocommerce-form label,
.pp-entry .woocommerce-ResetPassword label {
  display: block;
  margin-block-end: var(--pp-sp-2);
  font-size: var(--pp-fs-sm);
  font-weight: 600;
  color: var(--pp-navy);
}

.pp-entry .woocommerce-form .required,
.pp-entry .woocommerce-ResetPassword .required { color: var(--pp-red); text-decoration: none; }

.pp-entry .woocommerce-form .input-text,
.pp-entry .woocommerce-ResetPassword .input-text {
  width: 100%;
  height: 50px;
  padding-inline: var(--pp-sp-4);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-sm);
  background: var(--pp-box);
}

.pp-entry .woocommerce-form .input-text:focus,
.pp-entry .woocommerce-ResetPassword .input-text:focus {
  outline: none;
  border-color: var(--pp-red);
  box-shadow: 0 0 0 4px var(--pp-red-soft);
}

.pp-entry .woocommerce-ResetPassword .clear { display: none; }

.pp-entry .woocommerce-Button,
.pp-entry .return-to-shop .button,
.pp-entry .woocommerce-ResetPassword .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--pp-sp-3) var(--pp-sp-6);
  border: 0;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-red-gradient);
  box-shadow: var(--pp-shadow-red);
  font-weight: 700;
  color: var(--pp-white);
  cursor: pointer;
}

.pp-entry .return-to-shop { margin-block-start: var(--pp-sp-4); }

/* ---------- Trust row ---------- */

.pp-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pp-sp-5);
}

.pp-trust__item {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-sp-2);
  font-size: var(--pp-fs-sm);
  font-weight: 600;
  color: var(--pp-navy);
}

.pp-trust__item svg { color: var(--pp-red); flex: 0 0 auto; }

.pp-trust__item + .pp-trust__item {
  padding-inline-start: var(--pp-sp-5);
  border-inline-start: 1px solid var(--pp-divider);
}

/* ---------- Toast ---------- */

.pp-toast {
  position: fixed;
  inset-block-end: var(--pp-sp-5);
  inset-inline-start: 50%;
  z-index: 9999;
  transform: translate(-50%, 16px);
  padding: var(--pp-sp-3) var(--pp-sp-5);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-navy);
  color: var(--pp-white);
  font-size: var(--pp-fs-sm);
  font-weight: 600;
  box-shadow: var(--pp-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pp-transition), transform var(--pp-transition);
}

.pp-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.pp-toast--error { background: var(--pp-red); }

/* ---------- Add button: tick once added (assets/js/main.js) ---------- */

.pp-btn__done { display: none; }
.pp-btn.is-added .pp-icon { display: none; }
.pp-btn.is-added .pp-icon.pp-btn__done { display: block; }

.pp-btn--primary.is-added,
.pp-btn--primary.is-added:hover {
  background: var(--pp-success);
  box-shadow: none;
}

/* ---------- "Added to cart" dialog ---------- */

.pp-added {
  width: min(460px, calc(100% - 2 * var(--pp-gutter)));
  max-width: none;
  margin: auto;
  padding: var(--pp-sp-6) var(--pp-sp-5) var(--pp-sp-5);
  border: 1px solid var(--pp-edge);
  border-radius: var(--pp-radius);
  background: var(--pp-box);
  box-shadow: var(--pp-shadow-lg);
  color: var(--pp-ink);
  text-align: center;
}

.pp-added[open] { animation: pp-added-in .2s ease-out; }

.pp-added::backdrop { background: var(--pp-overlay); }

@keyframes pp-added-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.pp-added__close {
  position: absolute;
  inset-block-start: var(--pp-sp-3);
  inset-inline-end: var(--pp-sp-3);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--pp-radius-pill);
  background: transparent;
  color: var(--pp-muted);
  cursor: pointer;
}

.pp-added__close:hover { background: var(--pp-tint); color: var(--pp-navy); }

.pp-added__badge {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-block-end: var(--pp-sp-3);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-success-soft);
  color: var(--pp-success);
}

.pp-added__badge .pp-icon { stroke-width: 2.4; }

.pp-added__title {
  margin: 0 0 var(--pp-sp-4);
  font-size: var(--pp-fs-xl);
  color: var(--pp-navy);
}

.pp-added__product {
  display: flex;
  align-items: center;
  gap: var(--pp-sp-3);
  margin-block-end: var(--pp-sp-5);
  padding: var(--pp-sp-3);
  border-radius: var(--pp-radius-xs);
  background: var(--pp-tint);
  text-align: start;
}

.pp-added__thumb {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--pp-radius-xs);
  background: var(--pp-box);
  overflow: hidden;
}

.pp-added__thumb:has(img[hidden]) { display: none; }
.pp-added__thumb img { width: 84%; height: 84%; object-fit: contain; }

.pp-added__text {
  margin: 0;
  font-size: var(--pp-fs-sm);
  line-height: 1.5;
  color: var(--pp-ink-soft);
}

.pp-added__text strong { color: var(--pp-navy); }

.pp-added__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pp-sp-3);
}

/* "Continue shopping" wrapped to two lines at the default padding. */
.pp-added__actions .pp-btn {
  padding-inline: var(--pp-sp-4);
  white-space: nowrap;
}

@media (max-width: 420px) {
  .pp-added__actions { grid-template-columns: 1fr; }
  .pp-added__actions .pp-btn--primary { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-added[open] { animation: none; }
}

/* Spinner shown on buttons mid-request. */
.pp-btn.is-loading { position: relative; color: transparent !important; }

.pp-btn.is-loading::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pp-spin .7s linear infinite;
}

/* Outline buttons have a light fill, where the white spinner vanished. */
.pp-btn--outline.is-loading::after {
  border-color: var(--pp-red-soft);
  border-top-color: var(--pp-red);
}

@keyframes pp-spin { to { transform: rotate(360deg); } }

/* ---------- Wishlist page ---------- */

.pp-wishlist [data-pp-wishlist-grid][aria-busy="true"] { min-height: 240px; opacity: .5; }

/* Empty state straight on the page background, no card frame. */
.pp-wishlist__empty {
  display: grid;
  justify-items: center;
  gap: var(--pp-sp-2);
  max-width: 420px;
  margin-inline: auto;
  padding-block: var(--pp-sp-6);
  text-align: center;
}

.pp-wishlist__icon {
  box-sizing: content-box;
  margin-block-end: var(--pp-sp-2);
  padding: var(--pp-sp-5);
  border-radius: 50%;
  background: var(--pp-red-soft);
  color: var(--pp-red);
}

.pp-wishlist__empty h2 { margin: 0; font-size: var(--pp-fs-xl); }
.pp-wishlist__empty p { margin: 0 0 var(--pp-sp-3); color: var(--pp-ink-soft); }

/* ---------- Product grid and card, smaller screens ---------- */

@media (max-width: 1100px) {
  .pp-product__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .pp-product__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pp-sp-3);
  }
}

/* Two cards side by side on a phone are about 165px wide each, so the card
   tightens its padding, type and controls to match. */
@media (max-width: 600px) {
  .pp-product {
    padding: var(--pp-sp-3);
    border-radius: var(--pp-radius-sm);
  }

  .pp-product:hover { transform: none; }

  .pp-product__media { margin-block-end: var(--pp-sp-2); }

  .pp-product__wish { width: 30px; height: 30px; }
  .pp-product__wish svg { width: 18px; height: 18px; }

  .pp-product__brand { font-size: 10px; }

  .pp-product__title {
    font-size: var(--pp-fs-sm);
    line-height: 1.35;
  }

  .pp-product__meta { font-size: 12px; }

  .pp-product__foot {
    gap: var(--pp-sp-2);
    padding-block-start: 5px;
  }

  .pp-product .pp-price { font-size: var(--pp-fs-md); }

  .pp-product .pp-btn--round { width: 36px; height: 36px; }
  .pp-product .pp-btn--round svg { width: 18px; height: 18px; }
}

/* Phones: comfortable tap targets for small controls. */
@media (max-width: 600px) {
  .pp-product__brand { font-size: 11px; }
  .pp-product__wish { width: 34px; height: 34px; }
}

/* The card is a flex column: never let the square image or the price row
   shrink, so engines that size the grid row differently cannot squeeze the
   add-to-cart button past the card's bottom edge. */
.pp-product__media,
.pp-product__foot { flex: none; }

/* Quantity steppers read "- 1 +" left to right in every language, as in the
   mockups; RTL would otherwise put plus on the left. */
.pp-qty,
.woocommerce .quantity { direction: ltr; }