:root {
  /* Replace these with the actual Hex codes you got from Canva */
  --brand-primary: #382013;   /* For buttons and links */
  --brand-accent: #a08365;     /* For hover effects or labels */
  --price-tag: #d7b898;        /* For prices */
  --cloud-bg: #f9f9fb;                /* A soft, off-white "cloud" background */
  --text-main: #2d2d2d;               /* A clean, dark charcoal for text */
  --grid-gap: 2rem;                   /* Consistent spacing between hats */
}

body {
    max-height: 100vh;
    background-color: var(--cloud-bg);
}

/* Header */
.the-top {
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 5rem;
    color: var(--brand-primary);
}

.logo a {
  color: var(--brand-primary);
  text-decoration: none;
}

.logo a:visited {
  color: var(--brand-primary);
}

/* Navigation */
/* The container stays centered */
.get-around {
    width: 100%;
    padding: 1rem 0;
    border-bottom: 1px solid #eee; /* Subtle studio-style separator */
}

/* THE KEY FIX: Target the actual list */
.get-around ul {
    display: flex;
    flex-direction: row;      /* Force items into a line */
    justify-content: center;   /* Center them horizontally */
    list-style: none;         /* REMOVES THE BULLET POINTS */
    margin: 0;
    padding: 0;
    gap: 2.5rem;              /* Space between links */
}

/* Style the links to match your Cormorant Garamond / Montserrat pairing */
.get-around a {
    text-decoration: none;
    color: #382013;           /* Your Dark Brown */
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.3s ease;
}

.get-around a:hover {
    color: #a08365;           /* Your Light Brown accent on hover */
}

/* Gallery Grid */
.product-gallery a {
  text-decoration: none;
}

.product-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
  padding: var(--grid-gap);
  background-color: var(--cloud-bg);
  text-decoration: none;
  max-width: 75rem;
  margin: 0 auto;
}

@media (max-width: 64rem) {
  .product-gallery {
    grid-template-columns: repeat(2, 1fr); /* 2 per row on tablets */
  }
}

@media (max-width: 37.5rem) {
  .product-gallery {
    grid-template-columns: 1fr; /* 1 per row on phones */
  }
}

.product-card {
  background: white;
  border-radius: .5rem; /* Subtle rounded corners for a soft look */
  overflow: hidden;
  transition: transform 0.2s ease; /* For that premium hover feel */
  text-decoration: none;
  color: var(--text-main);
  border: 0.063rem solid #eee; /* Very light border to define the card */
}

.product-card:hover {
  /* Makes the beanie "pop" slightly when hovered */
  transform: translateY(-.313rem);
  box-shadow: 0 0.625rem 1.25rem rgba(0,0,0,0.05);
}

.product-image {
  width: 100%;
  height: 18.75rem;
  object-fit: cover; /* Ensures your photos aren't stretched */
}

/* Product Page Styles */

.buy-button {
  flex: 0 1 auto;
  min-width: 10rem;
  background-color: #a08365;
  color: #382013;
  padding: 1rem 2rem;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase; /* Creates a clean, "Studio" feel */
  letter-spacing: 0.05rem;
  border-radius: 0.25rem; /* Subtle rounding matches the "soft" brand vibe */
  transition: background-color 0.3s ease;
  border: 0.125rem solid #382013;
}

.buy-button-secondary {
  background-color: transparent;
  color: #a08365;
  border: 0.125rem solid #a08365;
  padding: 1rem 2rem;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase; /* Creates a clean, "Studio" feel */
  letter-spacing: 0.05rem;
  border-radius: 0.25rem; /* Subtle rounding matches the "soft" brand vibe */
  transition: background-color 0.3s ease;
}

.buy-button:hover,
.buy-button-secondary:hover {
  /* Subtle hover effect: flips the colors for a premium feel */
  background-color: transparent;
  color: #a08365;
}

.product-info {
  font-family: 'Lato', sans-serif;
  color: var(--brand-accent);
  padding-left: .313rem;
}

.product-info a {
  text-decoration: none;
}

.product-wrapper {
  display: flex;
  flex-direction: row; /* Side-by-side */
  gap: 4rem;           /* Lots of "breathable" white space */
  max-width: 68.75rem;
  margin: 3rem auto;   /* Centers the whole block, but not the text inside */
  padding: 0 2rem;
  align-items: flex-start; /* Keeps text from stretching to match image height */
  font-family: "Lato", sans-serif;
}

/* Zone 1: Image stays put */
.product-gallery-side {
  flex: 1.2; 
}

/* Zone 2: Text is clean and left-aligned */
.product-info-side {
  flex: 1;
  text-align: left; /* THE KEY FIX: Anchors the eye to the left margin */
}

.product-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #382013; /* Your Dark Brown */
}

.product-price {
  font-size: 1.5rem;
  color: #a08365; /* Your Light Brown */
  margin-bottom: 2rem;
  font-weight: bold;
}

/* Adjust the buttons to align left now too */
.button-group {
  display: flex;
  justify-content: flex-start; /* Buttons start under the text */
  gap: 1rem;
}

.featured-image {
  border-radius: 1.25rem;
}

.the-end {
  max-width: 100%;
  background-color: var(--cloud-bg);
  font-family: "Lato", sans-serif;
  color: var(--brand-primary);
  text-align: center;
}