/* =====================================================================
   HSR-Globals — 🔴 NOT INERT. DO NOT ENQUEUE ON THE FIRST DEPLOY.
   =====================================================================
   This file was SPLIT OUT of hsr-tokens.css on 2026-07-31 after a review
   found that it broke the project's central guarantee:

       "Activating this theme changes the rendered site by exactly zero."

   It does not. It contains two layers that repaint pages Elementor is still
   drawing:

   LAYER 3 — the `--e-global-*` overrides. Elementor emits those variables from
     elementor-post-9.css at wp_enqueue_scripts priority 10; the theme enqueues
     at priority 20, so at equal specificity THE THEME WINS BY CASCADE ORDER.
     Every widget on the site bound to a *global* colour or *global* typography
     repaints the moment the theme is activated — across all ~65 published
     Elementor pages, the 50 state SEO pages and /my-account/.

   LAYER 4 — bare-element rules: `body`, `p, li, td, th, label, input, select,
     textarea, button`, `h1..h6`, `a`, the global focus ring, and a
     prefers-reduced-motion block with !important. Same problem, wider blast
     radius: page background goes cream, every form control changes typeface.

   Mark would activate the theme expecting a no-op smoke test and watch the
   whole site change colour and font. That is the one deploy where it matters
   most that nothing moves.

   ── WHEN TO TURN THIS ON ─────────────────────────────────────────────────
   Layer 3 becomes CORRECT (and useful) at the point where some surfaces are
   native and some are still Elementor — it is what stops a half-migrated page
   showing two different blues. Turn it on at WS3, with the header/footer.

   Layer 4 belongs with the first native content surface, WS5.

   Enable from the CHILD theme, one at a time:

       add_filter( 'hsr_enqueue_globals', '__return_true' );

   ⚠️ Then verify by computed style on a REAL Elementor page, signed out, on a
      phone — not in the editor preview.
   ===================================================================== */

/* =====================================================================
   LAYER 3 — ELEMENTOR GLOBALS            ** dies with Elementor **
   ---------------------------------------------------------------------
   Elementor's Default Kit (post 9) defines these. Every widget bound to a
   GLOBAL colour or GLOBAL typography style repaints from them.

   Two reasons this block exists:

   1. WHILE Elementor is installed, it makes the Kit's values agree with Brand
      Kit V3.0, so a page half-migrated to native markup and half still
      Elementor does not show two different blues.

   2. AFTER Elementor is removed, any page we have NOT yet migrated that still
      references `--e-global-*` in inline CSS keeps rendering in brand colours
      instead of falling back to browser defaults. This is the safety net for
      the ~65 published Elementor pages during the window when some are native
      and some are not.

   🔴 The kit's class is `.elementor-kit-9` on this site (Default Kit = post 9).
      If that ever changes, this selector must change with it.

   ⚠️ ALSO set these in Elementor → Site Settings. This CSS fixes the front end;
      Site Settings fixes the swatches anyone editing a page actually sees.
      Leaving them different means the next person to touch a page reintroduces
      the old palette by picking "Primary" from the swatch list.

   DELETE THIS ENTIRE LAYER AT WS12.
   ===================================================================== */
:root,
.elementor-kit-9,
body.elementor-page {
  --e-global-color-primary:   #0757A0;   /* blue-700 — the anchor */
  --e-global-color-secondary: #16305C;   /* navy */
  --e-global-color-text:      #26303B;   /* ink */
  --e-global-color-accent:    #F26D5B;   /* coral — the one emotional CTA */

  --e-global-typography-primary-font-family:   'Poppins';
  --e-global-typography-primary-font-weight:   700;
  --e-global-typography-secondary-font-family: 'Poppins';
  --e-global-typography-secondary-font-weight: 600;
  --e-global-typography-text-font-family:      'Inter';
  --e-global-typography-text-font-weight:      400;
  --e-global-typography-accent-font-family:    'Poppins';   /* measured live 2026-08-01: Poppins, NOT Inter. Shipping Inter here would have reskinned every widget bound to the Accent slot. */
  --e-global-typography-accent-font-weight:    600;
}


/* =====================================================================
   LAYER 4 — BASE TYPOGRAPHY
   ---------------------------------------------------------------------
   Poppins for headings, Inter for body and UI. 17px base, 1.6 line height —
   generous, because the audience reads on a phone with children nearby.
   ===================================================================== */
/* 🔴 SCOPED TO body.hsr-basetype ON PURPOSE — DO NOT UNSCOPE BEFORE WS5.
   ---------------------------------------------------------------------
   This file's own header says it: "Layer 3 becomes CORRECT at WS3, with the
   header/footer. Layer 4 belongs with the first native content surface, WS5."
   Layer 3 above is now live; Layer 4 below is not, and this class is the gate.

   WHY IT CANNOT SHIP AT WS3 — measured, not assumed. On /my-account/ a
   paragraph renders Lato 19px BLACK and a list item Roboto 17px GREY. Those
   values are INHERITED from Elementor widget containers, not set on p/li. A
   direct rule beats inheritance regardless of specificity, so an unscoped
   `p { font-family:var(--hsr-font-body); color:var(--hsr-ink) }` repaints them
   to Inter #26303B instantly — across /my-account/ and every Elementor page.
   Injecting these exact rules client-side on 2026-08-01 confirmed it:
   p Lato/black -> Inter/#26303B, li Roboto/grey -> Inter/#26303B.

   Note this is a DIFFERENT mechanism from the heading rules, which are safe
   because `.elementor-kit-9 h1` (0,1,1) outranks a bare `h1` (0,0,1). For
   INHERITED properties specificity never enters into it. That distinction is
   the whole reason this block is gated and the heading block is not.

   TO ENABLE AT WS5: add the class to <body> from the child theme —
       add_filter( 'body_class', function ( $c ) { $c[] = 'hsr-basetype'; return $c; } );
   Then verify p/li/td/th on /my-account/ and a report editor before trusting it. */
/* 🔴 SCOPE CLASS DOUBLED + EVERY BARE ELEMENT EXCLUDES `hsr-` CLASSES.
   Re-specified 2026-08-03 (session 12) from a parse of the live post-9.css.
   Both halves are load-bearing.

   1. WHY DOUBLED. As authored, `.hsr-basetype h1` was (0,1,1) and the kit's
      `.elementor-kit-9 h1` is ALSO (0,1,1) - a TIE, resolved by source order.
      Source order is NOT dependable here: measured on a guest fetch, /contact/,
      /faq/ and / carry NO <link> to post-9.css at all - WP Rocket inlines the
      kit into a ~234 KB <style> blob, pruned to the heading levels each page
      uses - while /my-account/ still gets a real <link>. Two delivery paths,
      two orderings, so a tie is a coin-flip per page per cache regeneration.
      Doubling makes it (0,2,1) and settles it.

   2. WHY :not() ON EVERY ELEMENT. A doubled Layer 4 heading rule is (0,2,1),
      which BEATS a doubled component rule like
      `.hsr-modal__title.hsr-modal__title` (0,2,0) - element count breaks the
      tie. Without this, enabling Layer 4 would silently undo session 11's
      modal-title fix and every other doubled component rule. Layer 4 governs
      UNCLASSED prose only; components own their own look.

   Measured kit surface this outranks (nothing else is claimed):
     h1-h6 (0,1,1) - label (0,1,1) - a (0,1,1) - a:hover (0,2,1) -
     button (0,1,1) +:hover/:focus (0,2,1) - input[type=button|submit] (0,2,1)
     +:hover/:focus (0,3,1).
   🔴 The kit sets NO color and NO font-family on text inputs or textarea,
      only background/border/radius/padding, so Layer 4 never contends there.
   🔴 There is NO `.elementor-kit-9 p` or `li` rule - body copy is INHERITED.
      The /my-account/ "p renders Lato, li Roboto" problem is Elementor WIDGET
      rules, a different population. This block does not fix that.

   🔴 RECONCILED 2026-08-03 (session 12). An A/B diff on a live render — toggle the
      class, compare computed style on every visible node — proved that enabling
      this was NOT a no-op, so two things changed:
        1. FOOTER EXCLUDED. 14 unclassed <li> in the DARK footer flipped to
           var(--hsr-ink): dark text on a dark footer. Every rule now carries
           :not(.hsr-ftr *). The footer is a fully native component that owns its
           own look; Layer 4 has no business inside it.
        2. FORM ELEMENTS DROPPED. <label> and <input> moved Poppins -> Inter,
           because kit 9 sets `label { font-family: Poppins }`. So label, input,
           select, textarea and button were removed from the rule entirely — the
           kit still styles them and rendering is unchanged. Revisit at WS12, when
           the kit stops supplying them.
        3. TABLE CELLS DROPPED, 2026-08-03. `td`/`th` were removed after the
           transcript editor failed the A/B: unclassed <th> went from white to
           var(--hsr-ink) — white column headings on a coloured header row, dark
           on dark. Tables here are always component-styled report tables, so
           Layer 4 has no business in them. Provably a no-op on what was already
           live: Layer 4 measured 0/0/0 on contact, faq, account and all six
           report templates before this change.
      Layer 4 now governs p / li, headings, a and small. Nothing else.

   ENABLE via hsr_basetype_body_class() in the child functions.php, gated to
   native templates. NEVER site-wide - that repaints ~119 Elementor pages. */
body.hsr-basetype.hsr-basetype,
.hsr-basetype.hsr-basetype p:not([class*="hsr-"]):not(.hsr-ftr *), .hsr-basetype.hsr-basetype li:not([class*="hsr-"]):not(.hsr-ftr *) {
  font-family: var(--hsr-font-body);
  color: var(--hsr-ink);
}

body.hsr-basetype.hsr-basetype {
  font-size: var(--hsr-fs-body);
  /* em-based ON PURPOSE. Kit 9 sets `body { line-height: 1.6em }`, which computes
     ONCE to 27.2px and inherits that FIXED px to every descendant regardless of
     its own font-size. A unitless 1.6 makes each element recompute, which moved
     .hsr-hdr__signin from 27.2px to 24px - measured by A/B on /contact/. The bar
     is "does what the old one did", so reproduce the em behaviour exactly. */
  line-height: calc(var(--hsr-lh-body) * 1em);
  background: var(--hsr-cream-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hsr-basetype.hsr-basetype h1:not([class*="hsr-"]):not(.hsr-ftr *), .hsr-basetype.hsr-basetype h2:not([class*="hsr-"]):not(.hsr-ftr *), .hsr-basetype.hsr-basetype h3:not([class*="hsr-"]):not(.hsr-ftr *),
.hsr-basetype.hsr-basetype h4:not([class*="hsr-"]):not(.hsr-ftr *), .hsr-basetype.hsr-basetype h5:not([class*="hsr-"]):not(.hsr-ftr *), .hsr-basetype.hsr-basetype h6:not([class*="hsr-"]):not(.hsr-ftr *),
.hsr-basetype.hsr-basetype .hsr-display,
.hsr-basetype.hsr-basetype .entry-title, .hsr-basetype.hsr-basetype .page-title {
  font-family: var(--hsr-font-head);
  margin: 0 0 var(--hsr-s-4);
}

/* Per-level colours, measured off kit 9 on a live guest render 2026-08-01.
   The kit assigns FOUR different values and this preserves them exactly. */
.hsr-basetype.hsr-basetype h1:not([class*="hsr-"]):not(.hsr-ftr *), .hsr-basetype.hsr-basetype h2:not([class*="hsr-"]):not(.hsr-ftr *), .hsr-basetype.hsr-basetype .hsr-display,
.hsr-basetype.hsr-basetype .entry-title, .hsr-basetype.hsr-basetype .page-title { color: var(--hsr-navy); }
.hsr-basetype.hsr-basetype h3:not([class*="hsr-"]):not(.hsr-ftr *) { color: var(--hsr-blue-700); }
.hsr-basetype.hsr-basetype h4:not([class*="hsr-"]):not(.hsr-ftr *), .hsr-basetype.hsr-basetype h5:not([class*="hsr-"]):not(.hsr-ftr *) { color: var(--hsr-ink); }
.hsr-basetype.hsr-basetype h6:not([class*="hsr-"]):not(.hsr-ftr *) { color: var(--hsr-slate); }

/* line-height 1.2 on all six: kit 9 sets NO heading line-height, so what the
   site renders is hsr-base.css's 1.2. Measured live: 52.8px on a 44px h1. */
.hsr-basetype.hsr-basetype .hsr-display { font-weight: 800; font-size: var(--hsr-fs-display); line-height: 1.05; }
.hsr-basetype.hsr-basetype h1:not([class*="hsr-"]):not(.hsr-ftr *) { font-weight: 700; font-size: var(--hsr-fs-h1); line-height: 1.2; }
.hsr-basetype.hsr-basetype h2:not([class*="hsr-"]):not(.hsr-ftr *) { font-weight: 700; font-size: var(--hsr-fs-h2); line-height: 1.2; }
.hsr-basetype.hsr-basetype h3:not([class*="hsr-"]):not(.hsr-ftr *) { font-weight: 600; font-size: var(--hsr-fs-h3); line-height: 1.2; }
.hsr-basetype.hsr-basetype h4:not([class*="hsr-"]):not(.hsr-ftr *) { font-weight: 600; font-size: var(--hsr-fs-h4); line-height: 1.2; }
.hsr-basetype.hsr-basetype h5:not([class*="hsr-"]):not(.hsr-ftr *) { font-weight: 600; font-size: var(--hsr-fs-h5); line-height: 1.2; }
.hsr-basetype.hsr-basetype h6:not([class*="hsr-"]):not(.hsr-ftr *) { font-weight: 600; font-size: var(--hsr-fs-h6); line-height: 1.2; }

.hsr-basetype.hsr-basetype small:not([class*="hsr-"]):not(.hsr-ftr *), .hsr-basetype.hsr-basetype .hsr-meta { font-size: var(--hsr-fs-small); font-weight: 500; color: var(--hsr-muted); }

.hsr-basetype.hsr-basetype a:not([class*="hsr-"]):not(.hsr-ftr *) { color: var(--hsr-blue-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.hsr-basetype.hsr-basetype a:not([class*="hsr-"]):not(.hsr-ftr *):hover { color: var(--hsr-coral-500); }

/* Focus ring on EVERY interactive element. Brand Kit: non-negotiable. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--hsr-white), 0 0 0 6px var(--hsr-blue-500);
  border-radius: var(--hsr-r-sm);
}

/* 🔴 THE GENERIC .hsr-container RULE WAS REMOVED HERE ON 2026-08-01. DO NOT
   PUT IT BACK BEFORE WS5.

   page.php and single.php put `.hsr-container` on the <article> that wraps
   the_content() for ~119 Default-template pages - /pricing/, the 50 state
   pages and the 68 individual Elementor pages. Both files' comments assert
   the class "has no rule in any enqueued stylesheet, so it is genuinely
   inert". That was true only while THIS file was off. Enabling globals at
   WS3 would therefore have wrapped every one of those pages in a 1160px
   max-width with new horizontal padding - clipping Elementor's full-width
   and stretched sections - which is the same defect shape as the .hsr-section
   64px bug caught pre-upload, one class over.

   The header and footer still need the rule, so it now lives SCOPED in
   hsr-header.css (.hsr-hdr .hsr-container) and hsr-footer.css
   (.hsr-ftr .hsr-container). Those files are unconditional and their
   selectors match nothing until hsr_owned_locations() gains the location, so
   the header/footer no longer depend on globals being on. */

/* Reduced motion: honour it. Busy people, small screens, vestibular issues. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* === HSR WS12 PORT from Elementor kit-9 post-9.css === */
/* session 22 2026-08-05  extracted from the compiled kit                        */
/* session 24 2026-08-05  re-prefixed .hsr-root + completed missing selectors    */
/*                                                                              */
/* .hsr-root is set UNCONDITIONALLY by hsr_body_classes() in inc/setup.php.      */
/* It reproduces the cascade weight of Elementor's own .elementor-kit-9 body     */
/* class, which every rule below was authored against.                          */
/*                                                                              */
/* BARE class on purpose:                                                       */
/*   .elementor-kit-9 X  = (0,3,1)   <- what shipped and won                    */
/*   X                   = (0,2,1)   <- session 22, lost to WooCommerce         */
/*   .hsr-root X         = (0,3,1)   <- exact equivalence                       */
/*   body.hsr-root X     = (0,3,2)   <- OVERSHOOTS, would beat theme rules that */
/*                                      must keep winning. Do not use.          */
/*                                                                              */
/* DO NOT rename .hsr-root. DO NOT add !important.                              */
/* .elementor-button / .elementor-field-textual are deliberately NOT ported -    */
/* they are Elementor's own classes and correctly cease to exist with it.        */

/* --- heading typography --------------------------------------------------- */
/* session 24: h1-h6 were cleared as "not orphaned" because hsr-base.css defines
   them - but it defines them with the vendored Hello Elementor normalize
   (font-family:inherit; font-weight:500; color:inherit -> -apple-system/500/#333).
   Presence is not equivalence. Measured live: h1.entry-title fell from
   Poppins/700/44px/navy to -apple-system/500/40px/#333 with the kit disabled.
   The theme's real heading rules live behind .hsr-basetype (Layer 4), which is
   dormant and was rolled back at WS5 - so nothing else supplies these. */
.hsr-root h1 { color: rgb(22, 48, 92); font-family: Poppins, sans-serif; font-size: 44px; font-weight: 700; }
.hsr-root h2 { color: rgb(22, 48, 92); font-family: Poppins, sans-serif; font-size: 34px; font-weight: 700; }
.hsr-root h3 { color: rgb(7, 87, 160); font-family: Poppins, sans-serif; font-size: 26px; font-weight: 600; }
.hsr-root h4 { color: rgb(38, 48, 59); font-family: Poppins, sans-serif; font-size: 22px; font-weight: 600; }
.hsr-root h5 { color: rgb(38, 48, 59); font-family: Poppins, sans-serif; font-size: 18px; font-weight: 600; }
.hsr-root h6 { color: rgb(84, 96, 110); font-family: Poppins, sans-serif; font-size: 16px; font-weight: 600; }

/* --- nav / view toggle / attendance toolbar / profile calendar ------------- */
.hsr-root h1.entry-title { display: var(--page-title-display); }
.hsr-root .view-toggle-container { gap: 8px !important; }
.hsr-root .view-toggle { align-items: center; justify-content: center; width: 44px; height: 44px; transition: 0.2s; display: inline-flex !important; padding: 0px !important; border-radius: 12px !important; border: 1.5px solid rgb(231, 227, 221) !important; background: rgb(255, 255, 255) !important; color: rgb(84, 96, 110) !important; }
.hsr-root .view-toggle svg { width: 20px !important; height: 20px !important; fill: currentcolor !important; }
.hsr-root .view-toggle:hover { color: rgb(7, 87, 160) !important; border-color: rgb(191, 213, 236) !important; background: rgb(234, 242, 251) !important; }
.hsr-root .view-toggle.active { box-shadow: rgba(7, 87, 160, 0.22) 0px 4px 12px; color: rgb(255, 255, 255) !important; background: rgb(7, 87, 160) !important; border-color: rgb(7, 87, 160) !important; }
.hsr-root .woocommerce-MyAccount-navigation { background: rgb(255, 255, 255) !important; border: 1px solid rgb(239, 231, 220) !important; border-radius: 20px !important; box-shadow: rgba(22, 48, 92, 0.07) 0px 6px 20px !important; padding: 10px !important; }
.hsr-root .woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: 4px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; margin: 0px; padding: 0px; list-style: none; }
.hsr-root .woocommerce-MyAccount-navigation-link { list-style: none; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; margin: 0px !important; background: transparent !important; }
.hsr-root .woocommerce-MyAccount-navigation-link a { display: block; padding: 13px 16px; border-radius: 12px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 15px; background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; text-decoration: none; transition: 0.18s; color: rgb(38, 48, 59) !important; }
.hsr-root .woocommerce-MyAccount-navigation-link a:hover { background: rgb(234, 242, 251); color: rgb(7, 87, 160) !important; }
.hsr-root .woocommerce-MyAccount-navigation-link.is-active a { background: rgb(7, 87, 160); box-shadow: rgba(7, 87, 160, 0.26) 0px 6px 16px; color: rgb(255, 255, 255) !important; }
.hsr-root .woocommerce-MyAccount-navigation-link.is-active a:hover { background: rgb(12, 58, 107); color: rgb(255, 255, 255) !important; }
.hsr-root .hsr-mobile-nav-select { display: none; }
.hsr-root .hsr-mnav { display: none; }
.hsr-root .hsr-spnav { display: none; }
.hsr-root .hsr-att-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; background: rgb(255, 255, 255); border: 1px solid rgb(239, 231, 220); border-radius: 18px; padding: 16px 20px; margin: 0px 0px 24px; box-shadow: rgba(22, 48, 92, 0.07) 0px 6px 20px; }
.hsr-root .hsr-att-toolbar-stat { display: flex; align-items: center; }
.hsr-root .hsr-att-toolbar-stat #total_days_in_year { color: rgb(7, 87, 160) !important; font-weight: 800 !important; }
.hsr-root .hsr-att-toolbar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hsr-root #student-profile-tabs .cal-month-wrapper { box-sizing: border-box; width: 100% !important; max-width: 100% !important; }
.hsr-root #student-profile-tabs .cal-row { place-items: center; display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 5px !important; }
.hsr-root #student-profile-tabs .cal-item, .hsr-root #student-profile-tabs .cal-item-day, .hsr-root #student-profile-tabs .cal-item-empty { max-width: 34px; aspect-ratio: 1 / 1; align-items: center; justify-content: center; width: 100% !important; height: auto !important; line-height: 1 !important; margin: 0px !important; display: flex !important; }

/* ==========================================================================
   MY ACCOUNT NAV + DASHBOARD VIEW TOGGLE
   Ported out of the Elementor kit stylesheet, 2026-08-06 (session 31).

   These rules used to live ONLY in /wp-content/uploads/elementor/css/post-9.css.
   Deleting the Elementor plugin did not remove that file, because it sits in
   uploads - which is the only reason this nav still rendered correctly. It is
   now an orphan nothing regenerates, so the rules are rehomed here.

   Copied VERBATIM, in source order, so the cascade resolves exactly as before.
   Deliberately NOT ported: .elementor-1008:has(...) and .view-toggle-container
   (both match nothing - the grid/list toggle is native now), and h1.entry-title
   (its only declaration reads an undefined variable, so it already did nothing).
   ========================================================================== */
.view-toggle {
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	transition: 0.2s;
	display: inline-flex !important;
	padding: 0px !important;
	border-radius: 12px !important;
	border: 1.5px solid rgb(231, 227, 221) !important;
	background: rgb(255, 255, 255) !important;
	color: rgb(84, 96, 110) !important;
}
.view-toggle svg {
	width: 20px !important;
	height: 20px !important;
	fill: currentcolor !important;
}
.view-toggle:hover {
	color: rgb(7, 87, 160) !important;
	border-color: rgb(191, 213, 236) !important;
	background: rgb(234, 242, 251) !important;
}
.view-toggle.active {
	box-shadow: rgba(7, 87, 160, 0.22) 0px 4px 12px;
	color: rgb(255, 255, 255) !important;
	background: rgb(7, 87, 160) !important;
	border-color: rgb(7, 87, 160) !important;
}
.woocommerce-MyAccount-navigation {
	background: rgb(255, 255, 255) !important;
	border: 1px solid rgb(239, 231, 220) !important;
	border-radius: 20px !important;
	box-shadow: rgba(22, 48, 92, 0.07) 0px 6px 20px !important;
	padding: 10px !important;
}
.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-width: medium;
	border-style: none;
	border-color: currentcolor;
	border-image: none;
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.woocommerce-MyAccount-navigation-link {
	list-style: none;
	border-width: medium !important;
	border-style: none !important;
	border-color: currentcolor !important;
	border-image: none !important;
	margin: 0px !important;
	background: transparent !important;
}
.woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 13px 16px;
	border-radius: 12px;
	font-family: Poppins, sans-serif;
	font-weight: 600;
	font-size: 15px;
	background: transparent;
	border-width: medium;
	border-style: none;
	border-color: currentcolor;
	border-image: none;
	text-decoration: none;
	transition: 0.18s;
	color: rgb(38, 48, 59) !important;
}
.woocommerce-MyAccount-navigation-link a:hover {
	background: rgb(234, 242, 251);
	color: rgb(7, 87, 160) !important;
}
.woocommerce-MyAccount-navigation-link.is-active a {
	background: rgb(7, 87, 160);
	box-shadow: rgba(7, 87, 160, 0.26) 0px 6px 16px;
	color: rgb(255, 255, 255) !important;
}
.woocommerce-MyAccount-navigation-link.is-active a:hover {
	background: rgb(12, 58, 107);
	color: rgb(255, 255, 255) !important;
}
@media (max-width: 767px) {
	.woocommerce-MyAccount-navigation {
		margin-bottom: 16px;
		padding: 8px !important;
		border-radius: 16px !important;
	}
	.woocommerce-MyAccount-navigation ul {
		overflow-x: auto;
		gap: 8px;
		scrollbar-width: none;
		flex-flow: row !important;
	}
	.woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
		display: none;
	}
	.woocommerce-MyAccount-navigation-link {
		flex: 0 0 auto !important;
	}
	.woocommerce-MyAccount-navigation-link a {
		white-space: nowrap;
		padding: 10px 16px;
		font-size: 14px;
	}
}
.woocommerce-MyAccount-navigation-link a {
	background: transparent !important;
	border-width: medium !important;
	border-style: none !important;
	border-color: currentcolor !important;
	border-image: none !important;
	padding: 13px 16px !important;
	border-radius: 12px !important;
	font-family: Poppins, sans-serif !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	color: rgb(38, 48, 59) !important;
	box-shadow: none !important;
}
.woocommerce-MyAccount-navigation-link a:hover {
	background: rgb(234, 242, 251) !important;
	color: rgb(7, 87, 160) !important;
}
.woocommerce-MyAccount-navigation-link.is-active a {
	background: rgb(7, 87, 160) !important;
	color: rgb(255, 255, 255) !important;
	box-shadow: rgba(7, 87, 160, 0.26) 0px 6px 16px !important;
}
.woocommerce-MyAccount-navigation-link.is-active a:hover {
	background: rgb(12, 58, 107) !important;
	color: rgb(255, 255, 255) !important;
}
@media (max-width: 767px) {
	.woocommerce-MyAccount-navigation-link a {
		white-space: nowrap;
		padding: 10px 16px !important;
		font-size: 14px !important;
	}
	.woocommerce-MyAccount-navigation ul {
		display: none !important;
	}
}