.elementor-11995 .elementor-element.elementor-element-8d1e380{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11995 .elementor-element.elementor-element-250d901{text-align:center;}.elementor-11995 .elementor-element.elementor-element-250d901 .elementor-heading-title{font-family:"Archivo", Sans-serif;font-size:32px;font-weight:500;color:#000000;}.elementor-11995 .elementor-element.elementor-element-289582a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:36px;--padding-bottom:56px;--padding-left:36px;--padding-right:36px;}@media(max-width:768px){.elementor-11995 .elementor-element.elementor-element-250d901 .elementor-heading-title{font-size:30px;}}/* Start custom CSS for container, class: .elementor-element-8d1e380 *//* =========================================================
   Canvape Shop – full width + EQUAL-HEIGHT compact cards
   Paste into: Appearance > Customize > Additional CSS
   Hard-refresh (Ctrl+Shift+R) + clear cache/optimizer after
   ========================================================= */

/* ---- 1. Full-width content, safe side padding (stops right crop) ---- */
.wd-page-content .container,
.content-layout-wrapper.container,
main#main-content.container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
    box-sizing: border-box !important;
}
.elementor-1239 .elementor-element.elementor-element-20bf0ad,
.elementor-1239 .elementor-element.elementor-element-6e35ee3 {
    max-width: 100% !important;
    width: 100% !important;
}


/* ---- 2. Centered "Products" heading on top ---- */
.elementor-1239 .wd-woo-page-title,
.elementor-1239 .wd-woo-page-title .title {
    text-align: center !important;
    width: 100% !important;
}
.elementor-1239 .wd-woo-page-title .title {
    font-size: 30px !important;
    font-weight: 700 !important;
    margin: 0 auto 10px !important;
}
.elementor-1239 .elementor-element-7e0e964 {
    --width: 100% !important;
    width: 100% !important;
}


/* ---- 3. Grid: even columns, small gap, no overflow ---- */
.products.wd-products {
    display: grid !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    align-items: stretch !important;      /* <-- all cards in a row share height */
}
.products.wd-products.wd-grid-g {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
@media (min-width: 1200px) {
    .products.wd-products.grid-columns-4 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media (min-width: 769px) and (max-width: 1199px) {
    .products.wd-products.grid-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 481px) and (max-width: 768px) {
    .products.wd-products.grid-columns-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 480px) {
    .products.wd-products.grid-columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.products.wd-products .wd-product.wd-col {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
}


/* ---- 4. EQUAL-HEIGHT cards ---- */
.products-bordered-grid .wd-product {
    border: 1px solid #ececec !important;
    border-radius: 10px;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;              /* fill the equalized row height */
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
.products-bordered-grid .wd-product:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.wd-product .wd-product-wrapper {
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}


/* ---- 5. FIXED image height = every image box identical ---- */
.wd-product .wd-loop-prod-thumb {
    height: 230px !important;             /* <-- change this to make cards taller/shorter */
    aspect-ratio: auto !important;        /* override the earlier ratio rule */
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 6px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
}
.wd-product .wd-loop-prod-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;       /* 'cover' = fill & crop, 'contain' = show whole product */
}


/* ---- 6. Tight, centered title + price ---- */
.wd-product .wd-loop-prod-title {
    margin: 4px 0 2px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    min-height: 34px !important;          /* keeps 1-line & 2-line titles aligned */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wd-product .wd-loop-prod-price,
.wd-product .price {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
/* price row pinned to bottom so all cards line up */
.wd-product .wd-bd933d8a {
    margin-top: auto !important;
    padding-top: 4px !important;
    gap: 6px !important;
}


/* ---- 7. Title block spacing ---- */
.elementor-1239 .elementor-element.elementor-element-20bf0ad {
    --margin-bottom: 25px;
}/* End custom CSS */