/* PBD homepage: restyle of the EXISTING Magento "Featured Products" widget.  v2
   Served from cc.palmbeachdyno.com. Verified live against www.pbdyno.com on 2 Sept 2026.

   WHY A RESTYLE AND NOT A REPLACEMENT. v1 of this file styled a custom block that read the
   category with fetch(). That was the wrong call: the Magento Catalog Products List widget
   already renders this section server-side with a working Add to Cart button on every card,
   which a client-side block cannot do. v2 keeps the widget and restyles it to match the six
   sections above it. Nothing is replaced, nothing is re-fetched, nothing can go stale.

   SCOPE. Every rule is under .cms-index-index, so it is homepage only and cannot reach the
   identical widget markup on product pages, category pages or search results. Remove the
   stylesheet tag and the widget returns to stock Luma, unharmed.

   THE !importants ARE LOAD-BEARING. This overrides Luma theme CSS that is more specific or
   later in source order. Each one below was added because the plain rule lost, measured live.

   DO NOT MINIFY THIS FILE WITH A NAIVE ", " -> "," REPLACE. Two rules carry English prose in
   a content: string and a comma-space in them is real text, not CSS syntax. */
:root{--pbd-featured-css:"v4"}

/* ---- the section shell -----------------------------------------------
   The Page Builder row holds TWO children: the widget, and an .action-rw div with the
   "View All" link. The grey band and page padding go on their shared parent so the link
   sits inside the section, and both children get the same 1240 wrap so they left-align. */
/* WHITE, not the #f4f5f7 this started as. The section it should sit next to, "Three ways we
   tune a car", is already #f4f5f7, and two grey bands running together lose the seam. White
   is also correct in the current last-slot position, where it follows the dark proof block,
   so this holds whichever side of the Control Center the row ends up on. */
/* v4: THE SECTION IS FULL BLEED AND THE INNER WRAPS DO THE CENTRING.
   v3 put the page padding on this element and set margin:0, which quietly overrode the
   theme's own `.cms-home .cms-product-list{max-width:1560px;margin:0 auto}`. With the auto
   margins gone the whole section sat flush left, roughly 490px off centre on a wide screen,
   and it only became obvious once the row moved up next to sections that ARE centred.
   Now the band spans the viewport and the widget and the View All row each carry the same
   1240 + 22px wrap the other six homepage sections use, so every content edge on the page
   lines up. Measured: all six land on the same pixel. */
.cms-index-index .cms-product-list.custom{
  background:#fff;color:#101114;line-height:1.55;
  padding:48px 0 56px;margin:0;max-width:none!important;width:auto!important}
.cms-index-index .cms-product-list.custom *{box-sizing:border-box}
.cms-index-index .block.widget.block-products-list{
  background:none!important;padding:0 22px!important;max-width:1240px;margin:0 auto!important}

/* ---- heading ----------------------------------------------------------
   The widget's own <div class="block-title"><strong>Featured Products</strong></div> becomes
   the section heading. The eyebrow and the lead line are drawn in CSS because the widget
   gives us no place to put them; the <strong> text itself stays Magento's, so renaming the
   widget in admin renames the heading. */
.cms-index-index .block-products-list .block-title{
  display:block!important;margin:0 0 24px!important;padding:0!important;border:0!important;
  text-align:left!important;font-size:0!important}
.cms-index-index .block-products-list .block-title::before{
  content:"Featured parts";display:block;
  font-size:11.5px!important;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:#b61a1f;margin:0 0 9px}
.cms-index-index .block-products-list .block-title strong{
  display:block!important;font-size:clamp(23px,3vw,32px)!important;line-height:1.08!important;
  letter-spacing:-.03em!important;font-weight:900!important;color:#101114!important;
  margin:0!important;text-align:left!important;text-transform:none!important}
.cms-index-index .block-products-list .block-title::after{
  content:"The parts we install and calibrate most often, and the ones we build ourselves.";
  display:block;font-size:15.5px!important;color:#565d66;margin:9px 0 0;max-width:68ch;
  font-weight:400;letter-spacing:0;text-transform:none;line-height:1.55}

/* ---- grid ------------------------------------------------------------
   Deliberately 4 -> 2, never 3. Eight cards divide cleanly into 4 and 2 and leave a ragged
   half-row at 3, which reads as a bug on a merchandising row. */
.cms-index-index .block-products-list .block-content{max-width:none;margin:0}
.cms-index-index .block-products-list .products-grid .product-items{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0;padding:0;list-style:none}
.cms-index-index .block-products-list .products-grid .product-item{
  width:auto!important;margin:0!important;padding:0!important;display:flex}

.cms-index-index .block-products-list .product-item-info{
  position:relative;display:flex;flex-direction:column;width:100%;background:#fff;
  border:1px solid #d9dee4;border-top:3px solid #d9dee4;border-radius:10px;overflow:hidden;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.cms-index-index .block-products-list .product-item-info:hover{
  border-color:#b9c1ca;border-top-color:#b61a1f;box-shadow:0 8px 22px rgba(16,19,24,.10);
  transform:translateY(-2px)}

/* ---- photo ------------------------------------------------------------
   Luma nests the image four deep: .product-item-photo > a > span.product-image-container >
   span.product-image-wrapper > img, and puts a per-product inline <style> on the container
   fixing its width, plus width/height attributes on the img. EVERY level has to be released
   or the natural 240x300 asset overflows a 4/3 box. The <a> is the one that is easy to miss
   and it is the one that was actually holding the size. */
.cms-index-index .block-products-list .product-item-photo{
  display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;min-height:0;
  background:#fff;border-bottom:1px solid #e6eaee;padding:14px;order:1;overflow:hidden}
.cms-index-index .block-products-list .product-item-photo > a,
.cms-index-index .block-products-list .product-image-container,
.cms-index-index .block-products-list .product-image-wrapper{
  display:flex!important;align-items:center;justify-content:center;
  width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
  padding:0!important;overflow:visible!important}
.cms-index-index .block-products-list .product-image-photo{
  position:static!important;width:auto!important;height:auto!important;
  max-width:100%!important;max-height:100%!important;object-fit:contain;margin:0!important}

/* Wishlist / compare overlay and colour swatches: noise on a merchandising row. */
.cms-index-index .block-products-list .wlist-cpare-rw,
.cms-index-index .block-products-list .actions-secondary,
.cms-index-index .block-products-list [class*="swatch-opt-"]{display:none!important}

/* ---- stock badge ------------------------------------------------------
   Magento renders <div class="stock available|unavailable"><span>In stock</span></div> as the
   FIRST child of .product-item-info, before the photo, and the theme sets that span to
   display:none. Both have to be undone: the span made visible, the div lifted over the photo.

   NOTE ON COLOUR: on this store "unavailable" means Special Order and the card still carries
   a working Add to Cart button, so it is amber, not red, and the card is not dimmed. Calling
   a buyable product "out of stock" would be a lie. */
.cms-index-index .block-products-list .product-item-info > .stock{
  position:absolute;top:9px;left:9px;z-index:2;margin:0;width:auto;height:auto;
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 8px;border-radius:4px;line-height:1}
.cms-index-index .block-products-list .product-item-info > .stock span{
  display:inline!important;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.cms-index-index .block-products-list .product-item-info > .stock.available{
  background:#e7f4ec;color:#1c6b3c;border:1px solid #c3e2d0}
.cms-index-index .block-products-list .product-item-info > .stock.unavailable{
  background:#fdf1e3;color:#8a5312;border:1px solid #f0dcc1}

/* ---- card body --------------------------------------------------------
   The AUTO MARGIN LIVES ON .product-item-inner, not on the price box. Bottom-aligning the
   price looked right until a card carried a strikethrough "Regular price" line, which is a
   different height and shoved that card's button out of line with its neighbours. Aligning
   the BUTTON is what the eye actually reads across a row. */
.cms-index-index .block-products-list .product-item-details{
  display:flex;flex-direction:column;flex:1 1 auto;padding:15px 16px 16px;order:2;
  text-align:left!important}
.cms-index-index .block-products-list .product-item-name{margin:0 0 12px;text-align:left!important}
.cms-index-index .block-products-list .product-item-link{
  font-size:14px;font-weight:700;line-height:1.34;letter-spacing:-.01em;color:#101114;
  text-decoration:none;text-align:left!important;min-height:0!important;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cms-index-index .block-products-list .product-item-info:hover .product-item-link{color:#b61a1f}

.cms-index-index .block-products-list .price-box{margin:0 0 12px;padding:0;text-align:left!important}
.cms-index-index .block-products-list .price-box .price{
  font-size:19px;font-weight:900;letter-spacing:-.02em;color:#101114;line-height:1}
.cms-index-index .block-products-list .price-box .price-label{
  display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#8a929b;margin-bottom:4px;white-space:nowrap}
.cms-index-index .block-products-list .price-box .old-price .price{
  font-size:14px;color:#8a929b;font-weight:700}
/* "As low as" and "Regular price" wrap to two lines in a 178px card and shove the layout. */
.cms-index-index .block-products-list .price-box .price-label,
.cms-index-index .block-products-list .price-box .old-price .price-label{white-space:nowrap}

/* ---- add to cart: the reason we kept the widget ----------------------- */
.cms-index-index .block-products-list .product-item-inner{
  margin:auto 0 0;position:static;border:0;box-shadow:none;background:none}
.cms-index-index .block-products-list .product-item-actions{margin:0;display:block}
.cms-index-index .block-products-list .product-item-actions .actions-primary{display:block;width:100%}
.cms-index-index .block-products-list button.action.tocart{
  display:flex;align-items:center;justify-content:center;width:100%;height:42px;padding:0 14px;
  background:#101318;color:#fff;border:1px solid #101318;border-radius:6px;
  font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  transition:background .15s,border-color .15s}
.cms-index-index .block-products-list button.action.tocart:hover{
  background:#b61a1f;border-color:#b61a1f;color:#fff}

/* ---- the widget's own View All link ---------------------------------- */
.cms-index-index .cms-product-list.custom .action-rw{
  max-width:1240px!important;margin:24px auto 0!important;padding:0 22px!important;text-align:left!important}
.cms-index-index .cms-product-list.custom .action-rw a{
  display:inline-flex!important;align-items:center;height:44px;padding:0 20px;
  background:#101318!important;color:#fff!important;border:0!important;border-radius:6px;
  font-size:12px!important;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none!important;transition:background .15s}
.cms-index-index .cms-product-list.custom .action-rw a:hover{background:#b61a1f!important;color:#fff!important}

@media (max-width:940px){
  .cms-index-index .block-products-list .products-grid .product-items{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .cms-index-index .cms-product-list.custom{padding:36px 0 42px}
  .cms-index-index .block.widget.block-products-list,
  .cms-index-index .cms-product-list.custom .action-rw{padding-left:16px!important;padding-right:16px!important}
  .cms-index-index .block-products-list .products-grid .product-items{gap:12px}
  .cms-index-index .block-products-list .product-item-link{font-size:13px}
  .cms-index-index .block-products-list .price-box .price{font-size:17px}
  .cms-index-index .block-products-list .product-item-details{padding:13px 13px 14px}
}