/* CAT01 order-panel density adjustment. */
@media (min-width: 1024px) {
  /* Keep enough room for at least five compact product rows. */
  aside > div:nth-child(2) {
    min-height: 310px !important;
  }

  /* Compress the fixed checkout area below the scrolling product list. */
  aside > div:nth-child(3) {
    padding-bottom: 12px !important;
  }

  aside > div:nth-child(3) > div:first-child {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  aside > div:nth-child(3) label {
    margin-top: 5px !important;
    margin-bottom: 4px !important;
    line-height: 1.25 !important;
  }

  aside > div:nth-child(3) input[type="text"],
  aside > div:nth-child(3) select {
    min-height: 36px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  /* The only textarea in the desktop order panel is the optional remarks field. */
  aside textarea {
    height: 38px !important;
    min-height: 38px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    resize: none !important;
  }

  /* Compact selected-product rows so more of the order remains visible. */
  aside > div:nth-child(2) > div > div {
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  aside > div:nth-child(2) > div > div > img:first-child,
  aside > div:nth-child(2) > div > div > div:first-child {
    width: 46px !important;
    height: 46px !important;
  }

  #cat01-order-confirmation-notice,
  .cat01-order-confirmation-notice {
    margin-top: 7px !important;
    font-size: 9.5px !important;
    line-height: 1.35 !important;
  }

  #cat01-terms-consent,
  .cat01-terms-consent {
    gap: 7px !important;
    margin: 8px 0 2px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  #cat01-order-method-guide,
  .cat01-order-method-guide {
    margin-top: 7px !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  #cat01-order-method-guide a,
  .cat01-order-method-guide a {
    margin-top: 3px !important;
  }

  #cat01-order-method-guide + div,
  .cat01-order-method-guide + div {
    margin-top: 9px !important;
  }

  #cat01-order-method-guide + div button,
  .cat01-order-method-guide + div button {
    min-height: 40px !important;
  }
}

@media (max-width: 1023px) {
  /* Mobile order drawer: compact the nested order panel and its rows. */
  aside {
    padding: 14px !important;
  }

  aside > div:first-child {
    padding-bottom: 8px !important;
  }

  aside > div:first-child h2 {
    font-size: 20px !important;
  }

  aside > div:nth-child(2) > div > div {
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  aside > div:nth-child(2) > div > div > img:first-child,
  aside > div:nth-child(2) > div > div > div:first-child {
    width: 44px !important;
    height: 44px !important;
  }

  aside > div:nth-child(3) > div:first-child {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  aside > div:nth-child(3) label {
    margin-top: 6px !important;
    margin-bottom: 4px !important;
    line-height: 1.25 !important;
  }

  aside > div:nth-child(3) input[type="text"],
  aside > div:nth-child(3) select {
    min-height: 38px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  aside textarea {
    height: 44px !important;
    min-height: 44px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    resize: none !important;
  }

  #cat01-order-confirmation-notice,
  .cat01-order-confirmation-notice {
    margin-top: 8px !important;
    font-size: 9.5px !important;
    line-height: 1.35 !important;
  }

  #cat01-terms-consent,
  .cat01-terms-consent {
    gap: 7px !important;
    margin: 9px 0 2px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  #cat01-order-method-guide,
  .cat01-order-method-guide {
    margin-top: 7px !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  #cat01-order-method-guide a,
  .cat01-order-method-guide a {
    margin-top: 3px !important;
  }

  #cat01-order-method-guide + div,
  .cat01-order-method-guide + div {
    margin-top: 9px !important;
  }

  #cat01-order-method-guide + div button,
  .cat01-order-method-guide + div button {
    min-height: 40px !important;
  }
}

/* CAT01 mobile typography v5: 10% larger; Terms page is a separate document. */
@media (max-width: 1023px) {
  .text-\[10px\] { font-size: 11px !important; }
  .text-\[11px\] { font-size: 12.1px !important; }
  .text-\[12px\], .text-xs { font-size: 13.2px !important; }
  .text-\[13px\] { font-size: 14.3px !important; }
  .text-\[14px\], .text-sm { font-size: 15.4px !important; }
  .text-\[15px\] { font-size: 16.5px !important; }
  .text-\[16px\], .text-base { font-size: 17.6px !important; }
  .text-\[18px\], .text-lg { font-size: 19.8px !important; }
  .text-\[20px\], .text-xl { font-size: 22px !important; }
  .text-\[24px\], .text-2xl { font-size: 26.4px !important; }
  .text-\[26px\] { font-size: 28.6px !important; }
  .text-\[29px\] { font-size: 31.9px !important; }
  .text-\[30px\] { font-size: 33px !important; }
}

/* CAT01 v7: mobile text below SF Locker and above action buttons, +20%. */
@media (max-width: 1023px) {
  #cat01-order-confirmation-notice,
  .cat01-order-confirmation-notice { font-size: 11.4px !important; }
  #cat01-terms-consent,
  .cat01-terms-consent { font-size: 13.2px !important; }
  #cat01-order-method-guide,
  .cat01-order-method-guide { font-size: 12px !important; }
}

/* CAT01 v8: enlarge only the English desktop consent line. */
@media (min-width: 1024px) {
  .cat01-terms-consent[data-language="en"] { font-size: 13px !important; }
}

/* CAT01 v9: exact order-form text sizes requested for mobile and desktop. */
@media (max-width: 1023px) {
  #cat01-order-confirmation-notice,
  .cat01-order-confirmation-notice { font-size: 12px !important; }
  #cat01-terms-consent,
  .cat01-terms-consent { font-size: 13px !important; }
  #cat01-order-method-guide,
  .cat01-order-method-guide { font-size: 12px !important; }
}
@media (min-width: 1024px) {
  #cat01-order-confirmation-notice,
  .cat01-order-confirmation-notice { font-size: 12px !important; }
  .cat01-terms-consent[data-language="tc"],
  .cat01-terms-consent[data-language="en"] { font-size: 13px !important; }
  #cat01-order-method-guide,
  .cat01-order-method-guide { font-size: 12px !important; }
}

/* CAT01 v10: exact mobile bilingual order-form text sizes. */
@media (max-width: 1023px) {
  #cat01-order-confirmation-notice,
  .cat01-order-confirmation-notice { font-size: 13px !important; }
  #cat01-terms-consent,
  .cat01-terms-consent { font-size: 14px !important; }
  #cat01-order-method-guide,
  .cat01-order-method-guide { font-size: 13px !important; }
}

/* CAT01 v11: larger mobile order text and 14px notice-consent gap. */
@media (max-width: 1023px) {
  #cat01-order-confirmation-notice,
  .cat01-order-confirmation-notice { font-size: 14px !important; }
  #cat01-terms-consent,
  .cat01-terms-consent { margin-top: 14px !important; font-size: 15px !important; }
  #cat01-order-method-guide,
  .cat01-order-method-guide { font-size: 14px !important; }
}
@media (min-width: 1024px) {
  #cat01-terms-consent,
  .cat01-terms-consent { margin-top: 14px !important; }
}