/* ==========================================================================
 * Drog - Банери Pro — storefront styles (v1.8.1)
 *
 * Strict dimensions for each position to prevent oversized images from
 * blowing up the page layout. All wrappers have explicit max-heights;
 * images use object-fit to fit gracefully even when admin uploads images
 * with wrong aspect ratios.
 *
 * Recommended image sizes:
 *   above_h1:              1920×400 (rendered at full container width × 200px tall)
 *   below_h1:              1920×320 (160px tall)
 *   above_products:        1700×280 (140px tall)
 *   in_sidebar:            480×600  (240×300 max)
 *   in_subcategories_grid: 240×160  (fits 90px tile slot, displayed contain)
 *   product_photo:         600×120  (130×130 card, absolute-positioned bottom-left)
 *   product_info:          300×100  (info-blocks card next to Delivery)
 *   product_above_attrs:   1200×140 (full-width band above Specs)
 *
 * v1.8.0:
 *   - Centralized CSS variable defaults in `:root` so child selectors
 *     don't need to repeat fallback values.
 *   - Dropped `.uhl-banner--product-page` (legacy variant, position removed
 *     in v1.8.0 admin model).
 *   - Dropped data-badge selectors (feature was already UI-removed in
 *     v1.6.10; v1.8.0 drops the column entirely).
 *
 * v1.8.1:
 *   - `--uhl-border-style` variable wired into all bordered selectors so
 *     admin's solid/dashed/dotted/double choice actually renders.
 *   - Hover animations: keyframes `uhl-pulse`, `uhl-glow` + selectors
 *     `.uhl-banner[data-hover="X"]:hover`. Wrapper carries data-hover from
 *     PHP wrapperAttrs(). Default behaviour (lift) is the existing
 *     per-position :hover transform — no override needed.
 *   - Sticky-nav tab redesigned as a "boxed CTA" matching the user's
 *     screenshot: 1px border-currentColor + 4px radius + padding 4px/8px +
 *     filled-background hover state. Drops most inline !important on PHP side.
 *
 * NOTE on `!important`: kept ONLY on critical positioning rules for
 * `.uhl-banner--product-photo` (theme's `position: sticky` parent + flex
 * children make absolute positioning fragile without override). Other
 * `!important` declarations live inline (PHP textStyle/styleVars) — also
 * needed because theme's `.prod_images .text { color !important }` rules
 * leave no specificity-based path. v1.8.1 trimmed nav-tab inline !important.
 * ========================================================================== */

/* ---------- v1.8.0: Central CSS variable defaults ----------
   Per-banner overrides come via inline `style="--uhl-accent: #xxx; ..."`
   emitted by ModelExtensionModuleUhlCategoryBanner::styleVars(). The defaults
   below kick in when admin hasn't set a value for that variable. */
:root {
    --uhl-accent-default:     #ff8c42;
    --uhl-text-color-default: #ffffff;
    --uhl-bg-color-default:   #ffffff;
    --uhl-border-width-default:  2px;
    --uhl-border-radius-default: 8px;
    --uhl-font-size-default:     13px;
    --uhl-shadow-default:        0 2px 10px rgba(0, 0, 0, 0.12);
}

/* ---------- Common wrapper ---------- */
.uhl-banner {
    background: #fff;
    margin-bottom: 0.375rem;
    overflow: hidden;
    position: relative;
}

.uhl-banner__link {
    display: block;
    text-decoration: none;
    color: inherit;
    line-height: 0;
    transition: opacity .15s ease;
}

.uhl-banner__link:hover,
.uhl-banner__link:focus {
    opacity: .9;
    text-decoration: none;
    color: inherit;
}

.uhl-banner__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.uhl-banner__text {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    color: #333;
    font-weight: 500;
}

.uhl-banner__link:hover .uhl-banner__text {
    color: #ff8c42;
}

/* ---------- Position-specific STRICT DIMENSIONS ---------- */

/* v1.6.8: shared wide-banner styles.
   - object-fit: contain — admin uploads ANY aspect ratio, no ugly crop.
   - Light background fills letterbox area.
   - Desktop: align with content column (skip sidebar 25%).
   - Mobile (<768px): full width — sidebar collapses there. */
.uhl-banner--above-h1,
.uhl-banner--below-h1,
.uhl-banner--above-products {
    width: 100%;
    margin-bottom: 1rem;
    background: #fafafa;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.uhl-banner--above-h1 .uhl-banner__link,
.uhl-banner--below-h1 .uhl-banner__link,
.uhl-banner--above-products .uhl-banner__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
.uhl-banner--above-h1 .uhl-banner__img,
.uhl-banner--below-h1 .uhl-banner__img,
.uhl-banner--above-products .uhl-banner__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}
.uhl-banner--above-h1 .uhl-banner__text,
.uhl-banner--below-h1 .uhl-banner__text,
.uhl-banner--above-products .uhl-banner__text {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0, 0, 0, 0.55);
    /* v1.7.3: was hardcoded #fff — now honors admin text-color picker */
    color: var(--uhl-text-color, #fff);
    padding: 8px 16px;
}

/* Per-position heights */
.uhl-banner--above-h1       { height: 200px; max-height: 200px; }
.uhl-banner--below-h1       { height: 160px; max-height: 160px; }
.uhl-banner--above-products { height: 140px; max-height: 140px; margin-bottom: 0.375rem; }

/* v1.6.10: removed v1.6.8's margin-left:25% / width:75% override — broke layouts
   without a sidebar (col-sm-12 pages got squashed into 75% column). Above-H1 /
   Below-H1 banners now use the FULL container width — promo billboard style.
   If admin wants content-aligned placement, use the "above_products" position
   instead, which is naturally inside the content column. */

/* Sidebar: vertical card with accent border, auto height (v1.8.18 redesign).
   Previous version used max-height:300px on container + max-height:280px on image,
   which left only 20px for text — text got clipped by parent's overflow:hidden.
   New approach: NO fixed/max heights on container; image bounded to 180px with
   object-fit:contain (no crop), text always visible below with comfortable
   padding, accent border uses admin's color picker via --uhl-accent CSS var. */
.uhl-banner--sidebar {
    width: 100%;
    max-width: 240px;
    margin: 0 auto 1rem;
    background: var(--uhl-bg-color, #ffffff);
    border: 2px solid var(--uhl-accent, #ff8c42);
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.uhl-banner--sidebar:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.uhl-banner--sidebar .uhl-banner__link {
    display: block;
    padding: 12px 12px 14px;
    text-decoration: none;
    color: inherit;
    line-height: 1.3;  /* override base line-height:0 so text breathes */
}
.uhl-banner--sidebar .uhl-banner__img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 180px;
    margin: 0 auto 10px;
    object-fit: contain;
    object-position: center;
}
.uhl-banner--sidebar .uhl-banner__text {
    display: block;
    position: static;
    padding: 0;
    background: transparent;
    color: var(--uhl-text-color, #1e1e1e);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    word-wrap: break-word;
}
.uhl-banner--sidebar .uhl-banner__link:hover .uhl-banner__text {
    color: var(--uhl-accent, #ff8c42);
}

/* ---------- Special: tile inside .sub_categories__body grid ---------- */
/* Inherits .sub_categories__item base sizing (matches siblings),
   adds orange accent + PROMO badge. Image displayed via object-fit:contain
   so any uploaded image shows fully without cropping. */

/* v1.8.3: tile uses CSS variables for accent + bg.
   PHP also emits inline `outline:`, `background:`, `--uhl-text-color` so admin
   choices override at specificity-level. CSS defaults below kick in only when
   no inline override (e.g. tiles rendered by something other than our PHP). */
.sub_categories__item.uhl-banner-tile {
    position: relative;
    outline: 2px solid var(--uhl-accent, var(--uhl-accent-default));
    outline-offset: -2px;
    background: var(--uhl-bg-color, #ffffff);
    border-radius: 2px;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sub_categories__item.uhl-banner-tile:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transform: translateY(-2px);
}

/* ============== v1.3.0: Slider (Swiper) ============== */
.uhl-banner-slider {
    width: 100%;
    margin-bottom: 0.375rem;
    position: relative;
    overflow: hidden;
}
.uhl-banner-slider .swiper-wrapper { align-items: stretch; }
.uhl-banner-slider .swiper-slide { display: block; height: auto; }
.uhl-banner-slider .uhl-banner { margin-bottom: 0; }
.uhl-banner-slider .swiper-pagination {
    position: absolute;
    bottom: 8px;
    text-align: center;
    width: 100%;
    z-index: 10;
}
.uhl-banner-slider .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.65;
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    margin: 0 3px;
}
.uhl-banner-slider .swiper-pagination-bullet-active {
    background: #ff8c42;
    opacity: 1;
}

/* ============== v1.3.0: Countdown timer ============== */
.uhl-banner__countdown {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    padding: 4px 8px;
    border-radius: 3px;
    z-index: 3;
    letter-spacing: 0.5px;
    pointer-events: none;
    line-height: 1.2;
}
.uhl-banner__countdown--ended {
    background: rgba(120, 120, 120, 0.7);
    text-transform: uppercase;
    font-size: 10px;
}
.sub_categories__item.uhl-banner-tile .uhl-banner__countdown {
    top: 4px;
    left: 4px;
    font-size: 10px;
    padding: 2px 5px;
}

/* ============== v1.3.0: WYSIWYG (summernote) HTML inside banner text ============== */
.uhl-banner__text strong,
.uhl-banner__text b { font-weight: 700; }
.uhl-banner__text em,
.uhl-banner__text i { font-style: italic; }
.uhl-banner__text u { text-decoration: underline; }
.uhl-banner__text br + br { display: none; }
.uhl-banner__text p { margin: 0; padding: 0; display: inline; }
.uhl-banner__text * { line-height: 1.3; }
.sub_categories__item.uhl-banner-tile span p { margin: 0; padding: 0; display: inline; }
.sub_categories__item.uhl-banner-tile span strong { font-weight: 700; color: inherit; }

/* v1.8.0: dropped `.uhl-banner--product-page` rules — position removed.
   Migration: existing banners with that position get auto-folded to
   `product_info` by installSchema(). */

.sub_categories__item.uhl-banner-tile a {
    background: transparent;
    padding: 15px;
}

.sub_categories__item.uhl-banner-tile a:hover,
.sub_categories__item.uhl-banner-tile a:focus {
    text-decoration: none;
}

.sub_categories__item.uhl-banner-tile img {
    width: auto !important;
    max-width: 100%;
    max-height: 90px;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* v1.8.3: text color uses CSS variable (PHP also emits inline color on the span
   for highest specificity — this rule kicks in only when no inline override). */
.sub_categories__item.uhl-banner-tile span {
    color: var(--uhl-text-color, #c25410);
    font-weight: 600;
    text-align: center;
    margin-top: 8px;
    display: block;
}

/* v1.6.10: corner badge rule removed — feature dropped from UI.
   data-badge attribute no longer emitted, so this selector would never match. */

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .uhl-banner--above-h1,
    .uhl-banner--above-h1 .uhl-banner__link { height: 160px; max-height: 160px; }
    .uhl-banner--below-h1,
    .uhl-banner--below-h1 .uhl-banner__link { height: 130px; max-height: 130px; }
    .uhl-banner--above-products,
    .uhl-banner--above-products .uhl-banner__link { height: 110px; max-height: 110px; }
}

@media (max-width: 575px) {
    .uhl-banner--above-h1,
    .uhl-banner--above-h1 .uhl-banner__link { height: 120px; max-height: 120px; }
    .uhl-banner--below-h1,
    .uhl-banner--below-h1 .uhl-banner__link { height: 100px; max-height: 100px; }
    .uhl-banner--above-products,
    .uhl-banner--above-products .uhl-banner__link { height: 90px; max-height: 90px; }
    .uhl-banner__text { font-size: 12px; padding: 6px; }
    .sub_categories__item.uhl-banner-tile img { max-height: 70px; }
}

/* ============== v1.7.0: PRODUCT PAGE positions ============== */

/* product_photo: lives inside .prod_images sticky-element, under the gallery.
   Compact wide image with subtle background. */
/* v1.7.1: product_photo — small SQUARE card at bottom of .prod_images,
   matching the "Калькулятор СК" preview the user expected. Accent color
   pulled from inline `--uhl-accent` so admin's color-picker actually works. */
/* v1.7.3: product_photo — admin-tunable border/bg/radius/shadow via CSS variables */
/* v1.7.7 CRITICAL FIX: removed `.prod_images.sticky-element { position: relative; }`
   It was overriding the theme's `position: sticky` (specificity 0,2,0 > 0,1,0).
   Theme JS sets inline `top: 103px` for the sticky behavior. With sticky overridden
   to relative, that `top: 103px` became a real positional offset — shifting the
   entire photo gallery down ~103px → that was the visible "gap" the user kept
   complaining about. `position: sticky` is itself a containing block for absolute
   children per CSS spec, so the banner inside still positions correctly without
   our parent rule. */
.uhl-banner--product-photo {
    width: 130px;
    height: 130px;
    background: var(--uhl-bg-color, var(--uhl-bg-color-default));
    border: var(--uhl-border-width, var(--uhl-border-width-default)) var(--uhl-border-style, solid) var(--uhl-accent, var(--uhl-accent-default));
    border-radius: var(--uhl-border-radius, var(--uhl-border-radius-default));
    overflow: hidden;
    box-shadow: var(--uhl-shadow, var(--uhl-shadow-default));
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.uhl-banner--product-photo:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}
.uhl-banner--product-photo .uhl-banner__link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
}
.uhl-banner--product-photo .uhl-banner__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 8px;
    padding-bottom: 26px;
}
.uhl-banner--product-photo .uhl-banner__text {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: var(--uhl-accent, #ff8c42);
    color: var(--uhl-text-color, #fff);
    padding: 4px 6px;
    text-align: center;
    /* v1.7.3: font-size from admin (with sensible cap for tiny corner banner) */
    font-size: min(var(--uhl-font-size, 11px), 14px);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* v1.7.6: force absolute corner with !important so theme's flex/grid can't push us
   into normal flow (which caused the visible "top margin" gap the user complained about). */
@media (min-width: 768px) {
    .uhl-banner--product-photo {
        position: absolute !important;
        bottom: 12px !important;
        left: 12px !important;
        right: auto !important;
        top: auto !important;
        z-index: 5 !important;
        margin: 0 !important;
    }
}
@media (max-width: 767px) {
    .uhl-banner--product-photo {
        width: 110px !important;
        height: 110px !important;
        margin: 0 !important;
        position: absolute !important;
        bottom: 8px !important;
        left: 8px !important;
        z-index: 5 !important;
    }
}

/* product_info: card matches the existing .info-blocks__item style (delivery / payment / exchange).
   v1.7.1 — border + hover-shadow use admin-picked accent color. */
/* v1.7.3: admin-tunable border + bg + shadow + radius */
.info-blocks__item.uhl-banner.uhl-banner--info-block {
    border: var(--uhl-border-width, var(--uhl-border-width-default)) var(--uhl-border-style, solid) var(--uhl-accent, var(--uhl-accent-default));
    background: var(--uhl-bg-color, #fff7ee);
    border-radius: var(--uhl-border-radius, var(--uhl-border-radius-default));
    box-shadow: var(--uhl-shadow, none);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.info-blocks__item.uhl-banner.uhl-banner--info-block:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transform: translateY(-2px);
}
.info-blocks__item.uhl-banner.uhl-banner--info-block .uhl-banner__text {
    font-size: var(--uhl-font-size, 13px);
}
.info-blocks__item.uhl-banner--info-block .uhl-banner__link {
    display: flex;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
    align-items: center;
    gap: 12px;
    padding: 12px;
}
.info-blocks__item.uhl-banner--info-block .uhl-banner__icon img {
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
}
.info-blocks__item.uhl-banner--info-block .uhl-banner__content {
    flex: 1;
}
.info-blocks__item.uhl-banner--info-block .uhl-banner__text {
    color: var(--uhl-accent, #ff8c42);
    font-weight: 600;
}

/* product_above_attributes: wide promo above Характеристики section.
   v1.7.1 — accent color border + bottom bar so admin color picker works. */
/* v1.7.3: admin-tunable border + bg + shadow + radius */
.uhl-banner--product-above-attributes {
    width: 100%;
    margin-bottom: 16px;
    background: var(--uhl-bg-color, var(--uhl-bg-color-default));
    border: var(--uhl-border-width, var(--uhl-border-width-default)) var(--uhl-border-style, solid) var(--uhl-accent, var(--uhl-accent-default));
    border-radius: var(--uhl-border-radius, var(--uhl-border-radius-default));
    overflow: hidden;
    position: relative;
    height: 140px;
    max-height: 140px;
    box-shadow: var(--uhl-shadow, 0 2px 6px rgba(0, 0, 0, 0.05));
}
.uhl-banner--product-above-attributes .uhl-banner__link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
}
.uhl-banner--product-above-attributes .uhl-banner__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.uhl-banner--product-above-attributes .uhl-banner__text {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: var(--uhl-accent, #ff8c42);
    /* v1.7.3: honor text-color picker (was #fff hardcoded) */
    color: var(--uhl-text-color, #fff);
    padding: 8px 16px;
    font-weight: 600;
}

/* product_sticky_nav_tab: extra <a> in .prod_nav__info_row.
   v1.8.5 — text-only boxed CTA (no SVG, no image — render method dropped them).
   Adds !important on critical visual props because theme often has its own
   `.prod_nav__info_row a { ... }` rule at equal/higher specificity. */
.prod_links__item.uhl-banner__nav-tab {
    color: var(--uhl-accent, var(--uhl-accent-default)) !important;
    border: 1px solid currentColor !important;
    border-radius: 4px !important;
    padding: 4px 10px !important;
    margin: 0 4px !important;
    font-weight: 700 !important;
    font-size: var(--uhl-font-size, 13px) !important;
    line-height: 1.2 !important;
    display: inline-block !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    vertical-align: middle !important;
}
/* Hide any decorative ::before content the theme may add (★, bullets, etc.) */
.prod_links__item.uhl-banner__nav-tab::before { content: none !important; }
.prod_links__item.uhl-banner__nav-tab__label { line-height: 1; }
.prod_links__item.uhl-banner__nav-tab:hover,
.prod_links__item.uhl-banner__nav-tab:focus {
    /* Invert on hover: filled background in accent color, white text. */
    background-color: var(--uhl-accent, var(--uhl-accent-default)) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* ============== v1.8.1: HOVER ANIMATIONS via data-hover attribute ==============
   The wrapper carries data-hover="lift|pulse|glow|none". Each value enables a
   distinct keyframe or transition. Default (no attribute) falls back to the
   existing transform-on-hover already declared per position. */
@keyframes uhl-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.025); }
}
@keyframes uhl-glow {
    0%, 100% { box-shadow: 0 0 0 0 var(--uhl-accent, var(--uhl-accent-default)); }
    50%      { box-shadow: 0 0 0 6px transparent; }
}
.uhl-banner[data-hover="pulse"]:hover { animation: uhl-pulse 1.2s ease-in-out infinite; }
.uhl-banner[data-hover="glow"]:hover  { animation: uhl-glow  1.4s ease-in-out infinite; }
.uhl-banner[data-hover="none"]:hover  { transform: none; box-shadow: var(--uhl-shadow, var(--uhl-shadow-default)) !important; }
/* "lift" is the existing :hover transform on each .uhl-banner--X — no override needed. */

/* Mobile shrink */
@media (max-width: 575px) {
    .uhl-banner--product-photo { width: 60%; }
    .uhl-banner--product-above-attributes { height: 100px; max-height: 100px; }
}