/* ==========================================================
   DC SUPPLIES — PRODUCT GRID STYLING
   Covers BOTH markups seen on this site:
   1) Classic WooCommerce loop  (ul.products > li.product)
      — shop/category archives, single-product related/upsells
   2) WooCommerce "Product New" BLOCK (confirmed via DevTools:
      data-block-name="woocommerce/product-new")
      — ul.wc-block-grid__products > li.wc-block-grid__product
      — used for the "New in store" grid on the empty-cart page
   The block ships its own default styles (display:flex, fixed
   % widths, etc.) that print before this file, so block rules
   below use !important where needed to win that cascade.
   Uses the same --primary/--card/--border/--radius tokens as
   woocommerce-cart-checkout.css for a consistent look.
   ========================================================== */

/* ---------------------------------------------------------
   GRID CONTAINER
--------------------------------------------------------- */
/* The block wrapper (div[data-block-name="woocommerce/product-new"])
   is itself a flex container. A display:grid child with `1fr` columns
   inside a flex parent — with no explicit width of its own — shrinks
   to fit its smallest possible content instead of stretching to fill
   the row (that's what was collapsing every card into a sliver and
   wrapping "Request Quote" one letter per line). Forcing width:100%
   on both the wrapper and the grid itself fixes that. */
   .wc-block-grid,
   [data-block-name="woocommerce/product-new"] {
       width: 100% !important;
   }
   
   ul.products,
   .wc-block-grid__products {
       display: grid !important;
       width: 100% !important;
       box-sizing: border-box !important;
       grid-template-columns: repeat(4, 1fr) !important;
       gap: 28px !important;
       list-style: none;
       margin: 0 0 40px !important;
       padding: 0 !important;
   }
   
   @media (max-width: 991px) {
       ul.products,
       .wc-block-grid__products { grid-template-columns: repeat(2, 1fr) !important; }
   }
   @media (max-width: 560px) {
       ul.products,
       .wc-block-grid__products { grid-template-columns: 1fr !important; }
   }
   
   /* ---------------------------------------------------------
      CARD
   --------------------------------------------------------- */
   ul.products li.product,
   .wc-block-grid__product {
       position: relative;
       width: 100% !important;
       min-width: 0 !important;
       margin: 0 !important;
       background: var(--card, #ffffff);
       border: 1px solid var(--border, #ececec);
       border-radius: var(--radius, 14px);
       padding: 20px 20px 24px;
       text-align: center;
       display: flex;
       flex-direction: column;
       align-items: center;
       box-shadow: 0 2px 8px rgba(20, 20, 40, .05);
       transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
   }
   
   ul.products li.product:hover,
   .wc-block-grid__product:hover {
       transform: translateY(-4px);
       box-shadow: 0 14px 28px rgba(20, 20, 40, .10);
       border-color: #e3e3e3;
   }
   
   /* ---- image + title link ---- */
   ul.products li.product a.woocommerce-LoopProduct-link,
   .wc-block-grid__product-link {
       display: block;
       width: 100%;
       text-decoration: none !important;
       color: inherit;
   }
   
   ul.products li.product img,
   .wc-block-grid__product-image img {
       width: 100% !important;
       height: 210px !important;
       object-fit: contain !important;
       object-position: center;
       background: #fff;
       border-radius: 8px;
       margin-bottom: 14px;
   }
   
   ul.products li.product .woocommerce-loop-product__title,
   .wc-block-grid__product-title {
       font-size: 15px;
       font-weight: 700;
       line-height: 1.4;
       color: var(--primary-dark, #7a1113);
       margin: 0 0 8px;
       min-height: 42px;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }
   
   ul.products li.product a:hover .woocommerce-loop-product__title,
   .wc-block-grid__product-link:hover .wc-block-grid__product-title {
       color: var(--primary, #b91c1c);
   }
   
   /* ---------------------------------------------------------
      PRICE — hidden by default ("Call for price" state).
      The JS adds .dcs-has-price on cards with a real numeric
      price, which re-reveals it via the rule below.
   --------------------------------------------------------- */
   ul.products li.product .price,
   .wc-block-grid__product-price {
       display: none !important;
   }
   
   ul.products li.product.dcs-has-price .price,
   .wc-block-grid__product.dcs-has-price .wc-block-grid__product-price {
       display: block !important;
       font-size: 15px;
       font-weight: 600;
       color: var(--text, #222);
       margin: 0 0 14px;
   }
   
   /* ---------------------------------------------------------
      BUTTONS — Add to cart / Request quote
      The block wraps its button in an extra
      .wc-block-grid__product-add-to-cart / .wp-block-button div,
      whose own default styles (padding, shadow) are stripped so
      only the button itself is styled.
   --------------------------------------------------------- */
   .wc-block-grid__product-add-to-cart {
       width: 100%;
       margin-top: auto;
       display: flex;
       justify-content: center;
       box-shadow: none !important;
   }
   
   ul.products li.product a.button,
   ul.products li.product a.add_to_cart_button,
   ul.products li.product a.js-request-quote,
   .wc-block-grid__product-add-to-cart .add_to_cart_button,
   .wc-block-grid__product-add-to-cart .wp-block-button__link,
   .wc-block-grid__product-add-to-cart .js-request-quote {
       margin-top: auto;
       display: inline-block !important;
       width: 100%;
       max-width: 200px;
       padding: 11px 18px !important;
       border-radius: 999px !important;
       font-size: 14px;
       font-weight: 600;
       text-align: center;
       text-decoration: none !important;
       border: none;
       cursor: pointer;
       background: var(--text, #1a1a1a) !important;
       color: #fff !important;
       box-shadow: none !important;
       transition: background .18s ease, transform .18s ease;
   }
   
   ul.products li.product a.button:hover,
   ul.products li.product a.add_to_cart_button:hover,
   .wc-block-grid__product-add-to-cart .add_to_cart_button:hover {
       background: var(--primary, #b91c1c) !important;
       transform: translateY(-1px);
   }
   
   /* Request-quote button gets its own accent so it reads
      differently from "Add to cart" at a glance */
   ul.products li.product a.js-request-quote,
   .wc-block-grid__product-add-to-cart .js-request-quote {
       background: #ffffff !important;
       color: var(--primary-dark, #7a1113) !important;
       border: 1.5px solid var(--primary-dark, #7a1113) !important;
   }
   
   ul.products li.product a.js-request-quote:hover,
   .wc-block-grid__product-add-to-cart .js-request-quote:hover {
       background: var(--primary-dark, #7a1113) !important;
       color: #fff !important;
   }
   
   /* Loading / added states (kept consistent with main.js's injected styles) */
   ul.products li.product a.add_to_cart_button.dcs-loading,
   .wc-block-grid__product-add-to-cart .add_to_cart_button.dcs-loading { opacity: .6; pointer-events: none; }
   
   ul.products li.product a.add_to_cart_button.dcs-added,
   .wc-block-grid__product-add-to-cart .add_to_cart_button.dcs-added {
       background: #1a7f37 !important;
       color: #fff !important;
   }
   
   /* "New in store" section heading, tightened up to sit closer to the grid */
   .woocommerce-info,
   h2.related-title,
   h2:has(+ ul.products),
   h2:has(+ .wc-block-grid) {
       margin-bottom: 24px;
   }

   .theme-twentytwenty .wc-block-grid.has-4-columns .wc-block-grid__product, .wc-block-grid.has-4-columns .wc-block-grid__product {
    
    max-width: 100%;
}