/* Make this section 3 columns while keeping existing styling */
.shop-box3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--shop-gap, 20px); /* uses your existing gap variable if present */
}



/* Optional: mobile stacking breakpoint to match your shelves page */
@media (max-width: 900px) {
  .shop-box3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .shop-box3 { grid-template-columns: 1fr; }
}


/* Keep existing frame-choices border/shadow from shelves page */
.frame-choices {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-align: center;
}

.frame-choices img {
  display: block;
  margin: 0 auto;   /* centers horizontally */
  max-width: 100%;  /* keeps responsive scaling */
  height: auto;
  text-align: center;
}



/* Match shop-text style for hardware list */
.hardware-list {
  margin: 0.5em 0 0;
  padding: 0;
  list-style: none;              /* no bullets */
  font-size: 0.95em;             /* match body text */
  line-height: 1.5;
  text-align: left;              /* align like product details */
}

.hardware-list li {
  padding: 3px 0;
  border-bottom: 1px solid #eee; /* subtle divider like product rows */
}

.hardware-list li:last-child {
  border-bottom: none;           /* remove divider from last item */
}


#yellow-box {
  border: 1px solid darkgrey;
  padding: 0 25px;
  background-color: yellow;
  font-size: 24px !important;
  font-weight: 700;
  
}

.centered-image {
            display: block;
            margin: 0 auto;
            max-width: 100%;
            height: auto;
        }



/* Accessories / Racks (Modern CSS) */
/* New, non-conflicting classes */
.acc-page {
  max-width: 1000px;       /* matches your historic width */
  margin: 0 auto;
  padding: 0 16px;         /* breathing room on mobile */
  box-sizing: border-box;
}

.acc-section {
  display: grid;
  gap: 16px;
  justify-items: center;   /* center images/links */
  margin: 24px 0;
}

.acc-link {
  display: inline-block;
  text-decoration: none;
  outline-offset: 4px;     /* better focus visibility */
}


.acc-media {
  display: block;
  width: 100%;
  height: auto;            /* keep original aspect ratio */
  max-width: 100%;         /* don’t exceed container */
  margin: 0 auto;          /* center */
}


.acc-header {
  display: block;
  width: auto;
  height: 50px;            /* keep original aspect ratio */
  max-width: 100%;         /* don’t exceed container */
  margin: 0 auto;

}

/* Optional: cap header image width so it doesn’t look oversized on wide screens.
   Adjust if you prefer headers to span the full container. */
.acc-header { 
  max-width: 750px;        /* feel free to tweak */
}

/* Scarf image was historically wider—allow it to fill container nicely */
.acc-section:last-of-type .acc-media {
  max-width: 1000px;
}

/* Centered, responsive horizontal rule */
.acc-hr {
  border: 0;
  border-top: 1px solid #d9d9d9;
  width: min(100%, 1000px);
  margin: 24px auto;
}

/* Subtle polish (optional) */


.acc-media {
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}

/* High-DPI images look great; ensure they don’t blur on scale */
@supports (image-rendering: -webkit-optimize-contrast) {
  .acc-header,
  .acc-media {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Accessibility: respect user’s preferred reduced motion */
@media (prefers-reduced-motion: reduce) {
  .acc-link { transition: none; }
}