/* =====================================================================
   shop.css - styles of the shop pages (Tarot cards, Five Elements).
   Loaded AFTER site.css (header, menu, cart, footer). Own classes: sh-
   Same look as the free reading page: dark page, gold Cinzel titles,
   gold buttons, dark panels with a thin gold border.
   ===================================================================== */

/* ---------- page ---------- */
html { background: #07040c; }
body.tr-page.sh-page { margin: 0; background: #07040c; color: #e8dfd0; overflow-x: clip; }

.sh {
  --gold: #d9b46a;
  --text: #e8dfd0;
  --muted: #b3a5be;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 16px 70px;
  color: var(--text);
  font-family: var(--font-main);
}
.sh, .sh * { box-sizing: border-box; }
.sh a { font-family: inherit; }

/* ---------- breadcrumbs ---------- */
.sh-crumbs { padding: 18px 0 4px; }
.sh-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; font-family: var(--font-main); font-size: .82rem; letter-spacing: .04em; }
.sh-crumbs li { color: #d9b46a; }
.sh-crumbs li + li::before { content: "/"; margin: 0 9px; color: rgba(217, 180, 106, .5); }
.sh-crumbs a { color: #a99bb5; text-decoration: none; }
.sh-crumbs a:hover { color: #d9b46a; }

/* ---------- title ---------- */
.sh-title { padding: 18px 0 22px; text-align: center; }
.sh-title-line { display: inline-block; max-width: 100%; }   /* the underline is as wide as the title */
.sh-title h1 {
  display: inline-block; margin: 0;
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  font-weight: 500; font-size: clamp(.55rem, 3.1vw, 1.5rem); white-space: nowrap;   /* title size: change the 1.5rem to make it bigger/smaller */
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.12;
  background: linear-gradient(180deg, #f3deaa 0%, #d9b46a 45%, #a8782f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.sh-title .sh-rule { width: 100%; height: 1px; margin: 12px 0 0; background: linear-gradient(90deg, transparent, #d9b46a, transparent); }   /* centered, fading at both ends */
.sh-sub { margin: 12px 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(1rem, 2.6vw, 1.25rem); line-height: 1.4; color: #d8cbe0; }

/* ---------- product panel ---------- */
.sh-product {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center;
  gap: clamp(28px, 6vw, 64px);   /* SPACE BETWEEN THE IMAGE AND THE TEXT (smallest, grows with the screen, largest) */
  padding: clamp(12px, 2.4vw, 20px);
  border: 1px solid rgba(217, 180, 106, .35); border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 116, 43, .22), transparent 60%),
    linear-gradient(#120a1a, #0a0610);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .6), 0 10px 40px rgba(0, 0, 0, .5);
}
.sh-pack { cursor: zoom-in; border-radius: 10px; overflow: hidden; box-shadow: 0 0 28px rgba(217, 180, 106, .3), 0 8px 24px rgba(0, 0, 0, .6); border: 1px solid rgba(217, 180, 106, .35); background: #0b0710; }
.sh-pack img { display: block; width: 100%; height: auto; }

.sh-product-name { margin: 0 0 12px; font-family: 'Cinzel', Georgia, serif; font-weight: 500; font-size: clamp(1rem, 2.8vw, 1.3rem); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); line-height: 1.2; }
.sh-product-name span { display: block; margin-top: 4px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; text-transform: none; letter-spacing: .02em; font-size: 1.15em; color: #d8cbe0; }
.sh-facts { list-style: none; margin: 0 0 16px; padding: 0; color: #cdbfd6; line-height: 1.45; font-size: .95rem; }
.sh-facts li { position: relative; padding: 3px 0 3px 22px; }
.sh-facts li::before { content: "\25C6"; position: absolute; left: 0; top: 5px; font-size: .6rem; line-height: 1.9; color: var(--gold); }

/* gold buy button (the class .alone-btn and the wrapper .card-button are used by alone-btn.js, keep them) */
.card-button { --buy-w: 200px; --buy-pad-y: 7px; --buy-pad-x: 12px; --buy-size: .8rem; --buy-radius: 11px; margin: 0 0 14px; }   /* BUTTON SIZE: change these 5 numbers (width, padding up/down, padding left/right, text size, roundness) */
.card-button .alone-btn {
  position: relative; display: block; width: 100%; max-width: var(--buy-w); cursor: pointer;
  padding: var(--buy-pad-y) var(--buy-pad-x); border: 0; border-radius: var(--buy-radius);
  font-family: 'Cinzel', Georgia, serif; font-weight: 900; font-size: var(--buy-size); letter-spacing: .1em; text-transform: uppercase; text-align: center; line-height: 1.2;
  color: #1a0f08;
  background: linear-gradient(135deg, #f3deaa 0%, #d9b46a 38%, #b88a3c 62%, #e8cb86 100%);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.card-button .alone-btn:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 10px 30px rgba(217, 180, 106, .35), inset 0 1px 0 rgba(255, 255, 255, .5); }
.sh-try { display: inline-block; font-style: italic; color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(217, 180, 106, .45); padding-bottom: 1px; }
.sh-try:hover { color: #f3deaa; border-color: #f3deaa; }

/* ---------- text ---------- */
.sh-text { max-width: 780px; margin: 36px auto 10px; color: #cdbfd6; line-height: 1.65; }
.sh-text h2 { margin: 26px 0 8px; font-family: 'Cinzel', Georgia, serif; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: 1.1rem; color: var(--gold); }
.sh-text h2:first-child { margin-top: 0; }
.sh-text p { margin: 0 0 10px; }
.sh-text ul { margin: 0 0 10px; padding-left: 1.2em; }
.sh-text li { margin: 3px 0; }
.sh-text li::marker { color: var(--gold); }
.sh-text.sh-center { text-align: center; }   /* centered text block */
.sh-text a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(217, 180, 106, .5); }
.sh-text a:hover { color: #f3deaa; }

/* ---------- card gallery (class names are used by lightbox.js) ---------- */
.sh-gallery-wrap { margin-top: 38px; }
.sh-gallery-title { margin: 0; text-align: center; font-family: 'Cinzel', Georgia, serif; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: 1.2rem; color: var(--gold); }
.sh-gallery-hint { margin: 4px 0 16px; text-align: center; color: var(--muted); font-style: italic; font-size: .92rem; }
.artgallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }   /* cards are centered, also on the last row */
.artgallery-item {
  flex: 0 0 150px; aspect-ratio: 7 / 10; cursor: zoom-in; overflow: hidden; border-radius: 8px;
  background: #0b0710; border: 1px solid rgba(217, 180, 106, .25);
  transition: transform .2s, box-shadow .25s, border-color .25s;
}
.artgallery-item img { display: block; width: 100%; height: 100%; object-fit: contain; }
.artgallery-item:hover { transform: translateY(-3px); border-color: rgba(217, 180, 106, .7); box-shadow: 0 0 22px rgba(217, 180, 106, .35); }
.sh-pack.artgallery-item { aspect-ratio: auto; transform: none; }
.sh-pack.artgallery-item:hover { transform: none; }

/* ---------- bottom gold buttons ---------- */
.sh-own { text-align: center; margin: 44px auto 10px; max-width: 900px; }
.sh-own .tr-rule { margin: 0 auto 18px; width: 200px; background: linear-gradient(90deg, transparent, #d9b46a, transparent); }
.sh-own h2 { margin: 0 0 8px; font-family: 'Cinzel', Georgia, serif; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; font-size: clamp(.7rem, 4vw, 1.2rem); color: var(--gold); }
.sh-own p { margin: 0 0 22px; color: #cdbfd6; line-height: 1.5; }
.sh-own-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 250px)); gap: clamp(8px, 2.4vw, 16px); justify-content: center; }
.sh-gold {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 100%; min-width: 0; min-height: clamp(44px, 12vw, 62px); padding: clamp(6px, 1.6vw, 10px) clamp(6px, 1.6vw, 14px);
  text-decoration: none; border-radius: 15px; color: #1a0f08;
  background: linear-gradient(135deg, #f3deaa 0%, #d9b46a 38%, #b88a3c 62%, #e8cb86 100%);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.sh-gold::before { content: ""; position: absolute; inset: clamp(2px, .6vw, 4px); border: 1px solid rgba(26, 15, 8, .45); border-radius: 2px; pointer-events: none; }
.sh-gold:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 10px 30px rgba(217, 180, 106, .35), inset 0 1px 0 rgba(255, 255, 255, .5); color: #1a0f08; }
.sh-gold-main { font-family: 'Cinzel', Georgia, serif; font-weight: 900; font-size: clamp(.58rem, 2.5vw, .92rem); letter-spacing: .08em; text-transform: uppercase; text-align: center; line-height: 1.2; }
.sh-gold-sub { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(.62rem, 2.6vw, .98rem); text-align: center; line-height: 1.15; }
/* second button: dark with gold outline */
.sh-gold-dark { background: transparent; color: var(--gold); box-shadow: none; border: 1px solid rgba(217, 180, 106, .6); }
.sh-gold-dark::before { display: none; }
.sh-gold-dark:hover { background: rgba(217, 180, 106, .15); color: #f3deaa; box-shadow: none; }

/* ---------- narrow screens: image above the text ---------- */
@media (max-width: 700px) {
  .sh-product { grid-template-columns: minmax(0, 1fr); }
  .sh-pack { max-width: 300px; margin: 0 auto; }
  /* image above the text: everything centered, title, list and button share the same width */
  .sh-buy { width: 100%; max-width: 340px; margin: 0 auto; text-align: center; }   /* WIDTH OF THE TEXT BLOCK AND THE BUTTON on small screens */
  .sh-facts li { padding: 3px 0; text-align: center; }
  .sh-facts li::before { position: static; display: inline-block; margin-right: 8px; vertical-align: middle; line-height: 1; }
  .card-button .alone-btn { max-width: 200px; margin: 0 auto;}
.artgallery { --gap: 15px; --side: 10px; gap: var(--gap); padding: 0 var(--side); margin-bottom: 0;}
.artgallery-item { flex-basis: min(calc((100% - 2 * var(--gap)) / 3), 180px); }
}
/* up to 500px: the title stops shrinking (same size as at 500px) and "Major Arcana" goes to a second line */
@media (max-width: 500px) {
  .sh-title h1 { font-size: .97rem; }
  .sh-title .sh-t2 { display: block; }
}

/* ---------- single-image product cards (Five Elements page: .gallery .item, likes, details button) ---------- */
/* =====================================================================
   shop-items.css - cards of single images ("View Details and Purchase")
   with like buttons and the SOLD label. Used by the Five Elements page,
   later by other shop pages. Loaded together with shop.css.
   The class names (.gallery .item, .like-container, .like-btn, .like-count,
   .item-info, .item-details-btn, .sold-item, .sold-indicator, .unavailable)
   are used by gallery-cart-likes.js - do not rename them.
   ===================================================================== */
.gallery { --gap: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.gallery .item {
  container-type: inline-size;   /* lets the title size follow the card width */
  position: relative; flex: 0 0 calc((100% - 4 * var(--gap)) / 5);   /* 5 in a row */
  overflow: hidden; border-radius: 12px; border: 1px solid rgba(217, 180, 106, .3);
  background: linear-gradient(#120a1a, #0a0610); box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
  transition: transform .2s, box-shadow .25s, border-color .25s;
}
.gallery .item:hover { transform: translateY(-3px); border-color: rgba(217, 180, 106, .7); box-shadow: 0 0 24px rgba(217, 180, 106, .3); }
.gallery .item > a { display: block; }
.gallery .item img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* like button: small gold pill in the top right corner of the picture */
.like-container { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 14px; border: 1px solid rgba(217, 180, 106, .5); background: rgba(10, 6, 16, .8); font-size: .78rem; line-height: 1.4; }
.like-btn { padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-main); font-size: inherit; color: #d9b46a; }
.like-btn:hover:not(:disabled) { color: #f3deaa; }
.like-btn.liked, .like-btn:disabled { color: #f3deaa; cursor: default; }
.like-count { color: #e8dfd0; }

.item-info { padding: 10px 3px 14px; text-align: center; }
.item-title { margin: 0 0 2px; font-family: 'Cinzel', Georgia, serif; font-weight: 500; font-size: min(1rem, 8.6cqw); white-space: nowrap; letter-spacing: .08em; text-transform: uppercase; color: #d9b46a; }   /* TITLE SIZE: change 1rem (biggest size) or 8.6cqw (how much it shrinks with the card); it always stays on one line */
.item-description { margin: 0 0 4px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(.85rem, 2.6vw, 1.05rem); line-height: 1.25; color: #d8cbe0; }
.item-tag { margin: 0 0 6px; font-size: .72rem; color: #b3a5be; }
.item-price { margin: 0 0 8px; font-family: 'Cinzel', Georgia, serif; font-size: .8rem; color: #f3deaa; }
.item-details-btn {
  display: block; width: 100%; cursor: pointer; padding: 4px 5px 2px 5px; border: 0; border-radius: 11px;  
  font-family: 'Cinzel', Georgia, serif; font-weight: 900; font-size: clamp(.55rem, 2vw, .66rem); letter-spacing: .06em; text-transform: uppercase; line-height: 1.25; color: #1a0f08;
  background: linear-gradient(135deg, #f3deaa 0%, #d9b46a 38%, #b88a3c 62%, #e8cb86 100%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: filter .2s, transform .2s;
}
.item-details-btn:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }

/* sold items (added by gallery-cart-likes.js) */
.sold-item img { filter: grayscale(.8) brightness(.55); }
.sold-indicator { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); padding: 6px 18px; border: 2px solid #d9b46a; border-radius: 6px; background: rgba(0, 0, 0, .65); color: #d9b46a; font-family: 'Cinzel', Georgia, serif; letter-spacing: .2em; pointer-events: none; }
.item-details-btn.unavailable { background: #2a2430; color: #8d8398; cursor: default; box-shadow: none; }

/* phones: 3 per row, like the cards above (--gap = space between, change only that number) */
@media (max-width: 700px) {
  .gallery { --gap: 15px; --side: 10px; gap: var(--gap); padding: 0 var(--side); }
  .gallery .item { flex-basis: min(calc((100% - 2 * var(--gap)) / 3), 180px); }
}
/* under 400px: cards AND single images 2 per row */
@media (max-width: 399px) {
  .artgallery .artgallery-item, .gallery .item { flex-basis: min(calc((100% - var(--gap)) / 2), 180px); }
}
/* under 320px: cards stay 2 per row, single images one by one */
@media (max-width: 319px) {
  .gallery .item { flex-basis: min(100%, 220px); }
}

/* The cards of the Five Elements page: same size as the single images, 5 in a row (class sh-five on .artgallery). */
@media (min-width: 701px) {
  .artgallery.sh-five { --gap: 22px; gap: var(--gap); }
  .artgallery.sh-five .artgallery-item { flex: 0 0 calc((100% - 4 * var(--gap)) / 5); }
}
/* big screens: both rows (cards and single images) stick out a little on each side to be wider than the text.  WIDER ROW: change the 80px (both places) */
@media (min-width: 1100px) {
  .artgallery.sh-five, .gallery { margin-left: -80px; margin-right: -80px; }
}

/* ---------- messages used by the cart scripts ---------- */
.flying-cart-message {
  position: fixed; z-index: 3000; pointer-events: none; white-space: nowrap;
  padding: 6px 12px; border-radius: 14px; background: #d9b46a; color: #1a0f08;
  font-family: var(--font-main); font-size: .85rem; font-weight: 700;
  transition: transform .6s ease-in, opacity .6s ease-in;
}
.cart-modal-overlay { position: fixed; inset: 0; z-index: 3100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .7); }
.cart-modal { max-width: 90vw; padding: 24px 28px; border: 1px solid rgba(217, 180, 106, .6); border-radius: 12px; background: #120a1a; color: #e8dfd0; text-align: center; line-height: 1.5; }
.cart-modal-ok-btn { display: block; margin: 16px auto 0; padding: 8px 26px; border: 0; border-radius: 10px; cursor: pointer; font-family: var(--font-main); background: linear-gradient(#e6c47c, #b88a3c); color: #1a0f08; }

/* ---------- lightbox (needed by lightbox.js: adds class "active") ---------- */
.lightbox { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; background: rgba(5, 3, 10, .94); }
.lightbox.active { display: flex; }
.lightbox-content { position: relative; display: flex; align-items: center; justify-content: center; max-width: 100vw; max-height: 100vh; }
.lightbox-image { display: block; width: auto; height: auto; max-width: min(92vw, 900px); max-height: 88vh; object-fit: contain; border-radius: 8px; box-shadow: 0 0 40px rgba(217, 180, 106, .25); }
.lightbox-close, .lightbox-nav {
  position: fixed; z-index: 3001; display: flex; align-items: center; justify-content: center; cursor: pointer;
  width: 46px; height: 46px; padding: 0 0 4px; border-radius: 50%; line-height: 1;
  border: 1px solid rgba(217, 180, 106, .6); background: rgba(10, 6, 16, .8); color: #d9b46a; font-size: 1.9rem;
  transition: background .2s, color .2s;
}
.lightbox-close:hover, .lightbox-nav:hover { background: #d9b46a; color: #1a0f08; }
.lightbox-close { top: 14px; right: 14px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
@media (max-width: 500px) { .lightbox-nav { width: 40px; height: 40px; font-size: 1.6rem; } .lightbox-prev { left: 6px; } .lightbox-next { right: 6px; } }