/* Shared by every page that loads shop-experience.js: base shop classes, buttons, toast, dialog. */
.shopPage { width: min(var(--tgs-container, 80rem), 100% - 2 * var(--tgs-gutter, 1rem)); margin: 1.5rem auto 4.5rem; padding: 0; color: var(--tgs-ink, #1B1030); }
.shopEyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .16em; color: var(--tgs-violet-700, #5B21B6); }
.shopMuted { color: var(--tgs-muted, #6B6485); font-size: .9375rem; line-height: 1.7; }
.shopVisuallyHidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.shopPanel { min-width: 0; padding: 1.25rem; border: 1px solid var(--tgs-line, #E7E0F7); border-radius: var(--tgs-r-md, 1.25rem); background: var(--tgs-white, #fff); box-shadow: var(--tgs-shadow-sm, 0 6px 20px rgba(91, 33, 182, .08)); }
.shopForm { display: grid; gap: 1rem; }
.shopForm label { display: grid; gap: .45rem; font-size: .9375rem; color: var(--tgs-muted, #6B6485); }
.shopForm input { width: 100%; min-width: 0; min-height: var(--tgs-tap, 2.75rem); padding: .7rem .9rem; border: 1px solid var(--tgs-line, #E7E0F7); border-radius: var(--tgs-r-sm, .75rem); background: var(--tgs-white, #fff); color: var(--tgs-ink, #1B1030); font: inherit; font-size: 1rem; }
.shopSummary { padding: 1.25rem; border-radius: var(--tgs-r-md, 1.25rem); background: var(--tgs-grad-dark, linear-gradient(160deg, #150A2E, #2A0F5C 60%, #4C1D95)); color: #fff; }
.shopSocial { display: flex; flex-wrap: wrap; gap: .6rem; }
.shopSocial a { display: inline-flex; align-items: center; min-height: var(--tgs-tap, 2.75rem); padding: .5rem 1rem; border: 1px solid var(--tgs-line, #E7E0F7); border-radius: var(--tgs-r-pill, 999px); color: inherit; text-decoration: none; }

.shopBtn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: var(--tgs-tap, 2.75rem); padding: .6rem 1.25rem; border: 1px solid var(--tgs-violet-200, #DDD6FE); border-radius: var(--tgs-r-pill, 999px); background: var(--tgs-white, #fff); color: var(--tgs-violet-800, #3B0A7A); font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: transform .25s var(--tgs-ease, ease), box-shadow .25s var(--tgs-ease, ease); }
.shopBtnGold { border-color: transparent; background: var(--tgs-grad-primary, linear-gradient(135deg, #3B0A7A, #5B21B6 50%, #8B5CF6)); color: #fff; }
.shopBtnLight { border-color: rgba(255, 255, 255, .55); background: #fff; color: var(--tgs-violet-900, #2A0F5C); }
.shopBtn:disabled { opacity: .5; cursor: not-allowed; }
.shopBtn:focus-visible, .shopRemove:focus-visible, .tgsToastClose:focus-visible, .tgsDialogX:focus-visible { outline: 3px solid var(--tgs-violet-500, #8B5CF6); outline-offset: 2px; }
.tgsAddCart, .tgsAddFav { cursor: pointer; }
@media (hover: hover) {
  .shopBtn:not(:disabled):hover { transform: translateY(-2px); box-shadow: var(--tgs-shadow-sm, 0 6px 20px rgba(91, 33, 182, .08)); }
}

.tgsToastHost { position: fixed; z-index: 10010; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); left: 1rem; display: grid; gap: .6rem; max-width: 24rem; margin-left: auto; font-family: var(--tgs-font-body, Inter, system-ui, sans-serif); }
.tgsToast { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; border: 1px solid var(--tgs-line, #E7E0F7); border-radius: var(--tgs-r-sm, .75rem); background: #fff; color: var(--tgs-ink, #1B1030); box-shadow: var(--tgs-shadow-md, 0 20px 60px rgba(91, 33, 182, .14)); font-size: .9375rem; line-height: 1.45; }
.tgsToast.isSuccess { border-left: 4px solid var(--tgs-ok, #1F7A55); }
.tgsToast.isError { border-left: 4px solid var(--tgs-bad, #B3261E); }
.tgsToastClose { flex: 0 0 auto; width: var(--tgs-tap, 2.75rem); height: var(--tgs-tap, 2.75rem); border: 0; border-radius: 50%; background: var(--tgs-violet-50, #F6F2FF); color: var(--tgs-violet-800, #3B0A7A); font-size: 1.5rem; cursor: pointer; }

.tgsDialogBackdrop { position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center; padding: 1rem; overflow-y: auto; background: rgba(21, 10, 46, .6); }
.tgsDialog { position: relative; width: min(32rem, 100%); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.5rem 1.25rem; border-radius: var(--tgs-r-lg, 1.75rem); background: #fff; color: var(--tgs-ink, #1B1030); box-shadow: var(--tgs-shadow-md, 0 20px 60px rgba(91, 33, 182, .14)); }
.tgsDialog h2 { margin: .4rem 2.5rem .6rem 0; font-family: var(--tgs-font-head, 'Cormorant Garamond', Georgia, serif); font-size: var(--tgs-step-2, 1.9rem); font-weight: 500; line-height: 1.1; }
.tgsDialogX { position: absolute; top: .5rem; right: .5rem; width: var(--tgs-tap, 2.75rem); height: var(--tgs-tap, 2.75rem); border: 0; border-radius: 50%; background: var(--tgs-violet-50, #F6F2FF); color: var(--tgs-violet-800, #3B0A7A); font-size: 1.5rem; cursor: pointer; }
.tgsDialogIntro, .tgsDialogNote { margin: 0 0 1rem; color: var(--tgs-muted, #6B6485); font-size: .9375rem; line-height: 1.6; }
.tgsDialogForm { display: grid; gap: .9rem; }
.tgsDialogField { display: grid; gap: .4rem; font-size: .9375rem; font-weight: 600; color: var(--tgs-violet-900, #2A0F5C); }
.tgsDialogField input, .tgsDialogField textarea { width: 100%; min-width: 0; min-height: var(--tgs-tap, 2.75rem); padding: .7rem .9rem; border: 1px solid var(--tgs-line, #E7E0F7); border-radius: var(--tgs-r-sm, .75rem); background: #fff; color: var(--tgs-ink, #1B1030); font: inherit; font-size: 1rem; font-weight: 400; }
.tgsDialogField input[aria-invalid="true"] { border-color: var(--tgs-bad, #B3261E); }
.tgsDialogField input:focus-visible, .tgsDialogField textarea:focus-visible { outline: 3px solid var(--tgs-violet-500, #8B5CF6); outline-offset: 1px; }
.tgsDialogReadonly { margin: 0; padding: .7rem .9rem; border-radius: var(--tgs-r-sm, .75rem); background: var(--tgs-violet-50, #F6F2FF); font-weight: 400; overflow-wrap: anywhere; }
.tgsDialogError { margin-top: .9rem; padding: .7rem .9rem; border-radius: var(--tgs-r-sm, .75rem); background: #FBE4E2; color: var(--tgs-bad, #B3261E); font-size: .9375rem; line-height: 1.5; }
.tgsDialogActions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.tgsDialogActions .shopBtn { flex: 1 1 10rem; }
.tgsSuccessMark { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--tgs-grad-primary, linear-gradient(135deg, #3B0A7A, #5B21B6 50%, #8B5CF6)); color: #fff; font-size: 1.5rem; }
.tgsSuccessMessage { resize: vertical; line-height: 1.5; font-size: .9375rem; }

@media (min-width: 480px) {
  .shopPanel { padding: 1.5rem; }
  .tgsDialog { padding: 2rem; }
}
@media (min-width: 768px) {
  .tgsToastHost { left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .shopBtn { transition: none; }
}