/* Base styles */
:root {
   --color-darkest: #01161e;
   --color-dark: #124559;
   --color-medium: #598392;
   --color-light: #aec3b0;
   --color-lightest: #eff6e0;

   --shadow-sm: 0 2px 8px rgba(1, 22, 30, 0.08);
   --shadow-md: 0 4px 16px rgba(1, 22, 30, 0.12);
   --shadow-lg: 0 8px 32px rgba(1, 22, 30, 0.16);
   --shadow-hover: 0 12px 40px rgba(1, 22, 30, 0.2);

   --transition-fast: 0.2s ease;
   --transition-normal: 0.3s ease;
   --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Selection styling */
::selection {
   background: var(--color-light);
   color: var(--color-darkest);
}

::-moz-selection {
   background: var(--color-light);
   color: var(--color-darkest);
}

/* Focus styling for accessibility */
:focus-visible {
   outline: 3px solid var(--color-medium);
   outline-offset: 2px;
}

html {
   font-size: 62.5%;
   scroll-behavior: smooth;
}

body {
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   background: linear-gradient(180deg, var(--color-lightest) 0%, #e8f0dc 100%);
   background-attachment: fixed;
   margin: 0;
   overflow-x: hidden;
   position: relative;
   min-height: 100vh;
   line-height: 1.6;
   color: var(--color-darkest);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

footer {
   margin-top: 4rem;
   padding: 2rem 2.4rem;
   text-align: center;
   font-size: 1.4rem;
   color: var(--color-dark);
}

.footer-links {
   margin-top: 0.8rem;
   display: flex;
   justify-content: center;
   gap: 1.6rem;
   flex-wrap: wrap;
}

.footer-links a {
   font-size: 1.3rem;
   color: var(--color-dark);
   text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus-visible {
   text-decoration: underline;
}

.legal-page,
.contact-page {
   max-width: 800px;
   margin: 4rem auto 6rem auto;
   padding: 0 2.4rem;
}

.legal-page section,
.contact-page section {
   margin-bottom: 2.4rem;
}

.legal-page h2,
.contact-page h2 {
   font-size: 2.4rem;
}

.legal-page p,
.legal-page li,
.contact-page p,
.contact-page label {
   font-size: 1.5rem;
}

.legal-updated {
   margin-top: 2rem;
   font-size: 1.3rem;
   color: var(--color-medium);
}

.contact-form-section {
   margin-top: 2rem;
}

.contact-form {
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
}

.form-row {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
}

.form-row input,
.form-row textarea {
   padding: 0.8rem 1.2rem;
   border-radius: 8px;
   border: 1px solid var(--color-medium);
   font-size: 1.5rem;
   font-family: inherit;
}

.form-row textarea {
   resize: vertical;
}

.contact-submit {
   align-self: flex-start;
   padding: 0.8rem 1.8rem;
   border-radius: 999px;
   border: none;
   background: var(--color-dark);
   color: #fff;
   font-size: 1.5rem;
   cursor: pointer;
   transition: background var(--transition-fast), transform var(--transition-fast);
}

.contact-submit:hover {
   background: var(--color-darkest);
   transform: translateY(-1px);
}

.hidden {
   display: none;
}

.cookie-banner {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 1.2rem 2rem;
   background: rgba(1, 22, 30, 0.9);
   color: #fff;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 1.2rem;
   font-size: 1.3rem;
   z-index: 1100;
}

.cookie-banner a {
   color: var(--color-light);
   text-decoration: underline;
}

.cookie-banner__text {
   flex: 1 1 260px;
}

.cookie-banner__actions {
   display: flex;
   gap: 0.8rem;
   flex-shrink: 0;
}

.cookie-btn {
   border-radius: 999px;
   padding: 0.6rem 1.4rem;
   font-size: 1.3rem;
   border: none;
   cursor: pointer;
   background: transparent;
   color: #fff;
}

.cookie-btn.primary {
   background: var(--color-light);
   color: var(--color-darkest);
}

.cookie-btn.subtle {
   border: 1px solid rgba(255, 255, 255, 0.5);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.cookie-banner.hidden {
   display: none;
}

/* Loading Spinner */
.loading-spinner {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(239, 246, 224, 0.9);
   backdrop-filter: blur(4px);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 9999;
}

.loading-spinner::after {
   content: "";
   width: 50px;
   height: 50px;
   border: 4px solid var(--color-light);
   border-top-color: var(--color-dark);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
}

@keyframes spin {
   to {
      transform: rotate(360deg);
   }
}

/* Skeleton Loading */
.skeleton {
   background: linear-gradient(90deg, var(--color-lightest) 25%, #fff 50%, var(--color-lightest) 75%);
   background-size: 200% 100%;
   animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
   0% {
      background-position: 200% 0;
   }
   100% {
      background-position: -200% 0;
   }
}

.skeleton-card {
   background: linear-gradient(145deg, #ffffff 0%, var(--color-lightest) 100%);
   border-radius: 16px;
   padding: 20px;
   min-width: 200px;
   flex: 1 1 250px;
   max-width: calc(20% - 40px);
   box-shadow: var(--shadow-md);
}

.skeleton-image {
   width: 100%;
   height: 200px;
   border-radius: 12px;
   margin-bottom: 15px;
}

.skeleton-text {
   height: 20px;
   border-radius: 4px;
   margin-bottom: 10px;
}

.skeleton-text.short {
   width: 60%;
}

.skeleton-button {
   height: 48px;
   border-radius: 10px;
   margin-top: 12px;
}

/* Product card loading state (color change) */
.product-card.loading {
   pointer-events: none;
}

.product-card.loading::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 40px;
   height: 40px;
   border: 3px solid var(--color-light);
   border-top-color: var(--color-dark);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
   z-index: 10;
}

.product-image {
   transition: opacity var(--transition-normal), filter var(--transition-normal);
}

/* Lazy Loading Image Fade-in */
.product-image {
   opacity: 0;
   transition: opacity var(--transition-normal);
}

.product-image.loaded {
   opacity: 1;
}

/* Intersection Observer Animations */
.fade-in-up {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible {
   opacity: 1;
   transform: translateY(0);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }

   html {
      scroll-behavior: auto;
   }
}

h2 {
   font-family: "Playfair Display", Georgia, serif;
   padding: 0 0 2rem 0;
   font-size: 3.6rem;
   font-weight: 600;
   letter-spacing: -0.5px;
   color: var(--color-darkest);
   position: relative;
}

h2::after {
   content: "";
   position: absolute;
   bottom: 1rem;
   left: 0;
   width: 60px;
   height: 3px;
   background: linear-gradient(90deg, var(--color-dark), var(--color-medium));
   border-radius: 2px;
}

.main-content {
   display: flex;
   flex-direction: column;
   padding: 0 20px;
}

.short-t-shirt,
.long-t-shirt,
.hoodie,
.cropped-t-shirt,
.crops,
.accessories,
.headwear {
   flex: 1;
   padding: 30px 20px;
   animation: fadeInUp 0.6s ease-out forwards;
   opacity: 0;
}

@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(20px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.short-t-shirt {
   animation-delay: 0.1s;
}
.long-t-shirt {
   animation-delay: 0.2s;
}
.hoodie {
   animation-delay: 0.3s;
}

.product-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
   gap: 24px;
   width: 100%;
   padding: 10px 0;
}

.product-card {
   background: linear-gradient(145deg, #ffffff 0%, var(--color-lightest) 100%);
   border: none;
   border-radius: 16px;
   padding: 20px;
   min-width: 200px;
   flex: 1 1 250px;
   text-align: center;
   max-width: calc(20% - 40px);
   box-shadow: var(--shadow-md);
   transition: transform var(--transition-normal), box-shadow var(--transition-normal);
   position: relative;
   overflow: hidden;
}

.product-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: linear-gradient(90deg, var(--color-dark), var(--color-medium), var(--color-light));
   opacity: 0;
   transition: opacity var(--transition-normal);
}

.product-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-hover);
}

.product-card:hover::before {
   opacity: 1;
}

.product-card img {
   max-width: 100%;
   height: auto;
   border-radius: 12px;
   transition: transform var(--transition-normal);
   cursor: pointer;
}

.product-card:hover img {
   transform: scale(1.02);
}

h3 {
   font-family: "Playfair Display", Georgia, serif;
   margin: 15px 0 10px;
   font-size: 2.2rem;
   font-weight: 500;
   color: var(--color-darkest);
   letter-spacing: -0.3px;
}

.price-display {
   font-family: "Inter", sans-serif;
   font-size: 1.6rem;
   color: var(--color-dark);
   font-weight: 600;
   margin-bottom: 10px;
   letter-spacing: 0.3px;
}

.size-dropdown,
.color-dropdown,
.graphic-dropdown {
   font-family: "Inter", sans-serif;
   font-size: 1.5rem;
   font-weight: 500;
   width: 100%;
   padding: 12px 16px;
   margin: 8px 0;
   border-radius: 10px;
   border: 2px solid var(--color-light);
   background-color: #fff;
   cursor: pointer;
   transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23124559' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 12px center;
}

.size-dropdown:hover,
.color-dropdown:hover,
.graphic-dropdown:hover {
   border-color: var(--color-medium);
}

.size-dropdown:focus,
.color-dropdown:focus,
.graphic-dropdown:focus {
   outline: none;
   border-color: var(--color-dark);
   box-shadow: 0 0 0 3px rgba(18, 69, 89, 0.15);
}

.add-to-cart {
   font-family: "Inter", sans-serif;
   font-size: 1.5rem;
   font-weight: 600;
   background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-darkest) 100%);
   color: var(--color-lightest);
   border: none;
   padding: 14px 24px;
   margin: 12px 0 5px;
   border-radius: 10px;
   cursor: pointer;
   width: 100%;
   transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-normal);
   letter-spacing: 0.5px;
   text-transform: uppercase;
   position: relative;
   overflow: hidden;
}

.add-to-cart::before {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
   transition: left 0.5s ease;
}

.add-to-cart:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(1, 22, 30, 0.3);
   background: linear-gradient(135deg, var(--color-medium) 0%, var(--color-dark) 100%);
}

.add-to-cart:hover::before {
   left: 100%;
}

.add-to-cart:active {
   transform: translateY(0);
}

footer {
   background: linear-gradient(135deg, var(--color-darkest) 0%, var(--color-dark) 100%);
   color: var(--color-lightest);
   text-align: center;
   padding: 24px 0;
   margin-top: 40px;
   width: 100%;
   position: relative;
}

footer::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--color-light), var(--color-medium), var(--color-dark));
}

.main-content > div:not(:last-child) {
   padding-bottom: 2rem;
}

/* Modal Styles */
.hidden {
   display: none;
}

.modal {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

::backdrop {
   position: fixed;
   z-index: 1001;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   backdrop-filter: blur(8px);
   background-color: rgba(1, 22, 30, 0.6);
}

.modal-content {
   position: relative;
   min-height: 40vh;
   min-width: 40vw;
   padding: 2rem;
}

/* The Close Button - Base styles moved to Shopping Cart section */

.cart-item {
   display: flex;
   align-items: center;
   background: linear-gradient(145deg, #ffffff 0%, var(--color-lightest) 100%);
   border: 1px solid var(--color-light);
   padding: 15px;
   margin-bottom: 12px;
   border-radius: 12px;
   box-shadow: var(--shadow-sm);
   transition: box-shadow var(--transition-fast);
}

.cart-item:hover {
   box-shadow: var(--shadow-md);
}

.item-name {
   font-size: 18px;
   font-weight: bold;
   color: var(--color-darkest);
}

.cart-item span {
   display: block;
   margin-bottom: 5px;
}

.delete-btn {
   align-self: flex-start;
}

.total-price {
   font-size: 18px;
   margin-top: 20px;
   text-align: right;
}

/* Styles for the container holding the total price and checkout button */
.checkout-container {
   display: flex;
   flex-direction: column;
   align-items: right;
   padding: 10px;
}

.cart-item-image {
   width: 100px;
   height: 100px;
   margin-right: 10px;
   object-fit: contain;
   background-color: #fff;
   border-radius: 4px;
   flex-shrink: 0;
}

.message-container {
   text-align: center;
   padding: 80px 40px;
   min-height: 60vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.message-container h1 {
   font-family: "Playfair Display", Georgia, serif;
   font-size: 3.6rem;
   font-weight: 600;
   color: var(--color-dark);
   margin-bottom: 24px;
   letter-spacing: -0.5px;
}

.message-container p {
   font-family: "Inter", sans-serif;
   font-size: 1.8rem;
   color: var(--color-medium);
   max-width: 600px;
   line-height: 1.7;
   font-weight: 400;
}

.toast {
   font-family: "Inter", sans-serif;
   font-size: 1.4rem;
   font-weight: 500;
   position: absolute;
   background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-darkest) 100%);
   color: var(--color-lightest);
   padding: 14px 28px;
   border-radius: 12px;
   opacity: 0;
   transition: opacity var(--transition-normal), transform var(--transition-normal);
   transform: scale(0.9) translateY(10px);
   z-index: 1000;
   box-shadow: var(--shadow-lg);
}

.toast.show {
   opacity: 1;
   transform: scale(1) translateY(0);
}

.image-modal {
   display: none;
   position: fixed;
   z-index: 1001;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: rgba(0, 0, 0, 0.8);
}

.image-modal .close {
   position: absolute;
   top: 15px;
   right: 35px;
   color: #f1f1f1;
   font-size: 40px;
   font-weight: bold;
   cursor: pointer;
}

.img-modal-content {
   margin: auto;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   padding: 2rem;
   box-sizing: border-box;
}

.img-modal-content img {
   max-width: 90%;
   max-height: 90vh;
   display: block;
   margin: 0 auto;
   object-fit: contain;
}

#imagePreviewModal {
   border: none;
   background: transparent;
   width: 100vw;
   height: 100vh;
   max-width: 100vw;
   max-height: 100vh;
}

#imagePreviewModal::backdrop {
   background-color: rgba(0, 0, 0, 0.9);
}

#imagePreviewModal .closeButton {
   position: fixed;
   top: 20px;
   right: 20px;
   width: 48px;
   height: 48px;
   color: white;
   cursor: pointer;
   z-index: 1002;
   background: rgba(1, 22, 30, 0.7);
   border-radius: 50%;
   padding: 10px;
   backdrop-filter: blur(4px);
   border: 2px solid rgba(255, 255, 255, 0.3);
   transition: all var(--transition-fast);
}

#imagePreviewModal .closeButton:hover {
   background: rgba(1, 22, 30, 0.9);
   border-color: rgba(255, 255, 255, 0.6);
   transform: scale(1.1);
}

.no-scroll {
   overflow: hidden;
}

.item-details {
   display: block;
}

.item-image-small {
   width: 100px;
   height: auto;
   margin-right: 1rem;
}

.item-details .item-quantity {
   display: flex;
   align-items: baseline;
   gap: 0.5rem;
}

/* Hero Section */
.hero {
   display: flex;
   width: 100%;
   overflow-y: hidden;
   max-height: 70vh;
}

.hero img {
   flex: 1;
   width: 100%;
   object-fit: cover;
}

.cta {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding: 2rem;
}

.cta button {
   font-size: 1.8rem;
   font-family: "Inter", sans-serif;
   font-weight: 600;
   letter-spacing: 2px;
   text-transform: uppercase;
   background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-darkest) 100%);
   color: var(--color-lightest);
   border: none;
   padding: 16px 48px;
   border-radius: 12px;
   cursor: pointer;
   transition: all var(--transition-normal);
   box-shadow: var(--shadow-md);
}

.cta button:hover {
   background: linear-gradient(135deg, var(--color-medium) 0%, var(--color-dark) 100%);
   transform: translateY(-3px);
   box-shadow: var(--shadow-lg);
}

footer p {
   font-family: "Inter", sans-serif;
   font-size: 1.4rem;
   font-weight: 400;
   letter-spacing: 0.5px;
}

/* Airport Showcase Section */
.airport-showcase {
   background: linear-gradient(135deg, var(--color-darkest) 0%, var(--color-dark) 50%, var(--color-medium) 100%);
   padding: 6rem 2rem;
   text-align: center;
   position: relative;
   overflow: hidden;
}

.airport-showcase::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: radial-gradient(ellipse at top, rgba(174, 195, 176, 0.1) 0%, transparent 70%);
   pointer-events: none;
}

.airport-showcase h2 {
   font-family: "Playfair Display", Georgia, serif;
   font-size: 3.6rem;
   font-weight: 600;
   color: var(--color-lightest);
   margin-bottom: 2.5rem;
   letter-spacing: 0px;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.airport-showcase h2::after {
   display: none;
}

.airport-showcase .search-bar {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0;
   max-width: 600px;
   margin: 0 auto;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
   border-radius: 50px;
   overflow: hidden;
   position: relative;
}

.airport-showcase .search-bar input {
   flex: 1;
   padding: 1.8rem 2.6rem;
   font-size: 1.6rem;
   font-family: "Inter", sans-serif;
   font-weight: 400;
   border: none;
   outline: none;
   background-color: var(--color-lightest);
   color: var(--color-darkest);
   transition: background-color var(--transition-fast);
}

.airport-showcase .search-bar input:focus {
   background-color: #fff;
}

.airport-showcase .search-bar input::placeholder {
   color: var(--color-medium);
}

.airport-showcase .search-bar button {
   padding: 1.8rem 3.2rem;
   font-size: 1.5rem;
   font-family: "Inter", sans-serif;
   font-weight: 600;
   background: linear-gradient(135deg, var(--color-light) 0%, var(--color-medium) 100%);
   color: var(--color-darkest);
   border: none;
   cursor: pointer;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   transition: all var(--transition-normal);
}

.airport-showcase .search-bar button:hover {
   background: linear-gradient(135deg, var(--color-lightest) 0%, var(--color-light) 100%);
   transform: scale(1.02);
}

/* Shopping Cart */
.modal-content {
   background: linear-gradient(180deg, #ffffff 0%, var(--color-lightest) 100%);
   border-radius: 20px;
   box-shadow: var(--shadow-lg);
   padding: 28px;
   width: 90%;
   max-width: 500px;
   border: 1px solid rgba(174, 195, 176, 0.3);
}

.modal-content h2 {
   font-family: "Playfair Display", Georgia, serif;
   font-size: 2.6rem;
   font-weight: 600;
   margin-bottom: 1.5rem;
   text-align: center;
   color: var(--color-darkest);
}

.modal-content h2::after {
   left: 50%;
   transform: translateX(-50%);
}

.closeButton {
   position: absolute;
   top: 12px;
   right: 12px;
   width: 40px;
   height: 40px;
   background: var(--color-lightest);
   border: 2px solid var(--color-light);
   cursor: pointer;
   padding: 8px;
   border-radius: 50%;
   transition: all var(--transition-fast);
   color: var(--color-darkest);
   display: flex;
   align-items: center;
   justify-content: center;
}

.closeButton:hover {
   background: var(--color-light);
   border-color: var(--color-medium);
   transform: rotate(90deg) scale(1.1);
}

.cart-items {
   max-height: 300px;
   overflow-y: auto;
   margin-bottom: 20px;
   padding-right: 8px;
}

.cart-items::-webkit-scrollbar {
   width: 6px;
}

.cart-items::-webkit-scrollbar-track {
   background: var(--color-lightest);
   border-radius: 3px;
}

.cart-items::-webkit-scrollbar-thumb {
   background: var(--color-medium);
   border-radius: 3px;
}

.cart-items::-webkit-scrollbar-thumb:hover {
   background: var(--color-dark);
}

.cart-item {
   display: flex;
   align-items: center;
   background: linear-gradient(145deg, #ffffff 0%, var(--color-lightest) 100%);
   border: 1px solid var(--color-light);
   padding: 15px;
   margin-bottom: 12px;
   border-radius: 12px;
   box-shadow: var(--shadow-sm);
   transition: all var(--transition-fast);
}

.cart-item:hover {
   box-shadow: var(--shadow-md);
   border-color: var(--color-medium);
}

.item-image-small {
   width: 80px;
   height: 80px;
   margin-right: 15px;
   object-fit: contain;
   background-color: #fff;
   border-radius: 10px;
   flex-shrink: 0;
   box-shadow: var(--shadow-sm);
}

.item-details {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.item-name {
   font-family: "Inter", sans-serif;
   font-size: 1.6rem;
   font-weight: 600;
   color: var(--color-darkest);
}

.item-color,
.item-size,
.item-price {
   font-size: 1.5rem;
   color: var(--color-dark);
}

.item-quantity {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 1.4rem;
}

.item-quantity button {
   background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-darkest) 100%);
   color: var(--color-lightest);
   border: none;
   padding: 6px 12px;
   border-radius: 8px;
   cursor: pointer;
   transition: all var(--transition-fast);
   font-weight: bold;
}

.item-quantity button:hover {
   background: linear-gradient(135deg, var(--color-medium) 0%, var(--color-dark) 100%);
   transform: scale(1.1);
}

.quantity-value {
   font-size: 1.5rem;
   font-weight: 600;
   color: var(--color-darkest);
   min-width: 20px;
   text-align: center;
}

.remove-item {
   background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
   color: #dc2626;
   border: 1px solid #fca5a5;
   padding: 6px 14px;
   border-radius: 8px;
   cursor: pointer;
   width: auto;
   font-size: 1.3rem;
   transition: all var(--transition-fast);
   margin-top: 8px;
}

.remove-item:hover {
   background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
   color: #fff;
   border-color: #dc2626;
   transform: scale(1.02);
}

.total-price {
   font-family: "Inter", sans-serif;
   font-size: 1.8rem;
   font-weight: 600;
   text-align: right;
   margin-bottom: 20px;
   color: var(--color-darkest);
   padding: 12px 16px;
   background: linear-gradient(90deg, transparent, var(--color-lightest));
   border-radius: 10px;
}

.checkout-button {
   font-family: "Inter", sans-serif;
   font-size: 1.5rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-darkest) 100%);
   color: var(--color-lightest);
   border: none;
   padding: 16px 32px;
   border-radius: 12px;
   cursor: pointer;
   width: 100%;
   display: block;
   margin: 0 auto;
   transition: all var(--transition-normal);
   position: relative;
   overflow: hidden;
}

.checkout-button::before {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
   transition: left 0.5s ease;
}

.checkout-button:hover {
   background: linear-gradient(135deg, var(--color-medium) 0%, var(--color-dark) 100%);
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(1, 22, 30, 0.3);
}

.checkout-button:hover::before {
   left: 100%;
}

.leatherworks {
   text-align: center;
   padding: 32px;
   background: linear-gradient(145deg, #ffffff 0%, var(--color-lightest) 100%);
   border-radius: 20px;
   box-shadow: var(--shadow-md);
   margin: 20px;
}

.leatherworks h2 {
   font-family: "Playfair Display", Georgia, serif;
   font-size: 2.8rem;
   font-weight: 600;
   margin: 0;
   color: var(--color-darkest);
}

.leatherworks p {
   margin: 0;
   font-family: "Inter", sans-serif;
   font-size: 1.4rem;
   font-weight: 400;
   margin-bottom: 24px;
   color: var(--color-dark);
   line-height: 1.6;
}

.custom-container {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   width: 100%;
   justify-content: space-between; /* Ensures even spacing between the gallery and form */
}

.gallery {
   flex: 1;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
   padding: 16px;
   background: linear-gradient(145deg, var(--color-lightest) 0%, #fff 100%);
   max-width: 50%;
   box-sizing: border-box;
   border-radius: 16px;
}

.gallery img {
   width: 100%;
   height: auto;
   max-height: 200px;
   object-fit: cover;
   border-radius: 12px;
   box-shadow: var(--shadow-md);
   transition: all var(--transition-normal);
}

.gallery img:hover {
   transform: scale(1.05) translateY(-4px);
   box-shadow: var(--shadow-hover);
}

.inquiry-form {
   flex: 1;
   background: linear-gradient(145deg, #ffffff 0%, var(--color-lightest) 100%);
   padding: 28px;
   border: 2px solid var(--color-light);
   border-radius: 16px;
   max-width: 50%;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: center;
   box-shadow: var(--shadow-md);
}

.inquiry-form h3 {
   font-family: "Playfair Display", Georgia, serif;
   margin-top: 0;
   margin-bottom: 24px;
   color: var(--color-darkest);
   font-weight: 600;
}

.inquiry-form form {
   display: flex;
   flex-direction: column;
}

.inquiry-form input,
.inquiry-form textarea {
   font-family: "Inter", sans-serif;
   padding: 14px 16px;
   margin-bottom: 14px;
   border: 2px solid var(--color-light);
   border-radius: 10px;
   font-size: 1.5rem;
   transition: all var(--transition-fast);
   background: #fff;
}

.inquiry-form input:focus,
.inquiry-form textarea:focus {
   outline: none;
   border-color: var(--color-dark);
   box-shadow: 0 0 0 3px rgba(18, 69, 89, 0.15);
}

.inquiry-form button {
   padding: 1.6rem 2.4rem;
   font-size: 1.4rem;
   font-family: "Inter", sans-serif;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   border: none;
   background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-darkest) 100%);
   color: var(--color-lightest);
   cursor: pointer;
   border-radius: 10px;
   width: fit-content;
   margin: 10px auto 0;
   transition: all var(--transition-normal);
}

.inquiry-form button:hover {
   background: linear-gradient(135deg, var(--color-medium) 0%, var(--color-dark) 100%);
   transform: translateY(-2px);
   box-shadow: var(--shadow-md);
}

/* Responsive Layout for Smaller Screens */
@media (max-width: 768px) {
   .custom-container {
      flex-direction: column; /* Stacks gallery and form vertically on small screens */
   }

   .gallery,
   .inquiry-form {
      max-width: 100%; /* Each takes full width on small screens */
   }
}