.hero-gallery-preview {
  position:absolute;
  z-index:1;
  inset-inline-start:10%;
  inset-block-end:9%;
  width:clamp(100px,13vw,185px);
  aspect-ratio:390 / 844;
  background:#27151e;
  border:clamp(3px,.47vw,7px) solid #241620;
  border-radius:clamp(12px,1.7vw,26px);
  box-shadow:0 16px 34px #1f101ac2,0 0 0 1px #ffe6d1a0;
  transform:rotate(-10deg);
  transition:transform .32s cubic-bezier(.2,.65,.25,1);
}
[dir=rtl] .hero-gallery-preview {transform:rotate(10deg)}
.hero-gallery-preview img {object-position:top;border-radius:inherit;animation:none}
.hero-gallery-preview:is(:hover,:focus-visible) {transform:rotate(0) translateY(-5px)}
.showcase {
  padding-block:clamp(44px,6vw,96px) 0;
}
.showcase-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:16px 32px;
  flex-wrap:wrap;
  margin-block-end:20px;
}
.showcase-heading .eyebrow {
  color:#7a3f4c;
  margin-block-end:8px;
}
.showcase-heading h2 {
  color:var(--wine-deep);
  font:400 clamp(2.1rem,5vw,4.9rem)/1.2 var(--display);
  letter-spacing:-.045em;
}
:lang(ar) .showcase-heading h2 {
  font-size:clamp(1.65rem,3.6vw,3.65rem);
  font-weight:550;
  letter-spacing:-.02em;
}
.showcase-description {
  color:var(--muted);
  max-width:62ch;
  margin-block-start:8px;
  font-size:.9rem;
}
.showcase-store {
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  min-height:44px;
  padding:.4rem .9rem;
  border:1px solid #c5a499;
  border-radius:99px;
  font-size:.81rem;
  color:var(--wine);
}
.showcase-store:hover {background:#f5e2d7}
.showcase-filters {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  width:fit-content;
  padding:4px;
  margin-block:0 18px;
  border:1px solid var(--line);
  border-radius:19px;
  background:#fcf7ee;
}
.showcase-filters button {
  min-height:44px;
  padding:.4rem .9rem;
  border:1px solid transparent;
  border-radius:14px;
  background:transparent;
  color:var(--wine);
  font-size:.8rem;
  font-weight:550;
}
.showcase-filters button:hover {background:#f0dfd4}
.showcase-filters button[aria-pressed=true] {
  background:var(--wine);
  color:#fff7ec;
}
.showcase-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(11px,1.6vw,22px);
}
.showcase-card {
  --stage:#d7c2ad;
  --glow:#f2e5d3;
  --shadow:#55301f4d;
  grid-column:span 2;
  min-width:0;
  overflow:hidden;
  background:#fffaf3;
  border:1px solid var(--line);
  border-radius:17px;
  box-shadow:0 8px 26px -18px #44242d66;
}
.showcase-card[data-theme=wine] {--stage:#3d1020;--glow:#9c4657;--shadow:#1e0a16a8}
.showcase-card[data-theme=smoke] {--stage:#372e3a;--glow:#8f7889;--shadow:#180b22a8}
.showcase-card[data-theme=petal] {--stage:#d6aa99;--glow:#fae2d7}
.showcase-card[data-theme=copper] {--stage:#92533f;--glow:#dca58b;--shadow:#5423239c}
.showcase-card[data-theme=olive] {--stage:#66614d;--glow:#a5a084;--shadow:#2b2a1cb5}
.scene-home {grid-column:span 4}
.scene-catalog {grid-column:span 2}
.showcase-grid[data-filter=desktop] .scene-cart,
.showcase-grid[data-filter=desktop] .scene-journal {grid-column:span 3}
.scene-preview {
  display:block;
  position:relative;
  width:100%;
  padding:0;
  overflow:hidden;
  border:0;
  color:#2c1621;
  border-start-start-radius:inherit;
  border-start-end-radius:inherit;
  background:var(--stage);
}
.scene-preview:focus-visible {outline-offset:-5px;outline-color:#f8e5d5}
.scene-art {
  position:relative;
  isolation:isolate;
  display:block;
  height:clamp(215px,24vw,340px);
  overflow:hidden;
  direction:ltr;
  background:
    repeating-linear-gradient(132deg,#ffffff09 0 1px,transparent 1px 8px),
    radial-gradient(ellipse at 25% 14%,var(--glow) 0%,transparent 78%),
    linear-gradient(160deg,var(--glow),var(--stage) 76%);
}
.scene-art::before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:9%;
  border:1px solid #fff4ea52;
  border-radius:44% 47% 11% 13%;
  transform:rotate(-11deg);
  background:linear-gradient(112deg,#fff9e72b,transparent 65%);
}
.scene-art::after {
  content:'';
  position:absolute;
  pointer-events:none;
  inset:52% 0 0;
  z-index:-1;
  background:linear-gradient(transparent,var(--shadow));
}
.mock-screen {
  position:absolute;
  display:block;
  overflow:hidden;
  background:#fff;
  transition:transform .38s cubic-bezier(.2,.65,.25,1);
}
.mock-screen img {width:100%;height:auto}
.mock-desktop {
  --tilt:-8deg;
  z-index:1;
  width:79%;
  left:2%;
  bottom:9%;
  border:clamp(3px,.48vw,7px) solid #281b22;
  border-top-width:clamp(11px,1.15vw,18px);
  border-radius:clamp(7px,1vw,14px);
  box-shadow:0 15px 30px var(--shadow),0 0 0 1px #fbeee689;
  transform:rotate(var(--tilt));
  transform-origin:50% 75%;
}
.mock-desktop::before {
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:#ddaf999e;
}
.mock-mobile {
  --tilt:9deg;
  z-index:2;
  width:26%;
  right:8%;
  bottom:4%;
  border:clamp(3px,.5vw,7px) solid #25191f;
  border-radius:clamp(9px,1.55vw,22px);
  box-shadow:0 18px 27px var(--shadow),0 0 0 1px #fbeee6aa;
  transform:rotate(var(--tilt));
  transform-origin:50% 76%;
}
.scene-home .mock-desktop {left:5%;width:72%;bottom:-13%;--tilt:-6deg}
.scene-home .mock-mobile {width:24%;right:12%;bottom:-14%;--tilt:9deg}
.scene-catalog .mock-desktop {left:2%;bottom:14%;--tilt:-13deg}
.scene-catalog .mock-mobile {width:32%;right:5%;bottom:7%;--tilt:9deg}
.scene-search .mock-desktop {left:3%;bottom:18%;--tilt:10deg}
.scene-search .mock-mobile {left:10%;right:auto;bottom:4%;width:30%;--tilt:-12deg}
.scene-product .mock-mobile,.scene-quick .mock-mobile {width:32%;left:14%;right:auto;bottom:2%;--tilt:-12deg}
.scene-product .mock-desktop,.scene-quick .mock-desktop {left:auto;right:3%;bottom:15%;width:70%;--tilt:11deg}
.scene-menu .scene-art::before {border-radius:50%;inset:6% 14%}
.scene-cart .mock-desktop,.scene-journal .mock-desktop {bottom:1%}
.scene-cart .mock-mobile,.scene-journal .mock-mobile {width:24%;bottom:-7%}
.scene-art[data-device=desktop] .mock-desktop {
  width:min(84%,440px);
  top:50%;
  left:50%;
  bottom:auto;
  right:auto;
  transform:translate(-50%,-50%) rotate(-5deg);
}
.scene-art[data-device=mobile] .mock-mobile {
  width:auto;
  height:82%;
  aspect-ratio:390/844;
  left:50%;
  top:50%;
  bottom:auto;
  right:auto;
  transform:translate(-50%,-50%) rotate(-8deg);
}
.scene-expand {
  position:absolute;
  z-index:3;
  inset-block-start:10px;
  inset-inline-end:10px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid #2c162127;
  border-radius:50%;
  background:#fff5e8;
  font:600 17px/1 Arial,sans-serif;
}
@media(hover:hover) {
  .scene-preview:hover .mock-screen {transform:rotate(0) translateY(-5px)}
  .scene-preview:hover .scene-art[data-device] .mock-screen:only-child {transform:translate(-50%,-51%) rotate(0)}
  .scene-preview:hover .scene-expand {background:#fff;color:var(--wine)}
}
.scene-caption {padding:clamp(13px,1.7vw,23px)}
.scene-caption h3 {color:var(--wine-deep);font-size:clamp(1rem,1.4vw,1.35rem);font-weight:650}
.scene-caption p {margin-block-start:5px;color:var(--muted);font-size:.82rem}
.showcase-dialog {
  width:min(94vw,1240px);
  max-height:94dvh;
  color:#fff7ee;
  background:#28151e;
  border-color:#b9938d;
  overflow:auto;
  padding:0;
}
.showcase-dialog[data-device=mobile] {width:min(92vw,475px)}
.showcase-dialog-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px clamp(12px,2vw,24px);
}
.showcase-dialog-bar h2 {font-size:clamp(.92rem,2.4vw,1.45rem);margin-block-end:3px}
.showcase-dialog-bar p {color:#f1cabe;font-size:.75rem}
.showcase-dialog-bar .icon-button {color:#321421}
.showcase-dialog img {
  display:block;
  width:100%;
  height:clamp(160px,68dvh,760px);
  object-fit:contain;
  background:#1e1017;
}
.showcase-dialog[data-device=mobile] img {height:min(69dvh,820px)}
.showcase-dialog-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px 8px;
  padding:7px clamp(8px,2vw,20px);
}
.showcase-dialog-actions :is(button,a) {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  min-height:44px;
  padding:.3rem .55rem;
  border:1px solid transparent;
  border-radius:8px;
  background:none;
  color:inherit;
  font-size:.76rem;
}
.showcase-dialog-actions :is(button,a):hover {background:#56303d}
.showcase-dialog-actions a {text-decoration:underline;text-underline-offset:.24em}
.showcase-dialog-actions [data-icon] {display:inline-block}
.showcase-dialog-actions [data-shot-step="-1"] [data-icon] {transform:scaleX(-1)}
.mobile-nav {grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1080px) and (min-width:821px) {
  .top-nav > a,.contents-trigger {padding-inline:.55rem}
  .topbar .wordmark > span {display:none}
}
@media(max-width:940px) {
  .showcase-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .showcase .showcase-grid .showcase-card {grid-column:auto}
  .showcase .showcase-grid .scene-home,
  .showcase .showcase-grid:not([data-filter=desktop]) .scene-journal {grid-column:span 2}
  .scene-home .scene-art {height:clamp(240px,42vw,380px)}
}
@media(max-width:560px) {
  .hero-image {width:100%;min-height:0}
  .hero-gallery-preview {inset-inline-start:8%;inset-block-end:9%;width:clamp(59px,17vw,94px);border-radius:10px}
  .showcase {padding-block-start:36px}
  .showcase-heading {margin-block-end:14px;gap:10px}
  .showcase-filters {margin-block-end:12px}
  .showcase-grid {grid-template-columns:1fr}
  .showcase .showcase-grid .showcase-card {grid-column:1}
  .showcase-card .scene-art {height:clamp(182px,61vw,310px)}
  .scene-home .mock-desktop {bottom:12%;width:75%;left:3%}
  .scene-home .mock-mobile {bottom:6%;width:30%;right:8%}
  .scene-cart .mock-mobile,.scene-journal .mock-mobile {width:30%;bottom:4%}
  .mobile-nav :is(button,a) {font-size:.63rem}
}
@media print {.showcase {display:none!important}}