/* ======================================================================
   NextTier – PRODUCT PAGE (полное оформление + карточки YMLA)
   Дата: 2025-07-04
   ====================================================================== */

/* === RESET & BASE ==================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:#11131a;color:#e8e8e8;line-height:1.55;
  display:flex;flex-direction:column;min-height:100vh;
}
main{flex:1 0 auto;}header,footer{flex-shrink:0;}

/* === VARIABLES ======================================================= */
:root{
  --nt-primary:#ff9944;            --nt-primary-hover:#ffb366;
  --nt-primary-dark:#cc6c1a;
  --nt-bg:#11131a;                 --nt-bg-light:#1a1d26;
  --nt-border:rgba(255,255,255,.08);
  --nt-card-bg:#1b1e28;
  --nt-text:#e8e8e8;               --nt-text-dim:#b0b3c7;
  --nt-radius:8px;                 --nt-radius-lg:12px;
  --nt-shadow:0 4px 16px rgba(0,0,0,.45);
  --nt-transition:.24s cubic-bezier(.25,.8,.25,1);
}

/* === WRAPPER ========================================================= */
.wrap{width:min(92vw,1400px);margin-inline:auto}

/* === HERO IMAGE ====================================================== */
#product-image-container{
  width:100%;max-height:440px;aspect-ratio:16/9;overflow:hidden;
  border-bottom:1px solid var(--nt-border);background:#0e0e12;
}
@media(max-width:600px){#product-image-container{max-height:300px;aspect-ratio:16/10;}}
#product-image-container img{width:100%;height:100%;object-fit:cover;}

/* === PAGE HEAD ======================================================= */
.product-head{margin:2rem 0;}
.product-head h1{font-size:clamp(1.9rem,3.3vw,2.6rem);font-weight:700;margin-bottom:.65rem;}
.price-inline{display:flex;align-items:center;gap:.9rem;font-size:1.35rem;font-weight:700;color:var(--nt-primary);}
.price-inline .eta{font-size:1rem;font-weight:500;color:var(--nt-text-dim);}

/* === 3-COLUMN LAYOUT ================================================= */
.product-layout{
  display:flex;gap:40px;align-items:flex-start;
  padding:40px 32px;max-width:1680px;width:100%;box-sizing:border-box;margin-inline:auto;
}
.sidebar{
  flex:0 0 270px;max-width:270px;min-width:270px;
  background:var(--nt-bg-light);padding:20px;border-radius:var(--nt-radius-lg);
  position:sticky;top:90px;max-height:calc(100vh - 120px);overflow:auto;
}
@media(max-width:1024px){.product-layout{flex-wrap:nowrap;overflow-x:auto;}
  .sidebar{position:static;max-height:none;}}
@media(max-width:500px){.product-layout{flex-direction:column;overflow:visible;}
  .sidebar{width:100%;min-width:0;flex:none;margin-bottom:24px;}}

.product-description-column{
  flex:1 1 900px;max-width:900px;min-width:900px;
  background:#222434;border:1px solid #2c2d40;border-radius:10px;
  padding:30px;box-shadow:0 4px 18px rgba(0,0,0,.35);
}
.product-options-column{flex:0 0 400px;max-width:400px;min-width:400px;}
@media(max-width:900px){.product-description-column{min-width:700px;max-width:700px;}}

/* === SIDEBAR MENU (игры/категории) ================================== */
.game-logo{display:block;width:100%;height:auto;object-fit:contain;margin-bottom:1.2rem;}
.menu .category,.menu .subcategory{
  display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:6px;cursor:pointer;
  transition:background var(--nt-transition),color var(--nt-transition);}
.menu .category{font-weight:700;color:var(--nt-text);}
.menu .subcategory{color:var(--nt-text-dim);}
.menu .category:hover,.menu .subcategory:hover{background:rgba(255,255,255,.05);}
.menu .category.active,.menu .subcategory.active{background:var(--nt-primary);color:#fff;}
.subcategory-list{margin:.35rem 0 0 10px;display:none;}
.subcategory-list.visible{display:block;}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:var(--nt-border);border-radius:4px}
.subcategory-list{
  display:block !important;      /* всегда показывать */
  margin:.35rem 0 0 10px;        /* отступы как раньше */
}
/* === DESCRIPTION / SPOILERS ========================================= */
#product-description,#product-footer-description{font-size:1rem;color:var(--nt-text-dim);}
.spoiler{background:var(--nt-bg-light);border-radius:var(--nt-radius);overflow:hidden;margin-bottom:15px;}
.spoiler summary{padding:15px 20px;cursor:pointer;font-weight:700;font-size:16px;list-style:none;background:#2a2b3c;position:relative;padding-right:40px;}
.spoiler summary::after{content:"\\25BC";position:absolute;right:20px;top:50%;transform:translateY(-50%);transition:transform .25s;}
.spoiler[open] summary::after{transform:translateY(-50%) rotate(180deg);}
.spoiler[open] summary{border-bottom:1px solid var(--nt-border);}
.spoiler summary::marker{display:none;}
.spoiler .spoiler-content{padding:15px 20px;font-size:15px;line-height:1.6;}

/* === CUSTOM-ORDER BANNER ============================================ */
.custom-order-banner{margin:2.5rem 0;background:linear-gradient(135deg,#1e2231 0%,#262b3d 100%);
  border:1px solid rgba(255,255,255,.07);border-radius:var(--nt-radius-lg);padding:1.8rem 1.6rem;}
.custom-order-banner__content{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;}
@media(min-width:641px){.custom-order-banner__content{flex-wrap:nowrap;}
  .custom-order-banner__content>div:first-child{flex:1;}
  .custom-order-btn{margin-left:auto;}}
.custom-order-banner__title{font-size:1.35rem;font-weight:700;margin-bottom:.35rem;color:#fff;}
.custom-order-banner__subtitle{font-size:1rem;color:var(--nt-text-dim);}
.custom-order-btn{background:var(--nt-primary);border:none;border-radius:var(--nt-radius);
  padding:.75rem 1.6rem;font-weight:600;color:#fff;cursor:pointer;transition:background var(--nt-transition);}
.custom-order-btn:hover{background:var(--nt-primary-hover);}

/* === ALSO-LIKE  (Product cards из search.css) ======================= */
.also-like-section{margin-top:3rem;}
.also-like-section h2{font-size:1.6rem;font-weight:700;margin-bottom:1rem;}
.also-like-swiper{overflow:hidden;}
.also-like-swiper .swiper-slide{width:260px;}
@media(max-width:600px){.also-like-swiper .swiper-slide{width:230px;}}

/* ----- CARD --------------------------------------------------------- */
.product-card-new{
  width:260px;min-width:260px;max-width:260px;border-radius:12px;
  background:#1b1e28;border:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;overflow:hidden;cursor:pointer;
  transition:transform .28s,box-shadow .28s;}
@media(max-width:600px){.product-card-new{width:230px;min-width:230px;max-width:230px;}}
.product-card-new:hover{transform:translateY(-6px);box-shadow:0 8px 36px rgba(11,21,40,.32);}

/* IMAGE -------------------------------------------------------------- */
.product-img-box{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;}
.product-img-box img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.product-card-new:hover .product-img-box img{transform:scale(1.06);}
.product-img-box::after{display:none;}

/* PRICE -------------------------------------------------------------- */
.product-price-from-overlay{
  position:absolute;bottom:.6rem;left:.6rem;background:rgba(17,19,26,.82);
  backdrop-filter:blur(4px);padding:.35rem .55rem;font-size:.85rem;
  border-radius:6px;color:#fff;pointer-events:none;z-index:5;}

/* BADGES ------------------------------------------------------------- */
.product-badge-new{
  position:absolute;top:.6rem;left:.6rem;padding:.35rem .6rem;font-size:.75rem;
  font-weight:600;border-radius:6px;text-transform:uppercase;color:#fff;}
.badge-hot-offer,.badge-hot{background:#e63946;}
.badge-bundle{background:#20c997;}
.badge-time-limited{background:#ffa94d;}
.badge-preorder{background:#4dabf7;}
.badge-gift-inside{background:#845ef7;}
.badge-updated{background:#51cf66;}

/* CONTENT ------------------------------------------------------------ */
.product-content{flex:1;display:flex;flex-direction:column;gap:.55rem;padding:1rem 1rem 1.3rem;}
.product-title{font-size:1rem;font-weight:600;color:#fff;}
.product-desc{
  font-size:.9rem;color:var(--nt-text-dim);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.product-desc .ql-editor{overflow:visible!important;padding:0;max-height:none!important;}
.order-btn{
  margin-top:auto;align-self:flex-start;padding:7px 18px;border:none;border-radius:6px;
  background:var(--nt-primary);color:#fff;font-weight:600;font-size:.9rem;
  cursor:pointer;transition:background .18s;}
.order-btn:hover{background:var(--nt-primary-hover);}

/* === MISC =========================================================== */
h2{position:relative;padding-bottom:.4rem;}h2::after{content:none;}
button:active,.custom-order-btn:active,.product-card-new:active{transform:translateY(1px);filter:brightness(.92);transition:transform .12s,filter .12s;}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}
main section{animation:fadeUp .8s ease-out both;}

.menu .category:hover + .subcategory-list,
.menu .subcategory-list:hover{
  display:block;
}

/* 2. Фон и отступы, чтобы список читался */
.subcategory-list{
  padding-left:4px;
  background:rgba(0,0,0,.15);
  border-radius:4px;
}

/* 3. Чёткое наведение на саб-категорию */
.menu .subcategory{
  padding:6px 10px;
  border-radius:4px;
}
.menu .subcategory:hover{
  background:rgba(255,255,255,.05);
  color:#fff;
}

/* ===== Patch 2025-07-04b ================================= */
/* 1. Fix spoiler arrows rendering */
.spoiler summary::after{
  content:"▼";
  font-size:18px;
  color:#fff;
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  transition:transform .25s;
}
.spoiler[open] summary::after{
  content:"▲";
  transform:translateY(-50%) rotate(0deg);
}

/* 2. Better responsive for < 900px */
@media(max-width:900px){
  .product-layout{
    flex-direction:column;
  }
  .product-description-column,
  .product-options-column{
    min-width:0;
    max-width:100%;
    flex:1 1 auto;
  }
}

/* 3. Ensure sidebar fills width at <=500px (already set but reaffirm) */
@media(max-width:500px){
  .sidebar{
    width:100%;
  }
}



/* === Mobile stretch fix 2025-07-04c === */
@media(max-width:900px){
  .product-layout{
    padding:24px 16px;
    gap:24px;
  }
  .product-description-column,
  .product-options-column,
  .sidebar{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
}

/* Fix wrap on very small screens */
@media(max-width:500px){
  .product-layout{
    padding:20px 12px;
  }
  .sidebar{
    padding:16px;
  }
}

/* Ensure spoiler arrows inherit font family to avoid glyph fallback */
.spoiler summary::after{
  font-family:inherit;
}


.breadcrumbs {
  font-size: 14px;
  margin: 12px 0 24px;
  white-space: nowrap;
  overflow-x: auto;
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}
.breadcrumbs li {
  display: flex;
  align-items: center;
}
.breadcrumbs li + li::before {
  content: "›";
  margin: 0 6px;
  color: #777;
}
.breadcrumbs a {
  color: #3590ff;
  text-decoration: none;
}
.breadcrumbs a:hover { text-decoration: underline; }
.nav-svg svg {
  width: 28px;
  height: 28px;
  vertical-align: -3px;
  margin-right: 6px;
}

@media (max-width: 640px) {
  .nav-svg svg { width: 16px; height: 16px; }
}

/* ===== Content pack: SunEditor/Quill output on Product page ===== */
.product-description,
.product-footer-description,
.spoiler-content {
  line-height: 1.65;
  color: #e8e8e8;
}

/* Универсально: если контент уже завернут в .ql-editor */
.product-description .ql-editor,
.product-footer-description .ql-editor,
.spoiler-content .ql-editor {
  line-height: 1.65;
  color: #e8e8e8;
  overflow: visible !important;
  padding: 0;
  max-height: none !important;
}

/* Типографика */
.product-description p,
.product-footer-description p,
.spoiler-content p { margin: .6rem 0; }

.product-description h1,
.product-description h2,
.product-description h3,
.product-footer-description h1,
.product-footer-description h2,
.product-footer-description h3,
.spoiler-content h1,
.spoiler-content h2,
.spoiler-content h3 {
  margin: .9rem 0 .5rem;
  line-height: 1.22;
  color: #fff;
}

.product-description a,
.product-footer-description a,
.spoiler-content a {
  color: #55a8ff;
  text-decoration: underline;
}

/* Списки */
.product-description ul, .product-description ol,
.product-footer-description ul, .product-footer-description ol,
.spoiler-content ul, .spoiler-content ol {
  margin: .6rem 0 .6rem 1.2rem;
  padding-left: 1.1rem;
}
.product-description li,
.product-footer-description li,
.spoiler-content li { margin: .25rem 0; }


/* Цитаты */
.product-description blockquote,
.product-footer-description blockquote,
.spoiler-content blockquote {
  border-left: 3px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  padding: .7rem .9rem;
  margin: .9rem 0;
  border-radius: 6px;
  color: #dfe4f2;
}

/* Код */
.product-description pre,
.product-footer-description pre,
.spoiler-content pre {
  background: #1b1f2b;
  color: #eaeefc;
  padding: .8rem 1rem;
  border-radius: 8px;
  overflow: auto;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size: .95rem;
}
.product-description code,
.product-footer-description code,
.spoiler-content code {
  background: #1b1f2b;
  color: #eaeefc;
  padding: .15rem .35rem;
  border-radius: 6px;
}

/* Tables inside Product content (fit column width + wrap content) */
.product-description,
.product-footer-description,
.spoiler-content {
  overflow-x: hidden; /* на всякий случай, но основной контроль — перенос в ячейках */
}

/* Базовый контейнер таблицы: не шире колонки */
.product-description table,
.product-footer-description table,
.spoiler-content table {
  width: auto !important;        /* занимать всю ширину колонки */
  max-width: 100% !important;
  table-layout: fixed !important;/* фиксированная сетка — помогает переносам */
  display: table !important;     /* исключаем inline-table, чтобы не вылезала */
  border-collapse: collapse;
  box-sizing: border-box;
  margin: 1rem 0;
  background: #1b1e28;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  overflow: hidden;              /* скругления по краям */
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* Заголовок: выразительный фон, контрастный текст */
.product-description thead th,
.product-footer-description thead th,
.spoiler-content thead th {
  background: linear-gradient(180deg,#262b3d 0%,#20253a 100%);
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Ячейки: компактные отступы + перенос длинных слов/URL */
.product-description th, .product-description td,
.product-footer-description th, .product-footer-description td,
.spoiler-content th, .spoiler-content td {
  padding: .65rem .85rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: top;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* “Зебра” и hover подсветка строк */
.product-description tbody tr:nth-child(even) td,
.product-footer-description tbody tr:nth-child(even) td,
.spoiler-content tbody tr:nth-child(even) td {
  background: rgba(255,255,255,.03);
}
.product-description tbody tr:hover td,
.product-footer-description tbody tr:hover td,
.spoiler-content tbody tr:hover td {
  background: rgba(255,255,255,.05);
}

/* Картинки/медиа внутри ячеек — вписать в ячейку */
.product-description td img,
.product-footer-description td img,
.spoiler-content td img,
.product-description td video,
.product-footer-description td video,
.spoiler-content td video {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* Мелкий тюнинг на мобильных — чуть меньше шрифт в таблицах */
@media (max-width: 600px) {
  .product-description table,
  .product-footer-description table,
  .spoiler-content table {
    font-size: .95rem;
  }
}

/* Слайдер внутри контента (шаблон из SunEditor templates) */
.product-description .nt-slider,
.product-footer-description .nt-slider,
.spoiler-content .nt-slider {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: #0f1218;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  display: block;
  max-width: 100%;
  margin: 1rem auto;
  user-select: none;
  cursor: pointer;
}
.nt-slides { display: flex; transition: transform .45s ease; will-change: transform; }
.nt-slide { min-width: 100%; user-select: none; }
.nt-slide img {
  display: block; width: 100%; height: auto; object-fit: cover;
  -webkit-user-drag: none; user-drag: none; cursor: grab;
}
.nt-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(17,19,26,.72); backdrop-filter: blur(4px);
  color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: opacity .2s ease, background .2s ease; z-index: 3;
}
.nt-arrow:hover { background: rgba(17,19,26,.9); }
.nt-prev { left: 10px; }
.nt-next { right: 10px; }
.nt-dots {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 10px; display: flex; gap: .4rem; z-index: 3;
}
.nt-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,.35); cursor: pointer; padding: 0; }
.nt-dot.active { background: #fff; }
/* Убрать внешние отступы у suneditor-обёрток внутри слайдов */
.nt-slide .se-component,
.nt-slide .se-image-container,
.nt-slide figure {
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; width: 100% !important;
}
.nt-slide .se-component img,
.nt-slide figure img { display: block; width: 100%; height: auto; object-fit: cover; }

/* SunEditor content — inside "You may also like" cards */
.also-like-section .product-desc .ql-editor {
  line-height: 1.55;
  color: var(--nt-text-dim);
  font-size: .9rem;
  /* убрать внутренние отступы Quill/SunEditor */
  padding: 0;
}

/* Типографика в карточке — компактная и без внешних отступов */
.also-like-section .product-desc .ql-editor p { margin: 0; }
.also-like-section .product-desc .ql-editor h1,
.also-like-section .product-desc .ql-editor h2,
.also-like-section .product-desc .ql-editor h3 {
  display: inline;
  margin: 0;
  font-size: 1em;
  font-weight: 600;
  color: #fff;
}

/* Ссылки */
.also-like-section .product-desc .ql-editor a {
  color: #55a8ff;
  text-decoration: underline;
}

/* Списки — компактно, без внешних отступов */
.also-like-section .product-desc .ql-editor ul,
.also-like-section .product-desc .ql-editor ol {
  margin: 0;
  padding-left: 1.1rem;
}
.also-like-section .product-desc .ql-editor li { margin: 0; }

/* Медиа внутри карточки: не ломаем высоту карточки */
.also-like-section .product-desc .ql-editor img,
.also-like-section .product-desc .ql-editor video,
.also-like-section .product-desc .ql-editor iframe {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: .4rem 0;
}

/* Тяжёлые блоки делаем компактнее в карточке */
.also-like-section .product-desc .ql-editor table,
.also-like-section .product-desc .ql-editor pre,
.also-like-section .product-desc .ql-editor blockquote {
  font-size: .9em;
  margin: .3rem 0;
  max-width: 100%;
  overflow: hidden;
  border-radius: 6px;
}

/* Уже есть общий хак для карточек — оставляем */
.product-desc .ql-editor{
  overflow:visible!important;
  padding:0;
  max-height:none!important;
}

.card-short-description {
  margin-left: 20px;
  padding: 0;
}

/* Уже есть общий хак для карточек — оставляем */
.product-desc .ql-editor{
  overflow:visible!important;
  padding:0;
  max-height:none!important;
}

.card-short-description {
  margin-left: 20px;
  padding: 0;
}