/* Shop look (Idea Log I255, I298): a real storefront. Bunklow navy with warm cream product cards,
   orange and teal, Fredoka everywhere. Loaded only on /shop, /es/shop and the product pages. */
:root { --shop-navy: #0a1736; --shop-ink: #10203c; --shop-cream: #fff7ea; --shop-peach: #ffe6c7; --shop-orange: #fc8003; --shop-teal: #2cc9c9; }
body, button, input { font-family: Fredoka, ui-rounded, system-ui, sans-serif; }
main { position: relative; }
main::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -10px; width: 100vw; height: 340px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse 60% 100% at 18% 0%, rgba(44,201,201,.28), transparent 70%), radial-gradient(ellipse 45% 90% at 90% 10%, rgba(252,128,3,.22), transparent 70%); }

/* hero */
h1.font-display { font-size: clamp(2.4rem, 7vw, 3.6rem); font-weight: 700; line-height: 1.05; letter-spacing: .005em; color: #fff; }
h1.font-display::after { content: ""; display: block; width: 84px; height: 6px; margin-top: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--shop-orange), var(--shop-teal)); }
main > p.text-ink-soft { font-size: 1.15rem; color: #d3deef; }

/* tabs */
[role="tablist"] { gap: 10px; }
[role="tab"] { min-height: 46px; padding: 0 22px; font-size: 1rem; font-weight: 600; border: 2px solid rgba(44,201,201,.55); background: rgba(16,32,60,.8); color: #fff; box-shadow: none; transition: background .2s, transform .2s; }
[role="tab"]:hover { background: rgba(44,201,201,.18); }
[role="tab"][aria-selected="true"] { border-color: #ffd6aa; font-weight: 700; box-shadow: 0 6px 20px rgba(252,128,3,.4); }
main p.text-sm.text-ink-soft { color: #9fb0cc; }

/* search */
.shop-search { position: relative; max-width: 34rem; }
.shop-search input { width: 100%; min-height: 52px; padding: 0 18px 0 48px; border-radius: 999px; border: 2px solid rgba(44,201,201,.55); background: var(--shop-ink); color: #fff; font-size: 1.05rem; font-weight: 500; }
.shop-search input::placeholder { color: #9fb0cc; }
.shop-search input:focus-visible { outline: 3px solid var(--shop-orange); outline-offset: 2px; }
.shop-search svg { position: absolute; left: 17px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--shop-teal); pointer-events: none; }
.shop-none { margin: 8px 0; color: #fff; font-weight: 600; font-size: 1.1rem; }

/* grid: two across on a phone, up to four on a big screen */
ul.grid.grid-cols-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 760px) { ul.grid.grid-cols-1 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
@media (min-width: 1100px) { ul.grid.grid-cols-1 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
ul.grid > li { position: relative; }

/* product cards: cream box, the cover sits on a soft shelf with a shadow */
.shop-card { background: var(--shop-cream); border: 0; border-radius: 22px; box-shadow: 0 10px 28px rgba(0,0,0,.35); color: var(--shop-navy); overflow: hidden; transition: transform .25s, box-shadow .25s; }
.shop-card:hover, .shop-card:focus-visible { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(252,128,3,.35); }
.shop-card:focus-visible { outline: 3px solid var(--shop-teal); outline-offset: 3px; }
.shop-card .shop-stage { position: relative; aspect-ratio: 1 / 1.08; padding: 16px 16px 10px; background: radial-gradient(circle at 50% 35%, #fff 0%, var(--shop-peach) 100%); display: flex; align-items: center; justify-content: center; }
.shop-card .shop-still { width: auto; height: 100%; max-width: 100%; object-fit: contain; background: #fff; border-radius: 6px; box-shadow: 0 8px 18px rgba(10,23,54,.28), 0 1px 3px rgba(10,23,54,.3); transition: transform .35s; position: static; }
.shop-card:hover .shop-still, .shop-card:focus-visible .shop-still { transform: scale(1.05) rotate(-1.5deg); }
.shop-card > span:last-child { gap: 6px; padding: 14px 14px 16px; }
.shop-card > span:last-child > span:first-child { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--shop-teal); color: var(--shop-navy); font-size: .7rem; font-weight: 700; letter-spacing: .06em; }
.shop-card[data-cat="Books"] > span:last-child > span:first-child, .shop-card[data-cat="Landlords"] > span:last-child > span:first-child { background: var(--shop-orange); }
.shop-card[data-cat="Bundles"] > span:last-child > span:first-child { background: var(--shop-navy); color: #fff; }
.shop-card > span:last-child > span.font-display { color: var(--shop-navy); font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.shop-card .shop-blurb { display: none; color: #475569; font-size: .88rem; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 760px) { .shop-card .shop-blurb { display: -webkit-box; } .shop-card > span:last-child > span.font-display { font-size: 1.15rem; } }
.shop-card .shop-cta { margin-top: auto; padding-top: 8px; color: #c25e00; font-weight: 700; font-size: .95rem; }
.shop-card .shop-cta::after { content: " \2192"; }
/* the plain store link kept after each card for search engines and keyboards */
.shop-card + a[href^="https://payhip.com"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* product page */
article.grid { gap: 28px; }
article.grid > .shop-stage { align-self: start; border-radius: 28px; padding: 28px; background: radial-gradient(circle at 50% 30%, #fff 0%, var(--shop-peach) 100%); display: flex; justify-content: center; box-shadow: 0 16px 40px rgba(0,0,0,.4); }
article.grid > .shop-stage .shop-still { width: auto; max-width: 100%; max-height: 60vh; height: auto; object-fit: contain; background: #fff; border-radius: 8px; box-shadow: 0 14px 30px rgba(10,23,54,.3); }
article.grid > div.flex { gap: 14px; padding: 6px 4px; }
article.grid > div.flex > p.text-xs { align-self: flex-start; padding: 5px 14px; border-radius: 999px; background: var(--shop-teal); color: var(--shop-navy); font-size: .8rem; font-weight: 700; letter-spacing: .07em; }
article.grid > div.flex > h1 { font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 700; line-height: 1.1; color: #fff; }
article.grid > div.flex > h1::after { display: none; }
article.grid > div.flex > p.text-base { font-size: 1.12rem; line-height: 1.6; color: #e3ebf7; }
article.grid > div.flex > p.text-sm { color: #9fb0cc; }
article.grid a[data-bk-loc="shop_get_this"] { min-height: 58px; padding: 0 40px; font-size: 1.15rem; font-weight: 700; box-shadow: 0 10px 28px rgba(252,128,3,.45); transition: transform .2s, box-shadow .2s; }
article.grid a[data-bk-loc="shop_get_this"]:hover, article.grid a[data-bk-loc="shop_get_this"]:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(252,128,3,.6); }
article.grid > section { padding: 22px 24px; border-radius: 22px; background: rgba(16,32,60,.75); border: 1px solid rgba(44,201,201,.28); }
article.grid > section > h2 { font-size: 1.5rem; font-weight: 700; color: #fff; }
article.grid > section > h2::before { content: ""; display: inline-block; width: 6px; height: 1.1em; margin-right: 10px; vertical-align: -.15em; border-radius: 3px; background: linear-gradient(var(--shop-orange), var(--shop-teal)); }
article.grid > section ul.list-disc { list-style: none; padding-left: 0; gap: 10px; }
article.grid > section ul.list-disc > li { position: relative; padding: 12px 14px 12px 44px; border-radius: 14px; background: rgba(255,255,255,.06); }
article.grid > section ul.list-disc > li::before { content: "\2713"; position: absolute; left: 14px; top: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--shop-teal); color: var(--shop-navy); font-weight: 800; text-align: center; line-height: 22px; font-size: .85rem; }
article.grid > section ul.flex-col:not(.list-disc) { flex-direction: row; flex-wrap: wrap; gap: 10px; }
article.grid > section ul.flex-col:not(.list-disc) > li > a { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 2px solid rgba(44,201,201,.55); background: rgba(16,32,60,.8); color: #fff; font-weight: 600; text-transform: capitalize; text-decoration: none; }
article.grid > section ul.flex-col:not(.list-disc) > li > a:hover { background: rgba(44,201,201,.2); }
article.grid > section ul.sm\:grid-cols-3 > li > a { background: var(--shop-cream); color: var(--shop-navy); border-radius: 18px; box-shadow: 0 8px 20px rgba(0,0,0,.3); transition: transform .2s; }
article.grid > section ul.sm\:grid-cols-3 > li > a:hover { transform: translateY(-4px); }
article.grid > section ul.sm\:grid-cols-3 > li > a span { color: var(--shop-navy); font-weight: 700; }
@media (max-width: 1023px) {
  article.grid > .shop-stage { padding: 18px; }
  article.grid > .shop-stage .shop-still { max-height: 50vh; }
  article.grid a[data-bk-loc="shop_get_this"].shop-sticky { position: fixed; z-index: 30; left: 16px; right: 16px; bottom: 74px; width: auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .shop-card, .shop-card .shop-still, article.grid a[data-bk-loc="shop_get_this"], [role="tab"] { transition: none; } .shop-card:hover, .shop-card:hover .shop-still { transform: none; } }
@media print { .shop-search, .shop-sticky, main::before { display: none !important; } }

/* own site checkout (tools/shop-own-site.py) */
.bk-buy{display:flex;flex-direction:column;gap:10px;margin:4px 0}
.bk-buy-price{font-family:Fredoka,sans-serif;font-size:1.5rem;font-weight:600}
.bk-buy.bk-buy-alt{display:block;margin:4px 0;font-size:.9rem}
.bk-buy .bk-buy-link{min-height:44px;padding:0 6px;background:none;border:0;color:#0EA5E9;font:600 .9rem Fredoka,sans-serif;text-decoration:underline;cursor:pointer}
.bk-buy-row{display:flex;flex-wrap:wrap;gap:10px}
.bk-buy button{min-height:48px;padding:0 22px;border-radius:999px;border:0;font:600 1rem Fredoka,sans-serif;cursor:pointer;background:#FC8002;color:#0A1736}
.bk-buy button.alt{background:#0A1736;color:#fff;border:2px solid #0EA5E9}
.bk-buy button[disabled]{opacity:.6;cursor:wait}
.bk-buy-msg{margin:0;font-weight:600}
.bk-buy-payhip{font-size:.9rem}
.bk-shopline{margin:24px 0;padding:16px;border:2px solid rgba(238,243,252,.28);border-radius:16px}
.bk-shopline h2{margin-top:0}
.bk-shopline ul{margin:0;padding-left:1.2em;display:grid;gap:6px}

/* shop shelves (tools/shop-shelves.py) */
.bk-shelves{display:flex;flex-direction:column;gap:18px;margin:4px 0 8px}
.bk-shelf-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.bk-shelf-head h2{margin:0;font-family:Fredoka,sans-serif;font-size:1.35rem;font-weight:600;color:#eef3fc}
.bk-see,.bk-every{min-height:44px;padding:0 16px;border-radius:999px;border:2px solid #0EA5E9;background:none;color:#eef3fc;font:600 .95rem Fredoka,sans-serif;cursor:pointer}
.bk-every{align-self:flex-start}
.bk-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px;-webkit-overflow-scrolling:touch}
.bk-card{flex:0 0 calc(40% - 6px);scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;color:#eef3fc;text-decoration:none;min-width:0}
.bk-cover{display:block;border-radius:14px;overflow:hidden;background:#10203c}
.bk-cover img{display:block;width:100%;aspect-ratio:3/4;object-fit:contain}
.bk-title{font-family:Fredoka,sans-serif;font-weight:600;font-size:.95rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bk-price{font-family:Fredoka,sans-serif;font-weight:600}
.bk-card:focus-visible{outline:2px solid #FC8002;outline-offset:3px}
.bk-shelf.open .bk-track{flex-wrap:wrap;overflow:visible}
.bk-shelf.open .bk-card{flex-basis:calc(50% - 6px)}
@media(min-width:900px){.bk-card{flex-basis:170px}.bk-shelf.open .bk-card{flex-basis:170px}}
.bk-shelves-on [role="tablist"],.bk-shelves-on ul.grid.grid-cols-1,.bk-shelves-on #shop-none{display:none!important}