/* Shared public-site presentation. Guest invitation artwork remains independent. */
.site-elegant {
    --brand-green: #173c33;
    --brand-coral: #c64937;
    --brand-sage: #edf1e9;
    --brand-gold: #bfa176;
}

/* Opt-in public forms only; invitation artwork and native choice/upload controls stay independent. */
.site-elegant form.storefront-form {
    --field-surface: #f6f8f5;
    --field-border: #849288;
    --field-error: #ba3d35;
}
.site-elegant form.storefront-form .form-group { min-width: 0; }
.site-elegant form.storefront-form .form-group > label {
    display: block; margin-bottom: 8px; color: #293b33; font-size: 14px; font-weight: 500; line-height: 1.6;
}
.site-elegant form.storefront-form :is(input:not([type]), input[type=text], input[type=email], input[type=tel],
    input[type=password], input[type=search], input[type=url], input[type=number], input[type=date],
    input[type=time], input[type=datetime-local], input[type=month], input[type=week], select, textarea):not(:where(.hoopa-custom-phone *, .inv-wrap *)) {
    box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; min-height: var(--field-height, 52px);
    padding: 13px 16px; border: 1px solid var(--field-line, var(--field-border)); border-radius: 8px;
    background: var(--field-fill, var(--field-surface)); color: var(--field-ink, #243c31);
    font-family: inherit; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 0;
    box-shadow: var(--field-ring, none); outline: 2px solid transparent; outline-offset: 2px;
    transition: var(--field-transition, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease);
}
.site-elegant form.storefront-form textarea:not(:where(.hoopa-custom-phone *, .inv-wrap *)) {
    --field-height: 112px; resize: vertical;
}
.site-elegant form.storefront-form select:not(:where(.hoopa-custom-phone *, .inv-wrap *)) {
    appearance: auto; cursor: pointer; padding-block: 12px;
}
.site-elegant form.storefront-form :where(input, textarea):not(:where(.hoopa-custom-phone *, .inv-wrap *))::placeholder { color: #66746b; opacity: 1; }
.site-elegant form.storefront-form :where(input[type=email], input[type=tel], input[type=url]):not(:where(.hoopa-custom-phone *, .inv-wrap *)) {
    direction: ltr; text-align: right;
}
.site-elegant form.storefront-form :where(input, select, textarea).is-complete {
    --field-line: #748f7e; --field-fill: #f3f7f1;
}
@media (hover: hover) {
    .site-elegant form.storefront-form :where(input, select, textarea):hover:where(:not(:disabled, [readonly], :focus, .is-invalid, [aria-invalid=true], :user-invalid)) {
        --field-line: #527060; --field-fill: #f1f5ef;
    }
}
.site-elegant form.storefront-form :where(input, select, textarea):focus {
    --field-line: var(--brand-green); --field-fill: #fff; --field-ring: 0 0 0 3px #173c3321;
}
.site-elegant form.storefront-form :where(input, select, textarea):is(.is-invalid, [aria-invalid=true], :user-invalid) {
    --field-line: var(--field-error); --field-fill: #fff8f7;
}
.site-elegant form.storefront-form :where(input, select, textarea):is(.is-invalid, [aria-invalid=true], :user-invalid):focus {
    --field-ring: 0 0 0 3px #ba3d3521;
}
.site-elegant form.storefront-form :where(input, textarea)[readonly] {
    --field-line: #8a998e; --field-fill: #edf1e9;
}
.site-elegant form.storefront-form :where(input, select, textarea):disabled {
    --field-line: #b7c1b9; --field-fill: #ecefeb; --field-ring: none;
    --field-ink: #627168; cursor: not-allowed; opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .site-elegant form.storefront-form { --field-transition: none; }
}
@media (forced-colors: active) {
    .site-elegant form.storefront-form :is(input, select, textarea):focus-visible { outline-color: Highlight; }
}

.site-elegant .top-bar { background: #f4f6f3; color: #59655f; }
.site-elegant :is(.btn-primary, .header-buy-btn, .hoopa-design-submit, .account-login-submit,
    .hoopa-pick-card-cta-primary, .cc-btn-accept, .btn-add-cart) { background: var(--brand-coral); color: #fff; }
.site-elegant :is(.btn-primary, .header-buy-btn, .hoopa-design-submit, .account-login-submit,
    .hoopa-pick-card-cta-primary, .cc-btn-accept, .btn-add-cart):hover { background: #a83b2c; color: #fff; }
.site-elegant :is(.btn-outline, .btn-secondary) { color: var(--brand-green); border-color: #acbcb1; background: transparent; }
.site-elegant :is(.btn-outline, .btn-secondary):hover { background: var(--brand-sage); color: var(--brand-green); }
.site-elegant :is(.page-header, .contact-hero, .blog-hero, .rsvp-hero, .hoopa-design-hero, .cg-hero) {
    background: var(--brand-sage); border-bottom: 1px solid var(--border); padding-block: 40px;
}
.site-elegant :is(.page-header, .contact-hero, .blog-hero, .hoopa-design-hero, .cg-hero) h1 {
    color: var(--brand-green); font-size: 36px; font-weight: 600; line-height: 1.35;
}
.site-elegant :is(.page-header, .contact-hero, .blog-hero, .hoopa-design-hero, .cg-hero) h1::before {
    content: ''; display: block; width: 36px; height: 2px; background: var(--brand-gold); margin: 0 auto 18px;
}
.site-elegant :is(.hoopa-eyebrow, .contact-hero-eyebrow, .blog-hero-eyebrow, .cg-hero-eyebrow) { color: #a13b2c; }
.site-elegant :is(.section-title h2, .contact-card-head h2, .hoopa-design-step h2,
    .hoopa-about-story-card h2, .rsvp-demo-head h2, .cg-section-head h2) { color: var(--brand-green); }

/* Invitation format selection: clear product images and one primary direction. */
.site-elegant .hoopa-pick-section { background: #f4f6f3; padding-block: 44px 64px; }
.site-elegant .hoopa-pick-intro { margin-bottom: 32px; }
.site-elegant .hoopa-pick-intro h1 { color: var(--brand-green); font-size: 38px; }
.site-elegant .hoopa-pick-cards { gap: 28px; max-width: 1000px; }
.site-elegant .hoopa-pick-cards:has(> .hoopa-pick-card:only-child) { grid-template-columns: minmax(0, 1fr); max-width: 500px; }
.site-elegant .hoopa-pick-card { background: #fff; border: 1px solid var(--border); padding: 28px; border-radius: 8px; }
.site-elegant .hoopa-pick-card:hover { border-color: #8b9f92; background: #fff; }
.site-elegant .hoopa-pick-card-custom { border-top: 3px solid var(--brand-coral); }
.site-elegant .hoopa-pick-card-video { border-top: 3px solid var(--brand-gold); }
.site-elegant .elegant-product-preview { height: 270px; background: var(--brand-sage); border-radius: 4px; }
.site-elegant .hoopa-pick-card h2 { color: var(--brand-green); font-size: 24px; }
.site-elegant .hoopa-pick-price-num { color: var(--brand-green); }
.site-elegant .hoopa-pick-card-video .hoopa-pick-card-cta { background: transparent; color: var(--brand-green); border: 1px solid #acbcb1; }
.site-elegant .hoopa-pick-card-video:hover .hoopa-pick-card-cta { background: var(--brand-sage); color: var(--brand-green); }
.site-elegant .hoopa-type-picker-card { border-radius: 4px; }
.site-elegant .hoopa-inv-templates-header h2 { color: var(--brand-green); }
.site-elegant .hoopa-design-section { background: #fff; }
.site-elegant .hoopa-design-step { padding: 24px 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.site-elegant .hoopa-design-summary { border-radius: 0; border: 0; border-top: 2px solid var(--brand-gold); background: var(--brand-sage); }

/* About uses the existing product photograph, not decorative artwork. */
.site-elegant .hoopa-about-hero { position: relative; isolation: isolate; overflow: hidden; background: #faf3ec; padding: 72px 0; text-align: right; }
.site-elegant .storefront-about-photo { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.site-elegant .hoopa-about-hero .container { position: static; }
.site-elegant .storefront-about-copy { max-width: 530px; width: 49%; }
.site-elegant .hoopa-about-hero h1 { color: var(--brand-green); font-size: 44px; margin-bottom: 20px; }
.site-elegant .hoopa-about-lead { font-size: 17px; line-height: 1.85; color: #4e5952; margin: 0 0 26px; }
.site-elegant .hoopa-about-pillars-section { padding-block: 36px; }
.site-elegant .hoopa-about-pillar { border-top-color: var(--brand-gold); }
.site-elegant .hoopa-about-pillar h3 { color: var(--brand-green); font-size: 20px; font-weight: 500; }
.site-elegant .hoopa-about-story { background: #f4f6f3; }
.site-elegant .hoopa-about-story-card { max-width: 820px; padding-block: 0; }
.site-elegant .hoopa-about-story-highlight { background: transparent; border: 0; border-inline-start: 2px solid var(--brand-gold); padding: 12px 20px; }
.site-elegant .hoopa-about-story-highlight > i { display: none; }

/* Contact and service pages retain their real forms and working demo controls. */
.site-elegant .contact-section { margin-top: 0; padding-top: 44px; }
.site-elegant .contact-grid-new { gap: 56px; }
.site-elegant .contact-form-card { border: 0; border-radius: 0; background: none; padding: 0; }
.site-elegant .contact-form-card .contact-form { padding: 24px 0 0; background: none; }
.site-elegant .contact-card-head { padding: 0 0 20px; }
.site-elegant .contact-info-stack { background: var(--brand-sage); padding: 16px 28px; border-top: 2px solid var(--brand-gold); }
.site-elegant .contact-tile strong { color: var(--brand-green); overflow-wrap: anywhere; }
.site-elegant .contact-tile:last-child { border-bottom: 0; }
.site-elegant .contact-submit { width: auto; }
.site-elegant .rsvp-hero h1 { color: var(--brand-green); font-size: 40px; }
.site-elegant .rsvp-hero-lead { color: var(--text-light); }
.site-elegant .rsvp-hero-stage { background: none; box-shadow: none; }
.site-elegant .rsvp-hero::before { content: none; }
.site-elegant .rsvp-price-strip { background: none; box-shadow: none; border-radius: 0; }
.site-elegant .rsvp-price-strip span { color: var(--text-light); font-weight: 400; }
.site-elegant .rsvp-price-strip strong { color: var(--brand-green); font-weight: 500; }
.site-elegant .rsvp-flow-icon { display: none; }
.site-elegant .rsvp-flow-card { border-top-color: var(--brand-gold); }
.site-elegant .rsvp-flow-card h3 { color: var(--brand-green); font-size: 19px; font-weight: 500; }
.site-elegant :is(.rsvp-guest-panel, .rsvp-admin-panel) { background: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.site-elegant .rsvp-admin-screen { min-height: 0; background: #f4f6f3; }
.site-elegant .rsvp-tabs-demo .active { background: var(--brand-green); border-color: var(--brand-green); }
.site-elegant .rsvp-tabs-demo span { border-radius: 4px; font-weight: 500; }
.site-elegant .rsvp-capability { display: block; border: 0; border-top: 1px solid var(--brand-gold); border-radius: 0; padding: 20px 0; box-shadow: none; }
.site-elegant .rsvp-capability > i { display: none; }
.site-elegant .rsvp-capability strong { display: block; color: var(--brand-green); font-size: 18px; font-weight: 500; margin-bottom: 8px; }
.site-elegant .rsvp-capability span { color: var(--text-light); }
.site-elegant .rsvp-service-note-box { background: #f4f6f3; border: 0; border-inline-start: 2px solid var(--brand-gold); border-radius: 0; }
.site-elegant .rsvp-service-note-box > i { display: none; }
.site-elegant .rsvp-final-cta { background: var(--brand-green); }
.site-elegant .rsvp-final-cta .hoopa-eyebrow { color: #f18f7f; }
.site-elegant .rsvp-final-cta .btn-outline { color: #fff; border-color: #aec2b5; }
.site-elegant .rsvp-final-cta .btn-outline:hover { color: var(--brand-green); background: #fff; }
.site-elegant .rsvp-demo-head h2 { font-size: 30px; font-weight: 500; }
.site-elegant .rsvp-faq-section { background: #f4f6f3; }

/* Reading surfaces: no floating section containers. */
.site-elegant :is(.terms-content, .privacy-content) { background: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; max-width: 820px; margin-inline: auto; }
.site-elegant :is(.terms-content, .privacy-content) h2 { color: var(--brand-green); font-size: 23px; font-weight: 500; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.site-elegant .blog-featured { background: var(--brand-sage); }
.site-elegant :is(.blog-featured-title, .blog-card-title) { color: var(--brand-green); }
.site-elegant .blog-card { background: #fff; }
.site-elegant .storefront-article { max-width: 800px; margin: 0 auto; }
.site-elegant .storefront-article h1 { color: var(--brand-green); font-size: 36px; line-height: 1.4; margin-bottom: 12px; }
.site-elegant .storefront-article-copy { font-size: 17px; line-height: 1.95; overflow-wrap: anywhere; }
.site-elegant .storefront-article-copy :is(img, video, iframe) { max-width: 100%; }
.site-elegant .storefront-article-copy h2 { font-size: 26px; color: var(--brand-green); margin-block: 24px 12px; }
.site-elegant .storefront-article-cta { margin-top: 40px; padding-block: 28px; border-top: 2px solid var(--brand-gold); }
.site-elegant .storefront-article-cta h3 { color: var(--brand-green); font-size: 24px; margin-bottom: 10px; }
.site-elegant .storefront-article-cta p { color: var(--text-light); margin-bottom: 18px; }
.site-elegant .cg-hero h1 em { color: var(--brand-green); background: none; }
.site-elegant :is(.cg-option-primary, .cg-nav a:hover) { border-color: var(--brand-green); }
.site-elegant .learn-page { background: #f4f6f3; }
.site-elegant .learn-card { border-top: 2px solid var(--brand-gold); padding-top: 28px; }

/* Dense, quiet customer and checkout workspaces. Status colors stay meaningful. */
.site-elegant :is(.account-section, .account-login-section) { background: #f4f6f3; }
.site-elegant .account-bar { border-top: 2px solid var(--brand-gold); padding-top: 20px; }
.site-elegant :is(.account-bar h1, .account-login-head h1, .account-tile h3) { color: var(--brand-green); }
.site-elegant .account-login-card { border: 0; border-top: 2px solid var(--brand-gold); border-radius: 0; background: #fff; padding: 36px; }
.site-elegant .account-login-head > i { display: none; }
.site-elegant .account-share-opens :is(i, strong) { color: var(--brand-green); }
.site-elegant .account-stat { background: #f4f6f3; }
.site-elegant .account-stats { border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.site-elegant :is(.checkout-form, .checkout-summary) { border: 0; border-radius: 0; padding: 0; }
.site-elegant .order-summary { border: 0; border-top: 2px solid var(--brand-gold); border-radius: 0; background: var(--brand-sage); }
.site-elegant .storefront-status { text-align: center; padding-block: 64px; background: #f4f6f3; }
.site-elegant .storefront-status-code { color: #a13b2c; font-size: 18px; margin-bottom: 16px; }
.site-elegant .storefront-status h1 { color: var(--brand-green); font-size: 36px; margin-bottom: 16px; }

/* One footer treatment throughout the storefront. */
.site-elegant .footer-new { background: var(--brand-green); color: #e0e9e2; border: 0; }
.site-elegant :is(.footer-description, .footer-links a, .footer-copyright) { color: #e0e9e2; }
.site-elegant .footer-links a:hover { color: #fff; }
.site-elegant .footer-description a { color: #f18f7f; font-weight: 500; }
.site-elegant .footer-description a:hover { color: #fff; }
.site-elegant .footer-social a { color: #e0e9e2; border-color: #4b695e; }
.site-elegant .footer-copyright { border-color: #4b695e; }
.site-elegant .footer-logo-img:not(.brand-wordmark) { background: #fff; padding: 4px; border-radius: 4px; }
.site-elegant .a11y-panel { font-family: var(--font); border-radius: 8px; }
.site-elegant .a11y-header { background: var(--brand-green); border-radius: 8px 8px 0 0; }
.site-elegant .a11y-toggle { background: var(--brand-green); box-shadow: 0 3px 12px rgb(23 60 51 / 18%); }
@media (min-width: 769px) {
    .site-elegant .header-buy-btn { display: inline-flex; }
    .site-elegant .hoopa-about-hero { min-height: 450px; display: flex; align-items: center; }
    .site-elegant .hoopa-about-hero .container { width: 100%; }
}

@media (max-width: 768px) {
    .site-elegant :is(.page-header, .contact-hero, .blog-hero, .rsvp-hero, .hoopa-design-hero, .cg-hero) { padding-block: 28px; }
    .site-elegant :is(.page-header, .contact-hero, .blog-hero, .rsvp-hero, .hoopa-design-hero, .cg-hero) h1,
    .site-elegant :is(.hoopa-pick-intro, .hoopa-about-hero, .storefront-article, .storefront-status) h1 { font-size: 30px; }
    .site-elegant .hoopa-pick-section { padding-block: 28px 44px; }
    .site-elegant .hoopa-pick-card { padding: 20px; }
    .site-elegant .elegant-product-preview { height: 225px; }
    .site-elegant .hoopa-about-hero { padding: 0 0 32px; }
    .site-elegant .storefront-about-photo { position: static; height: 230px; margin-bottom: 28px; object-position: left center; }
    .site-elegant .storefront-about-copy { width: 100%; max-width: none; }
    .site-elegant .hoopa-about-lead { font-size: 16px; }
    .site-elegant .contact-grid-new { gap: 32px; }
    .site-elegant .contact-info-stack { padding: 12px 20px; }
    .site-elegant .account-login-card { padding: 28px 20px; }
    .site-elegant .rsvp-demo-head h2 { font-size: 25px; }
    .site-elegant .storefront-article h1 { overflow-wrap: anywhere; }
}
@media (max-width: 768px) and (max-height: 700px) {
    .site-elegant .storefront-about-photo { height: 120px; margin-bottom: 16px; }
    .site-elegant .hoopa-about-hero { padding-bottom: 20px; }
    .site-elegant .hoopa-about-lead { font-size: 15px; line-height: 1.7; margin-bottom: 18px; }
}