/* ============================================================
   CARGO Product Page — mapped to real WooCommerce markup
   ============================================================ */

/* Design tokens now live in assets/cargo-tokens.css (loaded sitewide). */

.single-product .wrap{ max-width:1280px; margin:0 auto; padding:0 40px; }

/* Breadcrumb */
.single-product .woocommerce-breadcrumb{
  max-width:1280px; margin:0 auto; padding:18px 40px;
  font-size:12px; letter-spacing:0.06em; text-transform:uppercase; font-weight:500;
  color:var(--cargo-charcoal-soft); border-bottom:1px solid var(--cargo-line);
}
.single-product .woocommerce-breadcrumb a{ color:var(--cargo-tan-light); transition:color .2s; }
.single-product .woocommerce-breadcrumb a:hover{ color:var(--cargo-charcoal); }

/* ---------- Layout: gallery + summary ---------- */
.single-product div.product{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:64px;
  max-width:1280px;
  margin:0 auto;
  padding:40px 40px 10px;
 /* padding:40px 40px 60px; */
}
@media(max-width:900px){
  .single-product div.product{ grid-template-columns:1fr; }
}

/* WooCommerce core targets these by class (.images / .summary) with
   float:left/right; width:48% — neutralize that so the grid above
   actually controls layout instead of fighting old float rules. */
.single-product div.product > .images,
.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > .summary.entry-summary{
  float:none !important;
  width:auto !important;
  clear:none !important;
  display:block !important;
}

/* Clearfix fallback in case anything else still assumes floated children */
.single-product div.product::after{
  content:"";
  display:table;
  clear:both;
}

/* ---- Wishlist button: sits beside Add to Cart (moved there via JS) ---- */
.single-product form.cart{ display:flex !important; flex-wrap:wrap; gap:14px; align-items:center; }
.single-product form.cart .yith-wcwl-add-to-wishlist{
  margin:0 !important; order:3; float:none !important; clear:both;
}
.single-product form.cart .yith-wcwl-add-to-wishlist .feedback,
.single-product form.cart .yith-wcwl-add-to-wishlist .yith-wcwl-share,
.single-product form.cart .yith-wcwl-wishlistexistsbrowse,
.single-product form.cart .yith-wcwl-wishlistaddedbrowse{
  display:none !important;
}
.single-product form.cart .yith-wcwl-add-to-wishlist a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  height:48px !important;
  padding:0 22px !important;
  border-radius:999px !important;
  border:1px solid var(--cargo-charcoal) !important;
  background:#fff !important;
  color:var(--cargo-charcoal) !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  letter-spacing:0.04em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  transition:all .2s;
}
.single-product form.cart .yith-wcwl-add-to-wishlist a:hover{
  background:var(--cargo-charcoal) !important;
  color:#fff !important;
}
.single-product form.cart .yith-wcwl-add-to-wishlist a svg,
.single-product form.cart .yith-wcwl-add-to-wishlist a i{
  width:16px !important; height:16px !important; font-size:16px !important;
}

/* ---- Quantity stepper with +/- buttons ---- */
.single-product .quantity{
  display:flex !important;
  align-items:center;
  border:1px solid var(--cargo-line);
  border-radius:999px;
  overflow:hidden;
  height:48px;
}
.single-product .quantity .cargo-qty-btn{
  width:40px; height:48px; border:none; background:none; cursor:pointer;
  font-size:16px; color:var(--cargo-charcoal); display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.single-product .quantity .cargo-qty-btn:hover{ background:var(--cargo-cream); }
.single-product .quantity .qty{
  width:46px !important; height:48px !important; border:none !important; text-align:center;
  font-size:14px; font-weight:600; -moz-appearance:textfield; padding:0 !important;
}
.single-product .quantity .qty::-webkit-outer-spin-button,
.single-product .quantity .qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Same float issue affects the related products grid */
.related.products ul.products li.product,
.woocommerce ul.products li.product{
  float:none !important;
}

/* Gallery — main image on top, thumbnails as a row below */
.single-product div.product .woocommerce-product-gallery{ position:static; }
.single-product div.product .woocommerce-product-gallery__wrapper{
  border-radius:14px; overflow:hidden; background:var(--cargo-cream); margin-bottom:16px;
}
.single-product div.product .woocommerce-product-gallery__image img{
  width:100%; aspect-ratio:1/1; object-fit:contain;
  background: #ffffff !important; border-radius: 0px !important;
 /* background:var(--cargo-panel); border-radius:var(--r-lg); */
	
  /* Product shots are baked on white; multiply drops that white into the
     grey panel so the panel reads as one solid block, as per the design. */
  mix-blend-mode:multiply;
}
.single-product div.product .flex-control-thumbs{
  display:flex !important; gap:10px; list-style:none; padding:0 0 10px; margin:0;
  flex-wrap:nowrap !important; overflow-x:auto; cursor:grab;
  scrollbar-width:thin; scrollbar-color:#d8d3c8 transparent;
}
.single-product div.product .flex-control-thumbs::-webkit-scrollbar{ height:5px; }
.single-product div.product .flex-control-thumbs::-webkit-scrollbar-thumb{
  background:#d8d3c8; border-radius:3px;
}
.single-product div.product .flex-control-thumbs::-webkit-scrollbar-track{ background:transparent; }
.single-product div.product .flex-control-thumbs.cargo-dragging{ cursor:grabbing; }
.single-product div.product .flex-control-thumbs li{ width:64px; flex-shrink:0; }
.single-product div.product .flex-control-thumbs li img{
  display:block !important; border-radius:10px; border:1px solid var(--cargo-line); padding:6px;
  background:var(--cargo-cream); transition:border-color .2s; cursor:pointer;
  width:100%; aspect-ratio:1/1; object-fit:contain;
}
.single-product div.product .flex-control-thumbs img.flex-active,
.single-product div.product .flex-control-thumbs img:hover{ border-color:var(--cargo-charcoal); }

.single-product span.onsale{
  position:absolute; top:16px; left:16px; background:var(--cargo-gold) !important; color:#fff !important;
  font-size:11px !important; text-transform:uppercase; font-weight:700; padding:6px 12px !important;
  border-radius:4px; letter-spacing:0.05em; min-height:0 !important; min-width:0 !important;
  line-height:1 !important; z-index:5;
}

/* ---------- Summary column ---------- */
.single-product .summary.entry-summary{ padding-top:6px; font-family:inherit; }

.cargo-brand-tag{
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--cargo-teal);
  font-weight:700; margin-bottom:10px; display:block;
}

.single-product .summary h1.product_title{
  font-family:'DM Sans',system-ui,sans-serif; font-weight:700; font-size:42px; line-height:1.08;
  letter-spacing:-0.01em; margin-bottom:10px; color:var(--cargo-charcoal);
}

.cargo-sku-line{
  font-size:12.5px; letter-spacing:0.03em; text-transform:uppercase; color:var(--cargo-charcoal-soft);
  margin-bottom:18px;
}

.single-product .summary .woocommerce-product-rating{
  display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.single-product .star-rating{ color:var(--cargo-gold); font-size:15px; }
.single-product .woocommerce-review-link{ font-size:13px; color:var(--cargo-charcoal-soft); text-decoration:underline; }

.single-product .summary p.price{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:0 12px;
  font-size:52px; font-weight:700; color:var(--cargo-tan); margin-bottom:14px; line-height:1.05;
}
/* Compare-at price takes its own line above the current price */
.single-product .summary p.price del{
  flex:1 1 100%; color:var(--cargo-muted); font-weight:500; font-size:20px; opacity:1;
  text-decoration-thickness:1.5px; line-height:1.3;
}
.single-product .summary p.price ins{ text-decoration:none; color:var(--cargo-tan); font-weight:700; }
.single-product .summary p.price .cargo-save-badge{ align-self:center; }

.cargo-short-desc{
  font-size:14.5px; color:var(--cargo-charcoal-soft); line-height:1.7; margin-bottom:22px;
}
.cargo-readmore-link{
  color:var(--cargo-tan-light); font-weight:700; text-decoration:underline; white-space:nowrap; cursor:pointer;
}
.cargo-readmore-link:hover{ color:var(--cargo-charcoal); }

.single-product .summary .woocommerce-product-details__short-description{
  font-size:14.5px; color:var(--cargo-charcoal-soft); line-height:1.7; margin-bottom:26px;
}

/* ---------- Variation swatches (overlay on top of native select) ---------- */
.single-product table.variations{ display:none; } /* hidden once swatch UI takes over via JS */
.cargo-swatch-section{ margin:0 0 24px; flex:1 1 100% !important; width:100% !important; }
.cargo-swatch-label{ font-size:13px; font-weight:600; margin-bottom:12px; }
.cargo-swatch-label .cargo-selected-name{ color:var(--cargo-charcoal-soft); font-weight:400; }
.cargo-swatch-row{ display:flex; gap:12px; flex-wrap:wrap; }
.cargo-swatch{
  position:relative; width:56px; height:56px; border-radius:10px; overflow:hidden;
  border:2px solid transparent; cursor:pointer; background:#f1efe9; transition:border-color .2s;
}
.cargo-swatch img{ width:100%; height:100%; object-fit:cover; }
.cargo-swatch.selected{ border-color:var(--cargo-teal); }
.cargo-swatch:hover{ border-color:var(--cargo-charcoal); }

/* ---------- Quantity + Add to cart ---------- */
.single-product form.cart{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:18px; }
.single-product .quantity{ margin:0; }
.single-product .quantity .qty{
  height:48px; border:1px solid var(--cargo-line); border-radius:999px; text-align:center;
  width:64px; font-size:14px; font-weight:600;
}
.single-product button.single_add_to_cart_button{
  flex:1 1 auto; order:0; background:var(--cargo-tan) !important; color:#fff !important;
  border:none !important; border-radius:var(--r-pill) !important; height:60px;
  font-size:15px !important; letter-spacing:0.18em; text-transform:uppercase; font-weight:500 !important;
  transition:background .2s; box-shadow:none !important;
}
.single-product button.single_add_to_cart_button:hover{ background:var(--cargo-tan-dark) !important; }

/* Native category line is suppressed — Category now lives in the meta box. */
.single-product .product_meta .posted_in{ display:none !important; }

/* ---------- Savings badge (sale products) ---------- */
.cargo-save-badge{
  display:inline-block; background:var(--cargo-save); color:var(--cargo-charcoal);
  font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  padding:4px 9px; margin-left:14px; vertical-align:middle; white-space:nowrap;
}

/* ---------- Trust badges ---------- */
.cargo-trust-badges{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:18px 26px; margin:32px 0 26px;
}
.cargo-trust-item{ display:flex; align-items:center; gap:14px; }
.cargo-trust-item .cargo-trust-icon{
  flex:0 0 auto; width:42px; height:42px; border-radius:var(--r-sm);
  background:var(--cargo-cream); display:flex; align-items:center; justify-content:center;
}
.cargo-trust-item svg{ width:21px; height:21px; stroke:var(--cargo-charcoal); fill:none; flex-shrink:0; }
.cargo-trust-item span{ font-size:14px; font-weight:400; line-height:1.3; }
@media(max-width:600px){
  .cargo-trust-badges{ grid-template-columns:1fr; gap:14px; }
}

/* ---------- Warranty / spec sheet ---------- */
.cargo-meta-extra{
  margin-bottom:0; background:var(--cargo-panel);
  border-radius:var(--r-md); padding:16px 24px;
}
.cargo-meta-row{ display:flex; gap:8px; font-size:15px; padding:7px 0; border-bottom:none; }
.cargo-meta-row span{ color:var(--cargo-charcoal-soft); }
.cargo-meta-row--in-box{
  padding:9px 0 !important; font-size:13px !important;
}
.cargo-meta-row--in-box span{ font-weight:600; color:var(--cargo-charcoal); }
.cargo-meta-row--in-box strong{ font-weight:600; color:var(--cargo-charcoal); }
.cargo-spec-download{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:12.5px; font-weight:700;
  color:var(--cargo-charcoal); border-bottom:1px solid var(--cargo-gold); padding-bottom:3px; text-decoration:none;
}
.cargo-spec-download svg{ width:14px; height:14px; }

/* ---------- Product meta (SKU / category) ---------- */
.single-product .product_meta{
  font-size:13px; color:var(--cargo-charcoal-soft);
  border:1px solid var(--cargo-line); border-radius:12px; padding:16px 18px; margin-top:8px;
}
.single-product .product_meta > span{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--cargo-line);
}
.single-product .product_meta > span:last-child{ border-bottom:none; }
.single-product .product_meta a{ color:var(--cargo-tan-light) !important; text-decoration:underline; }
.single-product .product_meta a:hover{ color:var(--cargo-charcoal) !important; }

/* SKU now shown near the title — hide the duplicate row here */
.single-product .product_meta .sku_wrapper{ display:none !important; }

.single-product .product_meta .posted_in{
  font-weight:600; color:var(--cargo-charcoal);
}
.single-product .product_meta .sku,
.single-product .product_meta .posted_in a{
  font-weight:400; color:var(--cargo-charcoal-soft);
}

/* Tags row: not a flex space-between row like SKU/Category — let it wrap
   naturally, and keep each tag link from breaking mid-phrase */
.single-product .product_meta .tagged_as{
  display:block !important;
  font-weight:600; color:var(--cargo-charcoal);
  line-height:2.1;
}
.single-product .product_meta .tagged_as a{
  font-weight:400;
  white-space:nowrap;
  display:inline-block;
  margin-right:2px;
}

/* ============================================================
   Tabs → styled as an accordion
   ============================================================ */
.single-product .woocommerce-tabs{ max-width:1280px; margin:0px; padding:0 40px; }
.single-product .woocommerce-tabs ul.tabs{
  display:flex; flex-direction:column; list-style:none; padding:0; margin:0 0 32px; border:none;
}
.single-product .woocommerce-tabs ul.tabs li{
  border:none !important;
  border-bottom:1px solid var(--cargo-line) !important;
  margin:0; padding:0; background:none !important;
}
.single-product .woocommerce-tabs ul.tabs li:first-child{ border-top:1px solid var(--cargo-line) !important; }
.single-product .woocommerce-tabs ul.tabs li a{
  display:flex; align-items:center; justify-content:space-between;
  font-family:'DM Sans', sans-serif; font-weight:600; font-size:13px !important;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--cargo-charcoal) !important; padding:20px 4px !important; text-decoration:none;
  transition:color .2s; border:none !important; background:none !important; box-shadow:none !important;
}
.single-product .woocommerce-tabs ul.tabs li a:hover{ color:var(--cargo-tan-light) !important; }
.single-product .woocommerce-tabs ul.tabs li a::after{
  content:""; width:9px; height:9px; flex-shrink:0;
  border-right:1.6px solid var(--cargo-charcoal-soft); border-bottom:1.6px solid var(--cargo-charcoal-soft);
  transform:rotate(45deg); transition:transform .25s;
}
.single-product .woocommerce-tabs ul.tabs li.cargo-open a::after{ transform:rotate(225deg); }

.single-product .woocommerce-tabs .woocommerce-Tabs-panel{
  display:none; padding:20px 30px; font-size:14.5px; color:var(--cargo-charcoal-soft); line-height:1.75;
  border:none !important;
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel.cargo-panel-open{ display:block !important; }
.single-product .woocommerce-tabs .woocommerce-Tabs-panel h2{ display:none; }
.single-product .woocommerce-tabs .woocommerce-Tabs-panel h3,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel .spec-title{
  font-family:'Cormorant Garamond',serif; font-weight:500; font-style:italic; font-size:22px;
  color:var(--cargo-charcoal); margin:28px 0 14px;
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel h3:first-child,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel .spec-title:first-child{ margin-top:0; }
.single-product .woocommerce-tabs .woocommerce-Tabs-panel a,
.single-product .woocommerce-product-details__short-description a{
  color:var(--cargo-tan-light) !important; text-decoration:underline;
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel a:hover,
.single-product .woocommerce-product-details__short-description a:hover{
  color:var(--cargo-charcoal) !important;
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel p{ margin-bottom:12px; }
.single-product .woocommerce-tabs .woocommerce-Tabs-panel a.btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:8px;
  color:var(--cargo-charcoal); border-bottom:1px solid var(--cargo-gold); padding-bottom:3px; font-weight:600;
}

.single-product table.shop_attributes{ width:100%; border-collapse:collapse; }
.single-product table.shop_attributes tr{ border-bottom:1px solid var(--cargo-line); background:none !important; }
.single-product table.shop_attributes th,
.single-product table.shop_attributes td{ padding:12px 4px !important; font-size:14px; border:none !important; background:none !important; }
.single-product table.shop_attributes th{ color:var(--cargo-charcoal-soft); font-weight:400; width:220px; }
.single-product table.shop_attributes td{ font-weight:600; color:var(--cargo-charcoal); }

/* Reviews tab */
.single-product #reviews{ display:block; }
.single-product #reviews .commentlist{ list-style:none; margin:0; padding:0; }
.single-product #reviews .comment{ padding:20px 0; border-top:1px solid var(--cargo-line); }
.single-product #reviews .star-rating{ margin-bottom:8px; }
.single-product #reviews p.meta strong{ font-weight:700; font-size:13.5px; color:var(--cargo-charcoal); }
.single-product #reviews .comment-form-rating,
.single-product #reviews #respond{ margin-top:20px; }
.single-product #reviews #submit{
  background:var(--cargo-charcoal); color:#fff; border:none; border-radius:999px;
  padding:12px 26px; font-size:12.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
}

/* Custom accordion content types */
.cargo-tab-list{ list-style:none; padding:0; margin:0; }
.cargo-tab-list li{
  position:relative; padding-left:22px; margin-bottom:10px; font-size:14.5px; color:var(--cargo-charcoal-soft);
}
.cargo-tab-list li::before{
  content:"";
  position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%;
  background:var(--cargo-gold);
}
.cargo-warranty-line{ margin-bottom:14px; font-size:14.5px; }
.cargo-brand-heading{
  font-family:'Cormorant Garamond',serif; font-weight:500; font-style:italic; font-size:22px;
  color:var(--cargo-charcoal); margin-bottom:10px;
}
.cargo-tab-related{ margin-top:36px; padding-top:28px; border-top:1px solid var(--cargo-line); }
.cargo-tab-related h3{
  font-family:'Cormorant Garamond',serif; font-weight:500; font-size:22px; margin-bottom:20px;
}

/* ============================================================
   Also Available In — 2-column grid rows
   ============================================================ */
.cargo-also-available{ margin-bottom:60px; padding-bottom:20px; }
.cargo-also-available h2,
.cargo-curated-collection h2,
.related.products > h2{
  font-family:'Cormorant Garamond',serif; font-weight:500; font-style:italic; font-size:28px;
  margin-bottom:24px; color:var(--cargo-charcoal);
}
.cargo-available-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.cargo-available-row{
  display:flex; align-items:center; gap:18px; background:var(--cargo-cream);
  border-radius:10px; padding:14px 20px; transition:box-shadow .2s;
}
.cargo-available-row:hover{ box-shadow:0 4px 14px rgba(42,42,42,0.08); }
.cargo-available-row img{
  width:64px; height:64px; object-fit:contain; background:#fff; border-radius:8px; flex-shrink:0;
}
.cargo-available-text h4{ font-size:14px; font-weight:600; color:var(--cargo-charcoal); margin-bottom:4px; }
.cargo-available-text .price{ font-size:13px; font-weight:700; color:var(--cargo-gold); }
@media(max-width:700px){
  .cargo-available-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   Curated Collections — "Explore the X Collection" strip
   ============================================================ */
.cargo-curated-collection{ margin-bottom:60px; padding-top:20px; border-top:1px solid var(--cargo-line); }
.cargo-curated-eyebrow{
  display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:0.08em;
  text-transform:uppercase; font-weight:700; color:var(--cargo-teal); margin-bottom:10px;
}
.cargo-curated-row{
  display:grid; grid-auto-flow:column; grid-auto-columns:150px; gap:16px;
  overflow-x:auto; padding-bottom:16px; scrollbar-width:none;
}
.cargo-curated-row::-webkit-scrollbar{ display:none; }
.cargo-curated-item{
  display:block; background:var(--cargo-cream); border-radius:10px; overflow:hidden;
  aspect-ratio:1/1; transition:box-shadow .2s;
}
.cargo-curated-item:hover{ box-shadow:0 4px 14px rgba(42,42,42,0.1); }
.cargo-curated-item img{ width:100%; height:100%; object-fit:contain; }
.cargo-curated-viewall{
  display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--cargo-tan-light); border-bottom:1px solid var(--cargo-tan-light); padding-bottom:3px; margin-bottom:16px;
}
.cargo-curated-trail{
  padding-top:14px; border-top:1px solid var(--cargo-line);
  font-size:12.5px; color:var(--cargo-charcoal-soft);
}

/* ============================================================
   Related Products — full-width horizontal carousel, card design
   matching reference (image + category + title + price/cart button)
   ============================================================ */
.related.products{ margin-top:10px; }
.related.products > h2{
  font-family:'Cormorant Garamond',serif; font-weight:500; font-style:italic; font-size:28px;
  margin-bottom:24px; color:var(--cargo-charcoal);
}
.related.products ul.products{
  display:flex !important; gap:22px; overflow-x:auto; list-style:none;
  padding:4px 4px 18px; margin:0; scrollbar-width:thin; scrollbar-color:#d8d3c8 transparent;
}
.related.products ul.products::-webkit-scrollbar{ height:6px; }
.related.products ul.products::-webkit-scrollbar-thumb{ background:#d8d3c8; border-radius:3px; }
.related.products ul.products::-webkit-scrollbar-track{ background:transparent; }

.related.products ul.products li.product{
  flex:0 0 260px; background:#fff !important; border-radius:14px !important; overflow:hidden;
  box-shadow:0 2px 12px rgba(42,42,42,0.08) !important; margin:0 !important; border:none !important;
  padding:0 !important; position:relative;
}

.related.products ul.products li.product a.woocommerce-loop-product__link{
  display:block; position:relative; background:var(--cargo-cream);
}
.related.products ul.products li.product img{
  width:100%; aspect-ratio:1/1; object-fit:contain; background:var(--cargo-cream) !important;
  border-radius:0 !important;
}
.related.products ul.products li.product span.onsale{
  position:absolute !important; top:12px !important; left:12px !important; right:auto !important;
  background:var(--cargo-gold) !important; color:#fff !important; font-size:10px !important;
  text-transform:uppercase; font-weight:700; padding:4px 8px !important; border-radius:4px;
}

/* Wishlist heart overlay, top-right of image */
.related.products ul.products li.product .yith-wcwl-add-to-wishlist{
  position:absolute !important; top:12px !important; right:12px !important; z-index:3;
  float:none !important; margin:0 !important;
}
.related.products ul.products li.product .yith-wcwl-add-to-wishlist .feedback,
.related.products ul.products li.product .yith-wcwl-add-to-wishlist .yith-wcwl-share,
.related.products ul.products li.product .yith-wcwl-wishlistexistsbrowse,
.related.products ul.products li.product .yith-wcwl-wishlistaddedbrowse{
  display:none !important;
}
.related.products ul.products li.product .yith-wcwl-add-to-wishlist a{
  display:flex !important; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; background:#fff !important;
  box-shadow:0 1px 5px rgba(0,0,0,0.15); border:none !important; color:var(--cargo-charcoal);
}
.related.products ul.products li.product .yith-wcwl-add-to-wishlist a:hover{ color:var(--cargo-tan-light); }

.related.products ul.products li.product .woocommerce-loop-product__title{
  font-size:14px; font-weight:600; color:var(--cargo-charcoal);
  margin:16px 60px 6px 18px; line-height:1.35;
}
.related.products ul.products li.product .price{
  color:var(--cargo-gold) !important; font-weight:700 !important; font-size:14px;
  margin:0 0 18px 18px; display:inline-block;
}

/* Price + cart button footer row */
.related.products ul.products li.product a.add_to_cart_button,
.related.products ul.products li.product a.button{
  position:absolute; right:16px; bottom:16px;
  width:38px; height:38px; border-radius:8px !important; background:var(--cargo-gold) !important;
  display:flex !important; align-items:center; justify-content:center;
  border:none !important; box-shadow:none !important; font-size:0 !important; color:#fff !important;
  transition:background .2s;
}
.related.products ul.products li.product a.add_to_cart_button:hover,
.related.products ul.products li.product a.button:hover{ background:var(--cargo-charcoal) !important; }
.related.products ul.products li.product a.add_to_cart_button::before,
.related.products ul.products li.product a.button::before{
  content:"\1F6D2"; font-size:16px;
}


/* ============================================================
   ============================================================
   CARGO — CORRECTIVE OVERRIDES (loaded last within this file)
   ============================================================
   ============================================================ */

/* ---------- Gallery: never leave it invisible ---------- */
.single-product .woocommerce-product-gallery{ opacity:1 !important; }
.single-product .woocommerce-product-gallery__image{ display:block !important; }
.single-product .woocommerce-product-gallery__image img{
  opacity:1 !important; visibility:visible !important;
  width:100% !important; height:auto !important;
  aspect-ratio:1/1; object-fit:contain;
  background:var(--cargo-panel); border-radius:var(--r-lg);
}

/* ---------- Thumbnails: smaller, all visible, scrollable ---------- */
.single-product div.product .flex-control-thumbs{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  overflow-x:auto;
  padding:12px 0 8px !important;
  margin:0 !important;
  list-style:none;
  cursor:grab;
  scrollbar-width:thin;
  scrollbar-color:#d8d3c8 transparent;
}
.single-product div.product .flex-control-thumbs::-webkit-scrollbar{ height:4px; }
.single-product div.product .flex-control-thumbs::-webkit-scrollbar-thumb{ background:#d8d3c8; border-radius:2px; }
.single-product div.product .flex-control-thumbs.cargo-dragging{ cursor:grabbing; }
.single-product div.product .flex-control-thumbs li{
  width:52px !important; flex:0 0 52px !important; margin:0 !important;
}
.single-product div.product .flex-control-thumbs li img{
  width:100% !important; aspect-ratio:1/1; object-fit:contain;
  border:1px solid var(--cargo-line); border-radius:8px; padding:4px;
  background:#fff; cursor:pointer; opacity:1 !important;
  transition:border-color .2s;
}
.single-product div.product .flex-control-thumbs li img.flex-active,
.single-product div.product .flex-control-thumbs li img:hover{
  border-color:var(--cargo-charcoal);
}

/* ---------- Swatches: readable pills, not single letters ---------- */
.cargo-swatch-section{ margin:0 0 22px !important; width:100% !important; }
.cargo-swatch-label{
  font-size:13px; font-weight:600; margin-bottom:10px; color:var(--cargo-charcoal);
}
.cargo-swatch-label .cargo-selected-name{ color:var(--cargo-charcoal-soft); font-weight:400; }
.cargo-swatch-row{ display:flex; flex-wrap:wrap; gap:10px; }
.cargo-swatch{
  border:1px solid var(--cargo-gold) !important; background:#fff; border-radius:8px;
  cursor:pointer; padding:0; overflow:hidden; transition:all .18s;
  min-width:52px; height:52px;
}
.cargo-swatch img{ width:52px; height:52px; object-fit:cover; display:block; }
.cargo-swatch--text{
  padding:0 16px; height:auto; min-height:42px;
  font-size:12px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase;
  color:var(--cargo-gold) !important;
}
.cargo-swatch:hover{ border-color:var(--cargo-charcoal) !important; }
.cargo-swatch--text:hover{ color:var(--cargo-charcoal) !important; }
.cargo-swatch.selected{
  border-color:var(--cargo-gold) !important; box-shadow:0 0 0 1px var(--cargo-gold) !important;
}
.cargo-swatch--text.selected{
  background:var(--cargo-gold) !important; color:#fff !important;
}

/* ---------- Price: more breathing room before the swatches/cart row ---------- */
.single-product .summary p.price{ margin-bottom:28px !important; }

/* ---------- Purchase row: qty + Add to Cart + Wishlist on one line ---------- */
.single-product form.cart{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:12px !important;
  margin:6px 0 24px !important;
}
.single-product form.cart .cargo-swatch-section{ flex:1 1 100%; }

.single-product .quantity{
  display:flex !important; align-items:center;
  border:1px solid var(--cargo-line) !important; border-radius:999px !important;
  overflow:hidden; height:52px; box-sizing:border-box !important; flex:0 0 auto; margin:0 !important;
}
.single-product .quantity .cargo-qty-btn{
  width:40px; height:52px; border:none; background:none; cursor:pointer;
  font-size:17px; line-height:1; color:var(--cargo-charcoal);
  display:flex; align-items:center; justify-content:center; padding:0;
  transition:background .15s;
}
.single-product .quantity .cargo-qty-btn:hover{ background:var(--cargo-cream); }
.single-product .quantity input.qty{
  width:40px !important; height:52px !important;
  border:none !important; background:none !important;
  text-align:center; font-size:14px; font-weight:600;
  padding:0 !important; margin:0 !important;
  -moz-appearance:textfield; box-shadow:none !important;
}
.single-product .quantity input.qty::-webkit-outer-spin-button,
.single-product .quantity input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.single-product button.single_add_to_cart_button{
  flex:1 1 auto !important;
  order:0;
  height:60px !important;
  box-sizing:border-box !important;
  min-width:0;
  background:var(--cargo-tan) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:0.06em !important;
  text-transform:uppercase !important;
  padding:0 28px !important;
  box-shadow:none !important;
  transition:background .2s;
}
.single-product button.single_add_to_cart_button:hover{ background:#000 !important; }
.single-product button.single_add_to_cart_button.disabled,
.single-product button.single_add_to_cart_button:disabled{
  background:#c9c5bd !important; color:#fff !important; cursor:not-allowed;
}

/* Wishlist sits directly beside Add to Cart */
.single-product form.cart .yith-wcwl-add-to-wishlist{
  flex:0 0 auto !important;
  margin:0 !important;
  float:none !important;
  order:9;
}
.single-product form.cart .yith-wcwl-add-to-wishlist .feedback,
.single-product form.cart .yith-wcwl-add-to-wishlist .yith-wcwl-share,
.single-product form.cart .yith-wcwl-wishlistexistsbrowse,
.single-product form.cart .yith-wcwl-wishlistaddedbrowse{ display:none !important; }
.single-product form.cart .yith-wcwl-add-to-wishlist a{
  display:flex !important; align-items:center; justify-content:center; gap:8px;
  height:52px !important; box-sizing:border-box !important; padding:0 22px !important;
 /* border:1px solid var(--cargo-charcoal) !important; */ border: 1px solid #ddd !important;
  border-radius:999px !important;
  background:#fff !important;
  color:var(--cargo-charcoal) !important;
  font-size:12px !important; font-weight:700 !important;
  letter-spacing:0.06em !important; text-transform:uppercase !important;
  white-space:nowrap; transition:all .2s;
}
.single-product form.cart .yith-wcwl-add-to-wishlist a:hover{
  background:var(--cargo-charcoal) !important; color:#fff !important;
}
.single-product form.cart .yith-wcwl-add-to-wishlist a i,
.single-product form.cart .yith-wcwl-add-to-wishlist a svg{
  width:15px !important; height:15px !important; font-size:15px !important;
}

/* ---------- Warranty row, once moved inside the meta box ---------- */
.cargo-meta-extra{ margin:0 !important; }
.cargo-meta-row--in-box{
  display:flex !important; justify-content:space-between !important; align-items:center;
  padding:10px 0 !important;
  border-bottom:1px solid var(--cargo-line) !important;
  font-size:13px !important;
}
.cargo-meta-row--in-box span{ font-weight:600; color:var(--cargo-charcoal); }
.cargo-meta-row--in-box strong{ font-weight:400; color:var(--cargo-charcoal-soft); }

/* ---------- Related products: horizontal carousel ---------- */
.related.products{ margin-top:20px; }
.cargo-rel-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; gap:20px;
}
.cargo-rel-head h2{ margin:0 !important; }
.cargo-rel-nav{ display:flex; gap:10px; flex-shrink:0; }
.cargo-rel-btn{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--cargo-line); background:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:15px; line-height:1; color:var(--cargo-charcoal);
  padding:0; transition:all .2s;
}
.cargo-rel-btn:hover:not(:disabled){
  background:var(--cargo-charcoal); color:#fff; border-color:var(--cargo-charcoal);
}
.cargo-rel-btn:disabled{ opacity:.3; cursor:default; }

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

.related.products ul.products li.product{
  flex:0 0 260px !important;
  width:260px !important;
  scroll-snap-align:start;
  display:flex !important;
  flex-direction:column !important;
  background:#fff !important;
  border:none !important;
  border-radius:14px !important;
  box-shadow:0 2px 12px rgba(42,42,42,.08) !important;
  overflow:hidden;
  padding:0 !important;
  margin:0 !important;
  position:relative;
  transition:box-shadow .2s, transform .2s;
}
.related.products ul.products li.product:hover{
  box-shadow:0 8px 22px rgba(42,42,42,.14) !important;
  transform:translateY(-2px);
}
.related.products ul.products li.product a.woocommerce-loop-product__link{
  display:block; background:var(--cargo-cream);
}
.related.products ul.products li.product img{
  width:100% !important; aspect-ratio:1/1; object-fit:contain;
  background:var(--cargo-cream) !important;
  border-radius:0 !important; margin:0 !important;
}
.related.products ul.products li.product span.onsale{
  position:absolute !important; top:12px !important; left:12px !important; right:auto !important;
  background:var(--cargo-gold) !important; color:#fff !important;
  font-size:10px !important; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:4px 9px !important; border-radius:4px;
  margin:0 !important; min-width:0 !important; min-height:0 !important; line-height:1.4 !important;
}
.related.products ul.products li.product .cargo-loop-category{
  display:block !important;
  font-size:11px !important; font-weight:700 !important;
  letter-spacing:0.07em !important; text-transform:uppercase !important;
  color:var(--cargo-teal) !important;
  margin:16px 18px 4px !important;
}
.related.products ul.products li.product .woocommerce-loop-product__title{
  font-size:14px !important; font-weight:600 !important;
  color:var(--cargo-charcoal) !important;
  line-height:1.4; margin:0 18px 8px !important; padding:0 !important;
}
.related.products ul.products li.product .price{
  font-size:14px !important; font-weight:700 !important;
  color:var(--cargo-gold) !important;
  margin:0 18px 0 !important; padding:0 !important;
  display:block;
}
.related.products ul.products li.product .price del{
  color:#b0aca3 !important; font-weight:500; margin-right:6px; opacity:1;
}
.related.products ul.products li.product .price ins{ text-decoration:none; }

/* Cart icon button, pinned bottom-right of each card */
.related.products ul.products li.product a.button{
  position:absolute !important;
  right:16px !important; bottom:16px !important;
  width:40px !important; height:40px !important;
  padding:0 !important; margin:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  border:none !important; border-radius:8px !important;
  background:var(--cargo-gold) !important;
  color:#fff !important;
  font-size:0 !important;
  box-shadow:none !important;
  transition:background .2s;
}
.related.products ul.products li.product a.button:hover{
  background:var(--cargo-charcoal) !important;
}
.related.products ul.products li.product a.button::before{
  font-family:"Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome;
  font-weight:900;
  content:"\f07a";           /* fa-shopping-cart */
  font-size:15px;
  line-height:1;
  color:#fff;
}
.related.products ul.products li.product a.button.loading::before{
  content:"\f110";            /* fa-spinner */
  animation:cargo-spin 1s linear infinite;
}
@keyframes cargo-spin{ to{ transform:rotate(360deg); } }
.related.products ul.products li.product a.button.added::before{
  content:"\f00c";            /* fa-check */
}
/* hide WooCommerce's "View cart" link that appears after adding */
.related.products ul.products li.product a.added_to_cart{ display:none !important; }

/* leave room under the price for the cart button */
.related.products ul.products li.product .price{ margin-bottom:70px !important; }

@media(max-width:600px){
  .related.products ul.products li.product{ flex:0 0 220px !important; width:220px !important; }
}


/* ============================================================
   ============================================================
   CARGO — ROUND 2 FIXES (must stay at the very bottom)
   ============================================================
   ============================================================ */

/* ---------- Related products: NORMAL button, not an icon ----------
   The icon button relied on a Font Awesome \f07a glyph. If FA isn't
   enqueued on the page the glyph renders as nothing (or a tofu box),
   and because the button was also font-size:0 there was no text to
   fall back to — so it looked like an empty gold square. Replaced
   with a plain full-width pill button in normal document flow, which
   removes the absolute-positioning alignment problem entirely. */
.related.products ul.products li.product{
  padding-bottom:0 !important;
}
.related.products ul.products li.product .price{
  margin:0 18px 14px !important;   /* kills the old 70px bottom reserve */
  display:block !important;
}
.related.products ul.products li.product a.button,
.related.products ul.products li.product a.add_to_cart_button{
  position:static !important;       /* was absolute — that was the misalignment */
  display:block !important;
  width:auto !important;
  height:auto !important;
  margin:0 18px 18px !important;
  padding:12px 16px !important;
  border:none !important;
  border-radius:999px !important;
  background:var(--cargo-gold) !important;
  color:#fff !important;
  font-size:11.5px !important;      /* was font-size:0 for the icon */
  font-weight:700 !important;
  letter-spacing:0.06em !important;
  text-transform:uppercase !important;
  text-align:center !important;
  line-height:1.2 !important;
  text-decoration:none !important;
  box-shadow:none !important;
  transition:background .2s;
}
.related.products ul.products li.product a.button:hover,
.related.products ul.products li.product a.add_to_cart_button:hover{
  background:var(--cargo-charcoal) !important;
}
/* Remove the Font Awesome pseudo-element entirely */
.related.products ul.products li.product a.button::before,
.related.products ul.products li.product a.add_to_cart_button::before,
.related.products ul.products li.product a.button::after,
.related.products ul.products li.product a.add_to_cart_button::after{
  content:none !important;
  display:none !important;
}
/* Keep the loading/added states legible on a text button */
.related.products ul.products li.product a.button.loading{
  opacity:.7 !important;
}

/* Card must be a column so the button sits at the bottom of the card */
.related.products ul.products li.product{
  display:flex !important;
  flex-direction:column !important;
}
.related.products ul.products li.product a.woocommerce-loop-product__link{
  display:block !important;
}
.related.products ul.products li.product a.button,
.related.products ul.products li.product a.add_to_cart_button{
  margin-top:auto !important;
}

/* ---------- Carousel track: make sure it can actually scroll ---------- */
.related.products ul.products{
  display:flex !important;
  flex-wrap:nowrap !important;      /* columns-4 from Woo would otherwise wrap */
  overflow-x:auto !important;
  scroll-snap-type:x mandatory;
  gap:22px !important;
  padding:4px 4px 18px !important;
  margin:0 !important;
  list-style:none !important;
}
.related.products ul.products li.product{
  flex:0 0 260px !important;
  width:260px !important;
  max-width:260px !important;
  scroll-snap-align:start;
  float:none !important;
  margin:0 !important;
}
.related.products ul.products::before,
.related.products ul.products::after{
  content:none !important;
  display:none !important;          /* Woo clearfix pseudo-elements become flex items */
}


/* ============================================================
   ============================================================
   CARGO — BRAND COLOUR LOCK (charcoal + gold only)
   No pink, no teal/blue anywhere on the product page.
   ============================================================
   ============================================================ */

/* ---------- Carousel arrows: were rendering pink (theme/Elementor
     default button colour bleeding through). Lock to gold + charcoal. */
.related.products .cargo-rel-btn,
.single-product .cargo-rel-btn{
  border:1px solid var(--cargo-gold) !important;
  background:#fff !important;
  color:var(--cargo-charcoal) !important;
  box-shadow:none !important;
  outline:none !important;
}
.related.products .cargo-rel-btn:hover:not(:disabled),
.single-product .cargo-rel-btn:hover:not(:disabled){
  background:var(--cargo-charcoal) !important;
  border-color:var(--cargo-charcoal) !important;
  color:#fff !important;
}
.related.products .cargo-rel-btn:disabled,
.single-product .cargo-rel-btn:disabled{
  opacity:.35 !important;
  background:#fff !important;
  border-color:var(--cargo-line) !important;
  color:var(--cargo-charcoal) !important;
}
.related.products .cargo-rel-btn:focus,
.single-product .cargo-rel-btn:focus{
  outline:none !important;
  box-shadow:none !important;
}

/* ---------- Category eyebrow on the cards: teal -> gold ---------- */
.related.products ul.products li.product .cargo-loop-category{
  color:var(--cargo-gold) !important;
}

/* ---------- Cards: light background behind the button too ----------
   The image + text block already sat on cream while the button strip
   stayed white, which split the card in two. One cream surface for the
   whole card instead. */
.related.products ul.products li.product{
  background:var(--cargo-cream) !important;
  border:1px solid var(--cargo-line) !important;
  box-shadow:none !important;
}
.related.products ul.products li.product:hover{
  box-shadow:0 6px 18px rgba(42,42,42,.10) !important;
  border-color:#ddd7cb !important;
  transform:translateY(-2px);
}
.related.products ul.products li.product a.woocommerce-loop-product__link,
.related.products ul.products li.product img{
  background:var(--cargo-cream) !important;
}

/* Card button stays gold, on the cream card */
.related.products ul.products li.product a.button,
.related.products ul.products li.product a.add_to_cart_button{
  background:var(--cargo-gold) !important;
  color:#fff !important;
  border:none !important;
}
.related.products ul.products li.product a.button:hover,
.related.products ul.products li.product a.add_to_cart_button:hover{
  background:var(--cargo-charcoal) !important;
  color:#fff !important;
}

/* Sale badge + prices: gold, never pink */
.related.products ul.products li.product span.onsale{
  background:var(--cargo-gold) !important;
  color:#fff !important;
}
.related.products ul.products li.product .price,
.related.products ul.products li.product .price ins{
  color:var(--cargo-gold) !important;
}
.related.products ul.products li.product .price del{
  color:#b0aca3 !important;
}

/* ---------- Wishlist heart on cards: charcoal, gold on hover ---------- */
.related.products ul.products li.product .yith-wcwl-add-to-wishlist a{
  color:var(--cargo-charcoal) !important;
}
.related.products ul.products li.product .yith-wcwl-add-to-wishlist a:hover{
  color:var(--cargo-gold) !important;
}

/* ---------- Kill the teal accents elsewhere in the summary ---------- */
.single-product .cargo-brand-tag{ color:var(--cargo-gold) !important; }
.single-product .cargo-trust-item svg{ stroke:var(--cargo-gold) !important; }
.single-product .cargo-curated-eyebrow{ color:var(--cargo-gold) !important; }
.single-product .star-rating,
.single-product #reviews .star-rating{ color:var(--cargo-gold) !important; }


/* ============================================================
   ============================================================
   CARGO — RELATED PRODUCTS: EXACTLY 4 PER VIEW, NO PEEKING
   ============================================================
   ============================================================ */

/* The track scrolls, but a whole number of cards fills the frame, so the
   5th card is never half-visible. Cards are sized off the container width
   instead of a fixed 260px:  (100% - 3 gaps) / 4 */
.related.products ul.products{
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  gap:22px !important;
  padding:6px 0 18px !important;
  margin:0 !important;
  list-style:none !important;
  /* hide the scrollbar — arrows are the control */
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
.related.products ul.products::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}

.related.products ul.products li.product{
  flex:0 0 calc((100% - 66px) / 4) !important;   /* 4 cards + 3 x 22px gaps */
  width:calc((100% - 66px) / 4) !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  scroll-snap-align:start;
  float:none !important;
  margin:0 !important;
}

/* Clip the section so nothing bleeds outside the container edge */
.related.products{
  overflow:hidden !important;
}

/* ---------- Responsive: 4 -> 3 -> 2 -> 1 ---------- */
@media (max-width:1100px){
  .related.products ul.products li.product{
    flex:0 0 calc((100% - 44px) / 3) !important;   /* 3 cards + 2 gaps */
    width:calc((100% - 44px) / 3) !important;
  }
}
@media (max-width:820px){
  .related.products ul.products li.product{
    flex:0 0 calc((100% - 22px) / 2) !important;   /* 2 cards + 1 gap */
    width:calc((100% - 22px) / 2) !important;
  }
}
@media (max-width:560px){
  .related.products ul.products{ gap:16px !important; }
  .related.products ul.products li.product{
    flex:0 0 100% !important;                       /* 1 card */
    width:100% !important;
  }
  .cargo-rel-head{ flex-wrap:wrap; gap:12px; }
}


/* ============================================================
   ============================================================
   CARGO — RELATED PRODUCTS: 6 PER VIEW (FINAL SIZING BLOCK)
   Supersedes every card-width rule above. Keep this last.
   ============================================================
   ============================================================ */

.related.products{
  overflow:hidden !important;   /* nothing bleeds past the container edge */
}

.related.products ul.products{
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  gap:20px !important;
  padding:6px 0 18px !important;
  margin:0 !important;
  list-style:none !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
.related.products ul.products::-webkit-scrollbar{
  display:none !important; width:0 !important; height:0 !important;
}
/* Woo's clearfix pseudo-elements would otherwise become flex items */
.related.products ul.products::before,
.related.products ul.products::after{
  content:none !important; display:none !important;
}

/* 6 cards + 5 gaps of 20px = 100px of gutter.
   Kept as a plain calc() with literal values — no custom-property maths —
   since DevTools was flagging an invalid property value in this rule. */
.related.products ul.products li.product{
  flex:0 0 calc((100% - 100px) / 6) !important;
  width:calc((100% - 100px) / 6) !important;
  max-width:calc((100% - 100px) / 6) !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  scroll-snap-align:start;
  float:none !important;
  margin:0 !important;
}

/* ---------- Images: COVER, not contain ----------
   contain was letterboxing product shots against the card, producing the
   white/grey patches. cover fills the frame; the square aspect-ratio keeps
   every card the same height. */
.related.products ul.products li.product a.woocommerce-loop-product__link{
  display:block !important;
  overflow:hidden !important;
  background:transparent !important;
}
.related.products ul.products li.product img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:1 / 1 !important;
  object-fit:cover !important;
  object-position:center !important;
  background:transparent !important;
  border-radius:0 !important;
  margin:0 !important;
  display:block !important;
}

/* ---------- Tighter typography for the narrower 6-up card ---------- */
.related.products ul.products li.product .cargo-loop-category{
  font-size:10px !important;
  letter-spacing:0.06em !important;
  margin:14px 14px 4px !important;
}
.related.products ul.products li.product .woocommerce-loop-product__title{
  font-size:13px !important;
  line-height:1.35 !important;
  margin:0 14px 8px !important;
}
.related.products ul.products li.product .price{
  font-size:13px !important;
  margin:0 14px 12px !important;
}
.related.products ul.products li.product .price del{
  font-size:12px !important;
}
.related.products ul.products li.product a.button,
.related.products ul.products li.product a.add_to_cart_button{
  margin:auto 14px 14px !important;
  padding:10px 8px !important;
  font-size:10.5px !important;
  letter-spacing:0.05em !important;
}
.related.products ul.products li.product span.onsale{
  font-size:9px !important;
  padding:4px 7px !important;
  top:10px !important;
  left:10px !important;
}

/* ---------- Responsive: 6 -> 5 -> 4 -> 3 -> 2 -> 1 ---------- */
@media (max-width:1400px){
  .related.products ul.products li.product{
    flex:0 0 calc((100% - 80px) / 5) !important;
    width:calc((100% - 80px) / 5) !important;
    max-width:calc((100% - 80px) / 5) !important;
  }
}
@media (max-width:1150px){
  .related.products ul.products li.product{
    flex:0 0 calc((100% - 60px) / 4) !important;
    width:calc((100% - 60px) / 4) !important;
    max-width:calc((100% - 60px) / 4) !important;
  }
}
@media (max-width:900px){
  .related.products ul.products li.product{
    flex:0 0 calc((100% - 40px) / 3) !important;
    width:calc((100% - 40px) / 3) !important;
    max-width:calc((100% - 40px) / 3) !important;
  }
}
@media (max-width:700px){
  .related.products ul.products li.product{
    flex:0 0 calc((100% - 20px) / 2) !important;
    width:calc((100% - 20px) / 2) !important;
    max-width:calc((100% - 20px) / 2) !important;
  }
}
@media (max-width:520px){
  .related.products ul.products{ gap:16px !important; }
  .related.products ul.products li.product{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:100% !important;
  }
  .cargo-rel-head{ flex-wrap:wrap; gap:12px; }
}


/* ============================================================
   ============================================================
   CARGO — CARD MEDIA FRAME (fixes the "image doesn't fill" issue)
   ============================================================
   ============================================================

   object-fit:cover was already correct — the problem is that the source
   photos are catalogue cut-outs with a big white margin baked into the
   JPEG. cover crops the FILE to the box; it can't crop whitespace that is
   part of the picture. So: give the image a real frame (injected by JS as
   .cargo-card-media) and scale the image up inside it, clipping the
   baked-in margin away.

   Tune the crop with the scale() value below:
     1.00 = no crop (original framing)
     1.12 = trims ~5% off each edge   <- current
     1.25 = aggressive, for very padded shots
   ============================================================ */

.related.products ul.products li.product .cargo-card-media{
  position:relative !important;
  display:block !important;
  width:100% !important;
  aspect-ratio:1 / 1 !important;     /* square frame — swap to 4/5 for taller cards */
  overflow:hidden !important;        /* this is what clips the zoom */
  background:#fff !important;
  margin:0 !important;
  border-radius:0 !important;
}

.related.products ul.products li.product .cargo-card-media img{
  position:absolute !important;
  top:20px !important;
  left:10px !important;
  width:95% !important;
  height:95% !important;
  max-width:150px !important;
	
 /* top:0 !important;
  left:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important; */
  aspect-ratio:auto !important;      /* the FRAME owns the ratio now, not the img */
  object-fit:cover !important;
  object-position:center center !important;
  transform:scale(1.12);             /* <-- crops the baked-in white margin */
  transform-origin:center center;
  transition:transform .45s ease;
  background:#fff !important;
  border-radius:0 !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
}

/* Subtle zoom on hover — the frame clips it, so nothing shifts */
.related.products ul.products li.product:hover .cargo-card-media img{
  transform:scale(1.2);
}

/* The anchor no longer needs to be the image box */
.related.products ul.products li.product a.woocommerce-loop-product__link{
  display:block !important;
  overflow:visible !important;
  background:transparent !important;
  padding:0 !important;
}

/* Sale badge / wishlist heart must sit ABOVE the media frame */
.related.products ul.products li.product span.onsale,
.related.products ul.products li.product .yith-wcwl-add-to-wishlist{
  z-index:4 !important;
}

/* Fallback: if JS hasn't wrapped the image yet, keep it square and covered
   so the card never collapses mid-load */
.related.products ul.products li.product img:not(.cargo-card-media img){
  aspect-ratio:1 / 1;
  object-fit:cover;
}


/* ============================================================
   ============================================================
   CARGO — NO HORIZONTAL OVERFLOW
   For products with many thumbnails / many variants (e.g. the
   17-variant bathroom packages).
   ============================================================
   ============================================================

   Root cause: `grid-template-columns: 1fr 1fr` means minmax(AUTO, 1fr).
   An `auto` minimum = the track can never be narrower than its content's
   min-content width. The thumbnail strip is nowrap flex with unshrinkable
   52px items, so 17 thumbs = ~1000px of min-content. The column grew to
   match, the summary got pushed off-screen, and overflow-x:auto never
   engaged because nothing ever overflowed — the box just expanded.

   Fix: minmax(0, 1fr) on the tracks + min-width:0 on the children, so the
   inner scrollers are actually allowed to become scrollers.
   ============================================================ */

.single-product div.product{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  max-width:100%;
  overflow-x:clip;
}
@media(max-width:900px){
  .single-product div.product{ grid-template-columns:minmax(0,1fr); }
}

/* Grid children must be allowed to shrink below their content */
.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > .images,
.single-product div.product > .summary.entry-summary,
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .cargo-also-available,
.single-product div.product > .cargo-curated-collection,
.single-product div.product > .related.products{
  min-width:0 !important;
  max-width:100% !important;
}

/* ---------- Gallery ---------- */
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery .flex-viewport{
  min-width:0 !important;
  max-width:100% !important;
}

/* ---------- Thumbnail strip: the main offender ----------
   It's allowed to be long — it just has to SCROLL rather than stretch
   its parent. min-width:0 is what makes overflow-x:auto actually work. */
.single-product div.product .flex-control-thumbs,
.single-product div.product ol.flex-control-nav{
  display:flex !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
  max-width:100% !important;
  width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  box-sizing:border-box !important;
  scrollbar-width:thin;
}
.single-product div.product .flex-control-thumbs li{
  flex:0 0 52px !important;
  min-width:0 !important;
}

/* ---------- Summary column ---------- */
.single-product .summary.entry-summary{
  min-width:0 !important;
  max-width:100% !important;
  overflow-wrap:anywhere;
}

/* ---------- Variant swatches: 17 pills must wrap, never push ---------- */
.cargo-swatch-section,
.cargo-swatch-row{
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
.cargo-swatch-row{
  display:flex !important;
  flex-wrap:wrap !important;   /* wrap, don't overflow */
}
.cargo-swatch{
  max-width:100% !important;
  box-sizing:border-box !important;
}
.cargo-swatch--text{
  white-space:normal !important;   /* long labels break instead of pushing */
  max-width:100% !important;
  line-height:1.3 !important;
  padding:10px 14px !important;
  height:auto !important;
  text-align:center;
}

/* ---------- Purchase row ---------- */
.single-product form.cart,
.single-product .woocommerce-variation-add-to-cart,
.single-product .single_variation_wrap{
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
.single-product .woocommerce-variation-add-to-cart button.single_add_to_cart_button{
  min-width:0 !important;
  max-width:100% !important;
}

/* ---------- Long content in the accordion / meta ---------- */
.single-product .woocommerce-tabs,
.single-product .woocommerce-Tabs-panel,
.single-product .product_meta{
  min-width:0 !important;
  max-width:100% !important;
  overflow-wrap:anywhere;
}
.single-product .woocommerce-Tabs-panel img,
.single-product .woocommerce-Tabs-panel table{
  max-width:100% !important;
  height:auto;
}
.single-product table.shop_attributes{
  display:block;
  overflow-x:auto;
  max-width:100%;
}

/* ---------- Final safety net ---------- */
.single-product .wrap,
.single-product .cargo-also-available,
.single-product .cargo-curated-collection{
  max-width:100%;
  box-sizing:border-box;
}


/* ============================================================
   ============================================================
   CARGO — META / SWATCH / PRICE SIZING
   ============================================================
   ============================================================ */

/* ---------- Categories: stack + wrap across multiple rows ----------
   Two things were breaking this:
   1. `.product_meta > span` is display:flex; justify-content:space-between,
      so with 17 categories every link became a squeezed flex item.
   2. The overflow-wrap:anywhere added for the overflow fix then let those
      squeezed links break mid-word, one letter per line.
   Treat Categories exactly like Tags: a block that wraps inline links. */
.single-product .product_meta{
  overflow-wrap:normal !important;
  word-break:normal !important;
}
.single-product .product_meta .posted_in{
  display:block !important;          /* was flex — that was the squeeze */
  font-weight:600;
  color:var(--cargo-charcoal);
  line-height:2.1;
  text-align:left !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}
.single-product .product_meta .posted_in a{
  display:inline-block;
  font-weight:400;
  white-space:nowrap !important;     /* a category name never splits */
  margin-right:2px;
  overflow-wrap:normal !important;
  word-break:normal !important;
}
.single-product .product_meta .tagged_as,
.single-product .product_meta .tagged_as a{
  overflow-wrap:normal !important;
  word-break:normal !important;
}
.single-product .product_meta .tagged_as a{
  white-space:nowrap !important;
}

/* ---------- Variant swatches: 14px text, 5px 10px padding ---------- */
.cargo-swatch--text{
  font-size:14px !important;
  padding:5px 10px !important;
  height:auto !important;
  min-height:0 !important;
  min-width:0 !important;
  line-height:1.5 !important;
  white-space:nowrap !important;     /* compact enough now to stay on one line */
  text-transform:uppercase !important;
  border-radius:6px !important;
}
.cargo-swatch-row{
  gap:8px !important;
  flex-wrap:wrap !important;
}

/* ---------- Price: 20px ---------- */
.single-product .summary p.price,
.single-product .summary p.price ins,
.single-product .woocommerce-variation-price .price,
.single-product .woocommerce-variation-price span.price,
.single-product .woocommerce-variation-price .price ins{
  font-size:20px !important;
  font-weight:700 !important;
}
.single-product .summary p.price del,
.single-product .woocommerce-variation-price .price del,
.single-product .woocommerce-variation-price del{
  font-size:15px !important;
  font-weight:500 !important;
  color:#b0aca3 !important;
}


body.single-product .product form.cart .yith-wcwl-add-to-wishlist { display: block !important; }
.yith-wcwl-add-to-wishlist .yith-wcwl-add-button { display: block !important; }