/* Responsive corrections using the active theme's components and palette. */
/* Shared product-card rhythm: catalog, sliders, notes and related products. */
.card-product {
  border: 1px solid #eee9e2;
  box-shadow: 0 2px 10px #34291f05;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.card-product:hover { border-color: #ded1bd; box-shadow: 0 8px 24px #34291f12; }
.product-list .card-product { padding: 16px; }
.card-product .card-product-img { padding: 8px; }
.card-product .card-product-flex { margin-top: 20px; gap: 12px; align-items: center; }
.card-product .card-product-info { flex: 1; min-width: 0; }
.card-product .card-product-title-en { color: #77716a; line-height: 1.6; margin-bottom: 5px; }
.card-product .card-product-title {
  -webkit-line-clamp: 2;
  line-height: 1.8;
  min-height: 3.6em;
  transition: color .2s ease;
}
.card-product .card-product-title:hover { color: #76502c; }
.card-product .card-product-save {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 36px; width: 36px; height: 36px;
  padding: 0; border: 1px solid #eee5d7; border-radius: 50%;
  background: #fcf9f3; font-size: 14px;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.card-product .card-product-save:hover,
.card-product .card-product-save.is-active { background: #fff1f4; border-color: #f8c8d4; color: #f64670; }
.card-product .card-product-end {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid #f2ede5;
  align-items: center; min-height: 42px;
}
.card-product .card-product-price { flex-wrap: wrap; gap: 6px 10px; }
.card-product .card-product-price-before { font-size: 12px; font-weight: 400; }
.card-product .card-product-btn { flex-shrink: 0; }
.card-product > .progress { margin-top: 14px; }
@media (max-width: 767.98px) {
  .card-product, .product-list .card-product { padding: 12px; }
  .card-product .card-product-flex { margin-top: 16px; gap: 8px; }
  .card-product .card-product-save { flex-basis: 32px; width: 32px; height: 32px; font-size: 13px; }
  .card-product .card-product-end { margin-top: 12px; padding-top: 10px; }
  .card-product .card-product-price { gap: 5px 8px; }
}
.currency-afn { font-family: inherit !important; font-style: normal; font-size: .85em; white-space: nowrap; }
.currency-afn::before { content: 'افغانی'; font-family: inherit !important; }
/* Editorial links remain distinguishable without changing navigation/card styling. */
.blog-content a[href], .about-info-text a[href], .product-short-text a[href], .product-description a[href], .auto-style a[href] {
  color: #76502c; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; overflow-wrap: anywhere;
}
.blog-content a[href]:hover, .about-info-text a[href]:hover, .auto-style a[href]:hover { color: #382516; }
a:focus-visible, button:focus-visible { outline: 2px solid #76502c; outline-offset: 3px; }
@media (hover: none) {
  .card-product-img-body.has-hover-image:hover .card-product-img-primary { opacity: 1; transform: none; }
  .card-product-img-body.has-hover-image:hover .card-product-img-secondary { opacity: 0; transform: none; }
}
.catalog-filter-close, .filter-btn-mobile { display: none; }
.catalog-filter-heading { display: flex; align-items: center; justify-content: space-between; }
.navbar-fill-home { display: none; }
/* Editor-pasted translation wrappers must not position article text off-screen. */
.about-info-text #gtx-trans { position: static !important; inset: auto !important; }
.navbar-logo img.navbar-logo-padded { width: 160px; height: 46px; object-fit: cover; }

/* Tablet navigation uses the same touch-friendly drawer as phones. */
@media (max-width: 1199.98px) {
  body.navigation-open { overflow: hidden; }
  .navbar-toggler { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; color: #fff; padding: 0; border: 0; }
  #offcanvas-nav { display: block; position: fixed; inset: 0; width: 100%; height: 100dvh; background: #f2f2f2; z-index: 9999; transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility .3s; overflow-y: auto; overscroll-behavior: contain; }
  #offcanvas-nav.active { transform: translateX(0); visibility: visible; }
  #offcanvas-nav .navbar-nav { display: flex; flex-direction: column; width: 100%; margin: 0; }
  #offcanvas-nav .offcanvas-header { display: flex; height: 60px; align-items: center; justify-content: space-between; padding: 0 16px; color: #fff; background: #76502c; margin-bottom: 10px; }
  #offcanvas-nav .offcanvas-header button { width: 44px; height: 44px; background: none; border: 0; color: #fff; float: none; }
  #offcanvas-nav .nav-item { display: block; margin: 0; padding: 0; }
  #offcanvas-nav .nav-item > a { display: flex; width: 100%; min-height: 48px; padding: 12px 20px; color: #34291f !important; font-size: 16px; white-space: normal; }
  #offcanvas-nav .dropdown > a::after { content: '\f104'; flex-grow: 1; display: flex; justify-content: flex-end; }
  #offcanvas-nav .dropdown > ul { display: block; position: fixed; inset: 0; right: 0; width: 100%; height: 100dvh; margin: 0; padding: 0; border-radius: 0; background: #f2f2f2; transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility .3s; overflow-y: auto; z-index: 10000; }
  #offcanvas-nav .dropdown > ul.active { transform: translateX(0); visibility: visible; }
  #offcanvas-nav .dropdown ul::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card-product-img-primary, .card-product-img-secondary { transition: none !important; }
  .card-product-img, #offcanvas-nav, #offcanvas-nav .dropdown > ul { transition: none !important; }
}

@media (max-width: 1199.98px) {
  .navbar-custom { backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.navigation-open .whatsapp-sticky { visibility: hidden; }
}

@media (max-width: 991.98px) {
  .filter-sticky { position: static; }
  .catalog-filter-open { overflow: hidden; }
  #catalog-filter-form {
    position: fixed; top: 0; right: 0; width: min(88vw, 360px);
    height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); transition: transform .25s ease;
    z-index: 9999; background: #fff; border-radius: 0; padding-bottom: 24px;
    visibility: hidden;
  }
  #catalog-filter-form.active { transform: translateX(0); visibility: visible; }
  .catalog-filter-heading { position: sticky; top: 0; background: #fff; z-index: 2; }
  .catalog-filter-close { display: block; width: 44px; height: 44px; border: 0; background: none; font-size: 28px; color: #343a40; }
  .sort-body { gap: 10px; flex-wrap: wrap; align-items: center; }
  .sort-body .filter-btn-mobile {
    display: inline-flex; position: static; width: auto; height: 44px;
    gap: 7px; padding: 0 14px; border: 1px solid var(--color1); border-radius: 4px;
    font-size: 14px; color: #343a40; background: #f7f0e8;
  }
  .sort-title { margin: 0; }
  .sort-select { min-height: 44px; flex: 1; min-width: 120px; }
}

@media (max-width: 767.98px) {
  /* On touch screens content must remain visible without scroll-reveal effects. */
  .animate { opacity: 1; transform: none; transition-delay: 0s !important; }
  .navbar-custom { min-height: 82px; }
  .navbar-custom > .container-fluid { padding: 0 12px; flex-wrap: nowrap; gap: 8px; }
  .navbar-right { min-width: 0; flex: 1; gap: 6px; }
  .navbar-logo { min-width: 0; margin: 0; flex: 1; align-items: center; }
  .navbar-logo img { width: min(108px, 100%); max-height: 30px; object-fit: contain; }
  .navbar-logo img.navbar-logo-padded { width: min(108px, 100%); height: 30px; object-fit: cover; }
  .navbar-logo-tagline { font-size: 9px; line-height: 1.6; white-space: normal; max-width: 180px; text-align: center; }
  .navbar-left { gap: 2px; flex-shrink: 0; }
  .navbar-btn, .navbar-search-btn, .navbar-toggler { min-width: 34px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .navbar-fill { height: 114px; }
  .navbar-fill-home { display: block; }
  .offcanvas-nav, .offcanvas-nav .dropdown ul { height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
  #offcanvas-basket { width: min(100vw, 390px); max-width: 100%; height: 100vh; height: 100dvh; }
  .offcanvas-footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .home-wrap-1-item { min-height: 360px; height: auto; padding-top: 30px; padding-bottom: 35px; }
  .home-wrap-1-inner { max-width: 100%; }
  .home-wrap-1-en, .home-wrap-3-en, .home-wrap-en, .about-info-en { margin-bottom: 5px; line-height: 1.3; }
  .banner-wrapper-en { margin-bottom: 8px; line-height: 1.4; font-size: 24px; }
  .about-info-en { font-size: 24px; }
  .about-info-text { font-size: 15px; line-height: 1.9; letter-spacing: 0; }
  .home-wrap-1-title { font-size: 20px; line-height: 1.8; }
  .home-wrap-1-btn-body { flex-wrap: wrap; margin-top: 16px; }
  .home-wrap-1-btn { min-height: 44px; min-width: 0; max-width: 100%; }
  .home-wrap-1-btn-body .home-wrap-1-btn { flex: 1; min-width: 120px; }
  .home-wrap-3-box { padding: 20px 14px; }
  .home-wrap-3-en { font-size: 17px; }
  .home-wrap-3-title, .home-wrap-title { line-height: 1.7; }
  .home-wrap-7 { padding: 24px 15px; }
  .card-product-price { flex-wrap: wrap; gap: 6px; }
  .card-product-title { line-height: 1.7; }
  .card-product-title { font-size: 13px; }
  .card-product-title-en { font-size: 11px; }
  .card-product-price-main { font-size: 13px; }
  .card-product-price-before { font-size: 11px; }
  .card-note-img { transform: none; max-width: 100%; }
  .product-box { position: static; }
  .product-note-flex { flex-wrap: wrap; gap: 16px 10px; }
  .product-note-item { min-width: 0; }
  .product-note-img { max-width: 100%; }
  .pro-slider { min-width: 0; }
  .breadcrumb { height: auto; min-height: 24px; line-height: 1.8; }
  .blog-content { overflow-wrap: anywhere; }
  .blog-content img, .about-info-text img, .auto-style img { max-width: 100%; height: auto; }
  .blog-content iframe, .about-info-text iframe { max-width: 100%; }
  .blog-content table { display: block; max-width: 100%; overflow-x: auto; }
  .footer .footer-header { font-size: 16px; }
  .footer-app-link { min-width: 0; }
  .footer-bottom-item { flex-wrap: wrap; gap: 10px; text-align: center; }
  .footer-bottom-item .d-flex { justify-content: center; flex-wrap: wrap; }
  .contact-us-form input, .contact-us-form textarea, .com-box input, .com-box textarea,
  .jconfirm input, .jconfirm select, .jconfirm textarea, .profile-body input, .profile-body select,
  .receipt-field input, .receipt-field textarea { font-size: 16px; max-width: 100%; }
  .jconfirm .jconfirm-box-container { flex: 0 0 100%; max-width: 100%; margin: 0; padding: 0 12px; }
  .jconfirm .jconfirm-box { width: 100%; margin: 16px 0; padding: 18px 16px; }
  .jconfirm .jconfirm-scrollpane { overflow-x: hidden; }
  .ck-nav-body, .list-unstyled.multi-steps { max-width: 100%; display: flex; justify-content: center; }
  .ck-nav { flex: 1; padding: 0 8px; font-size: 12px; }
  .ck-item { min-width: 0; }
  .ck-item-img-body { flex: 0 0 85px; min-width: 0; width: 85px; height: 120px; }
  .ck-item-info { min-width: 0; }
  .ck-item-title { overflow-wrap: anywhere; }
  .ck-item-flex { min-width: 0; flex: 1 1 0; flex-wrap: wrap; gap: 12px; }
  .ck-item-info { width: 100%; }
  .ck-item-price-body, .ck-item-price-body > .d-flex { min-width: 0; max-width: 100%; }
  .ck-item-price-1 { white-space: normal; overflow-wrap: anywhere; }
  .ck-item-control button { width: 44px; height: 44px; font-size: 14px; padding: 0; }
  .btn.btn-danger.btn-sm.cartDelete { min-height: 44px; padding: 8px 12px; margin-top: 0; }
  .ck-row { min-width: 0; }
  .profile-body { margin-top: 24px; }
  .profile-body .dataTables_wrapper { max-width: 100%; overflow-x: auto; }
  .profile-body .dataTables_filter, .profile-body .dataTables_length { float: none; text-align: right; margin-bottom: 12px; }
  .profile-body .p-box { min-width: 0; }
  .profile-body > .row > .col-12 { padding-right: 15px; padding-left: 15px; }
  .profile-body .position-sticky { position: static !important; }
  .profile-body .profile-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .profile-body .profile-nav-item { min-width: 0; padding: 10px 8px; min-height: 44px; font-size: 13px; gap: 8px; }
  .profile-body .p-box { padding: 16px; }
  .profile-body .p-head-title { font-size: 18px; margin-bottom: 16px; }
  .profile-body .form-control { min-height: 44px; }
  .profile-body .control-label { max-width: 100%; width: 100%; margin-bottom: 8px; }
  .profile-body .alert { line-height: 1.9; }
  .profile-body { padding: 0; }
  .profile-body .profile-nav-item span { margin-right: 0; }
  .modal-address .modal-dialog { margin: 12px; }
  .modal-address .modal-body input, .modal-address .modal-body select { min-height: 44px; font-size: 16px; max-width: 100%; }
  .ck-box-final { position: static; width: 100%; margin-top: 24px; }
  .ck-final-btn { display: none; }
  .ck-box-top { display: block; }
  .whatsapp-sticky { left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
}

@media (max-width: 359.98px) {
  .navbar-logo img, .navbar-logo img.navbar-logo-padded { width: min(96px, 100%); max-height: 27px; }
  .navbar-logo img.navbar-logo-padded { height: 27px; }
  .navbar-logo-tagline { font-size: 8px; }
  .navbar-btn, .navbar-search-btn, .navbar-toggler { min-width: 30px; }
  .navbar-custom > .container-fluid { padding: 0 8px; gap: 4px; }
  .sort-title { font-size: 11px; }
  .home-wrap-3-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .animate { opacity: 1; transform: none; transition: none; }
  .navbar-ads-track { animation: none; }
  #catalog-filter-form { transition: none; }
}