/* Shared visual system: storefront, customer account and administration.
   Loaded after legacy component styles; semantic status colours stay distinct. */
:root {
    --brand-gradient: linear-gradient(135deg, #0a6370 0%, #0d929f 58%, #12b8bd 100%);
    --action-gradient: linear-gradient(135deg, #0a6370, #087b88);
    --brand-gradient-hover: linear-gradient(135deg, #084e5a, #087a87);
    --surface: #fff;
    --surface-soft: #eff7f9;
    --ink: #18333f;
    --muted: #566d79;
    --line: #dce8ed;
    --store-ink: var(--ink);
    --store-muted: var(--muted);
    --store-paper: #f6fafc;
    --store-line: var(--line);
    --bs-body-color: var(--ink);
    --bs-body-bg: #f6fafc;
    --bs-border-color: var(--line);
    --bs-primary: #0a7380;
    --bs-primary-rgb: 10, 115, 128;
    --panel-radius: 1.25rem;
    --panel-shadow: 0 8px 28px rgba(20, 58, 76, .055);
}
body.bg-body-tertiary {
    --bs-tertiary-bg-rgb: 246, 250, 252;
    background: radial-gradient(ellipse at 10% 0%, #e2f3f7, transparent 48%), #f6fafc !important;
    color: var(--ink);
    line-height: 1.6;
}
:focus-visible { outline: 3px solid #0a7380 !important; outline-offset: 3px; }
::selection { background: #ccebf0; color: #18333f; }
.skip-link { transform: none; border: 1px solid var(--line); box-shadow: var(--panel-shadow); }
.announcement-bar, .hero-intro, .login-brand-panel { background: var(--brand-gradient); }
.announcement-bar { font-size: .75rem; text-transform: none; letter-spacing: .02em; }
.store-header { border-color: var(--line); box-shadow: 0 4px 24px rgba(20, 58, 76, .045); }
.store-header-inner { padding-block: 1.05rem; }
.store-nav { gap: .4rem .65rem; }
.store-nav-link, .nav-account-toggle { font-size: .88rem; border-radius: .7rem; padding: .5rem .7rem; }
.store-nav-link.is-active { background: var(--surface-soft); color: #096775; }
.store-nav-link:hover, .nav-account-toggle:hover { background: #eff7f9; color: #096775; }
.nav-account-toggle { gap: .5rem; font-weight: 800; }
.nav-dropdown-panel { border-color: var(--line); box-shadow: 0 16px 48px rgba(20, 58, 76, .12); }
.dropdown-tree a { font-size: .9rem; border-radius: .5rem; padding: .55rem .65rem; }
.dropdown-tree a:hover { background: var(--surface-soft); color: #096775; }
.hero-slider { border-radius: 1.6rem; box-shadow: 0 18px 48px rgba(20, 58, 76, .09); }
.hero-intro h1 { line-height: 1.12; }
.hero-intro .hero-copy > p:last-child { color: #e2f5f7; font-size: 1rem; line-height: 1.75; }
.hero-content { background: #fff; }
.hero-product-price, .detail-price, .product-price { color: #096775; font-variant-numeric: tabular-nums; }
.value-strip { border-color: var(--line); }
.value-strip p { font-size: .88rem; color: var(--muted); }
.section-intro > p { color: var(--muted); line-height: 1.7; }
.product-card, .collection-tile, .subcategory-cover-card { border-radius: var(--panel-radius); }
.product-card { background: #fff; box-shadow: var(--panel-shadow) !important; transition: box-shadow .2s ease, transform .2s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(20, 58, 76, .11) !important; }
.product-category-label { color: #536d78; }
.product-card-copy h3 { line-height: 1.35; }
.product-information { align-self: center; }
.product-description { color: var(--muted); line-height: 1.8; }
.story-band { background: var(--action-gradient); border: 1px solid #0a6370; color: #fff; }
.story-band h2, .story-band .store-eyebrow, .story-band > p { color: #fff; }
.story-band > a { background: #fff; border-color: #fff; color: #0a6370; }
.story-band > a:hover { background: #e2f3f7; color: #084e5a; }
.story-band :focus-visible { outline-color: #fff !important; }
.store-footer { border-top: 1px solid var(--line); background: #edf5f8; }
.breadcrumbs { flex-wrap: wrap; color: var(--muted); font-size: .85rem; }
.btn, .button, .admin-form button[type="submit"], .header-cta, .hero-cta {
    min-height: 2.85rem; border-radius: .8rem; background: var(--action-gradient);
    border-color: transparent; font-size: .9rem; font-weight: 800; letter-spacing: 0;
    text-transform: none; box-shadow: 0 4px 12px rgba(10, 99, 112, .1);
}
.btn:hover, .button:hover, .admin-form button[type="submit"]:hover, .hero-cta:hover, .header-cta:hover {
    background: var(--brand-gradient-hover); border-color: transparent; color: #fff;
}
.btn.btn-outline-primary, .button.button-secondary, .btn.btn-secondary,
.btn.btn-outline-secondary, .btn.btn-light {
    background: #fff; color: #096775; border: 1px solid #c3d9e1; box-shadow: none;
}
.btn.btn-outline-primary:hover, .button.button-secondary:hover, .btn.btn-secondary:hover,
.btn.btn-outline-secondary:hover, .btn.btn-light:hover { background: #eaf4f7; color: #085a66; border-color: #9fc5d1; }
.btn.btn-danger, .btn.btn-outline-danger, .admin-form .btn.btn-danger {
    background: #fff1f2; color: #aa293b; border-color: #edc3ca; box-shadow: none;
}
.btn.btn-danger:hover, .btn.btn-outline-danger:hover, .admin-form .btn.btn-danger:hover {
    background: #aa293b; color: #fff; border-color: #aa293b;
}
.btn.btn-link { background: transparent; border-color: transparent; color: #096775; box-shadow: none; }
.btn:disabled, .btn.disabled, .button:disabled { opacity: .55; transform: none; box-shadow: none; cursor: not-allowed; }
.btn-sm { min-height: 2.4rem; padding: .45rem .75rem; font-size: .82rem; }
.form-control, .form-select, .admin-form .form-control, .admin-form .form-select,
.customer-form .form-control, .customer-form select, .customer-form textarea {
    min-height: 3rem; padding: .7rem .9rem; border: 1px solid #c6d8e0;
    border-radius: .75rem; background-color: #fff; color: var(--ink); font-size: 1rem;
}
.form-control:focus, .form-select:focus, .admin-form .form-control:focus,
.customer-form .form-control:focus { border-color: #0b8593; box-shadow: 0 0 0 .22rem rgba(10, 115, 128, .13); }
.form-control.is-invalid { border-color: #b02a37; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: #edf3f6; }
.form-label, .admin-form .form-label, .customer-form .form-label { color: var(--ink); font-size: .9rem; font-weight: 800; }
.form-text, .muted-copy { color: var(--muted); line-height: 1.65; }
.customer-form input[type="checkbox"], .customer-form input[type="radio"] { min-height: 0; border-radius: .25rem; }
.customer-panel, .content-section, .editor-section, .category-manager, .empty-state,
.stat-panel, .filter-bar, .login-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--panel-radius); box-shadow: var(--panel-shadow);
}
.customer-page { --customer-ink: var(--ink); --customer-muted: var(--muted); }
.customer-page-title, .legal-content h1 { color: var(--ink); line-height: 1.15; }
.customer-panel-intro { font-size: 1rem; }
.account-tabs { padding: .45rem; background: #e9f2f6; border-radius: 1rem; gap: .35rem; }
.account-tabs a, .account-tabs button { min-height: 2.8rem; border-radius: .7rem; background: transparent; color: #375666; font-size: .9rem; }
.account-tabs a.active { background: #fff; color: #096775; box-shadow: 0 3px 12px rgba(20, 58, 76, .07); }
.account-tabs a:not(.active):hover, .account-tabs button:hover { background: #dcebf0; }
.cart-summary, .privacy-action, .checkout-auth-callout { background: var(--surface-soft); border: 1px solid var(--line); }
.checkout-step { border-radius: .8rem; background: #e9f2f6; color: #4f6977; }
.checkout-step.current { background: var(--action-gradient); }
.legal-content { color: #3e5867; }
.legal-content h2, .privacy-title { color: var(--ink); }
.admin-shell { background: #f2f7fa; }
.admin-sidebar { width: 15.5rem; min-width: 15.5rem; background: var(--brand-gradient); padding: 1.8rem 1rem; }
.admin-nav .nav-link { gap: .75rem; font-size: .92rem; min-height: 3rem; border-radius: .8rem; color: #e4f4f6; }
.admin-nav .nav-link .bi { font-size: 1.1rem; }
.admin-nav .nav-link.is-current { background: #fff; color: #096775; box-shadow: 0 4px 16px rgba(0, 40, 55, .1); }
.admin-nav .nav-link:hover { background: rgba(255,255,255,.12); transform: none; }
.admin-nav .nav-link.is-current:hover { background: #eff8fa; }
.admin-sidebar :focus-visible { outline-color: #fff !important; }
.sidebar-store-link { display: flex; align-items: center; gap: .65rem; color: #fff; padding: .65rem; font-size: .88rem; text-decoration: none; border-radius: .7rem; }
.sidebar-store-link:hover { color: #fff; background: rgba(255,255,255,.12); }
.admin-topbar { background: #fff; border-color: var(--line); min-height: 4.7rem; }
.admin-topbar-context { display: grid; gap: .1rem; }
.admin-topbar-label { color: var(--muted); font-size: .65rem; letter-spacing: .1em; }
.admin-topbar-page { color: var(--ink); font-size: .95rem; font-weight: 800; }
.admin-identity { max-width: 25rem; overflow-wrap: anywhere; background: var(--surface-soft); font-weight: 700; }
.topbar-logout.btn { min-width: 2.75rem; min-height: 2.75rem; opacity: 1; color: #fff; background: var(--action-gradient); box-shadow: none; }
.topbar-logout.btn:hover, .topbar-logout.btn:focus-visible { color: #fff; background: var(--brand-gradient-hover); box-shadow: none; }
.admin-content { padding: 1.8rem clamp(1rem, 2.4vw, 2.5rem) 2.5rem; }
.admin-content .page-heading h1, .admin-content .section-heading h2,
.admin-content .editor-section h2, .admin-content .empty-state h2 {
    font-family: 'Nunito Sans', sans-serif; font-weight: 850; color: var(--ink); letter-spacing: -.035em; line-height: 1.2;
}
.admin-content .page-heading h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.admin-content .section-heading h2, .admin-content .editor-section h2 { font-size: 1.3rem; }
.stat-panel { border-top: 3px solid #0c8996; padding: 1.3rem; }
.stat-panel strong { color: #183b4b; font-variant-numeric: tabular-nums; }
.stat-panel span, .stat-panel small { font-size: .85rem; }
.filter-bar { padding: 1.15rem; }
.data-table { font-size: .92rem; }
.data-table th, .data-table td { padding: 1rem; border-color: var(--line); }
.data-table thead th, .admin-content .data-table thead th { background: #edf5f8; color: #4e6876; }
.data-table tbody tr:hover { background: #f2f9fb; }
.data-table tbody tr:focus-within { background: #edf7fa; }
.data-table small { font-size: .8rem; color: var(--muted); }
.table-action { min-height: 2.5rem; border-radius: .6rem; background: #e8f4f7; }
.table-action-danger { background: #fff1f2; color: #aa293b; }
.data-table a.table-action-danger { color: #aa293b; }
.login-main { background: #f2f7fa; }
.login-brand-panel h1 { color: #fff; }
.login-brand-panel .eyebrow { color: #d8f4f7; }
.login-card { width: min(100%, 29rem); }
.login-store-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; color: #096775; font-size: .9rem; text-decoration: none; }
.login-store-link:hover { text-decoration: underline; }
.app-toast { border-color: var(--line); box-shadow: 0 12px 36px rgba(20, 58, 76, .16); }
@media (min-width: 993px) {
    .admin-content .data-table-wrap { max-height: none; overflow-x: auto; }
}
@media (max-width: 992px) {
    .admin-sidebar { width: 100%; min-width: 0; }
    .admin-topbar-account { flex-wrap: wrap; }
}
@media (max-width: 700px) {
    .store-header-inner { padding: .8rem .75rem; }
    .store-nav { max-height: calc(100dvh - 7rem); overflow-y: auto; overscroll-behavior: contain; }
    .store-nav-link, .nav-account-toggle { min-height: 2.8rem; }
    .admin-sidebar .admin-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .admin-sidebar .admin-nav .nav-link { width: auto; padding: .65rem .4rem; justify-content: center; flex-direction: column; gap: .15rem; font-size: .78rem; }
    .admin-topbar { flex-direction: row; align-items: center; }
    .admin-topbar-account { width: auto; max-width: 65%; gap: .35rem; }
    .admin-identity { max-width: 100%; font-size: .75rem; }
    .account-tabs form { margin-left: 0; }
    .checkout-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .checkout-step { justify-content: flex-start; padding: .65rem; font-size: .78rem; }
    .checkout-step-label { display: inline; }
    .form-actions > .btn, .form-actions > .button { width: 100%; }
    .customer-panel { padding: 1.2rem; }
    .legal-content { padding: 1.4rem; }
    .data-table th, .data-table td { padding: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .product-card:hover { transform: none; }
}

/* Checkout: preserve the native checked state instead of styling it as a text field. */
.customer-form .form-check { display: flex; align-items: flex-start; gap: .75rem; padding-left: 0; }
.customer-form input.form-check-input[type="checkbox"],
.customer-form input.form-check-input[type="radio"] {
    appearance: auto; -webkit-appearance: auto; flex: 0 0 auto;
    width: 1.25rem; height: 1.25rem; min-height: 0; margin: .3rem 0 0;
    padding: 0; float: none; background-image: none; accent-color: #0a6370; cursor: pointer;
}
.customer-form .form-check-label { cursor: pointer; line-height: 1.65; margin: 0; }
.checkout-consent { margin: 1.25rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--surface-soft); }
.checkout-consent .mb-3 { margin-bottom: 0 !important; }
.order-callout-info { background: #edf6fa; border: 1px solid #cce2eb; color: #315b70; }
.order-callout-info > i { font-size: 1.5rem; color: #0a7380; }
.order-callout-info p { color: #486675; }
.order-payment-error { padding: .85rem 1rem; border-radius: .8rem; background: #fff1f2; color: #a52c39; }
.payment-result { max-width: 44rem; padding-block: 1rem; }
.payment-result-panel { padding: clamp(1.5rem, 5vw, 3rem); text-align: center; }
.payment-result-icon { display: grid; place-items: center; width: 5rem; height: 5rem; margin: 0 auto 1.5rem; border-radius: 50%; background: #e9f3f8; color: #0a7380; font-size: 2.6rem; }
.payment-result-icon.is-confirmed { background: #e7f6ef; color: #197052; }
.payment-result-note { padding: 1rem; border-radius: .85rem; background: var(--surface-soft); color: var(--muted); overflow-wrap: anywhere; }
.payment-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
@media (max-width: 575px) { .payment-result-actions { flex-direction: column; } }

.header-cart { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; border: 1px solid var(--line); border-radius: .9rem; color: #0a6370; background: #f2f8fa; text-decoration: none; }
.header-cart > .bi { font-size: 1.3rem; }
.header-cart:hover { color: #084e5a; background: #e3f1f5; }
.cart-count { position: absolute; top: -.4rem; right: -.4rem; display: grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .25rem; border: 2px solid #fff; border-radius: 999px; background: #0a6370; color: #fff; font-size: .7rem; font-weight: 800; line-height: 1; }
.checkout-page { max-width: 72rem; }
.checkout-heading { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; }
.checkout-heading .customer-panel-intro { margin-bottom: 0; }
.checkout-secure { display: inline-flex; gap: .5rem; align-items: center; color: #4b6877; font-size: .85rem; padding: .6rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.checkout-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(18rem,1fr); align-items: start; gap: 1.5rem; margin-top: 1.8rem; }
.checkout-details { display: grid; gap: 1.25rem; min-width: 0; }
.checkout-section, .checkout-summary { padding: clamp(1.2rem,3vw,1.8rem); }
.checkout-section h2, .checkout-summary h2 { font-size: 1.2rem; font-weight: 800; margin: 0; color: var(--ink); }
.checkout-section-title { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.checkout-edit { padding: .25rem 0; border: 0; background: transparent; color: #096775; font-size: .85rem; font-weight: 800; text-decoration: underline; text-underline-offset: .2em; }
.checkout-items { margin: 0; padding: 0; list-style: none; }
.checkout-items li { display: flex; gap: 1rem; align-items: center; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.checkout-items li > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.checkout-items small { display: block; color: var(--muted); font-size: .8rem; margin-top: .25rem; }
.checkout-item-picture { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; flex: none; border-radius: .8rem; background: #e8f4f7; color: #0a6370; font-size: 1.5rem; }
.checkout-delivery-note { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.checkout-summary { position: sticky; top: 7rem; }
.checkout-summary dl { margin: 1.4rem 0; }
.checkout-summary dl > div { display: flex; justify-content: space-between; gap: 1rem; margin: .75rem 0; }
.checkout-summary dt { font-weight: 500; color: var(--muted); }
.checkout-summary dd { margin: 0; color: var(--ink); font-weight: 700; white-space: nowrap; }
.checkout-summary .checkout-total { border-top: 1px solid var(--line); padding-top: 1.1rem; margin-top: 1.1rem; font-size: 1.35rem; }
.checkout-total dt, .checkout-total dd { color: var(--ink); font-weight: 850; }
.checkout-pay { min-height: 3.2rem; }
.checkout-payment-note, .checkout-terms-note { color: var(--muted); font-size: .82rem; line-height: 1.65; margin: 1rem 0 0; }
.checkout-terms-note { font-size: .75rem; }
.checkout-terms-note a, .checkout-help { color: #096775; text-underline-offset: .15em; }
.checkout-help { display: inline-block; margin-top: 1.2rem; font-size: .82rem; font-weight: 700; }
@media (max-width: 800px) { .checkout-layout { grid-template-columns: 1fr; } .checkout-summary { position: static; } }
@media (max-width: 700px) { .store-header-inner { grid-template-columns: minmax(0,1fr) auto auto; } .header-cart { width: 2.6rem; height: 2.6rem; } .menu-toggle { font-size: .7rem; } }

/* Keep the basket alongside the delivery form on desktop. */
@media (min-width: 992px) {
    .order-information-summary {
        position: sticky;
        top: 7rem;
        max-height: calc(100dvh - 8rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}
/* Shared back/next actions throughout the checkout. */
button.cart-continue-link { border: 0; background: transparent; padding: 0; font: inherit; font-weight: 800; text-decoration: underline; }
.checkout-navigation { margin-top: 1.5rem; }
.checkout-navigation .cart-actions { margin-top: 0; }
@media (max-width: 575.98px) {
    .checkout-navigation .cart-actions > form:first-child { text-align: center; }
}

/* Center collections independently of the account and basket actions. */
.store-header-inner { display: grid; grid-template-columns: minmax(12.5rem, 1fr) minmax(0, 2fr) minmax(12.5rem, 1fr); }
.store-wordmark { justify-self: start; }
.store-nav { justify-content: center; }
.store-header-actions { display: flex; align-items: center; justify-self: end; gap: .65rem; }
.store-header-actions .nav-account-panel { position: absolute; top: 100%; right: 0; left: auto; width: max-content; min-width: 14rem; max-width: calc(100vw - 2rem); }
.catalog-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
@media (max-width: 700px) {
    .store-header-inner { grid-template-columns: minmax(0, 1fr) auto auto; }
    .store-wordmark { grid-column: 1; grid-row: 1; }
    .store-header-actions { grid-column: 2; grid-row: 1; gap: .35rem; }
    .menu-toggle { grid-column: 3; grid-row: 1; }
    .nav-account-toggle > span { display: none; }
    .store-header-actions .nav-account-toggle { justify-content: center; width: 2.6rem; padding-inline: 0; }
}

/* Shared width for profile, orders and billing documents. */
.customer-account-page { width: 100%; max-width: 60rem; }
.account-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }

/* Legal pages: one-line navigation and comfortable reading measure. */
.legal-page { max-width: 72rem; }
.legal-heading { margin-bottom: 1.4rem; }
.legal-heading > p:last-child { color: var(--muted); margin: .5rem 0 0; font-size: 1rem; }
.legal-navigation { overflow-x: auto; margin-bottom: 1.5rem; padding: .35rem .35rem .7rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface-soft); }
.legal-navigation .legal-nav { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: .35rem; width: max-content; min-width: 100%; padding: 0; margin: 0; list-style: none; }
.legal-nav > li { flex: none; }
.legal-nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.8rem; padding: .65rem .8rem; border-radius: .75rem; color: #375666; font-size: .84rem; font-weight: 750; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.legal-nav-link:hover { color: #096775; background: #dcebf0; }
.legal-nav-link.is-active { color: #fff; background: var(--action-gradient); box-shadow: 0 3px 10px rgba(10, 99, 112, .15); }
.legal-nav-link:focus-visible { outline: 3px solid #096775; outline-offset: 2px; }
.legal-page .legal-content { padding: clamp(1.25rem, 4vw, 3rem); font-size: 1rem; line-height: 1.85; overflow-wrap: anywhere; }
.legal-content > h1, .legal-content > h2, .legal-content > p, .legal-content > dl, .legal-content > .legal-help { max-width: 74ch; margin-inline: auto; }
.legal-page .legal-content h1 { max-width: 30ch; margin: 0 auto 1.75rem; text-align: center; text-wrap: balance; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.legal-page .legal-content h2 { margin-top: 2rem; margin-bottom: .65rem; font-family: inherit; font-size: 1.1rem; font-weight: 800; line-height: 1.45; color: var(--ink); }
.legal-content > p { margin-bottom: 1.1rem; }
.legal-page .legal-content a:not(.btn) { color: #096775; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.legal-page .legal-content dl { grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr); gap: 1.1rem 1.75rem; }
.legal-page .legal-content dt { font-size: .9rem; line-height: 1.6; padding-top: .15rem; }
.legal-page .legal-content dd { padding-bottom: 1.1rem; }
.legal-help { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface-soft); line-height: 1.6; }
.legal-help strong { color: var(--ink); }
.legal-help p { margin: .25rem 0 0; font-size: .9rem; color: var(--muted); }
.legal-help .btn { flex: none; white-space: nowrap; }
@media (max-width: 600px) {
    .legal-page .legal-content dl { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
    .legal-page .legal-content dt:not(:first-child) { margin-top: .65rem; }
    .legal-page .legal-content h1 { font-size: 1.85rem; }
}

/* Product lightbox: a calm blue backdrop and a clear image canvas. */
.gallery-modal { z-index: 1080; padding: clamp(.6rem, 3vw, 2rem); background: rgba(9, 31, 49, .78); backdrop-filter: blur(12px); }
.gallery-modal-dialog { display: flex; flex-direction: column; width: min(100%, 70rem); max-height: calc(100dvh - 4rem); padding: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .45); border-radius: 1.5rem; background: #fff; box-shadow: 0 30px 100px rgba(0, 16, 35, .4); animation: gallery-enter .2s ease-out; }
.gallery-modal-toolbar { display: flex; align-items: center; justify-content: space-between; flex: none; gap: 1rem; padding: 1rem 1.4rem; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, #eff8fb, #fff); }
.gallery-modal-toolbar > div:first-child { min-width: 0; }
.gallery-modal-eyebrow { margin: 0 0 .2rem; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #527485; }
.gallery-modal .gallery-modal-caption { margin: 0; color: var(--ink); text-align: left; font-family: "DM Serif Display", Georgia, serif; font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.3; overflow-wrap: anywhere; }
.gallery-modal-tools { display: flex; align-items: center; gap: .8rem; flex: none; }
.gallery-modal .gallery-modal-count { margin: 0; padding: .4rem .7rem; border-radius: 999px; background: #e5f0f5; color: #375b70; font-size: .75rem; font-weight: 800; white-space: nowrap; letter-spacing: .04em; }
.gallery-modal .gallery-modal-close { position: static; width: 2.6rem; height: 2.6rem; flex: none; border: 1px solid var(--line); background: #fff; color: #375b70; font-size: 1rem; }
.gallery-modal-stage { position: relative; display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 0; padding: 1.25rem 4.5rem; background: radial-gradient(ellipse at center, #fff 30%, #f0f5f8 100%); touch-action: pan-y pinch-zoom; }
.gallery-modal .gallery-modal-image { width: 100%; height: min(60dvh, 42rem); min-height: 0; max-height: 100%; object-fit: contain; border-radius: .6rem; user-select: none; -webkit-user-drag: none; }
.gallery-modal .gallery-modal-arrow { width: 2.8rem; height: 2.8rem; top: 50%; transform: translateY(-50%); border-color: #d8e5eb; background: #fff; color: #14566b; box-shadow: 0 4px 15px rgba(20, 58, 76, .1); }
.gallery-modal-arrow-prev { left: 1rem; }
.gallery-modal-arrow-next { right: 1rem; }
.gallery-modal-close:hover, .gallery-modal-arrow:hover { background: #e7f4f8; border-color: #9fbfcf; }
.gallery-modal button:focus-visible { outline: 3px solid #087c98; outline-offset: 3px; }
.gallery-modal-footer { flex: none; padding: .85rem 1.25rem; border-top: 1px solid var(--line); background: #fff; }
.gallery-modal-thumbs { display: flex; gap: .6rem; width: max-content; max-width: 100%; margin-inline: auto; padding: .25rem; overflow-x: auto; }
.gallery-modal-thumb { width: 3.8rem; height: 3.8rem; flex: none; padding: .2rem; border: 2px solid transparent; border-radius: .8rem; background: #edf4f7; opacity: .65; transition: opacity .15s, border-color .15s; }
.gallery-modal-thumb.is-active { opacity: 1; border-color: #087c98; background: #fff; }
.gallery-modal-thumb:hover { opacity: 1; }
.gallery-modal-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: .45rem; }
.gallery-modal-hint { margin: .65rem 0 0; text-align: center; color: #587180; font-size: .75rem; line-height: 1.5; }
@keyframes gallery-enter { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
    .gallery-modal-dialog { max-height: calc(100dvh - 1.2rem); border-radius: 1rem; }
    .gallery-modal-toolbar { padding: .85rem; gap: .5rem; }
    .gallery-modal-eyebrow { font-size: .6rem; letter-spacing: .04em; }
    .gallery-modal-tools { gap: .4rem; }
    .gallery-modal .gallery-modal-count { padding: .3rem .45rem; }
    .gallery-modal-stage { padding: .6rem 2.8rem; }
    .gallery-modal .gallery-modal-image { height: 55dvh; }
    .gallery-modal .gallery-modal-arrow { width: 2.3rem; height: 2.3rem; }
    .gallery-modal-arrow-prev { left: .25rem; }
    .gallery-modal-arrow-next { right: .25rem; }
    .gallery-modal-thumb { width: 3.1rem; height: 3.1rem; }
}
@media (prefers-reduced-motion: reduce) { .gallery-modal-dialog { animation: none; } }

/* Brand story and product care. */
.editorial-page { max-width: 70rem; }
.editorial-hero { display: grid; grid-template-columns: minmax(0, 1fr) 12rem; gap: 2.5rem; align-items: center; padding: clamp(1.5rem, 5vw, 3.5rem); margin: 1.5rem 0 2rem; border-radius: 1.5rem; background: var(--brand-gradient); color: #fff; box-shadow: var(--panel-shadow); }
.editorial-hero .eyebrow { color: #d4f1f6; }
.editorial-hero h1 { max-width: 20ch; font-family: "DM Serif Display", Georgia, serif; font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.12; text-wrap: balance; }
.editorial-hero > div > p:last-child { max-width: 52ch; margin: 1.2rem 0 0; color: #e2f5f7; font-size: 1.05rem; line-height: 1.8; }
.editorial-emblem { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(255,255,255,.08); }
.editorial-emblem .bi { font-size: 3.3rem; }
.editorial-emblem span { font-size: .8rem; }
.editorial-intro { padding: clamp(1.5rem, 4vw, 3rem); }
.editorial-intro > * { max-width: 72ch; margin-inline: auto; }
.editorial-intro h2, .editorial-callout h2, .care-questions > h2 { color: var(--ink); font-family: "DM Serif Display", Georgia, serif; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.25; }
.editorial-intro p:not(.eyebrow) { color: var(--muted); line-height: 1.9; margin-top: 1.1rem; }
.editorial-intro p:last-child { margin-bottom: 0; }
.editorial-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.editorial-card { padding: clamp(1.4rem, 3vw, 2rem); }
.editorial-card h2 { color: var(--ink); font-size: 1.15rem; font-weight: 800; margin: 1rem 0 .7rem; }
.editorial-card p, .editorial-card li { color: var(--muted); line-height: 1.85; font-size: .95rem; }
.editorial-card p:last-child { margin-bottom: 0; }
.editorial-icon, .editorial-step { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 1rem; background: #e5f3f7; color: #096775; font-size: 1.35rem; }
.editorial-step { font-size: 1rem; font-weight: 800; }
.editorial-callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 2rem; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line); border-radius: 1.5rem; background: #eaf4f7; }
.editorial-callout > div:first-child { flex: 1 1 24rem; }
.editorial-callout p { max-width: 60ch; margin: .75rem 0 0; color: var(--muted); }
.editorial-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.editorial-notice { display: flex; align-items: flex-start; gap: 1rem; padding: 1.35rem; margin-bottom: 1.5rem; border: 1px solid #c8e2eb; border-radius: 1rem; background: #eaf5f9; color: var(--ink); }
.editorial-notice > .bi { flex: none; color: #096775; font-size: 1.25rem; }
.editorial-notice p { margin: .4rem 0 0; color: var(--muted); line-height: 1.8; }
.care-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.care-grid ul { margin: 0; padding-left: 1.15rem; }
.care-grid li + li { margin-top: .6rem; }
.care-questions { padding: clamp(1.5rem, 4vw, 2.5rem); margin-top: 1.5rem; }
.care-questions details { padding: 1rem 0; border-top: 1px solid var(--line); }
.care-questions details:first-of-type { margin-top: 1.5rem; }
.care-questions summary { color: var(--ink); font-weight: 750; cursor: pointer; }
.care-questions details p { margin: .8rem 0 0; max-width: 75ch; line-height: 1.85; color: var(--muted); }
@media (max-width: 800px) { .editorial-values { grid-template-columns: 1fr; } .editorial-hero { grid-template-columns: minmax(0, 1fr) 8rem; gap: 1.25rem; } .editorial-emblem .bi { font-size: 2.4rem; } .editorial-emblem span { font-size: .65rem; } }
@media (max-width: 575.98px) { .editorial-hero, .care-grid { grid-template-columns: 1fr; } .editorial-emblem { display: none; } .editorial-actions, .editorial-actions .btn { width: 100%; } }

/* Back-office navigation and supplier purchase lines. */
.admin-nav-group + .admin-nav-group { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.admin-nav-heading { margin: 0 0 .55rem; padding: 0 .8rem; color: #587180; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.admin-nav-group .nav-link { display: flex; align-items: center; gap: .65rem; }
.admin-notification-badge { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; margin-left: auto; padding: 0 .4rem; border-radius: 999px; background: #bc283c; color: #fff; font-size: .72rem; font-weight: 800; }
.admin-notification-badge[hidden] { display: none; }
.purchase-line { padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface-soft); }
.purchase-line-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(5rem, .7fr) minmax(8rem, 1fr) auto; gap: 1rem; align-items: end; }
.purchase-line-fields .form-row { margin-bottom: 0; }
.purchase-line-remove { margin-bottom: .15rem; }
.purchase-line-remove span { display: none; }
.purchase-total { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--ink); }
.purchase-total strong { font-size: 1.4rem; }
.purchase-lines-preview { list-style: none; padding: 0; margin: 0; }
.purchase-lines-preview li + li { margin-top: .65rem; }
@media (max-width: 700px) { .admin-nav-group { flex: 1 1 12rem; } .admin-nav-group + .admin-nav-group { margin-top: 0; padding-top: 0; border-top: 0; } }
@media (max-width: 575.98px) { .purchase-line-fields { grid-template-columns: 1fr 1fr; } .purchase-line-fields > div:first-child { grid-column: 1 / -1; } .purchase-line-remove { grid-column: 1 / -1; justify-self: end; } .purchase-line-remove span { display: inline; margin-left: .4rem; } }

/* High-contrast text on the back-office blue panels. */
.admin-shell, .login-layout { --admin-blue-gradient: linear-gradient(135deg, #084b61 0%, #0b6578 58%, #0b7180 100%); }
.admin-sidebar, .login-layout .login-brand-panel { background: var(--admin-blue-gradient); color: #fff; }
.admin-sidebar .admin-nav-heading, .admin-sidebar .sidebar-caption { color: #fff; }
.admin-sidebar .admin-nav-group + .admin-nav-group { border-color: rgba(255,255,255,.25); }
.admin-sidebar .nav-link, .admin-sidebar .sidebar-store-link { color: #fff; }
.admin-sidebar .nav-link:hover, .admin-sidebar .sidebar-store-link:hover { color: #fff; background: rgba(8,44,65,.16); }
.admin-sidebar .nav-link.is-current, .admin-sidebar .nav-link.is-current:hover, .admin-sidebar .nav-link.is-current:focus-visible { color: #096775; background: #fff; }
.admin-sidebar .brand-wordmark span, .login-layout .login-brand-panel .brand-wordmark span { color: #ffe6c8; }
.login-layout .login-brand-panel h1, .login-layout .login-brand-panel p, .login-layout .login-brand-panel .eyebrow { color: #fff; }
.admin-shell .btn-primary, .admin-shell .button:not(.button-secondary), .login-layout .btn-primary { color: #fff; }

/* Activity dashboards, with a distinct selected section. */
.dashboard-tabs { display: flex; gap: .5rem; padding: .45rem; margin: 0 0 1.8rem; border: 1px solid var(--line); border-radius: 1.1rem; background: #e5eff4; }
.dashboard-tab { display: inline-flex; flex: 1; justify-content: center; align-items: center; gap: .65rem; padding: 1rem; border-radius: .8rem; color: #375666; text-decoration: none; font-weight: 800; }
.dashboard-tab .bi { font-size: 1.2rem; }
.dashboard-tab:hover { color: #096775; background: #f5fafc; }
.dashboard-tab.is-active, .dashboard-tab.is-active:hover { background: var(--action-gradient); color: #fff; box-shadow: 0 4px 12px rgba(10,99,112,.15); }
.dashboard-section-heading { margin-bottom: 1.5rem; }
.dashboard-section-heading .muted-copy { max-width: 65ch; }
.dashboard-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.dashboard-columns > .content-section { min-width: 0; margin-bottom: 0; }
.dashboard-columns .section-heading { gap: .8rem; }
.dashboard-columns .section-heading h2 { font-size: 1.1rem; }
.dashboard-priority { margin-bottom: 1.5rem; }
.dashboard-list { list-style: none; padding: 0; margin: 0; }
.dashboard-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.dashboard-list li > div { min-width: 0; overflow-wrap: anywhere; }
.dashboard-list a:not(.table-action) { color: #096775; font-weight: 750; text-underline-offset: .2em; }
.dashboard-list small { display: block; margin-top: .25rem; color: var(--muted); font-size: .8rem; }
.dashboard-list .status-pill, .dashboard-list .table-action { flex: none; }
.dashboard-empty { padding: 1.5rem 1rem; text-align: center; color: var(--muted); }
.dashboard-empty > .bi { font-size: 1.8rem; color: #096775; }
.dashboard-empty p { margin: .75rem 0; }
.dashboard-client-summary { color: var(--muted); }
.dashboard-client-summary strong { color: var(--ink); }
.dashboard-notice { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem; margin-bottom: 1.5rem; border: 1px solid #e8cd9e; border-radius: 1rem; background: #fff7e8; color: #684b17; }
.dashboard-notice p { margin: .35rem 0 0; }
@media (max-width: 1100px) { .dashboard-columns { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .dashboard-tab { flex-direction: column; gap: .3rem; padding: .8rem .3rem; font-size: .8rem; } .dashboard-tabs { gap: .25rem; } .dashboard-list li { gap: .6rem; } }

/* Keep related back-office actions together, including separate POST forms. */
.admin-content .admin-actions,
.admin-content .form-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: .65rem;
}
.admin-content .admin-actions > form {
    flex: 0 0 auto;
    margin: 0;
}
.admin-content .admin-actions > :is(.btn, .button),
.admin-content .form-actions > :is(.btn, .button) {
    width: auto;
    max-width: 100%;
    margin: 0;
    white-space: normal;
}
.admin-content .admin-actions-compact {
    gap: .5rem;
}
.admin-content .table-action,
.admin-content .admin-delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.5rem;
    padding: .55rem .85rem;
    border: 1px solid transparent;
    border-radius: .65rem;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.admin-content .admin-delete-button {
    border-color: #efc8ce;
    background: #fff4f5;
    color: #a1263a;
}
.admin-content .form-actions > .admin-delete-button {
    min-height: 2.9rem;
    padding: .7rem 1rem;
    font-size: .875rem;
}
.admin-content .admin-delete-button:hover {
    border-color: #d5909b;
    background: #fbe3e7;
    color: #821d2d;
}
.admin-content .admin-delete-button:focus-visible {
    outline: 3px solid #a1263a;
    outline-offset: 3px;
}
.admin-content .admin-delete-button:disabled {
    opacity: .5;
    cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
    .admin-content .admin-delete-button { transition: none; }
}

/* Buying guides and catalogue advice: shared storefront colours and typography. */
.guide-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.guide-card-grid-home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guide-card {
    --guide-accent: #096775; --guide-tint: #e2f3f7;
    display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; min-width: 0;
    padding: clamp(1.4rem, 3vw, 2.1rem); border: 1px solid var(--line);
    border-radius: var(--panel-radius); background: var(--surface); box-shadow: var(--panel-shadow);
    color: var(--ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.guide-card-tone-1 { --guide-accent: #95516c; --guide-tint: #fbedf2; }
.guide-card-tone-2 { --guide-accent: #7d601b; --guide-tint: #fbf1df; }
.guide-card-tone-3 { --guide-accent: #4c681d; --guide-tint: #eef5df; }
.guide-card:hover { color: var(--ink); border-color: #aacdd5; transform: translateY(-3px); box-shadow: 0 14px 36px rgba(20,58,76,.11); }
.guide-card-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 1rem; background: var(--guide-tint); color: var(--guide-accent); font-size: 1.4rem; }
.guide-card .guide-card-title { margin: .2rem 0 0; color: var(--ink); font-family: "DM Serif Display", Georgia, serif; font-weight: 400; font-size: clamp(1.45rem, 2.2vw, 1.85rem); line-height: 1.25; text-wrap: balance; }
.guide-card p { margin: 0 0 .6rem; color: var(--muted); font-size: .95rem; line-height: 1.8; }
.guide-card-action { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); color: #096775; font-size: .88rem; font-weight: 800; }
.guide-card-action .bi { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface-soft); }
.guide-text-link { display: inline-flex; align-items: center; gap: .65rem; color: #096775; font-weight: 800; text-decoration: underline; text-underline-offset: .22em; }
.guide-text-link:hover { color: #084e5a; }
.guide-reading-flow { display: grid; gap: 1.25rem; }
.guide-section { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: start; gap: 1.5rem; padding: clamp(1.4rem, 3.5vw, 2.5rem); }
.guide-section h2, .guide-reference h2, .collection-editorial h2, .product-practical-details h2 { margin: 0 0 1rem; color: var(--ink); font-family: "DM Serif Display", Georgia, serif; font-size: clamp(1.55rem, 2.7vw, 2.1rem); line-height: 1.25; font-weight: 400; text-wrap: balance; }
.guide-section p { max-width: 72ch; margin: 0; color: var(--muted); line-height: 1.9; }
.guide-reference { padding: clamp(1.4rem, 3.5vw, 2.5rem); margin-block: 1.5rem; }
.guide-reference > p:not(.store-eyebrow) { color: var(--muted); line-height: 1.85; }
.guide-reference a:not(.btn), .collection-editorial a:not(.btn), .product-practical-details a:not(.btn) { color: #096775; text-underline-offset: .2em; }
.guide-links { display: grid; gap: .65rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.guide-links a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface-soft); font-weight: 750; text-decoration: none; }
.guide-links a:hover { background: #e2f3f7; }
.guide-related { margin-top: 3rem; }
.collection-editorial, .product-practical-details { padding: clamp(1.5rem, 4vw, 3rem); border-top: 3px solid #0d929f; }
.collection-editorial > p:not(.store-eyebrow), .collection-description-full { max-width: 78ch; color: var(--muted); line-height: 1.9; margin-bottom: 1.25rem; }
.collection-editorial .editorial-actions { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.collection-editorial .creation-characteristics { max-width: 54rem; }
.creation-characteristics { display: grid; grid-template-columns: minmax(7rem, .4fr) minmax(0, 1fr); gap: 0 1.2rem; margin: .75rem 0; font-size: .95rem; }
.creation-characteristics dt, .creation-characteristics dd { margin: 0; padding-block: .85rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.creation-characteristics dt { font-weight: 800; color: var(--ink); }
.creation-characteristics dd { color: var(--muted); line-height: 1.75; }
.creation-source { margin: 1rem 0; font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.creation-size-table { margin-block: 1.5rem; overflow-x: auto; border: 1px solid var(--line); border-radius: 1rem; }
.creation-size-table table { width: 100%; border-collapse: collapse; text-align: left; font-size: .95rem; }
.creation-size-table caption { caption-side: bottom; padding: .8rem 1.1rem; color: var(--muted); font-size: .8rem; background: var(--surface); }
.creation-size-table th, .creation-size-table td { padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.creation-size-table thead { background: var(--action-gradient); color: #fff; }
.creation-size-table tbody th { color: #096775; font-weight: 800; }
.creation-size-table tbody tr:nth-child(even) { background: var(--surface-soft); }
.creation-size-table tbody tr:last-child > * { border-bottom: 0; }
.product-facts-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); margin-top: 1.5rem; }
.product-facts-grid > div:empty { display: none; }
.product-facts-grid > div:empty + div { grid-column: 1 / -1; }
.creation-question { display: flex; align-items: flex-start; gap: 1rem; margin-top: 1.5rem; padding: 1.2rem 1.4rem; border-radius: 1rem; background: var(--surface-soft); color: var(--muted); }
.creation-question > .bi { flex: none; color: #096775; font-size: 1.5rem; }
.creation-question p { margin: 0; line-height: 1.8; }
.product-guide-link { margin: 1.5rem 0 0; }
@media (max-width: 900px) { .guide-card-grid-home { grid-template-columns: 1fr; } .product-facts-grid { grid-template-columns: 1fr; gap: .5rem; } }
@media (max-width: 575.98px) {
    .guide-card-grid { grid-template-columns: 1fr; }
    .guide-section { grid-template-columns: 1fr; gap: 1rem; }
    .creation-characteristics { grid-template-columns: 1fr; }
    .creation-characteristics dt { border-bottom: 0; padding-bottom: .15rem; }
    .creation-characteristics dd { padding-top: 0; }
    .creation-size-table th, .creation-size-table td { padding: .8rem; }
    .creation-question { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .guide-card { transition: none; } .guide-card:hover { transform: none; } }
@media (max-width: 575.98px) { .product-page > .product-detail { margin-inline: 0; } }