/* =============================================================
   autoline.gr — Custom CSS
   Loaded via woodmart-child/functions.php (wp_enqueue_style 'child-custom')

   NOTE FOR DEVELOPERS:
   All custom CSS lives HERE, not in WP Customizer → Additional CSS.
   Customizer Additional CSS is intentionally empty.
   Edit this file, commit to git, and deploy to make CSS changes.
   ============================================================= */

.woocommerce-invalid .select2-container--default .select2-selection--single,
.woocommerce-invalid input:not(:focus) {
    border-color: #F49808;
}

.page-title-default {
    background-color: rgb(0, 56, 107);
    display: none;
}

.menu-mega-dropdown .sub-menu > li {
    margin-bottom: 9px;
}

.menu-item.item-level-0.menu-item-wishlist { display: none !important; }
.menu-item.item-level-0.menu-item-compare { display: none !important; }

.woodmart-widget .menu-mega-dropdown .sub-menu > li { margin-bottom: 10px; }
.mega-menu-list .sub-sub-menu li a, .menu-mega-dropdown .sub-sub-menu li a { line-height: 9px; }
.searchform input[type="text"] { font-size: 13px; }
.widget li, .woodmart-widget li, div[class^="vc_wp"] li { margin-bottom: 6px; }

.dokan-alert-danger, .dokan-alert-info, .dokan-alert-warning, .dokan-error, .dokan-info,
.mc4wp-error, .mc4wp-notice, .woocommerce-error, .woocommerce-info,
.wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output, div.wpcf7-mail-sent-ng, div.wpcf7-validation-errors {
    background-color: rgb(250, 166, 26);
}

.sub-sub-menu li a { color: #000000 !important; }
.sub-menu li a {
    color: #003874;
    -webkit-text-stroke-width: 0.1px;
    -webkit-text-stroke-color: black;
}

.product-label.out-of-stock { background-color: #e22d2d; color: #ffffff; }
.product-label.featured { background-color: #ffa500; }

.entry-content .vc_custom_1617716098643 { margin-bottom: 0vh !important; }
.fee small { display: none; }

div.product .cg-author {
    border-top: 1px solid #E6E6E6;
    width: 650px;
    margin-left: 300px;
}
@media only screen and (max-width: 1080px) and (orientation: portrait) {
    div.product .cg-author { border-top: 0; margin-left: 0; width: 670px; }
}
@media only screen and (max-width: 1300px) and (orientation: landscape) {
    div.product .cg-author { border-top: 0; width: 650px; margin-left: 0; }
}

.original-computed-price { display: none; }
.col-right { display: none; }
.scrollToTop { right: 100px !important; }
.btn-style-link { top: 18px; left: 65px; }

.wholesale_price_minimum_order_quantity { display: none !important; }
.wholesale_price_order_quantity_step { display: none !important; }

tr.woocommerce-product-attributes-item--weight:first-child .woocommerce-product-attributes-item__label:after {
    content: " μεταφορικών";
}
tr.woocommerce-product-attributes-item--weight:first-child .woocommerce-product-attributes-item__value:after {
    content: "ί";
    position: relative;
    left: 8px;
    color: #03a9f4;
    border: 1px solid #03a9f4;
    border-radius: 20px;
    padding: 4px;
    margin: 5px;
}
tr.woocommerce-product-attributes-item--weight:first-child .woocommerce-product-attributes-item__value:hover:after {
    content: "Ογκομετρικό ή καθαρό βάρος (όποιο είναι μεγαλύτερο)";
    left: 35px;
    margin-right: 0;
}


.wpce-field-term { padding: 0 0 0 15px !important; color: black; }
.wpce-field-buttons input { background-color: #00386c; color: white !important; border-radius: 25px; }

.editor-label { display: none; }
.vc_editor .editor-label { display: block !important; color: #888; font-size: 12px; }

.autoline-sku-search .woof_products_top_panel { display: none !important; }

/* Timologio — AADE verified state: Skroutz-style clean readonly fields */
.woocommerce-checkout .woocommerce-input-wrapper {
    position: relative;
    display: block;
}
.woocommerce-checkout .aade-verified input[readonly],
.woocommerce-checkout .aade-verified textarea[readonly] {
    background: #f7f8fa !important;
    border: 1px solid #dde1e7 !important;
    color: #333 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    padding-right: 36px !important;
}
.woocommerce-checkout .aade-verified label {
    color: #999 !important;
}
.woocommerce-checkout .aade-verified .select2-container.aade-locked .select2-selection--single {
    background: #f7f8fa !important;
    border-color: #dde1e7 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
/* Inline ✓ inside each verified field */
.field-check {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #2e7d32;
    font-size: 14px;
    font-weight: 700;
    pointer-events: none;
    line-height: 1;
    z-index: 1;
}
/* Ensure input text doesn't slide under the ✓ — force padding with maximum specificity */
.woocommerce-checkout .aade-verified .woocommerce-input-wrapper input,
.woocommerce-checkout .aade-verified .woocommerce-input-wrapper textarea,
.woocommerce-checkout .form-row .aade-verified input.input-text[readonly],
.woocommerce-checkout .form-row .aade-verified input[readonly] {
    padding-right: 46px !important;
    box-sizing: border-box !important;
}
/* Legacy badge — hidden, replaced by inline checkmarks */
.aade-check-badge { display: none !important; }

/* =============================================================
   Checkout styling REMOVED 2026-07-02 (redesign): the 2026-06-22
   checkout-revamp CSS lived here (~580 lines, ad-hoc grays/radii).
   The checkout is now styled by assets/css/al-cart-checkout.css
   on the al-design-tokens system. Do not re-add checkout rules here.
   ============================================================= */
/* ── Cookie notice — compact bar ── */
#cookie-notice {
    box-shadow: 0 -2px 8px rgba(0,0,0,0.12) !important;
}
.cookie-notice-container {
    padding: 8px 20px !important;
}
#cn-close-notice,
.cn-close-icon { display: none !important; }

/* ── My Account › Διευθύνσεις παράδοσης (multi-address book) ── */
.autoline-addr-table { width: 100%; border-collapse: collapse; margin-bottom: 28px; }
.autoline-addr-table td {
    border: 1px solid #e5e7eb;
    padding: 14px 16px;
    vertical-align: top;
    font-size: 13px;
    line-height: 1.5;
}
.autoline-addr-table td:first-child { border-radius: 10px 0 0 10px; }
.autoline-addr-table td.autoline-addr-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    border-radius: 0 10px 10px 0;
}
.autoline-addr-actions a { display: inline-block; margin: 0 0 8px; font-size: 13px; }
.autoline-addr-del {
    background: none; border: none; color: #b42318;
    cursor: pointer; font-size: 13px; text-decoration: underline; padding: 0;
}
.autoline-addr-form { max-width: 480px; }
.autoline-addr-row { display: flex; flex-direction: column; margin-bottom: 14px; }
.autoline-addr-row label { font-size: 12px; font-weight: 600; color: #344054; margin-bottom: 5px; }
.autoline-addr-input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #d0d5dd;
    border-radius: 8px;
    font-size: 14px;
}
.autoline-addr-cancel { margin-left: 12px; font-size: 13px; }


/* ── Compatibility finder (wpce) — modern + responsive ───────────────────────
   Applies to every wpce finder (car covers, snow chains, …). Loads after the
   plugin CSS so these win. Vertical layout, full-width, clean on all screens. */
.wpce-filter-widget-inner { max-width: 480px; margin: 0 auto; }
.wpce-filter-widget-inner .wpce-field { margin-bottom: 12px !important; }

/* Dropdowns — native <select> and the select2 box, matched */
.wpce-filter-widget-inner .wpce-field select,
.wpce-filter-widget-inner .wpce-field .select2-container .select2-selection--single {
    height: 50px !important;
    border: 1.5px solid #d4dae6 !important;
    border-radius: 10px !important;
    background: #fff !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    color: #1a2b4a !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
.wpce-filter-widget-inner .wpce-field select:hover,
.wpce-filter-widget-inner .wpce-field .select2-container .select2-selection--single:hover {
    border-color: #9fb3d4 !important;
}
.wpce-filter-widget-inner .wpce-field select:focus,
.wpce-filter-widget-inner .wpce-field .select2-container--open .select2-selection--single {
    border-color: #003874 !important;
    box-shadow: 0 0 0 3px rgba(0,56,116,.12) !important;
}
/* select2 inner text + arrow aligned to the 50px height */
.wpce-filter-widget-inner .wpce-field .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 48px !important; padding: 0 !important; color: #1a2b4a !important;
}
.wpce-filter-widget-inner .wpce-field .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px !important; right: 12px !important;
}

/* Search button — prominent, brand blue, full-width */
.wpce-filter-widget-inner .wpce-field-buttons { margin-top: 4px !important; }
.wpce-filter-widget-inner .wpce-field-buttons input {
    width: 100% !important;
    height: 50px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #003874 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
    text-transform: none !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0,56,116,.25) !important;
    transition: background .15s ease, transform .05s ease !important;
}
.wpce-filter-widget-inner .wpce-field-buttons input:hover { background: #00254d !important; }
.wpce-filter-widget-inner .wpce-field-buttons input:active { transform: translateY(1px) !important; }

/* ── [autoline_finder] — responsive fitment finder ───────────────────────────
   Desktop: title + horizontal "Μάρκα | Μοντέλο | Αναζήτηση" bar, image at right.
   ≤880px: image drops below (kept small). ≤560px: the bar stacks full-width.
   No flex-wrap anywhere (that caused the image to jump and fields to collide);
   the bar shrinks instead, and select2 is forced to obey the container width. */
.al-finder {
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 16px;
    padding: 22px 26px;
    box-shadow: 0 10px 30px rgba(0, 40, 90, .06);
    display: flex;
    align-items: stretch;
    gap: 24px;
}
/* left column: title on top, finder bar below */
.al-finder__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.al-finder__text { margin-bottom: 16px; }
.al-finder__title { font-size: 23px; line-height: 1.2; font-weight: 800; color: #003874; margin: 0 0 4px; }
.al-finder__sub { font-size: 14.5px; color: #5b6b86; margin: 0; }
/* image: right column, spans the FULL card height so it lines up with the bar */
.al-finder__media { flex: 0 0 auto; display: flex; align-items: center; }
.al-finder__media img { max-width: 240px; max-height: 100%; width: auto; height: auto; display: block; }

/* the finder bar fills the left column */
.al-finder__widget .wpce-filter-widget-inner { max-width: none; margin: 0; }
.al-finder__widget .wpce-filter-widget-inner form { display: flex !important; flex-wrap: nowrap; gap: 12px; align-items: stretch; }
/* real width basis so selectWoo can't freeze the dropdowns at zero width */
.al-finder__widget .wpce-field { flex: 1 1 40% !important; min-width: 0 !important; width: auto !important; margin: 0 !important; }
.al-finder__widget .wpce-field-buttons { flex: 0 0 auto !important; width: auto !important; min-width: 0; margin: 0 !important; }
/* force the rendered dropdown to fill its field (plugin leaves width:'100%' off) */
.al-finder .wpce-field .select2-container,
.al-finder .wpce-field .select2,
.al-finder .wpce-field select { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
/* slimmer controls inside the card (44px instead of 50px) */
.al-finder .wpce-field select,
.al-finder .wpce-field .select2-container .select2-selection--single,
.al-finder .wpce-field-buttons input { height: 44px !important; }
.al-finder .wpce-field .select2-container .select2-selection--single .select2-selection__rendered { line-height: 42px !important; }
.al-finder .wpce-field .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px !important; }

/* Responsive stacking is handled by CONTAINER queries at the bottom of this file.
   (The old viewport @media blocks were removed — they fought the container query
   mid-resize and let the bar spill the card border.) */

/* wpce dropdown options: the plugin hard-codes height/line-height 30px, so long
   (wrapped) option text overlaps. Let each option grow and wrap cleanly. */
.select2-container--open .select2-dropdown--below .select2-results__option {
    height: auto !important;
    min-height: 32px;
    line-height: 1.35 !important;
    padding: 7px 12px !important;
    white-space: normal !important;
    display: flex;
    align-items: center;
}

/* Wholesale STATUS indicator (NOT a button) — green "active" dot + label */
.al-wholesale-menutag { display: inline-flex !important; align-items: center; }
.al-wholesale-menutag > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eef3f8;
    color: #2a3b52;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 11px;
    border-radius: 4px;
    line-height: 1.5;
    white-space: nowrap;
    cursor: default;
}
.al-wholesale-menutag > span::before {
    content: "";
    width: 7px; height: 7px; border-radius: 50%;
    background: #2bbf5c; flex: 0 0 auto;
    animation: al-wh-pulse 2.4s ease-in-out infinite;
}
@keyframes al-wh-pulse {
    0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(43, 191, 92, .5); }
    50%      { opacity: .55; box-shadow: 0 0 0 4px rgba(43, 191, 92, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .al-wholesale-menutag > span::before,
    .al-wholesale-strip::before { animation: none !important; }
}
/* Mobile/tablet: thin status strip under the header (menu badge is in the drawer there) */
.al-wholesale-strip { display: none; }
@media (max-width: 1024px) {
    .al-wholesale-strip {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        background: #00386b;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        padding: 6px 12px;
    }
    .al-wholesale-strip::before {
        content: "";
        width: 7px; height: 7px; border-radius: 50%;
        background: #2bbf5c;
        animation: al-wh-pulse 2.4s ease-in-out infinite;
    }
}

/* =============================================================
   Categories mega-menu — Electronics-3 style (2026-06)
   Scope: .wd-dropdown-cats / .whb-wjlcubfdmlq3d7jvmt23 ("Κατηγορίες")
   ============================================================= */

/* --- Opener: relabel to "ΚΑΤΗΓΟΡΙΕΣ" + round corners --- */
.whb-wjlcubfdmlq3d7jvmt23 .menu-open-label{ font-size:0 !important; }
.whb-wjlcubfdmlq3d7jvmt23 .menu-open-label::after{
    content:"ΚΑΤΗΓΟΡΙΕΣ";
    font-size:13px; font-weight:600; letter-spacing:.4px;
}
.whb-wjlcubfdmlq3d7jvmt23 .menu-opener.has-bg{ border-radius:10px !important; }

/* --- Main category list: light panel, LEFT side rounded (unified with flyout) --- */
.wd-dropdown-cats .wd-nav-vertical{
    background:#fff;
    border-radius:14px 0 0 14px;
    padding:10px;
    box-shadow:-8px 16px 40px -8px rgba(0,0,0,.16);   /* shadow on OUTER (left) side only -> no seam */
}
.wd-dropdown-cats .wd-nav-vertical > li.menu-item{ margin:2px 0; }
.wd-dropdown-cats .wd-nav-vertical > li.menu-item > .woodmart-nav-link{
    border-radius:10px;
    padding:10px 16px;
    font-weight:600;
    transition:background .15s ease, color .15s ease;
}
.wd-dropdown-cats .wd-nav-vertical .wd-nav-img{
    width:26px; height:26px; object-fit:contain; margin-right:12px; border-radius:6px;
}

/* --- Active / hover main item: orange highlight (where you are) --- */
.wd-dropdown-cats .wd-nav-vertical > li.menu-item:hover > .woodmart-nav-link,
.wd-dropdown-cats .wd-nav-vertical > li.menu-item.current-menu-item > .woodmart-nav-link{
    background:#f5a623 !important;
    color:#1f2147 !important;
}
.wd-dropdown-cats .wd-nav-vertical > li.menu-item:hover > .woodmart-nav-link .nav-link-text,
.wd-dropdown-cats .wd-nav-vertical > li.menu-item.current-menu-item > .woodmart-nav-link .nav-link-text{
    color:#1f2147 !important;
}

/* --- Active category driven by JS hover-intent (.al-mm-open): exactly one category
   is active at a time (1st by default). Its link is highlighted and its subcategory
   panel is FORCED open, so moving the mouse from the category across to the panel
   never loses hover / closes it. Force-open is scoped to the menu being open
   (:hover) to avoid a closed-state phantom-open. JS file: js/megamenu.js --- */
.wd-dropdown-cats .wd-nav-vertical > li.menu-item.al-mm-open > .woodmart-nav-link{
    background:#f5a623; color:#1f2147;
}
.wd-dropdown-cats .wd-nav-vertical > li.menu-item.al-mm-open > .woodmart-nav-link .nav-link-text{ color:#1f2147; }
.whb-wjlcubfdmlq3d7jvmt23:hover .wd-dropdown-cats .wd-nav-vertical > li.menu-item.al-mm-open > .wd-dropdown-menu{
    opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    display:block !important; transform:none !important;
}

/* --- Flyout PINNED to a fixed position (column-relative, not item-relative) ---
   Was anchoring to each item (Y shifted). Static li -> anchors to the column,
   full-height window sits to the right of every item (no hover gap). --- */
.wd-dropdown-cats .wd-nav-vertical > li.menu-item.menu-mega-dropdown{ position:static !important; }
/* FULL-HEIGHT panel (top:0 + bottom:0): covers EVERY category row, so moving the
   mouse right from any category (not just the 1st) lands on the panel instead of
   a dead zone -> the subcategory window no longer closes on the diagonal move. */
.wd-dropdown-cats .wd-dropdown-menu.wd-design-sized{ top:0 !important; bottom:0 !important; }

/* --- Subcategory flyout: RIGHT side rounded, merges with column into one panel --- */
.wd-dropdown-cats .wd-dropdown-menu.wd-design-sized{
    border-radius:0 14px 14px 0 !important;
    box-shadow:10px 16px 44px -8px rgba(0,0,0,.16);   /* shadow on OUTER (right) side only -> no seam */
    background:#fff;
    overflow:hidden;
    width:940px !important;                            /* wider so the subcategories fit */
}

/* --- 2nd-level subcategory text in brand blue (NOT 3rd level) --- */
.wd-dropdown-cats .wd-dropdown-menu .wd-sub-menu.mega-menu-list > li > a,
.wd-dropdown-cats .wd-dropdown-menu .wd-sub-menu.mega-menu-list > li > a > .nav-link-text{
    color:#00386b !important;
}

/* --- Center "ΚΑΤΗΓΟΡΙΕΣ" in the wide button (icon absolute-left; DON'T change display = keep width) --- */
.whb-wjlcubfdmlq3d7jvmt23 .menu-opener{ position:relative !important; text-align:center !important; }
.whb-wjlcubfdmlq3d7jvmt23 .menu-opener .menu-opener-icon{ position:absolute !important; left:16px; top:50%; transform:translateY(-50%); margin:0 !important; }
.whb-wjlcubfdmlq3d7jvmt23 .menu-opener .menu-open-label{ flex:1 1 auto !important; text-align:center !important; margin:0 !important; }

/* --- Keep the left-column category icons/images visible --- */
.wd-dropdown-cats .wd-nav-vertical .wd-nav-img,
.wd-dropdown-cats .wd-nav-vertical .woodmart-nav-link img,
.wd-dropdown-cats .wd-nav-vertical i[class*="icon"]{ display:inline-block !important; opacity:1 !important; visibility:visible !important; }

/* --- Window: fixed WIDTH + fixed TOP (no Y-jump); height fits content (no bottom bar) --- */
.wd-dropdown-cats .wd-nav-vertical > li.menu-item{ --wd-dropdown-width:940px !important; }
.wd-dropdown-cats .wd-dropdown-menu.wd-design-sized{ min-height:100% !important; height:auto !important; }

/* --- Dim the rest of the screen while the categories menu is open --- */
.whb-wjlcubfdmlq3d7jvmt23{ position:relative; }
.whb-wjlcubfdmlq3d7jvmt23:hover{ z-index:9990; }
.whb-wjlcubfdmlq3d7jvmt23:hover::after{
    content:""; position:fixed; inset:0;
    background:rgba(0,0,0,.5);
    z-index:-1; pointer-events:none;
}

/* =============================================================
   Finder (al-finder) — respond to its CONTAINER width, not the
   viewport, so it stacks when dropped into a narrow column.
   Narrow -> text, make, model, search, car (image) stacked.
   ============================================================= */
.al-finder { container-type: inline-size; flex-wrap: wrap; overflow: hidden; }
/* Stack (image below + fields full-width) whenever the finder's OWN width is below
   760px — covers the narrow column at every screen size, no resize glitch. */
@container (max-width: 760px) {
    .al-finder { padding: 20px; }
    .al-finder__title { font-size: 20px; }
    .al-finder__main  { flex: 1 1 100% !important; min-width: 0; }
    .al-finder__media { flex: 1 1 100% !important; order: 2; justify-content: center; margin-top: 6px; }
    .al-finder__media img { max-height: 130px; }
    .al-finder__widget .wpce-filter-widget-inner form { flex-direction: column !important; flex-wrap: wrap; }
    .al-finder__widget .wpce-field,
    .al-finder__widget .wpce-field-buttons {
        flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box;
    }
}

/* Mobile (≤767px): show the slideshow ABOVE the finder.
   Class "al-finder-col" is on the FINDER's column (Column → Extra class name).
   WPBakery rows aren't flex on mobile, so we force the parent row to flex (via :has)
   so the column's `order` actually takes effect. */
@media (max-width: 767px) {
    .vc_row:has(> .al-finder-col) { display: flex !important; flex-direction: column; }
    .al-finder-col { order: 2 !important; }
}

/* --- WPBakery FRONTEND EDITOR: don't let the categories mega-menu auto-open or dim
       the page (it covers the editing canvas). Live visitors are unaffected. --- */
.vc_editor .wd-dropdown.wd-dropdown-cats { display: none !important; }   /* hide the whole auto-opened panel, not just the flyout */
.vc_editor .wd-dropdown-cats .wd-dropdown-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.vc_editor .whb-wjlcubfdmlq3d7jvmt23:hover::after,
.vc_editor .whb-wjlcubfdmlq3d7jvmt23::after { content: none !important; background: transparent !important; }
.vc_editor .whb-wjlcubfdmlq3d7jvmt23:hover { z-index: auto !important; }

/* =============================================================
   Desktop hero: make the finder card fill its column so it lines
   up to the SAME HEIGHT as the slideshow beside it.
   (WPBakery columns are already equal-height; the card just wasn't
   filling its column.) Uses :has() so no extra class is needed.
   ============================================================= */
@media (min-width: 768px) {
    .vc_row:has(.al-finder) { align-items: stretch !important; }
    .wpb_column:has(.al-finder) > .vc_column-inner,
    .wpb_column:has(.al-finder) > .vc_column-inner > .wpb_wrapper { height: 100% !important; }
    .al-finder { height: 100% !important; box-sizing: border-box; }
}

/* Center all product-row section titles */
.al-crow__title, .al-cmq__title, .al-prow__title { text-align: center; }

/* =============================================================
   Dynamic split row: Νέα | Δημοφιλή (widths proportional to count)
   ============================================================= */
.al-split { display:flex; align-items:stretch; gap:0; margin:35px 0; }
.al-split__col { min-width:0; padding:0 20px; box-sizing:border-box; }
.al-split__col:first-child { padding-left:4px; }
.al-split__col--best { border-left:2px solid #e6ecf5; }
.al-split__label { text-align:center; font-size:18px; font-weight:700; color:#003874; margin:0 0 14px; }
.al-split__cards { display:flex; gap:14px; }
.al-split__cards > .al-card { flex:1 1 0; min-width:0; }
@media (max-width:768px) {
    .al-split { flex-direction:column; gap:22px; }
    .al-split__col--best { border-left:0; border-top:2px solid #e6ecf5; padding-top:18px; }
    .al-split__cards { flex-wrap:wrap; }
    .al-split__cards > .al-card { flex:0 0 calc(50% - 7px); }
}


/* =============================================================
   Homepage product-row cards + carousels (moved out of the inline
   print-once <style> so a role-hide plugin's render pass can't strip
   it and leave the rows un-flexed / vertical).
   ============================================================= */
.al-card{position:relative;display:flex;flex-direction:column;text-align:center;text-decoration:none;color:#222;background:transparent;border:0;transition:transform .2s}
.al-card:hover{transform:translateY(-3px)}
.al-card__img{position:relative;display:block;aspect-ratio:1/1;background:#f7f7f7;border-radius:8px;overflow:hidden}
.al-card__img img{width:100%!important;height:100%!important;object-fit:contain;display:block;margin:0}
.al-card__badges{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:5px;z-index:2}
.al-card__badge{font-size:11px;font-weight:600;line-height:1;padding:4px 7px;border-radius:4px;color:#fff}
.al-badge--sale{background:#e1442e}.al-badge--new{background:#1aa14f}.al-badge--hot{background:#ff7a00}.al-badge--oos{background:#6b7280}
.al-card__name{font-size:13px;line-height:1.35;margin:10px 6px 4px;height:36px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.al-card__sku{display:block;font-size:11px;color:#999;margin:0 6px 6px}
.al-card__price{font-weight:700;margin:auto 6px 12px;font-size:15px;color:#0f1b2d;text-align:center}
.al-card__price del{font-weight:400;opacity:.55;font-size:.85em;margin-right:5px}.al-card__price ins{text-decoration:none}
.al-crow{margin:35px 0}.al-crow__title{font-size:22px;font-weight:600;margin:0 0 16px;padding:0 4px}.al-crow__wrap{position:relative}
.al-crow__track{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:4px 2px 14px;scrollbar-width:thin}
.al-crow__track .al-card{flex:0 0 calc((100% - 7 * 14px) / 8);scroll-snap-align:start}
.al-crow__track::-webkit-scrollbar{height:7px}.al-crow__track::-webkit-scrollbar-thumb{background:rgba(15,27,45,.22);border-radius:4px}
.al-crow__nav{position:absolute;top:38%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18);color:#0f1b2d;font-size:24px;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center}
.al-crow__nav:hover{background:#0f1b2d;color:#fff}.al-crow__prev{left:-6px}.al-crow__next{right:-6px}.al-crow__nav[hidden]{display:none}
@media(max-width:1024px){.al-crow__track .al-card{flex:0 0 calc((100% - 3 * 14px) / 4)}}
@media(max-width:768px){.al-crow__track .al-card{flex:0 0 42vw}.al-crow__nav{display:none}.al-crow__title{font-size:18px}}
.al-cmq{margin:35px 0}.al-cmq__title{font-size:22px;font-weight:600;margin:0 0 16px;padding:0 4px}.al-cmq__wrap{overflow:hidden;position:relative}
.al-cmq__track{display:flex;width:max-content;animation:al-cmq-move linear infinite;will-change:transform}
.al-cmq__wrap:hover .al-cmq__track{animation-play-state:paused}.al-cmq__track .al-card{margin-right:14px}
@keyframes al-cmq-move{from{transform:translateX(0)}to{transform:translateX(-50%)}}@media(max-width:768px){.al-cmq__title{font-size:18px}}

/* =============================================================
   Role-based show/hide WITHOUT removing the element from the DOM
   (DOM-removal via WPBakery "Visible for roles" breaks WoodMart
   Swiper carousels -> vertical rows). Add these classes to any
   element's WPBakery "Extra class name" instead.
   ============================================================= */
body.wholesale .hide-for-wholesale { display: none !important; }      /* hide from wholesale */
body:not(.wholesale) .show-for-wholesale { display: none !important; } /* show ONLY to wholesale */

/* B2B card add-to-cart: native loop button + Min Max qty (in stock) / Xoo Waitlist (OOS) */
.al-card__img, .al-card__name { text-decoration:none !important; color:inherit; }
.al-card__cart { margin-top:6px; padding:0 6px 10px; }
.al-card__cart form.cart, .al-card__cart .wcmmq-ajax-add-to-cart { display:flex !important; gap:6px; align-items:center; justify-content:center; margin:0; flex-wrap:nowrap; }
.al-card__cart .quantity input.qty { width:46px; height:38px; text-align:center; border-radius:8px; padding:0; }
.al-card__cart a.button, .al-card__cart button, .al-card__cart .add_to_cart_button, .al-card__cart .single_add_to_cart_button {
    height:38px; line-height:38px; padding:0 14px; font-size:13px; border-radius:8px; background:#00386c; color:#fff; display:inline-flex; align-items:center; justify-content:center;
}
.al-card__cart .xoo-wl-loop-btn, .al-card__cart .xoo-wl-btn { width:100%; }