/* --- VARIABLES & RESET --- */
:root {
   --primary: #2C3E50; /* Dark Mountain Blue */
   --accent: #E67E22;  /* Sunset Orange for buttons */
   --light: #ECF0F1;   /* Snow White */
   --dark: #1a1a1a;    /* Deep Rock */
   --green: #27ae60;   /* Forest Green */
   --text-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }
html { scroll-padding-top: 80px; } 
body { font-family: var(--text-font); line-height: 1.6; color: var(--dark); }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; border-radius: 8px; }

/* --- NAVBAR --- */
.navbar {
   display: flex; justify-content: space-between; align-items: center;
   padding: 1rem 5%; background: rgba(255, 255, 255, 0.95);
   position: fixed; width: 100%; top: 0; z-index: 1000;
   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.logo { font-size: 1.5rem; font-weight: bold; color: var(--primary); }
.logo span { color: var(--accent); }

.nav-links { display: flex; list-style: none; gap: 20px; }
.nav-links li a { color: var(--primary); font-weight: 500; transition: 0.3s; }
.nav-links li a:hover { color: var(--accent); }

.nav-icons-container { display: flex; gap: 15px; align-items: center; }
.cart-icon { cursor: pointer; position: relative; font-size: 1.2rem; }
#cart-count { 
   position: absolute; top: -8px; right: -8px; 
   background: var(--accent); color: white; 
   font-size: 0.8rem; padding: 2px 6px; border-radius: 50%; 
}
.menu-toggle { display: none; cursor: pointer; font-size: 1.5rem; }

/* --- HERO SECTION --- */
.hero {
   position: relative; height: 100vh; overflow: hidden;
   display: flex; align-items: center; justify-content: center;
   text-align: center; color: white;
}
.slide {
   position: absolute; top: 0; left: 0; width: 100%; height: 100%;
   background-size: cover; background-position: center; opacity: 0;
   animation: slideShow 15s infinite linear;
}
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 5s; }
.slide:nth-child(3) { animation-delay: 10s; }
@keyframes slideShow {
   0% { opacity: 0; transform: scale(1); }
   5% { opacity: 1; } 33% { opacity: 1; } 38% { opacity: 0; }
   100% { opacity: 0; transform: scale(1.1); }
}
.hero-content {
   position: relative; z-index: 10; background: rgba(0,0,0,0.3);
   padding: 2rem; border-radius: 10px; width: 100%; max-width: 800px;
}
.hero h1 { font-size: 3.5rem; margin-bottom: 1rem; text-shadow: 2px 2px 5px rgba(0,0,0,0.5); }
.hero p { font-size: 1.2rem; margin-bottom: 2rem; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); }

/* --- BUTTONS & SECTIONS --- */
.btn {
   background: var(--accent); color: white; padding: 10px 25px;
   border-radius: 5px; font-weight: bold; display: inline-block;
   cursor: pointer; border: none; transition: 0.3s;
}
.btn:hover { background: #d35400; }
.section-padding { padding: 4rem 5%; }
.bg-light { background: #f9f9f9; }
.bg-dark { background: var(--primary); color: white; }
.section-title { text-align: center; font-size: 2rem; margin-bottom: 1rem; color: var(--primary); }
.text-white { color: white !important; }
.section-subtitle { text-align: center; margin-bottom: 3rem; color: #777; }

/* --- ABOUT SLIDESHOW --- */
.about-container { display: flex; flex-wrap: wrap; gap: 3rem; align-items: center; }
.about-text { flex: 1; min-width: 300px; text-align: justify; }
.about-image-slider {
   flex: 1; min-width: 300px; height: 400px; position: relative;
   border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.about-slide {
   position: absolute; top: 0; left: 0; width: 100%; height: 100%;
   background-size: cover; background-position: center; opacity: 0;
   animation: aboutSlideShow 20s infinite linear;
}
.about-slide:nth-child(1) { animation-delay: 0s; }
.about-slide:nth-child(2) { animation-delay: 4s; }
.about-slide:nth-child(3) { animation-delay: 8s; }
.about-slide:nth-child(4) { animation-delay: 12s; }
.about-slide:nth-child(5) { animation-delay: 16s; }
@keyframes aboutSlideShow {
   0% { opacity: 0; transform: scale(1); } 4% { opacity: 1; }
   20% { opacity: 1; } 24% { opacity: 0; } 100% { opacity: 0; transform: scale(1.05); }
}

/* --- GRIDS & CARDS (STANDARD) --- */
.grid-container {
   display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem;
}
.card {
   background: white; border-radius: 10px; overflow: hidden;
   box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s;
}
.card:hover { transform: translateY(-5px); }
.card img { width: 100%; height: 250px; object-fit: cover; }
.card-body { padding: 1.5rem; }
.card-title { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--dark); text-align: center; }
.card-price { color: var(--accent); font-weight: bold; font-size: 1.1rem; text-align: center; }
.card button { width: 100%; margin-top: 10px; }

/* ========================================================
  NEW: MERCH GRID STYLES (PORTRAIT 3:4 RATIO) 
======================================================== */
.merch-card { 
   background: transparent; 
   border-radius: 10px; 
   transition: transform 0.3s; 
}
.merch-card:hover { transform: translateY(-5px); }
.merch-img-wrapper { 
   width: 100%; 
   aspect-ratio: 3/4; /* Elegant portrait style */
   overflow: hidden; 
   border-radius: 10px; 
   background: #f0f0f0; 
}
.merch-img-wrapper img { 
   width: 100%; 
   height: 100%; 
   object-fit: cover; 
   object-position: top center; /* Focuses on the top part of clothing/models */
}
.merch-card-body { padding: 1rem 0; text-align: center; }
.merch-card-title { font-size: 1.1rem; font-weight: 600; color: var(--dark); margin-bottom: 5px; }
.merch-card-price { font-size: 1rem; color: #555; font-weight: bold; }

/* ========================================================
  NEW: MERCH DETAIL GALLERY SLIDER 
======================================================== */
.btn-back {
   background: none; border: none; font-size: 1rem; cursor: pointer;
   color: var(--primary); margin-bottom: 20px; display: inline-flex;
   align-items: center; gap: 10px; font-weight: bold;
}
.btn-back:hover { color: var(--accent); }

.product-detail-container {
   display: flex; flex-wrap: wrap; gap: 3rem; margin-top: 20px;
   background: white; padding: 2rem; border-radius: 15px;
   box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.product-gallery { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 15px; }
.main-image-wrapper { width: 100%; aspect-ratio: 3/4; border-radius: 10px; overflow: hidden; background: #f9f9f9; }
.main-image-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: 0.3s; }

.thumbnails { display: flex; gap: 10px; justify-content: space-between; }
.thumb-img { 
   width: calc(25% - 7.5px); 
   aspect-ratio: 3/4; 
   object-fit: cover; 
   object-position: top center;
   border-radius: 6px; 
   cursor: pointer; 
   opacity: 0.5; 
   transition: 0.3s; 
   border: 2px solid transparent; 
}
.thumb-img:hover, .thumb-img.active { opacity: 1; border-color: var(--dark); }

.product-right { flex: 1; min-width: 300px; }
.product-title { font-size: 2rem; margin-bottom: 10px; color: var(--dark); }
.product-price { font-size: 1.5rem; color: var(--accent); font-weight: bold; margin-bottom: 20px; }
.product-desc { color: #666; margin-bottom: 30px; line-height: 1.6; }

/* Selectors */
.size-selector { margin-bottom: 20px; }
.size-label { font-weight: bold; margin-bottom: 10px; display: block; }
.size-btn {
   padding: 10px 20px; border: 1px solid #ddd; background: white;
   cursor: pointer; margin-right: 10px; border-radius: 5px; transition: 0.3s;
}
.size-btn:hover, .size-btn.active { background: var(--dark); color: white; border-color: var(--dark); }

.color-selector { margin-bottom: 30px; display: flex; gap: 10px; }
.color-dot {
   width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
   border: 2px solid #eee; transition: 0.3s;
}
.color-dot:hover, .color-dot.active { border: 2px solid var(--dark); transform: scale(1.1); }

.product-actions { display: flex; gap: 10px; margin-top: 20px; }
.btn-add-cart {
   flex: 1; background: white; color: var(--dark); padding: 15px; 
   border: 1px solid var(--dark); border-radius: 30px; font-size: 1rem; 
   cursor: pointer; font-weight: bold; transition: 0.3s;
}
.btn-buy-now {
   flex: 1; background: var(--dark); color: white; padding: 15px; 
   border: none; border-radius: 30px; font-size: 1rem; 
   cursor: pointer; font-weight: bold; transition: 0.3s;
}
.btn-add-cart:hover { background: #f8f8f8; }
.btn-buy-now:hover { opacity: 0.9; }

/* --- CART MODAL --- */
.cart-modal {
   display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
   background: rgba(0,0,0,0.6); z-index: 2000;
}
.cart-content {
   background: white; width: 90%; max-width: 400px; margin: 10% auto;
   padding: 2rem; border-radius: 10px; position: relative;
}
.close-cart { position: absolute; top: 10px; right: 15px; font-size: 1.5rem; cursor: pointer; }
.cart-item { display: flex; justify-content: space-between; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; }
.cart-total { font-weight: bold; margin: 15px 0; font-size: 1.1rem; }
.checkout-btn { width: 100%; background: #25D366; color: white; border: none; padding: 10px; font-weight: bold; cursor: pointer; }

/* --- FOOTER --- */
footer { background: var(--dark); color: white; text-align: center; padding: 2rem; }
.socials a { font-size: 1.5rem; margin: 0 10px; color: white; }

/* --- SHOPIFY STYLE CHECKOUT --- */
#checkout-view {
   background: white;
   min-height: 100vh;
   padding-top: 80px; 
}
.checkout-container {
   max-width: 1200px;
   margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
   min-height: calc(100vh - 80px);
}
.checkout-form-section {
   flex: 1.2;
   padding: 3rem 5%;
   background: white;
   border-right: 1px solid #eee;
}
.checkout-summary-section {
   flex: 0.8;
   padding: 3rem 5%;
   background: #fafafa; 
}
.checkout-form-section h2 {
   font-size: 1.2rem;
   margin-bottom: 1rem;
   color: var(--dark);
}
.form-row { display: flex; gap: 15px; }
.input-group { width: 100%; margin-bottom: 15px; }
.input-group input {
   width: 100%; padding: 14px; border: 1px solid #d9d9d9;
   border-radius: 5px; font-size: 1rem; transition: 0.3s;
}
.input-group input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 1px var(--accent); }

/* --- PAYMENT METHOD STYLES --- */
.payment-box {
   border: 1px solid #d9d9d9;
   border-radius: 5px;
   background: white;
   margin-bottom: 20px;
}
.payment-option { border-bottom: 1px solid #d9d9d9; }
.payment-option:last-child { border-bottom: none; }
.payment-label {
   display: flex; align-items: center; gap: 10px;
   padding: 15px; cursor: pointer; font-weight: 500;
}
.payment-label span { display: flex; align-items: center; gap: 8px; }
.payment-details-view {
   padding: 15px 20px; background: #fafafa;
   border-top: 1px solid #d9d9d9;
   font-size: 0.95rem; color: #555;
}

.btn-complete-order {
   width: 100%; padding: 18px; background: var(--dark); color: white;
   border: none; border-radius: 5px; font-size: 1.1rem;
   font-weight: bold; cursor: pointer; margin-top: 20px; transition: 0.3s;
}
.btn-complete-order:hover { background: var(--accent); }
.checkout-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.checkout-item-name { font-weight: 500; }
.checkout-item-price { color: #555; }
.summary-row { display: flex; justify-content: space-between; margin-bottom: 10px; color: #555; }
.total-row { font-size: 1.5rem; font-weight: bold; color: var(--dark); margin-top: 15px; }

/* --- ORDER SUCCESS PAGE --- */
#success-view {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #fafafa;
   padding: 2rem;
}
.success-container {
   background: white;
   padding: 3rem;
   border-radius: 10px;
   box-shadow: 0 5px 20px rgba(0,0,0,0.05);
   text-align: center;
   max-width: 600px;
   width: 100%;
}
.success-icon {
   font-size: 5rem;
   color: var(--green);
   margin-bottom: 20px;
}
.success-container h1 {
   font-size: 2rem;
   color: var(--dark);
   margin-bottom: 10px;
}
.success-subtext {
   color: #666;
   margin-top: 15px;
   font-size: 0.95rem;
}

/* ================= EXPEDITION DETAIL PAGE PRO-STYLES ================= */
.trip-hero {
   position: relative;
   width: 100%;
   height: 800px; 
   overflow: hidden;
   border-radius: 15px;
   margin-bottom: 2rem;
   box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Holds both the blurred background and the crisp foreground */
.trip-hero-slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    animation: heroFadeZoom 12s infinite linear;
}
.trip-hero-slide.slide-0 { animation-delay: 0s; }
.trip-hero-slide.slide-1 { animation-delay: 4s; }
.trip-hero-slide.slide-2 { animation-delay: 8s; }

/* The blurred backdrop that fills the empty space for vertical images */
.hero-blur-bg {
    position: absolute;
    top: -10%; left: -10%; width: 120%; height: 120%;
    background-size: cover;
    background-position: center;
    filter: blur(25px) brightness(0.4);
    z-index: 1;
}

/* The actual image (Contain for vertical, Cover for horizontal) */
.hero-clear-img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; /* Defaults to cover, JS changes to contain if vertical */
    object-position: center;
    z-index: 2;
}

@keyframes heroFadeZoom {
    0% { opacity: 0; transform: scale(1); }
    10% { opacity: 1; }
    33% { opacity: 1; }
    43% { opacity: 0; }
    100% { opacity: 0; transform: scale(1.05); }
}

.trip-hero-content {
   position: absolute; bottom: 0; left: 0; width: 100%;
   background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
   color: white; padding: 3rem 2rem 1.5rem 2rem;
   z-index: 10;
}
.trip-hero-content h1 { font-size: 3rem; margin-bottom: 5px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.trip-hero-content p { font-size: 1.2rem; color: #ddd; }

.trip-layout {
   display: grid;
   grid-template-columns: 2fr 1fr; 
   gap: 3rem;
   align-items: start;
}
.trip-sidebar {
   background: white; padding: 2rem; border-radius: 15px;
   box-shadow: 0 5px 20px rgba(0,0,0,0.08);
   position: sticky; top: 100px; 
   border: 1px solid #eee;
}
.price-tag { font-size: 2rem; font-weight: bold; color: var(--accent); }
.price-sub { font-size: 0.9rem; color: #777; font-weight: normal; }

.itinerary-list {
   border-left: 2px dashed #ccc;
   margin-left: 10px; padding-left: 20px;
}
.itinerary-day { position: relative; margin-bottom: 2rem; }
.itinerary-day::before {
   content: ''; position: absolute; left: -27px; top: 5px;
   width: 12px; height: 12px; background: var(--accent);
   border-radius: 50%; box-shadow: 0 0 0 4px white;
}
.day-title { font-size: 1.1rem; color: var(--dark); margin-bottom: 5px; }
.day-desc { color: #666; font-size: 0.95rem; line-height: 1.5; }

.info-chip-container { display: flex; flex-wrap: wrap; gap: 15px; margin: 20px 0; }
.info-chip {
   background: #f0f4f8; padding: 10px 15px; border-radius: 8px;
   display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--primary);
}

.check-list li, .cross-list li, .pack-list li {
   margin-bottom: 8px; font-size: 0.95rem; display: flex; align-items: center; gap: 8px;
}
.gallery-img:hover { transform: scale(1.03); }

/* --- IMAGE LIGHTBOX --- */
.lightbox-modal {
   display: none; 
   position: fixed; 
   z-index: 3000; 
   left: 0; 
   top: 0;
   width: 100%; 
   height: 100%; 
   background-color: rgba(0,0,0,0.9);
   justify-content: center; 
   align-items: center; 
   cursor: pointer;
}
.lightbox-content { 
   width: auto; 
   height: auto; 
   max-width: 98vw; 
   max-height: 98vh; 
   object-fit: contain; 
   border-radius: 0;
   box-shadow: 0 0 20px rgba(0,0,0,0.5); 
}
.close-lightbox { 
   position: absolute; 
   top: 20px; 
   right: 35px; 
   color: #fff; 
   font-size: 40px; 
   font-weight: bold; 
   cursor: pointer; 
}

/* --- AESTHETIC TERMS SECTION --- */
.terms-container { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.term-box { display: flex; gap: 15px; background: #f8f9fa; border: 1px solid #eee; padding: 20px; border-radius: 10px; transition: 0.3s; }
.term-box:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.05); transform: translateY(-2px); border-color: #ddd; }
.term-icon { font-size: 1.5rem; margin-top: 2px; }
.term-content h4 { color: var(--dark); margin-bottom: 5px; font-size: 1rem; }
.term-content p { color: #555; font-size: 0.9rem; line-height: 1.6; margin: 0; }

/* ================= MOBILE RESPONSIVENESS FIXES ================= */
@media screen and (max-width: 768px) {
    /* 1. Global Reset */
    html, body {
        overflow-x: hidden !important;
        width: 100%;
    }

    /* 2. Navbar Setup */
    .navbar {
        position: fixed !important; 
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 70px !important;
        background: #fff !important;
        display: block !important;
        padding: 0 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
        z-index: 2000 !important; /* Keep navbar on top of everything */
    }

    /* 3. Hamburger Menu (3 Lines) -> FAR LEFT */
    .menu-toggle {
        display: block !important;
        position: absolute !important;
        left: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 1.8rem !important;
        color: #000 !important; 
        margin: 0 !important;
        z-index: 2100 !important;
    }

    /* 4. LOGO -> PERFECTLY DEAD-CENTER & SMALLER */
    .logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: max-content !important;
        text-align: center !important;
        margin: 0 !important;
        z-index: 2050 !important;
    }

    .logo div, .logo span {
        font-size: 1rem !important; 
        letter-spacing: 1.5px !important;
        font-weight: 800 !important;
    }

    /* 5. Cart Icon -> FAR RIGHT */
    .cart-icon {
        display: block !important;
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 1.5rem !important;
        margin: 0 !important;
        z-index: 2100 !important;
    }

    /* 6. AESTHETIC COMPACT DROPDOWN MENU */
    .nav-links {
        display: flex !important; 
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: fixed;
        top: -100%; /* Hidden off-screen */
        left: 0;
        width: 100%;
        height: auto; /* Hugs the content instead of full screen */
        background: #ffffff; 
        padding: 15px 0 25px 0 !important; /* Clean padding */
        box-shadow: 0 15px 25px rgba(0,0,0,0.08); /* Soft floating shadow */
        border-radius: 0 0 20px 20px; /* Smooth rounded bottom edges */
        transition: all 0.4s ease-in-out; 
        z-index: 1500; /* Sits UNDER the 2000 navbar */
        opacity: 0;
    }

    /* When clicked, it slides exactly underneath the 70px navbar */
    .nav-links.active {
        top: 70px !important; 
        opacity: 1;
    }

    /* Tighter, cleaner list items */
    .nav-links li {
        margin: 10px 0; 
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s ease;
    }

    .nav-links.active li {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.15s;
    }

    /* Smaller, professional font size */
    .nav-links a {
        font-size: 1.15rem !important; 
        font-weight: 500;
        letter-spacing: 0.5px;
        color: #2C3E50;
        text-decoration: none;
        padding: 8px 20px;
    }

    /* Push main content down so it doesn't hide behind the fixed navbar */
    main, .hero {
        margin-top: 70px !important;
    }

    /* 7. Expedition Layout Fix */
    .trip-layout {
        display: flex !important;
        flex-direction: column !important;
        padding: 15px !important;
        gap: 20px !important;
    }

    .trip-main, .trip-sidebar {
        width: 100% !important;
    }

    .trip-sidebar {
        margin-top: 10px !important;
        padding: 20px !important;
        border: 1px solid #ddd !important;
        border-radius: 10px !important;
    }

    .trip-main > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .trip-hero {
        height: 350px !important; 
    }
    
    .trip-hero-content h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    /* 8. Merch / Hoodie Layout Fix */
    .product-gallery, .product-right {
        width: 100% !important;
        padding: 10px !important;
        display: block !important;
    }

    .product-right {
        text-align: center !important;
    }

    .color-selector, .size-selector {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
        margin: 20px 0 !important;
    }

    .color-dot {
        width: 35px !important;
        height: 35px !important;
        border-radius: 50% !important;
        border: 2px solid #ddd !important;
    }

    .size-btn {
        padding: 12px 20px !important;
        font-size: 1rem !important;
        border-radius: 5px !important;
        flex-grow: 1 !important;
    }

    .product-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .btn-add-cart, .btn-buy-now {
        width: 100% !important;
        padding: 15px !important;
    }
    /* 9. CHECKOUT PAGE MOBILE FIX */
    #checkout-view {
        padding: 15px !important;
        margin-top: 20px !important;
    }

    /* Force the main checkout container to stack vertically */
    #checkout-view > div,
    .checkout-container {
        display: flex !important;
        flex-direction: column !important; 
        gap: 40px !important;
    }

    /* Make both the form and the summary take up 100% of the screen width */
    #checkout-view > div > div,
    .checkout-left,
    .checkout-right {
        width: 100% !important;
        min-width: 100% !important;
        padding: 0 !important;
        border-left: none !important; /* Removes the vertical dividing line */
        border-right: none !important;
    }

    /* Fix side-by-side inputs (like First Name / Last Name) to stack neatly */
    #checkout-view input, 
    #checkout-view select {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 10px !important;
        padding: 12px !important; /* Makes text boxes thumb-friendly */
        font-size: 1rem !important; /* Stops iPhone from auto-zooming */
    }
    
    /* Target any inner flex rows inside the form to stack them */
    #checkout-view div[style*="display: flex"],
    .form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
    }

    /* Make the final checkout button full width */
    #checkout-view .btn {
        width: 100% !important;
        padding: 15px !important;
        font-size: 1.1rem !important;
        margin-top: 20px !important;
    }
}