/* Nav/header (white background, 1px bottom border) -- see also .site-11 vars in helmet.css */
.site-11 .pre-nav {
    background-color: var(--accent-color);
}

.site-11 .section-nav {
    background-color: #fff;
}

.site-11 .section-nav {
    border-bottom: 1px solid #000;
}

/* Cart icon accent, per client spec (same orange as primary buttons/announcement bar) */
.site-11 .section-nav .nav-cart-wrap,
.site-11 .section-nav .nav-cart {
    color: var(--accent-color);
}

/* Typography -- Helvetica Neue (client spec) not licensed/sourced yet, using the Roboto
   fallback already loaded in the Kiddimoto eg_templates row until then. */
.site-11 {
    /* Same stack shoei.css uses. Note this is a system font reference, not a webfont:
       macOS/iOS ship Helvetica Neue so those users get the real thing, everyone else
       falls through to Arial. Nothing is licensed or self-hosted anywhere in this app. */
    --heading-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-family: var(--heading-font);
    font-size: 14px;
    font-weight: 400;
    color: #333333;
}

.site-11 h1,
.site-11 .h1 { font-family: var(--heading-font); font-weight: 700; font-size: 48px; }
.site-11 h2,
.site-11 .h2 { font-family: var(--heading-font); font-weight: 700; font-size: 36px; }
.site-11 h3,
.site-11 .h3 { font-family: var(--heading-font); font-weight: 300; font-size: 36px; }
.site-11 h4,
.site-11 .h4 { font-family: var(--heading-font); font-weight: 700; font-size: 24px; }
.site-11 h5,
.site-11 .h5 { font-family: var(--heading-font); font-weight: 700; font-size: 18px; }

.site-11 a {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 14px;
    color: var(--accent-color);
}

.site-11 a:hover {
    color: #999999;
}

/* PLP product card text */
.site-11 .list-product-brand {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 16px;
    color: #999999;
}

/* Scoped to .product (the PLP/search card anchor) on purpose. .product-name is reused for
   the PDP <h1> and the combo modal <h2>, so an unscoped rule here sized both of those to
   16px as well -- this block is only meant to describe the card. */
.site-11 .product .product-name {
    font-family: var(--heading-font);
    font-weight: 400;
    font-size: 16px;
    color: #333333;
}

.site-11 .product:hover .product-name {
    font-weight: 700;
    color: var(--accent-color);
}

/* .price = regular listed price; .price.price-color = active sale/clearance price */
.site-11 .price {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 16px;
    color: #333333;
}

.site-11 .price.price-color {
    color: #a20000;
}

/* struck-through original price shown next to a sale/clearance price */
.site-11 .product-msrp del {
    font-family: var(--heading-font);
    font-weight: 400;
    font-size: 16px;
    color: #999999;
    text-decoration: line-through;
}

/* "X% Off" savings label */
.site-11 .text-info {
    font-family: var(--heading-font);
    font-weight: 400;
    font-size: 16px;
    color: #333333;
}

/* Buttons */
.site-11 .btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    font-family: var(--heading-font);
    font-weight: 400;
    font-size: 14px;
    color: #fff;
}

.site-11 .btn-primary:hover,
.site-11 .btn-primary:focus,
.site-11 .btn-primary:not(:disabled):not(.disabled):active {
    background-color: #999999;
    border-color: #999999;
    color: #fff;
}

.site-11 .btn-outline-secondary {
    background-color: #fff;
    border-color: #666666;
    font-family: var(--heading-font);
    font-weight: 400;
    font-size: 14px;
    color: #666666;
}

.site-11 .btn-outline-secondary:hover,
.site-11 .btn-outline-secondary:focus,
.site-11 .btn-outline-secondary:not(:disabled):not(.disabled):active {
    background-color: #999999;
    border-color: #999999;
    color: #fff;
}

/* Right-align search + cart icons + Find a Dealer in the main nav row. Same root cause
   as Macna: .section-nav-item (logo, nav-full-search, the Find a Dealer link,
   section-nav-last) all get flex-grow:1 from the shared base CSS, stretching those boxes
   instead of actually right-aligning their contents. Kill the growth on all of them, then
   push the icon group as a unit via margin-left:auto on whichever search variant is
   visible. */
.site-11 .section-nav .section-nav-item {
    flex-grow: 0;
}

.site-11 .section-nav .nav-min-search,
.site-11 .section-nav .nav-full-search {
    margin-left: auto;
}

.site-11 .btn-gold {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

.site-11 .btn-gold:hover,
.site-11 .btn-gold:focus,
.site-11 .btn-gold:not(:disabled):not(.disabled):active {
    background-color: #999999;
    border-color: #999999;
    color: #fff;
}

/* "Write a review" and similar PDP links are <button class="btn btn-link">, not anchors, so
   the site-wide `.site-11 a` bold never reached them and .btn-link's own
   font-weight: normal won out. */
.site-11 .btn-link {
    color: var(--main-color);
    font-weight: 700;
}

.site-11 .btn-check:checked + .btn-option {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* Horizontal image dropdown for Shop Balance Bikes, matching Kriega's own .dropdown-wide
   pattern (this layout isn't in the shared base CSS -- each brand that wants it defines
   its own .site-N .navbar .dropdown-wide override). top:136px assumes the same pre-nav +
   100px main-nav stack height as Kriega; verify/adjust once visible. */
@media (min-width: 992px) {
    .site-11 .navbar {
        position: static;
    }

    .site-11 .navbar .dropdown-wide {
        position: absolute;
        width: 100%;
        /* Offsets differ between the two dropdowns on purpose: this one is positioned
           against .navbar (set static above) so it measures from the top of the header,
           while the normal .dropdown-menu below resolves against its own .nav-item
           .dropdown parent and so needs the smaller value. */
        top: 143px;
        left: 0;
        background-color: #F2F2F2;
        flex-wrap: wrap;
        align-items: center;
        display: none;
        /* Inset from the left edge so the first tile doesn't sit flush against it. Inside
           the 100% width rather than added to it -- box-sizing: border-box is global. */
        padding-left: 20px;
    }

    .site-11 .navbar .dropdown-wide.show {
        display: flex;
    }

    .site-11 .dropdown-wide .dropdown-item {
        /* Deliberately unconstrained: a fixed width made the longer names (e.g. 'Triumph
           Speed Triple 1200 RS Balance Bike') wrap while the short ones didn't, which read
           as inconsistent. Each item sizes to its own name instead, inheriting Bootstrap's
           white-space: nowrap. Safe because the item count is capped in kiddimotoNav() and
           this dropdown only renders on desktop; .dropdown-wide keeps flex-wrap: wrap as a
           backstop if the row ever does run out of room.
           width/flex are the load-bearing bit: Bootstrap's .dropdown-item is width: 100%,
           which as a flex child claims the whole row and stacks them vertically. auto + no
           grow/shrink makes each one size to its own content instead. */
        width: auto;
        flex: 0 0 auto;
        /* The theme uppercases everything in a navbar dropdown (.navbar .dropdown-menu in
           site-compiled.css). Product names need their own casing preserved -- 'GP25' can't
           be reconstructed from an uppercased or capitalised string -- so render them as
           entered. Names are the client's to get right in the admin. */
        text-transform: none;
        text-align: center;
        margin: 5px;
        padding: 10px 10px 0;
    }

    .site-11 .dropdown-item-image img {
        /* Sized to the kmn dynamic image set (448x252), displayed at half that so it stays
           sharp on hi-dpi screens. Explicit dimensions rather than letting .img-fluid do
           height: auto -- object-fit then crops the square list_image fallback into the same
           16:9 box instead of squashing it, so a product without a nav_image still lines up
           with the ones that have one. */
        width: 224px;
        height: 126px;
        object-fit: cover;
        margin: 0 auto;
    }
}

/* Main nav item font size, matching Macna/Kriega's sizing */
.site-11 .main-navbar .navbar-nav .nav-link {
    font-size: 16px;
}

@media (min-width: 1200px) {
    .site-11 .main-navbar .navbar-nav .nav-link {
        font-size: 18px;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Nav link hover/active shouldn't be the default gold -- use the brand accent instead,
   matching Kriega's own choice of accent (not main-color) for this state */
.site-11 .main-navbar .navbar-nav .nav-link.active,
.site-11 .main-navbar .navbar-nav .nav-link:hover {
    color: var(--accent-color);
}

/* Logo sizing -- the image is very wide/short (614x83, ~7.4:1), so height:100% of the
   full nav bar made it enormous and overlapped the menu items. Capping the height keeps
   it proportionate; width follows via the real aspect ratio. */
.site-11 .main-nav-logo {
    height: 50px;
    width: auto;
    aspect-ratio: 614.04 / 82.97;
}

.site-11 .footer-logo {
    width: 200px;
    height: auto;
    aspect-ratio: 614.04 / 82.97;
}

/* .section-nav-main has a fixed width/max-width from the base theme (140px/250px), but
   the logo (at height:50px, aspect-ratio 614/83 -> ~370px wide) isn't constrained to fit
   inside it, so it overflows uncontained instead of sitting properly in its own box. */
.site-11 .section-nav-main {
    width: auto;
    max-width: none;
}

/* Background was defaulting to the base theme's #333 (dark), mismatched against
   Kiddimoto's white nav -- set to white, text stays #4c4c4c (same as Macna). */
/* Footer: one background for the whole thing, with the copyright bar inheriting it rather
   than carrying its own colour, so there's a single value to change. */
.site-11 .main-footer {
    background-color: #282828;
}

.site-11 .footer-copyright {
    background-color: transparent;
    color: #fff;
}

/* Footer links are white, picking up the brand orange only on hover. Scoped to .main-footer
   so it covers the footer link list, social icons and anything else added there, without
   touching links in the body of the site. */
.site-11 .main-footer a {
    color: #fff;
}

.site-11 .main-footer a:hover,
.site-11 .main-footer a:focus {
    color: var(--accent-color);
}

.site-11 .section-nav-main {
    margin: 0;
}

/* Find a Dealer link was wrapping to two lines / getting squished against search+cart
   despite plenty of room to the right of the menu items -- give it a floor. */
.site-11 .nav-find-a-dealer {
    min-width: 170px;
}

/* Desktop search icon +40% (16px ambient -> 22.4px) */
.site-11 .nav-min-search {
    font-size: 22.4px;
}

/* Mobile nav panel was covering the toggle button (same issue Macna/Kriega had) --
   offset it to start below the nav bar instead of the very top of the viewport. */
.site-11 .menu-wrap {
    top: 63px;
    min-height: calc(100vh - 63px);
}

/* Normal (non-wide) dropdown menus, e.g. Why Choose Us -- same layout-shift issue as
   Macna (dropdown wasn't absolutely positioned, so opening one grew the nav instead of
   overlaying it).
   The :not() matters: the wide menu carries BOTH classes (dropdown-menu dropdown-wide) and
   this selector is more specific than the .dropdown-wide rule above, so without it this
   top would win there too and drop the wide menu over the nav where it couldn't be closed. */
.site-11 .navbar-expand-xl .navbar-nav .dropdown-menu:not(.dropdown-wide) {
    position: absolute;
    top: 71px;
}

/* Mobile search icon -- same size as Macna's mobile search icon */
.site-11 .search-link {
    font-size: 29px;
}

/* Same fix as Macna's mobile logo, applied universally (not just <992px): flex items
   default to min-width:auto, which floors them at their intrinsic content size and
   blocks shrinking below that -- so at narrower widths (phones, and lower-end desktop
   widths where the nav items were wrapping to a second row) the logo held its full size
   instead of shrinking to make room. flex-basis gives the container an explicit starting
   size to shrink FROM (360px, slightly under the logos natural ~370px width); it only
   actually shrinks when space is tight, so full-width desktop is unaffected. The image
   just fills whatever box the container ends up being, with object-fit:contain keeping
   it proportional as it shrinks. */
.site-11 .section-nav-main {
    min-width: 0;
    flex-basis: 360px;
    flex-shrink: 1;
}

.site-11 .main-nav-logo {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

.site-11 .nav-find-a-dealer {
    color: #656565;
    font-size: 16px;
}

@media (min-width: 1200px) {
    .site-11 .nav-find-a-dealer {
        font-size: 18px;
    }
}

/* Bootstrap's own .navbar-expand-xl only switches .navbar-nav from column to row at its
   built-in 1200px breakpoint, but our hamburger toggle disappears at 992px (lg) -- so
   between 992-1200px the nav items were still stacking vertically (column), which is
   what was pushing 'Why Choose Us' below 'Shop Balance Bikes'. Match our own breakpoint. */
@media (min-width: 992px) {
    .site-11 .navbar-nav {
        flex-direction: row;
    }
}

/* Buttons are pill shaped across this site, per the brand button spec. 50rem matches
   Bootstrap's own .rounded-pill so it stays a pill at any button height. */
.site-11 .btn {
    border-radius: 50rem;
    /* 5px either side on top of the theme's 0.75rem, as calc so it tracks the base value
       rather than hard-coding the resolved px */
    padding-left: calc(0.75rem + 5px);
    padding-right: calc(0.75rem + 5px);
}

/* Footer social icons. Has to target .social-link (the <a>) rather than the surrounding
   .list-social-links <ul>: the generic `.site-11 a` rule from the Links type spec sets
   font-size 14px directly on the anchor, which beats anything inherited from the list, and
   also beats the social module's own 30px default. The Font Awesome <i> sizes off this. */
.site-11 .main-footer .social-link {
    font-size: 28px;
}

/* Space the icons out a little. em-based so it scales with the font-size above. Slightly
   tighter than the 0.5em sidi uses, which read as too airy at this icon size. */
.site-11 .main-footer .list-social-links .list-inline-item {
    margin: 0 0.4em;
}

/* An open dropdown gets .show on the parent .dropdown, which the theme colours gold via
   .navbar-light .navbar-nav .show > .nav-link -- a selector the earlier .active/:hover
   override didn't cover, so the trigger stayed gold while its menu was open. */
.site-11 .main-navbar .navbar-nav .show > .nav-link,
.site-11 .main-navbar .navbar-nav .active > .nav-link,
.site-11 .main-navbar .navbar-nav .nav-link.show {
    color: var(--accent-color);
}

/* Large buttons (Add to Cart etc.) get proportionally more room than the 5px added to
   regular .btn, on top of the theme's 1.5rem. Tune the 15px if it's too much. */
.site-11 .btn-lg {
    padding-left: calc(1.5rem + 15px);
    padding-right: calc(1.5rem + 15px);
}

/* Reserve the logo's horizontal space at lg and up so the nav items render in their final
   position instead of sitting left-aligned and jumping right once the SVG paints. Purely
   a layout-shift (CLS) measure for PageSpeed -- desktop only, since below 992px the logo
   is allowed to shrink to keep the search/dealer/cart icons on screen. */
@media (min-width: 992px) {
    .site-11 .main-nav-logo {
        min-width: 308px;
    }
}

/* PLP "New" flag. The base colour lives in helmet.css (gold); every brand that wants
   its own overrides it in its own stylesheet, same as sidi/shoei/noru/cortech do. */
.site-11 .flag-new {
    background-color: #0211a2;
}

/* Mega menu and Why Choose Us links read as plain body text and only become the brand
   orange on hover -- the inverse of this site's default link styling, so the generic
   `.site-11 a` rule has to be overridden on both weight and colour. The hover
   background the theme adds is dropped too; with an image in the item it read as a
   panel appearing behind the tile.
   Hover changes colour only. Going to 700 re-measured the text and shifted it sideways,
   which read as the item twitching under the cursor. */
.site-11 .navbar .dropdown-item {
    color: #333;
    font-weight: 400;
}

.site-11 .navbar .dropdown-item:hover,
.site-11 .navbar .dropdown-item:focus {
    color: var(--accent-color);
    background-color: transparent;
}

/* Breathing room above the PLP title now the breadcrumb row above it is gone. */
.site-11 .products-heading {
    margin-top: 1.5rem;
}

/* Review stars. .display-star is the <a> wrapping the rating, which the site-wide
   `.site-11 a` rule was otherwise tinting orange. Deliberately NOT targeting .review-star:
   that class sits on the same element as .faint-star (the empty-state stars shown when a
   product has no reviews yet), which should keep its own muted colour. */
.site-11 .display-star,
.site-11 svg.review-star-on {
    color: #0211a2;
}

/* ALT IMAGES / MULTIMEDIA sits above the thumbnail strip but inherits
   .detail-option-heading's `padding: 0 24px`, so it looked indented rather than lined up
   with the thumbs. Scoped to the carousel column so the other option headings (Quantity
   etc.) keep their padding. */
.site-11 .detail-carousel .detail-option-heading {
    padding-left: 0;
}

/* The search sits between the logo and the nav links, all in one flex row. At 400px
   (the base .autosearch-wrap width) there wasn't room for all three around 1400px and
   the nav ran under the logo. Scoped to the same >=992px range the base rule uses;
   max-width: 30vw is inherited and doesn't bite at this width. */
@media screen and (min-width: 992px) {
    .site-11 .autosearch-wrap {
        width: 350px;
    }
}