/* Quiet moving light behind the product displays, never over the photographs. */
.experience #hero .hero-bottom { justify-content: space-between; }
.experience #hero .hero-bg img { transform: none; }

.experience #sob-encomenda::before {
  content: '';
  position: absolute;
  inset: -16% auto -16% -28%;
  width: 76%;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(106deg, transparent 37%, #e6b36404 42%, #efc48817 47%, #ffe2ac38 50%, #e5ac6220 52%, #d49a4e08 57%, transparent 63%),
    radial-gradient(ellipse 38% 36% at 50% 55%, #efc2880e, transparent 80%);
  opacity: .74;
  transform: translate3d(30%, 0, 0) rotate(-9deg);
  transform-origin: center;
  animation: novera-background-light 32s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.experience #sob-encomenda::before { opacity: .48; animation-duration: 38s; animation-direction: alternate-reverse; }
/* Ready selection returns to its quiet amber gradient, without a light layer. */
.experience #mais-pedidos::before {
  content: none;
  background: none;
  animation: none;
}
.experience #sob-encomenda.ambient-visible::before { animation-play-state: running; }
.experience.ambient-background #sob-encomenda::before { animation-play-state: paused; }
.experience.ambient-reduced #sob-encomenda::before { animation: none; }
@keyframes novera-background-light {
  from { transform: translate3d(-8%, 0, 0) rotate(-12deg); }
  to { transform: translate3d(132%, 0, 0) rotate(8deg); }
}

/* Three equally prominent pieces, on a warm, illuminated gallery background. */
.experience #sob-encomenda {
  position: relative;
  isolation: isolate;
  overflow: clip;
  max-width: none;
  width: 100%;
  padding: clamp(64px, 6.8vw, 100px) max(var(--pad), calc((100% - var(--max)) / 2));
  background:
    radial-gradient(ellipse 63% 70% at 7% 40%, #82603c28, transparent 82%),
    radial-gradient(ellipse 52% 65% at 96% 58%, #8e596625, transparent 80%),
    linear-gradient(118deg, #27211c, #201b1b 52%, #302326);
  border-top: 1px solid #e5ceb725;
  border-bottom: 1px solid #e5ceb725;
}
.experience #sob-encomenda::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #24221d60, transparent 24%, transparent 76%, #1b191960);
}
.experience #sob-encomenda > * { position: relative; z-index: 1; }
.experience #sob-encomenda .sec-head { flex-wrap: nowrap; align-items: end; gap: 32px 70px; margin-bottom: 40px; }
.experience #sob-encomenda .sec-head > div:first-child { flex: 1; min-width: 0; }
.experience #sob-encomenda .kicker { color: #debd92; font-size: 11px; letter-spacing: .14em; }
.experience #sob-encomenda .sec-title { color: #f5ecdf; font-size: clamp(43px, 4.9vw, 70px); line-height: 1.04; }
.experience #sob-encomenda .sec-title em { color: #ddbd93; }
.experience #sob-encomenda .order-intro { flex: 0 1 350px; gap: 14px; padding-bottom: 5px; }
.experience #sob-encomenda .order-lead { margin: 0; color: #d0c1b3; font-size: 14px; line-height: 1.8; max-width: none; }
.experience #sob-encomenda .link-gold { max-width: none; width: fit-content; color: #f0d9b9; font-size: 12px; border-color: #e8cdab55; }
.experience #sob-encomenda #orderGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: clamp(24px, 3vw, 42px); margin-top: 0; }
.experience #sob-encomenda #orderGrid .card:nth-child(n) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  min-width: 0;
}
.experience #sob-encomenda #orderGrid .card .card-media {
  aspect-ratio: 4 / 5;
  flex-shrink: 0;
  border-radius: 3px;
  background: #231e1b;
  box-shadow: 0 0 0 1px #ebc99c30, 0 18px 42px -26px #ca99664d;
}
.experience #sob-encomenda #orderGrid .card-media .photo { object-fit: contain; transform: none; filter: none; }
.experience #sob-encomenda #orderGrid .card-media::after { background: #211a15e8; letter-spacing: .08em; }
.experience #sob-encomenda #orderGrid .card .tags { display: flex; top: 14px; left: 14px; right: 14px; }
.experience #sob-encomenda #orderGrid .tag { color: #f0dcc1; background: #302318e8; border-color: #d8b98c66; font-size: 10px; }
.experience #sob-encomenda #orderGrid .card-body { padding: 24px 0 0; gap: 12px; align-items: stretch; }
.experience #sob-encomenda #orderGrid .card h3 { color: #fbf0e0; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.12; min-height: 2.24em; }
.experience #sob-encomenda #orderGrid .meta { color: #d6c4b1; font-size: 12px; }
.experience #sob-encomenda #orderGrid .card .add {
  margin-top: 16px;
  padding: 13px 18px;
  min-height: 49px;
  border: 1px solid #d9b98c70;
  border-radius: 2px;
  background: #cda46d0d;
  color: #f0d8b6;
  font-size: 13px;
}
.experience #sob-encomenda #orderGrid .card .add:focus-visible { outline-color: #f0d8b6; }

/* The full catalog has a quieter, stationary variation of the same light. */
.experience #colecao {
  max-width: none;
  width: 100%;
  padding-inline: max(var(--pad), calc((100% - var(--max)) / 2));
  background-color: #211e1a;
  background-image:
    radial-gradient(ellipse 62% 520px at 4% 300px, #a17a4224, transparent 85%),
    radial-gradient(ellipse 56% 680px at 100% 780px, #77866b1a, transparent 85%),
    linear-gradient(112deg, #30261c40, transparent 45%, #34312a30);
  border-top: 0;
}
.experience #colecao .toolbar { background: transparent; }
.experience #colecao .stock-status { color: #ccc1af; }
.experience #colecao .search,
.experience #colecao .sel select { background-color: #29251f; border-color: #d7c5a735; }
.experience #colecao .chip { border-color: #d7c5a735; }
.experience #colecao #catalog .card { background: transparent; }
.experience #colecao #catalog .card-media { box-shadow: 0 1px 0 #e4c49938, 0 10px 36px -23px #c3966757; }
.experience #colecao #catalog .card:nth-child(3n + 2) .card-media { box-shadow: 0 1px 0 #d4b3a738, 0 10px 36px -23px #b27e7750; }
.experience #colecao #catalog .card:nth-child(3n) .card-media { box-shadow: 0 1px 0 #c0c8ac38, 0 10px 36px -23px #8b9b7050; }
.experience #colecao #catalog .card-media .photo { transform: none; }
.experience #colecao #catalog .meta { color: #c9bead; }

/* Align corresponding information across each visible row, including optional
   fields. Names stay complete; longer text grows the shared row naturally. */
.experience #colecao #catalog .card { min-width: 0; }
.experience #colecao #catalog .card-media { align-self: start; min-width: 0; }
.experience #colecao #catalog .card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(18px, auto) minmax(2.4em, auto) auto minmax(16px, auto) auto minmax(28px, auto) auto;
  align-content: start;
  align-items: start;
  gap: 10px;
  padding: 18px 0 0;
  min-width: 0;
}
.experience #colecao #catalog .card-body > * { grid-column: 1; margin: 0; min-width: 0; }
.experience #colecao #catalog .fam { grid-row: 1; }
.experience #colecao #catalog .card h3 { grid-row: 2; line-height: 1.2; min-height: 2.4em; }
.experience #colecao #catalog .name-btn { display: block; width: 100%; overflow-wrap: anywhere; }
.experience #colecao #catalog .meta { grid-row: 3; }
.experience #colecao #catalog .fix { grid-row: 4; }
.experience #colecao #catalog .price { grid-row: 5; padding-top: 0; }
.experience #colecao #catalog .twin { grid-row: 6; min-height: 28px; padding: 2px 0; text-align: left; }
.experience #colecao #catalog .add { grid-row: 7; align-self: stretch; min-height: 48px; margin-top: 0; }
@supports (grid-template-rows: subgrid) {
  .experience #colecao #catalog { row-gap: 10px; align-items: stretch; }
  .experience #colecao #catalog .card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-row: span 8;
    row-gap: 10px;
    margin: 0 0 32px;
  }
  .experience #colecao #catalog .card-media { grid-row: 1; }
  .experience #colecao #catalog .card-body {
    grid-row: 2 / span 7;
    grid-template-rows: subgrid;
    row-gap: 10px;
    padding-top: 8px;
  }
  .experience #colecao #catalog .card h3 { min-height: 0; }
}

@media (hover: hover) and (pointer: fine) {
  .experience #sob-encomenda #orderGrid .card .add:hover { background: #ead2ae; border-color: #ead2ae; color: #30251a; }
}
@media (max-width: 900px) {
  .experience #sob-encomenda .sec-head { gap: 26px; }
  .experience #sob-encomenda .order-intro { flex-basis: 290px; }
  .experience #sob-encomenda #orderGrid { gap: 22px; }
  .experience #sob-encomenda #orderGrid .card h3 { font-size: 28px; }
}
@media (max-width: 680px) {
  .experience #colecao #catalog .card { margin-bottom: 20px; }
  .experience #sob-encomenda { padding-block: 56px; }
  .experience #sob-encomenda .sec-head { flex-direction: column; align-items: stretch; gap: 22px; margin-bottom: 32px; }
  .experience #sob-encomenda .order-intro { flex: none; max-width: 440px; gap: 8px; }
  .experience #sob-encomenda .sec-title { font-size: clamp(42px, 8vw, 54px); }
  .experience #sob-encomenda .order-lead { font-size: 13px; }
  .experience #sob-encomenda #orderGrid { grid-template-columns: 1fr; gap: 38px; }
  .experience #sob-encomenda #orderGrid .card:nth-child(n) { max-width: 460px; width: 100%; justify-self: center; }
  .experience #sob-encomenda #orderGrid .card h3 { font-size: 34px; min-height: 0; }
  .experience #sob-encomenda #orderGrid .card-body { padding-top: 19px; gap: 10px; }
  .experience #sob-encomenda #orderGrid .card .add { margin-top: 8px; }
  .experience #sob-encomenda::before { opacity: .32; animation-duration: 44s; }
}
@media (prefers-reduced-motion: reduce) {
  .experience #sob-encomenda::before { animation: none !important; transform: translate3d(30%, 0, 0) rotate(-9deg); }
  .experience #sob-encomenda #orderGrid .add { transition: none; }
}