/* ===========================================================
   Spacivo Shop By Room — a grid fixed to exactly two rows
   (grid-template-rows: repeat(2, ...)), with grid-auto-flow: column dense
   packing tiles into new columns as they're added. Each tile's admin-
   chosen Tile Type (small/large/vertical/horizontal — inc/options.php)
   sets its grid-column/grid-row span in "small square" units:
     small      = 1 col x 1 row
     large      = 2 col x 2 row (fills both rows — a literal large square)
     vertical   = 1 col x 2 row (two small squares stacked)
     horizontal = 2 col x 1 row (two small squares side by side)
   Once the tiles overflow the container's width, .spacivo-sbr-grid's own
   overflow-x:auto turns the whole thing into a horizontally scrollable
   slider automatically — no separate carousel library, and no separate
   "enable slider" setting needed. The optional prev/next buttons
   (assets/js/shop-by-room.js) just scroll that same container.
   Self-contained plugin CSS.
   =========================================================== */

.shop-by-room-section { padding: 2.5rem 0; }
/* max-width/centering/padding now come from the theme's own .container
   class (added alongside these in the template) instead of a hardcoded
   1400px here, which didn't match .container's var(--container-max)
   (1280px default) and made this section's left edge sit out of line
   with every other homepage section, including "Shop by category" right
   above it. Font-size removed from the heading for the same reason — it
   now inherits the theme's own h2 size via .section-heading instead of a
   plugin-specific 1.4rem that didn't match. */
.spacivo-sbr-heading { margin: 0; color: #2A211D; }

.spacivo-sbr-viewport { position: relative; }

.spacivo-sbr-grid {
  display: grid;
  grid-template-rows: repeat(2, minmax(220px, 1fr));
  grid-auto-flow: column dense;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: .25rem;
}
.spacivo-sbr-grid::-webkit-scrollbar { display: none; }

.spacivo-sbr-tile {
  position: relative; display: block; overflow: hidden; border-radius: 4px;
  text-decoration: none; background: #E7E1D8; scroll-snap-align: start;
}
.spacivo-sbr-tile--small { grid-column: span 1; grid-row: span 1; }
.spacivo-sbr-tile--large { grid-column: span 2; grid-row: span 2; }
.spacivo-sbr-tile--vertical { grid-column: span 1; grid-row: span 2; }
.spacivo-sbr-tile--horizontal { grid-column: span 2; grid-row: span 1; }

.spacivo-sbr-tile__images { position: absolute; inset: 0; }
.spacivo-sbr-tile__image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .8s ease;
}
.spacivo-sbr-tile__image.is-active { opacity: 1; }

.spacivo-sbr-tile__label {
  position: absolute; z-index: 2; color: #fff; font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; text-shadow: 0 2px 6px rgba(0,0,0,.5);
  top: 1.5rem; left: 0; right: 0; text-align: center;
}
.spacivo-sbr-tile--large .spacivo-sbr-tile__label,
.spacivo-sbr-tile--vertical .spacivo-sbr-tile__label {
  top: auto; bottom: 2rem; left: 2rem; right: auto; text-align: left; font-size: 1rem;
}

.spacivo-sbr-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid #e2e2e2;
  display: flex; align-items: center; justify-content: center; color: #2A211D; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.spacivo-sbr-nav--prev { left: .5rem; }
.spacivo-sbr-nav--next { right: .5rem; }

@media (max-width: 750px) {
  .spacivo-sbr-viewport { padding: 0 1rem; }
  .spacivo-sbr-grid { grid-template-rows: repeat(2, minmax(150px, 1fr)); grid-auto-columns: minmax(150px, 1fr); }
  .spacivo-sbr-nav { display: none; }
}

.spacivo-sbr-unconfigured-notice {
  font-size: .85rem; color: #a22022; background: #fff3f3; border: 1px dashed #a22022;
  padding: .75rem 1rem; margin: 1rem auto; max-width: 1280px;
}