/* FILE: css/style.css */
/* PURPOSE: Main stylesheet for Kopi Glow Website */

/* --- 1. Basic Reset & Globals --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 100%; /* Typically 16px */
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333; /* Dark grey text */
    background-color: #fdfcfb; /* Very light off-white/beige */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure body takes full viewport height */
    -webkit-font-smoothing: antialiased; /* Smoother fonts on Mac */
    -moz-osx-font-smoothing: grayscale;
}

.main-content {
    flex: 1 0 auto; /* Allow main content to grow and push footer down */
}

.container {
    width: 100%;
    max-width: 1140px; /* Common max width */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px; /* Consistent horizontal padding */
    padding-right: 15px;
}

a {
    text-decoration: none;
    color: #8B4513; /* Primary theme color (Coffee brown) */
    transition: color 0.3s ease;
}

a:hover, a:focus {
    color: #A0522D; /* Lighter brown on hover/focus */
    outline: none; /* Remove default focus outline if custom is provided */
}

img {
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below image */
    vertical-align: middle;
}

ul, ol {
    list-style: none; /* Remove default list bullets/numbers */
}

/* Basic heading styles */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
    font-weight: 600; /* Semi-bold */
    color: #402E32; /* Dark brownish color for headings */
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 1rem; /* Consistent bottom margin */
}

h1 { font-size: clamp(2rem, 5vw, 2.8rem); } /* Responsive font size */
h2 { font-size: clamp(1.8rem, 4vw, 2.2rem); text-align: center; } /* Default H2 centered */
h3 { font-size: clamp(1.4rem, 3vw, 1.6rem); }
h4 { font-size: clamp(1.1rem, 2.5vw, 1.2rem); }

section { /* Default spacing for content sections */
    padding-top: clamp(40px, 8vw, 80px);
    padding-bottom: clamp(40px, 8vw, 80px);
}

/* --- 2. Utility Classes --- */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 0.9rem; /* Slightly smaller base button size */
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px; /* Increased letter spacing */
    line-height: 1.5;
    vertical-align: middle; /* Align with text */
}

.btn-primary {
    background-color: #8B4513; /* Coffee brown */
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(139, 69, 19, 0.2); /* Subtle shadow */
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #A0522D; /* Lighter brown */
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(160, 82, 45, 0.3);
}

.btn-secondary {
    background-color: #D2B48C; /* Tan */
    color: #543a20; /* Darker brown text for contrast */
    border: 1px solid #c8a97e; /* Slightly darker border */
}

.btn-secondary:hover, .btn-secondary:focus {
    background-color: #c8a97e;
    color: #402E32; /* Darker heading color */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

.btn-outline {
    background-color: transparent;
    color: #8B4513;
    border: 2px solid #8B4513;
}

.btn-outline:hover, .btn-outline:focus {
     background-color: #8B4513;
     color: #ffffff;
     transform: translateY(-2px);
}

.btn-sm { /* Smaller button variant */
    padding: 8px 18px;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.btn-danger { /* For remove/cancel actions */
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
}

.btn-danger:hover, .btn-danger:focus {
     background-color: #c82333;
     border-color: #bd2130;
     color: white;
     transform: translateY(-2px);
}

.btn-block { /* Make button full width */
    display: block;
    width: 100%;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }

/* Simple Alert Box Styles (for session messages) */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 0.95rem;
}
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.alert-danger, .alert-error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

/* --- 3. Header & Navigation --- */
.main-header {
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07); /* Softer shadow */
    position: sticky; /* Make header stick */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Ensure header is above other content */
}

.navbar {
    height: 75px; /* Standard height */
    display: flex; /* Use flexbox for alignment within */
    align-items: center;
}

.navbar-container {
    display: flex;
    justify-content: space-between; /* Space out logo, nav, icons */
    align-items: center;
    width: 100%; /* Take full container width */
}

.navbar-logo {
    display: flex;
    align-items: center;
    color: #333;
    font-size: 1.6rem;
    font-weight: 700;
}
.navbar-logo img {
    margin-right: 12px; /* Space between image and text */
    height: 40px;
    width: auto;
}
.navbar-logo span {
    color: #555; /* Slightly lighter text for logo */
}

.nav-menu { /* Desktop Menu */
    display: flex;
    align-items: center;
}

.nav-item {
    margin-left: 35px; /* Spacing between nav items */
}

.nav-link {
    color: #444; /* Darker grey for links */
    font-weight: 500; /* Medium weight */
    padding: 8px 0; /* Top/bottom padding for larger click area */
    position: relative; /* For the underline effect */
    transition: color 0.3s ease;
    text-transform: uppercase;
    font-size: 0.85rem; /* Slightly smaller nav links */
    letter-spacing: 0.8px;
}

.nav-link::after { /* Underline effect */
    content: '';
    position: absolute;
    bottom: 0px; /* Position underline closer */
    left: 0;
    width: 0; /* Hidden initially */
    height: 2px;
    background-color: #8B4513;
    transition: width 0.3s ease-out; /* Smooth transition */
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active { /* Style for hover, focus, and active states */
    color: #8B4513; /* Highlight color */
}

.nav-link:hover::after,
.nav-link:focus::after,
.nav-link.active::after {
    width: 100%; /* Show underline */
}

.nav-icons {
    display: flex;
    align-items: center;
}

.nav-icon-link {
    color: #555;
    font-size: 1.25rem; /* Slightly larger icons */
    margin-left: 28px; /* Spacing between icons */
    position: relative;
    transition: color 0.3s ease;
}

.nav-icon-link:hover, .nav-icon-link:focus {
    color: #8B4513; /* Highlight on hover/focus */
}

.cart-count {
    position: absolute;
    top: -7px; /* Adjust vertical position */
    right: -10px; /* Adjust horizontal position */
    background-color: #8B4513;
    color: #fff;
    font-size: 0.65rem; /* Smaller count text */
    width: 18px; /* Fixed width/height for circle */
    height: 18px;
    border-radius: 50%;
    font-weight: 600;
    display: flex; /* Center number inside */
    justify-content: center;
    align-items: center;
    line-height: 1;
}

/* Hamburger Menu Button (Mobile) */
.hamburger {
    display: none; /* Hidden on desktop */
    cursor: pointer;
    background: none;
    border: none;
    font-size: 1.7rem;
    color: #555;
    margin-left: 15px;
    padding: 8px; /* Increase clickable area */
    line-height: 1; /* Prevent button height issues */
}

.hamburger:hover, .hamburger:focus {
    color: #8B4513;
}

/* Mobile Menu Panel */
.mobile-menu {
    display: none; /* Hidden by default */
    flex-direction: column;
    background-color: #ffffff;
    position: absolute; /* Position below header */
    top: 75px; /* Match navbar height */
    left: 0;
    width: 100%;
    padding: 10px 0;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    border-top: 1px solid #eee;
    z-index: 999; /* Below header but above content */
}

.mobile-menu.active { /* Class added by JS to show menu */
    display: flex;
}

.mobile-menu a {
    padding: 14px 20px;
    color: #444;
    display: block;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mobile-menu a:last-child {
    border-bottom: none;
}

.mobile-menu a:hover, .mobile-menu a:focus {
    background-color: #f8f8f8;
    color: #8B4513;
}

/* --- 4. Hero Section --- */
.hero {
    height: calc(100vh - 75px); /* Full viewport height minus navbar */
    min-height: 450px; /* Minimum height for smaller screens */
    background-size: cover;
    background-position: center center; /* Center the background image */
    display: flex;
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    text-align: center;
    color: #ffffff; /* Default text color on hero */
    position: relative; /* Needed for the overlay */
    padding: 0; /* Remove default section padding */
    background-attachment: fixed; /* Creates a parallax effect (optional) */
    overflow: hidden; /* Hide potential overflow */
}

.hero::before { /* Darkening overlay */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.55)); /* Gradient overlay */
    z-index: 1; /* Place overlay below content */
}

.hero-content {
    position: relative; /* Place content above overlay */
    z-index: 2;
    max-width: 750px; /* Limit width of content */
    padding: 30px;
    /* Optional: Subtle background for text if needed */
    /* background-color: rgba(0, 0, 0, 0.1); */
    /* border-radius: 5px; */
}

.hero h1 {
    font-size: clamp(2.5rem, 6vw, 4rem); /* Responsive title */
    margin-bottom: 1rem;
    font-weight: 700; /* Bold title */
    line-height: 1.2;
    color: #ffffff; /* Ensure white color */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5); /* Text shadow for readability */
}

.hero p {
    font-size: clamp(1.1rem, 3vw, 1.4rem); /* Responsive paragraph */
    margin-bottom: 2rem;
    font-weight: 300; /* Lighter weight for description */
    color: #f0f0f0; /* Slightly off-white */
    max-width: 600px; /* Limit paragraph width */
    margin-left: auto;
    margin-right: auto;
}

.hero .btn-primary { /* Specific style for hero button */
    padding: 14px 32px;
    font-size: 1rem;
}

/* --- 5. Introduction / Features Section --- */
.intro-section h2 { margin-bottom: 1rem; } /* Adjust heading margin */

.intro-section > p { /* Styles the main introductory paragraph */
    text-align: center;
    max-width: 750px;
    margin: 0 auto 40px auto;
    color: #555;
    font-size: 1.1rem;
}

.features {
    display: grid;
    /* Create responsive columns: min 250px wide, fit as many as possible */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px; /* Space between feature items */
    margin-top: 40px;
}

.feature-item {
    text-align: center;
    padding: 30px 25px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06); /* Slightly stronger shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-6px); /* Lift effect on hover */
    box-shadow: 0 8px 20px rgba(0,0,0,0.09);
}

.feature-item i { /* Font Awesome icon */
    font-size: 2.8rem; /* Icon size */
    color: #8B4513; /* Theme color */
    margin-bottom: 20px;
    display: inline-block; /* Ensure margin bottom works */
}

.feature-item h3 {
    font-size: 1.25rem; /* Feature title size */
    margin-bottom: 10px;
    font-weight: 600;
    color: #402E32;
}

.feature-item p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

/* --- 6. Product Grid & Cards --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 35px; /* Slightly more gap */
}

.product-card {
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden; /* Clip image corners */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column; /* Stack image, info, button */
    text-decoration: none; /* Remove underline from link wrapper */
    color: inherit; /* Inherit text color */
}

.product-card:hover, .product-card:focus-within { /* Add focus state */
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.product-card .product-image-link { /* Link wrapping the image */
    display: block;
    overflow: hidden; /* Ensure image zoom effect stays contained if added */
}
.product-card img {
    width: 100%;
    height: 260px; /* Consistent image height */
    object-fit: cover; /* Scale and crop image */
    border-bottom: 1px solid #eee;
    transition: transform 0.4s ease; /* For potential hover zoom effect */
}
.product-card:hover img {
     /* transform: scale(1.05); */ /* Optional: zoom image on hover */
}

.product-card .product-info {
    padding: 20px;
    text-align: center;
    flex-grow: 1; /* Allow info section to take remaining space */
    display: flex; /* Use flex to push button down */
    flex-direction: column;
}

.product-card h3 { /* Product Title */
    font-size: 1.15rem; /* Adjust size */
    font-weight: 600;
    margin-bottom: 8px;
    color: #402E32;
}
.product-card h3 a { /* Make title clickable */
    color: inherit;
}
.product-card h3 a:hover {
    color: #8B4513;
}

.product-price {
    font-size: 1.2rem;
    font-weight: 700; /* Bold price */
    color: #8B4513; /* Theme color */
    margin-bottom: 15px;
}

.product-short-desc {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
    flex-grow: 1; /* Pushes button to the bottom */
}

.product-card form { /* Form containing the button */
     margin-top: auto; /* Aligns button to bottom */
}
.product-card .btn {
    margin-top: 0; /* Override default btn margin */
}


/* --- 7. Call to Action Section --- */
.cta-section {
    background-color: #D2B48C; /* Tan */
    color: #4a2c12; /* Darker brown text */
    padding: clamp(40px, 6vw, 60px) 0; /* Responsive padding */
    text-align: center;
}
.cta-section h2 {
    margin-bottom: 1rem;
    font-weight: 700;
    color: inherit;
}
.cta-section p {
    margin-bottom: 1.8rem;
    font-size: 1.1rem;
    color: inherit;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.cta-section .btn-primary { /* Ensure button contrast */
    background-color: #8B4513;
    color: #fff;
}
.cta-section .btn-primary:hover {
     background-color: #A0522D;
}

/* --- 8. Footer --- */
.main-footer {
    background-color: #383838; /* Slightly lighter dark grey */
    color: #b0b0b0; /* Lighter grey text */
    padding-top: clamp(50px, 7vw, 70px);
    margin-top: auto; /* Push footer down if content is short */
    font-size: 0.9rem;
    line-height: 1.7;
}

.footer-container {
    display: grid;
    /* Responsive columns: Start with 1, then 2, then 4 */
    grid-template-columns: 1fr;
    gap: 40px;
}
/* Larger screen layouts for footer */
@media (min-width: 576px) {
    .footer-container { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .footer-container { grid-template-columns: repeat(4, 1fr); }
}


.footer-section h4 {
    color: #ffffff;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    font-weight: 600;
    font-size: 1.1rem;
    position: relative;
    display: inline-block; /* Keep underline contained */
}
.footer-section h4::after { /* Underline effect */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px; /* Underline width */
    height: 2px;
    background-color: #8B4513; /* Theme color */
}

.footer-section p, .footer-section li {
    margin-bottom: 0.75rem;
}
.footer-section ul {
    padding-left: 0;
}
.footer-section a {
    color: #d0d0d0; /* Lighter link color */
}
.footer-section a:hover, .footer-section a:focus {
    color: #ffffff;
    text-decoration: underline;
}
.footer-section i { /* Icons in contact info */
    margin-right: 8px;
    color: #8B4513;
    width: 20px;
    text-align: center;
}

.social-icons { margin-top: 1rem; }
.social-icons a {
    color: #b0b0b0;
    margin-right: 18px;
    font-size: 1.3rem;
    display: inline-block; /* Allow margins */
    transition: color 0.3s ease, transform 0.3s ease;
}
.social-icons a:hover, .social-icons a:focus {
    color: #ffffff;
    transform: translateY(-2px); /* Slight lift */
    text-decoration: none;
}
.social-icons a:last-child { margin-right: 0; }

.newsletter-form {
    display: flex;
    margin-top: 1rem;
    max-width: 300px; /* Limit width */
}
.newsletter-form input[type="email"] {
    flex-grow: 1;
    padding: 10px 12px;
    border: 1px solid #555;
    background-color: #484848; /* Slightly lighter input background */
    color: #ffffff;
    border-radius: 4px 0 0 4px;
    font-family: inherit;
    font-size: 0.9rem;
}
.newsletter-form input[type="email"]::placeholder {
    color: #a0a0a0;
}
.newsletter-form button {
    padding: 10px 15px;
    background-color: #8B4513;
    color: #ffffff;
    border: 1px solid #8B4513; /* Add border for consistency */
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    font-family: inherit;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
    margin: 0; /* Override button default margin */
    margin-left: -1px; /* Overlap border slightly */
}
.newsletter-form button:hover, .newsletter-form button:focus {
    background-color: #A0522D;
    border-color: #A0522D;
}

.footer-bottom {
    text-align: center;
    padding: 25px 0;
    margin-top: 40px;
    border-top: 1px solid #484848; /* Lighter border */
    font-size: 0.85rem;
    color: #a0a0a0; /* Lighter copyright text */
}
.footer-bottom p { margin-bottom: 0; }


/* --- 9. Specific Page Styles --- */

/* General Page Header (used on About, Shop, Contact, etc.) */
.page-header {
    background-color: #f8f3ef; /* Light beige background */
    padding: clamp(30px, 5vw, 50px) 0;
    text-align: center;
    margin-bottom: clamp(30px, 5vw, 50px); /* Space below header */
    border-bottom: 1px solid #e9e0d7;
}
.page-header h1 {
     margin-bottom: 0.25rem; /* Less margin below title */
     font-size: clamp(2.2rem, 5vw, 3rem);
     color: #543a20; /* Darker brown for page title */
}
.page-header p { /* Subtitle/description */
    color: #776;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto; /* Center subtitle */
}

/* About Page */
.about-content { max-width: 900px; margin: 0 auto; } /* Center content */
.about-content h2 {
    text-align: left;
    margin-top: 2.5rem; /* Space between sections */
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 0.75rem;
    font-size: 1.8rem;
}
.about-content h2:first-of-type {
    margin-top: 0;
}
.about-content p, .about-mission li {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: #555;
}
.about-mission ul {
    padding-left: 0;
}
.about-mission li {
     padding-left: 30px; /* Indent for icon */
     position: relative;
}
.about-mission li::before {
    content: '\f00c'; /* Font Awesome check icon unicode */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900; /* Use solid style */
    color: #8B4513; /* Theme color */
    position: absolute;
    left: 0;
    top: 4px; /* Adjust vertical alignment */
    font-size: 1.1em; /* Slightly larger icon */
}
.about-mission li strong {
    color: #402E32; /* Darker heading color */
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive team grid */
    gap: 30px;
    margin-top: 2rem;
}
.team-member {
    text-align: center;
    background: #ffffff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.team-member:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.09);
}
.team-member img {
    width: 140px; /* Larger image */
    height: 140px;
    border-radius: 50%; /* Circular image */
    object-fit: cover; /* Cover area nicely */
    margin: 0 auto 1rem auto;
    border: 5px solid #f0f0f0; /* Light border */
}
.team-member h4 {
    margin-bottom: 0.25rem;
    font-size: 1.15rem;
    font-weight: 600;
}
.team-member p { /* Role */
    font-size: 0.9rem;
    color: #777;
    font-style: italic;
    margin-bottom: 0;
}

/* Product Detail Page */
.product-detail-section {
    padding-bottom: 60px;
}
.product-detail-layout {
    display: grid;
    grid-template-columns: 1fr; /* Start stacked */
    gap: 40px; /* Gap between image and info */
    align-items: start; /* Align top */
}
@media (min-width: 768px) { /* Side-by-side on medium screens and up */
    .product-detail-layout {
        grid-template-columns: 1fr 1.2fr; /* Image | Info */
        gap: 50px;
    }
}
.product-detail-image img {
     border-radius: 8px;
     box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Softer shadow */
     border: 1px solid #f0f0f0;
}

.product-detail-info h1 {
    font-size: clamp(1.8rem, 4vw, 2.4rem); /* Responsive heading */
    margin-bottom: 1rem;
    font-weight: 700;
    color: #402E32;
    text-align: left; /* Override default centering */
}
.product-detail-price {
    font-size: clamp(1.6rem, 3.5vw, 2rem); /* Responsive price */
    color: #8B4513;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.product-description {
    margin-bottom: 1.8rem;
    line-height: 1.8;
    color: #555;
}
.product-meta {
     margin-bottom: 1.8rem;
     font-size: 0.95rem;
     color: #666;
     border-top: 1px solid #eee;
     padding-top: 1.5rem;
}
.product-meta p {
    margin-bottom: 0.75rem;
}
.product-meta strong {
    color: #444;
    min-width: 100px; /* Align labels */
    display: inline-block;
    margin-right: 5px;
}

.add-to-cart-form {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    align-items: center;
    gap: 15px;
    margin-top: 1.5rem;
    background-color: #f9f9f9;
    padding: 25px;
    border-radius: 5px;
    border: 1px solid #eee;
}
.add-to-cart-form label {
    font-weight: 600;
    margin-bottom: 0;
    margin-right: 5px;
}
.quantity-input { /* Shared by cart and product detail */
    width: 65px;
    padding: 10px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    -moz-appearance: textfield; /* Hide spinners in Firefox */
}
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button { /* Hide spinners in Chrome/Safari */
    -webkit-appearance: none;
    margin: 0;
}
.add-to-cart-form .btn {
    margin-top: 0; /* Reset default button margin */
}

/* Cart Page Styles */
.cart-page { padding-bottom: 60px; }

.cart-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-radius: 5px; /* Rounded corners for table */
    overflow: hidden; /* Clip corners */
    font-size: 0.95rem;
}
.cart-table thead {
    background-color: #f8f3ef; /* Light beige */
    color: #543a20;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.8px;
}
.cart-table th, .cart-table td {
    padding: 15px 20px; /* Increased padding */
    text-align: left;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}
.cart-table tbody tr:last-child td {
    border-bottom: none; /* Remove border on last row */
}
/* Column width adjustments */
.cart-table th:nth-child(1), .cart-table td:nth-child(1) { width: 12%; text-align: center; } /* Image */
.cart-table th:nth-child(2), .cart-table td:nth-child(2) { width: 35%; } /* Product Title */
.cart-table th:nth-child(3), .cart-table td:nth-child(3) { width: 15%; } /* Price */
.cart-table th:nth-child(4), .cart-table td:nth-child(4) { width: 15%; text-align: center; } /* Qty */
.cart-table th:nth-child(5), .cart-table td:nth-child(5) { width: 15%; } /* Total */
.cart-table th:nth-child(6), .cart-table td:nth-child(6) { width: 8%; text-align: center; } /* Action */

.cart-item-image {
    max-width: 75px;
    height: auto;
    border-radius: 4px;
    border: 1px solid #eee;
}
.cart-item-title {
    font-weight: 600;
    color: #402E32;
    font-size: 1rem;
}
.cart-item-title a { color: inherit; }
.cart-item-title a:hover { color: #8B4513; }

.cart-item-quantity input.quantity-input {
    width: 60px; /* Smaller input */
    padding: 6px;
    font-size: 0.95rem;
}
.cart-item-remove .btn {
    padding: 6px 10px; /* Smaller remove button */
}

/* Cart Summary Box */
.cart-summary {
    background-color: #f8f8f8;
    padding: 35px; /* More padding */
    border-radius: 5px;
    border: 1px solid #e8e8e8;
    margin-top: 30px;
}
.cart-summary h3 {
    text-align: left; /* Align heading left */
    margin-bottom: 1.5rem;
    color: #402E32;
    font-size: 1.4rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #ddd;
}
.cart-summary .summary-line { /* Re-use summary styles from checkout */
     display: flex;
     justify-content: space-between;
     margin-bottom: 10px;
     font-size: 1rem;
     color: #555;
}
.cart-summary .summary-line span:last-child { font-weight: 600; color: #333; }

.cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.4rem; /* Larger total */
    font-weight: 700;
    color: #8B4513;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #ddd;
}
.cart-actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap; /* Allow wrapping */
    justify-content: space-between;
    align-items: center;
    gap: 15px; /* Space between buttons */
}
.cart-actions .btn { margin: 0; }

/* Contact Page */
.contact-section { padding-bottom: 60px; }
.contact-layout {
    display: grid;
    grid-template-columns: 1fr; /* Start stacked */
    gap: 40px;
}
@media(min-width: 768px){
    .contact-layout { grid-template-columns: 1fr 1.3fr; } /* Side-by-side */
}

.contact-info h2, .contact-form h2 {
    font-size: 1.8rem;
    text-align: left;
    margin-bottom: 1.5rem;
}
.contact-info p {
    margin-bottom: 1rem;
    color: #555;
    font-size: 1rem;
    line-height: 1.7;
}
.contact-info i {
    color: #8B4513;
    margin-right: 10px;
    width: 20px;
    text-align: center;
}
.map-container {
    margin-top: 2rem;
    height: 350px;
    background-color: #eee; /* Map placeholder */
    border-radius: 5px;
    overflow: hidden; /* Clip map iframe */
    border: 1px solid #ddd;
}
.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}
/* Form styles (re-using from checkout where possible) */
.contact-form .form-group { margin-bottom: 1.25rem; }
.contact-form label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    color: #555;
    font-size: 0.9rem;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    border-color: #8B4513;
    outline: none;
    box-shadow: 0 0 5px rgba(139, 69, 19, 0.2);
}
.contact-form textarea {
    min-height: 150px;
    resize: vertical;
}
.contact-form button { margin-top: 10px; }


/* Checkout Page Styles */
.checkout-page { padding-bottom: 60px; }

.checkout-layout {
    display: grid;
    grid-template-columns: 1fr; /* Start stacked */
    gap: 40px;
}
@media (min-width: 992px) {
    .checkout-layout { grid-template-columns: 1.5fr 1fr; } /* Details | Summary */
}

.customer-details h2, .order-summary h2 {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.75rem;
    text-align: left;
}

/* Customer details form styling */
.customer-details .form-group { margin-bottom: 1.25rem; }
.customer-details label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    color: #555;
    font-size: 0.9rem;
}
.customer-details input[type="text"],
.customer-details input[type="email"],
.customer-details input[type="tel"],
.customer-details textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
}
.customer-details input[type="text"]:focus,
.customer-details input[type="email"]:focus,
.customer-details input[type="tel"]:focus,
.customer-details textarea:focus {
    border-color: #8B4513;
    outline: none;
    box-shadow: 0 0 5px rgba(139, 69, 19, 0.2);
}
.customer-details textarea { min-height: 80px; resize: vertical; }
.customer-details .half-width { display: block; } /* Stack by default */
@media (min-width: 576px) { /* Side-by-side on small screens and up */
    .customer-details .form-group.inline-fields { display: flex; gap: 20px; }
    .customer-details .form-group.inline-fields .form-group { flex: 1; margin-bottom: 0; }
    /* Example Usage in HTML: <div class="form-group inline-fields"> <div class="form-group">...</div> <div class="form-group">...</div> </div> */
    /* Simplified half-width: */
     .customer-details .half-width {
         display: inline-block;
         width: calc(50% - 10px); /* Adjust gap */
     }
     .customer-details .half-width:nth-of-type(odd) { margin-right: 20px; }
}
.customer-details input:read-only { background-color: #e9ecef; cursor: not-allowed; }
.customer-details label span { font-weight: normal; } /* Required asterisk */


/* Order Summary Box */
.order-summary {
    background-color: #f9f9f9; /* Lighter background */
    padding: 30px;
    border-radius: 5px;
    border: 1px solid #e8e8e8;
    position: sticky; /* Stick on scroll */
    top: 95px; /* Adjust based on header height + gap */
    height: fit-content; /* Prevent stretching */
}
@media (max-width: 991px) { /* Unstick on smaller screens */
    .order-summary { position: static; margin-top: 30px; }
}

.summary-items {
    margin-bottom: 1.5rem;
    max-height: 350px; /* Limit height */
    overflow-y: auto; /* Add scroll if needed */
    padding-right: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}
.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    padding: 6px 0;
}
.summary-item:not(:last-child) { border-bottom: 1px dashed #e0e0e0; }
.summary-item-name { color: #555; padding-right: 10px; }
.summary-item-price { font-weight: 600; color: #333; white-space: nowrap; }

.summary-totals {
    padding-top: 1rem;
    margin-bottom: 1.8rem;
}
.summary-line, .summary-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}
.summary-line span:first-child { color: #555; }
.summary-line span:last-child { font-weight: 600; color: #333; }
.summary-total {
    font-size: 1.4rem;
    font-weight: 700;
    color: #8B4513;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid #ddd;
}

/* Payment Methods */
.payment-methods { margin-bottom: 1.8rem; }
.payment-option {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px 20px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    position: relative; /* For styling selected state */
}
.payment-option:has(input:checked) {
    border-color: #8B4513;
    background-color: #fdf8f3;
}
.payment-option input[type="radio"] {
    margin-right: 12px;
    vertical-align: middle;
    transform: scale(1.1); /* Slightly larger radio */
    accent-color: #8B4513; /* Color the radio button */
}
.payment-option label {
    font-weight: 600;
    color: #444;
    cursor: pointer;
    display: inline;
}
.payment-option label i {
    margin-right: 10px;
    color: #8B4513;
    width: 20px;
    text-align: center;
    font-size: 1.1em;
}
.payment-desc {
    font-size: 0.85rem;
    color: #666;
    margin-top: 6px;
    margin-left: 32px; /* Indent description */
    line-height: 1.5;
}

/* Terms Checkbox */
.terms {
    font-size: 0.9rem;
    margin-top: 1.5rem;
    display: flex;
    align-items: flex-start; /* Align checkbox top */
    gap: 8px;
}
.terms input[type="checkbox"] {
    margin-top: 3px; /* Align checkbox with text */
    flex-shrink: 0; /* Prevent shrinking */
    accent-color: #8B4513;
}
.terms label {
    margin-bottom: 0;
    font-weight: normal;
    color: #555;
    line-height: 1.5;
}
.terms label a { font-weight: 500; text-decoration: underline; }
.terms label span { font-weight: normal; } /* Required asterisk */

/* Thank You Page */
.thank-you-page .thank-you-message {
    max-width: 650px;
    margin: 40px auto;
    padding: 40px;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
}
.thank-you-message .fa-check-circle {
    font-size: 4.5rem;
    color: #28a745; /* Green */
    margin-bottom: 1.5rem;
    display: block; /* Center icon */
    line-height: 1;
}
.thank-you-message h2 {
    margin-bottom: 1rem;
    font-size: 1.8rem;
    color: #333;
}
.thank-you-message p {
    color: #555;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}
.thank-you-message strong {
    color: #8B4513;
    font-weight: 600;
}
.thank-you-actions {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap; /* Wrap buttons if needed */
}


/* --- 10. Responsiveness --- */

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .container { max-width: 720px; }
    .product-detail-layout { grid-template-columns: 1fr; } /* Stack product detail */
    .contact-layout { grid-template-columns: 1fr; } /* Stack contact */
    .cart-table th:nth-child(3), /* Hide Price column */
    .cart-table td:nth-child(3),
    .cart-table th:nth-child(5), /* Hide Total column */
    .cart-table td:nth-child(5) {
        display: none;
    }
     /* Adjust remaining cart columns */
    .cart-table th:nth-child(1), .cart-table td:nth-child(1) { width: 15%; } /* Image */
    .cart-table th:nth-child(2), .cart-table td:nth-child(2) { width: 50%; } /* Product */
    .cart-table th:nth-child(4), .cart-table td:nth-child(4) { width: 20%; } /* Qty */
    .cart-table th:nth-child(6), .cart-table td:nth-child(6) { width: 15%; } /* Action */
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .container { max-width: 540px; }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.8rem; }
    section { padding: 40px 0; }

    .nav-menu { display: none; } /* Hide desktop menu */
    .hamburger { display: block; } /* Show hamburger */

    .hero { height: auto; min-height: 400px; background-attachment: scroll; } /* Unfix parallax */
    .hero h1 { font-size: 2.5rem; }
    .hero p { font-size: 1.1rem; }

    .features { grid-template-columns: 1fr; } /* Stack features */

    .footer-container { grid-template-columns: 1fr; text-align: center; }
    .footer-section { margin: 0 auto; max-width: 350px; } /* Center footer content */
    .footer-section h4 { display: inline-block; } /* Center heading */
    .footer-section h4::after { left: 50%; transform: translateX(-50%); } /* Center underline */
    .social-icons { justify-content: center; }
    .newsletter-form { flex-direction: column; gap: 10px; max-width: none; }
    .newsletter-form input, .newsletter-form button { border-radius: 4px; }
    .newsletter-form button { margin-left: 0; }

    /* Responsive Cart Table */
    .cart-table thead { display: none; } /* Hide header row */
    .cart-table tr {
        display: block;
        margin-bottom: 1.5rem;
        border: 1px solid #eee;
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    .cart-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 10px 0;
        border-bottom: 1px dashed #eee;
        width: 100% !important; /* Override widths */
        display: block !important; /* Force block display */
         position: relative; /* For pseudo-element label */
         padding-left: 50%; /* Space for label */
         text-align: right;
    }
    .cart-table td:last-child { border-bottom: none; }
    .cart-table td::before { /* Add data labels */
        content: attr(data-label); /* Get label from data attribute (Need to add in PHP) */
        position: absolute;
        left: 0;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
        text-align: left;
        color: #543a20;
    }
    /* Adjust specific columns for mobile table */
    .cart-table td:nth-child(1) { /* Image */
         padding-left: 0; /* No label needed */
         text-align: center;
    }
    .cart-table td:nth-child(1)::before { display: none; }
    .cart-table td:nth-child(4) { /* Quantity */
         display: flex; /* Keep input/label aligned */
         justify-content: flex-end; /* Push input right */
    }
     .cart-table td:nth-child(4)::before { margin-top: 5px;} /* Align Qty label */
     .cart-table td:nth-child(6) { /* Action */
          padding-left: 0; /* No label needed */
          text-align: center;
          padding-top: 15px;
     }
     .cart-table td:nth-child(6)::before { display: none; }

    .cart-actions { flex-direction: column; gap: 15px; align-items: stretch; }
    .cart-actions .btn { width: 100%; }

    .add-to-cart-form { flex-direction: column; align-items: stretch; gap: 10px;}
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .container { max-width: 100%; padding-left: 10px; padding-right: 10px; } /* Full width */
    .product-grid { grid-template-columns: 1fr; } /* Single column product grid */
    .navbar-logo span { display: none; } /* Hide text logo */
    .hero h1 { font-size: 2rem; }
    .hero p { font-size: 1rem; }
    .customer-details .half-width { width: 100%; margin-right: 0; } /* Ensure stacking */
    .customer-details .half-width:nth-of-type(odd) { margin-right: 0; }
}