/* Learning library: scoped to the shop so the portfolio keeps its own layouts. */
.shop-page .shop-hero { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:56px; padding-block:76px 84px; }
.shop-page .shop-hero-copy>.eyebrow { margin-bottom:28px; }
.shop-page .shop-hero h1 { font-size:clamp(3.25rem,5.5vw,6rem); letter-spacing:-.065em; line-height:1.04; }
.shop-page .shop-deck { color:var(--text); font-size:clamp(1.15rem,1.8vw,1.45rem); line-height:1.5; max-width:450px; margin-top:28px; }
.shop-page .shop-description { max-width:450px; font-size:15px; line-height:1.75; margin-top:18px; }
.shop-page .shop-status { display:inline-flex; align-items:center; gap:10px; margin-block:26px 24px; font:10px/1.7 var(--mono); color:var(--muted); }
.shop-page .shop-status>span { width:6px; height:6px; flex-shrink:0; background:var(--terminal,#65dfa0); border-radius:50%; }
.shop-page .shop-visual { min-width:0; border:1px solid var(--line); background:linear-gradient(145deg,var(--surface),var(--bg)); overflow:hidden; }
.shop-page .shop-visual-heading,.shop-page .shop-visual figcaption { display:flex; justify-content:space-between; gap:14px; padding:19px 23px; font:9px/1.5 var(--mono); color:var(--muted); }
.shop-page .shop-visual-heading { border-bottom:1px solid var(--line); letter-spacing:.06em; text-transform:uppercase; }
.shop-page .shop-visual-heading>span:last-child { color:var(--accent); }
.shop-page .shop-visual img { width:100%; height:auto; }
.shop-page .shop-visual figcaption { border-top:1px solid var(--line); }
.shop-page .shop-visual figcaption>span:first-child { color:var(--text); }
.shop-page .shop-library { padding-block:72px 76px; border-top:1px solid var(--line); scroll-margin-top:100px; }
.shop-page .shop-section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:38px; }
.shop-page .shop-section-heading .eyebrow { margin-bottom:20px; }
.shop-page .shop-section-heading h2 { max-width:630px; font-size:clamp(2rem,3.4vw,3.4rem); }
.shop-page .shop-format { flex-shrink:0; font:10px var(--mono); color:var(--muted); padding-bottom:6px; }
.shop-page .shop-preparing { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:30px; align-items:center; padding:40px; border:1px solid var(--line); background:var(--surface); }
.shop-page .shop-preparing-mark { color:var(--accent); padding-right:8px; }
.shop-page .shop-preparing .eyebrow { color:var(--terminal,#65dfa0); font-size:9px; margin-bottom:12px; }
.shop-page .shop-preparing h3 { font-size:clamp(1.35rem,2.1vw,1.9rem); margin-bottom:15px; }
.shop-page .shop-preparing p:last-child { font-size:14px; line-height:1.8; max-width:610px; }
.shop-page .shop-preparing-code { font:9px/1.6 var(--mono); color:var(--muted); white-space:nowrap; align-self:start; }
.shop-page .shop-product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.shop-page .shop-product { border:1px solid var(--line); padding:24px; }
.shop-page .shop-product img { width:100%; margin-bottom:24px; }
.shop-page .shop-product h3 { margin-block:14px 20px; }
.shop-page .shop-product .text-link { margin-top:24px; }
.shop-page .shop-intent { display:grid; grid-template-columns:1fr 1fr; gap:100px; padding-block:54px 100px; }
.shop-page .shop-intent>.shop-principles { list-style:none; padding:0; margin:0; }
.shop-page .shop-intent>div>.eyebrow { margin-bottom:24px; }
.shop-page .shop-intent h2 { font-size:clamp(2rem,3.4vw,3.4rem); max-width:490px; }
.shop-page .shop-intent>div>p:last-child { margin-top:24px; max-width:450px; font-size:15px; }
.shop-page .shop-principles li { display:flex; gap:24px; padding-block:26px; border-top:1px solid var(--line); }
.shop-page .shop-principles li:first-child { padding-top:0; border-top:0; }
.shop-page .shop-principles li>span { font:10px var(--mono); color:var(--accent); padding-top:7px; }
.shop-page .shop-principles h3 { font-size:1.4rem; line-height:1.25; margin-bottom:12px; }
.shop-page .shop-principles p { font-size:14px; }
.shop-page .shop-contact { background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.shop-page .shop-contact-inner { display:flex; align-items:center; justify-content:space-between; gap:50px; padding-block:64px; }
.shop-page .shop-contact .eyebrow { margin-bottom:22px; }
.shop-page .shop-contact h2 { max-width:710px; font-size:clamp(2rem,3.5vw,3.5rem); }
.shop-page .shop-contact p:last-child { margin-top:22px; max-width:630px; font-size:14px; }
.shop-page .shop-contact .button { flex-shrink:0; }
@media (max-width:1100px) {
  .shop-page .shop-hero { gap:36px; }
  .shop-page .shop-preparing { grid-template-columns:auto minmax(0,1fr); }
  .shop-page .shop-preparing-code { display:none; }
  .shop-page .shop-intent { gap:56px; }
}
@media (max-width:850px) {
  .shop-page .shop-hero { grid-template-columns:1fr; gap:42px; padding-block:50px 60px; }
  .shop-page .shop-hero-copy { max-width:620px; }
  .shop-page .shop-hero h1 { font-size:clamp(3.35rem,8vw,5rem); }
  .shop-page .shop-description,.shop-page .shop-deck { max-width:570px; }
  .shop-page .shop-visual { max-width:600px; width:100%; margin-inline:auto; }
  .shop-page .shop-library { padding-block:52px; }
  .shop-page .shop-section-heading { align-items:flex-start; flex-direction:column; gap:20px; }
  .shop-page .shop-intent { gap:38px; padding-bottom:64px; }
  .shop-page .shop-contact-inner { align-items:flex-start; flex-direction:column; gap:28px; padding-block:50px; }
  .shop-page .shop-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .shop-page .shop-hero { padding-top:40px; }
  .shop-page .shop-hero h1 { font-size:clamp(2.85rem,11.5vw,4.3rem); }
  .shop-page .shop-hero .actions { gap:14px; }
  .shop-page .shop-status { font-size:9px; align-items:flex-start; }
  .shop-page .shop-status>span { margin-top:5px; }
  .shop-page .shop-visual-heading,.shop-page .shop-visual figcaption { padding:14px; font-size:8px; }
  .shop-page .shop-visual figcaption { flex-wrap:wrap; }
  .shop-page .shop-preparing { grid-template-columns:1fr; padding:26px 23px; gap:22px; }
  .shop-page .shop-preparing-mark svg { width:42px; height:42px; }
  .shop-page .shop-intent { grid-template-columns:1fr; gap:34px; padding-top:28px; }
  .shop-page .shop-principles li { gap:18px; }
  .shop-page .shop-product-grid { grid-template-columns:1fr; }
}