/* Elite Force product subtemplate: product detail page. */
/* Elite Force - product detail page styles (J2Commerce 6) */

/*
 * Item 1/2/6/7 (parity review): the product-detail wrapper already carries
 * data-bs-theme="light" (see templates/eliteforce/html/com_j2commerce/
 * templates/superstore/view.php) so every J2C theme variable inside it is
 * correctly re-scoped to the light palette - but nothing actually PAINTS a
 * light surface, so a dark ancestor background could still show through
 * underneath (e.g. if the site-wide theme default ever reverts to dark for
 * this page). Painting the wrapper itself with the (correctly scoped) body
 * colors keeps title/SKU/short-description/icons legible either way.
 *
 * NOTE: this rule previously also carried a negative-margin/padding "bleed"
 * meant to paint through the surrounding <section class="py-5"> gutter for
 * a dark ancestor background. custom.js now keeps <html data-bs-theme=
 * "light"> for the whole body.com_j2commerce page, so that gutter is
 * already light and the bleed no longer has anything to paint through - it
 * only pulled this div (and everything in it: title, gallery, cart row) up
 * by 3rem inside its flex-item ancestor `.shop-component` (a `.row > *`,
 * and flex items are a margin-collapse boundary - see .row below - so the
 * -3rem never reached the section's own padding, it just shifted this div
 * up within `.shop-component`), producing exactly the too-high position
 * reported. Removed; the section's own `py-5` + this div's own `pt-5` now
 * supply the top gap, matching live's spacing.
 */
.j2commerce-single-product[data-bs-theme="light"] {
    background-color: var(--nl-body-bg);
    color: var(--nl-body-color);
}

/*
 * Item 1 (parity review, round 4): live's price span is flat -
 * `<span class="sale-price">$119.99</span>` - and inherits block-level
 * sizing from being a direct child of the `d-flex` price row. Core's
 * displayPrice() (administrator/.../ProductHelper.php, out of scope to
 * edit) always wraps the price text in its own
 * `<span class="j2commerce-product-price">`, one level deeper than the
 * flex row, so it's never itself blockified by the flex context and stays
 * a normal inline span with auto height - which is what shrank the whole
 * price row (and, per the audit, the section below it by ~18px). Forcing
 * both spans to block reproduces live's sizing without touching core.
 */
.j2commerce-single-product.detail .product-price-container .sale-price,
.j2commerce-single-product.detail .product-price-container .sale-price .j2commerce-product-price {
    display: block;
}

/*
 * Item 2/3 (parity review): the live reference gallery has no pagination
 * dots, shows desaturated inactive thumbnails, and outlines only the active
 * thumbnail in the site's real accent orange. `var(--nl-primary)` cannot be
 * used for that outline here: theme.css redefines --nl-primary to a red
 * (#f55266) on ANY element carrying data-bs-theme="light" - including this
 * div - and inheritance carries that red down to every descendant. The
 * on-page "Add to Cart" button only stays orange because olive.css
 * re-declares --nl-primary:#FBB040 locally on .btn-primary before consuming
 * it; the same self-declare-and-consume pattern is used below.
 */
.j2commerce-product-image .swiper-pagination {
    display: none !important;
}

.j2commerce-product-image .swiper-thumbs .swiper-slide {
    border: 0 !important;
    filter: grayscale(85%) !important;
    opacity: 0.85 !important;
    transition: filter 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.j2commerce-product-image .swiper-thumbs .swiper-slide.swiper-slide-thumb-active {
    --nl-primary: #FBB040;
    border: 2px solid var(--nl-primary) !important;
    filter: none !important;
    opacity: 1 !important;
}

/*
 * Item 4/5 (parity review): give the quantity stepper's +/- buttons a
 * visible fill so they read as buttons (matching the live compact
 * input-group look) instead of blending into the count-input's white
 * background. The border-color/size/hover-active rules below are ported
 * from the live page's own inline `.superstore{...}` style block (from the
 * legacy app_newline plugin) - the only declarations in that block
 * that still affect anything, since every other property it sets
 * (--j2c-primary-btn-bg, --cassiopeia-color-primary, --nav-link-hover-color,
 * --link-hover-color, --btn-active-bg/-border-color, --bs-pagination-hover-
 * color) uses Cassiopeia/legacy naming that nothing in theme.css,
 * custom_shop.css or olive.css consumes on this build - porting them would
 * add inert CSS custom properties only. --nl-border-color IS consumed here
 * (theme.css hardcodes #cad0d9 for the same rule instead), so that one
 * declaration is carried across.
 */
.j2commerce-single-product .count-input {
    max-width: 8.5rem;
    border-color: var(--nl-border-color);
}

.j2commerce-single-product .count-input .btn-icon {
    background-color: var(--nl-tertiary-bg);
}

.j2commerce-single-product .count-input .btn-icon:hover:not(:disabled) {
    background-color: var(--nl-secondary-bg);
}

.j2commerce-single-product .count-input .btn-icon.btn-lg {
    --nl-btn-size: 3.25rem;
    --nl-btn-hover-bg: var(--nl-border-color);
    --nl-btn-active-bg: var(--nl-border-color);
}

/*
 * Item 4 (parity review): the live "DETAILS" accordion is plain - thin
 * item borders, a chevron indicator, no active-row background fill.
 *
 * The custom-property override this rule used to rely on (redeclaring
 * --nl-accordion-btn-icon/-active-icon on #j2CommerceAccordion) never
 * changed the rendered icon, even though it wins the cascade for the
 * custom property itself (ID beats class, later stylesheet, no !important
 * anywhere to fight). Rather than keep chasing why the indirection isn't
 * taking effect, both pseudo-element rules are overridden directly with
 * !important, bypassing the variable entirely - this is the one thing
 * guaranteed to win regardless of which value the variable resolves to.
 */
#j2CommerceAccordion .accordion-button,
#j2CommerceAccordion .accordion-button:not(.collapsed) {
    background-color: transparent !important;
    box-shadow: none !important;
}

#j2CommerceAccordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23181d25'%3e%3cpath d='M3.8,7.9c0.4-0.4,1.1-0.4,1.5,0l6.7,6.7l6.7-6.7c0.4-0.4,1.1-0.4,1.5,0c0.4,0.4,0.4,1.1,0,1.5l-7.4,7.4c-0.4,0.4-1.1,0.4-1.5,0L3.8,9.4C3.3,9.1,3.3,8.4,3.8,7.9z'/%3e%3c/svg%3e") !important;
    transform: none !important;
}

#j2CommerceAccordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23181d25'%3e%3cpath d='M3.8,7.9c0.4-0.4,1.1-0.4,1.5,0l6.7,6.7l6.7-6.7c0.4-0.4,1.1-0.4,1.5,0c0.4,0.4,0.4,1.1,0,1.5l-7.4,7.4c-0.4,0.4-1.1,0.4-1.5,0L3.8,9.4C3.3,9.1,3.3,8.4,3.8,7.9z'/%3e%3c/svg%3e") !important;
    transform: rotate(-180deg) !important;
}

/*
 * Item 4, text color (parity review, round 4): the button text should
 * resolve to --nl-heading-color (#181d25, matching live exactly) via
 * --nl-accordion-btn-color/--nl-accordion-active-color, and no rule in
 * theme.css/custom_shop.css/olive.css redeclares either of those with a
 * different value anywhere reachable here - yet local rendered a blue
 * (rgb(15,36,77)) neither variable chain accounts for. As with the icon
 * above, forcing the literal color directly is the reliable fix.
 */
#j2CommerceAccordion .accordion-button,
#j2CommerceAccordion .accordion-button span {
    color: #181d25 !important;
}


/* Elite Force product subtemplate: product cards and module carousels. */
/* Elite Force - module styles: product carousels/cards (J2Commerce 6) */

/*
 * mod_j2commerce_products cards: match the live storefront's plain, borderless
 * card treatment. Scoped to .j2commerce-products-module (only present on the
 * module's own default.php/slider.php wrapper) so the category/tag listing
 * pages, which use a different wrapper (.j2commerce-product-list), are
 * untouched. !important is used deliberately: this narrow, module-scoped
 * selector is neutralizing sitewide Bootstrap utility classes (.border,
 * .fs-xs) and a template rule keyed off a mistyped ancestor class
 * (.j2commerce-product-module, singular, in custom_shop.css) that never
 * actually matches this module's real (plural) wrapper class.
 */
.j2commerce-products-module .product-card {
    box-shadow: none !important;
    background-color: transparent !important;
}

/*
 * Live borders grid module cards but leaves carousel cards borderless. The
 * layout's context test (item_simple.php / item_flexivariable.php, in both
 * list/category and list/tag) treats every module context alike ("module" ==
 * no border, rounded-0), so the border class that reaches category/tag
 * listing cards never reaches grid module cards either — fixed here in CSS,
 * not the layout PHP. Slider cards keep the border suppressed; grid cards
 * get live's border below.
 */
.j2commerce-products-slider .product-card {
    border: 0 !important;
}

/*
 * Grid module cards: live's border is 1px solid rgb(224,229,235) (#e0e5eb)
 * with a 2.25px radius (.125rem at this site's 18px root). The markup still
 * carries Bootstrap's !important .rounded-0 utility, so border-radius needs
 * !important to win; the border itself does not, since the slider-only rule
 * above no longer suppresses it here.
 */
.j2commerce-products-grid .product-card {
    border: 1px solid #e0e5eb;
    border-radius: .125rem !important;
}

.j2commerce-products-module .product-image {
    background-color: #fff;
}

/*
 * Dark-background module sections (moduleclass_sfx "bg-dark", e.g. the Ammo
 * carousel): the card has no background of its own (see above), so its text
 * sits directly on the dark section background and must be white to stay
 * legible, matching the live site.
 */
.bg-dark .j2commerce-products-module .product-card,
.bg-dark .j2commerce-products-module .product-card a,
.bg-dark .j2commerce-products-module .product-card .product-title,
.bg-dark .j2commerce-products-module .product-card .product-title a,
.bg-dark .j2commerce-products-module .product-card .sale-price,
.bg-dark .j2commerce-products-module .product-card .base-price,
.bg-dark .j2commerce-products-module .product-card .text-body-tertiary,
.bg-dark .j2commerce-products-module .product-card .text-body-secondary {
    color: #fff !important;
}

/*
 * Light-background module sections (moduleclass_sfx "bg-light", e.g. module 183
 * "Best Sellers") sitting inside a page using the dark color scheme: the card has
 * no background of its own (see above), so on a light section its text must stay
 * dark to read against that light background — even though the page around it is
 * dark-themed. This intentionally diverges from live (which has the same bug) per
 * explicit request: readability wins over byte-for-byte parity here.
 */
.bg-light .j2commerce-products-module .product-card,
.bg-light .j2commerce-products-module .product-card a,
.bg-light .j2commerce-products-module .product-card .product-title,
.bg-light .j2commerce-products-module .product-card .product-title a,
.bg-light .j2commerce-products-module .product-card .sale-price,
.bg-light .j2commerce-products-module .product-card .base-price,
.bg-light .j2commerce-products-module .product-card .text-body-tertiary,
.bg-light .j2commerce-products-module .product-card .text-body-secondary {
    color: #212529 !important;
}

/*
 * Slider layout: live runs the swiper track full-width inside its container and
 * places the nav arrows outside that container (in the page gutter), not inside a
 * reserved inner padding band — so the track (and therefore card images) matches
 * live's card width exactly. The arrows are pushed into negative-margin space
 * instead; see .swiper-button-prev/-next below.
 */
.j2commerce-products-slider {
    position: relative;
}

/* Live: 15px inner padding on the track, arrows inside it (27px wide, 9px from the edge). */
.j2commerce-products-slider .swiper {
    padding: 0 15px;
}

/*
 * Swiper navigation arrows: this Swiper build (v11+) draws the arrow as an
 * inline <svg class="swiper-navigation-icon"> that it injects into the
 * button at init time (vendor CSS: "svg{fill:currentColor}") — it is NOT a
 * font-glyph ::after like older Swiper versions. So the fix is to strip the
 * default circular button chrome and let that SVG render on its own,
 * colored via `color` (dark gray on light sections, white on dark ones),
 * rather than drawing a second, competing icon ourselves — that previous
 * approach produced the reported "circle + two overlapping arrows" look.
 * Positioned via negative margin so they sit outside the container (in the
 * page gutter) rather than reserving inner padding that would shrink the
 * swiper track — matching live, where the track runs the container's full
 * width. Shifted up from the card's vertical center to sit roughly over the
 * image area rather than the title/price row below it.
 */
.j2commerce-products-slider .swiper-button-next,
.j2commerce-products-slider .swiper-button-prev {
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    cursor: pointer;
    width: 27px;
    height: 30px;
    margin-top: 0 !important;
    top: 50% !important;
    transform: translateY(calc(-50% - 3.5rem));
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #495057;
}

.bg-dark .j2commerce-products-slider .swiper-button-next,
.bg-dark .j2commerce-products-slider .swiper-button-prev {
    color: #fff;
}

.j2commerce-products-slider .swiper-button-prev {
    left: 9px !important;
}

.j2commerce-products-slider .swiper-button-next {
    right: 9px !important;
}

@media (max-width: 991.98px) {
    /* No room in the gutter on narrower viewports — pull the arrows back onto
       the card track edge instead of letting them clip off-screen. */
    .j2commerce-products-slider .swiper-button-prev {
        left: 0.25rem !important;
    }

    .j2commerce-products-slider .swiper-button-next {
        right: 0.25rem !important;
    }
}

.j2commerce-products-slider .swiper-button-next:hover,
.j2commerce-products-slider .swiper-button-prev:hover {
    opacity: 0.7;
}

.j2commerce-products-slider .swiper-button-next:focus-visible,
.j2commerce-products-slider .swiper-button-prev:focus-visible {
    outline: 2px solid var(--bs-primary, #f5851f);
    outline-offset: 2px;
}

.j2commerce-products-slider .swiper-button-disabled {
    opacity: 0.35;
}

/* Flexivariable carousel cards: live renders the price as a normal-weight block. */
.j2commerce-products-module .product-type-flexivariable .product-price-container .j2commerce-product-price {
    display: block;
    font-weight: 400;
}

/* Filter sidebar rows: .form-check-input is sized in em, so the accordion body's
   smaller font shrank the product-filter boxes below the brand ones. Pin every
   filter control to the brand-row size and center it against its label. */
#productsideFilters .form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: 0;
}

#productsideFilters .form-check .form-check-input {
    float: none;
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
}

#productsideFilters .form-check .form-check-label {
    margin-bottom: 0;
}

/*
 * "Share This Item" social block (app_socialmedia plugin, tmpl/bootstrap5/
 * share.php - not editable here): match live's compact, uniform-icon
 * treatment. Live uses ONE icon color for every network; local's per-network
 * color comes from an INLINE style="color:..." on each icon span (set by the
 * plugin's own params), so overriding it needs !important.
 *
 * The other !important flags below (label font-weight/margin-right, row gap,
 * link padding, icon font-size) exist for the same reason as this one: each
 * is beating a Bootstrap utility class that is itself declared !important
 * (.fw-semibold, .me-2, .gap-2, .p-1, .fs-4 in theme.css). The
 * wrapper's margin-top/padding-top need no !important - raising the
 * selector's specificity to match the competing custom_shop.css rule
 * settles that one on its own.
 */
.j2commerce-single-product .j2c-social-share-wrapper {
    margin-top: 1.5rem;
    padding-top: 1rem;
}

.j2c-social-share-wrapper .j2c-social-share-label {
    font-size: 1rem;
    font-weight: 700 !important;
    color: rgb(34, 41, 52);
    margin-right: 1.5rem !important;
}

/* Icon row separation: gap alone supplies live's 1rem of clear space between
   icons - not stacked with the link's own padding (zeroed below). */
#j2commerce_app_shareButton {
    gap: 1rem !important;
}

.j2c-social-share-wrapper .j2c-share-link,
.j2c-social-share-wrapper .j2c-share-copy-link {
    display: inline-block;
    padding: 0 !important;
    border: 0;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
}

.j2c-social-share-wrapper .j2c-share-link:hover,
.j2c-social-share-wrapper .j2c-share-copy-link:hover,
.j2c-social-share-wrapper .j2c-share-link:focus,
.j2c-social-share-wrapper .j2c-share-copy-link:focus {
    text-decoration: none;
    box-shadow: none;
    opacity: .8;
}

.j2c-social-share-wrapper .j2c-share-link:focus-visible,
.j2c-social-share-wrapper .j2c-share-copy-link:focus-visible {
    outline: 2px solid rgb(47, 110, 213);
    outline-offset: 2px;
}

.j2c-social-share-wrapper .j2c-share-link span[class*="fa-"],
.j2c-social-share-wrapper .j2c-share-copy-link span[class*="fa-"] {
    color: rgb(47, 110, 213) !important;
    font-size: 1.125rem !important;
}

/*
 * Advanced-cart drawer compactness fixes (#j2c-advanced-cart). Scoped under
 * the drawer's own ID so specificity (1,2,0) beats the theme's
 * ".alert .btn-close" (0,2,0) and the plugin's own ".j2c-qty-btn"/
 * ".j2c-qty-input" (0,1,0) rules without !important - specificity alone
 * settles all three fixes below.
 */

/* Fix 1: ".j2c-drawer-alert.alert.alert-warning" measured at 101.4px tall.
   Measured cause: theme.css sets ".alert .btn-close { padding: 1.375rem 1rem }"
   (computed 24.75px 18px), which makes the close button a 63.4px-tall flex
   child - that, not the "Cart updated." text (30.4px), sets the alert's
   height. Shrinking the alert's own padding/type and the close button's
   padding/size brings it down to roughly 43px. */
#j2c-advanced-cart .j2c-drawer-alert {
    padding: .5rem .75rem;
    font-size: .875rem;
    line-height: 1.35;
    align-items: center;
}

#j2c-advanced-cart .j2c-drawer-alert .btn-close {
    padding: .25rem;
    width: 1rem;
    height: 1rem;
    background-size: 1rem auto;
    margin: 0;
    align-self: center;
}

/* Fix 2: ".j2c-qty-wrap" controls are oversized (buttons 36x36px, input
   45x36px, wrap 119x38px per advanced_cart.css). Scale down to a "-sm"
   equivalent. .btn-close above (27x27px with its content-box padding) and
   these .j2c-qty-btn buttons (27x27px) both stay at or above 24x24px to
   satisfy WCAG 2.2 SC 2.5.8 Target Size (Minimum) - do not shrink further. */
#j2c-advanced-cart .j2c-qty-btn {
    width: 1.5rem;
    height: 1.5rem;
    font-size: .8125rem;
}

#j2c-advanced-cart .j2c-qty-input {
    width: 2.25rem;
    height: 1.5rem;
    font-size: .8125rem;
}

/* Fix 3: ".j2c-drawer-item-name" sets no font-size in advanced_cart.css, so
   it inherits 20.25px/30.375px line-height and truncates the title too
   early at 267.5px wide. Shrink the type only - keep the existing
   single-line ellipsis truncation as-is. */
#j2c-advanced-cart .j2c-drawer-item-name {
    font-size: .875rem;
    line-height: 1.3;
}