/* Theme's own site-main wrapper was capping everything at 1140px
   regardless of our own container widths — this was the real
   bottleneck behind the "page feels narrow" issue all along. */
#main.site-main{
  max-width:1280px !important;
}

.cargo-subcat-row{ margin:0; padding:56px 0; border-bottom:1px solid #e7e3dc; }
.cargo-subcat-row:last-child{ border-bottom:none; }

.cargo-subcat-carousel-wrap{ display:flex; align-items:flex-start; gap:48px; }

.cargo-subcat-label{ flex:0 0 260px; padding-top:4px; }
.cargo-subcat-label h2{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500;
  font-size:30px; color:#2a2a2a; margin-bottom:12px; line-height:1.15;
}
.cargo-subcat-label p{ font-size:13.5px; color:#5a5a58; line-height:1.6; margin-bottom:22px; }

.cargo-subcat-viewall{
  display:inline-flex; align-items:center; gap:8px;
  background:#232323; color:var(--cargo-tan); padding:14px 24px; border-radius:999px;
  font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase; font-weight:700;
  margin-bottom:22px; transition:background .2s, color .2s; box-shadow:0 2px 6px rgba(0,0,0,0.12);
}
.cargo-subcat-viewall span{ font-size:14px; color:var(--cargo-tan); transition:color .2s; }
.cargo-subcat-viewall:hover{ background:#000; color:var(--cargo-tan-light); }
.cargo-subcat-viewall:hover span{ color:var(--cargo-tan-light); }

.cargo-subcat-arrows{ display:flex; gap:10px; }
.cargo-car-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid #d8d3c8; background:#fff;
  cursor:pointer; font-size:15px; color:#2a2a2a; transition:all .2s;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  line-height:1 !important;
}
.cargo-car-btn:hover{ background:#2a2a2a; color:#fff; border-color:#2a2a2a; }
.cargo-car-btn:disabled{ opacity:0.35; cursor:default; }
.cargo-car-btn:disabled:hover{ background:#fff; color:#2a2a2a; border-color:#d8d3c8; }

.cargo-subcat-carousel{ flex:1; min-width:0; overflow:hidden; }

/* Soft fade on the right edge so the last partial card reads as "more to scroll" instead of a hard cut-off */
.cargo-subcat-carousel{
  -webkit-mask-image: linear-gradient(to right, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, black 92%, transparent 100%);
}

.cargo-subcat-carousel ul.products{
  display:flex !important; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  list-style:none; padding:4px 4px 14px; margin:0; scrollbar-width:none;
}
.cargo-subcat-carousel ul.products::-webkit-scrollbar{ display:none; }

/* Card as a strict flex column: media / text (grows) / button (pinned bottom) */
.cargo-subcat-carousel ul.products li.product{
  flex:0 0 230px; scroll-snap-align:start; position:relative;
  background:#faf8f5 !important; border-radius:14px !important; padding:20px 20px 22px !important;
  box-shadow:0 2px 10px rgba(42,42,42,0.06) !important; transition:box-shadow .2s, transform .2s;
  display:flex !important; flex-direction:column !important; margin:0 !important;
  border:none !important; min-height:100%;
}
.cargo-subcat-carousel ul.products li.product:hover{
  box-shadow:0 8px 20px rgba(42,42,42,0.12) !important; transform:translateY(-2px);
}

.cargo-subcat-carousel li.product a.woocommerce-loop-product__link{
  display:block; position:relative; flex:1;
}
.cargo-subcat-carousel li.product img{
  width:100%; aspect-ratio:1/1; object-fit:contain; border-radius:10px;
  background:#fff !important; margin-bottom:16px;
}

.cargo-subcat-carousel li.product .woocommerce-loop-product__title{
  font-size:14px; font-weight:600; color:#2a2a2a; margin:0 0 6px; line-height:1.35;
}
.cargo-subcat-carousel li.product .price{
  display:block; font-size:13.5px; font-weight:700; color:var(--cargo-tan); margin-bottom:16px;
}
.cargo-subcat-carousel li.product .price del{ color:#b0aca3; font-weight:500; margin-right:6px; }
.cargo-subcat-carousel li.product .price ins{ text-decoration:none; color:var(--cargo-tan); }

/* Every possible wrapper WooCommerce might add around the button — stripped */
.cargo-subcat-carousel li.product > div,
.cargo-subcat-carousel li.product form.cart{
  border:none !important; background:none !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important; margin-top:auto !important; width:100% !important;
}

/* WooCommerce's <p class="add_to_cart_inline"> wrapper carries an inline border/padding style */
.cargo-subcat-carousel li.product p.add_to_cart_inline{
  border:none !important;
  padding:0 !important;
  margin:0 !important;
  margin-top:auto !important;
  width:100% !important;
  background:none !important;
}

/* The button itself — pinned to bottom directly too, in case there's no wrapper */
.cargo-subcat-carousel li.product a.button,
.cargo-subcat-carousel li.product a.add_to_cart_button,
.cargo-subcat-carousel li.product > a[class*="button"]{
  display:block !important;
  text-align:center !important;
  width:100% !important;
  box-sizing:border-box !important;
  border:1px solid #2a2a2a !important;
  border-radius:999px !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  color:#2a2a2a !important;
  font-size:12px !important;
  letter-spacing:0.04em !important;
  text-transform:uppercase !important;
  font-weight:600 !important;
  padding:11px !important;
  margin:0 !important;
  margin-top:auto !important;
  box-shadow:none !important;
  outline:none !important;
  transition:all .2s;
}
.cargo-subcat-carousel li.product a.button:hover,
.cargo-subcat-carousel li.product a.add_to_cart_button:hover{
  background:#2a2a2a !important; color:var(--cargo-tan) !important; border-color:#2a2a2a !important;
}

/* Sale badge: force top-left so it never collides with the wishlist heart */
.cargo-subcat-carousel ul.products li.product span.onsale{
  position:absolute !important;
  top:8px !important;
  left:8px !important;
  right:auto !important;
  background:var(--cargo-tan) !important;
  color:#fff !important;
  font-size:10px !important;
  text-transform:uppercase !important;
  font-weight:700 !important;
  padding:4px 8px !important;
  border-radius:4px !important;
  z-index:2 !important;
}

/* ---- Wishlist heart: use YITH's real icon only, icon-only display ---- */
.cargo-subcat-carousel li.product .yith-wcwl-add-to-wishlist{
  position:absolute !important;
  top:30px !important;
  right:30px !important;
  left:auto !important;
  z-index:3 !important;
  width:34px !important;
  height:34px !important;
  margin:0;
}
.cargo-subcat-carousel li.product .yith-wcwl-add-to-wishlist .feedback,
.cargo-subcat-carousel li.product .yith-wcwl-add-to-wishlist .yith-wcwl-share,
.cargo-subcat-carousel li.product .yith-wcwl-wishlistexistsbrowse,
.cargo-subcat-carousel li.product .yith-wcwl-wishlistaddedbrowse{
  display:none !important;
}
.cargo-subcat-carousel li.product .yith-wcwl-add-to-wishlist a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:34px !important;
  height:34px !important;
  border-radius:50% !important;
  background:#fff !important;
  box-shadow:0 1px 4px rgba(0,0,0,0.12) !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  color:#2a2a2a !important;
  padding:0 !important;
  margin:0 !important;
  border:none !important;
}
.cargo-subcat-carousel li.product .yith-wcwl-add-to-wishlist a:hover{
  background:#958e09 !important;
}
.cargo-subcat-carousel li.product .yith-wcwl-add-to-wishlist a *:not(i):not(svg){
  font-size:0 !important;
  width:0 !important;
  overflow:hidden !important;
  display:inline-block !important;
}
.cargo-subcat-carousel li.product .yith-wcwl-add-to-wishlist a i,
.cargo-subcat-carousel li.product .yith-wcwl-add-to-wishlist a svg{
  font-size:16px !important;
  width:16px !important;
  height:16px !important;
}

h2.woocommerce-loop-product__title:hover{
  color:#958e09 !important;
}

@media(max-width:1024px){
  .cargo-subcat-carousel-wrap{ flex-direction:column; gap:20px; }
  .cargo-subcat-label{ flex:none; width:100%; }
}