/* Shared brand and interaction rules. Keep page-specific layout out of this file. */
:root{--tofa-logo-size:48px;--tofa-control-radius:8px;--tofa-focus:#59414d;--tofa-focus-offset:2px}
#site-header .logo .wordmark,.portal-logo .wordmark,#footer .logo .wordmark{font-family:'DM Sans',sans-serif;font-size:var(--tofa-logo-size);font-weight:900;line-height:1;letter-spacing:-.045em;padding:0;margin:0;display:block}
#site-header .logo{display:flex;align-items:center;min-height:44px;flex-shrink:0}
/* A quiet, inset keyboard indicator stays inside compact controls. Pointer taps
   never lose their selected/pressed state and do not leave a focus rectangle. */
html:not([data-input-mode=pointer]) :is(a,button,summary):focus-visible{outline:2px solid var(--tofa-focus);outline-offset:var(--tofa-focus-offset)}
html[data-input-mode=pointer] :is(a,button,summary):focus{outline:none!important}
:is(.search,.inline-search,.wishlist-shop-tools form,.people-search,.store-search>div){border-radius:var(--tofa-control-radius)}
:is(.search,.inline-search,.wishlist-shop-tools form) button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:44px;min-height:44px;border-radius:6px;--tofa-focus-offset:-4px}
#site-header .main-header #global-search>button{min-width:44px}
.search button svg,.text-button svg,.button svg,.icon-btn svg{display:block;flex-shrink:0}
.button{border-radius:var(--tofa-control-radius);line-height:1.4}
:is(.button-row,.pp-person-actions,.cp-modal-actions){align-items:stretch;gap:12px}
:is(.button-row,.pp-person-actions,.cp-modal-actions)>.button{display:inline-flex;align-items:center;justify-content:center;margin-block:0}
.dialog-close{display:flex;align-items:center;justify-content:center;line-height:1;border-radius:50%;--tofa-focus-offset:-4px}
html:not([data-input-mode=pointer]) #mobile-navigation>a:focus-visible{outline-offset:-4px}
html:not([data-input-mode=pointer]) :is(.save-btn,.directory-save,.filter-overview button,.suggestions>a):focus-visible{outline-offset:-3px}
@media(max-width:760px){
 :root{--tofa-logo-size:32px}
 #site-header .profile-task-header{min-height:64px;padding-block:10px}
 #site-header .receiving-header{min-height:64px;padding-block:10px}
 #site-header .main-header{min-height:64px}
 .wishlist-shop-controls .wishlist-shop-sort select{font-size:14px}
}
@media(forced-colors:active){
 html:not([data-input-mode=pointer]) :is(a,button,summary):focus-visible{outline-color:Highlight}
}
@media(max-width:760px){
 /* Reserve enough room for the selected sort label at 320px. */
 .wishlist-shop-controls>.mobile-filter{flex:0 0 auto;min-width:104px}
 .wishlist-shop-controls>.wishlist-shop-sort{flex:1;min-width:0}
}

/* Filter forms use the same corners as account and checkout controls. */
#gift-filters :is(select,input[type=search]),.field :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border-radius:var(--tofa-control-radius)}
.field .handle-input input{border-radius:0}
.filter-category-grid label,.variant{border-radius:6px}

/* One type scale for utility pages at every width. Campaign headlines,
   product names and people's names keep their distinct editorial roles. */
:root{
 --tofa-page-title-size:2rem;
 --tofa-page-title-line:1.3;
 --tofa-section-title-size:1.375rem;
}
#main :is(.people-intro,.shop-heading,.page-heading,.network-page-heading,.finder-heading,.brands-intro,.directory-heading,.pp-form-heading,.onboarding-heading,.cp-page-head,.pp-section-heading) h1,
#main :is(.account-history,.account-login,.pp-gift-detail,.empty-page)>h1{
 font-family:'DM Sans',sans-serif;font-size:var(--tofa-page-title-size);
 font-weight:600;line-height:var(--tofa-page-title-line);letter-spacing:-.01em;
 color:var(--ink);min-width:0;max-width:100%;white-space:normal;
 word-break:normal;overflow-wrap:anywhere;text-wrap:pretty;margin:0 0 8px;
}
#main :is(.people-intro,.shop-heading,.page-heading,.network-page-heading,.finder-heading,.brands-intro,.directory-heading,.pp-form-heading,.onboarding-heading,.cp-page-head,.pp-section-heading) h1:last-child{margin-bottom:0}
#main :is(.finder-result-heading,.brands-results-head,.pp-section-heading) h2{
 font-family:'DM Sans',sans-serif;font-size:var(--tofa-section-title-size);
 font-weight:600;line-height:1.4;letter-spacing:0;color:var(--ink);
 overflow-wrap:anywhere;text-wrap:pretty;
}
#main :is(.empty-state,.pp-empty,.cp-empty)>h2{
 font-family:'DM Sans',sans-serif;font-size:1.25rem;font-weight:600;
 line-height:1.4;letter-spacing:-.01em;color:var(--ink);
 overflow-wrap:anywhere;text-wrap:pretty;
}
@media(max-width:760px){
 :root{--tofa-page-title-size:1.25rem;--tofa-page-title-line:1.4;--tofa-section-title-size:1.125rem}
 #main :is(.page-heading,.network-page-heading,.finder-heading){padding-block:20px 16px}
 #main :is(.pp-form-heading,.onboarding-heading){margin-bottom:20px}
}

.account-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}.account-actions .button{margin:0}

.catalogue-network{margin:24px 0;text-align:center}.catalogue-network:empty{display:none}

/* Brand names are separate links: leave a reliable target above the product title. */
.product-card>a.product-brand{display:flex;align-items:center;min-height:28px;margin-block:4px}
.product-card .product-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.product-card .product-price>strong{white-space:nowrap}
.product-card .product-price>span{min-width:0;overflow-wrap:anywhere}
.catalogue-missing-brand{min-height:45vh}

/* The document scrolls, not body: reserve space for persistent bottom controls. */
html:has(.pp-save-bar){scroll-padding-bottom:calc(112px + env(safe-area-inset-bottom))}
.pp-form :is(input,textarea,select,summary){scroll-margin-bottom:24px}
@media(max-width:760px){
 html:has(body.mobile-nav-enabled){scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom))}
}

/* Product recovery uses the same action spacing on narrow and wide screens. */
.catalogue-product-actions{justify-content:center}
@media(max-width:480px){.catalogue-product-actions{flex-direction:column;max-width:240px;margin-inline:auto}}

/* Account actions follow the settings hierarchy; destructive actions stay secondary. */
.pp-focused .account-actions{margin-top:16px;gap:12px}
.pp-focused .account-actions #account-signout{min-height:44px;margin:0;padding:10px 0;font-size:14px;font-weight:500}
#dialog .account-security .pp-setting-row{padding:16px 0;min-height:64px;color:var(--ink);background:none;border-radius:0}
#dialog .account-security .pp-setting-row:disabled{opacity:1;color:var(--muted);cursor:default}
#dialog .account-security .pp-setting-row:disabled>svg{visibility:hidden}
#dialog .account-security-delete{font-size:14px;min-height:44px;margin-top:20px;padding:10px 0;color:#a32941}
#dialog .account-security .form-error:empty,#delete-error:empty{display:none}
#dialog .account-delete .account-delete-retention{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:20px}
#dialog .account-delete>label{display:block;margin-bottom:8px}
#dialog #delete-confirm{display:block;width:100%;min-height:48px;font:inherit;font-size:16px;padding:12px;border:1px solid #a79fa4;border-radius:8px}
#dialog .account-delete .account-danger{color:#a32941;border-color:#c1a1a8;background:#fff}
#dialog .account-delete .account-danger:disabled{color:var(--muted);border-color:var(--line);background:#f7f5f6;opacity:1}