@font-face {
    font-family: "Circular Std";
    font-style: normal;
    font-weight: 450;
    src: url("../fonts/CircularStd/CircularStd-Book.ttf");

}

@font-face {
    font-family: "Circular Std";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/CircularStd/CircularStd-Bold.ttf");
}

@font-face {
    font-family: "Circular Std";
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/CircularStd/CircularStd-Medium.ttf");
}



:root {
  --bg: #f8f4ef;
  --panel: #ffffff;
  --ink: #2b2523;
  --text: #4f4f55;
  --muted: #77777c;
  --soft-line: #ede8e2;
  --blue: #2f9bd0;
  --green: #079c70;
  --danger: #ef3c2f;
  --shadow: 0 16px 34px rgba(39, 32, 27, 0.09);
  --blue-dark: #118db9;
  --cream: #faf6ef;
  --paper: #fffdfa;
  --charcoal: #555657;
  --line: #ddd8d1;
}

html {
  min-height: 100%;
}

.reviewer img{
  width:50px
}

img {
  display: block;
  max-width: 100%;
  width:100%;
  height:100%;
  object-fit: cover;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header .header_search_box{
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
    background:#fff;
    z-index:10020;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateX(100%);
    transition:
        transform .45s cubic-bezier(.4,0,.2,1),
        opacity .25s ease,
        visibility .25s ease;
}

.site-header .header_search_box.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(0);
}


.site-header .header_search_box form{
	width:min(520px, calc(100% - 90px));
}
ul li{
    list-style:none;
}
.site-header .header_search_box .header-search {
    width: 100%;
    height: 35px;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    
    font-size: 14px;
    line-height: 21px;
    box-shadow: none;
}
.site-header .header_search_box input[type="text"],
.site-header .header_search_box input[type="search"]{
	width:100%;
	height:44px;
	border:1px solid #ddd;
	padding:0 15px;
	font-size:16px;
}
.site-header .header_search_box .header-search::placeholder,
.site-header .header_search_box input::placeholder {
    color: #999;
    opacity: 1;
}

.site-header .hide-search-header{
	width:42px;
	height:42px;
	border:0;
	background:transparent;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
}

.site-header .hide-search-header svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

html,
body {
    overflow-x: hidden;
    background:var(--cream);
    font-family:'Circular Std',sans-serif!important
}

a,button,p,li,input,select,textarea,small,span{
    outline:none;
    vertical-align: middle;
    font-size:16px;
}
.header_noti {
    display: none
}

.site-header .logo {
    flex: 0 0 104px;
    width: 104px
}


.primary-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto
}

.primary-nav>a,
.primary-nav>.nav-item>a {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #34302c
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px
}

.menu-toggle {
    display: none
}

.has-submenu {
    position: relative
}

.has-submenu:hover .header-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.header-submenu a {
    display: block;
    padding: 9px 18px;
    white-space: nowrap
}

.nav-toggle-mobile {
    display: none
}

.section-light {
    background: var(--cream)
}


.class-card {
    border-radius: 6px
}

.card-image {
    aspect-ratio: 1.18
}

.card-image img {
    contain-intrinsic-size: 420px 290px
}


.story-wrap {
    max-width: 1040px
}

.story-row:first-of-type {
    margin-top: 72px
}


.story-copy {
    display: flex;
    flex-direction: column;
    justify-content: center
}


.community-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: center
}

.community-copy h2 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 48px;
    line-height: 1.12;
    margin: 0 0 18px
}

.photo-collage img {
    border-radius: 8px
}

.quest-tall {
    grid-row: span 2
}

.quest-wide {
    grid-column: span 2
}

.site-footer {
    background: #fffaf3;
    text-align: center;
}
.blog-grid .blog-card .card-body h3{
	min-height:64px;
}

.blog-intro-card{
	color:var(--muted);
	font-size:15px;
	line-height:1.55;
	min-height:70px;
	margin-bottom:16px;
}
.page_blog_default{
	margin:60px 0;
	text-align:center;
}

.page_list_number{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	gap:10px;
}

.page_list_number a,
.page_list_number span{
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:38px;
	height:38px;
	padding:0 10px;
	border:1px solid #1aaadd;
	background:#fff;
	color:#1aaadd;
	font-size:14px;
	font-weight:500;
	text-decoration:none;
}

.page_list_number a:empty,
.page_list_number span:empty{
	display:none;
}

.page_list_number .current,
.page_list_number a.current,
.page_list_number a:hover{
	background:#1aaadd;
	color:#fff;
}
.food-try-viewport{
	width:100%;
	overflow:hidden;
}

.list_cooking_try{
	display:flex !important;
	gap:24px;
	align-items:stretch;
	will-change:transform;
	touch-action:pan-y;
}

.list_cooking_try .item_cooking_try{
	flex:0 0 calc((100% - 48px) / 3);
	min-width:0;
}

.img_cooking_try{
	width:100%;
	height:auto;
	display:block;
}

.food-try-dots{
	margin-top:28px;
	display:flex;
	justify-content:center;
	align-items:center;
	gap:10px;
}

@media(max-width:1023px){
	.list_cooking_try .item_cooking_try{
		flex-basis:calc((100% - 24px) / 2);
	}
}

@media(max-width:767px){
	.list_cooking_try .item_cooking_try{
		flex-basis:82%;
	}
}
.page_blog_default .page_list_number a,
.page_blog_default .page_list_number span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:34px;
	height:34px;
	padding:0 10px;
	border:1px solid #1aaadd;
	color:#1aaadd;
	background:#fff;
	font-size:14px;
	text-decoration:none;
}

.page_blog_default .page_list_number .current,
.page_blog_default .page_list_number a:hover{
	background:#1aaadd;
	color:#fff;
}
.blog-card .card-actions{
	justify-content:flex-start;
}

.blog-card .book-now{
	min-width:120px;
}
.footer-inner {
    max-width: 980px
}

.footer-logo {
    margin: 0 auto 20px;
    width: 168px
}

.acknowledgement {
    max-width: 760px;
    margin: 0 auto 22px;
    color: #5e5853
}

.newsletter {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 8px auto 48px
}

.newsletter input {
    width: 250px;
    height: 36px;
    border: 1px solid #d9d1c8;
    padding: 0 12px
}

.newsletter button {
    height: 36px;
    border: 0;
    background: var(--blue);
    color: #fff;
    padding: 0 18px
}


.footer-panel {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.footer-awards {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 16px
}

.footer-awards-mobile {
    display: none
}

.copyright {
    margin: 44px 0 0;
    padding: 12px;
    background: #f7f1e9;
    color: #756d65;
    font-size: 12px
}

.testimonial-slider {
    display: flex;
    gap: 24px;
    will-change: transform
}

.card-body {
    padding: 15px 14px 13px;
}

.card-info-list {
    color: var(--muted);
    padding: 0;
}

.card-info-list li {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 5px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.25;
}

.card-info-list li::before {
    content: none;
    display: none;
}

.card-info-list svg {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    color: #37332f;
    stroke-width: 2;
}

.card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid #eee9e2;
}


.book-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 130px;
    min-height: 37px;
    padding: 7px 16px;
    background: var(--blue);
    border-radius: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.book-now:hover {
    background: var(--blue-dark);
    color: #fff;
}
h1{
    max-width: 640px;
    font-size: 80px;
    line-height: 86.4px;
    margin: 0;
    padding: 0;
    color: #fff;
    z-index: 100;
    position: relative;
    font-weight: 500;
}


.class-card .card-body {
    padding: 15px 14px 13px;
}

.class-card .card-body h3 {
    min-height: 52px;
    margin: 0 0 16px;
    color: var(--ink);
    
    font-size: 21px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.01em;
}

.class-card .card-body h3 a {
    color: inherit;
    text-decoration: none;
}

.class-card .card-info-list {
    min-height: 82px;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    color: var(--muted);
}

.class-card .card-info-list li {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 5px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.25;
}

.class-card .card-info-list li::before {
    content: none;
    display: none;
}

.class-card .card-info-list svg {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    color: #37332f;
}

.class-card .card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid #eee9e2;
}


.class-card .book-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 130px;
    min-height: 37px;
    padding: 7px 16px;
    background: var(--blue);
    border-radius: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.class-card .book-now:hover {
    background: var(--blue-dark);
    color: #fff;
}




* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    
    line-height: 1.55;
}


a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.center {
    display: flex;
    justify-content: center;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.site-header .icon-button {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: #333;
    position: relative;
    width: 30px;
    height: 32px;
    display: grid;
    place-items: center;
}

.site-header .icon-button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #302b28;
    color: #fff;
    
    display: grid;
    place-items: center;
}

.btn-nav {
    min-height: 32px;
    padding: 0 16px;
    background: var(--blue, #1aaadd);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.logo {
    position: relative;
    display: inline-flex;
    width: 104px;
    flex-direction: column;
    line-height: .75;
    color: #626262;
}


.logo span {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -1.16px;
}

.logo small {
    align-self: flex-end;
    margin: 5px 7px 0 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .4px;
}

.logo .dot {
    position: absolute;
    right: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.dot-a {
    top: 0;
    background: #ee6542;
}

.dot-b {
    top: 16px;
    background: #f0b62a;
}

.dot-c {
    top: 16px;
    background: #52b5ac;
}

.primary-nav a:hover {
    color: var(--blue-dark);
}

header .icon-button {
    border: 0;
    background: transparent;
    padding: 7px;
    cursor: pointer;
    color: #4c4b49;
    font-size: 30px;
    position: relative;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
}

header .icon-button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cart-button svg {
    width: 24px;
    height: 24px;
}

.cart-count {
    position: absolute;
    top: -2px;
    right: -1px;
    min-width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    padding: 0 4px;
    border-radius: 999px;
    color: #fff;
    background: #302b28;
    
    line-height: 1;
}

.nav-chevron {
    display: inline-flex;
    margin-left: 3px;
    vertical-align: middle;
}

.nav-chevron svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cart-button {
    margin-right: 15px;
}

.btn {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border: 1px solid transparent;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .02em;
    transition: .2s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-blue {
    color: #fff;
    background: var(--blue);
}

.btn-blue:hover {
    background: var(--blue-dark);
}

.btn-ghost {
    border-color: rgba(255, 255, 255, .75);
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.btn-outline {
    margin-top: 36px;
    color: var(--blue-dark);
    border-color: var(--blue);
    background: transparent;
}

.btn-nav {
    min-height: 32px;
    padding-inline: 15px;
}

.hero {
    position: relative;
    overflow: hidden;
    min-height: 1280px;
    display: flex;
    align-items: center;
}

.hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-shade {
    position: absolute;
    background: linear-gradient(180deg, rgba(44, 36, 32, 0.15) 0%, rgba(44, 36, 32, 0.25) 40%, rgba(44, 36, 32, 0.8) 80%, rgba(44, 36, 32, 0.92) 100%),
    linear-gradient(0deg, rgba(44, 36, 32, 0.4), rgba(44, 36, 32, 0.4));
    z-index: 2;
}

.hero-inner {
    position: relative;
    z-index: 3;
}
.events-read-wrap,.text-center{
  text-align: center;
  margin-top: 3%;
}
.eyebrow {
    margin: 0 0 16px;
    margin-bottom: 16px;
    letter-spacing: 3px;
    color: var(--blue);
    text-transform: uppercase;
        z-index: 100;
    position: relative;
}
.events-read-toggle,.btn_load_more{
    padding: 12px 24px;
    border: 1px solid #2C99CE;
    color: #2C99CE;
    border-radius: 4px;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 4%;
}


.hero-copy> :first-child {
    margin-top: 0;
}

.hero-copy> :last-child {
    margin-bottom: 0;
}

.hero-meta li {
    position: relative;
    padding-left: 16px;
}

.hero-meta li::before {
    content: "✦";
    position: absolute;
    left: 0;
    color: var(--blue);
}

#gathering {
    padding-bottom: 3%;
}

.hero-meta b {
    color: #fff;
    font-weight: 600;
}



h2 {
    margin: 0;
    font-size: 44px;
    line-height: 50px;
}
h3,h3 a{
    margin: 0;
    font-size: 25px;
    line-height: 27.5px;
        display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.align-center {
    text-align: center;
    margin-bottom: 4%;
}

.class-card {
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e9e4dd;
    border-radius: 4px;
    box-shadow: 0 3px 16px rgba(60, 52, 46, .06);
    transition: .22s ease;
}

.class-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 22px rgba(60, 52, 46, .12);
}

.card-image {
    position: relative;
    aspect-ratio: 1.05;
    overflow: hidden;
}

.heart {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 35px;
    height: 35px;
    font-size: 26px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .85);
    border-radius: 50%;
}

.card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #eee9e2;
    padding-top: 16px;
}

.card-foot b {
    font-size: 16px;
    font-weight: 500;
}

.header_noti,
.header_noti_title {
    height: 32px;
    min-height: 32px;
}

.header_noti_title_span,
.header_noti_title_span p,
.header_noti_title_span strong,
.header_noti_title_span span,
.header_noti_title_span em,
.header_noti_title_span a {
    font-size: 15px;
    line-height: 32px;
}




.site-header .primary-nav,
.site-header .nav-item,
.site-header .has-submenu {
    height: 78px;
    min-height: 78px;
}

.site-header .primary-nav>a,
.site-header .primary-nav .nav-item>a {
    height: 78px;
    min-height: 78px;
    font-size: 16px;
    line-height: 1;
}

.hero-copy p{
  text-align: left !important;
}

.site-header .btn-nav {
    flex-basis: 126px;
    width: 126px;
    min-width: 126px;
    height: 42px;
    min-height: 42px;
    font-size: 16px;
}
.booking-unavailable{
    text-align:center;
    padding:10px 0;
}

.booking-unavailable p{
    margin-bottom:20px;
    color:#444;
    line-height:1.6;
}

.btn-contact-unavailable{
    display:block;
    width:100%;
    background:#2EA3D7;
    color:#fff !important;
    text-decoration:none;
    border-radius:6px;
    padding:14px 20px;
    font-size:18px;
    font-weight:600;
    transition:.25s;
}

.btn-contact-unavailable:hover{
    background:#1d8dc0;
    color:#fff !important;
}
.hero-copy {
    max-width: 780px;
    top:15px;
    color: rgba(255, 255, 255, .85);
    font-size: 16px;
    line-height: 1.65;
    z-index: 100;
    position: relative;
}
.btn-newsletter-popup{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:9px;
	height:33px;
	padding: 8px 32px;
	border:0;
	border-radius:3px;
	background:#2f9ed3;
	color:#fff;
	font-size:14px;
	font-weight:700;
	line-height:1;
	cursor:pointer;
}

.btn-newsletter-popup:hover{
	background:#238fc2;
	color:#fff;
}

.btn-newsletter-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
}

.newsletter-modal{
	position:fixed;
	inset:0;
	z-index:99999;
	display:none;
	align-items:center;
	justify-content:center;
	padding:16px;
}

.newsletter-modal.is-open{
	display:flex;
}

.newsletter-modal-overlay{
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.35);
}

.newsletter-modal-box{
	position:relative;
	width:100%;
	max-width:634px;
	background:#fff;
	border-radius:8px;
	padding:50px 88px 48px;
	text-align:center;
	box-shadow:0 16px 60px rgba(0,0,0,.18);
}

.newsletter-modal-close{
	position:absolute;
	top:14px;
	right:18px;
	width:34px;
	height:34px;
	border:0;
	background:transparent;
	color:#555;
	font-size:38px;
	line-height:30px;
	font-weight:300;
	cursor:pointer;
}

.newsletter-modal-box h2{
	margin:0 0 14px;
	font-size:40px;
	line-height:1.1;
	font-weight:700;
	color:#2d2725;
	font-family:Georgia, 'Times New Roman', serif;
}

.newsletter-modal-desc{
	margin:0 auto 38px;
	max-width:520px;
	color:#302927;
	font-size:17px;
	line-height:1.35;
}

.newsletter-modal-form{
	display:block;
}

.newsletter-modal-form input{
	width:100%;
	height:41px;
	border:1px solid #b8dff0;
	border-radius:3px;
	background:#fff;
	padding:0 13px;
	margin-bottom:9px;
	font-size:14px;
	color:#333;
	outline:none;
}

.newsletter-modal-form input:focus{
	border-color:#2f9ed3;
}

.newsletter-modal-form button{
	width:100%;
	height:41px;
	border:0;
	border-radius:3px;
	background:#2f9ed3;
	color:#fff;
	font-size:14px;
	font-weight:500;
	cursor:pointer;
}

.newsletter-modal-form button:hover{
	background:#238fc2;
}

.newsletter-note{
	margin:17px auto 0;
	max-width:470px;
	color:#5a5552;
	font-size:14px;
	line-height:1.35;
}

body.newsletter-open{
	overflow:hidden;
}
.hero-buttons .btn{
  padding: 12px 32px;
}

.hero-meta {
    display: flex;
    gap: 38px;
    margin: 35px 0 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, .75);
    font-size: 16px;
    margin-top: 4%;
}

.classes {
    padding: 58px 0 70px;
}


.section-heading .eyebrow,
.community-copy .eyebrow,
.story-copy .eyebrow,
.cta-inner .eyebrow {
    
    letter-spacing: .28em;
}
.class-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    margin-top: 28px;
}

.card-info-list svg {
    flex-basis: 12px;
    width: 12px;
    height: 12px;
}

.card-actions {
    margin-top: 8px;
    padding-top: 11px;
}

.card-price span
 {
    color:#58585A;
    
}
.card-price strong{
    font-size: 25px;
    
}


.center {
    margin-top: 34px;
}


.story-copy {
    padding: 30px 0 30px 42px;
}

.story-reverse .story-copy {
    padding: 30px 42px 30px 0;
}

.story-copy h3 {
    font-size: 32px;
    line-height: 1.16;
    margin: 0 0 13px;
}

.story-copy>div,
.story-copy>div p {
    font-size: 14px;
    line-height: 1.55;
}

.community-grid {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.community-copy h2,
.cta-inner h2 {
    font-size: clamp(32px, 3.7vw, 48px);
    line-height: 1.08;
}

.community-copy>p:not(.eyebrow),
.cta-inner>p:not(.eyebrow) {
    font-size: 14px;
    line-height: 1.65;
}

.photo-collage img {
    border-radius: 9px;
}

.cta-section {
    min-height: 430px;
}

.cta-inner {
    max-width: 640px;
}

.site-footer .footer-logo {
    width: 132px;
    margin-bottom: 20px;
}

.site-footer .footer-logo img {
    width: 132px;
    max-width: 132px;
    aspect-ratio: 224 / 118;
}

.site-footer .acknowledgement {
    max-width: 760px;
    margin-bottom: 18px;
    
    line-height: 1.45;
}


.site-footer .footer-panel a {
    margin-bottom: 9px;
    
}

@supports (content-visibility: auto) {
    .classes,
    .why-section,
    #stories,
    #gathering,
    .cta-section,
    .site-footer {
        content-visibility: auto;
        contain-intrinsic-size: 900px;
    }
}
.card-foot a {
    padding: 7px 16px;
    background: var(--blue);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.why-section {
    overflow: hidden;
    padding: 90px 0 72px;
    background: var(--charcoal);
    color: #fff;
}

.light-heading h2 {
    color: #fff;
}

.light-heading h2 em {
    color: #e5be8d;
    font-weight: 600;
}

.light-heading>p:last-child {
    margin-top: 20px;
    font-size: 16px;
}

.story-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    margin-top: 0;
}

.story-row:first-of-type {
    margin-top: 516px;
}

.story-copy>p:last-child {
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: 16px;
}

.story-reverse {
    grid-template-columns: .87fr 1.13fr;
}

.story-reverse img {
    grid-column: 2;
}

.story-row.story-reverse {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.story-reverse .story-copy {
    grid-column: 1;
    grid-row: 1;
    padding: 38px 48px 38px 0;
}

.testimonial {
    position: relative;
    max-width: 900px;
    margin: 50px auto 0;
    padding: 36px 44px 30px;
    background: #fff;
    border: 1px solid #ebe6df;
    border-radius: 5px;
    box-shadow: 0 4px 16px rgba(66, 57, 49, .06);
    min-width: 0;
    flex: 0 0 calc((100% - 416px) / 2);
}


.quote-mark {
    position: absolute;
    top: 15px;
    right: 44px;
    color: #c7edf7;
    
    font-size: 142px;
    line-height: 1;
}

blockquote {
    margin: 18px 0 22px;
    font-family: Georgia, serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.75;
}

.participant span {
    min-width: 0;
    white-space: nowrap;
    font-size: 16px
}

.reviewer {
    display: flex;
    align-items: center;
    gap: 16px;
}

#stories {
    padding-top: 4%;
}

.reviewer>span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #c5d91a;
    font-weight: 700;
}

.reviewer p {
    margin: 0;
    line-height: 1.2;
}

.reviewer b,
.reviewer small {
    display: block;
    font-size: 16px;
}

.reviewer small {
    color: var(--muted);
}

.testimonial-viewport{
	width:min(820px, calc(100vw - 32px));
	max-width:820px;
	margin:50px auto 0;
	overflow:hidden;
	padding:16px 0;
	transform:none;
}

.testimonial-slider{
	display:flex;
	gap:24px;
	width:100%;
	will-change:transform;
	touch-action:pan-y;
}

.testimonial{
	flex:0 0 100%;
	max-width:100%;
	width:100%;
	margin:0;
}

.testimonial-slider {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: var(--slide-gap);
    width: 100%;
    margin: 0;
    transition: none;
    will-change: transform;
    touch-action: pan-y;
    backface-visibility: hidden;
}

.slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 16px 0 26px;
}

.slider-dots button {
    border: 0;
    cursor: pointer;
}

.slider-arrow {
    width: 28px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--blue);
    font-size: 28px;
}

.slider-arrow:hover {
    background: #eaf7fb;
}

.slider-dot-list {
    display: flex;
    align-items: center;
    gap: 7px;
}

.slider-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border-radius: 50%;
    background: #c8dce3;
    transition: width .2s ease, background .2s ease;
}

.slider-dot.active {
    width: 18px;
    border-radius: 4px;
    background: var(--blue);
}

.slider-dot:focus-visible,
.slider-arrow:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.community-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 65px;
    align-items: center;
}

.community-copy h2 {
    margin: 0 0 20px;
    font-size: 64px;
    line-height: 1.08;
}

.community-copy>p:not(.eyebrow) {
    color: #5f5a55;
    font-size: 16px;
    line-height: 1.65;
}

.photo-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.photo-collage .quest-tall {
    grid-row: 1 / span 2;
    aspect-ratio: 280 / 388;
}

.photo-collage .quest-small {
    aspect-ratio: 280 / 186;
}

.photo-collage .quest-wide {
    grid-column: 1 / -1;
    aspect-ratio: 576 / 186;
    border-radius: 10px;
}

.cta-section {
    position: relative;
    min-height: 550px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
}

.cta-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cta-shade {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: rgba(31, 34, 34, .58);
}

.cta-inner {
    position: relative;
    z-index: 2;
    max-width: 700px;
    text-align: center;
}

.cta-inner h2 {
    margin: 0;
    font-size: 64px;
    line-height: 1.02;
}

.cta-inner>p:not(.eyebrow) {
    max-width: 620px;
    margin: 20px auto 24px;
    color: rgba(255, 255, 255, .82);
    font-size: 16px;
}

.cta-inner .hero-buttons {
    justify-content: center;
}



.footer-logo span {
    font-size: 31px;
}

.footer-logo small {
    font-size: 16px;
}

.acknowledgement {
    max-width: 670px;
    margin: 0 auto;
    color: #625d58;
    font-size: 16px;
    line-height: 1.55;
}

.newsletter-label {
    margin-bottom: 7px;
    font-size: 16px;
}

.site-footer .footer-heading {
    appearance: none;
    width: 100%;
    margin: 0 0 26px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #555657;
    text-align: center;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 18px;
}

.site-footer .footer-group+.footer-group {
    margin-top: 34px;
}

#nav-cooking-class a{
	position:relative;
}

#nav-cooking-class a.active{
	color:#1298db;
}

#nav-cooking-class a.active:after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:-8px;
	height:2px;
	background:#1298db;
}
.site-footer .newsletter-label,
.site-footer .newsletter {
    display: none;
}

.site-header .hide-search-header {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.newsletter {
    display: flex;
    width: 340px;
    max-width: 100%;
    margin: auto;
}

.newsletter input {
    min-width: 0;
    flex: 1;
    border: 1px solid #d8d2cb;
    padding: 16px 16px;
}

.newsletter button {
    border: 0;
    padding: 16px 14px;
    color: #fff;
    background: var(--blue);
    font-size: 16px;
    cursor: pointer;
}

.footer-columns h5 {
    margin: 0 0 14px;
    
    
    text-transform: uppercase;
}

.footer-columns h5:not(:first-child) {
    margin-top: 24px;
}

.footer-columns a {
    display: block;
    margin-bottom: 16px;
    color: #3f3a36;
    font-size: 14px;
}

.footer-columns a:hover {
    color: var(--blue-dark);
}

.footer-columns .map-link {
    color: #ef5547;
}


.header_noti {
    width: 100%;
    height: 42px;
    min-height: 42px;
    margin: 0;
    padding: 0;
    background: #cde617;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.header_noti_title {
    width: 100%;
    height: 42px;
    min-height: 42px;
    margin: 0;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.header_noti_title_span,
.header_noti_title_span p,
.header_noti_title_span strong,
.header_noti_title_span span,
.header_noti_title_span em,
.header_noti_title_span a {
    margin: 0;
    padding: 0;
    color: #3f4145;
    
    font-size: 17px;
    font-weight: 700;
    line-height: 42px;
}

.header_noti_title_span p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.recipes-index-page .recipes-filter-row.nav-recipes {
  border: 0;
  padding: 0;
  margin-bottom: 11px;
  gap: 8px 10px;
  justify-content: flex-start;
}
.header_noti_title_span br {
    display: none;
}
.eyebrow-light{
    color:#fff;
    z-index: 100;
    position: relative;
}
.header_noti_title_span a,
.header_noti_title_span span[style*="underline"] {
    text-decoration: underline;
}
.site-header {
    position: relative;
    z-index: 10000;
    background: var(--cream);
}
#nav-cooking-class{
	position:relative;
	z-index:9998;
      background: #fbf8f3;
}
.visiblehidden{
  visibility: hidden;
}
.is-fixed{
	position:fixed !important;
	left:0;
	right:0;
	width:100%;
	z-index:10040;
	box-shadow:0 2px 8px rgba(0,0,0,.04);
}

.header-placeholder,
.nav-cooking-placeholder{
	display:none;
	height:0;
}

.header-placeholder.active,
.nav-cooking-placeholder.active{
	display:block;
}


.site-header .nav-wrap.container,
.site-header .nav-wrap {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 320px;
    overflow:visible;
}

.site-header .logo {
    grid-column: 1;
    width: 140px;
    max-width: 140px;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 1;
    color: inherit;
}

.site-header .logo img {
    width: 121px;
    height: 64px;
    margin: 0;
    padding: 0;
    object-fit: contain;
}

.site-header .logo span,
.site-header .logo small,
.site-header .logo .dot {
    display: none;
}




.site-header .primary-nav>a,
.site-header .primary-nav .nav-item>a {
    height: 115px;
    min-height: 115px;
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 17px;
    font-weight: 700;
    line-height: 115px;
    text-transform: uppercase;
    color: #3f4145;
    text-decoration: none;
    white-space: nowrap;
}

.catalog-title{
	position:relative;
	margin-bottom:40px;
}

.catalog-title h2{
	margin:0;
	padding-right:180px;
}

.catalog-title .cat-class-count{
	position:absolute;
	right:0;
	top:20px;
	color:#6b625d;
	font-size:18px;
}
.catalog-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    color: #2f2a25;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none;
    transition: color .18s ease;
}

.catalog-tabs a:hover,
.catalog-tabs a.active {
    color: var(--blue);
}

.catalog-content {
    padding-top: 28px;
}
.catalog-menu{
    padding: 1% 0;
}
.events-page .events-about-content.is-structured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 62px;
  margin-top: 5%;
}

.events-page .events-about-content.is-structured .events-about-copy p,
.events-page .events-about-content.is-structured .events-about-copy ul,
.events-page .events-about-content.is-structured .events-about-copy ol {
  margin: 0;
}

.events-page .events-about-content.is-structured .events-about-copy p + p,
.events-page .events-about-content.is-structured .events-about-copy ul + p,
.events-page .events-about-content.is-structured .events-about-copy ol + p {
  margin-top: 8px;
}

.events-page .events-about-content.is-structured .events-about-copy strong {
  color: #4a4039;
  font-weight: 600;
}

.filter-panel {
    position: relative;
    margin: 0 0 34px;
    padding: 0 0 22px;
    border-bottom: 1px solid #e9e1d8;
}

.legacy-filter-row {
    display: none !important;
}

.mobile-filter-bar {
    display: none;
}

.filter-row,
.active-filters {
    display: flex;
    align-items: center;
    gap: 8px 16px;
    flex-wrap: wrap;
}

.filter-row {
    justify-content: flex-start;
    padding-top:2%;
}
.catalog-tabs .catalog-menu > a:nth-child(2),.catalog-tabs .catalog-menu > a:nth-child(3),.catalog-tabs .catalog-menu > a:nth-child(4),.catalog-tabs .catalog-menu > a:nth-child(5){
    margin-left:20px;
}
.filter-row b {
    margin-left: auto;
    color: #7d756c;
    
    font-weight: 500;
}

.filter-label,
.active-filters span {
    color: #2f2a25;
    font-size: 15px;
    font-weight: 450;
    letter-spacing: 0;
    text-transform: none;
}

.filter-row select,
.filter-popover-toggle,
.filter-select-btn,
.clear-filters,
.active-filters button {
    height: 33px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #ded8d0;
    border-radius: 0;
    color: #2d2824;
    font-size: 15px;
    line-height: 33px;
}

.filter-row select {
    min-width: 132px;
}

.filter-popover-toggle,
.filter-select-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    cursor: pointer;
}

.filter-popover-toggle {
    min-width: auto;
    gap: 5px;
    border-color: transparent;
    background: transparent;
}

.filter-select-btn.filter-blue {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.filter-toggle-icon {
    font-size: 0;
    line-height: 1;
}

.filter-toggle-icon::before {
    content: "\2637";
    
}

.filter-row select.has-value {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.clear-filters {
    background: transparent;
    border-color: transparent;
    color: #7d756c;
    cursor: pointer;
}

.active-filters {
    margin-top: 18px;
}

.active-filters button {
    height: 32px;
    background: #f3eee8;
    border: 0;
    color: #6d655e;
    line-height: 32px;
    cursor: pointer;
}

.filter-popover {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 130;
    width: min(338px, calc(100vw - 32px));
    background: #fff;
    border: 1px solid #eee8e1;
    box-shadow: 0 18px 42px rgba(44, 36, 29, .12);
}

.filter-popover-open .filter-popover {
    display: block;
}

.filter-popover-inner {
    max-height: min(520px, calc(100vh - 170px));
    overflow-y: auto;
    padding: 18px 18px 14px;
}

.filter-group {
    margin: 0 0 18px;
}

.filter-group:last-child {
    margin-bottom: 0;
}

.filter-group p {
    margin: 0 0 9px;
    color: #6d655e;
    
    font-weight: 700;
    letter-spacing: .24em;
    line-height: 1.2;
    text-transform: uppercase;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    margin: 0 5px 8px 0;
    padding: 0 10px;
    background: #fff;
    border: 1px solid #ddd8d1;
    border-radius: 2px;
    color: #211d19;
    
    line-height: 28px;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.filter-chip.is-active,
.filter-chip:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.listCatClass {
    scroll-margin-top: 118px;
    padding-top: 0
}
.notbannerhome{
    padding: 3% 0;
}
.filter-drawer-overlay,
.filter-drawer {
    display: none;
}

body.filter-drawer-open {
    overflow: hidden;
}
.site-header .primary-nav>a:hover,
.site-header .primary-nav .nav-item>a:hover,
.site-header .primary-nav .color_light_blue {
    color: var(--blue-dark, #118db9);
}

.site-header .nav-item,
.site-header .has-submenu {
    position: relative;
    height: 115px;
    min-height: 115px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.site-header .nav-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
}

.site-header .nav-chevron svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.recipe-page{
  padding-top: 4%;
}

.recipe-page .mock-label,
.recipe-page .site-header {
  display: none;
}

.recipe-page svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.recipe-page .recipe-actions a {
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #3d3935;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}

.recipe-page .recipe-actions a:hover {
  color: var(--blue, #2f9bd0);
}

.recipe-page .recipe-actions a svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
}

.recipe-page .recipe-rating-hook {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.recipe-page .recipe-step-image {
  margin: 0 0 10px;
}

.recipe-page .recipe-step-image img {
  border-radius: 6px;
}

.recipe-page .recipe-hero {
  position: relative;
}

.recipe-page .recipe-title {
  margin: 0;
  color: var(--ink);
  
  font-size: 36px;
  font-weight: 600;
  line-height: 40px;
}

.recipe-page .recipe-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 16px;
  color: #4d4945;
  
  line-height: 1.4;
}

.recipe-page .recipe-meta span + span::before {
  content: "";
  width: 3px;
  height: 3px;
  margin-right: 14px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  background: #c6beb6;
}

.recipe-page .recipe-meta strong {
  color: #151515;
  font-weight: 600;
}

.recipe-page .rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
}

.recipe-page .stars {
  color: var(--blue);
  line-height: 1;
  letter-spacing: 1px;
}
.about-recipe h1{
  font-size: 36px;
      color: #1c1c1c;
}
.recipe-page .likes {
  color: #333;
  
}

.recipe-page .recipe-actions {
  position: absolute;
  top: 70px;
  right: 4px;
  display: flex;
  align-items: center;
  gap: 27px;
  margin: 0;
}

.recipe-page .recipe-actions button {
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #3d3935;
  background: transparent;
  
  cursor: pointer;
}

.recipe-page .recipe-actions svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
}

.recipe-page .recipe-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 47px;
}

.recipe-page .stat-card {
  height: 58px;
  border: 1px solid #e2ded9;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 17px;
  background: #fff;
}

.recipe-page .stat-icon {
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: #f2f0ec;
}

.recipe-page .stat-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

.recipe-page .stat-label {
  display: block;
  color: #77736f;
  
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.recipe-page .stat-value {
  display: block;
  margin-top: 3px;
  color: #111;
  
  font-weight: 700;
  line-height: 1.2;
}

.recipe-page .about-recipe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 64px;
  align-items: start;
  margin-top: 42px;
  padding-bottom: 46px;
  border-bottom: 1px solid var(--line);
}

.recipe-page .recipe-section-title {
  margin: 0 0 18px;
  color: var(--ink);
  
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}

.recipe-page .about-copy {
  max-width: 590px;
  margin: 0;
  color: #25211e;
  
  line-height: 1.72;
}

.recipe-page .recipe-photo {
  width: 420px;
  height: 250px;
  border-radius: 8px;
  display: block;
  object-fit: cover;
}

.recipe-page .recipe-content {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 58px;
  margin-top: 0;
  padding: 43px 10px 0;
}

.recipe-page .ingredients .recipe-section-title,
.recipe-page .directions .recipe-section-title {
  margin-bottom: 16px;
}

.recipe-page .ingredient-card {
  width: 300px;
  border: 1px solid #dfd5f5;
  border-radius: 9px;
  padding: 12px 15px 13px;
}

.recipe-page .ingredient-card + .ingredient-card {
  margin-top: 14px;
}

.recipe-page .ingredient-card.filling {
  background: #f3efff;
}

.recipe-page .ingredient-card.dough {
  border-color: #ecded0;
  background: #fff8f0;
}

.recipe-page .ingredient-card h3 {
  margin: 0 0 7px;
  color: var(--ink);
  
  font-size: 17px;
  font-weight: 400;
  line-height: 1.1;
}

.recipe-page .ingredient-card ul {
  margin: 0;
  padding-left: 18px;
  color: #56515c;
  
  line-height: 1.45;
}

.recipe-page .ingredient-card li::marker {
  color: #7a3fb7;
  font-size: 8px;
}

.recipe-page .ingredient-card.dough li::marker {
  color: #b75a22;
}

.recipe-page .steps {
  display: grid;
  gap: 24px;
}

.recipe-page .step {
  display: grid;
  grid-template-columns: 48px 24px minmax(0, 1fr);
  color: #5b5a5e;
  
  line-height: 1.55;
}

.recipe-page .step-number {
  color: #484441;
  
  line-height: 20px;
}

.recipe-page .step-dot {
  position: relative;
  width: 24px;
}

.recipe-page .step-dot::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 7px;
  z-index: 2;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--blue);
}

.recipe-page .step-dot::after {
  content: "";
  position: absolute;
  top: 18px;
  bottom: -27px;
  left: 12px;
  width: 1px;
  background: #e7e0d8;
}

.recipe-page .step:last-child .step-dot::after {
  display: none;
}

.site-header .nav-actions {
    justify-content: flex-end;
    gap: 18px;
}

.site-header .icon-button {
    flex: 0 0 30px;
    width: 30px;
    min-width: 30px;
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #000;
    display: grid;
    place-items: center;
    position: relative;
    cursor: pointer;
    overflow: visible;
}

.site-header .icon-button svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-header .cart-button {
    flex: 0 0 30px;
    margin: 0;
    display: grid;
    place-items: center;
}

.site-header .cart-count {
    position: absolute;
    top: -8px;
    right: -7px;
    min-width: 16px;
    width: auto;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #302b28;
    color: #fff;
    
    line-height: 16px;
    display: grid;
    place-items: center;
}

.site-header .btn-nav {
    flex: 0 0 140px;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #1aaadd;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 18px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    transform: none;
}

.site-header .btn-nav:hover {
    background: var(--blue-dark, #118db9);
    color: #fff;
}

/* SUBMENU */

.site-header .header-submenu {
    position: absolute;
    top: 75px;
    left: 0;
    margin: 0;
    padding: 12px 0;
    background: #fff;
    border: 1px solid #eee8df;
    box-shadow: 0 16px 30px rgba(0, 0, 0, .12);
    z-index: 10001;
    min-width: 250px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: .18s ease;
}

.site-header .header-submenu a {
    height: auto;
    min-height: 0;
    margin: 0;
    border: 0;
    display: block;
    font-weight: bold;
    text-transform: none;
    color: #4f4b47;
    white-space: normal;
    text-align: left;
    
}

.site-header .header-submenu a:hover {
    color: var(--blue-dark, #118db9);
    background: #faf6ef;
}

.site-header .has-submenu:hover .header-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


.site-footer {
    background: var(--cream);
    color: #555657;
}

.site-footer .footer-inner {
    max-width: 1160px;
    width: 90%;
    padding: 40px 0 0;
    text-align: center;
    margin: 0 auto;
}

.site-footer .footer-logo {
    width: 220px;
    margin: 0 auto 34px;
    display: block;
}

.site-footer .footer-logo img {
    width: 220px;
    max-width: none;
}

.site-footer .acknowledgement {
    max-width: 1080px;
    margin: 0 auto 26px;
    color: #202020;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.35;
}

.site-footer .socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 2%;
}

.site-footer .socials a {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid #2C242033;
}

.site-footer .socials a i {
    color: #fff;
    font-size: 15px;
    line-height: 1;
}

.site-footer .newsletter-label,
.site-footer .newsletter {
    display: none;
}

.site-footer .footer-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 120px;
    text-align: center;
    padding-top: 3%;
}

.site-footer .footer-columns h5 {
    margin: 0 0 26px;
    color: #555657;
    font-size: 21px;
    font-weight: 700;
    text-transform: none;
    
}

.site-footer .footer-columns h5:not(:first-child) {
    margin-top: 34px;
}

.site-footer .footer-columns a {
    display: block;
    margin: 0 0 18px;
    color: #555657;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;
}

.site-footer .footer-columns .map-link {
    color: #ef5547;
}

.site-footer .footer-awards {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.site-footer .footer-awards img {
    width: 63px;
    height: 68px;
    object-fit: contain;
}

.site-footer .copyright {
    margin: 0;
    padding: 18px 20px;
    background: #272727;
    color: #fff;
    border-top: 0;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

#backTop {
    position: fixed;
    right: 26px;
    bottom: 66px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #cde617;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    font-size: 18px;
}
.site-footer .footer-awards-mobile {
    display: none;
}
#backTop i {
    color: #fff;
}


.site-header {
  height: 66px;
  border-bottom: 1px solid #dfd8d0;
  background: #faf7f2;
}

.header-inner {
  width: min(920px, calc(100% - 40px));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
}



.logo {
  width: 84px;
  height: auto;
  flex: 0 0 auto;
}

.main-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  color: #111;
  
  font-weight: 500;
  white-space: nowrap;
}

.nav-link.with-caret::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 7px;
  display: inline-block;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 19px;
}

.icon-button {
  width: 22px;
  height: 22px;
  border: 0;
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: #111;
  background: transparent;
  cursor: pointer;
}

.icon-button svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.menu-button {
  display: none;
}

.cart-button {
  position: relative;
}

.cart-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 12px;
  height: 12px;
  padding: 0 3px;
  border-radius: 999px;
  color: #fff;
  background: #222;
  
  line-height: 12px;
}


.book-button {
  width: 88px;
  height: 34px;
  font-weight: 500;
}

.page-title,
.serif-title {
  margin: 0;
  color: var(--ink);
  
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0;
}

/* Checkout */
.checkout-main {
  margin: 37px auto 90px;
}


.checkout-form {
  min-width: 0;
}

.checkout-main .page-title {
  margin-bottom: 36px;
  font-size: 31px;
}

.checkout-section {
  position: relative;
  padding-bottom: 37px;
  border-bottom: 1px solid #dfd8d0;
}

.checkout-section + .checkout-section {
  margin-top: 38px;
}

.checkout-section:last-of-type {
  border-bottom: 0;
}

.checkout-main .gift-note {
  margin-top: 17px;
  min-height: 61px;
  padding: 14px 16px;
  border: 1px solid #e1d9d1;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  color: #66666c;
  background: #faf7f4;
  font-size: 14px;
  line-height: 1.35;
}

.checkout-main .gift-note svg {
  width: 18px;
  height: 18px;
  stroke: #555;
}

.checkout-main .gift-note span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
.section-number {
  color: #68615b;
  
  letter-spacing: 0.05em;
  font-weight:bold;
}

.section-number::after {
  content: "";
  width: 3px;
  height: 3px;
  margin-left: 5px;
  border-radius: 50%;
  display: inline-block;
  background: currentColor;
  vertical-align: middle;
}

.section-title {
  margin: 0;
  
  font-size: 21px;
  line-height: 1.15;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 13px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  color: #535252;
  
}

.required {
  color: #e35a44;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid #dedede;
  border-radius: 2px;
  color: #333;
  background: #fff;
  outline: 0;
}

.field input,
.field select {
  height: 45px;
  padding: 0 10px;
  
}

.field textarea {
  min-height: 55px;
  padding: 10px;
  resize: vertical;
  
}

.field input::placeholder,
.field textarea::placeholder {
  color: #aaa;
}

.recipient-block {
  margin-top: 10px;
}

.recipient-block + .recipient-block {
  margin-top: 13px;
}

.recipient-label {
  margin: 0 0 8px;
  color: #222;
  
  font-size: 16px;
}

.recipient-subtitle {
  margin: 0 0 8px;
  
  font-weight: 700;
}

.recipient-name {
  margin: 0 0 6px;
  
  font-weight: 700;
}

.payment-tabs {
  margin-top: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #d9d4ce;
  border-bottom: 0;
}

.payment-tab {
  height: 34px;
  border: 0;
  border-bottom: 1px solid #d9d4ce;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #222;
  background: #fff;
  position: relative;
  cursor: pointer;
  text-decoration: none;
}
.payment-tab input {
  width: auto;
  margin: 0;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.payment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  
  line-height: 1;
}

.payment-tab.active {
  color: #fff;
  background: var(--blue);
}

.payment-fields {
  margin-top: 14px;
}

.bank-transfer-panel {
  display: none;
  margin-top: 12px;
  border: 1px solid #e0dbd4;
  background: #fbf7f1;
  scroll-margin-top: 78px;
}

.bank-row {
  min-height: 48px;
  border-bottom: 1px solid #eee7df;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 11px 15px;
  color: #1f1f22;
}
.stripe-card-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
  padding-top: 2%;
}

.stripe-field {
  min-width: 0;
}

.stripe-field-full {
  grid-column: 1 / -1;
}

.stripe-field label {
  display: block;
  margin: 0 0 8px;
  color: #625f61;
  line-height: 1;
}

.stripe-input {
  height: 34px;
  border: 1px solid #ddd9d4;
  border-radius: 3px;
  padding: 9px 12px;
  background: #fff;
}
.bank-transfer-content,
.bank-note {
  color: #625f61;
  
  line-height: 1.4;
}

.bank-transfer-content {
  padding: 0;
}

.bank-row {
  min-height: 64px;
  padding: 14px 18px;
  border-bottom: 1px solid #eee7df;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.bank-label {
  display: block;
  margin-bottom: 5px;
  color: #6f6b67;
  
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bank-row strong {
  color: #111;
  
  font-weight: 500;
}

.copy-bank {
  min-width: 64px;
  height: 26px;
  border: 1px solid #e0dbd4;
  border-radius: 0;
  background: #fffaf4;
  color: #5a5754;
  cursor: pointer;
}
.stripe-input.StripeElement--focus {
  border-color: var(--checkout-blue);
  box-shadow: 0 0 0 2px rgba(45, 157, 205, .14);
}
.bank-note {
  padding: 18px;
}
.bank-row span {
  color: #77706b;
  letter-spacing: 0.12em;
}

.bank-row strong {
  font-weight: 500;
}

.bank-row.with-copy {
  grid-template-columns: minmax(0, 1fr) 50px;
}

.bank-row.with-copy span,
.bank-row.with-copy strong {
  grid-column: 1;
}
.terms-note {
  display: none;
  margin: 0;
  color: #5a5754;
  line-height: 1.45;
}
.copy-button {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  height: 20px;
  border: 1px solid #e2ddd6;
  border-radius: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #555;
  background: #fff;
  
  cursor: pointer;
}

.copy-button svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
}

.bank-note {
  padding: 13px 15px 15px;
  color: #625f61;
  
  line-height: 1.35;
}

.bank-note p {
  margin: 0;
}

.bank-note p + p {
  margin-top: 12px;
}

.checkout-page:has(#bank-transfer:target) .card-payment-panel,
.checkout-page:has(#bank-transfer:target) .complete-payment {
  display: none;
}

.checkout-page:has(#bank-transfer:target) .bank-transfer-panel {
  display: block;
}

.checkout-page:has(#bank-transfer:target) .payment-tab-card {
  color: #222;
  background: #fff;
}

.checkout-page:has(#bank-transfer:target) .payment-tab-bank {
  color: #fff;
  background: var(--blue);
}

.complete-payment {
  width: 100%;
  margin-top: 38px;
  font-weight: 600;
  height: 54px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
}

.order-summary {
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.checkout-summary {
  position: sticky;
  top: 24px;
  padding: 21px 18px 18px;
}

.summary-details {
  display: block;
}

.mobile-summary-row {
  display: none;
}

.order-summary-title {
  margin: 0 0 20px;
  
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

.summary-item {
  position: relative;
  display: grid;
  grid-template-columns: 49px minmax(0, 1fr) 18px;
  gap: 9px;
  margin-bottom: 40px;
}

.summary-thumb {
  width: 49px;
  height: 46px;
  border-radius: 3px;
  object-fit: cover;
}

.summary-name {
  margin: 0 0 2px;
  
  font-size: 15px;
  font-weight: 700;
  line-height: 1.08;
}

.summary-gift {
  display: block;
  color: #168dce;
  
  font-weight: 700;
  line-height: 1.1;
}

.summary-meta {
  margin: 0 0 7px;
  color: #51515a;
  
  line-height: 1.25;
}

.summary-remove {
  width: 18px;
  height: 18px;
  border: 0;
  padding: 0;
  color: #777;
  background: transparent;
  cursor: pointer;
}

.summary-remove svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.summary-line {
  display: grid;
  grid-template-columns: 1fr 28px 48px;
  gap: 6px;
  color: #57575c;
  
  line-height: 2;
}

.summary-line .qty,
.summary-line .price {
  text-align: right;
}

.summary-subtotal {
  display: flex;
  justify-content: space-between;
  color: #57575c;
  
  line-height: 1.7;
}

.summary-divider {
  height: 1px;
  margin: 13px 0;
  background: #8f8a84;
}

.voucher-row {
  display: grid;
  grid-template-columns: 1fr 114px;
  gap: 16px;
  margin-top: 10px;
}

.voucher-row input {
  width: 100%;
  height: 40px;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
  padding: 0 10px;
  color: #333;
  
}

.voucher-row .btn {
  height: 28px;
  border-radius: 3px;
  
}

.total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 8px;
  
  font-weight: 700;
}

.total-price {
  
  font-size: 30px;
  font-weight: bold;
}

.gift-note {
  margin-top: 17px;
  min-height: 61px;
  padding: 14px 16px;
  border: 1px solid #e1d9d1;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 9px;
  color: #66666c;
  background: #faf7f4;
  line-height: 1.25;
}

.gift-note svg {
  width: 18px;
  height: 18px;
  stroke: #555;
}

.gift-note span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
.mock-label {
  height: 17px;
  padding-left: 1px;
  color: #b8b8b8;
  background: #f3f3f3;
  
  line-height: 17px;
}


.rating-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stars {
  color: #2e9fd5;
  font-size: 30px;
  letter-spacing: 1px;
}

.likes {
  color: #333;
  
}


.stat-card {
  height: 44px;
  border: 1px solid #e5e2de;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 12px;
  background: #fff;
}

.stat-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: #eef8fd;
}
.detail-page{
  padding-top: 1%;
}
.stat-icon svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
}

.stat-label {
  display: block;
  color: #77777c;
  
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stat-value {
  display: block;
  margin-top: 1px;
  color: #222;
  
}


.about-copy {
  margin: 0;
  max-width: 440px;
  color: #222;
  
  line-height: 1.75;
}


.ingredient-card {
  border: 1px solid #dfd8ef;
  border-radius: 7px;
  padding: 11px 14px;
}

.ingredient-card + .ingredient-card {
  margin-top: 10px;
}

.ingredient-card.filling {
  background: #f1eeff;
}

.ingredient-card.dough {
  border-color: #ebe0d1;
  background: #fff7ef;
}

.ingredient-card h3 {
  margin: 0 0 6px;
  
  
  font-weight: 400;
}

.ingredient-card ul {
  margin: 0;
  padding-left: 14px;
  color: #55515b;
  
  line-height: 1.55;
}

.ingredient-card li::marker {
  color: #7a3fb7;
}

.ingredient-card.dough li::marker {
  color: #bf5a21;
}

.steps {
  display: grid;
  gap: 19px;
}

.step {
  display: grid;
  grid-template-columns: 34px 18px 1fr;
  gap: 0;
  color: #5c5c61;
  
  line-height: 1.6;
}

.step-number {
  color: #555;
  
}

.step-dot {
  position: relative;
  width: 18px;
}

.step-dot::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}

/* Class detail */
.detail-page .site-header {
  height: 46px;
}

.detail-page .header-inner {
  width: min(690px, calc(100% - 40px));
}

.detail-page .logo {
  width: 74px;
}

.detail-page .main-nav {
  gap: 20px;
  
}

.detail-page .header-actions {
  gap: 17px;
}

.detail-page .book-button {
  width: 63px;
  height: 28px;
  
}

.detail-main {
    margin: 27px auto 70px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, 142px);
  gap: 4px;
  overflow: hidden;
  border-radius: 7px;
}


.gallery-main {
  grid-row: 1 / span 2;
}

.detail-layout{
  margin-top: 53px;
  display: grid;
  grid-template-columns: minmax(0, 951px) 292px;
  gap: 35px;
  align-items: start;
}
.checkout-layout{
    margin-top: 53px;
    display: grid;
    grid-template-columns: minmax(0, 948px) 484px;
    gap: 35px;
    align-items: start;
}
.class-overview {
  min-width: 0;
}

.detail-title {
  font-size: 36px;
}

.detail-intro {
  color: #3e3d42;
  line-height: 1.7;
}

.detail-rating-row {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #64646b;
  
}



.detail-social {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 17px;
}

.detail-social button {
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #555;
  background: transparent;
  
  cursor: pointer;
}

.detail-social svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.feature-grid {
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.feature-card {
  min-height: 39px;
  border: 1px solid #e8e4df;
  border-radius: 6px;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 9px;
  align-items: center;
  padding: 8px 11px;
  background: #fff;
}

.feature-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: #eef8fd;
}

.feature-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.feature-label {
  display: block;
  color: #84848a;
  font-size:12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.feature-value {
  display: block;
  margin-top: 1px;
  color: #222;
  font-size:12px;
  font-weight: 700;
  line-height: 1.2;
}

.detail-section {
  margin-top: 31px;
  padding-top: 28px;
  border-top: 1px solid #e3ddd6;
}

.detail-section:first-of-type {
  border-top: 0;
}

.detail-section-title {
  margin: 0 0 14px;
  
  font-size: 17px;
  line-height: 1.2;
}

.detail-copy {
  margin: 0;
  color: #37353a;
  
  line-height: 1.75;
}

.detail-copy + .detail-copy {
  margin-top: 12px;
}

.highlight-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
  color: #3d3d42;
  
}

.highlight-list li {
  position: relative;
  padding-left: 18px;
}

.highlight-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: #edf9fd;
  
  line-height: 1;
}

.experience-steps {
  display: grid;
  gap: 19px;
}

.experience-step {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  color: #57565d;
  
  line-height: 1.6;
}

.experience-dot {
  position: relative;
}

.experience-dot::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}

.experience-step strong {
  display: block;
  margin-bottom: 2px;
  color: #333137;
  
}

.ingredient-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

.ingredient-pill {
  height: 24px;
  border: 1px solid #e0e6dd;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  color: #333;
  
}

.ingredient-pill .count {
  margin-left: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #777;
  background: rgba(255, 255, 255, 0.72);
  
}

.ingredient-pill::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: auto;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.ingredient-pill.mint {
  background: #f0fbf7;
}

.ingredient-pill.cream {
  background: #fffaf2;
}

.ingredient-pill.aqua {
  background: #f1fbfb;
}

.ingredient-pill.lavender {
  background: #f3f0ff;
}

.ingredient-pill.rose {
  background: #fff1f2;
}

.ingredient-pill.sky {
  background: #eef5ff;
}

.map-image,
.map-frame {
  width: 100%;
  height: 151px;
  border: 1px solid #d9d9d9;
}

.map-image {
  object-fit: cover;
}

.map-frame {
  display: block;
  border: 0;
}

.address {
  margin: 0 0 10px;
  color: #4a484e;
  
}

.location-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 7px;
}

.arrival-card,
.question-card {
  min-height: 88px;
  padding: 14px;
}

.arrival-card {
  border: 1px solid #e3ddd6;
  background: #fff;
}


.detail-wide {
  grid-column: 1 / -1;
}

.detail-wide.detail-section {
  margin-top: 2px;
  padding-top: 38px;
}

.menu-section .detail-section-title,
.things-section .detail-section-title,
.faq-section .detail-section-title,
.reviews-section .detail-section-title {
  margin-bottom: 24px;
  font-size: 29px;
}

.menu-section .ingredient-pills {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.menu-section .ingredient-pill {
  min-height: 53px;
  height: auto;
  border-radius: 12px;
  gap: 10px;
  padding: 0 18px;
  color: #292929;
  
  font-size: 20px;
}

.menu-section .ingredient-pill .pill-icon {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  color: #5b5d61;
  flex: 0 0 auto;
}

.menu-section .ingredient-pill .pill-icon svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
}

.menu-section .ingredient-pill .count {
  margin-left: 4px;
  padding: 4px 12px;
  color: #5f6065;
  background: rgba(255, 255, 255, 0.78);
  
  font-size: 14px;
  line-height: 1;
}

.menu-section .ingredient-pill::after {
  width: 7px;
  height: 7px;
  border-width: 2px;
}

.location-section .map-frame {
  height: 500px;
  border: 0;
}

.reviews-section {
  border-top: 1px solid #e4ded7;
}

.reviews-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}

.reviews-heading h2 {
  margin: 0;
  
  font-size: 26px;
  line-height: 1;
}

.reviews-heading h2 span {
  font-weight: 700;
}

.review-stars {
  color: var(--blue);
  font-size: 25px;
  letter-spacing: 2px;
  line-height: 1;
}

.review-stars.small {
  display: block;
  margin: 12px 0 8px;
  
  letter-spacing: 1px;
}

.reviews-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 44px;
}

.review-card {
  min-width: 0;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
}


.review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 22px;
}

.review-avatar.lime {
  background: #cee318;
}

.review-avatar.yellow {
  background: #ffc42b;
}

.review-avatar.red {
  background: #de5146;
}

.review-avatar.gray {
  background: #5d5d60;
}

.review-author strong,
.review-author small {
  display: block;
}

.review-author strong {
  color: #222;
  font-size: 14px;
}

.review-author small {
  color: #66666b;
  
}

.review-card p {
  margin: 0;
  color: #59595e;
  font-size: 14px;
  line-height: 1.55;
}
 .events-about.is-collapsed .events-about-item:nth-child(n+3) {
  display: none;
}
.things-section .things-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.thing-card {
  position: relative;
  min-height: 153px;
  border: 1px solid #e7e1db;
  border-left-width: 4px;
  padding: 16px 18px 18px;
  background: #fff;
}

.thing-card.purple {
  border-left-color: #d4c1ef;
}

.thing-card.green {
  border-left-color: #b9d7b9;
}

.thing-card.orange {
  border-left-color: #e6cfbb;
}

.thing-card.red {
  border-left-color: #e0b4b0;
}

.thing-card.blue {
  border-left-color: #b8c8ec;
}

.thing-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.thing-card.purple .thing-icon {
  color: #7c42bc;
  background: #f0e5ff;
}

.thing-card.green .thing-icon {
  color: #3b8c45;
  background: #e5f3e5;
}

.thing-card.orange .thing-icon {
  color: #c76b22;
  background: #ffeddc;
}

.thing-card.red .thing-icon {
  color: #c73931;
  background: #ffe4e2;
}

.thing-card.blue .thing-icon {
  color: #2d5fb5;
  background: #e4ecff;
}

.thing-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.thing-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  border-radius: 999px;
  padding: 5px 14px;
  color: #666;
  background: #f2f2f2;

  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.thing-card h3 {
  margin: 15px 0 12px;
  
  font-size: 17px;
  line-height: 1.15;
}

.thing-card p {
  margin: 0;
  color: #5d5d63;
  font-size: 14px;
  line-height: 1.35;
}
.recipes-index-page .recipes-drawer-header,
.recipes-index-page .recipes-drawer-footer {
  display: none;
}

.thing-card.question {
  border-color: #2b201b;
  color: #fff;
  background: #2b201b;
}

.thing-card.question h3 {
  margin-top: 0;
}

.thing-card.question p {
  color: #efe8e1;
}

.thing-card.question .contact-button {
  height: 36px;
  margin-top: 13px;
  border-radius: 9px;
  font-size: 14px;
}

.faq-section {
  padding-bottom: 34px;
}

.faq-section .detail-section-title {
  margin-bottom: 21px;
}

.faq-section .faq-list {
  border-top: 0;
}

.faq-section .faq-item {
  min-height: 40px;
  border-bottom: 1px solid #e4ded7;
  color: #2e2e31;
  font-size: 14px;
}

.faq-section .faq-item span:first-child {
  font-weight: 700;
}

.faq-section .faq-item span:last-child {
  font-size: 21px;
  font-weight: 400;
}
.arrival-icon {
  width: 22px;
  height: 22px;
  margin-bottom: 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #6a83d7;
  background: #eef2ff;
}

.arrival-card h3,
.question-card h3 {
  margin: 0 0 8px;
  
  
}

.arrival-card p,
.question-card p {
  margin: 0;
  color: #4d4b51;
  
  line-height: 1.55;
}

.arrival-badge {
  float: right;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f5f1eb;
  color: #777;
  
  font-weight: 700;
  text-transform: uppercase;
}

.question-card {
  color: #fff;
  background: #211610;
}

.question-card p {
  color: #d5cbc3;
}

.contact-button {
  width: 100%;
  height: 23px;
  margin-top: 12px;
  border-radius: 4px;
  color: #fff;
  background: var(--blue);
  
  font-weight: 700;
}

.faq-list {
  border-top: 1px solid #e4ded7;
}

.faq-item {
  min-height: 25px;
  border-bottom: 1px solid #e4ded7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333;
  
  font-weight: 700;
}

.booking-card {
  position: sticky;
  top: 22px;
  border-radius: 9px;
  padding: 17px 14px 12px;
  background: #fff;
  box-shadow: var(--shadow);
  grid-column: 2;
  grid-row: 1;
}

.booking-card h4 {
  margin: 0 0 18px;
  
  font-size: 24px;
  font-weight: 400;
}

.booking-card label,
.booking-line {
  display: block;
  color: #333;
  
  font-weight: 700;
}

.participant-row {
  display: grid;
  grid-template-columns: 1fr 60px;
  gap: 8px;
  align-items: center;
  margin-top: 9px;
}

.participant-row span {
  display: block;
  color: #333;
    font-size: 14px;
  font-weight: 400;
}

.participant-row strong {
  display: block;
  margin-top: 1px;
  color: #222;
  
  font-size: 20px;
}

.participant-row select,
.time-select {
    height: 36px;
    width: 64px;
  border: 1px solid #e5e1dc;
  border-radius: 4px;
  padding: 0 6px;
  background: #fff;
  color: #333;
  
}

.calendar {
  margin-top: 14px;
}

.date-input {
  width: 100%;
  height: 36px;
  margin-top: 8px;
  border: 1px solid #ece5df;
  border-radius: 7px;
  padding: 0 10px;
  color: #333;
  background: #fff;

}

.calendar-box {
  margin-top: 8px;
  border: 1px solid #ece5df;
  border-radius: 9px;
  padding: 8px 10px 9px;
}

.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #777;
  
}

.calendar-title {
  color: #625d58;
  
  font-weight: 700;
}

.calendar-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  text-align: center;
  color: #b9b4af;
  
}

.calendar-grid .dow {
  color: #333;
  font-weight: 700;
}

.calendar-grid span {
  height: 14px;
  border-radius: 3px;
  display: grid;
  place-items: center;
}


.events-page > .hero .hero-image,
.events-page section.hero .hero-image,
.events-page .hero.events-hero .hero-image,
.events-page .events-hero .hero-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 52%;
}
.blog-detail-page {
  padding: 48px 0 86px;
  background: var(--cream, #faf6ef);
}
.blog-article-copy p:empty,
.blog-article-copy p:has(> br:only-child) {
  display: none;
}

.blog-rating-hook,
.blog-detail-actions .addthis_custom {
  display: none !important;
}
.recipes-index-page .hero,.cookingclass_privatecooking2020 .hero, .cookingclass_cat .hero, .events-page .hero,.cookingclass_search .hero,.blog-index-page .hero{
  min-height: 520px;
}
.recipes-index-page .hero-shade,.cookingclass_privatecooking2020 .hero-shade, .cookingclass_cat .hero-shade, .events-page .hero-shade,.cookingclass_search .hero-shade,.blog-index-page .hero-shade{
      inset: 0;
}
.events-page > .hero .hero-inner,
.events-page section.hero .hero-inner,
.events-page > .hero .events-hero-inner,
.events-page section.hero .events-hero-inner,
.events-page .hero.events-hero .hero-inner,
.events-page .hero.events-hero .events-hero-inner,
.events-page .events-hero .events-hero-inner {
  position: relative;
  z-index: 3;
  width: min(860px, calc(100% - 72px));
  margin: 0 auto;
  padding: 0;
}

.calendar-grid .active {
  color: #fff;
  background: var(--blue);
}

.calendar-grid .boxed {
  border: 1px solid #dcd7d2;
  color: #86817c;
}

.time-select {
  width: 100%;
  margin-top: 10px;
}

.price-total {
  margin: 14px 0 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.price-total span {
  
  font-weight: 700;
}

.price-total strong {
  
  font-size: 24px;
}

.book-class,
.gift-class {
  width: 100%;
  height: 26px;
  border-radius: 3px;
  
}

.gift-class {
  margin-top: 12px;
  border: 1px solid #8c8178;
  color: #312e2d;
  background: #fff;
}

/* Confirmation popup */
.confirm-page {
  min-height: 100vh;
  overflow: hidden;
  background: #f2f2f2;
}

.confirm-modal {
  position: relative;
  width: min(701px, calc(100% - 8px));
  min-height: 575px;
  margin: 16px auto 4px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fffdfb;
  box-shadow: 0 8px 20px rgba(45, 43, 40, 0.04);
}

.close-button {
  position: absolute;
  top: 35px;
  right: 37px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.close-button::before,
.close-button::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 2px;
  width: 31px;
  height: 4px;
  border-radius: 999px;
  background: #545454;
}

.close-button::before {
  transform: rotate(45deg);
}

.close-button::after {
  transform: rotate(-45deg);
}

.success-icon {
  width: 87px;
  height: 87px;
  margin-top: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--green);
  background: #e8fff6;
}

.success-icon .check-ring {
  width: 43px;
  height: 43px;
  border: 4px solid currentColor;
  border-radius: 50%;
  position: relative;
}

.success-icon .check-ring::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  width: 16px;
  height: 8px;
  border-left: 4px solid currentColor;
  border-bottom: 4px solid currentColor;
  transform: rotate(-45deg);
}

.confirm-title {
  margin-top: 34px;
  font-size: 39px;
  text-align: center;
}

.confirm-message {
  margin: 25px 20px 0;
  color: #5a5a62;
  font-size: 23px;
  line-height: 1.45;
  text-align: center;
}

.confirm-message strong {
  display: block;
  color: #111;
  font-weight: 500;
}

.booking-ref {
  margin: 33px 20px 0;
  color: #946f4e;
  font-size: 18px;
  text-align: center;
}

.booking-ref strong {
  color: #111;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.confirm-actions {
  margin-top: 39px;
  display: grid;
  grid-template-columns: 262px 262px;
  gap: 25px;
}

.confirm-btn {
  height: 76px;
  border: 1px solid #dddfe3;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #28282c;
  background: #fff;
  font-size: 26px;
  cursor: pointer;
}

.confirm-btn.primary {
  border-color: var(--blue);
  gap: 20px;
  color: #fff;
  background: var(--blue);
}


.events-hero {
  min-height: 290px;
  display: flex;
  align-items: center;
  color: #fff;

}


.events-hero span {
  display: block;
  margin-bottom: 14px;
  color: #47b1df;
  
  font-weight: 700;
  letter-spacing: 0.25em;
}

.events-hero h1 {
  margin: 0;
  
  font-size: 47px;
  line-height: 0.95;
  letter-spacing: 0;
}

.events-hero em {
  font-style: italic;
}

.events-about {
  padding-top: 3%;
}


.events-about h2 {
  margin: 0 0 28px;
  
  font-size: 42px;
  line-height: 1.12;
}

.events-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 60px;
}

.events-about-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 15px;
  align-items: start;
}

.events-about-icon {
  width: 28px;
  height: 28px;
  border: 1px solid #e0d8ce;
  border-radius: 3px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: #fffaf3;
}

.events-about-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.events-about-item h3 {
  margin: 0 0 13px;
  
  font-size: 24px;
  line-height: 1.15;
}

.events-about-item p {
  grid-column: 2;
  margin: 0;
  color: #57575d;
  font-size: 15px;
  line-height: 1.55;
}

.intro-item p,
.venue-item p {
  padding-top: 1px;
}
.checkout-section .section-heading{
  display: flex;
}

/* Recipes listing page */
.recipes-index-page {
  min-height: 100vh;
  margin: 0;
  color: #2f2924;
  background: #faf6f1;
  
}

.recipes-index-page svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.recipes-hero {
  position: relative;
  min-height: 350px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: #211812;
}

.recipes-hero-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 45%;
}
.recipes-index-page .recipes-filter-panel {
  position: relative;
  margin-bottom: 32px;
}
.recipes-index-page #nav-recipes .filter-label,
.recipes-index-page .recipes-active-row > span {
  color: #2f2a25;
  font-size: 15px;
  font-weight: 450;
  letter-spacing: 0;
  text-transform: none;
}

.recipes-index-page .recipes-filter-popover {
  display: none;
  top: calc(100% + 8px);
  left: 96px;
  z-index: 30;
  width: min(360px, calc(100vw - 40px));
  max-height: 420px;
  overflow: auto;
  border: 1px solid #ded8d0;
  background: #fff;
  box-shadow: 0 16px 34px rgba(39, 32, 27, 0.08);
}

.recipes-index-page .recipes-filter-popover .filter-popover-inner {
  display: block;
  padding: 0;
}

.recipes-index-page .recipes-filter-popover .filter-group {
  display: none;
  padding: 16px;
}

.recipes-index-page .recipes-filter-popover .filter-group p {
  margin: 0 0 12px;
  color: #6d655e;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.recipes-index-page .recipes-filter-popover .filter-chip {
  min-width: 0;
  height: 34px;
  margin: 0 8px 10px 0;
  padding: 0 14px;
  border: 1px solid #ded8d0;
  border-radius: 2px;
  background: #fff;
  color: #2d2824;
  font-size: 15px;
  line-height: 34px;
}

.recipes-index-page .recipes-active-row[hidden] {
  display: none !important;
}
.recipes-index-page .recipes-filter-popover .filter-chip.is-active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}
.recipes-index-page #nav-recipes .filter-select-btn {
  min-width: auto;
  height: 33px;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #ded8d0;
  border-radius: 0;
  background: #fff;
  color: #2d2824;
  font-size: 15px;
  line-height: 33px;
}

.recipes-index-page #nav-recipes .filter-select-btn.filter-blue {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.recipes-index-page #nav-recipes .filter-button-label,
.recipes-index-page #nav-recipes .filter-total-classes,
.recipes-index-page #nav-recipes .filter-total-classes span {
  font-size: inherit;
  line-height: inherit;
}

.recipes-index-page #nav-recipes .filter-button-caret {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.recipes-index-page #nav-recipes .clear-filters {
  height: 33px;
  padding: 0 10px;
  border-color: transparent;
  background: transparent;
  color: #7d756c;
  font-size: 15px;
  line-height: 33px;
}

.recipes-index-page #nav-recipes .filter-total-classes {
  margin-left: auto;
  color: #7d756c;
  
  font-weight: 500;
}

.recipes-index-page .recipes-active-row,
.recipes-index-page .recipes-active-row:not(.is-filtered) {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  margin-top: 10px;
  margin-bottom: 32px;
}

.recipes-index-page .recipes-active-row button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: #f3eee8;
  color: #6d655e;
  font-size: 15px;
  line-height: 32px;
  cursor: pointer;
}

.recipes-index-page .recipes-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

.recipes-index-page .recipes-load-more {
  min-width: 160px;
  height: 42px;
  border: 1px solid var(--blue);
  border-radius: 0;
  padding: 0 26px;
  background: var(--blue);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 42px;
  text-align: center;
  cursor: pointer;
}

.recipes-index-page .recipes-load-more:hover {
  border-color: var(--blue-dark);
  background: var(--blue-dark);
}

.recipes-hero h1 {
  max-width: 330px;
  margin: 0;
  color: #fff;
  
  font-size: clamp(56px, 5.55vw, 80px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0;
  font-synthesis: none;
  font-variation-settings: "wght" 500;
}

.recipes-hero h1 em {
  
  font-style: italic;
  font-weight: 500;
  font-synthesis: none;
  font-variation-settings: "wght" 500;
}

.recipes-catalog {
  padding: 28px 0 64px;
}



.recipes-search {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

.recipes-search label,
.recipes-filter-label,
.recipes-active-row span {
  color: #7a746f;
  
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.recipes-search input {
  width: 300px;
  height: 34px;
  border: 1px solid #ded8d0;
  border-radius: 1px;
  padding: 0 14px;
  color: #302823;
  background: #fff;
  
}

.recipes-search input::placeholder {
  color: #a7a09a;
}

.recipes-filter-row,
.recipes-active-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.recipes-filter-row {
  margin-bottom: 11px;
}

.recipes-filter-chip,
.recipes-clear,
.recipes-active-row button {
  height: 30px;
  border: 1px solid #ded8d0;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2f2924;
  background: #fff;
  
  font-weight: 600;
  cursor: pointer;
}

.recipes-filter-chip {
  min-width: 86px;
  padding: 0 22px 0 14px;
  position: relative;
}

.recipes-filter-chip::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
}

.recipes-filter-chip.is-active {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
}

.recipes-clear {
  border-color: transparent;
  padding: 0 8px;
  color: #68625d;
  background: transparent;
  font-weight: 500;
}

.recipes-filter-row strong {
  margin-left: auto;
  color: #6d6863;
  
  font-weight: 500;
}

.recipes-active-row {
  margin-bottom: 32px;
}

.recipes-active-row button {
  height: 22px;
  padding: 0 9px;
  color: #514c47;
  background: #fff;
  
  font-weight: 500;
}

.recipes-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.recipe-list-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #ebe5de;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(66, 54, 46, 0.05);
}

.recipe-list-image {
  position: relative;
  aspect-ratio: 1.08;
  overflow: hidden;
  background: #ddd4ca;
}


.recipe-list-image span {
  position: absolute;
  top: 12px;
  left: 12px;
  min-height: 21px;
  border-radius: 999px;
  padding: 5px 10px;
  color: #fff;
  background: rgba(46, 39, 33, 0.54);
  
  line-height: 1;
}

.recipe-list-image button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(48, 40, 34, 0.42);
  cursor: pointer;
}

.recipe-list-image button svg {
  width: 16px;
  height: 16px;
}

.recipe-list-body {
  padding: 19px 18px 20px;
}

.recipe-list-body h3 a{
  margin: 0 0 16px;
  color: #302823;
  
  font-size: 20px;
  font-weight: 600;
  line-height: 27.5px;
}

.recipe-list-body ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.recipe-list-body li {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #5d5955;
  line-height: 1.25;
  white-space: nowrap;
}

.recipe-list-body li svg {
  flex: 0 0 17px;
  width: 30px;
  height: 30px;
}

.recipes-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 48px;
}

.recipes-pagination a,
.recipes-pagination span {
  min-width: 24px;
  height: 24px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4f4a45;
  
  text-decoration: none;
}

.recipes-pagination a.is-current {
  color: #fff;
  background: var(--blue);
}

.recipes-pagination svg {
  width: 16px;
  height: 16px;
}

/* Detail gallery final layout */
.detailOtao .gallery-grid,
.detail-page .gallery-grid {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 4px;
  height: clamp(360px, 46vw, 522px);
  min-height: 360px;
  max-height: 522px;
  overflow: hidden;
  border-radius: 7px;
}

/* Detail rich text whitespace cleanup */
.detailOtao .detail-copy p:empty,
.detail-page .detail-copy p:empty,
.detailOtao .detail-copy div:empty,
.detail-page .detail-copy div:empty {
  display: none;
}

.detailOtao .detail-copy p,
.detail-page .detail-copy p {
  margin: 0 0 14px;
}

.detailOtao .detail-copy p:last-child,
.detail-page .detail-copy p:last-child {
  margin-bottom: 0;
}

.detailOtao .detail-copy h1,
.detailOtao .detail-copy h2,
.detailOtao .detail-copy h3,
.detailOtao .detail-copy h4,
.detail-page .detail-copy h1,
.detail-page .detail-copy h2,
.detail-page .detail-copy h3,
.detail-page .detail-copy h4 {
  margin-top: 18px;
  margin-bottom: 12px;
}

.detailOtao .detail-copy h1:first-child,
.detailOtao .detail-copy h2:first-child,
.detailOtao .detail-copy h3:first-child,
.detailOtao .detail-copy h4:first-child,
.detail-page .detail-copy h1:first-child,
.detail-page .detail-copy h2:first-child,
.detail-page .detail-copy h3:first-child,
.detail-page .detail-copy h4:first-child {
  margin-top: 0;
}
.detailOtao .gallery-grid img,
.detail-page .gallery-grid img {
  min-width: 0;
}

.detailOtao .gallery-grid .gallery-main,
.detail-page .gallery-grid .gallery-main {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.detailOtao .gallery-grid img:nth-child(2),
.detail-page .gallery-grid img:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

.detailOtao .gallery-grid img:nth-child(3),
.detail-page .gallery-grid img:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
}

.detailOtao .gallery-grid img:nth-child(4),
.detail-page .gallery-grid img:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
}
.detailOtao .gallery-grid img:nth-child(5),
.detail-page .gallery-grid img:nth-child(5) {
  grid-column: 3;
  grid-row: 2;
}

.detailOtao .gallery-count-1,
.detail-page .gallery-count-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.detailOtao .gallery-count-1 .gallery-main,
.detail-page .gallery-count-1 .gallery-main,
.detailOtao .gallery-grid:has(> img:only-child) .gallery-main,
.detail-page .gallery-grid:has(> img:only-child) .gallery-main {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.detailOtao .gallery-count-2,
.detail-page .gallery-count-2,
.detailOtao .gallery-grid:has(> img:nth-child(2):last-child),
.detail-page .gallery-grid:has(> img:nth-child(2):last-child) {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr;
}

.detailOtao .gallery-count-2 .gallery-main,
.detail-page .gallery-count-2 .gallery-main,
.detailOtao .gallery-grid:has(> img:nth-child(2):last-child) .gallery-main,
.detail-page .gallery-grid:has(> img:nth-child(2):last-child) .gallery-main {
  grid-column: 1;
  grid-row: 1;
}

.detailOtao .gallery-count-2 img:nth-child(2),
.detail-page .gallery-count-2 img:nth-child(2),
.detailOtao .gallery-grid:has(> img:nth-child(2):last-child) img:nth-child(2),
.detail-page .gallery-grid:has(> img:nth-child(2):last-child) img:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

.detailOtao .gallery-count-3,
.detail-page .gallery-count-3,
.detailOtao .gallery-grid:has(> img:nth-child(3):last-child),
.detail-page .gallery-grid:has(> img:nth-child(3):last-child) {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr;
}

.detailOtao .gallery-count-3 .gallery-main,
.detail-page .gallery-count-3 .gallery-main,
.detailOtao .gallery-grid:has(> img:nth-child(3):last-child) .gallery-main,
.detail-page .gallery-grid:has(> img:nth-child(3):last-child) .gallery-main {
  grid-column: 1;
  grid-row: 1;
}

.detailOtao .gallery-count-3 img:nth-child(2),
.detail-page .gallery-count-3 img:nth-child(2),
.detailOtao .gallery-grid:has(> img:nth-child(3):last-child) img:nth-child(2),
.detail-page .gallery-grid:has(> img:nth-child(3):last-child) img:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

.detailOtao .gallery-count-3 img:nth-child(3),
.detail-page .gallery-count-3 img:nth-child(3),
.detailOtao .gallery-grid:has(> img:nth-child(3):last-child) img:nth-child(3),
.detail-page .gallery-grid:has(> img:nth-child(3):last-child) img:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
}

.detailOtao .gallery-count-4 img:nth-child(4),
.detail-page .gallery-count-4 img:nth-child(4),
.detailOtao .gallery-grid:has(> img:nth-child(4):last-child) img:nth-child(4),
.detail-page .gallery-grid:has(> img:nth-child(4):last-child) img:nth-child(4) {
  grid-column: 2 / span 2;
  grid-row: 2;
}


.blog-hero {
  position: relative;
  min-height: 342px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.blog-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
}


.blog-intro {
  padding: 46px 0 22px;
}

.blog-intro h2 p{
  margin: 0 0 14px;
  color: #2b2520;
  
  line-height: 1.15;
  font-size:32px
}

.blog-intro-copy {
  color: #5d5751;
  line-height: 1.62;
}

.blog-intro-copy p{
  margin:0;
}

.blog-intro-copy br{
  display:block;
  margin:0;
  line-height:1.4;
}
.blog-intro-copy p + p {
  margin-top: 4px;
}

.blog-intro.is-collapsed .blog-intro-copy {
  max-height: 86px;
  overflow: hidden;
}

.blog-read-toggle,
.blog-load-more {
  min-width: 90px;
  height: 36px;
  border: 1px solid var(--blue, #2f9bd0);
  border-radius: 0;
  background: #fffaf3;
  color: var(--blue, #2f9bd0);
  
  font-weight: 600;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
}

.blog-read-toggle {
  display: block;
  margin: 24px auto 0;
}

.blog-catalog {
  padding: 0 0 80px;
}

.blog-filter-row {
  min-height: 48px;
  border-bottom: 1px solid #e5ded6;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6f6760;
  
}

.blog-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}

.blog-filter-label svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.blog-topic-button {
  height: 30px;
  padding: 0 28px 0 14px;
  border: 1px solid #ded8d0;
  border-radius: 0;
  position: relative;
  background: #fff;
  color: #2f2a25;
  
  cursor: pointer;
}


.blog-filter-row strong {
  margin-left: auto;
  color: #7d756c;
  
  font-weight: 500;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 32px;
}

.blog-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e8e1d9;
  border-radius: 8px;
  background: #fff;
}

.blog-card-image {
  position: relative;
  height: 300px;
  display: block;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}


.blog-card-image > span {
    position: absolute;
    top: 13px;
    right: 9px;

    width: 34px;
    height: 34px;
    border-radius: 50%;

    background: rgba(48,40,34,.64);
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
}
.blog-article-copy h1{
  font-size:24px;
  color:#2C2420;
      max-width: 100%;
}
.blog-article-copy h1 span{
  font-size:24px !important;

}
.blog-card-image > span svg {
    width: 18px;
    height: 18px;

    display: block;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;

    margin: 0;
}
.blog-card-save,
.blog-card-image button,
.blog-side-image button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(48, 40, 34, .35);
  color: #fff;
  padding: 0;
  cursor: pointer;
}
.blog-article-copy p:empty{
    display:none;
}


.blog-article-copy p:has(br:only-child){
    display:none;
}
.blog-card-save svg,
.blog-card-image button svg,
.blog-side-image button svg {
  width: 20px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.class-meta{
    margin:0;
    padding:0 0 24px;
    list-style:none;
    border-bottom:1px solid #ECE8E3;
}
.blog-card-body {
  padding: 18px 18px 17px;
}

.blog-card-body h3 {
  min-height: 52px;
  margin: 0 0 9px;
  color: #2b2520;
  
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
}

.blog-card-body h3 a {
  color: inherit;
  text-decoration: none;
}

.blog-card-meta {
  margin: 0 0 12px;
  color: #8a827a;
  
  line-height: 1.45;
}


.blog-read-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  color: var(--blue, #2f9bd0);
  
  font-weight: 600;
  text-decoration: none;
}

.blog-read-link span::before {
  content: "->";
}

.blog-load-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.blog-load-more {
  min-width: 112px;
  text-transform: uppercase;
}

.blog-detail-main {
  grid-template-columns: minmax(0, 1fr) 281px;
  display: grid;
  gap: 56px;
}

.blog-article {
  min-width: 0;
}

.blog-article-header {
  position: relative;
  padding-top: 4px;
}

.blog-article-header h1 {
  max-width: 760px;
  margin: 0;
  color: #2b2520;
  
  font-size: 34px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0;
}

.blog-detail-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 28px;
  color: #6a635d;
  
  line-height: 1.3;
}

.blog-detail-stars {
  color: var(--blue, #2f9bd0);
  letter-spacing: 1px;
}

.blog-detail-actions {
  position: absolute;
  right: 0;
  bottom: -2px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.blog-detail-actions button {
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: #6a635d;
  
  cursor: pointer;
}

.blog-detail-actions svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.blog-article-image {
    width: 600px;
    max-width: 100%;
    height: 450px;
    margin: 35px auto 0;
    display: block;
    object-fit: cover;
    border-radius: 16px;
}

.blog-article-copy {
  margin-top: 20px;
  color: #342f2b;
  
  line-height: 1.58;
}

.blog-article-copy h2 {
  margin: 28px 0 13px;
  color: #2b2520;
  
  font-weight: 700;
  line-height: 1.25;
}

.blog-article-copy h2:first-child {
  margin-top: 0;
}

.blog-article-copy h3 {
  margin: 12px 0 4px;
  color: #302b27;
  
  
  font-weight: 700;
  line-height: 1.35;
}

.blog-article-copy p {
  margin: 0 0 13px;
}

.blog-article-copy ul {
  margin: 0 0 12px;
  padding-left: 18px;
}

.blog-article-copy li {
  margin: 0 0 3px;
}

.blog-sidebar {
  padding-top: 67px;
}

.blog-side-card {
  overflow: hidden;
  border: 1px solid #e6dfd7;
  border-radius: 8px;
  background: #fff;
}

.blog-side-card + .blog-side-card {
  margin-top: 34px;
}

.blog-side-image {
  position: relative;
  height: 300px;
  overflow: hidden;
}


.blog-side-image span {
  position: absolute;
  left: 11px;
  top: 10px;
  height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: #6c655f;

  line-height: 20px;
}

.blog-side-body {
  padding: 18px 16px 16px;
}

.blog-side-body h3 {
  margin: 0 0 26px;
  color: #2b2520;
  
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
}


.blog-side-body li {
  margin: 0 0 10px;
  color: #5d5751;
      display:flex;
    align-items:center;
    gap:16px;
  line-height: 1.2;
}

.blog-side-body div {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.blog-side-body div span {
  color: #6a635d;
  font-size:12px;
}


.class-meta li:last-child{
    margin-bottom:0;
}

.class-meta .icon{
    width:24px;
    height:24px;
    flex:0 0 24px;
    fill:none;
    stroke:#2E2823;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.class-meta span{
    color:#2E2823;
    font-weight:400;
}
.blog-side-body div strong {
  color: #2b2520;
  
  font-size: 20px;
  font-weight: bold;
}

/* Contact page */
.contact-page {
  background: var(--cream);
  color: var(--ink);
}

.contact-page .contact-hero {
  position: relative;
  min-height: 395px;
  height: clamp(360px, 31vw, 430px);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: #2d211c;
}

.contact-page .contact-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}

.contact-page .contact-hero-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(38, 30, 26, .74) 0%, rgba(38, 30, 26, .42) 44%, rgba(38, 30, 26, .7) 100%),
    linear-gradient(180deg, rgba(38, 30, 26, .08) 0%, rgba(38, 30, 26, .68) 100%);
}

.contact-page .contact-hero-inner {
  position: relative;
  z-index: 3;
  width: min(960px, calc(100% - 72px));
  margin: 0 auto;
  padding-top: 8px;
}

.contact-page .contact-hero .eyebrow {
  margin: 0 0 14px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
}

.contact-page .contact-hero h1 {
  margin: 0;
  color: #fff;
  font-family: var(--sans);
  font-size: clamp(48px, 5.4vw, 64px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: 0;
}

.contact-page .contact-hero h1 em {
  display: inline-block;
  font-family: var(--sans);
  font-style: italic;
  font-weight: 800;
}

.contact-page .contact-hero-copy {
  max-width: 420px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, .92);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.contact-page .contact-main {
  padding: 42px 0 72px;
  background: var(--cream);
}

.contact-page .contact-inner {
  width: min(960px, calc(100% - 72px));
  margin: 0 auto;
}

.contact-page .contact-section + .contact-section {
  margin-top: 56px;
}

.contact-page .contact-section-title {
  margin: 0 0 24px;
  color: #2d2a28;
  font-family: var(--sans);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

.contact-page .contact-people-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 62px;
}

.contact-page .contact-person {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.contact-page .contact-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.contact-page .contact-avatar-green {
  color: #18763a;
  background: #effaf4;
}

.contact-page .contact-avatar-neutral {
  color: #242220;
  background: #fff;
}

.contact-page .contact-avatar-rose {
  color: #9b1f26;
  background: #fff1f3;
}

.contact-page .contact-person h3 {
  margin: 0 0 8px;
  color: #171514;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.contact-page .contact-person p {
  margin: 0 0 9px;
  color: #6d6763;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}

.contact-page .contact-link {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  color: #171514;
  
  font-weight: 700;
  line-height: 1.5;
}

.contact-page .contact-link + .contact-link {
  margin-top: 2px;
}

.contact-page .contact-link svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-page .contact-link-blue {
  color: var(--blue);
}

.contact-page .contact-visit .contact-section-title {
  margin-bottom: 10px;
}

.contact-page .contact-visit p {
  margin: 0 0 14px;
  color: #5b5754;
  font-size: 15px;
  font-weight: 600;
}

.contact-page .contact-map-image,
.contact-page .contact-map-frame {
  display: block;
  width: 100%;
  height: 330px;
  border: 0;
  object-fit: cover;
  background: #e8edf1;
}



.blog-side-body a {
  min-width: 78px;
  height: 26px;
  padding: 8px 16px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--blue, #2f9bd0);
  color: #fff;
  font-size:12px;
  font-weight: 700;
  line-height: 26px;
  text-decoration: none;
  text-transform: uppercase;
}

.continue-reading {
  grid-column: 1 / -1;
  margin-top: 42px;
  padding-top: 38px;
  border-top: 1px solid #e5ded6;
}

.continue-reading h5 {
  margin: 0 0 22px;
  color: #2b2520;
  
  font-size: 20px;
  font-weight: 700;
}

.continue-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.continue-strip .blog-card-image {
  height: 300px;
}

.continue-strip .blog-card-body h3 {
  min-height: 48px;
  font-size: 17px;
}


.schedule-hero {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: #2b2622;
}

.schedule-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.schedule-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(36, 31, 28, .72) 0%, rgba(36, 31, 28, .5) 48%, rgba(36, 31, 28, .74) 100%),
    linear-gradient(180deg, rgba(36, 31, 28, .08) 0%, rgba(36, 31, 28, .7) 100%);
}

.schedule-hero-inner {
  position: relative;
  z-index: 2;
  margin: 0 auto;
}

.schedule-hero-inner p {
  margin: 0 0 12px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .28em;
}

.schedule-hero-inner h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(52px, 7vw, 72px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: 0;
}

.schedule-hero-inner h1 em {
  font-style: italic;
  font-weight: 800;
}

.schedule-hero-inner span {
  display: block;
  margin-top: 24px;
  color: rgba(255, 255, 255, .86);
  font-size: 13px;
  font-weight: 500;
}

.schedule-main {
  padding: 64px 0 100px;
  background: var(--cream);
}


.calendar-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.calendar-toolbar {
  height: 42px;
  display: grid;
  grid-template-columns: 42px auto 1fr 42px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.calendar-toolbar h2 {
  grid-column: 3;
  justify-self: center;
  margin: 0;
  color: #111;
  font-size: 16px;
  font-weight: 800;
}

.calendar-nav,
.calendar-current {
  border: 0;
  background: transparent;
}

.calendar-nav {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #191919;
}

.calendar-nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar-current {
  padding: 0 8px;
  color: #171717;
  
  font-weight: 700;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  min-height: 34px;
  border-bottom: 1px solid var(--line);
}

.calendar-weekdays span {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  color: #111;
  
  font-weight: 800;
}

.calendar-weekdays span:last-child {
  border-right: 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-day {
  min-height: 132px;
  padding: 20px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.calendar-day:nth-child(7n) {
  border-right: 0;
}

.calendar-day:nth-last-child(-n + 7) {
  border-bottom: 0;
}

.calendar-day.is-outside {
  background: #e7e5e3;
}

.day-number {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  color: #222;
  
  font-weight: 800;
  line-height: 1;
}

.calendar-day.is-outside .day-number {
  color: #858585;
}

.day-number.is-today {
  border-radius: 3px;
  color: #fff;
  background: var(--blue);
  height: 25px;
    position: relative;
    top: -4px;
}

.day-events {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.calendar-event {
  border: 0;
  border-radius: 4px;
  padding: 7px 7px 8px;
  display: block;
  width: 100%;
  color: var(--green);
  background: var(--green-bg);
  text-align: left;
}

.calendar-event strong,
.calendar-event span {
  display: block;
}

.calendar-event strong {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.05;
}

.calendar-event span {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.12;
}

.calendar-event.is-sold-out {
  color: var(--red);
  background: var(--red-bg);
}

.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(245, 245, 245, .78);
  backdrop-filter: blur(2px);
}

.booking-modal.is-open {
  display: flex;
}

.booking-modal-panel {
  width: min(940px, 100%);
  border-radius: 7px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 54px rgba(0, 0, 0, .13);
}

.booking-modal-header {
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #e5e0dc;
}

.booking-modal-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
}

.booking-modal-close {
  width: 34px;
  height: 34px;
  border: 0;
  display: grid;
  place-items: center;
  color: #4f4f4f;
  background: transparent;
}

.booking-modal-close svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.booking-modal-body {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 110px;
  gap: 24px;
  padding: 26px;
}

.booking-class-image {
  width: 210px;
  height: 141px;
  border-radius: 7px;
  object-fit: cover;
}

.booking-class-copy h3 {
  margin: 3px 0 14px;
  font-weight: 800;
}

.booking-class-copy p {
  max-width: 520px;
  margin: 0 0 16px;
  color: #161616;

  font-weight: 600;
  line-height: 1.35;
}

.booking-class-copy dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.booking-class-copy dl div {
  display: flex;
  gap: 7px;
}

.booking-class-copy dt,
.booking-class-copy dd {
  margin: 0;
  
}

.booking-class-copy dt {
  font-weight: 900;
}

.booking-price {
  justify-self: end;
  text-align: left;
}

.booking-price span {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 900;
}

.booking-price strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
  font-weight: 900;
}

.booking-options {
  grid-column: 2 / 4;
  padding-top: 20px;
  border-top: 1px solid #d8d3ce;
}

.booking-options h4 {
  margin: 0 0 13px;
  
  font-weight: 900;
}

.booking-option {
  min-height: 45px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  align-items: start;
  gap: 18px;
}

.booking-option span {
  display: block;
  font-weight: 700;
}

.booking-option strong {
  display: block;
  margin-top: 2px;
  font-weight: 900;
}

.booking-option select {
  width: 80px;
  height: 40px;
  border: 1px solid #d8d3ce;
  border-radius: 3px;
  color: #111;
  background: #fff;
  
}

.booking-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 14px 0 15px;
}

.booking-total span {
  
  font-weight: 900;
}

.booking-total strong {
  font-size: 24px;
  font-weight: 900;
}

.booking-actions {
  display: grid;
  gap: 18px;
}

.gift-button,
.book-button {
  height: 35px;
  border-radius: 3px;

  font-weight: 900;
}

.gift-button {
  border: 1px solid #231f1d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #211d1b;
  background: #fff;
}

.gift-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.book-button {
  border: 0;
  color: #fff;
  background: var(--blue);
  width: 100%;
}

.booking-modal-footer {
  margin: 0 26px;
  padding: 20px 0 31px 236px;
  border-top: 1px solid #e5e0dc;
}

.booking-modal-footer p {
  margin: 0 0 4px;
  
  font-weight: 700;
}

.booking-modal-footer a {
  color: var(--blue);
  
  font-weight: 700;
  text-decoration: none;
}

body.modal-open {
  overflow: hidden;
}



@media (max-width: 1200px) {
  .events-page > .hero .hero-inner,
  .events-page section.hero .hero-inner,
  .events-page > .hero .events-hero-inner,
  .events-page section.hero .events-hero-inner,
  .events-page .hero.events-hero .hero-inner,
  .events-page .hero.events-hero .events-hero-inner,
  .events-page .events-hero .events-hero-inner {
    width: min(1020px, calc(100% - 120px));
  }
      .site-header {
        position: relative;
        z-index: 10000;
        width: 100%;
        height: 90px;
        margin: 0;
        padding: 0;
        background: #fff;
        border: 0;
        border-bottom: 1px solid #eee8df;
        overflow: visible;
        min-height: 0;
        z-index: 10030;
    }
  .contact-page .contact-people-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .contact-page .contact-person {
    max-width: 430px;
  }
    .site-header .logo,
    .site-header .logo img {
        width: 120px;
        max-width: 120px;
    }
    .site-header .nav-actions {
        width: 300px;
        min-width: 300px;
    }
      .recipes-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
      .class-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .section-heading h2 {
        font-size: 48px
    }


  .blog-grid,
  .continue-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-detail-main {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .blog-sidebar {
    padding-top: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .blog-side-card + .blog-side-card {
    margin-top: 0;
  }
    .btn-nav {
        padding-inline: 10px
    }
      .main-nav {
    display: none;
  }

  .header-inner,
  .recipe-page .header-inner,
  .detail-page .header-inner,
  .checkout-main,
  .recipe-main,
  .detail-main {
    width: min(100% - 28px, 680px);
  }
    .site-header .nav-wrap.container,
    .site-header .nav-wrap {
        height: 44px;
        min-height: 44px;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 22px;
        position: relative;
        display: block;
    }
  .checkout-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .checkout-summary {
    position: static;
    width: 100%;
    max-width: 360px;
  }

  .about-recipe,
  .recipe-content {
    grid-template-columns: 1fr;
  }
    .site-header .primary-nav {
          position: fixed ;
      top: 64px ;
      left: 0 ;
      right: 0 ;
      bottom: 0 ;
      display: block ;
      width: 100% ;
      max-height: 0 ;
      height: auto ;
      min-height: 0 ;
      margin: 0 ;
      padding: 0 ;
      overflow: hidden ;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: none ;
        z-index: 10003;
        background: #fff;
        box-shadow: 0 12px 18px rgba(0, 0, 0, .12);
        transition: max-height .32s cubic-bezier(.645, .045, .355, 1), opacity .22s ease, transform .32s cubic-bezier(.645, .045, .355, 1), visibility 0s linear .32s;
        will-change: max-height, opacity, transform;
    }
    
    .site-header .menu-toggle {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 26px;
        height: 26px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        z-index: 5;
        cursor: pointer;
    }
    .site-header .menu-toggle span {
        width: 25px;
        height: 2px;
        margin: 0;
        padding: 0;
        background: #222;
        display: block;
        transition: transform .2s ease, opacity .2s ease;
    }
    .site-header .menu-toggle em {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
    .site-header .menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .site-header .menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }
    .site-header .menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
    .site-header .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 128px;
        max-width: 128px;
        height: auto;
        margin: 0;
        padding: 0;
        display: block;
        z-index: 4;
    }
    .site-header .logo img {
        width: 128px;
        max-width: 128px;
        height: auto;
        margin: 0;
        padding: 0;
        display: block;
    }
    .site-header .nav-actions {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 28px;
        min-width: 28px;
        height: 32px;
        min-height: 32px;
        margin: 0;
        padding: 0;
        display: block;
        z-index: 5;
    }
    .site-header .nav-actions .cart-button,
    .site-header .btn-nav {
        display: none;
    }
    .site-header .icon-button,
    .site-header .search-button {
        width: 28px;
        min-width: 28px;
        height: 32px;
        min-height: 32px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        display: grid;
        place-items: center;
        color: #111;
    }
    .site-header .icon-button svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
    }
    .site-header .nav-actions .cart-button {
        display: none;
    }


    .site-header .nav-chevron {
        position: relative;
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        margin-left: 12px;
        display: grid;
        place-items: center;
        color: #c59b71;
    }
    .site-header .nav-chevron-desktop {
        display: none;
    }
    .site-header .nav-toggle-mobile {
        width: 20px;
        height: 20px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
    }
    .site-header .nav-toggle-vertical {
        transform-origin: 10px 10px;
        transform: scaleY(1);
        opacity: 1;
        transition: transform .25s cubic-bezier(.645, .045, .355, 1), opacity .18s ease;
    }
    .site-header .has-submenu.open .nav-toggle-vertical {
        transform: scaleY(0);
        opacity: 0;
    }
    .site-header .header-submenu,
    .site-header .has-submenu.open .header-submenu {
        display: block;
        overflow: hidden;
        transition: max-height .34s cubic-bezier(.645, .045, .355, 1), opacity .22s ease, padding .34s cubic-bezier(.645, .045, .355, 1);
        will-change: max-height, opacity;
    }
    .site-header .primary-nav>a,
    .site-header .primary-nav .nav-item>a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 9px 0;
        border: 0;
        color: #2d3a42;
        text-align: left;
        text-transform: none;
        white-space: normal;
    }
    .site-header .nav-item,
    .site-header .has-submenu {
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
    }
    .site-header .header-submenu {
        position: static;
        transform: none;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: 4px 0 8px 18px;
        border: 0;
        box-shadow: none;
        display: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
   .site-header .primary-nav.open {
        max-height: calc(100dvh - 64px) !important;
      height: calc(100dvh - 64px) !important;
      padding: 52px 0 28px !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
        display: block;
                transform: translate3d(0, 0, 0);
        transition-delay: 0s;
    }
    .site-header .nav-item,
    .site-header .has-submenu {
        display: block;
        height: auto;
        min-height: 0;
    }

    .site-header .has-submenu.open .header-submenu {
        display: block;
    }
    .site-header .header_search_box {
        width: 100%;
        height: 90px;
        min-height: 90px;
        padding: 0 15px;
        gap: 8px;
    }
    .site-header .header_search_box form {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        height: 40px;
    }
    .site-header .header_search_box .header-search,
    .site-header .header_search_box input[type="text"],
    .site-header .header_search_box input[type="search"] {
        height: 40px;
        font-size: 16px;
        line-height: 26px;
    }
    .site-header .hide-search-header {
        flex-basis: 32px;
        height: 40px;
        line-height: 40px;
    }
          .header_noti {
        display: none;
        height: 0;
        min-height: 0;
    }
    .site-header .nav-actions {
        width: 64px;
        min-width: 64px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }
    .site-header .nav-actions .cart-button {
        display: grid;
        width: 26px;
        min-width: 26px;
        height: 32px;
        min-height: 32px;
        margin: 0;
        place-items: center;
    }
    .site-header .header-submenu a {
        padding: 8px 0;
        font-size: 15px;
        line-height: 1.35;
    }
    .site-header .header_search_box {
        position: absolute;
        top: 90px;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        padding: 10px 15px;
        background: #fff;
        box-shadow: 0 12px 18px rgba(0, 0, 0, .12);
        z-index: 10004;
    }
    .site-header .header_search_box.open {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .site-header .hide-search-header {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        font-size: 18px;
    }
  .recipe-photo {
    width: 100%;
    height: auto;
  }
    .site-header,
  .recipe-page .site-header,
  .detail-page .site-header {
    height: 64px;
    border-bottom: 0;
    background: #fbf8f3;
  }
  .recipe-actions {
    position: static;
    margin-top: 14px;
  }
  .detailOtao .gallery-grid,
  .detail-page .gallery-grid {
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px repeat(2, 120px);
  }

  .detailOtao .gallery-grid .gallery-main,
  .detail-page .gallery-grid .gallery-main {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .detailOtao .gallery-grid img:nth-child(n+2),
  .detail-page .gallery-grid img:nth-child(n+2) {
    grid-column: auto;
    grid-row: auto;
  }

  .detailOtao .gallery-count-1,
  .detail-page .gallery-count-1 {
    grid-template-columns: 1fr;
    grid-template-rows: 260px;
  }

  .detailOtao .gallery-count-2,
  .detail-page .gallery-count-2,
  .detailOtao .gallery-count-3,
  .detail-page .gallery-count-3 {
    grid-template-columns: 1fr;
    grid-template-rows: 240px;
  }
  .detail-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .recipe-page .recipe-main {
    width: min(100% - 44px, 760px);
  }

  .recipe-page .about-recipe,
  .recipe-page .recipe-content {
    grid-template-columns: 1fr;
  }

  .recipe-page .recipe-photo,
  .recipe-page .ingredient-card {
    width: 100%;
  }

  .recipe-page .recipe-photo {
    height: auto;
  }
  .booking-card {
    position: static;
    width: 100%;
    max-width: 100%;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .events-about-grid {
    gap: 22px 26px;
  }
}

@media (max-width: 700px) {
    .events-page > .hero,
  .events-page section.hero,
  .events-page .hero.events-hero,
  .events-page .events-hero {
    min-height: 260px;
    height: 260px;
  }
 .schedule-main {
    padding-top: 36px;
  }

  .calendar-card {
    overflow-x: auto;
  }

  .calendar-weekdays,
  .calendar-grid {
    min-width: 720px;
  }

  .booking-modal {
    align-items: flex-start;
    overflow-y: auto;
  }

  .booking-modal-body {
    grid-template-columns: 1fr;
  }

  .booking-class-image {
    width: 100%;
    height: 220px;
  }

  .booking-price {
    justify-self: start;
  }

  .booking-options {
    grid-column: 1;
  }

  .booking-modal-footer {
    padding-left: 0;
  }
  .events-page > .hero .hero-image,
  .events-page section.hero .hero-image,
  .events-page .hero.events-hero .hero-image,
  .events-page .events-hero .hero-image {
    object-position: center center;
  }

  .events-page > .hero .hero-inner,
  .events-page section.hero .hero-inner,
  .events-page > .hero .events-hero-inner,
  .events-page section.hero .events-hero-inner,
  .events-page .hero.events-hero .hero-inner,
  .events-page .hero.events-hero .events-hero-inner,
  .events-page .events-hero .events-hero-inner {
    width: 100%;
    padding: 0 26px;
  }

  .events-page > .hero h1,
  .events-page section.hero h1,
  .events-page .hero.events-hero h1,
  .events-page .events-hero h1,
  .events-page .events-hero-title {
    max-width: 280px;
    font-size: 46px;
  }
      html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }
    .header_noti {
        width: 100%;
        height: 124px;
        min-height: 124px;
        margin: 0;
        padding: 0;
        background: #cde617;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .header_noti_title {
        width: 100%;
        height: 124px;
        min-height: 124px;
        margin: 0;
        padding: 10px 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .header_noti_title_span,
    .header_noti_title_span p,
    .header_noti_title_span strong,
    .header_noti_title_span span,
    .header_noti_title_span em,
    .header_noti_title_span a {
        margin: 0;
        padding: 0;
        color: #168ad1;
        text-align: center;
    }
    .header_noti_title_span p:empty {
        display: none;
    }
    .header_noti_title_span br {
        display: none;
    }
    .header_noti_title_span a,
    .header_noti_title_span span[style*="underline"] {
        text-decoration: underline;
    }

    .site-footer {
        width: 100%;
        margin: 0;
        padding: 30px 0 0;
        background: #fff;
        color: #1c1c1c;
        border: 0;
        
        overflow: hidden;
    }
    .site-footer .footer-inner,
    .site-footer .footer-inner.container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 15px 30px;
        text-align: center;
    }
    .site-footer .footer-logo {
        position: static;
        transform: none;
        width: 218px;
        max-width: 218px;
        height: auto;
        margin: 0 auto 30px;
        padding: 0;
        display: block;
    }
    .site-footer .footer-logo img {
        width: 218px;
        max-width: 218px;
        height: auto;
        margin: 0 auto;
        display: block;
    }
    .site-footer .acknowledgement {
        width: 100%;
        max-width: 360px;
        margin: 0 auto 30px;
        padding: 0;
        color: #1c1c1c;
        font-size: 18px;
        font-weight: 400;
        line-height: 1.42;
        text-align: center;
    }
      .blog-hero {
    min-height: 290px;
  }


  .blog-intro {
    padding-top: 34px;
  }

  .blog-filter-row {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 13px 0 15px;
  }

  .blog-filter-row strong {
    width: 100%;
    margin-left: 0;
  }

  .blog-grid,
  .continue-strip,
  .blog-sidebar {
    grid-template-columns: 1fr;
  }

  .blog-card-image {
    height: 210px;
  }

  .blog-detail-main {
    width: min(100% - 32px, 520px);
    padding-top: 18px;
  }

  .blog-article-header h1 {
    font-size: 28px;
  }

  .blog-detail-actions {
    position: static;
    margin-top: 16px;
  }

  .blog-article-image {
    height: 240px;
  }
    .site-footer .socials {
        width: 100%;
        height: 28px;
        margin: 0 0 54px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
    }
    .site-footer .socials a {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #000;
        color: #fff;
        display: grid;
        place-items: center;
    }
    .site-footer .footer-columns {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        display: block;
        text-align: center;
    }
    .site-footer .footer-col,
    .site-footer .footer-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: block;
    }
    .site-footer .footer-group {
        border-top: 1px solid #e5e5e5;
    }
    .site-footer .footer-group:last-child {
        border-bottom: 0;
    }
    .site-footer .footer-heading {
        position: relative;
        width: 100%;
        height: 42px;
        margin: 0;
        padding: 10px 44px;
        border: 0;
        background: transparent;
        color: #337ab7;
        text-align: center;
        cursor: pointer;
    }
    .site-footer .footer-group.footer-open>.footer-heading::after {
        transform: translateY(-50%) rotate(0deg);
    }
    .site-footer .footer-panel {
        width: 100%;
        margin: 0;
        padding: 4px 0 16px;
        display: none;
    }
    .site-footer .footer-group.footer-open>.footer-panel {
        display: block;
    }
    .site-footer .footer-panel a {
        display: block;
        margin: 0 0 10px;
        color: #555657;
        font-size: 16px;
        line-height: 1.35;
    }
    .site-footer .footer-panel .map-link {
        color: #ef5547;
    }
    .site-footer .footer-awards-desktop {
        display: none;
    }
    .site-footer .footer-awards-mobile {
        width: 100%;
        min-height: 78px;
        margin: 20px 0 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }
    .site-footer .footer-awards-mobile a {
        flex: 0 0 68px;
        width: 68px;
        height: 78px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
     .recipe-page .recipe-main {
    width: 100%;
    padding: 31px 20px 60px;
  }

  .recipe-page .recipe-title {
    font-size: 28px;
  }

  .recipe-page .recipe-actions {
    position: static;
    margin-top: 14px;
  }

  .recipe-page .recipe-stats {
    grid-template-columns: 1fr;
    margin-top: 27px;
  }

  .recipe-page .about-recipe {
    gap: 18px;
    margin-top: 28px;
  }

  .recipe-page .recipe-content {
    gap: 30px;
    padding: 32px 0 0;
  }

  .recipe-page .step {
    grid-template-columns: 44px 22px minmax(0, 1fr);
    
  }
    .site-footer .footer-awards-mobile img {
        width: 68px;
        max-width: 68px;
        height: auto;
        max-height: 74px;
        object-fit: contain;
    }
    .site-footer .copyright {
        width: 100%;
        min-height: 55px;
        margin: 0;
        padding: 12px 15px;
        background: #2b2b2b;
        color: #fff;
        text-align: center;
    }
    #backTop {
        right: 15px;
        bottom: 66px;
        width: 46px;
        height: 46px;
    }
    .site-footer .footer-heading {
        border-top: 1px solid #e5e5e5;
        display: block;
    }
    .site-footer .footer-heading.footer-open::after {
        transform: translateY(-50%) rotate(0deg);
    }
    .site-footer .footer-heading.footer-open+.footer-panel,
    .site-footer .footer-panel.footer-open {
        display: block;
    }
    .site-footer .footer-panel .footer-awards:not(.footer-awards-mobile) {
        display: none;
    }

   
    .events-page .events-about-content.is-structured{
        grid-template-columns: unset;
    }
    .site-header .has-submenu.open .header-submenu {
        max-height: var(--submenu-height, 900px);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        padding-top: 4px;
        padding-bottom: 8px;
    }
    .site-footer .footer-panel,
    .site-footer .footer-group.footer-open>.footer-panel,
    .site-footer .footer-heading.footer-open+.footer-panel,
    .site-footer .footer-panel.footer-open {
        display: block;
        overflow: hidden;
        transition: max-height .34s cubic-bezier(.645, .045, .355, 1), opacity .22s ease, padding .34s cubic-bezier(.645, .045, .355, 1);
        will-change: max-height, opacity;
    }
    .site-footer .footer-panel {
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        padding-top: 0;
        padding-bottom: 0;
    }
    .site-footer .footer-group.footer-open>.footer-panel,
    .site-footer .footer-heading.footer-open+.footer-panel,
    .site-footer .footer-panel.footer-open {
        max-height: var(--footer-panel-height, 600px);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        padding-top: 4px;
        padding-bottom: 16px;
    }
    .site-footer .footer-heading::after {
        transition: transform .25s cubic-bezier(.645, .045, .355, 1), opacity .18s ease;
    }
    .header_noti {
        height: 98px;
        min-height: 98px;
        background: #cde617;
        overflow: visible;
    }
    .header_noti_title {
        height: 98px;
        min-height: 98px;
        padding: 0 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .header_noti_title_span,
    .header_noti_title_span p,
    .header_noti_title_span strong,
    .header_noti_title_span span,
    .header_noti_title_span em,
    .header_noti_title_span a {
        font-size: 17px;
        line-height: 1.45;
        color: #168ad1;
        font-weight: 700;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .header_noti_title_span p {
        display: block;
    }
    .header_noti_title_span br {
        display: none;
    }
    .header_noti_title_span a,
    .header_noti_title_span span[style*="underline"] {
        text-decoration: underline;
    }

    .site-header .menu-toggle {
        position: absolute;
        left: 22px;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
        z-index: 5;
    }
    .site-header .menu-toggle span {
        width: 24px;
        height: 2px;
        background: #333;
        display: block;
        margin: 0;
        padding: 0;
    }
    .site-header .menu-toggle em {
        display: none;
    }
    .site-header .menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .site-header .menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }
    .site-header .menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    .site-header .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 118px;
        max-width: 118px;
        margin: 0;
        padding: 0;
        z-index: 4;
    }
    .site-header .logo img {
        width: 118px;
        max-width: 118px;
        height: auto;
    }
    .site-header .nav-actions {
        position: absolute;
        right: 22px;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        min-width: 0;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 16px;
        padding: 0;
        margin: 0;
        z-index: 5;
    }

    .site-header .icon-button {
        width: 26px;
        height: 30px;
        min-width: 26px;
        padding: 0;
        margin: 0;
        background: transparent;
        border: 0;
    }
    .site-header .icon-button svg {
        width: 22px;
        height: 22px;
    }
    .site-header .cart-count {
        top: 6px;
        right: 0px;
        min-width: 15px;
        height: 15px;
        
        line-height: 15px;
    }
    .class-overview,
    .booking-card,
    .detail-wide {
        grid-column: 1;
        grid-row: auto;
    }


    #top>.hero {
        order: 1;
    }
    #top>.classes {
        order: 2;
    }
    #top>.why-section {
        order: 3;
    }
    #top>.community:not(#stories) {
        order: 4;
    }
    #top>#stories {
        order: 5;
    }
    #top>.cta-section {
        order: 6;
    }
        .card-body {
        padding: 14px 12px 16px;
    }
    .card-body h3 {
        min-height: 0;
        margin-bottom: 16px;
        font-size: 20px;
    }
    .card-info-list {
        min-height: 0;
    }
    .card-info-list li {
        font-size: 14px;
    }
    .book-now {
        min-width: 112px;
        min-height: 34px;
        padding: 6px 14px;
        
    }
    .hero {
        min-height: 700px;
        height: auto;
        align-items: center;
    }
    .hero-image {
        object-position: center center;
    }

    .hero h1,.hero-title-italic {
        font-size: 38px;
        line-height: 40px;
    }

    .hero-buttons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: min(100%, 280px);
    }
    #nav-cooking-class{
		overflow-x:auto;
		overflow-y:hidden;
		white-space:nowrap;
	}

	#nav-cooking-class .catalog-menu{
		display:flex;
		flex-wrap:nowrap;
		width:max-content;
	}

	#nav-cooking-class .catalog-menu a{
		flex:0 0 auto;
		white-space:nowrap;
		padding:12px 16px;
	}
    .hero .hero-buttons .btn-ghost,
    .cta-section .hero-buttons .btn-ghost {
        display: none;
    }
    .hero-meta {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 24px;
        line-height: 1.4;
        gap: 3px;
    }
    .hero-meta li {
        padding-left: 14px;
    }
    .section-heading .eyebrow,
    .community-copy .eyebrow,
    .story-copy .eyebrow {
        margin-bottom: 12px;
        
        line-height: 1.4;
        letter-spacing: .18em;
    }
    .class-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        margin-top: 30px;
    }
    {
        width: 100%;
    }
    .card-image {
        aspect-ratio: 1.05;
    }
    .card-body {
        padding: 18px 18px 16px;
    }
    .card-body h3 {
        min-height: 0;
        margin-bottom: 14px;
        font-size: 24px;
        line-height: 1.2;
    }
    .card-body ul {
        min-height: 0;
        margin-bottom: 18px;
    }
    .card-body li {
        font-size: 15px;
    }
    .card-foot {
        gap: 12px;
    }
    .card-foot b {
        font-size: 15px;
    }
    .card-foot a {
        flex: 0 0 auto;
        padding: 9px 14px;
        
    }
    .btn-outline {
        margin-top: 28px;
    }
    .why-section {
        padding: 64px 0 52px;
    }
    .light-heading>p:last-child {
        margin-top: 16px;
        font-size: 15px;
        line-height: 1.55;
    }
    .light-heading>p:last-child br {
        display: none;
    }
    .story-row,
    .story-row.story-reverse {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 42px;
    }
    .story-row+.story-row {
        margin-top: 4px;
    }
    .story-row:first-of-type {
        margin-top: 42px;
    }
    .story-row img,
    .story-reverse img {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        aspect-ratio: 4 / 3;
    }
    .story-copy,
    .story-reverse .story-copy {
        grid-column: 1;
        grid-row: 2;
        padding: 24px 0 44px;
    }
      .recipes-hero {
    min-height: 300px;
  }


  .recipes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recipes-search {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .recipes-search input {
    width: 100%;
  }

  .recipes-filter-row strong {
    width: 100%;
    margin-left: 0;
  }

    .community {
        padding: 60px 0 68px;
    }
    .testimonial-viewport,
    .community .testimonial-viewport {
        width: 100%;
        max-width: 100%;
        margin: 30px 0 0;
        padding: 6px 0 10px;
        overflow: hidden;
        transform: none;
    }
    .testimonial-slider {
        gap: 16px;
        width: 100%;
    }
    .testimonial-slider .testimonial {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        padding: 28px 22px 24px;
    }

    .quote-mark {
        top: 24px;
        right: 20px;
        font-size: 50px;
    }
    .reviewer {
        gap: 12px;
    }
    .reviewer b,
    .reviewer small {
        font-size: 14px;
    }
    .community-copy>p:not(.eyebrow) {
        font-size: 15px;
        line-height: 1.6;
    }

    .cta-section {
        min-height: 520px;
        padding: 60px 0;
    }
    .cta-inner {
        width: 100%;
        max-width: 100%;
    }
    .cta-inner>p:not(.eyebrow) {
        margin: 18px auto 22px;
        font-size: 15px;
        line-height: 1.55;
    }
    .cta-inner .hero-buttons {
        width: min(100%, 300px);
        margin: 0 auto;
    }
      .photo-collage {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        margin: 0 auto;
    }
    .photo-collage img {
        display: block;
        min-width: 0;
        border-radius: 10px;
    }
    .photo-collage .quest-tall {
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: 16 / 9;
    }
    .photo-collage .quest-small {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: 7 / 8;
    }
    .photo-collage .quest-wide {
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: 16 / 9;
    }


    .catalog-content {
        padding-top: 0;
        padding-right: 18px;
        padding-left: 18px;
    }

    .filter-panel {
        margin: 0 0 28px;
        padding: 13px 0 11px;
        border-top: 1px solid #eee8df;
        border-bottom: 1px solid #e7dfd5;
    }
    .mobile-filter-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .desktop-filter-row,
    .desktop-active-filters,
    .filter-popover {
        display: none;
    }
    .mobile-filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-width: 70px;
        height: 31px;
        padding: 0 10px;
        background: #fffaf3;
        border: 1px solid #e3ddd5;
        border-radius: 1px;
        color: #292521;
        
        font-weight: 700;
        cursor: pointer;
    }
    .filter-toggle-icon {
        
        line-height: 1;
    }
    .filter-count {
        display: inline-grid;
        place-items: center;
        min-width: 14px;
        height: 14px;
        padding: 0 4px;
        background: #161310;
        border-radius: 999px;
        color: #fff;
        
        line-height: 14px;
    }
    .mobile-total-classes {
        color: #7d756c;
        
    }
    .filter-drawer-overlay,
    .filter-drawer {
        display: block;
        position: fixed;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease, transform .22s ease;
    }
    .filter-drawer-overlay {
        inset: 0;
        z-index: 10010;
        background: rgba(0, 0, 0, .32);
    }
    .filter-drawer {
        top: 26px;
        left: 10px;
        right: 10px;
        z-index: 10011;
        max-height: calc(100vh - 52px);
        overflow: hidden;
        background: #fff;
        box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
        transform: translateY(-8px);
    }
    body.filter-drawer-open .filter-drawer-overlay,
    body.filter-drawer-open .filter-drawer {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
    .filter-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 41px;
        padding: 0 13px;
        border-bottom: 1px solid #eee8e1;
    }
    .filter-drawer-header h2 {
        margin: 0;
        color: #2f2924;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.2;
    }
    .filter-drawer-close {
        width: 30px;
        height: 30px;
        padding: 0;
        background: transparent;
        border: 0;
        color: #55504b;
        font-size: 0;
        line-height: 30px;
        cursor: pointer;
    }
    .filter-drawer-close::before {
        content: "\00d7";
        font-size: 24px;
    }
    .filter-drawer-body {
        max-height: calc(100vh - 144px);
        overflow-y: auto;
        padding: 13px 13px 10px;
    }
    .filter-group {
        margin: 0 0 17px;
    }
    .filter-group p {
        margin: 0 0 9px;
        color: #6d655e;
        
        font-weight: 700;
        letter-spacing: .24em;
        line-height: 1.2;
        text-transform: uppercase;
    }
    .filter-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        margin: 0 5px 8px 0;
        padding: 0 10px;
        background: #fff;
        border: 1px solid #ddd8d1;
        border-radius: 2px;
        color: #211d19;
        
        line-height: 28px;
        cursor: pointer;
    }
    .filter-chip.is-active {
        background: var(--blue);
        border-color: var(--blue);
        color: #fff;
    }
    .filter-drawer-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 10px 13px 12px;
        background: #fff;
        border-top: 1px solid #eee8e1;
    }
    .filter-drawer-clear,
    .filter-drawer-apply {
        height: 37px;
        border-radius: 3px;
        
        cursor: pointer;
    }
    .filter-drawer-clear {
        background: #fff;
        border: 1px solid #ded8d0;
        color: #292521;
    }
    .filter-drawer-apply {
        background: var(--blue);
        border: 1px solid var(--blue);
        color: #fff;
        font-weight: 700;
    }
    .catalog-title {
        align-items: flex-start;
        margin-bottom: 18px;
    }
    .catalog-title h2 {
        font-size: 28px;
        line-height: 1.15;
    }
    .catalog-title span {
        padding-top: 6px;
        color: #7d756c;
        
    }
       .header_noti,
    .header_noti_title {
        display: none;
    }

    .site-header .logo,
    .site-header .logo img {
        width: 66px;
        max-width: 66px;
    }
    .site-header .menu-toggle {
        width: 28px;
        height: 44px;
    }

    .site-header .icon-button,
    .site-header .nav-actions .cart-button {
        width: 24px;
        min-width: 24px;
        height: 44px;
    }
    .site-header .icon-button svg {
        width: 18px;
        height: 18px;
    }

    .catalog-tabs {
          top: 0;
    }
    .site-header .header_search_box {
        top: 0;
        height: 44px;
        min-height: 44px;
        padding: 4px 10px;
    }
    .container,
    .container.narrow,
    .story-wrap,
    .cta-inner {
        width: 100%;
        padding-right: 16px;
        padding-left: 16px;
    }
    .hero {
        min-height: 400px;
    }
    .hero-inner {
        padding-top: 24px;
        padding-bottom: 16px;
    }
    .hero .eyebrow {
        margin-bottom: 8px;
        
        letter-spacing: 2px;
        color:#FFFFFF
    }


    .hero-buttons {
        display: flex;
        width: auto;
        gap: 7px;
    }

    .section-heading {
        margin-bottom: 15px;
    }
	.catalog-title{
		display:block;
	}

	.catalog-title .cat-class-count{
		display:block;
		margin-top:10px;
	}
    .card-body {
        padding: 10px 12px 12px;
    }
    .card-body h3 {
        min-height: 0;
        margin-bottom: 10px;
        
        line-height: 1.22;
    }
    .card-info-list {
        min-height: 0;
    }
    .card-info-list li {
        margin-bottom: 3px;
        
    }
    .card-info-list svg {
        width: 9px;
        height: 9px;
        flex-basis: 9px;
    }
    .card-actions {
        flex-direction: row;
        align-items: center;
        padding-top: 8px;
    }

    .center {
        margin-top: 22px;
    }
    .why-section {
        padding: 34px 0 36px;
    }

    .story-row,
    .story-row.story-reverse,
    .story-row:first-of-type {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 20px;
    }
    .story-row+.story-row {
        margin-top: 3px;
    }
    .story-row img,
    .story-reverse img {
        grid-column: 1;
        grid-row: 1;
        aspect-ratio: 16 / 10;
    }
    .story-copy,
    .story-reverse .story-copy {
        grid-column: 1;
        grid-row: 2;
        padding: 12px 0 18px;
    }

    #stories.community,
    .community.section-light {
        padding: 32px 0 36px;
    }
    .testimonial {
        padding: 17px 18px;
    }

    .cta-section {
        min-height: 278px;
        padding: 34px 0;
    }

    .cta-inner .hero-buttons {
        display: flex;
        width: auto;
        max-width: none;
    }
    .site-footer .footer-inner {
        width: 100%;
        padding: 24px 20px 0;
    }
    .site-footer .footer-logo,
    .site-footer .footer-logo img {
        width: 82px;
        max-width: 82px;
    }

    .site-footer .socials {
        gap: 7px;
    }
    .site-footer .socials a {
        width: 17px;
        height: 17px;
    }
    .site-footer .footer-columns {
        display: block;
        padding-top: 10px;
    }
    .site-footer .footer-heading {
        
    }
      .site-footer .footer-col {
        border-top: 1px solid #e5e5e5;
    }
    .site-footer .footer-heading {
        position: relative;
        margin: 0;
        padding: 14px 34px;
        font-size: 15px;
        font-weight: 700;
        color: #0876bd;
        text-align: center;
        cursor: pointer;
    }
    .site-footer .footer-heading:after {
        content: "+";
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #c58748;
        font-size: 24px;
        font-weight: 300;
    }
    .site-footer .footer-col.footer-open>.footer-heading:after {
        content: "—";
    }
    .site-footer .footer-panel {
        display: none;
        padding: 0 0 16px;
    }
    .site-footer .footer-col.footer-open>.footer-panel {
        display: block;
    }
    .site-footer .footer-panel a {
        display: block;
        margin: 0 0 10px;
        font-size: 16px;
        line-height: 1.35;
    }

    .site-footer .footer-awards img {
        max-width: 42px;
        height: 28px;
    }
    #backTop {
        right: 14px;
        bottom: 18px;
        width: 45px;
        height: 45px;
    }
    .class-card{
        margin-bottom: 30px;
    }
    .nav-wrap {
        height: 48px;
        width: 100%;
        padding: 0 12px;
        gap: 8px
    }
    .site-header .logo {
        width: 76px;
        flex-basis: 76px
    }
    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        width: 30px;
        height: 30px;
        border: 0;
        background: transparent;
        order: -1;
        padding: 0
    }
    .menu-toggle span {
        width: 16px;
        height: 2px;
        background: #34302c;
        display: block
    }
    .menu-toggle em {
        display: none
    }
    .nav-actions {
        margin-left: auto;
        gap: 5px
    }
    .btn-nav {
        display: none
    }
    .cart-button {
        margin-right: 0
    }
    .site-header .icon-button {
        width: 28px;
        height: 28px
    }


    .primary-nav>a,
    .primary-nav>.nav-item>a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 13px 20px;
        border-top: 1px solid #eee8df;
        font-size: 13px
    }
    .header-submenu {
        position: static;
        min-width: 0;
        box-shadow: none;
        padding: 0 0 0 14px;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease
    }
    .nav-chevron-desktop {
        display: none
    }
    .nav-toggle-mobile {
        display: block
    }
    .header_search_box {
        top: 48px;
        right: 12px;
        left: 12px
    }
    .hero {
        min-height: 484px;
        align-items: flex-end;
        padding: 0 0 42px
    }
    .hero-image {
        height: 100%;
        object-position: center top
    }

    .hero-buttons {
        gap: 8px
    }

    .section-heading h2 {
        font-size: 27px;
        line-height: 1.14
    }
    .class-card:nth-child(n+3) {
        display: none
    }
    .card-image {
        aspect-ratio: 1.12
    }
    .btn-outline {
        margin-top: 22px
    }
    .why-section {
        padding: 48px 0;
        background: #555657
    }
    .light-heading>p:last-child {
        
        margin-top: 12px
    }
    .story-row,
    .story-row.story-reverse {
        display: block;
        max-width: 100%;
        margin-top: 26px
    }
    .story-row:first-of-type {
        margin-top: 28px
    }
    .story-row img {
        aspect-ratio: 1.35;
        border-radius: 4px
    }
    .story-copy,
    .story-reverse .story-copy {
        padding: 18px 0 6px
    }
    .story-copy h3 {
        font-size: 22px
    }
    .story-copy div,
    .story-copy p {
        
        color: rgba(255, 255, 255, .78)
    }
    .community {
        padding: 48px 0
    }
    .testimonial {
        margin-top: 22px;
        padding: 24px 20px 22px
    }
    .quote-mark {
        top: 58px;
        right: 18px
    }
    .community-grid {
        display: block
    }
    .community-copy h2 {
        font-size: 27px
    }

    .photo-collage img {
        border-radius: 5px
    }
    .site-footer {
        padding-top: 34px
    }
    .footer-logo {
        width: 130px
    }
    .acknowledgement {
        
        line-height: 1.45
    }
    .newsletter {
        margin-bottom: 24px
    }
    .newsletter input {
        width: 170px
    }
    .newsletter button {
        padding: 0 10px;
        font-size: 12px
    }
    .footer-columns {
        display: block
    }
    .footer-group {
        border-top: 1px solid #eee3d8
    }
    .footer-heading {
        width: 100%;
        height: 42px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .footer-group.footer-open .footer-heading:after,
    .footer-heading.footer-open:after {
        content: '-'
    }
    .footer-panel {
        max-height: 0;
        overflow: hidden;
        transition: max-height .24s ease
    }
    .footer-group.footer-open .footer-panel,
    .footer-panel.footer-open {
        max-height: var(--footer-panel-height, 360px);
        padding-bottom: 12px
    }
    .footer-awards-desktop {
        display: none
    }
    .footer-awards-mobile {
        display: flex;
        margin: 18px auto 0
    }
    .footer-awards img {
        width: 54px;
        height: 36px
    }
    .copyright {
        margin-top: 22px
    }
    .testimonial-viewport {
        max-width: 100%
    }
     .form-grid,
  .recipe-stats,
  .confirm-actions {
    grid-template-columns: 1fr;
  }

  .mock-label {
    height: 35px;
    padding-left: 20px;
    
    line-height: 35px;
  }
    .recipes-hero {
    min-height: 270px;
  }

  .recipes-hero h1 {
    font-size: 46px;
    line-height: 1.02;
  }

  .recipes-grid {
    grid-template-columns: 1fr;
  }


  .header-inner,
  .recipe-page .header-inner,
  .detail-page .header-inner {
    width: 100%;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 0;
  }

  .menu-button {
    display: inline-grid;
    grid-column: 1;
    justify-self: start;
  }

  .header-inner > a[aria-label="Otago Kitchen"] {
    grid-column: 2;
    justify-self: center;
  }

  .logo,
  .detail-page .logo {
    width: 75px;
  }

  .header-actions {
    grid-column: 3;
    justify-self: end;
    gap: 18px;
  }

  .book-button {
    display: none;
  }

  .checkout-main {
    width: 100%;
    margin: 0;
  }

  .checkout-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .checkout-form {
    padding: 28px 20px 0;
  }

  .checkout-main .page-title {
    margin-bottom: 24px;
    font-size: 28px;
  }

  .checkout-section {
    padding-bottom: 36px;
  }

  .checkout-section + .checkout-section {
    margin-top: 36px;
  }

  .section-heading {
    gap: 12px;
    margin-bottom: 12px;
  }

  .section-title {
    font-size: 21px;
  }

  .field {
    gap: 7px;
  }

  .field label {
    
  }

  .field input,
  .field select {
    height: 28px;
    
  }

  .field textarea {
    min-height: 54px;
    
  }

  .checkout-summary {
    order: -1;
    width: 100%;
    max-width: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .mobile-summary-row {
    min-height: 40px;
    border-top: 1px solid #f0ece7;
    border-bottom: 1px solid #ebe6df;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    color: #151515;
    background: #fff;
    cursor: pointer;
    list-style: none;
  }

  .mobile-summary-row::-webkit-details-marker {
    display: none;
  }

  .mobile-summary-row span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    
  }

  .mobile-summary-row span::before {
    content: "";
    width: 5px;
    height: 5px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
  }

  .summary-details[open] .mobile-summary-row span::before {
    transform: rotate(225deg) translate(-1px, -1px);
  }

  .mobile-summary-row strong {
    
    font-size: 14px;
  }

  .summary-body {
    padding: 16px 20px 15px;
    background: #fff;
  }

  .order-summary-title {
    display: none;
  }

  .summary-item {
    grid-template-columns: 49px minmax(0, 1fr) 18px;
    gap: 9px;
    margin-bottom: 19px;
  }

  .summary-name {
    font-size: 16px;
  }

    .contact-page .contact-hero {
    min-height: 320px;
    height: 320px;
  }

  .contact-page .contact-hero-inner,
  .contact-page .contact-inner {
    width: calc(100% - 32px);
  }

  .contact-page .contact-hero h1 {
    font-size: 52px;
  }

  .contact-page .contact-hero-copy {
    max-width: 310px;
    margin-top: 18px;
    font-size: 14px;
  }

  .contact-page .contact-main {
    padding: 34px 0 54px;
  }

  .contact-page .contact-section-title {
    font-size: 24px;
  }

  .contact-page .contact-person {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 14px;
  }

  .contact-page .contact-avatar {
    width: 50px;
    height: 50px;
    font-size: 16px;
  }

  .contact-page .contact-map-image,
  .contact-page .contact-map-frame {
    height: 260px;
  }

  .summary-line {
    grid-template-columns: 1fr 26px 48px;
    line-height: 1.85;
  }

  .voucher-row {
    grid-template-columns: 1fr 61px;
    gap: 12px;
    margin-top: 12px;
  }

  .voucher-row input,
  .voucher-row .btn {
    height: 28px;
    
  }
  .detail-page .class-overview,
  .detail-page .booking-card,
  .detail-wide {
    grid-column: 1;
    grid-row: auto;
  }

  .menu-section .ingredient-pills,
  .reviews-grid,
  .things-section .things-grid {
    grid-template-columns: 1fr;
  }
  .summary-divider {
    margin: 14px 0 8px;
    background: #a49f99;
  }

  .total-row {
    
  }

  .total-price {
    font-size: 19px;
  }

  .gift-note {
    display: none;
  }

  .payment-tabs {
    margin-top: 13px;
  }

  .payment-tab {
    height: 34px;
    gap: 6px;
    
    white-space: nowrap;
  }

  .payment-fields {
    grid-template-columns: 1fr 1fr;
    margin-top: 14px;
  }

  .payment-fields .full {
    grid-column: 1 / -1;
  }

  .complete-payment {
    height: 44px;
    margin-top: 37px;
    
  }

  .bank-transfer-panel {
    margin-top: 12px;
  }

  .bank-row {
    min-height: 48px;
    padding: 11px 14px;
  }

  .bank-note {
    padding: 13px 14px 14px;
    
  }

  .recipe-main {
    width: 100%;
    margin: 0;
    padding: 31px 20px 60px;
  }

  .recipe-hero {
    position: relative;
  }

  .recipe-title {
    font-size: 25px;
  }

  .recipe-meta {
    margin-top: 13px;
    gap: 8px 10px;
    
    line-height: 1.6;
  }

  .rating-row {
    margin-top: 14px;
    padding-right: 132px;
  }

  .stars {
    
  }

  .likes {
    
  }

  .recipe-actions {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-top: 0;
    gap: 20px;
    
  }

  .recipe-stats {
    margin-top: 27px;
    gap: 14px;
  }

  .stat-card {
    height: 52px;
    border-radius: 8px;
    gap: 13px;
    padding: 0 15px;
  }

  .stat-icon {
    width: 24px;
    height: 24px;
  }

  .stat-label {
    
  }

  .stat-value {
    
    font-weight: 700;
  }

  .about-recipe {
    margin-top: 26px;
    gap: 16px;
  }

  .recipe-section-title {
    margin-bottom: 13px;
    font-size: 22px;
  }
	.newsletter-modal-box{
		padding:42px 22px 34px;
	}

	.newsletter-modal-box h2{
		font-size:32px;
	}

	.newsletter-modal-desc{
		font-size:15px;
		margin-bottom:28px;
	}
  .about-copy {
    max-width: none;
    
    line-height: 1.62;
  }

  .recipe-photo {
    width: 100%;
    border-radius: 8px;
  }

  .recipe-content {
    margin-top: 27px;
    gap: 28px;
  }

  .ingredient-card {
    border-radius: 8px;
    padding: 12px 14px;
  }

  .ingredient-card + .ingredient-card {
    margin-top: 13px;
  }

  .ingredient-card h3 {
    margin-bottom: 7px;
    font-size: 16px;
  }

  .ingredient-card ul {
    padding-left: 17px;
    
    line-height: 1.45;
  }

  .steps {
    gap: 23px;
  }

  .step {
    grid-template-columns: 44px 20px 1fr;
    
    line-height: 1.55;
  }

  .step-number {
    
  }

  .step-dot::before {
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
  }

  .step-dot::after {
    content: "";
    position: absolute;
    top: 18px;
    bottom: -25px;
    left: 8px;
    width: 1px;
    background: #e7e0d8;
  }

  .step:last-child .step-dot::after {
    display: none;
  }

  .events-hero {
    min-height: 230px;
  }


  .events-hero h1 {
    font-size: 39px;
  }

  .events-about {
    padding: 30px 0 36px;
  }

  .events-about h2 {
    margin-bottom: 22px;
    font-size: 32px;
  }

  .events-about-grid {
    grid-template-columns: 1fr;
    gap: 23px;
  }

  .events-about-item {
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 14px;
  }

  .events-about-icon {
    width: 28px;
    height: 28px;
  }

  .events-about-icon svg {
    width: 14px;
    height: 14px;
  }

  .events-about-item h3 {
    font-size: 22px;
  }

  .events-about-item p {
    font-size: 15px;
    line-height: 1.55;
  }

  .confirm-modal {
    min-height: calc(100vh - 24px);
  }

  .confirm-title {
    font-size: 32px;
  }

  .confirm-message {
    font-size: 19px;
  }

  .confirm-actions {
    width: calc(100% - 40px);
    gap: 12px;
  }

  .confirm-btn {
    width: 100%;
    height: 60px;
    font-size: 21px;
  }

  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px repeat(2, 120px);
  }

  .gallery-main {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .detail-rating-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .detail-social {
    width: 100%;
    margin-left: 0;
  }




  .site-header .nav-item,
  .site-header .has-submenu {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .site-header .primary-nav > a,
  .site-header .primary-nav > .nav-item > a,
  .site-header .primary-nav .nav-item > a {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 19px 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 0 !important;
    color: #2b3a42;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: left;
    text-transform: none !important;
    white-space: normal !important;
  }

  .site-header .primary-nav > a:hover,
  .site-header .primary-nav > .nav-item > a:hover,
  .site-header .primary-nav .nav-item > a:hover,
  .site-header .primary-nav .color_light_blue {
    color: var(--blue, #2f9bd0);
  }

  .site-header .header-submenu,
  .site-header .has-submenu.open .header-submenu {
    position: static !important;
    width: 100% !important;
    max-height: 0;
    margin: 0 !important;
    padding: 0 32px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff;
    opacity: 0;
    visibility: hidden;
  }

  .site-header .has-submenu.open .header-submenu {
    max-height: var(--submenu-height, 620px);
    padding: 0 60px 14px !important;
    opacity: 1;
    visibility: visible;
  }

  .site-header .header-submenu a {
    height: auto !important;
    min-height: 0 !important;
    padding: 9px 0 !important;
    color: #6d655e;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
  }

  body.filter-drawer-open #nav-cooking-class {
    z-index: 1 !important;
    pointer-events: none;
  }

  body.filter-drawer-open .catalog-tabs {
    z-index: 1 !important;
  }

  body.filter-drawer-open #nav-cooking-class .catalog-menu {
    position: relative;
    z-index: 1 !important;
  }

  .filter-drawer-overlay {
    z-index: 10040 !important;
  }

  .filter-drawer,
  .recipes-index-page .recipes-filter-popover.filter-drawer {
    z-index: 10041 !important;
  }

  .filter-drawer-body,
  .recipes-index-page .recipes-filter-popover .filter-popover-inner {
    position: relative;
    z-index: 2;
    background: #fffaf3;
  }

  .recipes-index-page .recipes-catalog {
    padding: 27px 0 52px;
  }

  .recipes-index-page .recipes-search {
    margin: 0 0 17px;
    display: block;
  }

  .recipes-index-page .recipes-search label {
    display: block;
    margin: 0 0 9px;
  }

  .recipes-index-page .recipes-search input {
    width: 100%;
    max-width: none;
    height: 38px;
  }

  .recipes-index-page .recipes-filter-panel {
    margin: 0 0 28px;
    padding: 0 0 17px;
    border-bottom: 1px solid #e7dfd5;
  }

  .recipes-index-page .recipes-mobile-filter-bar {
    display: flex;
  }

  .recipes-index-page .recipes-filter-row.nav-recipes,
  .recipes-index-page .recipes-active-row {
    display: none !important;
  }

  .recipes-index-page .recipes-filter-popover.filter-drawer {
    display: block;
    position: fixed;
    top: 18px !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-height: calc(100dvh - 36px);
    overflow: hidden;
    border: 1px solid #ded8d0;
    background: #fffaf3;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .22s ease;
  }

  body.recipes-filter-drawer-open .recipes-index-page .recipes-filter-popover.filter-drawer {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .recipes-index-page .recipes-filter-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .32);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 10040 !important;
  }

  body.recipes-filter-drawer-open .recipes-index-page .recipes-filter-drawer-overlay:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
  }

  .recipes-index-page .recipes-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 47px;
    padding: 0 16px;
    border-bottom: 1px solid #eee8e1;
    background: #fffaf3;
  }

  .recipes-index-page .recipes-drawer-header h2 {
    margin: 0;
    color: #2f2924;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
  }

  .recipes-index-page .recipes-filter-popover .filter-popover-inner {
    max-height: calc(100dvh - 142px);
    overflow-y: auto;
    padding: 16px 18px 4px;
  }

  .recipes-index-page .recipes-filter-popover .filter-group {
    display: block !important;
    margin: 0 0 22px;
    padding: 0;
  }

  .recipes-index-page .recipes-filter-popover .filter-group p {
    margin: 0 0 12px;
    color: #6d655e;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .28em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .recipes-index-page .recipes-filter-popover .filter-chip {
    min-height: 34px;
    height: auto;
    margin: 0 8px 10px 0;
    padding: 0 14px;
    border-radius: 2px;
    font-size: 14px;
    line-height: 32px;
  }

  .recipes-index-page .recipes-drawer-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    padding: 11px 16px 14px;
    border-top: 1px solid #eee8e1;
    background: #fffaf3;
  }

  .recipes-index-page .recipes-drawer-footer button {
    height: 39px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 700;
  }
  .feature-grid,
  .ingredient-pills,
  .location-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .detail-wide.detail-section {
    padding-top: 32px;
  }
    .card-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .book-now {
        width: 100%;
        min-width: 0;
    }
  .menu-section .detail-section-title,
  .things-section .detail-section-title,
  .faq-section .detail-section-title {
    font-size: 26px;
  }
  .schedule-hero {
    min-height: 270px;
  }

  .schedule-hero-inner h1 {
    font-size: 48px;
  }

  .booking-modal {
    padding: 12px;
  }

  .booking-modal-header h2 {
    font-size: 21px;
  }

  .booking-modal-body {
    padding: 18px;
  }

  .booking-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .booking-modal-footer {
    margin: 0 18px;
  }
  .menu-section .ingredient-pill {
    min-height: 50px;
    padding: 0 14px;
    font-size: 18px;
  }

  .menu-section .ingredient-pill .count {
    
  }

  .location-section .map-frame {
    height: 300px;
  }

  .reviews-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .review-card p,
  .thing-card p,
  .faq-section .faq-item {
    
  }

  .thing-card {
    min-height: 0;
  }
}

@media (min-width: 576px) {
    .container{
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container{
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container{
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container{
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1280px;
    }
}