.sb-page {
    width: 100%;
    margin: 0;
    padding: 28px 0;
    background:#FCF4EE;
  }

  .sb-container{
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 16px;
  }
  
  .sb-grid {
    display: grid;
    gap: 40px; 
    grid-template-columns: repeat(3, 1fr);
  }
  @media (max-width: 1024px) {
    .sb-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .sb-grid { grid-template-columns: 1fr; }
  }
  
  .sb-card {
    display: grid;                
    grid-template-rows: 224px auto;
    background: #FFFBF8;
    border: 1px solid #ececec;
    border-radius: 18px;
    overflow: hidden;
    height: 320px;
  }
  
  
  .sb-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #f1f1f1;
  }
  
  
  .sb-body-empty {
    background: #fbefd6;
    padding: 10px 18px; 

  }

  .shop-intro {
    font-size: 20px;                
    font-family: 'Georgia', serif;  
    font-style: italic;             
    color: #6a1d1d;                
    line-height: 1.6;               
    text-align: left;             
    max-width: 700px;               
    margin: 0 0 100px 40px;           
  }

  .order-title {
    font-size: 100px;                
    font-family: 'Ranchers', serif;  
    font-style: italic;             
    font-weight: bold;
    color: #902525;                
    line-height: 1.6;              
    text-align: left;             
    max-width: 700px;               
    margin: 0 0 20px 40px;           
  }


.intro-section{
    position: relative;
    min-height: 260px;
  }
  
  .intro-icons{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(48vw, 680px);
    pointer-events: none;     
    z-index: 1;                
  }
  
  .intro-icons img{
    position: absolute;
    opacity: .18;
    width: clamp(90px, 12vw, 180px);   
    height: auto;
    filter: saturate(90%) contrast(85%);
  }
  
  .intro-icons img:nth-child(1){ right: 50%; top: -15px; transform: rotate(-6deg); }
  .intro-icons img:nth-child(2){ right: 23%; top: 150px; transform: rotate( 4deg); }
  .intro-icons img:nth-child(3){ right: -10%; top: 70px; transform: rotate(-2deg); }
  .intro-icons img:nth-child(4){ right: 85%; top: 180px; transform: rotate( 7deg); }
  
  
  @media (max-width: 900px){
    .intro-icons{ display: none; }
  }
  
  .sb-thumb-empty img {
    width: 250px;   
    height: 250px;  
    object-fit: contain;       
    display: block;
    margin: 0 auto;            
  }
  
  .sb-body-empty h3{
    font-size: 24px;                
    font-family: 'Georgia', serif;  
    font-weight: bold;           
    color: #000000;                
    line-height: 1.3;               
    text-align: left;                     
    margin: 0 0 15px 10px;
  }
  
  .sb-body-empty p{
    font-size: 18px;                      
    color: #595959; 
    font-weight:800;               
    line-height: 1.3;               
    text-align: left;                     
    margin: 0 0 15px 10px;
  }

  .sb-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -4px;
  }

  
  .sb-box {
    background: linear-gradient(to right, #f9ada7 50%, #a4d8fc 50%);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    width: 200px;
    height: 32px;
  }
  
  
  .sb-box .icon-btn{
    all: unset;   
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;                   
    height: 100%;
    cursor: pointer;
  }
  
  .sb-box .icon-btn.cart:hover   {
     background:#f87d74; 
  }
  .sb-box .icon-btn.cart:active  { 
    background:#fb4b3f; 
  }
  .sb-box .icon-btn.arrow:hover  { 
    background:#6fc3ff; 
  }
  .sb-box .icon-btn.arrow:active {
    background:#149dfe; 
  }
  
  
  .sb-box .icon-btn img{
    width: 25px;
    height: 25px;
    display: block;
  }


  .sb-detailsPage {
    width: 100%;
    margin: 0;
    padding: 28px 0;
    background:#feebd8;
    min-height: 100vh; 
  }

  .details-title {
    font-size: 100px;                
    font-family: 'Ranchers', serif;  
    font-style: italic;             
    font-weight: bold;
    color: #902525;                
    line-height: 1.6;              
    text-align: left;             
    max-width: 700px;               
    margin: 0 0 20px 40px;           
  }
  
  .product-id {
    font-size: 30px;                
    font-family: 'Georgia', serif;  
    font-style: italic;             
    color: #6a1d1d;                
    line-height: 1.6;               
    text-align: left;             
    max-width: 700px;               
    margin: 0 0 100px 40px;           
  }
  .contact-background {
    background: #FCF4EE;   /* from your screenshot */
    min-height: 100vh;     /* fill the viewport height */
    width: 100%;
}

.payment-title {
  font-size: 100px;                
  font-family: 'Ranchers', serif;  
  font-style: italic;             
  font-weight: bold;
  color: #902525;                
  line-height: 1.6;              
  text-align: left;             
  max-width: 700px;               
  margin: 0 0 20px 40px;           
}

.pay-information {
  font-size: 25px;                
  font-family: 'Playfair Display', serif;  
  font-style: italic;             
  color: #881818;                
  line-height: 1.6;               
  text-align: left;             
  max-width: 700px;               
  margin: 0 0 100px 40px;           
}

.total-price {
  font-size: 40px;                
  font-family: 'Playfair Display', serif;  
  font-style: italic;             
  color: #881818;                
  line-height: 1.6;               
  text-align: left;             
  max-width: 700px;               
  margin: 0 0 100px 40px;           
}