@import url("brand.css");

.shop-main, .prose, .print-main, .order-main, .library-main { padding-block: clamp(22px, 4vw, 48px); }
.prose { max-width: 840px; }
.prose h1 { font-size: clamp(2.5rem, 6.5vw, 4.6rem); }
.prose h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); margin-top: 1.2em; }
.prose li { margin-bottom: .5em; }
.eyebrow, .pill { font-size: .82rem; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; }
.intro { font-size: clamp(1.1rem, 2.3vw, 1.55rem); }
.notice { background: var(--sky); border-radius: 13px; padding: .8em 1em; margin-block: 1em; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(12px, 2.5vw, 26px); }
.actions { margin-block: 12px; }
.price { font-size: clamp(1.32rem, 2.5vw, 2rem); font-weight: 1000; line-height: 1.18; }
.error { color: #9e314c; }
.print-only { display: none; }

.collection-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(12px, 4vw, 46px); padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.collection-hero h1 { max-width: 8.5em; }
.collection-hero .showcase-color { width: 57%; }
.collection-hero .showcase-print { width: 37%; }
.collection-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-block: 14px; font-size: .88rem; }
.collection-toolbar p { margin: 0; }
.collection-toolbar .button { font-size: .82rem; min-height: 36px; }
.product-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); }
.product-card { display: flex; flex-direction: column; gap: 5px; min-width: 0; text-align: center; border: 1px solid var(--line); border-radius: 16px; padding: 8px 8px 12px; background: var(--white); }
.product-card img { display: block; width: 100%; aspect-ratio: 8.5 / 11; object-fit: contain; border-radius: 10px; }
.product-card h2 { font-size: clamp(1rem, 1.8vw, 1.3rem); margin: 5px 0 0; }
.product-card p { margin: 0; }
.product-card .price { font-size: 1.22rem; margin-block: 2px; }
.product-card .actions { margin: auto 0 0; padding-top: 6px; justify-content: center; gap: 5px; }
.product-card .button { min-height: 42px; padding: 6px 8px; font-size: .85rem; border-radius: 999px; }

.breadcrumb { margin-bottom: clamp(16px, 2.5vw, 28px); font-weight: 900; }
.detail-grid { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-areas: "gallery heading" "gallery purchase"; gap: 5px clamp(16px, 4vw, 42px); align-items: start; }
.detail-heading { grid-area: heading; align-self: end; }
.detail-heading h1 { font-size: clamp(2.4rem, 5.6vw, 4.8rem); }
.detail-heading .chip { margin-bottom: 8px; text-transform: uppercase; }
.detail-heading .intro { margin: 0; }
.detail-gallery { grid-area: gallery; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-self: center; }
.detail-gallery figure { margin: 0; text-align: center; }
.detail-gallery img, .inside-section img { width: 100%; aspect-ratio: 8.5 / 11; object-fit: contain; border: 1px solid var(--line); border-radius: 14px; background: white; }
.detail-gallery .chip { background: var(--butter); font-size: .9rem; }
.detail-purchase { grid-area: purchase; padding-block: 8px; }
.detail-purchase .price { font-size: clamp(1.85rem, 3.5vw, 3.15rem); margin-bottom: .35em; }
.included-list { display: grid; gap: 9px; list-style: none; padding: 0; margin: 0 0 16px; font-size: clamp(1rem, 2vw, 1.3rem); }
.included-list li { display: flex; align-items: center; gap: .45em; }
.included-list .icon { background: var(--mint); border-radius: 8px; padding: 3px; width: 1.5em; height: 1.5em; }
.detail-purchase .button { width: 100%; font-size: 1.25rem; }
.detail-purchase > .text-link { display: block; text-align: center; margin: .6em 0; }
.delivery-strip { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--mint); padding: .65em .8em; border-radius: 14px; font-weight: 950; line-height: 1.3; }
.detail-purchase .delivery-strip { background: var(--sky); font-size: .95rem; }
.inside-section { display: grid; grid-template-columns: 1.2fr minmax(110px, .45fr) 1fr; align-items: center; gap: 20px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rule); }
.inside-section img { max-width: 175px; }
.inside-section h3 { display: inline-block; padding: .3em .65em; background: var(--blush); border-radius: 999px; }

.cart-layout { display: grid; grid-template-columns: 1.2fr 1fr; align-items: start; gap: 18px; }
.cart-items { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.cart-item { display: grid; grid-template-columns: minmax(68px, 26%) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: var(--white); }
.cart-item img { width: 100%; border-radius: 8px; display: block; }
.cart-item h2 { font-size: clamp(1.1rem, 2.8vw, 1.9rem); margin: 0 0 4px; }
.cart-item p { margin: 0; }
.remove-link { padding: 8px 2px; border: 0; background: transparent; text-decoration: underline; font-size: .85rem; }
.cart-summary .delivery-strip { margin: 0 0 14px; font-size: clamp(1rem, 2.3vw, 1.75rem); }
.cart-total { margin: 0; }
.cart-total > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-weight: 850; }
.cart-total dd { margin: 0; white-space: nowrap; }
.cart-total .chip { background: var(--butter); font-size: .9em; }
.cart-total .total-line { padding: .4em .55em; margin-top: 12px; font-size: clamp(1.35rem, 3vw, 2.3rem); font-weight: 1000; background: var(--blush); border-radius: 13px; }
.tax-note, .email-note, #sellerDisclosure { font-size: .82rem; text-align: center; }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; margin-block: 14px; }
.check input, .book-checks input { accent-color: var(--plum); }
.check input { width: 20px; height: 20px; flex: none; }
.cart-summary > .button { width: 100%; }
.cart-summary .email-note { margin: 7px 0 10px; }
#checkoutStatus:empty { display: none; }
#sellerDisclosure { margin-top: 8px; margin-bottom: 0; }
.cart-feedback { position: fixed; z-index: 2; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: calc(100% - 24px); display: flex; align-items: center; gap: 8px; padding: 9px; background: var(--white); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 8px 28px #51103526; }
.cart-feedback .button { flex: none; }

.order-main h1, .library-main h1 { margin-bottom: 10px; }
.order-main .intro { margin-bottom: 16px; }
.order-confirmed .status-icon { display: inline-grid; vertical-align: .08em; place-items: center; width: .95em; height: .95em; margin-right: .22em; background: var(--mint); border-radius: 50%; }
.order-confirmed .status-icon .icon { width: .62em; height: .62em; }
.download-cards { display: grid; gap: 12px; }
#myBooks .download-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.library-card { display: grid; grid-template-columns: minmax(74px, 20%) minmax(0, 1fr); align-items: center; gap: clamp(10px, 2.4vw, 22px); background: #ffefeb; }
#myBooks .library-card { grid-template-columns: minmax(70px, 38%) minmax(0, 1fr); background: #fff1d7; }
#myBooks .library-card:nth-child(even) { background: var(--sky); }
.library-card img { width: 100%; max-height: 200px; object-fit: contain; border-radius: 10px; display: block; }
.library-card h2 { font-size: clamp(1.45rem, 3.5vw, 2.65rem); margin: 0 0 8px; }
.library-card img { grid-row: span 2; }
.library-card .play-action { background: var(--plum); }
.library-card .actions { margin: 0; }
.library-card .button { padding: .58em .76em; }
.library-card .chip { margin: 0 0 8px; font-size: .85rem; }
.download-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#myBooks .play-action { width: 100%; }
#openOrder, #accessPanel, #agreementPanel, .bulk-download { margin-top: 16px; }
#openOrder { background: var(--mint); }
#accessPanel { background: var(--sky); }
#openOrder summary, #accessPanel summary, .bulk-download summary, .receipt-details summary { font-weight: 950; }
#openOrder > p, #accessPanel > p { margin-block: 8px; }
#privateLink { overflow-wrap: anywhere; }
.bulk-download { border-color: var(--rule); }
.book-checks { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px 16px; margin-block: 10px; }
.book-checks legend, .select-all { font-weight: 900; }
.select-all { width: 100%; }
.download-controls { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.download-controls select, .download-controls input { background: white; border: 1px solid var(--rule); border-radius: 9px; padding: 8px 10px; }
.download-controls select { display: block; }
.download-controls input { flex: 1 1 230px; min-width: 0; }
.button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.receipt-details { padding-block: 10px; border-top: 1px solid var(--line); }
.receipt-details dl { overflow-wrap: anywhere; }
.receipt-details dt { margin-top: 8px; font-weight: 900; }
.receipt-details dd { margin: 0; }

.print-grid { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-areas: "lead worksheet" "steps worksheet"; align-items: center; gap: 14px 26px; }
.print-lead { grid-area: lead; align-self: end; }
.print-steps { grid-area: steps; align-self: start; display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.print-steps li { display: grid; grid-template-columns: 45px minmax(0, 1fr); align-items: center; gap: 13px; background: var(--blush); border-radius: 16px; padding: clamp(10px, 2vw, 19px); }
.print-steps li:nth-child(2) { background: var(--mint); }
.print-steps li:nth-child(3) { background: var(--sky); }
.print-steps .icon { width: 42px; height: auto; }
.print-steps strong { font-size: clamp(1.12rem, 2vw, 1.5rem); font-weight: 1000; }
.print-steps p { margin: 2px 0 0; }
.worksheet { grid-area: worksheet; display: grid; gap: 12px; width: min(100%, 430px); margin: 0 auto; }
.worksheet img { width: 100%; max-height: 490px; object-fit: contain; background: white; border: 1px solid var(--rule); border-radius: 14px; }
.print-help { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 25px; border-top: 1px solid var(--rule); padding-top: 17px; margin-top: 22px; }
.print-help h2 { font-size: 1.9rem; margin: 0; }
.print-help a { font-weight: 850; }
.print-tips { margin-top: 16px; }
.print-tips summary { font-weight: 900; }

@media (max-width: 930px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #myBooks .download-cards { grid-template-columns: 1fr; }
  #myBooks .library-card { grid-template-columns: minmax(74px, 20%) minmax(0, 1fr); }
  #myBooks .play-action { width: auto; }
}
@media (max-width: 650px) {
  .collection-hero, .cart-layout { grid-template-columns: 1fr; }
  .collection-hero .showcase { display: none; }
  .collection-hero h1 { max-width: none; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card .button { font-size: .79rem; padding-inline: 6px; }
  .product-card p { font-size: .85rem; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "gallery" "purchase"; gap: 12px; }
  .detail-gallery img { max-height: 252px; }
  .inside-section { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .inside-section > div:first-child { grid-column: 1 / -1; }
  .cart-item { padding: 9px; gap: 8px; }
  .cart-item img { max-height: 105px; object-fit: contain; }
  .cart-feedback { font-size: .85rem; }
  .cart-feedback .button { padding: 6px; }
  .library-card, #myBooks .library-card { grid-template-columns: 75px minmax(0, 1fr); gap: 10px; }
  .library-card img { grid-row: auto; }
  .library-card .download-actions { display: grid; grid-template-columns: 1fr 1fr; grid-column: 1 / -1; }
  .library-card .play-action { grid-column: 1 / -1; }
  .library-card .button { font-size: .84rem; }
  .library-card .button .icon { display: none; }
  .library-card .muted { grid-column: 1 / -1; font-size: .84rem; }
  .print-grid { grid-template-columns: 1fr; grid-template-areas: "lead" "worksheet" "steps"; }
  .worksheet { width: min(100%, 300px); }
  .worksheet img { max-height: 330px; }
}
@media print {
  .site-header, .site-footer, .no-print, .actions { display: none !important; }
  body { background: white; color: black; }
  main.wrap { width: 100%; }
  .panel { border: 0; }
  .print-only { display: block; }
}

/* Motion and clearer product cards */
.product-card { animation: card-in .55s cubic-bezier(.2, .8, .2, 1) backwards; transition: translate .22s ease, box-shadow .22s, border-color .22s; }
.product-card:nth-child(2) { animation-delay: .06s; } .product-card:nth-child(3) { animation-delay: .12s; }
.product-card:nth-child(4) { animation-delay: .18s; } .product-card:nth-child(5) { animation-delay: .24s; }
.product-card:hover { translate: 0 -5px; border-color: var(--plum); box-shadow: 0 18px 30px -18px #51103577; }
.product-card a:first-child { overflow: hidden; border-radius: 10px; }
.product-card img { transition: scale .35s ease; }
.product-card:hover img { scale: 1.03; }
.product-card .hook { font-size: .84rem; line-height: 1.25; color: var(--muted); min-height: 2.5em; }
.product-card .fit { font-size: .84rem; font-weight: 900; }
@keyframes card-in { from { opacity: 0; translate: 0 22px; } }
.cart-feedback:not([hidden]) { animation: toast-in .4s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes toast-in { from { opacity: 0; translate: 0 24px; } }
.cart-item { animation: card-in .35s ease backwards; }
.detail-gallery figure { transition: rotate .3s ease, translate .3s ease; }
.detail-gallery figure:hover { rotate: -1.5deg; translate: 0 -4px; }
.detail-gallery figure:nth-child(2):hover { rotate: 1.5deg; }
.product-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.product-card { position: relative; }
.new-chip { position: absolute; z-index: 1; top: -9px; left: 50%; translate: -50% 0; white-space: nowrap; font-size: .72rem; background: var(--butter); border: 2px solid var(--white); }
@media (max-width: 650px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }