/* Shared components: buttons, inputs, chips, icons, marks, notices. */

/* Icons */
.pty-icon { width: var(--pty-icon-size); height: var(--pty-icon-size); stroke: currentColor; fill: none; stroke-width: var(--pty-icon-stroke); stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pty-iconbtn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--pty-touch-target); min-height: var(--pty-touch-target); color: var(--pty-ink); position: relative; }

/* Buttons. Figma: Actions | CTA Buttons (cta-button, Style x Size). Jost Medium 16, no caps, square corners. */
.pty-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pty-space-2);
  width: 100%; min-height: var(--pty-button-height); padding: 0 var(--pty-space-5);
  font-family: var(--pty-font-ui); font-size: var(--pty-text-md); font-weight: 500; line-height: 1.25;
  letter-spacing: 0; text-transform: none; text-decoration: none;
  border: 1px solid var(--pty-ink); border-radius: var(--pty-radius);
  background: var(--pty-ink); color: var(--pty-paper);
  transition: background var(--pty-duration-fast) var(--pty-ease), color var(--pty-duration-fast) var(--pty-ease), border-color var(--pty-duration-fast) var(--pty-ease), opacity var(--pty-duration-fast) var(--pty-ease);
}
.pty-btn:hover { background: var(--pty-ink-soft); border-color: var(--pty-ink-soft); text-decoration: none; }
.pty-btn:disabled, .pty-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.pty-btn--md { min-height: 44px; }
.pty-btn--rose { background: var(--pty-rose); border-color: var(--pty-rose); color: var(--pty-ink); }
.pty-btn--rose:hover { background: #E25B79; border-color: #E25B79; color: var(--pty-ink); }
.pty-btn--paper { background: var(--pty-paper); border-color: var(--pty-paper); color: var(--pty-ink); }
.pty-btn--paper:hover { background: var(--pty-white); border-color: var(--pty-white); color: var(--pty-ink); }
.pty-btn--merlot { background: var(--pty-merlot); border-color: var(--pty-merlot); color: var(--pty-paper); }
.pty-btn--merlot:hover { background: #5A1826; border-color: #5A1826; }
.pty-btn--stroke, .pty-btn--secondary { background: transparent; color: var(--pty-ink); }
.pty-btn--stroke:hover, .pty-btn--secondary:hover { background: var(--pty-shell); color: var(--pty-ink); border-color: var(--pty-ink); }
.pty-btn--auto { width: auto; }
.pty-btn--express { min-height: var(--pty-express-height); background: var(--pty-ink); }
.pty-btn .pty-amount { font-weight: 400; letter-spacing: 0; text-transform: none; }
.pty-btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.pty-btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  border: 1.5px solid var(--pty-paper); border-right-color: transparent; border-radius: 50%;
  animation: pty-spin 0.8s linear infinite;
}
.pty-btn--secondary.is-loading::after, .pty-btn--stroke.is-loading::after, .pty-btn--rose.is-loading::after, .pty-btn--paper.is-loading::after { border-color: var(--pty-ink); border-right-color: transparent; }
@keyframes pty-spin { to { transform: rotate(360deg); } }
.pty-textlink { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 0.15em; color: var(--pty-ink); font-size: var(--pty-text-sm); }

/* Inputs: never under 16px, floating label pattern */
.pty-input {
  width: 100%; min-height: var(--pty-button-height); padding: 0 var(--pty-space-4);
  font-size: var(--pty-text-md); color: var(--pty-ink); background: var(--pty-paper);
  border: var(--pty-border); border-radius: var(--pty-radius);
  transition: border-color var(--pty-duration-fast) var(--pty-ease);
}
.pty-input::placeholder { color: var(--pty-stone); }
.pty-input:hover { border-color: var(--pty-stone); }
.pty-input:focus { border-color: var(--pty-ink); outline: none; }
.pty-input[aria-invalid="true"] { border-color: var(--pty-error); }
.pty-field { position: relative; }
.pty-field--float .pty-input { padding-top: 18px; padding-bottom: 4px; }
.pty-field--float .pty-field__label {
  position: absolute; left: var(--pty-space-4); top: 50%; transform: translateY(-50%);
  color: var(--pty-stone); font-size: var(--pty-text-md); pointer-events: none;
  transition: all var(--pty-duration-fast) var(--pty-ease);
}
.pty-field--float .pty-input:focus + .pty-field__label,
.pty-field--float .pty-input:not(:placeholder-shown) + .pty-field__label { top: 9px; transform: none; font-size: var(--pty-text-xs); letter-spacing: 0.02em; }
.pty-field__error { color: var(--pty-error); font-size: var(--pty-text-sm); margin-top: var(--pty-space-2); }
.pty-check { display: flex; gap: var(--pty-space-3); align-items: flex-start; min-height: var(--pty-touch-target); padding-block: var(--pty-space-2); }
.pty-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--pty-ink); flex: none; }

/* Size chips */
.pty-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pty-space-2); }
@media (min-width: 768px) { .pty-chips { grid-template-columns: repeat(5, 1fr); } }
.pty-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding: var(--pty-space-2);
  border: var(--pty-border); border-radius: var(--pty-radius); background: var(--pty-paper); color: var(--pty-ink);
  transition: border-color var(--pty-duration-fast) var(--pty-ease), background var(--pty-duration-fast) var(--pty-ease);
}
.pty-chip__au { font-size: var(--pty-text-md); font-weight: 500; line-height: 1; }
.pty-chip__eu { font-size: var(--pty-text-xs); color: var(--pty-ink-soft); line-height: 1; }
.pty-chip:hover { border-color: var(--pty-ink); }
.pty-chip[aria-pressed="true"], .pty-chip.is-selected { border-color: var(--pty-ink); background: var(--pty-blush); }
.pty-chip.is-soldout { color: var(--pty-stone); cursor: not-allowed; }
.pty-chip.is-soldout .pty-chip__au { text-decoration: line-through; }
.pty-chip__note { font-size: var(--pty-text-xs); color: var(--pty-ink-soft); line-height: 1; }

/* Colour swatches */
.pty-swatches { display: flex; gap: var(--pty-space-3); flex-wrap: wrap; }
.pty-swatch { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 1px solid var(--pty-line); padding: 2px; background: var(--pty-paper); display: block; }
.pty-swatch img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pty-swatch.is-selected { border-color: var(--pty-ink); }

/* Payment marks (placeholder monochrome tiles until brand artwork is added) */
.pty-marks { display: flex; gap: var(--pty-space-2); flex-wrap: wrap; align-items: center; }
.pty-marks__item .pty-icon { width: 40px; height: 26px; stroke: none; fill: currentColor; color: var(--pty-ink-soft); }

/* Currency line */
.pty-currency { display: inline-flex; align-items: center; gap: var(--pty-space-2); min-height: var(--pty-touch-target); color: var(--pty-ink-soft); font-size: var(--pty-text-sm); }
.pty-currency:disabled { cursor: default; }

/* Promise line */
.pty-promise { font-size: var(--pty-text-sm); color: var(--pty-ink-soft); }

/* Tinted panel */
.pty-panel { background: var(--pty-shell); padding: var(--pty-space-5); border-radius: var(--pty-radius); }

/* Divider with text: "or pay with card" */
.pty-divider { display: flex; align-items: center; gap: var(--pty-space-3); color: var(--pty-stone); font-size: var(--pty-text-sm); }
.pty-divider::before, .pty-divider::after { content: ""; flex: 1; border-top: var(--pty-border); }

/* Notices (Phase 2 wires the JS) */
.pty-notice { padding: var(--pty-space-3) var(--pty-space-4); border-left: 2px solid var(--pty-ink); background: var(--pty-shell); font-size: var(--pty-text-sm); }
.pty-notice--error { border-color: var(--pty-error); color: var(--pty-error); }
.pty-notice--success { border-color: var(--pty-success); color: var(--pty-success); }
.pty-toast { position: fixed; left: var(--pty-space-4); right: var(--pty-space-4); bottom: calc(var(--pty-space-4) + env(safe-area-inset-bottom)); z-index: var(--pty-z-toast); background: var(--pty-ink); color: var(--pty-paper); padding: var(--pty-space-3) var(--pty-space-4); border-radius: var(--pty-radius); font-size: var(--pty-text-sm); }
@media (min-width: 768px) { .pty-toast { left: auto; width: 360px; } }

/* Skeleton */
.pty-skeleton { background: linear-gradient(90deg, var(--pty-shell) 25%, var(--pty-line) 50%, var(--pty-shell) 75%); background-size: 200% 100%; animation: pty-shimmer 1.4s infinite; border-radius: var(--pty-radius); }
@keyframes pty-shimmer { to { background-position: -200% 0; } }

/* Newsletter pop-up. Figma: Overlays | Newsletter. */
.pty-popup { position: fixed; inset: 0; z-index: var(--pty-z-drawer); display: flex; align-items: center; justify-content: center; padding: 20px; }
.pty-popup[hidden] { display: none; }
.pty-popup__scrim { position: absolute; inset: 0; background: rgba(28, 25, 23, 0.45); opacity: 0; transition: opacity var(--pty-duration) var(--pty-ease); }
.pty-popup__modal { position: relative; display: grid; width: 100%; max-width: 920px; max-height: calc(100vh - 40px); overflow: auto; background: var(--pty-white); }
.pty-popup.is-open .pty-popup__scrim { opacity: 1; }
.pty-popup__photo { display: none; background: var(--pty-line); }
.pty-popup__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; display: block; }
.pty-popup__panel { display: grid; gap: 24px; align-content: center; padding: 40px 24px; }
.pty-popup__kicker { margin: 0; font-size: var(--pty-text-sm); font-weight: 500; line-height: 20px; letter-spacing: var(--pty-label-tracking); text-transform: uppercase; color: var(--pty-rose); }
.pty-popup__heading { margin: 0; font-family: var(--pty-font-display); font-weight: var(--pty-display-weight); font-size: var(--pty-display-md); line-height: var(--pty-line-display); letter-spacing: var(--pty-display-tracking); }
.pty-popup__body { margin: 0; font-size: var(--pty-text-md); line-height: 22px; color: var(--pty-stone); }
.pty-popup__form { display: grid; gap: 12px; }
.pty-popup__input { background: var(--pty-white); min-height: 48px; }
.pty-popup__dismiss { justify-self: start; font-size: var(--pty-text-sm); line-height: 20px; color: var(--pty-stone); text-decoration: underline; text-underline-offset: 0.15em; }
.pty-popup__legal { margin: 0; font-size: 12px; line-height: 16px; color: var(--pty-stone); }
.pty-popup__x { position: absolute; top: 8px; right: 8px; min-width: 40px; min-height: 40px; background: var(--pty-white); border-radius: 50%; }
@media (min-width: 768px) {
  .pty-popup__modal { grid-template-columns: 400px 1fr; min-height: 560px; }
  .pty-popup__photo { display: block; }
  .pty-popup__panel { padding: 56px; }
  .pty-popup__heading { font-size: var(--pty-display-lg); line-height: 52px; }
}

/* GST note WooCommerce appends to totals on the bag, checkout and thank-you pages: "(includes A$21.82 GST)". Small, on its own line, UI font. */
small.includes_tax { display: block; margin-top: 2px; font-family: var(--pty-font-ui); font-size: var(--pty-text-sm); font-weight: 400; line-height: 20px; letter-spacing: 0; color: var(--pty-stone); text-align: right; }