/* ============================================================
   CARGO — Level 2 Category Page
   PIECE 1: layout skeleton + product cards

   Uses the cargo-tokens.css variables (loaded site-wide before this
   file). The accent is --cargo-tan (#c08b6a) — the single accent the
   design system collapsed the old golds and teal into. Neutral greys
   that have no token (#fff, #b0aca3, #d8d2c6, shadows) stay literal.
   ============================================================ */

.cargo-cat{
  max-width:1440px;
  margin:0 auto;
  /* padding:0 40px 80px; */
  padding:0 40px 10px;
  box-sizing:border-box;
  font-family:'DM Sans', sans-serif;
  color:var(--cargo-charcoal);
}
/* Hero is TRUE full-bleed — it breaks out of the theme's capped container
   (#main.site-main is limited to 1280px) using the viewport-width trick.
   50% + 50vw pushes each edge to the actual screen edge. The text half is
   then re-padded to line up with the container's left gutter. */
.cargo-cat .cargo-hero{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  padding-left:max(40px, calc((100vw - 1280px) / 2 + 40px));
  box-sizing:border-box;
}

/* Smooth-scroll target offset so the sticky header doesn't cover the grid */
#cargo-grid{ scroll-margin-top:24px; }
html{ scroll-behavior:smooth; }

/* ---------- Header band (hero) — hard split, text left / photo right ---------- */
.cargo-hero{
  display:grid;
  grid-template-columns:1fr 46%;
  align-items:stretch;
  margin:0 0 44px;
  background:#fff;
  border-bottom:1px solid var(--cargo-line);
  min-height:420px;
}
.cargo-hero__text{
  padding:40px 56px 44px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.cargo-hero__media{
  background-image:var(--cargo-hero-img);
  background-size:cover;
  background-position:center;
  background-color:#1a1a1a; /* fallback while image loads / if missing */
}

/* Breadcrumb */
.cargo-hero__crumb{ margin-bottom:22px; }
.cargo-hero__breadcrumb,
.cargo-hero__breadcrumb a{
  font-size:12px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--cargo-muted); text-decoration:none;
}
.cargo-hero__breadcrumb a{ color:var(--cargo-tan); }
.cargo-hero__breadcrumb a:hover{ color:var(--cargo-tan-dark); }
.cargo-hero__crumb-sep{ margin:0 8px; color:var(--cargo-line); }

/* Title — tan, like Level 1 */
.cargo-hero__title{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:56px;
  font-weight:600;
  letter-spacing:0.03em;
  line-height:1.02;
  color:var(--cargo-tan);
  margin:0 0 18px;
  text-transform:uppercase;
}
/* Intro (category description) */
.cargo-hero__intro{
  font-size:15px;
  line-height:1.7;
  color:var(--cargo-charcoal-soft);
  margin:0 0 28px;
/*  max-width:52ch; */
}

/* KNOW MORE button — tan pill, scrolls to grid */
.cargo-hero__cta{
  display:inline-flex; align-items:center; gap:10px;
  align-self:flex-start;
  background:var(--cargo-tan); color:#fff !important;
  padding:15px 30px; border-radius:var(--r-pill);
  font-size:12.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  text-decoration:none; transition:background .2s;
  box-shadow:0 2px 8px rgba(160,113,79,.22);
}
.cargo-hero__cta:hover{ background:var(--cargo-tan-dark); color:#fff; }
.cargo-hero__cta-arrow{ font-size:14px; }

/* Feature blocks — three, with divider lines, like Level 1 */
.cargo-hero__features{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  margin-top:38px;
  border-top:1px solid var(--cargo-line);
  padding-top:26px;
}
.cargo-hero__feature{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:12px; padding:4px 16px;
  position:relative;
}
.cargo-hero__feature + .cargo-hero__feature::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px;
  width:1px; background:var(--cargo-line);
}
.cargo-hero__feature i{
  font-size:26px; color:var(--cargo-tan);
}
.cargo-hero__feature-icon{
  display:inline-flex;
  width:38px; height:38px;
  color:var(--cargo-tan);   /* inline SVGs use fill:currentColor */
}
.cargo-hero__feature-icon .cargo-feature-svg{
  width:100%; height:100%; display:block;
}
.cargo-hero__feature span{
  font-size:14px; font-weight:600; line-height:1.35; color:var(--cargo-charcoal);
}

/* Fallback header for non-category archives (plain shop) */
.cargo-cat__header{
  padding:36px 0 24px;
  border-bottom:1px solid var(--cargo-line);
  margin-bottom:32px;
}
.cargo-cat__title{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:44px;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--cargo-charcoal);
  margin:0;
  text-transform:capitalize;
}

/* ---------- Two-column body ---------- */
.cargo-cat__body{
  display:grid;
  grid-template-columns:264px minmax(0,1fr);
  gap:44px;
  align-items:start;
}
/* Non-category archives (plain shop) stay single column */
.cargo-cat:not(.cargo-cat--filtered) .cargo-cat__body{
  grid-template-columns:minmax(0,1fr);
}

/* ---------- Sidebar ---------- */
.cargo-cat__sidebar{
  position:sticky;
  top:24px;
  align-self:start;
  min-width:0;
}
.cargo-cat__filter-close{
  display:none; /* only in mobile drawer, Piece 4 */
  background:none; border:none; font-size:28px; line-height:1;
  color:var(--cargo-charcoal); cursor:pointer;
}

/* Placeholder — removed in Pieces 2 & 3 */
.cargo-cat__sidebar-placeholder{
  border:1px dashed #d8d2c6;
  border-radius:var(--r-sm);
  padding:24px 20px;
  background:var(--cargo-cream);
}
.cargo-cat__ph-label{
  font-size:12px; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--cargo-tan); margin:0 0 8px;
}
.cargo-cat__ph-note{ font-size:13px; color:var(--cargo-muted); margin:0; line-height:1.5; }

/* ---------- Main column ---------- */
.cargo-cat__main{ min-width:0; }

/* ---------- Toolbar: count + sort ---------- */
.cargo-cat__toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:1px solid var(--cargo-line);
}
.cargo-cat__toolbar .woocommerce-result-count{
  margin:0;
  font-size:13px;
  color:var(--cargo-muted);
}
.cargo-cat__toolbar .woocommerce-ordering{ margin:0; }
.cargo-cat__toolbar select.orderby{
  font-family:'DM Sans', sans-serif;
  font-size:13px;
  color:var(--cargo-charcoal);
  padding:10px 34px 10px 14px;
  border:1px solid var(--cargo-line);
  border-radius:var(--r-pill);
  background:#fff;
  cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232a2a2a' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}

/* Mobile filter toggle — hidden on desktop (Piece 4 wires the drawer) */
.cargo-cat__filter-toggle{
  display:none;
  font-family:'DM Sans', sans-serif;
  font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:11px 22px;
  border:1px solid var(--cargo-charcoal); border-radius:var(--r-pill);
  background:#fff; color:var(--cargo-charcoal); cursor:pointer;
}

/* ============================================================
   PRODUCT GRID + CARDS  (cream surface, gold button)
   Styles the stock WooCommerce ul.products loop.
   ============================================================ */
.cargo-cat__main ul.products{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px;
  margin:0 0 48px;
  padding:0;
  list-style:none;
}
.cargo-cat__main ul.products::before,
.cargo-cat__main ul.products::after{ content:none !important; display:none !important; }

.cargo-cat__main ul.products li.product{
  margin:0 !important;
  padding:0 !important;
  width:auto !important;
  float:none !important;
  display:flex;
  flex-direction:column;
  background:var(--cargo-cream);
  border:1px solid var(--cargo-line);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:box-shadow .2s, transform .2s, border-color .2s;
}
.cargo-cat__main ul.products li.product:hover{
  box-shadow:0 8px 22px rgba(42,42,42,.10);
  border-color:#ddd7cb;
  transform:translateY(-2px);
}

/* Media frame — square, cover, clips baked-in whitespace */
.cargo-cat__main ul.products li.product a.woocommerce-loop-product__link{
  display:block;
  position:relative;
  overflow:hidden;
  background:#fff;
  text-decoration:none;
}
.cargo-cat__main ul.products li.product a.woocommerce-loop-product__link img{
  width: 88%;
/* width:100%; */
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:center;
  display:block;
  margin: 25px 20px 10px 18px;
/* margin:0; */
  transition:transform .45s ease;
}
.cargo-cat__main ul.products li.product:hover a.woocommerce-loop-product__link img{
  transform:scale(1.05);
}

/* Sale badge */
.cargo-cat__main ul.products li.product .onsale{
  position:absolute; top:12px; left:12px; z-index:3;
  background:var(--cargo-tan); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:4px; margin:0; min-height:0; line-height:1.2;
}

/* Category eyebrow (from existing woocommerce_shop_loop_item_title hook) */
.cargo-cat__main ul.products li.product .cargo-loop-category{
  display:block;
  font-size:10.5px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--cargo-tan);
  margin:16px 16px 4px;
}

/* Title */
.cargo-cat__main ul.products li.product .woocommerce-loop-product__title{
  font-family:'DM Sans', sans-serif;
  font-size:14px; font-weight:600; line-height:1.4;
  color:var(--cargo-charcoal);
  margin:0 16px 8px;
  padding:0;
}

/* Price */
.cargo-cat__main ul.products li.product .price{
  display:block;
  font-size:14px; font-weight:700;
  color:var(--cargo-tan);
  margin:0 16px 14px;
}
.cargo-cat__main ul.products li.product .price del{
  color:#b0aca3; font-weight:500; font-size:13px; margin-right:6px;
}
.cargo-cat__main ul.products li.product .price ins{
  text-decoration:none; color:var(--cargo-tan);
}

/* Button — solid gold pill, pinned to card bottom */
.cargo-cat__main ul.products li.product a.button,
.cargo-cat__main ul.products li.product a.add_to_cart_button{
  margin:auto 16px 16px !important;
  padding:12px 16px !important;
  border:none !important;
  border-radius:var(--r-pill) !important;
  background:var(--cargo-tan) !important;
  color:#fff !important;
  font-size:11px !important; font-weight:700 !important;
  letter-spacing:0.06em !important; text-transform:uppercase !important;
  text-align:center !important; text-decoration:none !important;
  line-height:1.2 !important;
  transition:background .2s;
}
.cargo-cat__main ul.products li.product a.button:hover,
.cargo-cat__main ul.products li.product a.add_to_cart_button:hover{
  background:var(--cargo-charcoal) !important;
}
.cargo-cat__main ul.products li.product a.button.loading{ opacity:.7; }

/* Compare + wishlist icons (kept, per spec) — sit top-right on the media */
.cargo-cat__main ul.products li.product .yith-wcwl-add-to-wishlist{
  position:absolute; top:10px; right:10px; z-index:3; margin:0;
}

/* ---------- Pagination ---------- */
.cargo-cat__main .woocommerce-pagination{
  margin-top:8px;
  text-align:center;
}
.cargo-cat__main .woocommerce-pagination ul{
  display:inline-flex; gap:6px; border:none; margin:0; padding:0; border: none !important;
}
.cargo-cat__main .woocommerce-pagination ul li{ border:none !important; margin: 2px !important; width: 42px; }
.cargo-cat__main .woocommerce-pagination ul li a,
.cargo-cat__main .woocommerce-pagination ul li span{
  display:flex; align-items:center; justify-content:center;
  min-width:42px !important; height:42px; padding: 11px 12px !important;
  border:1px solid var(--cargo-line); border-radius:var(--r-pill);
  font-size:13px; font-weight:600; color:var(--cargo-charcoal);
  background:#fff; text-decoration:none;
  transition:all .2s;
}
.cargo-cat__main .woocommerce-pagination ul li span.current{
  background:var(--cargo-tan); border-color:var(--cargo-tan); color:#fff;
}
.cargo-cat__main .woocommerce-pagination ul li a:hover{
  border-color:var(--cargo-charcoal); background:var(--cargo-charcoal); color:#fff;
}

/* ---------- SEO block (below grid) ---------- */
.cargo-cat__seo{
  margin-top:56px;
  padding-top:32px;
  border-top:0px solid var(--cargo-line);
 /* border-top:1px solid var(--cargo-line); */
  max-width:900px;
  font-size:14.5px; line-height:1.7; color:var(--cargo-charcoal-soft);
}
.cargo-cat__seo h2, .cargo-cat__seo h3{
  font-family:'Cormorant Garamond', Georgia, serif;
  color:var(--cargo-charcoal); font-weight:600;
}

/* ============================================================
   RESPONSIVE  (drawer behaviour comes in Piece 4;
   this is just the grid/column reflow)
   ============================================================ */
@media (max-width:1200px){
  .cargo-cat__main ul.products{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:1024px){
  .cargo-cat__body{ grid-template-columns:220px minmax(0,1fr); gap:28px; }
  .cargo-cat__main ul.products{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:900px){
  .cargo-hero{ grid-template-columns:1fr; min-height:0; }
  .cargo-hero__text{ padding:32px 0 36px; }
  .cargo-hero__media{ min-height:220px; order:-1; }  /* photo on top on mobile */
  .cargo-hero__title{ font-size:44px; }
}
@media (max-width:768px){
  .cargo-cat{ padding:0 20px 60px; }
  .cargo-cat .cargo-hero{ margin-left:-20px; margin-right:-20px; padding-left:20px; }
  .cargo-hero__title{ font-size:38px; }
  .cargo-hero__features{ margin-top:28px; padding-top:20px; }
  .cargo-hero__feature{ padding:4px 8px; gap:8px; }
  .cargo-hero__feature i{ font-size:22px; }
  .cargo-hero__feature span{ font-size:12.5px; }
  .cargo-cat__body{ grid-template-columns:minmax(0,1fr); }
  .cargo-cat__sidebar{ display:none; }         /* becomes a drawer in Piece 4 */
  .cargo-cat__filter-toggle{ display:inline-block; }
  .cargo-cat__title{ font-size:34px; }
  .cargo-cat__main ul.products{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
}
@media (max-width:480px){
  .cargo-cat__main ul.products{ grid-template-columns:minmax(0,1fr); }
}


/* ============================================================
   PIECE 3 — SIDEBAR: category nav + filters
   ============================================================ */

/* Hide the mobile drawer close button on desktop (Piece 4 shows it) */
.cargo-cat__filter-close{ display:none; }

/* Shared filter group */
.cargo-filter{
  margin-bottom:30px;
  padding-bottom:26px;
  border-bottom:1px solid var(--cargo-line);
}
.cargo-filter:last-child{ border-bottom:none; }
.cargo-filter__title{
  font-family:'DM Sans', sans-serif;
  font-size:12px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--cargo-charcoal);
  margin:0 0 16px;
}

/* ---------- Category nav ---------- */
.cargo-filter__nav-list{ list-style:none; margin:0; padding:0; }
.cargo-filter__nav-list li{ margin:0 0 2px; }
.cargo-filter__nav-list a{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 10px; border-radius:var(--r-sm);
  font-size:13.5px; color:var(--cargo-charcoal-soft); text-decoration:none;
  transition:background .15s, color .15s;
}
.cargo-filter__nav-list a:hover{ background:var(--cargo-cream); color:var(--cargo-charcoal); }
.cargo-filter__nav-parent > a{ font-weight:700; color:var(--cargo-charcoal); }
.cargo-filter__nav-list li.is-active > a{
  background:var(--cargo-tan); color:#fff;
}
.cargo-filter__nav-list li.is-active .cargo-filter__count{ color:#fff; }
.cargo-filter__count{ font-size:11px; color:var(--cargo-muted); font-variant-numeric:tabular-nums; }

/* ---------- Layered-nav lists (Finish + Brand) ---------- */
.cargo-filter ul.woocommerce-widget-layered-nav-list,
.cargo-filter .woocommerce-widget-layered-nav-list{
  list-style:none; margin:0; padding:0; border:none;
}
.cargo-filter .woocommerce-widget-layered-nav-list__item{
  margin:0 0 4px; padding:0;
}
.cargo-filter .woocommerce-widget-layered-nav-list__item a{
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 4px; font-size:13.5px; color:var(--cargo-charcoal-soft);
  text-decoration:none; transition:color .15s;
}
.cargo-filter .woocommerce-widget-layered-nav-list__item a:hover{ color:var(--cargo-tan); }
.cargo-filter .woocommerce-widget-layered-nav-list__item .count{
  font-size:11px; color:var(--cargo-muted); margin-left:auto;
}
/* faux checkbox before each layered-nav link */
.cargo-filter .woocommerce-widget-layered-nav-list__item a::before{
  content:""; width:16px; height:16px; flex:0 0 16px;
  border:1.5px solid var(--cargo-line); border-radius:4px; background:#fff;
  transition:all .15s;
}
.cargo-filter .woocommerce-widget-layered-nav-list__item.chosen a::before{
  background:var(--cargo-tan); border-color:var(--cargo-tan);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M2 6l3 3 5-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}
.cargo-filter .woocommerce-widget-layered-nav-list__item.chosen a{ color:var(--cargo-charcoal); font-weight:600; }

/* Brand list: cap height + scroll (54 brands) */
.cargo-filter__scroll{
  max-height:260px; overflow-y:auto; padding-right:6px;
  scrollbar-width:thin;
}
.cargo-filter__scroll::-webkit-scrollbar{ width:6px; }
.cargo-filter__scroll::-webkit-scrollbar-thumb{ background:var(--cargo-line); border-radius:3px; }

/* ---------- Price filter ---------- */
.cargo-filter--price .price_slider_wrapper{ margin-top:4px; }
.cargo-filter--price .ui-slider{
  position:relative; height:4px; background:var(--cargo-line);
  border-radius:2px; margin:14px 6px 18px;
}
.cargo-filter--price .ui-slider .ui-slider-range{
  position:absolute; height:100%; background:var(--cargo-tan); border-radius:2px;
}
.cargo-filter--price .ui-slider .ui-slider-handle{
  position:absolute; top:50%; width:16px; height:16px; margin-top:-8px; margin-left:-8px;
  background:#fff; border:2px solid var(--cargo-tan); border-radius:50%;
  cursor:grab; box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.cargo-filter--price .price_label{
  font-size:13px; color:var(--cargo-charcoal-soft); margin-bottom:12px;
}
.cargo-filter--price .price_label .amount{ font-weight:700; color:var(--cargo-charcoal); }
.cargo-filter--price .button,
.cargo-filter--price button{
  background:var(--cargo-charcoal) !important; color:#fff !important;
  border:none !important; border-radius:var(--r-pill) !important;
  font-size:11px !important; font-weight:700 !important; letter-spacing:0.06em !important;
  text-transform:uppercase !important; padding:9px 20px !important; cursor:pointer;
}
.cargo-filter--price .button:hover{ background:var(--cargo-tan) !important; }
.cargo-filter--price .clear{ font-size:12px; }

/* ---------- Active filter chips ---------- */
.cargo-filter--active{ padding-bottom:22px; }
.cargo-filter__active-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
.cargo-filter__active-head span{
  font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--cargo-charcoal);
}
.cargo-filter__clear{
  font-size:12px; color:var(--cargo-tan); text-decoration:none;
}
.cargo-filter__clear:hover{ color:var(--cargo-tan-dark); text-decoration:underline; }
.cargo-filter__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.cargo-filter__chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:var(--r-pill);
  background:var(--cargo-cream); border:1px solid var(--cargo-line);
  font-size:12px; color:var(--cargo-charcoal); text-decoration:none;
  transition:all .15s;
}
.cargo-filter__chip:hover{ border-color:var(--cargo-tan); color:var(--cargo-tan); }
.cargo-filter__chip span{ font-size:14px; line-height:1; }