:root {
      --color-bg: #F3F0E6;
      --color-text: #6A6456;
      --color-primary: #C49A5A;
      --color-border: #DCCFB8;
    }
    body { font-family: 'Libre Baskerville', serif; color: #6A6456; background-color: #F3F0E6; -webkit-font-smoothing: antialiased; }
    h1,h2,h3,h4,h5,h6 { font-family: 'Lora', serif; color: #3F3A33; }
    .nav-scrolled { background: rgba(243,240,230,0.85); backdrop-filter: blur(12px); border-color: #DCCFB8; }
    /* Menu mobile: backdrop solid agar link terbaca jelas, tidak tembus konten di belakangnya */
    #navbar.nav-open { background: #F3F0E6; border-color: #DCCFB8; box-shadow: 0 16px 36px -22px rgba(63,58,51,0.4); }
    .scroll-animate { opacity:0; transform:translateY(30px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
    .scroll-animate.visible { opacity:1; transform:translateY(0); }
    .toast { transform:translateY(100px); opacity:0; transition:all 0.4s ease; }
    .toast.show { transform:translateY(0); opacity:1; }

    /* ═══════════════════════════════════════════════
       PRODUCT CARD
       ═══════════════════════════════════════════════ */
    .product-card { display:flex; flex-direction:column; background:#FCFBF5; border:1px solid #DCCFB8; border-radius:0.5rem; overflow:hidden; position:relative; transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; }
    .product-card:hover { border-color:#C49A5A; box-shadow:0 8px 24px rgba(0,0,0,0.08); transform:translateY(-2px); }
    .product-card__media { aspect-ratio:1/1; overflow:hidden; background:#E7DFC6; position:relative; }
    .product-card__media img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
    .product-card:hover .product-card__media img { transform:scale(1.05); }
    .product-card__body { padding:1.25rem; flex:1; display:flex; flex-direction:column; position:relative; z-index:2; background:#FCFBF5; }
    .product-card__category { font-family:'IBM Plex Mono',monospace; font-size:0.65rem; text-transform:uppercase; letter-spacing:0.08em; color:#C49A5A; }
    .product-card__title { font-family:Lora,serif; font-size:1.125rem; line-height:1.3; color:#3F3A33; margin:0.35rem 0 0.5rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .product-card__price { font-family:Lora,serif; font-size:1.25rem; font-weight:600; color:#C49A5A; margin-bottom:0.5rem; }
    .product-card__desc { font-size:0.8rem; color:#6A6456; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:0.75rem; }
    .product-card__variants { display:flex; flex-wrap:wrap; gap:0.35rem; margin-bottom:0.75rem; }
    .product-card__chip { font-family:'IBM Plex Mono',monospace; font-size:0.6rem; text-transform:uppercase; letter-spacing:0.05em; color:#6A6456; background:#F3F0E6; border:1px solid #DCCFB8; padding:0.2rem 0.5rem; border-radius:0.25rem; }
    .product-card__stock { position:absolute; top:0.75rem; right:0.75rem; z-index:3; font-family:'IBM Plex Mono',monospace; font-size:0.6rem; font-weight:500; text-transform:uppercase; letter-spacing:0.05em; padding:0.25rem 0.6rem; border-radius:0.25rem; backdrop-filter:blur(4px); }
    .product-card__stock--in { background:rgba(34,197,94,0.9); color:#fff; }
    .product-card__stock--out { background:rgba(220,38,38,0.9); color:#fff; }
    .product-card__order { margin-top:auto; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; font-family:'IBM Plex Mono',monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; font-weight:500; background:#3F3A33; color:#F3F0E6; padding:0.75rem 1rem; border-radius:0.375rem; transition: background-color 150ms ease; cursor:pointer; border:none; }
    .product-card__order:hover { background:#2A2621; }
    .product-card__order:disabled { background:#DCCFB8; color:#6A6456; cursor:not-allowed; }

    .blog-skeleton { background:linear-gradient(90deg,#E7DFC6 25%,#F3F0E6 50%,#E7DFC6 75%); background-size:200% 100%; animation:blogSkeleton 1.5s ease-in-out infinite; }
    @keyframes blogSkeleton { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

    /* Filter button */
    .filter-btn { transition: all 150ms ease; cursor:pointer; }
    .filter-btn.active { background:#3F3A33; color:#F3F0E6; border-color:#3F3A33; }

    /* Modal QRIS */
    .qris-modal { position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; padding:1rem; background:rgba(63,58,51,0.7); backdrop-filter:blur(4px); }
    .qris-modal.open { display:flex; }
    .qris-modal__panel { background:#FCFBF5; border:1px solid #DCCFB8; border-radius:0.75rem; max-width:24rem; width:100%; max-height:90vh; overflow-y:auto; padding:1.5rem; position:relative; animation:qrisIn 0.25s ease-out; }
    @keyframes qrisIn { from{opacity:0; transform:translateY(20px) scale(0.96)} to{opacity:1; transform:translateY(0) scale(1)} }
    .qris-modal__close { position:absolute; top:0.75rem; right:0.75rem; background:transparent; border:none; cursor:pointer; color:#6A6456; padding:0.4rem; border-radius:0.375rem; transition: background-color 150ms ease; }
    .qris-modal__close:hover { background:#E7DFC6; }

    /* Mobile font — teks diperbesar agar nyaman dibaca di layar kecil */
    @media (max-width: 767px){
      .text-sm { font-size:1rem !important; }
      .text-xs { font-size:0.8125rem !important; }
      .text-\[10px\] { font-size:0.75rem !important; }
      .product-card__title { font-size:1.25rem; }
      .product-card__desc { font-size:0.875rem; }
      .product-card__price { font-size:1.375rem; }
      .product-card__category { font-size:0.7rem; }
      .product-card__order { font-size:0.75rem; }
    }