/** Shopify CDN: Minification failed

Line 153:2 Unexpected "}"

**/
.page-product-loaded .custom-header {
  padding: 0;
  position: fixed;
  z-index: 2000;
  background: #F2F2F2;
}

.page-product-loaded .custom-header__nav {
  flex-wrap: wrap;
  align-items: center;
  padding: 30px 15px 15px 15px; 
}

/* Re-targeting the logo image size */
.page-product-loaded .custom-header__nav a {
  font-size: 1.6rem; 
  line-height: 1.1;
}
.page-product-loaded .custom-header .nav-logo img {
  max-width: 55px;
  height: auto;
}

.page-product-loaded .mobile-top-bar .nav-logo {
  position: absolute; 
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  margin: 0 !important; 
}

/* 1. LINKS GROUP */
.page-product-loaded .mobile-bottom-nav {
  justify-content: center;
  margin: 40px 0 0 10px !important;
  gap: 0;
}

/* 2. LINKS GROUP ITEMS */
.page-product-loaded .mobile-bottom-nav li {
  margin: 0 3vw; 
  padding: 0;
  display: block; 
}

/* 2. ICONS GROUP (Far Right) */
.page-product-loaded .mobile-top-bar {
  display: flex !important; 
  justify-content: flex-end;
  padding-right: 50px !important;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
}


@media screen and (max-width: 700px) {
    /* --- 1. Top Bar (Logo and Icons) --- */
    .page-product-loaded .mobile-top-bar {
      display: flex !important; /* Make it visible on mobile */
      position: fixed;
      top: 0;
      background-color: #F2F2F2 ;
      box-shadow: 0px 6px 8px -2px rgba(0, 0, 0, 0.05);
      left: 0;
      width: 100%;
      height: 75px; /* Define a fixed height for the top bar */
      padding: 0 clamp(4px, 3vw, 14px);
      justify-content: space-between; /* Push logo left, icons right */
      align-items: center;
      z-index: 1000;
    }
    

    /* Logo size for the top bar */
    .page-product-loaded .mobile-top-bar .nav-logo img {
        width: clamp(50px, 8vw, 60px); 
        height: auto;
    }
    
    /* Icon size for the top bar */
    .page-product-loaded .mobile-top-bar .custom-header__icons-item {
        margin-left: auto; /* Ensure icons are at the edge */
        margin-right: 25px;
    }
    
    /* --- 2. Bottom Bar (Links) --- */
    .page-product-loaded .custom-header {
      /* This is your old header, now used only for the bottom bar */
      position: fixed; 
      background-color: #F2F2F2 ;
      top: auto !important;
      bottom: 0 !important;
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      box-shadow: 0px -6px 8px -2px rgba(0, 0, 0, 0.05)!important; 
      z-index: 1000;
    }

    .page-product-loaded .custom-header__nav {
      padding: 0 5%; 

    }

   .page-product-loaded .mobile-bottom-nav { /* Use the new class here */
      margin: 0 !important; 
      display: flex;
      justify-content: center;
      height:100%;
      align-items: center;
      gap: clamp(17px, 4vw, 80px);/* Distribute items equally within the ul */
      z-index: 1000;
    }

    .page-product-loaded .mobile-bottom-nav li {
        margin: 0 !important; /* REMOVE the desktop's 4vw margin */
        display: flex;
    }
 
    .page-product-loaded .mobile-bottom-nav a {
    font-size: clamp(1.3rem, 2.1vw + 0.38rem, 2rem);
    }
   
    .page-product-loaded .product {
   padding-top: 95px !important;
   padding-left: 10px !important;
   padding-right: 10px !important;
    }

   .page-product-loaded .product__title h1 {
    font-size: 2rem !important; /* Made it larger than your 2.2rem request for visibility */
    font-weight: 400 !important; /* Very bold to match the screenshot */
    margin-bottom: 0.2rem !important; /* Reduce gap to secondary text */
    padding-top: 1.5rem !important;
  }

  .page-product-loaded .product__info-wrapper {
    /* Add padding to the left and right (e.g., 20px or 1.2rem) */
    padding-left: 1.2rem !important; 
    padding-right: 1.2rem !important;
  }

}


  }

@media screen and (min-width: 990px) {
  /* 1. LAYOUT OVERRIDE: Image 70% / Info 30% */

  /* Product Media (Image Column) - Set to 70% width */
  .product--large:not(.product--no-media) .product__media-wrapper,
  .product--medium:not(.product--no-media) .product__media-wrapper,
  .product--small:not(.product--no-media) .product__media-wrapper {
    max-width: 50% !important;
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2) !important;
  }

  /* Product Info (Details Column) - Set to 30% width */
  .product--large:not(.product--no-media) .product__info-wrapper,
  .product--medium:not(.product--no-media) .product__info-wrapper,
  .product--small:not(.product--no-media) .product__info-wrapper {
    max-width: 50% !important;
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2) !important;
    padding: 0 0 0 5rem !important; /* Adjust padding/spacing as needed */
  }

  /* Ensure the left/right padding is correct for the 70/30 split */
  .product--large:not(.product--no-media).product--right .product__info-wrapper {
    padding: 0 5rem 0 0 !important;
  }
}

/* if I want product picutre to be bigger .product-media-container {aspect-ratio: 4 / 8 !important; height: auto !important;} */

.product {
   padding-top:  165px !important;
   padding-left: 100px !important;
   padding-right: 100px !important;   
}


/* 2. TYPOGRAPHY & SPACING OVERRIDE (To match the elegant screenshot) */

/* Primary Product Title (e.g., "Terasu - Kiri") */
 .product__title h1 {
    font-size: 2.2rem !important; /* Made it larger than your 2.2rem request for visibility */
    font-weight: 400 !important; /* Very bold to match the screenshot */
    margin-bottom: 0.2rem !important; /* Reduce gap to secondary text */
    padding-top: 9rem !important;
  }

/* Secondary Text (e.g., "Terasu Original"): Smaller, lighter, and adds a line below */
.product__text {
  /* Keep the text styles, but remove the line attempts from here */
  font-size: 1.6rem !important;
  font-weight: 400 !important; 
  color: rgba(var(--color-foreground), 0.7) !important; 
  display: block !important; 
  margin-bottom: 0 !important; /* This closes the gap right under the secondary text */
}

/* FIX: This selector adds the line and the large gap ABOVE the description block. */
/* We're using a top border on the description element because it's guaranteed to be full width. */
.product__info-container .product__description {
  /* CRITICAL LINE FIX: Force a visible black border on the *top* of the description block */
  border-top: 1px solid #b0b0b0 !important;
  border-bottom: 1px solid #b0b0b0 !important;
  padding-top: 2rem !important; /* Adds a large gap between the line and the description text */
  margin-top: 0 !important; 

  /* Keep your existing description text styles below this */
  font-size: 1.4rem !important;
  line-height: 1.6 !important;
  margin-bottom: 2rem !important;
  text-align: justify !important;

}

/* Product Description Text (The body text after the line) */
.product__info-container .product__description p {
    margin-bottom: 2rem !important;
}

.product__info-container .product__text {
    /* Set the desired size */
    font-size: 1.4rem !important; /* Example: slightly larger than the body text (1.4rem) */
    text-transform: uppercase !important; 
    margin-bottom: 1rem !important; 
}
/* Price Display */
.price {
    font-size: 1.4rem !important; /* Make price a good size */
    margin: 0!important;
}

.product-form__quantity .quantity {
  margin-bottom: 2rem !important;
  /* Control the overall width of the component: 150px * 0.6 = 90px */
  max-width: 90px !important; 
  width: 90px !important;
  /* Add height controls for the wrapper itself: 50px * 0.6 = 30px */
  min-height: 30px !important; 
  height: 30px !important;
}

/* FIX 1: Target the quantity buttons (minus and plus) */
.product-form__quantity .quantity .quantity__button {
  /* Set size for buttons: 50px * 0.6 = 30px */
  min-height: 30px !important; 
  max-height: 30px !important; 
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  width: 30px !important;
  border-radius: 0 !important;
}

/* FIX 2: Target the quantity input field */
.product-form__quantity .quantity .quantity__input {
  /* Ensure the input field matches the height: 50px * 0.6 = 30px */
  min-height: 30px !important; 
  max-height: 30px !important; 
  height: 30px !important;
  /* Width will be the remaining 30px */
  width: 30px !important; 
  border-radius: 0 !important;
}


.product__tax,
.price__tax-label {
    display: none !important;
    visibility: hidden !important; /* Use both for maximum compatibility */
}

#ProductSubmitButton-template--25835241931018__main,
.product-form .product-form__submit button.button--primary {
  /* Critical Resets */
  background-color: transparent !important;

  /* Size and Structure */
  min-height: 33px !important; 
  height: 33px !important; 
  width: 100% !important; 
  
  /* Typography */
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  color: black;
  border-radius: 0 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}