/* RC.59 — Opt-in Shoptimizer product card appearance. No change if common component is off.
   Preserve actual WooCommerce content-product markup; replace visual chrome only. */

/* The native hover pseudo-element adds a large white shadow OUTSIDE the card.
   Remove it, including focus-within, exclusively under the opt-in scope. */
:is(body.sw-display-archive-cards .site-main, body.sw-display-related-cards .related.products) ul.products > li.product:not(.product-category)::before,
body .sw-display-card-custom ul.products > li.product:not(.product-category)::before {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
}

/* A real transparent border reserves its width, so hover never shifts the card layout. */
:is(body.sw-display-archive-cards .site-main, body.sw-display-related-cards .related.products) ul.products > li.product:not(.product-category),
body .sw-display-card-custom ul.products > li.product:not(.product-category) {
  box-sizing: border-box !important;
  position: relative;
  min-width: 0;
  padding: var(--sw-card-pad-d,8px) !important;
  border: var(--sw-card-border,1px) solid transparent !important;
  border-radius: var(--sw-card-radius,5px) !important;
  box-shadow: none !important;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
:is(body.sw-display-archive-cards.sw-display-card-border-always .site-main, body.sw-display-related-cards.sw-display-card-border-always .related.products) ul.products > li.product:not(.product-category),
body .sw-display-card-custom.sw-display-card-border-always ul.products > li.product:not(.product-category) {
  border-color: var(--sw-card-color,#e5e7eb) !important;
}
/* Keyboard-only focus ring. :focus-within also matches mouse/touch clicks and
   caused an unwanted persistent outline after opening a product link. Use the
   focused descendant's :focus-visible state instead; preserve a real keyboard
   focus indicator without turning pointer/touch focus into a card border.
   If :has() is unavailable, Shoptimizer's native :focus-visible link ring remains. */
@supports selector(li:has(:focus-visible)) {
:is(  body.sw-display-archive-cards .site-main,   body.sw-display-related-cards .related.products) ul.products > li.product:not(.product-category):has(:focus-visible),
  body .sw-display-card-custom ul.products > li.product:not(.product-category):has(:focus-visible) {
    outline: 2px solid var(--sw-card-hover-color,#b8c8cb);
    outline-offset: 1px;
  }
}

/* "none" must remove even transparent border geometry, not merely its color. */
:is(body.sw-display-archive-cards.sw-display-card-border-none .site-main, body.sw-display-related-cards.sw-display-card-border-none .related.products) ul.products > li.product:not(.product-category),
body .sw-display-card-custom.sw-display-card-border-none ul.products > li.product:not(.product-category) {border-width:0 !important;}
:is(body.sw-display-archive-cards.sw-display-card-image-border-none .site-main, body.sw-display-related-cards.sw-display-card-image-border-none .related.products) ul.products > li.product:not(.product-category)  .woocommerce-image__wrapper,
body .sw-display-card-custom.sw-display-card-image-border-none ul.products > li.product:not(.product-category)  .woocommerce-image__wrapper {border-width:0 !important;}

/* Image border is independent from outer-card border. Image wrapper is the actual Shoptimizer node. */
:is(body.sw-display-archive-cards .site-main, body.sw-display-related-cards .related.products) ul.products > li.product:not(.product-category)  .woocommerce-image__wrapper,
body .sw-display-card-custom ul.products > li.product:not(.product-category)  .woocommerce-image__wrapper {
  box-sizing: border-box !important;
  border: var(--sw-card-image-border,1px) solid transparent !important;
  border-radius: var(--sw-card-image-radius,5px) !important;
  transform: none !important;
  transition: border-color .2s ease !important;
}
:is(body.sw-display-archive-cards.sw-display-card-image-border-always .site-main, body.sw-display-related-cards.sw-display-card-image-border-always .related.products) ul.products > li.product:not(.product-category)  .woocommerce-image__wrapper,
body .sw-display-card-custom.sw-display-card-image-border-always ul.products > li.product:not(.product-category)  .woocommerce-image__wrapper {
  border-color: var(--sw-card-image-color,#d9e2e6) !important;
}
/* Clip only the actual image link: preserve badges and overlay buttons outside the image box. */
:is(body.sw-display-archive-cards .site-main, body.sw-display-related-cards .related.products) ul.products > li.product  .woocommerce-image__wrapper > a.woocommerce-loop-product__link,
body .sw-display-card-custom ul.products > li.product  .woocommerce-image__wrapper > a.woocommerce-loop-product__link {
  display: block;
  overflow: hidden;
  border-radius: max(0px, calc(var(--sw-card-image-radius,5px) - var(--sw-card-image-border,1px)));
}
:is(body.sw-display-archive-cards.sw-display-card-image-border-none .site-main, body.sw-display-related-cards.sw-display-card-image-border-none .related.products) ul.products > li.product  .woocommerce-image__wrapper > a.woocommerce-loop-product__link,
body .sw-display-card-custom.sw-display-card-image-border-none ul.products > li.product  .woocommerce-image__wrapper > a.woocommerce-loop-product__link {
  border-radius:var(--sw-card-image-radius,5px) !important;
}
/* Theme by default shrinks the wrapper and product images on hover; completely replace that motion. */
:is(body.sw-display-archive-cards .site-main, body.sw-display-related-cards .related.products) ul.products > li.product:hover  .woocommerce-image__wrapper,
body .sw-display-card-custom ul.products > li.product:hover  .woocommerce-image__wrapper {
  transform: none !important;
}
:is(body.sw-display-archive-cards .site-main, body.sw-display-related-cards .related.products) ul.products > li.product:not(.product-category)  .woocommerce-image__wrapper img,
body .sw-display-card-custom ul.products > li.product:not(.product-category)  .woocommerce-image__wrapper img {
  border-radius: 0 !important;
  transform: none !important;
  transition: transform .2s ease, opacity .2s ease !important;
}
@media (hover:hover) and (pointer:fine) {
:is(  body.sw-display-archive-cards:not(.sw-display-card-border-none) .site-main,   body.sw-display-related-cards:not(.sw-display-card-border-none) .related.products) ul.products > li.product:not(.product-category):hover,
  body .sw-display-card-custom:not(.sw-display-card-border-none) ul.products > li.product:not(.product-category):hover {
    border-color: var(--sw-card-hover-color,#b8c8cb) !important;
  }
:is(  body.sw-display-archive-cards:not(.sw-display-card-image-border-none) .site-main,   body.sw-display-related-cards:not(.sw-display-card-image-border-none) .related.products) ul.products > li.product:not(.product-category):hover  .woocommerce-image__wrapper,
  body .sw-display-card-custom:not(.sw-display-card-image-border-none) ul.products > li.product:not(.product-category):hover  .woocommerce-image__wrapper {
    border-color: var(--sw-card-image-hover-color,#92b7c2) !important;
  }
:is(  body.sw-display-archive-cards .site-main,   body.sw-display-related-cards .related.products) ul.products > li.product:hover  .woocommerce-image__wrapper img,
  body .sw-display-card-custom ul.products > li.product:hover  .woocommerce-image__wrapper img {
    transform: scale(var(--sw-card-hover-scale,1)) !important;
  }
:is(  body.sw-display-archive-cards.sw-display-card-shadow-subtle .site-main,   body.sw-display-related-cards.sw-display-card-shadow-subtle .related.products) ul.products > li.product:not(.product-category):hover,
  body .sw-display-card-custom.sw-display-card-shadow-subtle ul.products > li.product:not(.product-category):hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
  }
:is(  body.sw-display-archive-cards.sw-display-card-shadow-medium .site-main,   body.sw-display-related-cards.sw-display-card-shadow-medium .related.products) ul.products > li.product:not(.product-category):hover,
  body .sw-display-card-custom.sw-display-card-shadow-medium ul.products > li.product:not(.product-category):hover {
    box-shadow: 0 6px 18px rgba(0,0,0,.15) !important;
  }
}
@media (hover:none) {
:is(  body.sw-display-archive-cards.sw-display-card-border-hover .site-main,   body.sw-display-related-cards.sw-display-card-border-hover .related.products) ul.products > li.product:not(.product-category),
  body .sw-display-card-custom.sw-display-card-border-hover ul.products > li.product:not(.product-category) {border-color:var(--sw-card-color,#e5e7eb) !important;}
:is(  body.sw-display-archive-cards.sw-display-card-image-border-hover .site-main,   body.sw-display-related-cards.sw-display-card-image-border-hover .related.products) ul.products > li.product:not(.product-category)  .woocommerce-image__wrapper,
  body .sw-display-card-custom.sw-display-card-image-border-hover ul.products > li.product:not(.product-category)  .woocommerce-image__wrapper {border-color:var(--sw-card-image-color,#d9e2e6) !important;}
}
/* Archive layout follows Shoptimizer/WooCommerce columns-N, NEVER a Store Weave column default.
   The shop grid normally has BOTH a div.columns-N wrapper and ul.products.columns-N.
   Keep the native count, while using CSS Grid strictly to implement configurable outer-card gaps.
   If a third-party loop has no Woo columns marker, let its original layout win. */
@media (min-width: 993px) {
  body.sw-display-archive-cards .site-main > .columns-1,
  body.sw-display-archive-cards .site-main > ul.products.columns-1,
  body.sw-display-archive-cards .site-main > div > ul.products.columns-1 { --sw-archive-card-cols: 1; }
  body.sw-display-archive-cards .site-main > .columns-2,
  body.sw-display-archive-cards .site-main > ul.products.columns-2,
  body.sw-display-archive-cards .site-main > div > ul.products.columns-2 { --sw-archive-card-cols: 2; }
  body.sw-display-archive-cards .site-main > .columns-3,
  body.sw-display-archive-cards .site-main > ul.products.columns-3,
  body.sw-display-archive-cards .site-main > div > ul.products.columns-3 { --sw-archive-card-cols: 3; }
  body.sw-display-archive-cards .site-main > .columns-4,
  body.sw-display-archive-cards .site-main > ul.products.columns-4,
  body.sw-display-archive-cards .site-main > div > ul.products.columns-4 { --sw-archive-card-cols: 4; }
  body.sw-display-archive-cards .site-main > .columns-5,
  body.sw-display-archive-cards .site-main > ul.products.columns-5,
  body.sw-display-archive-cards .site-main > div > ul.products.columns-5 { --sw-archive-card-cols: 5; }
  body.sw-display-archive-cards .site-main > .columns-6,
  body.sw-display-archive-cards .site-main > ul.products.columns-6,
  body.sw-display-archive-cards .site-main > div > ul.products.columns-6 { --sw-archive-card-cols: 6; }

  body.sw-display-archive-cards .site-main > :is(.columns-1,.columns-2,.columns-3,.columns-4,.columns-5,.columns-6) > ul.products,
  body.sw-display-archive-cards .site-main > ul.products:is(.columns-1,.columns-2,.columns-3,.columns-4,.columns-5,.columns-6),
  body.sw-display-archive-cards .site-main > div > ul.products:is(.columns-1,.columns-2,.columns-3,.columns-4,.columns-5,.columns-6) {
    display: grid !important;
    grid-template-columns: repeat(var(--sw-archive-card-cols),minmax(0,1fr)) !important;
    column-gap: var(--sw-card-gap-d,30px) !important;
    row-gap: var(--sw-card-gap-d,30px) !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding: 0 !important;
  }
  body.sw-display-archive-cards .site-main > :is(.columns-1,.columns-2,.columns-3,.columns-4,.columns-5,.columns-6) > ul.products > li.product,
  body.sw-display-archive-cards .site-main > ul.products:is(.columns-1,.columns-2,.columns-3,.columns-4,.columns-5,.columns-6) > li.product,
  body.sw-display-archive-cards .site-main > div > ul.products:is(.columns-1,.columns-2,.columns-3,.columns-4,.columns-5,.columns-6) > li.product {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    align-self: stretch !important;
  }
}
/* Below Shoptimizer's 993px breakpoint, the theme controls 1/2-column and
   m-grid-1 mobile choices. Change spacing only, never grid-template-columns. */
@media (max-width: 992px) {
  body.sw-display-archive-cards .site-main > :is(.columns-1,.columns-2,.columns-3,.columns-4,.columns-5,.columns-6) > ul.products,
  body.sw-display-archive-cards .site-main > ul.products:is(.columns-1,.columns-2,.columns-3,.columns-4,.columns-5,.columns-6),
  body.sw-display-archive-cards .site-main > div > ul.products:is(.columns-1,.columns-2,.columns-3,.columns-4,.columns-5,.columns-6) {
    column-gap: var(--sw-card-gap-m,20px) !important;
    row-gap: var(--sw-card-gap-m,20px) !important;
  }
}
/* Block grid/slider: use the same gap for both visible spacing and slider basis calculations. */
body .sw-display-slider--products.sw-display-card-custom { --sw-display-gap:var(--sw-card-gap-d,30px) !important; }
body .sw-display-product-grid.sw-display-card-custom { --sw-display-gap:var(--sw-card-gap-d,30px) !important; }
/* Reassert own padding after Shoptimizer and Store Weave's zero-padding carousel layout. */
body .sw-display-slider--products.sw-display-card-custom ul.products.sw-display-slider__track > li.product {padding:var(--sw-card-pad-d,8px) !important;}
@media (max-width: 992px) {
  body .sw-display-slider--products.sw-display-card-custom,
  body .sw-display-product-grid.sw-display-card-custom {--sw-display-gap:var(--sw-card-gap-m,20px) !important;}
}
@media (max-width: 767px) {
  body.sw-display-archive-cards .site-main ul.products > li.product:not(.product-category),
  body .sw-display-card-custom ul.products > li.product:not(.product-category),
  body .sw-display-slider--products.sw-display-card-custom ul.products.sw-display-slider__track > li.product {
    padding:var(--sw-card-pad-m,6px) !important;
  }
}
@media (prefers-reduced-motion:reduce) {
  body.sw-display-archive-cards .site-main ul.products > li.product,
  body .sw-display-card-custom ul.products > li.product,
  body.sw-display-archive-cards .site-main ul.products > li.product img,
  body .sw-display-card-custom ul.products > li.product img {transition:none !important;}
}

/* RC.72: WooCommerce related products are rendered outside the Shop loop.
   Reuse all shared card appearance properties above, but do not override unrelated
   recommendations, Woo product data, or CommerceKit controls. */
body.sw-display-related-cards .related.products {min-width:0;max-width:1170px;}
body.sw-display-related-cards .related.products ul.products {
  --sw-related-cols:4;
  min-width:0;
}
body.sw-display-related-cards.sw-display-related-layout-grid .related.products ul.products.columns-1 {--sw-related-cols:1;}
body.sw-display-related-cards.sw-display-related-layout-grid .related.products ul.products.columns-2 {--sw-related-cols:2;}
body.sw-display-related-cards.sw-display-related-layout-grid .related.products ul.products.columns-3 {--sw-related-cols:3;}
body.sw-display-related-cards.sw-display-related-layout-grid .related.products ul.products.columns-4 {--sw-related-cols:4;}
body.sw-display-related-cards.sw-display-related-layout-grid .related.products ul.products.columns-5 {--sw-related-cols:5;}
body.sw-display-related-cards.sw-display-related-layout-grid .related.products ul.products.columns-6 {--sw-related-cols:6;}
body.sw-display-related-cards.sw-display-related-layout-grid .related.products ul.products {
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:repeat(var(--sw-related-cols),minmax(0,1fr))!important;
  gap:var(--sw-card-gap-d,30px)!important;
  overflow:visible!important;
  scroll-snap-type:none!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  list-style:none;
}
body.sw-display-related-cards.sw-display-related-layout-grid .related.products ul.products > li.product {
  box-sizing:border-box!important;
  float:none!important;
  display:block!important;
  clear:none!important;
  flex:none!important;
  min-width:0!important;
  max-width:none!important;
  width:auto!important;
  margin:0!important;
  align-self:stretch;
  scroll-snap-align:none!important;
}
body.sw-display-related-cards .related.products ul.products > li.product img {max-width:100%;height:auto;}
body.sw-display-related-cards .related.products ul.products > li.product .woocommerce-card__header {
  box-shadow:none!important;
  padding:0!important;
}
@media (max-width: 992px) {
  /* Match desktop columns-N selector specificity or it wins even inside mobile media. */
  body.sw-display-related-cards.sw-display-related-layout-grid .related.products ul.products,
  body.sw-display-related-cards.sw-display-related-layout-grid .related.products ul.products:is(.columns-1,.columns-2,.columns-3,.columns-4,.columns-5,.columns-6) {
    --sw-related-cols:2;
    gap:var(--sw-card-gap-m,20px)!important;
  }
}
@media (max-width: 767px) {
  body.sw-display-related-cards .related.products ul.products > li.product {padding:var(--sw-card-pad-m,6px)!important;}
  body.m-grid-1.sw-display-related-cards.sw-display-related-layout-grid .related.products ul.products {--sw-related-cols:1;}
}
/* Theme-carousel choice keeps native touch scrolling and item geometry; card
   appearance still applies, including padding/border/shadow, when enabled. */

@media (max-width: 992px) {
  /* Native theme carousel choice retains the theme's 320px scroll cards.
     General card chrome must not collapse the native slide basis. */
  body.sw-display-related-cards.sw-display-related-layout-theme .related.products ul.products > li.product {
    min-width:320px!important;
    width:320px!important;
    max-width:320px!important;
    flex:0 0 320px!important;
  }
}