/* M2 — WooCommerce cart / checkout / order-received / account. Owned by the woo-pages task. */

/* ==========================================================================
   1. Customer address blocks (order received, view order, account addresses)
   ==========================================================================

   The markup comes from two child-theme template overrides:
   woocommerce/order/order-details-customer.php and
   woocommerce/myaccount/my-address.php. Both print .ollie-address.

   Two problems are fixed here that CSS alone could not have fixed, and one
   that only CSS could:

   · the address used to be one field per line (template, see
     woocommerce/ollie-woo-address.php);
   · phone and e-mail were plain text (template — they are links now);
   · the icons next to phone and e-mail were empty squares. That last one is a
     parent-theme bug: edublink/assets/css/woocommerce.css styles those two
     rows with `font-family: boxicons`, but the boxicons stylesheet is only
     enqueued when the `edublink_box_icon_enable` filter returns true and it
     defaults to false — so the @font-face never reaches the page and the
     glyphs render as tofu. The rule below removes the pseudo-element (the
     template prints a real inline SVG instead).
*/

.woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone::before,
.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email::before,
.woocommerce-customer-details--phone::before,
.woocommerce-customer-details--email::before {
	content: none;
}

.woocommerce .woocommerce-customer-details address.ollie-address,
address.ollie-address {
	font-style: normal;
	line-height: 1.7;
	padding: 18px 20px;
	border: 1px solid var(--edublink-color-border, rgba(0, 0, 0, .1));
	border-radius: 5px;
	/* Core gives the box a heavier bottom/right border, which reads as a drop
	   shadow that belongs to no other box on this site. */
	border-width: 1px;
}

.ollie-address .ollie-address__lines {
	display: block;
}

/* Phone and e-mail: same left edge as the address lines, icon in the gap. */
.woocommerce .woocommerce-customer-details .ollie-address__contact,
.ollie-address .ollie-address__contact {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	position: static;
}

.ollie-address .ollie-address__contact:first-of-type {
	margin-top: 10px;
}

.ollie-address .ollie-address__icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	opacity: .55;
}

.ollie-address .ollie-address__contact a {
	color: inherit;
	/* Long e-mail addresses must wrap rather than widen the page at 390px. */
	word-break: break-word;
}

.ollie-address .ollie-address__contact a:hover,
.ollie-address .ollie-address__contact a:focus {
	color: var(--edublink-color-primary, #1ab69d);
}

/* Billing / shipping side by side on desktop, stacked on phones.

   Note the ::before/::after reset: WooCommerce's stylesheet puts a table-based
   clearfix on .col2-set. Harmless while the container is floated, but a
   grid container turns those two pseudo-elements into real grid items — they
   would take the first and last cell and push the two addresses diagonally
   across the grid. */
.woocommerce-customer-details .woocommerce-columns--addresses::before,
.woocommerce-customer-details .woocommerce-columns--addresses::after,
.woocommerce-account .woocommerce-Addresses.col2-set::before,
.woocommerce-account .woocommerce-Addresses.col2-set::after {
	display: none;
}

.woocommerce-customer-details .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 768px) {
	.woocommerce-customer-details .woocommerce-columns--addresses {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-customer-details .woocommerce-columns--addresses .col-1,
.woocommerce-customer-details .woocommerce-columns--addresses .col-2 {
	width: 100%;
	float: none;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   2. Notices — the "info" icon
   ==========================================================================

   .woocommerce-info gets its icon from WooCommerce's own icon font
   (content: "\e028"). That glyph is a plain rectangle outline, which on a
   coupon bar or an "no orders yet" bar reads as a missing icon rather than as
   information. Same job done with an inline SVG mask: no font, no glyph
   lookup, and it inherits the notice's text colour.
*/

body .woocommerce-info::before,
body .woocommerce-page .woocommerce-info::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.4 4.6a1.4 1.4 0 1 1 2.8 0 1.4 1.4 0 0 1-2.8 0ZM13.4 17.6h-2.8v-7h2.8v7Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.4 4.6a1.4 1.4 0 1 1 2.8 0 1.4 1.4 0 0 1-2.8 0ZM13.4 17.6h-2.8v-7h2.8v7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The theme pins every notice icon 30px below the top of the bar. That is the
   middle of a one-line notice on a desktop, but a notice that wraps to three
   lines on a phone is 90px tall and the icon ends up floating in the middle of
   the text. Align it with the first line instead. */
@media (max-width: 767px) {
	body .woocommerce-info::before,
	body .woocommerce-message::before,
	body .woocommerce-error::before {
		top: 1.85em;
	}
}

/* ==========================================================================
   3. Order received / view order
   ========================================================================== */

/* The order summary strip (number, date, total, payment method). Core lays it
   out as a <ul> with borders between the items; on a phone the items were
   dropping into a ragged two-column grid. */
.woocommerce ul.woocommerce-order-overview,
ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.woocommerce ul.woocommerce-order-overview li,
ul.woocommerce-order-overview li {
	float: none;
	width: auto;
	margin: 0;
	padding: 0 0 0 16px;
	border: 0;
	border-left: 1px solid var(--edublink-color-border, rgba(0, 0, 0, .1));
}

.woocommerce ul.woocommerce-order-overview li:first-child,
ul.woocommerce-order-overview li:first-child {
	padding-left: 0;
	border-left: 0;
}

/* Order table: keep long product names from pushing the totals column off the
   screen at 390px. */
.woocommerce table.woocommerce-table--order-details,
.woocommerce table.shop_table {
	table-layout: auto;
	width: 100%;
}

.woocommerce table.woocommerce-table--order-details td,
.woocommerce table.woocommerce-table--order-details th {
	word-break: break-word;
}

/* ==========================================================================
   4. My account
   ========================================================================== */

/* "Billing address" / "Shipping address" on the Addresses screen were coming
   through at page-heading size — bigger than the "My account" heading of the
   section they sit in. Bring them down to a card title and put the edit link
   on the same line. */
.woocommerce-account .woocommerce-Address-title.title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.woocommerce-account .woocommerce-Address-title.title h2,
.woocommerce-account .woocommerce-Address-title.title h3 {
	margin: 0;
	font-size: 20px;
	line-height: 1.4;
}

.woocommerce-account .woocommerce-Address-title.title .edit {
	font-size: 15px;
	text-decoration: underline;
}

.woocommerce-account .woocommerce-Addresses.col2-set {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

@media (min-width: 768px) {
	.woocommerce-account .woocommerce-Addresses.col2-set {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
	width: 100%;
	float: none;
	margin: 0;
	padding: 0;
}

/* The order number went missing from the Orders list on phones.

   WooCommerce marks the order-number cell up as `<th scope="row">` (it is the
   row's header, which is correct), and the parent theme's responsive table
   rules hide every `tbody th` below 48em — so each order was listed as date,
   status, total and a View button with no number anywhere. Show the row header
   like the other cells, with the same "Label: value" treatment. */
@media (max-width: 767px) {
	.woocommerce table.shop_table_responsive tbody th[data-title] {
		display: block;
		clear: both;
		text-align: right;
	}

	.woocommerce table.shop_table_responsive tbody th[data-title]::before {
		content: attr(data-title) ": ";
		float: left;
		font-weight: 600;
	}
}

/* ==========================================================================
   5. Checkout / address forms
   ========================================================================== */

/* 14px of horizontal scroll at 390px, on the checkout and on the account's
   billing-address form.

   The culprit is invisible: the "Apartment, suite, unit, etc. (optional)"
   label. WooCommerce hides it with .screen-reader-text (absolute + clip), but
   the theme's `form .form-row label { width: 100% }` widens it back to the
   full column while it stays absolutely positioned — so it sticks 14px past
   the right edge and the page can be scrolled sideways. Give the label back
   the 1x1 box .screen-reader-text is supposed to have. */
.woocommerce form .form-row label.screen-reader-text,
.woocommerce-page form .form-row label.screen-reader-text,
.woocommerce .form-row label.screen-reader-text {
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
}

/* ==========================================================================
   6. Cart
   ========================================================================== */

/* Breathing room between the totals table and the checkout button. The empty
   strip *below* the button is not ours to remove: it is the Stripe express
   checkout container (Apple Pay / Google Pay / Link), which reserves its space
   and stays blank when the visitor's browser offers no wallet. Hiding it would
   hide a live payment method, so that one is a Stripe settings decision. */
.woocommerce .cart_totals .shop_table {
	margin-bottom: 20px;
}

/* The remove "×" sat outside the table's own left padding on a phone. */
@media (max-width: 767px) {
	.woocommerce table.shop_table_responsive tr td.product-remove {
		text-align: right;
		padding-top: 0;
	}

	.woocommerce table.shop_table_responsive tr td.product-remove a.remove {
		display: inline-block;
		float: none;
	}
}