/* ═══════════════════════════════════════════════════════════
   mobile_v2.css — ProfitStore Mobile Template v2
   Loads INSTEAD of mobile.css when cookie pv=2
   ═══════════════════════════════════════════════════════════ */

/* Lock text size to our design baseline. Without this Firefox on Android
   (and some other browsers) honors the OS-level "Display size / Font size"
   accessibility multiplier and inflates everything → broken layouts on
   users with the Android system font scale set above 100%.
   Chrome already ignores it; this just brings Firefox in line. */
html {
    -moz-text-size-adjust: 100% !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

/* Cap mobile_v2 layout at 600px on large viewports (tablets in portrait,
   testers in desktop with pv=2). Below 600px (real phones) zero impact.
   Centered with auto margins; outer body bg shows on the sides.
   Includes ALL top-level containers under body that contain page chrome:
   header, content, reviews block, footer, preview bar. */
@media (min-width: 600px) {
    body > .mobile_header,
    body > .mobile_content,
    body > .mobile_bottom,
    body > .mobile_footer,
    body > .v2-footer,
    body > #s5_bottom_rewies,
    body > #v2-preview-bar {
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
}

/* ── Variables ───────────────────────────────────────────── */
:root {
    --primary:      #2588a6;
    --primary-dk:   #1a6a84;
    --primary-lt:   #3cb4d9;
    --accent:       #c2e1f5;
    --accent-bg:    #eaf6fd;
    --white:        #ffffff;
    --bg:           #f2f5f8;
    --text:         #2e2e2e;
    --text-lt:      #666666;
    --border:       #dde3e8;
    --shadow-sm:    0 1px 4px rgba(0,0,0,.08);
    --shadow:       0 2px 10px rgba(0,0,0,.12);
    --shadow-lg:    0 4px 20px rgba(0,0,0,.16);
    --radius:       9px;
    --radius-lg:    14px;
    --radius-xl:    20px;
    --hdr-h:        68px;   /* icon row — bumped from 58 for bigger logo */
    --srch-h:       48px;   /* search row */
    --bot-h:        56px;   /* bottom nav */
    --top-pad:      124px;  /* hdr-h + srch-h + 8 buffer */
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img, fieldset {
    border: none;
    max-width: 100%;
    height: auto;
}

textarea { max-width: 100%; }
.clear { clear: both; float: none; }

/* ── Base ────────────────────────────────────────────────── */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif, 'Segoe UI Symbol', 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI Emoji';
    font-size: 14px;
    line-height: 1.55;
    background: var(--bg);
    color: var(--text);
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

a {
    color: var(--primary-lt);
    text-decoration: none;
}
a:hover { color: var(--primary); }

label {
    font-family: inherit;
    color: var(--primary-lt);
}

/* ── HEADER ──────────────────────────────────────────────── */
.mobile_header {
    position: static;
    background: var(--white);
    box-shadow: var(--shadow);
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 6px;
    /* scrolls with the page so small phones get full vertical space */
}

.mobile_header.is-scrolled {
    box-shadow: var(--shadow-lg);
}

/* icon row items */
.mobile_header > div.mobile_menu {
    flex-shrink: 0;
    float: none;
    margin: 0;
    order: 1;
    display: flex !important;
    align-items: center !important;
    height: var(--hdr-h) !important;
}
/* Menu hamburger — SOLID blue bg, big bold orange lines */
.mobile_header > div.mobile_menu > span.mt_icon {
    background: #2588a6 !important;
    border-radius: 11px !important;
    width: 42px !important;
    height: 42px !important;
    box-shadow: 0 2px 6px rgba(37,136,166,.30) !important;
    transition: transform .12s ease, box-shadow .15s ease !important;
}
.mobile_header > div.mobile_menu > span.mt_icon:active {
    transform: scale(0.90) !important;
    box-shadow: 0 1px 3px rgba(37,136,166,.18) !important;
}
/* Cart + Account: same tap-scale feedback as menu button */
.mobile_header > div.mobile_cart > span:active,
.mobile_header > div.mobile_account > span:active {
    transform: scale(0.88) !important;
    opacity: 0.80 !important;
    transition: transform .08s ease, opacity .08s ease !important;
}
.mobile_header > div.mobile_menu svg.v2-icon {
    color: #f97316 !important;
    stroke: #f97316 !important;
    width: 26px !important;
    height: 26px !important;
    stroke-width: 3 !important;
    stroke-linecap: round !important;
}
/* Cart + Account icons — blue body with orange accent details:
   Cart: the two wheel circles get an orange fill
   Account: the head circle gets an orange stroke */
.mobile_header > div.mobile_cart > span,
.mobile_header > div.mobile_account > span {
    position: relative !important;
}
.mobile_header > div.mobile_cart svg.v2-icon circle {
    fill: #f97316 !important;
    color: #f97316 !important;
    stroke: #f97316 !important;
}
.mobile_header > div.mobile_account svg.v2-icon circle {
    stroke: #f97316 !important;
    color: #f97316 !important;
    fill: rgba(249, 115, 22, .12) !important;
}

.mobile_header > div.mobile_logo {
    flex: 1;
    float: none;
    height: var(--hdr-h);
    display: flex;
    align-items: center;
    padding-left: 6px;
    order: 2;
}

.mobile_header > div.mobile_logo img {
    max-height: 56px;
    width: auto;
    height: auto;
    margin-top: 0;
    display: block;
    /* protect against system font scaling — fixed pixel ceiling */
    flex-shrink: 0;
}
.mobile_header > div.mobile_logo {
    flex-shrink: 1;
    min-width: 0; /* allow logo to shrink before icons get cramped */
}

.mobile_header > div.mobile_account,
.mobile_header > div.mobile_cart {
    flex-shrink: 0;
    float: none;
    width: auto;
    margin: 0;
    order: 3;
}

/* Phone bar — full-width row below the icon row, above the search.
   Legacy ak.css sets position:absolute; top:75px on .mobile_header_phonne
   which makes the search row OVERLAP the phone — must reset. */
.mobile_header > div.mobile_header_phonne,
.mobile_header_phonne {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    order: 9 !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    border-top: 1px solid var(--border) !important;
    background: var(--white) !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}
.mobile_header > div.mobile_header_phonne a {
    color: var(--primary) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-right: 6px !important;       /* space before "(10 γραμμές)" */
    white-space: nowrap !important;
}
/* Phone icon prefix — red SVG telephone (consistent across all platforms). */
.mobile_header > div.mobile_header_phonne a::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc2626'><path d='M19.95 17.4c-1.18 0-2.32-.18-3.4-.55a.96.96 0 0 0-.97.22l-2.1 2.1c-2.7-1.4-4.95-3.65-6.35-6.35l2.1-2.1c.27-.27.36-.66.22-.97-.37-1.08-.55-2.22-.55-3.4 0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.4 7.6 17 17 17 .55 0 1-.45 1-1v-3.95c0-.55-.45-1-1.05-1z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    vertical-align: middle;
}
/* Force horizontal alignment of label + link + suffix text on the same
   vertical baseline (the legacy Joomla module wraps its content in <p>
   which mixes text nodes and inline-flex link — needs explicit flex). */
.mobile_header > div.mobile_header_phonne .moduletable,
.mobile_header > div.mobile_header_phonne p {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.mobile_header > div.clear { display: none; }

/* search row — spans full width */
.mobile_header > div.mobile_search {
    order: 10;
    width: 100%;
    height: var(--srch-h);
    margin: 0;
    padding: 5px 10px 7px;
    border-top: 1px solid var(--border);
    background: var(--white);
    position: static; /* override old positioning */
}

/* ── ICON SPANS — modern stroke-style SVG icons ───────────── */
.mobile_bar > div > span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--hdr-h);
    width: 48px;
    background: none;
    background-image: none !important;
    cursor: pointer;
    border-radius: 0;
    margin: 0;
    transition: background 0.15s;
    position: relative;
}

.mobile_bar > div > span:active {
    background: var(--accent-bg);
}

/* Hide legacy FA icons — replaced by SVGs injected via JS */
.mobile_bar > div > span > i.fa { display: none !important; }

.mobile_bar > div > span > i {
    font-size: 22px;
    color: var(--primary);
    pointer-events: none;
}

.mobile_bar > div > span > svg.v2-icon {
    width: 28px;
    height: 28px;
    color: var(--primary);
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transition: color .15s ease, transform .1s ease;
}
.mobile_bar > div:active > span > svg.v2-icon {
    transform: scale(0.92);
}
.mobile_bar > div.active > span > svg.v2-icon {
    color: var(--primary-dk);
}

/* Bottom-bar SVGs slightly smaller */
.mobile_bottom.mobile_bar > div > span > svg.v2-icon {
    width: 24px;
    height: 24px;
}

/* Cart count badge — rendered by JS if VM cart has items */
.mobile_bar .v2-cart-count {
    position: absolute;
    top: 8px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(239,68,68,.4);
    pointer-events: none;
}

/* bottom bar spans slightly smaller */
.mobile_bottom.mobile_bar > div > span {
    height: var(--bot-h);
    width: 100%;
    flex-direction: column;
    gap: 2px;
}

.mobile_bottom.mobile_bar > div > span > i {
    font-size: 20px;
}

/* home link in bottom bar */
.mobile_bottom.mobile_bar > div.home > span {
    background: none;
}

.mobile_bottom.mobile_bar > div.home > span > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--primary);
    font-size: 22px;
}

/* active icon color */
.mobile_bar > div.active > span > i {
    color: var(--primary-dk);
}

/* suppress old background-image overrides */
.mobile_header > div.mobile_account > span,
.mobile_header > div.mobile_cart > span,
.mobile_header > div.mobile_menu > span {
    background-image: none !important;
}

/* ── SEARCH INPUT ────────────────────────────────────────── */
.mobile_search {
    position: relative;
}

.mobile_search #vm_search_keyword {
    width: 100%;
    height: 32px;
    padding: 0 38px 0 14px;
    border: 1.5px solid var(--accent);
    border-radius: 20px;
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.mobile_search #vm_search_keyword:focus {
    border-color: var(--primary-lt);
    box-shadow: 0 0 0 3px var(--accent-bg);
    background: var(--white);
}

.mobile_search #s5_vm_search_button_middle { display: none; }

/* ── POPUP SYSTEM ────────────────────────────────────────── */
.mobile_bar > div > div.popupContent { display: none; }

/* header popups — DRAWER style with backdrop + slide animation */
.mobile_header.mobile_bar > div.active > div.popupContent {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1500;
    overflow: hidden;
    padding: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: v2-backdrop-fade .25s ease;
}
@keyframes v2-backdrop-fade {
    from { background: rgba(15, 23, 42, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
    to   { background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
}

.mobile_header.mobile_bar > div.active > div.popupContent > div {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--white);
    width: 86%;
    max-width: 340px;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 8px 40px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.18);
    border: none;
    min-height: 0;
}

/* Menu drawer = slide from LEFT (matches its position in header) */
.mobile_header.mobile_bar > div.mobile_menu.active > div.popupContent > div {
    left: 0;
    border-radius: 0 18px 18px 0;
    border-right: 3px solid #f97316; /* brand-orange edge accent */
    animation: v2-drawer-in-left .28s cubic-bezier(.2,.8,.25,1);
}
@keyframes v2-drawer-in-left {
    from { transform: translateX(-110%); }
    to   { transform: translateX(0); }
}

/* Cart + Account drawers = slide from RIGHT */
.mobile_header.mobile_bar > div.mobile_cart.active > div.popupContent > div,
.mobile_header.mobile_bar > div.mobile_account.active > div.popupContent > div {
    right: 0;
    border-radius: 18px 0 0 18px;
    border-left: 3px solid #f97316;
    animation: v2-drawer-in-right .28s cubic-bezier(.2,.8,.25,1);
}
@keyframes v2-drawer-in-right {
    from { transform: translateX(110%); }
    to   { transform: translateX(0); }
}

/* ── Account drawer — modern login form styling ─────────────── */
.mobile_header.mobile_bar > div.mobile_account.active > .popupContent > div h3 {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #1f2937 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    border-bottom: 2px solid var(--accent) !important;
    padding: 0 0 8px !important;
    margin: 0 0 12px !important;
}
.mobile_header.mobile_bar > div.mobile_account.active label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    margin: 0 0 4px !important;
}
.mobile_header.mobile_bar > div.mobile_account.active input[type="text"],
.mobile_header.mobile_bar > div.mobile_account.active input[type="password"],
.mobile_header.mobile_bar > div.mobile_account.active input[type="email"] {
    width: 100% !important;
    height: 42px !important;
    padding: 0 12px !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background: #fff !important;
    color: #111827 !important;
    box-sizing: border-box !important;
    margin: 0 0 10px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mobile_header.mobile_bar > div.mobile_account.active input[type="text"]:focus,
.mobile_header.mobile_bar > div.mobile_account.active input[type="password"]:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(37,136,166,.15) !important;
}
.mobile_header.mobile_bar > div.mobile_account.active input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    margin: 0 6px 0 0 !important;
    accent-color: #f97316 !important;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    vertical-align: middle;
    cursor: pointer;
}
.mobile_header.mobile_bar > div.mobile_account.active input[type="submit"] {
    width: 100% !important;
    height: 46px !important;
    border: none !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    cursor: pointer !important;
    box-shadow: 0 3px 8px rgba(37,136,166,.35) !important;
    margin: 12px 0 14px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: filter .15s ease, transform .1s ease;
}
.mobile_header.mobile_bar > div.mobile_account.active input[type="submit"]:hover { filter: brightness(1.05); }
.mobile_header.mobile_bar > div.mobile_account.active input[type="submit"]:active { transform: scale(0.98); }
.mobile_header.mobile_bar > div.mobile_account.active a {
    display: block !important;
    font-size: 13px !important;
    color: var(--primary) !important;
    text-decoration: none !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    font-weight: 600 !important;
    border-bottom: 1px dashed #eef0f3;
}
.mobile_header.mobile_bar > div.mobile_account.active a:last-child {
    border-bottom: none !important;
}
.mobile_header.mobile_bar > div.mobile_account.active a:hover { text-decoration: underline !important; }

/* ── Tight spacing in account drawer login form ─────────────────────
   Legacy form#login uses <br/> tags between fields — we hide them and
   let the input's margin-bottom provide consistent spacing. The <ul>
   list of links also gets compact rules. SCOPED to .mobile_account.active
   so RMA / popup / register forms (which also use form id=login on the
   same page) are NOT affected. */
.mobile_header.mobile_bar > div.mobile_account.active form#login br {
    display: none !important;
}
.mobile_header.mobile_bar > div.mobile_account.active form#login ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 6px 0 0 !important;
}
.mobile_header.mobile_bar > div.mobile_account.active form#login ul li {
    list-style: none !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}
.mobile_header.mobile_bar > div.mobile_account.active form#login ul li:last-child {
    margin-bottom: 0 !important;
}

/* ΑΠΟΘΗΚΕΥΣΗ label + checkbox on same line (override the generic block label rule above) */
.mobile_header.mobile_bar > div.mobile_account.active form#login label[for="remember_vmlogin"] {
    display: inline-block !important;
    width: auto !important;
    margin: 4px 6px 10px 0 !important;
    vertical-align: middle !important;
    line-height: 20px !important;
}
.mobile_header.mobile_bar > div.mobile_account.active form#login input[type="checkbox"][name="remember"] {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 0 10px !important;
}

/* "Αποκτήστε λογαριασμό!" (text) over "ΕΓΓΡΑΦΗ" (full-width button).
   The <li> contains: "Αποκτήστε λογαριασμό! <a>ΕΓΓΡΑΦΗ</a>"
   We give the <a> display:block + width:100% so it drops to a new line
   below the text and fills the whole drawer width like the ΣΥΝΔΕΣΗ
   submit button above. */
.mobile_header.mobile_bar > div.mobile_account.active form#login ul li:has(> a[href*="eggrafi"]),
.mobile_header.mobile_bar > div.mobile_account.active form#login ul li:has(> a[href*="register"]) {
    text-align: center !important;
    background: #fff7ed !important;
    border: 1.5px solid #fed7aa !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin: 12px 0 0 !important;
    color: #c2410c !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
}
.mobile_header.mobile_bar > div.mobile_account.active form#login ul li a[href*="eggrafi"],
.mobile_header.mobile_bar > div.mobile_account.active form#login ul li a[href*="register"] {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: #fff !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    margin: 8px 0 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    box-shadow: 0 2px 6px rgba(249,115,22,.30) !important;
    border-bottom: none !important;
}

/* ── Cart drawer — modern cart line styling ───────────────────── */
.mobile_header.mobile_bar > div.mobile_cart.active > .popupContent > div {
    font-size: 13px;
}
.mobile_header.mobile_bar > div.mobile_cart.active table,
.mobile_header.mobile_bar > div.mobile_cart.active tbody,
.mobile_header.mobile_bar > div.mobile_cart.active tr,
.mobile_header.mobile_bar > div.mobile_cart.active td {
    border: none !important;
    background: transparent !important;
}
/* Each product line — soft card with bottom border */
.mobile_header.mobile_bar > div.mobile_cart.active table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 0 10px !important;
}
.mobile_header.mobile_bar > div.mobile_cart.active tr {
    border-bottom: 1px dashed #eef0f3 !important;
}
.mobile_header.mobile_bar > div.mobile_cart.active td {
    padding: 8px 0 !important;
    vertical-align: top !important;
    line-height: 1.4 !important;
    border-bottom: 1px dashed #eef0f3 !important;
}
.mobile_header.mobile_bar > div.mobile_cart.active a {
    color: #1f2937 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}
.mobile_header.mobile_bar > div.mobile_cart.active a:hover { color: var(--primary) !important; }
/* Total line — emphasized */
.mobile_header.mobile_bar > div.mobile_cart.active b,
.mobile_header.mobile_bar > div.mobile_cart.active strong {
    color: var(--primary);
}
/* "Εμφάνιση Καλαθιού" link → make it a prominent button */
.mobile_header.mobile_bar > div.mobile_cart.active a[href*="cart"],
.mobile_header.mobile_bar > div.mobile_cart.active a[href*="basket"] {
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    line-height: 44px !important;
    text-align: center !important;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
    box-shadow: 0 3px 8px rgba(249,115,22,.35) !important;
    margin: 14px 0 0 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: filter .15s ease, transform .1s ease;
}
.mobile_header.mobile_bar > div.mobile_cart.active a[href*="cart"]:hover,
.mobile_header.mobile_bar > div.mobile_cart.active a[href*="basket"]:hover { filter: brightness(1.05); }

/* Drawer header — title + close button (injected via JS) */
.v2-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 12px;
    border-bottom: 1px solid #eef0f3;
    background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
    position: sticky;
    top: 0;
    z-index: 5;
}
.v2-drawer-header h3 {
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--primary) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    line-height: 1.3 !important;
}
.v2-drawer-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #fed7aa;
    background: #fff;
    color: #f97316;
    font-size: 22px;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
}
.v2-drawer-close:hover { background: #fff7ed; }
.v2-drawer-close:active { transform: scale(0.92); }

/* Padding for the drawer body (below the sticky header) */
.mobile_header.mobile_bar > div.active > div.popupContent > div > .moduletable,
.mobile_header.mobile_bar > div.active > div.popupContent > div > div.moduletable {
    padding: 14px;
}
.mobile_header.mobile_bar > div.active > div.popupContent > div .v2-drawer-header + * {
    margin-top: 0;
}
/* Add side padding to direct children that aren't the drawer header */
.mobile_header.mobile_bar > div.active > div.popupContent > div > *:not(.v2-drawer-header) {
    padding-left: 14px;
    padding-right: 14px;
}
.mobile_header.mobile_bar > div.active > div.popupContent > div > *:not(.v2-drawer-header):first-of-type { padding-top: 14px; }
.mobile_header.mobile_bar > div.active > div.popupContent > div > *:not(.v2-drawer-header):last-of-type { padding-bottom: 14px; }

/* bottom bar popups — full-screen panel above bottom bar */
.mobile_bottom.mobile_bar > div.active > div.popupContent {
    display: block;
    position: fixed;
    bottom: var(--bot-h);
    top: var(--top-pad);
    left: 0;
    right: 0;
    z-index: 990;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile_bottom.mobile_bar > div.active > div.popupContent > div {
    background: var(--white);
    width: 100%;
    height: 100%;
    padding: 16px;
    border-top: 2px solid var(--accent);
}

/* remove old triangle arrows — not needed with full-panel approach */
.mobile_bar > div.active > span::after,
.mobile_bar > div.active > span::before { display: none; }

/* popup inner content */
.mobile_bar > div > div.popupContent .moduletable > h3 {
    font-size: 15px;
    color: var(--primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent);
}

.mobile_bar > div > div.popupContent ul { list-style: none; }

.mobile_bar > div > div.popupContent ul li { margin-bottom: 10px; }

.mobile_bar > div > div.popupContent li ul { padding-left: 14px; }

.mobile_bar > div > div.popupContent div.moduletable { margin-bottom: 20px; }

.mobile_bar > div > div.popupContent div.moduletable:last-child { margin-bottom: 0; }

/* menu popup — allow full height scroll */
.mobile_bar > div.active.mobile_menu > div.popupContent > div {
    overflow: auto;
    height: 100%;
}

/* ── HAMBURGER MENU ──────────────────────────────────────── */
.mobile_menu .moduletable > ul > li {
    background: var(--bg);
    border-radius: var(--radius);
    margin-bottom: 6px;
    overflow: hidden;
}

.mobile_menu .moduletable > ul > li > a {
    display: block;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    border-radius: var(--radius);
    transition: background .12s ease, color .12s ease, transform .08s ease;
    -webkit-tap-highlight-color: transparent;
}
/* Hover effect (desktop/laptop with pv=2, or hover-capable devices) */
.mobile_menu .moduletable > ul > li > a:hover {
    background: rgba(37,136,166,.10) !important;
    color: var(--primary) !important;
}
/* Tap feedback on mobile */
.mobile_menu .moduletable > ul > li > a:active {
    background: rgba(37,136,166,.18) !important;
    color: var(--primary) !important;
    transform: translateX(4px);
}
/* Sub-menu items (2nd level) */
.mobile_menu li ul li > a:hover {
    color: var(--primary) !important;
}
.mobile_menu li ul li > a:active {
    color: var(--primary) !important;
    font-weight: 600;
}

.mobile_menu li {
    display: block;
    position: relative;
}

.mobile_menu li > a {
    display: inline-block;
    font-size: 14px;
    color: var(--text);
}

.mobile_menu li.active > a { color: var(--primary); font-weight: bold; }

.mobile_menu li ul {
    border-top: 1px solid var(--border);
    padding: 8px 0 4px 0;
    margin-top: 0;
}

/* Chevron INLINE on the right (flex-row with order). */
.mobile_menu li.parent {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    position: relative !important;
}
.mobile_menu li.parent > a {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-right: 6px !important;
    order: 1 !important;
}
.mobile_menu li.parent > span.plus {
    order: 2 !important;
    position: static !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;  /* push to right edge */
    height: auto !important;
    width: auto !important;
    padding: 6px 8px !important;
    top: auto !important;
    right: auto !important;
    color: #f97316;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mobile_menu li.parent > span.plus > svg.v2-cat-chev {
    width: 18px !important;
    height: 18px !important;
}
/* The sub-ul takes full width on the next line, AFTER the link+chevron */
.mobile_menu li.parent > ul {
    order: 3 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
}

/* Level 1 (direct child of main category): light orange tint card */
.mobile_menu li.parent.active > ul {
    margin: 8px 0 6px !important;
    padding: 8px 10px 6px 12px !important;
    background: rgba(249,115,22,.05) !important;
    border-top: 1px dashed rgba(249,115,22,.30) !important;
    border-radius: 8px !important;
    box-shadow: inset 2px 0 0 rgba(249,115,22,.30);
}

/* Level 2+: NO card, just left-edge accent — saves horizontal space */
.mobile_menu li.parent > ul li.parent.active > ul {
    margin: 6px 0 4px !important;
    padding: 4px 0 4px 10px !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px dashed rgba(37,136,166,.20) !important;
    border-radius: 0 !important;
    box-shadow: inset 2px 0 0 rgba(37,136,166,.30) !important;
}

/* Level 3+: minimal — just hairline accent */
.mobile_menu li.parent > ul li.parent > ul li.parent.active > ul {
    margin: 4px 0 !important;
    padding: 2px 0 2px 8px !important;
    border-top: none !important;
    box-shadow: inset 1.5px 0 0 rgba(107,114,128,.30) !important;
}

/* Sub-items styling */
.mobile_menu li.parent > ul > li {
    padding: 4px 0 !important;
    border-bottom: 1px dashed rgba(0,0,0,.05);
}
.mobile_menu li.parent > ul > li:last-child {
    border-bottom: none;
}
.mobile_menu li.parent > ul > li > a {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    color: #374151 !important;
}
.mobile_menu li.parent > ul > li.parent > a {
    font-weight: 600 !important;
    color: #1f2937 !important;
}
/* Level 2+ items: smaller font for hierarchy */
.mobile_menu li.parent > ul li.parent > ul > li > a {
    font-size: 13px !important;
    color: #4b5563 !important;
}

.mobile_menu li.parent > span.plus > i { font-size: 14px; }

/* Modern SVG chevron — rotates 180° when subcategory open */
.mobile_menu li.parent > span.plus > svg.v2-cat-chev {
    width: 20px;
    height: 20px;
    color: #f97316;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(-90deg); /* default: pointing right (closed) */
    transition: transform .25s ease, color .15s ease;
    pointer-events: none;
}
.mobile_menu li.parent.active > span.plus > svg.v2-cat-chev {
    transform: rotate(0deg);   /* open: pointing down */
    color: var(--primary);
}
.mobile_menu li.parent > span.plus:active > svg.v2-cat-chev {
    transform: scale(0.85) rotate(-90deg);
}
.mobile_menu li.parent.active > span.plus:active > svg.v2-cat-chev {
    transform: scale(0.85) rotate(0deg);
}

/* Allow FA chevrons inside span.plus to render (override the global hide) —
   in case the legacy JS sneaks one in before our SVG injection */
.mobile_header span.plus i.fa { display: none !important; }

.mobile_menu li.parent ul { display: none; }

.mobile_menu li.parent.active > ul { display: block; }

.mobile_menu .moduletable > ul > li > span.plus { top: 0; }

.mobile_bar > div.mobile_menu > div.popupContent ul li { margin-bottom: 0; }

/* ── CONTENT AREA ────────────────────────────────────────── */
.mobile_content {
    z-index: 0;
    position: relative;
    padding: 8px 10px 16px;
    min-height: auto;
}
/* Joomla 1.5 legacy article wrappers — only flatten the OUTER table
   structure (so it doesn't add big empty space below banners) but
   leave the INSIDE article content untouched so editor markup
   renders naturally. */
.mobile_content > table.contentpaneopen,
.mobile_content > table.contentpaneopen > tbody > tr > td,
.mobile_content > table.contentpaneopen > tbody > tr,
.mobile_content > table.contentpaneopen > tbody {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    display: block;
    width: 100%;
}

.mobile_content p { margin-bottom: 12px; }

.mobile_content > div.moduletable,
.mobile_content_modules > div.moduletable {
    background: var(--white);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
/* Banner-only modules in .mobile_content_modules (e.g. inner-page promo
   banners): strip the white frame so they read as standalone full-width
   images — matches the .moduletable-no_top sibling that already has no
   frame. Excludes home merged-banners frame which has explicit styling. */
.mobile_content_modules > div.moduletable:not(.v2-banners-merged):has(> p > img:only-child),
.mobile_content_modules > div.moduletable:not(.v2-banners-merged):has(> p > a:only-child > img:only-child) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
.mobile_content_modules > div.moduletable:not(.v2-banners-merged):has(> p > img:only-child) > p,
.mobile_content_modules > div.moduletable:not(.v2-banners-merged):has(> p > a:only-child > img:only-child) > p {
    margin: 0 !important;
    line-height: 0 !important;
}
.mobile_content_modules > div.moduletable:not(.v2-banners-merged):has(> p > img:only-child) img,
.mobile_content_modules > div.moduletable:not(.v2-banners-merged):has(> p > a:only-child > img:only-child) img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
}

.mobile_content > div.moduletable:last-child { margin-bottom: 0; }

/* Home banners merged into a single frame (mobile_v2.js v2MergeHomeBanners
   appends gift25 banner into the same moduletable as KLARNA+BOX + Men
   Groomer). Tight 5px padding so banners fill almost the full frame
   width, with a small vertical gap between them. */
.mobile_content .moduletable.v2-banners-merged {
    padding: 5px !important;
}
.mobile_content .moduletable.v2-banners-merged > p {
    margin: 0 0 15px !important;
    line-height: 0 !important;
}
.mobile_content .moduletable.v2-banners-merged > p:last-child {
    margin-bottom: 0 !important;
}

/* Balance the spacing above + below the home Splide carousel — equal
   ~10px both sides. Hide the legacy .table-wrap spacer entirely (it's an
   artifact of the legacy Joomla template and only contains whitespace
   that adds 17px of vertical noise + 12px margin). */
.mobile_content > .mobile_content_top_modules {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}
.mobile_content .moduletablemodule_shadow-no_top:has(.splide) {
    margin-bottom: 0 !important;
}
/* Hide ONLY the legacy spacer .table-wrap that sits immediately AFTER
   the .mobile_content_top_modules wrapper (the splide carousel area).
   Adjacent-sibling selector → won't match .table-wrap anywhere else
   on the site (categories, listings, search results etc.). */
.mobile_content > .mobile_content_top_modules + div.table-wrap {
    display: none !important;
}
.mobile_content .moduletable.v2-banners-merged img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
}

.mobile_content > div.moduletable > h3 {
    font-size: 15px;
    color: var(--primary);
    border-bottom: 2px solid var(--accent);
    margin-bottom: 10px;
    padding-bottom: 6px;
}
/* §30 — Tighten spacing on h3-titled product modules (e.g.
   "ProfitStore Προτάσεις", "Δείτε επίσης") on home + listings.
   Reduce padding + h3 margins so titles sit closer to banners + content.
   Covers both direct children of .mobile_content AND nested children
   inside .mobile_content_modules (where Joomla puts category modules). */
.mobile_content > div.moduletable:has(> h3),
.mobile_content_modules > div.moduletable:has(> h3) {
    padding: 8px 10px 4px !important;
    margin-bottom: 4px !important;
}
.mobile_content > div.moduletable:has(> h3) > h3,
.mobile_content_modules > div.moduletable:has(> h3) > h3 {
    margin: 0 0 6px !important;
    padding-bottom: 4px !important;
}

/* ── CATEGORY GRID (VirtueMart) ──────────────────────────── */
.mobile_content #vmMainPage {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

/* <br> tags are zero-height flex items that break pairing — hide them */
.mobile_content #vmMainPage > br { display: none; }

/* non-category items (scripts, headings, product_left, product_right) → full width */
.mobile_content #vmMainPage > *:not(.category) {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

/* category items — fixed thumbnail size, more cards on wider screens */
.mobile_content #vmMainPage > .category {
    flex: 0 0 140px;
    max-width: 180px;
    width: 100%;
}

/* category cards */
.mobile_content #vmMainPage .category {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    float: none !important;
    height: auto;
    background: var(--white);
    border: 1.5px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 12px 8px;
    min-height: 180px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s, border-color 0.2s;
    margin: 0 !important;
}

.mobile_content #vmMainPage .category:hover {
    box-shadow: var(--shadow);
    border-color: var(--primary-lt);
}

.mobile_content #vmMainPage .category .category_heading {
    margin: 6px 0 0;
    width: auto;
    height: auto;
    order: 2;
}

.category_heading a {
    font-size: 13px !important;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}

.mobile_content #vmMainPage .category .category_image {
    order: 1;
    margin: 0;
    width: auto;
    height: auto;
}

.mobile_content #vmMainPage .category .category_image img {
    max-height: 120px;
    width: 100%;
    object-fit: contain;
}

/* ── PRODUCT LISTING — MODERN CARDS ──────────────────────── */
/* Responsive grid: ~160px columns, fills width — 2 cols on phone,
   3-4 on phablet, 5-6 on tablet/landscape. Cards never upscale
   beyond 220px so thumbnails don't blur. */
.mobile_content #product_list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)) !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-content: center;
}

.mobile_content #product_list.browse_1 {
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)) !important;
    gap: 6px !important;
}

.mobile_content #product_list > div {
    float: none !important;
    width: auto !important;
    height: auto !important;
    background: transparent;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: center;
    overflow: visible;
    position: relative;
    border: none;
    border-radius: 0;
    box-shadow: none;
    max-width: 220px;
    width: 100%;
    justify-self: center;
    align-self: stretch;
}
.mobile_content #product_list > div:has(.browseProductContainer) {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
    padding: 0 6px 8px !important;
    margin-top: 6px !important;
    overflow: visible !important;
    border: 1px solid #eef0f3;
    transition: transform .15s ease, box-shadow .15s ease;
    display: flex !important;
    flex-direction: column !important;
    align-self: start;
}
/* hide rows that have no product card at all (filtered OOS, etc.) */
.mobile_content #product_list > div:not(:has(.browseProductContainer)) {
    display: none !important;
}
.mobile_content #product_list > div:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(16,24,40,.12);
}
/* override the inline height:235px inner wrapper */
.mobile_content #product_list > div > div {
    height: auto !important;
}
/* product image: fill card width */
.mobile_content #product_list a.list_product_link > img:not(.list_badge_img) {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    border-radius: 6px;
}
/* product name (inline styled bold div) */
.mobile_content #product_list > div > div > div[style*="font-weight"] {
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 2.8em;
    text-align: left;
    color: var(--text) !important;
}

/* hide grid break elements */
.mobile_content div#product_list.vmj_grid_2 br.clr { display: none; }
.mobile_content #product_list br.clr { display: none; }

.mobile_content .browseProductTitle {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    width: auto;
    margin: 6px 0 4px;
    line-height: 1.3;
    flex: 1;
}

.mobile_content .browseProductTitle a {
    color: var(--text);
    font-size: 13px;
}

.mobile_content .browseProductTitle a:hover { color: var(--primary); }

/* price */
.mobile_content .PriceColor {
    color: var(--primary);
    font-weight: 700;
    font-size: 14px;
}

.mobile_content .product-Old-Price {
    text-decoration: line-through;
    color: #c0392b;
    font-size: 12px;
}

/* add to cart button */
.mobile_content .addtocart_button {
    display: block;
    width: 100%;
    margin: 8px 0 0;
    padding: 8px 4px;
    background: var(--primary);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.3px;
    transition: background 0.2s;
}

.mobile_content .addtocart_button:hover { background: var(--primary-dk); }

/* browse product images */
.mobile_content .browseProductImage img,
.mobile_content #product_list img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* browse card — modern flex layout: image / title / price / atc */
.mobile_content .browseProductContainer {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    height: 100% !important;
    width: 100% !important;
    align-items: stretch !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    flex: 1 1 100% !important;
}
/* the wrapper between #product_list > div and .browseProductContainer */
.mobile_content #product_list > div > div:not(.browseProductContainer):not(.browseProductImageContainer):not(.browsePriceContainer):not(.browseAddToCartContainer):not(.availabilityBlock) {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 100% !important;
    height: 100% !important;
    width: 100% !important;
    align-items: stretch !important;
}
/* kill the dotted/separator borders some VM base CSS adds at top of each card */
.mobile_content #product_list > div,
.mobile_content #product_list > div > div {
    border-top-style: solid !important;
    border-top-width: 0 !important;
}
.mobile_content #product_list .vmCart,
.mobile_content #product_list .row {
    border: none !important;
    background-image: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* hide stray <br class="clr"> & spacer divs that add empty rows */
.mobile_content #product_list br,
.mobile_content .browseProductContainer > br { display: none !important; }
.mobile_content .browseProductDescription { display: none !important; }
.mobile_content .browseProductContainer .browseProductImageContainer { order: 1; }
.mobile_content .browseProductContainer .browseProductTitle          { order: 2; }
.mobile_content .browseProductContainer .browsePriceContainer        { order: 3; }
.mobile_content .browseProductContainer .availabilityBlock           { order: 4; }
.mobile_content .browseProductContainer .browseAddToCartContainer    { order: 5; margin-top: auto; }

/* image area — square thumbnail. overflow:visible so the Hot Price badge
   can peek above; image is clipped by inner .v2-img-clip wrapper (JS-added). */
.mobile_content .browseProductImageContainer {
    position: relative;
    width: 100% !important;
    aspect-ratio: 1 / 1;
    max-height: 240px;
    background: transparent;
    border-radius: 0;
    overflow: visible !important;
    display: block !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
}
/* Tighten card top padding too — the row container around browseProductContainer */
.mobile_content .browse_1 > div,
.mobile_content #product_list > div > div:has(.browseProductContainer) {
    padding-top: 4px !important;
}
.mobile_content .browseProductImageContainer .v2-img-clip {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
    background: #f7f9fb;
    position: relative;
}
.mobile_content .browseProductImageContainer a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
    position: relative;
}
.mobile_content .browseProductImageContainer img.browseProductImage {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    transition: transform .25s ease;
    position: absolute;
    top: 0;
    left: 0;
}
.mobile_content #product_list > div:hover .browseProductImage {
    transform: scale(1.04);
}
.mobile_content .browseProductImageContainer img.list_badge_img {
    position: absolute !important;
    top: -6px !important;
    left: 4px !important;
    width: 52.5px !important;
    height: 18.75px !important;
    max-width: 52.5px !important;
    z-index: 5 !important;
    border-radius: 0 !important;
    background: transparent !important;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
    transform: none !important;
    pointer-events: none;
}

/* title — 2-line clamp, dark, semibold */
.mobile_content .browseProductTitle,
.mobile_content .browseProductContainer h3.browseProductTitle {
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    max-height: 4.0em !important;
    min-height: 3.9em;
    margin: 0 0 6px !important;
    padding: 0 2px !important;
    text-align: left !important;
    line-height: 1.3 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    width: 100% !important;
    flex: none !important;
}
.mobile_content .browseProductTitle a {
    display: block;
    text-align: left;
    color: #1f2937 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

/* price block — bold primary, kill legacy gray gradient */
.mobile_content .browsePriceContainer {
    text-align: left !important;
    margin: 0 0 8px !important;
    padding: 0 2px !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    letter-spacing: -0.2px;
    line-height: 1.1;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}
.mobile_content .browsePriceContainer span,
.mobile_content .browsePriceContainer .productPrice {
    background: transparent !important;
    color: var(--primary) !important;
    font-weight: 800 !important;
}
/* "Τιμή Προσφοράς:" label removed entirely — both for .before_price
   (non-sale) and .v2-has-sale wrappers (sale). The price values themselves
   are visually clear without the label. */
.mobile_content .browsePriceContainer .before_price,
.mobile_content .browsePriceContainer .before_price::before {
    display: none !important;
    content: none !important;
}
.mobile_content .browsePriceContainer.v2-has-sale::before {
    content: none !important;
    display: none !important;
}

/* availability text only (NOT the notify button — that's styled separately below) */
.mobile_content .browseProductContainer .availabilityBlock,
.mobile_content .browseProductContainer .availabilityHeader,
.mobile_content .browseProductContainer > div[style*="font-size:11"],
.mobile_content .browseProductContainer > div[style*="font-weight:bold"]:not(.browsePriceContainer):not(.browseProductTitle) {
    font-size: 11px !important;
    color: #6b7280 !important;
    margin: 0 0 6px !important;
    padding: 0 2px !important;
    text-align: left !important;
    background: transparent !important;
    line-height: 1.3;
}

/* OOS notify button (replaces atc form for sold-out) — gray (out-of-stock
   visual cue), same height as the Αγορά button for visual consistency.
   Higher specificity (#vmMainPage + body prefixes) needed to beat the
   broad `#vmMainPage form input[type=submit]` rule. flex-basis is needed
   to prevent flex shrink from collapsing the button to its intrinsic
   ~20px height inside the column flex form. */
.mobile_content .browseProductContainer .notify_button,
.mobile_content .browseProductContainer a.NoticeMe,
.mobile_content .browseProductContainer a[href*="notify"],
.mobile_content #vmMainPage .browseProductContainer input.notify_button,
.mobile_content #vmMainPage .browseProductContainer .notify_button,
.mobile_content #vmMainPage .browseProductContainer input[type="submit"].notify_button,
body .mobile_content .browseProductContainer input.notify_button,
body .mobile_content .browseProductContainer .notify_button {
    /* Position absolute fills the entire form rect — bypasses the
       weird baseline-induced top-offset that flex column gave us. */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 6px !important;
    background: #6b7280 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    border-radius: 10px !important;
    text-align: center !important;
    text-decoration: none !important;
    margin: 0 !important;
    border: none !important;
    cursor: pointer;
    box-sizing: border-box !important;
    text-transform: uppercase;
    letter-spacing: .2px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(107,114,128,.20);
    transition: background .15s ease;
}
.mobile_content .browseProductContainer .notify_button:hover,
.mobile_content .browseProductContainer .notify_button:active,
.mobile_content .browseProductContainer a.NoticeMe:hover,
.mobile_content .browseProductContainer a[href*="notify"]:hover {
    background: #4b5563 !important;
    color: #fff !important;
}
/* Ensure the form wrapping the notify button doesn't overflow.
   The legacy form has fixed height 42px and the button mysteriously
   gets positioned with top-offset (likely due to baseline-aligned text
   nodes between hidden <input> siblings). Use position:relative on form
   and absolute on button to nail it to the full form rect. */
.mobile_content .browseProductContainer .browseAddToCartContainer,
.mobile_content .browseProductContainer .addtocart_form {
    width: 100% !important;
    max-width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    display: block !important;
    position: relative !important;
}
/* OOS form containing notify_button — keep 42px height */
.mobile_content .browseProductContainer .addtocart_form:has(.notify_button) {
    height: 42px !important;
    min-height: 42px !important;
}
/* duplicate hover rule removed — handled above with gray hover */
/* an OOS notify wrapper container — anchor to bottom too */
.mobile_content .browseProductContainer .v2-notify-wrap {
    margin-top: auto !important;
    width: 100% !important;
}
.mobile_content .browseAddToCartContainer .addtocart_form {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* hide description block */
.mobile_content .browseProductDescription { display: none !important; }

/* availability indicator — green dot or red dot */
.mobile_content .browseAddToCartContainer .availabilityBlock {
    font-size: 11px;
    color: #6b7280;
    display: none;
}

/* hide qty stepper noise — just show big atc button.
   ATC sits naturally right below the availability text — no top auto-margin
   so there's NO empty gap between availability and the button. */
.mobile_content .browseAddToCartContainer {
    padding: 0 !important;
    margin: 4px 0 0 !important;
    width: 100% !important;
    flex-shrink: 0;
}
.mobile_content .browseAddToCartContainer label.quantity_box,
.mobile_content .browseAddToCartContainer input.inputboxquantity,
.mobile_content .browseAddToCartContainer .quantity_box_button { display: none !important; }

/* full-width orange CTA — high-conversion brand color */
.mobile_content .browseAddToCartContainer .addtocart_button {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border: none !important;
    border-radius: 9px !important;
    cursor: pointer;
    text-align: center !important;
    text-indent: 0 !important;
    line-height: 42px !important;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(249,115,22,.30) !important;
    transition: filter .15s ease, transform .1s ease;
    box-sizing: border-box !important;
    -webkit-appearance: none;
    appearance: none;
}
/* ── ΕΠΙΛΟΓΕΣ button (fallback when product has attributes & no ΑΓΟΡΑ) ── */
.mobile_content .v2-options-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 42px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    background: var(--primary) !important;
    color: var(--white) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    border: none !important;
    border-radius: var(--radius) !important;
    text-align: center !important;
    line-height: 42px !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .15s ease;
    box-sizing: border-box;
}
.mobile_content .v2-options-btn:hover,
.mobile_content .v2-options-btn:active {
    background: var(--primary-dk) !important;
    color: var(--white) !important;
}

.mobile_content .browseAddToCartContainer .addtocart_button:hover {
    filter: brightness(1.05);
}
.mobile_content .browseAddToCartContainer .addtocart_button:active {
    transform: scale(0.98);
}

/* ── PRODUCT DETAIL PAGE (VirtueMart) ────────────────────── */
.mobile_content .product_left,
.mobile_content .product_right {
    float: none !important;
    width: 100% !important;
    clear: both;
}

/* product image */
.mobile_content .product_left {
    text-align: center;
    margin-bottom: 12px;
}

.mobile_content .product_left > a,
.mobile_content .product_left > a.fancybox {
    display: block;
    text-align: center;
}

.mobile_content .product_left > a > img,
.mobile_content .product_left > a.fancybox > img {
    width: 100%;
    max-width: 340px;
    height: auto;
    border-radius: var(--radius);
}

/* availability */
.mobile_content .product_left > div.availabilityBlock,
.mobile_content .product_right .availabilityBlock {
    margin-bottom: 12px;
    padding: 8px 12px;
    background: var(--accent-bg);
    border-radius: var(--radius);
    font-size: 13px;
}

/* product title (B tag with inline bold) */
.mobile_content .product_right > b,
.mobile_content #vmMainPage > b {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    line-height: 1.4;
}

/* pathway breadcrumb */
.mobile_content .pathway,
.mobile_content #vmMainPage .pathway {
    font-size: 12px;
    color: var(--text-lt);
    margin-bottom: 10px;
    line-height: 1.5;
}

/* price area */
.mobile_content .productPrice,
.mobile_content .product-Price {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}

.mobile_content .shippingCost {
    font-size: 12px;
    color: var(--text-lt);
    margin-bottom: 8px;
}

/* quantity + add to cart row */
.mobile_content .addtocart_area,
.mobile_content .bf_flypage_under_price,
.mobile_content #vmMainPage > div:last-child {
    margin-top: 12px;
}

.mobile_content input[name="quantity"],
.mobile_content input[name="qty"] {
    width: 64px;
    text-align: center;
    height: 38px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 16px;
}

/* buttons_heading (edit/share links for admins) */
.mobile_content .buttons_heading {
    font-size: 12px;
    margin-bottom: 6px;
}

.mobile_content .avPlayerContainer {
    width: auto !important;
}

.mobile_content .avPlayerContainer iframe {
    max-width: 100%;
}

/* ── FEATURED / RANDOM PRODUCTS ─────────────────────────── */
.mobile_content div#s5_rand_prod,
.mobile_content div#s5_feat_prod {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

/* hide float-clearfix divs */
.mobile_content div#s5_rand_prod > div[style*="clear"],
.mobile_content div#s5_feat_prod > div[style*="clear"] {
    display: none !important;
}

/* outer card wrapper — flex item */
.mobile_content div#s5_rand_prod > div,
.mobile_content div#s5_feat_prod > div {
    flex: 0 0 calc(50% - 4px);
    max-width: calc(50% - 4px);
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

/* inner card div (has width:160px height:270px float:left inline) */
.mobile_content div#s5_rand_prod > div > div,
.mobile_content div#s5_feat_prod > div > div {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
}

/* content wrapper div (has height:235px inline) */
.mobile_content div#s5_rand_prod > div > div > div,
.mobile_content div#s5_feat_prod > div > div > div {
    height: auto !important;
    min-height: 0 !important;
}

/* product image link — position:relative so badge sits on top */
.mobile_content div#s5_rand_prod a.list_product_link,
.mobile_content div#s5_feat_prod a.list_product_link {
    position: relative;
    display: block;
}

/* product photo — fill the card width */
.mobile_content div#s5_rand_prod a.list_product_link img:not(.list_badge_img),
.mobile_content div#s5_feat_prod a.list_product_link img:not(.list_badge_img) {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block;
}

/* badge image — small, absolute, top-left corner */
.mobile_content div#s5_rand_prod .list_badge_img,
.mobile_content div#s5_feat_prod .list_badge_img,
.mobile_content .list_badge_img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 52px !important;
    height: 26px !important;
    max-width: 52px !important;
    min-height: 0 !important;
    display: block;
    z-index: 2;
}

.mobile_content div#erotisi_epiveveosis_div {
    float: none;
    width: auto;
    text-align: left;
}

/* ── BASKET / TABLES ─────────────────────────────────────── */
.table-wrap {
    overflow-x: auto;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 12px;
    height: auto !important;
    max-height: none !important;
    border-radius: var(--radius);
}

.mobile_content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.mobile_content th {
    background: var(--primary);
    color: var(--white);
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
}

.mobile_content td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.mobile_content tr:nth-child(even) td { background: var(--bg); }

/* ── TABS ────────────────────────────────────────────────── */
.mobile_content #tab_jd_ts_top { height: auto !important; }

.mobile_content #tab_jd_ts_top > div { height: 28px; }

.mobile_content #tab_jd_ts_bottom ul { margin: 0 0 0 20px; }

/* ── BOTTOM NAV BAR ──────────────────────────────────────── */
.mobile_bottom {
    position: static;
    height: var(--bot-h);
    background: var(--white);
    box-shadow: 0 -2px 10px rgba(0,0,0,.12);
    z-index: 1000;
    display: flex;
    align-items: stretch;
    padding: 0;
}

.mobile_bottom.mobile_bar > div {
    float: none;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: auto;
    border-right: 1px solid var(--border);
    cursor: pointer;
}

.mobile_bottom.mobile_bar > div:last-child { border-right: none; }

.mobile_bottom.mobile_bar > div.home {
    flex: 1.3;
    width: auto;
}

.mobile_bottom.mobile_bar > div.home > span > a {
    font-size: 26px;
}

.mobile_bottom.mobile_bar > div.active {
    background: var(--accent-bg);
}

.mobile_bottom.mobile_bar > div.clear { display: none; }

/* ── CHAT BAR ────────────────────────────────────────────── */
.mobile_chat {
    width: 100%;
    text-align: center;
    padding: 8px 0;
    background: var(--white);
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 5;
    margin-bottom: 0;
}

.mobile_chat > div {
    display: inline-block;
    vertical-align: middle;
}

.mfb_icon { margin-right: 16px; }

.mfb_link a {
    font-size: 13px;
    color: var(--primary-lt);
    font-weight: 600;
}

/* ── FOOTER ──────────────────────────────────────────────── */
.mobile_footer {
    background: var(--white);
    border-top: 1px solid var(--border);
    width: 100%;
    padding: 6px 10px;
    text-align: center;
    font-size: 12px;
    margin-bottom: var(--bot-h);
}

.mobile_footer a {
    display: inline-block;
    color: var(--text-lt);
    font-size: 12px;
    text-decoration: underline;
}

/* ── FIXED MODULES ───────────────────────────────────────── */
.fixed_modules {
    position: fixed;
    bottom: calc(var(--bot-h) + 4px);
    right: 8px;
    z-index: 950;
}

/* ── NEWSLETTER POPUP ────────────────────────────────────── */
.nlcontent {
    display: block;
    width: 85% !important;
    background: var(--white) !important;
    border: 4px solid var(--primary);
    border-radius: var(--radius-xl);
    position: fixed;
    top: 8%;
    left: 7.5%;
    padding: 16px;
    z-index: 1200;
}

.nlcontent > div {
    display: block;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 16px !important;
    text-align: center !important;
}

.nlcontent h2 {
    font-size: 17px;
    color: var(--primary);
}

.nlclose {
    border-radius: 50%;
    cursor: pointer;
    display: block;
    position: absolute !important;
    top: -16px;
    right: -14px;
    font-size: 36px;
    line-height: 30px;
    text-align: center;
    color: var(--text);
    background: var(--white);
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.nlclose:hover { color: var(--primary); }

.nlform { text-align: center; }

.nlform label {
    color: var(--text) !important;
    font-size: 11px;
    padding: 0 0 0 5px;
    text-decoration: none;
}

.nlinput {
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    width: 82% !important;
    margin: 0 auto 10px;
    display: block;
    font-size: 14px;
}

.nlinput:focus { border-color: var(--primary-lt); outline: none; }

.nlbutton {
    background: var(--primary);
    padding: 12px 40px;
    color: var(--white);
    font-weight: 700;
    border-radius: var(--radius);
    border: none !important;
    width: 82% !important;
    margin: 0 auto;
    display: block;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.nlbutton:hover { background: var(--primary-dk); }

.nlimage img {
    border-radius: var(--radius);
    width: 85% !important;
}

.nlopen {
    position: fixed;
    bottom: calc(var(--bot-h) + 8px);
    right: 16px;
    z-index: 1100;
    cursor: pointer;
}

/* ── FORMS & INPUTS ──────────────────────────────────────── */
.mobile_content input[type="text"],
.mobile_content input[type="email"],
.mobile_content input[type="tel"],
.mobile_content input[type="password"],
.mobile_content select {
    height: 38px;
    padding: 0 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--text);
    background: var(--white);
    width: 100%;
    max-width: 100%;
}

.mobile_content input:focus,
.mobile_content select:focus {
    border-color: var(--primary-lt);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-bg);
}

.mobile_content input[type="submit"],
.mobile_content input[type="button"]:not(.quantity_box_button),
.mobile_content button[type="submit"] {
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: var(--radius);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.mobile_content input[type="submit"]:hover,
.mobile_content button[type="submit"]:hover {
    background: var(--primary-dk);
}

/* ── PHONE LINK ──────────────────────────────────────────── */
.mobile_header_phonne a {
    color: var(--primary);
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
}

/* ── FANCYBOX ────────────────────────────────────────────── */
a#fbox_close_a,
a#fbox_resize_a { color: #e74c3c !important; }

/* ── PRODUCT BADGE ───────────────────────────────────────── */
#list_badge_img,
.list_badge_img {
    width: calc(150px / 100 * 35) !important;
    height: calc(75px / 100 * 25) !important;
    position: absolute;
    margin-left: 0;
    margin-top: calc(-75px / 100 * 15 / 2) !important;
}

/* ── COLOR UTILITIES ─────────────────────────────────────── */
.bg_dark_gray  { background-color: #333; color: #fff; padding: 5px; }
.bg_light_gray { background-color: #acacac; color: #fff; padding: 5px; }
.bg_black      { background-color: #000; color: #fff; padding: 5px; }
.bg_blue       { background-color: #0400eb; color: #fff; padding: 5px; }
.bg_light_blue { background-color: #0089d8; color: #fff; padding: 5px; }
.bg_orange     { background-color: #d67200; color: #fff; padding: 5px; }
.bg_red        { background-color: #e00; color: #fff; padding: 5px; }

/* ── AK MODULE CONTENT TWEAKS ────────────────────────────── */
.mobile_content .mobile_content_modules { margin-top: 20px; }

.mobile_content_top_modules {
    margin-bottom: 4px;
}

/* ── Browse list controls (orderby + hide-OOS toggle) — tighter spacing ── */
.mobile_content .orderbylist_orderlistcontainer,
.mobile_content .product-orderby-form,
.mobile_content form[name="orderform"] {
    margin: 0 0 6px !important;
    padding: 0 !important;
}
.mobile_content .orderbylist_orderlistcontainer label,
.mobile_content form[name="orderform"] label {
    margin: 0 0 2px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    color: var(--text-lt);
    display: block;
    text-align: center;
}
.mobile_content #product_list_filter,
.mobile_content .product_list_top,
.mobile_content #vmMainPage > form,
.mobile_content #vmMainPage > .product_list {
    margin: 0 !important;
    padding: 0 !important;
}
/* Pagination / footer area below cards — kill big empty space */
.mobile_content .vm-pagination,
.mobile_content .vmPagination,
.mobile_content #vmMainPage > br,
.mobile_content #product_list + br,
.mobile_content #product_list ~ br {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    height: 0 !important;
    display: none !important;
}
/* "Απόκρυψη Μη Διαθέσιμων" toggle button — tighter */
.mobile_content a.akhide,
.mobile_content .akhide_btn,
.mobile_content [onclick*="akhide"],
.mobile_content [onclick*="hideUnavailable"] {
    margin: 2px auto 4px !important;
    padding: 6px 14px !important;
    display: inline-block;
}

/* ── COMPACT BROWSE TOOLBAR ────────────────────────────────────────
   The default #a_search_form stacks 5 elements vertically (~195px tall):
   [orderby select][filter icon][limit select][pagination + counts][OOS toggle]
   Trim the ones that are noise on mobile, compact the rest. */
.mobile_content #a_search_form {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 8px 0 12px !important;
    padding: 10px 12px !important;
    background: #fff !important;
    border: 1px solid #eef0f3 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(16,24,40,.04) !important;
}
/* Order: Φίλτρα + Εμφάνιση Εξαντλημένων on row 1, pagination on row 2 */
.mobile_content #a_search_form .v2-filter-wrapper { order: 1 !important; }
.mobile_content #a_search_form .button_container { order: 2 !important; }
.mobile_content #a_search_form > div:not(.v2-filter-wrapper):not(.button_container) {
    order: 3 !important;
    flex: 1 1 100% !important;
}
/* Sort label inline */
.mobile_content #a_search_form .v2-sort-label {
    font-size: 12px !important;
    color: #6b7280 !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
}
/* Pagination links inside top toolbar — same chip style as bottom */
.mobile_content #a_search_form a.v2-pag-first,
.mobile_content #a_search_form a.v2-pag-prev,
.mobile_content #a_search_form a.v2-pag-next,
.mobile_content #a_search_form a.v2-pag-last,
.mobile_content #a_search_form > div a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 8px !important;
    margin: 0 1px !important;
    border-radius: 6px !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    background: #f7f9fb !important;
    border: 1px solid #eef0f3 !important;
}
.mobile_content #a_search_form a.v2-pag-prev,
.mobile_content #a_search_form a.v2-pag-next {
    font-size: 18px !important;
    line-height: 1 !important;
    padding: 0 6px !important;
}
.mobile_content #a_search_form a.v2-pag-first,
.mobile_content #a_search_form a.v2-pag-last {
    font-size: 11px !important;
    letter-spacing: -1px;
}
/* Active page span — ONLY inside ul.pagination, not stray spans */
.mobile_content #a_search_form ul.pagination li > span:not(.v2-pag-first):not(.v2-pag-prev):not(.v2-pag-next):not(.v2-pag-last) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    color: #fff !important;
    background: var(--primary) !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    margin: 0 1px !important;
    box-shadow: 0 2px 6px rgba(37,136,166,.30);
}
/* OOS toggle — keep LEGACY brand-blue colors, just compact size */
.mobile_content #a_search_form .button_container > * {
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 30px !important;
    text-transform: none !important;
}
/* All form children: small text, tight spacing */
.mobile_content #a_search_form > * {
    margin: 0 !important;
    flex: 0 0 auto;
}
/* Hide the redundant top limit selector (we use the bottom one only) */
.mobile_content #a_search_form select.s_limit,
.mobile_content #a_search_form select.s_limit + br,
.mobile_content #a_search_form label[for*="limit"] {
    display: none !important;
}
/* Hide stray inputs / noscript / br in top toolbar (only show our wrapper, OOS toggle, and pagination) */
.mobile_content #a_search_form > input[type="hidden"],
.mobile_content #a_search_form > noscript,
.mobile_content #a_search_form > script,
.mobile_content #a_search_form > br,
.mobile_content #a_search_form > input[type="submit"] {
    display: none !important;
}
/* Asc/Desc icon link — small chip inside the filter panel */
.mobile_content #a_search_form .v2-filter-asc-desc {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    margin: 0;
    padding: 0;
}
.mobile_content #a_search_form .v2-filter-asc-desc img {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
}
/* Compact orderby select */
.mobile_content #a_search_form select.inputbox {
    height: 34px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    max-width: 220px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
}
/* Pagination row — small, compact, single line */
.mobile_content #a_search_form > div:not(.button_container) {
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    color: #6b7280;
    flex: 1 1 100%;
    text-align: center;
    padding: 0 !important;
}
.mobile_content #a_search_form > div:not(.button_container) a,
.mobile_content #a_search_form > div:not(.button_container) span {
    font-size: 11.5px !important;
    padding: 0 4px !important;
}
/* OOS toggle button — small inline pill */
.mobile_content #a_search_form .button_container {
    flex: 0 0 auto;
}
.mobile_content #a_search_form .button_container > * {
    font-size: 11.5px !important;
    padding: 6px 12px !important;
    border-radius: 8px;
    line-height: 1.2 !important;
}
/* Filter icon link (the small <a> between selects) — keep visible but tight */
.mobile_content #a_search_form > a {
    font-size: 14px;
    margin: 0 4px !important;
    padding: 0 !important;
}

/* Category page H2 title — tighter */
.mobile_content #vmMainPage > div:first-child {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 6px !important;
    text-align: center;
}

/* Kill ALL extra space above the product grid */
.mobile_content #vmMainPage {
    margin: 0 !important;
    padding: 0 !important;
}
.mobile_content #vmMainPage > * {
    margin-top: 0 !important;
}
.mobile_content #vmMainPage > p:empty,
.mobile_content #vmMainPage > div:empty,
.mobile_content #vmMainPage > br {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* the row just before #product_list often has trailing whitespace */
.mobile_content #vmMainPage > form,
.mobile_content #vmMainPage > .product_list_top,
.mobile_content #vmMainPage > .row_orderby {
    margin-bottom: 4px !important;
}

/* ── Availability block — fixed 2-line height for uniform card height ─ */
.mobile_content .browseProductContainer .availabilityBlock {
    min-height: 46px !important;
    height: 46px !important;
    line-height: 1.35 !important;
    font-size: 12px !important;
    color: #6b7280 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 2px 0 !important;
}
.mobile_content .browseProductContainer .availabilityBlock .v2-avail-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    border: none !important;
}
.mobile_content .browseProductContainer .availabilityBlock .v2-avail-val {
    display: block !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    font-style: normal !important;
    line-height: 1.3 !important;
}

/* Parent-product placeholder — same structure, "(Επιλογές)" highlighted */
.mobile_content .browseProductContainer .availabilityBlock.v2-avail-options .v2-avail-val {
    color: var(--primary) !important;
    font-weight: 700 !important;
}

/* ── Unified bottom toolbar — single white card, 1-line pagination ───── */
.mobile_content .v2-bottom-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 10px !important;
    margin: 14px 0 12px !important;
    background: #fff !important;
    border: 1px solid #eef0f3 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(16,24,40,.04) !important;
}
.mobile_content .v2-bottom-toolbar > * {
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* Result count chip — "Σύνολο: 36 προϊόντα" */
.mobile_content .v2-bottom-toolbar .v2-result-chip {
    flex: 1 1 100% !important;
    text-align: center !important;
    font-size: 11.5px !important;
    color: #6b7280 !important;
    padding: 0 0 4px !important;
    border-bottom: 1px dashed #eef0f3 !important;
    margin-bottom: 2px !important;
    letter-spacing: .2px;
}
.mobile_content .v2-bottom-toolbar .v2-result-chip strong {
    color: var(--primary);
    font-weight: 800;
    font-size: 13px;
}

/* Pagination row: VM uses <ul class="pagination"> with <li> children */
.mobile_content .v2-bottom-toolbar > div {
    flex: 1 1 100% !important;
    padding: 0 !important;
}
.mobile_content .v2-bottom-toolbar ul.pagination,
.mobile_content #a_search_form ul.pagination {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    overflow-x: auto;
}
.mobile_content .v2-bottom-toolbar ul.pagination li,
.mobile_content #a_search_form ul.pagination li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    border: none !important;
}
/* Hidden chips (truncated by JS v2TruncatePagination) — beats the
   `display: inline-flex !important` on .pagination li above. */
.mobile_content .v2-bottom-toolbar ul.pagination li.v2-pag-hidden,
.mobile_content #a_search_form ul.pagination li.v2-pag-hidden {
    display: none !important;
}
/* Ellipsis chip — non-clickable spacer between visible page numbers */
.mobile_content .v2-bottom-toolbar ul.pagination li.v2-pag-ellipsis,
.mobile_content #a_search_form ul.pagination li.v2-pag-ellipsis {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    color: #9ca3af !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    pointer-events: none !important;
    user-select: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* All chips (a or span) — ~15% smaller per request 2026-05-03 */
.mobile_content .v2-bottom-toolbar ul.pagination a,
.mobile_content .v2-bottom-toolbar ul.pagination span,
.mobile_content #a_search_form ul.pagination a,
.mobile_content #a_search_form ul.pagination span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 31px !important;
    height: 31px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    border-radius: 7px !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-decoration: none !important;
    background: #f7f9fb !important;
    border: 1.5px solid #e5e7eb !important;
    transition: background .15s ease, color .15s ease, transform .1s ease;
    flex: 0 0 auto !important;
}
.mobile_content .v2-bottom-toolbar ul.pagination a:active,
.mobile_content #a_search_form ul.pagination a:active {
    transform: scale(0.95);
}
/* Current page indicator — ANY plain span (not chevron, not in-link)
   gets solid brand-blue background. The chevron classes override below. */
.mobile_content .v2-bottom-toolbar ul.pagination li > span,
.mobile_content #a_search_form ul.pagination li > span {
    color: #ffffff !important;
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 6px rgba(37,136,166,.30) !important;
}
/* Disabled chevron arrows (when on first/last page) — override the active blue */
.mobile_content .v2-bottom-toolbar ul.pagination li > span.v2-pag-first,
.mobile_content .v2-bottom-toolbar ul.pagination li > span.v2-pag-prev,
.mobile_content .v2-bottom-toolbar ul.pagination li > span.v2-pag-next,
.mobile_content .v2-bottom-toolbar ul.pagination li > span.v2-pag-last,
.mobile_content #a_search_form ul.pagination li > span.v2-pag-first,
.mobile_content #a_search_form ul.pagination li > span.v2-pag-prev,
.mobile_content #a_search_form ul.pagination li > span.v2-pag-next,
.mobile_content #a_search_form ul.pagination li > span.v2-pag-last {
    color: #cbd5e1 !important;
    background: #f3f4f6 !important;
    cursor: default !important;
    border-color: #e5e7eb !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}
.mobile_content .v2-bottom-toolbar ul.pagination a:hover,
.mobile_content #a_search_form ul.pagination a:hover {
    background: var(--accent-bg) !important;
    border-color: var(--accent) !important;
}
/* Chevrons — replaced with SVG icons that fill the chip nicely */
.mobile_content .v2-bottom-toolbar ul.pagination .v2-pag-first,
.mobile_content #a_search_form ul.pagination .v2-pag-first,
.mobile_content .v2-bottom-toolbar ul.pagination .v2-pag-last,
.mobile_content #a_search_form ul.pagination .v2-pag-last,
.mobile_content .v2-bottom-toolbar ul.pagination .v2-pag-prev,
.mobile_content #a_search_form ul.pagination .v2-pag-prev,
.mobile_content .v2-bottom-toolbar ul.pagination .v2-pag-next,
.mobile_content #a_search_form ul.pagination .v2-pag-next {
    font-size: 0 !important; /* hide text */
    color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px 22px !important;
    text-indent: -9999px;
    overflow: hidden;
}
/* Single chevron icons (prev / next) */
.mobile_content .v2-bottom-toolbar ul.pagination .v2-pag-prev,
.mobile_content #a_search_form ul.pagination .v2-pag-prev {
    background-color: #f7f9fb !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232588a6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 6 9 12 15 18"/></svg>') !important;
}
.mobile_content .v2-bottom-toolbar ul.pagination .v2-pag-next,
.mobile_content #a_search_form ul.pagination .v2-pag-next {
    background-color: #f7f9fb !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232588a6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 6 15 12 9 18"/></svg>') !important;
}
/* Double chevron icons (first / last) */
.mobile_content .v2-bottom-toolbar ul.pagination .v2-pag-first,
.mobile_content #a_search_form ul.pagination .v2-pag-first {
    background-color: #f7f9fb !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232588a6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="13 6 7 12 13 18"/><polyline points="19 6 13 12 19 18"/></svg>') !important;
}
.mobile_content .v2-bottom-toolbar ul.pagination .v2-pag-last,
.mobile_content #a_search_form ul.pagination .v2-pag-last {
    background-color: #f7f9fb !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232588a6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="11 6 17 12 11 18"/><polyline points="5 6 11 12 5 18"/></svg>') !important;
}
/* Disabled chevrons — gray stroke (high specificity to override generic) */
.mobile_content .v2-bottom-toolbar ul.pagination li > span.v2-pag-prev,
.mobile_content #a_search_form ul.pagination li > span.v2-pag-prev {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23cbd5e1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 6 9 12 15 18"/></svg>') !important;
    background-color: #f3f4f6 !important;
}
.mobile_content .v2-bottom-toolbar ul.pagination li > span.v2-pag-next,
.mobile_content #a_search_form ul.pagination li > span.v2-pag-next {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23cbd5e1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 6 15 12 9 18"/></svg>') !important;
    background-color: #f3f4f6 !important;
}
.mobile_content .v2-bottom-toolbar ul.pagination li > span.v2-pag-first,
.mobile_content #a_search_form ul.pagination li > span.v2-pag-first {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23cbd5e1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="13 6 7 12 13 18"/><polyline points="19 6 13 12 19 18"/></svg>') !important;
    background-color: #f3f4f6 !important;
}
.mobile_content .v2-bottom-toolbar ul.pagination li > span.v2-pag-last,
.mobile_content #a_search_form ul.pagination li > span.v2-pag-last {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23cbd5e1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="11 6 17 12 11 18"/><polyline points="5 6 11 12 5 18"/></svg>') !important;
    background-color: #f3f4f6 !important;
}

/* Limit selector form — compact, label + small dropdown */
.mobile_content .v2-bottom-toolbar form {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    border-top: 1px dashed #eef0f3;
    padding-top: 8px;
    margin-top: 2px;
    width: 100%;
    justify-content: center;
}
.mobile_content .v2-bottom-toolbar form br { display: none !important; }
.mobile_content .v2-bottom-toolbar form input[type="submit"] { display: none !important; }
.mobile_content .v2-bottom-toolbar .v2-limit-label {
    font-size: 11.5px !important;
    color: #6b7280 !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* SMALLER limit dropdown */
.mobile_content .v2-bottom-toolbar select {
    height: 28px !important;
    padding: 0 4px 0 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    border: 1.5px solid var(--accent) !important;
    border-radius: 6px !important;
    background: #fff !important;
    width: auto !important;
    min-width: 48px !important;
    max-width: 60px !important;
    cursor: pointer;
}

/* ── Filter button (Φίλτρα) — wraps the sort dropdown ───── */
.mobile_content #a_search_form .v2-filter-wrapper {
    display: inline-block !important;
    position: relative !important;
    flex: 0 0 auto !important;
    width: auto !important;
    vertical-align: middle;
}
.mobile_content #a_search_form .v2-filter-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%) !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 0 12px !important;
    height: 32px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    cursor: pointer !important;
    transition: background .15s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
    line-height: 1 !important;
}
.mobile_content #a_search_form .v2-filter-btn:hover {
    background: var(--accent-bg) !important;
    border-color: var(--accent) !important;
}
.mobile_content #a_search_form .v2-filter-btn:active {
    transform: scale(0.97);
}
.mobile_content #a_search_form .v2-filter-btn .v2-filter-icon {
    color: #f97316 !important;
}
.mobile_content #a_search_form .v2-filter-btn .v2-filter-chev,
.mobile_content #a_search_form .v2-filter-btn .v2-filter-text {
    /* Defensive overrides — ensure these spans don't pick up any
       pagination chip styles bleeding from broader selectors. */
    display: inline !important;
    background: transparent !important;
    color: #6b7280 !important;
    border: none !important;
    box-shadow: none !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}
.mobile_content #a_search_form .v2-filter-btn .v2-filter-text {
    color: var(--primary) !important;
    font-size: 13px !important;
}
.mobile_content #a_search_form .v2-filter-btn .v2-filter-chev {
    font-size: 9px !important;
    transition: transform .25s ease;
    margin-left: 2px !important;
}
.mobile_content #a_search_form .v2-filter-wrapper.is-open .v2-filter-btn .v2-filter-chev {
    transform: rotate(180deg);
}
.mobile_content #a_search_form .v2-filter-wrapper.is-open .v2-filter-btn {
    background: var(--accent-bg) !important;
    border-color: var(--primary) !important;
}
/* The filter panel — absolutely positioned dropdown below the button */
.mobile_content #a_search_form .v2-filter-panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    z-index: 100 !important;
    min-width: 260px !important;
    max-width: 320px !important;
    background: #fff !important;
    border: 1.5px solid var(--accent) !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06) !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: max-height .25s ease, opacity .2s ease, padding .2s ease;
    pointer-events: none;
}
.mobile_content #a_search_form .v2-filter-wrapper.is-open .v2-filter-panel {
    max-height: 240px !important;
    padding: 10px 12px !important;
    opacity: 1 !important;
    pointer-events: auto;
}
/* Triangle pointer up */
.mobile_content #a_search_form .v2-filter-wrapper.is-open .v2-filter-panel::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 18px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1.5px solid var(--accent);
    border-top: 1.5px solid var(--accent);
    transform: rotate(45deg);
}
.mobile_content #a_search_form .v2-filter-cluster {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100%;
    justify-content: flex-start;
}
.mobile_content #a_search_form .v2-filter-cluster select {
    flex: 1 1 auto;
    max-width: 100%;
    height: 36px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
}
.mobile_content #a_search_form .v2-filter-cluster span,
.mobile_content #a_search_form .v2-filter-cluster label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    flex: 0 0 100%;
}

/* ════════════════════════════════════════════════════════════
   MODULE PRODUCT CARDS (Joomla product modules: home/sidebar)
   ════════════════════════════════════════════════════════════
   These come from a module (NOT VirtueMart browse view) so DOM
   differs: title-first, image-link, then a separate price div.
   Style them to visually match the browse cards. */

.mobile_content :is([class*="moduletable"], .v2fp-related) div:has(> div > a.list_product_link) {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
    overflow: visible !important;
    padding: 8px 6px 6px;
    margin: 6px 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}
/* Inner wrapper (title + image + br) — column-reverse so image renders FIRST */
.mobile_content :is([class*="moduletable"], .v2fp-related) div:has(> a.list_product_link) {
    display: flex !important;
    flex-direction: column-reverse !important;
    margin: 0 !important;
    padding: 0 !important;
}
.mobile_content :is([class*="moduletable"], .v2fp-related) div:has(> a.list_product_link) > br { display: none !important; }

/* Image link → square frame, but allow badge to peek above (folded effect).
   The image itself is clipped via the .v2-img-clip wrapper added by JS. */
.mobile_content :is([class*="moduletable"], .v2fp-related) a.list_product_link {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-height: 220px !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    position: relative !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
}
/* Inner clipper (added by JS) holds the image and gets the rounded corners */
.mobile_content :is([class*="moduletable"], .v2fp-related) .v2-img-clip {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: #f7f9fb !important;
    position: relative !important;
    box-sizing: border-box;
}
.mobile_content :is([class*="moduletable"], .v2fp-related) a.list_product_link img:not(.list_badge_img),
.mobile_content :is([class*="moduletable"], .v2fp-related) .v2-img-clip img:not(.list_badge_img) {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border: none !important;
}
/* Badge at LEGACY size (52.5 x 18.75). top:-6 puts ~1/3 above image. */
.mobile_content div#s5_feat_prod img.list_badge_img,
.mobile_content div#s5_rand_prod img.list_badge_img,
.mobile_content div#s5_simil_prod img.list_badge_img,
.mobile_content div#s5_late_prod img.list_badge_img,
.mobile_content div[id^="s5_"] img.list_badge_img,
.mobile_content :is([class*="moduletable"], .v2fp-related) img.list_badge_img,
.mobile_content .browseProductImageContainer img.list_badge_img {
    position: absolute !important;
    top: -6px !important;
    left: 4px !important;
    width: 52.5px !important;
    height: 18.75px !important;
    max-width: 52.5px !important;
    z-index: 5 !important;
    background: transparent !important;
    border-radius: 0 !important;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)) !important;
    transform: none !important;
    pointer-events: none !important;
}

/* Title — strict 3 lines, clean cut */
.mobile_content :is([class*="moduletable"], .v2fp-related) div:has(> a.list_product_link) > div {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    line-height: 17px !important;
    padding: 6px 4px 4px !important;
    margin: 0 !important;
    text-align: left !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 51px !important;
    min-height: 51px !important;
    max-height: 51px !important;
    text-transform: none !important;
    box-sizing: content-box !important;
}
/* No fade-mask — clean truncation only */
.mobile_content :is([class*="moduletable"], .v2fp-related) div:has(> a.list_product_link) > div::after {
    content: none !important;
}
.mobile_content :is([class*="moduletable"], .v2fp-related) div:has(> a.list_product_link) > div a {
    color: #1f2937 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* Price wrapper — separator close to title, modest gap */
.mobile_content :is([class*="moduletable"], .v2fp-related) div:has(> .before_price),
.mobile_content :is([class*="moduletable"], .v2fp-related) div:has(> .productPrice) {
    text-align: left !important;
    padding: 6px 4px 4px !important;
    margin: 2px 4px 0 !important;
    line-height: 1.3 !important;
    background: transparent !important;
    min-height: 30px !important;
    display: block !important;
    border-top: 1px solid #eef0f3 !important;
}

/* Old (strike-through) price — INLINE next to the new price */
.mobile_content :is([class*="moduletable"], .v2fp-related) .product-Old-Price {
    display: inline !important;
    font-size: 13px !important;
    color: #9ca3af !important;
    text-decoration: line-through !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    margin: 0 6px 0 0 !important;
    vertical-align: baseline !important;
}
/* Keep the legacy "μόνο" text but in red, inline with the price */
.mobile_content :is([class*="moduletable"], .v2fp-related) .before_price {
    font-size: 13px !important;
    color: #ef4444 !important;
    font-weight: 700 !important;
    display: inline !important;
    margin: 0 4px 0 0 !important;
    line-height: 1.2 !important;
    background: transparent !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.mobile_content :is([class*="moduletable"], .v2fp-related) .productPrice {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    display: inline !important;
    background: transparent !important;
    letter-spacing: -0.2px !important;
    vertical-align: baseline !important;
}

/* The module's OUTER container (e.g. #s5_feat_prod). Its direct children
   are floated 50%-width divs by default — kill the float and make this
   a responsive grid so more cards appear on wider viewports. */
.mobile_content :is([class*="moduletable"], .v2fp-related) > div:has(div a.list_product_link) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 6px !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: center;
    width: 100% !important;
    float: none !important;
    overflow: visible !important;
}
.mobile_content :is([class*="moduletable"], .v2fp-related) {
    overflow: visible !important;
}
.mobile_content #product_list {
    overflow: visible !important;
}

/* Direct children of the grid container (the floated wrappers) — un-float */
.mobile_content :is([class*="moduletable"], .v2fp-related) > div:has(div a.list_product_link) > div {
    width: 100% !important;
    max-width: 180px !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: center !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
}

/* The actual card div (parent of inner-wrapper-with-link) — fill cell */
.mobile_content :is([class*="moduletable"], .v2fp-related) div:has(> div > a.list_product_link) {
    width: 100% !important;
    height: 100% !important;
    align-self: stretch;
}

/* ════════════════════════════════════════════════════════════
   CART (basket) — convert legacy table to mobile-friendly cards
   ════════════════════════════════════════════════════════════ */
/* Title */
.mobile_content #vmMainPage > h2 {
    font-size: 20px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 12px;
}

/* Identify the cart table by its unique cell class .ps-cart-qty */
.mobile_content #vmMainPage table:has(.ps-cart-qty) {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    margin: 0 0 14px !important;
}
.mobile_content #vmMainPage table:has(.ps-cart-qty) tbody { display: block !important; width: 100%; }

/* Hide the column header row on mobile */
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr.sectiontableheader,
.mobile_content #vmMainPage table:has(.ps-cart-qty) thead {
    display: none !important;
}

/* Product row — has the .ps-cart-qty cell — becomes a card.
   Title row reserves the right column ONLY for unit price (~38px wide).
   The bottom row aligns qty controls (left) with Σύνολο (right) on the
   SAME line so the user has a single, clean horizontal reading order. */
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:has(.ps-cart-qty) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "name      price"
        "sku       price"
        "qty       subtotal";
    gap: 6px 12px;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    padding: 12px !important;
    margin: 0 0 8px !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.06);
    align-items: start;
}
/* Title cell: variant info ("Χρωματισμός: Πορτοκαλί") often appears as
   plain text right after </a> with no separator → break to a new line. */
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:has(.ps-cart-qty) td:nth-child(1) {
    word-wrap: break-word;
    word-break: normal;
    overflow-wrap: anywhere;
    white-space: normal;
}
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:has(.ps-cart-qty) td:nth-child(1) > a {
    display: block;
}
.v2-variant {
    display: block;
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    margin-top: 4px;
    line-height: 1.3;
}
.v2-pid {
    display: none; /* product ID hidden — SKU already shown in another cell */
}
/* Summary rows (Μερικό Σύνολο, Σύνολο, Σύνολο Φόρου) — flat 2-col flex */
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:not(.sectiontableheader):not(:has(.ps-cart-qty)) {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px !important;
    border: none !important;
    background: transparent;
    gap: 8px;
}
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:not(.sectiontableheader):not(:has(.ps-cart-qty)) > td {
    padding: 0 !important;
    border: none !important;
    flex: 0 0 auto;
}
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:not(.sectiontableheader):not(:has(.ps-cart-qty)) > td:first-child {
    color: #4b5563;
    font-size: 13px;
}
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:not(.sectiontableheader):not(:has(.ps-cart-qty)) > td:last-child {
    font-weight: 700;
    color: var(--primary);
    font-size: 15px;
}
/* hide totally empty rows / hr-only rows. Stronger selector (extra :not
   qualifiers) needed to beat the flex rule that sets display:flex !important
   on summary rows — they tie on specificity, but extra :not pseudos give
   this rule the edge. */
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:has(hr):not(.sectiontableheader):not(:has(.ps-cart-qty)),
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:has(td:empty:only-child):not(.sectiontableheader):not(:has(.ps-cart-qty)),
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:has(hr:only-child),
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:has(td:empty:only-child) {
    display: none !important;
}
/* "Τελικό Σύνολο" row (renamed by JS v2RenameTotalRow) → bold for emphasis */
.mobile_content #vmMainPage table tr.v2-cart-final-total > td,
.mobile_content #vmMainPage table tr.v2-cart-final-total > td:first-child,
.mobile_content #vmMainPage table tr.v2-cart-final-total > td:last-child {
    font-weight: 800 !important;
}

/* Σύνολο Φόρου row → greyed out (tagged by mobile_v2.js v2TagCartTaxRow).
   Beats the flex rule that colors td:last-child with var(--primary). */
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr.v2-cart-tax-row,
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr.v2-cart-tax-row > td,
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr.v2-cart-tax-row > td:first-child,
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr.v2-cart-tax-row > td:last-child {
    color: #9ca3af !important;
    font-weight: 400 !important;
    font-size: 13px !important;
}
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:has(.ps-cart-qty) td {
    display: block !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    vertical-align: middle;
}
/* Map cells to grid areas via :nth-child */
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:has(.ps-cart-qty) td:nth-child(1) {
    grid-area: name;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
}
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:has(.ps-cart-qty) td:nth-child(1) a,
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:has(.ps-cart-qty) td:nth-child(1) a strong,
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:has(.ps-cart-qty) td:nth-child(1) strong {
    color: var(--primary) !important;
    text-decoration: none;
    font-size: 13px !important;
}
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:has(.ps-cart-qty) td:nth-child(2) {
    grid-area: sku;
    font-size: 11px;
    color: #6b7280;
    margin-top: 0;
}
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:has(.ps-cart-qty) td:nth-child(3) {
    grid-area: price;
    font-size: 13px;
    color: #6b7280;
    text-align: right;
    align-self: start;
}
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:has(.ps-cart-qty) td.ps-cart-qty {
    grid-area: qty;
    display: flex !important;
    align-items: center;
    gap: 9px !important;          /* equal to checkout (per user 2026-05-05) */
    align-self: center !important;
    color: #4b5563 !important;
    font-size: 13px !important;
}
/* "Τμχ: " label before the qty input — matches checkout/account label */
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:has(.ps-cart-qty) td.ps-cart-qty::before {
    content: 'Τμχ: ';
    color: #9ca3af;
}
/* Forms inside cart qty cell — same 9px internal gap as checkout */
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:has(.ps-cart-qty) td.ps-cart-qty form {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    vertical-align: middle !important;
}
/* The td immediately after .ps-cart-qty is the "Σύνολο" cell. Place it on
   the SAME row as qty controls (right-aligned) for a single horizontal
   line: [1] ↻ 🗑   |   Σύνολο: €XX.XX */
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:has(.ps-cart-qty) td.ps-cart-qty + td {
    grid-area: subtotal;
    display: block !important;
    text-align: right !important;
}
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:has(.ps-cart-qty) td:last-child {
    grid-area: subtotal;
    text-align: right;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    /* Was: padding-top + border-top (made it a separate row visually).
       Now inline with qty → no top border, no extra padding. */
    align-self: center !important;
    padding: 0 !important;
    border-top: none !important;
    white-space: nowrap !important;
}
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr:has(.ps-cart-qty) td:last-child::before {
    content: 'Σύνολο: ';
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    margin-right: 6px;
}
/* Quantity input + buttons inside cart */
.mobile_content #vmMainPage table:has(.ps-cart-qty) input[type="text"],
.mobile_content #vmMainPage table:has(.ps-cart-qty) input[type="number"] {
    width: 44px !important;
    height: 36px !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
}
.mobile_content #vmMainPage table:has(.ps-cart-qty) form {
    display: inline-block;
    margin: 0 !important;
}
.mobile_content #vmMainPage table:has(.ps-cart-qty) img {
    width: 22px !important;
    height: 22px !important;
    cursor: pointer;
    /* Tap-target padding so icons are easier to hit on touch screens
       without growing the visual icon size. Box-sizing keeps total width. */
    padding: 4px !important;
    box-sizing: content-box !important;
}
/* Cart template was updated to add `<td class="v2-cart-td-thumb">` as the
   first cell + class-based naming on all cells. The old td:nth-child(N)
   grid-area mappings are now off-by-one and assign wrong cells to wrong
   areas (e.g. name lands in sku slot, price duplicates). Override with
   class-based grid-area assignments — higher specificity than nth-child,
   so these win when present and fall back gracefully for older markup. */
/* Generic rules: hide thumb + map class-based td → grid-area. Listed
   under multiple body classes (is-cart, is-checkout, is-account, is-thankyou)
   so specificity beats the checkout/account-specific rules that set
   td { display: block !important } via tr.sectiontableentry1:has(td:nth-child(5)). */
body.is-cart     .mobile_content #vmMainPage td.v2-cart-td-thumb,
body.is-checkout .mobile_content #vmMainPage td.v2-cart-td-thumb,
body.is-account  .mobile_content #vmMainPage td.v2-cart-td-thumb,
body.is-thankyou .mobile_content #vmMainPage td.v2-cart-td-thumb {
    display: none !important;
}
body.is-cart     .mobile_content #vmMainPage td.v2-cart-td-name,
body.is-checkout .mobile_content #vmMainPage td.v2-cart-td-name,
body.is-account  .mobile_content #vmMainPage td.v2-cart-td-name,
body.is-thankyou .mobile_content #vmMainPage td.v2-cart-td-name {
    grid-area: name !important;
}
body.is-cart     .mobile_content #vmMainPage td.v2-cart-td-sku,
body.is-checkout .mobile_content #vmMainPage td.v2-cart-td-sku,
body.is-account  .mobile_content #vmMainPage td.v2-cart-td-sku,
body.is-thankyou .mobile_content #vmMainPage td.v2-cart-td-sku {
    grid-area: sku !important;
}
body.is-cart     .mobile_content #vmMainPage td.v2-cart-td-price,
body.is-checkout .mobile_content #vmMainPage td.v2-cart-td-price,
body.is-account  .mobile_content #vmMainPage td.v2-cart-td-price,
body.is-thankyou .mobile_content #vmMainPage td.v2-cart-td-price {
    grid-area: price !important;
}
body.is-cart     .mobile_content #vmMainPage td.v2-cart-td-qty,
body.is-checkout .mobile_content #vmMainPage td.v2-cart-td-qty,
body.is-account  .mobile_content #vmMainPage td.v2-cart-td-qty,
body.is-thankyou .mobile_content #vmMainPage td.v2-cart-td-qty {
    grid-area: qty !important;
}
body.is-cart     .mobile_content #vmMainPage td.v2-cart-td-subtotal,
body.is-checkout .mobile_content #vmMainPage td.v2-cart-td-subtotal,
body.is-account  .mobile_content #vmMainPage td.v2-cart-td-subtotal,
body.is-thankyou .mobile_content #vmMainPage td.v2-cart-td-subtotal {
    grid-area: subtotal !important;
}

/* Summary block (Μερικό Σύνολο, Σύνολο, Σύνολο Φόρου) */
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr td:first-child {
    font-size: 13px;
    color: #4b5563;
}
.mobile_content #vmMainPage table:has(.ps-cart-qty) tr td strong {
    font-size: 16px;
    color: var(--primary);
    font-weight: 800;
}

/* Cart bottom CTAs — Συνέχεια Αγορών (outline) + Ταμείο (primary) */
.mobile_content #vmMainPage div:has(> a.continue_link + a.checkout_link),
.mobile_content #vmMainPage div:has(> a.checkout_link + a.continue_link) {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: left !important;
}
.mobile_content #vmMainPage a.continue_link,
.mobile_content #vmMainPage a.checkout_link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    text-align: center !important;
    margin: 0 !important;
    background-image: none !important;
    box-sizing: border-box !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    line-height: 48px !important;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}
.mobile_content #vmMainPage a.continue_link {
    background: #fff !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
}
.mobile_content #vmMainPage a.checkout_link {
    background: var(--primary) !important;
    color: #fff !important;
    border: 2px solid var(--primary) !important;
    box-shadow: 0 2px 6px rgba(37,136,166,.25);
}
/* Hide any inline arrow images inside these buttons */
.mobile_content #vmMainPage a.continue_link img,
.mobile_content #vmMainPage a.checkout_link img {
    display: none !important;
}
/* Add CSS thick chevron pseudo arrows in orange */
.mobile_content #vmMainPage a.continue_link::before,
.mobile_content #vmMainPage a.checkout_link::after {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    flex-shrink: 0;
}
.mobile_content #vmMainPage a.continue_link::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f97316" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>');
}
.mobile_content #vmMainPage a.checkout_link::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f97316" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>');
}
/* On primary blue button hover, fade arrow */
.mobile_content #vmMainPage a.checkout_link:hover::after {
    filter: brightness(1.2);
}
.mobile_content #vmMainPage a.continue_link:hover {
    background: var(--primary) !important;
    color: #fff !important;
}
.mobile_content #vmMainPage a.checkout_link:hover {
    background: var(--primary-dk) !important;
}
.mobile_content #vmMainPage a.checkout_link:active,
.mobile_content #vmMainPage a.continue_link:active {
    transform: scale(0.98);
}
/* Empty cart message */
.mobile_content #vmMainPage > div:contains("άδειο") { /* not real CSS — handled by surrounding text styling */ }
.mobile_content #vmMainPage br + br { display: none !important; }

/* ════════════════════════════════════════════════════════════
   CHECKOUT — progress bar + step pages
   ════════════════════════════════════════════════════════════ */
/* Restyle the legacy 4-step progress bar as a clean horizontal indicator.
   Past/clickable steps show as <a>, current/future as plain text. */
body.is-checkout .mobile_content #vmMainPage table:has(a[href*="CHECK_OUT"]) {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    margin: 0 0 6px !important;
}
body.is-checkout .mobile_content #vmMainPage table:has(a[href*="CHECK_OUT"]) tbody {
    display: block !important;
}
body.is-checkout .mobile_content #vmMainPage table:has(a[href*="CHECK_OUT"]) tr {
    display: flex !important;
    width: 100%;
    gap: 0;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    counter-reset: chkstep;
}
body.is-checkout .mobile_content #vmMainPage table:has(a[href*="CHECK_OUT"]) td {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start;
    flex: 1 1 0 !important;
    padding: 4px 2px !important;
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    color: #6b7280 !important;
    text-align: center !important;
    gap: 6px;
    position: relative;
    counter-increment: chkstep;
    height: auto !important;
}
/* Numbered circle */
body.is-checkout .mobile_content #vmMainPage table:has(a[href*="CHECK_OUT"]) td::before {
    content: counter(chkstep);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 2;
    position: relative;
}
/* Connector line between steps */
body.is-checkout .mobile_content #vmMainPage table:has(a[href*="CHECK_OUT"]) td:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 17px;
    left: calc(50% + 13px);
    right: calc(-50% + 13px);
    height: 2px;
    background: #e5e7eb;
    z-index: 1;
}
/* Completed (clickable) steps — primary blue circle */
body.is-checkout .mobile_content #vmMainPage table:has(a[href*="CHECK_OUT"]) td:has(a)::before {
    background: var(--primary);
    color: #fff;
}
body.is-checkout .mobile_content #vmMainPage table:has(a[href*="CHECK_OUT"]) td:has(a)::after {
    background: var(--primary);
}
body.is-checkout .mobile_content #vmMainPage table:has(a[href*="CHECK_OUT"]) td a {
    color: var(--primary) !important;
    text-decoration: none !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    display: block;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    height: auto !important;
}

/* Πληροφορίες Χρέωσης — billing/shipping info readout card.
   Differentiated from cart by: only ONE <th> in header (cart has 5).
   Also exclude tables with cart/method markers. */
body.is-checkout .mobile_content #vmMainPage table:has(tr.sectiontableheader > th:only-of-type):not(:has(.ps-cart-qty)):not(:has(.sectiontableentry1)):not(:has(input[type="radio"])):not(:has(a[href*="CHECK_OUT"])) {
    display: block !important;
    width: 100% !important;
    border: 1px solid #eef0f3 !important;
    background: #fff !important;
    border-radius: 12px !important;
    margin: 0 0 12px !important;
    overflow: hidden !important;
    padding: 0 !important;
}
body.is-checkout .mobile_content #vmMainPage table:has(tr.sectiontableheader > th:only-of-type):not(:has(.ps-cart-qty)):not(:has(.sectiontableentry1)):not(:has(input[type="radio"])):not(:has(a[href*="CHECK_OUT"])) tbody {
    display: block !important;
}
body.is-checkout .mobile_content #vmMainPage table:has(tr.sectiontableheader > th:only-of-type):not(:has(.ps-cart-qty)):not(:has(.sectiontableentry1)):not(:has(input[type="radio"])):not(:has(a[href*="CHECK_OUT"])) tr.sectiontableheader {
    display: block !important;
    background: var(--primary) !important;
    padding: 10px 14px !important;
    border: none !important;
}
body.is-checkout .mobile_content #vmMainPage table:has(tr.sectiontableheader > th:only-of-type):not(:has(.ps-cart-qty)):not(:has(.sectiontableentry1)):not(:has(input[type="radio"])):not(:has(a[href*="CHECK_OUT"])) tr.sectiontableheader > th {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    text-align: left !important;
    text-transform: uppercase;
    letter-spacing: .3px;
}
body.is-checkout .mobile_content #vmMainPage table:has(tr.sectiontableheader > th:only-of-type):not(:has(.ps-cart-qty)):not(:has(.sectiontableentry1)):not(:has(input[type="radio"])):not(:has(a[href*="CHECK_OUT"])) tr:not(.sectiontableheader) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    padding: 6px 14px !important;
    border: none !important;
    border-bottom: 1px solid #f3f4f6 !important;
    background: transparent !important;
}
body.is-checkout .mobile_content #vmMainPage table:has(tr.sectiontableheader > th:only-of-type):not(:has(.ps-cart-qty)):not(:has(.sectiontableentry1)):not(:has(input[type="radio"])):not(:has(a[href*="CHECK_OUT"])) tr:last-child {
    border-bottom: none !important;
}
body.is-checkout .mobile_content #vmMainPage table:has(tr.sectiontableheader > th:only-of-type):not(:has(.ps-cart-qty)):not(:has(.sectiontableentry1)):not(:has(input[type="radio"])):not(:has(a[href*="CHECK_OUT"])) tr:not(.sectiontableheader) > td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}
body.is-checkout .mobile_content #vmMainPage table:has(tr.sectiontableheader > th:only-of-type):not(:has(.ps-cart-qty)):not(:has(.sectiontableentry1)):not(:has(input[type="radio"])):not(:has(a[href*="CHECK_OUT"])) tr:not(.sectiontableheader) > td:first-child {
    flex: 0 0 auto;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    min-width: 110px;
}
body.is-checkout .mobile_content #vmMainPage table:has(tr.sectiontableheader > th:only-of-type):not(:has(.ps-cart-qty)):not(:has(.sectiontableentry1)):not(:has(input[type="radio"])):not(:has(a[href*="CHECK_OUT"])) tr:not(.sectiontableheader) > td:nth-child(2) {
    flex: 1;
    color: #111827;
    font-size: 13px;
    font-weight: 600;
    word-break: break-word;
}

/* "Ενημέρωση διεύθυνσης" link — outline button */
body.is-checkout .mobile_content #vmMainPage a[href*="account_shipping_address_form"],
body.is-checkout .mobile_content #vmMainPage a[href*="account.shipping_address"],
body.is-checkout .mobile_content #vmMainPage table:has(tr.sectiontableheader > th) ~ a[href*="address"] {
    display: inline-block;
    padding: 6px 12px !important;
    margin: 0 0 12px !important;
    background: #fff !important;
    border: 1px solid var(--primary) !important;
    color: var(--primary) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
}

/* "Πληροφορίες Αποστολής" sub-header */
body.is-checkout .mobile_content #vmMainPage > div:has(> input[name="ship_to_info_id"]) {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0 0 12px;
}

/* Coupon section — make it less prominent so users don't confuse the
   ΥΠΟΒΟΛΗ (apply coupon) with the main ΕΠΟΜΕΝΟ flow button. */
.mobile_content #vmMainPage table:has(input#coupon_code) {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    margin: 0 0 10px !important;
}
.mobile_content #vmMainPage table:has(input#coupon_code) tbody,
.mobile_content #vmMainPage table:has(input#coupon_code) tr,
.mobile_content #vmMainPage table:has(input#coupon_code) td {
    display: block !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}
/* Coupon table label TD — left align text, smaller font (was right-align/15px/800) */
.mobile_content #vmMainPage table:has(input#coupon_code) tr.sectiontableentry1 td,
.mobile_content #vmMainPage table:has(input#coupon_code) tr.sectiontableentry2 td,
.mobile_content #vmMainPage table:has(input#coupon_code) td:first-child {
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    line-height: 1.4 !important;
}
.mobile_content #vmMainPage form:has(input#coupon_code) {
    background: #f9fafb !important;
    border: 1px dashed #d1d5db !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin: 0 0 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap;
}
.mobile_content #vmMainPage form:has(input#coupon_code) > strong,
.mobile_content #vmMainPage form:has(input#coupon_code) > label,
.mobile_content #vmMainPage form:has(input#coupon_code)::before {
    flex: 1 1 100%;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    text-align: left;
    margin: 0 !important;
}
.mobile_content #vmMainPage form:has(input#coupon_code) input#coupon_code {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    margin: 0 !important;
    background: #fff !important;
}
.mobile_content #vmMainPage form:has(input#coupon_code) input[type="submit"] {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 36px !important;
    padding: 0 14px !important;
    background: #fff !important;
    color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    cursor: pointer;
}
.mobile_content #vmMainPage form:has(input#coupon_code) input[type="submit"]:hover {
    background: var(--primary) !important;
    color: #fff !important;
}

/* The payment methods container (parent of div.pmeth) — usually a fieldset
   with padding/inset. Make it full-width with no inner padding so cards
   span the whole content area. */
body.is-checkout .mobile_content #vmMainPage fieldset:has(div.pmeth),
body.is-checkout .mobile_content #vmMainPage div:has(> div.pmeth) {
    padding: 0 !important;
    margin: 0 0 14px !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    max-width: none !important;
}
body.is-checkout .mobile_content #vmMainPage fieldset:has(div.pmeth) > legend,
body.is-checkout .mobile_content #vmMainPage fieldset:has(div.pmeth) > strong:first-child {
    background: transparent !important;
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 0 0 8px !important;
    margin: 0 !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    border: none !important;
}

/* Payment methods are rendered as <div class="pmethXX pmeth"> blocks, not
   as <tr> rows. Each block holds the radio + label + description div. */
body.is-checkout .mobile_content #vmMainPage div.pmeth {
    display: grid !important;
    grid-template-columns: 28px 1fr;
    gap: 6px 12px;
    padding: 14px 14px 12px !important;
    margin: 0 0 8px !important;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    align-items: center;
}
body.is-checkout .mobile_content #vmMainPage div.pmeth:has(input:checked) {
    border-color: var(--primary) !important;
    background: #f0f9ff !important;
}
body.is-checkout .mobile_content #vmMainPage div.pmeth > input[type="radio"] {
    grid-row: 1 / span 2;
    align-self: center;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    accent-color: var(--primary);
}
body.is-checkout .mobile_content #vmMainPage div.pmeth > label {
    font-weight: 700 !important;
    color: #111827 !important;
    font-size: 14px !important;
    margin: 0 !important;
    cursor: pointer;
    display: block !important;
    text-align: left !important;
}
body.is-checkout .mobile_content #vmMainPage div.pmeth > label a {
    color: #111827 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}
body.is-checkout .mobile_content #vmMainPage div.pmeth > div[class*="desc"] {
    text-align: left !important;
}
body.is-checkout .mobile_content #vmMainPage div.pmeth > .paym,
body.is-checkout .mobile_content #vmMainPage div.pmeth > div[class*="desc"] {
    grid-column: 2;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
    margin: 0 !important;
}
body.is-checkout .mobile_content #vmMainPage div.pmeth a {
    color: var(--primary) !important;
    text-decoration: underline;
    pointer-events: auto !important;
    cursor: pointer;
}

/* Shipping methods table — convert to mobile cards */
body.is-checkout .mobile_content #vmMainPage table:has(input[name="shipping_rate_id"]),
body.is-checkout .mobile_content #vmMainPage table:has(input[name="payment_method_id"]) {
    display: block !important;
    width: 100% !important;
    border: none !important;
}
body.is-checkout .mobile_content #vmMainPage table:has(input[name="shipping_rate_id"]) tbody,
body.is-checkout .mobile_content #vmMainPage table:has(input[name="payment_method_id"]) tbody {
    display: block !important;
}
body.is-checkout .mobile_content #vmMainPage table:has(input[name="shipping_rate_id"]) tr.sectiontableheader,
body.is-checkout .mobile_content #vmMainPage table:has(input[name="payment_method_id"]) tr.sectiontableheader,
body.is-checkout .mobile_content #vmMainPage table:has(input[name="shipping_rate_id"]) thead,
body.is-checkout .mobile_content #vmMainPage table:has(input[name="payment_method_id"]) thead {
    display: none !important;
}
body.is-checkout .mobile_content #vmMainPage table:has(input[name="shipping_rate_id"]) tr,
body.is-checkout .mobile_content #vmMainPage table:has(input[name="payment_method_id"]) tr {
    display: grid !important;
    grid-template-columns: 24px 1fr auto;
    grid-template-areas:
        "radio name price"
        "radio desc  desc";
    gap: 4px 10px;
    padding: 12px 14px !important;
    margin: 0 0 8px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #fff !important;
    align-items: center;
    transition: border-color .15s, background .15s;
}
body.is-checkout .mobile_content #vmMainPage table:has(input[name="shipping_rate_id"]) tr td:nth-child(1),
body.is-checkout .mobile_content #vmMainPage table:has(input[name="payment_method_id"]) tr td:nth-child(1) {
    grid-area: radio;
    align-self: center !important;
}
body.is-checkout .mobile_content #vmMainPage table:has(input[name="shipping_rate_id"]) tr td:nth-child(2),
body.is-checkout .mobile_content #vmMainPage table:has(input[name="payment_method_id"]) tr td:nth-child(2) {
    grid-area: name;
    font-weight: 700 !important;
    color: #111827 !important;
    font-size: 14px !important;
    line-height: 1.3;
}
body.is-checkout .mobile_content #vmMainPage table:has(input[name="shipping_rate_id"]) tr td:nth-child(3),
body.is-checkout .mobile_content #vmMainPage table:has(input[name="payment_method_id"]) tr td:nth-child(3) {
    grid-area: desc;
    font-size: 12px !important;
    color: #6b7280 !important;
    line-height: 1.4;
}
body.is-checkout .mobile_content #vmMainPage table:has(input[name="shipping_rate_id"]) tr td:last-child,
body.is-checkout .mobile_content #vmMainPage table:has(input[name="payment_method_id"]) tr td:last-child {
    grid-area: price;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    text-align: right !important;
    align-self: start;
}
/* Links inside shipping/payment cards (e.g. "Επιλογή BOX") MUST stay clickable */
body.is-checkout .mobile_content #vmMainPage table:has(input[name="shipping_rate_id"]) a,
body.is-checkout .mobile_content #vmMainPage table:has(input[name="payment_method_id"]) a {
    color: var(--primary) !important;
    text-decoration: underline;
    pointer-events: auto !important;
    cursor: pointer;
    position: relative;
    z-index: 2;
    display: inline !important;
    background: none !important;
    border: none !important;
    height: auto !important;
}
body.is-checkout .mobile_content #vmMainPage table:has(input[name="shipping_rate_id"]) tr:has(input:checked),
body.is-checkout .mobile_content #vmMainPage table:has(input[name="payment_method_id"]) tr:has(input:checked) {
    border-color: var(--primary) !important;
    background: #f0f9ff !important;
}
body.is-checkout .mobile_content #vmMainPage table:has(input[name="shipping_rate_id"]) td,
body.is-checkout .mobile_content #vmMainPage table:has(input[name="payment_method_id"]) td {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    display: block !important;
    vertical-align: middle;
}
/* Radio cell */
body.is-checkout .mobile_content #vmMainPage table:has(input[name="shipping_rate_id"]) td:has(input[type="radio"]),
body.is-checkout .mobile_content #vmMainPage table:has(input[name="payment_method_id"]) td:has(input[type="radio"]) {
    grid-row: 1 / span 2;
    align-self: center;
}
body.is-checkout .mobile_content #vmMainPage input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
    margin: 0;
}
/* Method name (carrier) */
body.is-checkout .mobile_content #vmMainPage table:has(input[name="shipping_rate_id"]) tr td:nth-child(2),
body.is-checkout .mobile_content #vmMainPage table:has(input[name="payment_method_id"]) tr td:nth-child(2) {
    font-weight: 700;
    color: #111827;
    font-size: 14px;
    line-height: 1.3;
}
/* Description (long text middle column) */
body.is-checkout .mobile_content #vmMainPage table:has(input[name="shipping_rate_id"]) tr td:nth-child(3),
body.is-checkout .mobile_content #vmMainPage table:has(input[name="payment_method_id"]) tr td:nth-child(3) {
    grid-column: 2;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}
/* Price */
body.is-checkout .mobile_content #vmMainPage table:has(input[name="shipping_rate_id"]) tr td:last-child,
body.is-checkout .mobile_content #vmMainPage table:has(input[name="payment_method_id"]) tr td:last-child {
    grid-column: 3;
    grid-row: 1;
    font-size: 15px;
    font-weight: 800;
    color: var(--primary);
    text-align: right;
    align-self: start;
}

/* Step 4 confirmation — order summary table (read-only product list).
   Use a shorter alias selector for clarity. */
body.is-checkout .mobile_content #vmMainPage table:has(.sectiontableentry1):not(:has(.ps-cart-qty)):not(:has(input[name="shipping_rate_id"])):not(:has(input[name="payment_method_id"])) {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
}
body.is-checkout .mobile_content #vmMainPage table:has(.sectiontableentry1):not(:has(.ps-cart-qty)):not(:has(input[name="shipping_rate_id"])):not(:has(input[name="payment_method_id"])) tbody {
    display: block !important;
}
body.is-checkout .mobile_content #vmMainPage table:has(.sectiontableentry1):not(:has(.ps-cart-qty)):not(:has(input[name="shipping_rate_id"])):not(:has(input[name="payment_method_id"])) tr.sectiontableheader,
body.is-checkout .mobile_content #vmMainPage table:has(.sectiontableentry1):not(:has(.ps-cart-qty)):not(:has(input[name="shipping_rate_id"])):not(:has(input[name="payment_method_id"])) thead {
    display: none !important;
}
/* Product rows: have 5 cells (name|sku|price|qty|total). Both alternating
   zebra classes need the card treatment. Per request 2026-05-03: align
   qty controls (left) and Σύνολο (right) on the SAME line for clean
   horizontal reading order — same as the cart card.
   Also covers is-account (order_details renders the same legacy template). */
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)),
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)),
body.is-account .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)),
body.is-account .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "name     price"
        "sku      price"
        "qty      subtotal";
    gap: 4px 10px;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    padding: 12px !important;
    margin: 0 0 8px !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.06);
    align-items: center !important;
}


body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td,
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td,
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td,
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    display: block !important;
}
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:nth-child(1),
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:nth-child(1),
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:nth-child(1),
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:nth-child(1) {
    grid-area: name;
    font-weight: 700;
    color: #111827;
    font-size: 14px;
    line-height: 1.3;
}
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:nth-child(2),
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:nth-child(2),
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:nth-child(2),
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:nth-child(2) {
    grid-area: sku;
    font-size: 11px;
    color: #6b7280;
}
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:nth-child(3),
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:nth-child(3),
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:nth-child(3),
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:nth-child(3) {
    grid-area: price;
    font-size: 13px;
    color: #6b7280;
    text-align: right !important;
    justify-self: end !important;
}
/* §28 — Product attributes wrap (JS-injected span). Legacy template
   concatenates $product['product_name'] . $product['product_attributes']
   directly so attributes "stick" to the title. JS wraps the post-anchor
   text in a .v2-co-attrs span — this rule makes it a new line. */
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) .v2-co-attrs,
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) .v2-co-attrs,
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) .v2-co-attrs,
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) .v2-co-attrs {
    display: block !important;
    margin-top: 4px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    line-height: 1.4 !important;
}
body.is-checkout .mobile_content #vmMainPage .v2-co-attrs br,
body.is-account  .mobile_content #vmMainPage .v2-co-attrs br {
    display: none !important;
}
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:nth-child(4),
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:nth-child(4),
body.is-account .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:nth-child(4),
body.is-account .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:nth-child(4) {
    grid-area: qty;
    font-size: 13px;
    color: #4b5563;
    text-align: left !important;
    /* Same line as Σύνολο — flex container with equal spacing between
       label, qty input, refresh, delete icons. Gap matches the form's
       internal gap so all 3 (qty/refresh/delete) are evenly spaced. */
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;        /* 14 → 9 (~-35%) per user 2026-05-05 */
    align-self: center !important;
    flex-wrap: nowrap !important;
}
/* Tap-target padding on any icons inside the qty cell (legacy may inject
   refresh/delete imgs in checkout step 4 / order_details). */
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:nth-child(4) img,
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:nth-child(4) img,
body.is-account .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:nth-child(4) img,
body.is-account .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:nth-child(4) img {
    padding: 4px !important;
    box-sizing: content-box !important;
    width: 22px !important;
    height: 22px !important;
    vertical-align: middle !important;
}
/* Legacy renders update_form + delete_form as <form> wrappers around the
   qty input + refresh/delete icons. As flex children of the qty cell they
   need their own inline-flex+center alignment + reset margins so the icons
   sit on the same baseline as the qty input — same way the cart card does. */
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:nth-child(4) form,
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:nth-child(4) form,
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:nth-child(4) form,
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:nth-child(4) form {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;        /* 14 → 9 (~-35%) per user 2026-05-05 */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    vertical-align: middle !important;
}
/* Compact qty input matching cart card */
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:nth-child(4) input[type="text"],
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:nth-child(4) input[type="number"],
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:nth-child(4) input[type="text"],
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:nth-child(4) input[type="number"],
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:nth-child(4) input[type="text"],
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:nth-child(4) input[type="number"],
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:nth-child(4) input[type="text"],
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:nth-child(4) input[type="number"] {
    width: 44px !important;
    height: 36px !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}
/* input[type="image"] (legacy refresh/delete buttons) — same tap-target as img */
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:nth-child(4) input[type="image"],
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:nth-child(4) input[type="image"],
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:nth-child(4) input[type="image"],
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:nth-child(4) input[type="image"] {
    padding: 4px !important;
    box-sizing: content-box !important;
    width: 22px !important;
    height: 22px !important;
    vertical-align: middle !important;
}
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:nth-child(4)::before,
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:nth-child(4)::before,
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:nth-child(4)::before,
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:nth-child(4)::before {
    content: 'Τμχ: ';
    color: #9ca3af;
}
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:last-child,
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:last-child,
body.is-account .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:last-child,
body.is-account .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:last-child {
    grid-area: subtotal;
    text-align: right !important;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
    /* Was: padding-top + border-top (was a separate row). Now inline with
       qty on the SAME line → no top border, no extra padding. */
    align-self: center !important;
    padding: 0 !important;
    border-top: none !important;
    white-space: nowrap !important;
}
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:last-child::before,
body.is-checkout .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:last-child::before,
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry1:has(td:nth-child(5)) td:last-child::before,
body.is-account  .mobile_content #vmMainPage table tr.sectiontableentry2:has(td:nth-child(5)) td:last-child::before {
    content: 'Σύνολο: ';
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    margin-right: 6px;
}
/* Summary rows: 2-cell entries (Μερικό Σύνολο, Έξοδα Αποστολής, Σύνολο). */
body.is-checkout .mobile_content #vmMainPage table:has(.sectiontableentry1):not(:has(.ps-cart-qty)):not(:has(input[name="shipping_rate_id"])):not(:has(input[name="payment_method_id"])) tr.sectiontableentry1:not(:has(td:nth-child(3))),
body.is-checkout .mobile_content #vmMainPage table:has(.sectiontableentry1):not(:has(.ps-cart-qty)):not(:has(input[name="shipping_rate_id"])):not(:has(input[name="payment_method_id"])) tr.sectiontableentry2:not(:has(td:nth-child(3))),
body.is-checkout .mobile_content #vmMainPage table:has(.sectiontableentry1):not(:has(.ps-cart-qty)):not(:has(input[name="shipping_rate_id"])):not(:has(input[name="payment_method_id"])) tr:not(.sectiontableheader):not(.sectiontableentry1):not(.sectiontableentry2) {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 4px 12px !important;
    border: none !important;
    background: transparent !important;
    gap: 8px;
    margin: 0;
}
body.is-checkout .mobile_content #vmMainPage table:has(.sectiontableentry1):not(:has(.ps-cart-qty)):not(:has(input[name="shipping_rate_id"])):not(:has(input[name="payment_method_id"])) tr.sectiontableentry1:not(:has(td:nth-child(3))) > td,
body.is-checkout .mobile_content #vmMainPage table:has(.sectiontableentry1):not(:has(.ps-cart-qty)):not(:has(input[name="shipping_rate_id"])):not(:has(input[name="payment_method_id"])) tr.sectiontableentry2:not(:has(td:nth-child(3))) > td {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    flex: 0 0 auto;
}
body.is-checkout .mobile_content #vmMainPage table:has(.sectiontableentry1):not(:has(.ps-cart-qty)):not(:has(input[name="shipping_rate_id"])):not(:has(input[name="payment_method_id"])) tr.sectiontableentry1:not(:has(td:nth-child(3))) > td:first-child,
body.is-checkout .mobile_content #vmMainPage table:has(.sectiontableentry1):not(:has(.ps-cart-qty)):not(:has(input[name="shipping_rate_id"])):not(:has(input[name="payment_method_id"])) tr.sectiontableentry2:not(:has(td:nth-child(3))) > td:first-child {
    color: #4b5563;
    font-size: 13px;
}
body.is-checkout .mobile_content #vmMainPage table:has(.sectiontableentry1):not(:has(.ps-cart-qty)):not(:has(input[name="shipping_rate_id"])):not(:has(input[name="payment_method_id"])) tr.sectiontableentry1:not(:has(td:nth-child(3))) > td:last-child,
body.is-checkout .mobile_content #vmMainPage table:has(.sectiontableentry1):not(:has(.ps-cart-qty)):not(:has(input[name="shipping_rate_id"])):not(:has(input[name="payment_method_id"])) tr.sectiontableentry2:not(:has(td:nth-child(3))) > td:last-child {
    font-weight: 700;
    color: var(--primary);
    font-size: 15px;
}

/* ════════════════════════════════════════════════════════════
   CHECKOUT (login + register entry, address forms, payment)
   ════════════════════════════════════════════════════════════ */
.mobile_content #vmMainPage > h3 {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    margin: 4px 0 16px;
    letter-spacing: -0.3px;
}
.mobile_content h4.returning_customer,
.mobile_content h4.new_customer {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 0 8px;
    font-size: 16px !important;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.mobile_content h4.returning_customer:has(input:checked),
.mobile_content h4.new_customer:has(input:checked) {
    border-color: var(--primary);
    background: #f0f9ff;
}
.mobile_content input.toggler {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    accent-color: var(--primary);
    flex-shrink: 0;
}
.mobile_content h4.returning_customer label,
.mobile_content h4.new_customer label {
    flex: 1;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    display: block;
}
.mobile_content h4.new_customer label span,
.mobile_content h4.returning_customer label span {
    color: var(--primary);
    text-decoration: underline;
    font-weight: 600;
    margin-left: 6px;
    font-size: 13px;
}
.mobile_content .stretcher {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    padding: 16px;
    margin: 0 0 12px;
}
.mobile_content #login_stretcher form,
.mobile_content #register_stretcher form {
    display: block;
    margin: 0;
}
.mobile_content #vmMainPage form label,
.mobile_content .stretcher label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 4px;
}
.mobile_content #vmMainPage input.inputbox[type="text"],
.mobile_content #vmMainPage input.inputbox[type="email"],
.mobile_content #vmMainPage input.inputbox[type="tel"],
.mobile_content #vmMainPage input.inputbox[type="password"],
.mobile_content #vmMainPage input.inputbox:not([type]) {
    width: 100% !important;
    height: 44px !important;
    padding: 0 12px !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    color: #111827 !important;
    background: #fff !important;
    margin: 0 0 12px !important;
    box-sizing: border-box !important;
}
.mobile_content #vmMainPage input.inputbox:focus {
    border-color: var(--primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37,136,166,.12) !important;
}
.mobile_content #vmMainPage select {
    width: 100% !important;
    height: 44px !important;
    padding: 0 12px !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    color: #111827 !important;
    background: #fff !important;
    margin: 0 0 12px !important;
    box-sizing: border-box !important;
}
.mobile_content #vmMainPage textarea {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    color: #111827 !important;
    background: #fff !important;
    margin: 0 0 12px !important;
    box-sizing: border-box !important;
    min-height: 90px !important;
    resize: vertical;
}
.mobile_content #login_stretcher input.button,
.mobile_content #register_stretcher input.button,
.mobile_content #vmMainPage form input[type="submit"]:not(.addtocart_button) {
    width: 100%;
    height: 46px;
    padding: 0 18px !important;
    background: var(--primary) !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: .4px;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(37,136,166,.25);
    margin: 6px 0 4px;
    -webkit-appearance: none;
    appearance: none;
}
.mobile_content #vmMainPage form input[type="submit"]:not(.addtocart_button):hover {
    background: var(--primary-dk) !important;
}
.mobile_content .stretcher a {
    color: var(--primary) !important;
    font-size: 13px;
    text-decoration: none;
    display: inline-block;
    margin: 0 0 8px;
}
.mobile_content #vmMainPage > .system-message,
.mobile_content > .mobile_content_top_modules + #vmMainPage > div[style*="color"][style*="background"] {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #991b1b !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    margin: 0 0 14px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-align: center;
}
.mobile_content #vmMainPage fieldset {
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 14px !important;
    margin: 0 0 14px !important;
    background: #fafbfc;
}
.mobile_content #vmMainPage legend,
.mobile_content #vmMainPage legend.sectiontableheader {
    background: transparent !important;
    border: none !important;
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    padding: 0 8px !important;
    margin: 0 !important;
}
.mobile_content #vmMainPage .ak_user_fields > div,
.mobile_content #vmMainPage fieldset > div {
    margin: 0 0 10px;
}
.mobile_content #vmMainPage .ak_user_fields strong,
.mobile_content #vmMainPage fieldset strong {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    display: block;
    margin: 0 0 4px;
}
.mobile_content #vmMainPage table.checkoutBar { display: none !important; }
.mobile_content #vmMainPage form .button_holder {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 14px 0 0;
}
.mobile_content #vmMainPage .button_holder input.button {
    flex: 1;
}
.mobile_content #vmMainPage a.button,
.mobile_content #vmMainPage button.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 18px !important;
    background: var(--primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border: none !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    box-sizing: border-box;
    margin: 4px 0;
}

/* ── SMART SEARCH BUTTON OVERRIDE ───────────────────────── */
.psm-trigger-btn,
.psm-trigger-btn:hover,
.psm-trigger-btn:focus {
    background: var(--primary) !important;
    background-image: none !important;
    background-color: var(--primary) !important;
    border: none !important;
    color: var(--white) !important;
    border-radius: 20px !important;
    box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════
   REAL-DEVICE FIXES
   ════════════════════════════════════════════════════════════ */

/* ── 1. GAP REDUCTION ────────────────────────────────────────
   Kill invisible spacers and oversize margins everywhere     */
.mobile_content br { display: none !important; }
/* Re-enable <br> inside product description, short description AND
   Joomla article content so editor line breaks render naturally. */
.mobile_content .v2fp-desc br,
.mobile_content .v2fp-sdesc br,
.mobile_content .product_s_desc br,
.mobile_content .product_long_desc br,
.mobile_content .contentpaneopen br,
.mobile_content .contentpane br,
.mobile_content .com_content br,
.mobile_content .item-page br,
.mobile_content .article-content br,
body.is-account .mobile_content #vmMainPage br,
body.is-thankyou .mobile_content #vmMainPage br {
    display: block !important;
    height: 0 !important;
    overflow: hidden !important;
}
/* High-specificity override: line 3147 has ".mobile_content #vmMainPage br + br"
   with specificity 1,1,2 which beats our re-enable (0,2,1).
   Adding #vmMainPage here gives specificity 1,2,1 — wins the battle. */
.mobile_content #vmMainPage .v2fp-desc br,
.mobile_content #vmMainPage .v2fp-sdesc br,
.mobile_content #vmMainPage .product_s_desc br,
.mobile_content #vmMainPage .product_long_desc br,
.mobile_content #vmMainPage .contentpaneopen br,
.mobile_content #vmMainPage .contentpane br {
    display: block !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Joomla article content — natural rhythm, like product description. */
.mobile_content .contentpaneopen p,
.mobile_content .contentpane p,
.mobile_content .com_content p,
.mobile_content .item-page p,
.mobile_content .article-content p {
    margin: 0 0 1em !important;
    line-height: 1.6;
}
.mobile_content .contentpaneopen h2,
.mobile_content .contentpaneopen h3,
.mobile_content .contentpaneopen h4,
.mobile_content .contentpane h2,
.mobile_content .contentpane h3,
.mobile_content .contentpane h4 {
    color: #111827 !important;
    font-weight: 700 !important;
    margin: 1.2em 0 0.4em !important;
    line-height: 1.3 !important;
}
.mobile_content .contentpaneopen ul,
.mobile_content .contentpaneopen ol,
.mobile_content .contentpane ul,
.mobile_content .contentpane ol {
    margin: 0.5em 0 1em 20px;
    padding-left: 8px;
}
.mobile_content .contentpaneopen li,
.mobile_content .contentpane li { margin: 0.25em 0; line-height: 1.5; }
.mobile_content .contentpaneopen p:empty,
.mobile_content .contentpaneopen div:empty,
.mobile_content .contentpaneopen strong:empty { display: none !important; }
.mobile_content .contentpaneopen br + br,
.mobile_content .contentpane br + br { display: none !important; }
.mobile_content .contentpaneopen img,
.mobile_content .contentpane img {
    max-width: 100% !important;
    height: auto !important;
}
.mobile_content div.clear,
.mobile_content .clear_float {
    clear: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}
.mobile_content p { margin-bottom: 8px !important; }
.mobile_content h2,
.mobile_content h3,
.mobile_content h4 {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}

/* §29 — Pathway breadcrumb on account pages (e.g. order_details).
   Renders as <div class="pathway"><a class="pathway">Συντήρηση Λογαριασμού</a></div>.
   User asked: tighter top/bottom + bigger text (2026-05-04). */
.mobile_content div.pathway {
    margin: 2px 0 4px !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}
.mobile_content div.pathway > a.pathway {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    text-decoration: none !important;
    letter-spacing: -0.2px !important;
}
/* Kill the empty .buttons_heading container + its trailing <br>s that
   legacy outputs after the pathway → big gap before content.
   Selector includes #vmMainPage to beat the earlier rule
   `body.is-account .mobile_content #vmMainPage br { display: block !important }`
   which has higher specificity due to the ID. */
body.is-account .mobile_content #vmMainPage div.buttons_heading {
    display: none !important;
}
body.is-account .mobile_content #vmMainPage div.buttons_heading ~ br {
    display: none !important;
}
/* Trim excess on common module wrappers */
.mobile_content :is([class*="moduletable"], .v2fp-related) { margin-bottom: 10px !important; }
.mobile_content :is([class*="moduletable"], .v2fp-related) + .moduletable { margin-top: 0 !important; }
/* Category page top description paragraph */
.mobile_content #vmMainPage > p,
.mobile_content #vmMainPage > h2,
.mobile_content #vmMainPage > h3 {
    margin-bottom: 8px !important;
}

/* ── 2. QUANTITY INPUT — name is "quantity[]" with brackets ──
   [name="quantity"] exact match FAILS — use starts-with      */
.mobile_content input[name^="quantity"],
.mobile_content input[name^="qty"],
.mobile_content input[id^="quantity"] {
    width: 64px !important;
    max-width: 64px !important;
    min-width: 40px !important;
    flex-shrink: 0 !important;
}

/* ── 3. HOT PRICE BADGE ──────────────────────────────────────
   Badge is INSIDE a.list_product_link — needs relative parent */
.mobile_content a.list_product_link {
    position: relative !important;
    display: block;
}
/* Badge absolute on the link — targets BOTH id and class */
.mobile_content #list_badge_img,
.mobile_content .list_badge_img {
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
    width: 48px !important;
    height: auto !important;
    max-width: 48px !important;
    min-height: 0 !important;
    margin: 0 !important;
    z-index: 3;
}

/* ── 4. SUBCATEGORY PAGE: categories inside table>tr ─────────
   VM renders: #vmMainPage > div > table > tr > div.category
   Use float (not flex) so it works on all mobile browsers     */
/* Kill inline float on wrapper divs */
.mobile_content #vmMainPage > div[style*="float"],
.mobile_content #vmMainPage > div[style*="text-align"] {
    float: none !important;
    width: 100% !important;
    clear: both !important;
}
/* Demote table + tr to block containers */
.mobile_content #vmMainPage table {
    display: block !important;
    width: 100% !important;
    border: none !important;
}
.mobile_content #vmMainPage tr {
    display: block !important;
    width: 100% !important;
    overflow: hidden;
}
/* Categories inside tr: 2 per row via float */
.mobile_content #vmMainPage tr > .category {
    float: left !important;
    width: calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    margin: 0 6px 10px 0 !important;
    box-sizing: border-box !important;
}
.mobile_content #vmMainPage tr > .category:nth-child(2n) {
    margin-right: 0 !important;
}
/* Kill inline font-size on the big category title div */
.mobile_content #vmMainPage > div[style*="font-size"] {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    margin-bottom: 4px !important;
}

/* ── 5b. QUANTITY BUTTONS (+/-) — restore visible icon ───────
   These are input[type=button] with no value — original uses
   sprite background; our general button rule hides them      */
.mobile_content input.quantity_box_button {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    min-width: 0 !important;
    background: var(--primary) !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    background-image: none !important;
}
.mobile_content input.quantity_box_button_up {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 3v10M3 8h10' stroke='white' stroke-width='2'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
.mobile_content input.quantity_box_button_down {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M3 8h10' stroke='white' stroke-width='2'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
/* Quantity row wrapper — remove old float */
.mobile_content div.quantity_box,
.mobile_content div[style*="vertical-align: middle"] {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
}

/* ── 5. PRODUCT DESCRIPTION — kill floating images ──────────*/
.mobile_content .productsDescription img,
.mobile_content .product_right .productsDescription img {
    float: none !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block;
    margin: 6px auto;
}

/* ── 6. REVIEWS MODULE — single column on mobile ────────────*/
.mobile_content .j_revslider,
.mobile_content .j_revslider_wrap {
    display: block !important;
    width: 100% !important;
    overflow: hidden;
}
.mobile_content .j_revslider > div,
.mobile_content .j_revslider_wrap > div {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    height: auto !important;
    max-height: 140px;
}
/* generic: any div with fixed pixel width inside mobile_content moduletable */
.mobile_content > .moduletable div[style*="width:33"],
.mobile_content > .moduletable div[style*="width: 33"] {
    width: 100% !important;
    float: none !important;
}

/* ── 7. EQUAL-HEIGHT PRODUCT CARD IMAGES ────────────────────*/
.mobile_content .browseProductImage {
    height: 130px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
}
.mobile_content .browseProductImage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── 8. PRODUCT DETAIL — keep images in content area ────────*/
.mobile_content .product_right img {
    max-width: 100% !important;
    height: auto !important;
}
.mobile_content .product_right div[style*="float"] {
    float: none !important;
    width: auto !important;
}

/* ── 9. V2 CATEGORY GRID — built by mobile_v2.js ────────────
   JS extracts .category divs from broken table and wraps them
   in .v2-cat-grid for a proper 2-column flex layout.          */
#vmMainPage .v2-cat-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 8px !important;
    padding: 4px 0 16px !important;
    width: 100% !important;
    justify-content: center;
}
#vmMainPage .v2-cat-grid .category {
    max-width: 180px !important;
    width: 100% !important;
    justify-self: center !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid #eef0f3 !important;
    border-radius: 14px !important;
    text-align: center !important;
    padding: 10px 10px 12px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08) !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
    display: flex !important;
    flex-direction: column !important;
}
#vmMainPage .v2-cat-grid .category:active,
#vmMainPage .v2-cat-grid .category:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(16,24,40,.10), 0 2px 4px rgba(16,24,40,.06) !important;
}
#vmMainPage .v2-cat-grid .category_image,
#vmMainPage .v2-cat-grid .category > a {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-height: 240px !important;
    background: #f7f9fb !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin: 0 auto 10px !important;
    position: relative !important;
}
#vmMainPage .v2-cat-grid .category img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    border: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transition: transform .25s ease !important;
}
#vmMainPage .v2-cat-grid .category:hover img {
    transform: scale(1.04) !important;
}
#vmMainPage .v2-cat-grid .category_heading {
    margin: 0 !important;
    padding: 0 2px !important;
}
#vmMainPage .v2-cat-grid .category_heading a {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    text-decoration: none !important;
    display: block !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
}
/* Hide the stray <br> that VM adds after each category_image */
#vmMainPage .v2-cat-grid .category_image br { display: none !important; }
/* Section heading "Κατηγορίες" */
#vmMainPage > h1, #vmMainPage > .productdetails-view h1 { display: none !important; }
.mobile_content #vmMainPage h2.cat_title,
.mobile_content #vmMainPage h2:first-of-type {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    margin: 6px 0 10px !important;
    letter-spacing: -0.02em !important;
}

/* ══════════════════════════════════════════════════════════
   ── 10. FLYPAGE V2 — MODERN PRODUCT DETAIL ─────────────────
   ══════════════════════════════════════════════════════════ */
.v2fp-wrap {
    padding: 0 10px 16px;
    max-width: 640px;
    margin: 0 auto;
    color: #1f2937;
    display: flex;
    flex-direction: column;
}
/* Reorder so title appears ABOVE image */
.v2fp-wrap > .v2fp-breadcrumbs { order: 1; }
.v2fp-wrap > .v2fp-title       { order: 2; }
.v2fp-wrap > .v2fp-rating      { order: 3; }
.v2fp-wrap > .v2fp-img-wrap    { order: 4; }
.v2fp-wrap > .v2fp-sdesc       { order: 5; }
.v2fp-wrap > .v2fp-meta-row    { order: 6; }
.v2fp-wrap > .v2fp-offer       { order: 6; }  /* Same order as meta-row; appears right after via DOM order, just above price */
.v2fp-wrap > .v2fp-price-row   { order: 7; }
.v2fp-wrap > .v2fp-attrs-box   { order: 8; }   /* NEW: Διαθέσιμες επιλογές box */
.v2fp-wrap > .v2fp-avail       { order: 9; }   /* shifted down from 8 */
.v2fp-wrap > .v2fp-atc         { order: 10; }  /* shifted down from 9 */
.v2fp-wrap > .v2fp-quickorder  { order: 11; }  /* shifted down from 10 */
.v2fp-wrap > .v2fp-oos         { order: 11; }  /* same slot — replaces quickorder when OOS */
.v2fp-wrap > .v2fp-links       { order: 12; }
.v2fp-wrap > .v2fp-trust       { order: 13; }
.v2fp-wrap > hr                { order: 14; }
.v2fp-wrap > .v2fp-desc        { order: 15; }
.v2fp-wrap > .v2fp-related     { order: 16; margin-bottom: 6px; }

/* breadcrumbs — wrap to multiple lines so all categories show */
.v2fp-breadcrumbs {
    font-size: 11.5px;
    color: #6b7280;
    margin: 0 0 8px;
    line-height: 1.5;
    padding: 0;
    word-break: break-word;
    overflow: visible;
    white-space: normal;
}
.v2fp-breadcrumbs::before {
    content: 'Βρίσκεστε εδώ:';
    font-weight: 600;
    color: #374151;
    margin-right: 4px;
}
.v2fp-breadcrumbs a {
    color: #6b7280 !important;
    text-decoration: none !important;
}
.v2fp-breadcrumbs a:hover { color: var(--primary) !important; }
.v2fp-breadcrumbs span {
    color: #374151;
}
.v2fp-breadcrumbs .v2fp-bc-sep {
    margin: 0 6px;
    color: #d1d5db;
}

/* main product image — large square hero */
.v2fp-img-wrap {
    position: relative;
    text-align: center;
    margin: 0 0 14px;
    background: #fff;
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(16,24,40,.06);
    border: 1px solid #eef0f3;
    aspect-ratio: 1 / 1;
    max-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.v2fp-img-wrap a, .v2fp-img-wrap .fancybox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 14px;
    box-sizing: border-box;
}
.v2fp-main-img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
}

/* title — proper H1 hierarchy */
.v2fp-title {
    font-size: 20px;
    font-weight: 800;
    color: #111827;
    line-height: 1.3;
    margin: 4px 0 6px;
    letter-spacing: -0.2px;
}

/* star rating */
.v2fp-rating {
    margin: 0 0 10px;
    color: #f5a623;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.v2fp-rating .fa { color: #f5a623; }

/* short description — subtle */
.v2fp-sdesc {
    font-size: 13.5px;
    color: #4b5563;
    margin: 0 0 12px;
    line-height: 1.55;
}

/* meta row: code chip */
.v2fp-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #6b7280;
}
.v2fp-code {
    font-size: 12px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 500;
}
.v2fp-code strong { font-weight: 700; color: #374151; }
/* Copy-code button injected by mobile_v2.js next to the SKU. Compact, blue
   accent, with check-mark feedback on click. Same height as .v2fp-code pill
   so they sit baseline-aligned in the .v2fp-meta-row flex container. */
.v2fp-meta-row .v2-copy-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 10px !important;
    height: 24px !important;
    margin: 0 !important;
    background: #eff6ff !important;
    color: var(--primary) !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: background .15s ease, transform .1s ease;
    white-space: nowrap !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}
/* Don't change .v2fp-code to inline-flex (flex collapses the whitespace
   between "Κωδικός:" text node and <strong>). Use inline-block + matching
   line-height to keep it the same visual height as the copy button. */
.v2fp-meta-row .v2fp-code {
    display: inline-block !important;
    height: 24px !important;
    line-height: 22px !important;   /* 24 - 2px borders/padding compensation */
    padding: 0 10px !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}
.v2fp-meta-row .v2-copy-btn:hover {
    background: #dbeafe !important;
}
.v2fp-meta-row .v2-copy-btn:active {
    transform: scale(0.95);
}
.v2fp-meta-row .v2-copy-btn.is-copied {
    background: #dcfce7 !important;
    border-color: #16a34a !important;
    color: #166534 !important;
}
.v2fp-meta-row .v2-copy-btn .v2-copy-icon {
    flex-shrink: 0 !important;
}
.v2fp-admin-pill {
    font-size: 11px;
    background: #fee2e2;
    color: #b91c1c;
    border-radius: 999px;
    padding: 3px 10px;
    font-weight: 600;
}

/* price row — left-to-right gradient: blue (price area) → white (badges
   area) so the white-bg seller/quality badges stand out cleanly. */
.v2fp-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(to right, #e6f3f8 0%, #e6f3f8 22%, #ffffff 45%, #ffffff 100%);
    border: 1px solid #d6e7ee;
    border-radius: 14px;
    padding: 14px 16px;
    margin: 0 0 14px;
}
.v2fp-price-block { flex: 1 1 auto; }
.v2fp-price-lbl {
    font-size: 11px;
    color: #6b7280;
    margin: 0 0 2px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}
.v2fp-price-lbl strong { font-weight: 600; color: #6b7280; }
.v2fp-price-val {
    font-size: 26px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.05;
    letter-spacing: -0.5px;
}
.v2fp-price-val .before_price { display: none; }

/* product badges */
.v2fp-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.v2fp-badge {
    max-width: 56px;
    max-height: 56px;
    height: auto;
}

/* availability — single line on wide; auto-wrap on narrow.
   Use viewport @media for real phones AND container query for any
   constrained body width (works in test mode too). */
.v2fp-wrap {
    container-type: inline-size;
}
.v2fp-avail {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 12px;
    margin: 0 0 10px;
    display: block;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    overflow: visible;
}
.v2fp-avail > div:first-of-type {
    display: inline;
}
@media (max-width: 400px) {
    .v2fp-avail > div:first-of-type {
        display: block !important;
        margin: 0 0 2px !important;
    }
}
@container (max-width: 400px) {
    .v2fp-avail > div:first-of-type {
        display: block !important;
        margin: 0 0 2px !important;
    }
}
/* Green dot now lives on the first child (Διαθεσιμότητα) so it stays
   inline with it on both wide AND narrow layouts. */
.v2fp-avail > div:first-of-type::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(34,197,94,.2);
    margin-right: 8px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}
.v2fp-avail .availabilityHeader {
    font-weight: 700;
    color: #166534;
    margin-right: 4px;
}
.v2fp-avail img { display: none !important; }
.v2fp-avail br { display: none !important; }
/* Force every child inline so the whole pill stays on a single line */
.v2fp-avail > div,
.v2fp-avail > span {
    display: inline !important;
    white-space: nowrap !important;
}

/* ═══════════════════════════════════════════════════════════════════
   NEW LAYOUT (2026-05-06): «Διαθέσιμες επιλογές» moved out of ATC.
   Order: price → attrs-box → availability → ATC button → quick-order.
   The .productAtrrDiv is moved by mobile_v2.js (v2FpExtractAttrs) into
   .v2fp-attrs-box; HTML5 form="<id>" attribute keeps controls connected
   to the original addtocart form so submit still works.
   ═══════════════════════════════════════════════════════════════════ */
/* The outer .v2fp-attrs-box is just a positioning slot — no chrome.
   The inner .productAtrrDiv (placed inside by JS) keeps its own
   card styling from Section 11, so we'd otherwise get a double border.
   Margin tightened too for a more compact look. */
.v2fp-attrs-box {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
    box-shadow: none !important;
}
.v2fp-attrs-box:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}
.v2fp-attrs-box .vmCartDetails,
.v2fp-attrs-box .vmCartChild,
.v2fp-attrs-box .vmCartAttribute,
.v2fp-attrs-box .vmCartAttributes,
.v2fp-attrs-box .vmAttribChildDetail,
.v2fp-attrs-box .vmAttribChildDescription,
.v2fp-attrs-box .productAtrrDiv {
    text-align: left !important;
    display: block !important;
}
.v2fp-attrs-box .vmCartChild,
.v2fp-attrs-box .vmCartAttribute,
.v2fp-attrs-box .vmAttribChildDescription {
    margin: 0 0 2px !important;        /* tighter spacing between rows */
}
.v2fp-attrs-box select.inputboxattrib {
    display: inline-block !important;
    width: auto !important;            /* fit content — not full container width */
    max-width: 100% !important;
    height: 42px !important;
    padding: 0 28px 0 12px !important; /* extra right pad for dropdown arrow */
    border: 1.5px solid #d1d5db !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
    background: #fff !important;
    color: #111827 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    cursor: pointer;
}
.v2fp-attrs-box select.inputboxattrib:focus {
    outline: none;
    border-color: var(--primary, #2588a6) !important;
}
.v2fp-attrs-box .vmAttribChildDetail {
    margin: 0 0 4px !important;
    padding: 0 !important;
}
.v2fp-attrs-box .vmAttribChildDetail label {
    display: inline-block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}
.v2fp-attrs-box .vmAttribChildDetail select,
.v2fp-attrs-box .vmAttribChildDetail select.inputboxattrib {
    display: block !important;
    width: 100% !important;
    margin: 4px 0 0 !important;
}
.v2fp-attrs-box h3 {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #1f2937 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    text-transform: none !important;
}
.v2fp-attrs-box h3 small {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    text-transform: none !important;
    margin-left: 4px !important;
    display: inline-block !important;
}

/* ── ATC «naked» container: just the qty + Αγορά button (full-width) ──
   With attributes moved to .v2fp-attrs-box, .v2fp-atc no longer needs
   the card chrome — make it transparent so the button can stretch. */
.v2fp-atc {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
    box-shadow: none !important;
}
/* The legacy float-left wrapper around qty + button — convert to flex row */
.v2fp-atc form.addtocart_form > div[style*="float"] {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
}
/* Hide the «Ποσότητα:» legacy label — the qty input is self-evident */
.v2fp-atc form.addtocart_form label.quantity_box {
    display: none !important;
}
/* Αγορά submit button: leave the carefully-tuned styling further down
   (with the cart-icon background SVG, lines ~5474+) intact — earlier
   override here was a mistake that wiped the cart icon. */
/* «Γρήγορη Παραγγελία» — full-width like ATC */
.v2fp-quickorder {
    margin: 0 0 8px !important;
}
.v2fp-quickorder .v2fp-quickbtn {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* ───── Original .v2fp-atc card styling kept below for legacy fallback,
        but most of it now applies to attrs-box too. ─── */
.v2fp-atc-LEGACY-CARD-DISABLED {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    padding: 12px;
    margin: 0 0 14px;
    box-shadow: 0 1px 3px rgba(16,24,40,.04);
}
.v2fp-atc select {
    width: 100%;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
}
/* vmCartDetails contains the attribute selects (Χρωματισμός κλπ).
   Show the children but flatten the wrapper. */
:is(.v2fp-atc, .v2fp-attrs-box) .vmCartDetails {
    display: block !important;
    margin: 0 0 10px;
}
:is(.v2fp-atc, .v2fp-attrs-box) .vmCartChild,
:is(.v2fp-atc, .v2fp-attrs-box) .vmCartAttribute,
:is(.v2fp-atc, .v2fp-attrs-box) .vmAttribChildDescription {
    display: block !important;
    margin: 0 0 2px;     /* tighter row spacing — was 6px */
}
.v2fp-atc select.inputboxattrib {
    width: 100% !important;
    height: 42px !important;
    padding: 0 12px !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;       /* bolder */
    letter-spacing: -0.2px !important; /* slightly condensed */
    background: #fff !important;
    color: #111827 !important;
    margin: 0 0 8px !important;
    box-sizing: border-box !important;
    cursor: pointer;
}
.v2fp-atc select.inputboxattrib:focus {
    outline: none;
    border-color: var(--primary) !important;
}
/* Attributes container — force LEFT alignment everywhere */
:is(.v2fp-atc, .v2fp-attrs-box) .vmCartDetails,
:is(.v2fp-atc, .v2fp-attrs-box) .vmCartChild,
:is(.v2fp-atc, .v2fp-attrs-box) .vmCartAttributes,
:is(.v2fp-atc, .v2fp-attrs-box) .vmCartAttribute,
:is(.v2fp-atc, .v2fp-attrs-box) .vmAttribChildDetail,
:is(.v2fp-atc, .v2fp-attrs-box) .vmAttribChildDescription,
:is(.v2fp-atc, .v2fp-attrs-box) .productAtrrDiv {
    text-align: left !important;
    display: block !important;
}
/* The 2 vmAttribChildDetail divs hold: label+colon, then select */
:is(.v2fp-atc, .v2fp-attrs-box) .vmAttribChildDetail {
    margin: 0 0 4px !important;
    padding: 0 !important;
}
:is(.v2fp-atc, .v2fp-attrs-box) .vmAttribChildDetail label {
    display: inline-block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    width: auto !important;
    line-height: 1.4 !important;
}
:is(.v2fp-atc, .v2fp-attrs-box) .vmAttribChildDetail select,
:is(.v2fp-atc, .v2fp-attrs-box) .vmAttribChildDetail select.inputboxattrib {
    display: block !important;
    width: 100% !important;
    margin: 4px 0 0 !important;
    text-align: left !important;
}
:is(.v2fp-atc, .v2fp-attrs-box) .vmCartAttribute {
    margin: 0 0 8px !important;
    padding: 0 !important;
}
/* Label + colon must stay inline on same line */
:is(.v2fp-atc, .v2fp-attrs-box) .vmCartAttribute > label,
:is(.v2fp-atc, .v2fp-attrs-box) .vmCartAttribute > strong,
:is(.v2fp-atc, .v2fp-attrs-box) .vmCartAttribute label {
    display: inline-block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    width: auto !important;
    line-height: 1.4 !important;
}
/* Kill ALL <br>, <center>, and any <span>/<div> wrapping the colon */
:is(.v2fp-atc, .v2fp-attrs-box) .vmCartAttribute br,
:is(.v2fp-atc, .v2fp-attrs-box) .vmCartDetails br,
:is(.v2fp-atc, .v2fp-attrs-box) .productAtrrDiv br {
    display: none !important;
}
:is(.v2fp-atc, .v2fp-attrs-box) .vmCartAttribute center,
:is(.v2fp-atc, .v2fp-attrs-box) .vmCartDetails center {
    text-align: left !important;
    display: inline !important;
}
/* Select goes on next line, full width — block forces newline naturally */
:is(.v2fp-atc, .v2fp-attrs-box) .vmCartAttribute select,
:is(.v2fp-atc, .v2fp-attrs-box) .vmCartAttribute select.inputboxattrib,
:is(.v2fp-atc, .v2fp-attrs-box) .vmCartDetails select.inputboxattrib {
    display: block !important;
    width: 100% !important;
    margin: 4px 0 0 !important;
    text-align: left !important;
}
/* Layout: square number input on the left + (+/−) stacked vertically next
   to it + big ΑΓΟΡΑ button on the right. Buttons are wrapped in
   .v2-qty-btns by mobile_v2.js (v2FpQtyWrap). */
.v2fp-atc form > div:nth-of-type(2) {
    display: flex !important;
    align-items: center;          /* vertically center small qty group with tall ΑΓΟΡΑ */
    gap: 8px;
    flex-wrap: nowrap;
}
.v2fp-atc .v2-qty-btns {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
.v2fp-atc label.quantity_box { display: none !important; }
.v2fp-wrap .v2fp-atc input.inputboxquantity {
    width: 52px !important;
    min-width: 52px !important;
    flex: 0 0 52px !important;
    height: 52px !important;          /* SQUARE 52×52 — matches ΑΓΟΡΑ height */
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    color: #111827 !important;
    -moz-appearance: textfield;
    box-shadow: none !important;
    outline: none !important;
}
.v2fp-wrap .v2fp-atc input.inputboxquantity::-webkit-inner-spin-button,
.v2fp-wrap .v2fp-atc input.inputboxquantity::-webkit-outer-spin-button {
    -webkit-appearance: none; margin: 0;
}
.v2fp-wrap .v2fp-atc input.quantity_box_button,
.v2fp-wrap .v2fp-atc .quantity_box_button {
    width: 32px !important;
    height: 26px !important;          /* 26 + 26 = 52px → matches number + ΑΓΟΡΑ */
    min-width: 32px !important;
    flex: 0 0 32px !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    color: #f97316 !important;
    font-size: 0 !important;
    font-weight: 700 !important;
    cursor: pointer;
    line-height: 1 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    transition: background .15s ease, transform .1s ease;
    box-sizing: border-box !important;
}
/* + (top): rounded TOP corners */
.v2fp-wrap .v2fp-atc .quantity_box_button.quantity_box_button_up {
    border-radius: 8px 8px 0 0 !important;
    border-bottom: none !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23f97316" stroke-width="3" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
    background-color: #fff !important;
}
/* − (bottom): rounded BOTTOM corners */
.v2fp-wrap .v2fp-atc .quantity_box_button.quantity_box_button_down {
    border-radius: 0 0 8px 8px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23f97316" stroke-width="3" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
    background-color: #fff !important;
}
.v2fp-wrap .v2fp-atc .quantity_box_button:hover {
    background-color: #fff7ed !important;     /* very light orange tint */
}
.v2fp-wrap .v2fp-atc .quantity_box_button:active {
    transform: scale(0.94);
}

.v2fp-atc .addtocart_button {
    flex: 1 1 auto !important;
    font-size: 18px !important;
    padding: 0 16px 0 60px !important;     /* leave space for the cyan cart badge on the left */
    background-color: #f97316 !important;
    background-image:
        /* white shopping cart svg, centered inside the cyan circle on the left */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1.4"/><circle cx="19" cy="21" r="1.4"/><path d="M2 3h3l2.4 12.5a2 2 0 0 0 2 1.6h9a2 2 0 0 0 2-1.6L22 7H6.5"/></svg>'),
        /* cyan circle behind the cart svg */
        radial-gradient(circle at 26px 50%, var(--primary) 0, var(--primary) 18px, transparent 19px),
        /* main orange gradient body */
        linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-position: 15px center, 0 0, 0 0 !important;
    background-size: 22px 22px, auto, auto !important;
    color: #fff !important;
    font-weight: 800 !important;
    border: none !important;
    border-radius: 10px !important;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(249,115,22,.40) !important;
    transition: filter .15s ease, transform .1s ease;
    text-transform: uppercase;
    height: 52px !important;
    line-height: 52px !important;
    text-align: center !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    -webkit-appearance: none;
    appearance: none;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.v2fp-atc .addtocart_button:hover { filter: brightness(1.05); }
.v2fp-atc .addtocart_button:active { transform: scale(0.98); }

/* quick order — secondary outline style */
.v2fp-quickorder {
    font-size: 12.5px;
    color: #6b7280;
    margin: 0 0 6px;
    text-align: center;
}
.v2fp-wrap .v2fp-quickbtn,
button.v2fp-quickbtn,
a.v2fp-quickbtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 8px auto 0 !important;
    padding: 0 12px !important;
    background: #fff !important;
    color: var(--primary) !important;
    border: 1.5px solid var(--primary) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    text-indent: 0 !important;
    text-decoration: none !important;
    transition: background .15s ease;
    box-shadow: none !important;
    text-shadow: none !important;
    line-height: 40px !important;
    height: 42px !important;
    box-sizing: border-box !important;
    -webkit-appearance: none;
    appearance: none;
}
.v2fp-wrap .v2fp-quickbtn:hover { background: var(--primary) !important; color: #fff !important; }
.v2fp-wrap .v2fp-quickbtn:hover a { color: #fff !important; }
/* The legacy markup is <button><a class="modal">…</a></button>. The
   button itself has NO click handler — only the inner <a.modal>. So if
   you click in the button's padding (around the text) the modal does
   not open. Make the inner <a> fill the entire button so any click on
   the button area hits the link. */
.v2fp-wrap .v2fp-quickbtn a {
    color: var(--primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    cursor: pointer !important;
}
/* Also drop the button's padding so it doesn't create dead-zones around
   the inner link. */
.v2fp-wrap .v2fp-quickbtn,
button.v2fp-quickbtn,
a.v2fp-quickbtn {
    padding: 0 !important;
}

/* trust / info links — icon row */
.v2fp-links {
    font-size: 13px;
    margin: 0 0 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: space-around;
    background: #f9fafb;
    border-radius: 12px;
    padding: 10px;
}
.v2fp-links a {
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    flex: 1;
    justify-content: center;
    padding: 4px 8px;
    text-decoration: none;
}
.v2fp-links a:hover { color: var(--primary); }

/* divider */
.v2fp-hr {
    border: none;
    border-top: 1px solid #eef0f3;
    margin: 6px 0;
}

/* Trust badges banner (loaded via bf_flypage_under_price module) */
.v2fp-trust {
    background: #fde4c4;
    border-radius: 12px;
    padding: 14px 8px;
    margin: 8px 0 6px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.v2fp-trust:empty { display: none; }
.v2fp-trust > div,
.v2fp-trust > a,
.v2fp-trust .moduletable {
    flex: 1 1 calc(50% - 8px);
    min-width: 130px;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    text-align: center;
}
.v2fp-trust img {
    max-width: 56px;
    height: auto;
    display: block;
    margin: 0 auto 6px;
}
.v2fp-trust a {
    color: #111827 !important;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

/* full description — natural flow like desktop. We use rem-based
   margins so paragraphs/headings breathe at the SAME rhythm desktop has,
   without adding/removing space ourselves. */
.v2fp-desc {
    font-size: 14px;
    line-height: 1.3; /* slightly more comfortable than desktop default for plain text; lists/headings override to normal below */
    margin: 0 0 12px;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    padding: 14px 16px 16px;
    color: #374151;
    position: relative;
}
/* Discreet "Περιγραφή Προϊόντος" header tab — like the legacy tab,
   but small and clean, signaling the description starts below */
.v2fp-desc::before {
    content: "Περιγραφή Προϊόντος";
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--primary);
    padding: 0 0 9px;
    margin: 0 0 12px;
    border-bottom: 1px solid #eef0f3;
    position: relative;
    background-image: linear-gradient(var(--primary), var(--primary));
    background-repeat: no-repeat;
    background-size: 32px 2px;
    background-position: 0 100%;
}
.v2fp-desc p { margin: 0 0 1em !important; }
.v2fp-desc h2, .v2fp-desc h3, .v2fp-desc h4 {
    color: #111827;
    font-weight: 700;
    margin: 1.2em 0 0.4em !important;
    line-height: normal;
}
.v2fp-desc h2 { font-size: 1.15em; }
.v2fp-desc h3 { font-size: 1.05em; }
.v2fp-desc h4 { font-size: 1em; }
.v2fp-desc h2:first-child,
.v2fp-desc h3:first-child,
.v2fp-desc h4:first-child { margin-top: 0 !important; }
.v2fp-desc p:empty,
.v2fp-desc div:empty,
.v2fp-desc strong:empty { display: none !important; }
.v2fp-desc br + br { display: none !important; }
.v2fp-desc h2 { font-size: 17px; }
.v2fp-desc h3 { font-size: 15px; }
.v2fp-desc strong { color: inherit; font-weight: 700; }
.v2fp-desc img {
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
    /* keep all images at their natural inline flow — never force block.
       The original VM editor markup uses small inline images (e.g. bullet
       icons) inside <p> with text; forcing display:block breaks them. */
}
.v2fp-desc table {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 13px;
    border-collapse: collapse;
}
.v2fp-desc table td, .v2fp-desc table th {
    padding: 6px 8px;
    border-bottom: 1px solid #f3f4f6;
}
.v2fp-desc ul, .v2fp-desc ol {
    margin: 0.5em 0 1em 15px;
    padding-left: 8px;
}
.v2fp-desc li { margin: 0.25em 0; line-height: normal; }
.v2fp-infobtn {
    display: inline-block;
    background: var(--primary);
    color: #fff !important;
    padding: 9px 16px;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(37,136,166,.25);
}

/* related products — modern grid */
.v2fp-related { margin-top: 24px; }
.v2fp-related h2, .v2fp-related h3 {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 12px;
}
.v2fp-related table {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 8px;
}
.v2fp-related td {
    display: inline-block;
    width: calc(50% - 8px);
    vertical-align: top;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    text-align: center;
}
.v2fp-related img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #f7f9fb;
    border-radius: 8px;
    padding: 6px;
    box-sizing: border-box;
}

/* ==================================================================
   Section 11 — Parent-product attributes & trust banner v2 (2026-04-27)
   Targets:
     • parent products με <select id="product_id_field">
     • legacy faded-blue .productAtrrDiv background
     • inline-styled red "select attribute" warning
     • mobile_icons_s trust banner overhaul
   ================================================================== */

/* --- A) productAtrrDiv: compact card with soft cyan/blue tint (matches
   the LIVE look as captured in user screenshot). */
:is(.v2fp-atc, .v2fp-attrs-box) .productAtrrDiv {
    background: #f0f7fa !important;
    border: 1px solid #d6e7ee !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    margin: 0 0 8px !important;
    box-shadow: none !important;
}
:is(.v2fp-atc, .v2fp-attrs-box) .productAtrrDiv h3 {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: var(--primary) !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    line-height: 1.3 !important;
    text-align: left !important;
}
/* Inline subtitle on the same line as the title */
:is(.v2fp-atc, .v2fp-attrs-box) .productAtrrDiv h3 small {
    display: inline !important;
    font-size: 11px !important;
    color: #9ca3af !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    margin: 0 0 0 6px !important;
}
:is(.v2fp-atc, .v2fp-attrs-box) .productAtrrDiv .vmCartDetails {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Label inline so the trailing ":" text node sits next to it, not on its
   own line above the select. Selector uses descendant (not >) because the
   label is nested inside .vmCartChild .vmRowTwo, not a direct child. */
:is(.v2fp-atc, .v2fp-attrs-box) .productAtrrDiv .vmCartDetails label {
    display: inline !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}
/* Hide the <br> — select forced to next line via display:block + width:100%.
   Also kill `<br style="clear:both">` that legacy uses after floats. */
:is(.v2fp-atc, .v2fp-attrs-box) .productAtrrDiv .vmCartDetails br { display: none !important; }
/* Parent of label+select (the vmCartChild row) becomes a flex container so
   long warning labels ("Παρακαλώ επιλέξτε ένα είδος") wrap cleanly without
   leaving the trailing ":" orphan on its own line. */
:is(.v2fp-atc, .v2fp-attrs-box) .productAtrrDiv .vmCartDetails .vmCartChild {
    display: block !important;
    margin-top: 4px !important;
}
/* Force the parent-variant select to its own line (auto-width). The label
   + ":" stay on the row above. Without this, label+select sit on the same
   line and the select overflows the box on narrow viewports. */
:is(.v2fp-atc, .v2fp-attrs-box) .productAtrrDiv .vmCartDetails .vmCartChild > select,
:is(.v2fp-atc, .v2fp-attrs-box) .productAtrrDiv .vmCartDetails .vmCartChild > select.inputbox,
:is(.v2fp-atc, .v2fp-attrs-box) .productAtrrDiv .vmCartDetails .vmCartChild > select#product_id_field {
    display: block !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-top: 4px !important;
}
/* The label + ":" text node + select layout — keep label inline, select
   forced to its own line via select rule below. */
:is(.v2fp-atc, .v2fp-attrs-box) .productAtrrDiv .vmCartDetails .vmCartChild > label {
    display: inline-block !important;
    max-width: 100% !important;
}

/* Child attribute rows (Μέγεθος / Χρώμα / etc) — replace legacy float
   layout with flexbox for proper alignment + gap. */
:is(.v2fp-atc, .v2fp-attrs-box) .productAtrrDiv .vmCartAttributes {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 2px 10px !important;          /* tighter vertical gap between rows */
    margin-top: 6px !important;
}
:is(.v2fp-atc, .v2fp-attrs-box) .productAtrrDiv .vmCartAttributes > .vmAttribChildDetail {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}
/* The label inside its own .vmAttribChildDetail (e.g. "Μέγεθος:") */
:is(.v2fp-atc, .v2fp-attrs-box) .productAtrrDiv .vmCartAttributes .vmAttribChildDetail label {
    margin: 0 6px 0 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: -0.3px !important;
    color: #4b5563 !important;
}
/* The attribute select — compact, inline next to label.
   Prefixed with #vmMainPage to beat `.mobile_content #vmMainPage select`
   (line ~4287, specificity 0,1,1,1) which would otherwise force 100%/44px/15px. */
#vmMainPage :is(.v2fp-atc, .v2fp-attrs-box) .productAtrrDiv .vmCartAttributes select.inputboxattrib,
#vmMainPage :is(.v2fp-atc, .v2fp-attrs-box) .productAtrrDiv .vmCartDetails select.inputboxattrib {
    display: inline-block !important;
    width: auto !important;                  /* AUTO — fit content, do not stretch */
    min-width: 80px !important;
    height: 36px !important;
    padding: 0 28px 0 11px !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;       /* condensed feel */
    font-stretch: condensed !important;
    color: #111827 !important;
    background-color: #fff !important;
    /* BOLDER arrow — stroke-width 4.5, slightly larger */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23111827" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
/* Kill the float clear <br> that legacy injects after the floated divs */
:is(.v2fp-atc, .v2fp-attrs-box) .productAtrrDiv .vmCartAttributes > br[style*="clear"] {
    display: none !important;
}
/* Modern picker for parent-variant select.
   Auto-width + condensed + small font (matches attribute selects style). */
.v2fp-atc select#product_id_field,
.v2fp-atc select.inputbox,
.v2fp-attrs-box select#product_id_field,
.v2fp-attrs-box select.inputbox {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 80px !important;
    height: 36px !important;
    padding: 0 28px 0 11px !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
    font-stretch: condensed !important;
    background-color: #fff !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23111827" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    color: #111827 !important;
    margin: 4px 0 0 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
.v2fp-atc select#product_id_field:focus,
.v2fp-atc select.inputbox:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 136, 166, .15) !important;
}

/* --- B) Inline-styled red warning -> soft warning banner --- */
.v2fp-atc div[style*="#ff0000"],
.v2fp-atc div[style*="background-color: #ff0000"],
.v2fp-atc div[style*="background:#ff0000"] {
    background-color: #fef2f2 !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23dc2626" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: 11px center !important;
    color: #b91c1c !important;
    font-weight: 600 !important;
    text-transform: none !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    padding: 10px 12px 10px 36px !important;
    border-radius: 10px !important;
    border: 1px solid #fecaca !important;
    margin: 8px 0 0 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}

/* --- C) Trust banner v2 — premium look with orange-tinted icon chips --- */
.v2fp-trust {
    background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%) !important;
    border: 1px solid #fed7aa !important;
    border-radius: 16px !important;
    padding: 16px 8px 14px !important;
    margin: 10px 0 8px !important;
    box-shadow: 0 4px 14px rgba(249, 115, 22, .10), 0 1px 3px rgba(16,24,40,.04) !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
}
/* subtle decorative glow top-right */
.v2fp-trust::before {
    content: "" !important;
    position: absolute !important;
    top: -40px !important;
    right: -40px !important;
    width: 120px !important;
    height: 120px !important;
    background: radial-gradient(circle, rgba(249,115,22,.18) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
.v2fp-trust .image_icons_wraper {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    align-items: stretch !important;
    position: relative !important;
    z-index: 1 !important;
}
.v2fp-trust .image_icons_container {
    flex: none !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 2px 2px !important;
    text-align: center !important;
    border-right: 1px solid rgba(249, 115, 22, .15) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: transparent !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}
.v2fp-trust .image_icons_container:last-child {
    border-right: none !important;
}
.v2fp-trust .image_icon_img {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 8px !important;
    box-shadow:
        0 4px 8px rgba(249, 115, 22, .22),
        0 1px 2px rgba(249, 115, 22, .12),
        inset 0 0 0 1.5px rgba(255, 255, 255, .55),
        inset 0 -2px 4px rgba(249, 115, 22, .15) !important;
    padding: 0 !important;
    overflow: hidden !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}
.v2fp-trust .image_icons_container:hover .image_icon_img {
    transform: translateY(-2px) !important;
    box-shadow:
        0 6px 14px rgba(249, 115, 22, .35),
        0 2px 4px rgba(249, 115, 22, .18),
        inset 0 0 0 1.5px rgba(255, 255, 255, .6) !important;
}
.v2fp-trust .image_icon_img img {
    max-width: 28px !important;
    max-height: 28px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
    /* tint to brand orange #f97316 */
    filter: brightness(0) saturate(100%) invert(55%) sepia(76%) saturate(2380%) hue-rotate(360deg) brightness(98%) contrast(97%) !important;
}
.v2fp-trust .icon_text {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #7c2d12 !important;
    text-align: center !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: 28px !important;
    padding: 0 1px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ==================================================================
   Section 12 — v2-footer (replaces legacy mobile_bottom popup bar)
   ================================================================== */

/* Hide legacy bottom nav + chat divs (kept in DOM only for safety) */
.mobile_bottom,
.mobile_chat,
.mobile_footer {
    display: none !important;
}

/* New footer container */
.v2-footer {
    background: #f7f9fb;
    border-top: 1px solid #e5e7eb;
    padding: 18px 14px 14px;
    margin: 16px 0 0;
    color: #374151;
    font-size: 13.5px;
    line-height: 1.55;
}

/* Brand block at top of footer */
.v2-footer .v2f-brand {
    text-align: center;
    margin: 0 0 18px;
    padding: 6px 8px 14px;
    border-bottom: 1px dashed #e5e7eb;
}
.v2-footer .v2f-brand-logo {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}
.v2-footer .v2f-brand-logo img {
    max-height: 56px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}
.v2-footer .v2f-brand-tag {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: .2px;
    line-height: 1.4;
}
.v2-footer .v2f-section {
    background: #ffffff;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0 0 8px;
    box-shadow: 0 1px 2px rgba(16,24,40,.03);
    transition: padding .2s ease, border-color .2s ease;
}
.v2-footer .v2f-section.is-open {
    padding: 12px 14px 14px;
    border-color: #fed7aa;
    box-shadow: 0 2px 6px rgba(249,115,22,.10), 0 1px 2px rgba(16,24,40,.04);
}
.v2-footer .v2f-section > h3 {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0;
    padding: 4px 32px 4px 0;
    border-bottom: 1px solid transparent;
    line-height: 1.3;
    cursor: pointer;
    user-select: none;
    position: relative;
    display: flex;
    align-items: center;
    transition: color .15s ease, border-color .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.v2-footer .v2f-section > h3::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23f97316" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    transition: transform .25s ease;
    transform: rotate(0deg);
}
.v2-footer .v2f-section.is-open > h3 {
    color: #f97316;
    border-bottom-color: #fed7aa;
    padding-bottom: 8px;
    margin-bottom: 10px;
}
.v2-footer .v2f-section.is-open > h3::after {
    transform: rotate(180deg);
}
/* Accordion body — animated max-height */
.v2-footer .v2f-section .v2f-body {
    color: #374151;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .35s ease, opacity .25s ease, margin .25s ease;
    margin: 0;
}
.v2-footer .v2f-section.is-open .v2f-body {
    max-height: 1500px;
    opacity: 1;
}
.v2-footer .v2f-section .v2f-body a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}
.v2-footer .v2f-section .v2f-body a:hover { text-decoration: underline; }
.v2-footer .v2f-section .v2f-body p { margin: 0 0 6px; }
.v2-footer .v2f-section .v2f-body p:last-child { margin-bottom: 0; }
.v2-footer .v2f-section .v2f-body img {
    max-width: 100%;
    height: auto;
}
/* Module heading inside body — keep but make smaller */
.v2-footer .v2f-section .v2f-body .moduletable > h3,
.v2-footer .v2f-section .v2f-body h2 {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 6px;
    padding: 0;
    border: none;
    background: none;
    text-transform: none;
    letter-spacing: 0;
}
/* Lists in footer — clean */
.v2-footer .v2f-section .v2f-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.v2-footer .v2f-section .v2f-body ul li {
    padding: 4px 0;
    border-bottom: 1px dashed #f3f4f6;
}
.v2-footer .v2f-section .v2f-body ul li:last-child { border-bottom: none; }

/* Social — render icons/links horizontally */
.v2f-social .v2f-body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.v2f-social .v2f-body a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff7ed;
    box-shadow: inset 0 0 0 1.5px rgba(249,115,22,.25);
    color: #f97316;
    transition: transform .12s ease, box-shadow .12s ease;
}
.v2f-social .v2f-body a:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1.5px rgba(249,115,22,.45);
}
.v2f-social .v2f-body a img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}
.v2f-social .v2f-body a i {
    font-size: 18px;
}

/* Contact — make phone numbers BIG and tappable */
.v2f-contact .v2f-body {
    font-size: 15px;
}
.v2f-contact .v2f-body a[href^="tel:"],
.v2f-contact .v2f-body a[href^="mailto:"] {
    display: inline-block;
    padding: 4px 0;
    font-weight: 700;
    color: var(--primary);
}

/* Direct chat bar inside footer — Messenger + WhatsApp */
.v2f-chat {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 4px 0 12px;
}
.v2f-chat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none !important;
    color: #fff !important;
    transition: transform .1s ease, box-shadow .15s ease, filter .15s ease;
    box-shadow: 0 3px 8px rgba(16,24,40,.12);
    -webkit-tap-highlight-color: transparent;
}
.v2f-chat-btn:active { transform: scale(0.97); }
.v2f-chat-btn .v2f-chat-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.v2f-chat-btn .v2f-chat-ic svg { display: block; }
.v2f-chat-msg {
    background: linear-gradient(135deg, #0084ff 0%, #0064d1 100%);
}
.v2f-chat-msg:hover { filter: brightness(1.05); }
.v2f-chat-wa {
    background: linear-gradient(135deg, #25d366 0%, #1ebe5b 100%);
}
.v2f-chat-wa:hover { filter: brightness(1.05); }

/* Hide the rendered legacy mobile_chat module to avoid duplicate buttons,
   but keep its DOM (so other scripts that look it up don't crash) */
.v2-footer .v2f-mod-chat { display: none; }

/* Bottom row — Full Site link + copyright */
.v2f-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px 0;
    border-top: 1px solid #eef0f3;
    margin-top: 4px;
}
.v2f-bottom .v2f-fullsite {
    color: var(--primary);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}
.v2f-bottom .v2f-fullsite:hover { text-decoration: underline; }
.v2f-bottom .v2f-copy {
    color: #9ca3af;
    font-size: 11.5px;
    letter-spacing: .3px;
}

/* ==================================================================
   Section 13 — Floating buttons positioning
   (no bottom-bar, so they sit close to viewport bottom edges)
   ================================================================== */

/* Newsletter gift — bottom RIGHT */
.nlopen {
    position: fixed !important;
    right: 12px !important;
    bottom: 14px !important;
    left: auto !important;
    top: auto !important;
    z-index: 1100 !important;
}

/* ──────────────────────────────────────────────────────────────────
   Newsletter popup — modern responsive modal (RSForm Pro id 25)
   ─────────────────────────────────────────────────────────────── */

/* Hide by default until our JS adds .v2-nl-active */
form#ak_popup_newsletter {
    display: none !important;
}
/* When active: full-screen overlay with safe scrollable centering */
form#ak_popup_newsletter.v2-nl-active {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2000 !important;
    background: rgba(15, 23, 42, .6) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px 14px;
    /* center horizontally always */
    align-items: center;
    /* NOT vertical center — use margin:auto on inner so top stays accessible */
    justify-content: flex-start;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    animation: v2-nl-fade .25s ease;
}
@keyframes v2-nl-fade {
    from { background: rgba(15,23,42,0); backdrop-filter: blur(0); }
    to   { background: rgba(15,23,42,.6); backdrop-filter: blur(3px); }
}

/* Hide legacy inner .nl_overlay (we use the form itself as backdrop) */
form#ak_popup_newsletter .nl_overlay {
    display: none !important;
}

/* Strip ALL legacy borders/outlines on form chain to avoid stray frames */
form#ak_popup_newsletter,
form#ak_popup_newsletter * {
    border-color: transparent;
}
form#ak_popup_newsletter.v2-nl-active {
    border: none !important;
    outline: none !important;
}

/* Modal card — auto-height, no inner clipping. The form overlay around
   it already has overflow-y: auto so if content is taller than viewport
   the WHOLE overlay scrolls (single scrollbar, no nested scroll mess). */
form#ak_popup_newsletter > div.ak_popup_newsletter {
    display: block !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow:
        0 12px 36px rgba(0,0,0,.35),
        0 2px 8px rgba(0,0,0,.15) !important;
    width: 92% !important;
    max-width: 340px !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 20px auto !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    position: relative !important;
    animation: v2-nl-pop .3s cubic-bezier(.2,.9,.3,1.1);
    box-sizing: border-box !important;
}
/* Hide the inner card UNTIL form is active — prevents flash on page load */
form#ak_popup_newsletter:not(.v2-nl-active) > div.ak_popup_newsletter {
    display: none !important;
}
@media (min-width: 561px) {
    form#ak_popup_newsletter > div.ak_popup_newsletter {
        max-width: 400px !important;
    }
}
@media (min-width: 901px) {
    form#ak_popup_newsletter > div.ak_popup_newsletter {
        max-width: 440px !important;
    }
}
@keyframes v2-nl-pop {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* Inner content padding — minimal, no top whitespace (close X is absolute,
   no need for top padding). Legacy .nlcontent has `position: fixed; top:8%;
   left:7.5%; border:4px solid var(--primary)` which we override fully:
   reset position, top, left, AND border (transparent isn't enough — the
   4px border still takes layout space). */
form#ak_popup_newsletter .nlcontent {
    padding: 8px 14px 14px !important;
    text-align: center !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    border: none !important;
    margin: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
}
/* Image: no extra top margin */
form#ak_popup_newsletter .nlimage {
    margin: 0 0 4px !important;
    padding: 0 !important;
}

/* Close X button (top-right) — compact */
form#ak_popup_newsletter .nlclose {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: #fff7ed !important;
    color: #f97316 !important;
    border: 1.5px solid #fed7aa !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 0 !important;
    line-height: 1 !important;
    z-index: 5 !important;
    transition: background .15s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
    text-indent: 0 !important;
}
form#ak_popup_newsletter .nlclose::before {
    content: "×";
    font-size: 20px;
    line-height: 1;
    font-weight: 600;
    color: #f97316;
}
form#ak_popup_newsletter .nlclose:hover { background: #ffedd5 !important; }
form#ak_popup_newsletter .nlclose:active { transform: scale(0.92); }

/* Hero image (gift) — tight, +30% larger */
form#ak_popup_newsletter .nlimage {
    margin: 0 0 2px !important;
    padding: 0 !important;
    text-align: center !important;
}
form#ak_popup_newsletter .nlimage img {
    max-width: 78% !important;
    max-height: 195px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 10px !important;
    margin: 0 auto !important;
    display: block !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
}

/* Heading — tight */
form#ak_popup_newsletter .nlform h2,
form#ak_popup_newsletter h2 {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    margin: 2px 0 4px !important;
    padding: 0 !important;
    line-height: 1.25 !important;
    border: none !important;
    background: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-align: center !important;
}

/* Body paragraphs — tight */
form#ak_popup_newsletter .nlform p,
form#ak_popup_newsletter p {
    font-size: 12px !important;
    color: #4b5563 !important;
    margin: 0 0 2px !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

/* Tables (RSForm Pro layout) — flatten */
form#ak_popup_newsletter table {
    width: 100% !important;
    border: none !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    background: transparent !important;
}
form#ak_popup_newsletter table tr,
form#ak_popup_newsletter table tbody,
form#ak_popup_newsletter table td {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}
form#ak_popup_newsletter table td {
    padding: 4px 0 !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
}

/* Email input — tight */
form#ak_popup_newsletter .nlinput,
form#ak_popup_newsletter input[type="text"],
form#ak_popup_newsletter input[type="email"] {
    width: 100% !important;
    height: 38px !important;
    padding: 0 12px !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    background: #fff !important;
    color: #111827 !important;
    box-sizing: border-box !important;
    margin: 2px 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
form#ak_popup_newsletter .nlinput:focus,
form#ak_popup_newsletter input[type="text"]:focus,
form#ak_popup_newsletter input[type="email"]:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(37,136,166,.15) !important;
}

/* Terms checkbox + label */
form#ak_popup_newsletter input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 2px 8px 0 0 !important;
    flex-shrink: 0 !important;
    accent-color: #f97316;
    vertical-align: middle;
}
form#ak_popup_newsletter label {
    font-size: 11.5px !important;
    color: #4b5563 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    display: inline-block !important;
    vertical-align: middle;
    width: calc(100% - 32px);
    font-weight: 500;
}
form#ak_popup_newsletter label a { color: var(--primary); }

/* Submit button — tight */
form#ak_popup_newsletter .nlbutton,
form#ak_popup_newsletter input[type="submit"] {
    width: 100% !important;
    height: 40px !important;
    border: none !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
    cursor: pointer !important;
    box-shadow: 0 3px 8px rgba(249,115,22,.35) !important;
    margin: 6px 0 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: filter .15s ease, transform .1s ease;
}
form#ak_popup_newsletter .nlbutton:hover,
form#ak_popup_newsletter input[type="submit"]:hover { filter: brightness(1.05); }
form#ak_popup_newsletter .nlbutton:active,
form#ak_popup_newsletter input[type="submit"]:active { transform: scale(0.98); }

/* Error / formClr fixes */
form#ak_popup_newsletter .formClr { clear: both; }
form#ak_popup_newsletter .formError,
form#ak_popup_newsletter .formNoError {
    font-size: 11.5px;
    color: #dc2626;
}
form#ak_popup_newsletter .formNoError { color: transparent; }

/* "Δείτε περισσότερα" accordion for the long info text */
form#ak_popup_newsletter .v2-nl-more {
    margin: 6px 0 0 !important;
    text-align: center !important;
}
form#ak_popup_newsletter .v2-nl-more-toggle {
    display: inline-block !important;
    padding: 6px 12px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    background: rgba(37,136,166,.06) !important;
    -webkit-tap-highlight-color: transparent !important;
}
form#ak_popup_newsletter .v2-nl-more-toggle:hover {
    background: rgba(37,136,166,.12) !important;
}
form#ak_popup_newsletter .v2-nl-more-toggle .v2-chev {
    display: inline-block !important;
    transition: transform .25s ease !important;
    margin-left: 4px !important;
    font-size: 10px !important;
}
form#ak_popup_newsletter .v2-nl-more.is-open .v2-nl-more-toggle .v2-chev {
    transform: rotate(180deg) !important;
}
form#ak_popup_newsletter .v2-nl-more-body {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height .35s ease, opacity .25s ease, margin .25s ease, padding .25s ease !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
form#ak_popup_newsletter .v2-nl-more.is-open .v2-nl-more-body {
    max-height: 2000px !important;
    opacity: 1 !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
}
form#ak_popup_newsletter .v2-nl-more {
    margin: 4px 0 0 !important;
}
form#ak_popup_newsletter .v2-nl-more-body p {
    margin: 4px 0 !important;
    line-height: 1.4 !important;
}
/* Ensure paragraphs inside accordion body don't clip on last line */
form#ak_popup_newsletter .v2-nl-more-body p:last-child {
    margin-bottom: 4px !important;
    padding-bottom: 4px !important;
}

/* Cookiescript badge — bottom LEFT (override its own inline styles) */
#cookiescript_badge {
    left: 12px !important;
    bottom: 14px !important;
    right: auto !important;
    top: auto !important;
}

/* Reduce top-pad now that bottom-bar is gone (fewer things sticky) */
:root { --bot-h: 0px; }

/* Reset the mobile_content margin-bottom (was reserving for old bottom-bar) */
.mobile_content { margin-bottom: 0 !important; }

/* ==================================================================
   Section 14 — Richer menu icon (filled brand chip + white icon)
   ================================================================== */

/* Menu = primary action, makes it pop */
.mobile_header > div.mobile_menu > span {
    width: 48px;
}
.mobile_header > div.mobile_menu > span::before {
    content: "";
    position: absolute;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    /* Brand blue → brand orange diagonal gradient */
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 45%, #f97316 100%);
    box-shadow:
        0 4px 10px rgba(249,115,22,.32),
        0 2px 4px rgba(37,136,166,.20),
        inset 0 0 0 1.5px rgba(255,255,255,.22),
        inset 0 -2px 4px rgba(0,0,0,.10);
    z-index: 0;
    transition: transform .12s ease, box-shadow .15s ease;
}
.mobile_header > div.mobile_menu:active > span::before {
    transform: scale(0.94);
}
.mobile_header > div.mobile_menu.active > span::before {
    background: linear-gradient(135deg, #f97316 0%, var(--primary-dk) 55%, var(--primary) 100%);
}
.mobile_header > div.mobile_menu > span > svg.v2-icon {
    color: #ffffff !important;
    stroke-width: 2.4;
    z-index: 1;
    position: relative;
    width: 22px !important;
    height: 22px !important;
}
.mobile_header > div.mobile_menu > span > i.fa { display: none !important; }

/* Cart + account icons stay outline-style for visual hierarchy.
   Make sure they're slightly muted compared to the menu chip. */
.mobile_header > div.mobile_cart > span > svg.v2-icon,
.mobile_header > div.mobile_account > span > svg.v2-icon {
    color: var(--primary) !important;
    stroke-width: 2.1;
}

/* Hide ANY FA icon nested inside header spans (including those in <a>) */
.mobile_header i.fa { display: none !important; }

/* ==================================================================
   Section 15 — Registration / Checkout user-details form
   Clean up the legacy VM register form: huge info icons, weird layout,
   excessive spacing. CSS-only override (no PHP/template changes).
   ================================================================== */

/* Hide the legacy info.png — replaced by JS with a small ⓘ tooltip icon */
.mobile_content #vmMainPage img[src*="info.png"] {
    display: none !important;
}

/* ── Modern help tooltip — brand-blue */
.mobile_content #vmMainPage .v2-help {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    cursor: help !important;
    margin-left: 8px !important;
    position: relative !important;
    user-select: none !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    transition: transform .12s ease, box-shadow .15s ease;
    box-shadow: 0 2px 4px rgba(37,136,166,.30);
    font-style: normal !important;
}
/* NO transform on is-open — would re-anchor the position:fixed popup
   inside this element instead of the viewport (text would crush). */
.mobile_content #vmMainPage .v2-help:hover {
    box-shadow: 0 3px 8px rgba(37,136,166,.50);
}
.mobile_content #vmMainPage .v2-help.is-open {
    box-shadow: 0 3px 10px rgba(37,136,166,.55);
    background: linear-gradient(135deg, var(--primary-dk) 0%, var(--primary) 100%) !important;
}
.mobile_content #vmMainPage .v2-help .v2-help-icon {
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
}
.mobile_content #vmMainPage .v2-help-icon {
    pointer-events: none;
    line-height: 1;
    font-style: normal !important;
}
/* Popover bubble — fixed centered overlay so it never goes off-screen */
.mobile_content #vmMainPage .v2-help-pop {
    display: none !important;
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 20px !important;
    top: auto !important;
    transform: none !important;
    background: #111827 !important;
    color: #fff !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    width: auto !important;
    max-width: calc(100vw - 32px) !important;
    z-index: 2500 !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.40), 0 4px 12px rgba(0,0,0,.20) !important;
    pointer-events: none !important;
    text-align: left !important;
    white-space: normal !important;
    border: 1.5px solid var(--primary) !important;
}
.mobile_content #vmMainPage .v2-help.is-open .v2-help-pop {
    display: block !important;
    animation: v2-help-pop-in .2s ease;
}
@keyframes v2-help-pop-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Hide the old triangle pointer (since popup is now fixed at bottom) */
.mobile_content #vmMainPage .v2-help.is-open .v2-help-pop::after {
    display: none !important;
}

/* Compact tip — small inline text, no card */
.mobile_content #vmMainPage .v2-tab-hint {
    display: block !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 2px 0 6px !important;
    font-size: 10.5px !important;
    color: #6b7280 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    font-style: normal !important;
    white-space: normal !important;
}
.mobile_content #vmMainPage .v2-tab-hint * {
    display: inline !important;
}
.mobile_content #vmMainPage .v2-tab-hint strong {
    color: var(--primary) !important;
    font-weight: 700 !important;
}
.mobile_content #vmMainPage .v2-tab-hint .v2-tab-hint-icon {
    margin-right: 2px !important;
}

/* ── Tabs for "guest vs new account" choice ───────────────────── */
.mobile_content #vmMainPage .v2-reg-tabs {
    display: flex !important;
    gap: 4px !important;
    background: #f3f4f6 !important;
    border-radius: 12px !important;
    padding: 4px !important;
    margin: 0 0 14px !important;
    border: 1px solid #e5e7eb !important;
    width: 100%;
    box-sizing: border-box;
}
.mobile_content #vmMainPage .v2-reg-tab {
    flex: 1 !important;
    padding: 10px 8px !important;
    border: none !important;
    background: transparent !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
    text-align: center;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-height: 38px;
}
.mobile_content #vmMainPage .v2-reg-tab.is-active {
    background: #fff !important;
    color: var(--primary) !important;
    box-shadow: 0 2px 6px rgba(16,24,40,.10) !important;
}
.mobile_content #vmMainPage .v2-reg-tab .v2-reg-tab-icon {
    font-size: 15px !important;
    flex-shrink: 0;
}

/* Hide the legacy radio table once we've replaced it with tabs */
.mobile_content #vmMainPage table.ak_register_select.v2-tabbed-hidden {
    display: none !important;
}
/* Hidden register-only fields when tab "Επισκέπτης" active */
.mobile_content #vmMainPage form.v2-user-form .v2-reg-hidden,
.mobile_content #vmMainPage form.v2-user-form div[id$="_div"].v2-reg-hidden,
.mobile_content #vmMainPage form.v2-user-form div[id$="_input"].v2-reg-hidden {
    display: none !important;
}
/* Hide legacy h4 headers replaced by checkout tabs */
.mobile_content #vmMainPage h4.v2-h4-hidden {
    display: none !important;
}
/* Legacy .wait div overlays the form with visibility:hidden until 600ms timer
   removes it. For checkout (different page), that timer doesn't fire — so
   the form stays invisible. Force visibility visible. */
.mobile_content #vmMainPage .stretcher form,
.mobile_content #vmMainPage .stretcher > * {
    visibility: visible !important;
}
.mobile_content #vmMainPage .wait {
    display: none !important;
}

/* Form container — clean white card with section padding */
.mobile_content #vmMainPage form.v2-user-form .ak_user_fields,
.mobile_content #vmMainPage > form {
    background: #fff !important;
    border: 1px solid #eef0f3 !important;
    border-radius: 14px !important;
    padding: 14px 14px !important;
    margin: 0 0 14px !important;
    box-shadow: 0 1px 3px rgba(16,24,40,.04) !important;
}

/* Fieldsets — section dividers */
.mobile_content #vmMainPage form.v2-user-form fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    background: transparent !important;
}
.mobile_content #vmMainPage form.v2-user-form fieldset:last-of-type {
    margin-bottom: 0 !important;
}
.mobile_content #vmMainPage form.v2-user-form fieldset > legend,
.mobile_content #vmMainPage form.v2-user-form fieldset > h2,
.mobile_content #vmMainPage form.v2-user-form fieldset > h3 {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: var(--primary) !important;
    padding: 0 0 8px !important;
    margin: 0 0 10px !important;
    border: none !important;
    border-bottom: 1px solid #eef0f3 !important;
    background: none !important;
    width: 100% !important;
    line-height: 1.3 !important;
    background-image: linear-gradient(var(--primary), var(--primary)) !important;
    background-repeat: no-repeat !important;
    background-size: 32px 2px !important;
    background-position: 0 100% !important;
}

/* Field wrappers — tight spacing */
.mobile_content #vmMainPage form.v2-user-form .formField {
    display: block !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    background: transparent !important;
}
/* Label div (e.g., #email_div) — show label + help icon inline */
.mobile_content #vmMainPage form.v2-user-form .formLabel,
.mobile_content #vmMainPage form.v2-user-form div[id$="_div"] {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}
.mobile_content #vmMainPage form.v2-user-form .formLabel > label,
.mobile_content #vmMainPage form.v2-user-form div[id$="_div"] > label {
    margin: 0 !important;
}
/* Universal label rule — make sure ALL legacy labels (username, password,
   first_name, etc.) render full-width on mobile, regardless of parent. */
.mobile_content #vmMainPage form.v2-user-form label[for] {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #4b5563 !important;
    text-align: left !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
}
.mobile_content #vmMainPage form.v2-user-form .formField > label,
.mobile_content #vmMainPage form.v2-user-form .formField > b {
    display: block !important;
    width: 100% !important;
}
/* Field WRAPPER divs (legacy uses #email_div, #username_div, etc.)
   IMPORTANT: do NOT force display here — legacy JS shows/hides
   #password_div, #password2_div, #username_div based on radio state. */
.mobile_content #vmMainPage form.v2-user-form div[id$="_div"],
.mobile_content #vmMainPage form.v2-user-form div[id$="_input"] {
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    float: none !important;
}
/* Required asterisk supers / strong / .required — hide all variants
   (replaced by red label::after for required labels) */
.mobile_content #vmMainPage form.v2-user-form sup,
.mobile_content #vmMainPage form.v2-user-form strong.required,
.mobile_content #vmMainPage form.v2-user-form .star,
.mobile_content #vmMainPage form.v2-user-form .required,
.mobile_content #vmMainPage form.v2-user-form .formField > sup,
.mobile_content #vmMainPage form.v2-user-form .formField sup,
.mobile_content #vmMainPage form.v2-user-form .formLabel sup,
.mobile_content #vmMainPage form.v2-user-form .formLabel strong.required,
.mobile_content #vmMainPage form.v2-user-form .formLabel .required {
    display: none !important;
}
/* Big bold red asterisk after required labels */
.mobile_content #vmMainPage form.v2-user-form label.v2-required::after {
    content: "*";
    color: #dc2626;
    font-weight: 900;
    font-size: 22px;
    margin-left: 6px;
    line-height: 0;
    vertical-align: -3px;
    display: inline-block;
}

/* Move help "i" badge into label-div via JS — style as inline pill */
.mobile_content #vmMainPage form.v2-user-form div[id$="_div"] .v2-help {
    margin-left: 6px !important;
    vertical-align: middle !important;
}
/* If still inside formField (_input div), keep small at top-right */
.mobile_content #vmMainPage form.v2-user-form .formField > .v2-help {
    align-self: flex-end !important;
    margin-top: 2px !important;
    margin-left: 0 !important;
}

/* Inputs — full width, modern. EXCLUDES checkbox/radio. */
.mobile_content #vmMainPage form.v2-user-form input.inputbox[type="text"],
.mobile_content #vmMainPage form.v2-user-form input.inputbox[type="email"],
.mobile_content #vmMainPage form.v2-user-form input.inputbox[type="tel"],
.mobile_content #vmMainPage form.v2-user-form input.inputbox[type="password"],
.mobile_content #vmMainPage form.v2-user-form input.inputbox:not([type]),
.mobile_content #vmMainPage form.v2-user-form select.inputbox,
.mobile_content #vmMainPage form.v2-user-form textarea.inputbox,
.mobile_content #vmMainPage form.v2-user-form .formField input:not([type="checkbox"]):not([type="radio"]),
.mobile_content #vmMainPage form.v2-user-form .formField select,
.mobile_content #vmMainPage form.v2-user-form .formField textarea {
    width: 100% !important;
    height: 42px !important;
    padding: 0 12px !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background: #fff !important;
    color: #111827 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* Checkbox + radio — KEEP native appearance, just brand-color accent */
.mobile_content #vmMainPage form.v2-user-form input[type="checkbox"],
.mobile_content #vmMainPage form.v2-user-form input[type="radio"],
.mobile_content #vmMainPage form.v2-user-form .formField input[type="checkbox"],
.mobile_content #vmMainPage form.v2-user-form .formField input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    margin: 2px 8px 0 0 !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 4px !important;
    background: #fff !important;
    accent-color: #f97316 !important;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}
.mobile_content #vmMainPage form.v2-user-form input[type="radio"],
.mobile_content #vmMainPage form.v2-user-form .formField input[type="radio"] {
    border-radius: 50% !important;
    -webkit-appearance: radio !important;
    appearance: radio !important;
}
.mobile_content #vmMainPage form.v2-user-form input.inputbox:focus,
.mobile_content #vmMainPage form.v2-user-form select.inputbox:focus,
.mobile_content #vmMainPage form.v2-user-form textarea.inputbox:focus,
.mobile_content #vmMainPage form.v2-user-form .formField input:focus,
.mobile_content #vmMainPage form.v2-user-form .formField select:focus,
.mobile_content #vmMainPage form.v2-user-form .formField textarea:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(37,136,166,.15) !important;
}

/* Textarea (e.g., notes) — taller */
.mobile_content #vmMainPage form.v2-user-form textarea.inputbox,
.mobile_content #vmMainPage form.v2-user-form .formField textarea {
    height: auto !important;
    min-height: 80px !important;
    padding: 10px 12px !important;
    resize: vertical;
    line-height: 1.4 !important;
}

/* Custom dropdown chevron for selects */
.mobile_content #vmMainPage form.v2-user-form select.inputbox,
.mobile_content #vmMainPage form.v2-user-form .formField select {
    padding-right: 36px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    cursor: pointer;
}

/* Radio choice (guest vs register account) — pretty card list */
.mobile_content #vmMainPage form.v2-user-form .ak_register_select,
.mobile_content #vmMainPage table.ak_register_select {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    margin: 0 0 14px !important;
    border-collapse: separate !important;
    border-spacing: 0 6px !important;
}
.mobile_content #vmMainPage form.v2-user-form .ak_register_select tr,
.mobile_content #vmMainPage form.v2-user-form .ak_register_select tbody {
    background: transparent !important;
    border: none !important;
}
.mobile_content #vmMainPage form.v2-user-form .ak_register_select td {
    padding: 10px 12px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 10px !important;
    background: #fff !important;
    transition: border-color .15s ease, background .15s ease;
}
.mobile_content #vmMainPage form.v2-user-form .ak_register_select td:has(input[type="radio"]:checked),
.mobile_content #vmMainPage form.v2-user-form .ak_register_select td:has(input:checked) {
    border-color: var(--primary) !important;
    background: var(--accent-bg) !important;
}
.mobile_content #vmMainPage form.v2-user-form .ak_register_select input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 8px 0 0 !important;
    accent-color: var(--primary);
    vertical-align: middle;
}
.mobile_content #vmMainPage form.v2-user-form .ak_register_select label {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    cursor: pointer;
    vertical-align: middle;
}

/* Section headings (.Πληροφορίες Πελάτη, Στοιχεία Χρέωσης, etc.) */
.mobile_content #vmMainPage form.v2-user-form fieldset > legend {
    font-size: 12px !important;
}
/* h3-style section headings inside the form */
.mobile_content #vmMainPage form.v2-user-form > h3,
.mobile_content #vmMainPage form.v2-user-form > h2,
.mobile_content #vmMainPage form.v2-user-form > div > h3,
.mobile_content #vmMainPage form.v2-user-form > div > h2 {
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--primary) !important;
    padding: 0 0 8px !important;
    margin: 6px 0 10px !important;
    border-bottom: 1px solid #eef0f3 !important;
    line-height: 1.3 !important;
}

/* The "(* = Απαιτούμενο)" hint text — replace styling so its asterisk matches */
.mobile_content #vmMainPage form.v2-user-form > p:first-of-type,
.mobile_content #vmMainPage form.v2-user-form > div > p:first-of-type,
.mobile_content #vmMainPage form.v2-user-form .ak_user_fields > p:first-of-type {
    font-size: 12px !important;
    color: #6b7280 !important;
    text-align: right !important;
    margin: 0 0 8px !important;
    font-style: italic !important;
}
/* The wrapping element of "(* = Απαιτούμενο)" — make it a normal note */
.mobile_content #vmMainPage form.v2-user-form .v2-required-line {
    display: block !important;
    font-size: 12px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    text-align: right !important;
    margin: 0 0 8px !important;
    font-style: normal !important;
}
/* Make the * inside the legend match required-label asterisk */
.mobile_content #vmMainPage form.v2-user-form .v2-required-legend {
    color: #dc2626 !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    line-height: 0;
    vertical-align: -2px;
    margin: 0 2px;
    font-style: normal;
    display: inline !important;
}

/* Submit button — orange CTA */
.mobile_content #vmMainPage form.v2-user-form input[type="submit"],
.mobile_content #vmMainPage form.v2-user-form button[type="submit"] {
    width: 100% !important;
    height: 48px !important;
    border: none !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(249,115,22,.40) !important;
    margin: 12px 0 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: filter .15s ease, transform .1s ease;
}
.mobile_content #vmMainPage form.v2-user-form input[type="submit"]:hover { filter: brightness(1.05); }
.mobile_content #vmMainPage form.v2-user-form input[type="submit"]:active { transform: scale(0.98); }

/* Terms checkbox row */
.mobile_content #vmMainPage form.v2-user-form input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 2px 8px 0 0 !important;
    accent-color: #f97316;
    vertical-align: top;
    flex-shrink: 0;
}

/* reCAPTCHA — center it */
.mobile_content #vmMainPage form.v2-user-form .g-recaptcha,
.mobile_content #vmMainPage form.v2-user-form div[class*="recaptcha"] {
    margin: 12px auto !important;
    display: flex !important;
    justify-content: center !important;
    transform: scale(0.95);
    transform-origin: center top;
}

/* Hide stray <br> spacers and empty divs */
.mobile_content #vmMainPage form.v2-user-form > br,
.mobile_content #vmMainPage form.v2-user-form fieldset > br,
.mobile_content #vmMainPage form.v2-user-form .formField > br {
    display: none !important;
}

/* ── Red error state for empty required fields (client-side validation)
   High specificity selectors to beat the .inputbox[type="text"] rules */
.mobile_content #vmMainPage form.v2-user-form input.inputbox.v2-field-error,
.mobile_content #vmMainPage form.v2-user-form select.inputbox.v2-field-error,
.mobile_content #vmMainPage form.v2-user-form textarea.inputbox.v2-field-error,
.mobile_content #vmMainPage form.v2-user-form input.v2-field-error[type],
.mobile_content #vmMainPage form.v2-user-form select.v2-field-error,
.mobile_content #vmMainPage form.v2-user-form textarea.v2-field-error,
.mobile_content #vmMainPage form.v2-user-form .formField input.v2-field-error,
.mobile_content #vmMainPage form.v2-user-form .formField select.v2-field-error,
.mobile_content #vmMainPage form.v2-user-form .formField textarea.v2-field-error {
    border-color: #dc2626 !important;
    background: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(220,38,38,.15) !important;
    animation: v2-field-shake .3s ease-in-out;
}
@keyframes v2-field-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.mobile_content #vmMainPage form.v2-user-form .v2-field-error-wrap label {
    color: #dc2626 !important;
}

/* Toast notification — bottom center */
.v2-form-toast {
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%) translateY(100px);
    background: #dc2626;
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    z-index: 3000;
    box-shadow: 0 8px 24px rgba(220,38,38,.40);
    max-width: 92vw;
    text-align: center;
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
    pointer-events: none;
}
.v2-form-toast.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.v2-form-toast strong {
    color: #fff;
    text-decoration: underline;
}

/* ==================================================================
   Section 16 — Reviews ("Αξιολογήσεις") — minimal cleanup
   PRIMARY GOAL: remove the inner scrollbar that renders inconsistently
   across browsers. Keep VM's original markup/layout otherwise.
   ================================================================== */

/* THE FIX: legacy CSS sets .rewies_content { position: absolute } which
   stacks reviews. Force static + truncate text with -webkit-line-clamp
   (cross-browser, no jagged scrollbars). */
.rewies_container .rewies_content {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    text-align: left !important;
    line-height: 1.5;
    color: #4b5563;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    /* Show first ~5 lines, ellipsis after */
    display: -webkit-box !important;
    -webkit-line-clamp: 5 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: 7.5em !important;
    height: auto !important;
}
/* Container — ensure it can grow with content */
.rewies_container {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
/* Person info — let it flow normally, NOT absolutely positioned */
.rewies_container .person_info {
    position: static !important;
}

/* Section 16b — reviews module is nested INSIDE .v2fp-desc, so the
   description br re-enable rules (display:block;height:0) leak into it,
   creating 21px gaps between name / stars / age via line-height inheritance
   on whitespace text nodes. Re-hide br specifically inside the reviews module.
   Specificity 1,3,1 beats the override rule's 1,2,1. */
.mobile_content .v2fp-desc .reviews2 br,
.mobile_content #vmMainPage .v2fp-desc .reviews2 br,
.mobile_content .v2fp-desc #rewies_wraper br,
.mobile_content #vmMainPage .v2fp-desc #rewies_wraper br {
    display: none !important;
    height: auto !important;
    overflow: visible !important;
}

/* Section 16c — reviews "wide bleed": negative margin to extend out past
   .v2fp-desc 16px padding, gaining ~32px of horizontal space. Plus force
   single-column full-width cards (was 89% with 2-col tendency from legacy
   ak.css media query at <=460px). Cards now ~86% of viewport. */
.mobile_content #vmMainPage .v2fp-desc .reviews2,
.mobile_content #vmMainPage .v2fp-desc #rewies_wraper {
    width: auto !important;
    max-width: none !important;
    margin: 0 -16px !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
}
.mobile_content #vmMainPage .v2fp-desc .reviews2 ul,
.mobile_content #vmMainPage .v2fp-desc #rewies_wraper ul {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
}
.mobile_content #vmMainPage .v2fp-desc .reviews2 ul li,
.mobile_content #vmMainPage .v2fp-desc #rewies_wraper ul li {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    display: block !important;
    float: none !important;
}

/* ==================================================================
   Section 17 — Quick-order popup (RSForm Pro #19 or similar)
   ================================================================== */

/* Mark RSForm Pro popups as v2-user-form via JS — see mobile_v2.js */
.mobile_content form.rsform.v2-user-form,
form.rsform.v2-user-form {
    background: #fff !important;
    padding: 14px !important;
    border-radius: 12px !important;
    max-width: 420px !important;
    margin: 0 auto !important;
}
form.rsform.v2-user-form table,
form.rsform.v2-user-form tbody,
form.rsform.v2-user-form tr,
form.rsform.v2-user-form td {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}
form.rsform.v2-user-form td {
    display: block !important;
    width: 100% !important;
}
form.rsform.v2-user-form label {
    display: block !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #4b5563 !important;
    margin: 8px 0 4px !important;
    text-align: left !important;
}
/* DEPRECATED block — used to set 42px on inputs which beat the newer
   .rsform-input-box rule on specificity. Heights/widths are now managed
   by the .rsform-input-box rule + the popup-specific overrides further
   down. Keep ONLY the visual properties (border, color, etc.). */
form.rsform.v2-user-form input[type="text"],
form.rsform.v2-user-form input[type="email"],
form.rsform.v2-user-form input[type="tel"],
form.rsform.v2-user-form textarea {
    border: 1.5px solid #d1d5db !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    background: #fff !important;
    color: #111827 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
form.rsform.v2-user-form input:focus,
form.rsform.v2-user-form textarea:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(37,136,166,.15) !important;
}
form.rsform.v2-user-form input[type="submit"],
form.rsform.v2-user-form button[type="submit"] {
    width: 100% !important;
    height: 46px !important;
    border: none !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
    cursor: pointer !important;
    box-shadow: 0 3px 8px rgba(249,115,22,.35) !important;
    margin: 12px 0 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
form.rsform.v2-user-form input[type="reset"],
form.rsform.v2-user-form button[type="reset"] {
    width: 100% !important;
    height: 42px !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    margin: 8px 0 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
/* Captcha row — image + input + refresh link aligned */
form.rsform.v2-user-form img[src*="captcha"],
form.rsform.v2-user-form img[src*="securimage"] {
    border-radius: 6px;
    border: 1px solid #d1d5db;
    margin: 4px 0;
}

/* RSForm Pro modern <ol>/<li> layout (formContainer) — different from
   the legacy table-based one above. Used by the quick-order popup. */
form.rsform.v2-user-form ol.formContainer,
body.v2-popup-frame ol.formContainer {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
form.rsform.v2-user-form li.rsform-block,
body.v2-popup-frame li.rsform-block {
    list-style: none !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* CRITICAL: legacy theme sets fixed height + overflow:hidden which
       crops the label. Force unset. */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}
form.rsform.v2-user-form .formCaption,
body.v2-popup-frame .formCaption {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #4b5563 !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    text-align: left !important;
    line-height: 1.15 !important;
    /* CRITICAL: legacy rsform sets `float: left; width: 25%; height: 12px`
       on .formCaption — this causes formDescription to flow around it
       (description appears "next to" caption instead of below). NUKE. */
    float: none !important;
    clear: both !important;
    width: 100% !important;
    height: auto !important;
}
form.rsform.v2-user-form .formBody,
body.v2-popup-frame .formBody {
    clear: both !important;
}
form.rsform.v2-user-form .formDescription,
body.v2-popup-frame .formDescription {
    clear: both !important;
}
form.rsform.v2-user-form .formCaption .formRequired,
body.v2-popup-frame .formCaption .formRequired {
    color: #dc2626 !important;
    font-weight: 700 !important;
    margin-left: 2px !important;
}
form.rsform.v2-user-form .formBody,
body.v2-popup-frame .formBody {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Higher specificity (input.rsform-input-box[type] beats input[type] alone) */
form.rsform.v2-user-form input.rsform-input-box,
form.rsform.v2-user-form input.rsform-input-box[type="text"],
form.rsform.v2-user-form input.rsform-input-box[type="email"],
form.rsform.v2-user-form input.rsform-input-box[type="tel"],
form.rsform.v2-user-form input.rsform-input-box[type="password"],
body.v2-popup-frame input.rsform-input-box,
body.v2-popup-frame input.rsform-input-box[type="text"],
body.v2-popup-frame input.rsform-input-box[type="email"],
body.v2-popup-frame input.rsform-input-box[type="tel"],
body.v2-popup-frame input.rsform-input-box[type="password"] {
    width: 77% !important;
    max-width: 77% !important;
    height: 23px !important;
    padding: 0 7px !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 5px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    background: #fff !important;
    color: #111827 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    line-height: 23px !important;
}
form.rsform.v2-user-form textarea.rsform-input-box,
body.v2-popup-frame textarea.rsform-input-box,
form.rsform.v2-user-form li.rsform-block-message textarea,
body.v2-popup-frame li.rsform-block-message textarea {
    width: 92% !important;
    max-width: 92% !important;
    height: 41px !important;
    min-height: 41px !important;
    padding: 4px 7px !important;
    line-height: 1.25 !important;
    resize: vertical !important;
    font-size: 12.5px !important;
}
form.rsform.v2-user-form .rsform-input-box:focus,
body.v2-popup-frame .rsform-input-box:focus {
    outline: none !important;
    border-color: var(--primary, #2588a6) !important;
    box-shadow: 0 0 0 3px rgba(37,136,166,.15) !important;
}
form.rsform.v2-user-form .formDescription,
body.v2-popup-frame .formDescription {
    display: block !important;
    font-size: 11.5px !important;
    color: #9ca3af !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    font-style: normal !important;
}
/* Hide validation message spans by default (they hold a placeholder
   error text that's visible until form submits) */
form.rsform.v2-user-form span.formNoError,
body.v2-popup-frame span.formNoError {
    display: none !important;
}
form.rsform.v2-user-form span.formError,
body.v2-popup-frame span.formError {
    display: block !important;
    color: #dc2626 !important;
    font-size: 11.5px !important;
    margin-top: 3px !important;
    font-weight: 600 !important;
}
form.rsform.v2-user-form span.formClr,
body.v2-popup-frame span.formClr {
    display: block !important;
    clear: both !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Captcha block: re-order children — label → description → (img+input) → Ανανέωση
   Tight stacking inside (caption directly above description, no gap), but
   ONE blank line above the block to separate from the message textarea. */
form.rsform.v2-user-form li.rsform-block-captcha,
body.v2-popup-frame li.rsform-block-captcha {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 14px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}
/* Caption + description: zero gap between them. Higher specificity with
   #userForm to win over Section 24 RMA rules that set marginBottom 6px
   and marginTop 4px on the description. */
body.v2-popup-frame li.rsform-block-captcha .formCaption,
body.v2-popup-frame #userForm li.rsform-block-captcha .formCaption {
    order: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}
body.v2-popup-frame li.rsform-block-captcha .formDescription,
body.v2-popup-frame #userForm li.rsform-block-captcha .formDescription {
    order: 2 !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}
form.rsform.v2-user-form li.rsform-block-captcha .formBody,
body.v2-popup-frame li.rsform-block-captcha .formBody {
    order: 3 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
form.rsform.v2-user-form li.rsform-block-captcha img,
body.v2-popup-frame li.rsform-block-captcha img {
    height: 25px !important;
    width: auto !important;
    border-radius: 4px !important;
    border: 1px solid #d1d5db !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}
form.rsform.v2-user-form li.rsform-block-captcha input.rsform-input-box,
form.rsform.v2-user-form li.rsform-block-captcha input.rsform-captcha-box,
body.v2-popup-frame li.rsform-block-captcha input.rsform-input-box,
body.v2-popup-frame li.rsform-block-captcha input.rsform-captcha-box,
/* extra #userForm-specificity to beat Section 24 RMA `#userForm input{width:100%}` */
body.v2-popup-frame #userForm li.rsform-block-captcha input.rsform-input-box,
body.v2-popup-frame #userForm li.rsform-block-captcha input.rsform-captcha-box {
    flex: 0 0 auto !important;
    width: 75px !important;
    max-width: 75px !important;
    min-width: 0 !important;
    margin: 0 !important;
    height: 25px !important;
    line-height: 25px !important;
    font-size: 12px !important;
}
/* The hard <br> after the captcha img stays — but force the link "Ανανέωση"
   to break to a new line via flex-basis: 100% so it wraps below. */
form.rsform.v2-user-form li.rsform-block-captcha .formBody br,
body.v2-popup-frame li.rsform-block-captcha .formBody br {
    display: none !important;
}
form.rsform.v2-user-form li.rsform-block-captcha a,
body.v2-popup-frame li.rsform-block-captcha a {
    flex: 0 0 auto !important;
    width: auto !important;
    font-size: 11px !important;
    color: var(--primary, #2588a6) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
    margin-left: auto !important;
}
/* Description "Πληκτρολογήστε..." sits BELOW captcha row in one line */
form.rsform.v2-user-form li.rsform-block-captcha + .formDescription,
form.rsform.v2-user-form li.rsform-block-captcha .formDescription,
body.v2-popup-frame li.rsform-block-captcha .formDescription {
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
}
/* Submit/reset button row — side-by-side, centered, tighter buttons */
form.rsform.v2-user-form li.rsform-block-send .formBody,
body.v2-popup-frame li.rsform-block-send .formBody {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
form.rsform.v2-user-form li.rsform-block-send .formBody > *,
body.v2-popup-frame li.rsform-block-send .formBody > * {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    max-width: 50% !important;
}
form.rsform.v2-user-form li.rsform-block-send,
body.v2-popup-frame li.rsform-block-send {
    margin-bottom: 4px !important;
    text-align: center !important;
}
/* Tighten footer note spacing */
form.rsform.v2-user-form li.rsform-block-notes1,
body.v2-popup-frame li.rsform-block-notes1 {
    margin-top: 4px !important;
    padding-top: 4px !important;
}
form.rsform.v2-user-form .formButton,
body.v2-popup-frame .formButton {
    width: 100% !important;
    height: 46px !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
}
form.rsform.v2-user-form input[type="submit"].formButton,
body.v2-popup-frame input[type="submit"].formButton,
form.rsform.v2-user-form input.rsform-submit-button,
body.v2-popup-frame input.rsform-submit-button {
    width: 100% !important;
    height: 34px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-transform: uppercase !important;
    letter-spacing: .3px !important;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(249,115,22,.30) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 34px !important;
}
form.rsform.v2-user-form input[type="reset"].formButton,
body.v2-popup-frame input[type="reset"].formButton,
form.rsform.v2-user-form input.rsform-reset-button,
body.v2-popup-frame input.rsform-reset-button {
    width: 100% !important;
    height: 34px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #fff !important;
    color: #6b7280 !important;
    border: 1.5px solid #d1d5db !important;
    box-shadow: none !important;
    margin: 0 !important;
    text-transform: none !important;
    padding: 0 !important;
    /* Vertically center 'Ακύρωση' text — line-height matches inner box
       (34px height − 2×1.5px border = 31px). Was 30px which pushed the
       label up slightly on mobile. */
    line-height: 31px !important;
}
/* "Notes" block at the bottom — small note. Force every element inside
   to wrap within container (no overflow). */
form.rsform.v2-user-form li.rsform-block-notes1,
form.rsform.v2-user-form li.rsform-block-notes1 *,
body.v2-popup-frame li.rsform-block-notes1,
body.v2-popup-frame li.rsform-block-notes1 * {
    font-size: 10px !important;
    color: #6b7280 !important;
    text-align: left !important;
    line-height: 1.35 !important;
    font-weight: normal !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
form.rsform.v2-user-form li.rsform-block-notes1,
body.v2-popup-frame li.rsform-block-notes1 {
    border-top: 1px dashed #e5e7eb !important;
    padding: 6px 4px 0 !important;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}
form.rsform.v2-user-form li.rsform-block-notes1 .formBody,
body.v2-popup-frame li.rsform-block-notes1 .formBody {
    width: 100% !important;
    padding: 0 !important;
}
/* Caption block on top "Φόρμα Γρήγορης Παραγγελίας" — slimmer, ONE LINE */
form.rsform.v2-user-form li.rsform-block-caption,
body.v2-popup-frame li.rsform-block-caption {
    margin-bottom: 4px !important;
    padding-bottom: 3px !important;
    border-bottom: 1px solid #e5e7eb !important;
}
form.rsform.v2-user-form li.rsform-block-caption .formBody,
body.v2-popup-frame li.rsform-block-caption .formBody,
body.v2-popup-frame .formTitle,
body.v2-popup-frame h1 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 !important;
    padding: 0 26px 0 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
/* The actual title text is wrapped in <b><span style="font-size:20px">...
   override the inline style 20px on every descendant of caption block. */
form.rsform.v2-user-form li.rsform-block-caption *,
body.v2-popup-frame li.rsform-block-caption *,
form.rsform.v2-user-form li.rsform-block-caption b,
form.rsform.v2-user-form li.rsform-block-caption span,
body.v2-popup-frame li.rsform-block-caption b,
body.v2-popup-frame li.rsform-block-caption span {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
/* Also kill the extra <br><br> after the title that adds unnecessary height */
form.rsform.v2-user-form li.rsform-block-caption br,
body.v2-popup-frame li.rsform-block-caption br {
    display: none !important;
}
/* Tighter form padding */
form.rsform.v2-user-form,
body.v2-popup-frame form.rsform.v2-user-form {
    padding: 6px 10px 4px !important;
}
body.v2-popup-frame {
    padding: 4px !important;
}

/* Inside the iframe popup body (?tmpl=component) — strip default Joomla
   chrome (logo, breadcrumbs etc.) and let the form fill the viewport */
body.v2-popup-frame {
    background: #f9fafb !important;
    margin: 0 !important;
    padding: 8px !important;
    min-height: 0 !important;
    height: auto !important;
    -webkit-text-size-adjust: 100% !important;
}
html {
    min-height: 0 !important;
}
body.v2-popup-frame > *:not(form):not(.formContainer):not(.rsform):not(#system-message-container):not(script):not(noscript) {
    /* hide any extra Joomla page chrome that the component view may include */
    /* (kept conservative — only hide if it's clearly not the form) */
}
body.v2-popup-frame h1,
body.v2-popup-frame h2,
body.v2-popup-frame .formTitle,
body.v2-popup-frame legend {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--primary, #2588a6) !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    text-align: left !important;
    line-height: 1.3 !important;
}
body.v2-popup-frame form.rsform.v2-user-form {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}
/* Captcha image — height controlled by .rsform-block-captcha img rule.
   This older rule was previously winning the cascade with height:40px. */
body.v2-popup-frame form.rsform img[src*="captcha"],
body.v2-popup-frame form.rsform img[src*="securimage"] {
    height: 25px !important;
    width: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
}
body.v2-popup-frame form.rsform a[href*="refresh"],
body.v2-popup-frame form.rsform a[onclick*="refresh"] {
    display: inline-block !important;
    margin-left: 8px !important;
    font-size: 12px !important;
    color: var(--primary, #2588a6) !important;
}
/* "Παρακαλώ εισάγετε..." validation hints — small gray under the field */
body.v2-popup-frame form.rsform .formValidation,
body.v2-popup-frame form.rsform .formError {
    display: block !important;
    font-size: 11px !important;
    color: #ef4444 !important;
    font-weight: 600 !important;
    margin-top: 2px !important;
}
/* The row of submit + reset buttons */
body.v2-popup-frame form.rsform .formButton,
body.v2-popup-frame form.rsform input[type="submit"],
body.v2-popup-frame form.rsform input[type="reset"] {
    margin-top: 6px !important;
}

/* ==================================================================
   Section 18 — Account / Order details page (account.order_details)
   The legacy template uses nested tables with <td width="50%"> for the
   2-column bill/ship layout. On mobile this gives ~210px cells where
   the inner value column is so narrow that text wraps char-by-char.
   Fix: convert ALL tables in the account page to block layout.
   ================================================================== */
body.is-account .mobile_content #vmMainPage table,
body.is-account .mobile_content #vmMainPage table tbody,
body.is-account .mobile_content #vmMainPage table tr {
    display: block !important;
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}
body.is-account .mobile_content #vmMainPage table td,
body.is-account .mobile_content #vmMainPage table th {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 4px 8px !important;
    box-sizing: border-box !important;
    height: auto !important;
    vertical-align: top !important;
    border: none !important;
}

/* Section headers (sectiontableheader) — brand-blue full-width title bar */
body.is-account .mobile_content #vmMainPage tr.sectiontableheader {
    margin: 12px 0 6px !important;
    border-radius: 8px 8px 0 0 !important;
    overflow: hidden !important;
}
body.is-account .mobile_content #vmMainPage tr.sectiontableheader th,
body.is-account .mobile_content #vmMainPage tr.sectiontableheader td {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%) !important;
    color: #fff !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 8px !important;
}

/* Each label/value pair (tr containing 2 tds) — stack with tight gap */
body.is-account .mobile_content #vmMainPage table tr {
    background: #fff !important;
    border-bottom: 1px dashed #eef0f3 !important;
    padding: 6px 0 !important;
}
body.is-account .mobile_content #vmMainPage table tr:last-child {
    border-bottom: none !important;
}
/* First TD = label */
body.is-account .mobile_content #vmMainPage table tr td:first-child:not([colspan]) {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    padding: 6px 8px 2px !important;
}
/* Second TD = value */
body.is-account .mobile_content #vmMainPage table tr td:nth-child(2):not([colspan]) {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    padding: 0 8px 6px !important;
}
/* colspan=2 cells (BillTo / ShipTo headings inside inner tables) */
body.is-account .mobile_content #vmMainPage table tr td[colspan="2"] {
    background: #f7f9fb !important;
    color: var(--primary) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    margin: 14px 0 6px !important;
    border-left: 4px solid var(--primary) !important;
}
body.is-account .mobile_content #vmMainPage table tr td[colspan="2"] strong {
    font-weight: 800 !important;
}

/* Wrap each "section" (bill/ship to inner tables) in a card-like look */
body.is-account .mobile_content #vmMainPage > table {
    background: #fff !important;
    border: 1px solid #eef0f3 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 10px 0 !important;
    padding: 8px !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
}
/* Allow images / buttons in cells to size naturally */
body.is-account .mobile_content #vmMainPage table img {
    max-width: 100% !important;
    height: auto !important;
}

/* Page title h2 (Order Print etc.) */
body.is-account .mobile_content #vmMainPage h2 {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1f2937 !important;
    margin: 0 0 10px !important;
    line-height: 1.3 !important;
}

/* Voucher cell — keep prominent but tidy */
body.is-account .mobile_content #vmMainPage td[style*="color: red"] {
    font-size: 12px !important;
    color: #dc2626 !important;
    font-weight: 700 !important;
    padding: 6px 8px !important;
}
body.is-account .mobile_content #vmMainPage td[style*="color: blue"] {
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 0 8px 8px !important;
}
body.is-account .mobile_content #vmMainPage td[style*="color: blue"] a {
    color: var(--primary) !important;
    text-decoration: underline !important;
    word-break: break-all;
}

/* ── Account / Order details — class-based (works on ALL browsers, no :has) */

/* Hide empty rows */
body.is-account .mobile_content #vmMainPage tr.v2-acct-empty {
    display: none !important;
}
/* Hide multi-th header rows (ΠΟΣ. / ΟΝΟΜΑ / SKU / ΤΙΜΗ / ΣΥΝΟΛΟ etc.) */
body.is-account .mobile_content #vmMainPage tr.v2-acct-header-row {
    display: none !important;
}

/* Item row → card */
body.is-account .mobile_content #vmMainPage tr.v2-acct-item-row {
    background: #fff !important;
    border: 1px solid #eef0f3 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin: 0 0 8px !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
    display: block !important;
}
body.is-account .mobile_content #vmMainPage tr.v2-acct-item-row > td.v2-acct-qty {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    padding: 2px 0 !important;
}
body.is-account .mobile_content #vmMainPage tr.v2-acct-item-row > td.v2-acct-qty::before {
    content: "Ποσότητα: ";
    font-weight: 500;
    color: #9ca3af;
}
body.is-account .mobile_content #vmMainPage tr.v2-acct-item-row > td.v2-acct-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    line-height: 1.4 !important;
    padding: 4px 0 !important;
}
body.is-account .mobile_content #vmMainPage tr.v2-acct-item-row > td.v2-acct-name a {
    color: var(--primary) !important;
    text-decoration: none !important;
}
body.is-account .mobile_content #vmMainPage tr.v2-acct-item-row > td.v2-acct-sku {
    font-size: 11.5px !important;
    color: #9ca3af !important;
    font-weight: 500 !important;
    padding: 2px 0 !important;
    font-family: 'Courier New', monospace;
}
body.is-account .mobile_content #vmMainPage tr.v2-acct-item-row > td.v2-acct-sku::before {
    content: "Κωδ.: ";
    font-family: inherit;
    color: #9ca3af;
}
body.is-account .mobile_content #vmMainPage tr.v2-acct-item-row > td.v2-acct-price {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    padding: 2px 0 !important;
}
body.is-account .mobile_content #vmMainPage tr.v2-acct-item-row > td.v2-acct-price::before {
    content: "Τιμή: ";
    font-weight: 500;
    color: #9ca3af;
}
body.is-account .mobile_content #vmMainPage tr.v2-acct-item-row > td.v2-acct-total {
    border-top: 1px dashed #eef0f3;
    padding-top: 6px !important;
    margin-top: 4px !important;
    color: #f97316 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}
body.is-account .mobile_content #vmMainPage tr.v2-acct-item-row > td.v2-acct-total::before {
    content: "Σύνολο: ";
    font-weight: 500;
    color: #9ca3af;
    font-size: 13px;
}

/* Generic 2-cell label/value pair — tighter than default */
body.is-account .mobile_content #vmMainPage tr.v2-acct-pair {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px dashed #eef0f3 !important;
    background: transparent !important;
}
body.is-account .mobile_content #vmMainPage tr.v2-acct-pair > td.v2-acct-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    padding: 6px 8px 0 !important;
}
body.is-account .mobile_content #vmMainPage tr.v2-acct-pair > td.v2-acct-value {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    padding: 0 8px 6px !important;
}
/* Voucher row inside pair */
body.is-account .mobile_content #vmMainPage tr.v2-acct-pair > td[style*="color: red"]::before {
    content: "";
}

/* Hide single-cell "spacer" rows (1 td, no real content) */
body.is-account .mobile_content #vmMainPage tr:not(.v2-acct-pair):not(.v2-acct-item-row):not(.sectiontableheader) {
    /* keep collapsed */
    margin: 0 !important;
    padding: 0 !important;
}

/* === Πληροφορίες Αποστολής (shipping info) inner table — restore proper
   table layout. The generic `body.is-account ... table { display:block }`
   above (line ~8037) collapses ALL nested tables, but the shipping info
   table is a real 3-column matrix (Μεταφορική / Μέθοδος / Τιμή as headers
   on row 1, values on row 2). Without this fix the cells stack vertically
   and the user sees 6 unrelated lines of text instead of 2 rows × 3 cols.
   Detection: an inner table that has a tr with at least 3 td cells —
   distinguishes it from the BillTo/ShipTo 2-col label/value tables. */
body.is-account .mobile_content #vmMainPage tr.sectiontableheader + tr table:has(> tbody > tr > td:nth-of-type(3)),
body.is-account .mobile_content #vmMainPage tr.sectiontableheader + tr table:has(> tr > td:nth-of-type(3)) {
    display: table !important;
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #eef0f3 !important;
}
body.is-account .mobile_content #vmMainPage tr.sectiontableheader + tr table:has(> tbody > tr > td:nth-of-type(3)) tbody,
body.is-account .mobile_content #vmMainPage tr.sectiontableheader + tr table:has(> tr > td:nth-of-type(3)) tbody {
    display: table-row-group !important;
}
body.is-account .mobile_content #vmMainPage tr.sectiontableheader + tr table:has(> tbody > tr > td:nth-of-type(3)) tr,
body.is-account .mobile_content #vmMainPage tr.sectiontableheader + tr table:has(> tr > td:nth-of-type(3)) tr {
    display: table-row !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.is-account .mobile_content #vmMainPage tr.sectiontableheader + tr table:has(> tbody > tr > td:nth-of-type(3)) td,
body.is-account .mobile_content #vmMainPage tr.sectiontableheader + tr table:has(> tr > td:nth-of-type(3)) td {
    display: table-cell !important;
    width: auto !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1f2937 !important;
    text-align: left !important;
    vertical-align: middle !important;
    background: #fff !important;
    border: none !important;
    border-bottom: 1px solid #eef0f3 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
/* Header row (row 1) — uppercase mini-caps in soft grey background */
body.is-account .mobile_content #vmMainPage tr.sectiontableheader + tr table:has(> tbody > tr > td:nth-of-type(3)) tr:first-child td,
body.is-account .mobile_content #vmMainPage tr.sectiontableheader + tr table:has(> tr > td:nth-of-type(3)) tr:first-child td {
    background: #f7f9fb !important;
    color: #4b5563 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    padding: 6px 10px !important;
}
body.is-account .mobile_content #vmMainPage tr.sectiontableheader + tr table:has(> tbody > tr > td:nth-of-type(3)) tr:last-child td,
body.is-account .mobile_content #vmMainPage tr.sectiontableheader + tr table:has(> tr > td:nth-of-type(3)) tr:last-child td {
    border-bottom: none !important;
}
/* Strong inside header cells — kill bold (already handled by font-weight) */
body.is-account .mobile_content #vmMainPage tr.sectiontableheader + tr table:has(> tbody > tr > td:nth-of-type(3)) td strong,
body.is-account .mobile_content #vmMainPage tr.sectiontableheader + tr table:has(> tr > td:nth-of-type(3)) td strong {
    font-weight: inherit !important;
}

/* ==================================================================
   Section 19 — Checkout Thank-You page (subtle polish only — NOT
   aggressive layout changes since content varies per payment method
   (κατάθεση τράπεζας / κάρτα / PayPal κλπ))
   ================================================================== */

/* H3 success heading — breathing room + brand color */
body.is-thankyou .mobile_content #vmMainPage > h3:first-of-type {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    line-height: 1.35 !important;
    margin: 8px 0 12px !important;
    padding: 14px 16px !important;
    background: linear-gradient(180deg, #ecfdf5 0%, #f0fdf4 100%) !important;
    border-left: 4px solid #10b981 !important;
    border-radius: 8px !important;
    text-align: left !important;
}
body.is-thankyou .mobile_content #vmMainPage > h3:first-of-type::before {
    content: "✓";
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    background: #10b981;
    color: #fff;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 900;
    margin-right: 8px;
    vertical-align: -4px;
}

/* Confirmation paragraph (email + order number) */
body.is-thankyou .mobile_content #vmMainPage > p:first-of-type {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: #374151 !important;
    margin: 0 0 14px !important;
    padding: 12px 14px !important;
    background: #f9fafb !important;
    border: 1px solid #eef0f3 !important;
    border-radius: 10px !important;
}
body.is-thankyou .mobile_content #vmMainPage > p:first-of-type img {
    display: none !important; /* the legacy green check.gif — replaced by H3 ::before */
}
/* Email + Order number — highlight as bold brand color */
body.is-thankyou .mobile_content #vmMainPage > p:first-of-type b,
body.is-thankyou .mobile_content #vmMainPage > p:first-of-type strong {
    color: var(--primary) !important;
    font-weight: 700 !important;
}

/* Bank deposit info — monospace IBANs for readability */
body.is-thankyou .mobile_content #vmMainPage table {
    margin: 10px 0 !important;
    line-height: 1.6 !important;
}
body.is-thankyou .mobile_content #vmMainPage td {
    line-height: 1.55 !important;
}
/* Make IBAN-looking text (long uppercase strings) monospace + selectable */
body.is-thankyou .mobile_content #vmMainPage strong:not(:empty),
body.is-thankyou .mobile_content #vmMainPage b:not(:empty) {
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* Bank info heading "Πληροφορίες κατάθεσης..." */
body.is-thankyou .mobile_content #vmMainPage h2,
body.is-thankyou .mobile_content #vmMainPage h4 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    margin: 16px 0 10px !important;
    line-height: 1.35 !important;
    text-align: left !important;
}

/* "Δείτε την σύνοψη παραγγελίας" link → CTA button */
body.is-thankyou .mobile_content #vmMainPage a[href*="order_details"],
body.is-thankyou .mobile_content #vmMainPage a[href*="account.order"] {
    display: inline-block !important;
    padding: 10px 18px !important;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    margin: 8px 0 12px !important;
    box-shadow: 0 3px 8px rgba(37,136,166,.30) !important;
}

/* ==================================================================
   Section 19b — Thank-You / Order details: VivaPay unpaid card-payment
   "urgent action" card. The legacy VM/VivaPay component renders only a
   small clickable image with no amount, no real CTA, and no security
   note. We wrap it in a prominent orange action card with a primary
   button (which submits the form), the amount read from the hidden
   input, and a warning that the order is on hold until payment.
   Applies on BOTH is-thankyou (right after checkout) and is-account
   (when reviewing an unpaid order via account.order_details).
   Markup-touch via JS — see mobile_v2.js (.v2-pay-card injection).
   ================================================================== */
.v2-pay-card {
    background: linear-gradient(180deg, #fff7ed 0%, #fef3c7 100%) !important;
    border: 2px solid #f59e0b !important;
    border-radius: 16px !important;
    padding: 18px 14px !important;
    margin: 18px 0 !important;
    box-shadow: 0 6px 20px rgba(245, 158, 11, .15) !important;
    text-align: center !important;
    width: auto !important;
    display: block !important;
}
.v2-pay-card td,
.v2-pay-card tr,
.v2-pay-card tbody,
.v2-pay-card table {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
}
.v2-pay-card fieldset,
.v2-pay-card .fieldset {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.v2-pay-card legend,
.v2-pay-card .legend {
    background: transparent !important;
    color: #b45309 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 4px !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
}
.v2-pay-card legend h1 {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #b45309 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1.25 !important;
}
.v2-pay-card legend h1 .akey,
.v2-pay-card legend h1 span {
    color: #b45309 !important;
}
.v2-pay-card > strong,
.v2-pay-card strong h1,
.v2-pay-card td > strong {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #78350f !important;
    margin: 4px 0 0 !important;
    text-align: center !important;
    line-height: 1.4 !important;
}
.v2-pay-warn {
    margin: 8px auto 12px !important;
    padding: 10px 12px !important;
    background: #fef3c7 !important;
    border: 1px solid #fbbf24 !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    color: #78350f !important;
    text-align: center !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
}
.v2-pay-amount {
    margin: 14px auto !important;
    padding: 12px 18px !important;
    background: #fff !important;
    border: 2px dashed #f59e0b !important;
    border-radius: 14px !important;
    /* display:block + auto-margins → centered horizontally. inline-block
       doesn't honor auto-margins. */
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 60% !important;
    text-align: center !important;
    box-sizing: border-box !important;
}
.v2-pay-amount-lab {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #92400e !important;
    font-weight: 700 !important;
}
.v2-pay-amount-val {
    font-size: 30px !important;
    font-weight: 900 !important;
    color: #b45309 !important;
    line-height: 1.1 !important;
    margin-top: 4px !important;
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
.v2-pay-cta {
    display: block !important;
    width: 100% !important;
    padding: 16px 18px !important;
    margin: 14px 0 6px !important;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    box-shadow: 0 6px 16px rgba(234, 88, 12, .40) !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
    -webkit-tap-highlight-color: transparent !important;
}
.v2-pay-cta:active {
    transform: scale(0.98) !important;
    box-shadow: 0 3px 8px rgba(234, 88, 12, .35) !important;
}
.v2-pay-secure {
    margin: 8px 0 4px !important;
    font-size: 12px !important;
    color: #15803d !important;
    text-align: center !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
}
.v2-pay-card form[name="vivapayments"] {
    margin: 0 !important;
    padding: 0 !important;
}
.v2-pay-card form[name="vivapayments"] p {
    margin: 6px 0 0 !important;
    text-align: center !important;
}
.v2-pay-card form[name="vivapayments"] input[type="image"],
.v2-pay-card form[action*="paypal.com"] input[type="image"] {
    max-width: 180px !important;
    height: auto !important;
    opacity: .85 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 6px !important;
    background: #fff !important;
}
/* PayPal form has no fieldset/legend — JS injects a .v2-pay-card-title
   block at the top of the wrapper with the heading + subtitle. */
.v2-pay-card-title {
    margin: 0 0 8px !important;
    text-align: center !important;
}
.v2-pay-card-title h1 {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #b45309 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1.25 !important;
}
.v2-pay-card-sub {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #78350f !important;
    margin: 4px 0 0 !important;
    text-align: center !important;
    line-height: 1.4 !important;
}
/* PayPal form is inside a plain <table> with no class — make sure the
   existing .v2-pay-card td/tr resets do not collapse the PayPal image
   form (it has only one row with one td). */
.v2-pay-card.v2-pay-card-paypal {
    /* nothing extra — base .v2-pay-card already handles it */
}

/* ==================================================================
   Section 19c — Payment-RESULT pages (success / failure return URLs).
   Replaces the broken legacy rendering (huge pixelated red X for
   PayPal cancel, plain-text "Order ID is not set" for VivaPay) with
   a polished success/failure state card and a clear retry CTA.
   See mobile_v2.js v2PayResult() for state detection logic.
   ================================================================== */
body[data-v2pay-fix] .mobile_content #vmMainPage img[src*="button_cancel"],
body[data-v2pay-fix] .mobile_content #vmMainPage img[src*="checked.png"],
body[data-v2pay-fix] .mobile_content #vmMainPage img[src*="success.png"],
body[data-v2pay-fix] .mobile_content #vmMainPage img[src*="failure.png"],
body[data-v2pay-fix] .mobile_content #vmMainPage img[src*="error.png"] {
    display: none !important;
}
body[data-v2pay-fix] .v2-pay-legacy-hide {
    display: none !important;
}
.v2-pay-result {
    margin: 14px 0 18px !important;
    padding: 22px 18px !important;
    border-radius: 18px !important;
    text-align: center !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.06) !important;
}
.v2-pay-result.is-success {
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border: 2px solid #10b981 !important;
}
.v2-pay-result.is-failure {
    background: linear-gradient(180deg, #fef2f2 0%, #fecaca 100%) !important;
    border: 2px solid #ef4444 !important;
}
.v2-pay-result-icon {
    font-size: 56px !important;
    line-height: 1 !important;
    display: block !important;
    margin: 0 auto 8px !important;
}
.v2-pay-result.is-success .v2-pay-result-icon { color: #059669 !important; }
.v2-pay-result.is-failure .v2-pay-result-icon { color: #dc2626 !important; }
.v2-pay-result-title {
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    margin: 4px 0 6px !important;
}
.v2-pay-result.is-success .v2-pay-result-title { color: #047857 !important; }
.v2-pay-result.is-failure .v2-pay-result-title { color: #b91c1c !important; }
.v2-pay-result-sub {
    font-size: 14px !important;
    color: #374151 !important;
    margin: 0 auto 12px !important;
    max-width: 92% !important;
    line-height: 1.45 !important;
}
.v2-pay-result-orderbadge {
    display: inline-block !important;
    padding: 8px 14px !important;
    background: #fff !important;
    border-radius: 999px !important;
    margin: 6px 0 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.06) !important;
}
.v2-pay-result-orderbadge strong {
    font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
    color: #0f766e !important;
    margin-left: 4px !important;
}
.v2-pay-result.is-failure .v2-pay-result-orderbadge strong { color: #b91c1c !important; }
.v2-pay-result-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 8px !important;
    align-items: stretch !important;
}
.v2-pay-result-btn {
    display: block !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    border: none !important;
    line-height: 1.2 !important;
    -webkit-tap-highlight-color: transparent !important;
}
.v2-pay-result-btn-primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, .35) !important;
}
.v2-pay-result.is-failure .v2-pay-result-btn-primary {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    box-shadow: 0 4px 12px rgba(234, 88, 12, .35) !important;
}
.v2-pay-result-btn-secondary {
    background: #fff !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
}
.v2-pay-result-eta {
    font-size: 12px !important;
    color: #6b7280 !important;
    margin-top: 12px !important;
}
.v2-pay-result-help {
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px dashed #fca5a5 !important;
    font-size: 12.5px !important;
    color: #6b7280 !important;
    line-height: 1.7 !important;
}
.v2-pay-result-help strong {
    color: #b91c1c !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 4px !important;
}
.v2-pay-result-help a {
    color: #b91c1c !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}
.v2-pay-result-help-hours {
    color: #9ca3af !important;
    font-weight: 500 !important;
}
.v2-pay-result-help-line {
    display: block !important;
    margin-top: 4px !important;
}
.v2-pay-result-help br { display: none !important; }

/* ==================================================================
   Section 19d — Checkout step 2 (shipping address selection): polish
   the legacy "Ίδια με την Διεύθυνση Χρέωσης" radio + the shouty
   ALL-CAPS prompt + the new-address link.
   ================================================================== */
body.is-checkout .v2-ship-prompt {
    text-transform: none !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #92400e !important;
    background: #fef3c7 !important;
    border: 1px solid #fbbf24 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin: 12px 0 !important;
    display: block !important;
    text-align: left !important;
    line-height: 1.45 !important;
}
body.is-checkout .v2-ship-prompt::before {
    content: "ℹ ";
    font-weight: 900;
    color: #b45309;
    margin-right: 4px;
}
body.is-checkout .v2-ship-row {
    display: flex !important;
    align-items: center !important;
    /* CRITICAL: legacy/cart CSS sets justify-content: space-between on
       TRs which pushes the label TD to the far right. Force flex-start. */
    justify-content: flex-start !important;
    gap: 12px !important;
    text-align: left !important;
    padding: 14px 14px !important;
    margin: 8px 0 !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #fff !important;
    cursor: pointer !important;
    width: auto !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}
/* Also force the TDs inside a v2-ship-row to NOT stretch (flex 0) and
   keep them adjacent — radio cell shrinks to content, label cell takes
   only the space it needs. */
body.is-checkout tr.v2-ship-row > td:first-child {
    flex: 0 0 auto !important;
}
body.is-checkout tr.v2-ship-row > td:nth-child(2),
body.is-checkout tr.v2-ship-row > td:last-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
body.is-checkout .v2-ship-row.is-selected {
    border-color: var(--primary) !important;
    background: #f0f9ff !important;
    box-shadow: 0 2px 8px rgba(37,136,166,.15) !important;
}
body.is-checkout .v2-ship-row input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
    accent-color: var(--primary) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}
/* Force-left-align labels of the shipping radios — legacy VM uses
   align="right" attribute on the wrapping <td>, which has UA-stylesheet
   priority that's hard to beat. JS strips the attr at runtime AND we
   also lock everything inside .v2-ship-row to left here as belt-and-
   braces. */
body.is-checkout tr.v2-ship-row,
body.is-checkout tr.v2-ship-row td,
body.is-checkout tr.v2-ship-row th,
body.is-checkout tr.v2-ship-row * ,
body.is-checkout .v2-ship-row,
body.is-checkout .v2-ship-row * {
    text-align: left !important;
}
/* Brute-force: any TD/TH inside #vmMainPage on checkout that still has
   align="right" attribute — text-align:left + word-wrap. */
body.is-checkout #vmMainPage td[align="right"],
body.is-checkout #vmMainPage th[align="right"],
body.is-checkout #vmMainPage td[align],
body.is-checkout #vmMainPage th[align] {
    text-align: left !important;
    word-break: break-word !important;
    white-space: normal !important;
}
/* When the row is a real <tr>, bring the parent table into "card" mode */
body.is-checkout table.v2-ship-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin: 8px 0 !important;
}
body.is-checkout table.v2-ship-table tr.v2-ship-row td {
    border: none !important;
    background: transparent !important;
    padding: 4px !important;
    vertical-align: middle !important;
    word-break: break-word !important;
    white-space: normal !important;
}
/* Hide the inline "(Ενημέρωση διεύθυνσης)" link inside a shipping row */
body.is-checkout .v2-ship-edit-hide,
body.is-checkout a.v2-ship-edit-hide {
    display: none !important;
}

/* ==================================================================
   Section 22 — TinyMCE editor classes (ported from editor.css)
   These classes are inserted by content authors via the TinyMCE
   "Custom Style" dropdown. On desktop they work because the legacy
   editor.css is loaded; on mobile_v2 we don't load it, so we port
   the rules here, scoped inside .v2fp-desc to avoid affecting any
   other layout (header/cart/checkout/etc.).
   Source: templates/shopper_frenzy/css/editor.css
   ================================================================== */

/* — bg_* chips — */
.v2fp-desc .bg_dark_gray  { background:#333333; color:#fff; padding:5px; margin:0 0 5px 0; }
.v2fp-desc .bg_light_gray { background:#acacac; color:#fff; padding:5px; margin:0 0 5px 0; }
.v2fp-desc .bg_black      { background:#000;    color:#fff; padding:5px; margin:0 0 5px 0; }
.v2fp-desc .bg_blue       { background:#0400eb; color:#fff; padding:5px; margin:0 0 5px 0; }
.v2fp-desc .bg_light_blue { background:#0089d8; color:#fff; padding:5px; margin:0 0 5px 0; }
.v2fp-desc .bg_orange     { background:#d67200; color:#fff; padding:5px; margin:0 0 5px 0; }
.v2fp-desc .bg_red        { background:#ff0000; color:#fff; padding:5px; margin:0 0 5px 0; }

/* — *_box containers (border + bg) — */
.v2fp-desc .red_box {
    background:#FFD6D6; border-top:2px solid #EF706F; border-bottom:2px solid #EF706F;
    color:#CC0000; padding:13px;
}
.v2fp-desc .blue_box {
    background:#D0DCEC; border-top:2px solid #5B95DA; border-bottom:2px solid #5B95DA;
    color:#1B6FC2; padding:13px;
}
.v2fp-desc .blue_box1 {
    background:#F2F5ED; color:#1B6FC2; padding:10px; font-size:13px;
}
.v2fp-desc .green_box {
    background:#F2F5ED; border-top:2px solid #B0CB79; border-bottom:2px solid #B0CB79;
    color:#8DCB0E; padding:13px;
}
.v2fp-desc .orange_box {
    background:#FEF6D8; border-top:2px solid #FDE179; border-bottom:2px solid #FDE179;
    color:#A38106; padding:13px;
}
.v2fp-desc .orange_box1 {
    background:url('../images/next_16x16.png') no-repeat right;
    border-bottom:2px solid #FDE179;
    color:#A38106; padding:2px; padding-right:20px;
    margin-bottom:20px; float:left; width:auto;
}
.v2fp-desc .yellow_box {
    background:#F4F5B9; border-top:2px solid #EFF11E; border-bottom:2px solid #EFF11E;
    color:#9FA112; padding:13px;
}
.v2fp-desc .gray_box {
    background:#FFFFFF; border-top:2px solid #9D9D9D; border-bottom:2px solid #9D9D9D;
    color:#4B4B4B; padding:13px;
}
.v2fp-desc .black_box {
    background:#333333; border-top:2px solid #4D4D4D; border-bottom:2px solid #4D4D4D;
    color:#FFFFFF; padding:13px;
}
.v2fp-desc .boxed { border:5px solid #EAEAEA; }
.v2fp-desc .boxed:hover { cursor:pointer; border:5px solid #D8D7D7; }

/* — typography (blockquote, code, h2_black) — */
.v2fp-desc blockquote {
    background: transparent url(../images/typography/s5_left_quote.png) no-repeat top left;
    color:#333; font-weight:bold; font-size:17px; font-style:italic; line-height:150%;
    margin:15px 0; padding:0 0 5px 65px; width:auto;
}
.v2fp-desc blockquote p {
    background: transparent url(../images/typography/s5_right_quote.png) no-repeat bottom right;
    margin-top:0; padding:0 65px 10px 0;
}
.v2fp-desc h2.h2_black { color:#000; padding:0; }
.v2fp-desc .code1 {
    background:#EBEAEA; border-left:5px solid #666666; color:#666666;
    font-family:monospace; font-size:9pt; line-height:1.5;
    margin-top:15px; margin-bottom:15px;
    padding:20px;
}

/* — responsive iframe wrapper — */
.v2fp-desc .resp-container {
    position:relative; overflow:hidden; padding-top:56.25%;
}
.v2fp-desc .resp-iframe {
    position:absolute; top:0; left:0; width:100%; height:100%; border:0;
}

/* — Decorated unordered lists — */
.v2fp-desc ul.ul_b01 li { background: transparent url(../images/typography/b01.png) no-repeat 0 5px; padding-left:23px; padding-right:18px; }
.v2fp-desc ul.ul_b01    { padding-left:0; list-style-type:none; }
.v2fp-desc ul.ul_b02 li { background: transparent url(../images/typography/b02.png) no-repeat 0 5px; padding-left:23px; padding-right:18px; }
.v2fp-desc ul.ul_b02    { padding-left:0; list-style-type:none; }
.v2fp-desc ul.ul_b03 li { background: transparent url(../images/typography/b03.png) no-repeat 0 5px; padding-left:23px; padding-right:18px; }
.v2fp-desc ul.ul_b03    { padding-left:0; list-style-type:none; }
.v2fp-desc ul.ul_b04 li { background: transparent url(../images/typography/b04.png) no-repeat 0 5px; padding-left:23px; padding-right:18px; }
.v2fp-desc ul.ul_b04    { padding-left:0; list-style-type:none; }
.v2fp-desc ul.ul_b05 li { background: transparent url(../images/typography/b05.jpg) no-repeat 0 5px; padding-left:23px; padding-right:18px; }
.v2fp-desc ul.ul_b05    { padding-left:0; list-style-type:none; }

.v2fp-desc ul.ul_arrow li { background: transparent url(../images/typography/s5_ul_arrow.png) no-repeat top left; padding:1px 18px 1px 18px; }
.v2fp-desc ul.ul_arrow    { padding-left:0; list-style-type:none; }
.v2fp-desc ul.ul_star li  { background: transparent url(../images/typography/s5_ul_star.png) no-repeat top left; padding:3px 18px 3px 23px; }
.v2fp-desc ul.ul_star     { padding-left:0; list-style-type:none; }
.v2fp-desc ul.ul_bullet li { background: transparent url(../images/typography/s5_ul_bullet.png) no-repeat top left; padding:3px 18px 3px 23px; }
.v2fp-desc ul.ul_bullet    { padding-left:0; list-style-type:none; }
.v2fp-desc ul.ul_bullet_small li { background: transparent url(../images/typography/s5_bullet_small.png) no-repeat top left; padding:0 18px 0 23px; }
.v2fp-desc ul.ul_bullet_small    { padding-left:0; list-style-type:none; }
.v2fp-desc ul.ul_numbers    { padding-left:0; list-style-type:none; }
.v2fp-desc ul.ul_numbers li { padding-top:6px; padding-left:36px; }

/* — Numbered list items (1-9) — */
.v2fp-desc li.li_number1 { background: transparent url(../images/typography/s5_li_number1.png) no-repeat top left; padding:8px 18px 22px 40px; list-style-type:none; }
.v2fp-desc li.li_number2 { background: transparent url(../images/typography/s5_li_number2.png) no-repeat top left; padding:8px 18px 22px 40px; list-style-type:none; }
.v2fp-desc li.li_number3 { background: transparent url(../images/typography/s5_li_number3.png) no-repeat top left; padding:8px 18px 22px 40px; list-style-type:none; }
.v2fp-desc li.li_number4 { background: transparent url(../images/typography/s5_li_number4.png) no-repeat top left; padding:8px 18px 22px 40px; list-style-type:none; }
.v2fp-desc li.li_number5 { background: transparent url(../images/typography/s5_li_number5.png) no-repeat top left; padding:8px 18px 22px 40px; list-style-type:none; }
.v2fp-desc li.li_number6 { background: transparent url(../images/typography/s5_li_number6.png) no-repeat top left; padding:8px 18px 22px 40px; list-style-type:none; }
.v2fp-desc li.li_number7 { background: transparent url(../images/typography/s5_li_number7.png) no-repeat top left; padding:8px 18px 22px 40px; list-style-type:none; }
.v2fp-desc li.li_number8 { background: transparent url(../images/typography/s5_li_number8.png) no-repeat top left; padding:8px 18px 22px 40px; list-style-type:none; }
.v2fp-desc li.li_number9 { background: transparent url(../images/typography/s5_li_number9.png) no-repeat top left; padding:8px 18px 22px 40px; list-style-type:none; }

/* === Emoji bullets (ul_emo_*) — match desktop pt-desc.css §122-132.
   FE0F variation selector φορτώνει χρωματιστό emoji glyph από το
   system emoji font (Firefox/Chrome/Safari 17+/Edge). Οι classes
   εφαρμόζονται από το backend Composer editor σε νέα προϊόντα.
   Reset των li: μηδενίζει τυχόν inherited background-image από
   οποιοδήποτε προηγούμενο ul.ul_b0X li rule (defensive). */
.v2fp-desc ul.ul_emo_check { list-style-type: "✔️ "; padding-left: 24px; }
.v2fp-desc ul.ul_emo_star  { list-style-type: "⭐ "; padding-left: 24px; }
.v2fp-desc ul.ul_emo_arrow { list-style-type: "➡️ "; padding-left: 24px; }
.v2fp-desc ul.ul_emo_check li,
.v2fp-desc ul.ul_emo_star li,
.v2fp-desc ul.ul_emo_arrow li { background: none; padding-left: 0; }
/* Force colored emoji font ΜΟΝΟ για list marker (όχι text) — desktop
   browser fallback σε ασπρόμαυρο text glyph όταν page font (Arial) δεν
   έχει emoji. Mobile preview iframe είναι desktop browser, οπότε
   χρειάζεται και εδώ. Match desktop pt-desc.css. */
.v2fp-desc ul.ul_emo_check li::marker,
.v2fp-desc ul.ul_emo_star li::marker,
.v2fp-desc ul.ul_emo_arrow li::marker {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", "EmojiOne Color", emoji;
}


/* ==================================================================
   Section 23 — <br> behavior in description: match desktop
   Desktop has no rule hiding/transforming <br>. They render as
   default inline line breaks. Mobile_v2 inherited the legacy rule
   .mobile_content br { display:none } which hid them, then we tried
   block;height:0 which created issues. This rule restores default
   inline behavior ONLY inside .v2fp-desc, with high specificity to
   beat both legacy hide and our previous override.
   ================================================================== */
body#mobile_body .mobile_content #vmMainPage .v2fp-desc br {
    display: inline !important;
    height: auto !important;
    overflow: visible !important;
}
/* Reviews module is nested inside .v2fp-desc — keep our existing
   reviews-specific rule (Section 16b) by NOT overriding it for those.
   Section 16b already targets .reviews2/#rewies_wraper br with
   display:none — its specificity (1,3,1) beats this rule (1,2,1) so
   reviews still hide their br correctly. */

/* — Consecutive br: reduce line-height by 25% (1.2 → 0.9) so that
     stacks of <br><br> don't accumulate too much vertical space.
     Note: CSS adjacent-sibling selector matches even if there's a
     text node between the two br, but in practice this works fine. */
.v2fp-desc br + br {
    line-height: 0.9;
}

/* ==================================================================
   Section 24 — RMA form (#userForm) — stack ALL labels above inputs
   on mobile so nothing overflows narrow viewports.
   ================================================================== */
/* Force form structure to fit viewport.
   min-width: 0 allows shrinking below intrinsic content width
   (textarea cols=50 makes content ~447px wide; without min-width:0
   the containers won't shrink below that and overflow narrow viewports). */
#userForm,
#userForm fieldset.formFieldset,
#userForm ol.formContainer,
#userForm li.rsform-block,
#userForm .rsform-block .formCaption,
#userForm .rsform-block .formBody,
#userForm .rsform-block .formDescription,
#userForm .rsform-block input,
#userForm .rsform-block textarea,
#userForm .rsform-block select {
    min-width: 0 !important;
}
#userForm,
#userForm fieldset.formFieldset,
#userForm ol.formContainer,
#userForm li.rsform-block {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Stack ALL labels above inputs.
   height: auto overrides legacy front.css `div.formCaption { height: 12px; }`
   which clips multi-line labels. */
#userForm .rsform-block .formCaption {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    margin: 0 0 6px !important;
    text-align: left !important;
    line-height: 1.3 !important;
}
/* formBody + formDescription — un-float, full width */
#userForm .rsform-block .formBody,
#userForm .rsform-block .formDescription {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
    box-sizing: border-box !important;
}
/* All inputs/textareas/selects — full width of their container */
#userForm .rsform-block input[type="text"],
#userForm .rsform-block input[type="email"],
#userForm .rsform-block input[type="tel"],
#userForm .rsform-block textarea,
#userForm .rsform-block select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* Date picker calendar trigger button — small icon-only with SVG calendar bg.
   value is emptied via JS; SVG icon centered. */
#userForm .btnCal {
    display: inline-block !important;
    width: 42px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 6px 0 0 0 !important;
    background: #f3f4f6 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232588a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") no-repeat center center !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    font-size: 0 !important;
    color: transparent !important;
}
#userForm .btnCal:hover {
    background-color: #e5e7eb !important;
}
/* formDescription for orderdate1 — moved inline next to button via JS */
#userForm .rsform-block-orderdate1 .formDescription {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    margin: 6px 0 0 10px !important;
    padding: 0 !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    vertical-align: middle !important;
    float: none !important;
    clear: none !important;
}
/* Date input itself — full width above the button */
#userForm .rsform-calendar-box {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Re-enable <br> tags in RMA form text-only blocks (intro/info/separators).
   Legacy `.mobile_content br { display: none }` hides ALL br globally;
   we override only inside these specific RSForm "freetext" blocks. */
#userForm .rsform-block-header br,
#userForm .rsform-block-emailtext br,
#userForm .rsform-block-orderbytel br,
#userForm .rsform-block-voucher-text br,
#userForm .rsform-block-moneyreturn br,
#userForm .rsform-block-line2-copy br,
#userForm .rsform-block-complete-copy br,
#userForm .rsform-block-line2 br,
#userForm .rsform-block-line br,
#userForm .rsform-block-asterisk br {
    display: inline !important;
    height: auto !important;
    overflow: visible !important;
}

/* Reset button (Ακύρωση) — RMA-only (NOT popups).
   Scoped with body:not(.v2-popup-frame) so iframe popups (Ερώτηση,
   Γρήγορη Παραγγελία) keep the symmetric submit/reset pair from the
   general .rsform-reset-button rule above. Without this scope, the bare
   #userForm selector was hitting popup forms too — they share the same
   id="userForm" — and the larger padding/font caused 'Αποστολή' clipping. */
body:not(.v2-popup-frame) #userForm .rsform-reset-button {
    background: transparent !important;
    color: #6b7280 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin-left: 8px !important;
}
body:not(.v2-popup-frame) #userForm .rsform-reset-button:hover {
    background: #f9fafb !important;
}


/* ═══════════════════════════════════════════════════════════════════
   §25 — Box Now flow (mobile port from desktop_v2.css §5)
   - Respect legacy `style="display: none"` on submit
   - Style the orange #selectBoxAlert warning (clickable, re-opens picker)
   - body.v2-needs-box belt-and-suspenders rule defeats !important
   ═══════════════════════════════════════════════════════════════════ */

/* Respect legacy `style="display: none"` on submit + buttons.
   Legacy JS in index.php hides the submit and shows the alert when Box Now
   is selected without a chosen locker (cookie boxnow_id). Our CTA rules
   would force the submit visible — these selectors override. */
body.is-checkout .mobile_content #vmMainPage input[type="submit"][style*="display: none"],
body.is-checkout .mobile_content #vmMainPage input[type="submit"][style*="display:none"],
body.is-checkout .mobile_content #vmMainPage button[style*="display: none"],
body.is-checkout .mobile_content #vmMainPage button[style*="display:none"] {
    display: none !important;
}
/* Belt-and-suspenders: when body has v2-needs-box (set by §5b0c JS), hide
   the main submit button regardless of inline style format. */
body.is-checkout.v2-needs-box .mobile_content #vmMainPage #checkout_adminForm input[type="submit"]:not([name*="coupon"]):not([name*="Coupon"]):not(.addtocart_button),
body.is-checkout.v2-needs-box .mobile_content #vmMainPage #checkout_adminForm button[type="submit"]:not([name*="coupon"]) {
    display: none !important;
    visibility: hidden !important;
}
/* #selectBoxAlert — orange warning tile, CLICKABLE (re-opens the Box Now picker) */
body.is-checkout .mobile_content #vmMainPage #selectBoxAlert {
    width: calc(100% - 24px) !important;
    max-width: 480px !important;
    margin: 10px auto !important;
    padding: 12px 16px !important;
    background: #fff7ed !important;
    border: 2px solid #f97316 !important;
    border-radius: 10px !important;
    color: #9a3412 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: center !important;
    line-height: 1.4 !important;
    box-shadow: 0 2px 8px rgba(249,115,22,.20) !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: background .15s ease, transform .1s ease, box-shadow .15s ease !important;
    user-select: none !important;
}
body.is-checkout .mobile_content #vmMainPage #selectBoxAlert:hover {
    background: #ffedd5 !important;
    box-shadow: 0 4px 14px rgba(249,115,22,.30) !important;
}
body.is-checkout .mobile_content #vmMainPage #selectBoxAlert:active {
    transform: scale(0.99) !important;
}
body.is-checkout .mobile_content #vmMainPage #selectBoxAlert::before {
    content: '⚠ ';
    color: #ea580c !important;
    margin-right: 4px !important;
    font-size: 16px !important;
}
body.is-checkout .mobile_content #vmMainPage #selectBoxAlert::after {
    content: ' 📍 Επιλέξτε BOX';
    display: inline-block !important;
    margin-left: 8px !important;
    padding: 2px 10px !important;
    background: #f97316 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    vertical-align: middle !important;
}
/* When alert is shown via JS (style="display:block"), keep our visual styling */
body.is-checkout .mobile_content #vmMainPage #selectBoxAlert[style*="display: block"],
body.is-checkout .mobile_content #vmMainPage #selectBoxAlert[style*="display:block"] {
    display: block !important;
}

/* Kill the gap: legacy <br> + empty paragraphs/divs between radio table and submit */
body.is-checkout .mobile_content #vmMainPage form:has(input[name="shipping_rate_id"]) br,
body.is-checkout .mobile_content #vmMainPage form:has(input[name="payment_method_id"]) br {
    display: none !important;
}
body.is-checkout .mobile_content #vmMainPage form:has(input[name="shipping_rate_id"]) p:empty,
body.is-checkout .mobile_content #vmMainPage form:has(input[name="payment_method_id"]) p:empty,
body.is-checkout .mobile_content #vmMainPage form:has(input[name="shipping_rate_id"]) div:empty,
body.is-checkout .mobile_content #vmMainPage form:has(input[name="payment_method_id"]) div:empty {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   §26 — 4-step checkout progress bar (mobile port from desktop_v2.css)
   Tagged by JS (table.v2-checkout-progress) + .v2-step-current on the
   current step td. Past steps still have anchors → blue.
   ═══════════════════════════════════════════════════════════════════ */
body.is-checkout .mobile_content #vmMainPage table.v2-checkout-progress {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    margin: 0 0 10px !important;
    padding: 2px 0 !important;
}
body.is-checkout .mobile_content #vmMainPage table.v2-checkout-progress tbody {
    display: block !important;
}
body.is-checkout .mobile_content #vmMainPage table.v2-checkout-progress tr {
    display: flex !important;
    width: 100% !important;
    counter-reset: chkstep;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
body.is-checkout .mobile_content #vmMainPage table.v2-checkout-progress td {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 1 1 0 !important;
    padding: 6px 4px !important;
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: #6b7280 !important;
    text-align: center !important;
    gap: 8px !important;
    position: relative !important;
    counter-increment: chkstep !important;
    height: auto !important;
    width: auto !important;
}
body.is-checkout .mobile_content #vmMainPage table.v2-checkout-progress td::before {
    content: counter(chkstep);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 2;
    position: relative;
}
body.is-checkout .mobile_content #vmMainPage table.v2-checkout-progress td:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 22px;
    left: calc(50% + 16px);
    right: calc(-50% + 16px);
    height: 2px;
    background: #e5e7eb;
    z-index: 1;
}
/* Past step (still has anchor) AND current step (.v2-step-current) → primary blue */
body.is-checkout .mobile_content #vmMainPage table.v2-checkout-progress td:has(a)::before,
body.is-checkout .mobile_content #vmMainPage table.v2-checkout-progress td.v2-step-current::before {
    background: var(--primary) !important;
    color: #fff !important;
}
body.is-checkout .mobile_content #vmMainPage table.v2-checkout-progress td:has(a)::after,
body.is-checkout .mobile_content #vmMainPage table.v2-checkout-progress td.v2-step-current::after {
    background: var(--primary) !important;
}
/* The <a> child INSIDE the td (past steps) — block + 100% width + center.
   ONLY the anchor, NOT the td itself (would break flex layout). */
body.is-checkout .mobile_content #vmMainPage table.v2-checkout-progress td a {
    color: var(--primary) !important;
    text-decoration: none !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    height: auto !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}
/* Color for the current-step td (text node only, no anchor) — text-color only,
   keep td's flex layout intact. */
body.is-checkout .mobile_content #vmMainPage table.v2-checkout-progress td.v2-step-current {
    color: var(--primary) !important;
}
/* Force text-align center on td + every descendant — beats legacy
   `text-align: left !important` that mobile_v2.js applies inline to every
   td (we also set inline center via JS for these tds, which wins). */
body.is-checkout .mobile_content #vmMainPage table.v2-checkout-progress td,
body.is-checkout .mobile_content #vmMainPage table.v2-checkout-progress td * {
    text-align: center !important;
}
/* Allow flex items to shrink below their content min-width so all 4 columns
   stay equal (otherwise long words like "Παραγγελίας" force wider columns). */
body.is-checkout .mobile_content #vmMainPage table.v2-checkout-progress td {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

/* ═══════════════════════════════════════════════════════════════════
   §27 — Box Now SELECTED locker details card (#v2-boxnow-card)
   Shows above ΕΠΟΜΕΝΟ when a locker is chosen. Green/success state.
   ═══════════════════════════════════════════════════════════════════ */
body.is-checkout .mobile_content #vmMainPage #v2-boxnow-card {
    width: calc(100% - 24px) !important;
    max-width: 480px !important;
    margin: 10px auto !important;
    padding: 12px 14px !important;
    background: #f0fdf4 !important;
    border: 2px solid #16a34a !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(22,163,74,.18) !important;
    box-sizing: border-box !important;
    text-align: left !important;
    line-height: 1.4 !important;
}
body.is-checkout .mobile_content #vmMainPage #v2-boxnow-card .v2-bn-head {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
}
body.is-checkout .mobile_content #vmMainPage #v2-boxnow-card .v2-bn-check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    background: #16a34a !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
}
body.is-checkout .mobile_content #vmMainPage #v2-boxnow-card .v2-bn-title {
    flex: 1 1 auto !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #166534 !important;
    text-transform: uppercase !important;
    letter-spacing: .3px !important;
}
body.is-checkout .mobile_content #vmMainPage #v2-boxnow-card .v2-bn-change {
    flex: 0 0 auto !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #166534 !important;
    background: #dcfce7 !important;
    border: 1px solid #16a34a !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background .15s ease !important;
}
body.is-checkout .mobile_content #vmMainPage #v2-boxnow-card .v2-bn-change:hover {
    background: #bbf7d0 !important;
}
body.is-checkout .mobile_content #vmMainPage #v2-boxnow-card .v2-bn-name {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #14532d !important;
    margin-left: 30px !important;
}
body.is-checkout .mobile_content #vmMainPage #v2-boxnow-card .v2-bn-name::before {
    content: '📍 ';
    margin-right: 4px !important;
}
body.is-checkout .mobile_content #vmMainPage #v2-boxnow-card .v2-bn-addr {
    font-size: 13px !important;
    color: #4b5563 !important;
    margin-left: 30px !important;
    margin-top: 2px !important;
}

/* ==================================================================
   /new-products page polish (scoped via body.is-newproducts class
   added by mobile_v2.js only on this URL — so these rules NEVER bleed
   to any other page).
   ================================================================== */

/* (1) Hide the Joomla article_separator <span> that sits between banner
   and the product grid — pure decorative spacer that adds ~18px of dead
   space on this page only. */
body.is-newproducts .mobile_content .article_separator,
body.is-newproducts .mobile_content span.article_separator {
    display: none !important;
}

/* (2) Tighten the .mobile_content_modules (which wraps the vmproductsearch
   module containing the grid) — was margin-top: 20px, way too much
   given the page already has the banner directly above. */
body.is-newproducts .mobile_content .mobile_content_modules {
    margin-top: 4px !important;
}

/* (3) Kill inner padding/margin of the moduletable wrapper that adds
   another ~20px on top before the first product row. */
body.is-newproducts .mobile_content .moduletable-no_top,
body.is-newproducts .mobile_content .moduletable-no_top > div:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==================================================================
   Product-card thumbnail sharpen — soft SVG unsharp (kernel center 1.5),
   matches desktop_v2 browse-card sharpen. SCOPED tightly so it ONLY
   applies to product card images:
     • .browseProductContainer img.browseProductImage  (categories/browse)
     • a.list_product_link > img:not(.list_badge_img)  (/new-products,
       flypage "Δείτε επίσης" / related blocks)
   Does NOT touch cart, flypage main image, order details — those use
   different image classes/wrappers. Display dimensions UNCHANGED.
   ================================================================== */
.mobile_content .browseProductContainer img.browseProductImage,
.mobile_content a.list_product_link > img:not(.list_badge_img) {
    filter: url(#v2-sharp-soft);
    will-change: filter;
}

/* Product description images — only when JS has tagged them as
   "large enough" (naturalWidth >= 150). Auto-excludes emojis, bullet
   icons, dividers, UI sprites via real bitmap size check. */
.mobile_content .v2fp-desc img.v2-sharp {
    filter: url(#v2-sharp-soft);
    will-change: filter;
}

/* (4) Pagination on this page produces ~4px overflow vs the toolbar inner
   width because we have all 10 chips visible (« ‹ 1 2 3 4 … 10 › »).
   Tighten gap + chip padding slightly so it fits without the horizontal
   scrollbar that overflow-x:auto would otherwise show. */
body.is-newproducts .mobile_content .v2-bottom-toolbar ul.pagination {
    gap: 2px !important;
    overflow-x: hidden !important;
}
body.is-newproducts .mobile_content .v2-bottom-toolbar ul.pagination a,
body.is-newproducts .mobile_content .v2-bottom-toolbar ul.pagination span {
    min-width: 28px !important;
    padding: 0 5px !important;
}