/*
 * GT Frame base for the commerce pages: checkout (1147618), cart (1147615), account (1147614).
 * Loaded by md-new/lib/commerce.php. Page files: checkout-frame.css, cart-frame.css, account-frame.css.
 * Tokens follow gt-design frame-language.md; every text pair clears 7:1 in both themes.
 */

body.gtco-page{--canvas:#fbfaf8;--surface:#fff;--well:#f3f1ed;--ink:#141414;--body:#2b2b30;--muted:#4f4f55;--hair:#e2ded7;--hair-strong:#c4bfb6;--control:#8a857c;--accent:#c0392b;--accent-strong:#9b2c21;--btn:#171717;--btn-ink:#fff;--btn-hover:#000;--rail:max(12px,calc(50% - 600px));--pad:48px;--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234f4f55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");--gt-checkout-muted:var(--muted);background:var(--canvas)!important;color:var(--body)}
html[data-theme="dark"] body.gtco-page{--canvas:#0f0f0f;--surface:#171717;--well:#1d1d1d;--ink:#fafafa;--body:#e4e4e7;--muted:#babac1;--hair:#2c2c2c;--hair-strong:#4a4a4a;--control:#77777d;--accent:#da6f55;--accent-strong:#f09a87;--btn:#fafafa;--btn-ink:#111;--btn-hover:#fff;--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23babac1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");color-scheme:dark}
@media(prefers-color-scheme:dark){html:not([data-theme]) body.gtco-page,html[data-theme="auto"] body.gtco-page{--canvas:#0f0f0f;--surface:#171717;--well:#1d1d1d;--ink:#fafafa;--body:#e4e4e7;--muted:#babac1;--hair:#2c2c2c;--hair-strong:#4a4a4a;--control:#77777d;--accent:#da6f55;--accent-strong:#f09a87;--btn:#fafafa;--btn-ink:#111;--btn-hover:#fff;--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23babac1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");color-scheme:dark}}
@media(max-width:760px){body.gtco-page{--pad:24px}}
/* Older commerce.css rules (cart drawer, empty states) read these, so they follow the Frame too. */
body.gtco-page{--md-commerce-canvas:var(--canvas);--md-commerce-surface:var(--surface);--md-commerce-surface-subtle:var(--well);--md-commerce-border:var(--hair);--md-commerce-text:var(--body);--md-commerce-muted:var(--muted);--md-commerce-heading:var(--ink);--md-commerce-action:var(--btn);--md-commerce-action-text:var(--btn-ink);--md-commerce-control:var(--surface);--md-commerce-focus:var(--accent-strong)}

/* Page frame: hairline rails and ruler ticks. Checkout and cart frame #content_box; the account template has no box, so main#content takes the frame. */
.gtco-page :is(#content_box,main#content.premium-builder){position:relative;isolation:isolate;overflow:clip;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:var(--canvas)!important;min-height:0}
.gtco-page :is(#content_box,main#content.premium-builder)::before,.gtco-page :is(#content_box,main#content.premium-builder)::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--hair);z-index:1;pointer-events:none}
.gtco-page :is(#content_box,main#content.premium-builder)::before{left:var(--rail)}
.gtco-page :is(#content_box,main#content.premium-builder)::after{right:var(--rail)}
@media(min-width:1320px){.gtco-page :is(#content_box,main#content.premium-builder){background-image:repeating-linear-gradient(to bottom,var(--hair-strong) 0 1px,transparent 1px 120px),repeating-linear-gradient(to bottom,var(--hair) 0 1px,transparent 1px 24px),repeating-linear-gradient(to bottom,var(--hair-strong) 0 1px,transparent 1px 120px),repeating-linear-gradient(to bottom,var(--hair) 0 1px,transparent 1px 24px)!important;background-size:12px 100%,7px 100%,12px 100%,7px 100%!important;background-position:calc(50% - 630px) 0,calc(50% - 625px) 0,calc(50% + 630px) 0,calc(50% + 625px) 0!important;background-repeat:no-repeat!important}}
.md-checkout-page.gtco-page #content_box{min-height:100vh}

/* Theme wrappers give way to the frame. */
.gtco-page #content_box #content,.gtco-page #content>article,.gtco-page #content>article>.content-text,.gtco-page #the_content{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.gtco-page #content>article>.content-headline,.gtco-page .cta-bar,.gtco-page .share-mobile-trigger{display:none!important}

/* Sections. .gtco-sec is the shared section shell; page files add their own section selectors to the lists below. */
.gtco-bar,.gtco-hero,:is(.gtco-sec,.md-checkout-page #the_content>section.wp-block-group,.md-cart-page .fct-cart-page,.md-cart-page .fluent-cart-cart-empty-content,.md-cart-page .md-cart-recommendations,.md-cart-page #the_content .wp-block-group.text-center,.md-account-page #content>.fct_customer_profile_wrap,.md-account-page #content>.fct_auth_wrap,.md-account-page #content>p.inner){position:relative;box-sizing:border-box;padding-inline:calc(var(--rail) + var(--pad))!important;background:transparent}
:is(.gtco-sec,.md-checkout-page #the_content>section.wp-block-group,.md-cart-page .fct-cart-page,.md-cart-page .fluent-cart-cart-empty-content,.md-cart-page .md-cart-recommendations,.md-cart-page #the_content .wp-block-group.text-center,.md-account-page #content>.fct_customer_profile_wrap,.md-account-page #content>.fct_auth_wrap,.md-account-page #content>p.inner),.gtco-bar+.gtco-hero{border-top:1px solid var(--hair)!important}
:is(.gtco-sec,.md-checkout-page #the_content>section.wp-block-group,.md-cart-page .fct-cart-page,.md-cart-page .fluent-cart-cart-empty-content,.md-cart-page .md-cart-recommendations,.md-cart-page #the_content .wp-block-group.text-center,.md-account-page #content>.fct_customer_profile_wrap,.md-account-page #content>.fct_auth_wrap,.md-account-page #content>p.inner)::before,:is(.gtco-sec,.md-checkout-page #the_content>section.wp-block-group,.md-cart-page .fct-cart-page,.md-cart-page .fluent-cart-cart-empty-content,.md-cart-page .md-cart-recommendations,.md-cart-page #the_content .wp-block-group.text-center,.md-account-page #content>.fct_customer_profile_wrap,.md-account-page #content>.fct_auth_wrap,.md-account-page #content>p.inner)::after,.gtco-bar+.gtco-hero::before,.gtco-bar+.gtco-hero::after{content:"";position:absolute;top:-4px;width:7px;height:7px;box-sizing:border-box;border:1px solid var(--hair-strong);border-radius:50%;background:var(--canvas);z-index:2}
:is(.gtco-sec,.md-checkout-page #the_content>section.wp-block-group,.md-cart-page .fct-cart-page,.md-cart-page .fluent-cart-cart-empty-content,.md-cart-page .md-cart-recommendations,.md-cart-page #the_content .wp-block-group.text-center,.md-account-page #content>.fct_customer_profile_wrap,.md-account-page #content>.fct_auth_wrap,.md-account-page #content>p.inner)::before,.gtco-bar+.gtco-hero::before{left:calc(var(--rail) - 3px)}
:is(.gtco-sec,.md-checkout-page #the_content>section.wp-block-group,.md-cart-page .fct-cart-page,.md-cart-page .fluent-cart-cart-empty-content,.md-cart-page .md-cart-recommendations,.md-cart-page #the_content .wp-block-group.text-center,.md-account-page #content>.fct_customer_profile_wrap,.md-account-page #content>.fct_auth_wrap,.md-account-page #content>p.inner)::after,.gtco-bar+.gtco-hero::after{right:calc(var(--rail) - 3px)}

/* Bar: the way back and the security note (checkout). */
.gtco-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding-block:12px;font-size:.875rem;line-height:1.4}
.gtco-bar svg{flex:none;width:16px;height:16px}
.gtco-bar__back{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--ink)!important;font-weight:600;text-decoration:none!important}
.gtco-bar__back:hover{color:var(--accent-strong)!important}
.gtco-bar__secure{display:inline-flex;align-items:center;gap:8px;margin:0;color:var(--muted)}
.gtco-bar__secure svg{color:var(--accent-strong)}

/* Hero: centred heading group. */
.gtco-hero{padding-block:56px 48px;text-align:center}
.gtco-hero h1{max-width:720px;margin:0 auto;color:var(--ink);font-size:2.25rem;line-height:1.15;font-weight:600;text-wrap:balance}
.gtco-hero .gtco-sub{display:block;color:var(--muted)}
.gtco-hero__lede{max-width:600px;margin:16px auto 0!important;color:var(--muted);font-size:1.1875rem;line-height:1.55;text-wrap:pretty}
.gtco-hero__lede a,.gtco-sec .gtco-link{color:var(--accent-strong);text-underline-offset:4px}
.gtco-hero__lede a:hover{color:var(--ink)}
.gtco-hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}

/* Buttons: 4px, ink primary, ghost on surface. */
.gtco-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 20px;border:1px solid var(--hair-strong);border-radius:4px;background:var(--surface);color:var(--ink)!important;font-size:1rem;line-height:1.3;font-weight:600;text-decoration:none!important;transition:border-color .22s cubic-bezier(.25,1,.5,1),background-color .22s cubic-bezier(.25,1,.5,1)}
.gtco-btn:hover{border-color:var(--muted)}
.gtco-btn svg{flex:none;width:16px;height:16px}
.gtco-btn--primary{border-color:var(--btn);background:var(--btn);color:var(--btn-ink)!important}
.gtco-btn--primary:hover{border-color:var(--btn-hover);background:var(--btn-hover)}

/* Section heading (cart recommendations). */
.gtco-head{max-width:640px;margin:0 auto 40px;text-align:center}
.gtco-head h2{margin:0;color:var(--ink);font-size:1.75rem;line-height:1.2;font-weight:600;text-wrap:balance}
.gtco-head p{margin:12px 0 0;color:var(--muted);font-size:1rem;line-height:1.55}

/* Blur-reveal heading. The script adds .gtco-reveal only when motion is allowed. */
.gtco-reveal .gtco-w{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(.28em);transition:opacity .8s cubic-bezier(.25,1,.5,1),filter .8s cubic-bezier(.25,1,.5,1),transform .8s cubic-bezier(.25,1,.5,1);transition-delay:calc(var(--i) * 60ms)}
.gtco-reveal.is-in .gtco-w{opacity:1;filter:none;transform:none}
@media(prefers-reduced-motion:reduce){.gtco-reveal .gtco-w{opacity:1;filter:none;transform:none;transition:none}}

/* Native selects get one chevron, inset to match the country picker. */
.gtco-page select:not([multiple]){-webkit-appearance:none;appearance:none;padding-right:44px!important;background-image:var(--chev)!important;background-repeat:no-repeat!important;background-position:right 16px center!important;background-size:16px 16px!important}

/* Focus rings. */
.gtco-page :is(.gtco-bar,.gtco-hero,.gtco-sec,.md-checkout-page #the_content>section.wp-block-group,.md-cart-page .fct-cart-page,.md-cart-page .fluent-cart-cart-empty-content,.md-cart-page .md-cart-recommendations,.md-cart-page #the_content .wp-block-group.text-center,.md-account-page #content>.fct_customer_profile_wrap,.md-account-page #content>.fct_auth_wrap,.md-account-page #content>p.inner,.fct_checkout) :is(a,button,summary,[tabindex]):focus-visible{outline:3px solid var(--accent-strong)!important;outline-offset:3px}

@media(max-width:760px){
.gtco-hero{padding-block:40px 32px}
.gtco-hero h1{font-size:1.75rem}
.gtco-hero__lede{font-size:1rem}
.gtco-head h2{font-size:1.3125rem}
}