/* ============================================================
   Cyber Ghost — Responsive design (mobile / tablet / desktop)
   Loaded last so it wins over main.css & shop.css.
   ============================================================ */

/* ---------- Fluid typography & base ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video,canvas,svg{max-width:100%;height:auto}
.cg-wrap{width:100%;padding-inline:20px}

/* ---------- Header burger icon ---------- */
.cg-burger{position:relative;width:42px;height:38px;line-height:1}
.cg-burger::before{content:'\2630';font-size:18px;display:block;line-height:1}
.cg-burger[aria-expanded="true"]::before{content:'\2715'}

/* ---------- Language switcher compact ---------- */
.cg-lang-btn{padding:8px 11px}
.cg-lang-panel{z-index:120}

/* ---------- Tooltips (data-tip) ---------- */
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip);
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;
  background:#0a1326;color:var(--txt);border:1px solid var(--line2);
  padding:6px 10px;border-radius:8px;font-size:12px;white-space:nowrap;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:.18s;pointer-events:none;z-index:130
}
[data-tip]:hover::after{opacity:1;visibility:visible;transform:none}

/* ============================================================
   Large desktop >= 1400px
   ============================================================ */
@media(min-width:1400px){
  .cg-wrap{max-width:1320px}
  .cg-hero h1{font-size:60px}
}

/* ============================================================
   Desktop 1025–1399px  (default styles apply)
   ============================================================ */

/* ============================================================
   Laptop / small desktop 993–1024px  → keep row but tighten
   ============================================================ */
@media(max-width:1180px){
  .cg-menu ul,.cg-menu .cg-menu-list{gap:14px}
  .cg-menu a{font-size:13px}
  .cg-nav .cg-btn{padding:8px 12px;font-size:12.5px}
  .cg-cart-link{padding:8px 11px;font-size:12.5px}
}

/* ============================================================
   Tablet / mobile  ≤1024px  → menu stays horizontal (scrollable)
   ============================================================ */
@media(max-width:1024px){
  .cg-burger{display:none!important}
  .cg-nav{grid-template-columns:auto minmax(0,1fr) auto;gap:12px;padding:10px 14px;min-height:64px}
  .cg-menu{
    margin:0;display:flex;min-width:0;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;max-width:100%
  }
  .cg-menu::-webkit-scrollbar{display:none}
  .cg-menu ul,.cg-menu .cg-menu-list{flex-direction:row!important;flex-wrap:nowrap!important;gap:16px!important;justify-content:flex-start}
  .cg-menu a{white-space:nowrap;font-size:13.5px}
  .cg-logo img{width:40px;height:40px}
  .cg-logo span{font-size:16px}
  .cg-hero h1{font-size:40px}
  .cg-hero p{font-size:15px}
  .cg-about-hero{grid-template-columns:1fr;text-align:center}
  .cg-about-photo{max-width:320px;margin:0 auto}
  .cg-tool-layout{grid-template-columns:1fr}
  .cg-tool-aside{position:static}
  .cg-contact-grid{grid-template-columns:1fr}
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr)!important}
  .cg-dash-stats{grid-template-columns:repeat(2,1fr)}
  .cg-dash-grid{grid-template-columns:1fr}
  .woocommerce-account .woocommerce-MyAccount-navigation{width:100%;margin-bottom:18px}
  .woocommerce-account .woocommerce-MyAccount-content{width:100%}
}

/* ============================================================
   Large phone 561–768px
   ============================================================ */
@media(max-width:768px){
  .cg-wrap{padding-inline:16px}
  .cg-nav{padding:8px 16px;gap:10px}
  .cg-logo span{font-size:14px}
  .cg-hero{padding:46px 0 22px}
  .cg-hero h1{font-size:32px}
  .cg-hero-cta{gap:8px}
  .cg-hero-cta .cg-btn{padding:10px 16px;font-size:13px}
  .cg-tag{font-size:11.5px;padding:6px 12px}
  .cg-section{padding:32px 0}
  .cg-feats,.cg-grid,.cg-specs,.cg-steps{grid-template-columns:1fr!important}
  .cg-stats{grid-template-columns:repeat(2,1fr)}
  .cg-foot-grid{grid-template-columns:1fr;gap:26px}
  .cg-sec-head h2{font-size:20px}
  .cg-contact-head h1{font-size:30px}
  .courses-grid,.cg-courses-grid{grid-template-columns:1fr}
  .cg-course-card{flex-direction:row}
  .cg-course-thumb{width:130px;min-width:130px;height:auto}
  .cg-tool-media-placeholder{height:200px;font-size:54px}
  .cg-404-code{font-size:110px}
  /* Woocommerce tables scroll horizontally */
  .woocommerce-cart-form,.woocommerce-checkout-review-order,.woocommerce-order,.woocommerce-orders-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .woocommerce table.shop_table{min-width:520px}
  /* Checkout single column */
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2{width:100%;float:none}
  .woocommerce-checkout #customer_details{margin-bottom:18px}
  /* Auth forms */
  .woocommerce .woocommerce-form-login,.woocommerce .woocommerce-form-register{max-width:100%;padding:22px}
  .cg-social-row{grid-template-columns:1fr}
  .cg-paybox-row{flex-direction:column;align-items:flex-start;gap:4px}
  .cg-paybox-row b{font-size:16px}
  /* Menu dropdown full width already */
  .cg-lang-panel{width:min(92vw,300px)}
}

/* ============================================================
   Small phone <= 560px
   ============================================================ */
@media(max-width:560px){
  .cg-wrap{padding-inline:13px}
  .cg-nav{padding:7px 13px;gap:8px}
  .cg-logo img{width:30px;height:30px}
  .cg-logo span{display:none}
  .cg-nav .cg-account-btn{display:none}
  .cg-nav .cg-btn-label{display:none}
  .cg-cart-link{padding:8px 10px}
  .cg-lang-btn b{display:none}
  .cg-hero h1{font-size:27px}
  .cg-stats{grid-template-columns:1fr!important}
  .cg-stat b{font-size:24px}
  .cg-course-card{flex-direction:column}
  .cg-course-thumb{width:100%;min-width:0;height:140px}
  .cg-404-code{font-size:84px}
  .cg-404 h1{font-size:20px}
  .cg-404-actions{gap:8px}
  .cg-404-actions .cg-btn{padding:10px 14px;font-size:13px}
  .cg-form-table th{display:block;width:100%;padding:0 0 6px;text-align:start}
  .cg-form-table td{display:block}
  .cg-form-table{border-spacing:0 12px}
  .cg-dash-stats{grid-template-columns:repeat(2,1fr)}
  .cg-buybox{padding:18px}
  .cg-buybox-price b{font-size:24px}
  .cg-detail,.cg-tools-head,.cg-courses-head{padding:18px}
  .cg-lang-panel{width:min(94vw,260px);inset-inline:auto 0}
}

/* ============================================================
   Touch devices: bigger tap targets
   ============================================================ */
@media(hover:none){
  .cg-menu a{padding-top:8px;padding-bottom:8px}
  .cg-btn,.cg-btn-sm,.cg-cart-link,.cg-social-btn{min-height:42px}
  .cg-card:hover,.cg-feat:hover,.cg-course-card:hover,.cg-dash-card:hover{transform:none}
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  #cg-matrix{display:none}
}

/* ============================================================
   Print
   ============================================================ */
@media print{
  .cg-header,.cg-footer,#cg-matrix,.cg-progress,.cg-lang,.cg-social-login{display:none!important}
  body.cg-body{background:#fff;color:#000}
}