/* =====================================================================
   INDIA'S 24 — GLOBAL RESPONSIVE LAYER
   ---------------------------------------------------------------------
   Loaded LAST in headerr.html, so it applies to every page that pulls in
   the shared header (which is every user-facing page).

   DESIGN RULES FOR THIS FILE (please keep them if you extend it):

   1. Every rule lives inside a `@media (max-width: ...)` block.
      Nothing here can change the desktop layout — at >1024px this
      stylesheet is inert.

   2. Selectors are prefixed with `html` (e.g. `html .cart-layout`).
      Page templates define their CSS in in-body `<style>` blocks, which
      come AFTER this <link> in document order and would otherwise win on
      equal specificity. The `html` prefix adds one element to the
      selector so these overrides win on specificity instead of order —
      which avoids scattering `!important` everywhere.

   3. Breakpoints used throughout the site:
        1024px  tablet / small laptop
         768px  mobile landscape + large phones
         480px  standard phones
         360px  small phones

   SECTIONS
     01  Overflow & box-model safety
     02  Media, tables, code, iframes
     03  Forms & tappable targets
     04  Shared navbar / header
     05  Shared footer
     06  Shared cards, sliders & section headers
     07  Shared modals (login, OTP, apply, generic)
     08  Testimonials / promo strip (footer.css widgets)
     09  Generic layout collapse (two-column → one-column)
     10  Page-specific fixes
   ===================================================================== */


/* =====================================================================
   01 — OVERFLOW & BOX-MODEL SAFETY
   The single most common mobile bug on this site is a fixed-width child
   pushing the page wider than the viewport, which creates a horizontal
   scrollbar and shrinks all text. This clamps the document itself.
   ===================================================================== */
@media (max-width: 1024px) {

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Nothing may exceed the viewport width. Applied broadly but weakly
       (element selectors) so any explicit page rule still wins. */
    header,
    footer,
    section,
    article,
    aside,
    main,
    nav,
    div {
        max-width: 100%;
    }

    /* Long unbroken strings (order ids, emails, URLs) are a frequent
       source of overflow inside cards and tables. */
    html p,
    html h1,
    html h2,
    html h3,
    html h4,
    html h5,
    html h6,
    html li,
    html td,
    html th,
    html span,
    html a,
    html label {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}


/* =====================================================================
   02 — MEDIA, TABLES, IFRAMES
   ===================================================================== */
@media (max-width: 1024px) {

    img,
    svg,
    video,
    canvas {
        max-width: 100%;
    }

    /* Maps and embeds are usually authored at a desktop pixel width. */
    html iframe,
    html embed,
    html object {
        max-width: 100%;
    }

    /* Data tables can't reflow, so let them scroll inside their own
       box rather than widening the page. `display:block` is what makes
       overflow-x work on a <table>. */
    html table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Keep cells from collapsing to one word per line inside the
       scroll container. */
    html table th,
    html table td {
        white-space: nowrap;
    }

    /* Opt-out: add class="wrap-cells" to a table whose cells hold prose
       rather than short data values, and it will wrap instead of scroll. */
    html table.wrap-cells th,
    html table.wrap-cells td {
        white-space: normal;
    }
}

@media (max-width: 768px) {

    html table {
        font-size: 13px;
    }

    html table th,
    html table td {
        padding: 8px 10px;
    }
}


/* =====================================================================
   03 — FORMS & TAPPABLE TARGETS
   iOS Safari zooms the viewport whenever a focused input has a
   font-size below 16px, which visually "breaks" otherwise-fine forms.
   ===================================================================== */
@media (max-width: 768px) {

    html input,
    html select,
    html textarea {
        max-width: 100%;
        font-size: 16px;
    }

    /* Textual inputs should fill their row on a phone. Deliberately
       excludes checkbox/radio/submit/button/file so their sizing and
       alignment are untouched. */
    html input[type="text"],
    html input[type="tel"],
    html input[type="email"],
    html input[type="number"],
    html input[type="password"],
    html input[type="search"],
    html input[type="url"],
    html input[type="date"],
    html input[type="time"],
    html input[type="datetime-local"],
    html select,
    html textarea {
        width: 100%;
        box-sizing: border-box;
    }

    /* Minimum comfortable touch target (WCAG 2.5.5 / iOS HIG is 44px). */
    html button,
    html .btn,
    html input[type="submit"],
    html input[type="button"] {
        min-height: 44px;
    }

    /* Buttons sitting in a row should wrap instead of overflowing. */
    html .form-actions,
    html .btn-group,
    html .button-row,
    html .actions {
        flex-wrap: wrap;
    }
}


/* =====================================================================
   04 — SHARED NAVBAR (templates/navbar.html)
   ===================================================================== */
@media (max-width: 768px) {

    /* BUG FIX: `.nav-menu` is absolutely positioned with `top: 0` inside
       `.nav-bottom` (which is `position: sticky`, so it is the containing
       block). The open menu therefore covered the bar it drops out of.
       `top: 100%` anchors it directly beneath the bar. */
    html .nav-menu {
        top: 100%;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 1001;
    }

    /* Below 1024px `.support-box` is hidden and `.nav-menu` is pulled out
       of flow, so `.nav-bottom` is left as an empty strip. Collapse it,
       but keep it rendered — it is the positioning context for the menu
       and the sticky anchor that keeps the menu reachable while
       scrolling. */
    html .nav-bottom {
        min-height: 0;
        border-bottom: 0;
        box-shadow: none;
    }

    html .nav-bottom-container {
        min-height: 0;
        padding: 0;
    }

    /* The search row wraps onto its own line; give it real breathing
       room so the logo and action icons don't get crushed. */
    html .nav-top .nav-container {
        row-gap: 12px;
    }

    html .nav-actions {
        gap: 10px;
    }

    /* Hamburger is the only way to reach the menu at this width, so make
       sure it is a full-size touch target. */
    html .hamburger {
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
    }

    /* Location chip must never push the row wider than the viewport. */
    html .nav-location {
        max-width: 34vw;
        overflow: hidden;
    }
}

@media (max-width: 480px) {

    html .logo img {
        width: 104px;
    }

    html .nav-location {
        max-width: 30vw;
        padding: 7px 9px;
        font-size: 12px;
    }

    html .nav-search {
        height: 42px;
    }

    html .nav-search button {
        width: 46px;
        font-size: 17px;
    }

    html .nav-menu a {
        justify-content: flex-start;
        padding: 13px 20px;
    }

    /* Count bubbles sit outside the icon box; pull them in so they can't
       clip against the screen edge. */
    html #cart-count,
    html #wishlist-count {
        top: -8px;
        right: -9px;
        min-width: 17px;
        height: 17px;
        font-size: 10px;
    }
}

@media (max-width: 360px) {

    html .logo img {
        width: 88px;
    }

    html .nav-location span {
        display: none;
    }

    html .nav-actions {
        gap: 8px;
    }
}


/* =====================================================================
   05 — SHARED FOOTER (static/css/footer.css + templates/footer.html)
   ===================================================================== */
/* NOTE: selectors here are `footer.footer`, not `.footer`. invoice.html
   has its own unrelated `<div class="footer">`, and the element qualifier
   keeps these rules off it. */
@media (max-width: 768px) {

    html footer.footer {
        padding: 36px 16px 16px;
    }

    html footer.footer .footer-container {
        gap: 24px 20px;
    }

    html footer.footer .footer-bottom {
        align-items: center;
    }

    html footer.footer .footer-bottom p {
        margin: 0;
    }

    /* `.designer` holds an inline logo image at width="100". */
    html footer.footer .footer-bottom .designer {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }
}

@media (max-width: 480px) {

    html footer.footer {
        padding: 28px 16px 14px;
        text-align: left;
    }

    html footer.footer .footer-container {
        gap: 22px;
    }

    html footer.footer .footer-logo img {
        width: 72px;
    }

    html footer.footer .footer-col h4 {
        margin-bottom: 10px;
    }
}


/* =====================================================================
   06 — SHARED CARDS, SLIDERS & SECTION HEADERS (static/css/stylee.css)
   ===================================================================== */
@media (max-width: 768px) {

    /* `.section-header .actions` is absolutely positioned at `right: 0`,
       so on a narrow screen the "View all" pill sits on top of the
       centred heading. Return both to normal flow and stack them. */
    html .section-header {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin: 22px 0 18px;
    }

    html .section-header .actions {
        position: static;
        justify-content: center;
    }

    html .section-header h3 {
        font-size: 20px;
        padding-bottom: 6px;
    }

    html .section-header h3 i {
        font-size: 18px;
        padding: 6px;
    }

    html .product-section {
        padding: 20px 12px;
    }

    /* The edge mask eats ~34px per side — too much on a phone. */
    html .card-slider {
        -webkit-mask-image: none;
        mask-image: none;
        gap: 12px;
    }

    /* Cards are horizontally scrolled, so a percentage basis is wrong
       here; pin them to a fixed comfortable width instead. */
    html .product-card {
        flex: 0 0 auto;
        min-width: 200px;
        max-width: 200px;
        min-height: 0;
    }

    html .product-card .image-box {
        height: 160px;
    }

    html .product-card .image-box img,
    html .product-card.green .image-box img {
        height: 160px;
    }

    html .product-title {
        margin: 10px 0 4px;
        font-size: 15px;
    }

    html .product-rating-stars {
        font-size: 20px;
    }

    html .product-card.green .price-box .price {
        font-size: 18px;
    }

    html .product-card.green .short-desc {
        min-height: 0;
        font-size: 12px;
    }

    html .buy-btn {
        width: 100%;
    }

    /* Home slideshow hero. Scoped with `.home-hero` because six other
       pages (privacy_policy, terms_cond, delete_page, app_*, seller_portal)
       use a plain `.hero` for a much shorter banner. */
    html .home-hero {
        height: auto;
        min-height: 300px;
    }

    html .home-hero .hero-slide {
        position: relative;
        min-height: 300px;
    }

    /* Only the first slide takes part in flow; the rest stay stacked on
       top of it, as they do on desktop. */
    html .home-hero .hero-slide:not(:first-child) {
        position: absolute;
        top: 0;
        left: 0;
    }

    html .home-hero .hero-content {
        padding: 0 18px;
    }

    html .search-box form {
        gap: 0;
    }
}

@media (max-width: 480px) {

    html .product-card {
        min-width: 168px;
        max-width: 168px;
        padding: 8px;
    }

    html .product-card .image-box {
        height: 132px;
    }

    html .product-card .image-box img,
    html .product-card.green .image-box img {
        height: 132px;
    }

    html .product-card.green .extra-info span,
    html .product-card.green .brand {
        font-size: 11px;
        padding: 3px 7px;
    }

    html .product-card.green .discount {
        top: 8px;
        right: 8px;
        padding: 5px 8px;
        font-size: 10px;
    }

    html .product-card.green .wishlist-btn {
        top: 8px;
        left: 8px;
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    html .scroll-btn {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
}


/* =====================================================================
   07 — SHARED MODALS
   Covers the OTP/login modal in footer.css, the "apply" modal on the
   home page, and the generic `.modal-box` pattern.
   ===================================================================== */
@media (max-width: 768px) {

    html .overlay {
        padding: 16px;
        align-items: flex-start;
        overflow-y: auto;
    }

    html .modal,
    html .modal-box,
    html .apply-modal-box {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        margin: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    html .form-panel {
        padding: 26px 20px;
        gap: 14px;
    }

    /* Close button needs to clear the content and stay tappable. */
    html .close,
    html .close-btn,
    html .apply-modal-close {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    html .apply-modal {
        padding: 16px;
        align-items: flex-start;
        overflow-y: auto;
    }
}

@media (max-width: 480px) {

    html .modal-title {
        font-size: 1.25rem;
    }

    /* Six 52px boxes plus gaps overflow a 320–375px screen. Let them
       share the row instead of using a fixed width. */
    html .otp-row {
        gap: 7px;
    }

    html .otp-box {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        height: 50px;
        font-size: 1.1rem;
    }

    html .user-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    html .user-card {
        padding: 12px 6px;
    }

    html .user-card .icon {
        font-size: 1.5rem;
    }

    html .form-panel {
        padding: 22px 16px;
    }
}


/* =====================================================================
   08 — TESTIMONIALS + PROMO STRIP (widgets defined in footer.css)
   ===================================================================== */
@media (max-width: 1024px) {

    /* The carousel arrows are pinned at `left/right: -22px`, i.e. outside
       the track — that hangs off-screen once the page is edge-to-edge.
       Pull them inside the viewport. */
    html #ins24-btn-prev {
        left: 2px;
    }

    html #ins24-btn-next {
        right: 2px;
    }
}

@media (max-width: 768px) {

    html #ins24-testi-wrap {
        padding: 44px 16px 40px;
    }

    html #ins24-testi-header {
        margin-bottom: 30px;
    }

    html #ins24-btn-prev,
    html #ins24-btn-next {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    html .ins24-stat {
        padding: 0 20px;
    }

    html .ins24-stat-num {
        font-size: 24px;
    }

    /* Promo strip is a 5-across flex row on desktop. */
    html .promo-section {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding: 16px 12px;
        margin: 16px 12px;
    }

    html .promo-item {
        flex: 0 0 30%;
        padding: 10px 6px;
    }

    html .promo-icon {
        width: 42px;
        height: 42px;
        font-size: 19px;
    }

    html .promo-label {
        font-size: 12px;
    }
}

@media (max-width: 480px) {

    html .ins24-stat {
        padding: 0 14px;
    }

    /* The divider is a 40px vertical rule between stats. Once the stats
       wrap onto two rows it needs to shrink rather than tower over
       them — kept visible, just shorter. */
    html .ins24-stat-div {
        height: 26px;
    }

    html #ins24-stats {
        gap: 18px 0;
    }

    html .promo-item {
        flex: 0 0 45%;
    }
}


/* =====================================================================
   09 — GENERIC LAYOUT COLLAPSE
   Site-wide class names that mean "two or more columns". Collapsing them
   here saves repeating the same media query in ~40 templates.
   ===================================================================== */
@media (max-width: 900px) {

    /* Content + sidebar layouts. */
    html .two-col,
    html .cart-layout,
    html .co-layout,
    html .checkout-layout,
    html .portal-grid,
    html .bp-main-grid,
    html .invoice-layout {
        display: block;
    }

    html .two-col > *,
    html .cart-layout > *,
    html .co-layout > *,
    html .checkout-layout > * {
        min-width: 0;
    }
}

@media (max-width: 768px) {

    /* Stat/metric rows. */
    html .stats-row,
    html .stat-strip,
    html .bp-four-col,
    html .bp-five-col,
    html .applicant-summary-grid,
    html .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Content grids that are safe to run 2-up on a phone. */
    html .category-grid,
    html .ql-grid,
    html .grid-2,
    html .grid-3,
    html .info-grid,
    html .rights-grid,
    html .contact-grid,
    html .data-grid,
    html .reviews-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    /* Any grid child needs `min-width: 0` or its content sets a floor
       wider than the column and the grid overflows. */
    html [class*="grid"] > * {
        min-width: 0;
    }
}

@media (max-width: 560px) {

    html .stats-row,
    html .stat-strip,
    html .category-grid,
    html .ql-grid,
    html .grid-2,
    html .grid-3,
    html .info-grid,
    html .rights-grid,
    html .contact-grid,
    html .data-grid,
    html .reviews-grid,
    html .bp-four-col,
    html .bp-five-col {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------------
   Hooks for layouts declared with inline `style="display:grid;..."`.
   The portal and profile templates build several grids inline, and an
   inline declaration outranks any normal stylesheet rule — `!important`
   is the only thing that can reach them, so it is used deliberately
   here and nowhere else in this file.

     .rgrid-2     a two-column form/info row  (1fr 1fr)
     .rgrid-side  a content + sidebar split   (1fr 340px, 250px 1fr, …)
   ------------------------------------------------------------------- */
@media (max-width: 900px) {

    html .rgrid-side {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 600px) {

    html .rgrid-2 {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* `.rgrid-cards` — an inline auto-fit card grid whose 260px minimum is
   wider than the usable width of a 320px phone once page padding is
   subtracted, which would push the grid past the viewport edge. */
@media (max-width: 480px) {

    html .rgrid-cards {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
    }
}

/* `.rflex-wrap` — an inline `display:flex; justify-content:space-between`
   header row (title on the left, actions on the right) that has no
   `flex-wrap`, so its two halves squeeze instead of stacking. */
@media (max-width: 600px) {

    html .rflex-wrap {
        flex-wrap: wrap !important;
        gap: 10px;
    }
}

/* `.rhero` — the portal welcome banner: an inline flex row with a
   percentage top margin and generous desktop padding. */
@media (max-width: 768px) {

    html .rhero {
        flex-wrap: wrap !important;
        gap: 14px;
        padding: 20px 18px !important;
        margin-top: 14px !important;
        margin-bottom: 20px !important;
    }

    html .rhero > div {
        text-align: left !important;
    }
}


/* =====================================================================
   10 — PAGE-SPECIFIC FIXES
   Only for pages whose own stylesheet has no mobile rules of its own.
   ===================================================================== */

/* ---- product_category.html -------------------------------------- */
@media (max-width: 768px) {

    html .vet-section {
        padding: 24px 12px;
        margin-top: 16px;
    }

    html .vet-section h2 {
        font-size: 21px;
    }

    html .main-heading {
        font-size: 22px;
        letter-spacing: 0.3px;
    }

    html .main-heading i {
        font-size: 19px;
        padding: 6px;
        margin-right: 6px;
    }

    /* Two real columns beat one stretched card on a phone.
       Scoped to `.vet-section` — seller_portal.html has its own,
       differently-tuned `.product-grid`. */
    html .vet-section .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
        margin-top: 18px;
    }

    /* The card is centred with `margin: auto` and capped at 220px, which
       leaves a gap beside it once the column is narrower than that. */
    html .vet-section .product-grid .card {
        max-width: none;
    }

    html .vet-section .pagination {
        margin-top: 24px;
    }
}

@media (max-width: 360px) {

    html .vet-section .product-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- search_results.html ---------------------------------------- */
@media (max-width: 768px) {

    html .search-results-page {
        padding: 22px 12px 40px;
        margin-top: 14px;
    }

    html .search-results-page .results-heading {
        font-size: 20px;
    }

    html .search-results-page .results-subheading {
        font-size: 14px;
        margin-bottom: 20px;
    }

    html .search-results-page .results-section {
        margin-bottom: 30px;
    }

    html .search-results-page .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    html .search-results-page .card-body {
        padding: 12px 13px;
    }

    html .search-results-page .card-title {
        font-size: 14px;
    }

    html .search-results-page .card-price {
        font-size: 16px;
    }
}

/* buy_pashu.html carries its own breakpoints — its `.category-card` and
   `.product-section-container` class names are shared with index.html,
   so scoping them from here would be fragile. */

/* ---- contactus.html ---------------------------------------------- */
@media (max-width: 768px) {

    html .contact-hero {
        height: auto;
        min-height: 220px;
        padding: 54px 16px;
        background-position: center;
    }

    html .contact-hero h1 {
        font-size: 30px;
    }

    html .contact-hero p {
        font-size: 15px;
    }

    html .contact-box {
        padding: 20px 16px;
    }

    html .info-box {
        padding: 18px 14px;
    }

    /* The map iframe is 320px tall and full-bleed on mobile. */
    html .contact-page iframe {
        height: 240px;
        border-radius: 12px;
    }
}

@media (max-width: 480px) {

    html .contact-hero h1 {
        font-size: 25px;
    }
}

/* ---- product / livestock / equipment detail pages ----------------
   utpad_details.html, upkaran/upkaran_details.html and
   live_stock/live_stock_details.html are built from the same markup and
   share these class names. Each already collapses `.product-container`
   to one column at 900px; what was missing was a phone tier. */
@media (max-width: 768px) {

    html .product-container {
        margin-top: 16px;
        padding: 0 14px;
        gap: 24px;
    }

    /* Only wrapping is set here — `.breadcrumb` is also used by cart.html
       with its own padding, and this rule would outrank it. */
    html .breadcrumb {
        flex-wrap: wrap;
    }

    html .thumb-strip {
        justify-content: flex-start;
        gap: 8px;
    }

    html .thumb {
        width: 58px;
        height: 58px;
    }

    /* Price banner: value on the left, badges on the right. Give each
       half the full row so neither gets clipped. */
    html .price-block {
        padding: 16px 16px;
        gap: 10px;
    }

    html .price-left .current-price {
        font-size: 1.6rem;
    }

    html .price-right {
        align-items: flex-start;
    }

    html .top-actions button {
        padding: 8px 14px;
        font-size: 12px;
    }

    /* Buy / Add-to-cart: stack so both are full-width thumb targets. */
    html .cta-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    html .cta-row .btn-buy,
    html .cta-row .btn-cart {
        flex: 1 1 100%;
        padding: 14px;
    }

    /* (`.divider` is deliberately left alone: reg_seller.html uses the
       same class name for a 1px rule with different spacing.) */

    /* The toast is `white-space: nowrap` and centred — a long message
       runs off both edges of a phone. */
    html .toast {
        width: calc(100% - 32px);
        max-width: 420px;
        white-space: normal;
        text-align: center;
        bottom: 20px;
    }
}

@media (max-width: 480px) {

    html .thumb {
        width: 50px;
        height: 50px;
    }

    html .price-left .current-price {
        font-size: 1.4rem;
    }

    html .short-desc {
        font-size: 13px;
        padding: 9px 12px;
    }
}

/* ---- login pages -------------------------------------------------
   farmer_login, Employer/Employer_login, seller/seller_login and
   vetnary/doctor_login are four copies of the same layout and share
   these class names, so one block covers all of them. None had any
   breakpoint of its own. */
@media (max-width: 768px) {

    html .login-section {
        min-height: 0;
        padding: 26px 16px 44px;
        align-items: flex-start;
    }

    html .login-card {
        margin-top: 18px;
        padding: 30px 22px;
        border-radius: 16px;
    }

    /* The decorative circles are 380px and 260px wide and sit at negative
       offsets — on a phone they dominate the screen. Scaled down, still
       visible. `.login-section` already clips them with overflow:hidden,
       so they cannot widen the page. */
    html .circle1 {
        width: 210px;
        height: 210px;
        top: -60px;
        right: -60px;
    }

    html .circle2 {
        width: 150px;
        height: 150px;
        bottom: -45px;
        left: -45px;
    }

    html .leaf-svg {
        top: 16px;
        left: 16px;
        width: 110px;
        height: 110px;
    }

    html .field-input {
        font-size: 16px;
    }

    html .login-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 380px) {

    html .login-card {
        padding: 24px 16px;
    }

    html .portal-badge {
        font-size: 10.5px;
        padding: 4px 10px;
    }
}

/* ---- legal / policy pages ----------------------------------------
   privacy_policy, terms_cond, app_privacy_policy, app_term_condition and
   delete_page share one layout. `.legal-hero` is on the hero of each so
   these rules can't reach seller_portal.html's unrelated `.hero`. */
@media (max-width: 768px) {

    /* The hero is a fixed `29vh` with `4rem` of padding — on a short
       phone viewport the badge, title and meta row overflow it. */
    html .legal-hero {
        height: auto;
        margin-top: 14px;
        padding: 2.4rem 1.1rem 2rem;
    }

    html .legal-hero h1 {
        font-size: 1.65rem;
    }

    html .legal-hero p {
        font-size: .88rem;
    }

    html .legal-hero .hero-meta {
        gap: .5rem 1rem;
        font-size: .74rem;
    }

    html .page-wrap {
        padding: 1.8rem 1.1rem 3rem;
        gap: 1.4rem;
    }

    /* Un-sticking the table of contents is already handled by each page;
       this just keeps it from eating the top of the screen. */
    html .toc {
        max-height: 40vh;
        overflow-y: auto;
    }
}

/* ---- profile pages (buyer / seller / farmer / employer / vet) ----
   These share an inline `edit-container` with `max-width: 800px` and a
   percentage top margin. */
@media (max-width: 768px) {

    html .edit-container {
        max-width: 100%;
        margin-top: 18px !important;
        padding: 0 12px;
        box-sizing: border-box;
    }

    html .profile-grid,
    html .profile-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* invoice.html carries its own breakpoints (it is a standalone document
   with a 6-column line-item grid that needed a bespoke stacked layout). */

/* ---- chatbot launcher (templates/chatbot.html) --------------------
   The widget carries its own breakpoints; the only thing needed here is
   keeping page content clear of the floating launcher so the last row of
   a list or the footer's last link is never covered by it. */
@media (max-width: 768px) {

    html footer.footer .footer-bottom {
        padding-bottom: 64px;
    }
}