/* =====================================================================
   Three features from the redesign, styled in the original Ereca look
   (Playfair Display / DM Mono / DM Sans, cream, ink, clay, sage).
   ===================================================================== */

/* ---------- 1. Scrolling line of rug names ---------- */
.name-marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding: 22px 0;
  font: italic 500 clamp(30px, 3.6vw, 52px)/1.1 "Playfair Display", Georgia, serif;
  letter-spacing: -.03em;
  color: var(--ink);
}
.nm-track { display: flex; width: max-content; animation: nm-scroll 45s linear infinite; }
.name-marquee:hover .nm-track { animation-play-state: paused; }
.nm-group { display: flex; align-items: center; flex: none; }
.nm-group span { padding-inline: clamp(18px, 2.2vw, 34px); white-space: nowrap; }
.nm-group i { font: normal 14px "DM Mono", monospace; color: var(--clay); }
@keyframes nm-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .nm-track { animation: none; } }

/* ---------- 2. Swipeable product rail ---------- */
.products .product-grid.rail {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 22.5vw, 330px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  margin-inline: -4.7vw;
  padding: 0 4.7vw 18px;
  scroll-padding-inline: 4.7vw;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) transparent;
  cursor: grab;
}
.products .product-grid.rail > .product { scroll-snap-align: start; }
.products .product-grid.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.products .product-grid.rail.is-dragging * { pointer-events: none; user-select: none; }
.rail-arrows { display: inline-flex; gap: 8px; margin-left: 14px; }
.rail-arrow {
  width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer;
  font: 13px "DM Mono", monospace; display: inline-grid; place-items: center;
}
.rail-arrow:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.rail-arrow:disabled { opacity: .35; pointer-events: none; }
@media (max-width: 720px) {
  .products .product-grid.rail { grid-auto-columns: 68%; margin-inline: -6vw; padding-inline: 6vw; scroll-padding-inline: 6vw; cursor: auto; }
  .rail-arrows { display: none; }
}

/* ---------- 3. Interactive size guide ---------- */
.size-plan { margin: 6px 0 30px; max-width: 440px; }
.size-plan svg { display: block; width: 100%; height: auto; }
.size-plan .room { fill: var(--cream); stroke: #b9b3a5; stroke-width: .5; stroke-dasharray: 2 2; }
.size-plan .rug { transform-box: fill-box; transform-origin: 50% 0; transform: translateY(var(--y, 0px)) scale(var(--w), var(--h)); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.size-plan .rug-shape { fill: #dcbfa9; stroke: var(--clay); stroke-width: .8; vector-effect: non-scaling-stroke; }
.size-plan .sofa { fill: #8f9882; }
.size-plan .sofa-seat { fill: var(--sage); }
.size-plan .table { fill: #6f6a5e; opacity: .85; }
.size-plan .dim { fill: #6d6f68; font: 3.2px "DM Mono", monospace; letter-spacing: .12em; }
.size-plan-note { margin: 14px 0 0 !important; font-size: 13px !important; color: var(--ink); min-height: 2.6em; }

.size-cards article[role="radio"] { cursor: pointer; transition: background-color .25s, color .25s; }
.size-cards article[role="radio"]:hover { background: #fffdf8; }
/* the selected size takes the original dark "featured" look */
.size-cards article.is-selected,
.size-cards article.is-selected:hover { background: var(--ink); color: #f3eee4; }
.size-cards article.is-selected span { color: #d8aa59; }
.size-cards .featured-size:not(.is-selected) { background: var(--cream); color: var(--ink); }
.size-cards .featured-size:not(.is-selected) span { color: var(--clay); }
/* rail cards are always visible (no fade-in while swiping) */
.reveal-ready .product-grid.rail .reveal { opacity: 1; transform: none; transition: none; }
.size-cards article.is-selected p { color: #e4dfd3; }

/* =====================================================================
   Landing additions inspired by Dribbble home-decor work,
   drawn in the original Ereca style.
   ===================================================================== */

/* ---------- Bento category grid ---------- */
@media (min-width: 721px) {
  .path-grid {
    grid-template-columns: 1.25fr 1fr 1fr;
    grid-template-rows: 300px 260px;
  }
  .path-grid .path-rugs { grid-column: 1; grid-row: 1 / span 2; min-height: 0; }
  .path-grid .path-carpets { grid-column: 2; grid-row: 1; min-height: 0; }
  .path-grid .path-bathmats { grid-column: 3; grid-row: 1; min-height: 0; }
  .path-grid .path-custom { grid-column: 2 / span 2; grid-row: 2; min-height: 0; }
  .path-grid .path-carpets h3, .path-grid .path-bathmats h3 { font-size: 44px; margin-top: 30px; }
  .path-grid .path-rugs h3 { font-size: 64px; }
}
.path-custom { background: var(--sage); color: var(--ink); justify-content: flex-end; }
.path-custom:before { display: none; }
.path-custom h3 { font-size: 46px; margin-top: 20px; }
.path-custom b { border-color: var(--ink); }
.path-custom:hover { background: #b6bea8; }
.path-card { transition: transform .5s cubic-bezier(.16,1,.3,1); }
@media (max-width: 720px) {
  .path-grid .path-rugs { order: -1; }
  .path-custom { min-height: 240px; }
}

/* ---------- Shop the look ---------- */
.look { padding: 110px 4.7%; }
.look-grid {
  display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 330px 330px;
  gap: 12px; margin-top: 44px;
}
.look-photo { position: relative; margin: 0; background: #ddd4c6; }
.look-photo:has(.hotspot[aria-expanded="true"]) { z-index: 3; }
.look-a { grid-row: 1 / span 2; }
.look-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hotspot {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  background: rgba(244, 240, 232, .35); display: grid; place-items: center;
  backdrop-filter: blur(2px);
}
.hotspot span {
  width: 16px; height: 16px; border-radius: 50%; background: var(--cream);
  box-shadow: 0 0 0 4px rgba(244, 240, 232, .45), 0 4px 14px rgba(36, 37, 31, .35);
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.hotspot::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  border: 1px solid rgba(244, 240, 232, .8);
  animation: hs-pulse 2.4s cubic-bezier(.22,.61,.36,1) infinite;
}
.hotspot:hover span, .hotspot[aria-expanded="true"] span { transform: scale(1.25); }
.hotspot[aria-expanded="true"]::after { animation: none; opacity: 0; }
@keyframes hs-pulse { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hotspot::after { animation: none; opacity: 0; } }

.look-card {
  position: absolute; left: calc(var(--x, 50%)); top: calc(var(--y, 50%));
  width: min(250px, calc(100% - 24px)); padding: 18px 18px 16px;
  background: var(--cream); color: var(--ink);
  box-shadow: 0 18px 40px -18px rgba(36, 37, 31, .45);
  transform-origin: top left;
  animation: look-in .28s cubic-bezier(.16,1,.3,1);
  z-index: 4;
}
.look-card p { font: 11px "DM Mono", monospace; letter-spacing: .08em; color: #66665f; margin: 0 0 8px; }
.look-card h3 { font: 400 22px/1.15 "Playfair Display", Georgia, serif; margin: 0 0 6px; letter-spacing: -.02em; }
.look-card > span { font: 12px "DM Mono", monospace; }
.look-order, .look-link {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 44px; margin-top: 14px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--cream); text-decoration: none;
  font: 11px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase;
}
.look-order:hover, .look-link:hover { background: #3a3b33; }
@keyframes look-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  .look { padding: 80px 6%; }
  .look-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 420px 220px; }
  .look-a { grid-column: 1 / span 2; grid-row: 1; }
  .look-card { width: min(220px, calc(100vw - 48px)); }
}