/* Satmarin shop archive restyle — Phase 7.3 (cards reworked Phase 7). Consumes sm-tokens.css.
   Style only; WooCommerce markup and all 6j hooks preserved. Scoped to .woocommerce archives.
   The category part-search bar (.sm-catbar) was removed (superseded by the persistent header search). */

/* ---- archive header chrome ---- */
.woocommerce .woocommerce-result-count{font:400 13px/1.6 var(--sm-font-body);color:var(--sm-muted);}
.woocommerce .woocommerce-ordering select,
.woocommerce select.orderby{font:400 13px/1 var(--sm-font-body);color:var(--sm-navy);
  border:1px solid var(--sm-border);border-radius:var(--sm-radius-pill);padding:8px 30px 8px 16px;background-color:var(--sm-white);}
.woocommerce-breadcrumb{font:400 13px/1.6 var(--sm-font-body);color:var(--sm-muted);}
.woocommerce-breadcrumb a{color:var(--sm-graphite);text-decoration:none;}
.woocommerce-breadcrumb a:hover{color:var(--sm-navy);}

/* ---- vertical compaction: bring product results up toward the top on archives ----
   Compact Blocksy's tall page-title hero + container padding ONLY on product archives
   (editorial pages keep their full hero). !important fights the customizer page-title output. */
.woocommerce.archive .hero-section > [class*="ct-container"]{padding-top:0!important;padding-bottom:14px!important;min-height:0!important;} /* type-2 heroes */
.woocommerce.archive .hero-section[data-type="type-1"]{margin-bottom:14px!important;} /* type-1 (in-content) hero gap before filter (was 40px) */
.woocommerce.archive .hero-section .entry-header{padding-top:0!important;} /* H1 flush to container top -> aligns with the sidebar 'Products' heading */
.woocommerce.archive .hero-section .page-title{font-family:var(--sm-font-display)!important;font-size:clamp(24px,2.4vw,32px);line-height:1.15;margin:0;}
.woocommerce.archive .entry-header > *:not(:first-child){margin-top:8px;}
.woocommerce.archive .ct-container[data-vertical-spacing*="top"]{padding-top:20px!important;}
.woocommerce .woo-listing-top:not(:empty){margin-bottom:12px;}

/* ============================================================================
   GRID — deterministic equal-width / equal-height cards (products + category tiles).
   Override WooCommerce's float columns with CSS grid so every card in a row is the
   same height and the gutters are uniform. Single column on phones.
   ============================================================================ */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid!important;grid-template-columns:repeat(4,1fr);gap:20px;margin:0 0 28px!important;padding:0!important;list-style:none;}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none!important;display:none!important;} /* kill float clearfix */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  width:auto!important;float:none!important;margin:0!important;clear:none!important;
  background:var(--sm-white);border:1px solid var(--sm-hairline);border-radius:var(--sm-radius-card);
  overflow:hidden;padding:0!important;display:flex;flex-direction:column;
  transition:border-color var(--sm-transition),transform var(--sm-transition);}
.woocommerce ul.products li.product:hover{border-color:var(--sm-navy);transform:translateY(-2px);}
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last{margin:0!important;}

/* ---- UNIFORM IMAGE AREA (both product cards AND category tiles share figure>a.ct-media-container>img) ----
   Fixed 1:1 box, white background, object-fit:contain with even padding, centered. Neutralises Blocksy's
   per-image inline aspect-ratio (1/1, 25/12, 16/9...) so transparent PNGs, white-bg JPGs, wide graphics
   (e.g. FusionHub) and tall antennas all sit uniformly — no full-bleed images, no uneven whitespace. */
.woocommerce ul.products li.product figure{margin:0!important;padding:0!important;}
.woocommerce ul.products li.product a.ct-media-container{
  display:flex!important;align-items:center;justify-content:center;
  width:100%;aspect-ratio:1/1;background:var(--sm-white);border-bottom:1px solid var(--sm-hairline);overflow:hidden;}
.woocommerce ul.products li.product a.ct-media-container img{
  width:100%!important;height:100%!important;max-width:100%!important;aspect-ratio:auto!important;
  object-fit:contain!important;padding:16px!important;box-sizing:border-box!important;
  background:var(--sm-white)!important;margin:0!important;border-radius:0!important;}

/* ---- titles (cleaner design-system titling, centrally via tokens) ---- */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title{
  font:600 15px/1.3 var(--sm-font-display)!important;color:var(--sm-navy)!important;
  padding:14px 14px 4px!important;margin:0!important;min-height:2.7em;}
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product .woocommerce-loop-category__title a{color:var(--sm-navy);text-decoration:none;transition:color var(--sm-transition);}
.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover,
.woocommerce ul.products li.product .woocommerce-loop-category__title a:hover{color:var(--sm-orange);}

/* category tile count -> muted, on its own line; tile box stays even via the flex column */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title{flex:1 0 auto;padding-bottom:16px!important;}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count{
  display:inline-block;margin-top:2px;color:var(--sm-muted);font:500 13px/1.4 var(--sm-font-body);}

/* per-card brand badge (pwb) — small/subtle, token-aligned; brand-at-a-glance once multi-brand exists.
   Reduced logo height + slight opacity so it never dominates the card. */
/* order:-1 lifts the brand badge ABOVE the product image (all four card parts are flex-children of
   li.product); centered as a header row above the photo. */
/* order:-1 lifts the badge ABOVE the image (centered header row). FLEX row so MULTIPLE brands lay out
   side by side with a gap and wrap cleanly — they never overlap (the old display:block + line-height:0
   collapsed text-only brands like "Eutelsat OneWeb" to zero height, overlapping the next logo). */
.woocommerce ul.products li.product .pwb-brands-in-loop{order:-1;display:flex!important;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;padding:14px 14px 10px;margin:0;line-height:1.2;}
.woocommerce ul.products li.product .pwb-brands-in-loop span{display:inline-flex;align-items:center;}
/* text-only brands (no uploaded logo) render as a small navy label, in line with the image logos */
.woocommerce ul.products li.product .pwb-brands-in-loop a{display:inline-flex;align-items:center;font:600 12px/1.2 var(--sm-font-display);color:var(--sm-navy);text-decoration:none;letter-spacing:.02em;}
/* logos sized by a height cap (gives a wide wordmark ~half the card width at the 4-col breakpoint);
   width auto + max-width keep multiple logos from overflowing — they wrap instead of overlapping. */
.woocommerce ul.products li.product .pwb-brands-in-loop img{width:auto!important;height:auto!important;max-width:100%!important;max-height:40px!important;object-fit:contain;opacity:.75;margin:0!important;transition:opacity var(--sm-transition);}
.woocommerce ul.products li.product:hover .pwb-brands-in-loop img{opacity:1;}

/* ---- price ---- */
.woocommerce ul.products li.product .price{
  display:block;padding:0 14px 10px!important;margin:0!important;color:var(--sm-navy)!important;
  font:600 14px/1.4 var(--sm-font-body)!important;}
.woocommerce ul.products li.product .price .woocommerce-Price-amount{color:var(--sm-navy);}
.woocommerce ul.products li.product .price del{color:var(--sm-muted);font-weight:400;}
.woocommerce ul.products li.product .price ins{text-decoration:none;color:var(--sm-navy);}
/* SINGLE price = the product's OWN assigned currency, NOT the converted viewing currency.
   The Currency-per-Product "original price in shop" feature renders the product's native-currency
   price as the LAST line; the converted viewing-currency price comes first. Show only the native one.
     - USD product (viewing in EUR): amounts = [€ converted][$ native]  -> hide converted, show $ native.
     - EUR (base) product: single amount (€ native, no conversion line)  -> shown (it is :last-of-type).
   So a USD product shows USD on its card even when the site is viewed in EUR, and vice-versa.
   Sale DOM (none today, handled defensively): WooCommerce renders the converted price as del/ins; when a
   native line follows (:has(> br)) hide that converted del/ins so only the native-currency price shows.
   Display-only; stored prices untouched. */
.woocommerce ul.products li.product .price br{display:none!important;}
.woocommerce ul.products li.product .price > .woocommerce-Price-amount:not(:last-of-type){display:none!important;}
.woocommerce ul.products li.product .price:has(> br) > del,
.woocommerce ul.products li.product .price:has(> br) > ins{display:none!important;}

/* ---- actions wrapper (price + button live here): pin to card bottom so the price/button row ALIGNS
   across every card in the grid; neutralise Blocksy's negative-margin bleed (Cause A). margin-top:auto
   fills the leftover space in the equal-height flex card. Earlier this ballooned to ~88px ONLY because
   the brand logo was uncapped (a tall logo stretched one card's row); the logo is now height-capped
   below, so the residual gap is small and the bottoms line up. */
.woocommerce ul.products li.product .ct-woo-card-actions{
  width:auto!important;margin:auto 0 0!important;border:0!important;
  display:flex;flex-direction:column;gap:6px;padding:0 0 14px!important;}
.woocommerce ul.products li.product .ct-woo-card-actions:last-child{margin-bottom:0!important;}
.woocommerce ul.products li.product .ct-woo-card-actions > *{flex:0 0 auto!important;min-height:0!important;}
.woocommerce ul.products li.product .star-rating{display:none!important;}

/* add-to-cart / quote button on cards -> pill, navy->orange, full width, always visible */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.button.product_type_simple,
.woocommerce ul.products li.product a.button.product_type_external,
.woocommerce ul.products li.product a.button.product_type_variable{
  display:block;margin:6px 14px 0!important;text-align:center;background:var(--sm-navy)!important;color:var(--sm-offwhite)!important;
  border:0!important;border-radius:var(--sm-radius-pill)!important;padding:10px 16px!important;box-shadow:none!important;
  font:500 14px/1.2 var(--sm-font-body)!important;text-transform:none!important;letter-spacing:0!important;opacity:1!important;
  transition:background-color var(--sm-transition)!important;}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover{background:var(--sm-orange)!important;color:#fff!important;}
/* "View cart" (post-add link) -> secondary outline pill matching the design system (kills the default green) */
.woocommerce ul.products li.product a.added_to_cart{
  display:block;text-align:center;margin:8px 14px 0!important;padding:9px 16px!important;
  background:var(--sm-white)!important;color:var(--sm-navy)!important;border:1px solid var(--sm-navy)!important;
  border-radius:var(--sm-radius-pill)!important;box-shadow:none!important;text-decoration:none!important;
  font:500 14px/1.2 var(--sm-font-body)!important;text-transform:none!important;letter-spacing:0!important;
  transition:background-color var(--sm-transition),color var(--sm-transition)!important;}
.woocommerce ul.products li.product a.added_to_cart:hover{background:var(--sm-navy)!important;color:var(--sm-offwhite)!important;}

/* ---- pagination ---- */
.woocommerce nav.woocommerce-pagination ul{border:0;}
.woocommerce nav.woocommerce-pagination ul li{border:0;}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--sm-hairline)!important;border-radius:999px;min-width:40px;height:40px;line-height:40px;
  color:var(--sm-graphite);font:500 14px/40px var(--sm-font-body);background:var(--sm-white);margin:0 3px;transition:border-color var(--sm-transition),color var(--sm-transition);}
.woocommerce nav.woocommerce-pagination ul li a:hover{border-color:var(--sm-navy)!important;color:var(--sm-navy);}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--sm-navy)!important;color:var(--sm-offwhite);border-color:var(--sm-navy)!important;}

/* ============================================================================
   PRODUCT FILTER (.sm-filterbar) — custom server-rendered faceted filter (replaces BeRocket).
   A horizontal GET <form> of <select> facets, rendered ON TOP OF THE PRODUCT LIST
   (woocommerce_before_shop_loop), styled to the design system.
   ============================================================================ */
/* left sidebar widget titles + non-sticky/flex rhythm now live in satmarin-catalog.css (loads on BOTH
   archives and single-product pages) so the "Products"/"Brands" titles are consistent across both. */

.sm-filterbar{margin:0 0 14px;}
.sm-filterbar__toggle{display:none;} /* desktop: filters always visible, no toggle */
/* the filter form = a horizontal token bar */
.sm-filter--bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin:0;
  background:var(--sm-white);border:1px solid var(--sm-hairline);border-radius:var(--sm-radius-card);padding:10px 16px;}
.sm-filter--bar .sm-filter__group{flex:1 1 150px;min-width:140px;display:flex;flex-direction:column;gap:5px;}
.sm-filter__label{font:600 11px/1.3 var(--sm-font-display);color:var(--sm-navy);letter-spacing:.04em;text-transform:uppercase;}
.sm-filter__select{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--sm-hairline);
  border-radius:10px;background:var(--sm-white);color:var(--sm-navy);font:400 14px/1.3 var(--sm-font-body);
  box-shadow:none;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23444A59' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;}
.sm-filter__select:focus{outline:none;border-color:var(--sm-aqua);box-shadow:0 0 0 3px rgba(0,174,239,.15);}
/* actions inline at the end of the dropdown row on desktop (count+Apply+Clear as one nowrap unit;
   wraps gracefully to a 2nd line only at mid widths; vertical stack on mobile, see media query) */
.sm-filter--bar .sm-filter__actions{flex:0 0 auto;display:flex;flex-wrap:nowrap;align-items:flex-end;gap:14px;margin-left:auto;}
.sm-filter__count{margin-right:auto;font:500 13px/1.3 var(--sm-font-body);color:var(--sm-graphite);white-space:nowrap;}
.sm-filter__apply{flex:0 0 auto;padding:10px 22px;border:0;border-radius:var(--sm-radius-pill);background:var(--sm-navy);
  color:var(--sm-offwhite);font:600 14px/1 var(--sm-font-body);text-transform:none!important;letter-spacing:0;white-space:nowrap;cursor:pointer;transition:background-color var(--sm-transition);}
.sm-filter__apply:hover{background:#001457;}
.sm-filter__clear{flex:0 0 auto;font:500 13px/1 var(--sm-font-body);color:var(--sm-orange);text-decoration:none;white-space:nowrap;}
.sm-filter__clear:hover{text-decoration:underline;}

/* mobile: collapse the bar behind a "Filters" toggle (driven by sm-shop.js) */
@media (max-width:782px){
  .sm-filterbar__toggle{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;cursor:pointer;
    border:1px solid var(--sm-navy);border-radius:var(--sm-radius-pill);background:var(--sm-white);color:var(--sm-navy);
    font:500 14px/1 var(--sm-font-body);transition:background-color var(--sm-transition),color var(--sm-transition);}
  .sm-filterbar__toggle:hover{background:var(--sm-navy);color:var(--sm-offwhite);}
  .sm-filter--bar{display:none;margin-top:12px;flex-direction:column;align-items:stretch;}
  .sm-filterbar.is-open .sm-filter--bar{display:flex;}
  .sm-filter--bar .sm-filter__group{flex:1 1 auto;}
  .sm-filter--bar .sm-filter__actions{margin-left:0;}
  .sm-filter__apply{flex:1;}
}

/* ---- layout: 3 columns at desktop when the left sidebar (brands) is present ---- */
@media (min-width:1081px){
  .ct-container[data-sidebar="left"] .woocommerce ul.products,
  .ct-container[data-sidebar="left"] .woocommerce-page ul.products{grid-template-columns:repeat(3,1fr)!important;}
}

/* ---- responsive columns (equal-height preserved at every breakpoint; single column on phone) ---- */
@media (max-width:1080px){
  .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:820px){
  .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,1fr);gap:16px;}
}
@media (max-width:560px){
  .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:1fr;}
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product .woocommerce-loop-category__title{min-height:0;font-size:16px!important;}
  .woocommerce ul.products li.product a.ct-media-container{aspect-ratio:4/3;}
}

/* brand-hub / archive intro (2026-07-12 copy rewrite) */
.sm-archive-intro{max-width:820px;margin:0 0 32px;font:400 15px/1.6 var(--sm-font-body);color:var(--sm-graphite);}
.sm-archive-intro p{margin:0 0 12px;}
.sm-archive-intro strong{color:var(--sm-navy);}
.sm-archive-intro ul{margin:0 0 14px;padding-left:20px;}
.sm-archive-intro li{margin:0 0 8px;}
.sm-archive-intro a{color:var(--sm-navy);text-decoration:underline;}
.sm-archive-intro a:hover{color:var(--sm-orange);}