/*
 * Classic WooCommerce cart & checkout styling.
 * Clean, single-purpose sections matching the STS Gift Shop brand.
 *
 * @package STS_Gift_Shop
 */

/* -------------------------------------------------------------------------
 * Shared page shells
 * ---------------------------------------------------------------------- */
.woocommerce-cart .content-area,
.woocommerce-checkout .content-area {
  padding: 40px 15px 70px;
}

.woocommerce .content-area,
.shop-page-container {
  padding-left: 0;
  padding-right: 0;
  max-width: 1400px;
}

.woocommerce .content-area .container,
.shop-page-container .container {
  padding-left: 20px;
  padding-right: 20px;
}

/* -------------------------------------------------------------------------
 * Shop & category archive grid (guaranteed clean responsive grid)
 * ---------------------------------------------------------------------- */
.archive-header,
.woocommerce.archive-header {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 20px 0;
}

.archive-header .woocommerce-breadcrumb {
  font-size: 13px;
  margin-bottom: 10px;
}

.archive-header .woocommerce-products-header h1 {
  font-size: 28px;
  margin-bottom: 8px;
}

.archive-header .woocommerce-result-count {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 10px;
}

.archive-header .woocommerce-ordering select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
}

/* Make sure the theme grid wrapper wins over any default WooCommerce
   flexbox grid. Applies inside shop and category pages. */
.product-grid,
.shop-page-container .product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.product-grid > * {
  min-width: 0;
}

/* ------------------------------------------------------------------
 * Rollover support for WooCommerce's own classic grid output.
 * If for any reason the theme loop-start.php is bypassed, the plugin
 * emits <ul class="products columns-N"> with <li class="product">.
 * Force that into the same clean responsive grid so category pages
 * are never squeezed into inline-flex rows.
 * ------------------------------------------------------------------ */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  display: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  min-width: 0;
  list-style: none;
}

.woocommerce ul.products li.product .product-card,
.woocommerce-page ul.products li.product .product-card {
  height: 100%;
}

/* Block-based product grid (WooCommerce product query block). */
.wc-block-grid__products,
.wc-block-grid.wc-block-grid__products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wc-block-grid__product {
  min-width: 0;
}

@media (max-width: 1024px) {
  .product-grid,
  .shop-page-container .product-grid,
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products,
  .wc-block-grid__products {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .product-grid,
  .shop-page-container .product-grid,
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products,
  .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .product-grid,
  .shop-page-container .product-grid,
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products,
  .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.woocommerce > .woocommerce-message,
.woocommerce > .woocommerce-error,
.woocommerce > .woocommerce-info,
.woocommerce-NoticeGroup,
.woocommerce-notices-wrapper {
  max-width: 760px;
  margin: 0 auto 25px;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--gold);
  background: var(--bg-gray);
  border-radius: var(--radius);
  padding: 14px 22px 14px 50px;
  font-size: 14px;
}

.woocommerce-error {
  border-top-color: var(--primary);
}

.woocommerce-message .button,
.woocommerce-info .button {
  float: right;
  background: var(--dark);
  color: #fff;
  padding: 8px 18px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.woocommerce-message .button:hover {
  background: var(--gold);
  color: var(--dark);
}

.woocommerce-message:before,
.woocommerce-info:before {
  color: var(--gold);
}

.woocommerce-error:before {
  color: var(--primary);
}

/* -------------------------------------------------------------------------
 * Cart page
 * ---------------------------------------------------------------------- */
.woocommerce-cart .entry-title {
  text-align: center;
  font-size: 30px;
  margin-bottom: 5px;
}

.woocommerce-cart .entry-subtitle {
  text-align: center;
  color: var(--text-light);
  margin-bottom: 35px;
}

.woocommerce-cart form.woocommerce-cart-form {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 30px;
  align-items: start;
}

.woocommerce-cart .shop_table.cart {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--bg);
  overflow: hidden;
}

.woocommerce-cart .shop_table.cart thead th {
  background: var(--dark);
  color: var(--gold-light);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 14px 16px;
  border: none;
}

.woocommerce-cart .shop_table.cart td {
  padding: 16px;
  border-color: #eee;
  vertical-align: middle;
}

.woocommerce-cart .shop_table.cart img {
  width: 70px;
  height: auto;
  border-radius: 6px;
}

.woocommerce-cart .shop_table.cart .product-name a {
  color: var(--dark);
  font-weight: 600;
}

.woocommerce-cart .shop_table.cart .product-name a:hover {
  color: var(--primary);
}

.woocommerce-cart .shop_table.cart .quantity .qty {
  width: 64px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  text-align: center;
}

.woocommerce-cart .cart-collaterals {
  position: sticky;
  top: 150px;
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 25px;
}

.woocommerce-cart .cart-collaterals h2 {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--dark);
  margin-bottom: 15px;
}

.woocommerce-cart .cart_totals table {
  border: none;
  margin-bottom: 15px;
}

.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td {
  border: none;
  border-bottom: 1px solid #f0f0f0;
  padding: 12px 0;
  font-size: 14px;
}

.woocommerce-cart .cart_totals td {
  text-align: right;
  font-weight: 600;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
  border-bottom: none;
  font-size: 17px;
  color: var(--primary);
}

.woocommerce-cart .wc-proceed-to-checkout {
  padding: 0;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  width: 100%;
  display: block;
  text-align: center;
  background: var(--dark);
  color: #fff;
  padding: 16px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background var(--transition), transform var(--transition);
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--gold);
  color: var(--dark);
  transform: translateY(-2px);
}

.woocommerce-cart .coupon {
  display: flex;
  gap: 10px;
}

.woocommerce-cart .coupon .input-text {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  font-size: 14px;
}

.woocommerce-cart button.button,
.woocommerce-cart button[name="update_cart"] {
  background: var(--bg-gray);
  color: var(--dark);
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}

.woocommerce-cart button.button:hover,
.woocommerce-cart button[name="update_cart"]:hover {
  background: var(--dark);
  color: #fff;
}

.woocommerce-cart .cart-empty {
  text-align: center;
  padding: 60px 20px;
  font-size: 16px;
  color: var(--text-light);
}

.woocommerce-cart a.button.wc-backward {
  display: inline-block;
  margin-top: 15px;
  background: var(--gold);
  color: var(--dark);
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* -------------------------------------------------------------------------
 * Checkout page — billing form + order review
 * ---------------------------------------------------------------------- */
.woocommerce-checkout .entry-title {
  text-align: center;
  font-size: 30px;
  margin-bottom: 5px;
}

.woocommerce-checkout .entry-subtitle {
  text-align: center;
  color: var(--text-light);
  margin-bottom: 35px;
}

.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 30px;
  align-items: start;
}

.woocommerce-checkout form.checkout #customer_details,
.woocommerce-checkout form.checkout #order_review_heading {
  grid-column: 1;
}

.woocommerce-checkout #customer_details {
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px;
}

.woocommerce-checkout #order_review {
  grid-column: 2;
  grid-row: 1 / span 3;
  position: sticky;
  top: 150px;
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 25px;
}

.woocommerce-checkout .sts-delivery-note {
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-gray);
  border: 1px solid #eee;
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 25px;
  font-size: 14px;
  color: var(--dark);
}

.woocommerce-checkout .sts-delivery-note i {
  color: var(--primary);
  font-size: 18px;
  line-height: 1.4;
}

.woocommerce-checkout .sts-delivery-note p {
  margin: 0;
}

.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-checkout #order_review_heading {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--dark);
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--gold);
}

.woocommerce-checkout .form-row {
  margin-bottom: 0;
}

/* Billing fields sit in a tidy two-column grid on desktop and collapse to a
   single column on mobile. WooCommerce marks first/last pairs with the
   form-row-first / form-row-last classes. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}

.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
  float: none;
  width: auto;
}

.woocommerce-checkout .form-row.form-row-wide {
  grid-column: 1 / -1;
}

.woocommerce-checkout .form-row label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 7px;
}

.woocommerce-checkout .form-row label .required {
  color: var(--primary);
  border: none;
}

.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row .select2-container .select2-selection--single {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 13px 14px;
  font-size: 15px;
  color: var(--dark);
  background: #fff;
  line-height: 1.3;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.woocommerce-checkout .form-row .select2-container {
  width: 100% !important;
}

.woocommerce-checkout .form-row .select2-container .select2-selection--single {
  height: auto;
  padding-top: 0;
  display: flex;
  align-items: center;
}

.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.18);
}

.woocommerce-checkout .form-row .input-text:-webkit-autofill,
.woocommerce-checkout .form-row .input-text:-webkit-autofill:hover,
.woocommerce-checkout .form-row .input-text:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: var(--dark);
}

.woocommerce-checkout .form-row .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50%;
  transform: translateY(-50%);
}

.woocommerce-checkout .woocommerce-shipping-fields {
  margin-top: 25px;
}

.woocommerce-checkout .woocommerce-shipping-fields #ship-to-different-address {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Payment methods */
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: var(--radius);
}

.woocommerce-checkout #payment ul.payment_methods {
  border: none;
  padding: 0;
  margin: 0 0 20px;
}

.woocommerce-checkout #payment ul.payment_methods li {
  background: var(--bg);
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.woocommerce-checkout #payment ul.payment_methods li:hover {
  border-color: var(--gold-light);
}

.woocommerce-checkout #payment ul.payment_methods li label {
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

.woocommerce-checkout #payment ul.payment_methods li input {
  accent-color: var(--primary);
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--bg-gray);
  border-radius: 4px;
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--text-light);
}

.woocommerce-checkout #payment div.payment_box:before {
  border-bottom-color: var(--bg-gray);
}

.woocommerce-checkout .place-order .button {
  width: 100%;
  display: block;
  background: var(--dark);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 17px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.woocommerce-checkout .place-order .button:hover {
  background: var(--gold);
  color: var(--dark);
  transform: translateY(-2px);
}

/* Order review items */
.woocommerce-checkout #order_review .shop_table {
  border: none;
  border-radius: 6px;
  background: var(--bg-gray);
  overflow: hidden;
  margin-bottom: 20px;
}

.woocommerce-checkout #order_review .shop_table thead th {
  background: var(--dark);
  color: var(--gold-light);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 14px;
  border: none;
}

.woocommerce-checkout #order_review .shop_table td,
.woocommerce-checkout #order_review .shop_table th {
  border-color: #eee;
  padding: 12px 14px;
  font-size: 14px;
}

.woocommerce-checkout #order_review .shop_table .product-name {
  color: var(--dark);
  font-weight: 500;
}

.woocommerce-checkout #order_review .shop_table .product-total {
  text-align: right;
  font-weight: 600;
}

.woocommerce-checkout #order_review .shop_table .order-total th,
.woocommerce-checkout #order_review .shop_table .order-total td {
  font-size: 17px;
  color: var(--primary);
  font-weight: 800;
}

/* -------------------------------------------------------------------------
 * Order received (thank you) page
 * ---------------------------------------------------------------------- */
.woocommerce-order-received .entry-title {
  text-align: center;
}

.woocommerce-order-received .woocommerce-order {
  max-width: 640px;
  margin: 30px auto;
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px;
  text-align: center;
}

.woocommerce-order-received .woocommerce-order > p:first-of-type {
  font-size: 16px;
}

.woocommerce-order-received ul.woocommerce-thankyou-order-details {
  text-align: left;
  border: 1px solid #eee;
  border-radius: 6px;
  margin: 25px 0;
}

.woocommerce-order-received ul.woocommerce-thankyou-order-details li {
  padding: 12px 16px;
  border-right: 1px solid #eee;
  font-size: 13px;
}

.woocommerce-order-received .woocommerce-thankyou-order-received {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark);
}

.woocommerce-order-received .woocommerce-thankyou-order-received:before {
  display: block;
  content: "✓";
  width: 56px;
  height: 56px;
  line-height: 52px;
  margin: 0 auto 15px;
  border-radius: 50%;
  background: #27ae60;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
}

.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details {
  text-align: left;
}

.woocommerce-order-received .woocommerce-order-details h2,
.woocommerce-order-received .woocommerce-customer-details h2 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 10px;
  margin-bottom: 18px;
}

/* -------------------------------------------------------------------------
 * Single product page
 * ---------------------------------------------------------------------- */
.woocommerce.single-product .product-whatsapp-btn {
  max-width: 260px;
  margin-top: 12px;
}

.woocommerce.single-product div.quantity {
  margin-right: 10px;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */
@media (max-width: 900px) {
  .woocommerce-cart form.woocommerce-cart-form,
  .woocommerce-checkout form.checkout {
    grid-template-columns: 1fr;
  }

  .woocommerce-checkout form.checkout #customer_details,
  .woocommerce-checkout form.checkout #order_review_heading {
    grid-column: 1;
    grid-row: auto;
  }

  .woocommerce-checkout #order_review {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
}

@media (max-width: 600px) {
  .woocommerce-cart .shop_table.cart thead {
    display: none;
  }

  .woocommerce-cart .shop_table.cart tr,
  .woocommerce-cart .shop_table.cart td {
    display: block;
  }

  .woocommerce-cart .shop_table.cart td {
    text-align: right;
    padding: 12px 16px;
  }

  .woocommerce-cart .shop_table.cart td:before {
    content: attr(data-title);
    float: left;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--text-light);
  }

  .woocommerce-cart .shop_table.cart .product-thumbnail,
  .woocommerce-cart .shop_table.cart .product-thumbnail img {
    display: none;
  }

  .woocommerce-checkout #customer_details {
    padding: 20px;
  }

  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: 1fr;
  }

  .woocommerce-checkout .form-row .input-text,
  .woocommerce-checkout .form-row select,
  .woocommerce-checkout .form-row textarea {
    font-size: 16px;
  }
}