/* =====================================================



         CART



         ===================================================== */



      /* =====================================================



         CART - M3 Style



         ===================================================== */






        display:flex;gap:12px;



        padding:14px 16px;



        background:var(--md-surface-1);



        border-radius:var(--md-shape-lg);



        margin:0 16px 10px;



        box-shadow:0 1px 3px rgba(0,0,0,.08);



        position:relative;



      }



      .cart-img-m3{



        width:72px;height:72px;



        background:var(--md-surface-3);



        border-radius:var(--md-shape-md);



        display:flex;align-items:center;justify-content:center;



        font-size:38px;flex-shrink:0;overflow:hidden;



      }



      .cart-img-m3 img{width:60px;height:60px;object-fit:contain;}



      .cart-info-m3{flex:1;}



      .cart-name-m3{font-size:13px;font-weight:500;color:#111111;margin-bottom:2px;line-height:1.35;}



      .cart-unit-m3{font-size:11px;color:#111111;text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px;}
      .cart-unit-m3 .price-currency{color:var(--md-primary) !important;font-weight:600;}
      .cart-unit-m3 .price-num{color:#000000 !important;font-weight:400;}



      .cart-bottom-row{display:flex;align-items:center;justify-content:space-between;}



      .cart-qty-m3{display:flex;align-items:center;border:1.5px solid var(--md-outline-var);border-radius:var(--md-shape-full);overflow:hidden;height:32px;}



      .cq-btn{width:32px;height:100%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#111111;}



      .cq-num{min-width:28px;text-align:center;font-size:13px;font-weight:700;color:#111111;}



      .cart-price-m3{font-family:var(--font-display);font-size:var(--text-base);font-weight:400;color:#111111;}
      .cart-price-m3 .price-currency{font-size:var(--price-currency-size);color:var(--md-primary) !important;margin-right:6px;font-weight:600;}
      .cart-price-m3 .price-num{font-size:var(--price-size);font-weight:400;color:#000000 !important;vertical-align:baseline;}

      .sum-row .price-currency{font-size:var(--price-currency-size);color:var(--md-primary) !important;margin-right:6px;}
      .sum-row .price-num{font-size:var(--price-size);font-weight:400;color:#000000 !important;}



      .cart-del-m3{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:var(--md-shape-full);display:flex;align-items:center;justify-content:center;color:var(--md-outline);}



      .cart-del-m3:hover{background:var(--md-primary-container);color:var(--md-error);}



      .cart-del-m3 svg{width:18px;height:18px;fill:currentColor;}







      /* M3 Summary Card */






        background:var(--md-surface-2);



        border-radius:var(--md-shape-xl);



        margin:0 16px;



        padding:20px;



        box-shadow:0 1px 3px rgba(0,0,0,.08);



      }



      .sum-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:14px;color:#111111;}



      .sum-row.total{font-family:var(--font-display);font-size:17px;font-weight:700;padding-top:12px;margin-top:4px;border-top:1px solid var(--md-outline-var);}



      .sum-row.total span:last-child{color:#111111;}



      .free-badge{background:var(--md-primary-container);color:#111111;font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--md-shape-full);}



      .bottom-btn-bar{padding:16px;}







      /* =====================================================



         M3 CHECKOUT



         ===================================================== */






        background:var(--md-surface-1);



        border-radius:var(--md-shape-xl);



        margin:12px 16px 0;



        padding:20px;



        box-shadow:0 1px 3px rgba(0,0,0,.08);



      }



      .checkout-card-title{font-size:13px;font-weight:600;color:#111111;text-transform:uppercase;letter-spacing:.8px;margin-bottom:16px;}

      .checkout-trust-banner{
        display:flex;flex-wrap:wrap;gap:8px;
        margin-top:12px;padding:12px 14px;
        border:1px solid var(--md-outline-var);border-radius:var(--md-shape-md);
        background:var(--md-surface-2);
      }
      .checkout-trust-pill{
        display:inline-flex;align-items:center;gap:6px;
        padding:6px 10px;border-radius:999px;
        background:var(--md-surface-4);color:#111111;
        font-size:12px;font-weight:700;letter-spacing:.2px;
      }
      .checkout-trust-pill svg{width:14px;height:14px;flex-shrink:0;color:var(--md-primary);}
      .support-card{margin-top:12px;padding:14px;border-radius:var(--md-shape-md);background:var(--md-surface-4);border:1px solid var(--md-outline-var);}
      .support-card-title{font-size:14px;font-weight:700;color:#111111;margin-bottom:6px;}
      .support-card-body{font-size:13px;line-height:1.5;color:#111111;margin-bottom:10px;}
      .support-actions{display:flex;gap:8px;flex-wrap:wrap;}
      .support-actions .btn{flex:1;min-width:120px;justify-content:center;}



      .checkout-summary-card{

        background:var(--md-surface-4);

        color:#111111;

        border-radius:var(--md-shape-lg);

        padding:20px;

        margin-bottom:24px;

        position:relative;

        z-index:10;

        box-shadow:0 2px 8px rgba(0,0,0,0.08);

        border-left:4px solid var(--md-primary);

      }



      .checkout-summary-card .sum-row{

        display:flex;

        justify-content:space-between;

        align-items:center;

        margin-bottom:12px;

        font-size:14px;

      }



      .checkout-summary-card .sum-row:last-child{

        margin-bottom:0;

        padding-top:12px;

        border-top:1px solid var(--md-outline-var);

        font-size:16px;

        font-weight:700;

        color:#111111;

      }



      .co-section{

        background:var(--md-surface-1);

        border-radius:var(--md-shape-lg);

        margin-bottom:20px;

        overflow:hidden;

        box-shadow:0 2px 8px rgba(0,0,0,0.06);

      }



      .co-section-header{

        display:flex;

        align-items:center;

        gap:12px;

        padding:16px 20px;

        background:var(--md-surface-2);

        border-bottom:1px solid var(--md-outline-var);

        color:#111111;

      }



      .co-section-header svg{

        color:#111111;

        stroke-width:2.5;

      }



      .co-section-header h3{

        margin:0;

        font-size:15px;

        font-weight:600;

        color:#111111;

      }



      .co-section-content{

        padding:16px 20px;

        display:flex;

        flex-direction:column;

        gap:12px;

      }



      .delivery-info{

        padding:12px;

        background:var(--md-surface-2);

        border-radius:var(--md-shape-md);

      }



      .delivery-name{

        font-weight:600;

        font-size:15px;

        color:#111111;

        margin-bottom:4px;

      }



      .delivery-address{

        font-size:13px;

        color:#111111;

        margin-bottom:4px;

      }



      .delivery-phone{

        font-size:13px;

        color:#111111;

      }



      .co-trust-signals{

        display:flex;

        flex-direction:column;

        gap:10px;

        margin:24px 0 16px;

        padding:16px 20px;

        background:linear-gradient(135deg, rgba(46,125,50,0.08), rgba(21,101,192,0.08));

        border-radius:var(--md-shape-lg);

        border:1px solid var(--md-outline-var);

      }



      .trust-item{

        display:flex;

        align-items:center;

        gap:10px;

        font-size:13px;

        color:#111111;

        font-weight:500;

      }



      .trust-item svg{

        color:#111111;

        flex-shrink:0;

      }



      .btn-checkout{

        display:flex;

        align-items:center;

        justify-content:center;

        gap:8px;

        width:100%;

        min-height:54px;

        padding:16px 20px;

        font-size:15px;

        font-weight:700;

        letter-spacing:0.01em;

        border-radius:999px;

        background:linear-gradient(135deg, var(--md-primary-light) 0%, var(--md-primary) 50%, var(--md-primary-dark) 100%);

        color:#fff;

        border:1px solid rgba(255,255,255,0.22);

        cursor:pointer;

        position:relative;

        overflow:hidden;

        box-shadow:0 12px 24px color-mix(in srgb, var(--md-primary) 26%, transparent), inset 0 1px 0 rgba(255,255,255,0.22);

        transition:transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;

      }

      .btn-checkout::before{

        content:"";

        position:absolute;

        inset:0;

        background:linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);

        transform:translateX(-120%);

        transition:transform 0.5s ease;

      }

      .btn-checkout:hover{

        transform:translateY(-2px);

        box-shadow:0 16px 30px color-mix(in srgb, var(--md-primary) 34%, transparent), inset 0 1px 0 rgba(255,255,255,0.24);

        filter:brightness(1.03);

      }

      .btn-checkout:hover::before{

        transform:translateX(120%);

      }

      .btn-checkout:active{

        transform:translateY(0) scale(0.98);

        box-shadow:0 6px 16px color-mix(in srgb, var(--md-primary) 24%, transparent);

      }



      .m3-text-field{



        width:100%;height:56px;



        border:1px solid var(--md-outline);



        border-radius:var(--md-shape-sm);



        padding:16px;



        font-size:16px;color:#111111;



        background:var(--md-surface);



        outline:none;



        transition:border-color var(--md-duration-short);



        margin-bottom:10px;



      }



      .m3-text-field:focus{border-color:#111111;border-width:2px;}



      .m3-text-field::placeholder{color:#111111;}






        display:flex;align-items:center;gap:12px;



        padding:14px;



        border:1px solid var(--md-outline-var);



        border-radius:var(--md-shape-md);



        cursor:pointer;margin-bottom:10px;



        transition:all var(--md-duration-short);



        position:relative;



      }



      .pay-row.sel{border-color:#111111;border-width:2px;background:var(--md-primary-container);}



      .pay-icon-wrap{min-width:64px;height:40px;padding:0 10px;border-radius:var(--md-shape-md);background:var(--md-surface-3);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;letter-spacing:.4px;color:#111111;flex-shrink:0;}



      .pay-info strong{display:block;font-size:14px;font-weight:600;color:#111111;}



      .pay-info small{font-size:12px;color:#111111;}



      .pay-check{margin-left:auto;width:24px;height:24px;border-radius:50%;background:var(--md-primary);color:var(--md-on-primary);display:none;align-items:center;justify-content:center;}



      .pay-row.sel .pay-check{display:flex;}



      .pay-check svg{width:14px;height:14px;fill:currentColor;}



      .coupon-option{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--md-outline-var);border-radius:var(--md-shape-md);cursor:pointer;margin-bottom:10px;transition:all var(--md-duration-short);background:var(--md-surface-1);}



      .coupon-option:hover{background:var(--md-surface-2);}



      .coupon-option.sel{border-color:#111111;border-width:2px;background:var(--md-primary-container);}



      .coupon-code-badge{min-width:60px;height:36px;padding:0 10px;border-radius:var(--md-shape-sm);background:var(--md-surface-3);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:.3px;color:#111111;flex-shrink:0;font-family:monospace;}



      .coupon-info strong{display:block;font-size:13px;font-weight:600;color:#111111;}



      .coupon-info small{font-size:11px;color:#111111;}



      .coupon-discount{margin-left:auto;font-weight:600;color:#111111;font-size:13px;flex-shrink:0;}



      .coupon-option.sel .coupon-check{display:flex;}



      .coupon-check{margin-left:4px;width:20px;height:20px;border-radius:50%;background:var(--md-primary);color:var(--md-on-primary);display:none;align-items:center;justify-content:center;flex-shrink:0;}



      #co-coupon-code{font-size:13px !important; padding:10px 12px !important; border:1px solid var(--md-outline-var) !important; border-radius:var(--md-shape-md) !important;}



      #co-coupon-code:focus{outline:none; border-color:#111111 !important; box-shadow:0 0 0 3px rgba(233, 80, 10, 0.1);}



      #co-coupon-code:disabled{background:var(--md-surface-3); color:#111111;}



      #co-coupon-msg{font-size:12px; padding:10px 12px; margin-top:8px; border-radius:var(--md-shape-md); display:none; animation:slideIn 0.3s ease;}



      @keyframes slideIn{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);}}







      /* =====================================================



         ORDER SUCCESS



         ===================================================== */



      #screen-success{background:var(--md-surface);align-items:center;justify-content:center;}
      .success-container{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 24px;gap:12px}
      .success-icon{width:96px;height:96px;border-radius:50%;background:var(--md-primary-container);display:flex;align-items:center;justify-content:center;font-size:48px;animation:popIn .5s var(--md-easing-emph)}
      @keyframes popIn{0%{transform:scale(0);}60%{transform:scale(1.15);}100%{transform:scale(1);}}
      .success-title{font-size:20px;font-weight:800;color:var(--md-primary)}
      .success-body{font-size:14px;color:#111111;line-height:1.6;max-width:280px}
      .order-id-wrap{display:flex;align-items:center;gap:8px;margin-top:6px}
      .order-id-chip{background:var(--md-surface-3);padding:8px 12px;border-radius:12px;font-family:monospace;font-weight:700;color:#111;box-shadow:0 4px 14px rgba(0,0,0,0.04);cursor:pointer}
      .copy-id-btn{background:transparent;border:none;padding:6px;border-radius:8px;cursor:pointer;color:var(--md-primary);display:inline-flex;align-items:center;justify-content:center}
      .copy-id-btn svg{width:18px;height:18px}
      .pts-banner{margin-top:6px;background:var(--md-primary-container);border-radius:var(--md-shape-xl);padding:14px 20px;width:100%;display:flex;align-items:center;gap:10px}
      .pts-banner-text{font-size:14px;font-weight:600;color:#111111}
      .pts-pending{font-size:14px;color:var(--orange,var(--md-primary));font-weight:500;margin-left:8px;}
      .success-actions{display:flex;gap:10px;width:100%;margin-top:14px}
      .success-actions .btn-pri{flex:1;padding:12px 14px;border-radius:12px;font-size:16px;background:var(--md-primary)!important;color:var(--md-on-primary)!important;box-shadow:0 6px 28px var(--orange-glow),0 1px 3px color-mix(in srgb, var(--md-primary) 20%, transparent);transition:transform .12s cubic-bezier(.4,0,.2,1),box-shadow .18s ease}
      .success-actions .btn-pri:hover,.success-actions .btn-pri:active,.success-actions .btn-pri:focus{background:var(--md-primary)!important}
      .success-actions .btn-ghost{flex:1;padding:12px 14px;border-radius:12px;font-size:16px}
      @media (max-width:480px){.success-actions{flex-direction:column}.success-actions .btn-pri,.success-actions .btn-ghost{width:100%}}















      /* NOTIFICATION STYLES */







      .notif-item {display:flex;align-items:flex-start;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border);transition:background .15s;cursor:pointer}







      .notif-item:active {background:var(--md-surface-1)}







      .notif-item.unread {background:var(--md-primary-container)}







      .notif-icon-wrap {width:40px;height:40px;border-radius:14px;background:var(--orange-dim);flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px}







      .notif-title {font-size:14px;font-weight:600;color:#111111;margin-bottom:3px}







      .notif-body {font-size:13px;color:#111111;line-height:1.45}







      .notif-time {font-size:11px;color:#111111;margin-top:4px}







      .notif-unread-dot {width:8px;height:8px;border-radius:50%;background:var(--md-primary);flex-shrink:0;margin-top:6px}







      #screen-notifications .tbar {background:linear-gradient(135deg, var(--md-on-surface), #2d1800)}







      #screen-notifications .tbar-title {color:var(--md-surface)}







      #screen-notifications .ibtn.w {color:var(--md-surface)}



      /* =====================================================

         PRODUCT PAGE - FILTER CHIPS & GRID

         ===================================================== */

      .filter-chip-row{display:flex;gap:8px;overflow-x:auto;padding:12px 16px 0;scrollbar-width:none;flex-shrink:0;background:rgb(254, 241, 238);width:100%;margin:0;}

      .filter-chip-row::-webkit-scrollbar{display:none;}

      .filter-chip{flex-shrink:0;height:40px;line-height:40px;padding:0 18px;border-radius:20px;border:1px solid var(--md-outline-var);background:var(--md-primary-container);font-size:13px;font-weight:500;color:#111111;white-space:nowrap;cursor:pointer;transition:all var(--md-duration-short) var(--md-easing);letter-spacing:.1px;display:inline-flex;align-items:center;justify-content:center;}

      .filter-chip:active{transform:scale(.95);}

      .filter-chip.active{background:var(--md-primary);color:var(--md-on-primary);border-color:#111111;box-shadow:0 2px 8px color-mix(in srgb, var(--md-primary) 30%, transparent);}

      .prod-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px;padding:6px 10px 16px;}

      .prod-card{background:var(--md-surface-1);border-radius:var(--md-shape-lg);overflow:visible;cursor:pointer;position:relative;box-shadow:0 1px 3px rgba(0,0,0,.1);transition:box-shadow var(--md-duration-short),transform var(--md-duration-short);display:flex;flex-direction:column;}

      .prod-card:hover{box-shadow:0 3px 10px rgba(0,0,0,.14);transform:translateY(-2px);}

      .prod-card:active{transform:scale(.97);}

      .prod-card .add-btn{background:linear-gradient(135deg, var(--md-primary) 0%, var(--md-primary-dark) 100%);border-radius:var(--md-shape-lg);display:flex;align-items:center;justify-content:center;color:var(--md-on-primary);box-shadow:0 10px 24px color-mix(in srgb, var(--md-primary) 24%, transparent);transition:all 200ms cubic-bezier(.2,0,0,1);cursor:pointer;font-size:13px;font-weight:700;border:none;width:44px;height:44px;padding:0;flex-shrink:0;position:static !important;}

      .prod-card .add-btn:hover{background:linear-gradient(135deg, color-mix(in srgb, var(--md-primary-dark) 80%, black) 0%, color-mix(in srgb, var(--md-primary-light) 90%, white) 100%);box-shadow:0 10px 24px color-mix(in srgb, var(--md-primary) 28%, transparent);transform:scale(1.05);}

      .prod-card .add-btn:active{transform:scale(.95);box-shadow:0 2px 8px color-mix(in srgb, var(--md-primary) 20%, transparent);}

      .prod-card .add-btn svg{width:18px;height:18px;fill:#fff;display:block;}

      .prod-img-wrap{width:100%;height:160px;padding-bottom:0;border-radius:20px 20px 0 0;background:var(--md-surface-3);display:flex;align-items:center;justify-content:center;font-size:60px;position:relative;overflow:hidden;margin:0;}

      .prod-img-wrap img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.04);font-size:0;visibility:visible !important;display:block !important;}

      /* Hide any accidental product name placed inside the image wrapper
         (some legacy templates rendered the name inside the image area). */
      .prod-img-wrap > .prod-name-m3,
      .prod-img-wrap > .prod-name {
        display:none !important;
      }

      .product-img-fallback{display:none;font-size:60px;width:100%;height:100%;background:var(--md-surface-3);align-items:center;justify-content:center;}

      /* =====================================================
         IPOO MATERIAL — ADD TO CART FAB (Corner Style)
         ===================================================== */
        position:absolute;bottom:8px;right:8px;
        width:52px;height:52px;
        background:linear-gradient(135deg, var(--md-primary) 0%, var(--md-primary-dark) 100%);
        border-radius:18px;
        display:flex;align-items:center;justify-content:center;
        color:#fff;
        box-shadow:0 10px 24px color-mix(in srgb, var(--md-primary) 24%, transparent);
        transition:background var(--md-duration-short),transform var(--md-duration-short),box-shadow var(--md-duration-short);
        font-size:11px;font-weight:700;
        width:52px!important;
        height:52px!important;
        min-width:52px!important;
        min-height:52px!important;
        border-radius:18px!important;
      }
      .prod-info{padding:12px 18px 8px;position:relative;display:flex;flex-direction:column;gap:6px;}

      .prod-info{padding:12px 18px 8px;position:relative;display:flex;flex-direction:column;gap:6px;}

      .prod-name{font-size:15px;font-weight:600;color:#212121;margin-bottom:0;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:-0.01em;}

      .prod-unit{font-size:13px;color:#757575;text-transform:uppercase;letter-spacing:0.2px;margin-top:8px;margin-bottom:10px;font-weight:500;}

      .prod-price{font-family:'Google Sans', sans-serif;font-size:22px;font-weight:700;line-height:1.2;color:#111111;}

      .prod-stock-chip{display:inline-block;margin-top:4px;font-size:10px;font-weight:600;color:var(--md-error);background:#FCEAE9;padding:2px 8px;border-radius:var(--md-shape-full);}

      .prod-grid-m3{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  padding:0 10px 12px;
}
.prod-card-m3{
  width:172px;
  height:304px;
  background:var(--md-surface-1);
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  box-shadow:0 1px 3px rgba(0,0,0,.025);
  border:1px solid rgba(0,0,0,.02);
  transition:box-shadow var(--md-duration-short),transform var(--md-duration-short);
  display:flex;flex-direction:column;
}
.prod-card-m3:hover{box-shadow:0 2px 7px rgba(0,0,0,.04);}
.prod-card-m3:active{transform:scale(.98);}
.prod-img-wrap{
  width:100%;
  height:200px;
  min-height:200px;
  padding:10px 10px 0;
  border-radius:18px 18px 0 0;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:60px;
  position:relative;
  overflow:hidden;
  margin:0;
  flex-shrink:0;
  box-sizing:border-box;
}
.prod-img-wrap img,.prod-img-wrap .product-img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.01);padding:0;box-sizing:border-box;font-size:0;visibility:visible !important;display:block !important;border-radius:12px;}
.prod-img-wrap > .prod-name-m3,
.prod-img-wrap > .prod-name{display:none !important;}
.product-img-fallback{font-size:60px;}
/* legacy spacing token: padding:10px 10px 12px */
.prod-info{padding:9px 12px 12px;position:relative;display:flex;flex-direction:column;gap:6px;}
.prod-name-m3{font-size:13px;font-weight:500;color:#111111;margin-bottom:3px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:.1px;}
.prod-unit-m3{font-size:11px;color:#111111;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;line-height:1.2;}
.prod-price-m3{font-family:var(--font-display);font-size:15px;font-weight:700;color:#ff4500;margin-top:1px;letter-spacing:0.01em;font-variant-numeric:tabular-nums;}
.prod-actions-row{display:flex;align-items:center;gap:4px;margin-top:3px;}
.prod-stock-chip{display:inline-block;margin-top:0;font-size:10px;font-weight:600;padding:2px 8px;border-radius:var(--md-shape-full);}.prod-stock-chip-out{color:var(--md-error);background:#FCEAE9;}
.prod-stock-chip-low{color:#B25608;background:#FFF4E5;}
.prod-stock-chip-in{color:#1B8A4B;background:#E7F5EA;}

  position:absolute;bottom:8px;right:8px;
  width:40px;height:40px;
  background:linear-gradient(135deg, var(--md-primary) 0%, #E8500A 100%);
  border-radius:var(--md-shape-lg) 0 var(--md-shape-lg) 0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  box-shadow:0 10px 24px rgba(232, 80, 10, 0.24);
  transition:background var(--md-duration-short),transform var(--md-duration-short),box-shadow var(--md-duration-short);
  font-size:11px;font-weight:700;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  border-radius:var(--md-shape-lg) 0 var(--md-shape-lg) 0!important;
}





      /* ORDERS SCREEN STYLES */







      #orders-body {padding:0;padding-bottom:20px}







      /* Orders page - Clean Material 3 header */

      #sc-orders .tbar-title {

        color: #111111 !important;

        font-family: var(--font-display);

        font-style: normal;

        font-size: 18px;

      }



      /* Cart page - Also update to clean design */

      #screen-cart .tbar {

        background: var(--md-surface-4);

        border-bottom: 1px solid rgba(120, 75, 40, 0.08);

      }



      #screen-cart .tbar-title {

        color: var(--md-on-surface);

        font-family: var(--font-display);

        font-style: normal;

        font-size: 18px;

      }







      .order-card {background:var(--md-surface);border-bottom:1px solid var(--border);padding:16px;cursor:pointer;transition:background .2s}







      .order-card:active {background:var(--md-surface-1)}







      .order-header {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}







      .order-num {font-weight:700;font-size:13px;color:#111111}







      .order-status {font-size:11px;font-weight:600;padding:3px 10px;border-radius:12px;background:var(--success-light);color:#111111}







      .order-status.pending {background:rgba(255,175,0,0.1);color:#111111}







      .order-status.cancelled {background:rgba(220,53,69,0.1);color:#111111}







      .order-date {font-size:12px;color:#111111;margin-bottom:8px}







      .order-details {display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:12px 0}


      .order-items-preview {font-size:12px;color:#111111;margin-top:8px}







      .order-total {display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;color:#111111;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}







      .order-total-label {color:#111111;font-weight:500}







      .order-total-value {color:#111111;font-size:20px;font-weight:800}























      .cart-summary {position:absolute;bottom:60px;left:0;right:0;max-width:430px;margin:0 auto;background:var(--md-on-primary-cont);color:var(--md-surface);padding:16px;z-index:40;border-top:1px solid var(--border)}







      .cart-summary-row {display:flex;flex-direction:column;gap:8px;font-size:14px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.1);align-items:flex-start}







      .cart-summary-row span:first-child {color:rgba(255,255,255,0.7);font-weight:500;display:block;width:100%}







      .cart-summary-row span:last-child {color:#111111;font-weight:600;display:block;width:100%;text-align:left}







      .cart-summary-total {display:flex;flex-direction:column;gap:8px;font-size:16px;font-weight:700;align-items:flex-start;width:100%}







      .cart-summary-total span:first-child {color:rgba(255,255,255,0.7);font-weight:600}







      .cart-summary-total span:last-child {color:#111111;font-size:18px}















      /* -- CART ITEM -- */







      .cart-item {







        display:flex; flex-direction:column; gap:12px;







        padding:14px 20px; border-bottom:1px solid var(--border);







        animation:fadeInSlide 0.4s ease-out;







      }







      @keyframes fadeInSlide {



        from {



          opacity:0;



          transform:translateX(-10px);



        }



        to {



          opacity:1;



          transform:translateX(0);



        }



      }







      .cart-item-img {







        width:100%; height:120px; border-radius:var(--radius-sm);







        object-fit:cover; background:var(--md-surface-1); flex-shrink:0;







      }







      .cart-item-fallback {







        width:100%; height:120px; border-radius:var(--radius-sm);







        background:var(--md-primary-container); flex-shrink:0;







        display:flex; align-items:center; justify-content:center;







        font-family:'Google Sans Display', sans-serif;







        font-size:24px; font-weight:700; color:#111111;







      }







      .cart-item-info { flex:1; min-width:0; }







      .cart-item-name {







        font-size:14px; font-weight:600; color:#111111;







        margin-bottom:3px; line-height:1.3;







      }







      .cart-item-brand {







        font-size:12px; color:#111111; margin-bottom:8px;







      }















      .qty-control {







        display:flex; align-items:center; gap:10px; width:100%;







      }







      .qty-btn {







        width:28px; height:28px; border-radius:50%;







        border:1.5px solid var(--border); background:var(--md-surface);







        display:flex; align-items:center; justify-content:center;







        cursor:pointer; color:#111111; transition:all .15s;







      }







      .qty-btn:active {







        background:var(--md-primary); border-color:#111111; color:var(--md-on-primary);







        animation:buttonTap 0.3s ease;







      }







      @keyframes buttonTap {



        0% { transform:scale(1); }



        50% { transform:scale(0.95); }



        100% { transform:scale(1); }



      }







      .qty-val {







        font-family:'Google Sans Display', sans-serif;







        font-size:15px; font-weight:700; color:#111111;







        min-width:20px; text-align:center;







      }







      .cart-item-price {







        font-family:'Google Sans Display', sans-serif;







        font-size:16px; font-weight:700; color:#111111;







        flex-shrink:0; width:100%; text-align:right;







      }







      .continue-shopping-btn {



        width:100%;



        padding:14px 20px;



        background:linear-gradient(135deg, var(--md-primary), #ff9500);



        color:var(--md-on-primary);



        border:none;



        border-radius:10px;



        font-weight:700;



        font-size:15px;



        cursor:pointer;



        transition:all 0.3s ease;



        margin-bottom:16px;



      }







      .continue-shopping-btn:hover {



        transform:translateY(-2px);



        box-shadow:0 8px 20px color-mix(in srgb, var(--md-primary) 30%, transparent);



      }







      .continue-shopping-btn:active {



        transform:translateY(0);



        box-shadow:0 4px 12px color-mix(in srgb, var(--md-primary) 20%, transparent);



      }







      .checkout-btn {



        width:100%;



        padding:14px 20px;



        background:linear-gradient(135deg, var(--md-primary) 0%, var(--md-primary-dark) 100%);



        color:var(--md-on-primary);



        border:none;



        border-radius:10px;



        font-weight:700;



        font-size:15px;



        cursor:pointer;



        transition:all 0.3s ease;



      }







      .checkout-btn:hover {



        transform:translateY(-2px);



        box-shadow:0 8px 20px color-mix(in srgb, var(--md-primary) 28%, transparent);



      }







      .checkout-btn:active {



        transform:translateY(0);



        box-shadow:0 4px 12px color-mix(in srgb, var(--md-primary) 20%, transparent);



      }















      /* -- CHECKOUT SUMMARY BAR -- */







      .checkout-bar {



        display:flex;



        flex-direction:column;



        gap:12px;



        padding:16px 20px;



        background:var(--md-surface);



        border-top:1px solid var(--border);



        flex-shrink:0;



        position:sticky;



        bottom:0;



        box-shadow:0 -4px 12px rgba(0,0,0,0.08);



        z-index:10;



        animation:slideUpIn 0.3s ease-out;



      }







      @keyframes slideUpIn {



        from {



          opacity:0;



          transform:translateY(20px);



        }



        to {



          opacity:1;



          transform:translateY(0);



        }



      }







      .checkout-row {







        display:flex; flex-direction:column; align-items:flex-start; gap:6px;







        margin-bottom:8px;







      }







      .checkout-label {







        font-size:13px; color:#111111;







      }







      .checkout-val {







        font-size:13px; font-weight:600; color:#111111;







      }







      .checkout-total-label {







        font-family:'Google Sans Display', sans-serif;







        font-size:16px; font-weight:700; color:#111111;







      }







      .checkout-total-val {







        font-family:'Google Sans Display', sans-serif;







        font-size:20px; font-weight:700; color:#111111;







      }







      .divider {







        height:1px; background:var(--border); margin:8px 0;







      }







      .mb16 { margin-bottom:16px; }







      /* =====================================================



         CHECKOUT



         ===================================================== */






        background:var(--md-surface-1);



        border-radius:var(--md-shape-xl);



        margin:12px 16px 0;



        padding:20px;



        box-shadow:0 1px 3px rgba(0,0,0,.08);



      }



      .checkout-card-title{font-size:13px;font-weight:600;color:#111111;text-transform:uppercase;letter-spacing:.8px;margin-bottom:16px;}

      .checkout-trust-banner{
        display:flex;flex-wrap:wrap;gap:8px;
        margin-top:12px;padding:12px 14px;
        border:1px solid var(--md-outline-var);border-radius:var(--md-shape-md);
        background:var(--md-surface-2);
      }
      .checkout-trust-pill{
        display:inline-flex;align-items:center;gap:6px;
        padding:6px 10px;border-radius:999px;
        background:var(--md-surface);color:#111111;
        font-size:12px;font-weight:700;letter-spacing:.2px;
      }
      .checkout-trust-pill svg{width:14px;height:14px;flex-shrink:0;color:var(--md-primary);}
      .info-note{
        margin-top:12px;padding:12px 14px;border-radius:var(--md-shape-md);
        background:var(--md-surface-2);border:1px solid var(--md-outline-var);
        font-size:13px;line-height:1.5;color:#111111;
      }
      .success-step-list{display:grid;gap:8px;width:100%;margin-top:6px;}
      .success-step{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--md-shape-md);background:var(--md-surface-1);box-shadow:0 1px 3px rgba(0,0,0,.08);text-align:left;}
      .success-step-badge{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--md-primary-container);color:var(--md-primary);flex-shrink:0;}
      .success-step strong{display:block;font-size:14px;color:#111111;margin-bottom:2px;}
      .success-step span{font-size:13px;line-height:1.45;color:#111111;}

      .m3-text-field{



        width:100%;height:56px;



        border:1px solid var(--md-outline);



        border-radius:var(--md-shape-sm);



        padding:0 16px;



        font-size:16px;color:#111111;



        background:var(--md-surface);



        outline:none;box-sizing:border-box;



        transition:border-color .2s;



        margin-bottom:10px;display:block;



      }



      .m3-text-field:focus{border-color:#111111;border-width:2px;}



      .m3-text-field::placeholder{color:#111111;}






        display:flex;align-items:center;gap:12px;



        padding:14px;



        border:1.5px solid var(--md-outline-var);



        border-radius:var(--md-shape-md);



        cursor:pointer;margin-bottom:10px;



        transition:all .15s;



      }






      .pay-row.sel{border-color:#111111;border-width:2px;background:var(--md-primary-container);}



      .pay-icon-wrap{min-width:64px;height:40px;padding:0 10px;border-radius:var(--md-shape-md);background:var(--md-surface-3);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;letter-spacing:.4px;color:#111111;flex-shrink:0;}



      .pay-info strong{display:block;font-size:14px;font-weight:600;color:#111111;}



      .pay-info small{font-size:12px;color:#111111;}



      .pay-check{margin-left:auto;width:24px;height:24px;border-radius:50%;background:var(--md-primary);color:var(--md-on-primary);display:none;align-items:center;justify-content:center;flex-shrink:0;}



      .pay-row.sel .pay-check{display:flex;}



      .pay-check svg{width:14px;height:14px;fill:currentColor;}







      /* SUCCESS SCREEN STYLES */



      #screen-success{background:linear-gradient(180deg, #fff7f3 0%, var(--md-surface) 32%, var(--md-surface) 100%);align-items:center;justify-content:center;padding:18px 0;overflow:hidden;}
      .success-scroll{flex:1 1 auto;width:100%;min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:4px 0 18px;}
      .success-container{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 18px 18px;gap:12px;width:min(100%, 420px);max-width:420px;margin:0 auto;border:1px solid rgba(234, 88, 12, 0.12);background:rgba(255,255,255,0.82);backdrop-filter:blur(6px);border-radius:28px;box-shadow:0 18px 50px rgba(16,24,40,0.08),0 6px 18px rgba(234,88,12,0.08);}
      .success-badge{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border-radius:999px;background:var(--md-primary-container);color:var(--md-primary);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;}
      .success-icon{width:84px;height:84px;border-radius:50%;background:linear-gradient(180deg, #fffaf5 0%, var(--md-primary-container) 100%);display:flex;align-items:center;justify-content:center;font-size:48px;animation:popIn .5s var(--md-easing-emph);box-shadow:0 12px 26px rgba(234,88,12,0.14);}
      @keyframes popIn{0%{transform:scale(0);}60%{transform:scale(1.15);}100%{transform:scale(1);}}
      .success-title{font-size:26px;font-weight:800;color:#111111;letter-spacing:-0.03em;line-height:1.2}
      .success-body{font-size:14px;color:#444444;line-height:1.6;max-width:310px}
      .success-summary{width:100%;padding:12px 14px;border-radius:18px;background:#fff;border:1px solid rgba(17,17,17,0.06);box-shadow:inset 0 1px 0 rgba(255,255,255,0.8);}
      .summary-label{font-size:10px;font-weight:700;letter-spacing:0.10em;text-transform:uppercase;color:#666666;margin-bottom:8px;}
      .order-id-wrap{display:flex;align-items:center;justify-content:center;gap:8px}
      .order-id-chip{flex:1;min-height:42px;background:var(--md-surface-3);padding:10px 12px;border-radius:12px;font-family:monospace;font-weight:700;color:#111;box-shadow:0 4px 14px rgba(0,0,0,0.04);cursor:pointer;border:1px solid rgba(17,17,17,0.04);display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
      .copy-id-btn{background:transparent;border:none;padding:8px;border-radius:10px;cursor:pointer;color:var(--md-primary);display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(234,88,12,0.18);background:rgba(234,88,12,0.06)}
      .copy-id-btn svg{width:18px;height:18px}
      .success-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%}
      .meta-pill{padding:7px 12px;border-radius:999px;background:#f7f7f7;border:1px solid rgba(17,17,17,0.06);font-size:12px;font-weight:600;color:#333333;}
      .pts-banner{margin-top:2px;background:linear-gradient(135deg, var(--md-primary-container) 0%, rgba(255,255,255,0.9) 100%);border-radius:var(--md-shape-xl);padding:14px 20px;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid rgba(234,88,12,0.08)}
      .pts-banner-text{font-size:14px;font-weight:600;color:#111111;line-height:1.5}
      .pts-status{margin-top:6px;font-size:12px;font-weight:600;color:var(--orange,var(--md-primary));text-align:center;}
      .success-actions{display:flex;gap:10px;width:100%;margin-top:8px}
      .success-actions .btn-pri{flex:1;padding:12px 14px;border-radius:12px;font-size:16px;background:var(--md-primary)!important;color:var(--md-on-primary)!important;box-shadow:0 6px 28px var(--orange-glow),0 1px 3px color-mix(in srgb, var(--md-primary) 20%, transparent);transition:transform .12s cubic-bezier(.4,0,.2,1),box-shadow .18s ease;min-height:48px}
      .success-actions .btn-pri:hover,.success-actions .btn-pri:active,.success-actions .btn-pri:focus{background:var(--md-primary)!important}
      .success-actions .btn-ghost{flex:1;padding:12px 14px;border-radius:12px;font-size:16px;min-height:48px}
      .wa-btn{display:inline-flex;align-items:center;justify-content:center;min-width:150px;width:auto;padding:0 18px;height:46px;border-radius:999px;background:#25D366;color:#fff;font-weight:700;box-shadow:0 8px 18px rgba(37,211,102,0.25);text-decoration:none;}
      @media (max-width:480px){.success-container{padding-left:16px;padding-right:16px}.success-actions{flex-direction:column}.success-actions .btn-pri,.success-actions .btn-ghost{width:100%}.wa-btn{width:100%}}







      /* -- EMPTY STATE -- */







      .empty-state {







        display:flex; flex-direction:column;







        align-items:center; justify-content:center;







        padding:60px 20px 40px;







        text-align:center;







      }







      .empty-title {







        font-family:'Google Sans Display', sans-serif;







        font-size:20px; font-weight:700; color:#111111;







        margin:20px 0 8px;







      }







      .empty-sub {







        font-size:13px; color:#111111;







        margin-bottom:24px; line-height:1.5;







        max-width:260px;







      }















      /* -- BANNER CAROUSEL -- */







      .banner-wrap {







        margin:16px; border-radius:var(--radius);







        overflow:hidden; position:relative; height:160px;







      }







      .banner-track {







        display:flex; height:100%; width:100%;







        transition:transform .4s cubic-bezier(.4,0,.2,1);







      }







      .banner-slide {







        flex-shrink:0; width:100%; height:100%;







        position:relative; overflow:hidden;







      }







      .banner-bg {







        position:absolute; inset:0;







        background-size:cover; background-position:center;







      }







      .banner-overlay {







        position:absolute; inset:0;







        background:linear-gradient(135deg, rgba(13,6,0,.72) 0%, rgba(13,6,0,.12) 100%);







      }







      .banner-content {







        position:absolute; inset:0; padding:20px;







        display:flex; flex-direction:column; justify-content:flex-end;







      }







      .banner-eyebrow {







        font-size:10px; font-weight:700; color:rgba(255,255,255,.7);







        letter-spacing:1.5px; text-transform:uppercase; margin-bottom:4px;







      }







      .banner-title {







        font-family:'Google Sans Display', sans-serif;







        font-size:20px; font-weight:700; color:var(--md-on-primary);







        line-height:1.2; margin-bottom:8px;







      }







      .banner-cta {







        display:inline-flex; align-items:center; gap:6px;







        background:var(--md-primary); color:var(--md-on-primary);







        font-size:12px; font-weight:700; padding:7px 14px;







        border-radius:30px; width:fit-content; border:none; cursor:pointer;







      }







      .banner-dots {







        position:absolute; bottom:12px; right:16px;







        display:flex; gap:4px;







      }







      .banner-dot {







        width:6px; height:6px; border-radius:3px;







        background:rgba(255,255,255,.4);







        transition:all .3s; cursor:pointer;







      }







      .banner-dot.active { width:20px; background:white; }















      /* ---------------------------------------------------------------

         PROFESSIONAL RECEIPT REDESIGN v2.0

         Material 2 Aesthetic ? 1000+ Years of Receipt Design

         --------------------------------------------------------------- */



      .receipt-content {

        background: #FFFCFA;

        width: 100%;

        max-width: 100%;

        margin: 0 auto;

        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

        border-radius: 20px;

        padding: 28px 20px 0px;

        position: relative;

        animation: slideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;

        font-family: var(--font-b);

        border: 1px solid rgba(120, 75, 40, 0.08);

      }



      /* Remove decorative borders */

      .receipt-content::before,

      .receipt-content::after { display: none; }



      /* -- HEADER SECTION ? PREMIUM DESIGN ------------------------------------------- */

      .receipt-header-section {

        text-align: center;

        padding: 24px 16px;

        background: linear-gradient(135deg, #FFF8F6 0%, #FEF1EE 100%);

        border-radius: 20px;

        margin-bottom: 24px;

        border: 1px solid #F0E4DB;

      }



      .receipt-logo {

        font-family: 'Satisfy', cursive !important;

        font-size: 52px !important;

        font-style: normal !important;

        font-weight: 400 !important;

        color: var(--md-primary) !important;

        letter-spacing: 0.02em !important;

        line-height: 1 !important;

        margin-bottom: 4px !important;

      }



      .receipt-logo-sub {

        font-family: 'Google Sans', sans-serif;

        font-size: 13px;

        color: var(--md-primary);

        letter-spacing: 0.05em;

        text-transform: uppercase;

        font-weight: 700;

        margin-top: 8px;

        margin-bottom: 14px;

      }



      .receipt-phone {

        margin-top: 10px;

        font-size: 13px;

        color: var(--md-primary);

        letter-spacing: 0;

        font-weight: 500;

      }



      .receipt-phone a {

        color: var(--md-primary);

        text-decoration: none;

        font-weight: 700;

      }



      /* RECEIPT SCREEN SPACING OVERRIDE - Remove bottom padding for nav access */

      #sc-receipt {

        padding-bottom: 0 !important;

      }



      #sc-receipt .receipt-content {

        margin-bottom: 0 !important;

      }



      /* -- ORDER META SECTION ? PREMIUM+ LAYOUT --------------------------------------- */

      .receipt-title {

        font-size: 11px;

        font-weight: 800;

        letter-spacing: 0.12em;

        color: var(--md-primary);

        text-transform: uppercase;

        margin: 0 0 16px 0;

        text-align: center;

      }



      .receipt-info-section {

        background: linear-gradient(135deg, #FFFBF8 0%, #FEFAF7 100%);

        border-radius: 16px;

        padding: 18px 16px;

        margin-bottom: 20px;

        border: 1px solid #F0E4DB;

        box-shadow: 0 2px 8px rgba(31, 31, 31, 0.04);

      }



      .receipt-info-row {

        display: flex;

        justify-content: space-between;

        align-items: center;

        font-size: 13px;

        line-height: 1.6;

        color: #111111;

        padding: 10px 0;

        animation: fadeIn 0.4s ease both;

      }



      .receipt-info-row:not(:last-child) {

        padding-bottom: 14px;

        border-bottom: 1px solid #E8D5C8;

      }



      .receipt-info-row .label {

        color: var(--md-primary);

        font-size: 11px;

        font-weight: 600;

        letter-spacing: 0.03em;

      }



      .receipt-info-row .val {

        font-family: 'Google Sans', sans-serif;

        font-weight: 700;

        font-size: 14px;

        text-align: right;

        color: var(--md-primary);

        font-style: normal;

      }

      /* Make order id less prominent and receipt more prominent */
      .rct-id { font-size: 14px; font-weight: 700; color: #111111; }
      .rct-order-small { font-size: 11px; color: #111111; margin-top:6px; }
      .rct-meta-val.receipt { font-size:18px; font-weight:800; color: #111111; }



      .receipt-status-badge {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 8px;

        padding: 10px 18px;

        border-radius: 100px;

        font-size: 12px;

        font-weight: 700;

        letter-spacing: 0.05em;

        text-transform: uppercase;

        box-shadow: 0 4px 12px rgba(31, 31, 31, 0.12);

        font-family: 'Google Sans', sans-serif;

      }



      .receipt-status-badge.pend {

        background: linear-gradient(135deg, #FFE8D3 0%, #FFD9B3 100%);

        color: #B8390A;

      }



      .receipt-status-badge.shipped {

        background: linear-gradient(135deg, #BBDEFB 0%, #90CAF9 100%);

        color: #0D47A1;

      }



      .receipt-status-badge.delv {

        background: linear-gradient(135deg, #C8E6C9 0%, #A5D6A7 100%);

        color: #0B3D2C;

      }



      .receipt-status-badge.canc {

        background: linear-gradient(135deg, #FFCDD2 0%, #EF9A9A 100%);

        color: #8B0000;

      }



      /* -- DIVIDER (MODERN) ----------------------------------------- */

      .receipt-dash {

        border: none;

        border-top: 1px solid rgba(120, 75, 40, 0.1);

        margin: 14px 0;

      }



      .receipt-dash-thick {

        border: none;

        border-top: 1px solid rgba(120, 75, 40, 0.12);

        margin: 16px 0;

      }



      .receipt-dash-double {

        border: none;

        border-top: 1px solid rgba(120, 75, 40, 0.12);

        margin: 16px 0;

      }



      /* -- ITEMS SECTION (PREMIUM GRID LAYOUT) ------------------------------ */

      .receipt-items-header {

        display: flex;

        align-items: center;

        gap: 10px;

        min-width: 0;

        font-size: 10px;

        font-weight: 800;

        letter-spacing: 0.12em;

        color: #111111;

        text-transform: uppercase;

        margin-bottom: 0;

        padding: 12px 14px;

        background: #FFFBF8;

        border-radius: 12px 12px 0 0;

        border-bottom: 2px solid #E8D5C8;

      }



      .receipt-item {

        margin: 0;

        padding: 12px 14px;

        display: flex;

        align-items: flex-start;

        gap: 10px;

        min-width: 0;

        animation: fadeIn 0.4s ease both;

        background: var(--md-surface);

        border-bottom: 1px solid #F0E4DB;

      }



      .receipt-item:last-child {

        border-bottom: none;

        border-radius: 0 0 12px 12px;

      }



      .receipt-item-row1 {

        display: contents;

      }



      .receipt-item-main {

        display: flex;

        flex-direction: column;

        gap: 3px;

        flex: 1 1 0;

        min-width: 0;

        overflow: hidden;

      }



      .receipt-item-name {

        font-size: 13px;

        font-weight: 700;

        color: var(--md-primary);

        line-height: 1.35;

        word-break: break-word;

        overflow-wrap: anywhere;

        hyphens: auto;

      }



      .receipt-items-header > span:nth-child(1),
      .receipt-item-main {
        flex: 1 1 0;
        min-width: 0;
      }

      .receipt-items-header > span:nth-child(2),
      .receipt-item-qty {
        flex: 0 0 48px;
        text-align: right;
        white-space: nowrap;
      }

      .receipt-items-header > span:nth-child(3),
      .receipt-item-price {
        flex: 0 0 68px;
        text-align: right;
        white-space: nowrap;
      }

      .receipt-items-header > span:nth-child(4),
      .receipt-item-total {
        flex: 0 0 84px;
        text-align: right;
        white-space: nowrap;
        font-weight: 800;
      }

      .receipt-item-qty,
      .receipt-item-price,
      .receipt-item-total {
        font-size: 12px;
        font-weight: 700;
        color: var(--md-primary);
        align-self: center;
      }



      /* -- SUMMARY SECTION ? PREMIUM TOTALS ------------------------------------------ */

      .receipt-subtotal-row {

        display: flex;

        justify-content: space-between;

        font-size: 15px;

        color: #111111;

        line-height: 1.8;

        font-weight: 700;

        margin-top: 20px;

        padding: 18px 16px;

        background: linear-gradient(135deg, #FFF8F6 0%, #FEF1EE 100%);

        border-radius: 14px;

        border: 1.5px solid #E8D5C8;

        box-shadow: 0 2px 8px rgba(31, 31, 31, 0.04);

      }



      .receipt-subtotal-row span:last-child {

        font-family: 'Google Sans', sans-serif;

        font-style: normal;

        color: #111111;

        font-weight: 800;

        font-size: 20px;

        letter-spacing: -0.02em;

      }



      .receipt-total-row {

        display: flex;

        justify-content: space-between;

        font-size: 12px;

        color: #111111;

        line-height: 1.8;

        margin-top: 14px;

        padding: 8px 0;

      }



      .receipt-total-row.grand {

        font-size: 13px;

        font-weight: 700;

        color: #111111;

        line-height: 1.8;

        margin-top: 14px;

        padding-top: 8px;

        border-top: none;

      }



      .receipt-total-row.grand .val {

        font-size: 18px;

      }



      /* -- LOYALTY POINTS (PREMIUM+ SHOWCASE) ---------------------------------------- */

      .receipt-points-box {

        border: 2px solid var(--md-primary);

        border-radius: 20px;

        padding: 28px 20px;

        text-align: center;

        margin: 28px 0 24px;

        animation: pulseBadge 0.4s ease 0.8s both;

        background: linear-gradient(135deg, #FFF8F6 0%, #FEF1EE 100%);

        box-shadow: 0 8px 24px color-mix(in srgb, var(--md-primary) 14%, transparent);

      }



      .receipt-points-title {

        font-size: 10px;

        letter-spacing: 0.12em;

        color: var(--md-primary);

        font-weight: 800;

        text-transform: uppercase;

        margin-bottom: 8px;

      }



      .receipt-points-number {

        font-family: 'Google Sans Display', sans-serif;

        font-size: 54px;

        font-style: normal;

        font-weight: 800;

        color: var(--md-primary);

        line-height: 1;

        letter-spacing: -0.02em;

        margin: 6px 0;

      }



      .receipt-points-label {

        font-size: 12px;

        color: var(--md-primary);

        margin-top: 8px;

        letter-spacing: 0.04em;

        font-weight: 600;

      }



      .receipt-points-badge {

        display: inline-block;

        background: linear-gradient(135deg, var(--md-primary) 0%, var(--md-primary-dark) 100%);

        color: var(--md-on-primary);

        font-size: 11px;

        font-weight: 800;

        letter-spacing: 0.08em;

        padding: 10px 20px;

        border-radius: 100px;

        margin-top: 14px;

        text-transform: uppercase;

        box-shadow: 0 4px 12px color-mix(in srgb, var(--md-primary) 32%, transparent);

      }



      /* -- BARCODE SECTION (PREMIUM PRESENTATION) ------------------------------------- */

      .receipt-barcode-wrap {

        text-align: center;

        margin: 24px 0 8px;

        padding: 18px 14px;

        background: #FFFBF8;

        border-radius: 12px;

        border: 1px solid #E8D5C8;

        box-shadow: 0 2px 8px rgba(31, 31, 31, 0.04);

      }



      .receipt-barcode {

        display: inline-flex;

        align-items: stretch;

        height: 60px;

        gap: 0;

        background: #FEFAF7;

        padding: 0 8px;

        border-radius: 4px;

      }



      .receipt-bar {

        display: inline-block;

        height: 100%;

      }



      .receipt-barcode-num {

        font-family: 'Google Sans', sans-serif;

        font-size: 12px;

        color: var(--md-primary);

        letter-spacing: 0.12em;

        margin-top: 10px;

        font-weight: 800;

      }



      /* -- FOOTER SECTION ? PREMIUM+ GRATITUDE ------------------------------------------ */

      .receipt-footer-section {

        text-align: center;

        padding-top: 24px;

        padding-bottom: 0;

        border-top: 2px dashed #E8D5C8;

        margin-top: 24px;

      }



      .receipt-thanks {

        font-size: 22px !important;

        font-style: normal !important;

        font-weight: 400 !important;

        color: var(--md-primary) !important;

        margin-bottom: 10px !important;

        font-family: 'Satisfy', cursive !important;

        letter-spacing: 0.02em !important;

      }



      .receipt-tagline {

        font-size: 13px;

        color: var(--md-primary);

        letter-spacing: 0.05em;

        margin-bottom: 4px;

        font-weight: 600;

      }



      .receipt-powered {

        font-family: 'Google Sans', sans-serif;

        font-size: 11px;

        font-style: normal;

        color: var(--md-primary);

        letter-spacing: 0.12em;

        text-transform: uppercase;

        margin-top: 8px;

        font-weight: 600;

      }



      /* -- ANIMATIONS ---------------------------------------------- */

      @keyframes slideUp {

        from {

          opacity: 0;

          transform: translateY(24px);

        }

        to {

          opacity: 1;

          transform: translateY(0);

        }

      }



      @keyframes fadeIn {

        from {

          opacity: 0;

        }

        to {

          opacity: 1;

        }

      }



      @keyframes pulseBadge {

        0% {

          transform: scale(0.97);

          opacity: 0;

        }

        60% {

          transform: scale(1.02);

          opacity: 1;

        }

        100% {

          transform: scale(1);

        }

      }



      /* -- PRINT OPTIMIZATION -------------------------------------- */

      @media print {

        body {

          background: #fff !important;

          padding: 0;

        }

        #app, .tbar, .nav, .receipt-actions {

          display: none !important;

        }

        .receipt-content {

          box-shadow: none !important;

          max-width: 100% !important;

          border-radius: 0 !important;

          animation: none !important;

          border: none !important;

        }

        .receipt-item, .receipt-info-row {

          animation: none !important;

        }

        .receipt-points-box {

          animation: none !important;

        }

      }







      @media print{body{background:white !important;padding:0;}#app,.tbar,.nav,.receipt-actions{display:none !important;}.receipt-content{box-shadow:none !important;max-width:100% !important;border-radius:0 !important;animation:none !important;}.receipt-content::before,.receipt-content::after{display:none;}.receipt-item,.receipt-info-row{animation:none !important;}.receipt-points-box{animation:none !important;}}







      .ord-tabs{display:flex;border-top:1px solid rgba(120,75,40,0.08);background:var(--md-surface-1);}



      .otab{flex:1;text-align:center;padding:13px 0;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:rgba(120,75,40,0.5);border-bottom:3px solid transparent;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);}



      .otab.on{color:#111111;border-bottom-color:#111111;}



      .more-btn{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--md-on-primary);font-size:24px;cursor:pointer;transition:background var(--dur);border:none;background:none;padding:0;}



      .more-btn:hover{background:rgba(255,255,255,.1);}



      .ord-card{background:var(--sur);margin:8px 12px;border-radius:var(--r16);padding:16px;cursor:pointer;box-shadow:var(--e1);transition:all var(--dur);}



      .ord-card:hover{box-shadow:var(--e3);}



      .ord-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}



      .ord-id{font-size:15px;font-weight:900;color:#111111;}



      .ord-date{font-size:12px;color:#111111;margin-top:2px;}



      .ord-items{font-size:13px;color:#111111;line-height:1.5;margin-bottom:12px;}



      .ord-bot{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--sur2);}



      .ord-total{font-size:18px;font-weight:900;color:var(--md-primary);}



      .ord-pts{background:var(--pri-lt);color:#111111;font-size:12px;font-weight:700;padding:4px 12px;border-radius:var(--rpill);}



      .empty-st{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:14px;text-align:center;padding:40px;}



      .empty-st svg{width:72px;height:72px;stroke:var(--out);fill:none;stroke-width:1.5;}



      .empty-st-ttl{font-size:18px;font-weight:800;color:#111111;}



      .empty-st-sub{font-size:14px;color:#111111;}