/* Momo Jord — editorial shop archive (Butik) + WooCommerce product loop.
   Unscoped (targets WC markup, not .mj-scope). Preserves WC badges/sort/pagination. */

/* Page title + ordering */
.woocommerce-products-header__title,
.woocommerce .woocommerce-products-header__title{
  font-family:var(--ff-display); font-weight:var(--display-weight);
  font-size:clamp(36px,4.6vw,64px); letter-spacing:-.02em; line-height:1;
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select{ font-family:var(--ff-sans); }

/* Grid: replace Shoptimizer float layout with an editorial grid */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid !important; gap:16px; margin:0 0 40px !important; padding:0 !important;
  grid-template-columns:repeat(4,1fr);
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{ content:none !important; display:none !important; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  width:auto !important; margin:0 !important; float:none !important; padding:0 0 4px !important;
  background:var(--card); border:1px solid var(--hairline); border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column; position:relative;
  transition:transform .2s ease, border-color .2s ease;
}
.woocommerce ul.products li.product:hover{ transform:translateY(-3px); border-color:var(--hairline-strong); }

/* Image */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product > a:first-of-type{ display:block; }
.woocommerce ul.products li.product img{
  width:100%; aspect-ratio:1/1; object-fit:cover; margin:0 !important; border-radius:0;
  transition:transform .5s ease;
}
.woocommerce ul.products li.product:hover img{ transform:scale(1.04); }

/* Title + price */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3{
  font-family:var(--ff-display); font-weight:var(--display-weight);
  font-size:20px; letter-spacing:-.005em; line-height:1.2;
  padding:14px 16px 2px !important; margin:0 !important;
  /* Clamp long product names to 2 lines so cards keep an even height and a
     "/" in names like "Dyneema/Amsteel" can't break to an orphan line. */
  display:-webkit-box !important; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden !important; overflow-wrap:break-word; min-height:calc(2 * 1.2em + 16px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product h2 a,
.woocommerce ul.products li.product h3 a{ display:inline; }
.woocommerce ul.products li.product .price{
  font-family:var(--ff-display); font-weight:var(--display-weight);
  font-size:17px; color:var(--ink); padding:0 16px !important; margin:2px 0 0 !important;
}
.woocommerce ul.products li.product .price del{ color:var(--ink-mute); font-size:12px; font-weight:400; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }

/* Card body as a flex column so the CTA bottom-aligns across the row */
.woocommerce ul.products li.product .woocommerce-card__header{ display:flex; flex-direction:column; flex:1 1 auto; align-items:stretch; }
.woocommerce ul.products li.product .woocommerce-card__header .button{ margin-top:auto !important; }
/* Star rating (between title + price) */
.woocommerce ul.products li.product .star-rating{ font-size:13px; margin:4px 16px 0 !important; color:#d29a2a; }
.woocommerce ul.products li.product .woocommerce-card__header > div:has(.star-rating){ padding:0; }

/* Add to cart / select-options button — full width, bottom-aligned for tidy rows + clear CTA */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  display:block; position:static !important; margin:auto 16px 16px !important;
  width:auto !important; box-sizing:border-box;
  padding:11px 16px; border-radius:999px;
  background:var(--brand); color:#fff !important; border:0;
  font-family:var(--ff-sans); font-weight:500; font-size:13px; text-align:center;
}
.woocommerce ul.products li.product .button:hover{ background:var(--brand-deep); }
/* OOS "Meddela mig" button — quiet ink outline (not a loud grey block) */
.woocommerce ul.products li.product.outofstock .button{ background:transparent; color:var(--ink) !important; border:1px solid var(--hairline-strong); }
.woocommerce ul.products li.product.outofstock .button:hover{ background:var(--ink); color:#fff !important; border-color:var(--ink); }

/* ---- Stock indicators: ONE clean editorial badge per card ---- */
/* hide the redundant centred English "Out of stock" overlay + the top "I lager" badge,
   and don't desaturate OOS product photos (the badge already signals it) */
.woocommerce ul.products li.product .product-out-of-stock,
.woocommerce ul.products li.product .momo-instock-badge{ display:none !important; }
.woocommerce ul.products li.product.outofstock img{ filter:none !important; opacity:1 !important; }
.woocommerce ul.products li.product .shoptimizer-plp-carousel--pagination{ display:none !important; }
/* uniform square image frame even with Shoptimizer's hover carousel */
.woocommerce ul.products li.product .woocommerce-image__wrapper,
.woocommerce ul.products li.product .shoptimizer-plp-carousel-container,
.woocommerce ul.products li.product .shoptimizer-plp-image-wrapper{ aspect-ratio:1/1; height:auto; }
/* CGKit promo badges (Vår favorit / Egen Design) → editorial pills, top-left, stacked */
.woocommerce ul.products li.product .ckit-badge_wrapper{ position:absolute; top:12px; left:12px; right:auto; z-index:3; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.woocommerce ul.products li.product .ckit-badge{ margin:0 !important; background:var(--brand); color:#fff; padding:4px 11px; border-radius:999px; font-family:var(--ff-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; line-height:1.5; font-weight:600; }
.woocommerce ul.products li.product .ckit-badge-2{ background:var(--gold); color:var(--ink); }
/* on OOS cards the "Slut i lager" pill owns the top-left — drop promo badges to avoid overlap */
.woocommerce ul.products li.product.outofstock .ckit-badge_wrapper{ display:none !important; }
/* OOS badge "Slut i lager" → editorial ink pill, top-left */
.woocommerce ul.products li.product .mj-oos-badge{ top:12px !important; left:12px !important; right:auto !important; background:var(--ink) !important; color:var(--paper) !important; padding:4px 11px !important; border-radius:999px !important; font-family:var(--ff-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }

@media (max-width:980px){ .woocommerce ul.products{ grid-template-columns:1fr 1fr !important; } }
@media (max-width:560px){ .woocommerce ul.products{ grid-template-columns:1fr 1fr !important; gap:10px; } }

/* Editorial shop header (replaces the broken Kadence cover banner).
   Shoptimizer's .woocommerce-products-header is display:flex (title | description);
   neutralise it, hide the default title, and let our header span the column. */
body.woocommerce-shop .woocommerce-products-header,
body.post-type-archive-product .woocommerce-products-header{ display:block !important; padding:0 !important; background:transparent !important; }
body.woocommerce-shop .woocommerce-products-header__title,
body.post-type-archive-product .woocommerce-products-header__title{ display:none !important; }
.mj-scope.mj-shop-head{ padding:6px 0 26px; border-bottom:1px solid var(--hairline); margin:0 0 30px; background:transparent !important; width:100%; }
.mj-scope.mj-shop-head .wrap{ max-width:none; padding:0; }
.mj-scope.mj-shop-head .eyebrow{ display:block; font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:14px; }
.mj-scope.mj-shop-head h1{ font-family:var(--ff-display); font-weight:var(--display-weight); font-size:clamp(40px,5.5vw,82px); line-height:.98; letter-spacing:-.025em; margin:0; color:var(--ink); }
.mj-scope.mj-shop-head h1 em{ font-style:italic; color:var(--brand); }
.mj-scope.mj-shop-head .sub{ margin:16px 0 0; max-width:62ch; font-size:17px; line-height:1.55; color:var(--ink-soft); }
@media (max-width:600px){ .mj-scope.mj-shop-head{ padding:4px 0 20px; margin-bottom:22px; } }

/* Default (non-showcase) PDP: stacked tab panels — keep reviews flush, not indented */
.single-product .woocommerce-tabs .wc-tab{ max-width:760px; }
.single-product .woocommerce-tabs #reviews,
.single-product .woocommerce-tabs #reviews .woocommerce-Reviews,
.single-product .woocommerce-tabs #reviews ol.commentlist{ margin-left:0 !important; padding-left:0 !important; list-style:none; }
.single-product .woocommerce-tabs #reviews ol.commentlist li{ padding-left:0; }

/* PDP gallery (CommerceKit swiper): force a uniform ratio on every slide so a
   portrait or not-yet-loaded slide can't balloon the wrapper and letterbox the
   landscape images (left a ~190px empty gap below the image on mobile). */
.mj-pdp .woocommerce-product-gallery__image{ aspect-ratio:4/3; overflow:hidden; }
.mj-pdp .woocommerce-product-gallery__image img{ width:100%; height:100%; object-fit:cover; }

/* Featured hero ("utvald topp") above the shop grid (2026-06-03) */
.mj-shop-feature{ margin:8px 0 36px; }
.mj-shop-feature .mj-feat{ display:grid; grid-template-columns:1.2fr 1fr; min-height:320px; border-radius:14px; overflow:hidden; background:var(--card); border:1px solid var(--hairline); text-decoration:none; color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease; }
.mj-shop-feature .mj-feat:hover{ border-color:var(--hairline-strong); box-shadow:0 14px 36px rgba(0,0,0,.07); }
.mj-shop-feature .mj-feat-media{ background-size:cover; background-position:center; min-height:240px; }
.mj-shop-feature .mj-feat-body{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:12px; padding:44px; }
.mj-shop-feature .mj-feat-eyebrow{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }
.mj-shop-feature .mj-feat-title{ font-family:var(--ff-display); font-weight:var(--display-weight); font-size:clamp(28px,3.4vw,42px); line-height:1.04; letter-spacing:-.02em; }
.mj-shop-feature .mj-feat-sub{ color:var(--ink-soft); font-size:15px; line-height:1.55; max-width:42ch; }
.mj-shop-feature .mj-feat-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:6px; background:var(--brand); color:#fff; border-radius:999px; padding:13px 24px; font-family:var(--ff-sans); font-weight:600; font-size:15px; }
.mj-shop-feature .mj-feat:hover .mj-feat-cta{ background:var(--brand-deep); }
@media (max-width:820px){
  .mj-shop-feature{ margin:4px 0 24px; }
  .mj-shop-feature .mj-feat{ grid-template-columns:1fr; min-height:0; }
  .mj-shop-feature .mj-feat-media{ aspect-ratio:16/10; min-height:0; }
  .mj-shop-feature .mj-feat-body{ padding:24px 20px 28px; }
}