/* Shared frontend styleguide. Loaded after the framework in both site layouts.
   variables.css owns values; this file owns typography, surfaces and controls.
   Component CSS owns layout and semantic states, never a second shadow scale. */
html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-weight: 400; }
h1, h2, h3, h4 { color: var(--nftel-color-heading); font-weight: var(--nftel-weight-heading); line-height: var(--nftel-line-heading); letter-spacing: -.025em; overflow-wrap: anywhere; }
h1 { font-size: var(--nftel-font-h1); }
h2 { font-size: var(--nftel-font-h2); }
h3 { font-size: var(--nftel-font-h3); }
h4 { font-size: var(--nftel-font-base); }
strong, b { font-weight: var(--nftel-weight-heading); }

/* One surface treatment. Dark/green/warm sections may change colour only. */
.card, section.box:not(#box-slides), #box-category-tree, #box-information-links, #box-customer-service-links {
  background: var(--card-background-color); border: 1px solid var(--nftel-line);
  border-radius: var(--nftel-radius-panel); box-shadow: var(--nftel-card-shadow);
}
.card { overflow: hidden; }
.card .card-header, .box > .card-header { padding: var(--nftel-space-panel); background: transparent; border: 0; }
.card .card-body, .box > .card-body { padding: var(--nftel-space-panel); background: transparent; }
.card .card-header .card-title { margin: 0; color: var(--nftel-color-heading); font-size: var(--nftel-font-h2); font-weight: var(--nftel-weight-heading); line-height: var(--nftel-line-heading); letter-spacing: -.025em; }
.card .card-header h1.card-title { font-size: var(--nftel-font-h1); }
.card .card-footer { background: var(--nftel-soft-surface); border-top: 1px solid var(--nftel-line-soft); box-shadow: none; }
:is(.card, section.box:not(#box-slides), #box-information-links, #box-customer-service-links) > .card-header,
:is(.card, section.box:not(#box-slides), #box-information-links, #box-customer-service-links) > .card-body:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
:is(.card, section.box:not(#box-slides), #box-information-links, #box-customer-service-links) > .card-body:last-child,
:is(.card, section.box:not(#box-slides), #box-information-links, #box-customer-service-links) > .card-footer { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }

/* Flat controls keep the same geometry on hover, focus and activation. */
.btn { min-height: 44px; padding: .65rem 1rem; border-radius: var(--nftel-radius-control); font-size: var(--nftel-font-sm); font-weight: var(--nftel-weight-control); line-height: var(--nftel-line-compact); box-shadow: none; transform: none; transition: background-color var(--nftel-motion), border-color var(--nftel-motion), color var(--nftel-motion); }
.btn:not(:disabled):not(.disabled):hover { box-shadow: none; transform: none; text-decoration: none; }
.btn.btn-lg { font-size: var(--nftel-font-base); }
.btn.btn-sm { font-size: var(--nftel-font-sm); }
.form-group label, label.control-label { font-size: var(--nftel-font-sm); font-weight: var(--nftel-weight-control); line-height: var(--nftel-line-compact); }
.form-control { font-size: var(--nftel-font-base); line-height: var(--nftel-line-compact); border-color: var(--nftel-control-line); transition: border-color var(--nftel-motion), background-color var(--nftel-motion); border-radius: var(--nftel-radius-control); box-shadow: none; }
.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]) { min-height: 44px; }
.form-control:not(:disabled):not([readonly]):hover { border-color: var(--nftel-control-line-hover); }
.form-control:focus, .input-group:focus-within { border-color: var(--nftel-focus-color); box-shadow: none; }
.input-group { box-shadow: none; }
.input-group:not(.checkout-quantity-control) { border-color: var(--nftel-control-line); border-radius: var(--nftel-radius-control); }
.input-group:not(.checkout-quantity-control):not(:has(> .form-control:is(:disabled, [readonly], [aria-invalid="true"]))):hover { border-color: var(--nftel-control-line-hover); }
.input-group:not(.checkout-quantity-control):focus-within { border-color: var(--nftel-focus-color); }
/* The group owns the frame; icon backgrounds stay inside its inner curve. */
.input-group:not(.checkout-quantity-control) > .input-group-text { flex: 0 0 auto; margin: 0; border: 0; border-color: inherit; border-radius: 0; }
.input-group:not(.checkout-quantity-control) > .input-group-text:not(:last-child) { border-inline-end-width: 1px; border-inline-end-style: solid; }
.input-group:not(.checkout-quantity-control) > .input-group-text:not(:first-child) { border-inline-start-width: 1px; border-inline-start-style: solid; }
.input-group:not(.checkout-quantity-control) > .input-group-text:first-child { border-start-start-radius: calc(var(--nftel-radius-control) - 1px); border-end-start-radius: calc(var(--nftel-radius-control) - 1px); }
.input-group:not(.checkout-quantity-control) > .input-group-text:last-child { border-start-end-radius: calc(var(--nftel-radius-control) - 1px); border-end-end-radius: calc(var(--nftel-radius-control) - 1px); }
.input-group:not(.checkout-quantity-control) > .form-control:last-child { margin-inline-end: 0; }
.input-group:not(.checkout-quantity-control):has(> .input-group-text):has(> .form-control:focus-visible) { outline: 3px solid var(--nftel-focus-color); outline-offset: 3px; }
.input-group:not(.checkout-quantity-control):has(> .input-group-text) > .form-control:focus-visible { outline: none; }
.input-group .input-group-icon { color: var(--nftel-color-muted); }
:is(a, button, .btn, .form-control, .nav-link, input, select, textarea, summary):focus-visible { outline: 3px solid var(--nftel-focus-color); outline-offset: 3px; box-shadow: none; }
.dropdown:where(:not(.site-nav-dropdown)) .dropdown-menu { border: 1px solid var(--nftel-line); border-radius: var(--nftel-radius-card); box-shadow: var(--nftel-shadow-overlay); padding: .35rem; }
.dropdown:where(:not(.site-nav-dropdown)) .dropdown-menu :is(.dropdown-menu-item > a, .nav-link):is(:hover, :focus-visible) { color: var(--nftel-color-heading); background: var(--nftel-soft-surface); border-radius: var(--nftel-radius-control); text-decoration: none; }
.pagination > li > :is(a, span) { font-size: var(--nftel-font-sm); font-weight: var(--nftel-weight-control); }
.table { border-collapse: separate; border-spacing: 0; font-size: var(--nftel-font-sm); }
.table > thead > tr > th { font-weight: var(--nftel-weight-control); }

/* Breadcrumbs use the same readable small-text scale on every page. */
.breadcrumb, ul.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0 0 var(--nftel-space-section); padding: .65rem 1rem; list-style: none; color: var(--nftel-color-muted); background: #fff; border: 1px solid var(--nftel-line); border-radius: var(--nftel-radius-card); box-shadow: none; font-size: var(--nftel-font-sm); line-height: var(--nftel-line-body); overflow-wrap: anywhere; }
.breadcrumb > li, ul.breadcrumb > li { display: inline-flex; align-items: baseline; gap: .5rem; min-width: 0; max-width: 100%; }
.breadcrumb > li:not(:last-child)::after, ul.breadcrumb > li:not(:last-child)::after { content: ""; display: block; align-self: center; flex: 0 0 .3rem; width: .3rem; height: .3rem; margin-inline: .15rem; padding: 0; border-block-start: 1.5px solid currentColor; border-inline-end: 1.5px solid currentColor; color: var(--nftel-color-muted); transform: rotate(45deg); }
.breadcrumb > li:last-child, .breadcrumb [aria-current="page"] { color: var(--nftel-color-heading); font-weight: var(--nftel-weight-control); }
.breadcrumb a, ul.breadcrumb li a { max-width: 100%; color: var(--nftel-color-muted); text-decoration: none; }
.breadcrumb a:hover, ul.breadcrumb li a:hover { color: var(--nftel-color-heading); text-decoration: underline; text-underline-offset: .18em; }
html[dir="rtl"] .breadcrumb > li:not(:last-child)::after { transform: rotate(225deg); }

@media (max-width: 575px) {
  .card .card-header, .box > .card-header, .card .card-body, .box > .card-body { padding: var(--nftel-space-panel-mobile); }
}