/* DELIVERY STRIP */
      .delivery-strip {
        background: var(--md-surface-2);
        border-radius: var(--md-shape-xl);
        margin: 8px 16px 14px;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        border: 1px solid var(--md-outline-var);
      }
      .delivery-icon {
        width: 36px;
        height: 36px;
        border-radius: var(--md-shape-md);
        background: var(--md-primary-container);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
      }
      .delivery-info {
        flex: 1;
      }
      .delivery-title {
        font-size: 12px;
        font-weight: 500;
        color: var(--md-on-surface);
      }
      .delivery-title strong {
        font-weight: 600;
      }
      .delivery-sub {
        font-size: 12px;
        color: var(--md-on-surface-var);
        margin-top: 1px;
      }
      .delivery-badge {
        font-family: var(--font-display);
        font-size: 11px;
        font-weight: 700;
        color: var(--md-primary);
        background: var(--md-primary-container);
        padding: 6px 10px;
        border-radius: 8px;
        white-space: nowrap;
        flex-shrink: 0;
      }

      .info-box {







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







        background:var(--md-primary-container); border-radius:var(--radius-sm);







        padding:12px 16px; margin:0 16px 14px;







        border:1px solid color-mix(in srgb, var(--md-primary) 12%, transparent);







      }







      .info-box-text { font-size:13px; color:#111111; line-height:1.5; }







      .info-box-text strong { color:#111111; font-weight:700; }















      .feat-wrap { padding:0 12px 14px; flex-shrink:0; }







      .feat-header { display:flex; align-items:center; justify-content:space-between; padding:20px 16px 12px; }







      .see-all { background:transparent; border:none; color:#111111; font-size:13px; font-weight:700; cursor:pointer; padding:0; transition:all 0.2s; }







      .see-all:hover { color:var(--orange-dark); }







      .h-scroll { display:flex; gap:12px; padding:0 16px 4px; overflow-x:auto; scrollbar-width:none; }







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







      .h-product-card { flex-shrink:0; width:150px; background:var(--md-surface); border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.1); cursor:pointer; transition:transform 0.18s; }







      .h-product-card:hover { transform:translateY(-2px); box-shadow:0 2px 8px rgba(0,0,0,0.15); }







      .h-img-wrap { width:100%; height:120px; background:var(--md-surface-1); overflow:hidden; }







      .h-img-wrap img { width:100%; height:100%; object-fit:cover; }







      .h-info { padding:10px; }







      .h-name { font-size:13px; font-weight:500; color:#111111; margin-bottom:4px; line-height:1.35; letter-spacing:0.1px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }







      .h-price { font-family:'Google Sans Display', sans-serif; font-size:15px; font-weight:700; color: inherit; letter-spacing:0; }
@keyframes cardIn {







        from { opacity:0; transform:translateY(14px); }







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







      }







      .product-card { animation:cardIn .32s cubic-bezier(.4,0,.2,1) both; }







      .h-product-card { animation:cardIn .28s cubic-bezier(.4,0,.2,1) both; }















      /* ========== CATEGORY PAGE STYLES ========== */







      .cat-page-topbar {







        height:var(--header-h); padding:0 12px 0 16px;







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







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







        position:relative; z-index:10;







      }







      .cat-page-title {







        font-family: 'Instrument Serif', serif;



        font-style: italic;



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







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







      }







      .back-btn {







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







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







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







        color:#111111; transition:background .15s;







      }







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







      .back-btn svg { width:22px; height:22px; stroke-width:2.5; }















      .cat-search-wrap {







        padding:12px 16px 10px; flex-shrink:0;







        background:var(--md-surface); position:relative; z-index:9;







      }







      /* Material Design 3 Search Button in Header */



      #cat-search-toggle-btn {



        width:48px;height:48px;border-radius:50%;background:transparent;color:var(--md-on-primary);transition:all .28s cubic-bezier(.4,0,.2,1);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;



      }



      #cat-search-toggle-btn:hover{transform:scale(1.15);background:rgba(255,255,255,0.1);}



      #cat-search-toggle-btn:active{transform:scale(0.9);}







      /* Search Container - Material Design 3 */







      #cat-search-container.psearch {



        display:none !important;padding:12px 16px;background:#f9f9f9;border-bottom:1px solid #e8e8e8;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;visibility:hidden !important;height:0 !important;transition:all .2s;



      }



      #cat-search-container.psearch.active {



        display:flex !important;visibility:visible !important;height:auto !important;



      }







      #cat-search-inp {



        flex:1;border:none;background:none;outline:none;font-size:16px;color:#111111;font-family:inherit;



      }



      #cat-search-inp::placeholder{color:#111111;font-weight:500;}







      .psearch-ic{width:20px;height:20px;color:#111111;display:flex;align-items:center;justify-content:center;flex-shrink:0;}



      .psearch-ic svg{width:100%;height:100%;stroke:currentColor;}







      .cat-filter-chips {







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







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







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







        position:relative; z-index:8;







      }







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







      .filter-chip {







        flex-shrink:0; height:36px; padding:0 14px; display:inline-flex; align-items:center;







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







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







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







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







        white-space:nowrap;







      }







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







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







      }















      .cat-products-grid {







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







        padding:16px 16px 120px 16px; animation:fadeIn .3s cubic-bezier(.4,0,.2,1);







      }







      .pgrid {



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



      }







      @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }















      .floating-cart-btn {







        position:absolute; bottom:100px; left:50%; transform:translateX(-50%);







        padding:12px 20px; height:52px;







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







        border-radius:var(--radius-full); border:none;







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







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







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







        z-index:20; transition:all .2s cubic-bezier(.4,0,.2,1);







        letter-spacing:0.2px;







      }







      .floating-cart-btn:hover { box-shadow:0 6px 20px color-mix(in srgb, var(--md-primary) 50%, transparent); }







      .floating-cart-btn:active { transform:translateX(-50%) scale(.95); }







      .cart-badge-float {







        min-width:20px; height:20px;







        background:rgba(255,255,255,.3); border-radius:10px;







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







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







        padding:0 5px;







      }















      /* ===== CATEGORY PAGE STYLES ===== */







      #sc-category {







        background:#fafafa;







        overflow:hidden;







        display:flex;







        flex-direction:column;







      }















      #sc-category .top-bar {







        display:none;







        align-items:center;







        justify-content:space-between;







        padding:12px 16px;







        background:white;







        border-bottom:1px solid rgba(0,0,0,.04);







        backdrop-filter:blur(20px);







      }

      #sc-category .tbar.dark {

        background:transparent;

      }

      #sc-catpage .tbar.dark {

        background:transparent;

      }

      #sc-catpage .ibtn.w {

        color:#111111 !important;

      }

      #sc-catpage .ibtn.w:hover {

        background:rgba(0,0,0,.08);

      }

      #sc-catpage .tbar-left {

        color:#111111 !important;

      }

      #sc-catpage .cat-title, #sc-category .cat-title {

        color:#111111 !important;

      }

      #sc-catpage .icon-btn svg, #sc-category .icon-btn svg {

        stroke:var(--md-on-surface) !important;

        fill:var(--md-on-surface) !important;

      }



      #sc-catpage .tbar.dark, #sc-category .top-bar {

        color:#111111 !important;

      }



      #sc-catpage .tbar.dark .ep-name, #sc-category .top-bar .ep-name {

        color:#111111 !important;

      }



      #sc-catpage .tbar.dark svg, #sc-category .top-bar svg {

        stroke:var(--md-on-surface) !important;

        fill:var(--md-on-surface) !important;

        color:#111111 !important;

      }



      #sc-catpage .tbar.dark, #sc-category .top-bar, #sc-catpage .tbar.dark * , #sc-category .top-bar * {

        color:#111111 !important;

        -webkit-text-fill-color:#111111 !important;

      }



















      #sc-category .top-bar-left {







        display:flex;







        align-items:center;







        gap:16px;







      }















      #sc-category .back-btn {







        background:transparent;







        border:none;







        width:44px; height:44px;







        border-radius:50%;







        display:flex;







        align-items:center;







        justify-content:center;







        cursor:pointer;







        font-size:20px;







        color:#111111;







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







        -webkit-tap-highlight-color:transparent;







      }















      #sc-category .back-btn:active {







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







        transform:scale(.95);







      }















      #sc-category .cat-title {







        font-size:18px;







        font-weight:700;







        color:#111111;







        flex:1;







        letter-spacing:-0.3px;







      }















      #sc-category .top-bar-icons {







        display:flex;







        gap:4px;







      }















      #sc-category .icon-btn {







        width:44px; height:44px;







        background:transparent;







        border:none;







        display:flex;







        align-items:center;







        justify-content:center;







        cursor:pointer;







        color:#111111;







        font-size:20px;







        border-radius:50%;







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







        -webkit-tap-highlight-color:transparent;







      }















      #sc-category .icon-btn:active {







        background:rgba(28,20,16,.08);







        transform:scale(.95);







      }















      /* Filter chips - Modern 2025 Design */







      #sc-category .filter-section {







        background:white;







        padding:12px 16px;







        border-bottom:1px solid rgba(0,0,0,.04);







        overflow-x:auto;







        overflow-y:hidden;







        -webkit-overflow-scrolling:touch;







        display:flex;







        gap:10px;







        scrollbar-width:none;







      }















      #sc-category .filter-section::-webkit-scrollbar {







        display:none;







      }















      #sc-category .filter-section::-webkit-scrollbar-thumb {







        background:#ddd;







        border-radius:2px;







      }















      #sc-category .cat-filter-chip {







        background:#FDF8F4;







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







        color:#111111;







        padding:10px 16px;







        border-radius:24px;







        font-size:13px;







        font-weight:600;







        white-space:nowrap;







        cursor:pointer;







        flex-shrink:0;







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







        -webkit-tap-highlight-color:transparent;







      }















      #sc-category .cat-filter-chip:hover {







        background:#F5F0EB;







        transform:translateY(-1px);







      }















      #sc-category .cat-filter-chip:active {







        transform:scale(.96);







      }















      #sc-category .cat-filter-chip.active {







        background:var(--md-primary);







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







        border-color:#111111;







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







      }















      /* Subcategory filter buttons - Pill Style (matching Products page) */



      .subcategory-btn {
        flex-shrink:0; height:32px; padding:0 16px;
        border-radius:var(--radius-full);
        background:var(--md-primary-container); border:1px solid var(--md-outline-var);
        font-size:14px; font-weight:500; color:#111111;
        cursor:pointer; transition:all .18s cubic-bezier(.4,0,.2,1);
        white-space:nowrap;
      }







      .subcategory-btn:active {



        transform:scale(0.95);



      }



      .subcategory-btn.active {
        background:var(--md-primary); color:var(--md-on-primary); border-color:#111111;
      }













































      .products-grid-icon {



        display:inline-flex;



        align-items:center;



        justify-content:center;



        width:24px;



        height:24px;



        background:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="8" height="8" fill="none" stroke="%23FF6B00" stroke-width="1.5"/><rect x="14" y="2" width="8" height="8" fill="none" stroke="%23FF6B00" stroke-width="1.5"/><rect x="2" y="14" width="8" height="8" fill="none" stroke="%23FF6B00" stroke-width="1.5"/><rect x="14" y="14" width="8" height="8" fill="none" stroke="%23FF6B00" stroke-width="1.5"/></svg>') no-repeat center;



        background-size:16px 16px;



      }







      .products-grid-icon::before {



        content:'';



      }



        width:20px;



        height:20px;



      }















      /* Product grid - Modern 2025 Layout */







      #sc-category .cat-scroll-area {







        flex:1;







        overflow-y:auto;







        -webkit-overflow-scrolling:touch;







        padding:16px 0;







      }















      #sc-category #cat-products-grid {







        display:grid;







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







        gap:14px;







        padding:0 12px;







        margin-bottom:20px;







        animation:fadeInScale .4s cubic-bezier(.4,0,.2,1);







      }















      @keyframes fadeInScale {







        from {







          opacity:0;







          transform:scale(.98);







        }







        to {







          opacity:1;







          transform:scale(1);







        }







      }















      #sc-category .product-card {







        background:white;







        border-radius:20px;







        overflow:hidden;







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







        display:flex;







        flex-direction:column;







        cursor:pointer;







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







        border:1px solid rgba(0,0,0,.04);







      }















      #sc-category .product-card:hover {







        box-shadow:0 8px 24px rgba(0,0,0,.12);







        transform:translateY(-4px);







      }















      #sc-category .product-card:active {







        transform:translateY(-2px) scale(.98);







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







      }















      #sc-category .product-img-wrap {







        width:100%;







        height:140px;







        background:linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);







        display:flex;







        align-items:center;







        justify-content:center;







        overflow:hidden;







        position:relative;







      }















      #sc-category .product-img {







        width:100%;







        height:100%;







        object-fit:cover;







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







      }















      #sc-category .product-card:hover .product-img {







        transform:scale(1.08);







      }















      #sc-category .tag-badge {







        position:absolute;







        top:8px;







        right:8px;







        background:var(--md-primary);







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







        padding:6px 10px;







        border-radius:8px;







        font-size:11px;







        font-weight:700;







        text-transform:uppercase;







        z-index:2;







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







        letter-spacing:0.3px;







      }















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















      #sc-category .product-name {







        font-size:14px;







        font-weight:700;







        color:#111111;







        line-height:1.4;







        display:-webkit-box;







        -webkit-line-clamp:2;







        -webkit-box-orient:vertical;







        overflow:hidden;







        letter-spacing:-0.3px; background:#F5D7B8; padding:6px 8px; border-radius:4px;







      }















      #sc-category .product-sub {







        font-size:12px;







        color:#888;







        font-weight:500;







        line-height:1.3; background:#F5F0EB; padding:4px 6px; border-radius:3px;







      }















      #sc-category .product-row {







        display:flex;







        justify-content:space-between;







        align-items:center;







        margin-top:auto;







        gap:8px;







        padding-top:8px;







      }















      #sc-category .product-price {







        font-size:20px;







        font-weight:700;







        color:#111111; background:#FDF8F4; padding:6px 8px; border-radius:4px; border-left:3px solid var(--md-primary);







        letter-spacing:-0.2px;







      }















      #sc-category .add-btn {







        background:var(--md-primary);







        border:none;







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







        width:36px; height:36px;







        border-radius:12px;







        display:flex;







        align-items:center;







        justify-content:center;







        cursor:pointer;







        font-size:18px;







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







        -webkit-tap-highlight-color:transparent;







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







      }















      #sc-category .add-btn:hover {







        background:#ff7020;







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







        transform:scale(1.05);







      }















      #sc-category .add-btn:active {







        background:var(--md-primary);







        transform:scale(.95);







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







      }















      /* Floating cart button - Modern 2025 */







      #sc-category .cat-floating-cart {







        position:absolute;







        bottom:calc(var(--nav-h) + 16px);







        left:50%;







        transform:translateX(-50%);







        background:var(--md-primary);







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







        border:none;







        padding:14px 28px;







        border-radius:24px;







        font-size:14px;







        font-weight:700;







        cursor:pointer;







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







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







        z-index:50;







        white-space:nowrap;







        -webkit-tap-highlight-color:transparent;







        display:flex;







        align-items:center;







        gap:8px;







      }















      #sc-category .cat-floating-cart:hover {







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







        transform:translateX(-50%) translateY(-2px);







      }















      #sc-category .cat-floating-cart:active {







        transform:translateX(-50%) scale(.96);







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







      }















      #sc-category .cat-floating-cart .cart-count {







        font-weight:700;







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







        padding:2px 8px;







        border-radius:10px;







        min-width:20px;







        text-align:center;







        font-size:12px;







      }















      /* DETAIL PAGE CSS FROM OLD CODE */







      .detail-header{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;background:#1A0A00;border-bottom:none;height:56px;}







      .detail-back{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(255,255,255,0.1);color:#111111;cursor:pointer;transition:all 0.2s ease;font-weight:700;border:none;}







      .detail-back:hover{background:var(--md-primary);color:var(--md-on-primary);}







      .detail-header-title{font-size:16px;font-weight:800;color:#111111;flex:1;text-align:center;letter-spacing:-0.3px;}







      .help-circle{width:36px;height:36px;border-radius:50%;background:var(--md-primary);color:var(--md-on-primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;cursor:pointer;}







      .detail-body{background:var(--md-surface);flex:1;overflow-y:auto;display:flex;flex-direction:column;padding:20px 16px 100px;}







      /* Material Design 3 Product Detail */



      .detail-img-wrap{background:linear-gradient(135deg, var(--md-surface) 0%, var(--md-surface-1) 100%);display:flex;align-items:center;justify-content:center;padding:40px 16px;min-height:420px;border-bottom:none;}



      .detail-img-wrap img{width:100%;max-width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:24px;box-shadow:0 12px 40px rgba(0,0,0,0.12);transition:transform 0.3s cubic-bezier(.4,0,.2,1);}



      .detail-img-wrap:hover img{transform:scale(1.02);}







      /* Product Info Tabs */



      .detail-tabs{display:flex;flex-direction:column;gap:0;border-left:3px solid #f0f0f0;padding:0;overflow-x:auto;scrollbar-width:none;}



      .detail-tab{padding:16px 12px;font-size:14px;font-weight:600;color:#111111;cursor:pointer;border-left:3px solid transparent;margin-left:-3px;transition:all .2s;white-space:normal;flex-shrink:0;}



      .detail-tab.active{color:#111111;border-left-color:#111111;}



      .detail-tab:hover{color:#111111;}



      .detail-tab:nth-child(2){display:none;}







      .detail-tab-content{display:none;padding:24px 20px 120px;animation:fadeIn .2s;}



      .detail-tab-content.active{display:block;}



      #specs-tab{display:none !important;}







      .detail-info{padding:28px 20px 110px;color:#111111;}







      .det-cat{font-size:14px;font-weight:600;color:#111111;text-transform:none;letter-spacing:0;margin-bottom:8px;opacity:1;text-align:center;}







      .det-name{font-size:28px;font-weight:800;color:#111111;margin-bottom:14px;line-height:1.2;letter-spacing:-0.5px; background:var(--md-surface-1); padding:12px 16px; border-radius:8px;}







      .det-unit{font-size:14px;color:#111111;text-transform:none;letter-spacing:0;margin-bottom:4px;font-weight:600; background:#F5F0EB; padding:6px 10px; border-radius:4px; display:inline-block;}







      .det-price{font-size:32px;font-weight:900;color:#111111;background:#F5D7B8;margin-bottom:24px;margin-top:6px; padding:12px 16px; border-radius:8px; display:inline-block; border-left:4px solid var(--md-primary);}







      .det-specs{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:20px;margin-top:16px;}







      .spec{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(26,10,0,0.1);}







      .spec-l{font-weight:700;color:#111111;font-size:13px;}







      .spec-v{color:#111111;font-size:13px;font-weight:500;}







      .sim-section{margin-top:32px;padding-top:24px;border-top:1px solid rgba(26,10,0,0.1);}







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







      .sim-title{font-size:16px;font-weight:800;color:#111111;margin:0;}







      .sim-count{background:rgba(255,140,0,0.12);color:#111111;font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;}







      .sim-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:32px;}







      .sim-card{background:var(--md-surface-1);border:1px solid rgba(26,10,0,0.08);border-radius:12px;padding:14px;text-align:center;cursor:pointer;transition:all 0.2s ease;}







      .sim-card:hover{background:var(--md-surface);border-color:#111111;transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,140,0,0.1);}







      .sim-name{font-size:13px;font-weight:700;color:#111111;line-height:1.3;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}







      .sim-unit{font-size:10px;color:#111111;text-transform:uppercase;letter-spacing:0.3px;margin-bottom:8px;font-weight:600;}







      .sim-img{width:100%;aspect-ratio:1;background:var(--md-surface-1);border-radius:8px;overflow:hidden;margin-bottom:8px;}







      .sim-img img{width:100%;height:100%;object-fit:cover;}







      .sim-price{font-size:16px;font-weight:800;color:#111111;margin-bottom:4px;}







      .detail-footer{position:absolute;bottom:0;left:0;right:0;width:100%;max-width: min(430px, 100vw);background:linear-gradient(to bottom, rgba(255,248,246,0.98), rgba(255,248,246,1));padding:14px 16px 20px;border-top:1px solid rgba(26,10,0,0.08);display:flex;align-items:center;gap:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 -4px 16px rgba(0,0,0,0.06);}







      .detail-qty-ctrl{display:flex;align-items:center;border:2px solid var(--md-primary);border-radius:10px;overflow:hidden;background:rgba(255,140,0,0.05);}







      .detail-qty-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#111111;transition:all 0.2s ease;user-select:none;background:none;border:none;cursor:pointer;}







      .detail-qty-btn:active{background:rgba(255,140,0,0.1);-webkit-user-select:none;user-select:none;}







      .detail-qty-num{min-width:40px;text-align:center;font-size:16px;font-weight:700;color:#111111;}







      @keyframes button-press {







        0% { transform: scale(1); }







        50% { transform: scale(0.96); }







        100% { transform: scale(1); }







      }







      .detail-add-cart{flex:1;background:linear-gradient(135deg, var(--md-primary) 0%, var(--md-primary-dark) 100%);color:var(--md-on-primary);border-radius:10px;padding:14px;font-weight:800;font-size:15px;cursor:pointer;border:none;text-align:center;box-shadow:0 10px 24px color-mix(in srgb, var(--md-primary) 24%, transparent);transition:all 0.3s ease;}







      .detail-add-cart: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:translateY(-1px);}







      .detail-add-cart:active{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 2px 8px color-mix(in srgb, var(--md-primary) 20%, transparent);transform:scale(0.98);}







      .scroll-body{flex:1;overflow-y:auto;}

      /* M3 Detail View Complete Styles */
      .detail-img-area{
        position:relative;
        width:100%;
        height:280px;
        overflow:hidden;
        background:linear-gradient(135deg, var(--md-surface) 0%, var(--md-surface-1) 100%);
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0;
      }
      .detail-carousel-track{
        display:flex;
        width:100%;
        height:100%;
        transition:transform .35s cubic-bezier(.4,0,.2,1);
      }
      .detail-carousel-slide{
        flex:0 0 100%;
        width:100%;
        height:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        position:relative;
        overflow:hidden;
        padding:0 24px;
        box-sizing:border-box;
      }
      .detail-carousel-media{
        position:relative;
        width:fit-content;
        height:100%;
      }
      .detail-carousel-slide img{
        width:auto;
        max-width:210px;
        height:100%;
        object-fit:contain;
        object-position:center;
        display:block;
        margin:0 auto;
        filter:drop-shadow(0 8px 24px rgba(0,0,0,0.16));
        transition:transform 0.3s cubic-bezier(.4,0,.2,1);
      }
      .detail-carousel-dots{
        position:absolute;
        bottom:12px;
        left:0;right:0;
        display:flex;
        justify-content:center;
        gap:6px;
      }
      .detail-dot{
        width:7px;height:7px;border-radius:50%;
        background:rgba(0,0,0,.25);
        cursor:pointer;
        transition:all .2s;
      }
      .detail-dot.active{
        background:var(--md-primary);
        width:18px;
        border-radius:4px;
      }
      .detail-cat-btn{
        display:inline-flex;align-items:center;gap:6px;
        background:var(--md-primary-container);
        color:var(--md-primary);
        border:none;border-radius:100px;
        padding:10px 18px;
        font-size:13px;font-weight:700;
        cursor:pointer;margin:8px 0 4px;
      }
      .detail-section-label{
        font-size:15px;font-weight:700;color:#0d0600;
        margin:20px 0 10px;padding:0 16px;
      }
      .detail-share-btn{
        position:absolute;top:12px;right:12px;
      }
      .detail-content{
        background:var(--md-surface);
        flex:1;padding:0 16px 100px;
      }
      #screen-detail, #screen-detail *{
        font-family:'Google Sans',Roboto,sans-serif !important;
        font-style:normal !important;
      }
      .detail-cat-chip{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:5px 12px;border-radius:999px;background:var(--md-primary-container);color:var(--md-on-primary-container);}
      .detail-title{font-family:var(--font-display);font-size:20px;font-weight:500;color:var(--md-on-surface);line-height:1.3;letter-spacing:.15px;}
      .detail-unit{font-size:12px;font-weight:600;color:var(--md-on-surface-variant);text-transform:uppercase;letter-spacing:.6px;}
      .detail-price-big{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--md-primary);letter-spacing:-.5px;line-height:1;}
      .detail-price-panel{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0 8px;}
      .detail-description{font-size:14px;color:#111111;line-height:1.7;margin-bottom:16px;max-width:720px;}
      .detail-divider{height:1px;background:var(--md-outline-var);margin:4px 0;}
      .detail-spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px;}
      .spec-card{background:var(--md-surface-2);border-radius:20px;padding:16px;box-shadow:0 10px 24px rgba(22,28,45,0.06);}
      .spec-label{font-size:11px;color:#5B5B5B;text-transform:uppercase;letter-spacing:.16em;margin-bottom:8px;font-weight:700;}
      .spec-val{font-size:14px;font-weight:700;color:#111111;line-height:1.5;}
      .spec-note{display:block;margin-top:8px;font-size:12px;color:#6B7280;font-weight:400;line-height:1.5;}
      .detail-section-label{font-size:15px;font-weight:700;color:#0d0600;margin:0 0 12px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;}
      .detail-cat-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(79,127,244,.1);color:#1D3F7F;border:none;border-radius:999px;padding:10px 18px;font-size:13px;font-weight:700;cursor:pointer;margin:0;}
      .detail-cat-btn:hover{background:rgba(79,127,244,.2);}
      .detail-stock-pill{display:inline-flex;align-items:center;gap:8px;background:#FFEBEE;color:#B71C1C;font-size:12px;font-weight:700;padding:8px 14px;border-radius:999px;margin-bottom:16px;}
      .detail-stock-icon{width:16px;height:16px;flex-shrink:0;}
      .detail-content{background:var(--md-surface);flex:1;padding:0 16px 100px;}
      .detail-cat-chip{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;padding:6px 14px;border-radius:999px;background:rgba(79,127,244,.12);color:#1D3F7F;display:inline-flex;margin-bottom:12px;}
      .detail-cat-chip.beverages{background:rgba(192,92,0,.12);color:#c05c00;}
      .detail-cat-chip.dairy-tea{background:rgba(10,122,104,.12);color:#0a7a68;}
      .detail-cat-chip.maize-flour{background:rgba(184,74,0,.12);color:#b84a00;}
      .detail-cat-chip.rice-grains{background:rgba(154,98,0,.12);color:#9a6200;}
      .detail-cat-chip.noodles{background:rgba(160,24,24,.12);color:#a01818;}
      .detail-cat-chip.oil-fats{background:rgba(42,122,42,.12);color:#2a7a2a;}
      .detail-cat-chip.spreads-condiments{background:rgba(140,90,0,.12);color:#8c5a00;}
      .detail-cat-chip.sugar{background:rgba(122,85,0,.12);color:#7a5500;}
      .detail-cat-chip.snacks{background:rgba(92,26,154,.12);color:#5c1a9a;}
      .detail-cat-chip.cleaning-supplies{background:rgba(10,122,104,.12);color:#0a7a68;}
      .detail-cat-chip.household-supplies{background:rgba(26,79,160,.12);color:#1a4fa0;}
      .detail-cat-chip.personal-care{background:rgba(140,26,90,.12);color:#8c1a5a;}
      .detail-cat-chip.stationery{background:rgba(26,58,122,.12);color:#1a3a7a;}
      .detail-cat-chip.beauty{background:rgba(140,26,90,.12);color:#8c1a5a;}
      .detail-cat-chip.general{background:rgba(140,26,90,.12);color:#8c1a5a;}
      .detail-title{font-family:var(--font-display);font-size:26px;font-weight:700;color:#111111;line-height:1.18;letter-spacing:0.01em;margin-bottom:12px;}
      .detail-unit{font-size:13px;font-weight:600;color:#475569;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;}
      .prod-unit-m3{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;}
      .prod-unit-m3 span{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border-radius:999px;background:rgba(79,127,244,.12);border:1px solid rgba(79,127,244,.18);color:#1D3F7F;font-size:12px;font-weight:700;letter-spacing:.02em;white-space:nowrap;}
      .detail-price-panel .prod-badge-savings-flat{margin-top:0;}
      .detail-price-panel .prod-badge-savings-flat span{font-size:12px;}
      .detail-price-panel .prod-price-m3{font-size:30px;}
      .detail-description{max-width:740px;}
      .detail-bottom-bar{
        position:fixed;bottom:0;left:50%;transform:translateX(-50%);
        width:100%;max-width:min(430px,100vw);
        background:var(--md-surface-2);
        padding:12px 16px;
        border-top:1px solid var(--md-outline-var);
        display:flex;align-items:center;gap:12px;
        backdrop-filter:blur(8px);
      }
      .detail-bottom-bar .btn-filled{flex:1;}
      .qty-ctrl-m3{
        display:flex;align-items:center;
        border:2px solid var(--md-outline-var);
        border-radius:999px;
        overflow:hidden;
        height:44px;
      }
      .qty-btn-m3{
        width:40px;height:100%;
        display:flex;align-items:center;justify-content:center;
        font-size:20px;font-weight:700;
        color:var(--md-primary);
        background:transparent;
        border:none;
        transition:background .15s;
      }
      .qty-btn-m3:hover{background:var(--md-primary-container);}
      .qty-num-m3{min-width:48px;height:48px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:22px;font-weight:700;color:var(--md-on-surface);}
      .btn-filled{
        flex:1;height:52px;border-radius:999px;background:#ff4d00;color:#fff;
        font-size:15px;font-weight:700;letter-spacing:.2px;
        display:flex;align-items:center;justify-content:center;gap:8px;
        box-shadow:0 4px 14px rgba(255,77,0,.35);border:none;
      }
      .btn-filled svg{width:18px;height:18px;fill:#fff;}
      .btn-filled:active{transform:scale(.98);}
      .btn-tonal{
        height:44px;
        background:var(--md-secondary-cont);
        color:#111111;
        border-radius:var(--md-shape-full);
        font-size:14px;font-weight:600;
        padding:0 20px;
        display:flex;align-items:center;gap:6px;
      }