/* KeystoneSeller / Azmabegir — unified template detail v2
   Shared visual system for Django and HTML template detail pages.
   Liquid glass, minimal hierarchy, responsive, no pointer-following glow. */

:root {
  --td-bg: #070b16;
  --td-bg-soft: #0c1224;
  --td-surface: rgba(18, 26, 51, .58);
  --td-surface-strong: rgba(15, 23, 46, .82);
  --td-surface-soft: rgba(255, 255, 255, .045);
  --td-line: rgba(148, 163, 255, .16);
  --td-line-strong: rgba(148, 163, 255, .28);
  --td-text: #f5f7ff;
  --td-muted: #9aa5ca;
  --td-accent: #7c73ff;
  --td-accent-2: #4fb7ff;
  --td-success: #38d9a9;
  --td-warning: #f6c76b;
  --td-danger: #ff6b81;
  --td-shadow: 0 28px 80px rgba(2, 6, 18, .34);
  --td-shadow-soft: 0 14px 38px rgba(2, 6, 18, .22);
  --td-radius-xl: 30px;
  --td-radius-lg: 24px;
  --td-radius-md: 18px;
  --td-ease: cubic-bezier(.22, .61, .36, 1);
}

html[data-theme="light"] {
  --td-bg: #f5f6fb;
  --td-bg-soft: #eef0fa;
  --td-surface: rgba(255, 255, 255, .64);
  --td-surface-strong: rgba(255, 255, 255, .86);
  --td-surface-soft: rgba(79, 70, 229, .035);
  --td-line: rgba(79, 70, 229, .12);
  --td-line-strong: rgba(79, 70, 229, .22);
  --td-text: #171c2e;
  --td-muted: #66708d;
  --td-accent: #6d28d9;
  --td-accent-2: #4f7cff;
  --td-success: #059669;
  --td-warning: #b7791f;
  --td-danger: #dc4763;
  --td-shadow: 0 28px 74px rgba(49, 46, 129, .12);
  --td-shadow-soft: 0 14px 34px rgba(49, 46, 129, .08);
}

.detail-hero,
.reviews-section,
.related-section {
  color: var(--td-text);
}

.detail-hero {
  position: relative;
  isolation: isolate;
  padding: 116px 0 64px;
  overflow: clip;
  background:
    radial-gradient(820px 460px at 10% 0%, rgba(124, 115, 255, .14), transparent 68%),
    radial-gradient(760px 420px at 92% 12%, rgba(79, 183, 255, .10), transparent 70%),
    linear-gradient(180deg, var(--td-bg) 0%, var(--td-bg-soft) 100%);
}

.detail-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 163, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 255, .035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 76%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 76%);
}

html[data-theme="light"] .detail-hero {
  background:
    radial-gradient(820px 460px at 10% 0%, rgba(109, 40, 217, .09), transparent 68%),
    radial-gradient(760px 420px at 92% 12%, rgba(79, 124, 255, .09), transparent 70%),
    linear-gradient(180deg, #f8f8fd 0%, var(--td-bg) 100%);
}

.detail-hero .container,
.reviews-section .container,
.related-section .container {
  position: relative;
}

.detail-hero .back-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
  padding: 10px 14px;
  border: 1px solid var(--td-line);
  border-radius: 999px;
  color: var(--td-muted);
  background: var(--td-surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .25s var(--td-ease), color .25s ease, border-color .25s ease, background .25s ease;
}

.detail-hero .back-link:hover {
  color: var(--td-text);
  border-color: var(--td-line-strong);
  background: var(--td-surface-strong);
  transform: translateY(-1px);
}

[dir="rtl"] .detail-hero .back-link i {
  transform: scaleX(-1);
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(320px, .72fr);
  grid-template-areas:
    "preview info"
    "preview buy"
    "thumbs buy";
  gap: 18px 30px;
  align-items: start;
  direction: ltr;
}

.detail-grid > div:first-child:not(.detail-info):not(.download-panel) {
  grid-area: preview;
  min-width: 0;
}

.detail-grid > .preview-box {
  grid-area: preview;
  min-width: 0;
}

.detail-grid > .gallery-thumbs {
  grid-area: thumbs;
}

.detail-grid > .detail-info {
  grid-area: info;
}

.detail-grid > .download-panel {
  grid-area: buy;
}

[dir="rtl"] .detail-info,
[dir="rtl"] .download-panel,
[dir="rtl"] .gallery-thumbs {
  direction: rtl;
  text-align: right;
}

[dir="ltr"] .detail-info,
[dir="ltr"] .download-panel,
[dir="ltr"] .gallery-thumbs {
  direction: ltr;
  text-align: left;
}

.preview-box,
.detail-info,
.download-panel,
.review-card,
.review-form-box,
.related-card {
  border: 1px solid var(--td-line);
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
    var(--td-surface);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    var(--td-shadow-soft);
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
}

.preview-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9.4;
  min-height: 0;
  padding: 9px;
  overflow: hidden;
  border-radius: var(--td-radius-xl);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 34px 90px rgba(2, 6, 18, .28);
}

.preview-box::after {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 2;
  pointer-events: none;
  border-radius: 21px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.preview-box img,
.preview-box img.gallery-main {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: cover;
  object-position: top center;
  border-radius: 21px;
  background: #0a0f1e;
  transition: opacity .22s ease, transform .55s var(--td-ease);
}

.preview-box:hover img {
  transform: scale(1.012);
}

.preview-box .no-thumb {
  width: 100%;
  height: 100%;
  min-height: 300px;
  display: grid;
  place-items: center;
  border-radius: 21px;
  color: rgba(255,255,255,.56);
  background:
    linear-gradient(135deg, rgba(124,115,255,.18), rgba(79,183,255,.07)),
    rgba(8,12,26,.72);
  font-size: clamp(38px, 7vw, 78px);
  font-weight: 900;
  letter-spacing: -.04em;
}

html[data-theme="light"] .preview-box .no-thumb {
  color: rgba(79,70,229,.46);
  background:
    linear-gradient(135deg, rgba(109,40,217,.08), rgba(79,124,255,.05)),
    rgba(255,255,255,.72);
}

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 10px;
  margin-top: -8px;
  padding: 2px;
}

.gallery-thumbs .thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  padding: 4px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--td-line);
  background: var(--td-surface);
  opacity: .62;
  cursor: pointer;
  transition: opacity .2s ease, transform .22s var(--td-ease), border-color .22s ease, box-shadow .22s ease;
}

.gallery-thumbs .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 10px;
}

.gallery-thumbs .thumb:hover,
.gallery-thumbs .thumb.active {
  opacity: 1;
  transform: translateY(-2px);
  border-color: var(--td-line-strong);
}

.gallery-thumbs .thumb.active {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--td-accent) 28%, transparent);
}

.detail-info {
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--td-radius-xl);
}

.detail-info h1 {
  margin: 0 0 10px;
  color: var(--td-text);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.16;
  font-weight: 900;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

.detail-info .creator-line {
  margin: 0 0 18px;
  color: var(--td-muted);
  font-size: 14px;
  line-height: 1.9;
}

.detail-info .creator-line i {
  color: var(--td-accent-2);
  margin-inline-end: 7px;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.badge-chip,
.reviews-count,
.reply-admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--td-line);
  background: var(--td-surface-soft);
  color: var(--td-muted);
  font-size: 12px;
  font-weight: 750;
}

.badge-chip i {
  color: var(--td-accent-2);
}

.avg-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 20px;
}

.review-stars {
  color: #fbbf24;
  display: inline-flex;
  gap: 2px;
  letter-spacing: 0;
  white-space: nowrap;
}

.avg-num {
  color: var(--td-text);
  font-size: 14px;
  font-weight: 850;
}

.avg-cnt,
.review-date,
.reply-date,
.r-meta,
.r-avg.muted {
  color: var(--td-muted);
  font-size: 12px;
}

.detail-desc {
  margin: 0;
  color: color-mix(in srgb, var(--td-text) 78%, var(--td-muted));
  font-size: 15px;
  line-height: 2.05;
  white-space: normal;
}

.detail-info .tutorial-video-box {
  margin: 24px 0 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--td-line) !important;
  border-radius: var(--td-radius-lg) !important;
  background: rgba(0,0,0,.2);
}

.detail-info .tutorial-video-box .video-header {
  padding: 13px 16px !important;
  background: var(--td-surface-soft) !important;
  border-bottom: 1px solid var(--td-line);
}

.detail-info .tutorial-video-box .video-header i {
  color: var(--td-accent-2) !important;
}

.detail-info .tutorial-video-box .video-header span {
  color: var(--td-text) !important;
}

.detail-info .tutorial-video-box video {
  width: 100% !important;
  max-height: 520px !important;
  display: block !important;
  background: #000 !important;
}

.meta-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.meta-list li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border: 1px solid var(--td-line);
  border-radius: 15px;
  background: var(--td-surface-soft);
  color: var(--td-muted);
  font-size: 12.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.meta-list li.meta-emphasis {
  padding-block: 13px;
  color: color-mix(in srgb, var(--td-text) 78%, var(--td-muted));
  font-size: 14px;
  font-weight: 700;
}

.meta-list li.meta-emphasis strong {
  color: var(--td-text);
  font-size: 15px;
  font-weight: 900;
}

.meta-list li i {
  flex: 0 0 auto;
  color: var(--td-accent-2);
}

.download-panel {
  position: sticky;
  top: 104px;
  padding: 24px;
  border-radius: var(--td-radius-xl);
  background:
    linear-gradient(160deg, rgba(255,255,255,.095), rgba(255,255,255,.025)),
    var(--td-surface-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    var(--td-shadow);
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 20px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--td-line);
}

.panel-price {
  min-width: 0;
}

.download-panel .price-label {
  margin-bottom: 6px;
  color: var(--td-muted);
  font-size: 12px;
  font-weight: 700;
}

.download-panel .price-value {
  color: var(--td-text);
  font-size: clamp(22px, 2.3vw, 29px);
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.download-panel .price-value.free {
  color: var(--td-success);
}

.fav-form-detail {
  margin: 0;
}

.fav-icon-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--td-line);
  border-radius: 14px;
  color: var(--td-muted);
  background: var(--td-surface-soft);
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--td-ease), color .2s ease, border-color .2s ease, background .2s ease;
}

.fav-icon-btn:hover {
  transform: translateY(-2px);
  color: var(--td-danger);
  border-color: color-mix(in srgb, var(--td-danger) 35%, var(--td-line));
}

.fav-icon-btn.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #ff5d7d, #e83d64);
}

.dl-grid {
  display: grid;
  gap: 10px;
}

.dl-btn,
.reply-submit-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 16px;
  border: 0;
  border-radius: 15px;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  cursor: pointer;
  transition: transform .22s var(--td-ease), box-shadow .22s ease, background .22s ease, border-color .22s ease;
}

.dl-btn:hover,
.reply-submit-btn:hover {
  transform: translateY(-2px);
}

.dl-btn.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--td-accent), #7667f7 46%, var(--td-accent-2) 125%);
  box-shadow: 0 12px 30px rgba(108, 92, 231, .24);
}

.dl-btn.primary:hover {
  box-shadow: 0 16px 34px rgba(108, 92, 231, .31);
}

.dl-btn.secondary,
.reply-submit-btn {
  color: var(--td-text);
  border: 1px solid var(--td-line);
  background: var(--td-surface-soft);
}

.dl-btn.secondary:hover,
.reply-submit-btn:hover {
  border-color: var(--td-line-strong);
  background: color-mix(in srgb, var(--td-surface-soft) 70%, var(--td-accent) 6%);
}

.dl-btn[aria-disabled="true"] {
  cursor: default;
  opacity: .72;
  transform: none;
}

.locked {
  opacity: .7;
  font-size: 12px;
}

.login-hint {
  display: block;
  margin-top: 12px;
  color: var(--td-muted);
  text-align: center;
  font-size: 12px;
}

.login-hint a {
  color: var(--td-accent-2);
  font-weight: 750;
}

.plan-divider {
  height: 1px;
  margin: 22px 0 18px;
  background: var(--td-line);
}

.plan-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--td-text);
  font-size: 14px;
  font-weight: 850;
}

.plan-title i {
  color: var(--td-accent-2);
}

.plan-list {
  display: grid;
  gap: 10px;
}

.plan-card {
  padding: 15px;
  border: 1px solid var(--td-line);
  border-radius: 17px;
  background: var(--td-surface-soft);
}

.plan-card .plan-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.plan-card .plan-row h3 {
  margin: 0;
  color: var(--td-text);
  font-size: 13px;
  font-weight: 850;
}

.plan-card .plan-price {
  color: var(--td-warning);
  font-size: 12px;
  font-weight: 850;
  text-align: end;
}

.plan-card .plan-price.free {
  color: var(--td-success);
}

.plan-card p {
  margin: 0 0 11px;
  color: var(--td-muted);
  font-size: 11.5px;
  line-height: 1.7;
}

.plan-card ul {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.plan-card ul li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--td-muted);
  font-size: 11.5px;
}

.plan-card ul li i {
  color: var(--td-accent-2);
}

.plan-card .dl-btn {
  width: 100%;
  min-height: 40px;
  padding-block: 9px;
  font-size: 12px;
}

.plan-empty {
  padding: 14px;
  border: 1px dashed var(--td-line);
  border-radius: 15px;
  color: var(--td-muted);
  background: var(--td-surface-soft);
  text-align: center;
  font-size: 12px;
  line-height: 1.75;
}

/* Reviews */
.reviews-section {
  padding: 66px 0 34px;
  background:
    linear-gradient(180deg, var(--td-bg-soft) 0%, var(--td-bg) 100%);
}

.reviews-head,
.related-section > .container > h2 {
  margin-bottom: 22px;
}

.reviews-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.reviews-head h2,
.related-section h2 {
  margin: 0;
  color: var(--td-text);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
  letter-spacing: -.025em;
}

.reviews-head h2 i {
  color: var(--td-accent-2);
  margin-inline-end: 7px;
}

.reviews-count {
  white-space: nowrap;
}

.reviews-list {
  display: grid;
  gap: 12px;
}

.review-card {
  padding: 20px;
  border-radius: var(--td-radius-lg);
}

.review-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 11px;
}

.review-meta {
  min-width: 0;
}

.review-meta b,
.reply-head b {
  display: block;
  color: var(--td-text);
  font-size: 13.5px;
  font-weight: 850;
}

.review-card .review-text,
.review-card > p {
  margin: 0;
  color: color-mix(in srgb, var(--td-text) 75%, var(--td-muted));
  font-size: 13.5px;
  line-height: 1.9;
}

.review-av,
.reply-av {
  display: none;
}

.review-replies {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-inline-start: 18px;
  border-inline-start: 2px solid var(--td-line);
}

.reply-row {
  padding: 12px 13px;
  border-radius: 14px;
  background: var(--td-surface-soft);
}

.reply-row.reply-admin {
  border: 1px solid color-mix(in srgb, var(--td-accent) 24%, var(--td-line));
}

.reply-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 9px;
  margin-bottom: 6px;
}

.reply-admin-badge {
  padding: 4px 8px;
  color: var(--td-accent-2);
}

.reply-body p {
  margin: 0;
  color: var(--td-muted);
  font-size: 12.5px;
  line-height: 1.8;
}

.review-reply-form {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 14px;
}

.review-reply-form .reply-textarea {
  min-height: 44px;
}

.review-textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  padding: 12px 13px;
  border: 1px solid var(--td-line);
  border-radius: 14px;
  outline: none;
  color: var(--td-text);
  background: var(--td-surface-soft);
  font: inherit;
  font-size: 13px;
  line-height: 1.75;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.review-textarea::placeholder {
  color: color-mix(in srgb, var(--td-muted) 72%, transparent);
}

.review-textarea:focus {
  border-color: color-mix(in srgb, var(--td-accent) 55%, var(--td-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--td-accent) 12%, transparent);
}

.review-form-box {
  max-width: 720px;
  margin-top: 18px;
  padding: 21px;
  border-radius: var(--td-radius-lg);
}

.review-form-box h3 {
  margin: 0 0 15px;
  color: var(--td-text);
  font-size: 16px;
  font-weight: 850;
}

.review-field {
  margin-bottom: 14px;
}

.review-field label,
.review-label {
  display: block;
  margin-bottom: 7px;
  color: var(--td-muted);
  font-size: 12.5px;
  font-weight: 700;
}

.review-notice {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 14px;
  color: var(--td-warning);
  font-size: 12.5px;
  line-height: 1.7;
}

.reviews-empty {
  margin: 0;
  padding: 32px 18px;
  border: 1px dashed var(--td-line);
  border-radius: var(--td-radius-lg);
  color: var(--td-muted);
  background: var(--td-surface-soft);
  text-align: center;
}

.reviews-login {
  max-width: 520px;
  margin-top: 18px;
}

/* Related templates */
.related-section {
  padding: 42px 0 90px;
  background: var(--td-bg);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.related-card {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--td-radius-lg);
  color: inherit;
  text-decoration: none;
  transition: transform .28s var(--td-ease), border-color .28s ease, box-shadow .28s ease;
}

.related-card:hover {
  transform: translateY(-6px);
  border-color: var(--td-line-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 24px 54px rgba(2,6,18,.26);
}

.r-thumb {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--td-muted);
  background:
    linear-gradient(135deg, rgba(124,115,255,.10), rgba(79,183,255,.05)),
    var(--td-surface-soft);
  font-size: 22px;
  font-weight: 900;
}

.r-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
  transition: transform .45s var(--td-ease);
}

.related-card:hover .r-thumb img {
  transform: scale(1.035);
}

.r-body {
  padding: 15px 16px 17px;
}

.r-body h3 {
  margin: 0 0 6px;
  color: var(--td-text);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.r-meta {
  line-height: 1.6;
}

.r-price {
  margin-top: 9px;
  color: var(--td-warning);
  font-size: 12px;
  font-weight: 800;
}

.r-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}

.r-rating .review-stars {
  font-size: 10px;
}

.r-avg {
  color: var(--td-muted);
  font-size: 11px;
}

/* Keep rating widget aligned with the new glass inputs. */
.review-form-box .star-group {
  margin-top: 2px;
}

.review-form-box .star-value {
  color: var(--td-muted);
}

/* Responsive */
@media (max-width: 1199px) {
  .detail-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(290px, .7fr);
    gap: 18px 22px;
  }

  .download-panel {
    padding: 20px;
  }
}

@media (max-width: 991px) {
  .detail-hero {
    padding: 102px 0 52px;
  }

  .detail-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "preview"
      "thumbs"
      "info"
      "buy";
    gap: 16px;
    direction: inherit;
  }

  .detail-grid > div:first-child:not(.detail-info):not(.download-panel),
  .detail-grid > .preview-box,
  .detail-grid > .gallery-thumbs,
  .detail-grid > .detail-info,
  .detail-grid > .download-panel {
    grid-column: 1;
    grid-row: auto;
  }

  .download-panel {
    position: static;
    top: auto;
  }

  .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .detail-hero {
    padding: 88px 0 42px;
  }

  .detail-hero .back-link {
    margin-bottom: 16px;
    padding: 8px 11px;
    font-size: 12px;
  }

  .preview-box {
    padding: 6px;
    border-radius: 22px;
  }

  .preview-box::after {
    inset: 6px;
    border-radius: 16px;
  }

  .preview-box img,
  .preview-box img.gallery-main,
  .preview-box .no-thumb {
    border-radius: 16px;
  }

  .detail-info,
  .download-panel {
    padding: 19px;
    border-radius: 22px;
  }

  .detail-info h1 {
    font-size: clamp(26px, 9vw, 36px);
  }

  .detail-desc {
    font-size: 14px;
  }

  .meta-list {
    grid-template-columns: 1fr;
  }

  .gallery-thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .panel-head {
    padding-bottom: 16px;
    margin-bottom: 15px;
  }

  .plan-card .plan-row,
  .review-card-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .review-reply-form {
    flex-direction: column;
  }

  .reply-submit-btn {
    width: 100%;
  }

  .reviews-section {
    padding-top: 46px;
  }

  .reviews-head {
    align-items: flex-start;
  }

  .related-section {
    padding-top: 34px;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }

  .related-card {
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preview-box img,
  .gallery-thumbs .thumb,
  .detail-hero .back-link,
  .fav-icon-btn,
  .dl-btn,
  .reply-submit-btn,
  .related-card,
  .r-thumb img {
    transition: none !important;
  }
}


/* 2026-09-26 detail v3: media column + compact review rail */
.detail-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .72fr);
  grid-template-areas: "media side";
  column-gap: 30px;
  row-gap: 0;
  direction: ltr;
  align-items: start;
}
.detail-media-column {
  grid-area: media;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.detail-side-column {
  grid-area: side;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
[dir="rtl"] .detail-side-column,
[dir="rtl"] .detail-media-column { direction: rtl; text-align: right; }
[dir="ltr"] .detail-side-column,
[dir="ltr"] .detail-media-column { direction: ltr; text-align: left; }
.detail-grid > *,
.detail-grid .preview-box,
.detail-grid .gallery-thumbs,
.detail-grid .detail-info,
.detail-grid .download-panel {
  grid-column: auto;
  grid-row: auto;
}
.preview-box {
  aspect-ratio: 16 / 9;
}
.gallery-thumbs {
  margin: 0;
  padding: 0 2px;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
}
.gallery-thumbs .thumb {
  border-radius: 12px;
}
.download-panel {
  position: sticky;
  top: 104px;
}

.detail-review-panel {
  margin-top: 4px;
  padding: 18px;
  border: 1px solid var(--td-line);
  border-radius: var(--td-radius-lg);
  background:
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.016)),
    var(--td-surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--td-shadow-soft);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}
.detail-review-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.detail-review-head h2 {
  margin:0;
  color:var(--td-text);
  font-size:18px;
  font-weight:900;
}
.detail-review-all {
  color:var(--td-accent-2);
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}
.rating-overview {
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:18px;
  align-items:center;
  padding:14px;
  margin-bottom:14px;
  border:1px solid var(--td-line);
  border-radius:18px;
  background:var(--td-surface-soft);
}
.rating-score {
  text-align:center;
}
.rating-score strong {
  display:block;
  color:var(--td-text);
  font-size:40px;
  line-height:1;
  font-weight:950;
}
.rating-score .review-stars {
  justify-content:center;
  margin:8px 0 5px;
}
.rating-score small {
  color:var(--td-muted);
  font-size:11px;
}
.rating-bars {
  display:grid;
  gap:7px;
}
.rating-bar-row {
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 30px;
  gap:8px;
  align-items:center;
  color:var(--td-muted);
  font-size:11px;
}
.rating-bar-track {
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:color-mix(in srgb,var(--td-muted) 13%,transparent);
}
.rating-bar-fill {
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#fbbf24,#f59e0b);
}
.review-rail-wrap {
  position:relative;
}
.review-rail {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(250px, 42%);
  gap:10px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  direction:ltr;
  padding:2px 1px 8px;
}
.review-rail::-webkit-scrollbar { display:none; }
.review-rail .review-card {
  scroll-snap-align:start;
  min-height:150px;
  padding:16px;
}
[dir="rtl"] .review-rail .review-card { direction:rtl; text-align:right; }
[dir="ltr"] .review-rail .review-card { direction:ltr; text-align:left; }
.review-rail .review-card .review-text {
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.review-rail-controls {
  display:flex;
  justify-content:flex-end;
  gap:7px;
  margin-top:7px;
}
.review-rail-btn {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid var(--td-line);
  border-radius:11px;
  color:var(--td-text);
  background:var(--td-surface-soft);
  cursor:pointer;
  transition:transform .2s var(--td-ease), border-color .2s ease;
}
.review-rail-btn:hover {
  transform:translateY(-1px);
  border-color:var(--td-line-strong);
}
.review-compose {
  margin-top:12px;
  border-top:1px solid var(--td-line);
  padding-top:12px;
}
.review-compose summary {
  cursor:pointer;
  color:var(--td-accent-2);
  font-size:12px;
  font-weight:800;
  list-style:none;
}
.review-compose summary::-webkit-details-marker { display:none; }
.review-compose form { margin-top:12px; }
.review-compose .review-textarea { min-height:86px; }
.review-rating-select {
  width:100%;
  min-height:42px;
  margin-bottom:9px;
  padding:8px 11px;
  border:1px solid var(--td-line);
  border-radius:12px;
  color:var(--td-text);
  background:var(--td-surface-soft);
}
.review-empty-compact {
  padding:22px 14px;
  border:1px dashed var(--td-line);
  border-radius:16px;
  color:var(--td-muted);
  text-align:center;
  font-size:12px;
}

.reviews-page {
  min-height:70vh;
  padding:116px 0 90px;
  color:var(--td-text);
  background:
    radial-gradient(720px 420px at 12% 0%, rgba(124,115,255,.12), transparent 70%),
    var(--td-bg);
}
.reviews-page-shell {
  max-width:980px;
  margin:0 auto;
}
.reviews-page-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}
.reviews-page-head h1 {
  margin:6px 0 0;
  color:var(--td-text);
  font-size:clamp(28px,4vw,42px);
  font-weight:950;
}
.reviews-page-list {
  display:grid;
  gap:12px;
}
.reviews-page-list .review-card {
  padding:20px;
}
.review-pagination {
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:22px;
}
.review-pagination a,
.review-pagination span {
  min-width:38px;
  min-height:38px;
  display:grid;
  place-items:center;
  padding:6px 10px;
  border:1px solid var(--td-line);
  border-radius:11px;
  color:var(--td-text);
  background:var(--td-surface);
  text-decoration:none;
  font-size:12px;
}

@media (max-width: 991px) {
  .detail-grid {
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "media"
      "side";
    gap:16px;
    direction:inherit;
  }
  .detail-media-column,
  .detail-side-column { grid-area:auto; }
  .download-panel { position:static; top:auto; }
  .review-rail { grid-auto-columns:minmax(250px, 70%); }
}
@media (max-width: 640px) {
  .detail-media-column { gap:6px; }
  .gallery-thumbs {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
  }
  .detail-review-panel { padding:14px; border-radius:20px; }
  .rating-overview {
    grid-template-columns:1fr;
    gap:12px;
  }
  .rating-score {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
  }
  .rating-score strong { font-size:34px; }
  .rating-score .review-stars { margin:0; }
  .review-rail { grid-auto-columns:88%; }
  .reviews-page { padding-top:92px; }
  .reviews-page-head { flex-direction:column; }
}

.reviews-page .back-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:9px 13px;
  border:1px solid var(--td-line);
  border-radius:999px;
  color:var(--td-muted);
  background:var(--td-surface);
  text-decoration:none;
  font-size:12px;
  font-weight:800;
}
.reviews-page .back-link:hover { color:var(--td-text); border-color:var(--td-line-strong); }


/* 2026-09-26 detail v4: repaired direct-item grid */
.detail-grid {
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(320px,.72fr);
  grid-template-areas:
    "preview info"
    "thumbs buy"
    "reviews buy";
  column-gap:30px;
  row-gap:10px;
  align-items:start;
  direction:ltr;
}
.detail-grid > .preview-box,
.detail-grid > div:first-child:not(.detail-info):not(.download-panel):not(.detail-review-panel):not(.gallery-thumbs) {
  grid-area:preview;
  min-width:0;
}
.detail-grid > .gallery-thumbs {
  grid-area:thumbs;
  margin:0;
  align-self:start;
}
.detail-grid > .detail-info {
  grid-area:info;
  min-width:0;
}
.detail-grid > .download-panel {
  grid-area:buy;
  min-width:0;
  align-self:start;
}
.detail-grid > .detail-review-panel {
  grid-area:reviews;
  min-width:0;
  margin-top:2px;
}
[dir="rtl"] .detail-grid > .detail-info,
[dir="rtl"] .detail-grid > .download-panel,
[dir="rtl"] .detail-grid > .detail-review-panel,
[dir="rtl"] .detail-grid > .gallery-thumbs {
  direction:rtl;
  text-align:right;
}
[dir="ltr"] .detail-grid > .detail-info,
[dir="ltr"] .detail-grid > .download-panel,
[dir="ltr"] .detail-grid > .detail-review-panel,
[dir="ltr"] .detail-grid > .gallery-thumbs {
  direction:ltr;
  text-align:left;
}
.gallery-thumbs {
  grid-template-columns:repeat(auto-fill,minmax(86px,1fr));
  gap:8px;
}
@media (max-width:1199px) {
  .detail-grid {
    grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr);
    column-gap:22px;
  }
}
@media (max-width:991px) {
  .detail-grid {
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "preview"
      "thumbs"
      "reviews"
      "info"
      "buy";
    gap:12px;
    direction:inherit;
  }
  .detail-grid > .download-panel {
    position:static;
    top:auto;
  }
}
@media (max-width:640px) {
  .detail-grid { gap:10px; }
  .gallery-thumbs {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
  }
}


/* 2026-09-26 detail v5: near-edge wide layout */
.detail-hero > .container,
.related-section > .container,
.reviews-section > .container,
.reviews-page > .container {
  width:calc(100% - 32px) !important;
  max-width:1780px !important;
  margin-inline:auto !important;
  padding-inline:0 !important;
}

.detail-grid {
  grid-template-columns:minmax(0,1.34fr) minmax(390px,.86fr);
  column-gap:20px;
}

.detail-grid > .detail-info,
.detail-grid > .download-panel {
  width:100%;
}

.detail-info {
  padding:clamp(24px,2.25vw,32px);
}

.detail-desc {
  max-width:none;
}

@media (min-width:1600px) {
  .detail-hero > .container,
  .related-section > .container,
  .reviews-section > .container,
  .reviews-page > .container {
    width:calc(100% - 40px) !important;
  }

  .detail-grid {
    grid-template-columns:minmax(0,1.38fr) minmax(430px,.92fr);
    column-gap:22px;
  }
}

@media (max-width:1199px) {
  .detail-hero > .container,
  .related-section > .container,
  .reviews-section > .container,
  .reviews-page > .container {
    width:calc(100% - 24px) !important;
  }

  .detail-grid {
    grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);
    column-gap:16px;
  }
}

@media (max-width:991px) {
  .detail-hero > .container,
  .related-section > .container,
  .reviews-section > .container,
  .reviews-page > .container {
    width:calc(100% - 20px) !important;
  }

  .detail-grid {
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "preview"
      "thumbs"
      "reviews"
      "info"
      "buy";
  }
}

@media (max-width:640px) {
  .detail-hero > .container,
  .related-section > .container,
  .reviews-section > .container,
  .reviews-page > .container {
    width:calc(100% - 16px) !important;
  }
}


/* 2026-09-26 detail v6: independent columns + compact plans */
.detail-grid.detail-grid-columns {
  display:grid !important;
  grid-template-columns:minmax(0,1.34fr) minmax(390px,.86fr) !important;
  grid-template-areas:none !important;
  gap:20px !important;
  align-items:start !important;
  direction:ltr;
}

.detail-grid.detail-grid-columns > .detail-left-column {
  grid-area:auto !important;
  grid-column:1 !important;
  grid-row:1 !important;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.detail-grid.detail-grid-columns > .detail-right-column {
  grid-area:auto !important;
  grid-column:2 !important;
  grid-row:1 !important;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

[dir="rtl"] .detail-left-column,
[dir="rtl"] .detail-right-column {
  direction:rtl;
  text-align:right;
}

[dir="ltr"] .detail-left-column,
[dir="ltr"] .detail-right-column {
  direction:ltr;
  text-align:left;
}

.detail-left-column > .preview-box,
.detail-left-column > div:first-child {
  margin:0;
}

.detail-left-column > div:first-child .preview-box {
  margin:0;
}

.detail-left-column .gallery-thumbs {
  margin:0;
  padding:0 2px;
}

.detail-left-column > .detail-review-panel {
  margin-top:0;
}

.detail-right-column > .detail-info,
.detail-right-column > .download-panel {
  width:100%;
  margin:0;
}

.detail-right-column > .download-panel {
  position:static;
  top:auto;
  padding:18px;
}

/* Compact metadata: equal-height chips, smaller dates. */
.meta-list-compact {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:18px;
}

.meta-list-compact li.meta-emphasis {
  min-height:46px;
  padding:8px 10px;
  justify-content:flex-start;
  gap:7px;
  font-size:11px;
  line-height:1.35;
}

.meta-list-compact li.meta-emphasis > span {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.meta-list-compact li.meta-emphasis strong {
  display:block;
  font-size:11.5px;
  line-height:1.25;
  font-weight:850;
  white-space:nowrap;
}

/* Compact purchase-plan cards: multiple plans sit side by side. */
.detail-right-column .plan-divider {
  margin:14px 0 12px;
}

.detail-right-column .plan-title {
  margin-bottom:8px;
  font-size:12.5px;
}

.detail-right-column .plan-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.detail-right-column .plan-card {
  min-width:0;
  padding:10px;
  border-radius:13px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.detail-right-column .plan-card .plan-row {
  display:block;
  margin:0;
}

.detail-right-column .plan-card .plan-row h3 {
  margin:0 0 3px;
  font-size:11.5px;
}

.detail-right-column .plan-card .plan-price {
  display:block;
  font-size:10.5px;
  line-height:1.45;
  text-align:start;
}

.detail-right-column .plan-card p {
  min-height:0;
  margin:0;
  color:var(--td-muted);
  font-size:9.5px;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.detail-right-column .plan-card .dl-btn {
  min-height:32px;
  margin-top:auto;
  padding:7px 8px;
  border-radius:10px;
  font-size:10px;
}

.detail-right-column .panel-head {
  padding-bottom:14px;
  margin-bottom:12px;
}

@media (min-width:1600px) {
  .detail-grid.detail-grid-columns {
    grid-template-columns:minmax(0,1.38fr) minmax(430px,.92fr) !important;
    gap:22px !important;
  }
}

@media (max-width:1199px) {
  .detail-grid.detail-grid-columns {
    grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr) !important;
    gap:16px !important;
  }

  .meta-list-compact {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:991px) {
  .detail-grid.detail-grid-columns {
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px !important;
  }

  .detail-grid.detail-grid-columns > .detail-left-column {
    grid-column:1 !important;
    grid-row:1 !important;
  }

  .detail-grid.detail-grid-columns > .detail-right-column {
    grid-column:1 !important;
    grid-row:2 !important;
  }

  .meta-list-compact {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:640px) {
  .detail-left-column { gap:6px; }

  .meta-list-compact {
    grid-template-columns:1fr;
  }

  .detail-right-column .plan-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .detail-right-column .plan-card {
    padding:9px;
  }
}

@media (max-width:420px) {
  .detail-right-column .plan-list {
    grid-template-columns:1fr;
  }
}


/* 2026-09-26 detail v7: readable adaptive purchase plans */
.detail-right-column > .download-panel {
  padding:14px;
}

.detail-right-column .plan-list {
  display:grid;
  gap:9px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.detail-right-column .plan-list.plan-count-1 {
  grid-template-columns:1fr;
}

.detail-right-column .plan-list.plan-count-2 {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.detail-right-column .plan-list.plan-count-3 {
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.detail-right-column .plan-list.plan-count-4 {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.detail-right-column .plan-card {
  min-height:132px;
  padding:13px;
  border-radius:14px;
  gap:8px;
}

.detail-right-column .plan-card .plan-row {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  margin:0;
}

.detail-right-column .plan-card .plan-row h3 {
  margin:0;
  color:var(--td-text);
  font-size:14.5px;
  line-height:1.35;
  font-weight:900;
}

.detail-right-column .plan-card .plan-price {
  display:block;
  color:var(--td-warning);
  font-size:14px;
  line-height:1.4;
  font-weight:900;
  text-align:end;
}

.detail-right-column .plan-card p {
  margin:0;
  color:var(--td-muted);
  font-size:11.5px;
  line-height:1.65;
  -webkit-line-clamp:2;
}

.detail-right-column .plan-card .dl-btn {
  min-height:38px;
  margin-top:auto;
  padding:8px 10px;
  border-radius:11px;
  font-size:11.5px;
  font-weight:850;
}

.detail-right-column .plan-card-daily .plan-row h3 {
  font-size:16px;
  font-weight:950;
}

.detail-right-column .plan-card-daily .plan-price {
  font-size:15.5px;
  font-weight:950;
}

.detail-right-column .plan-count-1 .plan-card {
  min-height:154px;
  padding:17px;
}

.detail-right-column .plan-count-1 .plan-card .plan-row h3 {
  font-size:18px;
}

.detail-right-column .plan-count-1 .plan-card .plan-price {
  font-size:18px;
}

.detail-right-column .plan-count-1 .plan-card p {
  font-size:12.5px;
}

.detail-right-column .plan-count-1 .plan-card .dl-btn {
  min-height:42px;
  font-size:12.5px;
}

@media (max-width:1199px) {
  .detail-right-column .plan-list.plan-count-3 {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .detail-right-column .plan-list.plan-count-3 .plan-card:last-child {
    grid-column:1/-1;
  }
}

@media (max-width:640px) {
  .detail-right-column .plan-list,
  .detail-right-column .plan-list.plan-count-2,
  .detail-right-column .plan-list.plan-count-3,
  .detail-right-column .plan-list.plan-count-4 {
    grid-template-columns:1fr;
  }
  .detail-right-column .plan-list.plan-count-3 .plan-card:last-child {
    grid-column:auto;
  }
  .detail-right-column .plan-card {
    min-height:0;
  }
}


/* 2026-09-26 detail v8: compact HTML actions */
.html-detail-actions {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.html-detail-actions .dl-btn {
  min-width:0;
  min-height:38px;
  padding:8px 10px;
  border-radius:11px;
  gap:6px;
  font-size:11.5px;
  font-weight:850;
  white-space:normal;
  line-height:1.35;
}

.html-detail-actions .dl-btn i {
  flex:0 0 auto;
  font-size:11px;
}

.detail-right-column > .download-panel:has(.html-detail-actions) {
  padding:16px;
}

.detail-right-column > .download-panel:has(.html-detail-actions) .panel-head {
  padding-bottom:12px;
  margin-bottom:10px;
}

.detail-right-column > .download-panel:has(.html-detail-actions) .login-hint {
  margin-top:8px;
  font-size:11px;
}

@media (max-width:520px) {
  .html-detail-actions {
    grid-template-columns:1fr;
  }
}


/* 2026-09-26 detail v9: catalog-sized related HTML cards */
.related-html-section .related-catalog-page {
  width:min(902px,100%);
  min-height:0;
  margin-inline:auto;
  padding-top:0;
  background:transparent;
}

.related-html-section > .container > h2 {
  width:min(902px,100%);
  margin-inline:auto;
  margin-bottom:16px;
}

.related-html-section .catalog-grid {
  width:100%;
}

.related-html-section .catalog-card {
  width:100%;
}

@media(max-width:1080px) {
  .related-html-section .related-catalog-page,
  .related-html-section > .container > h2 {
    width:min(100%,620px);
  }
}

@media(max-width:620px) {
  .related-html-section .related-catalog-page,
  .related-html-section > .container > h2 {
    width:100%;
  }
}


/* 2026-09-26 detail v10: related HTML rail */
.related-html-section .related-catalog-page {
  width:min(902px,100%);
  overflow:visible;
}

.related-html-head {
  width:min(902px,100%);
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.related-html-head h2 {
  margin:0;
}

.related-html-actions {
  display:flex;
  align-items:center;
  gap:9px;
}

.related-html-controls {
  display:flex;
  align-items:center;
  gap:6px;
}

.related-html-nav {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid var(--td-line);
  border-radius:10px;
  color:var(--td-text);
  background:var(--td-surface);
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}

.related-html-nav:hover {
  transform:translateY(-1px);
  border-color:var(--td-line-strong);
  background:var(--td-surface-strong);
}

.related-html-view-all {
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 10px;
  border:1px solid var(--td-line);
  border-radius:10px;
  color:var(--td-accent-2);
  background:var(--td-surface);
  text-decoration:none;
  font-size:11.5px;
  font-weight:850;
  white-space:nowrap;
}

.related-html-view-all:hover {
  border-color:var(--td-line-strong);
  color:var(--td-text);
}

.related-html-rail {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 26px) / 3);
  gap:13px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding:2px 1px 10px;
  direction:ltr;
}

.related-html-rail::-webkit-scrollbar {
  display:none;
}

.related-html-rail > .catalog-card {
  scroll-snap-align:start;
  min-width:0;
}

[dir="rtl"] .related-html-rail > .catalog-card {
  direction:rtl;
  text-align:right;
}

[dir="ltr"] .related-html-rail > .catalog-card {
  direction:ltr;
  text-align:left;
}

@media(max-width:1080px) {
  .related-html-section .related-catalog-page,
  .related-html-head {
    width:min(100%,620px);
  }

  .related-html-rail {
    grid-auto-columns:calc((100% - 13px) / 2);
  }
}

@media(max-width:620px) {
  .related-html-section .related-catalog-page,
  .related-html-head {
    width:100%;
  }

  .related-html-head {
    align-items:flex-start;
  }

  .related-html-actions {
    gap:6px;
  }

  .related-html-view-all {
    min-height:32px;
    padding:6px 8px;
    font-size:10.5px;
  }

  .related-html-nav {
    width:32px;
    height:32px;
  }

  .related-html-rail {
    grid-auto-columns:86%;
    gap:10px;
  }
}


/* 2026-09-26 detail v11: full-width landing-style related rail */
.related-html-section > .container {
  width:calc(100% - 24px) !important;
  max-width:none !important;
  margin-inline:auto !important;
  padding-inline:0 !important;
}

.related-html-section .related-html-head,
.related-html-section .related-catalog-page {
  width:100% !important;
  max-width:none !important;
  margin-inline:0 !important;
}

.related-html-section .related-html-head {
  margin-bottom:14px !important;
}

.related-html-section .related-catalog-page {
  overflow:visible;
  padding-top:0;
  background:transparent;
}

.related-html-rail-shell {
  position:relative;
  width:100%;
}

.related-html-rail {
  width:100%;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:clamp(260px,19vw,292px);
  gap:13px;
  overflow-x:auto;
  overflow-y:visible;
  padding:4px 6px 12px;
  scroll-snap-type:x proximity;
  scroll-padding-inline:6px;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}

[dir="rtl"] .related-html-rail {
  direction:rtl;
}

[dir="ltr"] .related-html-rail {
  direction:ltr;
}

.related-html-rail::-webkit-scrollbar {
  display:none;
}

.related-html-rail > .catalog-card {
  width:100%;
  min-width:0;
  scroll-snap-align:start;
}

.related-html-nav {
  position:absolute;
  z-index:8;
  top:50%;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--td-line);
  border-radius:50%;
  color:var(--td-text);
  background:color-mix(in srgb,var(--td-surface) 90%,transparent);
  box-shadow:0 12px 30px rgba(2,6,18,.15);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  cursor:pointer;
  transform:translateY(-58%);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}

.related-html-nav:hover {
  transform:translateY(-58%) scale(1.06);
  border-color:var(--td-line-strong);
  background:var(--td-surface-strong);
}

.related-html-prev {
  left:-10px;
}

.related-html-next {
  right:-10px;
}

.related-html-view-all {
  flex:0 0 auto;
}

@media(max-width:900px) {
  .related-html-section > .container {
    width:calc(100% - 20px) !important;
  }

  .related-html-rail {
    grid-auto-columns:clamp(245px,44vw,285px);
  }

  .related-html-prev {
    left:-6px;
  }

  .related-html-next {
    right:-6px;
  }
}

@media(max-width:620px) {
  .related-html-section > .container {
    width:calc(100% - 16px) !important;
  }

  .related-html-head {
    align-items:center;
  }

  .related-html-rail {
    grid-auto-columns:min(82vw,280px);
    padding-inline:2px;
  }

  .related-html-nav {
    display:none;
  }
}


/* 2026-09-26 detail v13: two-up review cards */
.review-rail.review-rail-multi {
  grid-auto-columns:calc((100% - 10px) / 2);
}

.review-rail.review-rail-multi .review-card {
  min-height:138px;
  padding:14px;
}

.review-rail.review-rail-multi .review-card-top {
  gap:8px;
}

.review-rail.review-rail-multi .review-meta b {
  font-size:11.5px;
}

.review-rail.review-rail-multi .review-date {
  font-size:9.5px;
}

.review-rail.review-rail-multi .review-stars {
  gap:2px;
}

.review-rail.review-rail-multi .review-stars i {
  font-size:10px;
}

.review-rail.review-rail-multi .review-text {
  font-size:11.5px;
  line-height:1.75;
}

@media (max-width:640px) {
  .review-rail.review-rail-multi {
    grid-auto-columns:88%;
  }

  .review-rail.review-rail-multi .review-card {
    min-height:145px;
    padding:14px;
  }
}