/* =========================================================
   WUDUPAY MOBILE COMPACT STOREFRONT
   Overrides the earlier mobile.css at phone widths.
   Desktop remains untouched.
   ========================================================= */

@media (max-width: 820px) {

  /* Compress header/hero significantly */
  .topbar {
    padding: 6px 0 10px !important;
  }

  .hero {
    padding: 18px 16px !important;
    margin-bottom: 12px !important;
    border-radius: 20px !important;
  }

  .hero-badge {
    padding: 6px 9px !important;
    font-size: 10px !important;
  }

  .hero h1 {
    font-size: 27px !important;
    line-height: 1.02 !important;
    margin: 11px 0 8px !important;
    letter-spacing: -1px !important;
  }

  .hero p {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* Hide instructional pills on mobile to save space */
  .hero-steps {
    display: none !important;
  }

  /* Search becomes compact single-row */
  .shop-tools {
    padding: 10px !important;
    margin-bottom: 14px !important;
    border-radius: 15px !important;
  }

  .search-form {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 7px !important;
    align-items: center !important;
  }

  .search-form input {
    min-height: 42px !important;
    height: 42px !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
  }

  .search-form .btn {
    width: auto !important;
    min-width: 78px !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 9px 13px !important;
    font-size: 12px !important;
  }

  .category-row {
    margin-top: 8px !important;
    gap: 6px !important;
  }

  .category-pill {
    padding: 7px 10px !important;
    font-size: 11px !important;
    min-height: 36px !important;
  }

  .section-head {
    margin: 4px 0 8px !important;
  }

  .section-head h2 {
    font-size: 20px !important;
  }

  .section-head p {
    font-size: 12px !important;
  }

  /* Two-column storefront grid on mobile */
  .grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .product-card,
  .card {
    border-radius: 16px !important;
    min-width: 0 !important;
  }

  .product-card .image-wrap,
  .product-card .image-wrap img,
  .card .image-wrap,
  .card .image-wrap img {
    height: 155px !important;
  }

  .card-body {
    padding: 11px !important;
  }

  .card-title {
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin-bottom: 5px !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    min-height: 34px !important;
  }

  /* Hide long descriptions on mobile storefront */
  .product-card .desc,
  .product-card .view-link,
  .card .desc,
  .card .view-link {
    display: none !important;
  }

  .price-row {
    margin: 9px 0 !important;
    align-items: end !important;
    gap: 5px !important;
  }

  .price-label {
    font-size: 9px !important;
  }

  .retail-price {
    font-size: 17px !important;
  }

  .price-row .small {
    font-size: 9px !important;
    text-align: right !important;
  }

  .wudupay-mini {
    padding: 7px 8px !important;
    margin-bottom: 8px !important;
    font-size: 10px !important;
    border-radius: 10px !important;
  }

  .wudupay-mini span {
    display: none !important;
  }

  .card .btn.full,
  .product-card .btn.full {
    min-height: 40px !important;
    padding: 9px 7px !important;
    font-size: 10px !important;
    border-radius: 10px !important;
  }

  /* Badges smaller */
  .badge,
  .category-badge {
    top: 9px !important;
    padding: 5px 7px !important;
    font-size: 8px !important;
  }

  .badge {
    left: 9px !important;
  }

  .category-badge {
    right: 9px !important;
  }

  /* Compact sold-out overlay */
  .soldout-stamp {
    font-size: 16px !important;
    padding: 8px 11px !important;
  }

  .soldout-sub {
    font-size: 9px !important;
  }

  /* Storefront social sharing: keep compact, but don't let it blow up cards */
  .card-share-block {
    display: none !important;
  }

  /* Product detail page remains one-column and focused */
  .premium-product,
  .product-wrap {
    grid-template-columns: 1fr !important;
  }

  /* Move offer box before extras on phones if browser supports ordering */
  .premium-product > div:first-child {
    order: 1;
  }

  .premium-product > .offer-box {
    order: 2;
  }

  .wudupay-social-panel {
    order: 3;
  }

  .tries-card {
    order: 4;
  }
}

/* Extra-small phones */
@media (max-width: 430px) {
  .shell {
    padding: 8px !important;
  }

  .hero h1 {
    font-size: 25px !important;
  }

  .hero p {
    font-size: 12px !important;
  }

  .grid {
    gap: 8px !important;
  }

  .product-card .image-wrap,
  .product-card .image-wrap img,
  .card .image-wrap,
  .card .image-wrap img {
    height: 145px !important;
  }

  .card-body {
    padding: 10px !important;
  }

  .card-title {
    font-size: 13px !important;
    min-height: 32px !important;
  }

  .retail-price {
    font-size: 16px !important;
  }

  .card .btn.full,
  .product-card .btn.full {
    font-size: 9.5px !important;
  }
}

/* =========================================================
   PRODUCT DETAIL FLOW REFINEMENT
   Appended to the compact mobile storefront rules.
   ========================================================= */
@media (max-width: 820px) {

  /* Keep mobile header compact and buttons side-by-side */
  .topbar {
    align-items: center !important;
    gap: 8px !important;
  }

  .topbar .actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    margin-left: auto !important;
  }

  .topbar .btn,
  .topbar .btn.secondary {
    width: auto !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
  }

  /* Product detail page only */
  .product-wrap.premium-product {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* The first wrapper contains gallery + tries + social.
     Use contents so we can reorder those children individually on mobile. */
  .product-wrap.premium-product > div:first-child {
    display: contents !important;
  }

  .gallery-panel {
    order: 1 !important;
  }

  .offer-box {
    order: 2 !important;
  }

  .tries-card {
    order: 3 !important;
  }

  .wudupay-social-panel {
    order: 4 !important;
  }

  /* Product image smaller on phones */
  .gallery-panel .product-img,
  .product-panel .product-img,
  .product-img {
    max-height: 320px !important;
    width: 100% !important;
    object-fit: contain !important;
  }

  .gallery-panel {
    padding: 8px !important;
    border-radius: 18px !important;
  }

  .offer-box {
    position: static !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .offer-box h1 {
    font-size: 24px !important;
    line-height: 1.08 !important;
    margin-bottom: 8px !important;
  }

  .offer-box .desc {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .price-summary {
    padding: 8px 0 4px !important;
  }

  .offer-callout {
    padding: 13px !important;
    margin: 12px 0 !important;
    border-radius: 15px !important;
  }

  .offer-callout h2 {
    font-size: 23px !important;
  }

  .offer-callout p {
    font-size: 12px !important;
  }

  .tries-card {
    margin-top: 0 !important;
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .wudupay-social-panel {
    margin-top: 0 !important;
  }
}

@media (max-width: 430px) {
  .gallery-panel .product-img,
  .product-panel .product-img,
  .product-img {
    max-height: 290px !important;
  }

  .offer-box h1 {
    font-size: 22px !important;
  }
}