/**
 * Pet Presence POD - Pet Photo Uploader styles (v6.0)
 *
 * The minimal in-page uploader that replaces the old Customize-modal flow.
 * Lives directly above the WC "Add to Cart" button on every product page
 * that has a _supplier_product_id meta.
 */

.pp-pet-uploader {
  margin: 16px 0 20px;
  padding: 16px;
  border: 1px solid var(--pp-outline, #cfd6dc);
  border-radius: 12px;
  background: var(--pp-surface-container-low, #f5f7f9);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
}

.pp-pet-uploader__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--pp-on-surface, #1a1c1e);
}

.pp-pet-uploader__label .material-symbols-outlined {
  font-size: 20px;
  color: var(--pp-primary, #006496);
}

.pp-pet-uploader__hint {
  font-size: 13px;
  color: var(--pp-on-surface-variant, #5b6266);
  margin: 0;
}

.pp-uploader-pick {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--pp-primary, #006496);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  width: 100% !important;
  text-align: center;
  transition: background 0.15s;
  box-sizing: border-box;
}

.pp-uploader-pick:hover {
  background: var(--pp-primary-dark, #004a73);
}

.pp-uploader-pick input[type="file"] {
  display: none;
}

.pp-uploader-thumb {
  display: none;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--pp-primary-container, #74c0fc);
  background: #fff;
}

.pp-uploader-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pp-uploader-status { display: none !important;
  font-size: 13px;
  color: var(--pp-on-surface-variant, #5b6266);
  min-height: 18px;
}

.pp-uploader-status--ok {
  color: var(--pp-success, #006b54);
  font-weight: 500;
}

.pp-uploader-status--err {
  color: var(--pp-error, #ba1a1a);
}

/* v6.3: hide the native file input so the browser's localized
   "选择文件 / 未选择任何文件" UI does not show. The visible
   "Choose photo" label is what the user clicks. */
.pp-uploader-file-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


.pp-uploader-slot {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 4px 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.pp-uploader-slot + .pp-uploader-slot {
  border-top: 0 !important;
  margin-top: 0 !important;
  padding-top: 4px !important;
}
.pp-uploader-slot + .pp-uploader-slot {
  border-top: 2px solid #94a0aa;
  margin-top: 0;
  padding-top: 12px;
  margin-bottom: 0;
}
.pp-uploader-slot__label { display: none !important; }

.pp-pet-uploader[hidden] { display: none !important; }

/* WC Add to Cart shows disabled state while uploader is empty */
form.cart button.single_add_to_cart_button[disabled],
form.cart button.single_add_to_cart_button.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* v6.1: variant picker + shipping summary */
.pp-variant-picker {
  margin: 0 0 20px;
  padding: 16px;
  border: 1px solid var(--pp-outline, #cfd6dc);
  border-radius: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
}

.pp-variant-picker__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--pp-on-surface, #1a1c1e);
}

.pp-variant-picker__label .material-symbols-outlined {
  font-size: 20px;
  color: var(--pp-primary, #006496);
}
.pp-variant-picker__count {
  margin-left: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--pp-on-surface-variant, #5a6168);
  background: var(--pp-surface-container, #edeeef);
  border-radius: 10px;
  text-transform: lowercase;
  letter-spacing: 0.2px;
}

.pp-variant-picker__select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--pp-outline, #cfd6dc);
  border-radius: 8px;
  background: var(--pp-surface-container-low, #f5f7f9);
  font-size: 14px;
  color: var(--pp-on-surface, #1a1c1e);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6266' d='M6 8L0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.pp-variant-picker__select:focus {
  outline: 2px solid var(--pp-primary, #006496);
  outline-offset: 1px;
}

.pp-price-summary {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--pp-outline, #cfd6dc);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pp-price-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--pp-on-surface-variant, #5b6266);
}

.pp-price-row__val {
  font-weight: 500;
  color: var(--pp-on-surface, #1a1c1e);
}

.pp-price-row--total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--pp-outline, #cfd6dc);
  font-size: 16px;
  color: var(--pp-primary, #006496);
}

.pp-price-row--total strong {
  font-weight: 700;
  color: var(--pp-primary, #006496);
}

/* v6.4: variant radio chips (Shopaw style for <=5 variants) */
.pp-variant-picker__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pp-variant-picker__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 10px 14px;
  border: 1px solid var(--pp-outline, #cfd6dc);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  color: var(--pp-on-surface, #1a1c1e);
  transition: border-color .15s, background .15s;
  user-select: none;
}
.pp-variant-picker__chip:hover {
  border-color: var(--pp-primary, #006496);
}
.pp-variant-picker__chip input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}
.pp-variant-picker__chip.is-selected {
  /* v6.7.40 (G63): keep light blue background tint for selected state
     — user feedback wants colored background (not white + check icon).
     Check icon is removed (HD-style chip uses just background tint).
     The later .is-selected block at line 560 is the one that wins in
     cascade, this rule stays for parity / documentation. */
  position: relative;
  border-color: var(--pp-primary, #006496);
  background: #e8f0f7;
  color: var(--pp-primary, #006496);
  font-weight: 600;
}

/* v6.4: custom options renderer (Pendant Color / Keychain Color / Mug Capacity / text) */
.pp-custom-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 20px;
  padding: 16px;
  border: 1px solid var(--pp-outline, #cfd6dc);
  border-radius: 12px;
  background: #fff;
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
}
.pp-custom-option {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pp-custom-option__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--pp-on-surface, #1a1c1e);
}
.pp-required {
  color: var(--pp-error, #ba1a1a);
  margin-left: 2px;
}
.pp-custom-option__radios,
.pp-custom-option__swatches,
.pp-custom-option {
  margin-bottom: 20px;
}
.pp-custom-option__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
/* v6.7.77: image chip styling. With image = 80x80 rounded-2xl. Without image (hex-only color) = 32x32 round circle, brand-blue selected ring. */
.pp-custom-option__img:has(img) {
  width: 80px !important;
  height: 80px !important;
  min-width: 80px;
  min-height: 80px;
  border-radius: 16px !important;
  padding: 0 !important;
  background: #fff;
  overflow: hidden;
}
.pp-custom-option__img:has(img) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* v6.7.86: HD-style color chip label - dark tooltip ABOVE chip on hover/selected, like HD ant-tooltip. */
.pp-custom-option__color-swatch {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.pp-custom-option__img-label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  font-size: 12px;
  color: #fff;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  background: #1f1f1f;
  padding: 5px 9px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.20);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 10;
  user-select: none;
}
.pp-custom-option__color-swatch .pp-custom-option__img-label::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1f1f1f;
}
.pp-custom-option__color-swatch .pp-custom-option__img:not(:has(img)):hover ~ .pp-custom-option__img-label,
.pp-custom-option__color-swatch .pp-custom-option__img:not(:has(img)).is-selected ~ .pp-custom-option__img-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Hex-only color chips (no img tag): HD-style 40x40 round circles, transparent default border, brand-blue 3px outline on selected, subtle shadow + hover transform. */
.pp-custom-option__img:not(:has(img)) {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50% !important;
  padding: 0 !important;
  border: 2px solid transparent !important;
  outline: 3px solid transparent !important;
  outline-offset: 0;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
  cursor: pointer;
  position: relative;
  transition: outline-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pp-custom-option__img:not(:has(img)):hover {
  transform: scale(1.08);
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.10);
}
.pp-custom-option__img:not(:has(img)).is-selected {
  outline-color: var(--pp-primary, #006496) !important;
}
.pp-custom-option__img:not(:has(img)) input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.pp-custom-option:last-child {
  margin-bottom: 0;
}
.pp-custom-option__images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.pp-custom-option__chip,
.pp-custom-option__swatch,
.pp-custom-option__img {
  position: relative;
  cursor: pointer;
}
.pp-custom-option__chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--pp-outline, #cfd6dc);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  color: var(--pp-on-surface, #1a1c1e);
  transition: border-color .15s, background .15s;
}
.pp-custom-option__chip:hover { border-color: var(--pp-primary, #006496); }
.pp-custom-option__chip.is-selected {
  border-color: var(--pp-primary, #006496);
  background: var(--pp-primary-container, #e8f0f7);
  font-weight: 500;
}
.pp-custom-option__chip input,
.pp-custom-option__swatch input,
.pp-custom-option__img input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.pp-custom-option__swatch {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 2px solid var(--pp-outline, #cfd6dc);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  outline: 0;
}
.pp-custom-option__swatch:hover {
  /* Shopaw-style hover: subtle border darken + slight lift */
  border-color: #555;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.10);
}
.pp-custom-option__swatch:focus-visible {
  outline: 2px solid var(--pp-primary, #006496);
  outline-offset: 2px;
}
.pp-custom-option__swatch.is-selected {
  /* v6.10: themed via --pp-primary */
  border-color: var(--pp-primary, #006496);
  border-width: 2px;
  box-shadow: 0 0 0 2px #fff inset, 0 2px 6px rgba(0,0,0,0.18);
  transform: scale(1.08);
}
.pp-custom-option__swatch.is-selected:hover {
  border-color: var(--pp-primary, #006496);
  transform: scale(1.08) translateY(-1px);
}
.pp-custom-option__img {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border: 2px solid var(--pp-outline, #cfd6dc);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  color: var(--pp-on-surface, #1a1c1e);
  flex: 1 1 calc(50% - 8px);
  min-width: 140px;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.pp-custom-option__img img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* v6.7.29 (p595 G15e): Photo Upload Guide help link inside
   Group widget — add vertical breathing room so the link doesn't
   sit glued to the "Click and upload photos" button above it. */
.pp-custom-option--help {
  margin-top: 10px;
}
.pp-custom-option--help .pp-help-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pp-primary, #006496);
  text-decoration: underline;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.pp-custom-option--help .pp-help-link:hover {
  color: #004e75;
}


/* v6.7.29 (p595 G15b): Ready-Made Animal image swatches (inside
   a Group widget) — match HandDrop public SPA style: 74x74 pure
   image chip, no padding, rounded-2xl, gap 12px, lime-500 border
   on selection. The default .pp-custom-option__img above is
   designed for "image + text" cards and looks ugly without text. */
.pp-custom-option__child .pp-custom-option__images {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pp-custom-option__child .pp-custom-option__img {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 74px;
  height: 74px;
  min-width: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.pp-custom-option__child .pp-custom-option__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pp-custom-option__child .pp-custom-option__img:hover {
  border-color: rgba(0, 0, 0, 0.2);
}
.pp-custom-option__child .pp-custom-option__img.is-selected {
  border-color: var(--pp-primary, #006496); /* OUR brand blue, not HD lime-500 */
  box-shadow: 0 0 0 3px rgba(0, 100, 150, 0.18);
}
.pp-custom-option__img.is-selected {
  border-color: #111;
  border-width: 2px;
  background: #fff;
  color: #111;
  font-weight: 600;
  box-shadow: 0 0 0 1px #111;
}
.pp-custom-option__select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--pp-outline, #cfd6dc);
  border-radius: 8px;
  background: var(--pp-surface-container-low, #f5f7f9);
  font-size: 14px;
}
.pp-custom-option__text {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--pp-outline, #cfd6dc);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
}

/* v6.7: Variant card with image + SKU under chip name (Shopaw style)
   - horizontally compact: image 50x50, name on top right, sku gray under name
   - lays out as a horizontal row so label above has room */
.pp-variant-picker__radios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 540px;
}
@media (max-width: 600px) {
  .pp-variant-picker__radios {
    grid-template-columns: 1fr;
  }
}
.pp-variant-picker__chip {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--pp-outline, #cfd6dc);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: left;
}
.pp-variant-picker__chip-img {
  display: none;  /* hide thumbnail — Shopaw chip style is text-only */
}
.pp-variant-picker__chip-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pp-variant-picker__chip-name {
  grid-area: name;
  font-weight: 600;
  font-size: 13px;
  color: #1a1c1e;
  line-height: 1.3;
  word-break: break-word;
}
.pp-variant-picker__chip-sku {
  grid-area: sku;
  font-size: 10.5px;
  color: #6b7480;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.1px;
  word-break: break-all;
  line-height: 1.25;
}
.pp-variant-picker__chip-price {
  display: block;
  grid-area: price;
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-primary, #006496);
  line-height: 1.3;
  margin-top: 2px;
}
.pp-variant-picker__chip.is-selected {
  /* v6.7.40 (G63): selected variant chip uses light blue background
     tint (#e8f0f7 = --pp-primary-container) instead of white +
     inset box-shadow + check icon. User feedback: "把打勾按钮去掉,
     直接给它加上颜色, 也就是有底纹色的区别". HD-style selected
     chip is just a tinted background, no extra icons. */
  border-color: var(--pp-primary, #006496);
  background: #e8f0f7;
  color: var(--pp-primary, #006496);
  font-weight: 600;
}

/* v6.7: Font style preview row (Shopaw renders "Abc" sample per font) */
.pp-custom-option__fonts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 4px;
}
.pp-custom-option__font {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  width: 50px;
  height: 50px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.pp-custom-option__font:hover {
  transform: scale(1.08);  /* v6.7.114 (p102): HD hover scale-110 effect (CSS approximation scale 1.08) */
  border-color: #84cc16;  /* lime-500 */
  box-shadow: 0 0 0 2px #d9f99d;  /* ring lime-200 */
}
.pp-custom-option__font-sample {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  font-size: 24px;  /* v6.7.114 (p102): HD chip is 50x50 + 24px Abc, previous 16px was too small to read. */
}
.pp-custom-option__font-sample img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.pp-custom-option__font-label {
  display: none;  /* v6.7.113 (p102): HD 不用 label, title tooltip on hover */
}
.pp-custom-option__font.is-selected,
.pp-custom-option__font.is-selected:hover {
  border-color: #84cc16;  /* lime-500 */
  background: #fff;
  box-shadow: 0 0 0 2px #d9f99d;  /* ring lime-200 */
  transform: scale(1.08);  /* keep selected scale on hover */
}
.pp-custom-option__font.is-selected .pp-custom-option__font-label {
  color: #111;
  font-weight: 600;
}
.pp-custom-option__font input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* v6.7: Single product gallery — small thumbnails 1/8 main width + green active border
   (Shopaw style: 1/12 to 1/8 main image, green highlight on selected) */
.woocommerce div.product div.images {
  width: 100%;
}
.woocommerce div.product div.images .flex-control-thumbs {
  display: grid;
  /* Fixed 5 columns (Shopaw reference). Each thumbnail stretches to fill
     its column, so the row always fills the main image width and stays
     compact regardless of how many images the product has. Extra rows
     wrap naturally (e.g. 18 imgs = 4 rows of 5). */
  /* Auto-fill at minmax 56px so the row fits 9-10 thumbnails
     (Shopaw reference) and stretches to fill the gallery width. */
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 5px;
  margin-top: 10px;
  width: 100%;
  max-width: none;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.woocommerce div.product div.images .flex-control-thumbs li {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: block;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
  width: 100% !important;
  height: auto !important;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.85;
  transition: all 0.15s;
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li:hover img {
  border-color: var(--pp-primary, #006496);
  opacity: 1;
}

.pp-custom-option__text-count {
  display: block;
  font-size: 12px;
  color: var(--pp-on-surface-variant, #5b6266);
  text-align: right;
  margin-top: 2px;
}

/* v6.7: Size Chart trigger icon + modal */
.pp-size-chart-trigger {
  position: absolute;
  top: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--pp-outline, #cfd6dc);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pp-on-surface-variant, #5b6266);
  cursor: pointer;
  padding: 0;
}
.pp-size-chart-trigger:hover {
  color: var(--pp-primary, #006496);
  border-color: var(--pp-primary, #006496);
}

/* v6.7.27: Examples of Pet Photos is rendered as a plain text link
   (not a button). It opens the size-chart modal via data-pp-chart, so
   users get a popup on click while the visual treatment stays inline
   text — no button chrome. */
.pp-help-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pp-primary, #006496);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  padding: 4px 0;
}
.pp-help-link:hover {
  text-decoration: underline;
  color: var(--pp-primary-dark, #004a73);
}
.pp-help-link svg { flex-shrink: 0; }

/* v6.7.27: text-label variant of the size-chart trigger (e.g.
   "Examples of Pet Photos"). Overrides the icon-only absolute-positioned
   default so the text label renders inline next to the (i) icon. */
.pp-size-chart-trigger--with-text {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  height: auto;
  padding: 10px 18px;
  background: var(--pp-primary, #006496);
  color: #fff;
  border-color: var(--pp-primary, #006496);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.2;
}
.pp-size-chart-trigger--with-text:hover {
  background: var(--pp-primary-dark, #004a73);
  border-color: var(--pp-primary-dark, #004a73);
  color: #fff;
}
.pp-custom-option--image {
  position: relative;
}
.pp-size-chart-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.pp-size-chart-modal.is-open {
  display: flex;
}
.pp-size-chart-modal__panel {
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  max-width: 720px;
  width: 90%;
  max-height: 86vh;
  overflow: auto;
  position: relative;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.pp-size-chart-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: 0;
  font-size: 24px;
  cursor: pointer;
  color: #5b6266;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-size-chart-modal__close:hover {
  background: #f0f1f2;
}
.pp-size-chart-modal h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
}
.pp-size-chart-modal__body {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-top: 16px;
}
.pp-size-chart-modal__body > div {
  flex: 1;
  text-align: center;
}
.pp-size-chart-modal__body svg {
  width: 100%;
  max-width: 200px;
  border: 1px solid #e3e6e8;
  border-radius: 8px;
  padding: 8px;
  background: #fafbfc;
}
.pp-size-chart-modal__body p {
  margin: 8px 0 0;
  font-size: 14px;
  color: #5b6266;
}
.pp-size-chart-modal__body:has(.pp-size-chart-modal__figure) {
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pp-size-chart-modal__figure img {
  display: block;
  max-width: min(560px, 100%);
  max-height: 70vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* v6.7: Tooltip (i) icon */
.pp-custom-option__label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pp-info-tooltip {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pp-on-surface-variant, #5b6266);
  color: #fff;
  border: 0;
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  font-family: serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  position: relative;
}
.pp-info-tooltip:hover {
  background: var(--pp-primary, #006496);
}
.pp-info-tooltip::after {
  content: attr(data-pp-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1c1e;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  font-family: inherit;
  white-space: normal;
  width: 220px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  z-index: 100;
  line-height: 1.4;
}
.pp-info-tooltip:hover::after,
.pp-info-tooltip.is-open::after {
  opacity: 1;
  pointer-events: auto;
}

.pp-custom-option__date {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--pp-outline, #cfd6dc);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--pp-on-surface, #1a1c1e);
  background: #fff;
}

/* v6.7: 4-segment pricing breakdown */
.pp-pricing-breakdown {
  background: #f6f7f8;
  border: 1px solid var(--pp-outline, #cfd6dc);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.pp-pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--pp-on-surface-variant, #5b6266);
}
.pp-pricing-value {
  color: var(--pp-on-surface, #1a1c1e);
  font-weight: 500;
}
.pp-pricing-row--retail {
  background: #d4f5e2;
  border-radius: 6px;
  padding: 6px 8px;
  margin-top: 4px;
  color: #006d3c;
  font-weight: 600;
}
.pp-pricing-row--retail .pp-pricing-value {
  color: #006d3c;
  font-size: 15px;
  font-weight: 700;
}

/* v6.7: Product title styling — match theme (Storefront primary blue),
   shrink from default 2em to 1.4em, drop the heavy black weight. */
/* Beat Storefront's .entry-title rule (which sets 2em/800/#191c1d)
   by combining both classes with !important on the same specificity. */
.woocommerce div.product .product_title,
.woocommerce div.product .entry-title,
.woocommerce div.product h1.product_title.entry-title {
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: #1C1917 !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;     /* v6.9.2: handsdrop-matching — was -0.02em too tight */
  margin: 0 0 1rem !important;          /* v6.9.2: handsdrop-matching — was 0.5rem too tight */
}

/* v6.7: Hide the default single price — we render the 4-segment
   Shopaw cost / Shipping / Retail panel below via the pp-pricing-breakdown
   block. Showing both duplicates the price and looks inconsistent. */
.woocommerce div.product .summary .price {
  display: none !important;
}

/* v6.7.110 (P99 Bangle): simple 商品的 .summary .price 不能被 hide — 替代块 (pp-pricing-breakdown / pp-selected-price) 只在 variable 商品渲染, simple 商品 hide 了 .summary .price 就没有任何价格显示. 修法: product-type-simple 类要 bypass 这个 hide rule. */
.woocommerce div.product.product-type-simple .summary .price {
  display: block !important;
}

/* v6.7: "Contains N SKUs" line under the product title.
   Shopaw style: subtle gray, smaller than the title. */
.woocommerce div.product .summary .pp-sku-count {
  font-size: 0.875rem;
  color: var(--pp-on-surface-variant, #5b6266);
  margin: 4px 0 12px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* v6.7: Live "Item price: $X.XX" line under "Contains N SKUs".
   Updates on variant change. */
.woocommerce div.product .summary .pp-selected-price {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pp-on-surface, #1a1c1e);
  margin: 4px 0 12px;
}
.woocommerce div.product .summary .pp-selected-price [data-pp-selected-price] {
  color: var(--pp-primary, #006496);
  margin-left: 4px;
}

/* v6.7: Single shared upload area for all pet photo slots. Slots stack
   vertically inside one dashed box, separated by thin dividers. */
#pp-pet-uploader-slots {
  display: flex;
  flex-direction: column;
  border: 1px dashed var(--pp-outline, #cfd6dc);
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
}

/* v6.7 / v6.15: Color swatches show a real product thumbnail (Shopaw style).
   overflow:visible so tooltip ::before can escape; original tint overlay (::after)
   uses transparent fallback when --pp-swatch-color is unset (current PHP path),
   so no visual difference from overflow:hidden. */
.pp-custom-option__swatch {
  position: relative;
  overflow: visible;
  background-color: var(--pp-swatch-color, #e0e0e0);
}
.pp-custom-option__swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pp-swatch-color, transparent);
  mix-blend-mode: multiply;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity .15s;
}
.pp-custom-option__swatch:hover::after { opacity: 0.7; }
.pp-custom-option__swatch.is-selected::after { opacity: 0.65; }

/* v6.7: Shipping row subtext ("Excludes VAT · 6-12 business days") */
.pp-price-row__hint {
  display: block;
  font-size: 11px;
  color: var(--pp-on-surface-variant, #5b6266);
  font-weight: 400;
  margin-top: 2px;
  letter-spacing: 0.01em;
}

/* v6.7: Examples of Pet Photos link (Shopaw style) */
.pp-pet-uploader__examples {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pp-primary, #006496);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  margin: 4px 0 8px;
}
.pp-pet-uploader__examples:hover {
  text-decoration: underline;
}
.pp-pet-uploader__examples .material-symbols-outlined {
  font-size: 18px;
}

/* v6.7: Hide default quantity selector + category label
   (Shopaw SPA doesn't have either - quantity comes from SKU axis,
   category is internal to dropshipper) */
.woocommerce div.product form.cart .quantity,
.single-product div.product form.cart .quantity {
  display: none !important;
}
.woocommerce div.product .product_meta,
.single-product div.product .product_meta {
  display: none !important;
}


/* v6.7.x: C. Sold-out badge (above add-to-cart when _supplier_sold_out = 1) */
.pp-sold-out-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin: 12px 0;
  background: #e8f0f7;
  border: 1px solid #b6c9d8;
  border-radius: 10px;
  color: var(--pp-primary, #006496);
  font-size: 14px;
  font-weight: 500;
}
.pp-sold-out-badge .material-symbols-outlined { font-size: 20px; }
.pp-sold-out-badge strong { font-weight: 700; }
.pp-sold-out-badge__hint {
  color: #6b8aa3;
  font-weight: 400;
  font-size: 12px;
  margin-left: 4px;
}

/* v6.7.x: D. Country selector + shipping estimate */
.pp-country-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 8px 0 12px;
  background: var(--pp-surface-container-low, #f5f7f9);
  border: 1px solid var(--pp-outline, #cfd6dc);
  border-radius: 10px;
  font-size: 13px;
  color: var(--pp-on-surface-variant, #5a6168);
}
.pp-country-selector .material-symbols-outlined { font-size: 18px; }
.pp-country-selector select {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--pp-outline, #cfd6dc);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  color: var(--pp-on-surface, #1a1c1e);
  cursor: pointer;
}
.pp-country-selector__hint { color: var(--pp-on-surface-variant, #5a6168); font-size: 12px; }

/* v6.7.x: E. Shipping timeline (4 steps) */
.pp-shipping-timeline {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 4px;
  margin: 16px 0;
  padding: 14px 8px;
  background: var(--pp-surface-container-low, #f5f7f9);
  border-radius: 12px;
}
.pp-shipping-timeline__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  position: relative;
  color: var(--pp-on-surface-variant, #5a6168);
  font-size: 11px;
  font-weight: 500;
}
.pp-shipping-timeline__step .material-symbols-outlined {
  font-size: 20px;
  color: var(--pp-primary, #006496);
  background: #fff;
  border: 2px solid var(--pp-primary, #006496);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.pp-shipping-timeline__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  background: var(--pp-primary, #006496);
  z-index: 0;
}
.pp-shipping-timeline__label { line-height: 1.2; }


/* v6.9: Handsdrop-style input fields across the product page (text, textarea, select).
   Standard Storefront / WooCommerce inputs are flat 2px-padded. Bring them up
   to the modern pill-lite style used on handsdrop.com so the product page
   feels consistent with the brand. */
/* product page text inputs — single product */
.woocommerce div.product input[type=text],
.woocommerce div.product input[type=email],
.woocommerce div.product input[type=number],
.woocommerce div.product input[type=search],
.woocommerce div.product textarea,
.woocommerce div.product select,
.woocommerce div.product .pp-custom-option input[type=text],
.woocommerce div.product .pp-custom-option textarea,
.woocommerce div.product .pp-custom-option select,
.pp-country-selector select,
.pp-pet-uploader input[type=text],
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border-radius: 16px !important;        /* v6.9.2: handsdrop-matching (was 12px) */
  padding: 12px 16px !important;
  border: 1px solid rgba(28, 25, 23, 0.18) !important;
  background: #fff !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: #1C1917 !important;
  transition: border-color .15s, box-shadow .15s;
}
.woocommerce div.product input[type=text]:focus,
.woocommerce div.product textarea:focus,
.woocommerce div.product select:focus,
.pp-country-selector select:focus,
.woocommerce div.product .pp-custom-option input[type=text]:focus,
.woocommerce div.product .pp-custom-option textarea:focus,
.woocommerce div.product .pp-custom-option select:focus {
  border-color: #5C2A18 !important;
  box-shadow: 0 0 0 3px rgba(92, 42, 24, 0.12) !important;
  outline: none !important;
}

/* v6.10: p94 gallery thumb sizing — match HandsDrop 100x100 + 20px gap.
   Scoped to body.postid-94 to avoid affecting other products. */
body.single-product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 13px !important;
  padding: 0 !important;
  margin: 10px 0 16px !important;
  width: 100% !important;
  max-width: none !important;
}
body.single-product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  float: none !important;
  list-style: none !important;
  padding: 0 !important;
  aspect-ratio: 1 / 1 !important;
}
body.single-product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 8px !important;
}
body.single-product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* v6.10: p94 gallery prev/next arrows — match HandsDrop (40px circle, white/80% bg) */
body.single-product .pp-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(4px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background 0.15s ease;
  color: #1C1917;
  padding: 0;
}
body.single-product .pp-gallery-arrow:hover {
  background: #ffffff;
}
body.single-product .pp-gallery-arrow--prev { left: 8px; }
body.single-product .pp-gallery-arrow--next { right: 8px; }
body.single-product .pp-gallery-arrow .material-symbols-outlined {
  font-size: 24px;
  line-height: 1;
}
/* Anchor the buttons to the actual main image box (flex-viewport), not the gallery wrapper. */
body.single-product .flex-viewport,
body.single-product .woocommerce-product-gallery {
  position: relative !important;
}

/* v6.10: p94 gallery thumb sizing — match HandsDrop 100x100 + 20px gap.
   Scoped to body.postid-94 to avoid affecting other products. */
body.single-product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 13px !important;
  padding: 0 !important;
  margin: 10px 0 16px !important;
  width: 100% !important;
  max-width: none !important;
}
body.single-product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  float: none !important;
  list-style: none !important;
  padding: 0 !important;
  aspect-ratio: 1 / 1 !important;
}
body.single-product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 8px !important;
}
body.single-product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* v6.10: p94 gallery prev/next arrows — match HandsDrop (40px circle, white/80% bg) */
body.single-product .pp-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(4px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background 0.15s ease;
  color: #1C1917;
  padding: 0;
}
body.single-product .pp-gallery-arrow:hover {
  background: #ffffff;
}
body.single-product .pp-gallery-arrow--prev { left: 8px; }
body.single-product .pp-gallery-arrow--next { right: 8px; }
body.single-product .pp-gallery-arrow .material-symbols-outlined {
  font-size: 24px;
  line-height: 1;
}
/* Anchor the buttons to the actual main image box (flex-viewport), not the gallery wrapper. */
body.single-product .flex-viewport,
body.single-product .woocommerce-product-gallery {
  position: relative !important;
}

/* v6.10: p94 page layout — full width + 50/50 product split (HandsDrop-style).
   Removes storefront sidebar padding and forces product area to span full width
   with 50/50 split between .images and .summary. Thumb grid 5-col now fits. */
body.single-product .storefront-full-width-content .site-content,
body.single-product .site-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
}
body.single-product header.site-header > .col-full,
body.single-product header.site-header .storefront-primary-navigation,
body.single-product footer.site-footer > .col-full,
body.single-product footer.site-footer .ms-footer-siteinfo,
body.single-product .col-full,
body.single-product .site-main,
body.single-product .site-main > article,
body.single-product #primary,
body.single-product .content-area,
body.single-product .hentry,
body.single-product .hentry .entry-content,
body.single-product .page .entry-content {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
}
body.single-product header.site-header > .col-full,
body.single-product header.site-header .storefront-primary-navigation,
body.single-product footer.site-footer > .col-full,
body.single-product footer.site-footer .ms-footer-siteinfo,
body.single-product .storefront-breadcrumb > .col-full {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
body.single-product.single-product div.product {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 32px !important;
  position: relative !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}
body.single-product .woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
body.single-product .woocommerce-product-gallery .flex-viewport {
  width: 100% !important;
  height: auto !important;
}
body.single-product .summary.entry-summary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding-top: 0 !important;
}

/* v6.10: GLOBAL 1280 max-width for header/footer/breadcrumb on ALL pages.
   Promoted from p94-only after layout alignment verification. */
body header.site-header > .col-full,
body header.site-header .storefront-primary-navigation,
body footer.site-footer > .col-full,
body footer.site-footer .ms-footer-siteinfo,
body .storefront-breadcrumb > .col-full {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* v6.11: Ship-to row — wrap meta to its own line + larger overall sizing */
.pp-price-summary { font-size: 15px; gap: 10px; padding-top: 14px; }
.pp-price-row { font-size: 15px; }
.pp-price-row__val { font-size: 15px; }
.pp-price-row--total { font-size: 19px; padding-top: 12px; }
.pp-price-row--total strong { font-size: 19px; }
[data-pp-ship-to-row] { font-size: 15px; }
[data-pp-ship-to-country] { font-size: 14px !important; padding: 5px 10px !important; }
[data-pp-ship-to-meta] {
  display: block !important;
  width: 100% !important;
  font-size: 13px !important;
  color: #5a6168 !important;
  margin-top: 2px !important;
  margin-left: 0 !important;
}

/* v6.12: jewelry product color swatches — pure hex circles (no product image) */
.pp-custom-option__swatch--circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: inset 0 0 0 2px #fff, 0 1px 2px rgba(0,0,0,0.10);
}
.pp-custom-option__swatch--circle.is-selected {
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--pp-primary, #006496);
  transform: scale(1.1);
}

/* v6.14: color swatch hover tooltip (handsdrop-style: black rounded label, no arrow to avoid ::after clash with legacy tint overlay) */
.pp-custom-option__swatches { overflow: visible; }
.pp-custom-option__swatch {
  position: relative;
  overflow: visible;  /* override line 894 overflow:hidden so tooltip ::before can escape */
}
.pp-custom-option__swatch:hover::before,
.pp-custom-option__swatch:focus::before {
  content: attr(data-pp-color-name);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  animation: pp-tooltip-fade 0.12s ease-out;
}
/* v6.15: tooltip applies to BOTH hex (--circle) and image-mode swatches.
   Tooltip uses ::before with bottom: calc(100% + 8px) — escapes the swatch box,
   so the legacy ::after tint (inset:0) does not collide. The image-mode swatch
   needs overflow:visible too so the tooltip can extend above the rounded box. */
@keyframes pp-tooltip-fade {
  from { opacity: 0; transform: translateX(-50%) translateY(2px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* v6.15: larger color swatches per user request */
.pp-custom-option__swatch {
  width: 56px !important;
  height: 56px !important;
}
.pp-custom-option__swatch--circle {
  width: 48px !important;
  height: 48px !important;
}
.pp-custom-option__swatches {
  gap: 10px;  /* a touch more spacing */
}

/* v6.7.90: Larger swatch + gap for Dog Image / Cat Image widget (HD-style category swatches).
   Scope via data-opt-name so other products (e.g. P57 Pet Bowl color) keep default 56/48 size. */
.pp-custom-option[data-opt-name="Dog Image"] .pp-custom-option__swatch,
.pp-custom-option[data-opt-name="Cat Image"] .pp-custom-option__swatch {
  width: 64px !important;
  height: 64px !important;
  border-radius: 8px;
}
.pp-custom-option[data-opt-name="Dog Image"] .pp-custom-option__swatches,
.pp-custom-option[data-opt-name="Cat Image"] .pp-custom-option__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* v6.16: SKU cards 2 per row, justified end-to-end (was 3, too cramped) */
.pp-variant-picker__radios {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 100% !important;
  gap: 12px !important;
}

/* v6.18: "How to Choose <dim1>" help link + modal */
.pp-multi-axis__help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #006496;
  text-decoration: underline;
  margin-top: 8px;
  cursor: pointer;
}
.pp-multi-axis__help:hover { color: #004d75; }
.pp-help-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.pp-help-modal.is-open { display: flex; }
.pp-help-modal__body {
  background: #fff;
  border-radius: 14px;
  padding: 28px 32px 24px;
  max-width: 520px;
  width: calc(100% - 40px);
  position: relative;
  box-shadow: 0 14px 40px rgba(0,0,0,0.25);
}
.pp-help-modal__body h3 {
  margin: 0 0 14px 0;
  font-size: 19px;
  font-weight: 700;
  color: #1a1c1e;
}
.pp-help-modal__body p {
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.55;
  color: #1c1917;
}
.pp-help-modal__close {
  position: absolute;
  top: 10px; right: 14px;
  background: none;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: #87808a;
  cursor: pointer;
  padding: 4px 10px;
}
.pp-help-modal__close:hover { color: #1a1c1e; }

/* v6.19: real handsdrop popup HTML — make images fit and look right */
.pp-help-modal__content { font-size: 14px; line-height: 1.55; color: #1c1917; }
.pp-help-modal__content p { margin: 8px 0; }
.pp-help-modal__content img { max-width: 100%; height: auto; border-radius: 10px; margin: 6px 0; display: block; }
.pp-help-modal__content strong { font-weight: 700; color: #1a1c1e; }
.pp-help-modal__body { max-height: 80vh; overflow-y: auto; max-width: 620px; }

/* v6.20: shop loop product price — larger, bolder. Only affects WC catalog (loop / category / search), NOT single-product page (uses .pp-price-* classes). */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price,
ul.products li.product .price {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1a1c1e !important;
  margin: 6px 0 10px !important;
  line-height: 1.2 !important;
}
ul.products li.product .price .woocommerce-Price-amount {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--pp-primary, #006496) !important;
}
ul.products li.product .price del .woocommerce-Price-amount {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #999 !important;
}
/* "From" prefix smaller / muted */
ul.products li.product .price > span:first-child:not(.woocommerce-Price-amount) {
  font-size: 13px;
  color: #5a6168;
  font-weight: 500;
  margin-right: 4px;
}

/* v6.20.1: force higher specificity for shop loop price (storefront em-based font-size keeps clamping it back to 16px) */
body.woocommerce ul.products li.product .price,
body.woocommerce-page ul.products li.product .price,
body .woocommerce ul.products li.product .price,
.woocommerce.archive ul.products li.product .price,
.post-type-archive-product ul.products li.product .price {
  font-size: 22px !important;
}
body.woocommerce ul.products li.product .price .woocommerce-Price-amount,
body .woocommerce ul.products li.product .price .woocommerce-Price-amount,
.post-type-archive-product ul.products li.product .price .woocommerce-Price-amount {
  font-size: 22px !important;
  color: #006496 !important;
}
body.woocommerce ul.products li.product .price del .woocommerce-Price-amount,
body .woocommerce ul.products li.product .price del .woocommerce-Price-amount {
  font-size: 15px !important;
  color: #888 !important;
}

/* v6.20.2: shop loop price uses custom `.pp-price-from` span (not the standard wc amount). Style it. */
body ul.products li.product .price .pp-price-from,
body .woocommerce ul.products li.product .price .pp-price-from {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #006496 !important;
  display: inline-block !important;
}

/* v6.23: font chip selected state uses theme primary (was #111 black) */
.pp-custom-option__font.is-selected {
  border-color: #84cc16 !important;  /* v6.7.114 (p102): lime-500 跟 HD 一致, 覆盖 #006496 蓝色 */
  border-width: 2px !important;
  box-shadow: 0 0 0 2px #d9f99d !important;  /* ring lime-200 */
}
.pp-custom-option__font.is-selected .pp-custom-option__font-label {
  color: var(--pp-primary, #006496) !important;
}


/* v6.7.27: per-widget Upload button (used by the group file uploader for
   1st/2nd Pet Photos etc.). Match the storefront Add to cart button's
   primary color so the PDP uses one consistent accent across all CTAs. */
.pp-file-button {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--pp-primary, #006496);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background .15s;
}
.pp-file-button:hover {
  background: var(--pp-primary-dark, #004a73);
}
.pp-file-button:disabled {
  background: var(--pp-on-surface-variant, #5b6266);
  cursor: not-allowed;
}

/* v6.7.28: WC Add to cart button — storefront .button.alt sometimes missing
 * (e.g. when storefront CSS partial-fails to load on PDP). Force theme color
 * to avoid transparent / invisible button. Aligned with #006496. */
form.cart button.single_add_to_cart_button,
form.cart button.single_add_to_cart_button.alt {
  background: var(--pp-primary, #006496) !important;
  color: #fff !important;
  border: 1px solid var(--pp-primary, #006496) !important;
  border-radius: 8px;
  padding: 16px 32px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
form.cart button.single_add_to_cart_button:hover,
form.cart button.single_add_to_cart_button.alt:hover {
  background: var(--pp-primary-dark, #004a73) !important;
  border-color: var(--pp-primary-dark, #004a73) !important;
}

/* v6.7.70 (P92): top-level image-swatch (Color / Keychain Style /
   Custom Text Style) — match HandDrop public-SPA style: 100x100
   pure image chip, no padding text, rounded-2xl (16px), border on
   selection, gap 12px. The default .pp-custom-option__img above
   was designed for "image + text" cards and renders tiny 36x36
   thumbnails for handsdrop image-swatch widgets. */
.pp-custom-option--image .pp-custom-option__images {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.pp-custom-option--image .pp-custom-option__img {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: 80px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  cursor: pointer;
  transition: transform .12s;
  outline: none;
}
.pp-custom-option--image .pp-custom-option__img:focus,
.pp-custom-option--image .pp-custom-option__img:focus-within {
  outline: none;
  box-shadow: none;
}
.pp-custom-option--image .pp-custom-option__img:hover {
  transform: translateY(-2px);
}
.pp-custom-option--image .pp-custom-option__img > img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  display: block;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.pp-custom-option--image .pp-custom-option__img:hover > img {
  border-color: #9ca3af;
}
.pp-custom-option--image .pp-custom-option__img.is-selected > img {
  border-color: var(--pp-primary, #006496);
  box-shadow: 0 0 0 3px rgba(0, 100, 150, 0.18);
}
.pp-custom-option--image .pp-custom-option__img.is-selected {
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: normal;
}
.pp-custom-option--image .pp-custom-option__img.is-selected,
.pp-custom-option--image .pp-custom-option__img.is-selected:focus,
.pp-custom-option--image .pp-custom-option__img.is-selected:hover {
  box-shadow: none;
  outline: none;
}
.pp-custom-option--image .pp-custom-option__img.is-selected > span {
  background: var(--pp-primary, #006496);
}

/* v6.7.104 (p97 Pet Bowl): shrink Accessory-1/2/3 image swatches so 7-8 fit per row.
   Default .pp-custom-option__img:has(img) is 80x80 (P95 v6.7.80). P77 HD needs smaller
   because there are 20 accessory choices and 5 per row is too sparse. 48x48 gives ~8/row
   on a 600px widget container (8*48 + 7*gap). Keep rounded-2xl and border style. */
.pp-custom-option[data-opt-name="Accessory-1"] .pp-custom-option__img:has(img),
.pp-custom-option[data-opt-name="Accessory-2"] .pp-custom-option__img:has(img),
.pp-custom-option[data-opt-name="Accessory-3"] .pp-custom-option__img:has(img) {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px;
  min-height: 48px;
  border-radius: 8px !important;
}
/* Tighter gap so 7-8 fit comfortably */
.pp-custom-option[data-opt-name="Accessory-1"] .pp-custom-option__images,
.pp-custom-option[data-opt-name="Accessory-2"] .pp-custom-option__images,
.pp-custom-option[data-opt-name="Accessory-3"] .pp-custom-option__images {
  gap: 8px;
}

/* v6.7.109 (p98 Bangle): widen Color swatch gap. Default .pp-custom-option__swatches
   is display:block + gap:10px (block 容器 gap 不生效 per P65 lesson). P98 HD Color
   has 3 chip (Silver/Gold/Rose Gold) with visible spacing. Force flex + gap 18px.
   Keep swatch 48x48 (default). */
.pp-custom-option[data-opt-name="Color"] .pp-custom-option__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}

/* v6.7.119 (mobile-optimization 2026-06-21): mobile breakpoint 修复 PDP 2-col grid.
   真凶: line 1479 `body.single-product.single-product div.product` 用 !important 强制
   `minmax(0, 1fr) minmax(0, 1fr)`, 覆盖了 mocha-shop.css line 736-738 的 @media (max-width: 768px) 1fr 修复.
   用同样 specificity (`body.single-product`) + !important 覆盖, 0 PC 端影响. */
@media (max-width: 768px) {
  body.single-product.single-product div.product {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 16px !important;
    max-width: 100% !important;
  }
  body.single-product .woocommerce-product-gallery,
  body.single-product .summary.entry-summary {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* 主图 mobile 限高, 避免 1254px source 撑爆 */
  body.single-product .woocommerce-product-gallery__image img {
    max-height: 360px !important;
    width: 100% !important;
  }
  /* info icon button tap target ≥44×44 (P76 P83 P94 P107 都是 6-16px) */
  body.single-product .pp-custom-options button {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
  }
  /* ATC 全宽 + 48px 高 (Material 48dp) */
  body.single-product .single_add_to_cart_button {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }
  /* iOS auto-zoom 修复: form input font-size ≥16px */
  body.single-product input[type="text"],
  body.single-product input[type="email"],
  body.single-product input[type="number"],
  body.single-product input[type="tel"],
  body.single-product input[type="file"],
  body.single-product select,
  body.single-product textarea {
    font-size: 16px !important;
  }
}

/* v6.7.120 (mobile-optimization stage 2, 2026-06-21): description tab + footer accordion.
   mobile-collapsible.js 在 matchMedia(max-width:768px) 时挂 toggle button, 这里定义视觉.
   全部包在 @media (max-width: 768px) 内, 0 PC 端影响. */
@media (max-width: 768px) {
  /* description tab 默认折叠, 显示 toggle button */
  .pp-mobile-collapse-wrapped.pp-mobile-collapsed > .woocommerce-Tabs-panel {
    display: none !important;
  }
  .pp-mobile-collapse-toggle {
    display: block !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 12px 16px !important;
    margin: 12px 0 !important;
    background: var(--pp-surface, #f5f5f5) !important;
    color: var(--pp-primary, #006496) !important;
    border: 1px solid var(--pp-primary, #006496) !important;
    border-radius: var(--pp-radius-sm, 8px) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }
  .pp-mobile-collapse-toggle:hover,
  .pp-mobile-collapse-toggle:focus {
    background: var(--pp-primary, #006496) !important;
    color: #fff !important;
  }
  /* footer 默认隐藏 col 2/3/4, 只显示 brand col (col 1), 点 Show more 才展开 */
  .pp-mobile-collapse-wrapped:not(.pp-mobile-footer-expanded) > .ms-footer-col:nth-child(n+2) {
    display: none !important;
  }
  .pp-mobile-collapse-toggle--footer {
    grid-column: 1 / -1 !important;
    margin-top: 8px !important;
  }
  /* PC 端永远不显示 toggle button */
  .pp-mobile-collapse-toggle {
    /* mobile only via @media wrap */
  }
}