/* Current identity: deep blue ink, pale blue folds, polished surfaces. */
:root {
  --ink: #142955;
  --blue: #102b68;
  --blue-dark: #0a1b46;
  --accent: #99adff;
  --accent-ink: #3d60bd;
  --accent-hover: #b4c6ff;
  --accent-soft: #f0f4ff;
  --muted: #6a768d;
  --line: #e2e8f5;
  --paper: #f7f9fe;
}
body { background: #fff; color: var(--ink); }
.utility { background: linear-gradient(100deg,#0a1d4b,#183a86); }
.utility-inner { min-height: 34px; }
.header { background: #ffffffed; backdrop-filter: blur(18px); box-shadow: 0 4px 24px #142c5b06; }
.header-main { height: 96px; gap: 34px; }
.logo { display: flex; flex: 0 0 236px; width: 236px; }
.logo>.brand-wordmark { display: block; position: static; width: 236px; height: 76px; max-width: 100%; object-fit: contain; mix-blend-mode: normal; }
.search-form { height: 48px; border-radius: 9px; border: 1px solid #e4eaf5; background: linear-gradient(#f7f9fd,#f1f4fb); box-shadow: inset 0 1px 2px #142c5b04; }
.search-form input { font-size: 0.8125rem; }
.search-form:focus-within { border-color: #8ca8ed; box-shadow: 0 0 0 3px #b3c6ff33; }
.header-action, .basket-button { font-weight: 500; }
.basket-button b { background: linear-gradient(#e5ecff,#b3c5ff); color: #1c3977; border: 1px solid #adc1f2; box-shadow: inset 0 1px 0 #fff; }
.nav-border { border-color: #e6ebf5; background: #fff9; }
.nav { min-height: 50px; }
.category-menu>summary { min-height: 50px; }
.nav>a:after { bottom: -16px; background: linear-gradient(90deg,#4d70d4,#9db2ff); }
.category-dropdown { border-color: #e1e8f6; border-radius: 0 0 12px 12px; box-shadow: 0 16px 38px #142c5b16; }
.category-dropdown a:hover { background: #f0f4ff; }

/* Gloss appears on interaction; nothing flashes or animates continuously. */
.btn-primary, .btn-dark, .btn-yellow {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #102b68;
  border: 1px solid #91a9eb;
  border-radius: 8px;
  background: linear-gradient(180deg,#e1e9ff 0%,#becdff 42%,#99aff8 100%);
  box-shadow: inset 0 1px 0 #ffffffed,inset 0 -1px 0 #4e6cad2b,0 5px 13px #4265bc1a;
  min-height: 46px;
  transition: box-shadow .2s,transform .2s,border-color .2s;
}
.btn-primary::before, .btn-dark::before, .btn-yellow::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg,transparent 20%,#fff7 45%,transparent 70%);
  transform: translateX(-120%);
  transition: transform .65s ease;
}
.btn-primary:hover, .btn-dark:hover, .btn-yellow:hover {
  color: #102b68;
  background: linear-gradient(180deg,#edf2ff,#c9d6ff 45%,#a5b9ff);
  border-color: #7e9ae4;
  box-shadow: inset 0 1px 0 #fff,inset 0 -1px 0 #4e6cad2b,0 8px 20px #4265bc26;
  transform: translateY(-1px);
}
.btn-primary:hover::before, .btn-primary:focus-visible::before,
.btn-dark:hover::before, .btn-yellow:hover::before { transform: translateX(120%); }
.btn-primary:active, .btn-dark:active, .btn-yellow:active { transform: translateY(0); box-shadow: inset 0 2px 4px #3955a222,0 2px 6px #4265bc16; }
.btn-outline { border-color: #d9e2f6; border-radius: 8px; background: linear-gradient(#fff,#fafbff); box-shadow: inset 0 1px 0 #fff; }

.store-intro { position: relative; padding-top: 32px; padding-bottom: 28px; }
.intro-eyebrow { display: flex; align-items: center; gap: 9px; color: #64769b; font-size: 0.5625rem; letter-spacing: 1.9px; font-weight: 550; margin-bottom: 12px; }
.intro-eyebrow>span { width: 5px; height: 5px; border-radius: 50%; background: #8ba2f3; box-shadow: 0 0 0 4px #eef2ff; }
.intro-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; margin-bottom: 26px; }
.store-intro .intro-heading-row h1 { margin-bottom: 0; font-size: 3.125rem; font-weight: 650; line-height: 1.04; letter-spacing: -1.9px; }
.store-intro h1 span { background: linear-gradient(100deg,#3558b5,#6d85ce); background-clip: text; -webkit-background-clip: text; color: transparent; }
.intro-description { max-width: 300px; padding-bottom: 4px; color: #69758b; font-size: 0.8125rem; line-height: 1.9; font-weight: 400; }
.hero-product-grid { gap: 22px; }
.hero-feature { position: relative; height: 430px; border: 1px solid #dce5f8; border-top: 1px solid #d2dcf5; border-radius: 16px; padding: 24px; background: radial-gradient(ellipse at 20% 10%,#f0f5ff 0%,#fbfcff 55%,#fff 100%); box-shadow: inset 0 1px 0 #fff,0 8px 30px #2947710b; }
.hero-feature::before { content: ''; position: absolute; top: 0; left: 28px; right: 28px; height: 1px; background: linear-gradient(90deg,transparent,#9bb1f4,transparent); }
.hero-feature-image img { max-height: 300px; mix-blend-mode: multiply; }
.hero-pricing { color: #5a719f; }
.hero-brand { letter-spacing: 1.2px; font-size: 0.625rem; color: #647391; }
.hero-feature-copy h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.35; letter-spacing: -.5px; }
.hero-feature-copy p { color: #69758b; font-size: 0.75rem; line-height: 1.8; }
.hero-feature-copy { gap: 10px; }
.hero-feature-copy .btn { margin-top: 8px; }
.hero-product-grid>.product-card { height: 430px; }
.retail-tag { color: #4b66a0; border: 1px solid #dbe4fa; background: linear-gradient(#fff,#eef3ff); border-radius: 5px; box-shadow: inset 0 1px 0 #fff; font-size: 0.5625rem; font-weight: 500; }
.store-intro>.catalogue-note { margin-top: 19px; color: #6a768d; }

.product-card { border-color: #e1e7f3; border-radius: 13px; box-shadow: 0 3px 14px #18346b06; padding: 16px; transition: transform .2s,box-shadow .2s,border-color .2s; }
.product-card:hover { border-color: #bdccf0; box-shadow: 0 10px 28px #18346b0d; transform: translateY(-2px); }
.product-media { border-radius: 9px; }
.product-image-link { border-radius: 9px; padding: 15px; }
.product-image-link img { transition: transform .3s ease; }
.product-image-link:hover img { transform: scale(1.035); }
.product-brand { color: #647391; font-size: 0.5625rem; letter-spacing: 1px; font-weight: 550; }
.product-card h3 { color: #183367; font-size: 0.9375rem; font-weight: 550; }
.product-spec { color: #657087; font-size: 0.6875rem; line-height: 1.7; }
.price-note { color: #52688e; font-weight: 400; }
.add-button, .catalogue .add-button { min-height: 43px; color: #244276; border: 1px solid #d1ddf6; border-radius: 7px; background: linear-gradient(180deg,#fff 0%,#f0f4ff 55%,#e5ecfc 100%); box-shadow: inset 0 1px 0 #fff,0 2px 5px #29477106; transition: background .2s,box-shadow .2s,border-color .2s; }
.add-button:hover, .catalogue .add-button:hover { color: #244276; border-color: #aabeec; background: linear-gradient(#f7faff,#e4ecff); box-shadow: inset 0 1px 0 #fff,0 4px 10px #2947710e; }
.save-product { border-color: #e0e7f5; box-shadow: 0 2px 6px #29477106; }
.save-product:hover, .save-product[aria-pressed=true] { border-color: #bdccf3; background: #f0f4ff; }
.save-product[aria-pressed=true] .icon { fill: #e3ebff; }
.retail-section { padding-top: 39px; padding-bottom: 39px; }
.retail-section .section-head h2 { font-size: 1.875rem; font-weight: 600; letter-spacing: -.8px; }
.accent-dot { color: #8aa3ef; }
.collection-link { color: #57729e; font-size: 0.75rem; }
.collection-link .icon { color: #7a98d8; }
.collection-link:hover { color: #284eaa; }
.retail-benefits .benefits { border-bottom: 0; }
.retail-benefits .benefit { border-color: #e3e9f6; border-radius: 11px; background: linear-gradient(130deg,#fff,#f5f8ff); box-shadow: inset 0 1px 0 #fff; padding: 20px 16px; }
.retail-benefits .benefit>.icon { color: #6f8bc8; }
.retail-benefits .benefit h3 { font-weight: 550; }
.category-card, .category-card:nth-child(n) { border-color: #e2e8f5; border-radius: 12px; background: linear-gradient(#fff,#fbfcff); box-shadow: 0 3px 12px #18346b04; padding: 19px 16px; transition: border-color .2s,box-shadow .2s; }
.category-card:hover { background: linear-gradient(#fff,#f5f8ff); border-color: #bdccf0; box-shadow: 0 8px 20px #18346b08; }
.category-card img { mix-blend-mode: multiply; }
.category-card h3 { font-weight: 550; }
.category-card p { color: #6a768d; }
.retail-brands .brand-strip a { border-color: #e6ebf7; border-radius: 10px; min-height: 72px; background: linear-gradient(#fff,#fcfdff); }
.retail-brands .brand-strip a:hover { border-color: #bdccf0; }
.supply-banner { border: 1px solid #294b9a; border-radius: 16px; background: radial-gradient(ellipse at 90% 10%,#234da7,#132e75 48%,#0b1b48); padding: 45px; box-shadow: inset 0 1px 0 #90adff35,0 10px 30px #122c6814; }
.supply-copy h2 { font-size: 2.375rem; font-weight: 600; letter-spacing: -1px; }
.supply-copy .accent-text { color: #a9bcff; }
.supply-copy p { color: #c2cfea; }
.supply-visual>div { border: 1px solid #ffffff5c; border-radius: 10px; background: linear-gradient(#fff,#f3f6ff); box-shadow: 0 6px 20px #0002; }
.supply-visual img { mix-blend-mode: multiply; }
.help-card { border-color: #e1e8f7; border-radius: 13px; background: linear-gradient(135deg,#fbfcff,#f2f6ff); box-shadow: inset 0 1px 0 #fff; padding: 32px; }
.help-icon { border-color: #dce5f8; border-radius: 10px; color: #6b87c8; box-shadow: 0 3px 8px #18346b06; }
.help-copy h3 { font-weight: 550; }
.retail-location { border-color: #dce5f7; border-radius: 13px; background: linear-gradient(120deg,#fff,#f8faff); padding: 34px; }
.location-copy h2 { font-weight: 550; }

.page-title { padding-top: 38px; padding-bottom: 22px; background: linear-gradient(110deg,#fff,#f8faff); }
.page-title h1 { font-weight: 600; font-size: 2.5625rem; }
.page-title p { color: #69758b; font-size: 0.8125rem; }
.breadcrumbs { color: #627592; font-size: 0.625rem; }
.catalogue-toolbar { border-color: #e5ebf7; }
.catalogue-toolbar select { border-color: #dce4f5; border-radius: 8px; background: linear-gradient(#fff,#f8faff); }
.active-filter { color: #4968a2; border-radius: 6px; background: #edf3ff; }
.filters { border-color: #e6ebf6; }
.filter-category { color: #5f7395; }
.filter-category.active { color: #244caf; }
.filter-group input { accent-color: #587bd2; }
.detail-image { border-color: #dfe7f7; border-radius: 16px; background: radial-gradient(ellipse at 25% 20%,#f5f8ff,#fff 70%); box-shadow: inset 0 1px 0 #fff,0 8px 25px #18346b06; }
.detail-image img { mix-blend-mode: multiply; }
.detail-copy h1 { font-weight: 550; }
.detail-price { color: #4e6db0; font-weight: 500; }
.detail-specs dl>div { border-color: #e7ecf6; }
.qty-control { border-color: #dce5f6; border-radius: 7px; background: #f9fbff; }
.form-panel { border: 1px solid #e3e9f7; border-radius: 14px; background: linear-gradient(135deg,#fbfcff,#f3f7ff); box-shadow: 0 8px 24px #18346b05; }
.field input, .field select, .field textarea { border-color: #dce5f5; border-radius: 7px; box-shadow: inset 0 1px 2px #18346b03; }
.value-card { border-color: #e0e7f5; border-radius: 13px; box-shadow: 0 4px 16px #18346b05; }
dialog { border: 1px solid #dce5f6; border-radius: 14px; box-shadow: 0 24px 90px #071b4b40; }
dialog::backdrop { background: #0a1e4b80; backdrop-filter: blur(6px); }
.dialog-header { background: linear-gradient(#fff,#f8faff); }
.basket-info, .review-icon { background: #eef3ff; color: #516d9f; }
.search-suggestions { border-color: #dce5f6; border-radius: 9px; box-shadow: 0 14px 36px #142c5b16; }
.search-suggestions a:hover { background: #f0f4ff; }
.search-suggestions .search-all { color: #4d6ec0; }
.toast { background: linear-gradient(#183c84,#10275a); border: 1px solid #6d8ac35c; border-radius: 9px; box-shadow: inset 0 1px 0 #ffffff18,0 8px 30px #0c1e4b24; }

.footer { background: radial-gradient(ellipse at 100% 0%,#173b86,#0c2359 55%,#091b47); }
.footer .logo { width: 230px; }
.footer .brand-wordmark { width: 230px; height: 74px; filter: brightness(0) invert(1); opacity: .96; }
.footer-top { padding-top: 42px; padding-bottom: 31px; }
.footer-top h3 { font-weight: 550; }
.footer-top p { color: #b9c7e3; }
.footer-columns a, .footer-columns button, .footer-columns p, .footer-columns span { color: #bac7e1; }
.footer-columns h4 { font-weight: 550; }
.footer-payments { border-color: #ffffff26; padding-block: 28px; }
.footer-payments h2 { color: #b9c9ea; }
.footer-bottom { color: #a3b4d5; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline-color: #5579d7; }

@media (max-width:1100px) {
  .header-main { gap: 26px; }
  .logo { flex-basis: 210px; width: 210px; }
  .logo>.brand-wordmark { width: 210px; height: 68px; }
  .store-intro .intro-heading-row h1 { font-size: 3rem; }
  .intro-description { max-width: 250px; font-size: 0.75rem; }
  .supply-banner { padding: 36px; }
}
@media (max-width:1000px) {
  .hero-feature { height: 355px; }
  .hero-product-grid>.product-card { height: 420px; }
  .intro-heading-row { gap: 24px; }
  .intro-description { max-width: 230px; }
  .hero-feature-copy h2 { font-size: 1.5rem; }
}
@media (max-width:700px) {
  .header-main { height: auto; min-height: 123px; padding-top: 9px; padding-bottom: 13px; gap: 10px; }
  .logo { flex: 1 1 auto; width: auto; }
  .logo>.brand-wordmark { width: 172px; height: 55px; }
  .header-actions { gap: 14px; }
  .search-form { height: 44px; margin-top: 0; border-radius: 8px; }
  .store-intro { padding-top: 29px; padding-bottom: 22px; }
  .intro-eyebrow { font-size: 0.5rem; letter-spacing: 1.3px; margin-bottom: 15px; }
  .intro-heading-row { display: block; margin-bottom: 23px; }
  .store-intro .intro-heading-row h1 { font-size: 2.375rem; line-height: 1.04; letter-spacing: -1.3px; }
  .intro-description { margin-top: 16px; max-width: none; padding: 0; font-size: 0.6875rem; line-height: 1.8; }
  .intro-description br { display: none; }
  .hero-product-grid { gap: 13px; }
  .hero-feature { min-height: 325px; height: auto; padding: 17px; border-radius: 13px; }
  .hero-feature-copy h2 { font-size: 1.125rem; }
  .hero-feature-copy p { font-size: 0.6875rem; line-height: 1.6; }
  .hero-feature-copy .btn { min-height: 43px; margin-top: 7px; font-size: 0.625rem; padding: 11px 10px; }
  .hero-product-grid>.product-card { height: 385px; }
  .hero-product-grid>.product-card .product-media { max-height: 150px; }
  .product-card { padding: 12px; border-radius: 11px; }
  .product-card:hover { transform: none; }
  .product-card h3 { font-size: 0.8125rem; min-height: 38px; }
  .product-image-link { padding: 8px; }
  .product-spec { font-size: 0.625rem; line-height: 1.6; min-height: 31px; }
  .product-brand { font-size: 0.5rem; }
  .price-note { font-size: 0.625rem; }
  .add-button, .catalogue .add-button { min-height: 43px; font-size: 0.6875rem; }
  .retail-section { padding-top: 29px; padding-bottom: 29px; }
  .retail-section .section-head h2 { font-size: 1.5625rem; line-height: 1.15; }
  .collection-link { font-size: 0.625rem; max-width: 122px; }
  .retail-benefits .benefit { padding: 14px 11px; }
  .category-card, .category-card:nth-child(n) { padding: 16px 13px; border-radius: 10px; }
  .supply-banner { padding: 29px 24px; border-radius: 13px; }
  .supply-copy h2 { font-size: 1.9375rem; }
  .help-card { padding: 23px; border-radius: 11px; }
  .help-copy h3 { font-size: 1.1875rem; }
  .retail-location { padding: 25px; border-radius: 11px; }
  .location-copy h2 { font-size: 1.5625rem; }
  .catalogue-toolbar { flex-wrap: wrap; row-gap: 10px; padding-block: 13px; }
  .catalogue-count { flex: 0 0 100%; font-size: 0.625rem; line-height: 1.6; }
  .catalogue-toolbar>label { margin-left: auto; }
  .mobile-filter { min-height: 38px; padding: 9px 12px; border-color: #dce4f5; border-radius: 7px; background: linear-gradient(#fff,#f8faff); }
  .page-title h1 { font-size: 2.0625rem; }
  .page-title { padding-top: 27px; }
  .detail-copy h1 { font-size: 1.875rem; }
  .footer .logo { width: 205px; }
  .footer .brand-wordmark { width: 205px; height: 66px; }
  .footer-top { padding-top: 30px; }
}
@media (max-width:360px) {
  .logo>.brand-wordmark { width: 155px; height: 50px; }
  .store-intro .intro-heading-row h1 { font-size: 2.125rem; }
  .header-actions { gap: 11px; }
}
@media (prefers-reduced-motion:reduce) {
  .btn-primary::before, .btn-dark::before, .btn-yellow::before { display: none; }
  .product-card:hover, .btn-primary:hover, .btn-dark:hover, .btn-yellow:hover { transform: none; }
}