.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-94727 .elementor-element.elementor-element-eecd9df img{width:100%;height:800px;}.elementor-94727 .elementor-element.elementor-element-3850567{margin-top:50px;margin-bottom:50px;}.elementor-widget-call-to-action .elementor-cta__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-call-to-action .elementor-cta__description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-call-to-action .elementor-cta__button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-call-to-action .elementor-ribbon-inner{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-94727 .elementor-element.elementor-element-b58abda .elementor-cta .elementor-cta__bg, .elementor-94727 .elementor-element.elementor-element-b58abda .elementor-cta .elementor-cta__bg-overlay{transition-duration:1500ms;}.elementor-94727 .elementor-element.elementor-element-b58abda .elementor-cta__content{text-align:start;}.elementor-94727 .elementor-element.elementor-element-b58abda .elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-94727 .elementor-element.elementor-element-b58abda .elementor-view-stacked .elementor-icon svg{stroke:var( --e-global-color-primary );}.elementor-94727 .elementor-element.elementor-element-b58abda .elementor-view-framed .elementor-icon, .elementor-94727 .elementor-element.elementor-element-b58abda .elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-94727 .elementor-element.elementor-element-b58abda .elementor-view-framed .elementor-icon, .elementor-94727 .elementor-element.elementor-element-b58abda .elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-94727 .elementor-element.elementor-element-b58abda .elementor-icon{font-size:26px;}.elementor-bc-flex-widget .elementor-94727 .elementor-element.elementor-element-f859259.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-94727 .elementor-element.elementor-element-f859259.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-94727 .elementor-element.elementor-element-f859259.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-94727 .elementor-element.elementor-element-f859259 > .elementor-element-populated{text-align:center;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-94727 .elementor-element.elementor-element-17719d1{width:auto;max-width:auto;}.elementor-94727 .elementor-element.elementor-element-17719d1 .elementor-icon-wrapper{text-align:center;}.elementor-94727 .elementor-element.elementor-element-17719d1 .elementor-icon{font-size:26px;}.elementor-94727 .elementor-element.elementor-element-17719d1 .elementor-icon svg{height:26px;}.elementor-94727 .elementor-element.elementor-element-14c38d4{width:auto;max-width:auto;align-self:flex-start;}.elementor-94727 .elementor-element.elementor-element-14c38d4 .elementor-icon-wrapper{text-align:center;}.elementor-94727 .elementor-element.elementor-element-14c38d4 .elementor-icon{font-size:26px;}.elementor-94727 .elementor-element.elementor-element-14c38d4 .elementor-icon svg{height:26px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-94727 .elementor-element.elementor-element-1e325b6{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 8px;text-align:center;}.elementor-94727 .elementor-element.elementor-element-1e325b6 .elementor-heading-title{font-family:"Brandon Grotesque", Sans-serif;font-size:22px;font-weight:600;}.elementor-94727 .elementor-element.elementor-element-8ce2da2{width:auto;max-width:auto;}.elementor-94727 .elementor-element.elementor-element-8ce2da2 .elementor-icon-wrapper{text-align:center;}.elementor-94727 .elementor-element.elementor-element-8ce2da2 .elementor-icon{font-size:26px;}.elementor-94727 .elementor-element.elementor-element-8ce2da2 .elementor-icon svg{height:26px;}.elementor-94727 .elementor-element.elementor-element-bc64681 .elementor-cta .elementor-cta__bg, .elementor-94727 .elementor-element.elementor-element-bc64681 .elementor-cta .elementor-cta__bg-overlay{transition-duration:1500ms;}.elementor-94727 .elementor-element.elementor-element-bc64681 .elementor-cta__content{text-align:end;}.elementor-94727 .elementor-element.elementor-element-bc64681 .elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-94727 .elementor-element.elementor-element-bc64681 .elementor-view-stacked .elementor-icon svg{stroke:var( --e-global-color-primary );}.elementor-94727 .elementor-element.elementor-element-bc64681 .elementor-view-framed .elementor-icon, .elementor-94727 .elementor-element.elementor-element-bc64681 .elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-94727 .elementor-element.elementor-element-bc64681 .elementor-view-framed .elementor-icon, .elementor-94727 .elementor-element.elementor-element-bc64681 .elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-94727 .elementor-element.elementor-element-bc64681 .elementor-icon{font-size:26px;}.elementor-94727 .elementor-element.elementor-element-bc64681 .elementor-cta__title{color:var( --e-global-color-primary );}@media(min-width:768px){.elementor-94727 .elementor-element.elementor-element-5510499{width:33%;}.elementor-94727 .elementor-element.elementor-element-f859259{width:33%;}.elementor-94727 .elementor-element.elementor-element-4518d11{width:34%;}}@media(max-width:767px){.elementor-94727 .elementor-element.elementor-element-eecd9df img{height:300px;object-fit:cover;}.elementor-94727 .elementor-element.elementor-element-f859259.elementor-column > .elementor-widget-wrap{justify-content:space-between;}}/* Start custom CSS for shortcode, class: .elementor-element-96ba8e8 *//* ========================================= */
/* 1. GRID LAYOUT & OUTER CONTAINER */
/* ========================================= */

/* Container for the overall grid layout */
.product-cards-grid {
    display: grid;
    /* Forces exactly 3 equal columns */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; /* Space between cards */
    padding: 20px;
}

/* NEW: Overall container for each product card block (Brand, Price, Name, and Flip Card) */
.product-cards-grid .product-card-container {
    display: flex;
    flex-direction: column; 
    /* Ensures the card maintains its integrity within the grid cell */
    position: relative; 
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    overflow: hidden; 
}

/* ========================================= */
/* 2. PRODUCT DETAILS ABOVE CARD (Brand, Name, Price) */
/* ========================================= */

.product-details-above-card {
    /* Styles matching the light, hanging block in your reference image */
    background-color: #f7f5f0; /* Light background for the header block */
    padding: 15px 15px 10px;
    text-align: left;
    display: flex;
    flex-wrap: wrap; 
    align-items: flex-start;
    justify-content: space-between;
    z-index: 2; /* Ensure it visually overlaps the card top */
    border-radius: 10px 10px 0 0; 
    flex-shrink: 0; /* Prevents this section from shrinking when space is tight */
}

/* Brand Name (Top Left) */
.product-details-above-card .product-brand {
    font-weight: 800;
    font-family: "Brandon Grotesque", Sans-serif;
    color: #333;
    font-size: 1em;
    flex-grow: 1; /* Pushes price to the right */
}

/* Price (Top Right) */
.product-details-above-card .product-price {
    font-weight: normal;
    color: #555;
    font-size: 1em;
    text-align: right;
}

/* Product Name (Below Brand/Price) */
.product-details-above-card .product-name-above {
    width: 100%; /* Forces product name to its own line */
    margin: 5px 0 0 0; 
    line-height: 1.2;
    font-family: "Brandon Grotesque", Sans-serif;
    font-size: 1.13em;
    font-weight: 400;
    color: #333;
}


/* ======================================= */
/* 3. FLIP CARD STRUCTURE & 3D MECHANICS (YOUR ORIGINAL CODE, SLIGHTLY ADJUSTED) */
/* ======================================= */

/* Ensure the flip-card sizes fill the grid cells */
.product-cards-grid .product-card-container .flip-card {
    width: 100%;
    height: 490px; /* Using your specified height */
    margin: 0; 
    background-color: transparent;
    border: none; /* Removed the 1px border here */
    perspective: 5000px;
    flex-grow: 1;
    /* Only round the bottom corners */
    border-radius: 0 0 10px 10px; 
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}

/* FLIP TRIGGER */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none; /* Removed border */
    backface-visibility: hidden;
    border-radius: inherit;
}

/* --- Front Side Styling (Image) --- */
.flip-card-front {
    background-color: #E6E6E6;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
}

.flip-card-front img{
    /* CRITICAL: Ensures image fills the flip area completely */
    width: 100%;
    height: 100%; 
    object-fit: contain;
    max-height: 100%; /* Keep max-height for safety */
    border-radius: inherit;
}

/* Key 5: Initially rotates the back side 180 degrees so it faces away */
.flip-card-back {
    transform: rotateY(180deg);
    border-radius: inherit;
}


/* ======================================= */
/* 4. BACK SIDE DESIGN & ALIGNMENT */
/* ======================================= */

.flip-card-back {
    background-color: white;
    color: black;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.content-wrapper {
    padding: 0 30px; 
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}

.product-title {
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: 800;
    margin: 0;
    line-height: 1.1;
    padding-top: 20px;
    padding-bottom: 20px;
    flex-shrink: 0; 
}

.separator {
    border: none;
    border-top: 1px solid black;
    margin: 10px 0 20px 0;
    width: 100%;
    flex-shrink: 0;
}

.key-points {
    margin-top: auto; 
    margin-bottom: auto; 
}

.reason-header {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 5px;
}

.key-points p {
    font-size: 16px;
    font-weight: 400;
    margin: 10px 0;
    line-height: 1.5;
}

/* SHOP NOW CTA Bar (Bottom Black Bar) */
.cta-bar {
    background-color: black;
    width: 100%;
    text-align: center;
    padding: 15px 0;
    flex-shrink: 0;
}

.cta-link {
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    display: block;
}


/* ========================================= */
/* 5. RESPONSIVE BREAKPOINT */
/* ========================================= */
@media (max-width: 991px) {
    .product-cards-grid {
        /* Switch to 2 columns on tablets */
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}
@media (max-width: 767px) {
    .product-cards-grid {
        /* On small screens, switch back to a single column */
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .flip-card {
        height: 400px;
    }
}/* End custom CSS */
/* Start custom CSS for call-to-action, class: .elementor-element-b58abda */.elementor-cta--skin-classic .elementor-cta__content{
    background-color: unset;
}

.elementor-cta__icon{
    width: unset;
    margin-right: 3px;
    margin-left:3px;
}

.elementor-cta__content-item:not(:last-child){
    margin-bottom: 0px;
}

.elementor-cta__content-item{
    width: unset;
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-f859259 */.ba25-nav-container > div{
    width: 100%;
}/* End custom CSS */
/* Start custom CSS for call-to-action, class: .elementor-element-bc64681 */.elementor-cta--skin-classic .elementor-cta__content{
    background-color: unset;
}

.elementor-cta__icon{
    width: unset;
    margin-right: 3px;
    margin-left:3px;
}

.elementor-cta__content-item:not(:last-child){
    margin-bottom: 0px;
}

.ba25-right-nav .elementor-cta__content{
    flex-direction: row-reverse;
}

.elementor-cta__content-item{
    width: unset;
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-3850567 */.elementor-94727 .elementor-element.elementor-element-3850567{
    display: flex;
    flex-direction: row;
    width: 100%;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Brandon Grotesque';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://grazia.sg/wp-content/uploads/2023/02/brandon_med-webfont.woff2') format('woff2'),
		url('https://grazia.sg/wp-content/uploads/2023/02/brandon_med-webfont.woff') format('woff');
}
@font-face {
	font-family: 'Brandon Grotesque';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://grazia.sg/wp-content/uploads/2023/02/brandon_reg-webfont.woff2') format('woff2'),
		url('https://grazia.sg/wp-content/uploads/2023/02/brandon_reg-webfont.woff') format('woff');
}
@font-face {
	font-family: 'Brandon Grotesque';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://grazia.sg/wp-content/uploads/2023/02/brandon_light-webfont.woff2') format('woff2'),
		url('https://grazia.sg/wp-content/uploads/2023/02/brandon_light-webfont.woff') format('woff');
}
/* End Custom Fonts CSS */