:root {
    --yellow: #fed700;
    --text: #222;
    --muted: #f6f6f8;
    --container: 1200px;
  }
  
  * {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    font-family: Inter, system-ui, Arial, sans-serif;
    color: var(--text);
  }
  
  a {
    text-decoration: none;
    color: inherit;
  }
  .logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;         
    padding: 0 14px;
    font-weight: 800;
  }
  
  .logo img {
    max-height: 40px;   
    display: block;
  }
  
  .container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 16px;
  }
  
  .topbar {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 8px 0;
  }
  
  .topbar__wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

.logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;      
    height: 30px;      
    border: 2px dashed #ccc;
    border-radius: 16px;
    font-weight: 800;
    color: #999;
    font-size: 20px;
    background: #fff;
    text-decoration: none;
  }
  
  .topbar .row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 8px 0;
  }
  .social {
    display: flex;
    gap: 10px;
  }
  .social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid #fed700; 
    border-radius: 6px;
    background: #fff;
    padding: 2px;
  }
  
  .social a img {
    max-width: 100%;
    max-height: 100%;
    display: block;
  }
  .header {
    position: static;
    top: 0;
    background: #fff;
    border-bottom: 1px solid #eee;
    z-index: 30;
  }
  
  .header .wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
  }


  

  .search {
    display: flex;
    gap: 8px;
    width: 100%;
  }
  
  .search input {
    flex: 1;
    height: 46px;
    border: 1px solid #e4e4e4;
    border-radius: 28px;
    padding: 0 16px;
  }
  
  .search button {
    height: 46px;
    border: none;
    background: var(--yellow);
    border-radius: 28px;
    padding: 0 18px;
    font-weight: 800;
    cursor: pointer;
  }
  
  .tools {
    display: flex;
    gap: 12px;
    align-items: center;
  }
  
  .tool {
    position: relative;
    display: inline-flex;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f7f7f7;
    align-items: center;
    justify-content: center;
  }
  
  .badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #000;
    color: #fff;
    border-radius: 9px;
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1;
  }
  
  .menubar {
    background: #fff;
    border-bottom: 1px solid #eee;
  }
  
  .menubar .row {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 50px;
  }
  
  .menu-cat {
    position: relative;
  }
  
  .menu-cat > button {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--yellow);
    border: none;
    border-radius: 14px;
    padding: 10px 14px;
    font-weight: 800;
    cursor: pointer;
  }
  
  .dropdown {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    padding: 8px;
    width: 240px;
    display: none;
    z-index: 20;
  }
  
  .menu-cat.open .dropdown {
    display: block;
  }
  
  .dropdown a {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-radius: 10px;
    color: #333;
  }
  
  .dropdown a:hover {
    background: #f7f7f7;
  }
  
  .nav {
    list-style: none;
    display: flex;
    gap: 22px;
  }
  
  .nav > li {
    list-style: none;
    position: relative;
  }
  
  .nav > li > a {
    display: flex;
    gap: 6px;
    padding: 10px 0;
    font-weight: 800;
  }
  
  .nav > li .sub{
    position: absolute;
    left: 0;
    top: 100%;           
    margin-top: 8px;    
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: 8px;
    min-width: 200px;
    display: none;
    z-index: 2000;      
  }
  

  .nav > li:hover .sub,
  .nav > li .sub:hover{
  display: block;
}
  .nav > li .sub::before{
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -12px;
    height: 12px;        

  }
  .sub a {
    display: block;
    padding: 10px;
    border-radius: 8px;
    color: #555;
  }
  
  .sub a:hover {
    background: #f5f5f5;
    color: #000;
  }
  
  .slider {
    margin: 16px 0;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }
  
  .slider-track {
    display: flex;
    transition: transform .45s ease;
  }
  

.slider .slide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    height: 340px;
    background: #f6f6f6;
    padding: 0 40px;
    color: #222;
    min-width: 100%;     
  }
  
  
  .banner-content {
    max-width: 500px;
  }
  .banner-content .sub {
    color: #0066ff;
    font-weight: 700;
    margin: 0 0 10px;
  }
  .banner-content h2 {
    font-size: 34px;
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 14px;
  }
  .banner-content h2 span {
    color: #ff2d2d;
  }
  .banner-content p {
    font-size: 16px;
    color: #555;
    margin-bottom: 20px;
  }
  
  
  .btn.yellow {
    display: inline-block;
    background: var(--yellow);
    padding: 14px 22px;
    border-radius: 12px;
    font-weight: 800;
    color: #000;
    text-align: center;
  }
  
  
  .banner-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  
  
  @media (max-width: 1010px) {
    .slider .slide {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        align-items: center;
        background: #f6f6f6;
        padding: clamp(10px, 3vw, 40px); 
        gap: 20px;
      }
      
      
      .banner-content{
        font-size: clamp(14px, 2.2vw, 18px); 
      }
      .banner-content h2{          
        font-size: 1.1em;
        line-height: 1.15;
        margin: 0 0 .4em;
      }
      .banner-content p{           
        font-size: 1em;
        margin: 0 0 1em;
      }
      
      
      .banner-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
        max-height: 320px; 
      }
      .slide--gift .banner-content h2 {
        font-size: clamp(18px, 1.6vw, 20px); 
        line-height: 1.2;
      }
    
      .slide--gift .banner-content p {
        font-size: clamp(14px, 1vw, 16px); 
        margin-bottom: 12px; 
      }
    
      .slide--gift .btn.yellow {
        padding: 10px 18px; 
        font-size: clamp(14px, 1.4vw, 16px);
        margin-top: 20px; 
      }
    
      .slide--gift .banner-image img {
        max-height: 260px; 
      }
  }
  
  
.slide--sale { background:#f6f6f6; }

.sale-title {
  margin: 0 0 10px;
  line-height: 1.05;
  font-weight: 900;
  font-size: clamp(36px, 6vw, 72px);  
  color:#222;
}

.sale-word { display:inline-block; margin-right: 12px; }
.sale-accent { color:#ff3a2f; }       

.sale-lead {
  margin: 12px 0 24px;
  font-size: clamp(18px, 2.6vw, 34px);
  color:#59606a;
  letter-spacing:.3px;
}


.btn.btn-lg {
  padding: 16px 28px;
  border-radius: 18px;
  font-size: clamp(16px, 1.9vw, 22px);
}


.slide--sale .banner-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: translateY(8px); 
}


@media (max-width: 1000px){
  .slide--sale .banner-image img { transform: none; }
}

  .dots {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
  }
  
  .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #bbb;
    border: 2px solid #fff;
    opacity: .9;
    cursor: pointer;
  }
  
  .dot.active {
    background: #333;
  }
  
  .features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  
  .feature {
    background: var(--muted);
    border-radius: 16px;
    padding: 18px;
    text-align: center;
  }
  
  .feature .ph {
    height: 140px;
    background: #f5f5f5;
    border-radius: 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  
  .feature .ph img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  
  
  .feature .btn {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 16px;
    border-radius: 10px;
    background: #000;
    color: #fff;
  }
  
  .feature .btn.alt {
    background: transparent;
    color: #000;
    border: 2px solid var(--yellow);
  }
  
  .products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 18px 0;
  }
  
  .card {
    border: 1px solid #eee;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
  }
  
  .card .ph {
    height: 220px;
    background: #e9e9e9;
  }
  
  .card .body {
    padding: 12px;
  }
  
  .card h4 {
    margin: 6px 0 8px;
  }
  
  .add button {
    background: var(--yellow);
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    font-weight: 800;
    cursor: pointer;
  }
  

  
.product-card{
    border:1px solid #eee;
    border-radius:20px;
    overflow:hidden;
    background:#fff;
    display:flex;
    flex-direction:column;
    box-shadow:0 2px 10px rgba(0,0,0,.03);
  }
  
  .product-card__media{
    position:relative;
    padding:14px;
    border-bottom:1px solid #f0f0f0;
  }
  .product-card__media img{
    display:block;
    width:100%;
    height:280px;
    object-fit:cover;
    border-radius:16px;
    background:#eaeaea;
  }
  .product-card__fav{
    position:absolute;
    right:24px;
    top:22px;
    width:44px;height:44px;
    border:none;border-radius:50%;
    background:#fff;
    box-shadow:0 6px 16px rgba(0,0,0,.12);
    font-size:20px; line-height:1;
    cursor:pointer;
  }
  
  .product-card__body{ padding:14px 18px 18px; }
  .product-card__title{ margin:12px 0 8px; font-size:22px; line-height:1.25; }
  .product-card__title a{ color:#0c62d6; font-weight:800; }
  
  .product-card__specs{
    margin:10px 0 16px; padding:0; list-style:none;
    color:#3e4650; font-size:16px;
    display:grid; gap:10px;
  }
  .product-card__specs .k{ font-weight:800; color:#222; }
  
  
  .product-card__foot{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; margin-top:6px;
  }
  .product-card__price{ font-size:24px; font-weight:900; }
  
  .product-card__btn{
    width:auto; padding:12px 18px; border-radius:12px;
    border:none; background:var(--yellow); font-weight:800; cursor:pointer;
  }
  
  
  .products{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  @media (max-width:1024px){ .products{ grid-template-columns:repeat(2,1fr);} }
  @media (max-width:1000px){ .products{ grid-template-columns:1fr; } .product-card__media img{ height:220px; } }
  
  .more {
    text-align: center;
    margin: 12px 0 24px;
  }
  
  .more a {
    display: inline-block;
    background: var(--yellow);
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 800;
  }
  
  .faq {
    margin: 32px 0;
  }
  
  .faq h2 {
    text-align: center;
    margin-bottom: 16px;
  }
  
  .faq details {
    background: #f5f5f5;
    margin: 10px 0;
    padding: 12px 16px;
    border-radius: 8px;
  }
  
  .faq summary {
    cursor: pointer;
  }
  
  .lead {
    max-width: 1000px;
    margin: 40px auto;
    text-align: center;
    color: #555;
  }
  
  .lead h2 {
    color: #111;
  }
  
  .contact {
    margin: 28px 0;
    padding: 18px;
    background: #f9f9f9;
    border-radius: 16px;
  }
  
  .form {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  
  .form .full {
    grid-column: 1 / -1;
  }
  
  .form input,
  .form textarea {
    width: 100%;
    height: 44px;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    padding: 0 12px;
  }
  
  .form textarea {
    height: 120px;
    padding: 10px 12px;
  }
  
  .form .btn {
    background: var(--yellow);
    border: none;
    border-radius: 10px;
    padding: 12px 18px;
    font-weight: 800;
    cursor: pointer;
  }
  
  .error {
    color: #d00;
    font-size: 13px;
    margin-top: 6px;
  }
  
  .toast {
    position: fixed;
    right: 16px;
    bottom: 16px;
    background: #0a0;
    color: #fff;
    padding: 12px 16px;
    border-radius: 10px;
    display: none;
  }
  
  .toast.show {
    display: block;
  }
  
  .footer-top {
    background: #fff;
    padding: 26px 0 12px;
  }
  
  .columns {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 28px;
  }
  
  .columns h4 {
    margin: 0 0 10px;
    color: #111;
  }
  
  .columns a {
    display: block;
    color: #666;
    padding: 6px 0;
  }
  
  .mbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(#fff, #fafafa);
    border-top: 1px solid #eee;
    display: none;
    z-index: 50;
  }
  
  .mbar .wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 10px 14px;
  }
  
  .mbar .it {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 14px;
  }
  
  .mbar .it .ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #f5f5f5;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .mbar .badge {
    top: -6px;
    right: -6px;
  }
  
  .copy {
    background: #eaeaea;
    padding: 12px 0;
    text-align: center;
    color: #333;
    font-size: 13px;
  }
  
  
  @media (max-width: 1024px) {
    .features {
      grid-template-columns: repeat(2, 1fr);
    }
    .products {
      grid-template-columns: repeat(2, 1fr);
    }
    .slider .slide {
      height: 260px;
    }
  }
  
  @media (max-width: 1000px) {
    .nav,
    .menubar {
      display: none;
    }
    .header .wrap {
      grid-template-columns: 1fr auto;
    }
    .search input {
      height: 44px;
    }
    .topbar .row {
      justify-content: center;
    }
    .features {
      grid-template-columns: 1fr;
    }
    .products {
      grid-template-columns: 1fr;
    }
    .slider .slide {
      height: 220px;
    }
    .columns {
      grid-template-columns: 1fr 1fr;
    }
    .mbar {
      display: block;
    }
    body {
      padding-bottom: 74px;
    }
  }
  
  @media (max-width: 520px) {
    .columns {
      grid-template-columns: 1fr;
    }
  }
  
  
  .menubar,
  .nav,
  .nav * {
    position: relative;
    z-index: 1000;
  }

  
  .slider,
  .hero,
  .banner,
  .banner-wrap {
    position: relative;
    z-index: 1;
  }
  
  
  .backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    opacity: 0;
    pointer-events: none;
    transition: .2s;
    z-index: 90;
  }
  
  .cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 90vw;
    background: #fff;
    transform: translateX(100%);
    transition: .25s;
    z-index: 100;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #eee;
    box-shadow: -20px 0 40px rgba(0, 0, 0, .08);
  }
  
  .cart-drawer.open {
    transform: none;
  }
  
  .backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }
  
  .cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 18px;
    border-bottom: 1px solid #eee;
    font-size: 22px;
    font-weight: 800;
  }
  
  .cart-items {
    flex: 1;
    overflow: auto;
  }
  
  .cart-row {
    display: grid;
    grid-template-columns: 64px 1fr 20px;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f1f1;
    background: #fafafa;
    margin: 12px;
    border-radius: 12px;
  }
  
  .cart-thumb {
    width: 64px;
    height: 48px;
    background: #e9e9e9;
    border-radius: 10px;
    overflow: hidden;
  }
  
  .cart-title {
    color: #666;
  }
  
  .cart-foot {
    padding: 16px;
    border-top: 1px solid #eee;
  }
  
  .total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 12px;
  }
  
  .btn {
    display: block;
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: 2px solid var(--yellow, #fed700);
    background: #fff;
    font-weight: 800;
    margin: 8px 0;
  }
  
  .btn.primary {
    background: var(--yellow, #fed700);
    border-color: var(--yellow, #fed700);
  }
  
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: #555;
    padding: 40px 0;
  }
  
  
  .tools {
    display: flex;
    gap: 12px;
    align-items: center;
  }
  
  .header-sum {
    min-width: 72px;
    text-align: right;
    font-weight: 800;
    color: #222;
  }
  
  .header-sum small {
    font-weight: 600;
    color: #777;
    margin-left: 4px;
  }
  
  
  
  @media (max-width: 1024px) {
    .header-sum {
      display: none !important;
    }
  }
  
  
  .tools {
    display: flex;
    gap: 12px;
    align-items: center;
  }
  
  .header-sum {
    margin-left: 4px;
  }
  
.mtrigger{
    display:none;
    width:100%;
    border:0;
    background:#fff;
    padding:12px 16px;
    font-weight:800;
    font-size:20px;
    line-height:1;
    text-align:left;
    border-bottom:1px solid #eee;
  }
  .mtrigger__icon{margin-right:10px; font-size:26px}
  
  
  @media (max-width:1000px){
    .mtrigger{display:flex; align-items:center}
    .menubar{display:none !important;}
  }
  
  

.mmenu{
    position:fixed;
    top:0; left:0; bottom:0; 
    width:min(440px, 92vw);
    background:#fff;
    transform:translateX(-100%); 
    box-shadow:24px 0 40px rgba(0,0,0,.16); 
    transition:transform .25s ease;
    z-index:1100;
    display:flex; flex-direction:column;
  }
  .mmenu.is-open{ transform:none; }
  
  
  .mmenu__backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.35);
    z-index:1090;
  }
  .mmenu__backdrop[hidden]{ display:none; }
  
  .mmenu__head{
    display:flex; justify-content:flex-end; align-items:center;
    padding:14px 16px; border-bottom:1px solid #eee;
  }
  .mmenu__close{ background:none; border:0; font-size:20px; font-weight:800; cursor:pointer }
  
  .mmenu__tabs{
    display:grid; grid-template-columns:1fr 1fr;
    border-bottom:1px solid #eee;
  }
  .mmenu__tab{
    padding:14px 12px; background:#f5f5f5; border:0; font-weight:800; cursor:pointer;
  }
  .mmenu__tab.is-active{
    background:#eaeaea; border-bottom:3px solid var(--yellow);
  }
  
  .mmenu__pane{ display:none; padding:8px 0; overflow:auto; }
  .mmenu__pane.is-active{ display:block; }
  
  .mmenu__link{
    display:flex; align-items:center; gap:10px;
    padding:16px; font-size:18px; border-bottom:1px solid #f2f2f2; color:#222;
  }
  .mmenu__link:hover{ background:#f9f9f9 }
  .mmenu__sep{ border:0; border-top:1px solid #eee; margin:6px 0; }
  
  
  @media (max-width:1000px){
    .mmenu{ padding-bottom:74px; }
  }
  
.footer-topv2{background:#fafafa;border-top:1px solid #eee;padding:32px 0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.footer-logo-ghost{
  height:90px;border:2px dashed #ddd;border-radius:12px;
  display:flex;align-items:center;justify-content:center;color:#aaa;font-weight:700
}
.footer-col h4{margin:0 0 10px;font-weight:900}
.footer-col a{display:block;padding:6px 0;color:#666}
@media (max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}

body {
    background: #f7f7f9; 
  }
  .page-head {
    background:#fff;
    border-radius:16px;
    padding:24px;
    margin:16px 0;
  }
  .page-head h1 {
    margin:0;
    font-size:clamp(22px,3.6vw,36px);
    font-weight:900;
  }
  .delivery {
    background:#fff;
    border-radius:16px;
    padding:24px;
    margin:16px 0;
  }
  .delivery h2 {
    font-size:clamp(18px,2.6vw,28px);
    margin:24px 0 10px;
    font-weight:900;
  }
  .delivery p,
  .delivery li {
    font-size:clamp(14px,1.8vw,18px);
    line-height:1.55;
    color:#444;
  }
  .delivery ul {
    padding-left:1.2em;
    margin:8px 0 16px;
  }
  
  .warranty-stub {
    border:2px dashed #bbb;
    border-radius:12px;
    padding:40px;
    margin:24px 0;
    text-align:center;
    color:#777;
    font-size:18px;
    font-weight:700;
    background:#fafafa;
  }

.mmenu__group{ border-top:1px solid #f0f0f0; }
.mmenu__group:first-of-type{ border-top:none; }

.mmenu__group-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #fff;  
  border: 0;
  cursor: pointer;
  font-weight: 900;
  font-size: 18px;
  position: relative;
}
.mmenu__group-head:focus-visible{ outline:2px solid #1a73e8; outline-offset:2px; }


.mmenu__group-head::after {
  content: none;
}
.mmenu__chev{
  width:14px; height:14px; border-right:2px solid #333; border-bottom:2px solid #333;
  transform:rotate(45deg); margin-right:18px; 
  transition:transform .2s ease;
}
.mmenu__group[aria-open="true"] .mmenu__chev{ transform:rotate(-135deg); }
.mmenu__group[aria-open="true"] .mmenu__group-head {
  background: #fff;
}
.mmenu__group-body{ display:none; background:#fff; }
.mmenu__group[aria-open="true"] .mmenu__group-body{ display:block; }

.mmenu__sublink{
  display:block; padding:16px; border-top:1px solid #f2f2f2;
  color:#222; font-size:18px;
}
.mmenu__sublink:hover{ background:#fafafa; }


.mmenu__link{ font-size:18px; }
:root{--yellow:#fed700;--text:#222;--muted:#f6f6f8;--container:1200px}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;color:var(--text);background:#f7f7f9}


a{text-decoration:none;color:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 16px}


.logo-placeholder{display:flex;align-items:center;justify-content:center;width:200px;height:30px;border:2px dashed #ccc;border-radius:16px;font-weight:800;color:#999;font-size:20px;background:#fff}


.topbar{border-bottom:1px solid #eee;background:#fff;padding:8px 0}
.topbar__wrap{display:flex;justify-content:space-between;align-items:center}
.social{display:flex;gap:10px}
.social a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:2px solid var(--yellow);border-radius:6px;background:#fff;padding:2px}


.header{background:#fff;border-bottom:1px solid #eee;z-index:30}
.header .wrap{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 0}
.search{display:flex;gap:8px;width:100%}
.search input{flex:1;height:46px;border:1px solid #e4e4e4;border-radius:28px;padding:0 16px}
.search button{height:46px;border:none;background:var(--yellow);border-radius:28px;padding:0 18px;font-weight:800;cursor:pointer}
.tools{display:flex;gap:12px;align-items:center}
.tool{position:relative;display:inline-flex;width:40px;height:40px;border-radius:10px;background:#f7f7f7;align-items:center;justify-content:center}
.badge{position:absolute;top:-6px;right:-6px;background:#000;color:#fff;border-radius:9px;padding:2px 6px;font-size:11px;line-height:1}
.header-sum{min-width:72px;text-align:right;font-weight:800;color:#222;margin-left:4px}


.menubar{background:#fff;border-bottom:1px solid #eee}
.menubar .row{display:flex;align-items:center;gap:24px;min-height:50px}
.menu-cat{position:relative}
.menu-cat>button{display:flex;align-items:center;gap:10px;background:var(--yellow);border:none;border-radius:14px;padding:10px 14px;font-weight:800;cursor:pointer}
.dropdown{position:absolute;left:0;top:calc(100% + 8px);background:#fff;border:1px solid #eee;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:8px;width:240px;display:none;z-index:2000}
.menu-cat.open .dropdown{display:block}
.dropdown a{display:flex;justify-content:space-between;padding:10px;border-radius:10px;color:#333}
.dropdown a:hover{background:#f7f7f7}
.nav{list-style:none;display:flex;gap:22px}
.nav>li{position:relative}
.nav>li>a{display:flex;gap:6px;padding:10px 0;font-weight:800}
.nav>li .sub{position:absolute;left:0;top:100%;margin-top:8px;background:#fff;border:1px solid #eee;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:8px;min-width:200px;display:none;z-index:2000}
.nav>li:hover .sub,.nav>li .sub:hover{display:block}
.nav>li .sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.sub a{display:block;padding:10px;border-radius:8px;color:#555}
.sub a:hover{background:#f5f5f5;color:#000}


.mtrigger{display:none;width:100%;border:0;background:#fff;padding:12px 16px;font-weight:800;font-size:20px;line-height:1;text-align:left;border-bottom:1px solid #eee}
.mtrigger__icon{margin-right:10px;font-size:26px}
@media (max-width:1000px){.mtrigger{display:flex;align-items:center}.menubar{display:none!important}}


.mmenu{position:fixed;top:0;left:0;bottom:0;width:min(440px,92vw);background:#fff;transform:translateX(-100%);box-shadow:24px 0 40px rgba(0,0,0,.16);transition:transform .25s ease;z-index:1100;display:flex;flex-direction:column}
.mmenu.is-open{transform:none}
.mmenu__backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1090}
.mmenu__backdrop[hidden]{display:none}
.mmenu__head{display:flex;justify-content:flex-end;align-items:center;padding:14px 16px;border-bottom:1px solid #eee}
.mmenu__close{background:none;border:0;font-size:20px;font-weight:800;cursor:pointer}
.mmenu__tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #eee}
.mmenu__tab{padding:14px 12px;background:#f5f5f5;border:0;font-weight:800;cursor:pointer}
.mmenu__tab.is-active{background:#eaeaea;border-bottom:3px solid var(--yellow)}
.mmenu__pane{display:none;padding:8px 0;overflow:auto}
.mmenu__pane.is-active{display:block}
.mmenu__link{display:flex;align-items:center;gap:10px;padding:16px;font-size:18px;border-bottom:1px solid #f2f2f2;color:#222}
.mmenu__link:hover{background:#f9f9f9}
.mmenu__sep{border:0;border-top:1px solid #eee;margin:6px 0}
@media (max-width:768px){.mmenu{padding-bottom:74px}}
.mmenu__group{border-top:1px solid #f0f0f0}
.mmenu__group:first-of-type{border-top:none}
.mmenu__group-head{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px;background:#fff;border:0;cursor:pointer;font-weight:900;font-size:18px}
.mmenu__chev{width:14px;height:14px;border-right:2px solid #333;border-bottom:2px solid #333;transform:rotate(45deg);margin-right:18px;transition:transform .2s ease}
.mmenu__group[aria-open="true"] .mmenu__chev{transform:rotate(-135deg)}
.mmenu__group-body{display:none;background:#fff}
.mmenu__group[aria-open="true"] .mmenu__group-body{display:block}
.mmenu__sublink{display:block;padding:16px;border-top:1px solid #f2f2f2;color:#222;font-size:18px}
.mmenu__sublink:hover{background:#fafafa}


.nl-catalog{display:grid;grid-template-columns:280px 1fr;gap:26px}
.nlc-hero{grid-column:1/-1;text-align:center;margin:6px 0 0}
.nlc-h1{margin:0;font-size:56px;font-weight:800;line-height:1}
.nlc-sub{grid-column:1/-1;display:flex;justify-content:center;position:relative;margin:10px 0 0}
.nlc-catbtn{display:inline-flex;flex-direction:column;gap:4px;padding:0;background:none;border:0;cursor:pointer}
.nlc-catbtn #nlc-catlabel{font-weight:800;letter-spacing:.02em}
.nlc-underline{display:block;height:2px;background:var(--yellow);border-radius:2px}
.nlc-catdrop{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:12px;width:min(420px,96vw);max-height:60vh;overflow:auto;background:#fff;border:1px solid #eee;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:6px;z-index:2200}
.nlc-catdrop a{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;color:#111}
.nlc-catdrop a:hover{background:#f7f7f7}
.nlc-catdrop .cnt{color:#8a8a8a}

.nlc-toolbar{grid-column:1/-1;margin:18px 0 6px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.nlc-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nlc-breadcrumbs{color:#666}
.nlc-breadcrumbs a{color:inherit}
.nlc-total{color:#777}
.nlc-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.nlc-show{color:#555}
.nlc-show-n{padding:0 4px;border:0;background:none;cursor:pointer}
.nlc-show-n.is-active{font-weight:800;color:#111}
.nlc-gridmodes{display:inline-flex;gap:10px}
.gm{width:30px;height:30px;border-radius:8px;border:1px solid #ddd;background:#fff;position:relative}
.gm:before,.gm:after{content:"";position:absolute;inset:6px;border:2px solid #bbb;border-radius:4px}
.gm.is-4:after{inset:6px 3px;border-left:2px solid #bbb;border-right:2px solid #bbb;border-top:none;border-bottom:none}
.gm.is-5:after{inset:6px 2px;border-left:2px solid #bbb;border-right:2px solid #bbb;border-top:none;border-bottom:none;box-shadow:inset 10px 0 0 0 #bbb,inset -10px 0 0 0 #bbb}
.gm.is-active{border-color:var(--yellow)}
.nlc-sortwrap{display:inline-flex;align-items:center;gap:8px;color:#444}
.nlc-sortwrap select{border:1px solid #ddd;border-radius:8px;padding:8px 10px;background:#fff}


.nlc-filters{position:relative}
.nlc-filters__head{display:flex;justify-content:flex-end;padding:10px;border-bottom:1px solid #eee}
.nlc-close{background:none;border:0;font-size:18px;font-weight:800;cursor:pointer}
.nlc-filter+.nlc-filter{margin-top:16px}
.nlc-filter__title{font-weight:800;margin-bottom:8px}
.nlc-filter__list{display:flex;flex-direction:column;gap:6px}
.nlc-check{display:flex;align-items:center;justify-content:space-between;border:1px solid #eee;border-radius:10px;padding:8px 10px;background:#fff}
.nlc-count{color:#666;font-variant-numeric:tabular-nums}


.nlc-grid{--col:3;display:grid;grid-template-columns:repeat(var(--col),minmax(0,1fr));gap:18px}
.nlc-card{border:1px solid #eee;border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:box-shadow .15s ease}
.nlc-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.07)}
.nlc-media{position:relative}
.nlc-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;background:#f7f7f7;display:block}
.nlc-over{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(-6px);transition:.15s}
.nlc-card:hover .nlc-over{opacity:1;transform:none}
.nlc-over .act{width:40px;height:40px;border-radius:12px;border:0;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;cursor:pointer}
.nlc-over .act img{width:22px;height:22px}
.nlc-body{padding:12px;display:flex;flex-direction:column;gap:8px}
.nlc-title-sm{font-size:14px;font-weight:800;color:#0062bd;min-height:3em}
.nlc-attrs{display:flex;flex-wrap:wrap;gap:6px 10px;color:#555;font-size:13px}
.nlc-price{margin-top:auto;font-weight:800;font-size:18px}
.nlc-actions{display:flex;gap:8px;margin-top:8px}
.nlc-btn{flex:1;text-align:center;padding:10px 12px;border-radius:10px;border:2px solid var(--yellow);background:#fff;font-weight:800}
.nlc-btn.primary{background:var(--yellow)}


.only-mobile{display:none}
@media (max-width:1000px){
  .nl-catalog{grid-template-columns:1fr}
  .only-mobile{display:inline-flex}
  
  .nlc-filters{position:fixed;top:0;left:0;bottom:0;width:min(92vw,360px);background:#fff;z-index:3000;transform:translateX(-100%);transition:transform .2s;border-right:1px solid #eee;padding:12px 16px;overflow:auto}
  .nlc-filters.is-open{transform:none}
  .nlc-grid{--col:2}
  .nlc-over .act:not(.act-fav){display:none}
  .nlc-over{opacity:1;transform:none}
}
@media (max-width:640px){.nlc-grid{--col:1}}


.cart-drawer{z-index:5000}
.backdrop{z-index:4900}


.footer-topv2{background:#fafafa;border-top:1px solid #eee;padding:32px 0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.footer-logo-ghost{height:90px;border:2px dashed #ddd;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#aaa;font-weight:700}
.footer-col h4{margin:0 0 10px;font-weight:900}
.footer-col a{display:block;padding:6px 0;color:#666}
@media (max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}


.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:.2s;z-index:90}
.backdrop.show{opacity:1;pointer-events:auto}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:90vw;background:#fff;transform:translateX(100%);transition:.25s;z-index:100;display:flex;flex-direction:column;border-left:1px solid #eee;box-shadow:-20px 0 40px rgba(0,0,0,.08)}
.cart-drawer.open{transform:none}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:20px 18px;border-bottom:1px solid #eee;font-size:22px;font-weight:800}
.cart-items{flex:1;overflow:auto}
.cart-row{display:grid;grid-template-columns:64px 1fr 20px;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid #f1f1f1;background:#fafafa;margin:12px;border-radius:12px}
.cart-thumb{width:64px;height:48px;background:#e9e9e9;border-radius:10px;overflow:hidden}
.cart-title{color:#666}
.cart-foot{padding:16px;border-top:1px solid #eee}
.total{display:flex;align-items:center;justify-content:space-between;font-size:22px;font-weight:800;margin-bottom:12px}
.btn{display:block;width:100%;padding:14px;border-radius:12px;border:2px solid var(--yellow);background:#fff;font-weight:800;margin:8px 0}
.btn.primary{background:var(--yellow);border-color:var(--yellow)}


@media (max-width:1024px){.header-sum{display:none!important}}

.home-cat-title{margin:28px 0 12px;font-size:24px;font-weight:900}


.products .ph{position:relative;overflow:hidden}
.products .ph img{width:100%;height:100%;object-fit:cover;display:block}

.hp-tabs{
  display:flex; justify-content:center; gap:56px; align-items:flex-end;
  margin:8px 0 4px;
}
.hp-tab{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:none; border:0; cursor:pointer; padding:12px 0;
  color:#777; font-weight:900; letter-spacing:.02em;
  font-size:clamp(16px,2.4vw,28px); position:relative;
}
.hp-tab img{opacity:.65}
.hp-tab .hp-underline{
  position:absolute; left:0; right:0; bottom:-6px; height:4px;
  background:transparent; border-radius:3px;
}
.hp-tab.is-active{color:#111}
.hp-tab.is-active img{opacity:1}
.hp-tab.is-active .hp-underline{background:#fed700}


.products .ph,
.product-card__media{overflow:hidden}
.products img{display:block; width:100%; height:auto; object-fit:cover}


@media (max-width:720px){
  .hp-tabs{gap:28px}
  .hp-tab span{font-size:14px}
}

.hp-tabs{display:flex;justify-content:center;gap:32px;align-items:flex-end;margin:6px 0 8px}
.hp-tab{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;cursor:pointer;padding:8px 0;color:#777;font-weight:900;letter-spacing:.02em;font-size:clamp(14px,1.8vw,20px);position:relative}
.hp-tab img{width:22px;height:22px;opacity:.65}
.hp-tab .hp-underline{position:absolute;left:0;right:0;bottom:-4px;height:3px;background:transparent;border-radius:3px}
.hp-tab.is-active{color:#111}
.hp-tab.is-active img{opacity:1}
.hp-tab.is-active .hp-underline{background:#fed700}
@media (max-width:720px){.hp-tabs{gap:22px}.hp-tab span{font-size:13px}}


.hp-empty{padding:28px;text-align:center;color:#666;background:#fff;border:1px dashed #ddd;border-radius:12px}


.hp-reco-banner{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:16px;background:#f6f6f6;border-radius:16px;overflow:hidden;padding:20px}
.hp-reco-banner .banner-content h2{margin:0 0 10px;font-size:clamp(22px,3.6vw,38px);font-weight:900}
.hp-reco-banner .banner-content p{margin:0 0 16px;color:#59606a}
.hp-reco-banner .btn{display:inline-block;background:var(--yellow);padding:12px 18px;border-radius:12px;font-weight:800}
.hp-reco-banner .banner-image img{width:100%;height:auto;object-fit:contain}
@media (max-width:880px){.hp-reco-banner{grid-template-columns:1fr}}


.hp-tabs{position:relative; z-index:3; gap:38px; margin:6px 0 2px}
.hp-tab{font-size:16px; padding:8px 0}
.hp-tab img{width:20px;height:20px;opacity:.75}
.hp-tab span,.hp-tab img,.hp-tab i{pointer-events:none} 
#hp-products{position:relative; z-index:1}

#hp-tabs{
  position: relative;
  z-index: 20;
  pointer-events: auto;
}


.hp-tab.is-active{color:#111}
.hp-tab.is-active img{opacity:1}
.hp-tab .hp-underline{position:absolute;left:0;right:0;bottom:-6px;height:3px;background:transparent;border-radius:3px}
.hp-tab.is-active .hp-underline{background:#fed700}


.hp-reco-banner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 16px;
  background: #f6f6f6;
  border-radius: 16px;
  overflow: hidden;
  padding: 20px;
}
.hp-reco-banner .banner-content h2 {
  margin: 0 0 10px;
  font-size: clamp(22px,3.6vw,38px);
  font-weight: 900;
}
.hp-reco-banner .banner-content p {
  margin: 0 0 16px;
  color: #59606a;
}
.hp-reco-banner .btn {
  display: inline-block;
  background: var(--yellow);
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 800;
}
.hp-reco-banner .banner-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width:880px) {
  .hp-reco-banner {
    grid-template-columns: 1fr;
  }
}


.cart-drawer{ z-index: 10010; }   
.backdrop{ z-index: 10000; }      

body.is-modal{
  overflow: hidden;               
  touch-action: none;
  overscroll-behavior: contain;
}

body.is-modal .menubar,
body.is-modal .nav,
body.is-modal .nav *{
  z-index: 1 !important;
}


#hp-products.hp-reco-banner{
  padding: 0;
  background: transparent;
}

.reco-banner{
  display: block;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #f7f7f8;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05) inset;
}

.reco-banner img{
  display: block;
  width: 100%;
  height: auto;         
  object-fit: cover;    
}


@media (min-width: 1280px){
  .reco-banner img{ max-height: 260px; object-fit: contain; }
}


.backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 10000;
}
.backdrop.show{
  opacity: 1;
  pointer-events: auto;            
}

.cart-drawer{
  position: fixed;
  top: 0;
  right: 0;
  width: min(92vw, 460px);
  height: 100vh;
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 10010;                  
  background: #fff;
}
.cart-drawer.open{ transform: translateX(0); }

body.is-modal{
  overflow: hidden;                
  touch-action: none;
  overscroll-behavior: contain;
}


body.is-modal .menubar,
body.is-modal header,
body.is-modal .mbar{ z-index: 1 !important; }


#hp-products.hp-reco-banner{
  display: block !important;   
  padding: 0;
  background: transparent;
  margin: 45px 0;
}

#hp-products.hp-reco-banner > .reco-banner{
  display: block;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #f7f7f8;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05) inset;
}

#hp-products.hp-reco-banner > .reco-banner img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;           
}


@media (min-width:1280px){
  #hp-products.hp-reco-banner > .reco-banner img{
    max-height: 260px;         
    object-fit: contain;
  }
}

.nlc-gridmodes .gm{
  --n:3; 
  width: 36px; height: 36px;
  border: 1px solid #ddd; border-radius: 10px;
  background:
    repeating-linear-gradient(to right, #bbb 0 2px, transparent 2px calc(100%/var(--n))),
    repeating-linear-gradient(to bottom, #bbb 0 2px, transparent 2px calc(100%/var(--n)));
}
.gm-2{ --n:2 } .gm-3{ --n:3 } .gm-4{ --n:4 }
.nlc-gridmodes .gm:hover{ border-color:#aaa }
.nlc-gridmodes .gm.is-active{
  border-color:#1a73e8;
  box-shadow: 0 0 0 2px rgba(26,115,232,.14) inset;
}


.nlc-pager{
  display:flex; gap:8px; justify-content:center; align-items:center;
  margin: 18px 0 30px;
}
.nlc-pager a{
  display:inline-flex; min-width:36px; height:36px;
  align-items:center; justify-content:center;
  border:1px solid #ddd; border-radius:10px; background:#fff;
  font-weight:800; color:#333;
}
.nlc-pager a.is-active{ background:var(--yellow); border-color:#111 }
.nlc-pager a[aria-disabled="true"]{ opacity:.45; pointer-events:none }

.nlc-gridmodes { display:inline-flex; gap:10px; align-items:center; }
.nlc-gridmodes .gm{
  width:38px; height:38px; padding:6px;
  border:1px solid #ddd; border-radius:10px; background:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.nlc-gridmodes .gm img{ width:100%; height:100%; object-fit:contain; display:block; }
.nlc-gridmodes .gm.is-active{ border-color:var(--yellow); box-shadow:0 0 0 2px rgba(254,215,0,.25) inset; }


.nlc-pager{ display:flex; gap:8px; justify-content:center; align-items:center; margin:16px 0 26px; }
.nlc-pager .p{
  min-width:38px; height:38px; border-radius:10px; border:1px solid #ddd; background:#fff;
  font-weight:800; cursor:pointer; padding:0 10px;
}
.nlc-pager .p.is-active{ background:var(--yellow); border-color:var(--yellow); }
.nlc-pager .p[disabled]{ opacity:.45; cursor:not-allowed; }


.nl-catalog{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
}
.nlc-hero, .nlc-sub, .nlc-toolbar{ grid-column: 1 / -1; }
.nlc-filters{ grid-column: 1; }
.nlc-grid, .nlc-pager{ grid-column: 2; }


@media (max-width:1000px){
  .nl-catalog{ grid-template-columns: 1fr; }
  .nlc-hero, .nlc-sub, .nlc-toolbar, .nlc-filters, .nlc-grid, .nlc-pager{ grid-column: 1; }
}

.pcxl{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  background:#fff;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 4px 22px rgba(0,0,0,.06);
}
.pcxl-media{ margin:0; }
.pcxl-img{
  width:100%; height:auto; display:block;
  border-radius: 14px;
  object-fit: cover;
  aspect-ratio: 16 / 11;
}
.pcxl-title{
  display:block; margin:6px 0 10px;
  font-size: 22px; font-weight: 800; line-height: 1.25;
  color:#0a66cc; text-decoration:none;
}
.pcxl-title:hover{ text-decoration:underline; }

.pcxl-specs{ list-style:none; padding:0; margin:0 0 10px 0; }
.pcxl-specs li{
  display:flex; align-items:baseline; gap:8px;
  font-size:16px; padding:6px 0; border-bottom:1px dashed #eee;
}
.pcxl-specs li:last-child{ border-bottom:0; }
.pcxl-specs .k{ font-weight:700; color:#333; min-width:160px; }
.pcxl-specs .v{ color:#111; }

.pcxl-foot{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px;
}
.pcxl-price{ font-size:24px; font-weight:900; }
.pcxl-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px; border-radius:12px;
  background:#ffd200; color:#111; font-weight:800; text-decoration:none;
  transition: transform .05s ease-in-out, filter .15s;
}
.pcxl-btn:hover{ filter:brightness(0.95); }
.pcxl-btn:active{ transform: translateY(1px); }



.nlc-grid{
  display:grid;
  gap:24px;
  align-items:stretch;
  
  --card-max: 360px;
}


.nlc-grid.cols-1{ --card-max: 100%; }  
.nlc-grid.cols-2{ --card-max: 520px; }
.nlc-grid.cols-3{ --card-max: 360px; }
.nlc-grid.cols-4{ --card-max: 300px; }


.nlc-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  
  width:100%;
  max-width:var(--card-max);
  margin-inline:auto;
}

.nlc-media .nlc-thumb{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:14px;
}

.nlc-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
}

.nlc-actions{
  margin-top:auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}


.nlc-grid.cols-4 .nlc-actions{ grid-template-columns:1fr; }
.nlc-grid.cols-4 .nlc-actions .nlc-btn:not(.primary){ display:none; }


@media (max-width:480px){
  .nlc-actions{ grid-template-columns:1fr; }
}
@media (max-width: 768px){
  .nlc-grid{ 
    grid-template-columns: 1fr !important;
    --card-max: 100%;
  }
  .nlc-actions{ grid-template-columns: 1fr; }
}

@media (max-width: 930px){
  .nlc-grid.cols-3 .nlc-actions .nlc-btn:not(.primary){
    display: none !important;           
  }
  .nlc-grid.cols-3 .nlc-actions{
    grid-template-columns: 1fr;         
  }
}

.nlc-actions .nlc-btn{
  display:flex;                 
  align-items:center;           
  justify-content:center;       
  min-height: 46px;             
  padding: 0 16px;
  line-height: 1;               
  box-sizing: border-box;
  white-space: nowrap;
}

.nlc-actions .nlc-btn.primary{
  display:flex;                 
  align-items:center;
  justify-content:center;
}


@media (min-width: 1000px) and (max-width: 1152px){
  .nlc-actions .nlc-btn{ min-height: 44px; }
}

@media (max-width:1000px){

  
  .nlc-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 0;
    border-top:1px solid #ececec;  
  }

  
  .nlc-left{
    display:flex;
    align-items:center;
    gap:12px;
    flex:1;
  }
  .nlc-breadcrumbs,
  .nlc-total,
  .nlc-show,           
  .nlc-gridmodes{      
    display:none !important;
  }

  
  .nlc-open-filters.only-mobile{
    display:inline-flex;            
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border:1px solid #d9d9d9;
    border-radius:8px;
    background:#fff;
    font-weight:600;
    line-height:1;
    box-shadow:0 1px 0 rgba(0,0,0,.02);
  }
  
  .nlc-open-filters.only-mobile::before{
    content:"\2630";               
    font-size:18px;
    line-height:1;
  }

  
  .nlc-right{ margin-left:auto; }

  .nlc-sortwrap{
    position:relative;
    padding-bottom:6px;             
  }
  .nlc-sortwrap > span{ display:none; }  

  #nlc-sort{
    appearance:none;
    -webkit-appearance:none;
    background:transparent;
    border:none;
    outline:none;
    font:inherit;
    font-weight:700;
    padding:6px 28px 6px 0;         
    cursor:pointer;
  }
  
  .nlc-sortwrap::before{
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height:4px; background:#ffd200; border-radius:2px;
  }
  
  .nlc-sortwrap::after{
    content:"";
    position:absolute; right:6px; top:50%;
    width:8px; height:8px;
    border-right:2px solid #222; border-bottom:2px solid #222;
    transform:translateY(-60%) rotate(45deg);
    pointer-events:none;
  }

  
  #nlc-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important;}
}


.nlc-btn{
  display:flex; align-items:center; justify-content:center;
}

@media (max-width:768px){
  #nlc-grid{
    grid-template-columns: 1fr !important;
  }
}

#hp-products.products{
  display:grid;
  grid-template-columns:repeat(3, minmax(280px,1fr));
  gap:22px;
}


#hp-products .nlc-card{
  max-width: 400px;          
  margin-inline: auto;
  border-radius:16px;
}


#hp-products .nlc-media .nlc-thumb{
  aspect-ratio: 16/10;       
  object-fit: cover;
}


#hp-products .nlc-body{
  padding:16px 18px 20px;
  gap:10px;
}


#hp-products .nlc-title-sm{ word-break: break-word; }


#hp-products .nlc-desc{
  color:#616161;
  font-size:14px;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.7em;          
  margin-top:-2px;
}


#hp-products .nlc-price{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  white-space:nowrap;         
  font-weight:800;
  font-size:clamp(18px, 2.2vw, 26px);
}


#hp-products .nlc-actions{
  margin-top:8px;
  display:grid;
  grid-template-columns:1fr;  
  gap:12px;
}


@media (max-width: 1200px){
  #hp-products.products{ grid-template-columns:repeat(2, minmax(260px,1fr)); }
}
@media (max-width: 700px){
  #hp-products.products{ grid-template-columns:1fr; }
  #hp-products .nlc-card{ max-width: 520px; }
}

.wp-block-woocommerce-coming-soon,
.woocommerce-coming-soon-default,
.woocommerce-coming-soon-store-only { display: none !important; }