/* Extra spacing below navbar */
    main {
      padding-top: 32px;
    }

    /* Accessoires grid (shop-style cards) */
    /* Match the /telefoon phone grid width (Bootstrap .container, 1140px) so
       there is the same room left/right as the phones. */
    .category-section {
      max-width: 1140px;
      margin: 0 auto;
      padding: 40px 15px 0;
    }
    .category-title {
      color: #165df5;
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 6px;
    }
    .section-title-main {
      color: #165df5;
      font-size: 36px;
      font-weight: 700;
      margin-bottom: 12px;
    }
    .category-intro {
      color: #999;
      margin-bottom: 25px;
    }
    .products-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 25px;
    }
    @media (max-width: 900px) { .products-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 600px) { .products-grid { grid-template-columns: 1fr; } }
    /* Product card shell + hover image swap: shared with /shop and matched to
       the /telefoon phone cards -> assets/css/product-cards.css */
    .product-card .duration-select {
      background: #fff;
      color: #333;
      border: 1px solid #d0d5dd;
      border-radius: 8px;
      padding: 8px 10px;
      margin-bottom: 12px;
      width: 100%;
    }
    .product-card .btn-add {
      display: block;
      text-align: center;
      background: transparent;
      border: 1px solid #165df5;
      color: #165df5;
      border-radius: 8px;
      padding: 10px 16px;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }
    .product-card .btn-add:hover {
      background: #1e6fff;
      color: #fff;
    }
    .product-card .btn-add:disabled {
      opacity: 0.6;
      cursor: wait;
    }