/*
 * PGS Commerce: base styles for the Shop elements and their islands.
 * Colour and corners come from --pgs-* variables: Settings › Appearance prints the site's
 * values after this file, and each element's "Shop style" controls can override them.
 * The defaults below are neutral. Fonts are the site's own (inherited), never set here;
 * --pgs-heading-font can be pointed at the site's heading face by the theme.
 * Motion: transform/opacity only.
 */
.pgs-island, .pgs-stars {
  --pgs-accent: #1d1d1f;          /* links, selected options, step numbers */
  --pgs-accent-bright: #1d1d1f;   /* button outlines, progress, voucher card */
  --pgs-accent-tint: #f2f2f3;     /* button hover */
  --pgs-accent-text: #fff;
  --pgs-pay: #1d1d1f;             /* Pay and Buy now */
  --pgs-cta: transparent;
  --pgs-cta-text: var(--pgs-text);
  --pgs-cta-border: var(--pgs-accent-bright);
  --pgs-text: #1d1d1f;
  --pgs-muted: #5f6368;
  --pgs-bg: #fff;
  --pgs-surface: #f4f4f5;
  --pgs-line: #e2e2e4;
  --pgs-line-strong: #b8b8bc;
  --pgs-danger: #b3261e;
  --pgs-radius: 4px;
  --pgs-gap: 12px;
  --pgs-fast: 160ms;
  --pgs-body-font: inherit;
  --pgs-text-size: 16px;
  --pgs-heading-size: 32px;
  color: var(--pgs-text);
  font-family: var(--pgs-body-font);
  font-size: var(--pgs-text-size);
}

.pgs-island *, .pgs-island *::before, .pgs-island *::after { box-sizing: border-box; }
/* Block elements fill the column they are placed in. Bricks sections centre their children,
   which would otherwise shrink an island to its content and make it change width as people type. */
.pgs-voucherbuilder, .pgs-checkout, .pgs-account, .pgs-voucherbalance, .pgs-orderstatus, .pgs-addtobag, .pgs-reviewform {
  width: 100%; max-width: 100%; min-width: 0; align-self: stretch;
}

/* Buttons */
.pgs-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: var(--pgs-radius);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: transform var(--pgs-fast) ease-out, opacity var(--pgs-fast) ease-out;
}
.pgs-button:active { transform: scale(0.98); }
.pgs-button:focus-visible, .pgs-option input:focus-visible + .pgs-option__label,
.pgs-quick-add:focus-visible, .pgs-bag-button:focus-visible, .pgs-field__input:focus-visible {
  outline: 2px solid var(--pgs-accent); outline-offset: 2px;
}
.pgs-button--primary { background: var(--pgs-cta); color: var(--pgs-cta-text); border-color: var(--pgs-cta-border); }
.pgs-button--secondary { background: transparent; color: var(--pgs-text); border-color: var(--pgs-text); }
.pgs-button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Buy box (C2) */
.pgs-buybox { position: relative; display: grid; gap: 16px; }
.pgs-buybox__options { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.pgs-buybox__legend { flex-basis: 100%; margin-bottom: 0; padding: 0; font-size: 14px; font-weight: 600; color: var(--pgs-text); }
.pgs-buybox__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--pgs-gap); align-items: center; }
.pgs-buybox__row .pgs-button { min-height: 52px; width: 100%; }
/* The express slot stays out of the layout until Stripe reports Apple Pay or Google Pay,
   so the page never shows an empty gap while it loads or on a device with neither. */
.pgs-buybox__express { position: absolute; left: 0; right: 0; bottom: 0; height: 0; overflow: hidden; visibility: hidden; }
.pgs-buybox__express.is-available { position: static; height: auto; min-height: 52px; overflow: visible; visibility: visible; }
.pgs-option { position: relative; }
.pgs-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pgs-option__label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; font-size: 14px;
  border: 1px solid var(--pgs-line-strong); border-radius: var(--pgs-radius); background: var(--pgs-bg); color: var(--pgs-text);
  transition: background-color var(--pgs-fast), color var(--pgs-fast);
}
/* Selected size or shade: solid, like a selected voucher amount. */
.pgs-option input:checked + .pgs-option__label, .pgs-option input:checked ~ .pgs-option__label {
  background: var(--pgs-accent-bright); border-color: var(--pgs-accent-bright); color: #fff;
}
.pgs-option input:disabled ~ .pgs-option__label { opacity: 0.45; text-decoration: line-through; }
.pgs-option--swatch { display: inline-flex; align-items: center; }
.pgs-option__swatch { width: 20px; height: 20px; margin-right: -32px; margin-left: 12px; border-radius: 50%; z-index: 1; border: 1px solid var(--pgs-line); box-shadow: 0 0 0 2px #fff; }
.pgs-option--swatch .pgs-option__label { padding-left: 38px; }

.pgs-qty { display: inline-grid; grid-template-columns: 44px 36px 44px; align-items: center; border: 1px solid var(--pgs-line-strong); border-radius: var(--pgs-radius); background: var(--pgs-bg); }
.pgs-qty__step { min-height: 46px; border: 0; background: transparent; font: inherit; font-size: 18px; cursor: pointer; color: inherit; }
.pgs-qty__input { width: 100%; border: 0; text-align: center; font: inherit; background: transparent; -moz-appearance: textfield; }
.pgs-qty__input::-webkit-inner-spin-button, .pgs-qty__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.pgs-quick-add {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--pgs-accent-bright); border-radius: var(--pgs-radius); background: transparent;
  color: var(--pgs-text); font: inherit; font-size: 22px; line-height: 1; text-decoration: none; cursor: pointer;
  transition: background-color var(--pgs-fast);
}
.pgs-quick-add:hover { background: var(--pgs-accent-tint); color: var(--pgs-text); }
.pgs-quick-add[disabled] { opacity: 0.4; cursor: not-allowed; }
/* Phones: the smaller card's button (32 px, with a 44 px tap area). */
@media (max-width: 767px) {
  .pgs-quick-add { position: relative; width: 32px; height: 32px; font-size: 18px; }
  .pgs-quick-add::before { content: ''; position: absolute; inset: -6px; }
}
.pgs-addtobag--quick { width: auto; align-self: auto; }
.pgs-routine-add { width: 100%; min-height: 52px; }
.pgs-island .pgs-routine-add { background: var(--pgs-bg); border-color: var(--pgs-accent-bright); color: var(--pgs-text); }
.pgs-island .pgs-routine-add:hover { background: var(--pgs-accent-tint); color: var(--pgs-text); border-color: var(--pgs-accent-bright); }
.pgs-sticky { display: flex; align-items: center; justify-content: space-between; gap: var(--pgs-gap); padding: 12px 20px; background: var(--pgs-bg); border-top: 1px solid var(--pgs-line); }
.pgs-sticky__info { display: grid; flex: 0 0 auto; }
.pgs-sticky__label { font-size: 13px; color: var(--pgs-text); }

/* Bag button (C8) */
.pgs-bagbutton { display: flex; }
.pgs-bagbutton.pgs-align-center { justify-content: center; }
.pgs-bagbutton.pgs-align-right { justify-content: flex-end; }
.pgs-bag-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: inherit; }
.pgs-bag-button__count {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--pgs-accent); color: var(--pgs-accent-text); font-size: 11px; line-height: 18px; text-align: center;
}

/* Fields */
.pgs-field { display: grid; gap: 6px; }
.pgs-field__label { display: block; font-size: 14px; font-weight: 600; color: var(--pgs-text); margin: 0 0 6px; }
.pgs-field__input {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--pgs-line-strong);
  border-radius: var(--pgs-radius); background: #fff; color: var(--pgs-text); font: inherit;
  font-size: max(16px, 1em);
}
/* The theme greys every <label>; shop labels (options, checkboxes, fields) use the ink colour. */
.pgs-island label { color: var(--pgs-text); }
/* iPhone Safari zooms the page into any field with text under 16px. Never let one go smaller. */
[data-pgs-island] :is(input:not([type="radio"]):not([type="checkbox"]), select, textarea) { font-size: max(16px, 1em); }
.pgs-field__help { margin: 0; font-size: 14px; color: var(--pgs-muted); }
.pgs-notice { padding: 12px 16px; border: 1px solid var(--pgs-line); background: var(--pgs-surface); }

/* Checkout (C4) */
.pgs-checkout { display: grid; gap: 32px; }
.pgs-checkout { align-items: start; }
@media (min-width: 1024px) { .pgs-checkout { grid-template-columns: minmax(0, 1fr) minmax(380px, 480px); } }
/* Each step is a white card (C4), so it reads on the grey page the template sets. */
.pgs-checkout__section { display: grid; gap: 20px; padding: clamp(20px, 3vw, 32px); background: var(--pgs-bg); border: 1px solid var(--pgs-line); }
.pgs-checkout__heading { display: flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(calc(var(--pgs-heading-size) * 0.8), 3vw, var(--pgs-heading-size)); line-height: 1.2; }
.pgs-checkout__step { display: inline-grid; place-items: center; width: 32px; height: 32px; background: var(--pgs-accent); color: var(--pgs-accent-text); font-family: var(--pgs-body-font); font-size: 16px; font-weight: 600; }
.pgs-skeleton { min-height: 120px; border-radius: var(--pgs-radius); background: var(--pgs-surface); }
.pgs-skeleton--tall { min-height: 360px; }

/* Voucher builder (C6) */
/* minmax(0, 1fr) everywhere: a long email, name or message wraps instead of widening the page. */
.pgs-voucherbuilder { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); max-width: 100%; min-width: 0; }
.pgs-voucherbuilder > *, .pgs-voucher__form > *, .pgs-voucher__preview > * { min-width: 0; }
@media (min-width: 1024px) { .pgs-voucherbuilder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pgs-voucher__form { display: grid; gap: 16px; }
/* Amount tiles (C6): white, dark amount; the chosen one is solid teal. 3 across on phones, 6 on wider. */
.pgs-voucher__amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
@media (min-width: 600px) { .pgs-voucher__amounts { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 599px) { .pgs-voucher__amounts:not(.is-expanded) .pgs-tile--more { display: none; } }
@media (min-width: 600px) { .pgs-voucher__more { display: none; } }
.pgs-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 6px 4px; border: 1px solid var(--pgs-line-strong); border-radius: var(--pgs-radius); background: var(--pgs-bg); color: var(--pgs-text); line-height: 1.1; text-align: center; transition: background-color var(--pgs-fast), color var(--pgs-fast); }
.pgs-tile input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pgs-tile:has(input:checked) { background: var(--pgs-accent-bright); border-color: var(--pgs-accent-bright); color: #fff; }
.pgs-tile__amount { font-size: 17px; font-weight: 600; }
.pgs-tile__extra { font-size: 12px; font-weight: 500; opacity: 0.85; }
.pgs-voucher__actions { display: flex; flex-wrap: wrap; gap: var(--pgs-gap); }
.pgs-voucher-card { aspect-ratio: 3 / 2; display: flex; align-items: flex-end; padding: 24px; border-radius: var(--pgs-radius); background: var(--pgs-accent-bright); color: #fff; }
.pgs-voucher-card__code { font-family: ui-monospace, monospace; letter-spacing: 0.08em; }

/* Balance (C7), account (A1), order status (C5) */
.pgs-balance__form, .pgs-account__signin { display: grid; gap: 16px; max-width: 480px; }
.pgs-balance__result:empty { display: none; }
.pgs-order-status__text { margin: 0; padding: 12px 16px; background: var(--pgs-surface); border: 1px solid var(--pgs-line); }

@media (prefers-reduced-motion: reduce) {
  .pgs-island *, .pgs-island *::before, .pgs-island *::after { transition: none !important; animation: none !important; }
}

/* Product gallery ([pgs_product_gallery]): thumbnails beside a swipeable 4:5 image; dots on phones. */
.pgs-productgallery { width: 100%; min-width: 0; }
.pgs-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pgs-gallery.has-many { grid-template-columns: 88px minmax(0, 1fr); }
.pgs-gallery__thumbs { display: flex; flex-direction: column; gap: 12px; }
.pgs-gallery__thumb {
  display: block; position: relative; aspect-ratio: 1 / 1; width: 100%; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--pgs-line); border-radius: var(--pgs-radius); background: var(--pgs-bg);
}
.pgs-gallery__thumb[aria-current="true"] { outline: 2px solid var(--pgs-accent-bright); outline-offset: -1px; }
.pgs-gallery__thumb:focus-visible { outline: 2px solid var(--pgs-accent); outline-offset: 2px; }
.pgs-gallery__thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pgs-gallery__track {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  border: 1px solid var(--pgs-line); border-radius: var(--pgs-radius); background: var(--pgs-bg);
}
.pgs-gallery__track::-webkit-scrollbar { display: none; }
.pgs-gallery__track:focus-visible { outline: 2px solid var(--pgs-accent); outline-offset: 2px; }
.pgs-gallery__slide { position: relative; flex: 0 0 100%; aspect-ratio: 4 / 5; scroll-snap-align: start; }
.pgs-gallery__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pgs-gallery__dots { display: none; }
@media (max-width: 767px) {
  .pgs-gallery.has-many { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pgs-gallery__thumbs { display: none; }
  .pgs-gallery__slide { aspect-ratio: auto; height: 420px; }
  .pgs-gallery__dots { display: flex; justify-content: center; gap: 8px; padding: 12px 0; }
  .pgs-gallery__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--pgs-line-strong); }
  .pgs-gallery__dot[aria-current="true"] { background: var(--pgs-accent-bright); }
}
@media (prefers-reduced-motion: no-preference) { .pgs-gallery__track { scroll-behavior: smooth; } }

/* Voucher builder: "A dollar amount | A treatment", and the treatment tiles. */
.pgs-voucher__kind { margin: 0; }
.pgs-voucher__treatments { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pgs-voucher__treatments > legend { grid-column: 1 / -1; padding: 0; margin-bottom: 8px; }
.pgs-tile--treatment { align-items: flex-start; justify-content: space-between; gap: 6px; min-height: 76px; padding: 12px 14px; text-align: left; }
.pgs-tile__name { font-weight: 600; line-height: 1.3; }
.pgs-tile__price { font-size: 15px; font-variant-numeric: tabular-nums; }
.pgs-tile__price s { opacity: 0.7; margin-right: 4px; }
.pgs-voucher-card__amount--treatment { max-width: 70%; font-size: clamp(20px, 4vw, 28px); line-height: 1.15; text-align: right; overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .pgs-voucher__treatments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgs-tile--treatment { padding: 10px 12px; min-height: 72px; }
  .pgs-tile--treatment .pgs-tile__name { font-size: 15px; }
}

/* Rating stars ({pgs_rating_stars}, {pgs_review_stars}): five stars filled to --pgs-rating (0–5).
   The tile is cropped to the star's own height, so the box is the visible star and centring it
   against text lines it up with the figures. --pgs-star-size is that height (match the text's
   cap height: about 0.72em); colours with --pgs-star-color and --pgs-star-empty. */
.pgs-stars {
  --pgs-star-size: 11px;
  --pgs-star-tile: calc(var(--pgs-star-size) * 1.262);
  display: inline-block; flex: 0 0 auto; width: calc(var(--pgs-star-tile) * 5); height: var(--pgs-star-size); vertical-align: middle;
  background: linear-gradient(90deg, var(--pgs-star-color, var(--pgs-accent-bright)) calc(var(--pgs-rating, 0) * 20%), var(--pgs-star-empty, var(--pgs-line-strong)) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.5 2.5 23 18.23'%3E%3Cpath d='M12 2.5l2.94 6.12 6.73.83-4.96 4.62 1.28 6.66L12 17.5l-5.99 3.23 1.28-6.66-4.96-4.62 6.73-.83z'/%3E%3C/svg%3E") 0 0 / var(--pgs-star-tile) var(--pgs-star-size) repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.5 2.5 23 18.23'%3E%3Cpath d='M12 2.5l2.94 6.12 6.73.83-4.96 4.62 1.28 6.66L12 17.5l-5.99 3.23 1.28-6.66-4.96-4.62 6.73-.83z'/%3E%3C/svg%3E") 0 0 / var(--pgs-star-tile) var(--pgs-star-size) repeat-x;
}
@media (forced-colors: active) { .pgs-stars { forced-color-adjust: none; background: linear-gradient(90deg, CanvasText calc(var(--pgs-rating, 0) * 20%), GrayText 0); } }