/* 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; }