/**

 * MishaDort Native Gutenberg Blocks & Theme Stylesheet

 * Isolated custom CSS for Pass 2 Gutenberg Blocks.

 * Uses dedicated 'mishadort-*' classes to guarantee zero conflicts with legacy CWS/Bellaria styles.

 */



/* ==========================================================================

   1. Typography & Global Helpers

   ========================================================================== */

.mishadort-font-heading,

.mishadort-heading,

h1.mishadort-heading,

h2.mishadort-heading,

h3.mishadort-heading {

    font-family: 'Merienda One', cursive, sans-serif !important;

    color: #4b4342;

    text-align: center;

    margin-top: 0;

    margin-bottom: 15px;

    font-weight: 400;

}



.mishadort-heading.is-white {

    color: #ffffff !important;

}



/* ==========================================================================

   2. Wave Cropped Sections (.mishadort-wave-section)

   ========================================================================== */

.mishadort-wave-section,

.wp-block-group.mishadort-wave-section {

    position: relative !important;

    width: 100% !important;

    box-sizing: border-box !important;

    z-index: 2 !important;

}



.mishadort-wave-section.crop-style_1 {

    margin-top: -100px !important;

    padding-top: 70px !important;

    padding-bottom: 190px !important;

}



.mishadort-wave-section.crop-style-dark {

    padding-top: 80px !important;

    padding-bottom: 150px !important;

}



.mishadort-wave-section .mishadort-wave-inner {

    position: relative;

    z-index: 3;

    max-width: 1200px;

    margin: 0 auto;

    box-sizing: border-box;

}



/* ==========================================================================

   3. Scalloped Cutout Notch Buttons (.mishadort-cutout-button)

   ========================================================================== */

.wp-block-button.is-style-cutout-figure {

    background: transparent !important;

    border: none !important;

    padding: 0 !important;

}



/* ==========================================================================

   4. Services Cards with 500x500 Floral SVG Frame (.mishadort-service-card)

   ========================================================================== */

.mishadort-service-card {

    text-align: center;

    padding: 15px 10px;

    box-sizing: border-box;

    transition: transform 0.3s ease;

}



.mishadort-service-card .mishadort-service-media {

    position: relative;

    width: 220px;

    height: 220px;

    margin: 0 auto 18px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.mishadort-service-card .mishadort-service-frame {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    z-index: 2;

    pointer-events: none;

}



.mishadort-service-card .mishadort-service-frame svg.mishadort-frame-svg {

    width: 100%;

    height: 100%;

    stroke-width: 12px;

    fill: transparent;

    stroke: #5fcac7;

    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);

}



.mishadort-service-card.is-white-frame .mishadort-service-frame svg.mishadort-frame-svg {

    stroke: #ffffff;

}



.mishadort-service-card:hover .mishadort-service-frame svg.mishadort-frame-svg {

    fill: #5fcac7 !important;

}



.mishadort-service-card.is-white-frame:hover .mishadort-service-frame svg.mishadort-frame-svg {

    fill: #ffffff !important;

}



.mishadort-service-card .mishadort-service-img {

    width: 170px;

    height: 170px;

    border-radius: 50%;

    overflow: hidden;

    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    justify-content: center;

}



.mishadort-service-card .mishadort-service-img img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    transition: transform 0.4s ease;

    display: block;

}



.mishadort-service-card:hover .mishadort-service-img img {

    transform: scale(1.12);

}



.mishadort-service-card .mishadort-service-title {

    font-family: 'Merienda One', cursive, sans-serif;

    font-size: 20px;

    color: #4b4342;

    margin: 10px 0 8px;

    transition: color 0.3s ease;

}



.mishadort-service-card:hover .mishadort-service-title {

    color: #5fcac7;

}



.mishadort-service-card .mishadort-service-divider {

    margin: 0 auto 10px;

    display: block;

}



.mishadort-service-card .mishadort-service-divider img {

    width: 55px;

    height: auto;

    display: block;

    margin: 0 auto;

}



.mishadort-service-card .mishadort-service-desc {

    color: #4b4342;

    font-family: 'Comfortaa', cursive, sans-serif;

    font-size: 15px;

    line-height: 24px;

    margin: 0;

}



.mishadort-service-card .mishadort-service-desc.is-white {

    color: #ffffff;

}



/* ==========================================================================

   5. Touch & Mouse-Drag Carousel (.mishadort-carousel)

   ========================================================================== */

.mishadort-carousel {

    position: relative;

    overflow: hidden;

    width: 100%;

    user-select: none;

    cursor: grab;

    padding: 10px 0 25px;

}



.mishadort-carousel:active {

    cursor: grabbing;

}



.mishadort-carousel .mishadort-carousel-track {

    display: flex;

    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);

    will-change: transform;

    touch-action: pan-y;

}



.mishadort-carousel .mishadort-carousel-item {

    flex: 0 0 25%;

    max-width: 25%;

    box-sizing: border-box;

    padding: 0 12px;

}



@media (max-width: 991px) {

    .mishadort-carousel .mishadort-carousel-item {

        flex: 0 0 33.333%;

        max-width: 33.333%;

    }

}



@media (max-width: 767px) {

    .mishadort-carousel .mishadort-carousel-item {

        flex: 0 0 50%;

        max-width: 50%;

    }

}



@media (max-width: 575px) {

    .mishadort-carousel .mishadort-carousel-item {

        flex: 0 0 100%;

        max-width: 100%;

    }

}



/* ==========================================================================

   6. Pricing Tables (.mishadort-pricing-table)

   ========================================================================== */

.mishadort-pricing-table {

    border: 2px solid #5fcac7;

    border-radius: 12px;

    background: #ffffff;

    text-align: center;

    margin-top: 70px;

    position: relative;

    overflow: visible;

    box-sizing: border-box;

    padding-bottom: 25px;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.mishadort-pricing-table:hover {

    transform: translateY(-5px);

    box-shadow: 0 12px 35px rgba(0,0,0,0.08);

}



.mishadort-pricing-table.is-highlighted {

    border-color: #ff91a4 !important;

}



.mishadort-pricing-table .mishadort-pricing-header {

    position: relative;

    padding-top: 35px;

    padding-bottom: 20px;

}



.mishadort-pricing-table .mishadort-pricing-svg-bg {

    position: absolute;

    top: -45px;

    left: 0;

    width: 100%;

    height: 110px;

    z-index: 1;

    pointer-events: none;

}



.mishadort-pricing-table .mishadort-pricing-svg-bg svg {

    width: 100%;

    height: 100%;

    fill: #5fcac7;

}



.mishadort-pricing-table.is-highlighted .mishadort-pricing-svg-bg svg {

    fill: #ff91a4 !important;

}



.mishadort-pricing-table .mishadort-pricing-img {

    position: relative;

    z-index: 2;

    margin-top: -65px;

    margin-bottom: 10px;

}



.mishadort-pricing-table .mishadort-pricing-img img {

    width: 110px;

    height: auto;

    display: block;

    margin: 0 auto;

}



.mishadort-pricing-table .mishadort-pricing-title {

    position: relative;

    z-index: 2;

    font-family: 'Merienda One', cursive, sans-serif;

    font-size: 20px;

    color: #4b4342;

    margin: 0 0 10px;

}



.mishadort-pricing-table .mishadort-pricing-price {

    margin: 15px 0 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 4px;

}



.mishadort-pricing-table .mishadort-pricing-price .price-num {

    font-family: 'Merienda One', cursive, sans-serif;

    font-size: 58px;

    line-height: 1;

    color: #4b4342;

}



.mishadort-pricing-table .mishadort-pricing-price .price-currency {

    font-size: 24px;

    color: #4b4342;

    vertical-align: top;

    margin-top: -15px;

}



.mishadort-pricing-table .mishadort-pricing-interval {

    background: #ff91a4;

    color: #ffffff;

    font-size: 13px;

    font-family: 'Comfortaa', cursive, sans-serif;

    font-weight: 600;

    text-transform: uppercase;

    padding: 3px 18px;

    border-radius: 15px;

    display: inline-block;

    margin-bottom: 18px;

}



.mishadort-pricing-table .mishadort-pricing-features {

    padding: 0 20px;

    margin-bottom: 25px;

}



.mishadort-pricing-table .mishadort-pricing-features p {

    font-family: 'Comfortaa', cursive, sans-serif;

    font-size: 15px;

    line-height: 26px;

    color: #4b4342;

    margin: 6px 0;

    border-bottom: 1px dashed rgba(0,0,0,0.06);

    padding-bottom: 6px;

}



.mishadort-pricing-table .mishadort-pricing-features p:last-child {

    border-bottom: none;

}



/* ==========================================================================

   7. Testimonials (.mishadort-testimonial-item)

   ========================================================================== */

.mishadort-testimonial-item {

    text-align: center;

    padding: 20px 15px;

    box-sizing: border-box;

}



.mishadort-testimonial-item .mishadort-testimonial-avatar-row {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-bottom: 18px;

}



.mishadort-testimonial-item .mishadort-testimonial-avatar {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    overflow: hidden;

    border: 4px solid #ffffff;

    box-shadow: 0 4px 15px rgba(0,0,0,0.08);

}



.mishadort-testimonial-item .mishadort-testimonial-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.mishadort-testimonial-item .mishadort-testimonial-quote {

    font-family: 'Comfortaa', cursive, sans-serif;

    font-size: 16px;

    line-height: 28px;

    color: #ffffff;

    font-style: italic;

    margin: 0 0 12px;

}



.mishadort-testimonial-item .mishadort-testimonial-author {

    font-family: 'Merienda One', cursive, sans-serif;

    font-size: 20px;

    color: #4b4342;

    margin: 0;

}



/* ==========================================================================

   8. Flourish Dividers (.mishadort-divider)

   ========================================================================== */

.mishadort-divider {

    text-align: center;

    margin: 15px auto 25px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}



.mishadort-divider img {

    display: inline-block;

    max-height: 40px;

    width: auto;

    object-fit: contain;

}



/* ==========================================================================

   9. Features 4-Column Row (.mishadort-features-row)

   ========================================================================== */

.mishadort-feature-item {

    text-align: center;

    padding: 10px 15px;

    box-sizing: border-box;

}



.mishadort-feature-item .mishadort-feature-icon {

    font-size: 42px;

    color: #ffffff;

    margin-bottom: 12px;

    display: inline-block;

}



.mishadort-feature-item .mishadort-feature-title {

    font-family: 'Merienda One', cursive, sans-serif;

    font-size: 20px;

    color: #ffffff;

    margin: 0 0 8px;

}



.mishadort-feature-item .mishadort-feature-desc {

    font-family: 'Comfortaa', cursive, sans-serif;

    font-size: 15px;

    line-height: 24px;

    color: #ffffff;

    margin: 0;

}



/* ==========================================================================

   7. Layout & Container Normalization (1170px Authentic Bellaria Grid)

   ========================================================================== */

.wp-site-blocks {

    padding: 0 !important;

}



.wp-block-post-content.is-layout-constrained,

.entry-content.wp-block-post-content {

    max-width: 100% !important;

    padding: 0 !important;

}



.bellaria_layout_container {

    width: 1170px !important;

    max-width: 1170px !important;

    margin: 0 auto !important;

    padding: 0 !important;

    box-sizing: border-box !important;

}



#page > .bellaria_layout_container {

    width: 1170px !important;

    max-width: 1170px !important;

    margin: 0 auto !important;

}



.wpb-content-wrapper {

    width: 100% !important;

    max-width: 100% !important;

}



/* ==========================================================================

   8. Multi-Column Grid Layouts & Column Widths

   ========================================================================== */

.wp-block-columns.mishadort-row-nested,

.wp-block-columns.mishadort-columns-row,

.wp-block-columns.vc_row,

.wp-block-columns {

    display: block !important;

    width: calc(100% + 30px) !important;

    max-width: calc(100% + 30px) !important;

    margin-left: -15px !important;

    margin-right: -15px !important;

    box-sizing: border-box !important;

    gap: 0 !important;

}



.mishadort-row-inner,

.mishadort-row-nested .mishadort-row-inner-nested,

.wp-block-columns.mishadort-row-nested > .mishadort-row-inner-nested,

.wp-block-columns > .mishadort-row-inner {

    display: flex !important;

    flex-wrap: wrap !important;

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    gap: 0 !important;

}



.mishadort-col-1-1,

.vc_col-sm-12,

.wp-block-column.mishadort-col-1-1 {

    flex: 0 0 100% !important;

    width: 100% !important;

    max-width: 100% !important;

    padding-left: 15px !important;

    padding-right: 15px !important;

    box-sizing: border-box !important;

    margin: 0 !important;

}



.mishadort-col-1-2,

.vc_col-sm-6,

.wp-block-column.mishadort-col-1-2 {

    flex: 0 0 50% !important;

    width: 50% !important;

    max-width: 50% !important;

    padding-left: 15px !important;

    padding-right: 15px !important;

    box-sizing: border-box !important;

    margin: 0 !important;

}



.mishadort-col-1-3,

.vc_col-sm-4,

.wp-block-column.mishadort-col-1-3 {

    flex: 0 0 33.333% !important;

    width: 33.333% !important;

    max-width: 33.333% !important;

    padding-left: 15px !important;

    padding-right: 15px !important;

    box-sizing: border-box !important;

    margin: 0 !important;

}



.mishadort-col-2-3,

.vc_col-sm-8,

.wp-block-column.mishadort-col-2-3 {

    flex: 0 0 66.666% !important;

    width: 66.666% !important;

    max-width: 66.666% !important;

    padding-left: 15px !important;

    padding-right: 15px !important;

    box-sizing: border-box !important;

    margin: 0 !important;

}



.mishadort-col-1-4,

.vc_col-sm-3,

.mishadort-row-nested .mishadort-col-1-4,

.wp-block-columns.mishadort-row-nested .mishadort-col-1-4,

.wp-block-column.mishadort-col-1-4 {

    flex: 0 0 25% !important;

    width: 25% !important;

    max-width: 25% !important;

    padding-left: 15px !important;

    padding-right: 15px !important;

    box-sizing: border-box !important;

    margin: 0 !important;

}



/* Bootstrap/WPBakery `lg` classes only apply from 1200px up. Unscoped, these

   offset and narrowed columns at every viewport - at 1024 the pricing/contacts

   rows sat at 83.3% with an 8.3% indent instead of full width. */

@media (min-width: 1200px) {

    .mishadort-col-lg-offset-1,

    .vc_col-lg-offset-1 {

        margin-left: 8.33333333% !important;

    }



    .mishadort-col-lg-10,

    .vc_col-lg-10 {

        flex: 0 0 83.33333333% !important;

        width: 83.33333333% !important;

        max-width: 83.33333333% !important;

    }

}



/* ==========================================================================

   9. Portfolio Grid Layout & Hover Animation

   ========================================================================== */

.posts_grid .bellaria_wrapper,

.cwsportfolio_posts_grid .bellaria_wrapper {

    overflow: visible !important;

    width: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;

}



/* Only on the stretched full_width_style layouts does the reference inset the

   wrapper by 15px (the grid then pulls back out with its own -15px margins).

   Applying it everywhere made the cells on the ordinary grids 30px too narrow. */

.cwsportfolio_posts_grid.full_width_style .bellaria_wrapper {

    margin: 0 15px !important;

}



/* Content Elements page (Post 740) embeds the portfolio grid as a compact,

   clipped widget; the standalone /portfolio-masonry/ pages need it visible

   so Isotope-positioned items aren't cut off. Same shared class, different

   context, hence the page-scoped selector rather than a global rule. */

.page-id-740 .cwsportfolio_posts_grid {

    overflow: hidden !important;

}



.cwsportfolio_posts_grid .bellaria_grid.isotope,

.cwsportfolio_posts_grid .bellaria_grid,

.posts_grid .bellaria_grid {

    position: relative !important;

    margin-left: -15px !important;

    margin-right: -15px !important;

    box-sizing: border-box !important;

    display: block !important;

}



.cwsportfolio_posts_grid .bellaria_grid:after,

.posts_grid .bellaria_grid:after {

    content: "" !important;

    display: table !important;

    clear: both !important;

}



.posts_grid_4 .item.portfolio_item_grid_post {

    width: 25% !important;

    padding: 10px !important;

    margin-bottom: 0 !important;

    box-sizing: border-box !important;

    overflow: visible !important;

}



/* Per-item masonry size variants.

   The reference theme renders portfolio cells as a square base unit with

   double-width / double-height spans (300x300, 300x600, 600x600). The span

   is already emitted in PHP as data-masonry-col / data-masonry-line from

   post meta; these rules are what actually consume it.

   aspect-ratio is used rather than a padding-top hack so the cell height

   resolves from CSS immediately - Isotope measures item heights at layout

   time and must not have to wait on image loading. */

.posts_grid_4 .item.portfolio_item_grid_post {

    aspect-ratio: 1 / 1 !important;            /* 1x1 - square base cell */

}



.posts_grid_4 .item.portfolio_item_grid_post[data-masonry-col="2"] {

    width: 50% !important;

}



.posts_grid_4 .item.portfolio_item_grid_post[data-masonry-col="1"][data-masonry-line="2"] {

    aspect-ratio: 1 / 2 !important;            /* 1x2 - tall */

}



.posts_grid_4 .item.portfolio_item_grid_post[data-masonry-col="2"][data-masonry-line="1"] {

    aspect-ratio: 2 / 1 !important;            /* 2x1 - wide */

}



.posts_grid_4 .item.portfolio_item_grid_post[data-masonry-col="2"][data-masonry-line="2"] {

    aspect-ratio: 1 / 1 !important;            /* 2x2 - big square */

}



.posts_grid_4 .item.portfolio_item_grid_post .item_content {

    position: relative !important;

    overflow: hidden !important;

    border-radius: 10px !important;

    width: 100% !important;

    height: 100% !important;

}



.posts_grid_4 .item.portfolio_item_grid_post .item_content .post_media {

    height: 100% !important;

}



.posts_grid_4 .item.portfolio_item_grid_post .item_content .pic {

    width: 100% !important;

    height: 100% !important;

    overflow: hidden !important;

    border-radius: 10px !important;

}



.posts_grid_4 .item.portfolio_item_grid_post .item_content img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    display: block !important;

    border-radius: 10px !important;

    transition: transform 0.7s ease !important;

}



.posts_grid_4 .item.portfolio_item_grid_post:hover .item_content img {

    transform: scale(1.08) !important;

}



.posts_grid_4 .item.portfolio_item_grid_post .cwsportfolio_content_wrap {

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    width: 100% !important;

    height: 100% !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

    z-index: 2 !important;

    opacity: 0 !important;

    transition: all 0.5s ease !important;

    border-radius: 0 !important;

}



.posts_grid_4 .item.portfolio_item_grid_post:hover .cwsportfolio_content_wrap {

    opacity: 1 !important;

}



.posts_grid_4 .item.portfolio_item_grid_post .cwsportfolio_content_wrap .links.area {

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    width: 100% !important;

    height: 100% !important;

    z-index: 1 !important;

}



.posts_grid_4 .item.portfolio_item_grid_post .cwsportfolio_content_wrap .hover-effect {

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    width: 100% !important;

    height: 100% !important;

    z-index: 0 !important;

    pointer-events: none !important;

    border-radius: 20px !important;

    overflow: hidden !important;

}



.posts_grid_4 .item.portfolio_item_grid_post .cwsportfolio_content_wrap .hover-effect svg {

    width: 100% !important;

    height: 100% !important;

    max-width: 100% !important;

    max-height: 100% !important;

    transform: scale(1.1) !important;

    transition: transform 0.5s ease !important;

}



.posts_grid_4 .item.portfolio_item_grid_post:hover .cwsportfolio_content_wrap .hover-effect svg {

    transform: scale(1) !important;

}



.posts_grid_4 .item.portfolio_item_grid_post .cwsportfolio_content_wrap .cwsportfolio_post_title {

    position: relative !important;

    z-index: 3 !important;

    margin: 0 0 5px 0 !important;

    /* Reference pads by 15% of the cell, not a fixed 42px - wide masonry cells

       get a proportionally wider inset. content-box so the padding sits

       outside the text width, matching the reference box model. */

    /* border-box: the wrap is a fixed-width flex container, so a content-box

       h3 plus 15% side padding overflows it and squeezes the title onto two

       lines. The 15% itself is right - the reference insets wide masonry

       cells proportionally rather than by a fixed 42px. */

    box-sizing: border-box !important;

    padding: 0 15% 10px !important;

    text-align: center !important;

    color: #4b4342 !important;

    font-size: 24px !important;

}



.posts_grid_4 .item.portfolio_item_grid_post .cwsportfolio_post_title a {

    color: #4b4342 !important;

    text-decoration: none !important;

    font-family: 'Merienda One', cursive !important;

}



/* ==========================================================================

   10. Pricing Plan & Authentic Scalloped Cutout Buttons

   ========================================================================== */

.bellaria_pricing_plan.highlighted {

    border-color: #ff91a4 !important;

}



.bellaria_pricing_plan .pricing_highlighted {

    position: absolute !important;

    z-index: 5 !important;

    top: -15px !important;

    right: -15px !important;

    width: 78px !important;

    height: 78px !important;

    text-align: center !important;

}



.bellaria_pricing_plan .pricing_highlighted svg {

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    width: 100% !important;

    height: 100% !important;

    z-index: -1 !important;

}



.bellaria_pricing_plan .pricing_highlighted h5 {

    margin: 0 !important;

    line-height: 78px !important;

    font-size: 16px !important;

    font-weight: 700 !important;

    color: #5fcac7 !important;

    font-family: 'Merienda One', cursive !important;

    position: relative !important;

    z-index: 1 !important;

}



.bellaria_pricing_plan .pricing_plan_button {

    padding: 12px 20px 15px 20px !important;

    text-align: center !important;

    box-sizing: border-box !important;

}



.bellaria_button_wrapper {

    display: block !important;

    margin: 10px 0 !important;

    text-align: center !important;

}



.bellaria_button_wrapper.aligncenter {

    text-align: center !important;

}



.bellaria_button_wrapper.alignleft {

    text-align: left !important;

}



.bellaria_button_wrapper.alignright {

    text-align: right !important;

}



.bellaria_button.figure {

    max-width: 100% !important;

    box-sizing: border-box !important;

}



/* ==========================================================================

   11. Content Elements: Tabs, Accordions, Message Boxes

   ========================================================================== */

.bellaria_msg_box {

    position: relative !important;

    padding: 10px 65px 10px 80px !important;

    border: 3px solid #5fcac7 !important;

    border-radius: 40px !important;

    margin-bottom: 30px !important;

    background: transparent !important;

    box-sizing: border-box !important;

}



.bellaria_msg_box.info {

    border-color: #41b6e2 !important;

}



.bellaria_msg_box.warn {

    border-color: #ffc000 !important;

}



.bellaria_msg_box.success {

    border-color: #46cf93 !important;

}



.bellaria_msg_box.error {

    border-color: #ff5555 !important;

}



.bellaria_msg_box .icon_part {

    position: absolute !important;

    /* cws_main.css pins the icon to a fixed offset (top -3px / left 1px) so it

       overhangs the rounded border; centring it instead drops it too low. */

    left: 1px !important;

    top: -3px !important;

    transform: none !important;

    font-size: 17px !important;

    color: #4b4342 !important;

}



.bellaria_msg_box .content_part .title {

    margin: 0 0 2px 0 !important;

    font-size: 24px !important;

    line-height: 28.8px !important;

    font-family: 'Merienda One', cursive !important;

    color: #4b4342 !important;

}



/* Reference colours the box title with the status colour, not body brown. */

.bellaria_msg_box.info .content_part .title    { color: #41b6e2 !important; }

.bellaria_msg_box.warn .content_part .title    { color: #ffc000 !important; }

.bellaria_msg_box.success .content_part .title { color: #46cf93 !important; }

.bellaria_msg_box.error .content_part .title   { color: #ff5555 !important; }



.bellaria_msg_box .content_part p,

.bellaria_msg_box .content_part .msg_text {

    margin: 0 !important;

    font-size: 17px !important;

    color: #4b4342 !important;

    font-family: 'Comfortaa', cursive, sans-serif !important;

    /* Inherit the 20.4px from .content_part; the global 29px p line-height

       makes the box 8.6px taller than the reference. */

    line-height: inherit !important;

}



.bellaria_msg_box .close_button {

    position: absolute !important;

    right: 20px !important;

    top: 21px !important;

    margin-top: 0 !important;

    width: 24px !important;

    height: 24px !important;

    cursor: pointer !important;

    text-decoration: none !important;

}



/* The X inside the close button. These were a 24px grey bar pinned to left:0 -

   as wide as the whole button, so once rotated it stuck out past the circle.

   cws_main.css draws it as two 14px WHITE bars centred on the button with

   negative margins. */

.bellaria_msg_box .close_button:before,

.bellaria_msg_box .close_button:after {

    display: block !important;

    content: '' !important;

    position: absolute !important;

    z-index: 1 !important;

    top: 50% !important;

    left: 50% !important;

    background-color: #ffffff !important;

}



.bellaria_msg_box .close_button:before {

    width: 14px !important;

    height: 2px !important;

    margin-left: -7px !important;

    margin-top: -1px !important;

    transform: rotate(45deg) !important;

}



.bellaria_msg_box .close_button:after {

    width: 2px !important;

    height: 14px !important;

    margin-left: -1px !important;

    margin-top: -7px !important;

    transform: rotate(225deg) !important;

}



/* Banners size to their content over a 190px floor (set by cws_main.css on

   .banner_table). Pinning 247px here made every banner as tall as the

   tallest one instead of only the multi-line first banner. */

.bellaria_banner {

    margin-bottom: 35px !important;

}



.cws_divider.style_1 img {

    width: 73px !important;

    height: 36px !important;

}



.cws_divider.style_2 img {

    width: 55px !important;

    height: 19px !important;

}



.cws_divider.style_3 img {

    width: 34px !important;

    height: 31px !important;

}



.cws_divider.style_4 img {

    width: 181px !important;

    height: 41px !important;

}



.testimonial.item {

    padding: 0 !important;

    margin: 0 !important;

}



/* Reference renders this as a plain centred block with no bottom margin -

   the flex row added 20px of extra height under every testimonial. */

.testimonial .testimonial_img {

    display: block !important;

    text-align: center !important;

    margin: 0 !important;

}



.testimonial .testimonial_img_wrap {

    box-sizing: border-box !important;

    width: 84px !important;

    height: 84px !important;

    border-radius: 50% !important;

    overflow: hidden !important;

    border: 4px solid !important;

    display: inline-block !important;

    /* Baseline alignment would add ~9px of descender space below the avatar

       and make the whole testimonial taller than the reference. */

    vertical-align: top !important;

}



.testimonial .testimonial_img_wrap img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    display: block !important;

}



.testimonial .testimonial_name {

    margin-top: 25px !important;

    font-family: 'Merienda One', cursive !important;

    font-size: 20px !important;

    color: #4b4342 !important;

    margin-bottom: 5px !important;

}



.vc_pie_chart {

    margin: 0 0 30px !important;

    text-align: center !important;

}



.vc_tta-container.mishadort-accordion {

    margin: 0 !important;

}



.wp-block-mishadort-tabs .vc_tta-tabs-list {

    display: flex !important;

    list-style: none !important;

    margin: 0 0 -3px 0 !important;

    padding: 0 !important;

    background: #f6f5f5 !important;

    border-top-left-radius: 20px !important;

    border-top-right-radius: 20px !important;

}



.wp-block-mishadort-tabs .vc_tta-tab {

    margin-right: 0 !important;

    padding-bottom: 0 !important;

}



.wp-block-mishadort-tabs .vc_tta-tab a {

    display: block !important;

    padding: 14px 28px !important;

    text-decoration: none !important;

    font-family: 'Merienda One', cursive !important;

    font-size: 20px !important;

    color: #4b4342 !important;

    border-top-left-radius: 20px !important;

    border-top-right-radius: 20px !important;

    transition: all 0.3s ease !important;

}



.wp-block-mishadort-tabs .vc_tta-tab.vc_active a {

    color: #ffffff !important;

    background: #5fcac7 !important;

}



.wp-block-mishadort-tabs .vc_tta-panels {

    border: 3px solid #edecec !important;

    border-radius: 20px !important;

    padding: 25px 30px !important;

    background: #ffffff !important;

}



.wp-block-mishadort-accordion .accordion-item {

    border: 3px solid #edecec !important;

    border-radius: 15px !important;

    margin-bottom: 15px !important;

    overflow: hidden !important;

    background: #ffffff !important;

}



.wp-block-mishadort-accordion .accordion-header {

    background: #fdfcfc !important;

    padding: 14px 22px !important;

    cursor: pointer !important;

    transition: all 0.3s ease !important;

}



.wp-block-mishadort-accordion .accordion-header h4 {

    margin: 0 !important;

    font-size: 20px !important;

    font-family: 'Merienda One', cursive !important;

}



.wp-block-mishadort-accordion .accordion-header a {

    color: #4b4342 !important;

    text-decoration: none !important;

}



.wp-block-mishadort-accordion .accordion-item.active .accordion-header {

    background: #5fcac7 !important;

}



.wp-block-mishadort-accordion .accordion-item.active .accordion-header a {

    color: #ffffff !important;

}



.wp-block-mishadort-accordion .accordion-body {

    padding: 18px 22px !important;

    border-top: 1px solid #edecec !important;

}



/* ==========================================================================

   12. Responsive Breakpoints (Desktop, Tablet, Mobile)

   ========================================================================== */

/* Authentic WPBakery filled row column padding: direct columns only, never nested rows */
.vc_row-has-fill:not(.vc_inner) > .vc_column_container > .vc_column-inner,
.vc_row-has-fill:not(.vc_inner) > .mishadort-row-inner > .vc_column_container > .vc_column-inner {
    padding-top: 30px;
}
.vc_inner .vc_column_container > .vc_column-inner {
    padding-top: 0;
}



@media (max-width: 767px) {

    .vc_column_container > .vc_column-inner {

        padding-bottom: 20px;

    }



    .mishadort-col-1-4,

    .vc_col-sm-3,

    .mishadort-row-nested .mishadort-col-1-4,

    .wp-block-columns.mishadort-row-nested .mishadort-col-1-4,

    .wp-block-column.mishadort-col-1-4,

    .mishadort-col-1-3,

    .vc_col-sm-4,

    .wp-block-column.mishadort-col-1-3,

    .mishadort-col-1-2,

    .vc_col-sm-6,

    .wp-block-column.mishadort-col-1-2,

    .mishadort-col-2-3,

    .vc_col-sm-8,

    .wp-block-column.mishadort-col-2-3 {

        flex: 0 0 100% !important;

        width: 100% !important;

        max-width: 100% !important;

    }



    .mishadort-col-lg-offset-1,

    .vc_col-lg-offset-1 {

        margin-left: 0 !important;

    }



    .mishadort-col-lg-10,

    .vc_col-lg-10 {

        flex: 0 0 100% !important;

        width: 100% !important;

        max-width: 100% !important;

    }

}



@media (max-width: 600px) {

    .mishadort-col-1-4,

    .vc_col-sm-3,

    .mishadort-col-1-3,

    .vc_col-sm-4,

    .mishadort-col-1-2,

    .vc_col-sm-6,

    .mishadort-col-2-3,

    .vc_col-sm-8,

    .mishadort-row-nested .mishadort-col-1-4,

    .wp-block-columns.mishadort-row-nested .mishadort-col-1-4,

    .wp-block-column.mishadort-col-1-4,

    .posts_grid_4 .item.portfolio_item_grid_post {

        flex: 0 0 100% !important;

        width: 100% !important;

        max-width: 100% !important;

    }

}







/* ==========================================================================

   Column gutter normalisation

   The reference theme puts the 15px gutter on .vc_column-inner only, with the

   column itself at padding 0. Our markup carries the gutter on the column

   (.mishadort-col-*), so when a .vc_column-inner is also present the gutter is

   applied twice - making every nested component 30px narrower than reference.

   Zero the inner one so the effective content width matches.

   ========================================================================== */

.mishadort-col > .vc_column-inner,

.mishadort-col-1-1 > .vc_column-inner,

.mishadort-col-1-2 > .vc_column-inner,

.mishadort-col-1-3 > .vc_column-inner,

.mishadort-col-1-4 > .vc_column-inner,

.mishadort-col-2-3 > .vc_column-inner,

.mishadort-col-3-4 > .vc_column-inner {

    padding-left: 0 !important;

    padding-right: 0 !important;

}



/* ==========================================================================

   Carousel slide gutters

   NOTE: the reference install's carousels do not initialise (Owl never runs

   there - slides stack vertically at display:block, 688px tall), so their

   geometry is not a valid parity target. Our slides sit in a 390px cell;

   a 10px gutter lands the content at 370px, which is the width reference's

   slides report. Do not "fix" this against reference's track width.

   ========================================================================== */

.bellaria_sc_carousel .bellaria_wrapper > * {

    padding-left: 10px !important;

    padding-right: 10px !important;

    box-sizing: border-box !important;

}



/* ==========================================================================

   Divider ornament sizing

   cws_main.css gives .cws_divider img `padding: 0 20px`, and the inline

   width (e.g. 73px) is meant to be the CONTENT width - reference renders

   73 + 40 = 113px wide at the image's natural 36px height. Our global

   `* { box-sizing: border-box }` folded the padding INTO the 73px, leaving a

   33px-wide image squashed to ~16px tall, which is why dividers looked faint.

   ========================================================================== */

.cws_divider img {

    box-sizing: content-box !important;

}



/* Portfolio CAROUSEL cells.

   The masonry grid uses padding:10px all round with aspect-ratio on the item,

   but the reference's carousel cells are padded 0 10px 10px and keep the

   MEDIA square (297x287 outer, 277x277 media). Move the aspect-ratio off the

   item and onto the media so the image stays square whatever width Owl

   assigns the slide. */

.cws_sc_portfolio_carousel .item.portfolio_item_grid_post {

    padding: 0 10px 10px !important;

    aspect-ratio: auto !important;

}



.cws_sc_portfolio_carousel .item.portfolio_item_grid_post .item_content,

.cws_sc_portfolio_carousel .item.portfolio_item_grid_post .post_media,

.cws_sc_portfolio_carousel .item.portfolio_item_grid_post .pic {

    aspect-ratio: 1 / 1 !important;

    height: auto !important;

}



/* ==========================================================================

   Cooked recipe cards - matched to the LIVE Bellaria demo

   (https://bellaria.cwsthemes.com/recipes-list/), not the local reference:

   the local reference runs a different Cooked build that renders an excerpt

   the demo has no element for at all. Left unstyled that excerpt overflows

   the tile and covers the photo.

   ========================================================================== */

/* Must out-specify the plugin's own

   `.cooked-recipe-card-content > span { display:block !important }`

   (0,1,1), so a bare .cooked-recipe-card-excerpt !important loses to it. */

.cooked-recipe-card-content > span.cooked-recipe-card-excerpt,

.cooked-recipe-card > span.cooked-recipe-card-excerpt {

    display: none !important;

}



.cooked-recipe-card {

    position: relative !important;

    height: 250px !important;

    border-radius: 20px !important;

    overflow: hidden !important;

    background: #ffffff !important;

    text-align: center !important;

}



.cooked-recipe-card .cooked-recipe-card-image {

    display: block !important;

    height: 250px !important;

    background-size: cover !important;

    background-position: center center !important;

}



.cooked-recipe-card .cooked-recipe-card-content {

    position: absolute !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    top: auto !important;

    margin: 20px !important;

    padding: 12px 24px 2px !important;

    background: rgba(255, 255, 255, 0.85) !important;

    border-radius: 15px !important;

    box-sizing: border-box !important;

    /* DOM order is title, author, sep; the demo paints the separator between

       them, so reorder rather than rely on source order. */

    display: flex !important;

    flex-direction: column !important;

}



.cooked-recipe-card .cooked-recipe-card-title {

    order: 1 !important;

    font-family: 'Merienda One', cursive !important;

    font-size: 24px !important;

    line-height: 26.4px !important;

    color: #4b4342 !important;

    margin: 4px 0 !important;

    text-decoration: none !important;

}



.cooked-recipe-card .cooked-recipe-card-sep {

    order: 2 !important;

    width: 41.6px !important;

    height: 6px !important;

    background: #dddddd !important;

    border-radius: 3px !important;

    margin: 16px auto !important;

}



.cooked-recipe-card .cooked-recipe-card-author {

    order: 3 !important;

    font-family: 'Comfortaa', cursive, sans-serif !important;

    font-size: 14.4px !important;

    line-height: 29px !important;

    color: #4b4342 !important;

    opacity: 0.75 !important;

    margin: 4px 0 0 !important;

}



/* ==========================================================================

   Plain (non-masonry) portfolio grid + full_width_style

   Measured against the reference on /portfolio-masonry-2/:

     section .full_width_style   1234 wide (container 1170 + 32 each side)

     .bellaria_wrapper           1204 (inset 15px)

     .item                       308.5 x auto, margin-bottom 20

     .pic                        288.5 x natural aspect (NOT square)

     title                       below the image, padding 0 0 10px

   The square aspect-ratio belongs to the masonry layout only; applied here it

   cropped every cell to a square and collapsed the grid to zero height.

   ========================================================================== */

/* NOTE: full_width_style does NOT widen the grid itself. In the reference the

   extra width comes from the ROW being stretched (vc_row 1249 wide, pulled

   left by -24.5px); the grid just fills it. An earlier attempt to fake it with

   negative margins here produced the right number on one page and overflow on

   another, so the widening is handled at row level instead. */



.bellaria_grid.isotope:not(.masonry) .item.portfolio_item_grid_post {

    aspect-ratio: auto !important;

    margin-bottom: 20px !important;

}



.bellaria_grid.isotope:not(.masonry) .item.portfolio_item_grid_post .item_content,

.bellaria_grid.isotope:not(.masonry) .item.portfolio_item_grid_post .post_media,

.bellaria_grid.isotope:not(.masonry) .item.portfolio_item_grid_post .pic {

    aspect-ratio: auto !important;

    height: auto !important;

}



/* Isotope measures item heights at layout time. With a natural-height image

   that measurement happens before the photo loads and every cell reports 0,

   collapsing the grid. A declared ratio resolves from CSS immediately.

   16/9 gives 162.3px at the reference's 288.5px width (reference: 162.1). */

.bellaria_grid.isotope:not(.masonry) .item.portfolio_item_grid_post .pic {

    aspect-ratio: 16 / 9 !important;

}



.bellaria_grid.isotope:not(.masonry) .item.portfolio_item_grid_post .item_content {

    border-radius: 0 !important;

    overflow: visible !important;

}



.bellaria_grid.isotope:not(.masonry) .item.portfolio_item_grid_post .pic {

    border-radius: 10px !important;

    overflow: hidden !important;

}



.bellaria_grid.isotope:not(.masonry) .item.portfolio_item_grid_post .pic img {

    height: auto !important;

    aspect-ratio: auto !important;

    object-fit: cover !important;

    border-radius: 20px !important;

}



/* under_img puts the title below the photo, with no side inset (unlike the

   inside_img overlay title, which is padded 15%). */

.item.portfolio_item_grid_post.under_img .cwsportfolio_post_title {

    padding: 0 0 10px !important;

}



/* ==========================================================================

   WPBakery responsive column widths (vc_col-lg-*)

   Columns with an offset attribute carry BOTH vc_col-sm-12 and vc_col-lg-N.

   Our own `.vc_col-sm-12 { width:100% !important }` outranked WPBakery's

   plain `.vc_col-lg-6 { width:50% }`, so every offset column rendered full

   width (e.g. the intro block on /about-us/ was 1170px instead of 570px).

   Re-assert the lg widths at the same breakpoint WPBakery uses.

   ========================================================================== */

@media (min-width: 1200px) {

    /* Columns here are flex items with flex:0 0 <basis>, and flex-basis beats

       width - so the basis has to be set too, not just the width. */

    .vc_col-lg-1, .vc_col-lg-2, .vc_col-lg-3, .vc_col-lg-4, .vc_col-lg-5,

    .vc_col-lg-6, .vc_col-lg-7, .vc_col-lg-8, .vc_col-lg-9, .vc_col-lg-10,

    .vc_col-lg-11, .vc_col-lg-12 { flex-grow: 0 !important; flex-shrink: 0 !important; }



    .vc_col-lg-1  { flex-basis: 8.3333333333% !important; }

    .vc_col-lg-2  { flex-basis: 16.6666666667% !important; }

    .vc_col-lg-3  { flex-basis: 25% !important; }

    .vc_col-lg-4  { flex-basis: 33.3333333333% !important; }

    .vc_col-lg-5  { flex-basis: 41.6666666667% !important; }

    .vc_col-lg-6  { flex-basis: 50% !important; }

    .vc_col-lg-7  { flex-basis: 58.3333333333% !important; }

    .vc_col-lg-8  { flex-basis: 66.6666666667% !important; }

    .vc_col-lg-9  { flex-basis: 75% !important; }

    .vc_col-lg-10 { flex-basis: 83.3333333333% !important; }

    .vc_col-lg-11 { flex-basis: 91.6666666667% !important; }

    .vc_col-lg-12 { flex-basis: 100% !important; }



    .vc_col-lg-1  { width: 8.3333333333% !important; }

    .vc_col-lg-2  { width: 16.6666666667% !important; }

    .vc_col-lg-3  { width: 25% !important; }

    .vc_col-lg-4  { width: 33.3333333333% !important; }

    .vc_col-lg-5  { width: 41.6666666667% !important; }

    .vc_col-lg-6  { width: 50% !important; }

    .vc_col-lg-7  { width: 58.3333333333% !important; }

    .vc_col-lg-8  { width: 66.6666666667% !important; }

    .vc_col-lg-9  { width: 75% !important; }

    .vc_col-lg-10 { width: 83.3333333333% !important; }

    .vc_col-lg-11 { width: 91.6666666667% !important; }

    .vc_col-lg-12 { width: 100% !important; }



    .vc_col-lg-offset-1  { margin-left: 8.3333333333% !important; }

    .vc_col-lg-offset-2  { margin-left: 16.6666666667% !important; }

    .vc_col-lg-offset-3  { margin-left: 25% !important; }

    .vc_col-lg-offset-4  { margin-left: 33.3333333333% !important; }

    .vc_col-lg-offset-5  { margin-left: 41.6666666667% !important; }

    .vc_col-lg-offset-6  { margin-left: 50% !important; }

    .vc_col-lg-offset-0  { margin-left: 0 !important; }

}



/* ==========================================================================

   Responsive layout container

   Section 7 above pins .bellaria_layout_container to 1170px with !important,

   which silently killed layout.css's breakpoints - the whole site stayed

   1170px wide at every viewport, so mobile overflowed horizontally (dividers

   measured 1170px inside a 445px reference container). These mirror

   layout.css's own breakpoints at matching weight.

   ========================================================================== */

/* Task #385: Expanded from 1190px to 1200px to avoid 1191px-1200px overflow boundary gap (2026-09-13) */
@media screen and (max-width: 1200px) {

    .bellaria_layout_container,

    #page > .bellaria_layout_container {

        width: 940px !important;

        max-width: 940px !important;

    }

    /* The sidebar is a flex item here, so flex-basis has to shrink too or the

       270px basis wins and the content column ends up 640px instead of 700. */

    #page.single_sidebar #page_content { width: 700px !important; flex: 1 1 auto !important; }

    #page.double_sidebar #page_content { width: 460px !important; }

    .sidebar {

        width: 220px !important;

        flex: 0 0 220px !important;

    }

}



@media screen and (max-width: 980px) {

    .bellaria_layout_container,

    #page > .bellaria_layout_container {

        width: 738px !important;

        max-width: 738px !important;

    }

    #page.single_sidebar #page_content,

    #page.double_sidebar #page_content,

    .sidebar {

        width: 100% !important;

        flex: 0 0 100% !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

    }

}



@media screen and (max-width: 767px) {

    .bellaria_layout_container,

    #page > .bellaria_layout_container {

        width: auto !important;

        max-width: none !important;

        margin-left: 20px !important;

        margin-right: 20px !important;

    }

}



/* Column stacking at the reference's 980px breakpoint.

   The base column rules above set width/max-width/flex all with !important,

   so a media query that only overrides `flex` loses on `width` and the row

   stays side-by-side. Override all three, for both class families. */

@media screen and (max-width: 767px) {

    .mishadort-col-1-2, .vc_col-sm-6, .wp-block-column.mishadort-col-1-2,

    .mishadort-col-1-3, .vc_col-sm-4, .wp-block-column.mishadort-col-1-3,

    .mishadort-col-1-4, .vc_col-sm-3, .wp-block-column.mishadort-col-1-4,

    .mishadort-col-2-3, .vc_col-sm-8,

    .mishadort-col-3-4, .vc_col-sm-9 {

        flex: 0 0 100% !important;

        width: 100% !important;

        max-width: 100% !important;

        margin-bottom: 25px !important;

    }

}



/* Portfolio grid collapses to one column below 600px, matching

   bellaria_isotope_masonry_resize(); the reference also halves the cell

   padding there (10px -> 5px). */

@media screen and (max-width: 600px) {

    /* MASONRY grids only: below 600 bellaria_isotope_masonry_resize() puts every

       cell full width. The [data-masonry-col] variants out-specify the base

       rule, so they must be listed explicitly. The square ratio is KEPT - the

       reference's cells stay square here (475x465); releasing it exposed the

       raw 16:9 image and cut the cells to 261px. */

    .masonry .item.portfolio_item_grid_post,

    .masonry .item.portfolio_item_grid_post[data-masonry-col="2"],

    .masonry .item.portfolio_item_grid_post[data-masonry-col="1"][data-masonry-line="2"],

    .masonry .item.portfolio_item_grid_post[data-masonry-col="2"][data-masonry-line="1"],

    .masonry .item.portfolio_item_grid_post[data-masonry-col="2"][data-masonry-line="2"] {

        flex: 0 0 100% !important;

        width: 100% !important;

        max-width: 100% !important;

        padding: 5px !important;

        /* aspect-ratio is deliberately NOT overridden: each cell keeps the

           per-variant ratio set above, so the tall 1x2 cells stay tall

           (reference: 475 wide x 1002) instead of being squared off. */

    }



}



/* Plain (non-masonry) portfolio grids are 2-up across the whole <=980 range in

   the reference (353.5px of 707 at 768, 227.5px of 455 at 375) - they do not

   collapse to a single column the way the masonry grids do. */

@media screen and (max-width: 980px) {

    .bellaria_grid.isotope:not(.masonry) .item.portfolio_item_grid_post {

        flex: 0 0 50% !important;

        width: 50% !important;

        max-width: 50% !important;

    }

}



/* Cell padding halves below 600 for every portfolio grid - masonry, plain, or

   the single-column layout="1" list (which carries no .isotope class at all). */

@media screen and (max-width: 599px) {

    .item.portfolio_item_grid_post {

        padding: 5px !important;

    }



    /* under_img masonry cells put the title BELOW the photo, so the square

       ratio belongs to the media - keeping it on the item squashed the title

       inside the square (455 tall vs the reference's 518.8). */

    .masonry .item.portfolio_item_grid_post.under_img,

    .masonry .item.portfolio_item_grid_post.under_img[data-masonry-col="2"],

    .masonry .item.portfolio_item_grid_post.under_img[data-masonry-col="1"][data-masonry-line="2"],

    .masonry .item.portfolio_item_grid_post.under_img[data-masonry-col="2"][data-masonry-line="1"],

    .masonry .item.portfolio_item_grid_post.under_img[data-masonry-col="2"][data-masonry-line="2"] {

        aspect-ratio: auto !important;

        height: auto !important;

    }



    .masonry .item.portfolio_item_grid_post.under_img .post_media,

    .masonry .item.portfolio_item_grid_post.under_img .pic {

        aspect-ratio: 1 / 1 !important;

        height: auto !important;

    }



    /* ...and the media keeps each cell's own span ratio, so the tall 1x2 cells

       stay tall rather than being squared off. */

    .masonry .item.portfolio_item_grid_post.under_img[data-masonry-col="1"][data-masonry-line="2"] .post_media,

    .masonry .item.portfolio_item_grid_post.under_img[data-masonry-col="1"][data-masonry-line="2"] .pic {

        aspect-ratio: 1 / 2 !important;

    }



    .masonry .item.portfolio_item_grid_post.under_img[data-masonry-col="2"][data-masonry-line="1"] .post_media,

    .masonry .item.portfolio_item_grid_post.under_img[data-masonry-col="2"][data-masonry-line="1"] .pic {

        aspect-ratio: 2 / 1 !important;

    }

}



/* ==========================================================================

   Sidebar widgets

   The gallery widget was rendering one 150px thumbnail per row (242px items)

   instead of the reference's 3-up grid of ~76px, and the search widget's

   submit button was visible, doubling its height (104px vs 46px).

   ========================================================================== */

.sidebar .gallery {

    margin: 0 !important;

}



.sidebar .gallery-item {

    width: 33.3333% !important;

    margin: 0 0 4px !important;

    padding: 0 2px !important;

    box-sizing: border-box !important;

    float: left !important;

}



/* max-width, not width: the reference lets the 150px thumbnail render at its

   intrinsic size and only shrinks it when the column is narrower. Forcing

   width:100% blew each thumb up to 220px square on tablet. */

/* The thumbnail file is 150x150 on both sites, but our srcset/sizes makes the

   browser lay it out at the cell width (215px on tablet) instead of its

   natural size. Cap it at 150px, shrinking only when the column is narrower. */

.sidebar .gallery-item img {

    max-width: min(100%, 150px) !important;

    width: auto !important;

    height: auto !important;

    margin: 0 auto !important;

    display: block !important;

    border: 0 !important;

}



.sidebar .gallery:after {

    content: '';

    display: table;

    clear: both;

}



/* The reference's search widget is the field alone; the submit is triggered by

   Enter and is visually hidden. */

.sidebar .searchform .search-submit {

    display: none !important;

}



/* "Our Team" widget: small round thumbnail beside the name, not a full-width

   photo (reference item ~363px tall for four members, not 1200). */

/* Reference floats the photo and lets .post_data run the full widget width,

   with the text flowing beside it - a flex row made the text box exactly

   photo+gap (85px) narrower than the reference's. */

.sidebar .cwsstaff_post_list .cwsstaff_post {

    margin-bottom: 18px !important;

}



.sidebar .cwsstaff_post_list .cwsstaff_post:after {

    content: '';

    display: table;

    clear: both;

}



.sidebar .cwsstaff_post_list .cwsstaff_post_media {

    float: left !important;

    margin-right: 15px !important;

}



.sidebar .cwsstaff_post_list .hexagon_mini2_container {

    width: 70px !important;

    height: 70px !important;

    border-radius: 50% !important;

    overflow: hidden !important;

}



.sidebar .cwsstaff_post_list .hexagon_mini2_container img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    display: block !important;

}



/* ==========================================================================

   Mobile: tabs collapse to an accordion

   js_composer_tta hides .vc_tta-panel-heading only above 768px, so below that

   every panel heading becomes the accordion row. Our renderer inline-hides

   inactive panels, which hid their headings too - show the panels and collapse

   just their bodies instead.

   ========================================================================== */

@media screen and (max-width: 767px) {

    .vc_tta-tabs .vc_tta-panel {

        display: block !important;

    }



    .vc_tta-tabs .vc_tta-panel:not(.vc_active) .vc_tta-panel-body {

        display: none !important;

    }



    .vc_tta-tabs .vc_tta-panel-heading {

        display: block !important;

    }



    /* The tab strip itself is replaced by those headings on mobile. */

    .vc_tta-tabs .vc_tta-tabs-container {

        display: none !important;

    }

}



/* Portfolio carousel cells take the same halved padding as the grids below 600. */

@media screen and (max-width: 599px) {

    .cws_sc_portfolio_carousel .item.portfolio_item_grid_post {

        padding: 0 5px 5px !important;

    }

}



/* ==========================================================================

   Pie charts scale with their column

   The renderer inline-styles them at a fixed 216px, which is exactly 80% of

   the desktop column - but the reference keeps that proportion at every

   breakpoint (356px in a full-width mobile column), so a fixed pixel size left

   them half-size on mobile.

   ========================================================================== */

/* The WRAPPER is 80% of the column - purely proportional, no pixel cap, which

   reproduces the reference at every breakpoint (216 desktop, 356 mobile,

   557.6 tablet). The SVG then fills the wrapper: giving it 80% as well made

   the ring 172.8px, left-aligned inside a 216px box, so the centred value sat

   right of the ring's centre. */

.vc_pie_chart .vc_pie_wrapper {

    width: 80% !important;

    height: auto !important;

    aspect-ratio: 1 / 1 !important;

    margin-left: auto !important;

    margin-right: auto !important;

}



.vc_pie_chart .vc_pie_svg {

    width: 100% !important;

    height: 100% !important;

    display: block !important;

}



.vc_pie_chart .vc_pie_chart_value {

    width: 100% !important;

    height: 100% !important;

    top: 0 !important;

    left: 0 !important;

    transform: none !important;

    line-height: 1 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

}



/* ==========================================================================

   Portfolio cells inside an Owl carousel

   Owl gives each slide its own .owl-item (292px here). The grid rule

   `.posts_grid_4 .item { width: 25% }` then took a quarter OF THAT, collapsing

   each cell to ~65px. Inside a carousel the cell fills its slide instead, and

   the square ratio lives on the media as it does for the grid.

   .bellaria_carousel is the reference's own class (section D, option A); the

   two .*_sc_carousel selectors remain for the generic content carousel.

   ========================================================================== */

.bellaria_carousel .owl-item .item.portfolio_item_grid_post,

.cws_sc_portfolio_carousel .owl-item .item.portfolio_item_grid_post,

.bellaria_sc_carousel .owl-item .item.portfolio_item_grid_post {

    width: 100% !important;

    max-width: 100% !important;

    flex: none !important;

    /* Measured against the reference: 10px each side and 10px at the BOTTOM,

       none on top (287x297 outer around a 277x277 content box). The grid

       variant's symmetric 10px made each slide 10px too tall; putting the

       10px on top instead pushed every slide down by 10px. */

    padding: 0 10px 10px !important;

    /* The grid variant forces aspect-ratio:1/1 on the CELL, which made the cell

       height track its 297px slide width. In a carousel the square ratio belongs

       to the media box (set below), and the cell height follows its content -

       287px, as on the reference. */

    aspect-ratio: auto !important;

}



.bellaria_carousel .owl-item .item.portfolio_item_grid_post .item_content,

.bellaria_carousel .owl-item .item.portfolio_item_grid_post .post_media,

.bellaria_carousel .owl-item .item.portfolio_item_grid_post .pic,

.cws_sc_portfolio_carousel .owl-item .item.portfolio_item_grid_post .item_content,

.cws_sc_portfolio_carousel .owl-item .item.portfolio_item_grid_post .post_media,

.cws_sc_portfolio_carousel .owl-item .item.portfolio_item_grid_post .pic {

    aspect-ratio: 1 / 1 !important;

    height: auto !important;

    width: 100% !important;

}



/* ==========================================================================

   Columns that bring their own horizontal padding

   WPBakery keeps the 15px gutter on .vc_column-inner, so a column-level

   vc_custom_* padding replaces it rather than adding to it. We keep the gutter

   on the column (moving it globally regressed every page), so a column that

   carries its own left/right padding drops the gutter here instead - the

   `mishadort-col-own-padding` class is set in mishadort_vc_column().

   Without this, /home-coffee/'s four image tiles sat 30px apart where the

   reference has them touching.

   ========================================================================== */

.mishadort-col.mishadort-col-own-padding,

.vc_column_container.mishadort-col-own-padding,

.mishadort-col-1-4.mishadort-col-own-padding,

.vc_col-sm-3.mishadort-col-own-padding {

    padding-left: 0 !important;

    padding-right: 0 !important;

}

/* Rows with vc_row-no-padding (e.g. dividers on /home-wedding/, /home-dessert/)
   must have 0 side padding on their columns to match WPBakery behavior. */
.vc_row.vc_row-no-padding .mishadort-col,
.vc_row-no-padding .mishadort-col,
.vc_row-no-padding .vc_column_container,
.vc_row-no-padding .vc_column-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}