/* Storefront header (Builder component `storefront-header`).
 *
 * Loaded into <head> via `context.styles` (os_ecom_templates/builder_patch.py) so the
 * mega-menu panels are hidden before first paint. Previously this lived in an inline
 * <style> at the bottom of the header component, which let .lx-mpanel render open and
 * in-flow until ~23KB of markup later.
 */
.lx-mega{display:flex;align-items:center;gap:4px}.lx-mtop{font-family:'Plus Jakarta Sans';font-weight:600;font-size:.9rem;color:var(--dad2fa68-d3a5-5de6-8333-5cfde030c0ef, #13241C);padding:9px 13px;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;border-radius:9px;transition:background .15s,color .15s}.lx-mnew{color:var(--f12ee16b-d878-5ddf-a5f2-a0492351761e, #C98F1F)}.lx-mtop:hover{color:var(--d4213383-85ba-5620-9b8c-1737f68c8fea, #0E5C3F);background:var(--50a6f1fd-4b93-534f-9b73-14ac93d4c7fb, #F1F6F2)}.lx-mitem{position:static;display:inline-flex}.lx-mitem:hover>.lx-mtop{color:var(--d4213383-85ba-5620-9b8c-1737f68c8fea, #0E5C3F);background:var(--50a6f1fd-4b93-534f-9b73-14ac93d4c7fb, #F1F6F2)}.lx-mpanel{position:absolute;left:0;right:0;top:70%;padding-top:12px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:55}.lx-mitem:hover .lx-mpanel{opacity:1;visibility:visible;transform:none}.lx-mcols{background:var(--7e49d4b2-cdd1-54b6-ab12-eb864462ef01, #FFFFFF);border:1px solid var(--c1028850-3130-5a00-b1a9-e4baca5ee6ae, #E5E7E1);border-radius:18px;box-shadow:0 26px 54px rgba(19,36,28,.17);display:flex;gap:46px;padding:30px 34px 34px;align-items:flex-start}.lx-mcol{min-width:150px}.lx-mcol h5{font-family:'Plus Jakarta Sans';font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--f12ee16b-d878-5ddf-a5f2-a0492351761e, #C98F1F);margin:0 0 12px;padding:0 12px;font-weight:700}.lx-mcol a{display:block;color:var(--bd7526f4-5efe-5095-a130-8b3b32e95b2c, #4B5A52);text-decoration:none;font-size:.9rem;padding:7px 12px;border-radius:9px;transition:color .12s,background .12s}.lx-mcol a:hover{color:var(--d4213383-85ba-5620-9b8c-1737f68c8fea, #0E5C3F);background:var(--50a6f1fd-4b93-534f-9b73-14ac93d4c7fb, #F1F6F2)}.lx-mpromo{margin-left:auto;width:310px;flex-shrink:0;position:relative;border-radius:14px;overflow:hidden;min-height:196px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;background-size:cover;background-position:center;text-decoration:none}.lx-mpromo-t{font-family:'Plus Jakarta Sans';font-weight:800;color:var(--7e49d4b2-cdd1-54b6-ab12-eb864462ef01, #FFFFFF);font-size:1.08rem}.lx-mpromo-s{color:rgba(255,255,255,.9);font-size:.84rem;margin-top:3px}.lx-navrow .lx-mega{gap:6px}.lx-toprow{position:relative}.lx-topnav{flex-shrink:0}.lx-toprow .lx-mega{gap:1px}.lx-toprow .lx-mtop{padding:9px 9px;font-size:.86rem}.lx-brand{flex:1 1 0}.lx-actions{flex:1 1 0;display:flex;align-items:center;justify-content:flex-end;gap:6px}.lx-topnav{transition:opacity .22s ease,transform .22s ease}.lx-headsearch{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.97);width:min(880px,76%);opacity:0;visibility:hidden;pointer-events:none;z-index:5;transition:opacity .24s ease,transform .24s ease,visibility .24s ease}.lx-headsearch>*{flex:1 1 auto;min-width:0;width:100%}.lx-toprow.lx-searchopen .lx-headsearch{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}.lx-toprow.lx-searchopen .lx-topnav{opacity:0;visibility:hidden;pointer-events:none;transform:scale(.97)}.lx-searchtoggle .lx-ico-close{display:none}.lx-toprow.lx-searchopen .lx-ico-search{display:none!important}.lx-toprow.lx-searchopen .lx-ico-close{display:inline-flex}.lx-singles{display:flex;align-items:center;gap:2px;flex-wrap:wrap}.lx-single{font-family:'Plus Jakarta Sans';font-weight:600;font-size:.875rem;color:var(--dad2fa68-d3a5-5de6-8333-5cfde030c0ef, #13241C);padding:8px 12px;white-space:nowrap;text-decoration:none;border-radius:9px;transition:background .15s,color .15s}.lx-single:hover{color:var(--d4213383-85ba-5620-9b8c-1737f68c8fea, #0E5C3F);background:var(--50a6f1fd-4b93-534f-9b73-14ac93d4c7fb, #F1F6F2)}.lx-navhelp{white-space:nowrap}.lx-burger{display:none}.lx-mobmenu{position:fixed;inset:0;background:rgba(19,36,28,.45);z-index:200;display:none}.lx-mobmenu.open{display:block}.lx-mobmenu-panel{position:absolute;top:0;right:0;width:min(360px,88vw);height:100%;background:var(--7e49d4b2-cdd1-54b6-ab12-eb864462ef01, #FFFFFF);box-shadow:-12px 0 44px rgba(19,36,28,.22);overflow-y:auto;padding:20px 22px 40px}@media(max-width:1180px){.lx-navrow{display:none}.lx-topnav{display:none}.lx-burger{display:inline-flex}}@media(max-width:768px){.lx-searchbox{display:none}.lx-desk{display:none}.lx-brandtag{display:none}}

/* Desktop: when the search opens, give it the row. .lx-toprow is already a flex
 * row of brand / topnav / headsearch / actions, so the field only has to stop
 * being absolutely positioned and become a flex item to land between the logo
 * and the icons. The nav is display:none rather than hidden so it gives its
 * space back. These come after the resting rules above, so equal specificity
 * resolves in their favour on order. */
@media(min-width:1181px){
.lx-toprow.lx-searchopen .lx-topnav{display:none}
.lx-toprow.lx-searchopen .lx-headsearch{position:static;transform:none;width:auto;flex:1 1 auto;min-width:0;margin:0 20px;opacity:1;visibility:visible;pointer-events:auto}
}

/* Data-driven navigation (see storefront/injectors/navigation.py).
 *
 * A top-level item configured with a mega menu but no link target of its own
 * renders as a <button> so it is still focusable; these rules make it look
 * identical to the <a> variant. Keyboard users get the panel via :focus-within,
 * which is the same state change :hover already triggers. */
.lx-mtop-btn{background:none;border:none;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}
/* Links attached straight to a mega menu render in a column with no <h5>. The
 * padding stands in for that missing heading so their first link lines up with
 * the grouped columns'; it is only applied when grouped columns sit beside it. */
.lx-mcol-plain{padding-top:calc(.7rem * 1.2 + 12px)}
.lx-mitem:focus-within>.lx-mtop{color:var(--d4213383-85ba-5620-9b8c-1737f68c8fea, #0E5C3F);background:var(--50a6f1fd-4b93-534f-9b73-14ac93d4c7fb, #F1F6F2)}
.lx-mitem:focus-within .lx-mpanel{opacity:1;visibility:visible;transform:none}

/* Desktop mega panels are click-controlled. These declarations intentionally
   override the legacy hover/focus-within rules above for existing headers. */
.lx-mitem:hover .lx-mpanel,.lx-mitem:focus-within .lx-mpanel{
  opacity:0;visibility:hidden;transform:translateY(6px)}
.lx-mitem.is-open .lx-mpanel{opacity:1;visibility:visible;transform:none}
.lx-mitem.is-open>.lx-mtop{
  color:var(--d4213383-85ba-5620-9b8c-1737f68c8fea, #0E5C3F);
  background:var(--50a6f1fd-4b93-534f-9b73-14ac93d4c7fb, #F1F6F2)}

/* Mobile drawer: the same navigation tree as a tap-to-expand accordion.
 * <details>/<summary>, so open/close state needs no JavaScript. Matches the
 * inline styling of the drawer's static links above and below it. */
.lx-moblink{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 4px;border-bottom:1px solid var(--c1028850-3130-5a00-b1a9-e4baca5ee6ae, #E5E7E1);color:var(--dad2fa68-d3a5-5de6-8333-5cfde030c0ef, #13241C);text-decoration:none;font-family:'Plus Jakarta Sans';font-weight:600;font-size:1rem;cursor:pointer;list-style:none}
.lx-moblink::-webkit-details-marker{display:none}
.lx-mobgroup[open]>.lx-moblink{color:var(--d4213383-85ba-5620-9b8c-1737f68c8fea, #0E5C3F)}
.lx-mobchev{flex-shrink:0;opacity:.5;transition:transform .18s ease}
.lx-mobgroup[open] .lx-mobchev{transform:rotate(180deg)}
.lx-mobsub{padding:4px 4px 12px 12px;border-bottom:1px solid var(--c1028850-3130-5a00-b1a9-e4baca5ee6ae, #E5E7E1)}
.lx-mobsub h6{font-family:'Plus Jakarta Sans';font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--f12ee16b-d878-5ddf-a5f2-a0492351761e, #C98F1F);margin:12px 0 4px;font-weight:700}
.lx-mobsub a{display:block;padding:9px 0;color:var(--bd7526f4-5efe-5095-a130-8b3b32e95b2c, #4B5A52);text-decoration:none;font-size:.92rem}
.lx-mobsub a:hover{color:var(--d4213383-85ba-5620-9b8c-1737f68c8fea, #0E5C3F)}

/* Account actions sit before the drawer navigation so signing in and out never
 * requires searching through the menu. The stacked controls retain comfortable
 * touch targets on the narrowest supported drawer width. */
.lx-mobaccount{margin:0 0 16px;padding:14px;background:var(--50a6f1fd-4b93-534f-9b73-14ac93d4c7fb, #F1F6F2);border:1px solid var(--c1028850-3130-5a00-b1a9-e4baca5ee6ae, #E5E7E1);border-radius:14px}
.lx-mobaccount__intro{display:flex;align-items:center;gap:11px}
.lx-mobaccount__icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:var(--2d5e6541-ad56-5d2f-8b0c-b9243b0ff4d5, #E0A32E);color:var(--dad2fa68-d3a5-5de6-8333-5cfde030c0ef, #13241C)}
.lx-mobaccount__icon svg{width:21px;height:21px}
.lx-mobaccount__title{margin:0;color:var(--dad2fa68-d3a5-5de6-8333-5cfde030c0ef, #13241C);font-family:'Plus Jakarta Sans';font-size:.95rem;font-weight:800;line-height:1.3}
.lx-mobaccount__copy{margin:2px 0 0;color:var(--bd7526f4-5efe-5095-a130-8b3b32e95b2c, #4B5A52);font-size:.78rem;line-height:1.4}
.lx-mobaccount__actions{display:grid;gap:8px;margin-top:12px}
.lx-mobaccount__btn{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;width:100%;padding:10px 14px;border:1.5px solid var(--d4213383-85ba-5620-9b8c-1737f68c8fea, #0E5C3F);border-radius:10px;font-family:'Plus Jakarta Sans';font-size:.9rem;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s,opacity .15s}
.lx-mobaccount__btn--primary{background:var(--d4213383-85ba-5620-9b8c-1737f68c8fea, #0E5C3F);color:var(--7e49d4b2-cdd1-54b6-ab12-eb864462ef01, #FFFFFF)}
.lx-mobaccount__btn--primary:hover{background:var(--dad2fa68-d3a5-5de6-8333-5cfde030c0ef, #13241C);border-color:var(--dad2fa68-d3a5-5de6-8333-5cfde030c0ef, #13241C);color:var(--7e49d4b2-cdd1-54b6-ab12-eb864462ef01, #FFFFFF)}
.lx-mobaccount__btn--secondary{background:var(--7e49d4b2-cdd1-54b6-ab12-eb864462ef01, #FFFFFF);color:var(--d4213383-85ba-5620-9b8c-1737f68c8fea, #0E5C3F)}
.lx-mobaccount__btn--secondary:hover{background:var(--d4213383-85ba-5620-9b8c-1737f68c8fea, #0E5C3F);color:var(--7e49d4b2-cdd1-54b6-ab12-eb864462ef01, #FFFFFF)}
.lx-mobaccount__btn:focus-visible{outline:3px solid var(--2d5e6541-ad56-5d2f-8b0c-b9243b0ff4d5, #E0A32E);outline-offset:2px}
.lx-mobaccount__btn[disabled]{opacity:.6;cursor:wait}
.lx-mobaccount__status{margin:8px 0 0;color:#B42318;font-size:.78rem;line-height:1.35;text-align:center}
.lx-mobaccount__status:empty{display:none}

/* Mobile header: logo, search and menu toggle only.
 * The five action icons were 254px of a 268px row, which squeezed the logo to
 * zero width. Store locator, account and cart are reachable from the menu (and
 * the cart also from the floating cart button), so they come out below 768px.
 * The class sits on the wrapper block, not the inner control, so the 46px slot
 * collapses with it. */
@media(max-width:768px){.lx-mobhide{display:none}}

/* ---------------------------------------------------------------------------
   Search takeover
   Opening the search hands the header over to the field: the logo, the nav and
   the other action icons go, and the search toggle stays on as the close
   control (its icon is already swapped to an X above). The announcement bar is
   deliberately untouched.
   --------------------------------------------------------------------------- */
@keyframes lx-searchdrop {
  from { opacity: 0; transform: translateY(calc(-50% - 14px)) }
  to   { opacity: 1; transform: translateY(-50%) }
}

.lx-toprow.lx-searchopen .lx-headsearch{
  position:absolute;
  left:0;
  right:58px;             /* clears the X, which is a 46px slot plus breathing room */
  top:50%;
  width:auto;
  min-width:0;
  margin:0;
  transform:translateY(-50%);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  z-index:6;
  animation:lx-searchdrop .24s cubic-bezier(.2,.7,.3,1) both
}

/* Hidden but still measured, so the row keeps its height. */
.lx-toprow.lx-searchopen .lx-brand{visibility:hidden}
.lx-stickyhead:has(.lx-toprow.lx-searchopen) .lx-navrow{visibility:hidden}

/* These do not drive the row height, so they can leave the flow outright. */
.lx-toprow.lx-searchopen .lx-topnav{display:none}
.lx-toprow.lx-searchopen .lx-actions>*:not(.lx-searchkeep){display:none}

@media(prefers-reduced-motion:reduce){
  .lx-toprow.lx-searchopen .lx-headsearch{animation:none}
}
/* ---- mobile drawer: slide in and out ----
   The original rule was display:none / display:block, and display cannot be
   transitioned - the panel simply appeared and vanished. The drawer now stays
   in the layout and is taken out of reach with visibility and pointer-events
   instead, which can be animated.

   The visibility delay is the whole trick for closing: on open it switches
   immediately so the panel is visible while it slides in; on close it is held
   back by the length of the transition so the panel can finish sliding out
   before it disappears. Without it the drawer would snap away on close and
   only animate one way. */
/* The drawer is a full-screen overlay, so it has to sit above everything the
   page floats on top of content. It was z-index 200 while the floating cart
   button is 900, which put the cart on top of the open drawer. */
.lx-mobmenu{z-index:1000}
.lx-mobmenu{display:block;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s ease,visibility 0s linear .26s}
.lx-mobmenu.open{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .26s ease,visibility 0s linear 0s}
.lx-mobmenu-panel{transform:translateX(100%);
  transition:transform .26s cubic-bezier(.22,.61,.36,1)}
.lx-mobmenu.open .lx-mobmenu-panel{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){
  .lx-mobmenu,.lx-mobmenu-panel{transition:none}
}

/* Announcement bar (Builder component `storefront-announcement`).
 *
 * The bar is its own component rather than part of the header: this file's
 * .lx-stickyhead root is position:sticky, and a bar nested inside it would
 * stick to the viewport instead of scrolling away. */
.lx-annbar .lx-annmsg{min-width:0}
@media(max-width:767px){
/* The call to action is a label, not the only affordance — the whole bar is the
 * link — so on a phone it gives the row back to the message rather than leaving
 * it ~90px of a 300px bar. The chevron stays behind as the one mark that says
 * this announcement goes somewhere. */
.lx-anncta{display:flex;align-items:center}
/* On a phone the label goes and the chevron stays. Dropping the whole call to
   action buys the message the row back, but it also leaves a linked
   announcement looking exactly like one that is not clickable - the bar is the
   link, and nothing said so. The chevron is that mark.

   Hidden rather than removed: display:none would take the label out of the
   accessibility tree too, leaving a screen reader with a bare icon. This keeps
   "Shop offers" readable and only takes it off the screen. */
.lx-annbar .lx-annctalabel{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.lx-annbar .lx-anncta svg{display:block;flex:0 0 auto}

.lx-annbar .lx-annmsg{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* Applied by announcement-marquee.js, and only to a message that overflows.
 * width:max-content is what lets the track be measured at its true width. */
.lx-annmsg.lx-annmsg-scroll{text-overflow:clip}
/* The delay is the point of the shorthand here: without it a long announcement
 * is already sliding by the time the bar paints, so the start of the sentence -
 * the part that has to be read - is the part nobody sees. It holds still long
 * enough to read the opening words, then scrolls.
 *
 * Three seconds, not one: at rest the bar shows about 43 characters of a message
 * this long, and three seconds is roughly what that takes to read. It is also
 * why the message starts hard against the left edge rather than centred -
 * centring an already-overflowing sentence pushes its tail off screen and drops
 * what is legible at rest to about 20 characters.
 *
 * animation-delay applies before the first iteration only, not between loops,
 * which is exactly the intent: the pause is for arrival, not for every lap. */
.lx-annmsg-scroll .lx-anntrack{display:flex;width:max-content;will-change:transform;animation:lx-annscroll var(--lx-anndur,20s) linear var(--lx-anndelay,3s) infinite}
/* Trailing padding on *every* copy, including the last: it makes the track
 * exactly twice one copy-plus-gap, so -50% lands on the second copy's start. */
.lx-annmsg-scroll .lx-anncopy{flex:0 0 auto;padding-right:56px}
}
@keyframes lx-annscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
.lx-annmsg-scroll .lx-anntrack{animation:none}
}
/* An announcement with no link still renders inside the bar's <a>, whose href
 * falls back to empty. Empty href means "this page", so without this a
 * link-free announcement would reload the page when tapped. */
.lx-annbar a[href=""]{pointer-events:none;cursor:default}

/* Current page (server-rendered — see storefront/injectors/navigation.py).
 * Underline, not a filled pill: the tint is the hover state, and a resting link
 * wearing it would read as "the pointer is here". */
.lx-single.is-active,.lx-mtop.is-active{
  position:relative;
  color:var(--d4213383-85ba-5620-9b8c-1737f68c8fea, #0E5C3F)}
/* The drawer's rows carry their colour in a style attribute, which no selector
   can outrank — hence !important on this one declaration. */
.lx-mobmenu-panel .is-active{
  position:relative;
  color:var(--d4213383-85ba-5620-9b8c-1737f68c8fea, #0E5C3F)!important}
/* A ::after, not an inset box-shadow or a border: those clip to the 9px radius
   and curl the line up at each end. position:absolute also keeps it from
   becoming a flex item in the rows above. */
.lx-single.is-active::after,.lx-mtop.is-active::after,.lx-mobmenu-panel .is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--d4213383-85ba-5620-9b8c-1737f68c8fea, #0E5C3F)}
