/*
Theme Name:   cybermarket — Child
Theme URI:    https://cybermarket.gr
Description:  Brand identity layer over Blocksy for cybermarket.gr.
Author:       cybermarket.gr
Author URI:   https://cybermarket.gr
Template:     blocksy
Version:      1.0.0
Text Domain:  cybermarket-child
Requires at least: 6.0
Requires PHP: 8.1
*/

/* ============================================================================
   Brand tokens — change here, propagates everywhere via CSS variables.
   Blocksy already exposes variables under :root; we override the relevant ones.
   ============================================================================ */
:root {
    /* Brand palette */
    --cm-navy:        #1a2f4d;   /* logo background colour */
    --cm-navy-deep:   #0f1d33;   /* hover / pressed states */
    --cm-navy-light:  #2d4670;   /* on-brand secondary surface */
    --cm-amber:       #f59e0b;   /* CTA / sale badge */
    --cm-amber-deep:  #d97706;
    --cm-success:     #16a34a;
    --cm-danger:      #dc2626;

    /* Neutrals */
    --cm-text:        #0f172a;
    --cm-muted:       #64748b;
    --cm-border:      #e2e8f0;
    --cm-surface:     #f8fafc;
    --cm-white:       #ffffff;

    /* Map to Blocksy palette tokens (Customizer "Color 1..8") */
    --paletteColor1: var(--cm-navy);
    --paletteColor2: var(--cm-navy-deep);
    --paletteColor3: var(--cm-text);
    --paletteColor4: var(--cm-muted);
    --paletteColor5: var(--cm-border);
    --paletteColor6: var(--cm-surface);
    --paletteColor7: var(--cm-white);
    --paletteColor8: var(--cm-amber);

    /* Typography stack — Inter has full Greek glyph coverage */
    --cm-font-stack: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ============================================================================
   Base typography — apply Inter site-wide
   ============================================================================ */
body,
.entry-content,
.wp-block-button__link {
    font-family: var(--cm-font-stack);
}

h1, h2, h3, h4, h5, h6,
.entry-title {
    font-family: var(--cm-font-stack);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cm-text);
}

/* ============================================================================
   Header — make the search bar prominent (Skroutz-style)
   ============================================================================ */
[data-header*="type-2"] [data-row="middle"] {
    background-color: var(--cm-navy);
}

[data-header] [data-id="search"] input[type="search"],
[data-header] .search-form input[type="search"] {
    border-radius: 8px;
    border: 2px solid transparent;
    padding: 12px 16px;
    font-size: 15px;
}

[data-header] [data-id="search"] input[type="search"]:focus,
[data-header] .search-form input[type="search"]:focus {
    border-color: var(--cm-amber);
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

/* Logo container — keep it crisp on the navy header */
[data-header] [data-id="logo"] img {
    max-height: 44px;
    width: auto;
}

/* ============================================================================
   Buttons / CTAs
   ============================================================================ */
.wp-block-button.is-style-fill .wp-block-button__link,
.button.alt,
.woocommerce a.button.alt,
.woocommerce-page a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background: var(--cm-amber);
    border-color: var(--cm-amber);
    color: var(--cm-navy-deep);
    font-weight: 600;
}

.wp-block-button.is-style-fill .wp-block-button__link:hover,
.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background: var(--cm-amber-deep);
    border-color: var(--cm-amber-deep);
}

.button,
.woocommerce a.button,
.woocommerce button.button {
    font-weight: 600;
    border-radius: 6px;
}

/* ============================================================================
   Product grid — denser, cleaner cards
   ============================================================================ */
.woocommerce ul.products li.product {
    background: var(--cm-white);
    border: 1px solid var(--cm-border);
    border-radius: 10px;
    padding: 14px;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.woocommerce ul.products li.product:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.woocommerce ul.products li.product .price {
    color: var(--cm-text);
    font-weight: 700;
    font-size: 18px;
}

.woocommerce ul.products li.product .price del {
    color: var(--cm-muted);
    font-weight: 400;
    font-size: 14px;
}

.woocommerce ul.products li.product .price ins {
    color: var(--cm-danger);
    text-decoration: none;
    font-weight: 700;
}

.woocommerce span.onsale {
    background: var(--cm-amber);
    color: var(--cm-navy-deep);
    font-weight: 700;
    border-radius: 4px;
}

/* ============================================================================
   Trust strip (used on homepage)
   ============================================================================ */
.cm-trust-strip {
    background: var(--cm-surface);
    padding: 32px 0;
    border-top: 1px solid var(--cm-border);
    border-bottom: 1px solid var(--cm-border);
}

.cm-trust-strip .wp-block-columns {
    margin-bottom: 0;
}

.cm-trust-strip .wp-block-column {
    text-align: center;
    color: var(--cm-text);
}

.cm-trust-strip strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
    color: var(--cm-text);
}

.cm-trust-strip span {
    color: var(--cm-muted);
    font-size: 13px;
}

/* ============================================================================
   Footer
   ============================================================================ */
/* Force the bottom row + its inner copyright element into the navy palette
   regardless of Blocksy theme_mod default colours. */
.ct-footer [data-row="bottom"],
.ct-footer-copyright {
    background: var(--cm-navy-deep) !important;
    color: var(--cm-white) !important;
}

.ct-footer-copyright {
    padding: 18px 20px;
    text-align: center;
    line-height: 1.7;
}

.ct-footer-copyright a {
    color: var(--cm-amber) !important;
    text-decoration: none;
    font-weight: 500;
    margin: 0 2px;
}

.ct-footer-copyright a:hover {
    color: var(--cm-white) !important;
    text-decoration: underline;
}

/* ============================================================================
   Hero (homepage)
   ============================================================================ */
.cm-hero {
    background: linear-gradient(135deg, var(--cm-navy) 0%, var(--cm-navy-light) 100%);
    color: var(--cm-white);
    padding: 64px 24px;
    border-radius: 14px;
    text-align: center;
}

.cm-hero h1,
.cm-hero h2 {
    color: var(--cm-white);
    font-size: clamp(28px, 4vw, 44px);
    margin: 0 0 12px;
}

.cm-hero p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    max-width: 640px;
    margin: 0 auto 24px;
}

/* ============================================================================
   GLOBAL — container, focus rings, spacing
   ============================================================================ */
:root {
    --cm-radius-sm: 6px;
    --cm-radius-md: 10px;
    --cm-radius-lg: 14px;
    --cm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --cm-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --cm-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
}

:focus-visible {
    outline: 2px solid var(--cm-amber);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Wider, breathable containers */
.ct-container,
.entry-content > *,
.wp-block-group.alignwide {
    --max-width: 1280px;
}

/* ============================================================================
   PRODUCT CARDS — extend existing rules
   ============================================================================ */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    font-size: 15px;
    font-weight: 600;
    color: var(--cm-text);
    line-height: 1.35;
    min-height: 2.7em; /* prevent jumpy grid on different title lengths */
}

.woocommerce ul.products li.product .star-rating {
    font-size: 12px;
    margin: 4px 0;
}

.woocommerce ul.products li.product .button {
    width: 100%;
    margin-top: 10px;
    text-align: center;
    background: var(--cm-amber);
    color: var(--cm-navy-deep);
    border-color: var(--cm-amber);
}

.woocommerce ul.products li.product .button:hover {
    background: var(--cm-amber-deep);
    border-color: var(--cm-amber-deep);
}

.woocommerce ul.products li.product .added_to_cart {
    display: block;
    margin-top: 6px;
    text-align: center;
    font-size: 13px;
    color: var(--cm-success);
}

.woocommerce span.onsale {
    background: var(--cm-amber);
    color: var(--cm-navy-deep);
    font-weight: 700;
    border-radius: var(--cm-radius-sm);
    padding: 4px 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    top: 12px;
    left: 12px;
    box-shadow: var(--cm-shadow-sm);
}

/* "Εξαντλημένο" badge in Greek */
.woocommerce ul.products li.product.outofstock::after {
    content: 'Εξαντλημένο';
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--cm-muted);
    color: var(--cm-white);
    padding: 4px 10px;
    border-radius: var(--cm-radius-sm);
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
}

/* ============================================================================
   SINGLE PRODUCT PAGE
   ============================================================================ */
.single-product div.product .product_title {
    font-size: clamp(22px, 3vw, 32px);
    margin-bottom: 12px;
    line-height: 1.25;
}

.single-product div.product .summary .price {
    font-size: 28px;
    font-weight: 700;
    color: var(--cm-text);
    margin: 0 0 16px;
}

.single-product div.product .summary .price del {
    color: var(--cm-muted);
    font-size: 18px;
    font-weight: 400;
    margin-right: 8px;
}

.single-product div.product .summary .price ins {
    color: var(--cm-danger);
    text-decoration: none;
    font-weight: 700;
}

/* Stock indicator */
.single-product .stock.in-stock {
    color: var(--cm-success);
    font-weight: 600;
}
.single-product .stock.in-stock::before {
    content: '✓ ';
}
.single-product .stock.out-of-stock {
    color: var(--cm-danger);
    font-weight: 600;
}

/* Add to cart button — big, brand-amber */
.single-product .summary .single_add_to_cart_button,
.single-product .summary button.alt {
    background: var(--cm-amber) !important;
    color: var(--cm-navy-deep) !important;
    border: none !important;
    padding: 14px 28px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: var(--cm-radius-md) !important;
    letter-spacing: 0.01em;
    box-shadow: var(--cm-shadow-sm);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.single-product .summary .single_add_to_cart_button:hover {
    background: var(--cm-amber-deep) !important;
    transform: translateY(-1px);
    box-shadow: var(--cm-shadow-md);
}

/* Quantity selector */
.single-product .quantity input.qty {
    border: 1.5px solid var(--cm-border);
    border-radius: var(--cm-radius-sm);
    padding: 10px;
    width: 70px;
    text-align: center;
    font-weight: 600;
}

/* Variation swatches (Woo Brands / Variation Swatches plugin compat) */
.single-product table.variations select {
    border: 1.5px solid var(--cm-border);
    border-radius: var(--cm-radius-sm);
    padding: 8px 12px;
    font-size: 14px;
}

/* Tabs (Description / Reviews / Additional info) */
.single-product .woocommerce-tabs ul.tabs {
    border-bottom: 2px solid var(--cm-border);
    padding: 0;
    margin-bottom: 24px;
}

.single-product .woocommerce-tabs ul.tabs li {
    background: transparent;
    border: none;
    margin: 0 4px 0 0;
    padding: 0;
}

.single-product .woocommerce-tabs ul.tabs li a {
    padding: 12px 20px;
    color: var(--cm-muted);
    font-weight: 600;
    text-decoration: none;
    display: block;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
    color: var(--cm-navy);
    border-bottom-color: var(--cm-amber);
}

/* Related / upsell */
.single-product .related,
.single-product .upsells {
    margin-top: 64px;
}

.single-product .related h2,
.single-product .upsells h2 {
    font-size: 24px;
    margin-bottom: 24px;
    text-align: center;
}

/* ============================================================================
   CART PAGE
   ============================================================================ */
.woocommerce-cart table.shop_table {
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-md);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.woocommerce-cart table.shop_table thead {
    background: var(--cm-surface);
}

.woocommerce-cart table.shop_table thead th {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--cm-muted);
    padding: 14px;
}

.woocommerce-cart table.shop_table td {
    padding: 16px 14px;
    vertical-align: middle;
}

.woocommerce-cart .cart_totals {
    background: var(--cm-surface);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-md);
    padding: 24px;
}

.woocommerce-cart .cart_totals h2 {
    margin-top: 0;
    font-size: 20px;
}

.woocommerce-cart .checkout-button {
    width: 100%;
    padding: 14px !important;
    font-size: 16px !important;
}

.woocommerce-cart .coupon input[type="text"] {
    border: 1.5px solid var(--cm-border);
    border-radius: var(--cm-radius-sm);
    padding: 10px 14px;
}

/* ============================================================================
   CHECKOUT PAGE
   ============================================================================ */
.woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 32px;
}

@media (max-width: 900px) {
    .woocommerce-checkout form.checkout {
        grid-template-columns: 1fr;
    }
}

.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
    margin: 0;
}

.woocommerce-checkout #order_review {
    background: var(--cm-surface);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-md);
    padding: 24px;
    position: sticky;
    top: 24px;
    align-self: start;
}

.woocommerce-checkout #order_review_heading {
    font-size: 18px;
    margin: 0 0 16px;
    color: var(--cm-text);
}

.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
    border: 1.5px solid var(--cm-border) !important;
    border-radius: var(--cm-radius-sm) !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
    border-color: var(--cm-amber) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.woocommerce-checkout #place_order {
    width: 100%;
    padding: 16px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-top: 16px;
}

/* ============================================================================
   MY ACCOUNT
   ============================================================================ */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--cm-surface);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-md);
    overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 12px 16px;
    color: var(--cm-text);
    border-bottom: 1px solid var(--cm-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child a {
    border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--cm-navy);
    color: var(--cm-white);
}

/* ============================================================================
   CART DRAWER / mini-cart (Blocksy)
   ============================================================================ */
#woo-cart-panel .ct-cart-actions a.checkout {
    background: var(--cm-amber);
    color: var(--cm-navy-deep);
}

.ct-header-cart [data-shortcut="cart-items-count"] {
    background: var(--cm-amber);
    color: var(--cm-navy-deep);
    font-weight: 700;
}

/* ============================================================================
   NOTICES (success / error / info)
   ============================================================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
    border-radius: var(--cm-radius-md);
    border-left-width: 4px;
    padding: 14px 18px;
    font-size: 14px;
}

.woocommerce-message {
    background: #ecfdf5;
    border-left-color: var(--cm-success);
    color: #064e3b;
}

.woocommerce-info {
    background: #eff6ff;
    border-left-color: var(--cm-navy);
    color: var(--cm-navy);
}

.woocommerce-error {
    background: #fef2f2;
    border-left-color: var(--cm-danger);
    color: #7f1d1d;
}

/* ============================================================================
   BLOCK PATTERNS
   ============================================================================ */

/* FAQ accordion (uses core/details block) */
.cm-faq details {
    background: var(--cm-white);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-md);
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: box-shadow 0.15s ease;
}
.cm-faq details[open] {
    box-shadow: var(--cm-shadow-sm);
    border-color: var(--cm-amber);
}
.cm-faq details > summary {
    font-weight: 600;
    color: var(--cm-text);
    cursor: pointer;
    padding-right: 24px;
    list-style: none;
    position: relative;
}
.cm-faq details > summary::-webkit-details-marker { display: none; }
.cm-faq details > summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cm-amber);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}
.cm-faq details[open] > summary::after { content: '−'; }
.cm-faq details > *:not(summary) {
    margin-top: 12px;
    color: var(--cm-muted);
    line-height: 1.65;
}

/* Newsletter signup */
.cm-newsletter {
    background: var(--cm-navy);
    color: var(--cm-white);
    padding: 48px 24px;
    border-radius: var(--cm-radius-lg);
    text-align: center;
}
.cm-newsletter h2 {
    color: var(--cm-white);
    margin: 0 0 8px;
    font-size: clamp(22px, 3vw, 28px);
}
.cm-newsletter p {
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 24px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* Brand logos strip (placeholder) */
.cm-brand-strip {
    padding: 32px 0;
    border-top: 1px solid var(--cm-border);
}
.cm-brand-strip .wp-block-column {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cm-muted);
    font-weight: 600;
    font-size: 14px;
    opacity: 0.6;
}

/* Category showcase */
.cm-category-showcase .wp-block-cover {
    border-radius: var(--cm-radius-md);
    overflow: hidden;
    min-height: 180px;
}
.cm-category-showcase .wp-block-cover__inner-container {
    text-align: center;
}
.cm-category-showcase h3 {
    margin: 0;
    font-size: 18px;
    color: var(--cm-white);
}

/* ============================================================================
   MOBILE — Greek text often wraps long; tighten line heights
   ============================================================================ */
@media (max-width: 768px) {
    .cm-hero {
        padding: 40px 20px;
    }

    .woocommerce ul.products[class*="columns-"] li.product {
        width: calc(50% - 8px) !important;
        margin-right: 16px !important;
    }

    .woocommerce ul.products[class*="columns-"] li.product:nth-child(2n) {
        margin-right: 0 !important;
    }

    .single-product .summary .single_add_to_cart_button {
        width: 100% !important;
        margin-top: 12px;
    }

    .ct-footer-copyright {
        font-size: 13px;
        line-height: 1.6;
    }
}

/* ============================================================================
   STICKY MOBILE ADD-TO-CART (single product)
   Appears once the original add-to-cart scrolls out of view. Mobile only.
   Powered by assets/js/cybermarket.js → IntersectionObserver.
   ============================================================================ */
.cm-sticky-cart {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--cm-white);
    border-top: 1px solid var(--cm-border);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
    transform: translateY(100%);
    transition: transform 0.25s ease;
    z-index: 999;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
}

.cm-sticky-cart.is-visible {
    transform: translateY(0);
}

.cm-sticky-cart__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}

.cm-sticky-cart__info {
    flex: 1;
    min-width: 0;
}

.cm-sticky-cart__title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--cm-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cm-sticky-cart__price {
    display: block;
    font-size: 14px;
    color: var(--cm-text);
    font-weight: 700;
    margin-top: 2px;
}

.cm-sticky-cart__price del { color: var(--cm-muted); font-weight: 400; margin-right: 4px; font-size: 12px; }
.cm-sticky-cart__price ins { color: var(--cm-danger); text-decoration: none; }

.cm-sticky-cart__btn {
    background: var(--cm-amber);
    color: var(--cm-navy-deep);
    border: none;
    padding: 12px 20px;
    border-radius: var(--cm-radius-md);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s ease;
}

.cm-sticky-cart__btn:hover {
    background: var(--cm-amber-deep);
}

@media (min-width: 769px) {
    /* Desktop hides it — the sticky in-page summary is enough */
    .cm-sticky-cart { display: none !important; }
}

/* ============================================================================
   MEGAMENU (CSS-only, opt-in via .has-megamenu class on a nav item)
   To use: add class "has-megamenu" to a parent menu item in Appearance → Menus.
   Its child <ul> becomes a full-width dropdown on hover (desktop) / tap (mobile).
   ============================================================================ */
@media (min-width: 1024px) {
    .ct-header .menu-item.has-megamenu {
        position: static;
    }

    .ct-header .menu-item.has-megamenu > .sub-menu {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        width: 100%;
        max-width: 1280px;
        margin: 0 auto;
        background: var(--cm-white);
        border-top: 3px solid var(--cm-amber);
        box-shadow: var(--cm-shadow-lg);
        padding: 28px 32px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px 32px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .ct-header .menu-item.has-megamenu:hover > .sub-menu,
    .ct-header .menu-item.has-megamenu:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .ct-header .menu-item.has-megamenu > .sub-menu > li {
        display: block;
    }

    .ct-header .menu-item.has-megamenu > .sub-menu > li > a {
        font-weight: 700;
        color: var(--cm-text);
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 0 0 8px;
        border-bottom: 1px solid var(--cm-border);
        margin-bottom: 8px;
        display: block;
    }

    .ct-header .menu-item.has-megamenu .sub-menu .sub-menu {
        position: static;
        display: block;
        background: transparent;
        box-shadow: none;
        padding: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .ct-header .menu-item.has-megamenu .sub-menu .sub-menu li a {
        padding: 6px 0;
        font-size: 14px;
        color: var(--cm-muted);
        text-transform: none;
        font-weight: 400;
    }

    .ct-header .menu-item.has-megamenu .sub-menu .sub-menu li a:hover {
        color: var(--cm-amber);
    }
}

/* ============================================================================
   ELASTICPRESS AUTOSUGGEST DROPDOWN
   Styles EP's autosuggest results panel under the header search.
   ============================================================================ */
.ep-autosuggest-container {
    position: relative;
}

.ep-autosuggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cm-white);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-md);
    box-shadow: var(--cm-shadow-lg);
    margin-top: 6px;
    overflow: hidden;
    z-index: 999;
}

.ep-autosuggest ul {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    max-height: 480px;
    overflow-y: auto;
}

.ep-autosuggest li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--cm-surface);
}

.ep-autosuggest li:last-child { border-bottom: none; }

.ep-autosuggest li a,
.ep-autosuggest li .autosuggest-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: var(--cm-text);
    text-decoration: none;
    transition: background 0.1s ease;
}

.ep-autosuggest li a:hover,
.ep-autosuggest li.selected a,
.ep-autosuggest li.selected .autosuggest-link {
    background: var(--cm-surface);
    color: var(--cm-navy);
}

.ep-autosuggest li img,
.ep-autosuggest li .ep-autosuggest__thumbnail {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--cm-radius-sm);
    flex-shrink: 0;
}

.ep-autosuggest li strong,
.ep-autosuggest li .ep-autosuggest__title {
    font-weight: 600;
    font-size: 14px;
    color: var(--cm-text);
    flex: 1;
}

.ep-autosuggest li .ep-autosuggest__price,
.ep-autosuggest li .price {
    font-weight: 700;
    color: var(--cm-amber-deep);
    font-size: 13px;
    margin-left: auto;
}

/* Highlight matched term (EP wraps it in <strong>) */
.ep-autosuggest li mark,
.ep-autosuggest li strong em {
    background: rgba(245, 158, 11, 0.18);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
    font-style: normal;
}

/* ============================================================================
   PAGE TITLE HIDE — pages whose content provides its own H1 / opening heading.
   Add page IDs as needed (find via: wp post list --post_type=page).
   Current IDs:  14 Σχετικά  ·  15 Επικοινωνία  ·  home page (any ID via body.home)
   ============================================================================ */
body.home .ct-page-title-wrapper,
body.home .entry-header,
body.home .page-header,
body.home h1.entry-title,
body.home h1.page-title,
body.page-id-14 .ct-page-title-wrapper,
body.page-id-14 .entry-header,
body.page-id-14 .page-header,
body.page-id-14 h1.entry-title,
body.page-id-14 h1.page-title,
body.page-id-15 .ct-page-title-wrapper,
body.page-id-15 .entry-header,
body.page-id-15 .page-header,
body.page-id-15 h1.entry-title,
body.page-id-15 h1.page-title {
    display: none !important;
}

/* ============================================================================
   SCROLL-TO-TOP BUTTON (created on-the-fly by cybermarket.js)
   Appears once the user has scrolled > 600px from the top.
   ============================================================================ */
.cm-scroll-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cm-navy);
    color: var(--cm-white);
    border: none;
    box-shadow: var(--cm-shadow-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.1s ease;
    z-index: 998;
    pointer-events: none;
}

.cm-scroll-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cm-scroll-top:hover {
    background: var(--cm-amber);
    color: var(--cm-navy-deep);
}

.cm-scroll-top svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
}

/* Push it up so it doesn't collide with the sticky mobile cart */
body.single-product .cm-scroll-top {
    bottom: 92px;
}

@media (max-width: 768px) {
    .cm-scroll-top { right: 14px; bottom: 14px; width: 40px; height: 40px; }
    body.single-product .cm-scroll-top { bottom: 80px; }
}

/* ============================================================================
   BREADCRUMBS
   ============================================================================ */
.woocommerce-breadcrumb,
.ct-breadcrumbs,
nav[aria-label="Breadcrumb"] {
    font-size: 13px;
    color: var(--cm-muted);
    margin: 0 0 16px;
    padding: 8px 0;
}

.woocommerce-breadcrumb a,
.ct-breadcrumbs a {
    color: var(--cm-muted);
    text-decoration: none;
    transition: color 0.1s ease;
}

.woocommerce-breadcrumb a:hover,
.ct-breadcrumbs a:hover {
    color: var(--cm-navy);
    text-decoration: underline;
}

.woocommerce-breadcrumb .separator,
.ct-breadcrumbs .separator {
    margin: 0 6px;
    color: var(--cm-border);
}

/* ============================================================================
   404 + SEARCH-NO-RESULTS
   ============================================================================ */
body.error404 .entry-content,
body.search-no-results .entry-content {
    text-align: center;
    padding: 64px 24px;
    max-width: 600px;
    margin: 0 auto;
}

body.error404 .entry-title,
body.search-no-results .entry-title {
    font-size: clamp(36px, 6vw, 64px);
    margin-bottom: 16px;
    color: var(--cm-navy);
}

body.error404 .entry-title::before {
    content: '404';
    display: block;
    font-size: clamp(80px, 14vw, 160px);
    font-weight: 800;
    color: var(--cm-amber);
    line-height: 1;
    margin-bottom: 16px;
    letter-spacing: -0.04em;
}

body.error404 .entry-content > p,
body.search-no-results .entry-content > p {
    font-size: 18px;
    color: var(--cm-muted);
    margin-bottom: 24px;
}

body.error404 .search-form,
body.search-no-results .search-form {
    max-width: 480px;
    margin: 0 auto;
}

/* ============================================================================
   CART DRAWER (Blocksy mini-cart) polish
   ============================================================================ */
#woo-cart-panel .ct-cart-content {
    padding: 20px;
}

#woo-cart-panel .ct-cart-product {
    padding: 12px;
    border-radius: var(--cm-radius-sm);
    margin-bottom: 8px;
    transition: background 0.1s ease;
}

#woo-cart-panel .ct-cart-product:hover {
    background: var(--cm-surface);
}

#woo-cart-panel .ct-cart-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--cm-muted);
}

#woo-cart-panel .ct-cart-empty::before {
    content: '🛒';
    display: block;
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.4;
}

/* ============================================================================
   QUICK VIEW MODAL (cybermarket.js → initQuickView)
   ============================================================================ */
.cm-qv-trigger {
    position: absolute;
    bottom: 56px;
    left: 50%;
    transform: translate(-50%, 8px);
    background: var(--cm-navy);
    color: var(--cm-white);
    border: none;
    padding: 8px 14px;
    border-radius: var(--cm-radius-sm);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.1s ease;
    z-index: 3;
    white-space: nowrap;
}

.woocommerce ul.products li.product:hover .cm-qv-trigger {
    opacity: 1;
    transform: translate(-50%, 0);
}

.cm-qv-trigger:hover { background: var(--cm-amber); color: var(--cm-navy-deep); }

@media (max-width: 768px) { .cm-qv-trigger { display: none; } } /* hover-only feature */

.cm-qv-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cm-qv-modal.is-open { display: flex; }

.cm-qv-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
}

.cm-qv-dialog {
    position: relative;
    background: var(--cm-white);
    border-radius: var(--cm-radius-lg);
    box-shadow: var(--cm-shadow-lg);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cm-qv-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--cm-muted);
    font-size: 28px;
    cursor: pointer;
    z-index: 2;
    border-radius: 50%;
    line-height: 1;
}
.cm-qv-close:hover { color: var(--cm-text); background: var(--cm-surface); }

.cm-qv-body { padding: 32px; overflow-y: auto; }
.cm-qv-loading { text-align: center; color: var(--cm-muted); padding: 40px; }

.cm-qv-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 768px) {
    .cm-qv-grid { grid-template-columns: 1fr; }
    .cm-qv-body { padding: 20px; }
}

.cm-qv-img {
    width: 100%;
    height: auto;
    border-radius: var(--cm-radius-md);
    background: var(--cm-surface);
}

.cm-qv-body .summary.entry-summary { margin: 0; padding: 0; }
.cm-qv-body .product_title { font-size: 22px; margin: 0 0 12px; }

.cm-qv-link { margin-top: 20px; text-align: center; }
.cm-qv-link a { color: var(--cm-navy); font-weight: 600; text-decoration: none; }
.cm-qv-link a:hover { color: var(--cm-amber); }

/* ============================================================================
   RECENTLY VIEWED (server-rendered shortcode container — JS only tracks IDs)
   ============================================================================ */
.cm-recently-viewed {
    margin: 48px 0;
}
.cm-recently-viewed h3 {
    font-size: 20px;
    margin: 0 0 16px;
    color: var(--cm-text);
}

/* ============================================================================
   LOADING SKELETONS (during AJAX cart updates etc.)
   WC adds `.processing` class to elements during AJAX.
   ============================================================================ */
.woocommerce .processing,
.woocommerce a.button.loading {
    opacity: 0.5;
    position: relative;
    pointer-events: none;
}

.woocommerce .processing::after,
.woocommerce a.button.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2.5px solid var(--cm-border);
    border-top-color: var(--cm-amber);
    border-radius: 50%;
    animation: cm-spin 0.6s linear infinite;
}

@keyframes cm-spin { to { transform: rotate(360deg); } }

/* Card-style skeleton for product cards during page transitions */
.cm-skeleton {
    background: linear-gradient(90deg, var(--cm-surface) 25%, #e9eef5 50%, var(--cm-surface) 75%);
    background-size: 200% 100%;
    animation: cm-shimmer 1.2s ease-in-out infinite;
    border-radius: var(--cm-radius-sm);
    color: transparent;
    user-select: none;
}

@keyframes cm-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ============================================================================
   MOBILE HAMBURGER MENU — polish Blocksy's defaults
   ============================================================================ */
@media (max-width: 999px) {
    /* The trigger button — make it amber and more clickable */
    .ct-header [data-id="trigger"] button,
    .ct-header .ct-toggle-dropdown-mobile {
        background: var(--cm-navy) !important;
        color: var(--cm-white) !important;
        border-radius: var(--cm-radius-sm);
        width: 44px;
        height: 44px;
    }

    /* Slide-in panel background = brand surface */
    .ct-panel-content,
    [data-panel].active .ct-panel-content {
        background: var(--cm-white);
    }

    /* Menu items — bigger touch targets */
    .ct-panel-content .menu-item a {
        padding: 14px 20px !important;
        font-size: 16px;
        border-bottom: 1px solid var(--cm-border);
        color: var(--cm-text);
    }

    .ct-panel-content .menu-item a:hover,
    .ct-panel-content .menu-item.current-menu-item > a {
        background: var(--cm-surface);
        color: var(--cm-navy);
    }

    /* Backdrop overlay tint */
    [data-panel-overlay] {
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(2px);
    }
}

/* ============================================================================
   BRAND LOGOS STRIP (manufacturer / partner logos)
   Block pattern registered in functions.php
   ============================================================================ */
.cm-brand-strip {
    padding: 40px 24px;
    border-top: 1px solid var(--cm-border);
    border-bottom: 1px solid var(--cm-border);
    background: var(--cm-surface);
}
.cm-brand-strip__title {
    text-align: center;
    color: var(--cm-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 20px;
}
.cm-brand-strip .wp-block-columns { margin: 0; align-items: center; }
.cm-brand-strip .wp-block-column {
    text-align: center;
    color: var(--cm-muted);
    font-weight: 700;
    font-size: 14px;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}
.cm-brand-strip .wp-block-column:hover { opacity: 1; }

/* ============================================================================
   LIVE CHAT SLOT (placeholder — replace `<!-- chat widget here -->`
   in the body close hook below with actual Tawk.to / Crisp / Intercom snippet)
   ============================================================================ */
.cm-chat-slot {
    position: fixed;
    right: 24px;
    bottom: 80px;          /* above scroll-top */
    z-index: 997;
    display: none;          /* hidden until a real widget is wired in */
}

body.has-chat-widget .cm-chat-slot { display: block; }

/* When the chat slot IS visible, shift scroll-top up */
body.has-chat-widget .cm-scroll-top { bottom: 140px; }
body.has-chat-widget.single-product .cm-scroll-top { bottom: 200px; }