/* Customer storefront only: banner-matched blues, white surfaces and clear contrast. */
.shop,
body:has(#app > .shop) > dialog {
  --cw-accent: #166da2;
  --cw-accent-hover: #105580;
  --cw-accent-dark: #124a70;
  --cw-ink: #193b52;
  --cw-muted: #526c7d;
  --cw-soft: #e7f3fb;
  --cw-canvas: #f5faff;
  --cw-line: #d4e5ef;
  --cw-focus: #1379b5;
  color: var(--cw-ink);
  accent-color: var(--cw-accent);
}

.shop { min-height: 100vh; background: var(--cw-canvas); }
.shop .previewbar { background: #e7f3fb; color: #42677f; border-bottom: 1px solid var(--cw-line); }
.shop :is(h1, h2, h3) { color: var(--cw-ink); }
.shop :is(.muted, .empty, .crumb) { color: var(--cw-muted); }
.shop .eyebrow { color: var(--cw-accent); }
.shop :is(.blue, .table-link, .store-section-head > a) { color: var(--cw-accent); }
.shop :is(.store-content, .cw-home) a:hover { color: var(--cw-accent-hover); }
.shop .price { color: var(--cw-accent-dark); font-weight: 750; }
.shop :is(.card, .shop-card) { border-color: var(--cw-line); border-radius: 14px; background: #fff; }
.shop .shop-card { box-shadow: 0 3px 12px #163e5b05; }
.shop .shop-card:hover { border-color: #8ebad5; box-shadow: 0 12px 30px #163e5b12; }
.shop .shop-card-body { background: #fff; }
.shop .shop-card-body .small { color: var(--cw-muted); }
.shop .store-section-head { padding-bottom: 8px; }
.shop .store-benefits { border-color: var(--cw-line); }
.shop .store-benefits strong { color: var(--cw-accent-dark); }
.shop .store-benefits p { color: var(--cw-muted); }
.shop :is(.about-band, .hero, .order-summary) { background: var(--cw-soft); }
.shop :is(.about-band, .hero) p { color: #486a80; }
.shop :is(.detail-image, .detail-thumbs img) { background: #fff; border: 1px solid var(--cw-line); border-radius: 12px; }
.shop :is(.todo, .cart-line, .mini-table th, .mini-table td) { border-color: var(--cw-line); }
.shop .mini-table th { color: var(--cw-accent-dark); }
.shop .notice { background: #edf6fc; border-color: #c4deee; color: #355b73; }
.shop .tip { background: var(--cw-soft); border-color: var(--cw-accent); color: #355b73; }
.shop .pill { background: #dfedf8; color: var(--cw-accent-dark); }
.shop .status-unpaid { background: #fff3dc; color: #805300; }

.shop :is(input, select, textarea),
body:has(#app > .shop) > dialog :is(input, select, textarea) {
  border-color: #b9d2e3;
  color: var(--cw-ink);
  background-color: #fff;
}
.shop :is(input, textarea)::placeholder,
body:has(#app > .shop) > dialog :is(input, textarea)::placeholder { color: #607a8b; opacity: 1; }
.shop :is(input, select, textarea):focus,
body:has(#app > .shop) > dialog :is(input, select, textarea):focus {
  outline: 2px solid #1379b530;
  border-color: var(--cw-focus);
}
.shop :is(button, a, input, select, textarea):focus-visible,
body:has(#app > .shop) > dialog :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--cw-focus);
  outline-offset: 3px;
}
.shop :is(.orange, .primary),
body:has(#app > .shop) > dialog :is(.orange, .primary) {
  color: #fff;
  background: var(--cw-accent);
  border-color: var(--cw-accent);
  font-weight: 700;
}
.shop :is(.orange, .primary):hover,
body:has(#app > .shop) > dialog :is(.orange, .primary):hover {
  color: #fff;
  background: var(--cw-accent-hover);
  border-color: var(--cw-accent-hover);
}
.shop :is(.store-content, .cw-home) button:not(.orange):not(.primary):not(.active):hover {
  color: var(--cw-accent-hover);
  border-color: #8ebad5;
}
.shop :is(.category-chips, .community-filters) button {
  background: #fff;
  color: #355c76;
  border: 1px solid var(--cw-line);
  font-weight: 600;
}
.shop :is(.category-chips, .community-filters) button.active {
  background: var(--cw-accent);
  border-color: var(--cw-accent);
  color: #fff;
  box-shadow: 0 3px 8px #166da216;
}

/* Keep Blog conspicuous against the pale blue masthead. */
.shop .cw-masthead {
  background: linear-gradient(115deg, #c3e8f9 0%, #a7d9f0 62%, #cbeafa 100%);
  color: #153e5b;
  border-bottom: 1px solid #9dcee7;
}
.shop .cw-header-sections .active:after { background: var(--cw-accent-dark); }
.shop .cw-masthead .cw-blog-link { background: #fff; color: #174e75; box-shadow: 0 5px 20px #104b7020; }
.shop .cw-masthead .cw-blog-link:hover { color: #123f60; background: #eef8ff; box-shadow: 0 7px 22px #104b7038; }
.shop .cw-masthead .cw-blog-link.active { box-shadow: 0 0 0 3px #8cc9eb4d, 0 5px 20px #104b7020; }
.shop .cw-masthead .cw-search-panel { border-color: #fff; box-shadow: 0 10px 32px #104b7014; }
.shop .cw-masthead .cw-search-panel:focus-within { box-shadow: 0 0 0 4px #90cbe966; }
.shop .cw-masthead .cw-search-panel input { outline: none; box-shadow: none; color: var(--cw-ink); border-color: transparent; }
.shop .cw-masthead .cw-browse-categories { color: #42677f; }
.shop .cw-masthead .cw-browse-categories:hover { color: var(--cw-accent); }
.shop .cw-masthead .cw-search-submit { background: var(--cw-accent); color: #fff; }
.shop .cw-masthead .cw-search-submit:hover { background: var(--cw-accent-hover); }
.shop .cw-masthead .cw-locale-panel { color: var(--cw-ink); border-color: var(--cw-line); box-shadow: 0 16px 40px #163e5b29; }
.shop .cw-locale-panel:before { border-color: var(--cw-line); }
.shop .cw-locale-panel h2 { color: var(--cw-ink); }
.shop .cw-locale-panel .cw-currency-note { color: var(--cw-muted); }
.shop .cw-masthead .cw-locale-save,
.cw-header-dialog .cw-locale-save { background: var(--cw-accent); color: #fff; }
.shop .cw-masthead .cw-locale-save:hover,
.cw-header-dialog .cw-locale-save:hover { background: var(--cw-accent-hover); }
.shop .cw-masthead .cw-locale-close { color: var(--cw-ink); }
.shop .cw-masthead :is(a, button):focus-visible { outline-color: #1379b5; }
.shop .cw-masthead :is(.cw-locale-panel, .cw-search-panel) :is(button, select):focus-visible { outline-color: var(--cw-focus); }
.cw-header-dialog { border: 1px solid var(--cw-line); }
.cw-category-menu a { border-color: var(--cw-line); }
.cw-category-menu a:hover { border-color: var(--cw-accent); color: var(--cw-accent-dark); background: var(--cw-soft); }

/* Original product and brand imagery keeps its original colors. */
.shop .cw-home { padding-top: 1px; background: var(--cw-canvas); }
.shop :is(.cw-slider, .cw-wide) { max-width: min(1320px, calc(100% - 48px)); margin: 24px auto; border: 1px solid var(--cw-line); border-radius: 18px; overflow: hidden; }
.shop .cw-story { padding: 0 24px 32px; }
.shop .cw-story img { background: #fff; }
.shop .cw-picks { margin-top: 36px; }
.shop :is(.cw-prev, .cw-next) { color: var(--cw-accent-dark); background: #fffffff0; }
.shop .cw-dots button[aria-pressed=true] { background: var(--cw-accent); }

.shop .community-tabs button { color: var(--cw-muted); }
.shop .community-tabs button.active { background: #ddecf7; color: var(--cw-accent-dark); }
.shop .community-post { border-color: var(--cw-line); color: var(--cw-ink); box-shadow: 0 4px 15px #163e5b05; }
.shop .community-post:hover { border-color: #8ebad5; box-shadow: 0 10px 26px #163e5b12; }
.shop .community-post p, .shop .community-author { color: var(--cw-muted); }
.shop :is(.community-cover, .community-text-cover) { background: var(--cw-soft); }
.shop .community-badge { background: #174e75e8; }
.shop .community-empty-icon { color: var(--cw-accent); }
.shop .module-icon { color: var(--cw-accent); }
body:has(#app > .shop) > dialog { border: 1px solid var(--cw-line); background: #fff; }
body:has(#app > .shop) > dialog::backdrop { background: #102f464d; }
body:has(#app > .shop) > dialog .muted { color: var(--cw-muted); }
body:has(#app > .shop) > dialog .eyebrow { color: var(--cw-accent); }
body:has(#app > .shop) > dialog .notice { background: var(--cw-soft); border-color: #c4deee; color: #355b73; }
body:has(#app > .shop) > dialog .community-upload { background: var(--cw-canvas); border-color: #a2c5dc; }
body:has(#app > .shop) > dialog .english-file-picker { border-color: var(--cw-line); }
body:has(#app > .shop) > dialog .community-text-cover { background: var(--cw-soft); }

.shop .store-footer { background: #133c57; color: #eff8fe; border-top: 1px solid #0e3049; }
.shop .store-footer p { color: #bed3e2; }
.shop .store-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
body:has(#app > .shop) #toast { background: #174e75; color: #fff; }

.shop .detail-grid > * { min-width: 0; }
.shop .product-packaging { margin-top: 24px; padding: 20px; background: var(--cw-soft); border: 1px solid var(--cw-line); border-radius: 12px; }
.shop :is(.product-packaging, .product-video-block) h2 { font-size: 18px; margin: 0 0 12px; }
.shop .product-packaging dl { margin: 0; }
.shop .product-summary { margin-top: 16px; table-layout: fixed; }
.shop .product-summary :is(th, td) { overflow-wrap: anywhere; }
.shop .packaging-spec-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--cw-line); }
.shop .packaging-spec-row dt { color: var(--cw-muted); font-weight: 600; }
.shop .packaging-spec-row dd { margin: 0; text-align: right; font-weight: 700; overflow-wrap: anywhere; }
.shop .packaging-spec-row:last-child { padding-bottom: 0; }
.shop .product-video-block { margin-top: 24px; }
.shop .product-video-block video { display: block; width: 100%; border-radius: 12px; background: #102f46; }

@media (max-width: 760px) {
  .shop .product-packaging { padding: 16px; }
  .shop :is(.cw-slider, .cw-wide) { max-width: calc(100% - 32px); margin: 16px auto; border-radius: 12px; }
  .shop .cw-story { padding: 0 16px 24px; }
  .shop .shop-card { border-radius: 12px; }
}