.brewing-grid {

 display: grid;

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

 gap: 16px;

 margin-bottom: 30px;

}



.brewing-card {

 background: var(--cream, #fdfbf7);

 border: 1px solid rgba(0, 0, 0, 0.07);

 border-radius: 10px;

 padding: 18px;

 box-sizing: border-box;

 transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

}



.brewing-card:hover {

 transform: translateY(-3px);

 border-color: rgba(109, 61, 32, 0.25);

 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);

}



.brewing-header {

 display: flex;

 align-items: center;

 gap: 10px;

 margin-bottom: 14px;

 padding-bottom: 10px;

 border-bottom: 1px dashed rgba(0, 0, 0, 0.1);

}



.brewing-icon-wrap {

 font-size: 20px;

 width: 40px;

 height: 40px;

 display: flex;

 align-items: center;

 justify-content: center;

 background: #ffffff;

 border-radius: 50%;

 border: 1px solid rgba(0, 0, 0, 0.05);

 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);

 flex-shrink: 0;

}



.brewing-title {

 font-size: 14px;

 font-weight: 800;

 margin: 0 0 2px;

 color: var(--text-main, #2b1b13);

}



.brewing-subtitle {

 font-size: 10.5px;

 color: var(--text-muted, #777);

 display: block;

}



.brewing-specs {

 display: flex;

 flex-direction: column;

 gap: 6px;

}



.spec-item {

 display: flex;

 justify-content: space-between;

 align-items: center;

 font-size: 11.5px;

 padding: 2px 0;

}



.spec-label {

 color: var(--text-muted, #666);

}



.spec-value {

 font-weight: 700;

 color: var(--text-main, #2b1b13);

 text-align: right;

}



/* RESPONSIVE */

@media (max-width: 1024px) {

 .brewing-grid {

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

 }

}



@media (max-width: 550px) {

 .brewing-grid {

 grid-template-columns: 1fr;

 }

}

/* Coffee shine heseg SECTION */
.coffee-experience {
 position: relative;
 width: 100%;
 overflow: hidden;
 background: #fff;
 font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.coffee-experience-inner {
 width: min(1200px, 92%);
 margin: 0 auto;
 min-height: 620px;
 display: grid;
 grid-template-columns: 52% 48%;
 align-items: center;
 position: relative;
}

/* LEFT VISUAL */
.coffee-visual {
 position: relative;
 height: 560px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.coffee-circle {
 width: 390px;
 height: 390px;
 border-radius: 50%;
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
}

.coffee-circle-line {
 position: absolute;
 width: 395px;
 height: 395px;
 border: 1px solid #d8d8d8;
 border-radius: 50%;
}

/* PRODUCT BACKGROUND CIRCLE */
.coffee-product {
 position: relative;
 width: 295px;
 height: 295px;
 border-radius: 50%;
 background-position: center;
 background-size: cover;
 background-repeat: no-repeat;
 box-shadow:
 0 15px 35px rgba(0,0,0,.18),
 inset 0 0 0 8px rgba(255,255,255,.8);
 overflow: hidden;
 z-index: 3;
 transition: background-image 0.4s ease, transform 0.3s ease;
}

.coffee-product:hover {
 transform: scale(1.03);
}

/* BACKGROUND WAVE */
.coffee-wave {
 position: absolute;
 width: 240px;
 height: 120px;
 background: rgba(255,255,255,.35);
 border-radius: 50%;
 transform: rotate(-25deg);
 z-index: 2;
 left: 75px;
 top: 100px;
 filter: blur(1px);
}

/* NAVIGATION */
.coffee-nav {
 position: absolute;
 border: 0;
 background: transparent;
 cursor: pointer;
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 0;
 color: #18203b;
 z-index: 10;
 text-align: left;
 outline: none;
}

.coffee-nav-icon {
 width: 54px;
 height: 54px;
 min-width: 54px;
 border-radius: 50%;
 background: #fff;
 border: 1px solid #ddd;
 box-shadow: 0 3px 8px rgba(0,0,0,.12);
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all .3s ease;
}

.coffee-nav-icon img {
 width: 64px;
 height: 64px;
 object-fit: contain;
}

.coffee-nav-text {
 font-size: 12px;
 line-height: 1.15;
 color: #16203d;
 font-weight: 500;
 white-space: nowrap;
}

/* Active Navigation */
.coffee-nav.active .coffee-nav-icon {
 width: 76px;
 height: 76px;
 min-width: 76px;
 background: #224a29;
 color: white;
 border: 5px solid #f3f3f3;
 box-shadow: 0 5px 15px rgba(0,0,0,.18);
}

.coffee-nav.active .coffee-nav-text {
 font-weight: 800;
}

/* Nav Positions */
.coffee-nav[data-tab="profile"] { top: 70px; right: 70px; }
.coffee-nav.nav-blend { top: 165px; right: 15px; }
.coffee-nav.nav-info { top: 260px; right: 10px; }
.coffee-nav.nav-preparation { top: 355px; right: 50px; }

.coffee-nav:not(.active):hover .coffee-nav-icon {
 transform: scale(1.08);
 border-color: #aaa;
}

/* CONTENT */
.coffee-content {
 max-width: 540px;
 padding-left: 30px;
 position: relative;
}

.coffee-tab {
 display: none;
 animation: coffeeFade .45s ease forwards;
}

.coffee-tab.active {
 display: block;
}

@keyframes coffeeFade {
 from { opacity: 0; transform: translateY(12px); }
 to { opacity: 1; transform: translateY(0); }
}

.coffee-small-title {
 font-family: "Brush Script MT", "Segoe Script", cursive;
 font-size: 20px;
 color: #17203d;
 margin-bottom: 12px;
}

.coffee-tab h2 {
 margin: 0 0 14px;
 font-size: 29px;
 line-height: 1.15;
 color: #101b3a;
 font-weight: 750;
}

.coffee-description {
 margin: 0;
 max-width: 500px;
 color: #30384c;
 font-size: 16px;
 line-height: 1.6;
}

.coffee-details {
 display: flex;
 gap: 90px;
 margin-top: 38px;
}

.coffee-detail {
 display: flex;
 flex-direction: column;
 gap: 9px;
}

.coffee-detail strong { color: #101b3a; font-size: 16px; }
.coffee-detail span { color: #40465a; font-size: 15px; }

/* ===== BLEND TAB — background map image ===== */
.coffee-tab--blend {
    position: relative !important;
    overflow: hidden !important;
    min-height: 380px !important;
}

.coffee-tab__bg,
.coffee-tab__bg-mob {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    height: 100% !important;
    width: auto !important;
    max-width: 80% !important;
    object-fit: contain !important;
    z-index: 1 !important;
    pointer-events: none !important;
    margin: 0 !important;

    /* Зүүн ирмэгийг зөөлрүүлж алга болгох */
    -webkit-mask-image: 
        linear-gradient(to left, transparent 0%, black 25%),
        linear-gradient(to top, transparent 0%, black 25%);
    -webkit-mask-composite: source-in;
    mask-image: 
        linear-gradient(to left, transparent 0%, black 25%),
        linear-gradient(to top, transparent 0%, black 25%);
    mask-composite: intersect;
}

.coffee-tab__bg-mob {
    display: none !important;
}

.coffee-tab__content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 300px !important;
}

.coffee-preparation {
 display: flex;
 gap: 18px;
 margin-top: 32px;
}

.preparation-item { width: 105px; text-align: center; }

.preparation-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 10px;
    border-radius: 50%;
    border: 1px solid #eee;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* SVG иконуудын чанар болон хэмжээг тэнцүүлэгч */
.preparation-icon svg {
    width: 34px;
    height: 34px;
    display: block;
}

.preparation-item span { font-size: 13px; color: #1d2438; }

/* BOTTOM CURVE */
.coffee-bottom {
 position: relative;
 height: 125px;
 margin-top: -5px;
 overflow: hidden;
}

.coffee-bottom-image {
 position: absolute;
 left: -3%;
 right: -3%;
 bottom: -60px;
 height: 150px;
 background: linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.05)),
 url("https://purecoffee.mn/image/slide1.jpg?auto=format&fit=crop&w=1800&q=80") center / cover;
 clip-path: ellipse(72% 100% at 50% 100%);
}

.coffee-cup {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    background-color: white;
    border-radius: 10px 10px 25px 25px;
    box-shadow: 0 -3px 15px rgba(0,0,0,.15);
    z-index: 4;

    /* Доторх зургийг хайрцагт нь тохируулах */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.coffee-cup img {
    max-width: 100%;
    max-height: 85%;
    object-fit: contain;
}

/* RESPONSIVE */
@media (max-width: 900px) {
 .coffee-experience-inner {
 grid-template-columns: 1fr;
 min-height: auto;
 padding-top: 50px;
 padding-bottom: 60px;
 }
 .coffee-visual { height: 450px; }
 .coffee-content {
 max-width: 650px;
 margin: 0 auto;
 padding-left: 0;
 text-align: center;
 }
 .coffee-description { margin-left: auto; margin-right: auto; }
 .coffee-details { justify-content: center; gap: 60px; }
 .coffee-nav[data-tab="profile"] { top: 30px; right: calc(50% - 190px); }
 .coffee-nav.nav-blend { top: 120px; right: calc(50% - 230px); }
 .coffee-nav.nav-info { top: 220px; right: calc(50% - 235px); }
 .coffee-nav.nav-preparation { top: 310px; right: calc(50% - 210px); }

 .coffee-tab--blend {
     min-height: auto !important;
 }
 .coffee-tab__bg {
     display: none !important;
 }
 .coffee-tab__bg-mob {
     display: block !important;
     position: static !important;
     width: 100% !important;
     max-width: 100% !important;
     height: auto !important;
     margin-bottom: 20px !important;
     border-radius: 12px !important;
     -webkit-mask-image: none !important;
     mask-image: none !important;
 }
 .coffee-tab__content {
     max-width: 100% !important;
 }
}

@media (max-width: 600px) {
 .coffee-experience-inner { width: 94%; padding-top: 25px; padding-bottom: 45px; }
 .coffee-visual { height: 365px; transform: scale(.88); }
 .coffee-circle { width: 300px; height: 300px; }
 .coffee-circle-line { width: 305px; height: 305px; }
 .coffee-product { width: 225px; height: 225px; }
 .coffee-nav-icon { width: 44px; height: 44px; min-width: 44px; font-size: 15px; }
 .coffee-nav.active .coffee-nav-icon { width: 60px; height: 60px; min-width: 60px; }
 .coffee-nav-text { display: none; }
 .coffee-nav[data-tab="profile"] { top: 12px; right: 20px; }
 .coffee-nav.nav-blend { top: 92px; right: 0; }
 .coffee-nav.nav-info { top: 185px; right: 0; }
 .coffee-nav.nav-preparation { top: 275px; right: 20px; }
 .coffee-content { padding: 0 8px; }
 .coffee-small-title { font-size: 18px; }
 .coffee-tab h2 { font-size: 25px; }
 .coffee-description { font-size: 14px; line-height: 1.55; }
 .coffee-details { gap: 30px; margin-top: 28px; }
 .coffee-detail strong { font-size: 14px; }
 .coffee-detail span { font-size: 13px; }
 .coffee-preparation { justify-content: center; gap: 8px; }
 .preparation-item { width: 85px; }
 .preparation-icon { width: 55px; height: 55px; }
 .coffee-bottom { height: 90px; }
}