/* ==========================================================================
   Header + footer restyle. Uses --brand-accent (declared in buy-now-modal.css)
   so it stays in step with the cards, modal and checkout.
   Markup untouched — this only re-skins existing classes.
   ========================================================================== */
:root {
    /* The theme's own token drives ~33 rules (scroll-top, floating contact,
       section titles, badges...). Retargeting it here recolours all of them in
       one place instead of overriding each rule. Set it back to #1E9600 to
       return the site to green. */
    --primary-color: var(--brand-accent, #0B4DA2);

    --hf-accent: var(--brand-accent, #0B4DA2);
    --hf-accent-dark: var(--brand-accent-dark, #093F86);
    --hf-ink: #16203A;
    --hf-line: #E4E9F2;
    --hf-footer: #0C1730;
    --hf-footer-deep: #070E1D;
    --hf-footer-text: #AFBAD1;
}

/* ==========================  HEADER  ====================================== */

/* --- announcement strip --------------------------------------------------- */
.marquee-item-wrap {
    background: linear-gradient(90deg, var(--hf-accent-dark) 0%, var(--hf-accent) 55%, #1663C4 100%);
    height: 36px;
    line-height: 36px;
}
.marquee-txt {
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .02em;
    margin: 0 26px;
}

/* --- logo bar ------------------------------------------------------------- */
.logo-area {
    background: #fff;
    border-bottom: 1px solid var(--hf-line);
    box-shadow: 0 2px 12px -8px rgba(12, 20, 64, .35);
    padding: 0px 0;
}
.main-logo img { height: auto; max-height: 56px; width: auto; }

/* hamburger */
.menu___bar___sec .btn-white {
    color: var(--hf-ink);
    border-radius: 9px;
    transition: background .16s, color .16s;
}
.menu___bar___sec .btn-white:hover { background: #EDF1F8; color: var(--hf-accent); }

/* --- shop menu trigger ---------------------------------------------------- */
.main___shop___btn > ul > li > a {
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--hf-ink);
    transition: color .16s;
}
.main___shop___btn > ul > li:hover > a { color: var(--hf-accent); }
.mega_menu {
    border: 1px solid var(--hf-line);
    border-radius: 12px;
    box-shadow: 0 22px 50px -26px rgba(12, 20, 64, .45);
    overflow: hidden;
}
.mega_menu .cat-title { color: var(--hf-ink); }
.mega_menu ul li a:hover { color: var(--hf-accent); }

/* --- search --------------------------------------------------------------- */
.main-search form { position: relative; }
.main-search input.msearch_keyword {
    height: unset;
    border: 1.5px solid var(--hf-line);
    border-radius: 10px;
    background: #F7F9FC;
    padding: 0 52px 0 16px;
    font-size: 14px;
    width: 100%;
    transition: border-color .16s, box-shadow .16s, background .16s;
}
.main-search input.msearch_keyword:focus {
    outline: none;
    border-color: var(--hf-accent);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(11, 77, 162, .12);
}
.main-search form button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    height: 34px;
    width: 38px;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: var(--hf-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .16s;
}
.main-search form button:hover { background: var(--hf-accent-dark); }
.main-search form button svg { height: 17px; width: 17px; color:#fff }

/* --- account / cart icons ------------------------------------------------- */
.header-list-items ul li i { color: var(--hf-ink); transition: color .16s; }
.header-list-items ul li:hover i { color: var(--hf-accent); }

.margin-shopping { position: relative; display: inline-block; }
.margin-shopping span {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 99px;
    background: var(--hf-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

/* cart peek panel */
.cshort-summary {
    border: 1px solid var(--hf-line);
    border-radius: 12px;
    box-shadow: 0 22px 50px -26px rgba(12, 20, 64, .45);
}
.go_cart {
    background: var(--hf-accent) !important;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: .04em;
}
.go_cart:hover { background: var(--hf-accent-dark) !important; }

/* ==========================  FOOTER  ====================================== */

.footer-top {
    background: linear-gradient(180deg, #101E3C 0%, var(--hf-footer) 100%);
    padding: 46px 0 34px;
}

/* section headings get a small accent rule beneath */
footer li.title__top { list-style: none; margin-bottom: 16px; }
footer li.title__top a {
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    padding-bottom: 9px;
}
footer li.title__top a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: var(--hf-accent);
}
footer li.title__top.text-center a::after { left: 50%; transform: translateX(-50%); }

/* body copy + links */
.footer-about p,
.footer-menu ul li a {
    color: var(--hf-footer-text);
    font-size: 14px;
    line-height: 1.75;
}
/* brand blue is too dark on the navy footer - use a lighter tint */
.footer-about p i { color: #6FA8F5; margin-right: 7px; }
.footer-menu ul li a i,
.footer-menu ul li i { color: #6FA8F5; }
.footer-menu ul { list-style: none; padding: 0; margin: 0; }
.footer-menu ul li a {
    display: inline-block;
    padding: 4px 0;
    transition: color .16s, transform .16s;
}
.footer-menu ul li a:hover { color: #fff; transform: translateX(3px); text-decoration: none; }
.footer-hotlint { color: #fff !important; font-weight: 600; }
.footer-hotlint:hover { color: #7FB2F2 !important; }

/* social */
.social_link { display: flex; gap: 10px; flex-wrap: wrap; padding: 0; margin: 0 0 22px; list-style: none; }
footer li.title__top.text-center + .social_link { justify-content: center; }
.social_link li a {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    transition: background .16s, transform .16s;
}
.social_link li a:hover { background: var(--hf-accent); transform: translateY(-2px); }

/* delivery partner + ssl badges sit on light cards so the logos read */
.delivery-partner,
.ssl_img {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}
.delivery-partner img,
.ssl_img img {
    height: auto;
    max-width: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 8px 12px;
}
.ssl_img { margin-top: 30px; }

/* --- bottom bar ----------------------------------------------------------- */
.footer-bottom {
    background: var(--hf-footer-deep);
    padding: 14px 0;
}
.copyright { border-top: 0; padding-top: 0; }
.copyright p { color: #7E8AA3; font-size: 13px; margin: 0; }

/* --- mobile bottom nav ---------------------------------------------------- */
.footer_nav { background: #fff; border-top: 1px solid var(--hf-line); box-shadow: 0 -4px 18px -10px rgba(12,20,64,.4); }
.footer_nav ul li a { color: var(--hf-ink); }
.footer_nav ul li a:hover,
.footer_nav ul li a.active { color: var(--hf-accent); }

@media (max-width: 767px) {
    .marquee-txt { font-size: 12.5px; }
    .footer-top { padding: 34px 0 24px; text-align: center; }
    .footer-about { padding-right: 0; }
    footer li.title__top a::after { left: 50%; transform: translateX(-50%); }
    .social_link { justify-content: center; }
    .main-search input.msearch_keyword { height: unset; }
}

/* --- floating widgets ----------------------------------------------------- */
/* style.css sets these with !important, so match it */
.scrolltop {
    background: var(--hf-accent) !important;
    box-shadow: 0 10px 24px -10px rgba(11, 77, 162, .8) !important;
}
.scrolltop:hover { background: var(--hf-accent-dark) !important; }
.floating-button { background-color: var(--hf-accent); }
.floating-button:hover { background-color: var(--hf-accent-dark); }
/* WhatsApp keeps its own colour - it reads as the brand people expect */
a.btn.btn_success { background: #25D366; color: #fff; }
a.btn.btn_success:hover { background: #1FB855; color: #fff; }

/* ==========================================================================
   Footer — off-white ground, brand-blue text, black on hover
   ========================================================================== */
.footer-top {
    background: #F7F7F5;                 /* website off-white */
    border-top: 1px solid var(--hf-line);
    color: #0b4da2;
}
footer li.title__top a { color: #0b4da2 !important; }
footer li.title__top a::after { background: #0b4da2; }

.footer-about p,
.footer-about p span,
.footer-menu ul li a,
.footer-menu ul li,
.footer-top .title a { color: #0b4da2; }
.footer-about p i,
.footer-menu ul li a i,
.footer-menu ul li i { color: #0b4da2; }
.footer-hotlint { color: #0b4da2 !important; font-weight: 600; }

/* hover turns black */
.footer-menu ul li a:hover,
.footer-about a:hover,
.footer-hotlint:hover,
footer li.title__top a:hover { color: #000 !important; }

/* social chips on the light ground */
.social_link li a { background: rgba(11, 77, 162, .10); color: #0b4da2; }
.social_link li a:hover { background: #0b4da2; color: #fff; }

/* delivery / payment cards need a border now that the ground is light */
.delivery-partner img,
.ssl_img img { border: 1px solid #E4E9F2; }

.footer-bottom { background: #EFEFEC; border-top: 1px solid #E1E1DC; }
.copyright p { color: #5A6478; }

/* ==========================================================================
   Mobile / off-canvas menu — blue base, brand-blue on hover
   ========================================================================== */
.mobile-menu,
.offcanvas-body .mobile-menu { background: #fff; }

.mobile-menu .first-nav > li > a,
#sidebar .first-nav > li > a,
.first-nav li a.menu-category-name {
    color: #000;                          /* black by default */
    transition: color .16s, background .16s;
}
.mobile-menu .first-nav > li > a:hover,
.first-nav li a.menu-category-name:hover,
.first-nav li a.menu-subcategory-names:hover,
.first-nav li a.menu-childcategory-names:hover {
    color: #0b4da2;                       /* primary on hover */
    background: rgba(11, 77, 162, .06);
}
.first-nav li a.menu-subcategory-names,
.first-nav li a.menu-childcategory-names { color: #333; transition: color .16s, background .16s; }

/* the hamburger itself */
.menu___bar___sec .btn-white i,
.toggle i { color: #0b4da2; }

/* ==========================================================================
   Animated CM wordmark
   ========================================================================== */
/* the artwork sits inside a wider viewBox, so cap the box and give the menu
   room - at 150px the M ran under the SHOP link */
.cm-logo { width: 160px; max-width: 40vw; line-height: 0; margin-right: 18px; }
.main-logo { display: flex; align-items: center; }
.main-logo a { display: inline-flex; align-items: center; }
.cm-logo > svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Plays once on load and then holds solid. Looping it (as in the original
   snippet) makes the header mark fade to nothing for about a second of every
   cycle, so the brand disappears while people are browsing. Swap `forwards`
   for `infinite` on these two rules to get the endless loop back. */
#letter-C,
#letter-M { animation: letter-visibility 4s ease-in-out forwards; }
#letter-M { animation-delay: 0.4s; }

#letter-C path,
#letter-M path {
    stroke-width: 6;
    stroke-linejoin: round;
    stroke-linecap: round;
    fill-opacity: 0;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: letter-draw 4s ease-in-out forwards;
}
#letter-M path { animation-delay: 0.4s; }

#letter-C path { fill: #D22B2B; stroke: #D22B2B; }
#letter-M path { fill: #0b4da2; stroke: #0b4da2; }

/* trace the outline, hold, then let the colour glide in */
@keyframes letter-draw {
    0%   { stroke-dashoffset: 1000; fill-opacity: 0; }
    45%  { stroke-dashoffset: 0;    fill-opacity: 0; }   /* outline finishes */
    60%  { stroke-dashoffset: 0;    fill-opacity: 0; }   /* brief hollow hold */
    100% { stroke-dashoffset: 0;    fill-opacity: 1; }   /* colour settles in */
}

/* hides the instant reset so the loop reads as seamless */
@keyframes letter-visibility {
    0%   { opacity: 0; }
    4%   { opacity: 1; }
    100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    #letter-C, #letter-M,
    #letter-C path, #letter-M path { animation: none !important; }
    #letter-C, #letter-M { opacity: 1; }
    #letter-C path, #letter-M path { fill-opacity: 1; stroke-dashoffset: 0; }
}

@media (max-width: 767px) { .cm-logo { width: 92px; margin-right: 10px; } }

/* --------------------------------------------------------------------------
   Footer legibility on the off-white ground.
   style.css paints these white — one of them with !important — which left the
   links invisible once the footer stopped being dark. Match that weight.
   -------------------------------------------------------------------------- */
.footer-menu ul li a,
.footer-menu.useful_link ul li a,
.footer-about ul li a,
.footer-about a { color: #0b4da2 !important; }

.footer-menu ul li a i,
.footer-menu.useful_link ul li a i,
.footer-about a i { color: #0b4da2 !important; }

.footer-menu ul li a:hover,
.footer-menu.useful_link ul li a:hover,
.footer-about ul li a:hover,
.footer-about a:hover { color: #000 !important; }
.footer-menu ul li a:hover i { color: #000 !important; }

/* "DELIVERY PARTNER" and any other plain footer heading */
.footer-menu .title,
.footer-menu .title a,
footer li.title a { color: #16203A !important; font-weight: 700; }

/* body copy + contact lines */
.footer-about p,
.footer-about p span,
.footer-top p { color: #3B455F; }
.footer-hotlint { color: #0b4da2 !important; }
.footer-hotlint:hover { color: #000 !important; }

/* keep a comfortable rhythm between the link rows */
.footer-menu ul li a { padding: 5px 0; display: inline-block; }

/*Logo*/
.logo-wrap > svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    shape-rendering: geometricPrecision;
    text-rendering: optimizeLegibility;
  }

  /* =====================================================
     BASE LETTER STYLE
     Each path is drawn on-stroke first (like a pen tracing
     the outline), then its fill smoothly fades in as solid
     color. The outer <g> handles a brief fade so the reset
     back to the undrawn state is invisible.
     ===================================================== */

  #letter-C,
  #letter-M {
    animation: letter-visibility 8s ease-in-out infinite;
  }

  #letter-M {
    animation-delay: 0.4s;
  }

  #letter-C path,
  #letter-M path {
    stroke-width: 6;
    stroke-linejoin: round;
    stroke-linecap: round;
    fill-opacity: 0;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: letter-draw 8s ease-in-out infinite;
  }

  #letter-M path {
    animation-delay: 0.4s;
  }

  #letter-C path {
    fill: #D22B2B;
    stroke: #D22B2B;
  }

  #letter-M path {
    fill: #0b4da2;
    stroke: #0b4da2;
  }

  /* Pen-stroke draw, then smooth color fill, then hold */
  @keyframes letter-draw {
    0%   { stroke-dashoffset: 1000; fill-opacity: 0; }
    28%  { stroke-dashoffset: 0;    fill-opacity: 0; }  /* outline finishes writing itself */
    40%  { stroke-dashoffset: 0;    fill-opacity: 0; }  /* brief hold, hollow */
    60%  { stroke-dashoffset: 0;    fill-opacity: 1; }  /* color glides in */
    88%  { stroke-dashoffset: 0;    fill-opacity: 1; }  /* hold, fully solid */
    100% { stroke-dashoffset: 1000; fill-opacity: 0; }  /* reset (hidden, see below) */
  }

  /* Masks the instant reset above so the loop feels seamless */
  @keyframes letter-visibility {
    0%   { opacity: 0; }
    2%   { opacity: 1; }
    88%  { opacity: 1; }
    96%  { opacity: 0; }
    100% { opacity: 0; }
  }

  /* =====================================================
     TAGLINE — set in Rubik Moonrocks, centred on the
     same axis as the CM mark (viewBox midline, x = 184.59)
     ===================================================== */

  #tagline text {
    font-family: "Rubik Moonrocks", "Segoe UI", Helvetica, Arial, sans-serif;
    font-weight: 400; /* the family ships in one weight; 600 would faux-bold it */
    fill: #0b4da2;
    opacity: 0;
    animation: tagline-fade 8s ease-in-out infinite;
  }

  @keyframes tagline-fade {
    0%   { opacity: 0; }
    30%  { opacity: 0; }
    45%  { opacity: 1; }
    88%  { opacity: 1; }
    96%  { opacity: 0; }
    100% { opacity: 0; }
  }

  /* =====================================================
     ACCESSIBILITY
     ===================================================== */

  @media (prefers-reduced-motion: reduce) {
    #letter-C,
    #letter-M,
    #letter-C path,
    #letter-M path,
    #tagline text {
      animation: none !important;
    }

    #letter-C,
    #letter-M {
      opacity: 1;
    }

    #letter-C path,
    #letter-M path {
      fill-opacity: 1;
      stroke-dashoffset: 0;
    }

    #tagline text {
      opacity: 1;
    }
  }