/* Prime Peptides Child — the one product card (inc/product-card.php).
   Shop, category archives and homepage best-sellers. Loaded after
   pp-shop.css and pp-home-el.css, so the frame rules below reset the older
   card frames those sheets give li.product and .pp-home .product. Inner
   rules use the doubled .ppc.ppc (and .ppc__body for the name and price,
   0,4,0) to outrank WooCommerce's
   `.woocommerce-js ul.products li.product h3/strong` (0,3,3). */

/* ---------- Frame ---------- */
.shop-page ul.products li.product.ppc,
.pp-home .products .product.ppc,
.ppc {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--canvas);
  border: 0;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--pp-line), 0 18px 44px -38px rgba(11, 26, 43, .45);
  transition: transform .22s ease, box-shadow .22s ease;
  font-family: var(--sans);
  text-align: left;
}
@media (hover: hover) and (pointer: fine) {
  .shop-page ul.products li.product.ppc:hover,
  .pp-home .products .product.ppc:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: inset 0 0 0 1px var(--pp-pastel), 0 26px 52px -34px rgba(11, 26, 43, .32);
  }
}

/* ---------- Media ---------- */
.ppc.ppc .ppc__media {
  position: relative;
  isolation: isolate;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: var(--pp-sky-strong); /* matches the brand-rollout card renders' pale-blue backdrop (5:6) */
}
.ppc.ppc .ppc__img { position: absolute; inset: 0; display: block; }
.ppc.ppc .ppc__img img,
.ppc.ppc .ppc__img .pp-product-photo {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .ppc:hover .ppc__img img { transform: scale(1.035); }
}
.ppc.ppc .ppc__img .pp-ph { display: grid; place-items: center; width: 100%; height: 100%; background: var(--pp-card-mist); }
.ppc.ppc .ppc__img .pp-ph-vial { height: 72%; width: auto; }

.ppc.ppc .ppc__stock,
.ppc.ppc .ppc__coa {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(11, 26, 43, .06);
  color: var(--pp-navy);
  font: 600 12px/1 var(--sans);
  white-space: nowrap;
  text-decoration: none;
}
.ppc.ppc .ppc__stock { top: 10px; left: 10px; }
.ppc.ppc .ppc__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pp-blue);
  box-shadow: 0 0 0 3px rgba(65, 143, 222, .2);
}
.ppc--low .ppc__dot { background: var(--canvas); box-shadow: inset 0 0 0 2px var(--pp-blue-deep); }
.ppc--out .ppc__dot { background: var(--pp-muted); box-shadow: 0 0 0 3px rgba(98, 113, 128, .16); }
.ppc--out .ppc__stock { color: var(--pp-slate); }
.ppc--testing .ppc__dot { background: var(--pp-pastel); box-shadow: 0 0 0 3px rgba(177, 200, 231, .35); }

.ppc.ppc .ppc__coa { left: 10px; bottom: 10px; gap: 4px; }
.ppc.ppc .ppc__coa svg { width: 11px; height: 11px; color: var(--pp-blue-deep); }
.ppc.ppc .ppc__coa u { color: var(--pp-blue-deep); text-underline-offset: 2px; }
.ppc.ppc a.ppc__coa:hover { background: var(--canvas); }
.ppc.ppc a.ppc__coa:focus-visible { outline: 2px solid var(--pp-blue-deep); outline-offset: 2px; }


/* ---------- Body ---------- */
/* Tight stack like the owner's reference: name, research line, price, then
   the buttons pinned to the bottom so rows stay aligned across the grid. */
.ppc.ppc .ppc__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
  padding: 14px 16px 16px;
}
.ppc.ppc .ppc__body .ppc__name {
  margin: 0;
  padding: 0;
  font: 600 20px/26px var(--sans);
  letter-spacing: -.01em;
  color: var(--pp-navy);
}
.ppc.ppc .ppc__body .ppc__name a { color: inherit; text-decoration: none; }
.ppc.ppc .ppc__body .ppc__name a:hover { color: var(--pp-blue-deep); }
.ppc.ppc .ppc__body .ppc__name a:focus-visible { outline: 2px solid var(--pp-blue-deep); outline-offset: 2px; border-radius: 4px; }
.ppc.ppc .ppc__desc {
  display: flex;
  min-width: 0;
  margin: 2px 0 0;
  font: 400 14px/20px var(--sans);
  color: var(--pp-muted);
  white-space: nowrap;
}
.ppc.ppc .ppc__area { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ppc.ppc .ppc__dose { flex-shrink: 0; white-space: pre; }
.ppc.ppc .ppc__price {
  margin: 6px 0 0;
  font: 500 20px/26px var(--sans);
  letter-spacing: -.01em;
  color: var(--pp-navy);
}
.ppc.ppc .ppc__body .ppc__price strong { display: inline; font-weight: 600; }

.ppc.ppc .ppc__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}
.ppc.ppc .ppc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  font: 500 14px/1 var(--sans);
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.ppc.ppc .ppc__btn--ghost {
  background: var(--canvas);
  color: var(--pp-navy);
  box-shadow: inset 0 0 0 1px var(--pp-line);
}
.ppc.ppc .ppc__btn--ghost:hover { background: var(--pp-mist); color: var(--pp-navy); box-shadow: inset 0 0 0 1px var(--pp-pastel); }
.ppc.ppc .ppc__btn--add,
.ppc.ppc .ppc__btn--notify {
  background: var(--pp-navy);
  color: var(--canvas);
}
.ppc.ppc .ppc__btn--add:hover,
.ppc.ppc .ppc__btn--notify:hover { background: var(--pp-navy-3); color: var(--canvas); }
.ppc.ppc .ppc__btn--notify { background: var(--pp-mist); color: var(--pp-navy); box-shadow: inset 0 0 0 1px var(--pp-line); }
.ppc.ppc .ppc__btn--notify:hover { background: var(--canvas); color: var(--pp-navy); }
.ppc.ppc .ppc__btn:active { transform: translateY(1px); }
.ppc.ppc .ppc__btn:focus-visible { outline: 2px solid var(--pp-blue-deep); outline-offset: 2px; }
.ppc.ppc .ppc__btn.is-loading { opacity: .7; cursor: progress; }
.ppc.ppc .ppc__btn.is-added { background: var(--pp-blue-deep); }

/* ---------- Grids ---------- */
/* Homepage: four across like the Shop, so the buttons keep room. */
@media (min-width: 900px) {
  .pp-home .products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}
@media (min-width: 1280px) {
  .pp-home .products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}

/* Small cards: two across on phones (Shop) and the homepage carousel. */
@media (max-width: 767px) {
  .ppc.ppc .ppc__stock { top: 8px; left: 8px; height: 22px; padding: 0 8px; }
  .ppc.ppc .ppc__coa { left: 8px; bottom: 8px; height: 22px; padding: 0 8px; }
  .ppc.ppc .ppc__body { padding: 10px 10px 12px; }
  .ppc.ppc .ppc__body .ppc__name { font-size: 16px; line-height: 22px; }
  .ppc.ppc .ppc__desc { display: block; font-size: 12px; line-height: 16px; white-space: normal; }
  .ppc.ppc .ppc__area { overflow: visible; }
  .ppc.ppc .ppc__dose { white-space: nowrap; }
  .ppc.ppc .ppc__price { margin-top: 4px; font-size: 16px; line-height: 22px; }
  .ppc.ppc .ppc__btns { gap: 6px; padding-top: 10px; }
  .ppc.ppc .ppc__btn { height: 36px; padding: 0 4px; font-size: 13px; }
}
@media (max-width: 339px) {
  .ppc.ppc .ppc__btns { grid-template-columns: 1fr; }
}

/* Shop on phones: two cards across, as in the approved mockup. */
@media (max-width: 600px) {
  .shop-page ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* v4 polish (2026-09-26): status-coloured stock dots (green in stock,
   amber in testing, grey sold out), a small hover
   lift, and dose-only descriptors on phones. */
.ppc.ppc--in .ppc__dot { background: var(--pass-green-bright); box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }
.ppc.ppc--low .ppc__dot { background: var(--canvas); box-shadow: inset 0 0 0 2px var(--pass-green-bright); }
.ppc.ppc--testing .ppc__dot { background: var(--pp-amber-ink); box-shadow: 0 0 0 3px rgba(183, 121, 31, .2); }
.ppc.ppc--out .ppc__dot { background: var(--pp-muted); box-shadow: 0 0 0 3px rgba(98, 113, 128, .16); }
.ppc.ppc { transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .ppc.ppc:hover { transform: translateY(-4px); box-shadow: 0 20px 48px -28px rgba(6, 20, 38, .28); }
  .ppc.ppc:hover .ppc__img img { transform: scale(1.03); }
}
@media (max-width: 600px) {
  .ppc.ppc .ppc__area,
  .ppc.ppc .ppc__sep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ppc.ppc, .ppc.ppc .ppc__img img { transition: none; }
  .ppc.ppc:hover { transform: none; }
}
/* The description line is a flex row, which drops the spaces around the dot. */
.ppc.ppc .ppc__sep { padding: 0 .35em; }

/* ==========================================================================
   Card v5 on phones (2026-09-27 mobile plan)
   The whole card opens the product. One round 44 px Add button sits on the
   price row; "Details" goes (the card itself is the details link). Text
   floors: 13 px descriptor, 16 px price.
   ========================================================================== */
@media (max-width: 767px) {
  /* Whole card is the link: the name's link stretches over the card */
  .ppc.ppc .ppc__body .ppc__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
  .ppc.ppc .ppc__stock,
  .ppc.ppc .ppc__coa,
  .ppc.ppc .ppc__btns { z-index: 3; }
  .ppc.ppc .ppc__coa { height: 28px; padding: 0 10px; font-size: 12px; }
  .ppc.ppc .ppc__coa::before { content: ""; position: absolute; inset: -8px -4px; }
  .ppc.ppc .ppc__stock { font-size: 12px; }

  .ppc.ppc .ppc__body { position: static; padding: 10px 12px 12px; }
  .ppc.ppc .ppc__desc { font-size: 13px; line-height: 18px; }
  .ppc.ppc .ppc__price { margin-top: 6px; padding-right: 50px; font-size: 16px; line-height: 22px; }
  .ppc.ppc .ppc__price .ppc__from { font-size: 13px; color: var(--pp-muted); }

  .ppc.ppc .ppc__btns { position: absolute; right: 10px; bottom: 10px; display: block; margin: 0; padding: 0; }
  .ppc.ppc .ppc__btn--ghost { display: none; }
  .ppc.ppc .ppc__btn--add,
  .ppc.ppc .ppc__btn--notify {
    position: relative;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    box-shadow: 0 6px 16px -8px rgba(11, 26, 43, .5);
  }
  .ppc.ppc .ppc__btn--add .ppc__add-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ppc.ppc .ppc__btn--add::before,
  .ppc.ppc .ppc__btn--notify::before {
    content: "";
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: var(--ppc-ico) center / contain no-repeat;
    mask: var(--ppc-ico) center / contain no-repeat;
  }
  .ppc.ppc .ppc__btn--add { --ppc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
  .ppc.ppc .ppc__btn--add.is-added { --ppc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background: var(--pass-green-bright); }
  .ppc.ppc .ppc__btn--notify { --ppc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
  .ppc.ppc a.ppc__btn--add:not([data-ppc-add]) { --ppc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
  .ppc.ppc .ppc__btn.is-loading::before { animation: ppc-spin .7s linear infinite; }
  @keyframes ppc-spin { to { transform: rotate(360deg); } }
}
@media (max-width: 339px) {
  .ppc.ppc .ppc__btns { grid-template-columns: none; }
}

/* ---------- Size sheet (pp-card.js) ---------- */
.ppc-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1240;
  background: rgba(6, 20, 38, .44);
  opacity: 0;
  transition: opacity .24s ease;
}
.ppc-sheet-backdrop.is-open { opacity: 1; }
.ppc-sheet {
  position: fixed;
  z-index: 1241;
  left: 50%;
  top: 50%;
  width: min(420px, calc(100vw - 32px));
  padding: 22px 22px 18px;
  border-radius: 22px;
  background: var(--canvas);
  box-shadow: 0 30px 80px -30px rgba(6, 20, 38, .5);
  font-family: var(--sans);
  color: var(--pp-navy);
  opacity: 0;
  transform: translate(-50%, -46%) scale(.97);
  transition: opacity .2s ease, transform .26s cubic-bezier(.23, 1, .32, 1);
}
.ppc-sheet.is-open { opacity: 1; transform: translate(-50%, -50%); }
.ppc-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ppc-sheet__title { margin: 0; font: 600 20px/1.25 var(--sans); letter-spacing: -.01em; color: inherit; }
.ppc-sheet__sub { margin: 4px 0 0; font: 400 14px/1.4 var(--sans); color: var(--pp-muted); }
.ppc-sheet__close { display: grid; place-items: center; width: 44px; height: 44px; margin: -10px -12px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.ppc-sheet__close:hover { background: var(--pp-mist); }
.ppc-sheet__close svg { width: 20px; height: 20px; }
.ppc-sheet__list { display: grid; gap: 8px; }
.ppc-sheet__opt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  margin: 0;
  padding: 0 10px 0 18px;
  border: 1px solid var(--pp-line);
  border-radius: 16px;
  background: var(--canvas);
  color: inherit;
  font: 600 16px/1.2 var(--sans);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, transform .16s cubic-bezier(.23, 1, .32, 1);
}
.ppc-sheet__opt:hover { border-color: var(--pp-navy); }
.ppc-sheet__opt:active { transform: scale(.985); }
.ppc-sheet__opt:focus-visible { outline: 2px solid var(--pp-blue); outline-offset: 2px; }
.ppc-sheet__price { font: 500 15px/1.2 var(--sans); color: var(--pp-slate); }
.ppc-sheet__go { display: inline-flex; align-items: center; justify-content: center; min-width: 76px; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--pp-navy); color: var(--canvas); font: 600 14px/1 var(--sans); }
.ppc-sheet__opt.is-loading { opacity: .7; cursor: progress; }
.ppc-sheet__opt.is-added .ppc-sheet__go { background: var(--pass-green-bright); }
.ppc-sheet__opt.is-out { cursor: not-allowed; background: var(--pp-paper); color: var(--pp-muted); }
.ppc-sheet__opt.is-out .ppc-sheet__size { text-decoration: line-through; }
.ppc-sheet__opt.is-out .ppc-sheet__go { display: none; }
.ppc-sheet__more { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 10px; font: 500 14px/1 var(--sans); color: var(--pp-blue-deep); text-decoration: underline; text-underline-offset: 3px; }
body.ppc-sheet-open { overflow: hidden; }
@media (max-width: 640px) {
  .ppc-sheet {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 26px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    opacity: 1;
    transform: translateY(100%);
    transition: transform .36s cubic-bezier(.32, .72, 0, 1);
  }
  .ppc-sheet.is-open { transform: none; }
  .ppc-sheet::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--pp-line); }
}
@media (prefers-reduced-motion: reduce) {
  .ppc-sheet, .ppc-sheet-backdrop { transition: none; }
}

/* Size sheet: the theme's global button hover/focus painted the row blue
   and hid the dark price (2026-09-28). Keep rows white; hover = sky wash. */
html body .ppc-sheet button.ppc-sheet__opt,
html body .ppc-sheet button.ppc-sheet__opt:focus { background: var(--canvas); color: var(--pp-navy); box-shadow: none; }
html body .ppc-sheet button.ppc-sheet__opt:hover:not(.is-out),
html body .ppc-sheet button.ppc-sheet__opt:focus-visible { background: var(--pp-sky); border-color: var(--pp-blue-deep); color: var(--pp-navy); }
html body .ppc-sheet button.ppc-sheet__opt.is-out { background: var(--pp-paper); color: var(--pp-muted); }
html body .ppc-sheet .ppc-sheet__opt .ppc-sheet__price { color: var(--pp-slate); }

/* ---------- Star meter (2026-09-30) ----------
   Shared by product cards and the PDP reviews section. One role="img" with
   its own label; the fill width is the rating. Prime Blue, never gold. */
.pp-stars {
  --pp-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.83 5.73 6.33.92-4.58 4.46 1.08 6.3L12 17.24l-5.66 2.97 1.08-6.3-4.58-4.46 6.33-.92z'/%3E%3C/svg%3E");
  --pp-star-size: 14px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: calc(var(--pp-star-size) * 5);
  height: var(--pp-star-size);
  vertical-align: -2px;
  background: var(--pp-line);
  -webkit-mask: var(--pp-star) left center / var(--pp-star-size) var(--pp-star-size) repeat-x;
  mask: var(--pp-star) left center / var(--pp-star-size) var(--pp-star-size) repeat-x;
}
.pp-stars__fill { position: absolute; inset: 0 auto 0 0; background: var(--pp-blue-deep); }
@media (forced-colors: active) {
  .pp-stars { forced-color-adjust: none; background: GrayText; }
  .pp-stars__fill { background: CanvasText; }
}

/* Card rating row: shown only from 3 reviews. */
.ppc.ppc .ppc__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font: 500 13px/18px var(--sans);
  color: var(--pp-slate);
}
.ppc.ppc .ppc__rating b { font-weight: 600; color: var(--pp-navy); }
@media (max-width: 767px) {
  .ppc.ppc .ppc__rating { gap: 4px; font-size: 12px; line-height: 16px; }
  .ppc.ppc .ppc__rating .pp-stars { --pp-star-size: 12px; }
}
.ppc.ppc .ppc__rating .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ==========================================================================
   Card v4 (2026-10-04, owner-approved mockup)
   Sizes, a compact − / n / + stepper, live price per vial, a tier bar for
   the multi-vial discount and "Add N · ฿X". Savings read green (owner,
   2026-10-04: green = money saved, alongside lab-verified); buttons stay
   navy. The stepper is always much narrower than Add. Keep this block last.
   ========================================================================== */
.ppc.ppc { --ppc-save: var(--save, #137a49); --ppc-save-fill: var(--save-bright, #16834f); --ppc-save-wash: var(--save-wash, #e7f7ef); --ppc-save-line: var(--save-line, #bfe6cf); }
.ppc.ppc .ppc__body { display: flex; flex-direction: column; flex: 1; }
.ppc.ppc .ppc__from { margin: 3px 0 0; font: 500 13px/18px var(--sans); color: var(--ppc-save); }
.ppc.ppc .ppc__buy { display: flex; flex-direction: column; flex: 1; }
.ppc.ppc .ppc__sizes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-top: 12px; }
html body .ppc.ppc button.ppc__size {
  min-height: 36px; margin: 0; padding: 0 8px; border: 1px solid var(--pp-line); border-radius: 999px;
  background: var(--canvas); color: var(--pp-navy); box-shadow: none; font: 500 13px/1 var(--sans); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
html body .ppc.ppc button.ppc__size:hover:not(:disabled) { background: var(--pp-sky); border-color: var(--pp-pastel); color: var(--pp-navy); }
html body .ppc.ppc button.ppc__size.is-on { background: var(--pp-sky); border-color: var(--pp-blue); color: var(--pp-blue-deep); box-shadow: inset 0 0 0 1px var(--pp-blue); }
html body .ppc.ppc button.ppc__size:disabled { background: var(--pp-paper); color: var(--pp-muted); opacity: .6; text-decoration: line-through; cursor: not-allowed; }
.ppc.ppc .ppc__body .ppc__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; margin-top: 12px; }
.ppc.ppc .ppc__body .ppc__price strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.ppc.ppc .ppc__was { font-size: 13px; color: var(--pp-muted); }
.ppc.ppc .ppc__ladder { margin-top: 10px; }
.ppc.ppc .ppc__tiers,
.ppc.ppc .ppc__tlabels { display: grid; grid-template-columns: 12fr 26fr 36fr 26fr; column-gap: 4px; }
.ppc.ppc .ppc__seg { height: 6px; border-radius: 3px; background: var(--pp-mist); overflow: hidden; }
.ppc.ppc .ppc__seg i { display: block; height: 100%; border-radius: 3px; background: var(--ppc-save-fill); transform: scaleX(0); transform-origin: left center; transition: transform .28s cubic-bezier(.23, 1, .32, 1); }
.ppc.ppc .ppc__tlabels { margin-top: 5px; font: 400 12px/16px var(--sans); color: var(--pp-muted); white-space: nowrap; }
.ppc.ppc .ppc__tlabels .is-on { color: var(--ppc-save); font-weight: 600; }
.ppc.ppc .ppc__hint { margin: 8px 0 0; min-height: 18px; font: 400 13px/18px var(--sans); color: var(--pp-slate); }
.ppc.ppc .ppc__hint b { font-weight: 600; color: var(--ppc-save); }
.ppc.ppc .ppc__actions { display: flex; gap: 8px; align-items: stretch; margin-top: auto; padding-top: 14px; }
.ppc.ppc .ppc__step {
  display: grid; grid-template-columns: 32px 36px 32px; width: 102px; height: 46px; flex: none; box-sizing: border-box;
  border: 1px solid var(--pp-line); border-radius: 10px; overflow: hidden; background: var(--canvas);
}
html body .ppc.ppc .ppc__step > button {
  display: grid; place-items: center; min-width: 0; width: auto; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--pp-navy); box-shadow: none; cursor: pointer; transition: background-color .15s ease;
}
html body .ppc.ppc .ppc__step > button:hover:not(:disabled) { background: var(--pp-sky); color: var(--pp-navy); }
html body .ppc.ppc .ppc__step > button:active:not(:disabled) { background: var(--pp-sky-strong); }
html body .ppc.ppc .ppc__step > button:disabled { opacity: .35; cursor: not-allowed; background: transparent; }
.ppc.ppc .ppc__step svg { width: 16px; height: 16px; transition: transform .12s ease; }
.ppc.ppc .ppc__step > button:active svg { transform: scale(.78); }
.ppc.ppc .ppc__step > output { display: flex; align-items: center; justify-content: center; min-width: 0; border-left: 1px solid var(--pp-line); border-right: 1px solid var(--pp-line); font: 600 15px/1 var(--sans); color: var(--pp-navy); font-variant-numeric: tabular-nums; }
.ppc.ppc .ppc__num { display: inline-block; }
html body .ppc.ppc button.ppc__add {
  position: relative; flex: 1; min-width: 0; height: 46px; margin: 0; padding: 0 12px; border: 0; border-radius: 999px;
  background: var(--pp-navy); color: var(--canvas); box-shadow: none; font: 600 14px/1 var(--sans); white-space: nowrap; cursor: pointer;
  transition: background-color .2s ease;
}
html body .ppc.ppc button.ppc__add:hover { background: var(--pp-navy-3); color: var(--canvas); }
html body .ppc.ppc button.ppc__add.is-loading { opacity: .75; cursor: progress; }
html body .ppc.ppc button.ppc__add.is-added { background: var(--pp-blue-deep); }
.ppc.ppc .ppc__add-label { display: inline-block; }
.ppc.ppc .ppc__save {
  position: absolute; top: -11px; right: 12px; padding: 4px 8px; border: 1px solid var(--ppc-save-line); border-radius: 999px;
  background: var(--ppc-save-wash); color: var(--ppc-save); font: 600 12px/1 var(--sans); pointer-events: none;
}
html body .ppc.ppc a.ppc__notify {
  display: flex; align-items: center; justify-content: center; flex: 1; height: 46px; border-radius: 999px;
  background: var(--canvas); color: var(--pp-navy); box-shadow: inset 0 0 0 1px var(--pp-line); font: 600 14px/1 var(--sans); text-decoration: none;
}
html body .ppc.ppc a.ppc__notify:hover { background: var(--pp-sky); }
.ppc.ppc button:focus-visible,
.ppc.ppc a.ppc__notify:focus-visible { outline: 2px solid var(--pp-blue); outline-offset: 2px; }

/* Press: the whole card dips and springs back. Uses the `scale` property so
   it never fights the hover lift (transform). The photo never moves alone. */
.ppc.ppc.is-pressed { animation: ppc-press .44s linear; }
@keyframes ppc-press {
  0% { scale: 1; animation-timing-function: cubic-bezier(.3, 0, .5, 1); }
  26% { scale: .982; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  64% { scale: 1.005; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100% { scale: 1; }
}
.ppc.ppc .ppc__num.is-up { animation: ppc-up .34s cubic-bezier(.16, 1, .3, 1); }
.ppc.ppc .ppc__num.is-down { animation: ppc-down .34s cubic-bezier(.16, 1, .3, 1); }
@keyframes ppc-up { 0% { transform: translateY(6px) scale(.8); opacity: .3; } 60% { transform: translateY(-2px) scale(1.2); opacity: 1; } 100% { transform: none; } }
@keyframes ppc-down { 0% { transform: translateY(-6px) scale(.8); opacity: .3; } 60% { transform: translateY(2px) scale(1.12); opacity: 1; } 100% { transform: none; } }
.ppc.ppc .ppc__add-label.is-pulse { animation: ppc-pulse .36s cubic-bezier(.16, 1, .3, 1); }
@keyframes ppc-pulse { 40% { transform: scale(1.06); } }

/* The old phone rules made the whole card one link; with real controls in
   the card that overlay would swallow taps, so only photo and name link. */
@media (max-width: 767px) {
  html body .ppc.ppc .ppc__body .ppc__name a::after { content: none; }
  .ppc.ppc .ppc__body .ppc__price { padding-right: 0; }
}

/* Phones, two across: stepper and live total on one row, Add below. */
@media (max-width: 600px) {
  .ppc.ppc .ppc__from { font-size: 12px; line-height: 16px; }
  html body .ppc.ppc button.ppc__size { min-height: 32px; font-size: 12px; }
  .ppc.ppc .ppc__tlabels { font-size: 12px; line-height: 14px; }
  .ppc.ppc .ppc__tlabels [data-ppc-tl] { font-size: 0; }
  .ppc.ppc .ppc__tlabels [data-ppc-tl]::after { content: attr(data-ppc-short); font-size: 12px; }
  .ppc.ppc .ppc__hint { font-size: 12px; line-height: 16px; }
  .ppc.ppc .ppc__step { grid-template-columns: 32px 34px 32px; width: 100px; height: 44px; }
  html body .ppc.ppc button.ppc__add { height: 44px; font-size: 13px; }
}
/* The row follows the card's own width, not the screen's: wide cards
   (homepage carousel on phones) keep − / + and Add on one row; narrow
   two-across Shop cards stack Add under the stepper. */
.ppc.ppc .ppc__body { container-type: inline-size; }
@container (max-width: 229px) {
  .ppc.ppc .ppc__actions { flex-wrap: wrap; }
  html body .ppc.ppc button.ppc__add { flex: 1 0 100%; }
  .ppc.ppc .ppc__hint { min-height: 32px; }
  .ppc.ppc .ppc__from-per { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ppc.ppc.is-pressed, .ppc.ppc .ppc__num.is-up, .ppc.ppc .ppc__num.is-down, .ppc.ppc .ppc__add-label.is-pulse { animation: none; }
  .ppc.ppc .ppc__seg i { transition: none; }
}
/* WooCommerce's added_to_cart handler appends a "View cart" link after the
   button; the drawer already opens, so the link would only break the row. */
.ppc.ppc .ppc__actions .added_to_cart { display: none; }

/* Card v4.1 (owner 2026-10-04): the saving moves from a badge on Add into
   the hint line; homepage lineup cards widen from 312 to 352 px now that
   they carry buying controls; the stepper's focus ring sits inside its cell
   (the cell clips an outer ring to a stray line). */
html body .ppc.ppc .ppc__step > button:focus-visible { outline: 2px solid var(--pp-blue); outline-offset: -3px; border-radius: 8px; }
@media (min-width: 900px) {
  html body .pp-home .h4-row.products { grid-auto-columns: 352px; }
}

/* Card v4.2 (owner 2026-10-04): on narrow two-across phone cards a lone
   stepper left an empty gap beside it. The row now pairs the stepper with
   the live total, and Add sits full width below as "Add to cart". Wide
   cards keep stepper + "Add · total" on one row and never show either. */
.ppc.ppc .ppc__total, .ppc.ppc .ppc__add-short { display: none; }
@container (max-width: 229px) {
  .ppc.ppc .ppc__total {
    display: flex; flex-direction: column; align-items: flex-end; justify-content: center; flex: 1; min-width: 0; margin: 0;
    font: 400 12px/14px var(--sans); color: var(--pp-muted);
  }
  .ppc.ppc .ppc__total strong { display: inline-block; font: 600 16px/20px var(--sans); color: var(--pp-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ppc.ppc .ppc__total strong.is-pulse { animation: ppc-pulse .36s cubic-bezier(.16, 1, .3, 1); }
  .ppc.ppc .ppc__add-label { display: none; }
  .ppc.ppc .ppc__add-short { display: inline-block; }
}
@media (prefers-reduced-motion: reduce) {
  .ppc.ppc .ppc__total strong.is-pulse { animation: none; }
}
/* Smallest phones (375-400 px): two-across cards leave about 140 px inside.
   A slimmer stepper and card padding keep a five-digit total ("฿44,000")
   beside the stepper instead of under its + button. */
@media (max-width: 400px) {
  html body .ppc.ppc .ppc__body { padding-left: 12px; padding-right: 12px; }
}
@container (max-width: 175px) {
  .ppc.ppc .ppc__actions { gap: 6px; }
  .ppc.ppc .ppc__step { grid-template-columns: 26px 30px 26px; width: 82px; }
  .ppc.ppc .ppc__total strong { font-size: 13px; line-height: 18px; }
}

/* Card v4.3 (owner 2026-10-04): every card has the same rows in the same
   place. A single-size product shows its one size as a half-width button,
   the same width as one of two sizes; a product without a "From" line or
   sizes keeps an invisible row so its price lines up with its neighbours.
   On narrow cards a long name stays on one line (full name on hover). */
.ppc.ppc .ppc__sizes { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ppc.ppc .ppc__sizes:has(> :only-child) button.ppc__size.is-on { cursor: default; }
.ppc.ppc .ppc__from.is-empty, .ppc.ppc .ppc__sizes.is-empty { visibility: hidden; }
.ppc.ppc .ppc__sizes.is-empty .ppc__size { display: block; min-height: 36px; border: 1px solid transparent; }
@container (max-width: 229px) {
  .ppc.ppc .ppc__body .ppc__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .ppc.ppc .ppc__sizes.is-empty .ppc__size { min-height: 32px; }
}
/* One shape family (owner 2026-10-04): every control in the card is a pill
   (stock chip, COA chip, size buttons, Add), so the stepper is a pill too,
   without inner divider lines. */
.ppc.ppc .ppc__step { border-radius: 999px; }
.ppc.ppc .ppc__step > output { border-left: 0; border-right: 0; }
html body .ppc.ppc .ppc__step > button:focus-visible { border-radius: 999px; }
/* Card v4.5: a supply's fact line sits in the "From" slot in plain grey
   (green stays for savings); names keep to one line on every card so the
   rows below always line up (full name on hover). */
.ppc.ppc .ppc__from--fact { color: var(--pp-muted); font-weight: 400; }
.ppc.ppc .ppc__body .ppc__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }