/* The shelf (four cards with one price each), the personalisation popup and the form
   inside it. Colours are the theme's own channels, so dark and light both work. */

.hp { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }

/* ---- the four cards ------------------------------------------------- */
.shop-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 52rem; margin: 0 auto; }
@media (min-width: 40rem) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }   /* two by two: no lone card */
.shop-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem 1.5rem; border-radius: .75rem; }
.shop-img { display: block; width: 100%; max-width: 15rem; aspect-ratio: 1; margin-bottom: 1.25rem; }
.shop-img img { width: 100%; height: 100%; object-fit: contain; }
.shop-card h3 { font-size: 1.25rem; font-weight: 700; color: rgb(var(--c-white)); margin: 0 0 .5rem; }
.shop-card p { color: rgb(var(--c-slate-400)); font-size: .875rem; margin: 0 0 1rem; flex-grow: 1; }
.shop-price { display: flex; align-items: baseline; justify-content: center; gap: .5rem; margin: 0 0 1rem !important; flex-grow: 0 !important; }
.shop-price strong { font-size: 1.75rem; font-weight: 800; color: rgb(var(--c-white)); }
.shop-price small { font-size: .75rem; color: rgb(var(--c-slate-500)); }
.shop-actions { display: flex; flex-direction: column; gap: .6rem; width: 100%; }
.shop-link { color: rgb(var(--c-brand)); font-size: .875rem; font-weight: 600; text-decoration: none; }
.shop-link:hover { text-decoration: underline; }

.perso-btn { display: inline-block; padding: .8rem 1.5rem; border: 0; border-radius: 999px; background: rgb(var(--c-brand)); color: rgb(var(--c-ink)); font: inherit; font-weight: 700; font-size: .95rem; text-align: center; text-decoration: none; cursor: pointer; }
.perso-btn:hover { background: rgb(var(--c-brand-light)); }
.perso-btn:focus-visible { outline: 2px solid rgb(var(--c-brand)); outline-offset: 3px; }
.perso-btn[disabled] { opacity: .6; cursor: wait; }
.perso-btn-block { display: block; width: 100%; }

/* ---- the popup ------------------------------------------------------ */
dialog.perso { width: min(56rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: 0; border: 1px solid rgb(var(--c-brand) / .35); border-radius: 1rem; background: rgb(var(--c-panel)); color: rgb(var(--c-white)); overflow: hidden; }
dialog.perso::backdrop { background: rgb(0 0 0 / .65); backdrop-filter: blur(3px); }
.perso-box { position: relative; max-height: calc(100dvh - 1.5rem); overflow-y: auto; padding: 1.75rem; }
.perso-x { position: absolute; inset-block-start: .75rem; inset-inline-end: .75rem; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: rgb(var(--c-slate-800)); color: rgb(var(--c-white)); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.perso-x:focus-visible { outline: 2px solid rgb(var(--c-brand)); }
.perso-eye { margin: 0 0 .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--c-brand)); }
.perso-box h2 { margin: 0 0 .25rem; font-size: 1.6rem; font-weight: 800; color: rgb(var(--c-white)); padding-inline-end: 2.5rem; }
.perso-sub { margin: 0 0 1.25rem; color: rgb(var(--c-slate-400)); font-size: .9rem; }
.perso-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 760px) { .perso-grid { grid-template-columns: .9fr 1.1fr; align-items: start; } }
.perso-pic { text-align: center; }
.perso-pic > img { width: 100%; max-height: 22rem; object-fit: contain; border-radius: .75rem; background: rgb(var(--c-slate-900)); }
.perso-pic a { display: inline-block; margin-top: .75rem; }

/* ---- the form --------------------------------------------------------- */
.perso-form { display: grid; gap: 1rem; text-align: start; }
.perso-form .pick { justify-content: flex-start; margin: 0; }
.f-field { display: grid; gap: .4rem; font-size: .85rem; font-weight: 600; color: rgb(var(--c-slate-300)); }
.f-field textarea { width: 100%; padding: .7rem .8rem; border: 1px solid rgb(var(--c-slate-700)); border-radius: .6rem; background: rgb(var(--c-ink)); color: rgb(var(--c-white)); font: inherit; font-weight: 400; resize: vertical; }
.f-field textarea:focus { outline: 2px solid rgb(var(--c-brand)); border-color: transparent; }
.f-opt { font-weight: 400; color: rgb(var(--c-slate-500)); }
.f-up { display: grid; gap: .2rem; padding: .9rem 1rem; border: 1.5px dashed rgb(var(--c-slate-600)); border-radius: .75rem; cursor: pointer; }
.f-up:hover, .f-up:focus-within { border-color: rgb(var(--c-brand)); }
.f-up strong { font-size: .9rem; color: rgb(var(--c-white)); }
.f-up span { font-size: .75rem; color: rgb(var(--c-slate-500)); }
.f-up input { font-size: .8rem; color: rgb(var(--c-slate-300)); max-width: 100%; }
.f-up em { font-style: normal; font-size: .8rem; color: rgb(var(--c-brand)); }
.f-qty { display: flex; align-items: baseline; gap: .6rem; padding-block: .6rem; border-block: 1px solid rgb(var(--c-slate-700)); font-size: .9rem; color: rgb(var(--c-slate-300)); }
.f-qty b { color: rgb(var(--c-white)); }
.f-qty strong { margin-inline-start: auto; font-size: 1.25rem; color: rgb(var(--c-white)); }
.f-hint { margin: 0; font-size: .78rem; line-height: 1.5; color: rgb(var(--c-slate-500)); }
.f-hint a { color: rgb(var(--c-brand)); text-decoration: underline; }
.f-status { min-height: 1.2em; margin: 0; font-size: .85rem; color: #e5484d; }
.f-status:empty { display: none; }

/* the product page: the form lives in a card */
#commander .perso-form { max-width: 34rem; margin: 1.5rem auto 0; }
#commander .shop-price { margin-bottom: 0 !important; }

.shop-more { text-align: center; margin: 1.5rem 0 0; }

/* the keychain that turns beside its form (kc_view in _perso.html, kc.js) */
.kc-pop { height: 20rem; }
.kc { display: flex; align-items: center; justify-content: center; perspective: 900px;
      touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.kc:active { cursor: grabbing; }
.kc[hidden] { display: none; }
.kc-body { position: relative; height: 92%; aspect-ratio: 46.5 / 53; max-width: 100%;
           transform-style: preserve-3d; --rim: #1f2937; }
.kc-face { position: absolute; inset: 0; width: 100%; height: 100%;
           backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.kc-back { transform: rotateY(180deg); }
.kc-rim { fill: var(--rim); }
.kc-hint { margin: .5rem 0 0; font-size: .8rem; color: rgb(var(--c-slate-500)); text-align: center; }
.f-check { display: flex; gap: .55rem; align-items: center; font-size: .85rem; font-weight: 600;
           color: rgb(var(--c-slate-300)); cursor: pointer; }
.f-check input { width: 1.05rem; height: 1.05rem; accent-color: rgb(var(--c-brand)); }
.f-field input[type=url], .f-field input[type=tel] { width: 100%; padding: .7rem .8rem; border: 1px solid rgb(var(--c-slate-700));
           border-radius: .6rem; background: rgb(var(--c-ink)); color: rgb(var(--c-white)); font: inherit; font-weight: 400; }
.f-field input[type=url]:focus, .f-field input[type=tel]:focus { outline: 2px solid rgb(var(--c-brand)); border-color: transparent; }
.f-field[hidden] { display: none; }