/*
Theme Name: Hub Child
Theme URI: http://hub.liquid-themes.com/
Author: Liquid Themes
Author URI: https://themeforest.net/user/liquidthemes
Template: hub
Description: Smart, Powerful and Unlimited Customizable WordPress Theme.
Version: 1.2.9
License: GNU General Public License
License URI: license.txt
Text Domain: hub-child
Updated: 2026-07-14 — header/menu treatment moved wholesale to nav-glass.css + nav-glass.js
         (transparent-at-top frosted bar, blog-hero legibility, mobile menu motion all live there)
Tags: responsive, retina, rtl-language-support, blog, portfolio, custom-colors, live-editor
*/

/* ==========================================================================
   CAROUSEL - Equal Height Products
   Force all carousel items to match the tallest item's height.

   `min-height`, never `height`. Flickity derives the viewport height from the
   tallest CELL, so a cell must not derive its own height from the viewport --
   `height: 100%` makes the two definitions circular and both settle on zero.
   Measured on /marketing/search-engine-advertising/ before this fix: viewport
   0px, .ld-sp 60px, the section reserving 40px of page height while its
   absolutely-positioned cells painted their 303px product images straight over
   the footer. `min-height: 100%` floors a cell at the viewport height without
   replacing its content height, which is exactly what Hub's own equal-cells
   rule does (`.flickity-equal-cells .flickity-slider > * { min-height: 100% }`
   in theme.min.css). After: viewport 479.328px, section 519px, seven cells at
   a matched 479px, nothing overflowing.

   For the same reason there is no `min-height: 0` here. It was in the original
   alongside `height: 100%`, and it is the one declaration that would undo the
   floor these rules exist to set.
   ========================================================================== */

.lqd-prods-carousel .flickity-slider {
    height: 100% !important;
}

/* Flickity positions cells absolutely and owns their offsets; only the height
   cap is ours to relax. Pinning top/bottom fought that positioning.

   The cell is a flex column, not a block, and its inner wrapper grows into it.
   A percentage min-height cannot resolve against a block whose height is auto,
   so the chain below stopped at the content: a card with a one-line title sat
   24px shorter than a two-line neighbour in the same row, its price row
   floating above the others (measured at 1024px, 2026-09-26). */
.lqd-prods-carousel .carousel-item {
    height: auto !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.lqd-prods-carousel .carousel-item-inner {
    min-height: 100% !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.lqd-prods-carousel .carousel-item-content {
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    width: 100% !important;
}

/* Initialised carousels only. Hub starts a carousel lazily (near the viewport,
   after its images load); before that the cards are a plain list carrying
   Bootstrap's col-md-4. Forcing width:100% on them there made every row flash
   as stacked full-width cards until Flickity took over. */
.lqd-prods-carousel .carousel-item-content > li,
.lqd-prods-carousel .flickity-enabled li.lqd-prod-item,
.lqd-prods-carousel .flickity-enabled li.product {
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    width: 100% !important;
}

.lqd-prods-carousel .ld-sp {
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.lqd-prods-carousel .ld-sp .ld-sp-img {
    flex-shrink: 0 !important;
}

/* ==========================================================================
   PRODUCT INFO - Title under the image, Price + Button pinned to the bottom
   The info column grows to fill the equal-height card and the price row takes
   the slack above itself, so a one-line title sits right under the image and
   every card's price lines up along the bottom of the row (2026-09-26).
   ========================================================================== */

.woocommerce .ld-sp .ld-sp-info {
    display: flex !important;
    flex-flow: column nowrap !important;
    flex-grow: 1 !important;
    margin-top: 0 !important;
    padding: 0 8px;
}

/* Title row - full width */
.woocommerce .ld-sp .ld-sp-title-row {
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* Price row - flex with button on right, divided from the title */
.woocommerce .ld-sp .ld-sp-price-row {
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 16px;
    border-top: 1px solid #f0f0f3;
}

.woocommerce .ld-sp .ld-sp-price-wrap {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.woocommerce .ld-sp .ld-sp-price-row > .lqd-atc-wrapper {
    flex: 0 0 auto !important;
    margin-left: 10px !important;
}

/* ==========================================================================
   ADD TO CART BUTTON - Pill, Orange #ff8201, white text
   Sized to sit beside the card price's 26px amount (it was a 10px pill next
   to it). Same size on phones — only the word changes to "Add".
   ========================================================================== */

a.lqd-atc-btn,
.woocommerce a.lqd-atc-btn,
.woocommerce .lqd-atc-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    background-color: #ff8201 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-radius: 50px !important;
    border: none !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    box-shadow: 0 6px 14px -6px rgba(255, 130, 1, 0.6);
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}

a.lqd-atc-btn:hover,
.woocommerce a.lqd-atc-btn:hover {
    background-color: #e67300 !important;
    color: #fff !important;
    transform: translateY(-1px);
}

a.lqd-atc-btn:focus-visible,
.woocommerce a.lqd-atc-btn:focus-visible {
    outline: 2px solid #ff8201 !important;
    outline-offset: 3px;
}

/* WooCommerce marks the button while the AJAX add is in flight. */
a.lqd-atc-btn.loading,
.woocommerce a.lqd-atc-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Text: Desktop "Add to Cart", Mobile "Add" */
.lqd-atc-text-mobile {
    display: none !important;
}

.lqd-atc-text-desktop {
    display: inline !important;
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media screen and (max-width: 767px) {
    /* Price row stays flex on mobile */
    .woocommerce .ld-sp .ld-sp-price-row {
        display: flex !important;
        flex-flow: row nowrap !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
    }

    .woocommerce .ld-sp .ld-sp-price-row > .lqd-atc-wrapper {
        flex: 0 0 auto !important;
        margin-left: 10px !important;
    }

    /* Text swap */
    .lqd-atc-text-mobile {
        display: inline !important;
    }

    .lqd-atc-text-desktop {
        display: none !important;
    }
}

/* ==========================================================================
   ARTICLES LISTING (page 22633) — round post-card images to match blog posts
   Blog-post inline images use a 13px radius; Hub post cards ship at
   `border-radius-4` (4px, barely visible). Round the card + its image wrapper
   to a "slightly rounded" 12px on the Articles page only. `.lqd-lp` already has
   overflow:hidden, so clipping the image to the rounded card is enough; the
   direct img rule covers any card style without overflow.
   ========================================================================== */
.page-id-22633 .lqd-lp,
.page-id-22633 .lqd-lp .lqd-lp-img,
.page-id-22633 .lqd-lp .lqd-lp-img figure,
.page-id-22633 .lqd-lp img.wp-post-image {
    border-radius: 12px !important;
    overflow: hidden;
}

/* ==========================================================================
   RELATED POSTS ("You may also like") — contain the cards, keep the bar full-bleed
   Hub's blog-single CSS forces `.related-posts` to `max-width:none` and its
   `.container` to `width:100%`, so the background bar AND the card images stretch
   edge-to-edge. Owner wants the bar full-width but the images to line up with the
   article content column above. Restore the theme's standard 1170px container
   (1140px inner after 15px padding) so the cards align exactly with the article
   (Elementor boxed content = 1140px, x=150→1290 at desktop); the bar is untouched.
   Then round the card images 12px to match the Articles-page cards.
   ========================================================================== */
.single-post .related-posts > .container {
    max-width: 1170px !important;
    width: 100% !important;
    margin-inline-start: auto !important;
    margin-inline-end: auto !important;
    padding-inline-start: 15px !important;
    padding-inline-end: 15px !important;
}
.single-post .related-posts .lqd-lp,
.single-post .related-posts .lqd-lp .lqd-lp-img,
.single-post .related-posts .lqd-lp .lqd-lp-img figure,
.single-post .related-posts .lqd-lp img.wp-post-image {
    border-radius: 12px !important;
    overflow: hidden;
}

/* ==========================================================================
   BLOG CATEGORY / TAG ARCHIVE PAGES — constrain to site width + round cards
   The archive post grid renders edge-to-edge (measured 1440px full width).
   Constrain the grid's container to the site's standard 1170px (centered) and
   round the lqd-lp cards 12px to match the Articles page and related-posts.
   ========================================================================== */
body.archive .content .container {
    max-width: 1170px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}
body.archive .lqd-lp,
body.archive .lqd-lp .lqd-lp-img,
body.archive .lqd-lp .lqd-lp-img figure,
body.archive .lqd-lp img.wp-post-image {
    border-radius: 12px !important;
    overflow: hidden;
}