/* POOQ cart + checkout.
   Managed as a file: wp-content/plugins/pooq-checkout/assets/css/pooq-checkout.css

   Palette and card treatment follow pooq-custom-case/assets/css/builder.css so the funnel and the
   case builder read as one product.

   EVERY rule is scoped to body.pooq-co, which the plugin adds only on cart and checkout. us-core
   dequeues all of WooCommerce's own stylesheets, so this file is not overriding Woo's CSS - it is
   supplying it. That also means anything not styled here is unstyled, not "themed". */

body.pooq-co {
  --co-cream: #f2efea;
  --co-accent: #9a5a32;
  --co-accent-dark: #874c28;
  --co-ink: #2d2a26;
  --co-muted: #6d6659;
  --co-card: #ffffff;
  --co-line: #e4ddd2;
  --co-radius: 16px;
  --co-radius-sm: 10px;
  --co-shadow: 0 10px 30px rgba(45, 42, 38, .08);

  /* The announcement bar is hidden on cart and checkout, so its custom property is not defined
     here and the fallback 0px applies. Kept in the expression so the offset stays correct if that
     ever changes. */
  --co-sticky-top: calc(var(--header-height, 80px) + var(--pooq-shipbar-h, 0px) + 20px);
}

/* ---------------------------------------------------------------- page shell */

body.pooq-co .woocommerce,
body.pooq-co .woocommerce-checkout .entry-content {
  color: var(--co-ink);
  font-family: Play, sans-serif;
}

body.pooq-co .l-main .l-section-h {
  max-width: 1180px;
}

/* ---------------------------------------------------------------- checkout grid */

/* WooCommerce renders #customer_details, #order_review_heading and #order_review as siblings of
   form.checkout, so the two-column layout needs no template override. Rows are placed explicitly
   rather than left to auto-placement, which would strand the summary one row down and leave a hole
   beside the address form. Row 1 is reserved for the notice group and collapses to zero when it is
   empty, which is why there is no row gap. */
body.pooq-co form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 0 48px;
  align-items: start;
}

body.pooq-co form.checkout > * { grid-column: 1 / -1; }

body.pooq-co form.checkout > #customer_details {
  grid-column: 1;
  grid-row: 2;
  display: block;
}

/* Both columns start on the same row so their cards align at the top. WooCommerce's own
   #order_review_heading is a sibling of the card, so leaving it visible would push the summary
   down by its height; POOQ_Checkout_Review reprints it inside the card instead. */
body.pooq-co form.checkout > #order_review_heading { display: none; }
body.pooq-co form.checkout > #order_review { grid-column: 2; grid-row: 2; }

body.pooq-co .pooq-co-review-heading {
  margin: 0 0 16px;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--co-ink);
}

/* WooCommerce's own two-column split, which us-core keeps alive, sizes BOTH #customer_details and
   #order_review at 48% and floats them. As grid items they must fill their column instead, or the
   form ends up half the width of the space allotted to it. The id selectors are deliberate: they
   have to outrank .woocommerce .col2-set. */
body.pooq-co form.checkout > #customer_details,
body.pooq-co form.checkout > #order_review {
  width: 100%;
  max-width: none;
  float: none;
  margin: 0;
}

body.pooq-co #customer_details .col-1,
body.pooq-co #customer_details .col-2 {
  width: 100%;
  float: none;
  margin: 0;
}

body.pooq-co #order_review {
  position: sticky;
  top: var(--co-sticky-top);
}

body.pooq-co #order_review_heading {
  margin: 0 0 14px;
  font-size: 1.15rem;
  line-height: 1.3;
}

/* ---------------------------------------------------------------- cart grid */

body.pooq-co.woocommerce-cart .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 0 48px;
  align-items: start;
}

body.pooq-co.woocommerce-cart .woocommerce > * { grid-column: 1 / -1; }
body.pooq-co.woocommerce-cart .woocommerce > .woocommerce-cart-form { grid-column: 1; grid-row: 2; }
body.pooq-co.woocommerce-cart .woocommerce > .cart-collaterals {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  max-width: none;
  float: none;
}

/* Same 48%-and-float treatment as #order_review; see the note in the checkout grid section.
   The margin reset is not cosmetic: the theme applies margin:0 -24px -24px to .cart_totals for its
   own full-bleed mobile layout, which pulled the summary card 24px left of every other element on
   the page (measured at 0..342 while the grid ran 24..366). */
body.pooq-co .cart-collaterals .cart_totals {
  width: 100%;
  max-width: none;
  float: none;
  margin: 0;
  position: sticky;
  top: var(--co-sticky-top);
}

body.pooq-co.woocommerce-cart .woocommerce > .woocommerce-cart-form {
  width: 100%;
  max-width: none;
  float: none;
}

body.pooq-co .cart-collaterals .cross-sells { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- cards */

body.pooq-co #order_review,
body.pooq-co .cart_totals,
body.pooq-co #customer_details .woocommerce-billing-fields,
body.pooq-co #customer_details .woocommerce-shipping-fields,
body.pooq-co #customer_details .woocommerce-additional-fields {
  background: var(--co-card);
  border: 1px solid var(--co-line);
  border-radius: var(--co-radius);
  box-shadow: var(--co-shadow);
  padding: 24px;
  box-sizing: border-box;
}

body.pooq-co #customer_details .woocommerce-billing-fields,
body.pooq-co #customer_details .woocommerce-shipping-fields,
body.pooq-co #customer_details .woocommerce-additional-fields {
  margin: 0 0 20px;
}

body.pooq-co #customer_details h3,
body.pooq-co .cart_totals h2 {
  margin: 0 0 18px;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--co-ink);
}

/* ---------------------------------------------------------------- form fields */

body.pooq-co .form-row {
  display: block;
  margin: 0 0 16px;
  padding: 0;
}

body.pooq-co .form-row-first,
body.pooq-co .form-row-last {
  float: none;
  width: 100%;
}

@media (min-width: 561px) {
  body.pooq-co .woocommerce-billing-fields__field-wrapper,
  body.pooq-co .woocommerce-shipping-fields__field-wrapper,
  body.pooq-co .pooq-invoice-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
  }

  body.pooq-co .form-row-wide,
  body.pooq-co .pooq-invoice-toggle { grid-column: 1 / -1; }
}

body.pooq-co .form-row label {
  display: block;
  margin: 0 0 6px;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--co-ink);
}

body.pooq-co .form-row .required {
  color: var(--co-accent);
  text-decoration: none;
  border: 0;
}

body.pooq-co .form-row input.input-text,
body.pooq-co .form-row textarea,
body.pooq-co .form-row select,
body.pooq-co .select2-container .select2-selection--single {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 11px 13px;
  font-family: inherit;
  font-size: .95rem;
  color: var(--co-ink);
  background: #fff;
  border: 1px solid var(--co-line);
  border-radius: var(--co-radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}

body.pooq-co .form-row textarea { min-height: 96px; resize: vertical; }

body.pooq-co .form-row input.input-text:focus,
body.pooq-co .form-row textarea:focus,
body.pooq-co .form-row select:focus {
  outline: none;
  border-color: var(--co-accent);
  box-shadow: 0 0 0 3px rgba(176, 105, 63, .18);
}

body.pooq-co .form-row.woocommerce-invalid input.input-text,
body.pooq-co .form-row.woocommerce-invalid select {
  border-color: #b3261e;
}

body.pooq-co .form-row ::placeholder { color: #6f675b; opacity: 1; }

/* The store ships to Greece only, so core renders a locked single-option select. Restate
   WooCommerce's own rule, which us-core dequeues, and then make it read as a static value rather
   than a control the shopper has to think about. */
body.pooq-co .form-row .country_to_state--single {
  background: 0 0;
  background-image: none;
  border: 0;
  padding: 0;
  min-height: 0;
  width: auto;
  font: inherit;
  font-weight: 700;
  color: inherit;
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ---------------------------------------------------------------- shipping selector */

/* The point of the whole exercise. Core puts the courier list in a right-aligned totals cell,
   where a logo, a name and a price wrap against the right edge. Break the row out of the table
   layout so the list gets the summary's full width and reads as a set of choices. */
body.pooq-co .pooq-shipping-row,
body.pooq-co .woocommerce-shipping-totals {
  display: block;
  border: 0;
}

body.pooq-co .pooq-shipping-row th,
body.pooq-co .woocommerce-shipping-totals th {
  display: block;
  width: auto;
  padding: 14px 0 8px;
  text-align: left;
  border: 0;
  font-size: .85rem;
  font-weight: 700;
}

body.pooq-co .pooq-shipping-row td,
body.pooq-co .woocommerce-shipping-totals td {
  display: block;
  width: auto;
  padding: 0 0 6px;
  text-align: left;
  border: 0;
}

body.pooq-co .pooq-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Deliberately NOT a bordered, filled card like the payment options. The courier rows sit inside
   the summary between the subtotal and the total, where a boxed-and-tinted selected state reads as
   a second card nested in the first. The radio already carries the selected state. */
body.pooq-co .pooq-shipping-methods li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 2px;
  border: 0;
  background: transparent;
}

body.pooq-co .pooq-shipping-methods input.shipping_method {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--co-accent);
  cursor: pointer;
}

body.pooq-co .pooq-shipping-methods label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: .92rem;
  font-weight: 400;
  cursor: pointer;
}

/* Push the price to the right edge of the row, whatever precedes it. */
body.pooq-co .pooq-shipping-methods label .woocommerce-Price-amount {
  margin-left: auto;
  padding-left: 8px;
  font-weight: 700;
  white-space: nowrap;
}

body.pooq-co .pooq-shipping-methods .pooq-ship-logo {
  height: 18px;
  width: auto;
  max-width: 62px;
  margin: 0;
  vertical-align: middle;
  flex: 0 0 auto;
}

/* The "Δωρεάν" tag from 05-pooq-shipping sits after the courier name, so it must not be pushed
   right the way a price is. */
body.pooq-co .pooq-shipping-methods .pooq-ship-free { margin-left: 0; }

/* A courier whose logo stands in for its name (05-pooq-shipping 'hide_title'): the mark needs to
   be larger than an inline logo next to a name, or it reads as an unlabeled dot. */
body.pooq-co .pooq-shipping-methods .pooq-ship-logo--solo {
  height: 30px;
  max-width: 90px;
  border-radius: 4px;
}

/* Carrier plugins (BOX NOW) append their picker after the label. Let the row wrap so the picker
   sits on its own line under the label, indented past the radio, instead of being squeezed into the
   same flex row as logo and price. */
body.pooq-co .pooq-shipping-methods li {
  flex-wrap: wrap;
}

body.pooq-co .pooq-shipping-methods li .wc-boxnow-picker {
  flex: 1 1 100%;
  margin: 6px 0 2px 28px;
}

body.pooq-co .pooq-shipping-methods li .wc-boxnow-selected {
  margin-top: 8px;
  color: var(--co-muted);
}

/* ACS Points picker (wc-acs-courier 1.1): same indented row as the BOX NOW picker. */
body.pooq-co .pooq-shipping-methods li .wc-acs-points-picker {
  flex: 1 1 100%;
  margin: 6px 0 2px 28px;
}

body.pooq-co .pooq-shipping-methods li .wc-acs-points-selected {
  color: var(--co-muted);
}

/* On the cart this reads "Αποστολή σε <the shop's own address>", because
   woocommerce_default_customer_address is "base". Shipping is a flat rate nationwide, so the
   estimate is right but the address is meaningless to the shopper and actively confusing. The
   checkout keeps it, where it reflects what they actually typed. */
body.pooq-co.woocommerce-cart .woocommerce-shipping-destination,
body.pooq-co.woocommerce-cart .shipping-calculator-button { display: none; }

body.pooq-co .woocommerce-shipping-destination {
  margin: 8px 0 0;
  font-size: .82rem;
  text-align: left;
  color: var(--co-muted);
}

/* The generic totals-table rule below adds a bottom border to every th/td; the shipping block is
   not a totals line and the stray rule under "Αποστολή" broke its hierarchy. */
body.pooq-co #order_review .shop_table .woocommerce-shipping-totals th,
body.pooq-co #order_review .shop_table .woocommerce-shipping-totals td,
body.pooq-co .cart_totals .shop_table .woocommerce-shipping-totals th,
body.pooq-co .cart_totals .shop_table .woocommerce-shipping-totals td {
  border-bottom: 0;
  text-align: left;
}

body.pooq-co #order_review .shop_table .pooq-ship-tr td,
body.pooq-co .cart_totals .shop_table .pooq-ship-tr td { border-bottom: 0; text-align: left; }

/* ACS Smartpoint picker and anything else hooked on woocommerce_after_shipping_rate renders as a
   sibling of the label inside the row, so give it its own line. */
body.pooq-co .pooq-shipping-methods li > *:not(input):not(label) {
  flex: 1 1 100%;
  margin-top: 8px;
}

/* ---------------------------------------------------------------- free-shipping message */

/* Emitted by 05-pooq-shipping into the totals table; break it out of the cell the same way. */
body.pooq-co .pooq-ship-tr { display: block; }

body.pooq-co .pooq-ship-tr td {
  display: block;
  width: auto;
  text-align: left;
  padding: 0 0 14px !important;
  border: 0 !important;
}

/* ---------------------------------------------------------------- totals table */

body.pooq-co .shop_table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  margin: 0;
}

/* The summary tables are laid out with flex, not as tables.
   WHY: the shipping row and the free-shipping message need the FULL width of the summary, but a
   table cell is bound by its column. Setting display:block on the cells alone leaves them inside
   an anonymous table box whose width is still content-derived (it came out at 299px inside a 352px
   card). Taking the whole table out of table layout makes every row's width predictable: normal
   rows are a flex pair (label left, value right), and the rows that need the full width simply
   become blocks. */
body.pooq-co #order_review .shop_table,
body.pooq-co #order_review .shop_table thead,
body.pooq-co #order_review .shop_table tbody,
body.pooq-co #order_review .shop_table tfoot,
body.pooq-co .cart_totals .shop_table,
body.pooq-co .cart_totals .shop_table tbody,
body.pooq-co .cart_totals .shop_table tfoot {
  display: block;
  width: 100%;
}

body.pooq-co #order_review .shop_table tr,
body.pooq-co .cart_totals .shop_table tr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--co-line);
}

body.pooq-co #order_review .shop_table th,
body.pooq-co #order_review .shop_table td,
body.pooq-co .cart_totals .shop_table th,
body.pooq-co .cart_totals .shop_table td {
  display: block;
  padding: 0;
  border: 0;
  font-size: .92rem;
  width: auto;
}

/* nowrap keeps a price on one line next to its label. It must NOT reach the full-width rows: the
   free-shipping message is a sentence, and unwrappable it runs straight out of the card (it was
   fitting by 3px at 400px and overflowing everywhere narrower). */
body.pooq-co #order_review .shop_table td,
body.pooq-co .cart_totals .shop_table td { text-align: right; white-space: nowrap; }

body.pooq-co #order_review .shop_table tr.woocommerce-shipping-totals td,
body.pooq-co .cart_totals .shop_table tr.woocommerce-shipping-totals td,
body.pooq-co #order_review .shop_table tr.pooq-ship-tr td,
body.pooq-co .cart_totals .shop_table tr.pooq-ship-tr td,
body.pooq-co .pooq-ship-msg,
body.pooq-co .pooq-shipping-methods label { white-space: normal; }

/* The amount inside the message is the one part that must stay intact. */
body.pooq-co .pooq-ship-msg .woocommerce-Price-amount { white-space: nowrap; }

body.pooq-co #order_review .shop_table th,
body.pooq-co .cart_totals .shop_table th {
  text-align: left;
  font-weight: 400;
  color: var(--co-muted);
  flex: 1 1 auto;
  min-width: 0;
}

/* Product lines carry a wrapping name and must not be forced onto one line. */
body.pooq-co #order_review .cart_item td.product-name { white-space: normal; flex: 1 1 auto; min-width: 0; }
body.pooq-co #order_review .cart_item td.product-total { flex: 0 0 auto; }
body.pooq-co #order_review .shop_table thead tr { border-bottom: 1px solid var(--co-line); }

/* Full-width, stacked rows: the courier selector and the free-shipping message. */
body.pooq-co #order_review .shop_table tr.woocommerce-shipping-totals,
body.pooq-co .cart_totals .shop_table tr.woocommerce-shipping-totals,
body.pooq-co #order_review .shop_table tr.pooq-ship-tr,
body.pooq-co .cart_totals .shop_table tr.pooq-ship-tr {
  display: block;
  border-bottom: 0;
  padding: 4px 0 10px;
}

body.pooq-co .order-total th,
body.pooq-co .order-total td {
  padding-top: 0 !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--co-ink) !important;
}

body.pooq-co tr.order-total { border-bottom: 0 !important; padding-top: 14px; }

body.pooq-co .order-total .woocommerce-Price-amount { color: var(--co-accent); }

body.pooq-co #order_review .cart_item td.product-name { text-align: left; color: var(--co-ink); }
body.pooq-co #order_review .product-quantity { color: var(--co-muted); font-weight: 700; }

/* ---------------------------------------------------------------- payment */

/* Payment stays inside the summary card, so it must not look like a card of its own. */
body.pooq-co #payment {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* WooCommerce's terms box is a scrolling reproduction of the whole policy page. Cap it hard, or it
   is the tallest thing on the checkout. */
body.pooq-co .woocommerce-terms-and-conditions {
  max-height: 140px;
  padding: 12px 14px;
  border: 1px solid var(--co-line);
  border-radius: var(--co-radius-sm);
  background: var(--co-cream);
  font-size: .82rem;
  line-height: 1.5;
}

body.pooq-co #payment ul.payment_methods {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* WooCommerce renders the radio and the label as SIBLINGS, not the radio inside the label, so the
   spacing between them has to come from the row itself. Without this they touch. */
body.pooq-co #payment ul.payment_methods li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--co-line);
  border-radius: var(--co-radius-sm);
  background: #fff;
  list-style: none;
  transition: border-color .15s ease, background .15s ease;
}

/* The gateway description drops onto its own line below the choice. */
body.pooq-co #payment ul.payment_methods li > .payment_box { flex: 1 1 100%; }

body.pooq-co #payment ul.payment_methods li:has(input.input-radio:checked) {
  border-color: var(--co-accent);
  background: var(--co-cream);
}

body.pooq-co #payment ul.payment_methods li > label {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
}

body.pooq-co #payment ul.payment_methods li input.input-radio {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--co-accent);
  cursor: pointer;
}

body.pooq-co #payment ul.payment_methods li img {
  margin-left: auto;
  max-height: 26px;
  width: auto;
}

body.pooq-co #payment div.payment_box {
  margin: 10px 0 0;
  padding: 11px 13px;
  background: var(--co-cream);
  border-radius: var(--co-radius-sm);
  font-size: .87rem;
  line-height: 1.5;
  color: var(--co-muted);
}

body.pooq-co #payment div.payment_box::before { display: none; }

body.pooq-co .woocommerce-privacy-policy-text,
body.pooq-co .woocommerce-terms-and-conditions-wrapper {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--co-muted);
}

/* ---------------------------------------------------------------- buttons */

body.pooq-co #place_order,
body.pooq-co .checkout-button,
body.pooq-co .wc-proceed-to-checkout .button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 16px;
  padding: 15px 20px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background: var(--co-accent);
  border: 0;
  border-radius: var(--co-radius-sm);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background .15s ease;
}

body.pooq-co #place_order:hover,
body.pooq-co .checkout-button:hover,
body.pooq-co .wc-proceed-to-checkout .button:hover { background: var(--co-accent-dark); color: #fff; }

body.pooq-co #place_order:focus-visible,
body.pooq-co .checkout-button:focus-visible {
  outline: 3px solid rgba(176, 105, 63, .4);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- invoice block */

body.pooq-co .pooq-invoice {
  margin: 4px 0 0;
  padding: 16px;
  background: var(--co-cream);
  border-radius: var(--co-radius-sm);
}

body.pooq-co .pooq-invoice-toggle { margin: 0; }

body.pooq-co .pooq-invoice-toggle label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: .95rem;
  cursor: pointer;
}

body.pooq-co .pooq-invoice-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--co-accent);
  cursor: pointer;
}

body.pooq-co .pooq-invoice-fields { margin-top: 16px; }
body.pooq-co .pooq-invoice-fields .form-row:last-child { margin-bottom: 0; }

/* The panel is display:grid above 560px, and an author display value beats the user-agent's
   [hidden]{display:none}. Without this the fields render whether the box is ticked or not. */
body.pooq-co .pooq-invoice-fields[hidden] { display: none; }

/* Every field here is required once the box is ticked, so WooCommerce's "(προαιρετικό)" suffix
   would be actively misleading. The conditional requirement is stated once, under the checkbox. */
body.pooq-co .pooq-invoice .optional { display: none; }

body.pooq-co .pooq-invoice-note {
  margin: 8px 0 0;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--co-muted);
}

/* ---------------------------------------------------------------- order review lines */

body.pooq-co .pooq-co-line {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

body.pooq-co .pooq-co-line-img {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--co-cream);
  display: block;
}

body.pooq-co .pooq-co-line-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}

body.pooq-co .pooq-co-line-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .88rem;
  line-height: 1.35;
}

body.pooq-co #order_review .cart_item .product-quantity {
  display: inline-block;
  margin-top: 2px;
  font-size: .82rem;
}

/* ---------------------------------------------------------------- cart table */

/* table-layout:fixed with explicit column widths. Left to auto, the price, quantity and subtotal
   columns take what they want and the product name is squeezed into a column so narrow it wraps
   one word per line, while the last column overflows the card and gets clipped.

   The long selector is deliberate. us-core ships
       .us-woo-cart_compact .woocommerce .shop_table.cart { width: 65% }
   (four classes) for its own compact-cart layout, which beat a three-class selector and pinned the
   table to 65% of its grid column - the 476px-inside-732px symptom. This has five classes plus a
   type, so it wins without resorting to !important. If Impreza ever renames that class, re-check
   here rather than adding !important. */
body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart,
body.pooq-co .woocommerce-cart-form .shop_table {
  table-layout: fixed;
  width: 100%;
  background: var(--co-card);
  border: 1px solid var(--co-line);
  border-radius: var(--co-radius);
  box-shadow: var(--co-shadow);
  overflow: hidden;
}

/* box-sizing is not decorative here: without it the 16px cell padding is added OUTSIDE each
   specified column width, the columns total more than 100%, and the last one (Υποσύνολο) is pushed
   past the card's edge and clipped. */
body.pooq-co .woocommerce-cart-form .shop_table th,
body.pooq-co .woocommerce-cart-form .shop_table td { box-sizing: border-box; }

/* Column widths are declared on the HEADER ROW by position, not by class.
   With table-layout:fixed the first row defines the columns, and class-based widths were only
   partly winning against the theme's own: Υποσύνολο ended up 48px while the thumbnail took 112,
   so the price was clipped. nth-child on the header row, behind the same high-specificity prefix
   that beats us-core's 65% rule, settles every column in one place. */
body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart thead th:nth-child(1) { width: 52px; }
body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart thead th:nth-child(2) { width: 84px; }
body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart thead th:nth-child(3) { width: auto; }
body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart thead th:nth-child(4) { width: 92px; }
body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart thead th:nth-child(5) { width: 104px; }
body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart thead th:nth-child(6) { width: 116px; }

body.pooq-co .woocommerce-cart-form .product-name { text-align: left; }
body.pooq-co .woocommerce-cart-form .product-price { text-align: right; }
body.pooq-co .woocommerce-cart-form .product-quantity { text-align: center; }
body.pooq-co .woocommerce-cart-form .product-subtotal { text-align: right; font-weight: 700; }

/* Only the product name may break mid-word; the money columns and the headers must not, or
   "Υποσύνολο" stacks one letter per line in its narrow column. */
body.pooq-co .woocommerce-cart-form .product-name { overflow-wrap: anywhere; }

body.pooq-co .woocommerce-cart-form .shop_table th,
body.pooq-co .woocommerce-cart-form .product-price,
body.pooq-co .woocommerce-cart-form .product-subtotal { overflow-wrap: normal; word-break: normal; hyphens: none; }

body.pooq-co .woocommerce-cart-form .shop_table th { font-size: .72rem; white-space: nowrap; }

body.pooq-co .woocommerce-cart-form .quantity { display: inline-block; }

body.pooq-co .woocommerce-cart-form .shop_table th {
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--co-muted);
  background: var(--co-cream);
  border-bottom: 1px solid var(--co-line);
}

body.pooq-co .woocommerce-cart-form .shop_table td {
  border-bottom: 1px solid var(--co-line);
  vertical-align: middle;
}

/* ALL cell padding is declared here, in one place, behind the specificity prefix that beats both
   us-core and this file's own earlier rules. Two things were fighting it before: a generic
   `.shop_table td { padding: 16px }` later in this file (an extra type selector, so it won and
   flattened the per-column padding), and a theme rule zeroing padding-right on the last cell, which
   left the Υποσύνολο price flush against the card border. Change padding here and nowhere else. */
body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart th,
body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart td {
  padding: 14px 10px;
}

body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart th:first-child,
body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart td:first-child {
  padding-left: 18px;
}

body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart th:last-child,
body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart td:last-child {
  padding-right: 18px;
}

/* The "update cart" row spans all six columns, so it needs the card's gutter restated. */
body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart td.actions {
  padding: 16px 18px;
  border-bottom: 0;
}

body.pooq-co .woocommerce-cart-form .cart_item:last-child td { border-bottom: 0; }

body.pooq-co .woocommerce-cart-form .product-thumbnail img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: var(--co-cream);
}

/* Disabled until a quantity actually changes, which is correct, but it should not look broken. */
body.pooq-co .woocommerce-cart-form .actions .button {
  padding: 11px 18px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--co-accent);
  background: var(--co-cream);
  border: 1px solid var(--co-line);
  border-radius: var(--co-radius-sm);
}

body.pooq-co .woocommerce-cart-form .actions .button:disabled {
  opacity: .55;
  cursor: default;
}

body.pooq-co .woocommerce-cart-form .actions .button:not(:disabled):hover {
  background: var(--co-accent);
  border-color: var(--co-accent);
  color: #fff;
}

body.pooq-co .woocommerce-cart-form .product-name a {
  color: var(--co-ink);
  font-weight: 700;
  text-decoration: none;
}

body.pooq-co .woocommerce-cart-form .product-name a:hover { color: var(--co-accent); }

body.pooq-co .woocommerce-cart-form .product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--co-muted);
  background: var(--co-cream);
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
}

body.pooq-co .woocommerce-cart-form .product-remove a.remove:hover { background: #b3261e; color: #fff; }

body.pooq-co .quantity input.qty {
  width: 62px;
  min-height: 40px;
  padding: 8px;
  text-align: center;
  border: 1px solid var(--co-line);
  border-radius: 8px;
  font-family: inherit;
}

body.pooq-co .woocommerce-cart-form .actions .coupon { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- notices */

body.pooq-co .woocommerce-error,
body.pooq-co .woocommerce-message,
body.pooq-co .woocommerce-info {
  list-style: none;
  margin: 0 0 20px;
  padding: 13px 16px;
  border: 0;
  border-left: 3px solid var(--co-accent);
  border-radius: var(--co-radius-sm);
  background: var(--co-cream);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--co-ink);
}

body.pooq-co .woocommerce-error { border-left-color: #b3261e; background: #fdecea; }
body.pooq-co .woocommerce-error li { margin: 0; list-style: none; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
  body.pooq-co form.checkout,
  body.pooq-co.woocommerce-cart .woocommerce {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  body.pooq-co form.checkout > #customer_details,
  body.pooq-co form.checkout > #order_review_heading,
  body.pooq-co form.checkout > #order_review,
  body.pooq-co.woocommerce-cart .woocommerce > .woocommerce-cart-form,
  body.pooq-co.woocommerce-cart .woocommerce > .cart-collaterals {
    grid-column: 1;
    grid-row: auto;
  }

  /* Sticky in a single column would pin the summary over the form as the shopper scrolls. */
  body.pooq-co #order_review,
  body.pooq-co .cart-collaterals .cart_totals { position: static; }

  body.pooq-co #order_review_heading { margin-top: 28px; }
}

/* ---------------------------------------------------------------- mobile cart table */

/* Below 700px the six-column table cannot work: the fixed columns alone total 448px. WooCommerce
   ships a responsive stacked layout for exactly this, but us-core dequeues the stylesheet that
   carries it, so it has to be rebuilt here. Each row becomes a card: thumbnail pinned top-left,
   remove top-right, name across the top, then one label/value line per figure. The labels come
   from WooCommerce's own data-title attributes, so they stay translated. */
@media (max-width: 700px) {
  body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart,
  body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart tbody,
  body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart tr,
  body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart td {
    display: block;
    width: auto;
  }

  body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart thead { display: none; }

  body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart tr.cart_item {
    position: relative;
    min-height: 92px;
    padding: 14px 40px 14px 90px;
    border-bottom: 1px solid var(--co-line);
  }

  body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart tr.cart_item:last-child { border-bottom: 0; }

  body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart td {
    padding: 4px 0;
    border: 0;
  }

  body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart td.product-thumbnail {
    position: absolute;
    left: 14px;
    top: 14px;
    width: 64px;
    padding: 0;
  }

  body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart td.product-remove {
    position: absolute;
    right: 10px;
    top: 12px;
    width: auto;
    padding: 0;
  }

  body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart td.product-name {
    padding: 0 0 6px;
    font-weight: 700;
    text-align: left;
  }

  /* One label/value line per figure. */
  body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart td.product-price,
  body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart td.product-quantity,
  body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart td.product-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: right;
  }

  body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart td.product-price::before,
  body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart td.product-quantity::before,
  body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart td.product-subtotal::before {
    content: attr(data-title);
    flex: 0 0 auto;
    font-size: .82rem;
    font-weight: 400;
    color: var(--co-muted);
  }

  /* us-core hides the unit price on mobile carts with
         .woocommerce .shop_table.cart .product-price { display: none !important }
     under max-width:767px. Fine at quantity 1, where price and subtotal are the same number, but
     at quantity 3 it leaves the shopper unable to see what one unit costs. !important is the only
     thing that beats !important; this is the single place in this file that uses it. */
  body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart td.product-price {
    display: flex !important;
  }

  body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart td.actions { padding: 14px; }
  body.pooq-co .woocommerce-cart-form .actions .button { width: 100%; }
}

@media (max-width: 560px) {
  body.pooq-co #order_review,
  body.pooq-co .cart_totals,
  body.pooq-co #customer_details .woocommerce-billing-fields,
  body.pooq-co #customer_details .woocommerce-shipping-fields,
  body.pooq-co #customer_details .woocommerce-additional-fields { padding: 18px 16px; }

  /* Phones: the cards run edge to edge (owner request 2026-09-11), so a 375px screen gives the
     fields 343px instead of 290px. The theme's page and column gutters stay for everything else
     (notices, the coupon link); each card pulls itself out to the viewport edges instead.
     calc(50% - 50vw) holds for any gutter size because the column is centred. The selectors repeat
     the ones that set width:100% and margin:0 above, or those would win on specificity. */
  body.pooq-co form.checkout > #order_review,
  body.pooq-co .cart-collaterals .cart_totals,
  body.pooq-co #customer_details .woocommerce-billing-fields,
  body.pooq-co #customer_details .woocommerce-shipping-fields,
  body.pooq-co #customer_details .woocommerce-additional-fields,
  body.pooq-co .woocommerce .woocommerce-cart-form .shop_table.cart {
    width: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* A thin cream gap between the stacked cards. */
  body.pooq-co #customer_details .woocommerce-billing-fields,
  body.pooq-co #customer_details .woocommerce-shipping-fields,
  body.pooq-co #customer_details .woocommerce-additional-fields { margin-bottom: 12px; }

  body.pooq-co .pooq-shipping-methods label { flex-wrap: wrap; }
  body.pooq-co .pooq-shipping-methods label .woocommerce-Price-amount { margin-left: auto; }

  /* The logo plus a courier name plus a price is too much for one line on a phone. */
  body.pooq-co .pooq-shipping-methods li { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  body.pooq-co * { transition: none !important; }
}