/* Ramki Cards — shared header brand and action refresh (21 Oct 2026).
   Scope to the existing public header, never change navigation or auth behavior. */
html body > header > .container.navbar > a.brand > .brand-logo > img {
  /* Respect original or admin-uploaded logo colours. */
  filter: none !important;
  mix-blend-mode: normal !important;
  object-fit: contain !important;
}
html body > header > .container.navbar > a.brand > .ramki-brand-caption strong {
  /* The text is read from company_name in Site Settings. */
  overflow-wrap: anywhere;
}
html body > header > .container.navbar > .store-nav-actions .quote-btn.rc-header-action,
html body:has(.rc-new) > header > .container.navbar > .store-nav-actions .quote-btn.rc-header-action {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 38px !important;
  padding: 9px 13px !important;
  border: 1px solid #68102e !important;
  border-radius: 5px !important;
  background: #68102e !important;
  color: #fff9ee !important;
  box-shadow: none !important;
  font: 600 12px/1.2 'Lato',Arial,sans-serif !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transform: none !important;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
html body > header > .container.navbar > .store-nav-actions .quote-btn.rc-header-action:hover,
html body > header > .container.navbar > .store-nav-actions .quote-btn.rc-header-action:focus-visible,
html body:has(.rc-new) > header > .container.navbar > .store-nav-actions .quote-btn.rc-header-action:hover,
html body:has(.rc-new) > header > .container.navbar > .store-nav-actions .quote-btn.rc-header-action:focus-visible {
  background: #862342 !important;
  border-color: #a87543 !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(100,24,48,.14) !important;
}
html body > header > .container.navbar > .store-nav-actions .quote-btn.rc-header-action:focus-visible,
html body > header > .container.navbar > .store-nav-actions .store-account-trigger:focus-visible,
html body > header > .container.navbar > .store-nav-actions .mobile-menu:focus-visible {
  outline: 2px solid #b38346 !important;
  outline-offset: 2px !important;
}
html body > header .store-nav-actions .rc-header-icon,
html body > header .store-nav-actions .storefront-login-icon .rc-header-icon {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  stroke: #eaca97 !important;
  color: #eaca97 !important;
}
html body > header .store-nav-actions .storefront-login-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: inherit !important;
}
html body > header .store-nav-actions .storefront-login-copy {
  align-items: flex-start !important;
}
html body > header .store-nav-actions .storefront-login-copy small {
  font-size: 9px !important;
  font-weight: 500 !important;
  opacity: .85 !important;
}
html body > header .store-nav-actions .storefront-login-copy strong {
  color: #fff9ee !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}
html body > header .store-nav-actions .store-account-trigger {
  min-height: 38px !important;
  border: 1px solid #68102e !important;
  border-radius: 5px !important;
  background: #68102e !important;
  color: #fff9ee !important;
  padding: 5px 10px !important;
  box-shadow: none !important;
  transition: background-color .2s ease !important;
}
html body > header .store-nav-actions .store-account-trigger:hover,
html body > header .store-nav-actions .store-account-trigger:focus-visible {
  background: #862342 !important;
}
html body > header .store-nav-actions .store-account-avatar {
  background: #e9c68b !important;
  color: #60112d !important;
}
html body > header .rc-header-chevron,
html body > header .rc-header-menu-icon {
  display: inline-block;
  vertical-align: middle;
  flex: none;
}
html body > header .store-nav-actions .mobile-menu {
  align-items: center !important;
  justify-content: center !important;
}
@media (max-width: 991.98px) {
  html body > header .store-nav-actions .storefront-login-icon {
    display: inline-flex !important;
  }
  html body > header > .container.navbar > .store-nav-actions .quote-btn.rc-header-action {
    padding: 8px 10px !important;
    min-height: 38px !important;
  }
}
@media (max-width: 575.98px) {
  html body > header > .container.navbar > .store-nav-actions .storefront-login-button.rc-header-action {
    min-width: auto !important;
    padding: 7px 9px !important;
    gap: 5px !important;
  }
  html body > header .store-nav-actions .storefront-login-copy small {
    display: none !important;
  }
  html body > header .store-nav-actions .storefront-login-copy strong {
    font-size: 11px !important;
  }
  html body > header .store-nav-actions .rc-header-icon,
  html body > header .store-nav-actions .storefront-login-icon .rc-header-icon {
    width: 15px !important;
    height: 15px !important;
    flex-basis: 15px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body > header .store-nav-actions .rc-header-action,
  html body > header .store-nav-actions .store-account-trigger {
    transition: none !important;
  }
}
/* Preserve the existing compact header on tablets and phones. The cart and
   logout links still work via their existing pages/menus; don't crowd the logo. */
@media (max-width: 850px) {
  html body > header > .container.navbar > .store-nav-actions .quote-btn.rc-header-cart,
  html body > header > .container.navbar > .store-nav-actions .quote-btn.storefront-logout-button {
    display: none !important;
  }
}

@media (max-width: 575.98px) {
  /* Icon-only administrator shortcut prevents overlap with the brand. */
  html body > header > .container.navbar > .store-nav-actions .storefront-admin-button.rc-header-action {
    width: 39px !important;
    min-width: 39px !important;
    padding: 9px !important;
    font-size: 0 !important;
    gap: 0 !important;
  }
  html body > header .store-nav-actions .storefront-admin-button .rc-header-icon {
    width: 17px !important;
    height: 17px !important;
  }
}
@media (max-width: 375px) {
  html body > header .navbar > .brand .ramki-brand-caption small {
    display: none !important;
  }
}

/* Navigation link icons keep the existing category flyouts and destinations. */
html body > header #storeNavigation > ul > li > a.rc-header-nav-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
html body > header #storeNavigation .rc-header-nav-icon {
  display: inline-block !important;
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  stroke: currentColor !important;
  color: inherit !important;
}
@media (max-width: 680px) {
  html body > header #storeNavigation > ul > li > a.rc-header-nav-link {
    min-height: 32px !important;
  }
}


/* Exact heading-family from the reference: Josefin Sans.
   Storefront header text only; do not change layout, icon glyphs, colours,
   spacing, sizes, cart/login actions, or the rest of the website. */
html body > header > .container.navbar {
  --font-heading-family: 'Josefin Sans', sans-serif;
  font-family: var(--font-heading-family) !important;
}
/* Old theme forces Georgia for the name and Poppins for the caption. */
html body > header > .container.navbar > a.brand > .ramki-brand-caption strong,
html body > header > .container.navbar > a.brand > .ramki-brand-caption small {
  font-family: 'Josefin Sans', sans-serif !important;
}
/* Desktop/mobile navigation and every nested menu item. */
html body > header > .container.navbar #storeNavigation a,
html body > header > .container.navbar #storeNavigation button {
  font-family: 'Josefin Sans', sans-serif !important;
}
/* Cart, Admin Panel, Login, Logout, Account and their text labels. */
html body > header > .container.navbar > .store-nav-actions :is(a, button, span, small, strong) {
  font-family: 'Josefin Sans', sans-serif !important;
}
/* Announcement ticker belongs to the public header presentation too. */
html body > .top-strip .top-strip-content span {
  font-family: 'Josefin Sans', sans-serif !important;
}

/* Header navigation typography refinement, 21 Oct 2026.
   The font family was already Josefin Sans, but older storefront rules still
   forced 700 weight and tight 1px tracking. Match the reference's light,
   widely-spaced uppercase navigation without altering layout or behaviour. */
html body > header > .container.navbar {
  --font-heading-family: 'Josefin Sans', sans-serif;
  --font-navigation-family: 'Josefin Sans', sans-serif;
}
html body > header > .container.navbar > nav#storeNavigation > ul > li > a.rc-header-nav-link {
  font-family: var(--font-navigation-family) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  letter-spacing: 0.19em !important;
  text-transform: uppercase !important;
}
/* Match typography for the brand label and account actions, but preserve
   their existing dimensions, colours, icon sizes, and button geometry. */
html body > header > .container.navbar > a.brand > .ramki-brand-caption > strong {
  font-family: var(--font-heading-family) !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
}
html body > header > .container.navbar > a.brand > .ramki-brand-caption > small {
  font-family: var(--font-heading-family) !important;
  font-weight: 400 !important;
  letter-spacing: .025em !important;
}
html body > header > .container.navbar > .store-nav-actions :is(
  a.rc-header-action,
  a.rc-header-action strong,
  a.rc-header-action small,
  button.store-account-trigger,
  button.store-account-trigger strong,
  button.store-account-trigger small
) {
  font-family: var(--font-navigation-family) !important;
  font-weight: 500 !important;
  letter-spacing: .025em !important;
}
/* Dropdown remains compact and sentence case; only the typeface is shared. */
html body > header > .container.navbar > nav#storeNavigation .rk-nav-submenu a {
  font-family: var(--font-navigation-family) !important;
  font-weight: 400 !important;
}
@media (min-width: 851px) and (max-width: 1100px) {
  html body > header > .container.navbar > nav#storeNavigation > ul > li > a.rc-header-nav-link {
    font-size: 13px !important;
    letter-spacing: .13em !important;
  }
}
/* Navigation is a vertical menu on mobile. Avoid excessive tracking there. */
@media (max-width: 850px) {
  html body > header > .container.navbar > nav#storeNavigation > ul > li > a.rc-header-nav-link {
    font-size: 13px !important;
    letter-spacing: .09em !important;
  }
}

/* Top-level header navigation: match the reference's light Josefin type.
   Scoped to visible labels only; SVG icons, flyouts, and layout untouched. */
@media (min-width: 851px) {
  html body > header > .container.navbar nav#storeNavigation > ul > li > a.rc-header-nav-link,
  html body > header > .container.navbar nav#storeNavigation > ul > li > a.rc-header-nav-link:visited {
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    letter-spacing: .18em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    -webkit-text-stroke: 0 transparent !important;
    font-synthesis: none !important;
  }
}

/* 2026-10-21: Reference-matched dropdown typography only.
   Keep navigation structure, hover positioning, submenu widths and all icons unchanged. */
html body > header > .container.navbar nav#storeNavigation ul.rk-nav-submenu li > a,
html body > header > .container.navbar nav#storeNavigation ul.rk-nav-flyout li > a {
  font-family: 'Josefin Sans', sans-serif !important;
  font-style: normal !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: .015em !important;
  text-transform: none !important;
  -webkit-text-stroke: 0 transparent !important;
  font-synthesis: none !important;
}
/* Keep the chevron visually separate from the lettering. */
html body > header > .container.navbar nav#storeNavigation .rk-nav-flyout-chevron {
  font-family: Arial, sans-serif !important;
  letter-spacing: 0 !important;
}


/* Ramki Cards logo original golden-yellow color | 22 Oct 2026 | v22
   The actual PNG is transparent golden yellow (#fff383). Show it unfiltered,
   matching the footer. Preserve the logo asset, admin settings and layout.
*/
html body > header > .container.navbar > a.brand > .brand-logo {
  width: clamp(108px, 10.85vw, 148px) !important;
  height: 58px !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body > header > .container.navbar > a.brand > .brand-logo > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  /* Retain original source image pixels, including its golden-yellow color. */
  filter: none !important;
}
@media (max-width: 850px) {
  html body > header > .container.navbar > a.brand > .brand-logo {
    width: 98px !important;
    height: 44px !important;
  }
}
@media (max-width: 480px) {
  html body > header > .container.navbar > a.brand > .brand-logo {
    width: 80px !important;
    height: 38px !important;
  }
}


/* v23: Premium brand contrast; preserves the original gold pixels (#FFF383).
   Gold on white was only ~1.14:1 contrast. The dark wine plate is ~14.34:1.
   Do not re-color the image; this is an accessible contrast treatment. */
html body > header > .container.navbar > a.brand > .brand-logo {
  box-sizing: border-box !important;
  width: clamp(124px, 11.7vw, 160px) !important;
  height: 64px !important;
  padding: 8px 11px !important;
  background: #3f0c1e !important;
  border: 1px solid #3f0c1e !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 5px rgba(26, 4, 12, .10) !important;
  filter: none !important;
  isolation: isolate !important;
}
html body > header > .container.navbar > a.brand > .brand-logo > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
@media (max-width: 850px) {
  html body > header > .container.navbar > a.brand > .brand-logo {
    width: 122px !important;
    height: 52px !important;
    padding: 7px 9px !important;
  }
}
@media (max-width: 480px) {
  html body > header > .container.navbar > a.brand > .brand-logo {
    width: 105px !important;
    height: 46px !important;
    padding: 6px 7px !important;
  }
}


/* Ramki Cards v32: slightly taller public desktop header only.
   Existing storefront uses two grid rows (logo/actions + navigation).
   Increase row heights instead of changing logo sizing, button height,
   navigation font/layout, or the announcement ticker. */
@media (min-width: 1024px) {
  html body > header > .container.navbar,
  html body:has(main.rc-new#main-content) > header > .container.navbar {
    min-height: 142px !important; /* previously 128px */
    grid-template-rows: 86px 56px !important; /* 76px + 52px -> 86px + 56px */
    height: auto !important;
  }
}
/* Compact tablet: increase height only slightly, keep all actions usable. */
@media (min-width: 851px) and (max-width: 1023.98px) {
  html body > header > .container.navbar,
  html body:has(main.rc-new#main-content) > header > .container.navbar {
    min-height: 136px !important;
    grid-template-rows: 82px 54px !important;
    height: auto !important;
  }
}
/* <= 850px: keep original responsive/mobile header sizing and menu behavior. */


/* Promotion / announcement ticker typography — King of Cards reference, v33.
   Scope ONLY to the moving announcement labels. Does not change the
   ticker animation, its height, icons, navigation or the hero banner. */
html body > .top-strip > .top-strip-track > .top-strip-content > span {
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: 0.6px !important;
    text-transform: none !important;
    white-space: nowrap !important;
}