/* =========================================================================
   THE ZINCO — PURCHASE JOURNEY
   Cart · Checkout · Account · Order received

   CONTRACT — rewritten 2026-09-07 after an editability audit.
   Every property the dashboard already owns was REMOVED from this file and
   set in the Customizer instead. What is left is only what the platform
   exposes no control for, and each block below names the gap it fills.
   No !important anywhere. No hard-coded brand colour where a theme variable
   exists — so a colour changed in the Customizer still reaches this file.

   Owned by the Customizer now — do NOT re-add any of it here:
     Colors → Border Color ............ every hairline on these pages
     Colors → Text / Link Color ....... body copy, links, prices
     Buttons .......................... colour, hover, radius, min-height
     Form Elements .................... field background, border, radius, height
     Typography ....................... every family, size and line-height
     WooCommerce → Cart Page .......... cart totals border / radius / padding
     WooCommerce → Checkout Page ...... order review border / radius / padding
     WooCommerce → Messages ........... notice text and background colours
     WooCommerce → Account Page ....... account navigation colours
     WooCommerce → Product Archives ... card type, card box, columns, colours
     WooCommerce → Single Product ..... title, price, button, gallery, tabs

   SCOPE — this file is enqueued on the cart, checkout, account and
   order-received pages ONLY (see functions.php). It must never reach the
   header, the shop archive or the single product page. An unscoped
   `.woocommerce ...` selector here lands on the header cart total of every
   shop page — that was the cause of the cart total changing colour when
   the shop or a product page was opened. Every selector below therefore
   starts with the page's own body class.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. PANEL SURFACES
   Blocksy exposes border, radius and padding for the cart totals and for
   the checkout order review, and those are set in the Customizer. What it
   exposes no control for is the panel BACKGROUND — the raised surface that
   separates the summary from the page. That, and the two panels Blocksy
   has no controls for at all (customer details, account content and the
   order-received summary), are the only reasons this block exists.
   ------------------------------------------------------------------------- */
body.woocommerce-cart .cart_totals,
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout #order_review,
body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-order-received .woocommerce-order {
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(10, 11, 12, .05);
}

/* Panels with no Customizer controls of their own get their frame here.
   The cart totals and the order review are deliberately absent — theirs
   come from Customizer → WooCommerce → Cart Page / Checkout Page. */
body.woocommerce-checkout #customer_details,
body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-order-received .woocommerce-order {
  border: 1px solid var(--theme-border-color);
  border-radius: 10px;
  padding: clamp(22px, 3vw, 34px);
}


/* -------------------------------------------------------------------------
   2. LINE-ITEM TABLES
   WooCommerce ships a bare table and neither it nor the theme offers any
   control over its density. Spacing and the header tint only — every
   colour is read from the palette, so the Customizer still governs them.
   ------------------------------------------------------------------------- */
body.woocommerce-cart table.shop_table,
body.woocommerce-checkout table.shop_table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

body.woocommerce-cart table.shop_table th,
body.woocommerce-checkout table.shop_table th {
  padding: 16px 18px;
  border: 0;
  text-align: start;
  background: color-mix(in srgb, var(--theme-palette-color-2) 6%, transparent);
}

body.woocommerce-cart table.shop_table td,
body.woocommerce-checkout table.shop_table td {
  padding: 18px;
  border: 0;
  border-block-start: 1px solid var(--theme-border-color);
  vertical-align: middle;
  text-align: start;
}

/* The product thumbnail's ratio and size are Customizer settings; only the
   column width it sits in is set here. */
body.woocommerce-cart table.shop_table img {
  inline-size: 72px;
  border-radius: 12px;
}

/* Inside the order review the table is part of the panel, not a panel of
   its own — it drops the tint and the outer padding. */
body.woocommerce-checkout #order_review table.shop_table th,
body.woocommerce-checkout #order_review table.shop_table td {
  background: transparent;
  padding-inline: 0;
}

/* The one figure the customer is looking for. Size only — the colour comes
   from Colors → Text Color. */
body.woocommerce-cart .order-total .amount,
body.woocommerce-checkout .order-total .amount {
  font-size: 21px;
}

/* Our own reassurance line under the total (printed in zinco-shop.php). */
body.woocommerce-checkout .z-vat-note td {
  font-size: 13px;
  padding-block-start: 4px;
  opacity: .75;
}


/* -------------------------------------------------------------------------
   3. ONE BUTTON LEADS EACH SCREEN
   Colour, hover, radius and height are the Customizer's (Buttons). Only
   the two things it has no control for are here: the full width that makes
   the primary action unmistakable, and the quieter treatment of the
   secondary actions so they never compete with it.
   ------------------------------------------------------------------------- */
body.woocommerce-cart .checkout-button,
body.woocommerce-checkout #place_order {
  inline-size: 100%;
  display: block;
}

body.woocommerce-cart button[name="update_cart"],
body.woocommerce-cart button[name="apply_coupon"],
body.woocommerce-checkout button[name="apply_coupon"] {
  background: transparent;
  color: var(--theme-text-color);
  border: 1px solid var(--theme-border-color);
}

body.woocommerce-cart button[name="update_cart"]:hover,
body.woocommerce-cart button[name="apply_coupon"]:hover,
body.woocommerce-checkout button[name="apply_coupon"]:hover {
  background: var(--theme-button-background-initial-color);
  color: var(--theme-button-text-initial-color);
  border-color: transparent;
}

/* The way back out of an empty-handed cart (printed in zinco-shop.php). */
body.woocommerce-cart .z-cart-back {
  display: inline-block;
  margin-block-start: 18px;
  color: var(--theme-link-initial-color);
  text-decoration: none;
  border-block-end: 1px solid currentColor;
}
body.woocommerce-cart .z-cart-back:hover { color: var(--theme-link-hover-color); }


/* -------------------------------------------------------------------------
   4. FORM FIELDS — only the gaps
   Field background, border, radius, height and font are all Customizer
   settings (General → Form Elements) and are set there. Two things it has
   no control for remain: the RTL position of the select2 arrow, and the
   invalid state, because an error the customer cannot see is worse than no
   error at all.
   ------------------------------------------------------------------------- */
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
  text-align: start;
  padding: 0;
}
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
  inset-inline-end: 14px;
  inset-inline-start: auto;
  block-size: 100%;
}

body.woocommerce-checkout .form-row.woocommerce-invalid label { color: #7A2E2A; }
body.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout .form-row.woocommerce-invalid select,
body.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection {
  border-color: #B4433C;
  background: #FEFAFA;
  box-shadow: 0 0 0 3px rgba(180, 67, 60, .10);
}

/* The explanatory line under a field the customer would otherwise question
   (why we ask for a phone number). Size only. */
body.woocommerce-checkout .form-row .description {
  font-size: 13px;
  margin-block-start: 6px;
  opacity: .8;
}


/* -------------------------------------------------------------------------
   5. SECTION HEADINGS INSIDE THE FLOW
   The olive rule beside each step's heading. Decorative, no control exists;
   its colour is read from the palette so the Customizer still owns it.
   ------------------------------------------------------------------------- */
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout form.checkout h3,
body.woocommerce-cart .cart_totals h2 {
  padding-inline-start: 15px;
  position: relative;
}
body.woocommerce-checkout #order_review_heading::before,
body.woocommerce-checkout form.checkout h3::before,
body.woocommerce-cart .cart_totals h2::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: .2em .2em;
  inline-size: 3px;
  border-radius: 3px;
  background: var(--theme-palette-color-2);
}


/* -------------------------------------------------------------------------
   6. PAYMENT METHODS
   WooCommerce renders a bare list; the theme has no control for it. Shape
   only, colours from the palette.
   ------------------------------------------------------------------------- */
body.woocommerce-checkout #payment { background: transparent; }
body.woocommerce-checkout #payment ul.payment_methods {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  list-style: none;
}
body.woocommerce-checkout #payment ul.payment_methods li {
  background: color-mix(in srgb, var(--theme-palette-color-2) 6%, transparent);
  border: 1px solid var(--theme-border-color);
  border-radius: 16px;
  padding: 16px 18px;
  margin-block-end: 10px;
  list-style: none;
}
body.woocommerce-checkout #payment ul.payment_methods li label { display: inline; }
body.woocommerce-checkout #payment div.payment_box {
  background: transparent;
  padding: 10px 0 0;
  margin: 0;
  font-size: 14px;
}
body.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* The coupon prompt is available but must never look louder than the pay
   button — it is the single most common source of checkout abandonment. */
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 0 12px;
  font-size: 14px;
}
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::after { display: none; }
body.woocommerce-cart .coupon { opacity: .82; }
body.woocommerce-cart .coupon:focus-within { opacity: 1; }


/* -------------------------------------------------------------------------
   7. TRUST STRIP
   Our own markup (zinco-shop.php) — shipping, returns and payment safety
   answered at the point of decision. Nothing in the platform renders it,
   so all of it is here.
   ------------------------------------------------------------------------- */
body.woocommerce-cart .z-checkout-trust,
body.woocommerce-checkout .z-checkout-trust {
  list-style: none;
  margin: 22px 0 0;
  padding: 20px 22px;
  background: color-mix(in srgb, var(--theme-palette-color-2) 7%, transparent);
  border: 1px solid var(--theme-border-color);
  border-radius: 18px;
  display: grid;
  gap: 14px;
}
body.woocommerce-cart .z-checkout-trust li,
body.woocommerce-checkout .z-checkout-trust li { display: grid; gap: 3px; }
body.woocommerce-cart .z-checkout-trust span,
body.woocommerce-checkout .z-checkout-trust span { font-size: 14px; }


/* -------------------------------------------------------------------------
   8. NOTICES
   Text and background colours for info / success / error messages are
   Customizer settings (WooCommerce → Messages) and are set there. Only the
   shape is here, and the edge marker inherits the message's own text
   colour — so recolouring a message in the Customizer recolours its marker
   with it.
   ------------------------------------------------------------------------- */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-error {
  border: 0;
  border-radius: 18px;
  padding: 20px 24px;
  margin: 0 0 26px;
  list-style: none;
  position: relative;
  overflow: hidden;
}

body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-cart .woocommerce-error::before,
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-error::before { display: none; }

body.woocommerce-cart .woocommerce-message::after,
body.woocommerce-cart .woocommerce-info::after,
body.woocommerce-cart .woocommerce-error::after,
body.woocommerce-checkout .woocommerce-message::after,
body.woocommerce-checkout .woocommerce-info::after,
body.woocommerce-checkout .woocommerce-error::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 4px;
  background: currentColor;
}

/* A field error must be readable as a sentence, with its own marker. */
body.woocommerce-checkout .woocommerce-error li,
body.woocommerce-cart .woocommerce-error li {
  margin: 0 0 8px;
  padding-inline-start: 22px;
  position: relative;
}
body.woocommerce-checkout .woocommerce-error li:last-child,
body.woocommerce-cart .woocommerce-error li:last-child { margin-block-end: 0; }
body.woocommerce-checkout .woocommerce-error li::before,
body.woocommerce-cart .woocommerce-error li::before {
  content: "!";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .45em;
  inline-size: 15px;
  block-size: 15px;
  border-radius: 999px;
  background: currentColor;
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  opacity: .35;
}


/* -------------------------------------------------------------------------
   9. EMPTY CART
   WooCommerce's own template: the message, then the template's own return
   button underneath it. Both texts come from documented filters in
   zinco-shop.php — nothing here re-implements what the platform renders.
   The message carries `woocommerce-info`, so section 8 would otherwise draw
   it as a notice with an edge bar. These rules sit later in the file and
   make it the panel instead, with the button centred beneath it rather than
   glued to its edge.
   ------------------------------------------------------------------------- */
body.woocommerce-cart .cart-empty {
  text-align: center;
  padding: clamp(50px, 8vw, 90px) 24px;
  background: #ffffff;
  border: 1px solid var(--theme-border-color);
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(10, 11, 12, .05);
  margin: 0;
}
body.woocommerce-cart .cart-empty::after,
body.woocommerce-cart .cart-empty::before { display: none; }
body.woocommerce-cart .return-to-shop {
  text-align: center;
  margin-block-start: 26px;
}


/* -------------------------------------------------------------------------
   10. ORDER RECEIVED
   The order facts read as a row of small labelled figures rather than a
   bulleted list. Layout only — no platform control exists for it.
   ------------------------------------------------------------------------- */
body.woocommerce-order-received ul.order_details {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px;
}
body.woocommerce-order-received ul.order_details li {
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: .7;
}
body.woocommerce-order-received ul.order_details li strong {
  display: block;
  margin-block-start: 6px;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
}


/* -------------------------------------------------------------------------
   11. DESKTOP CHECKOUT LAYOUT
   Form on one side, order summary sticky on the other, so the total stays
   in view for the whole form. WooCommerce's own markup is a float layout
   and the theme has no two-column control for it.
   ------------------------------------------------------------------------- */
@media (min-width: 993px) {
  body.woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: 1.25fr .95fr;
    gap: 36px;
    align-items: start;
  }
  body.woocommerce-checkout form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
  body.woocommerce-checkout form.checkout #order_review_heading { grid-column: 2; grid-row: 1; }
  body.woocommerce-checkout form.checkout #order_review {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: 96px;
  }
  body.woocommerce-cart .cart_totals { inline-size: 100%; float: none; }
}


/* -------------------------------------------------------------------------
   12. MOBILE
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  body.woocommerce-cart table.shop_table td,
  body.woocommerce-checkout table.shop_table td { padding: 14px; }
  body.woocommerce-cart table.shop_table img { inline-size: 58px; }

  body.woocommerce-cart .button,
  body.woocommerce-checkout .button { inline-size: 100%; }
}