@layer quality-hard-guard{
/* Siteyap deterministic contrast guard v2 */
/* The authored package may intentionally keep its raw brand token while a
 * WordPress colour preset still forces white copy. Use the runtime-computed
 * foreground for action surfaces and a separately AA-safe text tone for
 * brand-coloured links; neither token changes the customer's source colour. */
html body .sy-native-actions .wp-element-button,
html body .sy-native-actions .wp-element-button:visited,
html body .siteyap-header-cta .wp-element-button,
html body .siteyap-header-cta .wp-element-button:visited,
html body .sy-number{
    background:var(--sy-interactive-bg,var(--siteyap-accent))!important;
    color:var(--sy-interactive-fg,#000)!important;
    -webkit-text-fill-color:var(--sy-interactive-fg,#000)!important;
    border-color:var(--sy-interactive-bg,var(--siteyap-accent))!important;
}
html body .siteyap-blog-preview-head>a,
html body .siteyap-blog-preview-head>a:visited{
    color:var(--sy-primary-link-tone,var(--siteyap-primary))!important;
    -webkit-text-fill-color:var(--sy-primary-link-tone,var(--siteyap-primary))!important;
}

/* Every generated premium footer uses a deliberately darkened brand canvas.
 * The foreground must therefore be resolved against that final composite,
 * not against the lighter source primary token. This also defeats late Kimi
 * token inheritance without weakening the browser contrast gate. */
html body .siteyap-footer{
    --sy-footer-fg:#fff!important;
    --sy-footer-muted:rgba(255,255,255,.82)!important;
    color:#fff!important;
}
html body .siteyap-footer :is(h2,h3,h4,strong){
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
}
html body .siteyap-footer :is(p,li,address,a,a:link,a:visited){
    color:rgba(255,255,255,.82)!important;
    -webkit-text-fill-color:rgba(255,255,255,.82)!important;
}
.page:not(.home) .sy-hero_simple:first-child .wp-block-button.is-style-outline .wp-element-button,
.page:not(.home) .sy-hero_simple:first-child .is-style-outline>.wp-block-button__link{
    background-color:#fff!important;
    color:var(--sy-primary-link-tone,var(--sy-text))!important;
    -webkit-text-fill-color:var(--sy-primary-link-tone,var(--sy-text))!important;
    border-color:var(--sy-primary-link-tone,var(--sy-text))!important;
}
.sy-fashion_newsletter,.sy-fashion_newsletter :is(h1,h2,h3,h4,h5,h6,p,label,small,strong,a,span),
.siteyap-recipe-fashion-commerce .sy-fashion_newsletter,
.siteyap-recipe-fashion-commerce .sy-fashion_newsletter :is(h1,h2,h3,h4,h5,h6,p,label,small,strong,a,span){
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
}

/* Fashion discovery uses a dark authored canvas. A late package token must
 * never turn its introductory copy into grey-on-near-black. */
html body.home.siteyap-recipe-fashion-commerce .siteyap-component-cat-discovery>p.has-large-font-size,
html body.home.siteyap-recipe-fashion-commerce .sy-authored-fashion-cat-discovery .sy-fashion-section-heading p{
    color:#f0e9ed!important;
    -webkit-text-fill-color:#f0e9ed!important;
}

/* Dark visual personalities may use a light brand paper for the page canvas,
 * while their cards intentionally remain dark. WordPress palette presets and
 * the Kimi runtime must therefore not leak the page ink into those cards. */
body[class*="siteyap-variant-cyberpunk-"] :is(.sy-card,.sy-native-item){
    background:#0d0e11!important;
    color:#f7f7f8!important;
}
body[class*="siteyap-variant-cyberpunk-"] :is(.sy-card,.sy-native-item) :is(h2,h3,h4,p,li,small,strong,a:not(.wp-element-button)){
    color:#f7f7f8!important;
    -webkit-text-fill-color:#f7f7f8!important;
}
body[class*="siteyap-variant-dark-luxury-"] :is(.sy-card,.sy-native-item){
    background:#111!important;
    color:#f5f1eb!important;
}
body[class*="siteyap-variant-dark-luxury-"] :is(.sy-card,.sy-native-item) :is(h2,h3,h4,p,li,small,strong,a:not(.wp-element-button)){
    color:#f5f1eb!important;
    -webkit-text-fill-color:#f5f1eb!important;
}

/* An outline accent can be valid on a dark hero but fails as soon as the same
 * reusable button is materialized on the brand paper. Keep the personality's
 * accent while resolving both foreground and fill semantically. */
body[class*="siteyap-variant-cyberpunk-"] .wp-element-button,
body[class*="siteyap-variant-cyberpunk-"] .wp-element-button:visited,
body[class*="siteyap-variant-dark-luxury-"] .wp-element-button,
body[class*="siteyap-variant-dark-luxury-"] .wp-element-button:visited{
    background:var(--siteyap-accent)!important;
    color:var(--sy-on-accent,#000)!important;
    -webkit-text-fill-color:var(--sy-on-accent,#000)!important;
    border-color:var(--siteyap-accent)!important;
}

/* Inner-page heroes have a stronger composition contract than the reusable
 * personality button. Resolve that collision last with literal high-contrast
 * pairs: primary and outline actions cannot inherit an accent foreground from
 * a nested Kimi/WordPress scope. The accent remains visible as the border and
 * focus language, while foreground/background are invariantly readable. */
html body[class*="siteyap-variant-cyberpunk-"].page:not(.home) .sy-hero_simple:first-child .wp-block-button:not(.is-style-outline) .wp-element-button,
html body[class*="siteyap-variant-dark-luxury-"].page:not(.home) .sy-hero_simple:first-child .wp-block-button:not(.is-style-outline) .wp-element-button{
    background:#0d0e11!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    border-color:var(--siteyap-accent)!important;
}
html body[class*="siteyap-variant-cyberpunk-"].page:not(.home) .sy-hero_simple:first-child .wp-block-button.is-style-outline .wp-element-button,
html body[class*="siteyap-variant-dark-luxury-"].page:not(.home) .sy-hero_simple:first-child .wp-block-button.is-style-outline .wp-element-button{
    background:#fff!important;
    color:#0d0e11!important;
    -webkit-text-fill-color:#0d0e11!important;
    border-color:#0d0e11!important;
}

/* P1E.3 v55 — semantic primary surfaces must not become less readable as a
 * brand gradient approaches a lighter accent. The runtime exposes a tone in
 * the same safe contrast direction as the selected foreground. This guard is
 * shared by contact pages, service-detail contact bands and their cards. */
html body.page:not(.home) .sy-contact{
    background:linear-gradient(135deg,var(--siteyap-primary),var(--sy-primary-safe-tone,var(--siteyap-primary)))!important;
    color:var(--sy-on-primary,#fff)!important;
}
html body.page:not(.home) .sy-contact :is(h1,h2,h3,h4,p,li,small,strong,a:not(.wp-element-button),span){
    color:var(--sy-on-primary,#fff)!important;
    -webkit-text-fill-color:var(--sy-on-primary,#fff)!important;
}
html body .sy-contact-card,
html body .sy-contact-card:link,
html body .sy-contact-card:visited{
    background:linear-gradient(145deg,var(--siteyap-primary),var(--sy-primary-safe-tone,var(--siteyap-primary)))!important;
    color:var(--sy-on-primary,#fff)!important;
    -webkit-text-fill-color:var(--sy-on-primary,#fff)!important;
}

/* P1E.4 v48 — inner-page canvas closure. Blog/archive sections must consume
 * the authored wide canvas instead of inheriting a narrow constrained block;
 * this is what previously left the right half of /blog visually unused on
 * wide desktop viewports. Contact pages use the same two-column contract so
 * identity copy and real contact actions form one balanced first screen. */
html body:not(.home) main :is(.sy-blog_grid,.sy-blog_adaptive,.sy-feature_grid){
    box-sizing:border-box!important;
    width:100%!important;
    max-width:none!important;
    padding-inline:max(24px,calc((100vw - var(--sy-wide))/2))!important;
}
html body:not(.home) main :is(.sy-blog_grid,.sy-blog_adaptive,.sy-feature_grid) :is(.wp-block-columns.sy-card-grid,.sy-native-items){
    box-sizing:border-box!important;
    width:100%!important;
    max-width:var(--sy-wide)!important;
    margin-inline:auto!important;
    min-width:0!important;
}
html body:not(.home) main :is(.sy-blog_grid,.sy-blog_adaptive) .wp-block-columns.sy-card-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:clamp(16px,2vw,28px)!important;
}
@media(max-width:1180px){
    html body:not(.home) main :is(.sy-blog_grid,.sy-blog_adaptive) .wp-block-columns.sy-card-grid{grid-template-columns:repeat(2,minmax(280px,1fr))!important}
}
@media(max-width:680px){
    html body:not(.home) main :is(.sy-blog_grid,.sy-blog_adaptive,.sy-feature_grid){padding-inline:22px!important}
    html body:not(.home) main :is(.sy-blog_grid,.sy-blog_adaptive) .wp-block-columns.sy-card-grid{grid-template-columns:minmax(0,1fr)!important}
}
@media(min-width:760px){
    html body:not(.home) main .sy-contact{
        box-sizing:border-box!important;
        display:grid!important;
        grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr)!important;
        grid-template-rows:auto auto!important;
        align-items:start!important;
        column-gap:clamp(38px,6vw,96px)!important;
        row-gap:16px!important;
        padding-inline:max(24px,calc((100vw - var(--sy-wide))/2))!important;
    }
    html body:not(.home) main .sy-contact>h2{grid-column:1!important;grid-row:1!important;max-width:14ch!important;margin:0!important}
    html body:not(.home) main .sy-contact>p{grid-column:1!important;grid-row:2!important;max-width:46ch!important;margin:0!important}
    html body:not(.home) main .sy-contact>.sy-contact-grid,
    html body:not(.home) main .sy-contact>.sy-map{grid-column:2!important;grid-row:1/span 2!important;margin:0!important;align-self:stretch!important}
    html body:not(.home) main .sy-contact>.sy-contact-grid{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
    html body:not(.home) main .sy-contact>.sy-contact-grid .sy-contact-card{min-height:0!important}
}
@media(max-width:759px){
    html body:not(.home) main .sy-contact{padding-inline:22px!important}
}
}