/*
Theme Name: shopingbro-dark-3d
Author: you
Version: 1.3.2
Text Domain: shopingbro-dark-3d
*/

/* ===== ЗМІННІ ===== */
:root{
  --accent:#d4af37;
  --bg:#0b0b0e;
  --bg-2:#111218;
  --text:#e9e9ef;
  --line:#22242c;
  --glow:rgba(212,175,55,.4);
  --logo-h:130px; /* розмір лого */
}

/* ===== БАЗА ===== */
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  margin:0;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
.container{width:min(1200px,100% - 32px);margin-inline:auto;}

/* ===== ХЕДЕР ===== */
.header{background:none;border:0;}
.header-hero.gold{
  position:relative;min-height:200px;overflow:hidden;
  border-bottom:1px solid #1a1c24;
  background:
    radial-gradient(120% 80% at 50% 0%, #12141c 0%, #090b11 70%),
    linear-gradient(180deg,#0c0e14 0%, #0a0b10 100%);
}
.header-hero.gold .header-glow{
  position:absolute;inset:auto 0 0 0;height:120px;
  background:radial-gradient(60% 40% at 50% 0%, rgba(212,175,55,.45) 0%, rgba(212,175,55,0) 70%);
  filter:blur(14px);pointer-events:none;z-index:1;
}

/* Хедер-ґрід */
.hero-inner{
  height:100%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  padding:0 8px;
  position:relative;
  z-index:2;
}
.brand-block{display:contents;}

/* Лого */
.brand-logo{grid-column:1;justify-self:start;}
.brand-logo img,.custom-logo{max-height:var(--logo-h);width:auto;display:block;}

/* Назва */
.brand-3d{grid-column:2;justify-self:center;text-decoration:none;}
.brand-top.gold{
  font-weight:900;letter-spacing:.5px;line-height:1;
  font-size:clamp(40px,6vw,72px);
  background:linear-gradient(180deg,#fff6c9 0%,#f3d480 20%,#d4af37 50%,#b98c1e 75%,#7a5a13 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 1px 0 #fff2,0 0 28px rgba(212,175,55,.45),0 2px 0 #000;
}

/* Контакти */
.contact-head{
  grid-column:3;justify-self:end;
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;line-height:1.2;
}
.contact-link{color:var(--text);text-decoration:none;opacity:.95;}
.contact-link:hover{text-decoration:underline;}
.sep{display:none;}

/* ===== ГОЛОВНЕ МЕНЮ ===== */
.main-nav-bar{
  border-bottom:1px solid #1a1c24;
  background:linear-gradient(180deg,#0f1119 0%, #0c0e14 100%);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.main-nav{display:flex;gap:12px;list-style:none;margin:0;padding:10px 0;}
.main-nav a{
  display:block;padding:10px 14px;border-radius:14px;background:#0f1119;border:1px solid #1a1c24;
  box-shadow:inset 0 2px 0 #000,0 0 18px rgba(0,0,0,.25);
  white-space:nowrap;line-height:1;color:var(--text);text-decoration:none;
}
.main-nav a:hover,.main-nav .current-menu-item > a{
  box-shadow:0 0 0 1px var(--accent) inset,0 0 22px var(--glow);
  text-decoration:none;
}

/* ===== 3 КОЛОНКИ (універсальна сітка) ===== */
.container.three-col{
  display:grid;
  grid-template-columns:280px 1fr 300px;
  gap:24px;
  padding:24px 8px;
  align-items:start;
}
.left,.right,.center{min-width:0;}

/* ===== КАРТКИ / ВІДЖЕТИ ===== */
.card-3d{
  background:radial-gradient(120% 120% at 50% 0%, #141622 0%, #0c0e15 100%);
  border:1px solid #1a1c24;border-radius:18px;padding:16px;
  box-shadow:
    0 8px 24px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 0 32px -8px var(--glow);
}
.widget{margin:0 0 16px;}
.widget .widget-title{margin:0 0 10px;font-weight:700;color:#fff;}
.widget ul{list-style:none;padding:0;margin:0;}
.widget li{
  padding:8px 10px;border-radius:12px;background:#0f1119;border:1px solid #1a1c24;margin-bottom:8px;
}
.widget li a{display:block;}

/* ===== АКОРДЕОН ЛІВОЇ КОЛОНКИ ===== */
.sb-accordion{list-style:none;margin:0;padding:0;}
.sb-accordion li{position:relative;}
.sb-accordion ul.children{margin:8px 0 0 12px;padding-left:10px;border-left:1px dashed #1f2230;display:none;}
.sb-accordion li.open > ul.children{display:block;}
/* Кнопка */
.sb-acc-toggle{
  float:right; /* під ваш HTML із кнопкою перед <a> */
  width:22px;height:22px;border-radius:8px;border:1px solid #1a1c24;background:#0f1119;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);margin-right:8px;vertical-align:middle;
}
.sb-acc-toggle::before{content:'▸';display:block;line-height:20px;text-align:center;font-size:12px;color:#cfcfcf;}
.sb-accordion li.open > .sb-acc-toggle::before{content:'▾';}

/* ===== ФУТЕР ===== */
.footer{
  border-top:1px solid var(--line);
  padding:20px 8px;
  color:#9aa0aa;
  background:#0b0c11;
}

/* ===== WooCommerce: тримаємо 3 колонки на магазині/категоріях ===== */
body.post-type-archive-product .container > .grid-3,
body.tax-product_cat .container > .grid-3{
  display:grid !important;
  grid-template-columns:280px 1fr 300px !important;
  gap:24px !important;
  align-items:start !important;
}
body.post-type-archive-product .container > .grid-3 > aside.card:first-child,
body.tax-product_cat .container > .grid-3 > aside.card:first-child{grid-column:1 !important;}
body.post-type-archive-product .container > .grid-3 > main.card,
body.tax-product_cat .container > .grid-3 > main.card{grid-column:2 !important;min-width:0 !important;}
body.post-type-archive-product .container > .grid-3 > aside.card:last-child,
body.tax-product_cat .container > .grid-3 > aside.card:last-child{grid-column:3 !important;}
/* скидання фулл-ширин/флоатів усередині */
body.post-type-archive-product .grid-3 main,
body.post-type-archive-product .grid-3 #primary,
body.tax-product_cat .grid-3 main,
body.tax-product_cat .grid-3 #primary{
  float:none !important;width:auto !important;max-width:none !important;margin:0 !important;padding:0 !important;display:block !important;
}
body.post-type-archive-product .grid-3 *,
body.tax-product_cat .grid-3 *{box-sizing:border-box;max-width:100%;}
/* опційно: ховаємо блогові віджети у правій колонці магазину */
body.post-type-archive-product .grid-3 aside.card .wp-block-archives-list,
body.post-type-archive-product .grid-3 aside.card .wp-block-categories-list,
body.tax-product_cat .grid-3 aside.card .wp-block-archives-list,
body.tax-product_cat .grid-3 aside.card .wp-block-categories-list{display:none !important;}

/* ===== АДАПТИВ ===== */
@media (max-width:1200px){ .brand-top.gold{font-size:56px;} }
@media (max-width:1024px){
  .brand-top.gold{font-size:40px;}
  .brand-logo img,.custom-logo{max-height:72px;}
  .container.three-col{grid-template-columns:1fr;}
  .right{order:3;} .left{order:2;} .center{order:1;}

  body.post-type-archive-product .container > .grid-3,
  body.tax-product_cat .container > .grid-3{
    grid-template-columns:1fr !important;gap:16px !important;
  }
  body.post-type-archive-product .container > .grid-3 > *,
  body.tax-product_cat .container > .grid-3 > *{grid-column:1 !important;}
}
/* === Single Product: тримаємо 3 колонки, як у магазині === */
body.single-product .container > .grid-3{
  display:grid !important;
  grid-template-columns:280px 1fr 300px !important;
  gap:24px !important;
  align-items:start !important;
}

/* Розставляємо колонки за DOM-порядком */
body.single-product .container > .grid-3 > aside.card:first-child{ grid-column:1 !important; }
body.single-product .container > .grid-3 > main.card{ grid-column:2 !important; min-width:0 !important; }
body.single-product .container > .grid-3 > aside.card:last-child{ grid-column:3 !important; }

/* Скидаємо флоати/100%-ширини, які розтягують контент */
body.single-product .grid-3 main,
body.single-product .grid-3 #primary,
body.single-product .grid-3 .content{
  float:none !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
}

/* Захист від роздування всередині центральної колонки */
body.single-product .grid-3 *{ box-sizing:border-box; max-width:100%; }

/* Поширений кейс: галерея/саммарі не повинні ламати грід */
body.single-product .product,
body.single-product .product .summary,
body.single-product .product .images,
body.single-product .woocommerce-product-gallery{
  max-width:100% !important;
}

/* Адаптив */
@media (max-width:1024px){
  body.single-product .container > .grid-3{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  body.single-product .container > .grid-3 > *{ grid-column:1 !important; }
}
/* Пошук у лівій колонці */
.grid-3 aside.card .search-form{display:flex;gap:8px;align-items:stretch}
.grid-3 aside.card .search-form label{flex:1}
.grid-3 aside.card .search-form input[type="search"]{
  width:100%;height:38px;border-radius:10px;border:1px solid #1a1c24;
  background:#0f1119;color:var(--text);padding:0 10px;outline:none;
}
.grid-3 aside.card .search-form input[type="search"]::placeholder{color:#9aa0aa}
.grid-3 aside.card .search-form .search-submit,
.grid-3 aside.card .search-form button[type="submit"]{
  height:38px;padding:0 12px;border-radius:10px;border:1px solid #1a1c24;
  background:linear-gradient(180deg,#1a1d27 0%, #12141c 100%);
  color:var(--text);cursor:pointer;white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.grid-3 aside.card .search-form .search-submit:hover{box-shadow:0 0 0 1px var(--accent) inset,0 0 18px var(--glow)}
/* ===== МОБІЛЬНИЙ ФІКС ДЛЯ МАГАЗИНУ/КАТЕГОРІЙ/ТОВАРУ ===== */
@media (max-width: 900px){
  /* 1) Завжди одна колонка */
  body.post-type-archive-product .container > .grid-3,
  body.tax-product_cat .container > .grid-3,
  body.single-product .container > .grid-3{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    grid-auto-flow: row dense !important;
  }

  /* 2) Кожен великий блок займає весь рядок */
  body.post-type-archive-product .container > .grid-3 > *,
  body.tax-product_cat .container > .grid-3 > *,
  body.single-product .container > .grid-3 > *{
    grid-column: 1 !important;
  }

  /* 3) Прибираємо все, що може «накладатись» */
  body.post-type-archive-product .container > .grid-3 > aside.card,
  body.tax-product_cat .container > .grid-3 > aside.card,
  body.single-product .container > .grid-3 > aside.card,
  body.post-type-archive-product .container > .grid-3 > main.card,
  body.tax-product_cat .container > .grid-3 > main.card,
  body.single-product .container > .grid-3 > main.card{
    position: static !important;
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    z-index: auto !important;
  }

  /* 4) На випадок, якщо всередині є фікс-ширини */
  body.post-type-archive-product .grid-3 *,
  body.tax-product_cat .grid-3 *,
  body.single-product .grid-3 *{
    box-sizing: border-box;
    max-width: 100% !important;
  }
}
@media (max-width: 900px){
  /* один стовпець гарантовано */
  .container > .grid-3{ display:block !important; }

  /* кожен блок на всю ширину */
  .container > .grid-3 > aside.card,
  .container > .grid-3 > main.card{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    float:none !important;
    position:static !important;
    margin:0 0 16px !important;
    z-index:auto !important;
  }
}
/* ===== МОБІЛЬНИЙ ПОРТРЕТ-ФІКС ДЛЯ МАГАЗИНУ/КАТЕГОРІЙ/ТОВАРУ ===== */
@media (max-width: 900px) and (orientation: portrait){
  /* 1) Контейнер лише один стовпець */
  body.post-type-archive-product .container > .grid-3,
  body.tax-product_cat .container > .grid-3,
  body.single-product .container > .grid-3{
    display:block !important;        /* простіше за grid на цьому брейкпоінті */
  }

  /* 2) Кожен блок — на всю ширину і один під одним */
  body.post-type-archive-product .container > .grid-3 > aside.card,
  body.post-type-archive-product .container > .grid-3 > main.card,
  body.tax-product_cat .container > .grid-3 > aside.card,
  body.tax-product_cat .container > .grid-3 > main.card,
  body.single-product .container > .grid-3 > aside.card,
  body.single-product .container > .grid-3 > main.card{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    float:none !important;
    position:static !important;
    clear:both !important;
    margin:0 0 16px !important;
    z-index:auto !important;
  }

  /* 3) На випадок внутрішніх фікс-ширин/оверлеїв */
  body.post-type-archive-product .grid-3 *,
  body.tax-product_cat .grid-3 *,
  body.single-product .grid-3 *{
    box-sizing:border-box;
    max-width:100% !important;
  }
}
.right .sb-right-list{list-style:none;margin:0;padding:0}
.right .sb-right-list .sb-item{margin:0 0 10px;padding:0}
.right .sb-right-list .sb-link{display:block;line-height:1.35;color:var(--text);text-decoration:none}
.right .sb-right-list .sb-link:hover{text-decoration:underline}
.right .sb-right-list .sb-meta{display:block;opacity:.7;font-size:.85rem;margin-top:2px}
.right .sb-more{margin-top:10px}
.right .sb-more .button{display:inline-block;padding:8px 12px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--text)}
.right .sb-more .button:hover{box-shadow:0 0 0 1px var(--accent) inset,0 0 14px var(--glow);text-decoration:none}
.right .sb-right-list{list-style:none;margin:0;padding:0}
.right .sb-right-list .sb-item{margin:0 0 10px}
.right .sb-right-list .sb-link{display:block;line-height:1.35;color:var(--text);text-decoration:none}
.right .sb-right-list .sb-link:hover{text-decoration:underline}
.right .sb-right-list .sb-meta{display:block;opacity:.7;font-size:.85rem;margin-top:2px}
.right .sb-more{margin-top:10px}
.right .sb-more .button{display:inline-block;padding:8px 12px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--text)}
.right .sb-more .button:hover{box-shadow:0 0 0 1px var(--accent) inset,0 0 14px var(--glow);text-decoration:none}
.right .sb-right-list{list-style:none;margin:0;padding:0}
.right .sb-right-list .sb-item{margin:0 0 10px}
.right .sb-right-list .sb-link{display:block;line-height:1.35;color:var(--text);text-decoration:none}
.right .sb-right-list .sb-link:hover{text-decoration:underline}
.right .sb-right-list .sb-meta{display:block;opacity:.7;font-size:.85rem;margin-top:2px}
.right .sb-more{margin-top:10px}
.right .sb-more .button{display:inline-block;padding:8px 12px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--text)}
.right .sb-more .button:hover{box-shadow:0 0 0 1px var(--accent) inset,0 0 14px var(--glow);text-decoration:none}
/* Правий блок у WooCommerce, вставлений через JS */
.container > .grid-3 > .sb-wc-right { grid-column: 3; min-width:0; }

/* Список у правій колонці */
.sb-wc-right .sb-right-list{list-style:none;margin:0;padding:0}
.sb-wc-right .sb-right-list .sb-item{margin:0 0 10px}
.sb-wc-right .sb-right-list .sb-link{display:block;line-height:1.35;color:var(--text);text-decoration:none}
.sb-wc-right .sb-right-list .sb-link:hover{text-decoration:underline}
.sb-wc-right .sb-right-list .sb-meta{display:block;opacity:.7;font-size:.85rem;margin-top:2px}
.sb-wc-right .sb-more{margin-top:10px}
.sb-wc-right .sb-more .button{display:inline-block;padding:8px 12px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--text)}
.sb-wc-right .sb-more .button:hover{box-shadow:0 0 0 1px var(--accent) inset,0 0 14px var(--glow);text-decoration:none}

/* Мобільний вигляд: одна колонка */
@media (max-width:1024px){
  .container > .grid-3 > .sb-wc-right { grid-column: 1; }
}
/* ПРАВА КОЛОНКА (тимчасова візуалізація) */
/* Розмір заголовка можна змінити тут: */
.sb-right-title { font-size: 18px; margin: 0 0 8px; }
/* Ширину колонки підженемо пізніше під твою сітку */
#sb-right.right-col { margin: 24px 0; }
.sb-right-widget { padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
/* === SB ONE-SHOT FIX: чисто вставляємо віджети в готові колонки теми === */
add_action('wp_footer', function () {
  $left_id  = is_active_sidebar('sidebar-left')  ? 'sidebar-left'  : ( is_active_sidebar('left-sidebar')  ? 'left-sidebar'  : '' );
  $right_id = is_active_sidebar('sidebar-right') ? 'sidebar-right' : ( is_active_sidebar('right-sidebar') ? 'right-sidebar' : ( is_active_sidebar('sb_right') ? 'sb_right' : '' ) );

  echo '<div id="sb-donor-left" style="display:none">';
  if ($left_id)  { echo '<div class="sb-left">';  dynamic_sidebar($left_id);  echo '</div>'; }
  echo '</div>';

  echo '<div id="sb-donor-right" style="display:none">';
  if ($right_id) { echo '<div class="sb-right">'; dynamic_sidebar($right_id); echo '</div>'; }
  echo '</div>';
  ?>
  <style>
    /* глушимо тимчасові вставки */
    .sb-force-sidebars, #sb-right.right-col { display:none !important; }
  </style>
  <script>
  (function(){
    // 1) Прибрати наші старі тимчасові блоки
    document.querySelectorAll('.sb-force-sidebars, #sb-right.right-col, aside.widget-area.card-3d .widget-title')
      .forEach(function(n){
        if (n && /Ліва колонка|Права колонка/.test(n.textContent||'')) n.closest('aside')?.remove();
      });

    // 2) Вставити ВІДЖЕТИ у готові місця теми
    var leftHost  = document.querySelector('main.container.three-col > aside.card');
    var rightHost = document.querySelector('main.container.three-col > aside.right');
    var L = document.querySelector('#sb-donor-left .sb-left');
    var R = document.querySelector('#sb-donor-right .sb-right');

    if (leftHost && L){ leftHost.innerHTML=''; leftHost.appendChild(L); }
    if (rightHost && R){ rightHost.innerHTML=''; rightHost.appendChild(R); }

    // 3) Прибрати донорів
    var d1=document.getElementById('sb-donor-left');  if(d1) d1.remove();
    var d2=document.getElementById('sb-donor-right'); if(d2) d2.remove();
  })();
  </script>
  <?php
}, 1000);