/* ==========================================================================
   FrameX — Components
   The shared building blocks of the design system: buttons, chips, badges,
   form controls, the page hero, collection card, product card and grid,
   feature-card shell, panel shell, closing panel, shop card.
   Their look comes from Home Decor, the visual reference for the whole site.
   Page files only add layout that is really their own.
   ========================================================================== */

/* Buttons ------------------------------------------------------------------
   Primary   .btn--primary   the main action of a screen (amber)
   Secondary .btn--dark      the main action of a card or a quieter screen (ink)
   Outline   .btn--outline   the second action beside one of the above
   Ghost     .btn--ghost     a low-key action inside a busy area
   On dark surfaces: .btn--light (solid) and .btn--outline-dark (outline). */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn .icon {
  transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover .icon--nudge {
  transform: translateX(4px);
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.55;
}

.btn--sm {
  min-height: 44px;
  padding: 0 1.1rem;
  font-size: 0.85rem;
}

.btn--block {
  width: 100%;
}

.btn--primary {
  background: var(--amber-strong);
  color: var(--white);
}

.btn--primary:hover:not(:disabled) {
  background: var(--amber-deep);
  box-shadow: 0 8px 22px rgba(222, 131, 46, 0.35);
}

.btn--dark {
  background: var(--ink);
  color: var(--white);
}

.btn--dark:hover:not(:disabled) {
  background: #162a5c;
  box-shadow: 0 8px 22px rgba(5, 8, 22, 0.25);
}

.btn--outline-dark {
  /* Outline button used over pictures */
  background: rgba(5, 8, 22, 0.55);
  border-color: var(--mist);
  color: var(--mist);
  backdrop-filter: blur(6px);
}

.btn--outline-dark:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--white);
  color: var(--white);
}

.btn--outline {
  border-color: var(--line);
  color: var(--ink);
  background: var(--white);
}

.btn--outline:hover:not(:disabled) {
  border-color: var(--ink);
}

.btn--ghost {
  color: var(--ink);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--stone-soft);
}

.btn--light {
  border-color: var(--line);
  background: var(--white);
  color: var(--ink);
}

.btn--light:hover {
  border-color: var(--ink);
}

/* Round icon button ---------------------------------------------------------- */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(5, 8, 22, 0.18);
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.icon-btn:hover {
  transform: scale(1.08);
}

.icon-btn:active {
  transform: scale(0.94);
}

.icon-btn[aria-pressed="true"] {
  background: var(--rose);
  color: var(--white);
}

.icon-btn[aria-pressed="true"] .icon {
  fill: currentColor;
}

/* Chips (filters, tabs) ------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.chip:hover {
  border-color: var(--ink);
}

.chip[aria-pressed="true"],
.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.chip small {
  color: var(--muted);
  font-weight: 600;
}

.chip[aria-pressed="true"] small,
.chip.is-active small {
  color: var(--mist);
}

/* A row of chips that scrolls sideways on small screens */
.chip-scroll {
  display: flex;
  gap: var(--space-sm);
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.chip-scroll::-webkit-scrollbar {
  display: none;
}

.chip-scroll > * {
  flex: none;
}

@media (min-width: 900px) {
  .chip-scroll--wrap {
    flex-wrap: wrap;
    overflow: visible;
  }
}

/* Small status pills -------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.2;
}

.badge--discount {
  background: var(--rose);
  color: var(--white);
}

.badge--sample {
  background: rgba(5, 8, 22, 0.78);
  color: var(--white);
  backdrop-filter: blur(6px);
}

/* On a picture: dark glass, or the accent for a piece made from the customer's photo */
.badge--dark {
  background: rgba(5, 8, 22, 0.82);
  color: var(--white);
  backdrop-filter: blur(6px);
}

.badge--accent {
  background: var(--amber-strong);
  color: var(--white);
}

.badge--open {
  background: #e3f6ea;
  color: #12633a;
}

.badge--closed {
  background: #fdeaea;
  color: #8f1d1d;
}

.badge--muted {
  background: var(--stone-soft);
  color: var(--muted);
}

/* Form controls ------------------------------------------------------------ */
.field {
  position: relative;
  display: flex;
  align-items: center;
}

.field .icon {
  position: absolute;
  left: 14px;
  color: var(--muted);
  pointer-events: none;
}

.input,
.select {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: var(--text-sm);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.field .input {
  padding-left: 42px;
}

.input:focus,
.select:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: var(--focus-ring);
}

.select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b5f6b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.switch input {
  appearance: none;
  position: relative;
  width: 44px;
  height: 26px;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--slate);
  transition: background-color var(--dur-base) var(--ease-out);
  cursor: pointer;
}

.switch input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  transition: transform var(--dur-base) var(--ease-out);
}

.switch input:checked {
  background: var(--amber-strong);
}

.switch input:checked::after {
  transform: translateX(18px);
}

.switch input:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

/* Quantity stepper --------------------------------------------------------- */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
}

.qty__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.qty__btn:hover:not(:disabled) {
  background: var(--stone-soft);
}

.qty__btn:disabled {
  opacity: 0.4;
}

.qty__value {
  min-width: 28px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Empty / error states ------------------------------------------------------ */
.state-message {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 48px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--muted);
}

.state-message strong {
  color: var(--ink);
  font-size: var(--text-lg);
}

/* ==========================================================================
   Page hero
   The light band that opens a page: breadcrumb, small label, headline, lead,
   actions, and optionally a few facts and a wall of framed pieces.
   ========================================================================== */
.page-hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--header-h) + var(--hero-pad-top));
  padding-bottom: var(--hero-pad-bottom);
  background: var(--surface-gradient);
  color: var(--ink);
  overflow: hidden;
}

/* Two soft lights behind everything, drifting slowly */
.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(70vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}

.page-hero::before {
  top: -30%;
  right: -10%;
  background: radial-gradient(closest-side, var(--hero-glow, rgba(234, 120, 14, 0.14)), transparent);
  animation: hero-drift 16s ease-in-out infinite alternate;
}

.page-hero::after {
  bottom: -45%;
  left: -15%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.7), transparent);
  animation: hero-drift 20s ease-in-out infinite alternate-reverse;
}

@keyframes hero-drift {
  from {
    transform: translate3d(-4%, -3%, 0) scale(1);
  }

  to {
    transform: translate3d(6%, 5%, 0) scale(1.15);
  }
}

.page-hero__grid {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.page-hero__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* A comfortable tap area; the padding of an inline link does not move anything */
.page-hero__crumbs a,
.was__crumbs a {
  padding-block: 11px;
}

.page-hero__crumbs a:hover {
  text-decoration: underline;
}

.page-hero__crumbs [aria-current] {
  color: var(--ink);
  font-weight: 600;
}

.page-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--accent);
  letter-spacing: 0.14em;
}

.page-hero .eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(234, 120, 14, 0.18);
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
  text-wrap: balance;
}

.page-hero__title span {
  background: var(--text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-hero__lead {
  max-width: 54ch;
  margin-top: 16px;
  color: var(--muted);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.65;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-sm);
}

.page-hero__facts dd {
  margin: 0;
}

.page-hero__facts strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Three framed pieces, slightly fanned */
.page-hero__wall {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.6vw, 18px);
  align-items: center;
}

.page-hero__piece {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(5, 8, 22, 0.06);
  box-shadow: 0 26px 50px -22px rgba(5, 8, 22, 0.4);
  aspect-ratio: 4 / 5;
  background: var(--stone-soft);
  transition:
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
  animation: piece-float var(--float-time, 6s) ease-in-out var(--float-delay, 0s) infinite;
}

/* A page's own hero: the pictures drop into place one after another.
   (The home page's rotating hero times its own arrival, per slide.) */
.page-hero:not(.home-hero) .page-hero__piece {
  animation:
    piece-in 900ms var(--ease-spring) var(--in-delay, 0s) backwards,
    piece-float var(--float-time, 6s) ease-in-out var(--float-delay, 0s) infinite;
}

.page-hero__piece:nth-child(1) {
  transform: translateY(18px) rotate(-3deg);
  --in-turn: -12deg;
  --in-delay: 120ms;
  --float-time: 6.5s;
}

.page-hero__piece:nth-child(2) {
  transform: translateY(-10px);
  z-index: 1;
  --in-turn: 0deg;
  --in-delay: 260ms;
  --float-time: 5.5s;
  --float-delay: -2s;
}

.page-hero__piece:nth-child(3) {
  transform: translateY(22px) rotate(3deg);
  --in-turn: 12deg;
  --in-delay: 400ms;
  --float-time: 7s;
  --float-delay: -4s;
}

/* A band of light crossing the glass now and then */
.page-hero__piece::after {
  content: "";
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.34) 50%, transparent 58%);
  translate: -100% 0;
  pointer-events: none;
  animation: piece-shine 7s ease-in-out calc(var(--in-delay, 0s) * 4 + 1.4s) infinite;
}

@keyframes piece-in {
  from {
    opacity: 0;
    scale: 0.82;
    rotate: var(--in-turn, 0deg);
  }
}

@keyframes piece-float {
  50% {
    translate: 0 -12px;
  }
}

@keyframes piece-shine {
  0% {
    translate: -100% 0;
  }

  22%,
  100% {
    translate: 100% 0;
  }
}

.page-hero__piece img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover: hover) {
  .page-hero__piece:hover {
    transform: translateY(-8px) scale(1.04);
    box-shadow: 0 36px 60px -22px rgba(5, 8, 22, 0.5);
    animation-play-state: paused;
    z-index: 2;
  }
}

@media (min-width: 900px) {
  .page-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

/* ==========================================================================
   Collection card
   A picture with its name over a dark fade: wall-art collections, frame
   categories. Sits in .collection-grid.
   ========================================================================== */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.collection-card {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(190px, 30vw, 300px);
  padding: clamp(14px, 2vw, 22px);
  border-radius: var(--radius-lg);
  color: var(--white);
  overflow: hidden;
  text-align: left;
  background: var(--ink);
}

.collection-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  transition: transform 900ms var(--ease-out);
}

.collection-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(2, 3, 10, 0) 22%, rgba(2, 3, 10, 0.72) 62%, rgba(2, 3, 10, 0.94));
}

.collection-card__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
}

.collection-card__blurb {
  display: none;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--text-sm);
}

.collection-card__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--champagne);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.collection-card__count .icon {
  transition: transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .collection-card:hover img {
    transform: scale(1.06);
  }

  .collection-card:hover .collection-card__count .icon {
    transform: translateX(4px);
  }
}

@media (min-width: 640px) {
  .collection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .collection-card__blurb {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero__piece,
  .collection-card img {
    transition: none;
  }
}

/* ==========================================================================
   Product card
   One card for every product on the site (photo frames, wall art, related
   products). Rendered by templates.productCard (frames) and decorUI.card
   (wall art). The grid that holds them is .product-grid.
   ========================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (min-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Wide screens: a fifth column, so cards do not grow oversized */
@media (min-width: 1800px) {
  .product-grid:not(.product-grid--rail):not(.product-grid--related) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* A short row of cards: swipes sideways below the desktop layout instead of wrapping */
@media (max-width: 999px) {
  .product-grid--rail {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    padding-bottom: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .product-grid--rail::-webkit-scrollbar {
    display: none;
  }

  .product-grid--rail > * {
    scroll-snap-align: start;
  }
}

@media (min-width: 640px) and (max-width: 999px) {
  .product-grid--rail {
    grid-auto-columns: calc((100% - 2 * var(--grid-gap)) / 3);
  }
}

/* Four related products: two by two until there is room for a row of four */
@media (max-width: 999px) {
  .product-grid--related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--ink);
  overflow: hidden;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--beige);
  overflow: hidden;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out);
}

.product-card__open {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.product-card__badges {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 60px);
  pointer-events: none;
}

.product-card__wish {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
}

.product-card__body {
  display: grid;
  gap: var(--space-xs);
  padding: var(--card-pad) var(--card-pad) var(--space-sm);
}

/* Uppercase label above the name: the collection (wall art) or the shop (frames) */
.product-card__cat {
  color: var(--gold-muted);
  font-size: var(--text-label);
  font-weight: var(--weight-strong);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.product-card__title {
  display: -webkit-box;
  min-height: 2.6em;
  font-size: var(--text-card);
  font-weight: var(--weight-strong);
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__title a:hover {
  text-decoration: underline;
}

.product-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: var(--text-xs);
}

.product-card__rating .icon {
  width: 14px;
  height: 14px;
  color: var(--star);
}

.product-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-top: 2px;
}

.product-card__price strong {
  font-family: var(--font-display);
  font-size: var(--text-price);
  font-weight: var(--weight-strong);
}

.product-card__price s,
.product-card__price span {
  color: var(--muted);
  font-size: var(--text-sm);
}

.product-card__price em {
  color: var(--wine);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: var(--weight-strong);
}

/* Sizes, colours, stock: one quiet line */
.product-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--muted);
  font-size: var(--text-xs);
}

.product-card__meta b {
  color: var(--wine);
  font-weight: var(--weight-strong);
}

.swatch-dot-row {
  display: inline-flex;
  gap: 5px;
}

.swatch-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(5, 8, 22, 0.15);
}

.product-card__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* a long label never widens the card */
  gap: 6px;
  margin-top: auto;
  padding: 6px var(--card-pad) var(--card-pad);
}

.product-card__actions .btn {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 40px;
  padding-inline: 8px;
  font-size: 0.8125rem;
}

.product-card.is-unavailable .product-card__media img {
  filter: grayscale(0.85);
  opacity: 0.75;
}

@media (hover: hover) {
  .product-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--shadow-lift);
  }

  .product-card:hover .product-card__media img {
    transform: scale(1.05);
  }
}

/* The narrowest phones: two cards a row leaves room for the words only */
@media (max-width: 359px) {
  .product-card__actions .btn .icon {
    display: none;
  }
}

@media (min-width: 1200px) {
  .product-card__actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .product-card__actions > :only-child {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-card__media img {
    transition: none;
  }
}

/* ==========================================================================
   Feature card
   The shell every other card shares with the product card: white, a hairline
   border, the card radius. Each card adds its own layout in its own file.
   ========================================================================== */
.service-card,
.method-card,
.how-step,
.journey__step,
.review-card,
.community-card,
.cg-card,
.shop-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}

/* Cards that lead somewhere lift the same way the product card does */
.service-card,
.method-card,
.shop-card {
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .service-card:hover,
  .method-card:hover,
  .shop-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--shadow-lift);
  }
}

/* Round icon tile at the top of a feature card or beside a short fact */
.service-card__icon,
.method-card__icon,
.trust__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--champagne);
  color: var(--brown-deep);
}

/* ==========================================================================
   Panel
   A white box on a warm task screen: the wall-art customiser, FrameX Studio,
   checkout, orders and the account all use this one shell.
   ========================================================================== */
.was-card,
.fs-config,
.sc-section,
.fs-price,
.co-card,
.od-row,
.od-hero,
.od-summary,
.account-card {
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-md);
  background: var(--white);
}

/* ==========================================================================
   Closing panel
   The soft box that ends a page with one or two actions.
   ========================================================================== */
.final-cta {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(40px, 7vw, 72px) clamp(20px, 5vw, 48px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(90% 120% at 85% 0%, rgba(234, 120, 14, 0.08), transparent 60%),
    var(--surface-soft);
  color: var(--ink);
  text-align: center;
}

.final-cta__title {
  max-width: 20ch;
}

.final-cta__text {
  max-width: 48ch;
  color: var(--muted);
}

.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}

.final-cta .story-credit,
.final-cta .story-credit strong {
  color: var(--muted);
}

/* ==========================================================================
   Shop card
   ========================================================================== */
.shop-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shop-card__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--stone);
}

.shop-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}

.shop-card__top {
  position: absolute;
  inset: 12px 12px auto;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.shop-card__body {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 36px 20px 20px;
  flex: 1;
}

.shop-card__logo {
  position: absolute;
  top: -28px;
  left: 20px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  overflow: hidden;
}

.shop-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-card__address {
  display: flex;
  gap: 6px;
  color: var(--muted);
  font-size: var(--text-sm);
}

.shop-card__address .icon {
  margin-top: 3px;
}

.shop-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.shop-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}

.shop-card__count {
  color: var(--muted);
  font-size: var(--text-sm);
}

@media (hover: hover) {
  .shop-card:hover .shop-card__cover img {
    transform: scale(1.05);
  }
}

/* Skeleton placeholders sized like the real cards ----------------------------- */
.skeleton-card {
  border-radius: var(--radius-md);
  aspect-ratio: 3 / 4;
}

.skeleton-card--shop {
  aspect-ratio: 4 / 3.2;
}

/* Customer photo tiles ----------------------------------------------------------
   One tile per photo a product needs ("Photo 1", "Photo 2", …): the product
   page, FrameX Studio and templates all use these (ui/photo-uploader.js). */
.uploader {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 10px;
}

.uploader--single {
  grid-template-columns: minmax(0, 1fr);
}

.uploader__tile {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px dashed rgba(112, 69, 41, 0.35);
  border-radius: var(--radius-md);
  background: var(--white);
  transition:
    border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.uploader__tile.has-photo {
  border-style: solid;
  border-color: var(--line-warm);
}

.uploader__tile.is-dragover {
  border-color: var(--amber);
  background: var(--champagne);
}

.uploader__tile.is-missing {
  border-color: var(--danger);
  background: #fdf3f2;
}

.uploader__tile:focus-within {
  box-shadow: var(--focus-ring);
}

.uploader__drop {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 56px;
  cursor: pointer;
}

.uploader__thumb {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--beige);
  color: var(--gold-muted);
  overflow: hidden;
}

.uploader__thumb .icon {
  width: 22px;
  height: 22px;
}

.uploader__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uploader__thumb img:not([hidden]) + .icon {
  display: none;
}

.uploader__text {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: var(--text-sm);
}

.uploader__hint {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--taupe);
  font-size: var(--text-xs);
}

.uploader__hint .icon {
  flex: none;
  width: 14px;
  height: 14px;
}

.uploader__tile.has-photo .uploader__hint {
  color: var(--success);
  font-weight: 700;
}

/* The file's own facts: name, pixel size, file size. */
.uploader__facts {
  overflow: hidden;
  color: var(--taupe);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uploader__facts[hidden] {
  display: none;
}

.uploader__progress {
  height: 4px;
  border-radius: 4px;
  background: var(--beige);
  overflow: hidden;
}

.uploader__progress[hidden] {
  display: none;
}

.uploader__progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--amber);
  transition: width 200ms var(--ease-out);
}

.uploader__msg {
  color: var(--taupe);
  font-size: 11px;
  line-height: 1.45;
}

.uploader__msg:empty {
  display: none;
}

.uploader__msg--error {
  color: var(--danger);
  font-weight: 600;
}

.uploader__actions {
  display: flex;
  gap: 4px;
}

.uploader__actions[hidden] {
  display: none;
}

.uploader__action {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  color: var(--brown-deep);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}

.uploader__action:hover {
  background: var(--champagne);
}

/* "Printed in the same original quality you provide": the statement shown wherever a photo is added. */
.photo-quality,
.pp-photos__quality,
.fs-quality,
.was-upload__quality {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--cream);
  color: var(--umber);
  font-size: var(--text-xs);
  line-height: 1.55;
}

.photo-quality .icon,
.pp-photos__quality .icon,
.fs-quality .icon,
.was-upload__quality .icon {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--success);
}

/* ==========================================================================
   Promo band
   A dark band that introduces another part of FrameX: the words on one side
   (eyebrow, title, lead, two buttons), a wall of four pictures on the other.
   Every promo band on a page has the same layout, and bands that carry the
   same data-match-height stand at the same height (ui/site.js): the shorter
   one gets the spare room above and below, its own spacing stays the same.
   Home page: "Home Decor & Wall Art" and "Premium wall art for every room.".
   A wide picture can say which part to show: style="--focus: 76% 50%".

     <section class="section section--dark">
       <div class="container promo-band__grid" data-match-height="promo">
         <div class="promo-band__copy"> eyebrow, .section-title, .section-lead, .page-hero__actions </div>
         <div class="promo-band__wall"> 4 x <a><img><span>label</span></a> </div>
       </div>
     </section>
   ========================================================================== */
.promo-band__grid {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  align-content: center;
}

.promo-band__copy {
  min-width: 0;
}

.promo-band__wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.promo-band__wall a {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--stone-soft);
}

.promo-band__wall img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transition: transform 800ms var(--ease-out);
}

.promo-band__wall span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(5, 8, 22, 0.78);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 700;
}

@media (hover: hover) {
  .promo-band__wall a:hover img {
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .promo-band__wall img {
    transition: none;
  }
}

@media (min-width: 640px) {
  .promo-band__wall {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .promo-band__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}