.filters {
  padding: 15px;
}

#categoryFilters li {
  margin: 8px 0;
  cursor: pointer;
}

.extra-links {
  border-top: 1px solid #ccc; /* grey line */
  margin-top: 15px;
  padding-top: 10px;
}

.extra-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.extra-links li {
  margin: 8px 0;
}

.extra-links a {
  text-decoration: none;
  color: #000;
  font-weight: 500;
}




/*PRODUCT*/
.product-section {
  margin-top: 37px;
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap; /* responsive on small screens */
}

.product-image img {
  width: 432px;
  height: 555px;
  border-radius: 32px;
  object-fit: cover;
}

.product-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 464px;
}

.product-header .brand {
  font-family: 'Javanese Text';
  font-weight: normal;
  font-size: 20px;
  color: #000000;
  margin: 0 0 0 20px; /* space on left */
}

.product-header .name,
.product-header .price {
  font-family: 'Javanese Text';
  font-weight: normal;
  font-size: 20px;
  color: #464646;
  margin: 0 0 0 20px; /* space on left */
}

.select-size {
  font-family: 'Javanese Text';
  font-weight: normal;
  font-size: 20px;
  color: #000000;
  margin: 0 0 0 20px; /* space on left */
}

.size-options {
  display: flex;
  gap: 12px;
  margin-left: 20px; /* align with text */
}

.size-options div {
  background-color: #F0F1EB;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.25);
  width: 80px;
  height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.size-options div.selected {
  background-color: #333;
  color: #fff;
  border-color: #333;
}

/* --- FIX PRODUCT BUTTONS --- */
.product-buttons {
  display: flex;
  gap: 12px;
  margin-left: 20px; /* align with text */
}

.product-buttons .favourite img {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: middle;
}

.add-to-bag {
  background-color: #000000;
  color: #FFFFFF;
  border-radius: 32px;
  width: 157px;
  height: 52px;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

.favourite {
  background-color: #7D722D;
  color: #FFFFFF;
  border-radius: 32px;
  width: 157px;
  height: 52px;
  border: 1px solid #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.product-description {
  font-family: 'Javanese Text';
  font-weight: normal;
  font-size: 20px;
  color: #000000;
  margin: 20px 20px 0 20px; /* left & right space */
}

/* --- Responsive for 420px --- */
@media (max-width: 420px) {
  .product-image img {
    width: 100%;
    height: auto;
  }

  .product-details {
    max-width: 100%;
    padding: 0 12px;
  }

  .size-options div {
    width: 60px;
    height: 45px;
    font-size: 16px;
  }

  .add-to-bag,
  .favourite {
    width: 100%;
    max-width: 180px;
    height: 48px;
    font-size: 14px;
  }

  .product-buttons {
    justify-content: center; /* center buttons on mobile */
    margin-left: 0;
  }
}





/* Responsive for mobile */
@media (max-width: 900px) {
  .product-section {
    flex-direction: column;
    align-items: center;
  }

  .product-image img {
    width: 300px;
    height: auto;
  }

  .product-details {
    max-width: 100%;
  }
}

.suggested-container::-webkit-scrollbar {
  display: none; /* hide scroll bar */
}

.suggested-product {
  flex: 0 0 auto; 
  width: 343px;
  height: 295px;


  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden; /* prevent scroll inside */
}



.suggested-product img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* keeps aspect ratio, no scroll */

}

.scroll-buttons button {
  width: 42px;
  height: 42px;
  background-color: #ffffff;
  border-radius: 10px;
  border: none;
  font-size: 22px;
  color: #464646;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.scroll-buttons button:hover {
  opacity: 0.8;
}


@media (max-width: 420px) {
  .suggested-container {
    scroll-snap-type: x mandatory; /* snap cards neatly */
    display: flex;
    overflow-x: auto;
  }

  .suggested-product {
    flex: 0 0 auto;
    margin: 0 12px; /* space left & right */
    width: 280px; /* fixed card width */
    height: 280px; /* fixed card height */
    scroll-snap-align: center; /* each card locks in center */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .suggested-product img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* keeps aspect ratio, crops if needed */
    border-radius: 8px; /* optional, makes it neat */
  }
}



/*CART PAGE*/
/* ...existing code... */

/* Cart layout: row-based columns (image | details | price | controls) + summary column */
.cart-page {
    max-width: 1200px;    /* total content width */
  margin: 0 auto;      
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 16px;
}

/* left list grows, summary sits to the right */
.cart-list,
#cartContainer {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
}

/* each cart item = single horizontal row with fixed columns */
.cart-item-row {
  display: flex;
  flex-wrap: nowrap;            /* keep columns on one line */
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
  min-width: 20px;             /* ensures columns have room (adjust if needed) */
}



.cart-item-row:first-child {
  border-top: 1px solid #cbc4c4; /* grey line above the first product */
}

.cart-list, #cartContainer {
  width: 100%;
  box-sizing: border-box;
}

/* each cart item row full width and visible separator */
.cart-item-row {
  width: 100%;
  padding: 16px 0;                    /* vertical spacing */
  margin: 0;                          /* reset any stray margins */
  border-bottom: 1px solid #cbc4c4;   /* thin grey line between products */
  box-sizing: border-box;
}


/* optional: bigger gap after the separator if you want more breathing room */
.cart-item-row + .cart-item-row {
  padding-top: 18px;
}

/* alternative: use an <hr class="cart-separator"> inside a row for tighter control */
.cart-separator {
  border: none;
  border-bottom: 2px solid #e6e6e6;
  margin: 12px 0 0;
  width: 100%;
  box-sizing: border-box;
}


/* ensure the summary column remains separate so the separators only span the list */
.cart-page { align-items: flex-start; }

.cart-item-row img {
  width: 343px;
  height: 295px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 343px;              /* fixed column, prevents shrinking */
  margin: 0;
  position: static;
}

/* Details Column: flexible middle column */
.cart-details-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1 1 3 60px;              /* grows between image and price */
  min-width: 200px;
  gap: 8px;
  position: static;
  right: auto;
  top: auto;
  box-sizing: border-box;
}

/* Brand, Name, Size (keeps original styling) */
.cart-details-col .brand {
  font-family: 'Javanese', sans-serif;
  font-size: 20px;
  color: #000000;
  margin: 20px 0;
}

.cart-details-col .name,
.cart-details-col .size {
  font-family: 'Javanese', sans-serif;
  font-size: 20px;
  color: #464646;
  margin: 2px 0;
}

/* Price column: fixed width, right aligned */
.cart-details-col .price {
  font-family: 'Javanese', sans-serif;
  font-size: 20px;
  color: #000000;
  font-weight: 400;
  flex: 0 0 100px;
  width: 0px;
  text-align: right;
  margin: 0;
  position: static;
}

/* Controls column (quantity + favourite) */
.cart-controls-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 160px;
  box-sizing: border-box;
}

/* Quantity controls: keep size but remove offsets */
.quantity-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 151px;
  height: 44px;
  border-radius: 32px;
  border: 1px solid #D9D9D9;
  background-color: #FFFFFF;
  padding: 0 8px;
  position: static;
  right: auto;
  margin-top: 10px;
}

.quantity-controls button {
width: 32px;
height: 32px;
border: none;
background-color: transparent;
cursor: pointer;
font-size: 20px;
}

.quantity-controls span.quantity {
font-family: 'Javanese', sans-serif;
font-size: 20px;
color: #000000;
min-width: 32px;
text-align: center;
}

/* Favourite Button */
.favourite-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background-color: #FFFFFF;
  border: 1px solid #D9D9D9;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 0;
}

/* Summary column (right) - sticky so it stays visible on scroll */
.cart-summary,
#cartSummary {
  width: 981px;
  max-width: 320px;
  padding: 20px;
  box-sizing: border-box;
  position: sticky;
  top: 120px;                   /* adjust to match header height */
  align-self: flex-start;
  margin-left: 8px;
}

/* Summary typography */
.summary-header {
  font-family: 'Javanese Text', sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #000;
  margin-bottom: 20px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-family: 'Javanese Text', sans-serif;
  font-size: 18px;
  color: #000;
}

.summary-row.total { font-weight: bold; }

.line { border-bottom: 1px solid #ccc; margin: 10px 0; }

.checkout-btn {
  display: inline-block;
  width: 100%;
  max-width: 281px;
  height: 52px;
  line-height: 52px;      /* vertical center text */
  border-radius: 32px;
  background-color: #000;
  color: #fff;
  font-family: 'Javanese Text', sans-serif;
  font-size: 20px;
  font-weight: 400;
  text-align: center;      /* center text */
  text-decoration: none;   /* remove underline */
  cursor: pointer;
  border: none;
  box-sizing: border-box;
  transition: background 0.3s ease;
}

.checkout-btn:hover {
  background-color: #333; /* subtle hover */
}


@media (max-width: 768px) {
  .cart-summary {
    display: none;
  }
}

/* Small / medium screens: allow horizontal scroll of the list to preserve column alignment */
@media (max-width: 1100px) {
  .cart-item-row { min-width: 760px; }
}

/* Very narrow screens: stack layout (falls back to single-column) */
@media (max-width: 700px) {
  .cart-page {
    flex-direction: column;
    padding: 12px;
  }
  .cart-list, #cartContainer {
    min-width: 0;
  }
  .cart-item-row {
    flex-wrap: wrap;
    min-width: 0;
    gap: 12px;
  }
  .cart-item-row img {
    width: 90%;
    height: auto;
    flex: 0 0 auto;
    margin: 0 auto;
    position: relative;
    left: 20px;
  }
  .cart-details-col { width: 100%; padding: 0 12px; text-align: left; }
  .cart-details-col .price { width: 100%; text-align: left; }
  .cart-controls-box { width: 100%; flex-direction: row; justify-content: space-between; padding: 0 12px; }
  .cart-summary, #cartSummary { position: static; width: 100%; margin-top: 16px; top: auto; }

  .quantity-controls { 
    position: relative;
    left: 100px;
    margin-top: 10px;
  }
}




/* MOBILE HEADER */

/* Default: hidden on desktop */


/* Mobile view */
@media (max-width: 768px) {
  .cart1-summary1 {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    background: #fff;
    padding: 15px;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.1);

    z-index: 1; /* Lower than the sidebar */
  }

  .cart1-summary1 h3 {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .summary-row {
    display: flex;
    justify-content: space-between;
    margin: 6px 0;
  }

  .summary-row.total {
    font-weight: bold;
  }

  .checkout-btn1 {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    background: black;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
  }

  .checkout-btn1:hover {
    background: #e14c50;
  }
}



/* CHECKOUT PAGE */
.checkout-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  margin: 40px auto;
  max-width: 1200px;
  padding: 20px;
}

.checkout-left {
  position: relative;
  left: 0; /* ✅ removed hard 100px push for proper centering */
}

/* SECTION HEADINGS */
.checkout-left h2,
.checkout-right h2 {
  font-family: "Javanese Text", sans-serif;
  font-weight: 400;
  font-size: 26px;
  color: #000;
  margin-bottom: 10px;
}

/* GENERAL BOXES */
.option-box,
.payment-option {
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 32px;
  padding: 15px 20px;
  margin: 10px 0;
  cursor: pointer;
  background: #fafafa;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: border-color 0.3s ease, background 0.3s ease;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
}

.option-box:hover,
.payment-option:hover {
  border-color: #7D722D;
}

.option-box.active,
.payment-option.active {
  border-color: #7D722D;
  background: #fdfbf5;
}

/* INPUT BOXES */
.input-box {
  width: 100%;
  max-width: 600px;
  height: 60px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.25);
  color: rgba(0,0,0,0.25);
  margin: 8px 0;
  background: #fff;
  font-size: 16px;
  box-sizing: border-box;
}

  .form-row-phone {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
  }

  /* ✅ Address Row Layout */
  .form-row-address {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
  }

  /* ✅ Country Code Dropdown (keeps your input style safe) */
  .country-select {
    height: 60px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.25);
    background: #fff;
    font-size: 16px;
    padding: 0 10px;
    color: #000;
    width: 120px;
    box-sizing: border-box;
  }

  /* ✅ ZIP Code smaller but still matches design */
  .zip-input {
    max-width: 150px;
  }

  /* ✅ Error Message */
  .error-message {
    color: red;
    font-size: 14px;
    display: none;
    margin: 4px 0 10px;
  }

  /* ✅ Invalid Input Styling */
  .input-box.invalid {
    border: 1px solid red;
    background-color: #ffe6e6;
  }

  /* ✅ Responsive Layout */
  @media (max-width: 500px) {
    .form-row-phone,
    .form-row-address {
      flex-direction: column;
      gap: 5px;
    }

    .zip-input,
    .country-select {
      max-width: 100%;
    }
  }

    .phone-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 600px;
    height: 60px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    background: #fff;
    margin: 8px 0;
    padding: 0 12px;
    box-sizing: border-box;
  }

  /* ✅ Dropdown inside input */
  .country-select {
    border: none;
    background: transparent;
    font-size: 16px;
    margin-right: 10px;
    outline: none;
    appearance: none;
    width: 70px;
    cursor: pointer;
  }

  /* ✅ Phone Input (no border so it blends in) */
  .phone-input {
    border: none;
    flex: 1;
    font-size: 16px;
    outline: none;
  }

  /* ✅ ZIP Code Row */
  .form-row-address {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
  }

  .zip-input {
    max-width: 150px;
  }

  /* ✅ Error Styling */
  .error-message {
    color: red;
    font-size: 14px;
    display: none;
    margin: 4px 0 10px;
  }

  .phone-wrapper.invalid {
    border: 1px solid red;
    background-color: #ffe6e6;
  }

  /* ✅ Responsive for mobile */
  @media (max-width: 500px) {
    .form-row-address {
      flex-direction: column;
      gap: 5px;
    }

    .zip-input {
      max-width: 100%;
    }
  }

/* JOIN US TEXT */
.join-us-text {
  font-family: "Javanese Text", sans-serif;
  font-size: 16px;
  color: rgba(0,0,0,0.25);
  margin: 10px 0 20px;
}

.join-us-text .brand-name {
  color: #7D722D;
  font-weight: bold;
}

/* SHIPPING BOXES (Generated by JS, styled here) */
.hey {
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 16px;
  padding: 12px 14px;
  margin: 8px 0;
  cursor: pointer;
  user-select: none;
  transition: all .12s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.4;
  width: 100%;
  max-width: 650px;
  box-sizing: border-box;
}

.hey strong {
  font-size: 16px;
  margin-bottom: 4px;
}

.hey small {
  color: #555;
  margin-top: 4px;
}

.hey:hover {
  border-color: #7D722D;
}

.hey.active {
  border-color: #7D722D;
  background: #fdfbf5;
}

/* PAYMENT OPTIONS */
  .payment-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid rgba(0,0,0,0.25);
    border-radius: 16px;
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease;
  }

  .payment-option:hover {
    border-color: #7D722D;
  }

  .payment-option.active {
    border-color: #7D722D;
    background: #fdfbf5;
  }

  .payment-option input[type="radio"] {
    display: none; /* ✅ hide radio buttons completely */
  }

  .payment-option label {
    font-weight: bold;
    margin-bottom: 5px;
    cursor: pointer;
  }

.payment-option[data-method="gcash"] label {
  color: blue;
}

.gcash-dropdown {
  display: none;
  margin-top: 10px;
  background-color: #007BFF; /* blue dropdown */
  padding: 10px;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box; /* ✅ prevents overflow */
}


.payment-option.active .gcash-dropdown {
  display: block;
}

.gcash-dropdown input {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.8);
  padding: 10px;
  width: 100%;
  color: #000;
  background: #fff;
  font-size: 16px;
  box-sizing: border-box; /* ✅ input stays inside dropdown box */
}
.gcash-dropdown input[type="number"]::-webkit-inner-spin-button,
.gcash-dropdown input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.gcash-dropdown input[type="number"] {
  -moz-appearance: textfield; /* for Firefox */
}

.gcash-dropdown input.invalid {
  border: 2px solid red;
  outline: none;
}

#makePaymentWrapper {
  display: none; /* hidden until user selects a payment method */
  margin-top: 20px;
  width: 100%;
}

#makePaymentBtn {
  background-color: #7D722D;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px;
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

#makePaymentBtn:hover {
  background-color: #5f5821;
}




/* ORDER SUMMARY RIGHT SIDE */


.checkout-right p {
  margin: 5px 0;
}

.checkout-right strong {
  color: green;
  font-size: 20px;
}

/* PRODUCT LIST */
.order-item {
  display: flex;
  gap: 12px;
  margin: 15px 0;
}

.order-item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

/* BUTTON */
.place-order-wrapper {
  margin-top: 20px;
  text-align: center;
}

.place-order-btn {
  background: #3b3409;
  color: #fff;
  border: none;
  margin-top: 50px;
  padding: 20px 100px;
  font-size: 16px;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.place-order-btn:hover {
  background: #5e551f;
}

/* ✅ Mobile layout fix */
@media (max-width: 768px) {
  .checkout-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .checkout-left {
    left: 0; /* kill offset on mobile */
  }

  .option-box,
  .input-box,
  .payment-option,
  .hey {
    width: 100%;
    max-width: 100%; /* no overflow */
  }

  .place-order-btn {
    width: 100%;     /* full width button */
    padding: 18px;   /* adjust for mobile */
    border-radius: 16px;
  }

  /* Order summary should stack last */
  .order-summary {
    order: 10;
  }
  .payment-option
   .option-box {
    width: 100%;        /* ✅ shrink to fit mobile */
    max-width: 100%;    /* ✅ prevent horizontal scroll */
    margin-right: 0;    
}
  .hey {
    max-width: 100%;   /* ✅ prevent overflow */
    margin-right: 0;   /* ✅ avoids scroll bar on right */
  }
}


.checkout-item {
  border-bottom: 1px solid #ccc; /* Grey line between products */
  padding: 15px 0;
}

.checkout-item-content {
  display: flex;
  gap: 10px;
}

.checkout-item-img {
  width: 100px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
}

.checkout-item-details p {
  margin: 4px 0;
}

.checkout-item-brand {
  font-weight: bold;
}

.checkout-item-size {
  font-size: 14px;
  color: #666;
}

.checkout-item-price span {
  color: #28a745; /* Green only for price */
  font-weight: bold;
}




.site-footer {
  height: 45px;              /* fixed height */
  background-color: #f5f5f5; /* light gray background */
  color: #333;               /* text color */
  display: flex;
  align-items: center;       /* vertical center */
  justify-content: center;   /* horizontal center */
  font-size: 14px;
  border-top: 1px solid #ddd; /* optional separator */
  width: 100%;
  box-sizing: border-box;
  position: relative;        /* footer stays at bottom naturally */
}


/* Hide on desktop */
#cart1Summary1 {
  display: none;
}

/* Show only on mobile (up to 768px wide, adjust if needed) */
@media (max-width: 768px) {
  #cart1Summary1 {
    display: block;
  }
}