/* ==========================================================================
   SuperPro tab on the Octane consumer site
   Branding aligned with the SuperPro 2025 refresh on the SuperPro main site
   (css/brand-2025.css). All brand rules are scoped to .superpro-tab so they
   never leak into the rest of the Octane consumer site.

   Brand colours:   #004990 (primary blue)  #003366 (navy)  #FFCB05 (yellow)
   Brand font:      Poppins (loaded via Google Fonts; Octane site doesn't
                    ship its own copy and the SuperPro main otf files are
                    behind that site's /fonts directory).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

#superpro-logo {
  max-width: 400px;
  margin: 48px auto 0 auto;
 }

/* Product Listing
   Mobile (base): CSS Grid layout with the photo full-bleed on its own row.
   The 2025 refresh dropped the orange-red row divider, so border-bottom: none.
   Rules are scoped under .superpro-tab so they win over the parent page's
   .fluid rule (clear/float/width:100%/display:block) which gets applied to
   every product card child. */
.superpro-tab .productcontainer {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "number title"
    "photo  photo"
    "desc   desc"
    "attrs  attrs";
  column-gap: 14px;
  row-gap: 10px;
  align-items: center;
  text-align: left;
  padding: 1.5% 0;
  border-bottom: none; }

p.superpronote {
  max-width: 90vw;
  margin: 20px auto;
  color: #000;
  text-align: justify; }

.noborder {
  border: none; }

.superpro-tab .productcontainer:last-child {
  border-bottom: none; }

.superpro-tab .productcontainer.productoption {
  border-bottom: none; }

.superpro-tab .productphoto {
  grid-area: photo;
  width: 100%;
  clear: none;
  margin-left: 0;
  float: none; }

.superpro-tab .productphotocrop {
  width: 100%;
  position: relative;
  aspect-ratio: 4 / 3;
  height: auto;
  overflow: hidden; }

/* The image is wrapped in <a><figure><img></figure></a>. <figure> has a UA
   default margin of 1em 40px which would shrink the image inside the crop;
   <a> is inline by default and won't fill the height. Force both to fill. */
.superpro-tab .productphotocrop > a {
  display: block;
  width: 100%;
  height: 100%; }

.superpro-tab .productphotocrop figure {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: block; }

.superpro-tab .productphotocrop img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  margin: 0;
  display: block; }

.superpro-tab .producttitle {
  grid-area: title;
  width: auto;
  clear: none;
  margin-left: 0;
  margin-top: 0; }

.superpro-tab .producttitle h2 {
  margin: 0;
  display: block; }

.superpro-tab .producttitle h3 {
  margin: 0; }

.superpro-tab .productdescription {
  grid-area: desc;
  width: 100%;
  clear: none;
  margin-left: 0; }

.superpro-tab .productattributes {
  grid-area: attrs;
  width: 100%;
  clear: none;
  margin-left: 0; }

/* 2025: Poppins replaces Oswald, primary blue #004990 replaces #004890 */
.superpro-tab .productnumber {
  grid-area: number;
  width: auto;
  margin-left: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 240%;
  color: #004990;
  text-align: center;
  white-space: nowrap;
  align-self: center; }

.superpro-tab .productoption .productnumber {
  font-size: 180%; }

.bom-stock-indicator {
  width: 3px;
  height: 10px;
  display: inline-block;
  margin-right: 12px; }

.bom-stock-indicator.instock {
  background-color: #78af2d; }

.bom-stock-indicator.nostock {
  background-color: #f1592a; }

/* ---- 2025 brand overlays (scoped to the SuperPro tab) ----------------- */

.superpro-tab h1,
.superpro-tab h2,
.superpro-tab h3,
.superpro-tab h4,
.superpro-tab h5,
.superpro-tab h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  line-height: 1.25;
  color: #003366;
}

/* Section title (fitting-position heading) - matches the 2025 main-site h1
   with a yellow underline. Left-aligned even though the wrapping
   .center div would otherwise centre it. */
.superpro-tab h1 {
  font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.4rem);
  border-bottom: 3px solid #FFCB05;
  padding-bottom: 6px;
  margin-bottom: 20px;
  text-align: left;
  margin-left: 4%;
  margin-top: 48px;
}

.superpro-tab h2 { font-size: clamp(0.85rem, 2vw + 0.4rem, 2rem); }
.superpro-tab h3 { font-size: clamp(1.05rem, 1.5vw + 0.3rem, 1.5rem); }

/* Product part-number link inside the tab */
.superpro-tab a {
  color: #004990;
}
.superpro-tab a:hover {
  color: #003366;
}

/* "In Stock" badge (already green) and "Out of stock" copy */
.superpro-tab .txtGreen { color: #78af2d; }
.superpro-tab .txtOrange { color: #c25a00; }

/* Sale-price markdown styling */
.superpro-tab .rrp {
  text-decoration: line-through;
  color: #999;
  margin-right: 6px;
  font-weight: 400;
}
.superpro-tab .reduced-price {
  color: #c00;
}

/* END: Product Listing */

/* Tablet Layout: 481px to 768px. Reverts to the original float-based
   layout so description and attributes flow BESIDE the photo (not
   below it) and total row height stays at max(photo, content) — flex/
   grid versions stacked the photo and the text and added their heights
   together, which made every row feel inflated.
   For the original "number sits above the heading" alignment problem
   we tighten the number's line-height so its character baseline lands
   closer to the heading's baseline. */
@media only screen and (min-width: 481px) {
  .superpro-tab .productcontainer {
    display: block;
    column-gap: 0;
    row-gap: 0; }

  .superpro-tab .productphoto {
    width: 24.0506%;
    clear: none;
    margin-left: 1.2658%;
    float: right; }

  .superpro-tab .productphotocrop {
    aspect-ratio: auto;
    height: auto; }

  /* Restore the natural-size image flow on tablet+. */
  .superpro-tab .productphotocrop > a {
    display: inline;
    width: auto;
    height: auto; }

  .superpro-tab .productphotocrop figure {
    margin: 0;
    width: auto;
    height: auto; }

  .superpro-tab .productphotocrop img {
    width: auto;
    height: auto;
    object-fit: initial;
    position: relative; }

  .superpro-tab .producttitle {
    width: 62.0253%;
    clear: none;
    margin-left: 1.2658%; }

  .superpro-tab .producttitle h2 {
    font-size: 160%;
    line-height: 1.05; }

  .superpro-tab .producttitle h3 {
    line-height: 1.05; }

  .superpro-tab .productdescription {
    width: 62.0253%;
    margin-left: 12.6582%;
    clear: none; }

  .superpro-tab .productattributes {
    width: 62.0253%;
    margin-left: 12.6582%;
    clear: none; }

  .superpro-tab .productnumber {
    width: 11.3924%;
    clear: none;
    margin-left: 0;
    font-size: 260%;
    line-height: 1; }
}

/* Desktop Layout: 1089px+. Same float-based layout as tablet, just
   wider middle column and narrower number column / indent. */
@media only screen and (min-width: 1089px) {
  p.superpronote {
    max-width: 50vw; }

  .superpro-tab .productphoto {
    width: 24.3697%;
    margin-left: 0.8403%;
    float: right; }

  .superpro-tab .producttitle {
    width: 70.5882%;
    margin-left: 0.8403%; }

  .superpro-tab .producttitle h2 {
    font-size: 180%; }

  .superpro-tab .productdescription {
    width: 70.5882%;
    margin-left: 4.2016%; }

  .superpro-tab .productattributes {
    width: 70.5882%;
    margin-left: 4.2016%; }

  .superpro-tab .productnumber {
    width: 3.3613%;
    margin-left: 0; }
}