/* ---------- v6 match (Nov 11, Moshe 06:12 "make sure it matches the whole page and website") ----------
   One look for every page AND the embedded Spreadshop shop (its Shop CSS uses the same values):
   photos + cards 24px corners, 3px soft-pink edge #FFC2DA, soft pink shadow; buttons = pills;
   headings teal #0B7482; candy palette pink/coral #E0246A, turquoise #1FC2D6, yellow #FFC928; round icon chips. */
:root{--bj-edge:#FFC2DA;--bj-edge-h:#FF8FBE;--bj-r:24px;--bj-shadow:0 8px 20px rgba(224,36,106,.13);--bj-shadow-h:0 14px 28px rgba(224,36,106,.20);--bj-head:#0B7482}
/* headings: one colour everywhere (page titles + section titles); card titles stay ink */
html h1,html h2,html .bookpage h2,html .shop-head h1,html .cp-copy h1,html .cp-inside,html .cp-mini-h{color:var(--bj-head)}
html .site-footer h2,html .fcol h2{color:var(--yellow)}
/* panels and cards */
html .hero-card,html .cp-box,html .cp-mini,html .cp-card,html .ds-box.card{border-radius:var(--bj-r);border:3px solid var(--bj-edge);box-shadow:var(--bj-shadow)}
html .bookpage .cp-mini{border-color:var(--bj-edge)}
/* book cards: cover edge-to-edge, clipped round, like the shop's product tiles */
html .bcard > a,html .bcard.soon{border-radius:var(--bj-r);border:3px solid var(--bj-edge);box-shadow:var(--bj-shadow);padding:0 0 14px;overflow:hidden;background:#fff;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
html .bcard > a:hover,html .bcard > a:focus-visible{transform:translateY(-3px);box-shadow:var(--bj-shadow-h);border-color:var(--bj-edge-h)}
html .bcard .bcover{border-radius:0;margin:0}
html .bcard h3,html .bcard .bmore,html .bcard .when{margin-left:14px;margin-right:14px}
html .bcard.soon{opacity:.85;border:0;box-shadow:none;background:transparent;padding:0;overflow:visible}
html .bcard.soon .bcover{border-radius:16px;border:3px solid var(--bj-edge);overflow:hidden}
html .bcard.soon h3,html .bcard.soon .when{margin-left:2px;margin-right:2px}
html .bookpage .live-grid .bcard > a{border-color:var(--bj-edge)}
/* photos: covers, peeks, coloring previews, about photo */
html .bh-cover img{border-radius:var(--bj-r);border:3px solid var(--bj-edge);box-shadow:0 18px 36px rgba(224,36,106,.20),0 6px 14px rgba(58,43,34,.10)}
html .bh-cover img:hover{box-shadow:0 24px 44px rgba(224,36,106,.26),0 8px 16px rgba(58,43,34,.12)}
html .hero-cover{border-radius:var(--bj-r);border:3px solid var(--bj-edge);overflow:hidden;box-shadow:0 22px 44px rgba(224,36,106,.22),0 8px 16px rgba(58,43,34,.10)}
html .hero-cover img{border-radius:0}
html .gallery img,html .about-img{border-radius:var(--bj-r);border:3px solid var(--bj-edge);box-shadow:var(--bj-shadow)}
html .cp-thumbs li{border-radius:var(--bj-r);border:3px solid var(--bj-edge);padding:0;overflow:hidden;box-shadow:var(--bj-shadow)}
html .cp-thumbs img{border-radius:0}
html .cp-mini-pic{border-radius:16px;border:3px solid var(--bj-edge)}
html .merch-grid a,html .merch-grid li:nth-child(n) a{border-radius:var(--bj-r);border:3px solid var(--bj-edge);box-shadow:var(--bj-shadow);padding:0 0 14px;overflow:hidden}
html .merch-grid .pimg{border-radius:0;background:#FFF1C2}
html .merch-grid a > :not(.pimg){margin-left:12px;margin-right:12px}
/* buttons: all pills. Primary = the pink-coral buy button (v5). Second action = turquoise pill. */
html .btn,html .btn.small,html .store,html .textbtn{border-radius:999px}
html .btn.primary,html .cp-mini .btn.primary{background:var(--turquoise);border:3px solid var(--bj-head);color:var(--ink);box-shadow:0 8px 18px rgba(31,194,214,.28),0 3px 0 var(--bj-head)}
html .btn.primary:hover,html .cp-mini .btn.primary:hover{background:#3CCDDE}
html .btn.primary:active{box-shadow:0 2px 6px rgba(31,194,214,.25),0 1px 0 var(--bj-head)}
html .cp-row input,html input[type=email],html input[type=text]{border-radius:999px;border:2px solid var(--bj-edge)}
html .cp-row input:focus{border-color:#E0246A}
/* round icon style: the same candy circles as the shop's menu (pink) and cart (yellow) */
@media (max-width:819px){html.js .menu-btn{width:46px;height:46px;padding:0 12px;border-radius:999px;background:#FFE3EF;box-shadow:0 3px 0 #FFC2DA}}
html .brand img{border:3px solid var(--bj-edge);box-shadow:none}
html .social a{border-radius:999px;box-shadow:var(--bj-shadow)}
html .social svg,html .fsocial svg{box-sizing:content-box;padding:6px;border-radius:999px;background:#FFE3EF;color:#B4235F}
html .fsocial svg{background:rgba(255,255,255,.14);color:#fff}
/* shop page frame: same edge as every card (the candy gradient ring is gone) */
html .shop-frame{padding:0;border-radius:var(--bj-r);background:#FFFCF6;border:3px solid var(--bj-edge);box-shadow:var(--bj-shadow)}
html #myShop,html #myShop iframe{border-radius:21px}
html .shop-cats li{border-radius:999px}
@media (max-width:640px){html .shop-frame{padding:0;border-radius:var(--bj-r)}html #myShop,html #myShop iframe{border-radius:21px}}
html .wavy{display:none}
/* v7 (Nov 11, Moshe 06:39 "make it the same as the other pages"): /shop/ gets the same cream + soft tint look as the other pages */
html .turquoise-wash{background:radial-gradient(circle at 92% 22%,var(--yellow-l) 0 90px,transparent 91px),radial-gradient(circle at 6% 88%,var(--pink-l) 0 60px,transparent 61px),var(--turquoise-l)}
html .shop-head{padding:34px 0 26px}
html .shop-wrap{background:linear-gradient(180deg,var(--turquoise-l) 0,var(--cream) 340px);padding-top:18px}
html .shop-frame{background:var(--cream)}
html #myShop{background:var(--cream)}
@media (max-width:640px){html .shop-head{padding:24px 0 18px}}
@media (prefers-reduced-motion:reduce){html .bcard > a{transition:none}html .bcard > a:hover{transform:none}}