/*
Theme Name: Blocksy Child
Theme URI:
Description: Child theme for Blocksy
Author: Web Design Group OÜ
Author URI:
Template: blocksy
Version: 1.0.0
*/

/* Bold variation attribute labels (Size, Colour etc.) */
.single-product .variations th.label label {
    font-weight: bold;
}

/* Unselected variation swatch border — 10% black */
.single-product [data-swatches-type=button] .ct-swatch {
    --swatch-button-border-color: rgba(0, 0, 0, 0.1);
}

/* ============================================================
   SHOP — Product card hover shadow
   ============================================================ */
li.product {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    border-radius: 8px;
    padding: 10px !important;
}

li.product:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

li.product .woocommerce-loop-product__title,
li.product .price,
li.product .ct-woo-card-extra,
li.product .button,
li.product .star-rating {
    text-align: center !important;
}

li.product .price {
    display: block;
}

li.product .button {
    display: block;
    margin: 0 auto;
}

li.product .ct-woo-card-actions {
    justify-content: center !important;
}

/* ============================================================
   CART — Row separators 10% black
   ============================================================ */
.wc-block-cart-items__row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.wc-block-cart-items td {
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.wc-block-components-totals-item {
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.wp-block-woocommerce-cart-order-summary-totals-block {
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* ============================================================
   SHOP — Filter: active category same blue as hover
   ============================================================ */
.ct-filter-item a.active .ct-filter-label {
    color: #305fca !important;
}

/* ============================================================
   CHECKOUT — Form inputs: solid visible border
   ============================================================ */
.wc-block-components-text-input input[type=text],
.wc-block-components-text-input input[type=email],
.wc-block-components-text-input input[type=tel],
.wc-block-components-text-input input[type=password],
.wc-block-components-text-input input[type=number],
.wc-block-components-form .wc-block-components-text-input input {
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 6px !important;
    background-color: #fff !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-form .wc-block-components-text-input input:focus {
    border-color: rgba(0, 0, 0, 0.5) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(5, 39, 113, 0.1) !important;
}

/* ============================================================
   CHECKOUT — Order Summary card styling
   ============================================================ */
.wp-block-woocommerce-checkout-order-summary-block {
    background-color: #f7f8fa !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 24px !important;
}

/* ============================================================
   CHECKOUT — Section headings separator
   ============================================================ */
.wc-block-checkout .wc-block-components-checkout-step__heading,
.wc-block-checkout h2,
.wc-block-checkout h3 {
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.07);
}

/* ============================================================
   CHECKOUT — Step sections spacing
   ============================================================ */
.wc-block-checkout .wc-block-components-checkout-step {
    padding: 28px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.wc-block-checkout .wc-block-components-checkout-step:last-child {
    border-bottom: none;
}

/* ============================================================
   MEGA MENU — EN/ET/RU: width + centering for Blocksy sub-menu
   ============================================================ */
.menu-item-8760 > .sub-menu,
.menu-item-8728 > .sub-menu,
.menu-item-8733 > .sub-menu {
    width: 1040px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* ============================================================
   COLOR FILTER — Show more / Show less
   ============================================================ */
.ct-filter-widget.b24-collapsed .ct-filter-item:nth-child(n+11) {
    display: none !important;
}
.b24-show-more-btn {
    cursor: pointer;
    color: var(--theme-link-initial-color, #2D5FA8);
    font-size: 13px;
    margin-top: 8px;
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    font-family: inherit;
}
.b24-show-more-btn:hover {
    opacity: 0.7;
}


/* ============================================================
   FILTER HEADERS — Clear selection button
   ============================================================ */
h3.widget-title {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}
.b24-clear-filter {
    font-size: 12px;
    font-weight: 400;
    color: #888 !important;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0.8;
}
.b24-clear-filter:hover {
    color: #2D5FA8 !important;
    opacity: 1;
}

/* ============================================================
   BREADCRUMBS — replace yellow with brand blue
   ============================================================ */
.woocommerce-breadcrumb a,
.woocommerce-breadcrumb,
nav.woocommerce-breadcrumb span,
.ct-breadcrumbs a,
.ct-breadcrumbs span.ct-breadcrumb-current {
    color: #305fca !important;
}


/* ============================================================
   MEGA MENU — fix is-layout-constrained max-width inside hook
   ============================================================ */
#menu-item-8728 .entry-content.is-layout-constrained > *,
#menu-item-8760 .entry-content.is-layout-constrained > *,
#menu-item-8733 .entry-content.is-layout-constrained > * {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ============================================================
   MEGA MENU — hook item must span all 4 grid columns
   The sub-menu uses repeat(4,1fr) grid by default (Blocksy setting).
   The single hook item (li.menu-item-8729 / 8734 / etc.) must span
   all columns to fill the full 1040px width.
   Also reset the li padding — Elementor containers have their own.
   ============================================================ */
.menu-item-8728 > .sub-menu > li,
.menu-item-8760 > .sub-menu > li,
.menu-item-8733 > .sub-menu > li {
    grid-column: 1 / -1 !important;
    padding: 0 !important;
}

/* Force mobile header (hamburger) when desktop menu overflows.
   Blocksy's default mobile breakpoint is 999.98px; raised here to
   1199.98px so 'more' dropdown never appears on narrower laptops. */
@media (max-width: 1199.98px) {
    header [data-device="desktop"] { display: none !important; }
    header [data-device="mobile"]  { display: flex !important; }
}

/* Fix: mobile header row was 343px in a 390px viewport (left-aligned,
   right side empty). Cause: [data-device=mobile] is display:flex with a
   single child .ct-sticky-container that defaulted to intrinsic width.
   Stretch the child to fill so the blue middle row reaches the right edge. */
@media (max-width: 1199.98px) {
    #header [data-device="mobile"] > .ct-sticky-container {
        flex: 1;
        width: 100%;
    }
}

/* My Account: paint the inactive nav-link background so the yellow
   text stays readable. Active item keeps its darker navy background
   defined by the theme. */
.woocommerce-MyAccount-navigation li:not(.is-active) > a {
    background-color: #305fca;
}

/* ============================================================
   Offcanvas menu opened empty on iPad / short landscape
   We force the mobile header (hamburger) up to 1199.98px (see above),
   but Blocksy's OFF-canvas content device still follows Blocksy's own
   breakpoint (desktop >=1000px). So on iPad landscape (>=1000px) the
   hamburger shows (child theme) yet the offcanvas renders the EMPTY
   desktop container, while the menu lives in the mobile container.
   Keep the two in sync: show the mobile offcanvas content whenever we
   force the mobile header, and hide the empty desktop one.
   ============================================================ */
@media (max-width: 1199.98px) {
    #offcanvas [data-device="desktop"] { display: none !important; }
    #offcanvas [data-device="mobile"]  { display: flex !important; }
    /* Bound the panel to the visual (dynamic) viewport so the iOS toolbar
       doesn't overlap the bottom, and make the menu content a constrained
       scroll container so items below the fold are reachable. */
    #offcanvas .ct-panel-inner {
        height: 100dvh;
        max-height: 100dvh;
    }
    #offcanvas .ct-panel-content {
        overflow: hidden;
        min-height: 0;
    }
    #offcanvas .ct-panel-content-inner {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}