/* Little shop, flashcard add-ons and the "complete the collection" dialog. */
.shop-heading{max-width:820px}
.shop-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:56px;align-items:start;padding-bottom:90px}
.shop-items{display:grid;gap:22px}
.shop-item{display:grid;grid-template-columns:170px minmax(0,1fr);gap:28px;padding:26px;background:#fffdf8;border:1px solid #e6e1d3;border-radius:14px}
.shop-art{position:relative;display:grid;place-items:center;min-height:170px;border-radius:12px;overflow:hidden}
.shop-art-envelope{background:var(--yellow)}
.shop-art-envelope .line-icon{position:absolute;width:132px;height:132px;color:#c9a96a;opacity:.45}
.shop-art-letter{position:relative;display:grid;place-items:center;width:58px;height:58px;margin-top:6px;border:3px solid var(--lqc-honey);border-radius:50%;background:#fffdf7;box-shadow:0 3px 8px #5b514d14;font-family:ClubArabic,serif;font-size:30px;line-height:1;color:#5f8ea3}
.shop-art-label{position:absolute;bottom:12px;font-size:11px;font-weight:750;letter-spacing:1.4px;text-transform:uppercase;color:#72645c}
.shop-art-card{background:var(--blue)}
.mini-flashcard{display:grid;place-items:center;align-content:center;gap:4px;width:92px;height:124px;background:#fffdf7;border:5px solid var(--lqc-sky);border-radius:9px;box-shadow:2px 5px 8px #5b514d14;transform:rotate(-6deg);color:var(--ink)}
.mini-flashcard span{font-family:ClubArabic,serif;font-size:30px;line-height:1.3}
.mini-flashcard small{font-size:11px;font-weight:700;letter-spacing:.4px}
.shop-copy .eyebrow{margin-bottom:10px}
.shop-copy h2{font-size:26px;line-height:1.25;margin:0 0 10px}
.shop-copy p{font-size:15px;line-height:1.7;margin:0 0 12px}
.shop-price strong{font-family:var(--heading);font-size:24px;font-weight:500;margin-right:6px}
.shop-price small{display:block;font-size:13px;color:var(--muted)}
.qty-field{display:flex;align-items:center;gap:14px;margin-top:6px}
.qty-field label{font-weight:700;font-size:13px}
.qty-stepper{display:inline-flex;align-items:center;border:1px solid #b8c6b7;border-radius:999px;background:#fffdf8;overflow:hidden}
.qty-stepper input{width:54px;min-height:44px;border:0;background:transparent;text-align:center;font:inherit;font-weight:700;color:var(--ink);-moz-appearance:textfield;appearance:textfield}
.qty-stepper input::-webkit-outer-spin-button,.qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-step{display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--ink);cursor:pointer;transition:background .2s}
.qty-step[hidden]{display:none}
.qty-step:hover{background:var(--blue)}
.qty-step svg,.offer-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.shop-sold-out{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--pink);font-weight:700;font-size:13px}
.shop-caption{margin:2px 0 0;text-align:left;max-width:none}
.shop-panel{position:sticky;top:24px}
.shop-panel h2{font-size:30px;margin:0 0 18px}
.shop-panel>label{display:block;font-weight:700;font-size:13px;margin-bottom:8px}
.shop-panel select{width:100%;min-height:46px;padding:9px 12px;border:1px solid #b8c6b7;border-radius:6px;background:#fffdf8;color:var(--ink);font:inherit}
.shop-panel .international-charges{margin-top:12px}
.shop-summary{display:flex;justify-content:space-between;align-items:baseline;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.shop-summary span{font-weight:700}
.shop-summary strong{font-family:var(--heading);font-size:34px;font-weight:500}
.shop-panel .shop-breakdown{margin:2px 0 0;color:var(--muted)}
.shop-error{margin:10px 0 0;color:#9c3d36;font-weight:700;font-size:14px}
.shop-error:empty{display:none}
.shop-button{width:100%;margin-top:18px}
.shop-facts{display:grid;gap:8px;margin:22px 0 0;padding:0;list-style:none;font-size:14px}
.shop-facts li{display:flex;align-items:center;gap:10px}
.shop-facts .line-icon{width:18px;height:18px;flex:none;color:var(--green)}
.shop-panel .shop-facts+.small-note{margin:14px 0 0}
.shop-join{margin-top:22px;padding:18px 20px;border-radius:10px;background:#edf0e5}
.shop-join strong{display:block;font-family:var(--heading);font-size:18px;font-weight:500}
.shop-join p{margin:4px 0 8px;font-size:14px}
.shop-thanks{text-align:center;padding-bottom:90px}

.collection-offer{min-width:0;margin:4px 0;padding:14px 16px 16px;border:1px dashed #d9c9a8;border-radius:10px;background:#fffaf0}
.collection-offer legend{padding:0 6px;font-weight:700;font-size:14px;line-height:1.5}
.offer-rows{display:grid;gap:10px;margin-top:10px}
.offer-row{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px;border:1px solid #e0e3d5;border-radius:10px;background:#fffdf8;cursor:pointer;transition:border-color .2s,background .2s}
.offer-row[hidden]{display:none}
.offer-row:has(input:checked){border-color:var(--lqc-sky);background:#f0f8fb}
.offer-row input{width:20px;height:20px;margin:0;accent-color:#4f8299}
.offer-row .mini-flashcard{width:46px;height:62px;gap:0;border-width:3px;border-radius:6px;transform:rotate(-5deg)}
.offer-row .mini-flashcard span{font-size:15px}
.offer-row .mini-flashcard small{font-size:8px}
.offer-text strong{display:block;font-size:15px;line-height:1.4}
.offer-text small{display:block;font-size:12px;line-height:1.5;color:var(--muted)}
.offer-row b{font-family:var(--heading);font-size:17px;font-weight:500}
.collection-offer .offer-note{margin:10px 0 0}

.offer-dialog{width:min(520px,calc(100% - 32px));max-height:calc(100% - 32px);padding:34px 30px 26px;border:0;border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:0 24px 60px #5b514d33}
.offer-dialog::backdrop{background:#5b514d59}
.offer-dialog[open]{animation:offer-in 240ms cubic-bezier(.32,.72,0,1)}
@keyframes offer-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
.offer-dialog .eyebrow{margin-bottom:12px}
.offer-dialog .collection-offer{margin:0;padding:0;border:0;background:none}
.offer-dialog .collection-offer legend{margin-bottom:14px;padding:0;font-family:var(--heading);font-size:24px;font-weight:500;line-height:1.3;letter-spacing:-.3px}
.offer-total{min-height:1.7em;margin:12px 0 0;font-weight:700;font-size:15px}
.offer-actions{display:flex;gap:10px;margin-top:14px}
.offer-actions .button{flex:1;min-height:50px;padding-inline:16px;gap:10px;font-size:15px}
.offer-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer}
.offer-close:hover{background:var(--blue)}
@media(prefers-reduced-motion:reduce){.offer-dialog[open]{animation:none}}

@media(max-width:1100px){
 .shop-layout{gap:32px;grid-template-columns:minmax(0,1.2fr) minmax(300px,1fr)}
 .shop-item{grid-template-columns:130px minmax(0,1fr);gap:20px;padding:20px}
 .shop-art{min-height:140px}
}
@media(max-width:800px){
 .shop-layout{grid-template-columns:1fr;gap:28px;padding-bottom:60px}
 .shop-panel{position:static}
}
@media(max-width:560px){
 .shop-item{grid-template-columns:1fr;gap:16px;padding:18px}
 .shop-art{min-height:150px}
 .shop-copy h2{font-size:23px}
 .shop-panel h2{font-size:26px}
 .offer-dialog{padding:30px 20px 20px}
 .offer-dialog .collection-offer legend{font-size:20px;padding-right:28px}
 .offer-actions{flex-direction:column-reverse}
 .offer-row{gap:10px;padding:10px}
}

/* A photo from the founder's hub replaces the drawing and fills the same box. */
.shop-art-photo{background:#f3efe5}
.shop-art-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}