/* ============================================================
   HEADER  /  CATEGORIES NAV  (.categoriesMenu)
   Top-level horizontal nav: Science Prereqs / Post-Bacc /
   Continuing Ed / Summer Session.

   Currently classed onto a Multilevel Navigation Menu component
   (commerce-drilldown-navigation-responsive). Visible top-level
   buttons/links carry [data-menubar-item]; the hidden SSR
   fallback <a> does not. Dropdown items carry [data-menulist-item].
   ============================================================ */

/* Wrapper. */
.categoriesMenu {
    --menu-indicator-color: #00aeef;
    background-color: transparent !important;
    border-top: none !important;
    border-bottom: none !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* Text styling for all interactive and label descendants. */
.categoriesMenu a,
.categoriesMenu a:hover,
.categoriesMenu a:focus,
.categoriesMenu a:active,
.categoriesMenu button,
.categoriesMenu button:hover,
.categoriesMenu button:focus,
.categoriesMenu button:active,
.categoriesMenu span {
    font-family: var(--dxp-s-html-font-family) !important;
    font-size: var(--dxp-s-body-font-size) !important;
    font-weight: 400 !important;
    line-height: 150% !important;
    color: var(--dxp-g-brand) !important;
    background-color: transparent !important;
    text-decoration: none !important;
}

/* Prevent any ancestor from clipping the negative-margin indicator. */
.categoriesMenu,
.categoriesMenu *,
.categoriesMenu nav,
.categoriesMenu ul,
.categoriesMenu li {
    overflow: visible !important;
}

/* Per-item top indicator. Transparent border reserves the space so
   activating the indicator does not shift layout. [data-menubar-item]
   targets the visible top-level button/link only and skips the
   hidden fallback <a> the drilldown component renders alongside. */
.categoriesMenu [data-menubar-item] {
    border-top: 5px solid transparent !important;
    padding-top: 0.5rem !important;
    margin-top: -0.5rem !important;
    box-sizing: border-box !important;
    transition: border-top-color 0.15s ease-in-out !important;
}

/* Indicator lights on hover/keyboard-focus only. li:hover keeps it
   lit while the mouse is over the dropdown panel, since the
   absolutely-positioned panel is still a DOM descendant of the <li>.
   No plain :focus here — the drilldown nav restores focus to the
   trigger button when it closes a dropdown (accessible dialog
   behavior), and our JS-driven close from mouseout triggered that
   focus restore, leaving the indicator stuck. :focus-visible only
   fires for keyboard focus in spec, but Firefox's heuristic can
   still flag a programmatic focus() after a script click() as
   keyboard-equivalent — see the blur() defense in the storefront
   scripts resource. */
.categoriesMenu [data-menubar-item]:hover,
.categoriesMenu [data-menubar-item]:focus-visible,
.categoriesMenu li:hover > [data-menubar-item] {
    border-top-color: var(--menu-indicator-color) !important;
}

/* Suppress default underline, bottom border, and focus ring. */
.categoriesMenu [data-menubar-item],
.categoriesMenu [data-menubar-item]:hover,
.categoriesMenu [data-menubar-item]:focus,
.categoriesMenu [data-menubar-item]:focus-visible,
.categoriesMenu [data-menubar-item]:active,
.categoriesMenu [data-menubar-item][aria-expanded="true"],
.categoriesMenu li,
.categoriesMenu nav,
.categoriesMenu ul {
    border-bottom: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Suppress any pseudo-element used to draw an underline. */
.categoriesMenu [data-menubar-item]::before,
.categoriesMenu [data-menubar-item]::after,
.categoriesMenu li::before,
.categoriesMenu li::after {
    content: none !important;
    display: none !important;
}

/* Absolutely position the dropdown wrapper against its parent <li>
   so the panel overlays page content instead of taking layout space
   and pushing the header rows below it. The <li> already carries
   slds-is-relative for exactly this anchor. The mega menu component
   did this for us; the drilldown nav does not. */
.categoriesMenu commerce-drilldown-navigation-list {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 100 !important;
}

/* Dropdown panel that opens beneath the bar. ul.slide-down is the
   visible bordered list inside the drilldown nav's dialog wrapper.
   Dark-navy panel with a cyan vertical accent inset on the left.
   position: relative anchors the accent ::before. */
.categoriesMenu ul.slide-down {
    position: relative !important;
    background-color: var(--dxp-g-brand) !important;
    border-radius: 0 !important;
    margin-top: 1.25rem !important;
    padding: 0.75rem 0 !important;
    box-shadow: 0 8px 24px rgba(22, 62, 112, 0.18) !important;
}

/* Cyan vertical accent inset from the panel edges on three sides.
   Using ::before instead of border-left lets the accent breathe
   away from the top, bottom, and left edges. Not blocked by the
   pseudo-element suppression rule above, which only targets
   [data-menubar-item] and <li>. */
.categoriesMenu ul.slide-down::before {
    content: '' !important;
    position: absolute !important;
    left: 0.5rem !important;
    top: 0.75rem !important;
    bottom: 0.75rem !important;
    width: 4px !important;
    background-color: var(--menu-indicator-color) !important;
}

/* Dropdown item — suppress LWC chrome on every state so the
   drilldown's chunky default focus/active indicators do not show
   when the component auto-focuses the first item on open. */
.categoriesMenu ul.slide-down a,
.categoriesMenu ul.slide-down a:hover,
.categoriesMenu ul.slide-down a:focus,
.categoriesMenu ul.slide-down a:focus-visible,
.categoriesMenu ul.slide-down a:active {
    background-color: transparent !important;
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Default and non-hover state — white text, no decoration. */
.categoriesMenu ul.slide-down a,
.categoriesMenu ul.slide-down a:focus,
.categoriesMenu ul.slide-down a:focus-visible,
.categoriesMenu ul.slide-down a:active {
    color: var(--dxp-g-brand-contrast) !important;
    text-decoration: none !important;
}

/* Hover — yellow with underline, nothing else. */
.categoriesMenu ul.slide-down a:hover {
    color: #ffc42e !important;
    text-decoration: underline !important;
}


/* ============================================================
   HEADER  /  RIGHT-SIDE ICONS: ALIGNMENT + PROFILE HOVER BORDER
   Confirmed from the header innerHTML. The three right-side icons
   are separate builder components nested differently:
     - search:  commerce_builder-search-input-container
                  > button.search-icon
     - profile: commerce_builder-user-profile-menu
                  > commerce_my_account-user-profile-menu
                    > .slds-dropdown-trigger > button.menu-button
     - cart:    commerce_builder-cart-badge
                  > commerce_cart-badge > .cart-container > button

   Alignment: each button has a different box model (search = padded
   icon button; profile = button.menu-button.slds-no-space with zero
   padding; cart = slds-button_icon-border-filled with its own
   padding), so with no shared vertical center the glyphs sit on
   different lines. .header-end (search half vs badge half) and
   .header-badge-icons-flex (profile vs cart) were not centering
   their children. Forcing flex + align-items:center at each wrapper
   centers icons of any height on one axis; centering the glyph inside
   each button and zeroing vertical padding removes the leftover
   baseline drift.

   Note: the desktop profile component is commerce_builder-user-
   profile-menu — NOT commerce_builder-my-account-mega-menu, which is
   the mobile slide-out handled in the MOBILE section below.
   ============================================================ */

/* Center the search half against the badge half, and profile vs cart. */
.header-end,
.header-search,
.header-badge-icons,
.header-badge-icons-flex {
    display: flex !important;
    align-items: center !important;
}

/* Component hosts: shrink-to-content but vertically centered.

   NOTE: commerce_builder-search-input-container is intentionally NOT
   in this list. In icon mode the search host toggles its own display
   to expand the .search-bar popup on click; forcing display:inline-flex
   !important on the host overrode that toggle and the bar never popped
   up. The search icon stays vertically centered anyway because its
   wrapper .header-search is already display:flex; align-items:center
   (see the section above), and the glyph is centered by the
   button.search-icon rule below. */
commerce_builder-user-profile-menu,
commerce_my_account-user-profile-menu,
commerce_builder-cart-badge,
commerce_cart-badge,
commerce_cart-badge .cart-container {
    display: inline-flex !important;
    align-items: center !important;
}

/* Center each glyph inside its button and drop asymmetric vertical
   padding so all three line up on the same center. */
commerce_builder-search-input-container button.search-icon,
commerce_builder-user-profile-menu button.menu-button,
commerce_builder-cart-badge button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
}

/* Profile icon — remove the border / focus ring the menu button draws
   on hover and while the dropdown is open. No :focus-visible carve-out
   kept here, matching the rest of the header chrome suppression; add a
   keyboard-only indicator back if a11y indication is required. */
commerce_builder-user-profile-menu button.menu-button,
commerce_builder-user-profile-menu button.menu-button:hover,
commerce_builder-user-profile-menu button.menu-button:focus,
commerce_builder-user-profile-menu button.menu-button:focus-visible,
commerce_builder-user-profile-menu button.menu-button:active,
commerce_builder-user-profile-menu .slds-dropdown-trigger:hover > button.menu-button,
commerce_builder-user-profile-menu .slds-dropdown-trigger:focus-within > button.menu-button {
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: transparent !important;
}


/* ============================================================
   LAYOUT  /  UNSTICK HEADER
   ============================================================ */

div.header {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
}

/* ============================================================
   HEADER  /  SEARCH DRAWER  (click-to-expand search)
   The search icon opens a drawer that overlays the header row:
     header.search-expanded
       > div.header-search-drawer            <- position:absolute; z-index:-1 (native)
           > commerce-primitive-focus-trap-manager.header-drawer-focus-trap-manager
               > .header-search-drawer-content
                   > .header-search-drawer-input > commerce_builder-search-input-container
                   > button.header-search-drawer-close

   The drawer wrapper ships with z-index:-1. Normally that just sits
   at the back of the header's own stacking context and stays above
   the page. But the unstick rule above forces div.header to
   z-index:auto, removing the header's stacking context, so the -1
   resolves against the root and the drawer paints BEHIND the page
   hero/background: visible per computed styles, full width, correct
   position, but covered. Override the negative z-index so the drawer
   sits above page content. Below the mini-cart panel (9000) so the
   cart still wins. Confirmed via elementFromPoint: without this the
   background-image-overlay paints on top of the drawer. */
.header-search-drawer {
    z-index: 200 !important;
}

/* While the drawer is open (header carries .search-expanded), hide the
   collapsed search host in the normal header row so its magnifier does
   not show as a duplicate next to Log In / cart. visibility (not
   display:none) keeps its 40px slot so the profile/cart icons do not
   shift. Only applies while expanded, so the collapsed-state toggle
   icon stays visible and clickable to OPEN search. */
header.search-expanded .header-search {
    visibility: hidden !important;
}

/* The search component renders a trailing toggle button.search-icon
   alongside its input. Inside the drawer that magnifier is redundant
   (the input has its own leading .slds-input__icon) and was floating
   into the band as a stray icon. Remove just that trailing button;
   the leading input icon is an <svg>, not button.search-icon, so it
   is untouched. Scoped to the drawer so the collapsed toggle is safe. */
.header-search-drawer button.search-icon {
    display: none !important;
}

/* The product-card wrapping rule below applies white-space:normal +
   word-break:break-word to every .slds-truncate on the site. The
   search drawer's Clear button (button.clear.slds-truncate) sits in a
   ~27px flex slot, so break-word snapped it to one letter per line
   ("C / l / e / a / r"). Restore single-line, non-breaking text on the
   drawer's truncate elements and let Clear size to its content. The
   suggestion result rows (.result.slds-truncate) get the same reset so
   long suggestions ellipsize instead of wrapping. */
.header-search-drawer .slds-truncate,
.header-search-drawer button.clear {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.header-search-drawer button.clear {
    width: auto !important;
    flex: 0 0 auto !important;
}


/* ============================================================
   PRODUCT CARDS  /  NAME WRAPPING
   Full wrap, no truncation in product card grids
   ============================================================ */

.product-name-container,
.product-name-container *,
.slds-truncate {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word !important;
}

.product-name-container .slds-text-heading_medium,
.product-name-container .slds-text-heading-medium {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    display: block !important;
}

commerce_product_information-variant-attributes-display {
    display: none;
}


/* ============================================================
   PRODUCT PAGE  /  VARIANT ATTRIBUTE PILLS
   ============================================================ */

commerce-product-variant-pill .pill {
    border-radius: 20px !important;
    border-color: #6882a3 !important;
}

commerce-product-variant-pill:hover {
    box-shadow: none !important;
}

commerce-product-variant-pill .selected {
    background-color: #e2f4fd !important;
    box-shadow: none !important;
}


/* ============================================================
   PRODUCT PAGE  /  VARIANT PICKLIST + ADD TO CART WIDTH

   Both the variant-selector picklists and the Add To Cart button
   should fill the same column width. Out of the box they don't:

   - The picklists render at ~298px (observed in devtools) because
     the inner <button.slds-combobox__input> is set to
     display: inline-flex by theme2.css, and the custom-element
     wrappers above it default to display: inline so the chain
     shrink-wraps.
   - The Add To Cart button sits inside a <webruntime-slot-
     container> that also defaults to inline, breaking the parent
     width context that slds-button_stretch's 100% resolves against.

   The Add To Cart half is handled by CSS below. The picklist
   half could not be fixed by CSS — LWC scoped styles on the
   host elements outrank our selectors even with !important —
   so the picklist chain is forced via inline styles in the
   storefront scripts resource instead. Keeping a CSS attempt
   here as well in case future updates lower the LWC selector
   weight; harmless if it doesn't win.
   ============================================================ */

/* Picklist chain (CSS attempt — see storefront scripts for the
   guaranteed JS-driven override). */
commerce_builder-variant-selector,
commerce_builder-variant-selector commerce-product-variant-selector,
commerce_builder-variant-selector lightning-combobox,
commerce_builder-variant-selector lightning-base-combobox {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

commerce_builder-variant-selector .slds-combobox_container,
commerce_builder-variant-selector .slds-combobox,
commerce_builder-variant-selector .slds-combobox__form-element,
commerce_builder-variant-selector .slds-combobox__input {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Add To Cart chain — slot container fixed to block so the button
   chain inherits a real column-width containing block. */
.column-content > webruntime-slot-container {
    display: block !important;
    width: 100% !important;
}

commerce_builder-product-add-to-cart-button,
commerce_builder-product-add-to-cart-button commerce-action-button,
commerce_builder-product-add-to-cart-button .slds-button {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


/* ============================================================
   PRODUCT PAGE  /  PRICE H6 OVERRIDE  (.h6override)
   Collapses the table layout the price component renders by default
   so the price text matches the heading-xxs sibling ("16 WEEKS")
   ============================================================ */

.h6override,
.h6override commerce-product-pricing-details,
.h6override table,
.h6override tbody,
.h6override tr,
.h6override td,
.h6override .main-price-container {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    line-height: var(--dxp-s-text-heading-extra-extra-small-line-height) !important;
}

.h6override .main-price,
.h6override .price-label,
.h6override lightning-formatted-number,
.h6override .main-price-container span {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: var(--dxp-s-text-heading-extra-extra-small-font-size) !important;
    font-weight: var(--dxp-s-text-heading-extra-extra-small-font-weight) !important;
    line-height: var(--dxp-s-text-heading-extra-extra-small-line-height) !important;
    letter-spacing: var(--dxp-s-text-heading-extra-extra-small-letter-spacing) !important;
    text-transform: var(--dxp-s-text-heading-extra-extra-small-text-transform) !important;
    vertical-align: baseline !important;
    text-align: left !important;
}

.h6override lightning-formatted-number {
    float: left;
}
.maxWidthButton {
    max-width: 300px !important;
}

/* ============================================================
   ORDER CONFIRMATION
   Each class is applied to a single component in Experience Builder
   ============================================================ */

/* Order Confirmation Message component */
.oc-confirmation-tight {
    --dxp-s-text-heading-large-font-size: 1.5rem;
    --dxp-s-text-heading-large-line-height: 1.3;
    --dxp-s-text-heading-extra-small-font-size: 0.9375rem;
    --dxp-s-text-heading-extra-small-line-height: 1.45;
}

.oc-confirmation-tight .slds-icon_large {
    width: 2rem;
    height: 2rem;
}

/* Billing Details component */
.oc-billing-tight {
    --dxp-s-text-heading-extra-small-font-size: 0.9375rem;
    --dxp-s-text-heading-small-font-size: 0.8125rem;
    --dxp-s-text-heading-small-line-height: 1.4;
}

/* Payment Summary component (right column) */
.oc-payment-tight {
    --dxp-s-text-heading-extra-small-font-size: 0.9375rem;
    --dxp-s-text-heading-small-font-size: 0.8125rem;
    --dxp-s-text-body-large-font-size: 0.875rem;
    --dxp-s-text-body-regular-font-size: 0.8125rem;
}

/* Order Promotions Summary component */
.oc-promotions-tight {
    --dxp-s-text-heading-extra-small-font-size: 0.9375rem;
    --dxp-s-text-body-regular-font-size: 0.8125rem;
}

.oc-promotions-tight .slds-pill,
.oc-promotions-tight .slds-pill__label,
.oc-promotions-tight [class*="pill"],
.oc-promotions-tight [class*="chip"],
.oc-promotions-tight commerce-order-promotion-summary,
.oc-promotions-tight commerce-order-promotion-summary * {
    font-size: 0.8125rem !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

dxp_content_layout-site-logo img {
    max-height: 50px !important;
}

/* Hide the "Become a member for the best prices." copy the mobile
   slide-out account mega menu renders above the Sign Up / Log In
   buttons. Component is mobile-only, so no media query needed. */
commerce_builder-my-account-mega-menu .dxp-text-body {
    display: none !important;
}


/* ============================================================
   MINI CART  /  PANEL BACKGROUND  (commerce_cart-mini-cart-panel)
   The outermost positioned host (width 33%, position fixed, 100vh)
   ships with no background and z-index: 1. White fill solves the
   transparent panel body; the z-index bump prevents PDP picklists
   (lightning-combobox) from painting over the cart when the page
   header's stacking context is unstuck above.
   ============================================================ */

commerce_cart-mini-cart-panel {
    background-color: #ffffff !important;
    z-index: 9000 !important;
}
commerce-quantity-selector {
    background-color: red;
}
commerce_cart-mini-cart-panel commerce_cart-item .item_actions_quantity {
    display: none !important;
}


/* ============================================================
   FEATURED COURSES CAROUSEL  /  PRODUCT NAME PLATE
   (.featuredProductNameText on each card's Text Block)

   The content region's inline --dxp-c-content-vertical-alignment
   did not respond to an override, and .main-content shrink-wraps,
   so the plate is pinned to the card with absolute positioning
   instead. That handles bottom placement and full width in one
   move and avoids fighting the flex chain.

   No z-index on the plate: position:relative/absolute alone puts
   it above the non-positioned background-image div, and any
   positive z-index here outranks the slider arrows, which sit in
   the same root stacking context. Arrows get an explicit bump
   below so they win regardless.
   ============================================================ */

/* Anchor for the absolutely positioned plate. */
.dxp-block-image-host:has(.featuredProductNameText) {
    position: relative !important;
}

/* The plate. dxp_base-text-block is a custom element defaulting to
   display:inline, so display:block is required for the box. */
.featuredProductNameText {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(255, 255, 255, 0.75) !important;
    padding: 0.5rem 0.75rem !important;
    box-sizing: border-box !important;
}

/* Slider prev/next chevrons above the plate. Scoped by :has() to
   this carousel so other sliders on the site are untouched. */
section.parent-container:has(.featuredProductNameText)
    > button.experience-slider-icon-overlay {
    z-index: 20 !important;
}

/* ============================================================
   FEATURED COURSES CAROUSEL  /  HIDE NATIVE SCROLLBAR (FIREFOX)

   The slider track is a real overflow container, so it renders a
   native horizontal scrollbar. The component hides it with a
   ::-webkit-scrollbar rule, which Blink and WebKit honor and
   Firefox ignores, hence the bar appearing in Firefox only.
   scrollbar-width is the standards property Firefox implements.
   All three are declared so the behavior is identical everywhere
   and does not depend on the component's own rule surviving an
   upgrade. Scoped by :has() so other sliders are untouched.

   Hiding the bar does not disable scrolling: drag, wheel, arrow
   buttons, and keyboard all still work.
   ============================================================ */

.experience-slider-container:has(.featuredProductNameText),
.experience-slider-panel:has(.featuredProductNameText) {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.experience-slider-container:has(.featuredProductNameText)::-webkit-scrollbar,
.experience-slider-panel:has(.featuredProductNameText)::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}