/* ==========================================================================
   GOBIDARA — Botanical Commerce Theme
   Yves Rocher USA-с сэдэвлэсэн хялбаршуулсан дизайн систем
   Энэ файл нь style.css-ийн дараа ачаалагдаж, түүнийг дарж бичнэ.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Өнгө */
    --gd-ink: #272E0F;          /* үндсэн текст — гүн ойн ногоон-хар */
    --gd-forest: #1E351A;       /* хар ногоон гадаргуу */
    --gd-green: #00772F;        /* брэндийн ногоон — CTA */
    --gd-green-deep: #174C2C;   /* hover */
    --gd-green-mid: #245732;
    --gd-cream: #FFF8F1;        /* дулаан цөцгий */
    --gd-sand: #F5EDE0;         /* үндсэн шаргал гадаргуу (зурвас, чип, тойрог) */
    --gd-sand-soft: #FBF6EE;    /* зөөлөн шаргал */
    --gd-off: #FAF7F2;          /* дулаан цайвар — зургийн дэвсгэр */
    --gd-mint: var(--gd-sand);  /* хуучин нэрийн нийцэл */
    --gd-muted: #5C574C;        /* туслах текст (дулаан саарал) */
    --gd-gray: #736B5F;         /* туслах текст — цагаан дээр 5.25:1 (AA) */
    --gd-line: #EAE2D6;         /* хүрээ */
    --gd-line-2: #CFC5B4;
    --gd-sale: #CB0050;         /* хямдрал / анхааруулга */
    --gd-white: #ffffff;

    /* Хэлбэр */
    --gd-radius: 2px;
    --gd-radius-pill: 999px;
    --gd-header-h: 74px;
    --gd-announce-h: 38px;

    /* Фонт */
    --gd-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --gd-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

    /* Хөдөлгөөн */
    --gd-ease: cubic-bezier(.25, .46, .45, .94);
    --gd-t: .35s var(--gd-ease);

    /* Хуучин хувьсагчдыг шинэ палитр руу холбох (буцаж нийцтэй байх) */
    --bg-primary: #ffffff;
    --bg-secondary: var(--gd-off);
    --bg-card: #ffffff;
    --border-color: var(--gd-line);
    --border-hover: var(--gd-line-2);
    --text-primary: var(--gd-ink);
    --text-secondary: var(--gd-muted);
    --text-muted: var(--gd-gray);
    --accent-green: var(--gd-green);
    --accent-green-hover: var(--gd-green-deep);
    --accent-terracotta: var(--gd-sale);
    --border-radius-lg: var(--gd-radius);
    --border-radius-md: var(--gd-radius);
    --border-radius-sm: var(--gd-radius);
    --shadow-subtle: 0 4px 20px rgba(39, 46, 15, .06);
    --shadow-hover: 0 10px 30px rgba(39, 46, 15, .10);
    --transition-base: var(--gd-t);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
body {
    background-color: var(--gd-white) !important;
    color: var(--gd-muted);
    font-family: var(--gd-sans);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.title {
    font-family: var(--gd-sans);
    color: var(--gd-ink);
    font-weight: 600;
    line-height: 1.25;
}

p { color: var(--gd-muted); }

a { transition: color var(--gd-t); }
a:hover { color: var(--gd-green); }

::selection { background: var(--gd-sand); color: var(--gd-ink); }

img { max-width: 100%; }

/* Хэсгийн зай — YR маягийн уужим */
.section-space {
    padding-top: 84px;
    padding-bottom: 84px;
}
@media (max-width: 991px) { .section-space { padding-top: 56px; padding-bottom: 56px; } }
@media (max-width: 575px)  { .section-space { padding-top: 44px; padding-bottom: 44px; } }

/* Тогтмол header-тэй болсон тул хуучин offset хэрэггүй */
.adem-mg-top { margin-top: 0 !important; }

/* Туслах элементүүд ---------------------------------------------------- */
.gd-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gd-green);
    margin-bottom: 14px;
}

.gd-serif { font-family: var(--gd-serif) !important; }

.gd-bg-cream { background-color: var(--gd-cream); }
.gd-bg-off   { background-color: var(--gd-off); }
.gd-bg-mint  { background-color: var(--gd-sand); }

/* --------------------------------------------------------------------------
   3. ЗАРЛАЛЫН МӨР (announcement bar)
   -------------------------------------------------------------------------- */
/* Yves Rocher-ийн announcement bar-тай ижил: нэг мессеж, 3 сек тутам эргэлдэнэ,
   хоёр талдаа сум. padding 10px 26px, letter-spacing 3px, uppercase.
   Фонт: 0.5625rem (9px) утас → 0.8125rem (13px) desktop. */
.gd-announce {
    --gd-announce-font-size: 0.5625rem;
    background: var(--gd-ink);
    color: var(--gd-cream);
    padding: 10px 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
@media (min-width: 768px) {
    .gd-announce { --gd-announce-font-size: 0.8125rem; padding: 10px 40px; gap: 20px; }
}

.gd-announce-track {
    display: flex;
    justify-content: center;
    min-width: 0;
    flex: 0 1 auto;
}
.gd-announce-item {
    display: none;
    font-size: var(--gd-announce-font-size);
    font-weight: 500;
    letter-spacing: 3px;
    line-height: 1.4;
    text-transform: uppercase;
    text-align: center;
}
.gd-announce-item.is-selected { display: block; }
.gd-announce-item a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.gd-announce-item a:hover { color: var(--gd-white); }

.gd-announce-nav {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .55;
    cursor: pointer;
    transition: opacity var(--gd-t);
}
.gd-announce-nav:hover { opacity: 1; }
@media (max-width: 767px) {
    .gd-announce { gap: 8px; letter-spacing: 2px; }
    .gd-announce-item { letter-spacing: 2px; }
}

/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */

/* .wrapper дээрх overflow-x: hidden нь scroll container үүсгэж sticky-г
   идэвхгүй болгодог. `clip` нь хэвтээ халилтыг адилхан таслах ч
   sticky-г ажиллуулна. */
.wrapper { overflow-x: clip; }

.header-area,
.header-transparent {
    position: sticky !important;
    top: 0;
    left: auto;
    background-color: var(--gd-white) !important;
    border-bottom: 1px solid var(--gd-line);
    padding: 0 !important;
    z-index: 999;
    transition: box-shadow var(--gd-t);
}
/* main.js нь гүйлгэх үед .sticky / .sticky-show класс нэмдэг. Загварын
   хуучин хар дэвсгэр, slideUp/slideDown анимацийг цуцалж, зөвхөн сүүдэр үлдээв. */
.sticky-header.sticky,
.sticky-header.sticky-show {
    position: sticky !important;
    background-color: var(--gd-white) !important;
    animation: none !important;
    box-shadow: 0 1px 16px rgba(39, 46, 15, .08);
    z-index: 999;
}
.sticky-header.sticky .header-logo img { width: auto; height: 44px; }
.sticky-header.sticky .main-nav > li > a {
    height: var(--gd-header-h);
    line-height: var(--gd-header-h);
}

/* style.css нь .header-area .container-ыг 1733px болгодог тул header нь
   доорх контентоос (Bootstrap .container = 1200px) өргөн болж, лого/цэс
   контенттойгоо эгнэхгүй байсан. Breakpoint бүрээр буцаан тааруулав. */
.header-area .container { max-width: 100%; }
@media (min-width: 576px)  { .header-area .container { max-width: 540px; } }
@media (min-width: 768px)  { .header-area .container { max-width: 720px; } }
@media (min-width: 992px)  { .header-area .container { max-width: 960px; } }
@media (min-width: 1200px) { .header-area .container { max-width: 1200px; } }

.header-area .row { min-height: var(--gd-header-h); }

.header-logo img { width: auto; height: 44px; object-fit: contain; }

/* Үндсэн цэс */
.main-nav {
    justify-content: center;
    flex-wrap: nowrap;          /* цэс доошоо унахгүй */
}
.main-nav > li {
    margin: 0 13px;
    flex: 0 0 auto;             /* flex шахалтаас болж текст мөр таслахаас сэргийлнэ */
}
.main-nav > li > a {
    color: var(--gd-ink) !important;
    font-family: var(--gd-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;        /* "Бидний тухай" хоёр мөр болохгүй */
    height: var(--gd-header-h);
    line-height: var(--gd-header-h);
    padding: 0 2px;
    position: relative;
}
/* 992–1199px дээр багана нарийсдаг тул үсгийн зайг чангатгана */
@media (min-width: 992px) and (max-width: 1199px) {
    .main-nav > li { margin: 0 5px; }
    .main-nav > li > a { font-size: 11px; letter-spacing: .4px; padding: 0; }
}
.main-nav > li > a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 22px;
    height: 1px;
    background: var(--gd-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--gd-t);
}
.main-nav > li > a:hover,
.main-nav .has-submenu:hover > a { color: var(--gd-green) !important; }
.main-nav > li > a:hover::after,
.main-nav .has-submenu:hover > a::after { transform: scaleX(1); }

/* Дэд цэс */
.main-nav .has-submenu .submenu-nav {
    background: var(--gd-white);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
    box-shadow: 0 18px 40px rgba(39, 46, 15, .10);
    padding: 10px 0;
    min-width: 230px;
}
.main-nav .has-submenu .submenu-nav > li { border: 0; }
.main-nav .has-submenu .submenu-nav > li a {
    color: var(--gd-muted) !important;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 24px;
}
.main-nav .has-submenu .submenu-nav > li a:hover {
    color: var(--gd-green) !important;
    background: var(--gd-sand);
    padding-left: 28px;
}

/* Header дээрх үйлдлийн товчнууд */
.header-action { gap: 4px; align-items: center; }
.header-action-btn {
    position: relative;
    color: var(--gd-ink);
    background: transparent;
    border: 0;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--gd-radius-pill);
    transition: background var(--gd-t), color var(--gd-t);
}
.header-action-btn:hover { background: var(--gd-sand); color: var(--gd-green); }
.header-action-btn .icon svg { width: 21px; height: 21px; }

/* Хэл солих чип */
.gd-lang {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    border: 1px solid var(--gd-line-2);
    border-radius: var(--gd-radius-pill);
    padding: 6px 14px;
    width: auto !important;
    height: auto !important;
    color: var(--gd-ink);
}
.gd-lang:hover { border-color: var(--gd-green); background: var(--gd-white); }

/* Сагсны тоо */
.header-action-btn .badge {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--gd-green) !important;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    border-radius: var(--gd-radius-pill);
}

/* Гар утасны hamburger */
.gd-burger { display: none; }
@media (max-width: 991px) {
    .gd-burger { display: inline-flex; }
    .header-logo img { height: 36px; }
    :root { --gd-header-h: 64px; }
}

/* --------------------------------------------------------------------------
   5. ТОВЧ
   -------------------------------------------------------------------------- */
.btn,
.btn-dark,
.btn-border-dark,
.btn-total,
.btn-place-order,
.btn-submit,
.btn-primary,
.btn[type="submit"],
.product-action-btn {
    font-family: var(--gd-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    border-radius: var(--gd-radius) !important;
    padding: 11px 24px;
    /* style.css нь .btn дээр height: 50px / line-height: 37px тогтоодог тул
       padding-ийн өөрчлөлт өндөрт огт нөлөөлдөггүй байв. */
    height: auto;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    transition: background-color var(--gd-t), color var(--gd-t), border-color var(--gd-t);
}

/* Хуучин scaleX дүүргэлтийг цуцлах — YR-д цэвэр өнгө солилт */
.btn-dark::before,
.btn-border-dark::before,
.btn-total::before,
.btn-place-order::before,
.btn-submit::before,
.btn-primary::before,
.btn[type="submit"]::before,
.product-action-btn::before,
.btn-outline::before,
.btn-terracotta::before { display: none !important; content: none !important; }

/* Үндсэн — дүүрэн ногоон */
.btn-dark,
.btn-total,
.btn-place-order,
.btn-submit,
.btn-primary,
.btn[type="submit"],
.product-action-btn,
.gd-btn {
    background-color: var(--gd-green) !important;
    color: #fff !important;
    border-color: var(--gd-green) !important;
}
.btn-dark:hover,
.btn-total:hover,
.btn-place-order:hover,
.btn-submit:hover,
.btn-primary:hover,
.btn[type="submit"]:hover,
.product-action-btn:hover,
.gd-btn:hover {
    background-color: var(--gd-green-deep) !important;
    border-color: var(--gd-green-deep) !important;
    color: #fff !important;
}

/* Хоёрдогч — хүрээтэй */
.btn-border-dark,
.btn-outline,
.btn-outline-dark,
.gd-btn-outline {
    background-color: transparent !important;
    color: var(--gd-ink) !important;
    border: 1px solid var(--gd-ink) !important;
}
.btn-border-dark:hover,
.btn-outline:hover,
.btn-outline-dark:hover,
.gd-btn-outline:hover {
    background-color: var(--gd-ink) !important;
    color: #fff !important;
}

/* Цайвар дэвсгэр дээрх товч */
.gd-btn-light {
    background-color: var(--gd-white) !important;
    color: var(--gd-ink) !important;
    border: 1px solid var(--gd-white) !important;
}
.gd-btn-light:hover { background-color: var(--gd-cream) !important; border-color: var(--gd-cream) !important; }

.btn-danger { background-color: var(--gd-sale) !important; border-color: var(--gd-sale) !important; }
.btn-sm { padding: 8px 17px; font-size: 10px; letter-spacing: 1.3px; }

/* Холбоос маягийн товч */
.gd-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gd-ink);
    border-bottom: 1px solid var(--gd-ink);
    padding-bottom: 4px;
}
.gd-link:hover { color: var(--gd-green); border-color: var(--gd-green); }

/* --------------------------------------------------------------------------
   6. ХЭСГИЙН ГАРЧИГ
   -------------------------------------------------------------------------- */
.section-title .title,
.gd-section-title {
    font-family: var(--gd-sans);
    font-size: clamp(19px, 2.1vw, 27px);
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gd-ink);
    margin: 0;
}
.section-title .text-muted,
.gd-section-sub {
    font-size: 14px;
    color: var(--gd-muted);
    letter-spacing: .2px;
    text-transform: none;
    margin-top: 12px;
    max-width: 620px;
}
.section-title.text-center .text-muted,
.gd-section-sub.text-center { margin-left: auto; margin-right: auto; }

.section-title.text-center::after,
.gd-rule::after {
    content: '';
    display: block;
    width: 46px;
    height: 2px;
    background: var(--gd-green);
    margin: 20px auto 0;
}
.line-left-style { background: var(--gd-green); height: 2px; width: 46px; }

/* --------------------------------------------------------------------------
   7. HERO SLIDESHOW
   Yves Rocher-ийн slideshow: дэлгэц дүүрэн зураг, түүн дээр голлосон текст,
   слайд бүхэлдээ линк, 10 сек тутам автоматаар солигдоно, max-height 800px.
   -------------------------------------------------------------------------- */
.gd-slideshow {
    position: relative;
    background: var(--gd-sand);
    overflow: hidden;
}
.gd-slideshow-track { display: block; }

/* Слайдын өндөр. Гурван цэгийг ижил хувиар барина — эс бөгөөс дэлгэцээс
   дэлгэцэд шилжихэд өсөлт нь жигд бус болно. */
.gd-slide {
    display: none;
    position: relative;
    width: 100%;
    height: 22.8rem;
    color: #fff;
}
.gd-slide.is-selected { display: block; }
@media (min-width: 768px) {
    .gd-slide { height: min(45.6vw, 480px); }
}
@media (min-width: 1600px) {
    .gd-slide { height: min(31.2vw, 540px); }
}

.gd-slide-media { position: absolute; inset: 0; }
.gd-slide-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Голлосон цагаан текст ямар ч зураг дээр уншигдахын тулд */
.gd-slide-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(39, 46, 15, .34) 0%, rgba(39, 46, 15, .12) 42%, rgba(39, 46, 15, .55) 100%);
}

.gd-slide-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    padding: 2rem 3rem;
    max-width: 780px;
    margin: 0 auto;
}
@media (min-width: 768px) { .gd-slide-content { gap: 1.5rem; padding: 2.5rem 3.5rem; } }

/* Слайдын гарчиг — Playfair Display (serif) байсныг сайтын үндсэн Montserrat
   болгов. Sans нь ижил жинд илүү нимгэн, өргөн харагддаг тул 400-аас 600
   болгож, том хэмжээнд сийрэгдэхээс сэргийлж үсгийн зайг чангатгав. Зурган
   дээр байрладаг тул сүүдрийг нь бага зэрэг гүнзгийрүүлэв. */
.gd-slide-title {
    font-family: var(--gd-sans);
    font-size: clamp(28px, 4.4vw, 56px);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -.8px;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 20px rgba(39, 46, 15, .45);
}
.gd-slide-desc {
    font-size: clamp(13px, 1.3vw, 16px);
    line-height: 1.75;
    color: rgba(255, 255, 255, .92);
    margin: 0;
    max-width: 46ch;
    text-shadow: 0 1px 12px rgba(39, 46, 15, .35);
}
/* <a> дотор <a> үүрлэж болохгүй тул товч нь зөвхөн харагдах хэлбэр */
.gd-slide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    padding: 12px 26px;
    background: var(--gd-white);
    color: var(--gd-ink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    line-height: 1.4;
    text-transform: uppercase;
    border-radius: var(--gd-radius);
    transition: background-color var(--gd-t), color var(--gd-t);
}
.gd-slide:hover .gd-slide-btn { background: var(--gd-cream); }

/* Сум */
.gd-slideshow-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    background: transparent;
    color: #fff;
    opacity: .75;
    cursor: pointer;
    transition: opacity var(--gd-t);
}
.gd-slideshow-nav:hover { opacity: 1; }
.gd-slideshow-prev { left: 6px; }
.gd-slideshow-next { right: 6px; }
@media (min-width: 768px) {
    .gd-slideshow-prev { left: 20px; }
    .gd-slideshow-next { right: 20px; }
}

/* Цэгүүд */
.gd-slideshow-dots {
    position: absolute;
    left: 0; right: 0; bottom: 18px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.gd-slideshow-dot {
    width: 26px;
    height: 3px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: background-color var(--gd-t);
}
.gd-slideshow-dot.is-selected { background: #fff; }

/* --------------------------------------------------------------------------
   8. ЗАРЧМУУДЫН УРСДАГ МӨР
   Анхаар: анимаци нь өмнө premium-design.css-д байсан бөгөөд тэр файлыг
   ачаалахаа больсноос хойш мөр огт хөдөлдөггүй, зүгээр л таслагдсан
   статик текст болсон байв. Энд бүрэн шинээр бичив.
   -------------------------------------------------------------------------- */
.marquee {
    background: var(--gd-sand);
    border-top: 1px solid var(--gd-line);
    border-bottom: 1px solid var(--gd-line);
    padding: 18px 0;
    overflow: hidden;
    /* Хоёр захад нь аажим бүдгэрүүлж, огцом таслалтыг арилгана */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: gd-marquee 46s linear infinite;
    will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-set {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.marquee-item {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--gd-ink);
    white-space: nowrap;
}

/* Тусгаарлагч — жижиг ногоон цэг */
.marquee .sep {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gd-green);
    margin: 0 26px;
    flex: 0 0 auto;
}

@keyframes gd-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Хөдөлгөөн багасгах тохиргоотой хэрэглэгчид — статик, голлосон, бүрэн харагдана */
@media (prefers-reduced-motion: reduce) {
    .marquee { -webkit-mask-image: none; mask-image: none; }
    .marquee-track { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; }
    .marquee-set:nth-child(2) { display: none; }
    .marquee-set { flex-wrap: wrap; justify-content: center; }
    .marquee .sep { margin: 0 16px; }
}

@media (max-width: 767px) {
    .marquee { padding: 14px 0; }
    .marquee-item { font-size: 11px; letter-spacing: 2px; }
    .marquee .sep { margin: 0 18px; }
}

/* --------------------------------------------------------------------------
   9. АНГИЛЛЫН ДҮРС (category tiles)
   -------------------------------------------------------------------------- */
.product-category-item,
.gd-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.gd-cat-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--gd-sand);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--gd-t), background var(--gd-t);
}
/* Багцын дүрс нь 80×80 icon тул тойрог дотор голлуулж contain-аар байрлуулна.
   Ирээдүйд том зураг оруулбал ч letterbox болохгүй хэмжээтэй. */
.gd-cat-media img {
    width: auto;
    height: 46%;
    max-width: 58%;
    object-fit: contain;
    transition: transform .6s var(--gd-ease);
}
.gd-cat:hover .gd-cat-media { background: var(--gd-cream); }
.gd-cat:hover .gd-cat-media img { transform: scale(1.07); }
.product-category-item .title,
.gd-cat .title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gd-ink);
    margin: 0;
    transition: color var(--gd-t);
}
.gd-cat:hover .title { color: var(--gd-green); }

/* --------------------------------------------------------------------------
   10. БҮТЭЭГДЭХҮҮНИЙ КАРТ
   -------------------------------------------------------------------------- */
.product-item {
    position: relative;
    background: transparent;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: none;
}
.product-item:hover { transform: none !important; box-shadow: none !important; }

.product-thumb {
    position: relative;
    background: var(--gd-off);
    border-radius: var(--gd-radius);
    overflow: hidden;
    aspect-ratio: 4 / 5;   /* thumbnail-ууд 370×450 — таслалтгүй тохирно */
    margin-bottom: 18px;
}
.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--gd-ease);
}
.product-item:hover .product-thumb img { transform: scale(1.05); }

/* Зураг дээрх шошго */
.product-thumb .badge {
    position: absolute;
    top: 12px;
    left: 12px;
    right: auto !important;
    margin: 0 !important;
    background: var(--gd-ink) !important;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: var(--gd-radius);
}

.product-info {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    text-align: left;
}
/* Шошго — нягт, бага зай эзэлнэ */
.product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 7px;
}
.product-tags .badge {
    background: transparent !important;
    color: var(--gd-green);
    border: 1px solid currentColor;
    border-radius: var(--gd-radius);
    font-size: 9px !important;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 2px 6px;
    white-space: nowrap;
}
.product-tags .gd-tag-more {
    color: var(--gd-gray);
    border-color: var(--gd-line-2);
}
.product-info .title {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .2px;
    line-height: 1.5;
    margin: 0 0 8px;
    text-transform: none;
}
.product-info .title a { color: var(--gd-ink); }
.product-info .title a:hover { color: var(--gd-green); }
.product-info .price {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--gd-ink);
}

/* Үнийн мөр — үнэ зүүн талд, жижиг "Үзэх" холбоос баруун талд.
   margin-top:auto нь эгнээн доторх картуудын үнийн мөрийг эгнүүлнэ. */
.product-item .product-info .prices {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 6px;
}
/* "Үзэх" — жижиг ногоон товч, үнийн мөрний баруун талд */
.gd-view-link {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gd-green);
    border: 1px solid var(--gd-green);
    border-radius: var(--gd-radius);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.3px;
    line-height: 1;
    text-transform: uppercase;
    padding: 8px 15px;
    white-space: nowrap;
    transition: background-color var(--gd-t), border-color var(--gd-t);
}
.gd-view-link:hover,
.gd-view-link:focus {
    background: var(--gd-green-deep);
    border-color: var(--gd-green-deep);
    color: #fff;
}

/* Зургийн hover солилт — gallery-ийн эхний зураг дээгүүр нь мяралзан гарна */
.product-thumb .gd-thumb-link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
.gd-thumb-hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .45s var(--gd-ease);
}
.product-item:hover .gd-thumb-hover { opacity: 1; }
/* Хоёр дахь зурагтай үед zoom хийхгүй — зөвхөн цэвэр солилт */
.product-item:hover .product-thumb.has-hover img { transform: none; }

.product-item.out-of-stock .product-thumb img { opacity: .45; }

/* --------------------------------------------------------------------------
   11. МЭДЭЭНИЙ КАРТ
   -------------------------------------------------------------------------- */
.gd-post {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.gd-post-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--gd-radius);
    background: var(--gd-off);
    margin-bottom: 18px;
}
.gd-post-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--gd-ease);
}
.gd-post:hover .gd-post-media img { transform: scale(1.05); }

.gd-post-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.gd-post-date {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gd-gray);
    margin-bottom: 8px;
}
.gd-post-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: .2px;
    color: var(--gd-ink);
    margin: 0 0 8px;
    transition: color var(--gd-t);
}
.gd-post:hover .gd-post-title { color: var(--gd-green); }
.gd-post-excerpt {
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--gd-muted);
    margin: 0 0 14px;
    /* Хоёр мөрөөр таслах — картуудын өндөр жигд байна */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gd-post-more {
    align-self: flex-start;
    margin-top: auto;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gd-ink);
    border-bottom: 1px solid var(--gd-ink);
    padding-bottom: 3px;
    transition: color var(--gd-t), border-color var(--gd-t);
}
.gd-post:hover .gd-post-more { color: var(--gd-green); border-color: var(--gd-green); }

/* --------------------------------------------------------------------------
   12. БРЭНДИЙН ТҮҮХ
   Хоёр талт: нэг талд зураг, нөгөө талд түүх + үзүүлэлт + товч.
   -------------------------------------------------------------------------- */
.gd-story {
    background: var(--gd-ink);
    color: var(--gd-cream);
    overflow: hidden;
}
.gd-story-inner {
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 992px) {
    /* Зураг ба текст яг тэнцүү хоёр хагас */
    .gd-story-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.gd-story-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--gd-forest);
}
@media (min-width: 992px) {
    .gd-story-media { aspect-ratio: auto; min-height: 100%; }
}
.gd-story-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gd-story-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 22px 56px;
    max-width: 620px;
}
@media (min-width: 768px)  { .gd-story-content { padding: 64px 44px; } }
@media (min-width: 992px)  {
    /* Хагас багана нь 620px-ээс өргөн болох тул бичвэрийн блокийг өөрийнх нь
       хагаст төвлүүлж, хоёр тал тэнцүү харагдана. */
    .gd-story-content { max-width: 680px; margin-inline: auto; }
}
@media (min-width: 1200px) { .gd-story-content { padding: 80px 72px; } }

.gd-story .gd-eyebrow { color: rgba(255, 248, 241, .62); }

.gd-story-title {
    font-family: var(--gd-serif);
    font-size: clamp(26px, 3.4vw, 42px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.3px;
    color: var(--gd-cream);
    margin: 0 0 18px;
}
.gd-story-text {
    font-size: 14px;
    line-height: 1.85;
    /* Бараан дэвсгэр дээрх урт бичвэр — .72 нь бүдэг байсан тул цайруулав. */
    color: rgba(255, 248, 241, .88);
    margin: 0 0 28px;
}
/* Текст нь одоо бүтнээрээ, догол мөрүүдтэйгээ ордог. */
.gd-story-text p { margin: 0 0 14px; }
.gd-story-text p:last-child { margin-bottom: 0; }
.gd-story-text strong { color: var(--gd-cream); }

.gd-story-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 38px;
    list-style: none;
    margin: 0 0 32px;
    padding: 22px 0 0;
    border-top: 1px solid rgba(255, 248, 241, .16);
    width: 100%;
}
.gd-story-stats li { display: flex; flex-direction: column; gap: 4px; }
.gd-story-stats strong {
    font-family: var(--gd-serif);
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    color: var(--gd-cream);
}
.gd-story-stats span {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 248, 241, .55);
}

.gd-story-cta { align-self: flex-start; }

/* --------------------------------------------------------------------------
   13. БАГЦЫН КАРТ
   Багц нь ганц бүтээгдэхүүн биш — доторх зүйлсийн жагсаалт, тоо, үнэ нь
   хамгийн чухал мэдээлэл тул тэдгээрийг карт дээр шууд харуулна.
   Медиа хэсгийн дэвсгэр нь багц бүрийн bg_color талбараас ирнэ.
   -------------------------------------------------------------------------- */
.gd-pack {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--gd-white);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
    overflow: hidden;
    transition: border-color var(--gd-t), box-shadow var(--gd-t);
}
.gd-pack:hover {
    border-color: var(--gd-line-2);
    box-shadow: 0 12px 30px rgba(39, 46, 15, .07);
}

.gd-pack-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--gd-pack-bg, var(--gd-sand));
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Жижиг тэмдэг (80×80) — сунгахгүй, голлуулж тавина */
.gd-pack-media img {
    width: auto;
    height: 46%;
    max-width: 52%;
    object-fit: contain;
    transition: transform .6s var(--gd-ease);
}
/* Жинхэнэ гэрэл зураг — бүтээгдэхүүний картын адил талбайг бүтнээр дүүргэнэ. */
.gd-pack-media.is-photo img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
.gd-pack:hover .gd-pack-media img { transform: scale(1.06); }

.gd-pack-count {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, .88);
    color: var(--gd-ink);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: var(--gd-radius);
}

.gd-pack-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 18px 20px 20px;
}
.gd-pack-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gd-ink);
    margin: 0 0 12px;
    line-height: 1.4;
}

.gd-pack-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}
.gd-pack-list li {
    position: relative;
    padding-left: 14px;
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--gd-muted);
}
.gd-pack-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .72em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gd-green);
}
.gd-pack-list .gd-pack-more {
    padding-left: 14px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: var(--gd-gray);
}
.gd-pack-list .gd-pack-more::before { display: none; }

.gd-pack-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
}
.gd-pack-price {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--gd-ink);
}
.gd-pack-foot .gd-view-link { margin-left: auto; }

/* --------------------------------------------------------------------------
   14. ТҮНШҮҮД
   Логонууд харилцан адилгүй харьцаатай (1:1-ээс 4.3:1) бөгөөд олонх нь
   файлдаа хоосон захтай. Ижил хайрцагт contain-аар багтаах нь ХАЙРЦГИЙГ
   жигдэлдэг ч ТЭМДГИЙГ жигдэлдэггүй — дөрвөлжин лого өчүүхэн, өргөн лого
   хэт урт харагддаг байв. Одоо App\Services\PartnerLogo нь захыг нь тайрч,
   агуулгын ТАЛБАЙГ тэнцүүлж, лого бүрийн бодит хэмжээг тооцож өгдөг.
   Тиймээс энд хатуу хэмжээ тавихаа больж, зөвхөн хайрцгийг нь голлуулна.
   -------------------------------------------------------------------------- */
.gd-partners {
    --gd-partner-gap: 10px;
    --gd-partner-cols: 2;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px var(--gd-partner-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Багана бүрийн өргөнөөс ЗАЙГ нь хасч тооцно. Өмнө нь 16.666% гэж шууд
   бичсэн тул 6 лого + 5 зай нь мөрөнд багтахгүй болж, ердөө 5 лого үлдээд
   хоёр талдаа хоосон зай гаргадаг байв — улмаас хэсэг нь сайтын өргөнөөс
   нарийн харагддаг байсан. `flex-shrink: 1` нь пикселийн бутархайгаас болж
   мөр таслагдахаас хамгаална. */
.gd-partners li {
    flex: 0 1 calc(
        (100% - (var(--gd-partner-cols) - 1) * var(--gd-partner-gap))
        / var(--gd-partner-cols)
    );
}
@media (min-width: 576px) { .gd-partners { --gd-partner-cols: 3; } }
@media (min-width: 768px) { .gd-partners { --gd-partner-cols: 4; } }
@media (min-width: 992px) { .gd-partners { --gd-partner-cols: 6; } }

.gd-partner {
    display: flex;
    align-items: center;
    justify-content: center;
    /* border-box тул доторх зай нь 78 - 16 = 62px. PartnerLogo-ийн хамгийн
       өндөр лого 58px учир max-height нь тэднийг шахахгүй — эс тэгвээс
       талбайг тэнцүүлсэн тооцоо эвдэрнэ. */
    height: 78px;
    padding: 8px 14px;
    filter: grayscale(1);
    opacity: .55;
    transition: filter var(--gd-t), opacity var(--gd-t);
}
.gd-partner:hover { filter: grayscale(0); opacity: 1; }
/* Өргөн, өндрийг нь сервер тооцоод <img> дээр бичиж өгдөг тул энд дарж
   бичихгүй. Нарийн дэлгэц дээр л багасгана. */
.gd-partner img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   15. ХУУДСЫН ТОЛГОЙ (breadcrumb band)
   -------------------------------------------------------------------------- */
.page-header-area {
    background-color: var(--gd-sand) !important;
    border-bottom: 1px solid var(--gd-line);
}
.page-header-title {
    font-family: var(--gd-sans);
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gd-ink);
    margin: 0;
}
.page-header-area .breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 14px;
}
.page-header-area .breadcrumb-item,
.page-header-area .breadcrumb-item a {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gd-muted) !important;
}
.page-header-area .breadcrumb-item a:hover { color: var(--gd-green) !important; }
.page-header-area .breadcrumb-item.active { color: var(--gd-ink) !important; }

/* --------------------------------------------------------------------------
   16. ФОРМ
   -------------------------------------------------------------------------- */
.form-control,
.form-select,
.nice-select {
    border: 1px solid var(--gd-line-2) !important;
    border-radius: var(--gd-radius) !important;
    background: var(--gd-white);
    font-family: var(--gd-sans);
    font-size: 14px;
    color: var(--gd-ink);
    padding: 13px 16px;
    box-shadow: none !important;
    transition: border-color var(--gd-t);
}
.form-control:focus,
.form-select:focus { border-color: var(--gd-green) !important; }
.form-control::placeholder { color: var(--gd-gray); }
label, .form-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gd-ink);
}
.form-check-input:checked { background-color: var(--gd-green); border-color: var(--gd-green); }

.alert { border-radius: var(--gd-radius); border: 0; font-size: 14px; }
.alert-success { background: var(--gd-sand); color: var(--gd-green-deep); }
.alert-danger { background: #fdf0f4; color: var(--gd-sale); }

/* --------------------------------------------------------------------------
   17. САГС / ТӨЛБӨР
   -------------------------------------------------------------------------- */
.table { color: var(--gd-ink); }
.table th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gd-ink);
    border-bottom: 1px solid var(--gd-line-2);
}
.table td { border-color: var(--gd-line); font-size: 14px; }

.aside-cart-wrapper { background: var(--gd-white); }
.aside-cart-wrapper .btn-aside-cart-close,
.off-canvas-wrapper .btn-menu-close {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gd-ink);
    background: var(--gd-sand);
    border: 0;
    border-bottom: 1px solid var(--gd-line);
}
.aside-product-list-item .product-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--gd-ink);
}
.aside-product-list-item .product-price { font-size: 12px; color: var(--gd-muted); }
.cart-total {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gd-ink);
    border-top: 1px solid var(--gd-line);
    padding-top: 18px;
}
.btn-total { width: 100%; margin-bottom: 10px; }
.btn-total + .btn-total {
    background: transparent !important;
    color: var(--gd-ink) !important;
    border: 1px solid var(--gd-ink) !important;
}
.btn-total + .btn-total:hover { background: var(--gd-ink) !important; color: #fff !important; }

/* Гар утасны хажуугийн цэс */
.offcanvas-menu-nav ul li a {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gd-ink);
    padding: 15px 0;
    border-bottom: 1px solid var(--gd-line);
    display: block;
}
.offcanvas-menu-nav ul li a:hover { color: var(--gd-green); }

/* --------------------------------------------------------------------------
   18. БҮТЭЭГДЭХҮҮНИЙ ДЭЛГЭРЭНГҮЙ
   -------------------------------------------------------------------------- */
.product-details-title {
    font-family: var(--gd-sans);
    font-size: clamp(22px, 2.8vw, 34px);
    font-weight: 600;
    letter-spacing: .4px;
    color: var(--gd-ink);
    text-transform: none;
}
.price-box .price,
.product-details-content .price {
    font-size: 24px;
    font-weight: 700;
    color: var(--gd-ink);
}
.product-details-thumb,
.product-gallery-main {
    background: var(--gd-off);
    border-radius: var(--gd-radius);
    border: 0;
    overflow: hidden;
}
.trust-badges {
    background: var(--gd-sand);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
}
.reviews-section, .related-section { border-top: 1px solid var(--gd-line); }

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
.footer-area {
    background: var(--gd-ink) !important;
    color: rgba(255, 248, 241, .72);
    margin-top: 0;
}
.footer-main { padding: 72px 0 56px; }
.footer-area .widget-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gd-cream);
    margin-bottom: 22px;
}
.footer-area .widget-about .desc {
    color: rgba(255, 248, 241, .62);
    font-size: 14px;
    line-height: 1.8;
    max-width: 320px;
}
.footer-area .widget-logo img { height: 46px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.footer-area .widget-nav li { margin-bottom: 11px; }
.footer-area .widget-nav li a {
    color: rgba(255, 248, 241, .72);
    font-size: 13px;
    letter-spacing: .4px;
}
.footer-area .widget-nav li a:hover { color: #fff; }

.gd-footer-contact li {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 13px;
    color: rgba(255, 248, 241, .72);
}
.gd-footer-contact a { color: rgba(255, 248, 241, .72); }
.gd-footer-contact a:hover { color: #fff; }

.footer-area .widget-social { display: flex; gap: 10px; }
.footer-area .widget-social a {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 248, 241, .28);
    border-radius: var(--gd-radius-pill);
    color: var(--gd-cream);
    transition: background var(--gd-t), border-color var(--gd-t), color var(--gd-t);
}
.footer-area .widget-social a:hover { background: var(--gd-green); border-color: var(--gd-green); color: #fff; }

.footer-bottom { border-top: 1px solid rgba(255, 248, 241, .14); padding: 22px 0; }
.footer-bottom .copyright {
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 248, 241, .55);
    margin: 0;
}
.footer-bottom-content { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }

/* --------------------------------------------------------------------------
   20. БУСАД
   -------------------------------------------------------------------------- */
.scroll-to-top {
    background: var(--gd-ink);
    color: #fff;
    border-radius: var(--gd-radius-pill);
    width: 44px; height: 44px;
    line-height: 44px;
}
.scroll-to-top:hover { background: var(--gd-green); }

.pagination .page-link {
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius) !important;
    color: var(--gd-ink);
    font-size: 13px;
    font-weight: 600;
    margin: 0 3px;
}
.pagination .page-item.active .page-link,
.pagination .page-link:hover {
    background: var(--gd-ink);
    border-color: var(--gd-ink);
    color: #fff;
}

.fade-up { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--gd-ease), transform .7s var(--gd-ease); }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   21. БҮТЭЭГДЭХҮҮНИЙ ЖАГСААЛТ (collection page)
   ========================================================================== */

.gd-collection-desc {
    max-width: 620px;
    margin: 14px 0 0;
    font-size: 14px;
    color: var(--gd-muted);
}

/* --- Ангиллын чипүүд ---------------------------------------------------- */
#gd-list { scroll-margin-top: calc(var(--gd-header-h) + 8px); }

.gd-collection-nav {
    border-bottom: 1px solid var(--gd-line);
    background: var(--gd-white);
}
.gd-nav-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
}
.gd-nav-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}
.gd-chip-row {
    display: flex;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
@media (max-width: 991px) {
    .gd-nav-row { flex-wrap: wrap; gap: 10px; }
    .gd-chip-row { flex: 1 1 100%; }
    .gd-nav-tools { flex: 1 1 100%; justify-content: space-between; }
}
.gd-chip-row::-webkit-scrollbar { display: none; }
.gd-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    padding: 9px 16px;
    border: 1px solid var(--gd-line-2);
    border-radius: var(--gd-radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gd-ink);
    background: var(--gd-white);
    transition: background var(--gd-t), border-color var(--gd-t), color var(--gd-t);
}
.gd-chip:hover { border-color: var(--gd-green); color: var(--gd-green); }
.gd-chip.is-active {
    background: var(--gd-ink);
    border-color: var(--gd-ink);
    color: #fff;
}
.gd-chip-count { font-size: 10px; opacity: .55; }

/* --- Хэрэгслийн мөр ------------------------------------------------------ */
.gd-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
/* Хайрцаггүй, зөвхөн текст + жижиг сум — минимал хэлбэр */
.gd-sort select {
    border: 0;
    border-radius: 0;
    background-color: transparent;
    padding: 4px 15px 4px 0;
    font-family: var(--gd-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.3px;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--gd-ink);
    cursor: pointer;
    -webkit-appearance: none;   /* хуучин Safari-д native хайрцаг үлдэхээс сэргийлнэ */
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23272E0F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 9px 9px;
    transition: color var(--gd-t);
}
.gd-sort select:hover { color: var(--gd-green); }
.gd-sort select:focus { outline: none; }
.gd-sort select:focus-visible {
    outline: 1px solid var(--gd-green);
    outline-offset: 4px;
}

.gd-filter-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    position: relative;
    background: transparent;
    border: 1px solid var(--gd-line-2);
    border-radius: var(--gd-radius);
    padding: 7px 13px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--gd-ink);
    transition: border-color var(--gd-t), color var(--gd-t);
}
.gd-filter-toggle:hover { border-color: var(--gd-ink); color: var(--gd-green); }
.gd-filter-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gd-green);
}
@media (max-width: 991px) {
    .gd-filter-toggle { display: inline-flex; }
}

/* --- Идэвхтэй шүүлтүүр --------------------------------------------------- */
.gd-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 26px;
}
.gd-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    background: var(--gd-sand);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--gd-ink);
}
a.gd-active-chip:hover { border-color: var(--gd-green); color: var(--gd-green); }
.gd-active-chip span { font-size: 14px; line-height: 1; opacity: .6; }
.gd-clear-all {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--gd-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.gd-clear-all:hover { color: var(--gd-green); }

/* --- Шүүлтүүрийн форм ---------------------------------------------------- */
.gd-filters { padding-right: 22px; }
@media (max-width: 1199px) { .gd-filters { padding-right: 16px; } }
.gd-facet {
    padding: 14px 0;
    border-bottom: 1px solid var(--gd-line);
}
.gd-facet:first-child { padding-top: 0; }
/* Сүүлийн бүлгийн доод зураас нь "Хэрэглэх" товчтой давхарлахгүй байх */
.gd-facet:last-of-type { border-bottom: 0; padding-bottom: 14px; }
.gd-facet-title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gd-ink);
    margin: 0 0 10px;
}
.gd-facet-list { list-style: none; margin: 0; padding: 0; }
.gd-facet-list li + li { margin-top: 4px; }

.gd-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .2px;
    text-transform: none;
    color: var(--gd-muted);
    padding: 3px 0;
    margin: 0;
}
.gd-check:hover { color: var(--gd-ink); }
.gd-check input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 13px; height: 13px;
    flex: 0 0 13px;
    border: 1px solid var(--gd-line-2);
    border-radius: var(--gd-radius);
    background: var(--gd-white);
    transition: background var(--gd-t), border-color var(--gd-t);
}
.gd-check input[type="checkbox"]:checked {
    background: var(--gd-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;
    border-color: var(--gd-green);
}
.gd-check em { margin-left: auto; font-style: normal; font-size: 10px; color: var(--gd-gray); }

/* Үнийн хэсэг — хайрцаггүй, зөвхөн доогуур зураас (эрэмбэлэхтэй ижил хэв) */
.gd-price-row { display: flex; align-items: center; gap: 10px; }
.gd-price-row input {
    width: 100%;
    min-width: 0;
    border: 0;
    border-bottom: 1px solid var(--gd-line-2);
    border-radius: 0;
    background-color: transparent;
    padding: 4px 0 5px;
    font-family: var(--gd-sans);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;   /* Bootstrap-ийн inherit (1.75) талбарыг өндөрсгөдөг */
    letter-spacing: .4px;
    color: var(--gd-ink);
    transition: border-color var(--gd-t);
}
.gd-price-row input:hover { border-bottom-color: var(--gd-ink); }
.gd-price-row input:focus {
    outline: none;
    border-bottom-color: var(--gd-green);
}
.gd-price-row input::placeholder {
    color: var(--gd-gray);
    font-weight: 400;
    letter-spacing: .2px;
}
/* number талбарын дээш/доош сумыг нуух — минимал хэлбэрт хэрэггүй */
.gd-price-row input::-webkit-outer-spin-button,
.gd-price-row input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.gd-price-row input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.gd-price-row span {
    color: var(--gd-gray);
    font-size: 11px;
    flex: 0 0 auto;
}

.gd-filter-drawer { width: min(88vw, 360px); background: var(--gd-white); }
.gd-filter-drawer .offcanvas-header { border-bottom: 1px solid var(--gd-line); }
.gd-filter-drawer .offcanvas-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gd-ink);
    margin: 0;
}
.gd-filter-drawer .gd-filters { padding-right: 0; }

/* --- Карт дээрх нэмэлтүүд ------------------------------------------------ */
.gd-rating {
    display: flex;
    align-items: center;
    gap: 1px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--gd-line-2);
    line-height: 1;
}
.gd-rating .on { color: #E0A32E; }
.gd-rating-count { margin-left: 6px; font-size: 11px; color: var(--gd-gray); }

.gd-price-old {
    font-size: 13px;
    font-weight: 500;
    color: var(--gd-gray);
    text-decoration: line-through;
}
.product-thumb .badge.gd-badge-sale { background: var(--gd-sale) !important; }

.gd-empty {
    padding: 70px 20px;
    text-align: center;
    background: var(--gd-off);
    border-radius: var(--gd-radius);
}
.gd-empty p { margin-bottom: 18px; color: var(--gd-muted); }

/* ==========================================================================
   22. style.css-ИЙН ДАРАЛТЫГ ЗАСАХ (cascade fixes)
   Загварын үндсэн style.css нь илүү өндөр specificity-тэй дүрмүүдээр манай
   загварыг чимээгүй дарж байв. Доор яг тэр түвшний selector-оор буцаав.
   ========================================================================== */

/* (1) ХАМГИЙН НОЦТОЙ: үндсэн загварт .product-item .product-action-bottom нь
   бүх дэлгэц дээр display:none (зөвхөн <576px-д flex) байсан тул картын
   "Сагсанд нэмэх" товч desktop дээр огт харагдахгүй байлаа. */
.product-item .product-action-bottom {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 7px;
    margin-top: auto;
    padding-top: 4px;
}

/* (2) Картын дотоод зай — үндсэн загвар 14px padding-top нэмдэг байсан */
.product-item .product-info { padding: 0; }

/* (3) Картын гарчиг — үндсэн загвар 21px / margin-bottom 12px болгодог байсан */
.product-item .product-info .title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .2px;
    margin: 0 0 8px;
    text-transform: none;
}

/* (4) Үнэ — үндсэн загвар 21px болгодог байсан */
.product-item .prices span {
    font-size: 15px;
    font-weight: 700;
    color: var(--gd-ink);
}
.product-item .prices .gd-price-old {
    font-size: 13px;
    font-weight: 500;
    color: var(--gd-gray);
}

/* (5) Header-ийн дүрсэн товч — үндсэн загвар 30×30 болгож,
   margin-left: 59px (desktop) / 28px / 8px нэмдэг байсан */
.header-action .header-action-btn {
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: var(--gd-radius-pill);
}
.header-action .gd-lang {
    width: auto;
    height: auto;
    padding: 6px 14px;
}

/* (7) Footer-ийн цэс — хуучин загварт энэ нь бүтэн өргөнтэй, 3 баганат
   жагсаалт байсан:  .widget-nav{display:flex;flex-wrap:wrap} + li{width:33.33%}
   Манай footer нь нарийн багана (col-lg-2) тул холбоосууд хажуу хажуугаараа
   урсаж, гарчигтайгаа нийлж, үг дундуур тасарч харагдаж байв.
   Жагсаалтыг эгнээ болгож, li-гийн бэхлэгдсэн өргөнийг цуцлав. */
.footer-main .widget-nav {
    display: block;
    flex-wrap: nowrap;
}
.footer-main .widget-nav li {
    width: auto;
    font-size: 13px;
    margin-bottom: 11px;
    color: rgba(255, 248, 241, .72);
}
.footer-main .widget-nav li a { transition: color var(--gd-t); }
.footer-main .widget-nav li a:hover { text-decoration: none; }

/* (7b) Хөлийн дээд булангийн 10px радиусыг цуцлав — доор нь бүтэн өргөний
   бараан цомог таарахад булангуудад цагаан зүсэлт үүсэж байв.
   Мөн доод мөрөнд хүрээ хоёр давхар, илүү padding орж байсныг арилгав. */
.footer-area { border-radius: 0; }
.footer-bottom-content {
    border-top: 0;
    padding: 0;
    text-align: left;
}

/* (8) Сошиал дүрс — icon хооронд 60px margin нэмэгддэг байсан */
.footer-main .widget-social a + a { margin-left: 0; }
.footer-main .widget-social a { font-size: 15px; }

/* (9) Хэсгийн гарчиг — үндсэн загвар line-height: 48px ба padding-bottom: 10px
   тогтоодог тул clamp() фонттой зохицдоггүй байсан */
.section-title .title {
    line-height: 1.25;
    padding-bottom: 0;
}

/* (10) Ангиллын тойргийн гарчиг — үндсэн загвар padding-top: 11px нэмдэг тул
   flex gap дээр давхарлаж зай ихсэж байсан */
.product-category-item .title { padding-top: 0; }

/* ==========================================================================
   23. ЖИГД СҮЛЖЭЭ (.gd-grid)
   style.css дэх `.row .col, .row [class*=col-] { margin-top: 0 }` дүрэм нь
   Bootstrap-ийн босоо gutter-ийг (margin-top: var(--bs-gutter-y)) устгадаг тул
   баганууд хооронд зайтай, мөрүүд хооронд огт зайгүй болдог байв.
   .gd-grid нь хэвтээ ба босоо зайг нэг хувьсагчаас авч жигд болгоно.
   ========================================================================== */
.row.gd-grid {
    --gd-gutter: 20px;
    --bs-gutter-x: var(--gd-gutter);
    --bs-gutter-y: var(--gd-gutter);
    margin-top: calc(-1 * var(--gd-gutter));
}
.row.gd-grid > .col,
.row.gd-grid > [class*="col-"] {
    margin-top: var(--gd-gutter);
}
@media (min-width: 768px)  { .row.gd-grid { --gd-gutter: 26px; } }
@media (min-width: 1200px) { .row.gd-grid { --gd-gutter: 32px; } }

/* Хажуугийн шүүлтүүрийн "Шүүх" товч — нимгэн, минимал */
.gd-filters .btn {
    padding: 9px 14px;
    font-size: 10px;
    letter-spacing: 1.3px;
    margin-top: 4px !important;
}

/* Багцын карт — бүтээгдэхүүний картын адил hover дээр gallery-ийн зураг гарна.
   Icon нь тунгалаг дэвсгэртэй жижиг тул зураг нь бүтэн талбайг дүүргэнэ. */
.gd-pack-hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .45s var(--gd-ease);
}
.gd-pack:hover .gd-pack-hover { opacity: 1; }
/* Hover зурагтай үед icon арилж, томролт хийхгүй */
.gd-pack-media.has-hover .gd-pack-icon { transition: opacity .35s var(--gd-ease); }
.gd-pack:hover .gd-pack-media.has-hover .gd-pack-icon { opacity: 0; transform: none; }

/* ==========================================================================
   24. ҮЙЛДВЭРИЙН ХУУДАС
   ========================================================================== */
.gd-fact-cover {
    width: 100%;
    height: clamp(15rem, 34vw, 30rem);
    background: var(--gd-sand);
    overflow: hidden;
}
.gd-fact-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gd-fact-title {
    font-family: var(--gd-serif);
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--gd-ink);
    margin: 0 0 18px;
}
.gd-fact-text { font-size: 14px; line-height: 1.85; color: var(--gd-muted); }
.gd-fact-text p { margin-bottom: 14px; }
.gd-fact-text p:last-child { margin-bottom: 0; }

/* Хүчин чадлын үзүүлэлтүүд */
.gd-fact-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--gd-line);
    border: 1px solid var(--gd-line);
}
.gd-fact-stats li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 20px;
    background: var(--gd-sand-soft);
}
.gd-fact-stats strong {
    font-family: var(--gd-serif);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 400;
    line-height: 1.1;
    color: var(--gd-ink);
}
.gd-fact-stats span {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gd-gray);
}

/* Зургийн цомог */
.gd-fact-shot { margin: 0; }
.gd-fact-shot img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--gd-radius);
    background: var(--gd-off);
    display: block;
}
.gd-fact-shot figcaption {
    margin-top: 10px;
    font-size: 11px;
    letter-spacing: .3px;
    color: var(--gd-muted);
}

/* Танилцуулга видео */
.gd-video {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background: var(--gd-ink);
    border-radius: var(--gd-radius);
    overflow: hidden;
}
.gd-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Стандартчлалын үзүүлэлт ------------------------------------------- */
.gd-std {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: 24px 22px;
    background: var(--gd-sand-soft);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
}
.gd-std-media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    margin-bottom: 16px;
}
.gd-std-media img { max-height: 100%; width: auto; object-fit: contain; }
.gd-std-code {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gd-green);
    border: 1px solid currentColor;
    border-radius: var(--gd-radius);
    padding: 3px 8px;
    margin-bottom: 10px;
}
.gd-std-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .2px;
    color: var(--gd-ink);
    margin: 0;
}
.gd-std-desc {
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--gd-muted);
    margin: 10px 0 0;
}

/* --- Цомгийн зураг дээрх томруулах тэмдэг ------------------------------- */
.gd-fact-shot a {
    position: relative;
    display: block;
    border-radius: var(--gd-radius);
    overflow: hidden;
}
.gd-fact-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(39, 46, 15, .35);
    opacity: 0;
    transition: opacity var(--gd-t);
}
.gd-fact-shot a:hover .gd-fact-zoom,
.gd-fact-shot a:focus-visible .gd-fact-zoom { opacity: 1; }


/* ==========================================================================
   25. УРГАМЛЫН PATTERN ДЭВСГЭР
   Зургууд: public/assets/images/patterns/{juniper,thyme}.png
   Файл байхгүй бол background-image чимээгүй унтарна — юу ч эвдрэхгүй.
   ========================================================================== */
:root {
    --gd-pattern-size: 340px;
    --gd-pattern-opacity-dark: .08;   /* хар дэвсгэр дээр */
    --gd-pattern-opacity-light: .06;  /* цайвар дэвсгэр дээр */
}

/* Тунг зөвхөн зурган дээр тавихын тулд тусдаа давхарга ашиглав —
   ингэснээр текстийн тод байдал хэвээр үлдэнэ. */
.gd-story,
.page-header-area { position: relative; }

.gd-story::before,
.page-header-area::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-repeat: repeat;
    background-size: var(--gd-pattern-size) auto;
    pointer-events: none;
}

/* Арц — брэндийн түүхийн хар зурвас */
.gd-story::before {
    background-image: url('/assets/images/patterns/juniper.png');
    opacity: var(--gd-pattern-opacity-dark);
}
.gd-story-inner { position: relative; z-index: 1; }

/* Ганга — дотоод хуудсуудын толгойн шаргал зурвас */
.page-header-area::before {
    background-image: url('/assets/images/patterns/thyme.png');
    opacity: var(--gd-pattern-opacity-light);
}
.page-header-area > .container { position: relative; z-index: 1; }

@media (max-width: 767px) {
    :root { --gd-pattern-size: 220px; }
}

/* Ангиллын чип мөрөнд өөр төрлийн зүйл (Багц) тусгаарлах */
.gd-chip-divider {
    flex: 0 0 auto;
    width: 1px;
    align-self: stretch;
    margin: 4px 4px;
    background: var(--gd-line-2);
}
.gd-chip-alt { border-color: var(--gd-green); color: var(--gd-green); }
.gd-chip-alt:hover { background: var(--gd-sand); }
.gd-chip-alt.is-active {
    background: var(--gd-green);
    border-color: var(--gd-green);
    color: #fff;
}

/* Бүтээгдэхүүний жагсаалтын доод талын санал болгох багцууд */
.gd-suggest {
    margin-top: 72px;
    padding-top: 56px;
    border-top: 1px solid var(--gd-line);
}
@media (max-width: 767px) {
    .gd-suggest { margin-top: 48px; padding-top: 40px; }
}

/* ==========================================================================
   26. БИДНИЙ ТУХАЙ ХУУДАС
   ========================================================================== */
/* Зураг нь ӨӨРИЙН харьцаагаараа харагдана. Өмнө нь 4:5 гэж тогтоосон тул
   хэвтээ зураг (англи хувилбарын 700×467) хоёр талаасаа хайчлагдаад, албаар
   өндөрсөж, бичвэрээсээ хэт урт болдог байв. Дээд хязгаар нь хэт өндөр
   босоо зураг хуудсыг эзлэхээс хамгаална. */
.gd-about-media {
    border-radius: var(--gd-radius);
    overflow: hidden;
    background: var(--gd-off);
}
.gd-about-media img {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
    display: block;
}
@media (max-width: 991px) {
    .gd-about-media { margin-bottom: 8px; }
    .gd-about-media img { max-height: 380px; }
}

/* Алсын хараа / Зорилго / Зорилт */
.gd-value {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: 28px 26px 30px;
    background: var(--gd-sand-soft);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
}
.gd-value-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--gd-white);
    border: 1px solid var(--gd-line);
    color: var(--gd-green);
    margin-bottom: 18px;
}
.gd-value-icon svg { width: 20px; height: 20px; }
.gd-value-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gd-ink);
    margin: 0 0 12px;
}
.gd-value-text {
    font-size: 13px;
    line-height: 1.8;
    color: var(--gd-muted);
}
.gd-value-text p { margin: 0 0 10px; }
.gd-value-text p:last-child { margin-bottom: 0; }

/* Гурван баганатай тоон үзүүлэлт */
.gd-fact-stats.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) {
    .gd-fact-stats.is-three { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* ==========================================================================
   27. САГСНЫ ХУУДАС
   Хуучин загварт .shopping-cart-form table нь #1f1f1f хар дэвсгэр,
   #cccccc саарал текст, breadcrumb-style1 нь #555555 байсныг бүрэн орлуулав.
   ========================================================================== */
.gd-cart-head {
    display: none;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--gd-line);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gd-gray);
}
@media (min-width: 768px) {
    .gd-cart-head {
        display: grid;
        grid-template-columns: 92px 1fr 110px 120px 34px;
        gap: 18px;
        align-items: center;
    }
    .gd-cart-head span:first-child { grid-column: 1 / span 2; }
    .gd-cart-head span:nth-child(2) { text-align: center; }
    .gd-cart-head span:nth-child(3) { text-align: right; }
}

.gd-cart-row {
    display: grid;
    grid-template-columns: 78px 1fr 34px;
    grid-template-areas:
        "thumb info remove"
        "thumb qty  total";
    gap: 10px 14px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--gd-line);
}
@media (min-width: 768px) {
    .gd-cart-row {
        grid-template-columns: 92px 1fr 110px 120px 34px;
        grid-template-areas: "thumb info qty total remove";
        gap: 18px;
        padding: 20px 0;
    }
}

.gd-cart-thumb {
    grid-area: thumb;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--gd-radius);
    overflow: hidden;
    background: var(--gd-off);
}
.gd-cart-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gd-cart-info { grid-area: info; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gd-cart-name {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--gd-ink);
}
.gd-cart-name:hover { color: var(--gd-green); }
.gd-cart-price { font-size: 12px; color: var(--gd-muted); }
.gd-cart-meta {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gd-green);
}
.gd-cart-meta--set { color: var(--gd-muted); }
.gd-cart-meta--out { color: var(--gd-sale); }

.gd-cart-qty { grid-area: qty; }
.gd-cart-qty input {
    width: 100%;
    max-width: 90px;
    border: 1px solid var(--gd-line-2);
    border-radius: var(--gd-radius);
    background: var(--gd-white);
    padding: 8px 10px;
    font-family: var(--gd-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--gd-ink);
    text-align: center;
}
.gd-cart-qty input:focus { outline: none; border-color: var(--gd-green); }
@media (min-width: 768px) { .gd-cart-qty input { max-width: 100%; } }

.gd-cart-total {
    grid-area: total;
    font-size: 14px;
    font-weight: 700;
    color: var(--gd-ink);
    text-align: right;
}

.gd-cart-remove {
    grid-area: remove;
    justify-self: end;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-pill);
    background: transparent;
    color: var(--gd-gray);
    font-size: 17px;
    line-height: 1;
    padding: 0;
    transition: border-color var(--gd-t), color var(--gd-t);
}
.gd-cart-remove:hover { border-color: var(--gd-sale); color: var(--gd-sale); }

.gd-cart-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 24px;
}
.gd-cart-clear {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gd-gray);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.gd-cart-clear:hover { color: var(--gd-sale); }

/* Захиалгын дүнгийн самбар */
.gd-summary {
    background: var(--gd-sand-soft);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
    padding: 26px 24px 28px;
}
@media (min-width: 992px) { .gd-summary { position: sticky; top: calc(var(--gd-header-h) + 20px); } }
.gd-summary-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gd-ink);
    margin: 0 0 20px;
}
.gd-summary-list {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
    margin: 0 0 18px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--gd-line);
}
.gd-summary-list dt { font-size: 12.5px; font-weight: 400; color: var(--gd-muted); }
.gd-summary-list dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--gd-ink); text-align: right; }
.gd-summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}
.gd-summary-total span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gd-ink);
}
.gd-summary-total strong { font-size: 19px; font-weight: 700; color: var(--gd-ink); }

/* Хуучин загварын харанхуй хүснэгтийн дүрмүүд эндээс хойш хэрэглэгдэхгүй */
.shopping-cart-form { display: contents; }


/* ==========================================================================
   28. САЛБАР ДЭЛГҮҮРИЙН ХУУДАС
   Бусад дотоод хуудсуудтай (Бидний тухай, Үйлдвэр) ижил картын хэл:
   шаргал гадаргуу, нимгэн хүрээ, serif гарчиг, hover дээр зөөлөн томролт.
   ========================================================================== */
.gd-shop {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--gd-sand-soft);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
    overflow: hidden;
    transition: border-color var(--gd-t), box-shadow var(--gd-t);
}
.gd-shop:hover {
    border-color: var(--gd-line-2);
    box-shadow: var(--shadow-subtle);
}

.gd-shop-media {
    position: relative;
    /* Дэлгүүрийн зургууд бүгд 16:9 (597×335). Хайрцгийг яг тэр харьцаагаар
       авбал зураг БҮТНЭЭРЭЭ, хоёр талдаа хоосон зурваггүй багтана — 16/7
       байхад өндрийн ~22% тайрагдаж байв. Анхны 16/10-аас арай намхан хэвээр. */
    aspect-ratio: 16 / 9;
    background: var(--gd-off);
    overflow: hidden;
}
.gd-shop-media img {
    width: 100%;
    height: 100%;
    /* `contain` — 16:9-ээс өөр харьцаатай зураг оруулсан ч тайрахгүй, хоёр
       талдаа дэвсгэр үлдээж бүтнээр нь харуулна. Одоогийн зургууд яг 16:9
       тул хоосон зурвас гарахгүй. */
    object-fit: contain;
    display: block;
    transition: transform .6s var(--gd-ease);
}
.gd-shop:hover .gd-shop-media img { transform: scale(1.04); }


.gd-shop-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 24px 26px;
}
.gd-shop-name {
    font-family: var(--gd-serif);
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--gd-ink);
    margin: 0 0 12px;
}
.gd-shop-text {
    font-size: 13px;
    line-height: 1.85;
    color: var(--gd-muted);
}
.gd-shop-text p { margin: 0 0 10px; }
.gd-shop-text p:last-child { margin-bottom: 0; }

.gd-shop-foot { margin-top: auto; padding-top: 20px; }
.gd-shop-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gd-green);
    transition: color var(--gd-t);
}
.gd-shop-link:hover,
.gd-shop-link:focus-visible { color: var(--gd-green-deep); }
.gd-shop-link svg { width: 13px; height: 13px; }

@media (max-width: 575px) {
    .gd-shop-body { padding: 20px 18px 22px; }
}


/* ==========================================================================
   29. ҮЙЛДВЭРИЙН ТАНИЛЦУУЛГА ВИДЕО — постер + тоглуулах товч
   Embed нь даралтын дараа ачаалагддаг тул хуудас хурдан нээгдэнэ.
   ========================================================================== */
.gd-video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s var(--gd-ease), opacity var(--gd-t);
}
.gd-video::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(39, 46, 15, .10) 0%, rgba(39, 46, 15, .45) 100%);
    pointer-events: none;
    transition: opacity var(--gd-t);
}
.gd-video.is-playing::after { display: none; }

.gd-video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    z-index: 2;
}
.gd-video-play-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--gd-white);
    transition: transform var(--gd-t), background-color var(--gd-t);
}
.gd-video-play svg {
    width: 24px;
    height: 24px;
    margin-left: 4px;
    fill: var(--gd-green);
    transition: fill var(--gd-t);
}
.gd-video-play:hover .gd-video-play-ring,
.gd-video-play:focus-visible .gd-video-play-ring {
    transform: scale(1.07);
    background: var(--gd-green);
}
.gd-video-play:hover svg,
.gd-video-play:focus-visible svg { fill: var(--gd-white); }
.gd-video-play:hover ~ .gd-video-poster { transform: scale(1.03); }

@media (max-width: 575px) {
    .gd-video-play-ring { width: 58px; height: 58px; }
    .gd-video-play svg { width: 20px; height: 20px; }
}

/* Хэсгийн гарчгийн доорх тайлбар мөр */
.gd-section-lead {
    max-width: 620px;
    margin: 14px auto 0;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--gd-muted);
}
.section-title:not(.text-center) .gd-section-lead { margin-left: 0; }


/* ==========================================================================
   30. ХОЛБОО БАРИХ ХУУДАС (форм байхгүй — шууд холбогдох сувгууд)
   ========================================================================== */
.gd-ct-block + .gd-ct-block { margin-top: 34px; }
.gd-ct-block-title {
    font-family: var(--gd-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gd-ink);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gd-line);
}

/* --- Утас, имэйл, хаяг --------------------------------------------------- */
.gd-ct-list { list-style: none; margin: 0; padding: 0; }
.gd-ct-list li {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid var(--gd-line);
}
.gd-ct-list li:last-child { border-bottom: 0; }
.gd-ct-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--gd-sand);
    color: var(--gd-green);
}
.gd-ct-ico svg { width: 18px; height: 18px; }
.gd-ct-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gd-gray);
    margin-bottom: 6px;
}
.gd-ct-list a,
.gd-ct-list p {
    display: block;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--gd-ink);
    margin: 0;
    word-break: break-word;
}
.gd-ct-list a:hover { color: var(--gd-green); }
.gd-ct-list a + a { margin-top: 3px; }

/* --- WhatsApp / WeChat --------------------------------------------------- */
.gd-ct-chats { display: grid; gap: 12px; }
.gd-ct-chat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--gd-sand-soft);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
    transition: border-color var(--gd-t), background-color var(--gd-t);
}
a.gd-ct-chat:hover { border-color: var(--gd-line-2); background: var(--gd-white); }
.gd-ct-chat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    color: var(--gd-white);
}
.gd-ct-chat-icon svg { width: 22px; height: 22px; fill: currentColor; }
.is-whatsapp .gd-ct-chat-icon { background: #25D366; }
.is-wechat   .gd-ct-chat-icon { background: #07C160; }
.gd-ct-chat-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gd-ct-chat-body strong {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gd-ink);
}
.gd-ct-chat-body span {
    font-size: 14px;
    color: var(--gd-muted);
    overflow-wrap: anywhere;
}
.gd-ct-copy {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 7px 12px;
    background: transparent;
    border: 1px solid var(--gd-line-2);
    border-radius: var(--gd-radius);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--gd-muted);
    cursor: pointer;
    transition: color var(--gd-t), border-color var(--gd-t);
}
.gd-ct-copy:hover { color: var(--gd-green); border-color: var(--gd-green); }
.gd-ct-copy.is-done { color: var(--gd-green); border-color: var(--gd-green); }

.gd-ct-qr { margin: 16px 0 0; width: 132px; }
.gd-ct-qr img {
    width: 100%;
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
    background: var(--gd-white);
    display: block;
}
.gd-ct-qr figcaption {
    margin-top: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gd-gray);
    text-align: center;
}

/* --- Сошиал -------------------------------------------------------------- */
.gd-ct-socials { display: flex; flex-wrap: wrap; gap: 10px; }
.gd-ct-social {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px 11px 12px;
    background: var(--gd-white);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    color: var(--gd-ink);
    transition: border-color var(--gd-t), color var(--gd-t);
}
.gd-ct-social:hover { border-color: var(--gd-ink); }
.gd-ct-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--gd-ink);
}
.gd-ct-social-icon svg { width: 18px; height: 18px; fill: currentColor; }
.gd-ct-social.is-instagram .gd-ct-social-icon svg { fill: none; }
.gd-ct-social:hover .gd-ct-social-icon { color: var(--gd-green); }

/* --- Зураг ба газрын зураг ---------------------------------------------- */
.gd-ct-media {
    height: 100%;
    min-height: 320px;
    border-radius: var(--gd-radius);
    overflow: hidden;
    background: var(--gd-off);
}
.gd-ct-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 991px) { .gd-ct-media { min-height: 0; aspect-ratio: 4 / 3; } }

.gd-ct-map { line-height: 0; border-top: 1px solid var(--gd-line); }
.gd-ct-map iframe {
    width: 100%;
    height: clamp(16rem, 34vw, 26rem);
    border: 0;
    display: block;
    filter: grayscale(.25);
}


/* ==========================================================================
   31. YOUTUBE — СҮҮЛИЙН БИЧЛЭГҮҮД
   Загварын эх сурвалж: new.chinggismuseum.com «YouTube суваг» хэсэг —
   толгойд суваг + улаан товч, доор нь нэг мөрөнд урт видео + shorts.
   Ялгаа: embed нь даралтын дараа ачаалагдана (10 хуудсанд 4 iframe шууд
   ачаалахаас сэргийлэв).
   ========================================================================== */
.gd-yt {
    background: var(--gd-sand-soft);
    border-top: 1px solid var(--gd-line);
    padding: 34px 0 60px;
}

/* --- Толгой ------------------------------------------------------------- */
.gd-yt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.gd-yt-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gd-yt-mark { display: inline-flex; flex: 0 0 auto; color: #FF0000; }
.gd-yt-mark svg { width: 30px; height: 30px; fill: currentColor; }
.gd-yt-brand-text { display: flex; flex-direction: column; min-width: 0; }
.gd-yt-brand-text strong {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--gd-ink);
}
.gd-yt-brand-text span {
    font-size: 11.5px;
    letter-spacing: .3px;
    color: var(--gd-gray);
}

.gd-yt-subscribe {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 9px 18px;
    border-radius: var(--gd-radius-pill);
    background: #CC241C;
    color: var(--gd-white);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .4px;
    transition: background-color var(--gd-t), color var(--gd-t);
}
.gd-yt-subscribe svg { width: 17px; height: 17px; fill: currentColor; }
.gd-yt-subscribe:hover,
.gd-yt-subscribe:focus-visible { background: var(--gd-ink); color: var(--gd-white); }

/* --- Нэг мөрөнд: урт видео + shorts ------------------------------------- */
.gd-yt-row {
    display: flex;
    gap: 8px;
    height: 248px;
}
.gd-yt-embed {
    position: relative;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--gd-off);
    cursor: pointer;
    /* .gd-video-ийн (24-р бүлэг) хэмжээсийг цуцална — энд өргөнийг flex, */
    /* өндрийг мөр өөрөө тогтооно.                                        */
    width: auto;
    max-width: none;
    margin: 0;
    aspect-ratio: auto;
}
.gd-yt-embed.is-video { flex: 3; }
.gd-yt-embed.is-short { flex: 1; }
.gd-yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* .gd-video-poster / .gd-video-play-г (29-р бүлэг) хуваалцана */
.gd-yt-embed .gd-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gd-yt-embed::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(39,46,15,.06) 0%, rgba(39,46,15,.52) 100%);
    pointer-events: none;
    transition: opacity var(--gd-t);
}
.gd-yt-embed.is-playing::after { display: none; }
.gd-yt-embed:hover .gd-video-poster { transform: scale(1.03); }
.gd-yt-embed .gd-video-play-ring { width: 54px; height: 54px; }
.gd-yt-embed .gd-video-play svg { width: 18px; height: 18px; margin-left: 3px; }
.gd-yt-embed.is-short .gd-video-play-ring { width: 42px; height: 42px; }
.gd-yt-embed.is-short .gd-video-play svg { width: 14px; height: 14px; margin-left: 2px; }

/* Урт видеоны гарчиг — зургийн доод талд */
.gd-yt-cap {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 3;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--gd-white);
    text-shadow: 0 1px 6px rgba(0,0,0,.45);
    pointer-events: none;
}
.gd-yt-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    padding: 4px 8px;
    border-radius: var(--gd-radius);
    background: #CC241C;
    color: var(--gd-white);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

@media (max-width: 860px) {
    .gd-yt-row { height: 190px; }
    .gd-yt-cap { left: 12px; right: 12px; bottom: 10px; font-size: 12px; }
}
@media (max-width: 600px) {
    .gd-yt { padding: 26px 0 44px; }
    .gd-yt-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .gd-yt-row { height: auto; flex-wrap: wrap; }
    .gd-yt-embed.is-video { flex: 0 0 100%; aspect-ratio: 16 / 9; }
    .gd-yt-embed.is-short { flex: 0 0 calc(33.333% - 6px); aspect-ratio: 9 / 16; }
}


/* ==========================================================================
   32. ЗУРГИЙН ЦОМОГ — «Бидний тухай», «Үйлдвэр» хуудсын доод хэсэг
   Загварын эх сурвалж: new.chinggismuseum.com — бүтэн өргөн, зайгүй, квадрат
   хавтан, hover дээр томролт + томруулах тэмдэг. Үргэлж НЭГ МӨР байна:
   grid-auto-flow: column тул хэдэн ч зураг байсан нэг эгнээнд багтана
   (модель нь 8-аар хязгаарладаг). Томруулахад Fancybox ажиллана.
   ========================================================================== */
.gd-fg { background: var(--gd-ink); }
.gd-fg-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
}
.gd-fg-item { display: block; position: relative; min-width: 0; }
.gd-fg-media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--gd-off);
}
.gd-fg-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--gd-ease);
}
.gd-fg-item:hover img,
.gd-fg-item:focus-visible img { transform: scale(1.08); }

.gd-fg-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(39, 46, 15, .48);
    color: var(--gd-white);
    opacity: 0;
    transition: opacity var(--gd-t);
}
.gd-fg-overlay svg { width: 26px; height: 26px; }
.gd-fg-item:hover .gd-fg-overlay,
.gd-fg-item:focus-visible .gd-fg-overlay { opacity: 1; }

/* Тайлбар нь зөвхөн томруулсан үед (Fancybox) харагдана */
.gd-fg-cap { display: none; }

/* Таблет, гар утсан дээр хэвтээ свайп — нэг мөр хэвээр, хавтан нь жижгэрэхгүй */
@media (max-width: 767px) {
    .gd-fg { background: var(--gd-sand-soft); padding: 18px 0 22px; }
    .gd-fg-grid {
        display: flex;
        grid-auto-flow: row;
        gap: 8px;
        padding: 0 16px 6px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .gd-fg-grid::-webkit-scrollbar { display: none; }
    .gd-fg-item { flex: 0 0 46%; scroll-snap-align: center; }
    .gd-fg-media { border-radius: 10px; }
    .gd-fg-cap {
        display: block;
        margin-top: 8px;
        font-size: 11.5px;
        line-height: 1.5;
        color: var(--gd-muted);
    }
}
@media (max-width: 480px) { .gd-fg-item { flex: 0 0 72%; } }


/* ==========================================================================
   33. НЭВТРЭХ / БҮРТГҮҮЛЭХ — сошиал товчнууд
   ========================================================================== */
.gd-auth-sep {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0 18px;
    color: var(--gd-gray);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.gd-auth-sep::before,
.gd-auth-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gd-line);
}

.gd-auth-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 400px) { .gd-auth-social { grid-template-columns: 1fr; } }

.gd-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--gd-white);
    border: 1px solid var(--gd-line-2);
    border-radius: var(--gd-radius);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--gd-ink);
    transition: border-color var(--gd-t), background-color var(--gd-t), box-shadow var(--gd-t);
}
.gd-auth-btn:hover,
.gd-auth-btn:focus-visible {
    border-color: var(--gd-ink);
    box-shadow: var(--shadow-subtle);
    color: var(--gd-ink);
}
.gd-auth-btn svg { width: 19px; height: 19px; flex: 0 0 auto; }


/* ==========================================================================
   34. ТОЛГОЙН «ТАНЫ САГС» САМБАР
   Хуучин загвар нь бараан сэдэвтэй байсан тул энэ самбар #0f0f0f дэвсгэр,
   #cccccc/#aaaaaa саарал текст, #2a2a2a товчтой байв. Сайтын бусад хэсэг
   цайвар шаргал тул зөрж харагдаж байсныг брэндийн палитрт бүрэн оруулав.
   Селекторыг хуучинтай яг адил бичсэн — файл сүүлд ачаалагдах тул ялна.
   ========================================================================== */
.aside-cart-wrapper.offcanvas {
    background-color: var(--gd-cream);
    color: var(--gd-ink);
    box-shadow: -20px 0 60px -30px rgba(39, 46, 15, .35);
}

/* Дэлгэц бүхэлдээ харлахгүй, зөөлөн бүрхүүл */
.offcanvas-backdrop,
.modal-backdrop { background-color: rgba(39, 46, 15, .45); }

/* Самбарын дээд мөр — хаах товч */
.aside-cart-wrapper .btn-aside-cart-close {
    background-color: var(--gd-sand);
    color: var(--gd-ink);
    border-bottom: 1px solid var(--gd-line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
    transition: background-color var(--gd-t), color var(--gd-t);
}
.aside-cart-wrapper .btn-aside-cart-close:hover {
    background-color: var(--gd-sand-soft);
    color: var(--gd-green);
}
.aside-cart-wrapper .btn-aside-cart-close i { color: inherit; }

.aside-cart-wrapper .offcanvas-body { padding: 26px 24px 40px; }

/* Барааны жагсаалт */
.aside-cart-wrapper .aside-cart-product-list .aside-product-list-item a {
    color: var(--gd-ink);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
}
.aside-cart-wrapper .aside-cart-product-list .aside-product-list-item a:hover { color: var(--gd-green); }
.aside-cart-wrapper .aside-cart-product-list .aside-product-list-item a img {
    max-width: 62px;
    margin-right: 16px;
    padding: 0;
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
    background: var(--gd-off);
}
.aside-cart-wrapper .aside-cart-product-list .aside-product-list-item .product-price {
    color: var(--gd-muted);
    font-size: 12.5px;
}
.aside-cart-wrapper .aside-cart-product-list .aside-product-list-item .remove {
    color: var(--gd-gray);
    transition: color var(--gd-t);
}
.aside-cart-wrapper .aside-cart-product-list .aside-product-list-item .remove:hover { color: var(--gd-sale); }

/* Нийт дүн */
.aside-cart-wrapper .cart-total {
    color: var(--gd-ink);
    padding-top: 18px;
    border-top: 1px solid var(--gd-line);
    margin-bottom: 22px;
}
.aside-cart-wrapper .cart-total span {
    color: var(--gd-ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.aside-cart-wrapper .cart-total .amount {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gd-ink);
}

/* Хоёр товч — эхнийх нь хүрээтэй, хоёр дахь нь ногоон гол үйлдэл */
.aside-cart-wrapper .btn-total {
    border-radius: var(--gd-radius);
    background-color: transparent;
    border: 1px solid var(--gd-ink);
    color: var(--gd-ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 14px 18px;
    transition: background-color var(--gd-t), border-color var(--gd-t), color var(--gd-t);
}
.aside-cart-wrapper .btn-total:hover {
    background-color: var(--gd-ink);
    border-color: var(--gd-ink);
    color: var(--gd-cream);
}
.aside-cart-wrapper .btn-total + .btn-total {
    background-color: var(--gd-green);
    border-color: var(--gd-green);
    color: var(--gd-white);
    margin-top: 10px;
}
.aside-cart-wrapper .btn-total + .btn-total:hover {
    background-color: var(--gd-green-deep);
    border-color: var(--gd-green-deep);
    color: var(--gd-white);
}

/* Хоосон үеийн бичвэр */
.aside-cart-wrapper .offcanvas-body > p { color: var(--gd-muted); font-size: 14px; }


/* ==========================================================================
   35. ГАР УТАСНЫ ХАЖУУГИЙН ЦЭС
   Хуучин загварын бараан сэдвээс #1f1f1f дэвсгэр үлдсэн байсан бол текстийг
   нь өмнө нь брэндийн бараан өнгө болгосон тул ХАР дээр ХАР болж, холбоосууд
   бараг харагдахгүй байв (контраст 1.16:1). Самбарыг бүхэлд нь цайвар
   палитрт оруулж, сагсны самбартай нэг өнгө аястай болгов.
   ========================================================================== */
.off-canvas-wrapper.offcanvas {
    background-color: var(--gd-cream);
    color: var(--gd-ink);
    box-shadow: 20px 0 60px -30px rgba(39, 46, 15, .35);
}

.off-canvas-wrapper .btn-menu-close {
    background-color: var(--gd-sand);
    color: var(--gd-ink);
    border-bottom: 1px solid var(--gd-line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
    transition: background-color var(--gd-t), color var(--gd-t);
}
.off-canvas-wrapper .btn-menu-close:hover {
    background-color: var(--gd-sand-soft);
    color: var(--gd-green);
}
.off-canvas-wrapper .btn-menu-close i { color: inherit; }

.off-canvas-wrapper .offcanvas-body {
    padding: 8px 22px 28px;
    scrollbar-color: var(--gd-line-2) var(--gd-cream);
}
.off-canvas-wrapper .offcanvas-body::-webkit-scrollbar-track { background: var(--gd-cream); }
.off-canvas-wrapper .offcanvas-body::-webkit-scrollbar-thumb {
    background-color: var(--gd-line-2);
    border: 2px solid var(--gd-cream);
}

/* Цэсний холбоосууд */
.offcanvas-menu-nav li a,
.offcanvas-menu-nav ul li a {
    color: var(--gd-ink);
    font-family: var(--gd-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .3px;
    text-transform: none;
    padding: 15px 0;
    border-bottom: 1px solid var(--gd-line);
    transition: color var(--gd-t);
}
.offcanvas-menu-nav li a:hover,
.offcanvas-menu-nav ul li a:hover { color: var(--gd-green); }

.offcanvas-menu-nav li ul {
    border-left: 1px solid var(--gd-line);
    padding-left: 16px;
}
.offcanvas-menu-nav li ul li a {
    font-size: 13px;
    font-weight: 400;
    color: var(--gd-muted);
    padding: 10px 0;
    border-bottom: 0;
}
.offcanvas-menu-nav a:not(:only-child):after { color: var(--gd-gray); }


/* ==========================================================================
   36. ХУУЧИН ЗАГВАРЫН ҮЛДЭГДЭЛ ӨНГӨНҮҮД (гар утасны шалгалтаар илэрсэн)
   ========================================================================== */

/* (a) Мэдээний хуудасны breadcrumb зурвас #555555 бараан дэвсгэртэй, дээр нь
   #b3b3b3 текст (контраст 3.56) байсан. Бусад хуудасны .page-header-area-тай
   ижил шаргал зурвас болгов. */
.breadcrumb-style1 {
    background: var(--gd-sand);
    border-bottom: 1px solid var(--gd-line);
    padding: 30px 0 22px;
}
.breadcrumb-style1 .breadcrumb-item,
.breadcrumb-style1 .breadcrumb-item a {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gd-muted);
}
.breadcrumb-style1 .breadcrumb-item a:hover { color: var(--gd-green); }
.breadcrumb-style1 .breadcrumb-item.active { color: var(--gd-ink); }
.breadcrumb-style1 .breadcrumb-item + .breadcrumb-item::before { color: var(--gd-gray); }

/* (b) Мэдээний хажуугийн блокийн гарчиг #ffffff байсан тул ЦАГААН дэвсгэр
   дээр цагаан болж, огт харагдахгүй байв (контраст 1.00). */
.blog-sidebar-widget .blog-widget-title,
.product-sidebar-widget .product-widget-title {
    color: var(--gd-ink);
    font-family: var(--gd-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding-left: 0;
}
.blog-sidebar-widget .blog-widget-title:before,
.product-sidebar-widget .product-widget-title:before { display: none; }


/* ==========================================================================
   37. ГАР УТАСНЫ ХҮРЭХ ТАЛБАЙ
   Хэмжээгээр нь жижиг үлдээх шаардлагатай удирдлагууд (зарлалын сум,
   слайдерын цэг, сагснаас хасах ×) хуруугаар онохоод хэцүү байв. Харагдах
   хэмжээг нь өөрчлөхгүйгээр ил тод ::after-ээр 44px хүрэх талбай өглөө.
   ========================================================================== */
@media (max-width: 991px) {
    .gd-announce-nav,
    .gd-cart-remove,
    .gd-slideshow-dot { position: relative; }

    .gd-announce-nav::after,
    .gd-cart-remove::after,
    .gd-slideshow-dot::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }

    /* Слайдерын цэгүүд хоорондоо ойрхон тул хүрэх талбай давхцахгүй байх */
    .gd-slideshow-dots { gap: 12px; }
    .gd-slideshow-dot::after { width: 34px; }
}


/* ==========================================================================
   38. iOS-ИЙН АВТОМАТ ТОМРОЛТ
   Safari (iOS) нь фонт нь 16px-ээс жижиг талбарт товшиход хуудсыг автоматаар
   томруулдаг бөгөөд буцаж жижигрүүлдэггүй. Гар утсанд бичих боломжтой бүх
   талбарын фонтыг 16px болгож үүнээс сэргийлэв. Ширээний компьютерт
   загварын нягт хэмжээ хэвээр үлдэнэ.

   `!important` ЗААВАЛ хэрэгтэй: style.css нь `.billing-form-wrap
   .form-control { font-size: 15px }` мэтээр ХОЁР ангиар бичсэн тул
   тодорхойлолт нь эндхийн ганц ангитай `.form-control`-оос өндөр байж,
   дараа нь ачаалагдсан ч дийлдэг. Үүнээс болж төлбөрийн хуудасны бүх
   талбар 15px хэвээр үлдэж, iOS дээр захиалга өгөх бүрд дэлгэц томордог
   байв. Media query нь тодорхойлолт нэмдэггүйг санах хэрэгтэй.
   ========================================================================== */
@media (max-width: 991px) {
    .form-control,
    .form-select,
    .gd-cart-qty input,
    .gd-price-row input,
    .gd-sort select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Жижиг фонттой байсан удирдлагуудын өндөр хэт өсөхөөс сэргийлж
       дотоод зайг нь бага зэрэг татав. */
    .gd-sort select { padding-top: 4px; padding-bottom: 4px; }
    .gd-price-row input { padding-top: 4px; padding-bottom: 4px; }
}


/* ==========================================================================
   39. OFFCANVAS-ИЙН ДАВХАРГЫН ДАРААЛАЛ
   Хуучин загвар нь бүрхүүлийг (backdrop) z-index: 9 болгож, панелийг 999
   болгосон. Манай толгой мөн 999 тул drawer нээхэд бүрхүүл толгойн ДООР
   үлдэж, толгой бүдгэрэхгүй, дээрээс нь дарагдах боломжтой хэвээр байв.
   Bootstrap-ийн зөв дараалалд буцаав: толгой 999 < бүрхүүл 1040 < панель 1045.
   (Fancybox нь 1050-аас дээш тул зургийн lightbox хэвээрээ дээгүүр гарна.)
   ========================================================================== */
.offcanvas-backdrop { z-index: 1040 !important; }
.offcanvas          { z-index: 1045 !important; }


/* ==========================================================================
   40. BOOTSTRAP-ИЙН БОСОО GUTTER-ИЙГ СЭРГЭЭХ
   style.css нь `.row .col, .row [class*=col-] { margin-top: 0 }` гэж бичсэн
   тул `g-4`, `g-5` зэрэг ангиар өгсөн БОСОО зай бүрэн тэглэгддэг байв.
   Үр дүнд нь баганууд давхарлан буух үед (гар утас) зэргэлдээ блокууд
   нийлж, footer-ийн тайлбар доорх цэстэйгээ наалдаж байсан. Ижил алдаа
   бүтээгдэхүүн, багцын хуудасны холбоотой барааны сүлжээнд ч байв.

   Bootstrap-д `--bs-gutter-y` нь `g-*`/`gy-*` анги ӨГӨӨГҮЙ үед 0 байдаг тул
   энэ дүрэм нь зөвхөн зохиогч нь зориудаар зай хүссэн мөрүүдэд нөлөөлнө.
   (.gd-grid нь өөрийн gutter-ээ тавьдаг тул хэвээрээ ажиллана.)
   ========================================================================== */
.row { margin-top: calc(-1 * var(--bs-gutter-y)); }
.row > * { margin-top: var(--bs-gutter-y); }
.row > .col,
.row > [class*="col-"] { margin-top: var(--bs-gutter-y); }


/* ==========================================================================
   41. ЖАГСААЛТЫН ТОЛГОЙ — эрэмбэлэх удирдлагыг хассаны дараа
   .gd-nav-tools дотор одоо зөвхөн гар утасны «Шүүлтүүр» товч үлдсэн. Тэр нь
   ширээний дэлгэцэд display:none тул хоосон блок flex мөрөнд илүү зай
   үүсгэдэг байв. Ширээний дэлгэцэд бүхэлд нь нуулаа.
   ========================================================================== */
@media (min-width: 992px) {
    .gd-nav-tools { display: none; }
}


/* ==========================================================================
   42. БИДНИЙ ТУХАЙ — ЗАРЧИМ + ТООН ҮЗҮҮЛЭЛТ
   Өмнө нь зарчим (3 хайрцаг) ба тоон үзүүлэлт нь тус тусдаа бүтэн дэлгэц
   эзэлдэг байсан тул хуудас хэт урт болж, доорх хүмүүсийн хэсэг рүү хүрэх
   хүртэл олон гүйлгэлт шаарддаг байв. Одоо нэг мөрөнд зэрэгцүүлэв.
   ========================================================================== */
.gd-principles {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, .9fr);
    gap: 48px;
    align-items: start;
}
.gd-principles.is-single { grid-template-columns: minmax(0, 1fr); }
.gd-principles-body .gd-fact-text { font-size: 15px; }

/* Тоонууд хажуудаа багана болж босоо жагсана */
.gd-fact-stats.is-stacked {
    grid-template-columns: minmax(0, 1fr);
    position: sticky;
    top: calc(var(--gd-header-h) + 24px);
}

@media (max-width: 991px) {
    .gd-principles { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .gd-fact-stats.is-stacked { position: static; }
}


/* ==========================================================================
   43. БИДНИЙ ТУХАЙ — ХҮМҮҮС (үүсгэн байгуулагч, зөвлөх, баг хамт олон)
   Бүх зураг зүүн талдаа эгнэнэ. Ээлжлэн тал солих хувилбар байсныг
   болиулсан — нэг шулуунд эгнэсэн зураг нь нүдийг тогтоож, хүмүүсийн
   жагсаалт болж уншигдана.
   ========================================================================== */
.gd-profile {
    display: grid;
    /* Зургийг хувиар биш, тогтмол дээд хэмжээгээр барина — эс тэгвээс өргөн
       дэлгэц дээр хэт томроод, бичвэрээ дарчихдаг. */
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    padding: 52px 0;
    border-top: 1px solid var(--gd-line);
}
/* Дунд зэргийн дэлгэцэд бичвэрийн багана хэт нарийсахаас сэргийлнэ */
@media (max-width: 1199px) {
    .gd-profile { grid-template-columns: minmax(0, 270px) minmax(0, 1fr); gap: 36px; }
}
.gd-profile:first-child { border-top: 0; padding-top: 0; }

/* Зөвхөн бичвэртэй хэсэг (зураг оруулаагүй) бүтэн өргөнөө авна.
   Ангийг Blade өгдөг — `:has()`-д найдвал дэмждэггүй хөтөч дээр бичвэр
   хоосон баганын хажууд шахагдана. */
.gd-profile.is-textonly { grid-template-columns: minmax(0, 1fr); }

.gd-profile-media {
    border-radius: var(--gd-radius);
    overflow: hidden;
    background: var(--gd-off);
    aspect-ratio: 4 / 5;
}
.gd-profile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--gd-t);
}
.gd-profile:hover .gd-profile-media img { transform: scale(1.02); }

.gd-profile-name {
    font-family: var(--gd-serif);
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--gd-ink);
    margin: 0 0 6px;
}
.gd-profile-role {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gd-gray);
    margin: 0 0 18px;
}

.gd-profile-quote {
    margin: 24px 0 0;
    padding: 18px 22px;
    background: var(--gd-sand-soft);
    border-left: 2px solid var(--gd-green);
    font-family: var(--gd-serif);
    font-size: clamp(15px, 1.6vw, 19px);
    line-height: 1.6;
    color: var(--gd-ink);
}
.gd-profile-quote::before { content: '«'; }
.gd-profile-quote::after  { content: '»'; }

@media (max-width: 991px) {
    .gd-profile {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
        padding: 38px 0;
    }
    /* Гар утсанд 16/11 нь босоо хөргийг дээр доороос нь огтолдог байв.
       Админ дээр 4:5 болгож тайрсан хэвээр нь бүтнээр харуулна. Маш намхан
       дэлгэцэд хуудсыг бүтнээр эзлэхээс max-height хамгаална. */
    .gd-profile-media {
        aspect-ratio: 4 / 5;
        max-height: 62vh;
    }
}

/* ==========================================================================
   БАГЦАД БАГТСАН БҮТЭЭГДЭХҮҮНИЙ POPUP
   Жагсаалт дээр дарахад бүтээгдэхүүний мэдээллийг энд харуулна — өмнө нь
   хуудас солигдож, багцаас гарч оддог байв.
   ========================================================================== */
.pack-modal-content {
    position: relative;
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
    background: var(--gd-white);
}

.pack-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--gd-line);
    border-radius: 50%;
    background: var(--gd-white);
    color: var(--gd-muted);
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.pack-modal-close:hover { color: var(--gd-green); border-color: var(--gd-green); }

.pack-modal-body {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 26px;
    padding: 26px;
}
/* Зураггүй мөр бол текст бүтэн өргөнөө авна. */
.pack-modal-body:not(:has(.pack-modal-media)) { grid-template-columns: 1fr; }

.pack-modal-media {
    aspect-ratio: 4 / 5;
    border-radius: var(--gd-radius);
    overflow: hidden;
    background: var(--gd-off);
}
.pack-modal-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pack-modal-info { display: flex; flex-direction: column; min-width: 0; }

.pack-modal-title {
    font-family: var(--gd-serif);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--gd-ink);
    margin: 4px 34px 10px 0;   /* хаах товчтой мөргөхгүй */
}
.pack-modal-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--gd-green);
    margin-bottom: 14px;
}
.pack-modal-text {
    font-size: 14px;
    line-height: 1.75;
    color: var(--gd-muted);
}
.pack-modal-text p { margin: 0 0 10px; }
.pack-modal-text p:last-child { margin-bottom: 0; }

.pack-modal-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--gd-green);
    text-decoration: none;
}
.pack-modal-link:hover { color: var(--gd-green-deep); }
.pack-modal-link svg { width: 13px; height: 13px; }

@media (max-width: 575px) {
    .pack-modal-body { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
    .pack-modal-media { aspect-ratio: 16 / 10; }
    .pack-modal-title { font-size: 19px; }
}

/* Жагсаалтын мөр — одоо холбоос биш, popup нээдэг товч. */
.pack-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 2px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    cursor: pointer;
    transition: color .2s;
}
.pack-trigger:last-child { border-bottom: none; }
.pack-trigger:hover { color: var(--gd-green); }

.pack-trigger-check { flex: 0 0 auto; color: var(--gd-green); display: inline-flex; }
.pack-trigger-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--gd-off);
}
.pack-trigger-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pack-trigger-name { flex: 1 1 auto; font-size: 13px; font-weight: 500; min-width: 0; }
.pack-trigger-more { flex: 0 0 auto; color: var(--gd-muted); display: inline-flex; }
/* Доорх картын зураг/нэр — одоо холбоос биш, popup нээдэг товч. */
.pack-card-trigger,
.pack-card-name {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.pack-card-trigger img { width: 100%; display: block; }
.pack-card-name:hover { color: var(--gd-green); }