/* =========================================================
   Customer doctor pages (All doctors, Near me, Doctor profile).
   Same tokens as the customer dashboard: white / black / graphite,
   teal as the single accent. Flat, full width, no hover motion.
   ========================================================= */
.dc {
    --black: #0b0c0d;
    --graphite: #2e3338;
    --graphite-2: #5b6168;
    --graphite-3: #8b9197;
    --line: #e5e7e9;
    --soft: #f6f7f8;
    --teal: #0f766e;
    --teal-soft: #e8f5f3;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    color: var(--black);
}

/* Header */
.dc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.dc-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--graphite-2); text-decoration: none; margin-bottom: 8px; }
.dc-back:hover { color: var(--black); }
.dc-title { font-size: 24px; font-weight: 700; margin: 0; color: var(--black); letter-spacing: -.2px; }
.dc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 8px; font-size: 13.5px; color: var(--graphite-2); }
.dc-meta span { display: inline-flex; align-items: center; gap: 7px; }
.dc-meta i { color: var(--graphite-3); font-size: 12px; }
.dc-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Buttons */
.dc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600; text-decoration: none; border: 1px solid var(--line); background: #fff; color: var(--black); cursor: pointer; transition: border-color .15s, background .15s; }
.dc-btn:hover { border-color: var(--graphite-3); color: var(--black); }
.dc-btn.dark { background: var(--black); border-color: var(--black); color: #fff; }
.dc-btn.dark:hover { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.dc-btn:disabled { opacity: .6; cursor: progress; }
.dc-btn i { color: inherit; font-size: 12.5px; }
.dc-link { font-size: 13px; font-weight: 600; color: var(--teal); text-decoration: none; white-space: nowrap; }
.dc-link:hover { color: var(--black); }

/* Filter bar: one bordered strip */
.dc-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.dc-search { flex: 1 1 260px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; background: #fff; }
.dc-search i { color: var(--graphite-3); font-size: 13px; }
.dc-search input { border: 0; outline: 0; width: 100%; padding: 9px 0; font-size: 13.5px; background: transparent; color: var(--black); }
.dc-select { flex: 0 1 180px; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; color: var(--black); background: #fff; min-width: 0; }
.dc-select:disabled { color: var(--graphite-3); background: var(--soft); }
.dc-search:focus-within, .dc-select:focus { border-color: var(--teal); outline: 0; }
.dc-count { font-size: 13px; color: var(--graphite-2); margin-left: auto; white-space: nowrap; }
.dc-count strong { color: var(--black); }

/* Doctor grid & card */
.dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 16px; }
.dc-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.dc-card:focus-within { border-color: var(--teal); }
.dc-card-top { display: flex; gap: 14px; align-items: center; padding: 18px 18px 14px; }
.dc-avatar { position: relative; flex: 0 0 60px; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: var(--soft); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; color: var(--graphite-2); }
.dc-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.dc-name { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--black); font-family: inherit; }
.dc-name a { color: inherit; text-decoration: none; }
/* The name link covers the whole card, so a click anywhere opens the profile */
.dc-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 12px; }
.dc-name a:focus-visible { outline: none; }
.dc-spec { font-size: 13px; color: var(--graphite-2); margin-top: 2px; }
.dc-loc { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--graphite-3); margin-top: 4px; min-width: 0; }
.dc-loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-near { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--teal); background: var(--teal-soft); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }

.dc-fees { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dc-fee { padding: 12px 18px; }
.dc-fee + .dc-fee { border-left: 1px solid var(--line); }
.dc-fee small { display: block; font-size: 12px; color: var(--graphite-2); }
.dc-fee strong { display: block; font-size: 17px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.dc-fee.member strong { color: var(--teal); }
.dc-fee em { font-style: normal; font-size: 11.5px; color: var(--teal); font-weight: 600; }

.dc-services { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 18px 0; }
.dc-chip { font-size: 12px; font-weight: 500; color: var(--graphite); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dc-chip.more { color: var(--graphite-3); }
.dc-services { align-items: center; }
.dc-services-lbl { width: 100%; font-size: 11.5px; font-weight: 600; color: var(--graphite-3); text-transform: uppercase; letter-spacing: .4px; }
.dc-services-none { font-size: 12.5px; color: var(--graphite-3); }
.dc-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 16px; margin-top: auto; }
.dc-card-foot .dc-note { font-size: 12.5px; color: var(--graphite-3); }
/* Links inside the card sit above the stretched link */
.dc-card-foot a, .dc-card-foot button { position: relative; z-index: 2; }

/* Empty / status */
.dc-empty { text-align: center; padding: 48px 20px; border: 1px dashed var(--line); border-radius: 12px; color: var(--graphite-2); background: #fff; }
.dc-empty i { font-size: 28px; color: var(--graphite-3); display: block; margin-bottom: 10px; }
.dc-empty h3 { font-size: 16px; font-weight: 700; color: var(--black); margin: 0 0 4px; font-family: inherit; }
.dc-empty p { margin: 0; font-size: 13.5px; }
.dc-status { display: none; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 10px; font-size: 13.5px; border: 1px solid var(--line); background: var(--soft); color: var(--graphite); }
.dc-status.show { display: flex; }
.dc-status i { margin-top: 3px; color: var(--graphite-3); }
.dc-status.ok { background: var(--teal-soft); border-color: #c6e6e1; color: var(--black); }
.dc-status.ok i { color: var(--teal); }

/* City picker (Near me) */
.dc-cities { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-city { border: 1px solid var(--line); background: #fff; color: var(--graphite); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 500; cursor: pointer; }
.dc-city small { color: var(--graphite-3); margin-left: 4px; }
.dc-city.active { background: var(--black); border-color: var(--black); color: #fff; }
.dc-city.active small { color: rgba(255,255,255,.65); }

/* Sections (profile) */
.dc-sec { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.dc-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.dc-sec-title { font-size: 15px; font-weight: 700; margin: 0; color: var(--black); font-family: inherit; }
.dc-sec-sub { font-size: 12.5px; color: var(--graphite-3); }
.dc-sec-body { padding: 18px 20px; }

/* Profile header */
.dc-profile { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 320px); gap: 24px; align-items: center; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.dc-profile .dc-avatar { flex-basis: 112px; width: 112px; height: 112px; border-radius: 12px; font-size: 32px; }
.dc-profile .dc-name { font-size: 24px; }
.dc-profile-fees { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.dc-profile-fees .dc-fees { border: 0; }
.dc-profile-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 12px; border-top: 1px solid var(--line); }
.dc-profile-actions .dc-btn { flex: 1; }
@media (max-width: 1100px) { .dc-profile { grid-template-columns: auto minmax(0, 1fr); } .dc-profile-fees { grid-column: 1 / -1; } }
@media (max-width: 560px) { .dc-profile { grid-template-columns: 1fr; } .dc-profile .dc-avatar { width: 88px; height: 88px; } }

.dc-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
@media (max-width: 1100px) { .dc-cols { grid-template-columns: minmax(0, 1fr); } }
.dc-side { display: flex; flex-direction: column; gap: 24px; }

.dc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dc-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--graphite-2); padding: 10px 20px; background: var(--soft); border-bottom: 1px solid var(--line); }
.dc-table td { padding: 13px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.dc-table tr:last-child td { border-bottom: 0; }
.dc-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dc-table .member { color: var(--teal); font-weight: 700; }
.dc-table .desc { display: block; font-size: 12.5px; color: var(--graphite-3); margin-top: 2px; }

.dc-map { display: block; width: 100%; height: 240px; border: 0; background: var(--soft); }
.dc-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; color: var(--graphite); }
.dc-facts li { display: flex; gap: 10px; align-items: flex-start; }
.dc-facts i { width: 16px; text-align: center; color: var(--graphite-3); margin-top: 3px; }
.dc-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; color: var(--graphite); }
.dc-steps li { counter-increment: s; display: flex; gap: 12px; align-items: flex-start; }
.dc-steps li::before { content: counter(s); flex: 0 0 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); color: var(--teal); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

@media (max-width: 640px) {
    .dc-select { flex: 1 1 140px; }
    .dc-count { margin-left: 0; }
    .dc-table th, .dc-table td { padding-left: 14px; padding-right: 14px; }
}

/* Whole doctor card opens the profile; teal border shows it's clickable */
.dc-card:hover { border-color: var(--teal); }
.dc-card:hover .dc-link { color: var(--teal); }

/* ---------- Doctor directory: summary strip and photo-led cards ---------- */
.dc-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.dc-sum { padding: 18px 22px; border-left: 1px solid var(--line); margin-left: -1px; }
.dc-sum-lbl { font-size: 13px; color: var(--graphite-2); }
.dc-sum-val { font-size: 26px; font-weight: 700; margin-top: 6px; letter-spacing: -.3px; color: var(--black); font-variant-numeric: tabular-nums; }
.dc-sum-val.teal { color: var(--teal); }
.dc-sum-sub { font-size: 12.5px; color: var(--graphite-3); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dc-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 20px; }
.dc-grid .dc-card { overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.dc-grid .dc-card:hover { box-shadow: 0 10px 28px -18px rgba(11, 12, 13, .35); }
/* Photo on top, details underneath */
.dc-grid .dc-card-top { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.dc-grid .dc-avatar { flex: none; width: 100%; height: 210px; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); background: var(--teal-soft); color: var(--teal); font-size: 46px; letter-spacing: 1px; }
.dc-grid .dc-avatar img { object-position: center 18%; }
.dc-grid .dc-card-top > div:last-child { padding: 16px 18px 14px; }
.dc-grid .dc-name { font-size: 17px; }
.dc-grid .dc-spec { color: var(--teal); font-weight: 600; font-size: 12.5px; margin-top: 3px; }
.dc-grid .dc-fees { margin: 0 18px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.dc-grid .dc-fee { padding: 10px 14px; }
.dc-grid .dc-fee.member { background: var(--teal-soft); }
.dc-grid .dc-services { padding: 12px 18px 0; }
.dc-grid .dc-card-foot { padding: 16px 18px 18px; }


/* "View profile" reads as a button (the whole card is the link) */
.dc-view { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; background: var(--black); color: #fff; font-size: 13px; font-weight: 600; transition: background .2s; }
.dc-card:hover .dc-view { background: var(--teal); }
@media (max-width: 560px) { .dc-grid .dc-avatar { height: 190px; } .dc-sum { padding: 14px 16px; } .dc-sum-val { font-size: 22px; } }

/* "Verified" badge on every partner doctor (all doctors are checked before they're listed) */

/* Doctor photos on cards and the profile: the whole photo always fits the frame (never cropped);
   a blurred copy of the same photo fills the space around it */
.dc-avatar .dc-photo-bg { position: absolute; inset: -16px; width: calc(100% + 32px); height: calc(100% + 32px); object-fit: cover; filter: blur(16px); opacity: .55; }
.dc-grid .dc-avatar img:not(.dc-photo-bg), .dc-profile .dc-avatar img:not(.dc-photo-bg) { z-index: 1; object-fit: contain; object-position: center; }
.dc-grid .dc-avatar { background: var(--soft); }

/* Verified badge next to the doctor's name, like X (Twitter): blue scalloped badge, white tick */
.dc-badge {
    display: inline-block; width: 18px; height: 18px; margin-left: 6px; vertical-align: -2px; flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath fill='%231D9BF0' d='M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816z'/%3E%3Cpath fill='white' d='M9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dc-profile .dc-name .dc-badge { width: 24px; height: 24px; vertical-align: -3px; }

/* View services: button on each card and the pop-up it opens */
.dc-svc-btn { position: relative; z-index: 2; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--teal); background: var(--teal-soft); color: var(--teal); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.dc-svc-btn:hover { background: var(--teal); color: #fff; }
.dc-svc-btn:hover .dc-svc-count { background: #fff; color: var(--teal); }
.dc-svc-btn:disabled { border-color: var(--line); background: var(--soft); color: var(--graphite-3); cursor: default; }
.dc-svc-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--teal); color: #fff; font-size: 11.5px; line-height: 18px; }

.svc-modal { width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 680px); padding: 0; border: 1px solid #e5e7e9; border-radius: 14px; color: #0b0c0d; box-shadow: 0 24px 60px -20px rgba(0,0,0,.35); overflow: hidden; }
.svc-modal[open] { display: flex; flex-direction: column; }
.svc-modal::backdrop { background: rgba(11,12,13,.45); }
.svc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid #e5e7e9; }
.svc-eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #0f766e; }
.svc-head h2 { margin: 2px 0 0; font-size: 18px; font-weight: 700; }
.svc-close { width: 34px; height: 34px; flex: none; border: 1px solid #e5e7e9; border-radius: 8px; background: #fff; color: #2e3338; cursor: pointer; }
.svc-close:hover { border-color: #8b9197; }
.svc-list { list-style: none; margin: 0; padding: 4px 20px; overflow-y: auto; }
.svc-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #e5e7e9; }
.svc-row:last-child { border-bottom: 0; }
.svc-name { font-size: 14.5px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.svc-fees { display: grid; justify-items: end; text-align: right; white-space: nowrap; }
.svc-fees s { font-size: 12px; color: #8b9197; }
.svc-fees strong { font-size: 15px; color: #0f766e; }
.svc-fees small { font-size: 11px; color: #8b9197; }
.svc-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; border-top: 1px solid #e5e7e9; background: #f6f7f8; font-size: 12.5px; color: #5b6168; }
.svc-foot .dc-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600; text-decoration: none; background: #0b0c0d; color: #fff; border: 1px solid #0b0c0d; }
@media (max-width: 520px) { .svc-foot { flex-direction: column; align-items: stretch; text-align: center; } }

/* Card actions in one row: View profile | Services */
.dc-actions-row { gap: 8px; }
.dc-actions-row .dc-svc-btn, .dc-actions-row .dc-view { flex: 1 1 0; min-width: 0; width: auto; justify-content: center; padding: 9px 10px; white-space: nowrap; }
.dc-actions-row .dc-view { text-decoration: none; position: relative; z-index: 2; }
.dc-actions-row .dc-view:hover { color: #fff; }
/* Directions: round button pinned to the card's top-right corner (over the photo) */
.dc-dir { position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--teal); text-decoration: none; box-shadow: 0 4px 14px rgba(11,12,13,.18); transition: background .15s, color .15s; }
.dc-dir:hover { background: var(--teal); color: #fff; }

/* Always in the middle of the screen, whatever margins the layout resets */
.svc-modal { position: fixed; inset: 0; margin: auto; height: fit-content; }

/* ---------- Advisory Panel: portrait profile cards ---------- */
.adv-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--teal); margin-bottom: 6px; }
.adv-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--teal); }
.adv-intro { margin: 6px 0 0; max-width: 620px; font-size: 14px; line-height: 1.55; color: var(--graphite-2); }
.adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.adv-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.adv-card:focus-within { border-color: var(--teal); }
.adv-photo { position: relative; aspect-ratio: 4 / 4.2; background: linear-gradient(160deg, var(--teal-soft), var(--soft)); display: flex; align-items: center; justify-content: center; }
.adv-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.adv-initials { font-size: 40px; font-weight: 700; color: var(--teal); letter-spacing: 1px; }
.adv-tag { position: absolute; left: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--teal); font-size: 11.5px; font-weight: 700; box-shadow: 0 1px 4px rgba(11,12,13,.12); }
.adv-body { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 4px; }
.adv-name { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.2px; color: var(--black); font-family: inherit; }
.adv-name a { color: inherit; text-decoration: none; }
.adv-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 16px; }
.adv-name a:focus-visible { outline: none; }
.adv-spec { font-size: 13px; font-weight: 600; color: var(--teal); margin-bottom: 4px; }
.adv-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--graphite-2); min-width: 0; }
.adv-line i { width: 14px; color: var(--graphite-3); font-size: 12px; text-align: center; }
.adv-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.adv-foot { margin-top: auto; padding: 14px 18px 16px; }
.adv-view { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 9px 14px; border-radius: 8px; background: var(--teal); color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.adv-view:hover { background: #0b5f58; color: #fff; }
.adv-view i { font-size: 11px; }
@media (max-width: 520px) {
    .adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .adv-body { padding: 12px 12px 2px; }
    .adv-name { font-size: 14.5px; }
    .adv-spec { font-size: 12px; }
    .adv-chips { display: none; }
    .adv-tag { left: 8px; bottom: 8px; font-size: 10px; padding: 4px 8px; }
    .adv-foot { padding: 10px 12px 12px; }
    .adv-view { font-size: 12.5px; padding: 8px 10px; }
}