/* -------------------------------------------------------------------
   Steel Products page - Updated CSS
   Backwards-compatible: maps old BEM selectors to new SiteOrigin template
   - Keeps your original tokens and responsive breakpoints
   - Adds mappings: 
     .steel-product__image  -> .steel-product-thumb
     .steel-product__img    -> .steel-product-thumb img
     .steel-product__content -> .steel-product-content
     .steel-product__title  -> .steel-product-title
     .steel-product__description -> .steel-product-excerpt
     .steel-products__divider -> .product-divider-widget
     .steel-products__subtitle -> .product-subtitle
   ------------------------------------------------------------------- */

/* ensure hover/focus also won’t show underline */
.steel-product-title a:hover,
.steel-product-title a:focus {
  text-decoration: none !important;
}
.post-loop-widget {
 margin-top: 60px;
}

@media (max-width: 767px) {
  #pl-585 .so-panel {
    margin-bottom: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  #pl-585 .so-panel {
    margin-bottom: 0 !important;
  }
}

.products-page-row {
  --product-image-height: 260px;
  /* default (will increase at larger breakpoints) */
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  padding: var(--section-padding-y) var(--section-padding-x);
}

/* Container constraints (scoped) */
.steel-products-page .container,
.products-page-row .container {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-x, 20px);
  padding-right: var(--container-padding-x, 20px);
}

/* Header */
.steel-products__header {
  margin-bottom: var(--space-lg);
  max-width: 980px;
}

/* product title (kept same) */
.product-title {
  margin: 0 0 calc(var(--space-sm) / 2) 0;
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-primary);
  text-transform: lowercase;
  font-size: var(--hero-title-fs);
  line-height: var(--hero-title-lh);
  letter-spacing: -0.02em;
}

/* Divider mapping: old selector + new widget class */
.steel-products__divider,
.product-divider-widget {
  margin: calc(var(--space-sm) / 2) 0;
}

.steel-products__divider img,
.product-divider-widget img,
.product-divider-widget .so-widget-image {
  display: block;
  width: min(160px, 28%);
  height: auto;
}

.product-subtitle {
  margin: 0;
  color: var(--color-secondary);
  font-size: calc(var(--hero-subtitle-fs) - 0.5rem);
  line-height: var(--hero-subtitle-lh);
  font-weight: 400;
}

/* Product list wrapper */
.steel-products__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxl);
}

/* Each product row: grid so we can swap image/content for even rows */
.steel-product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
  grid-template-areas: "image content";
  width: 100%;
}

/* Image area - mapping old -> new */
.steel-product__image,
.steel-product-thumb {
  grid-area: image;
}

/* image element styling - map both old and new selectors */
.steel-product__img,
.steel-product-thumb img,
.steel-product-thumb>a>img,
.steel-product-thumb img.attachment-medium {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  border: 0;
}

/* Content area mapping */
.steel-product__content,
.steel-product-content {
  grid-area: content;
  max-width: 720px;
  /* prevents very long line lengths on wide displays */
}

/* Product title and description mapping */
.steel-product-title {
  margin: 0 0 calc(var(--space-sm) / 2) 0;
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-secondary);
  font-size: var(--section-title-fs);
  line-height: var(--section-title-lh);
}

.steel-product__title a,
.steel-product-title a {
  color: inherit;
  text-decoration: none;
}

.steel-product__title a:hover,
.steel-product-title a:hover {
  text-decoration: underline;
}

.steel-product-excerpt p {
  margin: 1.5rem 0 1.5rem 0;
  color: var(--color-text);
  font-size: var(--section-para-fs);
  line-height: var(--section-para-lh);
}

/* CTA button (uses your --btn tokens) - mapping preserved */
.steel-product__button {
  background-color: var(--color-primary);
  color: white;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size);
  line-height: var(--btn-line-height);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: var(--btn-gap);
  ;
  text-decoration: none;
  width: fit-content;
  transition: background 0.3s ease;
}

.steel-product__button:hover,
.steel-product__button:focus {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  opacity: var(--btn-opacity, 1);
}

.steel-product__button:focus {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  outline-offset: 2px;
}

/* Button arrow (svg/img) mapping */
.steel-product__button-arrow {
  width: var(--btn-arrow-size);
  height: auto;
  display: inline-block;
  margin-left: var(--btn-arrow-offset-x);
  transition: transform .25s ease;
}

/* Empty state */
.steel-products__empty {
  padding: var(--space-md);
  color: var(--color-muted);
  font-size: var(--section-para-desktop);
}

/* -------------------------------------------------------------------
       RESPONSIVE ADJUSTMENTS
       - Tablet and small laptops stack into single column
       - Font-size variables are taken from variables.css tokens
       ------------------------------------------------------------------- */

/* Medium Laptop (1280–1439px) */
@media (min-width: 1280px) and (max-width: 1439px) {

  .steel-products-page,
  .products-page-row {
    --product-image-height: 320px;
  }

  .steel-product-excerpt {
    margin: 2.5rem 0 2.5rem 0;
  }
}

/* Standard Laptop (1440–1599px) - matches homepage scale */
@media (min-width: 1440px) and (max-width: 1599px) {

  .steel-products-page,
  .products-page-row {
    --product-image-height: 340px;
    padding-left: var(--section-padding-x);
    padding-right: var(--section-padding-x);
  }
}

/* Large Desktop (1600–1919px) */
@media (min-width: 1600px) and (max-width: 1919px) {

  .steel-products-page,
  .products-page-row {
    --product-image-height: 380px;
    padding: var(--section-padding-y) var(--section-padding-x);
  }
}

/* Wide Desktop (1920–2499px) */
@media (min-width: 1920px) and (max-width: 2499px) {

  .steel-products-page,
  .products-page-row {
    --product-image-height: 440px;
    padding-left: var(--section-padding-x);
    padding-right: var(--section-padding-x);
  }

  .steel-product__content,
  .steel-product-content {
    max-width: 880px;
  }
}

/* Ultra-wide (>=2500px) */
@media (min-width: 2500px) {

  .steel-products-page,
  .products-page-row {
    --product-image-height: 520px;
    padding-left: var(--section-padding-x);
    padding-right: var(--section-padding-x);
  }

  .steel-product__content,
  .steel-product-content {
    max-width: 980px;
  }
}

/* Small visual polish */
.steel-product+.steel-product {
  margin-top: var(--space-lg);
}

/* =========================================================
       Tablet & small-laptop optimization
       - Main tablet range: 768px — 1023px (covers iPad / Android tablets)
       - Small special override for iPad 820-ish (800–840px)
       - iPad Pro / small laptops: 1024px — 1279px
       ========================================================= */

/* Base tablet rules */
@media (min-width: 768px) and (max-width: 1023px) {

  .steel-products-page,
  .products-page-row {
    padding-top: calc(var(--section-padding-y) * 0.6);
    padding-bottom: calc(var(--section-padding-y) * 0.6);
    padding-left: calc(var(--section-padding-x) * 0.6);
    padding-right: calc(var(--section-padding-x) * 0.6);
    --product-image-size: 317px;
    /* starting base size for tablet */
  }

  /* Header */
  .product-title {
    margin-bottom: calc(var(--space-sm) / 2);
  }

  .steel-products__subtitle,
  .product-subtitle {
    margin-bottom: var(--space-md);
    max-width: 68ch;
    /* prevent overly long lines on wider tablets */
  }

  /* Product row: fixed image column so content won't cross image */
  .steel-product {
    display: grid;
    grid-template-columns: var(--product-image-size) 1fr;
    /* fixed image column + flexible content */
    gap: var(--space-md);
    align-items: start;
    grid-template-areas: "image content";
  }

  /* Keep image left-aligned inside its column and square */
  .steel-product__image,
  .steel-product-thumb {
    grid-area: image;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-right: calc(var(--space-sm) / 2);
  }

  .steel-product__img,
  .steel-product-thumb img {
    width: var(--product-image-size);
    height: var(--product-image-size);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0;
    box-shadow: var(--shadow-sm);
    display: block;
  }

  /* Content */
  .steel-product__content,
  .steel-product-content {
    grid-area: content;
    padding-left: calc(var(--space-sm) / 2);
  }

  .steel-product__title,
  .steel-product-title {
    margin-top: 0;
  }

  .steel-product-excerpt p {
    margin: 15px 0 15px 0;
    overflow-wrap: break-word;
  }

  /* Prevent content overflow on narrow tablets */
  .steel-product__content,
  .steel-product__description,
  .steel-products__subtitle,
  .product-subtitle {
    word-break: break-word;
    hyphens: auto;
  }
}

/* small tweak for iPad 820-ish (narrower or special density tablets) */
@media (min-width: 800px) and (max-width: 840px) {

  .steel-products-page,
  .products-page-row {
    --product-image-size: 300px;
  }

  .steel-product {
    gap: calc(var(--space-sm) * 1);
  }
}

/* larger tablet / iPad Pro / small laptop view (1024px — 1279px) */
/* keep two columns but increase image size and spacing slightly (closer to desktop) */
@media (min-width: 1024px) and (max-width: 1279px) {

  .steel-products-page,
  .products-page-row {
    padding-top: calc(var(--section-padding-y) * 0.75);
    padding-bottom: calc(var(--section-padding-y) * 0.75);
    padding-left: calc(var(--section-padding-x) * 0.75);
    padding-right: calc(var(--section-padding-x) * 0.75);
    --product-image-size: 340px;
    /* larger for iPad Pro */
  }

  .steel-product {
    grid-template-columns: var(--product-image-size) 1fr;
    gap: var(--space-lg);
    align-items: center;
  }

  .steel-product__img,
  .steel-product-thumb img {
    width: var(--product-image-size);
    height: var(--product-image-size);
  }

  .steel-product-excerpt {
    margin: 0;
  }

  .steel-product-excerpt p{
    margin: 1.1rem 0 1.1rem 0;
  }
}

/* extra safety: if viewport gets narrow inside these ranges, ensure content wraps and doesn't overlap */
@media (min-width: 768px) and (max-width: 1279px) {

  .steel-product__content,
  .steel-product-content {
    min-width: 0;
    /* allows flex/grid children to shrink properly */
  }

  .steel-product__title,
  .steel-product-title,
  .steel-product__description,
  .steel-product-excerpt {
    max-width: 100%;
  }
}

/* =========================================================
       Mobile Optimization (≤ 767px)
       ========================================================= */
@media (max-width: 767px) {

  .steel-products-page,
  .products-page-row {
    padding: var(--section-padding-y) var(--section-padding-x);
    --product-image-size: 100%;
    /* allow full width */
  }

  /* Header */
  .product-title {
    margin-bottom: var(--space-sm);
    text-align: left;
  }

  .steel-products__divider,
  .product-divider-widget {
    margin: var(--space-xs) 0;
  }

  .steel-products__divider img,
  .product-divider-widget img,
  .product-divider-widget .so-widget-image {
    width: 120px;
    height: auto;
  }

  .steel-products__subtitle,
  .product-subtitle {
    margin-bottom: var(--space-md);
  }

  /* Product list stacked */
  .steel-product {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
  }

  /* Image */
  .steel-product__image,
  .steel-product-thumb {
    width: 100%;
  }

  .steel-product__img,
  .steel-product-thumb img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0;
    box-shadow: var(--shadow-sm);
  }

  /* Content */
  .steel-product__content,
  .steel-product-content {
    padding: 0;
    text-align: left;
  }

  .steel-product__title,
  .steel-product-title {
    margin: var(--space-xs) 0;
  }

  .steel-product__description,
  .steel-product-excerpt p {
    margin: 15px;
    color: var(--color-text);
  }

  /* Empty state */
  .steel-products__empty {
    text-align: center;
    font-size: var(--section-para-mobile);
    color: var(--color-muted);
  }
}













/* --- Figma-aligned refinement using existing variables --- */

/* Base desktop (≥1280px) */
@media (min-width: 1280px) {
  .steel-products-page,
  .products-page-row {
    --product-image-width: 492px;
    --product-content-width: 737px;
  }

  .steel-product {
    grid-template-columns: var(--product-image-width) 1fr;
    gap: var(--space-lg);
    align-items: center;
  }

  .steel-product-thumb img {
    width: var(--product-image-width) !important;
    height: auto !important;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  .steel-product-content {
    max-width: var(--product-content-width);
  }
}

/* Large desktop (1600–1919px) */
@media (min-width: 1600px) and (max-width: 1919px) {
  .steel-products-page,
  .products-page-row {
    --product-image-width: 500px;
    --product-content-width: 760px;
  }
}

/* Wide desktop (1920–2499px) */
@media (min-width: 1920px) and (max-width: 2499px) {
  .steel-products-page,
  .products-page-row {
    --product-image-width: 520px;
    --product-content-width: 880px;
  }
}

/* Ultra-wide (≥2500px) */
@media (min-width: 2500px) {
  .steel-products-page,
  .products-page-row {
    --product-image-width: 520px; /* lock max */
    --product-content-width: 980px;
  }
}