|
|
@@ -480,6 +480,37 @@ footer {
|
|
|
margin-top: 2rem;
|
|
|
}
|
|
|
|
|
|
+/* Checkout two-column layout (responsive via media query) */
|
|
|
+.checkout-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 2rem;
|
|
|
+ margin-top: 2rem;
|
|
|
+}
|
|
|
+
|
|
|
+/* Cart total / actions block */
|
|
|
+.cart-actions {
|
|
|
+ text-align: right;
|
|
|
+ margin: 2rem 0;
|
|
|
+}
|
|
|
+
|
|
|
+.cart-actions .cart-total {
|
|
|
+ font-size: 1.5rem;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.cart-actions .cart-buttons {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 0.5rem;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.cart-actions .cart-buttons .btn {
|
|
|
+ margin-left: 0;
|
|
|
+}
|
|
|
+
|
|
|
/* Responsive */
|
|
|
@media (max-width: 768px) {
|
|
|
.header-inner {
|
|
|
@@ -517,6 +548,46 @@ footer {
|
|
|
margin-top: 1rem;
|
|
|
}
|
|
|
|
|
|
+ .cart-actions {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cart-actions .cart-buttons {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: stretch;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cart-actions .cart-buttons .btn {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .checkout-grid {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ gap: 1.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-content {
|
|
|
+ margin: 1rem;
|
|
|
+ max-height: calc(100vh - 2rem);
|
|
|
+ }
|
|
|
+
|
|
|
+ .admin-header {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: stretch;
|
|
|
+ gap: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .admin-header > div {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 0.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .admin-header .btn {
|
|
|
+ flex: 1 1 auto;
|
|
|
+ min-width: 140px;
|
|
|
+ }
|
|
|
+
|
|
|
table {
|
|
|
font-size: 0.9rem;
|
|
|
}
|
|
|
@@ -531,6 +602,29 @@ footer {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+@media (max-width: 480px) {
|
|
|
+ .container {
|
|
|
+ padding: 0 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ main {
|
|
|
+ padding: 1rem 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .brand-title {
|
|
|
+ font-size: 1.1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .brand-subtitle {
|
|
|
+ font-size: 0.8rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .products-grid {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ gap: 1rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
/* Utility Classes */
|
|
|
.text-center {
|
|
|
text-align: center;
|