/** Shopify CDN: Minification failed

Line 64:1 Unexpected "}"

**/
.template-page .rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6 {
    margin-top: 25px;
    margin-bottom: 20px;
}

.template-page .rte p {
        margin-bottom: 15px;
    }

.grid-product__tag--sale
{
    display: none !important;
}


@media only screen and (min-width: 769px) {
    .section-header {
        margin-bottom: 15px !important;
    }

    .index-section {
        margin: 15px 0;
    }

    .has-4-per-row .text-with-icons__block {
        width: 20%;
    }
    .text-with-icons__block-icon .icon {
        height: 50px;
        width: 50px;
    }
    
    h3 {
        font-size: calc(var(--typeHeaderSize) * .55);
    }

}

.text-with-icons{
background: #fff;
}

.product-block .variant-wrapper:nth-child(2) .variant__label
{
    position:relative;
}

@media (min-width: 769px) {
    .text-column__grid:has(>:nth-child(odd):last-child:not(:nth-child(3)))>:nth-last-child(-n+3) {
        grid-column: span 1;
    }
       .text-column__grid>* {
        grid-column: span 1;
    }
        .text-column__grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }
}}


/* Size Chart Code */

.sizechart .tablink {
  background-color: #d62828;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 15px;
  font-family: Poppins;
  width: 20%;
}

.sizechart .tablink:hover 
{
  background-color: #ed5a53;
}

.sizechart .tabcontent {
  color: #000;
  font-family: Poppins;
  display: none;
}

.sizechart .button-group {
  text-align: center;
  margin-bottom: 2rem;
}

.sizechart .size-chart{
    width: 100%;
    max-width: 900px;
    margin: auto;
    margin-bottom: 2rem;
}
.sizechart .size-chart h2{
    text-align: center;
    letter-spacing: 2px;
}
.sizechart .unit-toggle{
    text-align: center;
    margin-bottom: 15px;
}
.sizechart .unit-toggle span{
    cursor: pointer;
    color: #2f80ed;
    font-weight: 600;
}
.sizechart .unit-toggle span.active{
    text-decoration: underline;
}
.sizechart .sizechart-table{
    width: 100%;
    border-collapse: collapse;
}
.sizechart .sizechart-table th, .sizechart .sizechart-table td{
    border: 1px solid #e0e0e0;
    padding: 10px;
    text-align: center;
    font-size: 14px;
}
.sizechart .sizechart-table th{
    background: #fafafa;
}
.sizechart .size-col{
    font-weight: 600;
}

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

    .sizechart
    {
        text-align: center !important;
    }

    .sizechart .tablink
    {
        font-size: 13px;
        width: 49%;
    }

    .rte table {
    table-layout: auto;
}
}


@media only screen
and (min-width: 847px)
and (max-width: 990px)
{
    .sizechart .tablink
    {
        width: 30%;
    }
}
/*------------------------------------*/
/* 1. Expand the overall page width to the edges */
.page-width {
    max-width: 90% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* 2. Adjust Sidebar and Content Width to prevent overlap */
@media only screen and (min-width: 769px) {
    /* Ensure the sidebar stays at 20% and doesn't overlap */

    
  .grid__item--sidebar {
        width: 5% !important;
        float: left !important;
        padding-right:20px !important;
    }

    /* Expand the product content area to 80% */
    .grid__item--content {
        width: 100% !important;
        float: left !important;
    }

    /* 3. Make Images Larger (Change from 4-column to 3-column) */
    /* This targets the Globo Filter grid items */
    .grid-product.medium-up--one-quarter {
        width: 25% !important; 
    }
}

/* 4. Fix for Globo Filter specific containers */
#gf-products {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 80% !important;
}

/* Mobile View Improvements for House of Muktai */

/* This CSS targets screens with a maximum width of 767px, which typically covers most mobile devices. */
@media screen and (max-width: 767px) {

    /* 1. Increase Product Image Size and Improve Grid Layout */
    /* By default, Shopify themes often display two product columns on mobile (small--one-half). */
    /* Changing this to 100% width will make each product item take up the full screen width, resulting in larger images. */
    .grid__item.small--one-half {
        width: 100% !important; /* Forces product item to full width */
        padding-left: 10px !important; /* Add some horizontal padding for better visual spacing */
        padding-right: 10px !important;
        margin-bottom: 5px !important; /* Add space between product rows */
    }

    /* Ensure images within product items scale correctly to fill their container */
    .grid-product__image-wrapper img {
        height: 100% !important;
        width: auto !important; /* Maintain aspect ratio */
        object-fit: contain; /* Ensures the entire image is visible within its container */
    }

    /* Adjust the overall product grid spacing if necessary */
    .grid--uniform {
        margin-left: 0 !important; /* Remove negative margins that might be used for desktop grid spacing */
        margin-right: 0 !important;
    }

    /* 2. Improve Typography for Readability */
    /* Make product titles larger and more readable on small screens */
    .grid-product__title {
        font-size: 1.2em !important; /* Increase font size */
        line-height: 1.4 !important; /* Improve line spacing */
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    /* Adjust price font size for better visibility */
    .grid-product__price {
        font-size: 1.1em !important;
    }

    /* Ensure sale badges or other labels are appropriately sized */
    .grid-product__tag {
        font-size: 0.85em !important;
        padding: 5px 8px !important;
    }

    /* 3. Adjust Filter/Sort Bar Spacing (if applicable) */
    /* This is a common class for mobile filter/sort sections, adjust as needed based on your theme */
    .collection-mobile-filters,
    .collection-sortby-wrapper {
        padding: 10px 15px !important;
        margin-bottom: 15px !important;
    }

    /* Hide elements that are not needed on mobile or take up too much space */
    /* Example: If there are desktop-specific elements you want to hide */
    .medium-up--hide {
        display: block !important; /* Ensure elements meant to be hidden on larger screens are visible on mobile */
    }
    .small--hide {
        display: none !important; /* Hide elements specifically for small screens if they are redundant */
    }
}

/* To prevent desktop view from changing, all the above rules are enclosed within a media query */
/* @media screen and (max-width: 767px) { ... } */
/* This ensures that these styles only apply when the screen width is 767 pixels or less. */
/* For desktop views (screens wider than 767px), the original styles will remain unaffected. */

@media screen and (max-width: 749px) {
  .site-header__element--sub {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  
  .site-nav__link--icon {
    display: inline-flex !important;
    flex-direction: row !important;
  }
}

/* Universal announcement bar font size update */
.announcement-bar, 
[class*="announcement-bar"], 
.announcement-bar__message,
.announcement-bar * {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
}


/* १. अक्षरांचा आकार मोठा आणि ठळक ठेवण्यासाठी */
.announcement-bar, 
.announcement-bar__message, 
.announcement-bar-span,
.announcement-bar p,
[class*="announcement"] * {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
}

/* Announcement Bar Ticker Fix */
.announcement-link-text {
  display: inline-block !important;
  animation: ticker 25s linear infinite !important;
  white-space: nowrap !important;
}

.announcement-slider__slide {
  overflow: hidden !important;
}

@keyframes ticker {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* Tradition Meets Modern Elegance Badge */
.tradition-badge {
  display: inline-block;
  border: 2px solid #000000;
  color: #000000;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  margin-left: 10px;
  letter-spacing: 0.5px;
  vertical-align: middle;
}