/* RoboMaterial product card ("rm-card") — ported 1:1 from the homepage demo.
   Everything is scoped to .rm-pc / .xts-prod-design-rm-card so the rest of the
   theme is untouched. Colors live in the custom properties below. */

.xts-prod-design-rm-card,.rm-pc{
  --rm-ink:#1c2126;--rm-text:#454b52;--rm-muted:#7a828b;
  --rm-line:#e2e6ea;--rm-line-strong:#c4cbd3;
  --rm-bg:#fff;--rm-panel:#f3f5f7;--rm-panel-2:#e9edf1;
  /* --rm-accent and the button colors are overwritten from Theme Settings -> Colors (see rm-card.php) */
  --rm-accent:#1d7ba5;
  --rm-btn-bg:var(--rm-accent);--rm-btn-bg-hover:color-mix(in srgb,var(--rm-accent) 85%,#000);
  --rm-btn-text:#fff;--rm-btn-text-hover:#fff;
  --rm-ok:#1e8a4a;--rm-ok-soft:#e4f4ea;--rm-warn:#b26a08;--rm-warn-soft:#fbefd9;--rm-off:#8a9199;--rm-off-soft:#eceef1;
  --rm-sale:#e2231a;
  --rm-shadow:0 12px 32px rgba(28,33,38,.14);
}

/* ---------- hairline grid (shop / category pages and Elementor grids) ---------- */
.xts-prod-design-rm-card:not(.xts-carousel){margin:0!important}
.xts-prod-design-rm-card:not(.xts-carousel) > .xts-col{padding:0!important;margin:0!important;display:flex}
.xts-prod-design-rm-card > .xts-col > .xts-product,
.xts-prod-design-rm-card .swiper-slide > .xts-product{flex:1 1 auto;width:100%;height:100%}
.xts-prod-design-rm-card > .xts-col:hover,
.xts-prod-design-rm-card > .xts-col:focus-within{position:relative;z-index:5}

/* ---------- card ---------- */
.rm-pc{
  --rm-hair:1px 0 0 0 var(--rm-line),0 1px 0 0 var(--rm-line),1px 1px 0 0 var(--rm-line),inset 1px 0 0 0 var(--rm-line),inset 0 1px 0 0 var(--rm-line);
  position:relative;height:100%;box-sizing:border-box;background:var(--rm-bg);color:var(--rm-text);
  padding:14px 14px 16px;display:flex;flex-direction:column;gap:10px;
  container-type:inline-size;font-size:15px;line-height:1.5;text-align:left;box-shadow:var(--rm-hair);transition:box-shadow .15s ease;
}
.rm-pc *,.rm-pc *::before,.rm-pc *::after{box-sizing:border-box}
.rm-pc:hover,.rm-pc:focus-within{box-shadow:var(--rm-hair),var(--rm-shadow)}
.rm-pc svg{display:block}

/* media */
.rm-pc-media{display:block;flex:none;aspect-ratio:1;background:#fff;overflow:hidden;position:relative;margin:0}
.rm-pc-link{position:absolute;inset:0;z-index:2}
.rm-pc .xts-product-image{width:100%;height:100%}
.rm-pc .xts-product-image img,.rm-pc-media > img{width:100%;height:100%;object-fit:contain;transition:scale .3s ease}
.rm-pc:hover .xts-product-image img{scale:1.05}
.rm-pc .xts-product-hover-image{display:none!important}
.rm-pc .xts-product-labels{position:absolute;left:0;top:0;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0;padding:0;pointer-events:none}
.rm-pc .xts-product-label{display:block;min-width:0;min-height:0;height:auto;width:auto;border-radius:0;margin:0;
  font-size:10px;font-weight:700;letter-spacing:.08em;line-height:1.5;text-transform:uppercase;padding:4px 8px;color:#fff;background:var(--rm-sale);box-shadow:none}
.rm-pc .xts-product-label.xts-new{background:var(--rm-accent)}
.rm-pc .xts-product-label.xts-featured{background:var(--rm-ink)}
.rm-pc .xts-product-label.xts-out-of-stock{display:none}
.rm-pc[data-stock="out"] .rm-pc-media{filter:grayscale(1);opacity:.65}

/* tags */
.rm-pc-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;min-height:22px}
.rm-tg{display:inline-flex;align-items:center;gap:5px;height:22px;margin:0;padding:0 8px 0 6px;border:1px solid var(--rm-line-strong);font-size:11px;font-weight:600;line-height:1;color:var(--rm-ink);white-space:nowrap}
.rm-tg::before{display:none}
.rm-tg svg{width:13px;height:13px;flex:none}
/* icon colors come from the SVG files in assets/icons (black = text color) */
.rm-tg.attr{border-style:dashed;color:var(--rm-text);font-weight:500}

/* works with */
.rm-pc-eco{display:flex;gap:6px;align-items:center;min-height:20px}
/* No "Works with" on this card: no empty space... */
.rm-pc.rm-no-eco .rm-pc-eco{display:none}
/* ...unless another card in the same visual row has it (set by the small script in rm-card.php), so titles stay aligned */
.rm-pc.rm-no-eco.rm-pad-eco .rm-pc-eco{display:flex}
.rm-pc-eco small{font-size:10px;line-height:1;color:var(--rm-muted);letter-spacing:.06em;text-transform:uppercase;font-weight:600;margin-right:2px}
.rm-eco{width:20px;height:20px;display:grid;place-items:center;background:var(--rm-panel-2);color:var(--rm-ink);font-size:9px;font-weight:700;line-height:1;cursor:default;overflow:hidden}
.rm-eco img,.rm-eco svg{width:16px;height:16px;object-fit:contain;display:block}

/* title */
.rm-pc-title{min-width:0;flex:1 1 auto}
.rm-pc-title .woocommerce-loop-product__title,.rm-pc-title h2,.rm-pc-title h3{
  margin:0;padding:0;font-family:inherit;font-size:13.5px;font-weight:500;line-height:1.35;letter-spacing:0;text-transform:none;color:var(--rm-ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rm-pc-title a{color:inherit;text-decoration:none}
.rm-pc-title a:hover{color:var(--rm-accent)}

/* price + stock */
.rm-pc-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 8px}
.rm-pc-price{min-width:0}
.rm-pc-price .price{display:block;margin:0;font-size:16px;font-weight:700;line-height:1.3;color:var(--rm-accent);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rm-pc-price .price .amount{color:inherit;font-weight:inherit}
.rm-pc-price .price del{display:block;font-size:12px;font-weight:500;color:var(--rm-muted);opacity:1;text-decoration:line-through}
.rm-pc-price .price del .amount{color:var(--rm-muted)}
.rm-pc-price .price ins{text-decoration:none;background:none;color:var(--rm-accent)}
.rm-pc-price .woocommerce-price-suffix{display:block;font-size:10.5px;font-weight:400;line-height:1.4;color:var(--rm-muted);letter-spacing:0;margin:0}
.rm-stk{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;line-height:1.4;white-space:nowrap;padding:3px 7px;flex:none}
.rm-stk::before{content:"";width:7px;height:7px;background:currentColor}
.rm-pc[data-stock="in"] .rm-stk{color:var(--rm-ok);background:var(--rm-ok-soft)}
.rm-pc[data-stock="back"] .rm-stk{color:var(--rm-warn);background:var(--rm-warn-soft)}
.rm-pc[data-stock="out"] .rm-stk{color:var(--rm-off);background:var(--rm-off-soft)}

/* ---------- hover panel ---------- */
.rm-pc-more{position:absolute;left:0;right:0;top:100%;z-index:6;background:var(--rm-bg);padding:0 14px 14px;box-shadow:var(--rm-shadow);border-top:1px solid var(--rm-line);display:none;gap:12px;grid-template-columns:minmax(0,1fr)}
.rm-pc:hover .rm-pc-more,.rm-pc:focus-within .rm-pc-more{display:grid}
.rm-pc-specs{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12px;line-height:1.5;margin:12px 0 0;padding:0}
.rm-pc-specs dt{color:var(--rm-muted);font-weight:400;margin:0}
.rm-pc-specs dd{margin:0;color:var(--rm-ink);text-align:right;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* actions */
.rm-pc-act{display:flex;gap:6px;margin-top:12px}
.rm-pc-specs + .rm-pc-act{margin-top:0}
.rm-pc-cart{flex:1;min-width:0;display:flex;margin:0}
.rm-pc-cart > a.button,.rm-pc-cart > .button,.rm-pc-cart > a{
  flex:1;display:flex;align-items:center;justify-content:center;height:38px;min-height:0;margin:0;padding:0 10px;border:0;border-radius:0;box-shadow:none;
  background:var(--rm-btn-bg);color:var(--rm-btn-text);font-family:inherit;font-size:13px;font-weight:600;line-height:1;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s ease}
.rm-pc-cart > a:hover,.rm-pc-cart > a:focus-visible{background:var(--rm-btn-bg-hover);color:var(--rm-btn-text-hover)}
.rm-pc-cart > a::before,.rm-pc-cart > a::after{display:none}
.rm-pc-cart > a.loading{opacity:.6;pointer-events:none}
.rm-pc-cart > .added_to_cart{display:none!important}
.rm-pc[data-stock="out"] .rm-pc-cart > a{background:var(--rm-panel-2);color:var(--rm-ink)}
.rm-pc[data-stock="out"] .rm-pc-cart > a:hover{background:var(--rm-line-strong)}

.rm-pc .rm-ic{flex:none;margin:0;padding:0;position:relative}
.rm-pc .rm-ic > a{
  position:relative;display:flex;align-items:center;justify-content:center;width:38px;min-width:38px;height:38px;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;
  background:var(--rm-panel);color:var(--rm-ink);font-size:0;line-height:1;transition:background .15s ease,color .15s ease}
.rm-pc .rm-ic > a:hover{background:var(--rm-panel-2);color:var(--rm-accent)}
/* the theme's own icon font glyph (content + font-family come from the theme) */
.rm-pc .rm-ic > a::before{display:block;margin:0;font-size:18px;line-height:1;width:1em;height:1em;text-align:center}
.rm-pc .rm-ic-wishlist > a.xts-added,.rm-pc .rm-ic-wishlist > a.added{color:var(--rm-accent)}
.rm-pc .rm-ic .xts-tooltip,.rm-pc .rm-ic .xts-hint{display:none}

/* carousels clip overflow: show actions inside the card instead of below it */
.xts-carousel .rm-pc-more{display:grid;position:static;box-shadow:none;padding:0;border:0}
.xts-carousel .rm-pc-specs{display:none}
.xts-carousel .rm-pc-act{margin-top:0}

/* narrow cards (mega-menu carousel, 5-6 columns): keep the main button readable */
@container (max-width:200px){
  .rm-pc-act .rm-ic{display:none}
  .rm-pc-cart > a.button,.rm-pc-cart > a{font-size:12px;padding:0 6px}
}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .rm-pc{padding:10px 10px 12px}
  .rm-pc-more{display:grid;position:static;box-shadow:none;padding:0;border:0}
  .rm-pc-specs{display:none}
  .rm-pc-act{margin-top:0}
}
@media (hover:none){
  .rm-pc-more{display:grid;position:static;box-shadow:none;padding:0;border:0}
  .rm-pc-specs{display:none}
  .rm-pc-act{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.rm-pc,.rm-pc *{transition:none!important}}