/* Thank-you page (the order-received endpoint of the checkout page). No prototype exists for it: designed from the shared components
   (cards, option/summary look of the checkout, WhatsApp chip colours) per project-notes/DESIGN-DIRECTION.md.
   Markup = WooCommerce's own order-received template + the WhatsApp block of One Creation Smart Checkout; extra bits from
   safy-site-tools/includes/checkout.php (thumbnails, delivery details list). */

:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-order { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "ok ok" "info info" "details wa" "cust wa"; gap: 18px 28px; align-items: start; }

/* ===== 1. success banner: tick circle | message + one line under it ===== */
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-thankyou-order-received { grid-area: ok; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 2px; box-sizing: border-box; margin: 0; padding: 22px 24px; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: linear-gradient(135deg, var(--c-tint-purple), var(--c-tint-pink)); box-shadow: var(--shadow-card); font-size: 22px; font-weight: 700; line-height: 1.5; color: var(--c-ink); }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-thankyou-order-received::before { content: ""; grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 50%; background: var(--co-check) center / 26px no-repeat, var(--grad-brand); }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-thankyou-order-received::after { content: "سنتواصل معك لتأكيد الطلب قبل التجهيز"; font-size: 15px; font-weight: 400; color: var(--c-text-muted); }

/* ===== 2. four facts: order number, date, total, payment ===== */
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview { grid-area: info; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; list-style: none; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview li { grid-column: span 2; min-width: 0; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview li:nth-child(n+4) { grid-column: span 3; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview li:nth-child(4):last-child { grid-column: 1 / -1; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview li strong { overflow-wrap: anywhere; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview li.email strong { direction: ltr; text-align: start; font-size: 16px; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview::before, :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview::after { content: none; display: none; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview li { box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; float: none; margin: 0; padding: 16px 18px; border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-white); box-shadow: var(--shadow-card); font-size: 13px; font-weight: 400; line-height: 1.4; text-transform: none; color: var(--c-text-muted); }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview li strong { display: block; font-size: 18px; font-weight: 700; color: var(--c-ink); }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview li.total strong, :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview li.total strong * { color: var(--c-primary); }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview li::before, :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview li::after { content: none; display: none; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-order > p:not(.woocommerce-thankyou-order-received) { display: none; }

/* ===== 3. order details card ===== */
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-order-details, :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-customer-details { box-sizing: border-box; margin: 0; padding: 22px 24px; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-white); box-shadow: var(--shadow-card); }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-order-details { grid-area: details; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-customer-details { grid-area: cust; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-order-details__title, :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-column__title { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--c-ink); }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details { display: block; width: 100%; margin: 0; border: 0; border-collapse: separate; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details thead { display: none; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details tbody, :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details tfoot { display: block; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details tr { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details th, :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details td { padding: 0; border: 0; background: none; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) tr.order_item { align-items: flex-start; padding: 12px 0; border-bottom: 1px dashed var(--c-line); }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) td.product-name { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; flex: 1; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--c-ink); text-align: start; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) td.product-name a { color: var(--c-ink); text-decoration: none; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) td.product-total { flex: none; font-weight: 700; color: var(--c-primary); white-space: nowrap; text-align: left; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) td.product-total * { color: var(--c-primary) !important; font-weight: 700 !important; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details tfoot tr { padding: 12px 0; border-bottom: 1px dashed var(--c-line); font-size: 15px; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details tfoot th { font-weight: 400; color: var(--c-text-muted); text-align: start; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details tfoot td { font-weight: 500; text-align: left; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details tfoot tr:last-child { border-bottom: 0; }
/* the total row (second to last: the last one is the payment method) is the big one: label + pink amount */
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details tfoot tr:nth-last-child(2) th { font-size: 17px; font-weight: 700; color: var(--c-ink); }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details tfoot tr:nth-last-child(2) td, :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details tfoot tr:nth-last-child(2) td * { font-size: 22px !important; font-weight: 700 !important; color: var(--c-primary) !important; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-order-details .order-again, :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-order-details > p { display: none; }

/* ===== 4. delivery / order details of the customer ===== */
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-customer-details { display: flex; flex-direction: column; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-column__title { order: -2; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .safy-th-list { order: -1; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-customer-details address { margin: 0; padding: 0; border: 0; font-style: normal; font-size: 15px; line-height: 1.9; color: var(--c-ink); text-align: start; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-customer-details--phone, :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-customer-details--email { margin: 0; padding: 0; font-size: 15px; line-height: 1.9; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-customer-details--phone::before { content: none; }
.safy-th-list { display: grid; gap: 8px; margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px dashed var(--c-line); list-style: none; }
.safy-th-list li { display: flex; gap: 8px; align-items: baseline; margin: 0; font-size: 15px; color: var(--c-ink); }
.safy-th-list li span { flex: none; min-width: 96px; color: var(--c-text-muted); }
.safy-th-list li b { font-weight: 700; }

/* ===== 5. WhatsApp confirmation (side card): same chip colours as the call popup ===== */
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .ocsc-whatsapp-confirmation { grid-area: wa; position: sticky; top: 20px; box-sizing: border-box !important; margin: 0 !important; padding: 22px 24px !important; border: 1px solid var(--c-line) !important; border-radius: var(--radius-l) !important; background: var(--c-white) !important; box-shadow: var(--shadow-card); }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .ocsc-whatsapp-confirmation h2 { margin: 0 0 8px !important; font-size: 18px !important; font-weight: 700; color: var(--c-ink); }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .ocsc-whatsapp-confirmation p { margin: 0 0 16px !important; font-size: 14px; line-height: 1.8 !important; color: var(--c-text-muted); }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .ocsc-whatsapp-confirmation a.button { box-sizing: border-box; display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--c-whatsapp) !important; border-radius: 10px; background: var(--c-white) !important; color: #1c9c4d !important; font-size: 16px; font-weight: 700; text-decoration: none; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .ocsc-whatsapp-confirmation a.button::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ico-whatsapp) center/contain no-repeat; mask: var(--ico-whatsapp) center/contain no-repeat; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .ocsc-whatsapp-confirmation a.button:hover { background: rgba(37, 211, 102, .12) !important; color: #1c9c4d !important; }

/* ===== tablet and phone ===== */
@media (max-width: 1024px) {
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-order { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ok" "info" "wa" "details" "cust"; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .ocsc-whatsapp-confirmation { position: static; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-thankyou-order-received { font-size: 19px; padding: 18px 16px; column-gap: 12px; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-thankyou-order-received::after { font-size: 14px; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-order-details, :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-customer-details, :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .ocsc-whatsapp-confirmation { padding: 18px 16px !important; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview li { padding: 12px 14px; }
}

/* بيانات الطلب: one look - every row is "label  value"; WooCommerce's own address block and phone/e-mail lines are replaced by those rows */
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-customer-details address, :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-customer-details > p { display: none; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .safy-th-list { margin: 0; padding: 0; border: 0; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .safy-th-list li { align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed var(--c-line); }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .safy-th-list li:last-child { border-bottom: 0; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .safy-th-list li span { min-width: 120px; font-size: 15px; font-weight: 400; color: var(--c-text-muted); }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .safy-th-list li b { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; color: var(--c-ink); overflow-wrap: anywhere; }

/* WhatsApp: the BUTTON itself is the green (white text), same shape as the other primary buttons */
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .ocsc-whatsapp-confirmation a.button { border-color: #1c9c4d !important; background: #1c9c4d !important; color: var(--c-white) !important; }
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .ocsc-whatsapp-confirmation a.button:hover { background: #1c9c4d !important; border-color: #1c9c4d !important; color: var(--c-white) !important; filter: brightness(.93); }

/* phone: nothing leaves its card; bold text is smaller */
@media (max-width: 767px) {
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview li, :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview li:nth-child(n+4) { grid-column: auto; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview li.email { grid-column: 1 / -1; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview li strong { font-size: 15px; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview li.email strong { font-size: 14px; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .safy-th-list li { flex-wrap: wrap; gap: 2px 8px; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .safy-th-list li span { min-width: 90px; font-size: 14px; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .safy-th-list li b { font-size: 14px; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) td.product-name { font-size: 14px; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-order-details__title, :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-column__title { font-size: 17px; }
}
@media (max-width: 767px) {
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) ul.woocommerce-order-overview li:nth-child(4):last-child { grid-column: auto; }
}
/* phone: a smaller tick circle so the message has the room */
@media (max-width: 767px) {
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-thankyou-order-received { grid-template-columns: 36px minmax(0, 1fr); }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .woocommerce-thankyou-order-received::before { width: 36px; height: 36px; background-size: 18px, auto; }
}
/* phone: picture + name on the first row; quantity, each add-on and the price each on their own row */
@media (max-width: 767px) {
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) tr.order_item { flex-direction: column; align-items: stretch; gap: 8px; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) td.product-name { grid-template-columns: 52px minmax(0, 1fr); row-gap: 6px; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) td.product-name .safy-co-thumb { grid-column: 1; grid-row: 1; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) td.product-name .safy-co-name { grid-column: 2; grid-row: 1; align-self: center; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) td.product-name .safy-co-qty { grid-column: 1 / -1; grid-row: 2; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) td.product-name ul.wc-item-meta, :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) td.product-name dl.variation { grid-column: 1 / -1; grid-row: 3; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 400; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) td.product-name .wc-item-meta li { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) td.product-name .wc-item-meta li p { display: inline; margin: 0; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) td.product-name .wc-item-meta strong { font-weight: 700; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) td.product-total { text-align: left; }
}

/* any phone number: left-to-right digits ("+20..." reads in order), aligned to the right edge like the other values */
:is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) .safy-th-list li b.safy-ltr { direction: ltr; unicode-bidi: isolate; text-align: right; }
/* phone: the product row keeps its width so every picture sits at the same place and the price stays at the left edge */
@media (max-width: 767px) {
}
/* phone: no row holds a lone word - picture + name, add-ons, then quantity beside the price on one row */
@media (max-width: 767px) {
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details tr.order_item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; align-items: center; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details tr.order_item td.product-name { display: contents; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details tr.order_item .safy-co-thumb { grid-column: 1; grid-row: 1; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details tr.order_item .safy-co-name { grid-column: 2 / -1; grid-row: 1; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details tr.order_item ul.wc-item-meta, :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details tr.order_item dl.variation { grid-column: 1 / -1; grid-row: 2; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details tr.order_item .safy-co-qty { grid-column: 1 / 3; grid-row: 3; }
  :is(.woocommerce-order-received .safy-checkout, .elementor-element.safy-account .woocommerce-MyAccount-content) table.woocommerce-table--order-details tr.order_item td.product-total { grid-column: 3; grid-row: 3; width: auto; }
}