/* === Doors – Section 1 Styles (match “Closet Hang Bars” look) === */
/* Container centers content, mirrors your 1000px legacy width but responsive */
.doors-container {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 16px; /* gentle breathing room on small screens */
}

/* Modern, centered divider lines */
.doors-divider {
  height: 1px;
  border: 0;
  background: #e5e7eb;            /* light gray */
  box-shadow: var(--card-shadow);  /* subtle depth to echo your soft shadows */
  margin: 16px 0;
}

/* Six-up responsive grid (falls back gracefully for smaller screens) */
.doors-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;                       /* even spacing between items */
  align-items: end;                /* align bottoms for a tidy baseline */
  padding: 8px 0;
  list-style: none;
  margin: 0;
}

/* Image cards: radius + soft shadow to match your project’s aesthetic */
.doors-item img {
  display: block;
  height: 250px;                   /* keep original visual height */
  width: auto;                     /* preserve each image’s aspect ratio */
  margin-inline: auto;             /* center each image within its cell */
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  background: #fff;                /* prevents dark bleed behind transparent imgs */
}

/* Tablet: 3 columns */
@media (max-width: 1200px) {
  .doors-grid-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Large phone / small tablet: 2 columns */
@media (max-width: 700px) {
  .doors-grid-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Narrow phones: 1 column */
@media (max-width: 420px) {
  .doors-grid-6 {
    grid-template-columns: 1fr;
  }
}


/* === Doors – Section 2 (add to your Doors CSS) === */

/* Reuse the same centered container from Section 1 */
.doors-container {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* Header image keeps legacy height while remaining responsive */
.doors-header-image img {
  display: block;
  height: 35px;   /* legacy visual height */
  width: auto;    /* keep aspect ratio */
  margin: 8px auto 16px;
}

/* Specs card: light surface, border to echo legacy table, modern radius/shadow */
.doors-specs-card {
  background: #f8fafc;                 /* light panel */
  border: 1px solid #333333;            /* legacy border color preserved */
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  padding: 20px;
}

/* Bullet list with clean vertical rhythm */
.doors-specs-list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.45;
  font-size: 1rem;
}

/* Accessibility helper (keeps semantic heading for screen readers) */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}



/* === Doors – Section 3 Styles (add to your Doors CSS) === */

/* Reuse the same centered container */
.doors-container {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 16px;
}



/* Important callout */
.doors-callout {
  margin: 12px 0 24px;
  padding: 8px 18px;
  border: 1px solid #d1d5db;
  border-left-width: 4px;
  border-left-color: #2563eb; /* accent */
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: var(--card-shadow);
}

.doors-callout-title {
  margin: 0 0 6px;
  font-size: 1.05rel;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.doors-callout p {
  margin: 6px 0;
  padding: 10px;
  line-height: 1.45;
  font-size: larger;
}

/* CTA button */
.doors-button {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  box-shadow: var(--card-shadow);
}

.doors-button:hover,
.doors-button:focus {
  background: #1e40af;
}

/* Restrictions images */
.doors-restrictions {
  display: grid;
  gap: 20px;
}

.doors-restriction img {
  display: block;
  height: 400px;   /* legacy visual height */
  width: auto;     /* maintain aspect ratio */
  margin: 0 auto;
 
  background: #fff;
}

.doors-caption {
  text-align: center;
  margin-top: 8px;
  font-size: 0.95rem;
  color: #374151;
}

/* Responsive stacking/fit */
@media (max-width: 700px) {
  .doors-banner img { height: 220px; }
  .doors-restriction img { height: 300px; }
}

@media (max-width: 420px) {
  .doors-banner img { height: 180px; }
  .doors-restriction img { height: 240px; }
}




/* === Doors – Section 4 (add to your Doors CSS) === */

/* Container (shared) */
.doors-container {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* Four-up responsive grid */
.doors-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 8px 0 16px;
  list-style: none;
  margin: 0;
}

.doors-figure {
  text-align: center;
  margin: 0;
}

.image-250 .doors-figure img {
  display: block;
  height: 250px;   /* legacy visual height */
  width: auto;     /* keep aspect ratio */
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  background: #fff;
}

.image-500 .doors-figure img {
  display: block;
  height: 500px;   /* legacy visual height */
  width: auto;     /* keep aspect ratio */
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  background: #fff;
}

.doors-caption {
  margin-top: 8px;
  font-size: 0.95rem;
  line-height: 1.35;
  color: #374151;
}

/* Emphasis note */
.doors-emphasis {
  text-align: center;
  margin: 8px 0 16px;
  font-size: 1.05rem;
  font-weight: 600;
}

/* Divider (shared) */
.doors-divider {
  height: 1px;
  border: 0;
  background: #e5e7eb;
  box-shadow: var(--card-shadow);
  margin: 16px 0;
}

/* Callout (reuse styles from earlier section; included for completeness) */
.doors-callout {
  margin: 12px 0 24px;
  padding: 16px 18px;
  border: 1px solid #d1d5db;
  border-left-width: 4px;
  border-left-color: #2563eb;
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: var(--card-shadow);
}
.doors-callout-title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; }
.doors-button {
  display: inline-block; padding: 10px 14px; border-radius: 10px;
  background: #2563eb; color: #fff; text-decoration: none; font-weight: 600;
  box-shadow: var(--card-shadow);
}
.doors-button:hover,.doors-button:focus { background: #1e40af; }

/* Responsive behavior */
@media (max-width: 1100px) {
  .doors-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .image-500 .doors-figure img { height: 360px; }
  .image-250 .doors-figure img { height: 200px; }
}
@media (max-width: 420px) {
  .doors-grid-4 { grid-template-columns: 1fr; }
  .image-500 .doors-figure img { height: 280px; }
  .image-250 .doors-figure img { height: 170px; }
}





/* Alternate: contain within a 430px-tall box */
.shop15-wrap .shop-card img.frame-width[src*="18wx96hDoorSetRenderingTEXT"],
.shop15-wrap .shop-card img.frame-width[src*="24wx96hDoorSetRenderingTEXT"],
.shop15-wrap .shop-card img.frame-width[src*="30wx96hDoorSetRenderingTEXT"] {
  width: 100%;
  height: 430px !important;
  object-fit: contain;         /* never crops, maintains ratio */
  display: block;
  margin-inline: auto;
  background: #fff;            /* avoids dark bleed if letterboxed */
}







/* === Fix uneven spacing in the 3-up gallery === */
.gallery-3 {
  /* Force three equal columns and equal gaps */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  justify-content: center;     /* center the whole grid in its container */
  justify-items: stretch;       /* cards fill their column width */
  align-items: start;
}

.gallery-3 .shop-card {
  /* Ensure each card fills its grid cell and has no auto margins */
  width: 100%;
  margin: 0 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;          /* center the image and caption inside */
  text-align: center;
  padding-inline: 0.25rem;      /* tiny inner padding so edges line up nicely */
}

/* Keep the “same height, width auto” behavior, image centered inside card */
.uniform-door-img {
  height: clamp(240px, 35vw, 500px);
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

/* Captions */
.gallery-caption {
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.35;
}

/* Responsive: 3 → 2 → 1 columns */
@media (max-width: 980px) {
  .gallery-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gallery-3 { grid-template-columns: 1fr; }
  .uniform-door-img { height: clamp(220px, 60vw, 420px); }
}



/* Door Restrictions — always stacked (2 rows), responsive */
.doors-restrictions {
  display: grid;
  grid-template-columns: 1fr;   /* force single column at all sizes */
  gap: 1.25rem;                 /* even spacing between the two rows */
  max-width: 1000px;            /* match site content width */
  margin: 2rem auto;            /* center the block */
  padding-inline: clamp(8px, 3vw, 16px); /* gentle side padding on small screens */
}

.doors-restriction {
  margin: 0;                    /* reset default figure margins */
  width: 100%;
}

.doors-restriction img {
  display: block;               /* remove inline-gap below images */
  width: 100%;                  /* fluid width */
  height: auto;                 /* preserve aspect ratio */
  max-width: 100%;
}



/* Doors — Skills banner (single image, responsive) */
.doors-section {
  margin: 2rem 0;
}

.doors-container {
  max-width: 1000px;                /* match site content width */
  margin: 0 auto;                   /* center the block */
  padding-inline: clamp(8px, 3vw, 16px);  /* comfy side padding on mobile */
}

.doors-banner {
  width: 100%;
}

.doors-banner img {
  display: block;                   /* remove baseline gap */
  width: 100%;                      /* fluid width */
  height: auto;                     /* preserve aspect ratio */
  max-width: 100%;                  /* never overflow container */
}



/* Reuse your existing container pattern */
.doors-container {
  max-width: 1000px;
  margin: 0 auto;
  padding-inline: clamp(8px, 3vw, 16px);
}



/* Single centered, responsive image */
.centered-image {
  display: block;                 /* removes baseline gap + enables margin centering */
  width: 100%;                    /* fluid on small screens */
  max-width: 1000px;              /* match your page content width cap */
  height: auto;                   /* keep aspect ratio */
  margin: 0 auto;                 /* center horizontally */
}




/* Mobile-friendly baseline (safe to add now) */
:root { --page-max: 1000px; }
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body { margin: 0; }
.container-1000 { max-width: var(--page-max); margin: 0 auto; padding-inline: clamp(8px, 3vw, 16px); }

/* Fluid media */
img, svg, video { max-width: 100%; height: auto; display: block; }

/* Avoid layout breakage from long content */
.prewrap, .wrap { overflow-wrap: anywhere; word-break: break-word; }

/* Tables that must remain tables */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }