/* MONOCASO — SEO guide v2/v3: comparison table/cards, trust strip, category teaser, folio cards, size table.
   Fonts/colors match the approved Design canvas (Montserrat, #1D1D1F / #6E6E73 / #E8E8ED / #F5F5F7). */

.mc-gc, .mc-strip, .mc-gteaser, .mc-size-table, .mc-folio { font-family: 'Montserrat', sans-serif; color: #1D1D1F; }
.mc-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- Comparison: desktop table ---- */
.mc-gc { margin: 24px 0 48px; }
.mc-gc-table { width: 100%; border-collapse: collapse; }
.mc-gc-table thead th { text-align: left; padding: 0 8px 18px; font-size: 13px; color: #6E6E73; font-weight: 600; }
.mc-gc-table thead th:first-child { padding-left: 0; }
.mc-gc-th-icon { text-align: center !important; width: 92px; }
.mc-gc-th-w { text-align: right !important; width: 90px; padding-right: 0 !important; }
.mc-gc-table tbody td { padding: 20px 8px; border-bottom: 1px solid #E8E8ED; vertical-align: middle; font-size: 14px; line-height: 1.45; }
.mc-gc-table tbody td:first-child { padding-left: 0; }
.mc-gc-table tbody td:last-child { padding-right: 0; text-align: right; white-space: nowrap; }
.mc-gc-model-row { display: flex; align-items: center; gap: 20px; }
.mc-gc-img { width: 84px; height: 84px; border-radius: 16px; background: #F5F5F7; overflow: hidden; flex-shrink: 0; }
.mc-gc-img img { width: 100%; height: 100%; object-fit: contain; }
.mc-gc-name { display: block; color: #1D1D1F; font-size: 16px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.mc-gc-name:hover { text-decoration: underline; }
.mc-gc-price { margin-top: 4px; font-size: 14px; color: #6E6E73; }
.mc-gc-icon { text-align: center; }
.mc-gc-dash { color: #C7C7CC; font-size: 18px; }

/* ---- Comparison: mobile cards (hidden on desktop) ---- */
.mc-gc-cards { display: none; flex-direction: column; gap: 14px; }
.mc-gc-card { border: 1px solid #E8E8ED; border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.mc-gc-card-top { display: flex; gap: 14px; align-items: center; }
.mc-gc-card-img { width: 72px; height: 72px; border-radius: 14px; background: #F5F5F7; overflow: hidden; flex-shrink: 0; }
.mc-gc-card-img img { width: 100%; height: 100%; object-fit: contain; }
.mc-gc-card-name { display: block; color: #1D1D1F; font-size: 16px; font-weight: 600; text-decoration: none; }
.mc-gc-card-name:hover { text-decoration: underline; }
.mc-gc-card-meta { margin-top: 3px; font-size: 13px; color: #6E6E73; }
.mc-gc-card-line { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; }
.mc-gc-card-line svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; }
.mc-gc-card-line--sub { color: #6E6E73; padding-left: 24px; }
.mc-gc-card-line--sub b { color: #1D1D1F; font-weight: 600; }
.mc-gc-card-cta { display: block; width: 100%; box-sizing: border-box; margin-top: 2px; padding: 12px; border-radius: 999px; background: #1D1D1F; color: #FFFFFF !important; font-size: 14px; font-weight: 600; text-align: center; text-decoration: none !important; }
.mc-gc-card-cta:hover { opacity: .85; }

@media (max-width: 767px) {
  .mc-gc-table { display: none; }
  .mc-gc-cards { display: flex; }
}

/* ---- FAQ accordion ---- */
.mc-faq-item { border-bottom: 1px solid #E8E8ED; padding: 22px 0; font-family: 'Montserrat', sans-serif; }
.mc-faq-item summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; font-size: 17px; font-weight: 600; cursor: pointer; color: #1D1D1F; }
.mc-faq-item summary::-webkit-details-marker { display: none; }
.mc-faq-item summary::marker { content: ''; display: none; }
.mc-faq-item summary::after { content: '+'; font-size: 20px; font-weight: 400; color: #6E6E73; flex-shrink: 0; }
.mc-faq-item[open] summary::after { content: '\2212'; }
.mc-faq-item p { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: #6E6E73; }
@media (max-width: 767px) {
  .mc-faq-item summary { font-size: 15px; }
}

/* ---- Trust strip ----
   .mc-strip is always the last content block before the theme's shared
   footer, which carries its own fixed margin-top: 124px (page.css, sitewide,
   not scoped — not changed here). The negative margin-bottom below pulls
   that fixed gap down to the requested ~64px desktop / ~40px mobile total. */
.mc-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; align-items: center; padding: 48px 0 0; margin: 0 auto -60px; max-width: 1040px; }
.mc-strip__item { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; color: #1D1D1F; text-decoration: none; }
.mc-strip__icon { width: 40px; height: 40px; color: #1D1D1F; }
.mc-strip__icon svg { width: 100%; height: 100%; }
.mc-strip__text { font-size: 17px; line-height: 1.25; font-weight: 600; white-space: nowrap; }
.mc-strip__text br.mc-strip-br { display: none; }
a.mc-strip__item:hover { opacity: .72; }
@media (max-width: 767px) {
  .mc-strip { column-gap: 4px; padding: 28px 8px 0; margin: 0 auto -84px; }
  .mc-strip__item { gap: 10px; }
  .mc-strip__icon { width: 28px; height: 28px; }
  .mc-strip__text { font-size: 12px; line-height: 1.3; letter-spacing: -0.01em; white-space: normal; }
  .mc-strip__text br.mc-strip-br { display: inline; }
}

/* ---- Category teaser ---- */
.mc-gteaser { max-width: 1180px; margin: 72px auto; padding: 0 24px; display: flex; flex-direction: column; align-items: center; gap: 36px; text-align: center; }
.mc-gteaser__head h2 { margin: 0; font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.02em; }
.mc-gteaser__head p { margin: 12px 0 0; font-size: 17px; color: #6E6E73; }
.mc-gteaser__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: 100%; }
.mc-gteaser__photo { display: block; height: 340px; border-radius: 22px; overflow: hidden; background: #F5F5F7; }
.mc-gteaser__photo img { width: 100% !important; height: 100% !important; object-fit: cover; }
.mc-gteaser__link { font-size: 17px; font-weight: 500; color: #1D1D1F; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 767px) {
  .mc-gteaser { margin: 48px auto; gap: 24px; text-align: left; align-items: flex-start; padding: 0 0 0 20px; }
  .mc-gteaser__head { padding-right: 20px; }
  .mc-gteaser__grid { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; width: 100%; padding-right: 20px; }
  .mc-gteaser__photo { flex: 0 0 220px; height: 300px; scroll-snap-align: start; }
  .mc-gteaser__link { padding-left: 0; }
}

/* ---- Size table (Який розмір брати) ---- */
.mc-size-table { width: 100%; border-collapse: collapse !important; margin: 8px 0 0; }
.mc-size-table, .mc-size-table th, .mc-size-table td { border: none !important; }
.mc-size-table thead th { text-align: left; padding: 0 8px 14px 0; font-size: 13px; color: #6E6E73 !important; font-weight: 600; background: transparent !important; }
.mc-size-table tbody td { padding: 16px 8px 16px 0; border-bottom: 1px solid #E8E8ED !important; font-size: 14px; vertical-align: middle; background: transparent !important; }
.mc-size-table thead th:last-child, .mc-size-table tbody td:last-child { text-align: center; padding-right: 0; }
.mc-size-model { display: block; font-weight: 600; }
.mc-size-year { display: block; font-size: 12px; color: #6E6E73; margin-top: 2px; font-weight: 400; }
.mc-size-table tbody td:last-child svg { display: inline-block; vertical-align: middle; }
@media (max-width: 767px) {
  .mc-size-table thead th { font-size: 11px; padding: 0 4px 10px 0; }
  .mc-size-table tbody td { font-size: 12.5px; padding: 12px 4px 12px 0; }
  .mc-size-model { font-size: 13px; }
}

/* ---- Folio cards (macbook-case category: comparison w/ CTA, no backpack) ---- */
.mc-folio { max-width: 1280px; margin: 72px auto; padding: 0 24px; }
.mc-folio__head { text-align: center; margin-bottom: 36px; }
.mc-folio__head h2 { margin: 0; font-size: clamp(28px, 3.4vw, 36px); font-weight: 700; letter-spacing: -0.02em; }
.mc-folio__head p { margin: 12px 0 0; font-size: 16px; color: #6E6E73; }
.mc-folio__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.mc-folio__card { border: 1px solid #E8E8ED; border-radius: 22px; padding: 18px; display: flex; flex-direction: column; }
.mc-folio__imgwrap { display: block; height: 180px; border-radius: 16px; background: #F5F5F7; overflow: hidden; margin-bottom: 14px; }
.mc-folio__imgwrap img { width: 100% !important; height: 100% !important; object-fit: contain; }
.mc-folio__name { display: block; color: #1D1D1F; font-size: 16px; font-weight: 600; text-decoration: none; }
.mc-folio__name:hover { text-decoration: underline; }
.mc-folio__price { margin-top: 2px; font-size: 14px; color: #6E6E73; }
.mc-folio__cta { display: block; margin-top: 14px; padding: 11px; border-radius: 999px; background: #1D1D1F; color: #FFFFFF !important; font-size: 13px; font-weight: 600; text-align: center; text-decoration: none !important; }
.mc-folio__cta:hover { opacity: .85; }
.mc-folio__specs { margin: 16px 0 0; }
.mc-folio__specs > div { padding: 10px 0; border-top: 1px solid #E8E8ED; }
.mc-folio__specs dt { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6E6E73; font-weight: 600; }
.mc-folio__specs dd { margin: 4px 0 0; font-size: 13px; line-height: 1.4; }
.mc-folio__link { display: block; margin: 32px auto 0; width: fit-content; font-size: 16px; font-weight: 500; color: #1D1D1F; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 767px) {
  .mc-folio { margin: 48px auto; padding: 0 0 0 20px; }
  .mc-folio__head { text-align: left; padding-right: 20px; }
  .mc-folio__grid { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-right: 20px; }
  .mc-folio__card { flex: 0 0 240px; scroll-snap-align: start; }
  .mc-folio__link { margin-left: 0; }
}

/* ---- Guide page header (page-id-4277 only) ---- */
@media (max-width: 720px) {
  body.page-id-4277 .banner-contact { height: 190px !important; }
}