/* Shared CoolKeychain visual system for inner storefront pages. */
body.retail-storefront {
  --ck-ui-ink: #202020;
  --ck-ui-muted: #666;
  --ck-ui-line: #e1e1e1;
  --ck-ui-wash: #f5f5f5;
  --ck-ui-accent: #276f77;
  --ck-ui-space: 50px;
  background: #fff;
  color: var(--ck-ui-ink);
  font-family: "Mulish", Arial, sans-serif;
}

/* Common inner-page controls. Checkout has its own focused visual system. */
body.retail-storefront:not(.checkout-route) :is(.search-index, .ck-guide, .ck-contact, .portal, .preview-cart, .retail-shop-page, .ck-account-page, .ck-account-logout, .ck-account-password-page) {
  background: #fff !important;
  color: var(--ck-ui-ink) !important;
  font-family: "Mulish", Arial, sans-serif !important;
}
body.retail-storefront:not(.checkout-route) :is(.search-index, .ck-guide, .ck-contact, .portal, .preview-cart, .retail-shop-page, .ck-account-page) :is(.button, .btn-primary, button[type="submit"], .ck-account-primary-button, .ck-account-secondary-button, .ck-account-ghost-button) {
  border-radius: 8px !important;
  font-family: "Mulish", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.retail-storefront:not(.checkout-route) :is(.search-index, .ck-guide, .ck-contact, .portal, .preview-cart, .ck-account-page) :is(.button.red, .button.dark, .btn-primary, button[type="submit"], .ck-account-primary-button) {
  border-color: #242424 !important;
  background: #242424 !important;
  color: #fff !important;
}
body.retail-storefront:not(.checkout-route) :is(.search-index, .ck-contact, .portal, .ck-account-page) :is(input[type="text"], input[type="email"], input[type="password"], input[type="search"], select, textarea) {
  border: 1px solid var(--ck-ui-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--ck-ui-ink) !important;
  font-family: "Mulish", Arial, sans-serif !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
body.retail-storefront:not(.checkout-route) :is(.search-index, .ck-contact, .portal, .ck-account-page) :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--ck-ui-accent);
  outline-offset: 1px;
}

/* All-products is the same catalog family as the category pages. */
body.retail-storefront .retail-shop-page { width: 100%; max-width: none; margin: 0; padding-bottom: 64px; }
.retail-shop-page :is(.retail-breadcrumb, .retail-catalog-heading, .retail-category-nav) { margin-inline: var(--ck-ui-space); }
.retail-shop-page .retail-breadcrumb { min-height: 57px; padding-top: 16px; font-size: 12px; }
.retail-shop-page .retail-catalog-heading { display: block; padding: 4px 0 12px; }
.retail-shop-page .retail-catalog-heading .retail-eyebrow { display: none; }
.retail-shop-page .retail-catalog-heading h1 { margin: 0; font-size: 25px !important; font-weight: 400 !important; line-height: 1.2; letter-spacing: -.04em; }
.retail-shop-page .retail-catalog-heading > p { margin: 12px 0 0; color: var(--ck-ui-muted); font-size: 13px; }
.retail-shop-page .retail-category-nav { min-height: 36px; margin-bottom: 20px; gap: 10px; border: 0; }
.retail-shop-page .retail-category-nav a { min-height: 30px; padding: 0 13px; border: 1px solid #c7c7c7; border-radius: 18px; font-size: 12px; white-space: nowrap; }
.retail-shop-page .retail-category-nav a.is-active { background: #e9e9e9; }
.retail-shop-page .retail-results-toolbar { min-height: 45px; padding-inline: var(--ck-ui-space); border-block: 1px solid var(--ck-ui-line); }
.retail-shop-page .retail-product-count { color: #888; font-size: 13px; }
.retail-shop-page .retail-catalog-results > .retail-product-grid { padding: 20px var(--ck-ui-space) 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 20px; }
.retail-shop-page .retail-product-card__media { aspect-ratio: 1 / 1.3; background: #f2f2f2; }
.retail-shop-page .retail-product-card__media img { object-fit: cover; }
.retail-shop-page .retail-product-card__copy { padding-top: 8px; }
.retail-shop-page .retail-product-card__copy h2,
.retail-shop-page .retail-product-card__copy .market-card-price { margin: 0; font-size: 13px !important; font-weight: 400 !important; line-height: 1.3; }
.retail-shop-page .retail-product-card__copy .market-card-price strong { font-weight: 400; }
.retail-shop-page .retail-results-summary { padding: 28px var(--ck-ui-space) 0; }

/* Search: white utility area, regular catalog grid. */
.search-index .search-hero { padding: 34px var(--ck-ui-space) 24px; display: block; border-color: var(--ck-ui-line); }
.search-index .search-hero .eyebrow,
.search-index .search-empty .eyebrow { display: none; }
.search-index .search-hero h1,
.search-index .search-empty h2 { margin: 0; font-size: 30px !important; font-weight: 400 !important; line-height: 1.2; letter-spacing: -.035em; }
.search-index .search-hero h1 br,
.search-index .search-empty h2 br { display: none; }
.search-index .search-hero h1 em { color: inherit; font-style: normal; }
.search-index .search-hero > p { max-width: 680px; margin-top: 10px; color: var(--ck-ui-muted); font-size: 14px; line-height: 1.5; }
.search-index .search-workbench { padding: 24px var(--ck-ui-space); border-bottom: 1px solid var(--ck-ui-line); background: #fff; color: var(--ck-ui-ink); }
.search-index .search-form { max-width: none; }
.search-index .search-form > label,
.search-index .search-refine summary { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.search-index .search-query-row input { height: 48px; padding-inline: 13px; font-size: 14px !important; }
.search-index .search-query-row .button { min-width: 112px; height: 48px; min-height: 48px; }
.search-index .search-refine { margin-top: 14px; border-color: var(--ck-ui-line); }
.search-index .search-refine summary { padding: 12px 0; }
.search-index .search-refine select { background: #fff; color: var(--ck-ui-ink); }
.search-index :is(.search-results, .search-suggestions) { padding: 32px var(--ck-ui-space) 70px; }
.search-index .search-results-head { margin-bottom: 20px; }
.search-index .search-results-head h2 { margin: 4px 0 0; font-size: 25px !important; font-weight: 400 !important; line-height: 1.25; }
.search-index .search-grid { padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 20px; }
.search-index .search-grid .product { grid-column: auto !important; min-width: 0; }
.search-index .search-grid .product-image,
.search-index .search-grid .product:nth-child(5n+1) .product-image { aspect-ratio: 1 / 1.3; background: #f2f2f2; }
.search-index .search-grid .product-info { display: block; padding: 8px 0; }
.search-index .search-grid .product h3 { margin: 0 0 3px; font-size: 13px !important; font-weight: 400 !important; line-height: 1.3; }
.search-index .search-grid .product p { color: var(--ck-ui-muted); font-size: 12px; }
.search-index .search-grid .product small { display: block; margin-top: 3px; font-size: 13px; }
.search-index .search-suggestion-grid a { border-color: var(--ck-ui-line); background: #fff; }
.search-index .search-empty { padding: 42px 0; }

/* Help and policy pages: reading-friendly width and retail typography. */
.ck-guide { --guide-max: 1280px; padding: 0 var(--ck-ui-space) 80px; }
.ck-guide__breadcrumb,
.ck-contact__breadcrumb { padding: 22px 0 0; border: 0; color: var(--ck-ui-muted); font-size: 12px; letter-spacing: 0; text-transform: none; }
.ck-guide__hero { padding: 28px 0 32px; display: block; border-color: var(--ck-ui-line); }
.ck-guide__kicker,
.ck-contact__hero .eyebrow { display: none; }
.ck-guide__hero h1,
.ck-contact__hero h1 { max-width: 900px; margin: 0; font-size: 32px !important; font-weight: 400 !important; line-height: 1.2; letter-spacing: -.035em; }
.ck-guide__lede { max-width: 760px; margin-top: 10px; color: var(--ck-ui-muted); font-size: 14px; line-height: 1.6; }
.ck-guide__layout { grid-template-columns: 210px minmax(0, 1fr); gap: 55px; padding-top: 32px; }
.ck-guide__index a { color: var(--ck-ui-muted); font-size: 13px; }
.ck-guide__intro { border-color: var(--ck-ui-line); }
.ck-guide__intro p { font-size: 18px; font-weight: 400; line-height: 1.45; letter-spacing: 0; }
.ck-guide__sections section { min-height: 0; padding: 25px 0; grid-template-columns: 28px minmax(0, 1fr); border-color: var(--ck-ui-line); }
.ck-guide__sections section > span { color: var(--ck-ui-muted); font: 12px/1.4 "Mulish", Arial, sans-serif; }
.ck-guide__sections h2 { margin-bottom: 8px; font-size: 20px !important; font-weight: 500 !important; line-height: 1.3; letter-spacing: 0; }
.ck-guide__sections p { color: var(--ck-ui-muted); font-size: 14px; line-height: 1.65; }
.ck-guide__contact { margin-top: 34px; padding: 24px; background: var(--ck-ui-wash); color: var(--ck-ui-ink); }
.ck-guide__contact p { font-size: 18px; font-weight: 500; }
.ck-guide__contact a { border-color: var(--ck-ui-ink); font-size: 12px; letter-spacing: 0; text-transform: none; }

.ck-contact { max-width: none; padding: 0 var(--ck-ui-space) 80px; }
.ck-contact__hero { padding: 28px 0 32px; display: block; border-color: var(--ck-ui-line); }
.ck-contact__hero h1 br { display: none; }
.ck-contact__hero > p { max-width: 760px; margin-top: 10px; color: var(--ck-ui-muted); font-size: 14px; }
.ck-contact__layout { padding-top: 32px; grid-template-columns: minmax(200px, .55fr) minmax(0, 1.4fr); gap: 50px; }
.ck-contact__notes,
.ck-contact__notes section { border-color: var(--ck-ui-line); }
.ck-contact__notes section > span { color: var(--ck-ui-muted); font: 12px "Mulish", Arial, sans-serif; }
.ck-contact__notes h2 { font-size: 18px !important; font-weight: 500 !important; line-height: 1.3; }
.ck-contact__notes p { color: var(--ck-ui-muted); font-size: 13px; }
.ck-contact__form-panel { padding: 28px; border-color: var(--ck-ui-line); background: #fff; }
.ck-contact__form-head span { font: 500 18px "Mulish", Arial, sans-serif; }
.ck-contact__form { gap: 18px; }
.ck-contact__field label { margin-bottom: 7px; font-size: 12px; letter-spacing: 0; text-transform: none; }
.ck-contact__field input { min-height: 48px; padding: 0 13px; }
.ck-contact__field textarea { min-height: 130px; padding: 12px 13px; }
.ck-contact__form > .button { min-height: 48px; }

/* Cart, success and account pages share a quieter transactional layout. */
body.retail-storefront .preview-cart { width: min(calc(100% - 100px), 1280px); max-width: none; margin-inline: auto; padding: 34px 0 70px; }
.preview-cart .flow-head { margin-bottom: 24px; }
.preview-cart .flow-head .eyebrow,
.portal-head .eyebrow,
.portal-auth .eyebrow,
.ck-account-intro .ck-account-eyebrow { display: none !important; }
.preview-cart .flow-head h1,
.preview-cart .success h1,
.portal-head h1,
.portal-auth h1,
.portal .portal-empty h2,
.ck-account-intro h1,
.ck-account-logout h1,
.ck-account-password-card__header h1 { margin: 0; font-size: 30px !important; font-weight: 400 !important; line-height: 1.2; letter-spacing: -.035em !important; }
.preview-cart .cart-layout { grid-template-columns: minmax(0, 1.8fr) minmax(280px, .8fr); gap: 20px; }
.preview-cart :is(.panel, .success) { border-color: var(--ck-ui-line); background: #fff; }
.preview-cart .cart-item { grid-template-columns: 160px minmax(0, 1fr); gap: 20px; padding: 18px; border-color: var(--ck-ui-line); }
.preview-cart .cart-item img { height: 160px; }
.preview-cart .item-top h2 { font: 500 16px/1.35 "Mulish", Arial, sans-serif; }
.preview-cart .item-meta { color: var(--ck-ui-muted); font-size: 12px; }
.preview-cart .summary h2 { font: 600 19px "Mulish", Arial, sans-serif; }
.preview-cart .summary { border-color: var(--ck-ui-line); }
.preview-cart .quantity { border-color: var(--ck-ui-line); }
.preview-cart .text-link { color: var(--ck-ui-ink); font-size: 13px; }

body.retail-storefront .portal { max-width: 1280px; padding: 34px var(--ck-ui-space) 70px; }
.portal .portal-crumb { margin-bottom: 20px; color: var(--ck-ui-muted); font-size: 12px; letter-spacing: 0; text-transform: none; }
.portal .portal-head { padding-bottom: 24px; border-color: var(--ck-ui-line); }
.portal .portal-head > p { color: var(--ck-ui-muted); font-size: 14px; }
.portal .portal-grid { grid-template-columns: 210px minmax(0, 1fr); gap: 40px; margin-top: 28px; }
.portal .portal-nav { border-color: var(--ck-ui-line); }
.portal .portal-nav a { color: var(--ck-ui-muted); font-size: 13px; border-color: var(--ck-ui-line); }
.portal .portal-nav a.active { color: var(--ck-ui-accent); }
.portal .portal-panel { border-color: var(--ck-ui-line); background: #fff; padding: 30px; }
.portal .portal-panel h2 { font: 500 20px/1.3 "Mulish", Arial, sans-serif; }
.portal .portal-panel h3 { font: 500 17px "Mulish", Arial, sans-serif; }
.portal .portal-row strong { font: 500 16px "Mulish", Arial, sans-serif; }
.portal .portal-kpi { background: #fff; }
.portal .portal-kpi strong { font: 500 28px "Mulish", Arial, sans-serif; }
.portal .portal-field label { font-size: 12px; letter-spacing: 0; text-transform: none; }
.portal .portal-field :is(input, select, textarea) { padding: 12px 13px; }
.portal .success-mark { font: 500 24px "Mulish", Arial, sans-serif; }
.portal .portal-success-note { background: var(--ck-ui-wash); border-color: var(--ck-ui-line); }
.portal .portal-success-note strong,
.portal .portal-order-name,
.portal .portal-order-product-side > strong { font: 500 16px "Mulish", Arial, sans-serif; }

body.retail-storefront .ck-account-page { padding-top: 34px; padding-bottom: 70px; }
body.retail-storefront .ck-account-page .ck-account-shell { width: min(calc(100% - 100px), 1280px); max-width: 1280px; }
.ck-account-page :is(.ck-account-card, .ck-account-manage-card, .ck-account-history-card, .ck-account-wishlist-card, .ck-account-compact-card) { border-color: var(--ck-ui-line); border-radius: 8px !important; box-shadow: none; }
.ck-account-page :is(.ck-account-intro, .ck-account-breadcrumbs) { margin-bottom: 24px; }
.ck-account-page .ck-account-card h2 { font-size: 20px !important; font-weight: 500 !important; line-height: 1.3; }
.ck-account-page .ck-account-field label { font-family: "Mulish", Arial, sans-serif !important; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ck-account-page :is(.ck-account-primary-button, .ck-account-secondary-button, .ck-account-ghost-button, .ck-account-tracking-button, .ck-account-return-submit) { border-radius: 8px !important; font: 650 13px "Mulish", Arial, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; }
.ck-account-page .ck-account-field input { min-height: 48px; height: 48px; border-color: var(--ck-ui-line); border-radius: 8px; font-family: "Mulish", Arial, sans-serif; font-size: 14px; }

@media (max-width: 900px) {
  .retail-shop-page .retail-catalog-results > .retail-product-grid,
  .search-index .search-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ck-guide__layout,
  .ck-contact__layout { grid-template-columns: 1fr; gap: 26px; }
  .ck-guide__index { position: static; }
  .portal .portal-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 700px) {
  body.retail-storefront { --ck-ui-space: 14px; }
  .retail-shop-page .retail-catalog-results > .retail-product-grid,
  .search-index .search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .retail-shop-page .retail-breadcrumb { min-height: 43px; padding-top: 6px; font-size: 11px; }
  .retail-shop-page .retail-catalog-heading h1 { font-size: 23px !important; }
  .retail-shop-page .retail-catalog-heading > p { font-size: 12px; }
  .search-index .search-hero { padding-top: 22px; }
  .search-index .search-hero h1,
  .ck-guide__hero h1,
  .ck-contact__hero h1 { font-size: 26px !important; }
  .search-index .search-query-row { grid-template-columns: minmax(0, 1fr) 94px; }
  .search-index .search-query-row .button { min-width: 0; padding-inline: 10px; }
  .search-index .search-results-head { grid-template-columns: 1fr; gap: 12px; }
  .search-index .search-results-head h2 { font-size: 22px !important; overflow-wrap: anywhere; }
  .search-index .search-refine-grid { grid-template-columns: 1fr; gap: 10px; }
  .ck-guide__sections section { grid-template-columns: 22px minmax(0, 1fr); gap: 12px; }
  .ck-guide__contact { display: grid; gap: 12px; }
  .ck-contact__form-panel { padding: 20px 16px; }
  .ck-contact__form { grid-template-columns: 1fr; }
  .ck-contact__field--full,
  .ck-contact__captcha,
  .ck-contact__form > .button { grid-column: 1; }
  body.retail-storefront .preview-cart { width: calc(100% - 28px); padding: 22px 0 44px; }
  .preview-cart .flow-head h1,
  .preview-cart .success h1,
  .portal-head h1,
  .portal-auth h1,
  .ck-account-intro h1 { font-size: 26px !important; }
  .preview-cart .cart-layout { grid-template-columns: 1fr; }
  .preview-cart .cart-item { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .preview-cart .cart-item img { height: 112px; }
  .preview-cart .item-top h2 { font-size: 14px; }
  body.retail-storefront .portal { padding: 22px 14px 48px; }
  .portal .portal-panel { padding: 22px 16px; }
  body.retail-storefront .ck-account-page .ck-account-shell { width: calc(100% - 28px); }
}