.products-intro { max-width: 850px; margin: -18px 0 36px; scroll-margin-top: 100px; }
.client-how-it-works { margin: 3rem auto; max-width: 1220px; padding: 2rem; border-radius: 24px; color: #fffdf8; background: #173e31; }
.client-how-it-works h2 { color: inherit; font-family: "Fraunces", serif; }
.client-how-it-works ol { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem; padding: 0; list-style: none; }
.client-how-it-works li { display: flex; gap: 1rem; }
.client-how-it-works li > b { color: #f2c94c; }
.client-how-it-works h3 { margin: 0 0 .4rem; }
.client-how-it-works p { margin: 0; line-height: 1.6; }
.hero-content .client-how-it-works { margin: 2rem 0 0; padding: 1.3rem; min-width: 0; }
.hero-content .client-how-it-works h2 { font-size: 1.45rem; line-height: 1.3; margin-bottom: 1rem; }
.hero-content .client-how-it-works ol { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 0; }
.hero-content .client-how-it-works p { font-size: .95rem; }
.client-home-link { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .6rem; font-size: .85rem; font-weight: 700; }
.delivery-zones ul { display: block; padding-left: 1.3rem; list-style: disc; }
.delivery-zones li { display: list-item; padding: .3rem 0; border: 0; border-radius: 0; background: transparent; }
.delivery-zones li b { margin-left: .5rem; font-weight: 500; }
.security-admin-card { margin-bottom: 1.5rem; min-width: 0; }
.security-admin-card[hidden], #admin-otp-panel[hidden] { display: none !important; }
.security-admin-card h2 { margin-top: 0; font-size: 1.35rem; }
.security-admin-card p, .security-admin-card li { line-height: 1.6; }
.security-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin: .75rem 0; }
.security-admin-card form { display: grid; gap: 1rem; margin-top: 1.2rem; }
.security-admin-card input, .security-admin-card select, .security-admin-card textarea { min-width: 0; font-size: 16px; }
.security-table-wrap { max-width: 100%; overflow-x: auto; margin-top: 1rem; }
.security-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .85rem; }
.security-table th, .security-table td { padding: .6rem; border-bottom: 1px solid #d4e1d8; vertical-align: top; overflow-wrap: anywhere; }
.security-table td:last-child { max-width: 260px; }
.security-backup-list, .security-incident-list { padding: 0; list-style: none; }
.security-backup-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; padding: .8rem 0; border-bottom: 1px solid #d4e1d8; }
.security-incident-list li { padding: 1rem 0; border-top: 1px solid #d4e1d8; overflow-wrap: anywhere; }
#security-recovery-codes { padding: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; font: 16px/1.8 monospace; background: #eef3ec; border-radius: 12px; }
.login-card #admin-otp-panel { margin: .7rem 0; }
.login-card #admin-otp-panel p { font-size: .85rem; }
@media(max-width:980px) { .site-header { grid-template-columns: 1fr auto auto; gap: 12px; } }
@media(max-width:700px) { .client-how-it-works { margin: 2rem 1rem; padding: 1.5rem; } .client-how-it-works ol { grid-template-columns: 1fr; } .client-header-actions { flex-wrap: wrap; justify-content: flex-end; gap: .25rem; } .client-home-link { font-size: .75rem; } .security-table td { min-width: 90px; } .security-admin-card .field-row { grid-template-columns: 1fr; } }
@media(max-width:400px) { .site-header { padding: 0 10px; gap: 6px; } .site-header .logo-name { width: 112px; } .site-header .logo-mark { width: 42px; height: 42px; } .site-header .menu-toggle { padding: 10px; } }
@media(max-width:700px) {
  .client-app .topbar { grid-template-columns: minmax(0,1fr) 44px 72px; grid-template-rows: auto auto; gap: 4px 8px; height: auto; padding: 8px 16px; }
  .client-app .topbar > .brand { grid-column: 1 / 3; grid-row: 1; min-width: 0; }
  .client-app .brand-mark, .client-app .brand-wordmark { flex-shrink: 0; }
  .client-app .client-header-actions { display: contents; }
  .client-app .client-header-actions [data-language-picker] { grid-column: 3; grid-row: 1; }
  .client-app .client-home-link { grid-column: 1; grid-row: 2; justify-self: start; }
  .client-app .customer-tracking-shortcut { grid-column: 2; grid-row: 2; }
  .client-app .client-header-actions .cart-button { grid-column: 3; grid-row: 2; }
  .client-app #products, .client-app #gift-builder-section { scroll-margin-top: 9rem; }
}