/* ===== wc-pages.css ===== */
/* ==========================================================================
   VAPORS DUBAI — WooCommerce transactional pages
   Cart (body.woocommerce-cart) / Checkout (body.woocommerce-checkout) /
   My Account (body.woocommerce-account). Scoped so shop/product rules stay
   untouched. Shares homepage.css :root tokens.
   ========================================================================== */

/* ==========================================================================
   1. Shared — breadcrumbs, notices, form controls
   ========================================================================== */
body.woocommerce-cart .woocommerce-breadcrumb,
body.woocommerce-checkout .woocommerce-breadcrumb,
body.woocommerce-account .woocommerce-breadcrumb {
  font-family: var(--vd-font-body, "Inter", sans-serif);
  font-size: 13px;
  color: var(--vd-muted);
  margin-bottom: 20px;
}
body.woocommerce-cart .woocommerce-breadcrumb a,
body.woocommerce-checkout .woocommerce-breadcrumb a,
body.woocommerce-account .woocommerce-breadcrumb a {
  color: #6C4DF6;
  text-decoration: none;
}
body.woocommerce-cart .woocommerce-breadcrumb a:hover,
body.woocommerce-checkout .woocommerce-breadcrumb a:hover,
body.woocommerce-account .woocommerce-breadcrumb a:hover { color: #8B5CF6; }

/* Notices — tinted cards in the design palette. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: 12px;
  border: 1px solid;
  font-family: var(--vd-font-body, "Inter", sans-serif);
  font-size: 14.5px;
  padding: 13px 18px;
  box-shadow: 0 8px 22px rgba(13, 16, 30, .05);
}
.woocommerce-message {
  background: rgba(16, 185, 129, .08);
  border-color: rgba(16, 185, 129, .32);
  color: #065F46;
}
.woocommerce-info {
  background: rgba(108, 77, 237, .07);
  border-color: rgba(108, 77, 237, .28);
  color: var(--vd-ink);
}
.woocommerce-error {
  background: rgba(255, 59, 92, .07);
  border-color: rgba(255, 59, 92, .32);
  color: #9F1239;
}
.woocommerce-message::before { color: #10B981; }
.woocommerce-info::before { color: #6C4DF6; }
.woocommerce-error::before { color: #FF3B5C; }

/* Small buttons inside notices (View cart / Return to shop). */
.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-info a.button,
.woocommerce a.button.wc-backward {
  background: #fff !important;
  color: #6C4DF6 !important;
  border: 1.5px solid rgba(108, 77, 237, .55) !important;
  border-radius: 999px;
  padding: 7px 18px !important;
  font-family: var(--vd-font-h, "Sora", sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: none;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.woocommerce .woocommerce-message a.button:hover,
.woocommerce .woocommerce-info a.button:hover,
.woocommerce a.button.wc-backward:hover {
  background: #6C4DF6 !important;
  color: #fff !important;
}

/* Form controls (checkout fields, login, coupon). */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1px solid var(--vd-line, #E7E9EF);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: var(--vd-font-body, "Inter", sans-serif);
  font-size: 15px;
  color: var(--vd-ink);
  background: #fff;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: #6C4DF6;
  box-shadow: 0 0 0 3px rgba(108, 77, 237, .18);
  outline: none;
}
.woocommerce form .form-row label {
  font-family: var(--vd-font-body, "Inter", sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vd-ink);
  margin-bottom: 5px;
}
.woocommerce form .form-row .required { color: #FF3B5C; }
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"] { accent-color: #6C4DF6; }

/* Select2 (country/state dropdowns on checkout). */
.select2-container--default .select2-selection--single {
  height: 44px;
  border: 1px solid var(--vd-line, #E7E9EF);
  border-radius: 10px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 42px;
  font-family: var(--vd-font-body, "Inter", sans-serif);
  font-size: 15px;
  color: var(--vd-ink);
  padding-left: 14px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }

/* ==========================================================================
   2. Cart (body.woocommerce-cart)
   ========================================================================== */
/* !important: Astra's woocommerce-grid rules (.woocommerce-js .woocommerce
   table.shop_table { border-radius: 0 }) out-specify a plain body-scoped
   selector — same pattern the footer uses against Astra customizer CSS. */
body.woocommerce-cart table.cart,
body.woocommerce-cart .cart-collaterals .cart_totals {
  background: #fff !important;
}
body.woocommerce-cart table.cart {
  border: 1px solid var(--vd-line, #E7E9EF) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(13, 16, 30, .05) !important;
}
body.woocommerce-cart table.cart thead th {
  background: linear-gradient(180deg, rgba(108, 77, 237, .12), rgba(168, 85, 247, .07));
  font-family: var(--vd-font-h, "Sora", sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #5B3FD9;
  padding: 13px 16px;
  border-bottom: 1px solid var(--vd-line, #E7E9EF);
}
body.woocommerce-cart table.cart td {
  padding: 15px 16px;
  border-top: 1px solid #F0F1F5;
  vertical-align: middle;
}
body.woocommerce-cart table.cart tbody tr:hover td { background: #FAFAFD; }
body.woocommerce-cart .product-thumbnail img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--vd-line, #E7E9EF);
}
body.woocommerce-cart .product-name a {
  font-family: var(--vd-font-h, "Sora", sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--vd-ink);
  text-decoration: none;
}
body.woocommerce-cart .product-name a:hover { color: #6C4DF6; }
body.woocommerce-cart .cart ins { color: var(--vd-sale, #FF3B5C) !important; text-decoration: none; font-weight: 700; }
body.woocommerce-cart .product-subtotal strong {
  font-family: var(--vd-font-h, "Sora", sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--vd-ink);
}
body.woocommerce-cart .quantity .qty {
  width: 68px;
  border: 1px solid var(--vd-line, #E7E9EF);
  border-radius: 999px;
  padding: 7px 6px;
  text-align: center;
  font-family: var(--vd-font-body, "Inter", sans-serif);
  font-size: 14.5px;
  color: var(--vd-ink);
  background: #fff;
}
body.woocommerce-cart .quantity .qty:focus { border-color: #6C4DF6; outline: none; }
body.woocommerce-cart a.remove {
  color: #9CA3AF;
  font-size: 22px;
  line-height: 1;
  border: 0 !important;
  transition: color .15s ease;
}
body.woocommerce-cart a.remove:hover { color: #FF3B5C; }

/* Totals card. */
body.woocommerce-cart .cart_totals {
  border: 1px solid var(--vd-line, #E7E9EF) !important;
  border-radius: 16px !important;
  padding: 22px 26px !important;
  margin-top: 26px !important;
  box-shadow: 0 10px 30px rgba(13, 16, 30, .05) !important;
}
body.woocommerce-cart .cart_totals h2 {
  font-family: var(--vd-font-h, "Sora", sans-serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--vd-ink);
  margin: 0 0 12px;
}
body.woocommerce-cart .cart_totals table td {
  padding: 9px 0;
  border: 0;
  font-family: var(--vd-font-body, "Inter", sans-serif);
  font-size: 14.5px;
}
body.woocommerce-cart .cart_totals tr.shipping td { border-top: 1px solid #F0F1F5; }
body.woocommerce-cart .cart_totals .order-total strong { color: #6C4DF6; }

/* Coupon row. */
body.woocommerce-cart .coupon { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Woo's coupon field sits outside .form-row, so the shared input rule misses
   it — style it explicitly (else it reverts to the square gray default). */
body.woocommerce-cart #coupon_code {
  flex: 1;
  min-width: 160px;
  border: 1px solid var(--vd-line, #E7E9EF) !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 15px;
}
body.woocommerce-cart .coupon .button {
  background: #fff !important;
  color: #6C4DF6 !important;
  border: 1.5px solid rgba(108, 77, 237, .55) !important;
  border-radius: 999px;
  padding: 10px 20px !important;
  font-family: var(--vd-font-h, "Sora", sans-serif);
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
  transition: background .18s ease, color .18s ease;
}
body.woocommerce-cart .coupon .button:hover { background: #6C4DF6 !important; color: #fff !important; }

/* Proceed to checkout — the gradient pill. */
body.woocommerce-cart .wc-proceed-to-checkout { padding: 4px 0 0 !important; }
body.woocommerce-cart a.checkout-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 15px !important;
  margin-top: 16px;
  background: linear-gradient(180deg, #7C3AED, #6D28D9) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px;
  font-family: var(--vd-font-h, "Sora", sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 12px 26px rgba(109, 40, 217, .32);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
body.woocommerce-cart a.checkout-button:hover {
  background: linear-gradient(180deg, #8B5CF6, #7C3AED) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(109, 40, 217, .42);
  color: #fff !important;
}

/* Cross-sells. */
body.woocommerce-cart .cart-collaterals h2 {
  font-family: var(--vd-font-h, "Sora", sans-serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--vd-ink);
  margin: 36px 0 14px;
}

/* Empty cart. */
body.woocommerce-cart .woocommerce-info { text-align: center; padding: 28px 20px; font-size: 15.5px; }
body.woocommerce-cart .woocommerce-info .button { margin-top: 12px; }

/* ==========================================================================
   3. Checkout (body.woocommerce-checkout)
   ========================================================================== */
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3,
body.woocommerce-checkout #order_review_heading {
  font-family: var(--vd-font-h, "Sora", sans-serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--vd-ink);
  margin: 26px 0 14px;
}
body.woocommerce-checkout #order_review_heading { margin-top: 0; }

body.woocommerce-checkout #order_review {
  background: #fff !important;
  border: 1px solid var(--vd-line, #E7E9EF) !important;
  border-radius: 16px !important;
  padding: 22px 26px !important;
  box-shadow: 0 10px 30px rgba(13, 16, 30, .05) !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  padding: 12px 0 !important;
  border: 0 !important;
  font-family: var(--vd-font-body, "Inter", sans-serif);
  font-size: 14.5px;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr th { text-align: left !important; font-weight: 600 !important; color: var(--vd-ink) !important; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart-subtotal th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart-subtotal td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.shipping th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.shipping td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total td { border-top: 1px solid #F0F1F5 !important; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total td { font-weight: 700; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total strong { color: #6C4DF6; }

/* Place order — the gradient pill. */
body.woocommerce-checkout #place_order {
  display: block;
  width: 100%;
  padding: 15px !important;
  margin-top: 18px;
  background: linear-gradient(180deg, #7C3AED, #6D28D9) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px;
  font-family: var(--vd-font-h, "Sora", sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 12px 26px rgba(109, 40, 217, .32);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
body.woocommerce-checkout #place_order:hover {
  background: linear-gradient(180deg, #8B5CF6, #7C3AED) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(109, 40, 217, .42);
}

/* Payment methods. */
body.woocommerce-checkout .wc_payment_methods { list-style: none; padding: 0; margin: 10px 0 0; }
body.woocommerce-checkout .wc_payment_methods li {
  border: 1px solid var(--vd-line, #E7E9EF);
  border-radius: 12px;
  padding: 13px 15px;
  margin-bottom: 10px;
}
body.woocommerce-checkout .wc_payment_methods li.selected {
  border-color: rgba(108, 77, 237, .45);
  box-shadow: 0 0 0 3px rgba(108, 77, 237, .12);
}
body.woocommerce-checkout .wc_payment_methods label {
  font-family: var(--vd-font-h, "Sora", sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--vd-ink);
}
body.woocommerce-checkout .payment_box {
  background: #F6F7FB !important;
  border-radius: 10px;
  padding: 12px 14px !important;
  margin-top: 10px !important;
  font-family: var(--vd-font-body, "Inter", sans-serif);
  font-size: 14px;
  color: var(--vd-muted);
}
body.woocommerce-checkout .payment_box::before { border-bottom-color: #F6F7FB !important; }
body.woocommerce-checkout #ship-to-different-address {
  font-family: var(--vd-font-body, "Inter", sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--vd-ink);
  margin: 14px 0;
}

/* ==========================================================================
   4. My Account (body.woocommerce-account)
   ========================================================================== */
body.woocommerce-account .woocommerce-MyAccount-navigation {
  background: #fff;
  border: 1px solid var(--vd-line, #E7E9EF);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(13, 16, 30, .05);
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation ul li { margin: 0; border-bottom: 1px solid #F0F1F5; }
.woocommerce-MyAccount-navigation ul li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 13px 18px;
  font-family: var(--vd-font-body, "Inter", sans-serif);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--vd-ink-2, #161A26);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.woocommerce-MyAccount-navigation ul li a:hover {
  color: #6C4DF6;
  background: rgba(108, 77, 237, .05);
}
.woocommerce-MyAccount-navigation ul li.is-active a {
  background: rgba(108, 77, 237, .09);
  color: #6C4DF6;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #6C4DF6;
}

body.woocommerce-account .woocommerce-MyAccount-content {
  background: #fff;
  border: 1px solid var(--vd-line, #E7E9EF);
  border-radius: 16px;
  padding: 26px 28px;
  box-shadow: 0 10px 30px rgba(13, 16, 30, .05);
}
.woocommerce-MyAccount-content h2 {
  font-family: var(--vd-font-h, "Sora", sans-serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--vd-ink);
  margin: 0 0 16px;
}
.woocommerce-MyAccount-content h2:first-child { margin-top: 0; }

/* Orders table. */
.woocommerce-MyAccount-orders thead th,
.woocommerce-orders-table th {
  background: linear-gradient(180deg, rgba(108, 77, 237, .12), rgba(168, 85, 247, .07));
  font-family: var(--vd-font-h, "Sora", sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #5B3FD9;
  padding: 12px 14px;
  border-bottom: 1px solid var(--vd-line, #E7E9EF);
  text-align: left;
}
.woocommerce-MyAccount-orders tbody td,
.woocommerce-orders-table td {
  padding: 12px 14px;
  border-top: 1px solid #F0F1F5;
  font-family: var(--vd-font-body, "Inter", sans-serif);
  font-size: 14.5px;
}
.woocommerce-MyAccount-orders .order-status span,
td.woocommerce-orders-table__column-order-status span {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(108, 77, 237, .1);
  color: #6C4DF6;
  font-family: var(--vd-font-h, "Sora", sans-serif);
  font-size: 12px;
  font-weight: 700;
}

/* Pagination. */
.woocommerce-pagination ul.page-numbers { list-style: none; display: flex; gap: 8px; margin: 22px 0 0; padding: 0; flex-wrap: wrap; }
.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--vd-line, #E7E9EF);
  border-radius: 10px;
  padding: 7px 13px;
  font-family: var(--vd-font-body, "Inter", sans-serif);
  font-size: 14px;
  color: var(--vd-ink);
  text-decoration: none;
  background: #fff;
  transition: border-color .15s ease, color .15s ease;
}
.woocommerce-pagination .page-numbers li a:hover { border-color: rgba(108, 77, 237, .5); color: #6C4DF6; }
.woocommerce-pagination .page-numbers li span.current {
  background: rgba(108, 77, 237, .1);
  border-color: rgba(108, 77, 237, .5);
  color: #6C4DF6;
  font-weight: 600;
}

/* Addresses + small account buttons. */
body.woocommerce-account .woocommerce-Address {
  border: 1px solid var(--vd-line, #E7E9EF);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.woocommerce-Address h2, .woocommerce-Address header {
  font-family: var(--vd-font-h, "Sora", sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--vd-ink);
  margin: 0 0 8px;
}
body.woocommerce-account .woocommerce-Button.button,
body.woocommerce-account a.button.edit {
  background: #fff !important;
  color: #6C4DF6 !important;
  border: 1.5px solid rgba(108, 77, 237, .55) !important;
  border-radius: 999px;
  padding: 6px 16px !important;
  font-family: var(--vd-font-h, "Sora", sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: none;
  transition: background .18s ease, color .18s ease;
}
body.woocommerce-account .woocommerce-Button.button:hover,
body.woocommerce-account a.button.edit:hover { background: #6C4DF6 !important; color: #fff !important; }

/* Login form (logged out) / lost password. */
body.woocommerce-account .woocommerce-form-login {
  max-width: 480px;
  margin: 30px auto;
  background: #fff;
  border: 1px solid var(--vd-line, #E7E9EF);
  border-radius: 18px;
  padding: 28px 30px;
  box-shadow: 0 14px 36px rgba(13, 16, 30, .07);
}
.woocommerce-form-login .form-row { margin-bottom: 14px; }
.woocommerce-form-login .form-row:last-of-type { margin-bottom: 10px; }
.woocommerce-form-login__submit {
  width: 100%;
  padding: 13px !important;
  background: linear-gradient(180deg, #7C3AED, #6D28D9) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px;
  font-family: var(--vd-font-h, "Sora", sans-serif);
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(109, 40, 217, .32);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.woocommerce-form-login__submit:hover {
  background: linear-gradient(180deg, #8B5CF6, #7C3AED) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(109, 40, 217, .42);
}
.woocommerce-form-login #rememberme { margin-right: 6px; }
body.woocommerce-account .woocommerce-Lost_Password { display: block; text-align: right; font-size: 13.5px; margin-top: 12px; }
body.woocommerce-account .woocommerce-Lost_Password a { color: #6C4DF6; text-decoration: none; }
body.woocommerce-account .woocommerce-Lost_Password a:hover { color: #8B5CF6; }

/* ==========================================================================
   5. Responsive
   ========================================================================== */
@media (max-width: 767px) {
  body.woocommerce-cart table.cart td,
  body.woocommerce-cart table.cart thead th { padding: 11px 10px; }
  body.woocommerce-cart .cart_totals,
  body.woocommerce-checkout #order_review,
  body.woocommerce-account .woocommerce-MyAccount-content { padding: 18px 16px; }
  body.woocommerce-account .woocommerce-form-login { padding: 22px 18px; }
}