/*
 * File: assets/css/shop.css, the public shop styling.
 * Purpose: styles the shop grid, the product page, the cart, the checkout with its speed rows, the account pages
 * and the home bestsellers strip on 1 token set with a light and a dark value each.
 * Defines: nothing; the .pshop- class rules and the --pshop- custom properties.
 * Doc: docs/notes/updates.plexcms.com/packages/plugins/plex-shop/assets/css/shop.css.md
 */

:root {
  --pshop-surface: #ffffff;
  --pshop-surface-2: #f4f4f5;
  --pshop-text: #18181b;
  --pshop-muted: #52525b;
  --pshop-border: #e4e4e7;
  --pshop-border-strong: #71717a;
  --pshop-accent: #0f766e;
  --pshop-accent-hover: #0d6660;
  --pshop-on-accent: #ffffff;
  --pshop-btn-light: #e4e4e7;
  --pshop-btn-light-hover: #d4d4d8;
  --pshop-on-btn-light: #000000;
  --pshop-danger: #b91c1c;
  --pshop-radius: 8px;
  --pshop-radius-sm: 6px;
  --pshop-gap: 16px;
}

[data-theme="dark"] {
  --pshop-surface: #18181b;
  --pshop-surface-2: #09090b;
  --pshop-text: #fafafa;
  --pshop-muted: #a1a1aa;
  --pshop-border: #3f3f46;
  --pshop-border-strong: #8b8b94;
}

.pshop-grid-page,
.pshop-product,
.pshop-cart,
.pshop-checkout,
.pshop-received,
.pshop-track,
.pshop-wishlist,
.pshop-deals,
.pshop-account,
.pshop-account-order,
.pshop-register,
.pshop-bestsellers {
  color: var(--pshop-text);
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--pshop-gap);
}

.pshop-title { font-size: 28px; font-weight: 700; line-height: 1.25; margin: 0 0 8px; }
.pshop-subtitle { font-size: 20px; font-weight: 700; line-height: 1.25; margin: 24px 0 8px; }
.pshop-lead { color: var(--pshop-muted); margin: 0 0 16px; }
.pshop-count, .pshop-meta, .pshop-hint, .pshop-note { color: var(--pshop-muted); font-size: 13px; }
.pshop-empty { color: var(--pshop-muted); padding: 32px 0; }
.pshop-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pshop-hp { position: absolute; left: -9999px; }

.pshop-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.pshop-chip {
  display: inline-block; padding: 6px 12px; border-radius: 999px; text-decoration: none;
  background: var(--pshop-btn-light); color: var(--pshop-on-btn-light); font-size: 13px; font-weight: 600;
}
.pshop-chip:hover { background: var(--pshop-btn-light-hover); }
.pshop-chip.is-active { background: var(--pshop-accent); color: var(--pshop-on-accent); }

.pshop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.pshop-more { margin: 24px 0 0; text-align: center; }
.pshop-card {
  position: relative; background: var(--pshop-surface); border: 1px solid var(--pshop-border);
  border-radius: 12px; padding: 12px;
}
.pshop-card-link { display: block; text-decoration: none; color: var(--pshop-text); }
.pshop-card-image { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--pshop-radius); }
.pshop-card-blank {
  display: flex; align-items: center; justify-content: center;
  background: var(--pshop-surface-2); color: var(--pshop-muted); font-size: 28px;
}
.pshop-card-title { font-size: 16px; font-weight: 600; margin: 12px 0 4px; }
.pshop-card-line { color: var(--pshop-muted); font-size: 13px; margin: 0 0 4px; }
.pshop-card-price { font-weight: 700; margin: 0; }
.pshop-heart {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: 0; cursor: pointer;
  border-radius: 999px; background: var(--pshop-btn-light); color: var(--pshop-on-btn-light);
}
.pshop-heart[aria-pressed="true"] { background: var(--pshop-accent); color: var(--pshop-on-accent); }

.pshop-product { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.pshop-gallery { display: grid; gap: 12px; }
.pshop-photo { width: 100%; border-radius: 12px; aspect-ratio: 1 / 1; object-fit: cover; }
.pshop-copy { margin-top: 16px; white-space: pre-line; }

/* A form beside a taller form of the same row keeps its fields at their own height. */
.pshop-form, .pshop-add { display: grid; align-content: start; gap: 12px; margin: 0 0 24px; }
.pshop-field { display: grid; gap: 6px; }
.pshop-label { font-size: 14px; font-weight: 600; }
.pshop-input, .pshop-select {
  width: 100%; padding: 8px 12px; border-radius: var(--pshop-radius-sm); font: inherit;
  background: var(--pshop-surface); color: var(--pshop-text); border: 1px solid var(--pshop-border-strong);
}
.pshop-qty, .pshop-state { max-width: 120px; }
.pshop-values { display: flex; flex-wrap: wrap; gap: 8px; }
.pshop-value, .pshop-radio, .pshop-check { display: inline-flex; align-items: center; gap: 8px; }
.pshop-value input, .pshop-radio input, .pshop-check input { accent-color: var(--pshop-accent); }

.pshop-button {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 0; cursor: pointer;
  border-radius: var(--pshop-radius); font: inherit; font-weight: 600;
  background: var(--pshop-btn-light); color: var(--pshop-on-btn-light); text-decoration: none;
}
.pshop-button:hover { background: var(--pshop-btn-light-hover); }
.pshop-button-primary { background: var(--pshop-accent); color: var(--pshop-on-accent); }
.pshop-button-primary:hover { background: var(--pshop-accent-hover); }
.pshop-button:focus-visible, .pshop-input:focus-visible, .pshop-select:focus-visible, .pshop-heart:focus-visible {
  outline: 2px solid var(--pshop-text); outline-offset: 2px;
}

.pshop-lines { width: 100%; border-collapse: collapse; margin: 0 0 24px; }
.pshop-lines th { text-align: left; font-size: 12px; text-transform: uppercase; padding: 10px 12px; background: var(--pshop-surface-2); }
.pshop-lines td { padding: 12px; border-bottom: 1px solid var(--pshop-border); vertical-align: top; }
.pshop-line-variant { display: block; color: var(--pshop-muted); font-size: 13px; }
.pshop-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--pshop-btn-light); color: var(--pshop-on-btn-light); font-size: 12px; font-weight: 600; }
.pshop-qty-form { display: flex; gap: 8px; align-items: center; }

.pshop-totals { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; margin: 0 0 16px; max-width: 420px; }
.pshop-totals dt { color: var(--pshop-muted); }
.pshop-totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pshop-total-label, .pshop-total-value { font-weight: 700; color: var(--pshop-text); font-size: 18px; }

.pshop-pending, .pshop-deal { background: var(--pshop-surface-2); border-radius: 12px; padding: 16px; margin: 0 0 16px; }
.pshop-gift-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.pshop-near, .pshop-offer { margin: 8px 0; }
.pshop-cart-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.pshop-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }

.pshop-fieldset { border: 1px solid var(--pshop-border); border-radius: 12px; padding: 16px; margin: 0 0 16px; }
.pshop-legend { font-weight: 700; padding: 0 8px; }
.pshop-error, .pshop-field-error {
  background: var(--pshop-danger); color: #ffffff; border-radius: var(--pshop-radius-sm); padding: 6px 10px; margin: 6px 0;
}
.pshop-notice { background: var(--pshop-accent); color: var(--pshop-on-accent); border-radius: var(--pshop-radius-sm); padding: 8px 12px; }
.pshop-rail-block { padding: 12px 0; }

.pshop-events { list-style: none; margin: 16px 0; padding: 0; }
.pshop-events li { padding: 8px 0; border-bottom: 1px solid var(--pshop-border); }
.pshop-event-when { color: var(--pshop-muted); font-size: 13px; margin-right: 12px; }
.pshop-pickup { background: var(--pshop-surface-2); border-radius: 12px; padding: 16px; margin: 0 0 16px; }

.pshop-pages { display: flex; gap: 8px; margin: 24px 0; }
.pshop-page {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: var(--pshop-radius); text-decoration: none; color: var(--pshop-text);
}
.pshop-page:hover { background: var(--pshop-surface-2); }
.pshop-page.is-current { background: var(--pshop-accent); color: var(--pshop-on-accent); }

/* The checkout speed rows: 1 bordered row per speed, the price at the end of the first line. */
.pshop-speeds [data-pshop-speed-rows] { display: grid; gap: 8px; }
.pshop-speed {
  display: grid; grid-template-columns: auto 1fr auto; column-gap: 10px; row-gap: 2px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--pshop-border); border-radius: var(--pshop-radius); background: var(--pshop-surface);
}
.pshop-speed-label { font-weight: 600; }
.pshop-speed-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.pshop-speed-name, .pshop-speed-days, .pshop-speed-note { grid-column: 2 / 4; color: var(--pshop-muted); font-size: 13px; }

/* Add-ons: the groups of the product page and the choices under a line of the cart, the checkout or an order. */
.pshop-addons { border: 0; padding: 0; margin: 0; min-width: 0; }
.pshop-addon-choice { flex-wrap: wrap; }
.pshop-addon-price { color: var(--pshop-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.pshop-line-addons { list-style: none; margin: 4px 0 0; padding: 0; color: var(--pshop-muted); font-size: 13px; }
.pshop-rule-refusal { max-width: 420px; }

@media (max-width: 720px) {
  .pshop-product { grid-template-columns: 1fr; }
  .pshop-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
  /* The Update button goes under the quantity field, and the 4 columns of a cart line fit a phone. */
  .pshop-qty-form { flex-wrap: wrap; }
}