:root{
      --primary-color:#245d7f;
      --text-dark:#343a40;
      --text-body:#495057;
      --light-bg:#f8f9fa;
      --border-light:#dee2e6;
    }
    body{
      background:var(--light-bg);
      font-family:'Cairo', sans-serif;
      color:var(--text-body);
    }

    /* Simple Navbar */
    .topbar{
      background:#fff;
      border-bottom:1px solid #eee;
      position:sticky;
      top:0;
      z-index:1000;
    }
    .brand{
      font-weight:800;
      color:var(--primary-color);
      text-decoration:none;
      font-size:1.2rem;
    }
    .cart-btn{
      position:relative;
      border:1px solid var(--border-light);
      background:#fff;
      border-radius:.75rem;
      padding:.55rem .8rem;
      display:flex;
      gap:.5rem;
      align-items:center;
      color:var(--text-dark);
      text-decoration:none;
    }
    .cart-badge{
      position:absolute;
      top:-8px;
      right:-8px;
      background:#dc3545;
      color:#fff;
      font-size:.75rem;
      font-weight:700;
      width:22px;
      height:22px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    /* Products */
    .page-title{
      font-weight:800;
      color:var(--text-dark);
    }

    .product-card{
      border-radius:1rem;
      border:1px solid var(--border-light);
      overflow:hidden;
      transition:.2s;
      background:#fff;
      height:100%;
    }
    .product-card:hover{
      transform:translateY(-3px);
      box-shadow:0 10px 25px rgba(0,0,0,.06);
      border-color:var(--primary-color);
    }
    .product-img{
      width:100%;
      height:190px;
      object-fit:cover;
      background:#f2f2f2;
    }
    .product-body{
      padding:1rem;
      display:flex;
      flex-direction:column;
      gap:.6rem;
    }
    .product-name{
      font-weight:700;
      color:var(--text-dark);
      line-height:1.3;
      min-height:2.6em;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .product-price{
      font-weight:800;
      color:var(--primary-color);
      font-size:1.1rem;
    }
    .store-row{
      display:flex;
      align-items:center;
      gap:.5rem;
      border-top:1px solid #f0f0f0;
      padding:.75rem 1rem;
      background:#fff;
    }
    .store-logo{
      width:32px;height:32px;border-radius:50%;
      object-fit:cover;border:1px solid #ddd;
    }
    .store-name{
      font-weight:700;
      font-size:.95rem;
      color:var(--text-dark);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .btn-floward-outline{
      border:1px solid var(--primary-color);
      color:var(--primary-color);
      background:transparent;
      border-radius:.75rem;
      padding:.75rem 1rem;
      font-weight:700;
      transition:.2s;
    }
    .btn-floward-outline:hover{
      background:var(--primary-color);
      color:#fff;
    }
    .btn-floward-primary{
      border:1px solid var(--primary-color);
      background:var(--primary-color);
      color:#fff;
      border-radius:.75rem;
      padding:.75rem 1rem;
      font-weight:700;
      transition:.2s;
    }
    .btn-floward-primary:hover{
      background:#0a3147;
      border-color:#0a3147;
    }

    /* Shimmer */
    .shimmer{
      position:relative;
      overflow:hidden;
      background:#f0f0f0;
      border-radius:1rem;
      border:1px solid var(--border-light);
      height:320px;
    }
    .shimmer::after{
      content:'';
      position:absolute;
      top:0;left:0;
      width:100%;height:100%;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
      transform:translateX(-100%);
      animation:sh 1.2s infinite;
    }
    @keyframes sh{ 100%{ transform:translateX(100%);} }

    /* Modal */
    .modal-content{
      border:none;
      border-radius:1rem;
      overflow:hidden;
      box-shadow:0 2rem 4rem rgba(0,0,0,.1);
    }
    .modal-header{
      background:var(--primary-color);
      border:none;
    }
    .modal-title{ color:#fff; font-weight:800; }
    .btn-close{ filter:invert(1); }
    .modal-body{ background:#f9fafb; }

    .opt-wrap{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
    }
    .size-option, .color-option{
      border:1px solid var(--border-light);
      background:#fff;
      border-radius:.7rem;
      padding:.8rem 1.2rem;
      font-weight:800;
      color:var(--text-dark);
      cursor:pointer;
      transition:.15s;
      user-select:none;
    }
    .size-option:hover, .color-option:hover{
      border-color:var(--primary-color);
      color:var(--primary-color);
    }
    .size-option.selected{
      background:var(--primary-color);
      border-color:var(--primary-color);
      color:#fff;
    }

    /* Color as circle */
    .color-option[data-hex]{
      width:46px;height:46px;
      border-radius:50%;
      padding:0;
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .color-option.selected{
      box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--primary-color);
      border-color:var(--primary-color);
    }
    .color-option.selected::after{
      content:'✓';
      color:#fff;
      font-size:1.4rem;
      text-shadow:0 0 3px rgba(0,0,0,.5);
    }
    .alert-mini{
      padding:.75rem 1rem;
      border-radius:.75rem;
    }