/* tokens removed — single source is tokens.css (see static/css/tokens.css) */

      /* Micro-interactions & motion polish */
      .btn, .btn-filled, .btn-ghost, .ripple-btn { transition: transform var(--md-duration-short) var(--md-easing), box-shadow var(--md-duration-short) var(--md-easing), background-color var(--md-duration-short) var(--md-easing); }
      .btn:active, .btn-filled:active, .btn-ghost:active, .ripple-btn:active { transform: translateY(1px) scale(0.995); }
      .btn:hover, .btn-filled:hover, .btn-ghost:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.08); }

      /* Loading button */
      .btn.loading, .btn-filled.loading { pointer-events: none; opacity: 0.9; }
      .btn.loading::after, .btn-filled.loading::after {
        content: '';
        display: inline-block;
        width: 16px; height:16px; margin-left:8px; vertical-align:middle;
        border-radius:50%; border:2px solid rgba(255,255,255,0.35); border-top-color:var(--md-on-primary); animation: ipoo-spin 900ms linear infinite;
      }

      @keyframes ipoo-spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }

      /* Screen transitions */
      .screen { transition: opacity var(--md-duration-medium) var(--md-easing), transform var(--md-duration-medium) var(--md-easing); }
      .screen.hidden { opacity:0; transform: translateY(6px); pointer-events:none; }

      /* Badge pop */
      .floating-cart-badge, #nav-badge, #cbadge, #cbadge2 { transition: transform 260ms var(--md-easing), box-shadow 260ms var(--md-easing); }
      .badge-pop { animation: ipoo-badge-pop 420ms cubic-bezier(.2,.9,.2,1); }
      @keyframes ipoo-badge-pop { 0% { transform: scale(1); } 30% { transform: scale(1.36); } 60% { transform: scale(0.96); } 100% { transform: scale(1); } }

      /* Subtle card elevation on hover */
      .checkout-card, .summary-card, .support-card { transition: box-shadow var(--md-duration-short) var(--md-easing), transform var(--md-duration-short) var(--md-easing); }



      @font-face {

        font-family: 'Satisfy';

        font-style: normal;

        font-weight: 400;

        font-display: swap;

        src: url('https://fonts.gstatic.com/s/satisfy/v21/rP2Hp2ywxg3Z9ZRvUjVHqvesZW2xOQ-xsNqO47m55DA.woff2') format('woff2'),

             url('https://fonts.gstatic.com/s/satisfy/v21/rP2Hp2ywxg3Z9ZRvUjVHqvesZW2xOQ-xsNqO47m55DA.ttf') format('truetype');

      }









      * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }



            /* Force Satisfy font on receipt elements and homepage greeting only */

      .receipt-logo, .receipt-thanks, .greeting-top, .greeting-name { font-family: 'Satisfy', cursive !important; }



      html { height:100%; height:100dvh; overflow:hidden; overflow-x:hidden; overflow-y:hidden; }
      body { height:100%; height:100dvh; overflow:hidden; overflow-x:hidden; overflow-y:hidden; font-family:'DM Sans', 'Google Sans', Roboto, sans-serif; background:var(--md-surface) !important; }















      #shell {







        position:fixed; left:50%; transform:translateX(-50%); top:0; bottom:0; width:min(430px, 100vw) !important; max-width:100vw !important; height:100dvh; z-index:10;







        margin:0; background:var(--md-surface);







        display:flex; flex-direction:column;







        overflow:hidden;







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







      }















      .screen {
        position:fixed;
        left:50%;
        transform:translateX(-50%);
        top:0;
        bottom:0;
        width:min(430px, 100vw) !important;
        max-width:100vw !important;
        display:none;
        flex-direction:column;
        background:var(--md-surface) !important;
        opacity:0;
        pointer-events:none;
        overflow:hidden;
        box-shadow: 0 0 0 1px rgba(0,0,0,.15);
















        display:flex; flex-direction:column;







        padding-bottom:0;







        opacity:0; pointer-events:none; visibility:hidden;
















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







        overflow:hidden;







        z-index:1;







      }







      .screen.active {







        opacity:1; pointer-events:auto; visibility:visible; display:flex; z-index:5;







      }







      .screen:not(.active) {
        opacity:0 !important;
        pointer-events:none !important;
        visibility:hidden !important;
        display:none !important;
      }







      .screen.exit-left { transform:translateX(-24px); opacity:0; visibility:hidden; }















      .scroll {







        flex:1; overflow-y:auto; overflow-x:hidden;







        -webkit-overflow-scrolling:touch;







        scrollbar-width:none;







        padding-bottom:0;







      }























      .scroll::-webkit-scrollbar { display:none; }















      .topbar {







        height:64px; padding:12px 16px; box-sizing:border-box;







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







        background:var(--md-surface); flex-shrink:0;







        position:relative; z-index:10;







      }







      .topbar-title {







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







        font-size:22px; font-weight:700; color:#111111; min-width:0;







        flex:1; letter-spacing:-0.5px;







      }







      .topbar-logo {







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







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







        letter-spacing:-2px;
        height: 32px;
        line-height: 32px;







      }







      .topbar-logo span { color: var(--md-on-surface); }







      .icon-btn {







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







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







        background:none; border:none; cursor:pointer;







        color:#111111; transition:background .2s cubic-bezier(.4,0,.2,1);







        position:relative;







      }







      .icon-btn:hover { background:var(--md-surface-2); }







      .icon-btn:active { background:var(--md-surface-1); }







      .badge {







        position:absolute; top:5px; right:5px;







        min-width:16px; height:16px; border-radius:8px;







        padding:0 4px;







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







        font-size:9px; font-weight:700;







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







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







      }















      .nav {
        /* PROTECTIVE NAV STYLING - DO NOT OVERRIDE */
        position: fixed !important;
        bottom: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: min(430px, 100vw) !important;
        max-width: 100vw !important;
        height: 56px !important;
        z-index: 50000 !important;
        display: flex !important;
        flex-shrink: 0 !important;
        background: var(--md-surface) !important;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.06) !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        border-top: 1px solid var(--border) !important;
      }







      .ni {







        flex:1; display:flex; flex-direction:column;







        align-items:center; justify-content:center; gap:2px;







        cursor:pointer; color:#111111; position:relative;







        padding-top:6px; transition:color .2s;







      }







      /* .ni CSS DELETED - nav buttons removed */


      .ni-pill {







        width:48px; height:28px; border-radius:14px;







        background:transparent; display:flex; align-items:center;







        justify-content:center; position:relative;







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







      }







      .ni.on .ni-pill { background:rgba(255,107,0,0.12); }







      .nbadge {

        position: absolute;

        top: -4px;

        right: -4px;

        min-width: 22px;

        height: 22px;

        border-radius: 50%;
        background: var(--md-primary) !important;
        color: var(--md-on-primary) !important;
        font-size: 12px;
        font-weight: 800;
        display: flex !important;
        align-items: center;
        justify-content: center;
        line-height: 1;
        padding: 0 4px;
        border: 2px solid var(--md-surface-2);

      }

      /* Force-specific styles for the cart badge to override inline or other rules */
      #nav-badge {
        background: var(--md-primary) !important;
        color: var(--md-on-primary) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 6px !important;
        min-width: 18px !important;
        height: 18px !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        border: 2px solid var(--md-surface-2) !important;
      }

      .floating-cart-badge {
        background: var(--md-primary) !important;
        color: var(--md-on-primary) !important;
        fill: currentColor !important;
        border-radius: 50% !important;
        min-width: 18px !important;
        height: 18px !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 4px !important;
        border: 2px solid var(--md-surface-2) !important;
      }

      /* Ensure filled buttons always use on-primary (white) for text/icons */
      .btn-filled, .btn-filled * {
        color: var(--md-on-primary) !important;
        fill: currentColor !important;
      }

      /* Small variant enforcement */
      .btn-filled[style] { color: var(--md-on-primary) !important; }
      
      /* Higher-specificity overrides for inner elements that may be targeted by broad global rules */
      .btn-filled span,
      .btn-filled .text,
      .btn-filled .label,
      .btn-filled .pcard-name,
      .btn-filled .pcard-desc,
      .btn-filled strong,
      .btn-filled b,
      .add-to-cart span,
      .add-to-cart .text {
        color: var(--md-on-primary) !important;
        fill: currentColor !important;
      }







      .ni svg { width:20px; height:20px; fill:currentColor;







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







      }







      .ni.on svg { transform:scale(1.08); }







      .ni-lbl { font-size:10px; font-weight:500; letter-spacing:0.3px; }















      .pill-tabs {







        display:flex; gap:6px; padding:12px 16px;







        overflow-x:auto; scrollbar-width:none; flex-shrink:0;







      }







      .pill-tabs::-webkit-scrollbar { display:none; }







      .pill {







        flex-shrink:0; padding:8px 18px; border-radius:var(--radius-full);







        font-size:13px; font-weight:600; cursor:pointer;







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







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







        transition:all .2s cubic-bezier(.4,0,.2,1); white-space:nowrap;







      }







      .pill.active {







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







        box-shadow:0 2px 8px rgba(28,20,16,0.2);







      }















      .products-grid {







        display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));







        gap:16px; padding:16px 16px 96px;







      }















      .cat-grid {







        display:block; width:100%; padding:0; margin:0; background:var(--md-surface);







      }















      .cat-chips {







        display:flex; gap:8px; padding:12px 16px 16px;







        overflow-x:auto; -webkit-overflow-scrolling:touch;







        scrollbar-width:none; flex-shrink:0;







        background:var(--md-surface);







      }







      .cat-chips::-webkit-scrollbar { display:none; }















      .chip {







        flex-shrink:0; padding:8px 14px; border-radius:100px; display:inline-flex; align-items:center;







        font-size:13px; font-weight:600; cursor:pointer;







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







        color:#111111; transition:all .2s cubic-bezier(.4,0,.2,1);







        white-space:nowrap;







      }







      .chip.on {







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







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







      }







      .product-card {







        background:var(--surface); border-radius:16px;







        overflow:hidden; box-shadow:0 2px 4px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.06);







        cursor:pointer; transition:all .28s cubic-bezier(.4,0,.2,1);







        position:relative;







        border:1px solid rgba(0,0,0,0.06);







      }







      .product-card:hover {



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



        transform:translateY(-4px);



      }







      .product-card:active { transform:scale(.96); box-shadow:0 2px 4px rgba(0,0,0,0.08); }







      .product-img-wrap {







        width:100%; aspect-ratio:1/1; background:linear-gradient(135deg, var(--md-surface) 0%, var(--md-surface-1) 100%);







        position:relative; overflow:hidden;







      }







      .product-img {







        width:100%; height:100%; object-fit:cover;







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







      }







      .product-card:hover .product-img { transform:scale(1.08); }







      .product-img-fallback {







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







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







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







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







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







      }







      .product-info { padding:12px; background:#FFF8F6; }







      .prod-qty-ctrl {
        position: absolute;
        bottom: 8px;
        right: 8px;
        display: flex;
        align-items: center;
        height: 34px;
        background: var(--md-primary);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px color-mix(in srgb, var(--md-primary) 35%, transparent);
        z-index: 2;
        animation: fabPop 200ms cubic-bezier(.2,0,0,1);
        backdrop-filter: blur(4px);
      }

      .pqb {
        width: 27px;
        height: 34px;
        background: transparent;
        border: none;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 150ms;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
      }

      .pqb:active { background: rgba(0,0,0,0.18); }

      .pqn {
        min-width: 20px;
        text-align: center;
        color: #fff;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: .5px;
      }

      .product-name {







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



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







        line-height:1.4; margin-bottom:4px; background:#F5D7B8; padding:6px 8px; border-radius:4px;







        display:-webkit-box; -webkit-line-clamp:2;







        -webkit-box-orient:vertical; overflow:hidden;







      }







      .product-sub { font-size:11px; color:#111111; margin-bottom:9px; font-weight:500; background:#F5F0EB; padding:4px 6px; border-radius:3px; }







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







      .product-price {







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







        font-size:20px; font-weight:700; color:#111111; background:#FDF8F4; padding:8px 12px; border-radius:6px; border-left:4px solid var(--md-primary);







      }







      .add-btn {

        width:44px; height:44px; border-radius:8px;

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

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

        color:var(--md-on-primary); flex-shrink:0;

        transition:all 200ms cubic-bezier(.2,0,0,1);

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

        font-size:13px; font-weight:700;

      }

      .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%);

        transform:scale(1.05);

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

      }

      .add-btn:active {

        transform:scale(.95);

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

      }







      @keyframes fabPop {



        from { transform: scale(0.6); opacity: 0.5; }



        to { transform: scale(1); opacity: 1; }



      }




      .product-name {

        font-family: 'Google Sans', sans-serif;
        font-size: 17px;
        line-height: 1.3;
        font-weight: 600;
        letter-spacing: -0.1px;
        color: #111111;
        margin-bottom: 4px;
        background: #F5D7B8;
        padding: 6px 8px;
        border-radius: 4px;
        display: -webkit-box;
        -webkit-line-clamp: 2;

      }







      .tag-badge {







        position:absolute; top:10px; left:10px;







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







        font-size:10px; font-weight:700; padding:3px 9px;







        border-radius:var(--radius-full); letter-spacing:0.3px;







      }















      /* --- CATEGORIES GRID --- */



      .categories-scroll {



        display: flex !important;



        flex-wrap: wrap !important;



        gap: 12px;



        padding: 14px 14px 0;



        overflow: visible !important;



        visibility: visible !important;



        justify-content: center;



        align-items: flex-start;



        width: 100% !important;



        background: transparent;



        min-height: auto;



      }







      .section-header {



        display: flex;



        align-items: center;



        justify-content: space-between;



        padding: 16px 16px 0;



        width: 100%;



        box-sizing: border-box;



        flex-basis: 100%;



        order: -1;



        background: transparent;



        min-height: 40px;



        height: auto;



        flex-shrink: 0;



      }



      .section-title {



        font-family: 'Instrument Serif', serif;



        font-style: italic;



        font-size: 16px;



        font-weight: 500;



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



        letter-spacing: 0.15px;



        display: block;



        visibility: visible;



        opacity: 1;



        margin: 0;



        padding: 0;



      }



      .section-sub {



        font-size: 12px;



        color: #A08070;



        font-weight: 600;



      }







      /* --- CATEGORY CARD --- */



      .cat-card {



        display: flex;



        flex-direction: column;



        align-items: center;



        gap: 10px;



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



        border-radius: var(--radius-card);



        padding: 16px 10px 14px;



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



        box-shadow: var(--shadow-card);



        cursor: pointer;



        order: 1;



        flex-shrink: 0;



        width: 112px;



        margin: 0 5px;



        text-align: center;



        position: relative;



        overflow: hidden;



        transition: transform 0.28s cubic-bezier(.34,1.56,.64,1),



                    box-shadow 0.28s cubic-bezier(.4,0,.2,1);



        opacity: 0;



        animation: cardIn 0.45s cubic-bezier(.4,0,.2,1) forwards;



      }







      .cat-card:nth-child(2)  { animation-delay: .04s }



      .cat-card:nth-child(3)  { animation-delay: .08s }



      .cat-card:nth-child(4)  { animation-delay: .12s }



      .cat-card:nth-child(5)  { animation-delay: .16s }



      .cat-card:nth-child(6)  { animation-delay: .20s }



      .cat-card:nth-child(7)  { animation-delay: .24s }



      .cat-card:nth-child(8)  { animation-delay: .28s }



      .cat-card:nth-child(9)  { animation-delay: .32s }



      .cat-card:nth-child(10) { animation-delay: .36s }



      .cat-card:nth-child(11) { animation-delay: .40s }



      .cat-card:nth-child(12) { animation-delay: .44s }



      .cat-card:nth-child(13) { animation-delay: .48s }



      .cat-card:nth-child(14) { animation-delay: .52s }



      .cat-card:nth-child(15) { animation-delay: .56s }







      @keyframes cardIn {



        from { opacity:0; transform: translateY(20px) scale(0.94); filter: blur(4px); }



        to   { opacity:1; transform: translateY(0) scale(1); filter: blur(0); }



      }







      @keyframes iconGlow {



        0%, 100% { filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--md-primary) 10%, transparent)); }



        50% { filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--md-primary) 20%, transparent)); }



      }







      .cat-card::before {



        content: '';



        position: absolute;



        inset: 0;



        background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 60%);



        border-radius: var(--radius-card);



        pointer-events: none;



        opacity: 0;



        transition: opacity 0.25s;



      }







      .cat-card::after {



        content: '';



        position: absolute;



        top: 0; left: 16px; right: 16px;



        height: 2px;



        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--md-primary) 35%, transparent), transparent);



        border-radius: 0 0 2px 2px;



        opacity: 0;



        transition: opacity 0.25s;



      }







      .cat-card:hover {



        transform: translateY(-8px) scale(1.04);



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



        border-color: color-mix(in srgb, var(--md-primary) 25%, transparent);



        background: linear-gradient(180deg, #fff 0%, #fafaf8 100%);



      }



      .cat-card:hover::before { opacity: 1; }



      .cat-card:hover::after  { opacity: 1; transform: scaleX(1.2); }



      .cat-card:hover .icon-wrap { transform: scale(1.15) rotate(-4deg); filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--md-primary) 25%, transparent)); }



      .cat-card:hover .cat-name { color: var(--md-primary); font-weight: 800; }







      .cat-card:active {



        transform: scale(0.95) !important;



        box-shadow: var(--shadow-card) !important;



        transition-duration: 0.1s;



      }







      /* --- ICON WRAPPER --- */



      .icon-wrap {



        width: 68px;



        height: 68px;



        border-radius: 20px;



        display: flex;



        align-items: center;



        justify-content: center;



        transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease, filter 0.3s ease;



        position: relative;



        flex-shrink: 0;



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



      }







      .icon-wrap svg {



        width: 54px;



        height: 54px;



        filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12));



      }







      /* --- LABELS --- */



      .cat-name {



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

        font-size: 11px;



        font-weight: 700;



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



        line-height: 1.3;



        transition: color 0.2s;



        letter-spacing: -0.1px;



      }



      .cat-sub {



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

        font-size: 9.5px;



        font-weight: 600;



        color: var(--md-primary);



        opacity: 0.85;



        letter-spacing: 0.2px;



      }







      /* --- ICON BG COLORS --- */



      .bg-orange { background: linear-gradient(145deg, #FFF1E8, #FFE0CC); box-shadow: 0 8px 16px rgba(255,124,0,0.15) inset; }

      .bg-orange:hover { box-shadow: 0 8px 16px rgba(255,124,0,0.25), 0 0 20px rgba(255,124,0,0.15); }



      .bg-green { background: linear-gradient(145deg, #E8F7EE, #CCF0DA); box-shadow: 0 8px 16px rgba(76,175,80,0.15) inset; }

      .bg-green:hover { box-shadow: 0 8px 16px rgba(76,175,80,0.25), 0 0 20px rgba(76,175,80,0.15); }



      .bg-blue { background: linear-gradient(145deg, #E8F0FF, #CDD9FF); box-shadow: 0 8px 16px rgba(33,150,243,0.15) inset; }

      .bg-blue:hover { box-shadow: 0 8px 16px rgba(33,150,243,0.25), 0 0 20px rgba(33,150,243,0.15); }



      .bg-gold { background: linear-gradient(145deg, #FFF7E0, #FFECB0); box-shadow: 0 8px 16px rgba(255,193,7,0.15) inset; }

      .bg-gold:hover { box-shadow: 0 8px 16px rgba(255,193,7,0.25), 0 0 20px rgba(255,193,7,0.15); }



      .bg-red { background: linear-gradient(145deg, #FFECE8, #FFD5CC); box-shadow: 0 8px 16px rgba(239,83,80,0.15) inset; }

      .bg-red:hover { box-shadow: 0 8px 16px rgba(239,83,80,0.25), 0 0 20px rgba(239,83,80,0.15); }



      .bg-teal   { background: linear-gradient(145deg, #E0F7F5, #BDEAE8); }



      .bg-purple { background: linear-gradient(145deg, #F0EAFF, #DDD0FF); }



      .bg-pink   { background: linear-gradient(145deg, #FFE8F5, #FFCCEA); }



      .bg-sage   { background: linear-gradient(145deg, #EAF5E8, #CEEACC); }



      .bg-amber  { background: linear-gradient(145deg, #FFF3E0, #FFE0A0); }



      .bg-cyan   { background: linear-gradient(145deg, #E0F8FF, #B8EDFF); }



      .bg-lime   { background: linear-gradient(145deg, #F0FFE0, #D8F9B0); }



      .bg-berry  { background: linear-gradient(145deg, #F5E8FF, #E8C8FF); }



      .bg-coral  { background: linear-gradient(145deg, #FFE8E8, #FFD0D0); }















      .banner-wrap {







        margin:16px 16px 0 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; }































      .greeting-section {







        padding:4px 20px 12px;







        display:flex; align-items:center; justify-content:space-between; gap:12px;







      }







      .greeting-top {







        font-size:13px; color:#111111; font-weight:500; margin-bottom:3px;







        letter-spacing:0.1px;







      }







      .greeting-top[data-greeting]::before {



        display: inline-block;



        margin-right: 8px;



        font-size: 16px;



        vertical-align: middle;



      }











      .greeting-name {







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







        font-size:28px; font-weight:400; color:#111111;







        letter-spacing:0; line-height:1.2;







      }







      .avatar-wrap {







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







        background-color: white;







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







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







        flex-shrink:0; box-shadow:0 2px 8px color-mix(in srgb, var(--md-primary) 35%, transparent);







      }















      .section-header {







        display:flex; align-items:center; justify-content:space-between; flex-basis: 100%; width: 100%; box-sizing: border-box; order: -1; background: transparent; flex-shrink: 0;







        height: 32px;

        margin-bottom: 12px;

        padding:0 20px;







      }







      .section-title {







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







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







        letter-spacing:-0.4px;







      }







      .see-all {







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







        border:none; background:none; cursor:pointer;







        padding:6px 12px; border-radius:var(--radius-full);







        transition:background .18s;







      }







      .see-all:active { background:var(--md-primary-container); }















      .cat-scroll {







        display:flex; gap:10px; padding:0 16px 16px;







        overflow-x:auto; scrollbar-width:none;







      }







      .cat-scroll::-webkit-scrollbar { display:none; }







      .cat-chip {







        flex-shrink:0; display:flex; flex-direction:column;







        align-items:center; gap:6px; cursor:pointer;







        width:64px;







      }







      .cat-icon-wrap {







        width:54px; height:54px; border-radius:18px;







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







        background:var(--md-surface-1); transition:all .18s;







      }







      .cat-chip.active .cat-icon-wrap { background:var(--md-primary); color:var(--md-on-primary); border:2px solid rgba(255,255,255,0.5); box-shadow:0 4px 12px color-mix(in srgb, var(--md-primary) 50%, transparent); transform:scale(1.1);







      }







      .cat-chip.active .cat-icon-wrap svg { color:var(--md-on-primary); }







      .cat-label {







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







        text-align:center; line-height:1.2;







      }







      .cat-chip.active .cat-label { color:#111111; background:color-mix(in srgb, var(--md-primary) 15%, transparent); padding:2px 6px; border-radius:8px; font-weight:700; }















      .h-scroll {

        display:flex; gap:12px; padding:0 16px 8px;

        overflow-x:auto; scrollbar-width:none;

      }



      .h-scroll::-webkit-scrollbar { display:none; }



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

         TOP SELLERS CAROUSEL

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

      .seller-carousel-wrap{

        padding:0 4px 20px;

        overflow:hidden;

      }

      .seller-carousel{

        display:flex;

        gap:12px;

        overflow-x:auto;

        scroll-behavior:smooth;

        padding:8px 12px;

        scroll-snap-type:x mandatory;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

      }

      .seller-carousel::-webkit-scrollbar{display:none;}

      .seller-card{

        position:relative;

        flex:0 0 172px;

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

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

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

        overflow:hidden;

        scroll-snap-align:start;

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

        display:flex;

        flex-direction:column;

        cursor:pointer;

        min-height:0;

      }

      .seller-card:hover{

        border-color:#111111;

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

        transform:translateY(-2px);

      }

      .seller-card-img{

        width:100%;

        height:166px;

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

        display:flex;

        align-items:center;

        justify-content:center;

        font-size:48px;

        position:relative;

        overflow:hidden;

      }

      .seller-card-img::before{

        content:'';

        position:absolute;

        inset:0;

        background:repeating-linear-gradient(

          45deg,

          transparent,

          transparent 10px,

          rgba(255,255,255,.05) 10px,

          rgba(255,255,255,.05) 20px

        );

        pointer-events:none;

      }

      .seller-card-badge{

        position:absolute;

        top:6px;

        right:6px;

        background:var(--md-error);

        color:white;

        font-size:11px;

        font-weight:700;

        padding:4px 8px;

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

        letter-spacing:.5px;

      }

      .seller-card-body{

        padding:10px 10px 8px;

        flex:1;

        display:flex;

        flex-direction:column;

        gap:3px;

        min-height:0;

      }

      .seller-card-name{

        font-size:11px;

        font-weight:700;

        color:#111111;

        line-height:1.18;
        margin-bottom:2px;
        display:-webkit-box;

        -webkit-line-clamp:2;

        -webkit-box-orient:vertical;

        overflow:hidden;

      }

      .seller-card-price{

        font-size:12px;

        font-weight:800;

        color:#111111;

      }

      .seller-card-unit{

        font-size:9px;

        color:#111111;

        font-weight:500;

      }

      .seller-card-stock{

        font-size:8px;

        color:var(--md-success);

        font-weight:500;

        line-height:1.1;

      }

      .seller-card-btn{

        margin-top:auto;

        width:100%;

        padding:10px 12px;

        background:var(--md-primary);

        color:white;

        border-radius:999px;

        font-size:12px;

        font-weight:700;

        letter-spacing:0.2px;

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

        cursor:pointer;

        border:none;

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

      }

      .seller-card-btn:hover{

        background:#C53000;

        transform:translateY(-1px);

      }

      .seller-card-btn:active{

        transform:scale(.98);

      }







      .h-product-card {







        flex-shrink:0; width:148px; background:var(--surface);







        border-radius:var(--radius); overflow:hidden;







        box-shadow:var(--shadow-card); cursor:pointer;







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







        border:1px solid rgba(0,0,0,0.04);







      }







      .h-product-card:active { transform:scale(.96); box-shadow:none; }







      .h-img-wrap {







        width:100%; height:118px; background:var(--md-surface-1);







        overflow:hidden;







      }







      .h-img-wrap img {







        width:100%; height:100%; object-fit:cover;







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







      }







      .h-product-card:hover .h-img-wrap img { transform:scale(1.05); }







      .h-info { padding:10px 12px 12px; }







      .h-name {







        font-size:14px; font-weight:600; color:#111111; margin-bottom:3px; line-height:1.3;







        display:-webkit-box; -webkit-line-clamp:2;







        -webkit-box-orient:vertical; overflow:hidden;







      }







      .h-price {







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







        font-size:14px; font-weight:700; color: inherit;







      }















      .btn-primary {







        width:100%; height:52px; border-radius:var(--radius-full);







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







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







        font-size:15px; font-weight:700; cursor:pointer;







        display:flex; align-items:center; justify-content:center; gap:8px;







        transition:background .18s, transform .12s cubic-bezier(.4,0,.2,1), box-shadow .18s;







        letter-spacing:0.2px;







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







      }







      .btn-primary:active { background:var(--md-primary); transform:scale(.98); box-shadow:none; }















      .form-group { margin-bottom:14px; }







      .form-label {







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







        text-transform:uppercase; letter-spacing:0.8px;







        margin-bottom:6px; display:block;







      }







      .form-input {







        width:100%; height:52px; border-radius:14px;







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







        padding:0 16px; outline:none;







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







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







        transition:border-color .18s;







      }







      .form-input:focus { border-color:#111111; }







      .form-input::placeholder { color:#111111; font-size:14px; }







      .form-hint { font-size:11px; color:#111111; margin-top:5px; }















      .home-stats {







        display:flex; gap:8px; padding:4px 16px 18px;







        overflow-x:auto; scrollbar-width:none;







      }







      .home-stats::-webkit-scrollbar { display:none; }







      .stat-chip {







        flex-shrink:0; display:flex; align-items:center; gap:7px;







        background:var(--surface-2); border:1px solid var(--border);







        border-radius:var(--radius-full); padding:5px 14px;







        white-space:nowrap;







      }







      .stat-chip-val {







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







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







      }







      .stat-chip-label { font-size:12px; color:#111111; font-weight:500; }