/* Norse / Rustic Color Palette */
:root {
  --wood-dark: #2C241B;   /* Dark Walnut */
  --wood-light: #8B5A2B;  /* Aged Oak */
  --text-main: #EAE0D5;   /* Bone / Parchment */
  --accent: #CCA43B;      /* Gold/Bronze */
  --bg-color: #1a1a1a;    /* Deep Charcoal */
}

/* LOAD CUSTOM FONT */
@font-face {
  font-family: 'MyCustomFont'; /* You can name this whatever you want */
  src: url('/fonts/custom.ttf') format('truetype'); /* Point to the file */
  font-weight: normal;
  font-style: normal;
}

body {
  /* Existing styles (keep these!) */
  background-color: var(--bg-color);
  color: var(--text-main);
  font-family: 'Georgia', serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  background-image: url('/images/background.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  /* NEW: The Sticky Footer Fix */
  display: flex;             /* 1. Turn on Flexbox */
  flex-direction: column;    /* 2. Stack items vertically (Header -> Content -> Footer) */
  min-height: 100vh;         /* 3. Force the body to be AT LEAST as tall as the screen */
}

/* HEADER CONTAINER */
header {
  /* ==================================================
     HEADER BACKGROUND SWITCH
     (Uncomment the one you want to use)
     ================================================== */

  /* OPTION 1: Solid Color (Midnight Forest) */
  /* background-color: #0E1410; */

  /* OPTION 2: Raw Image (Shows the image exactly as is) */
  /* background-image: url('/images/header-bg.jpg'); */

  /* OPTION 3: Image + Tint (Recommended - Darkens the image so text pops) */
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* 70% Black Overlay */
    url('/images/header-bg.png'); 

  /* ================================================== */
  
  /* Required Settings for Image to look good */
  background-size: 100% auto;    /* Ensures image covers the whole bar */
  background-position: center center; 
  background-repeat: no-repeat;
  
  /* Keep your existing border/padding */
  border-bottom: 2px solid var(--accent);
  padding: 0.01rem 2rem;
  
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  box-sizing: border-box;
}

/* NAV CONTAINER (The Flexbox Parent) */
nav {
  display: flex;
  justify-content: space-between; /* Pushes Logo to Left, Links to Right */
  align-items: flex-end;          /* ALIGNMENT MAGIC: Pushes Links to the BOTTOM */
}

/* 1. PARENT CONTAINER (Layouts the two links side-by-side) */
.logo {
  display: flex;
  align-items: center;
  gap: 15px;
  width: fit-content;
}

/* 2. TEXT LINK STYLING */
.logo-link-text {
  text-decoration: none;
  color: var(--accent);
  
  /* Font Settings */
  font-size: 3rem; 
  font-family: 'MyCustomFont', serif;
  font-weight: normal;
  letter-spacing: 2px;
  line-height: 1;
  
  /* Shrink-wrap the height */
  height: fit-content; 
}

/* 3. IMAGE LINK STYLING */
.logo-link-img img {
  height: 120px; /* Controls the image size */
  width: auto;
  display: block; /* Removes tiny gap at bottom of images */
}

.logo img {
  height: 180px; /* This image height now drives the total header size */
  width: auto;
}

/* LINKS GROUP (Right Side) */
nav ul {
  display: flex;
  gap: 40px;
  list-style: none;
  margin: 0;
  
  /* Optional: Lift links slightly off the border if they feel too low */
  padding-bottom: 0px; 
}

/* LINK TEXT STYLE */
nav a {
  color: var(--text-main);
  text-decoration: none;
  font-weight: bold;
  font-size: 1.4rem;
  letter-spacing: 1px;
  transition: color 0.3s ease;
}

nav a:hover {
  color: var(--accent);
}

/* This replaces the old 'main' block */
.container {
  flex: 1;             /* Grow to fill vertical space */
  
  /* FORCE WIDTH */
  width: 100%;         /* Fill the screen width... */
  max-width: 1600px;   /* ...up to this limit */
  
  margin: 2rem auto;
  padding: 0 2rem;
  box-sizing: border-box; /* Vital: Makes sure padding doesn't break the width */
}

/* Shop Grid Styling */
.product-grid {
  display: grid;
  /* OLD: repeat(auto-fit, minmax(200px, 1fr)); */
  /* NEW: Forces cards to be at least 350px wide */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 2rem;
  width: 100%; /* Ensure the grid uses the full container width */
}

.product-card {
  /* LAYOUT FIXES FOR UNIFORM HEIGHT */
  height: 100%;           /* Fill the link wrapper */
  display: flex;          /* Use Flexbox */
  flex-direction: column; /* Stack items vertically */
  justify-content: space-between; /* Optional: Pushes Price to bottom */
  box-sizing: border-box; /* Includes padding in height calculation */

  /* VISUAL STYLES (Your Dark Glass Look) */
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
  border: 1px solid var(--wood-light);
  padding: 20px;
  text-align: center;
  border-radius: 4px;
  
  transition: transform 0.3s ease, border-color 0.3s, background-color 0.3s;
}

.product-card p {
  margin-top: auto; /* Pushes the price to the bottom */
}

.product-card-link {
  height: 100%; /* Fills the vertical space of the grid row */
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.2s ease;
}

/* Optional: Make it glow slightly when you hover */
.product-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);          /* Gold border on hover */
  background-color: rgba(0, 0, 0, 0.95); /* Almost solid black on hover */
}

.product-card h3 {
  color: var(--accent);
  margin-top: 0;
}

/* === SINGLE PRODUCT PAGE UPDATES === */

/* 1. Make Title White */
.product-info h1 {
  color: #fff !important;
  text-shadow: 2px 2px 10px #000;
}

/* 2. Make Price Gold (pops nicely on dark glass) */
.price {
  color: var(--accent) !important;
  font-size: 2rem; /* Make it slightly bigger */
}

/* 3. Fix Description Box (Remove the old dark grey box so it blends) */
.description-box {
  background-color: transparent; /* Make it see-through */
  border: none;                  /* Remove the border */
  padding: 0;                    /* Remove padding */
  color: #ddd;                   /* Light grey text for readability */
  margin-top: 1rem;
}

/* 4. Fix Strong/Bold text inside description */
.description-box strong {
  color: #fff;
}

/* Contact Form Styling */
.form-container {
  max-width: 500px;
  
  /* CENTER THE BOX */
  margin: 2rem auto; /* Top/Bottom: 2rem, Left/Right: Auto (Centers it) */
  
  background-color: #222;
  padding: 2rem;
  border: 1px solid var(--wood-light);
  border-radius: 4px;
  
  /* Optional: Ensure text inside the form inputs stays left-aligned */
  text-align: left; 
}

/* Helper to center the Title and Intro Text */
.contact-center {
  text-align: center;
  max-width: 600px;
  margin: 0 auto; /* Centers the text block itself */
}

.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--accent);
  font-weight: bold;
}

input, textarea {
  width: 100%;
  padding: 10px;
  background-color: #1a1a1a;
  border: 1px solid var(--wood-dark);
  color: var(--text-main);
  font-family: sans-serif; /* Easier to read for typing */
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
}

button {
  background-color: var(--wood-light);
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1rem;
  font-family: serif;
  border-radius: 2px;
}

button:hover {
  background-color: var(--accent);
  color: #000;
}

/* === SINGLE PRODUCT PAGE === */
.product-detail-page {
  display: grid;
  grid-template-columns: 2fr 1fr; /* Split 65/35 */
  gap: 40px;
  margin-top: 2rem;
}

/* Images */
.main-image {
  width: 100%;       /* Fills the new, wider column */
  height: auto;      /* Keeps the aspect ratio perfect */
  max-height: 80vh;  /* PREVENTS it from becoming too tall on huge screens */
  object-fit: contain; /* Ensures the whole product is visible */
  border: 2px solid var(--wood-light);
  border-radius: 4px;
}

.gallery-grid {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.gallery-grid img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 1px solid var(--wood-dark);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.gallery-grid img:hover {
  opacity: 1;
  border-color: var(--accent);
}

/* Info Box */
.product-info h1 {
  margin-top: 0;
  font-size: 2.5rem;
  color: var(--accent);
}

.price {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--text-main);
  margin-bottom: 1rem;
}

.product-info {
  /* This is the magic fix for Grid/Flex overflow */
  min-width: 0; 
  
  /* Ensures it uses the space available but doesn't force it wider */
  width: 100%;
  /* NEW: Prevents text from spilling out horizontally */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.description-box {
  background-color: #222;
  padding: 1.5rem;
  border-left: 4px solid var(--accent); /* Nice Norse accent line */
  margin-bottom: 2rem;
  line-height: 1.8;

}

/* Shop Grid Image Fix */
/* We need to ensure the Shop Page images are the same size */
.product-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-bottom: 1px solid var(--wood-light);
  margin-bottom: 1rem;
}


footer {
  background-color: var(--bg-color);
  color: var(--text-main);
  
  /* Alignment Magic */
  text-align: right; 
  
  /* Spacing */
  padding: 2rem; /* Matches the side spacing of your header */
  /* border-top: 2px solid var(--accent); /* Adds a nice "cap" to the bottom of the page */
  margin-top: 4rem; /* Pushes the footer away from the content so it doesn't crowd */
}

/* Footer Links Container */
.footer-links {
  margin-top: 10px; /* Space between copyright and links */
}

/* The actual link text */
.footer-links a {
  color: var(--text-main);
  text-decoration: none;
  font-size: 0.85rem; /* Smaller than normal text */
  opacity: 0.6;       /* Faded out so it's not distracting */
  transition: opacity 0.2s;
}

.footer-links a:hover {
  opacity: 1; /* Brightens up when you hover */
  text-decoration: underline;
}

/* The little pipe "|" symbol */
.separator {
  margin: 0 8px;
  font-size: 0.8rem;
  opacity: 0.4;
}

footer p {
  margin: 5px 0; /* Keeps the two lines of text close together */
  font-size: 0.9rem;
  opacity: 0.8;
}

/* === HOMEPAGE SECTIONS === */

/* Make text pop against the background image */
.section-title {
  text-align: center; /* This centers the text */
  
  font-size: 2.5rem;
  margin-bottom: 3rem;
  color: #fff; /* Ensures it's white */
  text-shadow: 2px 2px 10px #000; /* Keeps the shadow for readability */
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* The Divider Line */
.divider {
  border: 0;
  height: 2px;
  /* Gold glow */
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 10px var(--accent); /* Adds a 'neon' glow effect */
  margin: 4rem auto;
  width: 60%;
  opacity: 1;
}

/* About Section */
.about-section {
  max-width: 800px; /* Keep text readable width */
  margin: 0 auto;   /* Center the block */
  text-align: center;
}

.about-text p {
  text-shadow: 1px 1px 5px #000; /* Slightly softer shadow for body text */
  color: #fff;                   /* Pure white cuts through the dark image best */
  font-size: 1.2rem;
  font-weight: 500;
}

.about-text strong {
  color: var(--wood-light);
}

/* "Invisible" Containers (Matches Hero Vibe) */
/* Glass Containers for Content */
.featured-section, .about-section {
  /* THE FIX: Add the dark tint back */
  background-color: rgba(0, 0, 0, 0.7); /* 70% Black tint */
  
  /* Make it look like a distinct panel */
  border-radius: 8px;            /* Soft corners */
  border: 1px solid rgba(255, 255, 255, 0.1); /* Very subtle edge highlight */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);  /* Deep shadow behind the box */
  
  padding: 1rem 2rem;
  max-width: 100%;
  margin: 0 auto 4rem auto;      /* Center it and add space below */
}

/* Ensure text inside is bright white */
.featured-section h2, 
.about-section h2,
.about-text p {
  color: #fff;
  text-shadow: none; /* We don't need shadow anymore because the box is dark */
}

/* Adjust the grid inside the glass box */
.featured-section .product-grid {
  margin-top: 2rem;
}

/* Shop Page Intro Text */
.shop-intro {
  text-align: center;      /* Centers the text */
  margin-bottom: 2rem;     /* Adds space between text and grid */
  
  /* OPTIONAL: Uncomment the line below if the black text is hard to read on the dark forest */
  /* background-color: rgba(234, 224, 213, 0.9); /* Light Parchment background */
  /* padding: 1rem; border-radius: 4px; */
}

.shop-intro h1 {
  color: #000; /* Black Text */
  margin-bottom: 0.5rem;
  /* Remove text shadow so it looks crisp/flat */
  text-shadow: none;
  font-size: 3rem; 
}

.shop-intro p {
  color: #000; /* Black Text */
  font-weight: bold;
  opacity: 1; /* Ensure it's fully visible */
  text-shadow: none;
}

/* Shop Glass Container */
.shop-glass-panel {
  background-color: rgba(0, 0, 0, 0.7);
  
  /* PADDING: 1.5rem Top/Bottom, 2rem Left/Right */
  padding: 1.5rem 2rem !important; 
  
  /* CRITICAL: This keeps the padding from disappearing */
  box-sizing: border-box; 
  
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  
  width: 100%;
  height: fit-content;
  overflow: hidden;
}

/* OVERRIDE: Switch Text back to White so it's readable on dark glass */
.shop-intro h1 {
  color: #fff !important; 
  text-shadow: 2px 2px 10px #000;
}

.shop-intro p {
  color: #ddd !important;
  text-shadow: 1px 1px 5px #000;
}


/* LEGAL / POLICY PAGES */
.policy-paper {
  /* White Background applied to the INNER box only */
  background-color: rgba(255, 255, 255, 0.9);
  color: #000;
  
  /* Padding: Top | Right | Bottom | Left */
  padding: 3rem 3rem 5rem 3rem;
  
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  
  /* IMPORTANT: This ensures the white box doesn't stretch */
  height: fit-content; 
  margin-bottom: 2rem;
}

/* Update the header styles to match the new class name */
.policy-paper h1 {
  text-align: center;
  margin-top: 0;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

.policy-paper h3 {
  color: #000;
  margin-top: 2rem;
  border-bottom: 1px solid #ccc;
}

/* === CONTACT PAGE UPDATES === */

/* 1. Make Title/Text White */
.contact-center h1 {
  color: #fff;
  text-shadow: 2px 2px 10px #000;
}

.contact-center p {
  color: #ddd;
}

/* 2. Blend the Form Container (Remove the old grey box) */
.form-container {
  /* Remove the background/border so it blends into the glass */
  background-color: transparent !important; 
  border: none !important;
  box-shadow: none !important;
  
  /* Keep the centering and width */
  margin: 2rem auto;
  padding: 0;
}

/* 3. Ensure Labels are Gold */
.form-group label {
  color: var(--accent);
  font-size: 1.1rem;
  letter-spacing: 1px;
}

/* Limit the width of the glass box on Contact page only */
.contact-glass-limit {
  max-width: 1000px; /* Restricts the width to a nice focused box */
  margin: 0 auto;   /* Centers the box in the middle of the screen */
}

/* 1. Stack the Buttons Vertically */
.product-actions {
  display: flex;
  flex-direction: column; /* Stack them! */
  gap: 15px;
  margin-top: 1.5rem;
}

/* Update the Main Buy Button to share space */
.buy-button-placeholder {
  flex: 2; /* Takes up 2/3rds of the space (Dominant) */
  padding: 15px;
  background-color: var(--accent); /* Gold */
  border: none;
  color: #000;
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 4px;
}

/* 2. Personalize Button (Top) */
.personalize-btn {
  width: 100%;
  padding: 15px;
  background-color: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  text-align: left; /* Make it look like a dropdown header */
  display: flex;
  justify-content: space-between;
}

.personalize-btn:hover, .personalize-btn.active {
  background-color: var(--accent);
  color: #000;
}

/* 3. The Dropdown Input Box (Hidden by default) */
.hidden-input-box {
  display: none; /* Hidden until clicked */
  background-color: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border: 1px solid var(--accent);
  border-top: none; /* Connects it to the button above */
  margin-top: -15px; /* Pulls it up to touch the button */
  margin-bottom: 10px;
}

.hidden-input-box label {
  display: block;
  color: #ddd;
  font-size: 0.9rem;
  margin-bottom: 5px;
}

.hidden-input-box input {
  width: 100%;
  padding: 10px;
  background-color: #000;
  border: 1px solid #555;
  color: #fff;
  font-family: sans-serif;
  box-sizing: border-box;
}

/* 4. Add to Cart Button (Bottom) */
.buy-button-placeholder {
  width: 100%;
  display: block; /* Make <a> tag fill the width */
  padding: 15px;
  background-color: var(--wood-light); /* Different color to separate it */
  color: #fff;
  text-align: center;
  text-decoration: none; /* Remove underline */
  font-weight: bold;
  font-size: 1.2rem;
  border-radius: 4px;
  transition: background-color 0.2s;
  box-sizing: border-box;
}

.buy-button-placeholder:hover {
  background-color: var(--accent);
  color: #000;
}

/* Mobile Fix: Stack them on phones so they aren't tiny */
@media (max-width: 768px) {
  .product-actions {
    flex-direction: column; /* Stack vertically */
  }
  
  .buy-button-placeholder, .personalize-btn {
    width: 100%; /* Full width */
  }
}

/* Style for the price inside the button */
.p-price {
  font-size: 0.9rem; /* Slightly smaller than the button text */
  opacity: 0.9;
  margin-left: 5px;  /* Space between "It" and the price */
  font-weight: normal; /* Make it less heavy than the main text */
}

/* Social Icons */
.social-icons {
  display: flex;
  justify-content: flex-end; /* Right align (or center for mobile) */
  gap: 15px;
  margin-bottom: 1rem;
}

.social-icons a {
  color: var(--accent); /* Gold Icons */
  transition: transform 0.2s;
}

.social-icons a:hover {
  transform: scale(1.1); /* Pop up slightly on hover */
  color: #fff;
}

/* Mobile Fix */
@media (max-width: 768px) {
  .social-icons {
    justify-content: center;
  }
}

#scrollTopBtn {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: var(--accent); /* Gold */
  color: #000;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 50%; /* Circle shape */
  font-size: 1.5rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

#scrollTopBtn:hover {
  background-color: #fff; /* White on hover */
}










/* =========================================
   MOBILE RESPONSIVE STYLES
   (Applies only to screens smaller than 768px)
   ========================================= */
@media (max-width: 768px) {

  /* 1. HEADER: Stack it vertically */
  header {
    /* LOCK IT TO THE GLASS */
    position: fixed !important; /* Forces it to stay put */
    top: 0;
    left: 0;
    right: 0; /* Ensures it stretches edge-to-edge */
    
    /* REMOVE ANY GAP CAUSERS */
    margin-top: 0;
    width: 100%;
    z-index: 2000; /* Super high so nothing scrolls over it */
    /* 2. THE FIX: Force image to cover the full height */
    /* "cover" zooms in until no empty space remains */
    background-size: cover !important; 
    
    /* Optional: Ensure it anchors to the center */
    background-position: center center !important;
  }

  nav {
    flex-direction: column; /* Stack Logo on top, Links below */
    align-items: center;    /* Center everything */
    gap: 0px;
  }

   /* 1. HIDE THE TEXT */
  .logo span {
    display: block; /* Brings the text back */
  }

  /* 2. CENTER THE IMAGE */
  .logo {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 5px;
  }

  .logo a {
    /* Ensure the link itself isn't 100% wide on mobile either, 
       so you don't accidentally click it when tapping the edge of the screen */
    width: fit-content;
    justify-content: center; /* Center the text inside the link */
    font-size: 2rem;         /* Smaller font for phone */
  }
  
  /* Optional: Make the logo image slightly larger on mobile since it's the only thing there */
  .logo img {
      display: none; /* Hides the logo icon */
    }

    /* HIDE THE IMAGE LINK */
  .logo-link-img {
    display: none; 
  }

  /* STYLE THE TEXT LINK */
  .logo-link-text {
    /* 1. FORCE ONE LINE */
    white-space: nowrap !important; 
    
    /* 2. HIDE THE REST */
    overflow: hidden !important;
    
    /* 3. ADD "..." IF IT'S TOO LONG */
    text-overflow: ellipsis !important;
    
    /* Ensure it doesn't overflow the screen width */
    max-width: 90vw; /* 90% of Viewport Width */
    display: block;
    
    /* Keep your font sizing */
    font-size: 1.4rem !important; 
  }

nav ul {
    width: 100%;
    
    /* CENTERING COMMANDS */
    display: flex;
    justify-content: center; /* Centers the items in the row */
    
    /* IMPORTANT: Remove default list indentation */
    padding: 0; 
    margin: 0;
    
    /* Spacing */
    gap: 25px; /* Adds space between Home - Shop - Contact */
  }

  nav a {
    font-size: 1.1rem; /* Smaller link text */
  }

  /* 2. PRODUCT PAGE: Stack Image and Text */
  .product-detail-page {
    grid-template-columns: 1fr; /* Force 1 column (Stacking) */
    gap: 20px;
  }
  

  .main-image {
    max-height: 400px; /* Limit height so it doesn't take 2 scrolls */
  }

  /* 3. HOMEPAGE: Tweak Glass Boxes */
  .container {
    padding: 0 1rem;
    
    /* ADJUST THIS NUMBER */
    /* Since the header is fixed, this gap needs to match the header height */
    margin-top: 140px !important; /* Try 140px or 160px */
  }

  .shop-container {
    margin-top: 0px !important; /* Shop page sits higher up */
  }

  .featured-section, .about-section {
    padding: 1.5rem; /* Reduce padding inside the boxes */
  }

  .section-title {
    font-size: 1.8rem; /* Smaller titles */
  }

  /* 4. SHOP GRID: Force 1 column on very small phones */
  .product-grid {
    grid-template-columns: 1fr; /* One product per row */
  }

  /* ... existing mobile styles ... */

  /* NEW: Make featured images shorter on phone */
  .featured-section .product-card img {
    height: 180px; /* Reduced from 250px */
  }

  /* Optional: If the card padding feels too big on phone, shrink it too */
  .featured-section .product-card {
    padding: 10px;
  }

  footer {
    text-align: center; /* Center footer on phone */
  }
  
  .footer-links {
    margin-top: 15px;
  }

  /* Inside @media (max-width: 768px) */
  .shop-glass-panel {
    padding: 1.5rem; /* Less padding on phone */
  }

}