/* MarketDG visual refresh: shared home/detail presentation layer. */
:root {
  --mdg-ink: #172a22;
  --mdg-muted: #65776d;
  --mdg-line: #e0e9e3;
  --mdg-surface: #ffffff;
  --mdg-page: #f5f8f6;
  --mdg-brand: #176b4b;
  --mdg-brand-deep: #104b35;
  --mdg-brand-soft: #eaf4ee;
  --mdg-blue: #1e5cce;
  --mdg-radius: 18px;
  --mdg-shadow: 0 12px 32px rgba(24, 48, 35, .075);
}

body {
  background: var(--mdg-page);
  color: var(--mdg-ink);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

body.dark-theme {
  --mdg-ink: #edf5ef;
  --mdg-muted: #b1c1b6;
  --mdg-line: #34483b;
  --mdg-surface: #1c2922;
  --mdg-page: #111a15;
  --mdg-brand: #82c69a;
  --mdg-brand-deep: #b7e4c4;
  --mdg-brand-soft: #243b2d;
  --mdg-blue: #a8c5ff;
  --mdg-shadow: 0 14px 36px rgba(0, 0, 0, .22);
}

.header,
.nav {
  background: var(--mdg-surface) !important;
  border-color: var(--mdg-line) !important;
  color: var(--mdg-ink);
}

body:has(.layout) > header {
  background: var(--mdg-surface) !important;
  border-bottom: 1px solid var(--mdg-line);
  box-shadow: 0 3px 15px rgba(22, 47, 33, .045);
  color: var(--mdg-ink);
}

.header-inner {
  max-width: 1320px;
  min-height: 70px;
  margin-inline: auto;
  padding: 10px 24px;
  gap: 16px;
}

.header-inner .nav {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none;
}

.header-inner .nav a {
  border-radius: 999px;
  color: var(--mdg-muted);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.header-inner .nav a:hover {
  background: var(--mdg-brand-soft);
  color: var(--mdg-brand-deep);
}

.header-inner .logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--mdg-blue);
  font-size: 25px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.header-inner .logo img { width: 38px; height: 38px; }

.header {
  box-shadow: 0 3px 15px rgba(22, 47, 33, .045);
}

.header-container,
.nav .nav-container {
  max-width: 1320px;
  margin-inline: auto;
}

.header-container {
  min-height: 70px;
  padding-block: 10px;
}

.logo { color: var(--mdg-blue); }
.logo span { color: var(--mdg-brand); }

.nav .nav-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding-block: 7px;
}

.nav .nav-container a {
  min-height: 34px;
  border-radius: 999px;
  color: var(--mdg-muted);
  font-weight: 650;
}

.nav .nav-container a:hover,
.nav .nav-container .nav-store-link {
  background: var(--mdg-brand-soft);
  color: var(--mdg-brand-deep);
}

.header-actions .btn-login,
.header-actions .btn-post {
  min-height: 40px;
  border-radius: 11px;
}

.header-actions .btn-post,
.search-box .search-btn {
  background: var(--mdg-brand);
  box-shadow: 0 5px 14px rgba(23, 107, 75, .18);
}

.header-actions .btn-post:hover,
.search-box .search-btn:hover { background: #105b3d; }

.hero {
  padding: clamp(42px, 5vw, 66px) 22px;
  background:
    radial-gradient(ellipse at 84% 10%, rgba(255,255,255,.16), transparent 32%),
    linear-gradient(120deg, #103f30 0%, #176b4b 62%, #2c8660 100%) !important;
}

.hero h1 {
  max-width: 820px;
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -.035em;
}

.hero p { margin-bottom: 24px; }

.search-box {
  max-width: 1120px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 17px;
  box-shadow: 0 18px 42px rgba(9, 31, 21, .22);
}

.search-box input,
.search-box select {
  min-height: 48px;
  border-color: #dce6df;
  border-radius: 11px;
  background: #fbfdfb;
}

.search-box input:focus-visible,
.search-box select:focus-visible,
.search-box .search-btn:focus-visible,
.nav a:focus-visible,
.header a:focus-visible,
.layout :focus-visible,
.categories a:focus-visible,
.ads a:focus-visible {
  outline: 3px solid #f5bd55;
  outline-offset: 3px;
}

.home-stores {
  max-width: 1320px;
  margin-inline: auto;
  padding: 24px 24px 8px;
}

.home-stores-heading {
  align-items: end;
  margin-bottom: 14px;
}

.home-stores-heading h2 {
  margin: 0;
  color: var(--mdg-ink);
  font-size: clamp(21px, 2.5vw, 27px);
  letter-spacing: -.025em;
}

.home-stores-heading p { margin: 5px 0 0; color: var(--mdg-muted); }

.home-stores-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 310px));
  gap: 15px;
}

.home-store-card {
  border: 1px solid var(--mdg-line);
  border-radius: 16px;
  background: var(--mdg-surface);
  box-shadow: 0 6px 18px rgba(24, 48, 35, .05);
}

.home-store-banner { height: 76px; }
.home-store-content { padding: 0 15px 15px; }

.home-store-content h3 { color: var(--mdg-ink); }
.home-store-content p { color: var(--mdg-muted); }

.home-stores-empty {
  border-color: var(--mdg-line);
  background: var(--mdg-surface);
}

.hero ~ main.container {
  max-width: 1320px;
  padding: 27px 24px 46px;
}

.container .section-title {
  margin-bottom: 15px;
  color: var(--mdg-ink);
  font-size: clamp(22px, 2.3vw, 28px);
  letter-spacing: -.03em;
}

.categories {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 32px;
}

.categories .category {
  min-height: 136px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 17px;
  border: 1px solid var(--mdg-line);
  border-radius: 16px;
  background: var(--mdg-surface);
  box-shadow: 0 5px 15px rgba(24, 48, 35, .045);
}

.categories .category:hover {
  transform: translateY(-2px);
  border-color: #a9cdb7;
  box-shadow: var(--mdg-shadow);
}

.category-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 11px;
  border: 1px solid rgba(23, 107, 75, .09);
  border-radius: 15px;
  background: var(--mdg-brand-soft);
  color: transparent;
  font-size: 0;
}

.category-icon::before {
  color: var(--mdg-brand-deep);
  font-size: 23px;
  line-height: 1;
}

.category[href$="category=1"] .category-icon::before { content: "💻"; }
.category[href$="category=2"] .category-icon::before { content: "🪑"; }
.category[href$="category=3"] .category-icon::before { content: "📱"; }
.category[href$="category=4"] .category-icon::before { content: "🚗"; }
.category[href$="category=5"] .category-icon::before { content: "🏠"; }
.category[href$="category=6"] .category-icon::before { content: "🔌"; }
.category[href$="category=7"] .category-icon::before { content: "👕"; }
.category[href$="category=8"] .category-icon::before { content: "💼"; }

.category-name {
  color: var(--mdg-ink);
  font-size: 14px;
  font-weight: 750;
}

.section-title[data-i18n="recent_ads"] {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.section-title[data-i18n="recent_ads"]::after { color: var(--mdg-muted); }

.ads {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr));
  gap: 16px;
}

.ads .ad-card {
  border: 1px solid var(--mdg-line);
  border-radius: 16px;
  background: var(--mdg-surface);
  box-shadow: 0 5px 18px rgba(24, 48, 35, .055);
}

.ads .ad-card:hover { transform: translateY(-2px); box-shadow: var(--mdg-shadow); }
.ads .ad-image { height: 205px; background: #edf2ee; }
.ads .ad-title { color: var(--mdg-ink); }
.ads .ad-price { color: var(--mdg-brand); }
.ads .ad-location { color: var(--mdg-muted); }
.ads .ad-category { background: var(--mdg-brand-soft); color: var(--mdg-brand-deep); }
.ads .ad-seller-line,
.ads .ad-date-line { color: var(--mdg-muted); font-size: 12px; line-height: 1.5; }

.dz-contact-section {
  max-width: 1050px;
  margin: 34px auto 0;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--mdg-line);
  border-radius: 18px;
  background: var(--mdg-surface);
  box-shadow: 0 8px 23px rgba(24, 48, 35, .045);
}

.dz-contact-heading { margin-bottom: 17px; }
.dz-contact-heading h2 { margin: 5px 0 6px; color: var(--mdg-ink); font-size: 25px; }
.dz-contact-heading p { color: var(--mdg-muted); }
.dz-contact-form { max-width: none; }
.dz-contact-grid { gap: 12px 15px; }
.dz-contact-field textarea { min-height: 105px; }
.dz-contact-field input,
.dz-contact-field textarea { border-color: var(--mdg-line); border-radius: 10px; }
.dz-contact-submit { background: var(--mdg-blue); }

footer,
.footer {
  border-color: var(--mdg-line);
  background: var(--mdg-surface);
  color: var(--mdg-muted);
}

/* Listing detail: a calm gallery column and one readable information panel. */
main.container:has(.layout) {
  max-width: 1320px;
  padding: 28px 24px 48px;
}

.layout {
  grid-template-columns: minmax(0, 1.25fr) minmax(350px, .75fr);
  gap: 20px;
  align-items: start;
}

.layout > .box {
  overflow: hidden;
  border: 1px solid var(--mdg-line);
  border-radius: var(--mdg-radius);
  background: var(--mdg-surface);
  box-shadow: 0 8px 24px rgba(24, 48, 35, .055);
}

.layout > .box:first-child { padding: 0 0 20px; }
.layout > .box:last-child { min-width: 0; }
.layout .details { gap: 14px; padding: 25px; }

.dzmarket-category-breadcrumb {
  color: var(--mdg-muted);
  font-size: 13px;
}

.dzmarket-category-breadcrumb a { color: var(--mdg-brand); font-weight: 650; }

.layout .category {
  padding: 6px 10px;
  border: 1px solid var(--mdg-line);
  border-radius: 999px;
  background: var(--mdg-brand-soft);
  color: var(--mdg-brand-deep);
  font-size: 12px;
  font-weight: 750;
}

.layout .category:not(:has([data-category-label])) { display: none; }

.layout h1 {
  margin: 0;
  color: var(--mdg-ink);
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.2;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.layout .price {
  margin: 0;
  padding: 14px 16px;
  border-radius: 13px;
  background: var(--mdg-brand-soft);
  color: var(--mdg-brand-deep);
  font-size: clamp(25px, 3vw, 32px);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.main-image {
  height: clamp(340px, 43vw, 590px);
  border-radius: 0;
  background: #e9efeb;
}

.main-image-open img { object-fit: contain; }
.gallery-count { inset-inline-end: 14px; inset-inline-start: auto; bottom: 14px; }
.gallery-count { direction: ltr; unicode-bidi: isolate; }
.thumbnails { padding: 14px 18px 8px; }
.thumbnail { width: 78px; height: 68px; border-radius: 10px; }

.description-box {
  margin: 6px 18px 0;
  padding: 19px 20px;
  border: 1px solid var(--mdg-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--mdg-surface), var(--mdg-page) 38%);
}

.description-box h2 { margin-top: 0; color: var(--mdg-ink); font-size: 18px; }
.description { color: var(--mdg-ink); line-height: 1.75; overflow-wrap: anywhere; }

.dzm-store-follow-ad,
.favorite-form,
.social-panel,
.seller-box,
.layout .info-row {
  border-color: var(--mdg-line);
  border-radius: 13px;
}

.dzm-store-follow-ad { background: color-mix(in srgb, var(--mdg-surface), var(--mdg-brand-soft) 32%); }
.social-panel { margin: 0; padding: 15px; background: var(--mdg-surface); }
.social-actions { display: grid; gap: 8px; }
.social-button,
.favorite-btn,
.login-favorite {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 10px;
  text-align: center;
  line-height: 1.35;
}

.social-button:not(.secondary),
.favorite-btn { background: var(--mdg-blue); }
.social-button.secondary,
.login-favorite { background: var(--mdg-brand-soft); color: var(--mdg-brand-deep); }

.layout .info { display: grid; gap: 8px; }
.layout .info-row { padding: 11px 12px; background: var(--mdg-page); }
.layout .label { color: var(--mdg-muted); font-size: 12px; }
.layout .value { color: var(--mdg-ink); font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.layout .seller-box { margin: 0; padding: 17px; border: 1px solid var(--mdg-line); background: var(--mdg-page); }
.layout .seller-box h2 { margin: 0 0 12px; color: var(--mdg-ink); font-size: 17px; }
.layout .seller-box strong { color: var(--mdg-ink); }
.layout .seller-box .phone { display: inline-flex; margin-top: 8px; }
.layout .seller-box p { color: var(--mdg-muted); }
.layout .rating-summary { margin-bottom: 0; }
.layout .social-comments { display: grid; gap: 9px; }
.layout .social-comment { padding: 12px; border: 1px solid var(--mdg-line); border-radius: 10px; }
.layout .date { color: var(--mdg-muted); font-size: 12px; }

body.dark-theme .header,
body.dark-theme .nav,
body.dark-theme .home-store-card,
body.dark-theme .categories .category,
body.dark-theme .ads .ad-card,
body.dark-theme .dz-contact-section,
body.dark-theme .layout > .box,
body.dark-theme .social-panel {
  background: var(--mdg-surface) !important;
  border-color: var(--mdg-line) !important;
  color: var(--mdg-ink);
}

body.dark-theme .nav .nav-container a,
body.dark-theme .category-name,
body.dark-theme .ads .ad-title,
body.dark-theme .container .section-title,
body.dark-theme .home-stores-heading h2,
body.dark-theme .home-store-content h3,
body.dark-theme .dz-contact-heading h2,
body.dark-theme .layout h1,
body.dark-theme .layout .value { color: var(--mdg-ink); }

body.dark-theme .home-store-content p,
body.dark-theme .dz-contact-heading p,
body.dark-theme .layout .label,
body.dark-theme .layout .seller-box p { color: var(--mdg-muted); }

body.dark-theme .layout .info-row,
body.dark-theme .layout .seller-box,
body.dark-theme .description-box {
  background: #17231c;
  border-color: var(--mdg-line);
}

body.dark-theme .layout .price,
body.dark-theme .layout .category,
body.dark-theme .social-button.secondary,
body.dark-theme .login-favorite {
  background: var(--mdg-brand-soft);
  color: var(--mdg-brand-deep);
}

@media (max-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 1.1fr) minmax(310px, .9fr); }
  .categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .header-container { padding-inline: 16px; }
  .header-inner { flex-wrap: wrap; padding-inline: 14px; }
  .header-inner .nav { width: 100%; overflow-x: auto; }
  .header-inner .nav a { flex: 0 0 auto; }
  .nav .nav-container {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-inline: 14px;
    scrollbar-width: thin;
  }
  .nav .nav-container a { flex: 0 0 auto; }
  .hero { padding: 38px 15px; }
  .hero h1 { font-size: clamp(28px, 8vw, 36px); }
  .home-stores { padding: 20px 15px 4px; }
  .home-stores-heading { align-items: flex-start; }
  .home-stores-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
  .hero ~ main.container { padding: 24px 15px 36px; }
  .categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .categories .category { min-height: 116px; padding: 13px; }
  .ads { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .ads .ad-image { height: clamp(130px, 38vw, 180px); }
  .ads .ad-content { padding: 12px; }
  .dz-contact-section { margin-top: 28px; padding: 20px 15px; }
  .dz-contact-grid { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  main.container:has(.layout) { padding: 18px 12px 32px; }
  .layout .details { padding: 18px; }
  .main-image { height: min(78vw, 430px); min-height: 270px; }
  .description-box { margin-inline: 12px; padding: 16px; }
}

@media (max-width: 420px) {
  .header-actions { gap: 6px; }
  .header-actions .btn-login,
  .header-actions .btn-post { padding-inline: 9px; font-size: 12px; }
  .search-box { grid-template-columns: minmax(0, 1fr); }
  .search-box input,
  .search-box select,
  .search-box .search-btn { grid-column: 1; }
  .ads .ad-content { padding: 10px; }
  .ads .ad-title { font-size: 13px; }
  .ads .ad-price { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Correction: make the desktop hierarchy visibly clearer, not just more polished. */
@media (min-width: 761px) {
  .nav .nav-container {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .nav .nav-container a {
    flex: 0 0 auto;
    padding-inline: 9px;
    white-space: nowrap;
  }

  .hero { padding-block: clamp(42px, 4vw, 54px); }
}

@media (min-width: 1201px) {
  .ads { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .ads .ad-image { height: clamp(220px, 18vw, 250px); }
  .ads .ad-content { padding: 16px; }
}

@media (min-width: 761px) and (max-width: 1200px) {
  .ads { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .ads .ad-image { height: clamp(190px, 22vw, 230px); }
}

.section-title[data-i18n="recent_ads"] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-size: clamp(24px, 2.6vw, 32px);
}

.section-title[data-i18n="recent_ads"]::before {
  width: 5px;
  height: 1.15em;
  border-radius: 99px;
  background: var(--mdg-brand);
  content: "";
}

.ads .ad-card {
  border-radius: 19px;
  box-shadow: 0 8px 24px rgba(24, 48, 35, .075);
}

.ads .ad-card:hover { transform: translateY(-4px); }
.ads .ad-title { font-size: 15px; line-height: 1.4; }
.ads .ad-price { font-size: 20px; font-weight: 850; }

.dz-contact-section {
  max-width: 900px;
  border-top: 4px solid var(--mdg-brand);
}

.dz-contact-field textarea { min-height: 88px; }

/* Listing detail: make the photo, price and next action the first visual stops. */
@media (min-width: 761px) {
  .layout { grid-template-columns: minmax(0, 1.28fr) minmax(390px, .82fr); gap: 26px; }
  .layout > .box:first-child {
    border-radius: 22px;
    background: linear-gradient(180deg, var(--mdg-surface), var(--mdg-page));
    box-shadow: 0 14px 34px rgba(24, 48, 35, .09);
  }
  .layout > .box:last-child {
    border-top: 5px solid var(--mdg-brand);
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(24, 48, 35, .08);
  }
  .layout .details { gap: 18px; padding: 30px; }
  .layout h1 {
    padding-inline-start: 15px;
    border-inline-start: 5px solid var(--mdg-brand);
    font-size: clamp(29px, 2.7vw, 39px);
  }
  .layout .price {
    min-height: 82px;
    display: flex;
    align-items: center;
    padding: 17px 20px;
    border: 1px solid var(--mdg-line);
    border-inline-start: 7px solid var(--mdg-brand);
    border-radius: 15px;
    background: linear-gradient(100deg, var(--mdg-brand-soft), var(--mdg-surface));
    font-size: clamp(30px, 3vw, 38px);
  }
  .main-image {
    height: clamp(470px, 45vw, 620px);
    background: radial-gradient(ellipse at center, var(--mdg-surface), var(--mdg-brand-soft));
  }
  .thumbnail { width: 88px; height: 76px; }
  .description-box {
    margin: 14px 22px 0;
    padding: 22px 24px;
    border-inline-start: 5px solid var(--mdg-brand);
    border-radius: 16px;
  }
  .social-panel {
    padding: 18px;
    border: 1px solid var(--mdg-line);
    background: var(--mdg-page);
  }
  .social-actions { gap: 10px; }
  .social-button:not(.secondary) { min-height: 54px; font-size: 16px; }
  .layout .seller-box { border-inline-start: 4px solid var(--mdg-brand); }
}

@media (max-width: 760px) {
  .nav .nav-container { gap: 2px; }
  .hero { padding-block: 34px; }
  .ads .ad-card { border-radius: 15px; }
  .ads .ad-image { height: clamp(150px, 43vw, 190px); }
  .layout > .box:last-child { border-top: 4px solid var(--mdg-brand); }
  .layout h1 { padding-inline-start: 11px; border-inline-start: 4px solid var(--mdg-brand); }
  .layout .price { min-height: 68px; border-inline-start: 5px solid var(--mdg-brand); font-size: 30px; }
}

/* MarketDG category artwork: scoped to home category cards only. */
.categories .category {
  min-height: 170px;
  padding: 10px 12px 13px;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  background: #fff;
  text-align: center;
}
.categories .category-icon {
  width: 128px;
  height: 128px;
  flex: 0 0 128px;
  display: grid;
  place-items: center;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0;
  line-height: 0;
}
.categories .category-icon::before { content: none !important; display: none !important; }
.categories .category-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  background: #fff;
  filter: none;
}
.categories .category-name {
  width: 100%;
  color: #20332c;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}
body.dark-theme .categories .category { background: #fbfcfa !important; border-color: #e5ebe6 !important; }
body.dark-theme .categories .category-name { color: #20332c !important; }
@media (max-width: 760px) {
  .categories .category { min-height: 150px; padding: 7px 8px 10px; gap: 1px; }
  .categories .category-icon { width: 94px; height: 94px; flex-basis: 94px; }
  .categories .category-name { font-size: 11px; }
}