.share-images-page { margin-bottom: 5rem; margin-top: 1.5rem; max-width: 1180px; }
.share-images-hero, .share-images-collection-hero { background: linear-gradient(120deg, #eff6f1 0%, #fffdf7 100%); border: 1px solid #dce7df; margin: 1.4rem 0 3rem; padding: clamp(2rem, 5vw, 4.5rem); }
.share-images-hero h1, .share-images-collection-hero h1 { color: #24313f; font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 800; letter-spacing: -.055em; line-height: .98; margin: .65rem 0 1rem; max-width: 900px; }
.share-images-collection-hero h1 { font-size: clamp(2.3rem, 5vw, 4.25rem); }
.share-images-hero > p:last-child, .share-images-collection-hero > p:last-child { color: #5d6d64; font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.65; margin: 0; max-width: 730px; }
.share-images-eyebrow { color: #a87824; font-size: .77rem; font-weight: 800; letter-spacing: .13em; margin: 0; text-transform: uppercase; }
.share-images-intro { align-items: start; border-bottom: 1px solid #dde5df; border-top: 1px solid #dde5df; display: grid; gap: 2rem; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr); margin-bottom: 4rem; padding: 2rem 0; }
.share-images-intro h2, .share-images-section-heading h2 { color: #24313f; font-size: clamp(1.7rem, 3vw, 2.45rem); font-weight: 800; letter-spacing: -.035em; margin: .45rem 0 0; }
.share-images-intro ol { counter-reset: share-step; display: grid; gap: 1.1rem; list-style: none; margin: 0; padding: 0; }
.share-images-intro li { display: grid; gap: .2rem; grid-template-columns: 1fr; }
.share-images-intro strong { color: #315d4c; font-size: 1rem; }
.share-images-intro span { color: #627069; }
.share-images-section-heading { align-items: end; display: flex; gap: 2rem; justify-content: space-between; margin-bottom: 1.5rem; }
.share-images-section-heading > p { color: #64726b; line-height: 1.55; margin: 0; max-width: 350px; }
.share-images-collections { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.share-images-collection-card { border: 1px solid #dce5df; color: inherit; display: flex; flex-direction: column; min-height: 250px; padding: 1.5rem; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.share-images-collection-card:hover { border-color: #315d4c; box-shadow: 0 16px 35px rgba(35, 61, 48, .1); color: inherit; transform: translateY(-3px); }
.share-images-collection-icon { align-items: center; background: #edf5ef; border-radius: 50%; color: #315d4c; display: inline-flex; font-size: 1.1rem; height: 2.4rem; justify-content: center; width: 2.4rem; }
.share-images-collection-card h3 { color: #24313f; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 1.35rem 0 .7rem; }
.share-images-collection-card p { color: #65736b; line-height: 1.55; margin: 0; }
.share-images-card-link { color: #315d4c; font-size: .92rem; font-weight: 800; margin-top: auto; padding-top: 1.2rem; }
.share-images-note { background: #fbf3df; border-left: 4px solid #b8872e; margin-top: 4rem; padding: 1.6rem; }
.share-images-note h2 { color: #564016; font-size: 1.2rem; font-weight: 800; margin: 0 0 .55rem; }
.share-images-note p { color: #675730; line-height: 1.65; margin: 0; max-width: 790px; }
.share-image-maker { align-items: start; display: grid; gap: clamp(1.5rem, 4vw, 4rem); grid-template-columns: minmax(0, .88fr) minmax(330px, 1.12fr); margin: 2.5rem 0 4.5rem; }
.share-image-maker-preview { background: #182d23; box-shadow: 0 24px 55px rgba(19, 41, 30, .16); position: sticky; top: 1rem; }
.share-image-maker-preview canvas { display: block; height: auto; width: 100%; }
.share-image-maker-controls { min-width: 0; }
.share-image-maker-heading h2 { color: #24313f; font-size: clamp(1.8rem, 3vw, 2.55rem); font-weight: 800; letter-spacing: -.04em; margin: .45rem 0 .65rem; }
.share-image-maker-heading p:last-child { color: #64726b; line-height: 1.6; margin: 0; }
.share-image-fieldset { border: 0; border-top: 1px solid #dfe7e1; margin: 1.6rem 0 0; padding: 1.25rem 0 0; }
.share-image-fieldset legend { color: #24313f; float: none; font-size: .86rem; font-weight: 800; letter-spacing: .06em; margin: 0 0 .75rem; text-transform: uppercase; width: auto; }
.share-image-options { display: grid; gap: .6rem; max-height: 315px; overflow: auto; padding-right: .25rem; }
.share-image-choice { background: #fff; border: 1px solid #dce5df; display: block; padding: .8rem .9rem; text-align: left; width: 100%; }
.share-image-choice:hover, .share-image-choice.is-selected { background: #eff6f1; border-color: #315d4c; }
.share-image-choice strong, .share-image-choice span { display: block; }
.share-image-choice strong { color: #315d4c; font-size: .88rem; margin-bottom: .25rem; }
.share-image-choice span { color: #637068; font-size: .9rem; line-height: 1.35; }
.share-image-format-options { display: flex; flex-wrap: wrap; gap: .55rem; }
.share-image-format, .share-image-secondary-action, .share-image-whatsapp-action { background: #fff; border: 1px solid #315d4c; color: #315d4c; cursor: pointer; font-weight: 800; padding: .68rem .9rem; text-decoration: none; }
.share-image-format.is-selected { background: #315d4c; color: #fff; }
.share-image-backgrounds { display: grid; gap: .55rem; grid-template-columns: repeat(4, 1fr); }
.share-image-background { background: #fff; border: 2px solid transparent; padding: 0; }
.share-image-background img { aspect-ratio: 1; display: block; object-fit: cover; width: 100%; }
.share-image-background.is-selected { border-color: #315d4c; }
.share-image-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.75rem; }
.share-image-primary-action { background: #315d4c; border: 1px solid #315d4c; color: #fff; cursor: pointer; font-weight: 800; padding: .75rem 1rem; }
.share-image-secondary-action, .share-image-whatsapp-action { align-items: center; display: inline-flex; }
.share-image-whatsapp-action { border-color: #5c9a65; color: #2f713d; }
.share-image-feedback { color: #547060; font-size: .9rem; margin: .8rem 0 0; min-height: 1.3rem; }
.share-images-reading-list { border-top: 1px solid #dce5df; padding-top: 3rem; }
.share-images-reading-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.share-images-reading-grid article { background: #fafcf9; border: 1px solid #e0e8e2; display: flex; flex-direction: column; padding: 1.2rem; }
.share-images-reading-grid article > p { color: #a87824; font-size: .8rem; font-weight: 800; letter-spacing: .06em; margin: 0 0 .7rem; text-transform: uppercase; }
.share-images-reading-grid blockquote { color: #3f5047; font-family: Georgia, serif; font-size: 1rem; line-height: 1.58; margin: 0; }
.share-images-reading-grid a { color: #315d4c; font-size: .88rem; font-weight: 800; margin-top: auto; padding-top: 1rem; }
.share-images-empty { border: 1px solid #dce5df; margin: 2rem 0; padding: 3rem; text-align: center; }
@media (max-width: 900px) { .share-images-collections, .share-images-reading-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .share-image-maker { grid-template-columns: 1fr; } .share-image-maker-preview { position: static; } }
@media (max-width: 640px) { .share-images-page { margin-top: 1rem; } .share-images-hero, .share-images-collection-hero { margin-bottom: 2rem; padding: 2rem 1.35rem; } .share-images-intro { grid-template-columns: 1fr; margin-bottom: 2.5rem; } .share-images-section-heading { align-items: start; flex-direction: column; gap: .7rem; } .share-images-collections, .share-images-reading-grid { grid-template-columns: 1fr; } .share-image-maker { margin-top: 1.5rem; } .share-image-actions > * { justify-content: center; width: 100%; } }