/* /assets/css/pages/item.css */
    /* ─── Animations ────────────────────────────────── */
    @keyframes flash-pulse { 0%,100%{opacity:1} 50%{opacity:.6} }
    .flash-pulse { animation: flash-pulse 1.6s ease-in-out infinite; }

    @keyframes btn-spin { to { transform: rotate(360deg); } }
    .btn-spin { animation: btn-spin .7s linear infinite; }

    @keyframes img-zoom { to { transform: scale(1.05); } }
    .img-hover:hover #main-image { animation: img-zoom .4s ease forwards; }

    /* ─── Thumb strip active ring ───────────────────── */
    .thumb-item.active { border-color: var(--theme-500) !important; box-shadow: 0 0 0 2px var(--theme-500); }

    /* ─── Hide scrollbar on thumb rail ─────────────── */
    .thumb-rail { scrollbar-width: none; }
    .thumb-rail::-webkit-scrollbar { display: none; }

    /* ─── Variant pills ─────────────────────────────── */
    .vp { transition: background .15s, border-color .15s, color .15s, transform .1s; }
    .vp:not(:disabled):hover { transform: translateY(-1px); }

    /* ─── RTL ───────────────────────────────────────── */
    [dir="rtl"] .rtl-flip { transform: scaleX(-1); }

    /* ─── Sticky info column ────────────────────────── */
    @media (min-width: 1024px) {
      .info-sticky { position: sticky; top: 20px; }
    }

/* /assets/css/pages/item-buybox.css */
/* Product page (item.php): gallery beside one sticky buy box, then the
   description and details, reviews and more products. Colours come from
   each theme's tokens; the gallery, price, options and buttons inside are
   the theme's own components, so their frames are flattened here. */
.pd-wrap { max-width: 80rem; margin: 0 auto; padding: 1rem 1rem 8rem; color: var(--ink); }
@media (min-width: 768px) { .pd-wrap { padding: 1.5rem 1.5rem 3.5rem; } }

.pd-crumbs { display: none; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; font-size: 12px; color: var(--ink-soft); }
@media (min-width: 768px) { .pd-crumbs { display: flex; } }
.pd-crumbs a { color: var(--ink-soft); text-decoration: none; }
.pd-crumbs a:hover { color: var(--theme-600, var(--ink)); }
.pd-crumbs i { font-size: 9px; opacity: .6; }
.pd-crumbs span { color: var(--ink-2, var(--ink)); overflow-wrap: anywhere; }

.pd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 1024px) { .pd-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem; } }
.pd-media, .pd-buy { min-width: 0; }
@media (min-width: 1024px) { .pd-buy { position: sticky; top: 1.25rem; } }

.pd-buybox {
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: 1.25rem; border-radius: 20px;
  background: var(--paper); border: 1px solid var(--rule);
  box-shadow: 0 24px 50px -32px rgb(0 0 0 / .35);
}
@media (min-width: 640px) { .pd-buybox { padding: 1.6rem; } }

/* Theme components sit flat inside the box instead of as cards of their own. */
.pd-slot:not(.pd-cta) > div { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
.pd-slot:empty { display: none; }
.pd-cta { padding-top: .25rem; }
/* The buttons keep their theme's own panel; the trust badges every theme
   prints after it repeat what the buy box already says. */
.pd-cta > div ~ div { display: none !important; }

.pd-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.pd-tag {
  display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border-radius: 999px;
  font-size: 12px; font-weight: 600; text-decoration: none;
  color: var(--ink-soft); border: 1px solid var(--rule);
}
a.pd-tag:hover { color: var(--ink); border-color: var(--ink-soft); }
.pd-tag-hot { color: #fff; background: var(--theme-600, #4f46e5); border-color: transparent; }
.pd-title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; overflow-wrap: anywhere; }
.pd-rating { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; font-size: 13px; color: var(--ink-soft); text-decoration: none; }
.pd-rating:hover { color: var(--ink); }
.pd-rating b { color: var(--ink); }
.pd-stars { color: #f59e0b; display: inline-flex; gap: 1px; font-size: 12px; }

.pd-facts { display: flex; flex-direction: column; gap: .5rem; padding: .9rem 0 0; border-top: 1px solid var(--rule); }
.pd-facts li { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; font-size: 14px; line-height: 1.4; color: var(--ink-2, var(--ink)); }
.pd-facts li > i { width: 1.1rem; text-align: center; color: var(--ink-soft); flex: none; }
.pd-facts b { color: var(--ink); }
/* The store's status tones mixed into its ink, so they read in both modes. */
.pd-fact-save, .pd-fact-save b, .pd-fact-save i { color: color-mix(in srgb, var(--px-good, #15803d) 78%, var(--ink)) !important; }
.pd-fact-ok > i { color: color-mix(in srgb, var(--px-good, #15803d) 78%, var(--ink)) !important; }
.pd-fact-low b, .pd-fact-low > i { color: color-mix(in srgb, var(--px-warn, #b45309) 78%, var(--ink)) !important; }
.pd-fact-out, .pd-fact-out > i { color: color-mix(in srgb, var(--px-crit, #b91c1c) 78%, var(--ink)) !important; }
.pd-meter { flex-basis: 100%; height: 5px; border-radius: 999px; background: var(--paper-2); overflow: hidden; margin-left: 1.65rem; max-width: 12rem; }
[dir="rtl"] .pd-meter { margin-left: 0; margin-right: 1.65rem; }
.pd-meter > span { display: block; height: 100%; border-radius: inherit; background: #f59e0b; }

.pd-bundle { padding: .9rem; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: .55rem; }
.pd-bundle-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.pd-bundle-row { display: flex; align-items: center; gap: .6rem; font-size: 14px; }
.pd-bundle-row img { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; background: var(--paper); padding: 2px; flex: none; }
.pd-bundle-row span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pd-bundle-row b { font-size: 12px; color: var(--ink-soft); }
.pd-bundle-note { font-size: 11px; color: var(--ink-soft); line-height: 1.5; }

.pd-seller { display: flex; align-items: center; gap: .75rem; padding: .75rem; border-radius: 14px; background: var(--paper-2); }
.pd-seller-k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.pd-seller-v { font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

.pd-h2 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 700; line-height: 1.2; color: var(--ink); margin-bottom: .9rem; }
.pd-details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
@media (min-width: 1024px) { .pd-details { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem; } }
.pd-about, .pd-side { min-width: 0; }
.pd-desc { font-size: 15px; line-height: 1.7; color: var(--ink-2, var(--ink)); overflow-wrap: anywhere; }
.pd-desc p + p { margin-top: .75rem; }
.pd-desc ul { list-style: disc; padding-left: 1.25rem; }
.pd-table { border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; margin-bottom: 1.25rem; }
.pd-table > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .75rem; padding: .7rem .9rem; font-size: 14px; }
.pd-table > div + div { border-top: 1px solid var(--rule); }
.pd-table > div:nth-child(odd) { background: var(--paper-2); }
.pd-table dt { color: var(--ink-soft); }
.pd-table dd { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.pd-table a { color: var(--theme-600, var(--ink)); }
.pd-side > div:last-child { background: transparent !important; box-shadow: none !important; }

.pd-tab { margin-top: 2rem; }
.pd-reviews { margin-top: 2.5rem; scroll-margin-top: 5rem; }

.pd-related { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.pd-related-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pd-related-head a { font-size: 14px; font-weight: 600; color: var(--theme-600, var(--ink)); text-decoration: none; }
.pd-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 768px) { .pd-related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; } }
.pd-related-grid > * { min-width: 0; }
.pd-slot > div > [class*="eyebrow"]:first-child { display: none; }

/* /assets/css/components/media-gallery.css */
/* Videos among an item's pictures (includes/media-gallery.php,
   assets/js/media-gallery.js). Colours come from the theme's own
   variables where it has them. */

.px-media-stage {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: #000;
}
.px-media-stage[hidden] { display: none; }
.px-media-stage video,
.px-media-stage iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: #000;
}
.px-media-embed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 16px;
  border: 0;
  background: radial-gradient(circle at center, #1f2937, #000);
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.px-media-embed-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--theme-600, #dc2626);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
.px-media-embed:hover .px-media-embed-icon,
.px-media-embed:focus-visible .px-media-embed-icon { transform: scale(1.06); }
.px-media-embed:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.px-media-embed-t { font-weight: 700; font-size: 15px; }
.px-media-embed-note { max-width: 32ch; font-size: 12px; opacity: .8; overflow-wrap: anywhere; }

.px-media-thumb {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  padding: 0;
  background: #111827;
  color: #fff;
  cursor: pointer;
}
.px-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-media-thumb-play {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
}
.px-media-thumb-badge {
  position: absolute;
  bottom: 3px;
  inset-inline-end: 3px;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .7);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
}
.px-media-thumb.is-playing { outline: 2px solid var(--theme-600, #2563eb); outline-offset: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .px-media-embed-icon { transition: transform .15s; }
}

/* /assets/css/components/item-report.css */
/* "Report copyright infringement" under the share row on a listing page.

   Quiet, but not hidden: it is not a call to action for the buyer, and it
   does have to be findable by a rights holder who is looking for it. */
.item-report-copyright {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--rule, #e5e0d8);
  font-size: 0.72rem;
  line-height: 1.5;
}

.item-report-copyright a {
  color: var(--ink-soft, #6b6560);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.item-report-copyright a:hover { color: var(--ink, #1b1b1b); }