/* ===================================================================
   Darila Cart — Cross‑Device Fluid Patch (v12)
   - Load this file LAST after your other CSS.
   - Keeps your current desktop look; fixes small screens & tablets.
   =================================================================== */

/* ---------- Tokens ---------- */
:root{
  --brand-pink: #ff4bbf;          /* match your logo */
  --container: 1280px;            /* desktop width to match nav */
  --gutter: clamp(12px, 4vw, 24px);
  --thumb: clamp(88px, 28vw, 120px);
}

/* ---------- Global hygiene ---------- */
*,*::before,*::after{ box-sizing:border-box; }
img{ max-width:100%; height:auto; display:block; }
html,body{ overflow-x:hidden; }

/* Make sure main isn't accidentally hidden by earlier CSS */
main, .main{ display:block !important; }

/* Align main to the same width as the nav on desktop */
@media (min-width: 1024px){
  .nav .nav-inner, .bag-wrap{
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
}

/* =================== TABLET (iPad & friends) ===================== */
@media (min-width: 768px) and (max-width: 1024px){
  /* Tables must not force overflow */
  .bag-table{
    width:100% !important;
    min-width:0 !important;
    table-layout: fixed !important;
    border-collapse: separate;
    border-spacing: 0;
  }
  .bag-table th, .bag-table td{
    padding: 16px 18px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-wrap: break-word;
    vertical-align: middle;
  }

  /* Neutralize any absolute/negative positioning that pushes to edges */
  .product-title, .qty-single, .cell-subtotal{
    position: static !important;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /* Safer image sizing */
  .product-thumb{ width: 96px; height: 96px; object-fit:cover; border-radius: 10px; }
}

/* =================== MOBILE (<= 768px wide) ===================== */
@media (max-width: 768px){

  /* Prevent edge clipping on small screens */
  body, .bag-wrap, .bag-card{ box-sizing:border-box; }
  .bag-card{ padding: 12px; margin-bottom: 9px; margin-top: -45px; }

  /* Transform table into cards */
  .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{
    display:grid;
    grid-template-columns: var(--thumb) 1fr;
    gap: clamp(8px, 2.8vw, 14px);
    padding: clamp(10px, 3.2vw, 16px);
    border:1px solid rgba(0,0,0,0.06);
    border-radius:12px;
    background:#fff;
    overflow:hidden;
    width:100%;
    margin: 0 0 12px 0;
  }

  /* Thumb on the left */
  .product-thumb{
    grid-column: 1 / 2;
    width: var(--thumb);
    height: var(--thumb);
    object-fit: cover;
    border-radius: 10px;
    margin:0;
    position: static;
  }

  /* Title on the right, safe & pink */
  .product-title{
    grid-column: 2 / 3;
    align-self: start;
    margin: 0 0 6px 0 !important;
    position: static !important;
    transform:none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 800;
color:#c760db;
  }

  /* Quantity • Price • Total directly under title */
  .mobile-meta{
    grid-column: 3 / 3;
    display:grid !important;
    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; }
  .mobile-meta .m-label{ font-size:.8rem; line-height:1; opacity:.55; margin-bottom:4px; }
  .mobile-meta .m-val{ font-weight:700; line-height:1.2; text-align:left; }

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

  /* Neutralize previous hacks */
  .qty-single, .cell-subtotal{ position: static !important; right:auto !important; margin:0 !important; }
}

/* ============= VERY SMALL phones (<= 360px CSS width) ============ */
@media (max-width: 360px){
  :root{ --thumb: clamp(76px, 32vw, 104px); }
  .mobile-meta{ grid-template-columns: 1fr 1fr; }
  .mobile-meta .m-col:nth-child(3){ grid-column: 3 / 3; }
}

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