/** Shopify CDN: Minification failed

Line 236:12 Unexpected ";"

**/
/* =====================================================
Royal Gourmet Recipe Center CSS
===================================================== */


/* ---------- Global ---------- */


.rg-recipe-center {

--rg-red:#c8102e;
--rg-black:#111;
--rg-gray:#f6f6f6;
--rg-white:#fff;

font-family:inherit;

}



.rg-container{

max-width:1400px;

margin:auto;

padding-left:30px;

padding-right:30px;

}



.rg-section{

padding:70px 0;

background:#fff;

}



.rg-dark-section{

background:#111;

color:#fff;

}



.rg-section h2{

font-size:36px;

font-weight:700;

text-align:center;

margin-bottom:45px;

letter-spacing:-0.5px;

}



/* =====================================================
Hero
===================================================== */


.rg-recipe-hero{


height:620px;

background-size:cover;

background-position:center;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

color:white;


}



.rg-hero-content{

max-width:850px;

padding:30px;

}



.rg-hero-content h1{


font-size:64px;

line-height:1.1;

font-weight:800;

margin-bottom:25px;


}



.rg-hero-content p{


font-size:22px;

margin-bottom:35px;


}



.rg-primary-btn{


display:inline-flex;

background:var(--rg-red);

color:#fff;

padding:16px 40px;

font-size:16px;

font-weight:700;

text-decoration:none;

border-radius:3px;

transition:.3s;


}



.rg-primary-btn:hover{

background:#990019;

transform:translateY(-2px);

}



/* =====================================================
Slider
===================================================== */


.rg-slider-wrapper{

position:relative;

}



.rg-slider{
}
.food-slider {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  overflow-x: visible;
  gap: 40px;
}
.food-slider img {
  width: 150px !important;
  height: 150px !important;
  object-fit: cover;
  border-radius: 50%;
}

.grill-slider img {
  width: 200px !important;
  height: 200px !important;
  object-fit: contain;
}




.grill-slider {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  overflow-x: visible;
  gap: 20px;
  justify-items: center;
}

.recipe-slider {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  gap: 30px !important;
}

.rg-recipe-card {
  flex: 0 0 300px;
}

display:flex;

gap:25px;

overflow-x:auto;

scroll-behavior:smooth;

scrollbar-width:none;

cursor:grab;


}



.rg-slider::-webkit-scrollbar{

display:none;

}



.rg-slider:active{

cursor:grabbing;

}



.rg-arrow{


position:absolute;

top:45%;

width:45px;

height:45px;

border-radius:50%;

border:none;

background:white;

box-shadow:0 5px 20px rgba(0,0,0,.15);

font-size:30px;

cursor:pointer;

z-index:5;


}



.rg-prev{

left:-20px;

}



.rg-next{

right:-20px;

}





/* =====================================================
Category Card
===================================================== */


.rg-category-card{


min-width:150px;

height:190px;

background:#fff;

border-radius:12px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-decoration:none;

color:#111;

transition:.35s;


}



.rg-category-card img{


width:90px;

height:90px;

object-fit:contain;

margin-bottom:20px;


}



.rg-category-card h3{


font-size:18px;

font-weight:700;

margin:0;


}



.rg-category-card:hover{


transform:translateY(-8px);

box-shadow:0 15px 30px rgba(0,0,0,.12);


}



.rg-dark-section .rg-category-card{


background:#222;

color:#fff;


}




/* =====================================================
Recipe Card
===================================================== */


.rg-recipe-card{


background:#fff;

border-radius:12px;

overflow:hidden;

text-decoration:none;

color:#111;

min-width:330px;

transition:.35s;


}



.rg-recipe-card:hover{


transform:translateY(-8px);

box-shadow:0 20px 40px rgba(0,0,0,.15);


}



.rg-recipe-image{


height:260px;

position:relative;

overflow:hidden;


}



.rg-recipe-image img{


width:100%;

height:100%;

object-fit:cover;

transition:.5s;


}



.rg-recipe-card:hover img{


transform:scale(1.08);


}



.rg-overlay{


position:absolute;

inset:0;

background:rgba(0,0,0,.45);

display:flex;

align-items:center;

justify-content:center;

opacity:0;

transition:.3s;


}



.rg-overlay span{


color:#fff;

font-weight:700;

font-size:18px;


}



.rg-recipe-card:hover .rg-overlay{


opacity:1;


}



.rg-recipe-info{


padding:25px;


}



.rg-recipe-info h3{


font-size:22px;

margin:0 0 15px;

font-weight:700;


}



.rg-meta{


display:flex;

gap:12px;

flex-wrap:wrap;

font-size:14px;

color:#666;


}



/* =====================================================
Banner
===================================================== */


.rg-banner-grid{


display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;


}



.rg-banner-card{


height:300px;

position:relative;

overflow:hidden;

border-radius:12px;

text-decoration:none;

color:white;


}



.rg-banner-card img{


width:100%;

height:100%;

object-fit:cover;

transition:.5s;


}



.rg-banner-card:hover img{


transform:scale(1.08);


}



.rg-banner-content{


position:absolute;

bottom:30px;

left:30px;

right:30px;


}



.rg-banner-content h3{


font-size:32px;

margin-bottom:10px;


}



.rg-banner-content p{


font-size:16px;

}



/* =====================================================
Newsletter
===================================================== */


.rg-newsletter{


background:#111;

padding:80px 20px;

text-align:center;

color:white;


}



.rg-newsletter h2{


font-size:40px;

margin-bottom:15px;


}



.rg-newsletter p{


font-size:18px;

margin-bottom:30px;


}



/* =====================================================
Mobile
===================================================== */


@media(max-width:768px){



.rg-container{

padding-left:20px;

padding-right:20px;

}



.rg-section{

padding:45px 0;

}



.rg-section h2{


font-size:28px;


}



.rg-recipe-hero{


height:480px;


}



.rg-hero-content h1{


font-size:40px;


}



.rg-hero-content p{


font-size:18px;


}



.rg-category-card{


min-width:130px;

height:160px;


}



.rg-category-card img{


width:70px;

height:70px;


}



.rg-recipe-card{


min-width:280px;


}



.rg-recipe-image{


height:220px;


}



.rg-banner-grid{


grid-template-columns:1fr;


}



.rg-banner-card{


height:240px;


}



.rg-arrow{


display:none;


}


}
/* ===================================
 MOBILE FIX
 Royal Gourmet Recipe Center
=================================== */


@media(max-width:768px){



/* 防止整体横向溢出 */

.rg-recipe-center{

overflow:hidden;

width:100%;

}




/* ================= HERO ================= */


.rg-recipe-hero{


width:100%;

height:420px;

background-position:center center;

background-size:cover;


}



.rg-hero-content{


width:90%;

margin:auto;

padding:20px;


}



.rg-hero-content h1{


font-size:28px;

line-height:1.2;


}



.rg-hero-content p{


font-size:15px;

line-height:1.5;


}



.rg-primary-btn{


padding:12px 28px;

font-size:14px;


}





/* ================= SECTION TITLE ================= */


.rg-section h2{


font-size:24px;

margin-bottom:25px;

text-align:left;

padding-left:5px;


}





/* ================= CATEGORY ================= */


.rg-slider{


gap:18px;

padding-left:5px;


}



.rg-category-card{


min-width:90px;

height:auto;

background:transparent;

box-shadow:none;


}



.rg-category-card img{


width:70px;

height:70px;


}



.rg-category-card h3{


font-size:13px;

text-align:center;

line-height:1.2;


}





/* ================= RECIPE CARD ================= */


.rg-recipe-card{


min-width:280px;

width:280px;


}



.rg-recipe-image{


height:180px;

width:100%;


}



.rg-recipe-info{


padding:15px;


}



.rg-recipe-info h3{


font-size:18px;


}



.rg-meta{


font-size:12px;


}





/* ================= REMOVE SCROLLBAR ================= */


.rg-slider::-webkit-scrollbar{


display:none;


}


.rg-slider{


-ms-overflow-style:none;

scrollbar-width:none;


}





/* ================= ARROWS ================= */


.rg-arrow{


display:none;


}





/* ================= BANNER ================= */


.rg-banner-grid{


display:block;


}



.rg-banner-card{


display:block;

width:100%;

height:220px;

margin-bottom:20px;


}



.rg-banner-content{


left:20px;

bottom:20px;


}


.rg-banner-content h3{


font-size:24px;


}




/* ================= NEWSLETTER ================= */


.rg-newsletter{


width:100%;

padding:50px 20px;


}



.rg-newsletter h2{


font-size:28px;


}


}
/* Mobile horizontal swipe fix */

.rg-slider{

-webkit-overflow-scrolling:touch;

touch-action:pan-x;

overflow-x:auto;

overflow-y:hidden;

display:flex;

}


.rg-category-card{

flex:0 0 auto;

}
.rg-category-card{

min-width:110px;

}


.food-slider,
.grill-slider{

padding-right:30px;

}
/* ============================
 Mobile Slider Hint
============================ */


@media(max-width:768px){


.rg-slider-wrapper{

position:relative;

}



/* 右侧渐变遮罩 */

.rg-slider-wrapper::after{


content:"";

position:absolute;

right:0;

top:0;

width:45px;

height:100%;


background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.95)
);


pointer-events:none;


}




/* 滑动箭头 */


.rg-slider-wrapper::before{


content:"›";


position:absolute;


right:10px;


top:50%;


transform:translateY(-50%);


font-size:32px;


font-weight:300;


color:#c8102e;


z-index:10;


animation:

rgSlideHint 1.5s infinite;


}



@keyframes rgSlideHint{


0%{

transform:
translateY(-50%)
translateX(0);

opacity:.3;

}


50%{

transform:
translateY(-50%)
translateX(8px);

opacity:1;

}


100%{

transform:
translateY(-50%)
translateX(0);

opacity:.3;

}


}


}
/* =====================================
 Desktop Grill Category Layout Fix
===================================== */

@media(min-width:769px){


.grill-slider{


display:grid;

grid-template-columns:repeat(5,1fr);

gap:40px;

overflow:visible;

}



.grill-slider .rg-category-card{


min-width:0;

width:100%;

height:auto;

background:transparent;

box-shadow:none;


}



.grill-slider .rg-category-card img{


width:150px;

height:150px;

object-fit:contain;

margin:auto;

margin-bottom:20px;


}



.grill-slider .rg-category-card h3{


display:block;

font-size:18px;

font-weight:600;

text-align:center;

color:#111;

margin-top:10px;


}



/* 隐藏桌面箭头 */

.grill-slider + .rg-arrow,
.grill-slider ~ .rg-arrow{


display:none;


}



}