/**
 * One native Woo card/grid for home, shop, categories, product search,
 * related, upsells and cross-sells. No page-specific card paint or JS.
 * Button states/paint remain in the shared components.css adapter.
 */
body:not(.codela-my-account-layout) .sf-content ul.products{
  --sf-catalog-columns:4;
  display:grid;grid-template-columns:repeat(var(--sf-catalog-columns),minmax(0,1fr));
  column-gap:clamp(10px,1.65vw,22px);row-gap:clamp(18px,2.8vw,30px);list-style:none;padding:0;margin:0 0 32px;
  clear:both;
}
body:not(.codela-my-account-layout) .sf-content ul.products::before,body:not(.codela-my-account-layout) .sf-content ul.products::after{display:none}
body:not(.codela-my-account-layout) .sf-content ul.products > li.product{
  position:relative;display:flex;flex-direction:column;float:none;
  width:auto!important;min-width:0;margin:0!important;padding:0;
  box-sizing:border-box;isolation:isolate;
  /* One light shell. Never stack image and information backgrounds. */
  background:var(--sf-ui-surface);
  border:0;
  border-radius:20px;box-shadow:0 5px 20px rgba(0,0,0,.035);text-align:start;overflow:hidden;
}
body:not(.codela-my-account-layout) .sf-content ul.products > li.product > a.woocommerce-loop-product__link{
  display:block;flex:0 0 auto;min-width:0;color:var(--sf-ui-ink);text-decoration:none;
  /* The native product link already owns image/title. Its transparent hit area
     extends across card whitespace and the price; not across Woo actions. */
  position:static;
}
body:not(.codela-my-account-layout) .sf-content ul.products > li.product > a.woocommerce-loop-product__link::after{
  content:"";position:absolute;inset:0;z-index:1;cursor:pointer;
}
body:not(.codela-my-account-layout) .sf-content ul.products > li.product .sf-product-card-footer :is(a,button,input,select,textarea){
  /* Native add-to-cart/Options/View Cart and extension actions remain ABOVE
     the stretched product link. No nested links, JS click proxies or redirects. */
  position:relative;z-index:2;
}
body:not(.codela-my-account-layout) .sf-content ul.products > li.product > a.woocommerce-loop-product__link > img{
  display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;
  margin:0;background:transparent;border-radius:19px 19px 0 0;
}
body:not(.codela-my-account-layout) .sf-content ul.products > li.product .woocommerce-loop-product__title{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  margin:14px 14px 0;padding:0;min-height:2.8em;
  font-family:var(--wp--preset--font-family--system,Arial,Helvetica,sans-serif);font-size:14px;font-weight:500;line-height:1.45;
  letter-spacing:-.01em;color:var(--sf-ui-control-ink);opacity:1;overflow-wrap:anywhere;
}
body:not(.codela-my-account-layout) .sf-content ul.products > li.product .price{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;
  min-width:0;flex:1 1 55px;margin:0;color:var(--sf-ui-control-ink);font-size:17px;font-weight:500;overflow-wrap:anywhere;
  line-height:1.5;font-variant-numeric:tabular-nums;
}
body:not(.codela-my-account-layout) .sf-content ul.products > li.product .price del{color:var(--sf-muted);opacity:1;font-weight:400}
body:not(.codela-my-account-layout) .sf-content ul.products > li.product .price ins{background:none;text-decoration:none;color:inherit}
body:not(.codela-my-account-layout) .sf-content ul.products > li.product .star-rating{margin:0 0 8px;font-size:12px}
body:not(.codela-my-account-layout) .sf-content ul.products > li.product .sf-product-stock,
body:not(.codela-my-account-layout) .sf-content ul.products > li.product .onsale{
  position:absolute;inset:10px auto auto 10px;z-index:1;min-width:0;min-height:0;
  margin:0;padding:5px 10px;border-radius:var(--sf-ui-pill);
  background:var(--sf-ui-surface);border:1px solid color-mix(in srgb,var(--sf-ui-border) 40%,white);color:var(--sf-ui-ink);
  font-size:11px;font-weight:600;line-height:1.5;
}
body:not(.codela-my-account-layout) .sf-content ul.products > li.product .sf-product-card-footer{
  display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:6px;
  min-height:var(--sf-ui-hit);margin:12px 14px 0;padding:10px 0 13px;
  border-top:1px solid var(--sf-ui-surface-muted);
}
body:not(.codela-my-account-layout) .sf-content ul.products > li.product .sf-product-card-footer > .button:not(.sf-ui-icon-button){
  flex:0 0 auto;max-width:100%;min-width:var(--sf-ui-hit);margin:0;
  white-space:normal;overflow-wrap:anywhere;text-align:center;
  /* Shared Button owns paint/pressed/focus; card only specifies geometry. */
  --sf-ui-control-radius:var(--sf-ui-pill);
  --sf-ui-button-height:var(--sf-ui-hit);--sf-ui-button-font-size:12px;
  --sf-ui-button-padding-y:8px;--sf-ui-button-padding-x:12px;
}
body:not(.codela-my-account-layout) .sf-content ul.products > li.product .added_to_cart{
  grid-column:1 / -1;display:flex;align-items:center;justify-content:flex-end;
  min-height:var(--sf-ui-hit);color:var(--sf-ui-control-ink);
  font-size:12px;text-decoration:underline;text-underline-offset:3px;
}
body:not(.codela-my-account-layout) .sf-content ul.products > li.product > a:focus-visible{
  outline:2px solid var(--sf-ui-accent);outline-offset:4px;
}
body:not(.codela-my-account-layout) .sf-content ul.products > li.product:has(> a.woocommerce-loop-product__link:focus-visible){
  outline:2px solid var(--sf-ui-accent);outline-offset:3px;
}

body:not(.codela-my-account-layout) .sf-content ul.products > li.product .sf-product-stock{pointer-events:none}
body:not(.codela-my-account-layout) .sf-content ul.products > li.product:has(.sf-product-stock) .onsale{left:auto;right:10px}
.sf-catalog{max-width:1200px!important;margin-inline:auto}
/* Reuse the single modal/form on desktop while leaving the catalog visible.
   Mobile keeps the existing full-screen filter composition. */
@media(min-width:901px){
  #sf-panel.is-filters-panel{left:auto;right:0;width:min(480px,45vw);border-left:1px solid var(--sf-ui-border)}
  #sf-panel.is-filters-panel .sf-catalog-filters{padding-bottom:24px}
}
.sf-catalog > h1{font-size:clamp(25px,4vw,36px);line-height:1.2;font-weight:400;overflow-wrap:anywhere}
@media(max-width:1024px){
  body:not(.codela-my-account-layout) .sf-content ul.products{--sf-catalog-columns:3}
}
@media(max-width:700px){
  body:not(.codela-my-account-layout) .sf-content ul.products{--sf-catalog-columns:2}
  body:not(.codela-my-account-layout) .sf-content ul.products > li.product .woocommerce-loop-product__title{font-size:13px;margin:13px 12px 0}
  body:not(.codela-my-account-layout) .sf-content ul.products > li.product .price{font-size:16px}
  body:not(.codela-my-account-layout) .sf-content ul.products > li.product .sf-product-card-footer{
    display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:6px;margin:13px 12px 0;padding:10px 0 12px;
  }
  body:not(.codela-my-account-layout) .sf-content ul.products > li.product .sf-product-card-footer > .button{
    box-sizing:border-box;width:44px;max-width:44px;min-width:44px;
    font-size:0;overflow:hidden;
    --sf-ui-button-font-size:0px;--sf-ui-button-padding-x:0px;
  }
}


/* The reference is wide, not a 760px WordPress constrained-column layout.
   Keep catalog surfaces broad without affecting checkout, product details or
   the Codela plugin-owned signed-in account. */
body:not(.codela-my-account-layout) .sf-content > :is(.sf-selection,.sf-catalog,.wp-block-woocommerce-legacy-template){
  width:100%;max-width:1360px!important;margin-inline:auto!important;
}
body:not(.codela-my-account-layout) .sf-content > .sf-selection{
  padding:34px clamp(12px,2.2vw,30px);
}
body:not(.codela-my-account-layout):not(.single-product):not(.woocommerce-checkout) .sf-content > .woocommerce{
  width:100%;max-width:1360px!important;margin-inline:auto!important;
}
@media(max-width:700px){
  body:not(.codela-my-account-layout) .sf-content > .sf-selection{padding:28px 12px}
  body:not(.codela-my-account-layout):not(.single-product):not(.woocommerce-checkout) .sf-content:has(> .sf-catalog,> .wp-block-woocommerce-legacy-template){
    padding-inline:12px;
  }
}

/* Grouped/external buttons must preserve their native visible wording rather
   than silently clipping it into the circular simple/variable icon slot. */
body:not(.codela-my-account-layout) .sf-content ul.products > li.product .sf-product-card-footer > .button:not(.product_type_simple):not(.product_type_variable){
  grid-column:1 / -1;justify-self:stretch;
}

/* One compact archive heading for shop and all product taxonomies. */
body:is(.post-type-archive-product,.tax-product_cat,.tax-product_tag) .sf-content{padding:24px clamp(12px,2.2vw,30px) 36px}
body:is(.post-type-archive-product,.tax-product_cat,.tax-product_tag) .sf-content .woocommerce-products-header{margin:0 0 20px}
body:is(.post-type-archive-product,.tax-product_cat,.tax-product_tag) .sf-content .woocommerce-products-header__title{margin:0;font-size:clamp(26px,4vw,40px);font-weight:500;line-height:1.2;letter-spacing:-.025em}
/* The same archive title is already in the header. Keep the native H1 in
   the accessibility tree and preserve any Woo description or extension. */
body:not(.home):is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag) .sf-content .woocommerce-products-header__title{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;border:0;
}
body:not(.home):is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat,.tax-product_tag) .sf-content .woocommerce-products-header:not(:has(> :not(.woocommerce-products-header__title))){margin-bottom:0}

body:is(.post-type-archive-product,.tax-product_cat,.tax-product_tag) .sf-content .term-description{max-width:65ch;color:var(--sf-muted);font-size:14px;line-height:1.6}
body:is(.post-type-archive-product,.tax-product_cat,.tax-product_tag) .sf-content .woocommerce-result-count{float:none;margin:0 0 20px;font-size:13px;color:var(--sf-muted)}
.sf-catalog-filters{max-width:640px;margin-inline:auto;padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
.sf-catalog-filters form{display:grid;gap:14px}
.sf-catalog-filters label,.sf-catalog-filters legend{font-size:14px;font-weight:500}
.sf-catalog-filters select,.sf-catalog-filters input{font:inherit;width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--sf-ui-border);border-radius:var(--sf-ui-control-radius,12px);color:var(--sf-ui-ink);background:var(--sf-ui-surface)}
.sf-catalog-filters fieldset{min-width:0;margin:10px 0;padding:0;border:0}
.sf-catalog-filters legend{margin-bottom:12px}
.sf-filter-prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sf-filter-prices label{display:grid;gap:8px}
.sf-filter-actions{display:flex;flex-wrap:wrap;gap:10px}
.sf-filter-categories{margin-top:32px}
.sf-filter-categories h3{font-size:16px;font-weight:500;margin:0 0 12px}
.sf-filter-categories a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 4px;color:inherit;text-decoration:none;border-bottom:1px solid var(--sf-ui-border)}
.sf-filter-categories a[aria-current]{font-weight:600}
.sf-filter-categories a span{font-size:13px;color:var(--sf-muted)}

/* Woo still announces successful additions; header cart remains the cart link. */
body:not(.codela-my-account-layout) .sf-content ul.products > li.product a.sf-ui-icon-button + a.added_to_cart{display:none!important}

.sf-active-filters{display:flex;flex-wrap:wrap;gap:8px;margin-block:0 20px}
.sf-active-filters .sf-ui-button{max-width:100%;--sf-ui-button-height:44px;--sf-ui-button-font-size:12px;--sf-ui-button-padding-y:8px;--sf-ui-button-padding-x:12px}
.sf-active-filters .sf-ui-button-label{min-width:0;overflow-wrap:anywhere;white-space:normal}
.sf-active-filters .sf-icon{width:16px;height:16px;flex:none}