/* CosmoShop — panier, commande et accueil. Charte : mcv_style.css. */

.cs-dialog,.cs-page {
    font-family:var(--font-serif);
    color:var(--text-black);
    line-height:1.55;
    font-size:16px
}

.cs-dialog *,.cs-page * {
    box-sizing:border-box
}

.cs-dialog [hidden],.cs-page [hidden] {
    display:none!important
}

.cs-dialog {
    border:0;
    border-radius:24px;
    padding:28px 38px;
    width:min(720px,94vw);
    max-height:92dvh;
    background:var(--white);
    box-shadow:-12px 8px 36px var(--shop-hover-overlay),0 3px 10px var(--shop-hover-shadow)
}

.cs-dialog::backdrop {
    background:var(--user-modal-overlay);
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px)
}

.cs-dialog h2,.cs-page h1,.cs-summary h2 {
    font-family:var(--font-serif);
    font-weight:400;
    line-height:1.18
}

.cs-dialog h2 {
    font-size:32px;
    margin:24px 0
}

.cs-dialog-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s0);
    position:sticky;
    top:-28px;
    z-index:4;
    background:inherit;
    padding:10px 0
}

.cs-dialog-head h2 {
    margin:0
}

.cs-close,.cs-back {
    flex:none;
    width:44px;
    height:44px;
    border:0;
    border-radius:50%;
    background:var(--creamlight);
    color:var(--text-black);
    font-size:30px;
    cursor:pointer;
    display:grid;
    place-content:center;
    padding:0
}

.cs-dialog button:focus-visible,.cs-page button:focus-visible,.cs-dialog a:focus-visible,.cs-page a:focus-visible {
    outline:3px solid var(--gold);
    outline-offset:3px
}

.cs-progress {
    text-align:center;
    font-size:13px;
    color:var(--text-gray)
}

.cs-form label {
    display:flex;
    flex-direction:column;
    gap:6px;
    margin:15px 0;
    font-size:14px;
    font-weight:600
}

.cs-form input:not([type=checkbox]):not([type=radio]),.cs-form select {
    width:100%;
    min-height:50px;
    border:1px solid var(--border-gray);
    border-radius:9px;
    padding:12px 14px;
    background:var(--white);
    color:var(--text-black);
    font:400 16px var(--font-serif)
}

.cs-form input:focus,.cs-form select:focus {
    outline:2px solid var(--green);
    outline-offset:2px
}

.cs-form input:disabled {
    background:var(--bg-gray);
    color:var(--text-gray-medium)
}

.cs-fields {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px
}

.cs-form .cs-check {
    flex-direction:row;
    align-items:flex-start;
    gap:10px;
    font-weight:400
}

.cs-check input {
    width:18px;
    height:18px;
    flex:none;
    accent-color:var(--green);
    margin-top:3px
}

.cs-muted {
    color:var(--text-gray);
    font-size:14px
}

.cs-note {
    padding:18px;
    background:var(--creamlight);
    border:1px solid var(--border-gray-med);
    border-radius:12px;
    font-size:14px;
    margin:20px 0
}

.cs-button {
    display:block;
    text-align:center;
    width:100%;
    border:1px solid var(--text-black);
    border-radius:12px;
    background:var(--green);
    color:var(--white)!important;
    padding:16px 20px;
    font:600 17px var(--font-serif);
    cursor:pointer;
    text-decoration:none!important;
    line-height:1.4
}

.cs-button:disabled {
    opacity:.5;
    cursor:wait
}

.cs-secondary {
    background:transparent;
    color:var(--text-black)!important;
    border-color:var(--border-gray)
}

.cs-secondary:hover {
    background:var(--creamlight)
}

.cs-link {
    border:0;
    background:none;
    padding:0;
    text-decoration:underline;
    color:var(--green);
    cursor:pointer;
    font:inherit
}

.cs-error {
    color:var(--red);
    font-size:14px;
    white-space:pre-line
}

.cs-error:empty {
    display:none
}

.cs-sticky {
    position:sticky;
    bottom:-28px;
    background:var(--white);
    padding:18px 0 10px;
    margin-top:20px;
    border-top:1px solid var(--border-gray-med);
    z-index:2
}

.cs-format {
    display:flex!important;
    flex-direction:row!important;
    align-items:center;
    gap:18px!important;
    border:1px solid var(--border-gray-med);
    border-radius:16px;
    padding:18px;
    background:var(--creamlight);
    cursor:pointer
}

.cs-format:has(input:checked) {
    border:2px solid var(--green);
    background:var(--creamlight);
    padding:17px
}

.cs-format img {
    width:82px;
    height:105px;
    object-fit:cover;
    border-radius:6px
}

.cs-format strong {
    display:block;
    font-family:var(--font-serif);
    font-size:23px;
    font-weight:400
}

.cs-format small {
    display:block;
    font-size:13px;
    font-weight:400;
    margin:6px 0;
    color:var(--text-gray)
}

.cs-format input {
    margin-left:auto;
    accent-color:var(--green);
    width:20px;
    height:20px;
    flex:none
}

.cs-price {
    font-size:20px
}

.cs-drawer {
    margin:0 0 0 auto;
    width:34vw;
    min-width:400px;
    max-width:100vw;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
    background:var(--creamlight);
    padding:28px;
    overflow-y:auto
}

.cs-drawer h2 {
    font-size:15px
}

.cs-empty {
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:65dvh;
    gap:5px
}

.cs-empty h3 {
    font:400 26px var(--font-serif)
}

.cs-empty .cs-button {
    border-radius:10px
}

.cs-cart-item {
    display:grid;
    grid-template-columns:75px 1fr;
    gap:16px;
    padding:25px 0;
    border-bottom:1px solid var(--border-gray-med)
}

.cs-cart-item img {
    width:75px;
    height:96px;
    object-fit:cover;
    border-radius:8px
}

.cs-cart-item h3 {
    font:400 22px var(--font-serif);
    margin:0 0 8px
}

.cs-cart-item p {
    margin:5px 0;
    font-size:14px;
    overflow-wrap:anywhere
}

.cs-item-actions {
    display:flex;
    align-items:center;
    gap:15px;
    margin-top:12px;
    flex-wrap:wrap
}

.cs-quantity {
    display:flex;
    align-items:center;
    border:1px solid var(--border-gray);
    border-radius:6px
}

.cs-quantity button {
    background:transparent;
    border:0;
    padding:7px 12px;
    cursor:pointer;
    font-size:18px
}

.cs-quantity span {
    min-width:18px;
    text-align:center
}

.cs-line {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:18px;
    padding:12px 0;
    border-bottom:1px solid var(--border-gray-med)
}

.cs-line strong {
    white-space:nowrap
}

.cs-line h2 {
    margin:0
}

.cs-total {
    font-size:22px;
    margin:15px 0
}

.cs-cart-footer {
    padding-top:22px
}

.cs-cart-footer .cs-button {
    margin-top:20px;
    border-radius:32px
}

.cs-city-results {
    border:1px solid var(--border-gray);
    border-radius:8px;
    max-height:210px;
    overflow-y:auto;
    margin-top:-8px
}

.cs-city-results button {
    display:block;
    width:100%;
    text-align:left;
    border:0;
    border-bottom:1px solid var(--bg-gray);
    background:var(--white);
    padding:12px;
    cursor:pointer;
    font:inherit
}

.cs-city-results button:hover,.cs-city-results button:focus {
    background:var(--creamlight)
}

.cs-page {
    max-width:1140px;
    margin:50px auto 90px;
    padding:0 28px
}

.cs-page h1 {
    font-size:46px;
    margin:15px 0 35px
}

.cs-page h2 {
    font-size:24px
}

.cs-eyebrow {
    font-size:12px;
    letter-spacing:2px;
    color:var(--text-gray)
}

.cs-checkout-grid {
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:65px
}

.cs-checkout-grid section {
    margin-bottom:30px
}

.cs-summary {
    align-self:start;
    position:sticky;
    top:20px;
    padding:28px;
    background:var(--creamlight);
    border:1px solid var(--border-gray-med);
    border-radius:18px
}

.cs-summary .cs-cart-item:first-child {
    padding-top:0
}

.cs-summary h2 {
    margin-top:0
}

.cs-payment {
    border:1px solid var(--green);
    border-radius:12px;
    padding:20px;
    background:var(--creamlight)
}

.cs-payment p {
    margin-bottom:0;
    color:var(--text-gray);
    font-size:14px
}

.cs-account {
    max-width:600px;
    margin:auto
}

.cs-confirmation {
    max-width:760px;
    margin:auto;
    background:var(--creamlight);
    padding:35px;
    border-radius:20px
}

.cs-confirmation code {
    overflow-wrap:anywhere;
    font-size:18px
}

.cs-review-details {
    margin:15px 0
}

.cs-review-details dt {
    color:var(--text-gray)
}

.cs-review-details dd {
    margin:0;
    font-weight:500;
    overflow-wrap:anywhere
}

.cs-review-details>div {
    padding:12px 0;
    border-bottom:1px solid var(--border-gray-med);
    display:grid;
    grid-template-columns:1fr 1.5fr;
    gap:18px
}

body:has(.cs-dialog[open]) {
    overflow:hidden
}

@media(max-width:760px) {
  .cs-dialog-head {
    top:-20px
}
  .cs-drawer {
    min-width:0;
    width:100vw;
    padding:22px
}
  .cs-dialog h2 {
    font-size:28px
}
  .cs-sticky {
    bottom:-20px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom))
}
  .cs-fields {
    gap:10px
}
  .cs-page {
    padding:0 18px;
    margin-top:30px
}
  .cs-page h1 {
    font-size:34px
}
  .cs-checkout-grid {
    grid-template-columns:1fr;
    gap:28px
}
  .cs-summary {
    position:static;
    grid-row:1;
    padding:20px
}
  .cs-format img {
    width:62px;
    height:85px
}
  .cs-format strong {
    font-size:20px
}
  .cs-format {
    gap:12px!important;
    padding:14px
}
  .cs-format:has(input:checked) {
    padding:13px
}
  .cs-confirmation {
    padding:24px
}
  .cs-review-details>div {
    grid-template-columns:1fr
}
  .cs-cart-item {
    grid-template-columns:65px 1fr
}
  .cs-cart-item img {
    width:65px;
    height:85px
}
}

.cs-dialog button:not(.cs-button),.cs-page button:not(.cs-button) {
    color:var(--text-black);
    text-transform:none;
    letter-spacing:normal
}

.cs-config {
    width:min(720px,calc(100vw - var(--s1) * 2));
    max-height:calc(100dvh - var(--s1) * 2);
    margin:auto;
    padding:var(--s0) var(--s1);
    overflow:hidden
}

.cs-config[open] {
    display:flex;
    flex-direction:column
}

.cs-config:focus {
    outline:none
}

.cs-config .cs-dialog-head {
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 44px;
    position:static;
    flex:none;
    padding:0 0 var(--s0);
    background:var(--white)
}

.cs-config .cs-back {
    grid-column:1;
    grid-row:1
}
.cs-config .cs-progress {
    grid-column:2;
    grid-row:1
}
.cs-config .cs-close {
    grid-column:3;
    grid-row:1
}

.cs-step-bars {
    display:flex;
    justify-content:center;
    gap:var(--s-2);
    margin-top:var(--s-2)
}

.cs-step-bars span {
    width:40px;
    height:4px;
    border-radius:4px;
    background:var(--border-gray-med)
}

.cs-step-bars span:first-child,
.cs-step-bars[data-step="2"] span:nth-child(2),
.cs-step-bars[data-step="3"] span {
    background:var(--gold)
}

.cs-config .cs-form {
    display:flex;
    flex-direction:column;
    min-height:0;
    margin:0
}

.cs-config-body {
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable both-edges;
    scrollbar-width:thin;
    scrollbar-color:var(--border-gray) var(--white);
    min-height:0;
    padding:0 var(--s0) var(--s-1)
}

.cs-config #cs-config-title {
    text-wrap:balance;
    font-family:var(--font-serif-title);
    font-size:clamp(26px,3vw,34px);
    font-weight:400;
    line-height:1.2;
    color:var(--text-black);
    text-align:center;
    margin:var(--s-1) 0 var(--s-1)
}

.cs-config-intro {
    max-width:42ch;
    margin:0 auto var(--s1);
    font-size:var(--s0);
    line-height:1.5;
    text-align:center;
    color:var(--text-black)
}

.cs-config .cs-sticky {
    position:static;
    flex:none;
    margin:0 var(--s0);
    padding:var(--s0) 0 0;
    background:var(--white)
}

@media(max-width:760px) {
  .cs-config {
    width:calc(100vw - var(--s-1) * 2);
    max-height:calc(100dvh - var(--s-1) * 2);
    padding:var(--s0) var(--s-1)
}
  .cs-config-body {
    padding-inline:var(--s-1)
}
  .cs-config .cs-sticky {
    margin-inline:var(--s-1);
    padding-bottom:env(safe-area-inset-bottom)
}
}

@media(max-width:480px) {
  .cs-config .cs-fields {
    grid-template-columns:minmax(0,1fr)
}
}

.cs-config #cs-config-title:focus {
    outline:none
}
.cs-gift-icon {
    display:none
}

/* Gift selection shares the order dialog, with a compact single-step layout. */
.cs-config.cs-gift {
    width:min(660px,calc(100vw - var(--s1) * 2))
}
.cs-gift .cs-dialog-head {
    padding-bottom:0
}
.cs-gift .cs-close {
    width:36px;
    height:36px;
    font-size:26px;
    justify-self:end
}
.cs-gift .cs-format-intro {
    display:flex;
    align-items:flex-start;
    gap:var(--s0);
    padding:var(--s0);
    margin:var(--s0) 0
}
.cs-gift .cs-gift-icon {
    display:block;
    flex:none;
    width:26px;
    height:26px
}
.cs-gift .cs-format {
    position:relative;
    gap:var(--s0)!important;
    padding:var(--s-1);
    padding-right:calc(var(--s1) * 2);
    margin:var(--s-1) 0
}
.cs-gift .cs-format:has(input:checked) {
    border:1px solid var(--gold);
    background:var(--white);
    padding:var(--s-1);
    padding-right:calc(var(--s1) * 2)
}
.cs-gift .cs-format img {
    width:64px;
    height:82px;
    object-fit:contain
}
.cs-gift .cs-format strong {
    color:var(--gold);
    font-family:var(--font-serif-title);
    font-size:20px;
    line-height:1.25
}
.cs-gift .cs-format small {
    margin:var(--s-3) 0
}
.cs-gift .cs-format input {
    appearance:none;
    position:absolute;
    right:var(--s0);
    top:var(--s0);
    margin:0;
    width:24px;
    height:24px;
    border:1px solid var(--border-gray);
    border-radius:50%;
    background:var(--white);
    display:grid;
    place-content:center;
    cursor:pointer
}
.cs-gift .cs-format input:checked {
    background:var(--gold);
    border-color:var(--gold)
}
.cs-gift .cs-format input:checked::after {
    content:"";
    width:6px;
    height:11px;
    border:solid var(--white);
    border-width:0 2px 2px 0;
    transform:translateY(-1px) rotate(45deg)
}
.cs-gift .cs-format input:focus {
    outline:none
}
.cs-gift .cs-format input:focus-visible {
    outline:2px solid var(--gold);
    outline-offset:3px
}
@media(max-width:480px) {
  .cs-config.cs-gift {
    width:calc(100vw - var(--s-1) * 2)
}
  .cs-gift .cs-format,.cs-gift .cs-format:has(input:checked) {
    gap:var(--s-1)!important;
    padding-right:var(--s2)
}
  .cs-gift .cs-format img {
    width:48px;
    height:64px
}
  .cs-gift .cs-format input {
    right:var(--s-2);
    width:20px;
    height:20px
}
  .cs-gift .cs-format strong {
    font-size:18px
}
}

.cs-mobile-cart {
    display:none
}

@media(max-width:885px) {
  header .cs-mobile-cart {
    display:flex;
    position:relative;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin-right:18px;
    order:2
}
  .cs-mobile-cart .cart-counter {
    top:4px;
    right:0;
    padding:0 5px
}
  header #menu-toggle {
    margin-left:auto;
    margin-right:12px
}
  .cs-page {
    padding-top:65px
}
}

/* Keep the cart icon beside its title; only the close button moves to the right. */
.cs-drawer .cs-dialog-head {
    background:var(--creamlight);
    justify-content:flex-start;
    gap:var(--s-1)
}

.cs-drawer .cs-dialog-head .cs-close {
    margin-left:auto
}

/* Discreet cart close control, retaining a 44px touch target. */
#shop-cart-dialog .cs-close {
    position:relative;
    isolation:isolate;
    width:44px;
    height:44px;
    background:transparent;
    font-size:24px;
    line-height:1;
}
#shop-cart-dialog .cs-close::before {
    content:"";
    position:absolute;
    inset:6px;
    z-index:-1;
    border-radius:50%;
    background:var(--creamlight);
}
#shop-cart-dialog .cs-close:focus-visible {
    outline-width:2px;
    outline-offset:-4px;
}

/* Accueil du catalogue */

.shop-landing {
    max-width:1400px;
    margin:0 auto;
    padding:48px clamp(20px,4vw,64px) 80px;
    box-sizing:border-box
}

.shop-landing-intro {
    text-align:center;
    max-width:1050px;
    margin:0 auto 44px
}

.shop-landing h1 {
    font:400 clamp(30px,3.4vw,48px)/1.2 var(--font-serif-title);
    color:var(--gold);
    margin:0 0 15px
}

.shop-landing-intro>p {
    font-size:1.15rem;
    line-height:1.3;
    color:var(--text-black)
}

.shop-landing .shop-help {
    display:inline-block;
    margin-top:var(--s-2);
    color:var(--text-black);
    font-size:14px;
    text-decoration:underline;
    text-underline-offset:4px
}

.shop-product-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--s1)
}

.shop-product {
    display:flex;
    min-width:0
}

.shop-product-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    width:100%;
    border:1px solid var(--border-gray-med);
    border-radius:16px;
    overflow:hidden;
    background:var(--white);
    color:var(--text-black);
    text-decoration:none;
    transition:transform .25s,box-shadow .25s
}

.shop-product-image {
    position:relative;
    background:var(--cream);
    overflow:hidden;
    aspect-ratio:1/1;
    display:flex;
    align-items:center;
    justify-content:center
}

.shop-product-image img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    mix-blend-mode:multiply
}

.shop-product-discount {
    position:absolute;
    top:var(--s-1);
    right:var(--s-1);
    z-index:2;
    padding:var(--s-3) var(--s-1);
    border-radius:999px;
    background:var(--gold);
    color:var(--white);
    font-family:var(--font-serif);
    font-size:14px;
    font-weight:700;
    line-height:1.5
}

.shop-product-overlay {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--shop-hover-overlay);
    opacity:0;
    transition:opacity .25s
}

.shop-product-overlay>span {
    padding:var(--s-1) var(--s0);
    border:1px solid var(--shop-hover-border);
    border-radius:999px;
    background:transparent;
    color:var(--white);
    font-family:var(--font-serif);
    font-size:12px;
    font-weight:700;
    letter-spacing:.05em;
    line-height:1.5;
    text-transform:uppercase
}

.shop-product-info {
    padding:var(--s1) var(--s0) 0
}

.shop-landing .shop-product-type {
    font-size:11px;
    letter-spacing:.17em;
    text-transform:uppercase;
    color:var(--gold);
    margin:0 0 var(--s-1)
}

.shop-landing .shop-product h2 {
    font:400 clamp(22px,2vw,29px)/1.2 var(--font-serif-title);
    color:var(--text-black);
    margin:0 0 var(--s-1);
    transition:color .25s
}

.shop-landing .shop-product-description {
    font-size:14px;
    line-height:1.65;
    color:var(--text-black);
    margin:0 0 var(--s0)
}

.shop-product-bottom {
    margin-top:auto;
    padding:0 var(--s0) var(--s0)
}

.shop-landing .shop-product-price {
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:var(--s-1);
    font-size:19px;
    font-weight:600;
    color:var(--text-black);
    margin:0
}

.shop-product-price del {
    font-size:14px;
    font-weight:400;
    color:var(--text-gray);
    text-decoration:line-through
}

.shop-landing .shop-contact {
    text-align:center;
    margin:48px 0 0;
    padding-top:var(--s1);
    border-top:1px solid var(--border-gray-med)
}

.shop-landing .shop-coming {
    color:var(--text-gray);
    font-size:13px;
    border-top:1px solid var(--border-gray-med);
    padding:var(--s-1) 0 0;
    margin:0
}

.shop-landing a:focus-visible {
    outline:2px solid var(--gold);
    outline-offset:4px
}

.shop-product-card:focus-visible .shop-product-overlay {
    opacity:1
}

.shop-landing .shop-product-card:focus-visible h2 {
    color:var(--gold)
}

@media(hover:hover) and (pointer:fine) {
  .shop-product-card:hover {
    transform:translateY(-3px);
    box-shadow:0 8px 28px var(--shop-hover-shadow)
}
  .shop-product-card:hover .shop-product-overlay {
    opacity:1
}
  .shop-landing .shop-product-card:hover h2 {
    color:var(--gold)
}
}

@media(hover:none) {
  .shop-product-overlay {
    opacity:1;
    inset:auto var(--s-1) var(--s-1);
    background:transparent
}
  .shop-product-overlay>span {
    background:var(--shop-hover-overlay)
}
}

@media(prefers-reduced-motion:reduce) {
  .shop-product-card,.shop-product-overlay,.shop-landing .shop-product h2 {
    transition:none
}
  .shop-product-card:hover {
    transform:none
}
}

@media(max-width:1000px) {
  .shop-product-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
}
}

@media(max-width:520px) {
  .shop-landing {
    padding-top:30px
}
  .shop-product-grid {
    grid-template-columns:1fr
}
  .shop-landing-intro {
    margin-bottom:30px
}
  .shop-product-image {
    max-height:340px;
    aspect-ratio:auto;
    height:300px
}
}

/* Product presentation: common hero and independent editorial sections. */
.sp-page {
    background:var(--white);
    font-size:16px;
    line-height:1.65
}
.sp-page * {
    box-sizing:border-box
}
.sp-page [hidden] {
    display:none!important
}
.sp-page img {
    display:block;
    width:100%;
    height:auto
}
.sp-page h1,.sp-page h2,.sp-page h3,.sp-page p,.sp-page figure {
    margin:0
}
.sp-page h1,.sp-page h2 {
    font-family:var(--font-serif-title);
    font-weight:400;
    letter-spacing:-.035em;
    line-height:1.14
}
.sp-page h1 {
    font-size:clamp(36px,3.5vw,56px)
}
.sp-page h2 {
    font-size:clamp(30px,3vw,44px)
}
.sp-page h3 {
    font-size:19px;
    line-height:1.3;
    font-family:inherit;
    font-weight:600
}
.sp-page em {
    font-family:var(--font-serif-title);
    color:var(--gold);
    font-weight:400
}
.sp-page a {
    color:inherit;
    text-decoration:none
}
.sp-page button {
    font:inherit;
    cursor:pointer
}
.sp-page button:focus-visible,.sp-page a:focus-visible,.sp-page summary:focus-visible {
    outline:3px solid var(--gold);
    outline-offset:4px
}
.sp-container {
    max-width:1240px;
    width:calc(100% - 64px);
    margin:0 auto
}
.sp-breadcrumb {
    display:flex;
    gap:12px;
    padding:22px 0;
    font-size:12px;
    color:var(--text-gray)
}
.sp-breadcrumb a:hover {
    text-decoration:underline
}
.sp-hero {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    padding:12px 0 64px;
    align-items:start
}
.sp-gallery {
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    gap:14px;
    min-width:0
}
.sp-thumbnails {
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:560px;
    overflow:auto;
    padding:3px
}
.sp-thumb {
    flex-shrink:0;
    width:58px;
    padding:3px;
    background:white;
    border:1px solid var(--border-gray-med);
    border-radius:7px
}
.sp-thumb img {
    aspect-ratio:1;
    object-fit:cover;
    border-radius:4px
}
.sp-thumb.is-active {
    border:2px solid var(--gold);
    padding:2px
}
.sp-photo {
    background:var(--creamlight);
    border-radius:16px;
    overflow:hidden
}
.sp-photo img {
    aspect-ratio:1;
    object-fit:contain
}
.sp-gallery-controls {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:24px;
    margin:12px 0;
    font-size:12px;
    color:var(--text-gray)
}
.sp-gallery-controls button {
    background:none;
    border:1px solid var(--border-gray-med);
    border-radius:50%;
    width:32px;
    height:32px;
    color:var(--text-black)
}
.sp-image-note {
    font-size:11px;
    text-align:center;
    color:var(--text-gray)
}
.sp-eyebrow {
    font-size:11px!important;
    letter-spacing:.16em;
    font-weight:700;
    color:var(--gold);
    margin-bottom:18px!important
}
.sp-intro .sp-lead {
    font-size:16px;
    color:var(--text-gray);
    margin:24px 0
}
.sp-benefits {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin:28px 0
}
.sp-benefits>div {
    display:flex;
    gap:9px
}
.sp-benefits>div>span {
    font-size:27px;
    color:var(--gold);
    line-height:1
}
.sp-benefits p {
    font-size:12px;
    line-height:1.5;
    color:var(--text-gray)
}
.sp-benefits strong {
    display:block;
    color:var(--text-black);
    font-size:13px;
    font-weight:600;
    margin-bottom:6px
}
.sp-page .sp-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    min-height:54px;
    padding:15px 27px;
    background:var(--text-black);
    color:white;
    border-radius:8px;
    font-size:14px;
    font-weight:650;
    line-height:1.4;
    transition:background .2s
}
.sp-intro>.sp-button {
    width:100%;
    box-shadow:0 8px 20px var(--shop-hover-shadow)
}
.sp-page .sp-button:hover {
    background:var(--text-black)
}
.sp-availability {
    margin:14px 0 22px!important;
    text-align:center;
    font-size:12px;
    color:var(--text-gray)
}
.sp-journey {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    text-align:center;
    position:relative;
    gap:12px
}
.sp-journey:before {
    content:"";
    position:absolute;
    height:1px;
    top:21px;
    left:16%;
    right:16%;
    background:var(--border-gray-med)
}
.sp-journey span {
    position:relative;
    display:grid;
    place-items:center;
    margin:0 auto 8px;
    width:44px;
    height:44px;
    background:white;
    color:var(--gold);
    border:1px solid var(--border-gray-med);
    border-radius:50%;
    font-size:12px
}
.sp-journey strong,.sp-journey small {
    display:block;
    font-size:12px
}
.sp-journey small {
    font-size:11px;
    color:var(--text-gray)
}
.sp-ribbon {
    background:var(--creamlight);
    display:flex;
    justify-content:center;
    gap:65px;
    padding:20px 24px;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:10px;
    font-weight:600;
    flex-wrap:wrap;
    border-block:1px solid var(--border-gray-med)
}
.sp-section {
    padding-top:80px;
    padding-bottom:80px
}
.sp-section-head {
    text-align:center;
    max-width:780px;
    margin:0 auto 35px
}
.sp-section-head>p:last-child {
    margin-top:18px;
    color:var(--text-gray)
}
.sp-preview-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}
.sp-preview-grid img {
    aspect-ratio:1;
    object-fit:cover;
    border-radius:12px
}
.sp-preview-grid figcaption {
    text-align:center;
    font-family:var(--font-serif-title);
    font-size:20px;
    padding-top:15px
}
.sp-tinted {
    background:var(--creamlight)
}
.sp-story,.sp-gift {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center
}
.sp-story p:not(.sp-eyebrow),.sp-gift p:not(.sp-eyebrow) {
    margin-top:20px;
    color:var(--text-gray)
}
.sp-story-image img,.sp-gift-image img {
    border-radius:14px
}
.sp-text-link {
    display:inline-block;
    border-bottom:1px solid var(--gold);
    padding-bottom:5px;
    margin-top:24px;
    font-weight:600;
    font-size:14px
}
.sp-text-link span {
    margin-left:16px
}
.sp-steps {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:55px;
    text-align:center
}
.sp-step-number {
    display:block;
    font-family:var(--font-serif-title);
    font-size:40px;
    font-style:italic;
    color:var(--gold);
    margin-bottom:14px
}
.sp-steps p {
    margin-top:12px;
    color:var(--text-gray);
    font-size:14px
}
.sp-dark {
    background:var(--text-black);
    color:white
}
.sp-inside {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px
}
.sp-inside h2 {
    font-size:42px
}
.sp-dark em,.sp-dark .sp-eyebrow {
    color:var(--gold)
}
.sp-inside-copy>p:not(.sp-eyebrow) {
    margin-top:23px;
    color:var(--text-gray)
}
.sp-inside-copy .sp-small {
    font-size:12px
}
.sp-page .sp-button-light {
    background:var(--creamlight);
    color:var(--text-black);
    margin-top:30px
}
.sp-page .sp-button-light:hover {
    background:var(--creamlight)
}
.sp-chapter {
    display:flex;
    gap:22px;
    border-bottom:1px solid var(--border-gray-med);
    padding:18px 0
}
.sp-chapter:first-child {
    padding-top:0
}
.sp-chapter>span {
    color:var(--gold);
    font-family:var(--font-serif-title);
    font-style:italic;
    font-size:26px
}
.sp-chapter h3 {
    font-family:var(--font-serif-title);
    font-size:23px;
    font-weight:400
}
.sp-chapter p {
    color:var(--text-gray);
    font-size:13px;
    margin-top:5px
}
.sp-more {
    border:0;
    background:none;
    color:var(--gold);
    padding:20px 0;
    font-size:13px!important
}
.sp-faq {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:85px
}
.sp-faq>div>p:not(.sp-eyebrow) {
    margin-top:24px;
    color:var(--text-gray)
}
.sp-questions details {
    border-bottom:1px solid var(--border-gray-med)
}
.sp-questions summary {
    list-style:none;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:22px 0;
    font-size:15px;
    font-weight:600
}
.sp-questions summary::-webkit-details-marker {
    display:none
}
.sp-questions summary span {
    color:var(--gold)
}
.sp-questions details[open] summary span {
    transform:rotate(45deg)
}
.sp-questions details p {
    padding:0 20px 22px 0;
    font-size:14px;
    color:var(--text-gray)
}
.sp-finale {
    text-align:center
}
.sp-finale>p:not(.sp-eyebrow) {
    margin:18px 0 28px;
    color:var(--text-gray)
}
.sp-star {
    display:block;
    color:var(--gold);
    font-size:45px;
    margin-bottom:12px
}
.sp-page [id] {
    scroll-margin-top:30px
}
@media(min-width:1500px) {
    .sp-hero {
    gap:65px
}
    .sp-intro {
    padding-top:15px
}
}
@media(max-width:1000px) {
    .sp-hero {
    gap:28px
}
    .sp-gallery {
    grid-template-columns:1fr
}
    .sp-thumbnails {
    order:2;
    flex-direction:row;
    max-height:none
}
    .sp-benefits {
    grid-template-columns:1fr;
    gap:12px
}
    .sp-benefits strong {
    margin-bottom:2px
}
    .sp-benefits>div>span {
    width:25px;
    flex-shrink:0
}
    .sp-story,.sp-gift,.sp-inside,.sp-faq {
    gap:35px
}
    .sp-ribbon {
    gap:25px
}
    .sp-inside h2 {
    font-size:34px
}
}
@media(max-width:700px) {
    .sp-container {
    width:calc(100% - 36px)
}
    .sp-hero {
    grid-template-columns:1fr;
    padding-bottom:40px;
    gap:28px
}
    .sp-gallery {
    max-width:520px;
    width:100%;
    margin:auto
}
    .sp-photo img {
    max-height:480px
}
    .sp-intro h1 {
    font-size:40px
}
    .sp-benefits {
    grid-template-columns:repeat(3,1fr);
    gap:12px
}
    .sp-benefits>div {
    display:block
}
    .sp-benefits strong {
    margin-top:7px
}
    .sp-section {
    padding-top:50px;
    padding-bottom:50px
}
    .sp-preview-grid {
    gap:12px;
    grid-template-columns:1fr 1fr
}
    .sp-preview-grid figure:last-child {
    display:none
}
    .sp-preview-grid figcaption {
    font-size:17px
}
    .sp-story,.sp-gift,.sp-inside,.sp-faq {
    grid-template-columns:1fr;
    gap:32px
}
    .sp-story-image {
    order:-1
}
    .sp-steps {
    grid-template-columns:1fr;
    gap:30px
}
    .sp-steps article {
    max-width:350px;
    margin:auto
}
    .sp-ribbon {
    gap:12px 25px;
    font-size:9px
}
    .sp-gift-image {
    max-width:440px
}
    .sp-section-head>p:last-child {
    font-size:14px
}
    .sp-breadcrumb {
    padding:16px 0
}
    .sp-inside h2 {
    font-size:36px
}
    .sp-questions summary {
    padding:18px 0
}
}
@media(prefers-reduced-motion:reduce) {
    .sp-page * {
    transition:none!important;
    scroll-behavior:auto!important
}
}
/* Product overview: keep the benefits ribbon in the first desktop viewport. */
@media(min-width:1001px) {
    .sp-hero {
    grid-template-columns:1fr 1.12fr;
    gap:40px;
    padding:20px 0 18px
}
    .sp-intro {
    padding-top:0
}
    .sp-intro h1 {
    font-size:clamp(28px,2.65vw,38px);
    line-height:1.12
}
    .sp-intro .sp-eyebrow {
    margin-bottom:12px!important
}
    .sp-intro .sp-lead {
    font-size:15px;
    line-height:1.5;
    margin:16px 0
}
    .sp-benefits {
    gap:12px;
    margin:18px 0
}
    .sp-benefits strong {
    margin-bottom:4px
}
    .sp-intro>.sp-button {
    min-height:48px;
    padding:12px 22px
}
    .sp-availability {
    margin:10px 0 14px!important
}
    .sp-journey span {
    width:36px;
    height:36px;
    margin-bottom:5px
}
    .sp-journey:before {
    top:18px
}
    .sp-gallery {
    --sp-photo-size:min(500px,calc(100vh - 240px));
    grid-template-columns:52px minmax(0,1fr);
    gap:12px
}
    .sp-photo {
    height:var(--sp-photo-size);
    border-radius:12px
}
    .sp-photo img {
    height:100%;
    width:100%;
    object-fit:contain
}
    .sp-thumbnails {
    max-height:var(--sp-photo-size);
    gap:5px;
    padding:2px
}
    .sp-thumb {
    width:46px;
    padding:2px
}
    .sp-thumb.is-active {
    padding:1px
}
    .sp-image-note {
    margin-top:5px!important;
    font-size:10px
}
    .sp-ribbon {
    padding:16px 24px;
    gap:45px
}
}
/* Astro-Baby product layout, October 2026. Styles scoped to this page. */
.sp-announcement {
    position:relative;
    overflow:hidden;
    background:var(--text-black);
    color:var(--white);
    font:12px var(--font-serif);
    letter-spacing:.08em;
    padding:12px 44px 12px 0
}
.sp-announcement-track {
    display:flex;
    width:max-content;
    animation:sp-marquee 35s linear infinite
}
.sp-announcement-track>span {
    flex:none;
    padding:0 38px;
    white-space:nowrap
}
.sp-announcement-track>span>span {
    margin-left:70px;
    color:var(--gold)
}
.sp-announcement-pause {
    position:absolute;
    right:0;
    top:0;
    height:100%;
    width:38px;
    border:0;
    background:var(--text-black);
    color:white;
    cursor:pointer
}
.sp-announcement.is-paused .sp-announcement-track,.sp-announcement:hover .sp-announcement-track,.sp-announcement:focus-within .sp-announcement-track {
    animation-play-state:paused
}
@keyframes sp-marquee {
    to {
    transform:translateX(-50%)
}
}
.sp-page .sp-hero {
    grid-template-columns:1.12fr 1fr;
    gap:58px;
    padding:40px 0 60px
}
.sp-page:has(.sp-hero) {
    background:var(--white)
}
.sp-page .sp-gallery {
    display:flex;
    flex-direction:column;
    gap:14px;
    --sp-photo-size:auto
}
.sp-page .sp-gallery-main {
    order:0
}
.sp-page .sp-thumbnails {
    order:1;
    flex-direction:row;
    max-height:none;
    gap:10px;
    padding:3px;
    overflow-x:auto
}
.sp-page .sp-thumb {
    width:70px;
    border-radius:0
}
.sp-page .sp-thumb img {
    border-radius:0
}
.sp-page .sp-photo {
    height:auto;
    border-radius:0;
    background:var(--creamlight)
}
.sp-page .sp-photo img {
    height:auto;
    max-height:none;
    aspect-ratio:1;
    object-fit:contain
}
.sp-page .sp-image-note {
    margin-top:8px!important
}
.sp-page .sp-intro {
    padding-top:8px
}
.sp-page .sp-intro .sp-eyebrow {
    margin-bottom:10px!important
}
.sp-page .sp-intro h1 {
    font-family:var(--font-serif);
    font-weight:900;
    font-size:clamp(29px,2.8vw,42px);
    letter-spacing:-.035em;
    line-height:1.04;
    color:var(--text-black)
}
.sp-rating {
    display:flex;
    align-items:center;
    gap:9px;
    flex-wrap:wrap;
    font-size:12px;
    margin:18px 0 20px
}
.sp-rating-stars {
    color:var(--gold);
    font-size:21px;
    letter-spacing:1px
}
.sp-rating strong {
    font-size:15px
}
.sp-price {
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    font-size:18px;
    color:var(--text-black)
}
.sp-price del {
    color:var(--text-gray);
    font-size:15px
}
.sp-price strong {
    font-weight:500
}
.sp-price .sp-promo {
    background:var(--gold);
    color:white;
    border-radius:20px;
    padding:3px 13px;
    font-size:13px;
    letter-spacing:.04em
}
.sp-page .sp-tax {
    font-size:11px;
    color:var(--text-gray);
    margin-top:7px
}
.sp-page .sp-intro .sp-lead {
    line-height:1.65;
    margin:20px 0;
    color:var(--text-gray)
}
.sp-page .sp-intro>.sp-button {
    border:1px solid var(--text-gray);
    border-radius:5px;
    min-height:46px;
    font:18px var(--font-serif-title);
    text-transform: uppercase;
    padding:10px 16px;
    width:100%;
    cursor:pointer
}
.sp-page .sp-intro>.sp-gift-card {
    background:transparent;
    color:var(--text-gray);
    box-shadow:none;
    margin-top:10px
}
.sp-page .sp-gift-help {
    text-align:center;
    font-size:10px;
    line-height:1.5;
    color:var(--text-gray);
    margin:7px auto 20px;
    max-width:350px
}
.sp-page .sp-availability {
    font-size:16px;
    color:var(--text-black);
    margin:23px 0 18px!important;
    font-weight:600
}
.sp-availability strong {
    color:var(--gold)
}
.sp-page .sp-journey span {
    width:48px;
    height:48px;
    border:2px solid var(--border-gray-med);
    box-shadow:0 8px 20px var(--shop-hover-shadow);
    margin-bottom:10px
}
.sp-page .sp-journey:before {
    top:24px;
    height:2px;
    background:var(--border-gold)
}
.sp-journey svg {
    width:24px;
    height:24px
}
.sp-journey>div:first-child span {
    border-color:var(--gold)
}
.sp-page .sp-journey strong {
    font-weight:600;
    font-size:14px
}
.sp-page .sp-journey small {
    margin-top:2px;
    font-size:13px
}
.sp-payment {
    text-align:center;
    margin-top:26px;
    font-size:11px;
    color:var(--text-gray)
}
.sp-payment>div {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:9px;
    margin-top:9px
}
.sp-payment>div>span {
    height:23px;
    min-width:37px;
    border:1px solid var(--border-gray-med);
    border-radius:3px;
    background:var(--white);
    padding:1px 5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:bold
}





.sp-open-book {
    background:var(--creamlight);
    padding:45px 0 20px;
    overflow:hidden
}
.sp-open-stage {
    position:relative;
    min-height:580px;
    display:grid;
    align-items:center
}
.sp-page .sp-open-image {
    margin:auto
}
.sp-open-lines {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none
}
.sp-open-lines path {
    fill:none;
    stroke:var(--text-gray);
    stroke-width:1;
    stroke-dasharray:3 5
}
.sp-open-card {
    text-align:center;
    border:1px solid var(--border-gray-med);
    background:var(--creamlight);
    padding:34px 14px 16px;
    animation:sp-float 5s ease-in-out infinite;
    font-size:12px;
    line-height:1.4
}
.sp-page .sp-open-card img {
    position:absolute;
    width:65px;
    height:65px;
    object-fit:contain;
    top:-35px;
    left:50%;
    transform:translateX(-50%)
}
.sp-open-card-0 {
    top:19%;
    left:0
}
.sp-open-card-1 {
    top:19%;
    right:0;
    animation-delay:-1s
}
.sp-open-card-2 {
    bottom:17%;
    left:0;
    animation-delay:-2s
}
.sp-open-card-3 {
    bottom:17%;
    right:0;
    animation-delay:-3s
}
@keyframes sp-float {
    50% {
    transform:translateY(-8px)
}
}
.sp-motion-toggle {
    justify-self:center;
    position:relative;
    border:0;
    background:transparent;
    text-decoration:underline;
    text-underline-offset:3px;
    color:var(--text-gray);
    font-size:11px!important;
    margin:12px 0
}
.sp-open-book.is-paused .sp-open-card {
    animation-play-state:paused
}
.sp-contents {
    background:var(--creamlight);
    padding:70px 0 80px
}
.sp-contents-grid {
    display:grid;
    grid-template-columns:1fr 1.12fr;
    gap:85px
}
.sp-page .sp-contents .sp-eyebrow {
    letter-spacing:.07em;
    font-size:12px!important;
    margin-bottom:12px!important
}
.sp-page .sp-contents h2 {
    font:900 clamp(28px,3.1vw,44px)/1.02 var(--font-serif);
    letter-spacing:-.025em;
    color:var(--text-black)
}
.sp-contents-intro>p:not(.sp-eyebrow) {
    font-size:13px;
    line-height:1.5;
    max-width:390px;
    margin:14px 0 22px
}
.sp-page .sp-contents-intro>img {
    max-width:440px;
    aspect-ratio:1;
    object-fit:cover
}
.sp-contents-list details {
    border-bottom:1px solid var(--border-gray-med)
}
.sp-contents-list summary {
    display:flex;
    align-items:center;
    gap:16px;
    cursor:pointer;
    padding:18px 0;
    list-style:none
}
.sp-contents-list summary::-webkit-details-marker {
    display:none
}
.sp-contents-list summary>span:first-child {
    color:var(--gold);
    font:bold 24px var(--font-serif-title)
}
.sp-page .sp-contents-list h3 {
    font:22px var(--font-serif-title);
    font-weight:400;
    color:var(--text-black)
}
.sp-contents-chevron {
    margin-left:auto;
    color:var(--text-gray)
}
.sp-contents-list details[open] .sp-contents-chevron {
    transform:rotate(180deg)
}
.sp-page .sp-contents-list details>p {
    padding:0 14px 22px 46px;
    font-size:13px;
    color:var(--text-gray);
    line-height:1.65
}
@media(max-width:1000px) {
    .sp-page .sp-hero {
    gap:30px;
    grid-template-columns:1fr 1fr
}
    .sp-open-stage {
    min-height:470px
}
    .sp-open-card {
    width:145px;
    font-size:11px
}
    .sp-contents-grid {
    gap:38px
}
    .sp-page .sp-intro h1 {
    font-size:30px
}
}
@media(max-width:700px) {
    .sp-page .sp-hero {
    grid-template-columns:1fr;
    padding:24px 0 40px;
    gap:28px
}
    .sp-page .sp-intro h1 {
    font-size:34px
}
    .sp-page .sp-thumb {
    width:60px
}
    .sp-open-book {
    padding:25px 0
}
    .sp-open-stage {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:42px 16px;
    min-height:0
}
    .sp-page .sp-open-image {
    grid-column:1/-1;
    width:100%
}
    .sp-open-lines {
    display:none
}
    .sp-open-card {
    position:relative;
    inset:auto;
    width:100%;
    font-size:12px;
    animation:none;
    padding:35px 12px 18px
}
    .sp-motion-toggle {
    grid-column:1/-1;
    margin:0
}
    .sp-contents {
    padding:45px 0
}
    .sp-contents-grid {
    grid-template-columns:1fr;
    gap:24px
}
    .sp-page .sp-contents-intro>img {
    max-width:100%
}
    .sp-price {
    gap:10px
}
    .sp-page .sp-journey small {
    font-size:10px
}
    .sp-announcement {
    font-size:10px
}
}
@media(prefers-reduced-motion:reduce) {
    .sp-announcement-track,.sp-open-card {
    animation:none!important
}
    .sp-announcement-pause,.sp-motion-toggle {
    display:none
}
    .sp-announcement-track>span {
    padding:0 12px
}
    .sp-announcement-track>span>span {
    margin-left:12px
}
}
/* Reserve the announcement space above the site's fixed header. */
body:has(>.sp-announcement) {
    padding-top:40px
}
body>.sp-announcement {
    position:fixed;
    inset:0 0 auto;
    height:40px;
    z-index:100000;
    display:flex;
    align-items:center;
    padding-top:0;
    padding-bottom:0
}
body:has(>.sp-announcement)>header {
    top:40px
}
.sp-gift-card svg {
    width:18px;
    height:18px;
    flex:none
}
.sp-page .sp-payment p  {
    color: var(--text-black);
    font-weight: 600
}
.sp-payment p svg {
    width:18px;
    height:18px;
    vertical-align:-2px;
    margin-right:4px
}
.sp-announcement .sp-announcement-track>span {
    color:var(--white)
}
/* Announcement controls and shipping policy. */
.sp-announcement .sp-announcement-gift {
    display:inline-block;
    width:20px;
    height:20px;
    vertical-align:-5px;
    margin-right:14px;
    color:var(--gold);
    flex:none
}
.sp-announcement .sp-announcement-pause {
    width:76px;
    font:10px var(--font-serif);
    letter-spacing:0;
    text-transform:none;
    color:var(--text-gray)
}
.sp-announcement {
    padding-right:76px
}
.sp-page .sp-reviews-link,.sp-page .sp-shipping-link {
    text-decoration:underline;
    text-underline-offset:3px
}
.sp-page .sp-reviews-link {
    cursor:default
}
.sp-page .sp-shipping-link {
    border:0;
    background:none;
    color:inherit;
    padding:0;
    font:inherit;
    letter-spacing:inherit;
    text-transform:none
}
.sp-page .sp-shipping-dialog {
    box-sizing:border-box;
    position:fixed;
    inset:0;
    margin:auto;
    width:min(720px,calc(100% - 32px));
    max-height:85dvh;
    padding:38px 42px;
    border:0;
    border-radius:6px;
    background:var(--creamlight);
    color:var(--text-black);
    overflow:auto;
    text-align:left;
    box-shadow:0 8px 20px var(--shop-hover-shadow)
}
.sp-shipping-dialog::backdrop {
    background:var(--shop-hover-overlay)
}
.sp-page .sp-shipping-dialog h2 {
    font:400 30px/1.2 var(--font-serif-title);
    letter-spacing:0;
    margin:0 30px 26px 0
}
.sp-page .sp-shipping-dialog h3 {
    font:700 17px/1.4 var(--font-serif);
    margin:26px 0 12px
}
.sp-page .sp-shipping-dialog p,.sp-page .sp-shipping-dialog li {
    font:14px/1.7 var(--font-serif);
    color:var(--text-gray);
    margin:0 0 14px
}
.sp-page .sp-shipping-dialog ul {
    padding-left:22px;
    margin:18px 0
}
.sp-page .sp-shipping-dialog li {
    list-style:disc
}
.sp-page .sp-shipping-dialog a {
    text-decoration:underline;
    overflow-wrap:anywhere
}
.sp-page .sp-shipping-close {
    position:absolute;
    right:15px;
    top:12px;
    border:0;
    background:transparent;
    color:var(--text-gray);
    font:30px/1 var(--font-serif);
    padding:6px;
    cursor:pointer
}
body:has(.sp-shipping-dialog[open]) {
    overflow:hidden
}
@media(max-width:700px) {
    .sp-page .sp-shipping-dialog {
    padding:30px 22px
}
    .sp-page .sp-shipping-dialog h2 {
    font-size:26px
}
}
/* MyCosmoVision typography: shared brand fonts and explicit product sizes. */
.sp-page {
    font-family:var(--font-serif);
    color:var(--text-black)
}
.sp-page h1,.sp-page h2,.sp-page h3,
.sp-page .sp-intro h1,.sp-page .sp-contents h2,
.sp-page .sp-contents-list h3,.sp-page .sp-shipping-dialog h2,.sp-page .sp-shipping-dialog h3 {
    font-family:var(--font-serif-title);
    font-weight:400;
    font-style:normal;
    letter-spacing:1.2px;
    line-height:normal;
    color:var(--gold)
}
.sp-page h1,.sp-page h2,.sp-page .sp-intro h1,.sp-page .sp-contents h2,.sp-page .sp-shipping-dialog h2 {
    font-size:38px
}
.sp-page h1 em,.sp-page h2 em {
    font-family:inherit;
    font-weight:400;
    font-style:normal;
    color:inherit
}
.sp-page p,.sp-page .sp-intro .sp-lead,
.sp-page .sp-contents-list details>p,.sp-page .sp-shipping-dialog p,.sp-page .sp-shipping-dialog li,
.sp-page .sp-story p:not(.sp-eyebrow),.sp-page .sp-gift p:not(.sp-eyebrow),
.sp-page .sp-questions details p,.sp-page .sp-section-head>p:last-child,
.sp-page .sp-finale>p:not(.sp-eyebrow),.sp-page .sp-faq>div>p:not(.sp-eyebrow) {
    font-family:var(--font-serif);
    font-size:16px;
    font-weight:400;
    line-height:25.6px;
    letter-spacing:0;
    color:var(--text-black)
}
.sp-page .sp-intro .sp-eyebrow {
    font-family:var(--font-serif);
    font-size:19px!important;
    font-weight:600;
    letter-spacing:1.2px;
    color:var(--text-black)
}
.sp-page .sp-rating,.sp-page .sp-rating strong,.sp-page .sp-rating>span:not(.sp-rating-stars),.sp-page .sp-reviews-link {
    font-family:var(--font-serif);
    font-size:16px;
    line-height:25.6px;
    color:var(--text-black);
    letter-spacing:0
}
.sp-page .sp-tax,.sp-page .sp-tax .sp-shipping-link {
    font-family:var(--font-serif);
    line-height:22.4px;
    color:var(--text-black);
    letter-spacing:0
}
/* Preserve readability in the existing dark section. */
.sp-page .sp-dark p,.sp-page .sp-dark .sp-inside-copy>p:not(.sp-eyebrow) {
    color:var(--creamlight)
}
.sp-page .sp-dark h2,.sp-page .sp-dark h3,.sp-page .sp-dark .sp-eyebrow {
    color:var(--gold)
}
/* Larger body text needs space around the open-book illustration. */
.sp-open-stage {
    grid-template-columns:210px minmax(0,1fr) 210px;
    gap:50px 12px;
    padding-top:40px
}
.sp-page .sp-open-image {
    grid-column:2;
    grid-row:1/3;
    width:100%
}
.sp-open-card {
    position:relative;
    inset:auto;
    width:100%;
    align-self:center
}
.sp-open-card-0 {
    grid-column:1;
    grid-row:1
}
.sp-open-card-1 {
    grid-column:3;
    grid-row:1
}
.sp-open-card-2 {
    grid-column:1;
    grid-row:2
}
.sp-open-card-3 {
    grid-column:3;
    grid-row:2
}
.sp-motion-toggle {
    grid-column:1/-1
}
@media(max-width:1000px) {
    .sp-open-stage {
    grid-template-columns:1fr 1fr;
    gap:50px 24px
}
    .sp-page .sp-open-image {
    grid-column:1/-1;
    grid-row:1;
    width:100%;
    max-width:700px
}
    .sp-open-card {
    grid-column:auto;
    grid-row:auto;
    animation:none
}
    .sp-open-lines {
    display:none
}
}
@media(max-width:700px) {
    .sp-page .sp-intro h1,.sp-page h2,.sp-page .sp-contents h2,.sp-page .sp-shipping-dialog h2 {
    overflow-wrap:anywhere
}
    .sp-open-stage {
    grid-template-columns:1fr;
    gap:48px
}
    .sp-page .sp-open-image {
    grid-column:1;
    grid-row:auto
}
    .sp-page .sp-gift-help {
    max-width:none
}
}
/* Gift description inside the button and side controls for thumbnails. */
.sp-page .sp-intro>.sp-gift-card {
    flex-direction:column;
    gap:8px;
    padding:14px 16px
}
.sp-gift-label {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    max-width:100%
}
.sp-page .sp-gift-card .sp-gift-help {
    display:block;
    margin:0;
    max-width:none;
    font:400 12px/1.6 var(--font-serif);
    letter-spacing:0;
    text-transform:none;
    color:var(--text-gray)
}
.sp-thumbnail-nav {
    order:1;
    display:grid;
    grid-template-columns:30px minmax(0,1fr) 30px;
    gap:8px;
    align-items:center;
    min-width:0
}
.sp-page .sp-thumbnail-nav .sp-thumbnails {
    scrollbar-width:none;
    min-width:0
}
.sp-thumbnail-nav .sp-thumbnails::-webkit-scrollbar {
    display:none
}
.sp-page .sp-thumbnail-arrow {
    display:grid;
    place-items:center;
    width:30px;
    min-height:44px;
    padding:4px;
    border:0;
    background:transparent;
    color:var(--text-gray);
    box-shadow:none
}
.sp-thumbnail-arrow svg {
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6
}
.sp-page .sp-thumbnail-arrow:disabled {
    opacity:.3;
    cursor:default
}
.sp-page .sp-thumbnail-arrow:not(:disabled):hover {
    color:var(--gold)
}
.sp-page .sp-thumbnail-nav .sp-thumbnails {
    order:0
}
.sp-page .sp-payment>div>img {
    display:block;
    width:46px;
    height:32px;
    object-fit:contain;
    flex:none
}
/* Keep the banner gift gold even when global text rules style SVG paths. */
.sp-announcement .sp-announcement-gift,.sp-announcement .sp-announcement-gift path {
    color:var(--gold);
    stroke:var(--gold);
    fill:none
}

.cs-button:not(.cs-secondary),
.sp-page .sp-intro>.sp-order {
    background:var(--shop-button-background);
    border-color:var(--green);
    box-shadow:0 8px 20px var(--shop-button-shadow);
    color:var(--white);
    cursor:pointer;
    transition:filter .2s ease,box-shadow .2s ease
}
.cs-button:not(.cs-secondary):not(:disabled):is(:hover,:focus-visible) {
    filter:brightness(1.05)
}
.sp-page .sp-intro>.sp-order,
.sp-page .sp-intro>.sp-gift-card {
    transition:transform .2s ease,box-shadow .2s ease
}
.sp-page .sp-intro>.sp-order:focus-visible,
.sp-page .sp-intro>.sp-gift-card:focus-visible {
    transform:translateY(-3px);
    box-shadow:0 8px 28px var(--shop-hover-shadow)
}
@media (hover:hover) and (pointer:fine) {
    .sp-page .sp-intro>.sp-order:hover,
    .sp-page .sp-intro>.sp-gift-card:hover {
        transform:translateY(-3px);
        box-shadow:0 8px 28px var(--shop-hover-shadow)
    }
}
@media (prefers-reduced-motion:reduce) {
    .cs-button:not(.cs-secondary),
    .sp-page .sp-intro>.sp-order,
    .sp-page .sp-intro>.sp-gift-card {
        transition:none
    }
    .sp-page .sp-intro>.sp-order:is(:hover,:focus-visible),
    .sp-page .sp-intro>.sp-gift-card:is(:hover,:focus-visible) {
        transform:none
    }
}
.sp-page .sp-image-note{
    font-size:11px
}
.sp-page .sp-price,.sp-page .sp-price del{
    font-size:18px
}
.sp-page .sp-tax,.sp-page .sp-tax .sp-shipping-link{
    font-size:13px
}
.sp-page .sp-intro .sp-lead{
    font-size:15px
}
.sp-page .sp-order{
    gap:10px
}
.sp-page .sp-order svg,.sp-page .sp-order svg path{
    color:var(--white);
    stroke:currentColor
}

/* Cart uses the same compact brand header and typography as the account drawer. */
#shop-cart-dialog #cs-cart-title {font-family:var(--font-serif-title);color:var(--gold-logo);font-size:2rem;font-weight:400;line-height:normal;margin:var(--s-3) 0 var(--s1);}
#shop-cart-dialog .cs-empty {min-height:0;padding:var(--s2) 0;gap:var(--s0);}
#shop-cart-dialog .cs-empty h3 {font-family:var(--font-serif);font-size:1.15rem;margin:var(--s-1) 0;}
#shop-cart-dialog .cs-empty div {font-size:14px;}
#shop-cart-dialog .cs-cart-footer {margin-top:var(--s1);}

/* Common cart: full poster preview and aligned controls. */
.cs-cart-item {grid-template-columns:86.25px minmax(0,1fr);}
.cs-cart-details {min-width:0;}
.cs-cart-item h3 {overflow-wrap:anywhere;}
.cs-cart-preview {position:relative;align-self:start;border:0;padding:0;background:none;cursor:zoom-in;}
.cs-cart-preview img {width:86.25px;height:110.4px;display:block;object-fit:contain;border-radius:0;}
.cs-item-edit,.cs-add-product {display:inline-block;border:1px solid var(--border-gray);border-radius:6px;padding:var(--s-2) var(--s-1);background:var(--white);color:var(--text-black);font:inherit;text-decoration:none;line-height:1.4;}
.cs-item-edit {margin-top:var(--s-2);font-size:14px;}
.cs-item-edit:hover,.cs-add-product:hover {background:var(--border-gray-med);}
.cs-item-actions {display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-2);align-items:center;}
.cs-item-price {text-align:right;white-space:nowrap;font-size:14px;}
.cs-item-remove {display:grid;place-items:center;width:36px;height:44px;border:0;padding:var(--s-3);background:none;}
.cs-item-remove svg {width:20px;height:20px;}
.cs-item-remove:hover {background:var(--border-gray-med);border-radius:6px;}
.cs-preview-dialog {width:fit-content;max-width:94vw;padding:var(--s0);}
.cs-preview-dialog .cs-close {margin:0 0 var(--s-2) auto;background:var(--white);}
.cs-preview-dialog>img {display:block;width:auto;height:auto;max-width:100%;max-height:75dvh;object-fit:contain;margin:auto;}
@media(max-width:760px) {
    .cs-cart-item {grid-template-columns:74.75px minmax(0,1fr);gap:var(--s-1);}
    .cs-quantity button {padding:7px 8px;}
}
@media(max-width:360px) {
    .cs-item-actions {grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-3);}
    .cs-item-remove {width:28px;}
    .cs-quantity button {padding:7px 5px;}
}

.cs-personalization-row {display:flex;align-items:center;justify-content:space-between;gap:var(--s-1);margin-top:var(--s-1);}
.cs-personalization {min-width:0;}
.cs-cart-item .cs-personalization p {margin:0;line-height:1.3;}
.cs-personalization-row .cs-item-edit {flex:none;margin:0;}
.cs-item-actions .cs-item-remove {justify-self:end;}
.cs-cart-footer .cs-add-product {display:table;margin:0 auto var(--s0);background:var(--creamlight);}
.cs-cart-footer .cs-add-product:hover {background:var(--border-gray-med);}
.cs-preview-icon {position:absolute;right:0;bottom:0;display:grid;place-items:center;width:27px;height:27px;background:var(--white);border:1px solid var(--border-gray-med);border-radius:50%;color:var(--text-black);}
.cs-preview-icon svg {width:19px;height:19px;}
@media(max-width:760px) {
 .cs-cart-preview img {width:74.75px;height:97.75px;}
 .cs-personalization-row .cs-item-edit {flex:0 0 96px;padding:var(--s-3);font-size:12px;}
 .cs-personalization-row {gap:var(--s-3);}
}
@media(max-width:360px) {
 .cs-personalization-row {flex-wrap:wrap;}
 .cs-personalization-row .cs-item-edit {margin-left:auto;}
}

.cs-cart-footer .cs-total {border-bottom:0;}

/* Dedicated checkout layout, retaining the site's shared content width. */
.cs-visually-hidden {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
body.cs-checkout-body .cs-checkout-header {position:static;box-shadow:none;border-bottom:1px solid var(--border-gray-med);padding:var(--s1) 0;background:var(--white);}
.cs-checkout-header-inner {display:flex;align-items:center;justify-content:space-between;}
.cs-checkout-logo img {display:block;width:210px;height:auto;}
.cs-checkout-cart {display:flex;align-items:center;justify-content:center;width:44px;height:44px;}
.cs-checkout-page.cs-page {max-width:85vw;padding:0;margin-top:0;margin-bottom:var(--s4);}
.cs-checkout-page .cs-checkout-grid {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:stretch;}
.cs-checkout-page #cs-checkout {min-width:0;padding:var(--s2) var(--s2) var(--s2) 0;}
.cs-checkout-page .cs-summary {min-width:0;position:static;align-self:stretch;border:0;border-left:1px solid var(--border-gray-med);border-radius:0;padding:var(--s2);background:var(--creamlight);}
.cs-checkout-page h2 {font:600 23px/1.3 var(--font-serif);margin:0 0 var(--s0);}
.cs-checkout-page .cs-express h2 {font:400 16px/1.4 var(--font-serif);color:var(--text-gray);text-align:center;}
.cs-express-buttons {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-1);}
.cs-express-buttons button {min-height:50px;padding:var(--s-1);border:1px solid var(--border-gray-med);border-radius:10px;background:var(--bg-gray);color:var(--text-gray-medium);font:600 17px var(--font-serif);cursor:not-allowed;}
.cs-checkout-or {display:flex;align-items:center;gap:var(--s0);margin:var(--s1) 0;color:var(--text-gray);font-size:14px;}
.cs-checkout-or::before,.cs-checkout-or::after {content:"";height:1px;background:var(--border-gray-med);flex:1;}
.cs-checkout-or span {color:var(--text-gray);}
.cs-checkout-page .cs-form .cs-floating-field {position:relative;display:block;margin:var(--s-1) 0;font-weight:400;}
.cs-checkout-page .cs-floating-field>span {position:absolute;top:50%;left:14px;right:14px;transform:translateY(-50%);font-size:15px;line-height:1.2;color:var(--text-gray);pointer-events:none;}
.cs-checkout-page .cs-form .cs-floating-field input,.cs-checkout-page .cs-form .cs-floating-field select {min-height:60px;padding:24px 14px 8px;border-color:var(--border-gray-med);border-radius:10px;}
.cs-checkout-page .cs-floating-field input:focus+span,.cs-checkout-page .cs-floating-field input:not(:placeholder-shown)+span,.cs-checkout-page .cs-floating-field select+span {top:9px;transform:none;font-size:11px;}
.cs-checkout-page .cs-floating-field select {padding-right:var(--s2);}
.cs-checkout-page .cs-fields {gap:var(--s-1);}
.cs-checkout-page .cs-summary .cs-cart-item {padding:var(--s0) 0;}
.cs-checkout-page .cs-summary .cs-cart-item:first-child {padding-top:0;}
.cs-checkout-page .cs-summary .cs-cart-item h3 {font-size:19px;}
.cs-code-entry {display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s1);}
.cs-code-entry .cs-floating-field {flex:1;min-width:0;}
.cs-code-entry .cs-button {width:auto;min-height:50px;padding:var(--s-1);font-size:14px;}
.cs-checkout-page .cs-code-entry .cs-floating-field>span {font-size:12px;}
.cs-checkout-page .cs-code-entry .cs-floating-field input:focus+span,.cs-checkout-page .cs-code-entry .cs-floating-field input:not(:placeholder-shown)+span {font-size:10px;}
.cs-checkout-page #cs-code-status:empty {display:none;}
.cs-checkout-page #cs-totals .cs-line {border:0;}
.cs-checkout-page #cs-totals {margin-top:var(--s1);}
.cs-checkout-page .cs-consent {font-size:14px;line-height:1.5;align-items:flex-start;}
@media(max-width:760px) {
 .cs-checkout-page .cs-checkout-grid {grid-template-columns:minmax(0,1fr);}
 .cs-checkout-page #cs-checkout {padding:var(--s1) 0;}
 .cs-checkout-page .cs-summary {grid-row:auto;padding:var(--s0);border:0;}
 .cs-checkout-logo img {width:170px;}
 .cs-express-buttons button {font-size:14px;}
}

/* Compact contact and address fields; the promotion field retains its size. */
.cs-checkout-page #cs-checkout .cs-floating-field input,
.cs-checkout-page #cs-checkout .cs-floating-field select {height:49px;min-height:49px;padding-top:20px;padding-bottom:5px;line-height:1.2;}
.cs-checkout-page #cs-checkout .cs-floating-field input:focus+span,
.cs-checkout-page #cs-checkout .cs-floating-field input:not(:placeholder-shown)+span,
.cs-checkout-page #cs-checkout .cs-floating-field select+span {top:6px;}

.cs-page .cs-confirmation h1 {font-family:var(--font-serif-title);font-size:38px;font-weight:400;line-height:1.2;margin:0 0 var(--s1);}
.cs-confirmation .cs-button {margin-top:var(--s1);}
.cs-confirmation-status {font-size:14px;color:var(--text-gray);margin:var(--s0) 0 var(--s-1);}
@media(max-width:600px){.cs-page .cs-confirmation h1 {font-size:32px;}.cs-confirmation .cs-line>span {min-width:0;overflow-wrap:anywhere;}}

.cs-cart-footer .cs-cart-reassurance {margin:var(--s0) 0 0;text-align:center;font-family:var(--font-serif);font-size:12px;line-height:1.6;color:var(--text-black);}