/* NG Shop Makeover v1.0.0 - Nova Glow teal/gold styling for WooCommerce pages */

/* ---------- Frame: hide the theme's bare header/footer on Woo pages ---------- */
body.woocommerce-page #header,
body.woocommerce #header,
body.woocommerce-page #footer,
body.woocommerce #footer {
  display: none !important;
}
body.woocommerce-page #page > hr,
body.woocommerce #page > hr {
  display: none !important;
}
body.woocommerce-page {
  background: #f7f5f0;
}
body.woocommerce-page #primary,
body.woocommerce-page .site-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 18px 48px;
  box-sizing: border-box;
}

/* ---------- Branded header ---------- */
.ngm-topbar {
  background: #0b3b40;
  color: #e8cf8a;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 1.6px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: 14px 14px 0 0;
  margin-top: 16px;
}
.ngm-topbar span {
  color: #c9a227;
  padding: 0 6px;
}
.ngm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 2px 14px rgba(11, 59, 64, 0.08);
  padding: 14px 20px;
}
.ngm-brand {
  text-decoration: none;
  line-height: 1.1;
}
.ngm-name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #0b3b40;
}
.ngm-name em {
  font-style: normal;
  color: #c9a227;
}
.ngm-tag {
  display: block;
  font-size: 9.5px;
  letter-spacing: 3.6px;
  color: #5c7a7d;
  font-weight: 600;
  margin-top: 2px;
}
.ngm-nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.ngm-nav a {
  color: #0b3b40;
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
}
.ngm-nav a:hover,
.ngm-nav a.ngm-active {
  color: #0d7d8c;
}
.ngm-actions {
  display: flex;
  gap: 10px;
}
.ngm-icon-btn {
  width: 40px;
  height: 40px;
  border: 1.5px solid #dbe4e4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0b3b40;
  text-decoration: none;
}
.ngm-icon-btn svg {
  width: 20px;
  height: 20px;
}
.ngm-icon-btn:hover {
  border-color: #0d7d8c;
  color: #0d7d8c;
}

/* ---------- Shop hero band ---------- */
.ngm-hero {
  margin-top: 18px;
  background: linear-gradient(120deg, #075a66, #0d7d8c);
  border-radius: 18px;
  color: #fff;
  padding: 32px 30px;
}
.ngm-hero h1 {
  font-size: 34px;
  margin: 0 0 6px;
  color: #fff;
  font-weight: 800;
}
.ngm-hero p {
  margin: 0;
  opacity: 0.92;
  font-size: 15.5px;
}
.ngm-chips {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ngm-chips span {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}

/* ---------- Shop toolbar ---------- */
.woocommerce .woocommerce-breadcrumb {
  color: #5c7a7d;
  font-size: 13px;
  margin: 16px 2px 8px;
}
.woocommerce .woocommerce-breadcrumb a {
  color: #0d7d8c;
  text-decoration: none;
}
.woocommerce .woocommerce-result-count {
  color: #5c7a7d;
  font-size: 13.5px;
  margin-top: 10px;
}
.woocommerce .woocommerce-ordering select {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1.5px solid #d4e0e0;
  background: #fff;
  font-size: 13.5px;
  color: #0b3b40;
}
body.woocommerce-shop .woocommerce-products-header,
body.tax-product_cat .woocommerce-products-header,
body.tax-product_tag .woocommerce-products-header {
  display: none;
}

/* ---------- Product cards ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin: 18px 0 8px !important;
  padding: 0 !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
}
.woocommerce ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 3px 16px rgba(11, 59, 64, 0.08);
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(11, 59, 64, 0.14);
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  text-decoration: none;
  display: block;
}
.woocommerce ul.products li.product img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #f4f8f8;
  margin: 0 0 12px !important;
}
.woocommerce ul.products li.product .onsale {
  background: linear-gradient(135deg, #f5c542, #e9a800);
  color: #3a2c00;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
  min-height: 0;
  min-width: 0;
  top: 22px;
  left: 22px;
  right: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: #0b3b40 !important;
  font-size: 15.5px !important;
  font-weight: 600;
  padding: 0 !important;
  margin: 0 0 6px !important;
  line-height: 1.35;
}
.woocommerce .star-rating {
  color: #f0ad1f;
  margin: 0 0 8px !important;
  font-size: 13px;
  float: none;
}
.woocommerce .star-rating span::before {
  color: #f0ad1f;
}
.woocommerce ul.products li.product .price {
  color: #0d7d8c !important;
  font-size: 16.5px;
  font-weight: 700;
  display: block;
  margin: 0 0 12px;
}
.woocommerce ul.products li.product .price del {
  color: #9db3b5;
  font-weight: 500;
  font-size: 13.5px;
  margin-right: 6px;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  background: transparent;
}
.woocommerce ul.products li.product .button {
  margin-top: auto;
  background: linear-gradient(135deg, #0d7d8c, #075a66);
  color: #fff;
  border-radius: 12px;
  text-align: center;
  padding: 12px 10px;
  font-weight: 700;
  font-size: 14px;
  border: none;
}
.woocommerce ul.products li.product .button:hover {
  background: linear-gradient(135deg, #0b3b40, #075a66);
  color: #ffd968;
}
.woocommerce ul.products li.product a.added_to_cart {
  text-align: center;
  font-size: 13px;
  color: #0d7d8c;
  margin-top: 8px;
  font-weight: 600;
  text-decoration: none;
}

/* ---------- Pagination ---------- */
.woocommerce nav.woocommerce-pagination {
  text-align: center;
  margin: 26px 0 6px;
}
.woocommerce nav.woocommerce-pagination ul {
  border: none;
  display: inline-flex;
  gap: 8px;
  background: transparent;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: none;
  float: none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: 10px;
  padding: 9px 14px;
  background: #fff;
  color: #0b3b40;
  box-shadow: 0 2px 8px rgba(11, 59, 64, 0.08);
  font-weight: 600;
  display: block;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #0d7d8c;
  color: #fff;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #eef6f6;
}

/* ---------- Single product ---------- */
body.single-product .product_title {
  color: #0b3b40;
}
body.single-product p.price,
body.single-product span.price {
  color: #0d7d8c;
  font-size: 24px;
  font-weight: 700;
}
body.single-product p.price del,
body.single-product span.price del {
  color: #9db3b5;
  font-size: 17px;
}
body.single-product p.price ins,
body.single-product span.price ins {
  text-decoration: none;
}
body.single-product .single_add_to_cart_button {
  background: linear-gradient(135deg, #0d7d8c, #075a66) !important;
  border-radius: 12px !important;
  padding: 13px 26px !important;
  font-weight: 700;
}
body.single-product div.product div.images img {
  border-radius: 16px;
}
body.single-product .quantity .qty {
  border-radius: 10px;
  border: 1.5px solid #d4e0e0;
  padding: 10px;
}

/* ---------- Tables, notices, generic buttons ---------- */
.woocommerce table.shop_table {
  background: #fff;
  border: 1px solid #e3e9e9;
  border-radius: 16px;
  box-shadow: 0 3px 14px rgba(11, 59, 64, 0.06);
  border-collapse: separate;
  overflow: hidden;
}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  border-top-color: #0d7d8c;
  background: #eef6f6;
  border-radius: 10px;
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
  color: #0d7d8c;
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  border-radius: 12px;
}
.woocommerce .cart .button,
.woocommerce .cart input.button {
  background: #0d7d8c;
  color: #fff;
}
.woocommerce a.checkout-button {
  background: linear-gradient(135deg, #0d7d8c, #075a66) !important;
  font-weight: 700;
  border-radius: 12px !important;
}

/* ---------- Checkout (block) ---------- */
.wc-block-checkout {
  background: #fff;
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 3px 16px rgba(11, 59, 64, 0.08);
  margin-top: 18px;
  box-sizing: border-box;
}
.wc-block-components-text-input input,
.wc-block-components-text-input textarea {
  border-radius: 10px !important;
}
.wc-block-components-radio-control__option {
  border-radius: 12px;
}
.wc-block-components-checkout-place-order-button {
  background: linear-gradient(135deg, #0d7d8c, #075a66) !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700;
  min-height: 52px;
}
.woocommerce #place_order {
  background: linear-gradient(135deg, #0d7d8c, #075a66);
  border-radius: 12px;
  font-weight: 700;
  padding: 14px 30px;
}
.woocommerce form.checkout {
  background: #fff;
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 3px 16px rgba(11, 59, 64, 0.08);
  margin-top: 18px;
  box-sizing: border-box;
}
.woocommerce form.checkout input.input-text,
.woocommerce form.checkout textarea,
.woocommerce form.checkout select {
  border-radius: 10px;
  border: 1.5px solid #d4e0e0;
  padding: 11px 12px;
}

/* ---------- Order received ---------- */
.woocommerce ul.woocommerce-order-overview {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 3px 14px rgba(11, 59, 64, 0.06);
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
}
.woocommerce ul.woocommerce-order-overview li strong {
  color: #0b3b40;
}
.woocommerce .woocommerce-customer-details address {
  background: #fff;
  border: 1px solid #e3e9e9;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 3px 14px rgba(11, 59, 64, 0.05);
  font-style: normal;
  line-height: 1.65;
}
.woocommerce h2.woocommerce-order-details__title,
.woocommerce .woocommerce-customer-details h2 {
  color: #0b3b40;
}

/* ---------- Bank accounts (order received) ---------- */
.ngm-banks {
  margin-top: 34px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 3px 16px rgba(11, 59, 64, 0.08);
  padding: 26px;
}
.ngm-banks h2 {
  color: #0b3b40;
  margin: 0 0 8px;
  font-size: 22px;
  display: inline-block;
  border-bottom: 3px solid #c9a227;
  padding-bottom: 6px;
}
.ngm-banks-sub {
  color: #5c7a7d;
  margin: 10px 0 20px;
  font-size: 14.5px;
  line-height: 1.6;
}
.ngm-bank-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ngm-bank {
  border: 1.5px solid #e3e9e9;
  border-radius: 16px;
  padding: 18px;
}
.ngm-bank-logo {
  height: 42px;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.ngm-bank-logo img {
  max-height: 42px;
  width: auto;
}
.ngm-bank-tile {
  background: #0a2a6b;
  color: #fff;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14.5px;
}
.ngm-bank-name {
  font-weight: 700;
  color: #0b3b40;
  font-size: 16px;
  margin-bottom: 6px;
}
.ngm-bank-row {
  font-size: 14px;
  color: #5c7a7d;
  margin-bottom: 2px;
}
.ngm-bank-row b {
  color: #0b3b40;
}
.ngm-bank-num {
  font-family: "Courier New", monospace;
  font-size: 20px;
  font-weight: 700;
  color: #0b3b40;
  letter-spacing: 1px;
  margin: 2px 0 10px;
}
.ngm-copy {
  background: #eef6f6;
  color: #0d7d8c;
  border: 1px solid #cde0e0;
  border-radius: 9px;
  padding: 6px 14px;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
}
.ngm-copy:hover {
  background: #dcefeF;
}

/* ---------- Branded footer ---------- */
.ngm-footer {
  margin-top: 36px;
  background: #0b3b40;
  color: #cfe3e5;
  border-radius: 18px;
  padding: 30px 30px 0;
  overflow: hidden;
}
.ngm-foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 26px;
  padding-bottom: 24px;
}
.ngm-footer .ngm-name {
  color: #fff;
}
.ngm-footer h4 {
  color: #fff;
  margin: 0 0 12px;
  font-size: 15px;
}
.ngm-footer a {
  color: #cfe3e5;
  text-decoration: none;
  display: block;
  margin: 0 0 8px;
  font-size: 14px;
}
.ngm-footer a:hover {
  color: #ffd968;
}
.ngm-footer a.ngm-inline {
  display: inline;
  margin: 0;
}
.ngm-footer p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 8px;
}
.ngm-foot-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 14px 0;
  text-align: center;
  font-size: 13px;
  color: #9fc0c3;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .ngm-nav {
    order: 3;
    width: 100%;
    gap: 14px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  .ngm-nav a {
    white-space: nowrap;
    font-size: 13.5px;
  }
  .ngm-bank-grid {
    grid-template-columns: 1fr;
  }
  .ngm-foot-grid {
    grid-template-columns: 1fr;
  }
  .wc-block-checkout,
  .woocommerce form.checkout {
    padding: 18px;
  }
}
@media (max-width: 680px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .woocommerce ul.products li.product {
    padding: 10px 10px 12px;
  }
  .ngm-hero {
    padding: 24px 20px;
  }
  .ngm-hero h1 {
    font-size: 27px;
  }
  .ngm-topbar {
    font-size: 10px;
    letter-spacing: 1px;
  }
}

/* ---------- Classic checkout (ng-classic-checkout custom layout) ----------
   The custom checkout markup ships with NO stylesheet of its own, which is
   why labels and amounts ran together ("SubtotalRs1,999.00"). These rules
   give it the intended two-column professional layout. */
.ng-classic-checkout .ng-co-grid {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.ng-classic-checkout .ng-co-left,
.ng-classic-checkout .ng-co-right {
  flex: 1 1 0;
  min-width: 0;
}
.ng-classic-checkout .ng-co-card {
  background: #fff;
  border: 1px solid #e3e9e9;
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 20px;
  box-shadow: 0 3px 14px rgba(11, 59, 64, 0.06);
}
.ng-classic-checkout .ng-co-title {
  color: #0b3b40;
  font-size: 19px;
  margin: 0 0 4px;
}
.ng-classic-checkout .ng-co-sub {
  color: #5a6d6d;
  font-size: 14px;
  margin: 0 0 16px;
}
.ng-classic-checkout .woocommerce-billing-fields h3 {
  color: #0b3b40;
  font-size: 17px;
}

/* Order summary items: thumbnail + name/qty + right-aligned price. */
.ng-classic-checkout .ng-co-item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed #e3e9e9;
}
.ng-classic-checkout .ng-co-item:last-child {
  border-bottom: 0;
}
.ng-classic-checkout .ng-co-item-img {
  flex-shrink: 0;
}
.ng-classic-checkout .ng-co-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.ng-classic-checkout .ng-co-item-info {
  flex: 1;
  min-width: 0;
}
.ng-classic-checkout .ng-co-item-name a {
  font-weight: 700;
  color: #0b3b40;
  text-decoration: none;
}
.ng-classic-checkout .ng-co-item-qty {
  color: #5a6d6d;
  margin-left: 6px;
}
.ng-classic-checkout .ng-co-item-price {
  font-weight: 700;
  color: #0b3b40;
  white-space: nowrap;
}

/* Shipping option: dot + name/desc column + right-aligned price. */
.ng-classic-checkout .ng-ship-option {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #eef6f6;
  border: 1.5px solid #0d7d8c;
  border-radius: 12px;
  padding: 13px 15px;
}
.ng-classic-checkout .ng-ship-radio-dot {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid #0d7d8c;
  background: #0d7d8c;
  box-shadow: inset 0 0 0 3px #fff;
}
.ng-classic-checkout .ng-ship-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ng-classic-checkout .ng-ship-name {
  font-weight: 700;
  color: #0b3b40;
}
.ng-classic-checkout .ng-ship-desc {
  font-size: 13px;
  color: #5a6d6d;
}
.ng-classic-checkout .ng-ship-price {
  font-weight: 700;
  color: #0b3b40;
  white-space: nowrap;
}

/* Totals: proper two-column rows, label left, amount right. */
.ng-classic-checkout #ng-order-totals {
  margin-top: 20px;
  background: #f7fafa;
  border: 1px solid #e3e9e9;
  border-radius: 14px;
  padding: 8px 18px;
}
.ng-classic-checkout .ng-total-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  color: #33484a;
}
.ng-classic-checkout .ng-total-row + .ng-total-row {
  border-top: 1px dashed #e3e9e9;
}
.ng-classic-checkout .ng-total-row .amount {
  font-weight: 700;
  color: #0b3b40;
  white-space: nowrap;
}
.ng-classic-checkout .ng-total-row.ng-grand-total {
  border-top: 2px solid #c9a227;
  margin-top: 6px;
  padding-top: 12px;
  font-size: 18px;
}
.ng-classic-checkout .ng-total-row.ng-grand-total span:first-child {
  font-weight: 700;
  color: #0b3b40;
}

/* Payment box in brand teal tint (overrides WooCommerce's lavender). */
.woocommerce form.checkout #payment {
  background: #eef6f6;
  border-radius: 14px;
}
.woocommerce form.checkout #payment div.payment_box {
  background: #fff;
  border: 1px solid #e3e9e9;
  color: #33484a;
}
.ng-classic-checkout #place_order {
  width: 100%;
}

@media (max-width: 860px) {
  .ng-classic-checkout .ng-co-grid {
    flex-direction: column;
  }
  .ng-classic-checkout .ng-co-left,
  .ng-classic-checkout .ng-co-right {
    width: 100%;
  }
  .ng-classic-checkout .ng-co-card {
    padding: 16px;
  }
}

/* ---------- v1.0.4 - Professional checkout like Akash's reference ----------
   Shopify-style clean form: section headings, placeholder-style fields,
   two-per-row (First|Last, Country|Postcode), no * clutter, calm cards.
   Functional behaviour is untouched: field names, IDs, validation and
   shipping calculation all stay exactly as WooCommerce renders them.
   Labels are visually hidden but kept in the DOM for screen readers. */
.ng-classic-checkout form.checkout {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
.ng-classic-checkout .ng-co-card {
  background: #fff;
  border: 1px solid #e6ecec;
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 6px 24px rgba(11, 59, 64, 0.07);
}
.ng-classic-checkout .ng-co-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: #0b3b40;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ng-classic-checkout .ng-co-title::before {
  content: "";
  width: 6px;
  height: 22px;
  flex-shrink: 0;
  background: #c9a227;
  border-radius: 99px;
}
.ng-classic-checkout .ng-co-sub {
  color: #6b7f80;
  font-size: 14px;
  margin: 0 0 18px;
}
/* Reference-style section headings inside the billing card. */
.ng-classic-checkout .ngm-form-section {
  font-size: 17px;
  font-weight: 800;
  color: #0b3b40;
  margin: 22px 0 14px;
}
.ng-classic-checkout .ngm-form-section:first-child {
  margin-top: 0;
}
/* Field rows: v1.0.5 grid (flex pairing failed live in v1.0.4 - Country
   and Postcode stacked instead of pairing). Grid forces the pairing:
   two columns, full-width fields span both, First|Last and
   Country|Postcode span one each and land on the same row. */
.ng-classic-checkout .woocommerce-billing-fields__field-wrapper,
.ng-classic-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 14px;
  row-gap: 14px;
}
.ng-classic-checkout .woocommerce-billing-fields__field-wrapper .form-row,
.ng-classic-checkout .woocommerce-shipping-fields__field-wrapper .form-row {
  grid-column: span 2;
  width: auto !important;
  margin: 0;
  padding: 0;
  float: none !important;
}
.ng-classic-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
.ng-classic-checkout .woocommerce-shipping-fields__field-wrapper .form-row-first,
.ng-classic-checkout .woocommerce-billing-fields__field-wrapper .form-row-last,
.ng-classic-checkout .woocommerce-shipping-fields__field-wrapper .form-row-last,
.ng-classic-checkout #billing_first_name_field,
.ng-classic-checkout #shipping_first_name_field,
.ng-classic-checkout #billing_last_name_field,
.ng-classic-checkout #shipping_last_name_field,
.ng-classic-checkout #billing_country_field,
.ng-classic-checkout #shipping_country_field,
.ng-classic-checkout #billing_postcode_field,
.ng-classic-checkout #shipping_postcode_field {
  grid-column: span 1 !important;
  width: auto !important;
}
.ng-classic-checkout #billing_state_field,
.ng-classic-checkout #shipping_state_field {
  grid-column: span 2 !important;
}
/* Visually hidden labels (kept for screen readers); placeholders carry
   the field names, exactly like the reference. * marks are hidden too -
   validation still enforces required fields on submit. */
.ng-classic-checkout .woocommerce-billing-fields__field-wrapper .form-row label,
.ng-classic-checkout .woocommerce-shipping-fields__field-wrapper .form-row label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ng-classic-checkout abbr.required {
  display: none;
}
/* Clean inputs like the reference: light grey border, soft radius. */
.ng-classic-checkout .woocommerce-billing-fields__field-wrapper input.input-text,
.ng-classic-checkout .woocommerce-shipping-fields__field-wrapper input.input-text,
.ng-classic-checkout .woocommerce-billing-fields__field-wrapper select,
.ng-classic-checkout .woocommerce-shipping-fields__field-wrapper select,
.ng-classic-checkout .woocommerce-billing-fields__field-wrapper textarea,
.ng-classic-checkout .woocommerce-shipping-fields__field-wrapper textarea,
.ng-classic-checkout #order_comments_field textarea {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  padding: 12px 14px;
  border: 1.5px solid #d9d9d9;
  border-radius: 8px;
  background: #fff;
  color: #0b3b40;
  font-size: 15px;
  line-height: 1.4;
}
.ng-classic-checkout .woocommerce-billing-fields__field-wrapper textarea,
.ng-classic-checkout .woocommerce-shipping-fields__field-wrapper textarea,
.ng-classic-checkout #order_comments_field textarea {
  height: auto;
  min-height: 84px;
  resize: vertical;
}
.ng-classic-checkout .woocommerce-billing-fields__field-wrapper select,
.ng-classic-checkout .woocommerce-shipping-fields__field-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6d6d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.ng-classic-checkout .woocommerce-billing-fields__field-wrapper input.input-text:focus,
.ng-classic-checkout .woocommerce-shipping-fields__field-wrapper input.input-text:focus,
.ng-classic-checkout .woocommerce-billing-fields__field-wrapper select:focus,
.ng-classic-checkout .woocommerce-shipping-fields__field-wrapper select:focus,
.ng-classic-checkout .woocommerce-billing-fields__field-wrapper textarea:focus,
.ng-classic-checkout .woocommerce-shipping-fields__field-wrapper textarea:focus {
  border-color: #0d7d8c;
  box-shadow: 0 0 0 3px rgba(13, 125, 140, 0.14);
  outline: none;
}
.ng-classic-checkout .woocommerce-billing-fields__field-wrapper input.input-text::placeholder,
.ng-classic-checkout .woocommerce-shipping-fields__field-wrapper input.input-text::placeholder {
  color: #8a9a9b;
}
.ng-classic-checkout .woocommerce-invalid input.input-text,
.ng-classic-checkout .woocommerce-invalid select {
  border-color: #d92d20;
  background: #fff5f5;
}
/* Ship-to-different-address as a calm card, not a floating checkbox. */
.ng-classic-checkout #ship-to-different-address {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f7fafa;
  border: 1px solid #e3e9e9;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 4px 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: #0b3b40;
}
.ng-classic-checkout #ship-to-different-address input {
  width: 18px;
  height: 18px;
  accent-color: #0d7d8c;
  margin: 0;
}
/* Order summary: larger thumb, qty as a pill, price bold. */
.ng-classic-checkout .ng-co-thumb {
  width: 72px;
  height: 72px;
  border: 1px solid #eef2f2;
}
.ng-classic-checkout .ng-co-item-name {
  font-size: 16px;
}
.ng-classic-checkout .ng-co-item-qty {
  display: inline-block;
  background: #eef6f6;
  color: #0d7d8c;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  margin-left: 8px;
}
.ng-classic-checkout .ng-co-item-price {
  font-size: 16px;
}
/* Shipping card: clear selected state. */
.ng-classic-checkout .ng-ship-option {
  padding: 16px;
  border-width: 2px;
}
.ng-classic-checkout .ng-ship-price {
  font-size: 17px;
}
/* Totals: roomier, grand total stronger. */
.ng-classic-checkout #ng-order-totals {
  padding: 10px 20px;
}
.ng-classic-checkout .ng-total-row {
  padding: 10px 0;
  font-size: 15px;
}
.ng-classic-checkout .ng-total-row.ng-grand-total {
  border-top-width: 3px;
  font-size: 20px;
  padding-top: 14px;
}
/* Payment methods as clean cards. */
.ng-classic-checkout #payment ul.payment_methods li {
  border: 1px solid #e3e9e9;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #fff;
}
.ng-classic-checkout #payment ul.payment_methods li input {
  accent-color: #0d7d8c;
}
/* Place Order: big, premium, full width. */
.ng-classic-checkout #place_order {
  height: 56px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.3px;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(13, 125, 140, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ng-classic-checkout #place_order:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(13, 125, 140, 0.34);
}
/* Trust strip under Place Order (inserted by JS, idempotent). */
.ng-classic-checkout .ngm-trust {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #5a6d6d;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.ng-classic-checkout .ngm-trust span {
  color: #c9a227;
}
/* Coupon toggle/form as a dashed card. */
.ng-classic-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  border: 1.5px dashed #cde0e0;
  background: #f7fafa;
}
@media (max-width: 600px) {
  .ng-classic-checkout .woocommerce-billing-fields__field-wrapper,
  .ng-classic-checkout .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr !important;
  }
  .ng-classic-checkout .woocommerce-billing-fields__field-wrapper .form-row,
  .ng-classic-checkout .woocommerce-shipping-fields__field-wrapper .form-row {
    grid-column: span 1 !important;
  }
  .ng-classic-checkout .woocommerce-billing-fields__field-wrapper input.input-text,
  .ng-classic-checkout .woocommerce-shipping-fields__field-wrapper input.input-text,
  .ng-classic-checkout .woocommerce-billing-fields__field-wrapper select,
  .ng-classic-checkout .woocommerce-shipping-fields__field-wrapper select {
    font-size: 16px;
  }
}

/* ---------- v1.0.8 - Professional MOBILE checkout (Akash's screenshot
   2026-10-25 22:32) ----------
   What was wrong on his phone: fields stayed TWO per row on mobile, so
   placeholders were cut off ("House number and", "Apartmen"), inputs
   were cramped, the two section headings ("Contact information" and
   "Shipping address") sat squashed on ONE line, and empty required
   fields showed a harsh red border on a pink wash. Root causes:
   (a) the section headings are inserted INSIDE the grid wrapper, so
   without a full-row span they become ordinary grid items; (b) the
   theme's flex pairing (.form-row-first/.form-row-last, min-width
   170px) fights the plugin grid on narrow screens.
   Fix, display-only (no field, ID, value, validation or totals
   change): headings ALWAYS span the full row; on mobile (<=768px)
   every checkout field is ONE full-width row, tall enough to tap,
   16px text so phones do not auto-zoom; invalid fields keep a red
   border but lose the pink wash. The same rules are repeated without
   the .ng-classic-checkout ancestor so they hold even if the theme
   renders the checkout wrapper differently. */
.ng-classic-checkout .ngm-form-section,
.woocommerce-checkout .ngm-form-section {
  grid-column: 1 / -1 !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  display: block !important;
  float: none !important;
}
.ng-classic-checkout .woocommerce-invalid input.input-text,
.ng-classic-checkout .woocommerce-invalid select,
.ng-classic-checkout .woocommerce-invalid textarea,
.woocommerce-checkout .woocommerce-invalid input.input-text,
.woocommerce-checkout .woocommerce-invalid select {
  background: #fff !important;
  box-shadow: none !important;
}
@media (max-width: 768px) {
  .ng-classic-checkout .woocommerce-billing-fields__field-wrapper,
  .ng-classic-checkout .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 12px !important;
  }
  .ng-classic-checkout .woocommerce-billing-fields__field-wrapper .form-row,
  .ng-classic-checkout .woocommerce-shipping-fields__field-wrapper .form-row,
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row,
  .ng-classic-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
  .ng-classic-checkout .woocommerce-billing-fields__field-wrapper .form-row-last,
  .ng-classic-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide,
  .ng-classic-checkout .woocommerce-shipping-fields__field-wrapper .form-row-first,
  .ng-classic-checkout .woocommerce-shipping-fields__field-wrapper .form-row-last,
  .ng-classic-checkout .woocommerce-shipping-fields__field-wrapper .form-row-wide,
  .ng-classic-checkout #billing_first_name_field,
  .ng-classic-checkout #billing_last_name_field,
  .ng-classic-checkout #billing_country_field,
  .ng-classic-checkout #billing_postcode_field,
  .ng-classic-checkout #billing_state_field,
  .ng-classic-checkout #shipping_first_name_field,
  .ng-classic-checkout #shipping_last_name_field,
  .ng-classic-checkout #shipping_country_field,
  .ng-classic-checkout #shipping_postcode_field,
  .ng-classic-checkout #shipping_state_field {
    grid-column: span 1 !important;
    width: 100% !important;
    flex: none !important;
    float: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .ng-classic-checkout .ng-co-card {
    padding: 16px !important;
    border-radius: 14px !important;
  }
  .ng-classic-checkout .ngm-form-section {
    font-size: 16px !important;
    margin: 18px 0 12px !important;
  }
  .ng-classic-checkout .woocommerce-billing-fields__field-wrapper input.input-text,
  .ng-classic-checkout .woocommerce-shipping-fields__field-wrapper input.input-text,
  .ng-classic-checkout .woocommerce-billing-fields__field-wrapper select,
  .ng-classic-checkout .woocommerce-shipping-fields__field-wrapper select,
  .ng-classic-checkout .woocommerce-billing-fields__field-wrapper textarea,
  .ng-classic-checkout .woocommerce-shipping-fields__field-wrapper textarea,
  .ng-classic-checkout #order_comments_field textarea {
    height: 52px !important;
    font-size: 16px !important;
    padding: 13px 14px !important;
  }
  .ng-classic-checkout .woocommerce-billing-fields__field-wrapper textarea,
  .ng-classic-checkout .woocommerce-shipping-fields__field-wrapper textarea,
  .ng-classic-checkout #order_comments_field textarea {
    height: auto !important;
    min-height: 84px !important;
  }
  .ng-classic-checkout #ship-to-different-address {
    width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important;
  }
  .ng-classic-checkout #place_order {
    width: 100% !important;
  }
}