/* =====================================
   BUTTON
===================================== */

.btn {

  width: 100%;
  padding: 16px;

  border: none;
  border-radius: var(--radius-md);

  background: var(--primary);
  color: var(--surface);

  font-size: 16px;
  font-weight: 700;

  cursor: pointer;

  transition: var(--transition-normal);

  box-shadow: 0 8px 24px rgba(0,0,0,.05);

}

.btn:hover {

  background: var(--accent);

  transform: translateY(-2px);

}

.btn:active {

  transform: translateY(0);

}
.btn-secondary{

  background:transparent;

  color:var(--primary);

  border:2px solid var(--primary);

}

.btn-secondary:hover{

  background:var(--primary);

  color:var(--surface);

}

/* =====================================
 FORM
===================================== */

.order-form {

  display: flex;

  flex-direction: column;

  gap: 28px;

}

.form-group {

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.label {

  font-weight: 600;

  color: var(--text);

}

.input {

  width: 100%;

  padding: 17px 18px;

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  background: var(--surface);

  color: var(--text);

  font-size: 15px;

  transition: var(--transition-normal);

}

.input::placeholder {

  color: var(--text-secondary);

}

.input:focus {

  outline: none;

  border-color: var(--primary);

  box-shadow: 0 0 0 4px rgba(28, 69, 55, .10);

}

textarea.input {

  resize: vertical;

  min-height: 120px;

}

select.input {

  cursor: pointer;

}


/* =====================================
 FORM ERRORS
===================================== */

.error-message {

  display: block;

  min-height: 18px;

  margin-top: 6px;

  color: var(--danger);

  font-size: 13px;

  font-weight: 500;

}

.input.error {

  border: 1px solid var(--danger);

}


/* =====================================
 HEADER
===================================== */


.header{

  position:sticky;

  top:0;

  z-index:1000;

  height:var(--header-height);

  background: rgba(255,255,255,.92);

  backdrop-filter:blur(16px);

  -webkit-backdrop-filter:blur(16px);

  border-bottom:1px solid rgba(0,0,0,.05);

  transition:
      background .3s ease,
      box-shadow .3s ease,
      height .3s ease;
}

.header.scrolled{

  height:72px;

  box-shadow:0 8px 30px rgba(0,0,0,.08);

}


.header-logo img{

  height:52px;

  display:block;

  transition: var(--transition-normal);

}

.navigation {

  justify-self: center;

}

.navigation ul {

  display: flex;

  align-items: center;

  gap: var(--space-9);

  list-style: none;

}

.navigation a{

  position:relative;

  text-decoration:none;

  color:var(--text);

  font-size:15px;

  font-weight:500;

  letter-spacing:.2px;

  padding:8px 0;

  display:inline-block;

  transition:
      color .25s,
      transform .25s;
}

.navigation a::after {

  content: "";

  position: absolute;

  right: 0;

  bottom: -8px;

  width: 0;

  height: 2px;

  background: var(--accent);

  transition: var(--transition-normal);

}

.navigation a:hover{

  color:var(--accent);

  transform:translateY(-2px);

}

.navigation a:hover::after{

  width:100%;

}

.navigation a.active {

  color: var(--accent);

}

.navigation a.active::after {

  width: 100%;

}

.header.scrolled .header-logo img{

  transform:scale(.85);

}
.header-logo img:hover{

  transform: scale(1.05);

}
/* =====================================
 HEADER ACTIONS
===================================== */

.header-actions {

  display: flex;

  align-items: center;

  justify-self: end;

  gap: var(--space-3);

}

.icon-btn {

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 42px;

  height: 42px;

  border: none;

  border-radius: var(--radius-full);

  background: transparent;

  cursor: pointer;

  transition: var(--transition-normal);

}

.icon-btn:hover {

  background: var(--background);

  transform: translateY(-2px);

}

.icon-btn svg {

  width: 20px;

  height: 20px;

  stroke-width: 1.8;

}
/* =====================================
   PRODUCT CARD
===================================== */
.product-card{

  background:var(--surface);

  border:1px solid rgba(0,0,0,.06);

  border-radius:24px;

  overflow:hidden;

  transition:
      transform .35s ease,
      box-shadow .35s ease,
      border-color .35s ease;
  
  max-width:340px;

  margin-inline:auto;

}

.product-card:hover{

  transform:translateY(-8px);

  border-color:rgba(174,145,85,.35);

  box-shadow:
      0 24px 50px rgba(0,0,0,.10);

}
.product-image{

  position:relative;

  overflow:hidden;

  aspect-ratio:4 / 5;

  background: var(--background);

}

.product-image img{

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

  transition:transform .6s ease;

}

.product-card:hover .product-image img{

  transform:scale(1.05);

}
.product-badge{

  position:absolute;

  top:18px;

  left:18px;

  padding:8px 14px;

  border-radius:999px;

  background:rgba(28,69,55,.92);

  color:white;

  font-size:12px;

  font-weight:700;

  letter-spacing:1px;

}
.product-body{

  padding:28px;

}
.product-title{

  margin-bottom:8px;

  font-size:24px;

  font-weight:700;

}
.product-subtitle{

  margin-bottom:22px;

  color:var(--text-secondary);

  line-height:1.8;

}
.product-price{

  margin-bottom:24px;

  color:var(--primary);

  font-size:22px;

  font-weight:700;

}
.product-link{

  display:inline-flex;

  align-items:center;

  gap:8px;

  color:var(--accent);

  text-decoration:none;

  font-weight:600;

  transition:var(--transition-normal);

}

.product-link:hover{

  gap:14px;

}
/* =====================================
   CART BADGE
===================================== */

.cart-btn{

    position:relative;

}

.cart-badge{

    position:absolute;

    top:-6px;

    right:-6px;

    min-width:20px;

    height:20px;

    padding:0 6px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:white;

    font-size:12px;

    font-weight:700;

    border-radius:999px;

    border:2px solid white;

}
/* =====================================
   QUANTITY STEPPER
===================================== */
/* Shared by cart.html and product.html */

.qty-btn {

  width: 42px;

  height: 42px;

  border: 1px solid var(--border);

  background: var(--surface);

  border-radius: 12px;

  cursor: pointer;

  font-size: 22px;

  transition: var(--transition-normal);

}

.qty-btn:hover {

  background: var(--primary);

  color: white;

}

.cart-quantity {

  min-width: 36px;

  text-align: center;

  font-weight: 700;

}

/* =====================================
   MOBILE NAV
===================================== */

.menu-toggle {

  display: none;

}

.mobile-nav {

  display: none;

  position: absolute;

  top: 100%;

  right: 0;

  left: 0;

  background: var(--surface);

  border-bottom: 1px solid var(--border);

  box-shadow: var(--shadow-md);

}

.mobile-nav ul {

  list-style: none;

  display: flex;

  flex-direction: column;

  padding: var(--space-4) var(--space-6);

}

.mobile-nav a {

  display: block;

  padding: var(--space-4) 0;

  border-bottom: 1px solid var(--border);

  color: var(--text);

  font-size: 16px;

  font-weight: 500;

  text-decoration: none;

}

.mobile-nav li:last-child a {

  border-bottom: none;

}

.mobile-nav a.active {

  color: var(--accent);

}

.mobile-nav.open {

  display: block;

}

@media (max-width: 900px) {

  .header-content {

    grid-template-columns: auto 1fr auto;

  }

  .navigation {

    display: none;

  }

  .menu-toggle {

    display: flex;

  }

}