/* ===========================
   RESET dubluri TT5/Woo
=========================== */
.woocommerce .woocommerce-products-header,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
  display:none !important;
}

/* ascunde titluri injectate de tema */
.woocommerce .wp-block-query-title,
.woocommerce .entry-title,
.woocommerce .page-title{
  display:none !important;
}

/* păstrăm ordering doar în toolbar-ul nostru */
.nxs-cat-order .woocommerce-ordering{
  display:block !important;
  margin:0 !important;
}

/* ascundem badge Woo "Reducere" */
.woocommerce span.onsale{
  display:none !important;
}

/* ===========================
   Fundal + container
=========================== */
body.woocommerce{
  background:#f7f6ef5e;
}

.nxs-cat-page{
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 20px 46px;
}

.nxs-cat-layout{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap: 34px;
  align-items:start;
}

/* ===========================
   Sidebar (Desktop)
=========================== */
.nxs-cat-sidebar{ padding-top: 6px; }

.nxs-side-title{
  font-size: 12px;
  font-weight: 800;
  color:#2c2c2c;
  margin: 0 0 10px;
}

.nxs-cat-sidebar .widget{
  margin:0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e2e2;
}
.nxs-cat-sidebar .widget:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.nxs-cat-sidebar .widget-title{
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  color:#2c2c2c;
}

.nxs-cat-sidebar ul{ list-style:none; margin:0; padding:0; }
.nxs-cat-sidebar li{ margin: 7px 0; }
.nxs-cat-sidebar a{ color:#2c2c2c; text-decoration:none; }
.nxs-cat-sidebar a:hover{ text-decoration:underline; }

/* ===========================
   Header (Titlu + descriere)
=========================== */
.nxs-cat-head{ margin: 0 0 10px; }

.nxs-cat-title{
  margin:0 0 8px;
  font-size: 44px;
  line-height: 1.06;
  font-weight: 900;
  letter-spacing:-0.02em;
  color:#1f1f1f;
}

.nxs-cat-desc{
  max-width: 740px;
  color:#4d4d4d;
  line-height: 1.55;
}

.nxs-cat-desc p{ margin:0 0 6px; }
.nxs-cat-desc a{ text-decoration:underline; }

/* ===========================
   Toolbar (Desktop)
=========================== */
.nxs-cat-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  margin: 6px 0 16px;
}

.nxs-cat-count{
  font-size: 14px;
  color:#2c2c2c;
}

.nxs-cat-order .woocommerce-ordering select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  height: 42px;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  padding: 0 38px 0 16px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%232d7d46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;

  font-family: var(--wp--preset--font-family--roboto), sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #2c2c2c;

  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.nxs-cat-order .woocommerce-ordering select:hover{
  border-color: #2d7d46;
}

.nxs-cat-order .woocommerce-ordering select:focus{
  outline: none;
  border-color: #2d7d46;
  box-shadow: 0 0 0 3px rgba(45,125,70,.12);
}

.nxs-cat-order .woocommerce-ordering select::-ms-expand{
  display: none;
}

/* =========================================================
   PRODUSE: suport atât Classic, cât și Woo Blocks
========================================================= */

/* Classic grid fallback */
.woocommerce ul.products{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin:0 !important;
  padding:0 !important;
}
.woocommerce ul.products li.product{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  list-style:none !important;
}

/* Woo Blocks grid */
ul.wc-block-product-template{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
}
ul.wc-block-product-template > li{
  margin:0 !important;
  list-style:none !important;
}

/* ===========================
   MOBILE CONTROLS WRAPPER
   (Filtru + Switch în același rând)
=========================== */
.nxs-m-controls{
  display:none; /* doar pe mobil */
}

/* ===========================
   FILTRU (drawer)
=========================== */
.nxs-filter-drawer{ display:none; margin: 0; }

.nxs-filter-btn{
  list-style:none;
  cursor:pointer;
  user-select:none;
  border:1px solid #d7d7d7;
  border-radius:999px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:#fff;
  font-weight:700;
  width:100%;
}
.nxs-filter-btn::-webkit-details-marker{ display:none; }

.nxs-filter-icon{
  width:28px; height:28px;
  border-radius:999px;
  border:1px solid #d7d7d7;
  display:grid;
  place-items:center;
  font-weight:900;
}

.nxs-filter-drawer__panel{
  margin-top: 12px;
  padding: 14px;
  background:#fcfcf9;
  border:0px solid #ededed;
  border-radius: 16px;
}

/* ===========================
   SWITCH 1/2 (mobil)
=========================== */
.nxs-grid-switch{
  display:none;
  gap: 10px;
  justify-content:center;
}

.nxs-grid-switch__btn{
  width: 38px;
  height: 38px;
  border:1px solid #d7d7d7;
  background:#fff;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
}
.nxs-grid-switch__btn[aria-pressed="true"]{
  border-color:#1f2a44;
}

/* =========================================================
   MOBIL – 2 produse/rand + card style
========================================================= */
@media (max-width: 900px){

  .nxs-cat-page{ padding: 18px 14px 30px; }
  .nxs-cat-layout{ grid-template-columns: 1fr; gap: 12px; }
  .nxs-cat-sidebar{ display:none; }

  .nxs-cat-title{ font-size: 38px; }

  /* sortarea ascunsă pe mobil ca în poză */
  .nxs-cat-order{ display:none !important; }

  /* toolbar devine vertical: titlu + count */
  .nxs-cat-toolbar{
    display:block !important;
    margin: 10px 0 0 !important;
  }
  .nxs-cat-count{ margin: 10px 0 0 !important; }

  /* ✅ Controls row: Filtru + Switch */
  .nxs-m-controls{
    display:flex;
    align-items:center;
    gap: 10px;
    margin: 10px 0 14px;
  }

  /* Filtru ia tot spațiul rămas */
  .nxs-m-controls .nxs-filter-drawer{
    display:block;
    flex: 1 1 auto;
    margin: 0 !important;
    min-width: 0;
  }

  /* buton Filtru compact */
  .nxs-m-controls .nxs-filter-btn{
    width: 100% !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    justify-content:center;
  }

  .nxs-m-controls .nxs-filter-icon{
    width:22px;
    height:22px;
    font-size:14px;
  }

  /* Switch în dreapta */
  .nxs-m-controls .nxs-grid-switch{
    display:flex;
    flex: 0 0 auto;
    margin: 0 !important;
    gap: 6px;
    justify-content:flex-end;
  }

  .nxs-m-controls .nxs-grid-switch__btn{
    width: 34px;
    height: 34px;
  }

  /* DEFAULT: 2 coloane */
  body:not(.nxs-m-cols-1) ul.wc-block-product-template,
  body:not(.nxs-m-cols-1) .woocommerce ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  /* 1 coloană */
  body.nxs-m-cols-1 ul.wc-block-product-template,
  body.nxs-m-cols-1 .woocommerce ul.products{
    grid-template-columns: 1fr !important;
  }

  /* 2 coloane */
  body.nxs-m-cols-2 ul.wc-block-product-template,
  body.nxs-m-cols-2 .woocommerce ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* ========== CARDURI: Woo Blocks ca în poză ========== */
  .wc-block-components-product-card,
  .wc-block-grid__product,
  .wc-block-product{
    background:#fff !important;
    border-radius:18px !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.06) !important;
    overflow:hidden !important;
    padding: 0px !important;
    border:0 !important;
  }

  .wc-block-components-product-image,
  .wc-block-grid__product-image{
    background:#f6f6f6 !important;
    border-radius:16px !important;
    padding: 16px !important;
    margin:0 0 10px !important;
  }

  .wc-block-components-product-image img,
  .wc-block-grid__product-image img{
    max-height: 140px !important;
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
  }

  .wc-block-components-product-title,
  .wc-block-grid__product-title{
    font-size: 15px !important;
    line-height:1.15 !important;
    font-weight:900 !important;
    margin: 0 0 10px !important;
    color:#111 !important;
  }

  .wc-block-components-product-summary{
    font-size: 13px !important;
    line-height:1.35 !important;
    color:#4d4d4d !important;
    margin: 0 0 10px !important;
  }

  .wc-block-components-product-price,
  .wc-block-grid__product-price{
    font-size: 18px !important;
    font-weight: 900 !important;
    color:#111 !important;
    margin: 0 !important;
  }

  .nxs-card__badge{ display:inline-block; }

  /* FĂRĂ ATC pe mobil */
  .nxs-card__cart{ display:none !important; }
  .wc-block-components-product-button,
  .wc-block-components-product-button__button,
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .added_to_cart{
    display:none !important;
  }
}

@media (max-width: 900px){

  /* stabilizează rândul ca să nu “urce” când switch-ul devine sticky */
  .nxs-m-controls{
    min-height: 38px;  /* cât înălțimea butoanelor 1/2 */
    align-items: flex-start;
  }

  body.nxs-filter-open .nxs-grid-switch{
    position: sticky;
    top: 12px;
    align-self: flex-start;
    margin-left: auto;
    z-index: 10;
  }
}

/* =========================================================
   POLISH: titlu, descriere clamp + blur, butoane transparente
========================================================= */

/* TITLU categorie – mai mic, mai elegant */
.nxs-cat-title{
  font-size: 38px;          /* desktop */
  font-weight: 800;         /* mai “subțire” decât 900 */
  letter-spacing: -0.015em;
}

/* DESCRIERE – fără bold, mai fin */
.nxs-cat-desc{
  color:#4f4f4f;
  font-weight: 400;
}
.nxs-cat-desc *{
  font-weight: 400 !important;  /* scoate bold din <strong> etc */
}
.nxs-cat-desc p{ margin:0 0 8px; }

/* Clamp 3 rânduri + blur/fade la final */
.nxs-cat-desc[data-collapsible="1"]{
  position: relative;
  max-width: 740px;
  overflow: hidden;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;       /* 3 randuri */
}

/* overlay blur/fade (doar când e colapsat) */
.nxs-cat-desc[data-collapsible="1"]::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 42px;

  /* fade */
  background: linear-gradient(to bottom,
    rgba(244,244,243,0),
    rgba(244,244,243,0.85),
    rgba(244,244,243,1)
  );

  /* blur subtil peste partea de jos */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  pointer-events:none;
}

/* BUTON "Afiseaza mai mult" – sub descriere */
.nxs-cat-more{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  margin-top: 8px;

  background: transparent;
  border:0;
  padding:0;

  font-size: 14px;
  font-weight: 700;
  color:#1f1f1f;
  cursor:pointer;
}
.nxs-cat-more:hover{ text-decoration: underline; }

/* când descrierea e extinsă (JS pune aria-expanded=true) */
.nxs-cat-more[aria-expanded="true"]{ opacity: .85; }

/* când e extins: scoatem clamp + overlay */
.nxs-cat-desc.is-expanded{
  display:block;
  overflow: visible;
}
.nxs-cat-desc.is-expanded::after{
  display:none;
}

/* =========================================================
   BUTON FILTRU – subțire, transparent
========================================================= */
.nxs-m-controls .nxs-filter-btn{
  background: transparent !important;
  border: 1px solid rgba(0,0,0,0.22) !important;
  padding: 8px 12px !important;
  font-weight: 600 !important;
  color: #1f1f1f;
}

.nxs-m-controls .nxs-filter-icon{
  background: transparent !important;
  border: 1px solid rgba(0,0,0,0.22) !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 13px !important;
  color:#1f1f1f;
}

/* panelul filtrului rămâne ca înainte (împinge conținutul) */
.nxs-filter-drawer__panel{
  border-radius: 16px;
}

/* =========================================================
   SWITCH 1/2 – transparent, cifre gri închis (nu albastru)
========================================================= */
.nxs-m-controls .nxs-grid-switch__btn{
  background: transparent !important;
  border: 1px solid rgba(0,0,0,0.22) !important;
  color: #2b2b2b !important;      /* gri închis */
  font-weight: 700 !important;
}

/* activ = contur mai puternic, tot gri închis */
.nxs-m-controls .nxs-grid-switch__btn[aria-pressed="true"]{
  border-color: rgba(0,0,0,0.55) !important;
  color:#111 !important;
}

/* =========================================================
   MOBILE: titlu puțin mai mic + descriere mai compactă
========================================================= */
@media (max-width: 900px){
  .nxs-cat-title{
    font-size: 34px;
    font-weight: 800;
  }
  .nxs-cat-desc{
    font-size: 15px;
    line-height: 1.55;
  }
}

/* === TERM DESCRIPTION (Block) === */
.wp-block-term-description{
  color:#4f4f4f !important;
  font-weight:400 !important;
  line-height:1.55;
  max-width:740px;
}
.wp-block-term-description,
.wp-block-term-description *{
  font-weight:400 !important;
}
.wp-block-term-description p{ margin:0 0 8px; }

/* clamp 3 randuri pe primul paragraf (cel mai stabil) */
.wp-block-term-description.nxs-collapsed > p:first-child{
  position:relative;
  overflow:hidden;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
}

/* fade clean (fara blur) */
.wp-block-term-description.nxs-collapsed > p:first-child::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:60px;
  background: linear-gradient(
        to bottom,
        rgba(252, 252, 249, 0) 0%,
        rgba(252, 252, 249, 0.6) 60%,
        #fcfcf9 100%
  );
  pointer-events:none;
}

/* extins */
.wp-block-term-description.nxs-expanded > p:first-child{
  display:block !important;
  overflow:visible !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:unset !important;
}
.wp-block-term-description.nxs-expanded > p:first-child::after{ display:none !important; }

/* === BUTON UNIC "Afiseaza mai mult/putin" === */
.nxs-term-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin: 6px 0 0;
  padding:0;
  border:0;
  background:transparent;
  color:#1f1f1f;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.nxs-term-more:hover{ text-decoration:underline; }

@media (max-width: 900px){

  /* 1) Folosim exact padding-ul global al temei (TT5) */
  .nxs-cat-page{
    padding-left: var(--wp--style--root--padding-left, 14px) !important;
    padding-right: var(--wp--style--root--padding-right, 14px) !important;
  }

  /* 2) IMPORTANT: nu mai punem padding extra pe main,
        altfel se ingusteaza (dublu padding) */
  .nxs-cat-main{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 3) Ne asiguram ca alignwide (breadcrumbs/descriere) NU au alt padding in plus
        (raman doar cu cel global de root) */
  .woocommerce .alignwide,
  .woocommerce .wp-block-woocommerce-breadcrumbs,
  .woocommerce .wp-block-term-description{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
}

/* =========================================
   MOBILE: FULL BLEED pe arhive Woo (TT5)
   - scoate padding-ul global TT5
   - lasa .nxs-cat-page pana la margini
========================================= */
@media (max-width: 900px){

  /* 1) TT5 adauga padding pe wrapper-ul principal (constrained).
        Il anulam DOAR pe Woo archives. */
  body.woocommerce.archive :root :where(.is-layout-constrained) > :first-child,
  body.woocommerce.archive :root :where(.is-layout-constrained) > :last-child,
  body.woocommerce.archive :root :where(.is-layout-constrained) > *,
  body.woocommerce.archive :root :where(.wp-site-blocks.is-layout-constrained) > *{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) containerul tau devine full width */
  body.woocommerce.archive .nxs-cat-page{
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;           /* exact ca in inspect */
  }

  /* 3) nu mai adaugam padding extra in interior */
  body.woocommerce.archive .nxs-cat-main{
    padding: 0 !important;
  }

  /* 4) optional: daca vrei totusi un mic spacing SUS/JOS (nu lateral) */
  body.woocommerce.archive .nxs-cat-page{
    padding-top: 18px !important;
    padding-bottom: 30px !important;
  }
}

@media (max-width: 900px){

  /* containerul rândului */
  .nxs-m-controls{
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* =========================
     FILTRU – latime mica, naturala
  ========================= */
  .nxs-m-controls .nxs-filter-drawer{
    flex: 0 0 auto !important;   /* NU mai umple randul */
    width: auto !important;
    max-width: none !important;
  }

  .nxs-m-controls .nxs-filter-btn{
    width: auto !important;
    padding: 6px 12px !important;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
  }

  /* =========================
     SWITCH – ramane la dreapta
  ========================= */
  .nxs-m-controls .nxs-grid-switch{
    margin-left: auto;           /* 🔑 impinge switch-ul in dreapta */
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
  }

  .nxs-m-controls .nxs-grid-switch__btn{
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 900px){

  /* rândul */
  .nxs-m-controls{
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* =========================
     FILTRU – rămâne la stânga
  ========================= */
  .nxs-m-controls .nxs-filter-drawer{
    flex: 0 0 auto !important;
  }

  /* =========================
     SWITCH – LIPIT DE DREAPTA
  ========================= */
  .nxs-m-controls .nxs-grid-switch{
    margin-left: auto !important;   /* 🔑 cheia */
    display: inline-flex !important;
    justify-content: flex-end !important;
    align-items: center;
    gap: 6px;

    width: auto !important;
    min-width: 0 !important;
  }

  /* butoanele 1 / 2 */
  .nxs-m-controls .nxs-grid-switch__btn{
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
  }
}

/* =========================================================
   PATCH (pune-l la FINAL) — Desktop cards ca poza 2 + Mobile controls
========================================================= */

/* =========================
   1) DESKTOP: cards ca in poza 2 (Woo Blocks + Classic)
========================= */

/* grid spacing mai “aerisit” */
@media (min-width: 901px){
  ul.wc-block-product-template{
    gap: 22px !important;
  }
  .woocommerce ul.products{
    gap: 22px !important;
  }
}

/* card look modern */
@media (min-width: 901px){
  .wc-block-components-product-card,
  .wc-block-grid__product,
  .wc-block-product,
  .woocommerce ul.products li.product{
    background:#fff !important;
    border-radius:22px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06) !important;
    border:0 !important;
    overflow:hidden !important;
    padding: 0px !important;
  }

  /* imagine “hero” sus */
  .wc-block-components-product-image,
  .wc-block-grid__product-image{
    background:#f6f6f6 !important;
    border-radius:18px !important;
    padding: 22px !important;
    margin:0 0 14px !important;
  }

  /* classic: poza din loop */
  .woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
    background:#f6f6f6 !important;
    border-radius:18px !important;
    padding: 22px !important;
    margin:0 0 14px !important;
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
  }

  /* titlu + pret */
  .wc-block-components-product-title,
  .wc-block-grid__product-title,
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size: 18px !important;
    line-height:1.2 !important;
    font-weight: 800 !important;
    margin: 0 0 10px !important;
    color:#141414 !important;
  }

  .wc-block-components-product-price,
  .wc-block-grid__product-price,
  .woocommerce ul.products li.product .price{
    font-size: 18px !important;
    font-weight: 800 !important;
    color:#141414 !important;
    margin: 0 !important;
  }

  /* optional: ascunde butoanele ATC ca in poza 2 */
  .wc-block-components-product-button,
  .wc-block-components-product-button__button,
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .added_to_cart{
    display:none !important;
  }
}

/* =========================
   2) MOBILE: Filtru mic stanga + Switch lipit dreapta (fara “cade jos”)
========================= */
@media (max-width: 900px){

  /* rândul controls: grid cu 2 coloane (stabil, fara wrap ciudat) */
  .nxs-m-controls{
    display:grid !important;
    grid-template-columns: max-content 1fr; /* filtru = cat are nevoie, switch impins */
    align-items:center !important;
    column-gap: 10px !important;
  }

  /* Filtru ramane la stanga, nu umple randul */
  .nxs-m-controls .nxs-filter-drawer{
    display:block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .nxs-m-controls .nxs-filter-btn{
    width: auto !important;
    white-space: nowrap !important;
  }

  /* Switch lipit de dreapta (in a 2-a coloana) */
  .nxs-m-controls .nxs-grid-switch{
    display:flex !important;
    justify-content:flex-end !important;
    margin: 0 !important;
    width: 100% !important;    /* umple coloana 2 ca sa poata alinia dreapta */
  }

  .nxs-m-controls .nxs-grid-switch__btn{
    flex: 0 0 auto !important;
  }
}

/* =========================
   3) MOBILE: Panelul filtrului full width cat restul elementelor
   (nu ramane “ingust”)
========================= */
@media (max-width: 900px){
  details.nxs-filter-drawer{
    width: 100% !important;       /* details ocupa toata latimea */
  }

  details.nxs-filter-drawer > summary.nxs-filter-btn{
    display:inline-flex !important; /* butonul ramane “mic”, nu full */
    width: auto !important;
  }

  /* panelul devine full width */
  details.nxs-filter-drawer[open] .nxs-filter-drawer__panel{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
   FIX REAL: Breadcrumbs + descriere + "Afiseaza mai mult"
   sunt in AFARA .nxs-cat-page, deci le aliniem GLOBAL
   la inceputul coloanei de produse (nxs-cat-main).
========================================================= */

@media (min-width: 901px){

  /* 0) setari identice cu layout-ul tau */
  body.woocommerce.archive{
    --nxs-wrap: 1200px;
    --nxs-pad: 20px;
    --nxs-sidebar: 300px;
    --nxs-gap: 34px;
    --nxs-main-start: calc(var(--nxs-pad) + var(--nxs-sidebar) + var(--nxs-gap));
  }

  /* 1) Breadcrumbs: le fortam sa stea in acelasi container ca .nxs-cat-page */
  body.woocommerce.archive .wp-block-woocommerce-breadcrumbs,
  body.woocommerce.archive .wp-block-woocommerce-breadcrumbs.alignwide{
    width: 100% !important;
    max-width: var(--nxs-wrap) !important;
    margin-left: auto !important;
    margin-right: auto !important;

    /* IMPORTANT: TT5/alignwide pot adauga margini/padding – le anulam */
    padding-left: var(--nxs-main-start) !important;
    padding-right: var(--nxs-pad) !important;
    box-sizing: border-box !important;
  }

  /* uneori padding/margini sunt pe nav/ol */
  body.woocommerce.archive .wp-block-woocommerce-breadcrumbs nav,
  body.woocommerce.archive .wp-block-woocommerce-breadcrumbs ol{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2) Descriere categorie: acelasi container + acelasi start ca main */
  body.woocommerce.archive .wp-block-term-description,
  body.woocommerce.archive .wp-block-term-description.alignwide{
    width: 100% !important;
    max-width: var(--nxs-wrap) !important;
    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: var(--nxs-main-start) !important;
    padding-right: var(--nxs-pad) !important;
    box-sizing: border-box !important;
  }

  /* 3) Butonul tau (nxs-term-more) – este tot in afara .nxs-cat-page */
  body.woocommerce.archive .nxs-term-more{
    width: 100% !important;
    max-width: var(--nxs-wrap) !important;
    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: var(--nxs-main-start) !important;
    padding-right: var(--nxs-pad) !important;
    box-sizing: border-box !important;

    display: inline-flex !important;
    margin-top: 6px !important;
  }

  /* 4) Dublura "Categorii de produse" – ascundem titlul widget-ului */
  body.woocommerce.archive .nxs-cat-sidebar .widget_product_categories .widget-title{
    display: none !important;
  }
}

/* Pe mobil nu vrem offsetul de desktop */
@media (max-width: 900px){
  body.woocommerce.archive .wp-block-woocommerce-breadcrumbs,
  body.woocommerce.archive .wp-block-term-description,
  body.woocommerce.archive .nxs-term-more{
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =========================================================
   HARD PATCH (DESKTOP):
   Aliniaza breadcrumbs + descriere + buton "Afiseaza mai mult"
   exact pe coloana .nxs-cat-main (dupa 300px sidebar + 34px gap),
   indiferent de alignwide/TT5 wrappers.
========================================================= */

@media (min-width: 901px){

  body.woocommerce.archive{
    --nxs-wrap: 1200px; /* daca zona produselor tale e mai lata, pune 1320px */
    --nxs-side: 300px;
    --nxs-gap: 34px;

    /* calculam coloana main (zona produselor) */
    --nxs-main-w: calc(var(--nxs-wrap) - var(--nxs-side) - var(--nxs-gap));
    --nxs-main-left: calc((100% - var(--nxs-wrap)) / 2 + var(--nxs-side) + var(--nxs-gap));
  }

  /* 1) Breadcrumbs (Woo Blocks) – selectorul real din screenshot e wc-block-breadcrumbs */
  body.woocommerce.archive .wc-block-breadcrumbs,
  body.woocommerce.archive .wp-block-woocommerce-breadcrumbs{
    max-width: none !important;
    width: var(--nxs-main-w) !important;
    margin-left: var(--nxs-main-left) !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 2) Term description (Block) */
  body.woocommerce.archive .wp-block-term-description{
    max-width: none !important;
    width: var(--nxs-main-w) !important;
    margin-left: var(--nxs-main-left) !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3) Butonul tau */
  body.woocommerce.archive button.nxs-term-more{
    max-width: none !important;
    width: var(--nxs-main-w) !important;
    margin-left: var(--nxs-main-left) !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 6px !important;
    display: inline-flex !important;
    box-sizing: border-box !important;
  }

  /* 4) Scoatem orice "Afiseaza mai mult" vechi */
  body.woocommerce.archive .nxs-cat-more{
    display: none !important;
  }

  /* 5) Eliminam dublura "Categorii de produse" (ramane doar unul) */
  body.woocommerce.archive .nxs-cat-sidebar .widget_product_categories .widget-title{
    display: none !important;
  }
}

/* =========================================================
   FINAL OVERRIDE (DESKTOP) – layout 1:1 ca in Poza 2
   - Breadcrumbs full-width + left + border bottom
   - Sidebar (categorii + filtre) in stanga
   - Titlu + descriere + "Afiseaza mai mult" in coloana produselor, dupa sidebar
========================================================= */

@media (min-width: 901px){

  /* 1) Facem un grid PE CONTAINERUL PRINCIPAL care contine:
        breadcrumbs, query-title, term-description, buton, nxs-cat-page */
  body.woocommerce.archive .wp-site-blocks > main{
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;

    display: grid !important;
    grid-template-columns: 300px 1fr !important;
    column-gap: 34px !important;
    row-gap: 14px !important;

    box-sizing: border-box !important;
  }

  /* 2) Breadcrumbs: pe toata latimea, aliniat stanga + linie subtire sub */
  body.woocommerce.archive .wp-site-blocks > main .wp-block-woocommerce-breadcrumbs,
  body.woocommerce.archive .wp-site-blocks > main .wp-block-woocommerce-breadcrumbs.alignwide,
  body.woocommerce.archive .wp-site-blocks > main .wc-block-breadcrumbs{
    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    padding: 0 0 14px 0 !important;
    border-bottom: 1px solid #e6e6e6 !important;

    text-align: left !important;
    box-sizing: border-box !important;
  }

  /* Reset pe inner-ul breadcrumbs */
  body.woocommerce.archive .wp-site-blocks > main .wp-block-woocommerce-breadcrumbs nav,
  body.woocommerce.archive .wp-site-blocks > main .wp-block-woocommerce-breadcrumbs ol,
  body.woocommerce.archive .wp-site-blocks > main .wc-block-breadcrumbs nav,
  body.woocommerce.archive .wp-site-blocks > main .wc-block-breadcrumbs ol{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3) “Motorul” layout-ului tau: scoatem wrapper-ele ca sa putem plasa sidebar/main in grid-ul de mai sus */
  body.woocommerce.archive .wp-site-blocks > main .nxs-cat-page,
  body.woocommerce.archive .wp-site-blocks > main .nxs-cat-layout{
    display: contents !important;
  }

  /* Sidebar in coloana 1 */
  body.woocommerce.archive .wp-site-blocks > main .nxs-cat-sidebar{
    grid-column: 1 !important;
    grid-row: 3 / span 50 !important; /* sta pe stanga pe toata inaltimea */
    align-self: start !important;
    padding-top: 0 !important;
  }

  /* Main (titlu/produse) in coloana 2 */
  body.woocommerce.archive .wp-site-blocks > main .nxs-cat-main{
    grid-column: 2 !important;
    align-self: start !important;
    min-width: 0 !important;
  }

  /* 4) Titlul categoriei: in coloana 2 (dreapta), DUPA sidebar */
  body.woocommerce.archive .wp-site-blocks > main .wp-block-query-title,
  body.woocommerce.archive .wp-site-blocks > main .wp-block-query-title.alignwide{
    grid-column: 2 !important;
    width: auto !important;
    max-width: none !important;
    margin: 20 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* 5) Descrierea: in coloana 2 (dreapta), sub titlu */
  body.woocommerce.archive .wp-site-blocks > main .wp-block-term-description,
  body.woocommerce.archive .wp-site-blocks > main .wp-block-term-description.alignwide{
    grid-column: 2 !important;

    width: auto !important;
    max-width: none !important;
    padding: 0 !important;

    box-sizing: border-box !important;
  }

  /* 6) “Afiseaza mai mult”: in coloana 2 (dreapta), sub descriere */
  body.woocommerce.archive .wp-site-blocks > main button.nxs-term-more,
  body.woocommerce.archive .wp-site-blocks > main .nxs-term-more{
    grid-column: 2 !important;

    width: auto !important;
    max-width: none !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    justify-content: flex-start !important;
    align-items: center !important;

    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box !important;
  }

  /* 7) Dublura “Categorii de produse” – ascunde DOAR titlul din widget, pastreaza titlul tau */
  body.woocommerce.archive .nxs-cat-sidebar .widget_product_categories .widget-title{
    display: none !important;
  }

  /* 8) Font sidebar (mai mare + mai subtire, ca in poza) */
  body.woocommerce.archive .nxs-cat-sidebar a,
  body.woocommerce.archive .nxs-cat-sidebar li,
  body.woocommerce.archive .nxs-cat-sidebar label,
  body.woocommerce.archive .nxs-cat-sidebar .wc-block-components-checkbox__label{
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #2c2c2c !important;
  }

  body.woocommerce.archive .nxs-side-title,
  body.woocommerce.archive .nxs-cat-sidebar .widget-title{
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 0 0 10px !important;
    color: #2c2c2c !important;
  }

  /* 9) “Filtrele sa fie aliniate in stanga, pe toata latimea paginii”:
        asiguram ca sidebarul porneste exact de la marginea containerului */
  body.woocommerce.archive .nxs-cat-sidebar{
    margin-left: 0 !important;
  }
}

/* Mobil: nu atingem layout-ul tau (revine la normal) */
@media (max-width: 900px){
  body.woocommerce.archive .wp-site-blocks > main{
    display: block !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.woocommerce.archive .nxs-cat-page,
  body.woocommerce.archive .nxs-cat-layout{
    display: block !important;
  }
}

/* =========================================================
   PATCH FINAL (append at the END of your CSS)
   Fix:
   1) Mobile padding restored
   2) Remove extra bottom space after products
   3) Sidebar (filtru) urca pana sub breadcrumbs (fara gol)
      + pastreaza breadcrumbs full-width cu linie subtire
========================================================= */

/* -----------------------------
   1) MOBILE: adu padding-ul inapoi
------------------------------ */
@media (max-width: 900px){
  body.woocommerce.archive .nxs-cat-page{
    padding: 18px 18px 30px !important; /* ca inainte */
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* nu lasa “override-uri” sa iti scoata paddingul */
  body.woocommerce.archive .nxs-cat-page,
  body.woocommerce.archive .nxs-cat-layout{
    box-sizing: border-box !important;
  }
}

/* -----------------------------
   2) DESKTOP: elimina spatiul mare de jos
------------------------------ */
@media (min-width: 901px){
  body.woocommerce.archive .nxs-cat-page{
    padding-bottom: 30px !important; /* mai “strans”, fara gol */
  }

  body.woocommerce.archive ul.wc-block-product-template{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body.woocommerce.archive .nxs-cat-main{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* =========================================================
   FINAL LAYOUT (POZA 2)
   - breadcrumbs full width + border bottom
   - sidebar (categorii/filtre) urca pana sub breadcrumbs
   - titlu + descriere + "Afiseaza mai mult" stau in coloana 2
   - mobile: padding revine la breadcrumbs/descriere/buton + pagina
========================================================= */

/* ---------- VARIABILE ---------- */
:root{
  --nxs-wrap: 1320px;     /* latimea containerului (poza 2 e aerisita) */
  --nxs-pad: 20px;        /* padding lateral desktop */
  --nxs-side: 300px;      /* latime sidebar */
  --nxs-gap: 34px;        /* gap intre sidebar si main */
  --nxs-bc-line: #e6e6e6; /* linia de sub breadcrumbs */
}

/* =========================================================
   DESKTOP
========================================================= */
@media (min-width: 901px){

  /* 0) Facem GRID la nivelul main-ului WP (unde sunt blocurile de sus) */
  body.woocommerce.archive .wp-site-blocks > main{

    margin-left: auto !important;
    margin-right: auto !important;

    /* IMPORTANT: paddingul containerului */
    padding-left: var(--nxs-pad) !important;
    padding-right: var(--nxs-pad) !important;

    /* GRID 2 coloane: sidebar + main */
    display: grid !important;
    grid-template-columns: var(--nxs-side) 1fr !important;
    column-gap: var(--nxs-gap) !important;

    /* fara spatii “misterioase” */
    row-gap: 0 !important;
  }

  /* 1) BREADCRUMBS: full width (span 2 coloane), stanga + linie jos */
  body.woocommerce.archive .wp-block-woocommerce-breadcrumbs,
  body.woocommerce.archive .wp-block-woocommerce-breadcrumbs.alignwide,
  body.woocommerce.archive .wc-block-breadcrumbs,
  body.woocommerce.archive .woocommerce-breadcrumb{
    grid-column: 1 / -1 !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 0 0 14px 0 !important;

    text-align: left !important;
    box-sizing: border-box !important;
  }

  /* elimina padding/margini interne din breadcrumbs (nav/ol) */
  body.woocommerce.archive .wp-block-woocommerce-breadcrumbs nav,
  body.woocommerce.archive .wp-block-woocommerce-breadcrumbs ol,
  body.woocommerce.archive .wc-block-breadcrumbs nav,
  body.woocommerce.archive .wc-block-breadcrumbs ol{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2) .nxs-cat-page (zona cu sidebar+produse) incepe imediat sub breadcrumbs */
  body.woocommerce.archive .nxs-cat-page{
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }

  /* layout intern: pastreaza exact sidebar + main */
  body.woocommerce.archive .nxs-cat-layout{
    display: grid !important;
    grid-template-columns: var(--nxs-side) 1fr !important;
    gap: var(--nxs-gap) !important;

    /* cheia pt “filtru pana sus”: fara padding-top/margin-top */
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-items: start !important;
  }

  /* 3) Sidebar urca pana sus (imediat sub breadcrumbs) */
  body.woocommerce.archive .nxs-cat-sidebar{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 4) Titlu + descriere + afiseaza mai mult: le “ancoram” in coloana 2 SUS
        (fara sa impinga sidebar-ul) */
  body.woocommerce.archive .wp-block-query-title,
  body.woocommerce.archive .wp-block-query-title.alignwide,
  body.woocommerce.archive .wp-block-term-description,
  body.woocommerce.archive .wp-block-term-description.alignwide,
  body.woocommerce.archive .nxs-term-more{
    grid-column: 2 / 3 !important;
    justify-self: start !important;

    /* le tinem lipite sub breadcrumbs */
    margin-top: 18px !important;
    margin-bottom: 0 !important;

    max-width: none !important;
    width: auto !important;

    padding: 0 !important;
    box-sizing: border-box !important;
  }


  /* daca ai header intern in nxs-cat-main, nu-l mai dubla */
  body.woocommerce.archive .nxs-cat-main .nxs-cat-head{
    display: none !important;
  }

  /* 6) Font filtrare: mai mare si mai subtire (ca in poza) */
  body.woocommerce.archive .nxs-cat-sidebar a,
  body.woocommerce.archive .nxs-cat-sidebar li,
  body.woocommerce.archive .nxs-cat-sidebar label,
  body.woocommerce.archive .nxs-cat-sidebar .wc-block-components-checkbox__label{
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: #2c2c2c !important;
  }

  body.woocommerce.archive .nxs-cat-sidebar .widget-title,
  body.woocommerce.archive .nxs-side-title{
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 0 0 10px !important;
  }

  /* 7) Scoatem orice dublura de titlu “Categorii de produse” (daca exista) */
  body.woocommerce.archive .nxs-cat-sidebar .widget_product_categories .widget-title{
    display: none !important;
  }

  /* 8) Scapam de extra spatiu DUPA produse (cerinta ta #2) */
  body.woocommerce.archive .nxs-cat-page{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  body.woocommerce.archive .nxs-cat-main{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  body.woocommerce.archive ul.wc-block-product-template{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* =========================================================
   MOBILE (revine paddingul pe tot: breadcrumbs, descriere, buton)
========================================================= */
@media (max-width: 900px){

  /* readucem paddingul paginii (tu ai acum un override care il anuleaza) */
  body.woocommerce.archive .nxs-cat-page{
    padding: 0 18px 30px !important;
  }

  /* padding si la blocurile “de sus” */
  body.woocommerce.archive .wp-block-woocommerce-breadcrumbs,
  body.woocommerce.archive .wp-block-woocommerce-breadcrumbs.alignwide,
  body.woocommerce.archive .wc-block-breadcrumbs,
  body.woocommerce.archive .wp-block-term-description,
  body.woocommerce.archive .wp-block-term-description.alignwide,
  body.woocommerce.archive .nxs-term-more{
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }

  /* pe mobil NU vrem border-bottom mare ca desktop */
  body.woocommerce.archive .wp-block-woocommerce-breadcrumbs,
  body.woocommerce.archive .wc-block-breadcrumbs{
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (min-width: 901px){
  body.woocommerce.archive .wp-site-blocks > main{
    padding-top: 34px !important; /* ajusteaza 16-48px dupa inaltimea headerului */
  }
}

@media (min-width: 901px){
  body.woocommerce.archive .wp-site-blocks > main .wp-block-query-title{
    display:block !important;
    margin: 18px 0 8px !important;
    font-size: 44px !important;
    line-height: 1.06 !important;
    font-weight: 900 !important;
    color:#1f1f1f !important;
  }
}

/* =========================================================
   PATCH FINAL – spacing imagine/titlu + badge + mobile 1:1
   (pune la FINAL)
========================================================= */

/* 0) Breadcrumbs: mai mult “aer” (padding/margine) */
@media (min-width: 901px){
  body.woocommerce.archive .wp-block-woocommerce-breadcrumbs,
  body.woocommerce.archive .wp-block-woocommerce-breadcrumbs.alignwide,
  body.woocommerce.archive .wc-block-breadcrumbs,
  body.woocommerce.archive .woocommerce-breadcrumb{
    padding-bottom: 22px !important;
    margin-bottom: 8px !important;
  }
}

/* 1) ELIMINĂ “marginea gri” + colțuri rotunjite la imagine (global) */
.wc-block-components-product-image,
.wc-block-grid__product-image,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
  background: transparent !important;
  border-radius: 0 !important;
}

/* 2) Desktop: imagine FULL (fără padding) + spațiu jos înainte de titlu */
@media (min-width: 901px){

  /* wrapper-ul imaginii în Woo Blocks */
  .wc-block-components-product-image,
  .wc-block-grid__product-image{
    padding: 0 !important;          /* fără distanță în jur */
    margin: 0 0 14px !important;    /* DOAR jos față de titlu */
    border-radius: 0 !important;
  }

  .wc-block-components-product-image img,
  .wc-block-grid__product-image img{
    display: block !important;
    width: 100% !important;
    height: 260px !important;       /* poți ajusta 240-300 */
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  /* Classic: poza din loop */
  .woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
    display:block !important;
    width:100% !important;
    height:260px !important;
    object-fit: cover !important;
    padding:0 !important;
    margin: 0 0 14px !important;
  }

  /* titlu: mai mult spațiu sus (dacă tema mai “strânge”) */
  .wc-block-components-product-title,
  .wc-block-grid__product-title,
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    margin-top: 6px !important;
  }

  /* badge “Reducere” mai departe de margini */
  .wc-block-components-product-sale-badge,
  .woocommerce span.onsale{
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
  }
}

/* 3) Mobile: imagine puțin mai mică (inset), fără marginea gri */
@media (max-width: 900px){

  /* wrapper imagine – îi dăm un mic “inset” ca să nu fie lipită */
  .wc-block-components-product-image,
  .wc-block-grid__product-image{
    background: transparent !important;
    padding: 8px !important;        /* <<< “foarte puțin mai mică” */
    margin: 0 0 12px !important;    /* spațiu jos față de titlu */
    border-radius: 0 !important;
  }

  /* imagine pătrată + cover (mai ales în view 1 card / 1 col) */
  .wc-block-components-product-image img,
  .wc-block-grid__product-image img{
    display:block !important;
    width: 100% !important;
    height: auto !important;

    aspect-ratio: 1 / 1 !important; /* pătrat */
    object-fit: cover !important;

    border-radius: 0 !important;
  }

  /* badge “Reducere” – nu lipit de margini */
  .wc-block-components-product-sale-badge,
  .woocommerce span.onsale{
    top: 8px !important;
    right: 8px !important;
  }

  /* titlu: nu lipit de imagine (și în view 1 col) */
  .wc-block-components-product-title,
  .wc-block-grid__product-title{
    margin-top: 6px !important;
    padding-top: 2px !important;
  }
}

/* =========================================================
   FIX: Mobile 1 product/row -> imagine PERFECT 1:1
   (pune la FINAL)
========================================================= */
@media (max-width: 900px){

  /* wrapper-ul imaginii devine pătrat */
  .wc-block-components-product-image,
  .wc-block-grid__product-image{
    position: relative !important;
    padding: 8px !important;            /* păstrează inset-ul mic */
    margin: 0 0 12px !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  /* “cutia” reală în care stă poza (Woo Blocks) */
  .wc-block-components-product-image a,
  .wc-block-grid__product-image a,
  .wc-block-components-product-image__inner-container,
  .wc-block-components-product-image__inner-container > a{
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;     /* cheia: pătrat */
    overflow: hidden !important;
  }

  /* imaginea umple pătratul, indiferent de height="300" */
  .wc-block-components-product-image img,
  .wc-block-grid__product-image img{
    width: 100% !important;
    height: 100% !important;            /* suprascrie height din atribut */
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
  }
}

/* =====================================
   MOBILE – badge pozitionare fina
===================================== */
@media (max-width: 900px){

  .wc-block-components-product-image__inner-container
  .wc-block-components-product-sale-badge--align-right{
    top: 6px !important;     /* mai aproape de sus */
    right: 18px !important;  /* mai distantat de marginea dreapta */
    left: auto !important;
  }

}

/* =========================================================
   MOBILE – imagine diferită pe 1 col vs 2 col
   + fără colțuri rotunjite
   + fără “marginea gri”
   + spațiu corect între imagine și titlu
   + badge poziționat corect
========================================================= */
@media (max-width: 900px){

  /* 0) RESET: scoatem orice padding/background care creează “rama gri” */
  .wc-block-components-product-image,
  .wc-block-grid__product-image,
  .wp-block-woocommerce-product-image{
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
  }

  /* 1) Forțăm containerul imaginii să fie pătrat (și pe 1 col view) */
  .wc-block-components-product-image a,
  .wc-block-grid__product-image a,
  .wp-block-woocommerce-product-image a{
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  /* 2) Imaginea umple pătratul */
  .wc-block-components-product-image img,
  .wc-block-grid__product-image img,
  .wp-block-woocommerce-product-image img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;   /* dacă vrei să nu “taie”, schimbă în contain */
    display: block !important;
    border-radius: 0 !important;
  }

  /* 3) Spațiu sub imagine (să nu fie titlul lipit) */
  .wc-block-components-product-image,
  .wc-block-grid__product-image,
  .wp-block-woocommerce-product-image{
    margin-bottom: 12px !important;
  }

  /* 4) BADGE: mai aproape de sus, dar cu distanță față de marginea dreaptă
        + IMPORTANT: anulăm “width:100%” (asta îl lipește de margini) */
  .wc-block-components-product-image__inner-container .wc-block-components-product-sale-badge--align-right,
  .wc-block-components-product-image__inner-container .wc-block-components-product-sale-badge,
  .wc-block-components-product-sale-badge--align-right{
    width: auto !important;
    max-width: none !important;
    left: auto !important;
    top: 8px !important;     /* mai sus */
    right: 35px !important;  /* mai departe de margine */
  }

  /* 5) 1 COL VIEW: imagine puțin mai mică (inset), centrată */
  body.nxs-m-cols-1 .wc-block-components-product-image,
  body.nxs-m-cols-1 .wc-block-grid__product-image,
  body.nxs-m-cols-1 .wp-block-woocommerce-product-image{
    max-width: 100% !important;       /* ajustează 84–92% după gust */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 14px !important;  /* puțin mai mult decât 2-col */
  }

  /* 6) 2 COL VIEW: imagine puțin mai mare (aproape full), cu inset mic */
  body.nxs-m-cols-2 .wc-block-components-product-image,
  body.nxs-m-cols-2 .wc-block-grid__product-image,
  body.nxs-m-cols-2 .wp-block-woocommerce-product-image{
    max-width: 100% !important;
    margin-left: 0px !important;   /* “respiră” un pic față de card */
    margin-right: 0px !important;
    margin-bottom: 12px !important;
  }

  /* 7) Ca să nu fie titlul lipit de imagine și în layout-urile tale */
  .wc-block-components-product-title,
  .wc-block-grid__product-title{
    margin-top: 0 !important;
    padding-top: 2px !important;
  }
}

/* Desktop */
@media (min-width: 901px){
  .wc-block-product-template .wp-block-post-title{
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
  }
}

/* Mobil */
@media (max-width: 900px){
  .wc-block-product-template .wp-block-post-title{
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box;
  }
}

/* Ascunde categoria cu ID 21 */
body .product-categories .cat-item-21,
     .product-categories .cat-item-15{
    display:none !important;
}

/* =========================================================
   FIX: ultimul rand incomplet din grila de produse (blocul nativ
   WooCommerce "Product Collection") lasa coloane goale rezervate
   in loc sa se restranga - ex. 16 produse / 3 coloane = ultimul
   rand are un singur produs, dar tot randul rezerva spatiu pentru 3.
   "auto-fill" rezerva coloanele goale; "auto-fit" le colapseaza.
   ========================================================= */
.wc-block-product-template__responsive.columns-2{
  grid-template-columns: repeat(auto-fit, minmax(max(150px, calc(50% - .625em)), 1fr)) !important;
}
.wc-block-product-template__responsive.columns-3{
  grid-template-columns: repeat(auto-fit, minmax(max(150px, calc(33.33333% - .83333em)), 1fr)) !important;
}
.wc-block-product-template__responsive.columns-4{
  grid-template-columns: repeat(auto-fit, minmax(max(150px, calc(25% - .9375em)), 1fr)) !important;
}