/* Shared category shell. Native WooCommerce loops, filters and landing content stay in place. */
body.pd-catalog-standard{--pd-brand:#0b5146;--pd-ink:#17211e;--pd-surface:#fff;--pd-soft:#eaf3f0;--pd-line:#e1e8e4;--pd-orange:#ee4d2d;--pd-muted:#687871}
html body.pd-category-standard #wrapper #main{background:#f3f8f5;padding-bottom:40px;color:var(--pd-ink)}
html body.pd-category-standard #wrapper #main .row.category-page-row{width:calc(100% - 80px)!important;max-width:1360px!important;margin:0 auto!important;padding:20px 0 0!important}
html body.pd-category-standard #wrapper #main .category-page-row>.col{padding:0;min-width:0}
html body.pd-category-standard #wrapper #main .category-page-row .shop-container{display:flow-root;min-width:0;padding:0!important}
html body.pd-category-standard #wrapper #main .category-page-row .shop-container>.products.row:not(.slider){display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;align-items:stretch!important;width:100%!important;max-width:none!important;margin:16px 0 24px!important;padding:0!important}
html body.pd-category-standard #wrapper #main .category-page-row .shop-container>.products.row:not(.slider)::after{display:none!important;content:none!important}
html body.pd-category-standard #wrapper #main .category-page-row .shop-container>.products.row:not(.slider)>.product-small.col{width:100%!important;max-width:none!important;flex-basis:auto!important;margin:0!important;padding:0!important}
html body.pd-category-standard #wrapper .shop-page-title{background:#f3f8f5;border:0;box-shadow:none}
html body.pd-category-standard #wrapper .shop-page-title .page-title-inner{width:calc(100% - 80px);max-width:1360px;padding:20px 0 0;margin:0 auto;min-height:0}
html body.pd-category-standard #wrapper .shop-page-title h1{font:700 34px/1.2 Roboto,sans-serif;color:var(--pd-brand);letter-spacing:-.5px;margin:8px 0 16px}
html body.pd-category-standard #wrapper .shop-page-title .woocommerce-breadcrumb{font-size:12px;color:var(--pd-muted);text-transform:none}
html body.pd-category-standard #wrapper #main .pd-category-navigation{width:224px;float:left;margin:0 24px 24px 0;padding:18px 16px;background:#fff;border:1px solid var(--pd-line);border-radius:12px;color:var(--pd-ink);font:14px/1.45 Roboto,sans-serif}
html body.pd-category-standard #main .pd-category-navigation summary{font-weight:700;color:var(--pd-brand);cursor:pointer;list-style:none;margin:0 0 12px}
html body.pd-category-standard #main .pd-category-navigation summary::-webkit-details-marker{display:none}
html body.pd-category-standard #main .pd-category-navigation ul{list-style:none;margin:0;padding:0}
html body.pd-category-standard #main .pd-category-navigation li{margin:0;padding:0}
html body.pd-category-standard #main .pd-category-navigation a{display:block;padding:9px 10px;color:var(--pd-ink);border-radius:7px;overflow-wrap:anywhere}
html body.pd-category-standard #main .pd-category-navigation a:hover,html body.pd-category-standard #main .pd-category-navigation a[aria-current=page]{background:var(--pd-soft);color:var(--pd-brand)}
html body.pd-category-standard #main .pd-category-navigation__all{margin-top:12px;border-top:1px solid var(--pd-line);font-weight:500;color:var(--pd-brand)!important}
html body.pd-category-standard #wrapper #main .category-page-row .shop-container:has(>.pd-category-navigation)>:is(.products,.phadin-fv2,.phadin-filter,.woocommerce-result-count,.woocommerce-ordering,.fv2-load,.phadin-load-more-panel,.woocommerce-pagination,.container:has(>nav.woocommerce-pagination)){width:calc(100% - 248px)!important;max-width:none!important;margin-left:248px!important;margin-right:0!important}
html body.pd-category-standard #wrapper #main .category-page-row .shop-container>:is(.phadin-ux-archive-bottom,.phadin-may-pha-mount--bottom,.pcr-guide,.pcr-comparison,.pcr-setup,.pcr-faq){clear:both}
/* A compact, consistent introduction using the editable category's own content. */
html body.pd-category-standard #wrapper #main :is(.pcr.pcr-hero,.ph-b2-hero,.ph-bl-hero,.phadin-machine-archive-intro,.ph-bl-compact-header){padding:24px!important;margin:0 0 20px!important;background:#fff!important;border:1px solid var(--pd-line);border-radius:12px}
html body.pd-category-standard #wrapper #main :is(.pcr.pcr-hero,.ph-b2-hero,.ph-bl-hero) :is(.pcr-hero-row,.ph-b2-hero-grid){width:100%!important;max-width:none!important;padding:0!important;margin:0!important;grid-template-columns:minmax(0,1fr) 180px!important;gap:28px!important}
html body.pd-category-standard #wrapper #main :is(.pcr.pcr-hero,.ph-b2-hero,.ph-bl-hero) h1{font:700 34px/1.2 Roboto,sans-serif!important;letter-spacing:-.5px;color:var(--pd-brand)!important;margin:0 0 10px!important}
html body.pd-category-standard #wrapper #main :is(.pcr.pcr-hero,.ph-b2-hero,.ph-bl-hero) :is(p,.pcr-muted p,.pcr-lead p){font-size:14px!important;line-height:1.5!important;margin:0 0 10px!important;color:var(--pd-muted)}
html body.pd-category-standard #wrapper #main :is(.pcr.pcr-hero,.ph-b2-hero,.ph-bl-hero) :is(.pcr-eyebrow p,.ph-bl-eyebrow){color:var(--pd-brand)!important;font-size:11px!important;font-weight:700!important;letter-spacing:1px}
html body.pd-category-standard #wrapper #main :is(.pcr.pcr-hero,.ph-b2-hero,.ph-bl-hero) :is(.pcr-hero-image img,.ph-b2-hero-image img){height:150px!important;width:100%;object-fit:contain}
html body.pd-category-standard #wrapper #main :is(.pcr-hero-photo>.col-inner,.ph-b2-hero-image){padding:8px!important;border:0!important;background:#fff!important;margin:0!important}
html body.pd-category-standard #wrapper #main :is(.pcr.pcr-hero,.ph-b2-hero,.ph-bl-hero) .button{height:44px;min-height:44px;line-height:42px;border-radius:8px!important;font-size:13px;margin-bottom:8px;background:var(--pd-orange);border-color:var(--pd-orange);color:#fff}
html body.pd-category-standard #wrapper #main .pcr.pcr-hero .pcr-button-secondary{background:#fff;border-color:var(--pd-line);color:var(--pd-brand)}
html body.pd-category-standard #wrapper #main .pcr.pcr-quick{padding:16px 0!important;margin:0 0 16px;background:transparent!important}
html body.pd-category-standard #wrapper #main .pcr.pcr-catalog-heading{padding:12px 0!important;background:transparent!important}
html body.pd-category-standard #wrapper #main .pcr.pcr-quick :is(h2,.pcr-lead p){margin-bottom:8px!important}
html body.pd-category-standard #wrapper #main .pcr.pcr-quick h2,html body.pd-category-standard #wrapper #main .pcr.pcr-catalog-heading h2{font-size:22px!important;line-height:1.3!important;color:var(--pd-brand)}
html body.pd-category-standard #wrapper #main .pcr.pcr-quick .pcr-card-row{gap:12px!important}
html body.pd-category-standard #wrapper #main .pcr.pcr-quick .pcr-card-row>.col>.col-inner{padding:16px!important;background:#fff;border:1px solid var(--pd-line);border-radius:12px}
html body.pd-category-standard #wrapper #main .pcr.pcr-quick :is(p,h3){font-size:14px!important;line-height:1.4!important;margin-bottom:8px!important}
/* Both existing filter implementations use the same palette, spacing and controls. */
html body.pd-category-standard #wrapper #main :is(.phadin-fv2,.phadin-filter){--fv2-green:#0b5146;--fv2-line:#e1e8e4;--phadin-filter-green:#0b5146;margin-top:0!important;margin-bottom:16px!important;color:var(--pd-ink)}
html body.pd-category-standard #wrapper #main :is(.phadin-fv2 .fv2-shell,.phadin-filter__form){background:#fff;border:1px solid var(--pd-line);border-radius:12px;box-shadow:none;padding:18px!important}
html body.pd-category-standard #wrapper #main :is(.fv2-title,.phadin-filter__title){color:var(--pd-brand);font-size:18px;font-weight:600}
html body.pd-category-standard #wrapper #main :is(.fv2-quick,.fv2-all,.phadin-filter__control>summary){border-radius:8px;border-color:var(--pd-line);font-size:13px;min-height:40px;height:auto;padding:10px 12px;white-space:normal}
html body.pd-category-standard #wrapper #main :is(.fv2-toolbar,.fv2-quick-row){flex-wrap:wrap}
html body.pd-category-standard #wrapper #main :is(.fv2-apply,.phadin-filter__apply){background:var(--pd-brand);border-color:var(--pd-brand);color:#fff;border-radius:8px}
html body.pd-category-standard #wrapper #main :is(.fv2-meta,.phadin-filter__results){color:var(--pd-muted);font-size:13px;margin-bottom:0}
html body.pd-category-standard #wrapper #main :is(.fv2-dialog,.phadin-filter__menu){border-color:var(--pd-line);border-radius:12px;color:var(--pd-ink)}
html body.pd-category-standard #wrapper #main :is(.fv2-load,.phadin-load-more-panel){clear:none;text-align:center;margin-top:24px;margin-bottom:32px}
html body.pd-category-standard #wrapper #main :is(.fv2-load button,.phadin-load-more-panel button){border-radius:8px;background:#fff;border:1px solid var(--pd-brand);color:var(--pd-brand);min-height:44px;font-weight:600;box-shadow:none}
@media(max-width:1100px){
 html body.pd-category-standard #wrapper #main .row.category-page-row,html body.pd-category-standard #wrapper .shop-page-title .page-title-inner{width:calc(100% - 48px)!important}
 html body.pd-category-standard #wrapper #main .category-page-row .shop-container>.products.row:not(.slider){grid-template-columns:repeat(3,minmax(0,1fr))!important}
 html body.pd-category-standard #wrapper #main .pd-category-navigation{float:none;width:100%;margin:0 0 16px;padding:12px 14px}
 html body.pd-category-standard #main .pd-category-navigation ul{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
 html body.pd-category-standard #main .pd-category-navigation li{flex:0 0 auto;max-width:220px}
 html body.pd-category-standard #main .pd-category-navigation a{padding:8px 10px;background:var(--pd-soft);font-size:12px}
 html body.pd-category-standard #main .pd-category-navigation__all{display:inline-block;margin-top:6px;background:transparent}
 html body.pd-category-standard #wrapper #main .category-page-row .shop-container:has(>.pd-category-navigation)>:is(.products,.phadin-fv2,.phadin-filter,.woocommerce-result-count,.woocommerce-ordering,.fv2-load,.phadin-load-more-panel,.woocommerce-pagination,.container:has(>nav.woocommerce-pagination)){width:100%!important;margin-left:0!important}
}
@media(max-width:767px){
 html body.pd-category-standard #wrapper #main .row.category-page-row,html body.pd-category-standard #wrapper .shop-page-title .page-title-inner{width:calc(100% - 32px)!important;padding-top:12px!important}
 html body.pd-category-standard #wrapper #main .category-page-row .shop-container>.products.row:not(.slider){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
 html body.pd-category-standard #wrapper #main :is(.pcr.pcr-hero,.ph-b2-hero,.ph-bl-hero,.phadin-machine-archive-intro,.ph-bl-compact-header){padding:18px!important;margin-bottom:16px!important}
 html body.pd-category-standard #wrapper #main :is(.pcr.pcr-hero,.ph-b2-hero,.ph-bl-hero) :is(.pcr-hero-row,.ph-b2-hero-grid){grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
 html body.pd-category-standard #wrapper #main :is(.pcr.pcr-hero,.ph-b2-hero,.ph-bl-hero) h1,html body.pd-category-standard #wrapper .shop-page-title h1{font-size:26px!important;line-height:1.25!important}
 html body.pd-category-standard #wrapper #main :is(.pcr-hero-photo,.ph-b2-hero-image){display:none!important}
 html body.pd-category-standard #wrapper #main .pcr.pcr-quick .pcr-card-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 html body.pd-category-standard #wrapper #main .pcr.pcr-quick .pcr-card-row>.col>.col-inner{padding:12px!important}
 html body.pd-category-standard #wrapper #main :is(.phadin-fv2 .fv2-shell,.phadin-filter__form){padding:14px!important}
 html body.pd-category-standard #wrapper #main :is(.fv2-title,.phadin-filter__title){font-size:16px}
 html body.pd-category-standard #wrapper #main .pcr.pcr-quick h2,html body.pd-category-standard #wrapper #main .pcr.pcr-catalog-heading h2{font-size:20px!important}
}
html body.pd-category-standard #wrapper #main{background:#f3f8f5!important}
html body.pd-category-standard #wrapper #main .category-page-row .shop-container{background:transparent!important}
html body.pd-category-standard #wrapper #main .phadin-load-more-panel a.phadin-load-more{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 24px;border:1px solid var(--pd-brand);border-radius:8px;background:#fff;color:var(--pd-brand);font-weight:600}
/* Retire the old visually-hidden native archive heading on ordinary categories. */
html body.pd-category-standard #wrapper .shop-page-title.category-page-title .page-title-inner:has(.woocommerce-breadcrumb) h1.shop-page-title{position:static!important;clip:auto!important;clip-path:none!important;width:100%!important;height:auto!important;max-height:none!important;overflow:visible!important;white-space:normal!important;padding:18px 20px!important;margin:8px 0 0!important;background:#fff!important;border:1px solid var(--pd-line);border-radius:12px;text-align:left}
html body.pd-category-standard #wrapper .page-title-inner>.flex-col:has(>h1.shop-page-title){display:flex;flex-direction:column;align-items:stretch;gap:8px}
html body.pd-category-standard #wrapper .page-title-inner h1.shop-page-title{order:2}
html body.pd-category-standard #wrapper .page-title-inner .woocommerce-breadcrumb{order:1}
/* The existing PHC category header uses the same compact introduction tokens. */
html body.pd-category-standard #wrapper #main .shop-container h1{font:700 34px/1.2 Roboto,sans-serif!important;letter-spacing:-.5px!important;color:var(--pd-brand)!important}
html body.pd-category-standard #wrapper #main .phc-top .phc-hero-panel{grid-template-columns:minmax(0,1fr) 180px!important;gap:28px!important;padding:24px!important;border-color:var(--pd-line)!important;border-radius:12px!important}
html body.pd-category-standard #wrapper #main .phc-top .phc-hero-panel>.col{width:100%!important;max-width:none!important;flex-basis:auto!important;padding:0!important}
html body.pd-category-standard #wrapper #main .phc-top .phc-title h1{margin:0 0 10px!important}
html body.pd-category-standard #wrapper #main .phc-top :is(.phc-lead p,.phc-summary p){font-size:14px!important;line-height:1.5!important;margin-bottom:10px!important;color:var(--pd-muted)}
html body.pd-category-standard #wrapper #main .phc-top .phc-eyebrow p{font-size:11px!important;color:var(--pd-brand)!important;letter-spacing:1px}
html body.pd-category-standard #wrapper #main .phc-top .phc-hero-image img{height:150px!important;width:100%!important;object-fit:contain!important}
html body.pd-category-standard #wrapper #main .phc-top .button{min-height:44px;height:44px;line-height:42px;font-size:13px;border-radius:8px}
@media(max-width:767px){
 html body.pd-category-standard #wrapper #main .shop-container h1{font-size:26px!important;line-height:1.25!important}
 html body.pd-category-standard #wrapper #main .phc-top .phc-hero-panel{grid-template-columns:minmax(0,1fr)!important;gap:16px!important;padding:18px!important}
}

/*
 * PHADIN shared catalog cards — approved coffee PLP, 2026-10-16.
 * PHP adds pd-catalog-standard only on supported front-end routes.
 * Keep WooCommerce/WPC markup, data, links, loading and selection behavior.
 * No widths or flex-basis are imposed on carousel cards or Flickity wrappers.
 */
body.pd-catalog-standard {
  --pdc-brand: #0B5146;
  --pdc-ink: #17211E;
  --pdc-muted: #687871;
  --pdc-line: #E1E8E4;
  --pdc-soft: #EAF3F0;
  --pdc-sale: #EE4D2D;
  --pdc-sale-hover: #D94022;
}

html body.pd-catalog-standard #wrapper #main .product-small.col {
  --pdc-pad: 12px;
  --pdc-image-height: 222px;
  --pdc-title-size: 15px;
  --pdc-title-line: 20px;
  --pdc-title-min: 60px;
  --pdc-price-min: 44px;
  --pdc-action-font: 13px;
  --phadin-card-action-color: var(--pdc-brand);
  --phadin-card-action-height: 40px;
  --phadin-card-action-radius: 8px;
  --phadin-card-action-gap: 4px;
  min-width: 0;
  font-family: Roboto, Arial, sans-serif;
  color: var(--pdc-ink);
}

/*
 * The structural :has() matches native and phadin-related-product-card boxes.
 * Its specificity supersedes the legacy product-page/card overrides without
 * adding a page-specific visual definition for each category or product.
 */
html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) > .col-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  box-sizing: border-box;
  height: 100%;
  min-width: 0;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--pdc-line) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  container-name: phadin-product-card;
  container-type: inline-size;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) > .col-inner > .product-small.box {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: auto !important;
  min-width: 0;
  margin: 0;
  padding: var(--pdc-pad) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #FFFFFF;
  box-shadow: none !important;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) .box-image {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 100% !important;
  height: var(--pdc-image-height) !important;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #FFFFFF;
  aspect-ratio: auto !important;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) .box-image > :is(.image-zoom, .image-cover) {
  width: 100%;
  height: 100% !important;
  padding-top: 0 !important;
  aspect-ratio: auto !important;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) .box-image > :is(.image-zoom, .image-cover) > a {
  display: block;
  width: 100%;
  height: 100%;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) .box-image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: 100%;
  margin: 0;
  object-fit: contain !important;
  object-position: center;
  aspect-ratio: auto !important;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) .box-text-products {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  height: auto !important;
  min-width: 0;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) .title-wrapper {
  height: auto !important;
  min-height: var(--pdc-title-min);
  margin: 0;
}

/* Minimum title slots align rows; complete names remain visible and can grow. */
html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) :is(.product-title, .product-title a) {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  color: var(--pdc-ink) !important;
  font-family: Roboto, Arial, sans-serif !important;
  font-size: var(--pdc-title-size) !important;
  font-weight: 500 !important;
  line-height: var(--pdc-title-line) !important;
  letter-spacing: 0;
  text-align: left !important;
  text-transform: none !important;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset !important;
  line-clamp: unset;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) .price-wrapper {
  height: auto !important;
  min-height: var(--pdc-price-min);
  margin: 0 !important;
  text-align: left !important;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) .price {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 3px;
  margin: 0 !important;
  color: var(--pdc-brand) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 22px !important;
  text-align: left !important;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) .price * {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) .price:has(del) {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) .price ins {
  order: -1;
  margin: 0;
  color: var(--pdc-sale) !important;
  background: transparent;
  text-decoration: none;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) .price del {
  order: 1;
  margin: 0;
  color: var(--pdc-muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
  opacity: 1 !important;
}

/* The fallback related renderer uses phadin-product-card-actions instead. */
html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) :is(.phadin-flatsome-loop-actions, .phadin-product-card-actions) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 4px;
  box-sizing: border-box;
  width: 100%;
  height: auto !important;
  min-height: var(--phadin-card-action-height);
  margin: auto 0 0 !important;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) :is(.phadin-flatsome-loop-actions.has-cart, .phadin-product-card-actions) {
  grid-template-columns: minmax(0, 1fr) var(--phadin-card-action-height);
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) .phadin-flatsome-loop-actions .add-to-cart-button {
  display: contents;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) a:is(.phadin-loop-detail-action, .phadin-loop-cart-action, .phadin-card-detail, .phadin-card-cart) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100% !important;
  height: var(--phadin-card-action-height) !important;
  min-height: var(--phadin-card-action-height) !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 8px !important;
  overflow: hidden;
  border: 1px solid #CFE3D9 !important;
  border-radius: 8px !important;
  background: var(--pdc-soft) !important;
  box-shadow: none !important;
  color: var(--pdc-brand) !important;
  font-family: Roboto, Arial, sans-serif;
  font-size: var(--pdc-action-font) !important;
  font-weight: 400 !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
  text-align: center;
  text-decoration: none;
  text-transform: none !important;
  white-space: nowrap;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) a:is(.phadin-loop-cart-action, .phadin-card-cart) {
  width: var(--phadin-card-action-height) !important;
  min-width: var(--phadin-card-action-height) !important;
  padding: 0 !important;
  border-color: var(--pdc-sale) !important;
  background: var(--pdc-sale) !important;
  color: #FFFFFF !important;
}

/* Preserve the supplied cart glyph and native WooCommerce loading spinner. */
html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) .phadin-loop-cart-action > i.icon-shopping-basket::before {
  filter: brightness(0) invert(1);
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) :is(.phadin-card-cart-glyph, .phadin-loop-cart-action > i) {
  color: #FFFFFF !important;
}

/* Keep repeat-add feedback visible without hiding the original cart control. */
html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) a.added_to_cart.wc-forward {
  display: block !important;
  grid-column: 1 / -1;
  box-sizing: border-box;
  width: 100%;
  margin: 2px 0 0;
  padding: 6px 8px;
  border: 1px solid #CFE3D9;
  border-radius: 8px;
  background: var(--pdc-soft);
  color: var(--pdc-brand) !important;
  font: 400 12px/18px Roboto, Arial, sans-serif;
  text-align: center;
  text-transform: none;
  white-space: normal;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) a.added_to_cart.wc-forward::before {
  content: "✓ Đã thêm vào giỏ";
  display: block;
  font-weight: 600;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) :is(.phadin-loop-cart-action, .phadin-card-cart).loading + a.added_to_cart {
  visibility: hidden;
}

/* Restore the real WPC button; keep its own text and selected-state classes. */
html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) > .col-inner > button.woosc-btn.pd-compare-button {
  display: flex !important;
  flex: 0 0 auto;
  align-items: center;
  align-self: stretch;
  justify-content: flex-start;
  gap: 8px;
  box-sizing: border-box;
  width: auto !important;
  height: auto !important;
  min-height: 28px;
  margin: 0 var(--pdc-pad) var(--pdc-pad) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pdc-muted) !important;
  font: 400 12px/20px Roboto, Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-align: left;
  text-transform: none !important;
  white-space: normal;
  cursor: pointer;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) > .col-inner > button.woosc-btn.pd-compare-button::before {
  content: "";
  display: inline-flex;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid #C8D7CF;
  border-radius: 3px;
  background: #FFFFFF;
  color: #FFFFFF;
  font: 700 12px/1 Roboto, Arial, sans-serif;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) > .col-inner > button.woosc-btn.pd-compare-button::after {
  content: none !important;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) > .col-inner > button.woosc-btn.pd-compare-button:is(.woosc-btn-added, .woosc-added) {
  color: var(--pdc-brand) !important;
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) > .col-inner > button.woosc-btn.pd-compare-button:is(.woosc-btn-added, .woosc-added)::before {
  content: "✓";
  border-color: var(--pdc-brand);
  background: var(--pdc-brand);
}

html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) :is(a, button):focus-visible {
  outline: 2px solid var(--pdc-brand) !important;
  outline-offset: 2px;
}

@media (hover: hover) {
  html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) a:is(.phadin-loop-detail-action, .phadin-card-detail):hover {
    border-color: var(--pdc-brand) !important;
    background: #DCEEE5 !important;
    color: var(--pdc-brand) !important;
    transform: none;
  }

  html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) a:is(.phadin-loop-cart-action, .phadin-card-cart):hover {
    border-color: var(--pdc-sale-hover) !important;
    background: var(--pdc-sale-hover) !important;
    color: #FFFFFF !important;
    transform: none;
  }
}

/* Static related rows share 4/3/2 columns; sliders keep their native geometry. */
html body.pd-catalog-standard #wrapper #main :is(.pd-related, .related-products-wrapper, .related, .up-sells) .row:not(.slider):not(.flickity-slider):not(.flickity-enabled):not([data-flickity-options]):has(> .product-small.col) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
}

html body.pd-catalog-standard #wrapper #main :is(.pd-related, .related-products-wrapper, .related, .up-sells) .row:not(.slider):not(.flickity-slider):not(.flickity-enabled):not([data-flickity-options]):has(> .product-small.col)::before,
html body.pd-catalog-standard #wrapper #main :is(.pd-related, .related-products-wrapper, .related, .up-sells) .row:not(.slider):not(.flickity-slider):not(.flickity-enabled):not([data-flickity-options]):has(> .product-small.col)::after {
  display: none;
}

html body.pd-catalog-standard #wrapper #main :is(.pd-related, .related-products-wrapper, .related, .up-sells) .row:not(.slider):not(.flickity-slider):not(.flickity-enabled):not([data-flickity-options]):has(> .product-small.col) > .product-small.col {
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

html body.pd-catalog-standard #wrapper #main .type-product .pd-related :is(.pd-related-heading, .pd-related-heading > .col > .col-inner) {
  background: var(--pdc-brand) !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  html body.pd-catalog-standard #wrapper #main :is(.pd-related, .related-products-wrapper, .related, .up-sells) .row:not(.slider):not(.flickity-slider):not(.flickity-enabled):not([data-flickity-options]):has(> .product-small.col) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  html body.pd-catalog-standard #wrapper #main .product-small.col {
    --pdc-pad: 9px;
    --pdc-image-height: 157px;
    --pdc-title-size: 13px;
    --pdc-title-line: 18px;
    --pdc-title-min: 80px;
    --pdc-price-min: 48px;
    --pdc-action-font: 11px;
    --phadin-card-action-height: 44px;
  }

  html body.pd-catalog-standard #wrapper #main :is(.pd-related, .related-products-wrapper, .related, .up-sells) .row:not(.slider):not(.flickity-slider):not(.flickity-enabled):not([data-flickity-options]):has(> .product-small.col) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* A narrow desktop carousel card receives the same readable compact sizing. */
@container phadin-product-card (max-width: 220px) {
  html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) > .col-inner > .product-small.box {
    --pdc-pad: 9px;
    --pdc-image-height: 157px;
    --pdc-title-size: 13px;
    --pdc-title-line: 18px;
    --pdc-title-min: 80px;
    --pdc-price-min: 48px;
    --pdc-action-font: 11px;
    --phadin-card-action-height: 44px;
  }

  html body.pd-catalog-standard #wrapper #main .product-small.col:has(> .col-inner > .product-small.box) > .col-inner > button.woosc-btn.pd-compare-button {
    margin-right: 9px !important;
    margin-bottom: 9px !important;
    margin-left: 9px !important;
  }
}
/* Legacy category price wrappers also use flex centering. */
html body.pd-catalog-standard #wrapper #main .product-small.col:has(>.col-inner>.product-small.box) .price-wrapper{display:block!important}
html body.pd-catalog-standard #wrapper #main .product-small.col:has(>.col-inner>.product-small.box) .price{justify-content:flex-start!important}
@container phadin-product-card (max-width:180px){
 html body.pd-catalog-standard #wrapper #main .product-small.col:has(>.col-inner>.product-small.box) a.phadin-loop-detail-action{white-space:normal!important;line-height:14px!important;padding:0 4px!important}
}

html body.pd-category-standard #wrapper #main .pd-category-explore{clear:both;}