/* === PHONE-FOCUSED CSS v2 (Den) ===
   - Mobile-only grid within `.product-info`
   - `.product-details` stacks title + trio
   - Product title color = brand pink
   - Safe side padding to avoid edge clipping
*/
:root{
  --brand-pink: #c760db;  /* change to exact logo pink if needed */
  --page-pad: 14px;
}

@media (max-width: 768px){
  .bag-wrap, .bag-card{ padding-inline: var(--page-pad); box-sizing: border-box; }
  .bag-card{ padding-top: px; padding-bottom: px; }

  /* keep table semantics but render as blocks */
  .bag-table{ width:100%; border-collapse: separate; border-spacing:0; min-width:0; }
  .bag-table thead{ display:none; }
  .bag-table, .bag-table tbody, .bag-table tr, .bag-table td{ display:block; width:100%; }

  .bag-row{
    padding: px;
    margin: 0 0 10px 0;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
  }
  .main{
display: none;
  }
  /* 2-column grid INSIDE the first cell */
  .product-info{
    display: grid !important;
    grid-template-columns: 110px 1fr; /* image | text */
    gap: 10px;
    align-items: center;
  }

  .product-thumb{
    width: 110px; height: 110px; object-fit: cover;
    border-radius: 10px; margin: 0;
  }

  .product-details{ display: flex; flex-direction: column; min-width: 0; }

  .product-title{
    color: #c760db;
    font-weight: 600;
    margin: 0 0 9px 0 !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    position: static !important; transform: none !important;
    align-self: center;
  }

  /* The trio sits *right after* the title because JS inserts it there */
  .mobile-meta{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    background: linear-gradient(180deg,#fff,#fbfbff);
    box-sizing: border-box;
    width: 100%;
  }
  .mobile-meta .m-col{ display:flex; flex-direction:column; align-items:flex-start;align-items: center; }
  .mobile-meta .m-label{ font-size:.78rem; line-height:1; color:#9aa0a6; margin-bottom:6px;align-items: center; }
  .mobile-meta .m-val{ font-weight:600; line-height:3.2; text-align:center; }

  /* Hide desktop-only cells on mobile */
  .cell-price, .qty-cell, .cell-subtotal{ display:none !important; }

  /* Keep actions full-width below */
  .cell-actions{ display:block; margin-top: 10px; }
  .cell-actions .remove-btn{ width:100%; padding:12px 14px; }
}

/* iPhone 14 Pro Max nuance */
@media only screen and (orientation: portrait) and (width: 430px),
       only screen and (orientation: portrait) and (width: 428px){
  .mobile-meta{ gap: 10px; }
  .product-title{ font-size: 1.02rem; color: #c760db;align-self: center;}
}

/* Safe-area guards */
body{ padding-top:max(env(safe-area-inset-top),0px); padding-bottom:max(env(safe-area-inset-bottom),0px); }