/* ==========================================================================
   ARXON - phone layout
   Linked after arxon-responsive.css on every page, so it is the last word.
   Desktop and tablet are untouched: every rule sits inside a phone query.

   The problem it solves: below 768px every grid collapsed to one column of
   desktop-sized cards with desktop padding, so the homepage ran to ~17,400px
   (about 20 screens) and the products page showed one product per screen.
   The fixes are density, not redesign: two-up grids where the content is
   short, icon-beside-text rows where it is long, tighter section spacing.

   !important appears where the page's own layer already uses it (card body
   copy is forced to 16px !important site-wide); without it nothing here
   could win.
   ========================================================================== */

@media (max-width: 767px) {

  /* ---------- 1. Section rhythm ----------
     48-80px above and below every section is a desktop measure. */
  .why-choose, .vision-mission, .product-range, .manufacturing-section,
  .sdr-stats-section, .sdr-trust-section, .sdr-enquiry-section,
  .sdr-products-section, .sdr-info-section,
  .about-page section, .arx-sec, .arx-band, .arx-cta,
  .axv-intro, .axv-ingr, .axv-details, .axv-fr, .axv-faq, .axv-rel {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  .axv-uses { padding-bottom: 44px !important; }
  .sdr-form-section { padding-bottom: 48px !important; }

  /* ---------- 2. Homepage: "Why Partner With ARXON?" ----------
     8 cards at ~290px each = 2,400px. Two-up with a smaller icon plate. */
  .features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .features-grid .feature-card {
    padding: 18px 12px 16px !important;
    border-radius: 16px;
  }
  .features-grid .feature-card > i {
    display: flex;
    margin-left: auto; margin-right: auto;
    width: 42px; height: 42px;
    font-size: 1.05rem;
    border-radius: 12px;
    margin-bottom: 10px;
  }
  .features-grid .feature-card h3 {
    font-size: .92rem !important;
    line-height: 1.3;
    margin-bottom: 6px;
  }
  html body .features-grid .feature-card p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* ---------- 3. Homepage: Vision & Mission ---------- */
  .vision-mission .vm-card { padding: 26px 20px !important; }

  /* ---------- 4. Homepage: product portfolio ----------
     Six cards with a full-width illustration each (~500px apiece).
     Illustration moves beside the text as a thumbnail. */
  #product-portfolio .product-grid { gap: 12px !important; }
  #product-portfolio .product-card {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: stretch;
    border-radius: 16px;
  }
  #product-portfolio .product-img {
    aspect-ratio: auto !important;
    height: 100%;
    min-height: 124px;
    border-bottom: 0 !important;
    border-right: 1px solid rgba(11, 61, 46, .07);
    display: flex; align-items: center; justify-content: center;
  }
  #product-portfolio .product-img .pr-art {
    width: 124%; height: auto;
    max-width: none;
  }
  #product-portfolio .pr-index {
    top: 8px !important; left: 8px !important;
    transform: scale(.82); transform-origin: top left;
  }
  #product-portfolio .pr-body { padding: 14px 14px 12px !important; }
  #product-portfolio .pr-body h3 {
    font-size: 1rem !important;
    margin: 0 0 4px !important;
  }
  html body #product-portfolio .product-card p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
    display: -webkit-box;
    -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #product-portfolio .product-link { font-size: .84rem; }

  /* ---------- 5. Homepage: quality process steps ----------
     Icon beside the text instead of stacked above it. */
  .process-steps { gap: 10px !important; }
  .process-steps .step-item {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    padding: 16px 16px !important;
    text-align: left;
  }
  .process-steps .step-icon {
    grid-row: span 2;
    width: 44px !important; height: 44px !important;
    margin: 0 !important;
    font-size: 1rem;
  }
  .process-steps .step-item h4 {
    font-size: .98rem !important;
    margin: 2px 0 4px !important;
  }
  html body .process-steps .step-item p {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }

  /* ---------- 6. Homepage: credential tiles ---------- */
  .sdr-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .sdr-stats-grid .sdr-stat-card {
    padding: 18px 10px !important;
    min-height: 0 !important;
    border-radius: 16px;
  }
  .sdr-stats-grid .sdr-stat-icon { margin-bottom: 6px !important; font-size: 1.1rem; }
  .sdr-stats-grid .sdr-stat-number { font-size: 1.12rem !important; white-space: nowrap; }
  .sdr-stats-grid .sdr-stat-label  { font-size: .74rem !important; line-height: 1.35; }
  .sdr-stats-grid .stat-decoration { display: none; }

  /* ---------- 7. Enquiry forms (home + contact) ----------
     Rows and groups both carried a 20px bottom margin, so the gap between
     fields alternated 20px / 40px. One even 12px step instead. */
  .sdr-form-row { margin-bottom: 0 !important; gap: 0 !important; }
  .sdr-form-group { margin-bottom: 12px !important; }
  .sdr-form-card { padding: 24px 18px !important; }
  .sdr-form-input, .sdr-form-select, .sdr-form-textarea { border-radius: 11px !important; }
  .sdr-checkbox-group { align-items: flex-start !important; margin: 14px 0 16px !important; }
  .sdr-checkbox-group input[type="checkbox"] { flex: 0 0 18px; margin-top: 2px; }
  .sdr-checkbox-group label { line-height: 1.45 !important; }
  .sdr-input-icon textarea ~ i,
  .sdr-input-icon i:has(+ textarea) { top: 24px !important; }

  /* ---------- 8. Products page: two products per row ----------
     One 690px card per screen meant nine screens of scrolling. */
  .products-page .product-grid:not(.is-list) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    max-width: none !important;
  }
  .products-page .product-grid:not(.is-list) .product-card { border-radius: 16px; }
  .products-page .product-grid:not(.is-list) .product-info { padding: 10px 10px 12px !important; }
  .products-page .product-grid:not(.is-list) .product-name {
    font-size: .95rem !important;
    line-height: 1.25;
    margin-bottom: 3px !important;
  }
  .products-page .product-grid:not(.is-list) .product-salt {
    font-size: .72rem !important;
    line-height: 1.35;
    margin-bottom: 6px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .products-page .product-grid:not(.is-list) .product-mrp { font-size: .8rem !important; margin-bottom: 6px !important; }
  .products-page .product-grid:not(.is-list) .product-desc { display: none !important; }
  .products-page .product-grid:not(.is-list) .pp-actions {
    flex-direction: column;
    gap: 6px !important;
  }
  .products-page .product-grid:not(.is-list) .pp-btn {
    padding: 9px 8px !important;
    font-size: .78rem !important;
    min-height: 38px;
  }
  .products-page .product-grid:not(.is-list) .product-category-badge {
    top: 8px !important; left: 8px !important;
    font-size: .6rem !important;
    padding: 4px 9px !important;
    max-width: calc(100% - 56px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .products-page .product-grid:not(.is-list) .pp-zoom {
    top: 8px !important; right: 8px !important;
    width: 32px !important; height: 32px !important;
  }
  /* The price already shows under the name; on a half-width photo the
     long tag covers the product, so it shortens to "MRP ₹225". */
  .products-page .product-grid:not(.is-list) .arx-mrp-tag { bottom: 8px !important; left: 8px !important; padding: 4px 8px; }
  .products-page .product-grid:not(.is-list) .arx-mrp-tag em { display: none; }

  /* List view: an actual list (thumbnail beside text), not a copy of grid. */
  .products-page .product-grid.is-list { gap: 12px !important; max-width: none !important; }
  .products-page .product-grid.is-list .product-card { flex-direction: row !important; }
  .products-page .product-grid.is-list .product-img-container {
    width: 118px !important; aspect-ratio: auto !important;
  }
  .products-page .product-grid.is-list .product-img-container img { height: 100%; object-fit: cover; }
  .products-page .product-grid.is-list .product-info { padding: 12px 12px 12px !important; min-width: 0; }
  .products-page .product-grid.is-list .product-name { font-size: 1rem !important; }
  .products-page .product-grid.is-list .product-desc { display: none !important; }
  .products-page .product-grid.is-list .product-category-badge,
  .products-page .product-grid.is-list .arx-mrp-tag,
  .products-page .product-grid.is-list .pp-zoom { display: none !important; }
  .products-page .product-grid.is-list .pp-btn { padding: 8px 8px !important; font-size: .76rem !important; }

  /* ---------- 9. About page ---------- */
  .about-page .leadership-grid { gap: 14px !important; }
  .about-page .leader-image.func { height: 84px !important; min-height: 0 !important; }
  .about-page .leader-image.func .func-icon { transform: scale(.8); }
  .about-page .leader-content { padding: 16px 16px 18px !important; }
  .about-page .leader-quote { margin-top: 12px !important; padding: 12px 14px !important; }

  .about-page .values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    max-width: none !important;
  }
  .about-page .value-card { height: 232px !important; }
  .about-page .value-face { padding: 16px 12px !important; }
  .about-page .value-front .value-icon { width: 50px !important; height: 50px !important; margin-bottom: 10px !important; font-size: 1.1rem; }
  .about-page .value-front h4 { font-size: .95rem !important; }
  .about-page .value-back h4 { font-size: .88rem !important; margin-bottom: 6px !important; }
  .about-page .value-back p { font-size: .74rem !important; line-height: 1.5 !important; }

  .about-page .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .about-page .why-card { padding: 18px 12px 16px !important; }
  .about-page .why-card .why-icon { width: 46px !important; height: 46px !important; margin-bottom: 10px !important; font-size: 1rem; }
  .about-page .why-card h4 { font-size: .92rem !important; line-height: 1.3; margin-bottom: 4px !important; }
  html body .about-page .why-card p { font-size: 13px !important; line-height: 1.5 !important; }

  .about-page .mission-card { padding: 24px 20px !important; }

  /* ---------- 10. Contact page: info cards as rows ---------- */
  .sdr-info-grid { gap: 12px !important; }
  .sdr-info-card {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    padding: 18px 18px !important;
    text-align: left !important;
  }
  .sdr-info-card .sdr-info-icon {
    grid-row: span 3;
    width: 52px !important; height: 52px !important;
    margin: 0 !important;
    font-size: 1.15rem;
  }
  .sdr-info-card h3 { font-size: 1.05rem !important; margin: 2px 0 4px !important; }
  .sdr-info-card p, .sdr-info-card a { font-size: .9rem !important; line-height: 1.55 !important; margin: 0 !important; }
  .sdr-map-placeholder { height: 240px !important; }

  /* ---------- 11. Certifications page ---------- */
  .arx-statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .arx-stat { padding: 20px 10px !important; }
  .arx-stat b { font-size: 20px !important; white-space: nowrap; }
  .arx-stat i { font-size: 12px !important; letter-spacing: .2px !important; }
  .arx-dgrid, .arx-grid { gap: 14px !important; }
  .arx-card { padding: 22px 18px !important; }
  .arx-card .arx-ico { width: 44px !important; height: 44px !important; margin-bottom: 12px !important; }
  .arx-card p { font-size: .9rem !important; line-height: 1.6 !important; }
  .arx-pgrid { gap: 12px !important; }
  .arx-p { padding: 18px 18px !important; }

  /* ---------- 12. ARXOVITA page: icon beside heading ---------- */
  .axv-grid { gap: 12px !important; }
  .axv-card {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    padding: 16px 16px !important;
  }
  .axv-card .axv-ic { width: 40px !important; height: 40px !important; margin: 0 !important; }
  .axv-card h3 { margin: 0 !important; font-size: 1rem !important; }
  .axv-card p { grid-column: 1 / -1; margin: 8px 0 0 !important; }
  .axv-chips { gap: 7px !important; margin-bottom: 22px !important; }
  .axv-chips li { font-size: .74rem !important; padding: 6px 11px !important; gap: 6px !important; }
  .axv-rel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
  .axv-rel-grid span { padding: 10px 10px 12px !important; font-size: .82rem; line-height: 1.25; }
  .axv-rel-grid small { font-size: .68rem !important; }

  /* ---------- 13. Footer ----------
     1,830px on a phone. Same content, less air between it. */
  .arxf-main { padding-top: 30px !important; padding-bottom: 20px !important; }
  .arxf-grid { gap: 26px !important; }
  .arxf-list { gap: 0 18px !important; }
  .arxf-list a { min-height: 40px !important; }
  .arxf-h { margin-bottom: 8px !important; }
  .arxf-cinfo li + li { margin-top: 12px !important; }
  .arxf-about { font-size: 14px !important; line-height: 1.65 !important; }
  /* The gold button's dark label was being repainted white by the theme's
     link colour: white on pale gold is unreadable. */
  .arxf .arxf-btn-gold, .arxf .arxf-btn-gold:visited { color: #3A2E07 !important; }

  /* ---------- 14. Micro-labels below 11px ---------- */
  .axh__eyebrow, .axh__trust span, .axh__panel-link { font-size: 11.5px !important; }
  .arxf-tag, .arxf-badges span { font-size: 11.5px !important; }
}

/* Narrow Androids (360px and under): keep two-up grids from cramping. */
@media (max-width: 374px) {
  .features-grid .feature-card, .about-page .why-card { padding: 16px 10px 14px !important; }
  .features-grid .feature-card h3, .about-page .why-card h4 { font-size: .86rem !important; }
  #product-portfolio .product-card { grid-template-columns: 96px minmax(0, 1fr); }
  .products-page .product-grid:not(.is-list) { gap: 10px !important; }
  .products-page .product-grid:not(.is-list) .product-name { font-size: .88rem !important; }
  .about-page .value-card { height: 250px !important; }
  .axv-rel-grid small { display: none; }
}

/* The slide-out menu listed the phone number twice (a plain line and a
   pill button). The pill is the better tap target; the line goes. */
@media (max-width: 767px) {
  .mobile-number-display { display: none !important; }
}