/* WooCommerce cart and checkout, dressed in the storefront's own tokens.
   Loaded only on shop pages, after style.css -- every variable used here is
   defined there, so the two can never disagree about what "gold" means. */

.wcpage{padding-block:28px 64px; min-height:60vh}
.wcpage .wrap{max-width:1080px}

/* ---------- headings ---------- */
.wcpage h1,.wcpage h2,.wcpage h3{
  font-family:var(--ar); font-weight:700; color:var(--ink); line-height:1.3}
.wcpage h1{font-size:26px; margin:0 0 6px}
.wcpage h3{font-size:16px; margin:26px 0 12px;
  padding-block-end:10px; border-block-end:1px solid var(--line)}

/* ---------- the order table ---------- */
.wcpage table.shop_table{
  width:100%; border-collapse:collapse; margin-block:12px 22px;
  border:1px solid var(--line)}
.wcpage table.shop_table th,
.wcpage table.shop_table td{
  padding:13px 14px; text-align:start; font-size:14px;
  border-block-end:1px solid var(--line); vertical-align:middle}
.wcpage table.shop_table th{
  font-size:11px; font-weight:800; letter-spacing:.12em;
  color:var(--muted); text-transform:uppercase; background:#FAFAFA}
.wcpage table.shop_table tfoot th,
.wcpage table.shop_table tfoot td{font-weight:700; color:var(--ink)}
.wcpage table.shop_table .order-total td,
.wcpage table.shop_table .order-total th{
  font-size:17px; border-block-end:0; background:#FAFAFA}
.wcpage .woocommerce-Price-amount{font-family:var(--lat); direction:ltr;
  display:inline-block; font-variant-numeric:tabular-nums}
.wcpage td.product-thumbnail img{width:56px; height:56px; object-fit:cover}

/* ---------- form fields: same shape as the order sheet ---------- */
.wcpage .form-row{margin-block-end:15px; display:block}
.wcpage label{display:block; font-size:12px; font-weight:700;
  letter-spacing:.04em; color:var(--ink-2); margin-block-end:6px}
.wcpage .required{color:var(--gold); text-decoration:none}
.wcpage input[type=text],.wcpage input[type=tel],.wcpage input[type=email],
.wcpage textarea,.wcpage select,.wcpage .select2-selection{
  width:100%; box-sizing:border-box; min-height:46px; padding:11px 13px;
  font-family:var(--ar); font-size:15px; color:var(--ink);
  background:var(--white); border:1px solid var(--line-2); border-radius:0;
  transition:border-color .18s}
.wcpage input:focus,.wcpage textarea:focus,.wcpage select:focus{
  outline:none; border-color:var(--ink)}
.wcpage input[type=tel]{direction:ltr; text-align:start}
.wcpage textarea{min-height:96px; resize:vertical}

/* Two columns on a comfortable screen, one on a phone. Checkout is the last
   place to make someone scroll past fields they have already filled in. */
@media (min-width:760px){
  .wcpage .woocommerce-billing-fields__field-wrapper{
    display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
  .wcpage #billing_address_1_field,.wcpage #billing_address_2_field,
  .wcpage #order_comments_field{grid-column:1 / -1}
  .wcpage .col2-set{display:grid; grid-template-columns:1fr 1fr; gap:0 34px}
  .wcpage .col2-set .col-1,.wcpage .col2-set .col-2{width:auto; float:none}
}

/* ---------- buttons ---------- */
.wcpage .button,.wcpage button.button,.wcpage input.button,
.wcpage #place_order{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:0 26px; border:0; border-radius:0; cursor:pointer;
  font-family:var(--ar); font-size:15px; font-weight:700; letter-spacing:.02em;
  background:var(--ink); color:var(--white); transition:background .18s}
.wcpage .button:hover,.wcpage #place_order:hover{background:#000}
.wcpage #place_order{width:100%; background:#25D366; color:#06331A;
  font-size:16px; min-height:56px}
.wcpage #place_order:hover{background:#1EBE5A}

/* ---------- payment box ---------- */
.wcpage .woocommerce-checkout-payment{
  margin-block-start:18px; border:1px solid var(--line); padding:16px}
.wcpage .wc_payment_methods{list-style:none; margin:0 0 14px; padding:0}
.wcpage .wc_payment_method label{font-size:15px; font-weight:700; display:inline}
.wcpage .payment_box{margin-block-start:8px; padding:12px 14px;
  background:#FAFAFA; font-size:13.5px; color:var(--ink-2); line-height:1.7}
.wcpage .payment_box p{margin:0}

/* ---------- notices ---------- */
.wcpage .woocommerce-message,.wcpage .woocommerce-info,
.wcpage .woocommerce-error{
  margin-block-end:18px; padding:13px 16px; font-size:14px; list-style:none;
  border-inline-start:3px solid var(--gold); background:#FAF7F1; color:var(--ink)}
.wcpage .woocommerce-error{border-inline-start-color:#C0392B; background:#FDF3F2}

/* ---------- the trust strip under the button ---------- */
.wcpage .cb-trust{display:flex; flex-wrap:wrap; gap:14px 22px;
  margin-block-start:16px; padding-block-start:16px;
  border-block-start:1px solid var(--line);
  font-size:12.5px; color:var(--muted)}
.wcpage .cb-trust span{display:inline-flex; align-items:center; gap:7px}
.wcpage .cb-trust svg{width:15px; height:15px; flex:none; color:var(--gold)}

/* The catalogue's floating WhatsApp button overlaps the place-order button on a
   phone, which is the one tap that must not be intercepted. */
@media (max-width:700px){ .wcpage ~ .fab, body.woocommerce-checkout .fab{display:none} }