/* TEMP MOBILE COMPACT PASS */

/* Storefront overscroll guard — drawers/modals keep their own contain rules. */
html:has(body.v3-storefront),
body.v3-storefront {
  overscroll-behavior-y: none;
}

/* Minicart line bottom row — desktop keeps the original 3-column grid. */
body.v3-storefront[data-storefront="unified"] .minicart .d-mc-bottom {
  display: contents;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-bottom > .qstep {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin-top: 6px;
  width: 105px;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-bottom > .d-mc-prices {
  grid-column: 3;
  grid-row: 1;
}

body.v3-storefront[data-storefront="unified"] .minicart .d-mc-bottom > .d-mc-remove--line {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: end;
  margin-top: 6px;
}

/* DG-MOBILE-CATEGORY-BRAND-02 — enhanced category menu edge geometry (Mark,
   exact values): 6px default, 22px from 561px up, flush (0) at <=560px where
   #v3-cat-select itself carries the 6px padding. Scoped through
   #v3-cat-select so it outranks the base .cat-select-menu 16px offsets. */
body.v3-storefront #v3-cat-select .cat-select-menu {
  left: 6px;
  right: 6px;
}

@media (min-width: 561px) {
  body.v3-storefront #v3-cat-select .cat-select-menu {
    left: 22px;
    right: 22px;
  }
}

@media (max-width: 560px) {
  /* Category selector: remove unnecessary outer horizontal space */
  body.v3-storefront #v3-cat-select {
    padding: 6px;
  }

  body.v3-storefront #v3-cat-select .cat-select-menu {
    left: 0;
    right: 0;
  }

  body.v3-storefront #v3-cat-select > .container {
    padding: 0;
  }

  body.v3-storefront .acct-menu {
    display: none;
  }

  body.v3-storefront #v3-cat-select .cat-select-btn {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Compact product grid: keep two products per row */
  body.v3-storefront[data-storefront="unified"]
  #main .d-catalog[data-density="compact"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* DG-MOBILE-STOREFRONT-POLISH-20 (Mark): the comfortable grid's former two-per-row phone rule is retired — its
     card (.d-pcard2) is now the compact image-left card, one per row (v3-design-overrides.css, section C). */

  /* Homepage two-up promo rows stay two-up */
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"]
  .promo-row[data-per="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Keep modal shell full-size; compact each direct modal column once */
  body.v3-storefront .auth-modal .auth-modal-scroll > .modal-aside,
  body.v3-storefront .auth-modal .auth-modal-scroll > .modal-body,
  body.v3-storefront .hp-info-modal .modal > .modal-body {
    zoom: 0.9;
  }

  /* TEMP: minicart <=560px overrides disabled during layout unification */
  /*
  body.v3-storefront .minicart > .mc-head,
  body.v3-storefront .minicart > .mc-scroll-area,
  body.v3-storefront .minicart > .mc-foot {
    zoom: 0.9;
  }
  */

  /* Footer background stays full width; compact footer content */
  body.v3-storefront .site-footer > .container {
    zoom: 0.9;
  }

  /* TEMP: minicart <=560px overrides disabled during layout unification */
  /*
  body.v3-storefront[data-storefront="unified"] .minicart .d-mc-line {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: start;
  }

  body.v3-storefront[data-storefront="unified"] .minicart .d-mc-media {
    grid-row: 1 / span 2;
  }

  body.v3-storefront[data-storefront="unified"] .minicart .d-mc-info {
    grid-column: 2 / 4;
    grid-row: 1;
  }

  body.v3-storefront[data-storefront="unified"] .minicart .d-mc-bottom {
    display: flex;
    grid-column: 2 / 4;
    grid-row: 2;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-top: 2px;
  }

  body.v3-storefront[data-storefront="unified"] .minicart .d-mc-bottom > .qstep {
    grid-column: auto;
    grid-row: auto;
    align-self: center;
    margin-top: 0;
    flex: none;
  }

  body.v3-storefront[data-storefront="unified"] .minicart .d-mc-bottom > .d-mc-prices {
    grid-column: auto;
    grid-row: auto;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 0;
    min-width: 0;
  }

  body.v3-storefront[data-storefront="unified"] .minicart .d-mc-bottom > .d-mc-remove--line {
    grid-column: auto;
    grid-row: auto;
    align-self: center;
    justify-self: auto;
    margin-top: 0;
    flex: none;
    width: 40px;
    height: 40px;
  }

  body.v3-storefront[data-storefront="unified"] .minicart .d-mc-bottom > .d-mc-remove--line .ico {
    width: 19px;
    height: 19px;
  }
  */
}

/* DG-STOREFRONT-CONSOLIDATION-CORRECTION-11A (Mark) — the ONE phone zoom owner: page content, the mobile menu
   drawer body, the minicart body + foot and the Quick View main column render at 0.9; the header/chrome stays full
   size. Supersedes the former `#main { zoom: 0.85 }`; the 0.85 compensations now divide by 0.9.
   DG-BERRY-HEADER-DRAWER-MUTUAL-CLOSE-18D (Mark): the drawer head joins the drawer body at 0.9.
   DG-MOBILE-STOREFRONT-POLISH-20C (Mark): the canonical phone zoom is now 0.95 (compensations divide by 0.95).
   DG-STOREFRONT-MICRO-POLISH-ADDENDUM-17 (Mark): the 0.95 phone zoom is removed (page content, drawer head / body, minicart body / foot and the
   Quick View main column render at their real size); its compensations below are corrected to plain values. The auth
   dialog column (0.9), the info modal (0.9) and the footer content (0.9) keep their own zoom. */

/* PLT-MOBILE-FORMS-MODALS-SCROLL-15 — iOS focus-zoom guard under the phone zoom (touch devices only).
   iOS Safari zooms into a focused text field whose ON-SCREEN text is below 16px. The auth dialog column and the info
   modal zoom (0.9) shrink the shared 16px field size (--d-field-font-size) to 14.4px on screen, so the editable
   controls inside them get 16px divided by 0.9: exactly 16px on screen again. The page content, drawer, minicart and
   Quick View have no zoom since DG-STOREFRONT-MICRO-POLISH-ADDENDUM-17, so their controls are a plain 16px.
   Text-entry controls only (no checkbox, radio, range, colour, file, button types); nothing larger is reduced (every
   such control here was at most 16px); mouse / trackpad devices and the desktop search field (15px) are unchanged. */
@media (max-width: 560px) and (hover: none) and (pointer: coarse) {
    /* DG-STOREFRONT-MICRO-POLISH-ADDENDUM-17 (Mark): without the 0.95 phone zoom these controls are exactly 16px (was calc(16px / 0.95)). */
    body.v3-storefront #main :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"]), select, textarea),
    body.v3-storefront :is(.drawer-body, .minicart .mc-body, .minicart .mc-foot, [data-qv-dialog], #v3-modal-pack) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"]), select, textarea) {
        font-size: 16px;
    }
    body.v3-storefront .auth-modal .auth-modal-scroll > :is(.modal-aside, .modal-body) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"]), select, textarea),
    body.v3-storefront .hp-info-modal .modal > .modal-body :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"]), select, textarea) {
        font-size: calc(16px / 0.9);
    }
}

/* PLT-MOBILE-FORMS-MODALS-SCROLL-15 — tap controls on touch devices: no double-tap zoom on a button, link or chip
   (rapid taps on steppers, chips and close buttons). `manipulation` keeps panning AND pinch zoom; nothing else on the
   page, no input, no scroll area is restricted. */
@media (hover: none) and (pointer: coarse) {
    body.v3-storefront :is(a, button, summary, label, [role="button"], [role="option"], [role="tab"]) {
        touch-action: manipulation;
    }
}