/*
 * Ecomus theme overrides.
 *
 * Corrections to CSS this theme does not own — the page builder's generated
 * section layout, and a few template rules that assume a left-to-right page.
 * Kept out of styles.css so the template file stays the vendor's.
 */

/* Full-width page-builder sections
   ------------------------------------------------------------------------
   SectionLayoutCSSGenerator emits, for every full_width section:

       .section-layout-full_width .section-inner {
           width: 100%;
           margin-left: -15px;
           margin-right: -15px;
           padding-left: 15px;
           padding-right: 15px;
       }

   The negative margins exist to cancel the column's 15px padding so the
   section bleeds edge to edge, but they can only do that if the width is free
   to grow. Pinned at 100% the box keeps its width and is merely displaced:
   15px left in LTR, 15px right in RTL — which leaves a gap down the left of
   every section and makes the document 30px wider than the viewport.

   Auto width lets the margins widen the box instead, which is the bleed the
   generator was aiming for, and it works the same in both directions. */
.section-layout-full_width > .section-inner {
    width: auto !important;
}

/* Footer logo
   ------------------------------------------------------------------------
   The template's footer logo is a small fixed-size asset, so it carries no
   size rule of its own. A shop uploads whatever it likes, and a full-size
   logo rendered at its natural width blew the footer row past the viewport —
   which on mobile cut the column headings off the right edge. */
.footer .footer-logo img {
    max-width: 180px;
    width: auto;
    height: auto;
}

/* Nothing in the footer may widen the page. */
.footer img,
.footer .footer-infor {
    max-width: 100%;
}

/* Cart row actions
   ------------------------------------------------------------------------
   The core stylesheet styles `.move-to-wishlist` as a 35x35 blue icon button
   (custom-style.css). The cart JS binds its handler to that class name, so the
   class has to stay — but in the template's cart the action is a plain text
   link beside "Remove", not a button. Reset it back to a link here. */
.tf-cart-item .cart-info .move-to-wishlist {
    display: inline;
    width: auto;
    height: auto;
    background: none;
    border: 0;
    border-radius: 0;
    color: inherit;
    font-size: 12px;
    line-height: 16.8px;
}

.tf-cart-item .cart-info .cart-actions {
    margin-top: 6px;
}

.tf-cart-item .cart-info .cart-actions .remove-cart {
    margin-top: 0;
    cursor: pointer;
    text-decoration: underline;
}

/* Mobile header
   ------------------------------------------------------------------------
   main.js's headerSticky() hides the header while scrolling down by setting an
   inline `top: -<height>px`, and only restores it when you scroll back up. On a
   phone that reads as the header being gone rather than sticky. Below the
   template's desktop breakpoint the header stays pinned instead.

   !important is deliberate: it is the only way a stylesheet can beat the inline
   style that script writes. */
@media (max-width: 1150px) {
    header#header {
        top: 0 !important;
    }
}

/* The platform's common.css puts `overflow-x: hidden` on both html and body.
   With both set, body becomes its own scroll container, so the header's
   `position: sticky` binds to a box that never scrolls and the header just
   scrolls away. `clip` still stops sideways scrolling but creates no scroll
   container, so the header sticks to the viewport like in the template. */
html,
body {
    overflow-x: clip;
}

/* Opening any offcanvas/modal makes Bootstrap write an inline
   `overflow: hidden` on body to lock scrolling. That turns body back into a
   scroll container (scrolled to 0), so the sticky header jumps to the top of
   the document and vanishes behind the open drawer. Lock the scroll on html
   instead and keep body visible vertically.

   The x axis must stay `clip`: full-width page-builder sections overhang the
   viewport by 15px, and without the clip a phone widens the layout viewport
   to fit them — the page zooms out and the cart drawer's checkout button
   drops below the screen. */
@supports selector(:has(a)) {
    html:has(> body[style*="overflow: hidden"]) {
        overflow: hidden;
    }

    body[style*="overflow: hidden"] {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }
}

/* Product variant pickers
   ------------------------------------------------------------------------
   The platform renders variants as <ul class="size-lists"><li data-value …>,
   and its JS toggles `.active` / `.disabled` on those <li>. That markup has to
   stay, so the template's look is applied here instead: lettered boxes for
   sizes and attributes, round swatches for colours. Previously they inherited
   nothing and rendered as bare text beside an input. */
.tf-product-info-variant-picker .size-lists {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Sizes and custom attributes: the template's `style-text` swatch. */
.tf-product-info-variant-picker .size-lists li {
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: var(--main);
    background-color: var(--white);
    transition: all 0.25s ease;
}

.tf-product-info-variant-picker .size-lists li:hover {
    border-color: var(--main);
}

.tf-product-info-variant-picker .size-lists li.active {
    background-color: var(--main);
    border-color: var(--main);
    color: var(--white);
}

.tf-product-info-variant-picker .size-lists li.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Colours: a round swatch filled with the colour itself, so it needs no text. */
.tf-product-info-variant-picker .size-lists.color-list li {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    box-shadow: inset 0 0 0 2px var(--white);
}

.tf-product-info-variant-picker .size-lists.color-list li.active {
    border-color: var(--main);
    border-width: 2px;
}

/* The readonly input beside the label is the chosen value, not a field. */
.tf-product-info-variant-picker .variant-picker-label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
}

.tf-product-info-variant-picker .variant-picker-label .value-size {
    border: 0;
    padding: 0 4px;
    width: auto;
    max-width: 160px;
    background: transparent;
    font-weight: 400;
    color: var(--text);
    pointer-events: none;
}

/* Toast notifications
   ------------------------------------------------------------------------
   The bundled toastr.css is a trimmed copy: it ships the status icons but not
   the background colours, so every notification rendered as pale text on a
   near-white box — the "add to cart" message looked empty. Give each status
   its own colour, and keep it legible in RTL. */
#toast-container > div {
    opacity: 1;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    line-height: 1.6;
}

#toast-container > .toast-success { background-color: #31a56d; }
#toast-container > .toast-error   { background-color: #db1215; }
#toast-container > .toast-warning { background-color: #d97706; }
#toast-container > .toast-info    { background-color: #2563eb; }

#toast-container > div .toast-title,
#toast-container > div .toast-message {
    color: #fff;
}

#toast-container > div .toast-close-button {
    color: #fff;
    opacity: 0.9;
    text-shadow: none;
}

/* The icon sits on the padded side; in RTL that has to be the right. */
[dir="rtl"] #toast-container > div {
    padding: 15px 50px 15px 15px;
    background-position: right 15px center;
    text-align: right;
}

/* Product info column
   ------------------------------------------------------------------------
   Bring the price block closer to the template: the sale price leads, the
   old price is struck through and muted beside it. */
.tf-product-info-list .price-on-sale {
    font-size: 22px;
    font-weight: 600;
    /* The demo shows the sale price in red. --primary is this theme's green
       accent, which reads as low contrast on white. */
    color: var(--red_1);
}

.tf-product-info-list .compare-at-price {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-2);
    text-decoration: line-through;
    margin-inline-start: 8px;
}

.tf-product-info-list .badges-on-sale {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    margin-inline-start: 8px;
    border-radius: 12px;
    background-color: var(--red_1);
    color: var(--white);
    font-size: 12px;
}

/* Square icon buttons beside add-to-cart. */
.tf-product-info-buy-button .btn-icon-action {
    width: 46px;
    min-width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 3px;
    color: var(--main);
    transition: all 0.25s ease;
}

.tf-product-info-buy-button .btn-icon-action:hover {
    border-color: var(--main);
    background-color: var(--main);
    color: var(--white);
}

/* Password reveal
   ------------------------------------------------------------------------
   Sits inside the .tf-field, on the end side of the input so it works in both
   directions (inset-inline-end is right in LTR, left in RTL). */
.tf-field.ec-has-toggle {
    position: relative;
}

.tf-field.ec-has-toggle .tf-field-input {
    padding-inline-end: 44px;
}

.ec-pwd-toggle {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    z-index: 3;
}

.ec-pwd-toggle:hover,
.ec-pwd-toggle.is-visible {
    color: var(--main);
}

/* ---------------------------------------------------------------------------
   Product reviews tab

   The template's demo always draws five filled stars, so it has no notion of an
   unfilled one and no styling for a review list outside the summary block.
   Real ratings need both.
   --------------------------------------------------------------------------- */
.list-star .icon {
    color: var(--yellow);
}

/* Beats .tab-reviews .tab-reviews-heading .list-star .icon, which paints every
   star yellow. */
.list-star .icon.empty,
.tab-reviews .tab-reviews-heading .list-star .icon.empty,
.reply-comment .reply-comment-item .list-star .icon.empty {
    color: var(--line);
}

.reply-comment .reply-comment-item .list-star {
    display: flex;
    gap: 2px;
    font-size: 14px;
    margin: 3px 0 4px;
}

/* A reviewer with no display name still needs the row to keep its height. */
.reply-comment .reply-comment-item h6 {
    min-height: 1em;
}

.reply-comment .reply-comment-item .image.image-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--line);
    color: var(--text);
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Guests get no write-review buttons, and the heading's space-between then
   pushes the score bars to the far edge, away from the average they belong to.
   Keep the summary's own width and centre it instead. */
.tab-reviews .tab-reviews-heading.no-actions {
    justify-content: center;
}

/* ---------------------------------------------------------------------------
   Compare table
   .tf-compare-title is nowrap, so a long product name sizes its own column and
   pushes the table into a horizontal scroll it does not need. Give every column
   an equal share and let the title ellipsize as the template intends.
   --------------------------------------------------------------------------- */
.tf-compare-row > .tf-compare-col {
    flex: 1 1 0;
    /* The template pins columns at 360px so its four-product demo always
       scrolls. Shrink to a floor instead, so a shorter comparison fits. */
    min-width: 180px;
}

.tf-compare-value .list-star {
    display: flex;
    gap: 2px;
    font-size: 14px;
}

/* ---------------------------------------------------------------------------
   Empty cart / wishlist
   --------------------------------------------------------------------------- */
.ec-empty-state {
    padding: 60px 20px;
}

.ec-empty-state .ec-empty-icon {
    display: block;
    font-size: 56px;
    line-height: 1;
    color: var(--line-2);
    margin-bottom: 20px;
}

/* ---------------------------------------------------------------------------
   Account dashboard
   The template's account sidebar is a bare nav. Ours names the signed-in user
   above it, which the demo has no equivalent for.
   --------------------------------------------------------------------------- */
.wrap-sidebar-account .ec-account-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    border: 1px solid var(--line);
    border-radius: 3px;
}

.wrap-sidebar-account .ec-account-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--bg-11);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

.wrap-sidebar-account .ec-account-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wrap-sidebar-account .ec-account-identity > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dashboard figures. The template has no stat tile, so these borrow its card
   border and type scale. */
.ec-account-stat,
.ec-account-card {
    display: block;
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 20px;
    height: 100%;
}

a.ec-account-stat:hover {
    border-color: var(--primary);
}

.ec-account-stat .value {
    display: block;
    font-size: 24px;
    line-height: 1.2;
    color: var(--main);
}

.ec-account-stat .label {
    display: block;
    margin-top: 4px;
}

.ec-account-card-actions {
    border-top: 1px solid var(--line);
}

/* Order / ticket status pills. The template ships none, so these reuse its
   badge shape with a colour per state rather than inline styles per row. */
.ec-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 24px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    background-color: rgba(0, 0, 0, 0.06);
    color: var(--text);
}

.ec-status + .ec-status {
    margin-inline-start: 6px;
}

.ec-status-complete,
.ec-status-success,
.ec-status-open,
.ec-status-paid,
.ec-priority-low {
    background-color: rgba(131, 183, 53, 0.14);
    color: #5c8a1f;
}

.ec-status-pending,
.ec-status-in_progress,
.ec-priority-medium {
    background-color: rgba(212, 160, 23, 0.14);
    color: #9a7208;
}

.ec-status-cancel,
.ec-status-canceled,
.ec-status-failed,
.ec-status-closed,
.ec-priority-high,
.ec-priority-urgent {
    background-color: rgba(219, 18, 21, 0.1);
    color: #db1215;
}

.ec-account-photo {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 3px;
}

/* Reassurance row under the add-to-cart block. */
.ec-pd-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ec-pd-trust .icon {
    font-size: 16px;
    color: var(--primary);
}

/* Single-column auth pages (OTP request / verify). The template only ships the
   two-column tf-login-wrap, which sits half empty with one field. */
.ec-login-single {
    max-width: 460px;
    margin: 0 auto;
}

.ec-otp-input {
    letter-spacing: 6px;
    text-align: center;
    font-size: 20px;
}

/* Spin buttons turn a 6-digit code field into a stepper. */
.ec-otp-input::-webkit-outer-spin-button,
.ec-otp-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ec-otp-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ---------------------------------------------------------------------------
   Checkout
   The place-order button is disabled whenever the chosen address has no usable
   shipping method. Expressed as a class so the enabled state is just the
   template's own .tf-btn.btn-fill -- the JS used to write inline colours drawn
   from the previous theme's palette.
   --------------------------------------------------------------------------- */
.tf-btn.ec-checkout-blocked,
.tf-btn.ec-checkout-blocked:hover {
    background-color: var(--line-2) !important;
    border-color: var(--line-2) !important;
    color: var(--white) !important;
    cursor: not-allowed;
}

/* Shipping method rows come back from the totals AJAX; keep the radio and its
   label on one line with the cost pushed to the far side. */
.tf-page-cart-checkout .tf-cart-totals-discounts .shipping-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tf-page-cart-checkout .tf-cart-totals-discounts .shipping-radio label {
    margin-bottom: 0;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Image + text band (accessora_image_text)
   The template alternates which side the image sits on down the About page,
   but ships no modifier for it -- style-4 always puts the image first.
   --------------------------------------------------------------------------- */
.tf-img-with-text.ec-img-text-reverse .tf-image-wrap,
.tf-img-with-text.ec-img-text-reverse .grid-img-group {
    order: 2;
}

.tf-img-with-text.ec-img-text-reverse .tf-content-wrap {
    order: 1;
}

/* A short paragraph beside a tall image leaves the text stranded at the top. */
.tf-img-with-text.style-4 .tf-content-wrap {
    align-items: center;
}

/* The demo's artwork is portrait-ish and sized to the column. Ours comes from
   the media library at whatever shape it was uploaded -- a wide banner image
   rendered as a short letterbox strip. Pin the proportion the demo uses and let
   the image cover it, so any upload sits right. */
.tf-img-with-text .tf-image-wrap > img {
    width: 100%;
    display: block;
    aspect-ratio: 6 / 5;
    object-fit: cover;
}

.tf-img-with-text .grid-img-group .img-style > img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* The offset pair needs height to overlap against; .item-1 is absolutely
   positioned so the group would otherwise collapse to the smaller image. */
.tf-img-with-text .grid-img-group {
    min-height: 560px;
}

/* ---------------------------------------------------------------------------
   Body copy colour
   The platform's common.css paints every bare <p> with var(--light-color), and
   the tenant colour settings resolve that to a blue. The template expects
   paragraphs to inherit the surrounding text colour, so any markup that does
   not carry an explicit class (widget copy, contact details) came out blue.
   --------------------------------------------------------------------------- */
p {
    color: inherit;
}

/* ---------------------------------------------------------------------------
   About page banner (accessora_page_banner)
   The demo's artwork is a dark photo; a merchant's own banner may be light, and
   the caption is always white. A scrim keeps the text readable either way.
   --------------------------------------------------------------------------- */
.tf-slideshow.about-us-page .banner-wrapper {
    position: relative;
}

.tf-slideshow.about-us-page .banner-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .25));
    pointer-events: none;
}

/* The template centres a slideshow caption via .wrap-slider, which this banner
   is not inside -- so the caption flowed under the image and stretched the
   banner past it. Centre it over the image the way the demo does. */
.tf-slideshow.about-us-page .banner-wrapper > img {
    display: block;
    width: 100%;
    /* The demo banner is around 830px tall. A shorter upload would otherwise
       leave the caption crammed into a thin strip. */
    height: clamp(420px, 58vw, 830px);
    object-fit: cover;
}

.tf-slideshow.about-us-page .box-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

/* Three icon boxes side by side; the demo drives this with a swiper we do not
   initialise from the builder. */
/* The item count is a repeater now, so the grid fits whatever it is given
   rather than breaking a fourth box onto a row of its own. */
.ec-iconbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
}

@media (max-width: 767px) {
    .ec-iconbox-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   Contact columns inside the page builder
   The template pulls .tf-content-left/right toward the centre with a 122px
   margin, sized for its own full-width two-column grid. Dropped into a builder
   column that margin just eats half the width, leaving the form cramped with a
   gap beside it.
   --------------------------------------------------------------------------- */
.pb-column .tf-content-left,
.pb-column .tf-content-right,
body.rtl .pb-column .tf-content-left,
body.rtl .pb-column .tf-content-right {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: none;
}

/* ---------------------------------------------------------------------------
   Product card hover
   The template fades .img-product out on hover to reveal .img-hover beneath.
   A product with a single photo has no .img-hover, so the card was fading to
   a blank white panel. Keep the one image visible in that case and give the
   hover its own feedback with the same zoom the swap uses.
   --------------------------------------------------------------------------- */
.card-product .card-product-wrapper:hover .product-img:not(:has(.img-hover)) .img-product {
    opacity: 1;
    transform: scale(1.09);
}

/* ---------------------------------------------------------------------------
   Section text treatment
   A background class only paints the background — headings inside keep using
   --main, so "Dark" rendered black text on a black panel. These two classes
   carry the whole section's text with it, and the widget picks one from the
   Section Text Color control (Auto flips to light on a dark background).
   --------------------------------------------------------------------------- */
.ec-section-text-light,
.ec-section-text-light h1, .ec-section-text-light h2, .ec-section-text-light h3,
.ec-section-text-light h4, .ec-section-text-light h5, .ec-section-text-light h6,
.ec-section-text-light p, .ec-section-text-light span, .ec-section-text-light li,
.ec-section-text-light a:not(.tf-btn):not(.box-icon),
.ec-section-text-light .title,
.ec-section-text-light .sub-title,
.ec-section-text-light .description {
    color: var(--white);
}

.ec-section-text-light .tf-btn.btn-outline,
.ec-section-text-light .box-icon {
    border-color: var(--white);
}

.ec-section-text-dark,
.ec-section-text-dark h1, .ec-section-text-dark h2, .ec-section-text-dark h3,
.ec-section-text-dark h4, .ec-section-text-dark h5, .ec-section-text-dark h6,
.ec-section-text-dark .title,
.ec-section-text-dark .sub-title {
    color: var(--main);
}

.ec-section-text-dark p,
.ec-section-text-dark span,
.ec-section-text-dark li,
.ec-section-text-dark .description {
    color: var(--text);
}

/* Per-section colour override. The value arrives as an inline custom property
   so the class can carry the !important needed to beat bg_* (which are
   themselves !important). Clearing the picker drops both the property and the
   class, and the section falls back to its preset. */
.ec-section-custom-bg {
    background-color: var(--section-bg) !important;
}

.ec-section-custom-text,
.ec-section-custom-text h1, .ec-section-custom-text h2, .ec-section-custom-text h3,
.ec-section-custom-text h4, .ec-section-custom-text h5, .ec-section-custom-text h6,
.ec-section-custom-text p, .ec-section-custom-text span, .ec-section-custom-text li,
.ec-section-custom-text a:not(.tf-btn):not(.box-icon),
.ec-section-custom-text .title,
.ec-section-custom-text .sub-title,
.ec-section-custom-text .description {
    color: var(--section-text) !important;
}

/* ---------------------------------------------------------------------------
   Button colour — one place for every button surface in the theme.

   Resolution order for each one is:
     --sec-btn-bg   a per-section override from the page builder
     --btn-bg       the shop-wide Button Background in Color Settings
     the class's own colour, so an untouched shop looks exactly as designed

   --sec-btn-* is deliberately a different property from --btn-*: several button
   styles are meant to differ (.btn-primary-main is primary-coloured by design),
   and reusing the global one would repaint them on every page.
   --------------------------------------------------------------------------- */
.tf-btn.btn-fill,
.btn-fill {
    background-color: var(--sec-btn-bg, var(--btn-bg, var(--primary)));
    border-color: var(--sec-btn-bg, var(--btn-bg, var(--primary)));
    color: var(--sec-btn-text, var(--btn-text, var(--white)));
}

.tf-btn.btn-primary-main {
    background-color: var(--sec-btn-bg, var(--btn-bg, var(--primary)));
    color: var(--sec-btn-text, var(--btn-text, var(--main)));
}

.tf-btn.btn-light {
    background-color: var(--sec-btn-bg, var(--white));
    color: var(--sec-btn-text, var(--main));
}

/* The template flips this button to dark on hover, which is what makes its
   arrow (a white glyph) visible. The override above ties with .btn-light:hover
   on specificity and loads later, so without this the hover never happened and
   the arrow stayed white-on-white. */
.tf-btn.btn-light:hover,
.tf-btn.btn-light:hover .icon {
    /* Same chain as every other button, so the hover picks up the shop's
       colour instead of the template's black. */
    background-color: var(--sec-btn-bg, var(--btn-bg, var(--primary)));
    color: var(--sec-btn-text, var(--btn-text, var(--white)));
}

.tf-btn.btn-light:hover .icon {
    background-color: transparent;
}

/* The reveal animation slides the glyph in from the text's trailing edge; both
   are mirrored for RTL, where that edge is the left one. */
body.rtl .tf-btn.hover-icon .icon {
    transform-origin: left;
}

body.rtl .tf-btn.hover-icon:hover .icon {
    margin-left: 0;
    margin-right: 8px;
}

/* Icon buttons and bars that paint themselves with --main directly, so they
   ignored the setting entirely and stayed black. */
.card-product .btn-quick-add .tf-btn,
.card-product .btn-quick-add,
.tf-form-search .search-box .tf-btn,
.collection-video .box-icon,
.list-product-btn.style-black .box-icon,
.list-product-btn .box-icon:hover,
.collection-item-v3 .collection-image .box-icon:hover,
.gallery-item .box-icon:hover,
.card-product.style-6 .btn-quick-add:hover,
.card-product.style-8 .card-product-info .tf-btn:hover,
/* Two rules hardcode a navy (#1c355e) rather than reading the palette. */
.card-product.style-price.bg_blue-6 .list-product-btn .box-icon:hover,
.list-product-btn.style-blue .box-icon {
    background-color: var(--sec-btn-bg, var(--btn-bg, var(--primary))) !important;
    color: var(--sec-btn-text, var(--btn-text, var(--white)));
}

/* Bare .tf-btn links carry no fill of their own, so only the text follows. */
.ec-blog-posts .tf-btn,
.tf-btn.btn-sm {
    color: var(--sec-btn-text, inherit);
}

/* ---------------------------------------------------------------------------
   Header icon badges
   The template positions the count bubble with right:-10px, which is correct
   for its LTR layout but pushes the badge onto the neighbouring icon in RTL.
   Mirror it, and let it take its colour from the palette like the template
   does (the cart badge carried a hardcoded text-black, which left black digits
   on a coloured bubble).
   --------------------------------------------------------------------------- */
body.rtl #header .nav-icon .count-box {
    right: auto;
    left: -10px;
}

#header .nav-icon .count-box {
    color: var(--white);
    background-color: var(--primary);
}

/* ---------------------------------------------------------------------------
   Footer brand column
   The template paints everything inside .footer-infor at #a1a1a1, which leaves
   the address, phone and email noticeably dimmer than the headings above them.
   Lift the brand column's own copy to white; the link columns keep the
   template's grey so the two do not compete.
   --------------------------------------------------------------------------- */
.footer.background-black .footer-infor .footer-desc,
.footer.background-black .footer-infor .footer-address p,
.footer.background-black .footer-infor .footer-address p a {
    color: var(--white);
}

.footer.background-black .footer-infor .footer-address p a:hover {
    color: var(--primary);
}

/* ---------------------------------------------------------------------------
   Checkout payment methods
   The platform renders gateways as a row of logo tiles. Ecomus lists them the
   way its own template does — a radio and the method's name, stacked — so the
   tile styling (inline blocks, borders, fixed widths) is undone here and the
   template's .fieldset-radio rules are left to do the work.
   --------------------------------------------------------------------------- */
.ec-payment-radios ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* The tile layout sizes each li to a fixed 120px, which wraps a method name
   onto two lines and leaves it looking like a boxed tile. In a column flex
   container the horizontal size is the cross axis, so the width has to be
   released to auto before align-self can stretch it. */
.ec-payment-radios ul {
    align-items: stretch;
}

.ec-payment-radios ul > li {
    display: block;
    width: auto;
    min-width: 0;
    max-width: none;
    align-self: stretch;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    cursor: pointer;
}

.ec-payment-radios ul li .fieldset-radio {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ec-payment-radios ul li label {
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

/* The radio mirrors the selection rather than driving it, so it must not
   swallow the click the <li> handler listens for. */
.ec-payment-radios ul li input[data-gateway-radio] {
    pointer-events: none;
    flex-shrink: 0;
}

/* The tile layout draws its selection as decoration on the li itself: a
   ::before ringing the whole row in a 2px blue border, a ::after badge in the
   corner, and a fixed 50px height to hold them. In a radio list the radio
   already says which option is chosen, so the row was showing the same thing
   twice — once as a tick and again as a box around it. */
.ec-payment-radios ul > li::before,
.ec-payment-radios ul > li::after {
    content: none;
    display: none;
}

.ec-payment-radios ul > li {
    height: auto;
    min-height: 0;
}

.ec-payment-radios ul li.selected label {
    color: var(--main);
}

/* Out of stock ------------------------------------------------------------
   The badge reuses .on-sale-item's shape so it sits exactly where a discount
   would, and the quick-add button is dimmed rather than removed so the row of
   actions keeps its layout. */
.on-sale-item.ec-out-of-stock {
    background: #6b7280;
    color: #fff;
}

.box-icon.ec-quick-add-disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Drawer: the white strips on both edges -----------------------------------
   Bootstrap hides the page scrollbar while a modal is open and compensates by
   padding the body on the RIGHT. In an RTL page the scrollbar is on the LEFT,
   so that compensation is wrong twice over: it leaves an uncovered strip where
   the scrollbar used to be on the left, and pads the page away from the right
   edge — which is the white column that appears beside the dimmed page.

   Reserving the gutter permanently removes the reason for the compensation at
   all, so nothing shifts when the drawer opens in either direction. */
html {
    scrollbar-gutter: stable;
}

body.modal-open {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* The drawer is full-bleed; padding on the backdrop element only ever shows as
   a gap between it and the viewport edge. */
.modal.fullRight,
.modal.fullLeft {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Product page: the description tabs sat flush against the gallery ----------
   .widget-tabs follows .tf-main-product directly, and the template's own
   spacing assumes a section gap that this layout does not have, so the tab
   frame's border ran within a few pixels of the product image. */
.tf-main-product + .widget-tabs,
.tf-product-info-wrap + .widget-tabs {
    margin-top: 48px;
}

.widget-tabs.style-has-border {
    margin-top: 48px;
}

@media (max-width: 767px) {
    .widget-tabs.style-has-border {
        margin-top: 32px;
    }
}

/* Backdrop "close" cursor -------------------------------------------------
   styles.css points at images/item/cursor-close.svg without a hotspot, so the
   click point sat on the icon's top-left corner. Centre it on the ✕. */
.offcanvas-backdrop,
.modal {
    cursor: url("../images/item/cursor-close.svg") 16 16, auto;
}

/* ==========================================================================
   Accessora design layer — the live Ecomus "home-accessories" demo
   (wpecomus.com/electronic/home-accessories). The WordPress demo does not
   share the HTML template's CSS, so its design settings are applied here:
   30px buttons and fields, 10px image corners, a brick-red campaign bar,
   round card actions and a black footer with grey text.
   ========================================================================== */

:root {
    /* Appearance → Colors → "Top Bar Background" overrides this. */
    --campaign-bar-bg: #2c3bc5;
    --accessora-radius-btn: 30px;
    --accessora-radius-img: 10px;
}

/* Campaign (announcement) bar — colour only; the template sizes the bar,
   and making it a flex box collapsed its row and swiper. */
.announcement-bar {
    background-color: var(--campaign-bar-bg);
}
.announcement-bar .noti-bar-text,
.announcement-bar .navigation-topbar,
.announcement-bar .close-announcement-bar {
    color: #fff;
}

/* Buttons: pill-shaped, except the underlined text links */
.tf-btn:not(.btn-line):not(.btn-line-light),
.tf-btn.radius-3:not(.btn-line),
.tf-btn.radius-60 {
    border-radius: var(--accessora-radius-btn);
}

/* Form fields */
body.accessora input[type="text"],
body.accessora input[type="email"],
body.accessora input[type="password"],
body.accessora input[type="tel"],
body.accessora input[type="number"],
body.accessora input[type="search"],
body.accessora select {
    border-radius: var(--accessora-radius-btn);
}
body.accessora textarea {
    border-radius: var(--accessora-radius-img);
}

/* Images */
.card-product .card-product-wrapper,
.collection-item-v4 .collection-image,
.gallery-item .img-style,
.flat-thumbs-testimonial-v2 .box-img,
.tf-slideshow.slider-accessories .wrap-slider {
    border-radius: var(--accessora-radius-img);
    overflow: hidden;
}

/* Product card actions: 40px white circles that turn black on hover */
.card-product .card-product-wrapper .list-product-btn {
    gap: 6px;
}
.card-product .card-product-wrapper .list-product-btn .box-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 4px 10px rgb(0 0 0 / 0.1);
}
.card-product .card-product-wrapper .list-product-btn .box-icon:hover {
    background-color: #000;
    color: #fff;
}
.card-product .card-product-wrapper .list-product-btn .box-icon .icon {
    font-size: 16px;
}

/* Footer: white with a divider above it, as the live home-accessories page */
.footer:not(.background-black) {
    border-top: 1px solid var(--line);
}
.footer .footer-bottom {
    border-top: 1px solid var(--line);
}

/* Newsletter: a pill field with the black pill button inside it */
.footer .form-newsletter #subscribe-content {
    position: relative;
}
.footer .form-newsletter input[type="email"] {
    border-radius: 30px;
    height: 52px;
    padding-inline-end: 140px;
}
.footer .form-newsletter .button-submit {
    position: absolute;
    inset-inline-end: 6px;
    top: 50%;
    transform: translateY(-50%);
}
.footer .form-newsletter .button-submit .tf-btn {
    height: 40px;
    border-radius: 30px;
    background-color: #000;
    border-color: #000;
    color: #fff;
}

/* Back to top: a round button */
#goTop {
    border-radius: 50%;
}

/* Product page — the live home-accessories single product ---------------- */
.ac-pd-meta { font-size: 14px; color: var(--text); }
.ac-pd-title { font-size: 28px; font-weight: 400; margin-bottom: 12px; }
.ac-stock-badge {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid var(--main);
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--main);
}
.ac-pd-price .price-on-sale { font-size: 28px; color: var(--main); }

.ac-buy .ac-buy-row { flex-wrap: nowrap; }
.ac-qty.wg-quantity {
    background-color: #f2f2f2;
    border: 0;
    border-radius: 30px;
    height: 48px;
    min-width: 120px;
}
.ac-qty.wg-quantity input { background: transparent; border: 0; }
.ac-btn-dark,
.ac-btn-accent {
    height: 48px;
    border-radius: 30px;
    border: 0;
}
.ac-btn-dark { background-color: #000; color: #fff; }
.ac-btn-dark:hover { background-color: #222; color: #fff; }
.ac-btn-accent {
    background-color: var(--primary);
    color: #fff;
    text-transform: uppercase;
    gap: 8px;
}
.ac-btn-accent:hover { filter: brightness(0.93); color: #fff; }
.ac-cta-sep { margin: 0 6px; }
.box-icon.ac-round {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
}
.box-icon.ac-round:hover { background: #000; color: #fff; border-color: #000; }
.ac-stock-line { display: block; margin-top: 8px; font-size: 13px; }

.ac-pd-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--main); }
.ac-pd-link .icon { font-size: 18px; }
.ac-pd-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.ac-pd-box {
    border: 1px solid var(--line);
    padding: 24px 18px;
    text-align: center;
}
.ac-pd-box .icon { font-size: 30px; display: block; margin-bottom: 12px; color: var(--main); }
.ac-pd-box p { margin: 0; font-size: 14px; }
.ac-pd-safe-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--main); }
.ac-pd-safe .tf-payment img { border-radius: 4px; background: #f2f2f2; object-fit: contain; }

@media (max-width: 575px) {
    .ac-buy .ac-buy-row { flex-wrap: wrap; }
    .ac-pd-boxes { grid-template-columns: 1fr; }
}

/* Sticky bar buttons follow the same pills */
.tf-sticky-btn-atc .ac-btn-dark { height: 44px; }
.tf-sticky-btn-atc .ac-qty.wg-quantity { height: 44px; }

/* Fixes after the first render ------------------------------------------- */
.footer .form-newsletter #subscribe-content { display: block; }
.footer .form-newsletter .button-submit { top: 6px; transform: none; }
#goTop, #goTop .border-progress { border-radius: 50%; }
.ac-qty.wg-quantity { width: auto; overflow: hidden; }
.ac-qty.wg-quantity .btn-quantity {
    border: 0 !important;
    background: transparent !important;
    height: 48px;
    width: 40px;
    font-size: 20px;
}
.ac-qty.wg-quantity input { height: 48px; width: 40px; text-align: center; }
.tf-sticky-btn-atc .ac-qty.wg-quantity .btn-quantity,
.tf-sticky-btn-atc .ac-qty.wg-quantity input { height: 44px; }

/* The base .radius-3 utility is !important, which kept square corners on
   buttons rendered by shared widgets (the footer Subscribe button). */
.tf-btn.radius-3:not(.btn-line) { border-radius: var(--accessora-radius-btn) !important; }
.footer .form-newsletter input[type="email"] { border-radius: 30px !important; }

/* Space between the Add to Cart row and Buy it now */
.ac-buy .ac-btn-accent { margin-top: 12px !important; }

/* Cart quantity: one grey pill with bare -/+ icons, as view-cart.html */
.tf-cart-item_quantity .wg-quantity {
    width: 110px;
    height: 36px;
    border-radius: 30px;
    background-color: #f2f2f2;
    align-items: center;
    padding: 0 6px;
}
.tf-cart-item_quantity .wg-quantity .btn-quantity {
    width: 28px;
    height: 36px;
    background: transparent !important;
    border: 0 !important;
    color: var(--main);
}
.tf-cart-item_quantity .wg-quantity input.quantity-input {
    width: 34px;
    height: 36px;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 14px;
    font-weight: 600;
    color: var(--main);
    -moz-appearance: textfield;
}
.tf-cart-item_quantity .wg-quantity input::-webkit-inner-spin-button,
.tf-cart-item_quantity .wg-quantity input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Checkout terms: the same round check as the payment method */
.agree-wrap.fieldset-radio { display: flex; align-items: center; gap: 8px; }
.agree-wrap.fieldset-radio label { margin: 0; cursor: pointer; }
.agree-wrap .tf-check { border-radius: 50%; }

/* Best Seller cards (show_cart_button): framed card, text aligned to the
   start, an always-visible outlined pill, and no hover bag icon. */
.card-product.style-8.ac-card-atc { display: flex; flex-direction: column; }
.card-product.style-8.ac-card-atc .card-product-info {
    text-align: start !important;
    align-items: stretch;
    padding: 12px 10px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.card-product.style-8.ac-card-atc .card-product-info .price { margin-bottom: 12px; }
.card-product.style-8.ac-card-atc .card-product-info .tf-btn { margin-top: auto !important; text-transform: uppercase; }
.card-product.style-8.ac-card-atc .list-product-btn .quick-add { display: none; }

/* Header menu: hovered and current links take the shop's main colour
   (Colors → main colour), underline included. */
#header .box-nav-ul li:hover > .item-link,
#header .box-nav-ul li.active > .item-link,
#header .box-nav-ul li.current-menu-item > .item-link { color: var(--primary); }
#header .box-nav-ul .item-link::before { background: var(--primary); }
#header .box-nav-ul .sub-menu a:hover { color: var(--primary); }

/* Support ticket form */
.ac-ticket-form input,
.ac-ticket-form textarea { border: 1px solid var(--line); }
.ac-ticket-form .tf-select { height: 50px; border-radius: 30px; padding-inline: 20px; }