/*
 * Site-wide rules that SWITCH Native 1 kept in <style> blocks inside the shared header layout
 * (synced pattern 22146), copied unchanged. They cover more than the header: calls to action,
 * training story, promotional banners, split-banner heroes and the compact catalog intro.
 * To be merged into the theme stylesheets in stage 6 (CSS and tokens).
 */

/* switch-header-aligned-edges */
body.switch-native .swx-site-header .sw-global-header-wrap .sg-utility .sg-utility-inner{width:var(--sw-page-box);max-width:none!important;margin-left:auto;margin-right:auto;box-sizing:border-box}
/* Text-style calls to action share the same label casing as buttons. */
body.switch-native #wrapper :is(.tr-ui-link,.tr-ui-secondary,.sw-action-link,.added_to_cart,.el-category-explore a,.tr-guide-card>p>a,.tr-section-head>p>a){text-transform:uppercase!important}

/* Shared CTA rhythm: space from copy, plus room between wrapped actions. */
body.switch-native #wrapper main .wp-block-buttons{margin-block:24px 12px!important;gap:12px 16px!important}
body.switch-native #wrapper main .tr-actions{margin-block:24px 12px!important;gap:12px 16px!important}
body.switch-native #wrapper main .tr-actions .wp-block-buttons,body.switch-native #wrapper main .tr-actions>p{margin-block:0!important}
body.switch-native #wrapper main .wp-block-button:not(.wp-block-buttons>.wp-block-button):not(.wc-block-components-product-button){margin-block:24px 12px!important}
body.switch-native #wrapper main p:has(>a.tr-ui-link),body.switch-native #wrapper main p:has(>a.sw-action-link){margin-block:20px 12px!important}
body.switch-native #wrapper main .wp-block-buttons:last-child,body.switch-native #wrapper main .tr-actions:last-child{margin-bottom:0!important}


/* Training story: consistent spacing between heading, copy and feature items. */
body.switch-native #wrapper .sw-training .tr-story-grid h2{margin-bottom:20px!important}
body.switch-native #wrapper .sw-training .tr-principles{margin-top:24px!important;padding-top:24px!important}
body.switch-native #wrapper .sw-training .tr-principles p{margin:0!important}
body.switch-native #wrapper .sw-training .tr-principles p+p{margin-top:18px!important}
body.switch-native #wrapper .sw-training .tr-principles strong{display:block;margin-bottom:4px!important}
body.switch-native #wrapper .sw-training .tr-principles strong+br{display:none}


/* Promotional banners share the standard container content edges. */
body.switch-native #wrapper .sw-container.sg-launch{padding-inline:0!important;box-sizing:border-box}


/* One full-width split-banner layout for Training, Longboards and category heroes. */
body.switch-native #wrapper :is(.tr-hero,.ac-hero){width:100%;max-width:none;margin-inline:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:0;container-type:inline-size}
body.switch-native #wrapper :is(.tr-hero-copy,.ac-hero-copy){min-width:0;padding-block:clamp(32px,4vw,64px)!important;padding-left:max(var(--sw-gutter),calc((100cqw - var(--sw-page-width))/2))!important;padding-right:clamp(24px,3.5cqw,48px)!important}
body.switch-native #wrapper :is(.tr-hero-image,.ac-hero-image){width:100%;min-width:0;margin:0!important}
@media(max-width:800px){
body.switch-native #wrapper :is(.tr-hero,.ac-hero){grid-template-columns:minmax(0,1fr)!important}
body.switch-native #wrapper :is(.tr-hero-copy,.ac-hero-copy){padding-inline:3.5cqw!important}
}


/* Both header rows follow the shared page width and gutter (base.css). */
body.switch-native .swx-site-header .sw-global-header-wrap .sp-header{padding-inline:var(--sw-page-edge)!important;box-sizing:border-box}


/* switch-catalog-first */
body.switch-native #wrapper .ac-compact-intro{padding-top:28px!important;padding-bottom:16px!important;}
body.switch-native #wrapper .ac-compact-intro h1{font-size:clamp(30px,4vw,48px)!important;line-height:1.05!important;margin:0 0 10px!important;}
body.switch-native #wrapper .ac-compact-intro p{max-width:760px;margin:0 0 8px!important;font-size:16px;line-height:1.5;}
body.switch-native #wrapper .ac-compact-intro + .ac-catalog-section{padding-top:8px!important;padding-bottom:32px!important;}
body.switch-native #wrapper .ac-details-anchor{scroll-margin-top:120px;}
body.switch-native #wrapper .ac-details-anchor + .sw-section:not(:has(a)){display:none;}
@media(max-width:600px){
body.switch-native #wrapper .ac-compact-intro{padding-top:20px!important;}
body.switch-native #wrapper .ac-compact-intro p{font-size:14px;}
}