.rs-theme-settings-area {
    display: none !important;
}

/* Services detail / content sections: bottom spacing comes from following blocks */
.rs-services-area {
    padding-bottom: 0 !important;
}

/* Retail page: limit brand item wrapper width */
.rs-elements-brand-area .rs-brand-item-wrapper {
    max-width: 650px;
}

/* Product category info form – inputs and selects should have white background */
.rs-info-form .form-control,
.rs-info-form .nice-select {
    background-color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   .rs-counter-area — Premium glass cards, all-white text.
   NO full-section overlay — background image shows through directly.
   All selectors scoped under .rs-counter-area.rs-counter-one.
   No HTML, dynamic bindings, or existing class names changed.
   ═══════════════════════════════════════════════════════════════════ */

/*
 * 1. Explicitly suppress any ::before overlay on the section itself so
 *    the background image is completely unmasked.
 */
.rs-counter-area.rs-counter-one::before {
    display: none !important;
}

/*
 * 2. Make the Bootstrap row stretch all columns to equal height.
 *    Safe for any number of dynamically rendered counter items.
 */
.rs-counter-area.rs-counter-one .row {
    align-items: stretch;
}

.rs-counter-area.rs-counter-one .row>[class*="col-"] {
    display: flex;
    flex-direction: column;
}

/*
 * 3. Glass card on each dynamic .rs-counter-item.
 *    flex: 1 fills the column → equal heights regardless of content.
 *    Works for any number of items (no nth-child used).
 */
.rs-counter-area.rs-counter-one .rs-counter-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;
    padding: 30px 24px 26px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .25s ease, box-shadow .25s ease, transform .22s ease;
}

.rs-counter-area.rs-counter-one .rs-counter-item:hover {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.20);
    transform: translateY(-3px);
}

/*
 * 4. Inner wrapper — flex column so number stays top, title stays bottom.
 */
.rs-counter-area.rs-counter-one .rs-counter-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/*
 * 5. Counter number + optional prefix + odometer digit spans — full white, bold.
 *    The odometer plugin injects .odometer-value / .odometer-digit inside the
 *    .rs-counter-number span at runtime, so those must also be forced white.
 */
.rs-counter-area.rs-counter-one .rs-counter-number,
.rs-counter-area.rs-counter-one .prefix,
.rs-counter-area.rs-counter-one .odometer-value,
.rs-counter-area.rs-counter-one .odometer-digit,
.rs-counter-area.rs-counter-one .odometer-digit-inner,
.rs-counter-area.rs-counter-one .odometer-digit-spacer,
.rs-counter-area.rs-counter-one .odometer-formatting-mark {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

/*
 * Prevent right-side clipping of the last odometer digit: the plugin's
 * overflow:hidden on .odometer-digit-inner can shave off pixels when the
 * bold digit glyph is wider than the spacer's reserved width.
 */
.rs-counter-area.rs-counter-one .odometer {
    padding-right: 0.12em;
}
.rs-counter-area.rs-counter-one .odometer .odometer-digit-inner {
    overflow: visible;
}

/*
 * 6. Number-wrapper separator line — subtle white.
 */
.rs-counter-area.rs-counter-one .rs-counter-number-wrapper {
    border-color: rgba(255, 255, 255, 0.22) !important;
}

/*
 * 7. Counter label / title — white, slightly softer for visual hierarchy.
 */
.rs-counter-area.rs-counter-one .rs-counter-title {
    color: rgba(255, 255, 255, 0.88) !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
    margin: 0;
}

/*
 * 8. Section heading / subtitle inside the counter area — white.
 */
.rs-counter-area.rs-counter-one .rs-section-title,
.rs-counter-area.rs-counter-one .rs-section-subtitle {
    color: #ffffff !important;
}

/*
 * 9. Mobile — compact padding; flex column stacks naturally.
 */
@media (max-width: 575px) {
    .rs-counter-area.rs-counter-one .rs-counter-item {
        padding: 22px 18px 20px;
        border-radius: 10px;
    }
}

/* Prevent language code (TR / EN) from wrapping mid-character */
.rs-header-call h6,
.rs-header-call h6 a {
    white-space: nowrap;
}

/* ── Desktop nav: hide any stray meanmenu expand buttons that might land
   inside the original (desktop) horizontal nav. We must NOT hide the
   expand button inside the mobile drawer — that's the "+" toggle the
   meanmenu plugin renders next to items with submenus, which is the
   canonical mobile-menu UX.                                              */
.rs-header-menu > a.mean-expand,
.rs-header-area .rs-header-menu a.mean-expand {
    display: none !important;
}

/* ────────────────────────────────────────────────────────────────────
   Desktop horizontal nav (.rs-header-menu .main-menu)
   ────────────────────────────────────────────────────────────────────
   Goal: every top-level <li> takes an EQUAL share of the available
   width — distributed like inline-block cells — and the inline
   dropdown chevron (.nav-dd-chevron) sits right after the link text
   (vertically centred when the text wraps onto multiple lines), so
   no large empty gap appears on the right when the items don't
   completely fill one line.

   Scope: only applies inside .rs-header-menu so it doesn't leak into
   the mobile drawer (.mean-container .mean-nav handles that separately
   above) or into other .main-menu instances in the codebase.
   ─────────────────────────────────────────────────────────────────── */
/* Let the menu container consume the entire remaining horizontal space
   between the logo (left) and the EN/hamburger group (right). The base
   theme only sets margin-inline-end:auto which leaves the menu's own
   width = sum of children. Adding flex:1 lets the menu spread, which
   in turn lets each equal-width <li> grow and avoids the empty gap on
   the right. */
.rs-header-area .rs-header-menu {
    flex: 1 1 auto;
    min-width: 0;
    /* Match the breathing room that exists on the left between the logo
       and the first menu item — push the last menu item away from the
       EN/hamburger group on the right by the same amount. */
    padding-inline-end: 40px;
}
.rs-header-menu .main-menu > ul {
    display: flex !important;
    flex-wrap: nowrap;
    width: 100%;
    align-items: stretch;
    /* space-between: items take natural widths, gaps between them are
       distributed equally across the container's full width.            */
    justify-content: space-between;
}
.rs-header-menu .main-menu > ul > li {
    /* flex:0 1 auto + min-width:0 — items take their natural single-line
       width when there's room, but can SHRINK below content width when
       the container is tight, which forces the text to wrap at word
       boundaries (never mid-word, see word-break:normal below).        */
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}
.rs-header-menu .main-menu > ul > li > a {
    /* display:block so inline children (text + .nav-dd-chevron) flow
       naturally and the chevron lands right after the last word of the
       (possibly wrapped) text.                                         */
    display: block !important;
    text-align: center;
    padding-inline: 4px !important;
    line-height: 1.3;
    /* Wrap only at word boundaries — never split a word mid-letter.
       white-space:normal lets long items like "Mümessillikler &
       Distribütörlükler" break to a 2nd line at the space when the
       viewport narrows, instead of forcing a tiny font to keep one
       line.                                                            */
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}
/* Hide the default ::after chevron (font-awesome \f107) — we use the
   inline <i class="nav-dd-chevron"> instead so it flows right after the
   last word of the (possibly wrapped) link text. */
.rs-header-menu .main-menu li.menu-item-has-children > a::after {
    display: none !important;
}

/* ── Tablet range (768-1199px) — keep desktop nav visible by shrinking
      logo and tightening padding. Long menu items (e.g. "Mümessillikler
      & Distribütörlükler") are allowed to wrap to a 2nd line at word
      boundaries (white-space:normal above) so the font doesn't have to
      become unreadably small. meanmenu activates only at ≤767px.      */
@media (min-width: 768px) and (max-width: 1199px) {
    .rs-header-area .rs-header-logo img,
    .rs-header-logo img {
        max-width: 150px !important;
    }
    .rs-header-area.rs-header-two .rs-header-left {
        padding-inline-end: 18px !important;
        margin-inline-end: 14px !important;
    }
    .rs-header-area .rs-header-menu {
        padding-inline-end: 18px;
    }
    .rs-header-menu .main-menu > ul > li > a {
        font-size: 15px !important;
        padding-block: 24px !important;   /* was 40px in main.css         */
        padding-inline: 3px !important;
        line-height: 1.25;
    }
    .rs-header-menu .main-menu li.menu-item-has-children > a .nav-dd-chevron {
        font-size: 11px;
        margin-inline-start: 4px;
    }
    .rs-header-area.rs-header-two .rs-header-right {
        gap: 16px !important;
    }
    .rs-header-call h6 {
        font-size: 14px !important;
    }
}
/* Inline chevron: sits in the text flow, vertically centred via
   vertical-align:middle, naturally appears at the END of the last text
   line — never gets stranded on its own row. */
.rs-header-menu .main-menu li.menu-item-has-children > a .nav-dd-chevron {
    display: inline !important;
    font-size: 12px;
    font-weight: 300;
    margin-inline-start: 6px;
    vertical-align: middle;
    pointer-events: none;
    line-height: 1;
}

/* Contact page: equal-height info boxes
   The row has Bootstrap's align-items-start applied inline,
   so we must override with !important and make the card fill
   the full column height.                                   */
.rs-contact-area .row.align-items-start {
    align-items: stretch !important;
}

.rs-contact-area .row>[class*="col-"] {
    display: flex;
    flex-direction: column;
}

.rs-contact-area .rs-contact-wrapper {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.lnkLogo {
    display: inline-block !important;
}

.lnkLogoWhite {
    display: none !important;
}

.rs-sticky .lnkLogo {
    display: none !important;
}

.rs-sticky .lnkLogoWhite {
    display: inline-block !important;
}

.rs-header-logo img {
    max-width: 200px;
}

.rs-footer-widget h6 {
    display: block;
    color: #ffffff;
    font-size: 1.9rem;
    display: block;
    margin-bottom: 10px;
    margin-top: 20px;
}

input[type="checkbox"].compare-check {
    display: block !important;
}

.rs-section-subtitle.has-theme-orange {
    color: #E30613;
    fill: #E30613;
}

.rs-section-subtitle.has-theme-orange svg path {
    fill: #E30613 !important;
}

.rs-footer-widget h6:first-child {
    margin-top: 0;
}

.rs-contact-seven .rs-contact-form {
    position: static;
    margin: 40px 0;
}

.rs-contact-eight .pre-circle-ripple::after {
    border: 3px solid #EA5501;
}

.rs-contact-eight .pre-circle-ripple::before {
    border-color: #E30613;
    background: #E30613 !important;
}

.rs-team-one.has-theme-light-blue .rs-team-content-box::before {
    background-color: #E30613;
}

.rs-team-one.has-theme-light-blue .rs-team-title a:hover {
    color: #E30613;
}

.rs-services-three.has-theme-orange .rs-services-item:hover .rs-services-number::before {
    background-color: #E30613;
}

.rs-services-three.has-theme-orange .rs-services-item:hover .rs-services-number::after {
    color: #E30613;
}

.rs-services-three.has-theme-orange .rs-services-item:hover .rs-text-btn {
    color: #E30613;
}

.rs-work-step-three .rs-work-step-number::before {
    background-color: #E30613;
}

.rs-services-three.has-theme-orange .rs-services-item:hover .rs-square-btn {
    background-color: #E30613;
}

.step-number .numbering-step {
    background-color: #E30613;
}

.rs-portfolio-six.has-theme-orange .rs-portfolio-text-btn a:hover {
    color: #E30613;
}

.rs-portfolio-six.has-theme-orange .rs-square-btn {
    background-color: #E30613;
}

.rs-contact-one.has-black {
    border-color: #E30613;
}

.rs-brand-two .rs-brand-thumb img {
    width: 120px;
}

.rs-counter-one .rs-counter-number,
.rs-counter-one .prefix {
    font-size: 80px;
}

#form-messages {
    margin-top: 16px;
}

.form-alert {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
    border: 1px solid transparent;
}

.form-alert--success {
    background: rgba(34, 197, 94, .12);
    border-color: rgba(34, 197, 94, .35);
    color: #15803d;
}

.form-alert--error {
    background: rgba(239, 68, 68, .12);
    border-color: rgba(239, 68, 68, .35);
    color: #b91c1c;
}

.form-alert--info {
    background: rgba(59, 130, 246, .10);
    border-color: rgba(59, 130, 246, .25);
    color: #1d4ed8;
}

:root {
    --accent: #E30613;
    --line: rgba(227, 6, 19, .28);
    --text: rgba(0, 0, 0, .92);
    --muted: rgba(0, 0, 0, .68);
    --cardRadius: 18px;
    --max: 1100px;
    --colGap: 56px;
}

/* container */
.timeline {
    width: min(var(--max), calc(100% - 40px));
    margin: 60px auto;
    position: relative;
    padding: 10px 0;
}

/* ortadaki ana çizgi */
.timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, transparent 0%, var(--line) 10%, var(--line) 90%, transparent 100%);
    pointer-events: none;
}

/* her item (desktop: 2 kolon) */
.tl-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--colGap);
    align-items: center;
    padding: 26px 0;
    min-height: 260px;
}

/* merkezde düğüm */
.tl-item::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #fff;
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 6px rgba(227, 6, 19, .12);
    pointer-events: none;
}

/* alternating */
.tl-item[data-side="left"] .tl-media {
    grid-column: 1;
}

.tl-item[data-side="left"] .tl-content {
    grid-column: 2;
}

.tl-item[data-side="right"] .tl-media {
    grid-column: 2;
}

.tl-item[data-side="right"] .tl-content {
    grid-column: 1;
    text-align: left;
}

/* medya kartı */
.tl-media {
    width: 100%;
    align-self: center;
}

.tl-media .img-wrap {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--cardRadius);
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
    background: rgba(0, 0, 0, .04);
}

.tl-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    /* sağ item'da tepeye kaçmayı engeller */
}

/* içerik */
.tl-content {
    position: relative;
    padding: 18px 6px;
    color: var(--text);
}

/* arkadaki büyük yıl */
.tl-content .year-ghost {
    position: absolute;
    inset: -6px auto auto -10px;
    font-size: 110px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(227, 6, 19, .06);
    user-select: none;
    pointer-events: none;
}

/* yıl + tik + metin */
.tl-content .year {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.tl-content .tick {
    width: 3px;
    height: 48px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 6px rgba(227, 6, 19, .12);
    margin-top: 8px;
    flex: 0 0 auto;
}

/* 1) Tipografi: yıl ve başlık küçültüldü */
.tl-content h3 {
    margin: 0;
    font-size: 30px;
    /* yıl */
    line-height: 1.05;
    color: var(--accent);
    letter-spacing: .2px;
}

.tl-content h2 {
    margin: 6px 0 0;
    font-size: 40px;
    /* başlık (yıldan biraz büyük) */
    line-height: 1.12;
    font-weight: 800;
    color: var(--text);
}

.tl-content p {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
    max-width: 52ch;
}

/* Mobil: çizgi sola, tek kolon */
@media (max-width: 820px) {
    .timeline {
        width: min(680px, calc(100% - 28px));
        margin: 34px auto;
    }

    .timeline::before {
        left: 18px;
        transform: none;
    }

    .tl-item {
        grid-template-columns: 1fr;
        row-gap: 16px;
        padding: 22px 0;
        min-height: auto;
    }

    .tl-item::before {
        left: 18px;
        top: 34px;
        transform: translate(-50%, 0);
    }

    .tl-media,
    .tl-content {
        grid-column: 1 !important;
    }

    .tl-media {
        padding-left: 42px;
    }

    .tl-content {
        padding-left: 42px;
    }

    .tl-content .year-ghost {
        font-size: 86px;
        inset: -4px auto auto 34px;
    }

    .tl-content h3 {
        font-size: 26px;
    }

    .tl-content h2 {
        font-size: 34px;
    }
}

/* Çok küçük ekran */
@media (max-width: 420px) {
    .tl-media .img-wrap {
        aspect-ratio: 4/3;
    }

    .tl-content h2 {
        font-size: 30px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   CUSTOM OVERRIDES
   ════════════════════════════════════════════════════════════════════ */

/* ── Task 1: Footer link hover – remove arrow, keep colour change ── */
.rs-footer-widget-links ul li a::before,
.rs-footer-widget-links ul li a:hover::before {
    display: none !important;
    opacity: 0 !important;
    content: none !important;
}

.rs-footer-widget-links ul li a {
    padding-left: 0 !important;
    transition: color .2s ease;
}

/* ── Task 2: /urunler – 5 items per row at xxl screens ── */
@media (min-width: 1400px) {
    .rs-elements-team-area .row>.col-xl-3 {
        width: 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* ── Task 3: Product category detail table – reduce horizontal padding 70% ── */
/* original: 14px  →  new: ~4px (14 × 0.30) */
.product-table th {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.product-table td {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* ── Task 4: Homepage product-category icon grid – 5 per row on lg+, 24px gap ── */
@media (min-width: 992px) {

    /*
     * Each item fills exactly 1/5 of the row, with 24px between items.
     * Formula: item-width = (100% - 4 × 24px) / 5
     * Items grow to fill the row, gap is always 24px.
     */
    .rs-product-category-icon-grid {
        column-gap: 24px !important;
        row-gap: 32px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .rs-product-category-icon-grid .rs-product-category-icon-item {
        width: calc((100% - 4 * 24px) / 5) !important;
        padding: 0 !important;
    }

    /* Thumb box: percentage of the item width so the grey square
       scales proportionally across viewport sizes                */
    .rs-product-category-icon-grid .rs-product-category-icon-thumb {
        width: 72% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
    }

    /* Icon image inside the thumb box */
    .rs-product-category-icon-grid .rs-product-category-icon-thumb img {
        width: 70% !important;
        height: auto !important;
    }

    /* Category name label */
    .rs-product-category-icon-name {
        font-size: 1.5rem !important;
    }
}

/* ── Product detail tabs – table styling (applies to Açıklama + Ölçüler tabs) ── */
/* Lists rendered inside CKEditor content: ensure bullets/numbers are
   indented so they sit inside the wrapper rather than against (or beyond)
   the left edge. */
.information-wrapper ul,
.information-wrapper ol {
    padding-inline-start: 24px;
    margin-bottom: 1rem;
    list-style-position: outside;
}
.information-wrapper ul { list-style-type: disc; }
.information-wrapper ol { list-style-type: decimal; }
.information-wrapper ul ul,
.information-wrapper ol ol,
.information-wrapper ul ol,
.information-wrapper ol ul {
    margin-bottom: 0;
    padding-inline-start: 22px;
}
.information-wrapper ul li,
.information-wrapper ol li {
    line-height: 1.6;
    margin-bottom: 4px;
}

.information-wrapper table {
    width: 100%;
    /* Separate borders with 10px horizontal spacing — columns look detached */
    border-collapse: separate;
    border-spacing: 10px 0;
    margin-bottom: 20px;
    font-size: 15px;
}

.information-wrapper table thead tr,
.information-wrapper table tr:first-child:has(th) {
    background: #E30613 !important;
    color: #fff !important;
}

.information-wrapper table thead th,
.information-wrapper table tr:first-child th {
    padding: 10px 14px;
    font-weight: 700;
    text-align: left;
    border: 1px solid #c10511;
    color: #fff !important;
}

.information-wrapper table tbody tr:nth-child(odd) {
    background: #f8f8f8;
}

.information-wrapper table tbody tr:nth-child(even) {
    background: #ffffff;
}

.information-wrapper table tbody tr:hover {
    background: #fde8e9;
    transition: background .15s ease;
}

.information-wrapper table td {
    padding: 10px 14px;
    border: 1px solid #e8e8e8;
    vertical-align: middle;
    color: #333 !important;
    /* ensure readable in dark-theme tabs (white bg) */
}

/* ── Product detail: Ölçüler tab (#sizes-review) only ── */
#sizes-review .information-wrapper table thead th,
#sizes-review .information-wrapper table thead td,
#sizes-review .information-wrapper table thead tr {
    color: #fff !important;
}
#sizes-review .information-wrapper table tr:first-child th {
    color: #fff !important;
}
/* 10px horizontal gap between columns (not before the first column) */
#sizes-review .information-wrapper table thead th + th,
#sizes-review .information-wrapper table tbody td + td {
    padding-left: 24px;
}

/* Feature key-value table on product detail sidebar */
.product-features-table tbody tr:nth-child(odd) td {
    background: #f8f8f8 !important;
}

.product-features-table tbody tr:nth-child(even) td {
    background: #ffffff !important;
}

.product-features-table tbody tr:hover td {
    background: #fde8e9 !important;
}

.info-form-subgroup-sep {
    margin: 30px 0 20px 0 !important;
}

.rs-message-from-the-general-manager-text p {
    color: #fff !important;
}

/* Header dropdown submenu — give the link enough vertical room for
   Turkish diacritics (especially the dot above capital İ) so the top of
   the glyph doesn't get clipped. The default padding (15px) plus a tight
   line-height was causing the dot to disappear on certain widths. */
.main-menu .submenu li a {
    line-height: 1.5;
    padding-top: 12px;
    padding-bottom: 12px;
    overflow: visible;
}
.rs-header-area .main-menu .submenu li {
    overflow: visible;
}

/* Offcanvas (mobile drawer) contact icons: drop the rounded ring/border
   so the icon sits naturally next to the text. */
.offcanvas-area .offcanvas-contact-icon {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
}

/* ── Mobile menu (meanmenu) — submenu visibility ───
   The desktop .main-menu .submenu rule positions submenus as absolute
   dropdowns (opacity:0 / visibility:hidden / transform:scaleY(0)).
   Meanmenu clones the nav (keeping class="main-menu") so those rules
   leak into the mobile drawer. Restore inline-flow visibility so
   meanmenu's built-in slideToggle on .mean-expand works correctly,
   matching the original main-pkg theme behaviour exactly.
─────────────────────────────────────────────────────────────────── */
/* Hide the inline desktop chevron inside the cloned mobile drawer —
   the meanmenu plugin injects its own .mean-expand toggle anchored
   on the right, which is the canonical mobile-menu expand affordance. */
.mean-container .nav-dd-chevron {
    display: none !important;
}

.mean-container .main-menu .submenu,
.mean-container .mean-nav .submenu {
    position: static !important;
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: none !important;
    /* Hidden by default; meanmenu's slideToggle handles open/close. */
    display: none;
}
.mean-container .main-menu .submenu ul,
.mean-container .mean-nav .submenu ul {
    position: static !important;
    width: 100% !important;
    background: transparent !important;
    opacity: 1 !important;
}

/* ── Mobile hero breadcrumb banner ───────────────────────────────────
   On mobile the hero image is rendered as a real <img> (injected by
   main.js when data-background-mobile is set). This lets the banner
   fill 100% width and grow to its natural height instead of being
   cover-cropped. The breadcrumb title + nav stay overlaid at the
   bottom with a soft gradient for readability.                     */
@media (max-width: 767px) {
    .rs-breadcrumb-area.rs-breadcrumb-one {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        position: relative;
    }
    .rs-breadcrumb-area.rs-breadcrumb-one .rs-breadcrumb-bg {
        position: relative;
        width: 100%;
        height: auto;
        background: none !important;
    }
    .rs-breadcrumb-area.rs-breadcrumb-one .rs-breadcrumb-bg .bg-mobile-img {
        display: block;
        width: 100%;
        height: auto;
    }
    /* Soft bottom gradient over the image so the white title stays readable */
    .rs-breadcrumb-area.rs-breadcrumb-one .rs-breadcrumb-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
        pointer-events: none;
    }
    /* Title + breadcrumb nav overlay at the bottom of the image.
       !important is required because some views (e.g. ProductCategory
       Detail) put inline `style="position:relative;z-index:2"` on the
       container for the desktop HeroOverlayColor layer — without
       !important the inline style would win and the breadcrumb would
       fall BELOW the hero image instead of overlaying it.            */
    .rs-breadcrumb-area.rs-breadcrumb-one > .container {
        position: absolute !important;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 16px 20px 20px;
        z-index: 3 !important;
    }
    /* If the view also rendered a HeroOverlayColor div (only used by
       ProductCategory Detail so far), make sure it stretches over the
       relatively-positioned mobile bg without breaking layout.        */
    .rs-breadcrumb-area.rs-breadcrumb-one .rs-breadcrumb-overlay {
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
    }
    .rs-breadcrumb-area.rs-breadcrumb-one .rs-breadcrumb-title {
        font-size: 26px;
        margin-bottom: 6px;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    }
    .rs-breadcrumb-area.rs-breadcrumb-one .rs-breadcrumb-menu nav ul li,
    .rs-breadcrumb-area.rs-breadcrumb-one .rs-breadcrumb-menu nav ul li a,
    .rs-breadcrumb-area.rs-breadcrumb-one .rs-breadcrumb-menu nav ul li span {
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    }

    /* Contact world-map ripple markers — shrink for mobile so they don't
       overlap each other when the underlying map image scales down. */
    .rs-contact-area .rs-contact-wrapper .rs-ripple-item {
        width: 9px !important;
    }
    .rs-contact-area .rs-contact-wrapper .rs-ripple-item .pre-circle-ripple {
        width: 9px;
        height: 9px;
    }
    /* Mobile centring strategy:
       The wrapper (.rs-ripple-item) has inline `left:X%; top:Y%`
       coordinates pointing at each city. We want the marker's VISUAL
       CENTRE to sit exactly on that percentage point.

       For the dot (::after) we use transform: translate(-50%, -50%)
       which is size-agnostic — works for any future size change too.

       For the halo (::before), the rs-pulse-border keyframe already
       applies translate(-50%, -50%), so we just put it at (0, 0).    */
    .rs-contact-eight .pre-circle-ripple::after {
        width: 9px !important;
        height: 9px !important;
        top: 0 !important;
        left: 0 !important;
        transform: translate(-50%, -50%);
        border-width: 1.5px !important;
    }
    .rs-contact-eight .pre-circle-ripple::before {
        width: 18px !important;
        height: 18px !important;
        top: 0 !important;
        left: 0 !important;
    }
}
@media (max-width: 480px) {
    .rs-contact-area .rs-contact-wrapper .rs-ripple-item {
        width: 7px !important;
    }
    .rs-contact-area .rs-contact-wrapper .rs-ripple-item .pre-circle-ripple {
        width: 7px;
        height: 7px;
    }
    .rs-contact-eight .pre-circle-ripple::after {
        width: 7px !important;
        height: 7px !important;
        top: 0 !important;
        left: 0 !important;
        transform: translate(-50%, -50%);
        border-width: 1px !important;
    }
    .rs-contact-eight .pre-circle-ripple::before {
        width: 14px !important;
        height: 14px !important;
        top: 0 !important;
        left: 0 !important;
    }
}