* {
           box-sizing: border-box;
           margin: 0;
           padding: 0;
       }

       body {
           font-family: Arial, sans-serif;
           background: #f6fbff;
           color: #29445f;
       }

       nav {
           background: white;
           padding: 18px 7%;
           display: flex;
           align-items: center;
           justify-content: space-between;
           position: sticky;
           top: 0;
           z-index: 1000;
           border-bottom: 1px solid #d9e8f7;
       }

       .logo {
           font-size: 25px;
           font-weight: bold;
           color: #4a90e2;
       }

       .logo span {
           color: #245a9c;
       }

       .nav-links {
           display: flex;
           gap: 100px;
           list-style: none;
       }

       .nav-links a {
           text-decoration: none;
           color: #29445f;
           font-weight: bold;
           font-size: 14px;
       }

       .nav-links a:hover {
           color: #4a90e2;
       }

       .cart-button {
           border: none;
           background: #eaf4ff;
           color: #245a9c;
           padding: 12px 18px;
           border-radius: 25px;
           cursor: pointer;
           font-weight: bold;
       }

       .search-area {
           background: #eaf4ff;
           padding: 25px 7%;
       }

       .search-box {
           max-width: 900px;
           margin: auto;
       }

       .search-box input {
           width: 100%;
           padding: 16px 20px;
           border: none;
           border-radius: 30px;
           font-size: 15px;
           outline: none;
       }

       .category-bar {
           background: white;
           padding: 18px 7%;
           display: flex;
           justify-content: center;
           flex-wrap: wrap;
           gap: 8px;
           border-bottom: 1px solid #d9e8f7;
       }

       .category-button {
           border: none;
           background: white;
           color: #29445f;
           padding: 11px 20px;
           border-radius: 25px;
           font-weight: bold;
           cursor: pointer;
       }

       .category-button:hover,
       .category-button.active {
           background: #4a90e2;
           color: white;
       }

       .hero {
           padding: 70px 7%;
           min-height: 450px;
           display: flex;
           justify-content: space-between;
           align-items: center;
           gap: 40px;
       }

       .hero-text {
           max-width: 600px;
       }

       .hero-text small {
           color: #4a90e2;
           font-weight: bold;
           letter-spacing: 2px;
       }

       .hero h1 {
           font-size: 55px;
           margin: 15px 0;
       }

       .hero h1 span {
           color: #4a90e2;
       }

       .hero p {
           color: #718096;
           line-height: 1.7;
           margin-bottom: 25px;
       }

       .hero-button {
           background: #4a90e2;
           color: white;
           border: none;
           padding: 15px 25px;
           border-radius: 30px;
           font-weight: bold;
           cursor: pointer;
       }

       .hero-button:hover {
           background: #245a9c;
       }

       .hero-photo {
           width: 550px;
           height: 300px;
           background: #eaf4ff;
           border-radius: 30px;
           overflow: hidden;
       }

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


       .shop {
           padding: 70px 7%;
       }

       .shop-title {
           text-align: center;
           margin-bottom: 100px;
       }

       .shop-title small {
           color: #4a90e2;
           font-weight: bold;
           letter-spacing: 2px;
       }

       .shop-title h2 {
           font-size: 60px;
           margin: 10px 0;
       }

       .shop-title p {
           color: #718096;
       }

       .product-grid {
           display: grid;
           grid-template-columns: repeat(4, 1fr);
           gap: 25px;
       }

       .product-card {
           background: white;
           border: 1px solid #d9e8f7;
           border-radius: 20px;
           overflow: hidden;
           transition: 0.3s;
       }

       .product-card:hover {
           transform: translateY(-5px);
           box-shadow: 0 10px 25px rgba(74, 144, 226, 0.15);
       }

       .product-image {
           height: 240px;
           background: #eaf4ff;
           overflow: hidden;
       }

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

       .product-info {
           padding: 20px;
       }

       .product-info small {
           color: #4a90e2;
           font-weight: bold;
       }

       .product-info h3 {
           margin: 7px 0;
       }

       .product-info p {
           color: #718096;
           font-size: 13px;
           line-height: 1.5;
       }

       .price {
           color: #245a9c;
           font-size: 19px;
           font-weight: bold;
           margin-top: 10px;
       }

       .product-buttons {
           display: flex;
           gap: 8px;
           margin-top: 15px;
       }

       .add-button,
       .buy-button {
           flex: 1;
           padding: 10px 5px;
           border-radius: 20px;
           font-weight: bold;
           cursor: pointer;
       }

       .add-button {
           background: white;
           color: #245a9c;
           border: 2px solid #4a90e2;
       }

       .buy-button {
           background: #4a90e2;
           color: white;
           border: 2px solid #4a90e2;
       }

       .buy-button:hover {
           background: #245a9c;
       }


       /* =========================
           PRODUCT OPTIONS MODAL
        ========================= */

       .modal {
           display: none;
           position: fixed;
           inset: 0;
           background: rgba(20, 50, 80, 0.6);
           z-index: 3000;
           justify-content: center;
           align-items: center;
           padding: 20px;
       }

       .modal.show {
           display: flex;
       }

       .modal-box {
           background: white;
           width: 850px;
           max-width: 100%;
           max-height: 90vh;
           overflow-y: auto;
           border-radius: 25px;
           padding: 30px;
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 30px;
           position: relative;
       }

       .modal-image {
           height: 400px;
           background: #eaf4ff;
           border-radius: 20px;
           overflow: hidden;
       }

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

       .close-modal {
           position: absolute;
           right: 15px;
           top: 15px;
           width: 35px;
           height: 35px;
           border: none;
           border-radius: 50%;
           background: #eaf4ff;
           cursor: pointer;
       }

       .modal-info {
           padding: 15px 5px;
       }

       .modal-info small {
           color: #4a90e2;
           font-weight: bold;
       }

       .modal-info h2 {
           font-size: 30px;
           margin: 8px 0;
       }

       .modal-price {
           color: #245a9c;
           font-size: 23px;
           font-weight: bold;
           margin-bottom: 15px;
       }

       .modal-description {
           color: #718096;
           line-height: 1.6;
           margin-bottom: 20px;
       }


       /* =========================
           OPTIONS
        ========================= */

       .option-title {
           font-weight: bold;
           margin: 18px 0 10px;
       }

       .option-list {
           display: flex;
           flex-wrap: wrap;
           gap: 8px;
       }

       .option {
           border: 2px solid #d9e8f7;
           background: white;
           padding: 9px 14px;
           border-radius: 20px;
           cursor: pointer;
           font-size: 13px;
       }

       .option.selected {
           border-color: #4a90e2;
           background: #eaf4ff;
           color: #245a9c;
           font-weight: bold;
       }


       /* =========================
           QUANTITY
        ========================= */

       .quantity-box {
           display: flex;
           align-items: center;
           gap: 15px;
       }

       .quantity-box button {
           width: 32px;
           height: 32px;
           border: none;
           background: #eaf4ff;
           color: #245a9c;
           border-radius: 50%;
           font-size: 18px;
           cursor: pointer;
       }


       /* =========================
           MODAL ACTION BUTTONS
        ========================= */

       .modal-buttons {
           display: flex;
           gap: 10px;
           margin-top: 25px;
       }

       .modal-add,
       .modal-buy {
           flex: 1;
           padding: 14px;
           border-radius: 25px;
           font-weight: bold;
           cursor: pointer;
       }

       .modal-add {
           background: white;
           color: #245a9c;
           border: 2px solid #4a90e2;
       }

       .modal-buy {
           background: #4a90e2;
           color: white;
           border: none;
       }


       /* =========================
           CART
        ========================= */

       .cart {
           position: fixed;
           top: 0;
           right: -430px;
           width: 410px;
           max-width: 90%;
           height: 100vh;
           background: white;
           z-index: 5000;
           padding: 25px;
           box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
           transition: 0.4s;
           overflow-y: auto;
       }

       .cart.open {
           right: 0;
       }

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

       .close-cart {
           border: none;
           background: #eaf4ff;
           width: 35px;
           height: 35px;
           border-radius: 50%;
           cursor: pointer;
       }

       .cart-item {
           padding: 15px 0;
           border-bottom: 1px solid #d9e8f7;
       }

       .cart-item strong {
           color: #245a9c;
       }

       .cart-details {
           color: #718096;
           font-size: 13px;
           line-height: 1.6;
           margin-top: 5px;
       }

       /* NEW: CART QUANTITY BUTTONS */

       .cart-quantity {
           display: flex;
           align-items: center;
           gap: 10px;
           margin-top: 8px;
       }

       .cart-quantity button {
           width: 28px;
           height: 28px;
           border: none;
           background: #eaf4ff;
           color: #245a9c;
           border-radius: 50%;
           font-size: 17px;
           font-weight: bold;
           cursor: pointer;
       }

       .cart-quantity button:hover {
           background: #4a90e2;
           color: white;
       }

       .cart-quantity span {
           min-width: 20px;
           text-align: center;
           font-weight: bold;
       }

       .cart-total {
           display: flex;
           justify-content: space-between;
           margin-top: 25px;
           font-size: 20px;
           font-weight: bold;
       }


       /* =========================
           ABOUT
        ========================= */

       .about {
           background: #eaf4ff;
           text-align: center;
           padding: 70px 7%;
       }

       .about-content {
           max-width: 750px;
           margin: auto;
       }

       .about-content small {
           color: #4a90e2;
           font-weight: bold;
       }

       .about-content h2 {
           margin: 10px 0 20px;
           font-size: 35px;
       }

       .about-content p {
           color: #718096;
           line-height: 1.8;
       }


       /* =========================
           FOOTER
        ========================= */

       footer {
           background: #245a9c;
           color: white;
           text-align: center;
           padding: 40px;
       }

       footer p {
           margin-top: 8px;
       }


       /* =========================
           MOBILE
        ========================= */

       @media(max-width: 950px) {

           .product-grid {
               grid-template-columns: repeat(2, 1fr);
           }

           .hero {
               flex-direction: column;
               text-align: center;
           }

           .modal-box {
               grid-template-columns: 1fr;
           }

       }

       @media(max-width: 600px) {

           .nav-links {
               display: none;
           }

           .hero h1 {
               font-size: 40px;
           }

           .hero-photo {
               width: 100%;
           }

           .product-grid {
               grid-template-columns: 1fr;
           }

           .modal-image {
               height: 280px;
           }

       }


       .register-button {
           text-decoration: none;
           background: #ffffff;
           color: #1e5eff;
           border: 1px solid #1e5eff;
           padding: 10px 16px;
           border-radius: 8px;
           font-weight: bold;
       }

       .register-button:hover {
           background: #1e5eff;
           color: white;
       }

       .user-name {
           font-weight: bold;
       }

       .auth-container {
           min-height: 100vh;
           display: flex;
           justify-content: center;
           align-items: center;
           padding: 30px;
       }

       .auth-box {
           width: 100%;
           max-width: 450px;
           padding: 35px;
           border-radius: 15px;
           background: white;
           box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
       }

       .auth-box h1 {
           margin-bottom: 10px;
       }

       .auth-box form {
           display: flex;
           flex-direction: column;
           gap: 10px;
           margin: 25px 0;
       }

       .auth-box input {
           padding: 12px;
           border: 1px solid #ccc;
           border-radius: 7px;
       }

       .auth-box button {
           margin-top: 10px;
           padding: 13px;
           border: none;
           border-radius: 7px;
           cursor: pointer;
           font-weight: bold;
       }

       .auth-message {
           margin-top: 15px;
       }


       .checkout-button {
           width: 100%;
           padding: 14px;
           margin-top: 20px;

           background-color: #1e5eff;
           color: white;

           border: none;
           border-radius: 8px;

           font-size: 15px;
           font-weight: bold;

           cursor: pointer;

           transition: 0.3s;
       }

       .checkout-button:hover {
           background-color: #1748c9;
           transform: translateY(-2px);
       }

       .checkout-button:active {
           transform: translateY(0);
       }

       .checkout-container {
           width: 90%;
           max-width: 1100px;
           margin: 50px auto;
       }

       .checkout-header {
           margin-bottom: 30px;
       }

       .checkout-header a {
           text-decoration: none;
       }

       .checkout-header h1 {
           margin-top: 20px;
       }

       .checkout-layout {
           display: grid;
           grid-template-columns: 1.5fr 1fr;
           gap: 30px;
       }

       .checkout-section {
           background: white;
           padding: 30px;
           border-radius: 15px;
           box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
       }

       .checkout-section form {
           display: flex;
           flex-direction: column;
           gap: 10px;
       }

       .checkout-section input,
       .checkout-section textarea {
           padding: 12px;
           border: 1px solid #ccc;
           border-radius: 7px;
           font-family: inherit;
       }

       .checkout-section textarea {
           resize: vertical;
       }

       .payment-section {
           margin-top: 20px;
       }

       .cod-box {
           margin-top: 10px;
           padding: 18px;
           border: 2px solid #1e5eff;
           border-radius: 10px;
       }

       .cod-box p {
           margin-top: 5px;
       }

       .checkout-item {
           padding: 15px 0;
           border-bottom: 1px solid #ddd;
       }

       .checkout-item p {
           margin: 5px 0;
       }

       .checkout-total {
           display: flex;
           justify-content: space-between;
           margin-top: 25px;
           font-size: 20px;
       }

       .place-order-button,
       .checkout-button {
           width: 100%;
           padding: 14px;
           margin-top: 20px;
           border: none;
           border-radius: 8px;
           cursor: pointer;
           font-weight: bold;
       }

       .place-order-button {
           background: #1e5eff;
           color: white;
       }

       .checkout-button {
           background: #1e5eff;
           color: white;
       }

       @media (max-width: 800px) {

           .checkout-layout {
               grid-template-columns: 1fr;
           }

       }


       /* NAV RIGHT SIDE */

       .nav-actions {
           display: flex;
           align-items: center;
           gap: 10px;
       }


       /* ORDERS BUTTON */

       .orders-button {
           padding: 10px 16px;

           background: transparent;
           color: #1e5eff;

           border: 1px solid #1e5eff;
           border-radius: 8px;

           font-weight: bold;
           cursor: pointer;

           transition: 0.3s;
       }

       .orders-button:hover {
           background: #1e5eff;
           color: white;
       }


       /* USER DROPDOWN */

       .user-dropdown {
           position: relative;
       }


       /* USER ICON */

       .user-icon {
           width: 42px;
           height: 42px;

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

           background: #1e5eff;

           border: none;
           border-radius: 50%;

           font-size: 19px;

           cursor: pointer;

           transition: 0.3s;
       }

       .user-icon:hover {
           transform: scale(1.05);
       }


       /* DROPDOWN MENU */

       .user-menu {
           display: none;

           position: absolute;

           top: 52px;
           right: 0;

           width: 180px;

           background: white;

           border-radius: 10px;

           box-shadow:
               0 5px 20px rgba(0, 0, 0, 0.15);

           overflow: hidden;

           z-index: 1000;
       }


       /* SHOW MENU */

       .user-menu.show {
           display: block;
       }


       /* USER NAME */

       .user-menu-name {
           padding: 14px 16px;

           font-weight: bold;

           border-bottom:
               1px solid #eeeeee;
       }


       /* LOGIN / REGISTER / LOGOUT */

       .user-menu a {
           display: block;

           padding: 13px 16px;

           color: #333333;

           text-decoration: none;

           font-weight: bold;
       }

       .user-menu a:hover {
           background: #f3f6ff;
           color: #1e5eff;
       }


       /* =========================
   MY ORDERS
========================= */

       .orders-page {
           width: 90%;
           max-width: 1000px;

           margin: 50px auto;
       }


       .orders-page-header {
           margin-bottom: 30px;
       }


       .orders-page-header a {
           text-decoration: none;
           color: #1e5eff;
           font-weight: bold;
       }


       .orders-page-header h1 {
           margin-top: 20px;
           margin-bottom: 5px;
       }


       .orders-list {
           display: flex;
           flex-direction: column;
           gap: 20px;
       }


       /* ORDER CARD */

       .order-card {
           background: white;

           padding: 25px;

           border-radius: 15px;

           box-shadow:
               0 5px 20px rgba(0, 0, 0, 0.08);
       }


       .order-card-header {
           display: flex;

           justify-content:
               space-between;

           align-items:
               flex-start;

           gap: 20px;

           padding-bottom: 15px;

           border-bottom:
               1px solid #eeeeee;
       }


       .order-card-header h3 {
           margin: 0 0 5px;
       }


       .order-date {
           font-size: 13px;
           color: #777777;
       }


       /* STATUS */

       .order-status {
           padding: 7px 12px;

           background: #eef3ff;
           color: #1e5eff;

           border-radius: 20px;

           font-size: 13px;
           font-weight: bold;
       }


       /* PRODUCTS */

       .order-products {
           padding: 10px 0;
       }


       .order-product {
           padding: 15px 0;

           border-bottom:
               1px solid #eeeeee;
       }


       .order-product p {
           margin: 4px 0;

           color: #555555;

           font-size: 14px;
       }


       /* BOTTOM */

       .order-card-footer {
           display: flex;

           justify-content:
               space-between;

           align-items: flex-end;

           margin-top: 20px;
       }


       .order-card-footer div {
           display: flex;
           flex-direction: column;
           gap: 4px;
       }


       .order-card-footer small {
           color: #777777;
       }


       .order-total {
           text-align: right;
       }


       .order-total strong {
           font-size: 20px;
           color: #1e5eff;
       }


       /* NO ORDERS */

       .no-orders {
           text-align: center;

           background: white;

           padding: 60px 20px;

           border-radius: 15px;

           box-shadow:
               0 5px 20px rgba(0, 0, 0, 0.08);
       }


       .no-orders p {
           margin: 10px 0 25px;

           color: #777777;
       }


       .no-orders a {
           display: inline-block;

           padding: 12px 22px;

           background: #1e5eff;
           color: white;

           text-decoration: none;

           border-radius: 8px;

           font-weight: bold;
       }


       .cancel-order-form {
           margin: 0;
       }

       .cancel-order-button {
           padding: 10px 16px;

           background: transparent;
           color: #dc3545;

           border: 1px solid #dc3545;
           border-radius: 8px;

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

           cursor: pointer;

           transition: 0.3s;
       }

       .cancel-order-button:hover {
           background: #dc3545;
           color: white;
       }

       .order-message {
           padding: 14px 18px;
           margin-bottom: 20px;

           border-radius: 8px;

           font-weight: bold;
       }

       .success-message {
           background: #e9f8ee;
           color: #218838;
       }

       .error-message {
           background: #fdecec;
           color: #dc3545;
       }


       /* ========================================
   ORDER SUCCESS PAGE
======================================== */

       .order-success-body {
           margin: 0;
           min-height: 100vh;
           display: flex;
           align-items: center;
           justify-content: center;
           padding: 40px 20px;
           background:
               linear-gradient(135deg,
                   #eef4ff 0%,
                   #f8faff 50%,
                   #e8f0ff 100%);
           font-family: Arial, sans-serif;
       }

       .success-container {
           width: 100%;
           max-width: 620px;
           background: white;
           padding: 45px;
           border-radius: 20px;
           box-shadow: 0 15px 45px rgba(30, 94, 255, 0.12);
           text-align: center;
       }


       /* CHECK ICON */

       .success-icon {
           width: 85px;
           height: 85px;
           margin: 0 auto 22px;

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

           background: #1e5eff;
           color: white;

           border-radius: 50%;

           font-size: 42px;
           font-weight: bold;

           box-shadow: 0 8px 20px rgba(30, 94, 255, 0.25);
       }


       /* TITLE */

       .success-container h1 {
           margin: 0 0 10px;

           color: #1a1a1a;

           font-size: 32px;
       }

       .success-subtitle {
           margin: 0 0 10px;

           color: #555555;

           font-size: 17px;
       }

       .success-subtitle strong {
           color: #1e5eff;
       }

       .success-message-text {
           max-width: 480px;

           margin: 0 auto 30px;

           color: #777777;

           font-size: 14px;
           line-height: 1.7;
       }


       /* ORDER NUMBER */

       .order-number-box {
           margin-bottom: 25px;
           padding: 18px;

           background: #f3f6ff;

           border: 1px dashed #1e5eff;
           border-radius: 12px;
       }

       .order-number-box span {
           display: block;

           margin-bottom: 5px;

           color: #777777;

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

           letter-spacing: 1.5px;
       }

       .order-number-box strong {
           color: #1e5eff;

           font-size: 24px;
       }


       /* ORDER DETAILS */

       .success-order-details {
           padding: 5px 0;

           border-top: 1px solid #eeeeee;
           border-bottom: 1px solid #eeeeee;

           text-align: left;
       }

       .success-detail-row {
           display: flex;
           justify-content: space-between;
           align-items: center;

           padding: 15px 5px;

           color: #555555;

           font-size: 14px;
       }

       .success-detail-row strong {
           color: #222222;
       }

       .success-status {
           padding: 5px 10px;

           background: #fff5d6;
           color: #b58100 !important;

           border-radius: 20px;

           font-size: 12px;
       }

       .total-row {
           border-top: 1px solid #eeeeee;

           font-size: 17px;
       }

       .total-row strong {
           color: #1e5eff;

           font-size: 20px;
       }


       /* DELIVERY NOTE */

       .delivery-note {
           display: flex;
           gap: 15px;

           margin-top: 25px;
           padding: 18px;

           background: #f7f9ff;

           border-radius: 12px;

           text-align: left;
       }

       .delivery-icon {
           font-size: 27px;
       }

       .delivery-note strong {
           color: #333333;

           font-size: 14px;
       }

       .delivery-note p {
           margin: 6px 0 0;

           color: #777777;

           font-size: 12px;
           line-height: 1.6;
       }


       /* BUTTONS */

       .success-buttons {
           display: flex;
           gap: 12px;

           margin-top: 30px;
       }

       .view-orders-btn,
       .continue-shopping-btn {
           flex: 1;

           padding: 14px 18px;

           border-radius: 9px;

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

           text-decoration: none;

           transition: 0.3s;
       }


       /* VIEW ORDERS */

       .view-orders-btn {
           background: #1e5eff;
           color: white;
           border: 1px solid #1e5eff;
       }

       .view-orders-btn:hover {
           background: #1748c9;
           border-color: #1748c9;

           transform: translateY(-2px);
       }


       /* CONTINUE SHOPPING */

       .continue-shopping-btn {
           background: white;
           color: #1e5eff;

           border: 1px solid #1e5eff;
       }

       .continue-shopping-btn:hover {
           background: #f3f6ff;

           transform: translateY(-2px);
       }


       /* MOBILE */

       @media (max-width: 600px) {

           .success-container {
               padding: 30px 20px;
           }

           .success-container h1 {
               font-size: 27px;
           }

           .success-buttons {
               flex-direction: column;
           }

       }


       /* CART - ORDERS - USER */

       .nav-actions {
           display: flex;
           align-items: center;
           gap: 12px;
       }

       .cart-button,
       .orders-button,
       .user-button {
           padding: 12px 18px;
           border-radius: 10px;
           font-weight: 600;
           cursor: pointer;
           white-space: nowrap;
       }

       .orders-button {
           background: white;
           color: #234a91;
           border: 1px solid #d9e2f2;
       }

       .orders-button:hover {
           background: #eef4ff;
       }

       .user-area {
           position: relative;
       }


       /* =========================================
   FINAL NAVBAR DESIGN
========================================= */

       nav {
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 18px 7%;
           background: white;
           position: sticky;
           top: 0;
           z-index: 1000;
           box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
       }

       .logo {
           font-size: 24px;
           font-weight: 800;
           color: #234a91;
           white-space: nowrap;
       }

       .nav-links {
           display: flex;
           align-items: center;
           gap: 28px;
           list-style: none;
           margin: 0;
           padding: 0;
       }

       .nav-links a {
           text-decoration: none;
           color: #333;
           font-size: 14px;
           font-weight: 600;
           transition: 0.2s;
       }

       .nav-links a:hover {
           color: #234a91;
       }

       .nav-actions {
           display: flex;
           align-items: center;
           gap: 10px;
       }

       .cart-button,
       .orders-button,
       .user-button {
           height: 42px;
           padding: 0 16px;
           border-radius: 10px;
           font-size: 13px;
           font-weight: 700;
           cursor: pointer;
           transition: 0.2s;
       }

       .cart-button {
           border: none;
           background: #234a91;
           color: white;
       }

       .orders-button,
       .user-button {
           background: white;
           color: #234a91;
           border: 1px solid #d9e2f2;
       }

       .cart-button:hover,
       .orders-button:hover,
       .user-button:hover {
           transform: translateY(-2px);
       }

       .orders-button:hover,
       .user-button:hover {
           background: #f3f7ff;
       }

       .user-area {
           position: relative;
       }

       .user-menu {
           position: absolute;
           right: 0;
           top: 52px;
           min-width: 180px;
           background: white;
           border-radius: 12px;
           padding: 10px;
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
           z-index: 2000;
       }

       .user-menu-name {
           padding: 10px;
           font-weight: 700;
           color: #234a91;
           border-bottom: 1px solid #eee;
           margin-bottom: 6px;
       }

       .user-menu button {
           width: 100%;
           padding: 10px;
           border: none;
           background: transparent;
           text-align: left;
           cursor: pointer;
           border-radius: 7px;
       }

       .user-menu button:hover {
           background: #f3f7ff;
       }


       /* =========================================
   RESPONSIVE (keep at the end of the file so it
   overrides the navbar rules above)
========================================= */

       html {
           -webkit-text-size-adjust: 100%;
       }

       img {
           max-width: 100%;
       }

       /* No hover lift on touch screens */
       @media (hover: none) {

           .product-card:hover,
           .cart-button:hover,
           .orders-button:hover,
           .user-button:hover,
           .checkout-button:hover {
               transform: none;
               box-shadow: none;
           }

       }


       /* TABLET: logo + buttons on top, links below */
       @media (max-width: 950px) {

           nav {
               flex-wrap: wrap;
               row-gap: 12px;
               padding: 14px 4%;
           }

           .logo {
               order: 1;
           }

           .nav-actions {
               order: 2;
               margin-left: auto;
           }

           .nav-links {
               display: flex;
               order: 3;
               width: 100%;
               justify-content: center;
           }

           .hero {
               padding: 50px 4%;
               min-height: auto;
           }

           .hero-photo {
               max-width: 100%;
           }

           .shop,
           .about {
               padding: 50px 4%;
           }

           .shop-title {
               margin-bottom: 50px;
           }

           .shop-title h2 {
               font-size: 44px;
           }

       }


       /* PHONE */
       @media (max-width: 600px) {

           /* Navbar: logo + links on row 1, full-width buttons on row 2 */
           nav {
               padding: 12px 16px;
               column-gap: 12px;
               row-gap: 10px;
           }

           .logo {
               font-size: 20px;
           }

           .nav-links {
               display: flex;
               order: 2;
               flex: 1;
               width: auto;
               min-width: 0;
               justify-content: flex-start;
               gap: 14px;
               overflow-x: auto;
               scrollbar-width: none;
           }

           .nav-links::-webkit-scrollbar {
               display: none;
           }

           .nav-links li:first-child {
               margin-left: auto;
           }

           .nav-links a {
               font-size: 12px;
               white-space: nowrap;
           }

           .nav-actions {
               order: 3;
               width: 100%;
               margin-left: 0;
               gap: 8px;
           }

           .nav-actions > button,
           .user-area {
               flex: 1;
               min-width: 0;
           }

           .cart-button,
           .orders-button,
           .user-button {
               width: 100%;
               height: 38px;
               padding: 0 8px;
               font-size: 12px;
               overflow: hidden;
               text-overflow: ellipsis;
           }

           /* Search + categories */
           .search-area {
               padding: 14px 16px;
           }

           .search-box input {
               padding: 13px 18px;
               font-size: 16px; /* 16px stops iOS from zooming in on focus */
           }

           .category-bar {
               flex-wrap: nowrap;
               justify-content: flex-start;
               overflow-x: auto;
               padding: 12px 16px;
               scrollbar-width: none;
           }

           .category-bar::-webkit-scrollbar {
               display: none;
           }

           .category-button {
               flex-shrink: 0;
               padding: 9px 14px;
               font-size: 12px;
               background: #eaf4ff;
           }

           /* Hero */
           .hero {
               padding: 32px 16px;
               gap: 24px;
           }

           .hero h1 {
               font-size: 34px;
           }

           .hero-photo {
               width: 100%;
               height: 220px;
               border-radius: 20px;
           }

           /* Shop: 2-column product grid */
           .shop {
               padding: 40px 16px;
           }

           .shop-title {
               margin-bottom: 28px;
           }

           .shop-title h2 {
               font-size: 32px;
           }

           .product-grid {
               grid-template-columns: repeat(2, 1fr);
               gap: 12px;
           }

           .product-card {
               border-radius: 14px;
           }

           .product-image {
               height: 150px;
           }

           .product-info {
               padding: 12px;
           }

           .product-info h3 {
               font-size: 15px;
           }

           .product-info p {
               font-size: 12px;
               display: -webkit-box;
               -webkit-line-clamp: 2;
               -webkit-box-orient: vertical;
               overflow: hidden;
           }

           .price {
               font-size: 16px;
           }

           .product-buttons {
               flex-direction: column;
               gap: 6px;
           }

           .add-button,
           .buy-button {
               padding: 9px 5px;
               font-size: 12px;
           }

           /* Product options modal */
           .modal {
               padding: 10px;
           }

           .modal-box {
               padding: 18px 16px;
               gap: 16px;
               border-radius: 20px;
               max-height: 92vh;
           }

           .modal-image {
               height: 240px;
           }

           .close-modal {
               z-index: 1;
               right: 24px;
               top: 24px;
               background: white;
           }

           .modal-info {
               padding: 0;
           }

           .modal-info h2 {
               font-size: 24px;
           }

           .modal-buttons {
               gap: 8px;
           }

           .modal-add,
           .modal-buy {
               padding: 12px 6px;
               font-size: 13px;
           }

           /* Cart drawer */
           .cart {
               right: 0;
               width: 100%;
               max-width: 100%;
               height: 100dvh;
               padding: 20px 16px;
               transform: translateX(100%);
               box-shadow: none;
           }

           .cart.open {
               transform: none;
           }

           /* About, contact, footer */
           .about {
               padding: 40px 16px;
           }

           .about-content h2 {
               font-size: 28px;
           }

           #contact {
               padding: 40px 16px !important; /* overrides the inline style */
           }

           footer {
               padding: 30px 16px;
           }

           /* Login / register */
           .auth-container {
               padding: 16px;
           }

           .auth-box {
               padding: 25px 20px;
           }

           .auth-box input,
           .checkout-section input,
           .checkout-section textarea {
               font-size: 16px;
           }

           /* Checkout */
           .checkout-container,
           .orders-page {
               width: auto;
               margin: 24px 16px;
           }

           .checkout-section {
               padding: 20px 16px;
           }

           /* My orders */
           .order-card {
               padding: 18px 16px;
           }

           .order-card-header,
           .order-card-footer {
               flex-wrap: wrap;
               gap: 12px;
           }

       }