img {
  max-width: 100%;
  height: auto;
}
:root {
	--card-width:        150px;
    --card-font-scale:   0.06;

    --primary-burgundy:  #7D3C3C;    /* rename */
    --soft-blush:        #F7E7E7;    /* match body */
    --accent-gold:       #D4AF7F;
	--white: #FFFFFF;
	--text-dark: #3A2C2B;

	--font-heading: 'Great Vibes', cursive;
	--font-body: 'Playfair Display', serif;
}

* {
	box-sizing: border-box;
	margin: 0; padding: 0;
}

body {
	font-family: var(--font-body);
	color: var(--primary-burgundy);
	background: var(--soft-blush);
	line-height: 1.6;
}

/* HERO */

.hero {
	position: relative;
	background: url('images/velvet.png') center/cover no-repeat;
	padding: 6rem 1rem;
	text-align: center;
	color: var(--white);
}

.hero h1 {
	font-family: var(--font-heading);
	font-size: 3rem;
	margin-bottom: 0.5rem;
}
.hero p {
	font-size: 1.25rem;
	margin-bottom: 1.5rem;
}
.hero .btn {
	background: var(--accent-gold);
	color: var(--primary-burgundy);
	padding: 0.75rem 1.5rem;
	font-weight: bold;
	text-decoration: none;
	border-radius: 0.5rem;
	transition: opacity 0.2s;
}
.hero .btn:hover {
	opacity: 0.9;
}

.container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem;
	max-width: 1000px;
	margin: 2rem auto;
	padding: 0 1rem;
}

.about img {
	flex: 1 1 300px;
	border-radius: 1rem;
}
.about .text {
	flex: 1 1 300px;
}
.about h2,
.menu h2,
.contact h2 {
	font-family: var(--font-heading);
	font-size: 2.5rem;
	text-align: center;
	margin-bottom: 1rem;
	color: var(--primary-burgundy);
}

/* Menu grid */
.menu .grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr));
	max-width: calc(var(--card-width) * 4 + 3 * 1rem);
	margin: 0 auto;
	align-items: stretch;
}
.card {
	width: var(--card-width);
	font-size: calc(var(--card-width) * var(--card-font-scale));
	background: var(--primary-burgundy);
	color: var(--white);
	border: 2px solid var(--accent-gold);
	border-radius: 0.75rem;
	padding: 0.75rem;
	text-align: center;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card img {
	display: block;
	width: 100%;
	max-height: calc(var(--card-width) * 0.6);
	object-fit: cover;
	border-radius: 0.5rem;
	margin-bottom: 0.5rem;
	/*margin: 0 auto 0.5rem;*/
}
.card h3 {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 1.7em;
	margin: 0.3rem 0;
	/*color: var(--primary-burgundy);*/
}
.card p {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 1.2em;
	margin: 0.3em 0;
}
/* 4) Push the button down and restyle it for contrast */
.card button {
  background:    var(--accent-gold);
  border:        2px solid var(--accent-gold);
  color:         var(--primary-burgundy);
  padding:       0.25rem 0.5rem;
  border-radius: 0.5rem;
  font-size:     0.75rem;
  cursor:        pointer;
  align-self:    center;
  min-width: auto;
  margin-top:    0.5rem;               /* space from the title/price */
}

.card button:hover {
  opacity: 0.9;
}
/*  fixed card height: */
.card { min-height: 80px; }

/* Contact form */
.contact form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}
.contact input {
	padding: 0.75rem;
	width: 100%;
	max-width: 300px;
	border: 2px solid var(--accent-gold);
	border-radius: 0.5rem;
	font-size: 1rem;
}
.contact button {
	background: var(--accent-gold);
	color: var(--primary-burgundy);
	padding: 0.75rem 1.5rem;
	border: 2px solid var(--accent-gold);
	border-radius: 0.5rem;
	display: inline-block;
	margin: 1rem auto;
	cursor: pointer;
	font-size: 1rem;
}
.contact button:hover {
	opacity: 0.9;
}

.category-title {
  font-size: 2rem;       /* adjust as you like */
  font-weight: 800;
  text-align: left;
  margin: 1rem 0;
  color: var(--primary-burgundy);
}

/* cart */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 1rem;
  background: var(--soft-blush);
  text-align: right;
  z-index: 10;
}
.cart-icon {
  text-decoration: none;
  font-size: 1.5rem;
  color: var(--primary-burgundy);
}
#cart-count {
  background: var(--accent-gold);
  color: var(--primary-burgundy);
  border-radius: 50%;
  padding: 0.2rem 0.5rem;
  margin-left: 0.25rem;
  font-size: 0.9rem;
  vertical-align: top;
}
body { padding-top: 3.5rem; /* push content below fixed header */ }
.cart {
  max-width: 600px;
  margin: 2rem auto;
  padding: 1rem;
  background: var(--soft-blush);
  border-radius: 0.5rem;
}
.cart-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  color: var(--white);
}
.cart-row .remove {
  background: none;
  border: none;
  color: var(--primary-burgundy);
  font-size: 1.2rem;
  cursor: pointer;
}
.cart h2 {
	color: var(--primary-burgundy);
	font-family: var(--font-heading);
}
.cart-qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cart-qty button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid var(--white);
  padding: 0 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 0.25rem;
  color: var(--white);
}
.cart-qty button:hover {
  background:    rgba(255,255,255,0.3);
}
.cart-qty span {
  min-width: 1.5em;
  text-align: center;
  color: var(--white);
}
/* Modal backdrop */
.cart-modal {
  display: none;                   /* hidden by default */
  position: fixed;
  inset: 0;                        /* top/right/bottom/left = 0 */
  background: rgba(0,0,0,0.5);     /* translucent black */
  justify-content: center;
  align-items: center;
  z-index: 100;
}

/* Modal window */
.cart-window {
  background: var(--soft-blush);
  padding: 2rem;
  border-radius: 1rem;
  width: 90%;
  max-width: 400px;
  position: relative;
}

/* Close “×” button */
.cart-close {
	text-decoration: none;
    position: absolute;
    top: 0.5rem; right: 0.5rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    font-family: var(--font-heading);
    cursor: pointer;
    color: var(--primary-burgundy);
    display: inline-block;
    margin: 1rem;
	
}

/* Cart rows: 3 columns: name | price | qty-controls */
.cart-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: var(--white);
}

/* Center the price column */
.cart-line-total {
  justify-self: center;
  font-weight: bold;
  color: var(--white);
}

/* Qty controls stay right */
.cart-qty {
  justify-self: end;
  display: flex;
  gap: 0.25rem;
}
/* cart page wrapper */
.cart-page {
  max-width: 400px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: var(--primary-burgundy);
  border: 2px solid var(--accent-gold);
  border-radius: 1rem;
  color: var(--white);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* --- Top bar layout --- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--soft-blush);
  z-index: 20;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.topnav {
  max-width: 1150px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
}

.brand {
  font-family: 'Great Vibes', cursive;
  font-size: 2rem;
  color: var(--primary-burgundy);
  text-decoration: none;
}

.navlinks {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.navlinks a,
.dropbtn {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--primary-burgundy);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}
.navlinks a:hover, .dropbtn:hover { opacity: 0.8; }

/* --- Dropdown --- */
.dropdown { position: relative; }
.caret { margin-left: 0.25rem; }

.dropdown-menu {
  position: absolute;
  top: 110%;
  left: 0;
  min-width: 220px;
  background: var(--soft-blush);
  border: 1px solid var(--accent-gold);
  border-radius: 0.5rem;
  padding: 0.5rem 0;
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  display: none;
}
.dropdown-menu li { list-style: none; }
.dropdown-menu a {
  display: block;
  padding: 0.5rem 0.9rem;
  color: var(--primary-burgundy);
}
.dropdown.open .dropdown-menu { display: block; }

.menu-title {
  font-family: var(--font-body);  /* 'Playfair Display', serif */
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin-top: 5.5rem;   /* pushes it down from under the header */
  margin-bottom: 2rem;
  color: var(--primary-burgundy);
}


/* Keep content pushed below fixed header */
body { padding-top: 5.5rem; }

/* (Optional) small screens: stack links */
@media (max-width: 720px) {
  .navlinks { gap: 0.8rem; }
}
/* CATEGORY WRAPPER */
.category { 
  margin: 2.5rem auto;
  max-width: 1200px;
  padding: 0 1rem;
}

/* UNIFORM GRID (auto-fit columns) */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* PRODUCT CARD */
.product {
  background: var(--soft-blush);
  border: 2px solid var(--accent-gold);
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

/* CONSISTENT IMAGE SIZE */
.product img {
  width: 100%;
  aspect-ratio: 4 / 3;      /* keeps all images the same shape */
  object-fit: cover;
  display: block;
}

/* NAME, DIVIDER, PRICE */
.product-name {
  text-align: center;
  margin: 0.9rem 0 0.35rem;
  font-family: 'Montserrat', sans-serif; /* or var(--font-body) if you prefer */
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary-burgundy);
  font-weight: 800;
  font-size: 1.05rem;
  padding: 0 0.75rem;
}
.product .divider {
  width: 1.6rem; height: 3px;
  background: var(--primary-burgundy);
  opacity: .6; border-radius: 3px;
  margin: 0.3rem auto 0.6rem;
}
.product-price {
  text-align: center;
  color: var(--primary-burgundy);
  font-family: var(--font-body);
  font-weight: 700;
  margin-bottom: 0.9rem;
}

/* COMPACT FULL-WIDTH CTA */
.product .add-to-cart {
  background: var(--primary-burgundy);
  color: var(--soft-blush);
  border: 0;
  padding: 0.75rem 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
  font-size: 0.85rem;
  border-radius: 0 0 1rem 1rem;
  cursor: pointer;
}
.product .add-to-cart:hover { opacity: 0.9; }

/* Make entire product card feel clickable for configurable items */
.product.configurable .configure-btn {
  background: var(--primary-burgundy);
  color: var(--soft-blush);
  border: 0;
  padding: 0.75rem 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
  font-size: 0.85rem;
  border-radius: 0 0 1rem 1rem;
  cursor: pointer;
}
.product.configurable .configure-btn:hover { opacity: .9; }

.pm-row label {
  display:block;
  margin-bottom: .35rem;
  color: var(--primary-burgundy);
}

#pm-variant {
  width: 100%;
  border: 1px solid var(--accent-gold);
  border-radius: .5rem;
  padding: .5rem .6rem;
  background: var(--soft-blush);
  color: var(--primary-burgundy);
}
/* Make card content land in the same places across items */
.product {
  display: flex;
  flex-direction: column;
}

.product-name {                 /* 2 lines worth on desktop */
  min-height: 3.4rem;
}

.product .divider {
  margin-bottom: 0.6rem;
}

.product-price {                /* 1 line worth */
  min-height: 1.4rem;
  margin-bottom: 0.9rem;
}

/* Ensure both button types have the same height */
.product .add-to-cart,
.product.configurable .configure-btn {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;        /* same padding for both */
  text-align: center;
}
.social-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  filter: brightness(0) saturate(100%) invert(27%) sepia(25%) saturate(463%) hue-rotate(314deg) brightness(92%) contrast(89%);
  transition: opacity 0.2s;
}

.social-icon:hover {
  opacity: 0.7;
}

.fa-instagram {
  font-size: 1.1rem;
  color: var(--primary-burgundy);
  display: inline-block; /* makes sure it always renders */
}
.fa-instagram:hover {
  opacity: 0.7;
}

.btn {
  background-color: white; 
  color: #7D3C3C; /* burgundy */
  padding: 0.1rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  transition: background 0.2s ease;
}

.btn:hover {
  background-color: #a24a4a;
}
    body {
      background-color: #F7E7E7;
      font-family: "Montserrat", sans-serif;
      color: #5B2A2A;
    }

    .checkout-page {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .checkout-box {
      background-color: #7D3C3C;
      color: white;
      padding: 2rem;
      border-radius: 15px;
      box-shadow: 0 4px 10px rgba(125, 60, 60, 0.3);
      max-width: 400px;
      width: 100%;
    }

    .checkout-box h2 {
      font-weight: 700;
      margin-bottom: 1.2rem;
      text-align: center;
    }

    .checkout-box p {
      margin-bottom: 1rem;
      line-height: 1.5;
    }

    .checkout-box form {
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
    }

    .checkout-box input {
      padding: 0.6rem;
      border-radius: 6px;
      border: none;
      font-size: 0.95rem;
    }

    .checkout-box input:focus {
      outline: 2px solid #D4AF7F;
    }



    .back-link {
      position: absolute;
      top: 1rem;
      right: 1rem;
      color: #7D3C3C;
      font-weight: 700;
      text-decoration: none;
      font-size: 1.1rem;
    }

    .confirmation {
      margin-top: 1rem;
      color: #D4AF7F;
      text-align: center;
      font-weight: 600;
      display: none;
    }

#more .product img {
  max-height: 200px;
}

#more .product {
  padding: 0.8rem;
  max-width: 200px;
}