/* Shared content insets. Composite cards put the gutter in their text regions. */
:root {
  --surface-panel-space:28px;
  --surface-card-space:24px;
  --surface-control-block:10px;
  --surface-control-inline:14px;
  --surface-row-space:20px;
  --surface-nav-block:14px;
  --surface-nav-inline:16px;
}
@media(max-width:760px){
  :root{--surface-panel-space:20px;--surface-card-space:20px;--surface-row-space:16px;--surface-nav-block:12px;--surface-nav-inline:12px}
}

/* Plain framed content, including future account sections using the same shell. */
html[data-seasonal-theme]:not(.seasonal-off) :is(#view-account,#view-store,#view-status,#view-resellers,#view-welcome) :is(.panel:not(.at-tool):not(.account-nav):not(.why-panel):not(.faq-panel),.account-panel-screen:not(.at-tool),.auth-panel,.checkout-loading-panel,.feature-group,.collection-comparison,.as-table-wrap){
  padding:var(--surface-panel-space)!important;box-sizing:border-box;
}
html[data-seasonal-theme]:not(.seasonal-off) #view-account .account-panel-screen.at-tool{
  background-color:transparent!important;background-image:none!important;
}
html[data-seasonal-theme]:not(.seasonal-off) #view-account .account-nav{
  padding:var(--surface-nav-block) var(--surface-nav-inline)!important;box-sizing:border-box;
}
html[data-seasonal-theme]:not(.seasonal-off) :is(#site-topbar,.topbar) .nav-link,
html[data-seasonal-theme]:not(.seasonal-off) .footer-inner{
  background-color:transparent!important;background-image:none!important;
}

/* Content regions inside image cards, segmented panels and status boards. */
html[data-seasonal-theme]:not(.seasonal-off) :is(.why-item,.why-status,.cart-summary-card,.cart-item,.pd-purchase,.pd-review-card>div,.ac-product-content,.as-kpi,.as-stat,.lc-card-copy,.lc-inspect-copy,.lc-reward,.lc-dialog-head,.lc-store-event,.st-focus-copy,.st-pause-panel,.c3-partner,.docs-card,.page-nav-card){
  padding:var(--surface-card-space)!important;box-sizing:border-box;
}
html[data-seasonal-theme]:not(.seasonal-off) .ac-product-content{padding-bottom:0!important}
html[data-seasonal-theme]:not(.seasonal-off) .ac-product-actions,
html[data-seasonal-theme]:not(.seasonal-off) .ac-product-footer{padding-inline:var(--surface-card-space)!important}
html[data-seasonal-theme]:not(.seasonal-off) .faq-row summary{padding:var(--surface-row-space) var(--surface-panel-space)!important}
html[data-seasonal-theme]:not(.seasonal-off) .faq-answer{padding:0 var(--surface-panel-space) var(--surface-row-space)!important}
html[data-seasonal-theme]:not(.seasonal-off) #view-store .collection-products{padding:0 var(--surface-card-space) var(--surface-row-space)!important}
html[data-seasonal-theme]:not(.seasonal-off) #view-store :is(.collection-bundle,.collection-help){padding:var(--surface-row-space) var(--surface-card-space)!important}
html[data-seasonal-theme]:not(.seasonal-off) .sale-announcement{padding:16px var(--surface-card-space)!important}
html[data-seasonal-theme]:not(.seasonal-off) .lc-cinema{margin:var(--surface-card-space) var(--surface-card-space) 0!important}
html[data-seasonal-theme]:not(.seasonal-off) .lc-empty{padding:var(--surface-panel-space)!important}

/* Controls have their own smaller inset, rather than inheriting a panel gutter. */
html[data-seasonal-theme]:not(.seasonal-off) :is(.btn,.account-nav-item,.store-payment-option,.collection-filter button,.auth-tab,.ac-filters button){
  padding:var(--surface-control-block) var(--surface-control-inline)!important;min-height:44px;box-sizing:border-box;
}
html[data-seasonal-theme]:not(.seasonal-off) :is(.field,.as-field,.at-field,.pd-purchase) :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=file]){
  padding:12px var(--surface-control-inline)!important;min-height:44px;max-width:100%;box-sizing:border-box;
}
html[data-seasonal-theme]:not(.seasonal-off) .collection-filter{padding:6px!important}
html[data-seasonal-theme]:not(.seasonal-off) .sidebar-inner{padding:var(--surface-card-space) 20px!important}
html[data-seasonal-theme]:not(.seasonal-off) .search-box{padding:var(--surface-row-space) var(--surface-card-space)!important}
html[data-seasonal-theme]:not(.seasonal-off) .search-results{padding:12px var(--surface-card-space) var(--surface-row-space)!important}

/* Admin and reseller use the same card/dialog insets without seasonal colours. */
#app .admin-shell [data-ui-surface-part=header]{padding:var(--surface-card-space)!important}
#app .admin-shell :is([data-ui-surface-part=body],[data-ui-surface-part=footer]){padding:0 var(--surface-card-space) var(--surface-card-space)!important}
#app .admin-shell [data-ui-surface=card]:not(:has(> [data-ui-surface-part])){padding:var(--surface-card-space)!important}
#app .admin-shell :is(.crate-section,.crate-inventory article){padding:var(--surface-card-space)!important}
.brand-dialog-content{padding:var(--surface-card-space)!important;box-sizing:border-box}
@media(max-width:1023px){
  #app .admin-shell .mobile-record-table>tbody>tr{padding:var(--surface-card-space)!important}
}

html[data-seasonal-theme]:not(.seasonal-off) .search-input{margin:var(--surface-row-space) var(--surface-card-space) 8px!important;width:calc(100% - 2 * var(--surface-card-space))!important;box-sizing:border-box}
html[data-seasonal-theme]:not(.seasonal-off) .search-count{margin:8px var(--surface-card-space)!important}