body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff; /* Pure white background */
    color: #1a1a1a; /* Very dark gray/near-black for text */
    line-height: 1.6;
}

h1, h2, h3 {
    font-weight: 300; /* Lighter font weight for a sophisticated look */
    letter-spacing: 2px; /* Subtle spacing on headings */
    text-transform: uppercase;
    margin-bottom: 0.5em;
}

.container {
    width: 90%; /* Wider container for more screen usage */
    max-width: 1200px;
    margin: 20px auto; /* Increased margin for more breathing room */
    padding: 0; /* Remove padding here, content elements will define their own padding */
    box-shadow: none; /* No heavy box shadows, keep it flat and clean */
}

header {
    background-color: #ffffff; 
    border-bottom: 1px solid #e0e0e0; /* Subtle separator line */
    padding: 20px 0; /* More vertical padding */
    position: sticky; /* Sticky navigation for a better user experience */
    top: 0;
    z-index: 100;
}

.navbar {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.8em;
    font-weight: 600; /* Make the logo stand out */
    color: #1a1a1a;
}

.navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.navbar li {
    margin-left: 35px; /* Increased spacing between links */
}

.navbar a {
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 400;
    font-size: 0.95em;
    padding: 5px 0;
    position: relative;
    transition: color 0.3s;
}

/* Underline effect on hover */
.navbar a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    display: block;
    margin-top: 5px;
    left: 0;
    background: #8B4545; /* Deep blush accent color */
    transition: width 0.3s ease;
}

.navbar a:hover::after, .navbar a.active::after {
    width: 100%;
}
.navbar a.active {
    color: #8B4545; /* Active link in accent color */
}


/* CATALOG GALLERY STYLES - Single Column Editorial Layout */
.catalog-gallery {
    margin-top: 60px; 
    padding: 40px 0;
    border-top: none;
    text-align: center;
    
    /* THE KEY CHANGE: Set to one column */
    display: grid;
    grid-template-columns: 1fr; 
    gap: 40px; /* Increased gap for more separation between images */
    
    /* Limit the width of the grid container itself to center the images nicely */
    max-width: 800px; 
    margin-left: auto;
    margin-right: auto;
}

.catalog-gallery h3 {
    grid-column: 1 / -1; 
    margin-bottom: 40px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.catalog-gallery img {
    width: 100%;
    /* Keep a generous, uniform height for a clean look */
    height: 600px; 
    object-fit: cover; 
    border: none;
    border-radius: 0; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); 
    transition: transform 0.4s ease-in-out;
}

.catalog-gallery img:hover {
    transform: scale(1.01); /* A gentler hover effect since the image is already large */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}



/* --- CSS for Full-Width Image --- */

.full-width-image-container {
    /* Optional: Remove any side padding/margins from the parent */
    width: 100%;
    margin: 0;
    padding: 0;
    
    /* Add space below the image to separate it from the content */
    margin-bottom: 40px; 
}

.full-width-image-container img {
    /* KEY CODE: This makes the image fill 100% of the container's width */
    width: 100%; 
    
    /* This ensures the image does not stretch past its natural height, 
       maintaining its original proportions */
    height: auto; 
    
    /* This prevents the image from getting bigger than its original file size */
    max-width: 100%; 
    
    /* Removes any default browser spacing below the image */
    display: block; 
}

/** Variables **/

:root {
  --color-background: #ffffff;
  --color-background-alt: #888888;
  --color-border-active: #da7105;
  --color-border-default: #d1d1d1;
  --color-highlight: #fdcf4c;
  --color-primary: #b64e08;
  --color-primary-active: #79320e;
  --color-text-default: #262626;
  --color-text-muted: #4f4f4f;

  --font-family-body: 'Helvetica Neue', Arial, sans-serif;
  --font-family-display:'Helvetica Neue', Arial, sans-serif;
}


/** Components **/

.fs-form {
  display: grid;
  row-gap: 1.5rem;
}

.fs-form:where(.fs-layout__2-column) {
  column-gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
}

fieldset {
  display: grid;
  margin: 1.5rem 0;
  row-gap: 1.5rem;
}

.fs-form:where(.fs-layout__2-column) fieldset {
  column-gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
  grid-column: 1 / -1;
}

.fs-fieldset-title {
  color: var(--color-text-default);
  font-family: var(--font-family-display);
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin-bottom: 1.5rem;
  grid-column: 1 / -1;
}

.fs-field {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}

.fs-label {
  color: var(--color-text-default);
  display: block;
  font-family: var(--font-family-display);
  font-size: 1rem;
  line-height: 1.25rem;
}

.fs-description {
  color: var(--color-text-muted);
  display: block;
  font-size: 1rem;
  line-height: 1.25rem;
}

.fs-button-group {
  display: flex;
  flex-direction: row-reverse;
  column-gap: 1.5rem;
}

.fs-form:where(.fs-layout__2-column) .fs-button-group {
  grid-column: 1 / -1;
}

.fs-button {
  background-color: var(--color-primary);
  border-radius: 9999px;
  color: white;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
  padding: 0.75rem 2rem;
  transition-duration: 200ms;
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.fs-button:hover {
  background-color: var(--color-primary-active);
}

.fs-button:focus-visible {
  background-color: var(--color-primary-active);
  outline: 4px solid var(--color-highlight);
}

.fs-input,
.fs-select {
  appearance: none;
  border-radius: 9999px;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-text-default);
  font-size: 1rem;
  height: 3rem;
  line-height: 1.5rem;
  outline: none;
  padding-left: 1rem;
  padding-right: 1rem;
}

.fs-input:focus-visible,
.fs-select:focus-visible {
  box-shadow: var(--color-border-active) 0 0 0 1px inset;
}

.fs-input::placeholder {
  color: var(--color-text-muted);
}

.fs-checkbox-group,
.fs-radio-group {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}

.fs-checkbox-field,
.fs-radio-field {
  column-gap: 0.5rem;
  display: flex;
}

:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
  margin-top: 0.25rem;
}

.fs-checkbox-wrapper,
.fs-radio-wrapper {
  align-items: center;
  display: flex;
  height: 1.25rem;
}

.fs-checkbox,
.fs-radio {
  background-color: #fff;
  border: 1px solid var(--color-border-default);
  height: 1.25rem;
  width: 1.25rem;
}

.fs-checkbox {
  border-radius: 0.25rem;
}

.fs-radio {
  border-radius: 100%;
}

.fs-checkbox:checked,
.fs-radio:checked {
  background-color: var(--color-primary);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-color: transparent;
}

.fs-checkbox:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

.fs-radio:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
  border-color: var(--color-border-active);
  outline: 4px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-checkbox:checked:focus-visible,
.fs-radio:checked:focus-visible {
  border-color: transparent;
}

.fs-select {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.625em 1.625em;
  padding-right: 2.875rem;
}

.fs-slider {
  background: transparent;
  cursor: pointer;
  height: 1.25rem;
  width: 100%;
}

.fs-slider::-moz-range-track {
  background-color: var(--color-background);
  border-radius: 0.5rem;
  height: 0.5rem;
}

.fs-slider::-webkit-slider-runnable-track {
  background-color: var(--color-background);
  border-radius: 0.5rem;
  height: 0.5rem;
}

.fs-slider::-moz-range-thumb {
  background-color: var(--color-primary);
  border: none; /* Removes extra border that FF applies */
  border-radius: 50%;
  height: 1.25rem;
  width: 1.25rem;
}

.fs-slider::-webkit-slider-thumb {
  appearance: none;
  background-color: var(--color-primary);
  border-radius: 50%;
  height: 1.25rem;
  margin-top: -0.375rem; /* Centers thumb on the track */
  width: 1.25rem;
}

.fs-slider:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.fs-slider:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.fs-switch {
  background-color: var(--color-background-alt);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.75' fill='white'/%3e%3c/svg%3e");
  background-position: left center;
  background-repeat: no-repeat;
  border-radius: 1.25rem;
  cursor: pointer;
  height: 1.25rem;
  transition-duration: 200ms;
  transition-property: background-color, background-position;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  width: 2.5rem;
}

.fs-switch:checked {
  background-color: var(--color-primary);
  background-position: right center;
}

.fs-switch:focus-visible {
  outline: 4px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-textarea {
  appearance: none;
  border-radius: 0.75rem;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-text-default);
  font-size: 1rem;
  line-height: 1.5rem;
  outline: none;
  padding: 0.5rem 0.75rem;
  resize: vertical;
}

.fs-textarea:focus-visible {
  box-shadow: var(--color-border-active) 0 0 0 1px inset;
}

.fs-textarea::placeholder {
  color: var(--color-text-muted);
}

/** Utilities **/

.col-span-full {
  grid-column: 1 / -1;
}

.fs-textarea::placeholder {
  color: var(--color-text-muted);
}

.slider-label-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.25rem;
}

.slider-label-text {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
  white-space: nowrap;
}

/* ADDED: General Reset for HTML5 elements */
button,
input,
optgroup,
select,
textarea {
    /* Prevents default size/border issues in some browsers */
    box-sizing: border-box; 
    /* Ensures fonts are inherited across all form elements */
    font: inherit; 
    /* Removes default margins that can affect layout */
    margin: 0; 
}