/* Shared components — see THEME-CONVENTIONS.md. Specs from prototypes. */

/* Buttons */
.ss-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--ss-r-btn); font: 600 15px/1 var(--ss-font);
  padding: 15px 30px; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.ss-btn--primary { background: var(--ss-accent); color: #fff; border-radius: var(--ss-r-btn-lg); font-size: 16px; }
.ss-btn--primary:hover { background: var(--ss-accent-hover); color: #fff; }
.ss-btn--dark { background: var(--ss-text); color: #fff; font-size: 13.5px; padding: 11px 18px; }
.ss-btn--dark:hover { background: var(--ss-accent); color: #fff; }
.ss-btn--ghost { background: var(--ss-surface); color: var(--ss-text); border: 1px solid var(--ss-border-strong); font-size: 13.5px; padding: 10px 17px; }
.ss-btn--ghost:hover { border-color: var(--ss-text); color: var(--ss-text); }
.ss-btn--paypal { background: var(--ss-paypal); color: #111; }
.ss-btn--paypal:hover { background: var(--ss-paypal-hover); color: #111; }

/* Defensive: content-area link colour rules (.ss-prose__content a etc.) must never
   repaint button labels. Mirrors each variant at higher specificity. */
.ss-prose__content a.ss-btn--primary, a.ss-btn.ss-btn--primary { color: #fff; }
.ss-prose__content a.ss-btn--dark, a.ss-btn.ss-btn--dark { color: #fff; }
.ss-prose__content a.ss-btn--ghost, a.ss-btn.ss-btn--ghost { color: var(--ss-text); }
.ss-prose__content a.ss-btn--paypal, a.ss-btn.ss-btn--paypal { color: #111; }

/* Pills / chips */
.ss-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--ss-r-pill);
  padding: 8px 16px; font: 600 13px/1 var(--ss-font); background: var(--ss-surface);
  border: 1px solid var(--ss-border-strong); color: var(--ss-text); transition: all .15s ease; }
.ss-pill:hover { border-color: var(--ss-text); }
.ss-pill.is-active { background: var(--ss-text); color: #fff; border-color: var(--ss-text); }

/* Badge (BEST SELLER etc.) */
.ss-badge { position: absolute; top: 10px; left: 10px; background: var(--ss-accent); color: #fff;
  border-radius: 6px; font: 700 11px/1 var(--ss-font); letter-spacing: .04em; padding: 4px 8px; text-transform: uppercase; }

/* Product card */
.ss-product-card { border: 1px solid var(--ss-border); border-radius: var(--ss-r-card); overflow: hidden;
  background: var(--ss-surface); display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease; position: relative; }
.ss-product-card:hover { box-shadow: var(--ss-shadow-card-hover); transform: translateY(-3px); }
.ss-product-card__media { background: var(--ss-panel); display: flex; justify-content: center; padding: 20px; position: relative; }
.ss-product-card__media img { height: 150px; width: auto; object-fit: contain; }
.ss-product-card__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ss-product-card__name { font: 600 14.5px/1.3 var(--ss-font); color: var(--ss-text); text-transform: none; }
.ss-product-card__meta { font: 400 12.5px/1.3 var(--ss-font); color: var(--ss-muted); }
.ss-product-card__price { font: 700 18px/1 var(--ss-font); color: var(--ss-text); }
.ss-product-card__per-serving { font: 500 11.5px/1 var(--ss-font); color: var(--ss-muted); }
.ss-product-card__actions { margin-top: auto; padding-top: 8px; display: flex; gap: 8px; }

/* Warning pill */
.ss-warning-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--ss-warn-bg);
  border: 1px solid var(--ss-warn-border); color: var(--ss-warn-text); border-radius: var(--ss-r-pill);
  font: 600 12px/1.2 var(--ss-font); padding: 5px 12px; }
.ss-warning-pill__icon { width: 13px; height: 13px; flex: none; }

/* Success pill */
.ss-ok-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--ss-ok-bg);
  border: 1px solid var(--ss-ok-border); color: var(--ss-ok-text); border-radius: var(--ss-r-pill);
  font: 600 12.5px/1.2 var(--ss-font); padding: 6px 14px; }

/* Amber notice bar */
.ss-notice-bar { background: var(--ss-notice-bg); border-bottom: 1px solid var(--ss-notice-border);
  color: var(--ss-notice-text); font: 500 12.5px/1.4 var(--ss-font); text-align: center; padding: 7px var(--ss-pad-x);
  display: flex; align-items: center; justify-content: center; gap: 7px; }
.ss-notice-bar__icon { width: 14px; height: 14px; flex: none; }

/* Dark band section */
.ss-dark-band { background: var(--ss-dark-page); color: var(--ss-dark-text); }
.ss-dark-band p { color: var(--ss-dark-body); }
.ss-dark-band a { color: var(--ss-dark-text); }
.ss-dark-band a:hover { color: var(--ss-dark-accent-hover); }

/* Text-order card (dashed) */
.ss-text-order-card { border: 1px dashed var(--ss-border-strong); border-radius: var(--ss-r-panel-sm);
  background: var(--ss-surface); padding: 20px; }
.ss-text-order-card strong { font: 700 18px/1.2 var(--ss-font); }

/* Icons */
.ss-icon { width: 20px; height: 20px; flex: none; }

/* Quantity stepper (woocommerce/global/quantity-input.php — cart + PDP; JS in quantity.js) */
.ss-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--ss-border-strong); border-radius: var(--ss-r-btn);
  background: var(--ss-surface);
}
.ss-qty__btn {
  background: none; border: 0; color: var(--ss-body);
  padding: 7px 12px; display: inline-flex; align-items: center; justify-content: center;
}
.ss-qty__btn:hover { color: var(--ss-accent); }
.ss-qty__icon { width: 12px; height: 12px; }
.ss-qty__input {
  border: 0; width: 34px; padding: 7px 0; text-align: center;
  font: 600 14px var(--ss-font); color: var(--ss-text); background: none;
  -moz-appearance: textfield; appearance: textfield;
}
.ss-qty__input::-webkit-outer-spin-button,
.ss-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ss-qty__input:focus { outline: none; }
.quantity.hidden { display: none; }

/* Goal card */
.ss-goal-card { border: 1px solid var(--ss-border); border-radius: var(--ss-r-panel-sm); background: var(--ss-surface);
  padding: 22px; display: flex; flex-direction: column; gap: 8px; transition: transform .25s ease, box-shadow .25s ease; }
.ss-goal-card:hover { box-shadow: var(--ss-shadow-card-hover); transform: translateY(-3px); }
.ss-goal-card__count { color: var(--ss-accent); font: 600 13.5px/1 var(--ss-font); }

/* Grids */
.ss-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1100px) { .ss-grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .ss-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ss-grid-4 { gap: 12px; } .ss-product-card__media img { height: 110px; } }

/* ---------- Polish layer (extends the prototype's design language) ---------- */

/* Quality floor: visible keyboard focus, brand selection colour */
:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 2px; border-radius: 2px; }
.ss-btn:focus-visible, .ss-pill:focus-visible { outline-offset: 3px; }
::selection { background: var(--ss-accent); color: #fff; }

/* Tactile buttons */
.ss-btn:active { transform: translateY(1px); }

/* Product-card micro-depth: image eases up with the card lift */
.ss-product-card__media img { transition: transform .25s ease; }
.ss-product-card:hover .ss-product-card__media img { transform: scale(1.03) translateY(-2px); }

/* Sticky header gains depth once the page scrolls (class set by polish.js) */
.ss-header.is-scrolled, .ss-header-wrap.is-scrolled { box-shadow: 0 2px 14px rgba(20, 20, 20, .07); }

/* Scroll-reveal for card grids — same rise motif as the prototype hero */
@media (prefers-reduced-motion: no-preference) {
  .ss-reveal { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
  .ss-reveal.is-in { opacity: 1; transform: none; }
}

/* Free-delivery progress (basket summary) */
.ss-freedel { font: 500 12.5px/1.4 var(--ss-font); color: var(--ss-body); margin-bottom: 10px; }
.ss-freedel--hit { color: var(--ss-ok-text); font-weight: 600; }
.ss-freedel__meter { display: block; height: 5px; border-radius: 999px; background: var(--ss-panel); margin-top: 6px; overflow: hidden; }
.ss-freedel__fill { display: block; height: 100%; border-radius: 999px; background: var(--ss-accent); transition: width .3s ease; }

/* PDP stock + dispatch line */
.ss-buy__stock { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ss-buy__dispatch { font: 500 12.5px/1.4 var(--ss-font); color: var(--ss-muted); }

/* Footer payment marks */
.ss-footer__pay-mark { display: inline-block; vertical-align: middle; margin-left: 4px; width: 34px; height: 21px; }

/* Recently viewed strip */
.ss-recent { margin-top: 44px; }
.ss-recent__title { font: 700 var(--ss-fs-h2-sm)/1.1 var(--ss-font-display); text-transform: uppercase; margin-bottom: 14px; }
.ss-recent__row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.ss-recent__card { flex: 0 0 150px; border: 1px solid var(--ss-border); border-radius: var(--ss-r-card-sm); background: var(--ss-surface); padding: 10px; text-align: center; }
.ss-recent__card img { height: 78px; width: auto; object-fit: contain; margin: 0 auto 8px; }
.ss-recent__name { font: 600 12px/1.3 var(--ss-font); color: var(--ss-text); display: block; }
.ss-recent__price { font: 700 13px/1.2 var(--ss-font); color: var(--ss-text); }