/* scope: body.ProductDetails */
/* Product detail, both price states (wires product-detail, product-detail-2). Owner: agent product. Every selector must start with the scope above;
   _tools/css_scope_check.py fails the sign-off otherwise. Responsive rules live here too.
   The live product page renders Files/ThreeColumns.html. Its PricingArea closes one <div> too many, so the
   browser puts every buy-box block (price, quantity, item number, tabs, recently viewed) straight into the
   photo row; the layout is one grid on that row, the buy column's wrappers are display: contents. */

body.ProductDetails { background: var(--msi-surface-2); }

/* the page draws its own full-bleed band, so the content column is capped per block, as on the homepage */
body.ProductDetails .LayoutMiddle.container {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
body.ProductDetails .LayoutMiddle.container > .row { margin-left: 0; margin-right: 0; }
body.ProductDetails .LayoutMiddle .LayoutContent { padding-left: 0; padding-right: 0; }

/* --- breadcrumb: wire 741:823 ------------------------------------------------
   The trail's " > " separators are text; they go to font-size 0 and each crumb after the first draws the
   wire's 16px chevron in its 32px lead. The last crumb is the product name (markup added in ThreeColumns). */
body.ProductDetails .LayoutContentInner > .breadcrumb {
  max-width: calc(var(--msi-content) + var(--msi-gutter) * 2);
  margin: 0 auto;
  /* the wire's 24 below a 196 header; the shared header renders 197 */
  padding: 23px var(--msi-gutter) 0;
  background: none;
  border-radius: 0;
  display: flex;
  align-items: flex-start;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
  overflow: hidden;
}
body.ProductDetails .breadcrumb #lblCategoryTrail { flex: none; }
body.ProductDetails .breadcrumb #lblCategoryTrail a,
body.ProductDetails .breadcrumb .msi-pd-crumb {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-family: var(--msi-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--msi-ink-2);
  text-decoration: none;
}
body.ProductDetails .breadcrumb #lblCategoryTrail a + a,
body.ProductDetails .breadcrumb .msi-pd-crumb { margin-left: 32px; }
body.ProductDetails .breadcrumb #lblCategoryTrail a + a::before,
body.ProductDetails .breadcrumb .msi-pd-crumb::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 5px;
  width: 16px;
  height: 16px;
  background: url("../images/product/crumb-chevron.svg") center / 16px no-repeat;
}
/* the current crumb's name stops at 360 (834: 280, 440: the row's end) with an ellipsis (Diego 2026-09-23: the wire's
   175 cut real names mid-letter); the 24px lead holds the chevron, so the clip does not cut it */
body.ProductDetails .breadcrumb .msi-pd-crumb {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(360px + 24px);
  margin-left: 8px;
  padding-left: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.ProductDetails .breadcrumb .msi-pd-crumb::before { left: 0; }
body.ProductDetails .breadcrumb .msi-pd-crumb:empty { display: none; }
/* the store's preview wraps the name in a block div, which stops the ellipsis; the public page has no wrapper */
body.ProductDetails .breadcrumb .msi-pd-crumb > .ac-content-edit-product-name { display: inline; }
body.ProductDetails .breadcrumb #lblCategoryTrail a:hover { color: var(--msi-ink); text-decoration: underline; }

/* --- the product grid: wire 741:834 ------------------------------------------
   Tracks: gutter | gallery 600 | gap 56 | buy box 624 | gutter. The buy blocks auto-place down column 4
   in `order`; the gallery spans those rows plus a 1fr filler, so a tall gallery grows the filler and
   never spreads the buy blocks apart. Row 13 is the recently-viewed band, full bleed. */
body.ProductDetails .LayoutContentInner > [itemscope] > .clearfix > .col-sm-8 {
  float: none;
  width: auto;
  padding: 0;
}
body.ProductDetails .LayoutContentInner > [itemscope] > .clearfix > .col-sm-8 > .row {
  display: grid;
  grid-template-columns: minmax(var(--msi-gutter), 1fr) minmax(0, 600px) 56px minmax(0, 624px) minmax(var(--msi-gutter), 1fr);
  grid-template-rows: repeat(11, auto) 1fr auto;
  align-items: start;
  margin: 32px 0 0;
  /* !important: `.pad-20` / `.pad-b-only` (deputy.css:34, :1032) put 20px under the row. The bottom
     40.5 plus the footer's own 80 is the wire's 120.5 from the band to the footer. */
  padding: 0 0 40.5px !important;
}
body.ProductDetails .LayoutContentInner > [itemscope] > .clearfix > .col-sm-8 > .row::before,
body.ProductDetails .LayoutContentInner > [itemscope] > .clearfix > .col-sm-8 > .row::after { display: none; }
/* the defaults carry the specificity of one class, so every block rule below overrides them */
body.ProductDetails :where([itemscope] > .clearfix > .col-sm-8 > .row) > *,
body.ProductDetails :where([itemscope] > .clearfix > .col-sm-8 > .row > .col-sm-6:not(.thumbnail)) > *,
body.ProductDetails :where([itemscope] > .clearfix > .col-sm-8 > .row > .col-sm-4) > * {
  grid-column: 4;
  order: 8;
  float: none;
  width: auto;
  min-width: 0;
  margin: 16px 0 0;
  padding: 0;
}
body.ProductDetails [itemscope] > .clearfix > .col-sm-8 > .row > .col-sm-6:not(.thumbnail),
body.ProductDetails [itemscope] > .clearfix > .col-sm-8 > .row > .col-sm-4 { display: contents; }

/* blocks the wire does not draw: hidden, never removed (Diego: always follow Figma) */
body.ProductDetails [itemscope] .row > div:empty,
body.ProductDetails [itemscope] .row > div:has(> .ProductDetails > #dvProductVariations):not(:has(select, input, textarea, .Variant, img)),
body.ProductDetails [itemscope] .col-sm-4 > .ProductDetailsManufacturerName,
body.ProductDetails #dvShippingEstimationLink,
body.ProductDetails #lblProductTimeFrame,
body.ProductDetails #dvProductQuantityInStock:not(:has(*)),
body.ProductDetails #tabs > #reviewtab,
body.ProductDetails .tab-content > #reviews,
body.ProductDetails .msi-pd-desc:empty,
body.ProductDetails .msi-pd-label,
body.ProductDetails .msi-pd-price .ProductDetailsPriceLabel,
body.ProductDetails .msi-pd-was:empty,
body.ProductDetails .msi-pd-pricing > #dvProductPricing:not(:has(.msi-pd-retail)),
body.ProductDetails .msi-pd-pricing > div:empty,
body.ProductDetails .msi-pd-pricing > div:has(> .ProductDetailsDiscountList:empty),
body.ProductDetails .msi-pd-pricing > small:not(:has(div:not(:empty))) { display: none; }

/* --- gallery: wire 741:835 ---------------------------------------------------- */
body.ProductDetails [itemscope] .row > .col-sm-6.thumbnail {
  grid-column: 2;
  grid-row: 1 / 13;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  line-height: normal;
  overflow: visible;
}
/* main photo panel 741:836: 600x565, #f8f9fb, 1px #eee, radius 56; photo 403x413 at 98,76 */
body.ProductDetails .row > .thumbnail > a.main-product-photo {
  height: 565px;
  background: var(--msi-surface);
  border: 1px solid #eee;
  border-radius: 56px;
  overflow: hidden;
}
body.ProductDetails .row > .thumbnail > a.main-product-photo > img:not(.zoomImg) {
  position: absolute;
  left: 97px;
  top: 75px;
  width: 403px;
  height: 413px;
  max-width: none;
  object-fit: contain;
  /* the store's photos are JPEGs on white; multiply lets the panel colour through */
  mix-blend-mode: multiply;
}
/* thumbnails 741:839: four 141x132 tiles, gap 12, 16 under the photo. product-page.js runs bxSlider on
   the list, which writes widths, float and a transform inline; !important only against those inline
   styles (nothing else can beat them), and its clones and pager are hidden. */
body.ProductDetails .row > .thumbnail > .pad-20 {
  /* !important: `.pad-20` / `.no-pad-lr` (deputy.css:34, :1029) */
  padding: 16px 0 0 !important;
}
body.ProductDetails .row > .thumbnail .bx-wrapper {
  max-width: none !important;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
}
body.ProductDetails .row > .thumbnail .bx-viewport {
  height: auto !important;
  overflow: visible !important;
  left: 0;
  border: 0;
  box-shadow: none;
  background: none;
}
body.ProductDetails .row > .thumbnail .bx-controls,
body.ProductDetails .row > .thumbnail .product-thumbnails > li.bx-clone { display: none; }
body.ProductDetails .row > .thumbnail .product-thumbnails {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: auto !important;
  transform: none !important;
  margin: 0;
  list-style: none;
}
body.ProductDetails .row > .thumbnail .product-thumbnails > li {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
body.ProductDetails .row > .thumbnail .product-thumbnails a.thumbnail {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 132px;
  margin: 0;
  padding: 0;
  background: var(--msi-surface);
  border: 1px solid #eee;
  border-radius: 40px;
  overflow: hidden;
}
body.ProductDetails .row > .thumbnail .product-thumbnails a.thumbnail.active { border-color: var(--msi-ink-2); }
body.ProductDetails .row > .thumbnail .product-thumbnails img {
  width: 73px;
  height: 73px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* --- buy box: wire 741:852 --------------------------------------------------- */
/* stock row 741:856: 8px dot, 6 gap, "In Stock" 600 14/1.6 rgba(0,0,0,.25). The platform prints
   "Availability: <status><br><time frame>"; the label and the time frame go. */
body.ProductDetails [itemscope] .col-sm-4 > div:has(> #dvProductAvailability) { order: 1; margin-top: 0; }
body.ProductDetails #dvProductAvailability {
  /* !important: `.pad-10` / `.no-pad-t` (deputy.css:20, :7) */
  padding: 0 !important;
}
body.ProductDetails #lblAvailability { display: flex; font-size: 0; line-height: 0; }
body.ProductDetails #lblAvailability br { display: none; }
body.ProductDetails #lblProductStatus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--msi-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  color: rgba(0, 0, 0, .25);
}
/* style.css:262 joins status and time frame with " - "; the time frame is hidden, so is the joint */
body.ProductDetails #lblProductStatus::after { content: none; }
body.ProductDetails #lblProductStatus::before {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  background: url("../images/product/stock-dot.svg") center / 8px no-repeat;
}
/* stock dot states (msi-menu.js, shared with the product-list and search cards): Back Order amber, any other status
   but In Stock red */
body.ProductDetails #lblProductStatus.msi-stock--back::before {
  background: radial-gradient(circle closest-side, var(--msi-orange) 66.7%, rgba(255, 154, 0, .2) 67%);
  border-radius: 50%;
}
body.ProductDetails #lblProductStatus.msi-stock--out::before {
  background: radial-gradient(circle closest-side, var(--msi-red) 66.7%, rgba(255, 5, 5, .2) 67%);
  border-radius: 50%;
}

/* title 741:861: Inter Display Medium 40/1.3 #2c3a43 (Inter 500), 8 under the stock row */
body.ProductDetails [itemscope] .col-sm-6 > .page-header {
  order: 2;
  /* !important: the element carries `.no-m-t { margin-top: 0 !important }` (deputy.css:296) */
  margin: 8px 0 0 !important;
  padding: 0;
  border: 0;
}
body.ProductDetails [itemscope] .page-header > .pad-10 {
  /* !important: `.pad-10` / `.no-pad-tb` (deputy.css:20, :1030) */
  padding: 0 !important;
}
body.ProductDetails h1.ProductDetailsProductName { margin: 0; }
body.ProductDetails h1.ProductDetailsProductName > small,
body.ProductDetails h1.ProductDetailsProductName > span {
  display: block;
  font-family: var(--msi-font);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--msi-ink);
}

/* item row 741:862: label Inter 500 16/1.6 #000, value 600 #3d90ee, gap 8 */
body.ProductDetails [itemscope] .col-sm-4 > div:has(> #dvProductItemNr) { order: 3; }
body.ProductDetails #dvProductItemNr {
  display: flex;
  align-items: center;
  gap: 8px;
  /* !important: `.pad-10` / `.no-pad-t` (deputy.css:20, :7) */
  padding: 0 !important;
  font-family: var(--msi-font);
  font-size: 16px;
  line-height: 1.6;
}
body.ProductDetails #dvProductItemNr #lblItemNrLabel { font-weight: 500; color: #000; }
body.ProductDetails #dvProductItemNr strong { font-weight: 600; color: var(--msi-blue-bright); }

/* description 741:865: tab 1's leading paragraph, moved here by the script in ThreeColumns */
body.ProductDetails [itemscope] .col-sm-6 > .msi-pd-desc { order: 4; }
body.ProductDetails .msi-pd-desc > p {
  margin: 0;
  font-family: var(--msi-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--msi-ink-2);
}

/* price 741:866 ("Login for Price", 500 16/1.2 #ff9a00) and, when prices show, 741:1124:
   the price 500 32/1.2 #2c3a43 then the was price 500 16/1.2 #8c989e struck, gap 8, centred */
body.ProductDetails [itemscope] .col-sm-6 > .msi-pd-pricing {
  order: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
body.ProductDetails .msi-pd-pricing > * { margin: 0; padding: 0; }
body.ProductDetails .msi-pd-pricing > #dvProductPricing {
  order: 3;
  /* !important: `.pad-10` / `.no-pad-t` (deputy.css:20, :7) */
  padding: 0 !important;
}
body.ProductDetails .msi-pd-pricing > .msi-pd-price {
  order: 1;
  margin: 0;
  font-family: var(--msi-font);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--msi-ink);
}
body.ProductDetails .msi-pd-pricing > .msi-pd-price:has(a) { font-size: 16px; }
body.ProductDetails .msi-pd-price a {
  font-weight: 500;
  color: var(--msi-orange);
  text-decoration: none;
}
body.ProductDetails .msi-pd-price a:hover { text-decoration: underline; }
body.ProductDetails .msi-pd-pricing > .msi-pd-was { order: 2; }
body.ProductDetails .msi-pd-was,
body.ProductDetails .msi-pd-retail {
  font-family: var(--msi-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: #8c989e;
  text-decoration: line-through;
}

/* variant controls, when a product has them, sit under the price */
body.ProductDetails [itemscope] .row > div:has(> .ProductDetails > #dvProductVariations) { order: 6; }
body.ProductDetails [itemscope] .row > div > .ProductDetails.pad-10 {
  /* !important: `.pad-10` / `.no-pad-t` (deputy.css:20, :7) */
  padding: 0 !important;
}

/* actions 741:867: stepper and Add to Cart, equal halves, gap 16, 67 tall, 48 under the price */
body.ProductDetails [itemscope] .row > div:has(> #dvProductQuantity) { order: 7; margin-top: 48px; }
body.ProductDetails #dvProductQuantity {
  display: flex;
  align-items: stretch;
  gap: 16px;
  height: 67px;
  /* !important: `.pad-10` / `.no-pad-t` (deputy.css:20, :7) */
  padding: 0 !important;
}
body.ProductDetails #dvProductQuantity > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* the stepper 741:868: QtySpinner.js wraps the input in span.qty-spinner and appends two arrow links,
   styling them inline (left:100%, width 25, margin). The wire draws a plus at the left and a minus at
   the right; up (increment) becomes the plus, down the minus. !important only against those inline
   styles and `.in-block { display: inline-block !important }` (deputy.css:1104). */
body.ProductDetails #dvProductQuantity > .qty-spinner,
body.ProductDetails #dvProductQuantity > input.ProductDetailsQuantityTextBox {
  box-sizing: border-box;
  /* the wire splits the row 1px in the stepper's favour at every width (305/303, 370/368, 189/187); fixed
     halves rather than shrink, which weighs the pill's padding */
  flex: 0 0 calc(50% - 7px);
  min-width: 0;
}
body.ProductDetails #dvProductQuantity > .qty-spinner {
  display: block !important;
  margin: 0 !important;
  background: var(--msi-white);
  border: 1px solid rgba(38, 45, 49, .2);
  border-radius: var(--msi-r-pill);
}
/* the pill draws the field, so it shows the text-field focus look */
body.ProductDetails #dvProductQuantity > .qty-spinner:focus-within {
  border-color: var(--msi-blue-bright);
  box-shadow: 0 0 0 3px rgba(61, 144, 238, 0.15);
}
body.ProductDetails #dvProductQuantity input.ProductDetailsQuantityTextBox {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 49px;
  border: 0;
  border-radius: var(--msi-r-pill);
  background: transparent;
  box-shadow: none;
  text-align: center;
  font-family: var(--msi-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--msi-ink);
}
body.ProductDetails #dvProductQuantity > input.ProductDetailsQuantityTextBox {
  background: var(--msi-white);
  border: 1px solid rgba(38, 45, 49, .2);
}
body.ProductDetails #dvProductQuantity .qty-spinner > a {
  top: 50% !important;
  bottom: auto !important;
  width: 24px !important;
  height: 24px;
  margin: -12px 0 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  background: center / 24px no-repeat;
}
body.ProductDetails #dvProductQuantity .qty-spinner > a::before { display: none; }
body.ProductDetails #dvProductQuantity .qty-spinner > a.icon-chevron-up {
  left: 24px !important;
  background-image: url("../images/product/qty-plus.svg");
}
body.ProductDetails #dvProductQuantity .qty-spinner > a.icon-chevron-down {
  left: auto !important;
  right: 24px;
  background-image: url("../images/product/qty-minus.svg");
}
/* Add to Cart 741:875: #ff9a00 pill, label Inter Display SemiBold 16/1.2 #2c3a43 */
body.ProductDetails #dvProductQuantity > input[type="submit"] {
  box-sizing: border-box;
  flex: 0 0 calc(50% - 9px);
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-radius: var(--msi-r-pill);
  background: var(--msi-orange);
  box-shadow: none;
  font-family: var(--msi-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--msi-ink);
  text-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.ProductDetails #dvProductQuantity > input[type="submit"]:hover,
body.ProductDetails #dvProductQuantity > input[type="submit"]:focus-visible { background: var(--msi-orange-dark); }

/* --- tabs card: wire 741:877 --------------------------------------------------
   One white card, 1px rgba(38,45,49,.2), radius 32, padding 24, drawn by the tab list (top half) and the
   panes (bottom half). Two equal tabs, padding 0 16 16; the active one carries a 2px #2c3a43 rule. */
body.ProductDetails [itemscope] .row > ul#tabs {
  order: 9;
  display: flex;
  align-items: center;
  margin-top: 47px;
  padding: 24px 24px 0;
  background: var(--msi-white);
  border: 1px solid rgba(38, 45, 49, .2);
  border-bottom: 0;
  border-radius: 32px 32px 0 0;
}
body.ProductDetails ul#tabs::before,
body.ProductDetails ul#tabs::after { display: none; }
body.ProductDetails ul#tabs > li {
  flex: 1 1 0;
  min-width: 0;
  float: none;
  margin: 0;
}
body.ProductDetails ul#tabs > li > a {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0 16px 16px;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--msi-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--msi-ink-2);
  white-space: nowrap;
}
body.ProductDetails ul#tabs > li > a:hover,
body.ProductDetails ul#tabs > li > a:focus { background: none; border: 0; color: var(--msi-ink); }
body.ProductDetails ul#tabs > li.active > a,
body.ProductDetails ul#tabs > li.active > a:hover,
body.ProductDetails ul#tabs > li.active > a:focus {
  border: 0;
  border-bottom: 2px solid var(--msi-ink);
  background: none;
  color: var(--msi-ink);
}
/* Bootstrap 3.2 `a:focus { outline: 5px auto; outline-offset: -2px }` drew a square ring over the underline
   after a click. Pointer focus shows nothing; the keyboard ring sits on ::after so a radius cannot round
   the underline's ends. */
body.ProductDetails ul#tabs > li > a:focus:not(:focus-visible),
body.ProductDetails ul#tabs > li > a:focus-visible { outline: none; }
body.ProductDetails ul#tabs > li > a:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--msi-r-sm);
  outline: 2px solid var(--msi-blue);
  outline-offset: 2px;
  pointer-events: none;
}
body.ProductDetails ul#tabs > li.active > a:focus-visible::after { bottom: -2px; }
body.ProductDetails [itemscope] .row > .tab-content {
  order: 10;
  margin-top: 0;
  padding: 32px 24px 24px;
  background: var(--msi-white);
  border: 1px solid rgba(38, 45, 49, .2);
  border-top: 0;
  border-radius: 0 0 32px 32px;
}
body.ProductDetails .tab-content > .tab-pane {
  /* !important: `.pad-20` / `.no-pad-lr` (deputy.css:34, :1029) */
  padding: 0 !important;
  font-family: var(--msi-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--msi-ink-2);
}
body.ProductDetails .tab-content > .tab-pane p,
body.ProductDetails .tab-content > .tab-pane li {
  font-family: var(--msi-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--msi-ink-2);
}
body.ProductDetails .tab-content > .tab-pane ul {
  margin: 0;
  padding-left: 24px;
  list-style: disc;
}
body.ProductDetails .tab-content > .tab-pane > :last-child { margin-bottom: 0; }

/* --- recently viewed: wire 741:885 / 741:886 --------------------------------
   A full-bleed #f8f9fb band, radius 80, 96 under the product; 80 padding; heading row 70 with the
   "View more products" pill; 64 to four 296 cards, gap 32. */
body.ProductDetails [itemscope] .row > .msi-w-recent {
  grid-column: 1 / -1;
  grid-row: 13;
  order: 20;
  margin-top: 96px;
  padding: 80px var(--msi-gutter);
  background: var(--msi-surface);
  border-radius: 80px;
  overflow: hidden;
}
body.ProductDetails [itemscope] .row > .msi-w-recent:not(:has(.msi-recent__card:not(.msi-recent__card--current))) { display: none; }
/* descendant: the theme preview wraps the widget in .ac-drop-target > .ac-widget-wrapper */
body.ProductDetails .msi-w-recent .Control:not(.Control .Control) { margin: 0; padding: 0; }
body.ProductDetails .msi-recent {
  display: flex;
  flex-direction: column;
  max-width: var(--msi-content);
  margin: 0 auto;
}
body.ProductDetails .msi-recent__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--msi-s6);
  height: 70px;
}
body.ProductDetails .msi-recent__title {
  margin: 0;
  font-family: var(--msi-font);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  color: #000;
}
body.ProductDetails .msi-recent__title > .ControlHeader {
  font: inherit;
  color: inherit;
  background: none;
  padding: 0;
  margin: 0;
  border: 0;
}
body.ProductDetails .msi-recent__more {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 70px;
  padding: 0 32px;
  border-radius: var(--msi-r-pill);
  background: var(--msi-orange);
  font-family: var(--msi-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--msi-ink);
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.ProductDetails .msi-recent__more::after {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background: url("../images/product/btn-chevron.svg") center / 20px no-repeat;
}
body.ProductDetails .msi-recent__more:hover,
body.ProductDetails .msi-recent__more:focus-visible { background: var(--msi-orange-dark); color: var(--msi-ink); text-decoration: none; }
/* four 296 columns whatever the item count: one viewed product is one card, not a full-width one */
body.ProductDetails .msi-recent__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--msi-s6);
  margin-top: 64px;
}
/* the repeater's row wrapper holds the cards on the store and sits beside them in the harness */
body.ProductDetails .msi-recent__track > .row { display: contents; }
body.ProductDetails .msi-recent__track > .row::before,
body.ProductDetails .msi-recent__track > .row::after { display: none; }
body.ProductDetails .msi-recent__track .msi-recent__card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  float: none;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: var(--msi-s6);
  margin: 0;
  /* !important: `.no-pad-r` (deputy.css:8) is on the card */
  padding: 0 !important;
  border-radius: 40px;
}
/* the store wraps each card's content in the dvControlItem area's div.ControlItem; the harness does not */
body.ProductDetails .msi-recent__card > .ControlItem { display: contents; }
/* the wire draws four; a fifth and later are hidden */
body.ProductDetails .msi-recent__track .msi-recent__card:nth-child(n+5 of .msi-recent__card:not(.msi-recent__card--current)) { display: none; }
/* the product on screen (the ThreeColumns script marks it) */
body.ProductDetails .msi-recent__track .msi-recent__card--current { display: none; }
/* photo tile: 310 tall, white, 1px #eee, radius 40; photo 226x226 at 34,41 inside the border */
body.ProductDetails .msi-recent__card a.thumbnail {
  display: block;
  height: 310px;
  margin: 0;
  padding: 0;
  background: var(--msi-white);
  border: 1px solid #eee;
  border-radius: 40px;
  overflow: hidden;
}
/* the photo sits by margin, not offset, so the tile needs no position and its ::after can cover the whole card */
body.ProductDetails .msi-recent__card a.thumbnail > img {
  display: block;
  width: 226px;
  height: 226px;
  max-width: none;
  max-height: none;
  margin: 41px 0 0 34px;
  object-fit: contain;
  transition: margin .15s ease, width .15s ease, height .15s ease;
}
/* the whole card opens the product: the hover pill is $$PRICE$$, not a link (Diego 2026-09-23, staging);
   a signed-out "Login for Price" link stays above it */
body.ProductDetails .msi-recent__card a.thumbnail::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 40px;
}
body.ProductDetails .msi-recent__card .caption .text-muted a { position: relative; z-index: 2; }
/* the orange hover pill adds to cart (Diego 2026-09-24); signed out it holds the login link instead */
body.ProductDetails .msi-recent__card .caption .text-muted > a.msi-recent__cart { position: absolute; inset: 0; border-radius: inherit; }
body.ProductDetails .msi-recent__card .caption .text-muted:has(a:not(.msi-recent__cart)) > a.msi-recent__cart { display: none; }
body.ProductDetails .msi-recent__card .caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  text-align: left;
}
/* name 600 18/1.6 #000, two lines as drawn; a longer live name ends in an ellipsis */
body.ProductDetails .msi-recent__card .caption > h4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  width: 100%;
  margin: 0;
  font-family: var(--msi-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0;
  color: #000;
}
/* the caption's lines at the wire's rounded heights (22 / 58 / 26), so four stacked cards keep its pitch */
body.ProductDetails .msi-recent__card .caption > .msi-card__stock { height: 22px; }
body.ProductDetails .msi-recent__card .caption > h4 { height: 58px; }
body.ProductDetails .msi-recent__card .caption > .msi-card__item { height: 26px; }
body.ProductDetails .msi-recent__card .caption > .text-muted { display: none; }
body.ProductDetails .msi-recent__arrows { display: none; }

/* hover 741:905: the card becomes one white surface with a soft shadow, the photo grows to 244x250 at
   25,66, and $$PRICE$$ ("Call or Login for Price" logged out) shows as the orange pill 15 in from the
   bottom. Same treatment as the homepage featured card. */
@media (hover: hover) {
  body.ProductDetails .msi-recent__card { transition: background-color .2s ease, box-shadow .2s ease; }
  body.ProductDetails .msi-recent__card:hover {
    background: var(--msi-white);
    box-shadow: inset 0 0 0 1px #eee, 16px 20px 92px -24px rgba(0, 0, 0, .06);
  }
  body.ProductDetails .msi-recent__card:hover a.thumbnail { border-color: transparent; background: transparent; }
  body.ProductDetails .msi-recent__card:hover a.thumbnail > img { margin: 65px 0 0 calc(50% - 123px); width: 244px; height: 250px; }
  body.ProductDetails .msi-recent__card:hover .caption > :not(.text-muted) { visibility: hidden; }
  body.ProductDetails .msi-recent__card:hover .caption > .text-muted {
    position: absolute;
    left: 15px;
    right: 17px;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 24px;
    border-radius: var(--msi-r-pill);
    background: var(--msi-orange);
    font-family: var(--msi-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--msi-ink);
  }
  body.ProductDetails .msi-recent__card:hover .caption > .text-muted::after {
    content: "";
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background: url("../images/product/btn-chevron.svg") center / 20px no-repeat;
  }
  body.ProductDetails .msi-recent__card:hover .caption > .text-muted a { color: inherit; text-decoration: none; }
  body.ProductDetails .msi-recent__card:hover .caption > .text-muted .ProductDetailsPriceLabel { display: none; }
}

/* --- 834 (768-991): one column — wire 741:6636 --------------------------------
   Gallery on top (panel 754x500, tiles 156 tall), the buy box 56 below it, the band 112 under the tabs
   card with 56 padding; the four cards keep their 296 and scroll sideways past the right gutter, with
   the wire's two 56px arrows under them (741:6769). */
@media (max-width: 991px) {
  body.ProductDetails .breadcrumb .msi-pd-crumb { max-width: calc(280px + 24px); }
  body.ProductDetails .LayoutContentInner > [itemscope] > .clearfix > .col-sm-8 > .row {
    grid-template-columns: var(--msi-gutter) minmax(0, 1fr) var(--msi-gutter);
    grid-template-rows: none;
    /* !important: `.pad-20` (deputy.css:34); 32 plus the footer's 80 is the wire's 112 */
    padding-bottom: 32px !important;
  }
  /* the wire's 24.9 below a 151.1 header */
  body.ProductDetails .LayoutContentInner > .breadcrumb { padding-top: 25px; }
  body.ProductDetails :where([itemscope] > .clearfix > .col-sm-8 > .row) > *,
  body.ProductDetails :where([itemscope] > .clearfix > .col-sm-8 > .row > .col-sm-6:not(.thumbnail)) > *,
  body.ProductDetails :where([itemscope] > .clearfix > .col-sm-8 > .row > .col-sm-4) > * { grid-column: 2; }
  body.ProductDetails [itemscope] .row > .col-sm-6.thumbnail { grid-row: 1; }
  body.ProductDetails .row > .thumbnail > a.main-product-photo { height: 500px; }
  body.ProductDetails .row > .thumbnail > a.main-product-photo > img:not(.zoomImg) { left: calc(50% - 202.5px); top: 42px; }
  body.ProductDetails .row > .thumbnail .product-thumbnails a.thumbnail { height: 156px; }
  body.ProductDetails [itemscope] .col-sm-4 > div:has(> #dvProductAvailability) { margin-top: 56px; }
  body.ProductDetails [itemscope] .row > .msi-w-recent {
    grid-row: auto;
    margin-top: 112px;
    padding: 56px var(--msi-gutter);
  }
  body.ProductDetails .msi-recent__track {
    display: flex;
    /* the cards run to the band's right edge, as drawn */
    margin-right: calc(var(--msi-gutter) * -1);
    padding-right: var(--msi-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body.ProductDetails .msi-recent__track::-webkit-scrollbar { display: none; }
  body.ProductDetails .msi-recent__track .msi-recent__card {
    flex: 0 0 296px;
    scroll-snap-align: start;
  }
  body.ProductDetails .msi-recent__arrows {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 56px;
  }
  body.ProductDetails .msi-recent__arrow {
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: center / 56px no-repeat;
    cursor: pointer;
  }
  body.ProductDetails .msi-recent__arrow--prev { background-image: url("../images/product/arrow-prev.svg"); }
  body.ProductDetails .msi-recent__arrow--next { background-image: url("../images/product/arrow-next.svg"); }
}

/* --- 440 (up to 767) — wire 741:3978 -------------------------------------------
   Breadcrumb 14/1.6 without "Home"; panel 392x340 and the 263x270 photo; tiles 86.24 tall, gap 7.84,
   10.45 under the panel; title 32/1.3, description 14/1.6; 32 above the actions, 40 above the tabs card,
   which is 408 wide (16 past the column, as drawn) with content-sized tabs; the band 88 below with radius
   56, a 32px heading, the cards stacked, and "View more products" full width under them. */
@media (max-width: 767px) {
  body.ProductDetails .breadcrumb .msi-pd-crumb { max-width: none; }
  body.ProductDetails .breadcrumb #lblCategoryTrail a,
  body.ProductDetails .breadcrumb .msi-pd-crumb { font-size: 14px; }
  body.ProductDetails .breadcrumb #lblCategoryTrail a:first-child { display: none; }
  body.ProductDetails .breadcrumb #lblCategoryTrail a:first-child + a { margin-left: 0; }
  body.ProductDetails .breadcrumb #lblCategoryTrail a:first-child + a::before { display: none; }
  body.ProductDetails .breadcrumb #lblCategoryTrail a + a::before,
  body.ProductDetails .breadcrumb .msi-pd-crumb::before { top: 3px; }
  body.ProductDetails .LayoutContentInner > .breadcrumb { padding-top: 24px; }
  body.ProductDetails .LayoutContentInner > [itemscope] > .clearfix > .col-sm-8 > .row {
    margin-top: 40px;
    /* !important: `.pad-20` (deputy.css:34); 8 plus the footer's 80 is the wire's 88 */
    padding-bottom: 8px !important;
  }
  body.ProductDetails .row > .thumbnail > a.main-product-photo { height: 340px; }
  body.ProductDetails .row > .thumbnail > a.main-product-photo > img:not(.zoomImg) {
    left: calc(50% - 132.66px);
    top: 34px;
    width: 263.325px;
    height: 269.795px;
  }
  body.ProductDetails .row > .thumbnail > .pad-20 {
    /* !important: `.pad-20` / `.no-pad-lr` (deputy.css:34, :1029) */
    padding: 10.453px 0 0 !important;
  }
  body.ProductDetails .row > .thumbnail .product-thumbnails { gap: 7.84px; }
  body.ProductDetails .row > .thumbnail .product-thumbnails a.thumbnail { height: 86.24px; }
  body.ProductDetails .row > .thumbnail .product-thumbnails img { width: 47px; height: 47px; }
  body.ProductDetails [itemscope] .col-sm-4 > div:has(> #dvProductAvailability) { margin-top: 24.31px; }
  body.ProductDetails h1.ProductDetailsProductName > small,
  body.ProductDetails h1.ProductDetailsProductName > span { font-size: 32px; }
  body.ProductDetails .msi-pd-desc > p { font-size: 14px; }
  body.ProductDetails [itemscope] .row > div:has(> #dvProductQuantity) { margin-top: 32px; }
  body.ProductDetails [itemscope] .row > ul#tabs,
  body.ProductDetails [itemscope] .row > .tab-content { margin-right: -16px; }
  body.ProductDetails [itemscope] .row > ul#tabs { margin-top: 40px; }
  body.ProductDetails ul#tabs > li { flex: none; }
  body.ProductDetails [itemscope] .row > .msi-w-recent {
    margin-top: 88px;
    border-radius: 56px;
  }
  body.ProductDetails .msi-recent__head { display: contents; }
  body.ProductDetails .msi-recent__title { font-size: 32px; }
  body.ProductDetails .msi-recent__track {
    flex-direction: column;
    margin: 40px 0 0;
    padding: 0;
    overflow: visible;
  }
  body.ProductDetails .msi-recent__track .msi-recent__card { flex: none; }
  body.ProductDetails .msi-recent__card a.thumbnail > img { margin-left: calc(50% - 113px); }
  body.ProductDetails .msi-recent__more {
    order: 3;
    width: 100%;
    margin-top: 48px;
  }
  body.ProductDetails .msi-recent__arrows { display: none; }
}

/* below the 440 design the two content-sized tabs outrun the card: the tab list scrolls sideways
   instead of widening the page */
@media (max-width: 439px) {
  body.ProductDetails [itemscope] .row > ul#tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }
  body.ProductDetails [itemscope] .row > ul#tabs::-webkit-scrollbar { display: none; }
}

/* the wire labels the item number "Item:"; the store's label stays in the page, hidden (Diego 2026-09-23) */
body.ProductDetails .msi-pd__label-store { display: none; }