/* Final customer-facing layout polish for the Allahoroskop collection. */

.shop-standalone {
  --shop-max: 1180px;
  --shop-gap: clamp(16px, 2vw, 24px);
}

.shop-standalone em {
  font-family: var(--ah-display) !important;
  font-style: normal !important;
  letter-spacing: -.01em;
}

.shop-server-coming-soon {
  width: fit-content;
  max-width: 100%;
  margin: 24px 0 2px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 13px;
  border: 1px solid rgba(179, 136, 79, .28);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(246,240,232,.86));
  box-shadow: 0 12px 34px rgba(56,39,30,.06);
}
.shop-server-coming-soon span {
  color: var(--ah-plum);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.shop-server-coming-soon p {
  margin: 0;
  color: #7c7068;
  font-size: .74rem;
}

.shop-server-cover-status {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  padding: .48rem .72rem;
  border: 1px solid rgba(255,255,255,.44);
  border-radius: 999px;
  color: #fff;
  background: rgba(38,27,33,.76);
  backdrop-filter: blur(10px);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* The collection cards form a calm, even grid despite different text lengths. */
.shop-standalone .shop-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.shop-standalone .product-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.shop-standalone .product-visual {
  flex: 0 0 auto;
  aspect-ratio: 1.22;
}
.shop-standalone .product-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.shop-standalone .product-copy > p {
  min-height: 0 !important;
  margin-bottom: 14px;
}
.shop-v4-card-type,
.shop-server-facts { flex: 0 0 auto; }
.shop-v4-card-prices {
  margin-top: auto !important;
  padding-top: 18px !important;
}
.shop-v4-card-price {
  min-height: 91px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.shop-v4-card-price span {
  color: var(--ah-plum) !important;
  font-weight: 700;
}
.shop-v4-card-action {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

/* Keep the four flagship cases balanced and visually prominent. */
.shop-v4-flagship-grid { align-items: stretch; }
.shop-v4-flagship-grid article {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.shop-v4-flagship-grid article > p { flex: 1; }
.shop-v4-flagship-grid article > a { margin-top: auto; }

.shop-server-quality-lead {
  max-width: 420px;
  margin: 18px 0 0;
  color: rgba(255,250,243,.72);
  line-height: 1.68;
}

/* Product pages: clear hierarchy and controlled line length. */
.shop-standalone .game-hero-copy { max-width: 740px; }
.shop-standalone .game-hero-copy > p:not(.eyebrow) { max-width: 690px; }
.shop-server-hero-prices { max-width: 540px; }
.shop-v4-story-copy,
.shop-v4-ledger > div,
.shop-v4-play > header,
.shop-v4-purchase > header > div { max-width: 760px; }
.shop-v4-opening { max-width: 720px !important; }

/* Real, protected product previews: readable on screen, unusable as print masters. */
.shop-v4-preview {
  padding: clamp(58px, 8vw, 108px) 0;
  color: #f8efe3;
  background:
    radial-gradient(circle at 88% 8%, rgba(197,151,84,.14), transparent 28%),
    linear-gradient(145deg, #291823, #151015 76%);
}
.shop-v4-preview-inner {
  width: min(calc(100% - 34px), 1180px);
  margin-inline: auto;
}
.shop-v4-preview header {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: clamp(28px, 6vw, 82px);
  align-items: end;
  margin-bottom: 34px;
}
.shop-v4-preview header h2 {
  max-width: 820px;
  margin: 5px 0 0;
  color: inherit;
  font-size: clamp(2.5rem, 5.2vw, 5rem);
  line-height: .98;
}
.shop-v4-preview header > p {
  margin: 0;
  color: rgba(248,239,227,.72);
  line-height: 1.72;
}
.shop-v4-preview .eyebrow { color: #d9b574; }
.shop-v4-preview-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(13px, 2vw, 24px);
}
.shop-v4-preview-gallery figure { min-width: 0; margin: 0; }
.shop-v4-preview-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 720 / 1019;
  border: 1px solid rgba(230,198,142,.3);
  border-radius: 4px;
  background: #eee7dd;
  box-shadow: 0 28px 62px rgba(0,0,0,.34);
}
.shop-v4-preview-frame:after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255,255,255,.19);
  pointer-events: none;
}
.shop-v4-preview-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.shop-v4-preview-frame > span {
  position: absolute;
  z-index: 2;
  right: 13px;
  bottom: 13px;
  padding: .43rem .6rem;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  color: #fff5e4;
  background: rgba(43,23,35,.82);
  backdrop-filter: blur(8px);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .1em;
}
.shop-v4-preview-gallery figcaption {
  display: grid;
  gap: 4px;
  padding: 15px 4px 0;
}
.shop-v4-preview-gallery figcaption small {
  color: #c49b5c;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.shop-v4-preview-gallery figcaption strong {
  color: #f6ecde;
  font-family: var(--ah-display);
  font-size: 1.16rem;
  font-weight: 500;
}
.shop-v4-preview-note {
  max-width: 940px;
  margin: 34px 0 0;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  border-top: 1px solid rgba(222,186,121,.27);
  border-bottom: 1px solid rgba(222,186,121,.16);
  color: rgba(248,239,227,.7);
  font-size: .76rem;
  line-height: 1.68;
}
.shop-v4-preview-note strong { color: #e7c782; white-space: nowrap; }

.shop-v4-editions { align-items: stretch; }
.shop-v4-edition {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 25px 8px 25px 8px;
}
.shop-v4-edition > ul { flex: 1; }
.shop-v4-edition > p { min-height: 4.8em; }
.shop-server-order { width: 100%; }
.shop-server-order.is-coming-soon:disabled {
  opacity: 1;
  color: #5b3d4f;
  border-color: rgba(86,50,71,.26);
  background: linear-gradient(135deg, #f5ede5, #eee1d4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.56);
  cursor: default;
}
.shop-v4-edition--print .shop-server-order.is-coming-soon:disabled {
  color: #fff9f0;
  border-color: rgba(255,255,255,.2);
  background: #563247;
}

.shop-v4-quality > div:last-child { align-items: stretch; }
.shop-v4-quality article {
  height: 100%;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
}

/* Related works sit like small editorial recommendations. */
.shop-server-related-grid a {
  min-width: 0;
  align-items: center;
  border-radius: 18px 6px 18px 6px;
  box-shadow: 0 14px 38px rgba(58,39,31,.055);
  transition: transform .2s ease, box-shadow .2s ease;
}
.shop-server-related-grid a:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 46px rgba(58,39,31,.09);
}

@media (min-width: 1101px) {
  .shop-standalone .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shop-v4-card--flagship .product-visual { aspect-ratio: 1.15; }
}

@media (max-width: 1100px) and (min-width: 701px) {
  .shop-standalone .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-server-hero .shell { grid-template-columns: 1fr 1fr; gap: 38px; }
  .shop-server-collage { min-height: 430px; }
}

@media (max-width: 980px) {
  .shop-server-hero .shell,
  .shop-standalone .game-hero .shell { grid-template-columns: 1fr; }
  .shop-server-hero .shell > div:first-child { order: 1; }
  .shop-server-collage { order: 2 !important; min-height: 390px; margin-top: 18px; }
  .shop-standalone .game-cover { width: min(100%, 570px); min-height: 0; aspect-ratio: .78; margin-inline: auto; }
  .shop-standalone .game-hero-copy { max-width: 760px; margin-inline: auto; }
  .shop-v4-story { grid-template-columns: 1fr; }
  .shop-v4-story-art { min-height: 280px; }
  .shop-v4-setup,
  .shop-v4-ledger,
  .shop-v4-purchase > header,
  .shop-v4-quality { grid-template-columns: 1fr; }
  .shop-v4-preview header { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .shop-standalone .shop-grid { grid-template-columns: 1fr !important; }
  .shop-server-hero { padding-top: 38px !important; }
  .shop-server-hero .shell > div:first-child { order: 1; }
  .shop-server-collage { order: 2 !important; min-height: 300px; margin-top: 28px; }
  .shop-server-collage-card { width: 43%; }
  .shop-server-collage-card.card-1 { left: 2%; top: 15%; }
  .shop-server-collage-card.card-2 { right: 2%; top: 2%; }
  .shop-server-collage-card.card-3 { left: 29%; bottom: 0; }
  .shop-server-coming-soon { width: 100%; display: grid; gap: 4px; }
  .shop-server-filters { position: sticky; z-index: 20; top: 67px; padding: 9px 0; background: rgba(255,253,249,.95); backdrop-filter: blur(12px); }
  .shop-v4-card-prices { grid-template-columns: 1fr 1fr !important; }
  .shop-v4-card-action { grid-column: 1 / -1 !important; }
  .shop-v4-card-price { min-height: 82px; padding: 10px !important; }
  .shop-v4-card-price strong { font-size: 1.08rem !important; }
  .shop-v4-flagship-grid { grid-template-columns: 1fr !important; }
  .shop-v4-flagship-grid article { min-height: 0; }
  .shop-standalone .game-hero { padding-top: 34px !important; }
  .shop-standalone .game-cover { width: 100%; aspect-ratio: .82; }
  .shop-standalone .game-hero-copy h1 { font-size: clamp(2.75rem, 14vw, 4.5rem) !important; }
  .shop-standalone .game-facts { grid-template-columns: 1fr 1fr; }
  .shop-server-hero-prices { grid-template-columns: 1fr 1fr !important; }
  .shop-v4-chapters { grid-template-columns: 1fr !important; }
  .shop-v4-chapters li + li { border-left: 0 !important; border-top: 1px solid var(--shop-line); }
  .shop-v4-example > div,
  .shop-v4-modes,
  .shop-v4-editions,
  .shop-v4-quality > div:last-child { grid-template-columns: 1fr !important; }
  .shop-v4-edition > p { min-height: 0; }
  .shop-server-related-grid a { grid-template-columns: 82px 1fr; }
  .shop-v4-preview-inner { width: min(calc(100% - 20px), 1180px); }
  .shop-v4-preview-gallery {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(255px, 82vw);
    overflow-x: auto;
    padding: 2px 2px 18px;
    scroll-snap-type: x mandatory;
    scrollbar-color: #b78a4d rgba(255,255,255,.08);
  }
  .shop-v4-preview-gallery figure { scroll-snap-align: start; }
  .shop-v4-preview-note { grid-template-columns: 1fr; gap: 6px; }
  .shop-v4-preview-note strong { white-space: normal; }
}

@media (max-width: 430px) {
  .shop-v4-card-prices,
  .shop-server-hero-prices { grid-template-columns: 1fr !important; }
  .shop-v4-card-action { grid-column: 1 !important; }
  .shop-server-filters { grid-template-columns: 1fr 1fr; }
}

@media print {
  .shop-v4-preview-gallery { display: none !important; }
  .shop-v4-preview { padding: 24px 0 !important; color: #24151e !important; background: #fff !important; }
  .shop-v4-preview header > p,
  .shop-v4-preview-note { color: #24151e !important; }
  .shop-v4-preview-note:after { content: " Förhandsvisningsbilder visas inte i utskrift."; }
}