@import url('./milo-typography-system.css');

:root {
    --milo-cta-green: #244d39;
    --milo-cta-green-hover: #1b402f;
    --milo-cta-cream: #fffaf0;
    --milo-cta-terracotta: #cf7657;
    --milo-cta-radius: 999px;
    --milo-cta-shadow: 0 5px 14px rgba(27, 64, 47, .12);
    --milo-cta-shadow-hover: 0 10px 24px rgba(27, 64, 47, .17);
}

/* Shared primary CTA treatment across the public site and member area. */
:where(.btn-green, .btn-terra, .home-login-button, .market-primary, .community-primary, .live-primary, .rec-primary, .shop-primary, .auth-submit, .solid-button, .member-submit-button, .contact-button:not(.is-disabled), .interest-send, .form-actions button[type="submit"], .filter-button, .search-wide button, .chat-form button, .product-add-button, .cart-checkout-link, .home-product-bottom button) {
    border: 1px solid var(--milo-cta-green) !important;
    border-radius: var(--milo-cta-radius) !important;
    background: var(--milo-cta-green) !important;
    color: var(--milo-cta-cream) !important;
    box-shadow: var(--milo-cta-shadow) !important;
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

:where(.btn-green, .btn-terra, .home-login-button, .market-primary, .community-primary, .live-primary, .rec-primary, .shop-primary, .auth-submit, .solid-button, .member-submit-button, .contact-button:not(.is-disabled), .interest-send, .form-actions button[type="submit"], .filter-button, .search-wide button, .chat-form button, .product-add-button, .cart-checkout-link, .home-product-bottom button):hover {
    border-color: var(--milo-cta-green-hover) !important;
    background: var(--milo-cta-green-hover) !important;
    box-shadow: var(--milo-cta-shadow-hover), inset 0 -2px 0 rgba(207, 118, 87, .72) !important;
    transform: translateY(-2px);
}

:where(.btn, .home-login-button, .market-primary, .community-primary, .live-primary, .rec-primary, .shop-primary, .soft-button, .solid-button) {
    min-height: 48px;
    padding: 12px 26px !important;
}

.home-login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

/* Compact guest actions without constraining the longer registration label. */
.milo-global-header :is(.home-login-button, .home-register) {
    flex: 0 0 auto;
    width: auto;
    min-height: 44px;
    font-size: 12px !important;
}

.milo-global-header .home-login-button {
    padding: 10px 18px !important;
}

.milo-global-header .home-register {
    padding: 10px 14px !important;
}

@media (max-width: 1280px) {
    .milo-global-header :is(.home-login-button, .home-register) {
        font-size: 11px !important;
    }

    .milo-global-header .home-login-button {
        padding-inline: 14px !important;
    }

    .milo-global-header .home-register {
        padding-inline: 12px !important;
    }
}

.milo-global-header .home-register {
    background: var(--milo-cta-cream) !important;
    color: var(--milo-cta-green) !important;
}

:where(.auth-submit, .member-submit-button, .contact-button, .interest-send, .product-add-button, .cart-checkout-link, .cart-view-link) {
    min-height: 48px;
    padding-inline: 24px !important;
}

/* Shared secondary CTA: warm cream, fine green outline and green copy. */
:where(.home-register, .btn-light, .soft-button, .save-button-detail, .product-contact-form button, .product-contact-link, .cart-view-link) {
    border: 1px solid var(--milo-cta-green) !important;
    border-radius: var(--milo-cta-radius) !important;
    background: var(--milo-cta-cream) !important;
    color: var(--milo-cta-green) !important;
    box-shadow: none !important;
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

:where(.home-register, .btn-light, .soft-button, .save-button-detail, .product-contact-form button, .product-contact-link, .cart-view-link):hover {
    border-color: var(--milo-cta-green-hover) !important;
    background: #fffdf8 !important;
    box-shadow: 0 8px 20px rgba(27, 64, 47, .1), inset 0 -2px 0 rgba(207, 118, 87, .62) !important;
    transform: translateY(-2px);
}

:where(button, a):focus-visible {
    outline: 3px solid rgba(207, 118, 87, .32);
    outline-offset: 3px;
}

:where(button, a)[disabled], :where(button, a).is-disabled {
    box-shadow: none !important;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    :where(button, .btn, .market-primary, .community-primary, .live-primary, .rec-primary, .shop-primary) {
        transition: none !important;
    }
}

/* Warm, balanced public listing form. Scoped so account/admin forms stay unchanged. */
.form-shell {
    width: min(1120px, calc(100% - 40px));
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 34px;
    margin-top: 42px;
}
.form-shell .form-intro { top: 118px; padding: 8px 4px; }
.form-shell .form-intro h1 { margin: 9px 0 10px; font-size: 39px; line-height: 1.05; }
.form-shell .form-intro > p { font-size: 11px; line-height: 1.65; }
.form-shell .form-tip { margin-top: 22px; padding: 16px; border: 1px solid rgba(54,89,64,.07); border-radius: 15px; background: linear-gradient(135deg,#e8efe5,#edf2e9); }
.form-shell .form-tip b { font-size: 15px; }
.form-shell .listing-form { gap: 15px; }
.form-shell .form-block { padding: 22px 24px; border-color: rgba(48,79,59,.11); border-radius: 19px; background: #fffdf9; box-shadow: 0 9px 28px rgba(43,65,50,.045); }
.form-shell .form-block h2 { font-size: 21px; }
.form-shell .form-block > p { margin: 4px 0 13px; }
.form-shell .upload-box { min-height: 122px; border: 1px dashed #a8b5a6; border-radius: 13px; background: linear-gradient(135deg,#fbfaf5,#f5f5ed); }
.form-shell .upload-box span { font-size: 23px; }
.form-shell .market-field { gap: 5px; margin-top: 13px; }
.form-shell .market-field input,.form-shell .market-field select { height: 40px; border-color: rgba(48,79,59,.13); border-radius: 10px; background: #fff; }
.form-shell .market-field textarea { height: 98px; border-color: rgba(48,79,59,.13); border-radius: 10px; background: #fff; }
.form-shell .market-row { gap: 12px; }
.form-shell .market-check { padding: 3px 3px 0; line-height: 1.5; }
.form-shell .form-actions { gap: 10px; margin-top: 2px; }
.form-shell .form-actions a,.form-shell .form-actions button { display: inline-flex; min-width: 138px; min-height: 44px; align-items: center; justify-content: center; padding: 0 20px!important; border-radius: 13px!important; font-size: 11px; font-weight: 800; text-decoration: none; }
.form-shell .form-actions a { border: 1px solid #315c46; background: #fffaf2; color: #315c46; }
.form-shell .form-actions button { border: 1px solid #244d39!important; background: #244d39!important; color: #fffaf0!important; box-shadow: 0 6px 16px rgba(36,77,57,.12)!important; }
.form-shell .form-actions a:hover,.form-shell .form-actions button:hover { transform: translateY(-2px); }
@media(max-width:900px){.form-shell{grid-template-columns:1fr;width:min(760px,calc(100% - 30px));gap:24px}.form-shell .form-intro{position:static;padding:0}.form-shell .form-intro>p{max-width:580px}.form-shell .form-tip{max-width:430px}}
@media(max-width:560px){.form-shell{width:calc(100% - 24px);margin-top:28px}.form-shell .form-intro h1{font-size:34px}.form-shell .form-block{padding:19px 17px}.form-shell .upload-box{min-height:112px}.form-shell .market-row{grid-template-columns:1fr}.form-shell .form-actions{display:grid;grid-template-columns:1fr 1fr}.form-shell .form-actions a,.form-shell .form-actions button{min-width:0;width:100%;padding-inline:12px!important}}

/* MILO typography system: one repeatable hierarchy across public and member pages. */
:root{
    --milo-font-serif:"Lora","Noto Serif",Georgia,serif;
    --milo-font-sans:"Manrope","Noto Sans",Arial,sans-serif;
    --milo-type-display:clamp(40px,4.4vw,54px);
    --milo-type-h1:clamp(36px,3.8vw,48px);
    --milo-type-h2:clamp(27px,2.7vw,34px);
    --milo-type-h3:clamp(18px,1.55vw,21px);
    --milo-type-body:14px;
    --milo-type-small:11px;
    --milo-leading-heading:1.14;
    --milo-leading-body:1.65;
}
html,body{font-family:var(--milo-font-sans)!important;font-size:var(--milo-type-body);line-height:var(--milo-leading-body);font-weight:400}
body :where(button,input,select,textarea,label,nav,a,small){font-family:var(--milo-font-sans)!important}
body :where(h1,h2,h3,.serif){font-family:var(--milo-font-serif)!important;font-style:normal;font-weight:600;letter-spacing:-.025em}
body h1{font-size:var(--milo-type-h1)!important;line-height:var(--milo-leading-heading)!important}
body h2{font-size:var(--milo-type-h2)!important;line-height:1.18!important}
body h3{font-size:var(--milo-type-h3)!important;line-height:1.3!important}
body :where(p,li,dd){line-height:var(--milo-leading-body)}
body :where(button,.btn,[class*="button"],[class*="primary"],[class*="secondary"]){font-size:12px;font-weight:700;line-height:1.2;letter-spacing:0}
body :where(input,select,textarea){font-size:12px;font-weight:500;line-height:1.45}
body label{font-size:11px;font-weight:600;line-height:1.4}
body small{font-size:var(--milo-type-small);font-weight:500;line-height:1.5}
body :where(.detail-category,.form-intro>span,.catalog-hero>span,.photo-title-copy>span,.sales-section-head>div:first-child>span,.sales-listing-intro>span,.rec-hero>span,.listing-head small,.content-head small,.cta-kicker){font-family:var(--milo-font-sans)!important;font-size:10px!important;font-weight:700!important;line-height:1.35;letter-spacing:.14em}
body :where(h1,h2,h3) em{font-family:var(--milo-font-serif)!important;font-style:italic;font-weight:500}
body :where(.form-block h2,.description-panel h2,.rec-experience h2,.panel h2,.premium-benefits h2){font-size:24px!important;line-height:1.25!important}
body :where(.product-card h2,.listing-card h3,.giveaway-card h3,.sales-shop-card h3,.rec-card h3,.related-product-card h3,.question h4){font-family:var(--milo-font-serif)!important;font-size:20px!important;font-weight:600;line-height:1.32!important;letter-spacing:-.015em}
body :where(.detail-info h1,.premium-product-copy h1,.rec-detail h1){font-size:clamp(32px,3vw,40px)!important}
.milo-reference-brand strong,.milo-reference-brand small,.logo,.milo-global-header .logo{letter-spacing:revert}
@media(max-width:620px){:root{--milo-type-display:42px;--milo-type-h1:36px;--milo-type-h2:28px;--milo-type-h3:19px;--milo-type-body:13px}.form-block h2,.description-panel h2,.rec-experience h2{font-size:22px!important}}

/* Specificity guard: legacy page styles must resolve to the same semantic levels. */
body h1:not(#milo-type-exempt){font-family:var(--milo-font-serif)!important;font-size:var(--milo-type-h1)!important;font-style:normal!important;font-weight:600!important;line-height:var(--milo-leading-heading)!important;letter-spacing:-.025em!important}
body h2:not(#milo-type-exempt){font-family:var(--milo-font-serif)!important;font-size:var(--milo-type-h2)!important;font-style:normal!important;font-weight:600!important;line-height:1.18!important;letter-spacing:-.022em!important}
body h3:not(#milo-type-exempt){font-family:var(--milo-font-serif)!important;font-size:var(--milo-type-h3)!important;font-style:normal!important;font-weight:600!important;line-height:1.3!important;letter-spacing:-.015em!important}
body :is(h1,h2,h3):not(#milo-type-exempt) em{font-family:inherit!important;font-style:italic!important;font-weight:500!important}
body :is(.form-block,.description-panel,.rec-experience,.panel) h2:not(#milo-type-exempt){font-size:24px!important;line-height:1.25!important}
body :is(.detail-info,.premium-product-copy,.rec-detail) h1:not(#milo-type-exempt){font-size:clamp(32px,3vw,40px)!important}
body :is(.product-card,.listing-card,.giveaway-card,.sales-shop-card,.rec-card,.related-product-card) :is(h2,h3):not(#milo-type-exempt){font-size:20px!important;line-height:1.32!important}
@media(max-width:620px){body :is(.form-block,.description-panel,.rec-experience) h2:not(#milo-type-exempt){font-size:22px!important}}